@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/lib/cjs/ExpandCollapse/ExpandCollapse.js

@@ -3,16 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ExpandCollapse = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _input = require("../utils/input");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _contentfulProps = require("../utils/props/contentfulProps");
+var _useUniqueId = require("../utils/useUniqueId");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps, _utils.contentfulProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps, _contentfulProps.contentfulProps]);
 const selectWrapperStyles = _ref => {
   let {
     borderWidth,
@@ -34,10 +41,10 @@ const selectWrapperStyles = _ref => {
  * Flexible base component for lists where some or all items are collapsible headers.
  *
  * Pass a render function as `children` which takes and passes `openIds` and `onToggle` props to
- * <ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be
+ * <ExpandCollapsePanel> children, and assign the panels explicit `panelId` props. The panels may be
  * nested (they do not need to be direct children), and non-interactive items may be included too.
  */
-const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ExpandCollapse = exports.ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -49,20 +56,20 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     dataSet,
     ...rest
   } = _ref2;
-  const instanceId = (0, _utils.useUniqueId)('ExpandCollapse');
+  const instanceId = (0, _useUniqueId.useUniqueId)('ExpandCollapse');
   const {
     currentValues: openIds,
     toggleOneValue: onToggle,
     resetValues,
     setValues,
     unsetValues
-  } = (0, _utils.useMultipleInputValues)({
+  } = (0, _input.useMultipleInputValues)({
     maxValues: maxOpen,
     values: open,
     initialValues: initialOpen,
     onChange
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapse', tokens, variant);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('ExpandCollapse', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: staticStyles.container,
     ref: ref,
@@ -84,12 +91,12 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 ExpandCollapse.displayName = 'ExpandCollapse';
 ExpandCollapse.propTypes = {
   ...selectedSystemPropTypes,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('ExpandCollapse'),
+  variant: _variantProp.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('ExpandCollapse'),
   /**
    * ExpandCollapse usually takes a render function to which it passes an object with properties
    * { openIds, onToggle, resetValues, setValues, unsetValues }. openIds (array of ids) and
-   * onToggle (function) will usually be passed to `<ExpandCollapse.Panel>`
+   * onToggle (function) will usually be passed to `<ExpandCollapsePanel>`
    */
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
   /**
@@ -110,7 +117,6 @@ ExpandCollapse.propTypes = {
    */
   initialOpen: _propTypes.default.arrayOf(_propTypes.default.string)
 };
-var _default = exports.default = ExpandCollapse;
 const staticStyles = _StyleSheet.default.create({
   container: {
     display: 'flex'

package/lib/cjs/ExpandCollapse/ExpandCollapseAccordion.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandCollapseAccordion = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ExpandCollapse = require("./ExpandCollapse");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 'ExpandCollapseAccordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
+ */
+const ExpandCollapseAccordion = exports.ExpandCollapseAccordion = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.ExpandCollapse, {
+  ref: ref,
+  ...props,
+  maxOpen: 1
+}));
+ExpandCollapseAccordion.displayName = 'ExpandCollapseAccordion';
+ExpandCollapseAccordion.propTypes = _ExpandCollapse.ExpandCollapse.propTypes;

package/lib/cjs/ExpandCollapse/{Control.js → ExpandCollapseControl.js}

@@ -3,18 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ExpandCollapseControl = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _styles = require("../ThemeProvider/utils/styles");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 function selectContainerStyles(_ref) {
   let {
     backgroundColor,
@@ -48,7 +53,7 @@ function selectContainerStyles(_ref) {
     borderBottomRightRadius,
     borderTopLeftRadius,
     borderBottomLeftRadius,
-    ...(0, _ThemeProvider.verticalAlignRow)(verticalAlign, iconPosition === 'right'),
+    ...(0, _styles.verticalAlignRow)(verticalAlign, iconPosition === 'right'),
     // Updated default alignment due to the change in Pressable's behavior from div to button on web.
     textAlign: _Platform.default.OS === 'web' ? 'inherit' : undefined
   };
@@ -73,11 +78,15 @@ function selectIconContainerStyles(_ref2) {
 }
 function selectTextContainerStyles(_ref3) {
   let {
-    textLine
+    textLine,
+    controlAlign
   } = _ref3;
   return {
     textDecorationLine: textLine,
-    flex: 1
+    flex: 1,
+    ...(controlAlign && {
+      alignItems: controlAlign
+    })
   };
 }
 function selectIconTokens(tokens) {
@@ -86,17 +95,18 @@ function selectIconTokens(tokens) {
     size: tokens.iconSize
   };
 }
-const ExpandCollapseControl = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const ExpandCollapseControl = exports.ExpandCollapseControl = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     onPress,
     isExpanded,
     children,
     tokens,
+    controlAlign,
     accessibilityRole = 'button',
     variant,
     ...rest
   } = _ref4;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
   const selectedProps = selectProps({
     accessibilityRole,
     ...rest,
@@ -142,7 +152,12 @@ const ExpandCollapseControl = /*#__PURE__*/_react.default.forwardRef((_ref4, ref
             ...selectIconTokens(themeTokens)
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: [selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
+          style: [selectTextContainerStyles({
+            ...themeTokens,
+            ...(controlAlign && {
+              controlAlign
+            })
+          }), staticStyles.bubblePointerEvents],
           children: typeof children === 'function' ? children(getControlState(pressableState)) : children
         })]
       });
@@ -157,8 +172,8 @@ const staticStyles = _StyleSheet.default.create({
 });
 ExpandCollapseControl.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('ExpandCollapseControl'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('ExpandCollapseControl'),
+  variant: _variantProp.variantProp.propType,
   /**
    * ExpandCollapseControl's children are the content within the button that opens or closes this panel. May
    * accept a render function that recieves the control state: { pressed, hover, focus, expanded }
@@ -168,9 +183,12 @@ ExpandCollapseControl.propTypes = {
    * Whether the linked ExpandCollapsePanel is opened or closed. Allows themes to set `expanded` styles.
    */
   isExpanded: _propTypes.default.bool,
+  /**
+   * Optional alignment for control content. Overrides token-driven alignment.
+   */
+  controlAlign: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * Function called when the ExpandCollapse is pressed.
    */
   onPress: _propTypes.default.func.isRequired
-};
-var _default = exports.default = ExpandCollapseControl;
+};

package/lib/cjs/ExpandCollapse/{Panel.js → ExpandCollapsePanel.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ExpandCollapsePanel = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -12,14 +12,19 @@ var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Te
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
-var _Control = _interopRequireDefault(require("./Control"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _ExpandCollapseControl = require("./ExpandCollapseControl");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useVerticalExpandAnimation = require("../utils/animation/useVerticalExpandAnimation");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _useCopy = require("../utils/useCopy");
+var _dictionary = require("./dictionary");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 
 // just void functions for now, since there are no style tokens for a panel or control at this point
 const selectContainerStyles = _ref => {
@@ -96,7 +101,7 @@ const selectControlPanelStyles = _ref4 => {
  * The panel does not need to be a direct child of the `<ExpandCollapse>` (unless this is required
  * by the chosen accessibility props for a particular accessibility tools).
  */
-const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+const ExpandCollapsePanel = exports.ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     openIds = [],
     panelId,
@@ -104,6 +109,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
     onPress,
     control,
     controlTokens,
+    controlAlign,
     children,
     tokens,
     variant,
@@ -115,8 +121,8 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
   } = _ref5;
   const [containerHeight, setContainerHeight] = _react.default.useState(null);
   const isExpanded = openIds.includes(panelId);
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
     copy
   });
   const selectedProps = selectProps({
@@ -126,7 +132,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
       expanded: isExpanded
     }
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapsePanel', tokens, variant, {
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });
 
@@ -147,12 +153,12 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
       setContainerHeight(height + mobileScrollBuffer);
     }
   };
-  const [animatedStyles, animatedRef] = (0, _utils.useVerticalExpandAnimation)({
+  const [animatedStyles, animatedRef] = (0, _useVerticalExpandAnimation.useVerticalExpandAnimation)({
     containerHeight,
     isExpanded,
     tokens: themeTokens
   });
-  const focusabilityProps = isExpanded ? {} : _utils.a11yProps.nonFocusableProps;
+  const focusabilityProps = isExpanded ? {} : _a11yProps.a11yProps.nonFocusableProps;
   const panelAccessibilityLabel = `${panelId} ${getCopy('panel')}`;
   const subPanelAccessibilityLabel = `${panelId} ${getCopy('subPanel')}`;
   return content ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -169,10 +175,11 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
     accessibilityLabel: panelAccessibilityLabel,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectControlPanelStyles(themeTokens),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Control.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapseControl.ExpandCollapseControl, {
         ...selectedProps,
         isExpanded: isExpanded,
         tokens: controlTokens,
+        controlAlign: controlAlign,
         variant: variant,
         onPress: handleControlPress,
         ref: controlRef,
@@ -240,8 +247,8 @@ const staticStyles = _StyleSheet.default.create({
 });
 ExpandCollapsePanel.propTypes = {
   ...selectedSystemPropTypes,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('ExpandCollapsePanel'),
+  variant: _variantProp.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('ExpandCollapsePanel'),
   /**
    * Array of the ids of currently open groups
    */
@@ -267,15 +274,21 @@ ExpandCollapsePanel.propTypes = {
   /**
    * The content inside the control element that opens and closes the ExpandCollapse when pressed.
    */
-  control: _Control.default.propTypes.children,
+  control: _ExpandCollapseControl.ExpandCollapseControl.propTypes.children,
   /**
    * Optional theme token overrides that may be passed to the ExpandCollapseControl element.
    */
-  controlTokens: (0, _utils.getTokensPropType)('ExpandCollapseControl'),
+  controlTokens: (0, _tokens.getTokensPropType)('ExpandCollapseControl'),
+  /**
+   * Optional alignment for control content.
+   */
+  controlAlign: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
   /**
    * An optional ref to be attached to the control
    */
-  controlRef: _airbnbPropTypes.default.ref(),
+  controlRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.any
+  })]),
   /**
    * A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control
    */
@@ -284,5 +297,4 @@ ExpandCollapsePanel.propTypes = {
    * A boolean prop to disable the extra scroll buffer on mobile devices (only applicable on iOS/Android, ignored on web)
    */
   disableMobileScrollBuffer: _propTypes.default.bool
-};
-var _default = exports.default = ExpandCollapsePanel;
+};

package/lib/cjs/ExpandCollapse/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     panel: 'Panel',
     subPanel: 'SubPanel'

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMini.js

@@ -3,17 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ExpandCollapseMini = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
-var _utils = require("../utils");
-var _props = require("../utils/props");
-var _ExpandCollapseMiniControl = _interopRequireDefault(require("./ExpandCollapseMiniControl"));
+var _ExpandCollapse = require("../ExpandCollapse/ExpandCollapse");
+var _ExpandCollapsePanel = require("../ExpandCollapse/ExpandCollapsePanel");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _contentfulProps = require("../utils/props/contentfulProps");
+var _useUniqueId = require("../utils/useUniqueId");
+var _variantProp = require("../utils/props/variantProp");
+var _ExpandCollapseMiniControl = require("./ExpandCollapseMiniControl");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectContainerProps, selectedContainerPropTypes] = (0, _utils.selectSystemProps)([_utils.contentfulProps]);
-const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const [selectContainerProps, selectedContainerPropTypes] = (0, _selectSystemProps.selectSystemProps)([_contentfulProps.contentfulProps]);
+const alignMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+};
+const ExpandCollapseMini = exports.ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     onToggle = () => {},
@@ -21,22 +30,23 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     nativeID,
     initialOpen = false,
     dataSet,
+    align,
     ...rest
   } = _ref;
-  const expandCollapeMiniPanelId = (0, _utils.useUniqueId)('ExpandCollapseMiniPanel');
+  const expandCollapeMiniPanelId = (0, _useUniqueId.useUniqueId)('ExpandCollapseMiniPanel');
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
       const isOpen = openPanels.length > 0;
       onToggle(event, isOpen);
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.ExpandCollapse, {
     onChange: handleChange,
     tokens: tokens,
     initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
     ...selectContainerProps(rest),
     dataSet: dataSet,
-    children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default.Panel, {
+    children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapsePanel.ExpandCollapsePanel, {
       ...expandProps,
       panelId: expandCollapeMiniPanelId,
       variant: {
@@ -48,12 +58,14 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
         borderColor: 'transparent',
         textLine: tokens.textLine ?? 'none',
         backgroundColor: 'transparent'
-      }
+      },
+      controlAlign: align && alignMap[align]
       // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
-      control: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapseMiniControl.default, {
+      control: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapseMiniControl.ExpandCollapseMiniControl, {
         pressableState: pressableState,
+        align: align,
         ...rest
       }),
       controlRef: ref,
@@ -64,7 +76,7 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
 });
 ExpandCollapseMini.displayName = 'ExpandCollapseMini';
 ExpandCollapseMini.propTypes = {
-  ..._ExpandCollapseMiniControl.default.propTypes,
+  ..._ExpandCollapseMiniControl.ExpandCollapseMiniControl.propTypes,
   ...selectedContainerPropTypes,
   /**
    * Function to call on pressing the panel's control, which should open or close the panel.
@@ -85,14 +97,17 @@ ExpandCollapseMini.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  tokens: (0, _utils.getTokensPropType)('ExpandCollapseMini'),
+  tokens: (0, _tokens.getTokensPropType)('ExpandCollapseMini'),
   /**
    * ExpandCollapseMini variant.
    */
-  variant: _props.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
-  dataSet: _propTypes.default.object
-};
-var _default = exports.default = ExpandCollapseMini;
+  dataSet: _propTypes.default.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon within the panel width.
+   */
+  align: _propTypes.default.oneOf(['start', 'middle', 'end'])
+};

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -3,16 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ExpandCollapseMiniControl = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _Link = require("../Link");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
+var _Link = require("../Link/Link");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _htmlAttrs = require("../utils/htmlAttrs");
+var _viewProps = require("../utils/props/viewProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_htmlAttrs.htmlAttrs, _viewProps.viewProps]);
+const alignSelfMap = {
+  start: 'flex-start',
+  middle: 'center',
+  end: 'flex-end'
+};
 
 // The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
 // and a more appropriate press area, defer interaction handling to it.
@@ -23,7 +30,7 @@ const presentationOnly = {
   // Stop RNW from stopping clicks from bubbling to Control
   focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
 };
-const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ExpandCollapseMiniControl = exports.ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     pressableState,
     collapseTitle,
@@ -31,6 +38,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
     iconPosition = 'right',
     tokens,
     variant = {},
+    align,
     ...rest
   } = _ref;
   const {
@@ -43,7 +51,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
     quiet
   } = variant;
   const isFocusVisible = _Platform.default.OS === 'web' ? focus && !pressed && !hover : expanded;
-  const linkTokens = (0, _ThemeProvider.useThemeTokens)('Link', {}, {
+  const linkTokens = (0, _useThemeTokens.useThemeTokens)('Link', {}, {
     ...variant,
     quiet
   }, {
@@ -56,7 +64,7 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
     lineHeight,
     iconSize,
     icon
-  } = (0, _ThemeProvider.useThemeTokens)('ExpandCollapseMiniControl', tokens, variant, {
+  } = (0, _useThemeTokens.useThemeTokens)('ExpandCollapseMiniControl', tokens, variant, {
     expanded,
     focus
   });
@@ -99,7 +107,10 @@ const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref,
       ...getTokens(linkState),
       iconSize,
       blockFontSize: fontSize,
-      blockLineHeight: lineHeight
+      blockLineHeight: lineHeight,
+      ...(align && {
+        alignSelf: alignSelfMap[align]
+      })
     }),
     ref: ref,
     ...presentationOnly,
@@ -130,6 +141,9 @@ ExpandCollapseMiniControl.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  variant: _propTypes.default.object
-};
-var _default = exports.default = ExpandCollapseMiniControl;
+  variant: _propTypes.default.object,
+  /**
+   * Controls the horizontal alignment of the trigger label and icon
+   */
+  align: _propTypes.default.oneOf(['start', 'middle', 'end'])
+};