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

package/dist/index.d.mts

@@ -2175,9 +2175,9 @@ type DataCardsProps = ComponentPropsWithoutRef<'dl'> & {
      */
     children: ReactNode;
     /**
-     * Max width of the child cards
+     * String to pass to the `max-width` property of its children. [View the syntax on MDN →](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
      */
-    cardMaxWidth?: number | undefined;
+    cardMaxWidth?: string;
     /**
      * Sets the color scheme of the cards, can be overriden at the card level
      */
@@ -2207,4 +2207,59 @@ type DataCardTrendProps = {
 };
 declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => 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, 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, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+type EditableHeadingProps = {
+    /**
+     * The initial text content of the heading.
+     * This will be displayed and used as the starting value when editing begins.
+     */
+    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
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Callback fired when the editing state changes.
+     * @param isEditing True when entering edit mode, false when exiting
+     */
+    onEditingChange?: (isEditing: boolean) => void;
+    /**
+     * Custom tooltip text shown when hovering over the heading.
+     */
+    tooltipText?: string;
+    /**
+     * Sets an aria-label for the input and screen reader only button.
+     *
+     */
+    ariaLabel?: string;
+    /**
+     * Force editing state for testing purposes
+     */
+    forceEditing?: boolean;
+    /**
+     * When true, prevents the heading from entering edit mode
+     * @default false
+     */
+    editingDisabled?: boolean;
+    /**
+     * Additional props for the heading element
+     */
+    headingProps?: ComponentPropsWithoutRef<'h1'>;
+    /**
+     * Additional props for the textarea element
+     */
+    textareaProps?: ComponentPropsWithoutRef<'textarea'>;
+    /**
+     * Optional data-testid attribute for testing purposes
+     */
+    dataTestId?: string;
+};
+/**
+ * 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: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, forceEditing, editingDisabled, textareaProps, headingProps, dataTestId, }: 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, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -2175,9 +2175,9 @@ type DataCardsProps = ComponentPropsWithoutRef<'dl'> & {
      */
     children: ReactNode;
     /**
-     * Max width of the child cards
+     * String to pass to the `max-width` property of its children. [View the syntax on MDN →](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
      */
-    cardMaxWidth?: number | undefined;
+    cardMaxWidth?: string;
     /**
      * Sets the color scheme of the cards, can be overriden at the card level
      */
@@ -2207,4 +2207,59 @@ type DataCardTrendProps = {
 };
 declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => 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, 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, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+type EditableHeadingProps = {
+    /**
+     * The initial text content of the heading.
+     * This will be displayed and used as the starting value when editing begins.
+     */
+    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
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Callback fired when the editing state changes.
+     * @param isEditing True when entering edit mode, false when exiting
+     */
+    onEditingChange?: (isEditing: boolean) => void;
+    /**
+     * Custom tooltip text shown when hovering over the heading.
+     */
+    tooltipText?: string;
+    /**
+     * Sets an aria-label for the input and screen reader only button.
+     *
+     */
+    ariaLabel?: string;
+    /**
+     * Force editing state for testing purposes
+     */
+    forceEditing?: boolean;
+    /**
+     * When true, prevents the heading from entering edit mode
+     * @default false
+     */
+    editingDisabled?: boolean;
+    /**
+     * Additional props for the heading element
+     */
+    headingProps?: ComponentPropsWithoutRef<'h1'>;
+    /**
+     * Additional props for the textarea element
+     */
+    textareaProps?: ComponentPropsWithoutRef<'textarea'>;
+    /**
+     * Optional data-testid attribute for testing purposes
+     */
+    dataTestId?: string;
+};
+/**
+ * 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: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, forceEditing, editingDisabled, textareaProps, headingProps, dataTestId, }: 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, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.mjs

@@ -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.
  *
@@ -9248,18 +9248,18 @@ DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
 import styled48 from "styled-components";
-import { isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
 import { jsx as jsx211 } from "react/jsx-runtime";
 var StyledDataCards = styled48(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  margin-top: 0; /* Remove default <dl> style */
   > * {
     min-width: 120px;
-    max-width: ${({ $cardMaxWidth }) => isNotUndefined9($cardMaxWidth) ? `${$cardMaxWidth}px` : "none"};
+    max-width: ${({ $cardMaxWidth }) => $cardMaxWidth};
   }
 `;
 var DataCards = ({
   children,
-  cardMaxWidth,
+  cardMaxWidth = "none",
   colorScheme = "inherit",
   ...props
 }) => {
@@ -9317,6 +9317,158 @@ var DataCardTrend = ({
     )
   ] });
 };
+
+// src/components/EditableHeading/EditableHeading.tsx
+import styled50, { css as css25 } from "styled-components";
+import { useState as useState8, useRef as useRef8 } from "react";
+import { Fragment as Fragment5, jsx as jsx213, jsxs as jsxs33 } from "react/jsx-runtime";
+var sharedInputStyles = css25`
+  padding: var(--wui-space-02);
+  border-radius: var(--wui-border-radius-01);
+  overflow-wrap: anywhere;
+  width: 100%;
+`;
+var StyledEditableHeadingInput = styled50.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 = styled50(Heading)`
+  ${sharedInputStyles}
+  transition: all var(--wui-motion-duration-01) var(--wui-motion-ease);
+  ${({ $editingDisabled }) => !$editingDisabled && css25`
+      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] = useState8(false);
+  const [value, setValue] = useState8(children);
+  const [previousValue, setPreviousValue] = useState8(children);
+  const [headingHeight, setHeadingHeight] = useState8("60");
+  const headingRef = useRef8(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__ */ jsx213(
+    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__ */ jsx213(
+      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__ */ jsxs33(Fragment5, { children: [
+    /* @__PURE__ */ jsx213(
+      Tooltip,
+      {
+        compact: true,
+        content: tooltipText,
+        children: HeadingComponent2
+      }
+    ),
+    /* @__PURE__ */ jsx213(ScreenReaderOnly, { children: /* @__PURE__ */ jsx213(
+      "button",
+      {
+        "aria-label": ariaLabel,
+        onClick: () => handleSetEditing(true),
+        type: "button"
+      }
+    ) })
+  ] });
+};
 export {
   ActionButton,
   Avatar,
@@ -9335,6 +9487,7 @@ export {
   DataCardTrend,
   DataCards,
   Divider,
+  EditableHeading,
   Ellipsis,
   Form,
   FormErrorSummary,