@telus-uds/components-base 2.0.0 → 2.0.2

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -1,53 +1,30 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _utils = require("../utils");
-
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _Button = require("../Button");
-
-var _Checkbox = require("../Checkbox");
-
-var _Divider = _interopRequireDefault(require("../Divider"));
-
-var _FlexGrid = _interopRequireDefault(require("../FlexGrid"));
-
-var _Spacer = _interopRequireDefault(require("../Spacer"));
-
-var _StackView = _interopRequireDefault(require("../StackView"));
-
-var _Typography = _interopRequireDefault(require("../Typography"));
-
-var _Link = require("../Link");
-
-var _ModalOverlay = _interopRequireDefault(require("./ModalOverlay"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   Col,
   Row
-} = _FlexGrid.default;
-
+} = FlexGrid;
 const selectSubTitleTokens = _ref => {
   let {
     subtitleColor
@@ -56,23 +33,54 @@ const selectSubTitleTokens = _ref => {
     color: subtitleColor
   };
 };
-
-const selectDividerToknes = _ref2 => {
+const selectDividerTokens = _ref2 => {
   let {
-    dividerColor,
-    width,
-    decorative = true,
-    weight = 'thin'
+    dividerColor
   } = _ref2;
   return {
-    color: dividerColor,
-    width,
-    decorative,
-    weight
+    color: dividerColor
   };
 };
-
-const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+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,
@@ -81,234 +89,436 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     tokens,
     items = [],
     values,
+    maxHeight = false,
     initialValues,
     maxValues,
     onChange,
+    onConfirm = () => {},
+    onCancel = () => {},
+    onOpen = () => {},
     copy = 'en',
     readOnly = false,
     inactive = false,
     rowLimit = 12,
+    dictionary = defaultDictionary,
     ...rest
-  } = _ref3;
+  } = _ref5;
+  const viewport = useViewport();
   const {
     currentValues,
     setValues
-  } = (0, _utils.useMultipleInputValues)({
+  } = useMultipleInputValues({
     initialValues,
     values,
     maxValues,
     onChange,
     readOnly
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonDropdown', tokens, variant);
-  const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, variant);
-
-  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getItemTokens(buttonState));
-
-  const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+  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 [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const [checkedIds, setCheckedIds] = (0, _react.useState)(currentValues !== null && currentValues !== void 0 ? currentValues : []);
-  const colSize = items.length > rowLimit ? 2 : 1;
+  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 (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error("MultiSelectFilter items must have unique ".concat(uniqueFields.join(', ')));
-  } // Pass an object of relevant component state as first argument for any passed-in press handlers
-
-
-  const pressHandlers = (0, _utils.getPressHandlersWithArgs)(rest, [{
+  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 (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 || pressHandlers.onPress(event);
+    if (isOpen) onOpen();
     setIsOpen(!isOpen);
   };
-
   const onApply = e => {
     setValues(e);
     setIsOpen(false);
+    onConfirm(e);
   };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
-      ref: ref,
-      ...pressHandlers,
-      value: isOpen,
-      selected: isSelected,
-      label: label,
-      onChange: handleChange,
-      tokens: getButtonTokens,
-      inactive: inactive
-    }, id), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
-      variant: {
-        width: colSize > 1 ? 'size576' : 's'
+  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'
       },
-      onClose: () => setIsOpen(false),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-          variant: {
-            size: 'h4'
+      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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
-          space: 5
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-            variant: {
-              size: 'h5'
-            },
-            tokens: selectSubTitleTokens(themeTokens),
-            children: subtitle
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      })
+    }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Spacer, {
         space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-        scroll: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+      }), /*#__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",
-          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Col, {
-            xs: 12 / colSize,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.CheckboxGroup, {
-              items: items.slice(i * rowLimit, (i + 1) * rowLimit),
+          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__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+            }), /*#__PURE__*/_jsx(Spacer, {
               size: 4
             })]
           }, i))
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
-        variant: selectDividerToknes({ ...themeTokens,
-          width: 'full'
-        }),
-        space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
-          direction: "row",
+      })
+    })]
+  });
+  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'
+            alignItems: 'center',
+            ...(viewport === 'xs' && {
+              flexGrow: 1
+            })
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+          children: [/*#__PURE__*/_jsx(Button, {
             onPress: () => onApply(checkedIds),
             variant: {
-              size: 'small',
-              priority: 'high'
+              priority: 'high',
+              ...(viewport === 'xs' && {
+                width: 'full'
+              })
             },
             children: getCopy('applyButtonLabel')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.TextButton, {
-              onPress: () => setCheckedIds([]),
+          }), /*#__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.default.string.isRequired,
-
+  label: PropTypes.string.isRequired,
   /**
    * The text for the subtitle
    */
-  subtitle: _propTypes.default.string,
-
+  subtitle: PropTypes.string,
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.
    */
-  id: _propTypes.default.string,
-
+  id: PropTypes.string,
   /**
    * Sets the variant for ButtonDropdown element.
    */
-  variant: _utils.variantProp.propType,
-
+  variant: variantProp.propType,
   /**
-   * Sets the tokens for ButtonDropdown element.
+   * Sets the tokens for MultiSelectFilter element.
    */
-  tokens: (0, _utils.getTokensPropType)('ButtonDropdown'),
-
+  tokens: getTokensPropType('MultiSelectFilter'),
   /**
    * The options a user may select.
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+  items: PropTypes.arrayOf(PropTypes.shape({
     /**
      * The text displayed to the user with a checkbox, describing this option.
      */
-    label: _propTypes.default.string.isRequired,
-
+    label: PropTypes.string.isRequired,
     /**
      * An optional unique string may be provided to identify this option.
      * If not provided, the label is used.
      */
-    id: _propTypes.default.string
+    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.default.arrayOf(_propTypes.default.string),
-
+  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.default.arrayOf(_propTypes.default.string),
-
+  initialValues: PropTypes.arrayOf(PropTypes.string),
   /**
    * If provided, sets a maximum number of items a user may select at once.
    */
-  maxValues: _propTypes.default.number,
-
+  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.default.func,
-
+  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.default.oneOf(['en', 'fr']),
-
+  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.default.string,
-
+  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.default.string,
-
+  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.default.number
+  rowLimit: PropTypes.number
 };
-var _default = MultiSelectFilter;
-exports.default = _default;
+export default MultiSelectFilter;