@seekho/ui 0.1.41 → 0.1.44
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 +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +20 -6
- package/dist/index.mjs +20 -6
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -44,6 +44,7 @@ interface RenderOptionProps {
|
|
|
44
44
|
onClick: (e: React.MouseEvent<HTMLLIElement>) => void;
|
|
45
45
|
onMouseEnter: () => void;
|
|
46
46
|
className: string;
|
|
47
|
+
style?: React.CSSProperties;
|
|
47
48
|
}
|
|
48
49
|
interface AutoCompleteProps<T> {
|
|
49
50
|
label?: string;
|
|
@@ -251,6 +252,7 @@ interface SelectOptionData {
|
|
|
251
252
|
interface SelectRenderOptionProps {
|
|
252
253
|
onMouseDown: () => void;
|
|
253
254
|
className: string;
|
|
255
|
+
style?: React.CSSProperties;
|
|
254
256
|
}
|
|
255
257
|
interface SelectProps {
|
|
256
258
|
value: string | number;
|
package/dist/index.d.ts
CHANGED
|
@@ -44,6 +44,7 @@ interface RenderOptionProps {
|
|
|
44
44
|
onClick: (e: React.MouseEvent<HTMLLIElement>) => void;
|
|
45
45
|
onMouseEnter: () => void;
|
|
46
46
|
className: string;
|
|
47
|
+
style?: React.CSSProperties;
|
|
47
48
|
}
|
|
48
49
|
interface AutoCompleteProps<T> {
|
|
49
50
|
label?: string;
|
|
@@ -251,6 +252,7 @@ interface SelectOptionData {
|
|
|
251
252
|
interface SelectRenderOptionProps {
|
|
252
253
|
onMouseDown: () => void;
|
|
253
254
|
className: string;
|
|
255
|
+
style?: React.CSSProperties;
|
|
254
256
|
}
|
|
255
257
|
interface SelectProps {
|
|
256
258
|
value: string | number;
|
package/dist/index.js
CHANGED
|
@@ -234,6 +234,7 @@ function AutoComplete({
|
|
|
234
234
|
const inputId = React8.useId();
|
|
235
235
|
const containerRef = React8.useRef(null);
|
|
236
236
|
const listRef = React8.useRef(null);
|
|
237
|
+
const inputRef = React8.useRef(null);
|
|
237
238
|
const [open, setOpen] = React8.useState(false);
|
|
238
239
|
const [inputValue, setInputValue] = React8.useState(
|
|
239
240
|
value ? getOptionLabel(value) : ""
|
|
@@ -312,6 +313,7 @@ function AutoComplete({
|
|
|
312
313
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
313
314
|
"input",
|
|
314
315
|
{
|
|
316
|
+
ref: inputRef,
|
|
315
317
|
id: inputId,
|
|
316
318
|
value: inputValue,
|
|
317
319
|
disabled,
|
|
@@ -354,7 +356,7 @@ function AutoComplete({
|
|
|
354
356
|
]
|
|
355
357
|
}
|
|
356
358
|
),
|
|
357
|
-
value && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
|
|
359
|
+
value && !disabled && getOptionLabel(value) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
358
360
|
"button",
|
|
359
361
|
{
|
|
360
362
|
type: "button",
|
|
@@ -388,7 +390,13 @@ function AutoComplete({
|
|
|
388
390
|
{
|
|
389
391
|
type: "button",
|
|
390
392
|
disabled,
|
|
391
|
-
onClick: () =>
|
|
393
|
+
onClick: () => {
|
|
394
|
+
var _a;
|
|
395
|
+
if (!disabled) {
|
|
396
|
+
setOpen((prev) => !prev);
|
|
397
|
+
(_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
398
|
+
}
|
|
399
|
+
},
|
|
392
400
|
className: "text-gray-400 hover:text-gray-600 transition-colors disabled:cursor-not-allowed",
|
|
393
401
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
394
402
|
"svg",
|
|
@@ -420,21 +428,24 @@ function AutoComplete({
|
|
|
420
428
|
id: "HideScroll",
|
|
421
429
|
className: "absolute z-50 mt-1 w-full bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-y-auto",
|
|
422
430
|
children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-3 py-2 text-[13px] text-gray-400", children: "Loading..." }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-3 py-2 text-[13px] text-gray-400", children: "No options" }) : filteredOptions.map((option, idx) => {
|
|
431
|
+
const isHighlighted = highlightedIndex === idx;
|
|
423
432
|
const optionProps = {
|
|
424
433
|
onClick: () => handleSelect({ option }),
|
|
425
434
|
onMouseEnter: () => {
|
|
426
435
|
},
|
|
427
436
|
className: [
|
|
428
437
|
"px-3 py-2 text-[13px] font-medium cursor-pointer select-none",
|
|
429
|
-
|
|
438
|
+
isHighlighted ? "cursor-pointer" : "text-gray-700 hover:bg-gray-100",
|
|
430
439
|
isSelected({ option }) ? "font-semibold" : ""
|
|
431
|
-
].join(" ")
|
|
440
|
+
].join(" "),
|
|
441
|
+
style: isHighlighted ? { backgroundColor: "color-mix(in srgb, var(--skPrimary, #534f8f) 12%, transparent)", color: "var(--skPrimary, #534f8f)" } : void 0
|
|
432
442
|
};
|
|
433
443
|
return renderOption ? /* @__PURE__ */ jsxRuntime.jsx(React8__default.default.Fragment, { children: renderOption(optionProps, option) }, idx) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
434
444
|
"li",
|
|
435
445
|
{
|
|
436
446
|
onMouseDown: () => handleSelect({ option }),
|
|
437
447
|
className: optionProps.className,
|
|
448
|
+
style: optionProps.style,
|
|
438
449
|
children: getOptionLabel(option)
|
|
439
450
|
},
|
|
440
451
|
idx
|
|
@@ -1925,6 +1936,7 @@ var Select = ({
|
|
|
1925
1936
|
return next >= 0 ? next : prev;
|
|
1926
1937
|
});
|
|
1927
1938
|
} else if (e.key === "Enter" && focusedIndex >= 0) {
|
|
1939
|
+
e.preventDefault();
|
|
1928
1940
|
const opt = options[focusedIndex];
|
|
1929
1941
|
if (opt && !opt.disabled) {
|
|
1930
1942
|
onChange({ target: { value: opt.value } });
|
|
@@ -2007,13 +2019,15 @@ var Select = ({
|
|
|
2007
2019
|
id: "HideScroll",
|
|
2008
2020
|
className: "bg-white shadow-lg rounded-md border border-gray-200 max-h-60 overflow-y-auto",
|
|
2009
2021
|
children: options.map((opt, i) => {
|
|
2022
|
+
const isHighlighted = !opt.disabled && focusedIndex === i;
|
|
2010
2023
|
const optionProps = {
|
|
2011
2024
|
onMouseDown: () => handleSelect(opt),
|
|
2012
2025
|
className: [
|
|
2013
2026
|
"px-3 py-2 text-[13px] font-medium select-none",
|
|
2014
|
-
opt.disabled ? "text-gray-400 cursor-not-allowed" :
|
|
2027
|
+
opt.disabled ? "text-gray-400 cursor-not-allowed" : isHighlighted ? "cursor-pointer" : "text-gray-700 hover:bg-gray-100 cursor-pointer",
|
|
2015
2028
|
String(opt.value) === String(value) ? "font-semibold" : ""
|
|
2016
|
-
].join(" ")
|
|
2029
|
+
].join(" "),
|
|
2030
|
+
style: isHighlighted ? { backgroundColor: "color-mix(in srgb, var(--skPrimary, #534f8f) 12%, transparent)", color: "var(--skPrimary, #534f8f)" } : void 0
|
|
2017
2031
|
};
|
|
2018
2032
|
return renderOption ? /* @__PURE__ */ jsxRuntime.jsx(React8__default.default.Fragment, { children: renderOption(optionProps, opt) }, i) : /* @__PURE__ */ jsxRuntime.jsx("li", __spreadProps(__spreadValues({}, optionProps), { children: opt.label }), i);
|
|
2019
2033
|
})
|
package/dist/index.mjs
CHANGED
|
@@ -227,6 +227,7 @@ function AutoComplete({
|
|
|
227
227
|
const inputId = useId();
|
|
228
228
|
const containerRef = useRef(null);
|
|
229
229
|
const listRef = useRef(null);
|
|
230
|
+
const inputRef = useRef(null);
|
|
230
231
|
const [open, setOpen] = useState(false);
|
|
231
232
|
const [inputValue, setInputValue] = useState(
|
|
232
233
|
value ? getOptionLabel(value) : ""
|
|
@@ -305,6 +306,7 @@ function AutoComplete({
|
|
|
305
306
|
/* @__PURE__ */ jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx(
|
|
306
307
|
"input",
|
|
307
308
|
{
|
|
309
|
+
ref: inputRef,
|
|
308
310
|
id: inputId,
|
|
309
311
|
value: inputValue,
|
|
310
312
|
disabled,
|
|
@@ -347,7 +349,7 @@ function AutoComplete({
|
|
|
347
349
|
]
|
|
348
350
|
}
|
|
349
351
|
),
|
|
350
|
-
value && !disabled && /* @__PURE__ */ jsx(
|
|
352
|
+
value && !disabled && getOptionLabel(value) && /* @__PURE__ */ jsx(
|
|
351
353
|
"button",
|
|
352
354
|
{
|
|
353
355
|
type: "button",
|
|
@@ -381,7 +383,13 @@ function AutoComplete({
|
|
|
381
383
|
{
|
|
382
384
|
type: "button",
|
|
383
385
|
disabled,
|
|
384
|
-
onClick: () =>
|
|
386
|
+
onClick: () => {
|
|
387
|
+
var _a;
|
|
388
|
+
if (!disabled) {
|
|
389
|
+
setOpen((prev) => !prev);
|
|
390
|
+
(_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
391
|
+
}
|
|
392
|
+
},
|
|
385
393
|
className: "text-gray-400 hover:text-gray-600 transition-colors disabled:cursor-not-allowed",
|
|
386
394
|
children: /* @__PURE__ */ jsx(
|
|
387
395
|
"svg",
|
|
@@ -413,21 +421,24 @@ function AutoComplete({
|
|
|
413
421
|
id: "HideScroll",
|
|
414
422
|
className: "absolute z-50 mt-1 w-full bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-y-auto",
|
|
415
423
|
children: isLoading ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-[13px] text-gray-400", children: "Loading..." }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-[13px] text-gray-400", children: "No options" }) : filteredOptions.map((option, idx) => {
|
|
424
|
+
const isHighlighted = highlightedIndex === idx;
|
|
416
425
|
const optionProps = {
|
|
417
426
|
onClick: () => handleSelect({ option }),
|
|
418
427
|
onMouseEnter: () => {
|
|
419
428
|
},
|
|
420
429
|
className: [
|
|
421
430
|
"px-3 py-2 text-[13px] font-medium cursor-pointer select-none",
|
|
422
|
-
|
|
431
|
+
isHighlighted ? "cursor-pointer" : "text-gray-700 hover:bg-gray-100",
|
|
423
432
|
isSelected({ option }) ? "font-semibold" : ""
|
|
424
|
-
].join(" ")
|
|
433
|
+
].join(" "),
|
|
434
|
+
style: isHighlighted ? { backgroundColor: "color-mix(in srgb, var(--skPrimary, #534f8f) 12%, transparent)", color: "var(--skPrimary, #534f8f)" } : void 0
|
|
425
435
|
};
|
|
426
436
|
return renderOption ? /* @__PURE__ */ jsx(React8.Fragment, { children: renderOption(optionProps, option) }, idx) : /* @__PURE__ */ jsx(
|
|
427
437
|
"li",
|
|
428
438
|
{
|
|
429
439
|
onMouseDown: () => handleSelect({ option }),
|
|
430
440
|
className: optionProps.className,
|
|
441
|
+
style: optionProps.style,
|
|
431
442
|
children: getOptionLabel(option)
|
|
432
443
|
},
|
|
433
444
|
idx
|
|
@@ -1918,6 +1929,7 @@ var Select = ({
|
|
|
1918
1929
|
return next >= 0 ? next : prev;
|
|
1919
1930
|
});
|
|
1920
1931
|
} else if (e.key === "Enter" && focusedIndex >= 0) {
|
|
1932
|
+
e.preventDefault();
|
|
1921
1933
|
const opt = options[focusedIndex];
|
|
1922
1934
|
if (opt && !opt.disabled) {
|
|
1923
1935
|
onChange({ target: { value: opt.value } });
|
|
@@ -2000,13 +2012,15 @@ var Select = ({
|
|
|
2000
2012
|
id: "HideScroll",
|
|
2001
2013
|
className: "bg-white shadow-lg rounded-md border border-gray-200 max-h-60 overflow-y-auto",
|
|
2002
2014
|
children: options.map((opt, i) => {
|
|
2015
|
+
const isHighlighted = !opt.disabled && focusedIndex === i;
|
|
2003
2016
|
const optionProps = {
|
|
2004
2017
|
onMouseDown: () => handleSelect(opt),
|
|
2005
2018
|
className: [
|
|
2006
2019
|
"px-3 py-2 text-[13px] font-medium select-none",
|
|
2007
|
-
opt.disabled ? "text-gray-400 cursor-not-allowed" :
|
|
2020
|
+
opt.disabled ? "text-gray-400 cursor-not-allowed" : isHighlighted ? "cursor-pointer" : "text-gray-700 hover:bg-gray-100 cursor-pointer",
|
|
2008
2021
|
String(opt.value) === String(value) ? "font-semibold" : ""
|
|
2009
|
-
].join(" ")
|
|
2022
|
+
].join(" "),
|
|
2023
|
+
style: isHighlighted ? { backgroundColor: "color-mix(in srgb, var(--skPrimary, #534f8f) 12%, transparent)", color: "var(--skPrimary, #534f8f)" } : void 0
|
|
2010
2024
|
};
|
|
2011
2025
|
return renderOption ? /* @__PURE__ */ jsx(React8.Fragment, { children: renderOption(optionProps, opt) }, i) : /* @__PURE__ */ jsx("li", __spreadProps(__spreadValues({}, optionProps), { children: opt.label }), i);
|
|
2012
2026
|
})
|