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

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.10
+ * @license @wistia/ui v0.14.11-beta.89cbbae6.bd1ca73
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -78,6 +78,14 @@ __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,
@@ -11338,6 +11346,7 @@ 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)(
@@ -13690,7 +13699,6 @@ var Menu = (0, import_react64.forwardRef)(
     isOpen,
     triggerProps = {},
     onOpenChange,
-    onInteractOutside,
     ...props
   }, ref) => {
     const contextValue = (0, import_react64.useMemo)(() => ({ compact }), [compact]);
@@ -17018,6 +17026,443 @@ 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,
@@ -17059,6 +17504,14 @@ var ContextMenu = ({
   DataCards,
   Divider,
   EditableHeading,
+  EditableText,
+  EditableTextContext,
+  EditableTextDisplay,
+  EditableTextInput,
+  EditableTextLabel,
+  EditableTextRoot,
+  EditableTextSubmitButton,
+  EditableTextTrigger,
   Ellipsis,
   FileAmountLimitValidator,
   FileSizeValidator,