@telus-uds/components-base 2.0.0 → 2.0.2

package/{lib-module/Responsive/Responsive.js → lib/Responsive/ResponsiveProp.js}

@@ -2,44 +2,37 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { viewports } from '@telus-uds/system-constants';
 import { useResponsiveProp } from '../utils';
-/**
- * Responsive conditionally renders children based on whether the viewport matches the provided
- * min and max viewports.
- *
- * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
- * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
- * after hydration. This may cause a layout shift on devices other than the narrowest.
- */
-
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const Responsive = _ref => {
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+const ResponsiveProp = _ref => {
   let {
     min = 'xs',
     max,
     children
   } = _ref;
-  // Start returning children at the 'min' viewport or greater
   const byViewports = {
     [min]: children
   };
-
   if (max && max !== 'xl') {
     // Stop returning children at the viewport one above 'max' or greater
     const maxIndex = viewports.keys.indexOf(max);
     const maxPlusOne = maxIndex >= 0 ? viewports.keys[maxIndex + 1] : null;
     if (maxPlusOne) byViewports[maxPlusOne] = null;
   }
-
+  const responsiveProp = useResponsiveProp(byViewports, null);
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: useResponsiveProp(byViewports, null)
+    children: responsiveProp
   });
 };
-
-Responsive.propTypes = {
+ResponsiveProp.displayName = 'Responsive';
+ResponsiveProp.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
   min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
   max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
   children: PropTypes.node.isRequired
 };
-export default Responsive;
+export default ResponsiveProp;

package/lib/Responsive/ResponsiveWithMediaQueryStyleSheet.js

@@ -0,0 +1,68 @@
+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 = viewports.keys;
+  const minIndex = viewportsArray.indexOf(min);
+  const maxIndex = viewportsArray.indexOf(max);
+  let hiddenViewports = [];
+  if (minIndex !== -1) {
+    hiddenViewports = viewportsArray.slice(0, minIndex);
+  }
+  if (maxIndex !== -1) {
+    hiddenViewports = hiddenViewports.concat(viewportsArray.slice(maxIndex + 1));
+  }
+  const styles = {};
+  viewportsArray.forEach(viewport => {
+    if (hiddenViewports.includes(viewport)) {
+      styles[viewport] = {
+        display: 'none'
+      };
+    }
+  });
+  return createMediaQueryStyles(styles, false);
+}
+const ResponsiveWithMediaQueryStyleSheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    min,
+    max,
+    inheritedStyles = [],
+    children
+  } = _ref;
+  const {
+    ids,
+    styles
+  } = StyleSheet.create({
+    responsive: {
+      ...inheritedStyles.reduce((acc, prop) => {
+        acc[prop] = 'inherit';
+        return acc;
+      }, {}),
+      ...generateResponsiveStyles(min, max)
+    }
+  });
+  return /*#__PURE__*/_jsx(BaseView, {
+    style: styles.responsive,
+    dataSet: ids.responsive && {
+      media: ids.responsive
+    },
+    ref: ref,
+    children: children
+  });
+});
+ResponsiveWithMediaQueryStyleSheet.displayName = 'Responsive';
+ResponsiveWithMediaQueryStyleSheet.propTypes = {
+  /**
+   * To hide children of `Responsive` if the current viewport is smaller than `min`
+   */
+  min: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  /**
+   * To hide children of `Responsive` if the current viewport is larger than `max`
+   */
+  max: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  inheritedStyles: PropTypes.arrayOf(PropTypes.string),
+  children: PropTypes.node.isRequired
+};
+export default ResponsiveWithMediaQueryStyleSheet;

package/lib/Responsive/index.js

@@ -1,13 +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,39 +1,15 @@
-"use strict";
-
-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]);
-
+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,
@@ -52,13 +28,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 {
+    ...selectTokens('TextInput', searchTokens),
     paddingRight: paddingWithButtons
   };
 };
-
-const selectButtonTokens = tokens => (0, _utils.selectTokens)('Button', tokens);
-
+const selectButtonTokens = tokens => selectTokens('Button', tokens);
 const selectIconTokens = _ref2 => {
   let {
     iconSize,
@@ -69,6 +44,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,9 +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__*/(0, _react.forwardRef)((_ref3, ref) => {
+const Search = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     initialValue,
     value,
@@ -98,23 +72,28 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     copy = 'en',
     tokens,
     variant,
+    nativeSubmitBtnID,
     ...rest
   } = _ref3;
   const {
     currentValue = '',
     setValue
-  } = (0, _utils.useInputValue)({
+  } = useInputValue({
     value,
     initialValue,
     onChange
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Search', tokens, 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); // TODO: support overriding the a11y props using a custom dictionary
+  const themeTokens = useThemeTokens('Search', tokens, {
+    inactive,
+    ...variant
+  });
+  const buttonTokens = useThemeTokens('SearchButton', tokens, variant);
+  const getThemeTokens = useThemeTokensCallback('Search', tokens, variant);
+  const getButtonTokens = useThemeTokensCallback('SearchButton', tokens, variant);
 
-  const getCopy = (0, _useCopy.default)({
-    dictionary: _dictionary.default,
+  // TODO: support overriding the a11y props using a custom dictionary
+  const getCopy = useCopy({
+    dictionary,
     copy
   });
   const {
@@ -122,40 +101,38 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     buttonsGap,
     clearButtonIcon: ClearButtonIcon,
     submitButtonIcon: SubmitButtonIcon
-  } = themeTokens; // get the actual gap value for the current viewport
-
-  const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
+  } = themeTokens;
 
+  // get the actual gap value for the current viewport
+  const buttonsGapSize = 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();
+    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);
   };
+  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
-
-  const placeholderText = placeholder !== null && placeholder !== void 0 ? placeholder : a11yLabelText;
+  // 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,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+  return /*#__PURE__*/_jsx(View, {
+    ...containerProps,
+    children: /*#__PURE__*/_jsx(TextInputBase, {
       nativeID: nativeID,
       testID: testID,
       ...selectInputProps(rest),
@@ -176,23 +153,28 @@ const Search = /*#__PURE__*/(0, _react.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, { ...selectIconTokens(getButtonTokens(buttonState))
+        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,
         onPress: handleSubmit,
-        tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
+        tokens: buttonState => selectButtonTokens(getButtonTokens({
+          ...buttonState,
           priority: 'high'
         })),
-        children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
+        nativeID: nativeSubmitBtnID,
+        children: buttonState => /*#__PURE__*/_jsx(SubmitButtonIcon, {
+          ...selectIconTokens(getButtonTokens({
+            ...buttonState,
             priority: 'high'
           }))
         })
@@ -201,65 +183,60 @@ 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,
-
+  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.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,13 +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,34 +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 = _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
   });
-};
-
-var _default = Group;
-exports.default = _default;
+});
+Group.displayName = 'Group';
+export default Group;
 Group.propTypes = {
-  children: (0, _utils.componentPropType)('Item'),
-  label: _propTypes.default.string.isRequired
+  children: componentPropType('Item'),
+  /**
+   * The label for the group.
+   */
+  label: PropTypes.string.isRequired
 };

package/lib/Select/Group.native.js

@@ -1,26 +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'),
-  label: _propTypes.default.string.isRequired
+  children: componentPropType('Item'),
+  /**
+   * The label for the group.
+   */
+  label: PropTypes.string.isRequired
 };

package/lib/Select/Item.js

@@ -1,32 +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 = _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
   });
-};
-
-var _default = Item;
-exports.default = _default;
+});
+Item.displayName = 'Item';
+export default Item;
 Item.propTypes = {
-  children: _propTypes.default.string.isRequired,
-  value: _propTypes.default.string.isRequired
+  children: PropTypes.string.isRequired,
+  /**
+   * The value of the option
+   */
+  value: PropTypes.string.isRequired
 };

package/lib/Select/Item.native.js

@@ -1,11 +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;