@wistia/ui 0.14.36 → 0.14.37

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.36
+ * @license @wistia/ui v0.14.37
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7382,6 +7382,7 @@ var Button = forwardRef2(
         type: "button",
         ...props,
         ...commonProps,
+        "data-wui-button": true,
         children: unstyled ? children : /* @__PURE__ */ jsx198(
           ButtonContent,
           {
@@ -11016,7 +11017,7 @@ import { useCallback as useCallback13, useEffect as useEffect11, useRef as useRe
 import { parseHex as parseHex2 } from "culori/fn";
 
 // src/components/Input/Input.tsx
-import { forwardRef as forwardRef15, cloneElement as cloneElement4, useRef as useRef9 } from "react";
+import { isValidElement as isValidElement2, forwardRef as forwardRef15, cloneElement as cloneElement4, useRef as useRef9 } from "react";
 import styled44, { css as css29 } from "styled-components";
 import { isNil as isNil13, isNotNil as isNotNil18, isRecord as isRecord4 } from "@wistia/type-guards";
 
@@ -11172,14 +11173,14 @@ var Input = forwardRef15(
     if (isNil13(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ jsx247(Icon, { type: "search" });
     }
-    if (isNotNil18(leftIconToDisplay)) {
+    if (isNotNil18(leftIconToDisplay) && isValidElement2(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement4(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if (isNotNil18(rightIconToDisplay)) {
+    if (isNotNil18(rightIconToDisplay) && isValidElement2(rightIconToDisplay)) {
       rightIconToDisplay = cloneElement4(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
@@ -11913,7 +11914,7 @@ import {
   useTransition,
   useEffect as useEffect15,
   Children as Children5,
-  isValidElement as isValidElement2
+  isValidElement as isValidElement3
 } from "react";
 import { matchSorter } from "match-sorter";
 import styled50 from "styled-components";
@@ -12229,7 +12230,7 @@ var ComboboxOption = ({ value, children }) => {
 var extractOptions = (children) => {
   const options = {};
   Children5.forEach(children, (child) => {
-    if (isValidElement2(child) && "value" in child.props && "children" in child.props) {
+    if (isValidElement3(child) && "value" in child.props && "children" in child.props) {
       options[child.props.value] = child.props.children ?? child.props.value;
     }
   });
@@ -12676,10 +12677,10 @@ var MenuItemButton = forwardRef18(({ children, appearance, command, icon, ...pro
       fullWidth: true,
       unstyled: true,
       children: [
-        props.leftIcon ? /* @__PURE__ */ jsx257(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        isNotNil21(props.leftIcon) ? /* @__PURE__ */ jsx257(StyledLeftIconContainer, { children: props.leftIcon }) : null,
         /* @__PURE__ */ jsx257(StyledLabelAndDescriptionContainer, { children }),
         isNotNil21(badge) || isNotNil21(command) ? /* @__PURE__ */ jsx257(StyledBadgeContainer, { children: badge ?? command }) : null,
-        props.rightIcon ? /* @__PURE__ */ jsx257(StyledRightIconContainer, { children: props.rightIcon }) : null
+        isNotNil21(props.rightIcon) ? /* @__PURE__ */ jsx257(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
   );
@@ -17608,6 +17609,76 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ jsx324("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
+
+// src/components/SplitButton/SplitButton.tsx
+import styled109 from "styled-components";
+import { isNotNil as isNotNil45 } from "@wistia/type-guards";
+import { jsx as jsx325, jsxs as jsxs70 } from "react/jsx-runtime";
+var StyledSplitButton = styled109.span`
+  white-space: nowrap;
+
+  > [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 = "Select an option",
+  menuIcon = /* @__PURE__ */ jsx325(Icon, { type: "caret-down" }),
+  menuItems,
+  disabled = false,
+  colorScheme = "default",
+  variant = "solid",
+  secondaryAction,
+  size = "md",
+  unstyled = false,
+  menuProps = {},
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs70(StyledSplitButton, { children: [
+    /* @__PURE__ */ jsx325(
+      Button,
+      {
+        colorScheme,
+        disabled,
+        size,
+        unstyled,
+        variant,
+        ...props,
+        children
+      }
+    ),
+    isNotNil45(menuItems) && /* @__PURE__ */ jsx325(
+      Menu,
+      {
+        ...menuProps,
+        disabled,
+        trigger: /* @__PURE__ */ jsx325(
+          IconButton,
+          {
+            colorScheme,
+            disabled,
+            label: menuLabel,
+            size,
+            unstyled,
+            variant,
+            children: menuIcon
+          }
+        ),
+        children: menuItems
+      }
+    ),
+    isNotNil45(secondaryAction) && secondaryAction
+  ] });
+};
+SplitButton.displayName = "SplitButton_UI";
 export {
   ActionButton,
   Avatar,
@@ -17712,6 +17783,7 @@ export {
   SelectOption,
   SelectOptionGroup,
   Slider,
+  SplitButton,
   Stack,
   SubMenu,
   Switch,