@telus-uds/components-base 1.18.1 → 1.19.1

package/lib/Button/ButtonGroup.js

@@ -92,7 +92,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error("ButtonGroup items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
   } // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
 
 

package/lib/Carousel/Carousel.js

@@ -180,7 +180,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselStepTracker.default, {}),
     tag = 'ul',
     accessibilityRole,
-    accessibilityLabel = title,
+    accessibilityLabel,
     accessibilityLiveRegion = 'polite',
     copy,
     ...rest
@@ -445,12 +445,39 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const getCopyWithPlaceholders = _react.default.useCallback(copyKey => {
     const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length); // First word might be a lowercase placeholder: capitalize the first letter
 
-    return "".concat(copyText[0].toUpperCase()).concat(copyText.slice(1));
+    return `${copyText[0].toUpperCase()}${copyText.slice(1)}`;
   }, [activeIndex, childrenArray.length, itemLabel, getCopy, title]);
 
   const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanel.default, {
     items: tabs
   }) : panelNavigation;
+  const isFirstFocusContainer = Boolean(refocus && !skipLinkHref);
+
+  const containerRef = element => {
+    // Apply both firstFocusRef to the container
+    firstFocusRef.current = element; // Also apply forwarded ref if there is one (which could be a function ref)
+
+    if (ref) {
+      if (typeof ref === 'object') {
+        // eslint-disable-next-line no-param-reassign
+        ref.current = element;
+      } else if (typeof ref === 'function') {
+        ref(element);
+      }
+    }
+  }; // If container isn't used for focus, give it a label of title if none is passed in,
+  // otherwise read the current position on focus
+
+
+  const containerAccessibilityLabel = systemProps.accessibilityLabel ?? isFirstFocusContainer ? `${title ? `${title} ` : ''}${getCopyWithPlaceholders('stepTrackerLabel')}` : title;
+  const containerProps = {
+    accessibilityLabel: containerAccessibilityLabel,
+    // If used for focus, attach the ref and draw a focus box around the whole carousel
+    ...(isFirstFocusContainer && {
+      ref: containerRef,
+      focusable: true
+    })
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CarouselContext.CarouselProvider, {
     activeIndex: activeIndex,
     goTo: goTo,
@@ -466,6 +493,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       onLayout: onContainerLayout,
       ref: ref,
       ...systemProps,
+      ...containerProps,
       children: [showPreviousNextNavigation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true),
         testID: "previous-button-container",
@@ -480,12 +508,10 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         ref: firstFocusRef,
         href: skipLinkHref,
         children: getCopyWithPlaceholders('skipLink')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.default // Read the current slide position to screen readers on slide.
+      }), !isFirstFocusContainer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yText.default // Read the current slide position to screen readers on slide.
       // If it's set to refocus and doesn't have a SkipLink to focus to, focus this.
       , {
-        ref: !skipLinkHref && refocus ? firstFocusRef : null,
         accessibilityLiveRegion: !skipLinkHref && refocus ? undefined : 'polite',
-        focusable: !skipLinkHref && refocus,
         text: getCopyWithPlaceholders('stepTrackerLabel')
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectContainerStyles(containerLayout.width),

package/lib/Carousel/CarouselContext.js

@@ -54,7 +54,7 @@ function useCarousel() {
   const context = _react.default.useContext(CarouselContext);
 
   if (context === undefined) {
-    throw new Error("'useCarousel' must be used within a 'CarouselProvider'");
+    throw new Error(`'useCarousel' must be used within a 'CarouselProvider'`);
   }
 
   return context;

package/lib/Carousel/CarouselFirstFocus/CarouselFirstFocus.js

@@ -40,7 +40,7 @@ const CarouselFirstFocus = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = (0, _CarouselContext.useCarousel)(); // TODO: integrate skip link description if behaving as skip link.
   // Consider moving this content to aria-live area while only the skip link is focused.
 
-  const accessibilityLabel = "".concat(title, ", ").concat(getCopyWithPlaceholders('stepTrackerLabel'));
+  const accessibilityLabel = `${title}, ${getCopyWithPlaceholders('stepTrackerLabel')}`;
 
   const accessibilityRole = _Platform.default.select({
     web: 'link',

package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -43,16 +43,7 @@ const CarouselTabsPanel = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
   const lastTabSelected = activeIndex === items.length - 1;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      focusable: true,
-      accessible: true,
-      onFocus: event => {
-        // When user forward-tabs into this section, focus the next tab; if they backwards-tab
-        // (shift-tab) back into the carousel content, don't interfere.
-        const previousWebFocus = event.relatedTarget;
-        if (previousWebFocus !== firstTabRef.current) nextFocusRef.current.focus();
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
       direction: "row",
       space: 3,
       divider: {

package/lib/Carousel/CarouselThumbnail.js

@@ -38,7 +38,7 @@ const CarouselThumbnail = _ref => {
     goTo,
     themeTokens
   } = (0, _CarouselContext.useCarousel)();
-  const thumbnailTitle = alt !== null && alt !== void 0 ? alt : getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
+  const thumbnailTitle = alt ?? getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
 
   const handlePress = () => goTo(index);
 
@@ -81,7 +81,7 @@ const CarouselThumbnail = _ref => {
     style: [styles.pressable, index === activeIndex && styles.selected],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
       accessibilityIgnoresInvertColors: true,
-      accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : alt,
+      accessibilityLabel: accessibilityLabel ?? alt,
       source: src,
       style: styles.image,
       title: thumbnailTitle

package/lib/Checkbox/Checkbox.js

@@ -215,7 +215,7 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   };
 
   const uniqueId = (0, _useUniqueId.default)('checkbox');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();

package/lib/Checkbox/CheckboxGroup.js

@@ -120,7 +120,7 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error("CheckboxGroup items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`CheckboxGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
   const checkboxes = items.map((_ref2, index) => {
@@ -131,7 +131,7 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       ref: itemRef,
       ...itemRest
     } = _ref2;
-    const checkboxId = id || "Checkbox[".concat(index, "]");
+    const checkboxId = id || `Checkbox[${index}]`;
 
     const handleChange = (newCheckedState, event) => {
       if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);

package/lib/Divider/Divider.js

@@ -116,9 +116,9 @@ const Divider = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, { ...spacerProps,
-      testID: testID ? "".concat(testID, "-Spacer-before") : undefined
+      testID: testID ? `${testID}-Spacer-before` : undefined
     }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, { ...spacerProps,
-      testID: testID ? "".concat(testID, "-Spacer-after") : undefined
+      testID: testID ? `${testID}-Spacer-after` : undefined
     })]
   });
 });

package/lib/FlexGrid/Col/Col.js

@@ -69,7 +69,7 @@ const Col = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const horizontalAlignLevel = getHorizontalAlignLevel();
 
   const toPercent = num => {
-    return "".concat(num / 12 * 100, "%");
+    return `${num / 12 * 100}%`;
   };
 
   const calculateWidth = value => {

package/lib/Icon/Icon.js

@@ -48,7 +48,7 @@ const Icon = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       // TODO: systematise animations.
       // https://github.com/telus/universal-design-system/issues/487
       transition: 'transform 200ms, color 200ms',
-      transform: [themeTokens.scale ? "scale(".concat(themeTokens.scale, ")") : '', themeTokens.translateX ? "translateX(".concat(themeTokens.translateX, "px)") : '', themeTokens.translateY ? "translateY(".concat(themeTokens.translateY, "px)") : ''].filter(exists => exists).join(' ')
+      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
     },
     dataSet: dataSet,
     children: iconContent

package/lib/MultiSelectFilter/ModalOverlay.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _portal = require("@gorhom/portal");
+
+var _utils = require("../utils");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+var _Card = _interopRequireDefault(require("../Card"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+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; }
+
+const staticStyles = _StyleSheet.default.create({
+  positioner: {
+    flex: 1,
+    // Grow to maxWidth when possible, shrink when not possible
+    position: 'absolute',
+    height: 330,
+    paddingTop: 5,
+    zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
+
+  },
+  closeButtonContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    zIndex: 1
+  }
+});
+
+const selectCloseButtonContainerStyles = _ref => {
+  let {
+    paddingRight,
+    paddingTop
+  } = _ref;
+  return {
+    paddingRight,
+    paddingTop
+  };
+};
+
+const selectPaddingContainerStyles = _ref2 => {
+  let {
+    paddingTop,
+    paddingLeft,
+    paddingRight
+  } = _ref2;
+  return {
+    paddingBottom: 35,
+    paddingTop,
+    paddingLeft,
+    paddingRight
+  };
+};
+
+const ModalOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    copy,
+    onClose
+  } = _ref3;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+    viewport,
+    maxWidth: false
+  });
+  const {
+    closeIcon: CloseIconComponent,
+    maxWidth
+  } = themeTokens;
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const closeLabel = getCopy('closeButton');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [{
+          minWidth: maxWidth
+        }, staticStyles.positioner],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
+          tokens: selectPaddingContainerStyles(themeTokens),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              onPress: onClose,
+              icon: CloseIconComponent,
+              accessibilityRole: "button",
+              accessibilityLabel: closeLabel,
+              tokens: (0, _utils.selectTokens)('IconButton', themeTokens, 'close')
+            })
+          }), children]
+        })
+      })
+    })
+  });
+});
+ModalOverlay.displayName = 'ModalOverlay';
+ModalOverlay.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Modal'),
+  copy: _utils.copyPropTypes,
+  onClose: _propTypes.default.func
+};
+var _default = ModalOverlay;
+exports.default = _default;

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -0,0 +1,314 @@
+"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; }
+
+const {
+  Col,
+  Row
+} = _FlexGrid.default;
+
+const selectSubTitleTokens = _ref => {
+  let {
+    subtitleColor
+  } = _ref;
+  return {
+    color: subtitleColor
+  };
+};
+
+const selectDividerToknes = _ref2 => {
+  let {
+    dividerColor,
+    width,
+    decorative = true,
+    weight = 'thin'
+  } = _ref2;
+  return {
+    color: dividerColor,
+    width,
+    decorative,
+    weight
+  };
+};
+
+const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    label,
+    subtitle,
+    id = label,
+    variant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    copy = 'en',
+    readOnly = false,
+    inactive = false,
+    rowLimit = 12,
+    ...rest
+  } = _ref3;
+  const {
+    currentValues,
+    setValues
+  } = (0, _utils.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,
+    copy
+  });
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [checkedIds, setCheckedIds] = (0, _react.useState)(currentValues ?? []);
+  const colSize = items.length > rowLimit ? 2 : 1;
+  const isSelected = currentValues.length > 0;
+  const uniqueFields = ['id', 'label'];
+
+  if (!(0, _utils.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 = (0, _utils.getPressHandlersWithArgs)(rest, [{
+    id,
+    label,
+    currentValues
+  }]);
+
+  const handleChange = event => {
+    if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+    setIsOpen(!isOpen);
+  };
+
+  const onApply = e => {
+    setValues(e);
+    setIsOpen(false);
+  };
+
+  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'
+      },
+      onClose: () => setIsOpen(false),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            size: 'h4'
+          },
+          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, {
+        space: 4
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        scroll: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.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),
+              checkedIds: checkedIds,
+              onChange: e => setCheckedIds(e, i)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+              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",
+          space: 3,
+          tokens: {
+            alignItems: 'center'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+            onPress: () => onApply(checkedIds),
+            variant: {
+              size: 'small',
+              priority: 'high'
+            },
+            children: getCopy('applyButtonLabel')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.TextButton, {
+              onPress: () => setCheckedIds([]),
+              children: getCopy('clearButtonLabel')
+            })
+          })]
+        })
+      })]
+    })]
+  });
+});
+MultiSelectFilter.displayName = 'MultiSelectFilter';
+MultiSelectFilter.propTypes = {
+  /**
+   * The text displayed to the user in a ButtonDropdown.
+   */
+  label: _propTypes.default.string.isRequired,
+
+  /**
+   * The text for the subtitle
+   */
+  subtitle: _propTypes.default.string,
+
+  /**
+   * An optional unique string may be provided to identify the ButtonDropdown.
+   * If not provided, the label is used.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * Sets the variant for ButtonDropdown element.
+   */
+  variant: _utils.variantProp.propType,
+
+  /**
+   * Sets the tokens for ButtonDropdown element.
+   */
+  tokens: (0, _utils.getTokensPropType)('ButtonDropdown'),
+
+  /**
+   * The options a user may select.
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+     * The text displayed to the user with a checkbox, describing this option.
+     */
+    label: _propTypes.default.string.isRequired,
+
+    /**
+     * An optional unique string may be provided to identify this option.
+     * If not provided, the label is used.
+     */
+    id: _propTypes.default.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),
+
+  /**
+   * 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),
+
+  /**
+   * If provided, sets a maximum number of items a user may select at once.
+   */
+  maxValues: _propTypes.default.number,
+
+  /**
+   * 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,
+
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
+  /**
+   * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
+   */
+  readOnly: _propTypes.default.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,
+
+  /**
+   * 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
+};
+var _default = MultiSelectFilter;
+exports.default = _default;

package/lib/MultiSelectFilter/dictionary.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    filterByLabel: 'Filter by %{filterCategory}:',
+    applyButtonLabel: 'Apply',
+    clearButtonLabel: 'Clear'
+  },
+  fr: {
+    filterByLabel: 'Filtrer par %{filterCategory}:',
+    applyButtonLabel: 'Appliquer',
+    clearButtonLabel: 'Effacer'
+  }
+};
+exports.default = _default;