@telus-uds/components-base 2.0.0 → 2.0.2

package/lib-module/ToggleSwitch/ToggleSwitch.js

@@ -1,255 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import InputLabel from '../InputLabel';
-import ButtonBase from '../Button/ButtonBase';
-import StackView from '../StackView';
-import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
-import { a11yProps, focusHandlerProps, getTokensPropType, selectTokens, pressProps, selectSystemProps, useUniqueId, variantProp, viewProps } from '../utils';
-import { useInputValue } from '../utils/input';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]); // We need to drop the icon before passing it to the `ButtonBase`, because it's
-// being handled separately in this case
-
-const selectButtonTokens = _ref => {
-  let {
-    icon: _,
-    ...tokens
-  } = _ref;
-  return selectTokens('Button', { ...tokens,
-    // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
-    width: null
-  });
-}; // Map and rename icon-specific tokens to name used within Icon
-
-
-const selectIconTokens = _ref2 => {
-  let {
-    iconSize,
-    iconColor
-  } = _ref2;
-  return {
-    size: iconSize,
-    color: iconColor
-  };
-};
-
-const selectTrackStyles = _ref3 => {
-  let {
-    trackBorderWidth,
-    trackBorderColor,
-    trackBorderRadius,
-    width
-  } = _ref3;
-  return {
-    borderWidth: trackBorderWidth,
-    borderColor: trackBorderColor,
-    borderRadius: trackBorderRadius,
-    width
-  };
-};
-
-const selectSwitchStyles = _ref4 => {
-  let {
-    switchSize,
-    switchColor,
-    switchBorderWidth,
-    switchBorderColor,
-    switchBorderRadius,
-    switchShadow
-  } = _ref4;
-  return {
-    width: switchSize,
-    height: switchSize,
-    backgroundColor: switchColor,
-    borderWidth: switchBorderWidth,
-    borderColor: switchBorderColor,
-    borderRadius: switchBorderRadius,
-    ...applyShadowToken(switchShadow),
-    ...Platform.select({
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      web: {
-        transition: 'transform 200ms'
-      }
-    })
-  };
-};
-
-const selectLabelStyles = _ref5 => {
-  let {
-    labelMarginLeft
-  } = _ref5;
-  return {
-    marginLeft: labelMarginLeft
-  };
-};
-
-const selectLabelTokens = _ref6 => {
-  let {
-    labelColor,
-    labelFontName,
-    labelFontSize,
-    labelFontWeight,
-    labelLineHeight
-  } = _ref6;
-  return {
-    color: labelColor,
-    fontName: labelFontName,
-    fontWeight: labelFontWeight,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight
-  };
-};
-
-const ToggleSwitch = /*#__PURE__*/forwardRef((_ref7, ref) => {
-  let {
-    copy = 'en',
-    value,
-    initialValue,
-    onChange,
-    id,
-    label,
-    inactive,
-    tokens,
-    tooltip,
-    variant,
-    accessibilityRole = 'switch',
-    accessibilityLabel = label,
-    ...rest
-  } = _ref7;
-  const getTokens = useThemeTokensCallback('ToggleSwitch', tokens, variant);
-  const themeTokens = getTokens();
-  const {
-    currentValue,
-    setValue
-  } = useInputValue({
-    value,
-    initialValue,
-    onChange
-  });
-
-  const handlePress = event => setValue(!currentValue, event);
-
-  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
-
-  const uniqueId = useUniqueId('toggleSwitch');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
-  return /*#__PURE__*/_jsxs(StackView, {
-    space: 2,
-    direction: "row",
-    children: [Boolean(label) && /*#__PURE__*/_jsx(View, {
-      style: [selectLabelStyles(themeTokens), staticStyles.containText],
-      children: /*#__PURE__*/_jsx(InputLabel, {
-        copy: copy,
-        forId: inputId,
-        label: label,
-        tokens: selectLabelTokens(themeTokens),
-        tooltip: tooltip
-      })
-    }), /*#__PURE__*/_jsx(ButtonBase, {
-      id: id,
-      ref: ref,
-      selected: currentValue,
-      inactive: inactive,
-      tokens: getButtonTokens,
-      accessibilityLabel: accessibilityLabel,
-      accessibilityRole: accessibilityRole,
-      accessibilityState: {
-        checked: currentValue
-      },
-      onPress: handlePress,
-      ...selectProps(rest),
-      children: buttonState => {
-        const stateTokens = getTokens(buttonState);
-        const IconComponent = stateTokens.icon;
-        const switchStyles = selectSwitchStyles(stateTokens);
-        const trackStyles = selectTrackStyles(stateTokens);
-        const iconTokens = selectIconTokens(stateTokens); // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
-        // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
-
-        const slideStart = 0;
-        const slideEnd = stateTokens.width - stateTokens.switchSize - stateTokens.trackBorderWidth * 2;
-        const switchOffset = buttonState.selected ? slideEnd : slideStart;
-        const switchPositionStyle = {
-          transform: [{
-            translateX: switchOffset
-          }]
-        };
-        return /*#__PURE__*/_jsx(View, {
-          style: [staticStyles.track, trackStyles],
-          children: /*#__PURE__*/_jsx(View, {
-            style: [staticStyles.switch, switchStyles, switchPositionStyle],
-            children: IconComponent && /*#__PURE__*/_jsx(IconComponent, { ...iconTokens
-            })
-          })
-        });
-      }
-    })]
-  });
-});
-ToggleSwitch.displayName = 'ToggleSwitch';
-ToggleSwitch.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * Whether the English or French copy will be used (e.g. for accessibility labels).
-   */
-  copy: PropTypes.oneOf(['en', 'fr']),
-  tokens: getTokensPropType('ToggleSwitch'),
-  variant: variantProp.propType,
-
-  /**
-   * If this is a "controlled" component and a parent handles its selected state,
-   * tells the switch if it is on (true) or off (false).
-   */
-  value: PropTypes.bool,
-
-  /**
-   * If this is an "uncontrolled" component that handles its own selected state,
-   * optionally tells the switch if it should default to on (true) or off (false).
-   */
-  initialValue: PropTypes.bool,
-
-  /**
-   * Function called when the switch is toggled, with one boolean argument that is the
-   * new position of the switch, on (true) or off (false). For "controlled" components,
-   * this should always be passed and used to control the state of the switch.
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * Input ID.
-   */
-  id: PropTypes.string,
-
-  /**
-   * An optional label.
-   */
-  label: PropTypes.string,
-
-  /**
-   * If passed, the switch does not respond to user input and may recieve different
-   * theme tokens if the theme supports inactive appearance.
-   */
-  inactive: PropTypes.bool,
-
-  /**
-   * Content of an optional Tooltip. If set, a tooltip button will be shown next to the label.
-   */
-  tooltip: PropTypes.string
-};
-const staticStyles = StyleSheet.create({
-  track: {
-    flexDirection: 'row'
-  },
-  switch: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  containText: {
-    flexShrink: 1
-  }
-});
-export default ToggleSwitch;

package/lib-module/ToggleSwitch/ToggleSwitchGroup.js

@@ -1,227 +0,0 @@
-import React, { forwardRef } 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__*/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 ".concat(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,45 +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 = "\n  position: absolute; \n  top: ".concat(window.scrollY, "px;\n  left: ").concat(window.scrollX, "px; \n  right: 0; \n  bottom: 0; \n  z-index: 9999; \n  pointer-events: none;\n  ");
-  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-".concat(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,44 +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
-
-  }
-});