@wistia/ui 0.14.20 → 0.14.21

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.20
+ * @license @wistia/ui v0.14.21
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -11175,6 +11175,7 @@ var Input = forwardRef15(
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
+        "data-wui-input-container": true,
         children: [
           leftIconToDisplay ?? null,
           type === "multiline" ? /* @__PURE__ */ jsx247(
@@ -16891,10 +16892,480 @@ var ContextMenu = ({
   ) : null;
 };
 
-// src/components/DataList/DataList.tsx
+// src/components/EditableText/EditableTextDisplay.tsx
+import { useContext as useContext13, useRef as useRef22, forwardRef as forwardRef36 } from "react";
+import styled104, { css as css48 } from "styled-components";
+import { isNotNil as isNotNil43 } from "@wistia/type-guards";
+
+// src/components/EditableText/EditableTextRoot.tsx
+import {
+  createContext as createContext12,
+  useMemo as useMemo16,
+  useState as useState25,
+  useCallback as useCallback19,
+  useId as useId6
+} from "react";
+import { isNonEmptyString as isNonEmptyString9 } from "@wistia/type-guards";
 import styled103 from "styled-components";
 import { jsx as jsx315 } from "react/jsx-runtime";
-var StyledDataList = styled103.dl`
+var StyledEditableTextRoot = styled103.div`
+  display: contents;
+
+  --wui-editable-text-padding: var(--wui-space-01);
+  --wui-editable-text-border-radius: var(--wui-border-radius-01);
+`;
+var EditableTextContext = createContext12(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,
+  finalFocusEl,
+  ...props
+}) => {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState25(defaultValue);
+  const [originalValue, setOriginalValue] = useState25(defaultValue);
+  const [isEditing, setIsEditing] = useState25(false);
+  const value = isControlled ? controlledValue : internalValue;
+  const generatedId = useId6();
+  const computedId = isNonEmptyString9(id) ? id : `wistia-ui-editable-text-${generatedId}`;
+  const handleSetIsEditing = useCallback19(
+    (editing) => {
+      if (editing && !isEditing) {
+        setOriginalValue(value);
+      }
+      setIsEditing(editing);
+      onEditingChange?.(editing);
+    },
+    [isEditing, value, onEditingChange]
+  );
+  const setValue = useCallback19(
+    (newValue) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [isControlled, onValueChange]
+  );
+  const context = useMemo16(() => {
+    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__ */ jsx315(
+    StyledEditableTextRoot,
+    {
+      "data-testid": "editable-text-root",
+      "data-wui-editable-text-root": true,
+      "data-wui-editable-text-state": getState(),
+      ...props,
+      children: /* @__PURE__ */ jsx315(EditableTextContext.Provider, { value: context, children })
+    }
+  );
+};
+
+// src/private/helpers/getTypographicStyles/getTypographicStyles.ts
+import { css as css47 } from "styled-components";
+var typographicVariantStyleMap = { ...variantStyleMap2, ...variantStyleMap };
+var getTypographicStyles = (variant) => {
+  return css47`
+    ${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
+import { jsx as jsx316, jsxs as jsxs67 } from "react/jsx-runtime";
+var StyledEditableTextDisplay = styled104.div`
+  ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
+  padding: var(--wui-editable-text-padding);
+  border-radius: var(--wui-editable-text-border-radius);
+  margin: 0;
+  transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
+  ${({ $maxLines }) => {
+  if (isNotNil43($maxLines)) {
+    return css48`
+        ${ellipsisStyle};
+        ${lineClampCss($maxLines)};
+      `;
+  }
+  return void 0;
+}}
+  ${({ $minLines }) => isNotNil43($minLines) && css48`
+      min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));
+    `}
+  word-break: break-word;
+
+  &[data-wui-editable-text-display='placeholder'] {
+    color: var(--wui-color-text-secondary);
+  }
+
+  &:has(button) {
+    user-select: none;
+    cursor: pointer;
+
+    &:hover,
+    &:focus-within {
+      background-color: var(--wui-color-bg-surface-hover);
+    }
+  }
+`;
+var EditableTextDisplayComponent = forwardRef36(
+  ({ asTrigger, renderAs, ...props }, ref) => {
+    const context = useContext13(EditableTextContext);
+    if (!context) {
+      throw new Error("EditableTextDisplay must be used within an EditableTextRoot context");
+    }
+    const { value, typographicVariant, setIsEditing, placeholder, maxLines, isEditing, minLines } = context;
+    const triggerButtonRef = useRef22(null);
+    const handleTriggerClick = () => {
+      setIsEditing(true);
+    };
+    const elementType = renderAs ?? getDefaultTypographicElement(typographicVariant);
+    const displayText = value.length > 0 ? value : placeholder;
+    const isPlaceholderVisible = value.length === 0 && !!placeholder;
+    if (isEditing) {
+      return null;
+    }
+    if (asTrigger && !context.readOnly) {
+      return /* @__PURE__ */ jsx316(ClickRegion, { targetRef: triggerButtonRef, children: /* @__PURE__ */ jsxs67(
+        StyledEditableTextDisplay,
+        {
+          ref,
+          $maxLines: maxLines,
+          $minLines: minLines,
+          $typographicVariant: typographicVariant,
+          as: elementType,
+          "data-wui-editable-text-display": isPlaceholderVisible ? "placeholder" : "value",
+          ...props,
+          children: [
+            displayText,
+            /* @__PURE__ */ jsx316(
+              "button",
+              {
+                ref: triggerButtonRef,
+                onClick: handleTriggerClick,
+                style: { ...visuallyHiddenStyle },
+                type: "button",
+                children: "Edit text"
+              }
+            )
+          ]
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx316(
+      StyledEditableTextDisplay,
+      {
+        ref,
+        $maxLines: maxLines,
+        $minLines: minLines,
+        $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
+import { useContext as useContext14, useEffect as useEffect21, useRef as useRef23 } from "react";
+import styled105 from "styled-components";
+import { isNotNil as isNotNil44 } from "@wistia/type-guards";
+import { jsx as jsx317 } from "react/jsx-runtime";
+var StyledInput2 = styled105(Input)`
+  && {
+    ${({ $minLines }) => isNotNil44($minLines) && `min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
+    ${({ $maxLines }) => isNotNil44($maxLines) && `max-height: calc(${$maxLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
+    ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
+    padding: var(--wui-editable-text-padding);
+    border-radius: var(--wui-editable-text-border-radius);
+    background-color: var(--wui-color-bg-surface);
+  }
+`;
+var EditableTextInput = (props) => {
+  const context = useContext14(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 = useRef23(null);
+  useEffect21(() => {
+    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);
+    }
+  };
+  if (!isEditing) return null;
+  return /* @__PURE__ */ jsx317(
+    StyledInput2,
+    {
+      ref: inputRef,
+      $maxLines: maxLines ?? "infinity",
+      $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
+import { useContext as useContext15 } from "react";
+import { jsx as jsx318 } from "react/jsx-runtime";
+var EditableTextLabel = ({ ...props }) => {
+  const context = useContext15(EditableTextContext);
+  if (!context) {
+    throw new Error("EditableTextLabel must be used within an EditableTextRoot context");
+  }
+  const { id, label } = context;
+  return /* @__PURE__ */ jsx318(
+    Label,
+    {
+      htmlFor: id,
+      ...props,
+      children: label
+    }
+  );
+};
+
+// src/components/EditableText/EditableText.tsx
+import { jsx as jsx319, jsxs as jsxs68 } from "react/jsx-runtime";
+var EditableText = ({ hideLabel = true, ...props }) => /* @__PURE__ */ jsxs68(EditableTextRoot, { ...props, children: [
+  /* @__PURE__ */ jsx319(EditableTextLabel, { screenReaderOnly: hideLabel }),
+  /* @__PURE__ */ jsx319(EditableTextInput, {}),
+  /* @__PURE__ */ jsx319(EditableTextDisplay, { asTrigger: true })
+] });
+EditableText.displayName = "EditableText_UI";
+
+// src/components/EditableText/EditableTextSubmitButton.tsx
+import { useContext as useContext16, Children as Children8, cloneElement as cloneElement6 } from "react";
+var EditableTextSubmitButton = ({
+  /**
+   * A submit button, typically a [Button]() that will commit the value when clicked.
+   */
+  children
+}) => {
+  const context = useContext16(EditableTextContext);
+  if (!context) {
+    throw new Error("EditableTextSubmitButton must be used within an EditableTextRoot context");
+  }
+  const { setIsEditing, value, onValueCommit, finalFocusEl, isEditing } = context;
+  const handleClick = () => {
+    onValueCommit?.(value);
+    setIsEditing(false);
+    setTimeout(() => {
+      const element = finalFocusEl?.();
+      if (element) {
+        element.focus();
+      }
+    }, 0);
+  };
+  const onlyChild = Children8.only(children);
+  const triggerProps = {
+    onClick: handleClick,
+    "data-wui-editable-text-submit": true
+  };
+  if (!isEditing) return null;
+  return cloneElement6(onlyChild, triggerProps);
+};
+
+// src/components/EditableText/EditableTextCancelButton.tsx
+import { useContext as useContext17, Children as Children9, cloneElement as cloneElement7 } from "react";
+var EditableTextCancelButton = ({
+  children
+}) => {
+  const context = useContext17(EditableTextContext);
+  if (!context) {
+    throw new Error("EditableTextCancelButton must be used within an EditableTextRoot context");
+  }
+  const { setIsEditing, originalValue, setValue, onValueRevert, finalFocusEl, isEditing } = context;
+  const handleClick = () => {
+    setValue(originalValue);
+    onValueRevert?.(originalValue);
+    setIsEditing(false);
+    setTimeout(() => {
+      const element = finalFocusEl?.();
+      if (element) {
+        element.focus();
+      }
+    }, 0);
+  };
+  const onlyChild = Children9.only(children);
+  const triggerProps = {
+    onClick: handleClick,
+    "data-wui-editable-text-cancel": true
+  };
+  if (!isEditing) return null;
+  return cloneElement7(onlyChild, triggerProps);
+};
+
+// src/components/EditableText/EditableTextTrigger.tsx
+import { useContext as useContext18, Children as Children10, cloneElement as cloneElement8 } from "react";
+var EditableTextTrigger = ({
+  children,
+  ...props
+}) => {
+  const context = useContext18(EditableTextContext);
+  if (!context) {
+    throw new Error("EditableTextTrigger must be used within an EditableTextRoot context");
+  }
+  const { setIsEditing, isEditing } = context;
+  const handleClick = () => {
+    setIsEditing(true);
+  };
+  const onlyChild = Children10.only(children);
+  const triggerProps = {
+    onClick: handleClick,
+    "data-wui-editable-text-trigger": true,
+    ...props
+  };
+  if (isEditing) return null;
+  return cloneElement8(onlyChild, triggerProps);
+};
+
+// src/components/DataList/DataList.tsx
+import styled106 from "styled-components";
+import { jsx as jsx320 } from "react/jsx-runtime";
+var StyledDataList = styled106.dl`
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: var(--wui-space-02);
@@ -16922,7 +17393,7 @@ var DataList = ({
   labelProminence = "primary",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx315(
+  return /* @__PURE__ */ jsx320(
     StyledDataList,
     {
       role: "list",
@@ -16945,9 +17416,9 @@ var DataListItem = ({ children }) => {
 DataListItem.displayName = "DataListItem_UI";
 
 // src/components/DataList/DataListItemLabel.tsx
-import { jsx as jsx316 } from "react/jsx-runtime";
+import { jsx as jsx321 } from "react/jsx-runtime";
 var DataListItemLabel = (props) => {
-  return /* @__PURE__ */ jsx316(
+  return /* @__PURE__ */ jsx321(
     Text,
     {
       variant: "label4",
@@ -16959,9 +17430,9 @@ var DataListItemLabel = (props) => {
 DataListItemLabel.displayName = "DataListItemLabel_UI";
 
 // src/components/DataList/DataListItemValue.tsx
-import { jsx as jsx317 } from "react/jsx-runtime";
+import { jsx as jsx322 } from "react/jsx-runtime";
 var DataListItemValue = (props) => {
-  return /* @__PURE__ */ jsx317(
+  return /* @__PURE__ */ jsx322(
     Text,
     {
       variant: "body3",
@@ -17015,6 +17486,15 @@ export {
   DataListItemValue,
   Divider,
   EditableHeading,
+  EditableText,
+  EditableTextCancelButton,
+  EditableTextContext,
+  EditableTextDisplay,
+  EditableTextInput,
+  EditableTextLabel,
+  EditableTextRoot,
+  EditableTextSubmitButton,
+  EditableTextTrigger,
   Ellipsis,
   FileAmountLimitValidator,
   FileSizeValidator,