@telus-uds/components-base 1.34.0 → 1.34.1

package/lib-module/utils/useOverlaidPosition.js

@@ -0,0 +1,232 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+
+const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
+  const offset = Math.max(0, initialOffset);
+  const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
+  const tooWideBy = Math.max(0, otherEdgeOverflow - offset);
+  const adjusted = {
+    offset: Math.max(0, offset - otherEdgeOverflow)
+  };
+  if (tooWideBy) adjusted.width = Math.max(0, sourceWidth - tooWideBy);
+  return adjusted;
+};
+
+const getPosition = _ref => {
+  let {
+    edge,
+    fromEdge,
+    sourceSize
+  } = _ref;
+
+  switch (edge) {
+    case 'near':
+      return fromEdge;
+
+    case 'mid':
+      return fromEdge + sourceSize / 2;
+
+    case 'far':
+      return fromEdge + sourceSize;
+
+    default:
+      return 0;
+  }
+};
+
+const getEdgeType = (align, alignSide) => {
+  const alignTo = align[alignSide];
+  const edge = ['center', 'middle'].includes(alignTo) && 'mid' || (alignSide === alignTo ? 'near' : 'far');
+  return edge;
+};
+/**
+ * Based on UDS's private getTooltipPosition but generalised.
+ *
+ * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
+ * to the source (button) and we have a limited set of positions, an easy and consistent way
+ * of positioning it is to check all of the possible positions and pick one that will be rendered
+ * within the window bounds. This way we can also rely on the tooltip being actually rendered
+ * before it is shown, which makes it account for the width being limiting in styles, custom font
+ * rendering, etc.
+ */
+
+
+function getOverlaidPosition(_ref2) {
+  let {
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets = {},
+    align
+  } = _ref2;
+  // Web-only: this will be difficult to mimic on native because there's no global scroll position.
+  // TODO: wire something in e.g. a scroll ref accessible from a provider included in Allium provider
+  // that can be passed to the appropriate ScrollView?
+  const {
+    scrollX = 0,
+    scrollY = 0
+  } = typeof window === 'object' ? window : {}; // Will have top, bottom, left and/or right offsets depending on `align`
+
+  const positioning = {};
+  if (align.top) positioning.top = getPosition({
+    edge: getEdgeType(align, 'top'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0),
+    sourceSize: sourceLayout.height
+  });
+  if (align.middle) positioning.top = getPosition({
+    edge: getEdgeType(align, 'middle'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0) - targetDimensions.height / 2,
+    sourceSize: sourceLayout.height
+  });
+  if (align.bottom) positioning.bottom = getPosition({
+    edge: getEdgeType(align, 'bottom'),
+    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - (offsets.vertical ?? 0)),
+    sourceSize: sourceLayout.height
+  });
+  if (align.left) positioning.left = getPosition({
+    edge: getEdgeType(align, 'left'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0),
+    sourceSize: sourceLayout.width
+  });
+  if (align.center) positioning.left = getPosition({
+    edge: getEdgeType(align, 'center'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0) - targetDimensions.width / 2,
+    sourceSize: sourceLayout.width
+  });
+  if (align.right) positioning.right = getPosition({
+    edge: getEdgeType(align, 'right'),
+    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
+    sourceSize: sourceLayout.width
+  });
+
+  if (!(align.left && align.right)) {
+    // Check if the position and/or width need adjusting to fit on the screen
+    const side = align.right ? 'right' : 'left';
+    const adjusted = adjustHorizontalToFit(positioning[side], windowDimensions.width, sourceLayout.width);
+    if (typeof adjusted.width === 'number') positioning.width = adjusted.width;
+
+    if (typeof adjusted.offset === 'number') {
+      positioning[side] = adjusted.offset;
+    }
+  }
+
+  return positioning;
+}
+/**
+ * Positions an element in a modal or portal so that it appears tooltip-like below the
+ * target element.
+ *
+ * @TODO - add support for positioning other than 'below' like UDS's tooltip (this is not
+ * a small task because UDS's tooltip logic only really works for short text - it might be
+ * better to use a third-party library).
+ */
+
+
+const useOverlaidPosition = _ref3 => {
+  let {
+    isShown = false,
+    offsets,
+    // By default, align the overlaid target's `top` to the bottom of the source, and center horizontally.
+    align = {
+      center: 'center',
+      top: 'bottom'
+    }
+  } = _ref3;
+  // Element in main document flow that the targetRef element is positioned around
+  const sourceRef = useRef(null);
+  const [sourceLayout, setSourceLayout] = useState(null); // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
+
+  const targetRef = useRef(null);
+  const [targetDimensions, setTargetDimensions] = useState(null);
+  const [windowDimensions, setWindowDimensions] = useState(null);
+  const onTargetLayout = useCallback(_ref4 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref4;
+    // NOTE: UDS's Tooltip logic injects some additional width to allow for antialiasing etc of text,
+    // avoiding adding unnecessary line breaks to text that is slightly wider than it thinks it is.
+    // That is probably something specific to text tooltips that doesn't belong in a generic hook.
+    setTargetDimensions(previousDimensions => {
+      // Re-render on first non-zero width / height: avoid infinite loops on changes, or mispositioning
+      // if user scrolls while a slidedown animation is changing the height and recalculating position.
+      if (!previousDimensions && width && height) {
+        return {
+          width,
+          height
+        };
+      }
+
+      return previousDimensions;
+    });
+  }, []);
+  const readyToShow = Boolean(isShown && sourceRef.current);
+  useEffect(() => {
+    const handleDimensionsChange = _ref5 => {
+      var _sourceRef$current;
+
+      let {
+        window
+      } = _ref5;
+      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : _sourceRef$current.measureInWindow((x, y, width, height) => {
+        // Could add a debouncer here if there's too many rerenders during gradual resizes
+        setWindowDimensions(window);
+        setSourceLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    };
+
+    let subscription;
+
+    const unsubscribe = () => {
+      var _subscription;
+
+      if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
+        // React Native >=0.65.0
+        subscription.remove();
+      } else if (typeof Dimensions.removeEventListener === 'function') {
+        // React Native <0.65.0
+        Dimensions.removeEventListener('change', handleDimensionsChange);
+      }
+
+      setSourceLayout(null);
+      setTargetDimensions(null);
+    };
+
+    if (readyToShow) {
+      subscription = Dimensions.addEventListener('change', handleDimensionsChange);
+      handleDimensionsChange({
+        window: Dimensions.get('window')
+      });
+    } else {
+      unsubscribe();
+    }
+
+    return unsubscribe;
+  }, [readyToShow]);
+  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
+  const overlaidPosition = isReady ? getOverlaidPosition({
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets,
+    align
+  }) : {};
+  return {
+    overlaidPosition,
+    sourceRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  };
+};
+
+export default useOverlaidPosition;

package/package.json

@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.34.0"
+  "version": "1.34.1"
 }

package/src/MultiSelectFilter/ModalOverlay.jsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
-import { View, StyleSheet } from 'react-native-web'
+import { View, StyleSheet } from 'react-native'
 import { Portal } from '@gorhom/portal'
-import { copyPropTypes, getTokensPropType, selectTokens, useCopy, variantProp } from '../utils'
+import { selectTokens, useCopy, copyPropTypes, getTokensPropType, variantProp } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import { useThemeTokens } from '../ThemeProvider'
 import dictionary from './dictionary'
@@ -15,7 +15,6 @@ const staticStyles = StyleSheet.create({
     flex: 1, // Grow to maxWidth when possible, shrink when not possible
     position: 'absolute',
     height: 330,
-    paddingTop: 5,
     zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
   },
   closeButtonContainer: {
@@ -23,6 +22,11 @@ const staticStyles = StyleSheet.create({
     top: 0,
     right: 0,
     zIndex: 1
+  },
+  hidden: {
+    // Use opacity not visibility to hide the dropdown during positioning
+    // so on web, children may be focused from the first render
+    opacity: 0
   }
 })
 
@@ -38,19 +42,31 @@ const selectPaddingContainerStyles = ({ paddingTop, paddingLeft, paddingRight })
   paddingRight
 })
 
-const ModalOverlay = forwardRef(({ children, tokens, variant, copy, onClose }, ref) => {
-  const viewport = useViewport()
-  const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth: false })
+const ModalOverlay = forwardRef(
+  (
+    { children, isReady = false, overlaidPosition, onLayout, variant, tokens, copy, onClose },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth: false })
 
-  const { closeIcon: CloseIconComponent, maxWidth } = themeTokens
+    const { closeIcon: CloseIconComponent, maxWidth } = themeTokens
 
-  const getCopy = useCopy({ dictionary, copy })
-  const closeLabel = getCopy('closeButton')
+    const getCopy = useCopy({ dictionary, copy })
+    const closeLabel = getCopy('closeButton')
 
-  return (
-    <>
-      <Portal ref={ref}>
-        <View style={[{ minWidth: maxWidth }, staticStyles.positioner]}>
+    return (
+      <Portal>
+        <View
+          ref={ref}
+          onLayout={onLayout}
+          style={[
+            overlaidPosition,
+            { minWidth: maxWidth },
+            staticStyles.positioner,
+            !isReady && staticStyles.hidden
+          ]}
+        >
           <Card tokens={selectPaddingContainerStyles(themeTokens)}>
             <View
               style={[
@@ -70,13 +86,20 @@ const ModalOverlay = forwardRef(({ children, tokens, variant, copy, onClose }, r
           </Card>
         </View>
       </Portal>
-    </>
-  )
-})
+    )
+  }
+)
 ModalOverlay.displayName = 'ModalOverlay'
 
 ModalOverlay.propTypes = {
   children: PropTypes.node.isRequired,
+  isReady: PropTypes.bool,
+  overlaidPosition: PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number,
+    width: PropTypes.number
+  }),
+  onLayout: PropTypes.func,
   variant: variantProp.propType,
   tokens: getTokensPropType('Modal'),
   copy: copyPropTypes,

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
@@ -7,8 +7,10 @@ import {
   getTokensPropType,
   getPressHandlersWithArgs,
   selectTokens,
+  useOverlaidPosition,
   useCopy,
   useMultipleInputValues,
+  useResponsiveProp,
   variantProp
 } from '../utils'
 import dictionary from './dictionary'
@@ -37,134 +39,149 @@ const selectDividerToknes = ({ dividerColor, width, decorative = true, weight =
   weight
 })
 
-const MultiSelectFilter = forwardRef(
-  (
-    {
-      label,
-      subtitle,
-      id = label,
-      variant,
-      tokens,
-      items = [],
-      values,
-      initialValues,
-      maxValues,
-      onChange,
-      copy = 'en',
-      readOnly = false,
-      inactive = false,
-      rowLimit = 12,
-      ...rest
-    },
-    ref
-  ) => {
-    const { currentValues, setValues } = useMultipleInputValues({
-      initialValues,
-      values,
-      maxValues,
-      onChange,
-      readOnly
-    })
+const MultiSelectFilter = ({
+  label,
+  subtitle,
+  id = label,
+  variant,
+  tokens,
+  items = [],
+  values,
+  initialValues,
+  maxValues,
+  onChange,
+  copy = 'en',
+  readOnly = false,
+  inactive = false,
+  rowLimit = 12,
+  ...rest
+}) => {
+  const { currentValues, setValues } = useMultipleInputValues({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  })
 
-    const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant)
-    const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant)
-    const getButtonTokens = (buttonState) => selectTokens('Button', getItemTokens(buttonState))
-    const getCopy = useCopy({ dictionary, copy })
+  const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant)
+  const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant)
+  const getButtonTokens = (buttonState) => selectTokens('Button', getItemTokens(buttonState))
+  const getCopy = useCopy({ dictionary, copy })
 
-    const [isOpen, setIsOpen] = useState(false)
-    const [checkedIds, setCheckedIds] = useState(currentValues ?? [])
+  const [isOpen, setIsOpen] = useState(false)
+  const [checkedIds, setCheckedIds] = useState(currentValues ?? [])
 
-    const colSize = items.length > rowLimit ? 2 : 1
-    const isSelected = currentValues.length > 0
+  const colSize = items.length > rowLimit ? 2 : 1
+  const isSelected = currentValues.length > 0
 
-    const uniqueFields = ['id', 'label']
-    if (!containUniqueFields(items, uniqueFields)) {
-      throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`)
-    }
+  const uniqueFields = ['id', 'label']
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`)
+  }
 
-    // Pass an object of relevant component state as first argument for any passed-in press handlers
-    const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
+  // Pass an object of relevant component state as first argument for any passed-in press handlers
+  const pressHandlers = getPressHandlersWithArgs(rest, [{ id, label, currentValues }])
 
-    const handleChange = (event) => {
-      if (pressHandlers.onPress) pressHandlers?.onPress(event)
-      setIsOpen(!isOpen)
-    }
+  const handleChange = (event) => {
+    if (pressHandlers.onPress) pressHandlers?.onPress(event)
+    setIsOpen(!isOpen)
+  }
+
+  const onApply = (e) => {
+    setValues(e)
+    setIsOpen(false)
+  }
 
-    const onApply = (e) => {
-      setValues(e)
-      setIsOpen(false)
+  const { align, offsets } = useResponsiveProp({
+    xs: { align: { top: 'top', left: 'left', bottom: 'bottom', right: 'right' } },
+    sm: {
+      align: { top: 'bottom', left: 'left' },
+      offsets: { vertical: 4 }
     }
+  })
 
-    return (
-      <>
-        <ButtonDropdown
-          ref={ref}
-          key={id}
-          {...pressHandlers}
-          value={isOpen}
-          selected={isSelected}
-          label={label}
-          onChange={handleChange}
-          tokens={getButtonTokens}
-          inactive={inactive}
-        />
-        {isOpen && (
-          <ModalOverlay
-            variant={{ width: colSize > 1 ? 'size576' : 's' }}
-            onClose={() => setIsOpen(false)}
-          >
-            <Row>
-              <Typography variant={{ size: 'h4' }}>
-                {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
-              </Typography>
-            </Row>
-            {subtitle && (
-              <>
-                <Spacer space={5} />
-                <Row>
-                  <Typography variant={{ size: 'h5' }} tokens={selectSubTitleTokens(themeTokens)}>
-                    {subtitle}
-                  </Typography>
-                </Row>
-              </>
-            )}
-            <Spacer space={4} />
-            <Box scroll={true}>
-              <Row distribute="between">
-                {[...Array(colSize).keys()].map((i) => (
-                  <Col xs={12 / colSize} key={i}>
-                    <CheckboxGroup
-                      items={items.slice(i * rowLimit, (i + 1) * rowLimit)}
-                      checkedIds={checkedIds}
-                      onChange={(e) => setCheckedIds(e, i)}
-                    />
-                    <Spacer size={4} />
-                  </Col>
-                ))}
+  const { overlaidPosition, onTargetLayout, isReady, sourceRef } = useOverlaidPosition({
+    isShown: isOpen,
+    offsets,
+    align
+  })
+
+  return (
+    <>
+      <ButtonDropdown
+        ref={sourceRef}
+        key={id}
+        {...pressHandlers}
+        value={isOpen}
+        selected={isSelected}
+        label={label}
+        onChange={handleChange}
+        tokens={getButtonTokens}
+        inactive={inactive}
+      />
+      {isOpen && (
+        <ModalOverlay
+          overlaidPosition={overlaidPosition}
+          variant={{ width: colSize > 1 ? 'size576' : 's' }}
+          onClose={() => setIsOpen(false)}
+          tokens={tokens}
+          copy={copy}
+          isReady={isReady}
+          onLayout={onTargetLayout}
+        >
+          <Row>
+            <Typography variant={{ size: 'h4' }}>
+              {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
+            </Typography>
+          </Row>
+          {subtitle && (
+            <>
+              <Spacer space={5} />
+              <Row>
+                <Typography variant={{ size: 'h5' }} tokens={selectSubTitleTokens(themeTokens)}>
+                  {subtitle}
+                </Typography>
               </Row>
-            </Box>
-            <Divider variant={selectDividerToknes({ ...themeTokens, width: 'full' })} space={4} />
-            <Row>
-              <StackView direction="row" space={3} tokens={{ alignItems: 'center' }}>
-                <Button
-                  onPress={() => onApply(checkedIds)}
-                  variant={{ size: 'small', priority: 'high' }}
-                >
-                  {getCopy('applyButtonLabel')}
-                </Button>
-                <Box>
-                  <TextButton onPress={() => setCheckedIds([])}>
-                    {getCopy('clearButtonLabel')}
-                  </TextButton>
-                </Box>
-              </StackView>
+            </>
+          )}
+          <Spacer space={4} />
+          <Box scroll={true}>
+            <Row distribute="between">
+              {[...Array(colSize).keys()].map((i) => (
+                <Col xs={12 / colSize} key={i}>
+                  <CheckboxGroup
+                    items={items.slice(i * rowLimit, (i + 1) * rowLimit)}
+                    checkedIds={checkedIds}
+                    onChange={(e) => setCheckedIds(e, i)}
+                  />
+                  <Spacer size={4} />
+                </Col>
+              ))}
             </Row>
-          </ModalOverlay>
-        )}
-      </>
-    )
-  }
-)
+          </Box>
+          <Divider variant={selectDividerToknes({ ...themeTokens, width: 'full' })} space={4} />
+          <Row>
+            <StackView direction="row" space={3} tokens={{ alignItems: 'center' }}>
+              <Button
+                onPress={() => onApply(checkedIds)}
+                variant={{ size: 'small', priority: 'high' }}
+              >
+                {getCopy('applyButtonLabel')}
+              </Button>
+              <Box>
+                <TextButton onPress={() => setCheckedIds([])}>
+                  {getCopy('clearButtonLabel')}
+                </TextButton>
+              </Box>
+            </StackView>
+          </Row>
+        </ModalOverlay>
+      )}
+    </>
+  )
+}
+
 MultiSelectFilter.displayName = 'MultiSelectFilter'
 
 MultiSelectFilter.propTypes = {

package/src/utils/index.js

@@ -10,6 +10,7 @@ export { default as useCopy } from './useCopy'
 export { default as useHash } from './useHash'
 export { default as useSpacingScale } from './useSpacingScale'
 export { default as useResponsiveProp } from './useResponsiveProp'
+export { default as useOverlaidPosition } from './useOverlaidPosition'
 export { default as useSafeLayoutEffect } from './useSafeLayoutEffect'
 export { default as useScrollBlocking } from './useScrollBlocking'
 export * from './useResponsiveProp'