@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.cjs
CHANGED
|
@@ -2856,44 +2856,44 @@ const Dropdown = React.forwardRef(
|
|
|
2856
2856
|
}
|
|
2857
2857
|
)
|
|
2858
2858
|
),
|
|
2859
|
-
isFocus ? /* @__PURE__ */ jsxRuntime.jsx(react.CaretUp, { size: 22, className: cn("shrink-0", caretClassName) }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDown, { size: 22, className: cn("shrink-0", caretClassName) })
|
|
2859
|
+
isFocus ? /* @__PURE__ */ jsxRuntime.jsx(react.CaretUp, { size: 22, className: cn("shrink-0", caretClassName) }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDown, { size: 22, className: cn("shrink-0", caretClassName) }),
|
|
2860
|
+
open && !forceState && options.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2861
|
+
"div",
|
|
2862
|
+
{
|
|
2863
|
+
className: cn(
|
|
2864
|
+
"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",
|
|
2865
|
+
filteredOptions.length > 10 && "overflow-y-auto"
|
|
2866
|
+
),
|
|
2867
|
+
style: {
|
|
2868
|
+
boxShadow: "var(--elevation-popover)",
|
|
2869
|
+
...filteredOptions.length > 10 ? { maxHeight: 10 * 48 + 16 } : {}
|
|
2870
|
+
},
|
|
2871
|
+
children: filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2872
|
+
"div",
|
|
2873
|
+
{
|
|
2874
|
+
onClick: () => handleSelect(opt.value),
|
|
2875
|
+
className: cn(
|
|
2876
|
+
"w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
|
|
2877
|
+
opt.value === currentValue ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
|
|
2878
|
+
),
|
|
2879
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-3.5 relative w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2880
|
+
"p",
|
|
2881
|
+
{
|
|
2882
|
+
className: cn(
|
|
2883
|
+
"flex-1 min-w-0 min-h-[1px] leading-5 not-italic overflow-hidden text-sm text-ellipsis whitespace-nowrap",
|
|
2884
|
+
opt.value === currentValue ? "text-primary-action" : "text-foreground"
|
|
2885
|
+
),
|
|
2886
|
+
children: opt.label
|
|
2887
|
+
}
|
|
2888
|
+
) }) })
|
|
2889
|
+
},
|
|
2890
|
+
opt.value
|
|
2891
|
+
)) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
|
|
2892
|
+
}
|
|
2893
|
+
)
|
|
2860
2894
|
]
|
|
2861
2895
|
}
|
|
2862
2896
|
),
|
|
2863
|
-
open && !forceState && options.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2864
|
-
"div",
|
|
2865
|
-
{
|
|
2866
|
-
className: cn(
|
|
2867
|
-
"relative bg-popover rounded-lg overflow-clip p-2 z-20 flex flex-col items-start text-popover-foreground",
|
|
2868
|
-
filteredOptions.length > 10 && "overflow-y-auto"
|
|
2869
|
-
),
|
|
2870
|
-
style: {
|
|
2871
|
-
boxShadow: "var(--elevation-popover)",
|
|
2872
|
-
...filteredOptions.length > 10 ? { maxHeight: 10 * 48 + 16 } : {}
|
|
2873
|
-
},
|
|
2874
|
-
children: filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2875
|
-
"div",
|
|
2876
|
-
{
|
|
2877
|
-
onClick: () => handleSelect(opt.value),
|
|
2878
|
-
className: cn(
|
|
2879
|
-
"w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
|
|
2880
|
-
opt.value === currentValue ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
|
|
2881
|
-
),
|
|
2882
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-3.5 relative w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2883
|
-
"p",
|
|
2884
|
-
{
|
|
2885
|
-
className: cn(
|
|
2886
|
-
"flex-1 min-w-0 min-h-[1px] leading-5 not-italic overflow-hidden text-sm text-ellipsis whitespace-nowrap",
|
|
2887
|
-
opt.value === currentValue ? "text-primary-action" : "text-foreground"
|
|
2888
|
-
),
|
|
2889
|
-
children: opt.label
|
|
2890
|
-
}
|
|
2891
|
-
) }) })
|
|
2892
|
-
},
|
|
2893
|
-
opt.value
|
|
2894
|
-
)) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
|
|
2895
|
-
}
|
|
2896
|
-
),
|
|
2897
2897
|
showBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 min-w-0", style: { color: leftColor }, children: leftText }) })
|
|
2898
2898
|
]
|
|
2899
2899
|
}
|
|
@@ -3158,8 +3158,9 @@ const DropdownMultiple = React.forwardRef(
|
|
|
3158
3158
|
const handleTriggerClick = () => {
|
|
3159
3159
|
var _a;
|
|
3160
3160
|
if (isDisabled || isStatic) return;
|
|
3161
|
-
|
|
3162
|
-
(
|
|
3161
|
+
const next = !open;
|
|
3162
|
+
setOpen(next);
|
|
3163
|
+
if (next) (_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
3163
3164
|
};
|
|
3164
3165
|
const handleInputKeyDown = (e) => {
|
|
3165
3166
|
if (e.key === "Escape") setOpen(false);
|
|
@@ -3398,75 +3399,75 @@ const DropdownMultiple = React.forwardRef(
|
|
|
3398
3399
|
)
|
|
3399
3400
|
}
|
|
3400
3401
|
),
|
|
3401
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsxRuntime.jsx(react.CaretUp, { size: 22 }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDown, { size: 22 }) })
|
|
3402
|
-
|
|
3403
|
-
|
|
3404
|
-
|
|
3405
|
-
|
|
3406
|
-
|
|
3407
|
-
|
|
3408
|
-
|
|
3409
|
-
|
|
3410
|
-
boxShadow: "var(--elevation-popover)"
|
|
3411
|
-
},
|
|
3412
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3413
|
-
"div",
|
|
3414
|
-
{
|
|
3415
|
-
className: cn(
|
|
3416
|
-
"w-full flex flex-col",
|
|
3417
|
-
filteredOptions.length > 10 && "overflow-y-auto"
|
|
3418
|
-
),
|
|
3419
|
-
style: filteredOptions.length > 10 ? { maxHeight: 10 * 48 } : void 0,
|
|
3420
|
-
children: filteredOptions.length > 0 ? filteredOptions.map((opt) => {
|
|
3421
|
-
const isSelected = currentValue.includes(opt.value);
|
|
3422
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3402
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsxRuntime.jsx(react.CaretUp, { size: 22 }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDown, { size: 22 }) }),
|
|
3403
|
+
open && !isStatic && options.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3404
|
+
"div",
|
|
3405
|
+
{
|
|
3406
|
+
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",
|
|
3407
|
+
style: {
|
|
3408
|
+
boxShadow: "var(--elevation-popover)"
|
|
3409
|
+
},
|
|
3410
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3423
3411
|
"div",
|
|
3424
3412
|
{
|
|
3425
|
-
onClick: (e) => {
|
|
3426
|
-
var _a;
|
|
3427
|
-
e.stopPropagation();
|
|
3428
|
-
handleToggleOption(opt.value);
|
|
3429
|
-
(_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
3430
|
-
},
|
|
3431
3413
|
className: cn(
|
|
3432
|
-
"w-full
|
|
3433
|
-
|
|
3414
|
+
"w-full flex flex-col",
|
|
3415
|
+
filteredOptions.length > 10 && "overflow-y-auto"
|
|
3434
3416
|
),
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
className: cn(
|
|
3440
|
-
"flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic overflow-hidden text-[14px] text-ellipsis whitespace-nowrap",
|
|
3441
|
-
isSelected ? "text-primary-action" : "text-foreground"
|
|
3442
|
-
),
|
|
3443
|
-
children: opt.label
|
|
3444
|
-
}
|
|
3445
|
-
),
|
|
3446
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3417
|
+
style: filteredOptions.length > 10 ? { maxHeight: 10 * 48 } : void 0,
|
|
3418
|
+
children: filteredOptions.length > 0 ? filteredOptions.map((opt) => {
|
|
3419
|
+
const isSelected = currentValue.includes(opt.value);
|
|
3420
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
3447
3421
|
"div",
|
|
3448
3422
|
{
|
|
3423
|
+
onClick: (e) => {
|
|
3424
|
+
var _a;
|
|
3425
|
+
e.stopPropagation();
|
|
3426
|
+
handleToggleOption(opt.value);
|
|
3427
|
+
(_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
3428
|
+
},
|
|
3449
3429
|
className: cn(
|
|
3450
|
-
"
|
|
3451
|
-
"bg-
|
|
3430
|
+
"w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
|
|
3431
|
+
isSelected ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
|
|
3452
3432
|
),
|
|
3453
|
-
children:
|
|
3454
|
-
|
|
3455
|
-
|
|
3456
|
-
|
|
3457
|
-
|
|
3458
|
-
|
|
3459
|
-
|
|
3460
|
-
|
|
3461
|
-
|
|
3462
|
-
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
|
|
3466
|
-
|
|
3467
|
-
|
|
3468
|
-
|
|
3469
|
-
|
|
3433
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[8px] p-[14px] relative w-full", children: [
|
|
3434
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3435
|
+
"p",
|
|
3436
|
+
{
|
|
3437
|
+
className: cn(
|
|
3438
|
+
"flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic overflow-hidden text-[14px] text-ellipsis whitespace-nowrap",
|
|
3439
|
+
isSelected ? "text-primary-action" : "text-foreground"
|
|
3440
|
+
),
|
|
3441
|
+
children: opt.label
|
|
3442
|
+
}
|
|
3443
|
+
),
|
|
3444
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3445
|
+
"div",
|
|
3446
|
+
{
|
|
3447
|
+
className: cn(
|
|
3448
|
+
"shrink-0 w-[16px] h-[16px] rounded-[3px] flex items-center justify-center transition-colors duration-100",
|
|
3449
|
+
"bg-transparent"
|
|
3450
|
+
),
|
|
3451
|
+
children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3452
|
+
react.Check,
|
|
3453
|
+
{
|
|
3454
|
+
size: 12,
|
|
3455
|
+
weight: "bold",
|
|
3456
|
+
className: "text-primary-action"
|
|
3457
|
+
}
|
|
3458
|
+
)
|
|
3459
|
+
}
|
|
3460
|
+
)
|
|
3461
|
+
] }) })
|
|
3462
|
+
},
|
|
3463
|
+
opt.value
|
|
3464
|
+
);
|
|
3465
|
+
}) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
|
|
3466
|
+
}
|
|
3467
|
+
)
|
|
3468
|
+
}
|
|
3469
|
+
)
|
|
3470
|
+
]
|
|
3470
3471
|
}
|
|
3471
3472
|
),
|
|
3472
3473
|
showBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx(
|