@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Radio/Radio.story.d.ts

@@ -1,37 +1,37 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _Radio: () => React.JSX.Element;
-export declare const SetToDefaultChecked: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const SetToDisabled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const SetToError: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const SetToRequired: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const Controlled: () => React.JSX.Element;
-export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Radio: () => React.JSX.Element;
+export declare const SetToDefaultChecked: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SetToDisabled: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SetToError: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SetToRequired: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const Controlled: () => React.JSX.Element;
+export declare const UsingRefToControlFocus: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/Radio/Radio.story.js

@@ -0,0 +1,44 @@
+import React, { useRef } from "react";
+import { action } from "@storybook/addon-actions";
+import { Radio, Button } from "../index";
+export default {
+    title: "Components/Radio",
+};
+export const _Radio = () => React.createElement(Radio, { p: "x3", id: "radio", labelText: "I am a radio button", "data-testid": "radio" });
+export const SetToDefaultChecked = () => (React.createElement(React.Fragment, null,
+    React.createElement(Radio, { id: "radio", defaultChecked: true, labelText: "I am checked by default" })));
+SetToDefaultChecked.story = {
+    name: "Set to defaultChecked",
+};
+export const SetToDisabled = () => (React.createElement(React.Fragment, null,
+    React.createElement(Radio, { id: "radio-1", disabled: true, labelText: "I am disabled" }),
+    React.createElement(Radio, { id: "radio-2", checked: true, disabled: true, labelText: "I am disabled" })));
+SetToDisabled.story = {
+    name: "Set to disabled",
+};
+export const SetToError = () => (React.createElement(React.Fragment, null,
+    React.createElement(Radio, { id: "radio", error: true, labelText: "I am error" }),
+    React.createElement(Radio, { id: "radio", defaultChecked: true, error: true, labelText: "I am error" })));
+SetToError.story = {
+    name: "Set to error",
+};
+export const SetToRequired = () => (React.createElement(React.Fragment, null,
+    React.createElement(Radio, { id: "radio", labelText: "I am a radio button", required: true })));
+SetToRequired.story = {
+    name: "Set to required",
+};
+export const Controlled = () => (React.createElement(React.Fragment, null,
+    React.createElement(Radio, { id: "radio-1", checked: true, onChange: action("onChange"), labelText: "I am controlled and checked" }),
+    React.createElement(Radio, { id: "radio-2", checked: false, onChange: action("onChange"), labelText: "I am controlled and unchecked" })));
+export const UsingRefToControlFocus = () => {
+    const ref = useRef(null);
+    const handleClick = () => {
+        ref.current.focus();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Radio, { ref: ref, checked: true, onChange: action("onChange"), labelText: "I am controlled and checked" }),
+        React.createElement(Button, { onClick: handleClick }, "Focus the Input")));
+};
+UsingRefToControlFocus.story = {
+    name: "using ref to control focus",
+};

package/dist/src/Radio/RadioGroup.d.ts

@@ -1,20 +1,20 @@
-import React from "react";
-interface RadioGroupProps {
-    className?: string;
-    id?: string;
-    errorMessage?: string;
-    errorList?: string[];
-    labelText?: string;
-    helpText?: string;
-    required?: boolean;
-    requirementText?: string;
-    children?: React.ReactNode;
-    name?: string;
-    disabled?: boolean;
-    defaultValue?: string;
-    checkedValue?: string;
-    default?: boolean;
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-export default function RadioGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, ...props }: RadioGroupProps): React.JSX.Element;
-export {};
+import React from "react";
+interface RadioGroupProps {
+    className?: string;
+    id?: string;
+    errorMessage?: string;
+    errorList?: string[];
+    labelText?: string;
+    helpText?: string;
+    required?: boolean;
+    requirementText?: string;
+    children?: React.ReactNode;
+    name?: string;
+    disabled?: boolean;
+    defaultValue?: string;
+    checkedValue?: string;
+    default?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export default function RadioGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, ...props }: RadioGroupProps): React.JSX.Element;
+export {};

package/dist/src/Radio/RadioGroup.js

@@ -0,0 +1,41 @@
+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;
+};
+import React from "react";
+import { useTheme } from "styled-components";
+import { HelpText, RequirementText } from "../FieldLabel";
+import { InlineValidation } from "../Validation";
+import { Fieldset } from "../Form";
+import Radio from "./Radio";
+export default function RadioGroup(_a) {
+    var { className, id, errorMessage, errorList, labelText, helpText, requirementText } = _a, props = __rest(_a, ["className", "id", "errorMessage", "errorList", "labelText", "helpText", "requirementText"]);
+    const otherProps = Object.assign(Object.assign({}, props), { errorMessage, errorList });
+    const theme = useTheme();
+    return (React.createElement(Fieldset, { className: className, id: id },
+        React.createElement("legend", { style: { marginBottom: theme.space.x1 } },
+            React.createElement("span", { style: labelTextStyles(theme) }, labelText),
+            requirementText && React.createElement(RequirementText, null, requirementText)),
+        helpText && React.createElement(HelpText, null, helpText),
+        getRadioButtons(otherProps),
+        React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList })));
+}
+const labelTextStyles = (theme) => ({
+    fontSize: theme.fontSizes.small,
+    fontWeight: Number(theme.fontWeights.bold),
+    lineHeight: theme.lineHeights.smallTextBase,
+});
+const getRadioButtons = (props) => {
+    const radioButtons = React.Children.map(props.children, (radio) => {
+        const _a = radio.props, { value, disabled, required, onChange } = _a, radioProps = __rest(_a, ["value", "disabled", "required", "onChange"]);
+        return (React.createElement(Radio, Object.assign({}, radioProps, { value: value, disabled: props.disabled || disabled, error: !!(props.errorMessage || props.errorList), required: props.required || required, name: props.name, defaultChecked: value === props.defaultValue ? true : undefined, checked: props.checkedValue && value === props.checkedValue, onChange: props.onChange || onChange })));
+    });
+    return radioButtons;
+};

package/dist/src/Radio/RadioGroup.story.d.ts

@@ -1,46 +1,46 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            diffThreshold: number;
-        };
-    };
-};
-export default _default;
-export declare const _RadioGroup: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const RadioGroupWithAllProps: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-    parameters: {
-        chromatic: {
-            diffThreshold: number;
-        };
-    };
-};
-export declare const WithErrorMessage: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithErrorList: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const SetToDisabled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const Controlled: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        chromatic: {
+            diffThreshold: number;
+        };
+    };
+};
+export default _default;
+export declare const _RadioGroup: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const RadioGroupWithAllProps: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+    parameters: {
+        chromatic: {
+            diffThreshold: number;
+        };
+    };
+};
+export declare const WithErrorMessage: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithErrorList: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const SetToDisabled: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const Controlled: () => React.JSX.Element;

package/dist/src/Radio/RadioGroup.story.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { Radio, RadioGroup, Icon, Tooltip, Flex } from "../index";
+const errorList = ["Error message 1", "Error message 2"];
+export default {
+    title: "Components/RadioGroup",
+    parameters: {
+        chromatic: { diffThreshold: 0.3 },
+    },
+};
+export const _RadioGroup = () => (React.createElement(RadioGroup, { labelText: "Setting Selection", name: "settingSelection" },
+    React.createElement(Radio, { value: "a", labelText: "Option A" }),
+    React.createElement(Radio, { value: "b", labelText: "Option B" }),
+    React.createElement(Radio, { value: "c", labelText: "Option C" })));
+_RadioGroup.story = {
+    name: "RadioGroup",
+};
+export const RadioGroupWithAllProps = () => (React.createElement(RadioGroup, { labelText: "Setting Selection", name: "settingSelection", helpText: "Select a setting from the menu below:", required: true, requirementText: "(Required)", defaultValue: "a" },
+    React.createElement(Radio, { value: "a", labelText: React.createElement(Flex, { alignItems: "center" },
+            "Option A",
+            React.createElement(Tooltip, { placement: "bottom", tooltip: "Option A is a special option with extra information", defaultOpen: true },
+                React.createElement(Icon, { icon: "help", color: "darkBlue", size: "x2", ml: "x1" }))) }),
+    React.createElement(Radio, { value: "b", labelText: "Option B" }),
+    React.createElement(Radio, { value: "c", labelText: "Option C" })));
+RadioGroupWithAllProps.story = {
+    name: "RadioGroup with all props",
+};
+RadioGroupWithAllProps.parameters = {
+    chromatic: { diffThreshold: 0.3 },
+};
+export const WithErrorMessage = () => (React.createElement(RadioGroup, { errorMessage: "Please select an option", labelText: "Setting Selection", name: "settingSelection", defaultValue: "a" },
+    React.createElement(Radio, { value: "a", labelText: "Option A" }),
+    React.createElement(Radio, { value: "b", labelText: "Option B" }),
+    React.createElement(Radio, { value: "c", labelText: "Option C" })));
+WithErrorMessage.story = {
+    name: "with error message",
+};
+export const WithErrorList = () => (React.createElement(RadioGroup, { errorMessage: "Please select an option", errorList: errorList, labelText: "Setting Selection", name: "settingSelection", defaultValue: "a" },
+    React.createElement(Radio, { value: "a", labelText: "Option A" }),
+    React.createElement(Radio, { value: "b", labelText: "Option B" }),
+    React.createElement(Radio, { value: "c", labelText: "Option C" })));
+WithErrorList.story = {
+    name: "with error list",
+};
+export const SetToDisabled = () => (React.createElement(RadioGroup, { disabled: true, labelText: "Setting Selection", name: "settingSelection", defaultValue: "a" },
+    React.createElement(Radio, { value: "a", labelText: "Option A" }),
+    React.createElement(Radio, { value: "b", labelText: "Option B" }),
+    React.createElement(Radio, { value: "c", labelText: "Option C" })));
+SetToDisabled.story = {
+    name: "Set to disabled",
+};
+export const Controlled = () => (React.createElement(RadioGroup, { labelText: "Setting Selection", name: "settingSelection", checkedValue: "a", onChange: () => { } },
+    React.createElement(Radio, { value: "a", labelText: "Option A" }),
+    React.createElement(Radio, { value: "b", labelText: "Option B" }),
+    React.createElement(Radio, { value: "c", labelText: "Option C" })));

package/dist/src/Radio/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Radio } from "./Radio";
-export { default as RadioGroup } from "./RadioGroup";
+export { default as Radio } from "./Radio";
+export { default as RadioGroup } from "./RadioGroup";

package/dist/src/Radio/index.js

@@ -0,0 +1,2 @@
+export { default as Radio } from "./Radio";
+export { default as RadioGroup } from "./RadioGroup";

package/dist/src/RangeContainer/RangeContainer.d.ts

@@ -1,12 +1,12 @@
-import React from "react";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-type RangeContainerProps = {
-    labelProps?: any;
-    startComponent?: React.ReactNode;
-    endComponent?: React.ReactNode;
-    variant?: ComponentVariant;
-    errorMessages?: (string | undefined)[];
-    children?: React.ReactNode;
-};
-declare const RangeContainer: ({ startComponent, endComponent, errorMessages, labelProps, variant, ...props }: RangeContainerProps) => React.JSX.Element;
-export default RangeContainer;
+import React from "react";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+type RangeContainerProps = {
+    labelProps?: any;
+    startComponent?: React.ReactNode;
+    endComponent?: React.ReactNode;
+    variant?: ComponentVariant;
+    errorMessages?: (string | undefined)[];
+    children?: React.ReactNode;
+};
+declare const RangeContainer: ({ startComponent, endComponent, errorMessages, labelProps, variant, ...props }: RangeContainerProps) => React.JSX.Element;
+export default RangeContainer;

package/dist/src/RangeContainer/RangeContainer.js

@@ -0,0 +1,35 @@
+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;
+};
+import React from "react";
+import propTypes from "@styled-system/prop-types";
+import { Text } from "../Type";
+import { Flex } from "../Flex";
+import { FieldLabel } from "../FieldLabel";
+import { FieldLabelDefaultProps } from "../FieldLabel/FieldLabel.type";
+import { InlineValidation } from "../Validation";
+import { getSubset, omitSubset } from "../utils/subset";
+const RangeContainer = (_a) => {
+    var { startComponent, endComponent, errorMessages = [], labelProps = Object.assign(Object.assign({}, FieldLabelDefaultProps), { labelText: "Range" }), variant } = _a, props = __rest(_a, ["startComponent", "endComponent", "errorMessages", "labelProps", "variant"]);
+    const spaceProps = getSubset(props, propTypes.space);
+    const restProps = omitSubset(props, propTypes.space);
+    return (React.createElement(Flex, Object.assign({}, spaceProps, { flexDirection: "column" }),
+        React.createElement(FieldLabel, Object.assign({}, labelProps, restProps)),
+        React.createElement(Flex, { flexWrap: "wrap", mt: "x1", mb: errorMessages.length ? "x1" : "x3" },
+            React.createElement(Flex, null, startComponent),
+            React.createElement(Flex, { px: "half", alignItems: "flex-end", alignSelf: "flex-end" },
+                React.createElement(Text, { lineHeight: variant === "touch" ? "56px" : "38px" }, "-")),
+            React.createElement(Flex, null, endComponent)),
+        errorMessages.map((errorMessage, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        React.createElement(InlineValidation, { key: i, errorMessage: errorMessage })))));
+};
+export default RangeContainer;

package/dist/src/RangeContainer/RangeContainer.story.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _RangeContainer: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _RangeContainer: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/RangeContainer/RangeContainer.story.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { RangeContainer } from ".";
+export default {
+    title: "Components/RangeContainer",
+};
+export const _RangeContainer = () => React.createElement(RangeContainer, null, "Example");
+_RangeContainer.story = {
+    name: "RangeContainer",
+};

package/dist/src/RangeContainer/index.d.ts

@@ -1 +1 @@
-export { default as RangeContainer } from "./RangeContainer";
+export { default as RangeContainer } from "./RangeContainer";

package/dist/src/RangeContainer/index.js

@@ -0,0 +1 @@
+export { default as RangeContainer } from "./RangeContainer";

package/dist/src/Select/MenuList.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
-declare function MenuList(props: any): React.JSX.Element;
-export default MenuList;
+import * as React from "react";
+declare function MenuList(props: any): React.JSX.Element;
+export default MenuList;

package/dist/src/Select/MenuList.js

@@ -0,0 +1,126 @@
+/*
+  Copied as is from: https://github.com/jacobworrel/react-windowed-select/blob/master/src/MenuList.tsx
+  MIT License
+  Copyright (c) 2019 Jacob Worrel
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+*/
+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;
+};
+import * as React from "react";
+import { VariableSizeList as List } from "react-window";
+import { createGetHeight, flattenGroupedChildren, getCurrentIndex } from "./lib";
+function MenuList(props) {
+    const children = React.useMemo(() => {
+        const children = React.Children.toArray(props.children);
+        const head = children[0] || {};
+        if (React.isValidElement(head)) {
+            const { props: { data: { options = [] } = {} } = {} } = head;
+            const groupedChildrenLength = options.length;
+            const isGrouped = groupedChildrenLength > 0;
+            const flattenedChildren = isGrouped && flattenGroupedChildren(children);
+            return isGrouped ? flattenedChildren : children;
+        }
+        else {
+            return [];
+        }
+    }, [props.children]);
+    const { getStyles } = props;
+    const groupHeadingStyles = getStyles("groupHeading", props);
+    const loadingMsgStyles = getStyles("loadingMessage", props);
+    const noOptionsMsgStyles = getStyles("noOptionsMessage", props);
+    const optionStyles = getStyles("option", props);
+    const getHeight = createGetHeight({
+        groupHeadingStyles,
+        noOptionsMsgStyles,
+        optionStyles,
+        loadingMsgStyles,
+    });
+    const heights = React.useMemo(() => children.map(getHeight), [children]);
+    const currentIndex = React.useMemo(() => getCurrentIndex(children), [children]);
+    const itemCount = children.length;
+    const [measuredHeights, setMeasuredHeights] = React.useState({});
+    // calc menu height
+    const _a = getStyles("menuList", props), { maxHeight, paddingBottom = 0, paddingTop = 0 } = _a, menuListStyle = __rest(_a, ["maxHeight", "paddingBottom", "paddingTop"]);
+    const totalHeight = React.useMemo(() => {
+        return heights.reduce((sum, height, idx) => {
+            if (measuredHeights[idx]) {
+                return sum + measuredHeights[idx];
+            }
+            else {
+                return sum + height;
+            }
+        }, 0);
+    }, [heights, measuredHeights]);
+    const totalMenuHeight = totalHeight + paddingBottom + paddingTop;
+    const menuHeight = Math.min(maxHeight, totalMenuHeight);
+    const estimatedItemSize = Math.floor(totalHeight / itemCount);
+    const { innerRef, selectProps } = props;
+    const { classNamePrefix, isMulti } = selectProps || {};
+    const list = React.useRef(null);
+    React.useEffect(() => {
+        setMeasuredHeights({});
+    }, [props.children]);
+    // method to pass to inner item to set this items outer height
+    const setMeasuredHeight = ({ index, measuredHeight }) => {
+        if (measuredHeights[index] !== undefined && measuredHeights[index] === measuredHeight) {
+            return;
+        }
+        setMeasuredHeights((measuredHeights) => (Object.assign(Object.assign({}, measuredHeights), { [index]: measuredHeight })));
+        // this forces the list to rerender items after the item positions resizing
+        if (list.current) {
+            list.current.resetAfterIndex(index);
+        }
+    };
+    React.useEffect(() => {
+        /**
+         * enables scrolling on key down arrow
+         */
+        if (currentIndex >= 0 && list.current !== null) {
+            list.current.scrollToItem(currentIndex);
+        }
+    }, [currentIndex, children, list]);
+    return (React.createElement(List, { className: classNamePrefix
+            ? `${classNamePrefix}__menu-list${isMulti ? ` ${classNamePrefix}__menu-list--is-multi` : ""}`
+            : "", style: menuListStyle, ref: list, outerRef: innerRef, estimatedItemSize: estimatedItemSize, innerElementType: React.forwardRef((_a, ref) => {
+            var { style } = _a, rest = __rest(_a, ["style"]);
+            return (React.createElement("div", Object.assign({ ref: ref, style: Object.assign(Object.assign({}, style), { height: `${parseFloat(style.height) + paddingBottom + paddingTop}px` }) }, rest)));
+        }), height: menuHeight, width: "100%", itemCount: itemCount, itemData: children, itemSize: (index) => measuredHeights[index] || heights[index] }, ({ data, index, style }) => {
+        return (React.createElement("div", { style: Object.assign(Object.assign({}, style), { top: `${parseFloat(style.top.toString()) + paddingTop}px` }) },
+            React.createElement(MenuItem, { data: data[index], index: index, setMeasuredHeight: setMeasuredHeight })));
+    }));
+}
+function MenuItem({ data, index, setMeasuredHeight }) {
+    const ref = React.useRef(null);
+    // using useLayoutEffect prevents bounciness of options of re-renders
+    React.useLayoutEffect(() => {
+        if (ref.current) {
+            const measuredHeight = ref.current.getBoundingClientRect().height;
+            setMeasuredHeight({ index, measuredHeight });
+        }
+    }, [ref.current]);
+    return (React.createElement("div", { key: `option-${index}`, ref: ref }, data));
+}
+export default MenuList;