@stenajs-webui/filter 17.6.0 → 17.9.0

package/dist/index.es.js

@@ -1,407 +1,493 @@
-import * as React from 'react';
-import { createContext, useContext, useCallback, useState, useReducer, useMemo } from 'react';
-import { Drawer } from '@stenajs-webui/modal';
-import { cssColor } from '@stenajs-webui/theme';
-import { Row, Indent, Heading, Column, SeparatorLine, truthyKeysAsList, Text, Box } from '@stenajs-webui/core';
-import { Icon, stenaSliders, SecondaryButton, stenaTimes, Spinner, Banner, FlatButton, Chip } from '@stenajs-webui/elements';
-import { Collapsible, CollapsibleContent, CollapsibleClickableContent } from '@stenajs-webui/panels';
-import { upperFirst, lowerCase } from 'lodash';
-import { combineReducers } from 'redux';
-import { reducerIdGate, createValueByIdReducer, createEntityReducer, reducerIdGateAction, createEntityActions, createValueByIdActions } from '@stenajs-webui/redux';
-import styled from '@emotion/styled';
-import { Checkbox } from '@stenajs-webui/forms';
-import { ChipMultiSelect } from '@stenajs-webui/select';
-import { stringsToDateRange, dateRangeToStrings, DateRangeCalendar } from '@stenajs-webui/calendar';
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __makeTemplateObject(cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-}
-
-var SearchFilterPanelHeader = function (_a) {
-    var onRequestClose = _a.onRequestClose, _b = _a.header, header = _b === void 0 ? "Filters" : _b;
-    return (React.createElement(Row, { height: "56px", justifyContent: "space-between", alignItems: "center", indent: 2 },
-        React.createElement(Row, { alignItems: "center" },
-            React.createElement(Icon, { icon: stenaSliders, color: cssColor("--lhds-color-ui-800"), size: 24 }),
-            React.createElement(Indent, null),
-            React.createElement(Heading, { variant: "h4" }, header)),
-        React.createElement(SecondaryButton, { leftIcon: stenaTimes, onClick: onRequestClose })));
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { createContext, useContext, useCallback, useState, useReducer, useMemo } from "react";
+import { Drawer } from "@stenajs-webui/modal";
+import { cssColor } from "@stenajs-webui/theme";
+import { Row, Indent, Heading, Column, SeparatorLine, truthyKeysAsList, Text, Box } from "@stenajs-webui/core";
+import { Icon, stenaSliders, SecondaryButton, stenaTimes, Spinner, Banner, FlatButton, Chip } from "@stenajs-webui/elements";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Collapsible, CollapsibleContent, CollapsibleClickableContent } from "@stenajs-webui/panels";
+import { upperFirst, lowerCase } from "lodash";
+import { combineReducers } from "redux";
+import { reducerIdGate, createValueByIdReducer, createEntityReducer, reducerIdGateAction, createEntityActions, createValueByIdActions } from "@stenajs-webui/redux";
+import styled from "@emotion/styled";
+import { Checkbox } from "@stenajs-webui/forms";
+import { ChipMultiSelect } from "@stenajs-webui/select";
+import { stringsToDateRange, dateRangeToStrings, DateRangeCalendar } from "@stenajs-webui/calendar";
+const SearchFilterPanelHeader = ({
+  onRequestClose,
+  header = "Filters"
+}) => {
+  return /* @__PURE__ */ jsxs(Row, {
+    height: "56px",
+    justifyContent: "space-between",
+    alignItems: "center",
+    indent: 2,
+    children: [/* @__PURE__ */ jsxs(Row, {
+      alignItems: "center",
+      children: [/* @__PURE__ */ jsx(Icon, {
+        icon: stenaSliders,
+        color: cssColor("--lhds-color-ui-800"),
+        size: 24
+      }), /* @__PURE__ */ jsx(Indent, {}), /* @__PURE__ */ jsx(Heading, {
+        variant: "h4",
+        children: header
+      })]
+    }), /* @__PURE__ */ jsx(SecondaryButton, {
+      leftIcon: stenaTimes,
+      onClick: onRequestClose
+    })]
+  });
 };
-
-var SearchFilterStateContext = createContext(null);
-var useSearchFilterState = function () {
-    var c = useContext(SearchFilterStateContext);
-    if (!c) {
-        throw new Error("Missing search filter context, wrap components with SearchFilterContext component.");
-    }
-    return c;
+const SearchFilterStateContext = createContext(null);
+const useSearchFilterState = () => {
+  const c = useContext(SearchFilterStateContext);
+  if (!c) {
+    throw new Error("Missing search filter context, wrap components with SearchFilterContext component.");
+  }
+  return c;
 };
-
-var SearchFilterDispatchContext = createContext(null);
-var useSearchFilterDispatch = function () {
-    var c = useContext(SearchFilterDispatchContext);
-    if (!c) {
-        throw new Error("Missing search filter dispatch context.");
-    }
-    return c;
+const SearchFilterDispatchContext = createContext(null);
+const useSearchFilterDispatch = () => {
+  const c = useContext(SearchFilterDispatchContext);
+  if (!c) {
+    throw new Error("Missing search filter dispatch context.");
+  }
+  return c;
 };
-
-var SearchFilterActionsContext = createContext(null);
-var useSearchFilterActions = function () {
-    var c = useContext(SearchFilterActionsContext);
-    if (!c) {
-        throw new Error("Missing search filter actions context.");
-    }
-    return c;
+const SearchFilterActionsContext = createContext(null);
+const useSearchFilterActions = () => {
+  const c = useContext(SearchFilterActionsContext);
+  if (!c) {
+    throw new Error("Missing search filter actions context.");
+  }
+  return c;
 };
-
-var SearchFilterDrawer = function (_a) {
-    var children = _a.children, header = _a.header, drawerProps = __rest(_a, ["children", "header"]);
-    var open = useSearchFilterState().settings.open;
-    var dispatch = useSearchFilterDispatch();
-    var actions = useSearchFilterActions();
-    var closeDrawer = useCallback(function () {
-        dispatch(actions.closeFilters());
-    }, [actions, dispatch]);
-    return (React.createElement(Drawer, __assign({ background: cssColor("--lhds-color-ui-50"), width: "370px", isOpen: open, onRequestClose: closeDrawer }, drawerProps),
-        React.createElement(Column, null,
-            React.createElement(SearchFilterPanelHeader, { onRequestClose: closeDrawer, header: header }),
-            React.createElement(SeparatorLine, null),
-            children)));
+const SearchFilterDrawer = ({
+  children,
+  header,
+  ...drawerProps
+}) => {
+  const {
+    settings: {
+      open
+    }
+  } = useSearchFilterState();
+  const dispatch = useSearchFilterDispatch();
+  const actions = useSearchFilterActions();
+  const closeDrawer = useCallback(() => {
+    dispatch(actions.closeFilters());
+  }, [actions, dispatch]);
+  return /* @__PURE__ */ jsx(Drawer, {
+    background: cssColor("--lhds-color-ui-50"),
+    width: "370px",
+    isOpen: open,
+    onRequestClose: closeDrawer,
+    ...drawerProps,
+    children: /* @__PURE__ */ jsxs(Column, {
+      children: [/* @__PURE__ */ jsx(SearchFilterPanelHeader, {
+        onRequestClose: closeDrawer,
+        header
+      }), /* @__PURE__ */ jsx(SeparatorLine, {}), children]
+    })
+  });
 };
-
-var SearchFilterButton = function (_a) {
-    var _b = _a.label, label = _b === void 0 ? "Filters" : _b;
-    var dispatch = useSearchFilterDispatch();
-    var actions = useSearchFilterActions();
-    var onClickButton = useCallback(function () {
-        dispatch(actions.openFilters());
-    }, [actions, dispatch]);
-    return (React.createElement(SecondaryButton, { label: label, leftIcon: stenaSliders, onClick: onClickButton }));
+const SearchFilterButton = ({
+  label = "Filters"
+}) => {
+  const dispatch = useSearchFilterDispatch();
+  const actions = useSearchFilterActions();
+  const onClickButton = useCallback(() => {
+    dispatch(actions.openFilters());
+  }, [actions, dispatch]);
+  return /* @__PURE__ */ jsx(SecondaryButton, {
+    label,
+    leftIcon: stenaSliders,
+    onClick: onClickButton
+  });
 };
-
-var SearchFilterSection = function SearchFilterSection(_a) {
-    var _b;
-    var sectionId = _a.sectionId, label = _a.label, contentLeft = _a.contentLeft, contentRight = _a.contentRight, loading = _a.loading, error = _a.error, onRetry = _a.onRetry, disableContentPadding = _a.disableContentPadding, children = _a.children;
-    var state = useSearchFilterState();
-    var dispatch = useSearchFilterDispatch();
-    var actions = useSearchFilterActions();
-    var expanded = (_b = state.expandedSections.values[sectionId]) !== null && _b !== void 0 ? _b : false;
-    var onClickLabel = useCallback(function () {
-        dispatch(actions.setSectionExpanded(sectionId, !expanded));
-    }, [actions, dispatch, expanded, sectionId]);
-    var activeLabel = label !== null && label !== void 0 ? label : formatColumnIdToHeaderCellLabel(sectionId);
-    return (React.createElement(Collapsible, { label: activeLabel, collapsed: !expanded, onClick: onClickLabel, contentLeft: contentLeft, contentRight: contentRight }, loading ? (React.createElement(CollapsibleContent, null,
-        React.createElement(Row, { spacing: true, justifyContent: "center", flex: 1 },
-            React.createElement(Spinner, { size: "small" })))) : error ? (React.createElement(Banner, { variant: "error", text: error, contentRight: onRetry ? React.createElement(FlatButton, { label: "Retry", onClick: onRetry }) : null })) : disableContentPadding ? (children) : (React.createElement(CollapsibleContent, null, children))));
-};
-var formatColumnIdToHeaderCellLabel = function (columnId) {
-    return upperFirst(lowerCase(columnId));
+const SearchFilterSection = function SearchFilterSection2({
+  sectionId,
+  label,
+  contentLeft,
+  contentRight,
+  loading,
+  error,
+  onRetry,
+  disableContentPadding,
+  children
+}) {
+  var _a;
+  const state = useSearchFilterState();
+  const dispatch = useSearchFilterDispatch();
+  const actions = useSearchFilterActions();
+  const expanded = (_a = state.expandedSections.values[sectionId]) != null ? _a : false;
+  const onClickLabel = useCallback(() => {
+    dispatch(actions.setSectionExpanded(sectionId, !expanded));
+  }, [actions, dispatch, expanded, sectionId]);
+  const activeLabel = label != null ? label : formatColumnIdToHeaderCellLabel(sectionId);
+  return /* @__PURE__ */ jsx(Collapsible, {
+    label: activeLabel,
+    collapsed: !expanded,
+    onClick: onClickLabel,
+    contentLeft,
+    contentRight,
+    children: loading ? /* @__PURE__ */ jsx(CollapsibleContent, {
+      children: /* @__PURE__ */ jsx(Row, {
+        spacing: true,
+        justifyContent: "center",
+        flex: 1,
+        children: /* @__PURE__ */ jsx(Spinner, {
+          size: "small"
+        })
+      })
+    }) : error ? /* @__PURE__ */ jsx(Banner, {
+      variant: "error",
+      text: error,
+      contentRight: onRetry ? /* @__PURE__ */ jsx(FlatButton, {
+        label: "Retry",
+        onClick: onRetry
+      }) : null
+    }) : disableContentPadding ? children : /* @__PURE__ */ jsx(CollapsibleContent, {
+      children
+    })
+  });
 };
-
-var SearchFilterModelContext = createContext(null);
-var useSearchFilterModel = function () {
-    var c = useContext(SearchFilterModelContext);
-    if (!c) {
-        throw new Error("Missing search filter context, wrap components with SearchFilterContext component.");
-    }
-    return c;
+const formatColumnIdToHeaderCellLabel = (columnId) => upperFirst(lowerCase(columnId));
+const SearchFilterModelContext = createContext(null);
+const useSearchFilterModel = () => {
+  const c = useContext(SearchFilterModelContext);
+  if (!c) {
+    throw new Error("Missing search filter context, wrap components with SearchFilterContext component.");
+  }
+  return c;
 };
-
-var SearchFilterContext = function SearchFilterScope(_a) {
-    var state = _a.state, dispatch = _a.dispatch, actions = _a.actions, children = _a.children;
-    return (React.createElement(SearchFilterDispatchContext.Provider, { value: dispatch },
-        React.createElement(SearchFilterActionsContext.Provider, { value: actions },
-            React.createElement(SearchFilterStateContext.Provider, { value: state },
-                React.createElement(SearchFilterModelContext.Provider, { value: state.formModel }, children)))));
+const SearchFilterContext = function SearchFilterScope({
+  state,
+  dispatch,
+  actions,
+  children
+}) {
+  return /* @__PURE__ */ jsx(SearchFilterDispatchContext.Provider, {
+    value: dispatch,
+    children: /* @__PURE__ */ jsx(SearchFilterActionsContext.Provider, {
+      value: actions,
+      children: /* @__PURE__ */ jsx(SearchFilterStateContext.Provider, {
+        value: state,
+        children: /* @__PURE__ */ jsx(SearchFilterModelContext.Provider, {
+          value: state.formModel,
+          children
+        })
+      })
+    })
+  });
 };
-
-var createSearchFilterInitialState = function (initialFormModel) { return ({
-    settings: {
-        open: false,
-    },
-    formModel: initialFormModel,
-    expandedSections: { values: {} },
-}); };
-var createSearchFilterReducer = function (reducerId, initialState) {
-    return combineReducers({
-        expandedSections: reducerIdGate(getReducerIdFor(reducerId, "expandedSections"), createValueByIdReducer(initialState.expandedSections)),
-        formModel: reducerIdGate(getReducerIdFor(reducerId, "formModel"), createEntityReducer(initialState.formModel)),
-        settings: reducerIdGate(getReducerIdFor(reducerId, "settings"), createEntityReducer(initialState.settings)),
-    });
-};
-var createSearchFilterActions = function (reducerId, initialFormModel) { return ({
-    openFilters: function () {
-        return reducerIdGateAction(getReducerIdFor(reducerId, "settings"), createEntityActions().setEntityFields({
-            open: true,
-        }));
-    },
-    closeFilters: function () {
-        return reducerIdGateAction(getReducerIdFor(reducerId, "settings"), createEntityActions().setEntityFields({
-            open: false,
-        }));
-    },
-    setFormModelFields: function (fields) {
-        return reducerIdGateAction(getReducerIdFor(reducerId, "formModel"), createEntityActions().setEntityFields(fields));
-    },
-    clearFormModel: function () {
-        return reducerIdGateAction(getReducerIdFor(reducerId, "formModel"), createEntityActions().setEntity(initialFormModel));
-    },
-    expandSection: function (section) {
-        return reducerIdGateAction(getReducerIdFor(reducerId, "expandedSections"), createValueByIdActions().setValue(section, true));
-    },
-    collapseSection: function (section) {
-        return reducerIdGateAction(getReducerIdFor(reducerId, "expandedSections"), createValueByIdActions().setValue(section, false));
-    },
-    setSectionExpanded: function (section, expanded) {
-        return reducerIdGateAction(getReducerIdFor(reducerId, "expandedSections"), createValueByIdActions().setValue(section, expanded));
-    },
-    clearExpandedSections: function () {
-        return reducerIdGateAction(getReducerIdFor(reducerId, "expandedSections"), createValueByIdActions().clearAllValues());
-    },
-}); };
-var getReducerIdFor = function (reducerId, reducerIdSuffix) { return "".concat(reducerId, ".").concat(reducerIdSuffix); };
-
-var useLocalSearchFilterState = function (initialState) {
-    var reducer = useState(function () {
-        return createSearchFilterReducer("local", initialState);
-    })[0];
-    var actions = useState(function () {
-        return createSearchFilterActions("local", initialState.formModel);
-    })[0];
-    var _a = useReducer(reducer, initialState), state = _a[0], dispatch = _a[1];
-    return {
-        actions: actions,
-        state: state,
-        dispatch: dispatch,
-    };
+const createSearchFilterInitialState = (initialFormModel) => ({
+  settings: {
+    open: false
+  },
+  formModel: initialFormModel,
+  expandedSections: { values: {} }
+});
+const createSearchFilterReducer = (reducerId, initialState) => combineReducers({
+  expandedSections: reducerIdGate(getReducerIdFor(reducerId, "expandedSections"), createValueByIdReducer(initialState.expandedSections)),
+  formModel: reducerIdGate(getReducerIdFor(reducerId, "formModel"), createEntityReducer(initialState.formModel)),
+  settings: reducerIdGate(getReducerIdFor(reducerId, "settings"), createEntityReducer(initialState.settings))
+});
+const createSearchFilterActions = (reducerId, initialFormModel) => ({
+  openFilters: () => reducerIdGateAction(getReducerIdFor(reducerId, "settings"), createEntityActions().setEntityFields({
+    open: true
+  })),
+  closeFilters: () => reducerIdGateAction(getReducerIdFor(reducerId, "settings"), createEntityActions().setEntityFields({
+    open: false
+  })),
+  setFormModelFields: (fields) => reducerIdGateAction(getReducerIdFor(reducerId, "formModel"), createEntityActions().setEntityFields(fields)),
+  clearFormModel: () => reducerIdGateAction(getReducerIdFor(reducerId, "formModel"), createEntityActions().setEntity(initialFormModel)),
+  expandSection: (section) => reducerIdGateAction(getReducerIdFor(reducerId, "expandedSections"), createValueByIdActions().setValue(section, true)),
+  collapseSection: (section) => reducerIdGateAction(getReducerIdFor(reducerId, "expandedSections"), createValueByIdActions().setValue(section, false)),
+  setSectionExpanded: (section, expanded) => reducerIdGateAction(getReducerIdFor(reducerId, "expandedSections"), createValueByIdActions().setValue(section, expanded)),
+  clearExpandedSections: () => reducerIdGateAction(getReducerIdFor(reducerId, "expandedSections"), createValueByIdActions().clearAllValues())
+});
+const getReducerIdFor = (reducerId, reducerIdSuffix) => `${reducerId}.${reducerIdSuffix}`;
+const useLocalSearchFilterState = (initialState) => {
+  const [reducer] = useState(() => createSearchFilterReducer("local", initialState));
+  const [actions] = useState(() => createSearchFilterActions("local", initialState.formModel));
+  const [state, dispatch] = useReducer(reducer, initialState);
+  return {
+    actions,
+    state,
+    dispatch
+  };
 };
-
-var SearchFilterLocalStateContext = function SearchFilterLocalScope(_a) {
-    var initialFormModel = _a.initialFormModel, children = _a.children;
-    var _b = useLocalSearchFilterState(createSearchFilterInitialState(initialFormModel)), state = _b.state, actions = _b.actions, dispatch = _b.dispatch;
-    return (React.createElement(SearchFilterContext, { state: state, actions: actions, dispatch: dispatch }, children));
+const SearchFilterLocalStateContext = function SearchFilterLocalScope({
+  initialFormModel,
+  children
+}) {
+  const {
+    state,
+    actions,
+    dispatch
+  } = useLocalSearchFilterState(createSearchFilterInitialState(initialFormModel));
+  return /* @__PURE__ */ jsx(SearchFilterContext, {
+    state,
+    actions,
+    dispatch,
+    children
+  });
 };
-
-var ChipSpacer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: calc(var(--swui-metrics-spacing) / 2)\n    calc(var(--swui-metrics-indent) / 2);\n"], ["\n  padding: calc(var(--swui-metrics-spacing) / 2)\n    calc(var(--swui-metrics-indent) / 2);\n"])));
-var templateObject_1;
-
-var SearchFilterChips = function (_a) {
-    var children = _a.children, _b = _a.disableClearAllButton, disableClearAllButton = _b === void 0 ? false : _b;
-    var dispatch = useSearchFilterDispatch();
-    var actions = useSearchFilterActions();
-    var onClickClearAll = useCallback(function () { return dispatch(actions.clearFormModel()); }, [actions, dispatch]);
-    return (React.createElement(Row, { flexWrap: "wrap" },
-        children,
-        !disableClearAllButton && (React.createElement(ChipSpacer, null,
-            React.createElement(FlatButton, { size: "small", label: "Clear all", onClick: onClickClearAll })))));
+const ChipSpacer = styled.div`
+  padding: calc(var(--swui-metrics-spacing) / 2)
+    calc(var(--swui-metrics-indent) / 2);
+`;
+const SearchFilterChips = ({
+  children,
+  disableClearAllButton = false
+}) => {
+  const dispatch = useSearchFilterDispatch();
+  const actions = useSearchFilterActions();
+  const onClickClearAll = useCallback(() => dispatch(actions.clearFormModel()), [actions, dispatch]);
+  return /* @__PURE__ */ jsxs(Row, {
+    flexWrap: "wrap",
+    children: [children, !disableClearAllButton && /* @__PURE__ */ jsx(ChipSpacer, {
+      children: /* @__PURE__ */ jsx(FlatButton, {
+        size: "small",
+        label: "Clear all",
+        onClick: onClickClearAll
+      })
+    })]
+  });
 };
-
-var EmptyChip = function EmptyChip(_a) {
-    var label = _a.label, sectionId = _a.sectionId;
-    var dispatch = useSearchFilterDispatch();
-    var actions = useSearchFilterActions();
-    var onClickLabel = useCallback(function () {
-        dispatch(actions.clearExpandedSections());
-        dispatch(actions.expandSection(sectionId));
-        dispatch(actions.openFilters());
-    }, [actions, dispatch, sectionId]);
-    return (React.createElement(ChipSpacer, null,
-        React.createElement(Chip, { label: label, variant: "secondary", onClick: onClickLabel })));
+const EmptyChip = function EmptyChip2({
+  label,
+  sectionId
+}) {
+  const dispatch = useSearchFilterDispatch();
+  const actions = useSearchFilterActions();
+  const onClickLabel = useCallback(() => {
+    dispatch(actions.clearExpandedSections());
+    dispatch(actions.expandSection(sectionId));
+    dispatch(actions.openFilters());
+  }, [actions, dispatch, sectionId]);
+  return /* @__PURE__ */ jsx(ChipSpacer, {
+    children: /* @__PURE__ */ jsx(Chip, {
+      label,
+      variant: "secondary",
+      onClick: onClickLabel
+    })
+  });
 };
-
-var SearchFilterChip = function SearchFilterChip(_a) {
-    var sectionId = _a.sectionId, label = _a.label, value = _a.value, onClickRemove = _a.onClickRemove;
-    var dispatch = useSearchFilterDispatch();
-    var actions = useSearchFilterActions();
-    var setFormModelFields = useCallback(function (fields) {
-        return dispatch(actions.setFormModelFields(fields));
-    }, [dispatch, actions]);
-    var onClickRemoveHandler = useCallback(function () {
-        onClickRemove === null || onClickRemove === void 0 ? void 0 : onClickRemove({ value: value, setFormModelFields: setFormModelFields });
-    }, [onClickRemove, setFormModelFields, value]);
-    var onClickLabel = useCallback(function () {
-        dispatch(actions.clearExpandedSections());
-        dispatch(actions.expandSection(sectionId));
-        dispatch(actions.openFilters());
-    }, [actions, dispatch, sectionId]);
-    return (React.createElement(ChipSpacer, null,
-        React.createElement(Chip, { label: label !== null && label !== void 0 ? label : sectionId, onClick: onClickLabel, onClickRemove: onClickRemove ? onClickRemoveHandler : undefined })));
+const SearchFilterChip = function SearchFilterChip2({
+  sectionId,
+  label,
+  value,
+  onClickRemove
+}) {
+  const dispatch = useSearchFilterDispatch();
+  const actions = useSearchFilterActions();
+  const setFormModelFields = useCallback((fields) => dispatch(actions.setFormModelFields(fields)), [dispatch, actions]);
+  const onClickRemoveHandler = useCallback(() => {
+    onClickRemove == null ? void 0 : onClickRemove({
+      value,
+      setFormModelFields
+    });
+  }, [onClickRemove, setFormModelFields, value]);
+  const onClickLabel = useCallback(() => {
+    dispatch(actions.clearExpandedSections());
+    dispatch(actions.expandSection(sectionId));
+    dispatch(actions.openFilters());
+  }, [actions, dispatch, sectionId]);
+  return /* @__PURE__ */ jsx(ChipSpacer, {
+    children: /* @__PURE__ */ jsx(Chip, {
+      label: label != null ? label : sectionId,
+      onClick: onClickLabel,
+      onClickRemove: onClickRemove ? onClickRemoveHandler : void 0
+    })
+  });
 };
-
-var SectionChips = function SectionChips(_a) {
-    var sectionId = _a.sectionId, chips = _a.chips, emptyChipLabel = _a.emptyChipLabel, onClickRemoveOnChip = _a.onClickRemoveOnChip;
-    if (!(chips === null || chips === void 0 ? void 0 : chips.length)) {
-        if (!emptyChipLabel) {
-            return null;
-        }
-        return React.createElement(EmptyChip, { sectionId: sectionId, label: emptyChipLabel });
-    }
-    return (React.createElement(React.Fragment, null, chips.map(function (_a) {
-        var label = _a.label, value = _a.value;
-        return (React.createElement(SearchFilterChip, { key: value, label: label !== null && label !== void 0 ? label : sectionId, sectionId: sectionId, onClickRemove: onClickRemoveOnChip, value: value }));
-    })));
+const SectionChips = function SectionChips2({
+  sectionId,
+  chips,
+  emptyChipLabel,
+  onClickRemoveOnChip
+}) {
+  if (!(chips == null ? void 0 : chips.length)) {
+    if (!emptyChipLabel) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(EmptyChip, {
+      sectionId,
+      label: emptyChipLabel
+    });
+  }
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: chips.map(({
+      label,
+      value
+    }) => /* @__PURE__ */ jsx(SearchFilterChip, {
+      label: label != null ? label : sectionId,
+      sectionId,
+      onClickRemove: onClickRemoveOnChip,
+      value
+    }, value))
+  });
 };
-
-var createChipsPropsForBooleanRecord = function (formModel, fieldName, options) { return ({
-    chips: createChipsForBooleanRecord(formModel[fieldName], options),
-    onClickRemoveOnChip: createOnClickRemoveOnChipForBooleanRecord(formModel, fieldName),
-}); };
-var createChipsForBooleanRecord = function (booleanRecord, options) {
-    return truthyKeysAsList(booleanRecord).map(function (key) {
-        var _a;
-        var option = options === null || options === void 0 ? void 0 : options.find(function (o) { return o.value === key; });
-        return { value: key, label: (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : key };
-    });
-};
-var createOnClickRemoveOnChipForBooleanRecord = function (formModel, fieldName) {
-    return function (_a) {
-        var _b;
-        var setFormModelFields = _a.setFormModelFields, value = _a.value;
-        var newRecord = __assign({}, formModel[fieldName]);
-        newRecord[value] = false;
-        setFormModelFields((_b = {},
-            _b[fieldName] = newRecord,
-            _b));
-    };
+const createChipsPropsForBooleanRecord = (formModel, fieldName, options) => ({
+  chips: createChipsForBooleanRecord(formModel[fieldName], options),
+  onClickRemoveOnChip: createOnClickRemoveOnChipForBooleanRecord(formModel, fieldName)
+});
+const createChipsForBooleanRecord = (booleanRecord, options) => truthyKeysAsList(booleanRecord).map((key) => {
+  var _a;
+  const option = options == null ? void 0 : options.find((o) => o.value === key);
+  return { value: key, label: (_a = option == null ? void 0 : option.label) != null ? _a : key };
+});
+const createOnClickRemoveOnChipForBooleanRecord = (formModel, fieldName) => {
+  return ({ setFormModelFields, value }) => {
+    const newRecord = { ...formModel[fieldName] };
+    newRecord[value] = false;
+    setFormModelFields({
+      [fieldName]: newRecord
+    });
+  };
 };
-
-var SimpleCheckboxListSection = function (_a) {
-    var options = _a.options, value = _a.value, onValueChange = _a.onValueChange, sectionProps = __rest(_a, ["options", "value", "onValueChange"]);
-    return (React.createElement(SearchFilterSection, __assign({ disableContentPadding: true }, sectionProps),
-        React.createElement(Column, { maxHeight: "400px", overflowY: "auto", flex: 1 }, options === null || options === void 0 ? void 0 : options.map(function (d) { return (React.createElement(CollapsibleClickableContent, { key: d.value, onClick: function () {
-                var _a;
-                if (value && onValueChange) {
-                    var sel = !value[d.value];
-                    onValueChange(__assign(__assign({}, value), (_a = {}, _a[d.value] = sel, _a)));
-                }
-            }, contentLeft: React.createElement(Checkbox, { tabIndex: -1, value: value === null || value === void 0 ? void 0 : value[d.value] }) },
-            React.createElement(Text, null, d.label))); }))));
+const SimpleCheckboxListSection = ({
+  options,
+  value,
+  onValueChange,
+  ...sectionProps
+}) => /* @__PURE__ */ jsx(SearchFilterSection, {
+  disableContentPadding: true,
+  ...sectionProps,
+  children: /* @__PURE__ */ jsx(Column, {
+    maxHeight: "400px",
+    overflowY: "auto",
+    flex: 1,
+    children: options == null ? void 0 : options.map((d) => /* @__PURE__ */ jsx(CollapsibleClickableContent, {
+      onClick: () => {
+        if (value && onValueChange) {
+          const sel = !value[d.value];
+          onValueChange({
+            ...value,
+            [d.value]: sel
+          });
+        }
+      },
+      contentLeft: /* @__PURE__ */ jsx(Checkbox, {
+        tabIndex: -1,
+        value: value == null ? void 0 : value[d.value]
+      }),
+      children: /* @__PURE__ */ jsx(Text, {
+        children: d.label
+      })
+    }, d.value))
+  })
+});
+const ChipMultiSelectSection = ({
+  options,
+  value,
+  noneSelectedLabel,
+  onValueChange,
+  ...sectionProps
+}) => {
+  const [text, setText] = useState("");
+  const listValue = useMemo(() => value ? truthyKeysAsList(value).map((key) => {
+    var _a;
+    const option = options == null ? void 0 : options.find((o) => o.value === key);
+    return {
+      value: key,
+      label: (_a = option == null ? void 0 : option.label) != null ? _a : key
+    };
+  }) : [], [options, value]);
+  const filteredOptions = useMemo(() => {
+    return options == null ? void 0 : options.filter((p) => p.value.toLocaleLowerCase().indexOf(text.toLocaleLowerCase()) > -1 || p.label.toLocaleLowerCase().indexOf(text.toLocaleLowerCase()) > -1);
+  }, [options, text]);
+  const onValueChangeInternal = useCallback((value2) => {
+    onValueChange == null ? void 0 : onValueChange(createBooleanRecordFromValue(value2));
+  }, [onValueChange]);
+  return /* @__PURE__ */ jsx(SearchFilterSection, {
+    ...sectionProps,
+    children: /* @__PURE__ */ jsx(ChipMultiSelect, {
+      options: filteredOptions,
+      value: listValue,
+      onValueChange: onValueChangeInternal,
+      inputValue: text,
+      noneSelectedLabel,
+      onInputChange: setText,
+      closeMenuOnSelect: false
+    })
+  });
 };
-
-var ChipMultiSelectSection = function (_a) {
-    var options = _a.options, value = _a.value, noneSelectedLabel = _a.noneSelectedLabel, onValueChange = _a.onValueChange, sectionProps = __rest(_a, ["options", "value", "noneSelectedLabel", "onValueChange"]);
-    var _b = useState(""), text = _b[0], setText = _b[1];
-    var listValue = useMemo(function () {
-        return value
-            ? truthyKeysAsList(value).map(function (key) {
-                var _a;
-                var option = options === null || options === void 0 ? void 0 : options.find(function (o) { return o.value === key; });
-                return { value: key, label: (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : key };
-            })
-            : [];
-    }, [options, value]);
-    var filteredOptions = useMemo(function () {
-        return options === null || options === void 0 ? void 0 : options.filter(function (p) {
-            return p.value.toLocaleLowerCase().indexOf(text.toLocaleLowerCase()) > -1 ||
-                p.label.toLocaleLowerCase().indexOf(text.toLocaleLowerCase()) > -1;
-        });
-    }, [options, text]);
-    var onValueChangeInternal = useCallback(function (value) {
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(createBooleanRecordFromValue(value));
-    }, [onValueChange]);
-    return (React.createElement(SearchFilterSection, __assign({}, sectionProps),
-        React.createElement(ChipMultiSelect, { options: filteredOptions, value: listValue, onValueChange: onValueChangeInternal, inputValue: text, noneSelectedLabel: noneSelectedLabel, onInputChange: setText, closeMenuOnSelect: false })));
-};
-var createBooleanRecordFromValue = function (value) {
-    return value.reduce(function (sum, item) {
-        sum[item.value] = true;
-        return sum;
-    }, {});
+const createBooleanRecordFromValue = (value) => {
+  return value.reduce((sum, item) => {
+    sum[item.value] = true;
+    return sum;
+  }, {});
 };
-
-var createChipsPropsForDateRange = function (formModel, startDateFieldName, endDateFieldName) { return ({
-    chips: createChipsForDateRange(formModel[startDateFieldName], formModel[endDateFieldName]),
-    onClickRemoveOnChip: createOnClickRemoveOnChipForDateRange(startDateFieldName, endDateFieldName),
-}); };
-var createChipsForDateRange = function (startDate, endDate) {
-    if (!startDate && !endDate) {
-        return [];
-    }
-    return [
-        { value: "dateRange", label: "".concat(startDate !== null && startDate !== void 0 ? startDate : "", " - ").concat(endDate !== null && endDate !== void 0 ? endDate : "") },
-    ];
-};
-var createOnClickRemoveOnChipForDateRange = function (startDateFieldName, endDateFieldName) {
-    return function (_a) {
-        var _b;
-        var setFormModelFields = _a.setFormModelFields;
-        setFormModelFields((_b = {},
-            _b[startDateFieldName] = undefined,
-            _b[endDateFieldName] = undefined,
-            _b));
-    };
+const createChipsPropsForDateRange = (formModel, startDateFieldName, endDateFieldName) => ({
+  chips: createChipsForDateRange(formModel[startDateFieldName], formModel[endDateFieldName]),
+  onClickRemoveOnChip: createOnClickRemoveOnChipForDateRange(startDateFieldName, endDateFieldName)
+});
+const createChipsForDateRange = (startDate, endDate) => {
+  if (!startDate && !endDate) {
+    return [];
+  }
+  return [
+    { value: "dateRange", label: `${startDate != null ? startDate : ""} - ${endDate != null ? endDate : ""}` }
+  ];
 };
-
-var createDateRangeSectionProps = function (formModel, startDateFieldName, endDateFieldName) { return ({
-    value: {
-        startDate: formModel[startDateFieldName],
-        endDate: formModel[endDateFieldName],
-    },
-    onValueChange: function (value, _a) {
-        var _b;
-        var dispatch = _a.dispatch, actions = _a.actions;
-        var fields = (_b = {},
-            _b[startDateFieldName] = value.startDate,
-            _b[endDateFieldName] = value.endDate,
-            _b);
-        dispatch(actions.setFormModelFields(fields));
-    },
-}); };
-
-var DateRangeCalendarSection = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, sectionId = _a.sectionId, dateRangeCalendarProps = __rest(_a, ["value", "onValueChange", "sectionId"]);
-    var dispatch = useSearchFilterDispatch();
-    var actions = useSearchFilterActions();
-    var options = useMemo(function () { return ({ dispatch: dispatch, actions: actions }); }, [actions, dispatch]);
-    var _b = useState("startDate"), focusedInput = _b[0], setFocusedInput = _b[1];
-    var dateRangeValue = useMemo(function () { return stringsToDateRange(value); }, [value]);
-    var onValueChangeHandler = useCallback(function (value) {
-        onValueChange(dateRangeToStrings(value), options);
-    }, [onValueChange, options]);
-    return (React.createElement(SearchFilterSection, { sectionId: sectionId },
-        React.createElement(Box, { flex: 1, alignItems: "center" },
-            React.createElement(Box, { background: "white", indent: true },
-                React.createElement(DateRangeCalendar, __assign({ setFocusedInput: setFocusedInput, focusedInput: focusedInput, value: dateRangeValue, onValueChange: onValueChangeHandler }, dateRangeCalendarProps))))));
+const createOnClickRemoveOnChipForDateRange = (startDateFieldName, endDateFieldName) => {
+  return ({ setFormModelFields }) => {
+    setFormModelFields({
+      [startDateFieldName]: void 0,
+      [endDateFieldName]: void 0
+    });
+  };
+};
+const createDateRangeSectionProps = (formModel, startDateFieldName, endDateFieldName) => ({
+  value: {
+    startDate: formModel[startDateFieldName],
+    endDate: formModel[endDateFieldName]
+  },
+  onValueChange: (value, { dispatch, actions }) => {
+    const fields = {
+      [startDateFieldName]: value.startDate,
+      [endDateFieldName]: value.endDate
+    };
+    dispatch(actions.setFormModelFields(fields));
+  }
+});
+const DateRangeCalendarSection = ({
+  value,
+  onValueChange,
+  sectionId,
+  ...dateRangeCalendarProps
+}) => {
+  const dispatch = useSearchFilterDispatch();
+  const actions = useSearchFilterActions();
+  const options = useMemo(() => ({
+    dispatch,
+    actions
+  }), [actions, dispatch]);
+  const [focusedInput, setFocusedInput] = useState("startDate");
+  const dateRangeValue = useMemo(() => stringsToDateRange(value), [value]);
+  const onValueChangeHandler = useCallback((value2) => {
+    onValueChange(dateRangeToStrings(value2), options);
+  }, [onValueChange, options]);
+  return /* @__PURE__ */ jsx(SearchFilterSection, {
+    sectionId,
+    children: /* @__PURE__ */ jsx(Box, {
+      flex: 1,
+      alignItems: "center",
+      children: /* @__PURE__ */ jsx(Box, {
+        background: "white",
+        indent: true,
+        children: /* @__PURE__ */ jsx(DateRangeCalendar, {
+          setFocusedInput,
+          focusedInput,
+          value: dateRangeValue,
+          onValueChange: onValueChangeHandler,
+          ...dateRangeCalendarProps
+        })
+      })
+    })
+  });
 };
-
 export { ChipMultiSelectSection, DateRangeCalendarSection, EmptyChip, SearchFilterActionsContext, SearchFilterButton, SearchFilterChip, SearchFilterChips, SearchFilterContext, SearchFilterDispatchContext, SearchFilterDrawer, SearchFilterLocalStateContext, SearchFilterModelContext, SearchFilterPanelHeader, SearchFilterSection, SearchFilterStateContext, SectionChips, SimpleCheckboxListSection, createChipsForBooleanRecord, createChipsForDateRange, createChipsPropsForBooleanRecord, createChipsPropsForDateRange, createDateRangeSectionProps, createOnClickRemoveOnChipForBooleanRecord, createOnClickRemoveOnChipForDateRange, createSearchFilterActions, createSearchFilterInitialState, createSearchFilterReducer, formatColumnIdToHeaderCellLabel, getReducerIdFor, useLocalSearchFilterState, useSearchFilterActions, useSearchFilterDispatch, useSearchFilterModel, useSearchFilterState };
 //# sourceMappingURL=index.es.js.map