@telus-uds/components-base 1.18.1 → 1.20.0

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -0,0 +1,248 @@
+import React, { forwardRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useCopy, useMultipleInputValues, variantProp } from '../utils';
+import dictionary from './dictionary';
+import Box from '../Box';
+import { Button, ButtonDropdown } from '../Button';
+import { CheckboxGroup } from '../Checkbox';
+import Divider from '../Divider';
+import FlexGrid from '../FlexGrid';
+import Modal from '../Modal';
+import Spacer from '../Spacer';
+import StackView from '../StackView';
+import Typography from '../Typography';
+import { TextButton } from '../Link';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const {
+  Col,
+  Row
+} = FlexGrid;
+const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    label,
+    id = label,
+    variant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    copy = 'en',
+    readOnly = false,
+    inactive = false,
+    rowLimit = 12,
+    ...rest
+  } = _ref;
+  const {
+    currentValues,
+    setValues
+  } = useMultipleInputValues({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+  const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant);
+
+  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
+
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const [isOpen, setIsOpen] = useState(false);
+  const [checkedIds, setCheckedIds] = useState(currentValues !== null && currentValues !== void 0 ? currentValues : []);
+  const colSize = items.length > rowLimit ? 2 : 1;
+  const isSelected = currentValues.length > 0;
+  const uniqueFields = ['id', 'label'];
+
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error("MultiSelectFilter items must have unique ".concat(uniqueFields.join(', ')));
+  } // Pass an object of relevant component state as first argument for any passed-in press handlers
+
+
+  const pressHandlers = getPressHandlersWithArgs(rest, [{
+    id,
+    label,
+    currentValues
+  }]);
+
+  const handleChange = event => {
+    if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+    setIsOpen(true);
+  };
+
+  const onApply = e => {
+    setValues(e);
+    setIsOpen(false);
+  };
+
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Modal, {
+      isOpen: isOpen,
+      onClose: () => setIsOpen(false),
+      variant: {
+        width: colSize > 1 ? 'size576' : 's'
+      },
+      children: [/*#__PURE__*/_jsx(Row, {
+        children: /*#__PURE__*/_jsx(Typography, {
+          variant: {
+            size: 'h4'
+          },
+          children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
+        })
+      }), /*#__PURE__*/_jsx(Spacer, {
+        space: 4
+      }), /*#__PURE__*/_jsx(Spacer, {
+        space: 1
+      }), /*#__PURE__*/_jsx(Box, {
+        scroll: true,
+        children: /*#__PURE__*/_jsx(Row, {
+          distribute: "between",
+          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(Col, {
+            xs: 12 / colSize,
+            children: [/*#__PURE__*/_jsx(CheckboxGroup, {
+              items: items.slice(i * rowLimit, (i + 1) * rowLimit),
+              checkedIds: checkedIds,
+              onChange: e => setCheckedIds(e, i)
+            }), /*#__PURE__*/_jsx(Spacer, {
+              size: 4
+            })]
+          }, i))
+        })
+      }), /*#__PURE__*/_jsx(Divider, {
+        variant: {
+          width: 'full',
+          color: 'E3E6E8',
+          decorative: true,
+          weight: 'thin'
+        },
+        space: 4
+      }), /*#__PURE__*/_jsx(Row, {
+        children: /*#__PURE__*/_jsxs(StackView, {
+          direction: "row",
+          space: 3,
+          tokens: {
+            alignItems: 'center'
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            onPress: () => onApply(checkedIds),
+            variant: {
+              size: 'small',
+              priority: 'high'
+            },
+            children: getCopy('applyButtonLabel')
+          }), /*#__PURE__*/_jsx(Box, {
+            children: /*#__PURE__*/_jsx(TextButton, {
+              onPress: () => setCheckedIds([]),
+              children: getCopy('clearButtonLabel')
+            })
+          })]
+        })
+      })]
+    }), /*#__PURE__*/_jsx(ButtonDropdown, {
+      ref: ref,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id)]
+  });
+});
+MultiSelectFilter.displayName = 'MultiSelectFilter';
+MultiSelectFilter.propTypes = {
+  /**
+   * The text displayed to the user in a ButtonDropdown.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * An optional unique string may be provided to identify the ButtonDropdown.
+   * If not provided, the label is used.
+   */
+  id: PropTypes.string,
+
+  /**
+   * Sets the variant for ButtonDropdown element.
+   */
+  variant: variantProp.propType,
+
+  /**
+   * Sets the tokens for ButtonDropdown element.
+   */
+  tokens: getTokensPropType('ButtonDropdown'),
+
+  /**
+   * The options a user may select.
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    /**
+     * The text displayed to the user with a checkbox, describing this option.
+     */
+    label: PropTypes.string.isRequired,
+
+    /**
+     * An optional unique string may be provided to identify this option.
+     * If not provided, the label is used.
+     */
+    id: PropTypes.string
+  })),
+
+  /**
+   * If the selected item(s) in the checkbox group(s) are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the MultiSelectFilter a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * If `values` is not passed, making the MultiSelectFilter an "uncontrolled" component
+   * managing its own selected state, a default set of selections may be provided.
+   * Changing the `initialValues` does not change the user's selections.
+   */
+  initialValues: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * If provided, sets a maximum number of items a user may select at once.
+   */
+  maxValues: PropTypes.number,
+
+  /**
+   * If provided, this function is called when the current selection is changed
+   * and is passed an array of the `id`s of all currently selected `items`.
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+
+  /**
+   * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
+   */
+  readOnly: PropTypes.string,
+
+  /**
+   * If true, the MultiSelectFilter cannot be interacted with, ButtonDropdown is
+   * set as `disabled` and if the theme supports `inactive` appearances rules, these
+   * are applied.
+   */
+  inactive: PropTypes.string,
+
+  /**
+   * Sets the maximum number of items in one column. If number of items are more
+   * than the `rowLimit`, they will be rendered in 2 columns.
+   */
+  rowLimit: PropTypes.number
+};
+export default MultiSelectFilter;

package/lib-module/MultiSelectFilter/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    filterByLabel: 'Filter by %{filterCategory}:',
+    applyButtonLabel: 'Apply',
+    clearButtonLabel: 'Clear'
+  },
+  fr: {
+    filterByLabel: 'Filtrer par %{filterCategory}:',
+    applyButtonLabel: 'Appliquer',
+    clearButtonLabel: 'Effacer'
+  }
+};

package/lib-module/MultiSelectFilter/index.js

@@ -0,0 +1,2 @@
+import MultiSelectFilter from './MultiSelectFilter';
+export default MultiSelectFilter;

package/lib-module/Pagination/SideButton.js

@@ -8,13 +8,15 @@ import { useViewport } from '../ViewportProvider';
 import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter } from '../utils';
 import dictionary from './dictionary';
 import useCopy from '../utils/useCopy'; // We need to drop the icon here since it gets rendered via children and not
-// `ButtonBase` in order to tap into the state of the button
+// `ButtonBase` in order to tap into the state of the button; `displayLabel` flag
+// is also not needed
 
 import { jsx as _jsx } from "react/jsx-runtime";
 
 const selectButtonTokens = _ref => {
   let {
     icon: _,
+    displayLabel: __,
     ...rest
   } = _ref;
   return selectTokens('Button', rest);
@@ -59,7 +61,8 @@ const SideButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     copy
   });
   const {
-    icon
+    icon,
+    displayLabel
   } = getTokens(tokens, buttonVariant);
 
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
@@ -67,7 +70,6 @@ const SideButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
 
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
-  const showLabel = viewport !== 'sm' && viewport !== 'xs';
   const accessibilityLabel = direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel');
   const accessibilityRole = href !== undefined ? 'link' : 'button';
   const {
@@ -99,7 +101,7 @@ const SideButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
         space: 1,
         iconPosition: directionToSide[direction],
         iconProps: iconProps,
-        children: showLabel && /*#__PURE__*/_jsx(Text, {
+        children: displayLabel && /*#__PURE__*/_jsx(Text, {
           style: textStyles,
           children: label
         })

package/lib-module/Responsive/Responsive.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import { useResponsiveProp } from '../utils';
+/**
+ * Responsive conditionally renders children based on whether the viewport matches the provided
+ * min and max viewports.
+ *
+ * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
+ * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
+ * after hydration. This may cause a layout shift on devices other than the narrowest.
+ */
+
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Responsive = _ref => {
+  let {
+    min = 'xs',
+    max,
+    children
+  } = _ref;
+  // Start returning children at the 'min' viewport or greater
+  const byViewports = {
+    [min]: children
+  };
+
+  if (max && max !== 'xl') {
+    // Stop returning children at the viewport one above 'max' or greater
+    const maxIndex = viewports.keys.indexOf(max);
+    const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null;
+    if (maxPlusOne) byViewports[maxPlusOne] = null;
+  }
+
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: useResponsiveProp(byViewports, null)
+  });
+};
+
+Responsive.propTypes = {
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: PropTypes.node.isRequired
+};
+export default Responsive;

package/lib-module/Responsive/index.js

@@ -0,0 +1,2 @@
+import Responsive from './Responsive';
+export default Responsive;

package/lib-module/Search/Search.js

@@ -1,16 +1,13 @@
 import React, { forwardRef } from 'react';
 import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
 import TextInputBase from '../TextInput/TextInputBase';
 import ButtonBase from '../Button/ButtonBase';
-import StackView from '../StackView';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
 
@@ -39,20 +36,11 @@ const selectInputTokens = _ref => {
 
 const selectButtonTokens = tokens => selectTokens('Button', tokens);
 
-const selectIconsContainerStyle = _ref2 => {
-  let {
-    paddingRight
-  } = _ref2;
-  return {
-    paddingRight
-  };
-};
-
-const selectIconTokens = _ref3 => {
+const selectIconTokens = _ref2 => {
   let {
     iconSize,
     iconColor
-  } = _ref3;
+  } = _ref2;
   return {
     color: iconColor,
     size: iconSize
@@ -73,7 +61,7 @@ const selectIconTokens = _ref3 => {
  */
 
 
-const Search = /*#__PURE__*/forwardRef((_ref4, ref) => {
+const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     initialValue,
     value,
@@ -88,7 +76,7 @@ const Search = /*#__PURE__*/forwardRef((_ref4, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref4;
+  } = _ref3;
   const {
     currentValue = '',
     setValue
@@ -122,8 +110,11 @@ const Search = /*#__PURE__*/forwardRef((_ref4, ref) => {
   };
 
   const handleClear = event => {
+    var _ref$current;
+
     setValue('', event);
-    if (onClear !== undefined) onClear('', event);
+    onClear === null || onClear === void 0 ? void 0 : onClear('', event);
+    ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
   };
 
   const handleFocus = event => {
@@ -140,10 +131,8 @@ const Search = /*#__PURE__*/forwardRef((_ref4, ref) => {
     testID,
     ...containerProps
   } = selectContainerProps(rest);
-  return /*#__PURE__*/_jsxs(View, {
-    style: staticStyles.container,
-    ...containerProps,
-    children: [/*#__PURE__*/_jsx(TextInputBase, {
+  return /*#__PURE__*/_jsx(View, { ...containerProps,
+    children: /*#__PURE__*/_jsx(TextInputBase, {
       nativeID: nativeID,
       testID: testID,
       ...selectInputProps(rest),
@@ -163,35 +152,29 @@ const Search = /*#__PURE__*/forwardRef((_ref4, ref) => {
       onChange: setValue,
       onSubmitEditing: handleSubmit,
       onFocus: handleFocus,
-      accessibilityLabel: a11yLabelText
-    }), /*#__PURE__*/_jsx(View, {
-      style: [staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)],
-      children: /*#__PURE__*/_jsxs(StackView, {
-        direction: "row",
-        space: buttonsGap,
-        children: [ClearButtonIcon && !isEmpty && /*#__PURE__*/_jsx(ButtonBase, {
-          onPress: handleClear,
-          inactive: inactive,
-          accessibilityRole: "button",
-          accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
-          tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
-          children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
-          })
-        }), SubmitButtonIcon && /*#__PURE__*/_jsx(ButtonBase, {
-          onPress: handleSubmit,
-          inactive: inactive,
-          accessibilityRole: "button",
-          accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
-          tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
+      accessibilityLabel: a11yLabelText,
+      buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/_jsx(ButtonBase, {
+        accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
+        accessibilityRole: "button",
+        inactive: inactive,
+        onPress: handleClear,
+        tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
+        children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
+        })
+      }, "clear"), SubmitButtonIcon && /*#__PURE__*/_jsx(ButtonBase, {
+        accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
+        accessibilityRole: "button",
+        inactive: inactive,
+        onPress: handleSubmit,
+        tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
+          priority: 'high'
+        })),
+        children: buttonState => /*#__PURE__*/_jsx(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
             priority: 'high'
-          })),
-          children: buttonState => /*#__PURE__*/_jsx(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
-              priority: 'high'
-            }))
-          })
-        })]
-      })
-    })]
+          }))
+        })
+      }, "submit")]
+    })
   });
 });
 Search.displayName = 'Search';
@@ -255,15 +238,4 @@ Search.propTypes = { ...selectedContainerPropTypes,
   tokens: getTokensPropType('Search'),
   variant: variantProp.propType
 };
-export default Search;
-const staticStyles = StyleSheet.create({
-  container: {// No styles needed here except the View defaults (position: relative etc)
-  },
-  iconsContainer: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center'
-  }
-});
+export default Search;

package/lib-module/Select/Picker.native.js

@@ -4,7 +4,8 @@ import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import NativePicker from 'react-native-picker-select';
 import { a11yProps, componentPropType } from '../utils';
-import Group from './Group'; // styling of the native input is very limited, most of the styles have to be applied to an additional View
+import Group from './Group';
+import { ANDROID_HEIGHT_OFFSET, ANDROID_HORIZONTAL_PADDING_OFFSET, ANDROID_DEFAULT_PADDING } from './constants'; // Styling of the native input is very limited, most of the styles have to be applied to an additional View
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -12,28 +13,29 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 const selectAndroidInputStyles = _ref => {
   let {
     height = 0,
-    paddingBottom = 0,
-    paddingTop = 0,
-    borderWidth = 0,
     color
   } = _ref;
   return {
-    height: height - paddingTop - paddingBottom - 2 * borderWidth,
+    height,
+    paddingBottom: 0,
+    paddingTop: 0,
     color
   };
-}; // the native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
+}; // The native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
 
 
 const selectAndroidContainerStyles = _ref2 => {
   let {
-    paddingLeft = 0,
-    paddingRight = 0,
+    paddingLeft = ANDROID_DEFAULT_PADDING,
+    paddingRight = ANDROID_DEFAULT_PADDING,
     ...rest
   } = _ref2;
-  return {
-    paddingLeft: paddingLeft > 8 ? paddingLeft - 8 : 0,
-    paddingRight: paddingRight > 8 ? paddingRight - 8 : 0,
-    ...rest
+  return { ...rest,
+    paddingLeft: paddingLeft > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingLeft - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
+    paddingRight: paddingRight > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingRight - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
+    paddingBottom: ANDROID_DEFAULT_PADDING,
+    paddingTop: ANDROID_DEFAULT_PADDING,
+    height: rest.height + ANDROID_HEIGHT_OFFSET
   };
 };
 
@@ -49,7 +51,7 @@ const Picker = /*#__PURE__*/forwardRef((_ref3, ref) => {
     placeholder,
     ...rest
   } = _ref3;
-  // ungroup items, since there's no way to support groups on native
+  // Ungroup items, since there's no way to support groups on native
   const flatChildren = Children.toArray(children).flatMap(child => {
     if (child.type === Group) {
       return child.props.children;

package/lib-module/Select/Select.js

@@ -7,6 +7,7 @@ import { applyTextStyles, useThemeTokens, applyOuterBorder, useTheme } from '../
 import { a11yProps, componentPropType, getTokensPropType, inputSupportsProps, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
 import Picker from './Picker';
 import InputSupports from '../InputSupports';
+import { ANDROID_VALIDATION_ICON_CONTAINER_OFFSET } from './constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, inputSupportsProps, viewProps]);
@@ -142,7 +143,11 @@ const selectValidationIconContainerStyles = _ref6 => {
   } = _ref6;
   return {
     paddingRight: icon ? paddingRight + iconSize : paddingRight,
-    paddingBottom
+    ...(Platform.OS === 'android' ? {
+      paddingBottom: paddingBottom + ANDROID_VALIDATION_ICON_CONTAINER_OFFSET
+    } : {
+      paddingBottom
+    })
   };
 };
 /**

package/lib-module/Select/constants.js

@@ -0,0 +1,5 @@
+// Because Android
+export const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5;
+export const ANDROID_HEIGHT_OFFSET = 12;
+export const ANDROID_HORIZONTAL_PADDING_OFFSET = 8;
+export const ANDROID_DEFAULT_PADDING = 0;

package/lib-module/StepTracker/Step.js

@@ -185,7 +185,8 @@ const Step = _ref7 => {
       space: 0,
       tokens: {
         alignItems: 'center',
-        flexGrow: 0
+        flexGrow: 0,
+        justifyContent: 'center'
       },
       children: [/*#__PURE__*/_jsx(View, {
         style: [staticStyles.connector, !isFirst && selectConnectorStyles(themeTokens, isActive)]

package/lib-module/Tags/Tags.js

@@ -15,7 +15,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
 
-const selectIconTextTokens = _ref => {
+const separateIconTextTokens = (_ref, returnRest) => {
   let {
     icon,
     iconPosition,
@@ -27,9 +27,10 @@ const selectIconTextTokens = _ref => {
     iconAlignSelf,
     iconPadding,
     iconTranslateX,
-    iconTranslateY
+    iconTranslateY,
+    ...rest
   } = _ref;
-  return {
+  return returnRest ? rest : {
     icon,
     iconPosition,
     iconSpace,
@@ -54,6 +55,10 @@ const selectIconTextTokens = _ref => {
   };
 };
 
+const selectIconTextTokens = tokens => separateIconTextTokens(tokens, false);
+
+const selectNonIconTextTokens = tokens => separateIconTextTokens(tokens, true);
+
 const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     variant,
@@ -82,7 +87,8 @@ const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
   } = themeTokens;
   const getItemTokens = useThemeTokensCallback('TagsItem', tokens, variant);
 
-  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
+  const getButtonTokens = buttonState => // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
+  selectTokens('Button', selectNonIconTextTokens(getItemTokens(buttonState)));
 
   const {
     currentValues,

package/lib-module/TextInput/TextInput.js

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
 import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
 import InputSupports from '../InputSupports';
 import TextInputBase from './TextInputBase';
@@ -61,6 +62,11 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
 TextInput.displayName = 'TextInput';
 TextInput.propTypes = { ...selectedSystemPropTypes,
   ...textInputPropTypes,
+
+  /**
+   * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
+   */
+  onClear: PropTypes.func,
   tokens: getTokensPropType('TextInput'),
   variant: variantProp.propType
 };