@telus-uds/components-base 1.8.0 → 1.8.3

package/lib-module/Search/dictionary.js

@@ -1,12 +0,0 @@
-export default {
-  en: {
-    accessibilityLabel: 'Search',
-    clearButtonAccessibilityLabel: 'Clear',
-    submitButtonAccessibilityLabel: 'Search'
-  },
-  fr: {
-    accessibilityLabel: 'Chercher',
-    clearButtonAccessibilityLabel: 'Effacer',
-    submitButtonAccessibilityLabel: 'Chercher'
-  }
-};

package/lib-module/Search/index.js

@@ -1,2 +0,0 @@
-import Search from './Search';
-export default Search;

package/lib-module/Select/Group.js

@@ -1,20 +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 = ({
-  children,
-  label
-}) => {
-  return /*#__PURE__*/_jsx("optgroup", {
-    label: label,
-    children: children
-  });
-};
-
-export default Group;
-Group.propTypes = {
-  children: componentPropType('Item'),
-  label: PropTypes.string.isRequired
-};

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

@@ -1,14 +0,0 @@
-import PropTypes from 'prop-types';
-import { componentPropType } from '../utils';
-
-const Group = ({
-  children
-}) => {
-  return children;
-};
-
-export default Group;
-Group.propTypes = {
-  children: componentPropType('Item'),
-  label: PropTypes.string.isRequired
-};

package/lib-module/Select/Item.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const Item = ({
-  children,
-  value
-}) => /*#__PURE__*/_jsx("option", {
-  value: value,
-  children: children
-});
-
-export default Item;
-Item.propTypes = {
-  children: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired
-};

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

@@ -1,9 +0,0 @@
-import PropTypes from 'prop-types';
-
-const Item = () => null;
-
-export default Item;
-Item.propTypes = {
-  children: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired
-};

package/lib-module/Select/Picker.js

@@ -1,67 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { componentPropType } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const Picker = /*#__PURE__*/forwardRef(({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  onMouseOver,
-  onMouseOut,
-  style,
-  inactive,
-  children,
-  placeholder,
-  nativeID,
-  testID,
-  ...rest
-}, ref) => {
-  const {
-    accessibilityLabel,
-    accessibilityDescribedBy,
-    accessibilityInvalid
-  } = rest;
-  return /*#__PURE__*/_jsxs("select", {
-    ref: ref,
-    style: style,
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    disabled: inactive,
-    value: value || (placeholder !== undefined ? placeholder.value : undefined),
-    onChange: event => onChange(event.target.value, event),
-    id: nativeID,
-    "aria-label": accessibilityLabel,
-    "aria-describedby": accessibilityDescribedBy,
-    "aria-invalid": accessibilityInvalid,
-    "data-testid": testID,
-    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 = {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseOver: PropTypes.func,
-  onMouseOut: 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,110 +0,0 @@
-import React, { forwardRef, Children } 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'; // 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 = ({
-  height = 0,
-  paddingBottom = 0,
-  paddingTop = 0,
-  borderWidth = 0,
-  color
-}) => ({
-  height: height - paddingTop - paddingBottom - 2 * borderWidth,
-  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 = ({
-  paddingLeft = 0,
-  paddingRight = 0,
-  ...rest
-}) => ({
-  paddingLeft: paddingLeft > 8 ? paddingLeft - 8 : 0,
-  paddingRight: paddingRight > 8 ? paddingRight - 8 : 0,
-  ...rest
-});
-
-const Picker = /*#__PURE__*/forwardRef(({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  style,
-  inactive,
-  children,
-  placeholder,
-  ...rest
-}, ref) => {
-  // ungroup items, since there's no way to support groups on native
-  const flatChildren = Children.toArray(children).flatMap(child => {
-    if (child.type === Group) {
-      return child.props.children;
-    }
-
-    return child;
-  });
-  const items = flatChildren.map(({
-    props
-  }) => ({
-    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,316 +0,0 @@
-import React, { forwardRef, useState } 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 } from '../ThemeProvider';
-import { a11yProps, componentPropType, getTokensPropType, inputSupportsProps, selectSystemProps, useInputValue, variantProp, viewProps } from '../utils';
-import Picker from './Picker';
-import InputSupports from '../InputSupports';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, inputSupportsProps, viewProps]);
-
-const selectInputStyles = ({
-  backgroundColor,
-  color,
-  borderWidth = 0,
-  borderColor,
-  borderRadius,
-  paddingTop,
-  paddingBottom,
-  paddingLeft = 0,
-  paddingRight,
-  fontName,
-  fontSize,
-  fontWeight,
-  lineHeight,
-  icon,
-  iconSize = 0,
-  validationIcon,
-  validationIconSize = 0,
-  height
-}, inactive) => {
-  // 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
-  });
-  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 = ({
-  outerBackgroundColor,
-  outerBorderWidth,
-  outerBorderColor,
-  borderRadius
-}) => ({
-  background: outerBackgroundColor,
-  ...applyOuterBorder({
-    outerBorderColor,
-    outerBorderWidth,
-    borderRadius
-  })
-});
-
-const selectIconTokens = ({
-  iconSize,
-  iconColor
-}) => ({
-  size: iconSize,
-  color: iconColor
-});
-
-const selectIconContainerStyles = ({
-  paddingRight,
-  paddingBottom
-}) => ({
-  paddingRight,
-  paddingBottom
-});
-
-const selectValidationIconTokens = ({
-  validationIconSize,
-  validationIconColor
-}) => ({
-  size: validationIconSize,
-  color: validationIconColor
-});
-
-const selectValidationIconContainerStyles = ({
-  icon,
-  iconSize = 0,
-  paddingRight = 0,
-  paddingBottom
-}) => ({
-  paddingRight: icon ? paddingRight + iconSize : paddingRight,
-  paddingBottom
-});
-/**
- * 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__*/forwardRef(({
-  value,
-  initialValue,
-  onChange,
-  children,
-  inactive,
-  readOnly,
-  placeholder,
-  validation,
-  tokens,
-  variant,
-  testID,
-  ...rest
-}, ref) => {
-  const {
-    currentValue,
-    setValue
-  } = useInputValue({
-    value,
-    initialValue,
-    onChange,
-    readOnly
-  });
-  const [isFocused, setIsFocused] = useState(false);
-
-  const handleFocus = () => setIsFocused(true);
-
-  const handleBlur = () => setIsFocused(false);
-
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleMouseOver = () => setIsHovered(true);
-
-  const handleMouseOut = () => setIsHovered(false);
-
-  const {
-    supportsProps,
-    ...selectedProps
-  } = selectProps(rest);
-  const themeTokens = useThemeTokens('Select', tokens, variant, {
-    focus: isFocused,
-    hover: isHovered,
-    inactive,
-    validation
-  });
-  const {
-    icon: IconComponent,
-    validationIcon: ValidationIconComponent
-  } = themeTokens;
-  return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
-    ...selectedProps,
-    children: ({
-      inputId,
-      ...props
-    }) => /*#__PURE__*/_jsxs(View, {
-      style: selectOuterBorderStyles(themeTokens),
-      children: [/*#__PURE__*/_jsx(Picker, {
-        ref: ref,
-        style: selectInputStyles(themeTokens, inactive),
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onMouseOver: handleMouseOver,
-        onMouseOut: handleMouseOut,
-        onChange: setValue,
-        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/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;