@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.
Files changed (224) hide show
  1. package/dist/accordion/Accordion.js +7 -133
  2. package/dist/accordion/Accordion.stories.js +11 -31
  3. package/dist/alert/Alert.js +19 -120
  4. package/dist/alert/Alert.stories.js +15 -50
  5. package/dist/animations/LoadingAnimation.js +21 -34
  6. package/dist/badge/Badge.js +7 -96
  7. package/dist/badge/Badge.stories.js +7 -28
  8. package/dist/box/Box.js +3 -87
  9. package/dist/box/Box.stories.js +7 -8
  10. package/dist/breadcrumbs/Breadcrumbs.js +28 -288
  11. package/dist/breadcrumbs/Breadcrumbs.stories.js +27 -51
  12. package/dist/button/Button.js +12 -126
  13. package/dist/button/Button.stories.js +7 -35
  14. package/dist/button/TextButton.js +9 -104
  15. package/dist/card/Card.js +7 -109
  16. package/dist/card/Card.stories.js +7 -10
  17. package/dist/carousel/Carousel.js +58 -281
  18. package/dist/carousel/Carousel.stories.js +7 -39
  19. package/dist/carousel/CarouselButton.js +7 -68
  20. package/dist/center/Center.js +3 -63
  21. package/dist/center/Center.stories.js +7 -19
  22. package/dist/checkbox/Checkbox.js +4 -124
  23. package/dist/checkbox/Checkbox.stories.js +8 -10
  24. package/dist/chip/Chip.js +3 -104
  25. package/dist/chip/Chip.stories.js +7 -19
  26. package/dist/circular-progress/CircularProgress.js +11 -150
  27. package/dist/circular-progress/CircularProgress.stories.js +14 -54
  28. package/dist/command/command.js +13 -170
  29. package/dist/datepicker/DatePicker.d.ts.map +1 -1
  30. package/dist/datepicker/DatePicker.js +91 -235
  31. package/dist/datepicker/DatePicker.js.map +1 -1
  32. package/dist/datepicker/DatePicker.stories.js +58 -163
  33. package/dist/datepicker/DatePicker.stories.js.map +1 -1
  34. package/dist/datepicker/DatePickerDrawer.js +17 -116
  35. package/dist/datepicker/DatePickerDrawer.js.map +1 -1
  36. package/dist/datepicker/DatePickerPopover.js +35 -208
  37. package/dist/datepicker/constants.js +4 -3
  38. package/dist/datepicker/utils.js +11 -4
  39. package/dist/dialog/index.js +33 -180
  40. package/dist/divider/Divider.js +3 -63
  41. package/dist/divider/Divider.stories.js +7 -13
  42. package/dist/drawer/index.js +12 -157
  43. package/dist/dropdown/Dropdown.js +26 -212
  44. package/dist/dropdown/Dropdown.stories.js +22 -109
  45. package/dist/field-wrapper/FieldWrapper.js +3 -139
  46. package/dist/field-wrapper/FieldWrapper.stories.js +28 -124
  47. package/dist/flex/Flex.js +3 -63
  48. package/dist/flex/Flex.stories.js +7 -19
  49. package/dist/grid/Grid.js +3 -63
  50. package/dist/grid/Grid.stories.js +7 -28
  51. package/dist/hooks/use-breakpoint-value.js +14 -77
  52. package/dist/hooks/use-media-query.js +12 -61
  53. package/dist/hstack/HStack.js +3 -63
  54. package/dist/hstack/HStack.stories.js +7 -19
  55. package/dist/icons/FluxLogo.js +9 -213
  56. package/dist/icons/FluxLogoTable.js +5 -109
  57. package/dist/icons/Icon.js +7 -108
  58. package/dist/icons/Icon.stories.js +7 -12
  59. package/dist/icons/Icon24Hours.js +5 -83
  60. package/dist/icons/IconAcceleration.js +4 -72
  61. package/dist/icons/IconAccount.js +4 -72
  62. package/dist/icons/IconApplicant.js +5 -78
  63. package/dist/icons/IconArrow.js +6 -78
  64. package/dist/icons/IconArrowBack.js +4 -72
  65. package/dist/icons/IconArrowForward.js +4 -72
  66. package/dist/icons/IconArrowTopLeft.js +4 -70
  67. package/dist/icons/IconBluesharkProductGuide.js +5 -80
  68. package/dist/icons/IconBolt.js +4 -72
  69. package/dist/icons/IconBriefcase.js +4 -72
  70. package/dist/icons/IconBulb.js +4 -72
  71. package/dist/icons/IconCalendar.js +4 -72
  72. package/dist/icons/IconCalendarArrowBack.js +4 -72
  73. package/dist/icons/IconCalendarArrowForward.js +4 -72
  74. package/dist/icons/IconCalendarDoubleArrowBack.js +4 -72
  75. package/dist/icons/IconCalendarDoubleArrowForward.js +4 -72
  76. package/dist/icons/IconCancel.js +5 -77
  77. package/dist/icons/IconCancelMark.js +4 -72
  78. package/dist/icons/IconCarSUV.js +4 -72
  79. package/dist/icons/IconCarSedan.js +7 -147
  80. package/dist/icons/IconChain.js +5 -79
  81. package/dist/icons/IconCheckmark.js +4 -72
  82. package/dist/icons/IconChevronRight.js +4 -72
  83. package/dist/icons/IconCircle.js +11 -114
  84. package/dist/icons/IconCircleCheckmark.js +5 -77
  85. package/dist/icons/IconCircleError.js +4 -72
  86. package/dist/icons/IconCircleExclamation.js +6 -104
  87. package/dist/icons/IconCircleMark.js +5 -78
  88. package/dist/icons/IconCircleOutline.js +5 -139
  89. package/dist/icons/IconClock.js +5 -80
  90. package/dist/icons/IconClose.js +4 -72
  91. package/dist/icons/IconCollapseAll.js +5 -94
  92. package/dist/icons/IconConcierge.js +5 -79
  93. package/dist/icons/IconConciergeService.js +5 -87
  94. package/dist/icons/IconCreditCard.js +5 -78
  95. package/dist/icons/IconDash.js +4 -72
  96. package/dist/icons/IconDeliver.js +4 -72
  97. package/dist/icons/IconDelivery.js +5 -87
  98. package/dist/icons/IconDetails.js +4 -72
  99. package/dist/icons/IconDot.js +6 -87
  100. package/dist/icons/IconDownload.js +5 -79
  101. package/dist/icons/IconEVCharging.js +5 -79
  102. package/dist/icons/IconElectricCarFuel.js +5 -80
  103. package/dist/icons/IconEllipsis.js +5 -78
  104. package/dist/icons/IconEnvelope.js +4 -72
  105. package/dist/icons/IconExpandAll.js +5 -94
  106. package/dist/icons/IconEye.js +5 -79
  107. package/dist/icons/IconFacebook.js +6 -94
  108. package/dist/icons/IconFilter.js +5 -83
  109. package/dist/icons/IconFlagMalaysia.js +5 -141
  110. package/dist/icons/IconGiveKey.js +5 -79
  111. package/dist/icons/IconGlobe.js +4 -70
  112. package/dist/icons/IconGoogle.js +5 -87
  113. package/dist/icons/IconHome.js +5 -78
  114. package/dist/icons/IconHostAdvertise.js +4 -72
  115. package/dist/icons/IconHostCar.js +4 -75
  116. package/dist/icons/IconHostCash.js +5 -91
  117. package/dist/icons/IconHostHandle.js +4 -70
  118. package/dist/icons/IconHostLocation.js +4 -70
  119. package/dist/icons/IconHostPayment.js +5 -91
  120. package/dist/icons/IconHostService.js +5 -79
  121. package/dist/icons/IconHotDeals.js +4 -72
  122. package/dist/icons/IconInfo.js +5 -77
  123. package/dist/icons/IconInstagram.js +4 -72
  124. package/dist/icons/IconInsurance.js +5 -99
  125. package/dist/icons/IconInternet.js +4 -73
  126. package/dist/icons/IconInventory.js +5 -78
  127. package/dist/icons/IconLaurel.js +5 -101
  128. package/dist/icons/IconLinkedIn.js +4 -72
  129. package/dist/icons/IconLoading.js +4 -78
  130. package/dist/icons/IconLocation.js +5 -80
  131. package/dist/icons/IconLock.js +4 -73
  132. package/dist/icons/IconLogistics.js +4 -72
  133. package/dist/icons/IconMail.js +5 -94
  134. package/dist/icons/IconMember.js +5 -78
  135. package/dist/icons/IconMobilePen.js +5 -83
  136. package/dist/icons/IconMotorcycleMoped.js +5 -78
  137. package/dist/icons/IconNoCost.js +5 -92
  138. package/dist/icons/IconPDF.js +5 -80
  139. package/dist/icons/IconPencil.js +4 -70
  140. package/dist/icons/IconPhone.js +4 -70
  141. package/dist/icons/IconPlus.js +4 -72
  142. package/dist/icons/IconPricing.js +4 -72
  143. package/dist/icons/IconProtected.js +4 -71
  144. package/dist/icons/IconPsychology.js +4 -72
  145. package/dist/icons/IconQuestionTooltip.js +4 -73
  146. package/dist/icons/IconQuote.js +4 -72
  147. package/dist/icons/IconRate.js +4 -71
  148. package/dist/icons/IconRegister.js +5 -99
  149. package/dist/icons/IconReport.js +6 -89
  150. package/dist/icons/IconReturn.js +4 -72
  151. package/dist/icons/IconSearch.js +4 -70
  152. package/dist/icons/IconSecure.js +4 -71
  153. package/dist/icons/IconSecurity.js +4 -73
  154. package/dist/icons/IconSedanOutline.js +5 -159
  155. package/dist/icons/IconSelectArrow.js +6 -78
  156. package/dist/icons/IconSort.js +5 -79
  157. package/dist/icons/IconSortListed.js +5 -95
  158. package/dist/icons/IconSortPriceAscending.js +5 -83
  159. package/dist/icons/IconSortPriceDescending.js +5 -83
  160. package/dist/icons/IconSortYear.js +5 -79
  161. package/dist/icons/IconSpan.js +4 -71
  162. package/dist/icons/IconSpeaker.js +4 -79
  163. package/dist/icons/IconSpecialCar.js +5 -95
  164. package/dist/icons/IconStar.js +7 -92
  165. package/dist/icons/IconStockPhoto.js +5 -95
  166. package/dist/icons/IconSubscription.js +6 -113
  167. package/dist/icons/IconSubscriptions.js +6 -113
  168. package/dist/icons/IconSwap.js +5 -79
  169. package/dist/icons/IconTax.js +4 -72
  170. package/dist/icons/IconThinArrow.js +6 -78
  171. package/dist/icons/IconThumbsdown.js +5 -78
  172. package/dist/icons/IconThumbsup.js +5 -78
  173. package/dist/icons/IconTool.js +4 -72
  174. package/dist/icons/IconTooltip.js +4 -73
  175. package/dist/icons/IconTrash.js +4 -72
  176. package/dist/icons/IconTriangleExclamation.js +4 -72
  177. package/dist/icons/IconTyersBrakes.js +5 -83
  178. package/dist/icons/IconTyre.js +5 -83
  179. package/dist/icons/IconVacancy.js +5 -78
  180. package/dist/icons/IconVolunteer.js +4 -72
  181. package/dist/icons/IconWhatsapp.js +4 -73
  182. package/dist/icons/IconXPlatform.js +4 -72
  183. package/dist/icons/IconZeroEffort.js +5 -77
  184. package/dist/icons/Logo.js +3 -99
  185. package/dist/input/Input.js +11 -125
  186. package/dist/input/Input.stories.js +18 -17
  187. package/dist/input-mask/InputMask.js +11 -149
  188. package/dist/input-mask/InputMask.stories.js +6 -5
  189. package/dist/input-mask/mask-trackers.js +5 -4
  190. package/dist/input-select/InputSelect.js +68 -357
  191. package/dist/input-select/InputSelect.stories.js +25 -98
  192. package/dist/popover/popover.js +4 -72
  193. package/dist/progress/Progress.js +2 -96
  194. package/dist/progress/Progress.stories.js +14 -13
  195. package/dist/radio/Radio.js +4 -163
  196. package/dist/scroll-area/scroll-area.js +5 -113
  197. package/dist/search-input-select/SearchInputSelect.js +69 -346
  198. package/dist/select/Select.js +29 -315
  199. package/dist/select/Select.stories.js +19 -55
  200. package/dist/skeleton/Skeleton.js +3 -62
  201. package/dist/skeleton/Skeleton.stories.js +7 -8
  202. package/dist/slider/Slider.js +5 -106
  203. package/dist/slider/Slider.stories.js +11 -12
  204. package/dist/stack/Stack.js +3 -63
  205. package/dist/stack/Stack.stories.js +7 -19
  206. package/dist/styles.css +1 -1
  207. package/dist/table/Table.js +10 -131
  208. package/dist/table/Table.stories.js +8 -84
  209. package/dist/tabs/Tabs.js +9 -128
  210. package/dist/tabs/Tabs.stories.js +13 -46
  211. package/dist/text/Text.js +6 -88
  212. package/dist/text/Text.stories.js +7 -44
  213. package/dist/toast/Toast.stories.js +14 -66
  214. package/dist/toast/ToastBox.js +29 -77
  215. package/dist/toast/index.js +1 -0
  216. package/dist/toast/sonner.js +6 -66
  217. package/dist/toggle/Toggle.js +7 -116
  218. package/dist/toggle/Toggle.stories.js +8 -10
  219. package/dist/tooltip/Tooltip.js +12 -151
  220. package/dist/tooltip/Tooltip.stories.js +13 -71
  221. package/dist/utils.js +2 -4
  222. package/dist/vstack/VStack.js +3 -63
  223. package/dist/vstack/VStack.stories.js +7 -19
  224. 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
- 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
- });
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
- 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-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
- var CommandList = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
181
- var className = _param.className, props = _object_without_properties(_param, [
182
- "className"
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
- var rect = ref.current.getBoundingClientRect();
189
- var spaceBelow = window.innerHeight - rect.bottom;
190
- var spaceAbove = rect.top;
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
- } else {
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 function() {
40
+ return () => {
202
41
  window.removeEventListener('resize', handlePosition);
203
42
  window.removeEventListener('scroll', handlePosition);
204
43
  };
205
- }, [
206
- ref
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
- var CommandEmpty = /*#__PURE__*/ React.forwardRef(function(props, ref) {
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
- var CommandGroup = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
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
- var CommandSeparator = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
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
- var CommandItem = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
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
- var CommandShortcut = function(_param) {
252
- var className = _param.className, props = _object_without_properties(_param, [
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
- var SearchInputSelect = /*#__PURE__*/ React.forwardRef(function(props, _ref) {
261
- var _options_find;
262
- var // for wrapper
263
- 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-input-search
264
- 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, children = props.children, selectProps = _object_without_properties(props, [
265
- "wrapperProps",
266
- "htmlFor",
267
- "label",
268
- "showRequired",
269
- "showOptional",
270
- "outerPrefix",
271
- "outerSuffix",
272
- "error",
273
- "value",
274
- "placeholder",
275
- "prefix",
276
- "options",
277
- "noOptionsText",
278
- "onChange",
279
- "isClearable",
280
- "children"
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
- var handleBlur = function(e) {
83
+ const handleBlur = (e) => {
302
84
  if (e.relatedTarget === null) {
303
- var _inputRef_current;
304
85
  setIsFocused(false);
305
- (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur();
86
+ inputRef.current?.blur();
306
87
  }
307
88
  };
308
- var handleChange = function(value) {
89
+ const handleChange = (value) => {
309
90
  setSearch(value);
310
91
  };
311
- var handleSelect = function(option) {
312
- var _inputRef_current;
92
+ const handleSelect = (option) => {
313
93
  setSearch(option.label);
314
- onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
94
+ onChange?.(option.value);
315
95
  setValue(option.value);
316
96
  setIsFocused(false);
317
- (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
97
+ inputRef.current?.focus();
318
98
  };
319
- var handleToggle = function() {
320
- setIsFocused(function(isFocused) {
321
- var _inputRef_current;
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
- var handleClear = function(event) {
105
+ const handleClear = (event) => {
327
106
  event.preventDefault();
328
107
  event.stopPropagation();
329
108
  setSearch('');
330
109
  setIsFocused(false);
331
- onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
110
+ onChange?.(undefined);
332
111
  setValue(undefined);
333
112
  };
334
- var handleClickOutside = function(event) {
335
- if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
113
+ const handleClickOutside = (event) => {
114
+ if (wrapperRef.current &&
115
+ !wrapperRef.current.contains(event.target)) {
336
116
  setIsFocused(false);
337
117
  }
338
118
  };
339
- var handleShowAll = function() {
340
- setShowAll(function(prev) {
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(function() {
126
+ React.useEffect(() => {
349
127
  document.addEventListener('mousedown', handleClickOutside);
350
- return function() {
128
+ return () => {
351
129
  document.removeEventListener('mousedown', handleClickOutside);
352
130
  };
353
131
  }, []);
354
- return /*#__PURE__*/ _jsx(FieldWrapper, _object_spread_props(_object_spread({
355
- htmlFor: htmlFor,
356
- label: label,
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