@telus-uds/components-web 2.21.1 → 2.22.0

package/lib-module/DatePicker/DatePicker.js

@@ -17,29 +17,22 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const dateFormat = 'DD / MM / YYYY';
 const dateFormatWithoutSpaces = 'DD/MM/YYYY';
-
 const getResponsiveDaySize = function () {
   let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
-
   if (viewport === 'xs') {
     return inline ? undefined : 36;
   }
-
   return inline ? 60 : 44;
 };
-
 const getResponsiveCircleSize = function () {
   let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
-
   if (viewport === 'xs') {
     return 26;
   }
-
   return inline ? 44 : 26;
 };
-
 const MonthCenterContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "DatePicker__MonthCenterContainer",
   componentId: "components-web__sc-mz8fi3-0"
@@ -54,6 +47,7 @@ const DateInputWrapper = /*#__PURE__*/styled.div.withConfig({
   display: 'flex',
   flexDirection: 'column'
 });
+
 /**
  * Use DatePicker to select a date on a calendar.
  *
@@ -75,10 +69,8 @@ const DateInputWrapper = /*#__PURE__*/styled.div.withConfig({
  * - Optimized for keyboard interaction and tablet touch
  * - Recommended for viewports greater than or equal to 576px
  */
-
 const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   var _dictionary$copy;
-
   let {
     copy = 'en',
     id,
@@ -117,25 +109,20 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       setInputText(date instanceof moment ? date.format(dateFormat) : '');
     }
   }, [date, inputDate]);
-
   const onFocusChange = _ref2 => {
     let {
       focused
     } = _ref2;
-
     if (!isClickedInside) {
       setIsFocused(focused);
     }
-
     setIsClickedInside(false);
   };
-
   const handleFocus = event => {
     if (event.target.tagName === 'INPUT' && !disabled) {
       setIsFocused(true);
     }
   };
-
   const handleMouseDown = event => {
     if (!disabled) {
       if (event.target.tagName === 'INPUT') {
@@ -150,14 +137,12 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       }
     }
   };
-
   const onChange = value => {
     setInputDate(value);
     setInputText(value.format(dateFormat));
     setIsFocused(false);
     if (onDateChange) onDateChange(value);
   };
-
   const onChangeInput = value => {
     if (moment(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
       setInputDate(moment(value, dateFormat));
@@ -167,7 +152,6 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       setInputText(value);
     }
   };
-
   const viewport = useViewport();
   const daySize = getResponsiveDaySize(inline, viewport);
   const circleSize = getResponsiveCircleSize(inline, viewport);
@@ -181,7 +165,8 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     previousIcon,
     nextIcon,
     ...remainingTokens
-  } = useThemeTokens('DatePicker', tokens, { ...variant,
+  } = useThemeTokens('DatePicker', tokens, {
+    ...variant,
     inline
   }, {
     viewport
@@ -198,7 +183,6 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     fontName: remainingTokens.dayPickerWeekHeaderFontName,
     fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
   });
-
   const renderPrevButton = _ref3 => {
     let {
       onClick
@@ -214,7 +198,6 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       testID: prevTestID
     });
   };
-
   const renderNextButton = _ref4 => {
     let {
       onClick
@@ -230,11 +213,12 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       testID: nextTestID
     });
   };
-
-  return /*#__PURE__*/_jsx(CalendarContainer, { ...selectProps(rest),
+  return /*#__PURE__*/_jsx(CalendarContainer, {
+    ...selectProps(rest),
     daySize: daySize,
     validation: validation,
-    remainingTokens: { ...remainingTokens
+    remainingTokens: {
+      ...remainingTokens
     },
     calendarDayDefaultHeight: circleSize,
     calendarDayDefaultWidth: circleSize,
@@ -329,85 +313,71 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 DatePicker.displayName = 'DatePicker';
-DatePicker.propTypes = { ...selectedSystemPropTypes,
+DatePicker.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('DatePicker'),
-
   /**
    * A unique identifier.
    */
   id: PropTypes.string.isRequired,
-
   /**
    *  Whether the English or French copy will be used (e.g. for accessibility labels).
    */
   copy: PropTypes.oneOf(['en', 'fr']),
-
   /**
    * A Moment instance representing the currently selected date, i.e. `moment()`
    */
   date: momentPropTypes.momentObj,
-
   /**
    * A detailed description of validation error/success or additional instructions.
    * Visual variant is determined based on the `validation` prop.
    */
   feedback: PropTypes.string,
-
   /**
    * Event triggered every time a new date is clicked on
    * @param {Moment} date The new date that was selected
    */
   onDateChange: PropTypes.func,
-
   /**
    * A function determining whether a given date should be disabled
    * @param {Moment} date The date to optionally disable
    * @returns {bool}
    */
   isDayDisabled: PropTypes.func,
-
   /**
    * The field label to be displayed above the calendar
    */
   label: PropTypes.string,
-
   /**
    * A flag determining if the calendar picker is standalone or an input with overlay
    */
   inline: PropTypes.bool,
-
   /**
    * A short description of the expected input.
    */
   hint: PropTypes.string,
-
   /**
    * Position of the hint relative to label. Use `below` to display a larger hint below the label.
    */
   hintPosition: PropTypes.oneOf(['inline', 'below']),
-
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
   tooltip: PropTypes.string,
-
   /**
    * Use to visually mark an input as valid or invalid.
    */
   validation: PropTypes.oneOf(['error', 'success']),
-
   /**
    * Disable the input which will not open the calendar picker
    */
   disabled: PropTypes.bool,
-
   /**
    * A unique identifier for the previous icon button located on the datepicker.
    * This is for automation testing purposes.
    * Will be added as a `data-testid-prev` attribute for example.
    */
   prevTestID: PropTypes.string,
-
   /**
    * A unique identifier for the next icon button located on the datepicker.
    * This is for automation testing purposes.

package/lib-module/DatePicker/dictionary.js

@@ -34,56 +34,48 @@ const weekDays = {
   Fr: 'Ven',
   Sa: 'Sam'
 };
-
 const chooseAvailableStartDate = _ref => {
   let {
     date
   } = _ref;
   return `Choisir ${date}. Disponible.`;
 };
-
 const chooseAvailableEndDate = _ref2 => {
   let {
     date
   } = _ref2;
   return `Non disponible. ${date}`;
 };
-
 const chooseAvailableDate = _ref3 => {
   let {
     date
   } = _ref3;
   return date;
 };
-
 const dateIsUnavailable = _ref4 => {
   let {
     date
   } = _ref4;
   return `Not available. ${date}`;
 };
-
 const dateIsSelected = _ref5 => {
   let {
     date
   } = _ref5;
   return `Choisie. ${date}`;
 };
-
 const dateIsSelectedAsStartDate = _ref6 => {
   let {
     date
   } = _ref6;
   return `Choisie comme date de début. ${date}`;
 };
-
 const dateIsSelectedAsEndDate = _ref7 => {
   let {
     date
   } = _ref7;
   return `Choisie comme date de fin. ${date}`;
 };
-
 const dictionary = {
   en: undefined,
   // uses react-dates defaults

package/lib-module/Disclaimer/Disclaimer.js

@@ -27,24 +27,25 @@ const StyledDisclaimer = /*#__PURE__*/styled.p.withConfig({
     ...tokens
   };
 });
+
 /**
  * Use Disclaimer to display singular legal statement and must be displayed
  * immediately adjacent to the related, originating content.
  */
-
 const Disclaimer = _ref2 => {
   let {
     children,
     ...rest
   } = _ref2;
   const themeTokens = useThemeTokens('Disclaimer');
-  return /*#__PURE__*/_jsx(StyledDisclaimer, { ...selectProps(rest),
+  return /*#__PURE__*/_jsx(StyledDisclaimer, {
+    ...selectProps(rest),
     ...themeTokens,
     children: children
   });
 };
-
-Disclaimer.propTypes = { ...selectedSystemPropTypes,
+Disclaimer.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Disclaimer'),
   children: PropTypes.node.isRequired
 };

package/lib-module/ExpandCollapseMini/ExpandCollapseMini.js

@@ -11,17 +11,16 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
     nativeID,
     ...rest
   } = _ref;
-
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
       const isOpen = openPanels.length > 0;
       onToggle(event, isOpen);
     }
   };
-
   return /*#__PURE__*/_jsx(ExpandCollapse, {
     onChange: handleChange,
-    children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, { ...expandProps,
+    children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
+      ...expandProps,
       panelId: "ExpandCollapseMiniPanel",
       variant: {
         mini: true
@@ -32,7 +31,8 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
         borderColor: 'transparent',
         textLine: 'none',
         backgroundColor: 'transparent'
-      } // TODO refactor
+      }
+      // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
       control: pressableState => /*#__PURE__*/_jsx(ExpandCollapseMiniControl, {
@@ -46,18 +46,16 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 ExpandCollapseMini.displayName = 'ExpandCollapseMini';
-ExpandCollapseMini.propTypes = { ...ExpandCollapseMiniControl.propTypes,
-
+ExpandCollapseMini.propTypes = {
+  ...ExpandCollapseMiniControl.propTypes,
   /**
    * Function to call on pressing the panel's control, which should open or close the panel.
    */
   onToggle: PropTypes.func,
-
   /**
    * ID for DOM element on web
    */
   nativeID: PropTypes.string,
-
   /**
    * Children nodes that can be added
    */

package/lib-module/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -3,16 +3,16 @@ import PropTypes from 'prop-types';
 import { selectSystemProps, Link, useThemeTokens } from '@telus-uds/components-base';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]); // The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
-// and a more appropriate press area, defer interaction handling to it.
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 
+// The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
+// and a more appropriate press area, defer interaction handling to it.
 const presentationOnly = {
   accessibilityRole: null,
   // Treat as regular flow content with the Control
   pointerEvents: 'none',
   // Stop RNW from stopping clicks from bubbling to Control
   focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
-
 };
 
 const selectLinkTokens = _ref => {
@@ -29,7 +29,6 @@ const selectLinkTokens = _ref => {
     blockFontSize: fontSize
   };
 };
-
 const ExpandCollapseMiniControl = _ref2 => {
   let {
     pressableState,
@@ -44,8 +43,8 @@ const ExpandCollapseMiniControl = _ref2 => {
     expanded,
     hover,
     focus
-  } = pressableState || {}; // we only want focus outline when focusing, if user is pressing we don't want the border.
-
+  } = pressableState || {};
+  // we only want focus outline when focusing, if user is pressing we don't want the border.
   const {
     outerBorderColor
   } = useThemeTokens('Link', {}, {}, {
@@ -58,33 +57,32 @@ const ExpandCollapseMiniControl = _ref2 => {
   } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
     expanded,
     focus
-  }); // Choose hover styles when any part of Control is hoverred
+  });
 
-  const appearance = { ...variant,
+  // Choose hover styles when any part of Control is hoverred
+  const appearance = {
+    ...variant,
     hover
   };
-
   const getTokens = linkState => {
     const {
       hover: linkHover
     } = linkState || {};
     const isHovered = hover || linkHover;
-
     if (isHovered) {
       // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
       return {
         iconTranslateY: (expanded ? -1 : 1) * size
       };
     }
-
     return {};
   };
-
   return /*#__PURE__*/_jsx(Link, {
     variant: appearance,
     icon: icon,
     iconPosition: iconPosition,
-    tokens: linkState => ({ ...getTokens(linkState),
+    tokens: linkState => ({
+      ...getTokens(linkState),
       ...selectLinkTokens(themeTokens),
       outerBorderColor
     }),
@@ -93,25 +91,21 @@ const ExpandCollapseMiniControl = _ref2 => {
     children: expanded ? expandTitle : collapseTitle
   });
 };
-
-ExpandCollapseMiniControl.propTypes = { ...selectedSystemPropTypes,
+ExpandCollapseMiniControl.propTypes = {
+  ...selectedSystemPropTypes,
   ...Link.propTypes,
-
   /**
    * Optional function to call on pressing the panel's control, in addition to opening or closing the panel
    */
   onPress: PropTypes.func,
-
   /**
    * ExpandCollapseMiniControl title when expanded
    */
   expandTitle: PropTypes.string.isRequired,
-
   /**
    * ExpandCollapseMiniControl title when collapsed
    */
   collapseTitle: PropTypes.string.isRequired,
-
   /**
    * React Native's `Pressable`'s state object
    */