@cfx-dev/ui-components 4.3.2 → 4.3.4
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/{Combination-CSgOhzm-.js → Combination-BGYCZNoJ.js} +375 -367
- package/dist/Rail-CHFAf3wJ.js +81 -0
- package/dist/Table.module-DffST69u.js +17 -0
- package/dist/assets/css/Accordion.css +1 -1
- package/dist/assets/css/Box.css +1 -1
- package/dist/assets/css/Button.css +1 -1
- package/dist/assets/css/DropdownSelect.css +1 -1
- package/dist/assets/css/Flex.css +1 -1
- package/dist/assets/css/Flyout.css +1 -1
- package/dist/assets/css/Indicator.css +1 -1
- package/dist/assets/css/InfoPanel.css +1 -1
- package/dist/assets/css/Input.css +1 -1
- package/dist/assets/css/InputDropzone.css +1 -1
- package/dist/assets/css/Island.css +1 -1
- package/dist/assets/css/Link.css +1 -1
- package/dist/assets/css/Modal.css +1 -1
- package/dist/assets/css/Overlay.css +1 -1
- package/dist/assets/css/Pad.css +1 -1
- package/dist/assets/css/Popover.css +1 -1
- package/dist/assets/css/Radio.css +1 -1
- package/dist/assets/css/Rail.css +1 -1
- package/dist/assets/css/RichInput.css +1 -1
- package/dist/assets/css/Select.css +1 -1
- package/dist/assets/css/Separator.css +1 -1
- package/dist/assets/css/Switch.css +1 -1
- package/dist/assets/css/Table.css +1 -1
- package/dist/assets/css/Tabular.css +1 -1
- package/dist/assets/css/Text.css +1 -1
- package/dist/assets/css/Textarea.css +1 -1
- package/dist/assets/css/Title.css +1 -1
- package/dist/assets/css/ToggleGroup.css +1 -1
- package/dist/assets/general/global.css +1 -1
- package/dist/assets/general/themes.css +1 -1
- package/dist/components/Accordion/Accordion.js +5 -5
- package/dist/components/Accordion/AccordionShowcase.js +1 -1
- package/dist/components/Avatar/AvatarShowcase.js +1 -1
- package/dist/components/Badge/BadgeShowcase.js +1 -1
- package/dist/components/Box/Box.d.ts +6 -0
- package/dist/components/Box/Box.js +23 -0
- package/dist/components/Box/index.d.ts +3 -0
- package/dist/components/Box/index.js +6 -0
- package/dist/components/BurgerMenu/BurgerMenu.js +7 -7
- package/dist/components/BurgerMenu/BurgerMenuButton.js +2 -2
- package/dist/components/BurgerMenu/BurgerMenuShowcase.js +1 -1
- package/dist/components/Button/ButtonShowcase.js +1 -1
- package/dist/components/Checkbox/Checkbox.js +252 -157
- package/dist/components/DataTable/DataTable.js +2 -2
- package/dist/components/DataTable/DataTableShowcase.js +2 -2
- package/dist/components/DropdownSelect/DropdownSelect.js +13 -13
- package/dist/components/DropdownSelect/DropdownSelectShowcase.js +1 -1
- package/dist/components/Flex/Flex.d.ts +7 -0
- package/dist/components/Flex/Flex.js +23 -0
- package/dist/components/Flex/index.d.ts +6 -0
- package/dist/components/{Layout/Flex → Flex}/index.js +2 -2
- package/dist/components/Flyout/Flyout.js +6 -6
- package/dist/components/InfoPanel/InfoPanel.js +3 -3
- package/dist/components/InfoPanel/InfoPanelShowcase.js +1 -1
- package/dist/components/Input/Input.js +87 -87
- package/dist/components/Input/InputShowcase.js +1 -1
- package/dist/components/Input/RichInput.js +42 -42
- package/dist/components/Island/Island.js +27 -27
- package/dist/components/Layout/Pad/Pad.js +20 -20
- package/dist/components/Link/LinkShowcase.js +1 -1
- package/dist/components/Logos/LogosShowcase.js +1 -1
- package/dist/components/Modal/ModalShowcase.js +4 -4
- package/dist/components/OnScreenSensor.js +13 -13
- package/dist/components/Popover/Popover.js +5 -5
- package/dist/components/Popover/PopoverShowcase.js +1 -1
- package/dist/components/{Layout → RSC}/Box/Box.d.ts +3 -2
- package/dist/components/RSC/Box/Box.js +101 -0
- package/dist/components/RSC/Box/index.d.ts +2 -0
- package/dist/components/RSC/Box/index.js +7 -0
- package/dist/components/{Layout → RSC}/Flex/Flex.d.ts +4 -2
- package/dist/components/RSC/Flex/Flex.js +119 -0
- package/dist/components/{Layout → RSC}/Flex/index.d.ts +1 -1
- package/dist/components/RSC/Flex/index.js +15 -0
- package/dist/components/Scrollable/Rail.js +9 -0
- package/dist/components/Scrollable/Scrollable.js +88 -0
- package/dist/components/{Layout/Scrollable → Scrollable}/ScrollableShowcase.js +3 -3
- package/dist/components/{Layout/Scrollable → Scrollable}/VirtualScrollable.js +3 -3
- package/dist/components/{Layout/Scrollable → Scrollable}/index.js +1 -1
- package/dist/components/Select/Select.js +3 -3
- package/dist/components/Select/SelectShowcase.js +1 -1
- package/dist/components/Separator/Separator.js +3 -3
- package/dist/components/Shroud/Shroud.js +7 -7
- package/dist/components/Skeleton/Skeleton.d.ts +1 -1
- package/dist/components/Skeleton/Skeleton.js +5 -5
- package/dist/components/Skeleton/SkeletonShowcase.js +1 -1
- package/dist/components/Slider/Slider.js +2 -2
- package/dist/components/Slider/SliderShowcase.js +1 -1
- package/dist/components/Switch/Switch.js +1 -1
- package/dist/components/Table/TableBody.js +1 -1
- package/dist/components/Table/TableCell.d.ts +1 -1
- package/dist/components/Table/TableCell.js +13 -12
- package/dist/components/Table/TableCellCheckbox.js +1 -1
- package/dist/components/Table/TableHeader.js +1 -1
- package/dist/components/Table/TableIconButton.js +1 -1
- package/dist/components/Table/TableRoot.js +1 -1
- package/dist/components/Table/TableRow.js +1 -1
- package/dist/components/Tabular/TabularShowcase.js +1 -1
- package/dist/components/Text/TextShowcase.js +2 -2
- package/dist/components/Textarea/Textarea.js +32 -34
- package/dist/components/Title/Title.js +62 -62
- package/dist/components/Title/TitleShowcase.js +1 -1
- package/dist/components/ToggleGroup/ToggleGroup.js +7 -7
- package/dist/components/ToggleGroup/ToggleGroupShowcase.js +1 -1
- package/dist/index-ByKwkZKY.js +239 -0
- package/dist/{index-HDl8nGsm.js → index-CriGVLlo.js} +1 -1
- package/dist/{index-DZEAOJqB.js → index-DlJ4qUbZ.js} +1 -1
- package/dist/main.d.ts +8 -6
- package/dist/main.js +212 -207
- package/dist/rsc.d.ts +4 -0
- package/dist/rsc.js +16 -0
- package/dist/styles-scss/_colors.scss +41 -32
- package/dist/styles-scss/_typography.scss +5 -5
- package/dist/styles-scss/_ui.scss +36 -20
- package/dist/styles-scss/global.scss +24 -13
- package/dist/styles-scss/themes/theme_cfx.scss +3 -5
- package/dist/styles-scss/themes/theme_fivem.scss +5 -7
- package/dist/styles-scss/themes/theme_redm.scss +4 -6
- package/dist/styles-scss/themes/theme_wireframe.scss +5 -7
- package/dist/styles-scss/themes.scss +4 -4
- package/dist/styles-scss/tokens.scss +2 -56
- package/dist/utils/formatCurrency.d.ts +5 -0
- package/dist/utils/formatCurrency.js +35 -0
- package/dist/utils/formatDate.d.ts +1 -0
- package/dist/utils/formatDate.js +13 -0
- package/dist/utils/hooks/useGlobalKeyboardEvent.js +3 -3
- package/dist/utils/hooks/useWindowResize.js +5 -5
- package/dist/utils/string.d.ts +1 -0
- package/dist/utils/string.js +23 -19
- package/package.json +10 -5
- package/dist/Rail-DcVowhML.js +0 -81
- package/dist/Table.module-DHI1mXN2.js +0 -17
- package/dist/components/Layout/Box/Box.js +0 -72
- package/dist/components/Layout/Box/index.d.ts +0 -2
- package/dist/components/Layout/Box/index.js +0 -5
- package/dist/components/Layout/Flex/Flex.js +0 -84
- package/dist/components/Layout/Scrollable/Rail.js +0 -9
- package/dist/components/Layout/Scrollable/Scrollable.js +0 -91
- package/dist/index-BHuChyf5.js +0 -238
- /package/dist/components/{Layout/Flex → Flex}/FlexShowcase.d.ts +0 -0
- /package/dist/components/{Layout/Flex → Flex}/FlexShowcase.js +0 -0
- /package/dist/components/{Layout → RSC}/Box/Box.types.d.ts +0 -0
- /package/dist/components/{Layout → RSC}/Box/Box.types.js +0 -0
- /package/dist/components/{Layout → RSC}/Flex/Flex.types.d.ts +0 -0
- /package/dist/components/{Layout → RSC}/Flex/Flex.types.js +0 -0
- /package/dist/components/{Layout → RSC}/Flex/FlexRestricter.d.ts +0 -0
- /package/dist/components/{Layout → RSC}/Flex/FlexRestricter.js +0 -0
- /package/dist/components/{Layout/Scrollable → Scrollable}/Rail.d.ts +0 -0
- /package/dist/components/{Layout/Scrollable → Scrollable}/Scrollable.d.ts +0 -0
- /package/dist/components/{Layout/Scrollable → Scrollable}/ScrollableShowcase.d.ts +0 -0
- /package/dist/components/{Layout/Scrollable → Scrollable}/VirtualScrollable.d.ts +0 -0
- /package/dist/components/{Layout/Scrollable → Scrollable}/index.d.ts +0 -0
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { jsx as y } from "react/jsx-runtime";
|
|
2
|
+
import { clsx as C } from "../../../utils/clsx.js";
|
|
3
|
+
import { ui as t } from "../../../utils/ui/ui.js";
|
|
4
|
+
const S = "cfxui__Box__root__299ae", W = "cfxui__Box__fullWidth__e1584", B = "cfxui__Box__fitContentWidth__18431", R = "cfxui__Box__fullHeight__c44a2", k = "cfxui__Box__noOverflow__6db4f", H = "cfxui__Box__noShrink__1a959", O = "cfxui__Box__grow__7ee8d", N = "cfxui__Box__noGrow__d606e", o = {
|
|
5
|
+
root: S,
|
|
6
|
+
fullWidth: W,
|
|
7
|
+
fitContentWidth: B,
|
|
8
|
+
fullHeight: R,
|
|
9
|
+
noOverflow: k,
|
|
10
|
+
noShrink: H,
|
|
11
|
+
grow: O,
|
|
12
|
+
noGrow: N
|
|
13
|
+
}, w = (e) => e;
|
|
14
|
+
function G(e) {
|
|
15
|
+
const {
|
|
16
|
+
noOverflow: l = !1,
|
|
17
|
+
noShrink: r = !1,
|
|
18
|
+
grow: s = void 0,
|
|
19
|
+
width: n,
|
|
20
|
+
height: i,
|
|
21
|
+
children: p,
|
|
22
|
+
className: c,
|
|
23
|
+
fullWidth: d,
|
|
24
|
+
fullHeight: u,
|
|
25
|
+
fitContentWidth: g,
|
|
26
|
+
flex: f,
|
|
27
|
+
display: _,
|
|
28
|
+
style: x,
|
|
29
|
+
ref: m,
|
|
30
|
+
as: v,
|
|
31
|
+
...h
|
|
32
|
+
} = e;
|
|
33
|
+
return C(
|
|
34
|
+
o.root,
|
|
35
|
+
c,
|
|
36
|
+
t.getResponsiveClassnames("width", n),
|
|
37
|
+
t.getResponsiveClassnames("height", i),
|
|
38
|
+
t.getResponsiveClassnames("flex", f),
|
|
39
|
+
t.getResponsiveClassnames("display", _),
|
|
40
|
+
t.getAllMPClassnames(h),
|
|
41
|
+
{
|
|
42
|
+
[o.fullWidth]: d,
|
|
43
|
+
[o.fullHeight]: u,
|
|
44
|
+
[o.fitContentWidth]: g,
|
|
45
|
+
[o.noOverflow]: l,
|
|
46
|
+
[o.noShrink]: r,
|
|
47
|
+
[o.noGrow]: s === !1,
|
|
48
|
+
[o.grow]: s === !0
|
|
49
|
+
}
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
function P(e) {
|
|
53
|
+
const {
|
|
54
|
+
noOverflow: l,
|
|
55
|
+
noShrink: r,
|
|
56
|
+
grow: s,
|
|
57
|
+
width: n,
|
|
58
|
+
height: i,
|
|
59
|
+
children: p,
|
|
60
|
+
className: c,
|
|
61
|
+
fullWidth: d,
|
|
62
|
+
fullHeight: u,
|
|
63
|
+
fitContentWidth: g,
|
|
64
|
+
flex: f,
|
|
65
|
+
display: _,
|
|
66
|
+
style: x,
|
|
67
|
+
ref: m,
|
|
68
|
+
as: v,
|
|
69
|
+
...h
|
|
70
|
+
} = e, a = {
|
|
71
|
+
...t.getResponsiveStyles("width", n),
|
|
72
|
+
...t.getResponsiveStyles("height", i),
|
|
73
|
+
...t.getResponsiveStyles("flex", f, w),
|
|
74
|
+
...t.getResponsiveStyles("display", _, w),
|
|
75
|
+
...t.getAllMPStyles(h),
|
|
76
|
+
...x || {}
|
|
77
|
+
};
|
|
78
|
+
return !a.width && s === !0 && (a.width = "1px"), a;
|
|
79
|
+
}
|
|
80
|
+
function j(e) {
|
|
81
|
+
const {
|
|
82
|
+
children: l,
|
|
83
|
+
ref: r,
|
|
84
|
+
as: s = "div"
|
|
85
|
+
} = e, n = G(e), i = P(e);
|
|
86
|
+
return /* @__PURE__ */ y(
|
|
87
|
+
s,
|
|
88
|
+
{
|
|
89
|
+
ref: r,
|
|
90
|
+
className: n,
|
|
91
|
+
style: i,
|
|
92
|
+
children: l
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
export {
|
|
97
|
+
j as default,
|
|
98
|
+
G as getBoxClassNames,
|
|
99
|
+
P as getBoxStyles,
|
|
100
|
+
w as stringPropFormater
|
|
101
|
+
};
|
|
@@ -21,6 +21,8 @@ export interface FlexProps extends BoxProps {
|
|
|
21
21
|
ref?: React.Ref<HTMLDivElement>;
|
|
22
22
|
}
|
|
23
23
|
export declare function flexWrapResponsiveFormatter(val: FlexWrapType | boolean): string;
|
|
24
|
+
export declare function getFlexClassNames(props: FlexProps): string;
|
|
25
|
+
export declare function getFlexStyles(props: FlexProps): React.CSSProperties;
|
|
26
|
+
export declare function getBoxProps(props: FlexProps): BoxProps;
|
|
24
27
|
declare function Flex(props: FlexProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
-
|
|
26
|
-
export default _default;
|
|
28
|
+
export default Flex;
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import A from "../Box/Box.js";
|
|
3
|
+
import { clsx as v } from "../../../utils/clsx.js";
|
|
4
|
+
import { ui as n } from "../../../utils/ui/ui.js";
|
|
5
|
+
const C = "cfxui__Flex__root__d860a", F = "cfxui__Flex__centered__e911c", b = "cfxui__Flex__centeredAxis__a7613", w = "cfxui__Flex__centeredCrossAxis__11477", y = "cfxui__Flex__baselineAxis__5a93c", h = "cfxui__Flex__baselineCrossAxis__b3c28", E = "cfxui__Flex__reverseOrder__3d910", T = "cfxui__Flex__vertical__552db", R = "cfxui__Flex__alignToEnd__a45a8", B = "cfxui__Flex__alignToEndAxis__80f62", O = "cfxui__Flex__spaceBetween__b5438", S = "cfxui__Flex__stretch__5c1ce", j = "cfxui__Flex__horizontal__d64f7", s = {
|
|
6
|
+
root: C,
|
|
7
|
+
centered: F,
|
|
8
|
+
centeredAxis: b,
|
|
9
|
+
centeredCrossAxis: w,
|
|
10
|
+
baselineAxis: y,
|
|
11
|
+
baselineCrossAxis: h,
|
|
12
|
+
reverseOrder: E,
|
|
13
|
+
vertical: T,
|
|
14
|
+
alignToEnd: R,
|
|
15
|
+
alignToEndAxis: B,
|
|
16
|
+
spaceBetween: O,
|
|
17
|
+
stretch: S,
|
|
18
|
+
horizontal: j
|
|
19
|
+
};
|
|
20
|
+
function N(e) {
|
|
21
|
+
return e == null ? "" : typeof e == "boolean" ? e ? "wrap" : "nowrap" : e.toString();
|
|
22
|
+
}
|
|
23
|
+
function z(e) {
|
|
24
|
+
const {
|
|
25
|
+
centered: t = !1,
|
|
26
|
+
vertical: i = !1,
|
|
27
|
+
reverseOrder: r = !1,
|
|
28
|
+
stretch: o = !1,
|
|
29
|
+
spaceBetween: a = !1,
|
|
30
|
+
alignToEnd: c = !1,
|
|
31
|
+
alignToEndAxis: l = !1,
|
|
32
|
+
className: _,
|
|
33
|
+
gap: x,
|
|
34
|
+
direction: f,
|
|
35
|
+
alignItems: d,
|
|
36
|
+
justifyContent: g,
|
|
37
|
+
wrap: u
|
|
38
|
+
} = e;
|
|
39
|
+
return v(
|
|
40
|
+
s.root,
|
|
41
|
+
_,
|
|
42
|
+
n.getResponsiveClassnames("gap", x),
|
|
43
|
+
n.getResponsiveClassnames("flex-direction", f),
|
|
44
|
+
n.getResponsiveClassnames("align-items", d),
|
|
45
|
+
n.getResponsiveClassnames("justify-content", g),
|
|
46
|
+
n.getResponsiveClassnames("flex-wrap", u),
|
|
47
|
+
{
|
|
48
|
+
[s.centered]: t === !0,
|
|
49
|
+
[s.centeredAxis]: t === "axis",
|
|
50
|
+
[s.centeredCrossAxis]: t === "cross-axis",
|
|
51
|
+
[s.baselineAxis]: t === "baseline-axis",
|
|
52
|
+
[s.baselineCrossAxis]: t === "baseline-cross-axis",
|
|
53
|
+
[s.vertical]: i,
|
|
54
|
+
[s.horizontal]: !i,
|
|
55
|
+
[s.stretch]: o,
|
|
56
|
+
[s.alignToEnd]: c,
|
|
57
|
+
[s.alignToEndAxis]: l,
|
|
58
|
+
[s.spaceBetween]: a,
|
|
59
|
+
[s.reverseOrder]: r
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
function I(e) {
|
|
64
|
+
const {
|
|
65
|
+
gap: t,
|
|
66
|
+
direction: i,
|
|
67
|
+
alignItems: r,
|
|
68
|
+
justifyContent: o,
|
|
69
|
+
wrap: a
|
|
70
|
+
} = e;
|
|
71
|
+
return {
|
|
72
|
+
...n.getOffsetStyles("gap", t),
|
|
73
|
+
...n.getResponsiveStyles("flex-direction", i),
|
|
74
|
+
...n.getResponsiveStyles("align-items", r),
|
|
75
|
+
...n.getResponsiveStyles("justify-content", o),
|
|
76
|
+
...n.getResponsiveStyles("flex-wrap", a, N)
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
function P(e) {
|
|
80
|
+
const {
|
|
81
|
+
centered: t,
|
|
82
|
+
vertical: i,
|
|
83
|
+
reverseOrder: r,
|
|
84
|
+
stretch: o,
|
|
85
|
+
spaceBetween: a,
|
|
86
|
+
alignToEnd: c,
|
|
87
|
+
alignToEndAxis: l,
|
|
88
|
+
children: _,
|
|
89
|
+
className: x,
|
|
90
|
+
gap: f,
|
|
91
|
+
direction: d,
|
|
92
|
+
alignItems: g,
|
|
93
|
+
justifyContent: u,
|
|
94
|
+
wrap: W,
|
|
95
|
+
...p
|
|
96
|
+
} = e;
|
|
97
|
+
return p;
|
|
98
|
+
}
|
|
99
|
+
function H(e) {
|
|
100
|
+
const {
|
|
101
|
+
children: t
|
|
102
|
+
} = e, i = z(e), r = I(e);
|
|
103
|
+
return /* @__PURE__ */ m(
|
|
104
|
+
A,
|
|
105
|
+
{
|
|
106
|
+
className: i,
|
|
107
|
+
style: r,
|
|
108
|
+
...P(e),
|
|
109
|
+
children: t
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
export {
|
|
114
|
+
H as default,
|
|
115
|
+
N as flexWrapResponsiveFormatter,
|
|
116
|
+
P as getBoxProps,
|
|
117
|
+
z as getFlexClassNames,
|
|
118
|
+
I as getFlexStyles
|
|
119
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default as Flex } from './Flex';
|
|
1
|
+
export { default as Flex, getFlexClassNames, getFlexStyles, getBoxProps, } from './Flex';
|
|
2
2
|
export type { FlexProps } from './Flex';
|
|
3
3
|
export type { FlexDirectionType, FlexAlignItemsType, FlexJustifyContentType, FlexWrapType, FlexCentredType, } from './Flex.types';
|
|
4
4
|
export { FlexDirectionEnum, FlexAlignItemsEnum, FlexJustifyContentEnum, FlexWrapEnum, FlexCentredEnum, } from './Flex.types';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { default as l, getBoxProps as x, getFlexClassNames as r, getFlexStyles as m } from "./Flex.js";
|
|
2
|
+
import { FlexAlignItemsEnum as o, FlexCentredEnum as s, FlexDirectionEnum as F, FlexJustifyContentEnum as u, FlexWrapEnum as a } from "./Flex.types.js";
|
|
3
|
+
import { FlexRestricter as i } from "./FlexRestricter.js";
|
|
4
|
+
export {
|
|
5
|
+
l as Flex,
|
|
6
|
+
o as FlexAlignItemsEnum,
|
|
7
|
+
s as FlexCentredEnum,
|
|
8
|
+
F as FlexDirectionEnum,
|
|
9
|
+
u as FlexJustifyContentEnum,
|
|
10
|
+
i as FlexRestricter,
|
|
11
|
+
a as FlexWrapEnum,
|
|
12
|
+
x as getBoxProps,
|
|
13
|
+
r as getFlexClassNames,
|
|
14
|
+
m as getFlexStyles
|
|
15
|
+
};
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { jsxs as W, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import r from "react";
|
|
3
|
+
import { clsx as x } from "../../utils/clsx.js";
|
|
4
|
+
import { mergeRefs as k } from "../../utils/mergeRefs.js";
|
|
5
|
+
import { s as o, R as N } from "../../Rail-CHFAf3wJ.js";
|
|
6
|
+
const P = {
|
|
7
|
+
size: 0,
|
|
8
|
+
scrollPos: 0,
|
|
9
|
+
scrollSize: 0
|
|
10
|
+
};
|
|
11
|
+
function G(b) {
|
|
12
|
+
const {
|
|
13
|
+
children: w,
|
|
14
|
+
className: A,
|
|
15
|
+
onScroll: c,
|
|
16
|
+
minThumbSize: f = 20,
|
|
17
|
+
verticalAsHorizontal: S = !1,
|
|
18
|
+
ref: L,
|
|
19
|
+
scrollerRef: E
|
|
20
|
+
} = b, e = r.useRef(null), u = r.useRef(null), [T, z] = r.useState(!1), [n, X] = r.useState(P), [Y, g] = r.useState(0), [i, y] = r.useState(P), [C, I] = r.useState(0), _ = x(o.root, A, {
|
|
21
|
+
[o.active]: T
|
|
22
|
+
});
|
|
23
|
+
r.useLayoutEffect(() => {
|
|
24
|
+
if (!u.current)
|
|
25
|
+
throw new Error("No scrollable content ref");
|
|
26
|
+
const s = new ResizeObserver(() => {
|
|
27
|
+
var l, t, d, h, v, p;
|
|
28
|
+
y({
|
|
29
|
+
size: ((l = e.current) == null ? void 0 : l.clientHeight) || 0,
|
|
30
|
+
scrollPos: ((t = e.current) == null ? void 0 : t.scrollTop) || 0,
|
|
31
|
+
scrollSize: ((d = e.current) == null ? void 0 : d.scrollHeight) || 0
|
|
32
|
+
}), X({
|
|
33
|
+
size: ((h = e.current) == null ? void 0 : h.clientWidth) || 0,
|
|
34
|
+
scrollPos: ((v = e.current) == null ? void 0 : v.scrollLeft) || 0,
|
|
35
|
+
scrollSize: ((p = e.current) == null ? void 0 : p.scrollWidth) || 0
|
|
36
|
+
});
|
|
37
|
+
});
|
|
38
|
+
return s.observe(u.current), () => s.disconnect();
|
|
39
|
+
}, []);
|
|
40
|
+
const H = r.useCallback(
|
|
41
|
+
(s) => {
|
|
42
|
+
e.current && (c == null || c(s), I(e.current.scrollTop), g(e.current.scrollLeft));
|
|
43
|
+
},
|
|
44
|
+
[c]
|
|
45
|
+
);
|
|
46
|
+
r.useEffect(() => {
|
|
47
|
+
if (!S || !e.current)
|
|
48
|
+
return;
|
|
49
|
+
const s = e.current, l = (t) => {
|
|
50
|
+
t.preventDefault(), t.stopPropagation(), s && (s.scrollLeft += t.deltaY);
|
|
51
|
+
};
|
|
52
|
+
return s.addEventListener("wheel", l), () => s.removeEventListener("wheel", l);
|
|
53
|
+
}, [S]);
|
|
54
|
+
const m = n.scrollSize - n.size > 1, R = i.scrollSize - i.size > 1, j = x(o.scroller, {
|
|
55
|
+
[o.noXscroll]: !m,
|
|
56
|
+
[o.noYscroll]: !R
|
|
57
|
+
});
|
|
58
|
+
return /* @__PURE__ */ W("div", { ref: L, className: _, children: [
|
|
59
|
+
/* @__PURE__ */ a("div", { ref: k(e, E), className: j, onScroll: H, children: /* @__PURE__ */ a("div", { ref: u, className: o.content, children: w }) }),
|
|
60
|
+
R && /* @__PURE__ */ a(
|
|
61
|
+
N,
|
|
62
|
+
{
|
|
63
|
+
rootRef: e,
|
|
64
|
+
axis: "y",
|
|
65
|
+
size: i.size,
|
|
66
|
+
pos: C,
|
|
67
|
+
scrollSize: i.scrollSize,
|
|
68
|
+
setRootActive: z,
|
|
69
|
+
minThumbSize: f
|
|
70
|
+
}
|
|
71
|
+
),
|
|
72
|
+
m && /* @__PURE__ */ a(
|
|
73
|
+
N,
|
|
74
|
+
{
|
|
75
|
+
rootRef: e,
|
|
76
|
+
axis: "x",
|
|
77
|
+
size: n.size,
|
|
78
|
+
pos: Y,
|
|
79
|
+
scrollSize: n.scrollSize,
|
|
80
|
+
setRootActive: z,
|
|
81
|
+
minThumbSize: f
|
|
82
|
+
}
|
|
83
|
+
)
|
|
84
|
+
] });
|
|
85
|
+
}
|
|
86
|
+
export {
|
|
87
|
+
G as Scrollable
|
|
88
|
+
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs as l, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import d from "react";
|
|
3
3
|
import i from "../Flex/Flex.js";
|
|
4
|
-
import { Text as t } from "
|
|
5
|
-
import "
|
|
6
|
-
import { LOREM_IPSUM as e } from "
|
|
4
|
+
import { Text as t } from "../Text/Text.js";
|
|
5
|
+
import "../../utils/ui/ui.js";
|
|
6
|
+
import { LOREM_IPSUM as e } from "../../utils/loremipsum.js";
|
|
7
7
|
import { Scrollable as o } from "./Scrollable.js";
|
|
8
8
|
function c() {
|
|
9
9
|
return /* @__PURE__ */ l("div", { children: [
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as N } from "react/jsx-runtime";
|
|
2
2
|
import W, { createElement as k, PureComponent as re } from "react";
|
|
3
|
-
import { _ as ie, a as ne } from "
|
|
4
|
-
import { clsx as oe } from "
|
|
3
|
+
import { _ as ie, a as ne } from "../../inheritsLoose-CyjgKRgL.js";
|
|
4
|
+
import { clsx as oe } from "../../utils/clsx.js";
|
|
5
5
|
import { Scrollable as le } from "./Scrollable.js";
|
|
6
|
-
import { s as se } from "
|
|
6
|
+
import { s as se } from "../../Rail-CHFAf3wJ.js";
|
|
7
7
|
function $(r) {
|
|
8
8
|
if (r === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
9
9
|
return r;
|
|
@@ -3,9 +3,9 @@ import * as l from "react";
|
|
|
3
3
|
import q from "react";
|
|
4
4
|
import { R as ft, r as De } from "../../index-Cl_RnsqN.js";
|
|
5
5
|
import { c as Ee } from "../../index-rKs9bXHr.js";
|
|
6
|
-
import { a as K, P as N, d as Oe, c as mt, u as B, e as P, b as ht } from "../../index-
|
|
7
|
-
import { u as gt, c as vt } from "../../index-
|
|
8
|
-
import { c as Le, R as _t, u as Ne, A as St, a as wt, h as xt, b as yt, d as Ct, F as It, D as Tt, C as bt, e as Pt } from "../../Combination-
|
|
6
|
+
import { a as K, P as N, d as Oe, c as mt, u as B, e as P, b as ht } from "../../index-ByKwkZKY.js";
|
|
7
|
+
import { u as gt, c as vt } from "../../index-DlJ4qUbZ.js";
|
|
8
|
+
import { c as Le, R as _t, u as Ne, A as St, a as wt, h as xt, b as yt, d as Ct, F as It, D as Tt, C as bt, e as Pt } from "../../Combination-BGYCZNoJ.js";
|
|
9
9
|
import { u as Nt } from "../../index-BZPx6jYI.js";
|
|
10
10
|
import { Icon as Rt } from "../Icon/Icon.js";
|
|
11
11
|
import { clsx as xe } from "../../utils/clsx.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as l, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import o from "react";
|
|
3
|
-
import a from "../
|
|
3
|
+
import a from "../Flex/Flex.js";
|
|
4
4
|
import { Text as i } from "../Text/Text.js";
|
|
5
5
|
import "../../utils/ui/ui.js";
|
|
6
6
|
import { Select as n } from "./Select.js";
|
|
@@ -2,7 +2,7 @@ import { jsxs as n, jsx as t } from "react/jsx-runtime";
|
|
|
2
2
|
import l from "react";
|
|
3
3
|
import { clsx as x } from "../../utils/clsx.js";
|
|
4
4
|
import { ui as s } from "../../utils/ui/ui.js";
|
|
5
|
-
const m = "cfxui__Separator__root__3aea3", u = "cfxui__Separator__separator__5dbbd", d = "cfxui__Separator__content__7ade9", S = "cfxui__Separator__thin__628fd", h = "
|
|
5
|
+
const m = "cfxui__Separator__root__3aea3", u = "cfxui__Separator__separator__5dbbd", d = "cfxui__Separator__content__7ade9", S = "cfxui__Separator__thin__628fd", h = "cfxui__Separator__text__d02da", v = "cfxui__Separator__vertical__8bd90", a = {
|
|
6
6
|
root: m,
|
|
7
7
|
"separator-offset-none": "cfxui__Separator__separator-offset-none__f2b70",
|
|
8
8
|
"separator-offset-hairthin": "cfxui__Separator__separator-offset-hairthin__56e9d",
|
|
@@ -18,8 +18,8 @@ const m = "cfxui__Separator__root__3aea3", u = "cfxui__Separator__separator__5db
|
|
|
18
18
|
separator: u,
|
|
19
19
|
content: d,
|
|
20
20
|
thin: S,
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
text: h,
|
|
22
|
+
vertical: v
|
|
23
23
|
};
|
|
24
24
|
function M(f) {
|
|
25
25
|
const {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as t, jsxs as _ } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import i from "react";
|
|
3
3
|
import { TITLE_OUTLET_ID as h } from "../Title/Title.js";
|
|
4
4
|
import "../../utils/hooks/useGlobalKeyboardEvent.js";
|
|
5
5
|
import "../../utils/hooks/useKeyboardClose.js";
|
|
@@ -12,12 +12,12 @@ const g = "cfxui__Shroud__root__99944", v = "cfxui__Shroud__tile__db55f", e = {
|
|
|
12
12
|
};
|
|
13
13
|
function R(c) {
|
|
14
14
|
const {
|
|
15
|
-
forRef:
|
|
15
|
+
forRef: r,
|
|
16
16
|
ref: n
|
|
17
|
-
} = c, [u, f] =
|
|
18
|
-
if (!
|
|
17
|
+
} = c, [u, f] = i.useState({}), d = b(h, "before"), s = i.useCallback(() => {
|
|
18
|
+
if (!r.current)
|
|
19
19
|
return;
|
|
20
|
-
const o =
|
|
20
|
+
const o = r.current.getBoundingClientRect(), m = {
|
|
21
21
|
x: o.x,
|
|
22
22
|
y: o.y,
|
|
23
23
|
w: o.width,
|
|
@@ -33,8 +33,8 @@ function R(c) {
|
|
|
33
33
|
])
|
|
34
34
|
)
|
|
35
35
|
);
|
|
36
|
-
}, []);
|
|
37
|
-
return
|
|
36
|
+
}, [r]);
|
|
37
|
+
return i.useEffect(s, []), p(s), /* @__PURE__ */ t(d, { children: /* @__PURE__ */ _("div", { ref: n, className: e.root, style: u, children: [
|
|
38
38
|
/* @__PURE__ */ t("div", { className: e.tile, "data-top": !0 }),
|
|
39
39
|
/* @__PURE__ */ t("div", { className: e.tile, "data-left": !0 }),
|
|
40
40
|
/* @__PURE__ */ t("div", { className: e.tile, "data-right": !0 }),
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as p } from "react/jsx-runtime";
|
|
2
2
|
import r from "react";
|
|
3
|
-
import u from "../
|
|
4
|
-
import {
|
|
3
|
+
import u from "../Box/Box.js";
|
|
4
|
+
import { clsx as d } from "../../utils/clsx.js";
|
|
5
5
|
import { ui as t } from "../../utils/ui/ui.js";
|
|
6
|
-
import {
|
|
6
|
+
import { textSizeResponsiveValueFormatter as f } from "../Text/Text.js";
|
|
7
7
|
const _ = "cfxui__Skeleton__skeleton__d700e", h = {
|
|
8
8
|
skeleton: _
|
|
9
9
|
};
|
|
@@ -15,13 +15,13 @@ function k(l) {
|
|
|
15
15
|
className: a,
|
|
16
16
|
style: o,
|
|
17
17
|
...i
|
|
18
|
-
} = l, n =
|
|
18
|
+
} = l, n = d(
|
|
19
19
|
h.skeleton,
|
|
20
20
|
a,
|
|
21
21
|
t.getResponsiveClassnames("height", e)
|
|
22
22
|
), c = r.useMemo(() => ({
|
|
23
23
|
borderRadius: t.borderRadius(s),
|
|
24
|
-
...t.getResponsiveStyles("height", e,
|
|
24
|
+
...t.getResponsiveStyles("height", e, f),
|
|
25
25
|
...o || {}
|
|
26
26
|
}), [s, e, o]);
|
|
27
27
|
return /* @__PURE__ */ p(
|
|
@@ -4,7 +4,7 @@ import { Badge as t } from "../Badge/Badge.js";
|
|
|
4
4
|
import p from "../Button/Button.js";
|
|
5
5
|
import "../../utils/links.js";
|
|
6
6
|
import { DataTable as x } from "../DataTable/DataTable.js";
|
|
7
|
-
import m from "../
|
|
7
|
+
import m from "../Flex/Flex.js";
|
|
8
8
|
import { Text as r } from "../Text/Text.js";
|
|
9
9
|
import "../../utils/ui/ui.js";
|
|
10
10
|
import c from "./Skeleton.js";
|
|
@@ -2,8 +2,8 @@ import { jsx as m, jsxs as K } from "react/jsx-runtime";
|
|
|
2
2
|
import * as u from "react";
|
|
3
3
|
import O from "react";
|
|
4
4
|
import { c as W } from "../../index-rKs9bXHr.js";
|
|
5
|
-
import { d as fe, c as me, e as M, P as k, u as V, f as he } from "../../index-
|
|
6
|
-
import { c as pe, u as Se } from "../../index-
|
|
5
|
+
import { d as fe, c as me, e as M, P as k, u as V, f as he } from "../../index-ByKwkZKY.js";
|
|
6
|
+
import { c as pe, u as Se } from "../../index-DlJ4qUbZ.js";
|
|
7
7
|
import { u as be } from "../../index-BZPx6jYI.js";
|
|
8
8
|
import { clsx as G } from "../../utils/clsx.js";
|
|
9
9
|
var q = ["PageUp", "PageDown"], J = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], Q = {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as r, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import i from "react";
|
|
3
|
-
import a from "../
|
|
3
|
+
import a from "../Flex/Flex.js";
|
|
4
4
|
import { Text as t } from "../Text/Text.js";
|
|
5
5
|
import "../../utils/ui/ui.js";
|
|
6
6
|
import { Slider as l } from "./Slider.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as I, jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import * as r from "react";
|
|
3
3
|
import M from "react";
|
|
4
|
-
import { u as k, d as H, c as j, P as x, e as A, f as q } from "../../index-
|
|
4
|
+
import { u as k, d as H, c as j, P as x, e as A, f as q } from "../../index-ByKwkZKY.js";
|
|
5
5
|
import { u as z } from "../../index-BZPx6jYI.js";
|
|
6
6
|
import { clsx as P } from "../../utils/clsx.js";
|
|
7
7
|
var m = "Switch", [L, et] = j(m), [O, $] = L(m), y = r.forwardRef(
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import { FlexProps } from '../
|
|
2
|
+
import { FlexProps } from '../Flex';
|
|
3
3
|
|
|
4
4
|
export interface TableCellProps extends React.PropsWithChildren, FlexProps {
|
|
5
5
|
onClick?: (event: React.MouseEvent<HTMLTableCellElement>) => void;
|
|
@@ -1,27 +1,28 @@
|
|
|
1
1
|
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
import
|
|
2
|
+
import "../Box/Box.js";
|
|
3
|
+
import { stringPropFormater as c } from "../RSC/Box/Box.js";
|
|
4
|
+
import h from "../Flex/Flex.js";
|
|
4
5
|
import { clsx as y } from "../../utils/clsx.js";
|
|
5
6
|
import { ui as t } from "../../utils/ui/ui.js";
|
|
6
|
-
import { s } from "../../Table.module-
|
|
7
|
-
function
|
|
7
|
+
import { s } from "../../Table.module-DffST69u.js";
|
|
8
|
+
function w(p) {
|
|
8
9
|
const {
|
|
9
|
-
onClick:
|
|
10
|
+
onClick: l,
|
|
10
11
|
className: m,
|
|
11
12
|
children: d,
|
|
12
13
|
ref: f,
|
|
13
14
|
width: o,
|
|
14
15
|
display: r,
|
|
15
|
-
as:
|
|
16
|
+
as: i = "td",
|
|
16
17
|
...e
|
|
17
|
-
} = p, n =
|
|
18
|
-
return typeof e.px > "u" && (e.px = 4), typeof e.py > "u" && (e.py =
|
|
19
|
-
|
|
18
|
+
} = p, n = i === "th";
|
|
19
|
+
return typeof e.px > "u" && (e.px = 4), typeof e.py > "u" && (e.py = i === "th" ? void 0 : 1.5), /* @__PURE__ */ a(
|
|
20
|
+
i,
|
|
20
21
|
{
|
|
21
22
|
ref: f,
|
|
22
23
|
tabIndex: -1,
|
|
23
24
|
role: n ? "columnheader" : "cell",
|
|
24
|
-
onClick:
|
|
25
|
+
onClick: l,
|
|
25
26
|
className: y(
|
|
26
27
|
s.tableCell,
|
|
27
28
|
m,
|
|
@@ -29,7 +30,7 @@ function R(p) {
|
|
|
29
30
|
t.getResponsiveClassnames("display", r),
|
|
30
31
|
{
|
|
31
32
|
[s.header]: n,
|
|
32
|
-
[s.interactive]: !!
|
|
33
|
+
[s.interactive]: !!l
|
|
33
34
|
}
|
|
34
35
|
),
|
|
35
36
|
style: {
|
|
@@ -50,5 +51,5 @@ function R(p) {
|
|
|
50
51
|
);
|
|
51
52
|
}
|
|
52
53
|
export {
|
|
53
|
-
|
|
54
|
+
w as default
|
|
54
55
|
};
|
|
@@ -3,7 +3,7 @@ import m from "react";
|
|
|
3
3
|
import c from "../Checkbox/Checkbox.js";
|
|
4
4
|
import { clsx as i } from "../../utils/clsx.js";
|
|
5
5
|
import f from "./TableCell.js";
|
|
6
|
-
import { s as p } from "../../Table.module-
|
|
6
|
+
import { s as p } from "../../Table.module-DffST69u.js";
|
|
7
7
|
function b(l) {
|
|
8
8
|
const {
|
|
9
9
|
checked: o = !1,
|
|
@@ -2,7 +2,7 @@ import { jsx as m } from "react/jsx-runtime";
|
|
|
2
2
|
import a from "react";
|
|
3
3
|
import e from "../IconButton/IconButton.js";
|
|
4
4
|
import { clsx as r } from "../../utils/clsx.js";
|
|
5
|
-
import { s as t } from "../../Table.module-
|
|
5
|
+
import { s as t } from "../../Table.module-DffST69u.js";
|
|
6
6
|
function l(o) {
|
|
7
7
|
const {
|
|
8
8
|
className: n,
|