@wistia/ui 0.18.0-beta.6d32b1a6.7a80f3d → 0.18.0-beta.978703a9.78cdfd1

package/dist/index.d.mts

@@ -430,7 +430,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & Om
 
 type ToastProps = ComponentPropsWithoutRef<'div'> & {
     /**
-     * Action can be undefined (default dismiss button), a Button component or false to hide the dismiss button
+     * Action can be passed a Button component for a custom button to be displayed in the toast
      */
     action?: React.ReactElement<typeof Button> | undefined;
     /**
@@ -445,10 +445,15 @@ type ToastProps = ComponentPropsWithoutRef<'div'> & {
      * The message displayed in the toast
      */
     message: ReactNode;
+    /**
+     * @ignore
+     * The ID given for the Toast by sonner
+     */
+    toastId?: string;
 };
 
 type Position = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';
-type UseToastProps = ToastProps & {
+type UseToastProps = Omit<ToastProps, 'toastId'> & {
     position?: Position;
     duration?: number;
 };
@@ -2078,11 +2083,6 @@ type EditableTextRootProps = Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue
      * Whether the editable text is read only. If true, the editable text will not be editable and the trigger will not be shown.
      */
     readOnly?: boolean;
-    /**
-     * When true, prevents the text from entering edit mode
-     * @default false
-     */
-    disabled?: boolean;
     /**
      * The id of the editable text.
      */
@@ -2119,7 +2119,6 @@ type EditableTextContextValues = {
     typographicVariant: TypographicVariant;
     submitMode: 'blur' | 'both' | 'enter' | 'none';
     readOnly: boolean;
-    disabled: boolean;
     id: string;
     label: string;
     placeholder: string;
@@ -2128,7 +2127,7 @@ type EditableTextContextValues = {
     finalFocusEl: (() => HTMLElement | null) | undefined;
 };
 declare const EditableTextContext: react.Context<EditableTextContextValues | null>;
-declare const EditableTextRoot: ({ children, defaultValue, value: controlledValue, onValueChange, onValueCommit, onValueRevert, onEditingChange, typographicVariant, submitMode, readOnly, disabled, id, label, placeholder, minLines, maxLines, finalFocusEl, ...props }: EditableTextRootProps) => JSX$1.Element;
+declare const EditableTextRoot: ({ children, defaultValue, value: controlledValue, onValueChange, onValueCommit, onValueRevert, onEditingChange, typographicVariant, submitMode, readOnly, id, label, placeholder, minLines, maxLines, finalFocusEl, ...props }: EditableTextRootProps) => JSX$1.Element;
 
 type EditableTextProps = Omit<EditableTextRootProps, 'children'> & {
     /**

package/dist/index.d.ts

@@ -430,7 +430,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & Om
 
 type ToastProps = ComponentPropsWithoutRef<'div'> & {
     /**
-     * Action can be undefined (default dismiss button), a Button component or false to hide the dismiss button
+     * Action can be passed a Button component for a custom button to be displayed in the toast
      */
     action?: React.ReactElement<typeof Button> | undefined;
     /**
@@ -445,10 +445,15 @@ type ToastProps = ComponentPropsWithoutRef<'div'> & {
      * The message displayed in the toast
      */
     message: ReactNode;
+    /**
+     * @ignore
+     * The ID given for the Toast by sonner
+     */
+    toastId?: string;
 };
 
 type Position = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';
-type UseToastProps = ToastProps & {
+type UseToastProps = Omit<ToastProps, 'toastId'> & {
     position?: Position;
     duration?: number;
 };
@@ -2078,11 +2083,6 @@ type EditableTextRootProps = Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue
      * Whether the editable text is read only. If true, the editable text will not be editable and the trigger will not be shown.
      */
     readOnly?: boolean;
-    /**
-     * When true, prevents the text from entering edit mode
-     * @default false
-     */
-    disabled?: boolean;
     /**
      * The id of the editable text.
      */
@@ -2119,7 +2119,6 @@ type EditableTextContextValues = {
     typographicVariant: TypographicVariant;
     submitMode: 'blur' | 'both' | 'enter' | 'none';
     readOnly: boolean;
-    disabled: boolean;
     id: string;
     label: string;
     placeholder: string;
@@ -2128,7 +2127,7 @@ type EditableTextContextValues = {
     finalFocusEl: (() => HTMLElement | null) | undefined;
 };
 declare const EditableTextContext: react.Context<EditableTextContextValues | null>;
-declare const EditableTextRoot: ({ children, defaultValue, value: controlledValue, onValueChange, onValueCommit, onValueRevert, onEditingChange, typographicVariant, submitMode, readOnly, disabled, id, label, placeholder, minLines, maxLines, finalFocusEl, ...props }: EditableTextRootProps) => JSX$1.Element;
+declare const EditableTextRoot: ({ children, defaultValue, value: controlledValue, onValueChange, onValueCommit, onValueRevert, onEditingChange, typographicVariant, submitMode, readOnly, id, label, placeholder, minLines, maxLines, finalFocusEl, ...props }: EditableTextRootProps) => JSX$1.Element;
 
 type EditableTextProps = Omit<EditableTextRootProps, 'children'> & {
     /**

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.0-beta.6d32b1a6.7a80f3d
+ * @license @wistia/ui v0.18.0-beta.978703a9.78cdfd1
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -3190,7 +3190,7 @@ var StyledToast = styled2.div`
   justify-content: space-between;
   min-height: 56px;
   width: 356px;
-  border-radius: var(--wui-border-radius-01);
+  border-radius: var(--wui-border-radius-02);
   background-color: var(--wui-color-bg-surface);
   border: 1px solid var(--wui-color-border);
   color: var(--wui-color-text);
@@ -3206,13 +3206,28 @@ var StyledToast = styled2.div`
     flex: 0 0 16px;
   }
 `;
-var Action = ({ actionButton }) => {
+var Action = ({
+  actionButton,
+  toastId
+}) => {
   if (isNotNil4(actionButton) && isValidElement(actionButton)) {
+    const { onClick, ...restProps } = actionButton.props;
+    const handleClick = (event) => {
+      if (onClick) {
+        onClick(
+          event,
+          toastId ?? ""
+        );
+      }
+    };
     return /* @__PURE__ */ jsx5(ActionWrapper, { children: cloneElement(actionButton, {
+      ...restProps,
       variant: "soft",
       // force Button variant
-      size: "sm"
+      size: "sm",
       // force Button size
+      onClick: handleClick
+      // decorate onClick function with new args
     }) });
   }
   return null;
@@ -3222,6 +3237,7 @@ var Toast = ({
   message,
   colorScheme = "inherit",
   icon,
+  toastId,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs2(
@@ -3234,7 +3250,13 @@ var Toast = ({
           isNotNil4(icon) ? icon : null,
           /* @__PURE__ */ jsx5(Message, { lines: 3, children: message })
         ] }),
-        /* @__PURE__ */ jsx5(Action, { actionButton: action })
+        /* @__PURE__ */ jsx5(
+          Action,
+          {
+            actionButton: action,
+            toastId
+          }
+        )
       ]
     }
   );
@@ -3247,14 +3269,15 @@ var useToast = () => {
   return useCallback7(
     ({ message, action, colorScheme, icon, position = "bottom-left", duration = 3e3 }) => {
       sonnerToast.custom(
-        () => {
+        (toastId) => {
           return /* @__PURE__ */ jsx6(
             Toast,
             {
               action,
               colorScheme,
               icon,
-              message
+              message,
+              toastId: String(toastId)
             }
           );
         },
@@ -14230,7 +14253,6 @@ var EditableTextRoot = ({
   typographicVariant = "body2",
   submitMode = "both",
   readOnly = false,
-  disabled = false,
   id,
   label,
   placeholder = "Click to edit this text",
@@ -14248,14 +14270,13 @@ var EditableTextRoot = ({
   const computedId = isNonEmptyString6(id) ? id : `wistia-ui-editable-text-${generatedId}`;
   const handleSetIsEditing = useCallback16(
     (editing) => {
-      if (disabled) return;
       if (editing && !isEditing) {
         setOriginalValue(value);
       }
       setIsEditing(editing);
       onEditingChange?.(editing);
     },
-    [disabled, isEditing, value, onEditingChange]
+    [isEditing, value, onEditingChange]
   );
   const setValue = useCallback16(
     (newValue) => {
@@ -14278,7 +14299,6 @@ var EditableTextRoot = ({
       typographicVariant,
       submitMode,
       readOnly,
-      disabled,
       id: computedId,
       label,
       placeholder,
@@ -14297,7 +14317,6 @@ var EditableTextRoot = ({
     typographicVariant,
     submitMode,
     readOnly,
-    disabled,
     computedId,
     label,
     placeholder,
@@ -14309,9 +14328,6 @@ var EditableTextRoot = ({
     if (readOnly) {
       return "read-only";
     }
-    if (disabled) {
-      return "disabled";
-    }
     if (isEditing) {
       return "editing";
     }
@@ -14372,16 +14388,7 @@ var EditableTextDisplayComponent = forwardRef21(
     if (!context) {
       throw new Error("EditableTextDisplay must be used within an EditableTextRoot context");
     }
-    const {
-      value,
-      typographicVariant,
-      setIsEditing,
-      placeholder,
-      maxLines,
-      isEditing,
-      minLines,
-      disabled
-    } = context;
+    const { value, typographicVariant, setIsEditing, placeholder, maxLines, isEditing, minLines } = context;
     const triggerButtonRef = useRef17(null);
     const handleTriggerClick = () => {
       setIsEditing(true);
@@ -14392,7 +14399,7 @@ var EditableTextDisplayComponent = forwardRef21(
     if (isEditing) {
       return null;
     }
-    if (asTrigger && !context.readOnly && !disabled) {
+    if (asTrigger && !context.readOnly) {
       return /* @__PURE__ */ jsx278(ClickRegion, { targetRef: triggerButtonRef, children: /* @__PURE__ */ jsxs43(
         StyledEditableTextDisplay,
         {