etudes 1.2.0 → 2.0.0

package/lib/utils/cloneStyledElement.js

@@ -0,0 +1,63 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+function cloneStyledElement(element, props) {
+    var _a, _b;
+    if (props === void 0) { props = {}; }
+    var children = [];
+    for (var _i = 2; _i < arguments.length; _i++) {
+        children[_i - 2] = arguments[_i];
+    }
+    var _c = props, className = _c.className, style = _c.style, otherProps = __rest(_c, ["className", "style"]);
+    var elementProps = element.props;
+    return react_1.cloneElement.apply(void 0, __spreadArray([element, __assign({ className: "".concat((_a = elementProps.className) !== null && _a !== void 0 ? _a : '', " ").concat(className !== null && className !== void 0 ? className : '').split(' ').filter(Boolean).join(' '), style: __assign(__assign({}, (_b = elementProps.style) !== null && _b !== void 0 ? _b : {}), style !== null && style !== void 0 ? style : {}) }, otherProps)], __read(children), false));
+}
+exports.default = cloneStyledElement;
+//# sourceMappingURL=cloneStyledElement.js.map

package/lib/utils/cloneStyledElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cloneStyledElement.js","sourceRoot":"/","sources":["utils/cloneStyledElement.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAyJ;AAkBzJ,SAAS,kBAAkB,CACzB,OAAuE,EACvE,KAAqE;;IAArE,sBAAA,EAAA,UAAqE;IACrE,kBAAwB;SAAxB,UAAwB,EAAxB,qBAAwB,EAAxB,IAAwB;QAAxB,iCAAwB;;IAExB,IAAM,KAAsC,KAAY,EAAhD,SAAS,eAAA,EAAE,KAAK,WAAA,EAAK,UAAU,cAAjC,sBAAmC,CAAe,CAAA;IACxD,IAAM,YAAY,GAAG,OAAO,CAAC,KAAY,CAAA;IAEzC,OAAO,oBAAY,8BAAC,OAAO,EAAE,WAC3B,SAAS,EAAE,UAAG,MAAA,YAAY,CAAC,SAAS,mCAAI,EAAE,cAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACpG,KAAK,wBACA,MAAA,YAAY,CAAC,KAAK,mCAAI,EAAE,GACxB,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,KAEb,UAAU,CACP,UAAK,QAAQ,WAAC;AACxB,CAAC;AAED,kBAAe,kBAAkB,CAAA","sourcesContent":["import { Attributes, CElement, ClassAttributes, cloneElement, Component, ComponentState, FunctionComponentElement, ReactElement, ReactNode } from 'react'\n\n/**\n * Wrapper for {@link cloneElement} but instead of overwriting `className` and\n * `style` of the cloned element with the values specified in the `props`\n * argument, they are merged instead.\n *\n * @param element - The target element to clone.\n * @param props - The props to apply to the cloned element. Overlapping props\n *                are overwritten with the exception of `className` and `style`,\n *                which are merged.\n * @param children - Optional child elements add into the cloned element.\n *\n * @returns The cloned element.\n */\nfunction cloneStyledElement<P>(element: FunctionComponentElement<P>, props?: Partial<P> & Attributes, ...children: ReactNode[]): FunctionComponentElement<P>\nfunction cloneStyledElement<P, T extends Component<P, ComponentState>>(element: CElement<P, T>, props?: Partial<P> & ClassAttributes<T>, ...children: ReactNode[]): CElement<P, T>\nfunction cloneStyledElement<P>(element: ReactElement<P>, props?: Partial<P> & Attributes, ...children: ReactNode[]): ReactElement<P>\nfunction cloneStyledElement<P, T extends Component<P, ComponentState> = never>(\n  element: FunctionComponentElement<P> | CElement<P, T> | ReactElement<P>,\n  props: Partial<P> & Attributes | Partial<P> & ClassAttributes<T> = {},\n  ...children: ReactNode[]\n) {\n  const { className, style, ...otherProps } = props as any\n  const elementProps = element.props as any\n\n  return cloneElement(element, {\n    className: `${elementProps.className ?? ''} ${className ?? ''}`.split(' ').filter(Boolean).join(' '),\n    style: {\n      ...elementProps.style ?? {},\n      ...style ?? {},\n    },\n    ...otherProps,\n  } as any, ...children)\n}\n\nexport default cloneStyledElement\n"]}

package/lib/utils/styles.d.ts

@@ -0,0 +1,2 @@
+import { CSSProperties } from 'react';
+export default function styles(...args: (CSSProperties | undefined | false)[]): CSSProperties;

package/lib/utils/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+function styles() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return args.reduce(function (out, curr) { return (__assign(__assign({}, out), curr || {})); }, {});
+}
+exports.default = styles;
+//# sourceMappingURL=styles.js.map

package/lib/utils/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"/","sources":["utils/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAEA,SAAwB,MAAM;IAAC,cAA8C;SAA9C,UAA8C,EAA9C,qBAA8C,EAA9C,IAA8C;QAA9C,yBAA8C;;IAC3E,OAAO,IAAI,CAAC,MAAM,CAAgB,UAAC,GAAG,EAAE,IAAI,IAAK,OAAA,uBAC5C,GAAG,GACH,IAAI,IAAI,EAAE,EACb,EAH+C,CAG/C,EAAE,EAAE,CAAC,CAAA;AACT,CAAC;AALD,yBAKC","sourcesContent":["import { CSSProperties } from 'react'\n\nexport default function styles(...args: (CSSProperties | undefined | false)[]): CSSProperties {\n  return args.reduce<CSSProperties>((out, curr) => ({\n    ...out,\n    ...curr || {},\n  }), {})\n}\n"]}

package/lib/utils/useDebug.d.ts

@@ -0,0 +1,2 @@
+import debug from 'debug';
+export default function useDebug(subnamespace?: string): debug.Debugger | (() => void);

package/lib/utils/useDebug.js

@@ -0,0 +1,46 @@
+"use strict";
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var debug_1 = __importDefault(require("debug"));
+function useDebug(subnamespace) {
+    if (subnamespace === void 0) { subnamespace = ''; }
+    if (process.env.NODE_ENV === 'development') {
+        var namespace = __spreadArray(['etudes'], __read(subnamespace.split(':').filter(Boolean)), false).join(':');
+        if (typeof window === 'undefined')
+            debug_1.default.enable(namespace);
+        return (0, debug_1.default)(namespace);
+    }
+    else {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        return function () { };
+    }
+}
+exports.default = useDebug;
+//# sourceMappingURL=useDebug.js.map

package/lib/utils/useDebug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebug.js","sourceRoot":"/","sources":["utils/useDebug.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAyB;AAEzB,SAAwB,QAAQ,CAAC,YAAiB;IAAjB,6BAAA,EAAA,iBAAiB;IAChD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE;QAC1C,IAAM,SAAS,GAAG,eAAC,QAAQ,UAAK,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,UAAE,IAAI,CAAC,GAAG,CAAC,CAAA;QAClF,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,eAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;QAE1D,OAAO,IAAA,eAAK,EAAC,SAAS,CAAC,CAAA;KACxB;SACI;QACH,gEAAgE;QAChE,OAAO,cAAO,CAAC,CAAA;KAChB;AACH,CAAC;AAXD,2BAWC","sourcesContent":["import debug from 'debug'\n\nexport default function useDebug(subnamespace = '') {\n  if (process.env.NODE_ENV === 'development') {\n    const namespace = ['etudes', ...subnamespace.split(':').filter(Boolean)].join(':')\n    if (typeof window === 'undefined') debug.enable(namespace)\n\n    return debug(namespace)\n  }\n  else {\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    return () => {}\n  }\n}\n"]}

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "etudes",
-  "version": "1.2.0",
-  "description": "A study of styled React components",
+  "version": "2.0.0",
+  "description": "A study of headless React components",
   "main": "lib",
   "scripts": {
     "clean": "rimraf lib",
     "prebuild": "npm run lint",
     "build": "npm run clean && cross-env NODE_ENV=production tsc",
     "pages": "rimraf .gh-pages && webpack --config demo/config/build.conf.ts",
-    "demo": "npm run clean && concurrently \"cross-env NODE_ENV=production tsc -w\" \"wait-on lib && cross-env NODE_ENV=development webpack-cli serve --mode development --hot --config demo/config/build.conf.ts\"",
+    "demo": "npm run clean && concurrently \"cross-env NODE_ENV=production tsc -w --diagnostics false\" \"wait-on lib && cross-env NODE_ENV=development webpack-cli serve --mode development --hot --config demo/config/build.conf.ts\"",
     "test": "echo \"No tests yet :)\"",
     "lint": "eslint --ext .ts --ext .tsx src demo",
     "lint:fix": "npm run lint -- --fix"
@@ -29,63 +29,55 @@
     "lib"
   ],
   "devDependencies": {
-    "@babel/core": "^7.18.10",
-    "@babel/plugin-transform-runtime": "^7.18.10",
-    "@babel/preset-env": "^7.18.10",
+    "@babel/core": "^7.20.2",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@babel/runtime": "^7.18.9",
     "@types/debug": "^4.1.7",
     "@types/html-webpack-plugin": "^3.2.6",
-    "@types/lodash": "^4.14.182",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
     "@types/react-transition-group": "^4.4.5",
     "@types/styled-components": "^5.1.26",
     "@types/webpack": "^5.28.0",
-    "@types/webpack-env": "^1.17.0",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
-    "babel-loader": "^8.2.5",
+    "@types/webpack-env": "^1.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
+    "babel-loader": "^9.1.0",
     "babel-plugin-styled-components": "^2.0.7",
-    "concurrently": "^7.3.0",
+    "concurrently": "^7.5.0",
     "cross-env": "^7.0.3",
     "debug": "^4.3.4",
-    "eslint": "^8.22.0",
-    "file-loader": "^6.2.0",
+    "eslint": "^8.27.0",
     "html-webpack-plugin": "^5.5.0",
-    "promptu": "^5.9.0",
-    "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0",
+    "react-router": "^6.4.3",
+    "react-router-dom": "^6.4.3",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.5",
-    "ts-loader": "^9.3.1",
+    "styled-components": "^5.3.6",
     "ts-node": "^10.9.1",
-    "typescript": "^4.7.4",
-    "url-loader": "^4.1.1",
+    "typescript": "^4.8.4",
     "wait-on": "^6.0.1",
-    "webpack": "^5.74.0",
+    "webpack": "^5.75.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.10.0"
+    "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
     "dirty-dom": "^7.2.0",
+    "fast-deep-equal": "^3.1.3",
     "interactjs": "^1.10.17",
-    "lodash": "^4.17.21",
     "react-transition-group": "^4.4.5",
     "resize-observer-polyfill": "^1.5.1",
     "spase": "^6.4.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "styled-components": "^5.3.5"
+    "react": "^18.2.0"
   },
   "optionalDependencies": {
-    "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0"
+    "react-router": "^6.4.3",
+    "react-router-dom": "^6.4.3"
   }
 }

package/lib/AbstractSelectableCollection.d.ts

@@ -1,94 +0,0 @@
-import { CSSProperties, PureComponent } from 'react';
-export interface Props {
-    /**
-     * Class attribute of the root element.
-     */
-    className?: string;
-    /**
-     * Inline style attribute of the root element.
-     */
-    style?: CSSProperties;
-    /**
-     * 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.
-     */
-    isTogglable?: boolean;
-    /**
-     * 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.
-     */
-    shouldStaySelected?: boolean;
-    /**
-     * The default selected index. Any value below 0 indicates that nothing is
-     * selected.
-     */
-    defaultSelectedIndex?: number;
-    /**
-     * Handler invoked when an index is deselected.
-     */
-    onDeselectAt?: (index: number) => void;
-    /**
-     * Handler invoked when an index is selected.
-     */
-    onSelectAt?: (index: number) => void;
-}
-export interface State {
-    /**
-     * The current selected index. Any value less than 0 indicates that no index
-     * is selected.
-     */
-    selectedIndex?: number;
-}
-/**
- * An abstract component that mimics and handles index selection in an abstract
- * collection.
- */
-export default class AbstractSelectableCollection<P extends Props = Props, S extends State = State> extends PureComponent<P, S> {
-    constructor(props: P);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: P, prevState: S): void;
-    render(): JSX.Element;
-    /**
-     * Checks if an index is out of range.
-     *
-     * @param index - The index to check.
-     *
-     * @returns `true` if the index is out of range, `false` otherwise.
-     */
-    isIndexOutOfRange(index: number): boolean;
-    /**
-     * Checks if an index is selected.
-     *
-     * @param index - The index to check.
-     *
-     * @returns `true` if the index is selected, `false` otherwise.
-     */
-    isSelectedAt(index: number): boolean;
-    /**
-     * Toggles an index, i.e. reverses its selected state.
-     *
-     * @param index - The index to toggle.
-     */
-    toggleAt(index: number): void;
-    /**
-     * Selects an index.
-     *
-     * @param index - The index to select.
-     */
-    selectAt(index: number): void;
-    /**
-     * Deselects an index if it is currently selected.
-     *
-     * @param index - The index to deselect.
-     */
-    deselectAt(index: number): void;
-    /**
-     * Deselects the currently selected index.
-     */
-    deselectCurrent(): void;
-}

package/lib/AbstractSelectableCollection.js

@@ -1,151 +0,0 @@
-"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:asc') : function () { };
-/**
- * An abstract component that mimics and handles index selection in an abstract
- * collection.
- */
-var AbstractSelectableCollection = /** @class */ (function (_super) {
-    __extends(AbstractSelectableCollection, _super);
-    function AbstractSelectableCollection(props) {
-        var _this = this;
-        var _a;
-        _this = _super.call(this, props) || this;
-        _this.state = {
-            selectedIndex: (_a = _this.props.defaultSelectedIndex) !== null && _a !== void 0 ? _a : -1,
-        };
-        return _this;
-    }
-    AbstractSelectableCollection.prototype.componentDidMount = function () {
-        var _a, _b, _c;
-        if (this.state.selectedIndex !== undefined && this.state.selectedIndex > -1) {
-            (_b = (_a = this.props).onSelectAt) === null || _b === void 0 ? void 0 : _b.call(_a, (_c = this.state.selectedIndex) !== null && _c !== void 0 ? _c : -1);
-        }
-    };
-    AbstractSelectableCollection.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a, _b;
-        var _c = this.props, shouldStaySelected = _c.shouldStaySelected, onSelectAt = _c.onSelectAt, onDeselectAt = _c.onDeselectAt;
-        var prevSelectedIndex = (_a = prevState.selectedIndex) !== null && _a !== void 0 ? _a : -1;
-        var selectedIndex = (_b = this.state.selectedIndex) !== null && _b !== void 0 ? _b : -1;
-        if (prevState.selectedIndex !== selectedIndex) {
-            debug("Selected index changed: ".concat(selectedIndex));
-            if (shouldStaySelected === true) {
-                if (!this.isIndexOutOfRange(prevSelectedIndex))
-                    onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(prevSelectedIndex);
-                if (!this.isIndexOutOfRange(selectedIndex))
-                    onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(selectedIndex);
-            }
-        }
-    };
-    AbstractSelectableCollection.prototype.render = function () {
-        return react_1.default.createElement(react_1.Fragment, null);
-    };
-    /**
-     * Checks if an index is out of range.
-     *
-     * @param index - The index to check.
-     *
-     * @returns `true` if the index is out of range, `false` otherwise.
-     */
-    AbstractSelectableCollection.prototype.isIndexOutOfRange = function (index) {
-        if (index < 0)
-            return true;
-        return false;
-    };
-    /**
-     * Checks if an index is selected.
-     *
-     * @param index - The index to check.
-     *
-     * @returns `true` if the index is selected, `false` otherwise.
-     */
-    AbstractSelectableCollection.prototype.isSelectedAt = function (index) {
-        return (this.state.selectedIndex === index);
-    };
-    /**
-     * Toggles an index, i.e. reverses its selected state.
-     *
-     * @param index - The index to toggle.
-     */
-    AbstractSelectableCollection.prototype.toggleAt = function (index) {
-        if (this.props.isTogglable === true && this.isSelectedAt(index)) {
-            this.deselectAt(index);
-        }
-        else {
-            this.selectAt(index);
-        }
-    };
-    /**
-     * Selects an index.
-     *
-     * @param index - The index to select.
-     */
-    AbstractSelectableCollection.prototype.selectAt = function (index) {
-        if (this.props.shouldStaySelected === true) {
-            if (this.isSelectedAt(index))
-                return;
-            this.setState({ selectedIndex: index });
-        }
-        else if (this.props.onSelectAt) {
-            this.props.onSelectAt(index);
-        }
-    };
-    /**
-     * Deselects an index if it is currently selected.
-     *
-     * @param index - The index to deselect.
-     */
-    AbstractSelectableCollection.prototype.deselectAt = function (index) {
-        if (!this.isSelectedAt(index))
-            return;
-        this.setState({ selectedIndex: -1 });
-    };
-    /**
-     * Deselects the currently selected index.
-     */
-    AbstractSelectableCollection.prototype.deselectCurrent = function () {
-        this.setState({ selectedIndex: -1 });
-    };
-    return AbstractSelectableCollection;
-}(react_1.PureComponent));
-exports.default = AbstractSelectableCollection;
-//# sourceMappingURL=AbstractSelectableCollection.js.map

package/lib/AbstractSelectableCollection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AbstractSelectableCollection.js","sourceRoot":"/","sources":["AbstractSelectableCollection.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { CSSProperties, Fragment, PureComponent } from 'react'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:asc') : () => {}\n\nexport interface Props {\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   * Indicates whether selections can be toggled. For example, in the case of\n   * a vertical list of selectable rows, being able to toggle a row means it\n   * gets deselected when selected again. Being unable to toggle the row means\n   * it does not get deselected when selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Indicates whether selections are retained. For example, in the case of\n   * a 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  shouldStaySelected?: boolean\n\n  /**\n   * The default selected index. Any value below 0 indicates that nothing is\n   * selected.\n   */\n  defaultSelectedIndex?: number\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\nexport interface State {\n  /**\n   * The current selected index. Any value less than 0 indicates that no index\n   * is selected.\n   */\n  selectedIndex?: number\n}\n\n/**\n * An abstract component that mimics and handles index selection in an abstract\n * collection.\n */\nexport default class AbstractSelectableCollection<P extends Props = Props, S extends State = State> extends PureComponent<P, S> {\n  constructor(props: P) {\n    super(props)\n\n    this.state = {\n      selectedIndex: this.props.defaultSelectedIndex ?? -1,\n    } as any\n  }\n\n  componentDidMount() {\n    if (this.state.selectedIndex !== undefined && this.state.selectedIndex > -1) {\n      this.props.onSelectAt?.(this.state.selectedIndex ?? -1)\n    }\n  }\n\n  componentDidUpdate(prevProps: P, prevState: S) {\n    const { shouldStaySelected, onSelectAt, onDeselectAt } = this.props\n    const prevSelectedIndex = prevState.selectedIndex ?? -1\n    const selectedIndex = this.state.selectedIndex ?? -1\n\n    if (prevState.selectedIndex !== selectedIndex) {\n      debug(`Selected index changed: ${selectedIndex}`)\n\n      if (shouldStaySelected === true) {\n        if (!this.isIndexOutOfRange(prevSelectedIndex)) onDeselectAt?.(prevSelectedIndex)\n        if (!this.isIndexOutOfRange(selectedIndex)) onSelectAt?.(selectedIndex)\n      }\n    }\n  }\n\n  render() {\n    return <Fragment/>\n  }\n\n  /**\n   * Checks if an index is out of range.\n   *\n   * @param index - The index to check.\n   *\n   * @returns `true` if the index is out of range, `false` otherwise.\n   */\n  isIndexOutOfRange(index: number): boolean {\n    if (index < 0) return true\n    return false\n  }\n\n  /**\n   * Checks if an index is selected.\n   *\n   * @param index - The index to check.\n   *\n   * @returns `true` if the index is selected, `false` otherwise.\n   */\n  isSelectedAt(index: number): boolean {\n    return (this.state.selectedIndex === index)\n  }\n\n  /**\n   * Toggles an index, i.e. reverses its selected state.\n   *\n   * @param index - The index to toggle.\n   */\n  toggleAt(index: number) {\n    if (this.props.isTogglable === true && this.isSelectedAt(index)) {\n      this.deselectAt(index)\n    }\n    else {\n      this.selectAt(index)\n    }\n  }\n\n  /**\n   * Selects an index.\n   *\n   * @param index - The index to select.\n   */\n  selectAt(index: number) {\n    if (this.props.shouldStaySelected === true) {\n      if (this.isSelectedAt(index)) return\n      this.setState({ selectedIndex: index })\n    }\n    else if (this.props.onSelectAt) {\n      this.props.onSelectAt(index)\n    }\n  }\n\n  /**\n   * Deselects an index if it is currently selected.\n   *\n   * @param index - The index to deselect.\n   */\n  deselectAt(index: number) {\n    if (!this.isSelectedAt(index)) return\n    this.setState({ selectedIndex: -1 })\n  }\n\n  /**\n   * Deselects the currently selected index.\n   */\n  deselectCurrent() {\n    this.setState({ selectedIndex: -1 })\n  }\n}\n"]}

package/lib/types/index.d.ts

@@ -1,7 +0,0 @@
-import { FlattenSimpleInterpolation } from 'styled-components';
-export declare type ExtendedCSSFunction<P = Record<string, never>> = (props: P) => FlattenSimpleInterpolation;
-export declare type ExtendedCSSProps<P = Record<string, never>> = Readonly<{
-    extendedCSS: ExtendedCSSFunction<P>;
-}>;
-export declare type Range = Readonly<[number, number]>;
-export declare type Orientation = 'horizontal' | 'vertical';

package/lib/types/index.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=index.js.map

package/lib/types/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"/","sources":["types/index.ts"],"names":[],"mappings":"","sourcesContent":["import { FlattenSimpleInterpolation } from 'styled-components'\n\nexport type ExtendedCSSFunction<P = Record<string, never>> = (props: P) => FlattenSimpleInterpolation\n\nexport type ExtendedCSSProps<P = Record<string, never>> = Readonly<{ extendedCSS: ExtendedCSSFunction<P> }>\n\nexport type Range = Readonly<[number, number]>\n\nexport type Orientation = 'horizontal' | 'vertical'\n"]}