@telus-uds/components-base 2.0.0 → 2.0.1

package/lib-module/Tooltip/getTooltipPosition.js

@@ -1,175 +0,0 @@
-function normalizePosition(position) {
-  const {
-    left,
-    right,
-    bottom,
-    top,
-    width,
-    ...rest
-  } = position; // adjust the coordinates so that it fits within the window
-
-  const normalized = {
-    left: Math.max(0, left),
-    right: Math.max(0, right),
-    top: Math.max(0, top),
-    bottom // since it's ok the make the document grow downwards - no need to normalize here
-
-  };
-
-  const getAbsoluteDiff = (value1, value2) => Math.abs(Math.abs(value1) - Math.abs(value2)); // adjust the width by whatever has been subtracted from left or right
-
-
-  normalized.width = width - Math.abs(getAbsoluteDiff(left, normalized.left) - getAbsoluteDiff(right, normalized.right));
-
-  if (normalized.top !== top) {
-    normalized.bottom += normalized.top - top;
-  }
-
-  const isNormalized = normalized.right !== right || normalized.left !== left || normalized.top !== top;
-  return { ...normalized,
-    ...rest,
-    isNormalized
-  };
-}
-
-function invertPosition(position) {
-  switch (position) {
-    case 'above':
-      return 'below';
-
-    case 'below':
-      return 'above';
-
-    case 'left':
-      return 'right';
-
-    default:
-      return 'left';
-  }
-}
-
-function findRectByPosition(position, rectsArray) {
-  return rectsArray.find(_ref => {
-    let {
-      position: rectPosition
-    } = _ref;
-    return rectPosition === position;
-  });
-}
-/**
- * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
- * to the control (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 getTooltipPosition(position, _ref2) {
-  let {
-    controlLayout,
-    tooltipDimensions,
-    windowDimensions,
-    arrowWidth = 0,
-    arrowOffset = 0
-  } = _ref2;
-  const {
-    width: controlWidth,
-    height: controlHeight,
-    x: controlX,
-    y: controlY
-  } = controlLayout;
-  const {
-    width: tooltipWidth,
-    height: tooltipHeight
-  } = tooltipDimensions;
-  const {
-    width: windowWidth,
-    height: windowHeight
-  } = windowDimensions;
-  const arrowSize = arrowWidth / 2 + arrowOffset;
-  const horizontalBounds = {
-    left: controlX + controlWidth / 2 - tooltipWidth / 2,
-    right: windowWidth - (controlX + controlWidth / 2 + tooltipWidth / 2)
-  };
-  const verticalBounds = {
-    top: controlY + controlHeight / 2 - tooltipHeight / 2,
-    bottom: windowHeight - (controlY + controlHeight / 2 + tooltipHeight / 2)
-  }; // calculate absolute coordinates for each of the potential positions (relative to window)
-
-  const boundingRects = [{
-    position: 'above',
-    ...horizontalBounds,
-    top: controlY - tooltipHeight - arrowSize,
-    bottom: windowHeight - (controlY - arrowSize)
-  }, {
-    position: 'right',
-    ...verticalBounds,
-    left: controlX + controlWidth + arrowSize,
-    right: windowWidth - (controlX + controlWidth + tooltipWidth + arrowSize)
-  }, {
-    position: 'below',
-    ...horizontalBounds,
-    top: controlY + controlHeight + arrowSize,
-    bottom: windowHeight - (controlY + controlHeight + tooltipHeight + arrowSize)
-  }, {
-    position: 'left',
-    ...verticalBounds,
-    left: controlX - tooltipWidth - arrowSize,
-    right: windowWidth - (controlX - arrowSize)
-  }].map(rect => {
-    // an absolute value representing how much of the tooltip is overflowing the window on each side
-    const windowOverflow = Math.abs(Math.min(rect.top, 0) - Math.min(rect.left, 0) - Math.min(rect.right, 0) - Math.min(rect.bottom, 0));
-    return { ...rect,
-      ...tooltipDimensions,
-      overflow: windowOverflow,
-      isNormalized: false
-    };
-  }); // the 'position' prop overrides the automatic positioning
-
-  if (position !== 'auto') {
-    let rect = findRectByPosition(position, boundingRects); // check if the suggested 'position' fits in window
-
-    if (rect.overflow === 0) {
-      return rect;
-    } // otherwise try the inverted position (e.g. left -> right)
-
-
-    rect = findRectByPosition(invertPosition(position), boundingRects);
-
-    if (rect.overflow === 0) {
-      return rect;
-    }
-  }
-
-  const inWindow = boundingRects.filter(_ref3 => {
-    let {
-      overflow
-    } = _ref3;
-    return overflow === 0;
-  }); // pick the first position that fits in window
-  // (these are sorted clockwise which makes them show where one would expect them to be)
-
-  if (inWindow.length > 0) {
-    return inWindow[0];
-  } // if all positions would end up being out of window bounds, let's pick the one that is
-  // the least overflowing and normalize its position to fit within window bounds
-
-
-  boundingRects.sort((_ref4, _ref5) => {
-    let {
-      overflow: overflowA
-    } = _ref4;
-    let {
-      overflow: overflowB
-    } = _ref5;
-    return overflowA - overflowB;
-  });
-  const leastOverflowing = boundingRects[0]; // prefer 'below' over 'above', since we can always expand the document downwards,
-  // and 'above' might cause issues on small viewports with large tooltips
-
-  return normalizePosition(leastOverflowing.position === 'above' ? findRectByPosition('below', boundingRects) : leastOverflowing);
-}
-
-export default getTooltipPosition;

package/lib-module/Tooltip/index.js

@@ -1,5 +0,0 @@
-import Dimensions from "react-native-web/dist/exports/Dimensions";
-import NonNativeTooltip from './Tooltip';
-import NativeToolTip from './Tooltip.native';
-const Tooltip = !Dimensions.get('screen').width <= 340 ? NativeToolTip : NonNativeTooltip;
-export default Tooltip;

package/lib-module/Tooltip/shared.js

@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import { getTokensPropType, variantProp } from '../utils';
-const propTypes = {
-  /**
-   * Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
-   * pressable state and tooltip variant as an argument.
-   */
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
-  /**
-   * The message. Can be raw text or text components.
-   */
-  content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
-  /**
-   * Select English or French copy for the accessible label.
-   */
-  copy: PropTypes.oneOf(['en', 'fr']),
-
-  /**
-   * Use to place the tooltip in a specific location (only if it fits within viewport).
-   */
-  position: PropTypes.oneOf(['auto', 'above', 'right', 'below', 'left']),
-  tokens: getTokensPropType('Tooltip'),
-  variant: variantProp.propType
-};
-export default propTypes;

package/lib-module/TooltipButton/TooltipButton.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
-import { useThemeTokens, applyOuterBorder } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import Icon from '../Icon';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectInnerContainerStyles = _ref => {
-  let {
-    borderRadius,
-    width
-  } = _ref;
-  return {
-    borderRadius,
-    width
-  };
-};
-
-const selectIconTokens = _ref2 => {
-  let {
-    iconSize,
-    iconColor
-    /* iconScale = 1 */
-
-  } = _ref2;
-  return {
-    size: iconSize,
-    color: iconColor // scale: iconScale TODO re-enable with icon component
-
-  };
-};
-/**
- * `TooltipButton` is a helper component used as a default control for the `Tooltip` component.
- * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
- * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
- */
-
-
-const TooltipButton = _ref3 => {
-  let {
-    pressableState,
-    tokens,
-    variant,
-    ...rest
-  } = _ref3;
-  const themeTokens = useThemeTokens('TooltipButton', tokens, variant, pressableState);
-  const {
-    icon: IconComponent
-  } = themeTokens;
-  return /*#__PURE__*/_jsx(View, {
-    style: applyOuterBorder(themeTokens),
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsx(View, {
-      style: selectInnerContainerStyles(themeTokens),
-      children: IconComponent && /*#__PURE__*/_jsx(Icon, {
-        icon: IconComponent,
-        tokens: selectIconTokens(themeTokens)
-      })
-    })
-  });
-};
-
-TooltipButton.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * Used as appearances when resolving theme tokens.
-   */
-  pressableState: PropTypes.shape({
-    pressed: PropTypes.bool,
-    hover: PropTypes.bool,
-    focus: PropTypes.bool
-  }),
-  tokens: getTokensPropType('TooltipButton'),
-  variant: variantProp.propType
-};
-export default TooltipButton;

package/lib-module/TooltipButton/index.js

@@ -1,2 +0,0 @@
-import TooltipButton from './TooltipButton';
-export default TooltipButton;

package/lib-module/Typography/Typography.js

@@ -1,154 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import Text from "react-native-web/dist/exports/Text";
-import View from "react-native-web/dist/exports/View";
-import { useTheme, useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import { applyTextStyles } from '../ThemeProvider/utils';
-import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag } from '../utils';
-/**
- * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps]);
-
-const selectTextStyles = (_ref, themeOptions) => {
-  let {
-    fontWeight,
-    fontSize,
-    color,
-    lineHeight,
-    fontName,
-    textAlign,
-    textTransform,
-    letterSpacing
-  } = _ref;
-  return applyTextStyles({
-    fontWeight,
-    fontSize,
-    color,
-    lineHeight,
-    fontName,
-    themeOptions,
-    textAlign,
-    textTransform,
-    letterSpacing
-  });
-}; // General-purpose flexible theme-neutral base component for text
-
-
-const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
-    children,
-    variant,
-    heading,
-    tag = typeof heading === 'string' ? heading : undefined,
-    accessibilityRole = heading === true ? 'header' : undefined,
-    block = false,
-    align = undefined,
-    tokens,
-    dataSet,
-    ...rest
-  } = _ref2;
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Typography', tokens, variant, {
-    viewport
-  });
-  const {
-    themeOptions
-  } = useTheme();
-  const resolvedTextProps = { ...selectTextProps(rest),
-    style: selectTextStyles(align ? { ...themeTokens,
-      textAlign: align
-    } : themeTokens, themeOptions),
-    dataSet,
-    maxFontSizeMultiplier: getMaxFontMultiplier(themeTokens)
-  };
-  const containerProps = {
-    accessibilityRole,
-    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-    ...selectContainerProps(rest)
-  };
-
-  const resetTagStyling = child => {
-    if (typeof child === 'object' && ((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
-      var _child$props;
-
-      const sanitizedChild = /*#__PURE__*/React.cloneElement(child, {
-        style: { ...(child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style),
-          lineHeight: 0
-        }
-      });
-      return sanitizedChild;
-    }
-
-    return child;
-  };
-
-  const sanitizeChildren = () => {
-    if (Array.isArray(children)) {
-      return children.map(resetTagStyling);
-    }
-
-    return resetTagStyling(children);
-  };
-
-  return block ? /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    ...containerProps,
-    children: /*#__PURE__*/_jsx(Text, { ...resolvedTextProps,
-      children: sanitizeChildren(children)
-    })
-  }) : /*#__PURE__*/_jsx(Text, {
-    ref: ref,
-    ...containerProps,
-    ...resolvedTextProps,
-    children: sanitizeChildren(children)
-  });
-});
-Typography.displayName = 'Typography';
-Typography.propTypes = { ...selectedContainerPropTypes,
-  ...selectedTextPropTypes,
-  tokens: getTokensPropType('Typography'),
-  variant: variantProp.propType,
-
-  /**
-   * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
-   *
-   * Does not affect styling: <Typography heading="h2"> will render a <h2> that looks like plain text.
-   * Use both `heading` and `variant` props to render semantic headings that look like headings.
-   *
-   * In native apps, if this is `true` or any html heading tag string and accessibilityRole prop
-   * is not defined, the accessibilityRole will default to "heading".
-   */
-  heading: PropTypes.oneOf([...headingTags, true]),
-
-  /**
-   * Optional semantic HTML tag, to apply to the text on web. Does not change styling.
-   *
-   * `tag` and `heading` props set the same thing, so shouldn't be used together (`tag` overrides `heading`).
-   *
-   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
-   * is not defined, the accessibilityRole will default to "heading".
-   */
-  tag: PropTypes.oneOf(textTags),
-
-  /**
-   * If true, forces the element to behave as a View block even if nested in other text
-   */
-  block: PropTypes.bool,
-
-  /**
-   * Works the same as css text-align, note that RN doesn't support "start" or "end" (see https://reactnative.dev/docs/text-style-props#textalign)
-   * Justify is known to make text harder to read, especially for people with dyslexia (see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#accessibility_concerns)
-   */
-  align: PropTypes.oneOf(['auto', 'left', 'right', 'center', 'justify']),
-
-  /**
-   * Same children allowed as a React Native <Text> node
-   */
-  children: PropTypes.node
-};
-export default Typography;

package/lib-module/Typography/index.js

@@ -1,2 +0,0 @@
-import Typography from './Typography';
-export default Typography;

package/lib-module/ViewportProvider/ViewportProvider.js

@@ -1,29 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { viewports } from '@telus-uds/system-constants';
-import { ViewportContext } from './useViewport';
-import useViewportListener from './useViewportListener';
-/**
- * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const ViewportProvider = _ref => {
-  let {
-    children
-  } = _ref;
-  // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
-  // by useViewportListener in a layout effect before anything is shown to the user.
-  const [viewport, setViewport] = useState(viewports.keys[0]);
-  useViewportListener(setViewport);
-  return /*#__PURE__*/_jsx(ViewportContext.Provider, {
-    value: viewport,
-    children: children
-  });
-};
-
-ViewportProvider.propTypes = {
-  children: PropTypes.node.isRequired
-};
-export default ViewportProvider;

package/lib-module/ViewportProvider/index.js

@@ -1,3 +0,0 @@
-import ViewportProvider from './ViewportProvider';
-export default ViewportProvider;
-export * from './useViewport';

package/lib-module/ViewportProvider/useViewport.js

@@ -1,3 +0,0 @@
-import { createContext, useContext } from 'react';
-export const ViewportContext = /*#__PURE__*/createContext({});
-export const useViewport = () => useContext(ViewportContext);

package/lib-module/ViewportProvider/useViewportListener.js

@@ -1,39 +0,0 @@
-import Dimensions from "react-native-web/dist/exports/Dimensions";
-import { viewports } from '@telus-uds/system-constants';
-import useSafeLayoutEffect from '../utils/useSafeLayoutEffect'; // Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
-// to update on every pixel change during window resize; but we only want rerenders to occur
-// when a viewport threshold has been crossed.
-
-const lookupViewport = () => viewports.select(Dimensions.get('window').width);
-/**
- * When client-side rendering, immediately set the viewport to the correct value as a layout effect so
- * if the viewport isn't the smallest, any SSR-rendered components rerender correctly before anything
- * is shown to the user. Then bind events to update the viewport if it changes.
- */
-
-
-const useViewportListener = setViewport => {
-  useSafeLayoutEffect(() => {
-    setViewport(lookupViewport());
-
-    const onChange = _ref => {
-      let {
-        window
-      } = _ref;
-      return setViewport(viewports.select(window.width));
-    };
-
-    const listener = Dimensions.addEventListener('change', onChange);
-    return () => {
-      if (typeof (listener === null || listener === void 0 ? void 0 : listener.remove) === 'function') {
-        // Can't just return listener.remove because listener.emitter disappears, causing an internal error.
-        // See https://github.com/facebook/react-native/issues/34508
-        listener.remove(); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value
-      } else if (typeof Dimensions.removeEventListener === 'function') {
-        Dimensions.removeEventListener('change', onChange);
-      }
-    };
-  }, [setViewport]);
-};
-
-export default useViewportListener;

package/lib-module/index.js

@@ -1,58 +0,0 @@
-export { default as A11yText } from './A11yText';
-export { default as ActivityIndicator } from './ActivityIndicator';
-export { default as Box } from './Box';
-export * from './Button';
-export { default as Card, PressableCardBase } from './Card';
-export * from './Carousel';
-export { default as Checkbox } from './Checkbox';
-export * from './Checkbox';
-export { default as Divider } from './Divider';
-export { default as ExpandCollapse, Accordion } from './ExpandCollapse';
-export { default as Feedback } from './Feedback';
-export { default as Fieldset } from './Fieldset';
-export { default as FlexGrid } from './FlexGrid';
-export { default as HorizontalScroll } from './HorizontalScroll';
-export * from './HorizontalScroll';
-export { default as Icon } from './Icon';
-export * from './Icon';
-export { default as IconButton } from './IconButton';
-export { default as InputLabel } from './InputLabel';
-export { default as InputSupports } from './InputSupports';
-export * from './Link';
-export { default as List, ListItem, ListBase } from './List';
-export { default as Modal } from './Modal';
-export { default as MultiSelectFilter } from './MultiSelectFilter';
-export { default as Notification } from './Notification';
-export { default as Pagination } from './Pagination';
-export { default as Progress } from './Progress';
-export { default as QuickLinks } from './QuickLinks';
-export { default as QuickLinksFeature } from './QuickLinksFeature';
-export { default as Radio } from './Radio';
-export * from './Radio';
-export { default as RadioCard } from './RadioCard';
-export * from './RadioCard';
-export { default as Responsive } from './Responsive';
-export { default as Search } from './Search';
-export { default as Select } from './Select';
-export { default as SideNav } from './SideNav';
-export { default as Skeleton } from './Skeleton';
-export { default as SkipLink } from './SkipLink';
-export { default as Spacer } from './Spacer';
-export { default as StackView } from './StackView';
-export * from './StackView';
-export { default as StepTracker } from './StepTracker';
-export { default as Tabs } from './Tabs';
-export { default as Tags } from './Tags';
-export * from './TextInput';
-export { default as Timeline } from './Timeline';
-export * from './ToggleSwitch';
-export { default as Tooltip } from './Tooltip';
-export { default as TooltipButton } from './TooltipButton';
-export { default as Typography } from './Typography';
-export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
-export { default as BaseProvider } from './BaseProvider';
-export { useHydrationContext } from './BaseProvider/HydrationContext';
-export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken } from './ThemeProvider';
-export * from './utils';
-export { Portal } from '@gorhom/portal';

package/lib-module/utils/BaseView/BaseView.js

@@ -1,43 +0,0 @@
-import React, { forwardRef } from 'react';
-import NativeView from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import PropTypes from 'prop-types';
-import { useTheme } from '../../ThemeProvider';
-/**
- * Identical to React Native's View and supporting all the same props, but with:
- *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-const BaseView = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    style,
-    ...rest
-  } = _ref;
-  const {
-    themeOptions
-  } = useTheme();
-  const styleProp = Array.isArray(style) ? [...style] : [style];
-
-  if (!themeOptions.forceZIndex) {
-    styleProp.unshift(styles.resetZIndex);
-  }
-
-  return /*#__PURE__*/_jsx(NativeView, { ...rest,
-    style: styleProp,
-    ref: ref,
-    children: children
-  });
-});
-BaseView.displayName = 'BaseView';
-const styles = StyleSheet.create({
-  resetZIndex: {
-    zIndex: 'auto'
-  }
-});
-BaseView.propTypes = {
-  children: PropTypes.node,
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
-};
-export default BaseView;

package/lib-module/utils/BaseView/BaseView.native.js

@@ -1,6 +0,0 @@
-import BaseView from "react-native-web/dist/exports/View";
-/**
- * Android crashes on non-standard style properties like `zIndex` so adding a `BaseView` for native platforms
- */
-
-export default BaseView;

package/lib-module/utils/BaseView/index.js

@@ -1,2 +0,0 @@
-import BaseView from './BaseView';
-export default BaseView;

package/lib-module/utils/a11y/index.js

@@ -1,2 +0,0 @@
-export * from './textSize';
-export * from './semantics';