@yamada-ui/react 2.2.5 → 2.2.6-dev-20260729093730
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/cjs/core/css/focus-ring.cjs +4 -1
- package/dist/cjs/core/css/focus-ring.cjs.map +1 -1
- package/dist/cjs/hooks/use-outside-click/index.cjs +4 -2
- package/dist/cjs/hooks/use-outside-click/index.cjs.map +1 -1
- package/dist/esm/core/css/focus-ring.js +4 -1
- package/dist/esm/core/css/focus-ring.js.map +1 -1
- package/dist/esm/hooks/use-outside-click/index.js +4 -2
- package/dist/esm/hooks/use-outside-click/index.js.map +1 -1
- package/dist/types/components/chart/polar-chart.style.d.ts +1 -1
- package/dist/types/core/css/focus-ring.d.ts +1 -0
- package/package.json +1 -1
|
@@ -18,7 +18,10 @@ const focusRingStyle = {
|
|
|
18
18
|
outlineStyle: "{focus-ring-style, solid}",
|
|
19
19
|
outlineWidth: "{focus-ring-width, 2px}"
|
|
20
20
|
},
|
|
21
|
-
none: {
|
|
21
|
+
none: {
|
|
22
|
+
boxShadow: "none",
|
|
23
|
+
outline: "none"
|
|
24
|
+
},
|
|
22
25
|
outline: {
|
|
23
26
|
outlineOffset: "{focus-ring-offset, 2px}",
|
|
24
27
|
outlineStyle: "{focus-ring-style, solid}",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus-ring.cjs","names":[],"sources":["../../../../src/core/css/focus-ring.ts"],"sourcesContent":["import type { CSSObject } from \"./index.types\"\nimport type { Transform } from \"./utils\"\n\nexport const focusRingStyle = {\n inline: {\n outlineOffset: \"{focus-ring-offset, -5px}\",\n outlineStyle: \"{focus-ring-style, solid}\",\n outlineWidth: \"{focus-ring-width, 1px}\",\n },\n inside: {\n borderColor: \"{focus-ring-color}\",\n boxShadow: \"inset 0 0 0 1px {focus-ring-color}\",\n outlineOffset: \"inherit\",\n outlineStyle: \"inherit\",\n outlineWidth: \"inherit\",\n },\n mixed: {\n borderColor: \"{focus-ring-color}\",\n outlineOffset: \"{focus-ring-offset, 0px}\",\n outlineStyle: \"{focus-ring-style, solid}\",\n outlineWidth: \"{focus-ring-width, 2px}\",\n },\n none: {\n outline: \"none\",\n },\n outline: {\n outlineOffset: \"{focus-ring-offset, 2px}\",\n outlineStyle: \"{focus-ring-style, solid}\",\n outlineWidth: \"{focus-ring-width, 2px}\",\n },\n outside: {\n borderColor: \"{focus-ring-color}\",\n boxShadow: \"0 0 0 1px {focus-ring-color}\",\n outlineOffset: \"inherit\",\n outlineStyle: \"inherit\",\n outlineWidth: \"inherit\",\n },\n} satisfies { [key: string]: CSSObject }\n\nexport function generateFocusRing(selector: string): Transform {\n return function (value, { prev }) {\n const focusRingColor =\n prev?.[\"--focus-ring-color\"] ?? \"{colorScheme.outline}\"\n\n const result = {\n \"--focus-ring-color\": focusRingColor,\n outlineColor: \"{focus-ring-color}\",\n [selector]: {\n ...(value in focusRingStyle\n ? focusRingStyle[value as keyof typeof focusRingStyle]\n : focusRingStyle.none),\n },\n }\n\n return result\n }\n}\n"],"mappings":";AAGA,MAAa,iBAAiB;CAC5B,QAAQ;EACN,eAAe;EACf,cAAc;EACd,cAAc;CAChB;CACA,QAAQ;EACN,aAAa;EACb,WAAW;EACX,eAAe;EACf,cAAc;EACd,cAAc;CAChB;CACA,OAAO;EACL,aAAa;EACb,eAAe;EACf,cAAc;EACd,cAAc;CAChB;CACA,MAAM
|
|
1
|
+
{"version":3,"file":"focus-ring.cjs","names":[],"sources":["../../../../src/core/css/focus-ring.ts"],"sourcesContent":["import type { CSSObject } from \"./index.types\"\nimport type { Transform } from \"./utils\"\n\nexport const focusRingStyle = {\n inline: {\n outlineOffset: \"{focus-ring-offset, -5px}\",\n outlineStyle: \"{focus-ring-style, solid}\",\n outlineWidth: \"{focus-ring-width, 1px}\",\n },\n inside: {\n borderColor: \"{focus-ring-color}\",\n boxShadow: \"inset 0 0 0 1px {focus-ring-color}\",\n outlineOffset: \"inherit\",\n outlineStyle: \"inherit\",\n outlineWidth: \"inherit\",\n },\n mixed: {\n borderColor: \"{focus-ring-color}\",\n outlineOffset: \"{focus-ring-offset, 0px}\",\n outlineStyle: \"{focus-ring-style, solid}\",\n outlineWidth: \"{focus-ring-width, 2px}\",\n },\n none: {\n boxShadow: \"none\",\n outline: \"none\",\n },\n outline: {\n outlineOffset: \"{focus-ring-offset, 2px}\",\n outlineStyle: \"{focus-ring-style, solid}\",\n outlineWidth: \"{focus-ring-width, 2px}\",\n },\n outside: {\n borderColor: \"{focus-ring-color}\",\n boxShadow: \"0 0 0 1px {focus-ring-color}\",\n outlineOffset: \"inherit\",\n outlineStyle: \"inherit\",\n outlineWidth: \"inherit\",\n },\n} satisfies { [key: string]: CSSObject }\n\nexport function generateFocusRing(selector: string): Transform {\n return function (value, { prev }) {\n const focusRingColor =\n prev?.[\"--focus-ring-color\"] ?? \"{colorScheme.outline}\"\n\n const result = {\n \"--focus-ring-color\": focusRingColor,\n outlineColor: \"{focus-ring-color}\",\n [selector]: {\n ...(value in focusRingStyle\n ? focusRingStyle[value as keyof typeof focusRingStyle]\n : focusRingStyle.none),\n },\n }\n\n return result\n }\n}\n"],"mappings":";AAGA,MAAa,iBAAiB;CAC5B,QAAQ;EACN,eAAe;EACf,cAAc;EACd,cAAc;CAChB;CACA,QAAQ;EACN,aAAa;EACb,WAAW;EACX,eAAe;EACf,cAAc;EACd,cAAc;CAChB;CACA,OAAO;EACL,aAAa;EACb,eAAe;EACf,cAAc;EACd,cAAc;CAChB;CACA,MAAM;EACJ,WAAW;EACX,SAAS;CACX;CACA,SAAS;EACP,eAAe;EACf,cAAc;EACd,cAAc;CAChB;CACA,SAAS;EACP,aAAa;EACb,WAAW;EACX,eAAe;EACf,cAAc;EACd,cAAc;CAChB;AACF;AAEA,SAAgB,kBAAkB,UAA6B;CAC7D,OAAO,SAAU,OAAO,EAAE,QAAQ;EAchC,OAAO;GATL,sBAHA,OAAO,yBAAyB;GAIhC,cAAc;IACb,WAAW,EACV,GAAI,SAAS,iBACT,eAAe,SACf,eAAe,KACrB;EAGU;CACd;AACF"}
|
|
@@ -69,12 +69,14 @@ const useOutsideClick = ({ ref, enabled = true, handler }) => {
|
|
|
69
69
|
};
|
|
70
70
|
const isValidEvent = (ev, ref) => {
|
|
71
71
|
const target = ev.target;
|
|
72
|
+
const path = ev.composedPath();
|
|
72
73
|
if ("button" in ev && ev.button > 0) return false;
|
|
73
74
|
if (target) {
|
|
74
75
|
if (!(0, require_utils_index.utils_exports.getDocument)(target).contains(target)) return false;
|
|
75
76
|
}
|
|
76
|
-
|
|
77
|
-
|
|
77
|
+
const contains = (el) => !!el && (path.includes(el) || el.contains(target));
|
|
78
|
+
if ((0, require_utils_index.utils_exports.isArray)(ref)) return !ref.some(({ current }) => contains(current));
|
|
79
|
+
else return !contains(ref.current);
|
|
78
80
|
};
|
|
79
81
|
//#endregion
|
|
80
82
|
exports.useOutsideClick = useOutsideClick;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["useCallbackRef"],"sources":["../../../../src/hooks/use-outside-click/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { getDocument, isArray, useCallbackRef } from \"../../utils\"\n\nexport interface UseOutsideClickProps {\n ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[]\n enabled?: boolean\n handler?: (ev: Event) => void\n}\n\n/**\n * `useOutsideClick` is a custom hook that detects click events outside of an element.\n *\n * @see https://yamada-ui.com/docs/hooks/use-outside-click\n */\nexport const useOutsideClick = ({\n ref,\n enabled = true,\n handler,\n}: UseOutsideClickProps) => {\n const handlerRef = useCallbackRef(handler)\n\n const state = useRef({\n ignoreEmulatedMouseEvents: false,\n isPointerDown: false,\n })\n\n const onPointerDown = useCallback(\n (ev: MouseEvent | TouchEvent) => {\n if (isValidEvent(ev, ref)) state.current.isPointerDown = true\n },\n [ref],\n )\n\n const onMouseUp = useCallback(\n (ev: MouseEvent) => {\n if (state.current.ignoreEmulatedMouseEvents) {\n state.current.ignoreEmulatedMouseEvents = false\n\n return\n }\n\n if (state.current.isPointerDown && handler && isValidEvent(ev, ref)) {\n state.current.isPointerDown = false\n\n handlerRef(ev)\n }\n },\n [handler, handlerRef, ref],\n )\n\n const onTouchEnd = useCallback(\n (ev: TouchEvent) => {\n state.current.ignoreEmulatedMouseEvents = true\n\n if (state.current.isPointerDown && handler && isValidEvent(ev, ref)) {\n state.current.isPointerDown = false\n\n handlerRef(ev)\n }\n },\n [handler, handlerRef, ref],\n )\n\n useEffect(() => {\n if (!enabled) return\n\n const doc = getDocument(isArray(ref) ? ref[0]?.current : ref.current)\n\n doc.addEventListener(\"mousedown\", onPointerDown, true)\n doc.addEventListener(\"mouseup\", onMouseUp, true)\n doc.addEventListener(\"touchstart\", onPointerDown, true)\n doc.addEventListener(\"touchend\", onTouchEnd, true)\n\n return () => {\n doc.removeEventListener(\"mousedown\", onPointerDown, true)\n doc.removeEventListener(\"mouseup\", onMouseUp, true)\n doc.removeEventListener(\"touchstart\", onPointerDown, true)\n doc.removeEventListener(\"touchend\", onTouchEnd, true)\n }\n }, [\n handler,\n ref,\n handlerRef,\n state,\n enabled,\n onPointerDown,\n onMouseUp,\n onTouchEnd,\n ])\n}\n\nconst isValidEvent = (\n ev: MouseEvent | TouchEvent,\n ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],\n) => {\n const target = ev.target as HTMLElement | null\n\n if (\"button\" in ev && ev.button > 0) return false\n\n if (target) if (!getDocument(target).contains(target)) return false\n\n if (isArray(ref)) return !ref.some((
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["useCallbackRef"],"sources":["../../../../src/hooks/use-outside-click/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { getDocument, isArray, useCallbackRef } from \"../../utils\"\n\nexport interface UseOutsideClickProps {\n ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[]\n enabled?: boolean\n handler?: (ev: Event) => void\n}\n\n/**\n * `useOutsideClick` is a custom hook that detects click events outside of an element.\n *\n * @see https://yamada-ui.com/docs/hooks/use-outside-click\n */\nexport const useOutsideClick = ({\n ref,\n enabled = true,\n handler,\n}: UseOutsideClickProps) => {\n const handlerRef = useCallbackRef(handler)\n\n const state = useRef({\n ignoreEmulatedMouseEvents: false,\n isPointerDown: false,\n })\n\n const onPointerDown = useCallback(\n (ev: MouseEvent | TouchEvent) => {\n if (isValidEvent(ev, ref)) state.current.isPointerDown = true\n },\n [ref],\n )\n\n const onMouseUp = useCallback(\n (ev: MouseEvent) => {\n if (state.current.ignoreEmulatedMouseEvents) {\n state.current.ignoreEmulatedMouseEvents = false\n\n return\n }\n\n if (state.current.isPointerDown && handler && isValidEvent(ev, ref)) {\n state.current.isPointerDown = false\n\n handlerRef(ev)\n }\n },\n [handler, handlerRef, ref],\n )\n\n const onTouchEnd = useCallback(\n (ev: TouchEvent) => {\n state.current.ignoreEmulatedMouseEvents = true\n\n if (state.current.isPointerDown && handler && isValidEvent(ev, ref)) {\n state.current.isPointerDown = false\n\n handlerRef(ev)\n }\n },\n [handler, handlerRef, ref],\n )\n\n useEffect(() => {\n if (!enabled) return\n\n const doc = getDocument(isArray(ref) ? ref[0]?.current : ref.current)\n\n doc.addEventListener(\"mousedown\", onPointerDown, true)\n doc.addEventListener(\"mouseup\", onMouseUp, true)\n doc.addEventListener(\"touchstart\", onPointerDown, true)\n doc.addEventListener(\"touchend\", onTouchEnd, true)\n\n return () => {\n doc.removeEventListener(\"mousedown\", onPointerDown, true)\n doc.removeEventListener(\"mouseup\", onMouseUp, true)\n doc.removeEventListener(\"touchstart\", onPointerDown, true)\n doc.removeEventListener(\"touchend\", onTouchEnd, true)\n }\n }, [\n handler,\n ref,\n handlerRef,\n state,\n enabled,\n onPointerDown,\n onMouseUp,\n onTouchEnd,\n ])\n}\n\nconst isValidEvent = (\n ev: MouseEvent | TouchEvent,\n ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],\n) => {\n const target = ev.target as HTMLElement | null\n const path = ev.composedPath()\n\n if (\"button\" in ev && ev.button > 0) return false\n\n if (target) if (!getDocument(target).contains(target)) return false\n\n const contains = (el: HTMLElement | null) =>\n !!el && (path.includes(el) || el.contains(target))\n\n if (isArray(ref)) return !ref.some(({ current }) => contains(current))\n else return !contains(ref.current)\n}\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,mBAAmB,EAC9B,KACA,UAAU,MACV,cAC0B;CAC1B,MAAM,aAAaA,YAAAA,eAAe,OAAO;CAEzC,MAAM,SAAA,GAAA,MAAA,OAAA,CAAe;EACnB,2BAA2B;EAC3B,eAAe;CACjB,CAAC;CAED,MAAM,iBAAA,GAAA,MAAA,YAAA,EACH,OAAgC;EAC/B,IAAI,aAAa,IAAI,GAAG,GAAG,MAAM,QAAQ,gBAAgB;CAC3D,GACA,CAAC,GAAG,CACN;CAEA,MAAM,aAAA,GAAA,MAAA,YAAA,EACH,OAAmB;EAClB,IAAI,MAAM,QAAQ,2BAA2B;GAC3C,MAAM,QAAQ,4BAA4B;GAE1C;EACF;EAEA,IAAI,MAAM,QAAQ,iBAAiB,WAAW,aAAa,IAAI,GAAG,GAAG;GACnE,MAAM,QAAQ,gBAAgB;GAE9B,WAAW,EAAE;EACf;CACF,GACA;EAAC;EAAS;EAAY;CAAG,CAC3B;CAEA,MAAM,cAAA,GAAA,MAAA,YAAA,EACH,OAAmB;EAClB,MAAM,QAAQ,4BAA4B;EAE1C,IAAI,MAAM,QAAQ,iBAAiB,WAAW,aAAa,IAAI,GAAG,GAAG;GACnE,MAAM,QAAQ,gBAAgB;GAE9B,WAAW,EAAE;EACf;CACF,GACA;EAAC;EAAS;EAAY;CAAG,CAC3B;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,SAAS;EAEd,MAAM,OAAA,GAAA,oBAAA,cAAA,YAAA,EAAA,GAAA,oBAAA,cAAA,QAAA,CAA0B,GAAG,IAAI,IAAI,EAAE,EAAE,UAAU,IAAI,OAAO;EAEpE,IAAI,iBAAiB,aAAa,eAAe,IAAI;EACrD,IAAI,iBAAiB,WAAW,WAAW,IAAI;EAC/C,IAAI,iBAAiB,cAAc,eAAe,IAAI;EACtD,IAAI,iBAAiB,YAAY,YAAY,IAAI;EAEjD,aAAa;GACX,IAAI,oBAAoB,aAAa,eAAe,IAAI;GACxD,IAAI,oBAAoB,WAAW,WAAW,IAAI;GAClD,IAAI,oBAAoB,cAAc,eAAe,IAAI;GACzD,IAAI,oBAAoB,YAAY,YAAY,IAAI;EACtD;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH;AAEA,MAAM,gBACJ,IACA,QACG;CACH,MAAM,SAAS,GAAG;CAClB,MAAM,OAAO,GAAG,aAAa;CAE7B,IAAI,YAAY,MAAM,GAAG,SAAS,GAAG,OAAO;CAE5C,IAAI,QAAY;MAAA,EAAA,GAAA,oBAAA,cAAA,YAAA,CAAa,MAAM,CAAC,CAAC,SAAS,MAAM,GAAG,OAAO;CAAA;CAE9D,MAAM,YAAY,OAChB,CAAC,CAAC,OAAO,KAAK,SAAS,EAAE,KAAK,GAAG,SAAS,MAAM;CAElD,KAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,GAAG,GAAG,OAAO,CAAC,IAAI,MAAM,EAAE,cAAc,SAAS,OAAO,CAAC;MAChE,OAAO,CAAC,SAAS,IAAI,OAAO;AACnC"}
|
|
@@ -18,7 +18,10 @@ const focusRingStyle = {
|
|
|
18
18
|
outlineStyle: "{focus-ring-style, solid}",
|
|
19
19
|
outlineWidth: "{focus-ring-width, 2px}"
|
|
20
20
|
},
|
|
21
|
-
none: {
|
|
21
|
+
none: {
|
|
22
|
+
boxShadow: "none",
|
|
23
|
+
outline: "none"
|
|
24
|
+
},
|
|
22
25
|
outline: {
|
|
23
26
|
outlineOffset: "{focus-ring-offset, 2px}",
|
|
24
27
|
outlineStyle: "{focus-ring-style, solid}",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus-ring.js","names":[],"sources":["../../../../src/core/css/focus-ring.ts"],"sourcesContent":["import type { CSSObject } from \"./index.types\"\nimport type { Transform } from \"./utils\"\n\nexport const focusRingStyle = {\n inline: {\n outlineOffset: \"{focus-ring-offset, -5px}\",\n outlineStyle: \"{focus-ring-style, solid}\",\n outlineWidth: \"{focus-ring-width, 1px}\",\n },\n inside: {\n borderColor: \"{focus-ring-color}\",\n boxShadow: \"inset 0 0 0 1px {focus-ring-color}\",\n outlineOffset: \"inherit\",\n outlineStyle: \"inherit\",\n outlineWidth: \"inherit\",\n },\n mixed: {\n borderColor: \"{focus-ring-color}\",\n outlineOffset: \"{focus-ring-offset, 0px}\",\n outlineStyle: \"{focus-ring-style, solid}\",\n outlineWidth: \"{focus-ring-width, 2px}\",\n },\n none: {\n outline: \"none\",\n },\n outline: {\n outlineOffset: \"{focus-ring-offset, 2px}\",\n outlineStyle: \"{focus-ring-style, solid}\",\n outlineWidth: \"{focus-ring-width, 2px}\",\n },\n outside: {\n borderColor: \"{focus-ring-color}\",\n boxShadow: \"0 0 0 1px {focus-ring-color}\",\n outlineOffset: \"inherit\",\n outlineStyle: \"inherit\",\n outlineWidth: \"inherit\",\n },\n} satisfies { [key: string]: CSSObject }\n\nexport function generateFocusRing(selector: string): Transform {\n return function (value, { prev }) {\n const focusRingColor =\n prev?.[\"--focus-ring-color\"] ?? \"{colorScheme.outline}\"\n\n const result = {\n \"--focus-ring-color\": focusRingColor,\n outlineColor: \"{focus-ring-color}\",\n [selector]: {\n ...(value in focusRingStyle\n ? focusRingStyle[value as keyof typeof focusRingStyle]\n : focusRingStyle.none),\n },\n }\n\n return result\n }\n}\n"],"mappings":";AAGA,MAAa,iBAAiB;CAC5B,QAAQ;EACN,eAAe;EACf,cAAc;EACd,cAAc;CAChB;CACA,QAAQ;EACN,aAAa;EACb,WAAW;EACX,eAAe;EACf,cAAc;EACd,cAAc;CAChB;CACA,OAAO;EACL,aAAa;EACb,eAAe;EACf,cAAc;EACd,cAAc;CAChB;CACA,MAAM
|
|
1
|
+
{"version":3,"file":"focus-ring.js","names":[],"sources":["../../../../src/core/css/focus-ring.ts"],"sourcesContent":["import type { CSSObject } from \"./index.types\"\nimport type { Transform } from \"./utils\"\n\nexport const focusRingStyle = {\n inline: {\n outlineOffset: \"{focus-ring-offset, -5px}\",\n outlineStyle: \"{focus-ring-style, solid}\",\n outlineWidth: \"{focus-ring-width, 1px}\",\n },\n inside: {\n borderColor: \"{focus-ring-color}\",\n boxShadow: \"inset 0 0 0 1px {focus-ring-color}\",\n outlineOffset: \"inherit\",\n outlineStyle: \"inherit\",\n outlineWidth: \"inherit\",\n },\n mixed: {\n borderColor: \"{focus-ring-color}\",\n outlineOffset: \"{focus-ring-offset, 0px}\",\n outlineStyle: \"{focus-ring-style, solid}\",\n outlineWidth: \"{focus-ring-width, 2px}\",\n },\n none: {\n boxShadow: \"none\",\n outline: \"none\",\n },\n outline: {\n outlineOffset: \"{focus-ring-offset, 2px}\",\n outlineStyle: \"{focus-ring-style, solid}\",\n outlineWidth: \"{focus-ring-width, 2px}\",\n },\n outside: {\n borderColor: \"{focus-ring-color}\",\n boxShadow: \"0 0 0 1px {focus-ring-color}\",\n outlineOffset: \"inherit\",\n outlineStyle: \"inherit\",\n outlineWidth: \"inherit\",\n },\n} satisfies { [key: string]: CSSObject }\n\nexport function generateFocusRing(selector: string): Transform {\n return function (value, { prev }) {\n const focusRingColor =\n prev?.[\"--focus-ring-color\"] ?? \"{colorScheme.outline}\"\n\n const result = {\n \"--focus-ring-color\": focusRingColor,\n outlineColor: \"{focus-ring-color}\",\n [selector]: {\n ...(value in focusRingStyle\n ? focusRingStyle[value as keyof typeof focusRingStyle]\n : focusRingStyle.none),\n },\n }\n\n return result\n }\n}\n"],"mappings":";AAGA,MAAa,iBAAiB;CAC5B,QAAQ;EACN,eAAe;EACf,cAAc;EACd,cAAc;CAChB;CACA,QAAQ;EACN,aAAa;EACb,WAAW;EACX,eAAe;EACf,cAAc;EACd,cAAc;CAChB;CACA,OAAO;EACL,aAAa;EACb,eAAe;EACf,cAAc;EACd,cAAc;CAChB;CACA,MAAM;EACJ,WAAW;EACX,SAAS;CACX;CACA,SAAS;EACP,eAAe;EACf,cAAc;EACd,cAAc;CAChB;CACA,SAAS;EACP,aAAa;EACb,WAAW;EACX,eAAe;EACf,cAAc;EACd,cAAc;CAChB;AACF;AAEA,SAAgB,kBAAkB,UAA6B;CAC7D,OAAO,SAAU,OAAO,EAAE,QAAQ;EAchC,OAAO;GATL,sBAHA,OAAO,yBAAyB;GAIhC,cAAc;IACb,WAAW,EACV,GAAI,SAAS,iBACT,eAAe,SACf,eAAe,KACrB;EAGU;CACd;AACF"}
|
|
@@ -68,12 +68,14 @@ const useOutsideClick = ({ ref, enabled = true, handler }) => {
|
|
|
68
68
|
};
|
|
69
69
|
const isValidEvent = (ev, ref) => {
|
|
70
70
|
const target = ev.target;
|
|
71
|
+
const path = ev.composedPath();
|
|
71
72
|
if ("button" in ev && ev.button > 0) return false;
|
|
72
73
|
if (target) {
|
|
73
74
|
if (!(0, utils_exports.getDocument)(target).contains(target)) return false;
|
|
74
75
|
}
|
|
75
|
-
|
|
76
|
-
|
|
76
|
+
const contains = (el) => !!el && (path.includes(el) || el.contains(target));
|
|
77
|
+
if ((0, utils_exports.isArray)(ref)) return !ref.some(({ current }) => contains(current));
|
|
78
|
+
else return !contains(ref.current);
|
|
77
79
|
};
|
|
78
80
|
//#endregion
|
|
79
81
|
export { useOutsideClick };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/hooks/use-outside-click/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { getDocument, isArray, useCallbackRef } from \"../../utils\"\n\nexport interface UseOutsideClickProps {\n ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[]\n enabled?: boolean\n handler?: (ev: Event) => void\n}\n\n/**\n * `useOutsideClick` is a custom hook that detects click events outside of an element.\n *\n * @see https://yamada-ui.com/docs/hooks/use-outside-click\n */\nexport const useOutsideClick = ({\n ref,\n enabled = true,\n handler,\n}: UseOutsideClickProps) => {\n const handlerRef = useCallbackRef(handler)\n\n const state = useRef({\n ignoreEmulatedMouseEvents: false,\n isPointerDown: false,\n })\n\n const onPointerDown = useCallback(\n (ev: MouseEvent | TouchEvent) => {\n if (isValidEvent(ev, ref)) state.current.isPointerDown = true\n },\n [ref],\n )\n\n const onMouseUp = useCallback(\n (ev: MouseEvent) => {\n if (state.current.ignoreEmulatedMouseEvents) {\n state.current.ignoreEmulatedMouseEvents = false\n\n return\n }\n\n if (state.current.isPointerDown && handler && isValidEvent(ev, ref)) {\n state.current.isPointerDown = false\n\n handlerRef(ev)\n }\n },\n [handler, handlerRef, ref],\n )\n\n const onTouchEnd = useCallback(\n (ev: TouchEvent) => {\n state.current.ignoreEmulatedMouseEvents = true\n\n if (state.current.isPointerDown && handler && isValidEvent(ev, ref)) {\n state.current.isPointerDown = false\n\n handlerRef(ev)\n }\n },\n [handler, handlerRef, ref],\n )\n\n useEffect(() => {\n if (!enabled) return\n\n const doc = getDocument(isArray(ref) ? ref[0]?.current : ref.current)\n\n doc.addEventListener(\"mousedown\", onPointerDown, true)\n doc.addEventListener(\"mouseup\", onMouseUp, true)\n doc.addEventListener(\"touchstart\", onPointerDown, true)\n doc.addEventListener(\"touchend\", onTouchEnd, true)\n\n return () => {\n doc.removeEventListener(\"mousedown\", onPointerDown, true)\n doc.removeEventListener(\"mouseup\", onMouseUp, true)\n doc.removeEventListener(\"touchstart\", onPointerDown, true)\n doc.removeEventListener(\"touchend\", onTouchEnd, true)\n }\n }, [\n handler,\n ref,\n handlerRef,\n state,\n enabled,\n onPointerDown,\n onMouseUp,\n onTouchEnd,\n ])\n}\n\nconst isValidEvent = (\n ev: MouseEvent | TouchEvent,\n ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],\n) => {\n const target = ev.target as HTMLElement | null\n\n if (\"button\" in ev && ev.button > 0) return false\n\n if (target) if (!getDocument(target).contains(target)) return false\n\n if (isArray(ref)) return !ref.some((
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/hooks/use-outside-click/index.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport { useCallback, useEffect, useRef } from \"react\"\nimport { getDocument, isArray, useCallbackRef } from \"../../utils\"\n\nexport interface UseOutsideClickProps {\n ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[]\n enabled?: boolean\n handler?: (ev: Event) => void\n}\n\n/**\n * `useOutsideClick` is a custom hook that detects click events outside of an element.\n *\n * @see https://yamada-ui.com/docs/hooks/use-outside-click\n */\nexport const useOutsideClick = ({\n ref,\n enabled = true,\n handler,\n}: UseOutsideClickProps) => {\n const handlerRef = useCallbackRef(handler)\n\n const state = useRef({\n ignoreEmulatedMouseEvents: false,\n isPointerDown: false,\n })\n\n const onPointerDown = useCallback(\n (ev: MouseEvent | TouchEvent) => {\n if (isValidEvent(ev, ref)) state.current.isPointerDown = true\n },\n [ref],\n )\n\n const onMouseUp = useCallback(\n (ev: MouseEvent) => {\n if (state.current.ignoreEmulatedMouseEvents) {\n state.current.ignoreEmulatedMouseEvents = false\n\n return\n }\n\n if (state.current.isPointerDown && handler && isValidEvent(ev, ref)) {\n state.current.isPointerDown = false\n\n handlerRef(ev)\n }\n },\n [handler, handlerRef, ref],\n )\n\n const onTouchEnd = useCallback(\n (ev: TouchEvent) => {\n state.current.ignoreEmulatedMouseEvents = true\n\n if (state.current.isPointerDown && handler && isValidEvent(ev, ref)) {\n state.current.isPointerDown = false\n\n handlerRef(ev)\n }\n },\n [handler, handlerRef, ref],\n )\n\n useEffect(() => {\n if (!enabled) return\n\n const doc = getDocument(isArray(ref) ? ref[0]?.current : ref.current)\n\n doc.addEventListener(\"mousedown\", onPointerDown, true)\n doc.addEventListener(\"mouseup\", onMouseUp, true)\n doc.addEventListener(\"touchstart\", onPointerDown, true)\n doc.addEventListener(\"touchend\", onTouchEnd, true)\n\n return () => {\n doc.removeEventListener(\"mousedown\", onPointerDown, true)\n doc.removeEventListener(\"mouseup\", onMouseUp, true)\n doc.removeEventListener(\"touchstart\", onPointerDown, true)\n doc.removeEventListener(\"touchend\", onTouchEnd, true)\n }\n }, [\n handler,\n ref,\n handlerRef,\n state,\n enabled,\n onPointerDown,\n onMouseUp,\n onTouchEnd,\n ])\n}\n\nconst isValidEvent = (\n ev: MouseEvent | TouchEvent,\n ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],\n) => {\n const target = ev.target as HTMLElement | null\n const path = ev.composedPath()\n\n if (\"button\" in ev && ev.button > 0) return false\n\n if (target) if (!getDocument(target).contains(target)) return false\n\n const contains = (el: HTMLElement | null) =>\n !!el && (path.includes(el) || el.contains(target))\n\n if (isArray(ref)) return !ref.some(({ current }) => contains(current))\n else return !contains(ref.current)\n}\n"],"mappings":";;;;;;;;;;AAiBA,MAAa,mBAAmB,EAC9B,KACA,UAAU,MACV,cAC0B;CAC1B,MAAM,aAAa,eAAe,OAAO;CAEzC,MAAM,QAAQ,OAAO;EACnB,2BAA2B;EAC3B,eAAe;CACjB,CAAC;CAED,MAAM,gBAAgB,aACnB,OAAgC;EAC/B,IAAI,aAAa,IAAI,GAAG,GAAG,MAAM,QAAQ,gBAAgB;CAC3D,GACA,CAAC,GAAG,CACN;CAEA,MAAM,YAAY,aACf,OAAmB;EAClB,IAAI,MAAM,QAAQ,2BAA2B;GAC3C,MAAM,QAAQ,4BAA4B;GAE1C;EACF;EAEA,IAAI,MAAM,QAAQ,iBAAiB,WAAW,aAAa,IAAI,GAAG,GAAG;GACnE,MAAM,QAAQ,gBAAgB;GAE9B,WAAW,EAAE;EACf;CACF,GACA;EAAC;EAAS;EAAY;CAAG,CAC3B;CAEA,MAAM,aAAa,aAChB,OAAmB;EAClB,MAAM,QAAQ,4BAA4B;EAE1C,IAAI,MAAM,QAAQ,iBAAiB,WAAW,aAAa,IAAI,GAAG,GAAG;GACnE,MAAM,QAAQ,gBAAgB;GAE9B,WAAW,EAAE;EACf;CACF,GACA;EAAC;EAAS;EAAY;CAAG,CAC3B;CAEA,gBAAgB;EACd,IAAI,CAAC,SAAS;EAEd,MAAM,OAAA,GAAA,cAAA,YAAA,EAAA,GAAA,cAAA,QAAA,CAA0B,GAAG,IAAI,IAAI,EAAE,EAAE,UAAU,IAAI,OAAO;EAEpE,IAAI,iBAAiB,aAAa,eAAe,IAAI;EACrD,IAAI,iBAAiB,WAAW,WAAW,IAAI;EAC/C,IAAI,iBAAiB,cAAc,eAAe,IAAI;EACtD,IAAI,iBAAiB,YAAY,YAAY,IAAI;EAEjD,aAAa;GACX,IAAI,oBAAoB,aAAa,eAAe,IAAI;GACxD,IAAI,oBAAoB,WAAW,WAAW,IAAI;GAClD,IAAI,oBAAoB,cAAc,eAAe,IAAI;GACzD,IAAI,oBAAoB,YAAY,YAAY,IAAI;EACtD;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH;AAEA,MAAM,gBACJ,IACA,QACG;CACH,MAAM,SAAS,GAAG;CAClB,MAAM,OAAO,GAAG,aAAa;CAE7B,IAAI,YAAY,MAAM,GAAG,SAAS,GAAG,OAAO;CAE5C,IAAI,QAAY;MAAA,EAAA,GAAA,cAAA,YAAA,CAAa,MAAM,CAAC,CAAC,SAAS,MAAM,GAAG,OAAO;CAAA;CAE9D,MAAM,YAAY,OAChB,CAAC,CAAC,OAAO,KAAK,SAAS,EAAE,KAAK,GAAG,SAAS,MAAM;CAElD,KAAA,GAAA,cAAA,QAAA,CAAY,GAAG,GAAG,OAAO,CAAC,IAAI,MAAM,EAAE,cAAc,SAAS,OAAO,CAAC;MAChE,OAAO,CAAC,SAAS,IAAI,OAAO;AACnC"}
|
|
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
|
|
|
2
2
|
import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
//#region src/components/chart/polar-chart.style.d.ts
|
|
5
|
-
declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "
|
|
5
|
+
declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
|
|
6
6
|
type PolarChartStyle = typeof polarChartStyle;
|
|
7
7
|
//#endregion
|
|
8
8
|
export { PolarChartStyle, polarChartStyle };
|
package/package.json
CHANGED