@telus-uds/components-base 1.16.0 → 1.18.0

package/lib-module/QuickLinks/QuickLinks.js

@@ -0,0 +1,71 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import { getTokensPropType, variantProp } from '../utils';
+import List from '../List';
+import StackWrap from '../StackView/StackWrap';
+import QuickLinksCard from './QuickLinksCard';
+/**
+ * QuickLinks renders a list of interactive items. How it renders these items depends on theme options:
+ *  - If the theme returns `list` token as true, it renders an ordered list based on List
+ *  - If the theme returns `button` token as true and `list` as false, it renders a wrapping horizontal bar of buttons
+ *  - If the theme returns `card` token as true, it wraps the above with a `Card`.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const QuickLinks = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    listTokens,
+    cardTokens,
+    children,
+    tag = 'ul',
+    ...rest
+  } = _ref;
+  const viewport = useViewport();
+  const {
+    dividers,
+    list,
+    card,
+    stackSpace,
+    stackGap,
+    stackJustify
+  } = useThemeTokens('QuickLinks', tokens, variant, {
+    viewport
+  });
+
+  const content = list && /*#__PURE__*/_jsx(List, {
+    ref: ref,
+    tokens: listTokens,
+    showDivider: dividers,
+    tag: tag,
+    ...rest,
+    children: children
+  }) || /*#__PURE__*/_jsx(StackWrap, {
+    space: stackSpace,
+    gap: stackGap,
+    tokens: {
+      justifyContent: stackJustify
+    },
+    tag: tag,
+    ...rest,
+    children: children
+  });
+
+  return card ? /*#__PURE__*/_jsx(QuickLinksCard, {
+    tokens: cardTokens,
+    children: content
+  }) : content;
+});
+QuickLinks.displayName = 'QuickLinks';
+QuickLinks.propTypes = {
+  tokens: getTokensPropType('QuickLinks'),
+  cardTokens: getTokensPropType('Card'),
+  listTokens: getTokensPropType('QuickLinksList'),
+  tag: PropTypes.string,
+  variant: variantProp.propType,
+  children: PropTypes.node
+};
+export default QuickLinks;

package/lib-module/QuickLinks/QuickLinksCard.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { getTokensPropType, variantProp } from '../utils';
+import CardBase from '../Card/CardBase';
+/**
+ * Private subcomponent for use within QuickLinks.
+ *
+ * Restyled Card with identical behaviour to Card, but themed according to the
+ * QuickLinksCard theme rather than the Card theme.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const QuickLinksList = _ref => {
+  let {
+    tokens,
+    variant,
+    children
+  } = _ref;
+  const themeTokens = useThemeTokens('QuickLinksCard', tokens, variant);
+  return /*#__PURE__*/_jsx(CardBase, {
+    tokens: themeTokens,
+    children: children
+  });
+};
+
+QuickLinksList.propTypes = {
+  tokens: getTokensPropType('QuickLinksCard'),
+  variant: variantProp.propType,
+  children: PropTypes.node
+};
+export default QuickLinksList;

package/lib-module/QuickLinks/QuickLinksItem.js

@@ -0,0 +1,50 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { getTokensPropType, variantProp, withLinkRouter } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
+import PressableListItemBase from '../List/PressableListItemBase';
+import ButtonBase from '../Button/ButtonBase';
+/**
+ * Public component exported as QuickLinks.Item, for use as children of QuickLinks.
+ *
+ * Receives props injected by QuickLinks and renders the appropriate child component.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const QuickLinksItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    ...rest
+  } = _ref;
+  const viewport = useViewport();
+  const {
+    list
+  } = useThemeTokens('QuickLinks', tokens, variant, {
+    viewport
+  });
+  const themeName = list ? 'QuickLinksList' : 'QuickLinksButton';
+  const getTokens = useThemeTokensCallback(themeName, tokens, variant);
+  return list ? /*#__PURE__*/_jsx(PressableListItemBase, {
+    ref: ref,
+    tokens: getTokens,
+    ...rest,
+    children: children
+  }) : /*#__PURE__*/_jsx(ButtonBase, {
+    ref: ref,
+    tokens: getTokens,
+    ...rest,
+    children: children
+  });
+});
+QuickLinksItem.displayName = 'QuickLinksItem';
+QuickLinksItem.propTypes = { ...withLinkRouter.propTypes,
+  ...PressableListItemBase.propTypes,
+  ...ButtonBase.propTypes,
+  tokens: getTokensPropType('QuickLinksList', 'QuickLinksButton'),
+  variant: variantProp.propType,
+  children: PropTypes.node
+};
+export default withLinkRouter(QuickLinksItem);

package/lib-module/QuickLinks/index.js

@@ -0,0 +1,4 @@
+import QuickLinks from './QuickLinks';
+import QuickLinksItem from './QuickLinksItem';
+QuickLinks.Item = QuickLinksItem;
+export default QuickLinks;

package/lib-module/StackView/StackWrap.js

@@ -1,14 +1,15 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState } from 'react';
 import Platform from "react-native-web/dist/exports/Platform";
+import useSafeLayoutEffect from '../utils/useSafeLayoutEffect';
 import StackWrapBox from './StackWrapBox';
 import StackWrapGap from './StackWrapGap'; // In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
 
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const cssSupports = function () {
+const cssSupports = (property, value) => {
   var _window$CSS;
 
-  return typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(...arguments);
+  return Platform.OS === 'web' && typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(property, value);
 }; // CSS.supports needs an example of the type of value you intend to use.
 // Will be an integer appended `px` after hooks and JSX styles are resolved.
 
@@ -25,22 +26,24 @@ const exampleGapValue = '1px';
 const StackWrap = /*#__PURE__*/forwardRef((props, ref) => {
   var _props$gap;
 
+  const [canUseCSSGap, setCanUseCSSGap] = useState(false);
   const {
     space
   } = props; // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
 
   const gap = (_props$gap = props.gap) !== null && _props$gap !== void 0 ? _props$gap : space;
-  const canUseCSSGap = Platform.OS === 'web' && gap === space && cssSupports('gap', exampleGapValue);
-  return canUseCSSGap ?
-  /*#__PURE__*/
-  // If possible, use the cleaner implementation that applies CSS `gap` styles to the container.
-  _jsx(StackWrapGap, {
-    ref: ref,
-    ...props
-  }) :
-  /*#__PURE__*/
+  const gapEqualsSpace = gap === space; // If possible, use the cleaner implementation that applies CSS `gap` styles to the container,
+  // preserving direct parent-child relationships between the container and each item, which
+  // can result in clearer descriptions on some screen readers (e.g. radio "X of Y" on MacOS).
   // Else, use the fallback implementation which renders a `Box` component around each child.
-  _jsx(StackWrapBox, {
+
+  const Component = canUseCSSGap ? StackWrapGap : StackWrapBox; // In SSR, the type of implementation must match the server during hydration, but
+  // the server can't know if gap is supported, so never use it until after hydration.
+
+  useSafeLayoutEffect(() => {
+    setCanUseCSSGap(gapEqualsSpace && cssSupports('gap', exampleGapValue));
+  }, [gapEqualsSpace]);
+  return /*#__PURE__*/_jsx(Component, {
     ref: ref,
     ...props
   });

package/lib-module/Timeline/Timeline.js

@@ -0,0 +1,174 @@
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+import View from "react-native-web/dist/exports/View";
+import { useThemeTokens } from '../ThemeProvider';
+import { getTokensPropType, variantProp, a11yProps, viewProps, selectSystemProps, getA11yPropsFromHtmlTag, layoutTags } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const selectDotStyles = _ref => {
+  let {
+    dotWidth,
+    timelineColor,
+    dotBorderWidth,
+    dotColor
+  } = _ref;
+  return {
+    width: dotWidth,
+    height: dotWidth,
+    borderRadius: dotWidth / 2,
+    backgroundColor: dotColor,
+    borderWidth: dotBorderWidth,
+    borderColor: timelineColor
+  };
+};
+
+const selectConnectorStyles = _ref2 => {
+  let {
+    timelineColor,
+    connectorHeight,
+    connectorWidth
+  } = _ref2;
+  return {
+    width: connectorWidth,
+    height: connectorHeight,
+    backgroundColor: timelineColor
+  };
+};
+
+const selectTimelineContainerStyle = _ref3 => {
+  let {
+    timelineContainerDirection
+  } = _ref3;
+  return {
+    flexDirection: timelineContainerDirection
+  };
+};
+
+const selectLineItemStyles = _ref4 => {
+  let {
+    lineItemAlign,
+    lineItemDirection,
+    lineItemMarginBottom,
+    lineItemMarginRight
+  } = _ref4;
+  return {
+    alignItems: lineItemAlign,
+    flexDirection: lineItemDirection,
+    marginBottom: lineItemMarginBottom,
+    marginRight: lineItemMarginRight,
+    overflow: 'hidden'
+  };
+};
+
+const selectLineItemContainer = _ref5 => {
+  let {
+    lineItemContainerDirection,
+    lineContainerFlexSize
+  } = _ref5;
+  return {
+    flexDirection: lineItemContainerDirection,
+    flex: lineContainerFlexSize
+  };
+};
+
+const selectItemContentStyles = (_ref6, isLastChild) => {
+  let {
+    itemContentFlexSize,
+    itemContentMarginBottom,
+    itemContentMarginRight
+  } = _ref6;
+  return {
+    flex: itemContentFlexSize,
+    marginBottom: !isLastChild && itemContentMarginBottom,
+    marginRight: !isLastChild && itemContentMarginRight
+  };
+};
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+/**
+ * Timeline is a component that displays either a horizontal or vertical list of the
+ * children components passed by props
+ *
+ * ## Component API
+ *
+ * - `horizontal` In order to display the Component list horizontally
+ *
+ *
+ * ## A11y guidelines
+ * Timeline link supports all the common a11y props.
+ */
+
+const Timeline = /*#__PURE__*/forwardRef((_ref7, ref) => {
+  let {
+    tokens,
+    variant = {},
+    children,
+    accessibilityLabel,
+    tag = 'ul',
+    childrenTag = 'li',
+    ...rest
+  } = _ref7;
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Timeline', tokens, variant, {
+    viewport
+  });
+  const containerProps = { ...selectProps(rest),
+    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole || 'list'),
+    accessibilityLabel
+  };
+  return /*#__PURE__*/_jsx(View, { ...containerProps,
+    ref: ref,
+    style: selectTimelineContainerStyle(themeTokens),
+    children: children.map((child, index) => {
+      var _child$props;
+
+      const childrenProps = { ...getA11yPropsFromHtmlTag(childrenTag, (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.accessibilityRole) || 'listitem')
+      };
+      return /*#__PURE__*/_jsxs(View, {
+        style: selectLineItemContainer(themeTokens) // eslint-disable-next-line react/no-array-index-key
+        ,
+        ...childrenProps,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: selectLineItemStyles(themeTokens),
+          children: [/*#__PURE__*/_jsx(View, {
+            style: selectDotStyles(themeTokens)
+          }), /*#__PURE__*/_jsx(View, {
+            style: selectConnectorStyles(themeTokens)
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: selectItemContentStyles(themeTokens, index + 1 === children.length),
+          children: child
+        })]
+      }, "timeline-".concat(index, "-").concat(child.displayName));
+    })
+  });
+});
+Timeline.displayName = 'Timeline';
+Timeline.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Timeline'),
+  variant: variantProp.propType,
+
+  /**
+   * A list of components that will be rendered either horizontally or vertically
+   */
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+
+  /**
+   * A required accessibility label that needs to be passed to be used on List
+   * which is applied as normal for a React Native accessibilityLabel prop.
+   */
+  accessibilityLabel: PropTypes.string.isRequired,
+
+  /**
+   * Sets the HTML tag of the outer container and the children. By default `'li'` for the children
+   * and `'ul'` for the container
+   *
+   * If either `tag` or `childrenTag` is overridden, the other should be too, to avoid producing invalid HTML.
+   *
+   */
+  tag: PropTypes.oneOf(layoutTags),
+  childrenTag: PropTypes.oneOf(layoutTags)
+};
+export default Timeline;

package/lib-module/Timeline/index.js

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

package/lib-module/ViewportProvider/useViewportListener.js

@@ -1,20 +1,10 @@
-import { useLayoutEffect } from 'react';
 import Dimensions from "react-native-web/dist/exports/Dimensions";
-import { viewports } from '@telus-uds/system-constants'; // Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
+import { viewports } from '@telus-uds/system-constants';
+import useSafeLayoutEffect from '../utils/useSafeLayoutEffect'; // Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
 // to update on every pixel change during window resize; but we only want rerenders to occur
 // when a viewport threshold has been crossed.
 
 const lookupViewport = () => viewports.select(Dimensions.get('window').width);
-/**
- * In SSR, React gets spooked if it sees `useLayoutEffect` and fires warnings assuming the
- * developer doesn't realise the effect won't run: https://reactjs.org/link/uselayouteffect-ssr
- *
- * To avoid these warnings while still conforming to the rules of hooks, always use this
- * explicitly no-op hook, instead of the useLayoutEffect that is implicitly no-op on SSR.
- */
-
-
-const useViewportListenerSSR = () => {};
 /**
  * When client-side rendering, immediately set the viewport to the correct value as a layout effect so
  * if the viewport isn't the smallest, any SSR-rendered components rerender correctly before anything
@@ -22,8 +12,8 @@ const useViewportListenerSSR = () => {};
  */
 
 
-const useViewportListenerCSR = setViewport => {
-  useLayoutEffect(() => {
+const useViewportListener = setViewport => {
+  useSafeLayoutEffect(() => {
     setViewport(lookupViewport());
 
     const onChange = _ref => {
@@ -44,9 +34,6 @@ const useViewportListenerCSR = setViewport => {
       }
     };
   }, [setViewport]);
-}; // Window is a defined global object in both Web and Native client-side, and undefined in SSR
-
+};
 
-const isSSR = typeof window === 'undefined';
-const useViewportListener = isSSR ? useViewportListenerSSR : useViewportListenerCSR;
 export default useViewportListener;

package/lib-module/index.js

@@ -24,6 +24,7 @@ export { default as Modal } from './Modal';
 export { default as Notification } from './Notification';
 export { default as Pagination } from './Pagination';
 export { default as Progress } from './Progress';
+export { default as QuickLinks } from './QuickLinks';
 export { default as Radio } from './Radio';
 export * from './Radio';
 export { default as RadioCard } from './RadioCard';
@@ -40,6 +41,7 @@ export { default as StepTracker } from './StepTracker';
 export { default as Tabs } from './Tabs';
 export { default as Tags } from './Tags';
 export * from './TextInput';
+export { default as Timeline } from './Timeline';
 export * from './ToggleSwitch';
 export { default as Tooltip } from './Tooltip';
 export { default as TooltipButton } from './TooltipButton';
@@ -48,4 +50,5 @@ export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
 export { default as BaseProvider } from './BaseProvider';
 export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
 export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
-export * from './utils';
+export * from './utils';
+export { Portal } from '@gorhom/portal';

package/lib-module/utils/animation/useVerticalExpandAnimation.js

@@ -1,7 +1,8 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Easing from "react-native-web/dist/exports/Easing";
-import Platform from "react-native-web/dist/exports/Platform"; // TODO: systematise animations
+import Platform from "react-native-web/dist/exports/Platform";
+import useSafeLayoutEffect from '../useSafeLayoutEffect'; // TODO: systematise animations
 // https://github.com/telus/universal-design-system/issues/487
 
 function useVerticalExpandAnimation(_ref) {
@@ -19,7 +20,7 @@ function useVerticalExpandAnimation(_ref) {
     expandDuration,
     collapseDuration
   } = tokens;
-  useLayoutEffect(() => {
+  useSafeLayoutEffect(() => {
     if (expandStateChanged) {
       setIsAnimating(true);
       setWasExpanded(isExpanded);

package/lib-module/utils/index.js

@@ -9,6 +9,7 @@ export { default as useCopy } from './useCopy';
 export { default as useHash } from './useHash';
 export { default as useSpacingScale } from './useSpacingScale';
 export { default as useResponsiveProp } from './useResponsiveProp';
+export { default as useSafeLayoutEffect } from './useSafeLayoutEffect';
 export { default as useScrollBlocking } from './useScrollBlocking';
 export * from './useResponsiveProp';
 export { default as useUniqueId } from './useUniqueId';

package/lib-module/utils/useSafeLayoutEffect.js

@@ -0,0 +1,30 @@
+import { useLayoutEffect, useCallback } from 'react';
+import { useHydrationContext } from '../BaseProvider/HydrationContext';
+const isSSR = typeof window === 'undefined';
+
+const noop = () => {};
+/**
+ * useSafeLayoutEffect is a alternative to useLayoutEffect that avoids SSR hydration problems:
+ *  - In a client-side render, it uses useLayoutEffect to avoid flashing the pre-render UI to the user.
+ *  - During hydration from SSR, the provided function is skipped to avoid mismatches from server content.
+ *  - In SSR, it is a no-op function to avoid warnings about using useLayoutEffect in SSR
+ */
+
+
+const useSafeLayoutEffect = isSSR ? noop // avoid React's fussy warnings by ensuring to never call useLayoutEffect on server
+: function (fn) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  const isHydrating = useHydrationContext(); // Callback updates and effect re-runs when deps array content changes, like useEffect.
+
+  /* eslint-disable-next-line react-hooks/exhaustive-deps */
+
+  const callback = useCallback(fn, deps);
+  useLayoutEffect(() => {
+    // Do nothing before hydrating server-generated content, like useEffect. When hydration completes,
+    // useHydrationContext provides false, re-rendering this hook and re-running the effect.
+    if (isHydrating) return noop; // If there's no hydration in progress, behave like useLayoutEffect.
+
+    return callback();
+  }, [isHydrating, callback]);
+};
+export default useSafeLayoutEffect;

package/package.json

@@ -7,9 +7,10 @@
     "url": "https://github.com/telus/universal-design-system/issues"
   },
   "dependencies": {
-    "airbnb-prop-types": "^2.16.0",
+    "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.5.0",
+    "@telus-uds/system-theme-tokens": "^2.6.0",
+    "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",
@@ -21,10 +22,10 @@
     "@telus-uds/browserslist-config": "^1.0.4",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react": "^13.3.0",
-    "@testing-library/react-native": "11.0.0",
-    "react-test-renderer": "~18.0.0",
     "@testing-library/react-hooks": "~7.0.1",
+    "@testing-library/react-native": "11.0.0",
     "@testing-library/react-native-17": "npm:@testing-library/react-native@7.2.0",
+    "react-test-renderer": "~18.0.0",
     "react-test-renderer-17": "npm:react-test-renderer@17.0.2",
     "webpack": "5.x"
   },
@@ -66,5 +67,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.16.0"
+  "version": "1.18.0"
 }

package/src/BaseProvider/HydrationContext.jsx

@@ -0,0 +1,44 @@
+import React, { createContext, useContext, useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import { Platform } from 'react-native'
+
+const HydrationContext = createContext()
+const isSSR = typeof window === 'undefined'
+const hasWebStyleTag = () => {
+  if (isSSR || Platform.OS !== 'web' || typeof document !== 'object') {
+    return false
+  }
+  return Boolean(document?.getElementById('react-native-stylesheet'))
+}
+
+/**
+ * Returns true if this render cycle is the hydration of existing SSR content.
+ *
+ * Use this when changing how content renders based on data that is instantly available
+ * during the very first client-side render or hydration, but not available on the server,
+ * to ensure no changes happen until the original SSR DOM has been hydrated.
+ */
+export const useHydrationContext = () => useContext(HydrationContext)
+
+/**
+ * Allows components and hooks to observe if SSR hydration is currently in progress
+ * and if so, to re-render with content that differs to the server when it is complete.
+ */
+export const HydrationProvider = ({ children }) => {
+  const [hasMounted, setHasMounted] = useState(false)
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  // If we've got a HydrationProvider inside a HydrationProvider somehow, defer to the top one
+  const valueFromAncestor = useHydrationContext()
+
+  const isHydrating = valueFromAncestor ?? Boolean(!hasMounted && hasWebStyleTag())
+  return <HydrationContext.Provider value={isHydrating}>{children}</HydrationContext.Provider>
+}
+
+HydrationProvider.propTypes = {
+  children: PropTypes.node
+}
+
+export default HydrationProvider

package/src/BaseProvider/index.jsx

@@ -1,17 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { PortalProvider } from '@gorhom/portal'
 import A11yInfoProvider from '../A11yInfoProvider'
 import ViewportProvider from '../ViewportProvider'
 import ThemeProvider from '../ThemeProvider'
+import { HydrationProvider } from './HydrationContext'
 
 const BaseProvider = ({ defaultTheme, children, themeOptions }) => (
-  <A11yInfoProvider>
-    <ViewportProvider>
-      <ThemeProvider defaultTheme={defaultTheme} themeOptions={themeOptions}>
-        {children}
-      </ThemeProvider>
-    </ViewportProvider>
-  </A11yInfoProvider>
+  <HydrationProvider>
+    <A11yInfoProvider>
+      <ViewportProvider>
+        <ThemeProvider defaultTheme={defaultTheme} themeOptions={themeOptions}>
+          <PortalProvider>{children}</PortalProvider>
+        </ThemeProvider>
+      </ViewportProvider>
+    </A11yInfoProvider>
+  </HydrationProvider>
 )
 
 BaseProvider.propTypes = {

package/src/Button/ButtonBase.jsx

@@ -148,9 +148,9 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
   })
 }
 
-const selectItemIconTokens = ({ color, iconSize }) => ({
+const selectItemIconTokens = ({ color, iconColor, iconSize }) => ({
   size: iconSize,
-  color
+  color: iconColor || color
 })
 
 const ButtonBase = forwardRef(