@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/MultiSelectFilter/ModalOverlay.js

@@ -1,156 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Platform from "react-native-web/dist/exports/Platform";
-import { Portal } from '@gorhom/portal';
-import { useCopy, copyPropTypes, getTokensPropType, variantProp } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import dictionary from './dictionary';
-import Card from '../Card';
-import IconButton from '../IconButton';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const staticStyles = StyleSheet.create({
-  positioner: {
-    flex: 1,
-    // Grow to maxWidth when possible, shrink when not possible
-    zIndex: 10000,
-    // Position on top of all the other overlays, including backdrops and modals,
-    elevation: 10000,
-    // Position on top of all the other overlays, including backdrops and modals,
-    borderRadius: 4,
-    ...Platform.select({
-      web: {
-        boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 8px 0px'
-      },
-      default: {
-        shadowColor: 'rgba(0, 0, 0, 0.1)',
-        shadowOffset: {
-          width: 0,
-          height: 4
-        },
-        shadowOpacity: 1,
-        shadowRadius: 8
-      }
-    })
-  },
-  card: {
-    paddingLeft: 0,
-    paddingRight: 0,
-    paddingTop: 0,
-    paddingBottom: 0
-  },
-  closeButtonContainer: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    zIndex: 1
-  },
-  hidden: {
-    // Use opacity not visibility to hide the dropdown during positioning
-    // so on web, children may be focused from the first render
-    opacity: 0
-  }
-});
-const selectContainerStyle = (enableFullscreen, themeTokens) => ({
-  borderColor: themeTokens.borderColor,
-  ...Platform.select({
-    web: {
-      position: enableFullscreen ? 'fixed' : 'absolute'
-    },
-    default: {
-      position: 'absolute'
-    }
-  })
-});
-const selectCloseButtonContainerStyles = _ref => {
-  let {
-    paddingRight,
-    paddingTop
-  } = _ref;
-  return {
-    paddingRight,
-    paddingTop
-  };
-};
-const ModalOverlay = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    children,
-    isReady = false,
-    maxHeight,
-    maxHeightSize,
-    maxWidthSize,
-    minHeight,
-    minWidth,
-    overlaidPosition,
-    onLayout,
-    variant,
-    tokens,
-    copy,
-    onClose,
-    enableFullscreen = false
-  } = _ref2;
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Modal', tokens, variant, {
-    viewport,
-    maxWidth: false
-  });
-  const containerWidthHeight = {
-    minWidth: tokens.maxWidth ? maxWidthSize : minWidth,
-    minHeight: maxHeight ? maxHeightSize : minHeight,
-    maxWidth: maxWidthSize,
-    maxHeight: maxHeightSize
-  };
-  const {
-    closeIcon: CloseIconComponent
-  } = themeTokens;
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const closeLabel = getCopy('closeButton');
-  return /*#__PURE__*/_jsx(Portal, {
-    children: /*#__PURE__*/_jsx(View, {
-      ref: ref,
-      onLayout: onLayout,
-      style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden, selectContainerStyle(enableFullscreen, themeTokens)],
-      children: /*#__PURE__*/_jsxs(Card, {
-        tokens: staticStyles.card,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
-          children: /*#__PURE__*/_jsx(IconButton, {
-            onPress: onClose,
-            icon: CloseIconComponent,
-            accessibilityRole: "button",
-            accessibilityLabel: closeLabel
-          })
-        }), children]
-      })
-    })
-  });
-});
-ModalOverlay.displayName = 'ModalOverlay';
-ModalOverlay.propTypes = {
-  children: PropTypes.node.isRequired,
-  isReady: PropTypes.bool,
-  overlaidPosition: PropTypes.shape({
-    top: PropTypes.number,
-    left: PropTypes.number,
-    width: PropTypes.number
-  }),
-  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  maxHeightSize: PropTypes.number,
-  maxWidthSize: PropTypes.number,
-  maxHeight: PropTypes.bool,
-  maxWidth: PropTypes.bool,
-  onLayout: PropTypes.func,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('Modal'),
-  copy: copyPropTypes,
-  onClose: PropTypes.func,
-  enableFullscreen: PropTypes.bool
-};
-export default ModalOverlay;

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -1,526 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Dimensions from "react-native-web/dist/exports/Dimensions";
-import SafeAreaView from "react-native-web/dist/exports/SafeAreaView";
-import Platform from "react-native-web/dist/exports/Platform";
-import ScrollView from "react-native-web/dist/exports/ScrollView";
-import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider';
-import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useOverlaidPosition, useCopy, useMultipleInputValues, useResponsiveProp, variantProp, useScrollBlocking } from '../utils';
-import defaultDictionary from './dictionary';
-import { useViewport } from '../ViewportProvider';
-import Box from '../Box';
-import { Button, ButtonDropdown } from '../Button';
-import { CheckboxGroup } from '../Checkbox';
-import Divider from '../Divider';
-import FlexGrid from '../FlexGrid';
-import Spacer from '../Spacer';
-import StackView from '../StackView';
-import Typography from '../Typography';
-import { TextButton } from '../Link';
-import ModalOverlay from './ModalOverlay';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  Col,
-  Row
-} = FlexGrid;
-const selectSubTitleTokens = _ref => {
-  let {
-    subtitleColor
-  } = _ref;
-  return {
-    color: subtitleColor
-  };
-};
-const selectDividerTokens = _ref2 => {
-  let {
-    dividerColor
-  } = _ref2;
-  return {
-    color: dividerColor
-  };
-};
-const selectHeaderTokens = _ref3 => {
-  let {
-    contentMarginLeft,
-    contentMarginRight,
-    contentMarginTop,
-    contentPaddingLeft,
-    contentPaddingRight
-  } = _ref3;
-  return {
-    marginLeft: contentMarginLeft,
-    marginRight: contentMarginRight,
-    marginTop: contentMarginTop,
-    paddingLeft: contentPaddingLeft,
-    paddingRight: contentPaddingRight,
-    flexGrow: 1
-  };
-};
-const selectControlsTokens = _ref4 => {
-  let {
-    contentMarginBottom,
-    contentMarginLeft,
-    contentMarginRight,
-    contentPaddingLeft,
-    contentPaddingRight
-  } = _ref4;
-  return {
-    marginBottom: contentMarginBottom,
-    marginLeft: contentMarginLeft,
-    marginRight: contentMarginRight,
-    paddingLeft: contentPaddingLeft,
-    paddingRight: contentPaddingRight
-  };
-};
-const selectContainerStyle = (windowHeight, windowWidth) => ({
-  height: windowHeight,
-  width: windowWidth
-});
-const TOTAL_COLUMNS = 12;
-const MAX_ITEMS_THRESHOLD = 12;
-const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
-  let {
-    label,
-    subtitle,
-    id = label,
-    variant,
-    tokens,
-    items = [],
-    values,
-    maxHeight = false,
-    initialValues,
-    maxValues,
-    onChange,
-    onConfirm = () => {},
-    onCancel = () => {},
-    onOpen = () => {},
-    copy = 'en',
-    readOnly = false,
-    inactive = false,
-    rowLimit = 12,
-    dictionary = defaultDictionary,
-    ...rest
-  } = _ref5;
-  const viewport = useViewport();
-  const {
-    currentValues,
-    setValues
-  } = useMultipleInputValues({
-    initialValues,
-    values,
-    maxValues,
-    onChange,
-    readOnly
-  });
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [checkedIds, setCheckedIds] = React.useState(currentValues ?? []);
-  const [maxWidth, setMaxWidth] = React.useState(false);
-  const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant);
-  const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant);
-  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const colSizeNotMobile = items.length > rowLimit ? 2 : 1;
-  const colSize = viewport !== 'xs' ? colSizeNotMobile : 1;
-  const itemsLengthNotMobile = items.length > 24 ? items.length / 2 : rowLimit;
-  const isSelected = currentValues.length > 0;
-  const rowLength = viewport !== 'xs' ? itemsLengthNotMobile : items.length;
-  React.useEffect(() => {
-    if (colSize === 1) return setMaxWidth(false);
-    return colSize === 2 && setMaxWidth(true);
-  }, [colSize]);
-  React.useEffect(() => setCheckedIds(currentValues ?? []), [currentValues]);
-  const {
-    headerFontColor,
-    headerFontSize,
-    buttonDirection,
-    headerFontWeight,
-    headerLineHeight,
-    subHeaderFontWeight,
-    subHeaderFontSize,
-    maxHeightSize,
-    maxWidthSize,
-    subHeaderLineHeight,
-    minHeight,
-    minWidth,
-    ...restTokens
-  } = useThemeTokens('MultiSelectFilter', tokens, {
-    ...variant,
-    maxHeight,
-    maxWidth
-  }, {
-    viewport
-  });
-  const uniqueFields = ['id', 'label'];
-  if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
-  }
-  // Pass an object of relevant component state as first argument for any passed-in press handlers
-  const pressHandlers = getPressHandlersWithArgs(rest, [{
-    id,
-    label,
-    currentValues
-  }]);
-  const handleChange = event => {
-    if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
-    if (isOpen) onOpen();
-    setIsOpen(!isOpen);
-  };
-  const onApply = e => {
-    setValues(e);
-    setIsOpen(false);
-    onConfirm(e);
-  };
-  const onClear = () => {
-    setCheckedIds(() => []);
-    setValues([]);
-    setIsOpen(false);
-    onCancel();
-  };
-  const onClose = () => {
-    setIsOpen(false);
-    onCancel();
-  };
-  const {
-    align,
-    offsets
-  } = useResponsiveProp({
-    xs: {
-      align: {
-        top: 'top',
-        left: 'left'
-      }
-    },
-    sm: {
-      align: {
-        top: 'bottom',
-        left: 'left'
-      },
-      offsets: {
-        vertical: 4
-      }
-    }
-  });
-  const headerStyles = applyTextStyles({
-    fontSize: headerFontSize,
-    fontWeight: headerFontWeight,
-    fontColor: headerFontColor
-  });
-  const subeHeaderStyles = applyTextStyles({
-    fontSize: subHeaderFontSize,
-    fontWeight: subHeaderFontWeight,
-    fontColor: selectSubTitleTokens(themeTokens)
-  });
-  const {
-    overlaidPosition,
-    onTargetLayout,
-    isReady,
-    sourceRef
-  } = useOverlaidPosition({
-    isShown: isOpen,
-    offsets,
-    align
-  });
-  const [isScrolling, setIsScrolling] = React.useState(false);
-  const [scrollViewHeight, setScrollViewHeight] = React.useState(0);
-  const [rowHeight, setRowHeight] = React.useState(0);
-  const modalRef = useScrollBlocking(isOpen);
-  const windowWidth = Dimensions.get('window').width;
-  const windowHeight = Dimensions.get('window').height;
-  React.useEffect(() => {
-    if (rowHeight > scrollViewHeight) {
-      setIsScrolling(true);
-    } else {
-      setIsScrolling(false);
-    }
-  }, [scrollViewHeight, rowHeight]);
-  const handleScrollViewLayout = event => {
-    const {
-      height
-    } = event.nativeEvent.layout;
-    setScrollViewHeight(height);
-  };
-  const handleRowLayout = event => {
-    const {
-      height
-    } = event.nativeEvent.layout;
-    setRowHeight(height);
-  };
-  const headerContent = /*#__PURE__*/_jsxs(View, {
-    style: [selectHeaderTokens(restTokens), styles.container],
-    children: [/*#__PURE__*/_jsx(Row, {
-      children: /*#__PURE__*/_jsx(View, {
-        children: /*#__PURE__*/_jsx(Typography, {
-          tokens: {
-            ...headerStyles,
-            lineHeight: headerLineHeight
-          },
-          children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
-        })
-      })
-    }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Spacer, {
-        space: 4
-      }), /*#__PURE__*/_jsx(Row, {
-        children: /*#__PURE__*/_jsx(Typography, {
-          tokens: {
-            ...subeHeaderStyles,
-            lineHeight: subHeaderLineHeight
-          },
-          children: subtitle
-        })
-      }), /*#__PURE__*/_jsx(Spacer, {
-        space: 4
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.options,
-      children: /*#__PURE__*/_jsx(ScrollView, {
-        onLayout: handleScrollViewLayout,
-        children: /*#__PURE__*/_jsx(Row, {
-          distribute: "between",
-          onLayout: handleRowLayout,
-          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/_jsxs(Col, {
-            xs: TOTAL_COLUMNS / colSize,
-            children: [/*#__PURE__*/_jsx(CheckboxGroup, {
-              items: items.slice(i * rowLength, (i + 1) * rowLength),
-              checkedIds: checkedIds,
-              onChange: e => setCheckedIds(e, i)
-            }), /*#__PURE__*/_jsx(Spacer, {
-              size: 4
-            })]
-          }, i))
-        })
-      })
-    })]
-  });
-  const controlsContent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [isScrolling ? /*#__PURE__*/_jsx(Divider, {
-      tokens: selectDividerTokens(themeTokens),
-      space: 4
-    }) : /*#__PURE__*/_jsx(Spacer, {
-      space: 4
-    }), /*#__PURE__*/_jsx(View, {
-      style: selectControlsTokens(restTokens),
-      children: /*#__PURE__*/_jsx(Row, {
-        horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
-        children: /*#__PURE__*/_jsxs(StackView, {
-          direction: buttonDirection,
-          space: 3,
-          tokens: {
-            alignItems: 'center',
-            ...(viewport === 'xs' && {
-              flexGrow: 1
-            })
-          },
-          children: [/*#__PURE__*/_jsx(Button, {
-            onPress: () => onApply(checkedIds),
-            variant: {
-              priority: 'high',
-              ...(viewport === 'xs' && {
-                width: 'full'
-              })
-            },
-            children: getCopy('applyButtonLabel')
-          }), /*#__PURE__*/_jsx(Box, {
-            children: /*#__PURE__*/_jsx(TextButton, {
-              onPress: onClear,
-              children: getCopy('clearButtonLabel')
-            })
-          })]
-        })
-      })
-    })]
-  });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ButtonDropdown, {
-      ref: sourceRef,
-      ...pressHandlers,
-      value: isOpen,
-      selected: isSelected,
-      label: label,
-      onChange: handleChange,
-      tokens: getButtonTokens,
-      inactive: inactive
-    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/_jsx(ModalOverlay, {
-      overlaidPosition: {
-        top: 0,
-        left: 0
-      },
-      onClose: onClose,
-      maxHeight: true,
-      maxHeightSize: windowHeight,
-      maxWidthSize: windowWidth,
-      minHeight: windowHeight,
-      minWidth: windowWidth,
-      tokens: {
-        ...tokens,
-        maxWidth: true
-      },
-      copy: copy,
-      isReady: isReady,
-      onLayout: onTargetLayout,
-      ref: modalRef,
-      enableFullscreen: true,
-      children: /*#__PURE__*/_jsxs(SafeAreaView, {
-        style: [selectContainerStyle(windowHeight, windowWidth), styles.content],
-        ref: ref,
-        children: [headerContent, /*#__PURE__*/_jsx(View, {
-          style: styles.controls,
-          children: controlsContent
-        })]
-      })
-    }), isOpen && viewport !== 'xs' && /*#__PURE__*/_jsxs(ModalOverlay, {
-      overlaidPosition: overlaidPosition,
-      onClose: onClose,
-      maxHeight: items.length > MAX_ITEMS_THRESHOLD ? true : maxHeight,
-      maxHeightSize: maxHeightSize,
-      maxWidthSize: maxWidthSize,
-      minHeight: minHeight,
-      minWidth: minWidth,
-      tokens: {
-        ...tokens,
-        maxWidth: items.length > MAX_ITEMS_THRESHOLD ? true : maxWidth
-      },
-      copy: copy,
-      isReady: isReady,
-      onLayout: onTargetLayout,
-      ref: ref,
-      children: [headerContent, controlsContent]
-    })]
-  });
-});
-MultiSelectFilter.displayName = 'MultiSelectFilter';
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  controls: Platform.select({
-    web: {},
-    default: {
-      flex: 0.35
-    }
-  }),
-  content: {
-    flex: 1,
-    justifyContent: 'space-between',
-    backgroundColor: 'transparent'
-  },
-  options: {
-    flex: 1
-  }
-});
-
-// If a language dictionary entry is provided, it must contain every key
-const dictionaryContentShape = PropTypes.shape({
-  filterByLabel: PropTypes.string.isRequired,
-  applyButtonLabel: PropTypes.string.isRequired,
-  clearButtonLabel: PropTypes.string.isRequired
-});
-MultiSelectFilter.propTypes = {
-  /**
-   * The text displayed to the user in a ButtonDropdown.
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * The text for the subtitle
-   */
-  subtitle: PropTypes.string,
-  /**
-   * An optional unique string may be provided to identify the ButtonDropdown.
-   * If not provided, the label is used.
-   */
-  id: PropTypes.string,
-  /**
-   * Sets the variant for ButtonDropdown element.
-   */
-  variant: variantProp.propType,
-  /**
-   * Sets the tokens for MultiSelectFilter element.
-   */
-  tokens: getTokensPropType('MultiSelectFilter'),
-  /**
-   * The options a user may select.
-   */
-  items: PropTypes.arrayOf(PropTypes.shape({
-    /**
-     * The text displayed to the user with a checkbox, describing this option.
-     */
-    label: PropTypes.string.isRequired,
-    /**
-     * An optional unique string may be provided to identify this option.
-     * If not provided, the label is used.
-     */
-    id: PropTypes.string
-  })),
-  /**
-   * If the selected item(s) in the checkbox group(s) 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 MultiSelectFilter 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 MultiSelectFilter 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),
-  /**
-   * If provided, sets a maximum number of items a user may select at once.
-   */
-  maxValues: PropTypes.number,
-  /**
-   * If provided sets maxHeight to be active
-   */
-  maxHeight: PropTypes.bool,
-  /**
-   * 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 provided, this function is called when the selection is confirmed.
-   */
-  onConfirm: PropTypes.func,
-  /**
-   * If provided, this function is called when the modal with options is opened.
-   * */
-  onOpen: PropTypes.func,
-  /**
-   * If provided, this function is called when `MultiSelectFilter` is closed.
-   * */
-  onCancel: PropTypes.func,
-  /**
-   * Select English or French copy for the accessible label.
-   */
-  copy: PropTypes.oneOf(['en', 'fr']),
-  /**
-   * Custom dictionary containing the labels
-   */
-  dictionary: PropTypes.shape({
-    en: dictionaryContentShape,
-    fr: dictionaryContentShape
-  }),
-  /**
-   * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
-   */
-  readOnly: PropTypes.string,
-  /**
-   * If true, the MultiSelectFilter cannot be interacted with, ButtonDropdown is
-   * set as `disabled` and if the theme supports `inactive` appearances rules, these
-   * are applied.
-   */
-  inactive: PropTypes.string,
-  /**
-   * Sets the maximum number of items in one column. If number of items are more
-   * than the `rowLimit`, they will be rendered in 2 columns.
-   */
-  rowLimit: PropTypes.number
-};
-export default MultiSelectFilter;

package/lib-module/MultiSelectFilter/dictionary.js

@@ -1,12 +0,0 @@
-export default {
-  en: {
-    filterByLabel: 'Filter by %{filterCategory}:',
-    applyButtonLabel: 'Apply',
-    clearButtonLabel: 'Clear'
-  },
-  fr: {
-    filterByLabel: 'Filtrer par %{filterCategory}:',
-    applyButtonLabel: 'Appliquer',
-    clearButtonLabel: 'Effacer'
-  }
-};

package/lib-module/MultiSelectFilter/index.js

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