@wistia/ui 0.14.11-beta.89cbbae6.bd1ca73 → 0.14.11-beta.fce4d3c2.c4d0643

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.11-beta.89cbbae6.bd1ca73
+ * @license @wistia/ui v0.14.11-beta.fce4d3c2.c4d0643
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -78,14 +78,6 @@ __export(index_exports, {
   DataCards: () => DataCards,
   Divider: () => Divider,
   EditableHeading: () => EditableHeading,
-  EditableText: () => EditableText,
-  EditableTextContext: () => EditableTextContext,
-  EditableTextDisplay: () => EditableTextDisplay,
-  EditableTextInput: () => EditableTextInput,
-  EditableTextLabel: () => EditableTextLabel,
-  EditableTextRoot: () => EditableTextRoot,
-  EditableTextSubmitButton: () => EditableTextSubmitButton,
-  EditableTextTrigger: () => EditableTextTrigger,
   Ellipsis: () => Ellipsis,
   FileAmountLimitValidator: () => import_validators.FileAmountLimitValidator,
   FileSizeValidator: () => import_validators.FileSizeValidator,
@@ -11346,7 +11338,6 @@ var Input = (0, import_react47.forwardRef)(
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
-        "data-wui-input-container": true,
         children: [
           leftIconToDisplay ?? null,
           type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
@@ -14954,7 +14945,7 @@ var Radio = (0, import_react72.forwardRef)(
     const contextValue = radioGroupContext?.value;
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
-    const defaultChecked = (0, import_type_guards53.isNotUndefined)(value) && (0, import_type_guards53.isNotUndefined)(contextValue) ? contextValue.includes(value) : void 0;
+    const isChecked = (0, import_type_guards53.isNotUndefined)(value) && (0, import_type_guards53.isNotUndefined)(contextValue) ? contextValue.includes(value) : checked;
     return /* @__PURE__ */ (0, import_jsx_runtime286.jsxs)(
       StyledRadioWrapper,
       {
@@ -14973,7 +14964,7 @@ var Radio = (0, import_react72.forwardRef)(
               required,
               type: "radio",
               value,
-              ...(0, import_type_guards53.isNotUndefined)(defaultChecked) ? { defaultChecked } : { checked }
+              checked: isChecked
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime286.jsx)(
@@ -15137,7 +15128,7 @@ var RadioCardRoot = (0, import_react73.forwardRef)(
     const contextValue = radioGroupContext?.value;
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
-    const defaultChecked = (0, import_type_guards54.isNotUndefined)(value) && (0, import_type_guards54.isNotUndefined)(contextValue) ? contextValue.includes(value) : void 0;
+    const isChecked = (0, import_type_guards54.isNotUndefined)(value) && (0, import_type_guards54.isNotUndefined)(contextValue) ? contextValue.includes(value) : checked;
     return /* @__PURE__ */ (0, import_jsx_runtime287.jsxs)(
       StyledCard2,
       {
@@ -15150,13 +15141,13 @@ var RadioCardRoot = (0, import_react73.forwardRef)(
             {
               ...props,
               ref,
+              checked: isChecked,
               disabled,
               id: computedId,
               name: radioName,
               onChange: handleOnChange,
               type: "radio",
-              value,
-              ...(0, import_type_guards54.isNotUndefined)(defaultChecked) ? { defaultChecked } : { checked }
+              value
             }
           ),
           children
@@ -17026,443 +17017,6 @@ var ContextMenu = ({
     }
   ) : null;
 };
-
-// src/components/EditableText/EditableTextDisplay.tsx
-var import_react92 = require("react");
-var import_styled_components123 = __toESM(require("styled-components"));
-
-// src/components/EditableText/EditableTextRoot.tsx
-var import_react91 = require("react");
-var import_type_guards72 = require("@wistia/type-guards");
-var import_styled_components121 = __toESM(require("styled-components"));
-var import_jsx_runtime317 = require("react/jsx-runtime");
-var StyledEditableTextRoot = import_styled_components121.default.div`
-  display: contents;
-
-  /* Hide display components when editing */
-  &[data-wui-editable-text-state='editing'] [data-wui-editable-text-display] {
-    display: none;
-  }
-
-  /* Hide input when not editing */
-
-  /* This is super hacky, not sure how to do this better */
-  &[data-wui-editable-text-state='idle'] [data-wui-input-container],
-  &[data-wui-editable-text-state='read-only'] [data-wui-input-container] {
-    display: none;
-  }
-
-  /* Hide trigger when editing or read-only */
-  &[data-wui-editable-text-state='editing'] [data-wui-editable-text-trigger],
-  &[data-wui-editable-text-state='read-only'] [data-wui-editable-text-trigger] {
-    display: none;
-  }
-
-  /* Hide submit button when not editing */
-  &[data-wui-editable-text-state='idle'] [data-wui-editable-text-submit],
-  &[data-wui-editable-text-state='read-only'] [data-wui-editable-text-submit] {
-    display: none;
-  }
-
-  /* Hide cancel button when not editing */
-  &[data-wui-editable-text-state='idle'] [data-wui-editable-text-cancel],
-  &[data-wui-editable-text-state='read-only'] [data-wui-editable-text-cancel] {
-    display: none;
-  }
-
-  [data-wui-editable-text-display='placeholder'] {
-    color: var(--wui-color-text-secondary);
-  }
-`;
-var EditableTextContext = (0, import_react91.createContext)(null);
-var EditableTextRoot = ({
-  children,
-  defaultValue = "",
-  value: controlledValue,
-  onValueChange,
-  onValueCommit,
-  onValueRevert,
-  onEditingChange,
-  typographicVariant = "body2",
-  submitMode = "both",
-  readOnly = false,
-  id,
-  label,
-  placeholder = "Click to edit this text",
-  minLines = 1,
-  maxLines = "infinity",
-  finalFocusEl,
-  ...props
-}) => {
-  const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = (0, import_react91.useState)(defaultValue);
-  const [originalValue, setOriginalValue] = (0, import_react91.useState)(defaultValue);
-  const [isEditing, setIsEditing] = (0, import_react91.useState)(false);
-  const value = isControlled ? controlledValue : internalValue;
-  const generatedId = (0, import_react91.useId)();
-  const computedId = (0, import_type_guards72.isNonEmptyString)(id) ? id : `wistia-ui-editable-text-${generatedId}`;
-  const handleSetIsEditing = (0, import_react91.useCallback)(
-    (editing) => {
-      if (editing && !isEditing) {
-        setOriginalValue(value);
-      }
-      setIsEditing(editing);
-      onEditingChange?.(editing);
-    },
-    [isEditing, value, onEditingChange]
-  );
-  const setValue = (0, import_react91.useCallback)(
-    (newValue) => {
-      if (!isControlled) {
-        setInternalValue(newValue);
-      }
-      onValueChange?.(newValue);
-    },
-    [isControlled, onValueChange]
-  );
-  const context = (0, import_react91.useMemo)(() => {
-    return {
-      isEditing,
-      setIsEditing: handleSetIsEditing,
-      value,
-      setValue,
-      originalValue,
-      onValueCommit,
-      onValueRevert,
-      typographicVariant,
-      submitMode,
-      readOnly,
-      id: computedId,
-      label,
-      placeholder,
-      minLines,
-      maxLines,
-      finalFocusEl
-    };
-  }, [
-    isEditing,
-    handleSetIsEditing,
-    value,
-    setValue,
-    originalValue,
-    onValueCommit,
-    onValueRevert,
-    typographicVariant,
-    submitMode,
-    readOnly,
-    computedId,
-    label,
-    placeholder,
-    minLines,
-    maxLines,
-    finalFocusEl
-  ]);
-  const getState = () => {
-    if (readOnly) {
-      return "read-only";
-    }
-    if (isEditing) {
-      return "editing";
-    }
-    return "idle";
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
-    StyledEditableTextRoot,
-    {
-      "data-wui-editable-text-root": true,
-      "data-wui-editable-text-state": getState(),
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(EditableTextContext.Provider, { value: context, children })
-    }
-  );
-};
-
-// src/private/helpers/getTypographicStyles/getTypographicStyles.ts
-var import_styled_components122 = require("styled-components");
-var typographicVariantStyleMap = { ...variantStyleMap2, ...variantStyleMap };
-var getTypographicStyles = (variant) => {
-  return import_styled_components122.css`
-    ${typographicVariantStyleMap[variant]}
-    font-family: var(--font-family);
-    font-size: var(--font-size);
-    font-weight: var(--font-weight);
-    line-height: var(--line-height);
-  `;
-};
-var typographicVariantElementMap = { ...variantElementMap2, ...variantElementMap };
-var getDefaultTypographicElement = (variant) => {
-  return typographicVariantElementMap[variant] ?? "span";
-};
-
-// src/components/EditableText/EditableTextDisplay.tsx
-var import_jsx_runtime318 = require("react/jsx-runtime");
-var StyledEditableTextDisplay = import_styled_components123.default.div`
-  ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
-  padding: var(--wui-space-01);
-  border-radius: var(--wui-border-radius-01);
-  margin: 0;
-  transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
-
-  &:has(button) {
-    user-select: none;
-    cursor: pointer;
-
-    &:hover,
-    &:focus-within {
-      background-color: var(--wui-color-bg-surface-hover);
-    }
-  }
-`;
-var EditableTextDisplayComponent = (0, import_react92.forwardRef)(
-  ({ asTrigger, renderAs, ...props }, ref) => {
-    const context = (0, import_react92.useContext)(EditableTextContext);
-    if (!context) {
-      throw new Error("EditableTextDisplay must be used within an EditableTextRoot context");
-    }
-    const { value, typographicVariant, setIsEditing, placeholder } = context;
-    const triggerButtonRef = (0, import_react92.useRef)(null);
-    const handleTriggerClick = () => {
-      setIsEditing(true);
-    };
-    const elementType = renderAs ?? getDefaultTypographicElement(typographicVariant);
-    const displayText = value.length > 0 ? value : placeholder;
-    const isPlaceholderVisible = value.length === 0 && !!placeholder;
-    if (asTrigger && !context.readOnly) {
-      return /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(ClickRegion, { targetRef: triggerButtonRef, children: /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)(
-        StyledEditableTextDisplay,
-        {
-          ref,
-          $typographicVariant: typographicVariant,
-          as: elementType,
-          "data-wui-editable-text-display": isPlaceholderVisible ? "placeholder" : "value",
-          ...props,
-          children: [
-            displayText,
-            /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
-              "button",
-              {
-                ref: triggerButtonRef,
-                onClick: handleTriggerClick,
-                style: { ...visuallyHiddenStyle },
-                type: "button",
-                children: "Edit text"
-              }
-            )
-          ]
-        }
-      ) });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
-      StyledEditableTextDisplay,
-      {
-        ref,
-        $typographicVariant: typographicVariant,
-        as: elementType,
-        "data-placeholder-visible": isPlaceholderVisible || void 0,
-        "data-wui-editable-text-display": true,
-        ...props,
-        children: displayText
-      }
-    );
-  }
-);
-EditableTextDisplayComponent.displayName = "EditableTextDisplay_UI";
-var EditableTextDisplay = makePolymorphic(
-  EditableTextDisplayComponent
-);
-
-// src/components/EditableText/EditableTextInput.tsx
-var import_react93 = require("react");
-var import_styled_components124 = __toESM(require("styled-components"));
-var import_jsx_runtime319 = require("react/jsx-runtime");
-var StyledInput3 = (0, import_styled_components124.default)(Input)`
-  && {
-    --min-lines: ${({ $minLines }) => $minLines};
-    --max-lines: ${({ $maxLines }) => $maxLines};
-
-    min-height: calc(var(--min-lines) * 1lh + calc(var(--wui-space-01) * 2));
-    max-height: calc(var(--max-lines) * 1lh + calc(var(--wui-space-01) * 2));
-    ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
-    padding: var(--wui-space-01);
-    border-radius: var(--wui-border-radius-01);
-    background-color: var(--wui-color-bg-surface);
-  }
-`;
-var EditableTextInput = (props) => {
-  const context = (0, import_react93.useContext)(EditableTextContext);
-  if (!context) {
-    throw new Error("EditableTextInput must be used within an EditableTextRoot context");
-  }
-  const {
-    isEditing,
-    value,
-    setValue,
-    onValueCommit,
-    setIsEditing,
-    typographicVariant,
-    submitMode,
-    originalValue,
-    onValueRevert,
-    id,
-    placeholder,
-    minLines,
-    maxLines,
-    finalFocusEl
-  } = context;
-  const inputRef = (0, import_react93.useRef)(null);
-  (0, import_react93.useEffect)(() => {
-    if (inputRef.current) {
-      if (isEditing) {
-        const element = inputRef.current;
-        const { style } = element;
-        style.height = "0px";
-        const { scrollHeight } = element;
-        style.height = `${scrollHeight}px`;
-      }
-      if (isEditing) {
-        inputRef.current.focus();
-      }
-    }
-  }, [value, isEditing]);
-  const handleChange = (event) => {
-    setValue(event.target.value);
-  };
-  const handleKeyDown = (event) => {
-    if ((submitMode === "enter" || submitMode === "both") && event.key === "Enter" && !event.shiftKey) {
-      event.preventDefault();
-      onValueCommit?.(value);
-      setIsEditing(false);
-      setTimeout(() => {
-        const element = finalFocusEl?.();
-        if (element) {
-          element.focus();
-        }
-      }, 0);
-    }
-    if (event.key === "Escape") {
-      event.preventDefault();
-      setValue(originalValue);
-      onValueRevert?.(originalValue);
-      setIsEditing(false);
-      setTimeout(() => {
-        const element = finalFocusEl?.();
-        if (element) {
-          element.focus();
-        }
-      }, 0);
-    }
-  };
-  const handleBlur2 = () => {
-    if (submitMode === "blur" || submitMode === "both") {
-      onValueCommit?.(value);
-      setIsEditing(false);
-      setTimeout(() => {
-        const element = finalFocusEl?.();
-        if (element) {
-          element.focus();
-        }
-      }, 0);
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
-    StyledInput3,
-    {
-      ref: inputRef,
-      $maxLines: maxLines,
-      $minLines: minLines,
-      $typographicVariant: typographicVariant,
-      "data-wui-editable-text-input": true,
-      id,
-      onBlur: handleBlur2,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      placeholder,
-      type: "multiline",
-      value,
-      ...props
-    }
-  );
-};
-
-// src/components/EditableText/EditableTextLabel.tsx
-var import_react94 = require("react");
-var import_jsx_runtime320 = require("react/jsx-runtime");
-var EditableTextLabel = ({ disabled, ...props }) => {
-  const context = (0, import_react94.useContext)(EditableTextContext);
-  if (!context) {
-    throw new Error("EditableTextLabel must be used within an EditableTextRoot context");
-  }
-  const { id, readOnly, label } = context;
-  return /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
-    Label,
-    {
-      disabled: disabled ?? readOnly,
-      htmlFor: id,
-      ...props,
-      children: label
-    }
-  );
-};
-
-// src/components/EditableText/EditableText.tsx
-var import_jsx_runtime321 = require("react/jsx-runtime");
-var EditableText = ({ hideLabel = true, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime321.jsxs)(EditableTextRoot, { ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(EditableTextLabel, { screenReaderOnly: hideLabel }),
-  /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(EditableTextInput, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime321.jsx)(EditableTextDisplay, { asTrigger: true })
-] });
-EditableText.displayName = "EditableText_UI";
-
-// src/components/EditableText/EditableTextSubmitButton.tsx
-var import_react95 = require("react");
-var EditableTextSubmitButton = ({
-  children
-}) => {
-  const context = (0, import_react95.useContext)(EditableTextContext);
-  if (!context) {
-    throw new Error("EditableTextSubmitButton must be used within an EditableTextRoot context");
-  }
-  const { setIsEditing, value, onValueCommit, finalFocusEl } = context;
-  const handleClick = () => {
-    onValueCommit?.(value);
-    setIsEditing(false);
-    setTimeout(() => {
-      const element = finalFocusEl?.();
-      if (element) {
-        element.focus();
-      }
-    }, 0);
-  };
-  const onlyChild = import_react95.Children.only(children);
-  const triggerProps = {
-    onClick: handleClick,
-    "data-wui-editable-text-submit": true
-  };
-  return (0, import_react95.cloneElement)(onlyChild, triggerProps);
-};
-
-// src/components/EditableText/EditableTextTrigger.tsx
-var import_react96 = require("react");
-var EditableTextTrigger = ({
-  children,
-  ...props
-}) => {
-  const context = (0, import_react96.useContext)(EditableTextContext);
-  if (!context) {
-    throw new Error("EditableTextTrigger must be used within an EditableTextRoot context");
-  }
-  const { setIsEditing } = context;
-  const handleClick = () => {
-    setIsEditing(true);
-  };
-  const onlyChild = import_react96.Children.only(children);
-  const triggerProps = {
-    onClick: handleClick,
-    "data-wui-editable-text-trigger": true,
-    ...props
-  };
-  return (0, import_react96.cloneElement)(onlyChild, triggerProps);
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -17504,14 +17058,6 @@ var EditableTextTrigger = ({
   DataCards,
   Divider,
   EditableHeading,
-  EditableText,
-  EditableTextContext,
-  EditableTextDisplay,
-  EditableTextInput,
-  EditableTextLabel,
-  EditableTextRoot,
-  EditableTextSubmitButton,
-  EditableTextTrigger,
   Ellipsis,
   FileAmountLimitValidator,
   FileSizeValidator,