@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/Select/Group.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { componentPropType } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const Group = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    label
-  } = _ref;
-  return /*#__PURE__*/_jsx("optgroup", {
-    label: label,
-    ref: ref,
-    children: children
-  });
-});
-Group.displayName = 'Group';
-export default Group;
-Group.propTypes = {
-  children: componentPropType('Item'),
-  /**
-   * The label for the group.
-   */
-  label: PropTypes.string.isRequired
-};

package/lib-module/Select/Group.native.js

@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types';
-import { componentPropType } from '../utils';
-const Group = _ref => {
-  let {
-    children
-  } = _ref;
-  return children;
-};
-export default Group;
-Group.propTypes = {
-  children: componentPropType('Item'),
-  /**
-   * The label for the group.
-   */
-  label: PropTypes.string.isRequired
-};

package/lib-module/Select/Item.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    value
-  } = _ref;
-  return /*#__PURE__*/_jsx("option", {
-    value: value,
-    ref: ref,
-    children: children
-  });
-});
-Item.displayName = 'Item';
-export default Item;
-Item.propTypes = {
-  children: PropTypes.string.isRequired,
-  /**
-   * The value of the option
-   */
-  value: PropTypes.string.isRequired
-};

package/lib-module/Select/Item.native.js

@@ -1,2 +0,0 @@
-const Item = () => null;
-export default Item;

package/lib-module/Select/Picker.js

@@ -1,97 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { componentPropType, selectSystemProps, htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { 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 ? void 0 : onMouseOut();
-        onClose === null || onClose === void 0 ? 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-module/Select/Picker.native.js

@@ -1,120 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
-import NativePicker from 'react-native-picker-select';
-import { a11yProps, componentPropType } from '../utils';
-import Group from './Group';
-import { ANDROID_HEIGHT_OFFSET, ANDROID_HORIZONTAL_PADDING_OFFSET, ANDROID_DEFAULT_PADDING } from './constants';
-
-// Styling of the native input is very limited, most of the styles have to be applied to an additional View
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-const selectAndroidInputStyles = _ref => {
-  let {
-    height = 0,
-    color
-  } = _ref;
-  return {
-    height,
-    paddingBottom: 0,
-    paddingTop: 0,
-    color
-  };
-};
-
-// The native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
-const selectAndroidContainerStyles = _ref2 => {
-  let {
-    paddingLeft = ANDROID_DEFAULT_PADDING,
-    paddingRight = ANDROID_DEFAULT_PADDING,
-    ...rest
-  } = _ref2;
-  return {
-    ...rest,
-    paddingLeft: paddingLeft > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingLeft - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
-    paddingRight: paddingRight > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingRight - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
-    paddingBottom: ANDROID_DEFAULT_PADDING,
-    paddingTop: ANDROID_DEFAULT_PADDING,
-    height: rest.height + ANDROID_HEIGHT_OFFSET
-  };
-};
-const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    value,
-    onChange,
-    onFocus,
-    onBlur,
-    style,
-    inactive,
-    children,
-    placeholder,
-    ...rest
-  } = _ref3;
-  // Ungroup items, since there's no way to support groups on native
-  const flatChildren = React.Children.toArray(children).flatMap(child => {
-    if (child.type === Group) {
-      return child.props.children;
-    }
-    return child;
-  });
-  const items = flatChildren.map(_ref4 => {
-    let {
-      props
-    } = _ref4;
-    return {
-      label: props.children,
-      value: props.value
-    };
-  });
-
-  // Unlike other input components, react-native-picker-select doesn't pass an event to its change fn.
-  const handleChange = (newValue, index) => {
-    if (onChange) onChange(newValue, {
-      // TODO: see if it's possible to pass a real React SyntheticEvent here. For now, just pass an
-      // object with a shape where if an onChange deconstructs `event.nativeEvent`, it won't crash.
-      nativeEvent: {
-        index,
-        value: newValue
-      }
-    });
-  };
-  const picker = /*#__PURE__*/_jsx(NativePicker, {
-    pickerProps: {
-      ref
-    },
-    touchableWrapperProps: a11yProps.select(rest),
-    onOpen: onFocus,
-    onClose: onBlur,
-    disabled: inactive,
-    items: items,
-    value: value,
-    onValueChange: handleChange,
-    style: {
-      inputIOS: style,
-      inputAndroid: selectAndroidInputStyles(style)
-    },
-    placeholder: placeholder !== undefined ? placeholder : {}
-  });
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: Platform.OS === 'android' ? /*#__PURE__*/_jsx(View, {
-      style: selectAndroidContainerStyles(style),
-      children: picker
-    }) : picker
-  });
-});
-Picker.displayName = 'Picker';
-export default Picker;
-Picker.propTypes = {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  style: PropTypes.object,
-  inactive: PropTypes.bool,
-  children: componentPropType(['Item', 'Group']),
-  placeholder: PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string
-  })
-};

package/lib-module/Select/Select.js

@@ -1,337 +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 StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens, applyOuterBorder, useTheme } from '../ThemeProvider';
-import { a11yProps, componentPropType, getTokensPropType, inputSupportsProps, selectSystemProps, useInputValue, variantProp, viewProps, htmlAttrs } from '../utils';
-import Picker from './Picker';
-import InputSupports from '../InputSupports';
-import { ANDROID_VALIDATION_ICON_CONTAINER_OFFSET } from './constants';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, inputSupportsProps, viewProps, htmlAttrs]);
-const selectInputStyles = (_ref, themeOptions, inactive) => {
-  let {
-    backgroundColor,
-    color,
-    borderWidth = 0,
-    borderColor,
-    borderRadius,
-    paddingTop,
-    paddingBottom,
-    paddingLeft = 0,
-    paddingRight,
-    fontName,
-    fontSize,
-    fontWeight,
-    lineHeight,
-    icon,
-    iconSize = 0,
-    validationIcon,
-    validationIconSize = 0,
-    height
-  } = _ref;
-  // Subtract border width from padding so overall input width/height doesn't
-  // jump around if the border width changes (avoiding NaN and negative padding)
-  const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
-  const textStyles = applyTextStyles({
-    fontName,
-    fontSize,
-    lineHeight,
-    fontWeight,
-    themeOptions
-  });
-  const webStyles = Platform.select({
-    web: {
-      appearance: 'none',
-      WebkitAppearance: 'none',
-      // since iOS Safari needs a prefix
-      outline: 'none',
-      cursor: inactive ? 'not-allowed' : undefined,
-      opacity: inactive ? 1 : undefined // override Chrome's default fadeout of a disabled select
-    }
-  });
-
-  let paddingWithIcons = paddingRight;
-  if (Platform.OS !== 'android') {
-    if (icon) {
-      paddingWithIcons += iconSize;
-    }
-    if (validationIcon) {
-      paddingWithIcons += validationIconSize;
-    }
-  }
-  return {
-    backgroundColor,
-    color,
-    borderWidth,
-    borderColor,
-    borderRadius,
-    paddingLeft: offsetBorder(paddingLeft),
-    paddingRight: offsetBorder(paddingWithIcons),
-    paddingTop: offsetBorder(paddingTop),
-    paddingBottom: offsetBorder(paddingBottom),
-    height,
-    ...textStyles,
-    ...webStyles
-  };
-};
-const selectOuterBorderStyles = _ref2 => {
-  let {
-    outerBackgroundColor,
-    outerBorderWidth,
-    outerBorderColor,
-    borderRadius
-  } = _ref2;
-  return {
-    background: outerBackgroundColor,
-    ...applyOuterBorder({
-      outerBorderColor,
-      outerBorderWidth,
-      borderRadius
-    })
-  };
-};
-const selectIconTokens = _ref3 => {
-  let {
-    iconSize,
-    iconColor
-  } = _ref3;
-  return {
-    size: iconSize,
-    color: iconColor
-  };
-};
-const selectIconContainerStyles = _ref4 => {
-  let {
-    paddingRight,
-    paddingBottom
-  } = _ref4;
-  return {
-    paddingRight: paddingRight + 4,
-    marginRight: -4,
-    paddingBottom
-  };
-};
-const selectValidationIconTokens = _ref5 => {
-  let {
-    validationIconSize,
-    validationIconColor
-  } = _ref5;
-  return {
-    size: validationIconSize,
-    color: validationIconColor
-  };
-};
-const selectValidationIconContainerStyles = _ref6 => {
-  let {
-    icon,
-    iconSize = 0,
-    paddingRight = 0,
-    paddingBottom
-  } = _ref6;
-  return {
-    paddingRight: icon ? paddingRight + iconSize + 4 : paddingRight,
-    ...(Platform.OS === 'android' ? {
-      paddingBottom: paddingBottom + ANDROID_VALIDATION_ICON_CONTAINER_OFFSET
-    } : {
-      paddingBottom
-    })
-  };
-};
-const selectCustomFeedbackStyles = _ref7 => {
-  let {
-    feedbackBackgroundColor
-  } = _ref7;
-  return {
-    backgroundColor: feedbackBackgroundColor
-  };
-};
-
-/**
- * A basic form single-choice select component. Use in forms or individually to receive user's input.
- *
- * ## Usage criteria
- * - Include a `placeholder` to provide instructions such as "Please select..." as an unselectable option (recommended)
- * - Use when options are between 7-15 (recommended)
- * - For options are 6 and under, use `Radio` groups or `ButtonGroup`.
- * - For options 15 and above, look for alternatives (e.g grouping into categories, or input field with auto-complete etc.)
- *
- * ## Controlled component
- * If it is required that the state of the `Select` be controlled by the application or other external methods,
- * `value` and `onChange` props must be passed to the `Select`.
- * If the `Select` value should not be changed by user input, a `readOnly` prop must be provided.
- *
- * ## Uncontrolled component
- * If it is not necessary to control the `Select` state, you can create one without a value prop.
- * In this case its value can be accessed within the `onChange` callback. Use the `initialValue` prop to set the
- * default value for an uncontrolled `Select`.
- *
- * ## Getting feedback for entered values
- * Use the `feedback` prop to give the user feedback regarding their selection.
- * You can affirm that the user's selection was correct, or highlight errors that must be corrected, using the `validation` prop.
- * Keep feedback text as brief as possible, should be limited to text and links.
- *
- * ## Using a tooltip
- * When a more in-depth explanation is needed to fill out a `Select` properly, the tooltip prop may be used.
- *
- * ## Grouping options
- * `Select` supports option groups. Use a `Select.Group` component to render an `<optgroup>` element with its items.
- * NOTE: this does not work on native platforms - the grouped items will be shown at the same level as the non-grouped items.
- *
- */
-const Select = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
-  let {
-    value,
-    initialValue,
-    onChange,
-    children,
-    inactive,
-    readOnly,
-    placeholder,
-    validation,
-    tokens,
-    variant,
-    testID,
-    ...rest
-  } = _ref8;
-  const {
-    currentValue,
-    setValue
-  } = useInputValue({
-    value,
-    initialValue,
-    onChange,
-    readOnly
-  });
-  const [isFocused, setIsFocused] = React.useState(false);
-  const handleFocus = () => setIsFocused(true);
-  const handleBlur = () => setIsFocused(false);
-  const [isHovered, setIsHovered] = React.useState(false);
-  const handleMouseOver = () => setIsHovered(true);
-  const handleMouseOut = () => setIsHovered(false);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const {
-    supportsProps,
-    ...selectedProps
-  } = selectProps(rest);
-  const themeTokens = useThemeTokens('Select', tokens, variant, {
-    focus: isFocused,
-    hover: isHovered,
-    inactive,
-    active: isOpen,
-    validation
-  });
-  const {
-    icon: IconComponent,
-    validationIcon: ValidationIconComponent
-  } = themeTokens;
-  const {
-    themeOptions
-  } = useTheme();
-  return /*#__PURE__*/_jsx(InputSupports, {
-    ...supportsProps,
-    ...selectedProps,
-    validation: validation,
-    feedbackTokens: selectCustomFeedbackStyles(themeTokens),
-    children: _ref9 => {
-      let {
-        inputId,
-        ...props
-      } = _ref9;
-      return /*#__PURE__*/_jsxs(View, {
-        style: selectOuterBorderStyles(themeTokens),
-        children: [/*#__PURE__*/_jsx(Picker, {
-          ref: ref,
-          style: selectInputStyles(themeTokens, themeOptions, inactive),
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          onMouseOver: handleMouseOver,
-          onMouseOut: handleMouseOut,
-          onOpen: () => setIsOpen(true),
-          onClose: () => setIsOpen(false),
-          onChange: e => setValue(e, null),
-          value: currentValue,
-          inactive: inactive,
-          placeholder: placeholder !== undefined ? {
-            label: placeholder,
-            value: ''
-          } : undefined,
-          ...props,
-          nativeID: inputId,
-          testID: testID,
-          children: children
-        }), ValidationIconComponent && /*#__PURE__*/_jsx(View, {
-          pointerEvents: "none",
-          style: [staticStyles.iconContainer, selectValidationIconContainerStyles(themeTokens)],
-          children: /*#__PURE__*/_jsx(ValidationIconComponent, {
-            ...selectValidationIconTokens(themeTokens)
-          })
-        }), IconComponent && Platform.OS !== 'android' &&
-        /*#__PURE__*/
-        // we can't hide the default caret of a native picker on android
-        _jsx(View, {
-          pointerEvents: "none",
-          style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
-          children: /*#__PURE__*/_jsx(IconComponent, {
-            ...selectIconTokens(themeTokens)
-          })
-        })]
-      });
-    }
-  });
-});
-Select.displayName = 'Select';
-Select.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Initial value for the uncontrolled version.
-   */
-  initialValue: PropTypes.string,
-  /**
-   * Current value to be set as selected.
-   */
-  value: PropTypes.string,
-  /**
-   * Callback to be called when the value changes.
-   */
-  onChange: PropTypes.func,
-  /**
-   * An array of items or item groups to be used as options.
-   */
-  children: componentPropType(['Item', 'Group']),
-  /**
-   * Whether the select is disabled.
-   */
-  inactive: PropTypes.bool,
-  /**
-   * Whether the select is read-only.
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * A placeholder to provide instructions (such as "Please select...")
-   * as an unselectable option
-   */
-  placeholder: PropTypes.string,
-  /**
-   * Select tokens.
-   */
-  tokens: getTokensPropType('Select'),
-  /**
-   * Select variant.
-   */
-  variant: variantProp.propType,
-  /**
-   * Dedicated ID for testing.
-   */
-  testID: PropTypes.string
-};
-export default Select;
-const staticStyles = StyleSheet.create({
-  iconContainer: {
-    position: 'absolute',
-    right: 0,
-    bottom: 0
-  }
-});

package/lib-module/Select/constants.js

@@ -1,5 +0,0 @@
-// Because Android
-export const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5;
-export const ANDROID_HEIGHT_OFFSET = 12;
-export const ANDROID_HORIZONTAL_PADDING_OFFSET = 8;
-export const ANDROID_DEFAULT_PADDING = 0;

package/lib-module/Select/index.js

@@ -1,6 +0,0 @@
-import Select from './Select';
-import Group from './Group';
-import Item from './Item';
-Select.Group = Group;
-Select.Item = Item;
-export default Select;