@helpwave/hightide 0.0.15 → 0.0.16
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/index.d.mts +86 -2
- package/dist/index.d.ts +86 -2
- package/dist/index.js +5714 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +5541 -0
- package/dist/index.mjs.map +1 -1
- package/dist/util/news.d.mts +9 -9
- package/dist/util/news.d.ts +9 -9
- package/package.json +11 -7
- package/dist/components/Span.d.mts +0 -2
- package/dist/components/Span.d.ts +0 -2
- package/dist/components/Span.js +0 -2
- package/dist/components/Span.js.map +0 -1
- package/dist/components/Span.mjs +0 -1
- package/dist/components/Span.mjs.map +0 -1
- package/dist/components/examples/InputGroupExample.d.mts +0 -11
- package/dist/components/examples/InputGroupExample.d.ts +0 -11
- package/dist/components/examples/InputGroupExample.js +0 -466
- package/dist/components/examples/InputGroupExample.js.map +0 -1
- package/dist/components/examples/InputGroupExample.mjs +0 -436
- package/dist/components/examples/InputGroupExample.mjs.map +0 -1
- package/dist/components/examples/MultiSelectExample.d.mts +0 -14
- package/dist/components/examples/MultiSelectExample.d.ts +0 -14
- package/dist/components/examples/MultiSelectExample.js +0 -661
- package/dist/components/examples/MultiSelectExample.js.map +0 -1
- package/dist/components/examples/MultiSelectExample.mjs +0 -631
- package/dist/components/examples/MultiSelectExample.mjs.map +0 -1
- package/dist/components/examples/SearchableSelectExample.d.mts +0 -13
- package/dist/components/examples/SearchableSelectExample.d.ts +0 -13
- package/dist/components/examples/SearchableSelectExample.js +0 -365
- package/dist/components/examples/SearchableSelectExample.js.map +0 -1
- package/dist/components/examples/SearchableSelectExample.mjs +0 -335
- package/dist/components/examples/SearchableSelectExample.mjs.map +0 -1
- package/dist/components/examples/SelectExample.d.mts +0 -9
- package/dist/components/examples/SelectExample.d.ts +0 -9
- package/dist/components/examples/SelectExample.js +0 -180
- package/dist/components/examples/SelectExample.js.map +0 -1
- package/dist/components/examples/SelectExample.mjs +0 -145
- package/dist/components/examples/SelectExample.mjs.map +0 -1
- package/dist/components/examples/StackingModals.d.mts +0 -8
- package/dist/components/examples/StackingModals.d.ts +0 -8
- package/dist/components/examples/StackingModals.js +0 -498
- package/dist/components/examples/StackingModals.js.map +0 -1
- package/dist/components/examples/StackingModals.mjs +0 -463
- package/dist/components/examples/StackingModals.mjs.map +0 -1
- package/dist/components/examples/TableExample.d.mts +0 -13
- package/dist/components/examples/TableExample.d.ts +0 -13
- package/dist/components/examples/TableExample.js +0 -853
- package/dist/components/examples/TableExample.js.map +0 -1
- package/dist/components/examples/TableExample.mjs +0 -823
- package/dist/components/examples/TableExample.mjs.map +0 -1
- package/dist/components/examples/TextareaExample.d.mts +0 -12
- package/dist/components/examples/TextareaExample.d.ts +0 -12
- package/dist/components/examples/TextareaExample.js +0 -176
- package/dist/components/examples/TextareaExample.js.map +0 -1
- package/dist/components/examples/TextareaExample.mjs +0 -141
- package/dist/components/examples/TextareaExample.mjs.map +0 -1
- package/dist/components/examples/TileExample.d.mts +0 -14
- package/dist/components/examples/TileExample.d.ts +0 -14
- package/dist/components/examples/TileExample.js +0 -79
- package/dist/components/examples/TileExample.js.map +0 -1
- package/dist/components/examples/TileExample.mjs +0 -44
- package/dist/components/examples/TileExample.mjs.map +0 -1
- package/dist/components/examples/Title.d.mts +0 -2
- package/dist/components/examples/Title.d.ts +0 -2
- package/dist/components/examples/Title.js +0 -2
- package/dist/components/examples/Title.js.map +0 -1
- package/dist/components/examples/Title.mjs +0 -1
- package/dist/components/examples/Title.mjs.map +0 -1
- package/dist/components/examples/date/DateTimePickerExample.d.mts +0 -18
- package/dist/components/examples/date/DateTimePickerExample.d.ts +0 -18
- package/dist/components/examples/date/DateTimePickerExample.js +0 -879
- package/dist/components/examples/date/DateTimePickerExample.js.map +0 -1
- package/dist/components/examples/date/DateTimePickerExample.mjs +0 -844
- package/dist/components/examples/date/DateTimePickerExample.mjs.map +0 -1
- package/dist/components/examples/properties/CheckboxPropertyExample.d.mts +0 -16
- package/dist/components/examples/properties/CheckboxPropertyExample.d.ts +0 -16
- package/dist/components/examples/properties/CheckboxPropertyExample.js +0 -349
- package/dist/components/examples/properties/CheckboxPropertyExample.js.map +0 -1
- package/dist/components/examples/properties/CheckboxPropertyExample.mjs +0 -314
- package/dist/components/examples/properties/CheckboxPropertyExample.mjs.map +0 -1
- package/dist/components/examples/properties/DatePropertyExample.d.mts +0 -16
- package/dist/components/examples/properties/DatePropertyExample.d.ts +0 -16
- package/dist/components/examples/properties/DatePropertyExample.js +0 -460
- package/dist/components/examples/properties/DatePropertyExample.js.map +0 -1
- package/dist/components/examples/properties/DatePropertyExample.mjs +0 -430
- package/dist/components/examples/properties/DatePropertyExample.mjs.map +0 -1
- package/dist/components/examples/properties/MultiSelectPropertyExample.d.mts +0 -18
- package/dist/components/examples/properties/MultiSelectPropertyExample.d.ts +0 -18
- package/dist/components/examples/properties/MultiSelectPropertyExample.js +0 -848
- package/dist/components/examples/properties/MultiSelectPropertyExample.js.map +0 -1
- package/dist/components/examples/properties/MultiSelectPropertyExample.mjs +0 -818
- package/dist/components/examples/properties/MultiSelectPropertyExample.mjs.map +0 -1
- package/dist/components/examples/properties/NumberPropertyExample.d.mts +0 -14
- package/dist/components/examples/properties/NumberPropertyExample.d.ts +0 -14
- package/dist/components/examples/properties/NumberPropertyExample.js +0 -456
- package/dist/components/examples/properties/NumberPropertyExample.js.map +0 -1
- package/dist/components/examples/properties/NumberPropertyExample.mjs +0 -426
- package/dist/components/examples/properties/NumberPropertyExample.mjs.map +0 -1
- package/dist/components/examples/properties/SelectPropertyExample.d.mts +0 -17
- package/dist/components/examples/properties/SelectPropertyExample.d.ts +0 -17
- package/dist/components/examples/properties/SelectPropertyExample.js +0 -584
- package/dist/components/examples/properties/SelectPropertyExample.js.map +0 -1
- package/dist/components/examples/properties/SelectPropertyExample.mjs +0 -554
- package/dist/components/examples/properties/SelectPropertyExample.mjs.map +0 -1
- package/dist/components/examples/properties/TextPropertyExample.d.mts +0 -16
- package/dist/components/examples/properties/TextPropertyExample.d.ts +0 -16
- package/dist/components/examples/properties/TextPropertyExample.js +0 -405
- package/dist/components/examples/properties/TextPropertyExample.js.map +0 -1
- package/dist/components/examples/properties/TextPropertyExample.mjs +0 -370
- package/dist/components/examples/properties/TextPropertyExample.mjs.map +0 -1
|
@@ -1,466 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
|
|
30
|
-
// src/components/examples/InputGroupExample.tsx
|
|
31
|
-
var InputGroupExample_exports = {};
|
|
32
|
-
__export(InputGroupExample_exports, {
|
|
33
|
-
InputGroupExample: () => InputGroupExample
|
|
34
|
-
});
|
|
35
|
-
module.exports = __toCommonJS(InputGroupExample_exports);
|
|
36
|
-
var import_react6 = require("react");
|
|
37
|
-
|
|
38
|
-
// src/components/InputGroup.tsx
|
|
39
|
-
var import_react = require("react");
|
|
40
|
-
var import_lucide_react = require("lucide-react");
|
|
41
|
-
var import_clsx = __toESM(require("clsx"));
|
|
42
|
-
|
|
43
|
-
// src/util/noop.ts
|
|
44
|
-
var noop = () => void 0;
|
|
45
|
-
|
|
46
|
-
// src/components/InputGroup.tsx
|
|
47
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
48
|
-
var InputGroup = ({
|
|
49
|
-
children,
|
|
50
|
-
title,
|
|
51
|
-
expanded = true,
|
|
52
|
-
isExpandable = true,
|
|
53
|
-
disabled = false,
|
|
54
|
-
onChange = noop,
|
|
55
|
-
className = ""
|
|
56
|
-
}) => {
|
|
57
|
-
const [isExpanded, setIsExpanded] = (0, import_react.useState)(expanded);
|
|
58
|
-
(0, import_react.useEffect)(() => {
|
|
59
|
-
setIsExpanded(expanded);
|
|
60
|
-
}, [expanded]);
|
|
61
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)("col gap-y-4 p-4 bg-white rounded-xl", className), children: [
|
|
62
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
63
|
-
"div",
|
|
64
|
-
{
|
|
65
|
-
className: (0, import_clsx.default)(
|
|
66
|
-
"row justify-between items-center",
|
|
67
|
-
{
|
|
68
|
-
"cursor-pointer": isExpandable && !disabled,
|
|
69
|
-
"cursor-not-allowed": disabled
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
"text-primary": !disabled,
|
|
73
|
-
"text-primary/40": disabled
|
|
74
|
-
}
|
|
75
|
-
),
|
|
76
|
-
onClick: () => {
|
|
77
|
-
if (!isExpandable) {
|
|
78
|
-
return;
|
|
79
|
-
}
|
|
80
|
-
const updatedIsExpanded = !isExpanded;
|
|
81
|
-
onChange(updatedIsExpanded);
|
|
82
|
-
setIsExpanded(updatedIsExpanded);
|
|
83
|
-
},
|
|
84
|
-
children: [
|
|
85
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "textstyle-title-md", children: title }),
|
|
86
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)("rounded-full text-white w-6 h-6", {
|
|
87
|
-
"bg-primary": isExpandable && !disabled || expanded,
|
|
88
|
-
"bg-primary/40": disabled
|
|
89
|
-
}), children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronUp, { className: "-translate-y-[1px]", size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronDown, { className: "translate-y-[1px]", size: 24 }) })
|
|
90
|
-
]
|
|
91
|
-
}
|
|
92
|
-
),
|
|
93
|
-
isExpanded && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "col gap-y-2 h-full", children })
|
|
94
|
-
] });
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
// src/components/user-input/Select.tsx
|
|
98
|
-
var import_react2 = require("@headlessui/react");
|
|
99
|
-
var import_lucide_react2 = require("lucide-react");
|
|
100
|
-
var import_clsx2 = __toESM(require("clsx"));
|
|
101
|
-
|
|
102
|
-
// src/components/user-input/Label.tsx
|
|
103
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
104
|
-
var styleMapping = {
|
|
105
|
-
labelSmall: "textstyle-label-sm",
|
|
106
|
-
labelMedium: "textstyle-label-md",
|
|
107
|
-
labelBig: "textstyle-label-lg"
|
|
108
|
-
};
|
|
109
|
-
var Label = ({
|
|
110
|
-
children,
|
|
111
|
-
name,
|
|
112
|
-
labelType = "labelSmall",
|
|
113
|
-
...props
|
|
114
|
-
}) => {
|
|
115
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { ...props, children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styleMapping[labelType], children: name }) });
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
// src/components/user-input/Select.tsx
|
|
119
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
120
|
-
var Select = ({
|
|
121
|
-
value,
|
|
122
|
-
label,
|
|
123
|
-
options,
|
|
124
|
-
onChange,
|
|
125
|
-
isHidingCurrentValue = true,
|
|
126
|
-
hintText = "",
|
|
127
|
-
showDisabledOptions = true,
|
|
128
|
-
isDisabled,
|
|
129
|
-
className,
|
|
130
|
-
textColor = "text-menu-text",
|
|
131
|
-
hoverColor = "hover:brightness-90",
|
|
132
|
-
additionalItems,
|
|
133
|
-
selectedDisplayOverwrite
|
|
134
|
-
}) => {
|
|
135
|
-
let filteredOptions = isHidingCurrentValue ? options.filter((option) => option.value !== value) : options;
|
|
136
|
-
if (!showDisabledOptions) {
|
|
137
|
-
filteredOptions = filteredOptions.filter((value2) => !value2.disabled);
|
|
138
|
-
}
|
|
139
|
-
const selectedOption = options.find((option) => option.value === value);
|
|
140
|
-
if (value !== void 0 && selectedOption === void 0 && selectedDisplayOverwrite === void 0) {
|
|
141
|
-
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");
|
|
142
|
-
}
|
|
143
|
-
const borderColor = "border-menu-border";
|
|
144
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx2.default)(className), children: [
|
|
145
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Label, { ...label, labelType: label.labelType ?? "labelBig", className: (0, import_clsx2.default)("mb-1", label.className) }),
|
|
146
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.Menu, { as: "div", className: "relative text-menu-text", children: ({ open }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
147
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
148
|
-
import_react2.Menu.Button,
|
|
149
|
-
{
|
|
150
|
-
className: (0, import_clsx2.default)(
|
|
151
|
-
"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",
|
|
152
|
-
textColor,
|
|
153
|
-
borderColor,
|
|
154
|
-
{
|
|
155
|
-
"rounded-b-lg": !open,
|
|
156
|
-
[hoverColor]: !isDisabled,
|
|
157
|
-
"bg-disabled-background cursor-not-allowed text-disabled": isDisabled
|
|
158
|
-
}
|
|
159
|
-
),
|
|
160
|
-
disabled: isDisabled,
|
|
161
|
-
children: [
|
|
162
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: selectedDisplayOverwrite ?? selectedOption?.label ?? hintText }),
|
|
163
|
-
open ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronUp, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronDown, {})
|
|
164
|
-
]
|
|
165
|
-
}
|
|
166
|
-
),
|
|
167
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
168
|
-
import_react2.Menu.Items,
|
|
169
|
-
{
|
|
170
|
-
className: "absolute w-full z-10 rounded-b-lg bg-menu-background text-menu-text shadow-lg max-h-[500px] overflow-y-auto",
|
|
171
|
-
children: [
|
|
172
|
-
(additionalItems ?? []).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
173
|
-
"div",
|
|
174
|
-
{
|
|
175
|
-
className: (0, import_clsx2.default)(borderColor, "px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0", {
|
|
176
|
-
"border-b-0 rounded-b-lg": filteredOptions.length === 0 && index === (additionalItems?.length ?? 1) - 1
|
|
177
|
-
}),
|
|
178
|
-
children: item
|
|
179
|
-
},
|
|
180
|
-
`additionalItems${index}`
|
|
181
|
-
)),
|
|
182
|
-
filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.Menu.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
183
|
-
"div",
|
|
184
|
-
{
|
|
185
|
-
className: (0, import_clsx2.default)(
|
|
186
|
-
"px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0 cursor-pointer",
|
|
187
|
-
option.className,
|
|
188
|
-
borderColor,
|
|
189
|
-
{
|
|
190
|
-
"brightness-90": option.value === value,
|
|
191
|
-
"brightness-95": index % 2 === 1,
|
|
192
|
-
"text-disabled bg-disabled-background cursor-not-allowed": !!option.disabled,
|
|
193
|
-
"bg-menu-background text-menu-text hover:brightness-90 cursor-pointer": !option.disabled,
|
|
194
|
-
"rounded-b-lg": index === filteredOptions.length - 1
|
|
195
|
-
}
|
|
196
|
-
),
|
|
197
|
-
onClick: () => {
|
|
198
|
-
if (!option.disabled) {
|
|
199
|
-
onChange(option.value);
|
|
200
|
-
}
|
|
201
|
-
},
|
|
202
|
-
children: option.label
|
|
203
|
-
}
|
|
204
|
-
) }, `item${index}`))
|
|
205
|
-
]
|
|
206
|
-
}
|
|
207
|
-
)
|
|
208
|
-
] }) })
|
|
209
|
-
] });
|
|
210
|
-
};
|
|
211
|
-
|
|
212
|
-
// src/components/user-input/Input.tsx
|
|
213
|
-
var import_react4 = require("react");
|
|
214
|
-
var import_clsx3 = __toESM(require("clsx"));
|
|
215
|
-
|
|
216
|
-
// src/hooks/useSaveDelay.ts
|
|
217
|
-
var import_react3 = require("react");
|
|
218
|
-
function useSaveDelay(setNotificationStatus, delay) {
|
|
219
|
-
const [updateTimer, setUpdateTimer] = (0, import_react3.useState)(void 0);
|
|
220
|
-
const [notificationTimer, setNotificationTimer] = (0, import_react3.useState)(void 0);
|
|
221
|
-
const restartTimer = (onSave) => {
|
|
222
|
-
clearTimeout(updateTimer);
|
|
223
|
-
setUpdateTimer(setTimeout(() => {
|
|
224
|
-
onSave();
|
|
225
|
-
setNotificationStatus(true);
|
|
226
|
-
clearTimeout(notificationTimer);
|
|
227
|
-
setNotificationTimer(setTimeout(() => {
|
|
228
|
-
setNotificationStatus(false);
|
|
229
|
-
clearTimeout(notificationTimer);
|
|
230
|
-
}, delay));
|
|
231
|
-
clearTimeout(updateTimer);
|
|
232
|
-
}, delay));
|
|
233
|
-
};
|
|
234
|
-
const clearUpdateTimer = (hasSaved = true) => {
|
|
235
|
-
clearTimeout(updateTimer);
|
|
236
|
-
if (hasSaved) {
|
|
237
|
-
setNotificationStatus(true);
|
|
238
|
-
clearTimeout(notificationTimer);
|
|
239
|
-
setNotificationTimer(setTimeout(() => {
|
|
240
|
-
setNotificationStatus(false);
|
|
241
|
-
clearTimeout(notificationTimer);
|
|
242
|
-
}, delay));
|
|
243
|
-
} else {
|
|
244
|
-
setNotificationStatus(false);
|
|
245
|
-
}
|
|
246
|
-
};
|
|
247
|
-
(0, import_react3.useEffect)(() => {
|
|
248
|
-
return () => {
|
|
249
|
-
clearTimeout(updateTimer);
|
|
250
|
-
clearTimeout(notificationTimer);
|
|
251
|
-
};
|
|
252
|
-
}, []);
|
|
253
|
-
return { restartTimer, clearUpdateTimer };
|
|
254
|
-
}
|
|
255
|
-
var useSaveDelay_default = useSaveDelay;
|
|
256
|
-
|
|
257
|
-
// src/components/user-input/Input.tsx
|
|
258
|
-
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
259
|
-
var ControlledInput = ({
|
|
260
|
-
id,
|
|
261
|
-
type = "text",
|
|
262
|
-
value,
|
|
263
|
-
label,
|
|
264
|
-
onChange = noop,
|
|
265
|
-
onChangeEvent = noop,
|
|
266
|
-
className = "",
|
|
267
|
-
onEditCompleted,
|
|
268
|
-
expanded = true,
|
|
269
|
-
onBlur,
|
|
270
|
-
containerClassName,
|
|
271
|
-
...restProps
|
|
272
|
-
}) => {
|
|
273
|
-
const {
|
|
274
|
-
restartTimer,
|
|
275
|
-
clearUpdateTimer
|
|
276
|
-
} = useSaveDelay_default(() => void 0, 3e3);
|
|
277
|
-
const ref = (0, import_react4.useRef)(null);
|
|
278
|
-
(0, import_react4.useEffect)(() => {
|
|
279
|
-
if (restProps.autoFocus) {
|
|
280
|
-
ref.current?.focus();
|
|
281
|
-
}
|
|
282
|
-
}, [restProps.autoFocus]);
|
|
283
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx3.default)({ "w-full": expanded }, containerClassName), children: [
|
|
284
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { ...label, htmlFor: id, className: (0, import_clsx3.default)("mb-1", label.className) }),
|
|
285
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
286
|
-
"input",
|
|
287
|
-
{
|
|
288
|
-
ref,
|
|
289
|
-
value,
|
|
290
|
-
id,
|
|
291
|
-
type,
|
|
292
|
-
className: (0, import_clsx3.default)("block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary", className),
|
|
293
|
-
onBlur: (event) => {
|
|
294
|
-
if (onBlur) {
|
|
295
|
-
onBlur(event);
|
|
296
|
-
}
|
|
297
|
-
if (onEditCompleted) {
|
|
298
|
-
onEditCompleted(event.target.value, event);
|
|
299
|
-
clearUpdateTimer();
|
|
300
|
-
}
|
|
301
|
-
},
|
|
302
|
-
onChange: (e) => {
|
|
303
|
-
const value2 = e.target.value;
|
|
304
|
-
if (onEditCompleted) {
|
|
305
|
-
restartTimer(() => {
|
|
306
|
-
onEditCompleted(value2, e);
|
|
307
|
-
clearUpdateTimer();
|
|
308
|
-
});
|
|
309
|
-
}
|
|
310
|
-
onChange(value2, e);
|
|
311
|
-
onChangeEvent(e);
|
|
312
|
-
},
|
|
313
|
-
...restProps
|
|
314
|
-
}
|
|
315
|
-
)
|
|
316
|
-
] });
|
|
317
|
-
};
|
|
318
|
-
var FormInput = (0, import_react4.forwardRef)(function FormInput2({
|
|
319
|
-
id,
|
|
320
|
-
labelText,
|
|
321
|
-
errorText,
|
|
322
|
-
className,
|
|
323
|
-
labelClassName,
|
|
324
|
-
errorClassName,
|
|
325
|
-
containerClassName,
|
|
326
|
-
required,
|
|
327
|
-
...restProps
|
|
328
|
-
}, ref) {
|
|
329
|
-
const input = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
330
|
-
"input",
|
|
331
|
-
{
|
|
332
|
-
ref,
|
|
333
|
-
id,
|
|
334
|
-
...restProps,
|
|
335
|
-
className: (0, import_clsx3.default)(
|
|
336
|
-
"block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary",
|
|
337
|
-
{
|
|
338
|
-
"focus:border-primary focus:ring-primary": !errorText,
|
|
339
|
-
"focus:border-negative focus:ring-negative text-negative": !!errorText
|
|
340
|
-
},
|
|
341
|
-
className
|
|
342
|
-
)
|
|
343
|
-
}
|
|
344
|
-
);
|
|
345
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx3.default)("flex flex-col gap-y-1", containerClassName), children: [
|
|
346
|
-
labelText && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { htmlFor: id, className: (0, import_clsx3.default)("textstyle-label-md", labelClassName), children: [
|
|
347
|
-
labelText,
|
|
348
|
-
required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-primary font-bold", children: "*" })
|
|
349
|
-
] }),
|
|
350
|
-
input,
|
|
351
|
-
errorText && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { htmlFor: id, className: (0, import_clsx3.default)("text-negative", errorClassName), children: errorText })
|
|
352
|
-
] });
|
|
353
|
-
});
|
|
354
|
-
|
|
355
|
-
// src/components/user-input/Textarea.tsx
|
|
356
|
-
var import_react5 = require("react");
|
|
357
|
-
var import_clsx4 = __toESM(require("clsx"));
|
|
358
|
-
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
359
|
-
var Textarea = ({
|
|
360
|
-
label,
|
|
361
|
-
headline,
|
|
362
|
-
id,
|
|
363
|
-
resizable = false,
|
|
364
|
-
onChange = noop,
|
|
365
|
-
disclaimer,
|
|
366
|
-
onBlur = noop,
|
|
367
|
-
onEditCompleted = noop,
|
|
368
|
-
defaultStyle = true,
|
|
369
|
-
className,
|
|
370
|
-
...props
|
|
371
|
-
}) => {
|
|
372
|
-
const [hasFocus, setHasFocus] = (0, import_react5.useState)(false);
|
|
373
|
-
const { restartTimer, clearUpdateTimer } = useSaveDelay_default(() => void 0, 3e3);
|
|
374
|
-
const onEditCompletedWrapper = (text) => {
|
|
375
|
-
onEditCompleted(text);
|
|
376
|
-
clearUpdateTimer();
|
|
377
|
-
};
|
|
378
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "w-full", children: [
|
|
379
|
-
label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { ...label, htmlFor: id, className: (0, import_clsx4.default)("mb-1", label.className), labelType: label.labelType ?? "labelSmall" }),
|
|
380
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${(0, import_clsx4.default)(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 border-gray-300 hover:border-primary rounded-lg": defaultStyle })}`, children: [
|
|
381
|
-
headline && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "mx-3 mt-3 block text-gray-700 font-bold", children: headline }),
|
|
382
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
383
|
-
"textarea",
|
|
384
|
-
{
|
|
385
|
-
id,
|
|
386
|
-
className: (0, import_clsx4.default)("pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none", { "resize-none": !resizable, "h-32": defaultStyle, "mt-3": !headline }, className),
|
|
387
|
-
onChange: (event) => {
|
|
388
|
-
const value = event.target.value;
|
|
389
|
-
restartTimer(() => {
|
|
390
|
-
onEditCompletedWrapper(value);
|
|
391
|
-
});
|
|
392
|
-
onChange(value);
|
|
393
|
-
},
|
|
394
|
-
onFocus: () => {
|
|
395
|
-
setHasFocus(true);
|
|
396
|
-
},
|
|
397
|
-
onBlur: (event) => {
|
|
398
|
-
onBlur(event);
|
|
399
|
-
onEditCompletedWrapper(event.target.value);
|
|
400
|
-
setHasFocus(false);
|
|
401
|
-
},
|
|
402
|
-
...props
|
|
403
|
-
}
|
|
404
|
-
)
|
|
405
|
-
] }),
|
|
406
|
-
hasFocus && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { className: "text-negative", children: disclaimer })
|
|
407
|
-
] });
|
|
408
|
-
};
|
|
409
|
-
|
|
410
|
-
// src/components/examples/InputGroupExample.tsx
|
|
411
|
-
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
412
|
-
var InputGroupExample = ({
|
|
413
|
-
...props
|
|
414
|
-
}) => {
|
|
415
|
-
const [state, setState] = (0, import_react6.useState)({
|
|
416
|
-
propertyName: "",
|
|
417
|
-
description: ""
|
|
418
|
-
});
|
|
419
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
420
|
-
InputGroup,
|
|
421
|
-
{
|
|
422
|
-
...props,
|
|
423
|
-
onChange: console.log,
|
|
424
|
-
children: [
|
|
425
|
-
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
426
|
-
Select,
|
|
427
|
-
{
|
|
428
|
-
label: { name: "Subject Type", labelType: "labelSmall" },
|
|
429
|
-
value: state.subject,
|
|
430
|
-
options: [
|
|
431
|
-
{ value: "organization", label: "Organization" },
|
|
432
|
-
{ value: "ward", label: "Ward" },
|
|
433
|
-
{ value: "bed", label: "Bed" },
|
|
434
|
-
{ value: "patient", label: "Patient" }
|
|
435
|
-
],
|
|
436
|
-
onChange: (subject) => setState({ ...state, subject })
|
|
437
|
-
},
|
|
438
|
-
"item1"
|
|
439
|
-
),
|
|
440
|
-
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
441
|
-
ControlledInput,
|
|
442
|
-
{
|
|
443
|
-
label: { name: "Property Name" },
|
|
444
|
-
value: state.propertyName,
|
|
445
|
-
onChange: (propertyName) => setState({ ...state, propertyName })
|
|
446
|
-
},
|
|
447
|
-
"item2"
|
|
448
|
-
),
|
|
449
|
-
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
450
|
-
Textarea,
|
|
451
|
-
{
|
|
452
|
-
label: { name: "Description" },
|
|
453
|
-
value: state.description,
|
|
454
|
-
onChange: (description) => setState({ ...state, description })
|
|
455
|
-
},
|
|
456
|
-
"item3"
|
|
457
|
-
)
|
|
458
|
-
]
|
|
459
|
-
}
|
|
460
|
-
);
|
|
461
|
-
};
|
|
462
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
463
|
-
0 && (module.exports = {
|
|
464
|
-
InputGroupExample
|
|
465
|
-
});
|
|
466
|
-
//# sourceMappingURL=InputGroupExample.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/examples/InputGroupExample.tsx","../../../src/components/InputGroup.tsx","../../../src/util/noop.ts","../../../src/components/user-input/Select.tsx","../../../src/components/user-input/Label.tsx","../../../src/components/user-input/Input.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/components/user-input/Textarea.tsx"],"sourcesContent":["import { useState } from 'react'\nimport type { InputGroupProps } from '../InputGroup'\nimport { InputGroup } from '../InputGroup'\nimport { Select } from '../user-input/Select'\nimport { Input } from '../user-input/Input'\nimport { Textarea } from '../user-input/Textarea'\n\nexport type InputGroupExampleProps = Omit<InputGroupProps, 'inputs' | 'onChange'>\n\ntype InputType = {\n subject?: string,\n propertyName: string,\n description: string,\n}\n\n/**\n * Example for an Input Group\n */\nexport const InputGroupExample = ({\n ...props\n}: InputGroupExampleProps) => {\n const [state, setState] = useState<InputType>({\n propertyName: '',\n description: ''\n })\n\n return (\n <InputGroup\n {...props}\n onChange={console.log}\n >\n <Select\n key=\"item1\"\n label={{ name: 'Subject Type', labelType: 'labelSmall' }}\n value={state.subject}\n options={[\n { value: 'organization', label: 'Organization' },\n { value: 'ward', label: 'Ward' },\n { value: 'bed', label: 'Bed' },\n { value: 'patient', label: 'Patient' },\n ]}\n onChange={subject => setState({ ...state, subject })}\n />\n <Input\n key=\"item2\"\n label={{ name: 'Property Name' }}\n value={state.propertyName}\n onChange={propertyName => setState({ ...state, propertyName })}\n />\n <Textarea\n key=\"item3\"\n label={{ name: 'Description' }}\n value={state.description}\n onChange={description => setState({ ...state, description })}\n />\n </InputGroup>\n )\n}\n","import type { PropsWithChildren } from 'react'\nimport { useEffect, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../util/noop'\n\nexport type InputGroupProps = PropsWithChildren<{\n title: string,\n expanded?: boolean,\n isExpandable?: boolean,\n disabled?: boolean,\n onChange?: (value: boolean) => void,\n className?: string,\n}>\n\n/**\n * A Component for layouting inputs in an expandable group\n */\nexport const InputGroup = ({\n children,\n title,\n expanded = true,\n isExpandable = true,\n disabled = false,\n onChange = noop,\n className = '',\n}: InputGroupProps) => {\n const [isExpanded, setIsExpanded] = useState<boolean>(expanded)\n\n useEffect(() => {\n setIsExpanded(expanded)\n }, [expanded])\n\n return (\n <div className={clsx('col gap-y-4 p-4 bg-white rounded-xl', className)}>\n <div\n className={clsx('row justify-between items-center', {\n 'cursor-pointer': isExpandable && !disabled,\n 'cursor-not-allowed': disabled,\n },\n {\n 'text-primary': !disabled,\n 'text-primary/40': disabled\n })}\n onClick={() => {\n if (!isExpandable) {\n return\n }\n const updatedIsExpanded = !isExpanded\n onChange(updatedIsExpanded)\n setIsExpanded(updatedIsExpanded)\n }}\n >\n <span className=\"textstyle-title-md\">{title}</span>\n <div className={clsx('rounded-full text-white w-6 h-6', {\n 'bg-primary': (isExpandable && !disabled) || expanded,\n 'bg-primary/40': disabled,\n })}>\n {isExpanded\n ? <ChevronUp className=\"-translate-y-[1px]\" size={24}/>\n : <ChevronDown className=\"translate-y-[1px]\" size={24}/>\n }\n </div>\n </div>\n {isExpanded && (\n <div className=\"col gap-y-2 h-full\">\n {children}\n </div>\n )}\n </div>\n )\n}\n","export const noop = () => undefined\n","import { Menu } from '@headlessui/react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport type { ReactNode } from 'react'\nimport clsx from 'clsx'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type SelectOption<T> = {\n label: ReactNode,\n value: T,\n disabled?: boolean,\n className?: string,\n}\n\nexport type SelectProps<T> = {\n value?: T,\n label?: LabelProps,\n options: SelectOption<T>[],\n onChange: (value: T) => void,\n isHidingCurrentValue?: boolean,\n hintText?: string,\n showDisabledOptions?: boolean,\n className?: string,\n isDisabled?: boolean,\n textColor?: string,\n hoverColor?: string,\n /**\n * The items will be at the start of the select and aren't selectable\n */\n additionalItems?: ReactNode[],\n selectedDisplayOverwrite?: ReactNode,\n};\n\n/**\n * A Select Component for selecting form a list of options\n *\n * The State is managed by the parent\n */\nexport const Select = <T, >({\n value,\n label,\n options,\n onChange,\n isHidingCurrentValue = true,\n hintText = '',\n showDisabledOptions = true,\n isDisabled,\n className,\n textColor = 'text-menu-text',\n hoverColor = 'hover:brightness-90',\n additionalItems,\n selectedDisplayOverwrite,\n }: SelectProps<T>) => {\n // Notice: for more complex types this check here might need an additional compare method\n let filteredOptions = isHidingCurrentValue ? options.filter(option => option.value !== value) : options\n if (!showDisabledOptions) {\n filteredOptions = filteredOptions.filter(value => !value.disabled)\n }\n const selectedOption = options.find(option => option.value === value)\n if (value !== undefined && selectedOption === undefined && selectedDisplayOverwrite === undefined) {\n console.warn('The selected value is not found in the options list. This might be an error on your part or' +\n ' default behavior if it is complex data type on which === does not work. In case of the latter' +\n ' use selectedDisplayOverwrite to set your selected text or component')\n }\n\n const borderColor = 'border-menu-border'\n\n return (\n <div className={clsx(className)}>\n {label && (\n <Label {...label} labelType={label.labelType ?? 'labelBig'} className={clsx('mb-1', label.className)}/>\n )}\n <Menu as=\"div\" className=\"relative text-menu-text\">\n {({ open }) => (\n <>\n <Menu.Button\n className={clsx(\n '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',\n textColor, borderColor,\n {\n 'rounded-b-lg': !open,\n [hoverColor]: !isDisabled,\n 'bg-disabled-background cursor-not-allowed text-disabled': isDisabled\n }\n )}\n disabled={isDisabled}\n >\n <span>{selectedDisplayOverwrite ?? selectedOption?.label ?? hintText}</span>\n {open ? <ChevronUp/> : <ChevronDown/>}\n </Menu.Button>\n <Menu.Items\n className=\"absolute w-full z-10 rounded-b-lg bg-menu-background text-menu-text shadow-lg max-h-[500px] overflow-y-auto\"\n >\n {(additionalItems ?? []).map((item, index) => (\n <div key={`additionalItems${index}`}\n className={clsx(borderColor, 'px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0', {\n 'border-b-0 rounded-b-lg': filteredOptions.length === 0 && index === (additionalItems?.length ?? 1) - 1,\n })}\n >\n {item}\n </div>\n ))}\n {filteredOptions.map((option, index) => (\n <Menu.Item key={`item${index}`}>\n {\n <div\n className={clsx('px-4 py-2 overflow-hidden whitespace-nowrap text-ellipsis border-2 border-t-0 cursor-pointer',\n option.className, borderColor, {\n 'brightness-90': option.value === value,\n 'brightness-95': index % 2 === 1,\n 'text-disabled bg-disabled-background cursor-not-allowed': !!option.disabled,\n 'bg-menu-background text-menu-text hover:brightness-90 cursor-pointer': !option.disabled,\n 'rounded-b-lg': index === filteredOptions.length - 1,\n })}\n onClick={() => {\n if (!option.disabled) {\n onChange(option.value)\n }\n }}\n >\n {option.label}\n </div>\n }\n </Menu.Item>\n ))}\n </Menu.Items>\n </>\n )}\n </Menu>\n </div>\n )\n}\n","import type { LabelHTMLAttributes } from 'react'\n\nexport type LabelType = 'labelSmall' | 'labelMedium' | 'labelBig'\nconst styleMapping: Record<LabelType, string> = {\n labelSmall: 'textstyle-label-sm',\n labelMedium: 'textstyle-label-md',\n labelBig: 'textstyle-label-lg',\n}\n\n\nexport type LabelProps = {\n /** The text for the label */\n name?: string,\n /** The styling for the label */\n labelType?: LabelType,\n} & LabelHTMLAttributes<HTMLLabelElement>\n\n/**\n * A Label component\n */\nexport const Label = ({\n children,\n name,\n labelType = 'labelSmall',\n ...props\n}: LabelProps) => {\n return (\n <label {...props}>\n {children ? children : (<span className={styleMapping[labelType]}>{name}</span>)}\n </label>\n )\n}\n","import React, {\n useEffect,\n useRef,\n useState,\n type ChangeEvent,\n type HTMLInputTypeAttribute,\n type InputHTMLAttributes, forwardRef\n} from 'react'\nimport clsx from 'clsx'\nimport useSaveDelay from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type InputProps = {\n /**\n * used for the label's `for` attribute\n */\n id?: string,\n value: string,\n label?: Omit<LabelProps, 'id'>,\n /**\n * @default 'text'\n */\n type?: HTMLInputTypeAttribute,\n /**\n * Callback for when the input's value changes\n * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n * That could be enforced through a union type but that seems a bit overkill\n * @default noop\n */\n onChange?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n onChangeEvent?: (event: ChangeEvent<HTMLInputElement>) => void,\n className?: string,\n onEditCompleted?: (text: string, event: ChangeEvent<HTMLInputElement>) => void,\n expanded?: boolean,\n containerClassName?: string,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'value' | 'label' | 'type' | 'onChange' | 'crossOrigin'>\n\n/**\n * A Component for inputting text or other information\n *\n * Its state is managed must be managed by the parent\n */\nconst ControlledInput = ({\n id,\n type = 'text',\n value,\n label,\n onChange = noop,\n onChangeEvent = noop,\n className = '',\n onEditCompleted,\n expanded = true,\n onBlur,\n containerClassName,\n ...restProps\n }: InputProps) => {\n const {\n restartTimer,\n clearUpdateTimer\n } = useSaveDelay(() => undefined, 3000)\n const ref = useRef<HTMLInputElement>(null)\n\n useEffect(() => {\n if (restProps.autoFocus) {\n ref.current?.focus()\n }\n }, [restProps.autoFocus])\n return (\n <div className={clsx({ 'w-full': expanded }, containerClassName)}>\n {label && <Label {...label} htmlFor={id} className={clsx('mb-1', label.className)}/>}\n <input\n ref={ref}\n value={value}\n id={id}\n type={type}\n className={clsx('block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary', className)}\n onBlur={event => {\n if (onBlur) {\n onBlur(event)\n }\n if (onEditCompleted) {\n onEditCompleted(event.target.value, event)\n clearUpdateTimer()\n }\n }}\n onChange={e => {\n const value = e.target.value\n if (onEditCompleted) {\n restartTimer(() => {\n onEditCompleted(value, e)\n clearUpdateTimer()\n })\n }\n onChange(value, e)\n onChangeEvent(e)\n }}\n {...restProps}\n />\n </div>\n )\n}\n\ntype UncontrolledInputProps = Omit<InputProps, 'value'> & {\n /**\n * @default ''\n */\n defaultValue?: string,\n}\n\n/**\n * A Component for inputting text or other information\n *\n * Its state is managed by the component itself\n */\nconst UncontrolledInput = ({\n defaultValue = '',\n onChange = noop,\n ...props\n }: UncontrolledInputProps) => {\n const [value, setValue] = useState(defaultValue)\n\n const handleChange = (text: string, event: ChangeEvent<HTMLInputElement>) => {\n setValue(text)\n onChange(text, event)\n }\n\n return (\n <ControlledInput\n {...props}\n value={value}\n onChange={handleChange}\n />\n )\n}\n\nexport type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {\n id: string,\n labelText?: string,\n errorText?: string,\n labelClassName?: string,\n errorClassName?: string,\n containerClassName?: string,\n}\n\nconst FormInput = forwardRef<HTMLInputElement, FormInputProps>(function FormInput({\n id,\n labelText,\n errorText,\n className,\n labelClassName,\n errorClassName,\n containerClassName,\n required,\n ...restProps\n }, ref) {\n const input = (\n <input\n ref={ref}\n id={id}\n {...restProps}\n className={clsx(\n 'block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary',\n {\n 'focus:border-primary focus:ring-primary': !errorText,\n 'focus:border-negative focus:ring-negative text-negative': !!errorText,\n },\n className\n )}\n />\n )\n\n return (\n <div className={clsx('flex flex-col gap-y-1', containerClassName)}>\n {labelText && (\n <label htmlFor={id} className={clsx('textstyle-label-md', labelClassName)}>\n {labelText}\n {required && <span className=\"text-primary font-bold\">*</span>}\n </label>\n )}\n {input}\n {errorText && <label htmlFor={id} className={clsx('text-negative', errorClassName)}>{errorText}</label>}\n </div>\n )\n})\n\nexport {\n UncontrolledInput,\n ControlledInput as Input,\n FormInput\n}\n","import { useEffect, useState } from 'react'\n\nfunction useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n\n const restartTimer = (onSave: () => void) => {\n clearTimeout(updateTimer)\n setUpdateTimer(setTimeout(() => {\n onSave()\n setNotificationStatus(true)\n // Show Saved Notification for fade animation duration\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n clearTimeout(updateTimer)\n }, delay))\n }\n\n const clearUpdateTimer = (hasSaved = true) => {\n clearTimeout(updateTimer)\n if (hasSaved) {\n setNotificationStatus(true)\n clearTimeout(notificationTimer)\n setNotificationTimer(setTimeout(() => {\n setNotificationStatus(false)\n clearTimeout(notificationTimer)\n }, delay))\n } else {\n setNotificationStatus(false)\n }\n }\n\n useEffect(() => {\n return () => {\n clearTimeout(updateTimer)\n clearTimeout(notificationTimer)\n }\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return { restartTimer, clearUpdateTimer }\n}\n\nexport default useSaveDelay\n","import type { TextareaHTMLAttributes } from 'react'\nimport { useState } from 'react'\nimport clsx from 'clsx'\nimport useSaveDelay from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\nimport type { LabelProps } from './Label'\nimport { Label } from './Label'\n\nexport type TextareaProps = {\n /** Outside the area */\n label?: Omit<LabelProps, 'id'>,\n /** Inside the area */\n headline?: string,\n id?: string,\n resizable?: boolean,\n onChange?: (text: string) => void,\n disclaimer?: string,\n onEditCompleted?: (text: string) => void,\n defaultStyle?: boolean,\n} & Omit<TextareaHTMLAttributes<Element>, 'id' | 'onChange'>\n\n/**\n * A Textarea component for inputting longer texts\n *\n * The State is managed by the parent\n */\nexport const Textarea = ({\n label,\n headline,\n id,\n resizable = false,\n onChange = noop,\n disclaimer,\n onBlur = noop,\n onEditCompleted = noop,\n defaultStyle = true,\n className,\n ...props\n}: TextareaProps) => {\n const [hasFocus, setHasFocus] = useState(false)\n const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000)\n\n const onEditCompletedWrapper = (text: string) => {\n onEditCompleted(text)\n clearUpdateTimer()\n }\n\n return (\n <div className=\"w-full\">\n {label && (<Label {...label} htmlFor={id} className={clsx('mb-1', label.className)} labelType={label.labelType ?? 'labelSmall'}/>)}\n <div className={`${clsx(' bg-surface text-on-surface focus-within:border-primary relative', { 'shadow border-2 border-gray-300 hover:border-primary rounded-lg': defaultStyle })}`}>\n {headline && (\n <span className=\"mx-3 mt-3 block text-gray-700 font-bold\">\n {headline}\n </span>\n )}\n <textarea\n id={id}\n className={clsx('pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none', { 'resize-none': !resizable, 'h-32': defaultStyle, 'mt-3': !headline }, className)}\n onChange={(event) => {\n const value = event.target.value\n restartTimer(() => {\n onEditCompletedWrapper(value)\n })\n onChange(value)\n }}\n onFocus={() => {\n setHasFocus(true)\n }}\n onBlur={(event) => {\n onBlur(event)\n onEditCompletedWrapper(event.target.value)\n setHasFocus(false)\n }}\n {...props}\n >\n </textarea>\n </div>\n {(hasFocus && disclaimer) && (\n <label className=\"text-negative\">\n {disclaimer}\n </label>\n )}\n </div>\n )\n}\n"],"mappings":"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","names":["import_react","clsx","import_react","import_lucide_react","import_clsx","import_jsx_runtime","import_jsx_runtime","value","clsx","import_react","import_clsx","import_react","import_jsx_runtime","clsx","value","FormInput","clsx","import_react","import_clsx","import_jsx_runtime","clsx","import_jsx_runtime"]}
|