etudes 1.2.0 → 2.0.0

package/lib/List.d.ts

@@ -1,89 +1,132 @@
-import { ComponentType, CSSProperties } from 'react';
-import AbstractSelectableCollection, { Props as AbstractSelectableCollectionProps } from './AbstractSelectableCollection';
-import { Orientation } from './types';
-/**
- * Interface defining the props of the item component type to be provided to the
- * list. The data type is generic.
- */
-export interface ItemComponentProps<T = Record<string, never>> {
+import React, { ComponentType, HTMLAttributes, ReactElement, Ref } from 'react';
+declare type Orientation = 'horizontal' | 'vertical';
+export declare type ListItemProps<T> = HTMLAttributes<HTMLElement> & {
+    data: T;
+    index: number;
+    isSelected: boolean;
+    orientation: Orientation;
+};
+export declare type ListProps<T> = HTMLAttributes<HTMLDivElement> & {
     /**
-     * Class attribute of the root element.
+     * Thickness of item borders (in pixels). 0 indicates no borders.
      */
-    className?: string;
+    borderThickness?: number;
     /**
-     * Inline style attribute of the root element.
+     * Generically typed data of each item.
      */
-    style: CSSProperties;
+    data: T[];
     /**
-     * Data passed to the item component.
+     * The selected index. Any value below 0 indicates that nothing is
+     * selected.
      */
-    data: T;
+    selectedIndex?: number;
+    /**
+     * React component type to be used to generate items for this list.
+     */
+    itemComponentType?: ComponentType<ListItemProps<T>>;
+    /**
+     * Optional length of each item.
+     */
+    itemLength?: number;
+    /**
+     * Padding between every item (in pixels).
+     */
+    itemPadding?: number;
+    /**
+     * Indicates whether selections are retained. For example, in the case of a
+     * vertical list of clickable rows, being able to retain a selection means
+     * when the row is clicked, it becomes and stays selected. Being unable to
+     * retain a selection means when the row is clicked, it does not become
+     * selected. It is simply clicked and the subsequent event is dispatched.
+     */
+    isSelectable?: boolean;
     /**
-     * Indicates if the item is selected.
+     * Indicates whether selections can be toggled. For example, in the case of a
+     * vertical list of selectable rows, being able to toggle a row means it gets
+     * deselected when selected again. Being unable to toggle the row means it
+     * does not get deselected when selected again.
      */
-    isSelected?: boolean;
+    isTogglable?: boolean;
     /**
      * Orientation of the list.
      */
-    orientation: Orientation;
+    orientation?: Orientation;
+    /**
+     * Handler invoked when an index is activated.
+     */
+    onActivate?: (index: number) => void;
     /**
-     * Handler invoked when the item is clicked.
+     * Handler invoked when an index is deselected.
      */
-    onClick?: () => void;
-}
-export interface Props<T = Record<string, never>> extends AbstractSelectableCollectionProps {
+    onDeselectAt?: (index: number) => void;
+    /**
+     * Handler invoked when an index is selected.
+     */
+    onSelectAt?: (index: number) => void;
+};
+/**
+ * A scrollable list of selectable items. Items are generated based on the
+ * provided React component type. The type of data passed to each item is
+ * 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[];
     /**
-     * Maximum length (in pixels) of this component. The definition of length here
-     * is dependent on the orientation of the component. If the orientation is
-     * horizontal, length means width. If the orientation is vertical, length
-     * means height. If specified, the length will be capped at this value and the
-     * component becomes scrollable.
+     * The selected index. Any value below 0 indicates that nothing is
+     * selected.
      */
-    maxLength?: number;
+    selectedIndex?: number | undefined;
     /**
-     * Padding between every item (in pixels).
+     * React component type to be used to generate items for this list.
      */
-    itemPadding?: number;
+    itemComponentType?: React.ComponentType<ListItemProps<T>> | undefined;
     /**
-     * Thickness of item borders (in pixels). 0 indicates no borders.
+     * Optional length of each item.
      */
-    borderThickness?: number;
+    itemLength?: number | undefined;
     /**
-     * Orientation of the list.
+     * Padding between every item (in pixels).
      */
-    orientation?: Orientation;
+    itemPadding?: number | undefined;
     /**
-     * Color of item borders.
+     * Indicates whether selections are retained. For example, in the case of a
+     * vertical list of clickable rows, being able to retain a selection means
+     * when the row is clicked, it becomes and stays selected. Being unable to
+     * retain a selection means when the row is clicked, it does not become
+     * selected. It is simply clicked and the subsequent event is dispatched.
      */
-    borderColor?: string;
+    isSelectable?: boolean | undefined;
     /**
-     * React component type to be used to generate items for this list.
+     * Indicates whether selections can be toggled. For example, in the case of a
+     * vertical list of selectable rows, being able to toggle a row means it gets
+     * deselected when selected again. Being unable to toggle the row means it
+     * does not get deselected when selected again.
      */
-    itemComponentType: ComponentType<ItemComponentProps<T>>;
+    isTogglable?: boolean | undefined;
     /**
-     * Class attribute of the root element of the item component.
+     * Orientation of the list.
      */
-    itemClassName?: string;
+    orientation?: Orientation | undefined;
     /**
-     * Inline style attribute of the root element of the item component.
+     * Handler invoked when an index is activated.
      */
-    itemStyle?: CSSProperties;
+    onActivate?: ((index: number) => void) | undefined;
     /**
-     * Padding (in pixels) between the items and the scrollbar. Note that this is
-     * unused if there is no scrollbar (i.e. max length is not specified).
+     * Handler invoked when an index is deselected.
      */
-    scrollBarPadding?: number;
-}
-/**
- * A scrollable list of selectable items. Items are generated based on the
- * provided React component type. The type of data passed to each item is
- * generic. This component supports both horizontal and vertical orientations.
- */
-export default class List<T = Record<string, never>> extends AbstractSelectableCollection<Props<T>> {
-    render(): JSX.Element;
-    isIndexOutOfRange(index: number): boolean;
-}
+    onDeselectAt?: ((index: number) => void) | undefined;
+    /**
+     * Handler invoked when an index is selected.
+     */
+    onSelectAt?: ((index: number) => void) | undefined;
+} & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}) => ReactElement;
+export default _default;

package/lib/List.js

@@ -1,23 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -52,59 +33,139 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
-var AbstractSelectableCollection_1 = __importDefault(require("./AbstractSelectableCollection"));
+var classnames_1 = __importDefault(require("classnames"));
+var react_1 = __importStar(require("react"));
+var Each_1 = __importDefault(require("./Each"));
+var usePrevious_1 = __importDefault(require("./hooks/usePrevious"));
+var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
+var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
+var styles_1 = __importDefault(require("./utils/styles"));
 /**
  * A scrollable list of selectable items. Items are generated based on the
  * provided React component type. The type of data passed to each item is
  * generic. This component supports both horizontal and vertical orientations.
  */
-var List = /** @class */ (function (_super) {
-    __extends(List, _super);
-    function List() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    List.prototype.render = function () {
-        var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g;
-        var ItemComponentType = this.props.itemComponentType;
-        var borderColor = (_a = this.props.borderColor) !== null && _a !== void 0 ? _a : '#000';
-        var borderThickness = (_b = this.props.borderThickness) !== null && _b !== void 0 ? _b : 0;
-        var maxLength = (_c = this.props.maxLength) !== null && _c !== void 0 ? _c : -1;
-        var scrollBarPadding = maxLength < 0 ? 0 : ((_d = this.props.scrollBarPadding) !== null && _d !== void 0 ? _d : 0);
-        var orientation = (_e = this.props.orientation) !== null && _e !== void 0 ? _e : 'vertical';
-        return (react_1.default.createElement(StyledRoot, { className: this.props.className, orientation: orientation, itemPadding: (_f = this.props.itemPadding) !== null && _f !== void 0 ? _f : 0, style: __assign(__assign({}, (_g = this.props.style) !== null && _g !== void 0 ? _g : {}), (maxLength < 0 ? {} : (orientation === 'vertical' ? {
-                height: "".concat(maxLength, "px"),
-                overflowY: 'scroll',
-                paddingRight: "".concat(scrollBarPadding, "px"),
-                WebkitOverflowScrolling: 'touch',
-            } : {
-                overflowX: 'scroll',
-                paddingBottom: "".concat(scrollBarPadding, "px"),
-                width: "".concat(maxLength, "px"),
-                WebkitOverflowScrolling: 'touch',
-            }))) }, this.props.data.map(function (t, i) {
-            var _a;
-            return (react_1.default.createElement(ItemComponentType, { className: _this.props.itemClassName, data: t, isSelected: _this.isSelectedAt(i), key: "item-".concat(i), onClick: function () { return _this.toggleAt(i); }, orientation: orientation, style: __assign(__assign(__assign({}, (_a = _this.props.itemStyle) !== null && _a !== void 0 ? _a : {}), { borderColor: borderColor, borderWidth: "".concat(borderThickness, "px"), counterIncrement: 'item-counter', pointerEvents: _this.props.isTogglable !== true && _this.isSelectedAt(i) ? 'none' : 'auto' }), (orientation === 'vertical' ? {
-                    marginTop: "".concat(i === 0 ? 0 : -borderThickness, "px"),
-                } : {
-                    marginLeft: "".concat(i === 0 ? 0 : -borderThickness, "px"),
-                })) }));
-        })));
-    };
-    List.prototype.isIndexOutOfRange = function (index) {
-        if (index >= this.props.data.length)
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var className = _a.className, style = _a.style, _b = _a.borderThickness, borderThickness = _b === void 0 ? 0 : _b, data = _a.data, isSelectable = _a.isSelectable, isTogglable = _a.isTogglable, ItemComponentType = _a.itemComponentType, itemLength = _a.itemLength, _c = _a.itemPadding, itemPadding = _c === void 0 ? 0 : _c, _d = _a.orientation, orientation = _d === void 0 ? 'vertical' : _d, _e = _a.selectedIndex, externalSelectedIndex = _e === void 0 ? -1 : _e, onActivate = _a.onActivate, onDeselectAt = _a.onDeselectAt, onSelectAt = _a.onSelectAt, props = __rest(_a, ["className", "style", "borderThickness", "data", "isSelectable", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "orientation", "selectedIndex", "onActivate", "onDeselectAt", "onSelectAt"]);
+    var isIndexOutOfRange = function (index) {
+        if (index >= data.length)
+            return true;
+        if (index < 0)
             return true;
-        return _super.prototype.isIndexOutOfRange.call(this, index);
+        return false;
+    };
+    var isSelectedAt = function (index) { return selectedIndex === index; };
+    var toggleAt = function (index) {
+        if (isSelectedAt(index)) {
+            deselectAt(index);
+        }
+        else {
+            selectAt(index);
+        }
     };
-    return List;
-}(AbstractSelectableCollection_1.default));
-exports.default = List;
-var StyledRoot = styled_components_1.default.ol(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  counter-reset: item-counter;\n  list-style: none;\n  align-items: flex-start;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: ", ";\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  overflow-x: visible;\n  overflow-y: visible;\n  width: ", ";\n  height: ", ";\n\n  > * {\n    flex: 0 0 auto;\n\n    &:not(:last-child) {\n      ", "\n    }\n  }\n"], ["\n  counter-reset: item-counter;\n  list-style: none;\n  align-items: flex-start;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: ", ";\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  overflow-x: visible;\n  overflow-y: visible;\n  width: ", ";\n  height: ", ";\n\n  > * {\n    flex: 0 0 auto;\n\n    &:not(:last-child) {\n      ", "\n    }\n  }\n"])), function (props) { return props.orientation === 'horizontal' ? 'row' : 'column'; }, function (props) { return props.orientation === 'horizontal' ? 'auto' : '100%'; }, function (props) { return props.orientation === 'horizontal' ? '100%' : 'auto'; }, function (props) { return props.orientation === 'horizontal' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        margin-right: ", "px;\n      "], ["\n        margin-right: ", "px;\n      "])), props.itemPadding) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        margin-bottom: ", "px;\n      "], ["\n        margin-bottom: ", "px;\n      "])), props.itemPadding); });
-var templateObject_1, templateObject_2, templateObject_3;
+    var selectAt = function (index) {
+        if (isSelectedAt(index))
+            return;
+        setSelectedIndex(index);
+    };
+    var deselectAt = function (index) {
+        if (!isSelectedAt(index))
+            return;
+        setSelectedIndex(-1);
+    };
+    var onClick = function (index) {
+        if (isSelectable) {
+            if (isTogglable) {
+                toggleAt(index);
+            }
+            else {
+                selectAt(index);
+            }
+        }
+        onActivate === null || onActivate === void 0 ? void 0 : onActivate(index);
+    };
+    var _f = __read((0, react_1.useState)(externalSelectedIndex), 2), selectedIndex = _f[0], setSelectedIndex = _f[1];
+    var prevSelectedIndex = (0, usePrevious_1.default)(selectedIndex);
+    (0, react_1.useEffect)(function () {
+        if (externalSelectedIndex === selectedIndex)
+            return;
+        setSelectedIndex(externalSelectedIndex);
+    }, [externalSelectedIndex]);
+    (0, react_1.useEffect)(function () {
+        if (!isSelectable)
+            return;
+        if (!isIndexOutOfRange(prevSelectedIndex !== null && prevSelectedIndex !== void 0 ? prevSelectedIndex : -1))
+            onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(prevSelectedIndex !== null && prevSelectedIndex !== void 0 ? prevSelectedIndex : -1);
+        if (!isIndexOutOfRange(selectedIndex))
+            onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(selectedIndex);
+    }, [selectedIndex]);
+    var fixedClassNames = (0, asClassNameDict_1.default)({
+        root: (0, classnames_1.default)(orientation, {
+            togglable: isTogglable,
+        }),
+        item: (0, classnames_1.default)(orientation, {
+            togglable: isTogglable,
+        }),
+    });
+    var fixedStyles = (0, asStyleDict_1.default)({
+        root: {
+            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%',
+        } : {
+            height: '100%',
+        }),
+    });
+    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }), ItemComponentType && (react_1.default.createElement(Each_1.default, { in: data }, function (val, idx) { return (react_1.default.createElement(ItemComponentType, { className: (0, classnames_1.default)(fixedClassNames.item, {
+            selected: isSelectedAt(idx),
+        }), style: (0, styles_1.default)(fixedStyles.item, __assign(__assign({ pointerEvents: isTogglable !== 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' ? {
+            marginBottom: "".concat(itemPadding, "px"),
+        } : {
+            marginRight: "".concat(itemPadding, "px"),
+        }))), "data-index": idx, data: val, index: idx, isSelected: isSelectedAt(idx), orientation: orientation, onClick: function () { return onClick(idx); } })); }))));
+});
 //# sourceMappingURL=List.js.map

package/lib/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"/","sources":["List.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA2D;AAC3D,qEAA+C;AAC/C,gGAAyH;AAgGzH;;;;GAIG;AACH;IAA6D,wBAAsC;IAAnG;;IA6DA,CAAC;IA5DC,qBAAM,GAAN;QAAA,iBAsDC;;QArDC,IAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAA;QACtD,IAAM,WAAW,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,mCAAI,MAAM,CAAA;QACpD,IAAM,eAAe,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,eAAe,mCAAI,CAAC,CAAA;QACvD,IAAM,SAAS,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,SAAS,mCAAI,CAAC,CAAC,CAAA;QAC5C,IAAM,gBAAgB,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,CAAC,gBAAgB,mCAAI,CAAC,CAAC,CAAA;QAC/E,IAAM,WAAW,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,mCAAI,UAAU,CAAA;QAExD,OAAO,CACL,8BAAC,UAAU,IACT,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,WAAW,mCAAI,CAAC,EACxC,KAAK,wBACA,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,mCAAI,EAAE,GACtB,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CACvB,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;gBAC3B,MAAM,EAAE,UAAG,SAAS,OAAI;gBACxB,SAAS,EAAE,QAAQ;gBACnB,YAAY,EAAE,UAAG,gBAAgB,OAAI;gBACrC,uBAAuB,EAAE,OAAO;aACjC,CAAC,CAAC,CAAC;gBACF,SAAS,EAAE,QAAQ;gBACnB,aAAa,EAAE,UAAG,gBAAgB,OAAI;gBACtC,KAAK,EAAE,UAAG,SAAS,OAAI;gBACvB,uBAAuB,EAAE,OAAO;aACjC,CACF,CAAC,KAGH,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC;;YAAK,OAAA,CAC7B,8BAAC,iBAAiB,IAChB,SAAS,EAAE,KAAI,CAAC,KAAK,CAAC,aAAa,EACnC,IAAI,EAAE,CAAC,EACP,UAAU,EAAE,KAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAChC,GAAG,EAAE,eAAQ,CAAC,CAAE,EAChB,OAAO,EAAE,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAhB,CAAgB,EAC/B,WAAW,EAAE,WAAW,EACxB,KAAK,iCACA,MAAA,KAAI,CAAC,KAAK,CAAC,SAAS,mCAAI,EAAE,KAC7B,WAAW,aAAA,EACX,WAAW,EAAE,UAAG,eAAe,OAAI,EACnC,gBAAgB,EAAE,cAAc,EAChC,aAAa,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,KAAK,IAAI,IAAI,KAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,KACrF,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;oBAC/B,SAAS,EAAE,UAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,OAAI;iBACjD,CAAC,CAAC,CAAC;oBACF,UAAU,EAAE,UAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,eAAe,OAAI;iBAClD,CAAC,IAEJ,CACH,CAAA;SAAA,CAAC,CACS,CACd,CAAA;IACH,CAAC;IAED,gCAAiB,GAAjB,UAAkB,KAAa;QAC7B,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAA;QAChD,OAAO,iBAAM,iBAAiB,YAAC,KAAK,CAAC,CAAA;IACvC,CAAC;IACH,WAAC;AAAD,CAAC,AA7DD,CAA6D,sCAA4B,GA6DxF;;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,EAAE,sbAG1B,oJAMkB,EAA8D,iHAKvE,EAA6D,eAC5D,EAA6D,uEAMjE,EAID,gBAGN,KAnBmB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAArD,CAAqD,EAKvE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAApD,CAAoD,EAC5D,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAApD,CAAoD,EAMjE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,KAAC,uBAAG,6GAAA,0BACjC,EAAiB,aAClC,KADiB,KAAK,CAAC,WAAW,EACjC,CAAC,KAAC,uBAAG,8GAAA,2BACY,EAAiB,aACnC,KADkB,KAAK,CAAC,WAAW,CACnC,EAJU,CAIV,CAGN,CAAA","sourcesContent":["import React, { ComponentType, CSSProperties } from 'react'\nimport styled, { css } from 'styled-components'\nimport AbstractSelectableCollection, { Props as AbstractSelectableCollectionProps } from './AbstractSelectableCollection'\nimport { Orientation } from './types'\n\n/**\n * Interface defining the props of the item component type to be provided to the\n * list. The data type is generic.\n */\nexport interface ItemComponentProps<T = Record<string, never>> {\n  /**\n   * Class attribute of the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute of the root element.\n   */\n  style: CSSProperties\n\n  /**\n   * Data passed to the item component.\n   */\n  data: T\n\n  /**\n   * Indicates if the item is selected.\n   */\n  isSelected?: boolean\n\n  /**\n   * Orientation of the list.\n   */\n  orientation: Orientation\n\n  /**\n   * Handler invoked when the item is clicked.\n   */\n  onClick?: () => void\n}\n\nexport interface Props<T = Record<string, never>> extends AbstractSelectableCollectionProps {\n  /**\n   * Generically typed data of each item.\n   */\n  data: T[]\n\n  /**\n   * Maximum length (in pixels) of this component. The definition of length here\n   * is dependent on the orientation of the component. If the orientation is\n   * horizontal, length means width. If the orientation is vertical, length\n   * means height. If specified, the length will be capped at this value and the\n   * component becomes scrollable.\n   */\n  maxLength?: number\n\n  /**\n   * Padding between every item (in pixels).\n   */\n  itemPadding?: number\n\n  /**\n   * Thickness of item borders (in pixels). 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * Orientation of the list.\n   */\n  orientation?: Orientation\n\n  /**\n   * Color of item borders.\n   */\n  borderColor?: string\n\n  /**\n   * React component type to be used to generate items for this list.\n   */\n  itemComponentType: ComponentType<ItemComponentProps<T>>\n\n  /**\n   * Class attribute of the root element of the item component.\n   */\n  itemClassName?: string\n\n  /**\n   * Inline style attribute of the root element of the item component.\n   */\n  itemStyle?: CSSProperties\n\n  /**\n   * Padding (in pixels) between the items and the scrollbar. Note that this is\n   * unused if there is no scrollbar (i.e. max length is not specified).\n   */\n  scrollBarPadding?: number\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 class List<T = Record<string, never>> extends AbstractSelectableCollection<Props<T>> {\n  render() {\n    const ItemComponentType = this.props.itemComponentType\n    const borderColor = this.props.borderColor ?? '#000'\n    const borderThickness = this.props.borderThickness ?? 0\n    const maxLength = this.props.maxLength ?? -1\n    const scrollBarPadding = maxLength < 0 ? 0 : (this.props.scrollBarPadding ?? 0)\n    const orientation = this.props.orientation ?? 'vertical'\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={orientation}\n        itemPadding={this.props.itemPadding ?? 0}\n        style={{\n          ...this.props.style ?? {},\n          ...(maxLength < 0 ? {} : (\n            orientation === 'vertical' ? {\n              height: `${maxLength}px`,\n              overflowY: 'scroll',\n              paddingRight: `${scrollBarPadding}px`,\n              WebkitOverflowScrolling: 'touch',\n            } : {\n              overflowX: 'scroll',\n              paddingBottom: `${scrollBarPadding}px`,\n              width: `${maxLength}px`,\n              WebkitOverflowScrolling: 'touch',\n            }\n          )),\n        }}\n      >\n        {this.props.data.map((t, i) => (\n          <ItemComponentType\n            className={this.props.itemClassName}\n            data={t}\n            isSelected={this.isSelectedAt(i)}\n            key={`item-${i}`}\n            onClick={() => this.toggleAt(i)}\n            orientation={orientation}\n            style={{\n              ...this.props.itemStyle ?? {},\n              borderColor,\n              borderWidth: `${borderThickness}px`,\n              counterIncrement: 'item-counter',\n              pointerEvents: this.props.isTogglable !== true && this.isSelectedAt(i) ? 'none' : 'auto',\n              ...(orientation === 'vertical' ? {\n                marginTop: `${i === 0 ? 0 : -borderThickness}px`,\n              } : {\n                marginLeft: `${i === 0 ? 0 : -borderThickness}px`,\n              }),\n            }}\n          />\n        ))}\n      </StyledRoot>\n    )\n  }\n\n  isIndexOutOfRange(index: number): boolean {\n    if (index >= this.props.data.length) return true\n    return super.isIndexOutOfRange(index)\n  }\n}\n\nconst StyledRoot = styled.ol<{\n  itemPadding: number\n  orientation: Props['orientation']\n}>`\n  counter-reset: item-counter;\n  list-style: none;\n  align-items: flex-start;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: ${props => props.orientation === 'horizontal' ? 'row' : 'column'};\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  overflow-x: visible;\n  overflow-y: visible;\n  width: ${props => props.orientation === 'horizontal' ? 'auto' : '100%'};\n  height: ${props => props.orientation === 'horizontal' ? '100%' : 'auto'};\n\n  > * {\n    flex: 0 0 auto;\n\n    &:not(:last-child) {\n      ${props => props.orientation === 'horizontal' ? css`\n        margin-right: ${props.itemPadding}px;\n      ` : css`\n        margin-bottom: ${props.itemPadding}px;\n      `}\n    }\n  }\n`\n"]}
+{"version":3,"file":"List.js","sourceRoot":"/","sources":["List.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { ComponentType, forwardRef, HTMLAttributes, ReactElement, Ref, useEffect, useState } 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}\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   * The selected index. Any value below 0 indicates that nothing is\n   * selected.\n   */\n  selectedIndex?: number\n\n  /**\n   * React component type to be used to generate items for this list.\n   */\n  itemComponentType?: ComponentType<ListItemProps<T>>\n\n  /**\n   * Optional length of each item.\n   */\n  itemLength?: number\n\n  /**\n   * Padding between every item (in pixels).\n   */\n  itemPadding?: number\n\n  /**\n   * Indicates whether selections are retained. For example, in the case of a\n   * vertical list of clickable rows, being able to retain a selection means\n   * when the row is clicked, it becomes and stays selected. Being unable to\n   * retain a selection means when the row is clicked, it does not become\n   * selected. It is simply clicked and the subsequent event is dispatched.\n   */\n  isSelectable?: boolean\n\n  /**\n   * Indicates whether selections can be toggled. For example, in the case of a\n   * vertical list of selectable rows, being able to toggle a row means it gets\n   * deselected when selected again. Being unable to toggle the row means it\n   * does not get deselected when selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Orientation of the list.\n   */\n  orientation?: Orientation\n\n  /**\n   * Handler invoked when an index is activated.\n   */\n  onActivate?: (index: number) => void\n\n  /**\n   * Handler invoked when an index is deselected.\n   */\n  onDeselectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when an index is selected.\n   */\n  onSelectAt?: (index: 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  isSelectable,\n  isTogglable,\n  itemComponentType: ItemComponentType,\n  itemLength,\n  itemPadding = 0,\n  orientation = 'vertical',\n  selectedIndex: externalSelectedIndex = -1,\n  onActivate,\n  onDeselectAt,\n  onSelectAt,\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 isSelectedAt = (index: number) => selectedIndex === index\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    setSelectedIndex(index)\n  }\n\n  const deselectAt = (index: number) => {\n    if (!isSelectedAt(index)) return\n    setSelectedIndex(-1)\n  }\n\n  const onClick = (index: number) => {\n    if (isSelectable) {\n      if (isTogglable) {\n        toggleAt(index)\n      }\n      else {\n        selectAt(index)\n      }\n    }\n\n    onActivate?.(index)\n  }\n\n  const [selectedIndex, setSelectedIndex] = useState(externalSelectedIndex)\n  const prevSelectedIndex = usePrevious(selectedIndex)\n\n  useEffect(() => {\n    if (externalSelectedIndex === selectedIndex) return\n    setSelectedIndex(externalSelectedIndex)\n  }, [externalSelectedIndex])\n\n  useEffect(() => {\n    if (!isSelectable) return\n\n    if (!isIndexOutOfRange(prevSelectedIndex ?? -1)) onDeselectAt?.(prevSelectedIndex ?? -1)\n    if (!isIndexOutOfRange(selectedIndex)) onSelectAt?.(selectedIndex)\n  }, [selectedIndex])\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      togglable: isTogglable,\n    }),\n    item: classNames(orientation, {\n      togglable: isTogglable,\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      {ItemComponentType && (\n        <Each in={data}>\n          {(val, idx) => (\n            <ItemComponentType\n              className={classNames(fixedClassNames.item, {\n                selected: isSelectedAt(idx),\n              })}\n              style={styles(fixedStyles.item, {\n                pointerEvents: isTogglable !== 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              onClick={() => onClick(idx)}\n            />\n          )}\n        </Each>\n      )}\n    </div>\n  )\n}) as <T>(props: ListProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n"]}

package/lib/MasonryGrid.d.ts

@@ -1,6 +1,6 @@
-import { HTMLAttributes } from 'react';
-import { Orientation } from './types';
-export declare type Props = HTMLAttributes<HTMLDivElement> & {
+import React, { HTMLAttributes } from 'react';
+declare type Orientation = 'horizontal' | 'vertical';
+export declare type MasonryGridProps = HTMLAttributes<HTMLDivElement> & {
     areSectionsAligned?: boolean;
     horizontalSpacing?: number;
     isReversed?: boolean;
@@ -9,16 +9,28 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
     verticalSpacing?: number;
 };
 /**
- * This is a React component that arranges all of its immediate children in a masonry grid. Refrain
- * from assigning CSS styles to it via `className` or `style` property, though they are still
- * handled if absolutely necessary. Customize the grid via its supported properties. The grid can be
- * in either vertical or horizontal orientation. The length of every child element *parallel to the
- * direction of the orientation* is automatically set according to the number of sections specified
- * for the grid. This means that in an horizontally oriented grid, the *width* of each child element
- * is automatically set, whereas in a vertically oriented grid the *height* of each child element is
- * automatically set. Additionally, the *number of sections* corresponds to the maximum the number
- * of child elements present in the direction that is parallel to the orientation of the grid.
- * Hence, in a vertically oriented grid, *number of secitons* refers to the *number of rows*,
- * whereas in a horizontally oriented grid, *number of sections* refers to the *number of columns*.
+ * This is a React component that arranges all of its immediate children in a
+ * masonry grid. Refrain from assigning CSS styles to it via `className` or
+ * `style` property, though they are still handled if absolutely necessary.
+ * Customize the grid via its supported properties. The grid can be in either
+ * vertical or horizontal orientation. The length of every child element
+ * *parallel to the direction of the orientation* is automatically set according
+ * to the number of sections specified for the grid. This means that in an
+ * horizontally oriented grid, the *width* of each child element is
+ * automatically set, whereas in a vertically oriented grid the *height* of each
+ * child element is automatically set. Additionally, the *number of sections*
+ * corresponds to the maximum the number of child elements present in the
+ * direction that is parallel to the orientation of the grid. Hence, in a
+ * vertically oriented grid, *number of secitons* refers to the *number of
+ * rows*, whereas in a horizontally oriented grid, *number of sections* refers
+ * to the *number of columns*.
  */
-export default function MasonryGrid({ areSectionsAligned, children, horizontalSpacing, isReversed, orientation, sections, style, verticalSpacing, ...props }: Props): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    areSectionsAligned?: boolean | undefined;
+    horizontalSpacing?: number | undefined;
+    isReversed?: boolean | undefined;
+    orientation?: Orientation | undefined;
+    sections?: number | undefined;
+    verticalSpacing?: number | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;