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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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-20241006000212",
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-20241006000212"
29
29
  },
30
30
  "devDependencies": {
31
31
  "clean-package": "2.2.0",