@sarunyu/system-one 4.7.6 → 4.7.9
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.cjs +99 -98
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +99 -98
- package/dist/index.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2837,44 +2837,44 @@ const Dropdown = forwardRef(
|
|
|
2837
2837
|
}
|
|
2838
2838
|
)
|
|
2839
2839
|
),
|
|
2840
|
-
isFocus ? /* @__PURE__ */ jsx(CaretUp, { size: 22, className: cn("shrink-0", caretClassName) }) : /* @__PURE__ */ jsx(CaretDown, { size: 22, className: cn("shrink-0", caretClassName) })
|
|
2840
|
+
isFocus ? /* @__PURE__ */ jsx(CaretUp, { size: 22, className: cn("shrink-0", caretClassName) }) : /* @__PURE__ */ jsx(CaretDown, { size: 22, className: cn("shrink-0", caretClassName) }),
|
|
2841
|
+
open && !forceState && options.length > 0 && /* @__PURE__ */ jsx(
|
|
2842
|
+
"div",
|
|
2843
|
+
{
|
|
2844
|
+
className: cn(
|
|
2845
|
+
"absolute top-full left-0 w-full mt-1 bg-popover rounded-lg overflow-clip p-2 z-50 flex flex-col items-start text-popover-foreground",
|
|
2846
|
+
filteredOptions.length > 10 && "overflow-y-auto"
|
|
2847
|
+
),
|
|
2848
|
+
style: {
|
|
2849
|
+
boxShadow: "var(--elevation-popover)",
|
|
2850
|
+
...filteredOptions.length > 10 ? { maxHeight: 10 * 48 + 16 } : {}
|
|
2851
|
+
},
|
|
2852
|
+
children: filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ jsx(
|
|
2853
|
+
"div",
|
|
2854
|
+
{
|
|
2855
|
+
onClick: () => handleSelect(opt.value),
|
|
2856
|
+
className: cn(
|
|
2857
|
+
"w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
|
|
2858
|
+
opt.value === currentValue ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
|
|
2859
|
+
),
|
|
2860
|
+
children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-3.5 relative w-full", children: /* @__PURE__ */ jsx(
|
|
2861
|
+
"p",
|
|
2862
|
+
{
|
|
2863
|
+
className: cn(
|
|
2864
|
+
"flex-1 min-w-0 min-h-[1px] leading-5 not-italic overflow-hidden text-sm text-ellipsis whitespace-nowrap",
|
|
2865
|
+
opt.value === currentValue ? "text-primary-action" : "text-foreground"
|
|
2866
|
+
),
|
|
2867
|
+
children: opt.label
|
|
2868
|
+
}
|
|
2869
|
+
) }) })
|
|
2870
|
+
},
|
|
2871
|
+
opt.value
|
|
2872
|
+
)) : /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
|
|
2873
|
+
}
|
|
2874
|
+
)
|
|
2841
2875
|
]
|
|
2842
2876
|
}
|
|
2843
2877
|
),
|
|
2844
|
-
open && !forceState && options.length > 0 && /* @__PURE__ */ jsx(
|
|
2845
|
-
"div",
|
|
2846
|
-
{
|
|
2847
|
-
className: cn(
|
|
2848
|
-
"relative bg-popover rounded-lg overflow-clip p-2 z-20 flex flex-col items-start text-popover-foreground",
|
|
2849
|
-
filteredOptions.length > 10 && "overflow-y-auto"
|
|
2850
|
-
),
|
|
2851
|
-
style: {
|
|
2852
|
-
boxShadow: "var(--elevation-popover)",
|
|
2853
|
-
...filteredOptions.length > 10 ? { maxHeight: 10 * 48 + 16 } : {}
|
|
2854
|
-
},
|
|
2855
|
-
children: filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ jsx(
|
|
2856
|
-
"div",
|
|
2857
|
-
{
|
|
2858
|
-
onClick: () => handleSelect(opt.value),
|
|
2859
|
-
className: cn(
|
|
2860
|
-
"w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
|
|
2861
|
-
opt.value === currentValue ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
|
|
2862
|
-
),
|
|
2863
|
-
children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-3.5 relative w-full", children: /* @__PURE__ */ jsx(
|
|
2864
|
-
"p",
|
|
2865
|
-
{
|
|
2866
|
-
className: cn(
|
|
2867
|
-
"flex-1 min-w-0 min-h-[1px] leading-5 not-italic overflow-hidden text-sm text-ellipsis whitespace-nowrap",
|
|
2868
|
-
opt.value === currentValue ? "text-primary-action" : "text-foreground"
|
|
2869
|
-
),
|
|
2870
|
-
children: opt.label
|
|
2871
|
-
}
|
|
2872
|
-
) }) })
|
|
2873
|
-
},
|
|
2874
|
-
opt.value
|
|
2875
|
-
)) : /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
|
|
2876
|
-
}
|
|
2877
|
-
),
|
|
2878
2878
|
showBelow && /* @__PURE__ */ jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0", style: { color: leftColor }, children: leftText }) })
|
|
2879
2879
|
]
|
|
2880
2880
|
}
|
|
@@ -3139,8 +3139,9 @@ const DropdownMultiple = forwardRef(
|
|
|
3139
3139
|
const handleTriggerClick = () => {
|
|
3140
3140
|
var _a;
|
|
3141
3141
|
if (isDisabled || isStatic) return;
|
|
3142
|
-
|
|
3143
|
-
(
|
|
3142
|
+
const next = !open;
|
|
3143
|
+
setOpen(next);
|
|
3144
|
+
if (next) (_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
3144
3145
|
};
|
|
3145
3146
|
const handleInputKeyDown = (e) => {
|
|
3146
3147
|
if (e.key === "Escape") setOpen(false);
|
|
@@ -3379,75 +3380,75 @@ const DropdownMultiple = forwardRef(
|
|
|
3379
3380
|
)
|
|
3380
3381
|
}
|
|
3381
3382
|
),
|
|
3382
|
-
/* @__PURE__ */ jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsx(CaretUp, { size: 22 }) : /* @__PURE__ */ jsx(CaretDown, { size: 22 }) })
|
|
3383
|
-
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
|
|
3389
|
-
|
|
3390
|
-
|
|
3391
|
-
boxShadow: "var(--elevation-popover)"
|
|
3392
|
-
},
|
|
3393
|
-
children: /* @__PURE__ */ jsx(
|
|
3394
|
-
"div",
|
|
3395
|
-
{
|
|
3396
|
-
className: cn(
|
|
3397
|
-
"w-full flex flex-col",
|
|
3398
|
-
filteredOptions.length > 10 && "overflow-y-auto"
|
|
3399
|
-
),
|
|
3400
|
-
style: filteredOptions.length > 10 ? { maxHeight: 10 * 48 } : void 0,
|
|
3401
|
-
children: filteredOptions.length > 0 ? filteredOptions.map((opt) => {
|
|
3402
|
-
const isSelected = currentValue.includes(opt.value);
|
|
3403
|
-
return /* @__PURE__ */ jsx(
|
|
3383
|
+
/* @__PURE__ */ jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsx(CaretUp, { size: 22 }) : /* @__PURE__ */ jsx(CaretDown, { size: 22 }) }),
|
|
3384
|
+
open && !isStatic && options.length > 0 && /* @__PURE__ */ jsx(
|
|
3385
|
+
"div",
|
|
3386
|
+
{
|
|
3387
|
+
className: "absolute top-full left-0 w-full mt-1 bg-popover rounded-[8px] overflow-clip p-[8px] z-50 flex flex-col items-start text-popover-foreground",
|
|
3388
|
+
style: {
|
|
3389
|
+
boxShadow: "var(--elevation-popover)"
|
|
3390
|
+
},
|
|
3391
|
+
children: /* @__PURE__ */ jsx(
|
|
3404
3392
|
"div",
|
|
3405
3393
|
{
|
|
3406
|
-
onClick: (e) => {
|
|
3407
|
-
var _a;
|
|
3408
|
-
e.stopPropagation();
|
|
3409
|
-
handleToggleOption(opt.value);
|
|
3410
|
-
(_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
3411
|
-
},
|
|
3412
3394
|
className: cn(
|
|
3413
|
-
"w-full
|
|
3414
|
-
|
|
3395
|
+
"w-full flex flex-col",
|
|
3396
|
+
filteredOptions.length > 10 && "overflow-y-auto"
|
|
3415
3397
|
),
|
|
3416
|
-
|
|
3417
|
-
|
|
3418
|
-
|
|
3419
|
-
|
|
3420
|
-
className: cn(
|
|
3421
|
-
"flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic overflow-hidden text-[14px] text-ellipsis whitespace-nowrap",
|
|
3422
|
-
isSelected ? "text-primary-action" : "text-foreground"
|
|
3423
|
-
),
|
|
3424
|
-
children: opt.label
|
|
3425
|
-
}
|
|
3426
|
-
),
|
|
3427
|
-
/* @__PURE__ */ jsx(
|
|
3398
|
+
style: filteredOptions.length > 10 ? { maxHeight: 10 * 48 } : void 0,
|
|
3399
|
+
children: filteredOptions.length > 0 ? filteredOptions.map((opt) => {
|
|
3400
|
+
const isSelected = currentValue.includes(opt.value);
|
|
3401
|
+
return /* @__PURE__ */ jsx(
|
|
3428
3402
|
"div",
|
|
3429
3403
|
{
|
|
3404
|
+
onClick: (e) => {
|
|
3405
|
+
var _a;
|
|
3406
|
+
e.stopPropagation();
|
|
3407
|
+
handleToggleOption(opt.value);
|
|
3408
|
+
(_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
3409
|
+
},
|
|
3430
3410
|
className: cn(
|
|
3431
|
-
"
|
|
3432
|
-
"bg-
|
|
3411
|
+
"w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
|
|
3412
|
+
isSelected ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
|
|
3433
3413
|
),
|
|
3434
|
-
children:
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
|
|
3414
|
+
children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[8px] p-[14px] relative w-full", children: [
|
|
3415
|
+
/* @__PURE__ */ jsx(
|
|
3416
|
+
"p",
|
|
3417
|
+
{
|
|
3418
|
+
className: cn(
|
|
3419
|
+
"flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic overflow-hidden text-[14px] text-ellipsis whitespace-nowrap",
|
|
3420
|
+
isSelected ? "text-primary-action" : "text-foreground"
|
|
3421
|
+
),
|
|
3422
|
+
children: opt.label
|
|
3423
|
+
}
|
|
3424
|
+
),
|
|
3425
|
+
/* @__PURE__ */ jsx(
|
|
3426
|
+
"div",
|
|
3427
|
+
{
|
|
3428
|
+
className: cn(
|
|
3429
|
+
"shrink-0 w-[16px] h-[16px] rounded-[3px] flex items-center justify-center transition-colors duration-100",
|
|
3430
|
+
"bg-transparent"
|
|
3431
|
+
),
|
|
3432
|
+
children: isSelected && /* @__PURE__ */ jsx(
|
|
3433
|
+
Check,
|
|
3434
|
+
{
|
|
3435
|
+
size: 12,
|
|
3436
|
+
weight: "bold",
|
|
3437
|
+
className: "text-primary-action"
|
|
3438
|
+
}
|
|
3439
|
+
)
|
|
3440
|
+
}
|
|
3441
|
+
)
|
|
3442
|
+
] }) })
|
|
3443
|
+
},
|
|
3444
|
+
opt.value
|
|
3445
|
+
);
|
|
3446
|
+
}) : /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
|
|
3447
|
+
}
|
|
3448
|
+
)
|
|
3449
|
+
}
|
|
3450
|
+
)
|
|
3451
|
+
]
|
|
3451
3452
|
}
|
|
3452
3453
|
),
|
|
3453
3454
|
showBelow && /* @__PURE__ */ jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsx(
|