@wistia/ui 0.4.14 → 0.5.0-beta.0d4c5f2f.6eaaa8c

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.14
+ * @license @wistia/ui v0.5.0-beta.0d4c5f2f.6eaaa8c
  *
  * 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,
@@ -9313,18 +9314,18 @@ DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
 var import_styled_components63 = __toESM(require("styled-components"));
-var import_type_guards35 = require("@wistia/type-guards");
 var import_jsx_runtime212 = require("react/jsx-runtime");
 var StyledDataCards = (0, import_styled_components63.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  margin-top: 0; /* Remove default <dl> style */
   > * {
     min-width: 120px;
-    max-width: ${({ $cardMaxWidth }) => (0, import_type_guards35.isNotUndefined)($cardMaxWidth) ? `${$cardMaxWidth}px` : "none"};
+    max-width: ${({ $cardMaxWidth }) => $cardMaxWidth};
   }
 `;
 var DataCards = ({
   children,
-  cardMaxWidth,
+  cardMaxWidth = "none",
   colorScheme = "inherit",
   ...props
 }) => {
@@ -9382,6 +9383,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,
@@ -9401,6 +9554,7 @@ var DataCardTrend = ({
   DataCardTrend,
   DataCards,
   Divider,
+  EditableHeading,
   Ellipsis,
   Form,
   FormErrorSummary,