@clayui/provider - npm Package Compare versions

Comparing version 3.161.0 to 3.162.0

lib/cjs/useTabReturnFocusRingAnimation.js

+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useTabReturnFocusRingAnimation_exports = {};
+__export(useTabReturnFocusRingAnimation_exports, {
+  FOCUS_RING_ANIMATION_CLASS: () => FOCUS_RING_ANIMATION_CLASS,
+  TAB_RETURNING_CLASS: () => TAB_RETURNING_CLASS,
+  useTabReturnFocusRingAnimation: () => useTabReturnFocusRingAnimation
+});
+module.exports = __toCommonJS(useTabReturnFocusRingAnimation_exports);
+var import_react = require("react");
+const FOCUS_RING_ANIMATION_CLASS = "c-prefers-focus-ring";
+const TAB_RETURNING_CLASS = "c-tab-returning";
+let listenerCount = 0;
+function onVisibilityChange() {
+  const { classList } = document.body;
+  if (!document.hidden && classList.contains(FOCUS_RING_ANIMATION_CLASS)) {
+    classList.add(TAB_RETURNING_CLASS);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        classList.remove(TAB_RETURNING_CLASS);
+      });
+    });
+  }
+}
+function useTabReturnFocusRingAnimation() {
+  (0, import_react.useEffect)(() => {
+    if (listenerCount === 0) {
+      document.addEventListener("visibilitychange", onVisibilityChange);
+    }
+    listenerCount += 1;
+    return () => {
+      listenerCount -= 1;
+      if (listenerCount === 0) {
+        document.removeEventListener(
+          "visibilitychange",
+          onVisibilityChange
+        );
+      }
+    };
+  }, []);
+}

lib/esm/useTabReturnFocusRingAnimation.js

+import { useEffect } from "react";
+const FOCUS_RING_ANIMATION_CLASS = "c-prefers-focus-ring";
+const TAB_RETURNING_CLASS = "c-tab-returning";
+let listenerCount = 0;
+function onVisibilityChange() {
+  const { classList } = document.body;
+  if (!document.hidden && classList.contains(FOCUS_RING_ANIMATION_CLASS)) {
+    classList.add(TAB_RETURNING_CLASS);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        classList.remove(TAB_RETURNING_CLASS);
+      });
+    });
+  }
+}
+function useTabReturnFocusRingAnimation() {
+  useEffect(() => {
+    if (listenerCount === 0) {
+      document.addEventListener("visibilitychange", onVisibilityChange);
+    }
+    listenerCount += 1;
+    return () => {
+      listenerCount -= 1;
+      if (listenerCount === 0) {
+        document.removeEventListener(
+          "visibilitychange",
+          onVisibilityChange
+        );
+      }
+    };
+  }, []);
+}
+export {
+  FOCUS_RING_ANIMATION_CLASS,
+  TAB_RETURNING_CLASS,
+  useTabReturnFocusRingAnimation
+};

lib/useTabReturnFocusRingAnimation.d.ts

+/**
+ * SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+export declare const FOCUS_RING_ANIMATION_CLASS = "c-prefers-focus-ring";
+export declare const TAB_RETURNING_CLASS = "c-tab-returning";
+export declare function useTabReturnFocusRingAnimation(): void;

lib/cjs/Provider.js

@@ -39,2 +39,3 @@ "use strict";
 var import_useReducedMotion = require("./useReducedMotion");
+var import_useTabReturnFocusRingAnimation = require("./useTabReturnFocusRingAnimation");
 const Context = import_react.default.createContext({});
@@ -55,2 +56,3 @@ Context.displayName = "ClayProviderContext";
   const isReducedMotion = (0, import_useReducedMotion.useReducedMotion)(reducedMotion);
+  (0, import_useTabReturnFocusRingAnimation.useTabReturnFocusRingAnimation)();
   return /* @__PURE__ */ import_react.default.createElement(
@@ -57,0 +59,0 @@ Context.Provider,

lib/esm/Provider.js

@@ -5,2 +5,3 @@ import { ClayIconSpriteContext } from "@clayui/icon";
 import { useReducedMotion } from "./useReducedMotion";
+import { useTabReturnFocusRingAnimation } from "./useTabReturnFocusRingAnimation";
 const Context = React.createContext({});
@@ -21,2 +22,3 @@ Context.displayName = "ClayProviderContext";
   const isReducedMotion = useReducedMotion(reducedMotion);
+  useTabReturnFocusRingAnimation();
   return /* @__PURE__ */ React.createElement(
@@ -23,0 +25,0 @@ Context.Provider,

package.json

@@ -6,3 +6,3 @@ {
 	"dependencies": {
-		"@clayui/icon": "^3.161.0"
+		"@clayui/icon": "^3.162.0"
 	},
@@ -21,3 +21,3 @@ "description": "ClayProvider component in React",
 	"peerDependencies": {
-		"@clayui/css": "^3.161.0",
+		"@clayui/css": "^3.162.0",
 		"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
@@ -34,3 +34,3 @@ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
 	},
-	"version": "3.161.0",
+	"version": "3.162.0",
 	"module": "lib/esm/index.js",
@@ -37,0 +37,0 @@ "exports": {

No alert changes

Improved metrics

Total package byte prevSize

22281

20.17%

Number of package files

20

17.65%

Lines of code

644

19.48%

Dependency changes

• Updated

  @clayui/icon@^3.162.0