@driveflux/beam 3.0.9 → 3.0.10
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 +16 -128
- package/dist/button/Button.js.map +1 -1
- package/dist/button/Button.stories.js +7 -35
- package/dist/button/TextButton.js +11 -106
- package/dist/button/TextButton.js.map +1 -1
- 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.js +90 -234
- package/dist/datepicker/DatePicker.stories.js +58 -163
- package/dist/datepicker/DatePickerDrawer.js +17 -116
- 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/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.js.map +1 -1
- 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,215 +7,112 @@ import FieldWrapper from '../field-wrapper/FieldWrapper';
|
|
|
132
7
|
import IconClose from '../icons/IconClose';
|
|
133
8
|
import IconSelectArrow from '../icons/IconSelectArrow';
|
|
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 gap-2 h-10 w-full border border-primary2 bg-white text-sm cursor-pointer outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium hover:border-black focus-within:border-black focus-within:outline-none rounded-lg', error && 'border-alert4 hover:border-alert4 focus-within:border-alert4', className),
|
|
158
|
-
children: [
|
|
159
|
-
prefix,
|
|
160
|
-
/*#__PURE__*/ _jsx(CommandPrimitive.Input, _object_spread_props(_object_spread({
|
|
161
|
-
className: cn('border-none h-full px-3 outline-hidden text-ellipsis placeholder:text-primary2 placeholder:tracking-normal w-full cursor-pointer disabled:cursor-not-allowed disabled:bg-primary1 disabled:text-primary3 rounded-lg'),
|
|
162
|
-
disabled: props.disabled
|
|
163
|
-
}, props), {
|
|
164
|
-
onClick: function(_e) {
|
|
165
|
-
if (isSelected) {
|
|
166
|
-
isFocused = true;
|
|
167
|
-
} else if (!isFocused) {
|
|
168
|
-
handleToggle();
|
|
169
|
-
}
|
|
12
|
+
const CommandInput = React.forwardRef(({ className, error, prefix, isFocused, isSelected, handleToggle, handleClear, ...props }, ref) => (_jsxs("div", { ref: ref, className: cn('flex items-center gap-2 h-10 w-full border border-primary2 bg-white text-sm cursor-pointer outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium hover:border-black focus-within:border-black focus-within:outline-none rounded-lg', error && 'border-alert4 hover:border-alert4 focus-within:border-alert4', className), children: [prefix, _jsx(CommandPrimitive.Input, { className: cn('border-none h-full px-3 outline-hidden text-ellipsis placeholder:text-primary2 placeholder:tracking-normal w-full cursor-pointer disabled:cursor-not-allowed disabled:bg-primary1 disabled:text-primary3 rounded-lg'), disabled: props.disabled, ...props, onClick: (_e) => {
|
|
13
|
+
if (isSelected) {
|
|
14
|
+
isFocused = true;
|
|
170
15
|
}
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
onClick: function(e) {
|
|
180
|
-
e.preventDefault();
|
|
181
|
-
e.stopPropagation();
|
|
182
|
-
handleClear(e);
|
|
183
|
-
}
|
|
184
|
-
}) : /*#__PURE__*/ _jsx(IconSelectArrow, {
|
|
185
|
-
variant: isFocused ? 'up' : 'down',
|
|
186
|
-
onClick: function() {
|
|
187
|
-
return handleToggle();
|
|
188
|
-
}
|
|
189
|
-
})
|
|
190
|
-
})
|
|
191
|
-
]
|
|
192
|
-
});
|
|
193
|
-
});
|
|
16
|
+
else if (!isFocused) {
|
|
17
|
+
handleToggle();
|
|
18
|
+
}
|
|
19
|
+
} }), !props.disabled && (_jsx(Box, { className: "flex items-center justify-center w-8 h-8 mx-1", style: { pointerEvents: 'auto' }, children: isSelected ? (_jsx(IconClose, { className: "text-black", onClick: (e) => {
|
|
20
|
+
e.preventDefault();
|
|
21
|
+
e.stopPropagation();
|
|
22
|
+
handleClear(e);
|
|
23
|
+
} })) : (_jsx(IconSelectArrow, { variant: isFocused ? 'up' : 'down', onClick: () => handleToggle() })) }))] })));
|
|
194
24
|
CommandInput.displayName = CommandPrimitive.Input.displayName;
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
"className",
|
|
198
|
-
"position"
|
|
199
|
-
]);
|
|
200
|
-
return /*#__PURE__*/ _jsx(CommandPrimitive.List, _object_spread({
|
|
201
|
-
ref: ref,
|
|
202
|
-
className: cn('max-h-80 absolute left-0 right-0 mt-1 shadow-md overflow-y-auto overflow-x-hidden z-50 bg-white rounded-lg', position === 'top' ? 'bottom-full mb-1' : 'top-full mt-1', className)
|
|
203
|
-
}, props));
|
|
25
|
+
const CommandList = React.forwardRef(({ className, position, ...props }, ref) => {
|
|
26
|
+
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-50 bg-white rounded-lg', position === 'top' ? 'bottom-full mb-1' : 'top-full mt-1', className), ...props }));
|
|
204
27
|
});
|
|
205
28
|
CommandList.displayName = CommandPrimitive.List.displayName;
|
|
206
|
-
|
|
207
|
-
return /*#__PURE__*/ _jsx(CommandPrimitive.Empty, _object_spread({
|
|
208
|
-
ref: ref,
|
|
209
|
-
className: "p-4 text-center text-sm text-primary3"
|
|
210
|
-
}, props));
|
|
211
|
-
});
|
|
29
|
+
const CommandEmpty = React.forwardRef((props, ref) => (_jsx(CommandPrimitive.Empty, { ref: ref, className: "p-4 text-center text-sm text-primary3", ...props })));
|
|
212
30
|
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
|
|
213
|
-
|
|
214
|
-
var className = _param.className, props = _object_without_properties(_param, [
|
|
215
|
-
"className"
|
|
216
|
-
]);
|
|
217
|
-
return /*#__PURE__*/ _jsx(CommandPrimitive.Group, _object_spread({
|
|
218
|
-
ref: ref,
|
|
219
|
-
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)
|
|
220
|
-
}, props));
|
|
221
|
-
});
|
|
31
|
+
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 })));
|
|
222
32
|
CommandGroup.displayName = CommandPrimitive.Group.displayName;
|
|
223
|
-
|
|
224
|
-
var className = _param.className, props = _object_without_properties(_param, [
|
|
225
|
-
"className"
|
|
226
|
-
]);
|
|
227
|
-
return /*#__PURE__*/ _jsx(CommandPrimitive.Separator, _object_spread({
|
|
228
|
-
ref: ref,
|
|
229
|
-
className: cn('-mx-1 h-px bg-zinc-200 dark:bg-zinc-800', className)
|
|
230
|
-
}, props));
|
|
231
|
-
});
|
|
33
|
+
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 })));
|
|
232
34
|
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
|
|
233
|
-
|
|
234
|
-
var className = _param.className, props = _object_without_properties(_param, [
|
|
235
|
-
"className"
|
|
236
|
-
]);
|
|
237
|
-
return /*#__PURE__*/ _jsx(CommandPrimitive.Item, _object_spread({
|
|
238
|
-
ref: ref,
|
|
239
|
-
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 dark:data-[selected=true]:bg-zinc-800 dark:data-[selected=true]:text-zinc-50', className)
|
|
240
|
-
}, props));
|
|
241
|
-
});
|
|
35
|
+
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 dark:data-[selected=true]:bg-zinc-800 dark:data-[selected=true]:text-zinc-50', className), ...props })));
|
|
242
36
|
CommandItem.displayName = CommandPrimitive.Item.displayName;
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
"className"
|
|
246
|
-
]);
|
|
247
|
-
return /*#__PURE__*/ _jsx("span", _object_spread({
|
|
248
|
-
className: cn('ml-auto text-xs tracking-widest text-zinc-500 dark:text-zinc-400', className)
|
|
249
|
-
}, props));
|
|
37
|
+
const CommandShortcut = ({ className, ...props }) => {
|
|
38
|
+
return (_jsx("span", { className: cn('ml-auto text-xs tracking-widest text-zinc-500 dark:text-zinc-400', className), ...props }));
|
|
250
39
|
};
|
|
251
40
|
CommandShortcut.displayName = 'CommandShortcut';
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
wrapperProps
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
"placeholder",
|
|
267
|
-
"prefix",
|
|
268
|
-
"options",
|
|
269
|
-
"noOptionsText",
|
|
270
|
-
"onChange",
|
|
271
|
-
"isClearable",
|
|
272
|
-
"isDisabled"
|
|
273
|
-
]);
|
|
274
|
-
var _React_useState = _sliced_to_array(React.useState(false), 2), isFocused = _React_useState[0], setIsFocused = _React_useState[1];
|
|
275
|
-
var _React_useState1 = _sliced_to_array(React.useState(''), 2), search = _React_useState1[0], setSearch = _React_useState1[1];
|
|
276
|
-
var _React_useState2 = _sliced_to_array(React.useState(providedValue), 2), value = _React_useState2[0], setValue = _React_useState2[1];
|
|
277
|
-
var inputRef = React.useRef(null);
|
|
278
|
-
var _listRef = React.useRef(null);
|
|
279
|
-
var wrapperRef = React.useRef(null);
|
|
280
|
-
var _React_useState3 = _sliced_to_array(React.useState('bottom'), 2), position = _React_useState3[0], setPosition = _React_useState3[1];
|
|
281
|
-
var handleFocus = function() {
|
|
41
|
+
const InputSelect = React.forwardRef((props, _ref) => {
|
|
42
|
+
const {
|
|
43
|
+
// for wrapper
|
|
44
|
+
wrapperProps, htmlFor, label, showRequired, showOptional, outerPrefix, outerSuffix, error,
|
|
45
|
+
// for Select
|
|
46
|
+
value: providedValue, placeholder, prefix, options, noOptionsText, onChange, isClearable = true, isDisabled, ...selectProps } = props;
|
|
47
|
+
const [isFocused, setIsFocused] = React.useState(false);
|
|
48
|
+
const [search, setSearch] = React.useState('');
|
|
49
|
+
const [value, setValue] = React.useState(providedValue);
|
|
50
|
+
const inputRef = React.useRef(null);
|
|
51
|
+
const _listRef = React.useRef(null);
|
|
52
|
+
const wrapperRef = React.useRef(null);
|
|
53
|
+
const [position, setPosition] = React.useState('bottom');
|
|
54
|
+
const handleFocus = () => {
|
|
282
55
|
if (!isDisabled) {
|
|
283
56
|
setIsFocused(true);
|
|
284
57
|
}
|
|
285
58
|
};
|
|
286
|
-
|
|
59
|
+
const handleBlur = (e) => {
|
|
287
60
|
if (e.relatedTarget === null) {
|
|
288
|
-
var _inputRef_current;
|
|
289
61
|
setIsFocused(false);
|
|
290
|
-
|
|
62
|
+
inputRef.current?.blur();
|
|
291
63
|
}
|
|
292
64
|
};
|
|
293
|
-
|
|
65
|
+
const handleChange = (value) => {
|
|
294
66
|
setSearch(value);
|
|
295
67
|
};
|
|
296
|
-
|
|
297
|
-
var _inputRef_current;
|
|
68
|
+
const handleSelect = (option) => {
|
|
298
69
|
setSearch(option.label);
|
|
299
|
-
onChange
|
|
70
|
+
onChange?.(option.value);
|
|
300
71
|
setValue(option.value);
|
|
301
72
|
setIsFocused(false);
|
|
302
|
-
|
|
73
|
+
inputRef.current?.focus();
|
|
303
74
|
};
|
|
304
|
-
|
|
75
|
+
const handleToggle = () => {
|
|
305
76
|
if (!isDisabled) {
|
|
306
|
-
setIsFocused(
|
|
307
|
-
|
|
308
|
-
isFocused && ((_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur());
|
|
77
|
+
setIsFocused((isFocused) => {
|
|
78
|
+
isFocused && inputRef.current?.blur();
|
|
309
79
|
return !isFocused;
|
|
310
80
|
});
|
|
311
81
|
}
|
|
312
82
|
};
|
|
313
|
-
|
|
83
|
+
const handleClear = (event) => {
|
|
314
84
|
if (!isDisabled) {
|
|
315
85
|
event.preventDefault();
|
|
316
86
|
event.stopPropagation();
|
|
317
87
|
setSearch('');
|
|
318
88
|
setIsFocused(false);
|
|
319
|
-
onChange
|
|
89
|
+
onChange?.(undefined);
|
|
320
90
|
setValue(undefined);
|
|
321
91
|
}
|
|
322
92
|
};
|
|
323
|
-
|
|
324
|
-
if (wrapperRef.current &&
|
|
93
|
+
const handleClickOutside = (event) => {
|
|
94
|
+
if (wrapperRef.current &&
|
|
95
|
+
!wrapperRef.current.contains(event.target)) {
|
|
325
96
|
setIsFocused(false);
|
|
326
97
|
}
|
|
327
98
|
};
|
|
328
99
|
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
|
329
|
-
React.useEffect(
|
|
100
|
+
React.useEffect(() => {
|
|
330
101
|
document.addEventListener('mousedown', handleClickOutside);
|
|
331
|
-
return
|
|
102
|
+
return () => {
|
|
332
103
|
document.removeEventListener('mousedown', handleClickOutside);
|
|
333
104
|
};
|
|
334
105
|
}, []);
|
|
335
|
-
React.useEffect(
|
|
336
|
-
|
|
106
|
+
React.useEffect(() => {
|
|
107
|
+
const handlePosition = () => {
|
|
337
108
|
if (inputRef && 'current' in inputRef && inputRef.current) {
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
109
|
+
const rect = inputRef.current.getBoundingClientRect();
|
|
110
|
+
const spaceBelow = window.innerHeight - rect.bottom;
|
|
111
|
+
const spaceAbove = rect.top;
|
|
341
112
|
if (spaceAbove > spaceBelow) {
|
|
342
113
|
setPosition('top');
|
|
343
|
-
}
|
|
114
|
+
}
|
|
115
|
+
else {
|
|
344
116
|
setPosition('bottom');
|
|
345
117
|
}
|
|
346
118
|
}
|
|
@@ -348,81 +120,20 @@ var InputSelect = /*#__PURE__*/ React.forwardRef(function(props, _ref) {
|
|
|
348
120
|
handlePosition();
|
|
349
121
|
window.addEventListener('resize', handlePosition);
|
|
350
122
|
window.addEventListener('scroll', handlePosition);
|
|
351
|
-
return
|
|
123
|
+
return () => {
|
|
352
124
|
window.removeEventListener('resize', handlePosition);
|
|
353
125
|
window.removeEventListener('scroll', handlePosition);
|
|
354
126
|
};
|
|
355
127
|
}, []);
|
|
356
|
-
return
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
children: /*#__PURE__*/ _jsx("div", {
|
|
366
|
-
ref: wrapperRef,
|
|
367
|
-
className: "relative w-full",
|
|
368
|
-
children: /*#__PURE__*/ _jsxs(Command, {
|
|
369
|
-
shouldFilter: false,
|
|
370
|
-
onFocus: handleFocus,
|
|
371
|
-
onBlur: handleBlur,
|
|
372
|
-
children: [
|
|
373
|
-
/*#__PURE__*/ _jsx(CommandInput, _object_spread_props(_object_spread({}, selectProps), {
|
|
374
|
-
disabled: isDisabled,
|
|
375
|
-
ref: inputRef,
|
|
376
|
-
placeholder: placeholder,
|
|
377
|
-
value: isFocused ? search : ((_options_find = options.find(function(option) {
|
|
378
|
-
return option.value === value;
|
|
379
|
-
})) === null || _options_find === void 0 ? void 0 : _options_find.label) || '',
|
|
380
|
-
isFocused: isFocused,
|
|
381
|
-
isSelected: !!value,
|
|
382
|
-
prefix: prefix,
|
|
383
|
-
error: !!error,
|
|
384
|
-
onValueChange: handleChange,
|
|
385
|
-
handleToggle: handleToggle,
|
|
386
|
-
handleClear: handleClear
|
|
387
|
-
})),
|
|
388
|
-
/*#__PURE__*/ _jsx(CommandList, {
|
|
389
|
-
position: position,
|
|
390
|
-
children: isFocused && !isDisabled && /*#__PURE__*/ _jsxs(_Fragment, {
|
|
391
|
-
children: [
|
|
392
|
-
options.length > 0 && search ? options.filter(function(option) {
|
|
393
|
-
return option.label.toLowerCase().includes(search.toLowerCase());
|
|
394
|
-
}).map(function(option) {
|
|
395
|
-
return /*#__PURE__*/ _jsx(CommandItem, {
|
|
396
|
-
value: JSON.stringify(option.value),
|
|
397
|
-
disabled: option.isDisabled,
|
|
398
|
-
onSelect: function() {
|
|
399
|
-
return handleSelect(option);
|
|
400
|
-
},
|
|
401
|
-
className: "tracking-normal text-primary3 w-full",
|
|
402
|
-
children: option.label
|
|
403
|
-
}, option.label);
|
|
404
|
-
}) : options.map(function(option) {
|
|
405
|
-
return /*#__PURE__*/ _jsx(CommandItem, {
|
|
406
|
-
value: JSON.stringify(option.value),
|
|
407
|
-
disabled: option.isDisabled,
|
|
408
|
-
onSelect: function() {
|
|
409
|
-
return handleSelect(option);
|
|
410
|
-
},
|
|
411
|
-
className: "tracking-normal text-primary3 w-full",
|
|
412
|
-
children: option.label
|
|
413
|
-
}, option.label);
|
|
414
|
-
}),
|
|
415
|
-
options.filter(function(option) {
|
|
416
|
-
return option.label.toLowerCase().includes(search.toLowerCase());
|
|
417
|
-
}).length === 0 && /*#__PURE__*/ _jsx(CommandEmpty, {
|
|
418
|
-
children: noOptionsText || 'No options'
|
|
419
|
-
})
|
|
420
|
-
]
|
|
421
|
-
})
|
|
422
|
-
})
|
|
423
|
-
]
|
|
424
|
-
})
|
|
425
|
-
})
|
|
426
|
-
}));
|
|
128
|
+
return (_jsx(FieldWrapper, { htmlFor: htmlFor, label: label, showOptional: showOptional, showRequired: showRequired, outerPrefix: outerPrefix, outerSuffix: outerSuffix, 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, disabled: isDisabled, ref: inputRef, placeholder: placeholder, value: isFocused
|
|
129
|
+
? search
|
|
130
|
+
: options.find((option) => option.value === value)?.label || '', isFocused: isFocused, isSelected: !!value, prefix: prefix, error: !!error, onValueChange: handleChange, handleToggle: handleToggle, handleClear: handleClear }), _jsx(CommandList, { position: position, children: isFocused && !isDisabled && (_jsxs(_Fragment, { children: [options.length > 0 && search
|
|
131
|
+
? options
|
|
132
|
+
.filter((option) => option.label
|
|
133
|
+
.toLowerCase()
|
|
134
|
+
.includes(search.toLowerCase()))
|
|
135
|
+
.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)))
|
|
136
|
+
: options.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))), options.filter((option) => option.label.toLowerCase().includes(search.toLowerCase())).length === 0 && (_jsx(CommandEmpty, { children: noOptionsText || 'No options' }))] })) })] }) }) }));
|
|
427
137
|
});
|
|
428
138
|
export default InputSelect;
|
|
139
|
+
//# sourceMappingURL=InputSelect.js.map
|
|
@@ -1,120 +1,47 @@
|
|
|
1
|
-
function _array_like_to_array(arr, len) {
|
|
2
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
3
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
4
|
-
return arr2;
|
|
5
|
-
}
|
|
6
|
-
function _array_without_holes(arr) {
|
|
7
|
-
if (Array.isArray(arr)) return _array_like_to_array(arr);
|
|
8
|
-
}
|
|
9
|
-
function _define_property(obj, key, value) {
|
|
10
|
-
if (key in obj) {
|
|
11
|
-
Object.defineProperty(obj, key, {
|
|
12
|
-
value: value,
|
|
13
|
-
enumerable: true,
|
|
14
|
-
configurable: true,
|
|
15
|
-
writable: true
|
|
16
|
-
});
|
|
17
|
-
} else {
|
|
18
|
-
obj[key] = value;
|
|
19
|
-
}
|
|
20
|
-
return obj;
|
|
21
|
-
}
|
|
22
|
-
function _iterable_to_array(iter) {
|
|
23
|
-
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
24
|
-
}
|
|
25
|
-
function _non_iterable_spread() {
|
|
26
|
-
throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
27
|
-
}
|
|
28
|
-
function _object_spread(target) {
|
|
29
|
-
for(var i = 1; i < arguments.length; i++){
|
|
30
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
31
|
-
var ownKeys = Object.keys(source);
|
|
32
|
-
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
33
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
34
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
35
|
-
}));
|
|
36
|
-
}
|
|
37
|
-
ownKeys.forEach(function(key) {
|
|
38
|
-
_define_property(target, key, source[key]);
|
|
39
|
-
});
|
|
40
|
-
}
|
|
41
|
-
return target;
|
|
42
|
-
}
|
|
43
|
-
function _to_consumable_array(arr) {
|
|
44
|
-
return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
|
|
45
|
-
}
|
|
46
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
47
|
-
if (!o) return;
|
|
48
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
49
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
50
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
51
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
52
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
53
|
-
}
|
|
54
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
55
2
|
import InputSelect from './InputSelect.js';
|
|
56
|
-
|
|
3
|
+
const meta = {
|
|
57
4
|
title: 'Input Select',
|
|
58
|
-
component: InputSelect
|
|
5
|
+
component: InputSelect,
|
|
59
6
|
};
|
|
60
7
|
export default meta;
|
|
61
|
-
export
|
|
8
|
+
export const Demo = {
|
|
62
9
|
args: {
|
|
63
10
|
htmlFor: 'fruits',
|
|
64
11
|
label: 'fruits',
|
|
65
12
|
placeholder: 'Select Fruits',
|
|
66
13
|
options: [
|
|
67
|
-
{
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
label: 'Banana',
|
|
73
|
-
value: 'banana'
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
label: 'Citrus',
|
|
77
|
-
value: 'citrus',
|
|
78
|
-
isDisabled: true
|
|
79
|
-
}
|
|
80
|
-
]
|
|
81
|
-
}
|
|
14
|
+
{ label: 'Apple', value: 'apple' },
|
|
15
|
+
{ label: 'Banana', value: 'banana' },
|
|
16
|
+
{ label: 'Citrus', value: 'citrus', isDisabled: true },
|
|
17
|
+
],
|
|
18
|
+
},
|
|
82
19
|
};
|
|
83
|
-
export
|
|
20
|
+
export const Long = {
|
|
84
21
|
args: {
|
|
85
22
|
htmlFor: 'year',
|
|
86
23
|
label: 'favourite year',
|
|
87
24
|
placeholder: 'Select Your Favourite Year',
|
|
88
|
-
options:
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
})
|
|
94
|
-
}
|
|
25
|
+
options: [...Array(20)].map((_, i) => ({
|
|
26
|
+
label: `${2000 + i}`,
|
|
27
|
+
value: 2000 + 1,
|
|
28
|
+
})),
|
|
29
|
+
},
|
|
95
30
|
};
|
|
96
|
-
export
|
|
31
|
+
export const Empty = {
|
|
97
32
|
args: {
|
|
98
33
|
htmlFor: 'fruits',
|
|
99
34
|
label: 'fruits',
|
|
100
35
|
placeholder: 'Select Fruits',
|
|
101
|
-
options: []
|
|
102
|
-
}
|
|
36
|
+
options: [],
|
|
37
|
+
},
|
|
103
38
|
};
|
|
104
|
-
export
|
|
105
|
-
args:
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
className: "bg-primary1 h-[1000px]"
|
|
112
|
-
}),
|
|
113
|
-
/*#__PURE__*/ _jsx(InputSelect, _object_spread({}, args)),
|
|
114
|
-
/*#__PURE__*/ _jsx("div", {
|
|
115
|
-
className: "bg-primary1 h-[1000px]"
|
|
116
|
-
})
|
|
117
|
-
]
|
|
118
|
-
});
|
|
119
|
-
}
|
|
39
|
+
export const FluidPosition = {
|
|
40
|
+
args: {
|
|
41
|
+
...Long.args,
|
|
42
|
+
},
|
|
43
|
+
render: (args) => {
|
|
44
|
+
return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "bg-primary1 h-[1000px]" }), _jsx(InputSelect, { ...args }), _jsx("div", { className: "bg-primary1 h-[1000px]" })] }));
|
|
45
|
+
},
|
|
120
46
|
};
|
|
47
|
+
//# sourceMappingURL=InputSelect.stories.js.map
|