@telus-uds/components-base 1.34.0 → 1.34.2

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/Tabs/TabsItem.jsx

@@ -34,8 +34,8 @@ const selectHighlightBarStyles = ({
   borderRadius: highlightBarBorderRadius,
   borderWidth: highlightBarBorderWidth,
   bottom: -1 * (highlightBarHeight + highlightBarBorderWidth),
-  left: -1 * highlightBarBorderWidth,
-  right: -1 * highlightBarBorderWidth,
+  left: 0,
+  right: 0,
   zIndex: 1 + highlightBarBorderWidth
 })
 

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'

package/src/utils/useOverlaidPosition.js

@@ -0,0 +1,223 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Dimensions } from 'react-native'
+
+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 = ({ edge, fromEdge, sourceSize }) => {
+  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({
+  sourceLayout,
+  targetDimensions,
+  windowDimensions,
+  offsets = {},
+  align
+}) {
+  // 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 = ({
+  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'
+  }
+}) => {
+  // 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(
+    ({
+      nativeEvent: {
+        layout: { width, height }
+      }
+    }) => {
+      // 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 = ({ window }) => {
+      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 = () => {
+      if (typeof 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