@homebound/beam 2.226.0 → 2.227.0

package/dist/components/Filters/Filters.d.ts

@@ -20,6 +20,8 @@ interface FilterProps<F, G extends Value = string> {
     };
     /** Specifies the layout of the filters. If not supplied it will use the default (horizontal) layout. Using the 'vertical' layout will also remove the "More Filters" button/modal */
     vertical?: boolean;
+    /** Specifies the number of in line filters before more filters modal  */
+    numberOfInlineFilters?: number;
 }
 declare function Filters<F, G extends Value = string>(props: FilterProps<F, G>): import("@emotion/react/jsx-runtime").JSX.Element;
 declare const _Filters: typeof Filters;

package/dist/components/Filters/Filters.js

@@ -10,24 +10,23 @@ const Css_1 = require("../../Css");
 const SelectField_1 = require("../../inputs/SelectField");
 const utils_1 = require("../../utils");
 function Filters(props) {
-    const { filter, onChange, filterDefs, groupBy, vertical = false } = props;
+    const { filter, onChange, filterDefs, groupBy, vertical = false, numberOfInlineFilters = groupBy ? 3 : 4 } = props;
     const testId = (0, utils_1.useTestIds)(props, Filters_1.filterTestIdPrefix);
     const { openModal } = (0, Modal_1.useModal)();
-    const numberOfPageFilters = groupBy ? 2 : 3;
     const [pageFilters, modalFilters] = (0, react_1.useMemo)(() => {
         // Take the FilterDefs that have a `key => ...` factory and eval it
         const impls = (0, utils_1.safeEntries)(filterDefs).map(([key, fn]) => [key, fn(key)]);
-        // If we have more than 4 filters,
-        if (!vertical && impls.length > numberOfPageFilters + 1) {
-            // Then return the first three to show on the page, and the remainder for the modal.
+        // If we have more than numberOfInlineFilters depending on groupby,
+        if (!vertical && impls.length > numberOfInlineFilters) {
+            // Then return up to the numberOfInlineFilters, and the remainder in the modal.
             return [
-                Object.fromEntries(impls.slice(0, numberOfPageFilters)),
-                Object.fromEntries(impls.slice(numberOfPageFilters)),
+                Object.fromEntries(impls.slice(0, numberOfInlineFilters)),
+                Object.fromEntries(impls.slice(numberOfInlineFilters)),
             ];
         }
         // Otherwise, we don't have enough to show the modal, so only use page filter keys
         return [Object.fromEntries(impls), {}];
-    }, [numberOfPageFilters, filterDefs]);
+    }, [numberOfInlineFilters, filterDefs]);
     const numModalFilters = (0, utils_1.safeKeys)(modalFilters).filter((fk) => filter[fk] !== undefined).length;
     const maybeGroupByField = groupBy ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SelectField_1.SelectField, { label: "Group by", compact: !vertical, inlineLabel: !vertical, sizeToContent: !vertical, options: groupBy.options, getOptionValue: (o) => o.id, getOptionLabel: (o) => o.name, value: groupBy.value, onSelect: (g) => g && groupBy.setValue(g) }, void 0) }, void 0)) : null;
     // Return list of filter components. `onSelect` should update the `filter`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.226.0",
+  "version": "2.227.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",