@telus-uds/components-base 1.14.1 → 1.15.0

package/lib/ExpandCollapse/Control.js

@@ -85,12 +85,13 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
     ...rest
   } = _ref3;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
-  const selectedProps = selectProps({ ...rest,
-    accessibilityRole
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...rest,
+    accessibilityState: { ...(rest.accessibilityState || {}),
+      expanded: isExpanded
+    }
   });
-  selectedProps.accessibilityState = { ...(selectedProps.accessibilityState || {}),
-    expanded: isExpanded
-  };
 
   const getControlState = _ref4 => {
     let {

package/lib/ExpandCollapse/Panel.js

@@ -77,10 +77,11 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
   } = _ref2;
   const [containerHeight, setContainerHeight] = (0, _react.useState)(null);
   const isExpanded = openIds.includes(panelId);
-  const selectedProps = selectProps(rest);
-  selectedProps.accessibilityState = { ...(selectedProps.accessibilityState || {}),
-    expanded: isExpanded
-  };
+  const selectedProps = selectProps({ ...rest,
+    accessibilityState: { ...(rest.accessibilityState || {}),
+      expanded: isExpanded
+    }
+  });
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });

package/lib/List/ListItem.js

@@ -7,13 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-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 _ListItemBase = _interopRequireDefault(require("./ListItemBase"));
 
 var _ThemeProvider = require("../ThemeProvider");
 
@@ -27,248 +21,28 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-
-const selectBulletStyles = _ref => {
-  let {
-    itemBulletWidth,
-    itemBulletHeight,
-    itemBulletColor
-  } = _ref;
-  return {
-    width: itemBulletWidth,
-    height: itemBulletHeight,
-    borderRadius: itemBulletHeight / 2,
-    backgroundColor: itemBulletColor
-  };
-};
-
-const selectBulletContainerStyles = _ref2 => {
-  let {
-    itemBulletContainerWidth,
-    itemBulletContainerAlign
-  } = _ref2;
-  return {
-    width: itemBulletContainerWidth,
-    alignItems: itemBulletContainerAlign
-  };
-};
-
-const selectItemIconTokens = _ref3 => {
-  let {
-    itemIconSize,
-    itemIconColor
-  } = _ref3;
-  return {
-    size: itemIconSize,
-    color: itemIconColor
-  };
-};
-
-const selectSideItemContainerStyles = _ref4 => {
-  let {
-    listGutter,
-    iconMarginTop
-  } = _ref4;
-  return {
-    marginTop: iconMarginTop,
-    marginRight: listGutter
-  };
-}; // Align bullets with the top line of text the same way icons are aligned
-
-
-const selectBulletPositioningStyles = _ref5 => {
-  let {
-    itemIconSize
-  } = _ref5;
-  return {
-    width: itemIconSize,
-    height: itemIconSize
-  };
-};
-
-const selectItemStyles = (_ref6, themeOptions) => {
-  let {
-    itemFontWeight,
-    itemFontSize,
-    itemLineHeight,
-    itemFontName
-  } = _ref6;
-  return (0, _ThemeProvider.applyTextStyles)({
-    fontWeight: itemFontWeight,
-    fontSize: itemFontSize,
-    lineHeight: itemLineHeight,
-    fontName: itemFontName,
-    themeOptions
-  });
-};
-
-const selectItemBlockStyles = _ref7 => {
-  let {
-    interItemMargin
-  } = _ref7;
-  return {
-    marginBottom: interItemMargin
-  };
-};
-
-const selectDividerStyles = _ref8 => {
-  let {
-    dividerColor,
-    dividerSize,
-    interItemMarginWithDivider
-  } = _ref8;
-  return {
-    borderBottomWidth: dividerSize,
-    borderColor: dividerColor,
-    marginBottom: interItemMarginWithDivider,
-    paddingBottom: interItemMarginWithDivider
-  };
-};
 /**
  * ListItem is responsible for rendering icon or a bullet as side item
  */
-
-
-const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
+const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     tokens,
     variant,
-    icon,
-    iconColor,
-    iconSize,
-    showDivider,
     children,
-    isLastItem,
-    accessibilityRole = _Platform.default.select({
-      web: 'listitem',
-      default: undefined
-    }),
-    ...rest
-  } = _ref9;
+    ...listItemProps
+  } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
-  const {
-    themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  const itemStyles = selectItemStyles(themeTokens, themeOptions);
-  const itemBlockStyles = selectItemBlockStyles(themeTokens);
-  const dividerStyles = selectDividerStyles(themeTokens);
-  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
-  const itemBulletStyles = selectBulletStyles(themeTokens);
-  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
-  const iconTokens = selectItemIconTokens(themeTokens);
-  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
-
-  const renderItem = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: staticStyles.wrap,
-    children: (0, _utils.wrapStringsInText)(children, {
-      style: itemStyles
-    })
-  });
-  /**
-   * Function responsible returning styling, in case the item is the last shouldn't
-   * add extra margin on the bottom, if "showDivider" is true it should add a divider
-   * and custom margin and padding, otherwise just adds a margin to the bottom
-   */
-
-
-  const getContainerStyle = () => {
-    if (isLastItem) {
-      return undefined;
-    }
-
-    if (showDivider) {
-      return dividerStyles;
-    }
-
-    return itemBlockStyles;
-  };
-  /**
-   * Renders item bullet or Icon in case it's defined
-   * in case children are string the icon is centered otherwise
-   * it will align itself at start of the container
-   */
-
-
-  const renderMarker = () => {
-    const IconComponent = icon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
-
-    if (icon) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: sideItemContainerStyles,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
-          size: iconSize || iconTokens.size,
-          color: iconColor || iconTokens.color
-        })
-      });
-    }
-
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: [sideItemContainerStyles, itemBulletContainerStyles],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: itemBulletStyles,
-          testID: "unordered-item-bullet"
-        })
-      })
-    });
-  };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemBase.default, {
+    tokens: themeTokens,
     ref: ref,
-    style: [staticStyles.itemContainer, getContainerStyle()],
-    accessibilityRole: accessibilityRole,
-    ...selectProps(rest),
-    children: [renderMarker(), renderItem()]
+    ...listItemProps,
+    children: children
   });
 });
 ListItem.displayName = 'ListItem';
-
-const staticStyles = _StyleSheet.default.create({
-  itemContainer: {
-    flexDirection: 'row'
-  },
-  wrap: {
-    flex: 1
-  },
-  bulletPositioning: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-
-ListItem.propTypes = { ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('List'),
+ListItem.propTypes = {
   variant: _utils.variantProp.propType,
-  children: _propTypes.default.node.isRequired,
-
-  /**
-   * Renders side item icon
-   */
-  icon: _propTypes.default.elementType,
-
-  /**
-   * Will set display icon color
-   */
-  iconColor: _propTypes.default.string,
-
-  /**
-   * Allow the user define the icon size if not defined the theme's file
-   */
-  iconSize: _propTypes.default.number,
-
-  /**
-   * @ignore
-   * Defined by parent if it's last item on the list
-   */
-  isLastItem: _propTypes.default.bool,
-
-  /**
-   * @ignore
-   * In case it is not the last item allow display divider
-   */
-  showDivider: _propTypes.default.bool
+  ..._ListItemBase.default.propTypes
 };
 var _default = ListItem;
 exports.default = _default;

package/lib/List/ListItemBase.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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 _utils = require("../utils");
+
+var _ListItemContent = _interopRequireDefault(require("./ListItemContent"));
+
+var _ListItemMark = _interopRequireDefault(require("./ListItemMark"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
+const selectItemBlockStyles = _ref => {
+  let {
+    interItemMargin
+  } = _ref;
+  return {
+    marginBottom: interItemMargin
+  };
+};
+
+const selectDividerStyles = _ref2 => {
+  let {
+    dividerColor,
+    dividerSize,
+    interItemMarginWithDivider
+  } = _ref2;
+  return {
+    borderBottomWidth: dividerSize,
+    borderColor: dividerColor,
+    marginBottom: interItemMarginWithDivider,
+    paddingBottom: interItemMarginWithDivider
+  };
+};
+/**
+ * ListItem is responsible for rendering icon or a bullet as side item
+ */
+
+
+const ListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    tokens,
+    icon,
+    iconColor,
+    iconSize,
+    showDivider,
+    children,
+    isLastItem,
+    accessibilityRole = _Platform.default.select({
+      web: 'listitem',
+      default: undefined
+    }),
+    ...rest
+  } = _ref3;
+  const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
+  const itemBlockStyles = selectItemBlockStyles(themeTokens);
+  const dividerStyles = selectDividerStyles(themeTokens);
+  /**
+   * Function responsible returning styling, in case the item is the last shouldn't
+   * add extra margin on the bottom, if "showDivider" is true it should add a divider
+   * and custom margin and padding, otherwise just adds a margin to the bottom
+   */
+
+  const getContainerStyle = () => {
+    if (isLastItem) {
+      return undefined;
+    }
+
+    if (showDivider) {
+      return dividerStyles;
+    }
+
+    return itemBlockStyles;
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: [staticStyles.itemContainer, getContainerStyle()],
+    accessibilityRole: accessibilityRole,
+    ...selectProps(rest),
+    children: typeof children === 'function' ? children({
+      tokens,
+      icon,
+      iconColor,
+      iconSize,
+      isLastItem
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
+        tokens: tokens,
+        icon: icon,
+        iconColor: iconColor,
+        iconSize: iconSize
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemContent.default, {
+        tokens: tokens,
+        children: children
+      })]
+    })
+  });
+});
+ListItemBase.displayName = 'ListItem';
+
+const staticStyles = _StyleSheet.default.create({
+  itemContainer: {
+    flexDirection: 'row'
+  }
+});
+
+ListItemBase.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('List'),
+  variant: _utils.variantProp.propType,
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
+
+  /**
+   * Renders side item icon
+   */
+  icon: _propTypes.default.elementType,
+
+  /**
+   * Will set display icon color
+   */
+  iconColor: _propTypes.default.string,
+
+  /**
+   * Allow the user define the icon size if not defined the theme's file
+   */
+  iconSize: _propTypes.default.number,
+
+  /**
+   * @ignore
+   * Defined by parent if it's last item on the list
+   */
+  isLastItem: _propTypes.default.bool,
+
+  /**
+   * @ignore
+   * In case it is not the last item allow display divider
+   */
+  showDivider: _propTypes.default.bool
+};
+var _default = ListItemBase;
+exports.default = _default;

package/lib/List/ListItemContent.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tokenTypes = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _utils = require("../utils");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const tokenTypes = {
+  itemFontWeight: _propTypes.default.string.isRequired,
+  itemFontSize: _propTypes.default.number.isRequired,
+  itemLineHeight: _propTypes.default.number.isRequired,
+  itemFontName: _propTypes.default.string.isRequired
+};
+exports.tokenTypes = tokenTypes;
+
+const selectItemTextStyles = (_ref, themeOptions) => {
+  let {
+    itemFontWeight,
+    itemFontSize,
+    itemLineHeight,
+    itemFontName
+  } = _ref;
+  return (0, _ThemeProvider.applyTextStyles)({
+    fontWeight: itemFontWeight,
+    fontSize: itemFontSize,
+    lineHeight: itemLineHeight,
+    fontName: itemFontName,
+    themeOptions
+  });
+};
+/**
+ * Subcomponent used within ListItem and similar components for rendering content that fills
+ * and wraps available space in a { flexDirection: row } container alongside a ListIconMark,
+ * and that applies text styles to strings via supplied tokens.
+ *
+ * It's the responsibility of themes to make sure that these text tokens align the first line of
+ * text nicely against the bullet or icon rendered by ListIconMark.
+ */
+
+
+const ListItemContent = _ref2 => {
+  let {
+    tokens,
+    children
+  } = _ref2;
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const textStyles = selectItemTextStyles(tokens, themeOptions);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: staticStyles.wrap,
+    children: (0, _utils.wrapStringsInText)(children, {
+      style: textStyles
+    })
+  });
+};
+
+const staticStyles = _StyleSheet.default.create({
+  wrap: {
+    flex: 1
+  }
+});
+
+ListItemContent.propTypes = {
+  tokens: _propTypes.default.shape(tokenTypes).isRequired,
+  children: _propTypes.default.node.isRequired
+};
+var _default = ListItemContent;
+exports.default = _default;