@povio/ui 6.0.0-rc.2 → 6.0.0-rc.3
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/{Autocomplete.bound-e5WbxlBm.js → Autocomplete.bound-DTKSW9Sb.js} +1 -1
- package/dist/{Calendar-ChmIflXX.js → Calendar-u-UcoZhB.js} +6 -156
- package/dist/Calendar.lazy-B9YqgHbn.js +131 -0
- package/dist/{DatePicker-Bc_E4UZ1.js → DatePicker-BaLQOOJJ.js} +7 -5
- package/dist/{DatePicker.bound-CtBL5w-8.js → DatePicker.bound-NquZAtFK.js} +1 -1
- package/dist/{DatePickerInput-TND0rEMc.js → DatePickerInput-B0e_huQt.js} +6 -250
- package/dist/{DateRangePicker-BNMTOQ2N.js → DateRangePicker-4CrjSCAx.js} +25 -287
- package/dist/{DateRangePicker.bound-GeRw9Iuj.js → DateRangePicker.bound-D530tUJL.js} +1 -1
- package/dist/{DateTimePicker-B3YjV4uj.js → DateTimePicker-CtU096IU.js} +7 -5
- package/dist/{DateTimePicker.bound-ByjHsAnf.js → DateTimePicker.bound-BJzw56_u.js} +1 -1
- package/dist/{Input.bound-CnqI-L-b.js → Input.bound-DCTT5J62.js} +1 -1
- package/dist/{NumberField.bound-DiDYEZM4.js → NumberField.bound-CQcKgZ--.js} +1 -1
- package/dist/{NumberRangeInput.bound-B0e7yUDI.js → NumberRangeInput.bound-D-Lj5_KL.js} +1 -1
- package/dist/{PasswordInput.bound-Bj3WO1zC.js → PasswordInput.bound-WJ_VYQpn.js} +1 -1
- package/dist/RangeCalendar-CXLwzK5Z.js +291 -0
- package/dist/{RichTextEditor-qoxzWBFP.js → RichTextEditor-DDGSNZyF.js} +3 -3
- package/dist/{Select-BAlYMh4h.js → Select-DbZOJ-0u.js} +33 -360
- package/dist/{Select.bound-CQPG2sWV.js → Select.bound-B9c9mP8o.js} +1 -1
- package/dist/SelectListBox-CFOH3brT.js +362 -0
- package/dist/{TimePicker-CmBGkxDC.js → TimePicker-BjWuzBv_.js} +4 -3
- package/dist/{TimePicker.bound-3i1DJgrU.js → TimePicker.bound-DBovZwLJ.js} +1 -1
- package/dist/{datePickerValue.utils-BxHR_BQZ.js → TimePickerForm-BReCXELG.js} +2 -5
- package/dist/components/autocomplete.js +1 -1
- package/dist/components/date-picker.js +1 -1
- package/dist/components/date-range-picker.js +1 -1
- package/dist/components/date-time-picker.js +1 -1
- package/dist/components/input.js +1 -1
- package/dist/components/number-field.js +1 -1
- package/dist/components/number-range-input.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/password-input.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/style-definitions.js +3 -3
- package/dist/components/time-picker.js +1 -1
- package/dist/datePickerValue.utils-CkmPaD6I.js +4 -0
- package/dist/import-DflE4Gl2.js +251 -0
- package/dist/index.js +20 -20
- package/dist/rich-text-editor.js +1 -1
- package/dist/tanstack/autocomplete.js +1 -1
- package/dist/tanstack/date-picker.js +1 -1
- package/dist/tanstack/date-range-picker.js +1 -1
- package/dist/tanstack/date-time-picker.js +1 -1
- package/dist/tanstack/input.js +1 -1
- package/dist/tanstack/number-field.js +1 -1
- package/dist/tanstack/number-range-input.js +1 -1
- package/dist/tanstack/password-input.js +1 -1
- package/dist/tanstack/rich-text-editor.js +1 -1
- package/dist/tanstack/select.js +1 -1
- package/dist/tanstack/table.js +1 -1
- package/dist/tanstack/time-picker.js +1 -1
- package/dist/tanstack.js +20 -20
- package/dist/useScrollableListBox-BfCLMZgv.js +47 -0
- package/package.json +1 -1
- package/dist/{Autocomplete-DSwAc7jF.js → Autocomplete-DuCidYx5.js} +1 -1
- package/dist/{Input-BdCci6BF.js → Input-CPPDOg7b.js} +1 -1
- package/dist/{NumberField-BLAwsjns.js → NumberField-BbeePjH2.js} +1 -1
- package/dist/{NumberRangeInput-al32ZeSy.js → NumberRangeInput-Cpqrom84.js} +1 -1
- package/dist/{staticDateTimeSegments-CA_lwN-O.js → staticDateTimeSegments-FE-F61iH.js} +2 -2
- package/dist/{useTableColumnConfig-DoTYVxqG.js → useTableColumnConfig-CGtkUBG8.js} +2 -2
|
@@ -1,20 +1,16 @@
|
|
|
1
1
|
import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
|
|
2
2
|
import { t as UIConfig } from "./uiConfig.context-dxsO9puE.js";
|
|
3
|
-
import { t as Check } from "./check-DYMBkp_Z.js";
|
|
4
3
|
import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
|
|
5
|
-
import { t as CheckboxCheckmark } from "./CheckboxCheckmark-C4yFclkZ.js";
|
|
6
4
|
import { t as X } from "./x-B6vfz8Ps.js";
|
|
7
5
|
import { t as clsx } from "./clsx-CnD0nOiA.js";
|
|
8
6
|
import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
|
|
9
7
|
import { t as IconSlot } from "./IconSlot-Cuvpj1gd.js";
|
|
10
|
-
import { l as $542a13ca2fa5b484$export$5b6b19405a83ff9d,
|
|
8
|
+
import { l as $542a13ca2fa5b484$export$5b6b19405a83ff9d, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-lFYX-7Ax.js";
|
|
11
9
|
import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-C1YB5dOw.js";
|
|
12
10
|
import { n as $dbdc5e6e7ce01b4b$export$c02625b26074192c, t as $dbdc5e6e7ce01b4b$export$72b9695b8216309a } from "./ComboBox-DFlz6HJ8.js";
|
|
13
11
|
import { n as $41fb335299a4a39e$export$f5b8910cec6cf069 } from "./Input-BG0Xjw5X.js";
|
|
14
|
-
import { i as $
|
|
15
|
-
import { i as $a3be900807531178$re_export$useFilter, n as $a3be900807531178$re_export$ListLayout, r as $a3be900807531178$re_export$Rect } from "./exports-BNrTn8Tj.js";
|
|
12
|
+
import { i as $a3be900807531178$re_export$useFilter } from "./exports-BNrTn8Tj.js";
|
|
16
13
|
import "./popoverAnimation-DEZSvKP8.js";
|
|
17
|
-
import { t as Spinner } from "./Spinner-CFj5Iu77.js";
|
|
18
14
|
import { t as Button } from "./Button-DU1Q8GDB.js";
|
|
19
15
|
import { BottomSheet } from "./components/bottom-sheet.js";
|
|
20
16
|
import { t as useBreakpoint } from "./useBreakpoint-DOUmXVZ2.js";
|
|
@@ -22,25 +18,20 @@ import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-D_3dPATF.js
|
|
|
22
18
|
import { n as FormFieldLabel, t as FormField } from "./FormField-DyqEbqx3.js";
|
|
23
19
|
import { a as inputSizeDefinition, t as inputBaseDefinition } from "./input.cva-AHLI_M3K.js";
|
|
24
20
|
import "./i18n-BjNKHh_D.js";
|
|
25
|
-
import { n as useStaticInputHandoff, t as getStaticInputFocusTarget } from "./useStaticInputHandoff-DyYxfwv6.js";
|
|
26
21
|
import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-BrftXInI.js";
|
|
27
22
|
import { t as popoverDefinition } from "./popover.cva-Ciu9Ro5G.js";
|
|
23
|
+
import { n as useStaticInputHandoff, t as getStaticInputFocusTarget } from "./useStaticInputHandoff-DyYxfwv6.js";
|
|
28
24
|
import { InputFrame } from "./components/input-frame.js";
|
|
25
|
+
import { t as Input } from "./Input-CPPDOg7b.js";
|
|
29
26
|
import { Tag } from "./components/tag.js";
|
|
30
27
|
import { n as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CGBkscBY.js";
|
|
31
|
-
import {
|
|
32
|
-
import { t as useIntersectionObserver } from "./useIntersectionObserver-DYfHnGGU.js";
|
|
33
|
-
import { t as Input } from "./Input-BdCci6BF.js";
|
|
34
|
-
import $ahdqC$react, { Fragment, createContext, use, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
28
|
+
import { Fragment, Suspense, createContext, lazy, use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
35
29
|
import { c } from "react/compiler-runtime";
|
|
36
30
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
37
|
-
import { useVirtualizerState } from "react-stately/useVirtualizerState";
|
|
38
|
-
import { useScrollView } from "react-aria/private/virtualizer/ScrollView";
|
|
39
|
-
import { VirtualizerItem } from "react-aria/private/virtualizer/VirtualizerItem";
|
|
40
31
|
import { usePreventScroll } from "react-aria";
|
|
41
32
|
import { useLabel } from "@react-aria/label";
|
|
42
|
-
import { useTranslation } from "react-i18next";
|
|
43
33
|
import { useFocusVisible, useFocusWithin, useHover } from "@react-aria/interactions";
|
|
34
|
+
import { useTranslation } from "react-i18next";
|
|
44
35
|
//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/search.mjs
|
|
45
36
|
/**
|
|
46
37
|
* @license lucide-react v1.43.0 - ISC
|
|
@@ -64,96 +55,6 @@ const __iconData = {
|
|
|
64
55
|
__iconData.node;
|
|
65
56
|
const Search = createLucideIcon(__iconData);
|
|
66
57
|
//#endregion
|
|
67
|
-
//#region ../../node_modules/.bun/react-aria-components@1.22.1+67f6792bdf102c28/node_modules/react-aria-components/dist/private/Virtualizer.mjs
|
|
68
|
-
const $143fb904d86051ce$var$VirtualizerContext = /*#__PURE__*/ createContext(null);
|
|
69
|
-
const $143fb904d86051ce$var$VirtualizerOptionsContext = /*#__PURE__*/ createContext(null);
|
|
70
|
-
function $143fb904d86051ce$export$89be5a243e59c4b2(props) {
|
|
71
|
-
let { children, layout: layoutProp, layoutOptions, shouldObserveItemSize } = props;
|
|
72
|
-
let layout = useMemo(() => typeof layoutProp === "function" ? new layoutProp() : layoutProp, [layoutProp]);
|
|
73
|
-
let renderer = useMemo(() => ({
|
|
74
|
-
isVirtualized: true,
|
|
75
|
-
layoutDelegate: layout,
|
|
76
|
-
dropTargetDelegate: layout.getDropTargetFromPoint ? layout : void 0,
|
|
77
|
-
CollectionRoot: $143fb904d86051ce$var$CollectionRoot,
|
|
78
|
-
CollectionBranch: $143fb904d86051ce$var$CollectionBranch
|
|
79
|
-
}), [layout]);
|
|
80
|
-
return /*#__PURE__*/ $ahdqC$react.createElement($263ab7fc0f95ccdb$export$4feb769f8ddf26c5.Provider, { value: renderer }, /*#__PURE__*/ $ahdqC$react.createElement($143fb904d86051ce$var$VirtualizerOptionsContext.Provider, { value: {
|
|
81
|
-
layout,
|
|
82
|
-
layoutOptions,
|
|
83
|
-
shouldObserveItemSize
|
|
84
|
-
} }, children));
|
|
85
|
-
}
|
|
86
|
-
function $143fb904d86051ce$var$CollectionRoot({ collection, persistedKeys, scrollRef, renderDropIndicator }) {
|
|
87
|
-
let { layout, layoutOptions, shouldObserveItemSize } = useContext($143fb904d86051ce$var$VirtualizerOptionsContext);
|
|
88
|
-
let layoutOptions2 = layout.useLayoutOptions?.();
|
|
89
|
-
let state = useVirtualizerState({
|
|
90
|
-
allowsWindowScrolling: true,
|
|
91
|
-
layout,
|
|
92
|
-
collection,
|
|
93
|
-
renderView: (type, item) => {
|
|
94
|
-
return item?.render?.(item);
|
|
95
|
-
},
|
|
96
|
-
onVisibleRectChange(rect) {
|
|
97
|
-
let element = scrollRef?.current;
|
|
98
|
-
if (element) {
|
|
99
|
-
element.scrollLeft = rect.x;
|
|
100
|
-
element.scrollTop = rect.y;
|
|
101
|
-
}
|
|
102
|
-
},
|
|
103
|
-
persistedKeys,
|
|
104
|
-
layoutOptions: useMemo(() => layoutOptions && layoutOptions2 ? {
|
|
105
|
-
...layoutOptions,
|
|
106
|
-
...layoutOptions2
|
|
107
|
-
} : layoutOptions || layoutOptions2, [layoutOptions, layoutOptions2])
|
|
108
|
-
});
|
|
109
|
-
let { contentProps } = useScrollView({
|
|
110
|
-
onVisibleRectChange: state.setVisibleRect,
|
|
111
|
-
onSizeChange: state.setSize,
|
|
112
|
-
contentSize: state.contentSize,
|
|
113
|
-
onScrollStart: state.startScrolling,
|
|
114
|
-
onScrollEnd: state.endScrolling,
|
|
115
|
-
allowsWindowScrolling: true
|
|
116
|
-
}, scrollRef);
|
|
117
|
-
return /*#__PURE__*/ $ahdqC$react.createElement("div", contentProps, /*#__PURE__*/ $ahdqC$react.createElement($143fb904d86051ce$var$VirtualizerContext.Provider, { value: state }, $143fb904d86051ce$var$renderChildren(null, state.visibleViews, renderDropIndicator, shouldObserveItemSize)));
|
|
118
|
-
}
|
|
119
|
-
function $143fb904d86051ce$var$CollectionBranch({ parent, renderDropIndicator }) {
|
|
120
|
-
let parentView = useContext($143fb904d86051ce$var$VirtualizerContext).virtualizer.getVisibleView(parent.key);
|
|
121
|
-
let { shouldObserveItemSize } = useContext($143fb904d86051ce$var$VirtualizerOptionsContext);
|
|
122
|
-
return $143fb904d86051ce$var$renderChildren(parentView, Array.from(parentView.children), renderDropIndicator, shouldObserveItemSize);
|
|
123
|
-
}
|
|
124
|
-
function $143fb904d86051ce$var$renderChildren(parent, children, renderDropIndicator, shouldObserveItemSize) {
|
|
125
|
-
return children.map((view) => $143fb904d86051ce$var$renderWrapper(parent, view, renderDropIndicator, shouldObserveItemSize));
|
|
126
|
-
}
|
|
127
|
-
function $143fb904d86051ce$var$renderWrapper(parent, reusableView, renderDropIndicator, shouldObserveItemSize) {
|
|
128
|
-
let rendered = /*#__PURE__*/ $ahdqC$react.createElement(VirtualizerItem, {
|
|
129
|
-
key: reusableView.key,
|
|
130
|
-
layoutInfo: reusableView.layoutInfo,
|
|
131
|
-
virtualizer: reusableView.virtualizer,
|
|
132
|
-
parent: parent?.layoutInfo,
|
|
133
|
-
shouldObserveItemSize
|
|
134
|
-
}, reusableView.rendered);
|
|
135
|
-
let { collection, layout } = reusableView.virtualizer;
|
|
136
|
-
let node = reusableView.content;
|
|
137
|
-
if (node?.type === "item" && renderDropIndicator && layout.getDropTargetLayoutInfo) rendered = /*#__PURE__*/ $ahdqC$react.createElement($ahdqC$react.Fragment, { key: reusableView.key }, $143fb904d86051ce$var$renderDropIndicatorWrapper(parent, reusableView, {
|
|
138
|
-
type: "item",
|
|
139
|
-
key: reusableView.content.key,
|
|
140
|
-
dropPosition: "before"
|
|
141
|
-
}, renderDropIndicator), rendered, $263ab7fc0f95ccdb$export$2dbbd341daed716d(collection, node, (target) => $143fb904d86051ce$var$renderDropIndicatorWrapper(parent, reusableView, target, renderDropIndicator)));
|
|
142
|
-
return rendered;
|
|
143
|
-
}
|
|
144
|
-
function $143fb904d86051ce$var$renderDropIndicatorWrapper(parent, reusableView, target, renderDropIndicator) {
|
|
145
|
-
let indicator = renderDropIndicator(target);
|
|
146
|
-
if (indicator) {
|
|
147
|
-
let layoutInfo = reusableView.virtualizer.layout.getDropTargetLayoutInfo(target);
|
|
148
|
-
indicator = /*#__PURE__*/ $ahdqC$react.createElement(VirtualizerItem, {
|
|
149
|
-
layoutInfo,
|
|
150
|
-
virtualizer: reusableView.virtualizer,
|
|
151
|
-
parent: parent?.layoutInfo
|
|
152
|
-
}, indicator);
|
|
153
|
-
}
|
|
154
|
-
return indicator;
|
|
155
|
-
}
|
|
156
|
-
//#endregion
|
|
157
58
|
//#region src/components/inputs/Selection/shared/SelectInputTags.tsx
|
|
158
59
|
const SelectInputTags = ({ selectedItems, isDisabled, selectedTagsType, collapseAfter, onRemove }) => {
|
|
159
60
|
const { displayedItems, remainingCount } = useMemo(() => {
|
|
@@ -797,258 +698,21 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
|
|
|
797
698
|
});
|
|
798
699
|
};
|
|
799
700
|
//#endregion
|
|
800
|
-
//#region src/components/inputs/Selection/shared/
|
|
801
|
-
const
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
const itemContent = useMemo(() => {
|
|
807
|
-
if (isNewItem) return newItemRender?.(label) ?? `${t(($) => $.ui.autocomplete.createNewBtn)} '${label}'`;
|
|
808
|
-
return content ?? label;
|
|
809
|
-
}, [
|
|
810
|
-
isNewItem,
|
|
811
|
-
newItemRender,
|
|
812
|
-
label,
|
|
813
|
-
content,
|
|
814
|
-
t
|
|
815
|
-
]);
|
|
816
|
-
return /* @__PURE__ */ jsxs($928221da08ecbc62$export$a11e76429ed99b4, {
|
|
817
|
-
ref,
|
|
818
|
-
id,
|
|
819
|
-
textValue: label,
|
|
820
|
-
isDisabled,
|
|
821
|
-
className: selectListItemCva({
|
|
822
|
-
isSingle: !isMultiple,
|
|
823
|
-
isNewItem
|
|
824
|
-
}),
|
|
825
|
-
children: [
|
|
826
|
-
isMultiple && !isSearchable && /* @__PURE__ */ jsx(CheckboxCheckmark, {
|
|
827
|
-
variant: "default",
|
|
828
|
-
className: "group-focus-visible:outline-none!"
|
|
829
|
-
}),
|
|
830
|
-
isMultiple && isSearchable && /* @__PURE__ */ jsx("div", {
|
|
831
|
-
className: "group",
|
|
832
|
-
"data-rac": "",
|
|
833
|
-
"data-selected": selectedIds.includes(id) || void 0,
|
|
834
|
-
children: /* @__PURE__ */ jsx(CheckboxCheckmark, {
|
|
835
|
-
variant: "default",
|
|
836
|
-
className: "group-focus-visible:outline-none!"
|
|
837
|
-
})
|
|
838
|
-
}),
|
|
839
|
-
itemContent,
|
|
840
|
-
!isMultiple && /* @__PURE__ */ jsx("span", {
|
|
841
|
-
"aria-hidden": true,
|
|
842
|
-
className: "pointer-events-none absolute right-2 flex size-3.5 items-center justify-center opacity-0 group-selected:opacity-100",
|
|
843
|
-
children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
|
|
844
|
-
})
|
|
845
|
-
]
|
|
846
|
-
});
|
|
847
|
-
};
|
|
848
|
-
//#endregion
|
|
849
|
-
//#region src/components/inputs/Selection/shared/SelectListBoxItemSelectAll.tsx
|
|
850
|
-
const SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
|
|
851
|
-
const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
|
|
852
|
-
const ref = useRef(null);
|
|
853
|
-
const { t } = useTranslation("ui");
|
|
854
|
-
const { selectableListItems, selectedIds } = SelectContext.useSelect();
|
|
855
|
-
return /* @__PURE__ */ jsxs($928221da08ecbc62$export$a11e76429ed99b4, {
|
|
856
|
-
ref,
|
|
857
|
-
id,
|
|
858
|
-
textValue: label || t(($) => $.ui.select.allOption),
|
|
859
|
-
isDisabled,
|
|
860
|
-
className: selectListItemCva({}),
|
|
861
|
-
children: [/* @__PURE__ */ jsx("div", {
|
|
862
|
-
className: "group",
|
|
863
|
-
"data-rac": "",
|
|
864
|
-
"data-selected": selectedIds.length === selectableListItems.length || void 0,
|
|
865
|
-
"data-indeterminate": selectedIds.length > 0 && selectedIds.length < selectableListItems.length || void 0,
|
|
866
|
-
children: /* @__PURE__ */ jsx(CheckboxCheckmark, {
|
|
867
|
-
variant: "default",
|
|
868
|
-
className: "group-focus-visible:outline-none!"
|
|
869
|
-
})
|
|
870
|
-
}), t(($) => $.ui.select.allOption)]
|
|
871
|
-
});
|
|
872
|
-
};
|
|
873
|
-
//#endregion
|
|
874
|
-
//#region src/components/inputs/Selection/shared/SelectListBoxLoadingItem.tsx
|
|
875
|
-
const SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
|
|
876
|
-
const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
|
|
877
|
-
const { t } = useTranslation("ui");
|
|
878
|
-
const { isDebouncing, isLoading, hasLoadMore } = SelectContext.useSelect();
|
|
879
|
-
const onIntersection = useCallback(() => {
|
|
880
|
-
if (!isDebouncing && !isLoading && hasLoadMore) onLoadMore?.();
|
|
881
|
-
}, [
|
|
882
|
-
isDebouncing,
|
|
883
|
-
isLoading,
|
|
884
|
-
hasLoadMore,
|
|
885
|
-
onLoadMore
|
|
886
|
-
]);
|
|
887
|
-
const { ref } = useIntersectionObserver({
|
|
888
|
-
onIntersection,
|
|
889
|
-
rootMargin: "40px"
|
|
890
|
-
});
|
|
891
|
-
return /* @__PURE__ */ jsx($928221da08ecbc62$export$a11e76429ed99b4, {
|
|
892
|
-
id,
|
|
893
|
-
textValue: label || t(($) => $.ui.loadingState.text),
|
|
894
|
-
isDisabled: true,
|
|
895
|
-
className: selectListItemCva({}),
|
|
896
|
-
children: /* @__PURE__ */ jsx("div", {
|
|
897
|
-
ref,
|
|
898
|
-
className: "flex flex-1 justify-center text-muted-foreground",
|
|
899
|
-
children: /* @__PURE__ */ jsx(Spinner, {})
|
|
900
|
-
})
|
|
901
|
-
});
|
|
902
|
-
};
|
|
903
|
-
//#endregion
|
|
904
|
-
//#region src/components/inputs/Selection/shared/SelectListBox.tsx
|
|
905
|
-
var ReversedListLayout = class extends $a3be900807531178$re_export$ListLayout {
|
|
906
|
-
reverseLayoutInfo(layoutInfo) {
|
|
907
|
-
const reversedLayoutInfo = layoutInfo.copy();
|
|
908
|
-
reversedLayoutInfo.rect.y = this.getContentSize().height - reversedLayoutInfo.rect.maxY;
|
|
909
|
-
return reversedLayoutInfo;
|
|
910
|
-
}
|
|
911
|
-
getLayoutInfo(key) {
|
|
912
|
-
const layoutInfo = super.getLayoutInfo(key);
|
|
913
|
-
return layoutInfo ? this.reverseLayoutInfo(layoutInfo) : null;
|
|
914
|
-
}
|
|
915
|
-
getVisibleLayoutInfos(rect) {
|
|
916
|
-
const mirroredRect = new $a3be900807531178$re_export$Rect(rect.x, Math.max(0, this.getContentSize().height - rect.maxY), rect.width, rect.height);
|
|
917
|
-
return super.getVisibleLayoutInfos(mirroredRect).map((layoutInfo) => this.reverseLayoutInfo(layoutInfo));
|
|
918
|
-
}
|
|
919
|
-
};
|
|
920
|
-
const SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, isReversed = false, virtualizerOptions, totalItems, newItemRender, onLoadMore, className, onClose, ...props }) => {
|
|
921
|
-
const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll, hasLoadMore, isLoading } = SelectContext.useSelect();
|
|
922
|
-
const listBoxRef = useRef(null);
|
|
923
|
-
const hasRequestedAtTopRef = useRef(false);
|
|
924
|
-
const isReverseScrollAnchoredRef = useRef(!isReversed);
|
|
925
|
-
const reverseScrollBottomOffsetRef = useRef(0);
|
|
926
|
-
const previousLoadedItemIdsRef = useRef([]);
|
|
927
|
-
const shouldVirtualize = !!virtualizerOptions || (totalItems ?? listItems.length) > 100 || hasLoadMore;
|
|
928
|
-
const usesReversedLayout = isReversed && isSearchable && shouldVirtualize;
|
|
929
|
-
const displayedListItems = isReversed && !usesReversedLayout ? listItems.toReversed() : listItems;
|
|
930
|
-
const loadedItemIds = useMemo(() => listItems.filter((item) => item.id !== LoadingItemId).map((item) => item.id), [listItems]);
|
|
931
|
-
const loadMoreResetKey = loadedItemIds.join("\0");
|
|
932
|
-
useLayoutEffect(() => {
|
|
933
|
-
hasRequestedAtTopRef.current = false;
|
|
934
|
-
}, [loadMoreResetKey]);
|
|
935
|
-
useLayoutEffect(() => {
|
|
936
|
-
const previousLoadedItemIds = previousLoadedItemIdsRef.current;
|
|
937
|
-
const preservesExistingItems = previousLoadedItemIds.length > 0 && previousLoadedItemIds.every((itemId, index) => loadedItemIds[index] === itemId);
|
|
938
|
-
previousLoadedItemIdsRef.current = loadedItemIds;
|
|
939
|
-
if (!preservesExistingItems) reverseScrollBottomOffsetRef.current = 0;
|
|
940
|
-
const listBox = listBoxRef.current;
|
|
941
|
-
if (!listBox) {
|
|
942
|
-
isReverseScrollAnchoredRef.current = true;
|
|
943
|
-
return;
|
|
944
|
-
}
|
|
945
|
-
if (!isReversed) {
|
|
946
|
-
listBox.scrollTop = 0;
|
|
947
|
-
isReverseScrollAnchoredRef.current = true;
|
|
948
|
-
return;
|
|
949
|
-
}
|
|
950
|
-
isReverseScrollAnchoredRef.current = false;
|
|
951
|
-
const finishAnchoring = () => {
|
|
952
|
-
if (listBox.scrollHeight <= listBox.clientHeight) return false;
|
|
953
|
-
listBox.scrollTop = listBox.scrollHeight - listBox.clientHeight - reverseScrollBottomOffsetRef.current;
|
|
954
|
-
isReverseScrollAnchoredRef.current = true;
|
|
955
|
-
return true;
|
|
956
|
-
};
|
|
957
|
-
let scrollFrame = requestAnimationFrame(() => {
|
|
958
|
-
scrollFrame = requestAnimationFrame(() => {
|
|
959
|
-
if (!finishAnchoring()) isReverseScrollAnchoredRef.current = true;
|
|
960
|
-
});
|
|
961
|
-
});
|
|
962
|
-
return () => {
|
|
963
|
-
cancelAnimationFrame(scrollFrame);
|
|
964
|
-
reverseScrollBottomOffsetRef.current = listBox.scrollHeight - listBox.clientHeight - listBox.scrollTop;
|
|
965
|
-
};
|
|
966
|
-
}, [
|
|
967
|
-
isReversed,
|
|
968
|
-
loadMoreResetKey,
|
|
969
|
-
loadedItemIds
|
|
970
|
-
]);
|
|
971
|
-
const onSelectionChange = (value) => {
|
|
972
|
-
const ids = Array.from(value);
|
|
973
|
-
if (!isMultiple && ids.length === 0) {
|
|
974
|
-
if (fieldState.value) {
|
|
975
|
-
onClose?.();
|
|
976
|
-
onChange(fieldState.value);
|
|
977
|
-
}
|
|
978
|
-
return;
|
|
979
|
-
}
|
|
980
|
-
if (isMultiple && ids.includes("all-item-id")) {
|
|
981
|
-
if (ids.length > selectableListItems.length) onClear();
|
|
982
|
-
else onSelectAll();
|
|
983
|
-
return;
|
|
984
|
-
}
|
|
985
|
-
if (isMultiple) onChange(ids);
|
|
986
|
-
else {
|
|
987
|
-
onClose?.();
|
|
988
|
-
onChange(ids[0]);
|
|
989
|
-
}
|
|
990
|
-
};
|
|
991
|
-
const requestLoadMore = useCallback(() => {
|
|
992
|
-
if (isLoading) return;
|
|
993
|
-
if (isReversed && (!isReverseScrollAnchoredRef.current || (listBoxRef.current?.scrollTop ?? 0) > 1 || hasRequestedAtTopRef.current)) return;
|
|
994
|
-
if (isReversed) hasRequestedAtTopRef.current = true;
|
|
995
|
-
onLoadMore?.();
|
|
996
|
-
}, [
|
|
997
|
-
isLoading,
|
|
998
|
-
isReversed,
|
|
999
|
-
onLoadMore
|
|
1000
|
-
]);
|
|
1001
|
-
const onScroll = (event) => {
|
|
1002
|
-
if (!isReversed || !hasLoadMore || !isReverseScrollAnchoredRef.current) return;
|
|
1003
|
-
if (event.currentTarget.scrollTop > 48) hasRequestedAtTopRef.current = false;
|
|
1004
|
-
else requestLoadMore();
|
|
1005
|
-
};
|
|
1006
|
-
const renderItem = (item) => {
|
|
1007
|
-
if (item.isSelectAllItem) return /* @__PURE__ */ jsx(SelectListBoxItemSelectAll, { ...item }, item.id);
|
|
1008
|
-
if (item.isLoadingItem) return /* @__PURE__ */ jsx(SelectListBoxLoadingItem, {
|
|
1009
|
-
...item,
|
|
1010
|
-
onLoadMore: requestLoadMore
|
|
1011
|
-
}, item.id);
|
|
1012
|
-
return /* @__PURE__ */ jsx(SelectListBoxItem, {
|
|
1013
|
-
...item,
|
|
1014
|
-
isSearchable,
|
|
1015
|
-
isNewItem: item.isNewItem,
|
|
1016
|
-
newItemRender
|
|
1017
|
-
}, item.id);
|
|
1018
|
-
};
|
|
1019
|
-
if (shouldVirtualize) return /* @__PURE__ */ jsx($143fb904d86051ce$export$89be5a243e59c4b2, {
|
|
1020
|
-
layout: usesReversedLayout ? ReversedListLayout : $a3be900807531178$re_export$ListLayout,
|
|
1021
|
-
layoutOptions: virtualizerOptions,
|
|
1022
|
-
children: /* @__PURE__ */ jsx($928221da08ecbc62$export$41f133550aa26f48, {
|
|
1023
|
-
ref: listBoxRef,
|
|
1024
|
-
...props,
|
|
1025
|
-
"aria-label": label,
|
|
1026
|
-
selectionMode,
|
|
1027
|
-
className: clsx("flex-1 p-1 outline-none", isScrollable ? "max-h-full overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
|
|
1028
|
-
items: displayedListItems,
|
|
1029
|
-
selectedKeys: selectedIds,
|
|
1030
|
-
onSelectionChange,
|
|
1031
|
-
onScroll,
|
|
1032
|
-
escapeKeyBehavior: "none",
|
|
1033
|
-
shouldSelectOnPressUp: true,
|
|
1034
|
-
children: renderItem
|
|
1035
|
-
})
|
|
1036
|
-
});
|
|
1037
|
-
return /* @__PURE__ */ jsx($928221da08ecbc62$export$41f133550aa26f48, {
|
|
1038
|
-
ref: listBoxRef,
|
|
1039
|
-
...props,
|
|
1040
|
-
"aria-label": label,
|
|
1041
|
-
selectionMode,
|
|
1042
|
-
className: clsx("flex-1 p-1 outline-none", isScrollable ? "max-h-full overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
|
|
1043
|
-
items: displayedListItems,
|
|
1044
|
-
selectedKeys: selectedIds,
|
|
1045
|
-
onSelectionChange,
|
|
1046
|
-
onScroll,
|
|
1047
|
-
escapeKeyBehavior: "none",
|
|
1048
|
-
shouldSelectOnPressUp: true,
|
|
1049
|
-
children: renderItem
|
|
1050
|
-
});
|
|
701
|
+
//#region src/components/inputs/Selection/shared/SelectListBox.lazy.tsx
|
|
702
|
+
const loadSelectListBox = () => import("./SelectListBox-CFOH3brT.js");
|
|
703
|
+
const SelectListBoxRenderer = lazy(() => loadSelectListBox().then(({ SelectListBox }) => ({ default: SelectListBox })));
|
|
704
|
+
/** Fetches the list box chunk ahead of the list opening (hover, focus). */
|
|
705
|
+
const preloadSelectListBox = () => {
|
|
706
|
+
loadSelectListBox();
|
|
1051
707
|
};
|
|
708
|
+
/**
|
|
709
|
+
* List box (items, virtualizer and list layouts) that only loads when a select opens.
|
|
710
|
+
* The popover and bottom sheet already render nothing while closed, so the fallback is empty.
|
|
711
|
+
*/
|
|
712
|
+
const SelectListBox = (props) => /* @__PURE__ */ jsx(Suspense, {
|
|
713
|
+
fallback: null,
|
|
714
|
+
children: /* @__PURE__ */ jsx(SelectListBoxRenderer, { ...props })
|
|
715
|
+
});
|
|
1052
716
|
//#endregion
|
|
1053
717
|
//#region src/components/inputs/Selection/shared/SelectDesktop.tsx
|
|
1054
718
|
const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
|
|
@@ -1167,8 +831,14 @@ const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, i
|
|
|
1167
831
|
className: clsx("group w-full", containerClassName)
|
|
1168
832
|
},
|
|
1169
833
|
as,
|
|
1170
|
-
onMouseEnter
|
|
1171
|
-
|
|
834
|
+
onMouseEnter: (event) => {
|
|
835
|
+
preloadSelectListBox();
|
|
836
|
+
onMouseEnter?.(event);
|
|
837
|
+
},
|
|
838
|
+
onFocusCapture: (event) => {
|
|
839
|
+
preloadSelectListBox();
|
|
840
|
+
onFocusCapture?.(event);
|
|
841
|
+
},
|
|
1172
842
|
ref: wrapperRef,
|
|
1173
843
|
children: [customTrigger ? /* @__PURE__ */ jsx($f2ff30fde7b014be$export$2e1e1122cf0cba88, {
|
|
1174
844
|
...dialogTriggerProps,
|
|
@@ -1309,7 +979,10 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
|
|
|
1309
979
|
labelProps,
|
|
1310
980
|
className: clsx("group w-full", containerClassName),
|
|
1311
981
|
onMouseEnter,
|
|
1312
|
-
onFocusCapture
|
|
982
|
+
onFocusCapture: (event) => {
|
|
983
|
+
preloadSelectListBox();
|
|
984
|
+
onFocusCapture?.(event);
|
|
985
|
+
},
|
|
1313
986
|
children: /* @__PURE__ */ jsxs($f2ff30fde7b014be$export$2e1e1122cf0cba88, {
|
|
1314
987
|
...dialogTriggerProps,
|
|
1315
988
|
children: [customTrigger ? /* @__PURE__ */ jsx("div", {
|
|
@@ -1609,4 +1282,4 @@ function Select(props) {
|
|
|
1609
1282
|
return /* @__PURE__ */ jsx(SelectInner, { ...props });
|
|
1610
1283
|
}
|
|
1611
1284
|
//#endregion
|
|
1612
|
-
export { useKeyInteractions as a, getKeyInteractionAction as i, SelectInner as n,
|
|
1285
|
+
export { useKeyInteractions as a, LoadingItemId as c, getKeyInteractionAction as i, SelectAllItemId as l, SelectInner as n, SelectContext as o, createKeyInteractionsHandler as r, useDebounceCallback as s, Select as t };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as SelectInner } from "./Select-
|
|
1
|
+
import { n as SelectInner } from "./Select-DbZOJ-0u.js";
|
|
2
2
|
import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-D_3dPATF.js";
|
|
3
3
|
import { t as FieldController } from "./form.binding-B-2id68q.js";
|
|
4
4
|
import { memo } from "react";
|