@nulogy/components 15.2.2 → 15.3.0

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

@@ -5,113 +5,121 @@ declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<Omit<{
         children?: React.ReactNode | Record<string, unknown>;
-        value?: string | number | readonly string[];
+        value?: string | readonly string[] | number | undefined;
         ref?: React.Ref<HTMLInputElement>;
-        form?: string;
-        slot?: string;
-        style?: React.CSSProperties;
-        title?: string;
-        pattern?: string;
-        property?: string;
-        color?: string;
-        content?: string;
-        height?: string | number;
-        translate?: "yes" | "no";
-        width?: string | number;
-        hidden?: boolean;
-        key?: React.Key;
-        defaultChecked?: boolean;
-        defaultValue?: string | number | readonly string[];
-        suppressContentEditableWarning?: boolean;
-        suppressHydrationWarning?: boolean;
-        accessKey?: string;
-        autoFocus?: boolean;
-        className?: string;
-        contentEditable?: "inherit" | (boolean | "true" | "false");
-        contextMenu?: string;
-        dir?: string;
-        draggable?: boolean | "true" | "false";
-        id?: string;
-        lang?: string;
-        nonce?: string;
-        placeholder?: string;
-        spellCheck?: boolean | "true" | "false";
-        tabIndex?: number;
-        radioGroup?: string;
-        role?: React.AriaRole;
-        about?: string;
-        datatype?: string;
+        form?: string | undefined;
+        slot?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        title?: string | undefined;
+        pattern?: string | undefined;
+        property?: string | undefined;
+        color?: string | undefined;
+        content?: string | undefined;
+        height?: number | string | undefined;
+        translate?: "yes" | "no" | undefined;
+        width?: number | string | undefined;
+        hidden?: boolean | undefined;
+        key?: React.Key | null | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+        autoFocus?: boolean | undefined;
+        className?: string | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        placeholder?: string | undefined;
+        spellCheck?: (boolean | "true" | "false") | undefined;
+        tabIndex?: number | undefined;
+        radioGroup?: string | undefined;
+        role?: React.AriaRole | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
         inlist?: any;
-        prefix?: string;
-        rel?: string;
-        resource?: string;
-        rev?: string;
-        typeof?: string;
-        vocab?: string;
-        autoCapitalize?: string;
-        autoCorrect?: string;
-        autoSave?: string;
-        itemProp?: string;
-        itemScope?: boolean;
-        itemType?: string;
-        itemID?: string;
-        itemRef?: string;
-        results?: number;
-        security?: string;
-        unselectable?: "on" | "off";
-        inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
-        is?: string;
-        'aria-activedescendant'?: string;
-        'aria-atomic'?: boolean | "true" | "false";
-        'aria-autocomplete'?: "none" | "list" | "inline" | "both";
-        'aria-busy'?: boolean | "true" | "false";
-        'aria-checked'?: boolean | "true" | "false" | "mixed";
-        'aria-colcount'?: number;
-        'aria-colindex'?: number;
-        'aria-colspan'?: number;
-        'aria-controls'?: string;
-        'aria-current'?: boolean | "time" | "true" | "false" | "step" | "page" | "location" | "date";
-        'aria-describedby'?: string;
-        'aria-details'?: string;
-        'aria-disabled'?: boolean | "true" | "false";
-        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup";
-        'aria-errormessage'?: string;
-        'aria-expanded'?: boolean | "true" | "false";
-        'aria-flowto'?: string;
-        'aria-grabbed'?: boolean | "true" | "false";
-        'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree";
-        'aria-hidden'?: boolean | "true" | "false";
-        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
-        'aria-keyshortcuts'?: string;
-        'aria-label'?: string;
-        'aria-labelledby'?: string;
-        'aria-level'?: number;
-        'aria-live'?: "off" | "assertive" | "polite";
-        'aria-modal'?: boolean | "true" | "false";
-        'aria-multiline'?: boolean | "true" | "false";
-        'aria-multiselectable'?: boolean | "true" | "false";
-        'aria-orientation'?: "horizontal" | "vertical";
-        'aria-owns'?: string;
-        'aria-placeholder'?: string;
-        'aria-posinset'?: number;
-        'aria-pressed'?: boolean | "true" | "false" | "mixed";
-        'aria-readonly'?: boolean | "true" | "false";
-        'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
-        'aria-required'?: boolean | "true" | "false";
-        'aria-roledescription'?: string;
-        'aria-rowcount'?: number;
-        'aria-rowindex'?: number;
-        'aria-rowspan'?: number;
-        'aria-selected'?: boolean | "true" | "false";
-        'aria-setsize'?: number;
-        'aria-sort'?: "none" | "ascending" | "descending" | "other";
-        'aria-valuemax'?: number;
-        'aria-valuemin'?: number;
-        'aria-valuenow'?: number;
-        'aria-valuetext'?: string;
+        prefix?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: (boolean | "true" | "false") | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
-        };
+        } | undefined;
         onCopy?: React.ClipboardEventHandler<HTMLInputElement>;
         onCopyCapture?: React.ClipboardEventHandler<HTMLInputElement>;
         onCut?: React.ClipboardEventHandler<HTMLInputElement>;
@@ -130,7 +138,7 @@ declare const _default: {
         onBlurCapture?: React.FocusEventHandler<HTMLInputElement>;
         onChange?: React.ChangeEventHandler<HTMLInputElement>;
         onChangeCapture?: React.FormEventHandler<HTMLInputElement>;
-        onBeforeInput?: React.FormEventHandler<HTMLInputElement>;
+        onBeforeInput?: React.InputEventHandler<HTMLInputElement>;
         onBeforeInputCapture?: React.FormEventHandler<HTMLInputElement>;
         onInput?: React.FormEventHandler<HTMLInputElement>;
         onInputCapture?: React.FormEventHandler<HTMLInputElement>;
@@ -272,31 +280,29 @@ declare const _default: {
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLInputElement>;
         onTransitionEnd?: React.TransitionEventHandler<HTMLInputElement>;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement>;
-        list?: string;
-        name?: string;
-        type?: React.HTMLInputTypeAttribute;
-        crossOrigin?: "" | "anonymous" | "use-credentials";
-        alt?: string;
-        src?: string;
-        disabled?: boolean;
-        formAction?: string;
-        formEncType?: string;
-        formMethod?: string;
-        formNoValidate?: boolean;
-        formTarget?: string;
-        autoComplete?: string;
-        accept?: string;
-        capture?: boolean | "user" | "environment";
-        checked?: boolean;
-        enterKeyHint?: "search" | "next" | "enter" | "done" | "go" | "previous" | "send";
-        max?: string | number;
-        maxLength?: number;
-        min?: string | number;
-        minLength?: number;
-        multiple?: boolean;
-        readOnly?: boolean;
-        required?: boolean;
-        step?: string | number;
+        list?: string | undefined;
+        name?: string | undefined;
+        type?: React.HTMLInputTypeAttribute | undefined;
+        alt?: string | undefined;
+        src?: string | undefined;
+        disabled?: boolean | undefined;
+        formAction?: string | undefined;
+        formEncType?: string | undefined;
+        formMethod?: string | undefined;
+        formNoValidate?: boolean | undefined;
+        formTarget?: string | undefined;
+        autoComplete?: string | undefined;
+        accept?: string | undefined;
+        capture?: boolean | "user" | "environment" | undefined;
+        checked?: boolean | undefined;
+        max?: number | string | undefined;
+        maxLength?: number | undefined;
+        min?: number | string | undefined;
+        minLength?: number | undefined;
+        multiple?: boolean | undefined;
+        readOnly?: boolean | undefined;
+        required?: boolean | undefined;
+        step?: number | string | undefined;
     } & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
         htmlSize?: number;
         variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;

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

@@ -23,25 +23,25 @@ export const SetToDefaultChecked = {
 };
 export const SetToDisabled = {
     render: (args) => (React.createElement(React.Fragment, null,
-        React.createElement(Radio, Object.assign({}, args, { id: "radio-1", disabled: true, labelText: "I am disabled" })),
-        React.createElement(Radio, Object.assign({}, args, { id: "radio-2", checked: true, disabled: true, labelText: "I am disabled" })))),
+        React.createElement(Radio, { ...args, id: "radio-1", disabled: true, labelText: "I am disabled" }),
+        React.createElement(Radio, { ...args, id: "radio-2", checked: true, disabled: true, labelText: "I am disabled" }))),
     name: "Set to disabled",
 };
 export const SetToError = {
     render: (args) => (React.createElement(React.Fragment, null,
-        React.createElement(Radio, Object.assign({}, args, { id: "radio", error: true, labelText: "I am error" })),
-        React.createElement(Radio, Object.assign({}, args, { id: "radio", defaultChecked: true, error: true, labelText: "I am error" })))),
+        React.createElement(Radio, { ...args, id: "radio", error: true, labelText: "I am error" }),
+        React.createElement(Radio, { ...args, id: "radio", defaultChecked: true, error: true, labelText: "I am error" }))),
     name: "Set to error",
 };
 export const SetToRequired = {
     render: (args) => (React.createElement(React.Fragment, null,
-        React.createElement(Radio, Object.assign({}, args, { id: "radio", labelText: "I am a radio button", required: true })))),
+        React.createElement(Radio, { ...args, id: "radio", labelText: "I am a radio button", required: true }))),
     name: "Set to required",
 };
 export const Controlled = {
     render: (args) => (React.createElement(React.Fragment, null,
-        React.createElement(Radio, Object.assign({}, args, { id: "radio-1", checked: true, onChange: action("onChange"), labelText: "I am controlled and checked" })),
-        React.createElement(Radio, Object.assign({}, args, { id: "radio-2", checked: false, onChange: action("onChange"), labelText: "I am controlled and unchecked" })))),
+        React.createElement(Radio, { ...args, id: "radio-1", checked: true, onChange: action("onChange"), labelText: "I am controlled and checked" }),
+        React.createElement(Radio, { ...args, id: "radio-2", checked: false, onChange: action("onChange"), labelText: "I am controlled and unchecked" }))),
 };
 const UsingRefToControlFocusComponent = () => {
     const ref = useRef(null);
@@ -53,6 +53,6 @@ const UsingRefToControlFocusComponent = () => {
         React.createElement(Button, { onClick: handleClick, "data-testid": "the-button" }, "Focus the Input")));
 };
 export const UsingRefToControlFocus = {
-    render: (args) => React.createElement(UsingRefToControlFocusComponent, Object.assign({}, args)),
+    render: (args) => React.createElement(UsingRefToControlFocusComponent, { ...args }),
     name: "using ref to control focus",
 };

package/dist/src/Radio/RadioGroup.js

@@ -1,23 +1,11 @@
-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 });
+export default function RadioGroup({ className, id, errorMessage, errorList, labelText, helpText, requirementText, ...props }) {
+    const otherProps = { ...props, errorMessage, errorList };
     const theme = useTheme();
     return (React.createElement(Fieldset, { className: className, id: id },
         React.createElement("legend", { style: { marginBottom: theme.space.x1 } },
@@ -34,8 +22,8 @@ const labelTextStyles = (theme) => ({
 });
 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 })));
+        const { value, disabled, required, onChange, ...radioProps } = radio.props;
+        return (React.createElement(Radio, { ...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/RangeContainer/RangeContainer.js

@@ -1,14 +1,3 @@
-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";
@@ -17,12 +6,14 @@ 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 RangeContainer = ({ startComponent, endComponent, errorMessages = [], labelProps = {
+    ...FieldLabelDefaultProps,
+    labelText: "Range",
+}, variant, ...props }) => {
     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)),
+    return (React.createElement(Flex, { ...spaceProps, flexDirection: "column" },
+        React.createElement(FieldLabel, { ...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" },

package/dist/src/Select/MenuList.js

@@ -18,17 +18,6 @@
   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";
@@ -63,7 +52,7 @@ function MenuList(props) {
     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 { maxHeight, paddingBottom = 0, paddingTop = 0, ...menuListStyle } = getStyles("menuList", props);
     const totalHeight = React.useMemo(() => {
         return heights.reduce((sum, height, idx) => {
             if (measuredHeights[idx]) {
@@ -88,7 +77,10 @@ function MenuList(props) {
         if (measuredHeights[index] !== undefined && measuredHeights[index] === measuredHeight) {
             return;
         }
-        setMeasuredHeights((measuredHeights) => (Object.assign(Object.assign({}, measuredHeights), { [index]: measuredHeight })));
+        setMeasuredHeights((measuredHeights) => ({
+            ...measuredHeights,
+            [index]: measuredHeight,
+        }));
         // this forces the list to rerender items after the item positions resizing
         if (list.current) {
             list.current.resetAfterIndex(index);
@@ -104,11 +96,14 @@ function MenuList(props) {
     }, [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` }) },
+            : "", style: menuListStyle, ref: list, outerRef: innerRef, estimatedItemSize: estimatedItemSize, innerElementType: React.forwardRef(({ style, ...rest }, ref) => (React.createElement("div", { ref: ref, style: {
+                ...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: {
+                ...style,
+                top: `${parseFloat(style.top.toString()) + paddingTop}px`,
+            } },
             React.createElement(MenuItem, { data: data[index], index: index, setMeasuredHeight: setMeasuredHeight })));
     }));
 }

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

@@ -30,5 +30,5 @@ export interface CustomProps<Option extends NDSOption, IsMulti extends boolean,
     styles?: (selectStyles: StylesConfig<Option, IsMulti, Group>) => StylesConfig<Option, IsMulti, Group>;
 }
 export type NDSSelectProps<Option extends NDSOption = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = Omit<Props<Option, IsMulti, Group>, keyof CustomProps<Option, IsMulti, Group> | "isSearchable" | "isDisabled" | "defaultMenuIsOpen" | "isMulti" | "styles"> & CustomProps<Option, IsMulti, Group>;
-declare const NDSSelect: <Option extends NDSOption = NDSOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: Omit<Props<Option, IsMulti, Group>, "isMulti" | "isDisabled" | "isSearchable" | "defaultMenuIsOpen" | keyof CustomProps<Option_1, IsMulti_1, Group_1>> & CustomProps<Option, IsMulti, Group> & React.RefAttributes<Select<Option, IsMulti, Group>>) => React.ReactElement;
+declare const NDSSelect: <Option extends NDSOption = NDSOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: NDSSelectProps<Option, IsMulti, Group> & React.RefAttributes<Select<Option, IsMulti, Group>>) => React.ReactElement;
 export default NDSSelect;

package/dist/src/Select/Select.js

@@ -1,14 +1,3 @@
-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, { forwardRef } from "react";
 import ReactSelect from "react-select";
 import { useTranslation } from "react-i18next";
@@ -25,8 +14,7 @@ import { SelectControl, SelectMultiValue, SelectClearIndicator, SelectContainer,
 import { SelectOption } from "./SelectOption";
 import MenuList from "./MenuList";
 import { calcOptionsLength, checkOptionsAreValid, extractValue, getReactSelectValue } from "./lib";
-const NDSSelect = forwardRef((_a, ref) => {
-    var { value, onChange, defaultValue, disabled, errorMessage, errorList, id, initialIsOpen, multiselect, placeholder, components, options, styles, windowThreshold = 300, autocomplete = true, maxHeight = "248px", required = false, menuPosition = "absolute", menuPlacement = "bottom", classNamePrefix = "ndsSelect", closeMenuOnSelect = true, noOptionsMessage } = _a, props = __rest(_a, ["value", "onChange", "defaultValue", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "multiselect", "placeholder", "components", "options", "styles", "windowThreshold", "autocomplete", "maxHeight", "required", "menuPosition", "menuPlacement", "classNamePrefix", "closeMenuOnSelect", "noOptionsMessage"]);
+const NDSSelect = forwardRef(({ value, onChange, defaultValue, disabled, errorMessage, errorList, id, initialIsOpen, multiselect, placeholder, components, options, styles, windowThreshold = 300, autocomplete = true, maxHeight = "248px", required = false, menuPosition = "absolute", menuPlacement = "bottom", classNamePrefix = "ndsSelect", closeMenuOnSelect = true, noOptionsMessage, ...props }, ref) => {
     const { t } = useTranslation();
     const variant = useComponentVariant();
     const theme = useTheme();
@@ -49,14 +37,25 @@ const NDSSelect = forwardRef((_a, ref) => {
         maxHeight,
         windowed: options.length > windowThreshold,
     });
-    return (React.createElement(Field, Object.assign({}, styledProps),
-        React.createElement(MaybeFieldLabel, Object.assign({}, fieldLabelProps),
-            React.createElement(ReactSelect, Object.assign({ ref: ref, isSearchable: autocomplete, isDisabled: disabled, defaultMenuIsOpen: initialIsOpen, isMulti: multiselect, defaultValue: getReactSelectValue(options, defaultValue), value: getReactSelectValue(options, value), options: options, onChange: (newValue) => {
+    return (React.createElement(Field, { ...styledProps },
+        React.createElement(MaybeFieldLabel, { ...fieldLabelProps },
+            React.createElement(ReactSelect, { ref: ref, isSearchable: autocomplete, isDisabled: disabled, defaultMenuIsOpen: initialIsOpen, isMulti: multiselect, defaultValue: getReactSelectValue(options, defaultValue), value: getReactSelectValue(options, value), options: options, onChange: (newValue) => {
                     if (!onChange)
                         return;
                     const value = extractValue(newValue, multiselect);
                     onChange(value);
-                }, placeholder: placeholder || t("select"), "aria-required": required, required: required, "aria-invalid": error, inputId: id, styles: styles ? styles(stylesConfig) : stylesConfig, components: Object.assign(Object.assign({ Option: (props) => React.createElement(SelectOption, Object.assign({}, props), props.children), Control: SelectControl, MultiValue: SelectMultiValue, ClearIndicator: SelectClearIndicator, DropdownIndicator: SelectDropdownIndicator, SelectContainer: SelectContainer, Menu: SelectMenu, Input: SelectInput }, (isWindowed ? { MenuList } : {})), components), closeMenuOnSelect: closeMenuOnSelect, classNamePrefix: classNamePrefix, menuPosition: menuPosition, menuPlacement: menuPlacement, maxMenuHeight: numberFromDimension(maxHeight), noOptionsMessage: noOptionsMessage }, props)),
+                }, placeholder: placeholder || t("select"), "aria-required": required, required: required, "aria-invalid": error, inputId: id, styles: styles ? styles(stylesConfig) : stylesConfig, components: {
+                    Option: (props) => React.createElement(SelectOption, { ...props }, props.children),
+                    Control: SelectControl,
+                    MultiValue: SelectMultiValue,
+                    ClearIndicator: SelectClearIndicator,
+                    DropdownIndicator: SelectDropdownIndicator,
+                    SelectContainer: SelectContainer,
+                    Menu: SelectMenu,
+                    Input: SelectInput,
+                    ...(isWindowed ? { MenuList } : {}),
+                    ...components,
+                }, closeMenuOnSelect: closeMenuOnSelect, classNamePrefix: classNamePrefix, menuPosition: menuPosition, menuPlacement: menuPlacement, maxMenuHeight: numberFromDimension(maxHeight), noOptionsMessage: noOptionsMessage, ...props }),
             React.createElement(InlineValidation, { mt: "x1", errorMessage: errorMessage, errorList: errorList }))));
 });
 export default NDSSelect;

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

@@ -1,9 +1,9 @@
 import React from "react";
 import type { StoryObj } from "@storybook/react";
-import Select from "./Select";
+import Select, { NDSSelectProps } from "./Select";
 declare const _default: {
     title: string;
-    component: <Option extends import("./Select").NDSOption = import("./Select").NDSOption, IsMulti extends boolean = false, Group extends import("react-select").GroupBase<Option> = import("react-select").GroupBase<Option>>(props: Omit<import("react-select").Props<Option, IsMulti, Group>, "isMulti" | "isDisabled" | "isSearchable" | "defaultMenuIsOpen" | keyof import("./Select").CustomProps<Option_1, IsMulti_1, Group_1>> & import("./Select").CustomProps<Option, IsMulti, Group> & React.RefAttributes<import("react-select/base").default<Option, IsMulti, Group>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    component: <Option extends import("./Select").NDSOption = import("./Select").NDSOption, IsMulti extends boolean = false, Group extends import("react-select").GroupBase<Option> = import("react-select").GroupBase<Option>>(props: NDSSelectProps<Option, IsMulti, Group> & React.RefAttributes<import("react-select/base").default<Option, IsMulti, Group>>) => React.ReactElement;
 };
 export default _default;
 type Story = StoryObj<typeof Select>;

package/dist/src/Select/Select.story.fixture.js

@@ -1,23 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-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 styled from "styled-components";
 import { SelectOption } from "./SelectOption";
@@ -56,15 +36,15 @@ export const PCNList = [
     { value: "1", label: "PCN1" },
     { value: "9", label: "PCN9" },
 ];
-export const getPhotos = () => __awaiter(void 0, void 0, void 0, function* () {
+export const getPhotos = async () => {
     // returns 5000 items
-    const data = yield fetch("https://jsonplaceholder.typicode.com/photos");
-    const json = yield data.json();
+    const data = await fetch("https://jsonplaceholder.typicode.com/photos");
+    const json = await data.json();
     return json.map(({ title, id }) => ({
         label: title,
         value: id,
     }));
-});
+};
 const Indicator = styled.span(() => ({
     borderRadius: "25%",
     background: "green",
@@ -74,16 +54,14 @@ const Indicator = styled.span(() => ({
     height: "10px",
     marginRight: "5px",
 }));
-export const CustomOption = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
+export const CustomOption = ({ children, ...props }) => {
     const newChildren = (React.createElement(React.Fragment, null,
         React.createElement(Indicator, null),
         children));
-    return React.createElement(SelectOption, Object.assign({}, props), newChildren);
+    return React.createElement(SelectOption, { ...props }, newChildren);
 };
-export const CustomFieldsOption = (_a) => {
-    var props = __rest(_a, []);
-    return (React.createElement(SelectOption, Object.assign({}, props),
+export const CustomFieldsOption = ({ ...props }) => {
+    return (React.createElement(SelectOption, { ...props },
         React.createElement("span", null, props.data.label),
         React.createElement("span", null, props.data.description)));
 };