@sarunyu/system-one 4.7.5 → 4.7.7
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 +92 -65
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +92 -65
- package/dist/index.js.map +1 -1
- package/dist/src/components/dropdown-multiple.d.ts.map +1 -1
- package/dist/src/components/toast.d.ts +13 -1
- package/dist/src/components/toast.d.ts.map +1 -1
- package/dist/src/index.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3379,75 +3379,75 @@ const DropdownMultiple = forwardRef(
|
|
|
3379
3379
|
)
|
|
3380
3380
|
}
|
|
3381
3381
|
),
|
|
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(
|
|
3382
|
+
/* @__PURE__ */ jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsx(CaretUp, { size: 22 }) : /* @__PURE__ */ jsx(CaretDown, { size: 22 }) }),
|
|
3383
|
+
open && !isStatic && options.length > 0 && /* @__PURE__ */ jsx(
|
|
3384
|
+
"div",
|
|
3385
|
+
{
|
|
3386
|
+
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",
|
|
3387
|
+
style: {
|
|
3388
|
+
boxShadow: "var(--elevation-popover)"
|
|
3389
|
+
},
|
|
3390
|
+
children: /* @__PURE__ */ jsx(
|
|
3404
3391
|
"div",
|
|
3405
3392
|
{
|
|
3406
|
-
onClick: (e) => {
|
|
3407
|
-
var _a;
|
|
3408
|
-
e.stopPropagation();
|
|
3409
|
-
handleToggleOption(opt.value);
|
|
3410
|
-
(_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
3411
|
-
},
|
|
3412
3393
|
className: cn(
|
|
3413
|
-
"w-full
|
|
3414
|
-
|
|
3394
|
+
"w-full flex flex-col",
|
|
3395
|
+
filteredOptions.length > 10 && "overflow-y-auto"
|
|
3415
3396
|
),
|
|
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(
|
|
3397
|
+
style: filteredOptions.length > 10 ? { maxHeight: 10 * 48 } : void 0,
|
|
3398
|
+
children: filteredOptions.length > 0 ? filteredOptions.map((opt) => {
|
|
3399
|
+
const isSelected = currentValue.includes(opt.value);
|
|
3400
|
+
return /* @__PURE__ */ jsx(
|
|
3428
3401
|
"div",
|
|
3429
3402
|
{
|
|
3403
|
+
onClick: (e) => {
|
|
3404
|
+
var _a;
|
|
3405
|
+
e.stopPropagation();
|
|
3406
|
+
handleToggleOption(opt.value);
|
|
3407
|
+
(_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
3408
|
+
},
|
|
3430
3409
|
className: cn(
|
|
3431
|
-
"
|
|
3432
|
-
"bg-
|
|
3410
|
+
"w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
|
|
3411
|
+
isSelected ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
|
|
3433
3412
|
),
|
|
3434
|
-
children:
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
|
|
3413
|
+
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: [
|
|
3414
|
+
/* @__PURE__ */ jsx(
|
|
3415
|
+
"p",
|
|
3416
|
+
{
|
|
3417
|
+
className: cn(
|
|
3418
|
+
"flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic overflow-hidden text-[14px] text-ellipsis whitespace-nowrap",
|
|
3419
|
+
isSelected ? "text-primary-action" : "text-foreground"
|
|
3420
|
+
),
|
|
3421
|
+
children: opt.label
|
|
3422
|
+
}
|
|
3423
|
+
),
|
|
3424
|
+
/* @__PURE__ */ jsx(
|
|
3425
|
+
"div",
|
|
3426
|
+
{
|
|
3427
|
+
className: cn(
|
|
3428
|
+
"shrink-0 w-[16px] h-[16px] rounded-[3px] flex items-center justify-center transition-colors duration-100",
|
|
3429
|
+
"bg-transparent"
|
|
3430
|
+
),
|
|
3431
|
+
children: isSelected && /* @__PURE__ */ jsx(
|
|
3432
|
+
Check,
|
|
3433
|
+
{
|
|
3434
|
+
size: 12,
|
|
3435
|
+
weight: "bold",
|
|
3436
|
+
className: "text-primary-action"
|
|
3437
|
+
}
|
|
3438
|
+
)
|
|
3439
|
+
}
|
|
3440
|
+
)
|
|
3441
|
+
] }) })
|
|
3442
|
+
},
|
|
3443
|
+
opt.value
|
|
3444
|
+
);
|
|
3445
|
+
}) : /* @__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" }) }) }) })
|
|
3446
|
+
}
|
|
3447
|
+
)
|
|
3448
|
+
}
|
|
3449
|
+
)
|
|
3450
|
+
]
|
|
3451
3451
|
}
|
|
3452
3452
|
),
|
|
3453
3453
|
showBelow && /* @__PURE__ */ jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsx(
|
|
@@ -4203,20 +4203,47 @@ function ToastStack({ items, className, renderItem }) {
|
|
|
4203
4203
|
(item) => renderItem ? /* @__PURE__ */ jsx("div", { children: renderItem(item) }, item.id) : /* @__PURE__ */ jsx(Toast, { ...item }, item.id)
|
|
4204
4204
|
) });
|
|
4205
4205
|
}
|
|
4206
|
-
function Toaster({ items, renderItem, className }) {
|
|
4206
|
+
function Toaster({ items, renderItem, className, duration = 4e3, onRemove }) {
|
|
4207
|
+
const timers = useRef(/* @__PURE__ */ new Map());
|
|
4208
|
+
useEffect(() => {
|
|
4209
|
+
if (!onRemove || duration === 0) return;
|
|
4210
|
+
items.forEach((item) => {
|
|
4211
|
+
if (!timers.current.has(item.id)) {
|
|
4212
|
+
const t = setTimeout(() => {
|
|
4213
|
+
onRemove(item.id);
|
|
4214
|
+
timers.current.delete(item.id);
|
|
4215
|
+
}, duration);
|
|
4216
|
+
timers.current.set(item.id, t);
|
|
4217
|
+
}
|
|
4218
|
+
});
|
|
4219
|
+
const live = new Set(items.map((i) => i.id));
|
|
4220
|
+
timers.current.forEach((t, id) => {
|
|
4221
|
+
if (!live.has(id)) {
|
|
4222
|
+
clearTimeout(t);
|
|
4223
|
+
timers.current.delete(id);
|
|
4224
|
+
}
|
|
4225
|
+
});
|
|
4226
|
+
});
|
|
4227
|
+
useEffect(() => {
|
|
4228
|
+
return () => {
|
|
4229
|
+
timers.current.forEach(clearTimeout);
|
|
4230
|
+
};
|
|
4231
|
+
}, []);
|
|
4207
4232
|
if (items.length === 0) return null;
|
|
4233
|
+
const enriched = items.map((item) => ({
|
|
4234
|
+
...item,
|
|
4235
|
+
onClose: onRemove ? () => onRemove(item.id) : item.onClose
|
|
4236
|
+
}));
|
|
4208
4237
|
return /* @__PURE__ */ jsx(
|
|
4209
4238
|
"div",
|
|
4210
4239
|
{
|
|
4211
4240
|
className: cn(
|
|
4212
4241
|
"fixed z-50 top-4",
|
|
4213
|
-
// desktop: top-right, fixed width
|
|
4214
4242
|
"md:right-4 md:w-[360px]",
|
|
4215
|
-
// tablet & mobile: horizontally centered, full width minus padding
|
|
4216
4243
|
"max-md:left-1/2 max-md:-translate-x-1/2 max-md:w-[calc(100vw-32px)]",
|
|
4217
4244
|
className
|
|
4218
4245
|
),
|
|
4219
|
-
children: /* @__PURE__ */ jsx(ToastStack, { items, renderItem })
|
|
4246
|
+
children: /* @__PURE__ */ jsx(ToastStack, { items: enriched, renderItem })
|
|
4220
4247
|
}
|
|
4221
4248
|
);
|
|
4222
4249
|
}
|