@telus-uds/components-base 1.1.0 → 1.2.0

package/lib/Button/ButtonBase.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -17,7 +19,7 @@ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/export
 
 var _utils = require("../ThemeProvider/utils");
 
-var _propTypes = _interopRequireDefault(require("./propTypes"));
+var _propTypes2 = _interopRequireDefault(require("./propTypes"));
 
 var _utils2 = require("../utils");
 
@@ -170,18 +172,23 @@ const selectWebOnlyStyles = (inactive, themeTokens, {
 };
 
 const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
+  id,
   href,
   hrefAttrs,
   children,
-  onPress,
   tokens = {},
   disabled = false,
   // alias for inactive
   inactive = disabled,
   selected = false,
   dataSet,
-  ...rest
+  ...rawRest
 }, ref) => {
+  const {
+    onPress,
+    ...rest
+  } = _utils2.clickProps.toPressProps(rawRest);
+
   const extraButtonState = {
     inactive,
     selected
@@ -217,6 +224,7 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
 
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        id: id,
         style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, _Platform.default.select({
           web: {
             maxWidth: '100%',
@@ -235,10 +243,15 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 ButtonBase.displayName = 'ButtonBase';
-ButtonBase.propTypes = { ..._utils2.a11yProps.types,
-  ..._propTypes.default,
+ButtonBase.propTypes = {
+  id: _propTypes.default.string,
+  ..._utils2.a11yProps.types,
+  ..._propTypes2.default,
   ..._utils2.linkProps.types
 };
+ButtonBase.defaultProps = {
+  id: undefined
+};
 
 const staticStyles = _StyleSheet.default.create({
   row: {
@@ -265,5 +278,6 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-var _default = ButtonBase;
+var _default = (0, _utils2.withLinkRouter)(ButtonBase);
+
 exports.default = _default;

package/lib/Card/PressableCardBase.js

@@ -52,10 +52,14 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)(({
   inactive,
   href,
   hrefAttrs,
-  onPress,
   accessibilityRole = href ? 'link' : undefined,
-  ...rest
+  ...rawRest
 }, ref) => {
+  const {
+    onPress,
+    ...rest
+  } = _utils.clickProps.toPressProps(rawRest);
+
   const viewport = (0, _ViewportProvider.useViewport)();
 
   const a11y = _propTypes2.a11yProps.select({ ...rest,
@@ -137,5 +141,7 @@ PressableCardBase.propTypes = {
   variant: _utils.variantProp.propType,
   ..._propTypes2.a11yProps.types
 };
-var _default = PressableCardBase;
+
+var _default = (0, _utils.withLinkRouter)(PressableCardBase);
+
 exports.default = _default;

package/lib/Checkbox/Checkbox.js

@@ -43,8 +43,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-// @todo move `LabelContent` outside of the `InputLabel` and fix
-// the issue with the cursor not being pointer on Web
 const selectInputStyles = ({
   iconBackgroundColor,
   inputBorderColor,

package/lib/IconButton/IconButton.js

@@ -83,10 +83,14 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)(({
   icon: IconComponent,
   href,
   hrefAttrs,
-  onPress,
   accessibilityRole = href ? 'link' : 'button',
-  ...rest
+  ...rawRest
 }, ref) => {
+  const {
+    onPress,
+    ...rest
+  } = _utils.clickProps.toPressProps(rawRest);
+
   const a11y = _propTypes2.a11yProps.select({ ...rest,
     accessibilityRole
   });
@@ -136,5 +140,6 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-var _default = IconButton;
+var _default = (0, _utils.withLinkRouter)(IconButton);
+
 exports.default = _default;

package/lib/Link/LinkBase.js

@@ -19,6 +19,8 @@ var _propTypes2 = require("../utils/propTypes");
 
 var _pressability = require("../utils/pressability");
 
+var _utils = require("../utils");
+
 var _InlinePressable = _interopRequireDefault(require("./InlinePressable"));
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -120,7 +122,6 @@ const selectIconTokens = ({
 
 const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
   href,
-  onPress,
   icon,
   iconPosition = icon ? 'left' : undefined,
   iconProps,
@@ -129,8 +130,13 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   accessibilityRole = 'link',
   dataSet,
-  ...props
+  ...rawRest
 }, ref) => {
+  const {
+    onPress,
+    ...props
+  } = _propTypes2.clickProps.toPressProps(rawRest);
+
   const {
     hrefAttrs,
     rest
@@ -231,5 +237,6 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-var _default = LinkBase;
+var _default = (0, _utils.withLinkRouter)(LinkBase);
+
 exports.default = _default;

package/lib/Pagination/PageButton.js

@@ -85,5 +85,7 @@ PageButton.propTypes = { ..._utils.linkProps.types,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('PaginationPageButton')
 };
-var _default = PageButton;
+
+var _default = (0, _utils.withLinkRouter)(PageButton);
+
 exports.default = _default;

package/lib/Pagination/Pagination.js

@@ -55,7 +55,9 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   tokens,
   sideButtonVariant,
-  sideButtonTokens
+  sideButtonTokens,
+  LinkRouter,
+  linkRouterProps
 }, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
@@ -93,13 +95,21 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
     direction: "previous",
     copy: copy,
     variant: sideButtonVariant,
-    tokens: sideButtonTokens
+    tokens: sideButtonTokens,
+    LinkRouter: LinkRouter,
+    linkRouterProps: linkRouterProps
   }), ...items.map((child, itemIndex) => {
     const buttonLabel = `${itemIndex + 1}`;
     const itemProps = getItemProps(itemIndex);
+    const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter;
+    const itemLinkRouterProps = { ...linkRouterProps,
+      ...itemProps.linkRouterProps
+    };
 
     if (shouldRenderButton(itemIndex)) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageButton.default, { ...itemProps,
+        LinkRouter: ItemLinkRouter,
+        linkRouterProps: itemLinkRouterProps,
         label: buttonLabel,
         copy: copy,
         isActive: isItemActive(itemIndex)
@@ -118,7 +128,9 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
     direction: "next",
     copy: copy,
     variant: sideButtonVariant,
-    tokens: sideButtonTokens
+    tokens: sideButtonTokens,
+    LinkRouter: LinkRouter,
+    linkRouterProps: linkRouterProps
   })];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: staticStyles.container,
@@ -132,7 +144,7 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 _PageButton.default.displayName = 'PageButton';
 Pagination.PageButton = _PageButton.default;
-Pagination.propTypes = {
+Pagination.propTypes = { ..._utils.withLinkRouter.propTypes,
   children: (0, _utils.componentPropType)('PageButton'),
   copy: _utils.copyPropTypes,
   variant: _utils.variantProp.propType,

package/lib/Pagination/SideButton.js

@@ -125,5 +125,7 @@ SideButton.propTypes = {
   copy: _utils.copyPropTypes,
   ..._utils.linkProps.types
 };
-var _default = SideButton;
+
+var _default = (0, _utils.withLinkRouter)(SideButton);
+
 exports.default = _default;

package/lib/Radio/Radio.js

@@ -37,8 +37,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-// @todo move `LabelContent` outside of the `InputLabel` and fix
-// the issue with the cursor not being pointer on Web
 const selectContainerStyles = ({
   containerBackgroundColor,
   containerBorderRadius,

package/lib/Tabs/Tabs.js

@@ -46,7 +46,9 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   initialValue,
   onChange,
-  items = []
+  items = [],
+  LinkRouter,
+  linkRouterProps
 }, ref) => {
   const {
     space,
@@ -82,7 +84,9 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
         href,
         label,
         id,
-        ref: itemRef
+        ref: itemRef,
+        LinkRouter: ItemLinkRouter = LinkRouter,
+        linkRouterProps: itemLinkRouterProps
       }, index) => {
         const itemId = id ?? label;
         const isSelected = Boolean(currentValue && currentValue === itemId);
@@ -98,6 +102,10 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
           selected: isSelected,
           itemPositions: itemPositions,
           index: index,
+          LinkRouter: ItemLinkRouter,
+          linkRouterProps: { ...linkRouterProps,
+            ...itemLinkRouterProps
+          },
           children: label
         }, itemId);
       })
@@ -105,8 +113,8 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
   });
 });
 Tabs.displayName = 'Tabs';
-Tabs.propTypes = {
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+Tabs.propTypes = { ..._utils.withLinkRouter.PropTypes,
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({ ..._utils.withLinkRouter.PropTypes,
     href: _propTypes.default.string,
     label: _propTypes.default.string,
     id: _propTypes.default.string,

package/lib/Tabs/TabsItem.js

@@ -99,7 +99,6 @@ const selectContainerStyles = ({
 
 
 const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
-  onPress,
   href,
   variant,
   tokens,
@@ -114,8 +113,14 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
   } : {
     selected
   },
-  ...rest
+  ...rawRest
 }, ref) => {
+  // Convert onClick etc to onPress etc if used in an integration
+  const {
+    onPress,
+    ...rest
+  } = _utils.clickProps.toPressProps(rawRest);
+
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabsItem', tokens, variant);
 
   const resolveTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState, {
@@ -139,9 +144,9 @@ const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
     href
   });
 
-  const handlePress = onPress || openHref ? () => {
-    if (onPress) onPress();
-    if (openHref) openHref();
+  const handlePress = onPress || openHref ? (...args) => {
+    if (onPress) onPress(...args);
+    if (openHref) openHref(...args);
   } : undefined;
   const a11y = {
     accessibilityRole,
@@ -234,5 +239,6 @@ const staticStyles = _StyleSheet.default.create({
   }
 });
 
-var _default = TabsItem;
+var _default = (0, _utils.withLinkRouter)(TabsItem);
+
 exports.default = _default;

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -11,18 +11,24 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _InputLabel = _interopRequireDefault(require("../InputLabel"));
 
 var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
 
+var _StackView = _interopRequireDefault(require("../StackView"));
+
 var _ThemeProvider = require("../ThemeProvider");
 
 var _propTypes2 = require("../utils/propTypes");
 
 var _input = require("../utils/input");
 
+var _utils = require("../utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -80,16 +86,41 @@ const selectSwitchStyles = ({
   })
 });
 
+const selectLabelStyles = ({
+  labelMarginLeft
+}) => ({
+  marginLeft: labelMarginLeft
+});
+
+const selectLabelTokens = ({
+  labelColor,
+  labelFontName,
+  labelFontSize,
+  labelFontWeight,
+  labelLineHeight
+}) => ({
+  color: labelColor,
+  fontName: labelFontName,
+  fontWeight: labelFontWeight,
+  fontSize: labelFontSize,
+  lineHeight: labelLineHeight
+});
+
 const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   initialValue,
   onChange,
+  id,
+  label,
   inactive,
   tokens,
+  tooltip,
   variant,
-  accessibilityRole = 'switch'
+  accessibilityRole = 'switch',
+  accessibilityLabel = label
 }, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
+  const themeTokens = getTokens();
   const {
     currentValue,
     setValue
@@ -103,41 +134,57 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)(({
 
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
-    ref: ref,
-    selected: currentValue,
-    inactive: inactive,
-    tokens: getButtonTokens,
-    accessibilityRole: accessibilityRole,
-    accessibilityState: {
-      checked: currentValue
-    },
-    onPress: handlePress,
-    children: buttonState => {
-      const themeTokens = getTokens(buttonState);
-      const IconComponent = themeTokens.icon;
-      const switchStyles = selectSwitchStyles(themeTokens);
-      const trackStyles = selectTrackStyles(themeTokens);
-      const iconTokens = selectIconTokens(themeTokens); // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
-      // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
-
-      const slideStart = 0;
-      const slideEnd = themeTokens.width - themeTokens.switchSize - themeTokens.trackBorderWidth * 2;
-      const switchOffset = buttonState.selected ? slideEnd : slideStart;
-      const switchPositionStyle = {
-        transform: [{
-          translateX: switchOffset
-        }]
-      };
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: [staticStyles.track, trackStyles],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: [staticStyles.switch, switchStyles, switchPositionStyle],
-          children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
+  const uniqueId = (0, _utils.useUniqueId)('toggleSwitch');
+  const inputId = id ?? uniqueId;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    space: 2,
+    direction: "row",
+    children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectLabelStyles(themeTokens),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+        forId: inputId,
+        label: label,
+        tokens: selectLabelTokens(themeTokens),
+        tooltip: tooltip
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+      id: id,
+      ref: ref,
+      selected: currentValue,
+      inactive: inactive,
+      tokens: getButtonTokens,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityRole: accessibilityRole,
+      accessibilityState: {
+        checked: currentValue
+      },
+      onPress: handlePress,
+      children: buttonState => {
+        const stateTokens = getTokens(buttonState);
+        const IconComponent = stateTokens.icon;
+        const switchStyles = selectSwitchStyles(stateTokens);
+        const trackStyles = selectTrackStyles(stateTokens);
+        const iconTokens = selectIconTokens(stateTokens); // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
+        // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
+
+        const slideStart = 0;
+        const slideEnd = stateTokens.width - stateTokens.switchSize - stateTokens.trackBorderWidth * 2;
+        const switchOffset = buttonState.selected ? slideEnd : slideStart;
+        const switchPositionStyle = {
+          transform: [{
+            translateX: switchOffset
+          }]
+        };
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.track, trackStyles],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: [staticStyles.switch, switchStyles, switchPositionStyle],
+            children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
+            })
           })
-        })
-      });
-    }
+        });
+      }
+    })]
   });
 });
 ToggleSwitch.displayName = 'ToggleSwitch';
@@ -165,11 +212,26 @@ ToggleSwitch.propTypes = { ..._propTypes2.a11yProps.propTypes,
    */
   onChange: _propTypes.default.func,
 
+  /**
+   * Input ID.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * An optional label.
+   */
+  label: _propTypes.default.string,
+
   /**
    * If passed, the switch does not respond to user input and may recieve different
    * theme tokens if the theme supports inactive appearance.
    */
-  inactive: _propTypes.default.bool
+  inactive: _propTypes.default.bool,
+
+  /**
+   * Content of an optional Tooltip. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: _propTypes.default.string
 };
 
 const staticStyles = _StyleSheet.default.create({