etudes 3.7.1 → 3.9.0

package/lib/Dropdown.js

@@ -82,15 +82,15 @@ var styles_1 = __importDefault(require("./utils/styles"));
  */
 exports.default = (0, react_2.forwardRef)(function (_a, ref) {
     var _b;
-    var children = _a.children, className = _a.className, style = _a.style, _c = _a.borderThickness, borderThickness = _c === void 0 ? 0 : _c, collapseIconSvg = _a.collapseIconSvg, _d = _a.collapsesOnSelect, collapsesOnSelect = _d === void 0 ? true : _d, data = _a.data, label = _a.label, expandIconSvg = _a.expandIconSvg, _e = _a.isInverted, isInverted = _e === void 0 ? false : _e, _f = _a.isSelectionTogglable, isSelectionTogglable = _f === void 0 ? false : _f, itemComponentType = _a.itemComponentType, externalItemLength = _a.itemLength, _g = _a.itemPadding, itemPadding = _g === void 0 ? 0 : _g, _h = _a.maxVisibleItems, maxVisibleItems = _h === void 0 ? -1 : _h, _j = _a.orientation, orientation = _j === void 0 ? 'vertical' : _j, _k = _a.selectedIndices, externalSelectedIndices = _k === void 0 ? [] : _k, _l = _a.selectionMode, selectionMode = _l === void 0 ? 'single' : _l, _m = _a.useDefaultStyles, useDefaultStyles = _m === void 0 ? false : _m, ToggleComponent = _a.toggleComponentType, onActivateAt = _a.onActivateAt, onDeselectAt = _a.onDeselectAt, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, onToggleCustomEvent = _a.onToggleCustomEvent, props = __rest(_a, ["children", "className", "style", "borderThickness", "collapseIconSvg", "collapsesOnSelect", "data", "label", "expandIconSvg", "isInverted", "isSelectionTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "selectedIndices", "selectionMode", "useDefaultStyles", "toggleComponentType", "onActivateAt", "onDeselectAt", "onSelectAt", "onSelectionChange", "onToggleCustomEvent"]);
+    var children = _a.children, className = _a.className, style = _a.style, collapseIconSvg = _a.collapseIconSvg, _c = _a.collapsesOnSelect, collapsesOnSelect = _c === void 0 ? true : _c, label = _a.label, layout = _a.layout, expandIconSvg = _a.expandIconSvg, _d = _a.isInverted, isInverted = _d === void 0 ? false : _d, _e = _a.isSelectionTogglable, isSelectionTogglable = _e === void 0 ? false : _e, itemComponentType = _a.itemComponentType, externalItemLength = _a.itemLength, _f = _a.itemPadding, itemPadding = _f === void 0 ? 0 : _f, items = _a.items, _g = _a.maxVisibleItems, maxVisibleItems = _g === void 0 ? -1 : _g, numSegments = _a.numSegments, _h = _a.orientation, orientation = _h === void 0 ? 'vertical' : _h, _j = _a.selection, externalSelection = _j === void 0 ? [] : _j, _k = _a.selectionMode, selectionMode = _k === void 0 ? 'single' : _k, _l = _a.useDefaultStyles, useDefaultStyles = _l === void 0 ? false : _l, ToggleComponent = _a.toggleComponentType, onActivateAt = _a.onActivateAt, onDeselectAt = _a.onDeselectAt, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, onToggleCustomEvent = _a.onToggleCustomEvent, props = __rest(_a, ["children", "className", "style", "collapseIconSvg", "collapsesOnSelect", "label", "layout", "expandIconSvg", "isInverted", "isSelectionTogglable", "itemComponentType", "itemLength", "itemPadding", "items", "maxVisibleItems", "numSegments", "orientation", "selection", "selectionMode", "useDefaultStyles", "toggleComponentType", "onActivateAt", "onDeselectAt", "onSelectAt", "onSelectionChange", "onToggleCustomEvent"]);
     var isIndexOutOfRange = function (index) {
-        if (index >= data.length)
+        if (index >= items.length)
             return true;
         if (index < 0)
             return true;
         return false;
     };
-    var sanitizeSelectedIndices = function (indices) { return indices.sort().filter(function (t) { return !isIndexOutOfRange(t); }); };
+    var sanitizedSelection = function (selection) { return selection.sort().filter(function (t) { return !isIndexOutOfRange(t); }); };
     var expand = function () {
         if (isCollapsed)
             setIsCollapsed(false);
@@ -112,11 +112,11 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
         if (selectionMode === 'single' && collapsesOnSelect)
             collapse();
     };
-    var selectionChangeHandler = function (selection) {
-        var newValue = selection.sort();
-        if ((0, react_1.default)(newValue, selectedIndices))
+    var selectionChangeHandler = function (value) {
+        var newValue = value.sort();
+        if ((0, react_1.default)(newValue, selection))
             return;
-        setSelectedIndices(newValue);
+        setSelection(newValue);
     };
     var clickOutsideHandler = function (event) {
         if (isCollapsed)
@@ -139,10 +139,10 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
         collapse();
     };
     var bodyRef = (0, react_2.useRef)(null);
-    var sanitizedExternalSelectedIndices = sanitizeSelectedIndices(externalSelectedIndices);
-    var _o = __read((0, react_2.useState)(sanitizedExternalSelectedIndices), 2), selectedIndices = _o[0], setSelectedIndices = _o[1];
-    var prevSelectedIndices = (0, usePrevious_1.default)(selectedIndices);
-    var _p = __read((0, react_2.useState)(true), 2), isCollapsed = _p[0], setIsCollapsed = _p[1];
+    var sanitizedExternalSelection = sanitizedSelection(externalSelection);
+    var _m = __read((0, react_2.useState)(sanitizedExternalSelection), 2), selection = _m[0], setSelection = _m[1];
+    var prevSelection = (0, usePrevious_1.default)(selection, { sanitizeDependency: JSON.stringify });
+    var _o = __read((0, react_2.useState)(true), 2), isCollapsed = _o[0], setIsCollapsed = _o[1];
     var rect = (0, useElementRect_1.default)(bodyRef);
     (0, react_2.useEffect)(function () {
         window.addEventListener('click', clickOutsideHandler);
@@ -151,33 +151,33 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
         };
     }, [isCollapsed]);
     (0, react_2.useEffect)(function () {
-        if ((0, react_1.default)(sanitizedExternalSelectedIndices, selectedIndices))
+        if ((0, react_1.default)(sanitizedExternalSelection, selection))
             return;
-        setSelectedIndices(sanitizedExternalSelectedIndices);
-    }, [JSON.stringify(sanitizedExternalSelectedIndices)]);
+        setSelection(sanitizedExternalSelection);
+    }, [JSON.stringify(sanitizedExternalSelection)]);
     (0, react_2.useEffect)(function () {
-        if (!prevSelectedIndices)
+        if (!prevSelection)
             return;
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedIndices);
-    }, [JSON.stringify(sanitizeSelectedIndices(selectedIndices))]);
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selection);
+    }, [JSON.stringify(selection)]);
     var itemLength = externalItemLength !== null && externalItemLength !== void 0 ? externalItemLength : (orientation === 'vertical' ? rect.height : rect.width);
-    var numItems = data.length;
+    var numItems = items.length;
     var numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
-    var menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness;
+    var menuLength = itemLength * numVisibleItems + itemPadding * (numVisibleItems - 1);
     var fixedClassNames = getFixedClassNames({ isCollapsed: isCollapsed, isSelectionTogglable: isSelectionTogglable, orientation: orientation });
-    var fixedStyles = getFixedStyles({ borderThickness: borderThickness, isCollapsed: isCollapsed, isInverted: isInverted, itemPadding: itemPadding, maxVisibleItems: maxVisibleItems, menuLength: menuLength, numItems: numItems, orientation: orientation });
+    var fixedStyles = getFixedStyles({ isCollapsed: isCollapsed, isInverted: isInverted, itemPadding: itemPadding, maxVisibleItems: maxVisibleItems, menuLength: menuLength, numItems: numItems, orientation: orientation });
     var defaultStyles = useDefaultStyles ? getDefaultStyles({}) : {};
     var expandIconComponent = expandIconSvg ? react_2.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_2.default.createElement(react_2.default.Fragment, null);
     var collapseIconComponent = collapseIconSvg ? react_2.default.createElement(FlatSVG_1.default, { svg: collapseIconSvg, style: defaultStyles.collapseIcon }) : expandIconComponent;
     return (react_2.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
         react_2.default.createElement("div", { ref: bodyRef, style: (0, styles_1.default)(fixedStyles.body) },
             ToggleComponent ? (react_2.default.createElement(ToggleComponent, { className: (0, classnames_1.default)(fixedClassNames.toggle), style: (0, styles_1.default)(fixedStyles.toggle), onClick: function () { return toggle(); }, onCustomEvent: function (name, info) { return onToggleCustomEvent === null || onToggleCustomEvent === void 0 ? void 0 : onToggleCustomEvent(name, info); } })) : (react_2.default.createElement("button", { className: (0, classnames_1.default)(fixedClassNames.toggle), style: (0, styles_1.default)(fixedStyles.toggle, defaultStyles.toggle), onClick: function () { return toggle(); } },
-                react_2.default.createElement("label", { style: fixedStyles.toggleLabel, dangerouslySetInnerHTML: { __html: (_b = label === null || label === void 0 ? void 0 : label(selectedIndices)) !== null && _b !== void 0 ? _b : (selectedIndices.length > 0 ? selectedIndices.map(function (t) { return data[t].label; }).join(', ') : '') } }),
+                react_2.default.createElement("label", { style: fixedStyles.toggleLabel, dangerouslySetInnerHTML: { __html: (_b = label === null || label === void 0 ? void 0 : label(selection)) !== null && _b !== void 0 ? _b : (selection.length > 0 ? selection.map(function (t) { return items[t].label; }).join(', ') : '') } }),
                 (0, cloneStyledElement_1.default)(isCollapsed ? expandIconComponent : collapseIconComponent, {
                     className: (0, classnames_1.default)(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),
                     style: (0, styles_1.default)(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),
                 }))),
-            react_2.default.createElement(List_1.default, { className: fixedClassNames.list, style: (0, styles_1.default)(fixedStyles.list), borderThickness: borderThickness, data: data, isSelectionTogglable: isSelectionTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndices: selectedIndices, selectionMode: selectionMode, onActivateAt: onActivateAt, onDeselectAt: onDeselectAt, onSelectAt: selectAtHandler, onSelectionChange: selectionChangeHandler }))));
+            react_2.default.createElement(List_1.default, { className: fixedClassNames.list, style: (0, styles_1.default)(fixedStyles.list), isSelectionTogglable: isSelectionTogglable, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, items: items, layout: layout, numSegments: numSegments, orientation: orientation, selection: selection, selectionMode: selectionMode, onActivateAt: onActivateAt, onDeselectAt: onDeselectAt, onSelectAt: selectAtHandler, onSelectionChange: selectionChangeHandler }))));
 });
 function getFixedClassNames(_a) {
     var isCollapsed = _a.isCollapsed, isSelectionTogglable = _a.isSelectionTogglable, orientation = _a.orientation;
@@ -210,7 +210,7 @@ function getFixedClassNames(_a) {
     });
 }
 function getFixedStyles(_a) {
-    var _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, isCollapsed = _a.isCollapsed, isInverted = _a.isInverted, _c = _a.itemPadding, itemPadding = _c === void 0 ? 0 : _c, _d = _a.maxVisibleItems, maxVisibleItems = _d === void 0 ? 0 : _d, menuLength = _a.menuLength, _e = _a.numItems, numItems = _e === void 0 ? 0 : _e, orientation = _a.orientation;
+    var isCollapsed = _a.isCollapsed, isInverted = _a.isInverted, _b = _a.itemPadding, itemPadding = _b === void 0 ? 0 : _b, _c = _a.maxVisibleItems, maxVisibleItems = _c === void 0 ? 0 : _c, menuLength = _a.menuLength, _d = _a.numItems, numItems = _d === void 0 ? 0 : _d, orientation = _a.orientation;
     return (0, asStyleDict_1.default)({
         root: __assign({ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', overflow: 'visible' }, orientation === 'vertical' ? {
             flexDirection: isInverted ? 'column-reverse' : 'column',
@@ -222,7 +222,6 @@ function getFixedStyles(_a) {
             width: '100%',
         },
         toggle: {
-            borderWidth: "".concat(borderThickness, "px"),
             cursor: 'pointer',
             height: '100%',
             left: '0',
@@ -244,17 +243,17 @@ function getFixedStyles(_a) {
         expandIcon: {},
         collapseIcon: {},
         list: __assign({ position: 'absolute' }, orientation === 'vertical' ? __assign({ transition: 'height 100ms ease-out', width: '100%', height: isCollapsed ? '0px' : "".concat(menuLength, "px"), overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden' }, isInverted ? {
-            marginBottom: "".concat(itemPadding - borderThickness, "px"),
+            marginBottom: "".concat(itemPadding, "px"),
             bottom: '100%',
         } : {
             top: '100%',
-            marginTop: "".concat(itemPadding - borderThickness, "px"),
+            marginTop: "".concat(itemPadding, "px"),
         }) : __assign({ transition: 'width 100ms ease-out', width: isCollapsed ? '0px' : "".concat(menuLength, "px"), height: '100%', overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden' }, isInverted ? {
-            marginRight: "".concat(itemPadding - borderThickness, "px"),
+            marginRight: "".concat(itemPadding, "px"),
             right: '100%',
         } : {
             left: '100%',
-            marginLeft: "".concat(itemPadding - borderThickness, "px"),
+            marginLeft: "".concat(itemPadding, "px"),
         })),
     });
 }

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isDeepEqual from 'fast-deep-equal/react'\nimport React, { forwardRef, useEffect, useRef, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps, type ListOrientation, type ListProps } from './List'\nimport useElementRect from './hooks/useElementRect'\nimport usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type DropdownItemData = {\n  label?: string\n}\n\nexport type DropdownToggleProps = HTMLAttributes<HTMLElement> & {\n  onCustomEvent?: (name: string, info?: any) => void\n}\n\nexport type DropdownItemProps<T extends DropdownItemData = DropdownItemData> = ListItemProps<T>\n\nexport type DropdownProps<T extends DropdownItemData = DropdownItemData> = HTMLAttributes<HTMLDivElement> & ListProps<T> & PropsWithChildren<{\n  /**\n   * SVG markup to be put in the dropdown button as the collapse icon.\n   */\n  collapseIconSvg?: string\n\n  /**\n   * Specifies if the dropdown should be collapsed upon selection. This only\n   * works if `selectionMode` is `single`.\n   */\n  collapsesOnSelect?: boolean\n\n  /**\n   * The label to appear on the dropdown toggle button.\n   */\n  label?: (selectedIndices: number[]) => string\n\n  /**\n   * SVG markup to be put in the dropdown button as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   * Supports all orientations.\n   */\n  isInverted?: boolean\n\n  /**\n   * Maximum number of items that are viside when the component expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when the component expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  useDefaultStyles?: boolean\n\n  /**\n   * React component type to be used for generating the toggle element inside\n   * the component. When absent, one will be generated automatically.\n   */\n  toggleComponentType?: ComponentType<DropdownToggleProps>\n\n  /**\n   * Handler invoked when the toggle dispatches a custom event.\n   *\n   * @param eventName Name of the dispatched custom event.\n   * @param eventInfo Optional info of the dispatched custom event.\n   */\n  onToggleCustomEvent?: (eventName: string, eventInfo?: any) => void\n}>\n\ntype StylesProps = {\n  borderThickness?: number\n  isCollapsed?: boolean\n  isInverted?: boolean\n  isSelectionTogglable?: boolean\n  itemPadding?: number\n  maxVisibleItems?: number\n  menuLength?: number\n  numItems?: number\n  orientation?: ListOrientation\n}\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default forwardRef(({\n  children,\n  className,\n  style,\n  borderThickness = 0,\n  collapseIconSvg,\n  collapsesOnSelect = true,\n  data,\n  label,\n  expandIconSvg,\n  isInverted = false,\n  isSelectionTogglable = false,\n  itemComponentType,\n  itemLength: externalItemLength,\n  itemPadding = 0,\n  maxVisibleItems = -1,\n  orientation = 'vertical',\n  selectedIndices: externalSelectedIndices = [],\n  selectionMode = 'single',\n  useDefaultStyles = false,\n  toggleComponentType: ToggleComponent,\n  onActivateAt,\n  onDeselectAt,\n  onSelectAt,\n  onSelectionChange,\n  onToggleCustomEvent,\n  ...props\n}, ref) => {\n  const isIndexOutOfRange = (index: number) => {\n    if (index >= data.length) return true\n    if (index < 0) return true\n\n    return false\n  }\n\n  const sanitizeSelectedIndices = (indices: number[]) => indices.sort().filter(t => !isIndexOutOfRange(t))\n\n  const expand = () => {\n    if (isCollapsed) setIsCollapsed(false)\n  }\n\n  const collapse = () => {\n    if (!isCollapsed) setIsCollapsed(true)\n  }\n\n  const toggle = () => {\n    if (isCollapsed) {\n      expand()\n    }\n    else {\n      collapse()\n    }\n  }\n\n  const selectAtHandler = (index: number) => {\n    onSelectAt?.(index)\n\n    if (selectionMode === 'single' && collapsesOnSelect) collapse()\n  }\n\n  const selectionChangeHandler = (selection: number[]) => {\n    const newValue = selection.sort()\n\n    if (isDeepEqual(newValue, selectedIndices)) return\n\n    setSelectedIndices(newValue)\n  }\n\n  const clickOutsideHandler = (event: MouseEvent) => {\n    if (isCollapsed) return\n    if (!(event.target instanceof Node)) return\n\n    let isOutside = true\n    let node = event.target\n\n    while (node) {\n      if (node === bodyRef.current) {\n        isOutside = false\n        break\n      }\n\n      if (!node.parentNode) break\n\n      node = node.parentNode\n    }\n\n    if (!isOutside) return\n\n    collapse()\n  }\n\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const sanitizedExternalSelectedIndices = sanitizeSelectedIndices(externalSelectedIndices)\n  const [selectedIndices, setSelectedIndices] = useState(sanitizedExternalSelectedIndices)\n  const prevSelectedIndices = usePrevious(selectedIndices)\n  const [isCollapsed, setIsCollapsed] = useState(true)\n  const rect = useElementRect(bodyRef)\n\n  useEffect(() => {\n    window.addEventListener('click', clickOutsideHandler)\n\n    return () => {\n      window.removeEventListener('click', clickOutsideHandler)\n    }\n  }, [isCollapsed])\n\n  useEffect(() => {\n    if (isDeepEqual(sanitizedExternalSelectedIndices, selectedIndices)) return\n\n    setSelectedIndices(sanitizedExternalSelectedIndices)\n  }, [JSON.stringify(sanitizedExternalSelectedIndices)])\n\n  useEffect(() => {\n    if (!prevSelectedIndices) return\n\n    onSelectionChange?.(selectedIndices)\n  }, [JSON.stringify(sanitizeSelectedIndices(selectedIndices))])\n\n  const itemLength = externalItemLength ?? (orientation === 'vertical' ? rect.height : rect.width)\n  const numItems = data.length\n  const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n  const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n  const fixedClassNames = getFixedClassNames({ isCollapsed, isSelectionTogglable, orientation })\n  const fixedStyles = getFixedStyles({ borderThickness, isCollapsed, isInverted, itemPadding, maxVisibleItems, menuLength, numItems, orientation })\n  const defaultStyles: Record<string, any> = useDefaultStyles ? getDefaultStyles({}) : {}\n\n  const expandIconComponent = expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>\n  const collapseIconComponent = collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      <div ref={bodyRef} style={styles(fixedStyles.body)}>\n        {ToggleComponent ? (\n          <ToggleComponent\n            className={classNames(fixedClassNames.toggle)}\n            style={styles(fixedStyles.toggle)}\n            onClick={() => toggle()}\n            onCustomEvent={(name, info) => onToggleCustomEvent?.(name, info)}\n          />\n        ) : (\n          <button\n            className={classNames(fixedClassNames.toggle)}\n            style={styles(fixedStyles.toggle, defaultStyles.toggle)}\n            onClick={() => toggle()}\n          >\n            <label style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: label?.(selectedIndices) ?? (selectedIndices.length > 0 ? selectedIndices.map(t => data[t].label).join(', ') : '') }}/>\n            {cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n              className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n              style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n            })}\n          </button>\n        )}\n        <List\n          className={fixedClassNames.list}\n          style={styles(fixedStyles.list)}\n          borderThickness={borderThickness}\n          data={data}\n          isSelectionTogglable={isSelectionTogglable}\n          itemComponentType={itemComponentType}\n          itemLength={itemLength}\n          itemPadding={itemPadding}\n          orientation={orientation}\n          selectedIndices={selectedIndices}\n          selectionMode={selectionMode}\n          onActivateAt={onActivateAt}\n          onDeselectAt={onDeselectAt}\n          onSelectAt={selectAtHandler}\n          onSelectionChange={selectionChangeHandler}\n        />\n      </div>\n    </div>\n  )\n}) as <T extends DropdownItemData = DropdownItemData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nfunction getFixedClassNames({ isCollapsed, isSelectionTogglable, orientation }: StylesProps) {\n  return asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    toggle: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    expandIcon: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    collapseIcon: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    list: classNames({\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n  })\n}\n\nfunction getFixedStyles({ borderThickness = 0, isCollapsed, isInverted, itemPadding = 0, maxVisibleItems = 0, menuLength, numItems = 0, orientation }: StylesProps) {\n  return asStyleDict({\n    root: {\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-start',\n      overflow: 'visible',\n      ...orientation === 'vertical' ? {\n        flexDirection: isInverted ? 'column-reverse' : 'column',\n      } : {\n        flexDirection: isInverted ? 'row-reverse' : 'row',\n      },\n    },\n    body: {\n      height: '100%',\n      width: '100%',\n    },\n    toggle: {\n      borderWidth: `${borderThickness}px`,\n      cursor: 'pointer',\n      height: '100%',\n      left: '0',\n      margin: '0',\n      outline: 'none',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n      zIndex: '1',\n    },\n    toggleLabel: {\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n      pointerEvents: 'none',\n    },\n    expandIcon: {\n\n    },\n    collapseIcon: {\n\n    },\n    list: {\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        transition: 'height 100ms ease-out',\n        width: '100%',\n        height: isCollapsed ? '0px' : `${menuLength}px`,\n        overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginBottom: `${itemPadding - borderThickness}px`,\n          bottom: '100%',\n        } : {\n          top: '100%',\n          marginTop: `${itemPadding - borderThickness}px`,\n        },\n      } : {\n        transition: 'width 100ms ease-out',\n        width: isCollapsed ? '0px' : `${menuLength}px`,\n        height: '100%',\n        overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginRight: `${itemPadding - borderThickness}px`,\n          right: '100%',\n        } : {\n          left: '100%',\n          marginLeft: `${itemPadding - borderThickness}px`,\n        },\n      },\n    },\n  })\n}\n\nfunction getDefaultStyles({ ...props }: StylesProps) {\n  return asStyleDict({\n    toggle: {\n      alignItems: 'center',\n      background: '#fff',\n      boxSizing: 'border-box',\n      color: '#000',\n      display: 'flex',\n      flexDirection: 'row',\n      fontSize: '16px',\n      justifyContent: 'space-between',\n      margin: '0',\n      padding: '0 10px',\n    },\n    expandIcon: {\n      height: '15px',\n      margin: '0',\n      padding: '0',\n      width: '15px',\n    },\n    collapseIcon: {\n      height: '15px',\n      margin: '0',\n      padding: '0',\n      width: '15px',\n    },\n  })\n}\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isDeepEqual from 'fast-deep-equal/react'\nimport React, { forwardRef, useEffect, useRef, useState, type ComponentType, type HTMLAttributes, type PropsWithChildren, type ReactElement, type Ref } from 'react'\nimport FlatSVG from './FlatSVG'\nimport List, { type ListItemProps, type ListOrientation, type ListProps, type ListSelection } from './List'\nimport useElementRect from './hooks/useElementRect'\nimport usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type DropdownItemData = {\n  label?: string\n}\n\nexport type DropdownToggleProps = HTMLAttributes<HTMLElement> & {\n  onCustomEvent?: (name: string, info?: any) => void\n}\n\nexport type DropdownItemProps<T extends DropdownItemData = DropdownItemData> = ListItemProps<T>\n\nexport type DropdownProps<T extends DropdownItemData = DropdownItemData> = HTMLAttributes<HTMLDivElement> & ListProps<T> & PropsWithChildren<{\n  /**\n   * SVG markup to be put in the dropdown button as the collapse icon.\n   */\n  collapseIconSvg?: string\n\n  /**\n   * Specifies if the dropdown should be collapsed upon selection. This only\n   * works if `selectionMode` is `single`.\n   */\n  collapsesOnSelect?: boolean\n\n  /**\n   * The label to appear on the dropdown toggle button.\n   *\n   * @param selection The current selection.\n   */\n  label?: (selection: ListSelection) => string\n\n  /**\n   * SVG markup to be put in the dropdown button as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   * Supports all orientations.\n   */\n  isInverted?: boolean\n\n  /**\n   * Maximum number of items that are viside when the component expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when the component expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  useDefaultStyles?: boolean\n\n  /**\n   * React component type to be used for generating the toggle element inside\n   * the component. When absent, one will be generated automatically.\n   */\n  toggleComponentType?: ComponentType<DropdownToggleProps>\n\n  /**\n   * Handler invoked when the toggle dispatches a custom event.\n   *\n   * @param eventName Name of the dispatched custom event.\n   * @param eventInfo Optional info of the dispatched custom event.\n   */\n  onToggleCustomEvent?: (eventName: string, eventInfo?: any) => void\n}>\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default forwardRef(({\n  children,\n  className,\n  style,\n  collapseIconSvg,\n  collapsesOnSelect = true,\n  label,\n  layout,\n  expandIconSvg,\n  isInverted = false,\n  isSelectionTogglable = false,\n  itemComponentType,\n  itemLength: externalItemLength,\n  itemPadding = 0,\n  items,\n  maxVisibleItems = -1,\n  numSegments,\n  orientation = 'vertical',\n  selection: externalSelection = [],\n  selectionMode = 'single',\n  useDefaultStyles = false,\n  toggleComponentType: ToggleComponent,\n  onActivateAt,\n  onDeselectAt,\n  onSelectAt,\n  onSelectionChange,\n  onToggleCustomEvent,\n  ...props\n}, ref) => {\n  const isIndexOutOfRange = (index: number) => {\n    if (index >= items.length) return true\n    if (index < 0) return true\n\n    return false\n  }\n\n  const sanitizedSelection = (selection: ListSelection) => selection.sort().filter(t => !isIndexOutOfRange(t))\n\n  const expand = () => {\n    if (isCollapsed) setIsCollapsed(false)\n  }\n\n  const collapse = () => {\n    if (!isCollapsed) setIsCollapsed(true)\n  }\n\n  const toggle = () => {\n    if (isCollapsed) {\n      expand()\n    }\n    else {\n      collapse()\n    }\n  }\n\n  const selectAtHandler = (index: number) => {\n    onSelectAt?.(index)\n\n    if (selectionMode === 'single' && collapsesOnSelect) collapse()\n  }\n\n  const selectionChangeHandler = (value: ListSelection) => {\n    const newValue = value.sort()\n\n    if (isDeepEqual(newValue, selection)) return\n\n    setSelection(newValue)\n  }\n\n  const clickOutsideHandler = (event: MouseEvent) => {\n    if (isCollapsed) return\n    if (!(event.target instanceof Node)) return\n\n    let isOutside = true\n    let node = event.target\n\n    while (node) {\n      if (node === bodyRef.current) {\n        isOutside = false\n        break\n      }\n\n      if (!node.parentNode) break\n\n      node = node.parentNode\n    }\n\n    if (!isOutside) return\n\n    collapse()\n  }\n\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const sanitizedExternalSelection = sanitizedSelection(externalSelection)\n  const [selection, setSelection] = useState(sanitizedExternalSelection)\n  const prevSelection = usePrevious(selection, { sanitizeDependency: JSON.stringify })\n  const [isCollapsed, setIsCollapsed] = useState(true)\n  const rect = useElementRect(bodyRef)\n\n  useEffect(() => {\n    window.addEventListener('click', clickOutsideHandler)\n\n    return () => {\n      window.removeEventListener('click', clickOutsideHandler)\n    }\n  }, [isCollapsed])\n\n  useEffect(() => {\n    if (isDeepEqual(sanitizedExternalSelection, selection)) return\n\n    setSelection(sanitizedExternalSelection)\n  }, [JSON.stringify(sanitizedExternalSelection)])\n\n  useEffect(() => {\n    if (!prevSelection) return\n\n    onSelectionChange?.(selection)\n  }, [JSON.stringify(selection)])\n\n  const itemLength = externalItemLength ?? (orientation === 'vertical' ? rect.height : rect.width)\n  const numItems = items.length\n  const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n  const menuLength = itemLength * numVisibleItems + itemPadding * (numVisibleItems - 1)\n\n  const fixedClassNames = getFixedClassNames({ isCollapsed, isSelectionTogglable, orientation })\n  const fixedStyles = getFixedStyles({ isCollapsed, isInverted, itemPadding, maxVisibleItems, menuLength, numItems, orientation })\n  const defaultStyles: Record<string, any> = useDefaultStyles ? getDefaultStyles({}) : {}\n\n  const expandIconComponent = expandIconSvg ? <FlatSVG svg={expandIconSvg} style={defaultStyles.expandIcon}/> : <></>\n  const collapseIconComponent = collapseIconSvg ? <FlatSVG svg={collapseIconSvg} style={defaultStyles.collapseIcon}/> : expandIconComponent\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      <div ref={bodyRef} style={styles(fixedStyles.body)}>\n        {ToggleComponent ? (\n          <ToggleComponent\n            className={classNames(fixedClassNames.toggle)}\n            style={styles(fixedStyles.toggle)}\n            onClick={() => toggle()}\n            onCustomEvent={(name, info) => onToggleCustomEvent?.(name, info)}\n          />\n        ) : (\n          <button\n            className={classNames(fixedClassNames.toggle)}\n            style={styles(fixedStyles.toggle, defaultStyles.toggle)}\n            onClick={() => toggle()}\n          >\n            <label style={fixedStyles.toggleLabel} dangerouslySetInnerHTML={{ __html: label?.(selection) ?? (selection.length > 0 ? selection.map(t => items[t].label).join(', ') : '') }}/>\n            {cloneStyledElement(isCollapsed ? expandIconComponent : collapseIconComponent, {\n              className: classNames(isCollapsed ? fixedClassNames.expandIcon : fixedClassNames.collapseIcon),\n              style: styles(isCollapsed ? fixedStyles.expandIcon : fixedStyles.collapseIcon),\n            })}\n          </button>\n        )}\n        <List\n          className={fixedClassNames.list}\n          style={styles(fixedStyles.list)}\n          isSelectionTogglable={isSelectionTogglable}\n          itemComponentType={itemComponentType}\n          itemLength={itemLength}\n          itemPadding={itemPadding}\n          items={items}\n          layout={layout}\n          numSegments={numSegments}\n          orientation={orientation}\n          selection={selection}\n          selectionMode={selectionMode}\n          onActivateAt={onActivateAt}\n          onDeselectAt={onDeselectAt}\n          onSelectAt={selectAtHandler}\n          onSelectionChange={selectionChangeHandler}\n        />\n      </div>\n    </div>\n  )\n}) as <T extends DropdownItemData = DropdownItemData>(props: DropdownProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\ntype StylesProps = {\n  isCollapsed?: boolean\n  isInverted?: boolean\n  isSelectionTogglable?: boolean\n  itemPadding?: number\n  maxVisibleItems?: number\n  menuLength?: number\n  numItems?: number\n  orientation?: ListOrientation\n}\n\nfunction getFixedClassNames({ isCollapsed, isSelectionTogglable, orientation }: StylesProps) {\n  return asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    toggle: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    expandIcon: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    collapseIcon: classNames(orientation, {\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n    list: classNames({\n      togglable: isSelectionTogglable,\n      collapsed: isCollapsed,\n      expanded: !isCollapsed,\n    }),\n  })\n}\n\nfunction getFixedStyles({ isCollapsed, isInverted, itemPadding = 0, maxVisibleItems = 0, menuLength, numItems = 0, orientation }: StylesProps) {\n  return asStyleDict({\n    root: {\n      alignItems: 'center',\n      display: 'flex',\n      justifyContent: 'flex-start',\n      overflow: 'visible',\n      ...orientation === 'vertical' ? {\n        flexDirection: isInverted ? 'column-reverse' : 'column',\n      } : {\n        flexDirection: isInverted ? 'row-reverse' : 'row',\n      },\n    },\n    body: {\n      height: '100%',\n      width: '100%',\n    },\n    toggle: {\n      cursor: 'pointer',\n      height: '100%',\n      left: '0',\n      margin: '0',\n      outline: 'none',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n      zIndex: '1',\n    },\n    toggleLabel: {\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n      pointerEvents: 'none',\n    },\n    expandIcon: {\n\n    },\n    collapseIcon: {\n\n    },\n    list: {\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        transition: 'height 100ms ease-out',\n        width: '100%',\n        height: isCollapsed ? '0px' : `${menuLength}px`,\n        overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginBottom: `${itemPadding}px`,\n          bottom: '100%',\n        } : {\n          top: '100%',\n          marginTop: `${itemPadding}px`,\n        },\n      } : {\n        transition: 'width 100ms ease-out',\n        width: isCollapsed ? '0px' : `${menuLength}px`,\n        height: '100%',\n        overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden',\n        ...isInverted ? {\n          marginRight: `${itemPadding}px`,\n          right: '100%',\n        } : {\n          left: '100%',\n          marginLeft: `${itemPadding}px`,\n        },\n      },\n    },\n  })\n}\n\nfunction getDefaultStyles({ ...props }: StylesProps) {\n  return asStyleDict({\n    toggle: {\n      alignItems: 'center',\n      background: '#fff',\n      boxSizing: 'border-box',\n      color: '#000',\n      display: 'flex',\n      flexDirection: 'row',\n      fontSize: '16px',\n      justifyContent: 'space-between',\n      margin: '0',\n      padding: '0 10px',\n    },\n    expandIcon: {\n      height: '15px',\n      margin: '0',\n      padding: '0',\n      width: '15px',\n    },\n    collapseIcon: {\n      height: '15px',\n      margin: '0',\n      padding: '0',\n      width: '15px',\n    },\n  })\n}\n"]}

package/lib/List.d.ts

@@ -1,21 +1,16 @@
 import React, { type ComponentType, type HTMLAttributes, type ReactElement, type Ref } from 'react';
 export type ListOrientation = 'horizontal' | 'vertical';
+export type ListLayout = 'list' | 'grid';
+export type ListSelectionMode = 'none' | 'single' | 'multiple';
+export type ListSelection = number[];
 export type ListItemProps<T> = HTMLAttributes<HTMLElement> & {
-    data: T;
     index: number;
     isSelected: boolean;
+    item: T;
     orientation: ListOrientation;
     onCustomEvent?: (name: string, info?: any) => void;
 };
 export type ListProps<T> = HTMLAttributes<HTMLDivElement> & {
-    /**
-     * Thickness of item borders (in pixels). 0 indicates no borders.
-     */
-    borderThickness?: number;
-    /**
-     * Generically typed data of each item.
-     */
-    data: T[];
     /**
      * Indicates if item selection can be toggled, i.e. they can be deselected if
      * selected again.
@@ -30,6 +25,20 @@ export type ListProps<T> = HTMLAttributes<HTMLDivElement> & {
      * Padding between every item (in pixels).
      */
     itemPadding?: number;
+    /**
+     * Generically typed data of each item.
+     */
+    items: T[];
+    /**
+     * Specifies the layout of this component.
+     */
+    layout?: ListLayout;
+    /**
+     * This property is only used if the layout is set to `grid`. Specifies the
+     * number of columns if orientation is `vertical` or number of rows if
+     * orientation is `horizontal`.
+     */
+    numSegments?: number;
     /**
      * Orientation of the component.
      */
@@ -38,14 +47,14 @@ export type ListProps<T> = HTMLAttributes<HTMLDivElement> & {
      * The selected indices. If `selectionMode` is `single`, only only the first
      * value will be used.
      */
-    selectedIndices?: number[];
+    selection?: ListSelection;
     /**
      * Indicates the selection behavior:
      *   - `none`: No selection at all.
      *   - `single`: Only one item can be selected at a time.
      *   - `multiple`: Multiple items can be selected at the same time.
      */
-    selectionMode?: 'none' | 'single' | 'multiple';
+    selectionMode?: ListSelectionMode;
     /**
      * React component type to be used to generate items for this list.
      */
@@ -79,9 +88,9 @@ export type ListProps<T> = HTMLAttributes<HTMLDivElement> & {
     /**
      * Handler invoked when the selected items changed.
      *
-     * @param indices Indices of selected items.
+     * @param selection Indices of selected items.
      */
-    onSelectionChange?: (indices: number[]) => void;
+    onSelectionChange?: (selection: ListSelection) => void;
 };
 /**
  * A scrollable list of selectable items. Items are generated based on the
@@ -89,14 +98,6 @@ export type ListProps<T> = HTMLAttributes<HTMLDivElement> & {
  * generic. This component supports both horizontal and vertical orientations.
  */
 declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * Thickness of item borders (in pixels). 0 indicates no borders.
-     */
-    borderThickness?: number | undefined;
-    /**
-     * Generically typed data of each item.
-     */
-    data: T[];
     /**
      * Indicates if item selection can be toggled, i.e. they can be deselected if
      * selected again.
@@ -111,6 +112,20 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
      * Padding between every item (in pixels).
      */
     itemPadding?: number | undefined;
+    /**
+     * Generically typed data of each item.
+     */
+    items: T[];
+    /**
+     * Specifies the layout of this component.
+     */
+    layout?: ListLayout | undefined;
+    /**
+     * This property is only used if the layout is set to `grid`. Specifies the
+     * number of columns if orientation is `vertical` or number of rows if
+     * orientation is `horizontal`.
+     */
+    numSegments?: number | undefined;
     /**
      * Orientation of the component.
      */
@@ -119,14 +134,14 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
      * The selected indices. If `selectionMode` is `single`, only only the first
      * value will be used.
      */
-    selectedIndices?: number[] | undefined;
+    selection?: ListSelection | undefined;
     /**
      * Indicates the selection behavior:
      *   - `none`: No selection at all.
      *   - `single`: Only one item can be selected at a time.
      *   - `multiple`: Multiple items can be selected at the same time.
      */
-    selectionMode?: "none" | "multiple" | "single" | undefined;
+    selectionMode?: ListSelectionMode | undefined;
     /**
      * React component type to be used to generate items for this list.
      */
@@ -160,9 +175,9 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Handler invoked when the selected items changed.
      *
-     * @param indices Indices of selected items.
+     * @param selection Indices of selected items.
      */
-    onSelectionChange?: ((indices: number[]) => void) | undefined;
+    onSelectionChange?: ((selection: ListSelection) => void) | undefined;
 } & {
     ref?: React.Ref<HTMLDivElement> | undefined;
 }) => ReactElement;

package/lib/List.js

@@ -87,16 +87,16 @@ var styles_1 = __importDefault(require("./utils/styles"));
  * generic. This component supports both horizontal and vertical orientations.
  */
 exports.default = (0, react_2.forwardRef)(function (_a, ref) {
-    var className = _a.className, style = _a.style, _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, data = _a.data, _c = _a.selectionMode, selectionMode = _c === void 0 ? 'none' : _c, _d = _a.isSelectionTogglable, isSelectionTogglable = _d === void 0 ? false : _d, itemLength = _a.itemLength, _e = _a.itemPadding, itemPadding = _e === void 0 ? 0 : _e, _f = _a.orientation, orientation = _f === void 0 ? 'vertical' : _f, _g = _a.selectedIndices, externalSelectedIndices = _g === void 0 ? [] : _g, ItemComponent = _a.itemComponentType, onActivateAt = _a.onActivateAt, onDeselectAt = _a.onDeselectAt, onItemCustomEvent = _a.onItemCustomEvent, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, props = __rest(_a, ["className", "style", "borderThickness", "data", "selectionMode", "isSelectionTogglable", "itemLength", "itemPadding", "orientation", "selectedIndices", "itemComponentType", "onActivateAt", "onDeselectAt", "onItemCustomEvent", "onSelectAt", "onSelectionChange"]);
+    var className = _a.className, style = _a.style, _b = _a.isSelectionTogglable, isSelectionTogglable = _b === void 0 ? false : _b, _c = _a.itemLength, itemLength = _c === void 0 ? 50 : _c, _d = _a.itemPadding, itemPadding = _d === void 0 ? 0 : _d, items = _a.items, _e = _a.layout, layout = _e === void 0 ? 'list' : _e, _f = _a.numSegments, numSegments = _f === void 0 ? 1 : _f, _g = _a.orientation, orientation = _g === void 0 ? 'vertical' : _g, _h = _a.selection, externalSelection = _h === void 0 ? [] : _h, _j = _a.selectionMode, selectionMode = _j === void 0 ? 'none' : _j, ItemComponent = _a.itemComponentType, onActivateAt = _a.onActivateAt, onDeselectAt = _a.onDeselectAt, onItemCustomEvent = _a.onItemCustomEvent, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, props = __rest(_a, ["className", "style", "isSelectionTogglable", "itemLength", "itemPadding", "items", "layout", "numSegments", "orientation", "selection", "selectionMode", "itemComponentType", "onActivateAt", "onDeselectAt", "onItemCustomEvent", "onSelectAt", "onSelectionChange"]);
     var isIndexOutOfRange = function (index) {
-        if (index >= data.length)
+        if (index >= items.length)
             return true;
         if (index < 0)
             return true;
         return false;
     };
-    var sanitizeSelectedIndices = function (indices) { return indices.sort().filter(function (t) { return !isIndexOutOfRange(t); }); };
-    var isSelectedAt = function (index) { return selectedIndices.indexOf(index) >= 0; };
+    var sanitizeSelection = function (indices) { return indices.sort().filter(function (t) { return !isIndexOutOfRange(t); }); };
+    var isSelectedAt = function (index) { return selection.indexOf(index) >= 0; };
     var toggleAt = function (index) {
         if (isSelectedAt(index)) {
             deselectAt(index);
@@ -110,10 +110,10 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
             return;
         switch (selectionMode) {
             case 'multiple':
-                setSelectedIndices(function (prev) { return __spreadArray(__spreadArray([], __read(prev.filter(function (t) { return t !== index; })), false), [index], false).sort(); });
+                setSelection(function (prev) { return __spreadArray(__spreadArray([], __read(prev.filter(function (t) { return t !== index; })), false), [index], false).sort(); });
                 break;
             case 'single':
-                setSelectedIndices([index]);
+                setSelection([index]);
                 break;
             default:
                 break;
@@ -122,7 +122,7 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
     var deselectAt = function (index) {
         if (!isSelectedAt(index))
             return;
-        setSelectedIndices(function (prev) { return prev.filter(function (t) { return t !== index; }); });
+        setSelection(function (prev) { return prev.filter(function (t) { return t !== index; }); });
     };
     var activateAt = function (index) {
         if (selectionMode !== 'none') {
@@ -135,70 +135,67 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
         }
         onActivateAt === null || onActivateAt === void 0 ? void 0 : onActivateAt(index);
     };
-    var sanitizedExternalSelectedIndices = sanitizeSelectedIndices(externalSelectedIndices);
-    var _h = __read((0, react_2.useState)(sanitizedExternalSelectedIndices), 2), selectedIndices = _h[0], setSelectedIndices = _h[1];
-    var prevSelectedIndices = (0, usePrevious_1.default)(selectedIndices);
+    var sanitizedExternalSelection = sanitizeSelection(externalSelection);
+    var _k = __read((0, react_2.useState)(sanitizedExternalSelection), 2), selection = _k[0], setSelection = _k[1];
+    var prevSelection = (0, usePrevious_1.default)(selection, { sanitizeDependency: JSON.stringify });
     (0, react_2.useEffect)(function () {
-        if ((0, react_1.default)(sanitizedExternalSelectedIndices, selectedIndices))
+        if ((0, react_1.default)(sanitizedExternalSelection, selection))
             return;
-        setSelectedIndices(sanitizedExternalSelectedIndices);
-    }, [JSON.stringify(sanitizedExternalSelectedIndices)]);
+        setSelection(sanitizedExternalSelection);
+    }, [JSON.stringify(sanitizedExternalSelection)]);
     (0, react_2.useEffect)(function () {
         var _a;
-        if (prevSelectedIndices === undefined)
-            return;
         if (selectionMode === 'none')
             return;
-        var deselected = (_a = prevSelectedIndices === null || prevSelectedIndices === void 0 ? void 0 : prevSelectedIndices.filter(function (t) { return selectedIndices.indexOf(t) === -1; })) !== null && _a !== void 0 ? _a : [];
-        var selected = selectedIndices.filter(function (t) { return (prevSelectedIndices === null || prevSelectedIndices === void 0 ? void 0 : prevSelectedIndices.indexOf(t)) === -1; });
+        if (!prevSelection)
+            return;
+        var deselected = (_a = prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.filter(function (t) { return selection.indexOf(t) === -1; })) !== null && _a !== void 0 ? _a : [];
+        var selected = selection.filter(function (t) { return (prevSelection === null || prevSelection === void 0 ? void 0 : prevSelection.indexOf(t)) === -1; });
         deselected.map(function (t) { return onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(t); });
         selected.map(function (t) { return onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(t); });
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedIndices);
-    }, [JSON.stringify(selectedIndices)]);
-    var fixedClassNames = getFixedClassNames({ isSelectionTogglable: isSelectionTogglable, orientation: orientation });
-    var fixedStyles = getFixedStyles({ borderThickness: borderThickness, orientation: orientation });
-    return (react_2.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }), ItemComponent && (react_2.default.createElement(Each_1.default, { in: data }, function (val, idx) { return (react_2.default.createElement(ItemComponent, { className: (0, classnames_1.default)(fixedClassNames.item, {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selection);
+    }, [JSON.stringify(selection)]);
+    var fixedClassNames = getFixedClassNames({ orientation: orientation });
+    var fixedStyles = getFixedStyles({ itemLength: itemLength, itemPadding: itemPadding, layout: layout, numSegments: numSegments, orientation: orientation });
+    return (react_2.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }), ItemComponent && (react_2.default.createElement(Each_1.default, { in: items }, function (val, idx) { return (react_2.default.createElement(ItemComponent, { className: (0, classnames_1.default)({
             selected: isSelectedAt(idx),
-        }), style: (0, styles_1.default)(fixedStyles.item, __assign(__assign({ pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto' }, orientation === 'vertical' ? {
-            height: itemLength !== undefined ? "".concat(itemLength, "px") : undefined,
-            marginTop: "".concat(idx === 0 ? 0 : -borderThickness, "px"),
-        } : {
-            marginLeft: "".concat(idx === 0 ? 0 : -borderThickness, "px"),
-            width: itemLength !== undefined ? "".concat(itemLength, "px") : undefined,
-        }), idx >= data.length - 1 ? {} : __assign({}, orientation === 'vertical' ? {
+        }), style: (0, styles_1.default)(fixedStyles.item, __assign({ pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto' }, idx >= items.length - 1 ? {} : __assign({}, layout === 'list' ? __assign({}, orientation === 'vertical' ? {
             marginBottom: "".concat(itemPadding, "px"),
         } : {
             marginRight: "".concat(itemPadding, "px"),
-        }))), "data-index": idx, data: val, index: idx, isSelected: isSelectedAt(idx), orientation: orientation, onCustomEvent: function (name, info) { return onItemCustomEvent === null || onItemCustomEvent === void 0 ? void 0 : onItemCustomEvent(idx, name, info); }, onClick: function () { return activateAt(idx); } })); }))));
+        }) : {}))), "data-index": idx, index: idx, isSelected: isSelectedAt(idx), item: val, orientation: orientation, onCustomEvent: function (name, info) { return onItemCustomEvent === null || onItemCustomEvent === void 0 ? void 0 : onItemCustomEvent(idx, name, info); }, onClick: function () { return activateAt(idx); } })); }))));
 });
 function getFixedClassNames(_a) {
-    var orientation = _a.orientation, isSelectionTogglable = _a.isSelectionTogglable;
+    var orientation = _a.orientation;
     return (0, asClassNameDict_1.default)({
-        root: (0, classnames_1.default)(orientation, {
-            togglable: isSelectionTogglable,
-        }),
-        item: (0, classnames_1.default)(orientation, {
-            togglable: isSelectionTogglable,
-        }),
+        root: (0, classnames_1.default)(orientation),
     });
 }
 function getFixedStyles(_a) {
-    var _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, orientation = _a.orientation;
+    var itemLength = _a.itemLength, _b = _a.itemPadding, itemPadding = _b === void 0 ? 0 : _b, layout = _a.layout, _c = _a.numSegments, numSegments = _c === void 0 ? 1 : _c, orientation = _a.orientation;
     return (0, asStyleDict_1.default)({
-        root: {
+        root: __assign({ counterReset: 'item-counter', listStyle: 'none' }, layout === 'list' ? {
             alignItems: 'flex-start',
-            counterReset: 'item-counter',
             display: 'flex',
             flex: '0 0 auto',
             flexDirection: orientation === 'horizontal' ? 'row' : 'column',
             justifyContent: 'flex-start',
-            listStyle: 'none',
-        },
-        item: __assign({ borderWidth: "".concat(borderThickness, "px"), counterIncrement: 'item-counter', flex: '0 0 auto' }, orientation === 'vertical' ? {
+        } : __assign({ display: 'grid', gap: "".concat(itemPadding, "px") }, orientation === 'vertical' ? {
+            gridAutoRows: itemLength !== undefined ? "".concat(itemLength, "px") : undefined,
+            gridTemplateColumns: "repeat(".concat(numSegments, ", 1fr)"),
+            gridAutoFlow: 'row',
+        } : {
+            gridAutoColumns: itemLength !== undefined ? "".concat(itemLength, "px") : undefined,
+            gridTemplateRows: "repeat(".concat(numSegments, ", 1fr)"),
+            gridAutoFlow: 'column',
+        })),
+        item: __assign({ border: 'none', counterIncrement: 'item-counter', flex: '0 0 auto' }, layout === 'list' ? __assign({}, orientation === 'vertical' ? {
             width: '100%',
+            height: itemLength !== undefined ? "".concat(itemLength, "px") : undefined,
         } : {
+            width: itemLength !== undefined ? "".concat(itemLength, "px") : undefined,
             height: '100%',
-        }),
+        }) : {}),
     });
 }
 //# sourceMappingURL=List.js.map