etudes 1.2.0 → 2.1.0

package/lib/Dropdown.d.ts

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

package/lib/Dropdown.js

@@ -1,22 +1,14 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
-})();
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
+    return __assign.apply(this, arguments);
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
@@ -41,168 +33,241 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownExpandIcon = exports.DropdownToggle = void 0;
+var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
-var spase_1 = require("spase");
-var styled_components_1 = __importStar(require("styled-components"));
+var FlatSVG_1 = __importDefault(require("./FlatSVG"));
+var useElementRect_1 = __importDefault(require("./hooks/useElementRect"));
 var List_1 = __importDefault(require("./List"));
+var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
+var asComponentDict_1 = __importDefault(require("./utils/asComponentDict"));
+var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
+var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
+var styles_1 = __importDefault(require("./utils/styles"));
 /**
  * A dropdown menu component that is invertible (i.e. can "dropup" instead) and
  * supports both horizontal and vertical orientations. Provide data and item
  * component type to this component to automatically generate menu items.
  */
-var Dropdown = /** @class */ (function (_super) {
-    __extends(Dropdown, _super);
-    function Dropdown(props) {
-        var _this = this;
-        var _a;
-        _this = _super.call(this, props) || this;
-        _this.nodeRefs = {
-            root: (0, react_1.createRef)(),
-        };
-        /**
-         * Handler invoked when click input is detected outside of the root element
-         * of the component.
-         *
-         * @param event - The MouseEvent passed to the handler.
-         */
-        _this.onClickOutside = function (event) {
-            if (_this.state.isCollapsed)
-                return;
-            if (!(event.target instanceof Node))
-                return;
-            var isOutside = true;
-            var node = event.target;
-            while (node) {
-                if (node === _this.nodeRefs.root.current) {
-                    isOutside = false;
-                    break;
-                }
-                if (!node.parentNode)
-                    break;
-                node = node.parentNode;
-            }
-            if (!isOutside)
-                return;
-            _this.collapse();
-        };
-        _this.state = {
-            selectedItemIndex: (_a = _this.props.defaultSelectedItemIndex) !== null && _a !== void 0 ? _a : -1,
-            isCollapsed: true,
-        };
-        return _this;
-    }
-    Object.defineProperty(Dropdown.prototype, "rect", {
-        get: function () {
-            var _a;
-            return (_a = spase_1.Rect.from(this.nodeRefs.root.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Dropdown.prototype.componentDidMount = function () {
-        var _a, _b;
-        window.addEventListener('click', this.onClickOutside);
-        (_b = (_a = this.props).onIndexChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.selectedItemIndex);
-    };
-    Dropdown.prototype.componentWillUnmount = function () {
-        window.removeEventListener('click', this.onClickOutside);
-    };
-    Dropdown.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a, _b;
-        if (prevState.selectedItemIndex !== this.state.selectedItemIndex) {
-            (_b = (_a = this.props).onIndexChange) === null || _b === void 0 ? void 0 : _b.call(_a, this.state.selectedItemIndex);
-        }
-        if (prevProps.orientation !== this.props.orientation) {
-            this.forceUpdate();
-        }
-    };
-    Dropdown.prototype.render = function () {
-        var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        var borderColor = (_a = this.props.borderColor) !== null && _a !== void 0 ? _a : '#000';
-        var borderThickness = (_b = this.props.borderThickness) !== null && _b !== void 0 ? _b : 1;
-        var orientation = (_c = this.props.orientation) !== null && _c !== void 0 ? _c : 'vertical';
-        var itemLength = (_d = this.props.itemLength) !== null && _d !== void 0 ? _d : (orientation === 'vertical' ? this.rect.height : this.rect.width);
-        var maxVisibleItems = (_e = this.props.maxVisibleItems) !== null && _e !== void 0 ? _e : -1;
-        var isTogglable = (_f = this.props.isTogglable) !== null && _f !== void 0 ? _f : true;
-        var itemPadding = (_g = this.props.itemPadding) !== null && _g !== void 0 ? _g : 0;
-        var numItems = this.props.data.length;
-        var numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
-        var menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness;
-        return (react_1.default.createElement(StyledRoot, { className: this.props.className, orientation: orientation, isInverted: (_h = this.props.isInverted) !== null && _h !== void 0 ? _h : false, ref: this.nodeRefs.root, style: (_j = this.props.style) !== null && _j !== void 0 ? _j : {} },
-            react_1.default.createElement(StyledToggle, { borderColor: borderColor, borderThickness: borderThickness, extendedCSS: (_k = this.props.buttonCSS) !== null && _k !== void 0 ? _k : (function () { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""]))); }), isActive: !this.state.isCollapsed, onClick: function () { return _this.toggle(); } },
-                react_1.default.createElement("label", null, this.state.selectedItemIndex === -1 ? ((_l = this.props.defaultLabel) !== null && _l !== void 0 ? _l : 'Select') : this.props.data[this.state.selectedItemIndex].label),
-                this.props.expandIconSvg && react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: this.props.expandIconSvg } })),
-            react_1.default.createElement(StyledItemList, { borderColor: borderColor, borderThickness: borderThickness, data: this.props.data, defaultSelectedIndex: (_m = this.props.defaultSelectedItemIndex) !== null && _m !== void 0 ? _m : -1, isInverted: (_o = this.props.isInverted) !== null && _o !== void 0 ? _o : false, isTogglable: isTogglable, itemComponentType: this.props.itemComponentType, itemPadding: itemPadding, onDeselectAt: function (idx) { return _this.selectItemAt(-1); }, onSelectAt: function (idx) { return _this.selectItemAt(idx); }, orientation: orientation, shouldStaySelected: true, itemStyle: orientation === 'vertical' ? {
-                    height: "".concat(itemLength, "px"),
-                } : {
-                    width: "".concat(itemLength, "px"),
-                }, style: orientation === 'vertical' ? {
-                    height: this.state.isCollapsed ? '0px' : "".concat(menuLength, "px"),
-                    overflowY: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),
-                } : {
-                    width: this.state.isCollapsed ? '0px' : "".concat(menuLength, "px"),
-                    overflowX: (maxVisibleItems === -1) ? 'hidden' : (maxVisibleItems < numItems ? 'scroll' : 'hidden'),
-                } })));
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b, _c, _d;
+    var children = _a.children, className = _a.className, style = _a.style, _e = _a.borderThickness, borderThickness = _e === void 0 ? 0 : _e, data = _a.data, _f = _a.defaultLabel, defaultLabel = _f === void 0 ? 'Select' : _f, expandIconSvg = _a.expandIconSvg, _g = _a.isInverted, isInverted = _g === void 0 ? false : _g, _h = _a.isTogglable, isTogglable = _h === void 0 ? false : _h, itemComponentType = _a.itemComponentType, externalItemLength = _a.itemLength, _j = _a.itemPadding, itemPadding = _j === void 0 ? 0 : _j, _k = _a.maxVisibleItems, maxVisibleItems = _k === void 0 ? -1 : _k, _l = _a.orientation, orientation = _l === void 0 ? 'vertical' : _l, _m = _a.selectedIndex, externalSelectedIndex = _m === void 0 ? -1 : _m, onIndexChange = _a.onIndexChange, props = __rest(_a, ["children", "className", "style", "borderThickness", "data", "defaultLabel", "expandIconSvg", "isInverted", "isTogglable", "itemComponentType", "itemLength", "itemPadding", "maxVisibleItems", "orientation", "selectedIndex", "onIndexChange"]);
+    var selectItemAt = function (index) {
+        setSelectedIndex(index);
+        setIsCollapsed(true);
     };
-    /**
-     * Indicates if the item at the specified index is selected.
-     *
-     * @param index - The index of the item.
-     *
-     * @returns `true` if the item at the specified index is selected, `false`
-     *          otherwise.
-     */
-    Dropdown.prototype.isItemSelectedAt = function (index) {
-        return (this.state.selectedItemIndex === index);
-    };
-    /**
-     * Selects the item at the specified index.
-     *
-     * @param index - The index of the item to select.
-     */
-    Dropdown.prototype.selectItemAt = function (index) {
-        this.setState({
-            selectedItemIndex: index,
-            isCollapsed: true,
-        });
-    };
-    /**
-     * Expands the menu, revealing its items.
-     */
-    Dropdown.prototype.expand = function () {
-        if (!this.state.isCollapsed)
+    var expand = function () {
+        if (!isCollapsed)
             return;
-        this.setState({ isCollapsed: false });
+        setIsCollapsed(false);
     };
-    /**
-     * Collapses the menu, concealing its items.
-     */
-    Dropdown.prototype.collapse = function () {
-        if (this.state.isCollapsed)
+    var collapse = function () {
+        if (isCollapsed)
             return;
-        this.setState({ isCollapsed: true });
+        setIsCollapsed(true);
     };
-    /**
-     * Toggles the visibility of the menu.
-     */
-    Dropdown.prototype.toggle = function () {
-        if (this.state.isCollapsed) {
-            this.expand();
+    var toggle = function () {
+        if (isCollapsed) {
+            expand();
         }
         else {
-            this.collapse();
+            collapse();
         }
     };
-    return Dropdown;
-}(react_1.PureComponent));
-exports.default = Dropdown;
-var StyledItemList = (0, styled_components_1.default)(List_1.default)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n\n  ::-webkit-scrollbar {}\n  ::-webkit-scrollbar-track {}\n  ::-webkit-scrollbar-thumb {}\n  ::-webkit-scrollbar-hover {}\n\n  ", "\n"], ["\n  position: absolute;\n\n  ::-webkit-scrollbar {}\n  ::-webkit-scrollbar-track {}\n  ::-webkit-scrollbar-thumb {}\n  ::-webkit-scrollbar-hover {}\n\n  ", "\n"])), function (props) { return props.orientation === 'vertical' ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    transition: height 100ms ease-out;\n    will-change: height;\n\n    ", "\n  "], ["\n    transition: height 100ms ease-out;\n    will-change: height;\n\n    ", "\n  "])), props.isInverted ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin-bottom: ", "px;\n      bottom: 100%;\n    "], ["\n      margin-bottom: ", "px;\n      bottom: 100%;\n    "])), props.itemPadding - props.borderThickness) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      top: 100%;\n      margin-top: ", "px;\n    "], ["\n      top: 100%;\n      margin-top: ", "px;\n    "])), props.itemPadding - props.borderThickness)) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    transition: width 100ms ease-out;\n    will-change: width;\n\n    ", "\n  "], ["\n    transition: width 100ms ease-out;\n    will-change: width;\n\n    ", "\n  "])), props.isInverted ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-right: ", "px;\n      right: 100%;\n    "], ["\n      margin-right: ", "px;\n      right: 100%;\n    "])), props.itemPadding - props.borderThickness) : (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      left: 100%;\n      margin-left: ", "px;\n    "], ["\n      left: 100%;\n      margin-left: ", "px;\n    "])), props.itemPadding - props.borderThickness)); });
-var StyledToggle = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\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  ", "\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  ", "\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  > 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  ", "\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  ", "\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"])), function (props) { return props.extendedCSS(props); }, function (props) { return props.borderThickness > 0 && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    border: ", "px solid ", ";\n  "], ["\n    border: ", "px solid ", ";\n  "])), props.borderThickness, props.borderColor); });
-var StyledRoot = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\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  ", "\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  ", "\n"])), function (props) { return props.orientation === 'vertical' ? (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    flex-direction: ", ";\n    height: 50px;\n    width: 200px;\n  "], ["\n    flex-direction: ", ";\n    height: 50px;\n    width: 200px;\n  "])), props.isInverted ? 'column-reverse' : 'column') : (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    flex-direction: ", ";\n    height: 200px;\n    width: 50px;\n  "], ["\n    flex-direction: ", ";\n    height: 200px;\n    width: 50px;\n  "])), props.isInverted ? 'row-reverse' : 'row'); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+    var clickOutsideHandler = function (event) {
+        if (isCollapsed)
+            return;
+        if (!(event.target instanceof Node))
+            return;
+        var isOutside = true;
+        var node = event.target;
+        while (node) {
+            if (node === bodyRef.current) {
+                isOutside = false;
+                break;
+            }
+            if (!node.parentNode)
+                break;
+            node = node.parentNode;
+        }
+        if (!isOutside)
+            return;
+        collapse();
+    };
+    var bodyRef = (0, react_1.useRef)(null);
+    var _o = __read((0, react_1.useState)(externalSelectedIndex), 2), selectedIndex = _o[0], setSelectedIndex = _o[1];
+    var _p = __read((0, react_1.useState)(true), 2), isCollapsed = _p[0], setIsCollapsed = _p[1];
+    var rect = (0, useElementRect_1.default)(bodyRef);
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('click', clickOutsideHandler);
+        return function () {
+            window.removeEventListener('click', clickOutsideHandler);
+        };
+    }, [isCollapsed]);
+    (0, react_1.useEffect)(function () {
+        if (externalSelectedIndex === selectedIndex)
+            return;
+        setSelectedIndex(externalSelectedIndex);
+    }, [externalSelectedIndex]);
+    (0, react_1.useEffect)(function () {
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(selectedIndex);
+    }, [selectedIndex]);
+    var itemLength = externalItemLength !== null && externalItemLength !== void 0 ? externalItemLength : (orientation === 'vertical' ? rect.height : rect.width);
+    var numItems = data.length;
+    var numVisibleItems = maxVisibleItems < 0 ? numItems : Math.min(numItems, maxVisibleItems);
+    var menuLength = (itemLength - borderThickness) * numVisibleItems + itemPadding * (numVisibleItems - 1) + borderThickness;
+    var components = (0, asComponentDict_1.default)(children, {
+        toggle: exports.DropdownToggle,
+        expandIcon: exports.DropdownExpandIcon,
+    });
+    var fixedClassNames = (0, asClassNameDict_1.default)({
+        root: (0, classnames_1.default)(orientation, {
+            togglable: isTogglable,
+            collapsed: isCollapsed,
+            expanded: !isCollapsed,
+        }),
+        toggle: (0, classnames_1.default)(orientation, {
+            togglable: isTogglable,
+            collapsed: isCollapsed,
+            expanded: !isCollapsed,
+        }),
+        expandIcon: (0, classnames_1.default)(orientation, {
+            togglable: isTogglable,
+            collapsed: isCollapsed,
+            expanded: !isCollapsed,
+        }),
+        list: (0, classnames_1.default)({
+            togglable: isTogglable,
+            collapsed: isCollapsed,
+            expanded: !isCollapsed,
+        }),
+    });
+    var fixedStyles = (0, asStyleDict_1.default)({
+        root: __assign({ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', overflow: 'visible' }, orientation === 'vertical' ? {
+            flexDirection: isInverted ? 'column-reverse' : 'column',
+        } : {
+            flexDirection: isInverted ? 'row-reverse' : 'row',
+        }),
+        body: {
+            height: '100%',
+            width: '100%',
+        },
+        toggle: {
+            borderWidth: "".concat(borderThickness, "px"),
+            height: '100%',
+            left: '0',
+            margin: '0',
+            outline: 'none',
+            position: 'absolute',
+            top: '0',
+            width: '100%',
+            zIndex: '1',
+        },
+        toggleLabel: {
+            fontFamily: 'inherit',
+            fontSize: 'inherit',
+            fontWeight: 'inherit',
+            letterSpacing: 'inherit',
+            lineHeight: 'inherit',
+        },
+        expandIcon: {},
+        list: __assign({ position: 'absolute' }, orientation === 'vertical' ? __assign({ transition: 'height 100ms ease-out', width: '100%', height: isCollapsed ? '0px' : "".concat(menuLength, "px"), overflowY: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden' }, isInverted ? {
+            marginBottom: "".concat(itemPadding - borderThickness, "px"),
+            bottom: '100%',
+        } : {
+            top: '100%',
+            marginTop: "".concat(itemPadding - borderThickness, "px"),
+        }) : __assign({ transition: 'width 100ms ease-out', width: isCollapsed ? '0px' : "".concat(menuLength, "px"), height: '100%', overflowX: maxVisibleItems === -1 ? 'hidden' : maxVisibleItems < numItems ? 'scroll' : 'hidden' }, isInverted ? {
+            marginRight: "".concat(itemPadding - borderThickness, "px"),
+            right: '100%',
+        } : {
+            left: '100%',
+            marginLeft: "".concat(itemPadding - borderThickness, "px"),
+        })),
+    });
+    var defaultStyles = (0, asStyleDict_1.default)({
+        toggle: {
+            alignItems: 'center',
+            background: '#fff',
+            boxSizing: 'border-box',
+            color: '#000',
+            display: 'flex',
+            flexDirection: 'row',
+            fontSize: '16px',
+            justifyContent: 'space-between',
+            margin: '0',
+            padding: '0 10px',
+        },
+        expandIcon: {
+            height: '15px',
+            margin: '0',
+            padding: '0',
+            width: '15px',
+        },
+    });
+    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
+        react_1.default.createElement("div", { ref: bodyRef, style: (0, styles_1.default)(fixedStyles.body) },
+            cloneStyledElement_1.default.apply(void 0, __spreadArray([(_b = components.toggle) !== null && _b !== void 0 ? _b : react_1.default.createElement("button", { style: defaultStyles.toggle }), {
+                    className: (0, classnames_1.default)(fixedClassNames.toggle),
+                    style: (0, styles_1.default)(fixedStyles.toggle),
+                    onClick: function () { return toggle(); },
+                }], [
+                react_1.default.createElement("label", { style: fixedStyles.toggleLabel, dangerouslySetInnerHTML: { __html: selectedIndex === -1 ? defaultLabel : (_c = data[selectedIndex].label) !== null && _c !== void 0 ? _c : '' } }),
+                (0, cloneStyledElement_1.default)((_d = components.expandIcon) !== null && _d !== void 0 ? _d : (expandIconSvg ? react_1.default.createElement(FlatSVG_1.default, { svg: expandIconSvg, style: defaultStyles.expandIcon }) : react_1.default.createElement(react_1.default.Fragment, null)), {
+                    className: (0, classnames_1.default)(fixedClassNames.expandIcon),
+                    style: (0, styles_1.default)(fixedStyles.expandIcon),
+                }),
+            ], false)),
+            react_1.default.createElement(List_1.default, { className: fixedClassNames.list, style: (0, styles_1.default)(fixedStyles.list), borderThickness: borderThickness, data: data, isSelectable: true, isTogglable: false, itemComponentType: itemComponentType, itemLength: itemLength, itemPadding: itemPadding, orientation: orientation, selectedIndex: selectedIndex, onDeselectAt: function (idx) { return selectItemAt(-1); }, onSelectAt: function (idx) { return selectItemAt(idx); } }))));
+});
+var DropdownToggle = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("button", __assign({}, props));
+};
+exports.DropdownToggle = DropdownToggle;
+var DropdownExpandIcon = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.DropdownExpandIcon = DropdownExpandIcon;
 //# sourceMappingURL=Dropdown.js.map