@telus-uds/components-base 1.3.1 → 1.6.0

package/lib/utils/containUniqueFields.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+// Returns true if there are no duplicate values of the fields listed
+// in the `fields` array across the objects in the `items` array, false
+// otherwise.
+// Note that if a value of a field in an item is not set, it will be
+// excluded from comparison.
+const containUniqueFields = (items, fields) => {
+  const map = [];
+  const itemsHaveDuplicateFields = items.some(item => fields.some(field => {
+    if (!map[field]) {
+      map[field] = [];
+    }
+
+    if (!item[field]) {
+      // We exclude empty values from comparison
+      return false;
+    } // Duplicate found!
+
+
+    if (map[field][item[field]]) return true;
+    map[field][item[field]] = true;
+    return false;
+  }));
+  return !itemsHaveDuplicateFields;
+};
+
+var _default = containUniqueFields;
+exports.default = _default;

package/lib/utils/index.js

@@ -10,7 +10,8 @@ var _exportNames = {
   useSpacingScale: true,
   useResponsiveProp: true,
   useUniqueId: true,
-  withLinkRouter: true
+  withLinkRouter: true,
+  containUniqueFields: true
 };
 Object.defineProperty(exports, "info", {
   enumerable: true,
@@ -54,6 +55,12 @@ Object.defineProperty(exports, "withLinkRouter", {
     return _withLinkRouter.default;
   }
 });
+Object.defineProperty(exports, "containUniqueFields", {
+  enumerable: true,
+  get: function () {
+    return _containUniqueFields.default;
+  }
+});
 
 var _a11y = require("./a11y");
 
@@ -179,6 +186,8 @@ Object.keys(_ssr).forEach(function (key) {
   });
 });
 
+var _containUniqueFields = _interopRequireDefault(require("./containUniqueFields"));
+
 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; }

package/lib/utils/props/handlerProps.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.textInputHandlerProps = exports.focusHandlerProps = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const focusHandlerProps = {
+  types: {
+    /**
+     * onBlur handler
+     */
+    onBlur: _propTypes.default.func,
+
+    /**
+     * onFocus handler
+     */
+    onFocus: _propTypes.default.func
+  },
+  select: ({
+    onBlur,
+    onFocus
+  }) => ({
+    onBlur,
+    onFocus
+  })
+};
+exports.focusHandlerProps = focusHandlerProps;
+const textInputHandlerProps = {
+  types: {
+    /**
+     * onChange handler
+     */
+    onChange: _propTypes.default.func,
+
+    /**
+     * onChangeText handler
+     */
+    onChangeText: _propTypes.default.func,
+
+    /**
+     * onSubmit handler
+     */
+    onSubmit: _propTypes.default.func,
+
+    /**
+     * onSubmitEditing handler
+     */
+    onSubmitEditing: _propTypes.default.func
+  },
+  select: ({
+    onChange,
+    onChangeText,
+    onSubmit,
+    onSubmitEditing
+  }) => ({
+    onChange,
+    onChangeText,
+    onSubmit,
+    onSubmitEditing
+  })
+};
+exports.textInputHandlerProps = textInputHandlerProps;
+var _default = {
+  focusHandlerProps,
+  textInputHandlerProps
+};
+exports.default = _default;

package/lib/utils/props/index.js

@@ -125,6 +125,20 @@ Object.keys(_tokens).forEach(function (key) {
   });
 });
 
+var _handlerProps = require("./handlerProps");
+
+Object.keys(_handlerProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _handlerProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _handlerProps[key];
+    }
+  });
+});
+
 var _a11yProps = _interopRequireDefault(require("./a11yProps"));
 
 var _clickProps = _interopRequireDefault(require("./clickProps"));

package/lib/utils/props/inputSupportsProps.js

@@ -48,18 +48,16 @@ var _default = {
     hintPosition,
     feedback,
     tooltip,
-    validation,
-    ...rest
+    validation
   }) => ({
-    props: {
+    supportsProps: {
       label,
       hint,
       hintPosition,
       feedback,
       tooltip,
       validation
-    },
-    ...rest
+    }
   })
 };
 exports.default = _default;

package/lib-module/Button/ButtonBase.js

@@ -6,9 +6,9 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils';
 import buttonPropTypes from './propTypes';
-import { a11yProps, getCursorStyle, clickProps, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter } from '../utils';
+import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps]);
 
 const getOuterBorderOffset = ({
   outerBorderGap = 0,

package/lib-module/Button/ButtonGroup.js

@@ -6,11 +6,11 @@ import ButtonBase from './ButtonBase';
 import { StackWrap } from '../StackView';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, pressProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps } from '../utils/props';
-import { useMultipleInputValues } from '../utils/input';
+import { a11yProps, containUniqueFields, focusHandlerProps, pressProps, getTokensPropType, selectSystemProps, selectTokens, useMultipleInputValues, variantProp, viewProps } from '../utils';
 import { getPressHandlersWithArgs } from '../utils/pressability';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
 const ButtonGroup = /*#__PURE__*/forwardRef(({
   variant,
   tokens,
@@ -53,6 +53,12 @@ const ButtonGroup = /*#__PURE__*/forwardRef(({
     ...rest
   });
   const itemA11yRole = systemProps.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox';
+  const uniqueFields = ['id', 'label'];
+
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
+  }
+
   return /*#__PURE__*/_jsx(StackWrap, { ...systemProps,
     space: space,
     direction: direction,
@@ -62,7 +68,8 @@ const ButtonGroup = /*#__PURE__*/forwardRef(({
       label,
       id = label,
       accessibilityLabel,
-      ref: itemRef
+      ref: itemRef,
+      ...itemRest
     }, index) => {
       const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
 
@@ -73,7 +80,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef(({
       }]);
 
       const handlePress = event => {
-        if (pressHandlers.onPress) pressHandlers.onPress();
+        if (pressHandlers.onPress) pressHandlers.onPress(event);
         toggleOneValue(id, event);
       };
 
@@ -95,6 +102,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef(({
         selected: isSelected,
         inactive: inactive,
         ...itemA11y,
+        ...selectItemProps(itemRest),
         children: label
       }, id);
     })
@@ -114,7 +122,8 @@ ButtonGroup.propTypes = { ...selectedSystemPropTypes,
   /**
    * The options a user may select
    */
-  items: PropTypes.arrayOf(PropTypes.shape({
+  items: PropTypes.arrayOf(PropTypes.shape({ ...selectedItemPropTypes,
+
     /**
      * The text displayed to the user in the button, describing this option,
      * passed to the button as its child.

package/lib-module/Card/PressableCardBase.js

@@ -4,10 +4,10 @@ import Pressable from "react-native-web/dist/exports/Pressable";
 import Platform from "react-native-web/dist/exports/Platform";
 import { useViewport } from '../ViewportProvider';
 import { applyOuterBorder, validateThemeTokens } from '../ThemeProvider';
-import { a11yProps, clickProps, getTokenNames, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
+import { a11yProps, clickProps, focusHandlerProps, getTokenNames, getTokensSetPropType, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
 import CardBase from './CardBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 const tokenKeys = [...getTokenNames('Card'), // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];

package/lib-module/Checkbox/Checkbox.js

@@ -10,11 +10,11 @@ import CheckboxLabel from '../InputLabel/LabelContent';
 import Feedback from '../Feedback';
 import StackView from '../StackView';
 import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
+import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
 import useUniqueId from '../utils/useUniqueId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 
 const selectInputStyles = ({
   iconBackgroundColor,
@@ -204,24 +204,31 @@ const Checkbox = /*#__PURE__*/forwardRef(({
             pressed
           });
           const iconTokens = selectIconTokens(stateTokens);
+          const labelStyles = selectLabelStyles(stateTokens);
+          const alignWithLabel = label ? [staticStyles.alignWithLabel, {
+            height: labelStyles.lineHeight
+          }] : null;
           return /*#__PURE__*/_jsxs(View, {
             style: staticStyles.container,
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: StyleSheet.flatten([staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)]),
-              testID: "Checkbox-Input",
-              children: [/*#__PURE__*/_jsx(CheckboxInput, {
-                checked: isChecked,
-                defaultChecked: defaultChecked,
-                disabled: inactive,
-                id: inputId,
-                isControlled: isControlled,
-                name: name,
-                value: value
-              }), isChecked && IconComponent && /*#__PURE__*/_jsx(IconComponent, { ...iconTokens,
-                testID: "Checkbox-Icon"
-              })]
+            children: [/*#__PURE__*/_jsx(View, {
+              style: alignWithLabel,
+              children: /*#__PURE__*/_jsxs(View, {
+                style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
+                testID: "Checkbox-Input",
+                children: [/*#__PURE__*/_jsx(CheckboxInput, {
+                  checked: isChecked,
+                  defaultChecked: defaultChecked,
+                  disabled: inactive,
+                  id: inputId,
+                  isControlled: isControlled,
+                  name: name,
+                  value: value
+                }), isChecked && IconComponent && /*#__PURE__*/_jsx(IconComponent, { ...iconTokens,
+                  testID: "Checkbox-Icon"
+                })]
+              })
             }), Boolean(label) && /*#__PURE__*/_jsx(Text, {
-              style: selectLabelStyles(stateTokens),
+              style: labelStyles,
               children: /*#__PURE__*/_jsx(CheckboxLabel, {
                 forId: inputId,
                 children: label
@@ -317,5 +324,9 @@ const staticStyles = StyleSheet.create({
   defaultInputStyles: {
     alignItems: 'center',
     justifyContent: 'center'
+  },
+  alignWithLabel: {
+    alignSelf: 'flex-start',
+    justifyContent: 'center'
   }
 });

package/lib-module/Checkbox/CheckboxGroup.js

@@ -3,10 +3,13 @@ import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import { useViewport } from '../ViewportProvider';
 import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, useMultipleInputValues, variantProp } from '../utils';
+import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
 import { getStackedContent } from '../StackView';
 import Checkbox from './Checkbox';
 import Fieldset from '../Fieldset';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 /**
  * A group of Checkboxs that behave as a fieldset. Use when users select any number of choices from options.
  *
@@ -55,7 +58,6 @@ import Fieldset from '../Fieldset';
  * ```
  */
 
-import { jsx as _jsx } from "react/jsx-runtime";
 const CheckboxGroup = /*#__PURE__*/forwardRef(({
   tokens,
   radioTokens,
@@ -71,7 +73,8 @@ const CheckboxGroup = /*#__PURE__*/forwardRef(({
   onChange,
   readOnly,
   name: inputGroupName,
-  inactive
+  inactive,
+  ...rest
 }, ref) => {
   const viewport = useViewport();
   const {
@@ -89,11 +92,18 @@ const CheckboxGroup = /*#__PURE__*/forwardRef(({
     onChange,
     readOnly: readOnly || inactive
   });
+  const uniqueFields = ['id', 'label'];
+
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error(`CheckboxGroup items must have unique ${uniqueFields.join(', ')}`);
+  }
+
   const checkboxes = items.map(({
     label,
     id,
     onChange: itemOnChange,
-    ref: itemRef
+    ref: itemRef,
+    ...itemRest
   }, index) => {
     const checkboxId = id || `Checkbox[${index}]`;
 
@@ -111,7 +121,8 @@ const CheckboxGroup = /*#__PURE__*/forwardRef(({
       label: label,
       name: inputGroupName,
       tokens: radioTokens,
-      variant: variant
+      variant: variant,
+      ...selectItemProps(itemRest)
     }, checkboxId);
   });
   return /*#__PURE__*/_jsx(Fieldset, {
@@ -124,6 +135,7 @@ const CheckboxGroup = /*#__PURE__*/forwardRef(({
     feedback: feedback,
     inactive: inactive,
     validation: validation,
+    ...selectProps(rest),
     children: getStackedContent(checkboxes, {
       space,
       direction: 'column'
@@ -131,7 +143,8 @@ const CheckboxGroup = /*#__PURE__*/forwardRef(({
   });
 });
 CheckboxGroup.displayName = 'CheckboxGroup';
-CheckboxGroup.propTypes = {
+CheckboxGroup.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Optional theme token overrides for the outer CheckboxGroup component
    */
@@ -150,7 +163,7 @@ CheckboxGroup.propTypes = {
   /**
    * Array of objects containing specifics for each Checkbox to be rendered in the group.
    */
-  items: PropTypes.arrayOf(PropTypes.exact({
+  items: PropTypes.arrayOf(PropTypes.exact({ ...selectedItemPropTypes,
     label: PropTypes.string,
     id: PropTypes.string,
     onChange: PropTypes.func,

package/lib-module/ExpandCollapse/Panel.js

@@ -64,12 +64,13 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef(({
   };
 
   const onContainerLayout = event => {
-    if (containerHeight === null) {
-      const {
-        layout: {
-          height = 0
-        } = {}
-      } = event.nativeEvent;
+    const {
+      layout: {
+        height = 0
+      } = {}
+    } = event.nativeEvent;
+
+    if (Platform.OS === 'web' || Platform.OS !== 'web' && containerHeight === null) {
       setContainerHeight(height);
     }
   };
@@ -94,12 +95,11 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef(({
       tokens: controlTokens,
       onPress: handleControlPress,
       children: control
-    }), /*#__PURE__*/_jsx(View, {
-      style: overflowContainerStyles,
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [overflowContainerStyles, animatedStyles, staticStyles.itemsContainer],
       ...focusabilityProps,
-      children: /*#__PURE__*/_jsx(Animated.View, {
+      children: /*#__PURE__*/_jsx(View, {
         onLayout: onContainerLayout,
-        style: [staticStyles.itemsContainer, animatedStyles],
         children: /*#__PURE__*/_jsx(View, {
           style: selectContainerStyles(themeTokens),
           children: children

package/lib-module/FlexGrid/Col/Col.js

@@ -22,6 +22,7 @@ const Col = /*#__PURE__*/forwardRef(({
   mdOffset,
   lgOffset,
   xlOffset,
+  flex,
   ...viewProps
 }, ref) => {
   const gutter = useContext(GutterContext);
@@ -95,8 +96,11 @@ const Col = /*#__PURE__*/forwardRef(({
     paddingLeft: gutter ? 16 : 0,
     paddingRight: gutter ? 16 : 0
   };
-  let hidingStyles = {};
-  const shown = Platform.OS === 'web' ? 'block' : 'flex';
+  let hidingStyles = {}; // TODO: consider setting this to always 'flex' in a major release.
+  // `display: block` is invalid in native apps.
+  // See https://telusdigital.atlassian.net/browse/UDS1-92
+
+  const shown = !flex && Platform.OS === 'web' ? 'block' : 'flex';
 
   if (viewPort === viewports.xs) {
     hidingStyles = {
@@ -260,6 +264,12 @@ Col.propTypes = {
    *
    * Accepts a `PropType.string` following the [responsive prop](#/Layout?id=responsive) structure.
    */
-  horizontalAlign: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['left', 'center', 'right']))
+  horizontalAlign: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['left', 'center', 'right'])),
+
+  /**
+   * (web only) Stretches the column to fill vertical space using `display: flex`.
+   * In native apps, FlexGrid.Col behaves as if this is always true (as do all `View`s).
+   */
+  flex: PropTypes.bool
 };
 export default Col;

package/lib-module/FlexGrid/Row/Row.js

@@ -86,25 +86,31 @@ const Row = /*#__PURE__*/forwardRef(({
   const viewPort = useViewport();
   const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   let flexDirection = '';
+  let flexWrap = '';
 
   if (viewPort === viewports.xs) {
     flexDirection = reverseLevel[0] ? 'row-reverse' : 'row';
+    flexWrap = reverseLevel[0] ? 'wrap-reverse' : 'wrap';
   }
 
   if (viewPort === viewports.sm) {
     flexDirection = reverseLevel[1] ? 'row-reverse' : 'row';
+    flexWrap = reverseLevel[1] ? 'wrap-reverse' : 'wrap';
   }
 
   if (viewPort === viewports.md) {
     flexDirection = reverseLevel[2] ? 'row-reverse' : 'row';
+    flexWrap = reverseLevel[2] ? 'wrap-reverse' : 'wrap';
   }
 
   if (viewPort === viewports.lg) {
     flexDirection = reverseLevel[3] ? 'row-reverse' : 'row';
+    flexWrap = reverseLevel[3] ? 'wrap-reverse' : 'wrap';
   }
 
   if (viewPort === viewports.xl) {
     flexDirection = reverseLevel[4] ? 'row-reverse' : 'row';
+    flexWrap = reverseLevel[4] ? 'wrap-reverse' : 'wrap';
   }
 
   return /*#__PURE__*/_jsx(View, {
@@ -112,6 +118,7 @@ const Row = /*#__PURE__*/forwardRef(({
     ...rest,
     style: [styles.row, {
       flexDirection,
+      flexWrap,
       ...horizontalAlignStyles(horizontalAlign),
       ...verticalAlignStyles(verticalAlign),
       ...distributeStyles(distribute)
@@ -128,8 +135,7 @@ const styles = StyleSheet.create({
     flexGrow: 0,
     flexShrink: 1,
     flexBasis: 'auto',
-    flexDirection: 'row',
-    flexWrap: 'wrap'
+    flexDirection: 'row'
   }
 });
 Row.propTypes = {

package/lib-module/HorizontalScroll/HorizontalScroll.js

@@ -129,7 +129,6 @@ const HorizontalScroll = /*#__PURE__*/forwardRef(({
       onLayout: handleContainerLayout,
       showsHorizontalScrollIndicator: false,
       contentContainerStyle: [staticStyles.scrollContainer, {
-        marginBottom: gutter,
         borderBottomWidth,
         borderBottomColor
       }],

package/lib-module/HorizontalScroll/HorizontalScrollButton.js

@@ -1,27 +1,18 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { resolvePressableTokens, selectTokens, variantProp, getTokensPropType, useCopy, copyPropTypes, a11yProps } from '../utils';
-import Icon from '../Icon';
-import Typography from '../Typography';
+import View from "react-native-web/dist/exports/View";
+import { variantProp, getTokensPropType, useCopy, copyPropTypes, a11yProps } from '../utils';
+import { useThemeTokens } from '../ThemeProvider';
+import IconButton from '../IconButton';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const selectButtonStyles = ({
-  borderRadius,
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  padding
-}, direction) => [staticStyles.absolute, staticStyles[direction], {
-  borderRadius,
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  padding
-}];
+const selectContainerStyles = ({
+  offset
+}) => ({
+  marginTop: offset ? -offset : 0
+});
 /**
  * Button within a Tabs component showing users that content is available to the left or
  * right, scrolling a screen's worth of content left or right when pressed.
@@ -35,47 +26,31 @@ const selectButtonStyles = ({
 const HorizontalScrollButton = /*#__PURE__*/forwardRef(({
   direction = 'next',
   icon,
-  onPress,
   offset,
+  onPress,
   variant,
   tokens,
   copy
 }, ref) => {
-  const getTokens = useThemeTokensCallback('HorizontalScrollButton', tokens, variant);
-
-  const resolveButtonTokens = pressableState => resolvePressableTokens(getTokens, pressableState);
-
-  const getPressableStyle = pressableState => [selectButtonStyles(resolveButtonTokens(pressableState), direction), {
-    marginTop: -1 * (offset || 0)
-  }];
-
+  const themeTokens = useThemeTokens('HorizontalScrollButton', tokens, variant);
   const getCopy = useCopy({
     dictionary,
     copy
   });
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    style: getPressableStyle,
-    onPress: onPress,
-    accessibilityLabel: label,
-    accessibilityRole: "button" // For keyboard-tab or screenreader-swipe navigation, users can just go through all items
-    ,
-    ...a11yProps.nonFocusableProps,
-    children: pressableState => {
-      const iconTokens = selectTokens('Icon', resolveButtonTokens(pressableState), 'icon');
-      return icon ? /*#__PURE__*/_jsx(Icon, {
-        icon: icon,
-        tokens: iconTokens
-      }) : /*#__PURE__*/_jsx(Typography, {
-        tokens: {
-          fontSize: iconTokens.size,
-          lineHeight: 1,
-          color: iconTokens.color
-        },
-        children: direction === 'next' ? '→' : '←'
-      });
-    }
+  return /*#__PURE__*/_jsx(View, {
+    style: [staticStyles.absolute, staticStyles[direction], selectContainerStyles({
+      offset
+    })],
+    children: /*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: label,
+      icon: icon,
+      onPress: onPress,
+      ref: ref,
+      tokens: themeTokens,
+      variant: variant,
+      ...a11yProps.nonFocusableProps
+    })
   });
 });
 HorizontalScrollButton.displayName = 'HorizontalScrollButton';