@telus-uds/components-web 2.34.3 → 2.35.1

package/CHANGELOG.md

@@ -1,12 +1,38 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 07 Jun 2024 22:36:16 GMT and should not be manually modified.
+This log was last generated on Thu, 04 Jul 2024 19:28:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.35.1
+
+Thu, 04 Jul 2024 19:28:59 GMT
+
+### Patches
+
+- `Breadcrumbs`: fix line break (guillermo.peitzner@telus.com)
+- `OrderedList`: fix numbered text alignment (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v1.88.0
+- Bump @telus-uds/system-theme-tokens to v2.59.0
+
+## 2.35.0
+
+Mon, 24 Jun 2024 16:28:34 GMT
+
+### Minor changes
+
+- `ActionCard`: make interactive card render body function (guillermo.peitzner@telus.com)
+- Bump @telus-uds/components-base to v1.87.0
+- Bump @telus-uds/system-theme-tokens to v2.58.0
+
+### Patches
+
+- `DatePicker`: fix focus life cycle (guillermo.peitzner@telus.com)
+- List: misalignment issue fixed when the text was too long and the container has display: 'flex' (35577399+JoshHC@users.noreply.github.com)
+
 ## 2.34.3
 
-Fri, 07 Jun 2024 22:36:16 GMT
+Fri, 07 Jun 2024 22:42:09 GMT
 
 ### Patches
 

package/lib/Breadcrumbs/Item/Item.js

@@ -16,7 +16,7 @@ const StyledItemContainer = /*#__PURE__*/_styledComponents.default.li.withConfig
   displayName: "Item__StyledItemContainer",
   componentId: "components-web__sc-1rfdaul-0"
 })({
-  display: 'flex',
+  display: 'inline-block',
   paddingLeft: _ref => {
     let {
       listItemPadding
@@ -30,58 +30,51 @@ const StyledItemContainer = /*#__PURE__*/_styledComponents.default.li.withConfig
     } = _ref2;
     return `${Math.ceil(lineHeight * fontSize)}px`;
   },
-  height: _ref3 => {
-    let {
-      iconContainerSize
-    } = _ref3;
-    return `${iconContainerSize}px`;
-  },
   marginBottom: '8px'
 });
 const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
   displayName: "Item__IconContainer",
   componentId: "components-web__sc-1rfdaul-1"
 })({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  paddingLeft: _ref4 => {
+  display: 'inline-block',
+  paddingLeft: _ref3 => {
     let {
       iconPadding
-    } = _ref4;
+    } = _ref3;
     return `${iconPadding}px`;
   },
-  paddingRight: _ref5 => {
+  paddingRight: _ref4 => {
     let {
       iconPadding
-    } = _ref5;
+    } = _ref4;
     return `${iconPadding}px`;
   },
-  fontFamily: _ref6 => {
+  fontFamily: _ref5 => {
     let {
       fontName,
       fontWeight
-    } = _ref6;
+    } = _ref5;
     return (0, _componentsBase.applyTextStyles)({
       fontName,
       fontWeight
     }).fontFamily;
   },
-  height: _ref7 => {
+  height: _ref6 => {
     let {
       iconContainerSize
-    } = _ref7;
+    } = _ref6;
     return `${iconContainerSize}px`;
   },
-  width: _ref8 => {
+  width: _ref7 => {
     let {
       iconContainerSize,
       iconPadding
-    } = _ref8;
+    } = _ref7;
     return `${iconContainerSize + iconPadding * 2}px`;
-  }
+  },
+  verticalAlign: 'bottom'
 });
-const Item = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
+const Item = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     href,
     children,
@@ -94,7 +87,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
     LinkRouter,
     linkRouterProps,
     ...rest
-  } = _ref9;
+  } = _ref8;
   const {
     iconColor,
     icon: ChevronRightIcon,

package/lib/Card/Card.js

@@ -110,7 +110,7 @@ const Card = /*#__PURE__*/_react.default.forwardRef(function () {
       dataSet: dataSet,
       onPress: onPress,
       ...selectProps(rest),
-      children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
+      children: typeof (interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body) === 'function' ? interactiveCard.body() : interactiveCard.body
     }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       direction: contentStackDirection,
       tokens: {
@@ -185,7 +185,7 @@ Card.propTypes = {
    * Object to set interactive card's properties
    */
   interactiveCard: _propTypes.default.shape({
-    body: _propTypes.default.node,
+    body: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
     tokens: (0, _componentsBase.getTokensPropType)('Card'),
     variant: _componentsBase.variantProp.propType
   })

package/lib/DatePicker/DatePicker.js

@@ -119,6 +119,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const [inputDate, setInputDate] = _react.default.useState(date instanceof _moment.default ? date : undefined);
   const [inputText, setInputText] = _react.default.useState(date instanceof _moment.default ? date.format(dateFormat) : '');
   const textInputRef = _react.default.useRef();
+  const prevButtonRef = _react.default.useRef();
   const [datePickerPosition, setDatePickerPosition] = _react.default.useState({
     left: 0,
     top: 0
@@ -159,6 +160,19 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       setInputText(date instanceof _moment.default ? date.format(dateFormat) : '');
     }
   }, [date, inputDate]);
+  _react.default.useEffect(() => {
+    let timeoutId;
+    if (prevButtonRef.current && isFocused) {
+      timeoutId = setTimeout(() => prevButtonRef.current.focus(), 100);
+    }
+    return () => clearTimeout(timeoutId);
+  }, [isFocused]);
+  _react.default.useEffect(() => {
+    if (inputText !== '' && inputDate !== undefined) {
+      var _textInputRef$current;
+      textInputRef === null || textInputRef === void 0 ? void 0 : (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
+    }
+  }, [inputDate, inputText]);
   const onFocusChange = _ref4 => {
     let {
       focused
@@ -169,7 +183,7 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     setIsClickedInside(false);
   };
   const handleFocus = event => {
-    if (event.target.tagName === 'INPUT' && !disabled) {
+    if (event.target.tagName === 'INPUT' && !disabled && inputDate === undefined && inputText === '') {
       setIsFocused(true);
     }
   };
@@ -265,7 +279,8 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       variant: {
         size: 'small'
       },
-      testID: prevTestID
+      testID: prevTestID,
+      ref: prevButtonRef
     });
   };
   const renderNextButton = _ref6 => {

package/lib/OrderedList/Item.js

@@ -38,7 +38,7 @@ const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.def
   let {
     interItemMargin,
     itemBulletContainerWidth,
-    itemBulletContainerAlign,
+    itemBulletTextAlign,
     itemFontWeight,
     itemFontSize,
     itemFontName,
@@ -55,7 +55,7 @@ const StyledItemBase = /*#__PURE__*/(0, _styledComponents.default)(_ItemBase.def
       color: itemColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
-      textAlign: itemBulletContainerAlign,
+      justifyContent: itemBulletTextAlign,
       ...(0, _componentsBase.applyTextStyles)({
         fontWeight: itemFontWeight,
         fontSize: itemFontSize,

package/lib/baseExports.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "A11yText", {
     return _componentsBase.A11yText;
   }
 });
+Object.defineProperty(exports, "ActionCard", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ActionCard;
+  }
+});
 Object.defineProperty(exports, "ActivityIndicator", {
   enumerable: true,
   get: function () {

package/lib-module/Breadcrumbs/Item/Item.js

@@ -11,7 +11,7 @@ const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
   displayName: "Item__StyledItemContainer",
   componentId: "components-web__sc-1rfdaul-0"
 })({
-  display: 'flex',
+  display: 'inline-block',
   paddingLeft: _ref => {
     let {
       listItemPadding
@@ -25,58 +25,51 @@ const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
     } = _ref2;
     return `${Math.ceil(lineHeight * fontSize)}px`;
   },
-  height: _ref3 => {
-    let {
-      iconContainerSize
-    } = _ref3;
-    return `${iconContainerSize}px`;
-  },
   marginBottom: '8px'
 });
 const IconContainer = /*#__PURE__*/styled.span.withConfig({
   displayName: "Item__IconContainer",
   componentId: "components-web__sc-1rfdaul-1"
 })({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  paddingLeft: _ref4 => {
+  display: 'inline-block',
+  paddingLeft: _ref3 => {
     let {
       iconPadding
-    } = _ref4;
+    } = _ref3;
     return `${iconPadding}px`;
   },
-  paddingRight: _ref5 => {
+  paddingRight: _ref4 => {
     let {
       iconPadding
-    } = _ref5;
+    } = _ref4;
     return `${iconPadding}px`;
   },
-  fontFamily: _ref6 => {
+  fontFamily: _ref5 => {
     let {
       fontName,
       fontWeight
-    } = _ref6;
+    } = _ref5;
     return applyTextStyles({
       fontName,
       fontWeight
     }).fontFamily;
   },
-  height: _ref7 => {
+  height: _ref6 => {
     let {
       iconContainerSize
-    } = _ref7;
+    } = _ref6;
     return `${iconContainerSize}px`;
   },
-  width: _ref8 => {
+  width: _ref7 => {
     let {
       iconContainerSize,
       iconPadding
-    } = _ref8;
+    } = _ref7;
     return `${iconContainerSize + iconPadding * 2}px`;
-  }
+  },
+  verticalAlign: 'bottom'
 });
-const Item = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
+const Item = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     href,
     children,
@@ -89,7 +82,7 @@ const Item = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
     LinkRouter,
     linkRouterProps,
     ...rest
-  } = _ref9;
+  } = _ref8;
   const {
     iconColor,
     icon: ChevronRightIcon,

package/lib-module/Card/Card.js

@@ -103,7 +103,7 @@ const Card = /*#__PURE__*/React.forwardRef(function () {
       dataSet: dataSet,
       onPress: onPress,
       ...selectProps(rest),
-      children: interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body
+      children: typeof (interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.body) === 'function' ? interactiveCard.body() : interactiveCard.body
     }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/_jsxs(StackView, {
       direction: contentStackDirection,
       tokens: {
@@ -178,7 +178,7 @@ Card.propTypes = {
    * Object to set interactive card's properties
    */
   interactiveCard: PropTypes.shape({
-    body: PropTypes.node,
+    body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     tokens: getTokensPropType('Card'),
     variant: variantProp.propType
   })

package/lib-module/DatePicker/DatePicker.js

@@ -114,6 +114,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   const [inputDate, setInputDate] = React.useState(date instanceof moment ? date : undefined);
   const [inputText, setInputText] = React.useState(date instanceof moment ? date.format(dateFormat) : '');
   const textInputRef = React.useRef();
+  const prevButtonRef = React.useRef();
   const [datePickerPosition, setDatePickerPosition] = React.useState({
     left: 0,
     top: 0
@@ -154,6 +155,19 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       setInputText(date instanceof moment ? date.format(dateFormat) : '');
     }
   }, [date, inputDate]);
+  React.useEffect(() => {
+    let timeoutId;
+    if (prevButtonRef.current && isFocused) {
+      timeoutId = setTimeout(() => prevButtonRef.current.focus(), 100);
+    }
+    return () => clearTimeout(timeoutId);
+  }, [isFocused]);
+  React.useEffect(() => {
+    if (inputText !== '' && inputDate !== undefined) {
+      var _textInputRef$current;
+      textInputRef === null || textInputRef === void 0 ? void 0 : (_textInputRef$current = textInputRef.current) === null || _textInputRef$current === void 0 ? void 0 : _textInputRef$current.focus();
+    }
+  }, [inputDate, inputText]);
   const onFocusChange = _ref4 => {
     let {
       focused
@@ -164,7 +178,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     setIsClickedInside(false);
   };
   const handleFocus = event => {
-    if (event.target.tagName === 'INPUT' && !disabled) {
+    if (event.target.tagName === 'INPUT' && !disabled && inputDate === undefined && inputText === '') {
       setIsFocused(true);
     }
   };
@@ -260,7 +274,8 @@ const DatePicker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       variant: {
         size: 'small'
       },
-      testID: prevTestID
+      testID: prevTestID,
+      ref: prevButtonRef
     });
   };
   const renderNextButton = _ref6 => {

package/lib-module/OrderedList/Item.js

@@ -32,7 +32,7 @@ const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
   let {
     interItemMargin,
     itemBulletContainerWidth,
-    itemBulletContainerAlign,
+    itemBulletTextAlign,
     itemFontWeight,
     itemFontSize,
     itemFontName,
@@ -49,7 +49,7 @@ const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
       color: itemColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
-      textAlign: itemBulletContainerAlign,
+      justifyContent: itemBulletTextAlign,
       ...applyTextStyles({
         fontWeight: itemFontWeight,
         fontSize: itemFontSize,

package/lib-module/baseExports.js

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, CardGroup, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
+ActionCard, A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, CardGroup, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
 /*
  * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
  * Re-export only those utilities with a stable API and known use cases within apps / pages.

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.86.0",
+    "@telus-uds/components-base": "1.88.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.57.0",
+    "@telus-uds/system-theme-tokens": "^2.59.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.34.3"
+  "version": "2.35.1"
 }

package/src/Breadcrumbs/Item/Item.jsx

@@ -14,22 +14,20 @@ import { htmlAttrs } from '../../utils'
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const StyledItemContainer = styled.li({
-  display: 'flex',
+  display: 'inline-block',
   paddingLeft: ({ listItemPadding }) => `${listItemPadding}px`,
   lineHeight: ({ lineHeight, fontSize }) => `${Math.ceil(lineHeight * fontSize)}px`,
-  height: ({ iconContainerSize }) => `${iconContainerSize}px`,
   marginBottom: '8px'
 })
 
 const IconContainer = styled.span({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
+  display: 'inline-block',
   paddingLeft: ({ iconPadding }) => `${iconPadding}px`,
   paddingRight: ({ iconPadding }) => `${iconPadding}px`,
   fontFamily: ({ fontName, fontWeight }) => applyTextStyles({ fontName, fontWeight }).fontFamily,
   height: ({ iconContainerSize }) => `${iconContainerSize}px`,
-  width: ({ iconContainerSize, iconPadding }) => `${iconContainerSize + iconPadding * 2}px`
+  width: ({ iconContainerSize, iconPadding }) => `${iconContainerSize + iconPadding * 2}px`,
+  verticalAlign: 'bottom'
 })
 
 const Item = React.forwardRef(

package/src/Card/Card.jsx

@@ -116,7 +116,9 @@ const Card = React.forwardRef(
             onPress={onPress}
             {...selectProps(rest)}
           >
-            {interactiveCard?.body}
+            {typeof interactiveCard?.body === 'function'
+              ? interactiveCard.body()
+              : interactiveCard.body}
           </PressableCardBase>
         ) : null}
         {children || fullBleedContentPosition !== 'none' ? (
@@ -197,7 +199,7 @@ Card.propTypes = {
    * Object to set interactive card's properties
    */
   interactiveCard: PropTypes.shape({
-    body: PropTypes.node,
+    body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
     tokens: getTokensPropType('Card'),
     variant: variantProp.propType
   })

package/src/DatePicker/DatePicker.jsx

@@ -109,6 +109,7 @@ const DatePicker = React.forwardRef(
       date instanceof moment ? date.format(dateFormat) : ''
     )
     const textInputRef = React.useRef()
+    const prevButtonRef = React.useRef()
     const [datePickerPosition, setDatePickerPosition] = React.useState({ left: 0, top: 0 })
 
     useSafeLayoutEffect(() => {
@@ -130,6 +131,7 @@ const DatePicker = React.forwardRef(
     const [isFocused, setIsFocused] = React.useState(false)
     const [isClickedInside, setIsClickedInside] = React.useState(false)
     const getCopy = useCopy({ dictionary, copy })
+
     React.useEffect(() => {
       /**
        * `date` could be passed as `null` to reset the value so explicitly
@@ -140,6 +142,23 @@ const DatePicker = React.forwardRef(
         setInputText(date instanceof moment ? date.format(dateFormat) : '')
       }
     }, [date, inputDate])
+
+    React.useEffect(() => {
+      let timeoutId
+
+      if (prevButtonRef.current && isFocused) {
+        timeoutId = setTimeout(() => prevButtonRef.current.focus(), 100)
+      }
+
+      return () => clearTimeout(timeoutId)
+    }, [isFocused])
+
+    React.useEffect(() => {
+      if (inputText !== '' && inputDate !== undefined) {
+        textInputRef?.current?.focus()
+      }
+    }, [inputDate, inputText])
+
     const onFocusChange = ({ focused }) => {
       if (!isClickedInside) {
         setIsFocused(focused)
@@ -147,7 +166,12 @@ const DatePicker = React.forwardRef(
       setIsClickedInside(false)
     }
     const handleFocus = (event) => {
-      if (event.target.tagName === 'INPUT' && !disabled) {
+      if (
+        event.target.tagName === 'INPUT' &&
+        !disabled &&
+        inputDate === undefined &&
+        inputText === ''
+      ) {
         setIsFocused(true)
       }
     }
@@ -248,6 +272,7 @@ const DatePicker = React.forwardRef(
         icon={previousIcon}
         variant={{ size: 'small' }}
         testID={prevTestID}
+        ref={prevButtonRef}
       />
     )
     const renderNextButton = ({ onClick }) => (

package/src/OrderedList/Item.jsx

@@ -34,7 +34,7 @@ const StyledItemBase = styled(ItemBase)(
   ({
     interItemMargin,
     itemBulletContainerWidth,
-    itemBulletContainerAlign,
+    itemBulletTextAlign,
     itemFontWeight,
     itemFontSize,
     itemFontName,
@@ -50,7 +50,7 @@ const StyledItemBase = styled(ItemBase)(
       color: itemColor,
       width: itemBulletContainerWidth,
       paddingRight: listGutter,
-      textAlign: itemBulletContainerAlign,
+      justifyContent: itemBulletTextAlign,
       ...applyTextStyles({
         fontWeight: itemFontWeight,
         fontSize: itemFontSize,

package/src/baseExports.js

@@ -5,6 +5,7 @@ export {
   /**
    * Most base components should be re-exported as-is.
    */
+  ActionCard,
   A11yText,
   ActivityIndicator,
   Autocomplete,