@telus-uds/components-base 1.7.1 → 1.8.2

package/lib/Notification/Notification.js

@@ -38,33 +38,45 @@ const selectContainerStyles = tokens => ({ ...tokens
 
 const selectTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
 
-const selectIconProps = ({
-  iconSize,
-  iconColor
-}) => ({
-  size: iconSize,
-  color: iconColor
-});
+const selectIconProps = _ref => {
+  let {
+    iconSize,
+    iconColor
+  } = _ref;
+  return {
+    size: iconSize,
+    color: iconColor
+  };
+};
 
-const selectIconContainerStyles = ({
-  iconGap
-}) => ({
-  paddingRight: iconGap
-});
+const selectIconContainerStyles = _ref2 => {
+  let {
+    iconGap
+  } = _ref2;
+  return {
+    paddingRight: iconGap
+  };
+};
 
-const selectDismissIconProps = ({
-  dismissIconSize,
-  dismissIconColor
-}) => ({
-  size: dismissIconSize,
-  color: dismissIconColor
-});
+const selectDismissIconProps = _ref3 => {
+  let {
+    dismissIconSize,
+    dismissIconColor
+  } = _ref3;
+  return {
+    size: dismissIconSize,
+    color: dismissIconColor
+  };
+};
 
-const selectDismissButtonContainerStyles = ({
-  dismissButtonGap
-}) => ({
-  paddingLeft: dismissButtonGap
-});
+const selectDismissButtonContainerStyles = _ref4 => {
+  let {
+    dismissButtonGap
+  } = _ref4;
+  return {
+    paddingLeft: dismissButtonGap
+  };
+};
 /**
  * A banner that highlights important messages:
  * - Status message to show there is an error or outage of services
@@ -118,15 +130,16 @@ const selectDismissButtonContainerStyles = ({
  */
 
 
-const Notification = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  system,
-  dismissible,
-  copy = 'en',
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+  let {
+    children,
+    system,
+    dismissible,
+    copy = 'en',
+    tokens,
+    variant,
+    ...rest
+  } = _ref5;
   const [isDismissed, setIsDismissed] = (0, _react.useState)(false);
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Notification', tokens, variant, {
     system
@@ -199,7 +212,7 @@ Notification.propTypes = { ...selectedSystemPropTypes,
   dismissible: _propTypes.default.bool,
 
   /**
-   * Select english or french copy for the accessible label of the dismiss button.
+   * Select English or French copy for the accessible label of the dismiss button.
    */
   copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
     dismiss: _propTypes.default.string

package/lib/Pagination/PageButton.js

@@ -27,16 +27,17 @@ 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 PageButton = /*#__PURE__*/(0, _react.forwardRef)(({
-  label,
-  onPress,
-  href,
-  isActive,
-  copy,
-  variant,
-  tokens,
-  ...props
-}, ref) => {
+const PageButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    label,
+    onPress,
+    href,
+    isActive,
+    copy,
+    variant,
+    tokens,
+    ...props
+  } = _ref;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('PaginationPageButton', tokens, variant);
   const getCopy = (0, _useCopy.default)({
     dictionary: _dictionary.default,

package/lib/Pagination/Pagination.js

@@ -37,31 +37,35 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectTextStyles = ({
-  color,
-  fontName,
-  fontSize,
-  fontWeight,
-  lineHeight
-}) => (0, _ThemeProvider.applyTextStyles)({
-  color,
-  fontName,
-  fontSize,
-  fontWeight,
-  lineHeight
-});
+const selectTextStyles = _ref => {
+  let {
+    color,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight
+  } = _ref;
+  return (0, _ThemeProvider.applyTextStyles)({
+    color,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight
+  });
+};
 
-const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  copy = 'en',
-  variant,
-  tokens,
-  sideButtonVariant,
-  sideButtonTokens,
-  LinkRouter,
-  linkRouterProps,
-  ...rest
-}, ref) => {
+const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    children,
+    copy = 'en',
+    variant,
+    tokens,
+    sideButtonVariant,
+    sideButtonTokens,
+    LinkRouter,
+    linkRouterProps,
+    ...rest
+  } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     truncateAbove,
@@ -140,12 +144,19 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
     ref: ref,
     ...selectProps(rest),
     children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
-    .map((element, index) => [element, `page-${index + 1}`]).filter(([element]) => element !== null).map(([element, key]) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-      right: gap,
-      children: element
-    }, key))
+    .map((element, index) => [element, `page-${index + 1}`]).filter(_ref3 => {
+      let [element] = _ref3;
+      return element !== null;
+    }).map(_ref4 => {
+      let [element, key] = _ref4;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        right: gap,
+        children: element
+      }, key);
+    })
   });
 });
+Pagination.displayName = 'Pagination';
 _PageButton.default.displayName = 'PageButton';
 Pagination.PageButton = _PageButton.default;
 Pagination.propTypes = { ...selectedSystemPropTypes,

package/lib/Pagination/SideButton.js

@@ -33,11 +33,12 @@ 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 selectIconTokens = ({
-  color,
-  iconSize,
-  iconDisplace
-}, direction) => {
+const selectIconTokens = (_ref, direction) => {
+  let {
+    color,
+    iconSize,
+    iconDisplace
+  } = _ref;
   return {
     color,
     size: iconSize,
@@ -49,15 +50,16 @@ const directionToSide = {
   previous: 'left',
   next: 'right'
 };
-const SideButton = /*#__PURE__*/(0, _react.forwardRef)(({
-  direction = 'previous',
-  onPress,
-  href,
-  copy,
-  variant,
-  tokens,
-  ...props
-}, ref) => {
+const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    direction = 'previous',
+    onPress,
+    href,
+    copy,
+    variant,
+    tokens,
+    ...props
+  } = _ref2;
   const viewport = (0, _ViewportProvider.useViewport)();
   const buttonVariant = {
     direction,
@@ -99,10 +101,11 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)(({
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
-    children: ({
-      textStyles,
-      ...buttonState
-    }) => {
+    children: _ref3 => {
+      let {
+        textStyles,
+        ...buttonState
+      } = _ref3;
       const iconProps = {
         tokens: getIconTokens(buttonState)
       };

package/lib/Pagination/usePagination.js

@@ -12,10 +12,11 @@ exports.default = void 0;
  * @param {React.Element[]} items
  * @param {number} truncateAbove
  */
-function usePagination({
-  items,
-  truncateAbove
-}) {
+function usePagination(_ref) {
+  let {
+    items,
+    truncateAbove
+  } = _ref;
   const activeItemIndex = Math.max(items.findIndex(item => item.props.isActive), 0 // default to the first item if none is marked as active
   );
 

package/lib/Progress/Progress.js

@@ -25,19 +25,22 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectProgressStyles = ({
-  backgroundColor,
-  borderWidth,
-  borderColor,
-  borderRadius,
-  height
-}) => ({
-  backgroundColor,
-  borderWidth,
-  borderColor,
-  borderRadius,
-  height
-});
+const selectProgressStyles = _ref => {
+  let {
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    height
+  } = _ref;
+  return {
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    height
+  };
+};
 /**
  * The `Progress` is a container for displaying one or several `ProgressBar`s.
  *
@@ -69,12 +72,13 @@ const selectProgressStyles = ({
  */
 
 
-const Progress = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const Progress = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Progress', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,

package/lib/Progress/ProgressBar.js

@@ -31,18 +31,21 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectBarStyles = ({
-  backgroundColor,
-  borderRadius,
-  outlineWidth,
-  outlineColor
-}, percentage) => ({
-  backgroundColor,
-  borderRadius,
-  outlineWidth,
-  outlineColor,
-  width: `${percentage}%`
-});
+const selectBarStyles = (_ref, percentage) => {
+  let {
+    backgroundColor,
+    borderRadius,
+    outlineWidth,
+    outlineColor
+  } = _ref;
+  return {
+    backgroundColor,
+    borderRadius,
+    outlineWidth,
+    outlineColor,
+    width: `${percentage}%`
+  };
+};
 /**
  * The `ProgressBar` is a visual representation of linear progression.
  * It provides simple but important information at a quick glance.
@@ -79,13 +82,14 @@ const selectBarStyles = ({
  */
 
 
-const ProgressBar = /*#__PURE__*/(0, _react.forwardRef)(({
-  children = null,
-  percentage = 0,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    children = null,
+    percentage = 0,
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ProgressBar', tokens, variant);
 
   if (percentage < 0) {

package/lib/Progress/ProgressBarBackground.js

@@ -23,9 +23,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E`;
 const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E`;
-const ProgressBarBackground = /*#__PURE__*/(0, _react.forwardRef)(({
-  variant
-}, ref) => {
+const ProgressBarBackground = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    variant
+  } = _ref;
   let source = null;
 
   if (variant !== null && variant !== void 0 && variant.inactive) {

package/lib/Radio/Radio.js

@@ -37,56 +37,65 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 
-const selectContainerStyles = ({
-  containerBackgroundColor,
-  containerBorderRadius,
-  containerOpacity,
-  containerPaddingBottom,
-  containerPaddingLeft,
-  containerPaddingRight,
-  containerPaddingTop,
-  containerShadow
-}) => ({
-  backgroundColor: containerBackgroundColor,
-  borderRadius: containerBorderRadius,
-  opacity: containerOpacity,
-  paddingBottom: containerPaddingBottom,
-  paddingLeft: containerPaddingLeft,
-  paddingRight: containerPaddingRight,
-  paddingTop: containerPaddingTop,
-  ...(0, _ThemeProvider.applyShadowToken)(containerShadow)
-});
+const selectContainerStyles = _ref => {
+  let {
+    containerBackgroundColor,
+    containerBorderRadius,
+    containerOpacity,
+    containerPaddingBottom,
+    containerPaddingLeft,
+    containerPaddingRight,
+    containerPaddingTop,
+    containerShadow
+  } = _ref;
+  return {
+    backgroundColor: containerBackgroundColor,
+    borderRadius: containerBorderRadius,
+    opacity: containerOpacity,
+    paddingBottom: containerPaddingBottom,
+    paddingLeft: containerPaddingLeft,
+    paddingRight: containerPaddingRight,
+    paddingTop: containerPaddingTop,
+    ...(0, _ThemeProvider.applyShadowToken)(containerShadow)
+  };
+};
 
-const selectDescriptionStyles = ({
-  containerPaddingLeft = 0,
-  descriptionFontSize,
-  descriptionLineHeight,
-  descriptionMarginLeft,
-  inputSize,
-  labelMarginLeft = 0
-}) => ({
-  marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
-  ...(0, _ThemeProvider.applyTextStyles)({
-    fontSize: descriptionFontSize,
-    lineHeight: descriptionLineHeight
-  })
-});
+const selectDescriptionStyles = _ref2 => {
+  let {
+    containerPaddingLeft = 0,
+    descriptionFontSize,
+    descriptionLineHeight,
+    descriptionMarginLeft,
+    inputSize,
+    labelMarginLeft = 0
+  } = _ref2;
+  return {
+    marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
+    ...(0, _ThemeProvider.applyTextStyles)({
+      fontSize: descriptionFontSize,
+      lineHeight: descriptionLineHeight
+    })
+  };
+};
 
-const selectLabelStyles = ({
-  labelColor,
-  labelFontName,
-  labelFontSize,
-  labelFontWeight,
-  labelMarginLeft,
-  labelLineHeight
-}) => (0, _ThemeProvider.applyTextStyles)({
-  color: labelColor,
-  fontName: labelFontName,
-  fontWeight: labelFontWeight,
-  fontSize: labelFontSize,
-  lineHeight: labelLineHeight,
-  marginLeft: labelMarginLeft
-});
+const selectLabelStyles = _ref3 => {
+  let {
+    labelColor,
+    labelFontName,
+    labelFontSize,
+    labelFontWeight,
+    labelMarginLeft,
+    labelLineHeight
+  } = _ref3;
+  return (0, _ThemeProvider.applyTextStyles)({
+    color: labelColor,
+    fontName: labelFontName,
+    fontWeight: labelFontWeight,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    marginLeft: labelMarginLeft
+  });
+};
 /**
  * Basic Radio component.
  *
@@ -121,21 +130,22 @@ const selectLabelStyles = ({
  */
 
 
-const Radio = /*#__PURE__*/(0, _react.forwardRef)(({
-  checked,
-  defaultChecked,
-  description,
-  error = false,
-  id,
-  inactive,
-  label,
-  name: inputName,
-  onChange,
-  tokens,
-  value,
-  variant,
-  ...rest
-}, ref) => {
+const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+  let {
+    checked,
+    defaultChecked,
+    description,
+    error = false,
+    id,
+    inactive,
+    label,
+    name: inputName,
+    onChange,
+    tokens,
+    value,
+    variant,
+    ...rest
+  } = _ref4;
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
@@ -176,11 +186,12 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)(({
       disabled: inactive
     },
     ...selectProps(rest),
-    children: ({
-      focused: focus,
-      hovered: hover,
-      pressed
-    }) => {
+    children: _ref5 => {
+      let {
+        focused: focus,
+        hovered: hover,
+        pressed
+      } = _ref5;
       const stateTokens = getTokens({
         focus,
         hover,