@youngonesworks/ui 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/radioButton/index.d.ts +2 -2
- package/dist/hooks/phone/usePhoneNumberPrefix.d.ts +2 -1
- package/dist/index.cjs +286 -411
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +197 -337
- package/dist/index.js.map +1 -1
- package/dist/jsx-runtime-shim.d.ts +1 -3
- package/dist/utils/formatIcon.d.ts +1 -1
- package/package.json +22 -24
package/dist/index.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use client";
|
|
4
2
|
import * as React$1 from "react";
|
|
5
3
|
import React, { Fragment, cloneElement, createRef, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
|
|
6
4
|
import { IconAlertCircle, IconAlertTriangle, IconArrowNarrowLeft, IconBold, IconCalendar, IconCheck, IconChevronDown, IconChevronLeft, IconChevronRight, IconChevronUp, IconCircleCheck, IconClearFormatting, IconDotsVertical, IconEyeCheck, IconEyeOff, IconFilter, IconHeart, IconHeartFilled, IconItalic, IconList, IconListNumbers, IconMessageDots, IconSearch, IconSelector, IconUnderline, IconX } from "@tabler/icons-react";
|
|
@@ -14,26 +12,22 @@ import { enGB, fr, nl, nlBE } from "date-fns/locale";
|
|
|
14
12
|
import { createPortal } from "react-dom";
|
|
15
13
|
import { Tooltip as Tooltip$1 } from "react-tooltip";
|
|
16
14
|
import phone from "phone";
|
|
17
|
-
import
|
|
15
|
+
import CountryListImport from "country-list-with-dial-code-and-flag";
|
|
18
16
|
import { Placeholder } from "@tiptap/extension-placeholder";
|
|
19
17
|
import { Underline } from "@tiptap/extension-underline";
|
|
20
18
|
import { EditorContent, useEditor } from "@tiptap/react";
|
|
21
19
|
import { StarterKit } from "@tiptap/starter-kit";
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
const jsxs$1 = React$1.createElement;
|
|
26
|
-
const Fragment$2 = React$1.Fragment;
|
|
27
|
-
|
|
20
|
+
React$1.createElement;
|
|
21
|
+
React$1.createElement;
|
|
22
|
+
React$1.Fragment;
|
|
28
23
|
//#endregion
|
|
29
24
|
//#region src/utils/cn.ts
|
|
30
25
|
function cn(...inputs) {
|
|
31
26
|
return twMerge(clsx(inputs));
|
|
32
27
|
}
|
|
33
|
-
|
|
34
28
|
//#endregion
|
|
35
29
|
//#region src/components/unstyledButton/index.tsx
|
|
36
|
-
const UnstyledButton = forwardRef(({ className
|
|
30
|
+
const UnstyledButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("button", {
|
|
37
31
|
type: "button",
|
|
38
32
|
"data-component": "unstyledButton",
|
|
39
33
|
className: cn("appearance-none", className),
|
|
@@ -41,7 +35,6 @@ const UnstyledButton = forwardRef(({ className,...props }, ref) => /* @__PURE__
|
|
|
41
35
|
...props
|
|
42
36
|
}));
|
|
43
37
|
UnstyledButton.displayName = "UnstyledButton";
|
|
44
|
-
|
|
45
38
|
//#endregion
|
|
46
39
|
//#region src/components/accordion/AccordionItem.tsx
|
|
47
40
|
const AccordionItem = ({ controlContent, panelContent, style = "light", border = false, chevronPosition = "left", disabled = false, active = false, endContent, className }) => {
|
|
@@ -87,7 +80,6 @@ const AccordionItem = ({ controlContent, panelContent, style = "light", border =
|
|
|
87
80
|
})]
|
|
88
81
|
}) });
|
|
89
82
|
};
|
|
90
|
-
|
|
91
83
|
//#endregion
|
|
92
84
|
//#region src/components/accordion/AccordionWrapper.tsx
|
|
93
85
|
const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ jsx("div", {
|
|
@@ -96,21 +88,16 @@ const AccordionWrapper = ({ children, className }) => /* @__PURE__ */ jsx("div",
|
|
|
96
88
|
className: cn(className, "flex flex-col gap-2"),
|
|
97
89
|
children
|
|
98
90
|
});
|
|
99
|
-
|
|
100
91
|
//#endregion
|
|
101
92
|
//#region src/hooks/useMergeRefs.ts
|
|
102
93
|
function useMergeRefs(...refs) {
|
|
103
94
|
return useCallback((value) => {
|
|
104
95
|
refs.forEach((ref) => {
|
|
105
|
-
if (typeof ref === "function")
|
|
106
|
-
|
|
107
|
-
} else if (ref) {
|
|
108
|
-
ref.current = value;
|
|
109
|
-
}
|
|
96
|
+
if (typeof ref === "function") ref(value);
|
|
97
|
+
else if (ref) ref.current = value;
|
|
110
98
|
});
|
|
111
99
|
}, [refs]);
|
|
112
100
|
}
|
|
113
|
-
|
|
114
101
|
//#endregion
|
|
115
102
|
//#region src/components/tooltip/index.tsx
|
|
116
103
|
const sizeClasses = {
|
|
@@ -134,15 +121,11 @@ const Tooltip = ({ content, children, passedOpen = false, size = "md", variant =
|
|
|
134
121
|
],
|
|
135
122
|
whileElementsMounted: autoUpdate
|
|
136
123
|
});
|
|
137
|
-
const hover = useHover(context, { move: false });
|
|
138
|
-
const focus = useFocus(context);
|
|
139
|
-
const dismiss = useDismiss(context);
|
|
140
|
-
const role = useRole(context, { role: "tooltip" });
|
|
141
124
|
const { getReferenceProps, getFloatingProps } = useInteractions([
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
role
|
|
125
|
+
useHover(context, { move: false }),
|
|
126
|
+
useFocus(context),
|
|
127
|
+
useDismiss(context),
|
|
128
|
+
useRole(context, { role: "tooltip" })
|
|
146
129
|
]);
|
|
147
130
|
const childRef = children.ref;
|
|
148
131
|
const mergedRef = useMergeRefs(refs.setReference, childRef);
|
|
@@ -203,65 +186,52 @@ const Tooltip = ({ content, children, passedOpen = false, size = "md", variant =
|
|
|
203
186
|
})] });
|
|
204
187
|
};
|
|
205
188
|
Tooltip.displayName = "Tooltip";
|
|
206
|
-
|
|
207
189
|
//#endregion
|
|
208
190
|
//#region src/utils/enums.ts
|
|
209
|
-
let ACTION_ICON_STYLE_VARIANT = /* @__PURE__ */ function(ACTION_ICON_STYLE_VARIANT
|
|
210
|
-
ACTION_ICON_STYLE_VARIANT
|
|
211
|
-
ACTION_ICON_STYLE_VARIANT
|
|
212
|
-
ACTION_ICON_STYLE_VARIANT
|
|
213
|
-
ACTION_ICON_STYLE_VARIANT
|
|
214
|
-
return ACTION_ICON_STYLE_VARIANT
|
|
215
|
-
}({});
|
|
216
|
-
let THEME_ICON_STYLE_VARIANT = /* @__PURE__ */ function(THEME_ICON_STYLE_VARIANT$1) {
|
|
217
|
-
THEME_ICON_STYLE_VARIANT$1["SECONDARY_WITH_BACKGROUND"] = "secondary-with-background";
|
|
218
|
-
return THEME_ICON_STYLE_VARIANT$1;
|
|
219
|
-
}({});
|
|
220
|
-
let COLOR = /* @__PURE__ */ function(COLOR$1) {
|
|
221
|
-
COLOR$1["PRIMARY"] = "primary";
|
|
222
|
-
COLOR$1["BLACK"] = "black";
|
|
223
|
-
COLOR$1["NAVY_BLUE"] = "navy-blue";
|
|
224
|
-
COLOR$1["LIGHT_BLUE"] = "light-blue";
|
|
225
|
-
COLOR$1["LIGHT_BLUE_DISABLED"] = "light-blue-disabled";
|
|
226
|
-
COLOR$1["GREEN"] = "green";
|
|
227
|
-
COLOR$1["GREEN_LIGHT"] = "green-light";
|
|
228
|
-
COLOR$1["SECONDARY"] = "secondary";
|
|
229
|
-
COLOR$1["SECONDARY_LIGHT"] = "secondary-light";
|
|
230
|
-
COLOR$1["ORANGE"] = "orange";
|
|
231
|
-
COLOR$1["ORANGE_LIGHT"] = "orange-light";
|
|
232
|
-
COLOR$1["ACCENT_BLUE"] = "accent-blue";
|
|
233
|
-
COLOR$1["ACCENT_BLUE_LIGHT"] = "accent-blue-light";
|
|
234
|
-
COLOR$1["YELLOW"] = "yellow";
|
|
235
|
-
COLOR$1["CHECK"] = "check";
|
|
236
|
-
COLOR$1["WARNING"] = "warning";
|
|
237
|
-
COLOR$1["ERROR"] = "error";
|
|
238
|
-
COLOR$1["SUCCESS"] = "success";
|
|
239
|
-
COLOR$1["WARNING_LIGHT"] = "warning-light";
|
|
240
|
-
COLOR$1["ULTRA_LIGHT_BLUE"] = "ultra-light-blue";
|
|
241
|
-
COLOR$1["ULTRA_LIGHT_GRAY"] = "ultra-light-gray";
|
|
242
|
-
COLOR$1["ULTRA_LIGHT_BLUE_GRAY"] = "ultra-light-blue-gray";
|
|
243
|
-
COLOR$1["TURQUOISE"] = "turquoise";
|
|
244
|
-
COLOR$1["RED"] = "red";
|
|
245
|
-
COLOR$1["DARK_GRAY"] = "dark-gray";
|
|
246
|
-
COLOR$1["GRAY"] = "gray";
|
|
247
|
-
COLOR$1["WHITE"] = "white";
|
|
248
|
-
COLOR$1["PURPLE"] = "purple";
|
|
249
|
-
COLOR$1["PURPLE_LIGHT"] = "purple-light";
|
|
250
|
-
COLOR$1["NAVY_BLUE_SHADES"] = "navy-blue-shades";
|
|
251
|
-
return COLOR$1;
|
|
191
|
+
let ACTION_ICON_STYLE_VARIANT = /* @__PURE__ */ function(ACTION_ICON_STYLE_VARIANT) {
|
|
192
|
+
ACTION_ICON_STYLE_VARIANT["DEFAULT"] = "default";
|
|
193
|
+
ACTION_ICON_STYLE_VARIANT["TRANSPARENT"] = "transparent";
|
|
194
|
+
ACTION_ICON_STYLE_VARIANT["SMALL"] = "small";
|
|
195
|
+
ACTION_ICON_STYLE_VARIANT["ROUND"] = "round";
|
|
196
|
+
return ACTION_ICON_STYLE_VARIANT;
|
|
252
197
|
}({});
|
|
253
|
-
let
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
REGION$1["UNITED_KINGDOM"] = "gb";
|
|
257
|
-
return REGION$1;
|
|
198
|
+
let THEME_ICON_STYLE_VARIANT = /* @__PURE__ */ function(THEME_ICON_STYLE_VARIANT) {
|
|
199
|
+
THEME_ICON_STYLE_VARIANT["SECONDARY_WITH_BACKGROUND"] = "secondary-with-background";
|
|
200
|
+
return THEME_ICON_STYLE_VARIANT;
|
|
258
201
|
}({});
|
|
259
|
-
let
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
202
|
+
let COLOR = /* @__PURE__ */ function(COLOR) {
|
|
203
|
+
COLOR["PRIMARY"] = "primary";
|
|
204
|
+
COLOR["BLACK"] = "black";
|
|
205
|
+
COLOR["NAVY_BLUE"] = "navy-blue";
|
|
206
|
+
COLOR["LIGHT_BLUE"] = "light-blue";
|
|
207
|
+
COLOR["LIGHT_BLUE_DISABLED"] = "light-blue-disabled";
|
|
208
|
+
COLOR["GREEN"] = "green";
|
|
209
|
+
COLOR["GREEN_LIGHT"] = "green-light";
|
|
210
|
+
COLOR["SECONDARY"] = "secondary";
|
|
211
|
+
COLOR["SECONDARY_LIGHT"] = "secondary-light";
|
|
212
|
+
COLOR["ORANGE"] = "orange";
|
|
213
|
+
COLOR["ORANGE_LIGHT"] = "orange-light";
|
|
214
|
+
COLOR["ACCENT_BLUE"] = "accent-blue";
|
|
215
|
+
COLOR["ACCENT_BLUE_LIGHT"] = "accent-blue-light";
|
|
216
|
+
COLOR["YELLOW"] = "yellow";
|
|
217
|
+
COLOR["CHECK"] = "check";
|
|
218
|
+
COLOR["WARNING"] = "warning";
|
|
219
|
+
COLOR["ERROR"] = "error";
|
|
220
|
+
COLOR["SUCCESS"] = "success";
|
|
221
|
+
COLOR["WARNING_LIGHT"] = "warning-light";
|
|
222
|
+
COLOR["ULTRA_LIGHT_BLUE"] = "ultra-light-blue";
|
|
223
|
+
COLOR["ULTRA_LIGHT_GRAY"] = "ultra-light-gray";
|
|
224
|
+
COLOR["ULTRA_LIGHT_BLUE_GRAY"] = "ultra-light-blue-gray";
|
|
225
|
+
COLOR["TURQUOISE"] = "turquoise";
|
|
226
|
+
COLOR["RED"] = "red";
|
|
227
|
+
COLOR["DARK_GRAY"] = "dark-gray";
|
|
228
|
+
COLOR["GRAY"] = "gray";
|
|
229
|
+
COLOR["WHITE"] = "white";
|
|
230
|
+
COLOR["PURPLE"] = "purple";
|
|
231
|
+
COLOR["PURPLE_LIGHT"] = "purple-light";
|
|
232
|
+
COLOR["NAVY_BLUE_SHADES"] = "navy-blue-shades";
|
|
233
|
+
return COLOR;
|
|
263
234
|
}({});
|
|
264
|
-
|
|
265
235
|
//#endregion
|
|
266
236
|
//#region src/utils/formatIcon.ts
|
|
267
237
|
const globalDefaultFormatAttributes = {};
|
|
@@ -276,13 +246,12 @@ function formatIcon(icon, defaultFormatAttributes) {
|
|
|
276
246
|
...globalDefaultFormatAttributes,
|
|
277
247
|
...defaultFormatAttributes,
|
|
278
248
|
...icon.props,
|
|
279
|
-
|
|
249
|
+
className: clsx(globalDefaultFormatAttributes.className, defaultFormatAttributes.className, icon.props.className)
|
|
280
250
|
});
|
|
281
251
|
}
|
|
282
|
-
|
|
283
252
|
//#endregion
|
|
284
253
|
//#region src/components/actionIcon/index.tsx
|
|
285
|
-
const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className
|
|
254
|
+
const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", icon, type = "button", "data-testid": testId, iconSize = 20, strokeWidth = 1, onClick, className, ...props }) => {
|
|
286
255
|
const variantClassNames = clsx({
|
|
287
256
|
"active:translate-y-[1px] content-center flex items-center justify-center rounded-[4px] border border-gray-200 hover:border-black text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.DEFAULT,
|
|
288
257
|
"active:translate-y-[1px] border-none content-center flex items-center justify-center rounded-[4px] border text-black child:p-10 w-[36px] h-[36px] disabled:text-gray-500": styleVariant === ACTION_ICON_STYLE_VARIANT.TRANSPARENT,
|
|
@@ -312,12 +281,11 @@ const ActionIcon = ({ ref, title, disabled = false, styleVariant = "default", ic
|
|
|
312
281
|
}) });
|
|
313
282
|
};
|
|
314
283
|
ActionIcon.displayName = "ActionIcon";
|
|
315
|
-
|
|
316
284
|
//#endregion
|
|
317
285
|
//#region src/components/alert/index.tsx
|
|
318
|
-
const Alert = ({ show, title, description, type = "warning", button, plain = false, closable = false, className, icon, onClose
|
|
286
|
+
const Alert = ({ show, title, description, type = "warning", button, plain = false, closable = false, className, icon, onClose, ...props }) => {
|
|
319
287
|
if (!show || !title) return null;
|
|
320
|
-
const
|
|
288
|
+
const { bg, iconColor, Icon } = {
|
|
321
289
|
success: {
|
|
322
290
|
bg: "bg-green-light",
|
|
323
291
|
iconColor: "text-green",
|
|
@@ -333,10 +301,8 @@ const Alert = ({ show, title, description, type = "warning", button, plain = fal
|
|
|
333
301
|
iconColor: "text-red-500",
|
|
334
302
|
Icon: IconAlertCircle
|
|
335
303
|
}
|
|
336
|
-
};
|
|
337
|
-
const
|
|
338
|
-
const { bg, iconColor, Icon } = config;
|
|
339
|
-
const descriptionId = description ? "alert-desc" : undefined;
|
|
304
|
+
}[type];
|
|
305
|
+
const descriptionId = description ? "alert-desc" : void 0;
|
|
340
306
|
return /* @__PURE__ */ jsxs("div", {
|
|
341
307
|
role: "alert",
|
|
342
308
|
"aria-live": "assertive",
|
|
@@ -390,7 +356,6 @@ const Alert = ({ show, title, description, type = "warning", button, plain = fal
|
|
|
390
356
|
});
|
|
391
357
|
};
|
|
392
358
|
Alert.displayName = "Alert";
|
|
393
|
-
|
|
394
359
|
//#endregion
|
|
395
360
|
//#region src/components/appleAppButtonIcon/index.tsx
|
|
396
361
|
const AppleAppButtonIcon = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
@@ -531,10 +496,9 @@ const AppleAppButtonIcon = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
|
531
496
|
})
|
|
532
497
|
}) })]
|
|
533
498
|
});
|
|
534
|
-
|
|
535
499
|
//#endregion
|
|
536
500
|
//#region src/icons/IconLoading.tsx
|
|
537
|
-
const IconLoading = ({ className
|
|
501
|
+
const IconLoading = ({ className, ...props }) => /* @__PURE__ */ jsxs("svg", {
|
|
538
502
|
"data-component": "button",
|
|
539
503
|
"data-testid": "loading-svg-button",
|
|
540
504
|
viewBox: "0 0 256 256",
|
|
@@ -618,10 +582,9 @@ const IconLoading = ({ className,...props }) => /* @__PURE__ */ jsxs("svg", {
|
|
|
618
582
|
})
|
|
619
583
|
]
|
|
620
584
|
});
|
|
621
|
-
|
|
622
585
|
//#endregion
|
|
623
586
|
//#region src/components/textInput/index.tsx
|
|
624
|
-
const TextInput = React.forwardRef(({ rightSection, leftSection, className, error, autoFocus, label, maxLength, enablePasswordManagerAutofill = false, onBlur, disabled, loadingState, onKeyDown, min = "0", max, autoComplete, showRightSection = true, step, wrapperClassName, password = false
|
|
587
|
+
const TextInput = React.forwardRef(({ rightSection, leftSection, className, error, autoFocus, label, maxLength, enablePasswordManagerAutofill = false, onBlur, disabled, loadingState, onKeyDown, min = "0", max, autoComplete, showRightSection = true, step, wrapperClassName, password = false, ...props }, ref) => {
|
|
625
588
|
const [showPassword, setShowPassword] = React.useState(false);
|
|
626
589
|
return /* @__PURE__ */ jsxs("div", {
|
|
627
590
|
"data-component": "TextInput",
|
|
@@ -651,9 +614,9 @@ const TextInput = React.forwardRef(({ rightSection, leftSection, className, erro
|
|
|
651
614
|
step,
|
|
652
615
|
maxLength,
|
|
653
616
|
className: clsx(`${loadingState ? "cursor-not-allowed" : ""}`, `${disabled ? "text-gray-500" : "text-gray-900"} selection:bg-turquoise-200 focus:border-turquoise-500 focus:ring-turquoise-500 active:border-turquoise-500 active:ring-turquoise-500 h-10 w-full rounded-[4px] border border-gray-200 bg-ultra-light-gray px-3 text-sm font-normal outline-hidden ${rightSection && "pr-12"} ${leftSection && "pl-12"} ${error && "border-red-500 text-red-500 selection:bg-red-200 focus:border-red-500 focus:ring-red-500 focus:placeholder:text-red-500 active:border-red-500 active:ring-red-500"}`, className),
|
|
654
|
-
"aria-busy": loadingState ||
|
|
655
|
-
"data-lpignore": enablePasswordManagerAutofill ?
|
|
656
|
-
"data-1p-ignore": enablePasswordManagerAutofill ?
|
|
617
|
+
"aria-busy": loadingState || void 0,
|
|
618
|
+
"data-lpignore": enablePasswordManagerAutofill ? void 0 : "true",
|
|
619
|
+
"data-1p-ignore": enablePasswordManagerAutofill ? void 0 : "true",
|
|
657
620
|
ref,
|
|
658
621
|
...props,
|
|
659
622
|
type: password ? showPassword ? "text" : "password" : "text"
|
|
@@ -691,7 +654,6 @@ const TextInput = React.forwardRef(({ rightSection, leftSection, className, erro
|
|
|
691
654
|
]
|
|
692
655
|
});
|
|
693
656
|
});
|
|
694
|
-
|
|
695
657
|
//#endregion
|
|
696
658
|
//#region src/components/autoCompleteInput/index.tsx
|
|
697
659
|
const AutoCompleteInput = ({ label, onChange, onFocus, inputValue, showSuggestions, handleOnKeyDown, children, error, rightSection, inputRef }) => /* @__PURE__ */ jsxs("div", {
|
|
@@ -712,7 +674,6 @@ const AutoCompleteInput = ({ label, onChange, onFocus, inputValue, showSuggestio
|
|
|
712
674
|
"aria-controls": "suggestions-googlemaps-location-list"
|
|
713
675
|
}), showSuggestions && inputValue && children]
|
|
714
676
|
});
|
|
715
|
-
|
|
716
677
|
//#endregion
|
|
717
678
|
//#region src/components/avatar/index.tsx
|
|
718
679
|
const radiusFormatter = {
|
|
@@ -738,10 +699,9 @@ const Avatar = ({ src, alt = "", size = 50, radius = 100, "data-testid": dataTes
|
|
|
738
699
|
})
|
|
739
700
|
});
|
|
740
701
|
Avatar.displayName = "Avatar";
|
|
741
|
-
|
|
742
702
|
//#endregion
|
|
743
703
|
//#region src/components/avatarIndicator/index.tsx
|
|
744
|
-
const AvatarIndicator = ({ indicatorCount, className
|
|
704
|
+
const AvatarIndicator = ({ indicatorCount, className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
745
705
|
className: cn("grid h-5 min-w-5 w-fit flex-col place-content-center items-center justify-center rounded-full bg-white px-0.5", className),
|
|
746
706
|
"data-component": "AvatarIndicator",
|
|
747
707
|
"data-testid": "AvatarIndicator",
|
|
@@ -751,10 +711,9 @@ const AvatarIndicator = ({ indicatorCount, className,...props }) => /* @__PURE__
|
|
|
751
711
|
children: `+${indicatorCount}`
|
|
752
712
|
})
|
|
753
713
|
});
|
|
754
|
-
|
|
755
714
|
//#endregion
|
|
756
715
|
//#region src/components/badge/index.tsx
|
|
757
|
-
const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, children
|
|
716
|
+
const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, children, ...props }) => {
|
|
758
717
|
if (!children) return null;
|
|
759
718
|
return /* @__PURE__ */ jsx("span", {
|
|
760
719
|
"data-testid": "badge",
|
|
@@ -781,10 +740,9 @@ const Badge = ({ styleVariant = COLOR.ACCENT_BLUE, className, favorite, children
|
|
|
781
740
|
});
|
|
782
741
|
};
|
|
783
742
|
Badge.displayName = "Badge";
|
|
784
|
-
|
|
785
743
|
//#endregion
|
|
786
744
|
//#region src/components/bigBadge/index.tsx
|
|
787
|
-
const BigBadge = ({ styleVariant = COLOR.GREEN, className, children
|
|
745
|
+
const BigBadge = ({ styleVariant = COLOR.GREEN, className, children, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
788
746
|
"data-component": "BigBadge",
|
|
789
747
|
"data-testid": "big-badge",
|
|
790
748
|
className: cn("grid h-9 max-w-full min-w-[140px] place-content-center rounded-full border border-solid px-6 py-1 text-sm font-medium whitespace-nowrap lowercase", {
|
|
@@ -800,7 +758,6 @@ const BigBadge = ({ styleVariant = COLOR.GREEN, className, children,...props })
|
|
|
800
758
|
...props,
|
|
801
759
|
children
|
|
802
760
|
});
|
|
803
|
-
|
|
804
761
|
//#endregion
|
|
805
762
|
//#region src/components/breadCrumb/index.tsx
|
|
806
763
|
const BreadCrumb = ({ children, LinkText }) => /* @__PURE__ */ jsx(LinkText, {
|
|
@@ -812,7 +769,6 @@ const BreadCrumb = ({ children, LinkText }) => /* @__PURE__ */ jsx(LinkText, {
|
|
|
812
769
|
})] })
|
|
813
770
|
});
|
|
814
771
|
BreadCrumb.displayName = "BreadCrumb";
|
|
815
|
-
|
|
816
772
|
//#endregion
|
|
817
773
|
//#region src/components/button/buttonVariants.ts
|
|
818
774
|
const defaultButtonStyling = "justify-center group relative flex items-center gap-2 cursor-pointer border rounded py-2 px-5 text-sx md:text-sm md:font-medium font-medium hover:outline-hidden focus:outline-hidden disabled:cursor-not-allowed transition-colors duration-100 ease-in-out";
|
|
@@ -827,10 +783,9 @@ const buttonVariants = {
|
|
|
827
783
|
icon__danger: clsx(defaultButtonStyling, "flex! items-center justify-center"),
|
|
828
784
|
action: clsx(defaultButtonStyling, "w-full bg-transparent border border-gray-200 whitespace-nowrap", "lg:w-[36px] lg:h-[36px]", "lg:p-0 lg:gap-0", "lg:hover:bg-transparent lg:hover:border-black", "lg:[&_svg]:-ml-2 lg:[&_svg]:-mr-2")
|
|
829
785
|
};
|
|
830
|
-
|
|
831
786
|
//#endregion
|
|
832
787
|
//#region src/components/button/index.tsx
|
|
833
|
-
function Button({ type = "button", variant = "primary", ariaLabel, block = false, isLoading = false, icon: iconFromProps = null, iconRight = false, onClick, className, children, dataTestId
|
|
788
|
+
function Button({ type = "button", variant = "primary", ariaLabel, block = false, isLoading = false, icon: iconFromProps = null, iconRight = false, onClick, className, children, dataTestId, ...props }) {
|
|
834
789
|
const loadingIcon = /* @__PURE__ */ jsx(IconLoading, { className: "animate-spin-slow mr-2 stroke-current" });
|
|
835
790
|
const icon = isLoading ? loadingIcon : iconFromProps;
|
|
836
791
|
const formattedIcon = icon ? formatIcon(icon, { className: clsx({
|
|
@@ -855,10 +810,9 @@ function Button({ type = "button", variant = "primary", ariaLabel, block = false
|
|
|
855
810
|
});
|
|
856
811
|
}
|
|
857
812
|
Button.displayName = "Button";
|
|
858
|
-
|
|
859
813
|
//#endregion
|
|
860
814
|
//#region src/components/checkbox/index.tsx
|
|
861
|
-
const CheckboxComponent = ({ size = "md", className, error, mediumBoldText, label, labelClassName, indeterminate = false, disabled = false
|
|
815
|
+
const CheckboxComponent = ({ size = "md", className, error, mediumBoldText, label, labelClassName, indeterminate = false, disabled = false, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
|
|
862
816
|
"data-testid": "checkbox-wrapper",
|
|
863
817
|
className: cn("relative grid gap-2", className),
|
|
864
818
|
children: [/* @__PURE__ */ jsxs("label", {
|
|
@@ -916,7 +870,6 @@ const CheckboxComponent = ({ size = "md", className, error, mediumBoldText, labe
|
|
|
916
870
|
})]
|
|
917
871
|
});
|
|
918
872
|
const Checkbox = forwardRef(CheckboxComponent);
|
|
919
|
-
|
|
920
873
|
//#endregion
|
|
921
874
|
//#region src/components/popover/index.tsx
|
|
922
875
|
const Popover = forwardRef(({ content, children, hoverEnabled = false, passedOpen = false, placement = "right", style = "card", isMobile = false, className }, ref) => {
|
|
@@ -942,16 +895,13 @@ const Popover = forwardRef(({ content, children, hoverEnabled = false, passedOpe
|
|
|
942
895
|
});
|
|
943
896
|
const focus = useFocus(context);
|
|
944
897
|
const hover = useHover(context, { enabled: hoverEnabled });
|
|
945
|
-
const
|
|
946
|
-
const role = useRole(context, { role: "tooltip" });
|
|
947
|
-
const interactions = [
|
|
898
|
+
const { getReferenceProps, getFloatingProps } = useInteractions([
|
|
948
899
|
click,
|
|
949
900
|
focus,
|
|
950
|
-
|
|
951
|
-
role,
|
|
901
|
+
useDismiss(context),
|
|
902
|
+
useRole(context, { role: "tooltip" }),
|
|
952
903
|
hover
|
|
953
|
-
];
|
|
954
|
-
const { getReferenceProps, getFloatingProps } = useInteractions(interactions);
|
|
904
|
+
]);
|
|
955
905
|
useImperativeHandle(ref, () => ({
|
|
956
906
|
closePopover: () => setIsOpen(false),
|
|
957
907
|
openPopover: () => setIsOpen(true),
|
|
@@ -992,12 +942,11 @@ const Popover = forwardRef(({ content, children, hoverEnabled = false, passedOpe
|
|
|
992
942
|
})]
|
|
993
943
|
});
|
|
994
944
|
});
|
|
995
|
-
|
|
996
945
|
//#endregion
|
|
997
946
|
//#region src/components/datePickerInput/index.tsx
|
|
998
947
|
const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil, className, error, onChange, placeholder, label, disabled, minimalDropdownYears = 4 }) => {
|
|
999
948
|
const [selected, setSelected] = useState(value);
|
|
1000
|
-
const today = new Date();
|
|
949
|
+
const today = /* @__PURE__ */ new Date();
|
|
1001
950
|
const [newMonth, setNewMonth] = useState(selected || today);
|
|
1002
951
|
const [dropdownOpened, setDropdownOpened] = useState({
|
|
1003
952
|
month: false,
|
|
@@ -1076,9 +1025,9 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
|
|
|
1076
1025
|
fixedWeeks: true,
|
|
1077
1026
|
endMonth: addMonths(today, 13),
|
|
1078
1027
|
captionLayout: "dropdown",
|
|
1079
|
-
onMonthChange: (newMonth
|
|
1028
|
+
onMonthChange: (newMonth) => setNewMonth(newMonth),
|
|
1080
1029
|
showOutsideDays: true,
|
|
1081
|
-
disabled: disabledFrom ? { before: disabledFrom } : disabledUntil ? { after: disabledUntil } :
|
|
1030
|
+
disabled: disabledFrom ? { before: disabledFrom } : disabledUntil ? { after: disabledUntil } : void 0,
|
|
1082
1031
|
className,
|
|
1083
1032
|
classNames: {
|
|
1084
1033
|
month_grid: "mt-3 max-w-[400px] border-t border-gray-100",
|
|
@@ -1101,7 +1050,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
|
|
|
1101
1050
|
},
|
|
1102
1051
|
components: {
|
|
1103
1052
|
DayButton: (props) => {
|
|
1104
|
-
const { day
|
|
1053
|
+
const { day, ...buttonProps } = props;
|
|
1105
1054
|
const { goToMonth } = useDayPicker();
|
|
1106
1055
|
return /* @__PURE__ */ jsx("button", {
|
|
1107
1056
|
type: "button",
|
|
@@ -1116,7 +1065,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
|
|
|
1116
1065
|
Dropdown: (props) => {
|
|
1117
1066
|
const { goToMonth, months } = useDayPicker();
|
|
1118
1067
|
const { className: dropdownClassName } = props;
|
|
1119
|
-
const today
|
|
1068
|
+
const today = /* @__PURE__ */ new Date();
|
|
1120
1069
|
/* istanbul ignore next - react-day-picker may not pass this className in our test env */
|
|
1121
1070
|
if (dropdownClassName === "rdp-months_dropdown") {
|
|
1122
1071
|
const selectedYear = newMonth.getFullYear();
|
|
@@ -1142,8 +1091,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
|
|
|
1142
1091
|
className: "shadow-dropdown absolute z-70 rounded-md border border-gray-50 bg-white",
|
|
1143
1092
|
children: selectItems.map((item) => /* @__PURE__ */ jsx("div", {
|
|
1144
1093
|
onClick: () => {
|
|
1145
|
-
|
|
1146
|
-
goToMonth(newDate);
|
|
1094
|
+
goToMonth(new Date(selectedYear, parseInt(item.value)));
|
|
1147
1095
|
setDropdownOpened({
|
|
1148
1096
|
month: false,
|
|
1149
1097
|
year: false
|
|
@@ -1158,14 +1106,14 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
|
|
|
1158
1106
|
type: "button",
|
|
1159
1107
|
className: "absolute top-4 right-4 z-10 h-8 px-3 text-xs font-normal",
|
|
1160
1108
|
onClick: () => {
|
|
1161
|
-
goToMonth(today
|
|
1162
|
-
handleDayClick(today
|
|
1109
|
+
goToMonth(today);
|
|
1110
|
+
handleDayClick(today);
|
|
1163
1111
|
},
|
|
1164
1112
|
children: todayText
|
|
1165
1113
|
})] });
|
|
1166
1114
|
} else if (dropdownClassName === "rdp-years_dropdown") {
|
|
1167
|
-
const earliestYear = new Date().getFullYear() - minimalDropdownYears;
|
|
1168
|
-
const latestYear = new Date().getFullYear() + 1;
|
|
1115
|
+
const earliestYear = (/* @__PURE__ */ new Date()).getFullYear() - minimalDropdownYears;
|
|
1116
|
+
const latestYear = (/* @__PURE__ */ new Date()).getFullYear() + 1;
|
|
1169
1117
|
/* istanbul ignore else - defensive guard will always be truthy */
|
|
1170
1118
|
if (earliestYear && latestYear) {
|
|
1171
1119
|
const years = Array.from({ length: latestYear - earliestYear + 1 }, (_, i) => earliestYear + i).reverse();
|
|
@@ -1184,7 +1132,7 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
|
|
|
1184
1132
|
className: "shadow-dropdown absolute z-70 rounded-md border border-gray-50 bg-white max-h-64 overflow-y-auto",
|
|
1185
1133
|
children: years.map((year) => /* @__PURE__ */ jsx("div", {
|
|
1186
1134
|
onClick: () => {
|
|
1187
|
-
const newDate = months?.[0].date || new Date();
|
|
1135
|
+
const newDate = months?.[0].date || /* @__PURE__ */ new Date();
|
|
1188
1136
|
newDate.setFullYear(year);
|
|
1189
1137
|
goToMonth(newDate);
|
|
1190
1138
|
setDropdownOpened({
|
|
@@ -1229,20 +1177,20 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
|
|
|
1229
1177
|
className: "text-sm font-normal text-nowrap text-black",
|
|
1230
1178
|
children: selected ? selected.toLocaleDateString() : placeholder
|
|
1231
1179
|
}),
|
|
1232
|
-
selected !==
|
|
1180
|
+
selected !== void 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", {
|
|
1233
1181
|
className: "cursor-pointer text-sm font-normal text-gray-800",
|
|
1234
1182
|
role: "button",
|
|
1235
1183
|
"aria-label": "Clear date",
|
|
1236
1184
|
tabIndex: 0,
|
|
1237
1185
|
onClick: () => {
|
|
1238
|
-
setSelected(
|
|
1239
|
-
onChange?.(
|
|
1186
|
+
setSelected(void 0);
|
|
1187
|
+
onChange?.(void 0);
|
|
1240
1188
|
},
|
|
1241
1189
|
onKeyDown: (e) => {
|
|
1242
1190
|
if (e.key === "Enter" || e.key === " ") {
|
|
1243
1191
|
e.preventDefault();
|
|
1244
|
-
setSelected(
|
|
1245
|
-
onChange?.(
|
|
1192
|
+
setSelected(void 0);
|
|
1193
|
+
onChange?.(void 0);
|
|
1246
1194
|
}
|
|
1247
1195
|
},
|
|
1248
1196
|
children: /* @__PURE__ */ jsx(IconX, { size: 15 })
|
|
@@ -1257,19 +1205,17 @@ const DatePickerInput = ({ lang, todayText, value, disabledFrom, disabledUntil,
|
|
|
1257
1205
|
})
|
|
1258
1206
|
});
|
|
1259
1207
|
};
|
|
1260
|
-
|
|
1261
1208
|
//#endregion
|
|
1262
1209
|
//#region src/components/divider/index.tsx
|
|
1263
|
-
const Divider = ({ className
|
|
1210
|
+
const Divider = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
1264
1211
|
"data-component": "divider",
|
|
1265
1212
|
className: clsx("block h-px w-full bg-gray-200", className),
|
|
1266
1213
|
...props
|
|
1267
1214
|
});
|
|
1268
|
-
|
|
1269
1215
|
//#endregion
|
|
1270
1216
|
//#region src/components/favouriteButton/index.tsx
|
|
1271
1217
|
const FavouriteButton = forwardRef((props, ref) => {
|
|
1272
|
-
const { onClick, favourite, iconFilled, iconOutline, favouriteTitle, iconColorSelected = "text-secondary", iconColor = "text-gray-800", iconSize, className = "", styleVariant = "transparent", children
|
|
1218
|
+
const { onClick, favourite, iconFilled, iconOutline, favouriteTitle, iconColorSelected = "text-secondary", iconColor = "text-gray-800", iconSize, className = "", styleVariant = "transparent", children, ...rest } = props;
|
|
1273
1219
|
return /* @__PURE__ */ jsx(ActionIcon, {
|
|
1274
1220
|
onClick,
|
|
1275
1221
|
"data-component": "favouriteButton",
|
|
@@ -1283,7 +1229,6 @@ const FavouriteButton = forwardRef((props, ref) => {
|
|
|
1283
1229
|
children
|
|
1284
1230
|
});
|
|
1285
1231
|
});
|
|
1286
|
-
|
|
1287
1232
|
//#endregion
|
|
1288
1233
|
//#region src/components/filters/FilterButton.tsx
|
|
1289
1234
|
const FilterButton = ({ onClick, hasFilters, reset, filtersText, resetText }) => /* @__PURE__ */ jsxs("div", {
|
|
@@ -1302,7 +1247,6 @@ const FilterButton = ({ onClick, hasFilters, reset, filtersText, resetText }) =>
|
|
|
1302
1247
|
children: resetText
|
|
1303
1248
|
})]
|
|
1304
1249
|
});
|
|
1305
|
-
|
|
1306
1250
|
//#endregion
|
|
1307
1251
|
//#region src/components/filters/FilterItem.tsx
|
|
1308
1252
|
const FilterItem = ({ title, isActive = false, onClick }) => /* @__PURE__ */ jsxs("label", {
|
|
@@ -1314,7 +1258,6 @@ const FilterItem = ({ title, isActive = false, onClick }) => /* @__PURE__ */ jsx
|
|
|
1314
1258
|
checked: isActive
|
|
1315
1259
|
}), title]
|
|
1316
1260
|
});
|
|
1317
|
-
|
|
1318
1261
|
//#endregion
|
|
1319
1262
|
//#region src/components/filters/index.tsx
|
|
1320
1263
|
const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, filtersText, resetText }) => {
|
|
@@ -1360,7 +1303,6 @@ const Filters = ({ filters, setFilters, selectedFilters, selectedFiltersText, fi
|
|
|
1360
1303
|
})]
|
|
1361
1304
|
});
|
|
1362
1305
|
};
|
|
1363
|
-
|
|
1364
1306
|
//#endregion
|
|
1365
1307
|
//#region src/components/googleAppButtonIcon/index.tsx
|
|
1366
1308
|
const GoogleAppButtonIcon = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
@@ -1552,7 +1494,6 @@ const GoogleAppButtonIcon = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
|
1552
1494
|
]
|
|
1553
1495
|
})]
|
|
1554
1496
|
});
|
|
1555
|
-
|
|
1556
1497
|
//#endregion
|
|
1557
1498
|
//#region src/components/hamburgerMenuButton/index.tsx
|
|
1558
1499
|
const HamburgerMenuButton = forwardRef(({ menuState, setMenuState }, ref) => {
|
|
@@ -1581,7 +1522,6 @@ const HamburgerMenuButton = forwardRef(({ menuState, setMenuState }, ref) => {
|
|
|
1581
1522
|
});
|
|
1582
1523
|
});
|
|
1583
1524
|
HamburgerMenuButton.displayName = "HamburgerMenuButton";
|
|
1584
|
-
|
|
1585
1525
|
//#endregion
|
|
1586
1526
|
//#region src/components/hr/index.tsx
|
|
1587
1527
|
const HR = ({ className }) => /* @__PURE__ */ jsx("hr", {
|
|
@@ -1589,10 +1529,9 @@ const HR = ({ className }) => /* @__PURE__ */ jsx("hr", {
|
|
|
1589
1529
|
className: `h-px w-full border-none bg-gray-200 ${className}`
|
|
1590
1530
|
});
|
|
1591
1531
|
HR.displayName = "HR";
|
|
1592
|
-
|
|
1593
1532
|
//#endregion
|
|
1594
1533
|
//#region src/components/island/index.tsx
|
|
1595
|
-
const Island = ({ children, className, noShadow = false, noPadding = false
|
|
1534
|
+
const Island = ({ children, className, noShadow = false, noPadding = false, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
1596
1535
|
"data-testid": "island",
|
|
1597
1536
|
"data-component": "island",
|
|
1598
1537
|
className: cn("relative bg-white px-5 py-5 md:px-10 md:py-9", {
|
|
@@ -1604,7 +1543,6 @@ const Island = ({ children, className, noShadow = false, noPadding = false,...pr
|
|
|
1604
1543
|
children
|
|
1605
1544
|
});
|
|
1606
1545
|
Island.displayName = "Island";
|
|
1607
|
-
|
|
1608
1546
|
//#endregion
|
|
1609
1547
|
//#region src/components/kebabMenu/index.tsx
|
|
1610
1548
|
const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "default" }) => {
|
|
@@ -1667,7 +1605,7 @@ const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "
|
|
|
1667
1605
|
children: /* @__PURE__ */ jsx("div", {
|
|
1668
1606
|
className: "absolute right-0 z-10 mt-2 w-auto min-w-[200px] rounded-md border-[0.0625rem] border-gray-200 bg-white p-1 shadow-md",
|
|
1669
1607
|
children: content.map((c, index) => {
|
|
1670
|
-
const button
|
|
1608
|
+
const button = /* @__PURE__ */ jsx(UnstyledButton, {
|
|
1671
1609
|
onClick: () => handleItemClick(c.onClick),
|
|
1672
1610
|
className: "w-full rounded-md px-4 py-2 text-left text-sm font-normal whitespace-nowrap hover:bg-gray-50",
|
|
1673
1611
|
"aria-label": "Options Menu Item",
|
|
@@ -1678,25 +1616,23 @@ const KebabMenu = ({ title, tooltip, content, disabled = false, styleVariant = "
|
|
|
1678
1616
|
passedOpen: false,
|
|
1679
1617
|
size: "sm",
|
|
1680
1618
|
content: c.tooltip,
|
|
1681
|
-
children: button
|
|
1682
|
-
}, index) : /* @__PURE__ */ jsx(Fragment, { children: button
|
|
1619
|
+
children: button
|
|
1620
|
+
}, index) : /* @__PURE__ */ jsx(Fragment, { children: button }, index);
|
|
1683
1621
|
})
|
|
1684
1622
|
})
|
|
1685
1623
|
})]
|
|
1686
1624
|
}) });
|
|
1687
1625
|
};
|
|
1688
1626
|
KebabMenu.displayName = "KebabMenu";
|
|
1689
|
-
|
|
1690
1627
|
//#endregion
|
|
1691
1628
|
//#region src/components/label/index.tsx
|
|
1692
|
-
const Label = ({ children, className
|
|
1629
|
+
const Label = ({ children, className, ...props }) => /* @__PURE__ */ jsx("label", {
|
|
1693
1630
|
"data-component": "label",
|
|
1694
1631
|
"data-testid": "label",
|
|
1695
1632
|
className: cn("flex items-center gap-1 text-xs font-medium text-black", className),
|
|
1696
1633
|
...props,
|
|
1697
1634
|
children
|
|
1698
1635
|
});
|
|
1699
|
-
|
|
1700
1636
|
//#endregion
|
|
1701
1637
|
//#region src/components/loader/index.tsx
|
|
1702
1638
|
const Loader = () => /* @__PURE__ */ jsx("div", {
|
|
@@ -1708,7 +1644,6 @@ const Loader = () => /* @__PURE__ */ jsx("div", {
|
|
|
1708
1644
|
})
|
|
1709
1645
|
});
|
|
1710
1646
|
Loader.displayName = "Loader";
|
|
1711
|
-
|
|
1712
1647
|
//#endregion
|
|
1713
1648
|
//#region src/components/logo/index.tsx
|
|
1714
1649
|
const LogoBlack = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
@@ -1778,7 +1713,6 @@ const LogoBlack = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
|
1778
1713
|
})
|
|
1779
1714
|
}) })]
|
|
1780
1715
|
});
|
|
1781
|
-
|
|
1782
1716
|
//#endregion
|
|
1783
1717
|
//#region src/components/modal/index.tsx
|
|
1784
1718
|
const Modal = ({ title, children, withCloseButton = true, opened, additionalClassNames, closeModalWithConfirmation = false, gradient = true, uncloseAble = false, confirmText = "Are you sure you want to close this modal?", dataTestId, onClose, size }) => {
|
|
@@ -1879,7 +1813,6 @@ const Modal = ({ title, children, withCloseButton = true, opened, additionalClas
|
|
|
1879
1813
|
}), document.body);
|
|
1880
1814
|
};
|
|
1881
1815
|
Modal.displayName = "Modal";
|
|
1882
|
-
|
|
1883
1816
|
//#endregion
|
|
1884
1817
|
//#region src/components/navButtons/index.tsx
|
|
1885
1818
|
const NavButtons = ({ onNext, onPrev }) => /* @__PURE__ */ jsxs("div", {
|
|
@@ -1906,7 +1839,6 @@ const NavButtons = ({ onNext, onPrev }) => /* @__PURE__ */ jsxs("div", {
|
|
|
1906
1839
|
})
|
|
1907
1840
|
]
|
|
1908
1841
|
});
|
|
1909
|
-
|
|
1910
1842
|
//#endregion
|
|
1911
1843
|
//#region src/components/numberField/index.tsx
|
|
1912
1844
|
const NumberField = ({ name, value = 0, max, min = 0, isDisabled, id, className = "", label, error, onChange }) => {
|
|
@@ -1966,7 +1898,6 @@ const NumberField = ({ name, value = 0, max, min = 0, isDisabled, id, className
|
|
|
1966
1898
|
]
|
|
1967
1899
|
});
|
|
1968
1900
|
};
|
|
1969
|
-
|
|
1970
1901
|
//#endregion
|
|
1971
1902
|
//#region src/components/pageUnavailable/index.tsx
|
|
1972
1903
|
const PageUnavailable = ({ notAvailableButton, notAvailableDescription, notAvailableHeaderText }) => /* @__PURE__ */ jsx(Island, { children: /* @__PURE__ */ jsxs("div", {
|
|
@@ -1980,7 +1911,6 @@ const PageUnavailable = ({ notAvailableButton, notAvailableDescription, notAvail
|
|
|
1980
1911
|
/* @__PURE__ */ jsx("div", { children: notAvailableButton })
|
|
1981
1912
|
]
|
|
1982
1913
|
}) });
|
|
1983
|
-
|
|
1984
1914
|
//#endregion
|
|
1985
1915
|
//#region src/components/passwordInput/index.tsx
|
|
1986
1916
|
const PasswordInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(TextInput, {
|
|
@@ -1991,7 +1921,6 @@ const PasswordInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(TextI
|
|
|
1991
1921
|
ref
|
|
1992
1922
|
}));
|
|
1993
1923
|
PasswordInput.displayName = "PasswordInput";
|
|
1994
|
-
|
|
1995
1924
|
//#endregion
|
|
1996
1925
|
//#region src/components/progressBar/index.tsx
|
|
1997
1926
|
const ProgressBar = ({ value, maxValue = 100, className }) => {
|
|
@@ -2015,10 +1944,9 @@ const ProgressBar = ({ value, maxValue = 100, className }) => {
|
|
|
2015
1944
|
})
|
|
2016
1945
|
});
|
|
2017
1946
|
};
|
|
2018
|
-
|
|
2019
1947
|
//#endregion
|
|
2020
1948
|
//#region src/components/radioButton/index.tsx
|
|
2021
|
-
const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, className, containerClassName, labelClassName
|
|
1949
|
+
const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, className, containerClassName, labelClassName, ...props }) => /* @__PURE__ */ jsxs("div", {
|
|
2022
1950
|
"data-testid": "radio-button-container",
|
|
2023
1951
|
className: `${containerClassName || "radio-button-container"} relative flex items-start`,
|
|
2024
1952
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
@@ -2028,7 +1956,7 @@ const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, cl
|
|
|
2028
1956
|
id,
|
|
2029
1957
|
name,
|
|
2030
1958
|
value,
|
|
2031
|
-
onChange: props.disabled ?
|
|
1959
|
+
onChange: props.disabled ? void 0 : onChange,
|
|
2032
1960
|
checked,
|
|
2033
1961
|
"data-testid": dataTestId,
|
|
2034
1962
|
className: `${clsx(className, "ease checked:border-navyBlue checked:bg-navy-blue relative m-0 flex size-5 cursor-pointer appearance-none items-center justify-center rounded-full border border-gray-400 bg-white transition-colors duration-100 focus:ring-0 focus:outline-hidden focus-visible:ring-0", { "cursor-not-allowed opacity-50": props.disabled })}`,
|
|
@@ -2051,7 +1979,6 @@ const RadioButton = ({ id, name, value, label, onChange, checked, dataTestId, cl
|
|
|
2051
1979
|
})]
|
|
2052
1980
|
});
|
|
2053
1981
|
RadioButton.displayName = "RadioButton";
|
|
2054
|
-
|
|
2055
1982
|
//#endregion
|
|
2056
1983
|
//#region src/icons/IconStarEmpty.tsx
|
|
2057
1984
|
const IconStarEmpty = (props) => /* @__PURE__ */ jsx("svg", {
|
|
@@ -2068,7 +1995,6 @@ const IconStarEmpty = (props) => /* @__PURE__ */ jsx("svg", {
|
|
|
2068
1995
|
fill: "#E0E0E0"
|
|
2069
1996
|
})
|
|
2070
1997
|
});
|
|
2071
|
-
|
|
2072
1998
|
//#endregion
|
|
2073
1999
|
//#region src/icons/IconStarFilled.tsx
|
|
2074
2000
|
const IconStarFilled = (props) => /* @__PURE__ */ jsx("svg", {
|
|
@@ -2085,7 +2011,6 @@ const IconStarFilled = (props) => /* @__PURE__ */ jsx("svg", {
|
|
|
2085
2011
|
fill: "currentColor"
|
|
2086
2012
|
})
|
|
2087
2013
|
});
|
|
2088
|
-
|
|
2089
2014
|
//#endregion
|
|
2090
2015
|
//#region src/icons/IconStarHalfFilled.tsx
|
|
2091
2016
|
const IconStarHalfFilled = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
@@ -2105,7 +2030,6 @@ const IconStarHalfFilled = (props) => /* @__PURE__ */ jsxs("svg", {
|
|
|
2105
2030
|
fill: "currentColor"
|
|
2106
2031
|
})]
|
|
2107
2032
|
});
|
|
2108
|
-
|
|
2109
2033
|
//#endregion
|
|
2110
2034
|
//#region src/components/rating/index.tsx
|
|
2111
2035
|
const Rating = ({ rating, ratings, size = "normal", setReview, className, setReviewError, error }) => {
|
|
@@ -2114,7 +2038,7 @@ const Rating = ({ rating, ratings, size = "normal", setReview, className, setRev
|
|
|
2114
2038
|
const [reviewIsSet, setReviewIsSet] = useState(false);
|
|
2115
2039
|
const currentRating = hoveredStars || Math.round(rating * 2) / 2;
|
|
2116
2040
|
const currentSmallRating = hoveredSmallStars;
|
|
2117
|
-
const sizeClasses
|
|
2041
|
+
const sizeClasses = {
|
|
2118
2042
|
small: "h-4 w-4",
|
|
2119
2043
|
normal: "h-[22px] w-[22px]",
|
|
2120
2044
|
large: "h-[32px] w-[32px]"
|
|
@@ -2128,29 +2052,26 @@ const Rating = ({ rating, ratings, size = "normal", setReview, className, setRev
|
|
|
2128
2052
|
const handleHover = (value) => setReview && setHoveredStars(value);
|
|
2129
2053
|
const StarIcon = ({ index }) => {
|
|
2130
2054
|
if (!setReview) {
|
|
2131
|
-
const roundedRating
|
|
2132
|
-
const hasHalf
|
|
2133
|
-
const effectiveRating
|
|
2134
|
-
|
|
2135
|
-
if (index
|
|
2136
|
-
|
|
2137
|
-
return /* @__PURE__ */ jsx(IconStarEmpty, { className: `text-yellow ${sizeClasses$1[size]}` });
|
|
2055
|
+
const roundedRating = Math.round(rating * 2) / 2;
|
|
2056
|
+
const hasHalf = roundedRating % 1 === .5;
|
|
2057
|
+
const effectiveRating = roundedRating;
|
|
2058
|
+
if (index <= Math.floor(effectiveRating)) return /* @__PURE__ */ jsx(IconStarFilled, { className: `text-yellow ${sizeClasses[size]}` });
|
|
2059
|
+
if (hasHalf && index === Math.ceil(effectiveRating)) return /* @__PURE__ */ jsx(IconStarHalfFilled, { className: `text-yellow ${sizeClasses[size]}` });
|
|
2060
|
+
return /* @__PURE__ */ jsx(IconStarEmpty, { className: `text-yellow ${sizeClasses[size]}` });
|
|
2138
2061
|
}
|
|
2139
2062
|
const displayRating = reviewIsSet ? Number(reviewIsSet) : currentRating;
|
|
2140
2063
|
const roundedRating = Math.round(displayRating * 2) / 2;
|
|
2141
2064
|
const hasHalf = roundedRating % 1 === .5;
|
|
2142
2065
|
const effectiveRating = roundedRating;
|
|
2143
|
-
|
|
2144
|
-
if (index
|
|
2145
|
-
|
|
2146
|
-
return /* @__PURE__ */ jsx(IconStarEmpty, { className: `text-yellow ${sizeClasses$1[size]} ` });
|
|
2066
|
+
if (index <= Math.floor(effectiveRating)) return /* @__PURE__ */ jsx(IconStarFilled, { className: `text-yellow ${sizeClasses[size]}` });
|
|
2067
|
+
if (hasHalf && index === Math.ceil(effectiveRating)) return /* @__PURE__ */ jsx(IconStarHalfFilled, { className: `text-yellow ${sizeClasses[size]}` });
|
|
2068
|
+
return /* @__PURE__ */ jsx(IconStarEmpty, { className: `text-yellow ${sizeClasses[size]} ` });
|
|
2147
2069
|
};
|
|
2148
|
-
const StarSmallIcon = ({ index, className
|
|
2149
|
-
const
|
|
2150
|
-
|
|
2151
|
-
if (index ===
|
|
2152
|
-
|
|
2153
|
-
return /* @__PURE__ */ jsx(IconStarEmpty, { className: cn(className$1, "text-yellow") });
|
|
2070
|
+
const StarSmallIcon = ({ index, className }) => {
|
|
2071
|
+
const roundedRating = Math.round(currentSmallRating * 2) / 2;
|
|
2072
|
+
if (index === roundedRating) return /* @__PURE__ */ jsx(IconStarFilled, { className: cn(className, "text-yellow") });
|
|
2073
|
+
if (index - roundedRating === .5) return /* @__PURE__ */ jsx(IconStarHalfFilled, { className: cn(className, "text-yellow") });
|
|
2074
|
+
return /* @__PURE__ */ jsx(IconStarEmpty, { className: cn(className, "text-yellow") });
|
|
2154
2075
|
};
|
|
2155
2076
|
return /* @__PURE__ */ jsxs("span", {
|
|
2156
2077
|
className: cn("flex flex-col", className),
|
|
@@ -2193,10 +2114,9 @@ const Rating = ({ rating, ratings, size = "normal", setReview, className, setRev
|
|
|
2193
2114
|
]
|
|
2194
2115
|
});
|
|
2195
2116
|
};
|
|
2196
|
-
|
|
2197
2117
|
//#endregion
|
|
2198
2118
|
//#region src/components/regionSelector/index.tsx
|
|
2199
|
-
const RegionSelector = ({ title, regions
|
|
2119
|
+
const RegionSelector = ({ title, regions, ...props }) => {
|
|
2200
2120
|
if (regions?.length === 0) return null;
|
|
2201
2121
|
return /* @__PURE__ */ jsxs("div", {
|
|
2202
2122
|
"data-component": "regionSelector",
|
|
@@ -2213,7 +2133,6 @@ const RegionSelector = ({ title, regions,...props }) => {
|
|
|
2213
2133
|
});
|
|
2214
2134
|
};
|
|
2215
2135
|
RegionSelector.displayName = "RegionSelector";
|
|
2216
|
-
|
|
2217
2136
|
//#endregion
|
|
2218
2137
|
//#region src/components/reviews/index.tsx
|
|
2219
2138
|
const ReviewsLine = ({ maxValue, amount, countStarsText }) => /* @__PURE__ */ jsxs("div", {
|
|
@@ -2275,7 +2194,6 @@ const Reviews = ({ totalRatings, ratings, averageRating, aggregatedRating, count
|
|
|
2275
2194
|
})
|
|
2276
2195
|
})]
|
|
2277
2196
|
});
|
|
2278
|
-
|
|
2279
2197
|
//#endregion
|
|
2280
2198
|
//#region src/components/scrollToTop/index.tsx
|
|
2281
2199
|
const ScrollToTop = ({ scrollToTopTitle }) => {
|
|
@@ -2315,10 +2233,9 @@ const ScrollToTop = ({ scrollToTopTitle }) => {
|
|
|
2315
2233
|
className: "z-[99]"
|
|
2316
2234
|
})] });
|
|
2317
2235
|
};
|
|
2318
|
-
|
|
2319
2236
|
//#endregion
|
|
2320
2237
|
//#region src/components/searchInput/index.tsx
|
|
2321
|
-
const SearchInput = ({ placeholder, value, onChange, className, rightSection
|
|
2238
|
+
const SearchInput = ({ placeholder, value, onChange, className, rightSection, ...props }) => /* @__PURE__ */ jsx(TextInput, {
|
|
2322
2239
|
placeholder,
|
|
2323
2240
|
className: className || "w-full lg:w-auto lg:min-w-[23.75rem]",
|
|
2324
2241
|
rightSection: rightSection || /* @__PURE__ */ jsx(Fragment$1, {}),
|
|
@@ -2326,7 +2243,6 @@ const SearchInput = ({ placeholder, value, onChange, className, rightSection,...
|
|
|
2326
2243
|
onChange,
|
|
2327
2244
|
...props
|
|
2328
2245
|
});
|
|
2329
|
-
|
|
2330
2246
|
//#endregion
|
|
2331
2247
|
//#region src/hooks/useDebouncedValue.ts
|
|
2332
2248
|
function useDebouncedValue(value, delay = 200) {
|
|
@@ -2337,10 +2253,9 @@ function useDebouncedValue(value, delay = 200) {
|
|
|
2337
2253
|
}, [value, delay]);
|
|
2338
2254
|
return debouncedValue;
|
|
2339
2255
|
}
|
|
2340
|
-
|
|
2341
2256
|
//#endregion
|
|
2342
2257
|
//#region src/components/select/index.tsx
|
|
2343
|
-
function Select({ id, options, placeholder, label, errorText, hideError = false, isClearable = false, disabled = false, multiSelect = false, searchable = false, value, defaultValue, onValueChange, className, searchPlaceholder, noResultsText
|
|
2258
|
+
function Select({ id, options, placeholder, label, errorText, hideError = false, isClearable = false, disabled = false, multiSelect = false, searchable = false, value, defaultValue, onValueChange, className, searchPlaceholder, noResultsText, ...props }) {
|
|
2344
2259
|
const innerRef = useRef(null);
|
|
2345
2260
|
const buttonRef = useRef(null);
|
|
2346
2261
|
const optionRefs = useRef([]);
|
|
@@ -2350,12 +2265,10 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
|
|
|
2350
2265
|
const [searchTerm, setSearchTerm] = useState("");
|
|
2351
2266
|
const [focusedIndex, setFocusedIndex] = useState(-1);
|
|
2352
2267
|
const debouncedSearch = useDebouncedValue(searchTerm);
|
|
2353
|
-
const isControlled = value !==
|
|
2268
|
+
const isControlled = value !== void 0;
|
|
2354
2269
|
const currentValue = isControlled ? value : internalValue;
|
|
2355
2270
|
const selectedLabels = useMemo(() => {
|
|
2356
|
-
if (Array.isArray(currentValue))
|
|
2357
|
-
return options.filter((o) => currentValue.includes(o.value)).map((o) => o.label).join(", ");
|
|
2358
|
-
}
|
|
2271
|
+
if (Array.isArray(currentValue)) return options.filter((o) => currentValue.includes(o.value)).map((o) => o.label).join(", ");
|
|
2359
2272
|
return options.find((o) => o.value === currentValue)?.label;
|
|
2360
2273
|
}, [currentValue, options]);
|
|
2361
2274
|
const { refs, floatingStyles, context } = useFloating({
|
|
@@ -2369,13 +2282,10 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
|
|
|
2369
2282
|
whileElementsMounted: autoUpdate,
|
|
2370
2283
|
placement: "bottom-start"
|
|
2371
2284
|
});
|
|
2372
|
-
const click = useClick(context);
|
|
2373
|
-
const dismiss = useDismiss(context);
|
|
2374
|
-
const role = useRole(context, { role: "combobox" });
|
|
2375
2285
|
const { getReferenceProps, getFloatingProps } = useInteractions([
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
role
|
|
2286
|
+
useClick(context),
|
|
2287
|
+
useDismiss(context),
|
|
2288
|
+
useRole(context, { role: "combobox" })
|
|
2379
2289
|
]);
|
|
2380
2290
|
const handleSelect = useCallback((val) => {
|
|
2381
2291
|
if (multiSelect) {
|
|
@@ -2398,8 +2308,8 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
|
|
|
2398
2308
|
const handleClear = useCallback((e) => {
|
|
2399
2309
|
e.preventDefault();
|
|
2400
2310
|
e.stopPropagation();
|
|
2401
|
-
if (!isControlled) setInternalValue(
|
|
2402
|
-
onValueChange?.(
|
|
2311
|
+
if (!isControlled) setInternalValue(void 0);
|
|
2312
|
+
onValueChange?.(void 0);
|
|
2403
2313
|
setSearchTerm("");
|
|
2404
2314
|
}, [isControlled, onValueChange]);
|
|
2405
2315
|
const showPlaceholder = !currentValue || Array.isArray(currentValue) && currentValue.length === 0;
|
|
@@ -2570,7 +2480,9 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
|
|
|
2570
2480
|
children: filteredOptions.length ? filteredOptions.map((opt, index) => {
|
|
2571
2481
|
const isSelected = Array.isArray(currentValue) ? currentValue.includes(opt.value) : currentValue === opt.value;
|
|
2572
2482
|
return /* @__PURE__ */ jsxs("button", {
|
|
2573
|
-
ref: (el) =>
|
|
2483
|
+
ref: (el) => {
|
|
2484
|
+
optionRefs.current[index] = el;
|
|
2485
|
+
},
|
|
2574
2486
|
type: "button",
|
|
2575
2487
|
onClick: () => handleSelect(opt.value),
|
|
2576
2488
|
role: "option",
|
|
@@ -2609,7 +2521,6 @@ function Select({ id, options, placeholder, label, errorText, hideError = false,
|
|
|
2609
2521
|
});
|
|
2610
2522
|
}
|
|
2611
2523
|
Select.displayName = "Select";
|
|
2612
|
-
|
|
2613
2524
|
//#endregion
|
|
2614
2525
|
//#region src/components/settingsCard/index.tsx
|
|
2615
2526
|
const SettingsCard = ({ icon, title, link, ManageText, LinkComponent }) => /* @__PURE__ */ jsxs("div", {
|
|
@@ -2628,7 +2539,6 @@ const SettingsCard = ({ icon, title, link, ManageText, LinkComponent }) => /* @_
|
|
|
2628
2539
|
children: ManageText
|
|
2629
2540
|
})]
|
|
2630
2541
|
});
|
|
2631
|
-
|
|
2632
2542
|
//#endregion
|
|
2633
2543
|
//#region src/components/skeleton/index.tsx
|
|
2634
2544
|
const Skeleton = ({ className, "data-testid": dataTestId }) => /* @__PURE__ */ jsx("span", {
|
|
@@ -2636,7 +2546,6 @@ const Skeleton = ({ className, "data-testid": dataTestId }) => /* @__PURE__ */ j
|
|
|
2636
2546
|
"data-testid": dataTestId || "skeleton",
|
|
2637
2547
|
className: cn("inline-block rounded-md", "animate-pulse bg-gray-100/50", className)
|
|
2638
2548
|
});
|
|
2639
|
-
|
|
2640
2549
|
//#endregion
|
|
2641
2550
|
//#region src/components/skillPill/index.tsx
|
|
2642
2551
|
const SkillPill = ({ name, number }) => /* @__PURE__ */ jsxs("div", {
|
|
@@ -2651,7 +2560,6 @@ const SkillPill = ({ name, number }) => /* @__PURE__ */ jsxs("div", {
|
|
|
2651
2560
|
children: number
|
|
2652
2561
|
})]
|
|
2653
2562
|
});
|
|
2654
|
-
|
|
2655
2563
|
//#endregion
|
|
2656
2564
|
//#region src/components/stepper/NumberedStepper.tsx
|
|
2657
2565
|
const NumberedStepper = ({ steps, active, className, stepsCompleted, completedLabel, onStepClick }) => /* @__PURE__ */ jsx("div", {
|
|
@@ -2691,7 +2599,6 @@ const NumberedStepper = ({ steps, active, className, stepsCompleted, completedLa
|
|
|
2691
2599
|
})
|
|
2692
2600
|
}), index < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: `my-2 ml-6 flex h-[24px] w-px align-middle md:ml-0 md:h-px md:w-auto md:flex-1 ${active === 1 ? "bg-light-blue" : "bg-[#CCCCCC]"}` })] }, index))
|
|
2693
2601
|
});
|
|
2694
|
-
|
|
2695
2602
|
//#endregion
|
|
2696
2603
|
//#region src/components/stepper/Stepper.tsx
|
|
2697
2604
|
const Stepper = ({ steps, setStep = () => {}, variant = "default", clickableSteps, completedSteps, activeStep, isMobile, className }) => /* @__PURE__ */ jsx("div", {
|
|
@@ -2742,7 +2649,6 @@ const Stepper = ({ steps, setStep = () => {}, variant = "default", clickableStep
|
|
|
2742
2649
|
}, index);
|
|
2743
2650
|
})
|
|
2744
2651
|
});
|
|
2745
|
-
|
|
2746
2652
|
//#endregion
|
|
2747
2653
|
//#region src/components/stickyMobileButton/index.tsx
|
|
2748
2654
|
const StickyMobileButtonWrapper = ({ children }) => /* @__PURE__ */ jsx("div", {
|
|
@@ -2754,17 +2660,15 @@ const StickyMobileButtonWrapper = ({ children }) => /* @__PURE__ */ jsx("div", {
|
|
|
2754
2660
|
children
|
|
2755
2661
|
})
|
|
2756
2662
|
});
|
|
2757
|
-
|
|
2758
2663
|
//#endregion
|
|
2759
2664
|
//#region src/components/table/index.tsx
|
|
2760
|
-
const Table = ({ children, className
|
|
2665
|
+
const Table = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
2761
2666
|
"data-testid": "table",
|
|
2762
2667
|
"data-component": "table",
|
|
2763
2668
|
className: cn("table w-full table-fixed border-collapse overflow-auto", className),
|
|
2764
2669
|
...props,
|
|
2765
2670
|
children
|
|
2766
2671
|
});
|
|
2767
|
-
|
|
2768
2672
|
//#endregion
|
|
2769
2673
|
//#region src/components/table/tableCell/index.tsx
|
|
2770
2674
|
const TableCell = ({ children, smallPadding, className }) => /* @__PURE__ */ jsx("div", {
|
|
@@ -2773,7 +2677,6 @@ const TableCell = ({ children, smallPadding, className }) => /* @__PURE__ */ jsx
|
|
|
2773
2677
|
className: `${cn("table-cell py-2 align-middle text-sm font-normal first:pl-2 last:pr-2 md:py-0 md:xl:first:pl-10 md:xl:last:pr-10", { "md:xl:first:pl-5 md:xl:last:pr-5": smallPadding }, className)}`,
|
|
2774
2678
|
children
|
|
2775
2679
|
});
|
|
2776
|
-
|
|
2777
2680
|
//#endregion
|
|
2778
2681
|
//#region src/components/table/tableHeader/index.tsx
|
|
2779
2682
|
const TableHeader = ({ children }) => /* @__PURE__ */ jsx("div", {
|
|
@@ -2782,30 +2685,27 @@ const TableHeader = ({ children }) => /* @__PURE__ */ jsx("div", {
|
|
|
2782
2685
|
className: "table-header-group border-b border-gray-200",
|
|
2783
2686
|
children
|
|
2784
2687
|
});
|
|
2785
|
-
|
|
2786
2688
|
//#endregion
|
|
2787
2689
|
//#region src/components/table/tableHeaderItem/index.tsx
|
|
2788
|
-
const TableHeaderItem = ({ children, smallPadding, className
|
|
2690
|
+
const TableHeaderItem = ({ children, smallPadding, className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
2789
2691
|
"data-testid": "tableHeaderItem",
|
|
2790
2692
|
"data-component": "tableHeaderItem",
|
|
2791
2693
|
className: cn("hidden h-10 align-middle text-xs font-medium first:pl-10 last:pr-10 xl:table-cell", { "xl:first:pl-5 xl:last:pr-5": smallPadding }, className),
|
|
2792
2694
|
...props,
|
|
2793
2695
|
children
|
|
2794
2696
|
});
|
|
2795
|
-
|
|
2796
2697
|
//#endregion
|
|
2797
2698
|
//#region src/components/table/tableHeaderRow/index.tsx
|
|
2798
|
-
const TableHeaderRow = ({ children
|
|
2699
|
+
const TableHeaderRow = ({ children, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
2799
2700
|
"data-testid": "tableHeaderRow",
|
|
2800
2701
|
"data-component": "tableHeaderRow",
|
|
2801
2702
|
className: "table-row xl:border-0 xl:border-b xl:border-solid xl:border-gray-200",
|
|
2802
2703
|
...props,
|
|
2803
2704
|
children
|
|
2804
2705
|
});
|
|
2805
|
-
|
|
2806
2706
|
//#endregion
|
|
2807
2707
|
//#region src/components/table/tableRow/index.tsx
|
|
2808
|
-
function TableRow({ children, className, header
|
|
2708
|
+
function TableRow({ children, className, header, ...props }) {
|
|
2809
2709
|
return /* @__PURE__ */ jsx("div", {
|
|
2810
2710
|
"data-testid": "tableRow",
|
|
2811
2711
|
"data-component": "tableRow",
|
|
@@ -2814,7 +2714,6 @@ function TableRow({ children, className, header,...props }) {
|
|
|
2814
2714
|
children
|
|
2815
2715
|
});
|
|
2816
2716
|
}
|
|
2817
|
-
|
|
2818
2717
|
//#endregion
|
|
2819
2718
|
//#region src/components/tabs/Tab.tsx
|
|
2820
2719
|
const Tab = forwardRef(({ tabId, activeTab, tabContent, clickFnc, rightSection }, ref) => /* @__PURE__ */ jsxs("button", {
|
|
@@ -2827,7 +2726,6 @@ const Tab = forwardRef(({ tabId, activeTab, tabContent, clickFnc, rightSection }
|
|
|
2827
2726
|
children: rightSection
|
|
2828
2727
|
})]
|
|
2829
2728
|
}));
|
|
2830
|
-
|
|
2831
2729
|
//#endregion
|
|
2832
2730
|
//#region src/components/tabs/TabsBadge.tsx
|
|
2833
2731
|
const TabsBadge = ({ children }) => {
|
|
@@ -2842,7 +2740,6 @@ const TabsBadge = ({ children }) => {
|
|
|
2842
2740
|
});
|
|
2843
2741
|
};
|
|
2844
2742
|
TabsBadge.displayName = "TabsBadge";
|
|
2845
|
-
|
|
2846
2743
|
//#endregion
|
|
2847
2744
|
//#region src/components/tabs/TabsWrapper.tsx
|
|
2848
2745
|
const TabsWrapper = ({ setActiveTab, activeTab, tabs }) => {
|
|
@@ -2900,17 +2797,16 @@ const TabContent = forwardRef(({ tab, setActiveTab, activeTab }, ref) => /* @__P
|
|
|
2900
2797
|
setActiveTab,
|
|
2901
2798
|
activeTab: activeTab === tab.value,
|
|
2902
2799
|
tabContent: tab.name,
|
|
2903
|
-
rightSection: tab?.rightSection ||
|
|
2800
|
+
rightSection: tab?.rightSection || void 0,
|
|
2904
2801
|
clickFnc: () => {
|
|
2905
2802
|
tab.clickFnc && tab.clickFnc(tab.value);
|
|
2906
2803
|
setActiveTab(tab.value);
|
|
2907
2804
|
}
|
|
2908
2805
|
}));
|
|
2909
2806
|
TabContent.displayName = "TabContent";
|
|
2910
|
-
|
|
2911
2807
|
//#endregion
|
|
2912
2808
|
//#region src/components/textArea/index.tsx
|
|
2913
|
-
const Textarea = forwardRef(({ className, label, error, rows = 8
|
|
2809
|
+
const Textarea = forwardRef(({ className, label, error, rows = 8, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
|
|
2914
2810
|
className: "relative grid gap-2",
|
|
2915
2811
|
children: [
|
|
2916
2812
|
label && /* @__PURE__ */ jsx("label", {
|
|
@@ -2930,10 +2826,9 @@ const Textarea = forwardRef(({ className, label, error, rows = 8,...props }, ref
|
|
|
2930
2826
|
})
|
|
2931
2827
|
]
|
|
2932
2828
|
}));
|
|
2933
|
-
|
|
2934
2829
|
//#endregion
|
|
2935
2830
|
//#region src/components/themeIcon/index.tsx
|
|
2936
|
-
function ThemeIcon({ styleVariant = "black", className, icon, adjustedSize, title
|
|
2831
|
+
function ThemeIcon({ styleVariant = "black", className, icon, adjustedSize, title, ...props }) {
|
|
2937
2832
|
const classNames = cn("bg-transparent h-9 w-9 rounded-[5px] grid place-content-center", {
|
|
2938
2833
|
"text-black": styleVariant === COLOR.BLACK,
|
|
2939
2834
|
"text-gray-500": styleVariant === COLOR.GRAY,
|
|
@@ -2958,10 +2853,9 @@ function ThemeIcon({ styleVariant = "black", className, icon, adjustedSize, titl
|
|
|
2958
2853
|
})
|
|
2959
2854
|
}), /* @__PURE__ */ jsx(Tooltip$1, { id: title })] });
|
|
2960
2855
|
}
|
|
2961
|
-
|
|
2962
2856
|
//#endregion
|
|
2963
2857
|
//#region src/components/timeInput/index.tsx
|
|
2964
|
-
const TimeInput = forwardRef(({ label, error, withSeconds, className = ""
|
|
2858
|
+
const TimeInput = forwardRef(({ label, error, withSeconds, className = "", ...props }, ref) => {
|
|
2965
2859
|
const handleTimeChange = (e) => {
|
|
2966
2860
|
if (props.onChange) props.onChange(e);
|
|
2967
2861
|
};
|
|
@@ -2989,7 +2883,6 @@ const TimeInput = forwardRef(({ label, error, withSeconds, className = "",...pro
|
|
|
2989
2883
|
]
|
|
2990
2884
|
});
|
|
2991
2885
|
});
|
|
2992
|
-
|
|
2993
2886
|
//#endregion
|
|
2994
2887
|
//#region src/components/toggle/index.tsx
|
|
2995
2888
|
const Toggle = ({ onClick, value, disabled = false }) => {
|
|
@@ -3011,7 +2904,6 @@ const Toggle = ({ onClick, value, disabled = false }) => {
|
|
|
3011
2904
|
})
|
|
3012
2905
|
});
|
|
3013
2906
|
};
|
|
3014
|
-
|
|
3015
2907
|
//#endregion
|
|
3016
2908
|
//#region src/components/truncatedText/index.tsx
|
|
3017
2909
|
const TruncatedText = ({ text, limit = 20 }) => {
|
|
@@ -3035,10 +2927,9 @@ const TruncatedText = ({ text, limit = 20 }) => {
|
|
|
3035
2927
|
})]
|
|
3036
2928
|
});
|
|
3037
2929
|
};
|
|
3038
|
-
|
|
3039
2930
|
//#endregion
|
|
3040
2931
|
//#region src/components/unorderedList/index.tsx
|
|
3041
|
-
const UnorderedList = ({ children, className, actionItem
|
|
2932
|
+
const UnorderedList = ({ children, className, actionItem, ...props }) => /* @__PURE__ */ jsxs("ul", {
|
|
3042
2933
|
className: cn("m-0 last:border-none", className),
|
|
3043
2934
|
"data-component": "unorderedList",
|
|
3044
2935
|
"data-testid": "unorderedList",
|
|
@@ -3048,10 +2939,9 @@ const UnorderedList = ({ children, className, actionItem,...props }) => /* @__PU
|
|
|
3048
2939
|
children: actionItem
|
|
3049
2940
|
})]
|
|
3050
2941
|
});
|
|
3051
|
-
|
|
3052
2942
|
//#endregion
|
|
3053
2943
|
//#region src/components/unorderedListItem/index.tsx
|
|
3054
|
-
const UnorderedListItem = ({ children, actionItem, className, header = false
|
|
2944
|
+
const UnorderedListItem = ({ children, actionItem, className, header = false, ...props }) => /* @__PURE__ */ jsxs("li", {
|
|
3055
2945
|
...props,
|
|
3056
2946
|
"data-component": "unorderedListItem",
|
|
3057
2947
|
className: cn("grid min-h-[74px] list-none items-center border-b border-solid border-b-gray-200 py-5 text-sm font-normal last:border-none md:flex md:py-4 md:pr-10 md:pl-10", header ? "md:items-end" : "hover:bg-ultra-light-blue-gray", { "grid-cols-2": actionItem }, className),
|
|
@@ -3060,60 +2950,44 @@ const UnorderedListItem = ({ children, actionItem, className, header = false,...
|
|
|
3060
2950
|
children: actionItem
|
|
3061
2951
|
})]
|
|
3062
2952
|
});
|
|
3063
|
-
|
|
3064
2953
|
//#endregion
|
|
3065
2954
|
//#region src/hooks/phone/usePhoneNumber.ts
|
|
3066
2955
|
function usePhoneNumber() {
|
|
3067
|
-
/**
|
|
3068
|
-
* Validates a phone number and returns parsing results
|
|
3069
|
-
*/
|
|
3070
|
-
const validatePhone = useCallback((phoneNumber, options) => phone(phoneNumber, options), []);
|
|
3071
|
-
/**
|
|
3072
|
-
* Strips the country code from a phone number
|
|
3073
|
-
* Example: +85265698900 -> 65698900
|
|
3074
|
-
*/
|
|
3075
|
-
const stripCountryCode = useCallback((phoneNumber) => {
|
|
3076
|
-
const result = phone(phoneNumber);
|
|
3077
|
-
if (!result.isValid) return phoneNumber;
|
|
3078
|
-
return result.phoneNumber.replace(result.countryCode, "");
|
|
3079
|
-
}, []);
|
|
3080
|
-
/**
|
|
3081
|
-
* Returns the country code from a phone number
|
|
3082
|
-
* Example: +85265698900 -> +852
|
|
3083
|
-
*/
|
|
3084
|
-
const getCountryCode = useCallback((phoneNumber) => {
|
|
3085
|
-
const result = phone(phoneNumber);
|
|
3086
|
-
if (!result.isValid) return phoneNumber;
|
|
3087
|
-
return result.countryCode;
|
|
3088
|
-
}, []);
|
|
3089
|
-
/**
|
|
3090
|
-
* Formats a phone number to international format with country code
|
|
3091
|
-
* Example: 0648711212 (with country: 'NL') -> +31648711212
|
|
3092
|
-
*/
|
|
3093
|
-
const formatToInternational = useCallback((phoneNumber, options) => {
|
|
3094
|
-
const result = phone(phoneNumber, options);
|
|
3095
|
-
if (!result.isValid) return phoneNumber;
|
|
3096
|
-
return result.phoneNumber;
|
|
3097
|
-
}, []);
|
|
3098
2956
|
return {
|
|
3099
|
-
validatePhone,
|
|
3100
|
-
stripCountryCode
|
|
3101
|
-
|
|
3102
|
-
|
|
2957
|
+
validatePhone: useCallback((phoneNumber, options) => phone(phoneNumber, options), []),
|
|
2958
|
+
stripCountryCode: useCallback((phoneNumber) => {
|
|
2959
|
+
const result = phone(phoneNumber);
|
|
2960
|
+
if (!result.isValid) return phoneNumber;
|
|
2961
|
+
return result.phoneNumber.replace(result.countryCode, "");
|
|
2962
|
+
}, []),
|
|
2963
|
+
getCountryCode: useCallback((phoneNumber) => {
|
|
2964
|
+
const result = phone(phoneNumber);
|
|
2965
|
+
if (!result.isValid) return phoneNumber;
|
|
2966
|
+
return result.countryCode;
|
|
2967
|
+
}, []),
|
|
2968
|
+
formatToInternational: useCallback((phoneNumber, options) => {
|
|
2969
|
+
const result = phone(phoneNumber, options);
|
|
2970
|
+
if (!result.isValid) return phoneNumber;
|
|
2971
|
+
return result.phoneNumber;
|
|
2972
|
+
}, [])
|
|
3103
2973
|
};
|
|
3104
2974
|
}
|
|
3105
|
-
|
|
3106
2975
|
//#endregion
|
|
3107
2976
|
//#region src/hooks/phone/usePhoneNumberPrefix.ts
|
|
2977
|
+
/** CJS package often exposes `{ Country, default: api }`; Vite/Node ESM may not unwrap `.default`. */
|
|
2978
|
+
const countryListApi = (() => {
|
|
2979
|
+
const mod = CountryListImport;
|
|
2980
|
+
if (typeof mod.getAll === "function") return mod;
|
|
2981
|
+
if (mod.default && typeof mod.default.getAll === "function") return mod.default;
|
|
2982
|
+
throw new Error("country-list-with-dial-code-and-flag: expected getAll()");
|
|
2983
|
+
})();
|
|
3108
2984
|
const usePhoneNumberPrefix = (defaultCountry) => {
|
|
3109
|
-
|
|
3110
|
-
return countryList.filter((country) => country.dial_code).sort((a, b) => {
|
|
2985
|
+
return countryListApi.getAll().filter((country) => country.dial_code).sort((a, b) => {
|
|
3111
2986
|
if (a?.code === defaultCountry) return -1;
|
|
3112
2987
|
if (b?.code === defaultCountry) return 1;
|
|
3113
2988
|
return a.name.localeCompare(b.name);
|
|
3114
2989
|
});
|
|
3115
2990
|
};
|
|
3116
|
-
|
|
3117
2991
|
//#endregion
|
|
3118
2992
|
//#region src/components/phoneInput/index.tsx
|
|
3119
2993
|
const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
|
|
@@ -3138,13 +3012,10 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
|
|
|
3138
3012
|
whileElementsMounted: autoUpdate,
|
|
3139
3013
|
placement: "bottom-start"
|
|
3140
3014
|
});
|
|
3141
|
-
const click = useClick(context);
|
|
3142
|
-
const dismiss = useDismiss(context);
|
|
3143
|
-
const role = useRole(context, { role: "combobox" });
|
|
3144
3015
|
const { getReferenceProps, getFloatingProps } = useInteractions([
|
|
3145
|
-
|
|
3146
|
-
|
|
3147
|
-
role
|
|
3016
|
+
useClick(context),
|
|
3017
|
+
useDismiss(context),
|
|
3018
|
+
useRole(context, { role: "combobox" })
|
|
3148
3019
|
]);
|
|
3149
3020
|
const performSearch = useCallback((query) => {
|
|
3150
3021
|
if (!query) return phoneNumberPrefixes;
|
|
@@ -3152,20 +3023,17 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
|
|
|
3152
3023
|
return phoneNumberPrefixes.filter((country) => country.name.toLowerCase().includes(lowerQuery) || country.dial_code.toLowerCase().includes(lowerQuery) || country.code.toLowerCase().includes(lowerQuery));
|
|
3153
3024
|
}, [phoneNumberPrefixes]);
|
|
3154
3025
|
useEffect(() => {
|
|
3155
|
-
|
|
3156
|
-
setFilteredCountries(results);
|
|
3026
|
+
setFilteredCountries(performSearch(searchQuery));
|
|
3157
3027
|
setHighlightedIndex(-1);
|
|
3158
3028
|
}, [searchQuery]);
|
|
3159
3029
|
useEffect(() => {
|
|
3160
3030
|
optionRefs.current = optionRefs.current.slice(0, filteredCountries.length);
|
|
3161
3031
|
}, [filteredCountries]);
|
|
3162
3032
|
useEffect(() => {
|
|
3163
|
-
if (highlightedIndex >= 0 && optionRefs.current[highlightedIndex]) {
|
|
3164
|
-
|
|
3165
|
-
|
|
3166
|
-
|
|
3167
|
-
});
|
|
3168
|
-
}
|
|
3033
|
+
if (highlightedIndex >= 0 && optionRefs.current[highlightedIndex]) optionRefs.current[highlightedIndex]?.scrollIntoView({
|
|
3034
|
+
behavior: "auto",
|
|
3035
|
+
block: "nearest"
|
|
3036
|
+
});
|
|
3169
3037
|
}, [highlightedIndex]);
|
|
3170
3038
|
const handleSelect = (country) => {
|
|
3171
3039
|
setSelectedCountry(country);
|
|
@@ -3182,11 +3050,10 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
|
|
|
3182
3050
|
e.preventDefault();
|
|
3183
3051
|
setHighlightedIndex((prev) => prev > 0 ? prev - 1 : filteredCountries.length - 1);
|
|
3184
3052
|
break;
|
|
3185
|
-
case "Enter":
|
|
3053
|
+
case "Enter":
|
|
3186
3054
|
e.preventDefault();
|
|
3187
3055
|
if (highlightedIndex >= 0) handleSelect(filteredCountries[highlightedIndex]);
|
|
3188
3056
|
break;
|
|
3189
|
-
}
|
|
3190
3057
|
case "Escape":
|
|
3191
3058
|
e.preventDefault();
|
|
3192
3059
|
setOpenDropdown(false);
|
|
@@ -3244,7 +3111,9 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
|
|
|
3244
3111
|
}), /* @__PURE__ */ jsx("div", {
|
|
3245
3112
|
className: "max-h-[200px] overflow-auto p-1",
|
|
3246
3113
|
children: filteredCountries.length > 0 ? filteredCountries.map((country, index) => /* @__PURE__ */ jsxs("button", {
|
|
3247
|
-
ref: (el) =>
|
|
3114
|
+
ref: (el) => {
|
|
3115
|
+
optionRefs.current[index] = el;
|
|
3116
|
+
},
|
|
3248
3117
|
type: "button",
|
|
3249
3118
|
role: "option",
|
|
3250
3119
|
"aria-selected": selectedCountry?.code === country.code,
|
|
@@ -3273,7 +3142,7 @@ const CountrySelector = ({ searchPlaceholder, defaultCountry, ref }) => {
|
|
|
3273
3142
|
}) })]
|
|
3274
3143
|
});
|
|
3275
3144
|
};
|
|
3276
|
-
const PhoneInput = ({ placeholder, searchPlaceHolder, defaultCountry = "NL", invalidMessage, defaultValue, onChange, ref
|
|
3145
|
+
const PhoneInput = ({ placeholder, searchPlaceHolder, defaultCountry = "NL", invalidMessage, defaultValue, onChange, ref, ...rest }) => {
|
|
3277
3146
|
const inputRef = useRef(null);
|
|
3278
3147
|
const [phoneNumber, setPhoneNumber] = useState(defaultValue || "");
|
|
3279
3148
|
const { validatePhone, stripCountryCode, getCountryCode, formatToInternational } = usePhoneNumber();
|
|
@@ -3286,18 +3155,15 @@ const PhoneInput = ({ placeholder, searchPlaceHolder, defaultCountry = "NL", inv
|
|
|
3286
3155
|
if (filteredValue.startsWith("+") && filteredValue.length > 1) {
|
|
3287
3156
|
const countryCode = getCountryCode(filteredValue);
|
|
3288
3157
|
if (countryCode) countrySelectorRef.current?.updateCountry(countryCode);
|
|
3289
|
-
|
|
3290
|
-
setPhoneNumber(strippedNumber);
|
|
3158
|
+
setPhoneNumber(stripCountryCode(filteredValue));
|
|
3291
3159
|
return;
|
|
3292
3160
|
} else setPhoneNumber(filteredValue);
|
|
3293
3161
|
};
|
|
3294
3162
|
const handleBlur = () => {
|
|
3295
3163
|
if (phoneNumber.trim()) {
|
|
3296
3164
|
const selectedCountry = countrySelectorRef.current?.getSelectedCountry();
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
const formattedNumber = formatToInternational(phoneNumber, { country: selectedCountry?.code });
|
|
3300
|
-
const displayNumber = stripCountryCode(formattedNumber);
|
|
3165
|
+
if (validatePhone(phoneNumber, { country: selectedCountry?.code }).isValid) {
|
|
3166
|
+
const displayNumber = stripCountryCode(formatToInternational(phoneNumber, { country: selectedCountry?.code }));
|
|
3301
3167
|
const fullNumber = selectedCountry?.dial_code + displayNumber;
|
|
3302
3168
|
setPhoneNumber(displayNumber);
|
|
3303
3169
|
onChange(fullNumber);
|
|
@@ -3323,7 +3189,6 @@ const PhoneInput = ({ placeholder, searchPlaceHolder, defaultCountry = "NL", inv
|
|
|
3323
3189
|
});
|
|
3324
3190
|
};
|
|
3325
3191
|
PhoneInput.displayName = "PhoneInput";
|
|
3326
|
-
|
|
3327
3192
|
//#endregion
|
|
3328
3193
|
//#region src/components/profileMenu/index.tsx
|
|
3329
3194
|
const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classNames }) => {
|
|
@@ -3338,26 +3203,23 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
|
|
|
3338
3203
|
const buttonId = `${menuId}-button`;
|
|
3339
3204
|
const defaultStyling = "text-black flex items-center gap-1 bg-transparent py-1 px-2.5 h-9 min-w-9 cursor-pointer border-gray-200 focus:bg-gray-50 focus:ring focus:ring-primary focus:outline-none focus:border-0 focus:ring-inset";
|
|
3340
3205
|
const handleToggle = () => {
|
|
3341
|
-
if (!disabled) {
|
|
3342
|
-
|
|
3343
|
-
|
|
3344
|
-
|
|
3345
|
-
|
|
3346
|
-
|
|
3347
|
-
|
|
3348
|
-
|
|
3349
|
-
|
|
3350
|
-
|
|
3351
|
-
|
|
3352
|
-
|
|
3353
|
-
|
|
3354
|
-
|
|
3355
|
-
|
|
3356
|
-
|
|
3357
|
-
|
|
3358
|
-
return newIsOpen;
|
|
3359
|
-
});
|
|
3360
|
-
}
|
|
3206
|
+
if (!disabled) setIsOpen((prev) => {
|
|
3207
|
+
const newIsOpen = !prev;
|
|
3208
|
+
/* istanbul ignore next - branch depends on async DOM focus */
|
|
3209
|
+
if (newIsOpen) setTimeout(() => {
|
|
3210
|
+
/* istanbul ignore next - async focus behavior depends on DOM/timing */
|
|
3211
|
+
setFocusedIndex(0);
|
|
3212
|
+
/* istanbul ignore next - async focus behavior depends on DOM/timing */
|
|
3213
|
+
menuItemRefs.current[0]?.focus();
|
|
3214
|
+
}, 0);
|
|
3215
|
+
else {
|
|
3216
|
+
/* istanbul ignore next - focus reset depends on DOM/timing */
|
|
3217
|
+
setFocusedIndex(-1);
|
|
3218
|
+
/* istanbul ignore next - focus reset depends on DOM/timing */
|
|
3219
|
+
buttonRef.current?.focus();
|
|
3220
|
+
}
|
|
3221
|
+
return newIsOpen;
|
|
3222
|
+
});
|
|
3361
3223
|
};
|
|
3362
3224
|
/* istanbul ignore next - click handler behavior covered via integration; unit env flaky */
|
|
3363
3225
|
const handleItemClick = (onClick) => {
|
|
@@ -3439,7 +3301,7 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
|
|
|
3439
3301
|
"aria-label": "Toggle profile menu",
|
|
3440
3302
|
"aria-expanded": isOpen,
|
|
3441
3303
|
"aria-haspopup": "menu",
|
|
3442
|
-
"aria-controls": isOpen ? menuId :
|
|
3304
|
+
"aria-controls": isOpen ? menuId : void 0,
|
|
3443
3305
|
className: cn(buttonVariants["secondary"], defaultStyling, classNames?.button),
|
|
3444
3306
|
disabled,
|
|
3445
3307
|
onClick: handleToggle,
|
|
@@ -3470,11 +3332,9 @@ const ProfileMenu = ({ title, metaTitle, icon, content, disabled = false, classN
|
|
|
3470
3332
|
})]
|
|
3471
3333
|
}) });
|
|
3472
3334
|
};
|
|
3473
|
-
|
|
3474
3335
|
//#endregion
|
|
3475
3336
|
//#region src/utils/ssr.ts
|
|
3476
3337
|
const isSSR = () => typeof window === "undefined" || typeof document === "undefined";
|
|
3477
|
-
|
|
3478
3338
|
//#endregion
|
|
3479
3339
|
//#region src/components/wysiwygEditor/index.tsx
|
|
3480
3340
|
const BoldIcon = () => /* @__PURE__ */ jsx(IconBold, {
|
|
@@ -3512,8 +3372,8 @@ const WysiwygEditor = forwardRef(({ id, content, className, placeholder, onChang
|
|
|
3512
3372
|
content,
|
|
3513
3373
|
immediatelyRender: false,
|
|
3514
3374
|
editable: !readOnly,
|
|
3515
|
-
onUpdate({ editor
|
|
3516
|
-
let sanitizedOutput = editor
|
|
3375
|
+
onUpdate({ editor }) {
|
|
3376
|
+
let sanitizedOutput = editor.getHTML().replaceAll(/<li><p>(.*?)<\/p><(\/?)(ol|li|ul)>/gi, "<li>$1<$2$3>");
|
|
3517
3377
|
sanitizedOutput = sanitizedOutput.replace(/(<p><\/p>\s*)+/gi, "<p></p>");
|
|
3518
3378
|
sanitizedOutput = sanitizedOutput.replace(/^(<p><\/p>\s*)+/gi, "");
|
|
3519
3379
|
sanitizedOutput = sanitizedOutput.replace(/(<p><\/p>\s*)+$/gi, "");
|
|
@@ -3598,7 +3458,7 @@ const WysiwygEditor = forwardRef(({ id, content, className, placeholder, onChang
|
|
|
3598
3458
|
children: error
|
|
3599
3459
|
})] });
|
|
3600
3460
|
});
|
|
3601
|
-
|
|
3602
3461
|
//#endregion
|
|
3603
3462
|
export { AccordionItem, AccordionWrapper, ActionIcon, Alert, AppleAppButtonIcon, AutoCompleteInput, Avatar, AvatarIndicator, Badge, BigBadge, BreadCrumb, Button, Checkbox, DatePickerInput, Divider, FavouriteButton, Filters, GoogleAppButtonIcon, HR, HamburgerMenuButton, Island, KebabMenu, Label, Loader, LogoBlack, Modal, NavButtons, NumberField, NumberedStepper, PageUnavailable, PasswordInput, PhoneInput, Popover, ProfileMenu, ProgressBar, RadioButton, Rating, RegionSelector, Reviews, ScrollToTop, SearchInput, Select, SettingsCard, Skeleton, SkillPill, Stepper, StickyMobileButtonWrapper, Table, TableCell, TableHeader, TableHeaderItem, TableHeaderRow, TableRow, TabsBadge, TabsWrapper, TextInput, Textarea, ThemeIcon, TimeInput, Toggle, Tooltip, TruncatedText, UnorderedList, UnorderedListItem, UnstyledButton, WysiwygEditor, buttonVariants };
|
|
3463
|
+
|
|
3604
3464
|
//# sourceMappingURL=index.js.map
|