@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/ToggleSwitch/ToggleSwitchGroup.js

@@ -0,0 +1,215 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+var _StackView = require("../StackView");
+var _ViewportProvider = require("../ViewportProvider");
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
+const ToggleSwitchGroup = /*#__PURE__*/_react.default.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.default.select({
+      web: 'group',
+      default: 'none'
+    }),
+    toggleSwitchTokens,
+    validation,
+    ...rest
+  } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    space,
+    fieldSpace
+  } = (0, _ThemeProvider.useThemeTokens)('ToggleSwitchGroup', tokens, variant, {
+    viewport
+  });
+  const {
+    currentValues,
+    toggleOneValue
+  } = (0, _utils.useMultipleInputValues)({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...rest
+  });
+  const itemA11yRole = selectedProps.accessibilityRole === 'radiogroup' ? 'radio' : 'switch';
+  const uniqueFields = ['id', 'label'];
+  if (!(0, _utils.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,
+      ..._utils.a11yProps.getPositionInSet(items.length, index)
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleSwitch.default, {
+      copy: copy,
+      id: id,
+      ref: itemRef,
+      onChange: handleChange,
+      tokens: toggleSwitchTokens,
+      value: isSelected,
+      inactive: inactive,
+      label: label,
+      tooltip: itemTooltip,
+      ...itemA11y,
+      ...selectItemProps(itemRest)
+    }, id);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    ref: ref,
+    name: inputGroupName,
+    legend: legend,
+    tooltip: tooltip,
+    hint: hint,
+    hintPosition: hintPosition,
+    space: fieldSpace,
+    feedback: feedback,
+    inactive: inactive,
+    validation: validation,
+    ...selectedProps,
+    children: (0, _StackView.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.default.oneOf(['en', 'fr']),
+  tokens: (0, _utils.getTokensPropType)('ToggleSwitchGroup'),
+  variant: _utils.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.default.number,
+  /**
+   * The options a user may select
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    ...selectedItemPropTypes,
+    /**
+     * The text displayed to the user on the label.
+     */
+    label: _propTypes.default.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.default.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.default.string,
+    /**
+     * An optional ref for one individual ToggleSwitch in the ToggleSwitchGroup
+     */
+    ref: _airbnbPropTypes.default.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.default.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.default.arrayOf(_propTypes.default.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.default.arrayOf(_propTypes.default.string),
+  /**
+   * Optional additional text giving more detail to help a user make a choice.
+   */
+  hint: _propTypes.default.string,
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+  /**
+   * Optional tooltip text content to include alongside the legend and hint.
+   */
+  tooltip: _propTypes.default.string,
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: _propTypes.default.string,
+  /**
+   * Main text used to describe this group, used in Fieldset's Legend element.
+   */
+  legend: _propTypes.default.string,
+  /**
+   * Toggle switch token overrides.
+   */
+  toggleSwitchTokens: (0, _utils.getTokensPropType)('ToggleSwitch'),
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success'])
+};
+var _default = exports.default = ToggleSwitchGroup;

package/lib/cjs/ToggleSwitch/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ToggleSwitch", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitch.default;
+  }
+});
+Object.defineProperty(exports, "ToggleSwitchGroup", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitchGroup.default;
+  }
+});
+var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+var _ToggleSwitchGroup = _interopRequireDefault(require("./ToggleSwitchGroup"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/Tooltip/Backdrop.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    const nodeId = `tooltip-backdrop-${Date.now()}`;
+    const node = createPortalNode(nodeId);
+    setPortalNode(node);
+    return () => {
+      removePortalNode(nodeId);
+    };
+  }, []);
+  return portalNode ? /*#__PURE__*/_reactDom.default.createPortal(children, portalNode) : null;
+}
+Backdrop.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = exports.default = Backdrop;

package/lib/cjs/Tooltip/Backdrop.native.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
+var _Modal = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Modal"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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.
+ */function Backdrop(_ref) {
+  let {
+    onPress,
+    children
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+    transparent: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
+      onPress: onPress,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.backdrop,
+        children: children
+      })
+    })
+  });
+}
+var _default = exports.default = Backdrop;
+Backdrop.propTypes = {
+  onPress: _propTypes.default.func,
+  children: _propTypes.default.node
+};
+const staticStyles = _StyleSheet.default.create({
+  backdrop: {
+    flexBasis: '100%',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)' // to visually mark that the content beneath is not pressable
+  }
+});

package/lib/cjs/Tooltip/Tooltip.js

@@ -0,0 +1,295 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _shared = _interopRequireDefault(require("./shared"));
+var _floatingUi = require("../utils/floating-ui");
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _TooltipButton = _interopRequireDefault(require("../TooltipButton"));
+var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.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,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+  };
+};
+const selectToolTipSizeStyles = _ref3 => {
+  let {
+    maxWidth,
+    minWidth
+  } = _ref3;
+  return {
+    maxWidth,
+    minWidth
+  };
+};
+const selectMobileTooltipPositionStyles = _ref4 => {
+  let {
+    top,
+    left,
+    position
+  } = _ref4;
+  return {
+    top,
+    left,
+    position
+  };
+};
+const selectMobileArrowStyles = (_ref5, _ref6) => {
+  let {
+    backgroundColor,
+    arrowWidth,
+    arrowBorderRadius,
+    shadow
+  } = _ref5;
+  let {
+    placement,
+    x: arrowX,
+    y: arrowY
+  } = _ref6;
+  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'
+    }],
+    ...(0, _ThemeProvider.applyShadowToken)(shadow),
+    left: arrowX != null && arrowX,
+    top: arrowY != null && arrowY,
+    right: '',
+    bottom: '',
+    [staticSide]: '-4px'
+  };
+};
+const selectTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
+const defaultControl = (pressableState, variant) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipButton.default, {
+  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.default.forwardRef((_ref7, ref) => {
+  let {
+    children,
+    content,
+    position = 'auto',
+    copy = 'en',
+    onPress = () => {},
+    tokens,
+    variant,
+    inline = false,
+    nativeID,
+    ...rest
+  } = _ref7;
+  const [isOpen, setIsOpen] = _react.default.useState(false);
+  const arrowRef = _react.default.useRef();
+  const [tooltipDimensions, setTooltipDimensions] = _react.default.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' ? _floatingUi.autoPlacement : _floatingUi.flip;
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy,
+    placement,
+    middlewareData: {
+      arrow: arrowData = {}
+    }
+  } = (0, _floatingUi.useFloating)({
+    placement: positions[position],
+    middleware: [(0, _floatingUi.shift)(), additionalMiddleware(), (0, _floatingUi.offset)(15), (0, _floatingUi.arrow)({
+      element: arrowRef
+    })]
+  });
+  const getCopy = (0, _useCopy.default)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tooltip', tokens, variant);
+  const toggleIsOpen = () => {
+    onPress();
+    setIsOpen(!isOpen);
+  };
+  const close = () => setIsOpen(false);
+  const getPressableState = _ref8 => {
+    let {
+      pressed,
+      hovered,
+      focused
+    } = _ref8;
+    return {
+      pressed,
+      hover: hovered,
+      focus: focused
+    };
+  };
+  const onTooltipLayout = _ref9 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref9;
+    if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
+      setTooltipDimensions({
+        width: _Platform.default.select({
+          web: width + 0.3,
+          // avoids often unnecessary line breaks due to subpixel rendering of fonts
+          native: width
+        }),
+        height
+      });
+    }
+  };
+  _react.default.useEffect(() => {
+    if (!isOpen) {
+      setTooltipDimensions(null);
+    }
+  }, [isOpen]);
+  const control = children !== undefined ? children : defaultControl;
+  const pressableStyles = control === defaultControl ? _Platform.default.select({
+    web: {
+      outline: 'none'
+    }
+  }) : undefined;
+  const pressableHitSlop = control === defaultControl ? {
+    top: 10,
+    bottom: 10,
+    left: 10,
+    right: 10
+  } : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: [staticStyles.container, _Platform.default.select({
+      web: {
+        display: inline ? 'inline-block' : 'flex'
+      }
+    })],
+    ...selectProps(rest),
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+      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__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      ref: floating,
+      style: [selectTooltipShadowStyles(themeTokens), staticStyles.tooltip,
+      // applied separately so that it doesn't cover the arrow
+      selectToolTipSizeStyles, selectMobileTooltipPositionStyles({
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0
+      })],
+      onLayout: onTooltipLayout,
+      accessibilityRole: "alert",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.arrow, selectMobileArrowStyles(themeTokens, {
+          ...arrowData,
+          placement
+        })],
+        ref: arrowRef
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: selectTooltipStyles(themeTokens),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          style: selectTextStyles(themeTokens),
+          children: content
+        })
+      })]
+    })]
+  });
+});
+Tooltip.displayName = 'Tooltip';
+Tooltip.propTypes = {
+  ...selectedSystemPropTypes,
+  ..._shared.default
+};
+var _default = exports.default = Tooltip;
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    alignItems: 'flex-start',
+    position: 'absolute'
+  },
+  tooltip: {
+    position: 'absolute',
+    top: 0,
+    left: 0
+  },
+  arrow: {
+    position: 'absolute'
+  }
+});