etudes 3.7.0 → 3.8.0

package/lib/List.d.ts

@@ -1,17 +1,16 @@
 import React, { type ComponentType, type HTMLAttributes, type ReactElement, type Ref } from 'react';
-type Orientation = 'horizontal' | 'vertical';
+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;
-    orientation: Orientation;
+    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.
      */
@@ -30,22 +29,32 @@ export type ListProps<T> = HTMLAttributes<HTMLDivElement> & {
      * Padding between every item (in pixels).
      */
     itemPadding?: number;
+    /**
+     * 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.
      */
-    orientation?: Orientation;
+    orientation?: ListOrientation;
     /**
      * 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,10 +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.
      */
@@ -111,22 +116,32 @@ declare const _default: <T>(props: React.HTMLAttributes<HTMLDivElement> & {
      * Padding between every item (in pixels).
      */
     itemPadding?: number | undefined;
+    /**
+     * 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.
      */
-    orientation?: Orientation | undefined;
+    orientation?: ListOrientation | undefined;
     /**
      * 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,7 +87,7 @@ 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, data = _a.data, _b = _a.selectionMode, selectionMode = _b === void 0 ? 'none' : _b, _c = _a.isSelectionTogglable, isSelectionTogglable = _c === void 0 ? false : _c, _d = _a.itemLength, itemLength = _d === void 0 ? 50 : _d, _e = _a.itemPadding, itemPadding = _e === void 0 ? 0 : _e, _f = _a.layout, layout = _f === void 0 ? 'list' : _f, _g = _a.numSegments, numSegments = _g === void 0 ? 1 : _g, _h = _a.orientation, orientation = _h === void 0 ? 'vertical' : _h, _j = _a.selection, externalSelection = _j === void 0 ? [] : _j, ItemComponent = _a.itemComponentType, onActivateAt = _a.onActivateAt, onDeselectAt = _a.onDeselectAt, onItemCustomEvent = _a.onItemCustomEvent, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, props = __rest(_a, ["className", "style", "data", "selectionMode", "isSelectionTogglable", "itemLength", "itemPadding", "layout", "numSegments", "orientation", "selection", "itemComponentType", "onActivateAt", "onDeselectAt", "onItemCustomEvent", "onSelectAt", "onSelectionChange"]);
     var isIndexOutOfRange = function (index) {
         if (index >= data.length)
             return true;
@@ -95,8 +95,8 @@ exports.default = (0, react_2.forwardRef)(function (_a, ref) {
             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,62 +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 (selectionMode === 'none')
             return;
-        if (prevSelectedIndices === undefined)
+        if (!prevSelection)
             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; });
+        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 = (0, asClassNameDict_1.default)({
-        root: (0, classnames_1.default)(orientation, {
-            togglable: isSelectionTogglable,
-        }),
-        item: (0, classnames_1.default)(orientation, {
-            togglable: isSelectionTogglable,
-        }),
+        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: data }, 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({ pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto' }, idx >= data.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); } })); }))));
+});
+function getFixedClassNames(_a) {
+    var orientation = _a.orientation;
+    return (0, asClassNameDict_1.default)({
+        root: (0, classnames_1.default)(orientation),
     });
-    var fixedStyles = (0, asStyleDict_1.default)({
-        root: {
+}
+function getFixedStyles(_a) {
+    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: __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' ? {
-            width: '100%',
+        } : __assign({ display: 'grid', gap: "".concat(itemPadding, "px") }, orientation === 'vertical' ? {
+            gridAutoRows: itemLength !== undefined ? "".concat(itemLength, "px") : undefined,
+            gridTemplateColumns: "repeat(".concat(numSegments, ", 1fr)"),
+            gridAutoFlow: 'row',
         } : {
-            height: '100%',
-        }),
-    });
-    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, {
-            selected: isSelectedAt(idx),
-        }), style: (0, styles_1.default)(fixedStyles.item, __assign(__assign({ pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto' }, orientation === 'vertical' ? {
+            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,
-            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' ? {
-            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); } })); }))));
-});
+            height: '100%',
+        }) : {}),
+    });
+}
 //# sourceMappingURL=List.js.map

package/lib/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"/","sources":["List.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isDeepEqual from 'fast-deep-equal/react'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type ListItemProps<T> = HTMLAttributes<HTMLElement> & {\n  data: T\n  index: number\n  isSelected: boolean\n  orientation: Orientation\n  onCustomEvent?: (name: string, info?: any) => void\n}\n\nexport type ListProps<T> = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Thickness of item borders (in pixels). 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * Generically typed data of each item.\n   */\n  data: T[]\n\n  /**\n   * Indicates if item selection can be toggled, i.e. they can be deselected if\n   * selected again.\n   */\n  isSelectionTogglable?: boolean\n\n  /**\n   * Optional length (in pixels) of each item. Length refers to the height in\n   * vertical orientation and width in horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding between every item (in pixels).\n   */\n  itemPadding?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * The selected indices. If `selectionMode` is `single`, only only the first\n   * value will be used.\n   */\n  selectedIndices?: number[]\n\n  /**\n   * Indicates the selection behavior:\n   *   - `none`: No selection at all.\n   *   - `single`: Only one item can be selected at a time.\n   *   - `multiple`: Multiple items can be selected at the same time.\n   */\n  selectionMode?: 'none' | 'single' | 'multiple'\n\n  /**\n   * React component type to be used to generate items for this list.\n   */\n  itemComponentType?: ComponentType<ListItemProps<T>>\n\n  /**\n   * Handler invoked when an item is activated.\n   *\n   * @param index Item index.\n   */\n  onActivateAt?: (index: number) => void\n\n  /**\n   * Handler invoked when an item is deselected.\n   *\n   * @param index Item index.\n   */\n  onDeselectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when a custom event is dispatched from the item.\n   *\n   * @param index Index of the item.\n   * @param eventName Name of the dispatched custom event.\n   * @param eventInfo Optional info of the dispatched custom event.\n   */\n  onItemCustomEvent?: (index: number, eventName: string, eventInfo?: any) => void\n\n  /**\n   * Handler invoked when an item is selected.\n   *\n   * @param index Item index.\n   */\n  onSelectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when the selected items changed.\n   *\n   * @param indices Indices of selected items.\n   */\n  onSelectionChange?: (indices: number[]) => void\n}\n\n/**\n * A scrollable list of selectable items. Items are generated based on the\n * provided React component type. The type of data passed to each item is\n * generic. This component supports both horizontal and vertical orientations.\n */\nexport default forwardRef(({\n  className,\n  style,\n  borderThickness = 0,\n  data,\n  selectionMode = 'none',\n  isSelectionTogglable = false,\n  itemLength,\n  itemPadding = 0,\n  orientation = 'vertical',\n  selectedIndices: externalSelectedIndices = [],\n  itemComponentType: ItemComponent,\n  onActivateAt,\n  onDeselectAt,\n  onItemCustomEvent,\n  onSelectAt,\n  onSelectionChange,\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 isSelectedAt = (index: number) => selectedIndices.indexOf(index) >= 0\n\n  const toggleAt = (index: number) => {\n    if (isSelectedAt(index)) {\n      deselectAt(index)\n    }\n    else {\n      selectAt(index)\n    }\n  }\n\n  const selectAt = (index: number) => {\n    if (isSelectedAt(index)) return\n\n    switch (selectionMode) {\n      case 'multiple':\n        setSelectedIndices(prev => [...prev.filter(t => t !== index), index].sort())\n\n        break\n      case 'single':\n        setSelectedIndices([index])\n\n        break\n      default:\n        break\n    }\n  }\n\n  const deselectAt = (index: number) => {\n    if (!isSelectedAt(index)) return\n\n    setSelectedIndices(prev => prev.filter(t => t !== index))\n  }\n\n  const activateAt = (index: number) => {\n    if (selectionMode !== 'none') {\n      if (isSelectionTogglable) {\n        toggleAt(index)\n      }\n      else {\n        selectAt(index)\n      }\n    }\n\n    onActivateAt?.(index)\n  }\n\n  const sanitizedExternalSelectedIndices = sanitizeSelectedIndices(externalSelectedIndices)\n  const [selectedIndices, setSelectedIndices] = useState(sanitizedExternalSelectedIndices)\n  const prevSelectedIndices = usePrevious(selectedIndices)\n\n  useEffect(() => {\n    if (isDeepEqual(sanitizedExternalSelectedIndices, selectedIndices)) return\n\n    setSelectedIndices(sanitizedExternalSelectedIndices)\n  }, [JSON.stringify(sanitizedExternalSelectedIndices)])\n\n  useEffect(() => {\n    if (selectionMode === 'none') return\n    if (prevSelectedIndices === undefined) return\n\n    const deselected = prevSelectedIndices?.filter(t => selectedIndices.indexOf(t) === -1) ?? []\n    const selected = selectedIndices.filter(t => prevSelectedIndices?.indexOf(t) === -1)\n\n    deselected.map(t => onDeselectAt?.(t))\n    selected.map(t => onSelectAt?.(t))\n\n    onSelectionChange?.(selectedIndices)\n  }, [JSON.stringify(selectedIndices)])\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isSelectionTogglable,\n    }),\n    item: classNames(orientation, {\n      togglable: isSelectionTogglable,\n    }),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      alignItems: 'flex-start',\n      counterReset: 'item-counter',\n      display: 'flex',\n      flex: '0 0 auto',\n      flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n      justifyContent: 'flex-start',\n      listStyle: 'none',\n    },\n    item: {\n      borderWidth: `${borderThickness}px`,\n      counterIncrement: 'item-counter',\n      flex: '0 0 auto',\n      ...orientation === 'vertical' ? {\n        width: '100%',\n      } : {\n        height: '100%',\n      },\n    },\n  })\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      {ItemComponent && (\n        <Each in={data}>\n          {(val, idx) => (\n            <ItemComponent\n              className={classNames(fixedClassNames.item, {\n                selected: isSelectedAt(idx),\n              })}\n              style={styles(fixedStyles.item, {\n                pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',\n                ...orientation === 'vertical' ? {\n                  height: itemLength !== undefined ? `${itemLength}px` : undefined,\n                  marginTop: `${idx === 0 ? 0 : -borderThickness}px`,\n                } : {\n                  marginLeft: `${idx === 0 ? 0 : -borderThickness}px`,\n                  width: itemLength !== undefined ? `${itemLength}px` : undefined,\n                },\n                ...idx >= data.length - 1 ? {} : {\n                  ...orientation === 'vertical' ? {\n                    marginBottom: `${itemPadding}px`,\n                  } : {\n                    marginRight: `${itemPadding}px`,\n                  },\n                },\n              })}\n              data-index={idx}\n              data={val}\n              index={idx}\n              isSelected={isSelectedAt(idx)}\n              orientation={orientation}\n              onCustomEvent={(name, info) => onItemCustomEvent?.(idx, name, info)}\n              onClick={() => activateAt(idx)}\n            />\n          )}\n        </Each>\n      )}\n    </div>\n  )\n}) as <T>(props: ListProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}
+{"version":3,"file":"List.js","sourceRoot":"/","sources":["List.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport isDeepEqual from 'fast-deep-equal/react'\nimport React, { forwardRef, useEffect, useState, type ComponentType, type HTMLAttributes, type ReactElement, type Ref } from 'react'\nimport Each from './Each'\nimport usePrevious from './hooks/usePrevious'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\nexport type ListOrientation = 'horizontal' | 'vertical'\n\nexport type ListLayout = 'list' | 'grid'\n\nexport type ListSelectionMode = 'none' | 'single' | 'multiple'\n\nexport type ListSelection = number[]\n\nexport type ListItemProps<T> = HTMLAttributes<HTMLElement> & {\n  data: T\n  index: number\n  isSelected: boolean\n  orientation: ListOrientation\n  onCustomEvent?: (name: string, info?: any) => void\n}\n\nexport type ListProps<T> = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Generically typed data of each item.\n   */\n  data: T[]\n\n  /**\n   * Indicates if item selection can be toggled, i.e. they can be deselected if\n   * selected again.\n   */\n  isSelectionTogglable?: boolean\n\n  /**\n   * Optional length (in pixels) of each item. Length refers to the height in\n   * vertical orientation and width in horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding between every item (in pixels).\n   */\n  itemPadding?: number\n\n  /**\n   * Specifies the layout of this component.\n   */\n  layout?: ListLayout\n\n  /**\n   * This property is only used if the layout is set to `grid`. Specifies the\n   * number of columns if orientation is `vertical` or number of rows if\n   * orientation is `horizontal`.\n   */\n  numSegments?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: ListOrientation\n\n  /**\n   * The selected indices. If `selectionMode` is `single`, only only the first\n   * value will be used.\n   */\n  selection?: ListSelection\n\n  /**\n   * Indicates the selection behavior:\n   *   - `none`: No selection at all.\n   *   - `single`: Only one item can be selected at a time.\n   *   - `multiple`: Multiple items can be selected at the same time.\n   */\n  selectionMode?: ListSelectionMode\n\n  /**\n   * React component type to be used to generate items for this list.\n   */\n  itemComponentType?: ComponentType<ListItemProps<T>>\n\n  /**\n   * Handler invoked when an item is activated.\n   *\n   * @param index Item index.\n   */\n  onActivateAt?: (index: number) => void\n\n  /**\n   * Handler invoked when an item is deselected.\n   *\n   * @param index Item index.\n   */\n  onDeselectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when a custom event is dispatched from the item.\n   *\n   * @param index Index of the item.\n   * @param eventName Name of the dispatched custom event.\n   * @param eventInfo Optional info of the dispatched custom event.\n   */\n  onItemCustomEvent?: (index: number, eventName: string, eventInfo?: any) => void\n\n  /**\n   * Handler invoked when an item is selected.\n   *\n   * @param index Item index.\n   */\n  onSelectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when the selected items changed.\n   *\n   * @param selection Indices of selected items.\n   */\n  onSelectionChange?: (selection: ListSelection) => void\n}\n\n/**\n * A scrollable list of selectable items. Items are generated based on the\n * provided React component type. The type of data passed to each item is\n * generic. This component supports both horizontal and vertical orientations.\n */\nexport default forwardRef(({\n  className,\n  style,\n  data,\n  selectionMode = 'none',\n  isSelectionTogglable = false,\n  itemLength = 50,\n  itemPadding = 0,\n  layout = 'list',\n  numSegments = 1,\n  orientation = 'vertical',\n  selection: externalSelection = [],\n  itemComponentType: ItemComponent,\n  onActivateAt,\n  onDeselectAt,\n  onItemCustomEvent,\n  onSelectAt,\n  onSelectionChange,\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 sanitizeSelection = (indices: ListSelection) => indices.sort().filter(t => !isIndexOutOfRange(t))\n\n  const isSelectedAt = (index: number) => selection.indexOf(index) >= 0\n\n  const toggleAt = (index: number) => {\n    if (isSelectedAt(index)) {\n      deselectAt(index)\n    }\n    else {\n      selectAt(index)\n    }\n  }\n\n  const selectAt = (index: number) => {\n    if (isSelectedAt(index)) return\n\n    switch (selectionMode) {\n      case 'multiple':\n        setSelection(prev => [...prev.filter(t => t !== index), index].sort())\n\n        break\n      case 'single':\n        setSelection([index])\n\n        break\n      default:\n        break\n    }\n  }\n\n  const deselectAt = (index: number) => {\n    if (!isSelectedAt(index)) return\n\n    setSelection(prev => prev.filter(t => t !== index))\n  }\n\n  const activateAt = (index: number) => {\n    if (selectionMode !== 'none') {\n      if (isSelectionTogglable) {\n        toggleAt(index)\n      }\n      else {\n        selectAt(index)\n      }\n    }\n\n    onActivateAt?.(index)\n  }\n\n  const sanitizedExternalSelection = sanitizeSelection(externalSelection)\n  const [selection, setSelection] = useState(sanitizedExternalSelection)\n  const prevSelection = usePrevious(selection, { sanitizeDependency: JSON.stringify })\n\n  useEffect(() => {\n    if (isDeepEqual(sanitizedExternalSelection, selection)) return\n\n    setSelection(sanitizedExternalSelection)\n  }, [JSON.stringify(sanitizedExternalSelection)])\n\n  useEffect(() => {\n    if (selectionMode === 'none') return\n    if (!prevSelection) return\n\n    const deselected = prevSelection?.filter(t => selection.indexOf(t) === -1) ?? []\n    const selected = selection.filter(t => prevSelection?.indexOf(t) === -1)\n\n    deselected.map(t => onDeselectAt?.(t))\n    selected.map(t => onSelectAt?.(t))\n\n    onSelectionChange?.(selection)\n  }, [JSON.stringify(selection)])\n\n  const fixedClassNames = getFixedClassNames({ orientation })\n  const fixedStyles = getFixedStyles({ itemLength, itemPadding, layout, numSegments, orientation })\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      {ItemComponent && (\n        <Each in={data}>\n          {(val, idx) => (\n            <ItemComponent\n              className={classNames({\n                selected: isSelectedAt(idx),\n              })}\n              style={styles(fixedStyles.item, {\n                pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',\n                ...idx >= data.length - 1 ? {} : {\n                  ...layout === 'list' ? {\n                    ...orientation === 'vertical' ? {\n                      marginBottom: `${itemPadding}px`,\n                    } : {\n                      marginRight: `${itemPadding}px`,\n                    },\n                  } : {},\n                },\n              })}\n              data-index={idx}\n              data={val}\n              index={idx}\n              isSelected={isSelectedAt(idx)}\n              orientation={orientation}\n              onCustomEvent={(name, info) => onItemCustomEvent?.(idx, name, info)}\n              onClick={() => activateAt(idx)}\n            />\n          )}\n        </Each>\n      )}\n    </div>\n  )\n}) as <T>(props: ListProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\ntype StylesProps = {\n  itemLength?: number\n  itemPadding?: number\n  layout?: ListLayout\n  numSegments?: number\n  orientation?: ListOrientation\n}\n\nfunction getFixedClassNames({ orientation }: StylesProps) {\n  return asClassNameDict({\n    root: classNames(orientation),\n  })\n}\n\nfunction getFixedStyles({ itemLength, itemPadding = 0, layout, numSegments = 1, orientation }: StylesProps) {\n  return asStyleDict({\n    root: {\n      counterReset: 'item-counter',\n      listStyle: 'none',\n      ...layout === 'list' ? {\n        alignItems: 'flex-start',\n        display: 'flex',\n        flex: '0 0 auto',\n        flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n        justifyContent: 'flex-start',\n      } : {\n        display: 'grid',\n        gap: `${itemPadding}px`,\n        ...orientation === 'vertical' ? {\n          gridAutoRows: itemLength !== undefined ? `${itemLength}px` : undefined,\n          gridTemplateColumns: `repeat(${numSegments}, 1fr)`,\n          gridAutoFlow: 'row',\n        } : {\n          gridAutoColumns: itemLength !== undefined ? `${itemLength}px` : undefined,\n          gridTemplateRows: `repeat(${numSegments}, 1fr)`,\n          gridAutoFlow: 'column',\n        },\n      },\n    },\n    item: {\n      border: 'none',\n      counterIncrement: 'item-counter',\n      flex: '0 0 auto',\n      ...layout === 'list' ? {\n        ...orientation === 'vertical' ? {\n          width: '100%',\n          height: itemLength !== undefined ? `${itemLength}px` : undefined,\n        } : {\n          width: itemLength !== undefined ? `${itemLength}px` : undefined,\n          height: '100%',\n        },\n      } : {},\n    },\n  })\n}\n"]}

package/lib/hooks/usePrevious.d.ts

@@ -1,6 +1,19 @@
+type Options<T> = {
+    /**
+     * Function to transform the dependency value in the dependency list, useful
+     * if the value is a reference.
+     *
+     * @param dependency The dependency value.
+     *
+     * @returns The transformed value to be used as the dependency value instead.
+     */
+    sanitizeDependency?: (dependency: T) => any;
+};
 /**
- * Returns the previous value of a state or prop.
+ * Returns the previous value of a value.
  *
- * @param stateOrProp The state or prop.
+ * @param value The value.
+ * @param options See {@link Options}.
  */
-export default function usePrevious<T>(stateOrProp: T): T | undefined;
+export default function usePrevious<T>(value: T, { sanitizeDependency }?: Options<T>): T | undefined;
+export {};

package/lib/hooks/usePrevious.js

@@ -2,15 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 /**
- * Returns the previous value of a state or prop.
+ * Returns the previous value of a value.
  *
- * @param stateOrProp The state or prop.
+ * @param value The value.
+ * @param options See {@link Options}.
  */
-function usePrevious(stateOrProp) {
+function usePrevious(value, _a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.sanitizeDependency, sanitizeDependency = _c === void 0 ? function (t) { return t; } : _c;
     var ref = (0, react_1.useRef)();
     (0, react_1.useEffect)(function () {
-        ref.current = stateOrProp;
-    }, [stateOrProp]);
+        ref.current = value;
+    }, [sanitizeDependency(value)]);
     return ref.current;
 }
 exports.default = usePrevious;

package/lib/hooks/usePrevious.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePrevious.js","sourceRoot":"/","sources":["hooks/usePrevious.ts"],"names":[],"mappings":";;AAAA,+BAAyC;AAEzC;;;;GAIG;AACH,SAAwB,WAAW,CAAI,WAAc;IACnD,IAAM,GAAG,GAAG,IAAA,cAAM,GAAK,CAAA;IAEvB,IAAA,iBAAS,EAAC;QACR,GAAG,CAAC,OAAO,GAAG,WAAW,CAAA;IAC3B,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,OAAO,GAAG,CAAC,OAAO,CAAA;AACpB,CAAC;AARD,8BAQC","sourcesContent":["import { useEffect, useRef } from 'react'\n\n/**\n * Returns the previous value of a state or prop.\n *\n * @param stateOrProp The state or prop.\n */\nexport default function usePrevious<T>(stateOrProp: T): T | undefined {\n  const ref = useRef<T>()\n\n  useEffect(() => {\n    ref.current = stateOrProp\n  }, [stateOrProp])\n\n  return ref.current\n}\n"]}
+{"version":3,"file":"usePrevious.js","sourceRoot":"/","sources":["hooks/usePrevious.ts"],"names":[],"mappings":";;AAAA,+BAAyC;AAczC;;;;;GAKG;AACH,SAAwB,WAAW,CAAI,KAAQ,EAAE,EAAgD;QAAhD,qBAA8C,EAAE,KAAA,EAA9C,0BAA2B,EAA3B,kBAAkB,mBAAG,UAAA,CAAC,IAAI,OAAA,CAAC,EAAD,CAAC,KAAA;IAC5E,IAAM,GAAG,GAAG,IAAA,cAAM,GAAK,CAAA;IAEvB,IAAA,iBAAS,EAAC;QACR,GAAG,CAAC,OAAO,GAAG,KAAK,CAAA;IACrB,CAAC,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAE/B,OAAO,GAAG,CAAC,OAAO,CAAA;AACpB,CAAC;AARD,8BAQC","sourcesContent":["import { useEffect, useRef } from 'react'\n\ntype Options<T> = {\n  /**\n   * Function to transform the dependency value in the dependency list, useful\n   * if the value is a reference.\n   *\n   * @param dependency The dependency value.\n   *\n   * @returns The transformed value to be used as the dependency value instead.\n   */\n  sanitizeDependency?: (dependency: T) => any\n}\n\n/**\n * Returns the previous value of a value.\n *\n * @param value The value.\n * @param options See {@link Options}.\n */\nexport default function usePrevious<T>(value: T, { sanitizeDependency = t => t }: Options<T> = {}): T | undefined {\n  const ref = useRef<T>()\n\n  useEffect(() => {\n    ref.current = value\n  }, [sanitizeDependency(value)])\n\n  return ref.current\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "A study of headless React components",
   "main": "lib",
   "scripts": {
@@ -29,29 +29,29 @@
     "lib"
   ],
   "devDependencies": {
-    "@babel/core": "^7.22.19",
+    "@babel/core": "^7.22.20",
     "@babel/plugin-transform-runtime": "^7.22.15",
-    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
     "@types/debug": "^4.1.8",
-    "@types/html-webpack-plugin": "^3.2.6",
+    "@types/html-webpack-plugin": "^3.2.7",
     "@types/node-polyglot": "^2.4.2",
-    "@types/react": "^18.2.21",
+    "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "@types/react-transition-group": "^4.4.6",
     "@types/styled-components": "^5.1.27",
     "@types/webpack": "^5.28.2",
     "@types/webpack-env": "^1.18.1",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
     "babel-loader": "^9.1.3",
     "babel-plugin-styled-components": "^2.1.4",
     "concurrently": "^8.2.1",
     "cross-env": "^7.0.3",
     "debug": "^4.3.4",
     "eslint": "^8.49.0",
-    "fast-xml-parser": "^4.2.7",
+    "fast-xml-parser": "^4.3.0",
     "html-webpack-plugin": "^5.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -69,7 +69,7 @@
   "dependencies": {
     "classnames": "^2.3.2",
     "fast-deep-equal": "^3.1.3",
-    "interactjs": "^1.10.18",
+    "interactjs": "^1.10.19",
     "react-transition-group": "^4.4.5",
     "resize-observer-polyfill": "^1.5.1",
     "spase": "^7.0.0"
@@ -78,7 +78,7 @@
     "react": "^18.2.0"
   },
   "optionalDependencies": {
-    "fast-xml-parser": "^4.2.7",
+    "fast-xml-parser": "^4.3.0",
     "react-router": "^6.16.0",
     "react-router-dom": "^6.16.0"
   }