@wistia/ui 0.14.34 → 0.14.35

package/dist/index.d.mts

@@ -1578,6 +1578,10 @@ type ComboboxProps = {
      * The options to display in the combobox
      */
     children: ReactNode;
+    /**
+     * Function to render the selected values. Receives the selected values and a function to remove a value.
+     */
+    displayValues?: (values: string[], onRemove: (value: string) => void) => ReactNode;
     /**
      * The placeholder text for the combobox input
      */
@@ -1599,7 +1603,7 @@ type ComboboxProps = {
      */
     value: string[];
 };
-declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchValueChange, children, fullWidth, }: ComboboxProps) => react_jsx_runtime.JSX.Element;
+declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchValueChange, displayValues, children, fullWidth, }: ComboboxProps) => react_jsx_runtime.JSX.Element;
 
 type ContextMenuProps = {
     children: ReactNode;

package/dist/index.d.ts

@@ -1578,6 +1578,10 @@ type ComboboxProps = {
      * The options to display in the combobox
      */
     children: ReactNode;
+    /**
+     * Function to render the selected values. Receives the selected values and a function to remove a value.
+     */
+    displayValues?: (values: string[], onRemove: (value: string) => void) => ReactNode;
     /**
      * The placeholder text for the combobox input
      */
@@ -1599,7 +1603,7 @@ type ComboboxProps = {
      */
     value: string[];
 };
-declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchValueChange, children, fullWidth, }: ComboboxProps) => react_jsx_runtime.JSX.Element;
+declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchValueChange, displayValues, children, fullWidth, }: ComboboxProps) => react_jsx_runtime.JSX.Element;
 
 type ContextMenuProps = {
     children: ReactNode;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.34
+ * @license @wistia/ui v0.14.35
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1474,12 +1474,12 @@ var toastConfig = {
 var ToastProvider = () => /* @__PURE__ */ jsx2(Toaster, { ...toastConfig });
 
 // src/providers/UIProvider/UIProvider.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var UIProviderNestingContext = createContext2(false);
 var UIProvider = ({ children }) => {
   const isNested = useContext(UIProviderNestingContext);
   if (isNested) {
-    console.warn("UIProvider is nested. Only one instance of UIProvider.");
+    return /* @__PURE__ */ jsx3(Fragment, { children });
   }
   return /* @__PURE__ */ jsx3(UIProviderNestingContext.Provider, { value: true, children: /* @__PURE__ */ jsx3(AriaLiveProvider, { children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
     /* @__PURE__ */ jsx3(GlobalStyle, {}),
@@ -2793,6 +2793,7 @@ var StyledToast = styled2.div`
   svg {
     height: 16px;
     width: 16px;
+    flex: 0 0 16px;
   }
 `;
 var Action = ({ actionButton }) => {
@@ -3014,6 +3015,7 @@ var buttonBaseStyles = css16`
       color: var(--button-color-icon);
       width: var(--button-icon-size);
       height: var(--button-icon-size);
+      flex: 0 0 var(--button-icon-size);
     }
   }
 
@@ -7062,6 +7064,7 @@ var StyledIcon = styled3.svg`
   --wui-icon-size: var(--wui-icon-inline-size, ${({ $height }) => $height}px);
   --wui-icon-vertical-align: middle;
 
+  flex: 0 0 var(--wui-icon-size);
   height: var(--wui-icon-size);
   width: var(--wui-icon-size);
 `;
@@ -7152,6 +7155,7 @@ var StyledLink = styled4.a`
     svg {
       width: 14px;
       height: 14px;
+      flex: 0 0 14px;
     }
   }
 `;
@@ -7253,7 +7257,7 @@ var Link = forwardRef(
 Link.displayName = "Link_UI";
 
 // src/components/Button/Button.tsx
-import { Fragment, jsx as jsx198, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx198, jsxs as jsxs9 } from "react/jsx-runtime";
 var isLink2 = (props) => isNotUndefined4(props.href);
 var StyledButton = styled5.button`
   ${buttonResetCss}
@@ -7290,7 +7294,7 @@ var ButtonContent = ({
   children,
   fullWidth = false
 }) => {
-  return /* @__PURE__ */ jsxs9(Fragment, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
     isLoading ? /* @__PURE__ */ jsx198(StyledButtonLoading, { children: /* @__PURE__ */ jsx198(Icon, { type: "spinner" }) }) : null,
     /* @__PURE__ */ jsxs9(
       StyledButtonContent,
@@ -7452,6 +7456,7 @@ var StyledMainIcon = styled6.div`
     svg {
       width: 24px;
       height: 24px;
+      flex: 0 0 24px;
     }
   }
 `;
@@ -7478,6 +7483,7 @@ var StyledSecondaryIcon = styled6.div`
     svg {
       width: 24px;
       height: 24px;
+      flex: 0 0 24px;
     }
   }
 `;
@@ -7813,6 +7819,7 @@ var StyledBadge = styled10.div`
       color: var(--wui-color-icon);
       height: 12px;
       width: 12px;
+      flex: 0 0 12px;
     }
   }
 `;
@@ -8517,7 +8524,7 @@ var IconButton = forwardRef8(
 IconButton.displayName = "IconButton_UI";
 
 // src/components/Banner/Banner.tsx
-import { Fragment as Fragment2, jsx as jsx209, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx209, jsxs as jsxs13 } from "react/jsx-runtime";
 var BREAKPOINT_WIDTH = 600;
 var VERTICAL_BREAKPOINT_WIDTH = 284;
 var MIN_IMAGE_WIDTH = 400;
@@ -8633,7 +8640,7 @@ var Banner = ({
                   justifyContent: "center",
                   children: [
                     isNotNil13(headingText) ? /* @__PURE__ */ jsxs13(Heading, { variant: headingVariant, children: [
-                      iconPosition === "inline" && /* @__PURE__ */ jsxs13(Fragment2, { children: [
+                      iconPosition === "inline" && /* @__PURE__ */ jsxs13(Fragment3, { children: [
                         icon,
                         " "
                       ] }),
@@ -8682,7 +8689,7 @@ Banner.displayName = "Banner_UI";
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 import { Children as Children2 } from "react";
 import styled17 from "styled-components";
-import { Fragment as Fragment3, jsx as jsx210, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx210, jsxs as jsxs14 } from "react/jsx-runtime";
 var StyledBreadcrumbs = styled17.nav`
   display: flex;
   align-items: center;
@@ -8701,7 +8708,7 @@ var Breadcrumbs = ({ children, ...props }) => {
     crumbs = crumbs.slice(-1);
   }
   const crumbMaxWidth = Math.floor(100 / crumbs.length) - BUFFER_WIDTH;
-  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs14(Fragment4, { children: [
     /* @__PURE__ */ jsx210("style", { type: "text/css", children: `
        [data-wui-breadcrumbs] {
           container-type: inline-size;
@@ -8729,7 +8736,7 @@ Breadcrumbs.displayName = "Breadcrumbs_UI";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
 import styled18 from "styled-components";
-import { Fragment as Fragment4, jsx as jsx211, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx211, jsxs as jsxs15 } from "react/jsx-runtime";
 var BreadcrumbContent = styled18.span`
   overflow: hidden;
   white-space: nowrap;
@@ -8739,7 +8746,7 @@ var BreadcrumbContent = styled18.span`
   flex: 0;
 `;
 var Breadcrumb = ({ icon, href, children, ...props }) => {
-  return /* @__PURE__ */ jsxs15(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment5, { children: [
     /* @__PURE__ */ jsx211(
       Button,
       {
@@ -9520,7 +9527,7 @@ CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
 import styled30 from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
 import { isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { Fragment as Fragment5, jsx as jsx225, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx225, jsxs as jsxs19 } from "react/jsx-runtime";
 var ClampedContent = styled30.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
@@ -9535,7 +9542,7 @@ var CollapsibleContent = ({ clamp, children }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx225(Content, { children: /* @__PURE__ */ jsxs19(Fragment5, { children: [
+  return /* @__PURE__ */ jsx225(Content, { children: /* @__PURE__ */ jsxs19(Fragment6, { children: [
     children,
     " "
   ] }) });
@@ -11915,7 +11922,7 @@ import styled50 from "styled-components";
 import { forwardRef as forwardRef16 } from "react";
 import styled49 from "styled-components";
 import { isNil as isNil14, isNotNil as isNotNil19, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
-import { Fragment as Fragment6, jsx as jsx253, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx253, jsxs as jsxs33 } from "react/jsx-runtime";
 var TagLabel = styled49.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
@@ -11932,6 +11939,7 @@ var TagLabel = styled49.a`
   svg {
     height: 12px;
     width: 12px;
+    flex: 0 0 12px;
   }
 
   &:focus-visible {
@@ -12007,7 +12015,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs33(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs33(Fragment7, { children: [
     /* @__PURE__ */ jsx253(TagDivider, { $colorScheme: colorScheme }),
     /* @__PURE__ */ jsxs33(
       StyledRemoveButton,
@@ -12227,12 +12235,25 @@ var extractOptions = (children) => {
   });
   return options;
 };
+var defaultDisplayValues = (values, onRemove) => {
+  return values.map((selectedValue) => /* @__PURE__ */ jsx254(
+    Tag,
+    {
+      href: "https://example.com",
+      label: selectedValue,
+      onClickRemove: () => onRemove(selectedValue),
+      onClickRemoveLabel: `Remove ${selectedValue}`
+    },
+    selectedValue
+  ));
+};
 var Combobox2 = ({
   placeholder,
   value = [],
   onChange,
   searchValue,
   onSearchValueChange,
+  displayValues = defaultDisplayValues,
   children,
   fullWidth = true
 }) => {
@@ -12278,17 +12299,14 @@ var Combobox2 = ({
             ref: comboboxWrapperRef,
             $fullWidth: fullWidth,
             children: [
-              value.map((selectedValue) => /* @__PURE__ */ jsx254(
-                Tag,
+              displayValues(value, handleRemoveValue),
+              /* @__PURE__ */ jsx254(
+                ComboboxInput,
                 {
-                  href: "https://example.com",
-                  label: selectedValue,
-                  onClickRemove: () => handleRemoveValue(selectedValue),
-                  onClickRemoveLabel: `Remove ${selectedValue}`
-                },
-                selectedValue
-              )),
-              /* @__PURE__ */ jsx254(ComboboxInput, { placeholder })
+                  autoSelect: true,
+                  placeholder
+                }
+              )
             ]
           }
         ),
@@ -12599,6 +12617,7 @@ var StyledLeftIconContainer = styled53.div`
     svg {
       height: var(--menu-item-left-icon-size);
       width: var(--menu-item-left-icon-size);
+      flex: 0 0 var(--menu-item-left-icon-size);
     }
   }
 `;
@@ -12610,6 +12629,7 @@ var StyledRightIconContainer = styled53.div`
     svg {
       height: var(--menu-item-right-icon-size);
       width: var(--menu-item-right-icon-size);
+      flex: 0 0 var(--menu-item-right-icon-size);
     }
   }
 `;
@@ -13481,7 +13501,7 @@ Divider.displayName = "Divider_UI";
 // src/components/EditableHeading/EditableHeading.tsx
 import styled62, { css as css33 } from "styled-components";
 import { useState as useState18, useRef as useRef16 } from "react";
-import { Fragment as Fragment7, jsx as jsx274, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx274, jsxs as jsxs42 } from "react/jsx-runtime";
 var StyledInput = styled62(Input)`
   &:not([rows]) {
     min-height: unset;
@@ -13601,7 +13621,7 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs42(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs42(Fragment8, { children: [
     /* @__PURE__ */ jsx274(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
     /* @__PURE__ */ jsx274(ScreenReaderOnly, { children: /* @__PURE__ */ jsx274(
       "button",
@@ -14140,7 +14160,7 @@ var FormErrorSummary = ({ description }) => {
 import { Children as Children10, cloneElement as cloneElement8, useContext as useContext13 } from "react";
 import styled66 from "styled-components";
 import { isArray as isArray3, isNotNil as isNotNil28, isNotUndefined as isNotUndefined12, isUndefined as isUndefined4 } from "@wistia/type-guards";
-import { Fragment as Fragment8, jsx as jsx281, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx281, jsxs as jsxs46 } from "react/jsx-runtime";
 var StyledFormField = styled66.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-spacing-inline: var(--wui-space-02);
@@ -14281,7 +14301,7 @@ var FormField = ({
         !isIntegratedLabel && /* @__PURE__ */ jsx281(Label, { htmlFor: computedId, children: label }),
         isNotNil28(description) ? /* @__PURE__ */ jsx281(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement8(children, childProps),
-        isNotNil28(computedError) ? /* @__PURE__ */ jsxs46(Fragment8, { children: [
+        isNotNil28(computedError) ? /* @__PURE__ */ jsxs46(Fragment9, { children: [
           /* @__PURE__ */ jsx281("div", {}),
           /* @__PURE__ */ jsx281(
             ErrorMessages,
@@ -16132,6 +16152,7 @@ var segmentedControlItemStyles = css44`
   svg {
     height: 16px;
     width: 16px;
+    flex: 0 0 16px;
 
     /* add right margin if there's a label and an icon */
     ${({ $hasLabel }) => $hasLabel ? "margin-right: var(--wui-space-01)" : ""}
@@ -16886,6 +16907,7 @@ var StyledThumbnailBadge = styled104.div`
   svg {
     height: 12px;
     width: 12px;
+    flex: 0 0 12px;
 
     path {
       color: var(--wui-color-icon-on-fill);