@vuu-ui/vuu-filters 2.1.19-beta.2 → 2.1.19-beta.3

package/cjs/filter-context-menu/useFilterContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterContextMenu.js","sources":["../../../../packages/vuu-filters/src/filter-context-menu/useFilterContextMenu.ts"],"sourcesContent":["import {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n  MenuBuilder,\n} from \"@vuu-ui/vuu-context-menu\";\nimport type {\n  TableContextMenuDef,\n  TableContextMenuOptions,\n  TableMenuLocation,\n} from \"@vuu-ui/vuu-table-types\";\nimport { filtersAreEqual } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useSavedFilters } from \"../filter-provider/FilterContext\";\nimport { FilterAggregator } from \"../FilterAggregator\";\n\nconst EmptyAggregator = new FilterAggregator();\n\nexport interface FilterContextMenuHookProps {\n  filterColumns: string[] | \"*\";\n  filterProviderKey?: string;\n}\n\nconst defaultProps: FilterContextMenuHookProps = {\n  filterColumns: \"*\",\n};\n\nexport const useFilterContextMenu = ({\n  filterColumns = \"*\",\n  filterProviderKey,\n}: FilterContextMenuHookProps = defaultProps): TableContextMenuDef => {\n  const { currentFilter, clearCurrentFilter, setCurrentFilter } =\n    useSavedFilters(filterProviderKey);\n  const filterAggregatorRef = useRef(EmptyAggregator);\n\n  useMemo(() => {\n    if (\n      !filtersAreEqual(currentFilter.filter, filterAggregatorRef.current.filter)\n    ) {\n      filterAggregatorRef.current = currentFilter.filter\n        ? new FilterAggregator(currentFilter.filter)\n        : new FilterAggregator();\n    }\n  }, [currentFilter]);\n\n  const menuBuilder: MenuBuilder<TableMenuLocation, TableContextMenuOptions> =\n    useCallback(\n      (_location, options) => {\n        const { column, dataRow } = options;\n        const { current: fag } = filterAggregatorRef;\n        const { name, label = name } = column;\n        const value = dataRow[column.name] as string | number;\n\n        const ClearFilter: ContextMenuItemDescriptor = {\n          id: \"filter-clear\",\n          label: \"Clear filter\",\n          options,\n        };\n\n        if (filterColumns === \"*\" || filterColumns.includes(column.name)) {\n          const SetFilter: ContextMenuItemDescriptor = {\n            id: \"filter-set\",\n            label: `Set filter ${label} '${value}'`,\n            options,\n          };\n\n          if (fag.isEmpty) {\n            return [SetFilter];\n          } else if (fag.has(column)) {\n            if (fag.count === 1) {\n              return [ClearFilter];\n            } else {\n              return [\n                {\n                  id: \"filter-remove\",\n                  label: `Remove ${label} '${value}' from filter`,\n                  options,\n                },\n                SetFilter,\n                ClearFilter,\n              ];\n            }\n          } else {\n            return [\n              SetFilter,\n              {\n                id: \"filter-add\",\n                label: `Add ${label} '${value}' to existing filter`,\n                options,\n              },\n              ClearFilter,\n            ];\n          }\n        } else if (!fag.isEmpty) {\n          return [ClearFilter];\n        } else {\n          return [];\n        }\n      },\n      [filterColumns],\n    );\n\n  const menuActionHandler = useCallback<\n    MenuActionHandler<string, TableContextMenuOptions>\n  >(\n    (menuItemId, options) => {\n      if (options) {\n        const { current: fag } = filterAggregatorRef;\n        const { column, dataRow } = options;\n        switch (menuItemId) {\n          case \"filter-clear\":\n            {\n              clearCurrentFilter();\n            }\n            break;\n\n          case \"filter-add\":\n            {\n              const value = dataRow[column.name] as string | number;\n              fag.add(column, value, \"=\");\n              if (fag.filter) {\n                setCurrentFilter(fag.filter);\n              }\n            }\n            break;\n          case \"filter-remove\":\n            {\n              fag.remove(column);\n              if (fag.filter) {\n                setCurrentFilter(fag.filter);\n              }\n            }\n            break;\n          case \"filter-set\":\n            {\n              const value = dataRow[column.name] as string | number;\n              fag.clear();\n              fag.add(column, value, \"=\");\n              if (fag.filter) {\n                setCurrentFilter(fag.filter);\n              }\n            }\n            break;\n          default:\n            return false;\n        }\n      } else {\n        return false;\n      }\n    },\n    [clearCurrentFilter, setCurrentFilter],\n  );\n\n  return {\n    menuActionHandler,\n    menuBuilder,\n  };\n};\n"],"names":["FilterAggregator","useSavedFilters","useRef","useMemo","filtersAreEqual","useCallback"],"mappings":"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"}

package/cjs/filter-display/FilterDisplay.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var filterDisplayCss = ".vuuFilterDisplay {\n    display: flex;\n    flex-direction: column;\n    gap: var(--salt-spacing-50);\n    padding: var(--vuuFilterDisplay-padding, var(--salt-spacing-200));\n    width: fit-content;\n\n    .vuuFilterDisplay-filter-clause {\n        align-items: center;\n        display: flex;\n        gap: var(--salt-spacing-200);\n        justify-content: space-between;\n        white-space: no\n    }\n\n    .vuuFilterDisplay-column {\n        flex: 1 1 auto;\n        white-space: no\n    }\n    .vuuFilterDisplay-value {\n        flex: 0 0 120px;\n        text-align: right;\n        white-space: nowrap;\n    }\n}\n";
+
+module.exports = filterDisplayCss;
+//# sourceMappingURL=FilterDisplay.css.js.map

package/cjs/filter-display/FilterDisplay.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDisplay.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/filter-display/FilterDisplay.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var react = require('react');
+var filterUtils = require('../filter-utils.js');
+var FilterDisplay$1 = require('./FilterDisplay.css.js');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const classBase = "vuuFilterDisplay";
+const getColumnLabel = (columnName, columns) => {
+  return columnName;
+};
+const FilterDisplay = react.forwardRef(function FilterDisplay2({
+  allowDelete = false,
+  className,
+  columns,
+  filter,
+  onDeleteFilterClause,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-filter-display",
+    css: FilterDisplay$1,
+    window: targetWindow
+  });
+  const handleDelete = react.useCallback(
+    (e) => {
+      const {
+        dataset: { columnName }
+      } = vuuUtils.queryClosest(e.target, "[data-column-name]", true);
+      if (columnName) {
+        onDeleteFilterClause?.(columnName);
+      }
+    },
+    [onDeleteFilterClause]
+  );
+  const filterClauseList = filterUtils.getFilterClausesForDisplay(filter, columns);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, className),
+      ref: forwardedRef,
+      children: filterClauseList.map(
+        ([columnName, value]) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `${classBase}-filter-clause`,
+            "data-column-name": columnName,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-column`, children: getColumnLabel(columnName) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-value`, children: value }),
+              allowDelete ? /* @__PURE__ */ jsxRuntime.jsx(
+                vuuUiControls.IconButton,
+                {
+                  "data-embedded": true,
+                  icon: "close",
+                  appearance: "transparent",
+                  sentiment: "neutral",
+                  onClick: handleDelete
+                }
+              ) : null
+            ]
+          },
+          columnName
+        ),
+        []
+      )
+    }
+  );
+});
+
+exports.FilterDisplay = FilterDisplay;
+//# sourceMappingURL=FilterDisplay.js.map

package/cjs/filter-display/FilterDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDisplay.js","sources":["../../../../packages/vuu-filters/src/filter-display/FilterDisplay.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { FilterContainerFilter } from \"@vuu-ui/vuu-filter-types\";\nimport cx from \"clsx\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  MouseEventHandler,\n  useCallback,\n} from \"react\";\nimport { getFilterClausesForDisplay } from \"../filter-utils\";\n\nimport filterDisplayCss from \"./FilterDisplay.css\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { queryClosest } from \"@vuu-ui/vuu-utils\";\n\nconst classBase = \"vuuFilterDisplay\";\n\nexport interface FilterDisplayProps extends HTMLAttributes<HTMLDivElement> {\n  allowDelete?: boolean;\n  columns?: readonly ColumnDescriptor[];\n  filter: FilterContainerFilter | undefined;\n  onDeleteFilterClause?: (columnName: string) => void;\n}\n\nconst getColumnLabel = (columnName: string, columns?: ColumnDescriptor[]) => {\n  if (columns) {\n    const column = columns.find((c) => c.name === columnName);\n    if (column) {\n      return column.label ?? columnName;\n    }\n  }\n  return columnName;\n};\n\nexport const FilterDisplay = forwardRef(function FilterDisplay(\n  {\n    allowDelete = false,\n    className,\n    columns,\n    filter,\n    onDeleteFilterClause,\n    ...htmlAttributes\n  }: FilterDisplayProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-display\",\n    css: filterDisplayCss,\n    window: targetWindow,\n  });\n\n  const handleDelete = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (e) => {\n      const {\n        dataset: { columnName },\n      } = queryClosest<HTMLDivElement>(e.target, \"[data-column-name]\", true);\n      if (columnName) {\n        onDeleteFilterClause?.(columnName);\n      }\n    },\n    [onDeleteFilterClause],\n  );\n\n  const filterClauseList = getFilterClausesForDisplay(filter, columns);\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    >\n      {filterClauseList.map(\n        ([columnName, value]) => (\n          <div\n            className={`${classBase}-filter-clause`}\n            key={columnName}\n            data-column-name={columnName}\n          >\n            <span className={`${classBase}-column`}>\n              {getColumnLabel(columnName)}\n            </span>\n            <span className={`${classBase}-value`}>{value}</span>\n            {allowDelete ? (\n              <IconButton\n                data-embedded\n                icon=\"close\"\n                appearance=\"transparent\"\n                sentiment=\"neutral\"\n                onClick={handleDelete}\n              />\n            ) : null}\n          </div>\n        ),\n        [],\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","FilterDisplay","useWindow","useComponentCssInjection","filterDisplayCss","useCallback","queryClosest","getFilterClausesForDisplay","jsx","jsxs","IconButton"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,SAAY,GAAA,kBAAA;AASlB,MAAM,cAAA,GAAiB,CAAC,UAAA,EAAoB,OAAiC,KAAA;AAO3E,EAAO,OAAA,UAAA;AACT,CAAA;AAEa,MAAA,aAAA,GAAgBA,gBAAW,CAAA,SAASC,cAC/C,CAAA;AAAA,EACE,WAAc,GAAA,KAAA;AAAA,EACd,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,oBAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,CAAM,KAAA;AACL,MAAM,MAAA;AAAA,QACJ,OAAA,EAAS,EAAE,UAAW;AAAA,OACpB,GAAAC,qBAAA,CAA6B,CAAE,CAAA,MAAA,EAAQ,sBAAsB,IAAI,CAAA;AACrE,MAAA,IAAI,UAAY,EAAA;AACd,QAAA,oBAAA,GAAuB,UAAU,CAAA;AAAA;AACnC,KACF;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAM,MAAA,gBAAA,GAAmBC,sCAA2B,CAAA,MAAA,EAAQ,OAAO,CAAA;AACnE,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAiB,EAAA,gBAAA,CAAA,GAAA;AAAA,QAChB,CAAC,CAAC,UAAY,EAAA,KAAK,CACjB,qBAAAC,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,cAAA,CAAA;AAAA,YAEvB,kBAAkB,EAAA,UAAA;AAAA,YAElB,QAAA,EAAA;AAAA,8BAAAD,cAAA,CAAC,UAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,OAAA,CAAA,EAAA,QAAA,EAAA,cAAA,CAAe,UAAU,CAC5B,EAAA,CAAA;AAAA,6CACC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,cAC7C,WACC,mBAAAA,cAAA;AAAA,gBAACE,wBAAA;AAAA,gBAAA;AAAA,kBACC,eAAa,EAAA,IAAA;AAAA,kBACb,IAAK,EAAA,OAAA;AAAA,kBACL,UAAW,EAAA,aAAA;AAAA,kBACX,SAAU,EAAA,SAAA;AAAA,kBACV,OAAS,EAAA;AAAA;AAAA,eAET,GAAA;AAAA;AAAA,WAAA;AAAA,UAfC;AAAA,SAgBP;AAAA,QAEF;AAAC;AACH;AAAA,GACF;AAEJ,CAAC;;;;"}

package/cjs/filter-editor/FilterClauseCombinator.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var filterClauseCombinatorCss = ".vuuFilterClauseCombinator {\n    --saltButton-height: calc(var(--salt-spacing-400));\n    font-size: 9px;\n    padding: 0 4px;\n}\n.vuuFilterClauseCombinator:focus {\n    background-color: var(--vuu-color-gray-50);\n    color: white;\n}";
+
+module.exports = filterClauseCombinatorCss;
+//# sourceMappingURL=FilterClauseCombinator.css.js.map

package/cjs/filter-editor/FilterClauseCombinator.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterClauseCombinator.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/filter-editor/FilterClauseCombinator.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var react = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var FilterClauseCombinator$1 = require('./FilterClauseCombinator.css.js');
+
+const classBase = "vuuFilterClauseCombinator";
+const FilterClauseCombinator = ({
+  onChange,
+  onKeyDown,
+  operator
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-filterclause-combinator",
+    css: FilterClauseCombinator$1,
+    window: targetWindow
+  });
+  const handleChange = react.useCallback(
+    (value) => {
+      onChange(value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vuuUiControls.CycleStateButton,
+    {
+      className: classBase,
+      onChange: handleChange,
+      onKeyDown,
+      value: operator,
+      values: ["and", "or"],
+      variant: "primary"
+    }
+  );
+};
+
+exports.FilterClauseCombinator = FilterClauseCombinator;
+//# sourceMappingURL=FilterClauseCombinator.js.map

package/cjs/filter-editor/FilterClauseCombinator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterClauseCombinator.js","sources":["../../../../packages/vuu-filters/src/filter-editor/FilterClauseCombinator.tsx"],"sourcesContent":["import type { FilterCombinatorOp } from \"@vuu-ui/vuu-filter-types\";\nimport {\n  CycleStateButton,\n  CycleStateButtonChangeHandler,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { KeyboardEventHandler, useCallback } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport filterClauseCombinatorCss from \"./FilterClauseCombinator.css\";\n\nconst classBase = \"vuuFilterClauseCombinator\";\n\nexport type FilterClauseCombinatorChangeHandler = (\n  op: FilterCombinatorOp,\n) => void;\n\nexport interface FilterClauseCombinatorProps {\n  onChange: FilterClauseCombinatorChangeHandler;\n  onKeyDown: KeyboardEventHandler;\n  operator: FilterCombinatorOp;\n}\n\nexport const FilterClauseCombinator = ({\n  onChange,\n  onKeyDown,\n  operator,\n}: FilterClauseCombinatorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filterclause-combinator\",\n    css: filterClauseCombinatorCss,\n    window: targetWindow,\n  });\n\n  const handleChange = useCallback<CycleStateButtonChangeHandler>(\n    (value) => {\n      onChange(value as FilterCombinatorOp);\n    },\n    [onChange],\n  );\n\n  return (\n    <CycleStateButton\n      className={classBase}\n      onChange={handleChange}\n      onKeyDown={onKeyDown}\n      value={operator}\n      values={[\"and\", \"or\"]}\n      variant=\"primary\"\n    />\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","filterClauseCombinatorCss","useCallback","jsx","CycleStateButton"],"mappings":";;;;;;;;;AAWA,MAAM,SAAY,GAAA,2BAAA;AAYX,MAAM,yBAAyB,CAAC;AAAA,EACrC,QAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,6BAAA;AAAA,IACR,GAAK,EAAAC,wBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,KAAU,KAAA;AACT,MAAA,QAAA,CAAS,KAA2B,CAAA;AAAA,KACtC;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,8BAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,SAAA;AAAA,MACX,QAAU,EAAA,YAAA;AAAA,MACV,SAAA;AAAA,MACA,KAAO,EAAA,QAAA;AAAA,MACP,MAAA,EAAQ,CAAC,KAAA,EAAO,IAAI,CAAA;AAAA,MACpB,OAAQ,EAAA;AAAA;AAAA,GACV;AAEJ;;;;"}

package/cjs/filter-editor/FilterEditor.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var filterEditorCss = ".vuuFilterEditor {\n    align-items: center;\n    display: flex;\n    gap: var(--salt-spacing-200);\n    height: var(--vuuFilterEditor-height, calc(var(--salt-size-base) + var(--salt-size-unit)));\n    grid-column: 1 / 4;\n    grid-row: 2 / 3;\n    width: 100%;\n    \n}";
+
+module.exports = filterEditorCss;
+//# sourceMappingURL=FilterEditor.css.js.map

package/cjs/filter-editor/FilterEditor.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterEditor.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/filter-editor/FilterEditor.js

@@ -0,0 +1,101 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+require('../filter-clause/column-picker/ColumnPicker.js');
+require('../filter-clause/operator-picker/OperatorPicker.js');
+require('../filter-clause/ExpandoCombobox.js');
+var FilterClause = require('../filter-clause/FilterClause.js');
+require('../filter-clause/value-editors/FilterClauseValueEditorText.js');
+var FilterClauseCombinator = require('./FilterClauseCombinator.js');
+var useFilterEditor = require('./useFilterEditor.js');
+var FilterEditor$1 = require('./FilterEditor.css.js');
+
+const classBase = "vuuFilterEditor";
+const FilterEditor = ({
+  columnDescriptors,
+  filter,
+  onCancel,
+  onSave,
+  vuuTable,
+  ...htmlAttributes
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-filter-editor",
+    css: FilterEditor$1,
+    window: targetWindow
+  });
+  const {
+    columnsByName,
+    filterModel,
+    focusSaveButton,
+    setContainer,
+    onCancelFilterClause,
+    onCancelFilterEdit,
+    onChangeFilterCombinator,
+    onKeyDownCombinator,
+    saveButtonRef,
+    saveButtonProps
+  } = useFilterEditor.useFilterEditor({
+    columnDescriptors,
+    filter,
+    onCancel,
+    onSave
+  });
+  const getContents = () => {
+    const { op } = filterModel;
+    const content = [];
+    filterModel.filterClauses.forEach((filterClauseModel, i) => {
+      if (i > 0 && op) {
+        content.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FilterClauseCombinator.FilterClauseCombinator,
+            {
+              onChange: onChangeFilterCombinator,
+              onKeyDown: onKeyDownCombinator,
+              operator: op
+            },
+            `filter-operator-${i}`
+          )
+        );
+      }
+      content.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FilterClause.FilterClause,
+          {
+            columnsByName,
+            "data-index": i,
+            filterClauseModel,
+            onCancel: onCancelFilterClause,
+            onFocusSave: focusSaveButton,
+            vuuTable
+          },
+          `editor-${i}`
+        )
+      );
+    });
+    return content;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, ref: setContainer, children: [
+    getContents(),
+    /* @__PURE__ */ react.createElement(
+      vuuUiControls.SplitButton,
+      {
+        ...saveButtonProps,
+        disabled: !filterModel.isValid,
+        key: "save-button",
+        ref: saveButtonRef
+      },
+      "Save"
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(core.Button, { onClick: onCancelFilterEdit, variant: "secondary", children: "Cancel" })
+  ] });
+};
+
+exports.FilterEditor = FilterEditor;
+//# sourceMappingURL=FilterEditor.js.map

package/cjs/filter-editor/FilterEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterEditor.js","sources":["../../../../packages/vuu-filters/src/filter-editor/FilterEditor.tsx"],"sourcesContent":["import type { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { SplitButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactElement } from \"react\";\nimport { FilterClauseModel } from \"../FilterModel\";\nimport { FilterClause } from \"../filter-clause\";\nimport { FilterClauseCombinator } from \"./FilterClauseCombinator\";\nimport { useFilterEditor } from \"./useFilterEditor\";\n\nimport filterEditorCss from \"./FilterEditor.css\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nconst classBase = \"vuuFilterEditor\";\n\nexport type FilterEditSaveHandler = (filter: Filter) => void;\nexport type FilterEditCancelHandler = (filter?: Filter) => void;\n\nexport interface FilterEditorProps extends HTMLAttributes<HTMLDivElement> {\n  columnDescriptors: readonly ColumnDescriptor[];\n  filter?: Filter;\n  onCancel: FilterEditCancelHandler;\n  onSave: FilterEditSaveHandler;\n  vuuTable: VuuTable;\n}\n\nexport const FilterEditor = ({\n  columnDescriptors,\n  filter,\n  onCancel,\n  onSave,\n  vuuTable,\n  ...htmlAttributes\n}: FilterEditorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-editor\",\n    css: filterEditorCss,\n    window: targetWindow,\n  });\n\n  const {\n    columnsByName,\n    filterModel,\n    focusSaveButton,\n    setContainer,\n    onCancelFilterClause,\n    onCancelFilterEdit,\n    onChangeFilterCombinator,\n    onKeyDownCombinator,\n    saveButtonRef,\n    saveButtonProps,\n  } = useFilterEditor({\n    columnDescriptors,\n    filter,\n    onCancel,\n    onSave,\n  });\n\n  const getContents = () => {\n    const { op } = filterModel;\n\n    const content: ReactElement[] = [];\n    filterModel.filterClauses.forEach((filterClauseModel, i) => {\n      if (i > 0 && op) {\n        content.push(\n          <FilterClauseCombinator\n            key={`filter-operator-${i}`}\n            onChange={onChangeFilterCombinator}\n            onKeyDown={onKeyDownCombinator}\n            operator={op}\n          />,\n        );\n      }\n      content.push(\n        <FilterClause\n          columnsByName={columnsByName}\n          data-index={i}\n          filterClauseModel={filterClauseModel as FilterClauseModel}\n          key={`editor-${i}`}\n          onCancel={onCancelFilterClause}\n          onFocusSave={focusSaveButton}\n          vuuTable={vuuTable}\n        />,\n      );\n    });\n    return content;\n  };\n\n  return (\n    <div {...htmlAttributes} className={classBase} ref={setContainer}>\n      {getContents()}\n      <SplitButton\n        {...saveButtonProps}\n        disabled={!filterModel.isValid}\n        key=\"save-button\"\n        ref={saveButtonRef}\n      >\n        Save\n      </SplitButton>\n      <Button onClick={onCancelFilterEdit} variant=\"secondary\">\n        Cancel\n      </Button>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","filterEditorCss","useFilterEditor","jsx","FilterClauseCombinator","FilterClause","createElement","SplitButton","Button"],"mappings":";;;;;;;;;;;;;;;;;AAeA,MAAM,SAAY,GAAA,iBAAA;AAaX,MAAM,eAAe,CAAC;AAAA,EAC3B,iBAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,aAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAA;AAAA,IACA,kBAAA;AAAA,IACA,wBAAA;AAAA,IACA,mBAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,MACEC,+BAAgB,CAAA;AAAA,IAClB,iBAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,cAAc,MAAM;AACxB,IAAM,MAAA,EAAE,IAAO,GAAA,WAAA;AAEf,IAAA,MAAM,UAA0B,EAAC;AACjC,IAAA,WAAA,CAAY,aAAc,CAAA,OAAA,CAAQ,CAAC,iBAAA,EAAmB,CAAM,KAAA;AAC1D,MAAI,IAAA,CAAA,GAAI,KAAK,EAAI,EAAA;AACf,QAAQ,OAAA,CAAA,IAAA;AAAA,0BACNC,cAAA;AAAA,YAACC,6CAAA;AAAA,YAAA;AAAA,cAEC,QAAU,EAAA,wBAAA;AAAA,cACV,SAAW,EAAA,mBAAA;AAAA,cACX,QAAU,EAAA;AAAA,aAAA;AAAA,YAHL,mBAAmB,CAAC,CAAA;AAAA;AAI3B,SACF;AAAA;AAEF,MAAQ,OAAA,CAAA,IAAA;AAAA,wBACND,cAAA;AAAA,UAACE,yBAAA;AAAA,UAAA;AAAA,YACC,aAAA;AAAA,YACA,YAAY,EAAA,CAAA;AAAA,YACZ,iBAAA;AAAA,YAEA,QAAU,EAAA,oBAAA;AAAA,YACV,WAAa,EAAA,eAAA;AAAA,YACb;AAAA,WAAA;AAAA,UAHK,UAAU,CAAC,CAAA;AAAA;AAIlB,OACF;AAAA,KACD,CAAA;AACD,IAAO,OAAA,OAAA;AAAA,GACT;AAEA,EAAA,uCACG,KAAK,EAAA,EAAA,GAAG,gBAAgB,SAAW,EAAA,SAAA,EAAW,KAAK,YACjD,EAAA,QAAA,EAAA;AAAA,IAAY,WAAA,EAAA;AAAA,oBACbC,mBAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACE,GAAG,eAAA;AAAA,QACJ,QAAA,EAAU,CAAC,WAAY,CAAA,OAAA;AAAA,QACvB,GAAI,EAAA,aAAA;AAAA,QACJ,GAAK,EAAA;AAAA,OAAA;AAAA,MACN;AAAA,KAED;AAAA,mCACCC,WAAO,EAAA,EAAA,OAAA,EAAS,kBAAoB,EAAA,OAAA,EAAQ,aAAY,QAEzD,EAAA,QAAA,EAAA;AAAA,GACF,EAAA,CAAA;AAEJ;;;;"}

package/cjs/filter-editor/useFilterEditor.js

@@ -0,0 +1,191 @@
+'use strict';
+
+var react = require('react');
+var filterClauseFocusManagement = require('../filter-clause/filterClauseFocusManagement.js');
+var FilterModel = require('../FilterModel.js');
+
+const useFilterEditor = ({
+  columnDescriptors,
+  filter,
+  onCancel,
+  onSave
+}) => {
+  const filterModel = react.useMemo(() => {
+    return new FilterModel.FilterModel(filter);
+  }, [filter]);
+  const [_, forceRefresh] = react.useState({});
+  const [isValid, setIsValid] = react.useState(filterModel.isValid);
+  const clauseCombinatorRef = react.useRef(void 0);
+  const saveButtonRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  const setContainer = react.useCallback((el) => {
+    containerRef.current = el;
+    if (el) {
+      filterClauseFocusManagement.focusFirstClauseIfAllClausesValid(el);
+    }
+  }, []);
+  const saveButtonMenuBuilder = react.useCallback((_2, options) => {
+    switch (clauseCombinatorRef.current) {
+      case "and":
+        return [{ id: "and-clause", label: "AND", options }];
+      case "or":
+        return [{ id: "or-clause", label: "OR", options }];
+      default:
+        return [
+          { id: "and-clause", label: "AND", options },
+          { id: "or-clause", label: "OR", options }
+        ];
+    }
+  }, []);
+  const columnsByName = react.useMemo(
+    () => columnDescriptorsByName(columnDescriptors),
+    [columnDescriptors]
+  );
+  const isLastFilterClause = react.useCallback(
+    (index) => index !== void 0 && filterModel.filterClauses.length === index + 1,
+    [filterModel]
+  );
+  const focusSaveButton = react.useCallback(() => {
+    requestAnimationFrame(() => {
+      saveButtonRef.current?.focus();
+    });
+  }, []);
+  react.useMemo(() => {
+    const setValid = (isValid2) => {
+      setIsValid(isValid2);
+    };
+    const valueChanged = (_filter, isValid2) => {
+      if (isValid2) {
+        const [filterClauseIndex, fieldName] = filterClauseFocusManagement.getFocusedFieldDetails();
+        if (fieldName === "value" && isLastFilterClause(filterClauseIndex)) {
+          focusSaveButton();
+        }
+      }
+    };
+    filterModel.on("isValid", setValid);
+    filterModel.on("filter", valueChanged);
+  }, [filterModel, focusSaveButton, isLastFilterClause]);
+  const handleCancelFilterClause = react.useCallback(
+    (filterClause, reason) => {
+      if (reason === "Backspace") {
+        const indexOfFilterClause = filterModel.filterClauses.indexOf(filterClause);
+        filterModel.removeFilterClause(filterClause);
+        forceRefresh({});
+        if (reason === "Backspace" && containerRef.current) {
+          if (indexOfFilterClause > 0) {
+            filterClauseFocusManagement.focusFilterClauseField(
+              containerRef.current,
+              indexOfFilterClause - 1
+            );
+          }
+        }
+      } else {
+        console.log(
+          `cancel because of Escape valid clause ${filterClause.isValid}`
+        );
+        onCancel(filter);
+      }
+    },
+    [filter, filterModel, onCancel]
+  );
+  const invokeMenuAction = react.useCallback(
+    (menuId) => {
+      switch (menuId) {
+        case "save": {
+          const savedFilter = filterModel.asFilter();
+          const newOrUpdatedFilter = filter?.name ? {
+            ...savedFilter,
+            name: filter.name
+          } : savedFilter;
+          onSave(newOrUpdatedFilter);
+          return true;
+        }
+        case "and-clause": {
+          clauseCombinatorRef.current = "and";
+          filterModel.addNewFilterClause("and");
+          return true;
+        }
+        case "or-clause":
+          clauseCombinatorRef.current = "or";
+          filterModel.addNewFilterClause("or");
+          return true;
+        default:
+          return false;
+      }
+    },
+    [filter?.name, filterModel, onSave]
+  );
+  const handleKeyDownSaveButton = react.useCallback(
+    (evt) => {
+      if (evt.key === "Tab" && evt.shiftKey) {
+        evt.preventDefault();
+        const target = evt.target;
+        const filterEditor = target.closest(".vuuFilterEditor");
+        filterClauseFocusManagement.focusLastClauseValue(filterEditor);
+      } else if (evt.key === "Escape") {
+        onCancel(filter);
+      }
+    },
+    [filter, onCancel]
+  );
+  const handleKeyDownNavigationFromCombinator = react.useCallback((evt) => {
+    const { target, key, shiftKey } = evt;
+    if (key === "ArrowLeft") {
+      evt.preventDefault();
+      filterClauseFocusManagement.navigateToNextFilterClause(target, "bwd");
+    } else if (key === "ArrowRight") {
+      evt.preventDefault();
+      filterClauseFocusManagement.navigateToNextFilterClause(target, "fwd");
+    } else if (key === "Tab" && shiftKey) {
+      evt.preventDefault();
+      filterClauseFocusManagement.navigateToNextFilterClause(target, "bwd");
+    }
+  }, []);
+  const handleClickSaveButton = react.useMemo(
+    () => () => (
+      // onSave() ?
+      invokeMenuAction("save")
+    ),
+    [invokeMenuAction]
+  );
+  const saveButtonProps = {
+    PopupMenuProps: {
+      icon: "more-vert",
+      menuBuilder: saveButtonMenuBuilder,
+      menuActionHandler: invokeMenuAction,
+      menuLocation: "filter-save-menu"
+    },
+    onClick: handleClickSaveButton,
+    onKeyDown: handleKeyDownSaveButton
+  };
+  const onChangeFilterCombinator = react.useCallback(
+    (op) => {
+      filterModel.setOp(op);
+      clauseCombinatorRef.current = op;
+      forceRefresh({});
+    },
+    [filterModel]
+  );
+  const handleCancelFilterEdit = react.useCallback(() => {
+    onCancel(filter);
+  }, [filter, onCancel]);
+  return {
+    columnsByName,
+    filterModel,
+    focusSaveButton,
+    isValid,
+    onCancelFilterClause: handleCancelFilterClause,
+    onCancelFilterEdit: handleCancelFilterEdit,
+    onChangeFilterCombinator,
+    onKeyDownCombinator: handleKeyDownNavigationFromCombinator,
+    saveButtonProps,
+    saveButtonRef,
+    setContainer
+  };
+};
+function columnDescriptorsByName(columns) {
+  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});
+}
+
+exports.useFilterEditor = useFilterEditor;
+//# sourceMappingURL=useFilterEditor.js.map

package/cjs/filter-editor/useFilterEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterEditor.js","sources":["../../../../packages/vuu-filters/src/filter-editor/useFilterEditor.ts"],"sourcesContent":["import type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport type {\n  ColumnDescriptorsByName,\n  FilterCombinatorOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport {\n  KeyboardEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  focusFilterClauseField,\n  focusFirstClauseIfAllClausesValid,\n  focusLastClauseValue,\n  getFocusedFieldDetails,\n  navigateToNextFilterClause,\n} from \"../filter-clause/filterClauseFocusManagement\";\nimport { FilterEditorProps } from \"./FilterEditor\";\nimport {\n  FilterChangeHandler,\n  FilterModel,\n  FilterStatusChangeHandler,\n} from \"../FilterModel\";\nimport { FilterClauseCancelHandler } from \"../filter-clause\";\nimport { FilterClauseCombinatorChangeHandler } from \"./FilterClauseCombinator\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface FilterEditorHookProps\n  extends Pick<\n    FilterEditorProps,\n    \"columnDescriptors\" | \"filter\" | \"onCancel\" | \"onSave\"\n  > {\n  label?: string;\n}\n\nexport const useFilterEditor = ({\n  columnDescriptors,\n  filter,\n  onCancel,\n  onSave,\n}: FilterEditorHookProps) => {\n  const filterModel = useMemo(() => {\n    return new FilterModel(filter);\n  }, [filter]);\n\n  const [_, forceRefresh] = useState({});\n  const [isValid, setIsValid] = useState(filterModel.isValid);\n  const clauseCombinatorRef = useRef<FilterCombinatorOp | undefined>(undefined);\n  const saveButtonRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const setContainer = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    containerRef.current = el;\n    if (el) {\n      // If there is a new empty clause it will focus itself, otw ...\n      focusFirstClauseIfAllClausesValid(el);\n    }\n  }, []);\n\n  const saveButtonMenuBuilder: MenuBuilder = useCallback((_, options) => {\n    switch (clauseCombinatorRef.current) {\n      case \"and\":\n        return [{ id: \"and-clause\", label: \"AND\", options }];\n      case \"or\":\n        return [{ id: \"or-clause\", label: \"OR\", options }];\n      default:\n        return [\n          { id: \"and-clause\", label: \"AND\", options },\n          { id: \"or-clause\", label: \"OR\", options },\n        ];\n    }\n  }, []);\n\n  const columnsByName = useMemo(\n    () => columnDescriptorsByName(columnDescriptors),\n    [columnDescriptors],\n  );\n\n  const isLastFilterClause = useCallback(\n    (index?: number) =>\n      index !== undefined && filterModel.filterClauses.length === index + 1,\n    [filterModel],\n  );\n\n  const focusSaveButton = useCallback(() => {\n    requestAnimationFrame(() => {\n      saveButtonRef.current?.focus();\n    });\n  }, []);\n\n  useMemo(() => {\n    const setValid: FilterStatusChangeHandler = (isValid) => {\n      // bind the model state change to React state to ensure render\n      setIsValid(isValid);\n    };\n\n    const valueChanged: FilterChangeHandler = (_filter, isValid) => {\n      if (isValid) {\n        const [filterClauseIndex, fieldName] = getFocusedFieldDetails();\n        if (fieldName === \"value\" && isLastFilterClause(filterClauseIndex)) {\n          focusSaveButton();\n        }\n      }\n    };\n    filterModel.on(\"isValid\", setValid);\n    filterModel.on(\"filter\", valueChanged);\n  }, [filterModel, focusSaveButton, isLastFilterClause]);\n\n  const handleCancelFilterClause = useCallback<FilterClauseCancelHandler>(\n    (filterClause, reason) => {\n      if (reason === \"Backspace\") {\n        const indexOfFilterClause =\n          filterModel.filterClauses.indexOf(filterClause);\n        filterModel.removeFilterClause(filterClause);\n        forceRefresh({});\n        if (reason === \"Backspace\" && containerRef.current) {\n          if (indexOfFilterClause > 0) {\n            focusFilterClauseField(\n              containerRef.current,\n              indexOfFilterClause - 1,\n            );\n          }\n        }\n      } else {\n        console.log(\n          `cancel because of Escape valid clause ${filterClause.isValid}`,\n        );\n        onCancel(filter);\n      }\n    },\n    [filter, filterModel, onCancel],\n  );\n\n  const invokeMenuAction = useCallback<MenuActionHandler>(\n    (menuId) => {\n      switch (menuId) {\n        case \"save\": {\n          const savedFilter = filterModel.asFilter();\n          const newOrUpdatedFilter = filter?.name\n            ? {\n                ...savedFilter,\n                name: filter.name,\n              }\n            : savedFilter;\n          onSave(newOrUpdatedFilter);\n          return true;\n        }\n        case \"and-clause\": {\n          clauseCombinatorRef.current = \"and\";\n          filterModel.addNewFilterClause(\"and\");\n          return true;\n        }\n        case \"or-clause\":\n          clauseCombinatorRef.current = \"or\";\n          filterModel.addNewFilterClause(\"or\");\n          return true;\n        default:\n          return false;\n      }\n    },\n    [filter?.name, filterModel, onSave],\n  );\n\n  const handleKeyDownSaveButton = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      if (evt.key === \"Tab\" && evt.shiftKey) {\n        evt.preventDefault();\n        const target = evt.target as HTMLElement;\n        const filterEditor = target.closest(\".vuuFilterEditor\") as HTMLElement;\n        focusLastClauseValue(filterEditor);\n      } else if (evt.key === \"Escape\") {\n        onCancel(filter);\n      }\n    },\n    [filter, onCancel],\n  );\n\n  const handleKeyDownNavigationFromCombinator = useCallback<\n    KeyboardEventHandler<HTMLElement>\n  >((evt) => {\n    const { target, key, shiftKey } = evt;\n    if (key === \"ArrowLeft\") {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"bwd\");\n    } else if (key === \"ArrowRight\") {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"fwd\");\n    } else if (key === \"Tab\" && shiftKey) {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"bwd\");\n    }\n  }, []);\n\n  const handleClickSaveButton = useMemo(\n    () => () =>\n      // onSave() ?\n      invokeMenuAction(\"save\"),\n    [invokeMenuAction],\n  );\n\n  const saveButtonProps = {\n    PopupMenuProps: {\n      icon: \"more-vert\",\n      menuBuilder: saveButtonMenuBuilder,\n      menuActionHandler: invokeMenuAction,\n      menuLocation: \"filter-save-menu\",\n    },\n    onClick: handleClickSaveButton,\n    onKeyDown: handleKeyDownSaveButton,\n  };\n\n  const onChangeFilterCombinator =\n    useCallback<FilterClauseCombinatorChangeHandler>(\n      (op) => {\n        filterModel.setOp(op);\n        clauseCombinatorRef.current = op;\n        forceRefresh({});\n      },\n      [filterModel],\n    );\n\n  const handleCancelFilterEdit = useCallback(() => {\n    onCancel(filter);\n  }, [filter, onCancel]);\n\n  return {\n    columnsByName,\n    filterModel,\n    focusSaveButton,\n    isValid,\n    onCancelFilterClause: handleCancelFilterClause,\n    onCancelFilterEdit: handleCancelFilterEdit,\n    onChangeFilterCombinator,\n    onKeyDownCombinator: handleKeyDownNavigationFromCombinator,\n    saveButtonProps,\n    saveButtonRef,\n    setContainer,\n  };\n};\n\n// Duplicated in useFilterBar\nfunction columnDescriptorsByName(\n  columns: readonly ColumnDescriptor[],\n): ColumnDescriptorsByName {\n  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["useMemo","FilterModel","useState","useRef","useCallback","focusFirstClauseIfAllClausesValid","_","isValid","getFocusedFieldDetails","focusFilterClauseField","focusLastClauseValue","navigateToNextFilterClause"],"mappings":"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"}

package/cjs/filter-panel/FilterPanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var filterPanelCss = ".vuuFilterPanel {\n    --vuuPrompt-minHeight: fit-content;\n\n    display: flex;\n    flex-direction: column;\n    gap: var(--vuuFilterPanel-gap, var(--salt-spacing-100));\n    height: var(--vuuFilterPanel-height, auto);\n    padding: var(--vuuFilterPanel-padding, 0);\n\n    --vuuFilterContainer-flex: 1 1 auto; \n\n    .vuuFilterPanel-toolbar {\n        align-items: center;\n        display: flex;\n        flex: 0 0 var(--salt-size-base);\n        padding: var(--salt-spacing-200) 0;\n        justify-content: space-between;\n    }\n}\n\n";
+
+module.exports = filterPanelCss;
+//# sourceMappingURL=FilterPanel.css.js.map

package/cjs/filter-panel/FilterPanel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/filter-panel/FilterPanel.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var cx = require('clsx');
+var react = require('react');
+var FilterPanel$1 = require('./FilterPanel.css.js');
+var FilterContainer = require('../filter-container/FilterContainer.js');
+var core = require('@salt-ds/core');
+var useFilterPanel = require('./useFilterPanel.js');
+
+const classBase = "vuuFilterPanel";
+const FilterPanel = react.forwardRef(function FilterDisplay({
+  children,
+  className,
+  filter: filterProp,
+  filterProviderKey,
+  onFilterApplied: onFilterAppliedProp,
+  onFilterCleared: onFilterClearedProp,
+  permissions,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-filter-panel",
+    css: FilterPanel$1,
+    window: targetWindow
+  });
+  const {
+    clearFilter,
+    disableClear,
+    disableSave,
+    filter,
+    onFilterApplied,
+    onFilterCleared,
+    saveFilter,
+    saveFilterPrompt
+  } = useFilterPanel.useFilterPanel({
+    filter: filterProp,
+    filterProviderKey,
+    onFilterApplied: onFilterAppliedProp,
+    onFilterCleared: onFilterClearedProp
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, className),
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FilterContainer.FilterContainer,
+          {
+            filter,
+            filterProviderKey,
+            onFilterApplied,
+            onFilterCleared,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-toolbar`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Button,
+            {
+              appearance: "transparent",
+              disabled: disableClear,
+              onClick: clearFilter,
+              sentiment: "neutral",
+              children: "Clear"
+            }
+          ),
+          permissions?.allowSaveFilter !== false ? /* @__PURE__ */ jsxRuntime.jsx(
+            core.Button,
+            {
+              appearance: "transparent",
+              disabled: disableSave,
+              onClick: saveFilter,
+              sentiment: "neutral",
+              children: "Save"
+            }
+          ) : null
+        ] }),
+        saveFilterPrompt
+      ]
+    }
+  );
+});
+
+exports.FilterPanel = FilterPanel;
+//# sourceMappingURL=FilterPanel.js.map

package/cjs/filter-panel/FilterPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.js","sources":["../../../../packages/vuu-filters/src/filter-panel/FilterPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\n\nimport filterPanelCss from \"./FilterPanel.css\";\nimport {\n  FilterContainer,\n  FilterContainerProps,\n} from \"../filter-container/FilterContainer\";\nimport { Button } from \"@salt-ds/core\";\nimport { useFilterPanel } from \"./useFilterPanel\";\n\nconst classBase = \"vuuFilterPanel\";\n\nexport type FilterPanelPermissions = {\n  allowSaveFilter: boolean;\n};\n\nexport interface FilterPanelProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<\n      FilterContainerProps,\n      \"filter\" | \"filterProviderKey\" | \"onFilterApplied\" | \"onFilterCleared\"\n    > {\n  permissions?: FilterPanelPermissions;\n}\n\nexport const FilterPanel = forwardRef(function FilterDisplay(\n  {\n    children,\n    className,\n    filter: filterProp,\n    filterProviderKey,\n    onFilterApplied: onFilterAppliedProp,\n    onFilterCleared: onFilterClearedProp,\n    permissions,\n    ...htmlAttributes\n  }: FilterPanelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-panel\",\n    css: filterPanelCss,\n    window: targetWindow,\n  });\n\n  const {\n    clearFilter,\n    disableClear,\n    disableSave,\n    filter,\n    onFilterApplied,\n    onFilterCleared,\n    saveFilter,\n    saveFilterPrompt,\n  } = useFilterPanel({\n    filter: filterProp,\n    filterProviderKey,\n    onFilterApplied: onFilterAppliedProp,\n    onFilterCleared: onFilterClearedProp,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    >\n      <FilterContainer\n        filter={filter}\n        filterProviderKey={filterProviderKey}\n        onFilterApplied={onFilterApplied}\n        onFilterCleared={onFilterCleared}\n      >\n        {children}\n      </FilterContainer>\n      <div className={`${classBase}-toolbar`}>\n        <Button\n          appearance=\"transparent\"\n          disabled={disableClear}\n          onClick={clearFilter}\n          sentiment=\"neutral\"\n        >\n          Clear\n        </Button>\n        {permissions?.allowSaveFilter !== false ? (\n          <Button\n            appearance=\"transparent\"\n            disabled={disableSave}\n            onClick={saveFilter}\n            sentiment=\"neutral\"\n          >\n            Save\n          </Button>\n        ) : null}\n      </div>\n      {saveFilterPrompt}\n    </div>\n  );\n});\n"],"names":["forwardRef","useWindow","useComponentCssInjection","filterPanelCss","useFilterPanel","jsxs","jsx","FilterContainer","Button"],"mappings":";;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,gBAAA;AAeL,MAAA,WAAA,GAAcA,gBAAW,CAAA,SAAS,aAC7C,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,iBAAA;AAAA,EACA,eAAiB,EAAA,mBAAA;AAAA,EACjB,eAAiB,EAAA,mBAAA;AAAA,EACjB,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,MACEC,6BAAe,CAAA;AAAA,IACjB,MAAQ,EAAA,UAAA;AAAA,IACR,iBAAA;AAAA,IACA,eAAiB,EAAA,mBAAA;AAAA,IACjB,eAAiB,EAAA;AAAA,GAClB,CAAA;AAED,EACE,uBAAAC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,YAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAACC,+BAAA;AAAA,UAAA;AAAA,YACC,MAAA;AAAA,YACA,iBAAA;AAAA,YACA,eAAA;AAAA,YACA,eAAA;AAAA,YAEC;AAAA;AAAA,SACH;AAAA,wBACCF,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,QAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACE,WAAA;AAAA,YAAA;AAAA,cACC,UAAW,EAAA,aAAA;AAAA,cACX,QAAU,EAAA,YAAA;AAAA,cACV,OAAS,EAAA,WAAA;AAAA,cACT,SAAU,EAAA,SAAA;AAAA,cACX,QAAA,EAAA;AAAA;AAAA,WAED;AAAA,UACC,WAAA,EAAa,oBAAoB,KAChC,mBAAAF,cAAA;AAAA,YAACE,WAAA;AAAA,YAAA;AAAA,cACC,UAAW,EAAA,aAAA;AAAA,cACX,QAAU,EAAA,WAAA;AAAA,cACV,OAAS,EAAA,UAAA;AAAA,cACT,SAAU,EAAA,SAAA;AAAA,cACX,QAAA,EAAA;AAAA;AAAA,WAGC,GAAA;AAAA,SACN,EAAA,CAAA;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}