@helpwave/hightide 0.1.7 → 0.1.8
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/branding/HelpwaveBadge.js +30 -8
- package/dist/components/branding/HelpwaveBadge.js.map +1 -1
- package/dist/components/branding/HelpwaveBadge.mjs +30 -8
- package/dist/components/branding/HelpwaveBadge.mjs.map +1 -1
- package/dist/components/date/DatePicker.js +18 -20
- package/dist/components/date/DatePicker.js.map +1 -1
- package/dist/components/date/DatePicker.mjs +18 -20
- package/dist/components/date/DatePicker.mjs.map +1 -1
- package/dist/components/date/DayPicker.d.mts +1 -1
- package/dist/components/date/DayPicker.d.ts +1 -1
- package/dist/components/date/DayPicker.js +23 -11
- package/dist/components/date/DayPicker.js.map +1 -1
- package/dist/components/date/DayPicker.mjs +23 -11
- package/dist/components/date/DayPicker.mjs.map +1 -1
- package/dist/components/date/YearMonthPicker.js +106 -22
- package/dist/components/date/YearMonthPicker.js.map +1 -1
- package/dist/components/date/YearMonthPicker.mjs +106 -22
- package/dist/components/date/YearMonthPicker.mjs.map +1 -1
- package/dist/components/dialogs/ConfirmDialog.js +2 -2
- package/dist/components/dialogs/ConfirmDialog.js.map +1 -1
- package/dist/components/dialogs/ConfirmDialog.mjs +2 -2
- package/dist/components/dialogs/ConfirmDialog.mjs.map +1 -1
- package/dist/components/icons-and-geometry/Avatar.js +2 -2
- package/dist/components/icons-and-geometry/Avatar.js.map +1 -1
- package/dist/components/icons-and-geometry/Avatar.mjs +2 -2
- package/dist/components/icons-and-geometry/Avatar.mjs.map +1 -1
- package/dist/components/layout-and-navigation/Carousel.d.mts +1 -1
- package/dist/components/layout-and-navigation/Carousel.d.ts +1 -1
- package/dist/components/layout-and-navigation/Carousel.js +86 -28
- package/dist/components/layout-and-navigation/Carousel.js.map +1 -1
- package/dist/components/layout-and-navigation/Carousel.mjs +86 -28
- package/dist/components/layout-and-navigation/Carousel.mjs.map +1 -1
- package/dist/components/layout-and-navigation/Expandable.d.mts +3 -0
- package/dist/components/layout-and-navigation/Expandable.d.ts +3 -0
- package/dist/components/layout-and-navigation/Expandable.js +4 -3
- package/dist/components/layout-and-navigation/Expandable.js.map +1 -1
- package/dist/components/layout-and-navigation/Expandable.mjs +4 -3
- package/dist/components/layout-and-navigation/Expandable.mjs.map +1 -1
- package/dist/components/layout-and-navigation/FAQSection.js +4 -3
- package/dist/components/layout-and-navigation/FAQSection.js.map +1 -1
- package/dist/components/layout-and-navigation/FAQSection.mjs +4 -3
- package/dist/components/layout-and-navigation/FAQSection.mjs.map +1 -1
- package/dist/components/layout-and-navigation/Overlay.js +2 -2
- package/dist/components/layout-and-navigation/Overlay.js.map +1 -1
- package/dist/components/layout-and-navigation/Overlay.mjs +2 -2
- package/dist/components/layout-and-navigation/Overlay.mjs.map +1 -1
- package/dist/components/layout-and-navigation/SearchableList.d.mts +7 -6
- package/dist/components/layout-and-navigation/SearchableList.d.ts +7 -6
- package/dist/components/layout-and-navigation/SearchableList.js +114 -21
- package/dist/components/layout-and-navigation/SearchableList.js.map +1 -1
- package/dist/components/layout-and-navigation/SearchableList.mjs +114 -21
- package/dist/components/layout-and-navigation/SearchableList.mjs.map +1 -1
- package/dist/components/layout-and-navigation/StepperBar.js +6 -6
- package/dist/components/layout-and-navigation/StepperBar.js.map +1 -1
- package/dist/components/layout-and-navigation/StepperBar.mjs +6 -6
- package/dist/components/layout-and-navigation/StepperBar.mjs.map +1 -1
- package/dist/components/layout-and-navigation/Table.js +1 -1
- package/dist/components/layout-and-navigation/Table.js.map +1 -1
- package/dist/components/layout-and-navigation/Table.mjs +1 -1
- package/dist/components/layout-and-navigation/Table.mjs.map +1 -1
- package/dist/components/layout-and-navigation/Tile.d.mts +10 -15
- package/dist/components/layout-and-navigation/Tile.d.ts +10 -15
- package/dist/components/layout-and-navigation/Tile.js +30 -8
- package/dist/components/layout-and-navigation/Tile.js.map +1 -1
- package/dist/components/layout-and-navigation/Tile.mjs +30 -8
- package/dist/components/layout-and-navigation/Tile.mjs.map +1 -1
- package/dist/components/loading-states/ProgressIndicator.js +2 -2
- package/dist/components/loading-states/ProgressIndicator.js.map +1 -1
- package/dist/components/loading-states/ProgressIndicator.mjs +2 -2
- package/dist/components/loading-states/ProgressIndicator.mjs.map +1 -1
- package/dist/components/modals/ConfirmModal.js +2 -2
- package/dist/components/modals/ConfirmModal.js.map +1 -1
- package/dist/components/modals/ConfirmModal.mjs +2 -2
- package/dist/components/modals/ConfirmModal.mjs.map +1 -1
- package/dist/components/modals/DiscardChangesModal.js +2 -2
- package/dist/components/modals/DiscardChangesModal.js.map +1 -1
- package/dist/components/modals/DiscardChangesModal.mjs +2 -2
- package/dist/components/modals/DiscardChangesModal.mjs.map +1 -1
- package/dist/components/modals/InputModal.js +2 -2
- package/dist/components/modals/InputModal.js.map +1 -1
- package/dist/components/modals/InputModal.mjs +2 -2
- package/dist/components/modals/InputModal.mjs.map +1 -1
- package/dist/components/modals/LanguageModal.js +384 -150
- package/dist/components/modals/LanguageModal.js.map +1 -1
- package/dist/components/modals/LanguageModal.mjs +383 -149
- package/dist/components/modals/LanguageModal.mjs.map +1 -1
- package/dist/components/modals/ThemeModal.js +385 -154
- package/dist/components/modals/ThemeModal.js.map +1 -1
- package/dist/components/modals/ThemeModal.mjs +382 -151
- package/dist/components/modals/ThemeModal.mjs.map +1 -1
- package/dist/components/properties/CheckboxProperty.js +1 -1
- package/dist/components/properties/CheckboxProperty.js.map +1 -1
- package/dist/components/properties/CheckboxProperty.mjs +1 -1
- package/dist/components/properties/CheckboxProperty.mjs.map +1 -1
- package/dist/components/properties/DateProperty.js +1 -1
- package/dist/components/properties/DateProperty.js.map +1 -1
- package/dist/components/properties/DateProperty.mjs +1 -1
- package/dist/components/properties/DateProperty.mjs.map +1 -1
- package/dist/components/properties/MultiSelectProperty.d.mts +1 -0
- package/dist/components/properties/MultiSelectProperty.d.ts +1 -0
- package/dist/components/properties/MultiSelectProperty.js +482 -430
- package/dist/components/properties/MultiSelectProperty.js.map +1 -1
- package/dist/components/properties/MultiSelectProperty.mjs +478 -426
- package/dist/components/properties/MultiSelectProperty.mjs.map +1 -1
- package/dist/components/properties/NumberProperty.js +1 -1
- package/dist/components/properties/NumberProperty.js.map +1 -1
- package/dist/components/properties/NumberProperty.mjs +1 -1
- package/dist/components/properties/NumberProperty.mjs.map +1 -1
- package/dist/components/properties/PropertyBase.js +1 -1
- package/dist/components/properties/PropertyBase.js.map +1 -1
- package/dist/components/properties/PropertyBase.mjs +1 -1
- package/dist/components/properties/PropertyBase.mjs.map +1 -1
- package/dist/components/properties/SelectProperty.d.mts +3 -3
- package/dist/components/properties/SelectProperty.d.ts +3 -3
- package/dist/components/properties/SelectProperty.js +404 -263
- package/dist/components/properties/SelectProperty.js.map +1 -1
- package/dist/components/properties/SelectProperty.mjs +404 -263
- package/dist/components/properties/SelectProperty.mjs.map +1 -1
- package/dist/components/properties/TextProperty.js +1 -1
- package/dist/components/properties/TextProperty.js.map +1 -1
- package/dist/components/properties/TextProperty.mjs +1 -1
- package/dist/components/properties/TextProperty.mjs.map +1 -1
- package/dist/components/user-action/DateAndTimePicker.js +18 -20
- package/dist/components/user-action/DateAndTimePicker.js.map +1 -1
- package/dist/components/user-action/DateAndTimePicker.mjs +18 -20
- package/dist/components/user-action/DateAndTimePicker.mjs.map +1 -1
- package/dist/components/user-action/Menu.d.mts +14 -8
- package/dist/components/user-action/Menu.d.ts +14 -8
- package/dist/components/user-action/Menu.js +32 -11
- package/dist/components/user-action/Menu.js.map +1 -1
- package/dist/components/user-action/Menu.mjs +32 -11
- package/dist/components/user-action/Menu.mjs.map +1 -1
- package/dist/components/user-action/MultiSelect.d.mts +10 -16
- package/dist/components/user-action/MultiSelect.d.ts +10 -16
- package/dist/components/user-action/MultiSelect.js +485 -312
- package/dist/components/user-action/MultiSelect.js.map +1 -1
- package/dist/components/user-action/MultiSelect.mjs +482 -310
- package/dist/components/user-action/MultiSelect.mjs.map +1 -1
- package/dist/components/user-action/Select.d.mts +5 -18
- package/dist/components/user-action/Select.d.ts +5 -18
- package/dist/components/user-action/Select.js +309 -113
- package/dist/components/user-action/Select.js.map +1 -1
- package/dist/components/user-action/Select.mjs +304 -107
- package/dist/components/user-action/Select.mjs.map +1 -1
- package/dist/components/user-action/Tooltip.js +2 -2
- package/dist/components/user-action/Tooltip.js.map +1 -1
- package/dist/components/user-action/Tooltip.mjs +2 -2
- package/dist/components/user-action/Tooltip.mjs.map +1 -1
- package/dist/css/globals.css +213 -205
- package/dist/css/uncompiled/globals.css +136 -72
- package/dist/hooks/useSearch.d.mts +17 -0
- package/dist/hooks/useSearch.d.ts +17 -0
- package/dist/hooks/useSearch.js +66 -0
- package/dist/hooks/useSearch.js.map +1 -0
- package/dist/hooks/useSearch.mjs +42 -0
- package/dist/hooks/useSearch.mjs.map +1 -0
- package/dist/index.d.mts +7 -5
- package/dist/index.d.ts +7 -5
- package/dist/index.js +555 -463
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +517 -427
- package/dist/index.mjs.map +1 -1
- package/dist/util/PropsWithFunctionChildren.d.mts +14 -0
- package/dist/util/PropsWithFunctionChildren.d.ts +14 -0
- package/dist/util/PropsWithFunctionChildren.js +38 -0
- package/dist/util/PropsWithFunctionChildren.js.map +1 -0
- package/dist/util/PropsWithFunctionChildren.mjs +14 -0
- package/dist/util/PropsWithFunctionChildren.mjs.map +1 -0
- package/dist/util/simpleSearch.d.mts +2 -2
- package/dist/util/simpleSearch.d.ts +2 -2
- package/dist/util/simpleSearch.js +4 -1
- package/dist/util/simpleSearch.js.map +1 -1
- package/dist/util/simpleSearch.mjs +4 -1
- package/dist/util/simpleSearch.mjs.map +1 -1
- package/package.json +1 -2
|
@@ -29,15 +29,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
29
29
|
// src/components/user-action/Select.tsx
|
|
30
30
|
var Select_exports = {};
|
|
31
31
|
__export(Select_exports, {
|
|
32
|
-
SearchableSelect: () => SearchableSelect,
|
|
33
32
|
Select: () => Select,
|
|
34
33
|
SelectUncontrolled: () => SelectUncontrolled
|
|
35
34
|
});
|
|
36
35
|
module.exports = __toCommonJS(Select_exports);
|
|
37
|
-
var
|
|
38
|
-
var
|
|
39
|
-
var
|
|
40
|
-
var import_clsx3 = __toESM(require("clsx"));
|
|
36
|
+
var import_lucide_react3 = require("lucide-react");
|
|
37
|
+
var import_react7 = require("react");
|
|
38
|
+
var import_clsx6 = __toESM(require("clsx"));
|
|
41
39
|
|
|
42
40
|
// src/components/user-action/Label.tsx
|
|
43
41
|
var import_clsx = __toESM(require("clsx"));
|
|
@@ -57,23 +55,58 @@ var Label = ({
|
|
|
57
55
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { ...props, className: (0, import_clsx.default)(styleMapping[labelType], className), children: children ? children : name });
|
|
58
56
|
};
|
|
59
57
|
|
|
60
|
-
// src/
|
|
61
|
-
var
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
58
|
+
// src/components/layout-and-navigation/SearchableList.tsx
|
|
59
|
+
var import_lucide_react = require("lucide-react");
|
|
60
|
+
var import_clsx4 = __toESM(require("clsx"));
|
|
61
|
+
|
|
62
|
+
// src/localization/LanguageProvider.tsx
|
|
63
|
+
var import_react2 = require("react");
|
|
64
|
+
|
|
65
|
+
// src/hooks/useLocalStorage.ts
|
|
66
|
+
var import_react = require("react");
|
|
67
|
+
|
|
68
|
+
// src/localization/util.ts
|
|
69
|
+
var languages = ["en", "de"];
|
|
70
|
+
var languagesLocalNames = {
|
|
71
|
+
en: "English",
|
|
72
|
+
de: "Deutsch"
|
|
73
|
+
};
|
|
74
|
+
var DEFAULT_LANGUAGE = "en";
|
|
75
|
+
var LanguageUtil = {
|
|
76
|
+
languages,
|
|
77
|
+
DEFAULT_LANGUAGE,
|
|
78
|
+
languagesLocalNames
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
// src/localization/LanguageProvider.tsx
|
|
82
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
83
|
+
var LanguageContext = (0, import_react2.createContext)({
|
|
84
|
+
language: LanguageUtil.DEFAULT_LANGUAGE,
|
|
85
|
+
setLanguage: (v) => v
|
|
86
|
+
});
|
|
87
|
+
var useLanguage = () => (0, import_react2.useContext)(LanguageContext);
|
|
88
|
+
|
|
89
|
+
// src/localization/useTranslation.ts
|
|
90
|
+
var useTranslation = (defaults, translationOverwrite = {}) => {
|
|
91
|
+
const { language: languageProp, translation: overwrite } = translationOverwrite;
|
|
92
|
+
const { language: inferredLanguage } = useLanguage();
|
|
93
|
+
const usedLanguage = languageProp ?? inferredLanguage;
|
|
94
|
+
let defaultValues = defaults[usedLanguage];
|
|
95
|
+
if (overwrite && overwrite[usedLanguage]) {
|
|
96
|
+
defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
|
|
97
|
+
}
|
|
98
|
+
return defaultValues;
|
|
66
99
|
};
|
|
67
100
|
|
|
68
101
|
// src/components/user-action/Input.tsx
|
|
69
|
-
var
|
|
102
|
+
var import_react4 = require("react");
|
|
70
103
|
var import_clsx2 = __toESM(require("clsx"));
|
|
71
104
|
|
|
72
105
|
// src/hooks/useSaveDelay.ts
|
|
73
|
-
var
|
|
106
|
+
var import_react3 = require("react");
|
|
74
107
|
function useSaveDelay(setNotificationStatus, delay) {
|
|
75
|
-
const [updateTimer, setUpdateTimer] = (0,
|
|
76
|
-
const [notificationTimer, setNotificationTimer] = (0,
|
|
108
|
+
const [updateTimer, setUpdateTimer] = (0, import_react3.useState)(void 0);
|
|
109
|
+
const [notificationTimer, setNotificationTimer] = (0, import_react3.useState)(void 0);
|
|
77
110
|
const restartTimer = (onSave) => {
|
|
78
111
|
clearTimeout(updateTimer);
|
|
79
112
|
setUpdateTimer(setTimeout(() => {
|
|
@@ -100,7 +133,7 @@ function useSaveDelay(setNotificationStatus, delay) {
|
|
|
100
133
|
setNotificationStatus(false);
|
|
101
134
|
}
|
|
102
135
|
};
|
|
103
|
-
(0,
|
|
136
|
+
(0, import_react3.useEffect)(() => {
|
|
104
137
|
return () => {
|
|
105
138
|
clearTimeout(updateTimer);
|
|
106
139
|
clearTimeout(notificationTimer);
|
|
@@ -113,7 +146,7 @@ function useSaveDelay(setNotificationStatus, delay) {
|
|
|
113
146
|
var noop = () => void 0;
|
|
114
147
|
|
|
115
148
|
// src/components/user-action/Input.tsx
|
|
116
|
-
var
|
|
149
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
117
150
|
var Input = ({
|
|
118
151
|
id,
|
|
119
152
|
type = "text",
|
|
@@ -133,15 +166,15 @@ var Input = ({
|
|
|
133
166
|
restartTimer,
|
|
134
167
|
clearUpdateTimer
|
|
135
168
|
} = useSaveDelay(() => void 0, 3e3);
|
|
136
|
-
const ref = (0,
|
|
137
|
-
(0,
|
|
169
|
+
const ref = (0, import_react4.useRef)(null);
|
|
170
|
+
(0, import_react4.useEffect)(() => {
|
|
138
171
|
if (autoFocus) {
|
|
139
172
|
ref.current?.focus();
|
|
140
173
|
}
|
|
141
174
|
}, [autoFocus]);
|
|
142
|
-
return /* @__PURE__ */ (0,
|
|
143
|
-
label && /* @__PURE__ */ (0,
|
|
144
|
-
/* @__PURE__ */ (0,
|
|
175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx2.default)({ "w-full": expanded }, containerClassName), children: [
|
|
176
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Label, { ...label, htmlFor: id, className: (0, import_clsx2.default)("mb-1", label.className) }),
|
|
177
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
145
178
|
"input",
|
|
146
179
|
{
|
|
147
180
|
ref,
|
|
@@ -174,7 +207,7 @@ var Input = ({
|
|
|
174
207
|
)
|
|
175
208
|
] });
|
|
176
209
|
};
|
|
177
|
-
var FormInput = (0,
|
|
210
|
+
var FormInput = (0, import_react4.forwardRef)(function FormInput2({
|
|
178
211
|
id,
|
|
179
212
|
labelText,
|
|
180
213
|
errorText,
|
|
@@ -185,7 +218,7 @@ var FormInput = (0, import_react2.forwardRef)(function FormInput2({
|
|
|
185
218
|
required,
|
|
186
219
|
...restProps
|
|
187
220
|
}, ref) {
|
|
188
|
-
const input = /* @__PURE__ */ (0,
|
|
221
|
+
const input = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
189
222
|
"input",
|
|
190
223
|
{
|
|
191
224
|
ref,
|
|
@@ -200,106 +233,291 @@ var FormInput = (0, import_react2.forwardRef)(function FormInput2({
|
|
|
200
233
|
)
|
|
201
234
|
}
|
|
202
235
|
);
|
|
203
|
-
return /* @__PURE__ */ (0,
|
|
204
|
-
labelText && /* @__PURE__ */ (0,
|
|
236
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx2.default)("flex flex-col gap-y-1", containerClassName), children: [
|
|
237
|
+
labelText && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { htmlFor: id, className: (0, import_clsx2.default)("textstyle-label-md", labelClassName), children: [
|
|
205
238
|
labelText,
|
|
206
|
-
required && /* @__PURE__ */ (0,
|
|
239
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-primary font-bold", children: "*" })
|
|
207
240
|
] }),
|
|
208
241
|
input,
|
|
209
|
-
errorText && /* @__PURE__ */ (0,
|
|
242
|
+
errorText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: id, className: (0, import_clsx2.default)("text-negative", errorClassName), children: errorText })
|
|
210
243
|
] });
|
|
211
244
|
});
|
|
212
245
|
|
|
246
|
+
// src/components/user-action/Button.tsx
|
|
247
|
+
var import_clsx3 = __toESM(require("clsx"));
|
|
248
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
249
|
+
var paddingMapping = {
|
|
250
|
+
small: "btn-sm",
|
|
251
|
+
medium: "btn-md",
|
|
252
|
+
large: "btn-lg"
|
|
253
|
+
};
|
|
254
|
+
var iconPaddingMapping = {
|
|
255
|
+
small: "icon-btn-sm",
|
|
256
|
+
medium: "icon-btn-md",
|
|
257
|
+
large: "icon-btn-lg"
|
|
258
|
+
};
|
|
259
|
+
var ButtonUtil = {
|
|
260
|
+
paddingMapping,
|
|
261
|
+
iconPaddingMapping
|
|
262
|
+
};
|
|
263
|
+
var IconButton = ({
|
|
264
|
+
children,
|
|
265
|
+
disabled = false,
|
|
266
|
+
color = "primary",
|
|
267
|
+
size = "medium",
|
|
268
|
+
onClick,
|
|
269
|
+
className,
|
|
270
|
+
...restProps
|
|
271
|
+
}) => {
|
|
272
|
+
const colorClasses = {
|
|
273
|
+
primary: "bg-button-solid-primary-background text-button-solid-primary-text",
|
|
274
|
+
secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
|
|
275
|
+
tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
|
|
276
|
+
positive: "bg-button-solid-positive-background text-button-solid-positive-text",
|
|
277
|
+
warning: "bg-button-solid-warning-background text-button-solid-warning-text",
|
|
278
|
+
negative: "bg-button-solid-negative-background text-button-solid-negative-text",
|
|
279
|
+
neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text"
|
|
280
|
+
}[color];
|
|
281
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
282
|
+
"button",
|
|
283
|
+
{
|
|
284
|
+
onClick: disabled ? void 0 : onClick,
|
|
285
|
+
disabled: disabled || onClick === void 0,
|
|
286
|
+
className: (0, import_clsx3.default)(
|
|
287
|
+
{
|
|
288
|
+
"text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
|
|
289
|
+
[(0, import_clsx3.default)(colorClasses, "hover:brightness-90")]: !disabled
|
|
290
|
+
},
|
|
291
|
+
ButtonUtil.iconPaddingMapping[size],
|
|
292
|
+
className
|
|
293
|
+
),
|
|
294
|
+
...restProps,
|
|
295
|
+
children
|
|
296
|
+
}
|
|
297
|
+
);
|
|
298
|
+
};
|
|
299
|
+
|
|
300
|
+
// src/hooks/useSearch.ts
|
|
301
|
+
var import_react5 = require("react");
|
|
302
|
+
|
|
303
|
+
// src/util/simpleSearch.ts
|
|
304
|
+
var MultiSearchWithMapping = (search, objects, mapping) => {
|
|
305
|
+
return objects.filter((object) => {
|
|
306
|
+
const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
|
|
307
|
+
if (!mappedSearchKeywords) {
|
|
308
|
+
return true;
|
|
309
|
+
}
|
|
310
|
+
return !!mappedSearchKeywords.find((value) => value.includes(search.toLowerCase().trim()));
|
|
311
|
+
});
|
|
312
|
+
};
|
|
313
|
+
|
|
314
|
+
// src/hooks/useSearch.ts
|
|
315
|
+
var useSearch = ({
|
|
316
|
+
list,
|
|
317
|
+
initialSearch,
|
|
318
|
+
searchMapping
|
|
319
|
+
}) => {
|
|
320
|
+
const [items, setItems] = (0, import_react5.useState)(list);
|
|
321
|
+
const [search, setSearch] = (0, import_react5.useState)(initialSearch);
|
|
322
|
+
(0, import_react5.useEffect)(() => {
|
|
323
|
+
setItems(list);
|
|
324
|
+
}, [list]);
|
|
325
|
+
const result = (0, import_react5.useMemo)(
|
|
326
|
+
() => MultiSearchWithMapping(search, items, searchMapping),
|
|
327
|
+
[search, items, searchMapping]
|
|
328
|
+
);
|
|
329
|
+
return {
|
|
330
|
+
result,
|
|
331
|
+
hasResult: result.length > 0,
|
|
332
|
+
allItems: items,
|
|
333
|
+
setItems,
|
|
334
|
+
search,
|
|
335
|
+
setSearch
|
|
336
|
+
};
|
|
337
|
+
};
|
|
338
|
+
|
|
339
|
+
// src/components/layout-and-navigation/SearchableList.tsx
|
|
340
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
341
|
+
var defaultSearchableListTranslation = {
|
|
342
|
+
en: {
|
|
343
|
+
search: "Search",
|
|
344
|
+
nothingFound: "Nothing found"
|
|
345
|
+
},
|
|
346
|
+
de: {
|
|
347
|
+
search: "Suche",
|
|
348
|
+
nothingFound: "Nichts gefunden"
|
|
349
|
+
}
|
|
350
|
+
};
|
|
351
|
+
var SearchableList = ({
|
|
352
|
+
overwriteTranslation,
|
|
353
|
+
list,
|
|
354
|
+
initialSearch = "",
|
|
355
|
+
searchMapping,
|
|
356
|
+
autoFocus,
|
|
357
|
+
minimumItemsForSearch = 6,
|
|
358
|
+
itemMapper,
|
|
359
|
+
className,
|
|
360
|
+
resultListClassName
|
|
361
|
+
}) => {
|
|
362
|
+
const translation = useTranslation(defaultSearchableListTranslation, overwriteTranslation);
|
|
363
|
+
const { result, hasResult, search, setSearch } = useSearch({ list, initialSearch, searchMapping });
|
|
364
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx4.default)("col gap-y-2", className), children: [
|
|
365
|
+
list.length > minimumItemsForSearch && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "row justify-between gap-x-4 items-center", children: [
|
|
366
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
367
|
+
Input,
|
|
368
|
+
{
|
|
369
|
+
value: search,
|
|
370
|
+
onChangeText: setSearch,
|
|
371
|
+
placeholder: translation.search,
|
|
372
|
+
autoFocus,
|
|
373
|
+
className: "w-full"
|
|
374
|
+
}
|
|
375
|
+
),
|
|
376
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconButton, { color: "neutral", disabled: search.length === 0, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.Search, { className: "w-full h-full" }) })
|
|
377
|
+
] }),
|
|
378
|
+
hasResult ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: (0, import_clsx4.default)("col gap-y-1", resultListClassName), children: result.map(itemMapper) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "row text-description py-2 px-2", children: translation.nothingFound })
|
|
379
|
+
] });
|
|
380
|
+
};
|
|
381
|
+
|
|
382
|
+
// src/components/layout-and-navigation/Tile.tsx
|
|
383
|
+
var import_clsx5 = __toESM(require("clsx"));
|
|
384
|
+
var import_lucide_react2 = require("lucide-react");
|
|
385
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
386
|
+
var Tile = ({
|
|
387
|
+
title,
|
|
388
|
+
description,
|
|
389
|
+
onClick,
|
|
390
|
+
isSelected = false,
|
|
391
|
+
isDisabled = false,
|
|
392
|
+
prefix,
|
|
393
|
+
suffix,
|
|
394
|
+
normalClassName = "hover:bg-primary/40 cursor-pointer",
|
|
395
|
+
selectedClassName = " bg-primary/20",
|
|
396
|
+
disabledClassName = "text-disabled-text bg-disabled-background cursor-not-allowed",
|
|
397
|
+
className
|
|
398
|
+
}) => {
|
|
399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
400
|
+
"div",
|
|
401
|
+
{
|
|
402
|
+
className: (0, import_clsx5.default)(
|
|
403
|
+
"row gap-x-2 w-full items-center",
|
|
404
|
+
{
|
|
405
|
+
[normalClassName]: !!onClick && !isDisabled,
|
|
406
|
+
[selectedClassName]: isSelected && !isDisabled,
|
|
407
|
+
[disabledClassName]: isDisabled
|
|
408
|
+
},
|
|
409
|
+
className
|
|
410
|
+
),
|
|
411
|
+
onClick: isDisabled ? void 0 : onClick,
|
|
412
|
+
children: [
|
|
413
|
+
prefix ?? (isSelected ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Check, { size: 24 }) : void 0),
|
|
414
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "col gap-y-0 w-full", children: [
|
|
415
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { className: (0, import_clsx5.default)(title.className ?? "textstyle-title-normal"), children: title.value }),
|
|
416
|
+
!!description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: (0, import_clsx5.default)(description.className ?? "textstyle-description"), children: description.value })
|
|
417
|
+
] }),
|
|
418
|
+
suffix
|
|
419
|
+
]
|
|
420
|
+
}
|
|
421
|
+
);
|
|
422
|
+
};
|
|
423
|
+
|
|
424
|
+
// src/hooks/useOutsideClick.ts
|
|
425
|
+
var import_react6 = require("react");
|
|
426
|
+
var useOutsideClick = (refs, handler) => {
|
|
427
|
+
(0, import_react6.useEffect)(() => {
|
|
428
|
+
const listener = (event) => {
|
|
429
|
+
if (event.target === null) return;
|
|
430
|
+
if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
|
|
431
|
+
return;
|
|
432
|
+
}
|
|
433
|
+
handler();
|
|
434
|
+
};
|
|
435
|
+
document.addEventListener("mousedown", listener);
|
|
436
|
+
document.addEventListener("touchstart", listener);
|
|
437
|
+
return () => {
|
|
438
|
+
document.removeEventListener("mousedown", listener);
|
|
439
|
+
document.removeEventListener("touchstart", listener);
|
|
440
|
+
};
|
|
441
|
+
}, [refs, handler]);
|
|
442
|
+
};
|
|
443
|
+
|
|
213
444
|
// src/components/user-action/Select.tsx
|
|
214
|
-
var
|
|
445
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
215
446
|
var Select = ({
|
|
216
447
|
value,
|
|
217
448
|
label,
|
|
218
449
|
options,
|
|
219
450
|
onChange,
|
|
220
|
-
isHidingCurrentValue = true,
|
|
221
451
|
hintText = "",
|
|
222
|
-
showDisabledOptions = true,
|
|
223
452
|
isDisabled,
|
|
453
|
+
isSearchEnabled = false,
|
|
224
454
|
className,
|
|
225
|
-
textColor = "text-menu-text",
|
|
226
|
-
additionalItems,
|
|
227
455
|
selectedDisplayOverwrite
|
|
228
456
|
}) => {
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
457
|
+
const triggerRef = (0, import_react7.useRef)(null);
|
|
458
|
+
const menuRef = (0, import_react7.useRef)(null);
|
|
459
|
+
const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
|
|
460
|
+
useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
|
|
233
461
|
const selectedOption = options.find((option) => option.value === value);
|
|
234
462
|
if (value !== void 0 && selectedOption === void 0 && selectedDisplayOverwrite === void 0) {
|
|
235
463
|
console.warn("The selected value is not found in the options list. This might be an error on your part or default behavior if it is complex data type on which === does not work. In case of the latter use selectedDisplayOverwrite to set your selected text or component");
|
|
236
464
|
}
|
|
237
|
-
const
|
|
238
|
-
return /* @__PURE__ */ (0,
|
|
239
|
-
label && /* @__PURE__ */ (0,
|
|
240
|
-
/* @__PURE__ */ (0,
|
|
241
|
-
/* @__PURE__ */ (0,
|
|
242
|
-
|
|
465
|
+
const isShowingHint = !selectedDisplayOverwrite && !selectedOption?.label;
|
|
466
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_clsx6.default)(className), children: [
|
|
467
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Label, { ...label, labelType: label.labelType ?? "labelBig", className: (0, import_clsx6.default)("mb-1", label.className) }),
|
|
468
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative", children: [
|
|
469
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
470
|
+
"button",
|
|
243
471
|
{
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
borderColor,
|
|
472
|
+
ref: triggerRef,
|
|
473
|
+
className: (0, import_clsx6.default)(
|
|
474
|
+
"btn-md justify-between w-full border-2",
|
|
248
475
|
{
|
|
249
476
|
"rounded-b-lg": !open,
|
|
250
|
-
"hover:border-primary": !isDisabled,
|
|
251
|
-
"bg-disabled-background cursor-not-allowed
|
|
477
|
+
"bg-menu-background border-menu-border hover:border-primary": !isDisabled,
|
|
478
|
+
"bg-disabled-background text-disabled-text border-disabled-background cursor-not-allowed": isDisabled
|
|
252
479
|
}
|
|
253
480
|
),
|
|
481
|
+
onClick: () => setIsOpen(!isOpen),
|
|
254
482
|
disabled: isDisabled,
|
|
255
483
|
children: [
|
|
256
|
-
/* @__PURE__ */ (0,
|
|
257
|
-
|
|
484
|
+
!isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-semibold text-menu-text", children: selectedDisplayOverwrite ?? selectedOption?.label }),
|
|
485
|
+
isShowingHint && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "textstyle-description", children: hintText }),
|
|
486
|
+
isOpen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ChevronDown, {})
|
|
258
487
|
]
|
|
259
488
|
}
|
|
260
489
|
),
|
|
261
|
-
/* @__PURE__ */ (0,
|
|
262
|
-
|
|
490
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
491
|
+
"div",
|
|
263
492
|
{
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
"px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0 cursor-pointer",
|
|
281
|
-
option.className,
|
|
282
|
-
borderColor,
|
|
283
|
-
{
|
|
284
|
-
"brightness-90": option.value === value,
|
|
285
|
-
"brightness-95": index % 2 === 1,
|
|
286
|
-
"text-disabled bg-disabled-background cursor-not-allowed": !!option.disabled,
|
|
287
|
-
"bg-menu-background text-menu-text hover:brightness-90 cursor-pointer": !option.disabled,
|
|
288
|
-
"rounded-b-lg": index === filteredOptions.length - 1
|
|
289
|
-
}
|
|
290
|
-
),
|
|
291
|
-
onClick: () => {
|
|
292
|
-
if (!option.disabled) {
|
|
493
|
+
ref: menuRef,
|
|
494
|
+
className: "absolute w-full z-10 rounded-lg mt-0.5 bg-menu-background text-menu-text shadow-around-md max-h-[500px] overflow-y-auto p-2",
|
|
495
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
496
|
+
SearchableList,
|
|
497
|
+
{
|
|
498
|
+
list: options,
|
|
499
|
+
minimumItemsForSearch: isSearchEnabled ? void 0 : options.length,
|
|
500
|
+
searchMapping: (item) => item.searchTags,
|
|
501
|
+
itemMapper: (option, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
502
|
+
Tile,
|
|
503
|
+
{
|
|
504
|
+
isSelected: selectedOption?.value === option.value,
|
|
505
|
+
className: "px-2 py-1 rounded-md",
|
|
506
|
+
disabledClassName: "text-disabled-text cursor-not-allowed",
|
|
507
|
+
title: { value: option.label, className: "font-semibold" },
|
|
508
|
+
onClick: () => {
|
|
293
509
|
onChange(option.value);
|
|
294
|
-
|
|
510
|
+
setIsOpen(false);
|
|
511
|
+
},
|
|
512
|
+
isDisabled: option.disabled
|
|
295
513
|
},
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
514
|
+
index
|
|
515
|
+
)
|
|
516
|
+
}
|
|
517
|
+
)
|
|
300
518
|
}
|
|
301
519
|
)
|
|
302
|
-
] })
|
|
520
|
+
] })
|
|
303
521
|
] });
|
|
304
522
|
};
|
|
305
523
|
var SelectUncontrolled = ({
|
|
@@ -309,13 +527,13 @@ var SelectUncontrolled = ({
|
|
|
309
527
|
hintText,
|
|
310
528
|
...props
|
|
311
529
|
}) => {
|
|
312
|
-
const [selected, setSelected] = (0,
|
|
313
|
-
(0,
|
|
530
|
+
const [selected, setSelected] = (0, import_react7.useState)(value);
|
|
531
|
+
(0, import_react7.useEffect)(() => {
|
|
314
532
|
if (options.find((options2) => options2.value === value)) {
|
|
315
533
|
setSelected(value);
|
|
316
534
|
}
|
|
317
535
|
}, [options, value]);
|
|
318
|
-
return /* @__PURE__ */ (0,
|
|
536
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
319
537
|
Select,
|
|
320
538
|
{
|
|
321
539
|
value: selected,
|
|
@@ -329,30 +547,8 @@ var SelectUncontrolled = ({
|
|
|
329
547
|
}
|
|
330
548
|
);
|
|
331
549
|
};
|
|
332
|
-
var SearchableSelect = ({
|
|
333
|
-
value,
|
|
334
|
-
options,
|
|
335
|
-
searchMapping,
|
|
336
|
-
...selectProps
|
|
337
|
-
}) => {
|
|
338
|
-
const [search, setSearch] = (0, import_react4.useState)("");
|
|
339
|
-
const filteredOptions = MultiSearchWithMapping(search, options, searchMapping);
|
|
340
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
341
|
-
Select,
|
|
342
|
-
{
|
|
343
|
-
value,
|
|
344
|
-
options: filteredOptions,
|
|
345
|
-
additionalItems: [/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "row gap-x-2 items-center", children: [
|
|
346
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, { autoFocus: true, value: search, onChangeText: setSearch, className: "w-full" }),
|
|
347
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Search, { className: "min-w-[1.5rem] min-h-[1.5rem]" })
|
|
348
|
-
] }, "selectSearch")],
|
|
349
|
-
...selectProps
|
|
350
|
-
}
|
|
351
|
-
);
|
|
352
|
-
};
|
|
353
550
|
// Annotate the CommonJS export names for ESM import in node:
|
|
354
551
|
0 && (module.exports = {
|
|
355
|
-
SearchableSelect,
|
|
356
552
|
Select,
|
|
357
553
|
SelectUncontrolled
|
|
358
554
|
});
|