softable-pixels-web 1.1.18 → 1.1.20

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 (46) hide show
  1. package/dist/{BasePopover-DaG1Bad1.js → BasePopover-UzOryrTn.js} +2 -2
  2. package/dist/{BasePopover-DaG1Bad1.js.map → BasePopover-UzOryrTn.js.map} +1 -1
  3. package/dist/{Button-DiBsoNFU.js → Button-Cbt1knrt.js} +4 -4
  4. package/dist/Button-Cbt1knrt.js.map +1 -0
  5. package/dist/{ContextMenu-DBEnLqgp.js → ContextMenu-vFIUXgP8.js} +3 -3
  6. package/dist/{ContextMenu-DBEnLqgp.js.map → ContextMenu-vFIUXgP8.js.map} +1 -1
  7. package/dist/{IconButton-DAZvE8i5.js → IconButton-B_yAoSQR.js} +11 -9
  8. package/dist/IconButton-B_yAoSQR.js.map +1 -0
  9. package/dist/{Popover-CeU8aanh.js → Popover-C-NRJlWf.js} +72 -40
  10. package/dist/Popover-C-NRJlWf.js.map +1 -0
  11. package/dist/{Select-CkeZfibD.js → Select-CVcQGxjv.js} +5 -4
  12. package/dist/Select-CVcQGxjv.js.map +1 -0
  13. package/dist/base-popover.d.ts +3 -3
  14. package/dist/base-popover.js +3 -3
  15. package/dist/button.d.ts +1 -1
  16. package/dist/button.js +1 -1
  17. package/dist/context-menu.d.ts +1 -1
  18. package/dist/context-menu.js +4 -4
  19. package/dist/icon-button.d.ts +1 -1
  20. package/dist/icon-button.js +1 -1
  21. package/dist/{index-C5UBhjvX.d.ts → index-9BlZnPff.d.ts} +5 -4
  22. package/dist/{index-BDr6Gid4.d.ts → index-B6V8Bhgk.d.ts} +4 -4
  23. package/dist/{index-E0ifwXgE.d.ts → index-BLsNfmom.d.ts} +2 -3
  24. package/dist/{index-DiIBw1ed.d.ts → index-DH6rpwqM.d.ts} +2 -2
  25. package/dist/{index-DlKVR1LO.d.ts → index-DK9_OGgn.d.ts} +2 -2
  26. package/dist/{index-BszVk1Tx.d.ts → index-ROp2paYJ.d.ts} +25 -4
  27. package/dist/{index-D-9XHxWM.d.ts → index-v04O7Gs-.d.ts} +3 -3
  28. package/dist/index.d.ts +8 -8
  29. package/dist/index.js +7 -7
  30. package/dist/popover.d.ts +2 -2
  31. package/dist/popover.js +2 -2
  32. package/dist/select.d.ts +2 -2
  33. package/dist/select.js +4 -4
  34. package/dist/tab-switch.d.ts +1 -1
  35. package/dist/{types-C2C3tKY8.d.ts → types-699enaOL.d.ts} +3 -2
  36. package/dist/{types-CCfbRgMy.d.ts → types-rPQapqo2.d.ts} +4 -1
  37. package/dist/use-floating.d.ts +1 -1
  38. package/dist/use-floating.js +1 -1
  39. package/dist/{useFloating-cvZUo5wI.js → useFloating-DCxblHIR.js} +26 -4
  40. package/dist/useFloating-DCxblHIR.js.map +1 -0
  41. package/package.json +1 -1
  42. package/dist/Button-DiBsoNFU.js.map +0 -1
  43. package/dist/IconButton-DAZvE8i5.js.map +0 -1
  44. package/dist/Popover-CeU8aanh.js.map +0 -1
  45. package/dist/Select-CkeZfibD.js.map +0 -1
  46. package/dist/useFloating-cvZUo5wI.js.map +0 -1
@@ -1,7 +1,7 @@
1
1
  import { a as TextProps, n as LayoutProps, r as MarginProps } from "./styleProps-B2pBEf9N.js";
2
2
  import { n as StylesOf } from "./useThemedStyles-C23Tevdv.js";
3
- import { t as FloatingOptions } from "./types-CCfbRgMy.js";
4
- import { t as PopoverProps } from "./types-C2C3tKY8.js";
3
+ import { t as FloatingOptions } from "./types-rPQapqo2.js";
4
+ import { t as PopoverProps } from "./types-699enaOL.js";
5
5
  import React$1 from "react";
6
6
 
7
7
  //#region src/components/commons/inputs/Select/styles.d.ts
@@ -66,7 +66,8 @@ interface SelectProps extends LayoutProps, MarginProps {
66
66
  placeholder?: string;
67
67
  options: SelectOption[];
68
68
  portalId?: PopoverProps['portalId'];
69
- strategy: FloatingOptions['strategy'];
69
+ strategy?: FloatingOptions['strategy'];
70
+ absoluteReference?: FloatingOptions['absoluteReference'];
70
71
  canClear?: boolean;
71
72
  multiple?: boolean;
72
73
  required?: boolean;
@@ -89,4 +90,4 @@ interface SelectOption {
89
90
  declare const Select: React$1.FC<SelectProps>;
90
91
  //#endregion
91
92
  export { types_d_exports as n, Select as t };
92
- //# sourceMappingURL=index-C5UBhjvX.d.ts.map
93
+ //# sourceMappingURL=index-9BlZnPff.d.ts.map
@@ -1,6 +1,6 @@
1
- import { n as Placement } from "./types-CCfbRgMy.js";
1
+ import { n as Placement } from "./types-rPQapqo2.js";
2
2
  import { ReactNode } from "react";
3
- import * as react_jsx_runtime2 from "react/jsx-runtime";
3
+ import * as react_jsx_runtime1 from "react/jsx-runtime";
4
4
 
5
5
  //#region src/components/commons/toolkit/ContextMenu/styles.d.ts
6
6
  declare function createContextMenuStyles<T>(_props: ContextMenuProps<T>): {
@@ -67,7 +67,7 @@ interface ContextMenuProps<T> {
67
67
  }
68
68
  //#endregion
69
69
  //#region src/components/commons/toolkit/ContextMenu/index.d.ts
70
- declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime2.JSX.Element;
70
+ declare const ContextMenu: <T extends string>(props: ContextMenuProps<T>) => react_jsx_runtime1.JSX.Element;
71
71
  //#endregion
72
72
  export { types_d_exports as n, ContextMenu as t };
73
- //# sourceMappingURL=index-BDr6Gid4.d.ts.map
73
+ //# sourceMappingURL=index-B6V8Bhgk.d.ts.map
@@ -8,7 +8,6 @@ declare function createButtonStyles({
8
8
  size,
9
9
  color,
10
10
  variant,
11
- disabled,
12
11
  fullWidth,
13
12
  textAlign,
14
13
  outlineColor
@@ -26,7 +25,7 @@ declare function createButtonStyles({
26
25
  transition: "background-color 0.5s";
27
26
  border: string;
28
27
  backgroundColor: string;
29
- boxShadow: "none" | "0px -1px 0px #0A0D120D inset, 0px 1px 2px #0A0D120D";
28
+ boxShadow: "none" | "var(--px-shadow-xs)";
30
29
  __rules: {
31
30
  '&:hover': {
32
31
  opacity: "0.85 !important";
@@ -116,4 +115,4 @@ interface ButtonProps extends PaddingProps {
116
115
  declare const Button: React.FC<ButtonProps>;
117
116
  //#endregion
118
117
  export { Button as t };
119
- //# sourceMappingURL=index-E0ifwXgE.d.ts.map
118
+ //# sourceMappingURL=index-BLsNfmom.d.ts.map
@@ -1,4 +1,4 @@
1
- import { t as PopoverProps } from "./types-C2C3tKY8.js";
1
+ import { t as PopoverProps } from "./types-699enaOL.js";
2
2
  import React, { PropsWithChildren } from "react";
3
3
 
4
4
  //#region src/components/commons/structure/BasePopover/types.d.ts
@@ -19,4 +19,4 @@ interface BasePopoverProps extends Omit<PopoverProps, 'content' | 'hideShadow'>,
19
19
  declare const BasePopover: React.FC<BasePopoverProps>;
20
20
  //#endregion
21
21
  export { BasePopover as t };
22
- //# sourceMappingURL=index-DiIBw1ed.d.ts.map
22
+ //# sourceMappingURL=index-DH6rpwqM.d.ts.map
@@ -1,4 +1,4 @@
1
- import { t as PopoverProps } from "./types-C2C3tKY8.js";
1
+ import { t as PopoverProps } from "./types-699enaOL.js";
2
2
  import React from "react";
3
3
 
4
4
  //#region src/components/commons/toolkit/Popover/index.d.ts
@@ -6,4 +6,4 @@ import React from "react";
6
6
  declare const Popover: React.FC<PopoverProps>;
7
7
  //#endregion
8
8
  export { Popover as t };
9
- //# sourceMappingURL=index-DlKVR1LO.d.ts.map
9
+ //# sourceMappingURL=index-DK9_OGgn.d.ts.map
@@ -2,13 +2,34 @@ import { MouseEvent, ReactNode } from "react";
2
2
 
3
3
  //#region src/components/commons/buttons/IconButton/styles.d.ts
4
4
  declare function createIconButtonStyles(props: IconButtonProps): {
5
- button: any;
5
+ button: {
6
+ display: "flex";
7
+ alignItems: "center";
8
+ justifyContent: "center";
9
+ cursor: "pointer";
10
+ userSelect: "none";
11
+ borderRadius: string;
12
+ border: string;
13
+ backgroundColor: string;
14
+ boxShadow: "var(--px-shadow-xs)";
15
+ __rules: {
16
+ '&:hover': {
17
+ opacity: "0.85 !important";
18
+ };
19
+ '&:disabled': {
20
+ opacity: "0.5";
21
+ cursor: "not-allowed";
22
+ };
23
+ };
24
+ minHeight: string;
25
+ minWidth: string;
26
+ };
6
27
  };
7
28
  //#endregion
8
29
  //#region src/components/commons/buttons/IconButton/types.d.ts
9
30
  interface IconButtonProps {
10
31
  icon: ReactNode;
11
- size?: IconButtonSize | (string & {});
32
+ size?: IconButtonSize;
12
33
  isLoading?: boolean;
13
34
  isDisabled?: boolean;
14
35
  variant?: IconButtonVariant;
@@ -17,11 +38,11 @@ interface IconButtonProps {
17
38
  styles?: Partial<ReturnType<typeof createIconButtonStyles>>;
18
39
  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
19
40
  }
20
- type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
41
+ type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg' | (string & {});
21
42
  type IconButtonVariant = 'filled' | 'outlined' | 'ghost';
22
43
  //#endregion
23
44
  //#region src/components/commons/buttons/IconButton/index.d.ts
24
45
  declare const IconButton: React.FC<IconButtonProps>;
25
46
  //#endregion
26
47
  export { IconButton as t };
27
- //# sourceMappingURL=index-BszVk1Tx.d.ts.map
48
+ //# sourceMappingURL=index-ROp2paYJ.d.ts.map
@@ -1,6 +1,6 @@
1
1
  import { t as CommonStyleProps } from "./styleProps-B2pBEf9N.js";
2
2
  import { ReactNode } from "react";
3
- import * as react_jsx_runtime0 from "react/jsx-runtime";
3
+ import * as react_jsx_runtime2 from "react/jsx-runtime";
4
4
 
5
5
  //#region src/components/commons/toolkit/TabSwitch/styles.d.ts
6
6
  declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): {
@@ -41,7 +41,7 @@ interface TabSwitchProps<T> extends CommonStyleProps {
41
41
  }
42
42
  //#endregion
43
43
  //#region src/components/commons/toolkit/TabSwitch/index.d.ts
44
- declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
44
+ declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime2.JSX.Element;
45
45
  //#endregion
46
46
  export { SwitchOption as n, TabSwitchProps as r, TabSwitch as t };
47
- //# sourceMappingURL=index-D-9XHxWM.d.ts.map
47
+ //# sourceMappingURL=index-v04O7Gs-.d.ts.map
package/dist/index.d.ts CHANGED
@@ -1,18 +1,18 @@
1
1
  import "./types-Ck6jQYTO.js";
2
- import { t as Button } from "./index-E0ifwXgE.js";
3
- import { t as IconButton } from "./index-BszVk1Tx.js";
2
+ import { t as Button } from "./index-BLsNfmom.js";
3
+ import { t as IconButton } from "./index-ROp2paYJ.js";
4
4
  import { t as Input } from "./index-B1QUSkjv.js";
5
- import { n as types_d_exports$2, t as Select } from "./index-C5UBhjvX.js";
6
- import { n as types_d_exports$1 } from "./types-C2C3tKY8.js";
5
+ import { n as types_d_exports$2, t as Select } from "./index-9BlZnPff.js";
6
+ import { n as types_d_exports$1 } from "./types-699enaOL.js";
7
7
  import { t as TextArea } from "./index-BD5Vr9sw.js";
8
- import { t as Popover } from "./index-DlKVR1LO.js";
9
- import { t as BasePopover } from "./index-DiIBw1ed.js";
8
+ import { t as Popover } from "./index-DK9_OGgn.js";
9
+ import { t as BasePopover } from "./index-DH6rpwqM.js";
10
10
  import { t as CheckItem } from "./index-CzB15994.js";
11
11
  import { t as Checkbox } from "./index-BymgvkBq.js";
12
- import { n as types_d_exports, t as ContextMenu } from "./index-BDr6Gid4.js";
12
+ import { n as types_d_exports, t as ContextMenu } from "./index-B6V8Bhgk.js";
13
13
  import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
14
14
  import { t as Switch } from "./index-aQIW73fh.js";
15
- import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-D-9XHxWM.js";
15
+ import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-v04O7Gs-.js";
16
16
  import { Typography } from "./typography.js";
17
17
  import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-BD5ThARj.js";
18
18
  import { useDismiss } from "./use-dismiss.js";
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
3
  import { t as useDismiss } from "./useDismiss-CAEk_GV-.js";
4
- import { t as useFloating } from "./useFloating-cvZUo5wI.js";
5
- import { n as types_exports$1, t as Popover } from "./Popover-CeU8aanh.js";
4
+ import { t as useFloating } from "./useFloating-DCxblHIR.js";
5
+ import { n as types_exports$1, t as Popover } from "./Popover-C-NRJlWf.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,13 +10,13 @@ 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-DBEnLqgp.js";
14
- import { t as BasePopover } from "./BasePopover-DaG1Bad1.js";
15
- import { t as Button } from "./Button-DiBsoNFU.js";
16
- import { t as IconButton } from "./IconButton-DAZvE8i5.js";
13
+ import { n as types_exports, t as ContextMenu } from "./ContextMenu-vFIUXgP8.js";
14
+ import { t as BasePopover } from "./BasePopover-UzOryrTn.js";
15
+ import { t as Button } from "./Button-Cbt1knrt.js";
16
+ import { t as IconButton } from "./IconButton-B_yAoSQR.js";
17
17
  import "./Label-BHq2knad.js";
18
18
  import { t as Input } from "./Input-B6a6mXsZ.js";
19
- import { n as types_exports$2, t as Select } from "./Select-CkeZfibD.js";
19
+ import { n as types_exports$2, t as Select } from "./Select-CVcQGxjv.js";
20
20
  import { t as TextArea } from "./TextArea-Oqw0zh_x.js";
21
21
  import { useVirtualAnchor } from "./use-virtual-anchor.js";
22
22
 
package/dist/popover.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { n as types_d_exports } from "./types-C2C3tKY8.js";
2
- import { t as Popover } from "./index-DlKVR1LO.js";
1
+ import { n as types_d_exports } from "./types-699enaOL.js";
2
+ import { t as Popover } from "./index-DK9_OGgn.js";
3
3
  export { Popover, types_d_exports as PopoverTypes };
package/dist/popover.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import "./useThemedStyles-CrarDyWc.js";
2
2
  import "./useDismiss-CAEk_GV-.js";
3
- import "./useFloating-cvZUo5wI.js";
4
- import { n as types_exports, t as Popover } from "./Popover-CeU8aanh.js";
3
+ import "./useFloating-DCxblHIR.js";
4
+ import { n as types_exports, t as Popover } from "./Popover-C-NRJlWf.js";
5
5
 
6
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-C5UBhjvX.js";
2
- import "./types-C2C3tKY8.js";
1
+ import { n as types_d_exports, t as Select } from "./index-9BlZnPff.js";
2
+ import "./types-699enaOL.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
2
  import "./useDismiss-CAEk_GV-.js";
3
- import "./useFloating-cvZUo5wI.js";
4
- import "./Popover-CeU8aanh.js";
3
+ import "./useFloating-DCxblHIR.js";
4
+ import "./Popover-C-NRJlWf.js";
5
5
  import "./Icon-KzwFJI_k.js";
6
6
  import "./Typography-BkFV7BhK.js";
7
- import "./BasePopover-DaG1Bad1.js";
7
+ import "./BasePopover-UzOryrTn.js";
8
8
  import "./Label-BHq2knad.js";
9
- import { n as types_exports, t as Select } from "./Select-CkeZfibD.js";
9
+ import { n as types_exports, t as Select } from "./Select-CVcQGxjv.js";
10
10
 
11
11
  export { Select, types_exports as SelectTypes };
@@ -1,2 +1,2 @@
1
- import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-D-9XHxWM.js";
1
+ import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-v04O7Gs-.js";
2
2
  export { SwitchOption, TabSwitch, TabSwitchProps };
@@ -1,5 +1,5 @@
1
1
  import { i as PaddingProps } from "./styleProps-B2pBEf9N.js";
2
- import { t as FloatingOptions } from "./types-CCfbRgMy.js";
2
+ import { t as FloatingOptions } from "./types-rPQapqo2.js";
3
3
  import { MouseEventHandler, ReactNode, RefObject } from "react";
4
4
 
5
5
  //#region src/components/commons/toolkit/Popover/styles.d.ts
@@ -37,6 +37,7 @@ interface PopoverProps extends PaddingProps {
37
37
  closeOnOutsideClick?: boolean;
38
38
  floatingOptions?: FloatingOptions;
39
39
  anchorRef?: RefObject<HTMLElement>;
40
+ absoluteReference?: FloatingOptions['absoluteReference'];
40
41
  onOpenChange?: (v: boolean) => void;
41
42
  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
42
43
  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
@@ -49,4 +50,4 @@ interface PopoverProps extends PaddingProps {
49
50
  }
50
51
  //#endregion
51
52
  export { types_d_exports as n, PopoverProps as t };
52
- //# sourceMappingURL=types-C2C3tKY8.d.ts.map
53
+ //# sourceMappingURL=types-699enaOL.d.ts.map
@@ -1,6 +1,7 @@
1
1
  //#region src/hooks/useFloating/types.d.ts
2
2
  type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' | 'center';
3
3
  type Strategy = 'fixed' | 'absolute';
4
+ type AbsoluteReference = 'offsetParent' | 'portal' | 'none';
4
5
  type FloatingOptions = {
5
6
  placement?: Placement;
6
7
  offsetX?: number;
@@ -9,7 +10,9 @@ type FloatingOptions = {
9
10
  viewportMargin?: number;
10
11
  scrollContainerId?: string;
11
12
  strategy?: Strategy;
13
+ portalRef?: React.RefObject<HTMLElement | null>;
14
+ absoluteReference?: AbsoluteReference;
12
15
  };
13
16
  //#endregion
14
17
  export { Placement as n, FloatingOptions as t };
15
- //# sourceMappingURL=types-CCfbRgMy.d.ts.map
18
+ //# sourceMappingURL=types-rPQapqo2.d.ts.map
@@ -1,4 +1,4 @@
1
- import { t as FloatingOptions } from "./types-CCfbRgMy.js";
1
+ import { t as FloatingOptions } from "./types-rPQapqo2.js";
2
2
 
3
3
  //#region src/hooks/useFloating/index.d.ts
4
4
  type AnchorLike = {
@@ -1,3 +1,3 @@
1
- import { t as useFloating } from "./useFloating-cvZUo5wI.js";
1
+ import { t as useFloating } from "./useFloating-DCxblHIR.js";
2
2
 
3
3
  export { useFloating };
@@ -225,7 +225,7 @@ function isElement(value) {
225
225
  return value instanceof Element;
226
226
  }
227
227
  function useFloating(targetRef, options) {
228
- const { offsetX = 0, offsetY = 6, strategy = "fixed", scrollContainerId, viewportMargin = 8, keepInViewport = true, placement = "bottom-start" } = options || {};
228
+ const { portalRef, offsetX = 0, offsetY = 6, strategy = "fixed", scrollContainerId, viewportMargin = 8, keepInViewport = true, absoluteReference = "portal", placement = "bottom-start" } = options || {};
229
229
  const [floatingEl, setFloatingEl] = useState(null);
230
230
  const update = useCallback(() => {
231
231
  const target = targetRef.current;
@@ -240,10 +240,30 @@ function useFloating(targetRef, options) {
240
240
  tryFlip: keepInViewport,
241
241
  margin: viewportMargin
242
242
  });
243
+ let left = pos.left;
244
+ let top = pos.top;
245
+ if (strategy === "absolute") {
246
+ if (absoluteReference === "offsetParent") {
247
+ const op = floating.offsetParent;
248
+ if (op instanceof HTMLElement) {
249
+ const r = op.getBoundingClientRect();
250
+ left -= r.left + op.clientLeft - op.scrollLeft;
251
+ top -= r.top + op.clientTop - op.scrollTop;
252
+ }
253
+ }
254
+ if (absoluteReference === "portal") {
255
+ const el = portalRef?.current;
256
+ if (el) {
257
+ const r = el.getBoundingClientRect();
258
+ left -= r.left + el.clientLeft - el.scrollLeft;
259
+ top -= r.top + el.clientTop - el.scrollTop;
260
+ }
261
+ }
262
+ }
243
263
  floating.style.top = "0px";
244
264
  floating.style.left = "0px";
245
265
  floating.style.position = strategy;
246
- floating.style.transform = `translate(${pos.left}px, ${pos.top}px)`;
266
+ floating.style.transform = `translate(${left}px, ${top}px)`;
247
267
  }, [
248
268
  offsetX,
249
269
  offsetY,
@@ -252,7 +272,9 @@ function useFloating(targetRef, options) {
252
272
  placement,
253
273
  targetRef,
254
274
  keepInViewport,
255
- viewportMargin
275
+ viewportMargin,
276
+ absoluteReference,
277
+ portalRef?.current
256
278
  ]);
257
279
  useEffect(() => {
258
280
  if (!floatingEl) return;
@@ -292,4 +314,4 @@ function useFloating(targetRef, options) {
292
314
 
293
315
  //#endregion
294
316
  export { useFloating as t };
295
- //# sourceMappingURL=useFloating-cvZUo5wI.js.map
317
+ //# sourceMappingURL=useFloating-DCxblHIR.js.map
@@ -0,0 +1 @@
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.18",
3
+ "version": "1.1.20",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "softable",
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button-DiBsoNFU.js","names":["getBorder","createButtonLoaderStyles","getBorder","Loader: React.FC<LoaderProps>","createButtonLoaderStyles","ButtonLoader: React.FC<Props>","Button: React.FC<ButtonProps>"],"sources":["../src/utils/animations/spiner.ts","../src/components/commons/toolkit/Loader/constants.ts","../src/components/commons/toolkit/Loader/utils.ts","../src/components/commons/toolkit/Loader/styles.ts","../src/components/commons/toolkit/Loader/index.tsx","../src/components/commons/buttons/Button/components/ButtonLoader/styles.ts","../src/components/commons/buttons/Button/components/ButtonLoader/index.tsx","../src/components/commons/buttons/Button/styles.ts","../src/components/commons/buttons/Button/index.tsx"],"sourcesContent":["export const SPINNER_ANIMATION = {\n animate: { rotate: 360 },\n transition: {\n repeat: Infinity,\n duration: 1,\n ease: 'linear'\n }\n}\n","const DEFAULT_SIZE = '20px'\nconst DEFAULT_THICKNESS = '2px'\n\nconst DEFAULT_COLOR = 'white'\nconst DEFAULT_EMPTY_COLOR = 'transparent'\n\nexport { DEFAULT_SIZE, DEFAULT_THICKNESS, DEFAULT_COLOR, DEFAULT_EMPTY_COLOR }\n","// Utils\nimport { DEFAULT_THICKNESS, DEFAULT_EMPTY_COLOR } from './constants'\n\n// Types\nimport type { LoaderProps } from './types'\n\nexport function getBorder(props: LoaderProps) {\n const thickness = props.thickness || DEFAULT_THICKNESS\n const emptyColor = props.emptyColor || DEFAULT_EMPTY_COLOR\n\n return `${thickness} solid ${emptyColor}`\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\nimport type { LoaderProps } from './types'\nimport { getBorder } from './utils'\nimport { DEFAULT_COLOR, DEFAULT_SIZE } from './constants'\n\nexport function createButtonLoaderStyles(props: LoaderProps): StyleMap {\n return styled({\n container: {\n display: ' inline-block',\n\n width: props.size || DEFAULT_SIZE,\n height: props.size || DEFAULT_SIZE,\n\n borderRadius: '50%',\n border: getBorder(props),\n borderLeftColor: props.color || DEFAULT_COLOR\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Utils\nimport { SPINNER_ANIMATION } from '@utils/animations'\n\n// Types\nimport type { LoaderProps } from './types'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\nexport const Loader: React.FC<LoaderProps> = props => {\n // Hooks\n const { styles } = useThemedStyles(props, createButtonLoaderStyles, {})\n\n return (\n <motion.div\n role=\"status\"\n aria-label=\"Loading\"\n style={styles.container}\n {...SPINNER_ANIMATION}\n />\n )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createButtonLoaderStyles(): StyleMap {\n return styled({\n container: {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n borderRadius: 'var(--px-border-radius-button)'\n }\n })\n}\n","// External Libraries\nimport type React from 'react'\nimport { motion } from 'framer-motion'\n\n// Components\nimport { Loader } from '@components/commons/toolkit/Loader'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createButtonLoaderStyles } from './styles'\n\ntype Props = {\n color: string\n}\n\nexport const ButtonLoader: React.FC<Props> = ({ color }) => {\n // Hooks\n const { styles } = useThemedStyles({}, createButtonLoaderStyles, {})\n\n return (\n <motion.div\n style={styles.container}\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n exit={{ opacity: 0 }}\n >\n <Loader color={color} />\n </motion.div>\n )\n}\n","// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { ButtonProps, ButtonSize, ButtonVariant } from './types'\n\nexport function createButtonStyles({\n size,\n color,\n variant,\n disabled,\n fullWidth,\n textAlign,\n outlineColor\n}: ButtonProps) {\n const finalVariant = variant ?? 'filled'\n\n return styled({\n container: {\n minHeight: getSize(size ?? 'md'),\n width: fullWidth ? '100%' : 'fit-content',\n\n position: 'relative',\n display: 'flex',\n justifyContent: textAlign || 'center',\n\n padding: '10px var(--px-space-xl)',\n gap: 'var(--px-space-sm)',\n\n borderRadius: 'var(--px-radius-md)',\n\n cursor: 'pointer',\n\n transition: 'background-color 0.5s',\n\n border: getBorder(finalVariant, outlineColor || color),\n backgroundColor: getBackgroundColor(finalVariant, color),\n\n boxShadow:\n variant === 'outlined'\n ? `0px -1px 0px #0A0D120D inset, 0px 1px 2px #0A0D120D`\n : 'none',\n\n __rules: {\n '&:hover': {\n opacity: '0.85 !important'\n },\n '&:disabled': {\n opacity: '0.5 !important',\n cursor: 'not-allowed !important'\n }\n }\n },\n\n content: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n\n padding: '0',\n borderRadius: 'inherit',\n\n whiteSpace: 'nowrap',\n columnGap: 'var(--px-space-sm)'\n }\n })\n}\n\nfunction getSize(size: ButtonSize | string): string {\n switch (size) {\n case 'lg':\n return '3.25rem'\n case 'md':\n return '2.75rem'\n case 'sm':\n return '2.25rem'\n case 'xs':\n return '1.75rem'\n default:\n return size\n }\n}\n\nfunction getBackgroundColor(variant: ButtonVariant, color?: string): string {\n if (color) return color\n\n if (variant === 'filled') return 'var(--px-btn-filled-bg)'\n\n if (variant === 'outlined') return 'transparent'\n\n if (variant === 'ghost') return 'transparent'\n\n return 'var(--px-btn-filled-bg)'\n}\n\nfunction getBorder(variant: ButtonVariant, color?: string): string {\n if (color) return `1px solid ${color}`\n\n if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n if (variant === 'outlined') return '1px solid var(--px-border-primary)'\n\n if (variant === 'ghost') return 'none'\n\n return '1px solid var(--px-color-primary)'\n}\n\nexport function getTextColor({ variant, labelColor }: ButtonProps): string {\n if (labelColor) return labelColor\n\n if (variant === 'filled') return 'var(--px-btn-filled-label)'\n\n if (variant === 'outlined') return 'var(--px-btn-outlined-label)'\n\n if (variant === 'ghost') return '--px-btn-ghost-label'\n\n return 'var(--px-btn-filled-label)'\n}\n","// External Libraries\nimport type React from 'react'\nimport type { MouseEvent } from 'react'\nimport { AnimatePresence } from 'framer-motion'\n\n// Components\nimport { ButtonLoader } from './components/ButtonLoader'\nimport { Typography } from '@components/commons/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { ButtonProps } from './types'\n\n// Styles\nimport { createButtonStyles, getTextColor } from './styles'\n\nexport const Button: React.FC<ButtonProps> = ({\n type = 'button',\n variant = 'filled',\n ...rest\n}) => {\n // Constants\n const disabled = rest.disabled || rest.loading\n const resolvedProps = { type, variant, disabled, ...rest }\n const textColor = getTextColor(resolvedProps)\n const { label, endIcon, startIcon, loading } = resolvedProps\n\n // Hooks\n const { styles, classes } = useThemedStyles(\n resolvedProps,\n createButtonStyles,\n {\n override: rest.styles,\n applyCommonProps: true,\n commonSlot: 'container',\n pick: p => [p.disabled, p.loading, p.label, p.color]\n }\n )\n\n // Functions\n function handleButtonClick(event: MouseEvent<HTMLButtonElement>) {\n if (disabled) return\n\n if (rest.onClick) rest.onClick(event)\n }\n\n return (\n <button\n type={type}\n disabled={disabled}\n aria-busy={rest.loading}\n style={styles.container}\n className={classes.container}\n onClick={handleButtonClick}\n >\n <div style={styles.content}>\n {startIcon ?? null}\n\n <Typography\n color={textColor}\n fontSize={resolvedProps.fontSize}\n variant={rest.labelVariant || 'b1'}\n >\n {label}\n </Typography>\n\n {endIcon ?? null}\n\n {loading ? (\n <AnimatePresence>\n <ButtonLoader color={textColor} />\n </AnimatePresence>\n ) : null}\n </div>\n </button>\n )\n}\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"IconButton-DAZvE8i5.js","names":["IconButton: React.FC<IconButtonProps>"],"sources":["../src/components/commons/buttons/IconButton/styles.ts","../src/components/commons/buttons/IconButton/index.tsx"],"sourcesContent":["// Types\nimport type { CSSProperties } from 'react'\nimport type {\n IconButtonSize,\n IconButtonProps,\n IconButtonVariant\n} from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createIconButtonStyles(props: IconButtonProps) {\n const {\n variant = 'outlined',\n size = 'md',\n borderColor,\n backgroundColor\n } = props\n\n return styled({\n button: {\n ...(getSize(size) as any),\n backgroundColor: getBackgroundColor(variant, backgroundColor),\n border: getBorder(variant, borderColor),\n borderRadius: 'var(--px-radius-lg)',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n cursor: 'pointer',\n userSelect: 'none',\n\n boxShadow:\n '0px 1px 2px 0px #0A0D120D, 0px -2px 0px 0px #0A0D120D inset, 0px 0px 0px 1px #0A0D121A inset',\n\n __rules: {\n '&:hover': {\n opacity: '0.85 !important'\n },\n '&:disabled': {\n opacity: '0.5',\n cursor: 'not-allowed'\n }\n }\n }\n })\n}\n\nfunction getSize(size: IconButtonSize | string): CSSProperties {\n switch (size) {\n case 'lg':\n return { minHeight: '3.25rem', minWidth: '3.25rem' }\n case 'md':\n return { minHeight: '2.75rem', minWidth: '2.75rem' }\n case 'sm':\n return { minHeight: '2.25rem', minWidth: '2.25rem' }\n case 'xs':\n return { minHeight: '1.75rem', minWidth: '1.75rem' }\n default:\n return { minHeight: size, minWidth: size }\n }\n}\n\nfunction getBackgroundColor(\n variant?: IconButtonVariant,\n color?: string\n): string {\n if (color) return color\n\n if (variant === 'filled') return 'var(--px-btn-outlined-bg)'\n\n if (variant === 'outlined') return 'var(--px-btn-outlined-bg)'\n\n return 'var(--px-btn-outlined-bg)'\n}\n\nfunction getBorder(variant?: IconButtonVariant, color?: string): string {\n if (color) return `1px solid ${color}`\n\n if (variant === 'filled') return '1px solid var(--px-btn-filled-bg)'\n\n if (variant === 'outlined') return '1px solid var(--px-btn-outlined-border)'\n\n return '1px solid var(--px-color-primary)'\n}\n","// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { IconButtonProps } from './types'\n\n// Styles\nimport { createIconButtonStyles } from './styles'\n\nexport const IconButton: React.FC<IconButtonProps> = props => {\n // Constants\n const disabled = props.isDisabled || props.isLoading\n\n // Hooks\n const { styles, classes } = useThemedStyles(props, createIconButtonStyles, {\n pick: p => [p.size, p.variant, p.borderColor, p.backgroundColor],\n override: props.styles,\n applyCommonProps: true,\n commonSlot: 'button'\n })\n\n return (\n <button\n disabled={disabled}\n aria-busy={props.isLoading}\n type=\"button\"\n className={classes.button}\n style={styles.button}\n onClick={props.onClick}\n >\n {props.icon}\n </button>\n )\n}\n"],"mappings":";;;;AASA,SAAgB,uBAAuB,OAAwB;CAC7D,MAAM,EACJ,UAAU,YACV,OAAO,MACP,aACA,oBACE;AAEJ,QAAO,OAAO,EACZ,QAAQ;EACN,GAAI,QAAQ,KAAK;EACjB,iBAAiB,mBAAmB,SAAS,gBAAgB;EAC7D,QAAQ,UAAU,SAAS,YAAY;EACvC,cAAc;EACd,SAAS;EACT,gBAAgB;EAChB,YAAY;EACZ,QAAQ;EACR,YAAY;EAEZ,WACE;EAEF,SAAS;GACP,WAAW,EACT,SAAS,mBACV;GACD,cAAc;IACZ,SAAS;IACT,QAAQ;IACT;GACF;EACF,EACF,CAAC;;AAGJ,SAAS,QAAQ,MAA8C;AAC7D,SAAQ,MAAR;EACE,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,KAAK,KACH,QAAO;GAAE,WAAW;GAAW,UAAU;GAAW;EACtD,QACE,QAAO;GAAE,WAAW;GAAM,UAAU;GAAM;;;AAIhD,SAAS,mBACP,SACA,OACQ;AACR,KAAI,MAAO,QAAO;AAElB,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,QAAO;;AAGT,SAAS,UAAU,SAA6B,OAAwB;AACtE,KAAI,MAAO,QAAO,aAAa;AAE/B,KAAI,YAAY,SAAU,QAAO;AAEjC,KAAI,YAAY,WAAY,QAAO;AAEnC,QAAO;;;;;ACvET,MAAaA,cAAwC,UAAS;CAE5D,MAAM,WAAW,MAAM,cAAc,MAAM;CAG3C,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,wBAAwB;EACzE,OAAM,MAAK;GAAC,EAAE;GAAM,EAAE;GAAS,EAAE;GAAa,EAAE;GAAgB;EAChE,UAAU,MAAM;EAChB,kBAAkB;EAClB,YAAY;EACb,CAAC;AAEF,QACE,oBAAC;EACW;EACV,aAAW,MAAM;EACjB,MAAK;EACL,WAAW,QAAQ;EACnB,OAAO,OAAO;EACd,SAAS,MAAM;YAEd,MAAM;GACA"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Popover-CeU8aanh.js","names":["Popover: React.FC<PopoverProps>"],"sources":["../src/components/commons/toolkit/Popover/styles.ts","../src/components/commons/toolkit/Popover/types.ts","../src/components/commons/toolkit/Popover/index.tsx"],"sourcesContent":["// Types\nimport type { PopoverProps } from './types'\nimport { styled } from '@hooks/useThemedStyles/types'\n\nexport function createPopoverStyles({ hideShadow = false }: PopoverProps) {\n return styled({\n popoverNode: {\n position: 'fixed',\n left: 0,\n top: 0,\n\n zIndex: 10,\n\n padding: '0.25rem',\n\n backgroundColor: 'var(--px-bg)',\n boxShadow: hideShadow ? 'none' : 'var(--px-ring-1)',\n\n borderRadius: 'var(--px-radius-xl)'\n },\n\n trigger: {\n width: 'fit-content',\n height: 'fit-content'\n }\n })\n}\n","// External Libraries\nimport type { MouseEventHandler, ReactNode, RefObject } from 'react'\n\n// Types\nimport type { createPopoverStyles } from './styles'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\nimport type { PaddingProps } from '@hooks/useThemedStyles/types'\n\nexport type PopoverTriggerRenderProps = {\n ariaExpanded: boolean\n ref: RefObject<HTMLElement>\n onClick: () => void\n}\n\nexport interface PopoverProps extends PaddingProps {\n open?: boolean\n portalId?: string\n hideShadow?: boolean\n closeOnEscape?: boolean\n closeOnOutsideClick?: boolean\n floatingOptions?: FloatingOptions\n anchorRef?: RefObject<HTMLElement>\n\n onOpenChange?: (v: boolean) => void\n onMouseEnter?: MouseEventHandler<HTMLDivElement>\n onMouseLeave?: MouseEventHandler<HTMLDivElement>\n content: (ctx: { close: () => void; widthTrigger: number }) => ReactNode\n trigger?: (props: PopoverTriggerRenderProps) => ReactNode\n\n styles?: Partial<ReturnType<typeof createPopoverStyles>>\n}\n","// External Libraries\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n/** biome-ignore-all lint/correctness/useExhaustiveDependencies: <Not needed> */\nimport type React from 'react'\nimport { createPortal } from 'react-dom'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\n// Hooks\nimport { useDismiss } from '@hooks/useDismiss'\nimport { useFloating } from '@hooks/useFloating'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { PopoverProps } from './types'\n\n// Styles\nimport { createPopoverStyles } from './styles'\n\nexport * as PopoverTypes from './types'\n\nexport const Popover: React.FC<PopoverProps> = props => {\n const {\n portalId,\n anchorRef,\n floatingOptions,\n closeOnEscape = true,\n open: controlledOpen,\n closeOnOutsideClick = true,\n trigger,\n content,\n onOpenChange,\n onMouseEnter,\n onMouseLeave\n } = props\n\n // Refs\n const triggerRef = useRef<HTMLElement | null>(null)\n const popoverRef = useRef<HTMLDivElement | null>(null)\n const resolvedAnchorRef = (anchorRef ?? triggerRef) as any\n\n // States\n const [uncontrolledOpen, setUncontrolledOpen] = useState(false)\n const [widthTrigger, setWidthTrigger] = useState(\n triggerRef.current?.offsetWidth ?? 0\n )\n const [portalEl, setPortalEl] = useState<HTMLElement | null>(null)\n\n const open = controlledOpen ?? uncontrolledOpen\n\n // Hooks\n const { styles } = useThemedStyles(props, createPopoverStyles, {\n applyCommonProps: true,\n override: props.styles,\n commonSlot: 'popoverNode',\n pick: p => [p.open, p.content, p.trigger]\n })\n\n const { floatingRef, update } = useFloating(resolvedAnchorRef, {\n offsetY: 6,\n strategy: 'fixed',\n keepInViewport: true,\n placement: 'bottom-start',\n ...floatingOptions\n })\n\n // Functions\n function setOpen(v: boolean) {\n onOpenChange?.(v)\n if (controlledOpen === undefined) setUncontrolledOpen(v)\n }\n\n const close = useCallback(() => setOpen(false), [setOpen])\n\n useDismiss({\n open,\n closeOnEscape,\n closeOnOutsideClick,\n refs: [resolvedAnchorRef, popoverRef],\n onClose: close\n })\n\n // UseEffects\n useEffect(() => {\n if (typeof document === 'undefined') return\n\n if (!portalId) {\n setPortalEl(null)\n return\n }\n\n const found = document.getElementById(portalId) as HTMLElement | null\n setPortalEl(found)\n\n if (!found) {\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 obs.observe(document.documentElement, { childList: true, subtree: true })\n return () => obs.disconnect()\n }\n\n return\n }, [portalId])\n\n const portalContainer = useMemo(() => {\n if (typeof document === 'undefined') return null\n return portalEl ?? document.body\n }, [portalEl])\n\n useEffect(() => {\n if (open) requestAnimationFrame(update)\n\n setWidthTrigger(triggerRef.current?.offsetWidth ?? 0)\n }, [open, update])\n\n useEffect(() => {\n const handleResize = () => {\n setWidthTrigger(triggerRef.current?.offsetWidth ?? 0)\n }\n\n window.addEventListener('resize', handleResize)\n\n return () => {\n window.removeEventListener('resize', handleResize)\n }\n }, [])\n\n const triggerNode =\n trigger?.({\n ariaExpanded: open,\n ref: triggerRef as any,\n onClick: () => setOpen(!open)\n }) ?? null\n\n const popoverNode = open ? (\n <div\n ref={el => {\n popoverRef.current = el\n floatingRef(el)\n }}\n role=\"dialog\"\n style={styles.popoverNode}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onMouseDownCapture={e => e.stopPropagation()}\n onPointerDownCapture={e => e.stopPropagation()}\n >\n {content({ close, widthTrigger })}\n </div>\n ) : null\n\n return (\n <>\n {triggerNode}\n {typeof document !== 'undefined'\n ? createPortal(popoverNode, portalContainer ?? document.body)\n : null}\n </>\n )\n}\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"Select-CkeZfibD.js","names":["OptionItem: React.FC<OptionItemProps>","Select: React.FC<SelectProps>"],"sources":["../src/components/commons/inputs/Select/components/OptionItem/styles.ts","../src/components/commons/inputs/Select/components/OptionItem/index.tsx","../src/components/commons/inputs/Select/hooks/useSelect/index.ts","../src/components/commons/inputs/Select/styles.ts","../src/components/commons/inputs/Select/types.ts","../src/components/commons/inputs/Select/index.tsx"],"sourcesContent":["import { styled } from '@hooks/useThemedStyles/types'\nimport type { OptionItemProps } from './types'\n\nexport function createOptionsStyles({ isSelected }: OptionItemProps) {\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n alignItems: 'center',\n textAlign: 'left',\n\n borderRadius: '0.25rem',\n padding: '0.5rem 0.75rem',\n\n cursor: 'pointer',\n transition: 'background-color 0.2s ease-out',\n\n backgroundColor: isSelected\n ? 'var(--px-background-card-hover)'\n : 'transparent',\n\n __rules: {\n '&:hover': {\n backgroundColor: 'var(--px-background-card-hover) !important'\n },\n\n '&:focus': {\n outlineOffset: '-1px',\n outline: '2px solid var(--px-color-primary)'\n }\n }\n },\n\n text: {\n flex: 1,\n\n fontSize: '1rem',\n fontWeight: 500,\n lineHeight: '1.5rem',\n fontFamily: 'inherit',\n color: 'var(--px-text-primary)',\n\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis'\n }\n })\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { OptionItemProps } from './types'\n\n// Styles\nimport { createOptionsStyles } from './styles'\n\nexport const OptionItem: React.FC<OptionItemProps> = props => {\n // Hooks\n const { styles, classes } = useThemedStyles(props, createOptionsStyles)\n\n // Functions\n function handleClick() {\n props.onClick(props.option.value)\n }\n\n return (\n <button\n type=\"button\"\n role=\"option\"\n style={styles.container}\n className={classes.container}\n aria-label={props.option.label}\n aria-selected={props.isSelected}\n onClick={handleClick}\n >\n <span style={styles.text}>{props.option.label}</span>\n </button>\n )\n}\n","// External Libraries\nimport { useState } from 'react'\n\n// Types\nimport type { SelectProps } from '../../types'\n\nexport function useSelect({\n value,\n multiple,\n canClear,\n onChange\n}: SelectProps) {\n // States\n const [open, setOpen] = useState(false)\n\n // Functions\n function handleOptionClick(option: string) {\n const isAlreadySelected = value.includes(option)\n\n if (!multiple) {\n if (isAlreadySelected) {\n if (canClear) onChange([])\n } else onChange([option])\n\n setOpen(false)\n return\n }\n\n if (isAlreadySelected) {\n if (value.length === 1) {\n if (canClear) onChange([])\n } else onChange(value.filter(v => v !== option))\n } else onChange([...value, option])\n }\n\n function togglePanel() {\n setOpen(prev => !prev)\n }\n\n function closePanel() {\n setOpen(false)\n }\n\n return { open, togglePanel, closePanel, handleOptionClick }\n}\n","import { styled } from '@hooks/useThemedStyles/types'\nimport type { SelectProps } from './types'\n\nexport function createSelectStyles(props: SelectProps) {\n return styled({\n container: {\n width: '100%',\n\n display: 'flex',\n flexDirection: 'column',\n\n position: 'relative',\n\n rowGap: '0.375rem'\n },\n\n content: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n\n borderWidth: 1,\n columnGap: '0.25rem',\n borderRadius: '0.5rem',\n padding: '0.625rem 0.875rem',\n\n opacity: props.disabled ? 0.5 : 1,\n cursor: props.disabled ? 'not-allowed' : 'pointer',\n boxShadow: 'var(--px-shadow-default)',\n borderColor: props.errorMessage\n ? 'var(--px-color-error)'\n : 'var(--px-border-primary)',\n\n __rules: {\n '&:focus-within': {\n outlineOffset: '-1px !important',\n outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'}) !important`\n }\n }\n },\n\n text: {\n flex: 1,\n\n textAlign: 'left',\n\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n\n fontSize: '1rem',\n lineHeight: '1.5rem',\n fontFamily: 'inherit',\n fontWeight: props.value.length ? 500 : 400,\n color: props.value.length\n ? 'var(--px-text-primary)'\n : 'var(--px-text-secondary)'\n },\n\n error: {\n display: 'block',\n fontWeight: 400,\n lineHeight: '1rem',\n fontSize: '0.75rem',\n fontFamily: 'inherit',\n color: 'var(--px-text-error)'\n },\n\n panel: {\n width: '100%'\n }\n })\n}\n","import type {\n StylesOf,\n TextProps,\n LayoutProps,\n MarginProps\n} from '@hooks/useThemedStyles/types'\nimport type { createSelectStyles } from './styles'\nimport type { FloatingOptions } from '@hooks/useFloating/types'\nimport type { PopoverProps } from '@components/commons/toolkit/Popover/types'\n\nexport interface SelectProps extends LayoutProps, MarginProps {\n label: string\n value: string[]\n placeholder?: string\n options: SelectOption[]\n\n portalId?: PopoverProps['portalId']\n strategy: FloatingOptions['strategy']\n\n canClear?: boolean\n multiple?: boolean\n required?: boolean\n disabled?: boolean\n hideLabel?: boolean\n errorMessage?: string\n maxVisibleItems?: number\n\n startIcon?: React.ReactNode\n styles?: StylesOf<typeof createSelectStyles>\n\n requiredColor?: string\n labelConfig?: TextProps\n\n onChange: (value: string[]) => void\n}\n\nexport interface SelectOption {\n label: string\n value: string\n}\n","/** biome-ignore-all lint/a11y/useSemanticElements: It's a custom select component */\n// External Libraries\nimport type React from 'react'\nimport { useMemo } from 'react'\n\n// Components\nimport { OptionItem } from './components/OptionItem'\nimport { Icon } from '@components/commons/toolkit/Icon'\nimport { Label } from '@components/commons/toolkit/Label'\n\n// Hooks\nimport { useSelect } from './hooks/useSelect'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SelectProps } from './types'\nimport type { PopoverTriggerRenderProps } from '@components/commons/toolkit/Popover/types'\n\n// Styles\nimport { createSelectStyles } from './styles'\nimport { BasePopover } from '@components/commons/structure/BasePopover'\n\nexport * as SelectTypes from './types'\n\nexport const Select: React.FC<SelectProps> = props => {\n // Hooks\n const { open, togglePanel, handleOptionClick } = useSelect(props)\n const { styles, classes } = useThemedStyles(props, createSelectStyles, {\n pick: p => [p.disabled, p.errorMessage, p.value],\n override: props.styles,\n applyCommonProps: true,\n commonSlot: 'container'\n })\n\n // Constants\n const maxVisible = props.maxVisibleItems ?? Infinity\n const optionsMap = useMemo(\n () => new Map(props.options.map(option => [option.value, option.label])),\n [props.options]\n )\n\n // Functions\n function renderContent() {\n if (!props.value?.length) return props.placeholder\n\n const resolvedValues = props.value.map(val => optionsMap.get(val) ?? val)\n\n const visibleItems = resolvedValues.slice(0, maxVisible)\n const hiddenCount = resolvedValues.length - visibleItems.length\n\n let result = visibleItems.join(', ')\n if (hiddenCount > 0) result += ` +${hiddenCount}`\n\n return result\n }\n\n function renderTrigger({\n ref,\n ariaExpanded,\n onClick\n }: PopoverTriggerRenderProps) {\n return (\n <button\n ref={ref as any}\n dir=\"ltr\"\n type=\"button\"\n role=\"combobox\"\n style={styles.content}\n aria-autocomplete=\"none\"\n aria-label={props.label}\n className={classes.content}\n aria-expanded={ariaExpanded}\n onClick={onClick}\n >\n {props.value.length ? props.startIcon : null}\n\n <span id=\"text-content\" style={styles.text}>\n {renderContent()}\n </span>\n\n <Icon size=\"sm\" name=\"chevrons-down\" />\n </button>\n )\n }\n\n return (\n <div style={styles.container}>\n {props.hideLabel ? null : (\n <Label\n label={props.label}\n required={props.required}\n requiredColor={props.requiredColor}\n {...props.labelConfig}\n />\n )}\n\n <BasePopover\n open={open}\n portalId={props.portalId}\n trigger={renderTrigger}\n onOpenChange={togglePanel}\n floatingOptions={{ viewportMargin: 0, strategy: props.strategy }}\n >\n <div style={styles.panel}>\n {props.options.map(option => (\n <OptionItem\n key={option.value}\n option={option}\n isSelected={props.value.includes(option.value)}\n onClick={handleOptionClick}\n />\n ))}\n </div>\n </BasePopover>\n\n {props.errorMessage ? (\n <span style={styles.error}>{props.errorMessage}</span>\n ) : null}\n </div>\n )\n}\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"useFloating-cvZUo5wI.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 offsetX = 0,\n offsetY = 6,\n strategy = 'fixed',\n scrollContainerId,\n viewportMargin = 8,\n keepInViewport = true,\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 floating.style.top = '0px'\n floating.style.left = '0px'\n floating.style.position = strategy\n floating.style.transform = `translate(${pos.left}px, ${pos.top}px)`\n }, [\n offsetX,\n offsetY,\n strategy,\n floatingEl,\n placement,\n targetRef,\n keepInViewport,\n viewportMargin\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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"}