softable-pixels-web 1.1.21 → 1.1.23
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/{BasePopover-BVeMpuWR.js → BasePopover-CES18mzR.js} +3 -2
- package/dist/BasePopover-CES18mzR.js.map +1 -0
- package/dist/{ContextMenu-B94eRUm7.js → ContextMenu-D7lPQcw1.js} +16 -8
- package/dist/ContextMenu-D7lPQcw1.js.map +1 -0
- package/dist/{Popover-BDNQO09F.js → Popover-CNon8bZo.js} +183 -80
- package/dist/Popover-CNon8bZo.js.map +1 -0
- package/dist/{Select-Bad465DY.js → Select-CGWL6BOg.js} +217 -21
- package/dist/Select-CGWL6BOg.js.map +1 -0
- package/dist/base-popover.d.ts +3 -3
- package/dist/base-popover.js +4 -4
- package/dist/button.d.ts +1 -1
- package/dist/context-menu.js +5 -5
- package/dist/{index-DEKll7zF.d.ts → index-B6t8KE4A.d.ts} +2 -3
- package/dist/{index-modFVzpZ.d.ts → index-CK68mp8m.d.ts} +3 -3
- package/dist/{index-ClqTlRGD.d.ts → index-CPoGZ0_L.d.ts} +2 -2
- package/dist/{index-CyvNJW2l.d.ts → index-CYnINkUh.d.ts} +2 -2
- package/dist/{index-DVE8mV5m.d.ts → index-DUP_xS5q.d.ts} +3 -3
- package/dist/index.d.ts +6 -6
- package/dist/index.js +6 -6
- package/dist/popover.d.ts +2 -2
- package/dist/popover.js +3 -3
- package/dist/select.d.ts +2 -2
- package/dist/select.js +5 -5
- package/dist/tab-switch.d.ts +1 -1
- package/dist/{types-CRA-1_6O.d.ts → types-Bayf6NdC.d.ts} +5 -2
- package/dist/use-dismiss.d.ts +2 -0
- package/dist/use-dismiss.js +1 -1
- package/dist/use-floating.js +1 -1
- package/dist/{useDismiss-CAEk_GV-.js → useDismiss-DwQfMU11.js} +13 -6
- package/dist/useDismiss-DwQfMU11.js.map +1 -0
- package/dist/{useFloating-DRwB71jG.js → useFloating-DCxblHIR.js} +1 -2
- package/dist/{useFloating-DRwB71jG.js.map → useFloating-DCxblHIR.js.map} +1 -1
- package/package.json +1 -1
- package/dist/BasePopover-BVeMpuWR.js.map +0 -1
- package/dist/ContextMenu-B94eRUm7.js.map +0 -1
- package/dist/Popover-BDNQO09F.js.map +0 -1
- package/dist/Select-Bad465DY.js.map +0 -1
- package/dist/useDismiss-CAEk_GV-.js.map +0 -1
package/dist/use-dismiss.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { RefObject } from "react";
|
|
|
3
3
|
//#region src/hooks/useDismiss/index.d.ts
|
|
4
4
|
type UseDismissParams = {
|
|
5
5
|
open: boolean;
|
|
6
|
+
dismissScope?: string;
|
|
6
7
|
closeOnEscape?: boolean;
|
|
7
8
|
closeOnOutsideClick?: boolean;
|
|
8
9
|
refs: Array<RefObject<HTMLElement | null>>;
|
|
@@ -11,6 +12,7 @@ type UseDismissParams = {
|
|
|
11
12
|
declare function useDismiss({
|
|
12
13
|
open,
|
|
13
14
|
refs,
|
|
15
|
+
dismissScope,
|
|
14
16
|
closeOnEscape,
|
|
15
17
|
closeOnOutsideClick,
|
|
16
18
|
onClose
|
package/dist/use-dismiss.js
CHANGED
package/dist/use-floating.js
CHANGED
|
@@ -1,13 +1,19 @@
|
|
|
1
1
|
import { useEffect } from "react";
|
|
2
2
|
|
|
3
3
|
//#region src/hooks/useDismiss/index.ts
|
|
4
|
-
function useDismiss({ open, refs, closeOnEscape = true, closeOnOutsideClick = true, onClose }) {
|
|
4
|
+
function useDismiss({ open, refs, dismissScope, closeOnEscape = true, closeOnOutsideClick = true, onClose }) {
|
|
5
5
|
useEffect(() => {
|
|
6
6
|
if (!open) return;
|
|
7
7
|
const isInsideSomeRef = (node) => refs.some((r) => r.current?.contains(node));
|
|
8
|
-
const
|
|
8
|
+
const isInsideScope = (target) => {
|
|
9
|
+
if (!dismissScope) return false;
|
|
10
|
+
if (!(target instanceof Element)) return false;
|
|
11
|
+
return !!target.closest?.(`[data-dismiss-scope="${dismissScope}"]`);
|
|
12
|
+
};
|
|
13
|
+
const onPointerDownCapture = (e) => {
|
|
9
14
|
if (!closeOnOutsideClick) return;
|
|
10
15
|
const t = e.target;
|
|
16
|
+
if (isInsideScope(e.target)) return;
|
|
11
17
|
if (isInsideSomeRef(t)) return;
|
|
12
18
|
onClose();
|
|
13
19
|
};
|
|
@@ -15,10 +21,10 @@ function useDismiss({ open, refs, closeOnEscape = true, closeOnOutsideClick = tr
|
|
|
15
21
|
if (!closeOnEscape) return;
|
|
16
22
|
if (e.key === "Escape") onClose();
|
|
17
23
|
};
|
|
18
|
-
document.addEventListener("
|
|
24
|
+
document.addEventListener("pointerdown", onPointerDownCapture, true);
|
|
19
25
|
document.addEventListener("keydown", onKeyDown);
|
|
20
26
|
return () => {
|
|
21
|
-
document.removeEventListener("
|
|
27
|
+
document.removeEventListener("pointerdown", onPointerDownCapture, true);
|
|
22
28
|
document.removeEventListener("keydown", onKeyDown);
|
|
23
29
|
};
|
|
24
30
|
}, [
|
|
@@ -26,10 +32,11 @@ function useDismiss({ open, refs, closeOnEscape = true, closeOnOutsideClick = tr
|
|
|
26
32
|
onClose,
|
|
27
33
|
refs,
|
|
28
34
|
closeOnOutsideClick,
|
|
29
|
-
closeOnEscape
|
|
35
|
+
closeOnEscape,
|
|
36
|
+
dismissScope
|
|
30
37
|
]);
|
|
31
38
|
}
|
|
32
39
|
|
|
33
40
|
//#endregion
|
|
34
41
|
export { useDismiss as t };
|
|
35
|
-
//# sourceMappingURL=useDismiss-
|
|
42
|
+
//# sourceMappingURL=useDismiss-DwQfMU11.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDismiss-DwQfMU11.js","names":[],"sources":["../src/hooks/useDismiss/index.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react'\n\ntype UseDismissParams = {\n open: boolean\n dismissScope?: string\n closeOnEscape?: boolean\n closeOnOutsideClick?: boolean\n refs: Array<RefObject<HTMLElement | null>>\n onClose: () => void\n}\n\nexport function useDismiss({\n open,\n refs,\n dismissScope,\n closeOnEscape = true,\n closeOnOutsideClick = true,\n onClose\n}: UseDismissParams) {\n useEffect(() => {\n if (!open) return\n\n const isInsideSomeRef = (node: Node) =>\n refs.some(r => r.current?.contains(node))\n\n const isInsideScope = (target: EventTarget | null) => {\n if (!dismissScope) return false\n if (!(target instanceof Element)) return false\n return !!target.closest?.(`[data-dismiss-scope=\"${dismissScope}\"]`)\n }\n\n const onPointerDownCapture = (e: PointerEvent) => {\n if (!closeOnOutsideClick) return\n const t = e.target as Node\n\n if (isInsideScope(e.target)) return\n\n if (isInsideSomeRef(t)) return\n\n onClose()\n }\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (!closeOnEscape) return\n if (e.key === 'Escape') onClose()\n }\n\n document.addEventListener('pointerdown', onPointerDownCapture, true)\n document.addEventListener('keydown', onKeyDown)\n\n return () => {\n document.removeEventListener('pointerdown', onPointerDownCapture, true)\n document.removeEventListener('keydown', onKeyDown)\n }\n }, [open, onClose, refs, closeOnOutsideClick, closeOnEscape, dismissScope])\n}\n"],"mappings":";;;AAWA,SAAgB,WAAW,EACzB,MACA,MACA,cACA,gBAAgB,MAChB,sBAAsB,MACtB,WACmB;AACnB,iBAAgB;AACd,MAAI,CAAC,KAAM;EAEX,MAAM,mBAAmB,SACvB,KAAK,MAAK,MAAK,EAAE,SAAS,SAAS,KAAK,CAAC;EAE3C,MAAM,iBAAiB,WAA+B;AACpD,OAAI,CAAC,aAAc,QAAO;AAC1B,OAAI,EAAE,kBAAkB,SAAU,QAAO;AACzC,UAAO,CAAC,CAAC,OAAO,UAAU,wBAAwB,aAAa,IAAI;;EAGrE,MAAM,wBAAwB,MAAoB;AAChD,OAAI,CAAC,oBAAqB;GAC1B,MAAM,IAAI,EAAE;AAEZ,OAAI,cAAc,EAAE,OAAO,CAAE;AAE7B,OAAI,gBAAgB,EAAE,CAAE;AAExB,YAAS;;EAGX,MAAM,aAAa,MAAqB;AACtC,OAAI,CAAC,cAAe;AACpB,OAAI,EAAE,QAAQ,SAAU,UAAS;;AAGnC,WAAS,iBAAiB,eAAe,sBAAsB,KAAK;AACpE,WAAS,iBAAiB,WAAW,UAAU;AAE/C,eAAa;AACX,YAAS,oBAAoB,eAAe,sBAAsB,KAAK;AACvE,YAAS,oBAAoB,WAAW,UAAU;;IAEnD;EAAC;EAAM;EAAS;EAAM;EAAqB;EAAe;EAAa,CAAC"}
|
|
@@ -278,7 +278,6 @@ function useFloating(targetRef, options) {
|
|
|
278
278
|
]);
|
|
279
279
|
useEffect(() => {
|
|
280
280
|
if (!floatingEl) return;
|
|
281
|
-
console.log({ scrollContainerId });
|
|
282
281
|
const scrollContainer = scrollContainerId ? document.getElementById(scrollContainerId) : window;
|
|
283
282
|
update();
|
|
284
283
|
const rafUpdate = () => requestAnimationFrame(update);
|
|
@@ -315,4 +314,4 @@ function useFloating(targetRef, options) {
|
|
|
315
314
|
|
|
316
315
|
//#endregion
|
|
317
316
|
export { useFloating as t };
|
|
318
|
-
//# sourceMappingURL=useFloating-
|
|
317
|
+
//# sourceMappingURL=useFloating-DCxblHIR.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloating-DRwB71jG.js","names":["FALLBACK_PLACEMENTS: Record<Placement, Placement[]>","raw","scrollContainer: Window | HTMLElement | null"],"sources":["../src/hooks/useFloating/constants/fallbackPlacements.ts","../src/hooks/useFloating/utils/position.ts","../src/hooks/useFloating/index.ts"],"sourcesContent":["// Types\nimport type { Placement } from '@hooks/useFloating/types'\n\nexport const FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {\n 'bottom-start': [\n 'bottom-start',\n 'top-start',\n 'bottom-end',\n 'top-end',\n 'right-start',\n 'left-start'\n ],\n 'bottom-end': [\n 'bottom-end',\n 'top-end',\n 'bottom-start',\n 'top-start',\n 'left-start',\n 'right-start'\n ],\n bottom: [\n 'bottom',\n 'top',\n 'bottom-start',\n 'bottom-end',\n 'top-start',\n 'top-end'\n ],\n 'top-start': [\n 'top-start',\n 'bottom-start',\n 'top-end',\n 'bottom-end',\n 'right-start',\n 'left-start'\n ],\n 'top-end': [\n 'top-end',\n 'bottom-end',\n 'top-start',\n 'bottom-start',\n 'left-start',\n 'right-start'\n ],\n top: ['top', 'bottom', 'top-start', 'top-end', 'bottom-start', 'bottom-end'],\n 'right-start': [\n 'right-start',\n 'left-start',\n 'right-end',\n 'left-end',\n 'bottom-start',\n 'top-start'\n ],\n 'right-end': [\n 'right-end',\n 'left-end',\n 'right-start',\n 'left-start',\n 'bottom-end',\n 'top-end'\n ],\n right: [\n 'right',\n 'left',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end'\n ],\n 'left-start': [\n 'left-start',\n 'right-start',\n 'left-end',\n 'right-end',\n 'bottom-start',\n 'top-start'\n ],\n 'left-end': [\n 'left-end',\n 'right-end',\n 'left-start',\n 'right-start',\n 'bottom-end',\n 'top-end'\n ],\n left: ['left', 'right', 'left-start', 'left-end', 'right-start', 'right-end'],\n center: ['center', 'bottom', 'top', 'right', 'left']\n}\n","// Utils\nimport { FALLBACK_PLACEMENTS } from '../constants/fallbackPlacements'\n\n// Types\nimport type { Placement, PositionResult } from '@hooks/useFloating/types'\n\ntype CalcParams = {\n rect: DOMRect\n floatingRect: DOMRect\n placement: Placement\n offsetX: number\n offsetY: number\n}\n\nfunction calcForPlacement({\n rect,\n offsetY,\n offsetX,\n placement,\n floatingRect\n}: CalcParams): Omit<PositionResult, 'placement'> {\n let top = rect.top + offsetY\n let left = rect.left + offsetX\n\n switch (placement) {\n case 'top':\n top = rect.top - floatingRect.height - offsetY\n left = rect.left + rect.width / 2 - floatingRect.width / 2 + offsetX\n break\n\n case 'top-start':\n top = rect.top - floatingRect.height - offsetY\n break\n\n case 'top-end':\n top = rect.top - floatingRect.height - offsetY\n left = rect.right - offsetX - floatingRect.width\n break\n\n case 'bottom':\n top = rect.bottom + offsetY\n left = rect.left + rect.width / 2 - floatingRect.width / 2 + offsetX\n break\n\n case 'bottom-start':\n top = rect.bottom + offsetY\n break\n\n case 'bottom-end':\n top = rect.bottom + offsetY\n left = rect.right - offsetX - floatingRect.width\n break\n\n case 'left':\n top = rect.top + rect.height / 2 - floatingRect.height / 2 + offsetY\n left = rect.left - floatingRect.width - offsetX\n break\n\n case 'left-start':\n left = rect.left - floatingRect.width - offsetX\n break\n\n case 'left-end':\n top = rect.bottom - floatingRect.height - offsetY\n left = rect.left - floatingRect.width - offsetX\n break\n\n case 'right':\n top = rect.top + rect.height / 2 - floatingRect.height / 2 + offsetY\n left = rect.right + offsetX\n break\n\n case 'right-start':\n left = rect.right + offsetX\n break\n\n case 'right-end':\n left = rect.right + offsetX\n top = rect.bottom - floatingRect.height - offsetY\n break\n\n case 'center':\n left = rect.left + rect.width / 2 - floatingRect.width / 2 + offsetX\n top = rect.top + rect.height / 2 - floatingRect.height / 2 + offsetY\n break\n }\n\n return { top, left }\n}\n\nfunction clampToViewport(\n top: number,\n left: number,\n floatingRect: DOMRect,\n margin: number\n) {\n const vw = window.innerWidth\n const vh = window.innerHeight\n\n const clampedLeft = Math.min(\n Math.max(left, margin),\n vw - floatingRect.width - margin\n )\n const clampedTop = Math.min(\n Math.max(top, margin),\n vh - floatingRect.height - margin\n )\n\n return { top: clampedTop, left: clampedLeft }\n}\n\nfunction overflows(\n top: number,\n left: number,\n floatingRect: DOMRect,\n margin: number\n) {\n const vw = window.innerWidth\n const vh = window.innerHeight\n return {\n left: left < margin,\n right: left + floatingRect.width > vw - margin,\n top: top < margin,\n bottom: top + floatingRect.height > vh - margin\n }\n}\n\nfunction fallbackPlacements(p: Placement): Placement[] {\n return FALLBACK_PLACEMENTS[p] ?? [p]\n}\n\nexport function getPositionInViewport(params: {\n rect: DOMRect\n margin?: number\n offsetX?: number\n offsetY?: number\n tryFlip?: boolean\n floatingRect: DOMRect\n placement: Placement\n}): PositionResult {\n const {\n rect,\n floatingRect,\n placement,\n offsetX = 0,\n offsetY = 0,\n margin = 8,\n tryFlip = true\n } = params\n\n const tries = tryFlip ? fallbackPlacements(placement) : [placement]\n\n for (const p of tries) {\n const raw = calcForPlacement({\n rect,\n floatingRect,\n placement: p,\n offsetX,\n offsetY\n })\n const o = overflows(raw.top, raw.left, floatingRect, margin)\n if (!o.left && !o.right && !o.top && !o.bottom) {\n return { ...raw, placement: p }\n }\n }\n\n const raw = calcForPlacement({\n rect,\n offsetY,\n offsetX,\n placement,\n floatingRect\n })\n const clamped = clampToViewport(raw.top, raw.left, floatingRect, margin)\n return { ...clamped, placement }\n}\n","// External Libraries\nimport { useMemo, useState, useEffect, useCallback } from 'react'\n\n// Utils\nimport { getPositionInViewport } from '@hooks/useFloating/utils/position'\n\n// Types\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\nexport type AnchorLike = { getBoundingClientRect: () => DOMRect }\ntype Anchor = HTMLElement | AnchorLike\n\nfunction isElement(value: unknown): value is Element {\n return value instanceof Element\n}\n\nexport function useFloating(\n targetRef: React.RefObject<Anchor>,\n options?: FloatingOptions\n) {\n const {\n portalRef,\n offsetX = 0,\n offsetY = 6,\n strategy = 'fixed',\n scrollContainerId,\n viewportMargin = 8,\n keepInViewport = true,\n absoluteReference = 'portal',\n placement = 'bottom-start'\n } = options || {}\n\n const [floatingEl, setFloatingEl] = useState<HTMLElement | null>(null)\n\n const update = useCallback(() => {\n const target = targetRef.current\n const floating = floatingEl\n if (!target || !floating) return\n\n const rect = target.getBoundingClientRect()\n const floatingRect = floating.getBoundingClientRect()\n\n const pos = getPositionInViewport({\n rect,\n offsetX,\n offsetY,\n placement,\n floatingRect,\n tryFlip: keepInViewport,\n margin: viewportMargin\n })\n\n let left = pos.left\n let top = pos.top\n\n if (strategy === 'absolute') {\n if (absoluteReference === 'offsetParent') {\n const op = floating.offsetParent\n if (op instanceof HTMLElement) {\n const r = op.getBoundingClientRect()\n\n left -= r.left + op.clientLeft - op.scrollLeft\n top -= r.top + op.clientTop - op.scrollTop\n }\n }\n\n if (absoluteReference === 'portal') {\n const el = portalRef?.current\n if (el) {\n const r = el.getBoundingClientRect()\n\n left -= r.left + el.clientLeft - el.scrollLeft\n top -= r.top + el.clientTop - el.scrollTop\n }\n }\n }\n\n floating.style.top = '0px'\n floating.style.left = '0px'\n floating.style.position = strategy\n floating.style.transform = `translate(${left}px, ${top}px)`\n }, [\n offsetX,\n offsetY,\n strategy,\n floatingEl,\n placement,\n targetRef,\n keepInViewport,\n viewportMargin,\n absoluteReference,\n portalRef?.current\n ])\n\n useEffect(() => {\n if (!floatingEl) return\n\n console.log({ scrollContainerId })\n\n const scrollContainer: Window | HTMLElement | null = scrollContainerId\n ? document.getElementById(scrollContainerId)\n : window\n\n update()\n\n const rafUpdate = () => requestAnimationFrame(update)\n\n // scroll (Window ou Element)\n if (scrollContainer && 'addEventListener' in scrollContainer) {\n scrollContainer.addEventListener('scroll', rafUpdate, { passive: true })\n }\n window.addEventListener('resize', rafUpdate, { passive: true })\n\n const ro = new ResizeObserver(rafUpdate)\n\n const target = targetRef.current\n\n if (isElement(target)) ro.observe(target)\n\n ro.observe(floatingEl)\n\n return () => {\n if (scrollContainer && 'removeEventListener' in scrollContainer) {\n scrollContainer.removeEventListener('scroll', rafUpdate as any)\n }\n window.removeEventListener('resize', rafUpdate)\n ro.disconnect()\n }\n }, [floatingEl, update, scrollContainerId, targetRef])\n\n const floatingRef = useCallback((el: HTMLElement | null) => {\n setFloatingEl(el)\n }, [])\n\n return useMemo(\n () => ({ floatingEl, floatingRef, update }),\n [floatingEl, floatingRef, update]\n )\n}\n"],"mappings":";;;AAGA,MAAaA,sBAAsD;CACjE,gBAAgB;EACd;EACA;EACA;EACA;EACA;EACA;EACD;CACD,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACD;CACD,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACD;CACD,WAAW;EACT;EACA;EACA;EACA;EACA;EACA;EACD;CACD,KAAK;EAAC;EAAO;EAAU;EAAa;EAAW;EAAgB;EAAa;CAC5E,eAAe;EACb;EACA;EACA;EACA;EACA;EACA;EACD;CACD,aAAa;EACX;EACA;EACA;EACA;EACA;EACA;EACD;CACD,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACD;CACD,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACD;CACD,MAAM;EAAC;EAAQ;EAAS;EAAc;EAAY;EAAe;EAAY;CAC7E,QAAQ;EAAC;EAAU;EAAU;EAAO;EAAS;EAAO;CACrD;;;;ACzED,SAAS,iBAAiB,EACxB,MACA,SACA,SACA,WACA,gBACgD;CAChD,IAAI,MAAM,KAAK,MAAM;CACrB,IAAI,OAAO,KAAK,OAAO;AAEvB,SAAQ,WAAR;EACE,KAAK;AACH,SAAM,KAAK,MAAM,aAAa,SAAS;AACvC,UAAO,KAAK,OAAO,KAAK,QAAQ,IAAI,aAAa,QAAQ,IAAI;AAC7D;EAEF,KAAK;AACH,SAAM,KAAK,MAAM,aAAa,SAAS;AACvC;EAEF,KAAK;AACH,SAAM,KAAK,MAAM,aAAa,SAAS;AACvC,UAAO,KAAK,QAAQ,UAAU,aAAa;AAC3C;EAEF,KAAK;AACH,SAAM,KAAK,SAAS;AACpB,UAAO,KAAK,OAAO,KAAK,QAAQ,IAAI,aAAa,QAAQ,IAAI;AAC7D;EAEF,KAAK;AACH,SAAM,KAAK,SAAS;AACpB;EAEF,KAAK;AACH,SAAM,KAAK,SAAS;AACpB,UAAO,KAAK,QAAQ,UAAU,aAAa;AAC3C;EAEF,KAAK;AACH,SAAM,KAAK,MAAM,KAAK,SAAS,IAAI,aAAa,SAAS,IAAI;AAC7D,UAAO,KAAK,OAAO,aAAa,QAAQ;AACxC;EAEF,KAAK;AACH,UAAO,KAAK,OAAO,aAAa,QAAQ;AACxC;EAEF,KAAK;AACH,SAAM,KAAK,SAAS,aAAa,SAAS;AAC1C,UAAO,KAAK,OAAO,aAAa,QAAQ;AACxC;EAEF,KAAK;AACH,SAAM,KAAK,MAAM,KAAK,SAAS,IAAI,aAAa,SAAS,IAAI;AAC7D,UAAO,KAAK,QAAQ;AACpB;EAEF,KAAK;AACH,UAAO,KAAK,QAAQ;AACpB;EAEF,KAAK;AACH,UAAO,KAAK,QAAQ;AACpB,SAAM,KAAK,SAAS,aAAa,SAAS;AAC1C;EAEF,KAAK;AACH,UAAO,KAAK,OAAO,KAAK,QAAQ,IAAI,aAAa,QAAQ,IAAI;AAC7D,SAAM,KAAK,MAAM,KAAK,SAAS,IAAI,aAAa,SAAS,IAAI;AAC7D;;AAGJ,QAAO;EAAE;EAAK;EAAM;;AAGtB,SAAS,gBACP,KACA,MACA,cACA,QACA;CACA,MAAM,KAAK,OAAO;CAClB,MAAM,KAAK,OAAO;CAElB,MAAM,cAAc,KAAK,IACvB,KAAK,IAAI,MAAM,OAAO,EACtB,KAAK,aAAa,QAAQ,OAC3B;AAMD,QAAO;EAAE,KALU,KAAK,IACtB,KAAK,IAAI,KAAK,OAAO,EACrB,KAAK,aAAa,SAAS,OAC5B;EAEyB,MAAM;EAAa;;AAG/C,SAAS,UACP,KACA,MACA,cACA,QACA;CACA,MAAM,KAAK,OAAO;CAClB,MAAM,KAAK,OAAO;AAClB,QAAO;EACL,MAAM,OAAO;EACb,OAAO,OAAO,aAAa,QAAQ,KAAK;EACxC,KAAK,MAAM;EACX,QAAQ,MAAM,aAAa,SAAS,KAAK;EAC1C;;AAGH,SAAS,mBAAmB,GAA2B;AACrD,QAAO,oBAAoB,MAAM,CAAC,EAAE;;AAGtC,SAAgB,sBAAsB,QAQnB;CACjB,MAAM,EACJ,MACA,cACA,WACA,UAAU,GACV,UAAU,GACV,SAAS,GACT,UAAU,SACR;CAEJ,MAAM,QAAQ,UAAU,mBAAmB,UAAU,GAAG,CAAC,UAAU;AAEnE,MAAK,MAAM,KAAK,OAAO;EACrB,MAAMC,QAAM,iBAAiB;GAC3B;GACA;GACA,WAAW;GACX;GACA;GACD,CAAC;EACF,MAAM,IAAI,UAAUA,MAAI,KAAKA,MAAI,MAAM,cAAc,OAAO;AAC5D,MAAI,CAAC,EAAE,QAAQ,CAAC,EAAE,SAAS,CAAC,EAAE,OAAO,CAAC,EAAE,OACtC,QAAO;GAAE,GAAGA;GAAK,WAAW;GAAG;;CAInC,MAAM,MAAM,iBAAiB;EAC3B;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAO;EAAE,GADO,gBAAgB,IAAI,KAAK,IAAI,MAAM,cAAc,OAAO;EACnD;EAAW;;;;;AClKlC,SAAS,UAAU,OAAkC;AACnD,QAAO,iBAAiB;;AAG1B,SAAgB,YACd,WACA,SACA;CACA,MAAM,EACJ,WACA,UAAU,GACV,UAAU,GACV,WAAW,SACX,mBACA,iBAAiB,GACjB,iBAAiB,MACjB,oBAAoB,UACpB,YAAY,mBACV,WAAW,EAAE;CAEjB,MAAM,CAAC,YAAY,iBAAiB,SAA6B,KAAK;CAEtE,MAAM,SAAS,kBAAkB;EAC/B,MAAM,SAAS,UAAU;EACzB,MAAM,WAAW;AACjB,MAAI,CAAC,UAAU,CAAC,SAAU;EAK1B,MAAM,MAAM,sBAAsB;GAChC,MAJW,OAAO,uBAAuB;GAKzC;GACA;GACA;GACA,cAPmB,SAAS,uBAAuB;GAQnD,SAAS;GACT,QAAQ;GACT,CAAC;EAEF,IAAI,OAAO,IAAI;EACf,IAAI,MAAM,IAAI;AAEd,MAAI,aAAa,YAAY;AAC3B,OAAI,sBAAsB,gBAAgB;IACxC,MAAM,KAAK,SAAS;AACpB,QAAI,cAAc,aAAa;KAC7B,MAAM,IAAI,GAAG,uBAAuB;AAEpC,aAAQ,EAAE,OAAO,GAAG,aAAa,GAAG;AACpC,YAAO,EAAE,MAAM,GAAG,YAAY,GAAG;;;AAIrC,OAAI,sBAAsB,UAAU;IAClC,MAAM,KAAK,WAAW;AACtB,QAAI,IAAI;KACN,MAAM,IAAI,GAAG,uBAAuB;AAEpC,aAAQ,EAAE,OAAO,GAAG,aAAa,GAAG;AACpC,YAAO,EAAE,MAAM,GAAG,YAAY,GAAG;;;;AAKvC,WAAS,MAAM,MAAM;AACrB,WAAS,MAAM,OAAO;AACtB,WAAS,MAAM,WAAW;AAC1B,WAAS,MAAM,YAAY,aAAa,KAAK,MAAM,IAAI;IACtD;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;EACZ,CAAC;AAEF,iBAAgB;AACd,MAAI,CAAC,WAAY;AAEjB,UAAQ,IAAI,EAAE,mBAAmB,CAAC;EAElC,MAAMC,kBAA+C,oBACjD,SAAS,eAAe,kBAAkB,GAC1C;AAEJ,UAAQ;EAER,MAAM,kBAAkB,sBAAsB,OAAO;AAGrD,MAAI,mBAAmB,sBAAsB,gBAC3C,iBAAgB,iBAAiB,UAAU,WAAW,EAAE,SAAS,MAAM,CAAC;AAE1E,SAAO,iBAAiB,UAAU,WAAW,EAAE,SAAS,MAAM,CAAC;EAE/D,MAAM,KAAK,IAAI,eAAe,UAAU;EAExC,MAAM,SAAS,UAAU;AAEzB,MAAI,UAAU,OAAO,CAAE,IAAG,QAAQ,OAAO;AAEzC,KAAG,QAAQ,WAAW;AAEtB,eAAa;AACX,OAAI,mBAAmB,yBAAyB,gBAC9C,iBAAgB,oBAAoB,UAAU,UAAiB;AAEjE,UAAO,oBAAoB,UAAU,UAAU;AAC/C,MAAG,YAAY;;IAEhB;EAAC;EAAY;EAAQ;EAAmB;EAAU,CAAC;CAEtD,MAAM,cAAc,aAAa,OAA2B;AAC1D,gBAAc,GAAG;IAChB,EAAE,CAAC;AAEN,QAAO,eACE;EAAE;EAAY;EAAa;EAAQ,GAC1C;EAAC;EAAY;EAAa;EAAO,CAClC"}
|
|
1
|
+
{"version":3,"file":"useFloating-DCxblHIR.js","names":["FALLBACK_PLACEMENTS: Record<Placement, Placement[]>","raw","scrollContainer: Window | HTMLElement | null"],"sources":["../src/hooks/useFloating/constants/fallbackPlacements.ts","../src/hooks/useFloating/utils/position.ts","../src/hooks/useFloating/index.ts"],"sourcesContent":["// Types\nimport type { Placement } from '@hooks/useFloating/types'\n\nexport const FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {\n 'bottom-start': [\n 'bottom-start',\n 'top-start',\n 'bottom-end',\n 'top-end',\n 'right-start',\n 'left-start'\n ],\n 'bottom-end': [\n 'bottom-end',\n 'top-end',\n 'bottom-start',\n 'top-start',\n 'left-start',\n 'right-start'\n ],\n bottom: [\n 'bottom',\n 'top',\n 'bottom-start',\n 'bottom-end',\n 'top-start',\n 'top-end'\n ],\n 'top-start': [\n 'top-start',\n 'bottom-start',\n 'top-end',\n 'bottom-end',\n 'right-start',\n 'left-start'\n ],\n 'top-end': [\n 'top-end',\n 'bottom-end',\n 'top-start',\n 'bottom-start',\n 'left-start',\n 'right-start'\n ],\n top: ['top', 'bottom', 'top-start', 'top-end', 'bottom-start', 'bottom-end'],\n 'right-start': [\n 'right-start',\n 'left-start',\n 'right-end',\n 'left-end',\n 'bottom-start',\n 'top-start'\n ],\n 'right-end': [\n 'right-end',\n 'left-end',\n 'right-start',\n 'left-start',\n 'bottom-end',\n 'top-end'\n ],\n right: [\n 'right',\n 'left',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end'\n ],\n 'left-start': [\n 'left-start',\n 'right-start',\n 'left-end',\n 'right-end',\n 'bottom-start',\n 'top-start'\n ],\n 'left-end': [\n 'left-end',\n 'right-end',\n 'left-start',\n 'right-start',\n 'bottom-end',\n 'top-end'\n ],\n left: ['left', 'right', 'left-start', 'left-end', 'right-start', 'right-end'],\n center: ['center', 'bottom', 'top', 'right', 'left']\n}\n","// Utils\nimport { FALLBACK_PLACEMENTS } from '../constants/fallbackPlacements'\n\n// Types\nimport type { Placement, PositionResult } from '@hooks/useFloating/types'\n\ntype CalcParams = {\n rect: DOMRect\n floatingRect: DOMRect\n placement: Placement\n offsetX: number\n offsetY: number\n}\n\nfunction calcForPlacement({\n rect,\n offsetY,\n offsetX,\n placement,\n floatingRect\n}: CalcParams): Omit<PositionResult, 'placement'> {\n let top = rect.top + offsetY\n let left = rect.left + offsetX\n\n switch (placement) {\n case 'top':\n top = rect.top - floatingRect.height - offsetY\n left = rect.left + rect.width / 2 - floatingRect.width / 2 + offsetX\n break\n\n case 'top-start':\n top = rect.top - floatingRect.height - offsetY\n break\n\n case 'top-end':\n top = rect.top - floatingRect.height - offsetY\n left = rect.right - offsetX - floatingRect.width\n break\n\n case 'bottom':\n top = rect.bottom + offsetY\n left = rect.left + rect.width / 2 - floatingRect.width / 2 + offsetX\n break\n\n case 'bottom-start':\n top = rect.bottom + offsetY\n break\n\n case 'bottom-end':\n top = rect.bottom + offsetY\n left = rect.right - offsetX - floatingRect.width\n break\n\n case 'left':\n top = rect.top + rect.height / 2 - floatingRect.height / 2 + offsetY\n left = rect.left - floatingRect.width - offsetX\n break\n\n case 'left-start':\n left = rect.left - floatingRect.width - offsetX\n break\n\n case 'left-end':\n top = rect.bottom - floatingRect.height - offsetY\n left = rect.left - floatingRect.width - offsetX\n break\n\n case 'right':\n top = rect.top + rect.height / 2 - floatingRect.height / 2 + offsetY\n left = rect.right + offsetX\n break\n\n case 'right-start':\n left = rect.right + offsetX\n break\n\n case 'right-end':\n left = rect.right + offsetX\n top = rect.bottom - floatingRect.height - offsetY\n break\n\n case 'center':\n left = rect.left + rect.width / 2 - floatingRect.width / 2 + offsetX\n top = rect.top + rect.height / 2 - floatingRect.height / 2 + offsetY\n break\n }\n\n return { top, left }\n}\n\nfunction clampToViewport(\n top: number,\n left: number,\n floatingRect: DOMRect,\n margin: number\n) {\n const vw = window.innerWidth\n const vh = window.innerHeight\n\n const clampedLeft = Math.min(\n Math.max(left, margin),\n vw - floatingRect.width - margin\n )\n const clampedTop = Math.min(\n Math.max(top, margin),\n vh - floatingRect.height - margin\n )\n\n return { top: clampedTop, left: clampedLeft }\n}\n\nfunction overflows(\n top: number,\n left: number,\n floatingRect: DOMRect,\n margin: number\n) {\n const vw = window.innerWidth\n const vh = window.innerHeight\n return {\n left: left < margin,\n right: left + floatingRect.width > vw - margin,\n top: top < margin,\n bottom: top + floatingRect.height > vh - margin\n }\n}\n\nfunction fallbackPlacements(p: Placement): Placement[] {\n return FALLBACK_PLACEMENTS[p] ?? [p]\n}\n\nexport function getPositionInViewport(params: {\n rect: DOMRect\n margin?: number\n offsetX?: number\n offsetY?: number\n tryFlip?: boolean\n floatingRect: DOMRect\n placement: Placement\n}): PositionResult {\n const {\n rect,\n floatingRect,\n placement,\n offsetX = 0,\n offsetY = 0,\n margin = 8,\n tryFlip = true\n } = params\n\n const tries = tryFlip ? fallbackPlacements(placement) : [placement]\n\n for (const p of tries) {\n const raw = calcForPlacement({\n rect,\n floatingRect,\n placement: p,\n offsetX,\n offsetY\n })\n const o = overflows(raw.top, raw.left, floatingRect, margin)\n if (!o.left && !o.right && !o.top && !o.bottom) {\n return { ...raw, placement: p }\n }\n }\n\n const raw = calcForPlacement({\n rect,\n offsetY,\n offsetX,\n placement,\n floatingRect\n })\n const clamped = clampToViewport(raw.top, raw.left, floatingRect, margin)\n return { ...clamped, placement }\n}\n","// External Libraries\nimport { useMemo, useState, useEffect, useCallback } from 'react'\n\n// Utils\nimport { getPositionInViewport } from '@hooks/useFloating/utils/position'\n\n// Types\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\nexport type AnchorLike = { getBoundingClientRect: () => DOMRect }\ntype Anchor = HTMLElement | AnchorLike\n\nfunction isElement(value: unknown): value is Element {\n return value instanceof Element\n}\n\nexport function useFloating(\n targetRef: React.RefObject<Anchor>,\n options?: FloatingOptions\n) {\n const {\n portalRef,\n offsetX = 0,\n offsetY = 6,\n strategy = 'fixed',\n scrollContainerId,\n viewportMargin = 8,\n keepInViewport = true,\n absoluteReference = 'portal',\n placement = 'bottom-start'\n } = options || {}\n\n const [floatingEl, setFloatingEl] = useState<HTMLElement | null>(null)\n\n const update = useCallback(() => {\n const target = targetRef.current\n const floating = floatingEl\n if (!target || !floating) return\n\n const rect = target.getBoundingClientRect()\n const floatingRect = floating.getBoundingClientRect()\n\n const pos = getPositionInViewport({\n rect,\n offsetX,\n offsetY,\n placement,\n floatingRect,\n tryFlip: keepInViewport,\n margin: viewportMargin\n })\n\n let left = pos.left\n let top = pos.top\n\n if (strategy === 'absolute') {\n if (absoluteReference === 'offsetParent') {\n const op = floating.offsetParent\n if (op instanceof HTMLElement) {\n const r = op.getBoundingClientRect()\n\n left -= r.left + op.clientLeft - op.scrollLeft\n top -= r.top + op.clientTop - op.scrollTop\n }\n }\n\n if (absoluteReference === 'portal') {\n const el = portalRef?.current\n if (el) {\n const r = el.getBoundingClientRect()\n\n left -= r.left + el.clientLeft - el.scrollLeft\n top -= r.top + el.clientTop - el.scrollTop\n }\n }\n }\n\n floating.style.top = '0px'\n floating.style.left = '0px'\n floating.style.position = strategy\n floating.style.transform = `translate(${left}px, ${top}px)`\n }, [\n offsetX,\n offsetY,\n strategy,\n floatingEl,\n placement,\n targetRef,\n keepInViewport,\n viewportMargin,\n absoluteReference,\n portalRef?.current\n ])\n\n useEffect(() => {\n if (!floatingEl) return\n\n const scrollContainer: Window | HTMLElement | null = scrollContainerId\n ? document.getElementById(scrollContainerId)\n : window\n\n update()\n\n const rafUpdate = () => requestAnimationFrame(update)\n\n // scroll (Window ou Element)\n if (scrollContainer && 'addEventListener' in scrollContainer) {\n scrollContainer.addEventListener('scroll', rafUpdate, { passive: true })\n }\n window.addEventListener('resize', rafUpdate, { passive: true })\n\n const ro = new ResizeObserver(rafUpdate)\n\n const target = targetRef.current\n\n if (isElement(target)) ro.observe(target)\n\n ro.observe(floatingEl)\n\n return () => {\n if (scrollContainer && 'removeEventListener' in scrollContainer) {\n scrollContainer.removeEventListener('scroll', rafUpdate as any)\n }\n window.removeEventListener('resize', rafUpdate)\n ro.disconnect()\n }\n }, [floatingEl, update, scrollContainerId, targetRef])\n\n const floatingRef = useCallback((el: HTMLElement | null) => {\n setFloatingEl(el)\n }, [])\n\n return useMemo(\n () => ({ floatingEl, floatingRef, update }),\n [floatingEl, floatingRef, update]\n )\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"BasePopover-BVeMpuWR.js","names":["BasePopover: React.FC<BasePopoverProps>"],"sources":["../src/components/commons/structure/BasePopover/styles.ts","../src/components/commons/structure/BasePopover/index.tsx"],"sourcesContent":["// Types\nimport type { BasePopoverProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createBasePopoverStyles({\n maxWidth = 'unset',\n minWidth = 'fit-content',\n minHeight = 'fit-content',\n maxHeight = '15rem',\n panel\n}: BasePopoverProps) {\n return styled({\n content: {\n minWidth,\n maxWidth,\n minHeight,\n maxHeight,\n\n display: 'flex',\n flexDirection: 'column',\n\n zIndex: 10,\n\n overflowY: 'auto',\n overscrollBehavior: 'contain',\n\n borderWidth: 1,\n rowGap: '0.25rem',\n padding: panel?.padding ? panel.padding : '0.5rem',\n borderRadius: '0.75rem',\n\n backgroundColor: 'var(--px-bg)',\n boxShadow: 'var(--px-shadow-default)',\n borderColor: 'var(--px-border-primary)'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Components\nimport { Popover } from '@components/commons/toolkit/Popover'\n\n// Types\nimport type { BasePopoverProps } from './types'\n\n// Styles\nimport { createBasePopoverStyles } from './styles'\n\nexport const BasePopover: React.FC<BasePopoverProps> = props => {\n const { children, ...rest } = props\n\n const { styles } = useThemedStyles(props, createBasePopoverStyles, {\n applyCommonProps: false,\n pick: p => [p.open, p.trigger]\n })\n\n return (\n <Popover\n p={0}\n hideShadow\n {...rest}\n content={({ widthTrigger }) => (\n <div style={{ ...styles.content, width: widthTrigger }}>{children}</div>\n )}\n />\n )\n}\n"],"mappings":";;;;;AAIA,SAAgB,wBAAwB,EACtC,WAAW,SACX,WAAW,eACX,YAAY,eACZ,YAAY,SACZ,SACmB;AACnB,QAAO,OAAO,EACZ,SAAS;EACP;EACA;EACA;EACA;EAEA,SAAS;EACT,eAAe;EAEf,QAAQ;EAER,WAAW;EACX,oBAAoB;EAEpB,aAAa;EACb,QAAQ;EACR,SAAS,OAAO,UAAU,MAAM,UAAU;EAC1C,cAAc;EAEd,iBAAiB;EACjB,WAAW;EACX,aAAa;EACd,EACF,CAAC;;;;;ACpBJ,MAAaA,eAA0C,UAAS;CAC9D,MAAM,EAAE,UAAU,GAAG,SAAS;CAE9B,MAAM,EAAE,WAAW,gBAAgB,OAAO,yBAAyB;EACjE,kBAAkB;EAClB,OAAM,MAAK,CAAC,EAAE,MAAM,EAAE,QAAQ;EAC/B,CAAC;AAEF,QACE,oBAAC;EACC,GAAG;EACH;EACA,GAAI;EACJ,UAAU,EAAE,mBACV,oBAAC;GAAI,OAAO;IAAE,GAAG,OAAO;IAAS,OAAO;IAAc;GAAG;IAAe;GAE1E"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu-B94eRUm7.js","names":["floatingOptions: FloatingOptions","DividerRow: React.FC"],"sources":["../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/ItemRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/CustomRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/components/DividerRow/index.tsx","../src/components/commons/toolkit/ContextMenu/components/Menu/styles.ts","../src/components/commons/toolkit/ContextMenu/components/Menu/index.tsx","../src/components/commons/toolkit/ContextMenu/utils/normalizeMenuOptions.ts","../src/components/commons/toolkit/ContextMenu/types.ts","../src/components/commons/toolkit/ContextMenu/styles.ts","../src/components/commons/toolkit/ContextMenu/index.tsx"],"sourcesContent":["// Types\nimport type { ItemRowProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createItemRowStyles<T>({ item, active }: ItemRowProps<T>) {\n return styled({\n button: {\n width: '100%',\n textAlign: 'left',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: '0.5rem',\n\n borderRadius: '0.5rem',\n\n paddingInline: '0.5rem',\n paddingBlock: '0.25rem',\n\n userSelect: 'none',\n\n backgroundColor:\n item.disabled || active\n ? 'var(--px-background-card-hover)'\n : 'transparent',\n\n __rules: {\n '&:hover': {\n transition: 'all 200ms',\n backgroundColor: 'var(--px-background-card-hover) !important'\n }\n }\n },\n containerIcon: {\n width: '1rem',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center'\n }\n })\n}\n","// External Libraries\nimport { useEffect, useRef, useState } from 'react'\n\n// Components\nimport { Menu } from '../..'\nimport { Switch } from '@components/commons/toolkit/Switch'\nimport { Popover } from '@components/commons/toolkit/Popover'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ItemRowProps } from './types'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Styles\nimport { createItemRowStyles } from './styles'\n\nexport const ItemRow = <T extends string>(props: ItemRowProps<T>) => {\n const { item, depth, width, onHover, onSelect } = props\n const isGroup = item.type === 'group'\n\n const [subOpen, setSubOpen] = useState(false)\n const closeTimer = useRef<number | null>(null)\n const anchorRef = useRef<HTMLButtonElement | null>(null)\n const floatingOptions: FloatingOptions = {\n offsetX: 10,\n offsetY: -4,\n strategy: 'fixed',\n keepInViewport: true,\n placement: 'right-start'\n }\n\n // Hooks\n const { styles, classes } = useThemedStyles(props, createItemRowStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.active]\n })\n\n // Functions\n function handleMouseEnter() {\n onHover(item.id, isGroup)\n\n if (!isGroup) return\n clearTimer()\n setSubOpen(true)\n }\n\n function handleMouseLeave() {\n if (!isGroup) return\n scheduleClose()\n }\n\n function handleClick() {\n if (isGroup) return\n onSelect(item)\n }\n\n function clearTimer() {\n if (closeTimer.current) window.clearTimeout(closeTimer.current)\n closeTimer.current = null\n }\n\n function scheduleClose() {\n clearTimer()\n closeTimer.current = window.setTimeout(() => setSubOpen(false), 150)\n }\n\n function renderMenuType() {\n if (item.type === 'switch') return <Switch checked={item.checked} />\n else {\n return (\n <>\n {item.shortcut ? <span>{item.shortcut}</span> : null}\n\n {isGroup ? <span>›</span> : null}\n </>\n )\n }\n }\n\n // UseEffects\n // biome-ignore lint/correctness/useExhaustiveDependencies: <Not needed>\n useEffect(() => {\n return () => clearTimer()\n }, [])\n\n return (\n <>\n <button\n ref={anchorRef}\n type=\"button\"\n role=\"menuitem\"\n style={styles.button}\n className={classes.button}\n disabled={!!item.disabled}\n aria-disabled={item.disabled || undefined}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n >\n {item.icon ? (\n <span style={styles.containerIcon}>{item.icon ?? null}</span>\n ) : null}\n\n <Typography variant=\"b2\">{item.label}</Typography>\n\n {renderMenuType()}\n </button>\n\n {isGroup ? (\n <Popover\n // biome-ignore lint/suspicious/noExplicitAny: <Not needed>\n anchorRef={anchorRef as any}\n open={subOpen}\n closeOnOutsideClick={false}\n closeOnEscape={false}\n floatingOptions={floatingOptions}\n onMouseEnter={() => {\n clearTimer()\n setSubOpen(true)\n }}\n onMouseLeave={() => {\n scheduleClose()\n }}\n content={() => (\n <Menu\n width={width}\n depth={depth + 1}\n activeId={undefined}\n items={item.children}\n onHover={onHover}\n onSelect={onSelect}\n />\n )}\n onOpenChange={setSubOpen}\n />\n ) : null}\n </>\n )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createCustomRowStyles() {\n return styled({\n container: {\n padding: '0.25rem'\n }\n })\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CustomRowProps } from './types'\n\n// Styles\nimport { createCustomRowStyles } from './styles'\n\nexport const CustomRow = <T extends string>(props: CustomRowProps<T>) => {\n const { item, close } = props\n\n // Hooks\n const { styles } = useThemedStyles(props, createCustomRowStyles)\n\n return <div style={styles.container}>{item.render({ close })}</div>\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createDividerRowStyles() {\n return styled({\n container: {\n border: 0,\n display: 'flex',\n marginBlock: '0.1rem',\n borderTop: '1px solid var(--px-border-primary)'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createDividerRowStyles } from './styles'\n\nexport const DividerRow: React.FC = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createDividerRowStyles)\n\n return <hr style={styles.container} />\n}\n","// Types\nimport type { MenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createMenuStyles<T>({ width }: MenuProps<T>) {\n return styled({\n container: {\n width,\n flexShrink: 0\n }\n })\n}\n","// Components\nimport { ItemRow } from './components/ItemRow'\nimport { CustomRow } from './components/CustomRow'\nimport { DividerRow } from './components/DividerRow'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { MenuProps } from './types'\n\n// Styles\nimport { createMenuStyles } from './styles'\n\nexport const Menu = <T extends string>(props: MenuProps<T>) => {\n const { items, depth, activeId, width = 240, onHover, onSelect } = props\n\n const { styles } = useThemedStyles(props, createMenuStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.items, p.width, p.activeId, p.onSelect, p.onHover]\n })\n\n // Functions\n function renderItems() {\n return items.map(item => {\n if (item.type === 'divider') return <DividerRow key={item.id} />\n if (item.type === 'custom')\n return <CustomRow key={item.id} item={item} close={close} />\n\n return (\n <ItemRow\n key={item.id}\n item={item}\n depth={depth}\n width={width}\n active={activeId === item.id}\n onHover={onHover}\n onSelect={onSelect}\n />\n )\n })\n }\n\n return (\n <div style={styles.container} role={depth === 0 ? 'menu' : undefined}>\n {renderItems()}\n </div>\n )\n}\n","// Types\nimport type { MenuOption, MenuOptionInput } from '../types'\n\nexport function normalizeMenuOptions<T>(\n options: MenuOptionInput<T>[]\n): MenuOption<T>[] {\n return options.map(opt => {\n if ('children' in opt) {\n return {\n id: opt.id,\n label: opt.label,\n icon: opt.icon,\n shortcut: opt.shortcut,\n disabled: opt.disabled,\n className: opt.className,\n type: 'group' as const,\n children: normalizeMenuOptions(opt.children)\n }\n }\n return opt as MenuOption<T>\n })\n}\n","// External Libraries\nimport type { ReactNode } from 'react'\n\n// Hooks\nimport type { Placement } from '@hooks/useFloating/types'\n\n// Styles\nimport type { createContextMenuStyles } from './styles'\n\ninterface BaseOption<T> {\n id: T\n icon?: ReactNode\n label?: ReactNode\n disabled?: boolean\n className?: string\n shortcut?: ReactNode\n closeOnSelect?: boolean\n}\n\nexport type MenuActionOption<T> = BaseOption<T> & {\n type: 'action'\n closeOnSelect?: boolean\n}\n\nexport type MenuSwitchOption<T> = BaseOption<T> & {\n type: 'switch'\n checked: boolean\n closeOnSelect?: boolean\n onCheckedChange: (next: boolean) => void\n}\n\nexport interface MenuDividerOption<T> {\n id: T\n type: 'divider'\n}\n\nexport interface MenuCustomOption<T> extends BaseOption<T> {\n type: 'custom'\n render: (ctx: { close: () => void }) => ReactNode\n}\n\nexport interface MenuGroupInput<T> extends BaseOption<T> {\n type?: 'group'\n children: MenuOptionInput<T>[]\n}\n\nexport type MenuOptionInput<T> =\n | MenuGroupInput<T>\n | MenuActionOption<T>\n | MenuSwitchOption<T>\n | MenuCustomOption<T>\n | MenuDividerOption<T>\n\nexport interface MenuGroup<T> extends BaseOption<T> {\n type: 'group'\n children: MenuOption<T>[]\n}\n\nexport type MenuOption<T> =\n | MenuGroup<T>\n | MenuActionOption<T>\n | MenuSwitchOption<T>\n | MenuCustomOption<T>\n | MenuDividerOption<T>\n\nexport interface ContextMenuProps<T> {\n trigger: ReactNode\n options: MenuOptionInput<T>[]\n\n offsetX?: number\n offsetY?: number\n columnWidth?: number\n placement?: Placement\n\n onSelect: (actionId: T) => void\n\n styles?: Partial<ReturnType<typeof createContextMenuStyles>>\n}\n","// Types\nimport type { ContextMenuProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createContextMenuStyles<T>(_props: ContextMenuProps<T>) {\n return styled({\n trigger: {\n width: 'fit-content',\n height: 'fit-content',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'pointer'\n }\n })\n}\n","// External Libraries\nimport { useMemo } from 'react'\n\n// Components\nimport { Menu } from './components/Menu'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { normalizeMenuOptions } from './utils'\n\n// Types\nimport type { ContextMenuProps, MenuOption } from './types'\nimport type { PopoverTriggerRenderProps } from '../Popover/types'\n\nexport * as ContextMenuTypes from './types'\n\n// Styles\nimport { createContextMenuStyles } from './styles'\n\nexport const ContextMenu = <T extends string>(props: ContextMenuProps<T>) => {\n const {\n trigger,\n options,\n offsetX = 0,\n offsetY = 8,\n columnWidth = 240,\n placement = 'bottom-start',\n onSelect\n } = props\n\n const items = useMemo(() => normalizeMenuOptions(options), [options])\n const floatingOptions = useMemo(\n () => ({\n offsetX,\n offsetY,\n placement\n }),\n [offsetX, offsetY, placement]\n )\n\n // Hooks\n const { styles } = useThemedStyles(props, createContextMenuStyles, {\n applyCommonProps: true,\n override: props.styles,\n pick: p => [p.options, p.columnWidth, p.placement]\n })\n\n // Functions\n function handleSelect(item: MenuOption<T>, close: () => void) {\n if (item.type === 'action') {\n onSelect(item.id)\n if (item.closeOnSelect ?? true) close()\n }\n\n if (item.type === 'switch') {\n item.onCheckedChange(!item.checked)\n if (item.closeOnSelect ?? false) close()\n }\n }\n\n function renderTrigger({\n ref,\n ariaExpanded,\n onClick\n }: PopoverTriggerRenderProps) {\n return (\n // biome-ignore lint/a11y/noStaticElementInteractions: <Not needed>\n // biome-ignore lint/a11y/useKeyWithClickEvents: <Not needed>\n <span\n ref={ref as any}\n style={styles.trigger}\n aria-expanded={ariaExpanded}\n onClick={onClick}\n >\n {trigger}\n </span>\n )\n }\n\n return (\n <BasePopover floatingOptions={floatingOptions} trigger={renderTrigger}>\n <Menu\n depth={0}\n items={items}\n onHover={() => {}}\n width={columnWidth}\n onSelect={item => handleSelect(item as MenuOption<T>, close)}\n />\n </BasePopover>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Popover-BDNQO09F.js","names":["node: HTMLElement | null","Popover: React.FC<PopoverProps>"],"sources":["../src/components/commons/toolkit/Popover/styles.ts","../src/components/commons/toolkit/Popover/utils/portal.ts","../src/components/commons/toolkit/Popover/types.ts","../src/components/commons/toolkit/Popover/index.tsx"],"sourcesContent":["// Types\nimport type { PopoverProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createPopoverStyles({ hideShadow = false }: PopoverProps) {\n return styled({\n popoverNode: {\n position: 'fixed',\n left: 0,\n top: 0,\n\n zIndex: 10,\n\n padding: '0.25rem',\n\n backgroundColor: 'var(--px-bg)',\n boxShadow: hideShadow ? 'none' : 'var(--px-ring-1)',\n\n borderRadius: 'var(--px-radius-xl)'\n },\n\n trigger: {\n width: 'fit-content',\n height: 'fit-content'\n }\n })\n}\n","export function resolvePortalContainer(portalId?: string): HTMLElement | null {\n if (typeof document === 'undefined') return null\n if (!portalId) return document.body\n return document.getElementById(portalId) ?? document.body\n}\n\nexport function createsFixedContainingBlock(el: HTMLElement): boolean {\n let node: HTMLElement | null = el\n while (node) {\n const s = getComputedStyle(node)\n if (\n s.transform !== 'none' ||\n s.translate !== 'none' ||\n s.perspective !== 'none' ||\n s.filter !== 'none' ||\n s.backdropFilter !== 'none' ||\n s.contain.includes('paint')\n ) {\n return true\n }\n node = node.parentElement\n }\n return false\n}\n","// External Libraries\nimport type { MouseEventHandler, ReactNode, RefObject } from 'react'\n\n// Types\nimport type { createPopoverStyles } from './styles'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\nimport type { PaddingProps } from '@hooks/useThemedStyles/types'\n\nexport type PopoverTriggerRenderProps = {\n ariaExpanded: boolean\n ref: RefObject<HTMLElement>\n onClick: () => void\n}\n\nexport interface PopoverProps extends PaddingProps {\n open?: boolean\n portalId?: string\n containerId?: string\n hideShadow?: boolean\n closeOnEscape?: boolean\n closeOnOutsideClick?: boolean\n floatingOptions?: FloatingOptions\n anchorRef?: RefObject<HTMLElement>\n absoluteReference?: FloatingOptions['absoluteReference']\n\n onOpenChange?: (v: boolean) => void\n onMouseEnter?: MouseEventHandler<HTMLDivElement>\n onMouseLeave?: MouseEventHandler<HTMLDivElement>\n content: (ctx: { close: () => void; widthTrigger: number }) => ReactNode\n trigger?: (props: PopoverTriggerRenderProps) => ReactNode\n\n styles?: Partial<ReturnType<typeof createPopoverStyles>>\n}\n","// External Libraries\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n/** biome-ignore-all lint/correctness/useExhaustiveDependencies: <Not needed> */\nimport type React from 'react'\nimport { createPortal } from 'react-dom'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\n// Hooks\nimport { useDismiss } from '@hooks/useDismiss'\nimport { useFloating } from '@hooks/useFloating'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { PopoverProps } from './types'\n\n// Styles\nimport { createPopoverStyles } from './styles'\nimport { createsFixedContainingBlock } from './utils'\n\nexport * as PopoverTypes from './types'\n\nexport const Popover: React.FC<PopoverProps> = props => {\n const {\n portalId,\n anchorRef,\n floatingOptions,\n absoluteReference,\n closeOnEscape = true,\n open: controlledOpen,\n closeOnOutsideClick = true,\n trigger,\n content,\n onOpenChange,\n onMouseEnter,\n onMouseLeave\n } = props\n\n // Refs\n const triggerRef = useRef<HTMLElement | null>(null)\n const popoverRef = useRef<HTMLDivElement | null>(null)\n const portalRef = useRef<HTMLElement | null>(null)\n\n const resolvedAnchorRef = (anchorRef ?? triggerRef) as any\n\n // States\n const [uncontrolledOpen, setUncontrolledOpen] = useState(false)\n const [widthTrigger, setWidthTrigger] = useState(\n triggerRef.current?.offsetWidth ?? 0\n )\n const [portalEl, setPortalEl] = useState<HTMLElement | null>(null)\n\n const open = controlledOpen ?? uncontrolledOpen\n\n // Hooks\n const { styles } = useThemedStyles(props, createPopoverStyles, {\n applyCommonProps: true,\n override: props.styles,\n commonSlot: 'popoverNode',\n pick: p => [p.open, p.content, p.trigger]\n })\n\n // UseEffects\n useEffect(() => {\n if (typeof document === 'undefined') return\n\n if (!portalId) {\n setPortalEl(null)\n return\n }\n\n const found = document.getElementById(portalId) as HTMLElement | null\n setPortalEl(found)\n\n if (found) return\n\n const obs = new MutationObserver(() => {\n const el = document.getElementById(portalId) as HTMLElement | null\n if (el) {\n setPortalEl(el)\n obs.disconnect()\n }\n })\n\n obs.observe(document.documentElement, { childList: true, subtree: true })\n return () => obs.disconnect()\n }, [portalId])\n\n useEffect(() => {\n portalRef.current = portalEl\n }, [portalEl])\n\n const portalContainer = useMemo(() => {\n if (typeof document === 'undefined') return null\n return portalEl ?? document.body\n }, [portalEl])\n\n const effectiveFloatingOptions = useMemo(() => {\n const base = {\n offsetY: 6,\n keepInViewport: true,\n placement: 'bottom-start',\n portalRef\n } as const\n\n const userStrategy = floatingOptions?.strategy ?? 'fixed'\n\n const shouldFixFixedInPortal =\n !!portalId &&\n portalContainer &&\n userStrategy === 'fixed' &&\n portalContainer !== document.body &&\n createsFixedContainingBlock(portalContainer)\n\n if (shouldFixFixedInPortal) {\n return {\n ...base,\n ...floatingOptions,\n strategy: 'absolute',\n absoluteReference: 'offsetParent'\n } as any\n }\n\n return {\n ...base,\n ...floatingOptions,\n absoluteReference: absoluteReference\n } as any\n }, [portalId, portalContainer, floatingOptions])\n\n const { floatingRef, update } = useFloating(\n resolvedAnchorRef,\n effectiveFloatingOptions\n )\n\n const setOpen = useCallback(\n (v: boolean) => {\n onOpenChange?.(v)\n if (controlledOpen === undefined) setUncontrolledOpen(v)\n },\n [controlledOpen, onOpenChange]\n )\n\n const close = useCallback(() => setOpen(false), [setOpen])\n\n useDismiss({\n open,\n closeOnEscape,\n closeOnOutsideClick,\n refs: [resolvedAnchorRef, popoverRef],\n onClose: close\n })\n\n useEffect(() => {\n if (open) requestAnimationFrame(update)\n setWidthTrigger(triggerRef.current?.offsetWidth ?? 0)\n }, [open, update])\n\n useEffect(() => {\n const handleResize = () => {\n setWidthTrigger(triggerRef.current?.offsetWidth ?? 0)\n }\n\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [])\n\n const triggerNode =\n trigger?.({\n ariaExpanded: open,\n ref: triggerRef as any,\n onClick: () => setOpen(!open)\n }) ?? null\n\n const popoverNode = open ? (\n <div\n ref={el => {\n popoverRef.current = el\n floatingRef(el)\n }}\n role=\"dialog\"\n style={styles.popoverNode}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onPointerDownCapture={e => e.stopPropagation()}\n onMouseDownCapture={e => e.stopPropagation()}\n >\n {content({ close, widthTrigger })}\n </div>\n ) : null\n\n return (\n <>\n {triggerNode}\n {typeof document !== 'undefined'\n ? createPortal(popoverNode, portalContainer ?? document.body)\n : null}\n </>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select-Bad465DY.js","names":["OptionItem: React.FC<OptionItemProps>","Select: React.FC<SelectProps>"],"sources":["../src/components/commons/inputs/Select/components/OptionItem/styles.ts","../src/components/commons/inputs/Select/components/OptionItem/index.tsx","../src/components/commons/inputs/Select/hooks/useSelect/index.ts","../src/components/commons/inputs/Select/styles.ts","../src/components/commons/inputs/Select/types.ts","../src/components/commons/inputs/Select/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\nimport type { OptionItemProps } from './types'\n\nexport function createOptionsStyles({ isSelected }: OptionItemProps) {\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n alignItems: 'center',\n textAlign: 'left',\n\n borderRadius: '0.25rem',\n padding: '0.5rem 0.75rem',\n\n cursor: 'pointer',\n transition: 'background-color 0.2s ease-out',\n\n backgroundColor: isSelected\n ? 'var(--px-background-card-hover)'\n : 'transparent',\n\n __rules: {\n '&:hover': {\n backgroundColor: 'var(--px-background-card-hover) !important'\n },\n\n '&:focus': {\n outlineOffset: '-1px',\n outline: '2px solid var(--px-color-primary)'\n }\n }\n },\n\n text: {\n flex: 1,\n\n fontSize: '1rem',\n fontWeight: 500,\n lineHeight: '1.5rem',\n fontFamily: 'inherit',\n color: 'var(--px-text-primary)',\n\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n }\n })\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { OptionItemProps } from './types'\n\n// Styles\nimport { createOptionsStyles } from './styles'\n\nexport const OptionItem: React.FC<OptionItemProps> = props => {\n // Hooks\n const { styles, classes } = useThemedStyles(props, createOptionsStyles)\n\n // Functions\n function handleClick() {\n props.onClick(props.option.value)\n }\n\n return (\n <button\n type=\"button\"\n role=\"option\"\n style={styles.container}\n className={classes.container}\n aria-label={props.option.label}\n aria-selected={props.isSelected}\n onClick={handleClick}\n >\n <span style={styles.text}>{props.option.label}</span>\n </button>\n )\n}\n","// External Libraries\nimport { useState } from 'react'\n\n// Types\nimport type { SelectProps } from '../../types'\n\nexport function useSelect({\n value,\n multiple,\n canClear,\n onChange\n}: SelectProps) {\n // States\n const [open, setOpen] = useState(false)\n\n // Functions\n function handleOptionClick(option: string) {\n const isAlreadySelected = value.includes(option)\n\n if (!multiple) {\n if (isAlreadySelected) {\n if (canClear) onChange([])\n } else onChange([option])\n\n setOpen(false)\n return\n }\n\n if (isAlreadySelected) {\n if (value.length === 1) {\n if (canClear) onChange([])\n } else onChange(value.filter(v => v !== option))\n } else onChange([...value, option])\n }\n\n function togglePanel() {\n setOpen(prev => !prev)\n }\n\n function closePanel() {\n setOpen(false)\n }\n\n return { open, togglePanel, closePanel, handleOptionClick }\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { SelectProps } from './types'\n\nexport function createSelectStyles(props: SelectProps) {\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n position: 'relative',\n\n rowGap: '0.375rem'\n },\n\n content: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n\n borderWidth: 1,\n columnGap: '0.25rem',\n borderRadius: '0.5rem',\n padding: '0.625rem 0.875rem',\n\n opacity: props.disabled ? 0.5 : 1,\n cursor: props.disabled ? 'not-allowed' : 'pointer',\n boxShadow: 'var(--px-shadow-default)',\n borderColor: props.errorMessage\n ? 'var(--px-color-error)'\n : 'var(--px-border-primary)',\n\n __rules: {\n '&:focus-within': {\n outlineOffset: '-1px !important',\n outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'}) !important`\n }\n }\n },\n\n text: {\n flex: 1,\n\n textAlign: 'left',\n\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n\n fontSize: '1rem',\n lineHeight: '1.5rem',\n fontFamily: 'inherit',\n fontWeight: props.value.length ? 500 : 400,\n color: props.value.length\n ? 'var(--px-text-primary)'\n : 'var(--px-text-secondary)'\n },\n\n error: {\n display: 'block',\n fontWeight: 400,\n lineHeight: '1rem',\n fontSize: '0.75rem',\n fontFamily: 'inherit',\n color: 'var(--px-text-error)'\n },\n\n panel: {\n width: '100%'\n }\n })\n}\n","import type {\n StylesOf,\n TextProps,\n LayoutProps,\n MarginProps\n} from '@hooks/useThemedStyles/types'\nimport type { createSelectStyles } from './styles'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\nimport type { PopoverProps } from '@components/commons/toolkit/Popover/types'\n\nexport interface SelectProps extends LayoutProps, MarginProps {\n label: string\n value: string[]\n placeholder?: string\n options: SelectOption[]\n\n portalId?: PopoverProps['portalId']\n strategy?: FloatingOptions['strategy']\n scrollContainerId?: FloatingOptions['scrollContainerId']\n absoluteReference?: FloatingOptions['absoluteReference']\n\n canClear?: boolean\n multiple?: boolean\n required?: boolean\n disabled?: boolean\n hideLabel?: boolean\n errorMessage?: string\n maxVisibleItems?: number\n\n startIcon?: React.ReactNode\n styles?: StylesOf<typeof createSelectStyles>\n\n requiredColor?: string\n labelConfig?: TextProps\n\n onChange: (value: string[]) => void\n}\n\nexport interface SelectOption {\n label: string\n value: string\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\n// External Libraries\nimport type React from 'react'\nimport { useMemo } from 'react'\n\n// Components\nimport { OptionItem } from './components/OptionItem'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Label } from '@components/commons/toolkit/Label'\n\n// Hooks\nimport { useSelect } from './hooks/useSelect'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SelectProps } from './types'\nimport type { PopoverTriggerRenderProps } from '@components/commons/toolkit/Popover/types'\n\n// Styles\nimport { createSelectStyles } from './styles'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\nexport * as SelectTypes from './types'\n\nexport const Select: React.FC<SelectProps> = props => {\n // Hooks\n const { open, togglePanel, handleOptionClick } = useSelect(props)\n const { styles, classes } = useThemedStyles(props, createSelectStyles, {\n pick: p => [p.disabled, p.errorMessage, p.value],\n override: props.styles,\n applyCommonProps: true,\n commonSlot: 'container'\n })\n\n // Constants\n const maxVisible = props.maxVisibleItems ?? Infinity\n const optionsMap = useMemo(\n () => new Map(props.options.map(option => [option.value, option.label])),\n [props.options]\n )\n\n // Functions\n function renderContent() {\n if (!props.value?.length) return props.placeholder\n\n const resolvedValues = props.value.map(val => optionsMap.get(val) ?? val)\n\n const visibleItems = resolvedValues.slice(0, maxVisible)\n const hiddenCount = resolvedValues.length - visibleItems.length\n\n let result = visibleItems.join(', ')\n if (hiddenCount > 0) result += ` +${hiddenCount}`\n\n return result\n }\n\n function renderTrigger({\n ref,\n ariaExpanded,\n onClick\n }: PopoverTriggerRenderProps) {\n return (\n <button\n ref={ref as any}\n dir=\"ltr\"\n type=\"button\"\n role=\"combobox\"\n style={styles.content}\n aria-autocomplete=\"none\"\n aria-label={props.label}\n className={classes.content}\n aria-expanded={ariaExpanded}\n onClick={onClick}\n >\n {props.value.length ? props.startIcon : null}\n\n <span id=\"text-content\" style={styles.text}>\n {renderContent()}\n </span>\n\n <Icon size=\"sm\" name=\"chevrons-down\" />\n </button>\n )\n }\n\n return (\n <div style={styles.container}>\n {props.hideLabel ? null : (\n <Label\n label={props.label}\n required={props.required}\n requiredColor={props.requiredColor}\n {...props.labelConfig}\n />\n )}\n\n <BasePopover\n open={open}\n portalId={props.portalId}\n absoluteReference={props.absoluteReference}\n floatingOptions={{\n viewportMargin: 0,\n strategy: props.strategy,\n scrollContainerId: props.scrollContainerId\n }}\n trigger={renderTrigger}\n onOpenChange={togglePanel}\n >\n <div style={styles.panel}>\n {props.options.map(option => (\n <OptionItem\n key={option.value}\n option={option}\n isSelected={props.value.includes(option.value)}\n onClick={handleOptionClick}\n />\n ))}\n </div>\n </BasePopover>\n\n {props.errorMessage ? (\n <span style={styles.error}>{props.errorMessage}</span>\n ) : null}\n </div>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useDismiss-CAEk_GV-.js","names":[],"sources":["../src/hooks/useDismiss/index.ts"],"sourcesContent":["// External Libraries\nimport { type RefObject, useEffect } from 'react'\n\ntype UseDismissParams = {\n open: boolean\n closeOnEscape?: boolean\n closeOnOutsideClick?: boolean\n refs: Array<RefObject<HTMLElement | null>>\n onClose: () => void\n}\n\nexport function useDismiss({\n open,\n refs,\n closeOnEscape = true,\n closeOnOutsideClick = true,\n onClose\n}: UseDismissParams) {\n useEffect(() => {\n if (!open) return\n\n const isInsideSomeRef = (node: Node) =>\n refs.some(r => r.current?.contains(node))\n\n const onMouseDown = (e: MouseEvent) => {\n if (!closeOnOutsideClick) return\n const t = e.target as Node\n if (isInsideSomeRef(t)) return\n onClose()\n }\n\n const onKeyDown = (e: KeyboardEvent) => {\n if (!closeOnEscape) return\n if (e.key === 'Escape') onClose()\n }\n\n document.addEventListener('mousedown', onMouseDown)\n document.addEventListener('keydown', onKeyDown)\n\n return () => {\n document.removeEventListener('mousedown', onMouseDown)\n document.removeEventListener('keydown', onKeyDown)\n }\n }, [open, onClose, refs, closeOnOutsideClick, closeOnEscape])\n}\n"],"mappings":";;;AAWA,SAAgB,WAAW,EACzB,MACA,MACA,gBAAgB,MAChB,sBAAsB,MACtB,WACmB;AACnB,iBAAgB;AACd,MAAI,CAAC,KAAM;EAEX,MAAM,mBAAmB,SACvB,KAAK,MAAK,MAAK,EAAE,SAAS,SAAS,KAAK,CAAC;EAE3C,MAAM,eAAe,MAAkB;AACrC,OAAI,CAAC,oBAAqB;GAC1B,MAAM,IAAI,EAAE;AACZ,OAAI,gBAAgB,EAAE,CAAE;AACxB,YAAS;;EAGX,MAAM,aAAa,MAAqB;AACtC,OAAI,CAAC,cAAe;AACpB,OAAI,EAAE,QAAQ,SAAU,UAAS;;AAGnC,WAAS,iBAAiB,aAAa,YAAY;AACnD,WAAS,iBAAiB,WAAW,UAAU;AAE/C,eAAa;AACX,YAAS,oBAAoB,aAAa,YAAY;AACtD,YAAS,oBAAoB,WAAW,UAAU;;IAEnD;EAAC;EAAM;EAAS;EAAM;EAAqB;EAAc,CAAC"}
|