@rio-cloud/rio-uikit 0.16.3 → 0.16.4-beta.10

package/lib/es/components/table/TableSettingsDialogFooter.d.ts

@@ -0,0 +1,43 @@
+export function TableSettingsDialogFooter(props: any): import("react/jsx-runtime").JSX.Element;
+export namespace TableSettingsDialogFooter {
+    namespace defaultProps {
+        const hasChanged: boolean;
+        const isResetAll: boolean;
+        const immediateChange: boolean;
+        const resetButtonText: string;
+        const closeButtonText: string;
+        const cancelButtonText: string;
+        const applyButtonText: string;
+        function onHide(): undefined;
+        function onResetColumnChanges(): undefined;
+        function onDiscardChanges(): undefined;
+        function onApplyChanges(): undefined;
+    }
+    namespace propTypes {
+        const hasChanged_1: PropTypes.Requireable<boolean>;
+        export { hasChanged_1 as hasChanged };
+        const isResetAll_1: PropTypes.Requireable<boolean>;
+        export { isResetAll_1 as isResetAll };
+        const immediateChange_1: PropTypes.Requireable<boolean>;
+        export { immediateChange_1 as immediateChange };
+        const resetButtonText_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export { resetButtonText_1 as resetButtonText };
+        const closeButtonText_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export { closeButtonText_1 as closeButtonText };
+        const cancelButtonText_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export { cancelButtonText_1 as cancelButtonText };
+        const applyButtonText_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        export { applyButtonText_1 as applyButtonText };
+        const onHide_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onHide_1 as onHide };
+        const onResetColumnChanges_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onResetColumnChanges_1 as onResetColumnChanges };
+        const onDiscardChanges_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onDiscardChanges_1 as onDiscardChanges };
+        const onApplyChanges_1: PropTypes.Requireable<(...args: any[]) => any>;
+        export { onApplyChanges_1 as onApplyChanges };
+        export const onConfirmResetColumnChanges: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onCancelResetColumnChanges: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from "prop-types";

package/lib/es/components/table/TableSettingsDialogFooter.js

@@ -1,96 +1,42 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TableSettingsDialogFooter = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var TableSettingsDialogFooter = function TableSettingsDialogFooter(props) {
-  var hasChanged = props.hasChanged,
-    isResetAll = props.isResetAll,
-    immediateChange = props.immediateChange,
-    resetButtonText = props.resetButtonText,
-    onHide = props.onHide,
-    closeButtonText = props.closeButtonText,
-    cancelButtonText = props.cancelButtonText,
-    applyButtonText = props.applyButtonText,
-    onResetColumnChanges = props.onResetColumnChanges,
-    onConfirmResetColumnChanges = props.onConfirmResetColumnChanges,
-    onCancelResetColumnChanges = props.onCancelResetColumnChanges,
-    onDiscardChanges = props.onDiscardChanges,
-    onApplyChanges = props.onApplyChanges;
-  var restButtonClassNames = (0, _classnames["default"])('btn', 'btn-link', !hasChanged && 'disabled');
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "pull-left"
-  }, !isResetAll && /*#__PURE__*/_react["default"].createElement("div", {
-    className: restButtonClassNames,
-    onClick: onResetColumnChanges
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "rioglyph rioglyph-revert text-size-xs margin-right-10"
-  }), resetButtonText), isResetAll && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "btn-group"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "btn btn-icon-only btn-default margin-right-5 btn-outline",
-    onClick: onCancelResetColumnChanges
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "rioglyph rioglyph-remove"
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "btn btn-primary btn-icon-only",
-    onClick: onConfirmResetColumnChanges
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "rioglyph rioglyph-ok"
-  })))), immediateChange ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "pull-right"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "btn btn-default",
-    onClick: onHide
-  }, closeButtonText)) : /*#__PURE__*/_react["default"].createElement("div", {
-    className: "pull-right"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "btn btn-default",
-    onClick: onDiscardChanges
-  }, cancelButtonText), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "btn btn-primary",
-    onClick: onApplyChanges
-  }, applyButtonText)));
-};
-exports.TableSettingsDialogFooter = TableSettingsDialogFooter;
-TableSettingsDialogFooter.defaultProps = {
-  hasChanged: false,
-  isResetAll: false,
-  immediateChange: false,
-  resetButtonText: '',
-  closeButtonText: '',
-  cancelButtonText: '',
-  applyButtonText: '',
-  onHide: function onHide() {
-    return undefined;
-  },
-  onResetColumnChanges: function onResetColumnChanges() {
-    return undefined;
-  },
-  onDiscardChanges: function onDiscardChanges() {
-    return undefined;
-  },
-  onApplyChanges: function onApplyChanges() {
-    return undefined;
-  }
-};
-TableSettingsDialogFooter.propTypes = {
-  hasChanged: _propTypes["default"].bool,
-  isResetAll: _propTypes["default"].bool,
-  immediateChange: _propTypes["default"].bool,
-  resetButtonText: _propTypes["default"].node,
-  closeButtonText: _propTypes["default"].node,
-  cancelButtonText: _propTypes["default"].node,
-  applyButtonText: _propTypes["default"].node,
-  onHide: _propTypes["default"].func,
-  onResetColumnChanges: _propTypes["default"].func,
-  onDiscardChanges: _propTypes["default"].func,
-  onApplyChanges: _propTypes["default"].func,
-  onConfirmResetColumnChanges: _propTypes["default"].func,
-  onCancelResetColumnChanges: _propTypes["default"].func
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableSettingsDialogFooter = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const TableSettingsDialogFooter = props => {
+    const { hasChanged, isResetAll, immediateChange, resetButtonText, onHide, closeButtonText, cancelButtonText, applyButtonText, onResetColumnChanges, onConfirmResetColumnChanges, onCancelResetColumnChanges, onDiscardChanges, onApplyChanges, } = props;
+    const restButtonClassNames = (0, classnames_1.default)('btn', 'btn-link', !hasChanged && 'disabled');
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'pull-left' }, { children: [!isResetAll && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: restButtonClassNames, onClick: onResetColumnChanges }, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-revert text-size-xs margin-right-10' }), resetButtonText] }))), isResetAll && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'btn-group' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn btn-icon-only btn-default margin-right-5 btn-outline', onClick: onCancelResetColumnChanges }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn btn-primary btn-icon-only', onClick: onConfirmResetColumnChanges }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-ok' }) }))] })))] })), immediateChange ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'pull-right' }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn btn-default', onClick: onHide }, { children: closeButtonText })) }))) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'btn-toolbar pull-right' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn btn-default', onClick: onDiscardChanges }, { children: cancelButtonText })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'btn btn-primary', onClick: onApplyChanges }, { children: applyButtonText }))] })))] }));
+};
+exports.TableSettingsDialogFooter = TableSettingsDialogFooter;
+exports.TableSettingsDialogFooter.defaultProps = {
+    hasChanged: false,
+    isResetAll: false,
+    immediateChange: false,
+    resetButtonText: '',
+    closeButtonText: '',
+    cancelButtonText: '',
+    applyButtonText: '',
+    onHide: () => undefined,
+    onResetColumnChanges: () => undefined,
+    onDiscardChanges: () => undefined,
+    onApplyChanges: () => undefined,
+};
+exports.TableSettingsDialogFooter.propTypes = {
+    hasChanged: prop_types_1.default.bool,
+    isResetAll: prop_types_1.default.bool,
+    immediateChange: prop_types_1.default.bool,
+    resetButtonText: prop_types_1.default.node,
+    closeButtonText: prop_types_1.default.node,
+    cancelButtonText: prop_types_1.default.node,
+    applyButtonText: prop_types_1.default.node,
+    onHide: prop_types_1.default.func,
+    onResetColumnChanges: prop_types_1.default.func,
+    onDiscardChanges: prop_types_1.default.func,
+    onApplyChanges: prop_types_1.default.func,
+    onConfirmResetColumnChanges: prop_types_1.default.func,
+    onCancelResetColumnChanges: prop_types_1.default.func,
+};

package/lib/es/components/table/TableSettingsListContainer.d.ts

@@ -0,0 +1,9 @@
+export function TableSettingsListContainer(props: any): import("react/jsx-runtime").JSX.Element;
+export namespace TableSettingsListContainer {
+    namespace propTypes {
+        const items: PropTypes.Requireable<(string | null | undefined)[]>;
+        const onSortEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        const itemProps: PropTypes.Requireable<object>;
+    }
+}
+import PropTypes from "prop-types";

package/lib/es/components/table/TableSettingsListContainer.js

@@ -1,67 +1,35 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TableSettingsListContainer = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _core = require("@dnd-kit/core");
-var _sortable = require("@dnd-kit/sortable");
-var _modifiers = require("@dnd-kit/modifiers");
-var _TableSettingsListItem = _interopRequireDefault(require("./TableSettingsListItem"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/* eslint-disable new-cap */
-/* eslint-disable no-unused-vars */
-
-var TableSettingsListContainer = function TableSettingsListContainer(props) {
-  var items = props.items,
-    onSortEnd = props.onSortEnd,
-    itemProps = props.itemProps;
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    activeDraggedColumn = _useState2[0],
-    setActiveDraggedColumn = _useState2[1];
-  var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
-    coordinateGetter: _sortable.sortableKeyboardCoordinates
-  }));
-  var handleDragStart = (0, _react.useCallback)(function (event) {
-    setActiveDraggedColumn(event.active.id);
-  }, []);
-  var handleDragEnd = (0, _react.useCallback)(function (event) {
-    setActiveDraggedColumn(null);
-    onSortEnd(event);
-  }, []);
-  var activeClass = 'table-settings-item shadow-smooth-to-bottom z-index-max';
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "table-settings-items-container"
-  }, /*#__PURE__*/_react["default"].createElement(_core.DndContext, {
-    modifiers: [_modifiers.restrictToVerticalAxis],
-    onDragStart: handleDragStart,
-    onDragEnd: handleDragEnd
-  }, /*#__PURE__*/_react["default"].createElement(_sortable.SortableContext, {
-    items: items,
-    sensors: sensors,
-    collisionDetection: _core.closestCenter,
-    strategy: _sortable.rectSortingStrategy
-  }, items.map(function (column, index) {
-    return /*#__PURE__*/_react["default"].createElement(_TableSettingsListItem["default"], (0, _extends2["default"])({
-      key: column,
-      index: index,
-      column: column,
-      orderIndex: index,
-      className: activeDraggedColumn === column ? activeClass : ''
-    }, itemProps));
-  }))));
-};
-exports.TableSettingsListContainer = TableSettingsListContainer;
-TableSettingsListContainer.propTypes = {
-  items: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  onSortEnd: _propTypes["default"].func,
-  itemProps: _propTypes["default"].object
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableSettingsListContainer = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable new-cap */
+/* eslint-disable no-unused-vars */
+const react_1 = tslib_1.__importStar(require("react"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const modifiers_1 = require("@dnd-kit/modifiers");
+const TableSettingsListItem_1 = tslib_1.__importDefault(require("./TableSettingsListItem"));
+const TableSettingsListContainer = props => {
+    const { items, onSortEnd, itemProps } = props;
+    const [activeDraggedColumn, setActiveDraggedColumn] = (0, react_1.useState)(null);
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor), (0, core_1.useSensor)(core_1.KeyboardSensor, {
+        coordinateGetter: sortable_1.sortableKeyboardCoordinates,
+    }));
+    const handleDragStart = (0, react_1.useCallback)(event => {
+        setActiveDraggedColumn(event.active.id);
+    }, []);
+    const handleDragEnd = (0, react_1.useCallback)(event => {
+        setActiveDraggedColumn(null);
+        onSortEnd(event);
+    }, []);
+    const activeClass = 'table-settings-item shadow-smooth-to-bottom z-index-max';
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'table-settings-items-container' }, { children: (0, jsx_runtime_1.jsx)(core_1.DndContext, Object.assign({ modifiers: [modifiers_1.restrictToVerticalAxis], onDragStart: handleDragStart, onDragEnd: handleDragEnd }, { children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, Object.assign({ items: items, sensors: sensors, collisionDetection: core_1.closestCenter, strategy: sortable_1.rectSortingStrategy }, { children: items.map((column, index) => ((0, jsx_runtime_1.jsx)(TableSettingsListItem_1.default, Object.assign({ index: index, column: column, orderIndex: index, className: activeDraggedColumn === column ? activeClass : '' }, itemProps), column))) })) })) })));
+};
+exports.TableSettingsListContainer = TableSettingsListContainer;
+exports.TableSettingsListContainer.propTypes = {
+    items: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    onSortEnd: prop_types_1.default.func,
+    itemProps: prop_types_1.default.object,
+};

package/lib/es/components/table/TableSettingsListItem.d.ts

@@ -0,0 +1,27 @@
+export function filterColumns(searchValue: any, column: string | undefined, columnLabelStrings: any): boolean;
+export default TableSettingsListItem;
+declare function TableSettingsListItem(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace TableSettingsListItem {
+    namespace propTypes {
+        export const column: PropTypes.Requireable<string>;
+        export const orderIndex: PropTypes.Requireable<number>;
+        export const columnLabels: PropTypes.Requireable<object>;
+        export const autoLabel: PropTypes.Requireable<string>;
+        export const disabledColumns: PropTypes.Requireable<(string | null | undefined)[]>;
+        export const columnOrder: PropTypes.Requireable<(string | null | undefined)[]>;
+        export const hiddenColumns: PropTypes.Requireable<(string | null | undefined)[]>;
+        export const columnSearchValue: PropTypes.Requireable<string>;
+        export { columnsDetailsPropTypes as columnsDetails };
+        export const columnLabelStrings: PropTypes.Requireable<object>;
+        export const openColumnsDetails: PropTypes.Requireable<object>;
+        export const updateColumnLabelStrings: PropTypes.Requireable<boolean>;
+        export const onColumnWidthChange: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onResetColumnWidth: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onMoveColumn: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onOpenDetails: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onToggleHideColumn: PropTypes.Requireable<(...args: any[]) => any>;
+        export const className: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";
+import { columnsDetailsPropTypes } from "./tableSettingsPropTypes";

package/lib/es/components/table/TableSettingsListItem.js

@@ -1,135 +1,69 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.filterColumns = exports["default"] = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _sortable = require("@dnd-kit/sortable");
-var _utilities = require("@dnd-kit/utilities");
-var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
-var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox"));
-var _Collapse = _interopRequireDefault(require("../collapse/Collapse"));
-var _TableSettingsColumnDetails = require("./TableSettingsColumnDetails");
-var _TableSettingsColumnButtons = require("./TableSettingsColumnButtons");
-var _tableSettingsPropTypes = require("./tableSettingsPropTypes");
-/* eslint-disable new-cap */
-
-var MAX_COLUMN_WIDTH = 1000;
-var filterColumns = function filterColumns(searchValue) {
-  var column = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var columnLabelStrings = arguments.length > 2 ? arguments[2] : undefined;
-  if (!searchValue) {
-    return false;
-  }
-  var label = columnLabelStrings[column] || '';
-  return !label.toLowerCase().includes(searchValue.toLowerCase());
-};
-exports.filterColumns = filterColumns;
-var TableSettingsListItem = function TableSettingsListItem(props) {
-  var column = props.column,
-    orderIndex = props.orderIndex,
-    columnLabels = props.columnLabels,
-    autoLabel = props.autoLabel,
-    _props$disabledColumn = props.disabledColumns,
-    disabledColumns = _props$disabledColumn === void 0 ? [] : _props$disabledColumn,
-    columnOrder = props.columnOrder,
-    _props$hiddenColumns = props.hiddenColumns,
-    hiddenColumns = _props$hiddenColumns === void 0 ? [] : _props$hiddenColumns,
-    columnSearchValue = props.columnSearchValue,
-    columnsDetails = props.columnsDetails,
-    columnLabelStrings = props.columnLabelStrings,
-    openColumnsDetails = props.openColumnsDetails,
-    updateColumnLabelStrings = props.updateColumnLabelStrings,
-    onColumnWidthChange = props.onColumnWidthChange,
-    onResetColumnWidth = props.onResetColumnWidth,
-    onMoveColumn = props.onMoveColumn,
-    onOpenDetails = props.onOpenDetails,
-    onToggleHideColumn = props.onToggleHideColumn,
-    className = props.className;
-  var isSortingDisabled = !(0, _isEmpty["default"])(columnSearchValue);
-  var _useSortable = (0, _sortable.useSortable)({
-      id: column,
-      disabled: isSortingDisabled
-    }),
-    attributes = _useSortable.attributes,
-    listeners = _useSortable.listeners,
-    setNodeRef = _useSortable.setNodeRef,
-    transform = _useSortable.transform,
-    transition = _useSortable.transition;
-  var style = {
-    transform: _utilities.CSS.Transform.toString(transform),
-    transition: transition
-  };
-
-  // Filter out items which don't match the search value.
-  // Note that we need to render all items at least once at the beginning in order to get their DOM lables
-  // otherwise the search won't work when initial search value is provided via props.
-  var isFiltered = filterColumns(columnSearchValue, column, columnLabelStrings) && !updateColumnLabelStrings;
-  var itemClassNames = (0, _classnames["default"])('table-settings-item', updateColumnLabelStrings && 'opacity-0', isFiltered && 'position-offscreen', className);
-  var columnDetails = columnsDetails[column];
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: itemClassNames,
-    key: "table-settings-item-".concat(column),
-    ref: setNodeRef,
-    style: style
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "table-settings-item-header user-select-none"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "CheckboxWrapper display-flex align-items-center padding-left-2"
-  }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
-    checked: !hiddenColumns.includes(column),
-    onClick: function onClick(event) {
-      onToggleHideColumn(column);
-      event.stopPropagation();
-    },
-    disabled: disabledColumns.includes(column)
-  })), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-    className: "table-settings-item-label ".concat(isSortingDisabled ? 'no-drag' : ''),
-    "data-key": column
-  }, attributes, listeners), columnLabels[column]), columnDetails && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "column-width-label"
-  }, columnDetails.width ? "".concat(columnDetails.width, "px") : autoLabel), /*#__PURE__*/_react["default"].createElement(_TableSettingsColumnButtons.TableSettingsColumnButtons, {
-    column: column,
-    index: orderIndex,
-    columnDetails: columnDetails,
-    columnOrder: columnOrder,
-    openColumnsDetails: openColumnsDetails,
-    disabled: isSortingDisabled,
-    onMoveColumn: onMoveColumn,
-    onOpenDetails: onOpenDetails
-  })), columnDetails && /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
-    "in": !!openColumnsDetails[column]
-  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_TableSettingsColumnDetails.TableSettingsColumnDetails, (0, _extends2["default"])({}, columnDetails, {
-    column: column,
-    maxColumnWidth: MAX_COLUMN_WIDTH,
-    onColumnWidthChange: onColumnWidthChange,
-    onResetColumnWidth: onResetColumnWidth
-  })))));
-};
-TableSettingsListItem.propTypes = {
-  column: _propTypes["default"].string,
-  orderIndex: _propTypes["default"].number,
-  columnLabels: _propTypes["default"].object,
-  autoLabel: _propTypes["default"].string,
-  disabledColumns: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  columnOrder: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  hiddenColumns: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  columnSearchValue: _propTypes["default"].string,
-  columnsDetails: _tableSettingsPropTypes.columnsDetailsPropTypes,
-  columnLabelStrings: _propTypes["default"].object,
-  openColumnsDetails: _propTypes["default"].object,
-  updateColumnLabelStrings: _propTypes["default"].bool,
-  onColumnWidthChange: _propTypes["default"].func,
-  onResetColumnWidth: _propTypes["default"].func,
-  onMoveColumn: _propTypes["default"].func,
-  onOpenDetails: _propTypes["default"].func,
-  onToggleHideColumn: _propTypes["default"].func,
-  className: _propTypes["default"].string
-};
-var _default = TableSettingsListItem;
-exports["default"] = _default;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterColumns = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable new-cap */
+const react_1 = tslib_1.__importDefault(require("react"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const sortable_1 = require("@dnd-kit/sortable");
+const utilities_1 = require("@dnd-kit/utilities");
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const Checkbox_1 = tslib_1.__importDefault(require("../checkbox/Checkbox"));
+const Collapse_1 = tslib_1.__importDefault(require("../collapse/Collapse"));
+const TableSettingsColumnDetails_1 = require("./TableSettingsColumnDetails");
+const TableSettingsColumnButtons_1 = require("./TableSettingsColumnButtons");
+const tableSettingsPropTypes_1 = require("./tableSettingsPropTypes");
+const MAX_COLUMN_WIDTH = 1000;
+const filterColumns = (searchValue, column = '', columnLabelStrings) => {
+    if (!searchValue) {
+        return false;
+    }
+    const label = columnLabelStrings[column] || '';
+    return !label.toLowerCase().includes(searchValue.toLowerCase());
+};
+exports.filterColumns = filterColumns;
+const TableSettingsListItem = props => {
+    const { column, orderIndex, columnLabels, autoLabel, disabledColumns = [], columnOrder, hiddenColumns = [], columnSearchValue, columnsDetails, columnLabelStrings, openColumnsDetails, updateColumnLabelStrings, onColumnWidthChange, onResetColumnWidth, onMoveColumn, onOpenDetails, onToggleHideColumn, className, } = props;
+    const isSortingDisabled = !(0, isEmpty_1.default)(columnSearchValue);
+    const { attributes, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({
+        id: column,
+        disabled: isSortingDisabled,
+    });
+    const style = {
+        transform: utilities_1.CSS.Transform.toString(transform),
+        transition,
+    };
+    // Filter out items which don't match the search value.
+    // Note that we need to render all items at least once at the beginning in order to get their DOM lables
+    // otherwise the search won't work when initial search value is provided via props.
+    const isFiltered = (0, exports.filterColumns)(columnSearchValue, column, columnLabelStrings) && !updateColumnLabelStrings;
+    const itemClassNames = (0, classnames_1.default)('table-settings-item', updateColumnLabelStrings && 'opacity-0', isFiltered && 'position-offscreen', className);
+    const columnDetails = columnsDetails[column];
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: itemClassNames, ref: setNodeRef, style: style }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'table-settings-item-header user-select-none' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'CheckboxWrapper display-flex align-items-center padding-left-2' }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { checked: !hiddenColumns.includes(column), onClick: event => {
+                                onToggleHideColumn(column);
+                                event.stopPropagation();
+                            }, disabled: disabledColumns.includes(column) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `table-settings-item-label ${isSortingDisabled ? 'no-drag' : ''}`, "data-key": column }, attributes, listeners, { children: columnLabels[column] })), columnDetails && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'column-width-label' }, { children: columnDetails.width ? `${columnDetails.width}px` : autoLabel }))), (0, jsx_runtime_1.jsx)(TableSettingsColumnButtons_1.TableSettingsColumnButtons, { column: column, index: orderIndex, columnDetails: columnDetails, columnOrder: columnOrder, openColumnsDetails: openColumnsDetails, disabled: isSortingDisabled, onMoveColumn: onMoveColumn, onOpenDetails: onOpenDetails })] })), columnDetails && ((0, jsx_runtime_1.jsx)(Collapse_1.default, Object.assign({ in: !!openColumnsDetails[column] }, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TableSettingsColumnDetails_1.TableSettingsColumnDetails, Object.assign({}, columnDetails, { column: column, maxColumnWidth: MAX_COLUMN_WIDTH, onColumnWidthChange: onColumnWidthChange, onResetColumnWidth: onResetColumnWidth })) }) })))] }), `table-settings-item-${column}`));
+};
+TableSettingsListItem.propTypes = {
+    column: prop_types_1.default.string,
+    orderIndex: prop_types_1.default.number,
+    columnLabels: prop_types_1.default.object,
+    autoLabel: prop_types_1.default.string,
+    disabledColumns: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    columnOrder: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    hiddenColumns: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    columnSearchValue: prop_types_1.default.string,
+    columnsDetails: tableSettingsPropTypes_1.columnsDetailsPropTypes,
+    columnLabelStrings: prop_types_1.default.object,
+    openColumnsDetails: prop_types_1.default.object,
+    updateColumnLabelStrings: prop_types_1.default.bool,
+    onColumnWidthChange: prop_types_1.default.func,
+    onResetColumnWidth: prop_types_1.default.func,
+    onMoveColumn: prop_types_1.default.func,
+    onOpenDetails: prop_types_1.default.func,
+    onToggleHideColumn: prop_types_1.default.func,
+    className: prop_types_1.default.string,
+};
+exports.default = TableSettingsListItem;

package/lib/es/components/table/TableToolbar.d.ts

@@ -0,0 +1,12 @@
+export default TableToolbar;
+declare function TableToolbar({ className, children }: {
+    className: any;
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace TableToolbar {
+    const defaultProps: {};
+    namespace propTypes {
+        const className: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

package/lib/es/components/table/TableToolbar.js

@@ -1,24 +1,16 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var TableToolbar = function TableToolbar(_ref) {
-  var className = _ref.className,
-    children = _ref.children;
-  var wrapperClassNames = (0, _classnames["default"])('table-toolbar', className && className);
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: wrapperClassNames
-  }, children);
-};
-TableToolbar.defaultProps = {};
-TableToolbar.propTypes = {
-  className: _propTypes["default"].string
-};
-var _default = TableToolbar;
-exports["default"] = _default;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const TableToolbar = ({ className, children }) => {
+    const wrapperClassNames = (0, classnames_1.default)('table-toolbar', className && className);
+    return (0, jsx_runtime_1.jsx)("div", Object.assign({ className: wrapperClassNames }, { children: children }));
+};
+TableToolbar.defaultProps = {};
+TableToolbar.propTypes = {
+    className: prop_types_1.default.string,
+};
+exports.default = TableToolbar;