@telus-uds/components-base 1.65.0 → 1.67.0

package/lib/Search/Search.js

@@ -4,36 +4,21 @@ 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 _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _ThemeProvider = require("../ThemeProvider");
-
 var _utils = require("../utils");
-
 var _TextInputBase = _interopRequireDefault(require("../TextInput/TextInputBase"));
-
 var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
-
 var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
-
 var _dictionary = _interopRequireDefault(require("./dictionary"));
-
 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 [selectContainerProps, selectedContainerPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectInputProps, selectedInputPropTypes] = (0, _utils.selectSystemProps)([_utils.textInputHandlerProps, _utils.textInputProps]);
-
 const selectInputTokens = _ref => {
   let {
     searchTokens,
@@ -52,13 +37,12 @@ const selectInputTokens = _ref => {
   } = buttonTokens;
   const buttonWidth = paddingLeft + paddingRight + iconSize;
   const paddingWithButtons = inputPaddingRight + (submitButtonIcon ? buttonWidth : 0) + (clearButtonIcon ? buttonsGapSize + buttonWidth : 0);
-  return { ...(0, _utils.selectTokens)('TextInput', searchTokens),
+  return {
+    ...(0, _utils.selectTokens)('TextInput', searchTokens),
     paddingRight: paddingWithButtons
   };
 };
-
 const selectButtonTokens = tokens => (0, _utils.selectTokens)('Button', tokens);
-
 const selectIconTokens = _ref2 => {
   let {
     iconSize,
@@ -69,6 +53,7 @@ const selectIconTokens = _ref2 => {
     size: iconSize
   };
 };
+
 /**
  * The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.
  * Use `Search` to feature autocomplete interactions.
@@ -82,8 +67,6 @@ const selectIconTokens = _ref2 => {
  * Use the following props to supply additional accessibility labels for the input - `accessibilityLabel`,
  * clear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.
  */
-
-
 const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     initialValue,
@@ -115,8 +98,9 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   });
   const buttonTokens = (0, _ThemeProvider.useThemeTokens)('SearchButton', tokens, variant);
   const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Search', tokens, variant);
-  const getButtonTokens = (0, _ThemeProvider.useThemeTokensCallback)('SearchButton', tokens, variant); // TODO: support overriding the a11y props using a custom dictionary
+  const getButtonTokens = (0, _ThemeProvider.useThemeTokensCallback)('SearchButton', tokens, variant);
 
+  // TODO: support overriding the a11y props using a custom dictionary
   const getCopy = (0, _useCopy.default)({
     dictionary: _dictionary.default,
     copy
@@ -126,39 +110,37 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     buttonsGap,
     clearButtonIcon: ClearButtonIcon,
     submitButtonIcon: SubmitButtonIcon
-  } = themeTokens; // get the actual gap value for the current viewport
+  } = themeTokens;
 
+  // get the actual gap value for the current viewport
   const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
-
   const handleSubmit = event => {
     if (onSubmit !== undefined) {
       onSubmit(currentValue, event);
     }
   };
-
   const handleClear = event => {
     var _ref$current;
-
     setValue('', event);
     onClear === null || onClear === void 0 ? void 0 : onClear('', event);
     ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
   };
-
   const handleFocus = event => {
     if (onFocus !== undefined) onFocus(event);
   };
+  const isEmpty = currentValue === '';
 
-  const isEmpty = currentValue === ''; // Accessibility label should always be present and correctly localised
-
-  const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel'); // Placeholder is optional and may be unset by passing an empty string
-
+  // Accessibility label should always be present and correctly localised
+  const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel');
+  // Placeholder is optional and may be unset by passing an empty string
   const placeholderText = placeholder ?? a11yLabelText;
   const {
     nativeID,
     testID,
     ...containerProps
   } = selectContainerProps(rest);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...containerProps,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ...containerProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
       nativeID: nativeID,
       testID: testID,
@@ -186,18 +168,22 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         inactive: inactive,
         onPress: handleClear,
         tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
-        children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
+        children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButtonIcon, {
+          ...selectIconTokens(getButtonTokens(buttonState))
         })
       }, "clear"), SubmitButtonIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
         accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
         accessibilityRole: "button",
         inactive: inactive,
         onPress: handleSubmit,
-        tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
+        tokens: buttonState => selectButtonTokens(getButtonTokens({
+          ...buttonState,
           priority: 'high'
         })),
         nativeID: nativeSubmitBtnID,
-        children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
+        children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(SubmitButtonIcon, {
+          ...selectIconTokens(getButtonTokens({
+            ...buttonState,
             priority: 'high'
           }))
         })
@@ -206,54 +192,46 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   });
 });
 Search.displayName = 'Search';
-Search.propTypes = { ...selectedContainerPropTypes,
+Search.propTypes = {
+  ...selectedContainerPropTypes,
   ...selectedInputPropTypes,
-
   /**
    * Use this to set the initial value of the search input.
    * Updating `initialValue` will **not** update the actual value.
    */
   initialValue: _propTypes.default.string,
-
   /**
    * Label rendered in the search input when it has no value.
    */
   placeholder: _propTypes.default.string,
-
   /**
    * Disables all user interactions with the search input.
    */
   inactive: _propTypes.default.bool,
-
   /**
    * Use to react upon search input's value changes.
    * Will receive the searched value as an argument.
    */
   onChange: _propTypes.default.func,
-
   /**
    * Triggered when the search input is submitted,
    * either by pressing the submit button, "Enter" key on web,
    * or "Search" key in a mobile keyboard.
    */
   onSubmit: _propTypes.default.func,
-
   /**
    * Triggered when the clear button is pressed.
    */
   onClear: _propTypes.default.func,
-
   /**
    * Triggered when the search input is focused.
    */
   onFocus: _propTypes.default.func,
-
   /**
    *
    * Use to provide an accessible label for the input (visually hidden).
    */
   accessibilityLabel: _propTypes.default.string,
-
   /**
    * Select English or French copy for the accessible labels.
    * You may also pass in a custom dictionary object.
@@ -265,7 +243,6 @@ Search.propTypes = { ...selectedContainerPropTypes,
   })]),
   tokens: (0, _utils.getTokensPropType)('Search'),
   variant: _utils.variantProp.propType,
-
   /**
    * ID for Submit button element on web
    */

package/lib/Search/index.js

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

package/lib/Select/Group.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _utils = require("../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const Group = _ref => {
   let {
     children,
@@ -25,12 +19,10 @@ const Group = _ref => {
     children: children
   });
 };
-
 var _default = Group;
 exports.default = _default;
 Group.propTypes = {
   children: (0, _utils.componentPropType)('Item'),
-
   /**
    * The label for the group.
    */

package/lib/Select/Group.native.js

@@ -4,25 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _utils = require("../utils");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const Group = _ref => {
   let {
     children
   } = _ref;
   return children;
 };
-
 var _default = Group;
 exports.default = _default;
 Group.propTypes = {
   children: (0, _utils.componentPropType)('Item'),
-
   /**
    * The label for the group.
    */

package/lib/Select/Item.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const Item = _ref => {
   let {
     children,
@@ -23,12 +18,10 @@ const Item = _ref => {
     children: children
   });
 };
-
 var _default = Item;
 exports.default = _default;
 Item.propTypes = {
   children: _propTypes.default.string.isRequired,
-
   /**
    * The value of the option
    */

package/lib/Select/Item.native.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 const Item = () => null;
-
 var _default = Item;
 exports.default = _default;

package/lib/Select/Picker.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 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 Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     value,

package/lib/Select/Picker.native.js

@@ -4,31 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 var _reactNativePickerSelect = _interopRequireDefault(require("react-native-picker-select"));
-
 var _utils = require("../utils");
-
 var _Group = _interopRequireDefault(require("./Group"));
-
 var _constants = require("./constants");
-
 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; }
-
 // Styling of the native input is very limited, most of the styles have to be applied to an additional View
 const selectAndroidInputStyles = _ref => {
   let {
@@ -41,16 +28,17 @@ const selectAndroidInputStyles = _ref => {
     paddingTop: 0,
     color
   };
-}; // The native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
-
+};
 
+// The native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
 const selectAndroidContainerStyles = _ref2 => {
   let {
     paddingLeft = _constants.ANDROID_DEFAULT_PADDING,
     paddingRight = _constants.ANDROID_DEFAULT_PADDING,
     ...rest
   } = _ref2;
-  return { ...rest,
+  return {
+    ...rest,
     paddingLeft: paddingLeft > _constants.ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingLeft - _constants.ANDROID_HORIZONTAL_PADDING_OFFSET : _constants.ANDROID_DEFAULT_PADDING,
     paddingRight: paddingRight > _constants.ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingRight - _constants.ANDROID_HORIZONTAL_PADDING_OFFSET : _constants.ANDROID_DEFAULT_PADDING,
     paddingBottom: _constants.ANDROID_DEFAULT_PADDING,
@@ -58,7 +46,6 @@ const selectAndroidContainerStyles = _ref2 => {
     height: rest.height + _constants.ANDROID_HEIGHT_OFFSET
   };
 };
-
 const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     value,
@@ -71,16 +58,13 @@ const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     placeholder,
     ...rest
   } = _ref3;
-
   // Ungroup items, since there's no way to support groups on native
   const flatChildren = _react.Children.toArray(children).flatMap(child => {
     if (child.type === _Group.default) {
       return child.props.children;
     }
-
     return child;
   });
-
   const items = flatChildren.map(_ref4 => {
     let {
       props
@@ -89,8 +73,9 @@ const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       label: props.children,
       value: props.value
     };
-  }); // Unlike other input components, react-native-picker-select doesn't pass an event to its change fn.
+  });
 
+  // Unlike other input components, react-native-picker-select doesn't pass an event to its change fn.
   const handleChange = (newValue, index) => {
     if (onChange) onChange(newValue, {
       // TODO: see if it's possible to pass a real React SyntheticEvent here. For now, just pass an
@@ -101,7 +86,6 @@ const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       }
     });
   };
-
   const picker = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativePickerSelect.default, {
     pickerProps: {
       ref