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

package/lib/cjs/Card/PressableCardBase.js

@@ -3,22 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectPressableCardTokens = exports.default = void 0;
+exports.selectPressableCardTokens = exports.PressableCardBase = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _CardBase = _interopRequireWildcard(require("./CardBase"));
+var _useViewport = require("../ViewportProvider/useViewport");
+var _styles = require("../ThemeProvider/utils/styles");
+var _themeTokens = require("../ThemeProvider/utils/theme-tokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _clickProps = require("../utils/props/clickProps");
+var _handlerProps = require("../utils/props/handlerProps");
+var _tokens = require("../utils/props/tokens");
+var _linkProps = require("../utils/props/linkProps");
+var _pressability = require("../utils/pressability");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _CardBase = require("./CardBase");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _viewProps.viewProps]);
 const selectFocusOverlayContainerStyles = tokens => {
   const {
     flex,
@@ -97,7 +105,7 @@ const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key
  * apps or sites directly: build themed components on top of this.
  */
 exports.selectPressableCardTokens = selectPressableCardTokens;
-const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const PressableCardBaseInner = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
@@ -115,22 +123,22 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
   const {
     onPress,
     ...rest
-  } = _utils.clickProps.toPressProps(rawRest);
-  const viewport = (0, _ViewportProvider.useViewport)();
+  } = _clickProps.clickProps.toPressProps(rawRest);
+  const viewport = (0, _useViewport.useViewport)();
   const additionalState = {
     checked,
     validation,
     inactive,
     viewport
   };
-  const getCardState = pressableState => (0, _utils.resolvePressableState)(pressableState, additionalState);
-  const getTokens = pressableState => (0, _ThemeProvider.validateThemeTokens)((0, _utils.resolvePressableTokens)(tokens, pressableState, additionalState), (0, _utils.getTokensSetPropType)(tokenKeys, {
+  const getCardState = pressableState => (0, _pressability.resolvePressableState)(pressableState, additionalState);
+  const getTokens = pressableState => (0, _themeTokens.validateThemeTokens)((0, _pressability.resolvePressableTokens)(tokens, pressableState, additionalState), (0, _tokens.getTokensSetPropType)(tokenKeys, {
     partial: true,
     allowFunction: true
   }), 'PressableCard');
   const getCardTokens = pressableState => {
     const allTokens = getTokens(pressableState);
-    const cardTokens = (0, _utils.selectTokens)('Card', allTokens);
+    const cardTokens = (0, _tokens.selectTokens)('Card', allTokens);
 
     // Handle focus border transparency to avoid double borders
     if (pressableState.focused && allTokens.borderWidth > 0) {
@@ -196,7 +204,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
       marginBottom,
       marginLeft,
       marginRight,
-      ...(0, _ThemeProvider.applyOuterBorder)({
+      ...(0, _styles.applyOuterBorder)({
         outerBorderColor,
         outerBorderGap,
         outerBorderWidth,
@@ -204,12 +212,15 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
       }),
       ..._Platform.default.select({
         web: {
-          outline: 'none'
+          outlineStyle: 'none',
+          // Reset default <button> centering behavior when react-native-web renders Pressable as a button
+          alignItems: 'stretch',
+          textAlign: 'inherit'
         }
       })
     };
   };
-  const handleChange = _utils.linkProps.handleHref({
+  const handleChange = _linkProps.linkProps.handleHref({
     href,
     onPress
   });
@@ -260,7 +271,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
         style: staticStyles.linkContainer,
         ...(hrefAttrs || {}),
         role: accessibilityRole,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.CardBase, {
           tokens: getCardTokens({
             pressed,
             focused,
@@ -292,7 +303,7 @@ const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
     children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(FocusBorderOverlay, {
       tokens: getTokens(pressableState),
       pressableState: pressableState,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.CardBase, {
         tokens: getCardTokens(pressableState),
         backgroundImage: backgroundImage,
         fullBleedContent: fullBleedContent,
@@ -317,7 +328,7 @@ const staticStyles = _StyleSheet.default.create({
     position: 'relative'
   },
   webOutlineNone: {
-    outline: 'none'
+    outlineStyle: 'none'
   },
   focusBorder: {
     position: 'absolute',
@@ -328,15 +339,15 @@ const staticStyles = _StyleSheet.default.create({
     pointerEvents: 'none'
   }
 });
-PressableCardBase.displayName = 'PressableCardBase';
-PressableCardBase.propTypes = {
+PressableCardBaseInner.displayName = 'PressableCardBase';
+PressableCardBaseInner.propTypes = {
   ...selectedSystemPropTypes,
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-  tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
+  tokens: (0, _tokens.getTokensSetPropType)(tokenKeys, {
     partial: true,
     allowFunction: true
   }),
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   backgroundImage: _propTypes.default.shape({
     // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
     // src is an object when used responsively to provide different image sources for different screen sizes
@@ -348,4 +359,4 @@ PressableCardBase.propTypes = {
   }),
   fullBleedContent: _CardBase.fullBleedContentPropTypes
 };
-var _default = exports.default = (0, _utils.withLinkRouter)(PressableCardBase);
+const PressableCardBase = exports.PressableCardBase = (0, _withLinkRouter.withLinkRouter)(PressableCardBaseInner);

package/lib/cjs/Card/backgroundImageStylesMap.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.backgroundImageStylesMap = void 0;
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const webStyles = {
@@ -194,4 +194,4 @@ const nativeStyles = {
     width: '100%'
   }
 };
-var _default = exports.default = _Platform.default.OS === 'web' ? webStyles : nativeStyles;
+const backgroundImageStylesMap = exports.backgroundImageStylesMap = _Platform.default.OS === 'web' ? webStyles : nativeStyles;

package/lib/cjs/CardGroup/CardGroup.js

@@ -3,24 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CardGroup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _StackView = _interopRequireWildcard(require("../StackView"));
-var _Card = _interopRequireDefault(require("../Card"));
-var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+var _a11yProps = require("../utils/props/a11yProps");
+var _handlerProps = require("../utils/props/handlerProps");
+var _containUniqueFields = require("../utils/containUniqueFields");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _input = require("../utils/input");
+var _useCopy = require("../utils/useCopy");
+var _viewProps = require("../utils/props/viewProps");
+var _variantProp = require("../utils/props/variantProp");
+var _tokens = require("../utils/props/tokens");
+var _copyPropTypes = require("../utils/props/copyPropTypes");
+var _dictionary = require("./dictionary");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _StackView = require("../StackView/StackView");
+var _StackWrap = require("../StackView/StackWrap");
+var _Card = require("../Card/Card");
+var _Fieldset = require("../Fieldset/Fieldset");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _viewProps.viewProps]);
 const uniqueFields = ['id'];
-const CardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const CardGroup = exports.CardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     copy = 'en',
     tokens = {},
@@ -34,15 +42,15 @@ const CardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     role = 'radiogroup',
     isInactive,
     name: inputGroupName,
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     ...rest
   } = _ref;
-  const getCopy = (0, _utils.useCopy)({
+  const getCopy = (0, _useCopy.useCopy)({
     dictionary,
     copy
   });
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const cardGroupTokens = (0, _ThemeProvider.useThemeTokens)('CardGroup', tokens, variant, {
+  const viewport = (0, _useViewport.useViewport)();
+  const cardGroupTokens = (0, _useThemeTokens.useThemeTokens)('CardGroup', tokens, variant, {
     viewport
   });
   const {
@@ -76,10 +84,10 @@ const CardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onChange,
     readOnly: isInactive
   };
-  const singleInputValue = (0, _utils.useInputValue)(inputControl);
-  const multipleInputValues = (0, _utils.useMultipleInputValues)(inputControl);
-  const StackContainer = direction === 'row' ? _StackView.StackWrap : _StackView.default;
-  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+  const singleInputValue = (0, _input.useInputValue)(inputControl);
+  const multipleInputValues = (0, _input.useMultipleInputValues)(inputControl);
+  const StackContainer = direction === 'row' ? _StackWrap.StackWrap : _StackView.StackView;
+  if (!(0, _containUniqueFields.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`CardGroup items must have unique ${uniqueFields.join(', ')}`);
   }
   const handleChange = _react.default.useCallback((checked, event, cardId, itemOnChange) => {
@@ -90,7 +98,7 @@ const CardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
     return itemOnChange?.(checked, event);
   }, [singleInputValue, multipleInputValues, singleSelection]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.Fieldset, {
     copy: copy,
     ref: ref,
     name: inputGroupName,
@@ -115,7 +123,7 @@ const CardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         } = _ref2;
         const cardId = id || `${getCopy('prefixId')}[${index}]`;
         const itemHandleChange = (checked, event) => handleChange(checked, event, cardId, itemOnChange);
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
           id: cardId,
           onPress: itemHandleChange,
           interactiveCard: {
@@ -148,7 +156,7 @@ const dictionaryContentShape = _propTypes.default.shape({
 });
 CardGroup.propTypes = {
   ...selectedSystemPropTypes,
-  copy: _utils.copyPropTypes,
+  copy: _copyPropTypes.copyPropTypes,
   /**
    * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
    */
@@ -159,11 +167,11 @@ CardGroup.propTypes = {
   /**
    * Optional theme token overrides for the outer RadioCardGroup component
    */
-  tokens: (0, _utils.getTokensPropType)('CardGroup'),
+  tokens: (0, _tokens.getTokensPropType)('CardGroup'),
   /**
    * Theme variants, shared between both RadioCardGroup and RadioCard
    */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Array of objects containing specifics for each Card to be rendered in the group.
    */
@@ -215,5 +223,4 @@ CardGroup.propTypes = {
    * On Web, this is passed to the `name` attribute of the fieldset and each input.
    */
   name: _propTypes.default.string
-};
-var _default = exports.default = CardGroup;
+};

package/lib/cjs/CardGroup/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: {
     prefixId: 'Card'
   },