@multiplatform.one/frappe-ui 7.34.4 → 7.35.0

package/dist/cjs/list/ListFilterPanel.native.js

@@ -0,0 +1,195 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ListFilterPanel_exports = {};
+__export(ListFilterPanel_exports, {
+  ListFilterPanel: () => ListFilterPanel
+});
+module.exports = __toCommonJS(ListFilterPanel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react_i18next = require("react-i18next");
+var import_BandFilters = require("./BandFilters.native.js");
+var import_FacetList = require("./FacetList.native.js");
+var import_listState = require("./listState.native.js");
+var import_RangeFilter = require("./RangeFilter.native.js");
+function PanelGroup(param) {
+  var {
+    label,
+    children
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.gapSm,
+    role: "group",
+    "aria-label": label,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      ...knobProps.label,
+      fontWeight: "700",
+      color: "$color10",
+      textTransform: "uppercase",
+      letterSpacing: 1,
+      userSelect: "none",
+      "aria-hidden": true,
+      children: label
+    }), children]
+  });
+}
+function ListFilterPanel(param) {
+  var {
+    controls,
+    list,
+    showFavorites,
+    showSort = false,
+    testID
+  } = param;
+  var _controls_sorts, _controls_facets, _controls_bands, _controls_ranges;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var {
+    state,
+    update,
+    favorites
+  } = list;
+  var sorts = (_controls_sorts = controls.sorts) !== null && _controls_sorts !== void 0 ? _controls_sorts : [];
+  var active = (0, import_listState.activeFilterCount)(state);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.gapLg,
+    testID: `${testID}-filters`,
+    children: [showSort && sorts.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(PanelGroup, {
+      label: t("Sort by"),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+        value: state.sort,
+        onChange: function onChange(value) {
+          return update({
+            sort: String(value)
+          });
+        },
+        options: sorts.map(function (sort) {
+          return {
+            label: sort.label,
+            value: sort.value
+          };
+        }),
+        "aria-label": t("Sort by")
+      })
+    }) : null, ((_controls_facets = controls.facets) !== null && _controls_facets !== void 0 ? _controls_facets : []).map(function (facet) {
+      var _state_facets_facet_param, _facet_allLabel;
+      var reading = list.facets[facet.param];
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PanelGroup, {
+        label: facet.label,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_FacetList.FacetList, {
+          label: facet.label,
+          value: (_state_facets_facet_param = state.facets[facet.param]) !== null && _state_facets_facet_param !== void 0 ? _state_facets_facet_param : "",
+          onChange: function onChange(value) {
+            return update({
+              facets: {
+                [facet.param]: value
+              }
+            });
+          },
+          columns: 2,
+          testID: `${testID}-${facet.param}`,
+          options: [{
+            value: "",
+            label: (_facet_allLabel = facet.allLabel) !== null && _facet_allLabel !== void 0 ? _facet_allLabel : t("All"),
+            count: list.total
+          }, ...facet.options.map(function (value) {
+            var _ref, _reading_counts_value;
+            var _facet_optionLabel, _facet_tint;
+            return {
+              value,
+              label: (_ref = (_facet_optionLabel = facet.optionLabel) === null || _facet_optionLabel === void 0 ? void 0 : _facet_optionLabel.call(facet, value)) !== null && _ref !== void 0 ? _ref : value,
+              tint: (_facet_tint = facet.tint) === null || _facet_tint === void 0 ? void 0 : _facet_tint.call(facet, value),
+              count: reading && list.total !== void 0 ? (_reading_counts_value = reading.counts[value]) !== null && _reading_counts_value !== void 0 ? _reading_counts_value : 0 : void 0
+            };
+          })]
+        })
+      }, facet.param);
+    }), ((_controls_bands = controls.bands) !== null && _controls_bands !== void 0 ? _controls_bands : []).map(function (band) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PanelGroup, {
+        label: band.label,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_BandFilters.BandFilter, {
+          band,
+          list,
+          layout: "list",
+          testID: `${testID}-${band.param}`
+        })
+      }, band.param);
+    }), ((_controls_ranges = controls.ranges) !== null && _controls_ranges !== void 0 ? _controls_ranges : []).map(function (range) {
+      var _state_ranges_range_param, _list_highest_range_param;
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_RangeFilter.RangeFilter, {
+        layout: "stack",
+        label: range.label,
+        value: (_state_ranges_range_param = state.ranges[range.param]) !== null && _state_ranges_range_param !== void 0 ? _state_ranges_range_param : 0,
+        max: (0, import_RangeFilter.rangeCeiling)((_list_highest_range_param = list.highest[range.param]) !== null && _list_highest_range_param !== void 0 ? _list_highest_range_param : 0),
+        step: range.step,
+        onChange: function onChange(value) {
+          return update({
+            ranges: {
+              [range.param]: value
+            }
+          });
+        },
+        testID: `${testID}-${range.param}-slider`
+      }, range.param);
+    }), showFavorites ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        outlined: !state.favoritesOnly,
+        theme: state.favoritesOnly ? "accent" : void 0,
+        onPress: function onPress() {
+          return update({
+            favoritesOnly: !state.favoritesOnly
+          });
+        },
+        "aria-pressed": state.favoritesOnly,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.HeartIcon, {
+          size: 16,
+          weight: state.favoritesOnly ? "fill" : "regular"
+        }),
+        testID: `${testID}-favorites-filter`,
+        children: favorites.count > 0 ? t("Favorites ({{count}})", {
+          count: favorites.count
+        }) : t("Favorites")
+      })
+    }) : null, active > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        chromeless: true,
+        onPress: list.clear,
+        testID: `${testID}-clear`,
+        children: t("Clear filters")
+      })
+    }) : null]
+  });
+}
+//# sourceMappingURL=ListFilterPanel.native.js.map

package/dist/cjs/list/ListFilterPanel.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ListFilterPanel_exports","__export","ListFilterPanel","module","exports","import_jsx_runtime","require","import_components","import_forms","import_theme","import_react","import_react_i18next","import_BandFilters","import_FacetList","import_listState","import_RangeFilter","PanelGroup","param","label","children","knobProps","useResolvedKnobs","jsxs","YStack","gapSm","role","jsx","Text","fontWeight","color","textTransform","letterSpacing","userSelect","controls","list","showFavorites","showSort","testID","_controls_sorts","_controls_facets","_controls_bands","_controls_ranges","t","useTranslation","state","update","favorites","sorts","active","activeFilterCount","gapLg","length","Select","sort","onChange","String","options","map","facets","facet","_state_facets_facet_param","_facet_allLabel","reading","FacetList","columns","allLabel","count","total","_ref","_reading_counts_value","_facet_optionLabel","_facet_tint","optionLabel","call","tint","counts","bands","band"],"sources":["../../../src/list/ListFilterPanel.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,uBAAA;AAAAC,QAAA,CAAAD,uBAAA;EAAAE,eAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAT,YAAqC,CAAAK,uBAAA;AACrC,IAAAK,kBAA+B,GAAAC,OAAA;AAC/B,IAAAC,iBAAiC,GAAAD,OAAA;AACjC,IAAAE,YAAA,GAA0BF,OAAA;AAE1B,IAAAG,YAAA,GAAAH,OAAA,CAA+B;AAC/B,IAAAI,YAAA,GAAAJ,OAA2B;AAC3B,IAAAK,oBAA0B,GAAAL,OAAA;AAC1B,IAAAM,kBAAA,GAA2DN,OAAA;AAC3D,IAAAO,gBAAA,GAAAP,OAA0C;AAgBtC,IAAAQ,gBAAA,GAAAR,OAAA;AAHJ,IAAAS,kBAAsB,GAAAT,OAAO,0BAAoD;AAC/E,SAAMU,UAAEA,CAAUC,KAAA;EAClB;IAAAC,KACE;IAAAC;EAAA,IAAAF,KAAA;EACE;IAAAG;EAAA,QAAAX,YAAA,CAAAY,gBAAA;EAAA,OAAC,mBAAAhB,kBAAA,CAAAiB,IAAA,EAAAf,iBAAA,CAAAgB,MAAA;IAAA,GAAAH,SAAA,CAAAI,KAAA;IAAAC,IACE,SAAG;IAAU,YACd,EAAAP,KAAW;IAAAC,QACX,GAAM,eACN,CAAc,GAAAd,kBAAA,CAAAqB,GAAA,EAAAnB,iBAAA,CAAAoB,IAAA;MACd,GAAAP,SAAA,CAAAF,KAAe;MACfU,UAAA,EAAW;MACXC,KAAA,YAAW;MAEVC,aAAA;MAAAC,aAAA;MACHC,UAAA;MACC;MACHb,QAAA,EAAAD;IAEJ,IAQOC,QAAS;EAEd;AAAA;AACA,SACAjB,eAAWA,CAAAe,KAAA;EACX;IAAAgB,QAAA;IAAAC,IAAA;IAAAC,aAAA;IAAAC,QAAA;IAAAC;EAAA,IAAApB,KAAA;EACF,IAAyBqB,eAAA,EAAAC,gBAAA,EAAAC,eAAA,EAAAC,gBAAA;EACvB;IAAMC;EAAE,IAAE,IAAA/B,oBAAI,CAAAgC,cAAA;EACd;IAAMvB;EAAE,IAAU,IAAAX,YAAI,CAAAY,gBAAA;EACtB;IAAMuB,KAAE;IAAAC,MAAO;IAAAC;EAAQ,IAAUZ,IAAI;EACrC,IAAAa,KAAM,IAAAT,eAAiB,GAAAL,QAAU,CAAAc,KAAA,cAAAT,eAAA,cAAAA,eAAA;EACjC,IAAAU,MAAM,OAAAlC,gBAAS,CAAAmC,iBAAA,EAAAL,KAAkB;EAEjC,OACE,mBAAAvC,kBAAA,CAAAiB,IAAA,EAACf,iBAAA,CAAAgB,MAAA;IACE,GAAAH,SAAY,CAAA8B,KAAM;IAEfb,MAAC,KAAAA,MAAA;IAAAlB,QAAA,GAAAiB,QACC,IAAOW,KAAM,CAAAI,MAAA,0BAAA9C,kBAAA,CAAAqB,GAAA,EAAAV,UAAA;MACbE,KAAA,EAAAwB,CAAA,UAAW;MACXvB,QAAA,EAAS,eAAW,IAAUd,kBAAc,CAAAqB,GAAO,EAAAlB,YAAY,CAAA4C,MAAQ;QACvErD,KAAA,EAAA6C,KAAY,CAAAS,IAAE;QAASC,QAAA,WAAAA,SAAAvD,KAAA;UAGzB,OAAA8C,MAAA;YACOQ,IAAA,EAAAE,MAAW,CAAAxD,KAAO;UACrB;QACN;QAEKyD,OAAA,EAAAT,KAAA,CAAAU,GAAA,WAAAJ,IAAA;UAAA;YACCnC,KAAO,EAAAmC,IAAM,CAAAnC,KAAA;YACbnB,KAAO,EAAAsD,IAAM,CAAAtD;UACb;QACA;QACA,YAAW,EAAA2C,CAAA,UAAU;MAAW;IACvB,SACL,EAAgE,EAAAH,gBACzD,GAAAN,QAAa,CAAAyB,MAAA,MAAW,QAAAnB,gBAAA,cAAAA,gBAAA,OAAAkB,GAAA,WAAAE,KAAA;MAAA,IAAAC,yBAC/B,EAAAC,eAAA;MAAA,IAAAC,OACA,GAAO5B,IAAA,CAAMwB,MAAA,CAAAC,KAAA,CAAA1C,KAAc,CAAK;MAAK,OACrC,eAAY,EAAO,EAAAZ,kBAAK,CAAAqB,GAAA,EAAAV,UAAA;QAAAE,KACxB,EAAAyC,KACE,CAAAzC,KAAA;QAAqEC,QACvE,qBAAAd,kBAAA,CAAAqB,GAAA,EAAAb,gBAAA,CAAAkD,SAAA;UACJ7C,KAAA,EAAAyC,KAAA,CAAAzC,KAAA;UAAAnB,KAAA,GAAA6D,yBAAA,GAAAhB,KAAA,CAAAc,MAAA,CAAAC,KAAA,CAAA1C,KAAA,eAAA2C,yBAAA,cAAAA,yBAAA;UAhBaN,QAAM,EAkBvB,SAAAA,SAAAvD,KAAA;YAEH,OAAA8C,MAAA;cACUa,MAAA,EAAU;gBAKV,CAAAC,KAAU,CAAC1C,KAAG,GAAKlB;cAC3B;YAAA;UAEC;UACAiE,OAAO,EAAM;UACb3B,MAAO,KAAMA,MAAO,IAAAsB,KAAM,CAAK1C,KAAK;UACpCuC,OAAK,GACC;YACNzD,KAAW;YACHmB,KAAG,GAAA2C,eAAgB,GAAKF,KAAA,CAAAM,QAAA,cAAAJ,eAAA,cAAAA,eAAA,GAAAnB,CAAA;YAAAwB,KAAA,EAAAhC,IAAA,CAAAiC;UAPrB,GASd,GAAAR,KAAA,CAAAH,OAAA,CAAAC,GAAA,WAAA1D,KAAA;YACA,IACCqE,IAAA,EAAAC,qBAAA;YACG,IAAAC,kBAAA,EAAAC,WAAA;YAAA;cACWxE,KAAC;cACJmB,KAAM,GAAAkD,IAAA,IAAAE,kBAA2B,GAAAX,KAAA,CAAAa,WAAA,cAAAF,kBAAA,uBAAAA,kBAAA,CAAAG,IAAA,CAAAd,KAAA,EAAA5D,KAAA,eAAAqE,IAAA,cAAAA,IAAA,GAAArE,KAAA;cAC/B2E,IAAA,EAAM,CAAAH,WAAS,GAAAZ,KAAA,CAAAe,IAAgB,MAAM,QAAAH,WAAe,uBAAAA,WAAA,CAAAE,IAAA,CAAAd,KAAA,EAAA5D,KAAA;cAC7DmE,KAAA,EAAcJ,OAAM,IAAA5B,IAAA,CAAAiC,KAAA,eAAAE,qBAAA,GAAAP,OAAA,CAAAa,MAAA,CAAA5E,KAAA,eAAAsE,qBAAA,cAAAA,qBAAA;YACd;UACN,EAAQ;QAIS;MAErB,GACEV,KAAA,CAAA1C,KAAA;IACH,IAOH,EAAAuB,eAAA,GAAAP,QAAA,CAAA2C,KAAA,cAAApC,eAAA,cAAAA,eAAA,OAAAiB,GAAA,WAAAoB,IAAA;MAEJ,0BAAAxE,kBAAA,CAAAqB,GAAA,EAAAV,UAAA","ignoreList":[]}

package/dist/cjs/list/ListSidebarToolbar.cjs

@@ -0,0 +1,204 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ListSidebarToolbar_exports = {};
+__export(ListSidebarToolbar_exports, {
+  ListSidebarToolbar: () => ListSidebarToolbar
+});
+module.exports = __toCommonJS(ListSidebarToolbar_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_ListFilterPanel = require("./ListFilterPanel.cjs");
+var import_listState = require("./listState.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ListSidebarToolbar({
+  controls,
+  list,
+  searchId,
+  searchPlaceholder,
+  showSearch,
+  showFavorites,
+  shuffle,
+  shufflePanel,
+  menuItems,
+  testID
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [sheetOpen, setSheetOpen] = (0, import_react2.useState)(false);
+  const {
+    state,
+    update
+  } = list;
+  const sorts = controls.sorts ?? [];
+  const active = (0, import_listState.activeFilterCount)(state);
+  const filtersLabel = active > 0 ? t("Filters ({{count}})", {
+    count: active
+  }) : t("Filters");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.gap,
+    testID: `${testID}-controls`,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      ...knobProps.gap,
+      alignItems: "center",
+      children: [showSearch ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        id: searchId,
+        flex: 1,
+        minWidth: 0,
+        alignItems: "center",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+          flex: 1,
+          minWidth: 0,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
+            value: list.searchText,
+            onChange: list.setSearchText,
+            onSearch: text => update({
+              search: text
+            }),
+            placeholder: searchPlaceholder ?? t("Search..."),
+            "aria-label": searchPlaceholder ?? t("Search..."),
+            debounceMs: 200,
+            clearable: true
+          })
+        })
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        flex: 1
+      }), sorts.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        flexShrink: 0,
+        "$max-md": {
+          display: "none"
+        },
+        testID: `${testID}-sort`,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+          value: state.sort,
+          onChange: value => update({
+            sort: String(value)
+          }),
+          options: sorts.map(sort => ({
+            label: sort.label,
+            value: sort.value
+          })),
+          placeholder: t("Sort by"),
+          "aria-label": t("Sort by")
+        })
+      }) : null, shuffle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        flexShrink: 0,
+        "$max-md": {
+          display: "none"
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
+          content: t("Open a random record"),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            outlined: !shuffle.open,
+            theme: shuffle.open ? "accent" : void 0,
+            circular: true,
+            onPress: shuffle.toggle,
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DiceFiveIcon, {
+              size: 16
+            }),
+            "aria-label": t("Surprise me"),
+            "aria-expanded": shuffle.open,
+            "aria-controls": shuffle.panelId,
+            testID: `${testID}-shuffle-toggle`
+          })
+        })
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        flexShrink: 0,
+        display: "none",
+        "$max-md": {
+          display: "flex"
+        },
+        ...knobProps.gap,
+        alignItems: "center",
+        testID: `${testID}-phone-tools`,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Badge, {
+          count: active,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            outlined: active === 0,
+            theme: active > 0 ? "accent" : void 0,
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FadersHorizontalIcon, {
+              size: 16
+            }),
+            onPress: () => setSheetOpen(true),
+            "aria-label": filtersLabel,
+            "aria-haspopup": "dialog",
+            "aria-expanded": sheetOpen,
+            testID: `${testID}-filters-button`,
+            children: t("Filters")
+          })
+        }), menuItems.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu, {
+          items: [...menuItems],
+          placement: "bottom-end",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            outlined: true,
+            circular: true,
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DotsThreeIcon, {
+              size: 20,
+              weight: "bold"
+            }),
+            "aria-label": t("More actions"),
+            testID: `${testID}-more`
+          })
+        }) : null]
+      })]
+    }), shufflePanel, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SheetModal, {
+      open: sheetOpen,
+      onOpenChange: setSheetOpen,
+      scrollable: true,
+      snapPoint: 85,
+      header: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        alignItems: "center",
+        ...knobProps.gap,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          ...knobProps.heading,
+          fontWeight: "700",
+          role: "heading",
+          "aria-level": 2,
+          children: t("Filters")
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          theme: "accent",
+          onPress: () => setSheetOpen(false),
+          testID: `${testID}-filters-done`,
+          children: t("Done")
+        })]
+      }),
+      children: sheetOpen ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        testID: `${testID}-filters-sheet`,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ListFilterPanel.ListFilterPanel, {
+          controls,
+          list,
+          showFavorites,
+          showSort: true,
+          testID: `${testID}-sheet`
+        })
+      }) : null
+    })]
+  });
+}

package/dist/cjs/list/ListSidebarToolbar.native.js

@@ -0,0 +1,221 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ListSidebarToolbar_exports = {};
+__export(ListSidebarToolbar_exports, {
+  ListSidebarToolbar: () => ListSidebarToolbar
+});
+module.exports = __toCommonJS(ListSidebarToolbar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_ListFilterPanel = require("./ListFilterPanel.native.js");
+var import_listState = require("./listState.native.js");
+function ListSidebarToolbar(param) {
+  var {
+    controls,
+    list,
+    searchId,
+    searchPlaceholder,
+    showSearch,
+    showFavorites,
+    shuffle,
+    shufflePanel,
+    menuItems,
+    testID
+  } = param;
+  var _controls_sorts;
+  var {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var [sheetOpen, setSheetOpen] = (0, import_react2.useState)(false);
+  var {
+    state,
+    update
+  } = list;
+  var sorts = (_controls_sorts = controls.sorts) !== null && _controls_sorts !== void 0 ? _controls_sorts : [];
+  var active = (0, import_listState.activeFilterCount)(state);
+  var filtersLabel = active > 0 ? t("Filters ({{count}})", {
+    count: active
+  }) : t("Filters");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.YStack, {
+    ...knobProps.gap,
+    testID: `${testID}-controls`,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+      ...knobProps.gap,
+      alignItems: "center",
+      children: [showSearch ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        id: searchId,
+        flex: 1,
+        minWidth: 0,
+        alignItems: "center",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+          flex: 1,
+          minWidth: 0,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.SearchInput, {
+            value: list.searchText,
+            onChange: list.setSearchText,
+            onSearch: function onSearch(text) {
+              return update({
+                search: text
+              });
+            },
+            placeholder: searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : t("Search..."),
+            "aria-label": searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : t("Search..."),
+            debounceMs: 200,
+            clearable: true
+          })
+        })
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        flex: 1
+      }), sorts.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        // responsive-parity: Sort moves into the phone Filters sheet.
+        flexShrink: 0,
+        "$max-md": {
+          display: "none"
+        },
+        testID: `${testID}-sort`,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
+          value: state.sort,
+          onChange: function onChange(value) {
+            return update({
+              sort: String(value)
+            });
+          },
+          options: sorts.map(function (sort) {
+            return {
+              label: sort.label,
+              value: sort.value
+            };
+          }),
+          placeholder: t("Sort by"),
+          "aria-label": t("Sort by")
+        })
+      }) : null, shuffle ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.XStack, {
+        // responsive-parity: Surprise me remains in the phone More actions menu.
+        flexShrink: 0,
+        "$max-md": {
+          display: "none"
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
+          content: t("Open a random record"),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            outlined: !shuffle.open,
+            theme: shuffle.open ? "accent" : void 0,
+            circular: true,
+            onPress: shuffle.toggle,
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DiceFiveIcon, {
+              size: 16
+            }),
+            "aria-label": t("Surprise me"),
+            "aria-expanded": shuffle.open,
+            "aria-controls": shuffle.panelId,
+            testID: `${testID}-shuffle-toggle`
+          })
+        })
+      }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        flexShrink: 0,
+        display: "none",
+        "$max-md": {
+          display: "flex"
+        },
+        ...knobProps.gap,
+        alignItems: "center",
+        testID: `${testID}-phone-tools`,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Badge, {
+          count: active,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            outlined: active === 0,
+            theme: active > 0 ? "accent" : void 0,
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FadersHorizontalIcon, {
+              size: 16
+            }),
+            onPress: function onPress() {
+              return setSheetOpen(true);
+            },
+            "aria-label": filtersLabel,
+            "aria-haspopup": "dialog",
+            "aria-expanded": sheetOpen,
+            testID: `${testID}-filters-button`,
+            children: t("Filters")
+          })
+        }), menuItems.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu, {
+          items: [...menuItems],
+          placement: "bottom-end",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            outlined: true,
+            circular: true,
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DotsThreeIcon, {
+              size: 20,
+              weight: "bold"
+            }),
+            "aria-label": t("More actions"),
+            testID: `${testID}-more`
+          })
+        }) : null]
+      })]
+    }), shufflePanel, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.SheetModal, {
+      open: sheetOpen,
+      onOpenChange: setSheetOpen,
+      scrollable: true,
+      snapPoint: 85,
+      header: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+        alignItems: "center",
+        ...knobProps.gap,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          ...knobProps.heading,
+          fontWeight: "700",
+          role: "heading",
+          "aria-level": 2,
+          children: t("Filters")
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          theme: "accent",
+          onPress: function onPress() {
+            return setSheetOpen(false);
+          },
+          testID: `${testID}-filters-done`,
+          children: t("Done")
+        })]
+      }),
+      children: sheetOpen ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.YStack, {
+        testID: `${testID}-filters-sheet`,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ListFilterPanel.ListFilterPanel, {
+          controls,
+          list,
+          showFavorites,
+          showSort: true,
+          testID: `${testID}-sheet`
+        })
+      }) : null
+    })]
+  });
+}
+//# sourceMappingURL=ListSidebarToolbar.native.js.map

package/dist/cjs/list/ListSidebarToolbar.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ListSidebarToolbar_exports","__export","ListSidebarToolbar","module","exports","import_jsx_runtime","require","import_components","import_forms","import_theme","import_react","import_react2","import_react_i18next","import_ListFilterPanel","import_listState","param","controls","list","searchId","searchPlaceholder","showSearch","showFavorites","shuffle","shufflePanel","menuItems","testID","_controls_sorts","t","useTranslation","knobProps","useResolvedKnobs","sheetOpen","setSheetOpen","useState","state","update","sorts","active","activeFilterCount","filtersLabel","count","jsxs","YStack","gap","children","XStack","alignItems","jsx","id","flex","minWidth","SearchInput","searchText","onChange","setSearchText","onSearch","text","search","placeholder","debounceMs","clearable","length","flexShrink","display","Select","sort","String","options","map","label","Tooltip","content","Button","outlined","open","theme","circular","onPress","toggle","icon","DiceFiveIcon","size","panelId","Badge","FadersHorizontalIcon","DropdownMenu","items","placement","DotsThreeIcon","weight","SheetModal"],"sources":["../../../src/list/ListSidebarToolbar.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}