@telus-uds/components-base 1.65.0 → 1.67.0

package/lib/Select/Select.js

@@ -4,37 +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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _ThemeProvider = require("../ThemeProvider");
-
 var _utils = require("../utils");
-
 var _Picker = _interopRequireDefault(require("./Picker"));
-
 var _InputSupports = _interopRequireDefault(require("../InputSupports"));
-
 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; }
-
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.inputSupportsProps, _utils.viewProps]);
-
 const selectInputStyles = (_ref, themeOptions, inactive) => {
   let {
     backgroundColor,
@@ -56,11 +40,9 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
     validationIconSize = 0,
     height
   } = _ref;
-
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
-
   const textStyles = (0, _ThemeProvider.applyTextStyles)({
     fontName,
     fontSize,
@@ -68,7 +50,6 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
     fontWeight,
     themeOptions
   });
-
   const webStyles = _Platform.default.select({
     web: {
       appearance: 'none',
@@ -77,22 +58,18 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
       outline: 'none',
       cursor: inactive ? 'not-allowed' : undefined,
       opacity: inactive ? 1 : undefined // override Chrome's default fadeout of a disabled select
-
     }
   });
 
   let paddingWithIcons = paddingRight;
-
   if (_Platform.default.OS !== 'android') {
     if (icon) {
       paddingWithIcons += iconSize;
     }
-
     if (validationIcon) {
       paddingWithIcons += validationIconSize;
     }
   }
-
   return {
     backgroundColor,
     color,
@@ -108,7 +85,6 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
     ...webStyles
   };
 };
-
 const selectOuterBorderStyles = _ref2 => {
   let {
     outerBackgroundColor,
@@ -125,7 +101,6 @@ const selectOuterBorderStyles = _ref2 => {
     })
   };
 };
-
 const selectIconTokens = _ref3 => {
   let {
     iconSize,
@@ -136,7 +111,6 @@ const selectIconTokens = _ref3 => {
     color: iconColor
   };
 };
-
 const selectIconContainerStyles = _ref4 => {
   let {
     paddingRight,
@@ -148,7 +122,6 @@ const selectIconContainerStyles = _ref4 => {
     paddingBottom
   };
 };
-
 const selectValidationIconTokens = _ref5 => {
   let {
     validationIconSize,
@@ -159,7 +132,6 @@ const selectValidationIconTokens = _ref5 => {
     color: validationIconColor
   };
 };
-
 const selectValidationIconContainerStyles = _ref6 => {
   let {
     icon,
@@ -176,7 +148,6 @@ const selectValidationIconContainerStyles = _ref6 => {
     })
   };
 };
-
 const selectCustomFeedbackStyles = _ref7 => {
   let {
     feedbackBackgroundColor
@@ -185,6 +156,7 @@ const selectCustomFeedbackStyles = _ref7 => {
     backgroundColor: feedbackBackgroundColor
   };
 };
+
 /**
  * A basic form single-choice select component. Use in forms or individually to receive user's input.
  *
@@ -217,8 +189,6 @@ const selectCustomFeedbackStyles = _ref7 => {
  * NOTE: this does not work on native platforms - the grouped items will be shown at the same level as the non-grouped items.
  *
  */
-
-
 const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
   let {
     value,
@@ -244,17 +214,11 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
     readOnly
   });
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
-
   const handleFocus = () => setIsFocused(true);
-
   const handleBlur = () => setIsFocused(false);
-
   const [isHovered, setIsHovered] = (0, _react.useState)(false);
-
   const handleMouseOver = () => setIsHovered(true);
-
   const handleMouseOut = () => setIsHovered(false);
-
   const {
     supportsProps,
     ...selectedProps
@@ -272,7 +236,8 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, {
+    ...supportsProps,
     ...selectedProps,
     validation: validation,
     feedbackTokens: selectCustomFeedbackStyles(themeTokens),
@@ -304,7 +269,8 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
         }), ValidationIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
           pointerEvents: "none",
           style: [staticStyles.iconContainer, selectValidationIconContainerStyles(themeTokens)],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidationIconComponent, { ...selectValidationIconTokens(themeTokens)
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidationIconComponent, {
+            ...selectValidationIconTokens(themeTokens)
           })
         }), IconComponent && _Platform.default.OS !== 'android' &&
         /*#__PURE__*/
@@ -312,7 +278,8 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
         (0, _jsxRuntime.jsx)(_View.default, {
           pointerEvents: "none",
           style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+            ...selectIconTokens(themeTokens)
           })
         })]
       });
@@ -320,54 +287,45 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref8, ref) => {
   });
 });
 Select.displayName = 'Select';
-Select.propTypes = { ...selectedSystemPropTypes,
-
+Select.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Initial value for the uncontrolled version.
    */
   initialValue: _propTypes.default.string,
-
   /**
    * Current value to be set as selected.
    */
   value: _propTypes.default.string,
-
   /**
    * Callback to be called when the value changes.
    */
   onChange: _propTypes.default.func,
-
   /**
    * An array of items or item groups to be used as options.
    */
   children: (0, _utils.componentPropType)(['Item', 'Group']),
-
   /**
    * Whether the select is disabled.
    */
   inactive: _propTypes.default.bool,
-
   /**
    * Whether the select is read-only.
    */
   readOnly: _propTypes.default.bool,
-
   /**
    * A placeholder to provide instructions (such as "Please select...")
    * as an unselectable option
    */
   placeholder: _propTypes.default.string,
-
   /**
    * Select tokens.
    */
   tokens: (0, _utils.getTokensPropType)('Select'),
-
   /**
    * Select variant.
    */
   variant: _utils.variantProp.propType,
-
   /**
    * Dedicated ID for testing.
    */
@@ -375,7 +333,6 @@ Select.propTypes = { ...selectedSystemPropTypes,
 };
 var _default = Select;
 exports.default = _default;
-
 const staticStyles = _StyleSheet.default.create({
   iconContainer: {
     position: 'absolute',

package/lib/Select/index.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _Select = _interopRequireDefault(require("./Select"));
-
 var _Group = _interopRequireDefault(require("./Group"));
-
 var _Item = _interopRequireDefault(require("./Item"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 _Select.default.Group = _Group.default;
 _Select.default.Item = _Item.default;
 var _default = _Select.default;

package/lib/SideNav/Item.js

@@ -4,31 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _utils = require("../utils");
-
 var _ThemeProvider = require("../ThemeProvider");
-
 var _ItemContent = _interopRequireDefault(require("./ItemContent"));
-
 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.linkProps, _utils.viewProps]);
-
 function selectItemStyles(_ref) {
   let {
     backgroundColor,
@@ -55,13 +42,12 @@ function selectItemStyles(_ref) {
     ...(0, _ThemeProvider.verticalAlignRow)(verticalAlign)
   };
 }
+
 /**
  `SideNav.Item` is a navigational element that is used within `SideNav` or `SideNav.ItemsGroup`.
 
  This component can only be accessed as a name-spaced component: `SideNav.Item`.
  */
-
-
 const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     children,
@@ -77,14 +63,11 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     testID,
     ...props
   } = _ref2;
-
   const handlePress = () => onPress(itemId, groupId);
-
   const {
     hrefAttrs,
     rest
   } = _utils.hrefAttrsProp.bundle(props);
-
   const selectedProps = selectProps({
     accessibilityRole,
     href,
@@ -93,7 +76,6 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...rest
   });
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItem', tokens, variant);
-
   const getAppearanceState = _ref3 => {
     let {
       hovered,
@@ -106,13 +88,12 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       focus: focused
     };
   };
-
-  const getPressableStyle = pressableState => ({ ...selectItemStyles(getTokens(getAppearanceState(pressableState))),
+  const getPressableStyle = pressableState => ({
+    ...selectItemStyles(getTokens(getAppearanceState(pressableState))),
     ...(_Platform.default.OS === 'web' ? {
       outline: 'none'
     } : {})
   });
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     style: getPressableStyle,
@@ -130,19 +111,17 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   });
 });
 Item.displayName = 'Item';
-Item.propTypes = { ...selectedSystemPropTypes,
-
+Item.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Text content of the `Item`.
    */
   children: _propTypes.default.node.isRequired,
-
   /**
    * @ignore
    * Set internally in `SideNav` render function - used to keep track of active item.
    */
   itemId: _propTypes.default.string,
-
   /**
    * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
@@ -150,19 +129,16 @@ Item.propTypes = { ...selectedSystemPropTypes,
   groupId: _propTypes.default.string,
   onPress: _propTypes.default.func,
   href: _propTypes.default.string,
-
   /**
    * On Web if href is passed, React Native Web maps this object's props to
    * `rel`, `target` and `download` attrs.
    */
   hrefAttrs: _propTypes.default.shape(_utils.hrefAttrsProp.types),
-
   /**
    * @ignore
    * Set internally in `SideNav` render function.
    */
   isActive: _propTypes.default.bool,
-
   /**
    * @ignore
    * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.

package/lib/SideNav/ItemContent.js

@@ -5,23 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 exports.selectAccentStyles = selectAccentStyles;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
 var _Typography = _interopRequireDefault(require("../Typography"));
-
 var _utils = require("../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function selectAccentStyles(tokens) {
   return {
     left: tokens.accentOffset,
@@ -32,11 +23,10 @@ function selectAccentStyles(tokens) {
     position: 'absolute'
   };
 }
+
 /**
  * Content inside an item or control in a SideNav, themed by the SideNavItem theme
  */
-
-
 const ItemContent = _ref => {
   let {
     children,
@@ -52,17 +42,14 @@ const ItemContent = _ref => {
     })]
   });
 };
-
 ItemContent.propTypes = {
   tokens: (0, _utils.getTokensPropType)('SideNavItem'),
   children: _propTypes.default.node
 };
-
 const staticStyles = _StyleSheet.default.create({
   absolute: {
     position: 'absolute'
   }
 });
-
 var _default = ItemContent;
 exports.default = _default;

package/lib/SideNav/ItemsGroup.js

@@ -4,27 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _ItemContent = _interopRequireDefault(require("./ItemContent"));
-
 var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
-
 var _utils = require("../utils");
-
 var _ThemeProvider = require("../ThemeProvider");
-
 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; }
-
 /**
  Expandable content areas for use within `SideNav`.
 
@@ -34,8 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
  ## Usage Criteria
  - Use `SideNav.ItemsGroup` with large pages that have multiple sections
- */
-const ItemsGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+ */const ItemsGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     label,
@@ -47,38 +35,35 @@ const ItemsGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     itemTokens,
     onToggle
   } = _ref;
-
   // A SideNav control uses the same style and theme as SideNavItem, with a 'parent' variant,
   // plus control-specific tokens from the SideNavItemsGroup theme (e.g. open/close icon, etc).
-  const getAppearance = appearance => ({ ...variant,
+  const getAppearance = appearance => ({
+    ...variant,
     ...appearance,
     active: isActive
   });
-
-  const getItemAppearance = appearance => ({ ...getAppearance(appearance),
+  const getItemAppearance = appearance => ({
+    ...getAppearance(appearance),
     type: 'parent'
   });
-
   const getGroupTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItemsGroup', tokens, variant);
-
   const getPanelTokens = appearance => {
     const {
       panelBorderColor,
       ...itemsGroupTokens
     } = getGroupTokens(getAppearance(appearance));
-    const groupTokens = { ...itemsGroupTokens,
+    const groupTokens = {
+      ...itemsGroupTokens,
       borderWidth: 0,
       marginBottom: 0
     };
     return (0, _utils.selectTokens)('ExpandCollapsePanel', groupTokens);
   };
-
   const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItem', itemTokens, variant);
-
-  const getControlTokens = appearance => (0, _utils.selectTokens)('ExpandCollapseControl', { ...getItemTokens(getItemAppearance(appearance)),
+  const getControlTokens = appearance => (0, _utils.selectTokens)('ExpandCollapseControl', {
+    ...getItemTokens(getItemAppearance(appearance)),
     // main style from SideNavItem
     ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc
-
   });
 
   const controlContent = controlState => {
@@ -88,7 +73,6 @@ const ItemsGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       children: label
     });
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default.Panel, {
     ref: ref,
     openIds: openGroups,
@@ -110,30 +94,25 @@ ItemsGroup.propTypes = {
    * Specifies the links contained within. It may only contain `SideNav.Item`.
    */
   children: (0, _utils.componentPropType)('Item'),
-
   /**
    * Text content of the group's parent `SideNav.Item`.
    */
   label: _propTypes.default.string.isRequired,
-
   /**
    * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
   groupId: _propTypes.default.string,
-
   /**
    * @ignore
    * Set internally in `SideNav` render function. Called when the group is expanded/collapsed.
    */
   onToggle: _propTypes.default.func,
-
   /**
    * @ignore
    * Set internally in `SideNav` render function. Contains `groupId`s of currently open groups.
    */
   openGroups: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
-
   /**
    * @ignore
    * Set internally in `SideNav` render function. Used to mark group containing the currently active `SideNav.Item`.
@@ -141,7 +120,6 @@ ItemsGroup.propTypes = {
   isActive: _propTypes.default.bool,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('SideNavItemsGroup'),
-
   /**
    * Custom tokens for `SideNav.Item`
    */