@wistia/ui 0.5.2-beta.a848ca2c.7febb8d → 0.5.2-beta.a93c5fb4.3a5bcbb

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.5.2-beta.a848ca2c.7febb8d
+ * @license @wistia/ui v0.5.2-beta.a93c5fb4.3a5bcbb
  *
  * 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,
@@ -2080,9 +2081,9 @@ var import_react6 = require("react");
 // src/private/hooks/useEvent/useEvent.ts
 var import_react5 = require("react");
 
-// src/private/helpers/isValidRef/isValidRef.ts
+// src/private/helpers/isObjectRef/isObjectRef.ts
 var import_type_guards6 = require("@wistia/type-guards");
-var isValidRef = (value) => {
+var isObjectRef = (value) => {
   return (0, import_type_guards6.isNotNil)(value) && (0, import_type_guards6.isRecord)(value) && "current" in value;
 };
 
@@ -2102,7 +2103,7 @@ var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}
     savedEventOptions.current = eventOptions;
   }, [eventOptions]);
   (0, import_react5.useEffect)(() => {
-    const target = isValidRef(eventTarget) ? eventTarget.current : eventTarget;
+    const target = isObjectRef(eventTarget) ? eventTarget.current : eventTarget;
     if (!eventName || !isEventTargetSupported(target)) {
       return;
     }
@@ -7904,7 +7905,7 @@ var StyledInputContainer = import_styled_components41.default.div`
     padding-right: 32px;
   }
 `;
-var isValidRef2 = (ref) => {
+var isValidRef = (ref) => {
   return typeof ref === "object" && ref !== null && "current" in ref && (0, import_type_guards24.isNotNil)(ref.current);
 };
 var Input = (0, import_react30.forwardRef)(
@@ -7918,7 +7919,7 @@ var Input = (0, import_react30.forwardRef)(
     ...props
   }, externalRef) => {
     const internalRef = (0, import_react30.useRef)();
-    const ref = isValidRef2(externalRef) ? externalRef : internalRef;
+    const ref = isValidRef(externalRef) ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards24.isNil)(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(Icon, { type: "search" });
@@ -9775,6 +9776,158 @@ 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 sharedInputStyles = import_styled_components65.css`
+  padding: var(--wui-space-02);
+  border-radius: var(--wui-border-radius-01);
+  overflow-wrap: anywhere;
+  width: 100%;
+`;
+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);
+  box-sizing: border-box;
+  margin: 0;
+  display: block;
+  overflow: hidden;
+  resize: vertical;
+  height: ${({ $headingHeight }) => `${$headingHeight}px`};
+  background: transparent;
+  border: none;
+  outline: 2px solid var(--wui-color-focus-ring);
+  outline-offset: -2px;
+
+  &:focus {
+    outline: 2px solid var(--wui-color-focus-ring);
+    outline-offset: -2px;
+  }
+`;
+var StyledHeading2 = (0, import_styled_components65.default)(Heading)`
+  ${sharedInputStyles}
+  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);
+      }
+    `}
+`;
+var EditableHeading = ({
+  children,
+  onValueChange,
+  onEditingChange,
+  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);
+    }
+    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,
+    {
+      ...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)(
+      StyledEditableHeadingInput,
+      {
+        ...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
+      }
+    );
+  }
+  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 +9947,7 @@ var DataCardTrend = ({
   DataCardTrend,
   DataCards,
   Divider,
+  EditableHeading,
   Ellipsis,
   Form,
   FormErrorSummary,