@telus-uds/components-base 1.65.0 → 1.67.0

package/lib/Checkbox/CheckboxButton.js

@@ -4,33 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.selectCheckboxTokens = exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
 var _CheckboxInput = _interopRequireDefault(require("./CheckboxInput"));
-
 var _ThemeProvider = require("../ThemeProvider");
-
 var _utils = require("../utils");
-
 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 selectInputStyles = (_ref, isChecked) => {
   let {
     iconBackgroundColor,
@@ -63,7 +49,6 @@ const selectInputStyles = (_ref, isChecked) => {
     })
   };
 };
-
 const selectIconTokens = _ref2 => {
   let {
     icon,
@@ -76,16 +61,13 @@ const selectIconTokens = _ref2 => {
     size: iconSize
   };
 };
-
 const tokenKeys = ['checkedBackgroundColor', 'checkedSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderWidth', 'inputOutlineColor', 'inputOutlineWidth', 'inputSize', 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'inputSize'];
-
 const selectCheckboxTokens = (themeTokens, prefix) => (0, _utils.selectTokens)(tokenKeys, themeTokens, prefix);
+
 /**
  * The visual toggle of a checkbox input. Is not interactive on its own, should be used inside
  * an interactive parent that passes down props when interacted with. Used in CheckboxCard
  */
-
-
 exports.selectCheckboxTokens = selectCheckboxTokens;
 const CheckboxButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
@@ -108,7 +90,8 @@ const CheckboxButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     checked: isChecked
   });
   const iconTokens = selectIconTokens(stateTokens);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...selectProps(rest),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
       testID: inputId,
@@ -124,62 +107,54 @@ const CheckboxButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         value: value
       }), isChecked && IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         testID: iconId,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+          ...iconTokens
         })
       })]
     })
   });
 });
 CheckboxButton.displayName = 'CheckboxButton';
-CheckboxButton.propTypes = { ...selectedSystemPropTypes,
-
+CheckboxButton.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Use `checked` for controlled Checkbox. For uncontrolled Checkbox, use the `defaultChecked` prop.
    */
   isChecked: _propTypes.default.bool,
-
   /**
    * Checkbox tokens.
    */
   tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
     allowFunction: true
   }),
-
   /**
    * Whether the corresponding input is disabled or active.
    */
   inactive: _propTypes.default.bool,
-
   /**
    * Use `defaultChecked` to provide the initial value for an uncontrolled Checkbox.
    */
   defaultChecked: _propTypes.default.bool,
-
   /**
    * Checkbox input ID.
    */
   inputId: _propTypes.default.string,
-
   /**
    * Checkbox icon ID.
    */
   iconId: _propTypes.default.string,
-
   /**
    * Can control the checkbox on the card.
    */
   isControlled: _propTypes.default.bool,
-
   /**
    * Callback called when a controlled checkbox gets interacted with.
    */
   handleChange: _propTypes.default.func,
-
   /**
    * Associate this checkbox with a group (set as the name attribute).
    */
   name: _propTypes.default.string,
-
   /**
    * The value of the checkbox: true or false
    */
@@ -187,7 +162,6 @@ CheckboxButton.propTypes = { ...selectedSystemPropTypes,
 };
 var _default = CheckboxButton;
 exports.default = _default;
-
 const staticStyles = _StyleSheet.default.create({
   container: {
     flexDirection: 'row',

package/lib/Checkbox/CheckboxGroup.js

@@ -4,35 +4,22 @@ 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 _ViewportProvider = require("../ViewportProvider");
-
 var _ThemeProvider = require("../ThemeProvider");
-
 var _utils = require("../utils");
-
 var _StackView = require("../StackView");
-
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-
 var _Fieldset = _interopRequireDefault(require("../Fieldset"));
-
 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 [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
+
 /**
  * A group of Checkboxs that behave as a fieldset. Use when users select any number of choices from options.
  *
@@ -80,7 +67,6 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
  * />
  * ```
  */
-
 const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     tokens,
@@ -125,11 +111,9 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     readOnly: readOnly || inactive
   });
   const uniqueFields = ['id', 'label'];
-
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`CheckboxGroup items must have unique ${uniqueFields.join(', ')}`);
   }
-
   const checkboxes = items.map((_ref2, index) => {
     let {
       label,
@@ -139,12 +123,10 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       ...itemRest
     } = _ref2;
     const checkboxId = id || `Checkbox[${index}]`;
-
     const handleChange = (newCheckedState, event) => {
       if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
       toggleOneValue(checkboxId, event);
     };
-
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
       ref: itemRef,
       id: checkboxId,
@@ -187,91 +169,77 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
 });
 CheckboxGroup.displayName = 'CheckboxGroup';
-CheckboxGroup.propTypes = { ...selectedSystemPropTypes,
-
+CheckboxGroup.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Optional theme token overrides for the outer CheckboxGroup component
    */
   tokens: (0, _utils.getTokensPropType)('CheckboxGroup'),
-
   /**
    * Optional theme token overrides for each inner Checkbox component
    */
   radioTokens: (0, _utils.getTokensPropType)('Checkbox'),
-
   /**
    * Theme variants, shared between both CheckboxGroup and Checkbox
    */
   variant: _utils.variantProp.propType,
-
   /**
    * Array of objects containing specifics for each Checkbox to be rendered in the group.
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.exact({ ...selectedItemPropTypes,
+  items: _propTypes.default.arrayOf(_propTypes.default.exact({
+    ...selectedItemPropTypes,
     label: _propTypes.default.string,
     id: _propTypes.default.string,
     onChange: _propTypes.default.func,
     ref: _airbnbPropTypes.default.ref()
   })),
-
   /**
    * Main text used to describe this group, used in Fieldset's Legend element.
    */
   legend: _propTypes.default.string,
-
   /**
    * Optional additional text giving more detail to help a user make a choice.
    */
   hint: _propTypes.default.string,
-
   /**
    * Position of the hint relative to label. Use `below` to display a larger hint below the label.
    */
   hintPosition: _propTypes.default.oneOf(['inline', 'below']),
-
   /**
    * Optional tooltip text content to include alongside the legend and hint.
    */
   tooltip: _propTypes.default.string,
-
   /**
    * Current validation status of the group, passed to the feedback element if there is one.
    */
   validation: _propTypes.default.oneOf(['error', 'success']),
-
   /**
    * If provided, a Feedback element is rendered containing this text.
    */
   feedback: _propTypes.default.string,
-
   /**
    * If provided, the checkboxed with this ids are selected on first render.
    */
   initialCheckedIds: _propTypes.default.arrayOf(_propTypes.default.string),
-
   /**
    * If not undefined, the checkboxes with these ids is selected, and the
    * element's selection state will be controlled by its parent using the `onChange` function.
    */
   checkedIds: _propTypes.default.arrayOf(_propTypes.default.string),
-
   /**
    * Function to call on change in selection state. Is required if the selection state is controlled
    * by a parent using checkedId and the input is not readOnly.
    */
   onChange: _propTypes.default.func,
-
   /**
    * If true, the checkboxes cannot be selected by the user and simply show their current state.
    */
   readOnly: _propTypes.default.bool,
-
   /**
    * If true, the checkboxes cannot be interacted with, elements are set as `disabled` and if the
    * theme supports `inactive` appearances rules, these are applied.
    */
   inactive: _propTypes.default.bool,
-
   /**
    * On Web, this is passed to the `name` attribute of the fieldset and each checkbox input.
    */

package/lib/Checkbox/CheckboxInput.js

@@ -4,23 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 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; }
-
 /**
  * On Web we need to include an actual input but hide it.
- */
-const CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+ */const CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     checked,
     defaultChecked,
@@ -31,14 +23,12 @@ const CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onChange,
     value
   } = _ref;
-
   const handleClick = event => {
     // Cancel the click dispatched via the label tag, since it's already wrapped
     // in <Pressable>
     event.preventDefault();
     event.stopPropagation();
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
     checked: isControlled ? checked : undefined,
     defaultChecked: isControlled ? undefined : defaultChecked,

package/lib/Checkbox/CheckboxInput.native.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /**
  * There's no checkbox input on native platforms, so this is a noop.
  */
 const CheckboxInput = () => null;
-
 var _default = CheckboxInput;
 exports.default = _default;

package/lib/Checkbox/index.js

@@ -10,12 +10,8 @@ Object.defineProperty(exports, "CheckboxGroup", {
   }
 });
 exports.default = void 0;
-
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-
 var _CheckboxGroup = _interopRequireDefault(require("./CheckboxGroup"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _Checkbox.default;
 exports.default = _default;

package/lib/CheckboxCard/CheckboxCard.js

@@ -4,35 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
 var _ThemeProvider = require("../ThemeProvider");
-
 var _utils = require("../utils");
-
 var _Card = require("../Card");
-
 var _StackView = _interopRequireDefault(require("../StackView"));
-
 var _CheckboxButton = _interopRequireWildcard(require("../Checkbox/CheckboxButton"));
-
 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.focusHandlerProps, _utils.viewProps]);
 const CheckboxCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
@@ -59,21 +44,17 @@ const CheckboxCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     initialValue: defaultChecked,
     onChange
   });
-
   const handleChange = event => {
     if (!inactive) {
       setIsChecked(!isChecked, event);
     }
   };
-
   const uniqueId = (0, _utils.useUniqueId)('CheckboxCard');
   const inputId = id ?? uniqueId;
   const uniqueIconId = (0, _utils.useUniqueId)('CheckboxIcon');
   const iconCheckboxId = iconId ?? uniqueIconId;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('CheckboxCard', tokens, variant);
-
   const getCardTokens = cardState => (0, _Card.selectPressableCardTokens)(getTokens(cardState));
-
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
@@ -100,7 +81,8 @@ const CheckboxCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       } = getTokens(cardState);
       const checkboxTokens = (0, _CheckboxButton.selectCheckboxTokens)(themeTokens, 'checkbox');
       const titleTokens = (0, _utils.selectTokens)('Typography', themeTokens);
-      const textStyle = (0, _ThemeProvider.applyTextStyles)({ ...titleTokens,
+      const textStyle = (0, _ThemeProvider.applyTextStyles)({
+        ...titleTokens,
         themeOptions
       });
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
@@ -138,78 +120,64 @@ const CheckboxCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
 });
 CheckboxCard.displayName = 'CheckboxCard';
-CheckboxCard.propTypes = { ...selectedSystemPropTypes,
-
+CheckboxCard.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Content to be displayed at the top of the card alongside the checkbox
    */
   title: _propTypes.default.string,
-
   /**
    * Additional content to be displayed below the checkbox.
    */
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
   /**
    * Use `checked` for controlled checkbox. For uncontrolled checkbox, use the `defaultChecked` prop.
    */
   checked: _propTypes.default.bool,
-
   /**
    * Use `defaultChecked` to provide the initial value for an uncontrolled checkbox.
    */
   defaultChecked: _propTypes.default.bool,
-
   /**
    * An optional checkboxdescription.
    */
   description: _propTypes.default.string,
-
   /**
    * Checkbox card ID.
    */
   id: _propTypes.default.string,
-
   /**
    * Checkbox icon ID.
    */
   iconId: _propTypes.default.string,
-
   /**
    * Whether the corresponding input is disabled or active.
    */
   inactive: _propTypes.default.bool,
-
   /**
    * The label.
    */
   label: _propTypes.default.string,
-
   /**
    * Associate this checkbox card with a group (set as the name attribute).
    */
   name: _propTypes.default.string,
-
   /**
    * Whether the underlying input triggered a validation error or not.
    */
   error: _propTypes.default.bool,
-
   /**
    * The value. Must be unique within the group.
    */
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]),
-
   /**
    * Callback called when a controlled checkbox card gets interacted with.
    */
   onChange: _propTypes.default.func,
-
   /**
    * checkbox card tokens.
    */
   tokens: (0, _utils.getTokensPropType)('CheckboxCard'),
-
   /**
    * checkbox variant.
    */
@@ -217,7 +185,6 @@ CheckboxCard.propTypes = { ...selectedSystemPropTypes,
 };
 var _default = CheckboxCard;
 exports.default = _default;
-
 const staticStyles = _StyleSheet.default.create({
   alignWithText: {
     justifyContent: 'center'

package/lib/CheckboxCard/index.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _CheckboxCard = _interopRequireDefault(require("./CheckboxCard"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = _CheckboxCard.default;
 exports.default = _default;