@wistia/ui 0.5.2-beta.e9c9ab1e.5bceb43 → 0.5.2

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.5.2-beta.e9c9ab1e.5bceb43
+ * @license @wistia/ui v0.5.2
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -56,7 +56,6 @@ __export(index_exports, {
   DataCardTrend: () => DataCardTrend,
   DataCards: () => DataCards,
   Divider: () => Divider,
-  EditableHeading: () => EditableHeading,
   Ellipsis: () => Ellipsis,
   Form: () => Form,
   FormErrorSummary: () => FormErrorSummary,
@@ -9776,152 +9775,6 @@ 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,
-  inputProps,
-  headingProps,
-  "data-testid": 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} ${dataTestId}-heading`,
-      onClick: () => handleSetEditing(true),
-      variant: "heading1",
-      children: value
-    }
-  );
-  if (editingDisabled) {
-    return HeadingComponent2;
-  }
-  if (isEditing || forceEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
-      StyledInput,
-      {
-        ...inputProps,
-        $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,
@@ -9941,7 +9794,6 @@ var EditableHeading = ({
   DataCardTrend,
   DataCards,
   Divider,
-  EditableHeading,
   Ellipsis,
   Form,
   FormErrorSummary,