@telus-uds/components-base 1.97.0 → 1.97.1

package/lib-module/Fieldset/Fieldset.js

@@ -1,194 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Feedback from '../Feedback';
-import { getTokensPropType, spacingProps, variantProp } from '../utils';
-import { useThemeTokens } from '../ThemeProvider';
-import FieldsetContainer from './FieldsetContainer';
-import { getStackedContent } from '../StackView';
-import InputLabel from '../InputLabel';
-import useInputSupports from '../InputSupports/useInputSupports';
-
-/**
- * An alternative to InputSupports for groups of input elements that, on web, are to be
- * wrapped in a `<fieldset>` tag, with label content displated in a `<legend>` tag.
- *
- * Follows the same theming and most of the same props as InputSupports.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-const Fieldset = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    copy = 'en',
-    space,
-    feedback,
-    feedbackPosition = 'top',
-    validation,
-    showIcon = false,
-    showErrorBorder = false,
-    legend,
-    hint,
-    hintPosition,
-    tooltip,
-    inactive,
-    accessibilityRole,
-    name: fieldsetName,
-    children,
-    variant = {},
-    tokens = {},
-    ...rest
-  } = _ref;
-  /* Fieldset tokenization:
-  - error variant can only be activated by passing showErrorBorder and also having validaton as 'error'
-   */
-  const themeTokens = useThemeTokens('Fieldset', tokens, {
-    error: validation === 'error' && showErrorBorder,
-    ...variant
-  });
-  // Skips `inputId` because a fieldset' legend describes multiple inputs
-  const {
-    hintId,
-    feedbackId,
-    a11yProps
-  } = useInputSupports({
-    feedback,
-    hint,
-    label: legend,
-    validation
-  });
-  const legendContent = legend && /*#__PURE__*/_jsx(InputLabel, {
-    copy: copy,
-    label: legend,
-    hint: hint,
-    hintPosition: hintPosition,
-    hintId: hintId,
-    tooltip: tooltip
-  });
-  const feedbackContent = feedback && /*#__PURE__*/_jsx(Feedback, {
-    id: feedbackId,
-    title: feedback,
-    validation: validation,
-    variant: {
-      icon: showIcon
-    }
-  });
-  const borderStyles = _ref2 => {
-    let {
-      outlineWidth,
-      outlineColor,
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      paddingBottom,
-      paddingRight,
-      paddingTop,
-      paddingLeft,
-      outlineOffset
-    } = _ref2;
-    return {
-      outlineWidth,
-      outlineColor,
-      borderTopLeftRadius: borderTopLeftRadius * 0.1,
-      borderTopRightRadius: borderTopRightRadius * 0.1,
-      borderBottomLeftRadius: borderBottomLeftRadius * 0.1,
-      borderBottomRightRadius: borderBottomRightRadius * 0.1,
-      paddingBottom,
-      paddingRight,
-      paddingTop,
-      paddingLeft,
-      outlineOffset,
-      borderWidth: 0,
-      outlineStyle: validation === 'error' && showErrorBorder ? 'solid' : 'none'
-    };
-  };
-
-  // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
-  // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
-  // fieldset as much as possible, but also allow different spacing within content and between
-  // fieldset / feedback / etc, wrap resolved children in a fragment, and stack with `preserveFragments`.
-  const childContent = /*#__PURE__*/_jsx(_Fragment, {
-    children: typeof children === 'function' ? children(a11yProps) : children
-  });
-  const orderedContent = feedbackPosition === 'bottom' ? [legendContent, feedbackContent, childContent] : [legendContent, childContent, feedbackContent];
-  const stackedContent = getStackedContent(orderedContent, {
-    space,
-    preserveFragments: true
-  });
-  return /*#__PURE__*/_jsx(FieldsetContainer, {
-    ref: ref,
-    inactive: inactive,
-    accessibilityRole: accessibilityRole,
-    name: fieldsetName,
-    borderStyle: borderStyles(themeTokens),
-    showBorderStyle: showErrorBorder,
-    ...rest,
-    children: stackedContent
-  });
-});
-Fieldset.displayName = 'Fieldset';
-Fieldset.propTypes = {
-  variant: variantProp.propType,
-  tokens: getTokensPropType('Fieldset'),
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  /**
-   * Whether the English or French copy will be used (e.g. for accessibility labels).
-   */
-  copy: PropTypes.oneOf(['en', 'fr']),
-  /**
-   * The accessibility role of the `<fieldset>` element itself. Other React Native accessibility
-   * props are not supported because there is not an appropriate counterpart for Fieldsets.
-   */
-  accessibilityRole: PropTypes.string,
-  /**
-   * The amout of space between legend, feedback and content; according  to the theme's spacing scale.
-   * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
-   * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
-   */
-  space: spacingProps.types.spacingValue,
-  /**
-   * The text for the fieldset's legend, describing the fieldset content.
-   */
-  legend: PropTypes.string,
-  /**
-   * A short description of the expected input.
-   */
-  hint: PropTypes.string,
-  /**
-   * Position of the hint relative to label.
-   */
-  hintPosition: PropTypes.oneOf(['inline', 'below']),
-  /**
-   * A detailed description of validation error/success or additional instructions.
-   * Visual variant is determined based on the `validation` prop.
-   */
-  feedback: PropTypes.string,
-  /**
-   * Position of the feedback block relative to the fieldset's content.
-   */
-  feedbackPosition: PropTypes.oneOf(['above', 'below']),
-  /**
-   * If true, the fieldset is treated as inactive (setting `disabled` attribute on web).
-   */
-  inactive: PropTypes.bool,
-  /**
-   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
-   */
-  tooltip: PropTypes.string,
-  /**
-   * On web, this is passed to the `<fieldset>`'s `name` attribute.
-   */
-  name: PropTypes.string,
-  /**
-   * Use to visually mark an input as valid or invalid.
-   */
-  validation: PropTypes.oneOf(['error', 'success']),
-  /**
-   * Use to show error or success icon in the feedback
-   */
-  showIcon: PropTypes.bool,
-  /**
-   * Use to show border in case of error for a group of components
-   */
-  showErrorBorder: PropTypes.bool
-};
-export default Fieldset;

package/lib-module/Fieldset/FieldsetContainer.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cssReset from './cssReset';
-import { selectSystemProps, a11yProps, htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, htmlAttrs]);
-
-/**
- * On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
- */
-const FieldsetContainer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    inactive,
-    accessibilityRole,
-    name: fieldsetName,
-    showBorderStyle = false,
-    borderStyle,
-    style,
-    ...rest
-  } = _ref;
-  // If needs border for error design or reset the component style
-  const styleContainer = showBorderStyle && borderStyle ? borderStyle : cssReset;
-  return /*#__PURE__*/_jsx("fieldset", {
-    ref: ref,
-    disabled: inactive,
-    style: {
-      ...styleContainer,
-      ...style
-    },
-    role: accessibilityRole,
-    name: fieldsetName,
-    ...selectProps(rest),
-    children: children
-  });
-});
-FieldsetContainer.displayName = 'FieldsetContainer';
-FieldsetContainer.propTypes = {
-  ...selectedSystemPropTypes,
-  accessibilityRole: PropTypes.string,
-  children: PropTypes.node,
-  inactive: PropTypes.bool,
-  name: PropTypes.string,
-  showBorderStyle: PropTypes.bool,
-  borderStyle: PropTypes.object,
-  style: PropTypes.object
-};
-export default FieldsetContainer;

package/lib-module/Fieldset/FieldsetContainer.native.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import { selectSystemProps, a11yProps, viewProps } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-// No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
-// If a11y testing finds any additional handling is needed at the container level, add it here.
-const FieldsetContainer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    accessibilityRole,
-    style,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    accessibilityRole: accessibilityRole,
-    ...selectProps(rest),
-    style: style,
-    children: children
-  });
-});
-FieldsetContainer.displayName = 'FieldsetContainer';
-FieldsetContainer.propTypes = {
-  ...selectedSystemPropTypes,
-  children: PropTypes.node,
-  accessibilityRole: PropTypes.string,
-  style: PropTypes.object
-};
-export default FieldsetContainer;

package/lib-module/Fieldset/Legend.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cssReset from './cssReset';
-
-/**
- * On Web, wraps children in HTML `<legend>` tag.
- * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const Legend = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsx("legend", {
-    ref: ref,
-    style: cssReset,
-    children: children
-  });
-});
-Legend.displayName = 'Legend';
-Legend.propTypes = {
-  children: PropTypes.node
-};
-export default Legend;

package/lib-module/Fieldset/Legend.native.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import PropTypes from 'prop-types';
-
-/**
- * On Web, wraps children in HTML `<legend>` tag.
- * On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const Legend = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: staticStyles.stretch,
-    children: children
-  });
-});
-Legend.displayName = 'Legend';
-Legend.propTypes = {
-  children: PropTypes.node
-};
-const staticStyles = StyleSheet.create({
-  stretch: {
-    width: '100%',
-    flexGrow: 1
-  }
-});
-export default Legend;

package/lib-module/Fieldset/cssReset.js

@@ -1,14 +0,0 @@
-// React Native Web has no built-in `fieldset` or `legend` support.
-// This reset makes them consistent with other RNW views.
-// Can't use RN stylesheets because it's not an RN element (RNW's createElement tooling is unstable).
-// Using CSS `all` doesn't work well as an inline style.
-// https://github.com/necolas/react-native-web/issues/1385
-export default {
-  margin: 'unset',
-  padding: 'unset',
-  float: 'unset',
-  border: 'unset',
-  width: 'unset',
-  display: 'flex',
-  flexDirection: 'column'
-};

package/lib-module/Fieldset/index.js

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

package/lib-module/FileUpload/FileUpload.js

@@ -1,329 +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 } from '../ThemeProvider';
-import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy, variantProp, viewProps, convertFromMegaByteToByte } from '../utils';
-import InputLabel from '../InputLabel';
-import { Button } from '../Button';
-import Notification from '../Notification';
-import Spacer from '../Spacer';
-import StackView from '../StackView';
-import NotificationContent from './NotificationContent';
-import dictionary from './dictionary';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const getHintFromFileTypes = fileTypes => {
-  const acceptedFileTypes = fileTypes.map(type => type.toUpperCase());
-  return acceptedFileTypes.reduce((acc, curr, index) => {
-    if (index === 0) {
-      return `${curr}`;
-    }
-    return `${acc}, ${curr}`;
-  }, '');
-};
-const stringifyFileTypesList = (fileTypes, getCopy) => {
-  const acceptedFileTypes = fileTypes.map(type => `.${type.toUpperCase()}`);
-  return acceptedFileTypes.reduce((acc, curr, index) => {
-    if (index === 0) {
-      return curr;
-    }
-    if (index === acceptedFileTypes.length - 1) {
-      return `${acc} ${getCopy('or')} ${curr}`;
-    }
-    return `${acc}, ${curr}`;
-  }, '');
-};
-const selectComponentTokens = (tokens, componentIdentifier) => {
-  return Object.entries(tokens).reduce((acc, _ref) => {
-    let [key, value] = _ref;
-    if (key.startsWith(componentIdentifier) && value !== null) {
-      const newKey = key.replace(componentIdentifier, '').replace('Text', '').charAt(0).toLowerCase() + key.replace(componentIdentifier, '').replace('Text', '').slice(1);
-      acc[newKey] = value;
-    }
-    return acc;
-  }, {});
-};
-
-/**
- * FileUpload component for uploading files.
- *
- * @component
- * @example
- * // Usage:
- * <FileUpload
- *   tokens={tokens}
- *   variant={variant}
- *   copy={copy}
- *   fileTypes={fileTypes}
- *   allowMultipleFiles={allowMultipleFiles}
- *   maxFileSize={maxFileSize}
- *   maxFilesCount={maxFilesCount}
- *   onUpload={onUpload}
- *   onDelete={onDelete}
- *   documentPicker={documentPicker}
- *   {...rest}
- * />
- *
- * @param {Object} props - The component props.
- * @param {Object} props.tokens - The tokens for styling the component.
- * @param {string} props.variant - The variant of the component.
- * @param {string} props.copy - The copy for the component.
- * @param {string[]} props.fileTypes - The allowed file types for upload.
- * @param {boolean} props.allowMultipleFiles - Whether multiple files can be uploaded.
- * @param {number} props.maxFileSize - The maximum file size in megabytes.
- * @param {number} props.maxFilesCount - The maximum number of files that can be uploaded.
- * @param {Function} props.onUpload - The callback function for file upload.
- * @param {Function} props.onDelete - The callback function for file deletion.
- * @param {Object} props.documentPicker - The document picker object.
- * @param {any} props.rest - Additional props to be spread to the component.
- * @returns {JSX.Element} The rendered FileUpload component.
- */
-const FileUpload = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    tokens,
-    variant,
-    copy = 'en',
-    fileTypes,
-    allowMultipleFiles = false,
-    maxFileSize,
-    maxFilesCount = 1,
-    onUpload,
-    onDelete,
-    documentPicker,
-    ...rest
-  } = _ref2;
-  const themeTokens = useThemeTokens('FileUpload', tokens, variant);
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const inputFileRef = React.useRef(null);
-  const [filesStatus, setFilesStatus] = React.useState([]);
-  const [renderTrigger, setRenderTrigger] = React.useState(0);
-  React.useEffect(() => {
-    setRenderTrigger(prev => prev + 1);
-  }, [filesStatus]);
-  const areFileTypesExtensionsValid = files => files.some(file => {
-    const fileExtension = file.name.split('.').pop().toLowerCase();
-    if (!fileTypes.includes(fileExtension)) {
-      setFilesStatus([{
-        description: getCopy('wrongFileType').replace('%{fileType}', stringifyFileTypesList(fileTypes, getCopy)),
-        style: 'error'
-      }]);
-      return false;
-    }
-    return true;
-  });
-  const areFileSizesWithinLimit = files => files.some(file => {
-    if (file.size > convertFromMegaByteToByte(maxFileSize)) {
-      setFilesStatus([{
-        description: getCopy('fileTooBig').replace('%{size}', maxFileSize),
-        style: 'error'
-      }]);
-      return false;
-    }
-    return true;
-  });
-  const areMoreFilesUploadedThanAllowed = files => {
-    if (files.length > maxFilesCount) {
-      setFilesStatus([{
-        description: getCopy('tooManyFiles').replace('%{maxFilesCount}', maxFilesCount),
-        style: 'error'
-      }]);
-      return true;
-    }
-    return false;
-  };
-  const handleFilesUpload = async files => {
-    try {
-      const results = await onUpload(files);
-      const currentFilesStatus = files.map((file, index) => {
-        if (results[index].error) {
-          return {
-            description: /*#__PURE__*/_jsx(NotificationContent, {
-              file: file,
-              color: selectComponentTokens(themeTokens, 'notification').color,
-              children: ` ${getCopy('uploadError')} ${results[index].error}.`
-            }),
-            style: 'error'
-          };
-        }
-        return {
-          description: /*#__PURE__*/_jsx(NotificationContent, {
-            file: file,
-            color: selectComponentTokens(themeTokens, 'notification').color,
-            children: ` ${getCopy('uploadSuccess')}`
-          }),
-          style: 'success',
-          file,
-          onDismiss: () => handleFileDeletion(file)
-        };
-      });
-      setFilesStatus(currentFilesStatus);
-    } catch (error) {
-      setFilesStatus([{
-        description: allowMultipleFiles ? getCopy('problemUploadingMultipleFiles') : getCopy('problemUploading'),
-        style: 'error'
-      }]);
-    }
-  };
-  const handleFileDeletion = async file => {
-    const copyFile = {
-      ...file
-    };
-    try {
-      const result = await onDelete(copyFile);
-      setFilesStatus(prevStatus => {
-        const filteredFilesStatus = prevStatus.filter(f => f.file && f.file.name !== file.name);
-        return result.error ? [...filteredFilesStatus, {
-          description: /*#__PURE__*/_jsx(NotificationContent, {
-            file: file,
-            color: selectComponentTokens(themeTokens, 'notification').color,
-            children: ` ${getCopy('uploadSuccess')}`
-          }),
-          style: 'success',
-          file,
-          onDismiss: () => handleFileDeletion(file)
-        }, {
-          description: /*#__PURE__*/_jsx(NotificationContent, {
-            file: file,
-            color: selectComponentTokens(themeTokens, 'notification').color,
-            children: ` ${getCopy('deleteProblem')} ${result.error}.`
-          }),
-          style: 'error',
-          file
-        }] : filteredFilesStatus;
-      });
-    } catch (error) {
-      setFilesStatus([{
-        description: /*#__PURE__*/_jsx(NotificationContent, {
-          file: file,
-          color: selectComponentTokens(themeTokens, 'notification').color,
-          children: ` ${getCopy('problemDeleting')}`
-        }),
-        style: 'error'
-      }]);
-    }
-  };
-  const handleOnChange = async event => {
-    const targetFiles = event.target.files;
-    const files = Array.from(targetFiles);
-    if (files.length === 0) return;
-    if (fileTypes && !areFileTypesExtensionsValid(files)) return;
-    if (maxFileSize && !areFileSizesWithinLimit(files)) return;
-    if (maxFilesCount && areMoreFilesUploadedThanAllowed(files)) return;
-    await handleFilesUpload(files);
-    if (inputFileRef.current) inputFileRef.current.value = '';
-  };
-  const onFileUploadButtonClick = async () => {
-    if (Platform.OS === 'web') {
-      inputFileRef.current.click();
-    } else {
-      try {
-        const result = await documentPicker.getDocumentAsync({
-          multiple: allowMultipleFiles
-        });
-        if (result) {
-          const files = Array.isArray(result) ? result : [result];
-          if (files.find(file => file.type === 'cancel')) return;
-          const event = {
-            target: {
-              files
-            }
-          };
-          await handleOnChange(event);
-        }
-      } catch (_) {
-        setFilesStatus([{
-          description: allowMultipleFiles ? getCopy('problemUploadingFiles') : getCopy('problemUploading'),
-          style: 'error'
-        }]);
-      }
-    }
-  };
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    ...selectProps(rest),
-    children: [/*#__PURE__*/_jsx(InputLabel, {
-      label: getCopy('label'),
-      hint: fileTypes && getCopy('allowedFileTypes').replace('%{fileTypes}', getHintFromFileTypes(fileTypes)),
-      hintPosition: "below"
-    }), /*#__PURE__*/_jsx(Spacer, {
-      space: 4
-    }), Platform.OS === 'web' && /*#__PURE__*/_jsx("input", {
-      type: "file",
-      multiple: allowMultipleFiles,
-      ref: inputFileRef,
-      hidden: true,
-      accept: fileTypes && fileTypes.map(type => `.${type}`).join(', '),
-      onChange: handleOnChange
-    }), /*#__PURE__*/_jsx(Button, {
-      onClick: onFileUploadButtonClick,
-      tokens: selectComponentTokens(themeTokens, 'button'),
-      children: getCopy('buttonLabel')
-    }), filesStatus.length > 0 && /*#__PURE__*/_jsxs(View, {
-      children: [/*#__PURE__*/_jsx(Spacer, {
-        space: 4
-      }), /*#__PURE__*/_jsx(StackView, {
-        space: 4,
-        children: filesStatus.map((_ref3, index) => {
-          let {
-            description,
-            style,
-            onDismiss
-          } = _ref3;
-          return /*#__PURE__*/_jsx(Notification, {
-            variant: {
-              style
-            },
-            dismissible: !!onDismiss,
-            onDismiss: onDismiss,
-            tokens: selectComponentTokens(themeTokens, 'notification'),
-            children: description
-          }, `${index.toString()}-${renderTrigger}`);
-        })
-      })]
-    })]
-  });
-});
-FileUpload.displayName = 'FileUpload';
-FileUpload.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('FileUpload'),
-  variant: variantProp.propType,
-  /**
-   * To define the locale of the copy
-   */
-  copy: copyPropTypes,
-  /**
-   * The file types allowed for upload. Example: fileTypes={['pdf', 'docx']}.
-   */
-  fileTypes: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * Whether to allow multiple files to be uploaded.
-   */
-  allowMultipleFiles: PropTypes.bool,
-  /**
-   * The maximum file size allowed for upload in MB.
-   */
-  maxFileSize: PropTypes.number,
-  /**
-   * The maximum number of files allowed for upload.
-   */
-  maxFilesCount: PropTypes.number,
-  /**
-   * Callback function called when a file is uploaded.
-   */
-  onUpload: PropTypes.func,
-  /**
-   * Callback function called when a file is deleted
-   */
-  onDelete: PropTypes.func,
-  /**
-   * The document picker to use for mobile
-   */
-  documentPicker: PropTypes.object
-};
-export default FileUpload;