@telus-uds/components-web 2.34.3 → 2.35.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # 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 Mon, 24 Jun 2024 16:19:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.35.0
+
+Mon, 24 Jun 2024 16:19:29 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/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/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/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/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.87.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.58.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.0"
 }

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/baseExports.js

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