@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/Responsive/ResponsiveWithMediaQueryStyleSheet.js

@@ -1,17 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _systemConstants = require("@telus-uds/system-constants");
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
+import { BaseView, StyleSheet, createMediaQueryStyles } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 function generateResponsiveStyles(min, max) {
-  const viewportsArray = _systemConstants.viewports.keys;
+  const viewportsArray = viewports.keys;
   const minIndex = viewportsArray.indexOf(min);
   const maxIndex = viewportsArray.indexOf(max);
   let hiddenViewports = [];
@@ -29,9 +22,9 @@ function generateResponsiveStyles(min, max) {
       };
     }
   });
-  return (0, _utils.createMediaQueryStyles)(styles, false);
+  return createMediaQueryStyles(styles, false);
 }
-const ResponsiveWithMediaQueryStyleSheet = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ResponsiveWithMediaQueryStyleSheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     min,
     max,
@@ -41,7 +34,7 @@ const ResponsiveWithMediaQueryStyleSheet = /*#__PURE__*/_react.default.forwardRe
   const {
     ids,
     styles
-  } = _utils.StyleSheet.create({
+  } = StyleSheet.create({
     responsive: {
       ...inheritedStyles.reduce((acc, prop) => {
         acc[prop] = 'inherit';
@@ -50,7 +43,7 @@ const ResponsiveWithMediaQueryStyleSheet = /*#__PURE__*/_react.default.forwardRe
       ...generateResponsiveStyles(min, max)
     }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.BaseView, {
+  return /*#__PURE__*/_jsx(BaseView, {
     style: styles.responsive,
     dataSet: ids.responsive && {
       media: ids.responsive
@@ -64,13 +57,12 @@ ResponsiveWithMediaQueryStyleSheet.propTypes = {
   /**
    * To hide children of `Responsive` if the current viewport is smaller than `min`
    */
-  min: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   /**
    * To hide children of `Responsive` if the current viewport is larger than `max`
    */
-  max: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xl']),
-  inheritedStyles: _propTypes.default.arrayOf(_propTypes.default.string),
-  children: _propTypes.default.node.isRequired
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  inheritedStyles: PropTypes.arrayOf(PropTypes.string),
+  children: PropTypes.node.isRequired
 };
-var _default = ResponsiveWithMediaQueryStyleSheet;
-exports.default = _default;
+export default ResponsiveWithMediaQueryStyleSheet;

package/lib/Responsive/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Responsive = _interopRequireDefault(require("./Responsive"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Responsive.default;
-exports.default = _default;
+import Responsive from './Responsive';
+export default Responsive;

package/lib/Search/Search.js

@@ -1,22 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(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 }; }
-const [selectContainerProps, selectedContainerPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-const [selectInputProps, selectedInputPropTypes] = (0, _utils.selectSystemProps)([_utils.textInputHandlerProps, _utils.textInputProps]);
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
+import TextInputBase from '../TextInput/TextInputBase';
+import ButtonBase from '../Button/ButtonBase';
+import useCopy from '../utils/useCopy';
+import dictionary from './dictionary';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
 const selectInputTokens = _ref => {
   let {
     searchTokens,
@@ -36,11 +29,11 @@ const selectInputTokens = _ref => {
   const buttonWidth = paddingLeft + paddingRight + iconSize;
   const paddingWithButtons = inputPaddingRight + (submitButtonIcon ? buttonWidth : 0) + (clearButtonIcon ? buttonsGapSize + buttonWidth : 0);
   return {
-    ...(0, _utils.selectTokens)('TextInput', searchTokens),
+    ...selectTokens('TextInput', searchTokens),
     paddingRight: paddingWithButtons
   };
 };
-const selectButtonTokens = tokens => (0, _utils.selectTokens)('Button', tokens);
+const selectButtonTokens = tokens => selectTokens('Button', tokens);
 const selectIconTokens = _ref2 => {
   let {
     iconSize,
@@ -65,7 +58,7 @@ 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__*/_react.default.forwardRef((_ref3, ref) => {
+const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     initialValue,
     value,
@@ -85,22 +78,22 @@ const Search = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const {
     currentValue = '',
     setValue
-  } = (0, _utils.useInputValue)({
+  } = useInputValue({
     value,
     initialValue,
     onChange
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Search', tokens, {
+  const themeTokens = useThemeTokens('Search', tokens, {
     inactive,
     ...variant
   });
-  const buttonTokens = (0, _ThemeProvider.useThemeTokens)('SearchButton', tokens, variant);
-  const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Search', tokens, variant);
-  const getButtonTokens = (0, _ThemeProvider.useThemeTokensCallback)('SearchButton', tokens, variant);
+  const buttonTokens = useThemeTokens('SearchButton', tokens, variant);
+  const getThemeTokens = useThemeTokensCallback('Search', tokens, variant);
+  const getButtonTokens = useThemeTokensCallback('SearchButton', tokens, variant);
 
   // TODO: support overriding the a11y props using a custom dictionary
-  const getCopy = (0, _useCopy.default)({
-    dictionary: _dictionary.default,
+  const getCopy = useCopy({
+    dictionary,
     copy
   });
   const {
@@ -111,7 +104,7 @@ const Search = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   } = themeTokens;
 
   // get the actual gap value for the current viewport
-  const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
+  const buttonsGapSize = useSpacingScale(buttonsGap);
   const handleSubmit = event => {
     if (onSubmit !== undefined) {
       onSubmit(currentValue, event);
@@ -120,8 +113,8 @@ const Search = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   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();
+    onClear === null || onClear === void 0 || onClear('', event);
+    ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
   };
   const handleFocus = event => {
     if (onFocus !== undefined) onFocus(event);
@@ -137,9 +130,9 @@ const Search = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     testID,
     ...containerProps
   } = selectContainerProps(rest);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     ...containerProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+    children: /*#__PURE__*/_jsx(TextInputBase, {
       nativeID: nativeID,
       testID: testID,
       ...selectInputProps(rest),
@@ -160,16 +153,16 @@ const Search = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       onSubmitEditing: handleSubmit,
       onFocus: handleFocus,
       accessibilityLabel: a11yLabelText,
-      buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+      buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/_jsx(ButtonBase, {
         accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
         accessibilityRole: "button",
         inactive: inactive,
         onPress: handleClear,
         tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
-        children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButtonIcon, {
+        children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, {
           ...selectIconTokens(getButtonTokens(buttonState))
         })
-      }, "clear"), SubmitButtonIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+      }, "clear"), SubmitButtonIcon && /*#__PURE__*/_jsx(ButtonBase, {
         accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
         accessibilityRole: "button",
         inactive: inactive,
@@ -179,7 +172,7 @@ const Search = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
           priority: 'high'
         })),
         nativeID: nativeSubmitBtnID,
-        children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(SubmitButtonIcon, {
+        children: buttonState => /*#__PURE__*/_jsx(SubmitButtonIcon, {
           ...selectIconTokens(getButtonTokens({
             ...buttonState,
             priority: 'high'
@@ -197,54 +190,53 @@ Search.propTypes = {
    * Use this to set the initial value of the search input.
    * Updating `initialValue` will **not** update the actual value.
    */
-  initialValue: _propTypes.default.string,
+  initialValue: PropTypes.string,
   /**
    * Label rendered in the search input when it has no value.
    */
-  placeholder: _propTypes.default.string,
+  placeholder: PropTypes.string,
   /**
    * Disables all user interactions with the search input.
    */
-  inactive: _propTypes.default.bool,
+  inactive: PropTypes.bool,
   /**
    * Use to react upon search input's value changes.
    * Will receive the searched value as an argument.
    */
-  onChange: _propTypes.default.func,
+  onChange: PropTypes.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,
+  onSubmit: PropTypes.func,
   /**
    * Triggered when the clear button is pressed.
    */
-  onClear: _propTypes.default.func,
+  onClear: PropTypes.func,
   /**
    * Triggered when the search input is focused.
    */
-  onFocus: _propTypes.default.func,
+  onFocus: PropTypes.func,
   /**
    *
    * Use to provide an accessible label for the input (visually hidden).
    */
-  accessibilityLabel: _propTypes.default.string,
+  accessibilityLabel: PropTypes.string,
   /**
    * Select English or French copy for the accessible labels.
    * You may also pass in a custom dictionary object.
    */
-  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
-    accessibilityLabel: _propTypes.default.string,
-    clearButtonAccessibilityLabel: _propTypes.default.string,
-    submitButtonAccessibilityLabel: _propTypes.default.string
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
+    accessibilityLabel: PropTypes.string,
+    clearButtonAccessibilityLabel: PropTypes.string,
+    submitButtonAccessibilityLabel: PropTypes.string
   })]),
-  tokens: (0, _utils.getTokensPropType)('Search'),
-  variant: _utils.variantProp.propType,
+  tokens: getTokensPropType('Search'),
+  variant: variantProp.propType,
   /**
    * ID for Submit button element on web
    */
-  nativeSubmitBtnID: _propTypes.default.string
+  nativeSubmitBtnID: PropTypes.string
 };
-var _default = Search;
-exports.default = _default;
+export default Search;

package/lib/Search/dictionary.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
+export default {
   en: {
     accessibilityLabel: 'Search',
     clearButtonAccessibilityLabel: 'Clear',
@@ -15,5 +9,4 @@ var _default = {
     clearButtonAccessibilityLabel: 'Effacer',
     submitButtonAccessibilityLabel: 'Chercher'
   }
-};
-exports.default = _default;
+};

package/lib/Search/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-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;
+import Search from './Search';
+export default Search;

package/lib/Select/Group.js

@@ -1,32 +1,24 @@
-"use strict";
-
-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 = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { componentPropType } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Group = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     label
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("optgroup", {
+  return /*#__PURE__*/_jsx("optgroup", {
     label: label,
     ref: ref,
     children: children
   });
 });
 Group.displayName = 'Group';
-var _default = Group;
-exports.default = _default;
+export default Group;
 Group.propTypes = {
-  children: (0, _utils.componentPropType)('Item'),
+  children: componentPropType('Item'),
   /**
    * The label for the group.
    */
-  label: _propTypes.default.string.isRequired
+  label: PropTypes.string.isRequired
 };

package/lib/Select/Group.native.js

@@ -1,24 +1,16 @@
-"use strict";
-
-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 }; }
+import PropTypes from 'prop-types';
+import { componentPropType } from '../utils';
 const Group = _ref => {
   let {
     children
   } = _ref;
   return children;
 };
-var _default = Group;
-exports.default = _default;
+export default Group;
 Group.propTypes = {
-  children: (0, _utils.componentPropType)('Item'),
+  children: componentPropType('Item'),
   /**
    * The label for the group.
    */
-  label: _propTypes.default.string.isRequired
+  label: PropTypes.string.isRequired
 };

package/lib/Select/Item.js

@@ -1,31 +1,23 @@
-"use strict";
-
-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 = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     value
   } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+  return /*#__PURE__*/_jsx("option", {
     value: value,
     ref: ref,
     children: children
   });
 });
 Item.displayName = 'Item';
-var _default = Item;
-exports.default = _default;
+export default Item;
 Item.propTypes = {
-  children: _propTypes.default.string.isRequired,
+  children: PropTypes.string.isRequired,
   /**
    * The value of the option
    */
-  value: _propTypes.default.string.isRequired
+  value: PropTypes.string.isRequired
 };

package/lib/Select/Item.native.js

@@ -1,9 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 const Item = () => null;
-var _default = Item;
-exports.default = _default;
+export default Item;

package/lib/Select/Picker.js

@@ -1,16 +1,9 @@
-"use strict";
-
-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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs]);
-const Picker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { componentPropType, selectSystemProps, htmlAttrs } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     value,
     onChange,
@@ -41,13 +34,13 @@ const Picker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
      * onOpen when the select is open and onClose when the select is closed, onOpen is in the event onMousedown
      * when is selected and oClose is in onMouseOut and onChange when the select is closed.
      */
-    (0, _jsxRuntime.jsxs)("select", {
+    _jsxs("select", {
       ref: ref,
       style: style,
       onMouseOver: onMouseOver,
       onMouseOut: () => {
-        onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut();
-        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onMouseOut === null || onMouseOut === void 0 || onMouseOut();
+        onClose === null || onClose === void 0 || onClose();
       },
       onFocus: onFocus,
       onBlur: onBlur,
@@ -64,7 +57,7 @@ const Picker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       "aria-invalid": accessibilityInvalid,
       "data-testid": testID,
       ...selectedProps,
-      children: [placeholder !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+      children: [placeholder !== undefined && /*#__PURE__*/_jsx("option", {
         value: placeholder.value,
         disabled: true,
         hidden: true,
@@ -74,31 +67,30 @@ const Picker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   );
 });
 Picker.displayName = 'Picker';
-var _default = Picker;
-exports.default = _default;
+export default Picker;
 Picker.propTypes = {
   ...selectedSystemPropTypes,
-  value: _propTypes.default.string,
-  onChange: _propTypes.default.func,
-  onFocus: _propTypes.default.func,
-  onBlur: _propTypes.default.func,
-  onMouseOver: _propTypes.default.func,
-  onMouseOut: _propTypes.default.func,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  onMouseOut: PropTypes.func,
   /**
    * It executes when the select choices are open
    */
-  onOpen: _propTypes.default.func,
+  onOpen: PropTypes.func,
   /**
    * It executes when the select choices are closed
    */
-  onClose: _propTypes.default.func,
-  style: _propTypes.default.object,
-  inactive: _propTypes.default.bool,
-  children: (0, _utils.componentPropType)(['Item', 'Group']),
-  placeholder: _propTypes.default.shape({
-    value: _propTypes.default.string,
-    label: _propTypes.default.string
+  onClose: PropTypes.func,
+  style: PropTypes.object,
+  inactive: PropTypes.bool,
+  children: componentPropType(['Item', 'Group']),
+  placeholder: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
   }),
-  nativeID: _propTypes.default.string,
-  testID: _propTypes.default.string
+  nativeID: PropTypes.string,
+  testID: PropTypes.string
 };