@tint-ui/data-table 0.3.5

package/cjs/data-table-toolbar.js

@@ -0,0 +1,103 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+exports.__esModule = true;
+exports.DataTableToolbar = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _button = require("@tint-ui/button");
+var _svgIcon = require("@tint-ui/svg-icon");
+var _slideNavigator = require("@tint-ui/slide-navigator");
+var _useMediaQuery = require("@tint-ui/tools/use-media-query");
+var _context = require("./context");
+var _toolbarClasses = require("./toolbar-classes");
+var _dataTableViewsOptions = require("./data-table-views-options");
+var _dataTableTextFilter = require("./data-table-text-filter");
+var _filterAdapterType = require("./filter-adapter-type");
+const _excluded = ["className"];
+// label
+const DataTableToolbar = exports.DataTableToolbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      className
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const classes = (0, _toolbarClasses.useDataTableToolbarClasses)();
+  const {
+    lexicon,
+    table,
+    filterVisible,
+    toolbar: {
+      size,
+      resetIconOnly,
+      onFilterReset
+    }
+  } = (0, _context.useDataTableContext)();
+  const isMobile = (0, _useMediaQuery.useMediaQuery)("(max-width: 639px)", {
+    noSsr: true
+  });
+  const state = table.getState();
+  const isFiltered = state.columnFilters.length > 0 || String(state.globalFilter ?? "").length > 0;
+  const filters = filterVisible.getVisibleFilters();
+  const isHeading = filters.length === 0 && !filterVisible.filterText && !isFiltered;
+  let body;
+  if (isHeading) {
+    body = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h2", {
+      className: classes.heading
+    }, lexicon.title), /*#__PURE__*/React.createElement(_dataTableViewsOptions.DataTableViewOptions, null));
+  } else {
+    const col1 = filterVisible.filterText ? /*#__PURE__*/React.createElement("div", {
+      key: "search",
+      className: classes.search
+    }, /*#__PURE__*/React.createElement(_dataTableTextFilter.DataTableTextFilter, {
+      isMobile: isMobile
+    })) : /*#__PURE__*/React.createElement("h2", {
+      key: "heading",
+      className: classes.heading
+    }, lexicon.title);
+    const col2 = filters.length > 0 ? /*#__PURE__*/React.createElement(_slideNavigator.SlideNavigator, {
+      key: "filters",
+      size: size,
+      arrow: "auto",
+      className: classes.filters
+    }, filters.map(filter => /*#__PURE__*/React.createElement(_slideNavigator.Slide, {
+      key: filter.name,
+      asChild: true
+    }, (0, _filterAdapterType.renderDataTableFilter)(filter)))) : isMobile ? null : /*#__PURE__*/React.createElement("div", {
+      key: "empty-filters",
+      className: classes.filters
+    });
+    const col3 = /*#__PURE__*/React.createElement("div", {
+      key: "reset",
+      className: classes.reset
+    }, isFiltered && /*#__PURE__*/React.createElement(_button.Button, {
+      variant: "secondary",
+      "data-type": "toolbar-button-reset",
+      size: size,
+      onClick: onFilterReset,
+      iconLeft: /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
+        icon: "x",
+        "aria-hidden": "true"
+      }),
+      iconOnly: resetIconOnly
+    }, resetIconOnly ? null : lexicon.filterReset));
+    const col4 = /*#__PURE__*/React.createElement("div", {
+      key: "options",
+      className: classes.options
+    }, /*#__PURE__*/React.createElement(_dataTableViewsOptions.DataTableViewOptions, null));
+    body = isMobile ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: classes.mobile
+    }, col1, col3, col4), col2 == null ? null : /*#__PURE__*/React.createElement("div", {
+      className: classes.mobile
+    }, col2)) : /*#__PURE__*/React.createElement(React.Fragment, null, col1, col2, col3, col4);
+  }
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, props, {
+    "data-size": size,
+    className: (0, _clsx.default)(className, classes.toolbar, !isHeading && (isMobile ? classes.withFilterGroup : classes.withFilter)),
+    ref: ref
+  }), body);
+});
+DataTableToolbar.displayName = "DataTableToolbar";

package/cjs/data-table-views-options.js

@@ -0,0 +1,137 @@
+"use strict";
+"use client";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+exports.__esModule = true;
+exports.DataTableViewOptions = DataTableViewOptions;
+var React = _interopRequireWildcard(require("react"));
+var _button = require("@tint-ui/button");
+var _dropdownMenu = require("@tint-ui/dropdown-menu");
+var _context = require("./context");
+var _svgIcon = require("@tint-ui/svg-icon");
+const preventHandler = event => {
+  event.preventDefault();
+};
+const menuColumns = function (table) {
+  return table.getAllColumns().filter(column => typeof column.accessorFn !== "undefined" && column.getCanHide()).map(column => {
+    const cell = column.columnDef.meta?._cell;
+    return /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuCheckboxItem, {
+      key: column.id,
+      checked: column.getIsVisible(),
+      onSelect: preventHandler,
+      onCheckedChange: value => {
+        column.toggleVisibility(value);
+      }
+    }, cell ? cell.label : column.id);
+  });
+};
+const menuSorts = function (table) {
+  return table.getAllColumns().filter(column => typeof column.accessorFn !== "undefined" && column.getCanSort()).map(column => {
+    const cell = column.columnDef.meta?._cell;
+    const direction = column.getIsSorted();
+    const fn = column.getToggleSortingHandler();
+    return /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuItem, {
+      key: column.id,
+      onSelect: event => {
+        if (fn) {
+          fn(event);
+          event.preventDefault();
+        }
+      }
+    }, /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
+      icon: !direction ? "selector" : direction === "desc" ? "sort-desc" : "sort-asc"
+    }), cell ? cell.label : column.id);
+  });
+};
+const menuFilters = function (filterVisible) {
+  return filterVisible.getFilters().map(filter => {
+    const {
+      name
+    } = filter;
+    return /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuCheckboxItem, {
+      key: name,
+      checked: filterVisible.hasFilterVisible(name),
+      onSelect: preventHandler,
+      onCheckedChange: value => {
+        filterVisible.onFilterVisibleChange(name, value);
+      }
+    }, filter.label);
+  });
+};
+const menuFilterText = function (filterVisible, label) {
+  return /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuCheckboxItem, {
+    key: "filter-text",
+    checked: filterVisible.filterText,
+    onSelect: preventHandler,
+    onCheckedChange: value => {
+      filterVisible.onFilterTextVisibleChange(value);
+    }
+  }, label);
+};
+function DataTableViewOptions() {
+  const {
+    table,
+    filterVisible,
+    dynamic,
+    toolbar: {
+      size,
+      viewIconOnly
+    },
+    lexicon
+  } = (0, _context.useDataTableContext)();
+  let count = 0;
+  if (dynamic.column) {
+    count++;
+  }
+  if (dynamic.filter) {
+    count++;
+  }
+  if (dynamic.filterText) {
+    count++;
+  }
+  if (dynamic.sort) {
+    count++;
+  }
+  if (count === 0) {
+    return null;
+  }
+  const getTitle = () => {
+    if (count > 1) {
+      return lexicon.viewOptions;
+    }
+    if (dynamic.sort) return lexicon.viewSortBy;
+    if (dynamic.column) return lexicon.viewColumn;
+    if (dynamic.filter) return lexicon.viewFilter;
+    if (dynamic.filterText) return lexicon.viewFilterText;
+    return null;
+  };
+  const renderOnce = () => {
+    if (dynamic.sort) return menuSorts(table);
+    if (dynamic.column) return menuColumns(table);
+    if (dynamic.filter) return menuFilters(filterVisible);
+    if (dynamic.filterText) return menuFilterText(filterVisible, lexicon.viewFilterText);
+    return null;
+  };
+  return /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenu, null, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuTrigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(_button.Button, {
+    variant: "outline",
+    "data-type": "toolbar-button-options",
+    size: size,
+    iconLeft: /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
+      icon: "data-table-view"
+    }),
+    iconOnly: viewIconOnly
+  }, viewIconOnly ? null : lexicon.view)), /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuPortal, null, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuContent, {
+    align: "end",
+    onCloseAutoFocus: event => {
+      event.preventDefault();
+    }
+  }, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuLabel, null, getTitle()), /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuSeparator, null), count > 1 ? /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuGroup, null, dynamic.column && /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuSub, null, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuSubTrigger, null, /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
+    icon: "data-table-view-columns"
+  }), lexicon.viewColumn), /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuPortal, null, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuSubContent, null, menuColumns(table)))), dynamic.sort && /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuSub, null, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuSubTrigger, null, /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
+    icon: "data-table-view-sorts"
+  }), lexicon.viewSortBy), /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuPortal, null, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuSubContent, null, menuSorts(table)))), dynamic.filter && /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuSub, null, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuSubTrigger, null, /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
+    icon: "data-table-view-filters"
+  }), lexicon.viewFilter), /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuPortal, null, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownMenuSubContent, null, menuFilters(filterVisible)))), dynamic.filterText && menuFilterText(filterVisible, lexicon.viewFilterText)) : renderOnce())));
+}

package/cjs/data-table.js

@@ -0,0 +1,63 @@
+"use strict";
+"use client";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+exports.__esModule = true;
+exports.DataTable = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _useDataTable = require("./use-data-table");
+var _context = require("./context");
+var _dataTableToolbar = require("./data-table-toolbar");
+var _dataTableContent = require("./data-table-content");
+var _dataTablePagination = require("./data-table-pagination");
+const _excluded = ["themePropsType", "header", "table", "data", "navbar", "initialData", "limit", "offset", "lexicon", "total", "onRowClick", "filter", "filterText", "sortBy", "sortDir", "toolbar", "cacheable"];
+const DataTable = exports.DataTable = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      themePropsType = "data-table",
+      header = "top",
+      table: tableProp,
+      data,
+      navbar,
+      initialData,
+      limit,
+      offset,
+      lexicon,
+      total,
+      onRowClick,
+      filter,
+      filterText,
+      sortBy,
+      sortDir,
+      toolbar,
+      cacheable
+    } = _ref,
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const context = (0, _useDataTable.useDataTable)({
+    table: tableProp,
+    data,
+    navbar,
+    toolbar,
+    initialData,
+    limit,
+    offset,
+    lexicon,
+    total,
+    filter,
+    filterText,
+    sortBy,
+    sortDir,
+    header,
+    onRowClick,
+    cacheable
+  });
+  return /*#__PURE__*/React.createElement(_context.DataTableContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(_dataTableToolbar.DataTableToolbar, null), /*#__PURE__*/React.createElement(_dataTableContent.DataTableContent, (0, _extends2.default)({}, props, {
+    themePropsType: themePropsType,
+    ref: ref
+  })), /*#__PURE__*/React.createElement(_dataTablePagination.DataTablePagination, null));
+});
+DataTable.displayName = "DataTable";

package/cjs/filter-adapter-type.js

@@ -0,0 +1,162 @@
+"use strict";
+"use client";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+exports.__esModule = true;
+exports.renderDataTableFilter = exports.hasFilterAdapter = exports.addFilterAdapterAsync = exports.addFilterAdapter = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _proof = require("@tint-ui/tools/proof");
+var _errorMessage = require("@tint-ui/tools/error-message");
+var _filterAdapters = require("./filter-adapters");
+var _classes = require("./classes");
+const adapters = new Map();
+const defaultAdapters = new Map();
+Object.entries(_filterAdapters.adapters).forEach(([name, {
+  adapter
+}]) => {
+  defaultAdapters.set(name, {
+    adapter
+  });
+});
+const getAdapt = type => {
+  const adapter = adapters.get(type) || defaultAdapters.get(type);
+  if (!adapter) {
+    return null;
+  }
+  return adapter;
+};
+const privateTypes = [];
+const checkAdapt = type => {
+  if (!type) {
+    throw new Error(`Adapter type is empty`);
+  }
+  if (privateTypes.includes(type)) {
+    throw new Error(`The ${type} type is private`);
+  }
+  if (adapters.has(type)) {
+    throw new Error(`The ${type} form adapter already exists`);
+  }
+};
+const hasFilterAdapter = type => adapters.has(type);
+exports.hasFilterAdapter = hasFilterAdapter;
+const addFilterAdapter = function (name, adapter) {
+  checkAdapt(name);
+  adapters.set(name, {
+    adapter
+  });
+};
+exports.addFilterAdapter = addFilterAdapter;
+const addFilterAdapterAsync = function (name, handler) {
+  checkAdapt(name);
+  adapters.set(name, {
+    adapter: createAsyncAdapterCallback(name, handler)
+  });
+};
+exports.addFilterAdapterAsync = addFilterAdapterAsync;
+const getAsyncAdapter = function (type, result) {
+  const adapter = result?.default;
+  (0, _proof.invariant)(typeof adapter === "function", `Async ${type} adapter failure: default is not function`);
+  return adapter;
+};
+const createAsyncAdapterCallback = function (type, handler) {
+  const adapt = {
+    waiters: new Set(),
+    handler,
+    error: null
+  };
+  const adapter = filter => {
+    return /*#__PURE__*/React.createElement(DataTableFilterAdapterAsync, {
+      adapt: adapt,
+      type: type,
+      filter: filter
+    });
+  };
+  adapt.adapter = adapter;
+  return adapter;
+};
+const createAsyncPromise = async (type, adapt) => {
+  try {
+    const result = await adapt.handler();
+    const adapter = getAsyncAdapter(type, result);
+    adapt.error = null;
+    adapt.adapter = adapter;
+    adapters.set(type, {
+      adapter
+    });
+  } catch (err) {
+    adapt.error = (0, _errorMessage.errorMessage)(err).message;
+  }
+  let event;
+  if (adapt.error != null) {
+    event = {
+      error: adapt.error
+    };
+  } else if (adapt.adapter) {
+    event = {
+      adapter: adapt.adapter
+    };
+  } else {
+    return;
+  }
+  const handlers = Array.from(adapt.waiters.values());
+  adapt.waiters.clear();
+  handlers.forEach(handler => {
+    handler(event);
+  });
+};
+const DataTableFilterAdapterAsync = props => {
+  const classes = (0, _classes.useDataTableClasses)();
+  const {
+    adapt,
+    filter,
+    type
+  } = props;
+  const [state, setState] = React.useState(() => {
+    return adapt.adapter ? {
+      adapter: adapt.adapter
+    } : adapt.error != null ? {
+      error: adapt.error
+    } : null;
+  });
+  React.useEffect(() => {
+    const {
+      adapter,
+      error,
+      promise
+    } = adapt;
+    if (error != null || adapter != null) {
+      return;
+    }
+    if (promise == null) {
+      adapt.promise = createAsyncPromise(type, adapt);
+    }
+    adapt.waiters.add(setState);
+    return () => {
+      adapt.waiters.delete(setState);
+    };
+  }, [type, adapt]);
+  if (state == null) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.loader
+    });
+  }
+  if ("error" in state) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.error
+    }, state.error);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, state.adapter(filter));
+};
+DataTableFilterAdapterAsync.displayName = "DataTableFilterAdapterAsync";
+const renderDataTableFilter = function (filter) {
+  const {
+    type = "option"
+  } = filter;
+  const adapt = getAdapt(type);
+  if (!adapt) {
+    (0, _proof.warningOnce)(`table-filter:${type}`, false, `The ${type} filter type not found`);
+    return null;
+  }
+  return adapt.adapter(filter);
+};
+exports.renderDataTableFilter = renderDataTableFilter;

package/cjs/filter-adapters/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.adapters = void 0;
+var _option = require("./option");
+const adapters = exports.adapters = {
+  option: {
+    adapter: _option.optionFilterAdapter
+  }
+};

package/cjs/filter-adapters/option.js

@@ -0,0 +1,152 @@
+"use strict";
+"use client";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+exports.__esModule = true;
+exports.optionFilterAdapter = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _svgIcon = require("@tint-ui/svg-icon");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _isEmpty = require("@tint-ui/tools/is-empty");
+var _badge = require("@tint-ui/badge");
+var _button = require("@tint-ui/button");
+var _command = require("@tint-ui/command");
+var _popover = require("@tint-ui/popover");
+var _useOptionFilter = require("./use-option-filter");
+var _filterClasses = require("../filter-classes");
+const createOptionGroups = (options, groupBy) => {
+  const root = [];
+  const optionGroup = [];
+  const cache = new Map();
+  for (const option of options) {
+    const {
+      config
+    } = option;
+    if (config && groupBy in config && config[groupBy]) {
+      const heading = String(config[groupBy]).trim();
+      let options = cache.get(heading);
+      if (!options) {
+        options = [];
+        cache.set(heading, options);
+        optionGroup.push({
+          heading,
+          options
+        });
+      }
+      options.push(option);
+    } else {
+      root.push(option);
+    }
+  }
+  if (root.length) {
+    optionGroup.push({
+      options: root
+    });
+  }
+  return optionGroup;
+};
+const FilterOptionType = ({
+  filter
+}) => {
+  const classes = (0, _filterClasses.useDataTableFilterClasses)();
+  const ctx = (0, _useOptionFilter.useOptionFilter)(filter);
+  const column = ctx.column;
+  if (!column) {
+    return null;
+  }
+  const {
+    value,
+    options,
+    getSelectedOptions,
+    manual,
+    inputProps,
+    lexicon,
+    icon,
+    groupBy = null,
+    disableSearch = false
+  } = ctx;
+  const selectedOptions = getSelectedOptions();
+  const optionGroups = React.useMemo(() => groupBy ? createOptionGroups(options, groupBy) : [{
+    options
+  }], [options, groupBy]);
+  return /*#__PURE__*/React.createElement(_popover.Popover, null, /*#__PURE__*/React.createElement(_popover.PopoverTrigger, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(_button.Button, {
+    variant: "outline",
+    size: ctx.size,
+    className: classes.button,
+    iconLeft: /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
+      icon: icon || "data-table-add-filter"
+    })
+  }, /*#__PURE__*/React.createElement("span", null, filter.label), selectedOptions.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_badge.Badge, {
+    variant: "secondary",
+    className: (0, _clsx.default)(classes.badge, classes.mobile)
+  }, selectedOptions.length), /*#__PURE__*/React.createElement("div", {
+    className: (0, _clsx.default)(classes.badges, classes.desktop)
+  }, selectedOptions.length > 2 ? /*#__PURE__*/React.createElement(_badge.Badge, {
+    variant: "secondary",
+    className: classes.badge
+  }, lexicon.filterSelected(selectedOptions.length)) : selectedOptions.map(option => /*#__PURE__*/React.createElement(_badge.Badge, {
+    variant: "secondary",
+    key: option.value,
+    className: classes.badge
+  }, option.label)))))), /*#__PURE__*/React.createElement(_popover.PopoverContent, {
+    className: classes.popover,
+    align: "start"
+  }, /*#__PURE__*/React.createElement(_command.Command, null, (manual || options.length > 5 && !disableSearch) && /*#__PURE__*/React.createElement(_command.CommandInput, (0, _extends2.default)({
+    placeholder: lexicon.filterSearch(filter.label)
+  }, manual ? inputProps : null)), /*#__PURE__*/React.createElement(_command.CommandList, null, /*#__PURE__*/React.createElement(_command.CommandEmpty, null, lexicon.filterNotFound), optionGroups.map(({
+    heading,
+    options
+  }, index) => /*#__PURE__*/React.createElement(_command.CommandGroup, {
+    key: index,
+    heading: heading
+  }, options.map(option => {
+    const optionValue = option.value;
+    const isSelected = value.includes(optionValue);
+    const {
+      icon
+    } = option.config || {};
+    return /*#__PURE__*/React.createElement(_command.CommandItem, {
+      key: option.value,
+      onSelect: () => {
+        const selectedValues = new Set(value);
+        if (isSelected) {
+          selectedValues.delete(optionValue);
+        } else {
+          if (!filter.multiple) {
+            selectedValues.clear();
+          }
+          selectedValues.add(optionValue);
+        }
+        column.setFilterValue(Array.from(selectedValues));
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: (0, _clsx.default)(classes.checkbox, isSelected && classes.selected)
+    }, /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
+      icon: "check",
+      "aria-hidden": "true"
+    })), !(0, _isEmpty.isEmptyString)(icon) && /*#__PURE__*/React.createElement(_svgIcon.SvgThemeIcon, {
+      icon: icon,
+      className: classes.icon,
+      "aria-hidden": "true"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: classes.label
+    }, option.label));
+  }))), value.length > 0 && /*#__PURE__*/React.createElement(_command.CommandGroup, {
+    forceMount: true
+  }, /*#__PURE__*/React.createElement(_command.CommandSeparator, null), /*#__PURE__*/React.createElement(_command.CommandItem, {
+    onSelect: () => {
+      column.setFilterValue(undefined);
+    }
+  }, lexicon.filterClear))))));
+};
+FilterOptionType.displayName = "FilterOptionType";
+const optionFilterAdapter = filter => {
+  return /*#__PURE__*/React.createElement(FilterOptionType, {
+    filter: filter
+  });
+};
+exports.optionFilterAdapter = optionFilterAdapter;