import _extends from '@babel/runtime/helpers/extends';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _merge from '../../../node_modules/lodash-es/merge.js';
import cloneDeep from '../../../node_modules/lodash-es/cloneDeep.js';
import uniqBy from '../../../node_modules/lodash-es/uniqBy.js';
import isNil from '../../../node_modules/lodash-es/isNil.js';
import 'core-js/modules/es.symbol.js';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.filter.js';
import 'core-js/modules/es.array.find.js';
import 'core-js/modules/es.array.find-index.js';
import 'core-js/modules/es.array.flat-map.js';
import 'core-js/modules/es.array.includes.js';
import 'core-js/modules/es.array.map.js';
import 'core-js/modules/es.array.sort.js';
import 'core-js/modules/es.array.splice.js';
import 'core-js/modules/es.array.unscopables.flat-map.js';
import 'core-js/modules/es.function.name.js';
import 'core-js/modules/es.object.get-own-property-descriptor.js';
import 'core-js/modules/es.object.get-own-property-descriptors.js';
import 'core-js/modules/es.object.to-string.js';
import 'core-js/modules/es.object.keys.js';
import 'core-js/modules/es.object.values.js';
import 'core-js/modules/es.string.includes.js';
import 'core-js/modules/web.dom-collections.for-each.js';
import React__default, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import warning from 'warning';
import classnames from 'classnames';
import ComposedModal from '../../ComposedModal/ComposedModal.js';
import { settings } from '../../../constants/Settings.js';
import { OverridePropTypes } from '../../../constants/SharedPropTypes.js';
import ListBuilder from '../../ListBuilder/ListBuilder.js';
import { EditingStyle } from '../../../utils/DragAndDropUtils.js';
import { useVisibilityToggle } from './visibilityToggleHook.js';
import { CloseOutline } from '@carbon/icons-react';

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; }
var iotPrefix = settings.iotPrefix;
var ITEM_VALUE_KEYS = {
  ID: 'id',
  NAME: 'name'
};
var propTypes = {
  /** The list of all the selectable columns  */
  availableColumns: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired
  })).isRequired,
  /** Will show a modal error notification with the supplied string if present */
  error: PropTypes.string,
  /** Defines the groups and which columns they contain. The order of the groups is relevant. */
  groupMapping: PropTypes.arrayOf(PropTypes.shape({
    /** The id of the column group */
    id: PropTypes.string.isRequired,
    /** The name of the column group */
    name: PropTypes.string.isRequired,
    /** The ids of the columns belonging to the group. The order is irrelevant. */
    columnIds: PropTypes.arrayOf(PropTypes.string)
  })),
  /** If true selected columns can be hidden/shown  */
  hasVisibilityToggle: PropTypes.bool,
  /** If true shows a "Load more" button at the end of the list of available columns */
  hasLoadMore: PropTypes.bool,
  i18n: PropTypes.shape({
    availableColumnsEmptyText: PropTypes.string,
    availableColumnsLabel: PropTypes.string,
    cancelButtonLabel: PropTypes.string,
    clearSearchIconDescription: PropTypes.string,
    closeIconDescription: PropTypes.string,
    collapseIconDescription: PropTypes.string,
    expandIconDescription: PropTypes.string,
    hideIconDescription: PropTypes.string,
    loadMoreButtonLabel: PropTypes.string,
    modalTitle: PropTypes.string,
    modalBody: PropTypes.string,
    removeIconDescription: PropTypes.string,
    resetButtonLabel: PropTypes.string,
    saveButtonLabel: PropTypes.string,
    searchPlaceholder: PropTypes.string,
    selectedColumnsEmptyText: PropTypes.string,
    selectedColumnsLabel: PropTypes.string,
    showIconDescription: PropTypes.string
  }),
  /** Array of objects representing the order and visibility of the columns */
  initialOrdering: PropTypes.arrayOf(PropTypes.shape({
    /** The id of the column */
    columnId: PropTypes.string.isRequired,
    /* Visibility of column in table, defaults to false */
    isHidden: PropTypes.bool
  })).isRequired,
  /** Disables the primary (save) button when true */
  isPrimaryButtonDisabled: PropTypes.bool,
  /** RowIds for rows currently loading more available columns */
  loadingMoreIds: PropTypes.arrayOf(PropTypes.string),
  /** Called when columns are selected, deselected, hidden, shown and reordered */
  onChange: PropTypes.func,
  /**  Clear the currently shown error, triggered if the user closes the ErrorNotification */
  onClearError: PropTypes.func,
  /** Called with the id of the last item when the load more button is clicked */
  onLoadMore: PropTypes.func,
  /** Called on cancel button click and on the top right close icon click */
  onClose: PropTypes.func.isRequired,
  /** Called with the updated ordering and columns array when save button is clicked */
  onSave: PropTypes.func.isRequired,
  /** Called when the reset button is clicked */
  onReset: PropTypes.func,
  /** Determines if the modal is open or closed (i.e. visible or not to the user) */
  open: PropTypes.bool.isRequired,
  /** Allows overriding the two main components using the attributes 'composedModal and 'listBuilder' */
  overrides: PropTypes.shape({
    composedModal: OverridePropTypes,
    listBuilder: OverridePropTypes
  }),
  /** The id of a column that is pinned as the first column and cannot be deselected */
  pinnedColumnId: PropTypes.string,
  /** The column key used as primary display value for the items in the lists */
  primaryValue: PropTypes.oneOf(Object.values(ITEM_VALUE_KEYS)),
  /** The column key used as secondary display value for the items in the lists.
   * Defaults to undefined but if present will appear below the default value
   * and make the list items taller.  */
  secondaryValue: PropTypes.oneOf([].concat(_toConsumableArray(Object.values(ITEM_VALUE_KEYS)), [undefined])),
  /** if true the list for available columns will show a loader only */
  showLoaderInAvailableList: PropTypes.bool,
  /** if true the list for selected columns will show a loader only */
  showLoaderInSelectedList: PropTypes.bool,
  /** Id that can be used for testing */
  testId: PropTypes.string
};
var defaultProps = {
  error: undefined,
  groupMapping: [],
  hasLoadMore: false,
  hasVisibilityToggle: false,
  i18n: {
    availableColumnsEmptyText: 'No available columns to show',
    availableColumnsLabel: 'Available columns',
    cancelButtonLabel: 'Cancel',
    clearSearchIconDescription: 'Clear search input',
    closeIconDescription: 'Close',
    collapseIconDescription: 'Collapse',
    expandIconDescription: 'Expand',
    hideIconDescription: 'Column is visible, click to hide.',
    loadMoreButtonLabel: 'Load more...',
    modalTitle: 'Customize columns',
    modalBody: 'Select the available columns to be displayed on the table. Drag the selected columns to reorder them.',
    removeIconDescription: 'Remove from list',
    resetButtonLabel: 'Reset',
    saveButtonLabel: 'Save',
    searchPlaceholder: 'Search',
    selectedColumnsEmptyText: 'No columns selected',
    selectedColumnsLabel: 'Selected columns',
    showIconDescription: 'Column is hidden, click to show.'
  },
  isPrimaryButtonDisabled: false,
  loadingMoreIds: [],
  onChange: function onChange() {},
  onClearError: function onClearError() {},
  onLoadMore: function onLoadMore() {},
  onReset: function onReset() {},
  overrides: undefined,
  pinnedColumnId: undefined,
  primaryValue: ITEM_VALUE_KEYS.NAME,
  secondaryValue: undefined,
  showLoaderInAvailableList: false,
  showLoaderInSelectedList: false,
  testId: 'table-column-customization-modal'
};
var removeItemFromGroup = function removeItemFromGroup(items, groupItem, id) {
  var modifiedGroupItem = _objectSpread(_objectSpread({}, groupItem), {}, {
    children: groupItem.children.filter(function (item) {
      return item.id !== id;
    })
  });
  return items.map(function (item) {
    return item.id === groupItem.id ? modifiedGroupItem : item;
  });
};
var handleRemoveWithinGroup = function handleRemoveWithinGroup(previous, groupId, id) {
  var groupItem = previous.find(function (item) {
    return item.id === groupId;
  });
  var removeGroup = (groupItem === null || groupItem === void 0 ? void 0 : groupItem.children.length) === 1;
  return removeGroup ? previous.filter(function (item) {
    return item.id !== groupId;
  }) : removeItemFromGroup(previous, groupItem, id);
};
var createGroupItem = function createGroupItem(id, name, children) {
  return {
    id: id,
    isCategory: true,
    content: {
      value: name
    },
    children: children
  };
};
var findAndCloneItem = function findAndCloneItem(id, availableColumnItems) {
  var matchingTopLevelItem = cloneDeep(availableColumnItems.find(function (topLevelItem) {
    var _topLevelItem$childre;
    return topLevelItem.id === id || ((_topLevelItem$childre = topLevelItem.children) === null || _topLevelItem$childre === void 0 ? void 0 : _topLevelItem$childre.length) && topLevelItem.children.find(function (child) {
      return child.id === id;
    });
  }));
  return matchingTopLevelItem.id === id ? matchingTopLevelItem : matchingTopLevelItem.children.find(function (child) {
    return child.id === id;
  });
};
var findAndCloneInitialTopLevelItem = function findAndCloneInitialTopLevelItem(id, availableColumnItems) {
  var column = availableColumnItems.find(function (item) {
    return item.id === id;
  });
  if (column === undefined && "development" !== "production") {
    warning(false, "Can't find column with id '".concat(id, "'. Make sure all columns referenced in prop 'initialOrdering' also exists in  prop 'availableColumns'.")) ;
  }
  return column ? cloneDeep(column) : undefined;
};
var createAvailableItem = function createAvailableItem(column) {
  return {
    id: column.id,
    content: {
      value: column.name
    },
    isSelectable: true
  };
};
var createPinnedItemArray = function createPinnedItemArray(pinnedColumnId, availableColumns) {
  var pinnedColumn = pinnedColumnId && availableColumns.find(function (_ref) {
    var id = _ref.id;
    return id === pinnedColumnId;
  });
  return pinnedColumn ? [_objectSpread(_objectSpread({}, createAvailableItem(pinnedColumn)), {}, {
    disabled: true
  })] : [];
};
var createGroupItems = function createGroupItems(availableColumns, groupMapping) {
  var groupItems = groupMapping.map(function (_ref2) {
    var groupId = _ref2.id,
      name = _ref2.name,
      columnIds = _ref2.columnIds;
    var childItems = columnIds.flatMap(function (childId) {
      var childColumn = availableColumns.find(function (column) {
        return column.id === childId;
      });
      return childColumn ? createAvailableItem(childColumn) : [];
    });
    return createGroupItem(groupId, name, childItems);
  });
  return groupItems;
};
var createNormalItems = function createNormalItems(availableColumns, groupMapping, pinnedColumnId) {
  return availableColumns.filter(function (item) {
    var belongsInGroup = groupMapping.some(function (groupDef) {
      return groupDef.columnIds.includes(item.id);
    });
    return !belongsInGroup && item.id !== pinnedColumnId;
  }).map(function (column) {
    return createAvailableItem(column);
  });
};
var setItemValues = function setItemValues(item, primaryKey, secondaryKey) {
  var columnName = item.content.value;
  var columnId = item.id;
  return _objectSpread(_objectSpread({}, item), {}, {
    content: {
      value: primaryKey === ITEM_VALUE_KEYS.ID ? columnId : columnName,
      secondaryValue: secondaryKey === ITEM_VALUE_KEYS.ID ? columnId : secondaryKey === ITEM_VALUE_KEYS.NAME ? columnName : undefined
    }
  });
};
var setItemsValues = function setItemsValues(items, primaryKey, secondaryKey) {
  return items.map(function (item) {
    return item.isCategory ? _objectSpread(_objectSpread({}, item), {}, {
      children: setItemsValues(item.children, primaryKey, secondaryKey)
    }) : setItemValues(item, primaryKey, secondaryKey);
  });
};
var transformToAvailableItems = function transformToAvailableItems(_ref3) {
  var availableColumns = _ref3.availableColumns,
    pinnedColumnId = _ref3.pinnedColumnId,
    hasLoadMore = _ref3.hasLoadMore,
    groupMapping = _ref3.groupMapping,
    primaryValueKey = _ref3.primaryValueKey,
    secondaryValueKey = _ref3.secondaryValueKey;
  if (availableColumns.length === 0) return [];
  var pinnedItems = createPinnedItemArray(pinnedColumnId, availableColumns);
  var groupItems = createGroupItems(availableColumns, groupMapping);
  var normalItems = createNormalItems(availableColumns, groupMapping, pinnedColumnId);
  var availableItems = setItemsValues([].concat(_toConsumableArray(pinnedItems), _toConsumableArray(groupItems), _toConsumableArray(normalItems)), primaryValueKey, secondaryValueKey);
  if (hasLoadMore && availableItems.length) {
    availableItems[availableItems.length - 1].hasLoadMore = true;
  }
  return availableItems;
};
var transformToSelectedGroupItem = function transformToSelectedGroupItem(initialOrdering, groupItem) {
  var selectedChildItems = groupItem.children
  // Only keep children that are in the initial ordering
  .filter(function (_ref4) {
    var id = _ref4.id;
    return initialOrdering.find(function (column) {
      return column.columnId === id;
    });
  })
  // Sort the children according to the initialOrdering
  .sort(function (a, b) {
    return initialOrdering.findIndex(function (ord) {
      return ord.columnId === a;
    }) - initialOrdering.findIndex(function (ord) {
      return ord.columnId === b;
    });
  });
  return _objectSpread(_objectSpread({}, groupItem), {}, {
    children: selectedChildItems
  });
};
var transformToSelectedItems = function transformToSelectedItems(initialOrdering, availableColumnItems, groupMapping) {
  var orderedSelectedColumnItems = initialOrdering.map(function (_ref5) {
    var columnId = _ref5.columnId;
    var groupDef = groupMapping.find(function (group) {
      return group.columnIds.includes(columnId);
    });
    var groupItem = groupDef ? availableColumnItems.find(function (_ref6) {
      var id = _ref6.id;
      return id === groupDef.id;
    }) : undefined;
    var selectedItem = groupDef ? transformToSelectedGroupItem(initialOrdering, groupItem) : findAndCloneInitialTopLevelItem(columnId, availableColumnItems);
    if (selectedItem !== null && selectedItem !== void 0 && selectedItem.hasLoadMore) delete selectedItem.hasLoadMore;
    return selectedItem;
  }).filter(function (column) {
    return column !== null && column !== void 0 && column.children ? column === null || column === void 0 ? void 0 : column.children.length : column;
  });
  return orderedSelectedColumnItems.length ? uniqBy(orderedSelectedColumnItems, function (item) {
    return item.id;
  }) : [];
};
var preventDropInOtherGroup = function preventDropInOtherGroup() {
  return (arguments.length <= 2 ? undefined : arguments[2]) !== 'nested';
};
var TableColumnCustomizationModal = function TableColumnCustomizationModal(_ref7) {
  var _overrides$composedMo, _overrides$listBuilde, _overrides$composedMo2, _overrides$listBuilde2;
  var error = _ref7.error,
    groupMapping = _ref7.groupMapping,
    hasLoadMore = _ref7.hasLoadMore,
    hasVisibilityToggle = _ref7.hasVisibilityToggle,
    i18n = _ref7.i18n,
    initialOrdering = _ref7.initialOrdering,
    isPrimaryButtonDisabled = _ref7.isPrimaryButtonDisabled,
    availableColumns = _ref7.availableColumns,
    loadingMoreIds = _ref7.loadingMoreIds,
    onChange = _ref7.onChange,
    onClearError = _ref7.onClearError,
    onClose = _ref7.onClose,
    onLoadMore = _ref7.onLoadMore,
    onReset = _ref7.onReset,
    onSaveCallback = _ref7.onSave,
    open = _ref7.open,
    overrides = _ref7.overrides,
    pinnedColumnId = _ref7.pinnedColumnId,
    primaryValue = _ref7.primaryValue,
    secondaryValue = _ref7.secondaryValue,
    showLoaderInAvailableList = _ref7.showLoaderInAvailableList,
    showLoaderInSelectedList = _ref7.showLoaderInSelectedList,
    testId = _ref7.testId;
  var _merge2 = _merge({}, defaultProps.i18n, i18n),
    availableColumnsEmptyText = _merge2.availableColumnsEmptyText,
    availableColumnsLabel = _merge2.availableColumnsLabel,
    cancelButtonLabel = _merge2.cancelButtonLabel,
    clearSearchIconDescription = _merge2.clearSearchIconDescription,
    closeIconDescription = _merge2.closeIconDescription,
    collapseIconDescription = _merge2.collapseIconDescription,
    expandIconDescription = _merge2.expandIconDescription,
    loadMoreButtonLabel = _merge2.loadMoreButtonLabel,
    modalTitle = _merge2.modalTitle,
    modalBody = _merge2.modalBody,
    removeIconDescription = _merge2.removeIconDescription,
    resetButtonLabel = _merge2.resetButtonLabel,
    saveButtonLabel = _merge2.saveButtonLabel,
    searchPlaceholder = _merge2.searchPlaceholder,
    selectedColumnsEmptyText = _merge2.selectedColumnsEmptyText,
    selectedColumnsLabel = _merge2.selectedColumnsLabel,
    hideIconDescription = _merge2.hideIconDescription,
    showIconDescription = _merge2.showIconDescription;
  var nrOfItemsNotNeedingSearch = 12;
  var availableColumnItems = useMemo(function () {
    return availableColumns.length ? transformToAvailableItems({
      availableColumns: availableColumns,
      pinnedColumnId: pinnedColumnId,
      hasLoadMore: hasLoadMore,
      groupMapping: groupMapping,
      primaryValueKey: primaryValue,
      secondaryValueKey: secondaryValue
    }) : [];
  }, [availableColumns, pinnedColumnId, hasLoadMore, primaryValue, secondaryValue, groupMapping]);
  var _useState = useState(null),
    _useState2 = _slicedToArray(_useState, 2),
    searchValue = _useState2[0],
    setSearchValue = _useState2[1];
  var _useState3 = useState(initialOrdering.filter(function (col) {
      return col.isHidden;
    }).map(function (col) {
      return col.columnId;
    })),
    _useState4 = _slicedToArray(_useState3, 2),
    hiddenIds = _useState4[0],
    setHiddenIds = _useState4[1];
  var _useState5 = useState(function () {
      return !availableColumnItems.length ? [] : transformToSelectedItems(initialOrdering, availableColumnItems, groupMapping);
    }),
    _useState6 = _slicedToArray(_useState5, 2),
    selectedColumnItems = _useState6[0],
    setSelectedColumnItems = _useState6[1];
  var initialSelectionForAsyncLoadedColumnsRequired = useRef(initialOrdering.length && !availableColumnItems.length);
  useEffect(function () {
    if (initialSelectionForAsyncLoadedColumnsRequired.current && availableColumnItems.length) {
      initialSelectionForAsyncLoadedColumnsRequired.current = false;
      setSelectedColumnItems(transformToSelectedItems(initialOrdering, availableColumnItems, groupMapping));
    }
  }, [initialOrdering, availableColumnItems, groupMapping, selectedColumnItems]);
  var onSave = function onSave() {
    // Column group mapping is not exported as part of save
    // since static group structures are supported but the modifications of
    // groups is currently not.
    var updatedOrdering = selectedColumnItems.flatMap(function (item) {
      return item.isCategory ? item.children.map(function (_ref8) {
        var id = _ref8.id;
        return id;
      }) : item.id;
    }).map(function (id) {
      return {
        columnId: id,
        isHidden: hiddenIds.includes(id)
      };
    });
    var updatedColumns = updatedOrdering.map(function (_ref9) {
      var columnId = _ref9.columnId;
      return availableColumns.find(function (_ref10) {
        var id = _ref10.id;
        return id === columnId;
      });
    });
    onSaveCallback(updatedOrdering, updatedColumns);
  };
  var handleRemove = useCallback(function (event, id) {
    setSelectedColumnItems(function (previous) {
      var group = groupMapping.find(function (selectionGroup) {
        return selectionGroup.columnIds.includes(id);
      });
      return group ? handleRemoveWithinGroup(previous, group.id, id) : previous.filter(function (item) {
        return item.id !== id;
      });
    });
    onChange('deselect', id);
  }, [groupMapping, onChange]);
  var handleLoadMore = function handleLoadMore(id) {
    onLoadMore(id);
  };
  var selectedItems = useVisibilityToggle({
    handleRemove: handleRemove,
    hasVisibilityToggle: hasVisibilityToggle,
    hiddenIds: hiddenIds,
    hideIconDescription: hideIconDescription,
    onChange: onChange,
    removeIconDescription: removeIconDescription,
    selectedColumnItems: selectedColumnItems,
    setHiddenIds: setHiddenIds,
    showIconDescription: showIconDescription,
    testId: testId
  }).map(function (item) {
    return item.id === pinnedColumnId ? _objectSpread(_objectSpread({}, item), {}, {
      disabled: false,
      content: _objectSpread(_objectSpread({}, item.content), {}, {
        rowActions: function rowActions() {}
      })
    }) : item;
  });
  var handleAdd = function handleAdd(event, id) {
    setSelectedColumnItems(function (prev) {
      var newItem = findAndCloneItem(id, availableColumnItems);
      var isGroupItem = newItem.isCategory;
      var parentGroup = !isGroupItem && groupMapping.find(function (group) {
        return group.columnIds.includes(id);
      });
      var groupId = isGroupItem ? newItem.id : parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.id;
      var previousGroupItem = groupId && prev.find(function (item) {
        return item.id === groupId;
      });
      delete newItem.hasLoadMore;
      var itemToAdd = parentGroup && !previousGroupItem ? createGroupItem(parentGroup.id, parentGroup.name, [newItem]) : parentGroup && previousGroupItem ? _objectSpread(_objectSpread({}, previousGroupItem), {}, {
        children: [].concat(_toConsumableArray(previousGroupItem.children), [newItem])
      }) : isGroupItem && previousGroupItem ? _objectSpread(_objectSpread({}, previousGroupItem), {}, {
        children: _toConsumableArray(newItem.children)
      }) : newItem;
      var insertAtIndex = previousGroupItem ? prev.indexOf(previousGroupItem) : prev.length;
      var deleteCount = groupId ? 1 : 0;
      var prevCopy = _toConsumableArray(prev);
      prevCopy.splice(insertAtIndex, deleteCount, itemToAdd);
      return prevCopy;
    });
    onChange('select', id);
  };
  var i18nFooter = {
    primaryButtonLabel: saveButtonLabel,
    secondaryButtonLabel: cancelButtonLabel
  };
  var allGroupIds = groupMapping.map(function (_ref11) {
    var id = _ref11.id;
    return id;
  });
  var MyComposedModal = (overrides === null || overrides === void 0 || (_overrides$composedMo = overrides.composedModal) === null || _overrides$composedMo === void 0 ? void 0 : _overrides$composedMo.component) || ComposedModal;
  var MyListBuilder = (overrides === null || overrides === void 0 || (_overrides$listBuilde = overrides.listBuilder) === null || _overrides$listBuilde === void 0 ? void 0 : _overrides$listBuilde.component) || ListBuilder;
  return /*#__PURE__*/React__default.createElement(MyComposedModal, _extends({
    className: classnames("".concat(iotPrefix, "--column-customization-modal"), _defineProperty({}, "".concat(iotPrefix, "--column-customization-modal--error-state"), error)),
    error: error,
    footer: _objectSpread({
      isPrimaryButtonDisabled: isPrimaryButtonDisabled
    }, i18nFooter),
    header: {
      // label is needed since it generates the aria-label,
      // but we hide the actual label element using css
      label: modalTitle,
      title: modalTitle,
      helpText: modalBody
    },
    iconDescription: closeIconDescription,
    onClearError: onClearError,
    onClose: onClose,
    onSubmit: onSave,
    open: open,
    testId: testId
  }, overrides === null || overrides === void 0 || (_overrides$composedMo2 = overrides.composedModal) === null || _overrides$composedMo2 === void 0 ? void 0 : _overrides$composedMo2.props), /*#__PURE__*/React__default.createElement(MyListBuilder, _extends({
    allDefaultExpandedIds: allGroupIds,
    getAllowedDropIds: groupMapping.length ? function (dragId) {
      var _selectedItems$find;
      var topLevelItemIsDragged = selectedItems.find(function (_ref12) {
        var id = _ref12.id;
        return id === dragId;
      });
      return topLevelItemIsDragged ? selectedItems.map(function (_ref13) {
        var id = _ref13.id;
        return id;
      }) : (_selectedItems$find = selectedItems.find(function (item) {
        var _item$children;
        return (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.find(function (_ref14) {
          var id = _ref14.id;
          return dragId === id;
        });
      })) === null || _selectedItems$find === void 0 ? void 0 : _selectedItems$find.children.map(function (_ref15) {
        var id = _ref15.id;
        return id;
      });
    } : null,
    handleLoadMore: handleLoadMore,
    hasItemsSearch: availableColumns.length > nrOfItemsNotNeedingSearch,
    hasSelectedItemsSearch: false,
    hasReset: true,
    i18n: {
      allListEmptyText: availableColumnsEmptyText,
      allListSearchPlaceholderText: searchPlaceholder,
      allListTitle: function allListTitle() {
        return availableColumnsLabel;
      },
      clearSearchIconDescription: clearSearchIconDescription,
      collapseIconDescription: collapseIconDescription,
      expandIconDescription: expandIconDescription,
      loadMoreButtonLabel: loadMoreButtonLabel,
      removeIconDescription: removeIconDescription,
      resetLabel: resetButtonLabel,
      selectedListTitle: function selectedListTitle() {
        return selectedColumnsLabel;
      },
      selectedListEmptyText: selectedColumnsEmptyText
    },
    isLargeRow: !isNil(secondaryValue),
    items: availableColumnItems,
    itemWillMove: preventDropInOtherGroup,
    itemsSearchValue: searchValue,
    loadingMoreIds: loadingMoreIds,
    lockedIds: [pinnedColumnId],
    onAdd: handleAdd,
    onSelectedListReordered: function onSelectedListReordered(reorderedSelected) {
      setSelectedColumnItems(reorderedSelected);
      onChange(reorderedSelected.flatMap(function (item) {
        return item.isCategory ? item.children.map(function (_ref16) {
          var id = _ref16.id;
          return id;
        }) : item.id;
      }));
    }
    // Called when available items checkboxes are unchecked. The selected items
    // have their own remove callbacks in their actions.
    ,
    onRemove: handleRemove,
    onReset: onReset,
    onItemsSearchChange: function onItemsSearchChange(value) {
      setSearchValue(value);
    },
    removeIcon: CloseOutline,
    selectedItems: selectedItems,
    selectedDefaultExpandedIds: allGroupIds,
    selectedEditingStyle: EditingStyle.Single,
    showLoaderInAvailableList: showLoaderInAvailableList,
    showLoaderInSelectedList: showLoaderInSelectedList,
    testId: "".concat(testId, "-list-builder"),
    useCheckboxes: true
  }, overrides === null || overrides === void 0 || (_overrides$listBuilde2 = overrides.listBuilder) === null || _overrides$listBuilde2 === void 0 ? void 0 : _overrides$listBuilde2.props)));
};
TableColumnCustomizationModal.propTypes = propTypes;
TableColumnCustomizationModal.defaultProps = defaultProps;
TableColumnCustomizationModal.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "TableColumnCustomizationModal",
  "props": {
    "error": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Will show a modal error notification with the supplied string if present",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "groupMapping": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "Defines the groups and which columns they contain. The order of the groups is relevant.",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "id": {
              "name": "string",
              "description": "The id of the column group",
              "required": true
            },
            "name": {
              "name": "string",
              "description": "The name of the column group",
              "required": true
            },
            "columnIds": {
              "name": "arrayOf",
              "value": {
                "name": "string"
              },
              "description": "The ids of the columns belonging to the group. The order is irrelevant.",
              "required": false
            }
          }
        }
      },
      "required": false
    },
    "hasLoadMore": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "If true shows a \"Load more\" button at the end of the list of available columns",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "hasVisibilityToggle": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "If true selected columns can be hidden/shown",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "i18n": {
      "defaultValue": {
        "value": "{\n  availableColumnsEmptyText: 'No available columns to show',\n  availableColumnsLabel: 'Available columns',\n  cancelButtonLabel: 'Cancel',\n  clearSearchIconDescription: 'Clear search input',\n  closeIconDescription: 'Close',\n  collapseIconDescription: 'Collapse',\n  expandIconDescription: 'Expand',\n  hideIconDescription: 'Column is visible, click to hide.',\n  loadMoreButtonLabel: 'Load more...',\n  modalTitle: 'Customize columns',\n  modalBody:\n    'Select the available columns to be displayed on the table. Drag the selected columns to reorder them.',\n  removeIconDescription: 'Remove from list',\n  resetButtonLabel: 'Reset',\n  saveButtonLabel: 'Save',\n  searchPlaceholder: 'Search',\n  selectedColumnsEmptyText: 'No columns selected',\n  selectedColumnsLabel: 'Selected columns',\n  showIconDescription: 'Column is hidden, click to show.',\n}",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "availableColumnsEmptyText": {
            "name": "string",
            "required": false
          },
          "availableColumnsLabel": {
            "name": "string",
            "required": false
          },
          "cancelButtonLabel": {
            "name": "string",
            "required": false
          },
          "clearSearchIconDescription": {
            "name": "string",
            "required": false
          },
          "closeIconDescription": {
            "name": "string",
            "required": false
          },
          "collapseIconDescription": {
            "name": "string",
            "required": false
          },
          "expandIconDescription": {
            "name": "string",
            "required": false
          },
          "hideIconDescription": {
            "name": "string",
            "required": false
          },
          "loadMoreButtonLabel": {
            "name": "string",
            "required": false
          },
          "modalTitle": {
            "name": "string",
            "required": false
          },
          "modalBody": {
            "name": "string",
            "required": false
          },
          "removeIconDescription": {
            "name": "string",
            "required": false
          },
          "resetButtonLabel": {
            "name": "string",
            "required": false
          },
          "saveButtonLabel": {
            "name": "string",
            "required": false
          },
          "searchPlaceholder": {
            "name": "string",
            "required": false
          },
          "selectedColumnsEmptyText": {
            "name": "string",
            "required": false
          },
          "selectedColumnsLabel": {
            "name": "string",
            "required": false
          },
          "showIconDescription": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": false
    },
    "isPrimaryButtonDisabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Disables the primary (save) button when true",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "loadingMoreIds": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "description": "RowIds for rows currently loading more available columns",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "string"
        }
      },
      "required": false
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "description": "Called when columns are selected, deselected, hidden, shown and reordered",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onClearError": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "description": "Clear the currently shown error, triggered if the user closes the ErrorNotification",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onLoadMore": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "description": "Called with the id of the last item when the load more button is clicked",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onReset": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "description": "Called when the reset button is clicked",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "overrides": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "Allows overriding the two main components using the attributes 'composedModal and 'listBuilder'",
      "type": {
        "name": "shape",
        "value": {
          "composedModal": {
            "name": "custom",
            "raw": "OverridePropTypes",
            "required": false
          },
          "listBuilder": {
            "name": "custom",
            "raw": "OverridePropTypes",
            "required": false
          }
        }
      },
      "required": false
    },
    "pinnedColumnId": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "The id of a column that is pinned as the first column and cannot be deselected",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "primaryValue": {
      "defaultValue": {
        "value": "'name'",
        "computed": false
      },
      "description": "The column key used as primary display value for the items in the lists",
      "type": {
        "name": "enum",
        "value": [{
          "value": "\"id\"",
          "computed": false
        }, {
          "value": "\"name\"",
          "computed": false
        }]
      },
      "required": false
    },
    "secondaryValue": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "description": "The column key used as secondary display value for the items in the lists.\nDefaults to undefined but if present will appear below the default value\nand make the list items taller.",
      "type": {
        "name": "enum",
        "value": [{
          "value": "...Object.values(ITEM_VALUE_KEYS)",
          "computed": true
        }, {
          "value": "undefined",
          "computed": true
        }]
      },
      "required": false
    },
    "showLoaderInAvailableList": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "if true the list for available columns will show a loader only",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "showLoaderInSelectedList": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "if true the list for selected columns will show a loader only",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "testId": {
      "defaultValue": {
        "value": "'table-column-customization-modal'",
        "computed": false
      },
      "description": "Id that can be used for testing",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "availableColumns": {
      "description": "The list of all the selectable columns",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "id": {
              "name": "string",
              "required": true
            },
            "name": {
              "name": "string",
              "required": true
            }
          }
        }
      },
      "required": true
    },
    "initialOrdering": {
      "description": "Array of objects representing the order and visibility of the columns",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "columnId": {
              "name": "string",
              "description": "The id of the column",
              "required": true
            },
            "isHidden": {
              "name": "bool",
              "required": false
            }
          }
        }
      },
      "required": true
    },
    "onClose": {
      "description": "Called on cancel button click and on the top right close icon click",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "onSave": {
      "description": "Called with the updated ordering and columns array when save button is clicked",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "open": {
      "description": "Determines if the modal is open or closed (i.e. visible or not to the user)",
      "type": {
        "name": "bool"
      },
      "required": true
    }
  }
};
var TableColumnCustomizationModal$1 = TableColumnCustomizationModal;

export { TableColumnCustomizationModal$1 as default, defaultProps, propTypes };
