@bigbinary/neetoui 8.3.42 → 8.3.44

package/dist/{index-CAbfRu1o.js → index-cQSKx75O.js}

@@ -1,19 +1,19 @@
 import _ConfigProvider from 'antd/lib/config-provider';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useRef, forwardRef, useState, useEffect, useCallback } from 'react';
+import React__default, { useRef, forwardRef, useState, useEffect, useCallback } from 'react';
 import classnames from 'classnames';
 import Clock from '@bigbinary/neeto-icons/Clock';
 import { useTranslation } from 'react-i18next';
 import './Accordion.js';
 import './ActionDropdown.js';
-import './Button.js';
+import Button from './Button.js';
 import './Modal.js';
 import Typography from './Typography.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'avvvatars-react';
-import 'ramda';
+import { prop, equals, move, assocPath, pick, mergeLeft } from 'ramda';
 import '@tippyjs/react';
 import 'tippy.js';
 import './Callout.js';
@@ -24,11 +24,11 @@ import '@babel/runtime/regenerator';
 import '@bigbinary/neeto-icons/Down';
 import '@bigbinary/neeto-icons/ColorPicker';
 import 'react-colorful';
-import './useRecentlyUsedColors-Bz5p2xal.js';
-import './Dropdown.js';
-import { A as ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES, g as getLocale, c as convertToDayjsObjects, h as hyphenize, n as noop, d as getTimezoneAppliedDateTime, e as dayjs } from './index-DFo1kTlC.js';
+import './useRecentlyUsedColors-C18GFyJC.js';
+import Dropdown from './Dropdown.js';
+import { A as ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES, g as getLocale, e as convertToDayjsObjects, h as hyphenize, n as noop, i as getTimezoneAppliedDateTime, j as dayjs } from './index-BbZEp6Op.js';
 import _DatePicker from 'antd/lib/date-picker';
-import { isPresent, findBy, isNotPresent } from '@bigbinary/neeto-cist';
+import { isPresent, findBy, isNotPresent, findIndexBy, modifyBy } from '@bigbinary/neeto-cist';
 import Left from '@bigbinary/neeto-icons/Left';
 import Right from '@bigbinary/neeto-icons/Right';
 import Calendar from '@bigbinary/neeto-icons/Calendar';
@@ -41,8 +41,8 @@ import { u as useId } from './useId-Jj9hXm-g.js';
 import '@bigbinary/neeto-hotkeys';
 import './overlayManager.js';
 import 'qs';
-import { u as useSyncedRef } from './Textarea-Cn12kZAy.js';
-import './Pane.js';
+import { u as useSyncedRef, T as Textarea } from './Textarea-CoY3q1mA.js';
+import Pane from './Pane.js';
 import './Popover.js';
 import 'framer-motion';
 import './Radio.js';
@@ -66,12 +66,19 @@ import 'antd/locale/pt_PT';
 import './Switch.js';
 import './Tab.js';
 import 'antd/lib/table';
-import '@bigbinary/neeto-icons/MenuHorizontal';
+import MenuHorizontal from '@bigbinary/neeto-icons/MenuHorizontal';
 import 'react-drag-listview';
 import '@bigbinary/neeto-icons/DownArrow';
 import '@bigbinary/neeto-icons/UpArrow';
-import '@bigbinary/neeto-icons/InfoRound';
-import './useRestoreScrollPosition-C0t8os3c.js';
+import InfoRound from '@bigbinary/neeto-icons/InfoRound';
+import Check from '@bigbinary/neeto-icons/Check';
+import Ascending from '@bigbinary/neeto-icons/Ascending';
+import Descending from '@bigbinary/neeto-icons/Descending';
+import Pin from '@bigbinary/neeto-icons/Pin';
+import ColumnToLeft from '@bigbinary/neeto-icons/ColumnToLeft';
+import ColumnToRight from '@bigbinary/neeto-icons/ColumnToRight';
+import Hide from '@bigbinary/neeto-icons/Hide';
+import { create } from 'zustand';
 import 'react-resizable';
 import Tag from './Tag.js';
 import { ANTD_LOCALE } from './constants.js';
@@ -81,6 +88,24 @@ import 'antd/lib/tree';
 import './TreeSelect.js';
 import Select from './Select.js';
 
+var useFuncDebounce = function useFuncDebounce(func) {
+  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 350;
+  var timer = useRef(null);
+  var debouncedFunc = function debouncedFunc() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    clearTimeout(timer.current);
+    timer.current = setTimeout(function () {
+      return func.apply(void 0, args);
+    }, delay);
+  };
+  debouncedFunc.cancel = function () {
+    return clearTimeout(timer.current);
+  };
+  return debouncedFunc;
+};
+
 var IconOverride = function IconOverride(_ref) {
   var Icon = _ref.icon;
   return /*#__PURE__*/jsx("span", {
@@ -92,8 +117,8 @@ var IconOverride = function IconOverride(_ref) {
   });
 };
 
-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), true).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; }
+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), true).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 Provider = function Provider(_ref) {
   var children = _ref.children;
   var _useTranslation = useTranslation(),
@@ -101,7 +126,7 @@ var Provider = function Provider(_ref) {
   return /*#__PURE__*/jsx(_ConfigProvider, {
     locale: ANTD_LOCALE[i18n.language || "en"],
     theme: {
-      token: _objectSpread$2({}, ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
+      token: _objectSpread$3({}, ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES),
       components: {
         DatePicker: {
           activeBg: "rgb(var(--neeto-ui-white))",
@@ -232,9 +257,9 @@ var TimezoneSelect = function TimezoneSelect(_ref) {
   });
 };
 
-var _excluded$1 = ["className", "label", "size", "dropdownClassName", "popupClassName", "dateFormat", "timeFormat", "placeholder", "onChange", "onOk", "picker", "showTime", "type", "nakedInput", "error", "defaultValue", "value", "labelProps", "required", "allowClear", "maxDate", "minDate", "timePickerProps", "timezone", "onTimezoneChange", "onOpenChange", "onKeyDown"];
-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), true).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 _excluded$2 = ["className", "label", "size", "dropdownClassName", "popupClassName", "dateFormat", "timeFormat", "placeholder", "onChange", "onOk", "picker", "showTime", "type", "nakedInput", "error", "defaultValue", "value", "labelProps", "required", "allowClear", "maxDate", "minDate", "timePickerProps", "timezone", "onTimezoneChange", "onOpenChange", "onKeyDown"];
+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), true).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 INPUT_SIZES$1 = {
   medium: "medium"};
 var RangePicker$1 = _DatePicker.RangePicker;
@@ -287,7 +312,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onTimezoneChange = _ref.onTimezoneChange,
     onOpenChange = _ref.onOpenChange,
     onKeyDown = _ref.onKeyDown,
-    otherProps = _objectWithoutProperties(_ref, _excluded$1);
+    otherProps = _objectWithoutProperties(_ref, _excluded$2);
   var _useState = useState(inputValue),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -359,16 +384,16 @@ var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/jsx(Provider, {
     children: /*#__PURE__*/jsxs("div", {
       className: "neeto-ui-input__wrapper",
-      children: [label && /*#__PURE__*/jsx(Label, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
+      children: [label && /*#__PURE__*/jsx(Label, _objectSpread$2(_objectSpread$2({}, _objectSpread$2({
         required: required
       }, labelProps)), {}, {
         children: label
-      })), /*#__PURE__*/jsx(Component, _objectSpread$1(_objectSpread$1({
+      })), /*#__PURE__*/jsx(Component, _objectSpread$2(_objectSpread$2({
         "data-cy": label ? "".concat(hyphenize(label), "-input") : "picker-input",
         defaultValue: convertToDayjsObjects(defaultValue),
         placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : format,
         ref: datePickerRef,
-        showTime: showTime && _objectSpread$1({
+        showTime: showTime && _objectSpread$2({
           format: timeFormat
         }, timePickerProps),
         value: convertToDayjsObjects(value),
@@ -387,7 +412,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
         onChange: handleOnChange,
         onKeyDown: handleOnKeyDown,
         onOpenChange: handleOnOpenChange
-      }, _objectSpread$1(_objectSpread$1({
+      }, _objectSpread$2(_objectSpread$2({
         format: format,
         maxDate: maxDate,
         minDate: minDate,
@@ -438,6 +463,341 @@ var DatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 DatePicker.displayName = "DatePicker";
 
+var URL_SORT_ORDERS = {
+  ascend: "asc",
+  descend: "desc"
+};
+var TABLE_SORT_ORDERS = {
+  asc: "ascend",
+  desc: "descend"
+};
+var COLUMN_ADD_DIRECTION = {
+  left: 0,
+  right: 1
+};
+var SELECT_ALL_ROWS_CALLOUT_DESKTOP_HEIGHT = 57;
+var SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT = 78;
+var COLUMN_FIXED_VALUES = {
+  LEFT: "left"};
+var TABLE_PAGINATION_HEIGHT = 64;
+var TABLE_DEFAULT_HEADER_HEIGHT = 40;
+var TABLE_ROW_HEIGHT = 52;
+
+var useTableStore = create(function (set) {
+  return {
+    infoPaneState: {
+      isOpen: false,
+      column: null
+    },
+    setInfoPaneState: function setInfoPaneState(state) {
+      return set({
+        infoPaneState: state
+      });
+    }
+  };
+});
+
+var _excluded$1 = ["isActive", "icon", "label"];
+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), true).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 Menu = Dropdown.Menu,
+  MenuItem = Dropdown.MenuItem;
+var ActionItem = function ActionItem(_ref) {
+  var _ref$isActive = _ref.isActive,
+    isActive = _ref$isActive === void 0 ? false : _ref$isActive,
+    Icon = _ref.icon,
+    label = _ref.label,
+    rest = _objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/jsxs(MenuItem.Button, _objectSpread$1(_objectSpread$1({
+    className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-between"
+  }, rest), {}, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "neeto-ui-flex neeto-ui-items-center neeto-ui-gap-3",
+      children: [Icon && /*#__PURE__*/jsx(Icon, {
+        className: "neeto-ui-text-gray-500",
+        size: 18
+      }), /*#__PURE__*/jsx("span", {
+        children: label
+      })]
+    }), isActive && /*#__PURE__*/jsx(Check, {
+      className: "neeto-ui-text-success-500",
+      size: 20
+    })]
+  }));
+};
+
+// eslint-disable-next-line @bigbinary/neeto/no-dumb-components-with-use-translation
+var HeaderCellMenu = function HeaderCellMenu(_ref2) {
+  var onSort = _ref2.onSort,
+    _ref2$column = _ref2.column,
+    column = _ref2$column === void 0 ? {} : _ref2$column,
+    sortedInfo = _ref2.sortedInfo,
+    isSortable = _ref2.isSortable,
+    isAddEnabled = _ref2.isAddEnabled,
+    isFixedColumn = _ref2.isFixedColumn,
+    isColumnDeletable = _ref2.isColumnDeletable,
+    isColumnFreezeEnabled = _ref2.isColumnFreezeEnabled,
+    isHidable = _ref2.isHidable,
+    onColumnHide = _ref2.onColumnHide,
+    isMoveToLeftEnabled = _ref2.isMoveToLeftEnabled,
+    isMoveToRightEnabled = _ref2.isMoveToRightEnabled,
+    onAddColumn = _ref2.onAddColumn,
+    onColumnUpdate = _ref2.onColumnUpdate,
+    onColumnDelete = _ref2.onColumnDelete,
+    onColumnFreeze = _ref2.onColumnFreeze,
+    hasMoreActions = _ref2.hasMoreActions,
+    onMoreActionClick = _ref2.onMoreActionClick,
+    _ref2$moreActions = _ref2.moreActions,
+    moreActions = _ref2$moreActions === void 0 ? [] : _ref2$moreActions;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+  var setInfoPaneState = useTableStore(prop("setInfoPaneState"));
+  var onMoveColumn = function onMoveColumn(offset) {
+    if (!onColumnUpdate) return;
+    onColumnUpdate(function (columns) {
+      var index = findIndexBy({
+        key: column.key
+      }, columns);
+      var isValid = index + offset >= 0 && index + offset < columns.length;
+      if (!isValid) return columns;
+      return move(index, index + offset, columns);
+    });
+  };
+  return /*#__PURE__*/jsx("div", {
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    },
+    children: /*#__PURE__*/jsx(Dropdown, {
+      appendTo: function appendTo() {
+        return document.body;
+      },
+      className: "neeto-ui-flex",
+      icon: MenuHorizontal,
+      position: "bottom",
+      strategy: "fixed",
+      zIndex: 99999,
+      buttonProps: {
+        className: "neeto-ui-min-h-0 neeto-ui-flex-shrink-0",
+        style: "text",
+        size: "medium",
+        "data-testid": "column-menu-button",
+        "data-cy": "column-menu-button",
+        "data-dropdown-button-style": "more-dropdown"
+      },
+      children: /*#__PURE__*/jsxs(Menu, {
+        className: "neeto-ui-cursor-auto",
+        onMouseDown: function onMouseDown(event) {
+          return event.preventDefault();
+        },
+        children: [isSortable && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(ActionItem, {
+            "data-cy": "ascending-column-menu-button",
+            icon: Ascending,
+            label: getLocale(i18n, t, "neetoui.table.ascending"),
+            isActive: sortedInfo.order === TABLE_SORT_ORDERS.asc && equals(sortedInfo.field, column.dataIndex),
+            onClick: function onClick() {
+              return onSort({
+                column: column,
+                columnKey: column.key,
+                field: column.dataIndex || column.key,
+                order: TABLE_SORT_ORDERS.asc
+              });
+            }
+          }), /*#__PURE__*/jsx(ActionItem, {
+            "data-cy": "descending-column-menu-button",
+            icon: Descending,
+            label: getLocale(i18n, t, "neetoui.table.descending"),
+            isActive: sortedInfo.order === TABLE_SORT_ORDERS.desc && equals(sortedInfo.field, column.dataIndex),
+            onClick: function onClick() {
+              return onSort({
+                column: column,
+                columnKey: column.key,
+                field: column.dataIndex,
+                order: TABLE_SORT_ORDERS.desc
+              });
+            }
+          })]
+        }), isAddEnabled && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(ActionItem, {
+            "data-cy": "insert-right-column-menu-button",
+            label: getLocale(i18n, t, "neetoui.table.insertColRight"),
+            onClick: function onClick() {
+              return onAddColumn(COLUMN_ADD_DIRECTION.right);
+            }
+          }), /*#__PURE__*/jsx(ActionItem, {
+            "data-cy": "insert-left-column-menu-button",
+            label: getLocale(i18n, t, "neetoui.table.insertColLeft"),
+            onClick: function onClick() {
+              return onAddColumn(COLUMN_ADD_DIRECTION.left);
+            }
+          })]
+        }), isHidable && /*#__PURE__*/jsx(ActionItem, {
+          icon: Hide,
+          label: getLocale(i18n, t, "neetoui.table.hideColumn"),
+          onClick: function onClick() {
+            return onColumnHide(column);
+          }
+        }), isColumnDeletable && /*#__PURE__*/jsx(ActionItem, {
+          "data-cy": "delete-column-menu-button",
+          label: getLocale(i18n, t, "neetoui.table.deleteColumn"),
+          onClick: function onClick() {
+            return onColumnDelete(column.id);
+          }
+        }), isColumnFreezeEnabled && /*#__PURE__*/jsx(ActionItem, {
+          "data-cy": "freeze-unfreeze-column-menu-button",
+          icon: Pin,
+          label: isFixedColumn ? getLocale(i18n, t, "neetoui.table.unFreezeColumn") : getLocale(i18n, t, "neetoui.table.freezeColumn"),
+          onClick: function onClick() {
+            return onColumnFreeze(isFixedColumn, column);
+          }
+        }), isPresent(onColumnUpdate) && /*#__PURE__*/jsx(ActionItem, {
+          icon: InfoRound,
+          label: getLocale(i18n, t, "neetoui.table.editColumnInfo"),
+          onClick: function onClick() {
+            setInfoPaneState({
+              isOpen: true,
+              column: column
+            });
+          }
+        }), isPresent(onColumnUpdate) && isMoveToLeftEnabled && /*#__PURE__*/jsx(ActionItem, {
+          icon: ColumnToLeft,
+          label: getLocale(i18n, t, "neetoui.table.moveColumnLeft"),
+          onClick: function onClick() {
+            return onMoveColumn(-1);
+          }
+        }), isPresent(onColumnUpdate) && isMoveToRightEnabled && /*#__PURE__*/jsx(ActionItem, {
+          icon: ColumnToRight,
+          label: getLocale(i18n, t, "neetoui.table.moveColumnRight"),
+          onClick: function onClick() {
+            return onMoveColumn(1);
+          }
+        }), hasMoreActions && moreActions.map(function (item, index) {
+          return /*#__PURE__*/jsx(ActionItem, {
+            "data-cy": "".concat(hyphenize(item.label), "-column-menu-button"),
+            icon: item.icon,
+            label: item.label,
+            onClick: function onClick() {
+              return onMoreActionClick(item.type, column);
+            }
+          }, index);
+        })]
+      })
+    })
+  });
+};
+var HeaderCellMenu$1 = /*#__PURE__*/React__default.memo(HeaderCellMenu);
+
+var useScrollStore = create(function (set) {
+  return {
+    scrollPositions: {},
+    setScrollPosition: function setScrollPosition(key, position) {
+      return set(assocPath(["scrollPositions", key], position));
+    }
+  };
+});
+var useRestoreScrollPosition = function useRestoreScrollPosition(_ref) {
+  var tableRef = _ref.tableRef,
+    scrollRef = _ref.scrollRef,
+    loading = _ref.loading;
+  var key = window.location.pathname;
+  var scrollPositions = useScrollStore(prop("scrollPositions"));
+  var setScrollPosition = useScrollStore(prop("setScrollPosition"));
+  useEffect(function () {
+    if (loading) {
+      setScrollPosition(key, 0);
+      return;
+    }
+    if (scrollRef.current === null || !scrollPositions[key]) return;
+    setTimeout(function () {
+      var _scrollRef$current;
+      var position = scrollPositions[key];
+      (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTo({
+        top: position
+      });
+    });
+  }, [key, tableRef, loading]);
+  var handleScroll = useFuncDebounce(function (event) {
+    setScrollPosition(key, parseInt(event.target.scrollTop));
+  });
+  return {
+    handleScroll: handleScroll
+  };
+};
+
+var pickStore = pick(["infoPaneState", "setInfoPaneState"]);
+var TableInfoPane = function TableInfoPane(_ref) {
+  var onColumnUpdate = _ref.onColumnUpdate;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    description = _useState2[0],
+    setDescription = _useState2[1];
+  var _useTableStore = useTableStore(pickStore),
+    infoPaneState = _useTableStore.infoPaneState,
+    setInfoPaneState = _useTableStore.setInfoPaneState;
+  var isOpen = infoPaneState.isOpen,
+    column = infoPaneState.column;
+  var onUpdateColumn = function onUpdateColumn(changes) {
+    if (!column) return;
+    var modifyColumn = mergeLeft(changes);
+    var modifyColumns = modifyBy({
+      key: column.key
+    }, modifyColumn);
+    onColumnUpdate(modifyColumns);
+  };
+  var onClose = function onClose() {
+    setInfoPaneState({
+      isOpen: false,
+      column: null
+    });
+  };
+  var onSubmit = function onSubmit() {
+    onUpdateColumn({
+      description: description
+    });
+    onClose();
+  };
+  useEffect(function () {
+    if (!isOpen) return undefined;
+    setDescription((column === null || column === void 0 ? void 0 : column.description) || "");
+    return function () {
+      setDescription("");
+    };
+  }, [isOpen]);
+  return /*#__PURE__*/jsxs(Pane, {
+    onClose: onClose,
+    isOpen: infoPaneState.isOpen,
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h3",
+        children: column === null || column === void 0 ? void 0 : column.title
+      })
+    }), /*#__PURE__*/jsx(Pane.Body, {
+      children: /*#__PURE__*/jsx(Textarea, {
+        className: "neeto-ui-w-full",
+        label: getLocale(i18n, t, "neetoui.common.description"),
+        value: description,
+        onChange: function onChange(e) {
+          return setDescription(e.target.value);
+        }
+      })
+    }), /*#__PURE__*/jsxs(Pane.Footer, {
+      className: "neeto-ui-flex neeto-ui-justify-between",
+      children: [/*#__PURE__*/jsx(Button, {
+        style: "secondary",
+        onClick: onClose,
+        children: getLocale(i18n, t, "neetoui.actionBlock.cancel")
+      }), /*#__PURE__*/jsx(Button, {
+        onClick: onSubmit,
+        children: getLocale(i18n, t, "neetoui.actionBlock.saveChanges")
+      })]
+    })]
+  });
+};
+
 var RangePicker = _DatePicker.RangePicker;
 var TIME_PICKER_TYPES = {
   range: RangePicker,
@@ -603,5 +963,5 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 TimePicker.displayName = "TimePicker";
 
-export { DatePicker as D, TimePicker as T };
-//# sourceMappingURL=index-CAbfRu1o.js.map
+export { COLUMN_FIXED_VALUES as C, DatePicker as D, HeaderCellMenu$1 as H, SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT as S, TimePicker as T, URL_SORT_ORDERS as U, TABLE_SORT_ORDERS as a, TABLE_PAGINATION_HEIGHT as b, TABLE_ROW_HEIGHT as c, SELECT_ALL_ROWS_CALLOUT_DESKTOP_HEIGHT as d, TABLE_DEFAULT_HEADER_HEIGHT as e, TableInfoPane as f, useRestoreScrollPosition as u };
+//# sourceMappingURL=index-cQSKx75O.js.map