@wistia/ui 0.14.34 → 0.14.35-beta.1f69ebd4.a65016c

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.34
+ * @license @wistia/ui v0.14.35-beta.1f69ebd4.a65016c
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -142,6 +142,7 @@ __export(index_exports, {
   SelectOption: () => SelectOption,
   SelectOptionGroup: () => SelectOptionGroup,
   Slider: () => Slider,
+  SplitButton: () => SplitButton,
   Stack: () => Stack,
   SubMenu: () => SubMenu,
   Switch: () => Switch,
@@ -1665,7 +1666,7 @@ var UIProviderNestingContext = (0, import_react3.createContext)(false);
 var UIProvider = ({ children }) => {
   const isNested = (0, import_react3.useContext)(UIProviderNestingContext);
   if (isNested) {
-    console.warn("UIProvider is nested. Only one instance of UIProvider.");
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(UIProviderNestingContext.Provider, { value: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AriaLiveProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_tooltip.Provider, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GlobalStyle, {}),
@@ -2970,6 +2971,7 @@ var StyledToast = import_styled_components16.default.div`
   svg {
     height: 16px;
     width: 16px;
+    flex: 0 0 16px;
   }
 `;
 var Action = ({ actionButton }) => {
@@ -3191,6 +3193,7 @@ var buttonBaseStyles = import_styled_components18.css`
       color: var(--button-color-icon);
       width: var(--button-icon-size);
       height: var(--button-icon-size);
+      flex: 0 0 var(--button-icon-size);
     }
   }
 
@@ -7239,6 +7242,7 @@ var StyledIcon = import_styled_components19.default.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);
 `;
@@ -7329,6 +7333,7 @@ var StyledLink = import_styled_components20.default.a`
     svg {
       width: 14px;
       height: 14px;
+      flex: 0 0 14px;
     }
   }
 `;
@@ -7555,6 +7560,7 @@ var Button = (0, import_react23.forwardRef)(
         type: "button",
         ...props,
         ...commonProps,
+        "data-wui-button": true,
         children: unstyled ? children : /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
           ButtonContent,
           {
@@ -7629,6 +7635,7 @@ var StyledMainIcon = import_styled_components22.default.div`
     svg {
       width: 24px;
       height: 24px;
+      flex: 0 0 24px;
     }
   }
 `;
@@ -7655,6 +7662,7 @@ var StyledSecondaryIcon = import_styled_components22.default.div`
     svg {
       width: 24px;
       height: 24px;
+      flex: 0 0 24px;
     }
   }
 `;
@@ -7990,6 +7998,7 @@ var StyledBadge = import_styled_components26.default.div`
       color: var(--wui-color-icon);
       height: 12px;
       width: 12px;
+      flex: 0 0 12px;
     }
   }
 `;
@@ -12091,6 +12100,7 @@ var TagLabel = import_styled_components66.default.a`
   svg {
     height: 12px;
     width: 12px;
+    flex: 0 0 12px;
   }
 
   &:focus-visible {
@@ -12386,12 +12396,25 @@ var extractOptions = (children) => {
   });
   return options;
 };
+var defaultDisplayValues = (values, onRemove) => {
+  return values.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+    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
 }) => {
@@ -12437,17 +12460,14 @@ var Combobox2 = ({
             ref: comboboxWrapperRef,
             $fullWidth: fullWidth,
             children: [
-              value.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
-                Tag,
+              displayValues(value, handleRemoveValue),
+              /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+                ComboboxInput,
                 {
-                  href: "https://example.com",
-                  label: selectedValue,
-                  onClickRemove: () => handleRemoveValue(selectedValue),
-                  onClickRemoveLabel: `Remove ${selectedValue}`
-                },
-                selectedValue
-              )),
-              /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(ComboboxInput, { placeholder })
+                  autoSelect: true,
+                  placeholder
+                }
+              )
             ]
           }
         ),
@@ -12746,6 +12766,7 @@ var StyledLeftIconContainer = import_styled_components71.default.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);
     }
   }
 `;
@@ -12757,6 +12778,7 @@ var StyledRightIconContainer = import_styled_components71.default.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);
     }
   }
 `;
@@ -16279,6 +16301,7 @@ var segmentedControlItemStyles = import_styled_components108.css`
   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)" : ""}
@@ -16428,6 +16451,7 @@ var StyledTrigger2 = (0, import_styled_components109.default)(import_react_selec
   &:disabled {
     outline-color: var(--wui-color-border-disabled);
     background-color: var(--wui-color-bg-surface-disabled);
+    cursor: not-allowed;
   }
 
   &[data-placeholder] {
@@ -16459,42 +16483,43 @@ var Select = (0, import_react90.forwardRef)(
     onChange = () => null,
     placeholder = "Select...",
     fullWidth = false,
+    forceOpen = false,
     ...props
   }, forwardedRef) => {
     const responsiveFullWidth = useResponsiveProp(fullWidth);
-    return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
-      import_react_select.Root,
-      {
-        ...props,
-        onValueChange: onChange,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
-            StyledTrigger2,
-            {
-              ref: forwardedRef,
-              $colorScheme: colorScheme,
-              $fullWidth: responsiveFullWidth,
-              ...props,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Value, { placeholder }),
-                /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
-                  Icon,
-                  {
-                    size: "md",
-                    type: "caret-down"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(StyledContent3, { position: "popper", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(Icon, { type: "caret-up" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Viewport, { children }),
-            /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(Icon, { type: "caret-down" }) })
-          ] }) })
-        ]
-      }
-    );
+    const rootProps = {
+      ...props,
+      onValueChange: onChange
+    };
+    if (forceOpen) {
+      rootProps["open"] = true;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(import_react_select.Root, { ...rootProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
+        StyledTrigger2,
+        {
+          ref: forwardedRef,
+          $colorScheme: colorScheme,
+          $fullWidth: responsiveFullWidth,
+          ...props,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Value, { placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+              Icon,
+              {
+                size: "md",
+                type: "caret-down"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(StyledContent3, { position: "popper", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(Icon, { type: "caret-up" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.Viewport, { children }),
+        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(Icon, { type: "caret-down" }) })
+      ] }) })
+    ] });
   }
 );
 Select.displayName = "Select_UI";
@@ -17019,6 +17044,7 @@ var StyledThumbnailBadge = import_styled_components122.default.div`
   svg {
     height: 12px;
     width: 12px;
+    flex: 0 0 12px;
 
     path {
       color: var(--wui-color-icon-on-fill);
@@ -17717,6 +17743,72 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime326.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
+
+// src/components/SplitButton/SplitButton.tsx
+var import_styled_components128 = __toESM(require("styled-components"));
+var import_type_guards75 = require("@wistia/type-guards");
+var import_jsx_runtime327 = require("react/jsx-runtime");
+var StyledSplitButton = import_styled_components128.default.span`
+  > [data-wui-button='true']:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  > [data-wui-button='true']:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    display: inline-flex;
+  }
+`;
+var SplitButton = ({
+  children,
+  menuLabel,
+  menuIcon = /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(Icon, { type: "caret-down" }),
+  menuItems,
+  disabled = false,
+  colorScheme = "default",
+  variant = "solid",
+  secondaryAction,
+  size = "md",
+  unstyled = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime327.jsxs)(StyledSplitButton, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
+      Button,
+      {
+        colorScheme,
+        disabled,
+        size,
+        unstyled,
+        variant,
+        ...props,
+        children
+      }
+    ),
+    (0, import_type_guards75.isNotNil)(menuItems) && /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
+      Menu,
+      {
+        disabled,
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
+          IconButton,
+          {
+            colorScheme,
+            disabled,
+            label: menuLabel,
+            size,
+            unstyled,
+            variant,
+            children: menuIcon
+          }
+        ),
+        children: menuItems
+      }
+    ),
+    (0, import_type_guards75.isNotNil)(secondaryAction) && secondaryAction
+  ] });
+};
+SplitButton.displayName = "SplitButton_UI";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -17822,6 +17914,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
   SelectOption,
   SelectOptionGroup,
   Slider,
+  SplitButton,
   Stack,
   SubMenu,
   Switch,