@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.
Files changed (175) hide show
  1. package/dist/components/branding/HelpwaveBadge.js +30 -8
  2. package/dist/components/branding/HelpwaveBadge.js.map +1 -1
  3. package/dist/components/branding/HelpwaveBadge.mjs +30 -8
  4. package/dist/components/branding/HelpwaveBadge.mjs.map +1 -1
  5. package/dist/components/date/DatePicker.js +18 -20
  6. package/dist/components/date/DatePicker.js.map +1 -1
  7. package/dist/components/date/DatePicker.mjs +18 -20
  8. package/dist/components/date/DatePicker.mjs.map +1 -1
  9. package/dist/components/date/DayPicker.d.mts +1 -1
  10. package/dist/components/date/DayPicker.d.ts +1 -1
  11. package/dist/components/date/DayPicker.js +23 -11
  12. package/dist/components/date/DayPicker.js.map +1 -1
  13. package/dist/components/date/DayPicker.mjs +23 -11
  14. package/dist/components/date/DayPicker.mjs.map +1 -1
  15. package/dist/components/date/YearMonthPicker.js +106 -22
  16. package/dist/components/date/YearMonthPicker.js.map +1 -1
  17. package/dist/components/date/YearMonthPicker.mjs +106 -22
  18. package/dist/components/date/YearMonthPicker.mjs.map +1 -1
  19. package/dist/components/dialogs/ConfirmDialog.js +2 -2
  20. package/dist/components/dialogs/ConfirmDialog.js.map +1 -1
  21. package/dist/components/dialogs/ConfirmDialog.mjs +2 -2
  22. package/dist/components/dialogs/ConfirmDialog.mjs.map +1 -1
  23. package/dist/components/icons-and-geometry/Avatar.js +2 -2
  24. package/dist/components/icons-and-geometry/Avatar.js.map +1 -1
  25. package/dist/components/icons-and-geometry/Avatar.mjs +2 -2
  26. package/dist/components/icons-and-geometry/Avatar.mjs.map +1 -1
  27. package/dist/components/layout-and-navigation/Carousel.d.mts +1 -1
  28. package/dist/components/layout-and-navigation/Carousel.d.ts +1 -1
  29. package/dist/components/layout-and-navigation/Carousel.js +86 -28
  30. package/dist/components/layout-and-navigation/Carousel.js.map +1 -1
  31. package/dist/components/layout-and-navigation/Carousel.mjs +86 -28
  32. package/dist/components/layout-and-navigation/Carousel.mjs.map +1 -1
  33. package/dist/components/layout-and-navigation/Expandable.d.mts +3 -0
  34. package/dist/components/layout-and-navigation/Expandable.d.ts +3 -0
  35. package/dist/components/layout-and-navigation/Expandable.js +4 -3
  36. package/dist/components/layout-and-navigation/Expandable.js.map +1 -1
  37. package/dist/components/layout-and-navigation/Expandable.mjs +4 -3
  38. package/dist/components/layout-and-navigation/Expandable.mjs.map +1 -1
  39. package/dist/components/layout-and-navigation/FAQSection.js +4 -3
  40. package/dist/components/layout-and-navigation/FAQSection.js.map +1 -1
  41. package/dist/components/layout-and-navigation/FAQSection.mjs +4 -3
  42. package/dist/components/layout-and-navigation/FAQSection.mjs.map +1 -1
  43. package/dist/components/layout-and-navigation/Overlay.js +2 -2
  44. package/dist/components/layout-and-navigation/Overlay.js.map +1 -1
  45. package/dist/components/layout-and-navigation/Overlay.mjs +2 -2
  46. package/dist/components/layout-and-navigation/Overlay.mjs.map +1 -1
  47. package/dist/components/layout-and-navigation/SearchableList.d.mts +7 -6
  48. package/dist/components/layout-and-navigation/SearchableList.d.ts +7 -6
  49. package/dist/components/layout-and-navigation/SearchableList.js +114 -21
  50. package/dist/components/layout-and-navigation/SearchableList.js.map +1 -1
  51. package/dist/components/layout-and-navigation/SearchableList.mjs +114 -21
  52. package/dist/components/layout-and-navigation/SearchableList.mjs.map +1 -1
  53. package/dist/components/layout-and-navigation/StepperBar.js +6 -6
  54. package/dist/components/layout-and-navigation/StepperBar.js.map +1 -1
  55. package/dist/components/layout-and-navigation/StepperBar.mjs +6 -6
  56. package/dist/components/layout-and-navigation/StepperBar.mjs.map +1 -1
  57. package/dist/components/layout-and-navigation/Table.js +1 -1
  58. package/dist/components/layout-and-navigation/Table.js.map +1 -1
  59. package/dist/components/layout-and-navigation/Table.mjs +1 -1
  60. package/dist/components/layout-and-navigation/Table.mjs.map +1 -1
  61. package/dist/components/layout-and-navigation/Tile.d.mts +10 -15
  62. package/dist/components/layout-and-navigation/Tile.d.ts +10 -15
  63. package/dist/components/layout-and-navigation/Tile.js +30 -8
  64. package/dist/components/layout-and-navigation/Tile.js.map +1 -1
  65. package/dist/components/layout-and-navigation/Tile.mjs +30 -8
  66. package/dist/components/layout-and-navigation/Tile.mjs.map +1 -1
  67. package/dist/components/loading-states/ProgressIndicator.js +2 -2
  68. package/dist/components/loading-states/ProgressIndicator.js.map +1 -1
  69. package/dist/components/loading-states/ProgressIndicator.mjs +2 -2
  70. package/dist/components/loading-states/ProgressIndicator.mjs.map +1 -1
  71. package/dist/components/modals/ConfirmModal.js +2 -2
  72. package/dist/components/modals/ConfirmModal.js.map +1 -1
  73. package/dist/components/modals/ConfirmModal.mjs +2 -2
  74. package/dist/components/modals/ConfirmModal.mjs.map +1 -1
  75. package/dist/components/modals/DiscardChangesModal.js +2 -2
  76. package/dist/components/modals/DiscardChangesModal.js.map +1 -1
  77. package/dist/components/modals/DiscardChangesModal.mjs +2 -2
  78. package/dist/components/modals/DiscardChangesModal.mjs.map +1 -1
  79. package/dist/components/modals/InputModal.js +2 -2
  80. package/dist/components/modals/InputModal.js.map +1 -1
  81. package/dist/components/modals/InputModal.mjs +2 -2
  82. package/dist/components/modals/InputModal.mjs.map +1 -1
  83. package/dist/components/modals/LanguageModal.js +384 -150
  84. package/dist/components/modals/LanguageModal.js.map +1 -1
  85. package/dist/components/modals/LanguageModal.mjs +383 -149
  86. package/dist/components/modals/LanguageModal.mjs.map +1 -1
  87. package/dist/components/modals/ThemeModal.js +385 -154
  88. package/dist/components/modals/ThemeModal.js.map +1 -1
  89. package/dist/components/modals/ThemeModal.mjs +382 -151
  90. package/dist/components/modals/ThemeModal.mjs.map +1 -1
  91. package/dist/components/properties/CheckboxProperty.js +1 -1
  92. package/dist/components/properties/CheckboxProperty.js.map +1 -1
  93. package/dist/components/properties/CheckboxProperty.mjs +1 -1
  94. package/dist/components/properties/CheckboxProperty.mjs.map +1 -1
  95. package/dist/components/properties/DateProperty.js +1 -1
  96. package/dist/components/properties/DateProperty.js.map +1 -1
  97. package/dist/components/properties/DateProperty.mjs +1 -1
  98. package/dist/components/properties/DateProperty.mjs.map +1 -1
  99. package/dist/components/properties/MultiSelectProperty.d.mts +1 -0
  100. package/dist/components/properties/MultiSelectProperty.d.ts +1 -0
  101. package/dist/components/properties/MultiSelectProperty.js +482 -430
  102. package/dist/components/properties/MultiSelectProperty.js.map +1 -1
  103. package/dist/components/properties/MultiSelectProperty.mjs +478 -426
  104. package/dist/components/properties/MultiSelectProperty.mjs.map +1 -1
  105. package/dist/components/properties/NumberProperty.js +1 -1
  106. package/dist/components/properties/NumberProperty.js.map +1 -1
  107. package/dist/components/properties/NumberProperty.mjs +1 -1
  108. package/dist/components/properties/NumberProperty.mjs.map +1 -1
  109. package/dist/components/properties/PropertyBase.js +1 -1
  110. package/dist/components/properties/PropertyBase.js.map +1 -1
  111. package/dist/components/properties/PropertyBase.mjs +1 -1
  112. package/dist/components/properties/PropertyBase.mjs.map +1 -1
  113. package/dist/components/properties/SelectProperty.d.mts +3 -3
  114. package/dist/components/properties/SelectProperty.d.ts +3 -3
  115. package/dist/components/properties/SelectProperty.js +404 -263
  116. package/dist/components/properties/SelectProperty.js.map +1 -1
  117. package/dist/components/properties/SelectProperty.mjs +404 -263
  118. package/dist/components/properties/SelectProperty.mjs.map +1 -1
  119. package/dist/components/properties/TextProperty.js +1 -1
  120. package/dist/components/properties/TextProperty.js.map +1 -1
  121. package/dist/components/properties/TextProperty.mjs +1 -1
  122. package/dist/components/properties/TextProperty.mjs.map +1 -1
  123. package/dist/components/user-action/DateAndTimePicker.js +18 -20
  124. package/dist/components/user-action/DateAndTimePicker.js.map +1 -1
  125. package/dist/components/user-action/DateAndTimePicker.mjs +18 -20
  126. package/dist/components/user-action/DateAndTimePicker.mjs.map +1 -1
  127. package/dist/components/user-action/Menu.d.mts +14 -8
  128. package/dist/components/user-action/Menu.d.ts +14 -8
  129. package/dist/components/user-action/Menu.js +32 -11
  130. package/dist/components/user-action/Menu.js.map +1 -1
  131. package/dist/components/user-action/Menu.mjs +32 -11
  132. package/dist/components/user-action/Menu.mjs.map +1 -1
  133. package/dist/components/user-action/MultiSelect.d.mts +10 -16
  134. package/dist/components/user-action/MultiSelect.d.ts +10 -16
  135. package/dist/components/user-action/MultiSelect.js +485 -312
  136. package/dist/components/user-action/MultiSelect.js.map +1 -1
  137. package/dist/components/user-action/MultiSelect.mjs +482 -310
  138. package/dist/components/user-action/MultiSelect.mjs.map +1 -1
  139. package/dist/components/user-action/Select.d.mts +5 -18
  140. package/dist/components/user-action/Select.d.ts +5 -18
  141. package/dist/components/user-action/Select.js +309 -113
  142. package/dist/components/user-action/Select.js.map +1 -1
  143. package/dist/components/user-action/Select.mjs +304 -107
  144. package/dist/components/user-action/Select.mjs.map +1 -1
  145. package/dist/components/user-action/Tooltip.js +2 -2
  146. package/dist/components/user-action/Tooltip.js.map +1 -1
  147. package/dist/components/user-action/Tooltip.mjs +2 -2
  148. package/dist/components/user-action/Tooltip.mjs.map +1 -1
  149. package/dist/css/globals.css +213 -205
  150. package/dist/css/uncompiled/globals.css +136 -72
  151. package/dist/hooks/useSearch.d.mts +17 -0
  152. package/dist/hooks/useSearch.d.ts +17 -0
  153. package/dist/hooks/useSearch.js +66 -0
  154. package/dist/hooks/useSearch.js.map +1 -0
  155. package/dist/hooks/useSearch.mjs +42 -0
  156. package/dist/hooks/useSearch.mjs.map +1 -0
  157. package/dist/index.d.mts +7 -5
  158. package/dist/index.d.ts +7 -5
  159. package/dist/index.js +555 -463
  160. package/dist/index.js.map +1 -1
  161. package/dist/index.mjs +517 -427
  162. package/dist/index.mjs.map +1 -1
  163. package/dist/util/PropsWithFunctionChildren.d.mts +14 -0
  164. package/dist/util/PropsWithFunctionChildren.d.ts +14 -0
  165. package/dist/util/PropsWithFunctionChildren.js +38 -0
  166. package/dist/util/PropsWithFunctionChildren.js.map +1 -0
  167. package/dist/util/PropsWithFunctionChildren.mjs +14 -0
  168. package/dist/util/PropsWithFunctionChildren.mjs.map +1 -0
  169. package/dist/util/simpleSearch.d.mts +2 -2
  170. package/dist/util/simpleSearch.d.ts +2 -2
  171. package/dist/util/simpleSearch.js +4 -1
  172. package/dist/util/simpleSearch.js.map +1 -1
  173. package/dist/util/simpleSearch.mjs +4 -1
  174. package/dist/util/simpleSearch.mjs.map +1 -1
  175. 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 import_react3 = require("@headlessui/react");
38
- var import_lucide_react = require("lucide-react");
39
- var import_react4 = require("react");
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/util/simpleSearch.ts
61
- var MultiSearchWithMapping = (search, objects, mapping) => {
62
- return objects.filter((object) => {
63
- const mappedSearchKeywords = mapping(object).map((value) => value.toLowerCase().trim());
64
- return !!mappedSearchKeywords.find((value) => value.includes(search.toLowerCase().trim()));
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 import_react2 = require("react");
102
+ var import_react4 = require("react");
70
103
  var import_clsx2 = __toESM(require("clsx"));
71
104
 
72
105
  // src/hooks/useSaveDelay.ts
73
- var import_react = require("react");
106
+ var import_react3 = require("react");
74
107
  function useSaveDelay(setNotificationStatus, delay) {
75
- const [updateTimer, setUpdateTimer] = (0, import_react.useState)(void 0);
76
- const [notificationTimer, setNotificationTimer] = (0, import_react.useState)(void 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, import_react.useEffect)(() => {
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 import_jsx_runtime2 = require("react/jsx-runtime");
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, import_react2.useRef)(null);
137
- (0, import_react2.useEffect)(() => {
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, import_jsx_runtime2.jsxs)("div", { className: (0, import_clsx2.default)({ "w-full": expanded }, containerClassName), children: [
143
- label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label, { ...label, htmlFor: id, className: (0, import_clsx2.default)("mb-1", label.className) }),
144
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
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, import_react2.forwardRef)(function FormInput2({
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, import_jsx_runtime2.jsx)(
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, import_jsx_runtime2.jsxs)("div", { className: (0, import_clsx2.default)("flex flex-col gap-y-1", containerClassName), children: [
204
- labelText && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { htmlFor: id, className: (0, import_clsx2.default)("textstyle-label-md", labelClassName), children: [
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, import_jsx_runtime2.jsx)("span", { className: "text-primary font-bold", children: "*" })
239
+ required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-primary font-bold", children: "*" })
207
240
  ] }),
208
241
  input,
209
- errorText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: id, className: (0, import_clsx2.default)("text-negative", errorClassName), children: errorText })
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 import_jsx_runtime3 = require("react/jsx-runtime");
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
- let filteredOptions = isHidingCurrentValue ? options.filter((option) => option.value !== value) : options;
230
- if (!showDisabledOptions) {
231
- filteredOptions = filteredOptions.filter((value2) => !value2.disabled);
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 borderColor = "border-menu-border";
238
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx3.default)(className), children: [
239
- label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Label, { ...label, labelType: label.labelType ?? "labelBig", className: (0, import_clsx3.default)("mb-1", label.className) }),
240
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react3.Menu, { as: "div", className: "relative text-menu-text", children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
241
- /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
242
- import_react3.Menu.Button,
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
- className: (0, import_clsx3.default)(
245
- "inline-flex w-full justify-between items-center rounded-t-lg border-2 px-4 py-2 font-medium bg-menu-background text-menu-text",
246
- textColor,
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 text-disabled": isDisabled
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, import_jsx_runtime3.jsx)("span", { children: selectedDisplayOverwrite ?? selectedOption?.label ?? hintText }),
257
- open ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ChevronDown, {})
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, import_jsx_runtime3.jsxs)(
262
- import_react3.Menu.Items,
490
+ isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
491
+ "div",
263
492
  {
264
- className: "absolute w-full z-10 rounded-b-lg bg-menu-background text-menu-text shadow-lg max-h-[500px] overflow-y-auto",
265
- children: [
266
- (additionalItems ?? []).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
267
- "div",
268
- {
269
- className: (0, import_clsx3.default)(borderColor, "px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0", {
270
- "border-b-0 rounded-b-lg": filteredOptions.length === 0 && index === (additionalItems?.length ?? 1) - 1
271
- }),
272
- children: item
273
- },
274
- `additionalItems${index}`
275
- )),
276
- filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react3.Menu.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
277
- "div",
278
- {
279
- className: (0, import_clsx3.default)(
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
- children: option.label
297
- }
298
- ) }, `item${index}`))
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, import_react4.useState)(value);
313
- (0, import_react4.useEffect)(() => {
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, import_jsx_runtime3.jsx)(
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
  });