etudes 0.55.0 → 0.58.0

package/lib/AbstractSelectableCollection.js

@@ -16,7 +16,11 @@ var __extends = (this && this.__extends) || (function () {
 })();
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -43,8 +47,9 @@ var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:as
 var AbstractSelectableCollection = /** @class */ (function (_super) {
     __extends(AbstractSelectableCollection, _super);
     function AbstractSelectableCollection(props) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, props) || this;
+        _this = _super.call(this, props) || this;
         _this.state = {
             selectedIndex: (_a = _this.props.defaultSelectedIndex) !== null && _a !== void 0 ? _a : -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":"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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/Accordion.js

@@ -31,7 +31,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -70,8 +74,9 @@ var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:ac
 var Accordion = /** @class */ (function (_super) {
     __extends(Accordion, _super);
     function Accordion(props) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, props) || this;
+        _this = _super.call(this, props) || this;
         _this.nodeRefs = {
             lists: [],
         };

package/lib/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ComponentType, createRef, CSSProperties, PureComponent, RefObject } from 'react'\nimport styled, { css } from 'styled-components'\nimport List, { ItemComponentProps as ListItemComponentProps } from './List'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:accordion') : () => {}\n\n/**\n * Interface defining the props of the item component type to be provided to the\n * component. The data type is generic.\n */\nexport type ItemComponentProps<T = Record<string, never>> = ListItemComponentProps<T>\n\nexport type SectionHeaderCSSProps = Readonly<{\n  borderColor: string\n  borderThickness: number\n  isCollapsed: boolean\n  orientation: Orientation\n}>\n\nexport type SectionCSSProps = Readonly<{\n  isCollapsed: boolean\n  orientation: Orientation\n}>\n\nexport interface SectionProps<T = Record<string, never>> {\n  label: string\n  items: T[]\n}\n\nexport interface Props<T = Record<string, never>> {\n  /**\n   * Class attribute to the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute to the element.\n   */\n  style?: CSSProperties\n\n  /**\n   * Data provided to each section.\n   */\n  data: SectionProps<T>[]\n\n  /**\n   * Indicates if sections can be toggled, as in, once a section is expanded,\n   * it collapses when being selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Index of the section that is selected by default. Any value less than 0\n   * indicates that no section is selected by default.\n   */\n  defaultSelectedSectionIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the section hedaer\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) between each item.\n   */\n  itemPadding?: number\n\n  /**\n   * Padding (in pixels) between each section.\n   */\n  sectionPadding?: number\n\n  /**\n   * Maximum number of items that are viside when a section expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when a section expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * Color of the border of every item and the section header itself.\n   */\n  borderColor?: string\n\n  /**\n   * Thickness of the border (in pixels) of every item and the section header\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * SVG markup to be put in the section header as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<ItemComponentProps<T>>\n\n  /**\n   * Handler invoked when the selected item index of any section changes.\n   */\n  onItemIndexChange?: (index: number) => void\n\n  /**\n   * Handler invoked when the selected section index changes.\n   */\n  onSectionIndexChange?: (index: number) => void\n\n  /**\n   * Additional CSS to be provided to each section element.\n   */\n  sectionCSS?: ExtendedCSSFunction<SectionCSSProps>\n\n  /**\n   * Additional CSS to be provided to each section header element.\n   */\n  sectionHeaderCSS?: ExtendedCSSFunction<SectionHeaderCSSProps>\n}\n\nexport interface State {\n  /**\n   * Current selected section index.\n   */\n  selectedSectionIndex: number\n\n  /**\n   * Current selected item index of the expanded section.\n   */\n  selectedItemIndex: number\n}\n\nexport default class Accordion<T = Record<string, never>> extends PureComponent<Props<T>, State> {\n  nodeRefs = {\n    lists: [] as RefObject<List<T>>[],\n  }\n\n  constructor(props: Props<T>) {\n    super(props)\n\n    this.state = {\n      selectedSectionIndex: props.defaultSelectedSectionIndex ?? -1,\n      selectedItemIndex: -1,\n    }\n  }\n\n  componentDidMount() {\n    this.props.onSectionIndexChange?.(this.state.selectedSectionIndex)\n    this.props.onItemIndexChange?.(this.state.selectedItemIndex)\n  }\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    if (prevState.selectedSectionIndex !== this.state.selectedSectionIndex) {\n      debug(`Changing section index to ${this.state.selectedSectionIndex}... OK`)\n      this.props.onSectionIndexChange?.(this.state.selectedSectionIndex)\n    }\n\n    if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {\n      debug(`Changing item index to ${this.state.selectedItemIndex}... OK`)\n      this.props.onItemIndexChange?.(this.state.selectedItemIndex)\n    }\n  }\n\n  render() {\n    const borderColor = this.props.borderColor ?? '#000'\n    const borderThickness = this.props.borderThickness ?? 0\n    const isTogglable = this.props.isTogglable ?? true\n    const itemLength = this.props.itemLength ?? 50\n    const itemPadding = this.props.itemPadding ?? 0\n    const sectionPadding = this.props.sectionPadding ?? 0\n    const maxVisibleItems = this.props.maxVisibleItems ?? -1\n    const orientation = this.props.orientation ?? 'vertical'\n\n    this.nodeRefs.lists = []\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={orientation}\n        style={{\n          ...this.props.style ?? {},\n          ...(orientation === 'vertical' ? {\n            height: 'auto',\n          } : {\n            width: 'auto',\n          }),\n        }}\n      >\n        {this.props.data.map((section, i) => {\n          const numItems = section.items.length\n          const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n          const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n          const isCollapsed = !this.isSectionSelectedAt(i)\n          const ref = createRef<List<T>>()\n\n          this.nodeRefs.lists.push(ref)\n\n          return (\n            <StyledSection\n              key={`section-${i}`}\n              isCollapsed={isCollapsed}\n              orientation={orientation}\n              extendedCSS={this.props.sectionCSS ?? (() => css``)}\n              style={orientation === 'vertical' ? {\n                marginTop: i === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n              } : {\n                marginLeft: i === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n              }}\n            >\n              <StyledSectionHeader\n                borderColor={borderColor}\n                borderThickness={borderThickness}\n                orientation={orientation}\n                isCollapsed={isCollapsed}\n                onClick={() => this.toggleSectionAt(i) }\n                extendedCSS={this.props.sectionHeaderCSS ?? (() => css``)}\n              >\n                <label>{section.label}</label>\n                {this.props.expandIconSvg && <span dangerouslySetInnerHTML={{ __html: this.props.expandIconSvg }}/>}\n              </StyledSectionHeader>\n              <StyledItemList\n                ref={ref as any}\n                borderColor={borderColor}\n                borderThickness={borderThickness}\n                data={section.items}\n                defaultSelectedIndex={-1}\n                isTogglable={isTogglable}\n                itemComponentType={this.props.itemComponentType as any}\n                itemPadding={itemPadding}\n                onDeselectAt={idx => this.deselectItemAt(idx)}\n                onSelectAt={idx => this.selectItemAt(idx)}\n                orientation={orientation}\n                shouldStaySelected={true}\n                itemStyle={orientation === 'vertical' ? {\n                  height: `${itemLength}px`,\n                } : {\n                  width: `${itemLength}px`,\n                }}\n                style={orientation === 'vertical' ? {\n                  height: isCollapsed ? '0px' : `${menuLength}px`,\n                  marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowY: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n                } : {\n                  marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowX: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n                  width: isCollapsed ? '0px' : `${menuLength}px`,\n                }}\n              />\n            </StyledSection>\n          )\n        })}\n      </StyledRoot>\n    )\n  }\n\n  private isSectionSelectedAt(index: number): boolean {\n    return this.state.selectedSectionIndex === index\n  }\n\n  private toggleSectionAt(index: number) {\n    if ((this.props.isTogglable ?? true) && this.isSectionSelectedAt(index)) {\n      this.deselectSectionAt(index)\n    }\n    else {\n      this.selectSectionAt(index)\n    }\n  }\n\n  private selectSectionAt(index: number) {\n    if (this.isSectionSelectedAt(index)) return\n\n    for (const ref of this.nodeRefs.lists) {\n      ref.current?.setState({ selectedIndex: -1 })\n    }\n\n    this.setState({\n      selectedSectionIndex: index,\n    })\n  }\n\n  private deselectSectionAt(index: number) {\n    if (!this.isSectionSelectedAt(index)) return\n\n    for (const ref of this.nodeRefs.lists) {\n      ref.current?.setState({ selectedIndex: -1 })\n    }\n\n    this.setState({\n      selectedSectionIndex: -1,\n    })\n  }\n\n  private isItemSelectedAt(index: number): boolean {\n    return (this.state.selectedItemIndex === index)\n  }\n\n  private toggleItemAt(index: number) {\n    if ((this.props.isTogglable ?? true) && this.isItemSelectedAt(index)) {\n      this.deselectItemAt(index)\n    }\n    else {\n      this.selectItemAt(index)\n    }\n  }\n\n  private selectItemAt(index: number) {\n    if (this.isItemSelectedAt(index)) return\n\n    this.setState({\n      selectedItemIndex: index,\n    })\n  }\n\n  private deselectItemAt(index: number) {\n    if (!this.isItemSelectedAt(index)) return\n\n    this.setState({\n      selectedItemIndex: -1,\n    })\n  }\n}\n\nconst StyledItemList = styled(List)<{\n  itemPadding: number\n  borderThickness: number\n  orientation: Orientation\n}>`\n  transition-duration: 100ms;\n  transition-timing-function: ease-out;\n\n  ${props => props.orientation === 'vertical' ? css`\n    width: 100%;\n    transition-property: height, margin;\n    will-change: height, margin;\n    top: 100%;\n  ` : css`\n    height: 100%;\n    transition-property: width, margin;\n    will-change: width, margin;\n    left: 100%;\n  `}\n`\n\nconst StyledSectionHeader = styled.button<SectionHeaderCSSProps & ExtendedCSSProps<SectionHeaderCSSProps>>`\n  align-items: center;\n  background: #fff;\n  border-color: ${props => props.borderColor};\n  border-style: solid;\n  border-width: ${props => props.borderThickness};\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin: 0;\n  padding: 0 10px;\n  transition-duration: 100ms;\n  transition-property: transform, opacity, background, color;\n  transition-timing-function: ease-out;\n  will-change: transform, opacity, background, color;\n\n  label {\n    color: #000;\n    transition-duration: 100ms;\n    transition-property: color;\n    transition-timing-function: ease-out;\n    will-change: color;\n  }\n\n  span {\n    box-sizing: border-box;\n    display: block;\n    fill: #000;\n    height: 15px;\n    transform-origin: center;\n    transition-duration: 100ms;\n    transition-property: transform;\n    transition-timing-function: ease-out;\n    width: 15px;\n    will-change: transform;\n\n    svg {\n      width: 100%;\n      height: 100%;\n      fill: inherit;\n\n      * {\n        fill: inherit;\n        transition-duration: 100ms;\n        transition-property: fill;\n        transition-timing-function: ease-out;\n      }\n    }\n  }\n\n  ${props => props.orientation === 'vertical' ? css`\n    height: 50px;\n    width: 100%;\n    ` : css`\n    height: 100%;\n    width: 50px;\n  `}\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledSection = styled.section<SectionCSSProps & ExtendedCSSProps<SectionCSSProps>>`\n  align-items: flex-start;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    width: 100%;\n    flex-direction: column;\n    ` : css`\n    height: 100%;\n    flex-direction: row;\n  `}\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\n}>`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  padding: 0;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    flex-direction: column;\n    ` : css`\n    flex-direction: row;\n  `}\n`\n"]}
+{"version":3,"file":"Accordion.js","sourceRoot":"/","sources":["Accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ComponentType, createRef, CSSProperties, PureComponent, RefObject } from 'react'\nimport styled, { css } from 'styled-components'\nimport List, { ItemComponentProps as ListItemComponentProps } from './List'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:accordion') : () => {}\n\n/**\n * Interface defining the props of the item component type to be provided to the\n * component. The data type is generic.\n */\nexport type ItemComponentProps<T = Record<string, never>> = ListItemComponentProps<T>\n\nexport type SectionHeaderCSSProps = Readonly<{\n  borderColor: string\n  borderThickness: number\n  isCollapsed: boolean\n  orientation: Orientation\n}>\n\nexport type SectionCSSProps = Readonly<{\n  isCollapsed: boolean\n  orientation: Orientation\n}>\n\nexport interface SectionProps<T = Record<string, never>> {\n  label: string\n  items: T[]\n}\n\nexport interface Props<T = Record<string, never>> {\n  /**\n   * Class attribute to the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute to the element.\n   */\n  style?: CSSProperties\n\n  /**\n   * Data provided to each section.\n   */\n  data: SectionProps<T>[]\n\n  /**\n   * Indicates if sections can be toggled, as in, once a section is expanded,\n   * it collapses when being selected again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Index of the section that is selected by default. Any value less than 0\n   * indicates that no section is selected by default.\n   */\n  defaultSelectedSectionIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the section hedaer\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) between each item.\n   */\n  itemPadding?: number\n\n  /**\n   * Padding (in pixels) between each section.\n   */\n  sectionPadding?: number\n\n  /**\n   * Maximum number of items that are viside when a section expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when a section expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * Color of the border of every item and the section header itself.\n   */\n  borderColor?: string\n\n  /**\n   * Thickness of the border (in pixels) of every item and the section header\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * SVG markup to be put in the section header as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<ItemComponentProps<T>>\n\n  /**\n   * Handler invoked when the selected item index of any section changes.\n   */\n  onItemIndexChange?: (index: number) => void\n\n  /**\n   * Handler invoked when the selected section index changes.\n   */\n  onSectionIndexChange?: (index: number) => void\n\n  /**\n   * Additional CSS to be provided to each section element.\n   */\n  sectionCSS?: ExtendedCSSFunction<SectionCSSProps>\n\n  /**\n   * Additional CSS to be provided to each section header element.\n   */\n  sectionHeaderCSS?: ExtendedCSSFunction<SectionHeaderCSSProps>\n}\n\nexport interface State {\n  /**\n   * Current selected section index.\n   */\n  selectedSectionIndex: number\n\n  /**\n   * Current selected item index of the expanded section.\n   */\n  selectedItemIndex: number\n}\n\nexport default class Accordion<T = Record<string, never>> extends PureComponent<Props<T>, State> {\n  nodeRefs = {\n    lists: [] as RefObject<List<T>>[],\n  }\n\n  constructor(props: Props<T>) {\n    super(props)\n\n    this.state = {\n      selectedSectionIndex: props.defaultSelectedSectionIndex ?? -1,\n      selectedItemIndex: -1,\n    }\n  }\n\n  componentDidMount() {\n    this.props.onSectionIndexChange?.(this.state.selectedSectionIndex)\n    this.props.onItemIndexChange?.(this.state.selectedItemIndex)\n  }\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    if (prevState.selectedSectionIndex !== this.state.selectedSectionIndex) {\n      debug(`Changing section index to ${this.state.selectedSectionIndex}... OK`)\n      this.props.onSectionIndexChange?.(this.state.selectedSectionIndex)\n    }\n\n    if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {\n      debug(`Changing item index to ${this.state.selectedItemIndex}... OK`)\n      this.props.onItemIndexChange?.(this.state.selectedItemIndex)\n    }\n  }\n\n  render() {\n    const borderColor = this.props.borderColor ?? '#000'\n    const borderThickness = this.props.borderThickness ?? 0\n    const isTogglable = this.props.isTogglable ?? true\n    const itemLength = this.props.itemLength ?? 50\n    const itemPadding = this.props.itemPadding ?? 0\n    const sectionPadding = this.props.sectionPadding ?? 0\n    const maxVisibleItems = this.props.maxVisibleItems ?? -1\n    const orientation = this.props.orientation ?? 'vertical'\n\n    this.nodeRefs.lists = []\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={orientation}\n        style={{\n          ...this.props.style ?? {},\n          ...(orientation === 'vertical' ? {\n            height: 'auto',\n          } : {\n            width: 'auto',\n          }),\n        }}\n      >\n        {this.props.data.map((section, i) => {\n          const numItems = section.items.length\n          const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n          const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n          const isCollapsed = !this.isSectionSelectedAt(i)\n          const ref = createRef<List<T>>()\n\n          this.nodeRefs.lists.push(ref)\n\n          return (\n            <StyledSection\n              key={`section-${i}`}\n              isCollapsed={isCollapsed}\n              orientation={orientation}\n              extendedCSS={this.props.sectionCSS ?? (() => css``)}\n              style={orientation === 'vertical' ? {\n                marginTop: i === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n              } : {\n                marginLeft: i === 0 ? '0px' : `${sectionPadding - borderThickness}px`,\n              }}\n            >\n              <StyledSectionHeader\n                borderColor={borderColor}\n                borderThickness={borderThickness}\n                orientation={orientation}\n                isCollapsed={isCollapsed}\n                onClick={() => this.toggleSectionAt(i) }\n                extendedCSS={this.props.sectionHeaderCSS ?? (() => css``)}\n              >\n                <label>{section.label}</label>\n                {this.props.expandIconSvg && <span dangerouslySetInnerHTML={{ __html: this.props.expandIconSvg }}/>}\n              </StyledSectionHeader>\n              <StyledItemList\n                ref={ref as any}\n                borderColor={borderColor}\n                borderThickness={borderThickness}\n                data={section.items}\n                defaultSelectedIndex={-1}\n                isTogglable={isTogglable}\n                itemComponentType={this.props.itemComponentType as any}\n                itemPadding={itemPadding}\n                onDeselectAt={idx => this.deselectItemAt(idx)}\n                onSelectAt={idx => this.selectItemAt(idx)}\n                orientation={orientation}\n                shouldStaySelected={true}\n                itemStyle={orientation === 'vertical' ? {\n                  height: `${itemLength}px`,\n                } : {\n                  width: `${itemLength}px`,\n                }}\n                style={orientation === 'vertical' ? {\n                  height: isCollapsed ? '0px' : `${menuLength}px`,\n                  marginTop: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowY: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n                } : {\n                  marginLeft: isCollapsed ? '0px' : `${itemPadding - borderThickness}px`,\n                  overflowX: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n                  width: isCollapsed ? '0px' : `${menuLength}px`,\n                }}\n              />\n            </StyledSection>\n          )\n        })}\n      </StyledRoot>\n    )\n  }\n\n  private isSectionSelectedAt(index: number): boolean {\n    return this.state.selectedSectionIndex === index\n  }\n\n  private toggleSectionAt(index: number) {\n    if ((this.props.isTogglable ?? true) && this.isSectionSelectedAt(index)) {\n      this.deselectSectionAt(index)\n    }\n    else {\n      this.selectSectionAt(index)\n    }\n  }\n\n  private selectSectionAt(index: number) {\n    if (this.isSectionSelectedAt(index)) return\n\n    for (const ref of this.nodeRefs.lists) {\n      ref.current?.setState({ selectedIndex: -1 })\n    }\n\n    this.setState({\n      selectedSectionIndex: index,\n    })\n  }\n\n  private deselectSectionAt(index: number) {\n    if (!this.isSectionSelectedAt(index)) return\n\n    for (const ref of this.nodeRefs.lists) {\n      ref.current?.setState({ selectedIndex: -1 })\n    }\n\n    this.setState({\n      selectedSectionIndex: -1,\n    })\n  }\n\n  private isItemSelectedAt(index: number): boolean {\n    return (this.state.selectedItemIndex === index)\n  }\n\n  private toggleItemAt(index: number) {\n    if ((this.props.isTogglable ?? true) && this.isItemSelectedAt(index)) {\n      this.deselectItemAt(index)\n    }\n    else {\n      this.selectItemAt(index)\n    }\n  }\n\n  private selectItemAt(index: number) {\n    if (this.isItemSelectedAt(index)) return\n\n    this.setState({\n      selectedItemIndex: index,\n    })\n  }\n\n  private deselectItemAt(index: number) {\n    if (!this.isItemSelectedAt(index)) return\n\n    this.setState({\n      selectedItemIndex: -1,\n    })\n  }\n}\n\nconst StyledItemList = styled(List)<{\n  itemPadding: number\n  borderThickness: number\n  orientation: Orientation\n}>`\n  transition-duration: 100ms;\n  transition-timing-function: ease-out;\n\n  ${props => props.orientation === 'vertical' ? css`\n    width: 100%;\n    transition-property: height, margin;\n    will-change: height, margin;\n    top: 100%;\n  ` : css`\n    height: 100%;\n    transition-property: width, margin;\n    will-change: width, margin;\n    left: 100%;\n  `}\n`\n\nconst StyledSectionHeader = styled.button<SectionHeaderCSSProps & ExtendedCSSProps<SectionHeaderCSSProps>>`\n  align-items: center;\n  background: #fff;\n  border-color: ${props => props.borderColor};\n  border-style: solid;\n  border-width: ${props => props.borderThickness};\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  margin: 0;\n  padding: 0 10px;\n  transition-duration: 100ms;\n  transition-property: transform, opacity, background, color;\n  transition-timing-function: ease-out;\n  will-change: transform, opacity, background, color;\n\n  label {\n    color: #000;\n    transition-duration: 100ms;\n    transition-property: color;\n    transition-timing-function: ease-out;\n    will-change: color;\n  }\n\n  span {\n    box-sizing: border-box;\n    display: block;\n    fill: #000;\n    height: 15px;\n    transform-origin: center;\n    transition-duration: 100ms;\n    transition-property: transform;\n    transition-timing-function: ease-out;\n    width: 15px;\n    will-change: transform;\n\n    svg {\n      width: 100%;\n      height: 100%;\n      fill: inherit;\n\n      * {\n        fill: inherit;\n        transition-duration: 100ms;\n        transition-property: fill;\n        transition-timing-function: ease-out;\n      }\n    }\n  }\n\n  ${props => props.orientation === 'vertical' ? css`\n    height: 50px;\n    width: 100%;\n    ` : css`\n    height: 100%;\n    width: 50px;\n  `}\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledSection = styled.section<SectionCSSProps & ExtendedCSSProps<SectionCSSProps>>`\n  align-items: flex-start;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  margin: 0;\n  padding: 0;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    width: 100%;\n    flex-direction: column;\n    ` : css`\n    height: 100%;\n    flex-direction: row;\n  `}\n\n  ${props => props.extendedCSS(props)}\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\n}>`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex: 0 0 auto;\n  justify-content: flex-start;\n  padding: 0;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    flex-direction: column;\n    ` : css`\n    flex-direction: row;\n  `}\n`\n"]}

package/lib/BurgerButton.js

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/lib/BurgerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["BurgerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { HTMLAttributes, useEffect, useState } from 'react'\nimport styled from 'styled-components'\nimport Repeat from './Repeat'\n\nexport type Props = HTMLAttributes<HTMLButtonElement> & {\n  height?: number\n  isActive?: boolean\n  isDoubleJointed?: boolean\n  isLastBarHalfWidth?: boolean\n  thickness?: number\n  tintColor?: string\n  transitionDuration?: number\n  width?: number\n  onActivate?: () => void\n  onDeactivate?: () => void\n}\n\n/**\n * Three-striped burger button component that transforms into an \"X\" when selected.\n *\n * @exports BurgerButtonBar - Component for each line on the burger button.\n */\nexport default function BurgerButton({\n  height = 20,\n  isActive: externalIsActive = false,\n  isDoubleJointed = false,\n  isLastBarHalfWidth = false,\n  thickness = 2,\n  tintColor = '#000',\n  transitionDuration = 200,\n  width = 20,\n  onActivate,\n  onDeactivate,\n  ...props\n}: Props) {\n  const [isActive, setIsActive] = useState(externalIsActive)\n\n  useEffect(() => {\n    if (isActive !== externalIsActive) {\n      setIsActive(externalIsActive)\n    }\n  }, [externalIsActive])\n\n  useEffect(() => {\n    if (isActive) {\n      onActivate?.()\n    }\n    else {\n      onDeactivate?.()\n    }\n  }, [isActive])\n\n  return (\n    <StyledRoot {...props} width={width} height={height} thickness={thickness} onClick={() => setIsActive(!isActive)}>\n      <Repeat count={isDoubleJointed ? 2 : 1}>\n        <StyledJoint\n          className={classNames({ active: isActive, half: isDoubleJointed })}\n          height={height}\n          isLastBarHalfWidth={isLastBarHalfWidth}\n          thickness={thickness}\n          width={width}\n        >\n          <Repeat count={3}>\n            <BurgerButtonBar className={classNames({ active: isActive, half: isDoubleJointed })} style={{ height: `${thickness}px` }}/>\n          </Repeat>\n        </StyledJoint>\n      </Repeat>\n    </StyledRoot>\n  )\n}\n\nexport const BurgerButtonBar = styled.span`\n  background: #fff;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: width, height, transform, opacity, background;\n  transition-timing-function: ease-out;\n  width: 100%;\n`\n\nconst StyledJoint = styled.div<{\n  height: number\n  isLastBarHalfWidth: boolean\n  thickness: number\n  width: number\n}>`\n  height: 100%;\n  position: absolute;\n  width: 100%;\n\n  &.half {\n    width: 50%;\n  }\n\n  &:nth-of-type(1) {\n    left: 0;\n    top: 0;\n\n    ${BurgerButtonBar}:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    ${BurgerButtonBar}:nth-child(2) {\n      left: 0;\n      top: ${props => props.height*.5 - props.thickness*.5}px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    ${BurgerButtonBar}:nth-child(3) {\n      left: 0;\n      top: ${props => props.height - props.thickness}px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ${props => props.isLastBarHalfWidth ? '50%' : '100%'};\n    }\n\n    &.active {\n      ${BurgerButtonBar}:nth-child(1) {\n        transform: ${props => `translate3d(0, ${props.height*.5 - props.thickness*.5}px, 0) rotate(45deg)`};\n      }\n\n      ${BurgerButtonBar}:nth-child(2) {\n        transform: ${props => 'translate3d(0, 0, 0) scale(0)'};\n      }\n\n      ${BurgerButtonBar}:nth-child(3) {\n        transform: ${props => `translate3d(0, ${props.thickness*.5 - props.height*.5}px, 0) rotate(-45deg)`};\n        width: 100%;\n      }\n    }\n\n    &.half {\n      ${BurgerButtonBar}:nth-child(1) {\n        transform-origin: right center;\n      }\n\n      ${BurgerButtonBar}:nth-child(2) {\n        transform-origin: right center;\n      }\n\n      ${BurgerButtonBar}:nth-child(3) {\n        transform-origin: right center;\n        width: 100%;\n      }\n    }\n  }\n\n  &:nth-of-type(2) {\n    right: 0;\n    top: 0;\n\n    span:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      top: ${props => props.height*.5 - props.thickness*.5}px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    span:nth-child(3) {\n      left: 0;\n      top: ${props => props.height - props.thickness}px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ${props => props.isLastBarHalfWidth ? 0 : '100%'};\n    }\n\n    &.active {\n      span:nth-child(1) {\n        transform: ${props => `translate3d(0, ${props.height*.5 - props.thickness*.5}px, 0) rotate(-45deg)`};\n      }\n\n      span:nth-child(2) {\n        transform: translate3d(0, 0, 0) scale(0);\n      }\n\n      span:nth-child(3) {\n        transform: ${props => `translate3d(0, ${props.thickness*.5 - props.height*.5}px, 0) rotate(45deg)`};\n        width: 100%;\n      }\n    }\n  }\n`\n\nconst StyledRoot = styled.button<{\n  height: number\n  thickness: number\n  width: number\n}>`\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.height}px;\n  margin: 0;\n  min-height: ${props => props.height}px;\n  min-width: ${props => props.width}px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ${props => props.width}px;\n\n  html:not(.touch) &:hover {\n    ${StyledJoint}:not(.half) {\n      span:nth-child(3) {\n        width: ${props => props.width}px;\n      }\n    }\n\n    ${StyledJoint}.half:nth-of-type(2) {\n      span:nth-child(3) {\n        width: ${props => props.width*.5}px;\n      }\n    }\n  }\n`\n"]}
+{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["BurgerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { HTMLAttributes, useEffect, useState } from 'react'\nimport styled from 'styled-components'\nimport Repeat from './Repeat'\n\nexport type Props = HTMLAttributes<HTMLButtonElement> & {\n  height?: number\n  isActive?: boolean\n  isDoubleJointed?: boolean\n  isLastBarHalfWidth?: boolean\n  thickness?: number\n  tintColor?: string\n  transitionDuration?: number\n  width?: number\n  onActivate?: () => void\n  onDeactivate?: () => void\n}\n\n/**\n * Three-striped burger button component that transforms into an \"X\" when selected.\n *\n * @exports BurgerButtonBar - Component for each line on the burger button.\n */\nexport default function BurgerButton({\n  height = 20,\n  isActive: externalIsActive = false,\n  isDoubleJointed = false,\n  isLastBarHalfWidth = false,\n  thickness = 2,\n  tintColor = '#000',\n  transitionDuration = 200,\n  width = 20,\n  onActivate,\n  onDeactivate,\n  ...props\n}: Props) {\n  const [isActive, setIsActive] = useState(externalIsActive)\n\n  useEffect(() => {\n    if (isActive !== externalIsActive) {\n      setIsActive(externalIsActive)\n    }\n  }, [externalIsActive])\n\n  useEffect(() => {\n    if (isActive) {\n      onActivate?.()\n    }\n    else {\n      onDeactivate?.()\n    }\n  }, [isActive])\n\n  return (\n    <StyledRoot {...props} width={width} height={height} thickness={thickness} onClick={() => setIsActive(!isActive)}>\n      <Repeat count={isDoubleJointed ? 2 : 1}>\n        <StyledJoint\n          className={classNames({ active: isActive, half: isDoubleJointed })}\n          height={height}\n          isLastBarHalfWidth={isLastBarHalfWidth}\n          thickness={thickness}\n          width={width}\n        >\n          <Repeat count={3}>\n            <BurgerButtonBar className={classNames({ active: isActive, half: isDoubleJointed })} style={{ height: `${thickness}px` }}/>\n          </Repeat>\n        </StyledJoint>\n      </Repeat>\n    </StyledRoot>\n  )\n}\n\nexport const BurgerButtonBar = styled.span`\n  background: #fff;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: width, height, transform, opacity, background;\n  transition-timing-function: ease-out;\n  width: 100%;\n`\n\nconst StyledJoint = styled.div<{\n  height: number\n  isLastBarHalfWidth: boolean\n  thickness: number\n  width: number\n}>`\n  height: 100%;\n  position: absolute;\n  width: 100%;\n\n  &.half {\n    width: 50%;\n  }\n\n  &:nth-of-type(1) {\n    left: 0;\n    top: 0;\n\n    ${BurgerButtonBar}:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    ${BurgerButtonBar}:nth-child(2) {\n      left: 0;\n      top: ${props => props.height*.5 - props.thickness*.5}px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    ${BurgerButtonBar}:nth-child(3) {\n      left: 0;\n      top: ${props => props.height - props.thickness}px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ${props => props.isLastBarHalfWidth ? '50%' : '100%'};\n    }\n\n    &.active {\n      ${BurgerButtonBar}:nth-child(1) {\n        transform: ${props => `translate3d(0, ${props.height*.5 - props.thickness*.5}px, 0) rotate(45deg)`};\n      }\n\n      ${BurgerButtonBar}:nth-child(2) {\n        transform: ${props => 'translate3d(0, 0, 0) scale(0)'};\n      }\n\n      ${BurgerButtonBar}:nth-child(3) {\n        transform: ${props => `translate3d(0, ${props.thickness*.5 - props.height*.5}px, 0) rotate(-45deg)`};\n        width: 100%;\n      }\n    }\n\n    &.half {\n      ${BurgerButtonBar}:nth-child(1) {\n        transform-origin: right center;\n      }\n\n      ${BurgerButtonBar}:nth-child(2) {\n        transform-origin: right center;\n      }\n\n      ${BurgerButtonBar}:nth-child(3) {\n        transform-origin: right center;\n        width: 100%;\n      }\n    }\n  }\n\n  &:nth-of-type(2) {\n    right: 0;\n    top: 0;\n\n    span:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      top: ${props => props.height*.5 - props.thickness*.5}px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    span:nth-child(3) {\n      left: 0;\n      top: ${props => props.height - props.thickness}px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ${props => props.isLastBarHalfWidth ? 0 : '100%'};\n    }\n\n    &.active {\n      span:nth-child(1) {\n        transform: ${props => `translate3d(0, ${props.height*.5 - props.thickness*.5}px, 0) rotate(-45deg)`};\n      }\n\n      span:nth-child(2) {\n        transform: translate3d(0, 0, 0) scale(0);\n      }\n\n      span:nth-child(3) {\n        transform: ${props => `translate3d(0, ${props.thickness*.5 - props.height*.5}px, 0) rotate(45deg)`};\n        width: 100%;\n      }\n    }\n  }\n`\n\nconst StyledRoot = styled.button<{\n  height: number\n  thickness: number\n  width: number\n}>`\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.height}px;\n  margin: 0;\n  min-height: ${props => props.height}px;\n  min-width: ${props => props.width}px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ${props => props.width}px;\n\n  html:not(.touch) &:hover {\n    ${StyledJoint}:not(.half) {\n      span:nth-child(3) {\n        width: ${props => props.width}px;\n      }\n    }\n\n    ${StyledJoint}.half:nth-of-type(2) {\n      span:nth-child(3) {\n        width: ${props => props.width*.5}px;\n      }\n    }\n  }\n`\n"]}

package/lib/DebugConsole.js

@@ -31,7 +31,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/lib/DebugConsole.js.map

@@ -1 +1 @@
-{"version":3,"file":"DebugConsole.js","sourceRoot":"/","sources":["DebugConsole.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createRef, CSSProperties, PureComponent } from 'react'\nimport styled from 'styled-components'\n\nexport interface Props {\n  className?: string\n  style: CSSProperties\n  margin: number\n  maxEntries: number\n  align: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br'\n  message?: string\n  title?: string\n}\n\nexport interface State {\n  messages: string[]\n}\n\nexport default class DebugConsole extends PureComponent<Props, State> {\n  static defaultProps: Partial<Props> = {\n    align: 'br',\n    margin: 0,\n    maxEntries: -1,\n    style: {},\n  }\n\n  nodeRefs = {\n    messages: createRef<HTMLDivElement>(),\n  }\n\n  constructor(props: Props) {\n    super(props)\n\n    this.state = {\n      messages: this.props.message ? [this.props.message] : [],\n    }\n  }\n\n  componentDidUpdate(prevProps: Props, prevState: State) {\n    if (prevProps.message !== this.props.message) {\n      this.push(this.props.message ?? '')\n    }\n\n    if (prevState.messages.length !== this.state.messages.length) {\n      const m = this.nodeRefs.messages.current?.scrollHeight ?? 0\n      this.nodeRefs.messages.current?.scrollTo(0, m)\n    }\n  }\n\n  push(message: string) {\n    if (this.props.maxEntries < 0) {\n      this.setState({\n        messages: [...this.state.messages, message],\n      })\n    }\n    else {\n      const n = this.state.messages.length\n\n      this.setState({\n        messages: [...this.state.messages.slice(Math.max(0, n - (this.props.maxEntries - 1)), n), message],\n      })\n    }\n  }\n\n  clear() {\n    this.setState({\n      messages: [],\n    })\n  }\n\n  render() {\n    return (\n      <StyledRoot\n        className={this.props.className}\n        style={{\n          ...this.props.style,\n          margin: 0,\n          position: 'fixed',\n          ...this.getStyleByAlignment(this.props.align),\n        }}\n      >\n        <h6>{this.props.title ?? 'Untitled'}</h6>\n        <div ref={this.nodeRefs.messages}>\n          {this.state.messages.map((v, i) => (\n            <span key={`item-${i}`} dangerouslySetInnerHTML={{ __html: v }}/>\n          ))}\n        </div>\n      </StyledRoot>\n    )\n  }\n\n  private getStyleByAlignment(align: Props['align']): CSSProperties {\n    switch (align) {\n    case 'tl': return { top: `${this.props.margin}px`, left: `${this.props.margin}px` }\n    case 'tc': return { top: `${this.props.margin}px`, left: 0, right: 0, margin: '0 auto' }\n    case 'tr': return { top: `${this.props.margin}px`, right: `${this.props.margin}px` }\n    case 'cl': return { top: 0, left: `${this.props.margin}px`, bottom: 0, margin: 'auto 0' }\n    case 'cc': return { top: 0, left: 0, right: 0, bottom: 0, margin: 'auto' }\n    case 'cr': return { top: 0, bottom: 0, right: `${this.props.margin}px`, margin: 'auto 0' }\n    case 'bl': return { bottom: `${this.props.margin}px`, left: `${this.props.margin}px` }\n    case 'bc': return { bottom: `${this.props.margin}px`, left: 0, right: 0, margin: '0 auto' }\n    default: return { bottom: `${this.props.margin}px`, right: `${this.props.margin}px` }\n    }\n  }\n}\n\nconst StyledRoot = styled.div`\n  align-items: flex-start;\n  background: #000;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-family: monospace;\n  justify-content: flex-start;\n  max-height: 20rem;\n  min-height: 10rem;\n  width: 300px;\n\n  h6 {\n    background: #fff;\n    color: #000;\n    flex: 0 0 auto;\n    font-size: 20px;\n    font-weight: 700;\n    overflow: hidden;\n    padding: 10px;\n    text-overflow: ellipsis;\n    text-transform: uppercase;\n    white-space: nowrap;\n    width: 100%;\n  }\n\n  > div {\n    -webkit-overflow-scrolling: touch;\n    align-items: flex-start;\n    box-sizing: border-box;\n    color: #fff;\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n    justify-content: flex-start;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    padding: 10px 20px;\n    width: 100%;\n\n    > span:not(:last-child) {\n      margin-bottom: 2px;\n    }\n  }\n`\n"]}
+{"version":3,"file":"DebugConsole.js","sourceRoot":"/","sources":["DebugConsole.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createRef, CSSProperties, PureComponent } from 'react'\nimport styled from 'styled-components'\n\nexport interface Props {\n  className?: string\n  style: CSSProperties\n  margin: number\n  maxEntries: number\n  align: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br'\n  message?: string\n  title?: string\n}\n\nexport interface State {\n  messages: string[]\n}\n\nexport default class DebugConsole extends PureComponent<Props, State> {\n  static defaultProps: Partial<Props> = {\n    align: 'br',\n    margin: 0,\n    maxEntries: -1,\n    style: {},\n  }\n\n  nodeRefs = {\n    messages: createRef<HTMLDivElement>(),\n  }\n\n  constructor(props: Props) {\n    super(props)\n\n    this.state = {\n      messages: this.props.message ? [this.props.message] : [],\n    }\n  }\n\n  componentDidUpdate(prevProps: Props, prevState: State) {\n    if (prevProps.message !== this.props.message) {\n      this.push(this.props.message ?? '')\n    }\n\n    if (prevState.messages.length !== this.state.messages.length) {\n      const m = this.nodeRefs.messages.current?.scrollHeight ?? 0\n      this.nodeRefs.messages.current?.scrollTo(0, m)\n    }\n  }\n\n  push(message: string) {\n    if (this.props.maxEntries < 0) {\n      this.setState({\n        messages: [...this.state.messages, message],\n      })\n    }\n    else {\n      const n = this.state.messages.length\n\n      this.setState({\n        messages: [...this.state.messages.slice(Math.max(0, n - (this.props.maxEntries - 1)), n), message],\n      })\n    }\n  }\n\n  clear() {\n    this.setState({\n      messages: [],\n    })\n  }\n\n  render() {\n    return (\n      <StyledRoot\n        className={this.props.className}\n        style={{\n          ...this.props.style,\n          margin: 0,\n          position: 'fixed',\n          ...this.getStyleByAlignment(this.props.align),\n        }}\n      >\n        <h6>{this.props.title ?? 'Untitled'}</h6>\n        <div ref={this.nodeRefs.messages}>\n          {this.state.messages.map((v, i) => (\n            <span key={`item-${i}`} dangerouslySetInnerHTML={{ __html: v }}/>\n          ))}\n        </div>\n      </StyledRoot>\n    )\n  }\n\n  private getStyleByAlignment(align: Props['align']): CSSProperties {\n    switch (align) {\n    case 'tl': return { top: `${this.props.margin}px`, left: `${this.props.margin}px` }\n    case 'tc': return { top: `${this.props.margin}px`, left: 0, right: 0, margin: '0 auto' }\n    case 'tr': return { top: `${this.props.margin}px`, right: `${this.props.margin}px` }\n    case 'cl': return { top: 0, left: `${this.props.margin}px`, bottom: 0, margin: 'auto 0' }\n    case 'cc': return { top: 0, left: 0, right: 0, bottom: 0, margin: 'auto' }\n    case 'cr': return { top: 0, bottom: 0, right: `${this.props.margin}px`, margin: 'auto 0' }\n    case 'bl': return { bottom: `${this.props.margin}px`, left: `${this.props.margin}px` }\n    case 'bc': return { bottom: `${this.props.margin}px`, left: 0, right: 0, margin: '0 auto' }\n    default: return { bottom: `${this.props.margin}px`, right: `${this.props.margin}px` }\n    }\n  }\n}\n\nconst StyledRoot = styled.div`\n  align-items: flex-start;\n  background: #000;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-family: monospace;\n  justify-content: flex-start;\n  max-height: 20rem;\n  min-height: 10rem;\n  width: 300px;\n\n  h6 {\n    background: #fff;\n    color: #000;\n    flex: 0 0 auto;\n    font-size: 20px;\n    font-weight: 700;\n    overflow: hidden;\n    padding: 10px;\n    text-overflow: ellipsis;\n    text-transform: uppercase;\n    white-space: nowrap;\n    width: 100%;\n  }\n\n  > div {\n    -webkit-overflow-scrolling: touch;\n    align-items: flex-start;\n    box-sizing: border-box;\n    color: #fff;\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n    justify-content: flex-start;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    padding: 10px 20px;\n    width: 100%;\n\n    > span:not(:last-child) {\n      margin-bottom: 2px;\n    }\n  }\n`\n"]}

package/lib/Dropdown.js

@@ -20,7 +20,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -53,8 +57,9 @@ var List_1 = __importDefault(require("./List"));
 var Dropdown = /** @class */ (function (_super) {
     __extends(Dropdown, _super);
     function Dropdown(props) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, props) || this;
+        _this = _super.call(this, props) || this;
         _this.nodeRefs = {
             root: (0, react_1.createRef)(),
         };

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ComponentType, createRef, PureComponent } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProperties } from 'styled-components'\nimport List, { ItemComponentProps as ListItemComponentProps } from './List'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation } from './types'\n\nexport type ButtonCSSProps = Readonly<{\n  borderColor: string\n  borderThickness: number\n  isActive: boolean\n}>\n\n/**\n * Type constraint of the data passed to each item in the component.\n */\nexport type DataProps<T = Record<string, any>> = T & {\n  label?: string\n}\n\n/**\n * Interface defining the props of the item component type to be provided to the\n * component. The data type is generic.\n */\nexport type ItemComponentProps<T = Record<string, any>> = ListItemComponentProps<DataProps<T>>\n\nexport type Props<T = Record<string, any>> = {\n  /**\n   * Class attribute to the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute to the element.\n   */\n  style?: CSSProperties\n\n  /**\n   * Data of every item in the component. This is used to generate individual\n   * menu items. Data type is generic.\n   */\n  data: DataProps<T>[]\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   * Supports all orientations.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if items can be toggled, i.e. they can be deselected if selected\n   * again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Thickness of the border (in pixels) of every item and the dropdown button\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * The index of the default selected item.\n   */\n  defaultSelectedItemIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the dropdown button\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) of each item.\n   */\n  itemPadding?: number\n\n  /**\n   * Maximum number of items that are viside when the component expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when the component expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * Color of the border of every item and the dropdown button itself.\n   */\n  borderColor?: string\n\n  /**\n   * The label to appear on the dropdown button when no items are selected.\n   */\n  defaultLabel?: string\n\n  /**\n   * SVG markup to be put in the dropdown button as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<ItemComponentProps<T>>\n\n  /**\n   * Handler invoked whenever the selected index changes.\n   */\n  onIndexChange?: (index: number) => void\n\n  /**\n   * Additional CSS to be provided to the dropdown button.\n   */\n  buttonCSS?: ExtendedCSSFunction<ButtonCSSProps>\n}\n\nexport interface State {\n  /**\n   * Index of the currently selected item. Any value less than 0 indicates that\n   * no item is selected.\n   */\n  selectedItemIndex: number\n\n  /**\n   * Indicates if the dropdown menu is collapsed.\n   */\n  isCollapsed: boolean\n}\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default class Dropdown<T = Record<string, any>> extends PureComponent<Props<T>, State> {\n  nodeRefs = {\n    root: createRef<HTMLDivElement>(),\n  }\n\n  constructor(props: Props<T>) {\n    super(props)\n\n    this.state = {\n      selectedItemIndex: this.props.defaultSelectedItemIndex ?? -1,\n      isCollapsed: true,\n    }\n  }\n\n  get rect(): Rect {\n    return Rect.from(this.nodeRefs.root.current) ?? new Rect()\n  }\n\n  componentDidMount() {\n    window.addEventListener('click', this.onClickOutside)\n    this.props.onIndexChange?.(this.state.selectedItemIndex)\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('click', this.onClickOutside)\n  }\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {\n      this.props.onIndexChange?.(this.state.selectedItemIndex)\n    }\n\n    if (prevProps.orientation !== this.props.orientation) {\n      this.forceUpdate()\n    }\n  }\n\n  render() {\n    const borderColor = this.props.borderColor ?? '#000'\n    const borderThickness = this.props.borderThickness ?? 1\n    const orientation = this.props.orientation ?? 'vertical'\n    const itemLength = this.props.itemLength ?? (orientation === 'vertical' ? this.rect.height : this.rect.width)\n    const maxVisibleItems = this.props.maxVisibleItems ?? -1\n    const isTogglable = this.props.isTogglable ?? true\n    const itemPadding = this.props.itemPadding ?? 0\n    const numItems = this.props.data.length\n    const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n    const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={orientation}\n        isInverted={this.props.isInverted ?? false}\n        ref={this.nodeRefs.root}\n        style={this.props.style ?? {}}\n      >\n        <StyledToggle\n          borderColor={borderColor}\n          borderThickness={borderThickness}\n          extendedCSS={this.props.buttonCSS ?? (() => css``)}\n          isActive={!this.state.isCollapsed}\n          onClick={() => this.toggle()}\n        >\n          <label>\n            {this.state.selectedItemIndex === -1 ? (this.props.defaultLabel ?? 'Select') : this.props.data[this.state.selectedItemIndex].label}\n          </label>\n          {this.props.expandIconSvg && <span dangerouslySetInnerHTML={{ __html: this.props.expandIconSvg }}/>}\n        </StyledToggle>\n        <StyledItemList\n          borderColor={borderColor}\n          borderThickness={borderThickness}\n          data={this.props.data}\n          defaultSelectedIndex={this.props.defaultSelectedItemIndex ?? -1}\n          isInverted={this.props.isInverted ?? false}\n          isTogglable={isTogglable}\n          itemComponentType={this.props.itemComponentType as any} // HACK: Generic types cannot be inferred by props, so this is the only way.\n          itemPadding={itemPadding}\n          onDeselectAt={idx => this.selectItemAt(-1)}\n          onSelectAt={idx => this.selectItemAt(idx)}\n          orientation={orientation}\n          shouldStaySelected={true}\n          itemStyle={orientation === 'vertical' ? {\n            height: `${itemLength}px`,\n          } : {\n            width: `${itemLength}px`,\n          }}\n          style={orientation === 'vertical' ? {\n            height: this.state.isCollapsed ? '0px' : `${menuLength}px`,\n            overflowY: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n          } : {\n            width: this.state.isCollapsed ? '0px' : `${menuLength}px`,\n            overflowX: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n          }}\n        />\n      </StyledRoot>\n    )\n  }\n\n  /**\n   * Indicates if the item at the specified index is selected.\n   *\n   * @param index - The index of the item.\n   *\n   * @returns `true` if the item at the specified index is selected, `false`\n   *          otherwise.\n   */\n  isItemSelectedAt(index: number) {\n    return (this.state.selectedItemIndex === index)\n  }\n\n  /**\n   * Selects the item at the specified index.\n   *\n   * @param index - The index of the item to select.\n   */\n  selectItemAt(index: number) {\n    this.setState({\n      selectedItemIndex: index,\n      isCollapsed: true,\n    })\n  }\n\n  /**\n   * Expands the menu, revealing its items.\n   */\n  expand() {\n    if (!this.state.isCollapsed) return\n    this.setState({ isCollapsed: false })\n  }\n\n  /**\n   * Collapses the menu, concealing its items.\n   */\n  collapse() {\n    if (this.state.isCollapsed) return\n    this.setState({ isCollapsed: true })\n  }\n\n  /**\n   * Toggles the visibility of the menu.\n   */\n  toggle() {\n    if (this.state.isCollapsed) {\n      this.expand()\n    }\n    else {\n      this.collapse()\n    }\n  }\n\n  /**\n   * Handler invoked when click input is detected outside of the root element\n   * of the component.\n   *\n   * @param event - The MouseEvent passed to the handler.\n   */\n  private onClickOutside = (event: MouseEvent) => {\n    if (this.state.isCollapsed) return\n    if (!(event.target instanceof Node)) return\n\n    let isOutside = true\n    let node = event.target\n\n    while (node) {\n      if (node === this.nodeRefs.root.current) {\n        isOutside = false\n        break\n      }\n\n      if (!node.parentNode) break\n\n      node = node.parentNode\n    }\n\n    if (!isOutside) return\n\n    this.collapse()\n  }\n}\n\nconst StyledItemList = styled(List)<{\n  isInverted: boolean\n  itemPadding: number\n  borderThickness: number\n  orientation: Orientation\n}>`\n  position: absolute;\n\n  ::-webkit-scrollbar {}\n  ::-webkit-scrollbar-track {}\n  ::-webkit-scrollbar-thumb {}\n  ::-webkit-scrollbar-hover {}\n\n  ${props => props.orientation === 'vertical' ? css`\n    transition: height 100ms ease-out;\n    will-change: height;\n\n    ${props.isInverted ? css`\n      margin-bottom: ${props.itemPadding - props.borderThickness}px;\n      bottom: 100%;\n    ` : css`\n      top: 100%;\n      margin-top: ${props.itemPadding - props.borderThickness}px;\n    `}\n  ` : css`\n    transition: width 100ms ease-out;\n    will-change: width;\n\n    ${props.isInverted ? css`\n      margin-right: ${props.itemPadding - props.borderThickness}px;\n      right: 100%;\n    ` : css`\n      left: 100%;\n      margin-left: ${props.itemPadding - props.borderThickness}px;\n    `}\n  `}\n`\n\nconst StyledToggle = styled.button<ButtonCSSProps & ExtendedCSSProps<ButtonCSSProps>>`\n  > span {\n    height: 15px;\n    width: 15px;\n  }\n\n  > label {\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    letter-spacing: inherit;\n    line-height: inherit;\n  }\n\n  ${props => props.extendedCSS(props)}\n\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  color: #000;\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  justify-content: space-between;\n  left: 0;\n  margin: 0;\n  outline: none;\n  padding: 0 10px;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n\n  ${props => props.borderThickness > 0 && css`\n    border: ${props.borderThickness}px solid ${props.borderColor};\n  `}\n\n  > span {\n    box-sizing: border-box;\n    display: block;\n    transform-origin: center;\n\n    svg {\n      height: 100%;\n      width: auto;\n    }\n  }\n`\n\nconst StyledRoot = styled.div<{\n  isInverted: boolean\n  orientation: Orientation\n}>`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: flex-start;\n  padding: 0;\n  overflow: visible;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    flex-direction: ${props.isInverted ? 'column-reverse' : 'column'};\n    height: 50px;\n    width: 200px;\n  ` : css`\n    flex-direction: ${props.isInverted ? 'row-reverse' : 'row'};\n    height: 200px;\n    width: 50px;\n  `}\n`\n"]}
+{"version":3,"file":"Dropdown.js","sourceRoot":"/","sources":["Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ComponentType, createRef, PureComponent } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProperties } from 'styled-components'\nimport List, { ItemComponentProps as ListItemComponentProps } from './List'\nimport { ExtendedCSSFunction, ExtendedCSSProps, Orientation } from './types'\n\nexport type ButtonCSSProps = Readonly<{\n  borderColor: string\n  borderThickness: number\n  isActive: boolean\n}>\n\n/**\n * Type constraint of the data passed to each item in the component.\n */\nexport type DataProps<T = Record<string, any>> = T & {\n  label?: string\n}\n\n/**\n * Interface defining the props of the item component type to be provided to the\n * component. The data type is generic.\n */\nexport type ItemComponentProps<T = Record<string, any>> = ListItemComponentProps<DataProps<T>>\n\nexport type Props<T = Record<string, any>> = {\n  /**\n   * Class attribute to the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute to the element.\n   */\n  style?: CSSProperties\n\n  /**\n   * Data of every item in the component. This is used to generate individual\n   * menu items. Data type is generic.\n   */\n  data: DataProps<T>[]\n\n  /**\n   * Indicates if the component is inverted (i.e. \"dropup\" instead of dropdown).\n   * Supports all orientations.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if items can be toggled, i.e. they can be deselected if selected\n   * again.\n   */\n  isTogglable?: boolean\n\n  /**\n   * Thickness of the border (in pixels) of every item and the dropdown button\n   * itself. 0 indicates no borders.\n   */\n  borderThickness?: number\n\n  /**\n   * The index of the default selected item.\n   */\n  defaultSelectedItemIndex?: number\n\n  /**\n   * Length (in pixels) of each item. This does not apply to the dropdown button\n   * itself. Length refers to the height in vertical orientation and width in\n   * horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding (in pixels) of each item.\n   */\n  itemPadding?: number\n\n  /**\n   * Maximum number of items that are viside when the component expands. When a\n   * value greater than or equal to 0 is specified, only that number of items\n   * will be visible at a time, and a scrollbar will appear to scroll to\n   * remaining items. Any value less than 0 indicates that all items will be\n   * visible when the component expands.\n   */\n  maxVisibleItems?: number\n\n  /**\n   * Orientation of the component.\n   */\n  orientation?: Orientation\n\n  /**\n   * Color of the border of every item and the dropdown button itself.\n   */\n  borderColor?: string\n\n  /**\n   * The label to appear on the dropdown button when no items are selected.\n   */\n  defaultLabel?: string\n\n  /**\n   * SVG markup to be put in the dropdown button as the expand icon.\n   */\n  expandIconSvg?: string\n\n  /**\n   * React component type to be used for generating items inside the component.\n   */\n  itemComponentType: ComponentType<ItemComponentProps<T>>\n\n  /**\n   * Handler invoked whenever the selected index changes.\n   */\n  onIndexChange?: (index: number) => void\n\n  /**\n   * Additional CSS to be provided to the dropdown button.\n   */\n  buttonCSS?: ExtendedCSSFunction<ButtonCSSProps>\n}\n\nexport interface State {\n  /**\n   * Index of the currently selected item. Any value less than 0 indicates that\n   * no item is selected.\n   */\n  selectedItemIndex: number\n\n  /**\n   * Indicates if the dropdown menu is collapsed.\n   */\n  isCollapsed: boolean\n}\n\n/**\n * A dropdown menu component that is invertible (i.e. can \"dropup\" instead) and\n * supports both horizontal and vertical orientations. Provide data and item\n * component type to this component to automatically generate menu items.\n */\nexport default class Dropdown<T = Record<string, any>> extends PureComponent<Props<T>, State> {\n  nodeRefs = {\n    root: createRef<HTMLDivElement>(),\n  }\n\n  constructor(props: Props<T>) {\n    super(props)\n\n    this.state = {\n      selectedItemIndex: this.props.defaultSelectedItemIndex ?? -1,\n      isCollapsed: true,\n    }\n  }\n\n  get rect(): Rect {\n    return Rect.from(this.nodeRefs.root.current) ?? new Rect()\n  }\n\n  componentDidMount() {\n    window.addEventListener('click', this.onClickOutside)\n    this.props.onIndexChange?.(this.state.selectedItemIndex)\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('click', this.onClickOutside)\n  }\n\n  componentDidUpdate(prevProps: Props<T>, prevState: State) {\n    if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {\n      this.props.onIndexChange?.(this.state.selectedItemIndex)\n    }\n\n    if (prevProps.orientation !== this.props.orientation) {\n      this.forceUpdate()\n    }\n  }\n\n  render() {\n    const borderColor = this.props.borderColor ?? '#000'\n    const borderThickness = this.props.borderThickness ?? 1\n    const orientation = this.props.orientation ?? 'vertical'\n    const itemLength = this.props.itemLength ?? (orientation === 'vertical' ? this.rect.height : this.rect.width)\n    const maxVisibleItems = this.props.maxVisibleItems ?? -1\n    const isTogglable = this.props.isTogglable ?? true\n    const itemPadding = this.props.itemPadding ?? 0\n    const numItems = this.props.data.length\n    const numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems)\n    const menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        orientation={orientation}\n        isInverted={this.props.isInverted ?? false}\n        ref={this.nodeRefs.root}\n        style={this.props.style ?? {}}\n      >\n        <StyledToggle\n          borderColor={borderColor}\n          borderThickness={borderThickness}\n          extendedCSS={this.props.buttonCSS ?? (() => css``)}\n          isActive={!this.state.isCollapsed}\n          onClick={() => this.toggle()}\n        >\n          <label>\n            {this.state.selectedItemIndex === -1 ? (this.props.defaultLabel ?? 'Select') : this.props.data[this.state.selectedItemIndex].label}\n          </label>\n          {this.props.expandIconSvg && <span dangerouslySetInnerHTML={{ __html: this.props.expandIconSvg }}/>}\n        </StyledToggle>\n        <StyledItemList\n          borderColor={borderColor}\n          borderThickness={borderThickness}\n          data={this.props.data}\n          defaultSelectedIndex={this.props.defaultSelectedItemIndex ?? -1}\n          isInverted={this.props.isInverted ?? false}\n          isTogglable={isTogglable}\n          itemComponentType={this.props.itemComponentType as any} // HACK: Generic types cannot be inferred by props, so this is the only way.\n          itemPadding={itemPadding}\n          onDeselectAt={idx => this.selectItemAt(-1)}\n          onSelectAt={idx => this.selectItemAt(idx)}\n          orientation={orientation}\n          shouldStaySelected={true}\n          itemStyle={orientation === 'vertical' ? {\n            height: `${itemLength}px`,\n          } : {\n            width: `${itemLength}px`,\n          }}\n          style={orientation === 'vertical' ? {\n            height: this.state.isCollapsed ? '0px' : `${menuLength}px`,\n            overflowY: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n          } : {\n            width: this.state.isCollapsed ? '0px' : `${menuLength}px`,\n            overflowX: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),\n          }}\n        />\n      </StyledRoot>\n    )\n  }\n\n  /**\n   * Indicates if the item at the specified index is selected.\n   *\n   * @param index - The index of the item.\n   *\n   * @returns `true` if the item at the specified index is selected, `false`\n   *          otherwise.\n   */\n  isItemSelectedAt(index: number) {\n    return (this.state.selectedItemIndex === index)\n  }\n\n  /**\n   * Selects the item at the specified index.\n   *\n   * @param index - The index of the item to select.\n   */\n  selectItemAt(index: number) {\n    this.setState({\n      selectedItemIndex: index,\n      isCollapsed: true,\n    })\n  }\n\n  /**\n   * Expands the menu, revealing its items.\n   */\n  expand() {\n    if (!this.state.isCollapsed) return\n    this.setState({ isCollapsed: false })\n  }\n\n  /**\n   * Collapses the menu, concealing its items.\n   */\n  collapse() {\n    if (this.state.isCollapsed) return\n    this.setState({ isCollapsed: true })\n  }\n\n  /**\n   * Toggles the visibility of the menu.\n   */\n  toggle() {\n    if (this.state.isCollapsed) {\n      this.expand()\n    }\n    else {\n      this.collapse()\n    }\n  }\n\n  /**\n   * Handler invoked when click input is detected outside of the root element\n   * of the component.\n   *\n   * @param event - The MouseEvent passed to the handler.\n   */\n  private onClickOutside = (event: MouseEvent) => {\n    if (this.state.isCollapsed) return\n    if (!(event.target instanceof Node)) return\n\n    let isOutside = true\n    let node = event.target\n\n    while (node) {\n      if (node === this.nodeRefs.root.current) {\n        isOutside = false\n        break\n      }\n\n      if (!node.parentNode) break\n\n      node = node.parentNode\n    }\n\n    if (!isOutside) return\n\n    this.collapse()\n  }\n}\n\nconst StyledItemList = styled(List)<{\n  isInverted: boolean\n  itemPadding: number\n  borderThickness: number\n  orientation: Orientation\n}>`\n  position: absolute;\n\n  ::-webkit-scrollbar {}\n  ::-webkit-scrollbar-track {}\n  ::-webkit-scrollbar-thumb {}\n  ::-webkit-scrollbar-hover {}\n\n  ${props => props.orientation === 'vertical' ? css`\n    transition: height 100ms ease-out;\n    will-change: height;\n\n    ${props.isInverted ? css`\n      margin-bottom: ${props.itemPadding - props.borderThickness}px;\n      bottom: 100%;\n    ` : css`\n      top: 100%;\n      margin-top: ${props.itemPadding - props.borderThickness}px;\n    `}\n  ` : css`\n    transition: width 100ms ease-out;\n    will-change: width;\n\n    ${props.isInverted ? css`\n      margin-right: ${props.itemPadding - props.borderThickness}px;\n      right: 100%;\n    ` : css`\n      left: 100%;\n      margin-left: ${props.itemPadding - props.borderThickness}px;\n    `}\n  `}\n`\n\nconst StyledToggle = styled.button<ButtonCSSProps & ExtendedCSSProps<ButtonCSSProps>>`\n  > span {\n    height: 15px;\n    width: 15px;\n  }\n\n  > label {\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    letter-spacing: inherit;\n    line-height: inherit;\n  }\n\n  ${props => props.extendedCSS(props)}\n\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  color: #000;\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  justify-content: space-between;\n  left: 0;\n  margin: 0;\n  outline: none;\n  padding: 0 10px;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n\n  ${props => props.borderThickness > 0 && css`\n    border: ${props.borderThickness}px solid ${props.borderColor};\n  `}\n\n  > span {\n    box-sizing: border-box;\n    display: block;\n    transform-origin: center;\n\n    svg {\n      height: 100%;\n      width: auto;\n    }\n  }\n`\n\nconst StyledRoot = styled.div<{\n  isInverted: boolean\n  orientation: Orientation\n}>`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: flex-start;\n  padding: 0;\n  overflow: visible;\n  position: relative;\n\n  ${props => props.orientation === 'vertical' ? css`\n    flex-direction: ${props.isInverted ? 'column-reverse' : 'column'};\n    height: 50px;\n    width: 200px;\n  ` : css`\n    flex-direction: ${props.isInverted ? 'row-reverse' : 'row'};\n    height: 200px;\n    width: 50px;\n  `}\n`\n"]}

package/lib/ExtractChild.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/lib/ExtractChild.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtractChild.js","sourceRoot":"/","sources":["ExtractChild.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,kDAAsB;AACtB,6CAAoH;AAIpH;;;GAGG;AACH,kBAAe,IAAA,kBAAU,EAAqB,UAAC,EAI9C,EAAE,GAAG;IAHJ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACN,KAAK,cAHqC,yBAI9C,CADS;IAER,IAAI,gBAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QACvB,yCAAyC;QACzC,OAAO,CAAC,KAAK,CAAC,uEAAgE,QAAQ,CAAC,MAAM,sEAAmE,CAAC,CAAA;KAClK;IAED,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,GAAG,GAAG,CAAC;YAAE,OAAO,SAAS,CAAA;QAE7B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,oBAAY,EAAC,KAAK,sBAAI,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,IAAK,KAAK,KAAE,GAAG,KAAA,IAAG,CAAA;SACvG;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import classNames from 'classnames'\nimport _ from 'lodash'\nimport React, { Children, cloneElement, forwardRef, HTMLAttributes, isValidElement, PropsWithChildren } from 'react'\n\nexport type Props = PropsWithChildren<HTMLAttributes<HTMLElement>>\n\n/**\n * Extracts a single child of a parent component into its own component. If the parent component has\n * multiple children, only the first one will be extracted, the rest will be ignored.\n */\nexport default forwardRef<HTMLElement, Props>(({\n  children,\n  className,\n  ...props\n}, ref) => {\n  if (_.isArray(children)) {\n    /* eslint-disable-next-line no-console */\n    console.error(`[etudes::ExtractChild] Only one child is expected, but found ${children.length}. Only the first child is extracted while the rest are discarded.`)\n  }\n\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (idx > 0) return undefined\n\n        if (isValidElement(child)) {\n          return cloneElement(child, { className: classNames(className, child.props.className), ...props, ref })\n        }\n\n        return child\n      })}\n    </>\n  )\n})\n"]}
+{"version":3,"file":"ExtractChild.js","sourceRoot":"/","sources":["ExtractChild.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,kDAAsB;AACtB,6CAAoH;AAIpH;;;GAGG;AACH,kBAAe,IAAA,kBAAU,EAAqB,UAAC,EAI9C,EAAE,GAAG;IAHJ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACN,KAAK,cAHqC,yBAI9C,CADS;IAER,IAAI,gBAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QACvB,yCAAyC;QACzC,OAAO,CAAC,KAAK,CAAC,uEAAgE,QAAQ,CAAC,MAAM,sEAAmE,CAAC,CAAA;KAClK;IAED,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,GAAG,GAAG,CAAC;YAAE,OAAO,SAAS,CAAA;QAE7B,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,oBAAY,EAAC,KAAK,sBAAI,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,IAAK,KAAK,KAAE,GAAG,KAAA,IAAG,CAAA;SACvG;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import classNames from 'classnames'\nimport _ from 'lodash'\nimport React, { Children, cloneElement, forwardRef, HTMLAttributes, isValidElement, PropsWithChildren } from 'react'\n\nexport type Props = PropsWithChildren<HTMLAttributes<HTMLElement>>\n\n/**\n * Extracts a single child of a parent component into its own component. If the parent component has\n * multiple children, only the first one will be extracted, the rest will be ignored.\n */\nexport default forwardRef<HTMLElement, Props>(({\n  children,\n  className,\n  ...props\n}, ref) => {\n  if (_.isArray(children)) {\n    /* eslint-disable-next-line no-console */\n    console.error(`[etudes::ExtractChild] Only one child is expected, but found ${children.length}. Only the first child is extracted while the rest are discarded.`)\n  }\n\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (idx > 0) return undefined\n\n        if (isValidElement(child)) {\n          return cloneElement(child, { className: classNames(className, child.props.className), ...props, ref })\n        }\n\n        return child\n      })}\n    </>\n  )\n})\n"]}

package/lib/ExtractChildren.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/lib/ExtractChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExtractChildren.js","sourceRoot":"/","sources":["ExtractChildren.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAAwG;AAIxG;;GAEG;AACH,SAAwB,eAAe,CAAC,EAIhC;IAHN,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACN,KAAK,cAH8B,yBAIvC,CADS;IAER,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,oBAAY,EAAC,KAAK,aAAI,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,IAAK,KAAK,EAAG,CAAA;SAClG;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAhBD,kCAgBC","sourcesContent":["import classNames from 'classnames'\nimport React, { Children, cloneElement, HTMLAttributes, isValidElement, PropsWithChildren } from 'react'\n\nexport type Props = PropsWithChildren<HTMLAttributes<HTMLElement>>\n\n/**\n * Extracts all children of a parent component into its own component.\n */\nexport default function ExtractChildren({\n  children,\n  className,\n  ...props\n}: Props) {\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (isValidElement(child)) {\n          return cloneElement(child, { className: classNames(className, child.props.className), ...props })\n        }\n\n        return child\n      })}\n    </>\n  )\n}\n"]}
+{"version":3,"file":"ExtractChildren.js","sourceRoot":"/","sources":["ExtractChildren.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAAwG;AAIxG;;GAEG;AACH,SAAwB,eAAe,CAAC,EAIhC;IAHN,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACN,KAAK,cAH8B,yBAIvC,CADS;IAER,OAAO,CACL,8DACG,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK,EAAE,GAAG;QACjC,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,EAAE;YACzB,OAAO,IAAA,oBAAY,EAAC,KAAK,aAAI,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,IAAK,KAAK,EAAG,CAAA;SAClG;QAED,OAAO,KAAK,CAAA;IACd,CAAC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAhBD,kCAgBC","sourcesContent":["import classNames from 'classnames'\nimport React, { Children, cloneElement, HTMLAttributes, isValidElement, PropsWithChildren } from 'react'\n\nexport type Props = PropsWithChildren<HTMLAttributes<HTMLElement>>\n\n/**\n * Extracts all children of a parent component into its own component.\n */\nexport default function ExtractChildren({\n  children,\n  className,\n  ...props\n}: Props) {\n  return (\n    <>\n      {Children.map(children, (child, idx) => {\n        if (isValidElement(child)) {\n          return cloneElement(child, { className: classNames(className, child.props.className), ...props })\n        }\n\n        return child\n      })}\n    </>\n  )\n}\n"]}

package/lib/FlatSVG.js

@@ -16,7 +16,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/lib/FlatSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The SVG string markup, i.e. \"<svg>...</svg>\".\n   */\n  markup: string\n\n  /**\n   * Specifies whether the 'class' should be removed in the SVG root node and all of its child\n   * nodes.\n   */\n  stripClasses?: boolean\n\n  /**\n   * Specifies whether extraneous attributes should be removed from the SVG root node. The\n   * `whitelistedAttributes` prop defines what attributes should be kept.\n   */\n  stripExtraneousAttributes?: boolean\n\n  /**\n   * Specifies whether the 'id' attribute should be removed in the SVG root node and all of its\n   * child nodes.\n   */\n  stripIds?: boolean\n\n  /**\n   * Specifies whether the 'style' atribute and any <style> nodes should be removed in the SVG root\n   * node and all of its child nodes.\n   */\n  stripStyles?: boolean\n\n  /**\n   * Specifies attribute names to exclude from being stripped if `stripExtraneousAttributes` is\n   * enabled. By default, only `viewBox` is whitelisted.\n   */\n  whitelistedAttributes?: string[]\n}\n\nfunction removeStyles(element: Element) {\n  element.removeAttribute('style')\n\n  const inlineStyles = element.getElementsByTagName('style')\n  const numInlineStyles = inlineStyles.length\n\n  for (let i = 0; i < numInlineStyles; i++) {\n    const inlineStyle = inlineStyles[i]\n    inlineStyle.remove()\n  }\n\n  const numChildren = element.children.length\n\n  for (let i = 0; i < numChildren; i++) {\n    removeStyles(element.children[i])\n  }\n}\n\nfunction removeAttributes(element: Element, attributes: string[] | undefined = undefined, recursive = false, whitelist: string[] = []) {\n  const attrs = attributes ?? element.getAttributeNames()\n  const numAttrs = attrs.length\n\n  for (let i = 0; i < numAttrs; i++) {\n    const attr = attrs[i]\n    const keep = whitelist.indexOf(attr) > -1\n    if (!keep) element.removeAttribute(attr)\n  }\n\n  if (recursive) {\n    const numChildren = element.children.length\n\n    for (let i = 0; i < numChildren; i++) {\n      removeAttributes(element.children[i], attributes, recursive, whitelist)\n    }\n  }\n}\n\n/**\n * A component whose root element wraps an SVG markup. When wrapping the SVG, it will attempt to\n * sanitize the markup (i.e. stripping useless attributes) according to the props specified.\n */\nexport default forwardRef<HTMLDivElement, Props>(({\n  markup,\n  stripClasses = true,\n  stripExtraneousAttributes = true,\n  stripIds = true,\n  stripStyles = true,\n  whitelistedAttributes = ['viewBox'],\n  ...props\n}, ref) => {\n  function sanitizedMarkup(): string {\n    const mockContainer = document.createElement('div')\n    mockContainer.innerHTML = markup\n\n    const elements = mockContainer.getElementsByTagName('svg')\n    if (elements.length > 1) throw new Error('More than one SVG element found in provided markup')\n\n    const svgElement = elements[0]\n    if (!svgElement) throw new Error('No SVG in provided markup')\n\n    if (stripExtraneousAttributes) removeAttributes(svgElement, undefined, false, [...whitelistedAttributes, 'style', 'class', 'id'])\n    if (stripIds) removeAttributes(svgElement, ['id'], true)\n    if (stripClasses) removeAttributes(svgElement, ['class'], true)\n    if (stripStyles) removeStyles(svgElement)\n\n    return svgElement.outerHTML\n  }\n\n  return (\n    <StyledRoot\n      ref={ref}\n      dangerouslySetInnerHTML={{ __html: sanitizedMarkup() }}\n      {...props}\n    />\n  )\n})\n\nconst StyledRoot = styled.figure`\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  position: relative;\n  width: auto;\n\n  svg {\n    height: auto;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n    }\n  }\n`\n"]}
+{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The SVG string markup, i.e. \"<svg>...</svg>\".\n   */\n  markup: string\n\n  /**\n   * Specifies whether the 'class' should be removed in the SVG root node and all of its child\n   * nodes.\n   */\n  stripClasses?: boolean\n\n  /**\n   * Specifies whether extraneous attributes should be removed from the SVG root node. The\n   * `whitelistedAttributes` prop defines what attributes should be kept.\n   */\n  stripExtraneousAttributes?: boolean\n\n  /**\n   * Specifies whether the 'id' attribute should be removed in the SVG root node and all of its\n   * child nodes.\n   */\n  stripIds?: boolean\n\n  /**\n   * Specifies whether the 'style' atribute and any <style> nodes should be removed in the SVG root\n   * node and all of its child nodes.\n   */\n  stripStyles?: boolean\n\n  /**\n   * Specifies attribute names to exclude from being stripped if `stripExtraneousAttributes` is\n   * enabled. By default, only `viewBox` is whitelisted.\n   */\n  whitelistedAttributes?: string[]\n}\n\nfunction removeStyles(element: Element) {\n  element.removeAttribute('style')\n\n  const inlineStyles = element.getElementsByTagName('style')\n  const numInlineStyles = inlineStyles.length\n\n  for (let i = 0; i < numInlineStyles; i++) {\n    const inlineStyle = inlineStyles[i]\n    inlineStyle.remove()\n  }\n\n  const numChildren = element.children.length\n\n  for (let i = 0; i < numChildren; i++) {\n    removeStyles(element.children[i])\n  }\n}\n\nfunction removeAttributes(element: Element, attributes: string[] | undefined = undefined, recursive = false, whitelist: string[] = []) {\n  const attrs = attributes ?? element.getAttributeNames()\n  const numAttrs = attrs.length\n\n  for (let i = 0; i < numAttrs; i++) {\n    const attr = attrs[i]\n    const keep = whitelist.indexOf(attr) > -1\n    if (!keep) element.removeAttribute(attr)\n  }\n\n  if (recursive) {\n    const numChildren = element.children.length\n\n    for (let i = 0; i < numChildren; i++) {\n      removeAttributes(element.children[i], attributes, recursive, whitelist)\n    }\n  }\n}\n\n/**\n * A component whose root element wraps an SVG markup. When wrapping the SVG, it will attempt to\n * sanitize the markup (i.e. stripping useless attributes) according to the props specified.\n */\nexport default forwardRef<HTMLDivElement, Props>(({\n  markup,\n  stripClasses = true,\n  stripExtraneousAttributes = true,\n  stripIds = true,\n  stripStyles = true,\n  whitelistedAttributes = ['viewBox'],\n  ...props\n}, ref) => {\n  function sanitizedMarkup(): string {\n    const mockContainer = document.createElement('div')\n    mockContainer.innerHTML = markup\n\n    const elements = mockContainer.getElementsByTagName('svg')\n    if (elements.length > 1) throw new Error('More than one SVG element found in provided markup')\n\n    const svgElement = elements[0]\n    if (!svgElement) throw new Error('No SVG in provided markup')\n\n    if (stripExtraneousAttributes) removeAttributes(svgElement, undefined, false, [...whitelistedAttributes, 'style', 'class', 'id'])\n    if (stripIds) removeAttributes(svgElement, ['id'], true)\n    if (stripClasses) removeAttributes(svgElement, ['class'], true)\n    if (stripStyles) removeStyles(svgElement)\n\n    return svgElement.outerHTML\n  }\n\n  return (\n    <StyledRoot\n      ref={ref}\n      dangerouslySetInnerHTML={{ __html: sanitizedMarkup() }}\n      {...props}\n    />\n  )\n})\n\nconst StyledRoot = styled.figure`\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  position: relative;\n  width: auto;\n\n  svg {\n    height: auto;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n    }\n  }\n`\n"]}

package/lib/List.js

@@ -31,7 +31,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/lib/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"/","sources":["List.tsx"],"names":[],"mappings":"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","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 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"]}