@measured/puck-plugin-heading-analyzer 0.14.0-canary.22a4182 → 0.14.0-canary.2c15323

package/README.md

@@ -31,4 +31,4 @@ export function Page() {
 
 ## License
 
-MIT © [Measured Co.](https://github.com/measuredco)
+MIT © [Measured Corporation Ltd](https://measured.co)

package/dist/index.d.ts

@@ -43,6 +43,8 @@ type ArrayField<Props extends {
     };
     defaultItemProps?: Props[0];
     getItemSummary?: (item: Props[0], index?: number) => string;
+    max?: number;
+    min?: number;
 };
 type ObjectField<Props extends {
     [key: string]: any;
@@ -79,11 +81,15 @@ type ExternalField<Props extends {
     placeholder?: string;
     fetchList: (params: {
         query: string;
+        filters: Record<string, any>;
     }) => Promise<any[] | null>;
     mapProp?: (value: any) => Props;
+    mapRow?: (value: any) => Record<string, string | number>;
     getItemSummary: (item: Props, index?: number) => string;
     showSearch?: boolean;
     initialQuery?: string;
+    filterFields?: Record<string, Field>;
+    initialFilters?: Record<string, any>;
 };
 type CustomField<Props extends {
     [key: string]: any;
@@ -141,7 +147,7 @@ type RenderFunc<Props extends {
     [key: string]: any;
 } = {
     children: ReactNode;
-}> = React.FunctionComponent<Props>;
+}> = (props: Props) => ReactElement;
 declare const overrideKeys: readonly ["header", "headerActions", "fields", "fieldLabel", "components", "componentItem", "outline", "puck", "preview"];
 type OverrideKey = (typeof overrideKeys)[number];
 type OverridesGeneric<Shape extends {
@@ -171,7 +177,10 @@ type Overrides = OverridesGeneric<{
         className?: string;
     }>;
     components: RenderFunc;
-    componentItem: RenderFunc;
+    componentItem: RenderFunc<{
+        children: ReactNode;
+        name: string;
+    }>;
     outline: RenderFunc;
     puck: RenderFunc;
 }>;

package/dist/index.js

@@ -49958,7 +49958,7 @@ var require_dist = __commonJS({
             var HostPortal = 4;
             var HostComponent = 5;
             var HostText = 6;
-            var Fragment14 = 7;
+            var Fragment13 = 7;
             var Mode = 8;
             var ContextConsumer = 9;
             var ContextProvider = 10;
@@ -51114,7 +51114,7 @@ var require_dist = __commonJS({
                   return "DehydratedFragment";
                 case ForwardRef:
                   return getWrappedName$1(type, type.render, "ForwardRef");
-                case Fragment14:
+                case Fragment13:
                   return "Fragment";
                 case HostComponent:
                   return type;
@@ -60785,7 +60785,7 @@ var require_dist = __commonJS({
                 }
               }
               function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-                if (current2 === null || current2.tag !== Fragment14) {
+                if (current2 === null || current2.tag !== Fragment13) {
                   var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
                   created.return = returnFiber;
                   return created;
@@ -61188,7 +61188,7 @@ var require_dist = __commonJS({
                   if (child.key === key) {
                     var elementType = element.type;
                     if (elementType === REACT_FRAGMENT_TYPE) {
-                      if (child.tag === Fragment14) {
+                      if (child.tag === Fragment13) {
                         deleteRemainingChildren(returnFiber, child.sibling);
                         var existing = useFiber(child, element.props.children);
                         existing.return = returnFiber;
@@ -65363,7 +65363,7 @@ var require_dist = __commonJS({
                   var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
                   return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
                 }
-                case Fragment14:
+                case Fragment13:
                   return updateFragment(current2, workInProgress2, renderLanes2);
                 case Mode:
                   return updateMode(current2, workInProgress2, renderLanes2);
@@ -65636,7 +65636,7 @@ var require_dist = __commonJS({
                 case SimpleMemoComponent:
                 case FunctionComponent:
                 case ForwardRef:
-                case Fragment14:
+                case Fragment13:
                 case Mode:
                 case Profiler:
                 case ContextConsumer:
@@ -69895,7 +69895,7 @@ var require_dist = __commonJS({
               return fiber;
             }
             function createFiberFromFragment(elements, mode, lanes, key) {
-              var fiber = createFiber(Fragment14, elements, key, mode);
+              var fiber = createFiber(Fragment13, elements, key, mode);
               fiber.lanes = lanes;
               return fiber;
             }
@@ -71035,7 +71035,7 @@ var require_dist = __commonJS({
     init_react_import2();
     var import_react22 = require("react");
     init_react_import2();
-    var Button_module_default = { "Button": "_Button_1hb69_1", "Button--medium": "_Button--medium_1hb69_29", "Button--large": "_Button--large_1hb69_37", "Button-icon": "_Button-icon_1hb69_44", "Button--primary": "_Button--primary_1hb69_48", "Button--secondary": "_Button--secondary_1hb69_67", "Button--flush": "_Button--flush_1hb69_82", "Button--disabled": "_Button--disabled_1hb69_86", "Button--fullWidth": "_Button--fullWidth_1hb69_93" };
+    var Button_module_default = { "Button": "_Button_8fn3a_1", "Button--medium": "_Button--medium_8fn3a_29", "Button--large": "_Button--large_8fn3a_37", "Button-icon": "_Button-icon_8fn3a_44", "Button--primary": "_Button--primary_8fn3a_48", "Button--secondary": "_Button--secondary_8fn3a_67", "Button--flush": "_Button--flush_8fn3a_82", "Button--disabled": "_Button--disabled_8fn3a_86", "Button--fullWidth": "_Button--fullWidth_8fn3a_93", "Button-spinner": "_Button-spinner_8fn3a_98" };
     init_react_import2();
     var import_classnames2 = __toESM2(require_classnames2());
     var getClassNameFactory2 = (rootClass, styles, { baseClass = "" } = {}) => (options = {}) => {
@@ -71113,10 +71113,7 @@ var require_dist = __commonJS({
           children: [
             icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("icon"), children: icon }),
             children,
-            loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-              "\xA0\xA0",
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_spinners2.ClipLoader, { "aria-label": "loading", color: "inherit", size: "14px" })
-            ] })
+            loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("spinner"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_spinners2.ClipLoader, { "aria-label": "loading", color: "inherit", size: "14px" }) })
           ]
         }
       );
@@ -71226,10 +71223,10 @@ var require_dist = __commonJS({
       const ctx = (0, import_react32.useContext)(drawerContext);
       const resolvedId = `${ctx.droppableId}::${id || name}`;
       const CustomInner = (0, import_react32.useMemo)(
-        () => children || (({ children: children2 }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
+        () => children || (({ children: children2, name: name2 }) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getClassNameItem2("default"), children: children2 })),
         [children]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DrawerDraggable, { id: resolvedId, index, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CustomInner, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getClassNameItem2("draggable"), children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DrawerDraggable, { id: resolvedId, index, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CustomInner, { name, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getClassNameItem2("draggableWrapper"), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: getClassNameItem2("draggable"), children: [
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getClassNameItem2("name"), children: name }),
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: getClassNameItem2("icon"), children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DragIcon, {}) })
       ] }) }) }) });
@@ -71404,6 +71401,18 @@ var require_dist = __commonJS({
       ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
     ]);
     init_react_import2();
+    var SlidersHorizontal = createLucideIcon2("SlidersHorizontal", [
+      ["line", { x1: "21", x2: "14", y1: "4", y2: "4", key: "obuewd" }],
+      ["line", { x1: "10", x2: "3", y1: "4", y2: "4", key: "1q6298" }],
+      ["line", { x1: "21", x2: "12", y1: "12", y2: "12", key: "1iu8h1" }],
+      ["line", { x1: "8", x2: "3", y1: "12", y2: "12", key: "ntss68" }],
+      ["line", { x1: "21", x2: "16", y1: "20", y2: "20", key: "14d8ph" }],
+      ["line", { x1: "12", x2: "3", y1: "20", y2: "20", key: "m0wm8r" }],
+      ["line", { x1: "14", x2: "14", y1: "2", y2: "6", key: "14e1ph" }],
+      ["line", { x1: "8", x2: "8", y1: "10", y2: "14", key: "1i6ji0" }],
+      ["line", { x1: "16", x2: "16", y1: "18", y2: "22", key: "1lctlv" }]
+    ]);
+    init_react_import2();
     var Trash = createLucideIcon2("Trash", [
       ["path", { d: "M3 6h18", key: "d0wm0j" }],
       ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
@@ -72694,7 +72703,10 @@ var require_dist = __commonJS({
       );
       const runResolvers = () => __async(void 0, null, function* () {
         const newData = newAppState.data;
-        const flatContent = Object.keys(newData.zones || {}).reduce((acc, zone) => [...acc, ...newData.zones[zone]], newData.content).filter((item) => !!config.components[item.type].resolveData);
+        const flatContent = Object.keys(newData.zones || {}).reduce((acc, zone) => [...acc, ...newData.zones[zone]], newData.content).filter((item) => {
+          var _a;
+          return !!((_a = config.components[item.type]) == null ? void 0 : _a.resolveData);
+        });
         const applyIfChange = (dynamicDataMap, dynamicRoot) => {
           const processed = applyDynamicProps(
             appState.data,
@@ -72831,7 +72843,7 @@ var require_dist = __commonJS({
     var import_react_spinners6 = (init_esm(), __toCommonJS(esm_exports));
     init_react_import2();
     init_react_import2();
-    var styles_module_default9 = { "Input": "_Input_3msty_1", "Input-label": "_Input-label_3msty_26", "Input-labelIcon": "_Input-labelIcon_3msty_34", "Input-disabledIcon": "_Input-disabledIcon_3msty_40", "Input-input": "_Input-input_3msty_45", "Input--readOnly": "_Input--readOnly_3msty_89", "Input-radioGroupItems": "_Input-radioGroupItems_3msty_100", "Input-radio": "_Input-radio_3msty_100", "Input-radioInner": "_Input-radioInner_3msty_117", "Input-radioInput": "_Input-radioInput_3msty_162" };
+    var styles_module_default9 = { "Input": "_Input_1qi5b_1", "Input-label": "_Input-label_1qi5b_26", "Input-labelIcon": "_Input-labelIcon_1qi5b_34", "Input-disabledIcon": "_Input-disabledIcon_1qi5b_41", "Input-input": "_Input-input_1qi5b_46", "Input--readOnly": "_Input--readOnly_1qi5b_90", "Input-radioGroupItems": "_Input-radioGroupItems_1qi5b_101", "Input-radio": "_Input-radio_1qi5b_101", "Input-radioInner": "_Input-radioInner_1qi5b_118", "Input-radioInput": "_Input-radioInput_1qi5b_163" };
     var import_react18 = require("react");
     init_react_import2();
     init_react_import2();
@@ -73002,6 +73014,7 @@ var require_dist = __commonJS({
                                       !readOnly && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameItem22("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassNameItem22("action"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                                         IconButton,
                                         {
+                                          disabled: field.min !== void 0 && field.min >= localState.arrayState.items.length,
                                           onClick: (e2) => {
                                             e2.stopPropagation();
                                             const existingValue = [
@@ -73066,6 +73079,7 @@ var require_dist = __commonJS({
                         "button",
                         {
                           className: getClassName10("addButton"),
+                          disabled: field.max !== void 0 && localState.arrayState.items.length >= field.max,
                           onClick: () => {
                             const existingValue = value || [];
                             const newValue = [
@@ -73075,7 +73089,7 @@ var require_dist = __commonJS({
                             const newArrayState = regenerateArrayState(newValue);
                             onChange(newValue, mapArrayStateToUi(newArrayState));
                           },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Plus, { size: "21" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Plus, { size: 21 })
                         }
                       )
                     ]
@@ -73138,11 +73152,11 @@ var require_dist = __commonJS({
     init_react_import2();
     var import_react16 = require("react");
     init_react_import2();
-    var styles_module_default11 = { "ExternalInput-actions": "_ExternalInput-actions_oqtaj_1", "ExternalInput-button": "_ExternalInput-button_oqtaj_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_oqtaj_25", "ExternalInput-detachButton": "_ExternalInput-detachButton_oqtaj_32", "ExternalInputModal": "_ExternalInputModal_oqtaj_74", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_oqtaj_82", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_oqtaj_90", "ExternalInputModal-table": "_ExternalInputModal-table_oqtaj_90", "ExternalInputModal-thead": "_ExternalInputModal-thead_oqtaj_106", "ExternalInputModal-th": "_ExternalInputModal-th_oqtaj_106", "ExternalInputModal-td": "_ExternalInputModal-td_oqtaj_120", "ExternalInputModal-tr": "_ExternalInputModal-tr_oqtaj_124", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_oqtaj_137", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_oqtaj_157", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_oqtaj_161", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_oqtaj_174", "ExternalInputModal-noContentBanner": "_ExternalInputModal-noContentBanner_oqtaj_178", "ExternalInputModal--loaded": "_ExternalInputModal--loaded_oqtaj_185", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_oqtaj_190", "ExternalInputModal-search": "_ExternalInputModal-search_oqtaj_190", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_oqtaj_221", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_oqtaj_246", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_oqtaj_256" };
+    var styles_module_default11 = { "ExternalInput-actions": "_ExternalInput-actions_q3l5a_1", "ExternalInput-button": "_ExternalInput-button_q3l5a_5", "ExternalInput--dataSelected": "_ExternalInput--dataSelected_q3l5a_25", "ExternalInput-detachButton": "_ExternalInput-detachButton_q3l5a_32", "ExternalInputModal": "_ExternalInputModal_q3l5a_74", "ExternalInputModal-grid": "_ExternalInputModal-grid_q3l5a_84", "ExternalInputModal--filtersToggled": "_ExternalInputModal--filtersToggled_q3l5a_95", "ExternalInputModal-filters": "_ExternalInputModal-filters_q3l5a_100", "ExternalInputModal-masthead": "_ExternalInputModal-masthead_q3l5a_119", "ExternalInputModal-tableWrapper": "_ExternalInputModal-tableWrapper_q3l5a_128", "ExternalInputModal-table": "_ExternalInputModal-table_q3l5a_128", "ExternalInputModal-thead": "_ExternalInputModal-thead_q3l5a_144", "ExternalInputModal-th": "_ExternalInputModal-th_q3l5a_144", "ExternalInputModal-td": "_ExternalInputModal-td_q3l5a_159", "ExternalInputModal-tr": "_ExternalInputModal-tr_q3l5a_164", "ExternalInputModal-tbody": "_ExternalInputModal-tbody_q3l5a_171", "ExternalInputModal--hasData": "_ExternalInputModal--hasData_q3l5a_197", "ExternalInputModal-loadingBanner": "_ExternalInputModal-loadingBanner_q3l5a_201", "ExternalInputModal--isLoading": "_ExternalInputModal--isLoading_q3l5a_218", "ExternalInputModal-searchForm": "_ExternalInputModal-searchForm_q3l5a_222", "ExternalInputModal-search": "_ExternalInputModal-search_q3l5a_222", "ExternalInputModal-searchIcon": "_ExternalInputModal-searchIcon_q3l5a_259", "ExternalInputModal-searchIconText": "_ExternalInputModal-searchIconText_q3l5a_284", "ExternalInputModal-searchInput": "_ExternalInputModal-searchInput_q3l5a_294", "ExternalInputModal-searchActions": "_ExternalInputModal-searchActions_q3l5a_308", "ExternalInputModal-searchActionIcon": "_ExternalInputModal-searchActionIcon_q3l5a_321", "ExternalInputModal-footer": "_ExternalInputModal-footer_q3l5a_325" };
     init_react_import2();
     var import_react15 = require("react");
     init_react_import2();
-    var styles_module_default12 = { "Modal": "_Modal_1yh4j_1", "Modal--isOpen": "_Modal--isOpen_1yh4j_15", "Modal-inner": "_Modal-inner_1yh4j_19" };
+    var styles_module_default12 = { "Modal": "_Modal_zud0i_1", "Modal--isOpen": "_Modal--isOpen_zud0i_15", "Modal-inner": "_Modal-inner_zud0i_19" };
     var import_react_dom3 = __toESM2(require_react_dom2());
     var import_jsx_runtime14 = require("react/jsx-runtime");
     var getClassName12 = get_class_name_factory_default2("Modal", styles_module_default12);
@@ -73182,13 +73196,23 @@ var require_dist = __commonJS({
       name,
       id
     }) => {
-      const { mapProp = (val) => val } = field || {};
+      const {
+        mapProp = (val) => val,
+        mapRow = (val) => val,
+        filterFields
+      } = field || {};
       const [data, setData] = (0, import_react16.useState)([]);
       const [isOpen, setOpen] = (0, import_react16.useState)(false);
       const [isLoading, setIsLoading] = (0, import_react16.useState)(true);
+      const hasFilterFields = !!filterFields;
+      const [filters, setFilters] = (0, import_react16.useState)(field.initialFilters || {});
+      const [filtersToggled, setFiltersToggled] = (0, import_react16.useState)(hasFilterFields);
+      const mappedData = (0, import_react16.useMemo)(() => {
+        return data.map(mapRow);
+      }, [data]);
       const keys = (0, import_react16.useMemo)(() => {
         const validKeys = /* @__PURE__ */ new Set();
-        for (const item of data) {
+        for (const item of mappedData) {
           for (const key of Object.keys(item)) {
             if (typeof item[key] === "string" || typeof item[key] === "number") {
               validKeys.add(key);
@@ -73196,13 +73220,13 @@ var require_dist = __commonJS({
           }
         }
         return Array.from(validKeys);
-      }, [data]);
+      }, [mappedData]);
       const [searchQuery, setSearchQuery] = (0, import_react16.useState)(field.initialQuery || "");
       const search = (0, import_react16.useCallback)(
-        (query) => __async(void 0, null, function* () {
+        (query, filters2) => __async(void 0, null, function* () {
           setIsLoading(true);
-          const cacheKey = `${id}-${name}-${query}`;
-          const listData = dataCache[cacheKey] || (yield field.fetchList({ query }));
+          const cacheKey = `${id}-${name}-${query}-${JSON.stringify(filters2)}`;
+          const listData = dataCache[cacheKey] || (yield field.fetchList({ query, filters: filters2 }));
           if (listData) {
             setData(listData);
             setIsLoading(false);
@@ -73212,7 +73236,7 @@ var require_dist = __commonJS({
         [name, field]
       );
       (0, import_react16.useEffect)(() => {
-        search(searchQuery);
+        search(searchQuery, filters);
       }, []);
       return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
         "div",
@@ -73247,78 +73271,109 @@ var require_dist = __commonJS({
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Modal, { onClose: () => setOpen(false), isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-              "div",
+              "form",
               {
                 className: getClassNameModal({
                   isLoading,
                   loaded: !isLoading,
-                  hasData: data.length > 0
+                  hasData: mappedData.length > 0,
+                  filtersToggled
                 }),
+                onSubmit: (e2) => {
+                  e2.preventDefault();
+                  search(searchQuery, filters);
+                },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassNameModal("masthead"), children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading2, { rank: 2, size: "xxl", children: "Select content" }),
-                    field.showSearch && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-                      "form",
-                      {
-                        className: getClassNameModal("searchForm"),
-                        onSubmit: (e2) => {
-                          e2.preventDefault();
-                          search(searchQuery);
-                        },
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: getClassNameModal("search"), children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Search, { size: "18" }) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                              "input",
-                              {
-                                className: getClassNameModal("searchInput"),
-                                name: "q",
-                                type: "search",
-                                placeholder: "Search",
-                                onChange: (e2) => {
-                                  setSearchQuery(e2.currentTarget.value);
-                                },
-                                autoComplete: "off",
-                                value: searchQuery
-                              }
-                            )
-                          ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { type: "submit", loading: isLoading, disabled: isLoading, children: "Search" })
-                        ]
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassNameModal("tableWrapper"), children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { className: getClassNameModal("table"), children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                        "th",
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassNameModal("searchForm"), children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: getClassNameModal("search"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Search, { size: "18" }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                        "input",
                         {
-                          className: getClassNameModal("th"),
-                          style: { textAlign: "left" },
-                          children: key
+                          className: getClassNameModal("searchInput"),
+                          name: "q",
+                          type: "search",
+                          placeholder: field.placeholder,
+                          onChange: (e2) => {
+                            setSearchQuery(e2.currentTarget.value);
+                          },
+                          autoComplete: "off",
+                          value: searchQuery
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassNameModal("searchActions"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
+                      hasFilterFields && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                        IconButton,
+                        {
+                          title: "Toggle filters",
+                          onClick: (e2) => {
+                            e2.preventDefault();
+                            e2.stopPropagation();
+                            setFiltersToggled(!filtersToggled);
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SlidersHorizontal, { size: 20 })
+                        }
+                      ) })
+                    ] })
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Heading2, { rank: 2, size: "xs", children: field.placeholder || "Select data" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassNameModal("grid"), children: [
+                    hasFilterFields && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
+                      const filterField = filterFields[fieldName];
+                      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                        InputOrGroup,
+                        {
+                          field: filterField,
+                          name: fieldName,
+                          id: `external_field_${fieldName}_filter`,
+                          label: filterField.label || fieldName,
+                          value: filters[fieldName],
+                          onChange: (value2) => {
+                            const newFilters = __spreadProps2(__spreadValues2({}, filters), { [fieldName]: value2 });
+                            setFilters(newFilters);
+                            search(searchQuery, newFilters);
+                          }
                         },
-                        key
-                      )) }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { className: getClassNameModal("tbody"), children: data.map((item, i2) => {
-                        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                          "tr",
+                        fieldName
+                      );
+                    }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassNameModal("tableWrapper"), children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { className: getClassNameModal("table"), children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { className: getClassNameModal("thead"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tr", { className: getClassNameModal("tr"), children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                          "th",
                           {
-                            style: { whiteSpace: "nowrap" },
-                            className: getClassNameModal("tr"),
-                            onClick: (e2) => {
-                              onChange(mapProp(item));
-                              setOpen(false);
-                            },
-                            children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                            className: getClassNameModal("th"),
+                            style: { textAlign: "left" },
+                            children: key
                           },
-                          i2
-                        );
-                      }) })
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_spinners5.ClipLoader, { size: 24, "aria-label": "Loading" }) })
+                          key
+                        )) }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("tbody", { className: getClassNameModal("tbody"), children: mappedData.map((item, i2) => {
+                          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                            "tr",
+                            {
+                              style: { whiteSpace: "nowrap" },
+                              className: getClassNameModal("tr"),
+                              onClick: () => {
+                                onChange(mapProp(data[i2]));
+                                setOpen(false);
+                              },
+                              children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("td", { className: getClassNameModal("td"), children: item[key] }, key))
+                            },
+                            i2
+                          );
+                        }) })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("loadingBanner"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_spinners5.ClipLoader, { size: 24, "aria-label": "Loading" }) })
+                    ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: getClassNameModal("noContentBanner"), children: "No results." })
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: getClassNameModal("footer"), children: [
+                    mappedData.length,
+                    " result",
+                    mappedData.length === 1 ? "" : "s"
+                  ] })
                 ]
               }
             ) })
@@ -73362,6 +73417,7 @@ var require_dist = __commonJS({
                 // DEPRECATED
                 placeholder: ((_a = deprecatedField.adaptor) == null ? void 0 : _a.name) ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder || "Select data",
                 mapProp: ((_b = deprecatedField.adaptor) == null ? void 0 : _b.mapProp) || validField.mapProp,
+                mapRow: validField.mapRow,
                 fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(void 0, null, function* () {
                   return yield deprecatedField.adaptor.fetchList(
                     deprecatedField.adaptorParams
@@ -74748,8 +74804,8 @@ var require_dist = __commonJS({
     });
     init_react_import2();
     var usePuck2 = () => {
-      const { state: appState, config, dispatch } = useAppContext2();
-      return { appState, config, dispatch };
+      const { state: appState, config, history, dispatch } = useAppContext2();
+      return { appState, config, dispatch, history };
     };
   }
 });
@@ -75544,6 +75600,14 @@ lucide-react/dist/esm/icons/search.js:
    * See the LICENSE file in the root directory of this source tree.
    *)
 
+lucide-react/dist/esm/icons/sliders-horizontal.js:
+  (**
+   * @license lucide-react v0.298.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
 lucide-react/dist/esm/icons/trash.js:
   (**
    * @license lucide-react v0.298.0 - ISC

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck-plugin-heading-analyzer",
-  "version": "0.14.0-canary.22a4182",
+  "version": "0.14.0-canary.2c15323",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",
@@ -18,7 +18,7 @@
     "dist"
   ],
   "devDependencies": {
-    "@measured/puck": "^0.14.0-canary.22a4182",
+    "@measured/puck": "^0.14.0-canary.2c15323",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "eslint": "^7.32.0",