@wistia/ui 0.8.15 → 0.8.16

package/dist/index.d.mts

@@ -94,6 +94,15 @@ type UseFocusTrapOptions = {
 };
 declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
 
+type HoverProps = {
+    onFocus: () => void;
+    onMouseEnter: () => void;
+    onBlur: () => void;
+    onMouseLeave: () => void;
+    onMouseMove?: () => void;
+};
+declare const useIsHovered: () => [boolean, HoverProps, (hovered: boolean) => void];
+
 type AddEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
 type RemoveEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
 declare const useEvent: <T extends Event>(eventName: Parameters<AddEventListenerType>[0], eventHandler: (event: T) => unknown, eventTarget?: unknown, eventOptions?: Parameters<RemoveEventListenerType>[2]) => void;
@@ -3210,4 +3219,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-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, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, 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, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, useToast, useWindowSize };

package/dist/index.d.ts

@@ -94,6 +94,15 @@ type UseFocusTrapOptions = {
 };
 declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
 
+type HoverProps = {
+    onFocus: () => void;
+    onMouseEnter: () => void;
+    onBlur: () => void;
+    onMouseLeave: () => void;
+    onMouseMove?: () => void;
+};
+declare const useIsHovered: () => [boolean, HoverProps, (hovered: boolean) => void];
+
 type AddEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
 type RemoveEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
 declare const useEvent: <T extends Event>(eventName: Parameters<AddEventListenerType>[0], eventHandler: (event: T) => unknown, eventTarget?: unknown, eventOptions?: Parameters<RemoveEventListenerType>[2]) => void;
@@ -3210,4 +3219,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-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, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, 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, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.15
+ * @license @wistia/ui v0.8.16
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2245,6 +2245,27 @@ var useFocusTrap = (active = true, options = {}) => {
   return setRef;
 };
 
+// src/hooks/useIsHovered/useIsHovered.ts
+import { useState as useState4 } from "react";
+var useIsHovered = () => {
+  const [isHovered, setIsHovered] = useState4(false);
+  const onFocus = () => setIsHovered(true);
+  const onMouseEnter = () => setIsHovered(true);
+  const onMouseMove = () => setIsHovered(true);
+  const onBlur = () => setIsHovered(false);
+  const onMouseLeave = () => setIsHovered(false);
+  const hoverProps = {
+    onFocus,
+    onMouseEnter,
+    onBlur,
+    onMouseLeave
+  };
+  if (!isHovered) {
+    hoverProps.onMouseMove = onMouseMove;
+  }
+  return [isHovered, hoverProps, setIsHovered];
+};
+
 // src/hooks/useKey/useKey.ts
 import { useCallback as useCallback5 } from "react";
 
@@ -2321,9 +2342,9 @@ var useKey = (key, eventHandler, { eventName = "keydown", eventTarget, eventOpti
 };
 
 // src/hooks/useLocalStorage/useLocalStorage.ts
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 var useLocalStorage = (key, initialValue, storage = window.localStorage) => {
-  const [storedValue, setStoredValue] = useState4(() => {
+  const [storedValue, setStoredValue] = useState5(() => {
     try {
       const item = storage.getItem(key);
       return item !== null && !!item ? JSON.parse(item) : initialValue;
@@ -2367,7 +2388,7 @@ var useLockBodyScroll = (locked) => {
 import { isBoolean } from "@wistia/type-guards";
 
 // src/hooks/useWindowSize/useWindowSize.ts
-import { useState as useState5, useLayoutEffect as useLayoutEffect2 } from "react";
+import { useState as useState6, useLayoutEffect as useLayoutEffect2 } from "react";
 import { debounce } from "throttle-debounce";
 
 // src/private/helpers/isClient/isClient.ts
@@ -2375,7 +2396,7 @@ var isClient = () => typeof window !== "undefined" && typeof document !== "undef
 
 // src/hooks/useWindowSize/useWindowSize.ts
 var useWindowSize = (interval = 0) => {
-  const [dimensions, setDimensions] = useState5({
+  const [dimensions, setDimensions] = useState6({
     width: isClient() ? window.innerWidth : 0,
     height: isClient() ? window.innerHeight : 0
   });
@@ -7302,7 +7323,7 @@ var ActionButton = forwardRef3(
 ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState6, useMemo as useMemo3, useEffect as useEffect6 } from "react";
+import { useState as useState7, useMemo as useMemo3, useEffect as useEffect6 } from "react";
 import { isNil as isNil8, isNotNil as isNotNil8 } from "@wistia/type-guards";
 import styled9 from "styled-components";
 
@@ -7510,7 +7531,7 @@ var Avatar = ({
   onImageLoad,
   ...props
 }) => {
-  const [imageLoadState, setImageLoadState] = useState6("loading");
+  const [imageLoadState, setImageLoadState] = useState7("loading");
   useEffect6(() => {
     setImageLoadState("loading");
   }, [imageUrl]);
@@ -8954,7 +8975,7 @@ Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
 import styled31, { css as css27 } from "styled-components";
-import { useState as useState7, useRef as useRef6 } from "react";
+import { useState as useState8, useRef as useRef6 } from "react";
 
 // src/components/Tooltip/Tooltip.tsx
 import {
@@ -9312,10 +9333,10 @@ var EditableHeading = ({
   __forceEditing = false,
   editingDisabled = false
 }) => {
-  const [isEditing, setIsEditing] = useState7(false);
-  const [value, setValue] = useState7(children);
-  const [previousValue, setPreviousValue] = useState7(children);
-  const [headingHeight, setHeadingHeight] = useState7("60");
+  const [isEditing, setIsEditing] = useState8(false);
+  const [value, setValue] = useState8(children);
+  const [previousValue, setPreviousValue] = useState8(children);
+  const [headingHeight, setHeadingHeight] = useState8("60");
   const headingRef = useRef6(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) return;
@@ -9395,7 +9416,7 @@ var EditableHeading = ({
 };
 
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef12, useRef as useRef7, useMemo as useMemo4, createContext as createContext3, useState as useState8, useId as useId2 } from "react";
+import { forwardRef as forwardRef12, useRef as useRef7, useMemo as useMemo4, createContext as createContext3, useState as useState9, useId as useId2 } from "react";
 import styled33 from "styled-components";
 import { isNotUndefined as isNotUndefined7, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
@@ -9455,8 +9476,8 @@ var FormComponent = ({
   fullWidth = false,
   ...props
 }, forwardedRef) => {
-  const [errors, setErrors] = useState8({});
-  const [hasSubmitted, setHasSubmitted] = useState8(false);
+  const [errors, setErrors] = useState9({});
+  const [hasSubmitted, setHasSubmitted] = useState9(false);
   const innerRef = useRef7();
   const ref = forwardedRef ?? innerRef;
   const autoId = useId2();
@@ -9533,11 +9554,11 @@ FormComponent.displayName = "Form";
 var Form = forwardRef12(FormComponent);
 
 // src/components/Form/useFormState.tsx
-import { useCallback as useCallback8, useState as useState9 } from "react";
+import { useCallback as useCallback8, useState as useState10 } from "react";
 var useFormState = (action, initialData = {}) => {
-  const [data, setData] = useState9(initialData);
-  const [isPending, setIsPending] = useState9(false);
-  const [error, setError] = useState9(null);
+  const [data, setData] = useState10(initialData);
+  const [isPending, setIsPending] = useState10(false);
+  const [error, setError] = useState10(null);
   const formAction = useCallback8(
     async (nextFormData) => {
       if (nextFormData === null) {
@@ -9929,7 +9950,7 @@ IconButton.displayName = "IconButton";
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
 import styled38 from "styled-components";
-import { forwardRef as forwardRef14, useEffect as useEffect8, useState as useState10 } from "react";
+import { forwardRef as forwardRef14, useEffect as useEffect8, useState as useState11 } from "react";
 import { isFunction as isFunction3 } from "@wistia/type-guards";
 import { jsx as jsx230 } from "react/jsx-runtime";
 var StyledInput2 = styled38(Input)`
@@ -9944,7 +9965,7 @@ var StyledInput2 = styled38(Input)`
 var COPY_SUCCESS_DURATION = 2e3;
 var InputClickToCopy = forwardRef14(
   ({ value, onCopy, ...props }, ref) => {
-    const [isCopied, setIsCopied] = useState10(false);
+    const [isCopied, setIsCopied] = useState11(false);
     useEffect8(() => {
       if (isCopied) {
         const timeout = setTimeout(() => {
@@ -10183,7 +10204,7 @@ var MenuLabel = ({ children, ...props }) => {
 MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
-import { useState as useState11 } from "react";
+import { useState as useState12 } from "react";
 import styled43 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
@@ -10369,7 +10390,7 @@ var SubMenu = ({
   ...props
 }) => {
   const { isSmAndUp } = useMq();
-  const [isExpanded, setIsExpanded] = useState11(false);
+  const [isExpanded, setIsExpanded] = useState12(false);
   const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ jsxs27(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs27(SubMenuTrigger, { ...props, children: [
@@ -10733,6 +10754,11 @@ var BackdropComponent = styled47.div`
   position: fixed;
   z-index: var(--wui-zindex-backdrop);
 
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    opacity: 1;
+  }
+
   @keyframes backdropShow {
     from {
       opacity: 0;
@@ -11153,13 +11179,13 @@ import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil14 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
-import { createContext as createContext7, useContext as useContext6, useMemo as useMemo8, useState as useState12 } from "react";
+import { createContext as createContext7, useContext as useContext6, useMemo as useMemo8, useState as useState13 } from "react";
 import { jsx as jsx248 } from "react/jsx-runtime";
 var SelectedItemStyleContext = createContext7(null);
 var SelectedItemStyleProvider = ({
   children
 }) => {
-  const [selectedItemMeasurements, setSelectedItemMeasurements] = useState12(null);
+  const [selectedItemMeasurements, setSelectedItemMeasurements] = useState13(null);
   const selectedItemIndicatorStyle = useMemo8(
     () => selectedItemMeasurements != null ? {
       height: `${selectedItemMeasurements.offsetHeight}px`,
@@ -11879,7 +11905,7 @@ var TableRow = ({ children, ...props }) => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { forwardRef as forwardRef27, useState as useState13 } from "react";
+import { forwardRef as forwardRef27, useState as useState14 } from "react";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
 import { isNotNil as isNotNil29, isNil as isNil15 } from "@wistia/type-guards";
 import styled69 from "styled-components";
@@ -12078,7 +12104,7 @@ var Tabs = forwardRef27(
     ...props
   }, ref) => {
     const tabItems = extractTabItems(children);
-    const [internalSelectedValue, setInternalSelectedValue] = useState13(defaultSelectedValue);
+    const [internalSelectedValue, setInternalSelectedValue] = useState14(defaultSelectedValue);
     const modeProps = defaultSelectedValue !== void 0 ? {
       defaultValue: defaultSelectedValue,
       onValueChange: setInternalSelectedValue
@@ -12909,6 +12935,7 @@ export {
   useFocusTrap,
   useFormState,
   useImperativeFilePicker,
+  useIsHovered,
   useKey,
   useLocalStorage,
   useLockBodyScroll,