@telus-uds/components-base 2.0.0 → 2.0.2

package/lib/Button/ButtonBase.js

@@ -1,40 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _propTypes2 = _interopRequireDefault(require("./propTypes"));
-
-var _utils = require("../utils");
-
-var _Icon = require("../Icon");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.linkProps, _utils.viewProps]);
-
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider';
+import buttonPropTypes from './propTypes';
+import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter } from '../utils';
+import { IconText } from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps]);
 const getOuterBorderOffset = _ref => {
   let {
     outerBorderGap = 0,
@@ -42,10 +17,8 @@ const getOuterBorderOffset = _ref => {
   } = _ref;
   return outerBorderGap + outerBorderWidth;
 };
-
 const selectOuterContainerStyles = _ref2 => {
   let {
-    alignSelf,
     opacity,
     outerBorderColor,
     outerBorderWidth,
@@ -54,10 +27,14 @@ const selectOuterContainerStyles = _ref2 => {
     outerBackgroundColor
   } = _ref2;
   return {
-    alignSelf,
+    ...Platform.select({
+      native: {
+        alignSelf: 'flex-start'
+      }
+    }),
     backgroundColor: outerBackgroundColor,
     opacity,
-    ...(0, _ThemeProvider.applyOuterBorder)({
+    ...applyOuterBorder({
       outerBorderGap,
       outerBorderWidth,
       outerBorderColor,
@@ -65,12 +42,12 @@ const selectOuterContainerStyles = _ref2 => {
     })
   };
 };
-
-const selectOuterWidthStyles = _ref3 => {
+const selectOuterSizeStyles = _ref3 => {
   let {
     outerBorderGap,
     outerBorderWidth,
-    width
+    width,
+    height
   } = _ref3;
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
@@ -78,44 +55,44 @@ const selectOuterWidthStyles = _ref3 => {
     outerBorderGap,
     outerBorderWidth
   });
-  const widthStyles = {};
-
+  const sizeStyles = {};
+  // Apply width/height tokens: number === pixels, string === explicit units e.g. %
+  if (typeof width === 'number' && width > 0 || typeof height === 'number' && height > 0) {
+    sizeStyles.width = width ? width + outerBorderOffset * 2 : width;
+    sizeStyles.height = height ? height + outerBorderOffset * 2 : height;
+    return sizeStyles;
+  }
   if (!width) {
-    return { ...widthStyles,
+    return {
+      ...sizeStyles,
       // Wrap content, stopping a flex parent's default align-items: stretch stretching focus ring beyond content
-      ..._Platform.default.select({
+      ...Platform.select({
         // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
         web: {
           display: 'inline-flex'
         }
       })
     };
-  } // Apply width tokens: number === pixels, string === explicit units e.g. %
-
-
-  if (typeof width === 'number') {
-    widthStyles.width = width + outerBorderOffset * 2;
-    return widthStyles;
-  } // Ensure the negative margin doesn't make element off-centre
-
-
-  if (_Platform.default.OS === 'web') {
-    widthStyles.width = "calc(".concat(width, " + ").concat(outerBorderOffset * 2, "px)");
-    return widthStyles;
-  } // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
-
+  }
 
+  // Ensure the negative margin doesn't make element off-centre
+  if (Platform.OS === 'web') {
+    sizeStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
+    sizeStyles.height = `calc(${height} + ${outerBorderOffset * 2}px)`;
+    return sizeStyles;
+  }
+  // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
   if (width === '100%') {
-    widthStyles.flexGrow = 1;
-    return widthStyles;
-  } // Slight offset not such a concern if % width < 100%, as the button isn't centered anyway.
-  // If centering support is added (e.g. alignSelf: center), set marginHorizontal 0 when centered.
-
+    sizeStyles.flexGrow = 1;
+    return sizeStyles;
+  }
 
-  widthStyles.width = width;
-  return widthStyles;
+  // Slight offset not such a concern if % width < 100%, as the button isn't centered anyway.
+  // If centering support is added (e.g. alignSelf: center), set marginHorizontal 0 when centered.
+  sizeStyles.width = width;
+  sizeStyles.height = height;
+  return sizeStyles;
 };
-
 const selectInnerContainerStyles = _ref4 => {
   let {
     backgroundColor,
@@ -125,38 +102,64 @@ const selectInnerContainerStyles = _ref4 => {
     paddingBottom,
     shadow,
     borderWidth,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth,
     minWidth
   } = _ref4;
-
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
-  const offsetBorder = value => typeof value === 'number' && typeof borderWidth === 'number' ? Math.max(0, value - borderWidth) : value;
-
+  const offsetBorder = _ref5 => {
+    let {
+      value,
+      borderSize = borderWidth
+    } = _ref5;
+    return typeof value === 'number' && typeof borderSize === 'number' ? Math.max(0, value - borderSize) : value;
+  };
   return {
-    paddingLeft: offsetBorder(paddingLeft),
-    paddingRight: offsetBorder(paddingRight),
-    paddingTop: offsetBorder(paddingTop),
-    paddingBottom: offsetBorder(paddingBottom),
+    paddingLeft: offsetBorder({
+      value: paddingLeft,
+      borderSize: borderLeftWidth
+    }),
+    paddingRight: offsetBorder({
+      value: paddingRight,
+      borderSize: borderRightWidth
+    }),
+    paddingTop: offsetBorder({
+      value: paddingTop,
+      borderSize: borderTopWidth
+    }),
+    paddingBottom: offsetBorder({
+      value: paddingBottom,
+      borderSize: borderBottomWidth
+    }),
     backgroundColor,
     minWidth,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+    ...applyShadowToken(shadow)
   };
 };
-
-const selectBorderStyles = _ref5 => {
+const selectBorderStyles = _ref6 => {
   let {
     borderColor,
     borderWidth,
-    borderRadius
-  } = _ref5;
+    borderRadius,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth
+  } = _ref6;
   return {
     borderColor,
     borderWidth,
-    borderRadius
+    borderRadius,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth
   };
 };
-
-const selectTextStyles = (_ref6, themeOptions) => {
+const selectTextStyles = (_ref7, themeOptions) => {
   let {
     fontSize,
     color,
@@ -166,8 +169,8 @@ const selectTextStyles = (_ref6, themeOptions) => {
     textAlign,
     textLine,
     textLineStyle
-  } = _ref6;
-  return (0, _ThemeProvider.applyTextStyles)({
+  } = _ref7;
+  return applyTextStyles({
     fontSize,
     color,
     lineHeight,
@@ -179,36 +182,43 @@ const selectTextStyles = (_ref6, themeOptions) => {
     textDecorationStyle: textLineStyle
   });
 };
-
-const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
+const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
   let {
     accessibilityRole
-  } = _ref7;
-  return _Platform.default.select({
+  } = _ref8;
+  return Platform.select({
     web: {
       // if it would overflow the container, wraps instead
-      maxWidth: "calc(100% + ".concat(getOuterBorderOffset(themeTokens) * 2, "px)"),
+      maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      width: 'fit-content',
       outline: 'none',
       // removes the default browser :focus outline
-      ...(0, _utils.getCursorStyle)(inactive, accessibilityRole)
+      ...getCursorStyle(inactive, accessibilityRole)
     },
     default: {}
   });
 };
-
-const selectItemIconTokens = _ref8 => {
+const selectButtonStyles = _ref9 => {
+  let {
+    textAlign
+  } = _ref9;
+  return {
+    flexDirection: 'row',
+    justifyContent: textAlign
+  };
+};
+const selectItemIconTokens = _ref10 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref8;
+  } = _ref10;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
-
-const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
+const ButtonBase = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   let {
     id,
     href,
@@ -223,35 +233,29 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
     iconPosition = icon ? 'left' : undefined,
     iconProps,
     ...rawRest
-  } = _ref9;
-
+  } = _ref11;
   const {
     onPress,
     ...rest
-  } = _utils.clickProps.toPressProps(rawRest);
-
+  } = clickProps.toPressProps(rawRest);
   const extraButtonState = {
     inactive,
     selected,
     iconPosition
   };
-
-  const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, extraButtonState);
-
+  const resolveButtonTokens = pressableState => resolvePressableTokens(tokens, pressableState, extraButtonState);
   const systemProps = selectProps(rest);
-
   const getPressableStyle = pressableState => {
     const themeTokens = resolveButtonTokens(pressableState);
-    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterWidthStyles(themeTokens)];
+    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterSizeStyles(themeTokens)];
   };
-
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  } = useTheme();
+  return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     href: href,
-    onPress: _utils.linkProps.handleHref({
+    onPress: linkProps.handleHref({
       href,
       onPress
     }),
@@ -263,33 +267,44 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
       const themeTokens = resolveButtonTokens(pressableState);
       const containerStyles = selectInnerContainerStyles(themeTokens);
       const borderStyles = selectBorderStyles(themeTokens);
-      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text];
+      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text, Platform.select({
+        web: {
+          pointerEvents: 'none' // bubbles press event to parent `Pressable`
+        }
+      })];
       const iconTokens = selectItemIconTokens(themeTokens);
       const {
         iconSpace
-      } = themeTokens; // If the container has a width set, fill it instead of sizing from content.
-      // If in future we support text alignments other than center, add here.
+      } = themeTokens;
 
+      // If the container has a width set, fill it instead of sizing from content.
+      // If in future we support text alignments other than center, add here.
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
       const IconComponent = icon || themeTokens.icon;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      const rowStyles = selectButtonStyles(themeTokens);
+      return /*#__PURE__*/_jsx(View, {
         id: id,
-        style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, _Platform.default.select({
+        style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, Platform.select({
           web: {
             maxWidth: '100%',
             // ensure overflowing content wraps
             // TODO: https://github.com/telus/universal-design-system/issues/487
-            transition: 'background-color 200ms, border-color 200ms'
+            transition: 'background-color 200ms, border-color 200ms',
+            pointerEvents: 'none',
+            // bubbles press event to parent `Pressable`
+            ...rowStyles
           }
         })],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
+        children: /*#__PURE__*/_jsx(IconText, {
           icon: IconComponent,
           iconPosition: iconPosition,
-          space: iconSpace,
-          iconProps: { ...iconProps,
+          space: icon ? iconSpace : 0,
+          iconProps: {
+            ...iconProps,
             tokens: iconTokens
           },
-          children: (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({ ...(0, _utils.resolvePressableState)(pressableState, extraButtonState),
+          children: wrapStringsInText(typeof children === 'function' ? children({
+            ...resolvePressableState(pressableState, extraButtonState),
             textStyles
           }) : children, {
             style: textStyles
@@ -301,23 +316,18 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
 });
 ButtonBase.displayName = 'ButtonBase';
 ButtonBase.propTypes = {
-  id: _propTypes.default.string,
+  id: PropTypes.string,
   ...selectedSystemPropTypes,
-  ..._propTypes2.default
-};
-ButtonBase.defaultProps = {
-  id: undefined
+  ...buttonPropTypes
 };
-
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   row: {
     // Apply all button alignment horizontally; no vertical stacking within a button
-    flexDirection: 'row'
+    flexDirection: 'row',
+    justifyContent: 'center'
   },
   text: {
-    flexGrow: 1,
-    // On native but not web, flexShrink here wraps text prematurely
-    ..._Platform.default.select({
+    ...Platform.select({
       // TODO: https://github.com/telus/universal-design-system/issues/487
       web: {
         transition: 'color 200ms'
@@ -333,7 +343,4 @@ const staticStyles = _StyleSheet.default.create({
     justifyContent: 'center'
   }
 });
-
-var _default = (0, _utils.withLinkRouter)(ButtonBase);
-
-exports.default = _default;
+export default withLinkRouter(ButtonBase);

package/lib/Button/ButtonDropdown.js

@@ -1,42 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _propTypes2 = _interopRequireWildcard(require("./propTypes"));
-
-var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _utils = require("../utils");
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _StackView = require("../StackView");
-
-var _pressability = require("../utils/pressability");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import buttonPropTypes, { textAndA11yText } from './propTypes';
+import ButtonBase from './ButtonBase';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, focusHandlerProps, resolvePressableState, selectTokens, useInputValue } from '../utils';
+import Icon from '../Icon';
+import { getStackedContent } from '../StackView';
+import { getPressHandlersWithArgs } from '../utils/pressability';
+import { jsx as _jsx } from "react/jsx-runtime";
 const selectIconTokens = _ref => {
   let {
     icon,
@@ -60,7 +34,7 @@ const selectIconTokens = _ref => {
       borderRadius: iconBorderRadius,
       alignSelf: iconAlignSelf,
       padding: iconPadding,
-      ..._Platform.default.select({
+      ...Platform.select({
         // TODO: https://github.com/telus/universal-design-system/issues/487
         web: {
           transition: 'color 200ms, background 200ms'
@@ -75,8 +49,7 @@ const selectIconTokens = _ref => {
     }
   };
 };
-
-const ButtonDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+const ButtonDropdown = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     value,
     initialValue,
@@ -93,7 +66,7 @@ const ButtonDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   const {
     currentValue: isOpen,
     setValue: setIsOpen
-  } = (0, _utils.useInputValue)({
+  } = useInputValue({
     value,
     initialValue,
     onChange,
@@ -104,24 +77,21 @@ const ButtonDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     inactive,
     ...variant
   };
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, extraState);
+  const getTokens = useThemeTokensCallback('ButtonDropdown', tokens, extraState);
+  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
 
-  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState)); // Pass an object of relevant component state as first argument for any passed-in press handlers
-
-
-  const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(props, [{
+  // Pass an object of relevant component state as first argument for any passed-in press handlers
+  const pressHandlers = getPressHandlersWithArgs(props, [{
     label,
     open: isOpen
   }]);
-
   const handlePress = event => {
     if (!inactive) {
-      if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+      if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 || pressHandlers.onPress(event);
       setIsOpen(!isOpen, event);
     }
   };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+  return /*#__PURE__*/_jsx(ButtonBase, {
     ref: ref,
     ...pressHandlers,
     onPress: handlePress,
@@ -140,6 +110,7 @@ const ButtonDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       // - Icon: https://github.com/telus/universal-design-system/issues/327
       // - IconButton: https://github.com/telus/universal-design-system/issues/281
       // - Token sets: https://github.com/telus/universal-design-system/issues/782
+
       const itemTokens = getTokens(buttonState);
       const {
         iconTokens,
@@ -148,23 +119,22 @@ const ButtonDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
         iconWrapperStyle,
         icon: IconComponent
       } = selectIconTokens(itemTokens);
-      const iconContent = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      const iconContent = IconComponent ? /*#__PURE__*/_jsx(View, {
         style: iconWrapperStyle,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        children: /*#__PURE__*/_jsx(Icon, {
           icon: IconComponent,
           tokens: iconTokens
         })
       }) : null;
-
-      const childrenContent = () => typeof children === 'function' ? children({ ...(0, _utils.resolvePressableState)(buttonState, extraState),
+      const childrenContent = () => typeof children === 'function' ? children({
+        ...resolvePressableState(buttonState, extraState),
         textStyles
       }) : children;
-
-      const content = children ? childrenContent() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      const content = children ? childrenContent() : /*#__PURE__*/_jsx(Text, {
         style: textStyles,
         children: label
       });
-      return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [iconContent, content] : [content, iconContent], {
+      return getStackedContent(iconPosition === 'left' ? [iconContent, content] : [content, iconContent], {
         space: iconSpace,
         direction: 'row'
       });
@@ -172,36 +142,32 @@ const ButtonDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   });
 });
 ButtonDropdown.displayName = 'ButtonDropdown';
-ButtonDropdown.propTypes = { ..._utils.a11yProps.types,
-  ..._utils.focusHandlerProps.types,
-  ..._propTypes2.default,
-  children: _propTypes2.textAndA11yText,
-
+ButtonDropdown.propTypes = {
+  ...a11yProps.types,
+  ...focusHandlerProps.types,
+  ...buttonPropTypes,
+  children: textAndA11yText,
+  tokens: getTokensPropType('ButtonDropdown'),
   /**
    * Callback called when a controlled ButtonDropdown gets interacted with.
    */
-  onChange: _propTypes.default.func,
-
+  onChange: PropTypes.func,
   /**
    * `value` prop is being used to set the 'open' state of ButtonDropdown. Use it for
    *  controlled ButtonDropdown. For uncontrolled ButtonDropdown, use `initialValue`.
    */
-  value: _propTypes.default.bool,
-
+  value: PropTypes.bool,
   /**
    * Use `initialValue` to provide the initial value for an uncontrolled version.
    */
-  initialValue: _propTypes.default.bool,
-
+  initialValue: PropTypes.bool,
   /**
    * The label of ButtonDropdown.
    */
-  label: _propTypes.default.string,
-
+  label: PropTypes.string,
   /**
    * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
    */
-  accessibilityRole: _propTypes.default.string
+  accessibilityRole: PropTypes.string
 };
-var _default = ButtonDropdown;
-exports.default = _default;
+export default ButtonDropdown;