@telus-uds/components-base 1.49.0 → 1.51.0

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 09 Jun 2023 00:18:16 GMT and should not be manually modified.
+This log was last generated on Fri, 16 Jun 2023 21:05:00 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.51.0
+
+Fri, 16 Jun 2023 21:05:00 GMT
+
+### Minor changes
+
+- Change in tags due to multibrand standardization (35577399+JoshHC@users.noreply.github.com)
+- feature:update MultiSelectFilter to follow design (samuraix221@hotmail.com)
+- Adapt the tokens to the steptracker (mauricio.batresmontejo@telus.com)
+- Update 'LinkBase' to pass Pressable state through to children  (kyle.king2@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.33.0
+
+## 1.50.0
+
+Wed, 14 Jun 2023 00:06:30 GMT
+
+### Minor changes
+
+- Datepicker refactor (srikanthkhari@gmail.com)
+- Bump @telus-uds/system-theme-tokens to v2.32.0
+
+### Patches
+
+- Allow dynamic swap of `defaultTheme` passed to `ThemeProvider` (shahzaibkhalidmalik@outlook.com)
+
 ## 1.49.0
 
-Fri, 09 Jun 2023 00:18:16 GMT
+Fri, 09 Jun 2023 00:28:33 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -198,7 +198,7 @@
         "listPaddingLeft": "size",
         "listItemMarkerFontSize": "size",
         "listItemMarkerLineHeight": "lineHeight",
-        "headerLineHeight": "size",
+        "headerLineHeight": "lineHeight",
         "headerFontSize": "size",
         "headerFontName": "fontName",
         "headerFontWeight": "fontWeight",
@@ -208,6 +208,7 @@
         "listItemPaddingLeft": "size",
         "closeButtonBorderSize": "border",
         "closeButtonBorderColor": "color",
+        "closeButtonBackgroundColor": "color",
         "closeButtonHeight": "size",
         "closeButtonMarginTop": "size",
         "closeButtonMarginLeft": "size",
@@ -547,12 +548,6 @@
         "calendarMonthCaptionFontWeight": "fontWeight",
         "calendarMonthCaptionLineHeight": "lineHeight",
         "calendarMonthCaptionPaddingBottom": "size",
-        "dateInputBorderColor": "color",
-        "dateInputBorderRadius": "radius",
-        "dateInputFocusBorderColor": "color",
-        "dateInputHoverBorderColor": "color",
-        "dateInputInsideBorderColor": "color",
-        "dateInputInsideColor": "color",
         "dateInputStrokeColor": "color",
         "dayPickerWeekHeaderColor": "color",
         "dayPickerWeekHeaderFontName": "fontName",
@@ -839,6 +834,22 @@
         "closeIconSize": "size",
         "closePadding": "size"
       },
+      "MultiSelectFilter": {
+        "headerFontColor": "color",
+        "headerFontSize": "fontSize",
+        "headerFontName": "fontName",
+        "headerFontWeight": "fontWeight",
+        "headerLineHeight": "lineHeight",
+        "maxHeightSize": "size",
+        "maxWidthSize": "size",
+        "minWidth": "size",
+        "minHeight": "size",
+        "subHeaderLineHeight": "lineHeight",
+        "subHeaderFontName": "fontName",
+        "subHeaderFontWeight": "fontWeight",
+        "subHeaderFontSize": "fontSize",
+        "buttonDirection": "direction"
+      },
       "NavigationBar": {
         "alignSelf": "flexAlign",
         "backgroundColor": "color",
@@ -1066,8 +1077,12 @@
         "contentDirection": "direction",
         "contentSpace": "integer",
         "contentAlignItems": "flexAlign",
+        "gap": "size",
         "textAlign": "textAlign",
-        "outerBorderColor": "color"
+        "outerBorderColor": "color",
+        "fontWeight": "fontWeight",
+        "fontName": "fontName",
+        "fontSize": "fontSize"
       },
       "Radio": {
         "checkedBackgroundColor": "color",
@@ -1336,7 +1351,13 @@
         "labelPaddingRight": "size",
         "showStepLabel": "show",
         "showStepName": "show",
-        "showStepTrackerLabel": "show"
+        "showStepTrackerLabel": "show",
+        "textStepTrackerLabel": "integer",
+        "stepLabelColor": "color",
+        "stepLabelFontSize": "fontSize",
+        "stepLabelFontWeight": "fontWeight",
+        "stepLabelFontName": "fontName",
+        "stepLabelLineHeight": "lineHeight"
       },
       "SkipLink": {
         "backgroundColor": "color",
@@ -1439,7 +1460,6 @@
         "paddingRight": "size",
         "paddingTop": "size",
         "paddingBottom": "size",
-        "width": "size",
         "minWidth": "size",
         "outerBorderColor": "color",
         "outerBorderWidth": "border",
@@ -1540,7 +1560,9 @@
         "animationColorBefore": "color",
         "animationColorAfter": "color",
         "animationDivColorBefore": "color",
-        "animationDivColorAfter": "color"
+        "animationDivColorAfter": "color",
+        "chevronlinkFontWeight": "fontWeight",
+        "chevronlinkFontName": "fontName"
       },
       "ToggleSwitch": {
         "borderColor": "color",
@@ -1658,6 +1680,8 @@
       "Countdown": {
         "containerBorderRadius": "radius",
         "containerGradient": "gradient",
+        "containerBorderWidth": "border",
+        "containerBorderColor": "color",
         "containerInverseBorder": "border",
         "containerInverseBorderColor": "color",
         "containerPaddingBottomTop": "size",
@@ -1667,6 +1691,8 @@
         "textFontSize": "fontSize",
         "textLineHeight": "lineHeight",
         "labelFontSize": "fontSize",
+        "labelFontName": "fontName",
+        "labelFontWeight": "fontWeight",
         "labelLineHeight": "lineHeight",
         "textTimerFontWeight": "fontWeight",
         "textTimerFontName": "fontName"
@@ -2233,6 +2259,22 @@
           "type": "state"
         }
       },
+      "MultiSelectFilter": {
+        "maxHeight": {
+          "description": "Whether MultiselectFilter modal should expand responsively to content or a set maximu height",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "maxWidth": {
+          "description": "Whether MultiselectFilter modal should expand to content or a set maximuh width",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "NavigationBar": {
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
@@ -2428,6 +2470,35 @@
           "type": "state"
         }
       },
+      "QuickLinksFeatureItem": {
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "focus": {
+          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "pressed": {
+          "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "QuantitySelector": {
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
@@ -6858,6 +6929,17 @@
             "required": false,
             "description": "The options a user may select."
           },
+          "maxHeight": {
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            },
+            "type": {
+              "name": "bool"
+            },
+            "required": false,
+            "description": "If provided sets maxHeight to be active"
+          },
           "copy": {
             "defaultValue": {
               "value": "'en'",
@@ -7990,8 +8072,12 @@
                   "contentDirection": "direction",
                   "contentSpace": "integer",
                   "contentAlignItems": "flexAlign",
+                  "gap": "size",
                   "textAlign": "textAlign",
-                  "outerBorderColor": "color"
+                  "outerBorderColor": "color",
+                  "fontWeight": "fontWeight",
+                  "fontName": "fontName",
+                  "fontSize": "fontSize"
                 }
               },
               "required": false,
@@ -9631,7 +9717,7 @@
           },
           "dictionary": {
             "defaultValue": {
-              "value": "{\n  en: {\n    stepLabel: 'Step %{stepNumber}',\n    stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'\n  },\n  fr: {\n    stepLabel: 'Étape %{stepNumber}',\n    stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'\n  }\n}",
+              "value": "{\n  en: {\n    1: {\n      stepLabel: 'Step %{stepNumber}',\n      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'\n    },\n    2: {\n      stepLabel: '%{stepNumber}.',\n      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'\n    },\n    3: {\n      stepLabel: 'Step %{stepNumber}',\n      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'\n    }\n  },\n  fr: {\n    1: {\n      stepLabel: 'Étape %{stepNumber}',\n      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'\n    },\n    2: {\n      stepLabel: '%{stepNumber}.',\n      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'\n    },\n    3: {\n      stepLabel: 'Étape %{stepNumber}',\n      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'\n    }\n  }\n}",
               "computed": false
             },
             "type": {
@@ -9712,7 +9798,13 @@
                 "labelPaddingRight": "size",
                 "showStepLabel": "show",
                 "showStepName": "show",
-                "showStepTrackerLabel": "show"
+                "showStepTrackerLabel": "show",
+                "textStepTrackerLabel": "integer",
+                "stepLabelColor": "color",
+                "stepLabelFontSize": "fontSize",
+                "stepLabelFontWeight": "fontWeight",
+                "stepLabelFontName": "fontName",
+                "stepLabelLineHeight": "lineHeight"
               }
             },
             "required": false,
@@ -10089,6 +10181,10 @@
                     "themeTokensVersion": {
                       "name": "string",
                       "required": true
+                    },
+                    "name": {
+                      "name": "string",
+                      "required": true
                     }
                   },
                   "required": true

package/lib/Link/LinkBase.js

@@ -229,7 +229,7 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
           style: [textStyles, blockTextStyles, staticStyles.baseline],
-          children: children
+          children: typeof children === 'function' ? children(linkState) : children
         })
       });
     }

package/lib/MultiSelectFilter/ModalOverlay.js

@@ -40,7 +40,6 @@ const staticStyles = _StyleSheet.default.create({
     flex: 1,
     // Grow to maxWidth when possible, shrink when not possible
     position: 'absolute',
-    height: 330,
     zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
 
   },
@@ -86,6 +85,11 @@ const ModalOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     children,
     isReady = false,
+    maxHeight,
+    maxHeightSize,
+    maxWidthSize,
+    minHeight,
+    minWidth,
     overlaidPosition,
     onLayout,
     variant,
@@ -98,9 +102,18 @@ const ModalOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     viewport,
     maxWidth: false
   });
+  const containerWidthHeight = {
+    minWidth,
+    minHeight,
+    ...(tokens.maxWidth && maxWidthSize && {
+      maxWidth: maxWidthSize
+    }),
+    ...(maxHeight && maxHeightSize && {
+      maxHeight: maxHeightSize
+    })
+  };
   const {
-    closeIcon: CloseIconComponent,
-    maxWidth
+    closeIcon: CloseIconComponent
   } = themeTokens;
   const getCopy = (0, _utils.useCopy)({
     dictionary: _dictionary.default,
@@ -111,9 +124,7 @@ const ModalOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       ref: ref,
       onLayout: onLayout,
-      style: [overlaidPosition, {
-        minWidth: maxWidth
-      }, staticStyles.positioner, !isReady && staticStyles.hidden],
+      style: [overlaidPosition, containerWidthHeight, staticStyles.positioner, !isReady && staticStyles.hidden],
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
         tokens: selectPaddingContainerStyles(themeTokens),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -122,8 +133,7 @@ const ModalOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
             onPress: onClose,
             icon: CloseIconComponent,
             accessibilityRole: "button",
-            accessibilityLabel: closeLabel,
-            tokens: (0, _utils.selectTokens)('IconButton', themeTokens, 'close')
+            accessibilityLabel: closeLabel
           })
         }), children]
       })
@@ -139,6 +149,12 @@ ModalOverlay.propTypes = {
     left: _propTypes.default.number,
     width: _propTypes.default.number
   }),
+  minWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  minHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  maxHeightSize: _propTypes.default.number,
+  maxWidthSize: _propTypes.default.number,
+  maxHeight: _propTypes.default.bool,
+  maxWidth: _propTypes.default.bool,
   onLayout: _propTypes.default.func,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('Modal'),

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -15,6 +15,8 @@ var _utils = require("../utils");
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 
+var _ViewportProvider = require("../ViewportProvider");
+
 var _Box = _interopRequireDefault(require("../Box"));
 
 var _Button = require("../Button");
@@ -35,6 +37,8 @@ var _Link = require("../Link");
 
 var _ModalOverlay = _interopRequireDefault(require("./ModalOverlay"));
 
+var _Modal = _interopRequireDefault(require("../Modal"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -81,6 +85,7 @@ const MultiSelectFilter = _ref3 => {
     tokens,
     items = [],
     values,
+    maxHeight = false,
     initialValues,
     maxValues,
     onChange,
@@ -90,6 +95,7 @@ const MultiSelectFilter = _ref3 => {
     rowLimit = 12,
     ...rest
   } = _ref3;
+  const viewport = (0, _ViewportProvider.useViewport)();
   const {
     currentValues,
     setValues
@@ -100,6 +106,9 @@ const MultiSelectFilter = _ref3 => {
     onChange,
     readOnly
   });
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [checkedIds, setCheckedIds] = (0, _react.useState)(currentValues ?? []);
+  const [maxWidth, setMaxWidth] = (0, _react.useState)(false);
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonDropdown', tokens, variant);
   const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, variant);
 
@@ -109,10 +118,34 @@ const MultiSelectFilter = _ref3 => {
     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 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;
+  (0, _react.useEffect)(() => {
+    if (colSize === 1) return setMaxWidth(false);
+    return colSize === 2 && setMaxWidth(true);
+  }, [colSize]);
+  const {
+    headerFontColor,
+    headerFontSize,
+    buttonDirection,
+    headerFontWeight,
+    headerLineHeight,
+    subHeaderFontWeight,
+    subHeaderFontSize,
+    maxHeightSize,
+    maxWidthSize,
+    subHeaderLineHeight,
+    minHeight,
+    minWidth
+  } = (0, _ThemeProvider.useThemeTokens)('MultiSelectFilter', tokens, { ...variant,
+    maxHeight,
+    maxWidth
+  }, {
+    viewport
+  });
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
@@ -136,6 +169,11 @@ const MultiSelectFilter = _ref3 => {
     setIsOpen(false);
   };
 
+  const onClear = () => {
+    setCheckedIds(() => []);
+    onApply([]);
+  };
+
   const {
     align,
     offsets
@@ -143,9 +181,7 @@ const MultiSelectFilter = _ref3 => {
     xs: {
       align: {
         top: 'top',
-        left: 'left',
-        bottom: 'bottom',
-        right: 'right'
+        left: 'left'
       }
     },
     sm: {
@@ -158,6 +194,16 @@ const MultiSelectFilter = _ref3 => {
       }
     }
   });
+  const headerStyles = (0, _ThemeProvider.applyTextStyles)({
+    fontSize: headerFontSize,
+    fontWeight: headerFontWeight,
+    fontColor: headerFontColor
+  });
+  const subeHeaderStyles = (0, _ThemeProvider.applyTextStyles)({
+    fontSize: subHeaderFontSize,
+    fontWeight: subHeaderFontWeight,
+    fontColor: selectSubTitleTokens(themeTokens)
+  });
   const {
     overlaidPosition,
     onTargetLayout,
@@ -178,20 +224,96 @@ const MultiSelectFilter = _ref3 => {
       onChange: handleChange,
       tokens: getButtonTokens,
       inactive: inactive
-    }, id), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
+    }, id), isOpen && viewport === 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
+      isOpen: isOpen,
+      onClose: () => setIsOpen(false),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          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, {
+            tokens: { ...subeHeaderStyles,
+              lineHeight: subHeaderLineHeight
+            },
+            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 * rowLength, (i + 1) * rowLength),
+              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, {
+        horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+          direction: buttonDirection,
+          space: 3,
+          tokens: {
+            alignItems: 'center',
+            ...(viewport === 'xs' && {
+              flexGrow: 1
+            })
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+            onPress: () => onApply(checkedIds),
+            variant: {
+              size: 'small',
+              priority: 'high',
+              ...(viewport === 'xs' && {
+                width: 'full'
+              })
+            },
+            children: getCopy('applyButtonLabel')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.TextButton, {
+              onPress: () => onClear(),
+              children: getCopy('clearButtonLabel')
+            })
+          })]
+        })
+      })]
+    }), isOpen && viewport !== 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
       overlaidPosition: overlaidPosition,
-      variant: {
-        width: colSize > 1 ? 'size576' : 's'
-      },
       onClose: () => setIsOpen(false),
-      tokens: tokens,
+      maxHeight: maxHeight,
+      maxHeightSize: maxHeightSize,
+      maxWidthSize: maxWidthSize,
+      minHeight: minHeight,
+      minWidth: minWidth,
+      tokens: { ...tokens,
+        maxWidth
+      },
       copy: copy,
       isReady: isReady,
       onLayout: onTargetLayout,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-          variant: {
-            size: 'h4'
+          tokens: { ...headerStyles,
+            lineHeight: headerLineHeight
           },
           children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
         })
@@ -200,10 +322,9 @@ const MultiSelectFilter = _ref3 => {
           space: 5
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-            variant: {
-              size: 'h5'
+            tokens: { ...subeHeaderStyles,
+              lineHeight: subHeaderLineHeight
             },
-            tokens: selectSubTitleTokens(themeTokens),
             children: subtitle
           })
         })]
@@ -216,7 +337,7 @@ const MultiSelectFilter = _ref3 => {
           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),
+              items: items.slice(i * rowLength, (i + 1) * rowLength),
               checkedIds: checkedIds,
               onChange: e => setCheckedIds(e, i)
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
@@ -230,22 +351,29 @@ const MultiSelectFilter = _ref3 => {
         }),
         space: 4
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+        horizontalAlign: buttonDirection === 'column' ? 'center' : 'start',
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
-          direction: "row",
+          direction: buttonDirection,
           space: 3,
           tokens: {
-            alignItems: 'center'
+            alignItems: 'center',
+            ...(viewport === 'xs' && {
+              flexGrow: 1
+            })
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.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([]),
+              onPress: () => onClear(),
               children: getCopy('clearButtonLabel')
             })
           })]
@@ -319,6 +447,11 @@ MultiSelectFilter.propTypes = {
    */
   maxValues: _propTypes.default.number,
 
+  /**
+   * If provided sets maxHeight to be active
+   */
+  maxHeight: _propTypes.default.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`.