@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/Tags/Tags.js

@@ -1,26 +1,19 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(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 _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _StackView = require("../StackView");
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _pressability = require("../utils/pressability");
-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 [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import ABBPropTypes from 'airbnb-prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import ButtonBase from '../Button/ButtonBase';
+import Icon from '../Icon';
+import { StackWrap, getStackedContent } from '../StackView';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, pressProps, selectSystemProps, selectTokens, useMultipleInputValues, variantProp, viewProps } from '../utils';
+import { getPressHandlersWithArgs } from '../utils/pressability';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
 const separateIconTextTokens = (_ref, returnRest) => {
   let {
     icon,
@@ -45,7 +38,7 @@ const separateIconTextTokens = (_ref, returnRest) => {
       borderRadius: iconBorderRadius,
       alignSelf: iconAlignSelf,
       padding: iconPadding,
-      ..._Platform.default.select({
+      ...Platform.select({
         // TODO: https://github.com/telus/universal-design-system/issues/487
         web: {
           transition: 'color 200ms, background 200ms'
@@ -62,7 +55,7 @@ const separateIconTextTokens = (_ref, returnRest) => {
 };
 const selectIconTextTokens = tokens => separateIconTextTokens(tokens, false);
 const selectNonIconTextTokens = tokens => separateIconTextTokens(tokens, true);
-const Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Tags = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     variant,
     tokens,
@@ -73,29 +66,29 @@ const Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     onChange,
     readOnly = false,
     inactive = false,
-    accessibilityRole = _Platform.default.select({
+    accessibilityRole = Platform.select({
       web: 'group',
       default: 'none'
     }),
     ...rest
   } = _ref2;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tags', tokens, variant, {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Tags', tokens, variant, {
     viewport
   });
-  const stackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
+  const stackTokens = selectTokens('StackView', themeTokens);
   const {
     direction,
     space
   } = themeTokens;
-  const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('TagsItem', tokens, variant);
+  const getItemTokens = useThemeTokensCallback('TagsItem', tokens, variant);
   const getButtonTokens = buttonState =>
   // Remove icon-text-related tokens, since we want to handle them ourselves, not use ButtonBase's handling
-  (0, _utils.selectTokens)('Button', selectNonIconTextTokens(getItemTokens(buttonState)));
+  selectTokens('Button', selectNonIconTextTokens(getItemTokens(buttonState)));
   const {
     currentValues,
     toggleOneValue
-  } = (0, _utils.useMultipleInputValues)({
+  } = useMultipleInputValues({
     initialValues,
     values,
     maxValues,
@@ -108,10 +101,10 @@ const Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   });
   const itemA11yRole = 'checkbox';
   const uniqueFields = ['id', 'label'];
-  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+  if (!containUniqueFields(items, uniqueFields)) {
     throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`);
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+  return /*#__PURE__*/_jsx(StackWrap, {
     ref: ref,
     ...selectedProps,
     space: space,
@@ -127,7 +120,7 @@ const Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       const isSelected = currentValues.includes(id);
 
       // Pass an object of relevant component state as first argument for any passed-in press handlers
-      const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(rest, [{
+      const pressHandlers = getPressHandlersWithArgs(rest, [{
         id,
         label,
         currentValues
@@ -141,10 +134,10 @@ const Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
           checked: isSelected
         },
         accessibilityRole: itemA11yRole,
-        ..._utils.a11yProps.getPositionInSet(items.length, index),
+        ...a11yProps.getPositionInSet(items.length, index),
         ...itemRest
       });
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+      return /*#__PURE__*/_jsx(ButtonBase, {
         ref: itemRef,
         ...pressHandlers,
         onPress: handlePress,
@@ -171,18 +164,18 @@ const Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
             iconWrapperStyle,
             icon: IconComponent
           } = selectIconTextTokens(itemTokens);
-          const iconContent = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          const iconContent = IconComponent ? /*#__PURE__*/_jsx(View, {
             style: iconWrapperStyle,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            children: /*#__PURE__*/_jsx(Icon, {
               icon: IconComponent,
               tokens: iconTokens
             })
           }) : null;
-          const textContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          const textContent = /*#__PURE__*/_jsx(Text, {
             style: textStyles,
             children: label
           });
-          return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [iconContent, textContent] : [textContent, iconContent], {
+          return getStackedContent(iconPosition === 'left' ? [iconContent, textContent] : [textContent, iconContent], {
             space: iconSpace,
             direction: 'row'
           });
@@ -194,60 +187,59 @@ const Tags = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 Tags.displayName = 'Tags';
 Tags.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Tags'),
-  variant: _utils.variantProp.propType,
+  tokens: getTokensPropType('Tags'),
+  variant: variantProp.propType,
   /**
    * If provided, sets a maximum number of items a user may select at once.
    */
-  maxValues: _propTypes.default.number,
+  maxValues: PropTypes.number,
   /**
    * The options a user may select
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+  items: PropTypes.arrayOf(PropTypes.shape({
     ...selectedItemPropTypes,
     /**
      * The text displayed to the user in the button, describing this option,
      * passed to the button as its child.
      */
-    label: _propTypes.default.string.isRequired,
+    label: PropTypes.string.isRequired,
     /**
      * An optional accessibility label may be passed to ButtonGroup Buttons
      * which is applied as normal for a React Native accessibilityLabel prop.
      */
-    accessibilityLabel: _propTypes.default.string,
+    accessibilityLabel: PropTypes.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,
+    id: PropTypes.string,
     /**
      * An optional ref for one individual Tag button in the tags
      */
-    ref: _airbnbPropTypes.default.ref()
+    ref: ABBPropTypes.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,
+  onChange: PropTypes.func,
   /**
    * If the selected item(s) in the button 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 ButtonGroup 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),
+  values: PropTypes.arrayOf(PropTypes.string),
   /**
    * If `values` is not passed, making the ButtonGroup 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),
+  initialValues: PropTypes.arrayOf(PropTypes.string),
   /**
    * AccesibilityRole for the Tags
    */
-  accessibilityRole: _propTypes.default.string
+  accessibilityRole: PropTypes.string
 };
-var _default = Tags;
-exports.default = _default;
+export default Tags;

package/lib/Tags/index.js

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

package/lib/TextInput/TextArea.js

@@ -1,19 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _utils = require("../utils");
-var _InputSupports = _interopRequireDefault(require("../InputSupports"));
-var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
-var _ThemeProvider = require("../ThemeProvider");
-var _propTypes = _interopRequireDefault(require("./propTypes"));
-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.focusHandlerProps, _utils.inputSupportsProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
+import InputSupports from '../InputSupports';
+import TextInputBase from './TextInputBase';
+import { useThemeTokens } from '../ThemeProvider';
+import textInputPropTypes from './propTypes';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
 
 /**
  * Use to collect long-form information such as product feedback or support queries.
@@ -39,14 +32,14 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
-const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const TextArea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant = {},
     ...rest
   } = _ref;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextArea', tokens, variant);
-  const [inputHeight, setInputHeight] = _react.default.useState();
+  const themeTokens = useThemeTokens('TextArea', tokens, variant);
+  const [inputHeight, setInputHeight] = React.useState();
 
   // adjust the text area's height as new lines are added to the content
   const onHeightChange = _ref2 => {
@@ -58,7 +51,7 @@ const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       }
     } = _ref2;
     // on native this is happens out of the box
-    if (_Platform.default.OS === 'web') {
+    if (Platform.OS === 'web') {
       setInputHeight(height);
     }
   };
@@ -77,14 +70,14 @@ const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     height: inputHeight,
     tokens: themeTokens
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+  return /*#__PURE__*/_jsx(InputSupports, {
     ...supportsProps,
     children: _ref3 => {
       let {
         inputId,
         ...props
       } = _ref3;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+      return /*#__PURE__*/_jsx(TextInputBase, {
         ref: ref,
         ...inputProps,
         nativeID: inputId,
@@ -96,10 +89,9 @@ const TextArea = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 TextArea.displayName = 'TextArea';
 TextArea.propTypes = {
   ...selectedSystemPropTypes,
-  ..._propTypes.default,
-  tokens: (0, _utils.getTokensPropType)('TextArea', 'TextInput'),
+  ...textInputPropTypes,
+  tokens: getTokensPropType('TextArea', 'TextInput'),
   // TODO: support both TextArea and TextInput tokens
-  variant: _utils.variantProp.propType
+  variant: variantProp.propType
 };
-var _default = TextArea;
-exports.default = _default;
+export default TextArea;

package/lib/TextInput/TextInput.js

@@ -1,18 +1,11 @@
-"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 _InputSupports = _interopRequireDefault(require("../InputSupports"));
-var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
-var _propTypes2 = _interopRequireDefault(require("./propTypes"));
-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.focusHandlerProps, _utils.inputSupportsProps, _utils.textInputHandlerProps, _utils.textInputProps, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
+import InputSupports from '../InputSupports';
+import TextInputBase from './TextInputBase';
+import textInputPropTypes from './propTypes';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
 
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
@@ -32,7 +25,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-const TextInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     nativeID,
@@ -51,8 +44,8 @@ const TextInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       validation: supportsProps.validation
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(InputSupports, {
       nativeID: nativeID,
       ...supportsProps,
       children: _ref2 => {
@@ -60,7 +53,7 @@ const TextInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           inputId,
           ...propsFromInputSupports
         } = _ref2;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+        return /*#__PURE__*/_jsx(TextInputBase, {
           ref: ref,
           nativeID: inputId,
           ...propsFromInputSupports,
@@ -73,14 +66,13 @@ const TextInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 TextInput.displayName = 'TextInput';
 TextInput.propTypes = {
   ...selectedSystemPropTypes,
-  ..._propTypes2.default,
+  ...textInputPropTypes,
   /**
    * A callback which if provided will get a clear button rendered and will be called whenever that button gets pressed.
    */
-  onClear: _propTypes.default.func,
-  onKeyPress: _propTypes.default.func,
-  tokens: (0, _utils.getTokensPropType)('TextInput'),
-  variant: _utils.variantProp.propType
+  onClear: PropTypes.func,
+  onKeyPress: PropTypes.func,
+  tokens: getTokensPropType('TextInput'),
+  variant: variantProp.propType
 };
-var _default = TextInput;
-exports.default = _default;
+export default TextInput;