@driveflux/beam 3.0.15 → 3.0.17
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/accordion/Accordion.js +7 -133
- package/dist/accordion/Accordion.stories.js +11 -31
- package/dist/alert/Alert.js +19 -120
- package/dist/alert/Alert.stories.js +15 -50
- package/dist/animations/LoadingAnimation.js +21 -34
- package/dist/badge/Badge.js +7 -96
- package/dist/badge/Badge.stories.js +7 -28
- package/dist/box/Box.js +3 -87
- package/dist/box/Box.stories.js +7 -8
- package/dist/breadcrumbs/Breadcrumbs.js +28 -288
- package/dist/breadcrumbs/Breadcrumbs.stories.js +27 -51
- package/dist/button/Button.js +12 -126
- package/dist/button/Button.stories.js +7 -35
- package/dist/button/TextButton.js +9 -104
- package/dist/card/Card.js +7 -109
- package/dist/card/Card.stories.js +7 -10
- package/dist/carousel/Carousel.js +58 -281
- package/dist/carousel/Carousel.stories.js +7 -39
- package/dist/carousel/CarouselButton.js +7 -68
- package/dist/center/Center.js +3 -63
- package/dist/center/Center.stories.js +7 -19
- package/dist/checkbox/Checkbox.js +4 -124
- package/dist/checkbox/Checkbox.stories.js +8 -10
- package/dist/chip/Chip.js +3 -104
- package/dist/chip/Chip.stories.js +7 -19
- package/dist/circular-progress/CircularProgress.js +11 -150
- package/dist/circular-progress/CircularProgress.stories.js +14 -54
- package/dist/command/command.js +13 -170
- package/dist/datepicker/DatePicker.d.ts.map +1 -1
- package/dist/datepicker/DatePicker.js +91 -235
- package/dist/datepicker/DatePicker.js.map +1 -1
- package/dist/datepicker/DatePicker.stories.js +58 -163
- package/dist/datepicker/DatePicker.stories.js.map +1 -1
- package/dist/datepicker/DatePickerDrawer.js +17 -116
- package/dist/datepicker/DatePickerDrawer.js.map +1 -1
- package/dist/datepicker/DatePickerPopover.js +35 -208
- package/dist/datepicker/constants.js +4 -3
- package/dist/datepicker/utils.js +11 -4
- package/dist/dialog/index.js +33 -180
- package/dist/divider/Divider.js +3 -63
- package/dist/divider/Divider.stories.js +7 -13
- package/dist/drawer/index.js +12 -157
- package/dist/dropdown/Dropdown.js +26 -212
- package/dist/dropdown/Dropdown.stories.js +22 -109
- package/dist/field-wrapper/FieldWrapper.js +3 -139
- package/dist/field-wrapper/FieldWrapper.stories.js +28 -124
- package/dist/flex/Flex.js +3 -63
- package/dist/flex/Flex.stories.js +7 -19
- package/dist/grid/Grid.js +3 -63
- package/dist/grid/Grid.stories.js +7 -28
- package/dist/hooks/use-breakpoint-value.js +14 -77
- package/dist/hooks/use-media-query.js +12 -61
- package/dist/hstack/HStack.js +3 -63
- package/dist/hstack/HStack.stories.js +7 -19
- package/dist/icons/FluxLogo.js +9 -213
- package/dist/icons/FluxLogoTable.js +5 -109
- package/dist/icons/Icon.js +7 -108
- package/dist/icons/Icon.stories.js +7 -12
- package/dist/icons/Icon24Hours.js +5 -83
- package/dist/icons/IconAcceleration.js +4 -72
- package/dist/icons/IconAccount.js +4 -72
- package/dist/icons/IconApplicant.js +5 -78
- package/dist/icons/IconArrow.js +6 -78
- package/dist/icons/IconArrowBack.js +4 -72
- package/dist/icons/IconArrowForward.js +4 -72
- package/dist/icons/IconArrowTopLeft.js +4 -70
- package/dist/icons/IconBluesharkProductGuide.js +5 -80
- package/dist/icons/IconBolt.js +4 -72
- package/dist/icons/IconBriefcase.js +4 -72
- package/dist/icons/IconBulb.js +4 -72
- package/dist/icons/IconCalendar.js +4 -72
- package/dist/icons/IconCalendarArrowBack.js +4 -72
- package/dist/icons/IconCalendarArrowForward.js +4 -72
- package/dist/icons/IconCalendarDoubleArrowBack.js +4 -72
- package/dist/icons/IconCalendarDoubleArrowForward.js +4 -72
- package/dist/icons/IconCancel.js +5 -77
- package/dist/icons/IconCancelMark.js +4 -72
- package/dist/icons/IconCarSUV.js +4 -72
- package/dist/icons/IconCarSedan.js +7 -147
- package/dist/icons/IconChain.js +5 -79
- package/dist/icons/IconCheckmark.js +4 -72
- package/dist/icons/IconChevronRight.js +4 -72
- package/dist/icons/IconCircle.js +11 -114
- package/dist/icons/IconCircleCheckmark.js +5 -77
- package/dist/icons/IconCircleError.js +4 -72
- package/dist/icons/IconCircleExclamation.js +6 -104
- package/dist/icons/IconCircleMark.js +5 -78
- package/dist/icons/IconCircleOutline.js +5 -139
- package/dist/icons/IconClock.js +5 -80
- package/dist/icons/IconClose.js +4 -72
- package/dist/icons/IconCollapseAll.js +5 -94
- package/dist/icons/IconConcierge.js +5 -79
- package/dist/icons/IconConciergeService.js +5 -87
- package/dist/icons/IconCreditCard.js +5 -78
- package/dist/icons/IconDash.js +4 -72
- package/dist/icons/IconDeliver.js +4 -72
- package/dist/icons/IconDelivery.js +5 -87
- package/dist/icons/IconDetails.js +4 -72
- package/dist/icons/IconDot.js +6 -87
- package/dist/icons/IconDownload.js +5 -79
- package/dist/icons/IconEVCharging.js +5 -79
- package/dist/icons/IconElectricCarFuel.js +5 -80
- package/dist/icons/IconEllipsis.js +5 -78
- package/dist/icons/IconEnvelope.js +4 -72
- package/dist/icons/IconExpandAll.js +5 -94
- package/dist/icons/IconEye.js +5 -79
- package/dist/icons/IconFacebook.js +6 -94
- package/dist/icons/IconFilter.js +5 -83
- package/dist/icons/IconFlagMalaysia.js +5 -141
- package/dist/icons/IconGiveKey.js +5 -79
- package/dist/icons/IconGlobe.js +4 -70
- package/dist/icons/IconGoogle.js +5 -87
- package/dist/icons/IconHome.js +5 -78
- package/dist/icons/IconHostAdvertise.js +4 -72
- package/dist/icons/IconHostCar.js +4 -75
- package/dist/icons/IconHostCash.js +5 -91
- package/dist/icons/IconHostHandle.js +4 -70
- package/dist/icons/IconHostLocation.js +4 -70
- package/dist/icons/IconHostPayment.js +5 -91
- package/dist/icons/IconHostService.js +5 -79
- package/dist/icons/IconHotDeals.js +4 -72
- package/dist/icons/IconInfo.js +5 -77
- package/dist/icons/IconInstagram.js +4 -72
- package/dist/icons/IconInsurance.js +5 -99
- package/dist/icons/IconInternet.js +4 -73
- package/dist/icons/IconInventory.js +5 -78
- package/dist/icons/IconLaurel.js +5 -101
- package/dist/icons/IconLinkedIn.js +4 -72
- package/dist/icons/IconLoading.js +4 -78
- package/dist/icons/IconLocation.js +5 -80
- package/dist/icons/IconLock.js +4 -73
- package/dist/icons/IconLogistics.js +4 -72
- package/dist/icons/IconMail.js +5 -94
- package/dist/icons/IconMember.js +5 -78
- package/dist/icons/IconMobilePen.js +5 -83
- package/dist/icons/IconMotorcycleMoped.js +5 -78
- package/dist/icons/IconNoCost.js +5 -92
- package/dist/icons/IconPDF.js +5 -80
- package/dist/icons/IconPencil.js +4 -70
- package/dist/icons/IconPhone.js +4 -70
- package/dist/icons/IconPlus.js +4 -72
- package/dist/icons/IconPricing.js +4 -72
- package/dist/icons/IconProtected.js +4 -71
- package/dist/icons/IconPsychology.js +4 -72
- package/dist/icons/IconQuestionTooltip.js +4 -73
- package/dist/icons/IconQuote.js +4 -72
- package/dist/icons/IconRate.js +4 -71
- package/dist/icons/IconRegister.js +5 -99
- package/dist/icons/IconReport.js +6 -89
- package/dist/icons/IconReturn.js +4 -72
- package/dist/icons/IconSearch.js +4 -70
- package/dist/icons/IconSecure.js +4 -71
- package/dist/icons/IconSecurity.js +4 -73
- package/dist/icons/IconSedanOutline.js +5 -159
- package/dist/icons/IconSelectArrow.js +6 -78
- package/dist/icons/IconSort.js +5 -79
- package/dist/icons/IconSortListed.js +5 -95
- package/dist/icons/IconSortPriceAscending.js +5 -83
- package/dist/icons/IconSortPriceDescending.js +5 -83
- package/dist/icons/IconSortYear.js +5 -79
- package/dist/icons/IconSpan.js +4 -71
- package/dist/icons/IconSpeaker.js +4 -79
- package/dist/icons/IconSpecialCar.js +5 -95
- package/dist/icons/IconStar.js +7 -92
- package/dist/icons/IconStockPhoto.js +5 -95
- package/dist/icons/IconSubscription.js +6 -113
- package/dist/icons/IconSubscriptions.js +6 -113
- package/dist/icons/IconSwap.js +5 -79
- package/dist/icons/IconTax.js +4 -72
- package/dist/icons/IconThinArrow.js +6 -78
- package/dist/icons/IconThumbsdown.js +5 -78
- package/dist/icons/IconThumbsup.js +5 -78
- package/dist/icons/IconTool.js +4 -72
- package/dist/icons/IconTooltip.js +4 -73
- package/dist/icons/IconTrash.js +4 -72
- package/dist/icons/IconTriangleExclamation.js +4 -72
- package/dist/icons/IconTyersBrakes.js +5 -83
- package/dist/icons/IconTyre.js +5 -83
- package/dist/icons/IconVacancy.js +5 -78
- package/dist/icons/IconVolunteer.js +4 -72
- package/dist/icons/IconWhatsapp.js +4 -73
- package/dist/icons/IconXPlatform.js +4 -72
- package/dist/icons/IconZeroEffort.js +5 -77
- package/dist/icons/Logo.js +3 -99
- package/dist/input/Input.js +11 -125
- package/dist/input/Input.stories.js +18 -17
- package/dist/input-mask/InputMask.js +11 -149
- package/dist/input-mask/InputMask.stories.js +6 -5
- package/dist/input-mask/mask-trackers.js +5 -4
- package/dist/input-select/InputSelect.js +68 -357
- package/dist/input-select/InputSelect.stories.js +25 -98
- package/dist/popover/popover.js +4 -72
- package/dist/progress/Progress.js +2 -96
- package/dist/progress/Progress.stories.js +14 -13
- package/dist/radio/Radio.js +4 -163
- package/dist/scroll-area/scroll-area.js +5 -113
- package/dist/search-input-select/SearchInputSelect.js +69 -346
- package/dist/select/Select.js +29 -315
- package/dist/select/Select.stories.js +19 -55
- package/dist/skeleton/Skeleton.js +3 -62
- package/dist/skeleton/Skeleton.stories.js +7 -8
- package/dist/slider/Slider.js +5 -106
- package/dist/slider/Slider.stories.js +11 -12
- package/dist/stack/Stack.js +3 -63
- package/dist/stack/Stack.stories.js +7 -19
- package/dist/styles.css +1 -1
- package/dist/table/Table.js +10 -131
- package/dist/table/Table.stories.js +8 -84
- package/dist/tabs/Tabs.js +9 -128
- package/dist/tabs/Tabs.stories.js +13 -46
- package/dist/text/Text.js +6 -88
- package/dist/text/Text.stories.js +7 -44
- package/dist/toast/Toast.stories.js +14 -66
- package/dist/toast/ToastBox.js +29 -77
- package/dist/toast/index.js +1 -0
- package/dist/toast/sonner.js +6 -66
- package/dist/toggle/Toggle.js +7 -116
- package/dist/toggle/Toggle.stories.js +8 -10
- package/dist/tooltip/Tooltip.js +12 -151
- package/dist/tooltip/Tooltip.stories.js +13 -71
- package/dist/utils.js +2 -4
- package/dist/vstack/VStack.js +3 -63
- package/dist/vstack/VStack.stories.js +7 -19
- package/package.json +1 -1
|
@@ -1,129 +1,4 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
function _array_like_to_array(arr, len) {
|
|
3
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
4
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
5
|
-
return arr2;
|
|
6
|
-
}
|
|
7
|
-
function _array_with_holes(arr) {
|
|
8
|
-
if (Array.isArray(arr)) return arr;
|
|
9
|
-
}
|
|
10
|
-
function _define_property(obj, key, value) {
|
|
11
|
-
if (key in obj) {
|
|
12
|
-
Object.defineProperty(obj, key, {
|
|
13
|
-
value: value,
|
|
14
|
-
enumerable: true,
|
|
15
|
-
configurable: true,
|
|
16
|
-
writable: true
|
|
17
|
-
});
|
|
18
|
-
} else {
|
|
19
|
-
obj[key] = value;
|
|
20
|
-
}
|
|
21
|
-
return obj;
|
|
22
|
-
}
|
|
23
|
-
function _iterable_to_array_limit(arr, i) {
|
|
24
|
-
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
25
|
-
if (_i == null) return;
|
|
26
|
-
var _arr = [];
|
|
27
|
-
var _n = true;
|
|
28
|
-
var _d = false;
|
|
29
|
-
var _s, _e;
|
|
30
|
-
try {
|
|
31
|
-
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
32
|
-
_arr.push(_s.value);
|
|
33
|
-
if (i && _arr.length === i) break;
|
|
34
|
-
}
|
|
35
|
-
} catch (err) {
|
|
36
|
-
_d = true;
|
|
37
|
-
_e = err;
|
|
38
|
-
} finally{
|
|
39
|
-
try {
|
|
40
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
41
|
-
} finally{
|
|
42
|
-
if (_d) throw _e;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
return _arr;
|
|
46
|
-
}
|
|
47
|
-
function _non_iterable_rest() {
|
|
48
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
49
|
-
}
|
|
50
|
-
function _object_spread(target) {
|
|
51
|
-
for(var i = 1; i < arguments.length; i++){
|
|
52
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
53
|
-
var ownKeys = Object.keys(source);
|
|
54
|
-
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
55
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
56
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
57
|
-
}));
|
|
58
|
-
}
|
|
59
|
-
ownKeys.forEach(function(key) {
|
|
60
|
-
_define_property(target, key, source[key]);
|
|
61
|
-
});
|
|
62
|
-
}
|
|
63
|
-
return target;
|
|
64
|
-
}
|
|
65
|
-
function ownKeys(object, enumerableOnly) {
|
|
66
|
-
var keys = Object.keys(object);
|
|
67
|
-
if (Object.getOwnPropertySymbols) {
|
|
68
|
-
var symbols = Object.getOwnPropertySymbols(object);
|
|
69
|
-
if (enumerableOnly) {
|
|
70
|
-
symbols = symbols.filter(function(sym) {
|
|
71
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
keys.push.apply(keys, symbols);
|
|
75
|
-
}
|
|
76
|
-
return keys;
|
|
77
|
-
}
|
|
78
|
-
function _object_spread_props(target, source) {
|
|
79
|
-
source = source != null ? source : {};
|
|
80
|
-
if (Object.getOwnPropertyDescriptors) {
|
|
81
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
82
|
-
} else {
|
|
83
|
-
ownKeys(Object(source)).forEach(function(key) {
|
|
84
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
return target;
|
|
88
|
-
}
|
|
89
|
-
function _object_without_properties(source, excluded) {
|
|
90
|
-
if (source == null) return {};
|
|
91
|
-
var target = _object_without_properties_loose(source, excluded);
|
|
92
|
-
var key, i;
|
|
93
|
-
if (Object.getOwnPropertySymbols) {
|
|
94
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
95
|
-
for(i = 0; i < sourceSymbolKeys.length; i++){
|
|
96
|
-
key = sourceSymbolKeys[i];
|
|
97
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
98
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
99
|
-
target[key] = source[key];
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
return target;
|
|
103
|
-
}
|
|
104
|
-
function _object_without_properties_loose(source, excluded) {
|
|
105
|
-
if (source == null) return {};
|
|
106
|
-
var target = {};
|
|
107
|
-
var sourceKeys = Object.keys(source);
|
|
108
|
-
var key, i;
|
|
109
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
110
|
-
key = sourceKeys[i];
|
|
111
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
112
|
-
target[key] = source[key];
|
|
113
|
-
}
|
|
114
|
-
return target;
|
|
115
|
-
}
|
|
116
|
-
function _sliced_to_array(arr, i) {
|
|
117
|
-
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
118
|
-
}
|
|
119
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
120
|
-
if (!o) return;
|
|
121
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
122
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
123
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
124
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
125
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
126
|
-
}
|
|
127
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
128
3
|
import { Command as CommandPrimitive } from 'cmdk';
|
|
129
4
|
import * as React from 'react';
|
|
@@ -132,65 +7,29 @@ import Box from '../box/Box';
|
|
|
132
7
|
import FieldWrapper from '../field-wrapper/FieldWrapper';
|
|
133
8
|
import IconSearch from '../icons/IconSearch';
|
|
134
9
|
import { cn } from '../utils';
|
|
135
|
-
|
|
136
|
-
var className = _param.className, props = _object_without_properties(_param, [
|
|
137
|
-
"className"
|
|
138
|
-
]);
|
|
139
|
-
return /*#__PURE__*/ _jsx(CommandPrimitive, _object_spread({
|
|
140
|
-
ref: ref,
|
|
141
|
-
className: cn('flex relative w-full', className)
|
|
142
|
-
}, props));
|
|
143
|
-
});
|
|
10
|
+
const Command = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive, { ref: ref, className: cn('flex relative w-full', className), ...props })));
|
|
144
11
|
Command.displayName = CommandPrimitive.displayName;
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
"error",
|
|
149
|
-
"prefix",
|
|
150
|
-
"isFocused",
|
|
151
|
-
"isSelected",
|
|
152
|
-
"handleToggle",
|
|
153
|
-
"handleClear"
|
|
154
|
-
]);
|
|
155
|
-
return /*#__PURE__*/ _jsxs("div", {
|
|
156
|
-
ref: ref,
|
|
157
|
-
className: cn('flex items-center h-12 w-full border border-primary2 bg-white text-sm cursor-pointer outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium hover:border-black focus-within:border-black focus-within:outline-hidden disabled:cursor-not-allowed disabled:opacity-50', error && 'border-alert4 hover:border-alert4 focus-within:border-alert4', className),
|
|
158
|
-
children: [
|
|
159
|
-
prefix,
|
|
160
|
-
/*#__PURE__*/ _jsx(IconSearch, {
|
|
161
|
-
className: "text-primary3 m-2",
|
|
162
|
-
size: '20px',
|
|
163
|
-
title: "Search"
|
|
164
|
-
}),
|
|
165
|
-
/*#__PURE__*/ _jsx(CommandPrimitive.Input, _object_spread_props(_object_spread({
|
|
166
|
-
className: cn('border-none h-full w-full px-3 outline-hidden text-ellipsis placeholder:text-primary2 placeholder:tracking-wide cursor-pointer')
|
|
167
|
-
}, props), {
|
|
168
|
-
onClick: function(_e) {
|
|
169
|
-
if (isSelected) {
|
|
170
|
-
isFocused = true;
|
|
171
|
-
} else if (!isFocused) {
|
|
172
|
-
handleToggle();
|
|
173
|
-
}
|
|
12
|
+
const CommandInput = React.forwardRef(({ className, error, prefix, isFocused, isSelected, handleToggle, handleClear, ...props }, ref) => (_jsxs("div", { ref: ref, className: cn('flex items-center h-12 w-full border border-primary2 bg-white text-sm cursor-pointer outline-hidden file:border-0 file:bg-transparent file:text-sm file:font-medium hover:border-black focus-within:border-black focus-within:outline-hidden disabled:cursor-not-allowed disabled:opacity-50', error && 'border-alert4 hover:border-alert4 focus-within:border-alert4', className), children: [prefix, _jsx(IconSearch, { className: "text-primary3 m-2", size: '20px', title: "Search" }), _jsx(CommandPrimitive.Input, { className: cn('border-none h-full w-full px-3 outline-hidden text-ellipsis placeholder:text-primary2 placeholder:tracking-wide cursor-pointer'), ...props, onClick: (_e) => {
|
|
13
|
+
if (isSelected) {
|
|
14
|
+
isFocused = true;
|
|
174
15
|
}
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
});
|
|
16
|
+
else if (!isFocused) {
|
|
17
|
+
handleToggle();
|
|
18
|
+
}
|
|
19
|
+
} })] })));
|
|
179
20
|
CommandInput.displayName = CommandPrimitive.Input.displayName;
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
var _React_useState = _sliced_to_array(React.useState('bottom'), 2), position = _React_useState[0], setPosition = _React_useState[1];
|
|
185
|
-
useEffect(function() {
|
|
186
|
-
var handlePosition = function() {
|
|
21
|
+
const CommandList = React.forwardRef(({ className, ...props }, ref) => {
|
|
22
|
+
const [position, setPosition] = React.useState('bottom');
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
const handlePosition = () => {
|
|
187
25
|
if (ref && 'current' in ref && ref.current) {
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
26
|
+
const rect = ref.current.getBoundingClientRect();
|
|
27
|
+
const spaceBelow = window.innerHeight - rect.bottom;
|
|
28
|
+
const spaceAbove = rect.top;
|
|
191
29
|
if (spaceBelow < 200 && spaceAbove > spaceBelow) {
|
|
192
30
|
setPosition('top');
|
|
193
|
-
}
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
194
33
|
setPosition('bottom');
|
|
195
34
|
}
|
|
196
35
|
}
|
|
@@ -198,217 +37,101 @@ var CommandList = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
|
|
|
198
37
|
handlePosition();
|
|
199
38
|
window.addEventListener('resize', handlePosition);
|
|
200
39
|
window.addEventListener('scroll', handlePosition);
|
|
201
|
-
return
|
|
40
|
+
return () => {
|
|
202
41
|
window.removeEventListener('resize', handlePosition);
|
|
203
42
|
window.removeEventListener('scroll', handlePosition);
|
|
204
43
|
};
|
|
205
|
-
}, [
|
|
206
|
-
|
|
207
|
-
]);
|
|
208
|
-
return /*#__PURE__*/ _jsx(CommandPrimitive.List, _object_spread({
|
|
209
|
-
ref: ref,
|
|
210
|
-
className: cn('max-h-80 absolute left-0 right-0 mt-1 shadow-md overflow-y-auto overflow-x-hidden z-10 bg-white', position === 'top' ? 'bottom-full mb-1' : 'top-full mt-1', className)
|
|
211
|
-
}, props));
|
|
44
|
+
}, [ref]);
|
|
45
|
+
return (_jsx(CommandPrimitive.List, { ref: ref, className: cn('max-h-80 absolute left-0 right-0 mt-1 shadow-md overflow-y-auto overflow-x-hidden z-10 bg-white', position === 'top' ? 'bottom-full mb-1' : 'top-full mt-1', className), ...props }));
|
|
212
46
|
});
|
|
213
47
|
CommandList.displayName = CommandPrimitive.List.displayName;
|
|
214
|
-
|
|
215
|
-
return /*#__PURE__*/ _jsx(CommandPrimitive.Empty, _object_spread({
|
|
216
|
-
ref: ref,
|
|
217
|
-
className: "p-4 text-center text-sm text-primary3"
|
|
218
|
-
}, props));
|
|
219
|
-
});
|
|
48
|
+
const CommandEmpty = React.forwardRef((props, ref) => (_jsx(CommandPrimitive.Empty, { ref: ref, className: "p-4 text-center text-sm text-primary3", ...props })));
|
|
220
49
|
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
|
|
221
|
-
|
|
222
|
-
var className = _param.className, props = _object_without_properties(_param, [
|
|
223
|
-
"className"
|
|
224
|
-
]);
|
|
225
|
-
return /*#__PURE__*/ _jsx(CommandPrimitive.Group, _object_spread({
|
|
226
|
-
ref: ref,
|
|
227
|
-
className: cn('overflow-hidden p-1 text-zinc-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500 dark:text-zinc-50 dark:[&_[cmdk-group-heading]]:text-zinc-400', className)
|
|
228
|
-
}, props));
|
|
229
|
-
});
|
|
50
|
+
const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Group, { ref: ref, className: cn('overflow-hidden p-1 text-zinc-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500 dark:text-zinc-50 dark:[&_[cmdk-group-heading]]:text-zinc-400', className), ...props })));
|
|
230
51
|
CommandGroup.displayName = CommandPrimitive.Group.displayName;
|
|
231
|
-
|
|
232
|
-
var className = _param.className, props = _object_without_properties(_param, [
|
|
233
|
-
"className"
|
|
234
|
-
]);
|
|
235
|
-
return /*#__PURE__*/ _jsx(CommandPrimitive.Separator, _object_spread({
|
|
236
|
-
ref: ref,
|
|
237
|
-
className: cn('-mx-1 h-px bg-zinc-200 dark:bg-zinc-800', className)
|
|
238
|
-
}, props));
|
|
239
|
-
});
|
|
52
|
+
const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Separator, { ref: ref, className: cn('-mx-1 h-px bg-zinc-200 dark:bg-zinc-800', className), ...props })));
|
|
240
53
|
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
|
|
241
|
-
|
|
242
|
-
var className = _param.className, props = _object_without_properties(_param, [
|
|
243
|
-
"className"
|
|
244
|
-
]);
|
|
245
|
-
return /*#__PURE__*/ _jsx(CommandPrimitive.Item, _object_spread({
|
|
246
|
-
ref: ref,
|
|
247
|
-
className: cn('relative flex cursor-pointer select-none items-center rounded-xs px-4 h-10 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:bg-primary1 data-[disabled=true]:text-primary2 data-[selected=true]:bg-zinc-100 data-[selected=true]:text-zinc-900 data-[disabled=true]:opacity-50 dark:data-[selected=true]:bg-zinc-800 dark:data-[selected=true]:text-zinc-50', className)
|
|
248
|
-
}, props));
|
|
249
|
-
});
|
|
54
|
+
const CommandItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Item, { ref: ref, className: cn('relative flex cursor-pointer select-none items-center rounded-xs px-4 h-10 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:bg-primary1 data-[disabled=true]:text-primary2 data-[selected=true]:bg-zinc-100 data-[selected=true]:text-zinc-900 data-[disabled=true]:opacity-50 dark:data-[selected=true]:bg-zinc-800 dark:data-[selected=true]:text-zinc-50', className), ...props })));
|
|
250
55
|
CommandItem.displayName = CommandPrimitive.Item.displayName;
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
"className"
|
|
254
|
-
]);
|
|
255
|
-
return /*#__PURE__*/ _jsx("span", _object_spread({
|
|
256
|
-
className: cn('ml-auto text-xs tracking-widest text-zinc-500 dark:text-zinc-400', className)
|
|
257
|
-
}, props));
|
|
56
|
+
const CommandShortcut = ({ className, ...props }) => {
|
|
57
|
+
return (_jsx("span", { className: cn('ml-auto text-xs tracking-widest text-zinc-500 dark:text-zinc-400', className), ...props }));
|
|
258
58
|
};
|
|
259
59
|
CommandShortcut.displayName = 'CommandShortcut';
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
wrapperProps
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
]);
|
|
282
|
-
var _React_useState = _sliced_to_array(React.useState(false), 2), isFocused = _React_useState[0], setIsFocused = _React_useState[1];
|
|
283
|
-
var _React_useState1 = _sliced_to_array(React.useState(''), 2), search = _React_useState1[0], setSearch = _React_useState1[1];
|
|
284
|
-
var _React_useState2 = _sliced_to_array(React.useState(providedValue), 2), value = _React_useState2[0], setValue = _React_useState2[1];
|
|
285
|
-
var _React_useState3 = _sliced_to_array(React.useState(false), 2), showAll = _React_useState3[0], setShowAll = _React_useState3[1];
|
|
286
|
-
var inputRef = React.useRef(null);
|
|
287
|
-
var listRef = React.useRef(null);
|
|
288
|
-
var wrapperRef = React.useRef(null);
|
|
289
|
-
var filteredOptions = React.useMemo(function() {
|
|
290
|
-
return options.filter(function(option) {
|
|
291
|
-
return typeof option.label === 'string' && option.label.toLowerCase().includes(search.toLowerCase());
|
|
292
|
-
});
|
|
293
|
-
}, [
|
|
294
|
-
search,
|
|
295
|
-
options
|
|
296
|
-
]);
|
|
297
|
-
var displayedOptions = showAll ? filteredOptions : filteredOptions.slice(0, 5);
|
|
298
|
-
var handleFocus = function() {
|
|
60
|
+
const SearchInputSelect = React.forwardRef((props, _ref) => {
|
|
61
|
+
const {
|
|
62
|
+
// for wrapper
|
|
63
|
+
wrapperProps, htmlFor, label, showRequired, showOptional, outerPrefix, outerSuffix, error,
|
|
64
|
+
// for Select-input-search
|
|
65
|
+
value: providedValue, placeholder, prefix, options, noOptionsText, onChange, isClearable = true, children, ...selectProps } = props;
|
|
66
|
+
const [isFocused, setIsFocused] = React.useState(false);
|
|
67
|
+
const [search, setSearch] = React.useState('');
|
|
68
|
+
const [value, setValue] = React.useState(providedValue);
|
|
69
|
+
const [showAll, setShowAll] = React.useState(false);
|
|
70
|
+
const inputRef = React.useRef(null);
|
|
71
|
+
const listRef = React.useRef(null);
|
|
72
|
+
const wrapperRef = React.useRef(null);
|
|
73
|
+
const filteredOptions = React.useMemo(() => {
|
|
74
|
+
return options.filter((option) => typeof option.label === 'string' &&
|
|
75
|
+
option.label.toLowerCase().includes(search.toLowerCase()));
|
|
76
|
+
}, [search, options]);
|
|
77
|
+
const displayedOptions = showAll
|
|
78
|
+
? filteredOptions
|
|
79
|
+
: filteredOptions.slice(0, 5);
|
|
80
|
+
const handleFocus = () => {
|
|
299
81
|
setIsFocused(true);
|
|
300
82
|
};
|
|
301
|
-
|
|
83
|
+
const handleBlur = (e) => {
|
|
302
84
|
if (e.relatedTarget === null) {
|
|
303
|
-
var _inputRef_current;
|
|
304
85
|
setIsFocused(false);
|
|
305
|
-
|
|
86
|
+
inputRef.current?.blur();
|
|
306
87
|
}
|
|
307
88
|
};
|
|
308
|
-
|
|
89
|
+
const handleChange = (value) => {
|
|
309
90
|
setSearch(value);
|
|
310
91
|
};
|
|
311
|
-
|
|
312
|
-
var _inputRef_current;
|
|
92
|
+
const handleSelect = (option) => {
|
|
313
93
|
setSearch(option.label);
|
|
314
|
-
onChange
|
|
94
|
+
onChange?.(option.value);
|
|
315
95
|
setValue(option.value);
|
|
316
96
|
setIsFocused(false);
|
|
317
|
-
|
|
97
|
+
inputRef.current?.focus();
|
|
318
98
|
};
|
|
319
|
-
|
|
320
|
-
setIsFocused(
|
|
321
|
-
|
|
322
|
-
isFocused && ((_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur());
|
|
99
|
+
const handleToggle = () => {
|
|
100
|
+
setIsFocused((isFocused) => {
|
|
101
|
+
isFocused && inputRef.current?.blur();
|
|
323
102
|
return !isFocused;
|
|
324
103
|
});
|
|
325
104
|
};
|
|
326
|
-
|
|
105
|
+
const handleClear = (event) => {
|
|
327
106
|
event.preventDefault();
|
|
328
107
|
event.stopPropagation();
|
|
329
108
|
setSearch('');
|
|
330
109
|
setIsFocused(false);
|
|
331
|
-
onChange
|
|
110
|
+
onChange?.(undefined);
|
|
332
111
|
setValue(undefined);
|
|
333
112
|
};
|
|
334
|
-
|
|
335
|
-
if (wrapperRef.current &&
|
|
113
|
+
const handleClickOutside = (event) => {
|
|
114
|
+
if (wrapperRef.current &&
|
|
115
|
+
!wrapperRef.current.contains(event.target)) {
|
|
336
116
|
setIsFocused(false);
|
|
337
117
|
}
|
|
338
118
|
};
|
|
339
|
-
|
|
340
|
-
setShowAll(
|
|
341
|
-
return !prev;
|
|
342
|
-
});
|
|
119
|
+
const handleShowAll = () => {
|
|
120
|
+
setShowAll((prev) => !prev);
|
|
343
121
|
if (filteredOptions.length > 5) {
|
|
344
122
|
setShowAll(true);
|
|
345
123
|
}
|
|
346
124
|
};
|
|
347
125
|
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
|
348
|
-
React.useEffect(
|
|
126
|
+
React.useEffect(() => {
|
|
349
127
|
document.addEventListener('mousedown', handleClickOutside);
|
|
350
|
-
return
|
|
128
|
+
return () => {
|
|
351
129
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
352
130
|
};
|
|
353
131
|
}, []);
|
|
354
|
-
return
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
showOptional: showOptional,
|
|
358
|
-
showRequired: showRequired,
|
|
359
|
-
error: error
|
|
360
|
-
}, wrapperProps), {
|
|
361
|
-
children: /*#__PURE__*/ _jsx("div", {
|
|
362
|
-
ref: wrapperRef,
|
|
363
|
-
className: "relative w-full",
|
|
364
|
-
children: /*#__PURE__*/ _jsxs(Command, {
|
|
365
|
-
shouldFilter: false,
|
|
366
|
-
onFocus: handleFocus,
|
|
367
|
-
onBlur: handleBlur,
|
|
368
|
-
children: [
|
|
369
|
-
/*#__PURE__*/ _jsx(CommandInput, _object_spread_props(_object_spread({}, selectProps), {
|
|
370
|
-
ref: inputRef,
|
|
371
|
-
placeholder: placeholder,
|
|
372
|
-
value: isFocused ? search : ((_options_find = options.find(function(option) {
|
|
373
|
-
return option.value === value;
|
|
374
|
-
})) === null || _options_find === void 0 ? void 0 : _options_find.label) || '',
|
|
375
|
-
isFocused: isFocused,
|
|
376
|
-
isSelected: !!value,
|
|
377
|
-
onValueChange: handleChange,
|
|
378
|
-
handleToggle: handleToggle,
|
|
379
|
-
handleClear: handleClear
|
|
380
|
-
})),
|
|
381
|
-
/*#__PURE__*/ _jsx(CommandList, {
|
|
382
|
-
ref: listRef,
|
|
383
|
-
children: isFocused && !value && /*#__PURE__*/ _jsxs(_Fragment, {
|
|
384
|
-
children: [
|
|
385
|
-
displayedOptions.length > 0 ? displayedOptions.map(function(option) {
|
|
386
|
-
return /*#__PURE__*/ _jsx(CommandItem, {
|
|
387
|
-
value: JSON.stringify(option.value),
|
|
388
|
-
disabled: option.isDisabled,
|
|
389
|
-
onSelect: function() {
|
|
390
|
-
return handleSelect(option);
|
|
391
|
-
},
|
|
392
|
-
className: "tracking-normal text-primary3 w-full",
|
|
393
|
-
children: option.label
|
|
394
|
-
}, option.label);
|
|
395
|
-
}) : /*#__PURE__*/ _jsx(CommandEmpty, {
|
|
396
|
-
children: noOptionsText || 'No options'
|
|
397
|
-
}),
|
|
398
|
-
filteredOptions.length > 5 && !showAll && /*#__PURE__*/ _jsx(Box, {
|
|
399
|
-
className: cn('text-links text-sm font-bold text-center tracking-wide', 'p-2 items-center'),
|
|
400
|
-
as: "button",
|
|
401
|
-
type: "button",
|
|
402
|
-
onClick: handleShowAll,
|
|
403
|
-
children: showAll ? 'Show less' : 'Show all results'
|
|
404
|
-
}),
|
|
405
|
-
children
|
|
406
|
-
]
|
|
407
|
-
})
|
|
408
|
-
})
|
|
409
|
-
]
|
|
410
|
-
})
|
|
411
|
-
})
|
|
412
|
-
}));
|
|
132
|
+
return (_jsx(FieldWrapper, { htmlFor: htmlFor, label: label, showOptional: showOptional, showRequired: showRequired, error: error, ...wrapperProps, children: _jsx("div", { ref: wrapperRef, className: "relative w-full", children: _jsxs(Command, { shouldFilter: false, onFocus: handleFocus, onBlur: handleBlur, children: [_jsx(CommandInput, { ...selectProps, ref: inputRef, placeholder: placeholder, value: isFocused
|
|
133
|
+
? search
|
|
134
|
+
: options.find((option) => option.value === value)?.label || '', isFocused: isFocused, isSelected: !!value, onValueChange: handleChange, handleToggle: handleToggle, handleClear: handleClear }), _jsx(CommandList, { ref: listRef, children: isFocused && !value && (_jsxs(_Fragment, { children: [displayedOptions.length > 0 ? (displayedOptions.map((option) => (_jsx(CommandItem, { value: JSON.stringify(option.value), disabled: option.isDisabled, onSelect: () => handleSelect(option), className: "tracking-normal text-primary3 w-full", children: option.label }, option.label)))) : (_jsx(CommandEmpty, { children: noOptionsText || 'No options' })), filteredOptions.length > 5 && !showAll && (_jsx(Box, { className: cn('text-links text-sm font-bold text-center tracking-wide', 'p-2 items-center'), as: "button", type: "button", onClick: handleShowAll, children: showAll ? 'Show less' : 'Show all results' })), children] })) })] }) }) }));
|
|
413
135
|
});
|
|
414
136
|
export default SearchInputSelect;
|
|
137
|
+
//# sourceMappingURL=SearchInputSelect.js.map
|