@telus-uds/components-base 1.14.1 → 1.15.0

package/component-docs.json

@@ -1157,6 +1157,16 @@
             true
           ],
           "type": "state"
+        },
+        "width": {
+          "description": "The width of the modal",
+          "values": [
+            "s",
+            "m",
+            "l",
+            "xl"
+          ],
+          "type": "state"
         }
       },
       "Notification": {
@@ -4636,12 +4646,26 @@
         "docs": {
           "description": "ListItem is responsible for rendering icon or a bullet as side item",
           "props": {
-            "accessibilityRole": {
-              "defaultValue": {
-                "value": "Platform.select({ web: 'listitem', default: undefined })",
-                "computed": true
+            "variant": {
+              "type": {
+                "name": "objectOf",
+                "value": {
+                  "name": "union",
+                  "value": [
+                    {
+                      "name": "string"
+                    },
+                    {
+                      "name": "number"
+                    },
+                    {
+                      "name": "bool"
+                    }
+                  ]
+                }
               },
-              "required": false
+              "required": false,
+              "description": ""
             },
             "tokens": {
               "type": {
@@ -4669,30 +4693,17 @@
               "required": false,
               "description": ""
             },
-            "variant": {
-              "type": {
-                "name": "objectOf",
-                "value": {
-                  "name": "union",
-                  "value": [
-                    {
-                      "name": "string"
-                    },
-                    {
-                      "name": "number"
-                    },
-                    {
-                      "name": "bool"
-                    }
-                  ]
-                }
-              },
-              "required": false,
-              "description": ""
-            },
             "children": {
               "type": {
-                "name": "node"
+                "name": "union",
+                "value": [
+                  {
+                    "name": "node"
+                  },
+                  {
+                    "name": "func"
+                  }
+                ]
               },
               "required": true,
               "description": ""
@@ -4807,12 +4818,26 @@
         "docs": {
           "description": "ListItem is responsible for rendering icon or a bullet as side item",
           "props": {
-            "accessibilityRole": {
-              "defaultValue": {
-                "value": "Platform.select({ web: 'listitem', default: undefined })",
-                "computed": true
+            "variant": {
+              "type": {
+                "name": "objectOf",
+                "value": {
+                  "name": "union",
+                  "value": [
+                    {
+                      "name": "string"
+                    },
+                    {
+                      "name": "number"
+                    },
+                    {
+                      "name": "bool"
+                    }
+                  ]
+                }
               },
-              "required": false
+              "required": false,
+              "description": ""
             },
             "tokens": {
               "type": {
@@ -4840,30 +4865,17 @@
               "required": false,
               "description": ""
             },
-            "variant": {
-              "type": {
-                "name": "objectOf",
-                "value": {
-                  "name": "union",
-                  "value": [
-                    {
-                      "name": "string"
-                    },
-                    {
-                      "name": "number"
-                    },
-                    {
-                      "name": "bool"
-                    }
-                  ]
-                }
-              },
-              "required": false,
-              "description": ""
-            },
             "children": {
               "type": {
-                "name": "node"
+                "name": "union",
+                "value": [
+                  {
+                    "name": "node"
+                  },
+                  {
+                    "name": "func"
+                  }
+                ]
               },
               "required": true,
               "description": ""
@@ -4900,12 +4912,26 @@
       "docs": {
         "description": "ListItem is responsible for rendering icon or a bullet as side item",
         "props": {
-          "accessibilityRole": {
-            "defaultValue": {
-              "value": "Platform.select({ web: 'listitem', default: undefined })",
-              "computed": true
+          "variant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
             },
-            "required": false
+            "required": false,
+            "description": ""
           },
           "tokens": {
             "type": {
@@ -4933,30 +4959,17 @@
             "required": false,
             "description": ""
           },
-          "variant": {
-            "type": {
-              "name": "objectOf",
-              "value": {
-                "name": "union",
-                "value": [
-                  {
-                    "name": "string"
-                  },
-                  {
-                    "name": "number"
-                  },
-                  {
-                    "name": "bool"
-                  }
-                ]
-              }
-            },
-            "required": false,
-            "description": ""
-          },
           "children": {
             "type": {
-              "name": "node"
+              "name": "union",
+              "value": [
+                {
+                  "name": "node"
+                },
+                {
+                  "name": "func"
+                }
+              ]
             },
             "required": true,
             "description": ""
@@ -5540,7 +5553,7 @@
             }
           },
           "attributes": {
-            "acceptsRNA11yProps": true
+            "acceptsRNA11yProps": false
           }
         }
       }
@@ -8128,154 +8141,6 @@
         }
       }
     },
-    "Button": {
-      "docs": {
-        "description": "",
-        "props": {
-          "tokens": {
-            "type": {
-              "name": "custom",
-              "raw": {
-                "borderColor": "color",
-                "borderWidth": "border",
-                "borderRadius": "radius",
-                "shadow": "shadow",
-                "fontSize": "fontSize",
-                "color": "color",
-                "lineHeight": "lineHeight",
-                "textAlign": "flexJustifyContent",
-                "alignSelf": "flexAlign",
-                "fontName": "fontName",
-                "fontWeight": "fontWeight",
-                "backgroundColor": "color",
-                "opacity": "opacity",
-                "paddingLeft": "size",
-                "paddingRight": "size",
-                "paddingTop": "size",
-                "paddingBottom": "size",
-                "width": "size",
-                "minWidth": "size",
-                "iconSize": "size",
-                "iconSpace": "integer",
-                "icon": "icon",
-                "outerBorderColor": "color",
-                "outerBorderWidth": "border",
-                "outerBorderGap": "size",
-                "outerBackgroundColor": "color"
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "inactive": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": "If true, prevents the button from being pressed, changes the cursor (on web) and accessibility\nattributes to communicate this to the user, and applies `inactive: true` appearances from the theme"
-          },
-          "disabled": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": "Alias for `inactive`"
-          },
-          "children": {
-            "type": {
-              "name": "custom",
-              "raw": "ABBPropTypes.childrenOf(\n  PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])\n)"
-            },
-            "required": false,
-            "description": "Button's children must be either:\n - One or more text strings and / or A11yText components\n - A render function with contents that responds to current button state by being passed an object of:\n```\n{ hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }\n```"
-          },
-          "onPress": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": "Function called when the button is pressed. Required unless the button has a href."
-          },
-          "iconProps": {
-            "type": {
-              "name": "exact",
-              "value": {
-                "variant": {
-                  "name": "custom",
-                  "raw": "variantProp.propType",
-                  "required": false
-                },
-                "tokens": {
-                  "name": "custom",
-                  "raw": "getTokensPropType('Icon')",
-                  "required": false
-                },
-                "accessibilityLabel": {
-                  "name": "string",
-                  "description": "Descriptive label used in web SVG title tag for accessibility",
-                  "required": false
-                },
-                "scalesWithText": {
-                  "name": "bool",
-                  "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
-                  "required": false
-                }
-              }
-            },
-            "required": false,
-            "description": "Optional variant that may be passed down to the link's icon if there is one"
-          },
-          "iconPosition": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'left'",
-                  "computed": false
-                },
-                {
-                  "value": "'right'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button."
-          },
-          "icon": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": "A function component for an SVG icon to render inside the link. Inherits size and color from\nthe link and any Typography the link is nested inside."
-          },
-          "variant": {
-            "type": {
-              "name": "objectOf",
-              "value": {
-                "name": "union",
-                "value": [
-                  {
-                    "name": "string"
-                  },
-                  {
-                    "name": "number"
-                  },
-                  {
-                    "name": "bool"
-                  }
-                ]
-              }
-            },
-            "required": false,
-            "description": ""
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": true
-        }
-      }
-    },
     "ButtonGroup": {
       "docs": {
         "description": "",
@@ -8517,214 +8382,6 @@
         }
       }
     },
-    "ButtonLink": {
-      "docs": {
-        "description": "`ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.\nButtonLink is a block-level component and should not be used inline.",
-        "props": {
-          "tokens": {
-            "type": {
-              "name": "custom",
-              "raw": {
-                "borderColor": "color",
-                "borderWidth": "border",
-                "borderRadius": "radius",
-                "shadow": "shadow",
-                "fontSize": "fontSize",
-                "color": "color",
-                "lineHeight": "lineHeight",
-                "textAlign": "flexJustifyContent",
-                "alignSelf": "flexAlign",
-                "fontName": "fontName",
-                "fontWeight": "fontWeight",
-                "backgroundColor": "color",
-                "opacity": "opacity",
-                "paddingLeft": "size",
-                "paddingRight": "size",
-                "paddingTop": "size",
-                "paddingBottom": "size",
-                "width": "size",
-                "minWidth": "size",
-                "iconSize": "size",
-                "iconSpace": "integer",
-                "icon": "icon",
-                "outerBorderColor": "color",
-                "outerBorderWidth": "border",
-                "outerBorderGap": "size",
-                "outerBackgroundColor": "color"
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "inactive": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": "If true, prevents the button from being pressed, changes the cursor (on web) and accessibility\nattributes to communicate this to the user, and applies `inactive: true` appearances from the theme"
-          },
-          "disabled": {
-            "type": {
-              "name": "bool"
-            },
-            "required": false,
-            "description": "Alias for `inactive`"
-          },
-          "children": {
-            "type": {
-              "name": "custom",
-              "raw": "ABBPropTypes.childrenOf(\n  PropTypes.oneOfType([ABBPropTypes.elementType(A11yText), PropTypes.string])\n)"
-            },
-            "required": false,
-            "description": "Button's children must be either:\n - One or more text strings and / or A11yText components\n - A render function with contents that responds to current button state by being passed an object of:\n```\n{ hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }\n```"
-          },
-          "onPress": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": "Function called when the button is pressed. Required unless the button has a href."
-          },
-          "iconProps": {
-            "type": {
-              "name": "exact",
-              "value": {
-                "variant": {
-                  "name": "custom",
-                  "raw": "variantProp.propType",
-                  "required": false
-                },
-                "tokens": {
-                  "name": "custom",
-                  "raw": "getTokensPropType('Icon')",
-                  "required": false
-                },
-                "accessibilityLabel": {
-                  "name": "string",
-                  "description": "Descriptive label used in web SVG title tag for accessibility",
-                  "required": false
-                },
-                "scalesWithText": {
-                  "name": "bool",
-                  "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
-                  "required": false
-                }
-              }
-            },
-            "required": false,
-            "description": "Optional variant that may be passed down to the link's icon if there is one"
-          },
-          "iconPosition": {
-            "type": {
-              "name": "enum",
-              "value": [
-                {
-                  "value": "'left'",
-                  "computed": false
-                },
-                {
-                  "value": "'right'",
-                  "computed": false
-                }
-              ]
-            },
-            "required": false,
-            "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button."
-          },
-          "icon": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": "A function component for an SVG icon to render inside the link. Inherits size and color from\nthe link and any Typography the link is nested inside."
-          },
-          "variant": {
-            "type": {
-              "name": "objectOf",
-              "value": {
-                "name": "union",
-                "value": [
-                  {
-                    "name": "string"
-                  },
-                  {
-                    "name": "number"
-                  },
-                  {
-                    "name": "bool"
-                  }
-                ]
-              }
-            },
-            "required": false,
-            "description": ""
-          },
-          "onPressIn": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "onPressOut": {
-            "type": {
-              "name": "func"
-            },
-            "required": false,
-            "description": ""
-          },
-          "href": {
-            "type": {
-              "name": "string"
-            },
-            "required": false,
-            "description": ""
-          },
-          "hrefAttrs": {
-            "type": {
-              "name": "shape",
-              "value": {
-                "download": {
-                  "name": "string",
-                  "required": false
-                },
-                "rel": {
-                  "name": "string",
-                  "required": false
-                },
-                "target": {
-                  "name": "enum",
-                  "value": [
-                    {
-                      "value": "'_self'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_blank'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_parent'",
-                      "computed": false
-                    },
-                    {
-                      "value": "'_top'",
-                      "computed": false
-                    }
-                  ],
-                  "required": false
-                }
-              }
-            },
-            "required": false,
-            "description": ""
-          }
-        },
-        "attributes": {
-          "acceptsRNA11yProps": true
-        }
-      }
-    },
     "Carousel": {
       "docs": {
         "description": "Carousel is a general-purpose content slider that can be used to render content in terms of slides.\n\n  ## Usage\n  - `Carousel` is a top-level export from `@telus-uds/components-base` which is used to render a Carousel\n  - Immediately within `Carousel`, individual slides are wrapped in `Carousel.Item` for the top-level `Carousel` to know how to identify an individual slide\n  - You can use any UDS component or other platform-specific component, (based on the platform you're rendering) to achieve any desired layout\n  - By default, Carousel takea all the `width` available to it and the `height` is determined based on the content in the slide with more content\n  - You may want to wrap Carousel in other layout components like `Box`, `FlexGrid` etc, to achieve a responsive layout of your need\n\n  ## `useCarousel` custom hook\n\n  ```jsx\n  import { useCarousel } from '@telus-uds/components-base'\n\n  const SomeComponentWithinCarouselItem = () => {\n    const {\n      activeIndex,\n      totalItems,\n      width,\n      goTo\n    } = useCarousel()\n    return <Text>Hi!</Text>\n  }\n  ```\n\n  You can use `useCarousel` to hook into internal state of the Carousel component like:\n  - `activeIndex`: Index of the current slide\n  - `totalItems`: Total number of items/slides passed to the Carousel\n  - `width`: Width of the individual carousel slide\n  - `goTo`: A function to go to a particular slide by passing the index of that slide, e.g: goTo(0) where `0` is the index of the first slide\n\n  ## Accessibility\n\n  - Top-level `Carousel` and `Carousel.Item` can take all possible React Native's `View` and `a11y` props\n  - If your slide contains input elements like buttons, you may want to configure them to be only focusable when `activeIndex` is equal to the current slide index in order to avoid tabbing going between slides\n\n  ## Platform considerations\n  The component is available on both native platforms and web.\n\n  ## Other considerations\n  - You may want to use the same kind of layout in all your slides to avoid visual and height differences\n  - `previous` and `next` navigation buttons are automatically removed in `sm` and `xs` viewports, as these smaller viewports offers swipe functionality\n\n  ## Tokens\n\n  You can override the following tokens in exceptional circumstances:\n  - `previousIcon` - Icon of the previous button\n  - `nextIcon` - Icon of the next button\n  - `showPreviousNextNavigation` - If you want to show/hide the previous/next navigation\n  - `showPanelNavigation` - If you want to show/hide the panel navigation\n  - `spaceBetweenSlideAndPreviousNextNavigation` - Horizontal space between slide and previous/next navigational buttons\n  - `spaceBetweenSlideAndPanelNavigation` - Vertical space between slide area and panel navigation area",

package/lib/A11yInfoProvider/index.js

@@ -37,9 +37,9 @@ const A11yInfoProvider = _ref => {
       return () => {};
     }
 
-    _AccessibilityInfo.default.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
+    const motionSubscription = _AccessibilityInfo.default.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
 
-    _AccessibilityInfo.default.addEventListener('screenReaderChanged', setScreenReaderEnabled);
+    const screenReaderSubscription = _AccessibilityInfo.default.addEventListener('screenReaderChanged', setScreenReaderEnabled);
 
     const setInitialA11yInfo = async () => {
       const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([_AccessibilityInfo.default.isReduceMotionEnabled(), _AccessibilityInfo.default.isScreenReaderEnabled()]); // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
@@ -55,9 +55,18 @@ const A11yInfoProvider = _ref => {
     }
 
     return () => {
-      _AccessibilityInfo.default.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
-
-      _AccessibilityInfo.default.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
+      // From react-native 0.65, AccessibilityInfo.removeEventListener is deprecated for `remove` on addEventListener return value
+      if (typeof (motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove) === 'function') {
+        motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove();
+      } else if (typeof _AccessibilityInfo.default.removeEventListener === 'function') {
+        _AccessibilityInfo.default.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
+      }
+
+      if (typeof (screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove) === 'function') {
+        screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove();
+      } else if (typeof _AccessibilityInfo.default.removeEventListener === 'function') {
+        _AccessibilityInfo.default.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
+      }
     };
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReducedMotionContext.Provider, {

package/lib/Button/ButtonGroup.js

@@ -155,8 +155,9 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           tokens: getButtonTokens,
           selected: isSelected,
           inactive: inactive,
-          ...itemA11y,
-          ...selectItemProps(itemRest),
+          ...selectItemProps({ ...itemRest,
+            ...itemA11y
+          }),
           children: label
         }, id);
       })

package/lib/Checkbox/Checkbox.js

@@ -219,6 +219,14 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
+  const selectedProps = selectProps({
+    accessibilityRole: 'checkbox',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: staticStyles.wrapper,
     ref: ref,
@@ -229,12 +237,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
         disabled: inactive,
         onKeyDown: handleKeyDown,
         onPress: handleChange,
-        accessibilityRole: "checkbox",
-        accessibilityState: {
-          checked: isChecked,
-          disabled: inactive
-        },
-        ...selectProps(rest),
+        ...selectedProps,
         children: _ref6 => {
           let {
             focused: focus,