@sproutsocial/seeds-react-menu 1.8.6 → 1.10.0

package/dist/index.d.mts

@@ -521,13 +521,14 @@ declare const SubmenuItem: {
 
 interface TypeListboxToggleButtonProps extends TypeMenuToggleButtonProps {
     invalid?: boolean;
+    size?: "small" | "default" | "large";
 }
 declare const StyledListboxToggleButton: styled_components.StyledComponent<(props: TypeMenuToggleButtonProps) => react_jsx_runtime.JSX.Element, styled_components.DefaultTheme, TypeListboxToggleButtonProps, never>;
 interface TypeStyledChevronProps {
     $isOpen?: boolean;
     invalid?: boolean;
 }
-declare const ListboxToggleButton: ({ children, ...buttonProps }: TypeListboxToggleButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ListboxToggleButton: ({ children, size, ...buttonProps }: TypeListboxToggleButtonProps) => react_jsx_runtime.JSX.Element;
 
 type TypeBaseAutocompleteProps = TypeHigherOrderComponentProps & TypeDownshiftComboboxProps & {
     /** A function that can be passed to override the default filtering logic */

package/dist/index.d.ts

@@ -521,13 +521,14 @@ declare const SubmenuItem: {
 
 interface TypeListboxToggleButtonProps extends TypeMenuToggleButtonProps {
     invalid?: boolean;
+    size?: "small" | "default" | "large";
 }
 declare const StyledListboxToggleButton: styled_components.StyledComponent<(props: TypeMenuToggleButtonProps) => react_jsx_runtime.JSX.Element, styled_components.DefaultTheme, TypeListboxToggleButtonProps, never>;
 interface TypeStyledChevronProps {
     $isOpen?: boolean;
     invalid?: boolean;
 }
-declare const ListboxToggleButton: ({ children, ...buttonProps }: TypeListboxToggleButtonProps) => react_jsx_runtime.JSX.Element;
+declare const ListboxToggleButton: ({ children, size, ...buttonProps }: TypeListboxToggleButtonProps) => react_jsx_runtime.JSX.Element;
 
 type TypeBaseAutocompleteProps = TypeHigherOrderComponentProps & TypeDownshiftComboboxProps & {
     /** A function that can be passed to override the default filtering logic */

package/dist/index.js

@@ -1621,6 +1621,40 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 var StyledListboxToggleButton = (0, import_styled_components10.default)(
   MenuToggleButton
 )`
+  background-color: ${(props) => props.theme.colors.form.background.base};
+  border: 1px solid ${(props) => props.theme.colors.form.border.base};
+  border-radius: ${(props) => props.theme.radii[500]};
+  transition: border-color ${(props) => props.theme.duration.fast}
+      ${(props) => props.theme.easing.ease_in},
+    box-shadow ${(props) => props.theme.duration.fast}
+      ${(props) => props.theme.easing.ease_in};
+  font-weight: ${(props) => props.theme.fontWeights.normal};
+  &:active {
+    transform: none;
+  }
+
+  padding: ${(props) => {
+  switch (props.size) {
+    case "large":
+      return `${props.theme.space[400]} ${props.theme.space[400]} ${props.theme.space[400]} ${props.theme.space[400]}`;
+    case "small":
+      return `${props.theme.space[200]} ${props.theme.space[200]} ${props.theme.space[200]} ${props.theme.space[200]}`;
+    case "default":
+    default:
+      return `${props.theme.space[300]} ${props.theme.space[300]} ${props.theme.space[300]} ${props.theme.space[300]}`;
+  }
+}};
+  font-size: ${(props) => {
+  switch (props.size) {
+    case "large":
+      return props.theme.typography[300].fontSize;
+    case "small":
+    case "default":
+    default:
+      return props.theme.typography[200].fontSize;
+  }
+}};
+
   ${(props) => props.invalid && import_styled_components10.css`
       border-color: ${(props2) => props2.theme.colors.form.border.error};
     `}
@@ -1642,13 +1676,22 @@ var StyledInnerButton = import_styled_components10.default.div`
 `;
 var ListboxToggleButton = ({
   children,
+  size = "default",
   ...buttonProps
 }) => {
   const { isOpen } = useMenuToggleContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledListboxToggleButton, { appearance: "secondary", ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StyledInnerButton, { children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_seeds_react_icon3.Icon, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    StyledListboxToggleButton,
+    {
+      appearance: "unstyled",
+      size,
+      ...buttonProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StyledInnerButton, { children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_seeds_react_icon3.Icon, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
+      ] })
+    }
+  );
 };
 
 // src/ActionMenu/ActionMenu.tsx