@wistia/ui 0.10.2-beta.6ea9f134.e1e41c3 → 0.10.2

package/dist/index.d.mts

@@ -3303,36 +3303,4 @@ declare const List: {
     displayName: string;
 };
 
-type ComboboxProps = {
-    /**
-     * If true, the combox will fill the width of its parent
-     */
-    fullWidth?: boolean;
-    /**
-     * The options to display in the combobox
-     */
-    children: ReactNode;
-    /**
-     * The placeholder text for the combobox input
-     */
-    placeholder?: string;
-    /**
-     * The function to call when the search value changes.
-     */
-    onSearchValueChange: (value: string) => void;
-    /**
-     * The search value of the combobox input
-     */
-    searchValue: string;
-    /**
-     * vent that fires when a value is selected
-     */
-    onChange: (value: string[]) => void;
-    /**
-     * The selected values of the combobox
-     */
-    value: string[];
-};
-declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchValueChange, children, fullWidth, }: ComboboxProps) => react_jsx_runtime.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, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, type ComboboxProps, 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, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, 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, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, 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, useElementObserver, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, 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, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, 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, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, 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, useElementObserver, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.d.ts

@@ -3303,36 +3303,4 @@ declare const List: {
     displayName: string;
 };
 
-type ComboboxProps = {
-    /**
-     * If true, the combox will fill the width of its parent
-     */
-    fullWidth?: boolean;
-    /**
-     * The options to display in the combobox
-     */
-    children: ReactNode;
-    /**
-     * The placeholder text for the combobox input
-     */
-    placeholder?: string;
-    /**
-     * The function to call when the search value changes.
-     */
-    onSearchValueChange: (value: string) => void;
-    /**
-     * The search value of the combobox input
-     */
-    searchValue: string;
-    /**
-     * vent that fires when a value is selected
-     */
-    onChange: (value: string[]) => void;
-    /**
-     * The selected values of the combobox
-     */
-    value: string[];
-};
-declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchValueChange, children, fullWidth, }: ComboboxProps) => react_jsx_runtime.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, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, type ComboboxProps, 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, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, 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, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, 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, useElementObserver, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, 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, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, 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, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, 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, useElementObserver, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.2-beta.6ea9f134.e1e41c3
+ * @license @wistia/ui v0.10.2
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -13597,253 +13597,6 @@ var List = ({
   return null;
 };
 List.displayName = "List";
-
-// src/components/Combobox/Combobox.tsx
-import * as Ariakit from "@ariakit/react";
-import {
-  useMemo as useMemo11,
-  useRef as useRef17,
-  useState as useState18,
-  useTransition,
-  useEffect as useEffect13,
-  Children as Children6,
-  isValidElement as isValidElement2
-} from "react";
-import { matchSorter } from "match-sorter";
-import styled78 from "styled-components";
-import { jsx as jsx277, jsxs as jsxs50 } from "react/jsx-runtime";
-var ComboboxWapper = styled78.div`
-  ${inputCss};
-  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
-  padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
-  background-color: var(--wui-input-color-bg);
-  border: none;
-  outline: 1px solid var(--wui-input-color-border);
-  outline-offset: -1px;
-  border-radius: var(--wui-input-border-radius);
-  font-size: var(--wui-input-font-size);
-  line-height: var(--wui-input-line-height);
-  font-weight: var(--wui-input-font-weight);
-  color: var(--wui-input-color-text);
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: var(--wui-space-01);
-
-  > * {
-    width: min-content !important;
-  }
-
-  &:focus-within {
-    outline: 2px solid var(--wui-input-color-border-focus);
-    outline-offset: -2px;
-  }
-
-  input {
-    outline: 0 none;
-    border: 0 none;
-
-    &::placeholder {
-      color: var(--wui-input-placeholder);
-      opacity: 1;
-    }
-
-    &:focus {
-      outline: 0;
-    }
-
-    &[aria-invalid='true'] {
-      outline-color: var(--wui-input-color-border-error);
-    }
-
-    &:disabled {
-      outline-color: var(--wui-color-border-disabled);
-      background-color: var(--wui-color-bg-surface-disabled);
-    }
-  }
-`;
-var ComboboxInput = styled78(Ariakit.Combobox)`
-  appearance: none;
-  padding: 0;
-  width: 100%;
-  border: 0 none;
-  flex: 1;
-
-  &[data-focus-visible] {
-    outline-style: solid;
-  }
-
-  &[data-active-item] {
-    outline-width: 2px;
-  }
-`;
-var ComboboxPopover = styled78(Ariakit.Popover)`
-  --wui-combobox-content-border: var(--wui-color-border);
-  --wui-combobox-content-bg: var(--wui-color-bg-surface);
-  --wui-combobox-content-border-radius: var(--wui-border-radius-02);
-  --wui-combobox-option-padding: var(--wui-space-02);
-  --wui-combobox-option-inner-gap: var(--wui-space-03);
-  --wui-combobox-option-bg-hover: var(--wui-color-bg-surface-hover);
-
-  border-radius: var(--wui-border-radius-02);
-  padding: var(--wui-space-04);
-  max-height: var(--wui-popover-max-height, 300px);
-  background-color: var(--wui-color-bg-surface);
-  box-shadow: var(--wui-elevation-01);
-  border: 1px solid var(--wui-color-border);
-  position: relative;
-  z-index: 50;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  overscroll-behavior: contain;
-
-  &[aria-busy='true'] {
-    --item-opacity: 0.5;
-  }
-`;
-var ComboboxItem2 = styled78(Ariakit.ComboboxItem)`
-  ${variantStyleMap2.body3};
-  display: flex;
-  padding: var(--wui-combobox-option-padding);
-  gap: var(--wui-combobox-option-inner-gap);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  border-radius: var(--wui-border-radius-01);
-  align-items: center;
-  cursor: pointer;
-
-  &:hover,
-  &:focus-visible {
-    background-color: var(--wui-combobox-option-bg-hover);
-    outline: none;
-  }
-
-  &[aria-disabled='true'] {
-    color: var(--wui-color-text-disabled);
-  }
-
-  &[aria-disabled='true']:hover {
-    background-color: transparent;
-  }
-`;
-var NoResults = styled78.div`
-  gap: var(--wui-space-02);
-`;
-var POPOVER_WIDTH_OFFSET = 20;
-var extractOptions = (children) => {
-  const options = {};
-  Children6.forEach(children, (child) => {
-    if (isValidElement2(child) && "value" in child.props && "children" in child.props) {
-      options[child.props.value] = child.props.children ?? child.props.value;
-    }
-  });
-  return options;
-};
-var Combobox2 = ({
-  placeholder,
-  value = [],
-  onChange,
-  searchValue,
-  onSearchValueChange,
-  children,
-  fullWidth = true
-}) => {
-  const [isPending, startTransition] = useTransition();
-  const [wrapperWidth, setWrapperWidth] = useState18("auto");
-  const comboboxWrapperRef = useRef17(null);
-  const options = useMemo11(() => extractOptions(children), [children]);
-  useEffect13(() => {
-    const comboboxWrapper = comboboxWrapperRef.current;
-    if (comboboxWrapper) {
-      const updateWidthVariable = () => {
-        const { width } = comboboxWrapper.getBoundingClientRect();
-        setWrapperWidth(`${width - POPOVER_WIDTH_OFFSET}px`);
-      };
-      updateWidthVariable();
-      window.addEventListener("resize", updateWidthVariable);
-      return () => {
-        window.removeEventListener("resize", updateWidthVariable);
-      };
-    }
-    return () => null;
-  }, []);
-  const handleRemoveValue = (valueToRemove) => {
-    onChange(value.filter((val) => val !== valueToRemove));
-  };
-  const matches = useMemo11(() => {
-    return matchSorter(Object.keys(options), searchValue);
-  }, [options, searchValue]);
-  return /* @__PURE__ */ jsxs50(
-    Ariakit.ComboboxProvider,
-    {
-      selectedValue: value,
-      setSelectedValue: onChange,
-      setValue: (nextValue) => {
-        startTransition(() => {
-          onSearchValueChange(nextValue);
-        });
-      },
-      children: [
-        /* @__PURE__ */ jsxs50(
-          ComboboxWapper,
-          {
-            ref: comboboxWrapperRef,
-            $fullWidth: fullWidth,
-            children: [
-              value.map((selectedValue) => /* @__PURE__ */ jsx277(
-                Tag,
-                {
-                  href: "https://example.com",
-                  label: selectedValue,
-                  onClickRemove: () => handleRemoveValue(selectedValue),
-                  onClickRemoveLabel: `Remove ${selectedValue}`
-                },
-                selectedValue
-              )),
-              /* @__PURE__ */ jsx277(ComboboxInput, { placeholder })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs50(
-          ComboboxPopover,
-          {
-            "aria-busy": isPending,
-            gutter: 8,
-            sameWidth: false,
-            style: {
-              width: wrapperWidth
-            },
-            children: [
-              matches.map((match) => /* @__PURE__ */ jsxs50(
-                ComboboxItem2,
-                {
-                  className: "combobox-item",
-                  focusOnHover: true,
-                  value: match,
-                  children: [
-                    /* @__PURE__ */ jsx277(
-                      Icon,
-                      {
-                        size: "sm",
-                        style: {
-                          opacity: value.includes(match) ? 1 : 0
-                        },
-                        type: "checkmark"
-                      }
-                    ),
-                    options[match]
-                  ]
-                },
-                match
-              )),
-              !matches.length && /* @__PURE__ */ jsx277(NoResults, { children: "No results found" })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
 export {
   ActionButton,
   Avatar,
@@ -13863,7 +13616,6 @@ export {
   CollapsibleContent,
   CollapsibleTrigger,
   ColorSchemeWrapper,
-  Combobox2 as Combobox,
   DataCard,
   DataCardTrend,
   DataCards,