softable-pixels-web 1.1.22 → 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.
Files changed (35) hide show
  1. package/dist/{BasePopover-PZwz1wdH.js → BasePopover-CES18mzR.js} +2 -2
  2. package/dist/{BasePopover-PZwz1wdH.js.map → BasePopover-CES18mzR.js.map} +1 -1
  3. package/dist/{ContextMenu-ByeABVhU.js → ContextMenu-D7lPQcw1.js} +16 -8
  4. package/dist/ContextMenu-D7lPQcw1.js.map +1 -0
  5. package/dist/{Popover-DpD3G9_i.js → Popover-CNon8bZo.js} +11 -5
  6. package/dist/Popover-CNon8bZo.js.map +1 -0
  7. package/dist/{Select-BIj1BrzP.js → Select-CGWL6BOg.js} +2 -2
  8. package/dist/{Select-BIj1BrzP.js.map → Select-CGWL6BOg.js.map} +1 -1
  9. package/dist/base-popover.d.ts +3 -3
  10. package/dist/base-popover.js +4 -4
  11. package/dist/button.d.ts +1 -1
  12. package/dist/context-menu.js +5 -5
  13. package/dist/{index-DX2iqN-v.d.ts → index-B6t8KE4A.d.ts} +2 -2
  14. package/dist/{index-VwpQusI_.d.ts → index-CPoGZ0_L.d.ts} +2 -2
  15. package/dist/{index-B_PqEEta.d.ts → index-CYnINkUh.d.ts} +3 -2
  16. package/dist/{index-DVE8mV5m.d.ts → index-DUP_xS5q.d.ts} +3 -3
  17. package/dist/index.d.ts +6 -6
  18. package/dist/index.js +7 -7
  19. package/dist/popover.d.ts +3 -3
  20. package/dist/popover.js +4 -4
  21. package/dist/select.d.ts +2 -2
  22. package/dist/select.js +5 -5
  23. package/dist/{types-Dm-fEm6s.d.ts → types-Bayf6NdC.d.ts} +7 -4
  24. package/dist/use-dismiss.d.ts +2 -0
  25. package/dist/use-dismiss.js +1 -1
  26. package/dist/use-floating.js +1 -1
  27. package/dist/useDismiss-DwQfMU11.js +42 -0
  28. package/dist/useDismiss-DwQfMU11.js.map +1 -0
  29. package/dist/{useFloating-DRwB71jG.js → useFloating-DCxblHIR.js} +1 -2
  30. package/dist/{useFloating-DRwB71jG.js.map → useFloating-DCxblHIR.js.map} +1 -1
  31. package/package.json +1 -1
  32. package/dist/ContextMenu-ByeABVhU.js.map +0 -1
  33. package/dist/Popover-DpD3G9_i.js.map +0 -1
  34. package/dist/useDismiss-CgVHqmqk.js +0 -46
  35. package/dist/useDismiss-CgVHqmqk.js.map +0 -1
@@ -1,5 +1,5 @@
1
1
  import { n as styled, t as useThemedStyles } from "./useThemedStyles-CrarDyWc.js";
2
- import { t as Popover } from "./Popover-DpD3G9_i.js";
2
+ import { t as Popover } from "./Popover-CNon8bZo.js";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
 
5
5
  //#region src/components/commons/structure/BasePopover/styles.ts
@@ -49,4 +49,4 @@ const BasePopover = (props) => {
49
49
 
50
50
  //#endregion
51
51
  export { BasePopover as t };
52
- //# sourceMappingURL=BasePopover-PZwz1wdH.js.map
52
+ //# sourceMappingURL=BasePopover-CES18mzR.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"BasePopover-PZwz1wdH.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 overflowX: 'hidden',\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,WAAW;EACX,oBAAoB;EAEpB,aAAa;EACb,QAAQ;EACR,SAAS,OAAO,UAAU,MAAM,UAAU;EAC1C,cAAc;EAEd,iBAAiB;EACjB,WAAW;EACX,aAAa;EACd,EACF,CAAC;;;;;ACrBJ,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
+ {"version":3,"file":"BasePopover-CES18mzR.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 overflowX: 'hidden',\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,WAAW;EACX,oBAAoB;EAEpB,aAAa;EACb,QAAQ;EACR,SAAS,OAAO,UAAU,MAAM,UAAU;EAC1C,cAAc;EAEd,iBAAiB;EACjB,WAAW;EACX,aAAa;EACd,EACF,CAAC;;;;;ACrBJ,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,8 +1,7 @@
1
1
  import { n as styled, t as useThemedStyles } from "./useThemedStyles-CrarDyWc.js";
2
2
  import { t as Switch } from "./Switch-DJNZbvzy.js";
3
- import { t as Popover } from "./Popover-DpD3G9_i.js";
4
3
  import { t as Typography } from "./Typography-BkFV7BhK.js";
5
- import { t as BasePopover } from "./BasePopover-PZwz1wdH.js";
4
+ import { t as BasePopover } from "./BasePopover-CES18mzR.js";
6
5
  import { useEffect, useMemo, useRef, useState } from "react";
7
6
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
8
7
 
@@ -106,12 +105,13 @@ const ItemRow = (props) => {
106
105
  }),
107
106
  renderMenuType()
108
107
  ]
109
- }), isGroup ? /* @__PURE__ */ jsx(Popover, {
108
+ }), isGroup ? /* @__PURE__ */ jsx(BasePopover, {
110
109
  anchorRef,
111
110
  open: subOpen,
112
- closeOnOutsideClick: false,
113
111
  closeOnEscape: false,
112
+ closeOnOutsideClick: false,
114
113
  floatingOptions,
114
+ dismissScope: props.dismissScope,
115
115
  onMouseEnter: () => {
116
116
  clearTimer();
117
117
  setSubOpen(true);
@@ -119,15 +119,15 @@ const ItemRow = (props) => {
119
119
  onMouseLeave: () => {
120
120
  scheduleClose();
121
121
  },
122
- content: () => /* @__PURE__ */ jsx(Menu, {
122
+ onOpenChange: setSubOpen,
123
+ children: /* @__PURE__ */ jsx(Menu, {
123
124
  width,
124
125
  depth: depth + 1,
125
126
  activeId: void 0,
126
127
  items: item.children,
127
128
  onHover,
128
129
  onSelect
129
- }),
130
- onOpenChange: setSubOpen
130
+ })
131
131
  }) : null] });
132
132
  };
133
133
 
@@ -202,6 +202,7 @@ const Menu = (props) => {
202
202
  depth,
203
203
  width,
204
204
  active: activeId === item.id,
205
+ dismissScope: props.dismissScope,
205
206
  onHover,
206
207
  onSelect
207
208
  }, item.id);
@@ -253,6 +254,7 @@ function createContextMenuStyles(_props) {
253
254
  //#region src/components/commons/toolkit/ContextMenu/index.tsx
254
255
  const ContextMenu = (props) => {
255
256
  const { trigger, options, offsetX = 0, offsetY = 8, columnWidth = 240, placement = "bottom-start", onSelect } = props;
257
+ const scopeRef = useRef(makeScopeId());
256
258
  const items = useMemo(() => normalizeMenuOptions(options), [options]);
257
259
  const floatingOptions = useMemo(() => ({
258
260
  offsetX,
@@ -272,6 +274,10 @@ const ContextMenu = (props) => {
272
274
  p.placement
273
275
  ]
274
276
  });
277
+ function makeScopeId() {
278
+ if (typeof crypto !== "undefined" && crypto.randomUUID) return crypto.randomUUID();
279
+ return `scope_${Math.random().toString(16).slice(2)}`;
280
+ }
275
281
  function handleSelect(item, close$1) {
276
282
  if (item.type === "action") {
277
283
  onSelect(item.id);
@@ -293,12 +299,14 @@ const ContextMenu = (props) => {
293
299
  }
294
300
  return /* @__PURE__ */ jsx(BasePopover, {
295
301
  floatingOptions,
302
+ dismissScope: scopeRef.current,
296
303
  trigger: renderTrigger,
297
304
  children: /* @__PURE__ */ jsx(Menu, {
298
305
  depth: 0,
299
306
  items,
300
307
  onHover: () => {},
301
308
  width: columnWidth,
309
+ dismissScope: scopeRef.current,
302
310
  onSelect: (item) => handleSelect(item, close)
303
311
  })
304
312
  });
@@ -306,4 +314,4 @@ const ContextMenu = (props) => {
306
314
 
307
315
  //#endregion
308
316
  export { types_exports as n, ContextMenu as t };
309
- //# sourceMappingURL=ContextMenu-ByeABVhU.js.map
317
+ //# sourceMappingURL=ContextMenu-D7lPQcw1.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ContextMenu-D7lPQcw1.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 { Typography } from '@components/commons/toolkit/Typography'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\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 <BasePopover\n // biome-ignore lint/suspicious/noExplicitAny: <Not needed>\n anchorRef={anchorRef as any}\n open={subOpen}\n closeOnEscape={false}\n closeOnOutsideClick={false}\n floatingOptions={floatingOptions}\n dismissScope={props.dismissScope}\n onMouseEnter={() => {\n clearTimer()\n setSubOpen(true)\n }}\n onMouseLeave={() => {\n scheduleClose()\n }}\n onOpenChange={setSubOpen}\n >\n <Menu\n width={width}\n depth={depth + 1}\n activeId={undefined}\n items={item.children}\n onHover={onHover}\n onSelect={onSelect}\n />\n </BasePopover>\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 dismissScope={props.dismissScope}\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, useRef } 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 // Refs\n const scopeRef = useRef<string>(makeScopeId())\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 makeScopeId() {\n if (typeof crypto !== 'undefined' && crypto.randomUUID)\n return crypto.randomUUID()\n return `scope_${Math.random().toString(16).slice(2)}`\n }\n\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\n floatingOptions={floatingOptions}\n dismissScope={scopeRef.current}\n trigger={renderTrigger}\n >\n <Menu\n depth={0}\n items={items}\n onHover={() => {}}\n width={columnWidth}\n dismissScope={scopeRef.current}\n onSelect={item => handleSelect(item as MenuOption<T>, close)}\n />\n </BasePopover>\n )\n}\n"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { n as styled, t as useThemedStyles } from "./useThemedStyles-CrarDyWc.js";
2
- import { t as useDismiss } from "./useDismiss-CgVHqmqk.js";
3
- import { t as useFloating } from "./useFloating-DRwB71jG.js";
2
+ import { t as useDismiss } from "./useDismiss-DwQfMU11.js";
3
+ import { t as useFloating } from "./useFloating-DCxblHIR.js";
4
4
  import { useCallback, useEffect, useMemo, useRef, useState } from "react";
5
5
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
6
  import { createPortal } from "react-dom";
@@ -176,10 +176,14 @@ function createPopoverStyles({ hideShadow = false }) {
176
176
  });
177
177
  }
178
178
 
179
+ //#endregion
180
+ //#region src/components/commons/toolkit/Popover/types.ts
181
+ var types_exports = {};
182
+
179
183
  //#endregion
180
184
  //#region src/components/commons/toolkit/Popover/index.tsx
181
185
  const Popover = (props) => {
182
- const { portalId, anchorRef, floatingOptions, absoluteReference, closeOnEscape = true, open: controlledOpen, closeOnOutsideClick = true, restoreFocusOnClose = true, trigger, content, onOpenChange, onMouseEnter, onMouseLeave } = props;
186
+ const { portalId, anchorRef, dismissScope, floatingOptions, absoluteReference, closeOnEscape = true, open: controlledOpen, closeOnOutsideClick = true, restoreFocusOnClose = true, trigger, content, onOpenChange, onMouseEnter, onMouseLeave } = props;
183
187
  const triggerRef = useRef(null);
184
188
  const popoverRef = useRef(null);
185
189
  const resolvedAnchorRef = anchorRef ?? triggerRef;
@@ -220,6 +224,7 @@ const Popover = (props) => {
220
224
  open,
221
225
  closeOnEscape,
222
226
  closeOnOutsideClick,
227
+ dismissScope: props.dismissScope,
223
228
  refs: [triggerRef, popoverRef],
224
229
  onClose: () => {
225
230
  lastCloseReasonRef.current = "outside";
@@ -243,6 +248,7 @@ const Popover = (props) => {
243
248
  },
244
249
  role: "dialog",
245
250
  style: styles.popoverNode,
251
+ "data-dismiss-scope": dismissScope,
246
252
  onMouseEnter,
247
253
  onMouseLeave,
248
254
  onKeyDown: (e) => {
@@ -261,5 +267,5 @@ const Popover = (props) => {
261
267
  };
262
268
 
263
269
  //#endregion
264
- export { Popover as t };
265
- //# sourceMappingURL=Popover-DpD3G9_i.js.map
270
+ export { types_exports as n, Popover as t };
271
+ //# sourceMappingURL=Popover-CNon8bZo.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Popover-CNon8bZo.js","names":["node: HTMLElement | null","Popover: React.FC<PopoverProps>"],"sources":["../src/components/commons/toolkit/Popover/hooks/usePortalContainer/index.ts","../src/components/commons/toolkit/Popover/utils/focusNextFrom.ts","../src/components/commons/toolkit/Popover/utils/portal.ts","../src/components/commons/toolkit/Popover/hooks/usePopoverA11yFocus/index.ts","../src/components/commons/toolkit/Popover/hooks/usePopoverFloatingOptions/index.ts","../src/components/commons/toolkit/Popover/styles.ts","../src/components/commons/toolkit/Popover/types.ts","../src/components/commons/toolkit/Popover/index.tsx"],"sourcesContent":["// External Libraries\nimport { useEffect, useMemo, useRef, useState } from 'react'\n\nexport function usePortalContainer(portalId?: string) {\n const portalRef = useRef<HTMLElement | null>(null)\n const [portalEl, setPortalEl] = useState<HTMLElement | null>(null)\n\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 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 return { portalRef, portalEl, portalContainer }\n}\n","const SELECTOR = [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled]):not([type=\"hidden\"])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n '[contenteditable=\"true\"]'\n].join(',')\n\nfunction isVisible(el: HTMLElement) {\n const style = window.getComputedStyle(el)\n if (style.display === 'none' || style.visibility === 'hidden') return false\n const r = el.getBoundingClientRect()\n return r.width > 0 && r.height > 0\n}\n\nexport function focusNextFrom(from: HTMLElement, root: ParentNode = document) {\n const list = Array.from(root.querySelectorAll<HTMLElement>(SELECTOR)).filter(\n isVisible\n )\n\n const i = list.indexOf(from)\n const next = i >= 0 ? list[i + 1] : list[0]\n next?.focus?.()\n return next ?? null\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 { useEffect, useRef } from 'react'\n\n// Utils\nimport { focusNextFrom } from '../../utils'\n\n// Types\nimport type { CloseReason } from '../../types'\n\ntype Params = {\n open: boolean\n restoreFocusOnClose: boolean\n triggerRef: React.RefObject<HTMLElement | null>\n lastCloseReasonRef: React.MutableRefObject<CloseReason>\n setOpen: (v: boolean) => void\n}\n\nexport function usePopoverA11yFocus({\n open,\n restoreFocusOnClose,\n triggerRef,\n lastCloseReasonRef,\n setOpen\n}: Params) {\n const tabFocusFromRef = useRef<HTMLElement | null>(null)\n\n useEffect(() => {\n if (!open) return\n if (typeof document === 'undefined') return\n\n const onKeyDownCapture = (e: KeyboardEvent) => {\n if (e.key !== 'Tab') return\n lastCloseReasonRef.current = 'tab'\n tabFocusFromRef.current = triggerRef.current\n setOpen(false)\n }\n\n document.addEventListener('keydown', onKeyDownCapture, true)\n return () => document.removeEventListener('keydown', onKeyDownCapture, true)\n }, [open, setOpen, triggerRef, lastCloseReasonRef])\n\n useEffect(() => {\n if (open) return\n if (!restoreFocusOnClose) return\n\n const reason = lastCloseReasonRef.current\n\n if (reason === 'tab') {\n const from = tabFocusFromRef.current\n tabFocusFromRef.current = null\n lastCloseReasonRef.current = 'programmatic'\n\n if (from) {\n requestAnimationFrame(() => {\n focusNextFrom(from, document)\n })\n }\n return\n }\n\n requestAnimationFrame(() => triggerRef.current?.focus?.())\n lastCloseReasonRef.current = 'programmatic'\n }, [open, restoreFocusOnClose, triggerRef, lastCloseReasonRef])\n}\n","// External Libraries\nimport { useMemo } from 'react'\nimport type { RefObject } from 'react'\n\n// Hooks\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Utils\nimport { createsFixedContainingBlock } from '../../utils'\n\ntype Params = {\n portalId?: string\n portalContainer: HTMLElement | null\n portalRef: RefObject<HTMLElement | null>\n floatingOptions?: FloatingOptions\n absoluteReference?: FloatingOptions['absoluteReference']\n}\n\nexport function usePopoverFloatingOptions({\n portalId,\n portalContainer,\n portalRef,\n floatingOptions,\n absoluteReference\n}: Params) {\n return 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\n } as any\n }, [portalId, portalContainer, portalRef, floatingOptions, absoluteReference])\n}\n","// 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","// 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 type CloseReason = 'outside' | 'escape' | 'tab' | 'programmatic'\n\nexport interface PopoverProps extends PaddingProps {\n open?: boolean\n portalId?: string\n containerId?: string\n hideShadow?: boolean\n dismissScope?: string\n closeOnEscape?: boolean\n closeOnOutsideClick?: boolean\n floatingOptions?: FloatingOptions\n anchorRef?: RefObject<HTMLElement>\n absoluteReference?: FloatingOptions['absoluteReference']\n\n restoreFocusOnClose?: boolean\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\nimport type React from 'react'\nimport { createPortal } from 'react-dom'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\n// Hooks\nimport { useDismiss } from '@hooks/useDismiss'\nimport { useFloating } from '@hooks/useFloating'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\nimport { usePortalContainer } from './hooks/usePortalContainer'\nimport { usePopoverA11yFocus } from './hooks/usePopoverA11yFocus'\nimport { usePopoverFloatingOptions } from './hooks/usePopoverFloatingOptions'\n\n// Types\nimport type { CloseReason, PopoverProps } from './types'\n\n// Styles\nimport { createPopoverStyles } from './styles'\n\nexport * as PopoverTypes from './types'\n\nexport const Popover: React.FC<PopoverProps> = props => {\n const {\n portalId,\n anchorRef,\n dismissScope,\n floatingOptions,\n absoluteReference,\n closeOnEscape = true,\n open: controlledOpen,\n closeOnOutsideClick = true,\n restoreFocusOnClose = true,\n trigger,\n content,\n onOpenChange,\n onMouseEnter,\n onMouseLeave\n } = props\n\n const triggerRef = useRef<HTMLElement | null>(null)\n const popoverRef = useRef<HTMLDivElement | null>(null)\n const resolvedAnchorRef = (anchorRef ?? triggerRef) as any\n\n const lastCloseReasonRef = useRef<CloseReason>('programmatic')\n\n const [uncontrolledOpen, setUncontrolledOpen] = useState(false)\n const [widthTrigger, setWidthTrigger] = useState(0)\n const open = controlledOpen ?? uncontrolledOpen\n\n const { portalRef, portalContainer } = usePortalContainer(portalId)\n\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 const setOpen = useCallback(\n (v: boolean) => {\n onOpenChange?.(v)\n if (controlledOpen === undefined) setUncontrolledOpen(v)\n },\n [controlledOpen, onOpenChange]\n )\n\n const effectiveFloating = usePopoverFloatingOptions({\n portalId,\n portalContainer: portalContainer as any,\n portalRef,\n floatingOptions,\n absoluteReference\n })\n\n const { floatingRef, update } = useFloating(\n resolvedAnchorRef,\n effectiveFloating\n )\n\n usePopoverA11yFocus({\n open,\n restoreFocusOnClose,\n triggerRef,\n lastCloseReasonRef,\n setOpen\n })\n\n useDismiss({\n open,\n closeOnEscape,\n closeOnOutsideClick,\n dismissScope: props.dismissScope,\n refs: [triggerRef, popoverRef],\n onClose: () => {\n lastCloseReasonRef.current = 'outside'\n setOpen(false)\n }\n })\n\n useEffect(() => {\n if (!open) return\n setWidthTrigger(triggerRef.current?.offsetWidth ?? 0)\n requestAnimationFrame(update)\n }, [open, update])\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 as any)\n }}\n role=\"dialog\"\n style={styles.popoverNode}\n data-dismiss-scope={dismissScope}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onKeyDown={e => {\n if (e.key === 'Escape') {\n e.preventDefault()\n lastCloseReasonRef.current = 'escape'\n setOpen(false)\n }\n }}\n >\n {content({ close: () => setOpen(false), 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,6 +1,6 @@
1
1
  import { n as styled, t as useThemedStyles } from "./useThemedStyles-CrarDyWc.js";
2
2
  import { t as Icon } from "./Icon-KzwFJI_k.js";
3
- import { t as BasePopover } from "./BasePopover-PZwz1wdH.js";
3
+ import { t as BasePopover } from "./BasePopover-CES18mzR.js";
4
4
  import { t as Label } from "./Label-BHq2knad.js";
5
5
  import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
6
6
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -438,4 +438,4 @@ const Select = (props) => {
438
438
 
439
439
  //#endregion
440
440
  export { types_exports as n, Select as t };
441
- //# sourceMappingURL=Select-BIj1BrzP.js.map
441
+ //# sourceMappingURL=Select-CGWL6BOg.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Select-BIj1BrzP.js","names":["value","Select: React.FC<SelectProps>"],"sources":["../src/components/commons/inputs/Select/components/OptionItem/styles.ts","../src/components/commons/inputs/Select/components/OptionItem/index.tsx","../src/hooks/useCompositeListNavigation/index.ts","../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 type { OptionItemProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createOptionsStyles(\n props: OptionItemProps & { ['data-active']?: string }\n) {\n const { isSelected } = props\n const isActive = props['data-active'] === 'true'\n const highlighted = isSelected || isActive\n\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: highlighted\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 */\nimport type React from 'react'\nimport { forwardRef } from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { OptionItemProps } from './types'\n\n// Styles\nimport { createOptionsStyles } from './styles'\n\ntype NativeButtonProps = Omit<\n React.ComponentPropsWithoutRef<'button'>,\n 'onClick'\n>\n\nexport const OptionItem = forwardRef<\n HTMLButtonElement,\n OptionItemProps & NativeButtonProps\n>((props, ref) => {\n const { styles, classes } = useThemedStyles(props, createOptionsStyles)\n\n const { option, isSelected, onClick, ...rest } = props\n\n return (\n <button\n {...rest}\n ref={ref}\n type=\"button\"\n role=\"option\"\n style={styles.container}\n className={classes.container}\n aria-label={option.label}\n aria-selected={isSelected}\n onClick={() => onClick(option.value)}\n >\n <span style={styles.text}>{option.label}</span>\n </button>\n )\n})\n\nOptionItem.displayName = 'OptionItem'\n","// External Libraries\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nexport type CompositeItemMeta = {\n disabled?: boolean\n hasChildren?: boolean\n onActivate?: () => void\n onOpenChildren?: () => void\n onCloseChildren?: () => void\n}\n\ntype Params = {\n open: boolean\n itemCount: number\n initialIndex?: number\n onCloseByTab?: () => void\n setOpen: (v: boolean) => void\n makeMeta: (index: number) => CompositeItemMeta\n}\n\nfunction findNextEnabled(\n start: number,\n dir: 1 | -1,\n count: number,\n isDisabled: (i: number) => boolean\n) {\n if (count <= 0) return 0\n let i = start\n for (let step = 0; step < count; step++) {\n i = (i + dir + count) % count\n if (!isDisabled(i)) return i\n }\n return start\n}\n\nfunction findFirstEnabled(count: number, isDisabled: (i: number) => boolean) {\n for (let i = 0; i < count; i++) if (!isDisabled(i)) return i\n return 0\n}\n\nexport function useCompositeListNavigation({\n open,\n itemCount,\n initialIndex,\n setOpen,\n makeMeta,\n onCloseByTab\n}: Params) {\n const listRef = useRef<HTMLElement | null>(null)\n const itemRefs = useRef<Array<HTMLButtonElement | null>>([])\n\n const isDisabled = useCallback(\n (i: number) => !!makeMeta(i).disabled,\n [makeMeta]\n )\n\n const [activeIndex, setActiveIndex] = useState(0)\n\n const focusItem = useCallback((i: number) => {\n const el = itemRefs.current[i]\n if (!el) return\n el.focus({ preventScroll: true })\n el.scrollIntoView({ block: 'nearest' })\n }, [])\n\n const openAndFocus = useCallback(\n (index?: number) => {\n setOpen(true)\n\n const next =\n typeof index === 'number'\n ? index\n : typeof initialIndex === 'number'\n ? initialIndex\n : findFirstEnabled(itemCount, isDisabled)\n\n setActiveIndex(next)\n requestAnimationFrame(() => focusItem(next))\n },\n [focusItem, initialIndex, isDisabled, itemCount, setOpen]\n )\n\n useEffect(() => {\n if (!open) return\n requestAnimationFrame(() => focusItem(activeIndex))\n }, [open, activeIndex, focusItem])\n\n const move = useCallback(\n (dir: 1 | -1) => {\n const next = findNextEnabled(activeIndex, dir, itemCount, isDisabled)\n setActiveIndex(next)\n requestAnimationFrame(() => focusItem(next))\n },\n [activeIndex, itemCount, isDisabled, focusItem]\n )\n\n const activate = useCallback(() => {\n const meta = makeMeta(activeIndex)\n if (meta.disabled) return\n meta.onActivate?.()\n }, [activeIndex, makeMeta])\n\n const onListKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (!open) return\n\n switch (e.key) {\n case 'Tab': {\n // ✅ fecha e deixa o browser focar o próximo\n // (e NÃO restaura foco pro trigger)\n onCloseByTab?.()\n setOpen(false)\n return\n }\n\n case 'ArrowDown':\n e.preventDefault()\n move(+1)\n return\n\n case 'ArrowUp':\n e.preventDefault()\n move(-1)\n return\n\n case 'Home': {\n e.preventDefault()\n const first = findFirstEnabled(itemCount, isDisabled)\n setActiveIndex(first)\n requestAnimationFrame(() => focusItem(first))\n return\n }\n\n case 'End': {\n e.preventDefault()\n let last = itemCount - 1\n for (let i = itemCount - 1; i >= 0; i--) {\n if (!isDisabled(i)) {\n last = i\n break\n }\n }\n setActiveIndex(last)\n requestAnimationFrame(() => focusItem(last))\n return\n }\n\n case 'Enter':\n case ' ': {\n e.preventDefault()\n activate()\n return\n }\n\n case 'Escape':\n e.preventDefault()\n setOpen(false)\n return\n\n case 'ArrowRight': {\n e.preventDefault()\n const meta = makeMeta(activeIndex)\n if (meta.hasChildren) meta.onOpenChildren?.()\n return\n }\n\n case 'ArrowLeft': {\n e.preventDefault()\n const meta = makeMeta(activeIndex)\n meta.onCloseChildren?.()\n return\n }\n }\n },\n [\n open,\n itemCount,\n activeIndex,\n move,\n setOpen,\n activate,\n makeMeta,\n focusItem,\n isDisabled,\n onCloseByTab\n ]\n )\n\n const getTriggerProps = useCallback(() => {\n return {\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n e.preventDefault()\n if (!open) openAndFocus()\n return\n }\n\n if (e.key === 'ArrowUp') {\n e.preventDefault()\n if (!open) openAndFocus(itemCount > 0 ? itemCount - 1 : 0)\n }\n }\n }\n }, [open, openAndFocus, itemCount])\n\n const getListProps = useCallback(() => {\n return {\n ref: (el: HTMLElement | null) => {\n listRef.current = el\n },\n onKeyDown: onListKeyDown\n }\n }, [onListKeyDown])\n\n const getItemProps = useCallback(\n (index: number) => {\n const isActive = index === activeIndex\n return {\n ref: (el: HTMLButtonElement | null) => {\n itemRefs.current[index] = el\n },\n tabIndex: isActive ? 0 : -1,\n 'data-active': isActive ? 'true' : 'false'\n } as const\n },\n [activeIndex]\n )\n\n return {\n activeIndex,\n getListProps,\n getItemProps,\n openAndFocus,\n setActiveIndex,\n getTriggerProps\n }\n}\n","// External Libraries\nimport { useState } from 'react'\n\n// Types\nimport type { SelectProps } from '../../types'\nimport { useCompositeListNavigation } from '@hooks/useCompositeListNavigation'\n\nexport function useSelect({\n value,\n options,\n multiple,\n disabled,\n canClear,\n onChange\n}: SelectProps) {\n // States\n const [open, setOpen] = useState(false)\n\n // Hooks\n const nav = useCompositeListNavigation({\n open,\n itemCount: options.length,\n setOpen: changeOpen,\n makeMeta: makeMeta\n })\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 makeMeta(index: number) {\n const opt = options[index]\n return {\n onActivate: () => {\n if (opt) handleOptionClick(opt.value)\n }\n }\n }\n\n function changeOpen(value: boolean) {\n setOpen(value)\n }\n\n function togglePanel() {\n if (disabled) return\n if (!open) nav.openAndFocus()\n }\n\n function closePanel() {\n setOpen(false)\n }\n\n return {\n nav,\n open,\n makeMeta,\n changeOpen,\n togglePanel,\n closePanel,\n handleOptionClick\n }\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'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\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'\n\nexport * as SelectTypes from './types'\n\nexport const Select: React.FC<SelectProps> = props => {\n const { nav, open, changeOpen, 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 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 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 return result\n }\n\n function renderTrigger({\n ref,\n ariaExpanded,\n onClick\n }: PopoverTriggerRenderProps) {\n const triggerKeyProps = nav.getTriggerProps()\n\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 disabled={props.disabled}\n {...triggerKeyProps}\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={changeOpen}\n >\n <div style={styles.panel} role=\"listbox\" {...nav.getListProps()}>\n {props.options.map((option, idx) => (\n <OptionItem\n key={option.value}\n option={option}\n onClick={handleOptionClick}\n isSelected={props.value.includes(option.value)}\n {...nav.getItemProps(idx)}\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
+ {"version":3,"file":"Select-CGWL6BOg.js","names":["value","Select: React.FC<SelectProps>"],"sources":["../src/components/commons/inputs/Select/components/OptionItem/styles.ts","../src/components/commons/inputs/Select/components/OptionItem/index.tsx","../src/hooks/useCompositeListNavigation/index.ts","../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 type { OptionItemProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createOptionsStyles(\n props: OptionItemProps & { ['data-active']?: string }\n) {\n const { isSelected } = props\n const isActive = props['data-active'] === 'true'\n const highlighted = isSelected || isActive\n\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: highlighted\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 */\nimport type React from 'react'\nimport { forwardRef } from 'react'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { OptionItemProps } from './types'\n\n// Styles\nimport { createOptionsStyles } from './styles'\n\ntype NativeButtonProps = Omit<\n React.ComponentPropsWithoutRef<'button'>,\n 'onClick'\n>\n\nexport const OptionItem = forwardRef<\n HTMLButtonElement,\n OptionItemProps & NativeButtonProps\n>((props, ref) => {\n const { styles, classes } = useThemedStyles(props, createOptionsStyles)\n\n const { option, isSelected, onClick, ...rest } = props\n\n return (\n <button\n {...rest}\n ref={ref}\n type=\"button\"\n role=\"option\"\n style={styles.container}\n className={classes.container}\n aria-label={option.label}\n aria-selected={isSelected}\n onClick={() => onClick(option.value)}\n >\n <span style={styles.text}>{option.label}</span>\n </button>\n )\n})\n\nOptionItem.displayName = 'OptionItem'\n","// External Libraries\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\nexport type CompositeItemMeta = {\n disabled?: boolean\n hasChildren?: boolean\n onActivate?: () => void\n onOpenChildren?: () => void\n onCloseChildren?: () => void\n}\n\ntype Params = {\n open: boolean\n itemCount: number\n initialIndex?: number\n onCloseByTab?: () => void\n setOpen: (v: boolean) => void\n makeMeta: (index: number) => CompositeItemMeta\n}\n\nfunction findNextEnabled(\n start: number,\n dir: 1 | -1,\n count: number,\n isDisabled: (i: number) => boolean\n) {\n if (count <= 0) return 0\n let i = start\n for (let step = 0; step < count; step++) {\n i = (i + dir + count) % count\n if (!isDisabled(i)) return i\n }\n return start\n}\n\nfunction findFirstEnabled(count: number, isDisabled: (i: number) => boolean) {\n for (let i = 0; i < count; i++) if (!isDisabled(i)) return i\n return 0\n}\n\nexport function useCompositeListNavigation({\n open,\n itemCount,\n initialIndex,\n setOpen,\n makeMeta,\n onCloseByTab\n}: Params) {\n const listRef = useRef<HTMLElement | null>(null)\n const itemRefs = useRef<Array<HTMLButtonElement | null>>([])\n\n const isDisabled = useCallback(\n (i: number) => !!makeMeta(i).disabled,\n [makeMeta]\n )\n\n const [activeIndex, setActiveIndex] = useState(0)\n\n const focusItem = useCallback((i: number) => {\n const el = itemRefs.current[i]\n if (!el) return\n el.focus({ preventScroll: true })\n el.scrollIntoView({ block: 'nearest' })\n }, [])\n\n const openAndFocus = useCallback(\n (index?: number) => {\n setOpen(true)\n\n const next =\n typeof index === 'number'\n ? index\n : typeof initialIndex === 'number'\n ? initialIndex\n : findFirstEnabled(itemCount, isDisabled)\n\n setActiveIndex(next)\n requestAnimationFrame(() => focusItem(next))\n },\n [focusItem, initialIndex, isDisabled, itemCount, setOpen]\n )\n\n useEffect(() => {\n if (!open) return\n requestAnimationFrame(() => focusItem(activeIndex))\n }, [open, activeIndex, focusItem])\n\n const move = useCallback(\n (dir: 1 | -1) => {\n const next = findNextEnabled(activeIndex, dir, itemCount, isDisabled)\n setActiveIndex(next)\n requestAnimationFrame(() => focusItem(next))\n },\n [activeIndex, itemCount, isDisabled, focusItem]\n )\n\n const activate = useCallback(() => {\n const meta = makeMeta(activeIndex)\n if (meta.disabled) return\n meta.onActivate?.()\n }, [activeIndex, makeMeta])\n\n const onListKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (!open) return\n\n switch (e.key) {\n case 'Tab': {\n // ✅ fecha e deixa o browser focar o próximo\n // (e NÃO restaura foco pro trigger)\n onCloseByTab?.()\n setOpen(false)\n return\n }\n\n case 'ArrowDown':\n e.preventDefault()\n move(+1)\n return\n\n case 'ArrowUp':\n e.preventDefault()\n move(-1)\n return\n\n case 'Home': {\n e.preventDefault()\n const first = findFirstEnabled(itemCount, isDisabled)\n setActiveIndex(first)\n requestAnimationFrame(() => focusItem(first))\n return\n }\n\n case 'End': {\n e.preventDefault()\n let last = itemCount - 1\n for (let i = itemCount - 1; i >= 0; i--) {\n if (!isDisabled(i)) {\n last = i\n break\n }\n }\n setActiveIndex(last)\n requestAnimationFrame(() => focusItem(last))\n return\n }\n\n case 'Enter':\n case ' ': {\n e.preventDefault()\n activate()\n return\n }\n\n case 'Escape':\n e.preventDefault()\n setOpen(false)\n return\n\n case 'ArrowRight': {\n e.preventDefault()\n const meta = makeMeta(activeIndex)\n if (meta.hasChildren) meta.onOpenChildren?.()\n return\n }\n\n case 'ArrowLeft': {\n e.preventDefault()\n const meta = makeMeta(activeIndex)\n meta.onCloseChildren?.()\n return\n }\n }\n },\n [\n open,\n itemCount,\n activeIndex,\n move,\n setOpen,\n activate,\n makeMeta,\n focusItem,\n isDisabled,\n onCloseByTab\n ]\n )\n\n const getTriggerProps = useCallback(() => {\n return {\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n e.preventDefault()\n if (!open) openAndFocus()\n return\n }\n\n if (e.key === 'ArrowUp') {\n e.preventDefault()\n if (!open) openAndFocus(itemCount > 0 ? itemCount - 1 : 0)\n }\n }\n }\n }, [open, openAndFocus, itemCount])\n\n const getListProps = useCallback(() => {\n return {\n ref: (el: HTMLElement | null) => {\n listRef.current = el\n },\n onKeyDown: onListKeyDown\n }\n }, [onListKeyDown])\n\n const getItemProps = useCallback(\n (index: number) => {\n const isActive = index === activeIndex\n return {\n ref: (el: HTMLButtonElement | null) => {\n itemRefs.current[index] = el\n },\n tabIndex: isActive ? 0 : -1,\n 'data-active': isActive ? 'true' : 'false'\n } as const\n },\n [activeIndex]\n )\n\n return {\n activeIndex,\n getListProps,\n getItemProps,\n openAndFocus,\n setActiveIndex,\n getTriggerProps\n }\n}\n","// External Libraries\nimport { useState } from 'react'\n\n// Types\nimport type { SelectProps } from '../../types'\nimport { useCompositeListNavigation } from '@hooks/useCompositeListNavigation'\n\nexport function useSelect({\n value,\n options,\n multiple,\n disabled,\n canClear,\n onChange\n}: SelectProps) {\n // States\n const [open, setOpen] = useState(false)\n\n // Hooks\n const nav = useCompositeListNavigation({\n open,\n itemCount: options.length,\n setOpen: changeOpen,\n makeMeta: makeMeta\n })\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 makeMeta(index: number) {\n const opt = options[index]\n return {\n onActivate: () => {\n if (opt) handleOptionClick(opt.value)\n }\n }\n }\n\n function changeOpen(value: boolean) {\n setOpen(value)\n }\n\n function togglePanel() {\n if (disabled) return\n if (!open) nav.openAndFocus()\n }\n\n function closePanel() {\n setOpen(false)\n }\n\n return {\n nav,\n open,\n makeMeta,\n changeOpen,\n togglePanel,\n closePanel,\n handleOptionClick\n }\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'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\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'\n\nexport * as SelectTypes from './types'\n\nexport const Select: React.FC<SelectProps> = props => {\n const { nav, open, changeOpen, 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 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 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 return result\n }\n\n function renderTrigger({\n ref,\n ariaExpanded,\n onClick\n }: PopoverTriggerRenderProps) {\n const triggerKeyProps = nav.getTriggerProps()\n\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 disabled={props.disabled}\n {...triggerKeyProps}\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={changeOpen}\n >\n <div style={styles.panel} role=\"listbox\" {...nav.getListProps()}>\n {props.options.map((option, idx) => (\n <OptionItem\n key={option.value}\n option={option}\n onClick={handleOptionClick}\n isSelected={props.value.includes(option.value)}\n {...nav.getItemProps(idx)}\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,4 +1,4 @@
1
- import "./types-Dm-fEm6s.js";
2
- import "./index-DX2iqN-v.js";
3
- import { t as BasePopover } from "./index-B_PqEEta.js";
1
+ import "./types-Bayf6NdC.js";
2
+ import "./index-B6t8KE4A.js";
3
+ import { t as BasePopover } from "./index-CYnINkUh.js";
4
4
  export { BasePopover };
@@ -1,7 +1,7 @@
1
1
  import "./useThemedStyles-CrarDyWc.js";
2
- import "./useDismiss-CgVHqmqk.js";
3
- import "./useFloating-DRwB71jG.js";
4
- import "./Popover-DpD3G9_i.js";
5
- import { t as BasePopover } from "./BasePopover-PZwz1wdH.js";
2
+ import "./useDismiss-DwQfMU11.js";
3
+ import "./useFloating-DCxblHIR.js";
4
+ import "./Popover-CNon8bZo.js";
5
+ import { t as BasePopover } from "./BasePopover-CES18mzR.js";
6
6
 
7
7
  export { BasePopover };
package/dist/button.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import "./types-BM6zJmu5.js";
2
- import { t as Button } from "./index-DVE8mV5m.js";
2
+ import { t as Button } from "./index-DUP_xS5q.js";
3
3
  export { Button };
@@ -1,10 +1,10 @@
1
1
  import "./useThemedStyles-CrarDyWc.js";
2
2
  import "./Switch-DJNZbvzy.js";
3
- import "./useDismiss-CgVHqmqk.js";
4
- import "./useFloating-DRwB71jG.js";
5
- import "./Popover-DpD3G9_i.js";
3
+ import "./useDismiss-DwQfMU11.js";
4
+ import "./useFloating-DCxblHIR.js";
5
+ import "./Popover-CNon8bZo.js";
6
6
  import "./Typography-BkFV7BhK.js";
7
- import { n as types_exports, t as ContextMenu } from "./ContextMenu-ByeABVhU.js";
8
- import "./BasePopover-PZwz1wdH.js";
7
+ import "./BasePopover-CES18mzR.js";
8
+ import { n as types_exports, t as ContextMenu } from "./ContextMenu-D7lPQcw1.js";
9
9
 
10
10
  export { ContextMenu, types_exports as ContextMenuTypes };
@@ -1,8 +1,8 @@
1
- import { t as PopoverProps } from "./types-Dm-fEm6s.js";
1
+ import { t as PopoverProps } from "./types-Bayf6NdC.js";
2
2
  import React from "react";
3
3
 
4
4
  //#region src/components/commons/toolkit/Popover/index.d.ts
5
5
  declare const Popover: React.FC<PopoverProps>;
6
6
  //#endregion
7
7
  export { Popover as t };
8
- //# sourceMappingURL=index-DX2iqN-v.d.ts.map
8
+ //# sourceMappingURL=index-B6t8KE4A.d.ts.map
@@ -1,7 +1,7 @@
1
1
  import { a as TextProps, n as LayoutProps, r as MarginProps } from "./styleProps-CWZn-ouw.js";
2
2
  import { n as StylesOf } from "./useThemedStyles-BUR6rDGs.js";
3
3
  import { t as FloatingOptions } from "./types-BIJRqScJ.js";
4
- import { t as PopoverProps } from "./types-Dm-fEm6s.js";
4
+ import { t as PopoverProps } from "./types-Bayf6NdC.js";
5
5
  import React$1 from "react";
6
6
 
7
7
  //#region src/components/commons/inputs/Select/styles.d.ts
@@ -91,4 +91,4 @@ interface SelectOption {
91
91
  declare const Select: React$1.FC<SelectProps>;
92
92
  //#endregion
93
93
  export { types_d_exports as n, Select as t };
94
- //# sourceMappingURL=index-VwpQusI_.d.ts.map
94
+ //# sourceMappingURL=index-CPoGZ0_L.d.ts.map
@@ -1,3 +1,4 @@
1
+ import { t as PopoverProps } from "./types-Bayf6NdC.js";
1
2
  import React, { PropsWithChildren } from "react";
2
3
 
3
4
  //#region src/components/commons/structure/BasePopover/types.d.ts
@@ -10,7 +11,7 @@ interface LayoutProps {
10
11
  interface PanelProps {
11
12
  padding?: string;
12
13
  }
13
- interface BasePopoverProps extends Omit<PopoverTypes.PopoverProps, 'content' | 'hideShadow'>, LayoutProps, PropsWithChildren {
14
+ interface BasePopoverProps extends Omit<PopoverProps, 'content' | 'hideShadow'>, LayoutProps, PropsWithChildren {
14
15
  panel?: PanelProps;
15
16
  }
16
17
  //#endregion
@@ -18,4 +19,4 @@ interface BasePopoverProps extends Omit<PopoverTypes.PopoverProps, 'content' | '
18
19
  declare const BasePopover: React.FC<BasePopoverProps>;
19
20
  //#endregion
20
21
  export { BasePopover as t };
21
- //# sourceMappingURL=index-B_PqEEta.d.ts.map
22
+ //# sourceMappingURL=index-CYnINkUh.d.ts.map
@@ -1,4 +1,4 @@
1
- import { i as PaddingProps } from "./styleProps-CWZn-ouw.js";
1
+ import { i as PaddingProps, n as LayoutProps } from "./styleProps-CWZn-ouw.js";
2
2
  import { r as TypeStyles } from "./useThemedStyles-BUR6rDGs.js";
3
3
  import { n as TypographyVariant } from "./types-BM6zJmu5.js";
4
4
  import React, { MouseEvent, ReactNode } from "react";
@@ -52,7 +52,7 @@ type Align = 'center' | 'left' | 'right';
52
52
  type ButtonType = 'button' | 'submit' | 'reset';
53
53
  type ButtonVariant = 'filled' | 'outlined' | 'ghost';
54
54
  type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
55
- interface ButtonProps extends PaddingProps {
55
+ interface ButtonProps extends PaddingProps, LayoutProps {
56
56
  /** Text label displayed inside the button */
57
57
  label: string;
58
58
  /** Text variant of the button label */
@@ -115,4 +115,4 @@ interface ButtonProps extends PaddingProps {
115
115
  declare const Button: React.FC<ButtonProps>;
116
116
  //#endregion
117
117
  export { Button as t };
118
- //# sourceMappingURL=index-DVE8mV5m.d.ts.map
118
+ //# sourceMappingURL=index-DUP_xS5q.d.ts.map
package/dist/index.d.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import "./types-BM6zJmu5.js";
2
- import { t as Button } from "./index-DVE8mV5m.js";
2
+ import { t as Button } from "./index-DUP_xS5q.js";
3
3
  import { t as IconButton } from "./index-Chi8TU12.js";
4
4
  import { t as Input } from "./index-Dp4TTO2D.js";
5
- import { n as types_d_exports$1, t as Select } from "./index-VwpQusI_.js";
6
- import "./types-Dm-fEm6s.js";
5
+ import { n as types_d_exports$2, t as Select } from "./index-CPoGZ0_L.js";
6
+ import { n as types_d_exports$1 } from "./types-Bayf6NdC.js";
7
7
  import { t as TextArea } from "./index-Cl2z9ftU.js";
8
- import { t as Popover } from "./index-DX2iqN-v.js";
9
- import { t as BasePopover } from "./index-B_PqEEta.js";
8
+ import { t as Popover } from "./index-B6t8KE4A.js";
9
+ import { t as BasePopover } from "./index-CYnINkUh.js";
10
10
  import { t as CheckItem } from "./index-BeZYjWoj.js";
11
11
  import { t as Checkbox } from "./index-BhxcqGNw.js";
12
12
  import { n as types_d_exports, t as ContextMenu } from "./index-BY84CAyh.js";
@@ -18,4 +18,4 @@ import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n
18
18
  import { useDismiss } from "./use-dismiss.js";
19
19
  import { AnchorLike, useFloating } from "./use-floating.js";
20
20
  import { useVirtualAnchor } from "./use-virtual-anchor.js";
21
- export { AnchorLike, BasePopover, Button, CheckItem, Checkbox, ContextMenu, types_d_exports as ContextMenuTypes, IconButton, InfoSummary, InfoSummaryItem, InfoSummaryProps, Input, Popover, Select, types_d_exports$1 as SelectTypes, Switch, SwitchOption, TabSwitch, TabSwitchProps, TextArea, ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, Typography, useDismiss, useFloating, useTheme, useVirtualAnchor };
21
+ export { AnchorLike, BasePopover, Button, CheckItem, Checkbox, ContextMenu, types_d_exports as ContextMenuTypes, IconButton, InfoSummary, InfoSummaryItem, InfoSummaryProps, Input, Popover, types_d_exports$1 as PopoverTypes, Select, types_d_exports$2 as SelectTypes, Switch, SwitchOption, TabSwitch, TabSwitchProps, TextArea, ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, Typography, useDismiss, useFloating, useTheme, useVirtualAnchor };
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import "./useThemedStyles-CrarDyWc.js";
2
2
  import { t as Switch } from "./Switch-DJNZbvzy.js";
3
- import { t as useDismiss } from "./useDismiss-CgVHqmqk.js";
4
- import { t as useFloating } from "./useFloating-DRwB71jG.js";
5
- import { t as Popover } from "./Popover-DpD3G9_i.js";
3
+ import { t as useDismiss } from "./useDismiss-DwQfMU11.js";
4
+ import { t as useFloating } from "./useFloating-DCxblHIR.js";
5
+ import { n as types_exports$1, t as Popover } from "./Popover-CNon8bZo.js";
6
6
  import "./Icon-KzwFJI_k.js";
7
7
  import { t as Typography } from "./Typography-BkFV7BhK.js";
8
8
  import { t as Checkbox } from "./Checkbox-j9ZnSxT7.js";
@@ -10,15 +10,15 @@ import { n as useTheme, t as ThemeProvider } from "./ThemeContext-DhXvmWKO.js";
10
10
  import { t as TabSwitch } from "./TabSwitch-DlXdgLPc.js";
11
11
  import { t as CheckItem } from "./CheckItem-CJqWCE1W.js";
12
12
  import { t as InfoSummary } from "./InfoSummary-Cf2ein9V.js";
13
- import { n as types_exports, t as ContextMenu } from "./ContextMenu-ByeABVhU.js";
14
- import { t as BasePopover } from "./BasePopover-PZwz1wdH.js";
13
+ import { t as BasePopover } from "./BasePopover-CES18mzR.js";
14
+ import { n as types_exports, t as ContextMenu } from "./ContextMenu-D7lPQcw1.js";
15
15
  import { t as Button } from "./Button-Cbt1knrt.js";
16
16
  import { t as IconButton } from "./IconButton-B_yAoSQR.js";
17
17
  import "./Label-BHq2knad.js";
18
18
  import "./MaskModule-DBNrJACG.js";
19
19
  import { t as Input } from "./Input-7z9sFjK3.js";
20
- import { n as types_exports$1, t as Select } from "./Select-BIj1BrzP.js";
20
+ import { n as types_exports$2, t as Select } from "./Select-CGWL6BOg.js";
21
21
  import { t as TextArea } from "./TextArea-DHUTFFOU.js";
22
22
  import { useVirtualAnchor } from "./use-virtual-anchor.js";
23
23
 
24
- export { BasePopover, Button, CheckItem, Checkbox, ContextMenu, types_exports as ContextMenuTypes, IconButton, InfoSummary, Input, Popover, Select, types_exports$1 as SelectTypes, Switch, TabSwitch, TextArea, ThemeProvider, Typography, useDismiss, useFloating, useTheme, useVirtualAnchor };
24
+ export { BasePopover, Button, CheckItem, Checkbox, ContextMenu, types_exports as ContextMenuTypes, IconButton, InfoSummary, Input, Popover, types_exports$1 as PopoverTypes, Select, types_exports$2 as SelectTypes, Switch, TabSwitch, TextArea, ThemeProvider, Typography, useDismiss, useFloating, useTheme, useVirtualAnchor };
package/dist/popover.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import "./types-Dm-fEm6s.js";
2
- import { t as Popover } from "./index-DX2iqN-v.js";
3
- export { Popover };
1
+ import { n as types_d_exports } from "./types-Bayf6NdC.js";
2
+ import { t as Popover } from "./index-B6t8KE4A.js";
3
+ export { Popover, types_d_exports as PopoverTypes };
package/dist/popover.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import "./useThemedStyles-CrarDyWc.js";
2
- import "./useDismiss-CgVHqmqk.js";
3
- import "./useFloating-DRwB71jG.js";
4
- import { t as Popover } from "./Popover-DpD3G9_i.js";
2
+ import "./useDismiss-DwQfMU11.js";
3
+ import "./useFloating-DCxblHIR.js";
4
+ import { n as types_exports, t as Popover } from "./Popover-CNon8bZo.js";
5
5
 
6
- export { Popover };
6
+ export { Popover, types_exports as PopoverTypes };
package/dist/select.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { n as types_d_exports, t as Select } from "./index-VwpQusI_.js";
2
- import "./types-Dm-fEm6s.js";
1
+ import { n as types_d_exports, t as Select } from "./index-CPoGZ0_L.js";
2
+ import "./types-Bayf6NdC.js";
3
3
  export { Select, types_d_exports as SelectTypes };
package/dist/select.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import "./useThemedStyles-CrarDyWc.js";
2
- import "./useDismiss-CgVHqmqk.js";
3
- import "./useFloating-DRwB71jG.js";
4
- import "./Popover-DpD3G9_i.js";
2
+ import "./useDismiss-DwQfMU11.js";
3
+ import "./useFloating-DCxblHIR.js";
4
+ import "./Popover-CNon8bZo.js";
5
5
  import "./Icon-KzwFJI_k.js";
6
6
  import "./Typography-BkFV7BhK.js";
7
- import "./BasePopover-PZwz1wdH.js";
7
+ import "./BasePopover-CES18mzR.js";
8
8
  import "./Label-BHq2knad.js";
9
- import { n as types_exports, t as Select } from "./Select-BIj1BrzP.js";
9
+ import { n as types_exports, t as Select } from "./Select-CGWL6BOg.js";
10
10
 
11
11
  export { Select, types_exports as SelectTypes };
@@ -21,18 +21,21 @@ declare function createPopoverStyles({
21
21
  height: string;
22
22
  };
23
23
  };
24
- //#endregion
25
- //#region src/components/commons/toolkit/Popover/types.d.ts
24
+ declare namespace types_d_exports {
25
+ export { CloseReason, PopoverProps, PopoverTriggerRenderProps };
26
+ }
26
27
  type PopoverTriggerRenderProps = {
27
28
  ariaExpanded: boolean;
28
29
  ref: RefObject<HTMLElement>;
29
30
  onClick: () => void;
30
31
  };
32
+ type CloseReason = 'outside' | 'escape' | 'tab' | 'programmatic';
31
33
  interface PopoverProps extends PaddingProps {
32
34
  open?: boolean;
33
35
  portalId?: string;
34
36
  containerId?: string;
35
37
  hideShadow?: boolean;
38
+ dismissScope?: string;
36
39
  closeOnEscape?: boolean;
37
40
  closeOnOutsideClick?: boolean;
38
41
  floatingOptions?: FloatingOptions;
@@ -50,5 +53,5 @@ interface PopoverProps extends PaddingProps {
50
53
  styles?: Partial<ReturnType<typeof createPopoverStyles>>;
51
54
  }
52
55
  //#endregion
53
- export { PopoverProps as t };
54
- //# sourceMappingURL=types-Dm-fEm6s.d.ts.map
56
+ export { types_d_exports as n, PopoverProps as t };
57
+ //# sourceMappingURL=types-Bayf6NdC.d.ts.map
@@ -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
@@ -1,3 +1,3 @@
1
- import { t as useDismiss } from "./useDismiss-CgVHqmqk.js";
1
+ import { t as useDismiss } from "./useDismiss-DwQfMU11.js";
2
2
 
3
3
  export { useDismiss };
@@ -1,3 +1,3 @@
1
- import { t as useFloating } from "./useFloating-DRwB71jG.js";
1
+ import { t as useFloating } from "./useFloating-DCxblHIR.js";
2
2
 
3
3
  export { useFloating };
@@ -0,0 +1,42 @@
1
+ import { useEffect } from "react";
2
+
3
+ //#region src/hooks/useDismiss/index.ts
4
+ function useDismiss({ open, refs, dismissScope, closeOnEscape = true, closeOnOutsideClick = true, onClose }) {
5
+ useEffect(() => {
6
+ if (!open) return;
7
+ const isInsideSomeRef = (node) => refs.some((r) => r.current?.contains(node));
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) => {
14
+ if (!closeOnOutsideClick) return;
15
+ const t = e.target;
16
+ if (isInsideScope(e.target)) return;
17
+ if (isInsideSomeRef(t)) return;
18
+ onClose();
19
+ };
20
+ const onKeyDown = (e) => {
21
+ if (!closeOnEscape) return;
22
+ if (e.key === "Escape") onClose();
23
+ };
24
+ document.addEventListener("pointerdown", onPointerDownCapture, true);
25
+ document.addEventListener("keydown", onKeyDown);
26
+ return () => {
27
+ document.removeEventListener("pointerdown", onPointerDownCapture, true);
28
+ document.removeEventListener("keydown", onKeyDown);
29
+ };
30
+ }, [
31
+ open,
32
+ onClose,
33
+ refs,
34
+ closeOnOutsideClick,
35
+ closeOnEscape,
36
+ dismissScope
37
+ ]);
38
+ }
39
+
40
+ //#endregion
41
+ export { useDismiss as t };
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-DRwB71jG.js.map
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":"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"}
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,6 +1,6 @@
1
1
  {
2
2
  "name": "softable-pixels-web",
3
- "version": "1.1.22",
3
+ "version": "1.1.23",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "softable",
@@ -1 +0,0 @@
1
- {"version":3,"file":"ContextMenu-ByeABVhU.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-DpD3G9_i.js","names":["node: HTMLElement | null","Popover: React.FC<PopoverProps>"],"sources":["../src/components/commons/toolkit/Popover/hooks/usePortalContainer/index.ts","../src/components/commons/toolkit/Popover/utils/focusNextFrom.ts","../src/components/commons/toolkit/Popover/utils/portal.ts","../src/components/commons/toolkit/Popover/hooks/usePopoverA11yFocus/index.ts","../src/components/commons/toolkit/Popover/hooks/usePopoverFloatingOptions/index.ts","../src/components/commons/toolkit/Popover/styles.ts","../src/components/commons/toolkit/Popover/index.tsx"],"sourcesContent":["// External Libraries\nimport { useEffect, useMemo, useRef, useState } from 'react'\n\nexport function usePortalContainer(portalId?: string) {\n const portalRef = useRef<HTMLElement | null>(null)\n const [portalEl, setPortalEl] = useState<HTMLElement | null>(null)\n\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 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 return { portalRef, portalEl, portalContainer }\n}\n","const SELECTOR = [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled]):not([type=\"hidden\"])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n '[contenteditable=\"true\"]'\n].join(',')\n\nfunction isVisible(el: HTMLElement) {\n const style = window.getComputedStyle(el)\n if (style.display === 'none' || style.visibility === 'hidden') return false\n const r = el.getBoundingClientRect()\n return r.width > 0 && r.height > 0\n}\n\nexport function focusNextFrom(from: HTMLElement, root: ParentNode = document) {\n const list = Array.from(root.querySelectorAll<HTMLElement>(SELECTOR)).filter(\n isVisible\n )\n\n const i = list.indexOf(from)\n const next = i >= 0 ? list[i + 1] : list[0]\n next?.focus?.()\n return next ?? null\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 { useEffect, useRef } from 'react'\n\n// Utils\nimport { focusNextFrom } from '../../utils'\n\n// Types\nimport type { CloseReason } from '../../types'\n\ntype Params = {\n open: boolean\n restoreFocusOnClose: boolean\n triggerRef: React.RefObject<HTMLElement | null>\n lastCloseReasonRef: React.MutableRefObject<CloseReason>\n setOpen: (v: boolean) => void\n}\n\nexport function usePopoverA11yFocus({\n open,\n restoreFocusOnClose,\n triggerRef,\n lastCloseReasonRef,\n setOpen\n}: Params) {\n const tabFocusFromRef = useRef<HTMLElement | null>(null)\n\n useEffect(() => {\n if (!open) return\n if (typeof document === 'undefined') return\n\n const onKeyDownCapture = (e: KeyboardEvent) => {\n if (e.key !== 'Tab') return\n lastCloseReasonRef.current = 'tab'\n tabFocusFromRef.current = triggerRef.current\n setOpen(false)\n }\n\n document.addEventListener('keydown', onKeyDownCapture, true)\n return () => document.removeEventListener('keydown', onKeyDownCapture, true)\n }, [open, setOpen, triggerRef, lastCloseReasonRef])\n\n useEffect(() => {\n if (open) return\n if (!restoreFocusOnClose) return\n\n const reason = lastCloseReasonRef.current\n\n if (reason === 'tab') {\n const from = tabFocusFromRef.current\n tabFocusFromRef.current = null\n lastCloseReasonRef.current = 'programmatic'\n\n if (from) {\n requestAnimationFrame(() => {\n focusNextFrom(from, document)\n })\n }\n return\n }\n\n requestAnimationFrame(() => triggerRef.current?.focus?.())\n lastCloseReasonRef.current = 'programmatic'\n }, [open, restoreFocusOnClose, triggerRef, lastCloseReasonRef])\n}\n","// External Libraries\nimport { useMemo } from 'react'\nimport type { RefObject } from 'react'\n\n// Hooks\nimport type { FloatingOptions } from '@hooks/useFloating/types'\n\n// Utils\nimport { createsFixedContainingBlock } from '../../utils'\n\ntype Params = {\n portalId?: string\n portalContainer: HTMLElement | null\n portalRef: RefObject<HTMLElement | null>\n floatingOptions?: FloatingOptions\n absoluteReference?: FloatingOptions['absoluteReference']\n}\n\nexport function usePopoverFloatingOptions({\n portalId,\n portalContainer,\n portalRef,\n floatingOptions,\n absoluteReference\n}: Params) {\n return 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\n } as any\n }, [portalId, portalContainer, portalRef, floatingOptions, absoluteReference])\n}\n","// 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","// External Libraries\nimport type React from 'react'\nimport { createPortal } from 'react-dom'\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\n// Hooks\nimport { useDismiss } from '@hooks/useDismiss'\nimport { useFloating } from '@hooks/useFloating'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\nimport { usePortalContainer } from './hooks/usePortalContainer'\nimport { usePopoverA11yFocus } from './hooks/usePopoverA11yFocus'\nimport { usePopoverFloatingOptions } from './hooks/usePopoverFloatingOptions'\n\n// Types\nimport type { CloseReason, PopoverProps } from './types'\n\n// Styles\nimport { createPopoverStyles } from './styles'\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 restoreFocusOnClose = true,\n trigger,\n content,\n onOpenChange,\n onMouseEnter,\n onMouseLeave\n } = props\n\n const triggerRef = useRef<HTMLElement | null>(null)\n const popoverRef = useRef<HTMLDivElement | null>(null)\n const resolvedAnchorRef = (anchorRef ?? triggerRef) as any\n\n const lastCloseReasonRef = useRef<CloseReason>('programmatic')\n\n const [uncontrolledOpen, setUncontrolledOpen] = useState(false)\n const [widthTrigger, setWidthTrigger] = useState(0)\n const open = controlledOpen ?? uncontrolledOpen\n\n const { portalRef, portalContainer } = usePortalContainer(portalId)\n\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 const setOpen = useCallback(\n (v: boolean) => {\n onOpenChange?.(v)\n if (controlledOpen === undefined) setUncontrolledOpen(v)\n },\n [controlledOpen, onOpenChange]\n )\n\n const effectiveFloating = usePopoverFloatingOptions({\n portalId,\n portalContainer: portalContainer as any,\n portalRef,\n floatingOptions,\n absoluteReference\n })\n\n const { floatingRef, update } = useFloating(\n resolvedAnchorRef,\n effectiveFloating\n )\n\n usePopoverA11yFocus({\n open,\n restoreFocusOnClose,\n triggerRef,\n lastCloseReasonRef,\n setOpen\n })\n\n useDismiss({\n open,\n closeOnEscape,\n closeOnOutsideClick,\n refs: [triggerRef, popoverRef],\n onClose: () => {\n lastCloseReasonRef.current = 'outside'\n setOpen(false)\n }\n })\n\n useEffect(() => {\n if (!open) return\n setWidthTrigger(triggerRef.current?.offsetWidth ?? 0)\n requestAnimationFrame(update)\n }, [open, update])\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 as any)\n }}\n role=\"dialog\"\n style={styles.popoverNode}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onKeyDown={e => {\n if (e.key === 'Escape') {\n e.preventDefault()\n lastCloseReasonRef.current = 'escape'\n setOpen(false)\n }\n }}\n >\n {content({ close: () => setOpen(false), 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,46 +0,0 @@
1
- import { useEffect } from "react";
2
-
3
- //#region src/hooks/useDismiss/index.ts
4
- function getEls(refs) {
5
- return refs.map((r) => r.current).filter((x) => !!x);
6
- }
7
- function isInside(e, els) {
8
- const anyE = e;
9
- const path = typeof anyE.composedPath === "function" ? anyE.composedPath() : void 0;
10
- if (path && path.length) return els.some((el) => path.includes(el));
11
- const t = e.target;
12
- if (!t) return false;
13
- return els.some((el) => el.contains(t));
14
- }
15
- function useDismiss({ open, refs, closeOnEscape = true, closeOnOutsideClick = true, onClose }) {
16
- useEffect(() => {
17
- if (!open) return;
18
- const onPointerDownCapture = (e) => {
19
- if (!closeOnOutsideClick) return;
20
- const els = getEls(refs);
21
- if (!els.length) return;
22
- if (isInside(e, els)) return;
23
- onClose();
24
- };
25
- const onKeyDownCapture = (e) => {
26
- if (!closeOnEscape) return;
27
- if (e.key === "Escape") onClose();
28
- };
29
- document.addEventListener("pointerdown", onPointerDownCapture, true);
30
- document.addEventListener("keydown", onKeyDownCapture, true);
31
- return () => {
32
- document.removeEventListener("pointerdown", onPointerDownCapture, true);
33
- document.removeEventListener("keydown", onKeyDownCapture, true);
34
- };
35
- }, [
36
- open,
37
- onClose,
38
- refs,
39
- closeOnOutsideClick,
40
- closeOnEscape
41
- ]);
42
- }
43
-
44
- //#endregion
45
- export { useDismiss as t };
46
- //# sourceMappingURL=useDismiss-CgVHqmqk.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useDismiss-CgVHqmqk.js","names":["path: EventTarget[] | undefined"],"sources":["../src/hooks/useDismiss/index.ts"],"sourcesContent":["import { 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\nfunction getEls(refs: Array<RefObject<HTMLElement | null>>) {\n return refs.map(r => r.current).filter((x): x is HTMLElement => !!x)\n}\n\nfunction isInside(e: Event, els: HTMLElement[]) {\n const anyE = e as any\n const path: EventTarget[] | undefined =\n typeof anyE.composedPath === 'function' ? anyE.composedPath() : undefined\n\n if (path && path.length) return els.some(el => path.includes(el))\n\n const t = e.target as Node | null\n if (!t) return false\n return els.some(el => el.contains(t))\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 onPointerDownCapture = (e: PointerEvent) => {\n if (!closeOnOutsideClick) return\n const els = getEls(refs)\n if (!els.length) return\n if (isInside(e, els)) return\n onClose()\n }\n\n const onKeyDownCapture = (e: KeyboardEvent) => {\n if (!closeOnEscape) return\n if (e.key === 'Escape') onClose()\n }\n\n document.addEventListener('pointerdown', onPointerDownCapture, true)\n document.addEventListener('keydown', onKeyDownCapture, true)\n\n return () => {\n document.removeEventListener('pointerdown', onPointerDownCapture, true)\n document.removeEventListener('keydown', onKeyDownCapture, true)\n }\n }, [open, onClose, refs, closeOnOutsideClick, closeOnEscape])\n}\n"],"mappings":";;;AAUA,SAAS,OAAO,MAA4C;AAC1D,QAAO,KAAK,KAAI,MAAK,EAAE,QAAQ,CAAC,QAAQ,MAAwB,CAAC,CAAC,EAAE;;AAGtE,SAAS,SAAS,GAAU,KAAoB;CAC9C,MAAM,OAAO;CACb,MAAMA,OACJ,OAAO,KAAK,iBAAiB,aAAa,KAAK,cAAc,GAAG;AAElE,KAAI,QAAQ,KAAK,OAAQ,QAAO,IAAI,MAAK,OAAM,KAAK,SAAS,GAAG,CAAC;CAEjE,MAAM,IAAI,EAAE;AACZ,KAAI,CAAC,EAAG,QAAO;AACf,QAAO,IAAI,MAAK,OAAM,GAAG,SAAS,EAAE,CAAC;;AAGvC,SAAgB,WAAW,EACzB,MACA,MACA,gBAAgB,MAChB,sBAAsB,MACtB,WACmB;AACnB,iBAAgB;AACd,MAAI,CAAC,KAAM;EAEX,MAAM,wBAAwB,MAAoB;AAChD,OAAI,CAAC,oBAAqB;GAC1B,MAAM,MAAM,OAAO,KAAK;AACxB,OAAI,CAAC,IAAI,OAAQ;AACjB,OAAI,SAAS,GAAG,IAAI,CAAE;AACtB,YAAS;;EAGX,MAAM,oBAAoB,MAAqB;AAC7C,OAAI,CAAC,cAAe;AACpB,OAAI,EAAE,QAAQ,SAAU,UAAS;;AAGnC,WAAS,iBAAiB,eAAe,sBAAsB,KAAK;AACpE,WAAS,iBAAiB,WAAW,kBAAkB,KAAK;AAE5D,eAAa;AACX,YAAS,oBAAoB,eAAe,sBAAsB,KAAK;AACvE,YAAS,oBAAoB,WAAW,kBAAkB,KAAK;;IAEhE;EAAC;EAAM;EAAS;EAAM;EAAqB;EAAc,CAAC"}