@wistia/ui 0.5.0-beta.1aeeeb0e.90a89da → 0.5.0-beta.c2166ce5.bf657fa

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.5.0-beta.1aeeeb0e.90a89da
+ * @license @wistia/ui v0.5.0-beta.c2166ce5.bf657fa
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -56,6 +56,7 @@ __export(index_exports, {
   DataCardTrend: () => DataCardTrend,
   DataCards: () => DataCards,
   Divider: () => Divider,
+  EditableHeading: () => EditableHeading,
   Ellipsis: () => Ellipsis,
   Form: () => Form,
   FormErrorSummary: () => FormErrorSummary,
@@ -65,7 +66,6 @@ __export(index_exports, {
   Icon: () => Icon,
   IconButton: () => IconButton,
   Input: () => Input,
-  InputHeading: () => InputHeading,
   Label: () => Label,
   Link: () => Link,
   Menu: () => Menu,
@@ -9384,7 +9384,7 @@ var DataCardTrend = ({
   ] });
 };
 
-// src/components/InputHeading/InputHeading.tsx
+// src/components/EditableHeading/EditableHeading.tsx
 var import_styled_components65 = __toESM(require("styled-components"));
 var import_react46 = require("react");
 var import_jsx_runtime214 = require("react/jsx-runtime");
@@ -9393,26 +9393,25 @@ var sharedInputStyles = import_styled_components65.css`
   border-radius: var(--wui-border-radius-01);
   overflow-wrap: anywhere;
 `;
-var StyledInputHeading = import_styled_components65.default.textarea`
+var StyledEditableHeadingInput = import_styled_components65.default.textarea`
+  :not([rows]) {
+    min-height: unset;
+  }
+
   ${sharedInputStyles}
   font-size: var(--wui-typography-heading-1-size);
   font-weight: var(--wui-typography-heading-1-weight);
   line-height: var(--wui-typography-heading-1-line-height);
   font-family: var(--wui-typography-heading-1-family);
   width: 100%;
-  min-height: 44px;
   box-sizing: border-box;
   margin: 0;
   display: block;
-  resize: none;
   overflow: hidden;
-  /* experimental feature not supported in Safari  or Firefox*/
-  /* could we use something like this: https://github.com/jamiebuilds/react-field-sizing-content*/
-  field-sizing: content;
-
+  resize: vertical;
+  height: ${({ $headingHeight }) => `${$headingHeight}px`};
   background: transparent;
   border: none;
-
   outline: 2px solid var(--wui-color-focus-ring);
   outline-offset: -2px;
 
@@ -9420,30 +9419,40 @@ var StyledInputHeading = import_styled_components65.default.textarea`
     outline: 2px solid var(--wui-color-focus-ring);
     outline-offset: -2px;
   }
-
-  :not([rows]) {
-    min-height: 44px;
-  }
 `;
 var StyledHeading2 = (0, import_styled_components65.default)(Heading)`
   ${sharedInputStyles}
-  cursor: pointer;
-  transition: background-color var(--wui-motion-duration-01) var(--wui-motion-ease);
+  transition: all var(--wui-motion-duration-01) var(--wui-motion-ease);
+  ${({ $editingDisabled }) => !$editingDisabled && import_styled_components65.css`
+      cursor: pointer;
 
-  &:hover {
-    background: var(--wui-color-bg-surface-hover);
-  }
+      &:hover {
+        background: var(--wui-color-bg-surface-hover);
+      }
+    `}
 `;
-var InputHeading = ({
+var EditableHeading = ({
   children,
   onValueChange,
   onEditingChange,
-  ...props
+  tooltipText = "Click to edit title",
+  ariaLabel = "Edit title",
+  forceEditing = false,
+  editingDisabled = false,
+  textareaProps,
+  headingProps,
+  dataTestId
 }) => {
   const [isEditing, setIsEditing] = (0, import_react46.useState)(false);
   const [value, setValue] = (0, import_react46.useState)(children);
   const [previousValue, setPreviousValue] = (0, import_react46.useState)(children);
+  const [headingHeight, setHeadingHeight] = (0, import_react46.useState)("60");
+  const headingRef = (0, import_react46.useRef)(null);
   const handleSetEditing = (editing) => {
+    if (editingDisabled) return;
+    if (editing && headingRef.current) {
+      setHeadingHeight(`${headingRef.current.offsetHeight}`);
+    }
     if (editing) {
       setPreviousValue(value);
     }
@@ -9471,14 +9480,36 @@ var InputHeading = ({
       handleSetEditing(false);
     }
   };
-  if (isEditing) {
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+    StyledHeading2,
+    {
+      ...headingProps,
+      ref: headingRef,
+      $editingDisabled: editingDisabled,
+      "data-testid": dataTestId,
+      onClick: () => handleSetEditing(true),
+      variant: "heading1",
+      children: value
+    }
+  );
+  if (editingDisabled) {
+    return HeadingComponent2;
+  }
+  if (isEditing || forceEditing) {
     return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
-      StyledInputHeading,
+      StyledEditableHeadingInput,
       {
-        ...props,
+        ...textareaProps,
+        $headingHeight: headingHeight,
+        "aria-label": ariaLabel,
         autoFocus: true,
+        "data-testid": dataTestId,
         onBlur: handleFinishEditing,
         onChange: (event) => setValue(event.target.value),
+        onFocus: (event) => {
+          const { length } = event.currentTarget.value;
+          event.currentTarget.setSelectionRange(length, length);
+        },
         onKeyDown: handleKeyDown,
         value,
         children: value
@@ -9490,21 +9521,14 @@ var InputHeading = ({
       Tooltip,
       {
         compact: true,
-        content: "Click to edit title",
-        children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
-          StyledHeading2,
-          {
-            onClick: () => handleSetEditing(true),
-            variant: "heading1",
-            children: value
-          }
-        )
+        content: tooltipText,
+        children: HeadingComponent2
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
       "button",
       {
-        "aria-label": "Edit title",
+        "aria-label": ariaLabel,
         onClick: () => handleSetEditing(true),
         type: "button"
       }
@@ -9530,6 +9554,7 @@ var InputHeading = ({
   DataCardTrend,
   DataCards,
   Divider,
+  EditableHeading,
   Ellipsis,
   Form,
   FormErrorSummary,
@@ -9539,7 +9564,6 @@ var InputHeading = ({
   Icon,
   IconButton,
   Input,
-  InputHeading,
   Label,
   Link,
   Menu,