@wistia/ui 0.14.20 → 0.14.21-beta.34df95e5.9f33fdd

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.20
+ * @license @wistia/ui v0.14.21-beta.34df95e5.9f33fdd
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -82,6 +82,15 @@ __export(index_exports, {
   DataListItemValue: () => DataListItemValue,
   Divider: () => Divider,
   EditableHeading: () => EditableHeading,
+  EditableText: () => EditableText,
+  EditableTextCancelButton: () => EditableTextCancelButton,
+  EditableTextContext: () => EditableTextContext,
+  EditableTextDisplay: () => EditableTextDisplay,
+  EditableTextInput: () => EditableTextInput,
+  EditableTextLabel: () => EditableTextLabel,
+  EditableTextRoot: () => EditableTextRoot,
+  EditableTextSubmitButton: () => EditableTextSubmitButton,
+  EditableTextTrigger: () => EditableTextTrigger,
   Ellipsis: () => Ellipsis,
   FileAmountLimitValidator: () => import_validators.FileAmountLimitValidator,
   FileSizeValidator: () => import_validators.FileSizeValidator,
@@ -11334,6 +11343,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)(
@@ -16389,9 +16399,14 @@ var getFramePosition = (frameIndex, framesPerRow, width, height, scaleFactor, fr
   const row = Math.floor(frameIndex / framesPerRow);
   const imageX = -width * col * scaleFactor;
   const imageY = -height * row * scaleFactor;
-  const rows = Math.ceil(frameCount / framesPerRow);
-  const frameHeightInStoryboard = height / rows;
-  const verticalCenterOffset = (targetHeight - frameHeightInStoryboard) / 2;
+  let verticalCenterOffset = 0;
+  if (height > width) {
+    const rows = Math.ceil(frameCount / framesPerRow);
+    const frameHeightInStoryboard = height / rows;
+    verticalCenterOffset = Math.max(0, (targetHeight - frameHeightInStoryboard) / 2);
+  } else {
+    verticalCenterOffset = 0;
+  }
   const adjustedY = imageY - verticalCenterOffset;
   return `${imageX}px ${adjustedY}px`;
 };
@@ -17006,10 +17021,474 @@ var ContextMenu = ({
   ) : null;
 };
 
-// src/components/DataList/DataList.tsx
+// src/components/EditableText/EditableTextDisplay.tsx
+var import_react92 = require("react");
+var import_styled_components123 = __toESM(require("styled-components"));
+var import_type_guards73 = require("@wistia/type-guards");
+
+// 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 StyledDataList = import_styled_components121.default.dl`
+var StyledEditableTextRoot = import_styled_components121.default.div`
+  display: contents;
+
+  --wui-editable-text-padding: var(--wui-space-01);
+  --wui-editable-text-border-radius: var(--wui-border-radius-01);
+`;
+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,
+  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-testid": "editable-text-root",
+      "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-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 ((0, import_type_guards73.isNotNil)($maxLines)) {
+    return import_styled_components123.css`
+        ${ellipsisStyle};
+        ${lineClampCss($maxLines)};
+      `;
+  }
+  return void 0;
+}}
+  ${({ $minLines }) => (0, import_type_guards73.isNotNil)($minLines) && import_styled_components123.css`
+      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 = (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, maxLines, isEditing, minLines } = 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 (isEditing) {
+      return null;
+    }
+    if (asTrigger && !context.readOnly) {
+      return /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(ClickRegion, { targetRef: triggerButtonRef, children: /* @__PURE__ */ (0, import_jsx_runtime318.jsxs)(
+        StyledEditableTextDisplay,
+        {
+          ref,
+          $maxLines: maxLines,
+          $minLines: minLines,
+          $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,
+        $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
+var import_react93 = require("react");
+var import_styled_components124 = __toESM(require("styled-components"));
+var import_type_guards74 = require("@wistia/type-guards");
+var import_jsx_runtime319 = require("react/jsx-runtime");
+var StyledInput2 = (0, import_styled_components124.default)(Input)`
+  && {
+    ${({ $minLines }) => (0, import_type_guards74.isNotNil)($minLines) && `min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
+    ${({ $maxLines }) => (0, import_type_guards74.isNotNil)($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 = (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);
+    }
+  };
+  if (!isEditing) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
+    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
+var import_react94 = require("react");
+var import_jsx_runtime320 = require("react/jsx-runtime");
+var EditableTextLabel = ({ ...props }) => {
+  const context = (0, import_react94.useContext)(EditableTextContext);
+  if (!context) {
+    throw new Error("EditableTextLabel must be used within an EditableTextRoot context");
+  }
+  const { id, label } = context;
+  return /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
+    Label,
+    {
+      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 = ({
+  /**
+   * A submit button, typically a [Button]() that will commit the value when clicked.
+   */
+  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, isEditing } = 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
+  };
+  if (!isEditing) return null;
+  return (0, import_react95.cloneElement)(onlyChild, triggerProps);
+};
+
+// src/components/EditableText/EditableTextCancelButton.tsx
+var import_react96 = require("react");
+var EditableTextCancelButton = ({
+  children
+}) => {
+  const context = (0, import_react96.useContext)(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 = import_react96.Children.only(children);
+  const triggerProps = {
+    onClick: handleClick,
+    "data-wui-editable-text-cancel": true
+  };
+  if (!isEditing) return null;
+  return (0, import_react96.cloneElement)(onlyChild, triggerProps);
+};
+
+// src/components/EditableText/EditableTextTrigger.tsx
+var import_react97 = require("react");
+var EditableTextTrigger = ({
+  children,
+  ...props
+}) => {
+  const context = (0, import_react97.useContext)(EditableTextContext);
+  if (!context) {
+    throw new Error("EditableTextTrigger must be used within an EditableTextRoot context");
+  }
+  const { setIsEditing, isEditing } = context;
+  const handleClick = () => {
+    setIsEditing(true);
+  };
+  const onlyChild = import_react97.Children.only(children);
+  const triggerProps = {
+    onClick: handleClick,
+    "data-wui-editable-text-trigger": true,
+    ...props
+  };
+  if (isEditing) return null;
+  return (0, import_react97.cloneElement)(onlyChild, triggerProps);
+};
+
+// src/components/DataList/DataList.tsx
+var import_styled_components125 = __toESM(require("styled-components"));
+var import_jsx_runtime322 = require("react/jsx-runtime");
+var StyledDataList = import_styled_components125.default.dl`
   display: grid;
   grid-template-columns: auto 1fr;
   column-gap: var(--wui-space-02);
@@ -17037,7 +17516,7 @@ var DataList = ({
   labelProminence = "primary",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime317.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
     StyledDataList,
     {
       role: "list",
@@ -17060,9 +17539,9 @@ var DataListItem = ({ children }) => {
 DataListItem.displayName = "DataListItem_UI";
 
 // src/components/DataList/DataListItemLabel.tsx
-var import_jsx_runtime318 = require("react/jsx-runtime");
+var import_jsx_runtime323 = require("react/jsx-runtime");
 var DataListItemLabel = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime318.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime323.jsx)(
     Text,
     {
       variant: "label4",
@@ -17074,9 +17553,9 @@ var DataListItemLabel = (props) => {
 DataListItemLabel.displayName = "DataListItemLabel_UI";
 
 // src/components/DataList/DataListItemValue.tsx
-var import_jsx_runtime319 = require("react/jsx-runtime");
+var import_jsx_runtime324 = require("react/jsx-runtime");
 var DataListItemValue = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime324.jsx)(
     Text,
     {
       variant: "body3",
@@ -17131,6 +17610,15 @@ DataListItemValue.displayName = "DataListItemValue_UI";
   DataListItemValue,
   Divider,
   EditableHeading,
+  EditableText,
+  EditableTextCancelButton,
+  EditableTextContext,
+  EditableTextDisplay,
+  EditableTextInput,
+  EditableTextLabel,
+  EditableTextRoot,
+  EditableTextSubmitButton,
+  EditableTextTrigger,
   Ellipsis,
   FileAmountLimitValidator,
   FileSizeValidator,