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.
- package/dist/{BasePopover-DaG1Bad1.js → BasePopover-UzOryrTn.js} +2 -2
- package/dist/{BasePopover-DaG1Bad1.js.map → BasePopover-UzOryrTn.js.map} +1 -1
- package/dist/{Button-DiBsoNFU.js → Button-Cbt1knrt.js} +4 -4
- package/dist/Button-Cbt1knrt.js.map +1 -0
- package/dist/{ContextMenu-DBEnLqgp.js → ContextMenu-vFIUXgP8.js} +3 -3
- package/dist/{ContextMenu-DBEnLqgp.js.map → ContextMenu-vFIUXgP8.js.map} +1 -1
- package/dist/{IconButton-DAZvE8i5.js → IconButton-B_yAoSQR.js} +11 -9
- package/dist/IconButton-B_yAoSQR.js.map +1 -0
- package/dist/{Popover-CeU8aanh.js → Popover-C-NRJlWf.js} +72 -40
- package/dist/Popover-C-NRJlWf.js.map +1 -0
- package/dist/{Select-CkeZfibD.js → Select-CVcQGxjv.js} +5 -4
- package/dist/Select-CVcQGxjv.js.map +1 -0
- package/dist/base-popover.d.ts +3 -3
- package/dist/base-popover.js +3 -3
- package/dist/button.d.ts +1 -1
- package/dist/button.js +1 -1
- package/dist/context-menu.d.ts +1 -1
- package/dist/context-menu.js +4 -4
- package/dist/icon-button.d.ts +1 -1
- package/dist/icon-button.js +1 -1
- package/dist/{index-C5UBhjvX.d.ts → index-9BlZnPff.d.ts} +5 -4
- package/dist/{index-BDr6Gid4.d.ts → index-B6V8Bhgk.d.ts} +4 -4
- package/dist/{index-E0ifwXgE.d.ts → index-BLsNfmom.d.ts} +2 -3
- package/dist/{index-DiIBw1ed.d.ts → index-DH6rpwqM.d.ts} +2 -2
- package/dist/{index-DlKVR1LO.d.ts → index-DK9_OGgn.d.ts} +2 -2
- package/dist/{index-BszVk1Tx.d.ts → index-ROp2paYJ.d.ts} +25 -4
- package/dist/{index-D-9XHxWM.d.ts → index-v04O7Gs-.d.ts} +3 -3
- package/dist/index.d.ts +8 -8
- package/dist/index.js +7 -7
- package/dist/popover.d.ts +2 -2
- package/dist/popover.js +2 -2
- package/dist/select.d.ts +2 -2
- package/dist/select.js +4 -4
- package/dist/tab-switch.d.ts +1 -1
- package/dist/{types-C2C3tKY8.d.ts → types-699enaOL.d.ts} +3 -2
- package/dist/{types-CCfbRgMy.d.ts → types-rPQapqo2.d.ts} +4 -1
- package/dist/use-floating.d.ts +1 -1
- package/dist/use-floating.js +1 -1
- package/dist/{useFloating-cvZUo5wI.js → useFloating-DCxblHIR.js} +26 -4
- package/dist/useFloating-DCxblHIR.js.map +1 -0
- package/package.json +1 -1
- package/dist/Button-DiBsoNFU.js.map +0 -1
- package/dist/IconButton-DAZvE8i5.js.map +0 -1
- package/dist/Popover-CeU8aanh.js.map +0 -1
- package/dist/Select-CkeZfibD.js.map +0 -1
- 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-
|
|
4
|
-
import { t as PopoverProps } from "./types-
|
|
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
|
|
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-
|
|
93
|
+
//# sourceMappingURL=index-9BlZnPff.d.ts.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { n as Placement } from "./types-
|
|
1
|
+
import { n as Placement } from "./types-rPQapqo2.js";
|
|
2
2
|
import { ReactNode } from "react";
|
|
3
|
-
import * as
|
|
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>) =>
|
|
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-
|
|
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" | "
|
|
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-
|
|
118
|
+
//# sourceMappingURL=index-BLsNfmom.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as PopoverProps } from "./types-
|
|
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-
|
|
22
|
+
//# sourceMappingURL=index-DH6rpwqM.d.ts.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as PopoverProps } from "./types-
|
|
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-
|
|
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:
|
|
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
|
|
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-
|
|
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
|
|
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>) =>
|
|
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-
|
|
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-
|
|
3
|
-
import { t as IconButton } from "./index-
|
|
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-
|
|
6
|
-
import { n as types_d_exports$1 } from "./types-
|
|
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-
|
|
9
|
-
import { t as BasePopover } from "./index-
|
|
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-
|
|
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-
|
|
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-
|
|
5
|
-
import { n as types_exports$1, t as Popover } from "./Popover-
|
|
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-
|
|
14
|
-
import { t as BasePopover } from "./BasePopover-
|
|
15
|
-
import { t as Button } from "./Button-
|
|
16
|
-
import { t as IconButton } from "./IconButton-
|
|
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-
|
|
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-
|
|
2
|
-
import { t as Popover } from "./index-
|
|
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-
|
|
4
|
-
import { n as types_exports, t as Popover } from "./Popover-
|
|
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-
|
|
2
|
-
import "./types-
|
|
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-
|
|
4
|
-
import "./Popover-
|
|
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-
|
|
7
|
+
import "./BasePopover-UzOryrTn.js";
|
|
8
8
|
import "./Label-BHq2knad.js";
|
|
9
|
-
import { n as types_exports, t as Select } from "./Select-
|
|
9
|
+
import { n as types_exports, t as Select } from "./Select-CVcQGxjv.js";
|
|
10
10
|
|
|
11
11
|
export { Select, types_exports as SelectTypes };
|
package/dist/tab-switch.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-
|
|
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-
|
|
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-
|
|
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-
|
|
18
|
+
//# sourceMappingURL=types-rPQapqo2.d.ts.map
|
package/dist/use-floating.d.ts
CHANGED
package/dist/use-floating.js
CHANGED
|
@@ -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(${
|
|
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-
|
|
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 +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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"}
|