@telus-uds/components-base 2.0.0 → 2.0.2

package/lib/Tabs/Tabs.js

@@ -1,53 +1,40 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _StackView = _interopRequireDefault(require("../StackView"));
-
-var _utils = require("../utils");
-
-var _HorizontalScroll = _interopRequireWildcard(require("../HorizontalScroll"));
-
-var _TabsItem = _interopRequireDefault(require("./TabsItem"));
-
-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.viewProps]);
-const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import ABBPropTypes from 'airbnb-prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import StackView from '../StackView';
+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
-} = _HorizontalScroll.horizontalScrollUtils;
-
+} = horizontalScrollUtils;
 const getDefaultTabItemAccessibilityRole = parentRole => {
   switch (parentRole) {
     case 'tablist':
       return 'tab';
-
     case 'navigation':
       return 'link';
-
     default:
       return undefined;
   }
 };
+const getStackViewTokens = variant => {
+  const equalWidth = variant === null || variant === void 0 ? void 0 : variant.equalWidth;
+  return Platform.select({
+    web: {
+      justifyContent: equalWidth ? 'space-evenly' : 'flex-start',
+      width: equalWidth ? '100%' : 'auto'
+    },
+    default: {}
+  });
+};
+
 /**
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
@@ -56,11 +43,7 @@ const getDefaultTabItemAccessibilityRole = parentRole => {
  * `navigation`as the `accessibilityRole` to te Tabs component, this will cause
  * TabItems to default to a role of link and obtain aria-current behaviour.
  */
-
-
-const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  var _restProps$accessibil;
-
+const Tabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     tokens,
     itemTokens,
@@ -77,17 +60,17 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const {
     space,
     ...themeTokens
-  } = (0, _ThemeProvider.useThemeTokens)('Tabs', tokens, variant);
+  } = useThemeTokens('Tabs', tokens, variant);
   const {
     currentValue,
     setValue
-  } = (0, _utils.useInputValue)({
+  } = useInputValue({
     value,
     initialValue,
     onChange
   });
   const [itemPositions, isPositioningReady] = useItemPositions();
-  (0, _utils.useHash)((0, _react.useCallback)((hash, event) => {
+  useHash(React.useCallback((hash, event) => {
     const hashItem = hash && items.find(_ref2 => {
       let {
         href
@@ -98,19 +81,21 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     if (hashId) setTimeout(setValue(hashId, event), 500);
   }, [items, setValue]), isPositioningReady);
   const restProps = selectProps(rest);
-  const parentAccessibilityRole = (_restProps$accessibil = restProps.accessibilityRole) !== null && _restProps$accessibil !== void 0 ? _restProps$accessibil : 'tablist';
+  const parentAccessibilityRole = restProps.accessibilityRole ?? 'tablist';
   const defaultTabItemAccessibiltyRole = getDefaultTabItemAccessibilityRole(parentAccessibilityRole);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalScroll.default, {
+  const stackViewTokens = getStackViewTokens(variant);
+  return /*#__PURE__*/_jsx(HorizontalScroll, {
     ref: ref,
-    ScrollButton: _HorizontalScroll.HorizontalScrollButton,
+    ScrollButton: HorizontalScrollButton,
     itemPositions: itemPositions,
     tokens: selectHorizontalScrollTokens(themeTokens),
     scrollButtonTokens: scrollButtonTokens,
     accessibilityRole: parentAccessibilityRole,
     ...restProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+    children: /*#__PURE__*/_jsx(StackView, {
       space: space,
       direction: "row",
+      tokens: stackViewTokens,
       children: items.map((_ref3, index) => {
         let {
           href,
@@ -121,19 +106,19 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           ref: itemRef,
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
+          render,
           ...itemRest
         } = _ref3;
-        const itemId = id !== null && id !== void 0 ? id : label;
+        const itemId = id ?? label;
         const isSelected = Boolean(currentValue && currentValue === itemId);
-
         const handlePress = event => {
           if (typeof onPress === 'function') onPress(event);
           setValue(itemId, event);
         };
-
         const itemProps = selectItemProps(itemRest);
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsItem.default, {
+        return /*#__PURE__*/_jsx(TabsItem, {
           ref: itemRef,
+          id: itemId,
           href: href,
           variant: variant,
           tokens: itemTokens,
@@ -143,9 +128,11 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           index: index,
           accessibilityRole: accessibilityRole,
           LinkRouter: ItemLinkRouter,
-          linkRouterProps: { ...linkRouterProps,
+          linkRouterProps: {
+            ...linkRouterProps,
             ...itemLinkRouterProps
           },
+          render: render,
           ...itemProps,
           children: label
         }, itemId);
@@ -154,22 +141,39 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
 });
 Tabs.displayName = 'Tabs';
-Tabs.propTypes = { ...selectedSystemPropTypes,
-  ..._utils.withLinkRouter.PropTypes,
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({ ...selectedItemPropTypes,
-    ..._utils.withLinkRouter.PropTypes,
-    href: _propTypes.default.string,
-    label: _propTypes.default.string,
-    id: _propTypes.default.string,
-    ref: _airbnbPropTypes.default.ref()
+Tabs.propTypes = {
+  ...selectedSystemPropTypes,
+  ...withLinkRouter.PropTypes,
+  /**
+   * Array of `TabsItem`s
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    ...selectedItemPropTypes,
+    ...withLinkRouter.PropTypes,
+    href: PropTypes.string,
+    label: PropTypes.string,
+    id: PropTypes.string,
+    ref: ABBPropTypes.ref(),
+    render: PropTypes.func
   })),
-  value: _propTypes.default.string,
-  initialValue: _propTypes.default.string,
-  onChange: _propTypes.default.func,
-  tokens: (0, _utils.getTokensPropType)('Tabs'),
-  itemTokens: (0, _utils.getTokensPropType)('TabsItem'),
-  scrollButtonTokens: (0, _utils.getTokensPropType)('HorizontalScrollButton'),
-  variant: _utils.variantProp.propType
+  /**
+   * `id` property of the current tab in the items array
+   */
+  value: PropTypes.string,
+  initialValue: PropTypes.string,
+  /**
+   * Callback for when the selected tab changes
+   */
+  onChange: PropTypes.func,
+  tokens: getTokensPropType('Tabs'),
+  /**
+   * Custom tokens for `TabsItem`
+   */
+  itemTokens: getTokensPropType('TabsItem'),
+  /**
+   * Custom tokens for `HorizontalScrollButton`
+   */
+  scrollButtonTokens: getTokensPropType('HorizontalScrollButton'),
+  variant: variantProp.propType
 };
-var _default = Tabs;
-exports.default = _default;
+export default Tabs;

package/lib/Tabs/TabsItem.js

@@ -1,46 +1,20 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _utils = require("../utils");
-
-var _Spacer = _interopRequireDefault(require("../Spacer"));
-
-var _HorizontalScroll = require("../HorizontalScroll");
-
-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.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import { applyTextStyles, useTheme, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, clickProps, getTokensPropType, linkProps, resolvePressableTokens, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
+import Spacer from '../Spacer';
+import { horizontalScrollUtils } from '../HorizontalScroll';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const {
   itemPositionsPropType,
   getItemPositionLayoutHandler
-} = _HorizontalScroll.horizontalScrollUtils;
-
+} = horizontalScrollUtils;
 const selectHighlightBarStyles = _ref => {
   let {
     highlightColor,
@@ -55,12 +29,11 @@ const selectHighlightBarStyles = _ref => {
     borderRadius: highlightBarBorderRadius,
     borderWidth: highlightBarBorderWidth,
     bottom: -1 * (highlightBarHeight + highlightBarBorderWidth),
-    left: -1 * highlightBarBorderWidth,
-    right: -1 * highlightBarBorderWidth,
+    left: 0,
+    right: 0,
     zIndex: 1 + highlightBarBorderWidth
   };
 };
-
 const selectHighlightTriangleStyles = _ref2 => {
   let {
     highlightColor,
@@ -81,7 +54,6 @@ const selectHighlightTriangleStyles = _ref2 => {
     }
   };
 };
-
 const selectContainerStyles = _ref3 => {
   let {
     backgroundColor,
@@ -100,15 +72,14 @@ const selectContainerStyles = _ref3 => {
     paddingVertical: paddingVertical - borderWidth
   };
 };
+
 /**
  * Item within a Tabs component representing one tab of content. May be rendered as a link
  * or as a "menuitem" button depending on whether 'href' is passed.
  *
  * This is rendered automatically by `Tabs` and isn't intended be used directly.
  */
-
-
-const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+const TabsItem = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     href,
     variant,
@@ -118,45 +89,42 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     index,
     children,
     accessibilityRole,
-    accessibilityCurrent = _Platform.default.OS === 'web' && accessibilityRole === 'link' && selected ? 'page' : undefined,
+    accessibilityCurrent = Platform.OS === 'web' && accessibilityRole === 'link' && selected ? 'page' : undefined,
     accessibilityState = accessibilityRole === 'tab' ? {
       selected
     } : undefined,
+    id,
+    render,
     ...rawRest
   } = _ref4;
-
   // Convert onClick etc to onPress etc if used in an integration
   const {
     onPress,
     ...rest
-  } = _utils.clickProps.toPressProps(rawRest);
-
+  } = clickProps.toPressProps(rawRest);
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabsItem', tokens, variant);
-
-  const resolveTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState, {
+  } = useTheme();
+  const getTokens = useThemeTokensCallback('TabsItem', tokens, variant);
+  const resolveTokens = pressableState => resolvePressableTokens(getTokens, pressableState, {
     selected
   });
-
   const getPressableStyle = pressableState => {
     const {
       maxWidth
     } = resolveTokens(pressableState);
     return [{
       maxWidth
-    }, _Platform.default.OS === 'web' && {
+    }, Platform.OS === 'web' && {
       outline: 'none'
     }];
   };
+  const handleLayout = getItemPositionLayoutHandler(itemPositions.positions, index);
 
-  const handleLayout = getItemPositionLayoutHandler(itemPositions.positions, index); // On press, update the selection, call any press handler, and open any href in platform-appropriate way
-
-  const openHref = href && _utils.linkProps.handleHref({
+  // On press, update the selection, call any press handler, and open any href in platform-appropriate way
+  const openHref = href && linkProps.handleHref({
     href
   });
-
   const handlePress = onPress || openHref ? function () {
     if (onPress) onPress(...arguments);
     if (openHref) openHref(...arguments);
@@ -167,26 +135,32 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     accessibilityState,
     ...rest
   });
-  (0, _react.useEffect)(() => {
+  React.useEffect(() => {
     // If this is selected while off-screen, scroll it into view
     if (selected) {
       const position = itemPositions.positions[index];
       const scrollEnd = itemPositions.scrollOffset + itemPositions.containerWidth;
-
-      if ( // is off the right edge, or
-      scrollEnd && (position === null || position === void 0 ? void 0 : position.end) > scrollEnd || // is off the left edge
+      if (
+      // is off the right edge, or
+      scrollEnd && (position === null || position === void 0 ? void 0 : position.end) > scrollEnd ||
+      // is off the left edge
       typeof (position === null || position === void 0 ? void 0 : position.start) === 'number' && position.start < itemPositions.scrollOffset) {
         itemPositions.scrollTo(position.start);
       }
-    } // itemPositions is a ref object so this should only re-run when `selected` (or `index`) change
-
+    }
+    // itemPositions is a ref object so this should only re-run when `selected` (or `index`) change
   }, [selected, index, itemPositions]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  if (render) return render({
+    selected,
+    handlePress
+  });
+  return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     onPress: handlePress,
     href: href,
     style: getPressableStyle,
     onLayout: handleLayout,
+    nativeID: id,
     ...selectedProps,
     children: pressableState => {
       const {
@@ -199,25 +173,26 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
       const hasHighlightTriangle = Boolean(themeTokens.highlightTriangleSize);
       const highlightTriangleStyle = hasHighlightTriangle && selectHighlightTriangleStyles(themeTokens);
       const containerStyles = selectContainerStyles(themeTokens);
-      const textStyles = (0, _ThemeProvider.applyTextStyles)({ ...(0, _utils.selectTokens)('Typography', themeTokens),
+      const textStyles = applyTextStyles({
+        ...selectTokens('Typography', themeTokens),
         themeOptions,
         textAlign
       });
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      return /*#__PURE__*/_jsxs(View, {
         style: staticStyles.container,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        children: [/*#__PURE__*/_jsx(View, {
           style: containerStyles,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          children: /*#__PURE__*/_jsx(Text, {
             style: textStyles,
             children: children
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        }), /*#__PURE__*/_jsx(Spacer, {
           space: space
-        }), hasHighlightBar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        }), hasHighlightBar && /*#__PURE__*/_jsx(View, {
           style: [staticStyles.absolute, highlightBarStyle]
-        }), hasHighlightTriangle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        }), hasHighlightTriangle && /*#__PURE__*/_jsx(View, {
           style: [staticStyles.absolute, highlightTriangleStyle.container],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          children: /*#__PURE__*/_jsx(View, {
             style: highlightTriangleStyle.triangle
           })
         })]
@@ -226,18 +201,20 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   });
 });
 TabsItem.displayName = 'TabsItem';
-TabsItem.propTypes = { ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('TabsItem'),
-  variant: _utils.variantProp.propType,
-  onPress: _propTypes.default.func,
-  href: _propTypes.default.string,
-  index: _propTypes.default.number,
-  selected: _propTypes.default.bool,
+TabsItem.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('TabsItem'),
+  variant: variantProp.propType,
+  onPress: PropTypes.func,
+  href: PropTypes.string,
+  index: PropTypes.number,
+  selected: PropTypes.bool,
   itemPositions: itemPositionsPropType,
-  children: _propTypes.default.string
+  children: PropTypes.string,
+  id: PropTypes.string,
+  render: PropTypes.func
 };
-
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   center: {
     alignItems: 'center'
   },
@@ -250,10 +227,12 @@ const staticStyles = _StyleSheet.default.create({
   container: {
     flexGrow: 1,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
   }
 });
-
-var _default = (0, _utils.withLinkRouter)(TabsItem);
-
-exports.default = _default;
+export default withLinkRouter(TabsItem);

package/lib/Tabs/index.js

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