@telus-uds/components-base 1.14.1 → 1.15.0

package/lib-module/List/PressableListItemBase.js

@@ -0,0 +1,117 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import ABBPropTypes from 'airbnb-prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { resolvePressableTokens, clickProps, linkProps, hrefAttrsProp, withLinkRouter } from '../utils';
+import ListItemBase from './ListItemBase';
+import ListItemContent, { tokenTypes as contentTokenTypes } from './ListItemContent';
+import ListItemMark, { tokenTypes as markTokenTypes } from './ListItemMark';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const selectPressableStyles = _ref => {
+  let {
+    backgroundColor,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    interItemMargin
+  } = _ref;
+  return {
+    backgroundColor,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    marginBottom: interItemMargin,
+    ...Platform.select({
+      web: {
+        outline: 'none'
+      }
+    })
+  };
+};
+
+const PressableListItemBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    href,
+    tokens,
+    icon,
+    children,
+    listItemRef,
+    ...rest
+  } = _ref2;
+  const {
+    onPress,
+    ...props
+  } = clickProps.toPressProps(rest);
+  const {
+    hrefAttrs,
+    rest: listItemProps
+  } = hrefAttrsProp.bundle(props);
+  const handlePress = linkProps.handleHref({
+    href,
+    onPress
+  });
+  return /*#__PURE__*/_jsx(ListItemBase, {
+    ref: listItemRef,
+    tokens: tokens(),
+    ...listItemProps,
+    children: _ref3 => {
+      let {
+        isLastItem
+      } = _ref3;
+
+      const getTokens = pressableState => resolvePressableTokens(tokens, pressableState, {
+        last: isLastItem
+      });
+
+      const getPressableStyle = pressableState => [staticStyles.itemContainer, selectPressableStyles(getTokens(pressableState))];
+
+      return /*#__PURE__*/_jsx(Pressable, {
+        onPress: handlePress,
+        href: href,
+        hrefAttrs: hrefAttrs,
+        style: getPressableStyle,
+        ref: ref,
+        children: pressableState => {
+          const themeTokens = getTokens(pressableState);
+          return /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ListItemMark, {
+              icon: icon,
+              tokens: themeTokens
+            }), /*#__PURE__*/_jsx(ListItemContent, {
+              tokens: themeTokens,
+              children: typeof children === 'function' ? children(pressableState) : children
+            })]
+          });
+        }
+      });
+    }
+  });
+});
+PressableListItemBase.displayName = 'PressableListItemBase';
+const staticStyles = StyleSheet.create({
+  itemContainer: {
+    flexDirection: 'row',
+    flex: 1
+  },
+  tokens: { ...contentTokenTypes,
+    ...markTokenTypes
+  }
+});
+PressableListItemBase.propTypes = {
+  href: PropTypes.string,
+  onPress: PropTypes.func,
+  // TODO - type this better, maybe import the subcomponent token types and run it through util
+  // eslint-disable-next-line react/forbid-prop-types
+  tokens: PropTypes.any,
+  icon: PropTypes.elementType,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  listItemRef: ABBPropTypes.ref()
+};
+export default withLinkRouter(PressableListItemBase);

package/lib-module/Notification/Notification.js

@@ -143,7 +143,8 @@ const Notification = /*#__PURE__*/forwardRef((_ref5, ref) => {
 
   const textStyles = selectTextStyles(themeTokens, themeOptions);
   const content = wrapStringsInText(typeof children === 'function' ? children({
-    textStyles
+    textStyles,
+    variant
   }) : children, {
     style: textStyles
   });

package/lib-module/Pagination/Pagination.js

@@ -10,6 +10,7 @@ import usePagination from './usePagination';
 import PageButton from './PageButton';
 import SideButton from './SideButton';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 const selectTextStyles = (_ref, themeOptions) => {
@@ -93,12 +94,13 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
     };
 
     if (shouldRenderButton(itemIndex)) {
-      return /*#__PURE__*/_jsx(PageButton, { ...itemProps,
+      return /*#__PURE__*/_createElement(PageButton, { ...itemProps,
         LinkRouter: ItemLinkRouter,
         linkRouterProps: itemLinkRouterProps,
         label: buttonLabel,
         copy: copy,
-        isActive: isItemActive(itemIndex)
+        isActive: isItemActive(itemIndex),
+        key: buttonLabel
       });
     }
 
@@ -106,7 +108,7 @@ const Pagination = /*#__PURE__*/forwardRef((_ref2, ref) => {
       return /*#__PURE__*/_jsx(Text, {
         style: ellipsisTextStyles,
         children: "..."
-      });
+      }, "...");
     }
 
     return null;

package/lib-module/Pagination/SideButton.js

@@ -7,15 +7,25 @@ import { useThemeTokensCallback } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter } from '../utils';
 import dictionary from './dictionary';
-import useCopy from '../utils/useCopy';
+import useCopy from '../utils/useCopy'; // We need to drop the icon here since it gets rendered via children and not
+// `ButtonBase` in order to tap into the state of the button
+
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const selectIconTokens = (_ref, direction) => {
+const selectButtonTokens = _ref => {
+  let {
+    icon: _,
+    ...rest
+  } = _ref;
+  return selectTokens('Button', rest);
+};
+
+const selectIconTokens = (_ref2, direction) => {
   let {
     color,
     iconSize,
     iconDisplace
-  } = _ref;
+  } = _ref2;
   return {
     color,
     size: iconSize,
@@ -27,7 +37,7 @@ const directionToSide = {
   previous: 'left',
   next: 'right'
 };
-const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
+const SideButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     direction = 'previous',
     onPress,
@@ -36,7 +46,7 @@ const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
     variant,
     tokens,
     ...props
-  } = _ref2;
+  } = _ref3;
   const viewport = useViewport();
   const buttonVariant = {
     direction,
@@ -52,7 +62,7 @@ const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
     icon
   } = getTokens(tokens, buttonVariant);
 
-  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
+  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
 
@@ -76,11 +86,11 @@ const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
-    children: _ref3 => {
+    children: _ref4 => {
       let {
         textStyles,
         ...buttonState
-      } = _ref3;
+      } = _ref4;
       const iconProps = {
         tokens: getIconTokens(buttonState)
       };

package/lib-module/Radio/Radio.js

@@ -151,17 +151,20 @@ const Radio = /*#__PURE__*/forwardRef((_ref4, ref) => {
 
   const uniqueId = useUniqueId('radio');
   const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const selectedProps = selectProps({
+    accessibilityRole: 'radio',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     disabled: inactive,
     onKeyDown: handleKeyDown,
     onPress: handleChange,
-    accessibilityRole: "radio",
-    accessibilityState: {
-      checked: isChecked,
-      disabled: inactive
-    },
-    ...selectProps(rest),
+    ...selectedProps,
     children: _ref5 => {
       let {
         focused: focus,

package/lib-module/RadioCard/RadioCard.js

@@ -87,18 +87,21 @@ const RadioCard = /*#__PURE__*/forwardRef((_ref, ref) => {
   const {
     themeOptions
   } = useTheme();
+  const selectedProps = selectProps({
+    accessibilityRole: 'radio',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
   return /*#__PURE__*/_jsx(PressableCardBase, {
     ref: ref,
     inactive: inactive,
     checked: isChecked,
     tokens: getCardTokens,
     onPress: handleChange,
-    accessibilityRole: "radio",
-    accessibilityState: {
-      checked: isChecked,
-      disabled: inactive
-    },
-    ...selectProps(rest),
+    ...selectedProps,
     children: cardState => {
       const {
         radioSpace,

package/lib-module/Select/Select.js

@@ -234,6 +234,7 @@ const Select = /*#__PURE__*/forwardRef((_ref7, ref) => {
   } = useTheme();
   return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
     ...selectedProps,
+    validation: validation,
     children: _ref8 => {
       let {
         inputId,

package/lib-module/Tabs/Tabs.js

@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import ABBPropTypes from 'airbnb-prop-types';
 import { useThemeTokens } from '../ThemeProvider';
 import StackView from '../StackView';
-import { a11yProps, getTokensPropType, selectSystemProps, useHash, useInputValue, variantProp, viewProps, withLinkRouter } from '../utils';
+import { a11yProps, getTokensPropType, focusHandlerProps, pressProps, selectSystemProps, useHash, useInputValue, variantProp, viewProps, withLinkRouter } from '../utils';
 import HorizontalScroll, { horizontalScrollUtils, HorizontalScrollButton } from '../HorizontalScroll';
 import TabsItem from './TabsItem';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
 const {
   selectHorizontalScrollTokens,
   useItemPositions
@@ -94,15 +95,21 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
           label,
           id,
           accessibilityRole = defaultTabItemAccessibiltyRole,
+          onPress,
           ref: itemRef,
           LinkRouter: ItemLinkRouter = LinkRouter,
-          linkRouterProps: itemLinkRouterProps
+          linkRouterProps: itemLinkRouterProps,
+          ...itemRest
         } = _ref3;
         const itemId = id !== null && id !== void 0 ? id : label;
         const isSelected = Boolean(currentValue && currentValue === itemId);
 
-        const handlePress = event => setValue(itemId, event);
+        const handlePress = event => {
+          if (typeof onPress === 'function') onPress(event);
+          setValue(itemId, event);
+        };
 
+        const itemProps = selectItemProps(itemRest);
         return /*#__PURE__*/_jsx(TabsItem, {
           ref: itemRef,
           href: href,
@@ -117,6 +124,7 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
           linkRouterProps: { ...linkRouterProps,
             ...itemLinkRouterProps
           },
+          ...itemProps,
           children: label
         }, itemId);
       })
@@ -126,7 +134,8 @@ const Tabs = /*#__PURE__*/forwardRef((_ref, ref) => {
 Tabs.displayName = 'Tabs';
 Tabs.propTypes = { ...selectedSystemPropTypes,
   ...withLinkRouter.PropTypes,
-  items: PropTypes.arrayOf(PropTypes.shape({ ...withLinkRouter.PropTypes,
+  items: PropTypes.arrayOf(PropTypes.shape({ ...selectedItemPropTypes,
+    ...withLinkRouter.PropTypes,
     href: PropTypes.string,
     label: PropTypes.string,
     id: PropTypes.string,

package/lib-module/Tags/Tags.js

@@ -131,14 +131,14 @@ const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
         toggleOneValue(id, event);
       };
 
-      const itemProps = {
+      const itemProps = selectItemProps({
         accessibilityState: {
           checked: isSelected
         },
         accessibilityRole: itemA11yRole,
         ...a11yProps.getPositionInSet(items.length, index),
-        ...selectItemProps(itemRest)
-      };
+        ...itemRest
+      });
       return /*#__PURE__*/_jsx(ButtonBase, {
         ref: itemRef,
         ...pressHandlers,

package/lib-module/TextInput/TextInput.js

@@ -27,6 +27,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
 const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     tokens,
+    nativeID,
     variant = {},
     ...rest
   } = _ref;
@@ -41,18 +42,18 @@ const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   };
   return /*#__PURE__*/_jsx(InputSupports, {
-    nativeID: selectedProps.nativeID,
+    nativeID: nativeID,
     ...supportsProps,
     children: _ref2 => {
       let {
         inputId,
-        ...props
+        ...propsFromInputSupports
       } = _ref2;
       return /*#__PURE__*/_jsx(TextInputBase, {
         ref: ref,
-        ...inputProps,
         nativeID: inputId,
-        ...props
+        ...propsFromInputSupports,
+        ...inputProps
       });
     }
   });

package/lib-module/ViewportProvider/useViewportListener.js

@@ -33,10 +33,16 @@ const useViewportListenerCSR = setViewport => {
       return setViewport(viewports.select(window.width));
     };
 
-    const listener = Dimensions.addEventListener('change', onChange); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value;
-    // however, that is not available in RN <=0.64.X, therefore not in any Expo release as of 2021 (Expo SDK 43).
-
-    return (listener === null || listener === void 0 ? void 0 : listener.remove) || (() => Dimensions.removeEventListener('change', onChange)); // setViewport is a function from `useState` so it is stable and won't make the effect re-run
+    const listener = Dimensions.addEventListener('change', onChange);
+    return () => {
+      if (typeof (listener === null || listener === void 0 ? void 0 : listener.remove) === 'function') {
+        // Can't just return listener.remove because listener.emitter disappears, causing an internal error.
+        // See https://github.com/facebook/react-native/issues/34508
+        listener.remove(); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value
+      } else if (typeof Dimensions.removeEventListener === 'function') {
+        Dimensions.removeEventListener('change', onChange);
+      }
+    };
   }, [setViewport]);
 }; // Window is a defined global object in both Web and Native client-side, and undefined in SSR
 

package/lib-module/utils/hasOwnProperty.js

@@ -0,0 +1,11 @@
+/**
+ * Linter disallows object instance prototype methods like someObject.hasOwnProperty(key),
+ * but we can use this instead.
+ *
+ * @param {object} object
+ * @param {String} key
+ * @returns {Boolean}
+ */
+export default function hasOwnProperty(object, key) {
+  return Object.prototype.hasOwnProperty.call(object, key);
+}