@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/Radio/Radio.js

@@ -1,282 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-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 RadioLabel from '../InputLabel/LabelContent';
-import RadioButton, { selectRadioButtonTokens } from './RadioButton';
-import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, useInputValue, useUniqueId, variantProp, viewProps } from '../utils';
-import StackView from '../StackView';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const selectContainerStyles = _ref => {
-  let {
-    containerBackgroundColor,
-    containerBorderRadius,
-    containerOpacity,
-    containerPaddingBottom,
-    containerPaddingLeft,
-    containerPaddingRight,
-    containerPaddingTop,
-    containerShadow
-  } = _ref;
-  return {
-    backgroundColor: containerBackgroundColor,
-    borderRadius: containerBorderRadius,
-    opacity: containerOpacity,
-    paddingBottom: containerPaddingBottom,
-    paddingLeft: containerPaddingLeft,
-    paddingRight: containerPaddingRight,
-    paddingTop: containerPaddingTop,
-    ...applyShadowToken(containerShadow)
-  };
-};
-const selectDescriptionStyles = _ref2 => {
-  let {
-    containerPaddingLeft = 0,
-    descriptionFontSize,
-    descriptionLineHeight,
-    descriptionMarginLeft,
-    descriptionFontName,
-    descriptionFontWeight,
-    inputSize,
-    fontColor,
-    labelMarginLeft = 0
-  } = _ref2;
-  return {
-    marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
-    color: fontColor,
-    ...applyTextStyles({
-      fontSize: descriptionFontSize,
-      lineHeight: descriptionLineHeight,
-      fontName: descriptionFontName,
-      fontWeight: descriptionFontWeight
-    })
-  };
-};
-const selectLabelStyles = _ref3 => {
-  let {
-    labelColor,
-    labelFontName,
-    labelFontSize,
-    labelFontWeight,
-    labelMarginLeft,
-    labelLineHeight
-  } = _ref3;
-  return applyTextStyles({
-    color: labelColor,
-    fontName: labelFontName,
-    fontWeight: labelFontWeight,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    marginLeft: labelMarginLeft
-  });
-};
-
-/**
- * Basic Radio component.
- *
- * ## Component API
- *
- * Use `label` prop to provide a label for the radio button. For a disabled `Radio` set the `inactive` prop to `true`.
- *
- * ### Controlled version
- *
- * If the radio button is controlled from outside, it needs to receive `checked` and `onChange` props.
- *
- * ### Uncontrolled version
- *
- * In case of uncontrolled radio button you can use `defaultChecked` prop to provide the initial value.
- * Whenever the radio button gets toggled, it calls the `onChange` callback with the new value (boolean).
- *
- * ### Using within forms
- *
- * You can pass `name` and `value` props if you need a particular radio button to be a part of a radio group
- * on a form.
- *
- * ### Validation
- *
- * You can mark a radio button as failing validation by setting the `error` prop to `true`.
- *
- * ## A11y guidelines
- *
- * Radio component accepts all the common accessibility props, but also sets some defaults, including
- * accessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)
- * or the internal state in case of uncontrolled radio button.
- *
- */
-const Radio = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
-  let {
-    checked,
-    defaultChecked,
-    description,
-    error = false,
-    id,
-    inactive,
-    label,
-    name: inputName,
-    onChange,
-    tokens,
-    value,
-    variant,
-    ...rest
-  } = _ref4;
-  const {
-    currentValue: isChecked,
-    setValue: setIsChecked,
-    isControlled
-  } = useInputValue({
-    value: checked,
-    initialValue: defaultChecked,
-    onChange
-  }, 'useRadioValue');
-  const getTokens = useThemeTokensCallback('Radio', tokens, {
-    checked: isChecked,
-    inactive,
-    error,
-    ...variant
-  });
-  const handleChange = event => {
-    if (!inactive && !isChecked) {
-      setIsChecked(true, event);
-    }
-  };
-  const handleKeyDown = event => {
-    // The expected keyboard shortcut for activating a radio is the Space key
-    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
-  };
-  const uniqueId = useUniqueId('radio');
-  const inputId = id ?? uniqueId;
-  const selectedProps = selectProps({
-    accessibilityRole: 'radio',
-    accessibilityState: {
-      checked: isChecked,
-      disabled: inactive
-    },
-    ...rest
-  });
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    disabled: inactive,
-    onKeyDown: handleKeyDown,
-    onPress: handleChange,
-    ...selectedProps,
-    style: staticStyles.removeOutline,
-    children: _ref5 => {
-      let {
-        focused: focus,
-        hovered: hover,
-        pressed
-      } = _ref5;
-      const stateTokens = getTokens({
-        focus,
-        hover,
-        pressed
-      });
-      const labelStyles = selectLabelStyles(stateTokens);
-      const alignWithLabel = label ? [staticStyles.alignWithLabel, {
-        height: labelStyles.lineHeight
-      }] : null;
-      return /*#__PURE__*/_jsxs(StackView, {
-        space: 0,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: [staticStyles.container, selectContainerStyles(stateTokens)],
-          children: [/*#__PURE__*/_jsx(View, {
-            style: alignWithLabel,
-            children: /*#__PURE__*/_jsx(RadioButton, {
-              tokens: selectRadioButtonTokens(stateTokens),
-              isControlled: isControlled,
-              isChecked: isChecked,
-              inactive: inactive,
-              defaultChecked: defaultChecked,
-              inputId: inputId,
-              handleChange: handleChange,
-              name: inputName,
-              value: value
-            })
-          }), Boolean(label) && /*#__PURE__*/_jsx(Text, {
-            style: labelStyles,
-            children: /*#__PURE__*/_jsx(RadioLabel, {
-              forId: inputId,
-              children: label
-            })
-          })]
-        }), Boolean(description) && /*#__PURE__*/_jsx(Text, {
-          style: selectDescriptionStyles({
-            ...getTokens(),
-            fontColor: labelStyles.color
-          }),
-          children: description
-        })]
-      });
-    }
-  });
-});
-Radio.displayName = 'Radio';
-Radio.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Use `checked` for controlled Radio. For uncontrolled Radio, use the `defaultChecked` prop.
-   */
-  checked: PropTypes.bool,
-  /**
-   * Use `defaultChecked` to provide the initial value for an uncontrolled Radio.
-   */
-  defaultChecked: PropTypes.bool,
-  /**
-   * An optional radio button description.
-   */
-  description: PropTypes.string,
-  /**
-   * Radio button ID.
-   */
-  id: PropTypes.string,
-  /**
-   * Whether the corresponding input is disabled or active.
-   */
-  inactive: PropTypes.bool,
-  /**
-   * The label.
-   */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /**
-   * Associate this radio button with a group (set as the name attribute).
-   */
-  name: PropTypes.string,
-  /**
-   * Whether the underlying input triggered a validation error or not.
-   */
-  error: PropTypes.bool,
-  /**
-   * The value. Must be unique within the group.
-   */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
-  /**
-   * Callback called when a controlled radio button gets interacted with.
-   */
-  onChange: PropTypes.func,
-  /**
-   * Radio tokens.
-   */
-  tokens: getTokensPropType('Radio'),
-  /**
-   * Radio variant.
-   */
-  variant: variantProp.propType
-};
-export default Radio;
-const staticStyles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  alignWithLabel: {
-    alignSelf: 'flex-start',
-    justifyContent: 'center'
-  },
-  removeOutline: {
-    outlineStyle: 'none'
-  }
-});

package/lib/Search/Search.js

@@ -1,275 +0,0 @@
-import React from 'react';
-import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
-import PropTypes from 'prop-types';
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps, contentfulProps } from '../utils';
-import TextInputBase from '../TextInput/TextInputBase';
-import ButtonBase from '../Button/ButtonBase';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
-import Icon from '../Icon';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps, contentfulProps]);
-const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
-const selectInputTokens = _ref => {
-  let {
-    searchTokens,
-    buttonTokens,
-    buttonsGapSize
-  } = _ref;
-  const {
-    paddingRight: inputPaddingRight,
-    clearButtonIcon,
-    submitButtonIcon
-  } = searchTokens;
-  const {
-    paddingLeft = 0,
-    paddingRight = 0,
-    iconSize = 0
-  } = buttonTokens;
-  const buttonWidth = paddingLeft + paddingRight + iconSize;
-  const paddingWithButtons = inputPaddingRight + (submitButtonIcon ? buttonWidth : 0) + (clearButtonIcon ? buttonsGapSize + buttonWidth : 0);
-  return {
-    ...selectTokens('TextInput', searchTokens),
-    paddingRight: paddingWithButtons
-  };
-};
-const selectButtonTokens = tokens => selectTokens('SearchButton', tokens);
-const selectIconTokens = _ref2 => {
-  let {
-    iconSize,
-    iconColor
-  } = _ref2;
-  return {
-    color: iconColor,
-    size: iconSize
-  };
-};
-const selectBorderTokens = _ref3 => {
-  let {
-    borderWidth,
-    mobileBorderWidth,
-    ...tokens
-  } = _ref3;
-  return {
-    borderWidth: Platform.OS === 'web' ? borderWidth : mobileBorderWidth,
-    ...tokens
-  };
-};
-const modifyButtonTokens = tokens => {
-  const modifiedTokens = {
-    ...tokens
-  };
-  if (Platform.OS !== 'web') {
-    modifiedTokens.backgroundColor = tokens.mobileBackgroundColor;
-  }
-  return modifiedTokens;
-};
-
-/**
- * The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.
- * Use `Search` to feature autocomplete interactions.
- *
- * This component includes a clear button, which will appear as text is entered and pressing it will
- * cause the input's internal state value to be set to an empty string.
- *
- * This component may only be used as uncontrolled, as the search value is managed within an internal state.
- * You can use the `onChange` prop to react to value changes and the `onSubmit` prop to react on search submission.
- *
- * Use the following props to supply additional accessibility labels for the input - `accessibilityLabel`,
- * clear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.
- */
-const Search = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
-  let {
-    initialValue,
-    value,
-    placeholder,
-    inactive,
-    onChange,
-    onSubmit,
-    onClear,
-    onFocus,
-    accessibilityLabel,
-    copy = 'en',
-    tokens,
-    variant,
-    nativeSubmitBtnID,
-    searchIconPosition = 'right',
-    dataSet,
-    ...rest
-  } = _ref4;
-  const {
-    currentValue = '',
-    setValue
-  } = useInputValue({
-    value,
-    initialValue,
-    onChange
-  });
-  const themeTokens = useThemeTokens('Search', tokens, {
-    inactive,
-    ...variant
-  });
-  const buttonTokens = useThemeTokens('SearchButton', tokens, variant);
-  const getThemeTokens = useThemeTokensCallback('Search', tokens, variant);
-  const getButtonTokens = useThemeTokensCallback('SearchButton', tokens, variant);
-
-  // TODO: support overriding the a11y props using a custom dictionary
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const {
-    placeholderColor,
-    buttonsGap,
-    clearButtonIcon: ClearButtonIcon,
-    submitButtonIcon: SubmitButtonIcon
-  } = themeTokens;
-
-  // get the actual gap value for the current viewport
-  const buttonsGapSize = useSpacingScale(buttonsGap);
-  const handleSubmit = event => {
-    if (onSubmit !== undefined) {
-      onSubmit(currentValue, event);
-    }
-  };
-  const handleClear = event => {
-    var _ref$current;
-    setValue('', event);
-    onClear === null || onClear === void 0 || onClear('', event);
-    ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
-  };
-  const handleFocus = event => {
-    if (onFocus !== undefined) onFocus(event);
-  };
-  const isEmpty = currentValue === '';
-
-  // Accessibility label should always be present and correctly localised
-  const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel');
-  // Placeholder is optional and may be unset by passing an empty string
-  const placeholderText = placeholder ?? a11yLabelText;
-  const {
-    nativeID,
-    testID,
-    ...containerProps
-  } = selectContainerProps(rest);
-  return /*#__PURE__*/_jsx(View, {
-    ...containerProps,
-    dataSet: dataSet,
-    children: /*#__PURE__*/_jsx(TextInputBase, {
-      nativeID: nativeID,
-      testID: testID,
-      ...selectInputProps(rest),
-      ref: ref,
-      tokens: pressableStates => selectInputTokens({
-        searchTokens: selectBorderTokens(getThemeTokens(pressableStates)),
-        buttonTokens,
-        buttonsGapSize,
-        isEmpty
-      }),
-      placeholder: placeholderText,
-      placeholderTextColor: placeholderColor,
-      inactive: inactive,
-      enablesReturnKeyAutomatically: true,
-      returnKeyType: "search",
-      value: currentValue,
-      onChange: setValue,
-      onSubmitEditing: handleSubmit,
-      onFocus: handleFocus,
-      accessibilityLabel: a11yLabelText,
-      direction: searchIconPosition,
-      buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/_jsx(ButtonBase, {
-        accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
-        accessibilityRole: "button",
-        inactive: inactive,
-        onPress: handleClear,
-        tokens: pressableStates => modifyButtonTokens(selectButtonTokens(getButtonTokens(pressableStates))),
-        children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, {
-          ...selectIconTokens(getButtonTokens(buttonState))
-        })
-      }, "clear"), SubmitButtonIcon && (searchIconPosition === 'right' ? /*#__PURE__*/_jsx(ButtonBase, {
-        accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
-        accessibilityRole: "button",
-        inactive: inactive,
-        onPress: handleSubmit,
-        tokens: buttonState => selectButtonTokens(getButtonTokens({
-          ...buttonState,
-          priority: 'high'
-        })),
-        nativeID: nativeSubmitBtnID,
-        children: buttonState => /*#__PURE__*/_jsx(SubmitButtonIcon, {
-          ...selectIconTokens(getButtonTokens({
-            ...buttonState,
-            priority: 'high'
-          }))
-        })
-      }, "submit-right") : /*#__PURE__*/_jsx(Icon, {
-        icon: SubmitButtonIcon,
-        testID: "iconLeft",
-        tokens: {
-          color: themeTokens.iconLeftColor,
-          size: themeTokens.iconLeftSize
-        }
-      }, "submitIcon"))]
-    })
-  });
-});
-Search.displayName = 'Search';
-Search.propTypes = {
-  ...selectedContainerPropTypes,
-  ...selectedInputPropTypes,
-  /**
-   * Use this to set the initial value of the search input.
-   * Updating `initialValue` will **not** update the actual value.
-   */
-  initialValue: PropTypes.string,
-  /**
-   * Label rendered in the search input when it has no value.
-   */
-  placeholder: PropTypes.string,
-  /**
-   * Disables all user interactions with the search input.
-   */
-  inactive: PropTypes.bool,
-  /**
-   * Use to react upon search input's value changes.
-   * Will receive the searched value as an argument.
-   */
-  onChange: PropTypes.func,
-  /**
-   * Triggered when the search input is submitted,
-   * either by pressing the submit button, "Enter" key on web,
-   * or "Search" key in a mobile keyboard.
-   */
-  onSubmit: PropTypes.func,
-  /**
-   * Triggered when the clear button is pressed.
-   */
-  onClear: PropTypes.func,
-  /**
-   * Triggered when the search input is focused.
-   */
-  onFocus: PropTypes.func,
-  /**
-   *
-   * Use to provide an accessible label for the input (visually hidden).
-   */
-  accessibilityLabel: PropTypes.string,
-  /**
-   * Select English or French copy for the accessible labels.
-   * You may also pass in a custom dictionary object.
-   */
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
-    accessibilityLabel: PropTypes.string,
-    clearButtonAccessibilityLabel: PropTypes.string,
-    submitButtonAccessibilityLabel: PropTypes.string
-  })]),
-  tokens: getTokensPropType('Search'),
-  variant: variantProp.propType,
-  /**
-   * ID for Submit button element on web
-   */
-  nativeSubmitBtnID: PropTypes.string
-};
-export default Search;

package/lib/Select/Picker.js

@@ -1,96 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { componentPropType, selectSystemProps, htmlAttrs } from '../utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    value,
-    onChange,
-    onFocus,
-    onBlur,
-    onMouseOver,
-    onMouseOut,
-    onOpen = () => {},
-    onClose = () => {},
-    style,
-    inactive,
-    children,
-    placeholder,
-    nativeID,
-    testID,
-    ...rest
-  } = _ref;
-  const selectedProps = selectProps(rest);
-  const {
-    accessibilityLabel,
-    accessibilityDescribedBy,
-    accessibilityInvalid
-  } = rest;
-  return (
-    /*#__PURE__*/
-    /**
-     * The onOpen and onClose methods are to call the new active variant that changes the icon of the select,
-     * onOpen when the select is open and onClose when the select is closed, onOpen is in the event onMousedown
-     * when is selected and oClose is in onMouseOut and onChange when the select is closed.
-     */
-    _jsxs("select", {
-      ref: ref,
-      style: style,
-      onMouseOver: onMouseOver,
-      onMouseOut: () => {
-        onMouseOut === null || onMouseOut === void 0 || onMouseOut();
-        onClose === null || onClose === void 0 || onClose();
-      },
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onMouseDown: onOpen,
-      disabled: inactive,
-      value: value || (placeholder !== undefined ? placeholder.value : undefined),
-      onChange: event => {
-        onClose();
-        onChange(event.target.value, event);
-      },
-      id: nativeID,
-      "aria-label": accessibilityLabel,
-      "aria-describedby": accessibilityDescribedBy,
-      "aria-invalid": accessibilityInvalid,
-      "data-testid": testID,
-      ...selectedProps,
-      children: [placeholder !== undefined && /*#__PURE__*/_jsx("option", {
-        value: placeholder.value,
-        disabled: true,
-        hidden: true,
-        children: placeholder.label
-      }), children]
-    })
-  );
-});
-Picker.displayName = 'Picker';
-export default Picker;
-Picker.propTypes = {
-  ...selectedSystemPropTypes,
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  /**
-   * It executes when the select choices are open
-   */
-  onOpen: PropTypes.func,
-  /**
-   * It executes when the select choices are closed
-   */
-  onClose: PropTypes.func,
-  style: PropTypes.object,
-  inactive: PropTypes.bool,
-  children: componentPropType(['Item', 'Group']),
-  placeholder: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string
-  }),
-  nativeID: PropTypes.string,
-  testID: PropTypes.string
-};

package/lib/StackView/StackWrap.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import Platform from "react-native-web/dist/exports/Platform";
-import useSafeLayoutEffect from '../utils/useSafeLayoutEffect';
-import StackWrapBox from './StackWrapBox';
-import StackWrapGap from './StackWrapGap';
-
-// In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
-import { jsx as _jsx } from "react/jsx-runtime";
-const cssSupports = (property, value) => {
-  var _window$CSS;
-  return Platform.OS === 'web' && typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(property, value);
-};
-
-// CSS.supports needs an example of the type of value you intend to use.
-// Will be an integer appended `px` after hooks and JSX styles are resolved.
-const exampleGapValue = '1px';
-
-/**
- * StackWrap is an alternative to StackView where the spaced items are allowed to wrap.
- *
- * As well as providing space between the items, StackWrap provides `gap` space between
- * wrapped lines of items. By default, this `gap` is the same as the gap between spaced items.
- * If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
- */
-const StackWrap = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const [canUseCSSGap, setCanUseCSSGap] = React.useState(false);
-  const {
-    space
-  } = props;
-  // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
-  const gap = props.gap ?? space;
-  const gapEqualsSpace = gap === space;
-
-  // If possible, use the cleaner implementation that applies CSS `gap` styles to the container,
-  // preserving direct parent-child relationships between the container and each item, which
-  // can result in clearer descriptions on some screen readers (e.g. radio "X of Y" on MacOS).
-  // Else, use the fallback implementation which renders a `Box` component around each child.
-  const Component = canUseCSSGap ? StackWrapGap : StackWrapBox;
-  // In SSR, the type of implementation must match the server during hydration, but
-  // the server can't know if gap is supported, so never use it until after hydration.
-  useSafeLayoutEffect(() => {
-    setCanUseCSSGap(gapEqualsSpace && cssSupports('gap', exampleGapValue));
-  }, [gapEqualsSpace]);
-  return /*#__PURE__*/_jsx(Component, {
-    ref: ref,
-    ...props
-  });
-});
-StackWrap.displayName = 'StackWrap';
-StackWrap.propTypes = StackWrapBox.propTypes;
-export default StackWrap;