@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.d.cts
CHANGED
|
@@ -918,6 +918,7 @@ interface BaseOption {
|
|
|
918
918
|
value: string | number;
|
|
919
919
|
label: string;
|
|
920
920
|
description?: string;
|
|
921
|
+
icon?: string;
|
|
921
922
|
}
|
|
922
923
|
type EmptyObject = Record<string, never>;
|
|
923
924
|
type SelectOption<Extra extends object = object> = BaseOption & Extra;
|
|
@@ -979,7 +980,7 @@ type SelectPropsWithDefaultBehavior<Extra extends object = EmptyObject> = {
|
|
|
979
980
|
};
|
|
980
981
|
type SelectProps<Extra extends object = object> = BaseSelectProps<Extra> & (SelectPropsWithCustomRender<Extra> | SelectPropsWithDefaultBehavior<Extra>);
|
|
981
982
|
|
|
982
|
-
declare function Select<Extra extends object = object>({ options, value, onChange, isMulti,
|
|
983
|
+
declare function Select<Extra extends object = object>({ options, value, onChange, isMulti, placeholder, isSearchable, isClearable, isDisabled, renderOption, renderValue, className, label, description, hint, errorMessages, isLoadingMore, onLoadMore, treshold, trigger, triggerClassName, renderOptions, onSearchOptions, onOptionsChange, required, isSelectOpen, onOpenChange, searchOptions, searchPlaceholder, }: SelectProps<Extra>): react_jsx_runtime.JSX.Element;
|
|
983
984
|
|
|
984
985
|
interface TabsProps {
|
|
985
986
|
defaultValue?: string;
|
package/dist/clients.d.ts
CHANGED
|
@@ -918,6 +918,7 @@ interface BaseOption {
|
|
|
918
918
|
value: string | number;
|
|
919
919
|
label: string;
|
|
920
920
|
description?: string;
|
|
921
|
+
icon?: string;
|
|
921
922
|
}
|
|
922
923
|
type EmptyObject = Record<string, never>;
|
|
923
924
|
type SelectOption<Extra extends object = object> = BaseOption & Extra;
|
|
@@ -979,7 +980,7 @@ type SelectPropsWithDefaultBehavior<Extra extends object = EmptyObject> = {
|
|
|
979
980
|
};
|
|
980
981
|
type SelectProps<Extra extends object = object> = BaseSelectProps<Extra> & (SelectPropsWithCustomRender<Extra> | SelectPropsWithDefaultBehavior<Extra>);
|
|
981
982
|
|
|
982
|
-
declare function Select<Extra extends object = object>({ options, value, onChange, isMulti,
|
|
983
|
+
declare function Select<Extra extends object = object>({ options, value, onChange, isMulti, placeholder, isSearchable, isClearable, isDisabled, renderOption, renderValue, className, label, description, hint, errorMessages, isLoadingMore, onLoadMore, treshold, trigger, triggerClassName, renderOptions, onSearchOptions, onOptionsChange, required, isSelectOpen, onOpenChange, searchOptions, searchPlaceholder, }: SelectProps<Extra>): react_jsx_runtime.JSX.Element;
|
|
983
984
|
|
|
984
985
|
interface TabsProps {
|
|
985
986
|
defaultValue?: string;
|
package/dist/clients.js
CHANGED
|
@@ -11349,7 +11349,7 @@ function useUrlSearchParams() {
|
|
|
11349
11349
|
const next = updater(readParams());
|
|
11350
11350
|
const query = next.toString();
|
|
11351
11351
|
const url = `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`;
|
|
11352
|
-
if (options?.replace) {
|
|
11352
|
+
if (options?.replace == true) {
|
|
11353
11353
|
window.history.replaceState(window.history.state, "", url);
|
|
11354
11354
|
} else {
|
|
11355
11355
|
window.history.pushState(window.history.state, "", url);
|
|
@@ -16901,25 +16901,21 @@ function RoundedSpinner({
|
|
|
16901
16901
|
// src/components/select/select.tsx
|
|
16902
16902
|
import clsx14 from "clsx";
|
|
16903
16903
|
import { Fragment as Fragment10, jsx as jsx435, jsxs as jsxs94 } from "react/jsx-runtime";
|
|
16904
|
-
var isGroup = (item) => item != null && Array.isArray(item.options);
|
|
16905
16904
|
function Select({
|
|
16906
16905
|
options = [],
|
|
16907
16906
|
value = null,
|
|
16908
16907
|
onChange,
|
|
16909
16908
|
isMulti = false,
|
|
16910
|
-
multiple = false,
|
|
16911
16909
|
placeholder = "Select...",
|
|
16912
16910
|
isSearchable = true,
|
|
16913
16911
|
isClearable = true,
|
|
16914
16912
|
isDisabled = false,
|
|
16915
|
-
disabled = false,
|
|
16916
16913
|
renderOption = null,
|
|
16917
16914
|
renderValue = null,
|
|
16918
16915
|
className,
|
|
16919
16916
|
label,
|
|
16920
16917
|
description,
|
|
16921
16918
|
hint,
|
|
16922
|
-
tooltip,
|
|
16923
16919
|
errorMessages,
|
|
16924
16920
|
isLoadingMore,
|
|
16925
16921
|
onLoadMore,
|
|
@@ -16933,8 +16929,7 @@ function Select({
|
|
|
16933
16929
|
isSelectOpen,
|
|
16934
16930
|
onOpenChange,
|
|
16935
16931
|
searchOptions,
|
|
16936
|
-
searchPlaceholder = "Search..."
|
|
16937
|
-
icon
|
|
16932
|
+
searchPlaceholder = "Search..."
|
|
16938
16933
|
}) {
|
|
16939
16934
|
const [isOpen, setIsOpen] = useState15(false);
|
|
16940
16935
|
const [searchTerm, setSearchTerm] = useState15("");
|
|
@@ -16951,40 +16946,20 @@ function Select({
|
|
|
16951
16946
|
onLoadMore?.();
|
|
16952
16947
|
}
|
|
16953
16948
|
};
|
|
16954
|
-
const
|
|
16955
|
-
|
|
16956
|
-
|
|
16957
|
-
|
|
16958
|
-
const term = searchTerm.toLowerCase();
|
|
16959
|
-
const matches2 = (o) => getSearchText(o).toLowerCase().includes(term);
|
|
16960
|
-
for (const item of options) {
|
|
16961
|
-
if (isGroup(item)) {
|
|
16962
|
-
const matched = item.options.filter(matches2);
|
|
16963
|
-
if (matched.length === 0) continue;
|
|
16964
|
-
const items = matched.map((option) => {
|
|
16965
|
-
const index = flat.length;
|
|
16966
|
-
flat.push(option);
|
|
16967
|
-
return { option, index };
|
|
16968
|
-
});
|
|
16969
|
-
entries.push({ kind: "group", label: item.label, items });
|
|
16970
|
-
} else {
|
|
16971
|
-
if (!matches2(item)) continue;
|
|
16972
|
-
const index = flat.length;
|
|
16973
|
-
flat.push(item);
|
|
16974
|
-
entries.push({ kind: "option", option: item, index });
|
|
16975
|
-
}
|
|
16976
|
-
}
|
|
16977
|
-
return { filteredOptions: flat, renderEntries: entries };
|
|
16949
|
+
const filteredOptions = React404.useMemo(() => {
|
|
16950
|
+
return options.filter(
|
|
16951
|
+
(option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()) === true
|
|
16952
|
+
);
|
|
16978
16953
|
}, [options, searchTerm]);
|
|
16979
16954
|
const asArray = (val) => Array.isArray(val) ? val : val ? [val] : [];
|
|
16980
16955
|
const isSelected = (option) => {
|
|
16981
|
-
if (isMulti
|
|
16956
|
+
if (isMulti) {
|
|
16982
16957
|
return asArray(value).some((v3) => v3.value === option.value);
|
|
16983
16958
|
}
|
|
16984
16959
|
return value?.value === option.value;
|
|
16985
16960
|
};
|
|
16986
16961
|
const handleSelect = (option) => {
|
|
16987
|
-
if (isMulti
|
|
16962
|
+
if (isMulti) {
|
|
16988
16963
|
const arr = asArray(value);
|
|
16989
16964
|
const exists = arr.some((v3) => v3.value === option.value);
|
|
16990
16965
|
const newValue = exists ? arr.filter((v3) => v3.value !== option.value) : [...arr, option];
|
|
@@ -17000,7 +16975,7 @@ function Select({
|
|
|
17000
16975
|
};
|
|
17001
16976
|
const handleRemove = (option, e) => {
|
|
17002
16977
|
e.stopPropagation();
|
|
17003
|
-
if (isMulti
|
|
16978
|
+
if (isMulti) {
|
|
17004
16979
|
const arr = asArray(value);
|
|
17005
16980
|
onChange?.(arr.filter((v3) => v3.value !== option.value));
|
|
17006
16981
|
} else {
|
|
@@ -17009,7 +16984,7 @@ function Select({
|
|
|
17009
16984
|
};
|
|
17010
16985
|
const handleClear = (e) => {
|
|
17011
16986
|
e.stopPropagation();
|
|
17012
|
-
onChange?.(isMulti
|
|
16987
|
+
onChange?.(isMulti ? [] : null);
|
|
17013
16988
|
};
|
|
17014
16989
|
const handleKeyDown2 = (e) => {
|
|
17015
16990
|
if (!isOpen) {
|
|
@@ -17094,11 +17069,11 @@ function Select({
|
|
|
17094
17069
|
}
|
|
17095
17070
|
}, [searchOptions]);
|
|
17096
17071
|
const getDisplayValue = () => {
|
|
17097
|
-
const isEmpty = value == null ||
|
|
17072
|
+
const isEmpty = value == null || isMulti && asArray(value).length === 0;
|
|
17098
17073
|
if (isEmpty) {
|
|
17099
17074
|
return /* @__PURE__ */ jsx435("span", { className: "text-gray-500", children: placeholder });
|
|
17100
17075
|
}
|
|
17101
|
-
if (isMulti
|
|
17076
|
+
if (isMulti) {
|
|
17102
17077
|
return /* @__PURE__ */ jsx435("div", { className: "flex flex-wrap gap-1", children: asArray(value).map((item) => /* @__PURE__ */ jsxs94(
|
|
17103
17078
|
"div",
|
|
17104
17079
|
{
|
|
@@ -17120,23 +17095,8 @@ function Select({
|
|
|
17120
17095
|
}
|
|
17121
17096
|
return renderValue !== void 0 && renderValue !== null ? renderValue?.(value) : value.label;
|
|
17122
17097
|
};
|
|
17123
|
-
const showClearButton = isClearable && (
|
|
17098
|
+
const showClearButton = isClearable && (isMulti && asArray(value).length > 0 || !isMulti && value !== null);
|
|
17124
17099
|
const hasError = fieldHasError(errorMessages);
|
|
17125
|
-
const renderOptionItem = (option, index) => {
|
|
17126
|
-
const selected = isSelected(option);
|
|
17127
|
-
return /* @__PURE__ */ jsx435(
|
|
17128
|
-
"div",
|
|
17129
|
-
{
|
|
17130
|
-
ref: (el) => {
|
|
17131
|
-
optionRefs.current[index] = el;
|
|
17132
|
-
},
|
|
17133
|
-
onMouseEnter: () => setHighlightedIndex(index),
|
|
17134
|
-
onClick: () => handleSelect(option),
|
|
17135
|
-
children: /* @__PURE__ */ jsx435(Chip, { className: "text-left", block: true, selected, children: /* @__PURE__ */ jsx435("div", { className: "flex-1", children: renderOption !== void 0 && renderOption !== null ? renderOption?.(option, { selected }) : /* @__PURE__ */ jsx435("div", { className: cn(selected && "font-medium"), children: option.label }) }) })
|
|
17136
|
-
},
|
|
17137
|
-
option.value
|
|
17138
|
-
);
|
|
17139
|
-
};
|
|
17140
17100
|
return /* @__PURE__ */ jsx435(
|
|
17141
17101
|
FormField,
|
|
17142
17102
|
{
|
|
@@ -17145,7 +17105,6 @@ function Select({
|
|
|
17145
17105
|
description,
|
|
17146
17106
|
hint,
|
|
17147
17107
|
required,
|
|
17148
|
-
tooltip,
|
|
17149
17108
|
children: /* @__PURE__ */ jsxs94(
|
|
17150
17109
|
"div",
|
|
17151
17110
|
{
|
|
@@ -17158,8 +17117,8 @@ function Select({
|
|
|
17158
17117
|
"div",
|
|
17159
17118
|
{
|
|
17160
17119
|
"aria-selected": isOpen,
|
|
17161
|
-
onClick: () =>
|
|
17162
|
-
tabIndex: isDisabled
|
|
17120
|
+
onClick: () => !isDisabled && setIsOpen(!isOpen),
|
|
17121
|
+
tabIndex: isDisabled ? -1 : 0,
|
|
17163
17122
|
className: triggerClassName,
|
|
17164
17123
|
children: trigger
|
|
17165
17124
|
}
|
|
@@ -17169,36 +17128,33 @@ function Select({
|
|
|
17169
17128
|
{
|
|
17170
17129
|
"aria-selected": isOpen,
|
|
17171
17130
|
className: cn(
|
|
17172
|
-
"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",
|
|
17173
|
-
|
|
17131
|
+
"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",
|
|
17132
|
+
isDisabled && "cursor-not-allowed bg-gray-100",
|
|
17174
17133
|
isOpen ? "border-primary-300 ring-0" : "border-gray-200",
|
|
17175
17134
|
hasError && "border-danger-500"
|
|
17176
17135
|
),
|
|
17177
|
-
onClick: () =>
|
|
17178
|
-
tabIndex: isDisabled
|
|
17136
|
+
onClick: () => !isDisabled && setIsOpen(!isOpen),
|
|
17137
|
+
tabIndex: isDisabled ? -1 : 0,
|
|
17179
17138
|
children: [
|
|
17180
|
-
|
|
17181
|
-
/* @__PURE__ */ jsxs94("div", { className: "
|
|
17182
|
-
/* @__PURE__ */ jsx435(
|
|
17183
|
-
|
|
17184
|
-
|
|
17185
|
-
"button",
|
|
17186
|
-
|
|
17187
|
-
|
|
17188
|
-
|
|
17189
|
-
|
|
17190
|
-
|
|
17191
|
-
|
|
17192
|
-
|
|
17193
|
-
|
|
17194
|
-
|
|
17195
|
-
|
|
17196
|
-
|
|
17197
|
-
|
|
17198
|
-
|
|
17199
|
-
}
|
|
17200
|
-
)
|
|
17201
|
-
] })
|
|
17139
|
+
/* @__PURE__ */ jsx435("div", { className: "flex-1 overflow-hidden text-xs font-medium text-gray-900", children: getDisplayValue() }),
|
|
17140
|
+
/* @__PURE__ */ jsxs94("div", { className: "ml-2 flex items-center gap-1", children: [
|
|
17141
|
+
showClearButton && /* @__PURE__ */ jsx435(
|
|
17142
|
+
"button",
|
|
17143
|
+
{
|
|
17144
|
+
type: "button",
|
|
17145
|
+
onClick: handleClear,
|
|
17146
|
+
className: "cursor-pointer rounded text-center text-gray-700",
|
|
17147
|
+
children: /* @__PURE__ */ jsx435(Icon_default, { name: "times-circle", size: 20 })
|
|
17148
|
+
}
|
|
17149
|
+
),
|
|
17150
|
+
/* @__PURE__ */ jsx435(
|
|
17151
|
+
Icon_default,
|
|
17152
|
+
{
|
|
17153
|
+
className: "text-gray-700",
|
|
17154
|
+
name: isOpen ? "angle-up-small" : "angle-down-small",
|
|
17155
|
+
size: 20
|
|
17156
|
+
}
|
|
17157
|
+
)
|
|
17202
17158
|
] })
|
|
17203
17159
|
]
|
|
17204
17160
|
}
|
|
@@ -17237,14 +17193,27 @@ function Select({
|
|
|
17237
17193
|
onScroll: onLoadMore !== void 0 ? handleScroll : void 0,
|
|
17238
17194
|
children: [
|
|
17239
17195
|
renderOptions === void 0 && /* @__PURE__ */ jsxs94(Fragment10, { children: [
|
|
17240
|
-
filteredOptions.length === 0 ? /* @__PURE__ */ jsx435("div", { className: "px-3 py-8 text-center text-sm text-gray-500", children: "No options found" }) :
|
|
17241
|
-
|
|
17242
|
-
|
|
17243
|
-
|
|
17244
|
-
|
|
17245
|
-
|
|
17246
|
-
|
|
17247
|
-
|
|
17196
|
+
filteredOptions.length === 0 ? /* @__PURE__ */ jsx435("div", { className: "px-3 py-8 text-center text-sm text-gray-500", children: "No options found" }) : filteredOptions.map((option, index) => {
|
|
17197
|
+
const selected = isSelected(option);
|
|
17198
|
+
const highlighted = index === highlightedIndex;
|
|
17199
|
+
return /* @__PURE__ */ jsx435(
|
|
17200
|
+
"div",
|
|
17201
|
+
{
|
|
17202
|
+
ref: (el) => {
|
|
17203
|
+
optionRefs.current[index] = el;
|
|
17204
|
+
},
|
|
17205
|
+
onMouseEnter: () => setHighlightedIndex(index),
|
|
17206
|
+
onClick: () => handleSelect(option),
|
|
17207
|
+
className: cn(
|
|
17208
|
+
"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",
|
|
17209
|
+
highlighted && "bg-primary-100",
|
|
17210
|
+
selected ? "bg-primary-50 border-primary-300" : "hover:bg-gray-50"
|
|
17211
|
+
),
|
|
17212
|
+
children: /* @__PURE__ */ jsx435("div", { className: "flex-1", children: renderOption !== void 0 && renderOption !== null ? renderOption?.(option, { selected }) : /* @__PURE__ */ jsx435("div", { className: cn(selected && "font-medium"), children: option.label }) })
|
|
17213
|
+
},
|
|
17214
|
+
option.value
|
|
17215
|
+
);
|
|
17216
|
+
}),
|
|
17248
17217
|
onLoadMore !== void 0 && /* @__PURE__ */ jsx435(
|
|
17249
17218
|
"div",
|
|
17250
17219
|
{
|