@wistia/ui 0.5.2-beta.a848ca2c.7febb8d → 0.5.2-beta.afcce0d8.98f1a2c

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.5.2-beta.a848ca2c.7febb8d
+ * @license @wistia/ui v0.5.2-beta.afcce0d8.98f1a2c
  *
  * 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,
@@ -9775,6 +9776,146 @@ var DataCardTrend = ({
     )
   ] });
 };
+
+// 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");
+var StyledInput = (0, import_styled_components65.default)(Input)`
+  :not([rows]) {
+    min-height: unset;
+  }
+
+  resize: vertical;
+  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);
+  outline: 2px solid var(--wui-color-focus-ring);
+  outline-offset: -2px;
+
+  && {
+    width: 100%;
+    padding: var(--wui-space-02);
+    border: none;
+    height: ${({ $height }) => `${$height}px`};
+  }
+`;
+var editableStyles = import_styled_components65.css`
+  &:has(+ :focus-within) {
+    background: var(--wui-color-bg-surface-hover);
+  }
+
+  &:hover {
+    background: var(--wui-color-bg-surface-hover);
+    cursor: pointer;
+  }
+`;
+var StyledHeading2 = (0, import_styled_components65.default)(Heading)`
+  width: 100%;
+  border-radius: var(--wui-border-radius-02);
+  padding: var(--wui-space-02);
+  overflow-wrap: anywhere;
+  transition: all var(--wui-motion-duration-01) var(--wui-motion-ease);
+  ${({ $editingDisabled }) => !$editingDisabled && editableStyles}
+`;
+var EditableHeading = ({
+  children,
+  onValueChange,
+  onEditingChange,
+  tooltipText = "Click to edit title",
+  ariaLabel = "Edit title",
+  forceEditing = false,
+  editingDisabled = false
+}) => {
+  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);
+    }
+    setIsEditing(editing);
+    onEditingChange?.(editing);
+  };
+  const handleFinishEditing = () => {
+    const trimmedValue = value.trim();
+    if (trimmedValue === "") {
+      setValue(previousValue);
+    } else if (trimmedValue !== previousValue && onValueChange) {
+      onValueChange(trimmedValue);
+    } else {
+      setValue(trimmedValue);
+    }
+    handleSetEditing(false);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      handleFinishEditing();
+    }
+    if (event.key === "Escape") {
+      setValue(previousValue);
+      handleSetEditing(false);
+    }
+  };
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+    StyledHeading2,
+    {
+      ref: headingRef,
+      $editingDisabled: editingDisabled,
+      onClick: () => handleSetEditing(true),
+      variant: "heading1",
+      children: value
+    }
+  );
+  if (editingDisabled) {
+    return HeadingComponent2;
+  }
+  if (isEditing || forceEditing) {
+    return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+      StyledInput,
+      {
+        $height: headingHeight,
+        autoFocus: true,
+        fullWidth: true,
+        onBlur: handleFinishEditing,
+        onChange: (event) => setValue(event.target.value),
+        onFocus: (event) => {
+          const { length } = event.currentTarget.value;
+          event.currentTarget.setSelectionRange(length, length);
+        },
+        onKeyDown: handleKeyDown,
+        type: "multiline",
+        value
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(import_jsx_runtime214.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+      Tooltip,
+      {
+        compact: true,
+        content: tooltipText,
+        children: HeadingComponent2
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+      "button",
+      {
+        "aria-label": ariaLabel,
+        onClick: () => handleSetEditing(true),
+        type: "button"
+      }
+    ) })
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -9794,6 +9935,7 @@ var DataCardTrend = ({
   DataCardTrend,
   DataCards,
   Divider,
+  EditableHeading,
   Ellipsis,
   Form,
   FormErrorSummary,