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

package/dist/index.mjs

@@ -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.
  *
@@ -11183,6 +11183,7 @@ var Input = forwardRef15(
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
+        "data-wui-input-container": true,
         children: [
           leftIconToDisplay ?? null,
           type === "multiline" ? /* @__PURE__ */ jsx247(
@@ -13552,7 +13553,6 @@ var Menu = forwardRef19(
     isOpen,
     triggerProps = {},
     onOpenChange,
-    onInteractOutside,
     ...props
   }, ref) => {
     const contextValue = useMemo13(() => ({ compact }), [compact]);
@@ -16907,6 +16907,449 @@ var ContextMenu = ({
     }
   ) : null;
 };
+
+// src/components/EditableText/EditableTextDisplay.tsx
+import { useContext as useContext13, useRef as useRef22, forwardRef as forwardRef36 } from "react";
+import styled104 from "styled-components";
+
+// 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 StyledEditableTextRoot = styled103.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 = 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 = "infinity",
+  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-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-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 = 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 } = 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 (asTrigger && !context.readOnly) {
+      return /* @__PURE__ */ jsx316(ClickRegion, { targetRef: triggerButtonRef, children: /* @__PURE__ */ jsxs67(
+        StyledEditableTextDisplay,
+        {
+          ref,
+          $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,
+        $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 { jsx as jsx317 } from "react/jsx-runtime";
+var StyledInput3 = styled105(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 = 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);
+    }
+  };
+  return /* @__PURE__ */ jsx317(
+    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
+import { useContext as useContext15 } from "react";
+import { jsx as jsx318 } from "react/jsx-runtime";
+var EditableTextLabel = ({ disabled, ...props }) => {
+  const context = useContext15(EditableTextContext);
+  if (!context) {
+    throw new Error("EditableTextLabel must be used within an EditableTextRoot context");
+  }
+  const { id, readOnly, label } = context;
+  return /* @__PURE__ */ jsx318(
+    Label,
+    {
+      disabled: disabled ?? readOnly,
+      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 = ({
+  children
+}) => {
+  const context = useContext16(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 = Children8.only(children);
+  const triggerProps = {
+    onClick: handleClick,
+    "data-wui-editable-text-submit": true
+  };
+  return cloneElement6(onlyChild, triggerProps);
+};
+
+// src/components/EditableText/EditableTextTrigger.tsx
+import { useContext as useContext17, Children as Children9, cloneElement as cloneElement7 } from "react";
+var EditableTextTrigger = ({
+  children,
+  ...props
+}) => {
+  const context = useContext17(EditableTextContext);
+  if (!context) {
+    throw new Error("EditableTextTrigger must be used within an EditableTextRoot context");
+  }
+  const { setIsEditing } = context;
+  const handleClick = () => {
+    setIsEditing(true);
+  };
+  const onlyChild = Children9.only(children);
+  const triggerProps = {
+    onClick: handleClick,
+    "data-wui-editable-text-trigger": true,
+    ...props
+  };
+  return cloneElement7(onlyChild, triggerProps);
+};
 export {
   ActionButton,
   Avatar,
@@ -16947,6 +17390,14 @@ export {
   DataCards,
   Divider,
   EditableHeading,
+  EditableText,
+  EditableTextContext,
+  EditableTextDisplay,
+  EditableTextInput,
+  EditableTextLabel,
+  EditableTextRoot,
+  EditableTextSubmitButton,
+  EditableTextTrigger,
   Ellipsis,
   FileAmountLimitValidator,
   FileSizeValidator,