etudes 0.32.0 → 0.37.0

package/lib/AbstractSelectableCollection.d.ts

@@ -1,25 +1,94 @@
 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

@@ -36,7 +36,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:asc') : function () { };
-var AbstractSelectableCollection = (function (_super) {
+/**
+ * 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 _a;
@@ -70,14 +74,33 @@ var AbstractSelectableCollection = (function (_super) {
     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);
@@ -86,6 +109,11 @@ var AbstractSelectableCollection = (function (_super) {
             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))
@@ -96,11 +124,19 @@ var AbstractSelectableCollection = (function (_super) {
             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 });
     };

package/lib/AbstractSelectableCollection.js.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"file":"AbstractSelectableCollection.js","sourceRoot":"/","sources":["AbstractSelectableCollection.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAqE;AAErE,IAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,cAAO,CAAC,CAAA;AAuDhG;;;GAGG;AACH;IAA4G,gDAAmB;IAC7H,sCAAY,KAAQ;;QAApB,YACE,kBAAM,KAAK,CAAC,SAKb;QAHC,KAAI,CAAC,KAAK,GAAG;YACX,aAAa,EAAE,MAAA,KAAI,CAAC,KAAK,CAAC,oBAAoB,mCAAI,CAAC,CAAC;SAC9C,CAAA;;IACV,CAAC;IAED,wDAAiB,GAAjB;;QACE,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,EAAE;YAC3E,MAAA,MAAA,IAAI,CAAC,KAAK,EAAC,UAAU,mDAAG,MAAA,IAAI,CAAC,KAAK,CAAC,aAAa,mCAAI,CAAC,CAAC,CAAC,CAAA;SACxD;IACH,CAAC;IAED,yDAAkB,GAAlB,UAAmB,SAAY,EAAE,SAAY;;QACrC,IAAA,KAAmD,IAAI,CAAC,KAAK,EAA3D,kBAAkB,wBAAA,EAAE,UAAU,gBAAA,EAAE,YAAY,kBAAe,CAAA;QACnE,IAAM,iBAAiB,GAAG,MAAA,SAAS,CAAC,aAAa,mCAAI,CAAC,CAAC,CAAA;QACvD,IAAM,aAAa,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,aAAa,mCAAI,CAAC,CAAC,CAAA;QAEpD,IAAI,SAAS,CAAC,aAAa,KAAK,aAAa,EAAE;YAC7C,KAAK,CAAC,kCAA2B,aAAa,CAAE,CAAC,CAAA;YAEjD,IAAI,kBAAkB,KAAK,IAAI,EAAE;gBAC/B,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;oBAAE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,iBAAiB,CAAC,CAAA;gBACjF,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,aAAa,CAAC;oBAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,aAAa,CAAC,CAAA;aACxE;SACF;IACH,CAAC;IAED,6CAAM,GAAN;QACE,OAAO,8BAAC,gBAAQ,OAAE,CAAA;IACpB,CAAC;IAED;;;;;;OAMG;IACH,wDAAiB,GAAjB,UAAkB,KAAa;QAC7B,IAAI,KAAK,GAAG,CAAC;YAAE,OAAO,IAAI,CAAA;QAC1B,OAAO,KAAK,CAAA;IACd,CAAC;IAED;;;;;;OAMG;IACH,mDAAY,GAAZ,UAAa,KAAa;QACxB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,KAAK,KAAK,CAAC,CAAA;IAC7C,CAAC;IAED;;;;OAIG;IACH,+CAAQ,GAAR,UAAS,KAAa;QACpB,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE;YAC/D,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;SACvB;aACI;YACH,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;SACrB;IACH,CAAC;IAED;;;;OAIG;IACH,+CAAQ,GAAR,UAAS,KAAa;QACpB,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,IAAI,EAAE;YAC1C,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;gBAAE,OAAM;YACpC,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAA;SACxC;aACI,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YAC9B,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;SAC7B;IACH,CAAC;IAED;;;;OAIG;IACH,iDAAU,GAAV,UAAW,KAAa;QACtB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YAAE,OAAM;QACrC,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAA;IACtC,CAAC;IAED;;OAEG;IACH,sDAAe,GAAf;QACE,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAA;IACtC,CAAC;IACH,mCAAC;AAAD,CAAC,AAtGD,CAA4G,qBAAa,GAsGxH","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/Accordion.d.ts

@@ -1,6 +1,10 @@
 import React, { ComponentType, CSSProperties, PureComponent } from 'react';
 import List, { ItemComponentProps as ListItemComponentProps } from './List';
 import { ExtendedCSSFunction, Orientation } from './types';
+/**
+ * Interface defining the props of the item component type to be provided to the
+ * component. The data type is generic.
+ */
 export declare type ItemComponentProps<T = Record<string, never>> = ListItemComponentProps<T>;
 export declare type SectionHeaderCSSProps = Readonly<{
     borderColor: string;
@@ -17,27 +21,96 @@ export interface SectionProps<T = Record<string, never>> {
     items: T[];
 }
 export interface Props<T = Record<string, never>> {
+    /**
+     * Class attribute to the root element.
+     */
     className?: string;
+    /**
+     * Inline style attribute to the element.
+     */
     style?: CSSProperties;
+    /**
+     * Data provided to each section.
+     */
     data: SectionProps<T>[];
+    /**
+     * Indicates if sections can be toggled, as in, once a section is expanded,
+     * it collapses when being selected again.
+     */
     isTogglable?: boolean;
+    /**
+     * Index of the section that is selected by default. Any value less than 0
+     * indicates that no section is selected by default.
+     */
     defaultSelectedSectionIndex?: number;
+    /**
+     * Length (in pixels) of each item. This does not apply to the section hedaer
+     * itself. Length refers to the height in vertical orientation and width in
+     * horizontal orientation.
+     */
     itemLength?: number;
+    /**
+     * Padding (in pixels) between each item.
+     */
     itemPadding?: number;
+    /**
+     * Padding (in pixels) between each section.
+     */
     sectionPadding?: number;
+    /**
+     * Maximum number of items that are viside when a section expands. When a
+     * value greater than or equal to 0 is specified, only that number of items
+     * will be visible at a time, and a scrollbar will appear to scroll to
+     * remaining items. Any value less than 0 indicates that all items will be
+     * visible when a section expands.
+     */
     maxVisibleItems?: number;
+    /**
+     * Orientation of the component.
+     */
     orientation?: Orientation;
+    /**
+     * Color of the border of every item and the section header itself.
+     */
     borderColor?: string;
+    /**
+     * Thickness of the border (in pixels) of every item and the section header
+     * itself. 0 indicates no borders.
+     */
     borderThickness?: number;
+    /**
+     * SVG markup to be put in the section header as the expand icon.
+     */
     expandIconSvg?: string;
+    /**
+     * React component type to be used for generating items inside the component.
+     */
     itemComponentType: ComponentType<ItemComponentProps<T>>;
+    /**
+     * Handler invoked when the selected item index of any section changes.
+     */
     onItemIndexChange?: (index: number) => void;
+    /**
+     * Handler invoked when the selected section index changes.
+     */
     onSectionIndexChange?: (index: number) => void;
+    /**
+     * Additional CSS to be provided to each section element.
+     */
     sectionCSS?: ExtendedCSSFunction<SectionCSSProps>;
+    /**
+     * Additional CSS to be provided to each section header element.
+     */
     sectionHeaderCSS?: ExtendedCSSFunction<SectionHeaderCSSProps>;
 }
 export interface State {
+    /**
+     * Current selected section index.
+     */
     selectedSectionIndex: number;
+    /**
+     * Current selected item index of the expanded section.
+     */
     selectedItemIndex: number;
 }
 export default class Accordion<T = Record<string, never>> extends PureComponent<Props<T>, State> {

package/lib/Accordion.js

@@ -67,7 +67,7 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var List_1 = __importDefault(require("./List"));
 var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:accordion') : function () { };
-var Accordion = (function (_super) {
+var Accordion = /** @class */ (function (_super) {
     __extends(Accordion, _super);
     function Accordion(props) {
         var _a;

package/lib/BurgerButton.js

@@ -68,7 +68,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var BurgerButton = (function (_super) {
+var BurgerButton = /** @class */ (function (_super) {
     __extends(BurgerButton, _super);
     function BurgerButton(props) {
         var _this = _super.call(this, props) || this;

package/lib/DebugConsole.js

@@ -79,7 +79,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var DebugConsole = (function (_super) {
+var DebugConsole = /** @class */ (function (_super) {
     __extends(DebugConsole, _super);
     function DebugConsole(props) {
         var _this = _super.call(this, props) || this;

package/lib/Dial.d.ts

@@ -0,0 +1,46 @@
+import { HTMLAttributes } from 'react';
+import { CSSProp } from 'styled-components';
+export declare type Props = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Current angle reading of the compass, between 0.0 - 360.0 degrees, inclusive.
+     */
+    angle?: number;
+    /**
+     * Length of the knob along the track expressed in degrees, between 0.0 and 360.0 degrees,
+     * exclusive. If set to 0 or 360, the knob disappears.
+     *
+     * @example Suppose the compass were to be used to control a photosphere of an image that is 1000
+     *          x 500, and the window size is 500 x 500, that would mean the FOV is 500 / 1000 * 360 =
+     *          180 degrees.
+     */
+    knobLength?: number;
+    /**
+     * Radius of the compass.
+     */
+    radius?: number;
+    /**
+     * The thickness of the knob, which is equivalent to the `stroke-width` of the `<path>` element.
+     * Note that this overwrites the `stroke-width` set inside `knobCSS`.
+     */
+    knobThickness?: number;
+    /**
+     * CSS of the knob, which is a `<path>` element.
+     */
+    knobCSS?: CSSProp<any>;
+    /**
+     * The thickness of the circular track, which is equivalent to the `stroke-width` of the
+     * `<circle>` element. Note that this overwrites the `stroke-width` set inside `trackCSS`.
+     */
+    trackThickness?: number;
+    /**
+     * CSS of the track, which is a `<circle>` element.
+     */
+    trackCSS?: CSSProp<any>;
+};
+/**
+ * A circular dial with a knob and a track.
+ *
+ * @requires react
+ * @requires styled-components
+ */
+export default function Dial({ angle, radius, knobLength, knobThickness, knobCSS, trackThickness, trackCSS, style, ...props }: Props): JSX.Element;

package/lib/Dial.js

@@ -0,0 +1,76 @@
+"use strict";
+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++) {
+            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 __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 = __importDefault(require("styled-components"));
+function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
+    var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
+    return {
+        x: centerX + (radius * Math.cos(angleInRadians)),
+        y: centerY + (radius * Math.sin(angleInRadians)),
+    };
+}
+function arcPath(x, y, radius, startAngle, endAngle) {
+    var start = polarToCartesian(x, y, radius, endAngle);
+    var end = polarToCartesian(x, y, radius, startAngle);
+    var largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+    var d = [
+        'M', start.x, start.y,
+        'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,
+    ];
+    return d.join(' ');
+}
+/**
+ * A circular dial with a knob and a track.
+ *
+ * @requires react
+ * @requires styled-components
+ */
+function Dial(_a) {
+    var _b = _a.angle, angle = _b === void 0 ? 0 : _b, _c = _a.radius, radius = _c === void 0 ? 50 : _c, _d = _a.knobLength, knobLength = _d === void 0 ? 30 : _d, _e = _a.knobThickness, knobThickness = _e === void 0 ? 10 : _e, knobCSS = _a.knobCSS, _f = _a.trackThickness, trackThickness = _f === void 0 ? 2 : _f, trackCSS = _a.trackCSS, style = _a.style, props = __rest(_a, ["angle", "radius", "knobLength", "knobThickness", "knobCSS", "trackThickness", "trackCSS", "style"]);
+    var diameter = radius * 2;
+    var clampedKnobAngle = Math.max(0, Math.min(360, knobLength));
+    return (react_1.default.createElement(StyledRoot, __assign({ style: __assign(__assign({}, style), { width: "".concat(diameter, "px"), height: "".concat(diameter, "px") }) }, props),
+        react_1.default.createElement(StyledTrack, null,
+            react_1.default.createElement("svg", { width: diameter, height: diameter, viewBox: "0 0 ".concat(diameter, " ").concat(diameter) },
+                react_1.default.createElement(StyledTrackCircle, { cx: radius, cy: radius, r: radius - trackThickness / 2, css: trackCSS, strokeWidth: trackThickness }))),
+        react_1.default.createElement(StyledKnob, { style: { transform: "rotate(".concat((angle + 360) % 360, "deg)") } },
+            react_1.default.createElement("svg", { viewBox: "0 0 ".concat(diameter, " ").concat(diameter), xmlns: 'http://www.w3.org/2000/svg' },
+                react_1.default.createElement(StyledKnobPath, { css: knobCSS, strokeWidth: knobThickness, d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2) })))));
+}
+exports.default = Dial;
+var StyledTrack = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n"], ["\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n"])));
+var StyledTrackCircle = styled_components_1.default.circle(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  stroke-dasharray: 4;\n  stroke: #fff;\n  ", "\n"], ["\n  stroke-dasharray: 4;\n  stroke: #fff;\n  ", "\n"])), function (props) { return props.css; });
+var StyledKnob = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n\n  svg {\n    overflow: visible;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n"], ["\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n\n  svg {\n    overflow: visible;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n"])));
+var StyledKnobPath = styled_components_1.default.path(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  stroke: #fff;\n  ", "\n"], ["\n  stroke: #fff;\n  ", "\n"])), function (props) { return props.css; });
+var StyledRoot = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n"], ["\n  box-sizing: border-box;\n  display: block;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# sourceMappingURL=Dial.js.map

package/lib/Dial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled, { CSSProp } from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Current angle reading of the compass, between 0.0 - 360.0 degrees, inclusive.\n   */\n  angle?: number\n\n  /**\n   * Length of the knob along the track expressed in degrees, between 0.0 and 360.0 degrees,\n   * exclusive. If set to 0 or 360, the knob disappears.\n   *\n   * @example Suppose the compass were to be used to control a photosphere of an image that is 1000\n   *          x 500, and the window size is 500 x 500, that would mean the FOV is 500 / 1000 * 360 =\n   *          180 degrees.\n   */\n  knobLength?: number\n\n  /**\n   * Radius of the compass.\n   */\n  radius?: number\n\n  /**\n   * The thickness of the knob, which is equivalent to the `stroke-width` of the `<path>` element.\n   * Note that this overwrites the `stroke-width` set inside `knobCSS`.\n   */\n  knobThickness?: number\n\n  /**\n   * CSS of the knob, which is a `<path>` element.\n   */\n  knobCSS?: CSSProp<any>\n\n  /**\n   * The thickness of the circular track, which is equivalent to the `stroke-width` of the\n   * `<circle>` element. Note that this overwrites the `stroke-width` set inside `trackCSS`.\n   */\n  trackThickness?: number\n\n  /**\n   * CSS of the track, which is a `<circle>` element.\n   */\n  trackCSS?: CSSProp<any>\n}\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0\n\n  return {\n    x: centerX + (radius * Math.cos(angleInRadians)),\n    y: centerY + (radius * Math.sin(angleInRadians)),\n  }\n}\n\nfunction arcPath(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n  const start = polarToCartesian(x, y, radius, endAngle)\n  const end = polarToCartesian(x, y, radius, startAngle)\n  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n  const d = [\n    'M', start.x, start.y,\n    'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,\n  ]\n\n  return d.join(' ')\n}\n\n/**\n * A circular dial with a knob and a track.\n *\n * @requires react\n * @requires styled-components\n */\nexport default function Dial({\n  angle = 0,\n  radius = 50,\n  knobLength = 30,\n  knobThickness = 10,\n  knobCSS,\n  trackThickness = 2,\n  trackCSS,\n  style,\n  ...props\n}: Props) {\n  const diameter = radius * 2\n  const clampedKnobAngle = Math.max(0, Math.min(360, knobLength))\n\n  return (\n    <StyledRoot style={{ ...style, width: `${diameter}px`, height: `${diameter}px` }} {...props}>\n      <StyledTrack>\n        <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`}>\n          <StyledTrackCircle\n            cx={radius}\n            cy={radius}\n            r={radius - trackThickness / 2}\n            css={trackCSS}\n            strokeWidth={trackThickness}\n          />\n        </svg>\n      </StyledTrack>\n      <StyledKnob style={{ transform: `rotate(${(angle + 360) % 360}deg)` }}>\n        <svg viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg'>\n          <StyledKnobPath css={knobCSS} strokeWidth={knobThickness} d={arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2)}/>\n        </svg>\n      </StyledKnob>\n    </StyledRoot>\n  )\n}\n\nconst StyledTrack = styled.div`\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n`\n\nconst StyledTrackCircle = styled.circle`\n  stroke-dasharray: 4;\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledKnob = styled.div`\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n\n  svg {\n    overflow: visible;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n`\n\nconst StyledKnobPath = styled.path`\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n`\n"]}

package/lib/Dropdown.d.ts

@@ -8,33 +8,113 @@ export declare type ButtonCSSProps = Readonly<{
     borderThickness: number;
     isActive: boolean;
 }>;
+/**
+ * Type constraint of the data passed to each item in the component.
+ */
 export declare type DataProps<T = Record<string, never>> = T & {
     label?: string;
 };
+/**
+ * Interface defining the props of the item component type to be provided to the
+ * component. The data type is generic.
+ */
 export declare type ItemComponentProps<T = Record<string, never>> = ListItemComponentProps<DataProps<T>>;
 export interface Props<T = Record<string, never>> {
+    /**
+     * Class attribute to the root element.
+     */
     className?: string;
+    /**
+     * Inline style attribute to the element.
+     */
     style?: CSSProperties;
+    /**
+     * Data of every item in the component. This is used to generate individual
+     * menu items. Data type is generic.
+     */
     data: DataProps<T>[];
+    /**
+     * Indicates if the component is inverted (i.e. "dropup" instead of dropdown).
+     * Supports all orientations.
+     */
     isInverted?: boolean;
+    /**
+     * Indicates if items can be toggled, i.e. they can be deselected if selected
+     * again.
+     */
     isTogglable?: boolean;
+    /**
+     * Thickness of the border (in pixels) of every item and the dropdown button
+     * itself. 0 indicates no borders.
+     */
     borderThickness?: number;
+    /**
+     * The index of the default selected item.
+     */
     defaultSelectedItemIndex?: number;
+    /**
+     * Length (in pixels) of each item. This does not apply to the dropdown button
+     * itself. Length refers to the height in vertical orientation and width in
+     * horizontal orientation.
+     */
     itemLength?: number;
+    /**
+     * Padding (in pixels) of each item.
+     */
     itemPadding?: number;
+    /**
+     * Maximum number of items that are viside when the component expands. When a
+     * value greater than or equal to 0 is specified, only that number of items
+     * will be visible at a time, and a scrollbar will appear to scroll to
+     * remaining items. Any value less than 0 indicates that all items will be
+     * visible when the component expands.
+     */
     maxVisibleItems?: number;
+    /**
+     * Orientation of the component.
+     */
     orientation?: Orientation;
+    /**
+     * Color of the border of every item and the dropdown button itself.
+     */
     borderColor?: string;
+    /**
+     * The label to appear on the dropdown button when no items are selected.
+     */
     defaultLabel?: string;
+    /**
+     * SVG markup to be put in the dropdown button as the expand icon.
+     */
     expandIconSvg?: string;
+    /**
+     * React component type to be used for generating items inside the component.
+     */
     itemComponentType: ComponentType<ItemComponentProps<T>>;
+    /**
+     * Handler invoked whenever the selected index changes.
+     */
     onIndexChange?: (index: number) => void;
+    /**
+     * Additional CSS to be provided to the dropdown button.
+     */
     buttonCSS?: ExtendedCSSFunction<ButtonCSSProps>;
 }
 export interface State {
+    /**
+     * Index of the currently selected item. Any value less than 0 indicates that
+     * no item is selected.
+     */
     selectedItemIndex: number;
+    /**
+     * Indicates if the dropdown menu is collapsed.
+     */
     isCollapsed: boolean;
 }
+/**
+ * A dropdown menu component that is invertible (i.e. can "dropup" instead) and
+ * supports both horizontal and vertical orientations. Provide data and item
+ * component type to this component to automatically generate menu items.
+ */
 export default class Dropdown<T = Record<string, never>> extends PureComponent<Props<T>, State> {
     nodeRefs: {
         root: React.RefObject<HTMLDivElement>;
@@ -45,10 +125,38 @@ export default class Dropdown<T = Record<string, never>> extends PureComponent<P
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: Props<T>, prevState: State): void;
     render(): JSX.Element;
+    /**
+     * Indicates if the item at the specified index is selected.
+     *
+     * @param index - The index of the item.
+     *
+     * @returns `true` if the item at the specified index is selected, `false`
+     *          otherwise.
+     */
     isItemSelectedAt(index: number): boolean;
+    /**
+     * Selects the item at the specified index.
+     *
+     * @param index - The index of the item to select.
+     */
     selectItemAt(index: number): void;
+    /**
+     * Expands the menu, revealing its items.
+     */
     expand(): void;
+    /**
+     * Collapses the menu, concealing its items.
+     */
     collapse(): void;
+    /**
+     * Toggles the visibility of the menu.
+     */
     toggle(): void;
+    /**
+     * Handler invoked when click input is detected outside of the root element
+     * of the component.
+     *
+     * @param event - The MouseEvent passed to the handler.
+     */
     private onClickOutside;
 }