@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/ToggleSwitch/ToggleSwitchGroup.js

@@ -1,208 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ABBPropTypes from 'airbnb-prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import ToggleSwitch from './ToggleSwitch';
-import Fieldset from '../Fieldset';
-import { getStackedContent } from '../StackView';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const ToggleSwitchGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    copy = 'en',
-    variant,
-    tokens,
-    items = [],
-    values,
-    initialValues,
-    maxValues = 1,
-    onChange,
-    readOnly = false,
-    inactive = false,
-    feedback,
-    hint,
-    hintPosition = 'inline',
-    tooltip,
-    legend,
-    name: inputGroupName,
-    accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
-    : Platform.select({
-      web: 'group',
-      default: 'none'
-    }),
-    toggleSwitchTokens,
-    validation,
-    ...rest
-  } = _ref;
-  const viewport = useViewport();
-  const {
-    space,
-    fieldSpace
-  } = useThemeTokens('ToggleSwitchGroup', tokens, variant, {
-    viewport
-  });
-  const {
-    currentValues,
-    toggleOneValue
-  } = useMultipleInputValues({
-    initialValues,
-    values,
-    maxValues,
-    onChange,
-    readOnly
-  });
-  const selectedProps = selectProps({
-    accessibilityRole,
-    ...rest
-  });
-  const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
-  const uniqueFields = ['id', 'label'];
-  if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error(`ToggleSwitchGroup items must have unique ${uniqueFields.join(', ')}`);
-  }
-  const toggleSwitches = items.map((_ref2, index) => {
-    let {
-      label,
-      id = label,
-      accessibilityLabel = label,
-      onChange: itemOnChange,
-      ref: itemRef,
-      tooltip: itemTooltip,
-      ...itemRest
-    } = _ref2;
-    const isSelected = currentValues.includes(id);
-    const handleChange = (newCheckedState, event) => {
-      if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
-      toggleOneValue(id, event);
-    };
-    const itemA11y = {
-      accessibilityState: {
-        checked: isSelected
-      },
-      accessibilityRole: itemA11yRole,
-      accessibilityLabel,
-      ...a11yProps.getPositionInSet(items.length, index)
-    };
-    return /*#__PURE__*/_jsx(ToggleSwitch, {
-      copy: copy,
-      id: id,
-      ref: itemRef,
-      onChange: handleChange,
-      tokens: toggleSwitchTokens,
-      value: isSelected,
-      inactive: inactive,
-      label: label,
-      tooltip: itemTooltip,
-      ...itemA11y,
-      ...selectItemProps(itemRest)
-    }, id);
-  });
-  return /*#__PURE__*/_jsx(Fieldset, {
-    ref: ref,
-    name: inputGroupName,
-    legend: legend,
-    tooltip: tooltip,
-    hint: hint,
-    hintPosition: hintPosition,
-    space: fieldSpace,
-    feedback: feedback,
-    inactive: inactive,
-    validation: validation,
-    ...selectedProps,
-    children: getStackedContent(toggleSwitches, {
-      space,
-      direction: 'column'
-    })
-  });
-});
-ToggleSwitchGroup.displayName = 'ToggleSwitchGroup';
-ToggleSwitchGroup.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Whether the English or French copy will be used (e.g. for accessibility labels).
-   */
-  copy: PropTypes.oneOf(['en', 'fr']),
-  tokens: getTokensPropType('ToggleSwitchGroup'),
-  variant: variantProp.propType,
-  /**
-   * The maximum number of items a user may select at once. Defaults to 1 and behaves
-   * like radio buttons. To have no limit and allow any number of selections, pass `null`.
-   */
-  maxValues: PropTypes.number,
-  /**
-   * The options a user may select
-   */
-  items: PropTypes.arrayOf(PropTypes.shape({
-    ...selectedItemPropTypes,
-    /**
-     * The text displayed to the user on the label.
-     */
-    label: PropTypes.string.isRequired,
-    /**
-     * An optional accessibility label may be passed to each ToggleSwitch
-     * and will be applied as normal for a React Native accessibilityLabel prop.
-     */
-    accessibilityLabel: PropTypes.string,
-    /**
-     * An optional unique string may be provided to identify this option,
-     * which will be used in code and passed to any onChange function.
-     * If not provided, the label is used.
-     */
-    id: PropTypes.string,
-    /**
-     * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
-     */
-    ref: ABBPropTypes.ref()
-  })),
-  /**
-   * If provided, this function is called when the current selection is changed
-   * and is passed an array of the `id`s of all currently selected `items`.
-   */
-  onChange: PropTypes.func,
-  /**
-   * If the selected item(s) in the toggle switch group are to be controlled externally by
-   * a parent component, pass an array of strings as well as an `onChange` handler.
-   * Passing an array for "values" makes the ToggleSwitchGroup a "controlled" component that
-   * expects its state to be handled via `onChange` and so doesn't handle it itself.
-   */
-  values: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * If `values` is not passed, making the ToggleSwitchGroup an "uncontrolled" component
-   * managing its own selected state, a default set of selections may be provided.
-   * Changing the `initialValues` does not change the user's selections.
-   */
-  initialValues: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * Optional additional text giving more detail to help a user make a choice.
-   */
-  hint: PropTypes.string,
-  /**
-   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
-   */
-  hintPosition: PropTypes.oneOf(['inline', 'below']),
-  /**
-   * Optional tooltip text content to include alongside the legend and hint.
-   */
-  tooltip: PropTypes.string,
-  /**
-   * If provided, a Feedback element is rendered containing this text.
-   */
-  feedback: PropTypes.string,
-  /**
-   * Main text used to describe this group, used in Fieldset's Legend element.
-   */
-  legend: PropTypes.string,
-  /**
-   * Toggle switch token overrides.
-   */
-  toggleSwitchTokens: getTokensPropType('ToggleSwitch'),
-  /**
-   * Current validation status of the group, passed to the feedback element if there is one.
-   */
-  validation: PropTypes.oneOf(['error', 'success'])
-};
-export default ToggleSwitchGroup;

package/lib-module/ToggleSwitch/index.js

@@ -1,3 +0,0 @@
-import ToggleSwitch from './ToggleSwitch';
-import ToggleSwitchGroup from './ToggleSwitchGroup';
-export { ToggleSwitch, ToggleSwitchGroup };

package/lib-module/Tooltip/Backdrop.js

@@ -1,50 +0,0 @@
-import { useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-function createPortalNode(nodeId) {
-  const node = document.createElement('div');
-  node.id = nodeId;
-
-  // we're mimicking React Native's Modal component, except for using an `absolute` position
-  // this way the backdrop stays in place when scrolling the window - that's why we need to
-  // position it at the scroll position when rendering
-  node.style.cssText = `
-  position: absolute; 
-  top: ${window.scrollY}px;
-  left: ${window.scrollX}px; 
-  right: 0; 
-  bottom: 0; 
-  z-index: 9999; 
-  pointer-events: none;
-  `;
-  document.body.appendChild(node);
-  return node;
-}
-function removePortalNode(nodeId) {
-  const node = document.getElementById(nodeId);
-  node.parentElement.removeChild(node);
-}
-
-/**
- * The Web version of Backdrop utilizes React Portal for overlaying page content, so it is
- * dependent on ReactDOM. Tooltip's closing is handled by the onBlur callback of the control.
- */
-function Backdrop(_ref) {
-  let {
-    children
-  } = _ref;
-  const [portalNode, setPortalNode] = useState();
-  useEffect(() => {
-    const nodeId = `tooltip-backdrop-${Date.now()}`;
-    const node = createPortalNode(nodeId);
-    setPortalNode(node);
-    return () => {
-      removePortalNode(nodeId);
-    };
-  }, []);
-  return portalNode ? /*#__PURE__*/ReactDOM.createPortal(children, portalNode) : null;
-}
-Backdrop.propTypes = {
-  children: PropTypes.node
-};
-export default Backdrop;

package/lib-module/Tooltip/Backdrop.native.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
-import Modal from "react-native-web/dist/exports/Modal";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
-
-/**
- * The Native version of Backdrop utilizes React Native's Modal component for overlaying
- * the app's content, since this is the only reliable to do it. The only drawback of this
- * approach is that a press on the Backdrop will actually stop the press event from propagating,
- * i.e. anything rendered beneath the Backdrop can't be pressed until the Backdrop is closed.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-function Backdrop(_ref) {
-  let {
-    onPress,
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsx(Modal, {
-    transparent: true,
-    children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
-      onPress: onPress,
-      children: /*#__PURE__*/_jsx(View, {
-        style: staticStyles.backdrop,
-        children: children
-      })
-    })
-  });
-}
-export default Backdrop;
-Backdrop.propTypes = {
-  onPress: PropTypes.func,
-  children: PropTypes.node
-};
-const staticStyles = StyleSheet.create({
-  backdrop: {
-    flexBasis: '100%',
-    backgroundColor: 'rgba(255, 255, 255, 0.5)' // to visually mark that the content beneath is not pressable
-  }
-});

package/lib-module/Tooltip/Tooltip.js

@@ -1,280 +0,0 @@
-import React from 'react';
-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 { useFloating, arrow, offset, shift, flip, autoPlacement } from '../utils/floating-ui';
-import { applyShadowToken, applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, selectSystemProps, selectTokens, viewProps } from '../utils';
-import TooltipButton from '../TooltipButton';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { 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 selectMobileTooltipPositionStyles = _ref3 => {
-  let {
-    top,
-    left,
-    position
-  } = _ref3;
-  return {
-    top,
-    left,
-    position
-  };
-};
-const selectMobileArrowStyles = (_ref4, _ref5) => {
-  let {
-    backgroundColor,
-    arrowWidth,
-    arrowBorderRadius,
-    shadow
-  } = _ref4;
-  let {
-    placement,
-    x: arrowX,
-    y: arrowY
-  } = _ref5;
-  const staticSide = {
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right'
-  }[placement.split('-')[0]];
-  return {
-    backgroundColor,
-    width: arrowWidth,
-    height: arrowWidth,
-    borderBottomRightRadius: arrowBorderRadius,
-    // this corner will be the arrow tip after rotation
-    transform: [{
-      rotateZ: '45deg'
-    }],
-    ...applyShadowToken(shadow),
-    left: arrowX != null && arrowX,
-    top: arrowY != null && arrowY,
-    right: '',
-    bottom: '',
-    [staticSide]: '-4px'
-  };
-};
-const selectTextStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
-const defaultControl = (pressableState, variant) => /*#__PURE__*/_jsx(TooltipButton, {
-  pressableState: pressableState,
-  variant: variant
-});
-
-/**
- * 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((_ref6, ref) => {
-  let {
-    children,
-    content,
-    position = 'auto',
-    copy = 'en',
-    onPress = () => {},
-    tokens,
-    variant,
-    inline = false,
-    nativeID,
-    ...rest
-  } = _ref6;
-  const [isOpen, setIsOpen] = React.useState(false);
-  const arrowRef = React.useRef();
-  const [tooltipDimensions, setTooltipDimensions] = React.useState(null);
-  const positions = {
-    auto: undefined,
-    // Auto needs to specifically bet set to undefined
-    above: 'top',
-    right: 'right',
-    below: 'bottom',
-    left: 'left'
-  };
-
-  // "AutoPlacement" can't be used with "flip"
-  const additionalMiddleware = position !== 'auto' ? autoPlacement : flip;
-  const {
-    x,
-    y,
-    reference,
-    floating,
-    strategy,
-    placement,
-    middlewareData: {
-      arrow: arrowData = {}
-    }
-  } = useFloating({
-    placement: positions[position],
-    middleware: [shift(), additionalMiddleware(), offset(15), arrow({
-      element: arrowRef
-    })]
-  });
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const themeTokens = useThemeTokens('Tooltip', tokens, variant);
-  const toggleIsOpen = () => {
-    onPress();
-    setIsOpen(!isOpen);
-  };
-  const close = () => setIsOpen(false);
-  const getPressableState = _ref7 => {
-    let {
-      pressed,
-      hovered,
-      focused
-    } = _ref7;
-    return {
-      pressed,
-      hover: hovered,
-      focus: focused
-    };
-  };
-  const onTooltipLayout = _ref8 => {
-    let {
-      nativeEvent: {
-        layout: {
-          width,
-          height
-        }
-      }
-    } = _ref8;
-    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) {
-      setTooltipDimensions(null);
-    }
-  }, [isOpen]);
-  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),
-    ref: ref,
-    children: [/*#__PURE__*/_jsx(Pressable, {
-      onPress: toggleIsOpen,
-      ref: reference,
-      onBlur: close,
-      style: pressableStyles,
-      hitSlop: pressableHitSlop,
-      accessibilityLabel: getCopy('a11yText'),
-      accessibilityRole: "button",
-      nativeID: nativeID,
-      children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
-    }), isOpen && /*#__PURE__*/_jsxs(View, {
-      ref: floating,
-      style: [selectTooltipShadowStyles(themeTokens), staticStyles.tooltip,
-      // applied separately so that it doesn't cover the arrow
-      selectMobileTooltipPositionStyles({
-        position: strategy,
-        top: y ?? 0,
-        left: x ?? 0
-      })],
-      onLayout: onTooltipLayout,
-      accessibilityRole: "alert",
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [staticStyles.arrow, selectMobileArrowStyles(themeTokens, {
-          ...arrowData,
-          placement
-        })],
-        ref: arrowRef
-      }), /*#__PURE__*/_jsx(View, {
-        style: selectTooltipStyles(themeTokens),
-        children: /*#__PURE__*/_jsx(Text, {
-          style: selectTextStyles(themeTokens),
-          children: content
-        })
-      })]
-    })]
-  });
-});
-Tooltip.displayName = 'Tooltip';
-Tooltip.propTypes = {
-  ...selectedSystemPropTypes,
-  ...propTypes
-};
-export default Tooltip;
-const staticStyles = StyleSheet.create({
-  container: {
-    alignItems: 'flex-start',
-    position: 'absolute'
-  },
-  tooltip: {
-    position: 'absolute',
-    maxWidth: 240,
-    top: 0,
-    left: 0
-  },
-  arrow: {
-    position: 'absolute'
-  }
-});