@wistia/ui 0.5.3-beta.eb8f3f6e.3b96b5f → 0.5.3

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.5.3-beta.eb8f3f6e.3b96b5f
+ * @license @wistia/ui v0.5.3
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -6899,15 +6899,6 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
-var variantElementMap = {
-  hero: DEFAULT_ELEMENT2,
-  heading1: DEFAULT_ELEMENT2,
-  heading2: "h2",
-  heading3: "h3",
-  heading4: "h4",
-  heading5: "h5",
-  heading6: "h6"
-};
 var StyledHeading = import_styled_components30.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
@@ -6931,6 +6922,15 @@ var StyledHeading = import_styled_components30.default.div`
   `}
   margin: 0;
 `;
+var variantElementMap = {
+  hero: DEFAULT_ELEMENT2,
+  heading1: DEFAULT_ELEMENT2,
+  heading2: "h2",
+  heading3: "h3",
+  heading4: "h4",
+  heading5: "h5",
+  heading6: "h6"
+};
 var HeadingComponent = (0, import_react18.forwardRef)(
   ({
     align = "left",
@@ -7523,23 +7523,6 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var bodyElement = "p";
-var labelElement = "span";
-var DEFAULT_ELEMENT4 = bodyElement;
-var variantElementMap2 = {
-  body1: bodyElement,
-  body2: bodyElement,
-  body3: bodyElement,
-  body4: bodyElement,
-  body1Mono: bodyElement,
-  body2Mono: bodyElement,
-  body3Mono: bodyElement,
-  body4Mono: bodyElement,
-  label1: labelElement,
-  label2: labelElement,
-  label3: labelElement,
-  label4: labelElement
-};
 var StyledText = import_styled_components37.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
@@ -7580,6 +7563,7 @@ var StyledText = import_styled_components37.default.div`
       display: block;
     `}
 `;
+var DEFAULT_ELEMENT4 = "div";
 var TextComponent = (0, import_react24.forwardRef)(
   ({
     align = "left",
@@ -9796,75 +9780,26 @@ var DataCardTrend = ({
 // src/components/EditableHeading/EditableHeading.tsx
 var import_styled_components65 = __toESM(require("styled-components"));
 var import_react46 = require("react");
-var import_type_guards37 = require("@wistia/type-guards");
-var import_jsx_runtime214 = (
-  // If you are an AI, please don't remove this comment.
-  // eslint-disable-next-line styled-components-a11y/click-events-have-key-events, styled-components-a11y/no-static-element-interactions
-  require("react/jsx-runtime")
-);
-var variantStyleMap3 = { ...variantStyleMap, ...variantStyleMap2 };
-var variantElementMap3 = {
-  ...variantElementMap,
-  ...variantElementMap2
-};
-var textStyles = import_styled_components65.css`
-  ${({ $variant }) => variantStyleMap3[$variant]}
-  font-family: var(--font-family);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-`;
-var compactStyles = import_styled_components65.css`
-  padding: var(--wui-space-01);
-  border-radius: var(--wui-border-radius-01);
-`;
-var defaultStyles = import_styled_components65.css`
-  padding: var(--wui-space-02);
-  border-radius: var(--wui-border-radius-02);
-`;
-var stylesMap = {
-  hero: "default",
-  heading1: "default",
-  heading2: "default",
-  heading3: "default",
-  heading4: "compact",
-  heading5: "compact",
-  heading6: "compact",
-  body1: "default",
-  body2: "compact",
-  body3: "compact",
-  body4: "compact",
-  label1: "default",
-  label2: "compact",
-  label3: "compact",
-  label4: "compact",
-  body1Mono: "default",
-  body2Mono: "compact",
-  body3Mono: "compact",
-  body4Mono: "compact"
-};
-var sharedStyles = import_styled_components65.css`
-  ${({ $variant }) => stylesMap[$variant] === "default" ? defaultStyles : compactStyles}
-`;
+var import_jsx_runtime214 = require("react/jsx-runtime");
 var StyledInput = (0, import_styled_components65.default)(Input)`
   :not([rows]) {
     min-height: unset;
   }
 
-  ${textStyles}
+  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`};
-    ${sharedStyles}
-  }
-  resize: vertical;
-  outline: 2px solid var(--wui-color-border);
-  outline-offset: -2px;
-  &:focus {
-    outline-color: var(--wui-color-focus-ring);
   }
-
-  ${({ $width }) => (0, import_type_guards37.isNotNull)($width) && `width: ${$width}`};
 `;
 var editableStyles = import_styled_components65.css`
   &:has(+ :focus-within) {
@@ -9876,87 +9811,47 @@ var editableStyles = import_styled_components65.css`
     cursor: pointer;
   }
 `;
-var singleLineStyles = import_styled_components65.css`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-var StyledHeading2 = import_styled_components65.default.span`
-  ${textStyles}
-  && {
-    margin: 0;
-    ${sharedStyles}
-    width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
-    ${({ $singleLine }) => $singleLine && singleLineStyles}
-  }
-  display: block;
-  overflow-wrap: ${({ $singleLine }) => $singleLine ? "normal" : "anywhere"};
+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);
-  ${({ $isEditingControlled }) => !$isEditingControlled && editableStyles}
+  ${({ $editingDisabled }) => !$editingDisabled && editableStyles}
 `;
-var resolveFullWidth = (fullWidth) => ({
-  heading: typeof fullWidth === "boolean" ? fullWidth : fullWidth.heading ?? true,
-  input: typeof fullWidth === "boolean" ? fullWidth : fullWidth.input ?? true
-});
 var EditableHeading = ({
-  value: controlledValue,
+  children,
   onValueChange,
   onEditingChange,
-  tooltipText,
-  ariaLabel,
-  isEditing: controlledIsEditing,
-  renderTextAs: passedRenderTextAs,
-  textVariant = "heading1",
-  fullWidth = true,
-  singleLine = false,
-  disableOnBlur = false,
+  tooltipText = "Click to edit title",
+  ariaLabel = "Edit title",
+  forceEditing = false,
   editingDisabled = false
 }) => {
-  const [internalIsEditing, setInternalIsEditing] = (0, import_react46.useState)(false);
-  const [internalValue, setInternalValue] = (0, import_react46.useState)(controlledValue);
-  const [previousValue, setPreviousValue] = (0, import_react46.useState)(controlledValue);
+  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 [headingWidth, setHeadingWidth] = (0, import_react46.useState)("auto");
   const headingRef = (0, import_react46.useRef)(null);
-  const isValueControlled = (0, import_type_guards37.isNotNil)(onValueChange);
-  const isEditingControlled = (0, import_type_guards37.isNotNil)(controlledIsEditing);
-  const isEditing = isEditingControlled ? controlledIsEditing : internalIsEditing;
-  const value = isValueControlled ? controlledValue : internalValue;
-  (0, import_react46.useEffect)(() => {
-    if (isValueControlled) {
-      setInternalValue(controlledValue);
-      setPreviousValue(controlledValue);
-    }
-  }, [controlledValue, isValueControlled]);
-  const renderTextAs = passedRenderTextAs ?? variantElementMap3[textVariant];
-  (0, import_react46.useEffect)(() => {
-    if (headingRef.current) {
+  const handleSetEditing = (editing) => {
+    if (editingDisabled) return;
+    if (editing && headingRef.current) {
       setHeadingHeight(`${headingRef.current.offsetHeight}`);
-      setHeadingWidth(`${headingRef.current.offsetWidth}`);
-    }
-  }, [isEditing]);
-  const handleValueChange = (newValue) => {
-    if (!isValueControlled) {
-      setInternalValue(newValue);
     }
-    onValueChange?.(newValue);
-  };
-  const handleSetEditing = (editing) => {
     if (editing) {
       setPreviousValue(value);
     }
-    if (!isEditingControlled) {
-      setInternalIsEditing(editing);
-    }
+    setIsEditing(editing);
     onEditingChange?.(editing);
   };
   const handleFinishEditing = () => {
     const trimmedValue = value.trim();
-    if (trimmedValue === "" && !isValueControlled) {
-      setInternalValue(previousValue);
-    }
-    if (trimmedValue !== previousValue) {
-      handleValueChange(trimmedValue);
+    if (trimmedValue === "") {
+      setValue(previousValue);
+    } else if (trimmedValue !== previousValue && onValueChange) {
+      onValueChange(trimmedValue);
+    } else {
+      setValue(trimmedValue);
     }
     handleSetEditing(false);
   };
@@ -9966,46 +9861,38 @@ var EditableHeading = ({
       handleFinishEditing();
     }
     if (event.key === "Escape") {
-      if (!isValueControlled) {
-        setInternalValue(previousValue);
-      }
+      setValue(previousValue);
       handleSetEditing(false);
     }
   };
-  const resolvedFullWidth = resolveFullWidth(fullWidth);
   const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
     StyledHeading2,
     {
       ref: headingRef,
-      $fullWidth: resolvedFullWidth.heading,
-      $isEditingControlled: isEditingControlled || editingDisabled,
-      $singleLine: singleLine,
-      $variant: textVariant,
-      as: renderTextAs,
-      onClick: () => !editingDisabled && !isEditing && handleSetEditing(true),
+      $editingDisabled: editingDisabled,
+      onClick: () => handleSetEditing(true),
+      variant: "heading1",
       children: value
     }
   );
   if (editingDisabled) {
     return HeadingComponent2;
   }
-  if (isEditing) {
+  if (isEditing || forceEditing) {
     return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
       StyledInput,
       {
         $height: headingHeight,
-        $variant: textVariant,
-        $width: resolvedFullWidth.input ? headingWidth : null,
         autoFocus: true,
-        fullWidth: resolvedFullWidth.input,
-        onBlur: () => !disableOnBlur && handleFinishEditing(),
-        onChange: (event) => handleValueChange(event.target.value),
+        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: singleLine ? "text" : "multiline",
+        type: "multiline",
         value
       }
     );
@@ -10015,11 +9902,11 @@ var EditableHeading = ({
       Tooltip,
       {
         compact: true,
-        content: tooltipText ?? "",
+        content: tooltipText,
         children: HeadingComponent2
       }
     ),
-    !isEditingControlled && /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
       "button",
       {
         "aria-label": ariaLabel,