@decisiv/ui-components 2.0.1-alpha.99 → 2.0.1

package/lib/atoms/OptionsList/index.js

@@ -3,18 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Container = void 0;
+Object.defineProperty(exports, "Container", {
+  enumerable: true,
+  get: function get() {
+    return _styles2.Container;
+  }
+});
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactBeautifulDnd = require("react-beautiful-dnd");
 
-var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
 
+var _reactWindow = require("react-window");
+
 var _Button = require("../../components/Button");
 
 var _Grid = _interopRequireDefault(require("../../components/Grid"));
@@ -27,12 +33,18 @@ var _assignRef = _interopRequireDefault(require("../../utils/assignRef"));
 
 var _isCtrlCmd = _interopRequireDefault(require("../../utils/isCtrlCmd"));
 
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
 var _Option = _interopRequireDefault(require("./Option"));
 
 var _Category = _interopRequireDefault(require("./Category"));
 
+var _styles = require("./Category/styles");
+
 var _Footer = _interopRequireDefault(require("./Footer"));
 
+var _styles2 = require("./styles");
+
 var _context = require("./context");
 
 var _utils = require("./utils");
@@ -51,8 +63,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
@@ -69,6 +79,8 @@ function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d =
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 var Row = _Grid.default.Row;
 var isUsingKeyboard = false;
 
@@ -80,28 +92,48 @@ if (_canUseDOM.default) {
     isUsingKeyboard = false;
   });
 }
-
-var Container = _styledComponents.default.ul.withConfig({
-  displayName: "OptionsList__Container",
-  componentId: "sc-107p8d5-0"
-})(["list-style:none;margin:0;width:100%;height:auto;max-height:", ";max-width:", ";padding:0;overflow:auto;position:relative;", " ", " ", " &:focus{outline:none;}"], (0, _rem.default)(310), (0, _rem.default)(340), function (_ref) {
-  var minWidth = _ref.minWidth;
-  return minWidth ? "\n          min-width: ".concat(minWidth, ";\n        ") : '';
-}, function (_ref2) {
-  var maxWidth = _ref2.maxWidth;
-  return maxWidth ? "\n          max-width: ".concat(maxWidth, ";\n        ") : '';
-}, function (_ref3) {
-  var maxHeight = _ref3.maxHeight;
-  return maxHeight ? "\n          max-height: ".concat(maxHeight, ";\n        ") : '';
+/**
+ * VirtualRow component for VariableSizeList (react-window)
+ * Renders a single item (either a Category header or an Option)
+ */
+
+/* eslint-disable react/prop-types */
+
+
+var VirtualRow = _react.default.memo(function (_ref) {
+  var index = _ref.index,
+      style = _ref.style,
+      data = _ref.data;
+  var flattenedItems = data.flattenedItems,
+      borderRadius = data.borderRadius,
+      showCheckbox = data.showCheckbox,
+      size = data.size;
+  var flattenedItem = flattenedItems[index];
+  var item = flattenedItem.item,
+      type = flattenedItem.type;
+  var id = (0, _utils.getId)(item);
+  return _react.default.createElement("div", {
+    style: style
+  }, type === 'category-header' ? _react.default.createElement(_styles.StyledCategory, {
+    size: size
+  }, item.label) : _react.default.createElement(_Option.default, _extends({}, item, {
+    key: id,
+    borderRadius: borderRadius,
+    showCheckbox: showCheckbox,
+    size: size
+  })));
 });
+/* eslint-enable react/prop-types */
+
 
-exports.Container = Container;
+VirtualRow.displayName = 'VirtualRow';
 
 function OptionsList(props, forwardedRef) {
   var actions = props.actions,
       items = props.items,
       multiple = props.multiple,
       onChange = props.onChange,
+      onDragEndProp = props.onDragEnd,
       name = props.name,
       selectedIdsProp = props.selected,
       renderOptionLabel = props.renderOptionLabel,
@@ -113,12 +145,20 @@ function OptionsList(props, forwardedRef) {
       showCheckbox = props.showCheckbox,
       tabIndex = props.tabIndex,
       selectable = props.selectable,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
       defaultSelected = props.defaultSelected,
       itemRole = props.itemRole,
       role = props.role,
       minWidth = props.minWidth,
       maxWidth = props.maxWidth,
-      maxHeight = props.maxHeight;
+      maxHeight = props.maxHeight,
+      pointerEvents = props.pointerEvents,
+      enableVirtualization = props.enableVirtualization,
+      _props$getItemHeight = props.getItemHeight,
+      getItemHeight = _props$getItemHeight === void 0 ? function (_item, _size) {
+    return 48;
+  } : _props$getItemHeight;
   var initialIds = selectedIdsProp || defaultSelected;
 
   var _useState = (0, _react.useState)(null),
@@ -131,6 +171,40 @@ function OptionsList(props, forwardedRef) {
       selectedIds = _useState4[0],
       setSelectedIds = _useState4[1];
 
+  var isDragEnabled = !!onDragEndProp;
+  var useVirtualization = enableVirtualization && !isDragEnabled; // Flatten items for virtualization
+
+  var flattenedItems = (0, _react.useMemo)(function () {
+    if (!useVirtualization) return [];
+    return (0, _utils.flattenItems)(items);
+  }, [items, useVirtualization]); // Get item size for VariableSizeList
+
+  var getItemSize = (0, _react.useCallback)(function (index) {
+    return getItemHeight(flattenedItems[index], size);
+  }, [flattenedItems, size, getItemHeight]); // Calculate total height for the list
+
+  var totalHeight = (0, _react.useMemo)(function () {
+    if (!useVirtualization) return 0;
+    var calculated = flattenedItems.reduce(function (acc, item) {
+      return acc + getItemHeight(item, size);
+    }, 0); // If maxHeight is explicitly provided, use it
+
+    if (maxHeight && typeof maxHeight === 'string') {
+      var max = parseInt(maxHeight, 10);
+      return Math.min(calculated, max);
+    } // Default behavior: use 310px max, but if calculated is less, use calculated
+    // This ensures small lists render all items (important for tests)
+
+
+    var defaultMax = 310; // If the list is small enough to fit all items, use calculated height
+    // This is important for tests and small lists
+
+    if (calculated <= defaultMax) {
+      return calculated;
+    }
+
+    return defaultMax;
+  }, [flattenedItems, size, maxHeight, useVirtualization, getItemHeight]);
   var updateSelectionAndTriggerChange = (0, _react.useCallback)(function (ids) {
     // Only toggle if we are "uncontrolled"
     selectedIdsProp === undefined && selectable && setSelectedIds(ids);
@@ -165,8 +239,8 @@ function OptionsList(props, forwardedRef) {
 
   var selectableIds = (0, _react.useMemo)(function () {
     return items.reduce(function (acc, item) {
-      return [].concat(_toConsumableArray(acc), _toConsumableArray(((0, _utils.isCategory)(item) ? item.items.filter(function (_ref4) {
-        var disabled = _ref4.disabled;
+      return [].concat(_toConsumableArray(acc), _toConsumableArray(((0, _utils.isCategory)(item) ? item.items.filter(function (_ref2) {
+        var disabled = _ref2.disabled;
         return !disabled;
       }) : [item.disabled ? undefined : item]).filter(Boolean)));
     }, []).map(_utils.getId);
@@ -233,7 +307,7 @@ function OptionsList(props, forwardedRef) {
   }, [containerRef, activeId, inputMethod, previousActiveId]);
 
   var setContainerRefFunc = function setContainerRefFunc(el) {
-    _react.forwardRef && (0, _assignRef.default)(forwardedRef, el);
+    (0, _assignRef.default)(forwardedRef, el);
     setContainerRef(el);
   };
 
@@ -263,6 +337,90 @@ function OptionsList(props, forwardedRef) {
     updateActiveId('');
     handleFocusToggle(event);
   }, [handleFocusToggle, updateActiveId]);
+  var positions = [];
+  var onDragEnd = (0, _react.useCallback)(function (_ref3) {
+    var source = _ref3.source,
+        destination = _ref3.destination;
+    if (!onDragEndProp || !destination) return;
+
+    var _positions$source$ind = _slicedToArray(positions[source.index], 2),
+        fromGroup = _positions$source$ind[0],
+        fromIndex = _positions$source$ind[1];
+
+    var _positions$destinatio = _slicedToArray(positions[destination.index], 2),
+        toGroup = _positions$destinatio[0],
+        toIndex = _positions$destinatio[1];
+
+    var hasGroups = fromIndex !== undefined || toIndex !== undefined;
+    var fixedGroup = toGroup;
+    var fixedIndex = toIndex;
+
+    if (!hasGroups) {
+      onDragEndProp(fromGroup, toGroup);
+      return;
+    } // when dropping in a header place
+
+
+    if (toIndex === undefined) {
+      if (toGroup === 0) return;
+
+      if (fromGroup >= toGroup) {
+        // it is actually aiming to the last position of previous group
+        var _positions = _slicedToArray(positions[destination.index - 1], 2);
+
+        fixedGroup = _positions[0];
+        fixedIndex = _positions[1];
+        fixedIndex += 1;
+      } else {
+        // aiming for the first position of the group
+        fixedIndex = 0;
+      }
+    } else if (fromGroup < toGroup) fixedIndex += 1;
+
+    onDragEndProp([fromGroup, fromIndex], [fixedGroup, fixedIndex]);
+  }, [onDragEndProp, positions]);
+
+  var _useConfig = (0, _ConfigProvider.useConfig)(),
+      createPortal = _useConfig.createPortal; // Warn developers if they try to use both features
+
+
+  (0, _react.useEffect)(function () {
+    if (process.env.NODE_ENV !== 'production') {
+      if (enableVirtualization && isDragEnabled) {
+        // eslint-disable-next-line no-console
+        console.warn('OptionsList: enableVirtualization is ignored when onDragEnd is provided. ' + 'Virtualization and drag-and-drop are incompatible.');
+      }
+    }
+  }, [enableVirtualization, isDragEnabled]);
+
+  var renderDraggable = function renderDraggable(item, index) {
+    var id = (0, _utils.getId)(item);
+    return _react.default.createElement(_reactBeautifulDnd.Draggable, {
+      key: id,
+      draggableId: id,
+      index: index,
+      isDragDisabled: !isDragEnabled
+    }, function (provided, snapshot) {
+      var draggableElement = _react.default.createElement(_Option.default, _extends({}, item, {
+        id: id,
+        borderRadius: borderRadius,
+        showCheckbox: showCheckbox,
+        size: size,
+        isDragEnabled: isDragEnabled,
+        providerRef: provided.innerRef,
+        draggableProps: provided.draggableProps,
+        dragHandleProps: provided.dragHandleProps
+      }));
+
+      if (snapshot.isDragging) {
+        return createPortal(draggableElement);
+      }
+
+      return draggableElement;
+    });
+  };
+
+  var dndIndex = 0;
   return _react.default.createElement(_context.OptionsListContextProvider, {
     value: {
       toggleItemSelection: toggleItemSelection,
@@ -275,9 +433,12 @@ function OptionsList(props, forwardedRef) {
       setInputMethod: setInputMethod,
       updateActiveId: updateActiveId,
       selectable: !!selectable,
-      itemRole: itemRole
+      itemRole: itemRole,
+      pointerEvents: pointerEvents
     }
-  }, _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(Row, null, _react.default.createElement(Container, {
+  }, _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(Row, null, _react.default.createElement(_reactBeautifulDnd.DragDropContext, {
+    onDragEnd: onDragEnd
+  }, useVirtualization ? _react.default.createElement(_styles2.Container, {
     "aria-activedescendant": activeId,
     "aria-multiselectable": !!multiple,
     ref: setContainerRefFunc,
@@ -292,22 +453,79 @@ function OptionsList(props, forwardedRef) {
     minWidth: minWidth,
     maxWidth: maxWidth,
     maxHeight: maxHeight
-  }, items.map(function (item) {
-    var id = (0, _utils.getId)(item);
+  }, _react.default.createElement(_reactWindow.VariableSizeList, {
+    height: totalHeight,
+    itemCount: flattenedItems.length,
+    itemSize: getItemSize,
+    width: "100%",
+    itemData: {
+      flattenedItems: flattenedItems,
+      borderRadius: borderRadius,
+      showCheckbox: showCheckbox || false,
+      size: size
+    }
+  }, VirtualRow)) : _react.default.createElement(_reactBeautifulDnd.Droppable, {
+    droppableId: "droppable-options-list"
+  }, function (droppableProvided) {
+    return _react.default.createElement(_styles2.Container, _extends({
+      "aria-activedescendant": activeId,
+      "aria-multiselectable": !!multiple,
+      ref: function ref(el) {
+        setContainerRefFunc(el);
+        droppableProvided.innerRef(el);
+      },
+      onKeyDown: onKeyDown,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onMouseLeave: function onMouseLeave() {
+        return updateActiveId('');
+      },
+      role: role,
+      tabIndex: tabIndex,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      maxHeight: maxHeight
+    }, droppableProvided.droppableProps), isDragEnabled ? items.map(function (item, index) {
+      var id = (0, _utils.getId)(item);
+      var indexOffset = positions.length;
+      positions[dndIndex] = [index];
+      dndIndex += 1;
+
+      if ((0, _utils.isCategory)(item)) {
+        item.items.forEach(function (_, subIndex) {
+          positions[dndIndex] = [index, subIndex];
+          dndIndex += 1;
+        });
+        return _react.default.createElement(_Category.default, _extends({}, item, {
+          key: id,
+          borderRadius: borderRadius,
+          showCheckbox: showCheckbox,
+          size: size,
+          indexOffset: indexOffset,
+          isDragEnabled: isDragEnabled
+        }));
+      }
+
+      return renderDraggable(item, dndIndex - 1);
+    }) : items.map(function (item) {
+      var id = (0, _utils.getId)(item);
+
+      if ((0, _utils.isCategory)(item)) {
+        return _react.default.createElement(_Category.default, _extends({}, item, {
+          key: id,
+          borderRadius: borderRadius,
+          showCheckbox: showCheckbox,
+          size: size
+        }));
+      }
 
-    if ((0, _utils.isCategory)(item)) {
-      return _react.default.createElement(_Category.default, _extends({}, item, {
+      return _react.default.createElement(_Option.default, _extends({}, item, {
         key: id,
         borderRadius: borderRadius,
-        showCheckbox: showCheckbox
+        showCheckbox: showCheckbox,
+        size: size
       }));
-    }
-
-    return _react.default.createElement(_Option.default, _extends({}, item, {
-      key: id,
-      borderRadius: borderRadius,
-      showCheckbox: showCheckbox
-    }));
+    }), droppableProvided.placeholder);
   }))), actions && _react.default.createElement(Row, null, _react.default.createElement(_Footer.default, {
     actions: actions
   }))));
@@ -332,7 +550,8 @@ OptionsListWithContainerRef.defaultProps = {
   itemRole: 'option',
   tabIndex: 0,
   selectable: true,
-  showCheckbox: true
+  showCheckbox: true,
+  size: 'small'
 };
 var _default = OptionsListWithContainerRef;
 exports.default = _default;