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

package/dist/index.d.mts

@@ -575,7 +575,9 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
 /**
  * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
  */
-declare const Box: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, BoxProps>) => react.ReactElement | null) & UnknownRecord;
+declare const Box: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, BoxProps>) => react.ReactElement | null) & {
+    [x: string]: unknown;
+};
 
 type BreadcrumbsProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -990,7 +992,9 @@ type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
 /**
  * Displaying heading text, both visually and semantically
  */
-declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
+declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & {
+    [x: string]: unknown;
+};
 
 declare const iconMap: {
     'ab-test': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
@@ -1584,7 +1588,9 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
 /**
  * Used for rending paragraphs and inline text.
  */
-declare const Text: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & UnknownRecord;
+declare const Text: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & {
+    [x: string]: unknown;
+};
 
 type MenuItemLabelProps = {
     /**
@@ -1958,7 +1964,9 @@ type StackProps = {
  * Used to layout its children in a vertical or horizontal stack. The gap between each item in the stack can be customized.
  * This allows for layouting children in a consistent way without needing to manually add margins or padding.
  */
-declare const Stack: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement | null) & UnknownRecord;
+declare const Stack: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement | null) & {
+    [x: string]: unknown;
+};
 
 type TagProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -2230,59 +2238,4 @@ type DataCardTrendProps = {
 };
 declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => JSX.Element;
 
-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 label for the 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?: HeadingProps;
-    /**
-     * Additional props for the textarea element
-     */
-    inputProps?: InputProps;
-    /**
-     * Optional data-testid attribute for testing purposes
-     */
-    'data-testid'?: 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, inputProps, headingProps, "data-testid": 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, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+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, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -575,7 +575,9 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
 /**
  * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
  */
-declare const Box: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, BoxProps>) => react.ReactElement | null) & UnknownRecord;
+declare const Box: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, BoxProps>) => react.ReactElement | null) & {
+    [x: string]: unknown;
+};
 
 type BreadcrumbsProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -990,7 +992,9 @@ type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
 /**
  * Displaying heading text, both visually and semantically
  */
-declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & UnknownRecord;
+declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & {
+    [x: string]: unknown;
+};
 
 declare const iconMap: {
     'ab-test': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
@@ -1584,7 +1588,9 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
 /**
  * Used for rending paragraphs and inline text.
  */
-declare const Text: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & UnknownRecord;
+declare const Text: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & {
+    [x: string]: unknown;
+};
 
 type MenuItemLabelProps = {
     /**
@@ -1958,7 +1964,9 @@ type StackProps = {
  * Used to layout its children in a vertical or horizontal stack. The gap between each item in the stack can be customized.
  * This allows for layouting children in a consistent way without needing to manually add margins or padding.
  */
-declare const Stack: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement | null) & UnknownRecord;
+declare const Stack: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement | null) & {
+    [x: string]: unknown;
+};
 
 type TagProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -2230,59 +2238,4 @@ type DataCardTrendProps = {
 };
 declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => JSX.Element;
 
-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 label for the 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?: HeadingProps;
-    /**
-     * Additional props for the textarea element
-     */
-    inputProps?: InputProps;
-    /**
-     * Optional data-testid attribute for testing purposes
-     */
-    'data-testid'?: 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, inputProps, headingProps, "data-testid": 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, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+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, 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.2-beta.e9c9ab1e.5bceb43
+ * @license @wistia/ui v0.5.2
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9709,152 +9709,6 @@ 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 StyledInput = styled50(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 = css25`
-  &:has(+ :focus-within) {
-    background: var(--wui-color-bg-surface-hover);
-  }
-
-  &:hover {
-    background: var(--wui-color-bg-surface-hover);
-    cursor: pointer;
-  }
-`;
-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);
-  ${({ $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] = 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} ${dataTestId}-heading`,
-      onClick: () => handleSetEditing(true),
-      variant: "heading1",
-      children: value
-    }
-  );
-  if (editingDisabled) {
-    return HeadingComponent2;
-  }
-  if (isEditing || forceEditing) {
-    return /* @__PURE__ */ jsx213(
-      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__ */ 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,
@@ -9873,7 +9727,6 @@ export {
   DataCardTrend,
   DataCards,
   Divider,
-  EditableHeading,
   Ellipsis,
   Form,
   FormErrorSummary,