@wistia/ui 0.6.37 → 0.6.38-beta.6e33df45.29fe2a2

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { ReactNode, LegacyRef, MutableRefObject, RefCallback, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, ForwardedRef, Ref, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from 'react';
+import react__default, { ReactNode, LegacyRef, MutableRefObject, RefCallback, Dispatch, SetStateAction, RefObject, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, ForwardedRef, Ref, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from 'react';
 export * from 'use-file-picker/types';
 export { useFilePicker, useImperativeFilePicker } from 'use-file-picker';
 export { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from 'use-file-picker/validators';
@@ -104,6 +104,9 @@ declare const useLocalStorage: <T, _>(key: Parameters<SetItemType>[0], initialVa
 
 declare const useLockBodyScroll: (locked: boolean) => void;
 
+type EventType = 'focusin' | 'focusout' | 'mousedown' | 'mouseup' | 'touchend' | 'touchstart';
+declare const useOnClickOutside: (ref: RefObject<HTMLElement | null | undefined>, handler: (event: Event) => unknown, eventTypes?: EventType | EventType[]) => void;
+
 type MediaQueryBooleans = {
     isXlAndUp: boolean;
     isLgAndUp: boolean;
@@ -2319,12 +2322,13 @@ type PopoverProps = ContentProps & PopoverControlProps & {
      * If true, the popover will use the unstyled Content component instead of StyledContent
      */
     unstyled?: boolean;
+    colorScheme?: ColorSchemeTypes;
 };
 /**
  * Displays rich content in a portal, triggered by a button.
  */
 declare const Popover: {
-    ({ children, trigger, isOpen, hideCloseButton, onOpenChange, unstyled, ...props }: PopoverProps): JSX.Element;
+    ({ children, trigger, isOpen, hideCloseButton, onOpenChange, unstyled, colorScheme, ...props }: PopoverProps): JSX.Element;
     displayName: string;
 };
 
@@ -3028,4 +3032,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, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, 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, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useLocalStorage, useLockBodyScroll, 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, 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, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, 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, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, useToast, useWindowSize };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { ReactNode, LegacyRef, MutableRefObject, RefCallback, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, ForwardedRef, Ref, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from 'react';
+import react__default, { ReactNode, LegacyRef, MutableRefObject, RefCallback, Dispatch, SetStateAction, RefObject, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, ForwardedRef, Ref, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from 'react';
 export * from 'use-file-picker/types';
 export { useFilePicker, useImperativeFilePicker } from 'use-file-picker';
 export { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from 'use-file-picker/validators';
@@ -104,6 +104,9 @@ declare const useLocalStorage: <T, _>(key: Parameters<SetItemType>[0], initialVa
 
 declare const useLockBodyScroll: (locked: boolean) => void;
 
+type EventType = 'focusin' | 'focusout' | 'mousedown' | 'mouseup' | 'touchend' | 'touchstart';
+declare const useOnClickOutside: (ref: RefObject<HTMLElement | null | undefined>, handler: (event: Event) => unknown, eventTypes?: EventType | EventType[]) => void;
+
 type MediaQueryBooleans = {
     isXlAndUp: boolean;
     isLgAndUp: boolean;
@@ -2319,12 +2322,13 @@ type PopoverProps = ContentProps & PopoverControlProps & {
      * If true, the popover will use the unstyled Content component instead of StyledContent
      */
     unstyled?: boolean;
+    colorScheme?: ColorSchemeTypes;
 };
 /**
  * Displays rich content in a portal, triggered by a button.
  */
 declare const Popover: {
-    ({ children, trigger, isOpen, hideCloseButton, onOpenChange, unstyled, ...props }: PopoverProps): JSX.Element;
+    ({ children, trigger, isOpen, hideCloseButton, onOpenChange, unstyled, colorScheme, ...props }: PopoverProps): JSX.Element;
     displayName: string;
 };
 
@@ -3028,4 +3032,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, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, 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, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useLocalStorage, useLockBodyScroll, 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, 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, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, 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, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.37
+ * @license @wistia/ui v0.6.38-beta.6e33df45.29fe2a2
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2086,6 +2086,35 @@ var useLockBodyScroll = (locked) => {
   }, [locked]);
 };
 
+// src/hooks/useOnClickOutside/useOnClickOutside.ts
+import { useEffect as useEffect3 } from "react";
+var useOnClickOutside = (ref, handler, eventTypes = ["mousedown", "touchend"]) => {
+  useEffect3(() => {
+    const listener = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    if (Array.isArray(eventTypes)) {
+      eventTypes.forEach((eventType) => {
+        document.addEventListener(eventType, listener);
+      });
+    } else {
+      document.addEventListener(eventTypes, listener);
+    }
+    return () => {
+      if (Array.isArray(eventTypes)) {
+        eventTypes.forEach((eventType) => {
+          document.removeEventListener(eventType, listener);
+        });
+      } else {
+        document.removeEventListener(eventTypes, listener);
+      }
+    };
+  }, [ref, handler, eventTypes]);
+};
+
 // src/hooks/useMq/useMq.ts
 import { isBoolean } from "@wistia/type-guards";
 
@@ -6995,7 +7024,7 @@ var ActionButton = forwardRef3(
 ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState5, useMemo as useMemo3, useEffect as useEffect3 } from "react";
+import { useState as useState5, useMemo as useMemo3, useEffect as useEffect4 } from "react";
 import { isNil as isNil8 } from "@wistia/type-guards";
 import styled8 from "styled-components";
 
@@ -7128,7 +7157,7 @@ var Avatar = ({
   ...otherProps
 }) => {
   const [imageLoadState, setImageLoadState] = useState5("loading");
-  useEffect3(() => {
+  useEffect4(() => {
     setImageLoadState("loading");
   }, [imageUrl]);
   const handleImageLoad = () => {
@@ -7927,9 +7956,9 @@ var Checkbox = forwardRef7(
 Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
-import { Children as Children3, cloneElement as cloneElement3, useCallback as useCallback5, useEffect as useEffect4 } from "react";
+import { Children as Children3, cloneElement as cloneElement3, useCallback as useCallback5, useEffect as useEffect5 } from "react";
 var ClickRegion = ({ children, targetRef }) => {
-  useEffect4(() => {
+  useEffect5(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
       targetRef.current.setAttribute("data-click-region-target-link", "");
     } else if (targetRef.current && targetRef.current.tagName === "BUTTON") {
@@ -10180,14 +10209,14 @@ import styled45 from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-import { useRef as useRef8, useEffect as useEffect5 } from "react";
+import { useRef as useRef8, useEffect as useEffect6 } from "react";
 import { isNotNil as isNotNil18 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef8(null);
-  useEffect5(() => {
+  useEffect6(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     return () => {
       if (isNotNil18(previouslyFocusedRef.current)) {
         setTimeout(() => {
@@ -10391,6 +10420,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 // src/components/Popover/Popover.tsx
 import { jsx as jsx244, jsxs as jsxs31 } from "react/jsx-runtime";
 var StyledContent2 = styled48(Content2)`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${({ $unstyled }) => !$unstyled && css29`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
@@ -10413,6 +10443,7 @@ var Popover = ({
   hideCloseButton = false,
   onOpenChange,
   unstyled = false,
+  colorScheme = "inherit",
   ...props
 }) => {
   return /* @__PURE__ */ jsxs31(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
@@ -10420,6 +10451,7 @@ var Popover = ({
     /* @__PURE__ */ jsx244(Portal, { children: /* @__PURE__ */ jsxs31(
       StyledContent2,
       {
+        $colorScheme: colorScheme,
         sideOffset: 8,
         ...props,
         $unstyled: unstyled,
@@ -10829,7 +10861,7 @@ var SegmentedControl = forwardRef20(
 SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-import { forwardRef as forwardRef21, useEffect as useEffect6, useRef as useRef9 } from "react";
+import { forwardRef as forwardRef21, useEffect as useEffect7, useRef as useRef9 } from "react";
 import styled53, { css as css32 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil22 } from "@wistia/type-guards";
@@ -10874,6 +10906,7 @@ var segmentedControlItemStyles = css32`
   &[data-state='active'] {
     color: var(--wui-color-text-selected);
     cursor: default;
+    transition: none;
 
     svg path {
       fill: var(--wui-color-icon-selected);
@@ -10909,7 +10942,7 @@ var SegmentedControlItem = forwardRef21(
         event.preventDefault();
       }
     };
-    useEffect6(() => {
+    useEffect7(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -11477,7 +11510,7 @@ var TabList = ({
 TabList.displayName = "TabList";
 
 // src/components/Tabs/TabItem.tsx
-import { forwardRef as forwardRef25, useEffect as useEffect7, useRef as useRef10 } from "react";
+import { forwardRef as forwardRef25, useEffect as useEffect8, useRef as useRef10 } from "react";
 import styled66 from "styled-components";
 import { Trigger as RadixTab } from "@radix-ui/react-tabs";
 import { isNotNil as isNotNil23 } from "@wistia/type-guards";
@@ -11509,7 +11542,7 @@ var TabItem = forwardRef25(
     const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
     const buttonRef = useRef10(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
-    useEffect7(() => {
+    useEffect8(() => {
       const buttonElem = buttonRef.current;
       if (!buttonElem) {
         return void 0;
@@ -12112,6 +12145,7 @@ export {
   useLocalStorage,
   useLockBodyScroll,
   useMq,
+  useOnClickOutside,
   useToast,
   useWindowSize
 };