@yamada-ui/use-focus-visible 1.1.8 → 1.1.9-dev-20241006032009

Sign up to get free protection for your applications and to get access to all the features.
package/dist/index.d.mts CHANGED
@@ -5,8 +5,8 @@ interface TrackFocusVisibleOptions {
5
5
  declare const trackFocusVisible: (func: FocusVisibleCallback, { force }?: TrackFocusVisibleOptions) => () => void;
6
6
  declare const useFocusVisible: (options?: TrackFocusVisibleOptions) => {
7
7
  focusVisible: boolean;
8
- onFocus: () => void;
9
8
  onBlur: () => void;
9
+ onFocus: () => void;
10
10
  };
11
11
 
12
12
  export { trackFocusVisible, useFocusVisible };
package/dist/index.d.ts CHANGED
@@ -5,8 +5,8 @@ interface TrackFocusVisibleOptions {
5
5
  declare const trackFocusVisible: (func: FocusVisibleCallback, { force }?: TrackFocusVisibleOptions) => () => void;
6
6
  declare const useFocusVisible: (options?: TrackFocusVisibleOptions) => {
7
7
  focusVisible: boolean;
8
- onFocus: () => void;
9
8
  onBlur: () => void;
9
+ onFocus: () => void;
10
10
  };
11
11
 
12
12
  export { trackFocusVisible, useFocusVisible };
package/dist/index.js CHANGED
@@ -34,7 +34,7 @@ var hasBlurredWindowRecently = false;
34
34
  var handlers = /* @__PURE__ */ new Set();
35
35
  var trigger = (modality2, ev) => handlers.forEach((handler) => handler(modality2, ev));
36
36
  var onValid = (e) => {
37
- return !(e.metaKey || !import_utils.isMac && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
37
+ return !(e.metaKey || !(0, import_utils.isMac)() && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
38
38
  };
39
39
  var onKeyboard = (ev) => {
40
40
  hasEventBeforeFocus = true;
@@ -44,10 +44,11 @@ var onKeyboard = (ev) => {
44
44
  }
45
45
  };
46
46
  var onPointer = (ev) => {
47
+ var _a;
47
48
  modality = "pointer";
48
49
  if (ev.type === "mousedown" || ev.type === "pointerdown" || ev.type === "pointerup") {
49
50
  hasEventBeforeFocus = true;
50
- const target = ev.composedPath ? ev.composedPath()[0] : ev.target;
51
+ const target = (_a = ev.composedPath()[0]) != null ? _a : ev.target;
51
52
  if (target.matches(":focus-visible")) return;
52
53
  trigger("pointer", ev);
53
54
  }
@@ -116,8 +117,8 @@ var useFocusVisible = (options) => {
116
117
  }, [options]);
117
118
  return {
118
119
  focusVisible: focusVisible && focus,
119
- onFocus: () => setFocus(true),
120
- onBlur: () => setFocus(false)
120
+ onBlur: () => setFocus(false),
121
+ onFocus: () => setFocus(true)
121
122
  };
122
123
  };
123
124
  // Annotate the CommonJS export names for ESM import in node:
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { isMac } from \"@yamada-ui/utils\"\nimport { useEffect, useState } from \"react\"\n\ntype Modality = \"keyboard\" | \"pointer\" | \"virtual\"\ntype HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent\ntype Handler = (modality: Modality, e: HandlerEvent | null) => void\ntype FocusVisibleCallback = (isFocusVisible: boolean) => void\n\nlet hasSetup = false\nlet modality: Modality | null = null\nlet hasEventBeforeFocus = false\nlet hasBlurredWindowRecently = false\n\nconst handlers = new Set<Handler>()\n\nconst trigger = (modality: Modality, ev: HandlerEvent | null) =>\n handlers.forEach((handler) => handler(modality, ev))\n\nconst onValid = (e: KeyboardEvent) => {\n return !(\n e.metaKey ||\n (!isMac && e.altKey) ||\n e.ctrlKey ||\n e.key === \"Control\" ||\n e.key === \"Shift\" ||\n e.key === \"Meta\"\n )\n}\n\nconst onKeyboard = (ev: KeyboardEvent) => {\n hasEventBeforeFocus = true\n\n if (onValid(ev)) {\n modality = \"keyboard\"\n\n trigger(\"keyboard\", ev)\n }\n}\n\nconst onPointer = (ev: PointerEvent | MouseEvent) => {\n modality = \"pointer\"\n\n if (\n ev.type === \"mousedown\" ||\n ev.type === \"pointerdown\" ||\n ev.type === \"pointerup\"\n ) {\n hasEventBeforeFocus = true\n\n const target = ev.composedPath ? ev.composedPath()[0] : ev.target\n\n if ((target as HTMLElement).matches(\":focus-visible\")) return\n\n trigger(\"pointer\", ev)\n }\n}\n\nconst isVirtualClick = (ev: MouseEvent | PointerEvent): boolean => {\n if ((ev as any).mozInputSource === 0 && ev.isTrusted) return true\n\n return ev.detail === 0 && !(ev as PointerEvent).pointerType\n}\n\nconst onClick = (ev: MouseEvent) => {\n if (!isVirtualClick(ev)) return\n\n hasEventBeforeFocus = true\n\n modality = \"virtual\"\n}\n\nconst onFocus = (ev: FocusEvent) => {\n if (ev.target === window || ev.target === document) return\n\n if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {\n modality = \"virtual\"\n\n trigger(\"virtual\", ev)\n }\n\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = false\n}\n\nconst onBlur = () => {\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = true\n}\n\nconst isFocusVisible = () => modality !== \"pointer\"\n\nconst setGlobalFocusEvents = () => {\n if (typeof window === \"undefined\" || hasSetup) return\n\n const { focus } = HTMLElement.prototype\n\n HTMLElement.prototype.focus = function customFocus(...args) {\n hasEventBeforeFocus = true\n\n if (this) focus.apply(this, args)\n }\n\n document.addEventListener(\"keydown\", onKeyboard, true)\n document.addEventListener(\"keyup\", onKeyboard, true)\n document.addEventListener(\"click\", onClick, true)\n\n window.addEventListener(\"focus\", onFocus, true)\n window.addEventListener(\"blur\", onBlur, false)\n\n if (typeof PointerEvent !== \"undefined\") {\n document.addEventListener(\"pointerdown\", onPointer, true)\n document.addEventListener(\"pointermove\", onPointer, true)\n document.addEventListener(\"pointerup\", onPointer, true)\n } else {\n document.addEventListener(\"mousedown\", onPointer, true)\n document.addEventListener(\"mousemove\", onPointer, true)\n document.addEventListener(\"mouseup\", onPointer, true)\n }\n\n hasSetup = true\n}\n\ninterface TrackFocusVisibleOptions {\n force?: boolean\n}\n\nexport const trackFocusVisible = (\n func: FocusVisibleCallback,\n { force }: TrackFocusVisibleOptions = {},\n) => {\n if (force) hasSetup = false\n\n setGlobalFocusEvents()\n\n func(isFocusVisible())\n\n const handler = () => func(isFocusVisible())\n\n handlers.add(handler)\n\n return () => {\n handlers.delete(handler)\n }\n}\n\nexport const useFocusVisible = (options?: TrackFocusVisibleOptions) => {\n const [focusVisible, setFocusVisible] = useState(false)\n const [focus, setFocus] = useState(false)\n\n useEffect(() => {\n return trackFocusVisible(setFocusVisible, options)\n }, [options])\n\n return {\n focusVisible: focusVisible && focus,\n onFocus: () => setFocus(true),\n onBlur: () => setFocus(false),\n }\n}\n"],"mappings":"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","names":["modality"]}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { isMac } from \"@yamada-ui/utils\"\nimport { useEffect, useState } from \"react\"\n\ntype Modality = \"keyboard\" | \"pointer\" | \"virtual\"\ntype HandlerEvent = FocusEvent | KeyboardEvent | MouseEvent | PointerEvent\ntype Handler = (modality: Modality, e: HandlerEvent | null) => void\ntype FocusVisibleCallback = (isFocusVisible: boolean) => void\n\nlet hasSetup = false\nlet modality: Modality | null = null\nlet hasEventBeforeFocus = false\nlet hasBlurredWindowRecently = false\n\nconst handlers = new Set<Handler>()\n\nconst trigger = (modality: Modality, ev: HandlerEvent | null) =>\n handlers.forEach((handler) => handler(modality, ev))\n\nconst onValid = (e: KeyboardEvent) => {\n return !(\n e.metaKey ||\n (!isMac() && e.altKey) ||\n e.ctrlKey ||\n e.key === \"Control\" ||\n e.key === \"Shift\" ||\n e.key === \"Meta\"\n )\n}\n\nconst onKeyboard = (ev: KeyboardEvent) => {\n hasEventBeforeFocus = true\n\n if (onValid(ev)) {\n modality = \"keyboard\"\n\n trigger(\"keyboard\", ev)\n }\n}\n\nconst onPointer = (ev: MouseEvent | PointerEvent) => {\n modality = \"pointer\"\n\n if (\n ev.type === \"mousedown\" ||\n ev.type === \"pointerdown\" ||\n ev.type === \"pointerup\"\n ) {\n hasEventBeforeFocus = true\n\n const target = ev.composedPath()[0] ?? ev.target\n\n if ((target as HTMLElement).matches(\":focus-visible\")) return\n\n trigger(\"pointer\", ev)\n }\n}\n\nconst isVirtualClick = (ev: MouseEvent | PointerEvent): boolean => {\n if ((ev as any).mozInputSource === 0 && ev.isTrusted) return true\n\n return ev.detail === 0 && !(ev as PointerEvent).pointerType\n}\n\nconst onClick = (ev: MouseEvent) => {\n if (!isVirtualClick(ev)) return\n\n hasEventBeforeFocus = true\n\n modality = \"virtual\"\n}\n\nconst onFocus = (ev: FocusEvent) => {\n if (ev.target === window || ev.target === document) return\n\n if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {\n modality = \"virtual\"\n\n trigger(\"virtual\", ev)\n }\n\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = false\n}\n\nconst onBlur = () => {\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = true\n}\n\nconst isFocusVisible = () => modality !== \"pointer\"\n\nconst setGlobalFocusEvents = () => {\n if (typeof window === \"undefined\" || hasSetup) return\n\n const { focus } = HTMLElement.prototype\n\n HTMLElement.prototype.focus = function customFocus(...args) {\n hasEventBeforeFocus = true\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (this) focus.apply(this, args)\n }\n\n document.addEventListener(\"keydown\", onKeyboard, true)\n document.addEventListener(\"keyup\", onKeyboard, true)\n document.addEventListener(\"click\", onClick, true)\n\n window.addEventListener(\"focus\", onFocus, true)\n window.addEventListener(\"blur\", onBlur, false)\n\n if (typeof PointerEvent !== \"undefined\") {\n document.addEventListener(\"pointerdown\", onPointer, true)\n document.addEventListener(\"pointermove\", onPointer, true)\n document.addEventListener(\"pointerup\", onPointer, true)\n } else {\n document.addEventListener(\"mousedown\", onPointer, true)\n document.addEventListener(\"mousemove\", onPointer, true)\n document.addEventListener(\"mouseup\", onPointer, true)\n }\n\n hasSetup = true\n}\n\ninterface TrackFocusVisibleOptions {\n force?: boolean\n}\n\nexport const trackFocusVisible = (\n func: FocusVisibleCallback,\n { force }: TrackFocusVisibleOptions = {},\n) => {\n if (force) hasSetup = false\n\n setGlobalFocusEvents()\n\n func(isFocusVisible())\n\n const handler = () => func(isFocusVisible())\n\n handlers.add(handler)\n\n return () => {\n handlers.delete(handler)\n }\n}\n\nexport const useFocusVisible = (options?: TrackFocusVisibleOptions) => {\n const [focusVisible, setFocusVisible] = useState(false)\n const [focus, setFocus] = useState(false)\n\n useEffect(() => {\n return trackFocusVisible(setFocusVisible, options)\n }, [options])\n\n return {\n focusVisible: focusVisible && focus,\n onBlur: () => setFocus(false),\n onFocus: () => setFocus(true),\n }\n}\n"],"mappings":"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","names":["modality"]}
package/dist/index.mjs CHANGED
@@ -10,7 +10,7 @@ var hasBlurredWindowRecently = false;
10
10
  var handlers = /* @__PURE__ */ new Set();
11
11
  var trigger = (modality2, ev) => handlers.forEach((handler) => handler(modality2, ev));
12
12
  var onValid = (e) => {
13
- return !(e.metaKey || !isMac && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
13
+ return !(e.metaKey || !isMac() && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
14
14
  };
15
15
  var onKeyboard = (ev) => {
16
16
  hasEventBeforeFocus = true;
@@ -20,10 +20,11 @@ var onKeyboard = (ev) => {
20
20
  }
21
21
  };
22
22
  var onPointer = (ev) => {
23
+ var _a;
23
24
  modality = "pointer";
24
25
  if (ev.type === "mousedown" || ev.type === "pointerdown" || ev.type === "pointerup") {
25
26
  hasEventBeforeFocus = true;
26
- const target = ev.composedPath ? ev.composedPath()[0] : ev.target;
27
+ const target = (_a = ev.composedPath()[0]) != null ? _a : ev.target;
27
28
  if (target.matches(":focus-visible")) return;
28
29
  trigger("pointer", ev);
29
30
  }
@@ -92,8 +93,8 @@ var useFocusVisible = (options) => {
92
93
  }, [options]);
93
94
  return {
94
95
  focusVisible: focusVisible && focus,
95
- onFocus: () => setFocus(true),
96
- onBlur: () => setFocus(false)
96
+ onBlur: () => setFocus(false),
97
+ onFocus: () => setFocus(true)
97
98
  };
98
99
  };
99
100
  export {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { isMac } from \"@yamada-ui/utils\"\nimport { useEffect, useState } from \"react\"\n\ntype Modality = \"keyboard\" | \"pointer\" | \"virtual\"\ntype HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent\ntype Handler = (modality: Modality, e: HandlerEvent | null) => void\ntype FocusVisibleCallback = (isFocusVisible: boolean) => void\n\nlet hasSetup = false\nlet modality: Modality | null = null\nlet hasEventBeforeFocus = false\nlet hasBlurredWindowRecently = false\n\nconst handlers = new Set<Handler>()\n\nconst trigger = (modality: Modality, ev: HandlerEvent | null) =>\n handlers.forEach((handler) => handler(modality, ev))\n\nconst onValid = (e: KeyboardEvent) => {\n return !(\n e.metaKey ||\n (!isMac && e.altKey) ||\n e.ctrlKey ||\n e.key === \"Control\" ||\n e.key === \"Shift\" ||\n e.key === \"Meta\"\n )\n}\n\nconst onKeyboard = (ev: KeyboardEvent) => {\n hasEventBeforeFocus = true\n\n if (onValid(ev)) {\n modality = \"keyboard\"\n\n trigger(\"keyboard\", ev)\n }\n}\n\nconst onPointer = (ev: PointerEvent | MouseEvent) => {\n modality = \"pointer\"\n\n if (\n ev.type === \"mousedown\" ||\n ev.type === \"pointerdown\" ||\n ev.type === \"pointerup\"\n ) {\n hasEventBeforeFocus = true\n\n const target = ev.composedPath ? ev.composedPath()[0] : ev.target\n\n if ((target as HTMLElement).matches(\":focus-visible\")) return\n\n trigger(\"pointer\", ev)\n }\n}\n\nconst isVirtualClick = (ev: MouseEvent | PointerEvent): boolean => {\n if ((ev as any).mozInputSource === 0 && ev.isTrusted) return true\n\n return ev.detail === 0 && !(ev as PointerEvent).pointerType\n}\n\nconst onClick = (ev: MouseEvent) => {\n if (!isVirtualClick(ev)) return\n\n hasEventBeforeFocus = true\n\n modality = \"virtual\"\n}\n\nconst onFocus = (ev: FocusEvent) => {\n if (ev.target === window || ev.target === document) return\n\n if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {\n modality = \"virtual\"\n\n trigger(\"virtual\", ev)\n }\n\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = false\n}\n\nconst onBlur = () => {\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = true\n}\n\nconst isFocusVisible = () => modality !== \"pointer\"\n\nconst setGlobalFocusEvents = () => {\n if (typeof window === \"undefined\" || hasSetup) return\n\n const { focus } = HTMLElement.prototype\n\n HTMLElement.prototype.focus = function customFocus(...args) {\n hasEventBeforeFocus = true\n\n if (this) focus.apply(this, args)\n }\n\n document.addEventListener(\"keydown\", onKeyboard, true)\n document.addEventListener(\"keyup\", onKeyboard, true)\n document.addEventListener(\"click\", onClick, true)\n\n window.addEventListener(\"focus\", onFocus, true)\n window.addEventListener(\"blur\", onBlur, false)\n\n if (typeof PointerEvent !== \"undefined\") {\n document.addEventListener(\"pointerdown\", onPointer, true)\n document.addEventListener(\"pointermove\", onPointer, true)\n document.addEventListener(\"pointerup\", onPointer, true)\n } else {\n document.addEventListener(\"mousedown\", onPointer, true)\n document.addEventListener(\"mousemove\", onPointer, true)\n document.addEventListener(\"mouseup\", onPointer, true)\n }\n\n hasSetup = true\n}\n\ninterface TrackFocusVisibleOptions {\n force?: boolean\n}\n\nexport const trackFocusVisible = (\n func: FocusVisibleCallback,\n { force }: TrackFocusVisibleOptions = {},\n) => {\n if (force) hasSetup = false\n\n setGlobalFocusEvents()\n\n func(isFocusVisible())\n\n const handler = () => func(isFocusVisible())\n\n handlers.add(handler)\n\n return () => {\n handlers.delete(handler)\n }\n}\n\nexport const useFocusVisible = (options?: TrackFocusVisibleOptions) => {\n const [focusVisible, setFocusVisible] = useState(false)\n const [focus, setFocus] = useState(false)\n\n useEffect(() => {\n return trackFocusVisible(setFocusVisible, options)\n }, [options])\n\n return {\n focusVisible: focusVisible && focus,\n onFocus: () => setFocus(true),\n onBlur: () => setFocus(false),\n }\n}\n"],"mappings":"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","names":["modality"]}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { isMac } from \"@yamada-ui/utils\"\nimport { useEffect, useState } from \"react\"\n\ntype Modality = \"keyboard\" | \"pointer\" | \"virtual\"\ntype HandlerEvent = FocusEvent | KeyboardEvent | MouseEvent | PointerEvent\ntype Handler = (modality: Modality, e: HandlerEvent | null) => void\ntype FocusVisibleCallback = (isFocusVisible: boolean) => void\n\nlet hasSetup = false\nlet modality: Modality | null = null\nlet hasEventBeforeFocus = false\nlet hasBlurredWindowRecently = false\n\nconst handlers = new Set<Handler>()\n\nconst trigger = (modality: Modality, ev: HandlerEvent | null) =>\n handlers.forEach((handler) => handler(modality, ev))\n\nconst onValid = (e: KeyboardEvent) => {\n return !(\n e.metaKey ||\n (!isMac() && e.altKey) ||\n e.ctrlKey ||\n e.key === \"Control\" ||\n e.key === \"Shift\" ||\n e.key === \"Meta\"\n )\n}\n\nconst onKeyboard = (ev: KeyboardEvent) => {\n hasEventBeforeFocus = true\n\n if (onValid(ev)) {\n modality = \"keyboard\"\n\n trigger(\"keyboard\", ev)\n }\n}\n\nconst onPointer = (ev: MouseEvent | PointerEvent) => {\n modality = \"pointer\"\n\n if (\n ev.type === \"mousedown\" ||\n ev.type === \"pointerdown\" ||\n ev.type === \"pointerup\"\n ) {\n hasEventBeforeFocus = true\n\n const target = ev.composedPath()[0] ?? ev.target\n\n if ((target as HTMLElement).matches(\":focus-visible\")) return\n\n trigger(\"pointer\", ev)\n }\n}\n\nconst isVirtualClick = (ev: MouseEvent | PointerEvent): boolean => {\n if ((ev as any).mozInputSource === 0 && ev.isTrusted) return true\n\n return ev.detail === 0 && !(ev as PointerEvent).pointerType\n}\n\nconst onClick = (ev: MouseEvent) => {\n if (!isVirtualClick(ev)) return\n\n hasEventBeforeFocus = true\n\n modality = \"virtual\"\n}\n\nconst onFocus = (ev: FocusEvent) => {\n if (ev.target === window || ev.target === document) return\n\n if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {\n modality = \"virtual\"\n\n trigger(\"virtual\", ev)\n }\n\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = false\n}\n\nconst onBlur = () => {\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = true\n}\n\nconst isFocusVisible = () => modality !== \"pointer\"\n\nconst setGlobalFocusEvents = () => {\n if (typeof window === \"undefined\" || hasSetup) return\n\n const { focus } = HTMLElement.prototype\n\n HTMLElement.prototype.focus = function customFocus(...args) {\n hasEventBeforeFocus = true\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n if (this) focus.apply(this, args)\n }\n\n document.addEventListener(\"keydown\", onKeyboard, true)\n document.addEventListener(\"keyup\", onKeyboard, true)\n document.addEventListener(\"click\", onClick, true)\n\n window.addEventListener(\"focus\", onFocus, true)\n window.addEventListener(\"blur\", onBlur, false)\n\n if (typeof PointerEvent !== \"undefined\") {\n document.addEventListener(\"pointerdown\", onPointer, true)\n document.addEventListener(\"pointermove\", onPointer, true)\n document.addEventListener(\"pointerup\", onPointer, true)\n } else {\n document.addEventListener(\"mousedown\", onPointer, true)\n document.addEventListener(\"mousemove\", onPointer, true)\n document.addEventListener(\"mouseup\", onPointer, true)\n }\n\n hasSetup = true\n}\n\ninterface TrackFocusVisibleOptions {\n force?: boolean\n}\n\nexport const trackFocusVisible = (\n func: FocusVisibleCallback,\n { force }: TrackFocusVisibleOptions = {},\n) => {\n if (force) hasSetup = false\n\n setGlobalFocusEvents()\n\n func(isFocusVisible())\n\n const handler = () => func(isFocusVisible())\n\n handlers.add(handler)\n\n return () => {\n handlers.delete(handler)\n }\n}\n\nexport const useFocusVisible = (options?: TrackFocusVisibleOptions) => {\n const [focusVisible, setFocusVisible] = useState(false)\n const [focus, setFocus] = useState(false)\n\n useEffect(() => {\n return trackFocusVisible(setFocusVisible, options)\n }, [options])\n\n return {\n focusVisible: focusVisible && focus,\n onBlur: () => setFocus(false),\n onFocus: () => setFocus(true),\n }\n}\n"],"mappings":"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","names":["modality"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/use-focus-visible",
3
- "version": "1.1.8",
3
+ "version": "1.1.9-dev-20241006032009",
4
4
  "description": "Yamada UI useFocusVisible custom hook",
5
5
  "keywords": [
6
6
  "use-focus-visible"
@@ -25,7 +25,7 @@
25
25
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
26
26
  },
27
27
  "dependencies": {
28
- "@yamada-ui/utils": "1.5.2"
28
+ "@yamada-ui/utils": "1.5.3-dev-20241006032009"
29
29
  },
30
30
  "devDependencies": {
31
31
  "clean-package": "2.2.0",