@herca/r-kit 0.0.74 → 0.0.76
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/clients.cjs +59 -90
- package/dist/clients.cjs.map +1 -1
- package/dist/clients.d.cts +2 -1
- package/dist/clients.d.ts +2 -1
- package/dist/clients.js +59 -90
- package/dist/clients.js.map +1 -1
- package/package.json +1 -1
package/dist/clients.cjs
CHANGED
|
@@ -11500,7 +11500,7 @@ function useUrlSearchParams() {
|
|
|
11500
11500
|
const next = updater(readParams());
|
|
11501
11501
|
const query = next.toString();
|
|
11502
11502
|
const url = `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`;
|
|
11503
|
-
if (options?.replace) {
|
|
11503
|
+
if (options?.replace == true) {
|
|
11504
11504
|
window.history.replaceState(window.history.state, "", url);
|
|
11505
11505
|
} else {
|
|
11506
11506
|
window.history.pushState(window.history.state, "", url);
|
|
@@ -17042,25 +17042,21 @@ function RoundedSpinner({
|
|
|
17042
17042
|
// src/components/select/select.tsx
|
|
17043
17043
|
var import_clsx14 = __toESM(require("clsx"), 1);
|
|
17044
17044
|
var import_jsx_runtime435 = require("react/jsx-runtime");
|
|
17045
|
-
var isGroup = (item) => item != null && Array.isArray(item.options);
|
|
17046
17045
|
function Select({
|
|
17047
17046
|
options = [],
|
|
17048
17047
|
value = null,
|
|
17049
17048
|
onChange,
|
|
17050
17049
|
isMulti = false,
|
|
17051
|
-
multiple = false,
|
|
17052
17050
|
placeholder = "Select...",
|
|
17053
17051
|
isSearchable = true,
|
|
17054
17052
|
isClearable = true,
|
|
17055
17053
|
isDisabled = false,
|
|
17056
|
-
disabled = false,
|
|
17057
17054
|
renderOption = null,
|
|
17058
17055
|
renderValue = null,
|
|
17059
17056
|
className,
|
|
17060
17057
|
label,
|
|
17061
17058
|
description,
|
|
17062
17059
|
hint,
|
|
17063
|
-
tooltip,
|
|
17064
17060
|
errorMessages,
|
|
17065
17061
|
isLoadingMore,
|
|
17066
17062
|
onLoadMore,
|
|
@@ -17074,8 +17070,7 @@ function Select({
|
|
|
17074
17070
|
isSelectOpen,
|
|
17075
17071
|
onOpenChange,
|
|
17076
17072
|
searchOptions,
|
|
17077
|
-
searchPlaceholder = "Search..."
|
|
17078
|
-
icon
|
|
17073
|
+
searchPlaceholder = "Search..."
|
|
17079
17074
|
}) {
|
|
17080
17075
|
const [isOpen, setIsOpen] = (0, import_react415.useState)(false);
|
|
17081
17076
|
const [searchTerm, setSearchTerm] = (0, import_react415.useState)("");
|
|
@@ -17092,40 +17087,20 @@ function Select({
|
|
|
17092
17087
|
onLoadMore?.();
|
|
17093
17088
|
}
|
|
17094
17089
|
};
|
|
17095
|
-
const
|
|
17096
|
-
|
|
17097
|
-
|
|
17098
|
-
|
|
17099
|
-
const term = searchTerm.toLowerCase();
|
|
17100
|
-
const matches2 = (o) => getSearchText(o).toLowerCase().includes(term);
|
|
17101
|
-
for (const item of options) {
|
|
17102
|
-
if (isGroup(item)) {
|
|
17103
|
-
const matched = item.options.filter(matches2);
|
|
17104
|
-
if (matched.length === 0) continue;
|
|
17105
|
-
const items = matched.map((option) => {
|
|
17106
|
-
const index = flat.length;
|
|
17107
|
-
flat.push(option);
|
|
17108
|
-
return { option, index };
|
|
17109
|
-
});
|
|
17110
|
-
entries.push({ kind: "group", label: item.label, items });
|
|
17111
|
-
} else {
|
|
17112
|
-
if (!matches2(item)) continue;
|
|
17113
|
-
const index = flat.length;
|
|
17114
|
-
flat.push(item);
|
|
17115
|
-
entries.push({ kind: "option", option: item, index });
|
|
17116
|
-
}
|
|
17117
|
-
}
|
|
17118
|
-
return { filteredOptions: flat, renderEntries: entries };
|
|
17090
|
+
const filteredOptions = import_react415.default.useMemo(() => {
|
|
17091
|
+
return options.filter(
|
|
17092
|
+
(option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()) === true
|
|
17093
|
+
);
|
|
17119
17094
|
}, [options, searchTerm]);
|
|
17120
17095
|
const asArray = (val) => Array.isArray(val) ? val : val ? [val] : [];
|
|
17121
17096
|
const isSelected = (option) => {
|
|
17122
|
-
if (isMulti
|
|
17097
|
+
if (isMulti) {
|
|
17123
17098
|
return asArray(value).some((v3) => v3.value === option.value);
|
|
17124
17099
|
}
|
|
17125
17100
|
return value?.value === option.value;
|
|
17126
17101
|
};
|
|
17127
17102
|
const handleSelect = (option) => {
|
|
17128
|
-
if (isMulti
|
|
17103
|
+
if (isMulti) {
|
|
17129
17104
|
const arr = asArray(value);
|
|
17130
17105
|
const exists = arr.some((v3) => v3.value === option.value);
|
|
17131
17106
|
const newValue = exists ? arr.filter((v3) => v3.value !== option.value) : [...arr, option];
|
|
@@ -17141,7 +17116,7 @@ function Select({
|
|
|
17141
17116
|
};
|
|
17142
17117
|
const handleRemove = (option, e) => {
|
|
17143
17118
|
e.stopPropagation();
|
|
17144
|
-
if (isMulti
|
|
17119
|
+
if (isMulti) {
|
|
17145
17120
|
const arr = asArray(value);
|
|
17146
17121
|
onChange?.(arr.filter((v3) => v3.value !== option.value));
|
|
17147
17122
|
} else {
|
|
@@ -17150,7 +17125,7 @@ function Select({
|
|
|
17150
17125
|
};
|
|
17151
17126
|
const handleClear = (e) => {
|
|
17152
17127
|
e.stopPropagation();
|
|
17153
|
-
onChange?.(isMulti
|
|
17128
|
+
onChange?.(isMulti ? [] : null);
|
|
17154
17129
|
};
|
|
17155
17130
|
const handleKeyDown2 = (e) => {
|
|
17156
17131
|
if (!isOpen) {
|
|
@@ -17235,11 +17210,11 @@ function Select({
|
|
|
17235
17210
|
}
|
|
17236
17211
|
}, [searchOptions]);
|
|
17237
17212
|
const getDisplayValue = () => {
|
|
17238
|
-
const isEmpty = value == null ||
|
|
17213
|
+
const isEmpty = value == null || isMulti && asArray(value).length === 0;
|
|
17239
17214
|
if (isEmpty) {
|
|
17240
17215
|
return /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("span", { className: "text-gray-500", children: placeholder });
|
|
17241
17216
|
}
|
|
17242
|
-
if (isMulti
|
|
17217
|
+
if (isMulti) {
|
|
17243
17218
|
return /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: "flex flex-wrap gap-1", children: asArray(value).map((item) => /* @__PURE__ */ (0, import_jsx_runtime435.jsxs)(
|
|
17244
17219
|
"div",
|
|
17245
17220
|
{
|
|
@@ -17261,23 +17236,8 @@ function Select({
|
|
|
17261
17236
|
}
|
|
17262
17237
|
return renderValue !== void 0 && renderValue !== null ? renderValue?.(value) : value.label;
|
|
17263
17238
|
};
|
|
17264
|
-
const showClearButton = isClearable && (
|
|
17239
|
+
const showClearButton = isClearable && (isMulti && asArray(value).length > 0 || !isMulti && value !== null);
|
|
17265
17240
|
const hasError = fieldHasError(errorMessages);
|
|
17266
|
-
const renderOptionItem = (option, index) => {
|
|
17267
|
-
const selected = isSelected(option);
|
|
17268
|
-
return /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
|
|
17269
|
-
"div",
|
|
17270
|
-
{
|
|
17271
|
-
ref: (el) => {
|
|
17272
|
-
optionRefs.current[index] = el;
|
|
17273
|
-
},
|
|
17274
|
-
onMouseEnter: () => setHighlightedIndex(index),
|
|
17275
|
-
onClick: () => handleSelect(option),
|
|
17276
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(Chip, { className: "text-left", block: true, selected, children: /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: "flex-1", children: renderOption !== void 0 && renderOption !== null ? renderOption?.(option, { selected }) : /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: cn(selected && "font-medium"), children: option.label }) }) })
|
|
17277
|
-
},
|
|
17278
|
-
option.value
|
|
17279
|
-
);
|
|
17280
|
-
};
|
|
17281
17241
|
return /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
|
|
17282
17242
|
FormField,
|
|
17283
17243
|
{
|
|
@@ -17286,7 +17246,6 @@ function Select({
|
|
|
17286
17246
|
description,
|
|
17287
17247
|
hint,
|
|
17288
17248
|
required,
|
|
17289
|
-
tooltip,
|
|
17290
17249
|
children: /* @__PURE__ */ (0, import_jsx_runtime435.jsxs)(
|
|
17291
17250
|
"div",
|
|
17292
17251
|
{
|
|
@@ -17299,8 +17258,8 @@ function Select({
|
|
|
17299
17258
|
"div",
|
|
17300
17259
|
{
|
|
17301
17260
|
"aria-selected": isOpen,
|
|
17302
|
-
onClick: () =>
|
|
17303
|
-
tabIndex: isDisabled
|
|
17261
|
+
onClick: () => !isDisabled && setIsOpen(!isOpen),
|
|
17262
|
+
tabIndex: isDisabled ? -1 : 0,
|
|
17304
17263
|
className: triggerClassName,
|
|
17305
17264
|
children: trigger
|
|
17306
17265
|
}
|
|
@@ -17310,36 +17269,33 @@ function Select({
|
|
|
17310
17269
|
{
|
|
17311
17270
|
"aria-selected": isOpen,
|
|
17312
17271
|
className: cn(
|
|
17313
|
-
"focus:ring-primary-300 flex min-h-10 cursor-pointer rounded-lg border bg-white text-gray-900 transition-all focus-within:outline-none focus:ring",
|
|
17314
|
-
|
|
17272
|
+
"focus:ring-primary-300 flex min-h-10 cursor-pointer items-center justify-between rounded-lg border bg-white px-3 py-2 text-gray-900 transition-all focus-within:outline-none focus:ring",
|
|
17273
|
+
isDisabled && "cursor-not-allowed bg-gray-100",
|
|
17315
17274
|
isOpen ? "border-primary-300 ring-0" : "border-gray-200",
|
|
17316
17275
|
hasError && "border-danger-500"
|
|
17317
17276
|
),
|
|
17318
|
-
onClick: () =>
|
|
17319
|
-
tabIndex: isDisabled
|
|
17277
|
+
onClick: () => !isDisabled && setIsOpen(!isOpen),
|
|
17278
|
+
tabIndex: isDisabled ? -1 : 0,
|
|
17320
17279
|
children: [
|
|
17321
|
-
|
|
17322
|
-
/* @__PURE__ */ (0, import_jsx_runtime435.jsxs)("div", { className: "
|
|
17323
|
-
/* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
|
|
17324
|
-
|
|
17325
|
-
|
|
17326
|
-
"button",
|
|
17327
|
-
|
|
17328
|
-
|
|
17329
|
-
|
|
17330
|
-
|
|
17331
|
-
|
|
17332
|
-
|
|
17333
|
-
|
|
17334
|
-
|
|
17335
|
-
|
|
17336
|
-
|
|
17337
|
-
|
|
17338
|
-
|
|
17339
|
-
|
|
17340
|
-
}
|
|
17341
|
-
)
|
|
17342
|
-
] })
|
|
17280
|
+
/* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: "flex-1 overflow-hidden text-xs font-medium text-gray-900", children: getDisplayValue() }),
|
|
17281
|
+
/* @__PURE__ */ (0, import_jsx_runtime435.jsxs)("div", { className: "ml-2 flex items-center gap-1", children: [
|
|
17282
|
+
showClearButton && /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
|
|
17283
|
+
"button",
|
|
17284
|
+
{
|
|
17285
|
+
type: "button",
|
|
17286
|
+
onClick: handleClear,
|
|
17287
|
+
className: "cursor-pointer rounded text-center text-gray-700",
|
|
17288
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(Icon_default, { name: "times-circle", size: 20 })
|
|
17289
|
+
}
|
|
17290
|
+
),
|
|
17291
|
+
/* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
|
|
17292
|
+
Icon_default,
|
|
17293
|
+
{
|
|
17294
|
+
className: "text-gray-700",
|
|
17295
|
+
name: isOpen ? "angle-up-small" : "angle-down-small",
|
|
17296
|
+
size: 20
|
|
17297
|
+
}
|
|
17298
|
+
)
|
|
17343
17299
|
] })
|
|
17344
17300
|
]
|
|
17345
17301
|
}
|
|
@@ -17378,14 +17334,27 @@ function Select({
|
|
|
17378
17334
|
onScroll: onLoadMore !== void 0 ? handleScroll : void 0,
|
|
17379
17335
|
children: [
|
|
17380
17336
|
renderOptions === void 0 && /* @__PURE__ */ (0, import_jsx_runtime435.jsxs)(import_jsx_runtime435.Fragment, { children: [
|
|
17381
|
-
filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: "px-3 py-8 text-center text-sm text-gray-500", children: "No options found" }) :
|
|
17382
|
-
|
|
17383
|
-
|
|
17384
|
-
|
|
17385
|
-
|
|
17386
|
-
|
|
17387
|
-
|
|
17388
|
-
|
|
17337
|
+
filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: "px-3 py-8 text-center text-sm text-gray-500", children: "No options found" }) : filteredOptions.map((option, index) => {
|
|
17338
|
+
const selected = isSelected(option);
|
|
17339
|
+
const highlighted = index === highlightedIndex;
|
|
17340
|
+
return /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
|
|
17341
|
+
"div",
|
|
17342
|
+
{
|
|
17343
|
+
ref: (el) => {
|
|
17344
|
+
optionRefs.current[index] = el;
|
|
17345
|
+
},
|
|
17346
|
+
onMouseEnter: () => setHighlightedIndex(index),
|
|
17347
|
+
onClick: () => handleSelect(option),
|
|
17348
|
+
className: cn(
|
|
17349
|
+
"flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm font-medium text-gray-900 transition-colors focus:outline-none",
|
|
17350
|
+
highlighted && "bg-primary-100",
|
|
17351
|
+
selected ? "bg-primary-50 border-primary-300" : "hover:bg-gray-50"
|
|
17352
|
+
),
|
|
17353
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: "flex-1", children: renderOption !== void 0 && renderOption !== null ? renderOption?.(option, { selected }) : /* @__PURE__ */ (0, import_jsx_runtime435.jsx)("div", { className: cn(selected && "font-medium"), children: option.label }) })
|
|
17354
|
+
},
|
|
17355
|
+
option.value
|
|
17356
|
+
);
|
|
17357
|
+
}),
|
|
17389
17358
|
onLoadMore !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime435.jsx)(
|
|
17390
17359
|
"div",
|
|
17391
17360
|
{
|