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

package/dist/index.d.mts

@@ -1584,7 +1584,7 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
 /**
  * Used for rending paragraphs and inline text.
  */
-declare const Text: (<C extends ElementType = "p">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & UnknownRecord;
+declare const Text: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & UnknownRecord;
 
 type MenuItemLabelProps = {
     /**
@@ -2230,22 +2230,12 @@ type DataCardTrendProps = {
 };
 declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => JSX.Element;
 
-type VariantTypes = keyof typeof variantStyleMap$1 | keyof typeof variantStyleMap;
-type VariantElementTypes = (typeof variantElementMap)[keyof typeof variantElementMap];
-type FullWidthConfig = boolean | {
-    heading?: boolean;
-    input?: boolean;
-};
-declare const variantElementMap: {
-    [x: string]: react.ElementType;
-};
 type EditableHeadingProps = {
     /**
-     * The text content of the heading.
-     * If provided without onValueChange, acts as initial value.
-     * If provided with onValueChange, acts as controlled value.
+     * The initial text content of the heading.
+     * This will be displayed and used as the starting value when editing begins.
      */
-    value: string;
+    children: string;
     /**
      * Callback fired when editing is completed (on blur or Enter key). Does not fire if the value is empty or the same as the previous value.
      * @param value The new text content after editing
@@ -2257,53 +2247,30 @@ type EditableHeadingProps = {
      */
     onEditingChange?: (isEditing: boolean) => void;
     /**
-     * Custom tooltip text shown when hovering over the heading. If not provided, no tooltip will be shown.
+     * Custom tooltip text shown when hovering over the heading.
      */
     tooltipText?: string;
     /**
      * Sets an aria-label for the input and label for the screen reader only button.
      */
-    ariaLabel: string;
-    /**
-     * When true, prevents the heading from entering edit mode
-     * @default false
-     */
-    isEditing?: boolean | undefined;
+    ariaLabel?: string;
     /**
-     * The variant of the heading to render.
-     */
-    textVariant?: VariantTypes;
-    /**
-     * What element to render the text as.
-     */
-    renderTextAs?: VariantElementTypes;
-    /**
-     * Controls the width behavior of the heading and input
-     * @default true
-     * Pass a boolean to set both heading and input width
-     * Pass an object to set them independently: { heading?: boolean; input?: boolean }
-     */
-    fullWidth?: FullWidthConfig;
-    /**
-     * When true, prevents text wrapping and uses a single-line input
-     * @default false
-     */
-    singleLine?: boolean;
-    /**
-     * When true, the editing state will not close when the input is blurred
-     * @default false
+     * Force editing state for testing purposes
+     *
      */
-    disableOnBlur?: boolean;
+    forceEditing?: boolean;
     /**
-     * When true, prevents the heading from being edited and removes editable styles
+     * When true, prevents the heading from entering edit mode
      * @default false
      */
     editingDisabled?: boolean;
 };
 /**
- * For use when editing text that appears inline in a page - **not for forms.** The component handles empty values, keyboard
+ * A special heading component that allows for inline editing. When clicked or activated via keyboard,
+ * it transforms into an editable text field. In its default state, it renders as a heading with
+ * an accessible button that enables editing mode. The component handles empty values, keyboard
  * navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
  */
-declare const EditableHeading: ({ value: controlledValue, onValueChange, onEditingChange, tooltipText, ariaLabel, isEditing: controlledIsEditing, renderTextAs: passedRenderTextAs, textVariant, fullWidth, singleLine, disableOnBlur, editingDisabled, }: EditableHeadingProps) => JSX.Element;
+declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
 
 export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -1584,7 +1584,7 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
 /**
  * Used for rending paragraphs and inline text.
  */
-declare const Text: (<C extends ElementType = "p">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & UnknownRecord;
+declare const Text: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & UnknownRecord;
 
 type MenuItemLabelProps = {
     /**
@@ -2230,22 +2230,12 @@ type DataCardTrendProps = {
 };
 declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => JSX.Element;
 
-type VariantTypes = keyof typeof variantStyleMap$1 | keyof typeof variantStyleMap;
-type VariantElementTypes = (typeof variantElementMap)[keyof typeof variantElementMap];
-type FullWidthConfig = boolean | {
-    heading?: boolean;
-    input?: boolean;
-};
-declare const variantElementMap: {
-    [x: string]: react.ElementType;
-};
 type EditableHeadingProps = {
     /**
-     * The text content of the heading.
-     * If provided without onValueChange, acts as initial value.
-     * If provided with onValueChange, acts as controlled value.
+     * The initial text content of the heading.
+     * This will be displayed and used as the starting value when editing begins.
      */
-    value: string;
+    children: string;
     /**
      * Callback fired when editing is completed (on blur or Enter key). Does not fire if the value is empty or the same as the previous value.
      * @param value The new text content after editing
@@ -2257,53 +2247,30 @@ type EditableHeadingProps = {
      */
     onEditingChange?: (isEditing: boolean) => void;
     /**
-     * Custom tooltip text shown when hovering over the heading. If not provided, no tooltip will be shown.
+     * Custom tooltip text shown when hovering over the heading.
      */
     tooltipText?: string;
     /**
      * Sets an aria-label for the input and label for the screen reader only button.
      */
-    ariaLabel: string;
-    /**
-     * When true, prevents the heading from entering edit mode
-     * @default false
-     */
-    isEditing?: boolean | undefined;
+    ariaLabel?: string;
     /**
-     * The variant of the heading to render.
-     */
-    textVariant?: VariantTypes;
-    /**
-     * What element to render the text as.
-     */
-    renderTextAs?: VariantElementTypes;
-    /**
-     * Controls the width behavior of the heading and input
-     * @default true
-     * Pass a boolean to set both heading and input width
-     * Pass an object to set them independently: { heading?: boolean; input?: boolean }
-     */
-    fullWidth?: FullWidthConfig;
-    /**
-     * When true, prevents text wrapping and uses a single-line input
-     * @default false
-     */
-    singleLine?: boolean;
-    /**
-     * When true, the editing state will not close when the input is blurred
-     * @default false
+     * Force editing state for testing purposes
+     *
      */
-    disableOnBlur?: boolean;
+    forceEditing?: boolean;
     /**
-     * When true, prevents the heading from being edited and removes editable styles
+     * When true, prevents the heading from entering edit mode
      * @default false
      */
     editingDisabled?: boolean;
 };
 /**
- * For use when editing text that appears inline in a page - **not for forms.** The component handles empty values, keyboard
+ * A special heading component that allows for inline editing. When clicked or activated via keyboard,
+ * it transforms into an editable text field. In its default state, it renders as a heading with
+ * an accessible button that enables editing mode. The component handles empty values, keyboard
  * navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
  */
-declare const EditableHeading: ({ value: controlledValue, onValueChange, onEditingChange, tooltipText, ariaLabel, isEditing: controlledIsEditing, renderTextAs: passedRenderTextAs, textVariant, fullWidth, singleLine, disableOnBlur, editingDisabled, }: EditableHeadingProps) => JSX.Element;
+declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
 
 export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.mjs

@@ -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.
  *
@@ -6798,15 +6798,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 = styled15.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
@@ -6830,6 +6821,15 @@ var StyledHeading = styled15.div`
   `}
   margin: 0;
 `;
+var variantElementMap = {
+  hero: DEFAULT_ELEMENT2,
+  heading1: DEFAULT_ELEMENT2,
+  heading2: "h2",
+  heading3: "h3",
+  heading4: "h4",
+  heading5: "h5",
+  heading6: "h6"
+};
 var HeadingComponent = forwardRef6(
   ({
     align = "left",
@@ -7422,23 +7422,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 = styled22.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
@@ -7479,6 +7462,7 @@ var StyledText = styled22.div`
       display: block;
     `}
 `;
+var DEFAULT_ELEMENT4 = "div";
 var TextComponent = forwardRef10(
   ({
     align = "left",
@@ -9728,72 +9712,27 @@ var DataCardTrend = ({
 
 // src/components/EditableHeading/EditableHeading.tsx
 import styled50, { css as css25 } from "styled-components";
-import { useState as useState8, useRef as useRef8, useEffect as useEffect5 } from "react";
-import { isNotNil as isNotNil19, isNotNull as isNotNull2 } from "@wistia/type-guards";
+import { useState as useState8, useRef as useRef8 } from "react";
 import { Fragment as Fragment5, jsx as jsx213, jsxs as jsxs33 } from "react/jsx-runtime";
-var variantStyleMap3 = { ...variantStyleMap, ...variantStyleMap2 };
-var variantElementMap3 = {
-  ...variantElementMap,
-  ...variantElementMap2
-};
-var textStyles = css25`
-  ${({ $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 = css25`
-  padding: var(--wui-space-01);
-  border-radius: var(--wui-border-radius-01);
-`;
-var defaultStyles = css25`
-  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 = css25`
-  ${({ $variant }) => stylesMap[$variant] === "default" ? defaultStyles : compactStyles}
-`;
 var StyledInput = styled50(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 }) => isNotNull2($width) && `width: ${$width}`};
 `;
 var editableStyles = css25`
   &:has(+ :focus-within) {
@@ -9805,87 +9744,47 @@ var editableStyles = css25`
     cursor: pointer;
   }
 `;
-var singleLineStyles = css25`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-var StyledHeading2 = styled50.span`
-  ${textStyles}
-  && {
-    margin: 0;
-    ${sharedStyles}
-    width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
-    ${({ $singleLine }) => $singleLine && singleLineStyles}
-  }
-  display: block;
-  overflow-wrap: ${({ $singleLine }) => $singleLine ? "normal" : "anywhere"};
+var StyledHeading2 = styled50(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] = useState8(false);
-  const [internalValue, setInternalValue] = useState8(controlledValue);
-  const [previousValue, setPreviousValue] = useState8(controlledValue);
+  const [isEditing, setIsEditing] = useState8(false);
+  const [value, setValue] = useState8(children);
+  const [previousValue, setPreviousValue] = useState8(children);
   const [headingHeight, setHeadingHeight] = useState8("60");
-  const [headingWidth, setHeadingWidth] = useState8("auto");
   const headingRef = useRef8(null);
-  const isValueControlled = isNotNil19(onValueChange);
-  const isEditingControlled = isNotNil19(controlledIsEditing);
-  const isEditing = isEditingControlled ? controlledIsEditing : internalIsEditing;
-  const value = isValueControlled ? controlledValue : internalValue;
-  useEffect5(() => {
-    if (isValueControlled) {
-      setInternalValue(controlledValue);
-      setPreviousValue(controlledValue);
-    }
-  }, [controlledValue, isValueControlled]);
-  const renderTextAs = passedRenderTextAs ?? variantElementMap3[textVariant];
-  useEffect5(() => {
-    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);
   };
@@ -9895,50 +9794,38 @@ var EditableHeading = ({
       handleFinishEditing();
     }
     if (event.key === "Escape") {
-      if (!isValueControlled) {
-        setInternalValue(previousValue);
-      }
+      setValue(previousValue);
       handleSetEditing(false);
     }
   };
-  const resolvedFullWidth = resolveFullWidth(fullWidth);
-  const HeadingComponent2 = (
-    // 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
-    /* @__PURE__ */ jsx213(
-      StyledHeading2,
-      {
-        ref: headingRef,
-        $fullWidth: resolvedFullWidth.heading,
-        $isEditingControlled: isEditingControlled || editingDisabled,
-        $singleLine: singleLine,
-        $variant: textVariant,
-        as: renderTextAs,
-        onClick: () => !editingDisabled && !isEditing && handleSetEditing(true),
-        children: value
-      }
-    )
+  const HeadingComponent2 = /* @__PURE__ */ jsx213(
+    StyledHeading2,
+    {
+      ref: headingRef,
+      $editingDisabled: editingDisabled,
+      onClick: () => handleSetEditing(true),
+      variant: "heading1",
+      children: value
+    }
   );
   if (editingDisabled) {
     return HeadingComponent2;
   }
-  if (isEditing) {
+  if (isEditing || forceEditing) {
     return /* @__PURE__ */ jsx213(
       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
       }
     );
@@ -9948,11 +9835,11 @@ var EditableHeading = ({
       Tooltip,
       {
         compact: true,
-        content: tooltipText ?? "",
+        content: tooltipText,
         children: HeadingComponent2
       }
     ),
-    !isEditingControlled && /* @__PURE__ */ jsx213(ScreenReaderOnly, { children: /* @__PURE__ */ jsx213(
+    /* @__PURE__ */ jsx213(ScreenReaderOnly, { children: /* @__PURE__ */ jsx213(
       "button",
       {
         "aria-label": ariaLabel,