@wistia/ui 0.22.6 → 0.22.8

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.22.6
+ * @license @wistia/ui v0.22.8
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -22,7 +22,7 @@ import { Content as Content$1, Root as Root$1, Trigger as Trigger$1 } from "@rad
 import { Item, Root as Root$2 } from "@radix-ui/react-radio-group";
 import { differenceEuclidean, easingSmootherstep, formatHex, interpolate, modeHsv, modeLrgb, modeRgb, parseHex, useMode, wcagContrast } from "culori/fn";
 import { Item as Item$1, Root as Root$3 } from "@radix-ui/react-toggle-group";
-import { Close, Content as Content$2, PopoverArrow, Portal as Portal$1, Root as Root$4, Trigger as Trigger$2 } from "@radix-ui/react-popover";
+import { Anchor, Close, Content as Content$2, PopoverArrow as PopoverArrow$1, Portal as Portal$1, Root as Root$4, Trigger as Trigger$2 } from "@radix-ui/react-popover";
 import { Range, Root as Root$5, Thumb, Track } from "@radix-ui/react-slider";
 import * as Ariakit from "@ariakit/react";
 import { matchSorter } from "match-sorter";
@@ -1410,7 +1410,7 @@ const noOpFn = () => {};
 //#endregion
 //#region src/private/hooks/useEvent/useEvent.ts
 const isEventTargetSupported = (eventTarget) => Boolean(typeof eventTarget === "object" && eventTarget?.addEventListener);
-const useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}) => {
+const useEvent = (eventName, eventHandler, eventTarget = typeof document !== "undefined" ? window : void 0, eventOptions = {}) => {
 	const savedEventHandler = useRef(void 0);
 	const savedEventOptions = useRef(void 0);
 	useEffect(() => {
@@ -1906,9 +1906,11 @@ const buttonBaseStyles = css`
   font-weight: var(--button-typography-weight);
   line-height: var(--button-typography-line-height);
   padding: var(--button-padding-vertical) var(--button-padding-horizontal);
-  background: var(--button-color-bg);
+  background-color: var(--button-color-bg);
   color: var(--button-color-text);
-  transition: background-color var(--wui-motion-duration-01) var(--wui-motion-ease);
+  transition:
+    background-color var(--wui-motion-duration-01) var(--wui-motion-ease),
+    box-shadow var(--wui-motion-duration-01) var(--wui-motion-ease);
 
   /* This ensure that the icon is the corect color when the style is solid or the button is disabled */
   && {
@@ -1920,16 +1922,6 @@ const buttonBaseStyles = css`
     }
   }
 
-  &:hover,
-  &.force-state-hover {
-    background: var(--button-color-bg-hover);
-  }
-
-  &:active,
-  &.force-state-active {
-    background: var(--button-color-bg-active);
-  }
-
   &:focus {
     outline: none;
   }
@@ -1938,16 +1930,27 @@ const buttonBaseStyles = css`
   &.force-state-focus {
     --wui-button-focus-color: var(--wui-color-focus-ring);
 
-    background: var(--button-color-bg-hover);
+    background-color: var(--button-color-bg-hover);
     box-shadow:
       inset 0 0 0 2px var(--wui-button-focus-color),
-      inset 0 0 0 3px var(--wui-color-bg-app);
+      inset 0 0 0 3px var(--wui-color-bg-app),
+      inset 0 0 0 5px var(--button-color-border, transparent);
 
     &[aria-disabled='true'] {
       --wui-button-focus-color: var(--wui-color-focus-ring-disabled);
     }
   }
 
+  &:hover:not([aria-disabled='true']),
+  &.force-state-hover {
+    background-color: var(--button-color-bg-hover);
+  }
+
+  &:active:not([aria-disabled='true']),
+  &.force-state-active {
+    background-color: var(--button-color-bg-active);
+  }
+
   &[aria-disabled='true'] {
     ${css`
   --button-color-bg: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
@@ -8326,6 +8329,13 @@ const StyledInputContainer = styled.div`
     transform: translateY(-50%);
   }
 
+  /* Presentational icons shouldn't swallow clicks meant for the input.
+     Scoped to svg so interactive decorations (e.g. IconButton) still work. */
+  svg.wui-input-left-icon,
+  svg.wui-input-right-icon {
+    pointer-events: none;
+  }
+
   &:has(.wui-input-left-icon) input,
   &:has(.wui-input-left-icon) textarea {
     padding-left: 32px;
@@ -11548,10 +11558,12 @@ const keyToString = (key) => {
 		case "ArrowUp": return "↑";
 		case "Alt": return "Alt";
 		case "Cmd":
-		case "Meta":
-			if (/Mac|iPhone|iPad/.test(window.navigator.userAgent)) return "⌘";
-			if (window.navigator.userAgent.includes("Win")) return "⊞";
+		case "Meta": {
+			const userAgent = typeof document !== "undefined" ? window.navigator.userAgent : "";
+			if (/Mac|iPhone|iPad/.test(userAgent)) return "⌘";
+			if (userAgent.includes("Win")) return "⊞";
 			return "^";
+		}
 		case "Ctrl": return "Ctrl";
 		case "Option": return "⌥";
 		case "Shift": return "⇧";
@@ -12331,13 +12343,112 @@ const ModalCallout = ({ title, image, children }) => {
 };
 ModalCallout.displayName = "ModalCallout_UI";
 //#endregion
-//#region src/private/helpers/getControls/getControlProps.tsx
-const getControlProps = (isOpen, onOpenChange) => {
-	return isNotNil(onOpenChange) && isNotNil(isOpen) ? {
-		open: isOpen,
-		onOpenChange
-	} : {};
-};
+//#region src/components/Popover/PopoverRoot.tsx
+/**
+* The root of a composable popover. Wrap `PopoverTrigger` (or `PopoverAnchor`)
+* and `PopoverContent` inside it.
+*
+* For the common "button opens a panel" case, prefer the bundled `Popover`.
+*/
+const PopoverRoot = ({ isOpen, ...props }) => /* @__PURE__ */ jsx(Root$4, {
+	...props,
+	...isOpen !== void 0 ? { open: isOpen } : {}
+});
+PopoverRoot.displayName = "PopoverRoot_UI";
+//#endregion
+//#region src/components/Popover/PopoverTrigger.tsx
+/**
+* The button that toggles the popover open and closed. By default it renders a
+* `<button>` wrapping its children; pass `asChild` to merge the trigger
+* behavior onto a single child element (e.g. a `Button` or `IconButton`).
+*/
+const PopoverTrigger = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Trigger$2, {
+	ref: forwardedRef,
+	...props
+}));
+PopoverTrigger.displayName = "PopoverTrigger_UI";
+//#endregion
+//#region src/components/Popover/PopoverPortal.tsx
+/**
+* Portals the popover content out of the DOM hierarchy of its trigger so it can
+* escape clipping ancestors (`overflow: hidden`, transformed containers, etc.).
+*/
+const PopoverPortal = (props) => /* @__PURE__ */ jsx(Portal$1, { ...props });
+PopoverPortal.displayName = "PopoverPortal_UI";
+//#endregion
+//#region src/components/Popover/PopoverContent.tsx
+const StyledContent$1 = styled(Content$2)`
+  z-index: var(--wui-zindex-popover);
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  ${({ $unstyled }) => !$unstyled && css`
+      border-radius: var(--wui-border-radius-02);
+      padding: var(--wui-space-04);
+      max-width: var(--wui-popover-max-width);
+      max-height: var(--wui-popover-max-height);
+      background-color: var(--wui-color-bg-surface);
+      box-shadow: var(--wui-elevation-01);
+      border: 1px solid var(--wui-color-border);
+      overflow: auto;
+    `}
+
+  [data-wui-popover-close] {
+    position: absolute;
+    top: var(--wui-space-02);
+    right: var(--wui-space-02);
+  }
+`;
+const DEFAULT_SIDE_OFFSET = 8;
+const DEFAULT_MAX_WIDTH = "320px";
+const DEFAULT_MAX_HEIGHT = "auto";
+/**
+* The styled popover surface. Place inside a `PopoverRoot` (typically wrapped
+* in a `PopoverPortal`). Forwards all Radix Content props, including
+* dismissal/focus event handlers such as `onPointerDownOutside`,
+* `onOpenAutoFocus`, and `onCloseAutoFocus`.
+*/
+const PopoverContent = forwardRef(({ colorScheme = "inherit", unstyled = false, maxWidth = DEFAULT_MAX_WIDTH, maxHeight = DEFAULT_MAX_HEIGHT, sideOffset = DEFAULT_SIDE_OFFSET, style, ...props }, forwardedRef) => {
+	return /* @__PURE__ */ jsx(StyledContent$1, {
+		ref: forwardedRef,
+		$colorScheme: colorScheme,
+		$unstyled: unstyled,
+		sideOffset,
+		style: {
+			"--wui-popover-max-width": maxWidth,
+			"--wui-popover-max-height": maxHeight,
+			...style
+		},
+		...props
+	});
+});
+PopoverContent.displayName = "PopoverContent_UI";
+//#endregion
+//#region src/components/Popover/PopoverClose.tsx
+/**
+* An element that closes the popover when activated. Defaults to a `<button>`;
+* pass `asChild` to merge the close behavior onto a single child element. For
+* a pre-styled icon close button, use `PopoverCloseButton`.
+*/
+const PopoverClose = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Close, {
+	ref: forwardedRef,
+	...props
+}));
+PopoverClose.displayName = "PopoverClose_UI";
+//#endregion
+//#region src/components/Popover/PopoverCloseButton.tsx
+/**
+* A pre-styled close button intended to be placed inside a `PopoverContent`.
+* For a custom close control, use `PopoverClose` directly.
+*/
+const PopoverCloseButton = ({ label = "Close" } = {}) => /* @__PURE__ */ jsx(PopoverClose, {
+	asChild: true,
+	children: /* @__PURE__ */ jsx(IconButton, {
+		"data-wui-popover-close": true,
+		label,
+		variant: "ghost",
+		children: /* @__PURE__ */ jsx(Icon, { type: "close" })
+	})
+});
+PopoverCloseButton.displayName = "PopoverCloseButton_UI";
 //#endregion
 //#region src/components/Popover/PopoverArrow.tsx
 const StyledPath = styled.path`
@@ -12377,8 +12488,8 @@ const StyledCircle = styled.circle`
       `}
   }
 `;
-const PopoverArrow$1 = ({ isAnimated }) => {
-	return /* @__PURE__ */ jsx(PopoverArrow, {
+const PopoverArrow = ({ isAnimated }) => {
+	return /* @__PURE__ */ jsx(PopoverArrow$1, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs("svg", {
 			fill: "none",
@@ -12408,61 +12519,38 @@ const PopoverArrow$1 = ({ isAnimated }) => {
 		})
 	});
 };
-PopoverArrow$1.displayName = "PopoverArrow_UI";
+PopoverArrow.displayName = "PopoverArrow_UI";
 //#endregion
 //#region src/components/Popover/Popover.tsx
-const StyledContent$1 = styled(Content$2)`
-  z-index: var(--wui-zindex-popover);
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  ${({ $unstyled }) => !$unstyled && css`
-      border-radius: var(--wui-border-radius-02);
-      padding: var(--wui-space-04);
-      max-width: var(--wui-popover-max-width, 320px);
-      max-height: var(--wui-popover-max-height, auto);
-      background-color: var(--wui-color-bg-surface);
-      box-shadow: var(--wui-elevation-01);
-      border: 1px solid var(--wui-color-border);
-      overflow: auto;
-    `}
-
-  [data-wui-popover-close] {
-    position: absolute;
-    top: var(--wui-space-02);
-    right: var(--wui-space-02);
-  }
-`;
 /**
 * Displays rich content in a portal, triggered by a button.
+*
+* For more control — custom anchor, access to event handlers like
+* `onPointerDownOutside`, no injected close button, etc. — compose the
+* primitives directly: `PopoverRoot`, `PopoverTrigger`, `PopoverAnchor`,
+* `PopoverPortal`, `PopoverContent`, `PopoverClose`.
 */
-const Popover = ({ children, trigger, isOpen = false, hideCloseButton = false, maxWidth = "320px", maxHeight = "auto", onOpenChange, unstyled = false, withArrow = false, isAnimated = false, colorScheme = "inherit", style, ...props }) => {
+const Popover = ({ children, trigger, isOpen, hideCloseButton = false, maxWidth, maxHeight, onOpenChange, unstyled = false, withArrow = false, isAnimated = false, colorScheme = "inherit", style, ...props }) => {
 	const sideOffset = withArrow ? -24 : 8;
-	const mergedStyle = {
-		"--wui-popover-max-width": maxWidth,
-		"--wui-popover-max-height": maxHeight,
-		...style
-	};
-	return /* @__PURE__ */ jsxs(Root$4, {
-		...getControlProps(isOpen, onOpenChange),
-		children: [/* @__PURE__ */ jsx(Trigger$2, {
+	return /* @__PURE__ */ jsxs(PopoverRoot, {
+		...isOpen !== void 0 ? {
+			isOpen,
+			onOpenChange
+		} : {},
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children: trigger
-		}), /* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsxs(StyledContent$1, {
-			$colorScheme: colorScheme,
+		}), /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsxs(PopoverContent, {
+			colorScheme,
+			...maxHeight !== void 0 ? { maxHeight } : {},
+			...maxWidth !== void 0 ? { maxWidth } : {},
 			sideOffset,
+			unstyled,
 			...props,
-			$unstyled: unstyled,
-			style: mergedStyle,
+			style,
 			children: [
-				!hideCloseButton && /* @__PURE__ */ jsx(Close, {
-					asChild: true,
-					children: /* @__PURE__ */ jsx(IconButton, {
-						"data-wui-popover-close": true,
-						label: "Close",
-						variant: "ghost",
-						children: /* @__PURE__ */ jsx(Icon, { type: "close" })
-					})
-				}),
-				withArrow ? /* @__PURE__ */ jsx(PopoverArrow$1, { isAnimated }) : null,
+				!hideCloseButton && /* @__PURE__ */ jsx(PopoverCloseButton, {}),
+				withArrow ? /* @__PURE__ */ jsx(PopoverArrow, { isAnimated }) : null,
 				/* @__PURE__ */ jsx("div", { children })
 			]
 		}) })]
@@ -12470,6 +12558,18 @@ const Popover = ({ children, trigger, isOpen = false, hideCloseButton = false, m
 };
 Popover.displayName = "Popover_UI";
 //#endregion
+//#region src/components/Popover/PopoverAnchor.tsx
+/**
+* Positions the popover relative to an element other than the trigger. Useful
+* when the element the user interacts with (e.g. a text input) is separate
+* from what the popover attaches to.
+*/
+const PopoverAnchor = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Anchor, {
+	ref: forwardedRef,
+	...props
+}));
+PopoverAnchor.displayName = "PopoverAnchor_UI";
+//#endregion
 //#region src/components/ProgressBar/ProgressBar.tsx
 const ProgressBarWrapper = styled.div`
   --progress-bar-height: 8px;
@@ -14416,6 +14516,6 @@ const WistiaLogo = ({ description = void 0, height = 100, hoverColor = void 0, h
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
 //#endregion
-export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, isKeyboardKey, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
+export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, isKeyboardKey, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
 
 //# sourceMappingURL=index.js.map