@bigbinary/neeto-molecules 3.16.102 → 4.0.0

package/dist/cjs/useColumns-XlhUVahw.js

@@ -0,0 +1,578 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var i18next = require('i18next');
+var neetoCist = require('@bigbinary/neeto-cist');
+var Search = require('@bigbinary/neeto-icons/Search');
+var Checkbox = require('@bigbinary/neetoui/Checkbox');
+var Dropdown = require('@bigbinary/neetoui/Dropdown');
+var Input = require('@bigbinary/neetoui/Input');
+var Label = require('@bigbinary/neetoui/Label');
+var Button = require('@bigbinary/neetoui/Button');
+var ramda = require('ramda');
+var reactI18next = require('react-i18next');
+var injectCss = require('./inject-css-vQvjPR2x.js');
+var Drag = require('@bigbinary/neeto-icons/Drag');
+var jsxRuntime = require('react/jsx-runtime');
+var reactQuery = require('@tanstack/react-query');
+var useMutationWithInvalidation = require('@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation');
+var axios = require('axios');
+var zustand = require('zustand');
+var middleware = require('zustand/middleware');
+var general = require('@bigbinary/neeto-commons-frontend/utils/general');
+
+var css = ":root{--neeto-molecules-columns-menu-max-width:31.25rem}.neeto-molecules-columns__container{max-width:31.25rem;max-width:var(--neeto-molecules-columns-menu-max-width)}.neeto-molecules-columns__sortable-item .neeto-ui-cursor-grab{cursor:grab}.neeto-molecules-columns__sortable-item .neeto-ui-cursor-grab:active{cursor:grabbing}.neeto-molecules-columns__sortable-item:hover .neeto-ui-text-gray-400{color:#6b7280}";
+injectCss.n(css,{});
+
+const CSS = /*#__PURE__*/Object.freeze({
+  Translate: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      const {
+        x,
+        y
+      } = transform;
+      return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
+    }
+
+  },
+  Scale: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      const {
+        scaleX,
+        scaleY
+      } = transform;
+      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
+    }
+
+  },
+  Transform: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(' ');
+    }
+
+  },
+  Transition: {
+    toString(_ref) {
+      let {
+        property,
+        duration,
+        easing
+      } = _ref;
+      return property + " " + duration + "ms " + easing;
+    }
+
+  }
+});
+
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Item = function Item(_ref) {
+  var column = _ref.column,
+    hiddenColumns = _ref.hiddenColumns,
+    checkboxProps = _ref.checkboxProps,
+    onToggle = _ref.onToggle;
+  var key = column.key,
+    title = column.title;
+  var _useSortable = sortable.useSortable({
+      id: key
+    }),
+    attributes = _useSortable.attributes,
+    listeners = _useSortable.listeners,
+    setNodeRef = _useSortable.setNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition,
+    isDragging = _useSortable.isDragging;
+  var dragStyle = {
+    transform: isDragging ? CSS.Transform.toString(transform) : undefined,
+    transition: transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "neeto-molecules-columns__sortable-item",
+    ref: setNodeRef,
+    style: dragStyle,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Label, {
+      className: "neeto-ui-flex neeto-ui-w-full hover:neeto-ui-bg-gray-200 neeto-ui-cursor-pointer neeto-ui-items-center px-4 py-2",
+      htmlFor: key,
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$4(_objectSpread$4(_objectSpread$4({}, attributes), listeners), {}, {
+        className: "neeto-ui-mr-2 neeto-ui-cursor-grab neeto-ui-flex neeto-ui-items-center",
+        children: /*#__PURE__*/jsxRuntime.jsx(Drag, {
+          className: "neeto-ui-text-gray-400",
+          size: 16
+        })
+      })), /*#__PURE__*/jsxRuntime.jsx(Checkbox, _objectSpread$4({
+        checked: !hiddenColumns.includes(key),
+        "data-cy": "neeto-ui-columns-checkbox",
+        id: key,
+        label: title,
+        name: key,
+        onChange: onToggle
+      }, checkboxProps))]
+    })
+  });
+};
+
+var baseUrl = "api/v1/table_configurations";
+var fetch = function fetch(tableKey) {
+  return axios.get("".concat(baseUrl, "/").concat(tableKey));
+};
+var create = function create(payload) {
+  return axios.post(baseUrl, {
+    tableConfiguration: payload
+  });
+};
+var update = function update(_ref) {
+  var tableKey = _ref.tableKey,
+    payload = _ref.payload;
+  return axios.patch("".concat(baseUrl, "/").concat(tableKey), {
+    tableConfiguration: payload
+  });
+};
+var destroy = function destroy(tableKey) {
+  return axios["delete"]("".concat(baseUrl, "/").concat(tableKey));
+};
+var tableConfigurationApi = {
+  fetch: fetch,
+  create: create,
+  update: update,
+  destroy: destroy
+};
+
+var HIDDEN_COLUMNS_STORAGE_KEY = "neeto-molecules-hidden-columns";
+var COLUMNS_ORDER_STORAGE_KEY = "neeto-molecules-columns-order";
+var TABLE_CONFIGURATION_QUERY_KEY = "table-configuration";
+
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useFetchTableConfiguration = function useFetchTableConfiguration(_ref) {
+  var tableKey = _ref.tableKey,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? {} : _ref$options;
+  return reactQuery.useQuery(_objectSpread$3({
+    queryKey: [TABLE_CONFIGURATION_QUERY_KEY, tableKey],
+    enabled: !!tableKey,
+    queryFn: function queryFn() {
+      return tableConfigurationApi.fetch(tableKey);
+    }
+  }, options));
+};
+var useUpdateTableConfiguration = function useUpdateTableConfiguration(tableKey) {
+  return useMutationWithInvalidation(tableConfigurationApi.update, {
+    keysToInvalidate: [[TABLE_CONFIGURATION_QUERY_KEY, tableKey]]
+  });
+};
+var useDestroyTableConfiguration = function useDestroyTableConfiguration(tableKey) {
+  return useMutationWithInvalidation(tableConfigurationApi.destroy, {
+    keysToInvalidate: [[TABLE_CONFIGURATION_QUERY_KEY, tableKey]]
+  });
+};
+
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useTableConfigurations = function useTableConfigurations(tableKey, columnData) {
+  var _useFetchTableConfigu = useFetchTableConfiguration({
+      tableKey: tableKey
+    }),
+    tableConfiguration = _useFetchTableConfigu.data,
+    isLoading = _useFetchTableConfigu.isLoading;
+  var _useUpdateTableConfig = useUpdateTableConfiguration(tableKey),
+    updateConfiguration = _useUpdateTableConfig.mutate;
+  var _useDestroyTableConfi = useDestroyTableConfiguration(tableKey),
+    destroyConfiguration = _useDestroyTableConfi.mutate;
+  var processColumnsWithConfiguration = React.useCallback(function () {
+    var originalColumns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var existingColumnConfiguration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    if (ramda.isEmpty(existingColumnConfiguration)) {
+      return originalColumns;
+    }
+    var originalColumnsByKey = new Map(originalColumns === null || originalColumns === void 0 ? void 0 : originalColumns.filter(ramda.prop("key")).map(function (column) {
+      return [column.key, column];
+    }));
+    var configurationByKey = new Map(existingColumnConfiguration.map(function (config) {
+      return [config.key, config];
+    }));
+    var orderedConfiguredColumns = existingColumnConfiguration.map(function (config) {
+      return originalColumnsByKey.get(config.key);
+    }).filter(Boolean);
+    var unconfiguredOriginalColumns = originalColumns.filter(function (column) {
+      return column.key && !configurationByKey.has(column.key);
+    });
+    return [].concat(_toConsumableArray(orderedConfiguredColumns), _toConsumableArray(unconfiguredOriginalColumns));
+  }, []);
+  var hasAdditionalColumns = React.useMemo(function () {
+    if (!(tableConfiguration !== null && tableConfiguration !== void 0 && tableConfiguration.columns) || !columnData) {
+      return false;
+    }
+    var configurationKeys = ramda.pluck("key", tableConfiguration.columns).sort();
+    var dataKeys = ramda.pluck("key", columnData).sort();
+    return neetoCist.isNotEqualDeep(configurationKeys, dataKeys);
+  }, [tableConfiguration, columnData]);
+  var shouldApplyTableConfiguration = React.useMemo(function () {
+    return !isLoading && (tableConfiguration === null || tableConfiguration === void 0 ? void 0 : tableConfiguration.columns) && neetoCist.isNotEmpty(tableConfiguration === null || tableConfiguration === void 0 ? void 0 : tableConfiguration.columns) && !hasAdditionalColumns;
+  }, [tableConfiguration, isLoading, hasAdditionalColumns]);
+  React.useEffect(function () {
+    if (hasAdditionalColumns && tableConfiguration) {
+      destroyConfiguration(tableKey);
+    }
+  }, [hasAdditionalColumns, tableKey]);
+  var allProcessedColumns = React.useMemo(function () {
+    if (!isLoading && neetoCist.isNotEmpty(tableConfiguration === null || tableConfiguration === void 0 ? void 0 : tableConfiguration.columns) && !hasAdditionalColumns) {
+      return processColumnsWithConfiguration(columnData, tableConfiguration === null || tableConfiguration === void 0 ? void 0 : tableConfiguration.columns);
+    }
+    return columnData || [];
+  }, [isLoading, tableConfiguration === null || tableConfiguration === void 0 ? void 0 : tableConfiguration.columns, hasAdditionalColumns, columnData, processColumnsWithConfiguration]);
+  var customizedColumns = React.useMemo(function () {
+    if (shouldApplyTableConfiguration) {
+      var visibleColumnKeys = ramda.pluck("key", tableConfiguration.columns.filter(ramda.prop("isShown")));
+      return allProcessedColumns.filter(function (column) {
+        return visibleColumnKeys.includes(column.key);
+      });
+    }
+    return columnData || [];
+  }, [allProcessedColumns, columnData, tableConfiguration === null || tableConfiguration === void 0 ? void 0 : tableConfiguration.columns, shouldApplyTableConfiguration]);
+  var existingColumnConfiguration = React.useMemo(function () {
+    if (shouldApplyTableConfiguration) {
+      return tableConfiguration.columns;
+    }
+    if (!columnData || ramda.isEmpty(columnData)) {
+      return [];
+    }
+    return columnData.map(function (column) {
+      return {
+        key: column.key,
+        isShown: true
+      };
+    });
+  }, [shouldApplyTableConfiguration, columnData, tableConfiguration === null || tableConfiguration === void 0 ? void 0 : tableConfiguration.columns]);
+  var updateColumns = function updateColumns(updatedColumns) {
+    updateConfiguration({
+      tableKey: tableKey,
+      payload: {
+        table_key: tableKey,
+        columns: updatedColumns
+      }
+    });
+  };
+  var hideColumn = function hideColumn(columnKey) {
+    updateColumns(existingColumnConfiguration.map(function (column) {
+      return column.key === columnKey ? _objectSpread$2(_objectSpread$2({}, column), {}, {
+        isShown: false
+      }) : column;
+    }));
+  };
+  var showColumn = function showColumn(columnKey) {
+    updateColumns(existingColumnConfiguration.map(function (column) {
+      return column.key === columnKey ? _objectSpread$2(_objectSpread$2({}, column), {}, {
+        isShown: true
+      }) : column;
+    }));
+  };
+  var reorderColumns = function reorderColumns(newOrder) {
+    updateColumns(newOrder);
+  };
+  return {
+    customizedColumns: customizedColumns,
+    // Only visible columns (for displaying the columns in the table)
+    allProcessedColumns: allProcessedColumns,
+    // All columns (for displaying the columns in the Subheader)
+    isTableConfigurationLoading: isLoading,
+    existingColumnConfiguration: existingColumnConfiguration,
+    hideColumn: hideColumn,
+    showColumn: showColumn,
+    reorderColumns: reorderColumns,
+    destroyConfiguration: destroyConfiguration
+  };
+};
+
+var getHidableColumns = function getHidableColumns(columnData) {
+  return neetoCist.removeBy({
+    isHidable: false
+  }, columnData);
+};
+var filterBySearchTerm = function filterBySearchTerm(searchTerm, columns) {
+  return ramda.filter(function (_ref) {
+    var title = _ref.title;
+    return ramda.includes(ramda.trim(ramda.toLower(searchTerm)), ramda.trim(ramda.toLower(title)));
+  }, columns);
+};
+var removeDeletedColumns = function removeDeletedColumns(hiddenColumns, columnData) {
+  return hiddenColumns.filter(function (hiddenColumn) {
+    return neetoCist.existsBy({
+      dataIndex: hiddenColumn
+    }, columnData);
+  });
+};
+
+var _excluded$1 = ["actionBlock", "checkboxProps", "columnData", "isSearchable", "tableKey", "noColumnMessage", "searchProps"];
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Columns = function Columns(_ref) {
+  var actionBlock = _ref.actionBlock,
+    _ref$checkboxProps = _ref.checkboxProps,
+    checkboxProps = _ref$checkboxProps === void 0 ? {} : _ref$checkboxProps,
+    _ref$columnData = _ref.columnData,
+    columnData = _ref$columnData === void 0 ? [] : _ref$columnData,
+    _ref$isSearchable = _ref.isSearchable,
+    isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
+    _ref$tableKey = _ref.tableKey,
+    tableKey = _ref$tableKey === void 0 ? "" : _ref$tableKey,
+    _ref$noColumnMessage = _ref.noColumnMessage,
+    noColumnMessage = _ref$noColumnMessage === void 0 ? i18next.t("neetoMolecules.columns.noColumns") : _ref$noColumnMessage,
+    _ref$searchProps = _ref.searchProps,
+    searchProps = _ref$searchProps === void 0 ? {} : _ref$searchProps,
+    dropdownProps = _objectWithoutProperties(_ref, _excluded$1);
+  var Divider = Dropdown.Divider,
+    Menu = Dropdown.Menu,
+    MenuItem = Dropdown.MenuItem;
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchTerm = _useState2[0],
+    setSearchTerm = _useState2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useTableConfiguratio = useTableConfigurations(tableKey, columnData),
+    allProcessedColumns = _useTableConfiguratio.allProcessedColumns,
+    existingColumnConfiguration = _useTableConfiguratio.existingColumnConfiguration,
+    hideColumn = _useTableConfiguratio.hideColumn,
+    showColumn = _useTableConfiguratio.showColumn,
+    reorderColumns = _useTableConfiguratio.reorderColumns,
+    destroyConfiguration = _useTableConfiguratio.destroyConfiguration;
+  var hiddenColumns = ramda.pluck("key", existingColumnConfiguration.filter(function (column) {
+    return !column.isShown;
+  }));
+  var handleDragEnd = function handleDragEnd(event) {
+    var active = event.active,
+      over = event.over;
+    if (!over || active.id === over.id) return;
+    var oldIndex = neetoCist.findIndexBy({
+      key: active.id
+    }, existingColumnConfiguration);
+    var newIndex = neetoCist.findIndexBy({
+      key: over.id
+    }, existingColumnConfiguration);
+    if (oldIndex === -1 || newIndex === -1) return;
+    var newOrder = _toConsumableArray(existingColumnConfiguration);
+    var _newOrder$splice = newOrder.splice(oldIndex, 1),
+      _newOrder$splice2 = _slicedToArray(_newOrder$splice, 1),
+      movedItem = _newOrder$splice2[0];
+    newOrder.splice(newIndex, 0, movedItem);
+    reorderColumns(newOrder);
+  };
+  var columns = getHidableColumns(allProcessedColumns);
+  var filteredColumns = filterBySearchTerm(searchTerm, columns);
+  var handleChange = function handleChange(_ref2) {
+    var _ref2$target = _ref2.target,
+      dataIndex = _ref2$target.name,
+      checked = _ref2$target.checked;
+    if (checked) showColumn(dataIndex);else hideColumn(dataIndex);
+  };
+  var handleSearch = function handleSearch(_ref3) {
+    var value = _ref3.target.value;
+    return setSearchTerm(value);
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(Dropdown, _objectSpread$1(_objectSpread$1({
+    appendTo: document.body,
+    buttonSize: "medium",
+    buttonStyle: "text",
+    closeOnSelect: false,
+    position: "bottom-end",
+    onClose: function onClose() {
+      return setSearchTerm("");
+    }
+  }, dropdownProps), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(Menu, {
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "neeto-molecules-columns__container",
+        children: [isSearchable && /*#__PURE__*/jsxRuntime.jsx(Input, _objectSpread$1({
+          className: "px-4 py-2",
+          "data-cy": "neeto-ui-columns-search",
+          "data-testid": "neeto-ui-columns-search",
+          placeholder: t("neetoMolecules.columns.search"),
+          prefix: /*#__PURE__*/jsxRuntime.jsx(Search, {}),
+          type: "search",
+          value: searchTerm,
+          onChange: handleSearch
+        }, searchProps)), ramda.isEmpty(filteredColumns) && /*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "neeto-ui-flex neeto-ui-flex-col neeto-ui-items-center neeto-ui-p-2",
+          children: noColumnMessage
+        }), neetoCist.isNotEmpty(filteredColumns) && !searchTerm && /*#__PURE__*/jsxRuntime.jsx(core.DndContext, {
+          onDragEnd: handleDragEnd,
+          children: /*#__PURE__*/jsxRuntime.jsx(sortable.SortableContext, {
+            items: ramda.pluck("key", filteredColumns),
+            children: filteredColumns.map(function (column) {
+              return /*#__PURE__*/React.createElement(Item, {
+                checkboxProps: checkboxProps,
+                column: column,
+                hiddenColumns: hiddenColumns,
+                key: column.key,
+                onToggle: handleChange
+              });
+            })
+          })
+        }), neetoCist.isNotEmpty(filteredColumns) && searchTerm && filteredColumns.map(function (_ref4) {
+          var key = _ref4.key,
+            title = _ref4.title;
+          return /*#__PURE__*/jsxRuntime.jsx(MenuItem, {
+            children: /*#__PURE__*/jsxRuntime.jsx(Label, {
+              className: "neeto-ui-flex neeto-ui-w-full hover:neeto-ui-bg-gray-200 neeto-ui-cursor-pointer px-4 py-2",
+              htmlFor: key,
+              children: /*#__PURE__*/jsxRuntime.jsx(Checkbox, _objectSpread$1({
+                checked: !hiddenColumns.includes(key),
+                "data-cy": "neeto-ui-columns-checkbox",
+                id: key,
+                label: title,
+                name: key,
+                onChange: handleChange
+              }, checkboxProps))
+            })
+          }, key);
+        }), /*#__PURE__*/jsxRuntime.jsx(Divider, {}), !!actionBlock && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [actionBlock, /*#__PURE__*/jsxRuntime.jsx(Divider, {})]
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "flex justify-end p-1 pr-3",
+          children: /*#__PURE__*/jsxRuntime.jsx(Button, {
+            "data-cy": "column-visibility-reset-button",
+            label: t("neetoMolecules.columns.reset"),
+            style: "secondary",
+            onClick: function onClick() {
+              return destroyConfiguration(tableKey);
+            }
+          })
+        })]
+      })
+    })
+  }));
+};
+Columns.displayName = "Columns";
+
+/** @type {import("neetocommons/react-utils").ZustandStoreHook} */
+var useHiddenColumnStore = zustand.create(middleware.persist(function () {
+  return {};
+}, {
+  name: HIDDEN_COLUMNS_STORAGE_KEY
+}));
+var useHiddenColumns = function useHiddenColumns(localStorageKey) {
+  var initialValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var hiddenColumns = useHiddenColumnStore(function (state) {
+    return state[localStorageKey];
+  });
+  var setHiddenColumns = function setHiddenColumns(columns) {
+    return useHiddenColumnStore.setState(_defineProperty({}, localStorageKey, columns));
+  };
+
+  // Migrates values from old location to new zustand location.
+  React.useEffect(function () {
+    var oldValue = general.getFromLocalStorage(localStorageKey);
+    if (oldValue) {
+      setHiddenColumns(oldValue);
+      general.removeFromLocalStorage(localStorageKey);
+    } else if (!hiddenColumns) {
+      setHiddenColumns(initialValue);
+    }
+  }, [localStorageKey]);
+  var hideColumn = function hideColumn(columns) {
+    return setHiddenColumns(ramda.union(hiddenColumns, Array.isArray(columns) ? columns : [columns]));
+  };
+  var showColumn = function showColumn(columns) {
+    return setHiddenColumns(ramda.without(Array.isArray(columns) ? columns : [columns], hiddenColumns));
+  };
+  var getVisibleColumnData = function getVisibleColumnData(columnData) {
+    return neetoCist.removeBy({
+      dataIndex: ramda.includes(ramda.__, hiddenColumns || [])
+    }, columnData);
+  };
+  var onColumnDataChange = function onColumnDataChange(columnData) {
+    if (ramda.isEmpty(columnData) || !hiddenColumns) return;
+    var newHiddenColumns = removeDeletedColumns(hiddenColumns, columnData);
+    if (!ramda.equals(newHiddenColumns, hiddenColumns)) {
+      setHiddenColumns(newHiddenColumns);
+    }
+  };
+  return {
+    hiddenColumns: hiddenColumns,
+    hideColumn: hideColumn,
+    showColumn: showColumn,
+    getVisibleColumnData: getVisibleColumnData,
+    onColumnDataChange: onColumnDataChange
+  };
+};
+
+var _excluded = ["hiddenColumns", "getVisibleColumnData"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+
+/** @type {import("neetocommons/react-utils").ZustandStoreHook} */
+var useColumnOrderStore = zustand.create(middleware.persist(function () {
+  return {};
+}, {
+  name: COLUMNS_ORDER_STORAGE_KEY
+}));
+var useColumns = function useColumns(_ref) {
+  var localStorageKey = _ref.localStorageKey,
+    initialHiddenColumns = _ref.initialHiddenColumns,
+    _ref$initialOrder = _ref.initialOrder,
+    initialOrder = _ref$initialOrder === void 0 ? [] : _ref$initialOrder;
+  var columnOrder = useColumnOrderStore(function (state) {
+    return state[localStorageKey];
+  }) || initialOrder;
+  var setColumnOrder = function setColumnOrder(columns) {
+    return useColumnOrderStore.setState(_defineProperty({}, localStorageKey, columns));
+  };
+  var _useHiddenColumns = useHiddenColumns(localStorageKey, initialHiddenColumns),
+    hiddenColumns = _useHiddenColumns.hiddenColumns,
+    getVisibleColumnData = _useHiddenColumns.getVisibleColumnData,
+    hiddenColumnHelpers = _objectWithoutProperties(_useHiddenColumns, _excluded);
+  var orderColumns = function orderColumns(columnData) {
+    if (ramda.isEmpty(columnOrder)) return columnData;
+    return columnData.sort(function (a, b) {
+      if (!columnOrder.includes(a.dataIndex) || !columnOrder.includes(b.dataIndex)) {
+        return 0;
+      }
+      return columnOrder.indexOf(a.dataIndex) - columnOrder.indexOf(b.dataIndex);
+    });
+  };
+  var getColumnData = function getColumnData(_ref2) {
+    var columnData = _ref2.columnData,
+      _ref2$isHidable = _ref2.isHidable,
+      isHidable = _ref2$isHidable === void 0 ? true : _ref2$isHidable,
+      _ref2$isReOrderable = _ref2.isReOrderable,
+      isReOrderable = _ref2$isReOrderable === void 0 ? false : _ref2$isReOrderable;
+    return ramda.pipe(isHidable ? getVisibleColumnData : ramda.identity, isReOrderable ? orderColumns : ramda.identity)(columnData);
+  };
+  return _objectSpread(_objectSpread({}, hiddenColumnHelpers), {}, {
+    hiddenColumns: hiddenColumns,
+    columnOrder: columnOrder,
+    getVisibleColumnData: getVisibleColumnData,
+    setColumnOrder: setColumnOrder,
+    getColumnData: getColumnData
+  });
+};
+
+exports.COLUMNS_ORDER_STORAGE_KEY = COLUMNS_ORDER_STORAGE_KEY;
+exports.Columns = Columns;
+exports.HIDDEN_COLUMNS_STORAGE_KEY = HIDDEN_COLUMNS_STORAGE_KEY;
+exports.TABLE_CONFIGURATION_QUERY_KEY = TABLE_CONFIGURATION_QUERY_KEY;
+exports.useColumnOrderStore = useColumnOrderStore;
+exports.useColumns = useColumns;
+exports.useHiddenColumnStore = useHiddenColumnStore;
+exports.useHiddenColumns = useHiddenColumns;
+exports.useTableConfigurations = useTableConfigurations;
+//# sourceMappingURL=useColumns-XlhUVahw.js.map