feat!: Rename AppearanceController as UserFocusController and tweak t…

…he event names.

This change was made as it better fits the behaviour of the controller and makes it easier to tell at a glance what the controller does.

docs/docs/controllers/appearance_controller.mdx → docs/docs/controllers/user_focus_controller.mdx

@@ -1,6 +1,6 @@
 ---
-id: AppearanceController
-title: AppearanceController
+id: UserFocusController
+title: UserFocusController
 ---
 
 import NoActions from "../_partials/no-actions.md";
@@ -36,8 +36,8 @@ A utility controller to wire up other stimulus actions when the user is active o
 
 | Event | When | Dispatched on | `event.detail` |
 | --- | --- | --- |--- |
-|`appearance:appear` | When the user becomes active on the page | the controller root element | - |
-|`appearance:away` | When the page gets minimized or loses focus | the controller root element | - |
+|`user-focus:active` | When the user becomes active on the page | the controller root element | - |
+|`user-focus:away` | When the page gets minimized or loses focus | the controller root element | - |
 
 ## Side Effects
 
@@ -52,11 +52,10 @@ The controller will install event listeners for:
 - `visibilitychange`
 
 
-
 ## How to Use
 
 <iframe
-  src="https://codesandbox.io/embed/appearancecontroller-v7r36?fontsize=14&hidenavigation=1&theme=dark"
+  src="https://codesandbox.io/embed/userfocuscontroller-v7r36?fontsize=14&hidenavigation=1&theme=dark"
   style={{width: "100%", height: "500px", border: "0", borderRadius: "4px", overflow: "hidden"}}
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 />

docs/sidebars.js

@@ -94,11 +94,11 @@ module.exports = {
       },
       {
         "Utility Controllers": [
-          "controllers/AppearanceController",
           "controllers/IntervalController",
           "controllers/IntersectionController",
           "controllers/PresenceController",
           "controllers/TimeoutController",
+          "controllers/UserFocusController",
         ],
       },
       {

src/controllers/utility/appearance_controller.ts → src/controllers/utility/user_focus_controller.ts

@@ -1,6 +1,6 @@
 import {BaseController} from "../../utilities/base_controller";
 
-export class AppearanceController extends BaseController {
+export class UserFocusController extends BaseController {
 
   initialize() {
     this._handleVisibility = this._handleVisibility.bind(this);
@@ -22,11 +22,11 @@ export class AppearanceController extends BaseController {
   }
 
   appear() {
-    this.dispatch(this.el, "appearance:appear");
+    this.dispatch(this.el, "user-focus:active");
   }
 
   away() {
-    this.dispatch(this.el, "appearance:away");
+    this.dispatch(this.el, "user-focus:away");
   }
 
   private _handleVisibility() {

src/index.ts

@@ -4,7 +4,6 @@ export {EphemeralController} from "./utilities/ephemeral_controller";
 
 // Controllers
 export {AnchorSpyController} from "./controllers/anchor_spy_controller";
-export {AppearanceController} from "./controllers/utility/appearance_controller";
 export {AsyncBlockController} from "./controllers/async_block_controller";
 export {AutoSubmitFormController} from "./controllers/forms/auto_submit_form_controller";
 export {AutosizeController} from "./controllers/forms/autosize_controller";
@@ -56,4 +55,5 @@ export {TimeoutController} from "./controllers/utility/timeout_controller";
 export {ToggleClassController} from "./controllers/toggle_class_controller";
 export {TurboFrameRCController} from "./controllers/turbo_frame_rc_controller";
 export {TurboFrameRefreshController} from "./controllers/turbo_frame_refresh_controller";
+export {UserFocusController} from "./controllers/utility/user_focus_controller";
 export {WordCountController} from "./controllers/forms/word_count_controller";