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