@telus-uds/components-base 1.1.0 → 1.3.1

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -0,0 +1,228 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+
+var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+
+var _StackView = require("../StackView");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _props = require("../utils/props");
+
+var _input = require("../utils/input");
+
+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, _props.selectSystemProps)([_props.a11yProps, _props.pressProps, _props.viewProps]);
+const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)(({
+  variant,
+  tokens,
+  items = [],
+  values,
+  initialValues,
+  maxValues = 1,
+  onChange,
+  readOnly = false,
+  inactive = false,
+  feedback,
+  hint,
+  tooltip,
+  legend,
+  name: inputGroupName,
+  accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
+  : _Platform.default.select({
+    web: 'group',
+    default: 'none'
+  }),
+  toggleSwitchTokens,
+  validation,
+  ...rest
+}, ref) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    space,
+    fieldSpace
+  } = (0, _ThemeProvider.useThemeTokens)('ToggleSwitchGroup', tokens, variant, {
+    viewport
+  });
+  const {
+    currentValues,
+    toggleOneValue
+  } = (0, _input.useMultipleInputValues)({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...rest
+  });
+  const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
+  const toggleSwitches = items.map(({
+    label,
+    id = label,
+    accessibilityLabel = label,
+    onChange: itemOnChange,
+    ref: itemRef,
+    tooltip: itemTooltip
+  }, index) => {
+    const isSelected = currentValues.includes(id);
+
+    const handleChange = (newCheckedState, event) => {
+      if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
+      toggleOneValue(id, event);
+    };
+
+    const itemA11y = {
+      accessibilityState: {
+        checked: isSelected
+      },
+      accessibilityRole: itemA11yRole,
+      accessibilityLabel,
+      ..._props.a11yProps.getPositionInSet(items.length, index)
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleSwitch.default, {
+      id: id,
+      ref: itemRef,
+      onChange: handleChange,
+      tokens: toggleSwitchTokens,
+      value: isSelected,
+      inactive: inactive,
+      label: label,
+      tooltip: itemTooltip,
+      ...itemA11y
+    }, id);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    ref: ref,
+    name: inputGroupName,
+    legend: legend,
+    tooltip: tooltip,
+    hint: hint,
+    space: fieldSpace,
+    feedback: feedback,
+    inactive: inactive,
+    validation: validation,
+    ...selectedProps,
+    children: (0, _StackView.getStackedContent)(toggleSwitches, {
+      space,
+      direction: 'column'
+    })
+  });
+});
+ToggleSwitchGroup.displayName = 'ToggleSwitchGroup';
+ToggleSwitchGroup.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _props.getTokensPropType)('ToggleSwitchGroup'),
+  variant: _props.variantProp.propType,
+
+  /**
+   * The maximum number of items a user may select at once. Defaults to 1 and behaves
+   * like radio buttons. To have no limit and allow any number of selections, pass `null`.
+   */
+  maxValues: _propTypes.default.number,
+
+  /**
+   * The options a user may select
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+     * The text displayed to the user on the label.
+     */
+    label: _propTypes.default.string.isRequired,
+
+    /**
+     * An optional accessibility label may be passed to each ToggleSwitch
+     * and will be applied as normal for a React Native accessibilityLabel prop.
+     */
+    accessibilityLabel: _propTypes.default.string,
+
+    /**
+     * An optional unique string may be provided to identify this option,
+     * which will be used in code and passed to any onChange function.
+     * If not provided, the label is used.
+     */
+    id: _propTypes.default.string,
+
+    /**
+     * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
+     */
+    ref: _airbnbPropTypes.default.ref()
+  })),
+
+  /**
+   * If provided, this function is called when the current selection is changed
+   * and is passed an array of the `id`s of all currently selected `items`.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * If the selected item(s) in the toggle switch group are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the ToggleSwitchGroup a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * If `values` is not passed, making the ToggleSwitchGroup an "uncontrolled" component
+   * managing its own selected state, a default set of selections may be provided.
+   * Changing the `initialValues` does not change the user's selections.
+   */
+  initialValues: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * Optional additional text giving more detail to help a user make a choice.
+   */
+  hint: _propTypes.default.string,
+
+  /**
+   * Optional tooltip text content to include alongside the legend and hint.
+   */
+  tooltip: _propTypes.default.string,
+
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: _propTypes.default.string,
+
+  /**
+   * Main text used to describe this group, used in Fieldset's Legend element.
+   */
+  legend: _propTypes.default.string,
+
+  /**
+   * Toggle switch token overrides.
+   */
+  toggleSwitchTokens: (0, _props.getTokensPropType)('ToggleSwitch'),
+
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success'])
+};
+var _default = ToggleSwitchGroup;
+exports.default = _default;

package/lib/ToggleSwitch/index.js

@@ -3,11 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+Object.defineProperty(exports, "ToggleSwitch", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitch.default;
+  }
+});
+Object.defineProperty(exports, "ToggleSwitchGroup", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitchGroup.default;
+  }
+});
 
 var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _ToggleSwitchGroup = _interopRequireDefault(require("./ToggleSwitchGroup"));
 
-var _default = _ToggleSwitch.default;
-exports.default = _default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Tooltip/Tooltip.js

@@ -43,6 +43,8 @@ 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 selectTooltipStyles = ({
   backgroundColor,
   paddingTop,
@@ -167,7 +169,8 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
   position = 'auto',
   copy = 'en',
   tokens,
-  variant
+  variant,
+  ...rest
 }, ref) => {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const controlRef = (0, _react.useRef)();
@@ -280,6 +283,7 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
   } : undefined;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: staticStyles.container,
+    ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
       onPress: toggleIsOpen,
       ref: controlRef,
@@ -312,7 +316,8 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Tooltip.displayName = 'Tooltip';
-Tooltip.propTypes = {
+Tooltip.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
    * pressable state and tooltip variant as an argument.

package/lib/TooltipButton/TooltipButton.js

@@ -21,6 +21,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
 const selectInnerContainerStyles = ({
   borderRadius,
   width
@@ -49,7 +51,8 @@ const selectIconTokens = ({
 const TooltipButton = ({
   pressableState,
   tokens,
-  variant
+  variant,
+  ...rest
 }) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TooltipButton', tokens, variant, pressableState);
   const {
@@ -57,6 +60,7 @@ const TooltipButton = ({
   } = themeTokens;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: (0, _ThemeProvider.applyOuterBorder)(themeTokens),
+    ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectInnerContainerStyles(themeTokens),
       children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
@@ -67,7 +71,8 @@ const TooltipButton = ({
   });
 };
 
-TooltipButton.propTypes = {
+TooltipButton.propTypes = { ...selectedSystemPropTypes,
+
   /**
    * Used as appearances when resolving theme tokens.
    */

package/lib/Typography/Typography.js

@@ -32,6 +32,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
+const [selectProps, selectedSystemPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.viewProps]);
+
 const selectTextStyles = ({
   fontWeight,
   fontSize,
@@ -76,24 +78,24 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)(({
     dataSet,
     maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
   };
-  const a11y = { ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
-    ..._utils2.a11yProps.select(rest)
-  };
+  const selectedProps = selectProps({ ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...rest
+  });
   return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
-    ...a11y,
+    ...selectedProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...textProps,
       children: children
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
     ref: ref,
     ...textProps,
-    ...a11y,
+    ...selectedProps,
     children: children
   });
 });
 Typography.displayName = 'Typography';
-Typography.propTypes = { ..._utils2.a11yProps.types,
+Typography.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils2.getTokensPropType)('Typography'),
   variant: _utils2.variantProp.propType,
 

package/lib/index.js

@@ -38,7 +38,6 @@ var _exportNames = {
   StepTracker: true,
   Tabs: true,
   Tags: true,
-  ToggleSwitch: true,
   Tooltip: true,
   TooltipButton: true,
   Typography: true,
@@ -47,6 +46,7 @@ var _exportNames = {
   BaseProvider: true,
   ViewportProvider: true,
   useViewport: true,
+  ViewportContext: true,
   ThemeProvider: true,
   useTheme: true,
   useSetTheme: true,
@@ -257,12 +257,6 @@ Object.defineProperty(exports, "Tags", {
     return _Tags.default;
   }
 });
-Object.defineProperty(exports, "ToggleSwitch", {
-  enumerable: true,
-  get: function () {
-    return _ToggleSwitch.default;
-  }
-});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
@@ -311,6 +305,12 @@ Object.defineProperty(exports, "useViewport", {
     return _ViewportProvider.useViewport;
   }
 });
+Object.defineProperty(exports, "ViewportContext", {
+  enumerable: true,
+  get: function () {
+    return _ViewportProvider.ViewportContext;
+  }
+});
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
   get: function () {
@@ -516,7 +516,19 @@ Object.keys(_TextInput).forEach(function (key) {
   });
 });
 
-var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+var _ToggleSwitch = require("./ToggleSwitch");
+
+Object.keys(_ToggleSwitch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ToggleSwitch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ToggleSwitch[key];
+    }
+  });
+});
 
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 

package/lib/utils/a11y/semantics.js

@@ -154,9 +154,10 @@ const getA11yPropsFromHtmlTag = (tag, nativeRole) => {
   };
 
   if (tag) {
-    const accessibilityRole = tagsToRoles[tag];
-    if (accessibilityRole) return {
-      accessibilityRole
+    // aria roles don't have native counterparts and RN may throw an error if an unrecognised role is passed
+    const ariaRole = _Platform.default.OS === 'web' && tagsToRoles[tag];
+    if (ariaRole) return {
+      accessibilityRole: ariaRole
     };
     const accessibilityLevel = getHeadingLevel(tag);
     if (accessibilityLevel) return {

package/lib/utils/children.js

@@ -67,7 +67,11 @@ exports.unpackFragment = unpackFragment;
 const isStringOrNumber = child => typeof child === 'string' || typeof child === 'number'; // Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
 
 
-const isWrapable = child => isStringOrNumber(child) || child.type === _A11yText.default;
+const isWrapable = child => {
+  var _child$type;
+
+  return isStringOrNumber(child) || child.type === _A11yText.default || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === 'FootnoteLink';
+};
 
 const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, ''); // Group wrappable children for one `<Text>` parent, merging adjacent text nodes
 

package/lib/utils/index.js

@@ -9,7 +9,8 @@ var _exportNames = {
   useHash: true,
   useSpacingScale: true,
   useResponsiveProp: true,
-  useUniqueId: true
+  useUniqueId: true,
+  withLinkRouter: true
 };
 Object.defineProperty(exports, "info", {
   enumerable: true,
@@ -47,6 +48,12 @@ Object.defineProperty(exports, "useUniqueId", {
     return _useUniqueId.default;
   }
 });
+Object.defineProperty(exports, "withLinkRouter", {
+  enumerable: true,
+  get: function () {
+    return _withLinkRouter.default;
+  }
+});
 
 var _a11y = require("./a11y");
 
@@ -118,16 +125,16 @@ Object.keys(_pressability).forEach(function (key) {
   });
 });
 
-var _propTypes = require("./propTypes");
+var _props = require("./props");
 
-Object.keys(_propTypes).forEach(function (key) {
+Object.keys(_props).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _propTypes[key]) return;
+  if (key in exports && exports[key] === _props[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _propTypes[key];
+      return _props[key];
     }
   });
 });
@@ -156,6 +163,22 @@ Object.keys(_useResponsiveProp).forEach(function (key) {
 
 var _useUniqueId = _interopRequireDefault(require("./useUniqueId"));
 
+var _withLinkRouter = _interopRequireDefault(require("./withLinkRouter"));
+
+var _ssr = require("./ssr");
+
+Object.keys(_ssr).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ssr[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ssr[key];
+    }
+  });
+});
+
 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; }

package/lib/utils/pressability.js

@@ -9,7 +9,7 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
-var _propTypes = require("./propTypes");
+var _pressProps = _interopRequireDefault(require("./props/pressProps"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -108,7 +108,7 @@ const staticStyles = _StyleSheet.default.create(_Platform.default.select({
 
 const getPressHandlersWithArgs = (pressableProps = {}, args = []) => {
   // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
-  const pressHandlers = Object.fromEntries(Object.entries(_propTypes.pressProps.selectHandlers(pressableProps)).map(([key, handler]) => ({
+  const pressHandlers = Object.fromEntries(Object.entries(_pressProps.default.selectHandlers(pressableProps)).map(([key, handler]) => ({
     [key]: (...defaultArgs) => {
       // Pass each handler data on this button and current selection
       handler(...args, ...defaultArgs);