@telus-uds/components-web 4.16.0 → 4.18.0

package/lib/cjs/NavigationBar/NavigationSubMenu.js

@@ -12,11 +12,52 @@ var _useOverlaidPosition = _interopRequireDefault(require("../utils/useOverlaidP
 var _resolveItemSelection = _interopRequireDefault(require("./resolveItemSelection"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MIN_WIDTH = 192;
+const MAX_WIDTH = 289;
+const DEFAULT_OFFSETS = {
+  offsets: {
+    vertical: 4
+  }
+};
+const XS_ALIGN = {
+  top: 'bottom',
+  left: 'left'
+};
+const SM_ALIGN = {
+  top: 'bottom',
+  right: 'right'
+};
+const LG_ALIGN = {
+  top: 'bottom',
+  center: 'center'
+};
+const getResponsiveBreakpoints = sourceWidth => ({
+  xs: {
+    ...DEFAULT_OFFSETS,
+    align: XS_ALIGN,
+    minWidth: sourceWidth,
+    maxWidth: sourceWidth
+  },
+  sm: {
+    ...DEFAULT_OFFSETS,
+    align: SM_ALIGN,
+    minWidth: sourceWidth,
+    maxWidth: sourceWidth
+  },
+  lg: {
+    ...DEFAULT_OFFSETS,
+    align: LG_ALIGN,
+    minWidth: MIN_WIDTH,
+    maxWidth: MAX_WIDTH
+  }
+});
+
 /**
  * A NavigationItem that opens or closes a Listbox of other NavigationItems.
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
- */const NavigationSubMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const NavigationSubMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     id,
@@ -33,42 +74,13 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     itemsContainerRef
   } = _ref;
   const focusTrapRef = _react.default.useRef();
-  const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
-  const defaultOffsets = {
-    offsets: {
-      vertical: 4
-    }
-  };
+  const [sourceWidth, setSourceWidth] = _react.default.useState(0);
   const {
     align,
     offsets,
-    minWidth
-  } = (0, _componentsBase.useResponsiveProp)({
-    xs: {
-      ...defaultOffsets,
-      align: {
-        top: 'bottom',
-        left: 'left'
-      },
-      minWidth: maxWidth
-    },
-    sm: {
-      ...defaultOffsets,
-      align: {
-        top: 'bottom',
-        right: 'right'
-      },
-      minWidth: maxWidth
-    },
-    lg: {
-      ...defaultOffsets,
-      align: {
-        top: 'bottom',
-        center: 'center'
-      },
-      minWidth: 192
-    }
-  });
+    minWidth,
+    maxWidth
+  } = (0, _componentsBase.useResponsiveProp)(getResponsiveBreakpoints(sourceWidth));
   const {
     overlaidPosition,
     sourceRef,
@@ -95,6 +107,11 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
   } = (0, _componentsBase.useThemeTokens)('NavigationBar', tokens, {}, {
     expanded: isOpen
   });
+  _react.default.useEffect(() => {
+    sourceRef.current?.measureInWindow((_, __, width) => {
+      setSourceWidth(width);
+    });
+  }, [isOpen, sourceRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationItem.default, {
       ref: sourceRef,

package/lib/cjs/NavigationBar/collapseItems.js

@@ -18,7 +18,7 @@ const collapseItems = (items, selectedId) => {
       label,
       id
     } = _ref;
-    return selectedId === id ?? label;
+    return selectedId === (id ?? label);
   };
 
   // Linter doesn't like for loops, simulate loop that breaks

package/lib/cjs/QuantitySelector/QuantitySelector.js

@@ -40,6 +40,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     },
     tokens,
     testID = 'quantity-selector-testid',
+    inactive = false,
     ...rest
   } = _ref;
   const {
@@ -64,8 +65,8 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     initialValue: getValidatedNumber(defaultValue),
     onChange
   });
-  const isDecreaseEnabled = !disabled && !isNumber(minNumber) || number > minNumber;
-  const isIncreaseEnabled = !disabled && !isNumber(maxNumber) || number < maxNumber;
+  const isDecreaseEnabled = (!disabled && !isNumber(minNumber) || number > minNumber) && !inactive;
+  const isIncreaseEnabled = (!disabled && !isNumber(maxNumber) || number < maxNumber) && !inactive;
   const inputValue = isNumber(number) ? number.toString() : '';
   const updateNumber = (newNumber, originalInputEvent) => {
     try {
@@ -85,15 +86,30 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       setError(getCopy('errors').invalidCharacters);
     }
   };
-  const renderLabel = () => label || hint ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.InputLabel, {
-    forId: id,
-    label: label,
-    hint: hint,
-    hintPosition: hintPosition,
-    tooltip: tooltip
-  }) : null;
-  const getTokens = (0, _componentsBase.useThemeTokensCallback)('QuantitySelector', tokens, variant);
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('QuantitySelector', tokens, {
+    inactive,
+    ...variant
+  });
+  const renderLabelAndSpacer = () => {
+    const {
+      showTopSpace
+    } = getTokens();
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(label || hint) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.InputLabel, {
+        forId: id,
+        label: label,
+        hint: hint,
+        hintPosition: hintPosition,
+        tooltip: tooltip
+      }), label || hint ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+        space: 2
+      }) : showTopSpace && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+        space: 2
+      })]
+    });
+  };
   const renderTextInput = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
+    inactive: inactive,
     nativeID: id,
     value: inputValue,
     defaultValue: defaultValue,
@@ -138,9 +154,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     testID: testID,
     ref: ref,
     ...selectProps(rest),
-    children: [renderLabel(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
-      space: 2
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputWrapper, {
+    children: [renderLabelAndSpacer(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputWrapper, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputField, {
         children: renderTextInput()
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -152,6 +166,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           tokens: tokens,
           variant: {
             decrease: true,
+            inactive,
             ...variant
           },
           accessibilityLabel: getCopy('accessibility').decreaseButton,
@@ -168,6 +183,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           tokens: tokens,
           variant: {
             increase: true,
+            inactive,
             ...variant
           }
         })
@@ -262,6 +278,10 @@ QuantitySelector.propTypes = {
   /**
    * Sets `data-testid` attribute on the input field for testing purposes.
    */
-  testID: _propTypes.default.string
+  testID: _propTypes.default.string,
+  /**
+   * If true, the quantity selector will be disabled
+   */
+  inactive: _propTypes.default.bool
 };
 var _default = exports.default = QuantitySelector;

package/lib/cjs/shared/FullBleedContent/FullBleedContent.js

@@ -10,6 +10,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ResponsiveImage = _interopRequireDefault(require("../../ResponsiveImage"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Interactive overlay opacity constants
+const OVERLAY_OPACITY_PRESSED = 0.2;
+const OVERLAY_OPACITY_HOVER = 0.1;
+const OVERLAY_OPACITY_DEFAULT = 0;
 const selectFullBleedContentProps = _ref => {
   let {
     alt,
@@ -48,9 +52,11 @@ const FullBleedContentContainer = /*#__PURE__*/_styledComponents.default.div.wit
     borderTopLeftRadius,
     borderTopRightRadius,
     opacity,
-    transform
+    transform,
+    hasCardState
   } = _ref2;
   return {
+    position: hasCardState ? 'relative' : 'static',
     overflow: 'hidden',
     borderBottomLeftRadius,
     borderBottomRightRadius,
@@ -61,24 +67,56 @@ const FullBleedContentContainer = /*#__PURE__*/_styledComponents.default.div.wit
     transition: 'opacity 0.2s ease, transform 0.2s ease'
   };
 });
+const InteractiveOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "FullBleedContent__InteractiveOverlay",
+  componentId: "components-web__sc-1130ea5-1"
+})(_ref3 => {
+  let {
+    overlayOpacity,
+    overlayBackgroundColor
+  } = _ref3;
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: overlayBackgroundColor || 'rgba(0, 0, 0, 0.1)',
+    opacity: overlayOpacity || 0,
+    pointerEvents: 'none',
+    transition: 'opacity 0.2s ease',
+    zIndex: 1
+  };
+});
 
 /**
  * Full bleed content component can accept either a single source,
  * a number of sources corresponding to the `ResponsiveImage` component API,
  * or a custom component.
  */
-const FullBleedContent = _ref3 => {
+const FullBleedContent = _ref4 => {
   let {
     borderRadius,
     content,
     cardState,
     ...rest
-  } = _ref3;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedContentContainer, {
+  } = _ref4;
+  let overlayOpacity = OVERLAY_OPACITY_DEFAULT;
+  if (cardState) {
+    if (cardState.pressed) {
+      overlayOpacity = OVERLAY_OPACITY_PRESSED;
+    } else if (cardState.hover) {
+      overlayOpacity = OVERLAY_OPACITY_HOVER;
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FullBleedContentContainer, {
     ...borderRadius,
-    children: content ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.default, {
+    hasCardState: !!cardState,
+    children: [content ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.default, {
       ...selectFullBleedContentProps(rest)
-    })
+    }), cardState && /*#__PURE__*/(0, _jsxRuntime.jsx)(InteractiveOverlay, {
+      overlayOpacity: overlayOpacity
+    })]
   });
 };
 FullBleedContent.propTypes = {
@@ -96,10 +134,10 @@ FullBleedContent.propTypes = {
    */
   content: _propTypes.default.node,
   /**
-   * Card state object containing interactive states (hovered, pressed, focused).
+   * Card state object containing interactive states (hover, pressed, focused).
    */
   cardState: _propTypes.default.shape({
-    hovered: _propTypes.default.bool,
+    hover: _propTypes.default.bool,
     pressed: _propTypes.default.bool,
     focused: _propTypes.default.bool
   }),

package/lib/cjs/utils/useOverlaidPosition.js

@@ -111,6 +111,13 @@ function getOverlaidPosition(_ref2) {
       positioning[side] = adjusted.offset;
     }
   }
+  if (positioning.left) {
+    const overflowAmount = positioning.left + targetDimensions.width - windowDimensions.width;
+    if (overflowAmount > 0) {
+      const spaceToRightEdge = windowDimensions.width - (sourceLayout.x + sourceLayout.width);
+      positioning.left = positioning.left - overflowAmount - spaceToRightEdge;
+    }
+  }
   return positioning;
 }
 
@@ -210,7 +217,10 @@ const useOverlaidPosition = _ref3 => {
     windowDimensions,
     offsets,
     align
-  }) : {};
+  }) : {
+    top: 0,
+    left: 0
+  };
   return {
     overlaidPosition,
     sourceRef,