@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/Timeline/Timeline.js

@@ -1,169 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Platform from "react-native-web/dist/exports/Platform";
-import View from "react-native-web/dist/exports/View";
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp, a11yProps, viewProps, selectSystemProps, getA11yPropsFromHtmlTag, layoutTags } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const selectDotStyles = _ref => {
-  let {
-    dotWidth,
-    timelineColor,
-    dotBorderWidth,
-    dotColor
-  } = _ref;
-  return {
-    width: dotWidth,
-    height: dotWidth,
-    borderRadius: dotWidth / 2,
-    backgroundColor: dotColor,
-    borderWidth: dotBorderWidth,
-    borderColor: timelineColor
-  };
-};
-const selectConnectorStyles = _ref2 => {
-  let {
-    timelineConnectorColor,
-    connectorHeight,
-    connectorWidth
-  } = _ref2;
-  return {
-    width: connectorWidth,
-    height: connectorHeight,
-    backgroundColor: timelineConnectorColor
-  };
-};
-const selectTimelineContainerStyle = _ref3 => {
-  let {
-    timelineContainerDirection
-  } = _ref3;
-  return {
-    flexDirection: timelineContainerDirection
-  };
-};
-const selectLineItemStyles = _ref4 => {
-  let {
-    lineItemAlign,
-    lineItemDirection,
-    lineItemMarginBottom,
-    lineItemMarginRight
-  } = _ref4;
-  return {
-    alignItems: lineItemAlign,
-    flexDirection: lineItemDirection,
-    marginBottom: lineItemMarginBottom,
-    marginRight: lineItemMarginRight,
-    overflow: 'hidden'
-  };
-};
-const selectLineItemContainer = _ref5 => {
-  let {
-    lineItemContainerDirection,
-    lineContainerFlexSize
-  } = _ref5;
-  return {
-    flexDirection: lineItemContainerDirection,
-    flex: lineContainerFlexSize
-  };
-};
-const selectItemContentStyles = (_ref6, isLastChild) => {
-  let {
-    itemContentFlexSize,
-    itemContentMarginBottom,
-    itemContentMarginRight
-  } = _ref6;
-  return {
-    flex: itemContentFlexSize,
-    marginBottom: !isLastChild && itemContentMarginBottom,
-    marginRight: !isLastChild && itemContentMarginRight
-  };
-};
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-/**
- * Timeline is a component that displays either a horizontal or vertical list of the
- * children components passed by props
- *
- * ## Component API
- *
- * - `horizontal` In order to display the Component list horizontally
- *
- *
- * ## A11y guidelines
- * Timeline link supports all the common a11y props.
- */
-const Timeline = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
-  let {
-    tokens,
-    variant = {},
-    children,
-    accessibilityLabel,
-    tag = 'ul',
-    childrenTag = 'li',
-    ...rest
-  } = _ref7;
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Timeline', tokens, variant, {
-    viewport
-  });
-  const containerProps = {
-    ...selectProps(rest),
-    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole || 'list'),
-    accessibilityLabel
-  };
-  return /*#__PURE__*/_jsx(View, {
-    ...containerProps,
-    ref: ref,
-    style: selectTimelineContainerStyle(themeTokens),
-    children: children.map((child, index) => {
-      var _child$props;
-      const accessibilityRole = Platform.OS !== 'android' ? 'listitem' : undefined;
-      const childrenProps = {
-        ...getA11yPropsFromHtmlTag(childrenTag, (child === null || child === void 0 || (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.accessibilityRole) || accessibilityRole)
-      };
-      return /*#__PURE__*/_jsxs(View, {
-        style: selectLineItemContainer(themeTokens)
-        // eslint-disable-next-line react/no-array-index-key
-        ,
-        ...childrenProps,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: selectLineItemStyles(themeTokens),
-          children: [/*#__PURE__*/_jsx(View, {
-            style: selectDotStyles(themeTokens)
-          }), /*#__PURE__*/_jsx(View, {
-            style: selectConnectorStyles(themeTokens)
-          })]
-        }), /*#__PURE__*/_jsx(View, {
-          style: selectItemContentStyles(themeTokens, index + 1 === children.length),
-          children: child
-        })]
-      }, `timeline-${index}-${child.displayName}`);
-    })
-  });
-});
-Timeline.displayName = 'Timeline';
-Timeline.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Timeline'),
-  variant: variantProp.propType,
-  /**
-   * A list of components that will be rendered either horizontally or vertically
-   */
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  /**
-   * A required accessibility label that needs to be passed to be used on List
-   * which is applied as normal for a React Native accessibilityLabel prop.
-   */
-  accessibilityLabel: PropTypes.string.isRequired,
-  /**
-   * Sets the HTML tag of the outer container and the children. By default `'li'` for the children
-   * and `'ul'` for the container
-   *
-   * If either `tag` or `childrenTag` is overridden, the other should be too, to avoid producing invalid HTML.
-   *
-   */
-  tag: PropTypes.oneOf(layoutTags),
-  childrenTag: PropTypes.oneOf(layoutTags)
-};
-export default Timeline;

package/lib/Tooltip/Tooltip.native.js

@@ -1,363 +0,0 @@
-import React from 'react';
-import Dimensions from "react-native-web/dist/exports/Dimensions";
-import Platform from "react-native-web/dist/exports/Platform";
-import Pressable from "react-native-web/dist/exports/Pressable";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Text from "react-native-web/dist/exports/Text";
-import View from "react-native-web/dist/exports/View";
-import propTypes from './shared';
-import { applyShadowToken, applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, selectSystemProps, selectTokens, viewProps } from '../utils';
-import Backdrop from './Backdrop';
-import getTooltipPosition from './getTooltipPosition';
-import TooltipButton from '../TooltipButton';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const selectTooltipStyles = _ref => {
-  let {
-    backgroundColor,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    borderRadius
-  } = _ref;
-  return {
-    backgroundColor,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    borderRadius
-  };
-};
-const selectTooltipShadowStyles = _ref2 => {
-  let {
-    shadow,
-    borderRadius
-  } = _ref2;
-  return {
-    borderRadius,
-    ...applyShadowToken(shadow)
-  };
-};
-const selectToolTipSizeStyles = _ref3 => {
-  let {
-    maxWidth,
-    minWidth
-  } = _ref3;
-  return {
-    maxWidth,
-    minWidth
-  };
-};
-const selectTooltipPositionStyles = _ref4 => {
-  let {
-    top,
-    left,
-    width
-  } = _ref4;
-  return {
-    top,
-    left,
-    width
-  };
-};
-const selectArrowStyles = (_ref5, _ref6) => {
-  let {
-    backgroundColor,
-    arrowWidth,
-    arrowBorderRadius,
-    shadow
-  } = _ref5;
-  let {
-    position,
-    width: tooltipWidth,
-    height: tooltipHeight
-  } = _ref6;
-  // the arrow width is actually a diagonal of the rectangle that we'll use as a tip
-  const rectangleSide = Math.sqrt(arrowWidth * arrowWidth / 2);
-
-  // position the arrow at the side and center of the tooltip - this happens before rotation
-  // so we use the rectangle size as basis
-  const verticalOffset = -1 * rectangleSide / 2;
-  const horizontalOffset = rectangleSide / 2;
-
-  // percentage-based absolute positioning doesn't act well on native, so we have to
-  // calculate the pixel values
-  const directionalStyles = {
-    above: {
-      bottom: verticalOffset,
-      left: tooltipWidth / 2 - horizontalOffset,
-      transform: [{
-        rotateZ: '45deg'
-      }]
-    },
-    below: {
-      top: verticalOffset,
-      left: tooltipWidth / 2 - horizontalOffset,
-      transform: [{
-        rotateZ: '-135deg'
-      }]
-    },
-    left: {
-      right: verticalOffset,
-      top: tooltipHeight <= 45 ? tooltipHeight / 2 - horizontalOffset : tooltipHeight - (tooltipHeight - 10),
-      transform: [{
-        rotateZ: '-45deg'
-      }]
-    },
-    right: {
-      left: verticalOffset,
-      top: tooltipHeight <= 45 ? tooltipHeight / 2 - horizontalOffset : tooltipHeight - (tooltipHeight - 10),
-      transform: [{
-        rotateZ: '135deg'
-      }]
-    }
-  };
-  return {
-    backgroundColor,
-    width: rectangleSide,
-    height: rectangleSide,
-    borderBottomRightRadius: arrowBorderRadius,
-    // this corner will be the arrow tip after rotation
-    ...applyShadowToken(shadow),
-    ...directionalStyles[position]
-  };
-};
-const selectTextStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
-const defaultControl = (pressableState, variant, tokens) => /*#__PURE__*/_jsx(TooltipButton, {
-  pressableState: pressableState,
-  variant: variant,
-  tokens: tokens
-});
-
-/**
- * Tooltip provides a descriptive and detailed explanation or instructions. It can be used next to an input label
- * to help a user fill it in, or as a standalone component.
- *
- * By default the TooltipButton component will be used as a control for triggering the tooltip, but you may attach
- * a tooltip to any other component. A render function can be used to adjust the control's styling on state changes (hover, focus, etc.).
- *
- * ### Positioning
- * By default a Tooltip will be automatically positioned in a way that ensures it fits within the viewport.
- * You may suggest a position with a prop - it will be used, unless the tooltip would end up outside the viewport.
- *
- * ### Usage criteria
- * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
- * - Tooltips may also be useful when vertical space is an issue.
- */
-const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
-  let {
-    children,
-    content,
-    position = 'auto',
-    copy = 'en',
-    onPress = () => {},
-    tokens,
-    variant,
-    inline = false,
-    nativeID,
-    activateOnHover = false,
-    tooltipButtonTokens,
-    ...rest
-  } = _ref7;
-  const [isOpen, setIsOpen] = React.useState(false);
-  const controlRef = React.useRef();
-  const [controlLayout, setControlLayout] = React.useState(null);
-  const [tooltipDimensions, setTooltipDimensions] = React.useState(null);
-  const [windowDimensions, setWindowDimensions] = React.useState(Dimensions.get('window'));
-  const [tooltipPosition, setTooltipPosition] = React.useState(null);
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const themeTokens = useThemeTokens('Tooltip', tokens, variant);
-  const {
-    arrowWidth,
-    arrowOffset
-  } = themeTokens;
-  React.useEffect(() => {
-    const subscription = Dimensions.addEventListener('change', _ref8 => {
-      let {
-        window
-      } = _ref8;
-      setWindowDimensions(window);
-    });
-    return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
-  });
-  const toggleIsOpen = () => {
-    onPress();
-    setIsOpen(!isOpen);
-  };
-  const close = () => setIsOpen(false);
-  const getPressableState = _ref9 => {
-    let {
-      pressed,
-      hovered,
-      focused
-    } = _ref9;
-    return {
-      pressed,
-      hover: hovered,
-      focus: focused
-    };
-  };
-  const onTooltipLayout = _ref10 => {
-    let {
-      nativeEvent: {
-        layout: {
-          width,
-          height
-        }
-      }
-    } = _ref10;
-    if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
-      setTooltipDimensions({
-        width: Platform.select({
-          web: width + 0.3,
-          // avoids often unnecessary line breaks due to subpixel rendering of fonts
-          native: width
-        }),
-        height
-      });
-    }
-  };
-  React.useEffect(() => {
-    if (isOpen) {
-      controlRef.current.measureInWindow((x, y, width, height) => {
-        setControlLayout({
-          x,
-          y,
-          width,
-          height
-        });
-      });
-    } else {
-      setControlLayout(null);
-      setTooltipDimensions(null);
-      setTooltipPosition(null);
-    }
-  }, [isOpen]);
-  React.useEffect(() => {
-    setIsOpen(false);
-  }, [windowDimensions]);
-  React.useEffect(() => {
-    if (tooltipPosition !== null && !(tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized) || !isOpen || controlLayout === null || tooltipDimensions == null) {
-      return;
-    }
-    const updatedPosition = getTooltipPosition(position, {
-      controlLayout,
-      tooltipDimensions,
-      windowDimensions,
-      arrowWidth,
-      arrowOffset
-    });
-
-    // avoid ending up in an infinite normalization loop
-    if (tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized && updatedPosition.isNormalized) {
-      return;
-    }
-    setTooltipPosition(updatedPosition);
-  }, [isOpen, position, tooltipDimensions, controlLayout, windowDimensions, arrowWidth, arrowOffset, tooltipPosition]);
-  React.useEffect(() => {
-    if (Platform.OS !== 'web') {
-      return undefined;
-    }
-    const handleHover = event => {
-      if (activateOnHover) {
-        const isInsideControl = controlRef.current && controlRef.current.contains(event.target);
-        if (isInsideControl) {
-          if (!isOpen) {
-            setIsOpen(!isOpen);
-          }
-        } else {
-          close();
-        }
-      }
-    };
-    document.addEventListener('mouseover', handleHover, {
-      capture: true
-    });
-    return () => {
-      document.removeEventListener('mouseover', handleHover, {
-        capture: true
-      });
-    };
-  }, [controlLayout, activateOnHover, isOpen, onPress]);
-  const control = children !== undefined ? children : defaultControl;
-  const pressableStyles = control === defaultControl ? Platform.select({
-    web: {
-      outline: 'none'
-    }
-  }) : undefined;
-  const pressableHitSlop = control === defaultControl ? {
-    top: 10,
-    bottom: 10,
-    left: 10,
-    right: 10
-  } : undefined;
-  return /*#__PURE__*/_jsxs(View, {
-    style: [staticStyles.container, Platform.select({
-      web: {
-        display: inline ? 'inline-block' : 'flex'
-      }
-    })],
-    ...selectProps(rest),
-    children: [/*#__PURE__*/_jsx(Pressable, {
-      onPress: toggleIsOpen,
-      ref: controlRef,
-      onBlur: close,
-      style: pressableStyles,
-      hitSlop: pressableHitSlop,
-      accessibilityLabel: getCopy('a11yText'),
-      accessibilityRole: "button",
-      nativeID: nativeID,
-      children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant, tooltipButtonTokens) : control
-    }), isOpen && /*#__PURE__*/_jsx(Backdrop, {
-      onPress: close,
-      children: /*#__PURE__*/_jsxs(View, {
-        ref: ref,
-        style: [staticStyles.tooltip, selectTooltipShadowStyles(themeTokens),
-        // applied separately so that it doesn't cover the arrow
-        selectToolTipSizeStyles(themeTokens), tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || (tooltipPosition === null || tooltipPosition === void 0 ? void 0 : tooltipPosition.isNormalized)) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
-        ],
-        onLayout: onTooltipLayout,
-        accessibilityRole: "alert",
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [staticStyles.arrow, tooltipPosition && selectArrowStyles(themeTokens, tooltipPosition)]
-        }), /*#__PURE__*/_jsx(View, {
-          style: selectTooltipStyles(themeTokens),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: selectTextStyles(themeTokens),
-            children: content
-          })
-        })]
-      })
-    })]
-  });
-});
-Tooltip.displayName = 'NativeTooltip';
-Tooltip.propTypes = {
-  ...selectedSystemPropTypes,
-  ...propTypes
-};
-export default Tooltip;
-const staticStyles = StyleSheet.create({
-  container: {
-    alignItems: 'flex-start'
-  },
-  tooltip: {
-    position: 'absolute',
-    top: 0,
-    left: 0
-  },
-  tooltipHidden: {
-    opacity: 0
-  },
-  arrow: {
-    position: 'absolute'
-  }
-});