@papernote/ui 2.0.0 → 2.0.1
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/components/Select.d.ts +3 -3
- package/dist/components/Select.d.ts.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.esm.js +156 -112
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +156 -112
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Select.tsx +367 -241
package/dist/index.js
CHANGED
|
@@ -725,15 +725,15 @@ function usePrefersMobile() {
|
|
|
725
725
|
|
|
726
726
|
// Size classes for trigger button
|
|
727
727
|
const sizeClasses$d = {
|
|
728
|
-
sm:
|
|
729
|
-
md:
|
|
730
|
-
lg:
|
|
728
|
+
sm: "h-8 text-sm py-1",
|
|
729
|
+
md: "h-10 text-base py-2",
|
|
730
|
+
lg: "h-12 text-base py-3 min-h-touch", // 44px touch target
|
|
731
731
|
};
|
|
732
732
|
// Size classes for options
|
|
733
733
|
const optionSizeClasses = {
|
|
734
|
-
sm:
|
|
735
|
-
md:
|
|
736
|
-
lg:
|
|
734
|
+
sm: "py-2 text-sm",
|
|
735
|
+
md: "py-2.5 text-sm",
|
|
736
|
+
lg: "py-3.5 text-base min-h-touch", // 44px touch target for mobile
|
|
737
737
|
};
|
|
738
738
|
/**
|
|
739
739
|
* Select - Dropdown select component with search, groups, virtual scrolling, and mobile support
|
|
@@ -806,9 +806,9 @@ const optionSizeClasses = {
|
|
|
806
806
|
* ```
|
|
807
807
|
*/
|
|
808
808
|
const Select = React.forwardRef((props, ref) => {
|
|
809
|
-
const { options = [], groups = [], value, onChange, placeholder =
|
|
809
|
+
const { options = [], groups = [], value, onChange, placeholder = "Select an option", searchable = false, disabled = false, label, helperText, error, loading = false, clearable = false, creatable = false, onCreateOption, virtualized = false, virtualHeight = "300px", virtualItemHeight = 42, size = "md", mobileMode = "auto", usePortal = true, required = false, } = props;
|
|
810
810
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
811
|
-
const [searchQuery, setSearchQuery] = React.useState(
|
|
811
|
+
const [searchQuery, setSearchQuery] = React.useState("");
|
|
812
812
|
const [scrollTop, setScrollTop] = React.useState(0);
|
|
813
813
|
const [activeDescendant] = React.useState(undefined);
|
|
814
814
|
const [dropdownPosition, setDropdownPosition] = React.useState(null);
|
|
@@ -821,10 +821,10 @@ const Select = React.forwardRef((props, ref) => {
|
|
|
821
821
|
const nativeSelectRef = React.useRef(null);
|
|
822
822
|
// Detect mobile viewport
|
|
823
823
|
const isMobile = useIsMobile();
|
|
824
|
-
const useMobileSheet = mobileMode ===
|
|
825
|
-
const useNativeSelect = mobileMode ===
|
|
824
|
+
const useMobileSheet = mobileMode === "auto" && isMobile;
|
|
825
|
+
const useNativeSelect = mobileMode === "native" && isMobile;
|
|
826
826
|
// Auto-size for mobile
|
|
827
|
-
const effectiveSize = isMobile && size ===
|
|
827
|
+
const effectiveSize = isMobile && size === "md" ? "lg" : size;
|
|
828
828
|
// Generate unique IDs for ARIA
|
|
829
829
|
const labelId = React.useId();
|
|
830
830
|
const listboxId = React.useId();
|
|
@@ -838,11 +838,8 @@ const Select = React.forwardRef((props, ref) => {
|
|
|
838
838
|
close: () => setIsOpen(false),
|
|
839
839
|
}));
|
|
840
840
|
// Flatten all options (from both options and groups)
|
|
841
|
-
const allOptions = [
|
|
842
|
-
|
|
843
|
-
...groups.flatMap(group => group.options)
|
|
844
|
-
];
|
|
845
|
-
const selectedOption = allOptions.find(opt => opt.value === value);
|
|
841
|
+
const allOptions = [...options, ...groups.flatMap((group) => group.options)];
|
|
842
|
+
const selectedOption = allOptions.find((opt) => opt.value === value);
|
|
846
843
|
// Filter options/groups based on search
|
|
847
844
|
const getFilteredData = () => {
|
|
848
845
|
if (!searchable || !searchQuery) {
|
|
@@ -850,41 +847,58 @@ const Select = React.forwardRef((props, ref) => {
|
|
|
850
847
|
}
|
|
851
848
|
const query = searchQuery.toLowerCase();
|
|
852
849
|
// Filter flat options
|
|
853
|
-
const filteredOptions = options.filter(opt => opt.label.toLowerCase().includes(query));
|
|
850
|
+
const filteredOptions = options.filter((opt) => opt.label.toLowerCase().includes(query));
|
|
854
851
|
// Filter grouped options
|
|
855
852
|
const filteredGroups = groups
|
|
856
|
-
.map(group => ({
|
|
853
|
+
.map((group) => ({
|
|
857
854
|
...group,
|
|
858
|
-
options: group.options.filter(opt => opt.label.toLowerCase().includes(query))
|
|
855
|
+
options: group.options.filter((opt) => opt.label.toLowerCase().includes(query)),
|
|
859
856
|
}))
|
|
860
|
-
.filter(group => group.options.length > 0);
|
|
857
|
+
.filter((group) => group.options.length > 0);
|
|
861
858
|
return { options: filteredOptions, groups: filteredGroups };
|
|
862
859
|
};
|
|
863
860
|
const { options: filteredOptions, groups: filteredGroups } = getFilteredData();
|
|
864
861
|
// Virtual scrolling calculations
|
|
865
|
-
const totalItems = filteredOptions.length + filteredGroups.flatMap(g => g.options).length;
|
|
862
|
+
const totalItems = filteredOptions.length + filteredGroups.flatMap((g) => g.options).length;
|
|
866
863
|
const useVirtualScrolling = virtualized && totalItems > 50;
|
|
867
864
|
const visibleRangeStart = useVirtualScrolling
|
|
868
865
|
? Math.floor(scrollTop / virtualItemHeight)
|
|
869
866
|
: 0;
|
|
870
867
|
const visibleRangeEnd = useVirtualScrolling
|
|
871
|
-
? Math.min(visibleRangeStart +
|
|
868
|
+
? Math.min(visibleRangeStart +
|
|
869
|
+
Math.ceil(parseInt(virtualHeight) / virtualItemHeight) +
|
|
870
|
+
5, totalItems)
|
|
872
871
|
: totalItems;
|
|
873
872
|
// Flatten all filtered items for virtualization
|
|
874
873
|
const allFilteredItems = [
|
|
875
|
-
...filteredOptions.map((opt, idx) => ({
|
|
876
|
-
|
|
874
|
+
...filteredOptions.map((opt, idx) => ({
|
|
875
|
+
type: "option",
|
|
876
|
+
option: opt,
|
|
877
|
+
groupIndex: -1,
|
|
878
|
+
optionIndex: idx,
|
|
879
|
+
})),
|
|
880
|
+
...filteredGroups.flatMap((group, groupIdx) => group.options.map((opt, optIdx) => ({
|
|
881
|
+
type: "grouped",
|
|
882
|
+
option: opt,
|
|
883
|
+
groupIndex: groupIdx,
|
|
884
|
+
optionIndex: optIdx,
|
|
885
|
+
groupLabel: group.label,
|
|
886
|
+
}))),
|
|
877
887
|
];
|
|
878
888
|
const visibleItems = useVirtualScrolling
|
|
879
889
|
? allFilteredItems.slice(visibleRangeStart, visibleRangeEnd)
|
|
880
890
|
: allFilteredItems;
|
|
881
|
-
const offsetY = useVirtualScrolling
|
|
882
|
-
|
|
891
|
+
const offsetY = useVirtualScrolling
|
|
892
|
+
? visibleRangeStart * virtualItemHeight
|
|
893
|
+
: 0;
|
|
894
|
+
const totalHeight = useVirtualScrolling
|
|
895
|
+
? totalItems * virtualItemHeight
|
|
896
|
+
: "auto";
|
|
883
897
|
// Check if we should show "Create" option
|
|
884
898
|
const showCreateOption = creatable &&
|
|
885
|
-
searchQuery.trim() !==
|
|
886
|
-
!filteredOptions.some(opt => opt.label.toLowerCase() === searchQuery.toLowerCase()) &&
|
|
887
|
-
!filteredGroups.some(group => group.options.some(opt => opt.label.toLowerCase() === searchQuery.toLowerCase()));
|
|
899
|
+
searchQuery.trim() !== "" &&
|
|
900
|
+
!filteredOptions.some((opt) => opt.label.toLowerCase() === searchQuery.toLowerCase()) &&
|
|
901
|
+
!filteredGroups.some((group) => group.options.some((opt) => opt.label.toLowerCase() === searchQuery.toLowerCase()));
|
|
888
902
|
// Handle creating new option
|
|
889
903
|
const handleCreateOption = () => {
|
|
890
904
|
if (onCreateOption) {
|
|
@@ -894,7 +908,7 @@ const Select = React.forwardRef((props, ref) => {
|
|
|
894
908
|
// If no callback, just select the typed value
|
|
895
909
|
onChange?.(searchQuery.trim());
|
|
896
910
|
}
|
|
897
|
-
setSearchQuery(
|
|
911
|
+
setSearchQuery("");
|
|
898
912
|
setIsOpen(false);
|
|
899
913
|
};
|
|
900
914
|
// Handle click outside (desktop dropdown only)
|
|
@@ -908,14 +922,14 @@ const Select = React.forwardRef((props, ref) => {
|
|
|
908
922
|
const isOutsideDropdown = dropdownRef.current && !dropdownRef.current.contains(target);
|
|
909
923
|
if (isOutsideSelect && isOutsideDropdown) {
|
|
910
924
|
setIsOpen(false);
|
|
911
|
-
setSearchQuery(
|
|
925
|
+
setSearchQuery("");
|
|
912
926
|
}
|
|
913
927
|
};
|
|
914
928
|
if (isOpen) {
|
|
915
|
-
document.addEventListener(
|
|
929
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
916
930
|
}
|
|
917
931
|
return () => {
|
|
918
|
-
document.removeEventListener(
|
|
932
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
919
933
|
};
|
|
920
934
|
}, [isOpen, useMobileSheet]);
|
|
921
935
|
// Focus search input when opened
|
|
@@ -949,8 +963,8 @@ const Select = React.forwardRef((props, ref) => {
|
|
|
949
963
|
const hasSpaceBelow = spaceBelow >= dropdownHeight + gap;
|
|
950
964
|
const hasSpaceAbove = spaceAbove >= dropdownHeight + gap;
|
|
951
965
|
// Prefer bottom placement, flip to top if not enough space below but enough above
|
|
952
|
-
const placement = hasSpaceBelow || !hasSpaceAbove ?
|
|
953
|
-
const top = placement ===
|
|
966
|
+
const placement = hasSpaceBelow || !hasSpaceAbove ? "bottom" : "top";
|
|
967
|
+
const top = placement === "bottom"
|
|
954
968
|
? rect.bottom + gap
|
|
955
969
|
: rect.top - dropdownHeight - gap;
|
|
956
970
|
setDropdownPosition({
|
|
@@ -963,23 +977,23 @@ const Select = React.forwardRef((props, ref) => {
|
|
|
963
977
|
// Initial position calculation
|
|
964
978
|
updatePosition();
|
|
965
979
|
// Listen for scroll events on all scrollable ancestors
|
|
966
|
-
window.addEventListener(
|
|
967
|
-
window.addEventListener(
|
|
980
|
+
window.addEventListener("scroll", updatePosition, true);
|
|
981
|
+
window.addEventListener("resize", updatePosition);
|
|
968
982
|
return () => {
|
|
969
|
-
window.removeEventListener(
|
|
970
|
-
window.removeEventListener(
|
|
983
|
+
window.removeEventListener("scroll", updatePosition, true);
|
|
984
|
+
window.removeEventListener("resize", updatePosition);
|
|
971
985
|
};
|
|
972
986
|
}, [isOpen, useMobileSheet, usePortal]);
|
|
973
987
|
// Lock body scroll when mobile sheet is open
|
|
974
988
|
React.useEffect(() => {
|
|
975
989
|
if (useMobileSheet && isOpen) {
|
|
976
|
-
document.body.style.overflow =
|
|
990
|
+
document.body.style.overflow = "hidden";
|
|
977
991
|
}
|
|
978
992
|
else {
|
|
979
|
-
document.body.style.overflow =
|
|
993
|
+
document.body.style.overflow = "";
|
|
980
994
|
}
|
|
981
995
|
return () => {
|
|
982
|
-
document.body.style.overflow =
|
|
996
|
+
document.body.style.overflow = "";
|
|
983
997
|
};
|
|
984
998
|
}, [isOpen, useMobileSheet]);
|
|
985
999
|
// Handle escape key for mobile sheet
|
|
@@ -987,83 +1001,105 @@ const Select = React.forwardRef((props, ref) => {
|
|
|
987
1001
|
if (!useMobileSheet || !isOpen)
|
|
988
1002
|
return;
|
|
989
1003
|
const handleEscape = (e) => {
|
|
990
|
-
if (e.key ===
|
|
1004
|
+
if (e.key === "Escape") {
|
|
991
1005
|
setIsOpen(false);
|
|
992
|
-
setSearchQuery(
|
|
1006
|
+
setSearchQuery("");
|
|
993
1007
|
}
|
|
994
1008
|
};
|
|
995
|
-
document.addEventListener(
|
|
996
|
-
return () => document.removeEventListener(
|
|
1009
|
+
document.addEventListener("keydown", handleEscape);
|
|
1010
|
+
return () => document.removeEventListener("keydown", handleEscape);
|
|
997
1011
|
}, [isOpen, useMobileSheet]);
|
|
998
1012
|
const handleSelect = (optionValue) => {
|
|
999
1013
|
onChange?.(optionValue);
|
|
1000
1014
|
setIsOpen(false);
|
|
1001
|
-
setSearchQuery(
|
|
1015
|
+
setSearchQuery("");
|
|
1002
1016
|
};
|
|
1003
1017
|
const handleClose = () => {
|
|
1004
1018
|
setIsOpen(false);
|
|
1005
|
-
setSearchQuery(
|
|
1019
|
+
setSearchQuery("");
|
|
1006
1020
|
};
|
|
1007
1021
|
// Render option button (shared between desktop and mobile)
|
|
1008
1022
|
const renderOption = (option, isSelected, mobile = false) => (jsxRuntime.jsxs("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, className: `
|
|
1009
1023
|
w-full flex items-center justify-between px-4 transition-colors
|
|
1010
1024
|
${mobile ? optionSizeClasses.lg : optionSizeClasses[effectiveSize]}
|
|
1011
|
-
${isSelected ?
|
|
1012
|
-
${option.disabled ?
|
|
1013
|
-
`, role: "option", "aria-selected": isSelected, children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsxRuntime.jsx("span", { children: option.icon }), option.label] }), isSelected && jsxRuntime.jsx(lucideReact.Check, { className: `${mobile ?
|
|
1025
|
+
${isSelected ? "bg-accent-50 text-accent-900" : "text-ink-700"}
|
|
1026
|
+
${option.disabled ? "opacity-40 cursor-not-allowed" : "hover:bg-paper-50 active:bg-paper-100 cursor-pointer"}
|
|
1027
|
+
`, role: "option", "aria-selected": isSelected, children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsxRuntime.jsx("span", { children: option.icon }), option.label] }), isSelected && (jsxRuntime.jsx(lucideReact.Check, { className: `${mobile ? "h-5 w-5" : "h-4 w-4"} text-accent-600` }))] }, option.value));
|
|
1014
1028
|
// Render options list content (shared between desktop and mobile)
|
|
1015
1029
|
const renderOptionsContent = (mobile = false) => {
|
|
1016
1030
|
if (loading) {
|
|
1017
1031
|
return (jsxRuntime.jsxs("div", { className: "px-4 py-8 flex items-center justify-center", role: "status", "aria-live": "polite", children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin text-ink-500" }), jsxRuntime.jsx("span", { className: "ml-2 text-sm text-ink-500", children: "Loading..." })] }));
|
|
1018
1032
|
}
|
|
1019
|
-
if (filteredOptions.length === 0 &&
|
|
1033
|
+
if (filteredOptions.length === 0 &&
|
|
1034
|
+
filteredGroups.length === 0 &&
|
|
1035
|
+
!showCreateOption) {
|
|
1020
1036
|
return (jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-ink-500 text-center", role: "status", "aria-live": "polite", children: "No options found" }));
|
|
1021
1037
|
}
|
|
1022
1038
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showCreateOption && (jsxRuntime.jsx("button", { type: "button", onClick: handleCreateOption, className: `
|
|
1023
1039
|
w-full flex items-center px-4 text-accent-700 hover:bg-accent-50 transition-colors border-b border-paper-200
|
|
1024
|
-
${mobile ?
|
|
1025
|
-
`, children: jsxRuntime.jsxs("span", { className: "font-medium", children: ["Create \"", searchQuery, "\""] }) })), useVirtualScrolling ? (jsxRuntime.jsx("div", { style: { height: totalHeight, position:
|
|
1040
|
+
${mobile ? "py-3.5 text-base" : "py-2.5 text-sm"}
|
|
1041
|
+
`, children: jsxRuntime.jsxs("span", { className: "font-medium", children: ["Create \"", searchQuery, "\""] }) })), useVirtualScrolling ? (jsxRuntime.jsx("div", { style: { height: totalHeight, position: "relative" }, children: jsxRuntime.jsx("div", { style: { transform: `translateY(${offsetY}px)` }, children: visibleItems.map((item) => {
|
|
1026
1042
|
const option = item.option;
|
|
1027
1043
|
const isSelected = option.value === value;
|
|
1028
1044
|
const key = `${item.type}-${item.groupIndex}-${item.optionIndex}-${option.value}`;
|
|
1029
|
-
return (jsxRuntime.jsxs("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, style: {
|
|
1045
|
+
return (jsxRuntime.jsxs("button", { type: "button", onClick: () => !option.disabled && handleSelect(option.value), disabled: option.disabled, style: {
|
|
1046
|
+
height: mobile ? "56px" : `${virtualItemHeight}px`,
|
|
1047
|
+
}, className: `
|
|
1030
1048
|
w-full flex items-center justify-between px-4 transition-colors
|
|
1031
|
-
${mobile ?
|
|
1032
|
-
${isSelected ?
|
|
1033
|
-
${option.disabled ?
|
|
1034
|
-
`, role: "option", "aria-selected": isSelected, children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsxRuntime.jsx("span", { children: option.icon }), option.label] }), isSelected && jsxRuntime.jsx(lucideReact.Check, { className: `${mobile ?
|
|
1049
|
+
${mobile ? "text-base" : "text-sm"}
|
|
1050
|
+
${isSelected ? "bg-accent-50 text-accent-900" : "text-ink-700"}
|
|
1051
|
+
${option.disabled ? "opacity-40 cursor-not-allowed" : "hover:bg-paper-50 cursor-pointer"}
|
|
1052
|
+
`, role: "option", "aria-selected": isSelected, children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [option.icon && jsxRuntime.jsx("span", { children: option.icon }), option.label] }), isSelected && (jsxRuntime.jsx(lucideReact.Check, { className: `${mobile ? "h-5 w-5" : "h-4 w-4"} text-accent-600` }))] }, key));
|
|
1035
1053
|
}) }) })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [filteredOptions.map((option) => renderOption(option, option.value === value, mobile)), filteredGroups.map((group) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: `
|
|
1036
1054
|
px-4 font-semibold text-ink-500 uppercase tracking-wider bg-paper-50 border-t border-b border-paper-200
|
|
1037
|
-
${mobile ?
|
|
1055
|
+
${mobile ? "py-2.5 text-xs" : "py-2 text-xs"}
|
|
1038
1056
|
`, children: group.label }), group.options.map((option) => renderOption(option, option.value === value, mobile))] }, group.label)))] }))] }));
|
|
1039
1057
|
};
|
|
1040
1058
|
// Native select for mobile (optional)
|
|
1041
1059
|
if (useNativeSelect) {
|
|
1042
|
-
return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "label", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("select", { ref: nativeSelectRef, value: value ||
|
|
1060
|
+
return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "label", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsxs("select", { ref: nativeSelectRef, value: value || "", onChange: (e) => onChange?.(e.target.value), disabled: disabled, className: `
|
|
1043
1061
|
input w-full appearance-none pr-10
|
|
1044
1062
|
${sizeClasses$d[effectiveSize]}
|
|
1045
|
-
${error ?
|
|
1046
|
-
${disabled ?
|
|
1047
|
-
`, "aria-labelledby": label ? labelId : undefined, "aria-invalid": error ?
|
|
1063
|
+
${error ? "border-error-400 focus:border-error-400 focus:ring-error-400" : ""}
|
|
1064
|
+
${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"}
|
|
1065
|
+
`, "aria-labelledby": label ? labelId : undefined, "aria-invalid": error ? "true" : undefined, "aria-describedby": error ? errorId : helperText ? helperTextId : undefined, "aria-required": required, children: [jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))), groups.map((group) => (jsxRuntime.jsx("optgroup", { label: group.label, children: group.options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }, group.label)))] }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-500 pointer-events-none" })] }), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
|
|
1048
1066
|
}
|
|
1049
1067
|
return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsxs("label", { id: labelId, className: "label", children: [label, required && jsxRuntime.jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxRuntime.jsx("div", { ref: selectRef, className: "relative", children: jsxRuntime.jsxs("button", { ref: buttonRef, type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `
|
|
1050
1068
|
input w-full flex items-center justify-between px-3
|
|
1051
1069
|
${sizeClasses$d[effectiveSize]}
|
|
1052
|
-
${error ?
|
|
1053
|
-
${disabled ?
|
|
1054
|
-
`, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? placeholder : undefined, "aria-activedescendant": activeDescendant, "aria-invalid": error ?
|
|
1070
|
+
${error ? "border-error-400 focus:border-error-400 focus:ring-error-400" : ""}
|
|
1071
|
+
${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"}
|
|
1072
|
+
`, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? placeholder : undefined, "aria-activedescendant": activeDescendant, "aria-invalid": error ? "true" : undefined, "aria-describedby": error ? errorId : helperText ? helperTextId : undefined, "aria-disabled": disabled, "aria-required": required, children: [jsxRuntime.jsxs("span", { className: `flex items-center gap-2 ${selectedOption ? "text-ink-800" : "text-ink-400"}`, children: [loading && (jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-ink-500" })), !loading && selectedOption?.icon && (jsxRuntime.jsx("span", { children: selectedOption.icon })), selectedOption ? selectedOption.label : placeholder] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [clearable && value && (jsxRuntime.jsx("span", { role: "button", tabIndex: -1, onClick: (e) => {
|
|
1055
1073
|
e.stopPropagation();
|
|
1056
|
-
onChange?.(
|
|
1074
|
+
onChange?.("");
|
|
1057
1075
|
setIsOpen(false);
|
|
1058
|
-
},
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1076
|
+
}, onKeyDown: (e) => {
|
|
1077
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
1078
|
+
e.preventDefault();
|
|
1079
|
+
e.stopPropagation();
|
|
1080
|
+
onChange?.("");
|
|
1081
|
+
setIsOpen(false);
|
|
1082
|
+
}
|
|
1083
|
+
}, className: "text-ink-400 hover:text-ink-600 transition-colors p-0.5 cursor-pointer inline-flex", "aria-label": "Clear selection", children: jsxRuntime.jsx(lucideReact.X, { className: `${effectiveSize === "lg" ? "h-5 w-5" : "h-4 w-4"}` }) })), jsxRuntime.jsx(lucideReact.ChevronDown, { className: `${effectiveSize === "lg" ? "h-5 w-5" : "h-4 w-4"} text-ink-500 transition-transform ${isOpen ? "rotate-180" : ""}` })] })] }) }), isOpen &&
|
|
1084
|
+
!useMobileSheet &&
|
|
1085
|
+
(usePortal ? dropdownPosition : true) &&
|
|
1086
|
+
(usePortal ? (reactDom.createPortal(jsxRuntime.jsxs("div", { ref: dropdownRef, className: `fixed z-[9999] bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in ${dropdownPosition?.placement === "top"
|
|
1087
|
+
? "origin-bottom"
|
|
1088
|
+
: "origin-top"}`, style: {
|
|
1089
|
+
top: dropdownPosition.top,
|
|
1090
|
+
left: dropdownPosition.left,
|
|
1091
|
+
width: dropdownPosition.width,
|
|
1092
|
+
}, children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsxRuntime.jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options", "aria-autocomplete": "list", "aria-controls": listboxId })] }) })), jsxRuntime.jsx("div", { ref: listRef, id: listboxId, className: "overflow-y-auto", style: {
|
|
1093
|
+
maxHeight: useVirtualScrolling ? virtualHeight : "12rem",
|
|
1094
|
+
}, onScroll: (e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop), role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(false) })] }), document.body)) : (
|
|
1095
|
+
// Non-portal dropdown (inline, relative positioning)
|
|
1096
|
+
jsxRuntime.jsxs("div", { ref: dropdownRef, className: "absolute z-50 mt-1 w-full bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in", children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsxRuntime.jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options", "aria-autocomplete": "list", "aria-controls": listboxId })] }) })), jsxRuntime.jsx("div", { ref: listRef, id: listboxId, className: "overflow-y-auto", style: {
|
|
1097
|
+
maxHeight: useVirtualScrolling ? virtualHeight : "12rem",
|
|
1098
|
+
}, onScroll: (e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop), role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(false) })] }))), isOpen &&
|
|
1099
|
+
useMobileSheet &&
|
|
1100
|
+
reactDom.createPortal(jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-end", onClick: (e) => e.target === e.currentTarget && handleClose(), role: "dialog", "aria-modal": "true", "aria-labelledby": label ? `mobile-${labelId}` : undefined, children: [jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/50 animate-fade-in" }), jsxRuntime.jsxs("div", { className: "relative w-full bg-white rounded-t-2xl shadow-2xl animate-slide-up max-h-[85vh] flex flex-col", style: { paddingBottom: "env(safe-area-inset-bottom)" }, children: [jsxRuntime.jsx("div", { className: "py-3 cursor-grab", children: jsxRuntime.jsx("div", { className: "w-12 h-1.5 bg-ink-300 rounded-full mx-auto" }) }), jsxRuntime.jsxs("div", { className: "px-4 pb-3 border-b border-paper-200 flex items-center justify-between", children: [label && (jsxRuntime.jsx("h2", { id: `mobile-${labelId}`, className: "text-lg font-semibold text-ink-900", children: label })), !label && (jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-ink-900", children: placeholder })), jsxRuntime.jsx("button", { onClick: handleClose, className: "text-ink-400 hover:text-ink-600 transition-colors p-2 -mr-2", "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) })] }), searchable && (jsxRuntime.jsx("div", { className: "p-3 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-400" }), jsxRuntime.jsx("input", { ref: mobileSearchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", inputMode: "search", enterKeyHint: "search", className: "w-full pl-12 pr-4 py-3 text-base border border-paper-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options" })] }) })), jsxRuntime.jsx("div", { id: listboxId, className: "overflow-y-auto flex-1", role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(true) })] })] }), document.body), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
|
|
1065
1101
|
});
|
|
1066
|
-
Select.displayName =
|
|
1102
|
+
Select.displayName = "Select";
|
|
1067
1103
|
|
|
1068
1104
|
const MultiSelect = React.forwardRef(({ options, value = [], onChange, placeholder = 'Select options', searchable = false, disabled = false, label, helperText, error, maxHeight = 240, maxSelections, loading = false, 'aria-label': ariaLabel, }, ref) => {
|
|
1069
1105
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
@@ -15780,44 +15816,52 @@ function getAugmentedNamespace(n) {
|
|
|
15780
15816
|
* (A1, A1:C5, ...)
|
|
15781
15817
|
*/
|
|
15782
15818
|
|
|
15783
|
-
|
|
15819
|
+
var collection;
|
|
15820
|
+
var hasRequiredCollection;
|
|
15821
|
+
|
|
15822
|
+
function requireCollection () {
|
|
15823
|
+
if (hasRequiredCollection) return collection;
|
|
15824
|
+
hasRequiredCollection = 1;
|
|
15825
|
+
class Collection {
|
|
15784
15826
|
|
|
15785
|
-
|
|
15786
|
-
|
|
15787
|
-
|
|
15788
|
-
|
|
15789
|
-
|
|
15790
|
-
|
|
15791
|
-
|
|
15792
|
-
|
|
15793
|
-
|
|
15794
|
-
|
|
15795
|
-
|
|
15827
|
+
constructor(data, refs) {
|
|
15828
|
+
if (data == null && refs == null) {
|
|
15829
|
+
this._data = [];
|
|
15830
|
+
this._refs = [];
|
|
15831
|
+
} else {
|
|
15832
|
+
if (data.length !== refs.length)
|
|
15833
|
+
throw Error('Collection: data length should match references length.');
|
|
15834
|
+
this._data = data;
|
|
15835
|
+
this._refs = refs;
|
|
15836
|
+
}
|
|
15837
|
+
}
|
|
15796
15838
|
|
|
15797
|
-
|
|
15798
|
-
|
|
15799
|
-
|
|
15839
|
+
get data() {
|
|
15840
|
+
return this._data;
|
|
15841
|
+
}
|
|
15800
15842
|
|
|
15801
|
-
|
|
15802
|
-
|
|
15803
|
-
|
|
15843
|
+
get refs() {
|
|
15844
|
+
return this._refs;
|
|
15845
|
+
}
|
|
15804
15846
|
|
|
15805
|
-
|
|
15806
|
-
|
|
15807
|
-
|
|
15847
|
+
get length() {
|
|
15848
|
+
return this._data.length;
|
|
15849
|
+
}
|
|
15808
15850
|
|
|
15809
|
-
|
|
15810
|
-
|
|
15811
|
-
|
|
15812
|
-
|
|
15813
|
-
|
|
15814
|
-
|
|
15815
|
-
|
|
15816
|
-
|
|
15817
|
-
|
|
15818
|
-
}
|
|
15851
|
+
/**
|
|
15852
|
+
* Add data and references to this collection.
|
|
15853
|
+
* @param {{}} obj - data
|
|
15854
|
+
* @param {{}} ref - reference
|
|
15855
|
+
*/
|
|
15856
|
+
add(obj, ref) {
|
|
15857
|
+
this._data.push(obj);
|
|
15858
|
+
this._refs.push(ref);
|
|
15859
|
+
}
|
|
15860
|
+
}
|
|
15819
15861
|
|
|
15820
|
-
|
|
15862
|
+
collection = Collection;
|
|
15863
|
+
return collection;
|
|
15864
|
+
}
|
|
15821
15865
|
|
|
15822
15866
|
var helpers;
|
|
15823
15867
|
var hasRequiredHelpers;
|
|
@@ -15826,7 +15870,7 @@ function requireHelpers () {
|
|
|
15826
15870
|
if (hasRequiredHelpers) return helpers;
|
|
15827
15871
|
hasRequiredHelpers = 1;
|
|
15828
15872
|
const FormulaError = requireError();
|
|
15829
|
-
const Collection =
|
|
15873
|
+
const Collection = requireCollection();
|
|
15830
15874
|
|
|
15831
15875
|
const Types = {
|
|
15832
15876
|
NUMBER: 0,
|
|
@@ -25480,7 +25524,7 @@ var engineering = EngineeringFunctions;
|
|
|
25480
25524
|
|
|
25481
25525
|
const FormulaError$b = requireError();
|
|
25482
25526
|
const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
|
|
25483
|
-
const Collection$2 =
|
|
25527
|
+
const Collection$2 = requireCollection();
|
|
25484
25528
|
const H$5 = FormulaHelpers$8;
|
|
25485
25529
|
|
|
25486
25530
|
const ReferenceFunctions$1 = {
|
|
@@ -37108,7 +37152,7 @@ var parsing = {
|
|
|
37108
37152
|
const FormulaError$4 = requireError();
|
|
37109
37153
|
const {Address: Address$1} = requireHelpers();
|
|
37110
37154
|
const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
|
|
37111
|
-
const Collection$1 =
|
|
37155
|
+
const Collection$1 = requireCollection();
|
|
37112
37156
|
const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
|
|
37113
37157
|
const {NotAllInputParsedException} = require$$4;
|
|
37114
37158
|
|
|
@@ -37870,7 +37914,7 @@ var hooks$1 = {
|
|
|
37870
37914
|
const FormulaError$2 = requireError();
|
|
37871
37915
|
const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
|
|
37872
37916
|
const {Prefix, Postfix, Infix, Operators} = operators;
|
|
37873
|
-
const Collection =
|
|
37917
|
+
const Collection = requireCollection();
|
|
37874
37918
|
const MAX_ROW = 1048576, MAX_COLUMN = 16384;
|
|
37875
37919
|
|
|
37876
37920
|
let Utils$1 = class Utils {
|