@telus-uds/components-base 2.4.0 → 3.0.0

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Platform } from 'react-native'
+import { Link } from '../Link'
+import { useThemeTokens } from '../ThemeProvider'
+import { htmlAttrs, viewProps, selectSystemProps } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
+
+// 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 = ({ color, textLine, lineHeight, fontSize }) => ({
+  color,
+  textLine,
+  blockLineHeight: lineHeight,
+  blockFontSize: fontSize
+})
+
+const ExpandCollapseMiniControl = React.forwardRef(
+  (
+    {
+      pressableState,
+      collapseTitle,
+      expandTitle = collapseTitle,
+      iconPosition = 'right',
+      tokens,
+      variant = {},
+      ...rest
+    },
+    ref
+  ) => {
+    const { expanded, hover, focus } = pressableState || {}
+    // we only want focus outline when focusing, if user is pressing we don't want the border.
+    const { outerBorderColor } = useThemeTokens(
+      'Link',
+      {},
+      {},
+      { focus: Platform.OS !== 'web' ? expanded : focus }
+    )
+    const { size, icon, ...themeTokens } = useThemeTokens(
+      'ExpandCollapseMiniControl',
+      tokens,
+      variant,
+      { expanded, focus }
+    )
+
+    // 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 (Platform.OS !== 'web') {
+        return { iconTranslateY: -1 }
+      }
+
+      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 (
+      <Link
+        variant={appearance}
+        icon={icon}
+        iconPosition={iconPosition}
+        tokens={(linkState) => ({
+          ...getTokens(linkState),
+          ...selectLinkTokens(themeTokens),
+          outerBorderColor
+        })}
+        ref={ref}
+        {...presentationOnly}
+        {...selectProps(rest)}
+      >
+        {expanded ? expandTitle : collapseTitle}
+      </Link>
+    )
+  }
+)
+
+ExpandCollapseMiniControl.displayName = 'ExpandCollapseMiniControl'
+
+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
+   */
+  pressableState: PropTypes.object,
+  /**
+   * Optional variant object to override the default theme tokens
+   */
+  variant: PropTypes.object
+}
+
+export default ExpandCollapseMiniControl

package/src/ExpandCollapseMini/index.js

@@ -0,0 +1,3 @@
+import ExpandCollapseMini from './ExpandCollapseMini'
+
+export default ExpandCollapseMini

package/src/Link/LinkBase.jsx

@@ -81,18 +81,19 @@ const selectDecorationStyles = ({ color, textLine, textLineStyle, alignSelf }) =
   })
 })
 
-const selectIconTokens = ({ color, iconSize, blockFontSize, iconTranslateX }) => {
+const selectIconTokens = ({ color, iconSize, blockFontSize, iconTranslateX, iconTranslateY }) => {
   /**
    * These calculations were carried out using a set of linear equations to calculate that the
    * position of the icon "->"" is aligned to the first line of the tooltip text.
    * The base equation is: X/4 + Y/4 - 4 - |X - Y| = Z
    * where X = blockFontSize, Y = iconSize and Z = translateY
    */
-  const translateY = blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize)
+  const translateY =
+    iconTranslateY ?? blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize)
   return {
     color,
     translateX: iconTranslateX,
-    translateY: translateY < 0 ? 0 : translateY,
+    translateY,
     size: iconSize
   }
 }
@@ -274,6 +275,10 @@ const staticStyles = StyleSheet.create({
       margin: 0,
       marginHorizontal: 2,
       padding: 0
+    }),
+    ...(Platform.OS === 'android' && {
+      paddingHorizontal: 2,
+      paddingTop: 2
     })
   }
 })

package/src/TextInput/TextInputBase.jsx

@@ -361,6 +361,32 @@ const TextInputBase = React.forwardRef(
       direction
     )
 
+    const { minHeight = 0, maxHeight = Infinity } = nativeInputStyle
+    const [inputHeight, setInputHeight] = React.useState(minHeight || 0)
+
+    /* get the new height between the limits and update 
+    the state with the new height */
+    const measureHeightWeb = React.useCallback(() => {
+      const el = inputRef.current
+      const scrollHeight = el.scrollHeight || 0
+
+      let newHeight = Math.max(scrollHeight, minHeight)
+      newHeight = Math.min(newHeight, maxHeight)
+
+      setInputHeight(newHeight)
+    }, [inputRef, minHeight, maxHeight])
+
+    /* restores the height and the value first to then 
+    calculate the height correctly */
+    React.useEffect(() => {
+      if (Platform.OS === 'web' && inputRef.current) {
+        const el = inputRef.current
+        el.style.height = 'auto'
+        el.value = currentValue
+        measureHeightWeb()
+      }
+    }, [currentValue, measureHeightWeb, inputRef])
+
     const shouldShowSubmitIcon = submitIcon && direction === 'left' && !inactive
 
     return (
@@ -387,7 +413,10 @@ const TextInputBase = React.forwardRef(
           ref={inputRef}
           keyboardType={isNumeric ? 'numeric' : 'default'}
           inputMode={isNumeric ? 'numeric' : undefined}
-          style={nativeInputStyle}
+          style={{
+            ...nativeInputStyle,
+            height: Math.max(inputHeight, minHeight)
+          }}
           secureTextEntry={isPassword && !showPassword}
           {...inputProps}
         />

package/src/index.js

@@ -18,6 +18,7 @@ export { default as ColourToggle } from './ColourToggle'
 export { default as DownloadApp } from './DownloadApp'
 export { default as Divider } from './Divider'
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
+export { default as ExpandCollapseMini } from './ExpandCollapseMini'
 export { default as Feedback } from './Feedback'
 export { default as Fieldset } from './Fieldset'
 export { default as FlexGrid } from './FlexGrid'

package/src/utils/useOverlaidPosition.js

@@ -1,5 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Dimensions, Platform } from 'react-native'
+import debounce from 'lodash.debounce'
+
+const DEBOUNCE_DELAY = 100
 
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   const offset = Math.max(0, initialOffset)
@@ -200,6 +203,26 @@ const useOverlaidPosition = ({
     return unsubscribe
   }, [readyToShow])
 
+  useEffect(() => {
+    if (Platform.OS !== 'web') {
+      return undefined
+    }
+
+    const handleScroll = debounce(() => {
+      sourceRef.current?.measureInWindow((x, y, width, height) => {
+        setWindowDimensions(window)
+        setSourceLayout({ x, y, width, height })
+      })
+    }, DEBOUNCE_DELAY)
+
+    window.addEventListener('scroll', handleScroll)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+      handleScroll.cancel()
+    }
+  }, [sourceRef])
+
   const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions)
 
   const overlaidPosition = isReady

package/lib/A11yInfoProvider/index.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import AccessibilityInfo from "react-native-web/dist/exports/AccessibilityInfo";
-import Platform from "react-native-web/dist/exports/Platform";
-import { jsx as _jsx } from "react/jsx-runtime";
-const ScreenReaderContext = /*#__PURE__*/React.createContext(false);
-const ReducedMotionContext = /*#__PURE__*/React.createContext(false);
-
-// eslint-disable-next-line no-unused-vars
-const A11yInfoProvider = /*#__PURE__*/React.forwardRef((_ref, _) => {
-  let {
-    children
-  } = _ref;
-  const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = React.useState(false);
-  React.useEffect(() => {
-    if (process.env.NODE_ENV === 'test') {
-      // On Jest these effects do nothing but can cause `act` state change warnings
-      // and "...after the Jest environment has been torn down" errors, so skip them.
-      return () => {};
-    }
-    const motionSubscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
-    const setInitialA11yInfo = async () => {
-      const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isScreenReaderEnabled()]);
-
-      // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
-      // https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/AccessibilityInfo/index.js#L14
-      setScreenReaderEnabled(Platform.OS !== 'web' && !!initialScreenReaderEnabled);
-
-      // RNW does support isReduceMotionEnabled looking for 'prefers-reduced-motion' state
-      setReduceMotionEnabled(!!initialReduceMotionEnabled);
-    };
-    if (AccessibilityInfo.isReduceMotionEnabled && AccessibilityInfo.isScreenReaderEnabled) {
-      setInitialA11yInfo();
-    }
-    return () => {
-      // From react-native 0.65, AccessibilityInfo.removeEventListener is deprecated for `remove` on addEventListener return value
-      if (typeof (motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove) === 'function') {
-        motionSubscription === null || motionSubscription === void 0 || motionSubscription.remove();
-      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
-        AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
-      }
-    };
-  }, []);
-  return /*#__PURE__*/_jsx(ReducedMotionContext.Provider, {
-    value: reduceMotionEnabled,
-    children: /*#__PURE__*/_jsx(ScreenReaderContext.Provider, {
-      value: screenReaderEnabled,
-      children: children
-    })
-  });
-});
-A11yInfoProvider.displayName = 'A11yInfoProvider';
-A11yInfoProvider.propTypes = {
-  children: PropTypes.node.isRequired
-};
-export default A11yInfoProvider;
-export const useA11yInfo = () => {
-  const screenReaderEnabled = React.useContext(ScreenReaderContext);
-  const reduceMotionEnabled = React.useContext(ReducedMotionContext);
-  return {
-    reduceMotionEnabled,
-    screenReaderEnabled
-  };
-};