@wistia/ui 0.18.0-beta.6d32b1a6.7a80f3d → 0.18.0-beta.978703a9.78cdfd1
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 +33 -26
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +8 -9
- package/dist/index.d.ts +8 -9
- package/dist/index.mjs +33 -26
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.18.0-beta.
|
|
3
|
+
* @license @wistia/ui v0.18.0-beta.978703a9.78cdfd1
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -3370,7 +3370,7 @@ var StyledToast = import_styled_components17.styled.div`
|
|
|
3370
3370
|
justify-content: space-between;
|
|
3371
3371
|
min-height: 56px;
|
|
3372
3372
|
width: 356px;
|
|
3373
|
-
border-radius: var(--wui-border-radius-
|
|
3373
|
+
border-radius: var(--wui-border-radius-02);
|
|
3374
3374
|
background-color: var(--wui-color-bg-surface);
|
|
3375
3375
|
border: 1px solid var(--wui-color-border);
|
|
3376
3376
|
color: var(--wui-color-text);
|
|
@@ -3386,13 +3386,28 @@ var StyledToast = import_styled_components17.styled.div`
|
|
|
3386
3386
|
flex: 0 0 16px;
|
|
3387
3387
|
}
|
|
3388
3388
|
`;
|
|
3389
|
-
var Action = ({
|
|
3389
|
+
var Action = ({
|
|
3390
|
+
actionButton,
|
|
3391
|
+
toastId
|
|
3392
|
+
}) => {
|
|
3390
3393
|
if ((0, import_type_guards11.isNotNil)(actionButton) && (0, import_react19.isValidElement)(actionButton)) {
|
|
3394
|
+
const { onClick, ...restProps } = actionButton.props;
|
|
3395
|
+
const handleClick = (event) => {
|
|
3396
|
+
if (onClick) {
|
|
3397
|
+
onClick(
|
|
3398
|
+
event,
|
|
3399
|
+
toastId ?? ""
|
|
3400
|
+
);
|
|
3401
|
+
}
|
|
3402
|
+
};
|
|
3391
3403
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActionWrapper, { children: (0, import_react19.cloneElement)(actionButton, {
|
|
3404
|
+
...restProps,
|
|
3392
3405
|
variant: "soft",
|
|
3393
3406
|
// force Button variant
|
|
3394
|
-
size: "sm"
|
|
3407
|
+
size: "sm",
|
|
3395
3408
|
// force Button size
|
|
3409
|
+
onClick: handleClick
|
|
3410
|
+
// decorate onClick function with new args
|
|
3396
3411
|
}) });
|
|
3397
3412
|
}
|
|
3398
3413
|
return null;
|
|
@@ -3402,6 +3417,7 @@ var Toast = ({
|
|
|
3402
3417
|
message,
|
|
3403
3418
|
colorScheme = "inherit",
|
|
3404
3419
|
icon,
|
|
3420
|
+
toastId,
|
|
3405
3421
|
...props
|
|
3406
3422
|
}) => {
|
|
3407
3423
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
@@ -3414,7 +3430,13 @@ var Toast = ({
|
|
|
3414
3430
|
(0, import_type_guards11.isNotNil)(icon) ? icon : null,
|
|
3415
3431
|
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Message, { lines: 3, children: message })
|
|
3416
3432
|
] }),
|
|
3417
|
-
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
3433
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
3434
|
+
Action,
|
|
3435
|
+
{
|
|
3436
|
+
actionButton: action,
|
|
3437
|
+
toastId
|
|
3438
|
+
}
|
|
3439
|
+
)
|
|
3418
3440
|
]
|
|
3419
3441
|
}
|
|
3420
3442
|
);
|
|
@@ -3427,14 +3449,15 @@ var useToast = () => {
|
|
|
3427
3449
|
return (0, import_react20.useCallback)(
|
|
3428
3450
|
({ message, action, colorScheme, icon, position = "bottom-left", duration = 3e3 }) => {
|
|
3429
3451
|
import_sonner2.toast.custom(
|
|
3430
|
-
() => {
|
|
3452
|
+
(toastId) => {
|
|
3431
3453
|
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
3432
3454
|
Toast,
|
|
3433
3455
|
{
|
|
3434
3456
|
action,
|
|
3435
3457
|
colorScheme,
|
|
3436
3458
|
icon,
|
|
3437
|
-
message
|
|
3459
|
+
message,
|
|
3460
|
+
toastId: String(toastId)
|
|
3438
3461
|
}
|
|
3439
3462
|
);
|
|
3440
3463
|
},
|
|
@@ -14380,7 +14403,6 @@ var EditableTextRoot = ({
|
|
|
14380
14403
|
typographicVariant = "body2",
|
|
14381
14404
|
submitMode = "both",
|
|
14382
14405
|
readOnly = false,
|
|
14383
|
-
disabled = false,
|
|
14384
14406
|
id,
|
|
14385
14407
|
label,
|
|
14386
14408
|
placeholder = "Click to edit this text",
|
|
@@ -14398,14 +14420,13 @@ var EditableTextRoot = ({
|
|
|
14398
14420
|
const computedId = (0, import_type_guards45.isNonEmptyString)(id) ? id : `wistia-ui-editable-text-${generatedId}`;
|
|
14399
14421
|
const handleSetIsEditing = (0, import_react64.useCallback)(
|
|
14400
14422
|
(editing) => {
|
|
14401
|
-
if (disabled) return;
|
|
14402
14423
|
if (editing && !isEditing) {
|
|
14403
14424
|
setOriginalValue(value);
|
|
14404
14425
|
}
|
|
14405
14426
|
setIsEditing(editing);
|
|
14406
14427
|
onEditingChange?.(editing);
|
|
14407
14428
|
},
|
|
14408
|
-
[
|
|
14429
|
+
[isEditing, value, onEditingChange]
|
|
14409
14430
|
);
|
|
14410
14431
|
const setValue = (0, import_react64.useCallback)(
|
|
14411
14432
|
(newValue) => {
|
|
@@ -14428,7 +14449,6 @@ var EditableTextRoot = ({
|
|
|
14428
14449
|
typographicVariant,
|
|
14429
14450
|
submitMode,
|
|
14430
14451
|
readOnly,
|
|
14431
|
-
disabled,
|
|
14432
14452
|
id: computedId,
|
|
14433
14453
|
label,
|
|
14434
14454
|
placeholder,
|
|
@@ -14447,7 +14467,6 @@ var EditableTextRoot = ({
|
|
|
14447
14467
|
typographicVariant,
|
|
14448
14468
|
submitMode,
|
|
14449
14469
|
readOnly,
|
|
14450
|
-
disabled,
|
|
14451
14470
|
computedId,
|
|
14452
14471
|
label,
|
|
14453
14472
|
placeholder,
|
|
@@ -14459,9 +14478,6 @@ var EditableTextRoot = ({
|
|
|
14459
14478
|
if (readOnly) {
|
|
14460
14479
|
return "read-only";
|
|
14461
14480
|
}
|
|
14462
|
-
if (disabled) {
|
|
14463
|
-
return "disabled";
|
|
14464
|
-
}
|
|
14465
14481
|
if (isEditing) {
|
|
14466
14482
|
return "editing";
|
|
14467
14483
|
}
|
|
@@ -14522,16 +14538,7 @@ var EditableTextDisplayComponent = (0, import_react65.forwardRef)(
|
|
|
14522
14538
|
if (!context) {
|
|
14523
14539
|
throw new Error("EditableTextDisplay must be used within an EditableTextRoot context");
|
|
14524
14540
|
}
|
|
14525
|
-
const {
|
|
14526
|
-
value,
|
|
14527
|
-
typographicVariant,
|
|
14528
|
-
setIsEditing,
|
|
14529
|
-
placeholder,
|
|
14530
|
-
maxLines,
|
|
14531
|
-
isEditing,
|
|
14532
|
-
minLines,
|
|
14533
|
-
disabled
|
|
14534
|
-
} = context;
|
|
14541
|
+
const { value, typographicVariant, setIsEditing, placeholder, maxLines, isEditing, minLines } = context;
|
|
14535
14542
|
const triggerButtonRef = (0, import_react65.useRef)(null);
|
|
14536
14543
|
const handleTriggerClick = () => {
|
|
14537
14544
|
setIsEditing(true);
|
|
@@ -14542,7 +14549,7 @@ var EditableTextDisplayComponent = (0, import_react65.forwardRef)(
|
|
|
14542
14549
|
if (isEditing) {
|
|
14543
14550
|
return null;
|
|
14544
14551
|
}
|
|
14545
|
-
if (asTrigger && !context.readOnly
|
|
14552
|
+
if (asTrigger && !context.readOnly) {
|
|
14546
14553
|
return /* @__PURE__ */ (0, import_jsx_runtime278.jsx)(ClickRegion, { targetRef: triggerButtonRef, children: /* @__PURE__ */ (0, import_jsx_runtime278.jsxs)(
|
|
14547
14554
|
StyledEditableTextDisplay,
|
|
14548
14555
|
{
|