@telus-uds/components-base 1.18.1 → 1.19.1

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 05 Oct 2022 21:29:58 GMT and should not be manually modified.
+This log was last generated on Fri, 14 Oct 2022 19:30:03 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.19.0
+
+Fri, 14 Oct 2022 19:30:03 GMT
+
+### Minor changes
+
+- Responsive component implementation and tests (srikanthkhari@gmail.com)
+- Add snapshot tests for base components (evander.owusu@telus.com)
+- feat: add right-side buttons to the TextInputBase (ruslan.bredikhin@nearform.com)
+- Add a `text` variant for `Button` (shahzaibkhalidmalik@outlook.com)
+- Show/Hide Previous and Next on Pagination for larger screens (tiagohldb@gmail.com)
+- Bump @telus-uds/system-constants to v1.1.0
+- Bump @telus-uds/system-theme-tokens to v2.7.0
+
+### Patches
+
+- Fix double-icon bug in Tags (alan.slater@nearform.com)
+- Make initial focus of a Carousel more intuitive when refocus is on (alan.slater@nearform.com)
+- Don't jump focus to next carousel tab on focusing first item in tabs (alan.slater@nearform.com)
+
 ## 1.18.1
 
-Wed, 05 Oct 2022 21:29:58 GMT
+Wed, 05 Oct 2022 21:32:07 GMT
 
 ### Patches
 

package/component-docs.json

@@ -35,7 +35,9 @@
         "outerBorderColor": "color",
         "outerBorderWidth": "border",
         "outerBorderGap": "size",
-        "outerBackgroundColor": "color"
+        "outerBackgroundColor": "color",
+        "textLine": "textLine",
+        "textLineStyle": "textLineStyle"
       },
       "ButtonGroup": {
         "space": "integer",
@@ -403,7 +405,8 @@
         "iconSize": "size",
         "iconDisplace": "size",
         "width": "size",
-        "textAlign": "flexJustifyContent"
+        "textAlign": "flexJustifyContent",
+        "displayLabel": "show"
       },
       "Progress": {
         "backgroundColor": "color",
@@ -821,6 +824,9 @@
         "borderWidth": "border",
         "borderColor": "color",
         "borderRadius": "radius",
+        "buttonSize": "size",
+        "buttonsGap": "size",
+        "buttonsPaddingRight": "size",
         "paddingTop": "size",
         "paddingBottom": "size",
         "paddingLeft": "size",
@@ -1344,6 +1350,13 @@
           ],
           "description": "Determines which way does the button navigate in Pagination's context",
           "type": "state"
+        },
+        "compact": {
+          "values": [
+            true
+          ],
+          "description": "Determines if the \"Next\" and \"Previous\" labels should be omitted",
+          "type": "state"
         }
       },
       "ProgressBar": {
@@ -5496,7 +5509,8 @@
                 "iconSize": "size",
                 "iconDisplace": "size",
                 "width": "size",
-                "textAlign": "flexJustifyContent"
+                "textAlign": "flexJustifyContent",
+                "displayLabel": "show"
               }
             },
             "required": false,
@@ -6409,6 +6423,81 @@
         }
       }
     },
+    "Responsive": {
+      "docs": {
+        "description": "Responsive conditionally renders children based on whether the viewport matches the provided\nmin and max viewports.\n\nIn SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and\nduring first hydration on the client side; then if the viewport is not `xs`, it re-renders\nafter hydration. This may cause a layout shift on devices other than the narrowest.",
+        "props": {
+          "min": {
+            "defaultValue": {
+              "value": "'xs'",
+              "computed": false
+            },
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'xs'",
+                  "computed": false
+                },
+                {
+                  "value": "'sm'",
+                  "computed": false
+                },
+                {
+                  "value": "'md'",
+                  "computed": false
+                },
+                {
+                  "value": "'lg'",
+                  "computed": false
+                },
+                {
+                  "value": "'xl'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": ""
+          },
+          "max": {
+            "type": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'sm'",
+                  "computed": false
+                },
+                {
+                  "value": "'md'",
+                  "computed": false
+                },
+                {
+                  "value": "'lg'",
+                  "computed": false
+                },
+                {
+                  "value": "'xl'",
+                  "computed": false
+                }
+              ]
+            },
+            "required": false,
+            "description": ""
+          },
+          "children": {
+            "type": {
+              "name": "node"
+            },
+            "required": true,
+            "description": ""
+          }
+        },
+        "attributes": {
+          "acceptsRNA11yProps": false
+        }
+      }
+    },
     "Search": {
       "docs": {
         "description": "The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.\nUse `Search` to feature autocomplete interactions.\n\nThis component includes a clear button, which will appear as text is entered and pressing it will\ncause the input's internal state value to be set to an empty string.\n\nThis component may only be used as uncontrolled, as the search value is managed within an internal state.\nYou can use the `onChange` prop to react to value changes and the `onSubmit` prop to react on search submission.\n\nUse the following props to supply additional accessibility labels for the input - `accessibilityLabel`,\nclear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.",
@@ -8763,7 +8852,9 @@
                 "outerBorderColor": "color",
                 "outerBorderWidth": "border",
                 "outerBorderGap": "size",
-                "outerBackgroundColor": "color"
+                "outerBackgroundColor": "color",
+                "textLine": "textLine",
+                "textLineStyle": "textLineStyle"
               }
             },
             "required": false,
@@ -9152,7 +9243,9 @@
                 "outerBorderColor": "color",
                 "outerBorderWidth": "border",
                 "outerBorderGap": "size",
-                "outerBackgroundColor": "color"
+                "outerBackgroundColor": "color",
+                "textLine": "textLine",
+                "textLineStyle": "textLineStyle"
               }
             },
             "required": false,
@@ -9571,17 +9664,6 @@
             "required": false,
             "description": "HTML tag to use for the Carousel item's immediate parent. Defaults to `'ul'` so that\nassistive technology tools know to intepret the carousel as a list.\n\nNote that if the immediate Carousel children do not all render as `'li'` elements,\nthis should be changed (e.g. pass tag=\"div\") because only 'li' is a valid child of 'ul'."
           },
-          "accessibilityLabel": {
-            "defaultValue": {
-              "value": "title",
-              "computed": true
-            },
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": "Provide custom accessibilityLabel for Carousel container"
-          },
           "accessibilityLiveRegion": {
             "defaultValue": {
               "value": "'polite'",
@@ -9728,6 +9810,13 @@
             },
             "required": false,
             "description": "Provide custom accessibilityRole for Carousel container"
+          },
+          "accessibilityLabel": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "Provide custom accessibilityLabel for Carousel container"
           }
         },
         "attributes": {
@@ -11757,6 +11846,9 @@
                 "borderWidth": "border",
                 "borderColor": "color",
                 "borderRadius": "radius",
+                "buttonSize": "size",
+                "buttonsGap": "size",
+                "buttonsPaddingRight": "size",
                 "paddingTop": "size",
                 "paddingBottom": "size",
                 "paddingLeft": "size",
@@ -11855,6 +11947,9 @@
                 "borderWidth": "border",
                 "borderColor": "color",
                 "borderRadius": "radius",
+                "buttonSize": "size",
+                "buttonsGap": "size",
+                "buttonsPaddingRight": "size",
                 "paddingTop": "size",
                 "paddingBottom": "size",
                 "paddingLeft": "size",

package/jest.config-android.js

@@ -0,0 +1,17 @@
+const defaultConfig = require('./jest.config')
+
+const config = { ...defaultConfig }
+
+// Run tests so React Native sees Platform as 'android'
+config.haste.defaultPlatform = 'android'
+// Save snapshots with `.android` in filename
+config.snapshotResolver = './jest-snapshots/resolver-android.js'
+
+// Ignore non-applicable test files
+config.testPathIgnorePatterns = [
+  ...(config.testPathIgnorePatterns || []),
+  '\\.web\\.test\\.',
+  '\\.ios\\.test\\.'
+]
+
+module.exports = config

package/jest.config-ios.js

@@ -0,0 +1,18 @@
+const defaultConfig = require('./jest.config')
+
+const config = { ...defaultConfig }
+
+// ios is the React Native Jest default, but let's make it explicit:
+// Run tests so React Native sees Platform as 'ios'
+config.haste.defaultPlatform = 'ios'
+// Save snapshots with `.ios` in filename
+config.snapshotResolver = './jest-snapshots/resolver-ios.js'
+
+// Ignore non-applicable test files
+config.testPathIgnorePatterns = [
+  ...(config.testPathIgnorePatterns || []),
+  '\\.web\\.test\\.',
+  '\\.android\\.test\\.'
+]
+
+module.exports = config

package/jest.config-web.js

@@ -0,0 +1,31 @@
+const defaultConfig = require('./jest.config')
+
+const config = { ...defaultConfig }
+
+// Run tests so React Native sees Platform as 'web'
+config.haste.defaultPlatform = 'web'
+config.haste.platforms = [...config.haste.platforms, 'web']
+
+// Save snapshots with `.web` in filename
+config.snapshotResolver = './jest-snapshots/resolver-web.js'
+// Alias react-native to react-native-web
+config.moduleNameMapper = {
+  '^react-native$': 'react-native-web',
+  ...config.moduleNameMapper
+}
+
+// Don't include the original react native setup file as it doesn't work with web
+// React-native-web no longer has a matching file so it gets lost looking for `..\Libraries\...` etc
+config.setupFiles = config.setupFiles.filter(
+  (file) => !file.match(/[\\/]react-native[\\/]jest[\\/]/)
+)
+
+// Ignore non-applicable test files
+config.testPathIgnorePatterns = [
+  ...(config.testPathIgnorePatterns || []),
+  '\\.native\\.test\\.',
+  '\\.android\\.test\\.',
+  '\\.ios\\.test\\.'
+]
+
+module.exports = config

package/lib/ActivityIndicator/Spinner.js

@@ -23,14 +23,14 @@ const MIN_SVG_LENGTH = _shared.MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
 const MAX_SVG_LENGTH = (1 - _shared.MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
 const animationProps = {
   begin: '0s',
-  dur: "".concat(_shared.DURATION, "ms"),
+  dur: `${_shared.DURATION}ms`,
   fill: 'freeze',
   repeatCount: 'indefinite'
 };
 const bezierProps = {
   calcMode: 'spline',
   keyTimes: '0; 0.5; 1',
-  keySplines: "".concat(_shared.BEZIER.join(', '), " ; ").concat(_shared.BEZIER.join(', '))
+  keySplines: `${_shared.BEZIER.join(', ')} ; ${_shared.BEZIER.join(', ')}`
 }; // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
 
@@ -46,8 +46,8 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = (0, _A11yInfoProvider.useA11yInfo)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
     ref: ref,
-    width: "".concat(size, "px"),
-    height: "".concat(size, "px"),
+    width: `${size}px`,
+    height: `${size}px`,
     viewBox: "0 0 48 48",
     "aria-valuetext": label,
     role: "progressbar",
@@ -56,7 +56,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       children: [reduceMotionEnabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
         attributeName: "transform",
         type: "rotate",
-        values: "-180 24 24;".concat(360 + _shared.MIN_STROKE_ANGLE - 180, " 24 24"),
+        values: `-180 24 24;${360 + _shared.MIN_STROKE_ANGLE - 180} 24 24`,
         ...animationProps
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
         fill: "none",
@@ -71,12 +71,12 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         children: reduceMotionEnabled ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
             attributeName: "stroke-dashoffset",
-            values: "0;-10;".concat(MIN_SVG_LENGTH - SVG_CIRCUMFERENCE),
+            values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
             ...animationProps,
             ...bezierProps
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
             attributeName: "stroke-dasharray",
-            values: "".concat(MIN_SVG_LENGTH, ", 200;").concat(MAX_SVG_LENGTH, ", 200;").concat(MIN_SVG_LENGTH, ", 200"),
+            values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
             ...animationProps,
             ...bezierProps
           })]

package/lib/ActivityIndicator/Spinner.native.js

@@ -95,7 +95,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           }
 
           const direction = index ? -1 : +1;
-          return "".concat(direction * (180 - (sa + ea)) * easing(progress) + rotation, "deg");
+          return `${direction * (180 - (sa + ea)) * easing(progress) + rotation}deg`;
         });
         const layerStyle = {
           width: size,
@@ -110,7 +110,7 @@ const Spinner = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           layerStyle.transform = [{
             rotate: timer.interpolate({
               inputRange: [0, 1],
-              outputRange: ["".concat(0 + ea + sa, "deg"), "".concat(2 * 360 + ea + sa, "deg")]
+              outputRange: [`${0 + ea + sa}deg`, `${2 * 360 + ea + sa}deg`]
             })
           }];
           viewportStyle.transform = [{

package/lib/BaseProvider/HydrationContext.js

@@ -59,7 +59,7 @@ const HydrationProvider = _ref => {
   }, []); // If we've got a HydrationProvider inside a HydrationProvider somehow, defer to the top one
 
   const valueFromAncestor = useHydrationContext();
-  const isHydrating = valueFromAncestor !== null && valueFromAncestor !== void 0 ? valueFromAncestor : Boolean(!hasMounted && hasWebStyleTag());
+  const isHydrating = valueFromAncestor ?? Boolean(!hasMounted && hasWebStyleTag());
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(HydrationContext.Provider, {
     value: isHydrating,
     children: children

package/lib/BaseProvider/TamaguiProvider.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsMultiPlatform = require("@telus-uds/components-multi-platform");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TamaguiWrapper = _ref => {
+  let {
+    extended,
+    children
+  } = _ref;
+  console.log('extended', extended);
+  return extended ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsMultiPlatform.TamaguiProvider, {
+    config: _componentsMultiPlatform.config,
+    disableInjectCSS: true,
+    defaultTheme: "light",
+    children: children
+  }) : children;
+};
+TamaguiWrapper.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  extended: _propTypes.default.bool
+};
+var _default = TamaguiWrapper;
+exports.default = _default;

package/lib/Button/ButtonBase.js

@@ -100,7 +100,7 @@ const selectOuterWidthStyles = _ref3 => {
 
 
   if (_Platform.default.OS === 'web') {
-    widthStyles.width = "calc(".concat(width, " + ").concat(outerBorderOffset * 2, "px)");
+    widthStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
     return widthStyles;
   } // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
 
@@ -163,7 +163,9 @@ const selectTextStyles = (_ref6, themeOptions) => {
     lineHeight,
     fontName,
     fontWeight,
-    textAlign
+    textAlign,
+    textLine,
+    textLineStyle
   } = _ref6;
   return (0, _ThemeProvider.applyTextStyles)({
     fontSize,
@@ -172,7 +174,9 @@ const selectTextStyles = (_ref6, themeOptions) => {
     fontName,
     fontWeight,
     themeOptions,
-    textAlign
+    textAlign,
+    textDecorationLine: textLine,
+    textDecorationStyle: textLineStyle
   });
 };
 
@@ -183,7 +187,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
   return _Platform.default.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)`,
       outline: 'none',
       // removes the default browser :focus outline
       ...(0, _utils.getCursorStyle)(inactive, accessibilityRole)

package/lib/Button/ButtonDropdown.js

@@ -0,0 +1,207 @@
+"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; }
+
+const selectIconTokens = _ref => {
+  let {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconSize,
+    iconColor,
+    iconBackground,
+    iconBorderRadius,
+    iconAlignSelf,
+    iconPadding,
+    iconTranslateX,
+    iconTranslateY
+  } = _ref;
+  return {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconWrapperStyle: {
+      backgroundColor: iconBackground,
+      borderRadius: iconBorderRadius,
+      alignSelf: iconAlignSelf,
+      padding: iconPadding,
+      ..._Platform.default.select({
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        web: {
+          transition: 'color 200ms, background 200ms'
+        }
+      })
+    },
+    iconTokens: {
+      size: iconSize,
+      color: iconColor,
+      translateX: iconTranslateX,
+      translateY: iconTranslateY
+    }
+  };
+};
+
+const ButtonDropdown = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    value,
+    initialValue,
+    onChange,
+    label,
+    tokens,
+    variant,
+    inactive = false,
+    readOnly = false,
+    children = null,
+    accessibilityRole = 'radio',
+    ...props
+  } = _ref2;
+  const {
+    currentValue: isOpen,
+    setValue: setIsOpen
+  } = (0, _utils.useInputValue)({
+    value,
+    initialValue,
+    onChange,
+    readOnly
+  }, 'useButtonDropdownValues');
+  const extraState = {
+    open: isOpen,
+    inactive,
+    ...variant
+  };
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, extraState);
+
+  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, [{
+    label,
+    open: isOpen
+  }]);
+
+  const handlePress = event => {
+    if (!inactive) {
+      if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+      setIsOpen(!isOpen, event);
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ref: ref,
+    ...pressHandlers,
+    onPress: handlePress,
+    tokens: getButtonTokens,
+    inactive: inactive,
+    icon: () => null,
+    accessibilityRole: accessibilityRole,
+    ...props,
+    children: _ref3 => {
+      let {
+        textStyles,
+        ...buttonState
+      } = _ref3;
+      // TODO: once Icon/IconButton designs are stable, see if this sort of styling around
+      // an icon should go in Icon itself, or possibly via an IconText token set. Related issues:
+      // - 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,
+        iconPosition,
+        iconSpace,
+        iconWrapperStyle,
+        icon: IconComponent
+      } = selectIconTokens(itemTokens);
+      const iconContent = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: iconWrapperStyle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: IconComponent,
+          tokens: iconTokens
+        })
+      }) : null;
+
+      const childrenContent = () => typeof children === 'function' ? children({ ...(0, _utils.resolvePressableState)(buttonState, extraState),
+        textStyles
+      }) : children;
+
+      const content = children ? childrenContent() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: textStyles,
+        children: label
+      });
+      return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [iconContent, content] : [content, iconContent], {
+        space: iconSpace,
+        direction: 'row'
+      });
+    }
+  });
+});
+ButtonDropdown.displayName = 'ButtonDropdown';
+ButtonDropdown.propTypes = { ..._utils.a11yProps.types,
+  ..._utils.focusHandlerProps.types,
+  ..._propTypes2.default,
+  children: _propTypes2.textAndA11yText,
+
+  /**
+   * Callback called when a controlled ButtonDropdown gets interacted with.
+   */
+  onChange: _propTypes.default.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,
+
+  /**
+   * Use `initialValue` to provide the initial value for an uncontrolled version.
+   */
+  initialValue: _propTypes.default.bool,
+
+  /**
+   * The label of ButtonDropdown.
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
+   */
+  accessibilityRole: _propTypes.default.string
+};
+var _default = ButtonDropdown;
+exports.default = _default;