@nulogy/components 15.2.0 → 15.2.2

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

@@ -1,37 +1,321 @@
+import { StoryObj } from "@storybook/react";
 import React from "react";
+import { Radio } from "../index";
 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;
+    component: React.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode | Record<string, unknown>;
+        value?: string | number | readonly string[];
+        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;
+        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;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        };
+        onCopy?: React.ClipboardEventHandler<HTMLInputElement>;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLInputElement>;
+        onCut?: React.ClipboardEventHandler<HTMLInputElement>;
+        onCutCapture?: React.ClipboardEventHandler<HTMLInputElement>;
+        onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLInputElement>;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLInputElement>;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLInputElement>;
+        onCompositionStart?: React.CompositionEventHandler<HTMLInputElement>;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLInputElement>;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLInputElement>;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLInputElement>;
+        onFocus?: React.FocusEventHandler<HTMLInputElement>;
+        onFocusCapture?: React.FocusEventHandler<HTMLInputElement>;
+        onBlur?: React.FocusEventHandler<HTMLInputElement>;
+        onBlurCapture?: React.FocusEventHandler<HTMLInputElement>;
+        onChange?: React.ChangeEventHandler<HTMLInputElement>;
+        onChangeCapture?: React.FormEventHandler<HTMLInputElement>;
+        onBeforeInput?: React.FormEventHandler<HTMLInputElement>;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLInputElement>;
+        onInput?: React.FormEventHandler<HTMLInputElement>;
+        onInputCapture?: React.FormEventHandler<HTMLInputElement>;
+        onReset?: React.FormEventHandler<HTMLInputElement>;
+        onResetCapture?: React.FormEventHandler<HTMLInputElement>;
+        onSubmit?: React.FormEventHandler<HTMLInputElement>;
+        onSubmitCapture?: React.FormEventHandler<HTMLInputElement>;
+        onInvalid?: React.FormEventHandler<HTMLInputElement>;
+        onInvalidCapture?: React.FormEventHandler<HTMLInputElement>;
+        onLoad?: React.ReactEventHandler<HTMLInputElement>;
+        onLoadCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onError?: React.ReactEventHandler<HTMLInputElement>;
+        onErrorCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLInputElement>;
+        onKeyPress?: React.KeyboardEventHandler<HTMLInputElement>;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLInputElement>;
+        onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLInputElement>;
+        onAbort?: React.ReactEventHandler<HTMLInputElement>;
+        onAbortCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onCanPlay?: React.ReactEventHandler<HTMLInputElement>;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLInputElement>;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onDurationChange?: React.ReactEventHandler<HTMLInputElement>;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onEmptied?: React.ReactEventHandler<HTMLInputElement>;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onEncrypted?: React.ReactEventHandler<HTMLInputElement>;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onEnded?: React.ReactEventHandler<HTMLInputElement>;
+        onEndedCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onLoadedData?: React.ReactEventHandler<HTMLInputElement>;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLInputElement>;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onLoadStart?: React.ReactEventHandler<HTMLInputElement>;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onPause?: React.ReactEventHandler<HTMLInputElement>;
+        onPauseCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onPlay?: React.ReactEventHandler<HTMLInputElement>;
+        onPlayCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onPlaying?: React.ReactEventHandler<HTMLInputElement>;
+        onPlayingCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onProgress?: React.ReactEventHandler<HTMLInputElement>;
+        onProgressCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onRateChange?: React.ReactEventHandler<HTMLInputElement>;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onSeeked?: React.ReactEventHandler<HTMLInputElement>;
+        onSeekedCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onSeeking?: React.ReactEventHandler<HTMLInputElement>;
+        onSeekingCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onStalled?: React.ReactEventHandler<HTMLInputElement>;
+        onStalledCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onSuspend?: React.ReactEventHandler<HTMLInputElement>;
+        onSuspendCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onTimeUpdate?: React.ReactEventHandler<HTMLInputElement>;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onVolumeChange?: React.ReactEventHandler<HTMLInputElement>;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onWaiting?: React.ReactEventHandler<HTMLInputElement>;
+        onWaitingCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onAuxClick?: React.MouseEventHandler<HTMLInputElement>;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onClick?: React.MouseEventHandler<HTMLInputElement>;
+        onClickCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onContextMenu?: React.MouseEventHandler<HTMLInputElement>;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onDoubleClick?: React.MouseEventHandler<HTMLInputElement>;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onDrag?: React.DragEventHandler<HTMLInputElement>;
+        onDragCapture?: React.DragEventHandler<HTMLInputElement>;
+        onDragEnd?: React.DragEventHandler<HTMLInputElement>;
+        onDragEndCapture?: React.DragEventHandler<HTMLInputElement>;
+        onDragEnter?: React.DragEventHandler<HTMLInputElement>;
+        onDragEnterCapture?: React.DragEventHandler<HTMLInputElement>;
+        onDragExit?: React.DragEventHandler<HTMLInputElement>;
+        onDragExitCapture?: React.DragEventHandler<HTMLInputElement>;
+        onDragLeave?: React.DragEventHandler<HTMLInputElement>;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLInputElement>;
+        onDragOver?: React.DragEventHandler<HTMLInputElement>;
+        onDragOverCapture?: React.DragEventHandler<HTMLInputElement>;
+        onDragStart?: React.DragEventHandler<HTMLInputElement>;
+        onDragStartCapture?: React.DragEventHandler<HTMLInputElement>;
+        onDrop?: React.DragEventHandler<HTMLInputElement>;
+        onDropCapture?: React.DragEventHandler<HTMLInputElement>;
+        onMouseDown?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseEnter?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseLeave?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseMove?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseOut?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseOver?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseUp?: React.MouseEventHandler<HTMLInputElement>;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLInputElement>;
+        onSelect?: React.ReactEventHandler<HTMLInputElement>;
+        onSelectCapture?: React.ReactEventHandler<HTMLInputElement>;
+        onTouchCancel?: React.TouchEventHandler<HTMLInputElement>;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLInputElement>;
+        onTouchEnd?: React.TouchEventHandler<HTMLInputElement>;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLInputElement>;
+        onTouchMove?: React.TouchEventHandler<HTMLInputElement>;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLInputElement>;
+        onTouchStart?: React.TouchEventHandler<HTMLInputElement>;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLInputElement>;
+        onPointerDown?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerMove?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerUp?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerCancel?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerCancelCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerEnter?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerEnterCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerLeave?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerLeaveCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerOver?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerOverCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerOut?: React.PointerEventHandler<HTMLInputElement>;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLInputElement>;
+        onScroll?: React.UIEventHandler<HTMLInputElement>;
+        onScrollCapture?: React.UIEventHandler<HTMLInputElement>;
+        onWheel?: React.WheelEventHandler<HTMLInputElement>;
+        onWheelCapture?: React.WheelEventHandler<HTMLInputElement>;
+        onAnimationStart?: React.AnimationEventHandler<HTMLInputElement>;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLInputElement>;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLInputElement>;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLInputElement>;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLInputElement>;
+        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;
+    } & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+        htmlSize?: number;
+        variant?: import("../NDSProvider/ComponentVariantContext").ComponentVariant;
+        labelText?: React.ReactNode;
+        checked?: boolean;
+        defaultChecked?: boolean;
+        error?: boolean;
+    }, "ref"> & React.RefAttributes<HTMLInputElement>>;
+    args: {
+        id: string;
+        labelText: string;
     };
 };
+export default _default;
+type Story = StoryObj<typeof Radio>;
+export declare const Default: Story;
+export declare const SetToDefaultChecked: Story;
+export declare const SetToDisabled: Story;
+export declare const SetToError: Story;
+export declare const SetToRequired: Story;
+export declare const Controlled: Story;
+export declare const UsingRefToControlFocus: Story;

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

@@ -3,42 +3,56 @@ import { action } from "@storybook/addon-actions";
 import { Radio, Button } from "../index";
 export default {
     title: "Components/Radio",
+    component: Radio,
+    args: {
+        id: "radio",
+        labelText: "I am a radio button",
+    },
 };
-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 Default = {
+    args: {
+        labelText: "I am a radio button",
+    },
 };
-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 = {
+export const SetToDefaultChecked = {
+    args: {
+        defaultChecked: true,
+        labelText: "I am checked by default",
+    },
+    name: "Set to default checked",
+};
+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" })))),
     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 = {
+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" })))),
     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 = {
+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 })))),
     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 = () => {
+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" })))),
+};
+const UsingRefToControlFocusComponent = () => {
     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")));
+        React.createElement(Button, { onClick: handleClick, "data-testid": "the-button" }, "Focus the Input")));
 };
-UsingRefToControlFocus.story = {
+export const UsingRefToControlFocus = {
+    render: (args) => React.createElement(UsingRefToControlFocusComponent, Object.assign({}, args)),
     name: "using ref to control focus",
 };

package/dist/src/Select/MenuList.js

@@ -1,5 +1,5 @@
 /*
-  Copied as is from: https://github.com/jacobworrel/react-windowed-select/blob/master/src/MenuList.tsx
+  Copied as is from: https://github.com/jacobworrel/react-windowed-select/blob/main/src/MenuList.tsx
   MIT License
   Copyright (c) 2019 Jacob Worrel
   Permission is hereby granted, free of charge, to any person obtaining a copy

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

@@ -10,7 +10,7 @@ export interface NDSOption {
     label: ReactNode;
     value: NDSOptionValue;
 }
-interface CustomProps<Option extends NDSOption, IsMulti extends boolean, Group extends GroupBase<Option>> extends StyledProps {
+export interface CustomProps<Option extends NDSOption, IsMulti extends boolean, Group extends GroupBase<Option>> extends StyledProps {
     autocomplete?: Props<Option, IsMulti, Group>["isSearchable"];
     labelText?: FieldLabelProps["labelText"];
     requirementText?: FieldLabelProps["requirementText"];

package/dist/src/Select/Select.spec-utils.js

@@ -1,4 +1,5 @@
 import { fireEvent } from "@testing-library/react";
+import { expect } from "vitest";
 export const openDropdown = (element, i) => {
     fireEvent.focus(element.querySelectorAll("input")[i]);
     fireEvent.keyDown(element.querySelectorAll("input")[i], {

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

@@ -1,9 +1,13 @@
 import React from "react";
+import type { StoryObj } from "@storybook/react";
+import Select 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>>;
 };
 export default _default;
-export declare const _Select: () => React.JSX.Element;
+type Story = StoryObj<typeof Select>;
+export declare const _Select: Story;
 export declare const WithStyledProps: () => React.JSX.Element;
 export declare const WithABlankValue: {
     (): React.JSX.Element;

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

@@ -20,7 +20,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useEffect, useRef, useState } from "react";
 import { action } from "@storybook/addon-actions";
-import { boolean, select, text } from "@storybook/addon-knobs";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
 import { Button } from "../index";
@@ -60,8 +59,100 @@ class SelectWithState extends React.Component {
 }
 export default {
     title: "Components/Select",
+    component: Select,
+};
+export const _Select = {
+    args: {
+        options,
+        autocomplete: true,
+        className: undefined,
+        classNamePrefix: undefined,
+        closeMenuOnSelect: true,
+        disabled: false,
+        defaultValue: undefined,
+        errorMessage: "",
+        labelText: "Inventory Status",
+        helpText: undefined,
+        noOptionsMessage: () => "No options",
+        required: false,
+        requirementText: undefined,
+        id: undefined,
+        maxHeight: "248px",
+        menuPosition: "absolute",
+        multiselect: false,
+        name: undefined,
+        placeholder: " ",
+        value: undefined,
+        menuIsOpen: undefined,
+        onMenuOpen: action("on menu open"),
+        onMenuClose: action("on menu close"),
+        onChange: action("selection changed"),
+        onInputChange: action("typed input value changed"),
+        onBlur: action("blurred"),
+    },
+    argTypes: {
+        autocomplete: {
+            control: { type: "boolean" },
+        },
+        className: {
+            control: { type: "text" },
+        },
+        classNamePrefix: {
+            control: { type: "text" },
+        },
+        closeMenuOnSelect: {
+            control: { type: "boolean" },
+        },
+        disabled: {
+            control: { type: "boolean" },
+        },
+        defaultValue: {
+            control: { type: "select" },
+            options: [undefined, ...options.map(({ value }) => value)],
+        },
+        errorMessage: {
+            control: { type: "text" },
+        },
+        labelText: {
+            control: { type: "text" },
+        },
+        helpText: {
+            control: { type: "text" },
+        },
+        required: {
+            control: { type: "boolean" },
+        },
+        requirementText: {
+            control: { type: "text" },
+        },
+        id: {
+            control: { type: "text" },
+        },
+        maxHeight: {
+            control: { type: "text" },
+        },
+        menuPosition: {
+            control: { type: "select" },
+            options: ["absolute", "fixed"],
+        },
+        multiselect: {
+            control: { type: "boolean" },
+        },
+        name: {
+            control: { type: "text" },
+        },
+        placeholder: {
+            control: { type: "text" },
+        },
+        value: {
+            control: { type: "select" },
+            options: [undefined, ...options.map(({ value }) => value)],
+        },
+        menuIsOpen: {
+            control: { type: "boolean" },
+        },
+    },
 };
-export const _Select = () => (React.createElement(Select, { options: options, autocomplete: boolean("autocomplete", true), className: text("className", undefined), classNamePrefix: text("classNamePrefix", undefined), closeMenuOnSelect: boolean("closeMenuOnSelect", true), disabled: boolean("disabled", false), defaultValue: select("defaultValue", [undefined, ...options.map(({ value }) => value)], undefined), errorMessage: text("errorMessage", ""), labelText: text("labelText", "Inventory Status"), helpText: text("helpText", undefined), noOptionsMessage: () => "No options", required: boolean("required", false), requirementText: text("requirementText", undefined), id: text("id", undefined), maxHeight: text("maxHeight", "248px"), menuPosition: select("menuPosition", ["absolute", "fixed"], "absolute"), multiselect: boolean("multiselect", false), name: text("name", undefined), placeholder: text("placeholder", " "), value: select("value", [undefined, ...options.map(({ value }) => value)], undefined), menuIsOpen: boolean("menuIsOpen", undefined), onMenuOpen: action("on menu open"), onMenuClose: action("on menu close"), onChange: action("selection changed"), onInputChange: action("typed input value changed"), onBlur: action("blurred") }));
 export const WithStyledProps = () => {
     return (React.createElement(Select, { initialIsOpen: true, placeholder: "Please select inventory status", onChange: action("selection changed"), onBlur: action("blurred"), maxWidth: "300px", options: options, labelText: "Default size", onInputChange: action("typed input value changed") }));
 };

package/dist/src/Table/stories/BaseTable.story.d.ts

@@ -1,12 +1,16 @@
 import React from "react";
+import type { StoryObj } from "@storybook/react";
+import { Table } from "..";
 declare const _default: {
     title: string;
+    component: typeof Table;
 };
 export default _default;
-export declare const WithData: () => React.JSX.Element;
-export declare const WithNoData: () => React.JSX.Element;
-export declare const WithStickyHeader: () => React.JSX.Element;
-export declare const WithLotsOfRowsAndColumns: () => React.JSX.Element;
+type Story = StoryObj<typeof Table>;
+export declare const WithData: Story;
+export declare const WithNoData: Story;
+export declare const WithStickyHeader: Story;
+export declare const WithLotsOfRowsAndColumns: Story;
 export declare const WithCustomColumnWidths: () => React.JSX.Element;
 export declare const WithACustomCellComponent: () => React.JSX.Element;
 export declare const WithCellAlignment: () => React.JSX.Element;
@@ -14,6 +18,6 @@ export declare const WithACellFormatter: () => React.JSX.Element;
 export declare const WithACustomColumnLabelComponent: () => React.JSX.Element;
 export declare const WithMetadata: () => React.JSX.Element;
 export declare const WithFullWidthSection: () => React.JSX.Element;
-export declare const WithAFooter: () => React.JSX.Element;
-export declare const WithRowBorder: () => React.JSX.Element;
-export declare const WithVerticalAlignment: () => React.JSX.Element;
+export declare const WithAFooter: Story;
+export declare const WithRowBorder: Story;
+export declare const WithVerticalAlignment: Story;