@nulogy/components 12.2.1 → 13.0.0

package/dist/src/Alert/Alert.d.ts

@@ -6,7 +6,7 @@ export declare const NotificationTypes: {
     readonly success: "success";
     readonly warning: "warning";
 };
-export type NotificationType = typeof NotificationTypes[keyof typeof NotificationTypes];
+export type NotificationType = (typeof NotificationTypes)[keyof typeof NotificationTypes];
 export type AlertProps = FlexProps & {
     isCloseable?: boolean;
     closeAriaLabel?: string;

package/dist/src/AsyncSelect/AsyncSelect.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+import { IconName } from "@nulogy/icons";
 import Select from "react-select/base";
 import { AsyncProps } from "react-select/async";
 import { GroupBase } from "react-select";
@@ -16,6 +17,7 @@ type AsyncCustomProps<Option, IsMulti extends boolean, Group extends GroupBase<O
     multiselect?: AsyncProps<Option, IsMulti, Group>["isMulti"];
     maxHeight?: string;
     defaultValue?: AsyncProps<Option, IsMulti, Group>["defaultInputValue"];
+    iconLeft?: IconName | "loading";
 };
 export type AsyncSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<AsyncProps<Option, IsMulti, Group>, "isSearchable" | "isDisabled" | "isMulti" | "defaultMenuIsOpen" | "defaultInputValue"> & AsyncCustomProps<Option, IsMulti, Group>;
 declare const AsyncSelect: React.ForwardRefExoticComponent<Omit<AsyncProps<unknown, boolean, GroupBase<unknown>>, "isDisabled" | "isMulti" | "isSearchable" | "defaultMenuIsOpen" | "defaultInputValue"> & AsyncCustomProps<unknown, boolean, GroupBase<unknown>> & React.RefAttributes<Select<unknown, boolean, GroupBase<unknown>>>>;

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

@@ -3,12 +3,7 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const Default: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+export declare const Default: () => React.JSX.Element;
 export declare const WithDefaultOptions: {
     (): React.JSX.Element;
     story: {
@@ -29,9 +24,5 @@ export declare const UsingRefToControlFocus: {
         name: string;
     };
 };
-export declare const Controlled: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+export declare const Controlled: () => React.JSX.Element;
+export declare const WithIcon: () => React.JSX.Element;

package/dist/src/AsyncSelect/AsyncSelectComponents.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
 import { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, InputProps, MenuProps, MultiValueProps } from "react-select";
 import { GroupBase } from "react-select";
-import type { OptionProps } from "react-windowed-select";
+import { OptionProps } from "react-select";
+import { IconName } from "@nulogy/icons";
 import type { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-export declare const SelectControl: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>) => React.JSX.Element;
+export declare const SelectControl: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ iconLeft, isFocused, children, ...props }: ControlProps<Option, IsMulti, Group> & {
+    iconLeft?: IconName | "loading";
+}) => React.JSX.Element;
 export declare const SelectMultiValue: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>) => React.JSX.Element;
 export declare const SelectClearIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>) => React.JSX.Element;
 export declare const SelectDropdownIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>) => React.JSX.Element;

package/dist/src/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { SpaceProps } from "styled-system";
+import { PositionProps, SpaceProps } from "styled-system";
 import { IconName } from "@nulogy/icons";
 interface IconProps extends SpaceProps {
     icon: IconName | "loading";
@@ -12,4 +12,5 @@ interface IconProps extends SpaceProps {
 }
 declare const Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<IconProps & React.RefAttributes<SVGSVGElement>, IconProps>> & string & Omit<React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>, keyof React.Component<any, {}, any>>;
 export declare function InlineIcon(props: IconProps): React.JSX.Element;
+export declare const InputIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<IconProps & React.RefAttributes<SVGSVGElement>, keyof IconProps> & IconProps, PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>>> & string;
 export default Icon;

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

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

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

@@ -1,32 +1,31 @@
 import React, { ReactNode } from "react";
-import { GroupBase } from "react-windowed-select";
-import type { Props as SelectProps } from "react-select";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-interface WindowedSelectProps extends SelectProps {
-    windowThreshold?: number;
-}
-interface NDSOptionType {
-    label: string;
-    value: unknown;
+import Select from "react-select/base";
+import { PropsValue } from "react-select";
+import type { GroupBase, Props, StylesConfig } from "react-select";
+import { StyledProps } from "../StyledProps";
+export type NDSOptionValue = string | number | boolean | null;
+export interface NDSOption {
+    label: ReactNode;
+    value: NDSOptionValue;
 }
-interface CustomProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
-    autocomplete?: SelectProps<Option, IsMulti, Group>["isSearchable"];
+interface CustomProps<Option extends NDSOption, IsMulti extends boolean, Group extends GroupBase<Option>> extends StyledProps {
+    autocomplete?: Props<Option, IsMulti, Group>["isSearchable"];
     labelText?: string;
     requirementText?: string;
     helpText?: ReactNode;
-    disabled?: SelectProps<Option, IsMulti, Group>["isDisabled"];
+    disabled?: Props<Option, IsMulti, Group>["isDisabled"];
     errorMessage?: string;
     errorList?: string[];
-    initialIsOpen?: SelectProps<Option, IsMulti, Group>["defaultMenuIsOpen"];
-    multiselect?: SelectProps<Option, IsMulti, Group>["isMulti"];
+    initialIsOpen?: Props<Option, IsMulti, Group>["defaultMenuIsOpen"];
+    multiselect?: Props<Option, IsMulti, Group>["isMulti"];
     maxHeight?: string;
-    variant?: ComponentVariant;
-    error?: boolean;
-    options: NDSOptionType[];
-    onChange?: (newValue: unknown) => void;
-    [key: string]: any;
+    defaultValue?: PropsValue<Option["value"]>;
+    value?: PropsValue<Option["value"]>;
+    options: readonly Option[];
+    onChange?: (newValue: PropsValue<Option["value"]>) => void;
+    windowThreshold?: number;
+    styles?: (selectStyles: StylesConfig<Option, IsMulti, Group>) => StylesConfig<Option, IsMulti, Group>;
 }
-export type NDSSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<WindowedSelectProps, "isSearchable" | "isDisabled" | "isMulti" | "defaultMenuIsOpen" | "defaultInputValue" | "options" | "onChange"> & CustomProps<Option, IsMulti, Group>;
-declare const ReactSelect: React.ForwardRefExoticComponent<Omit<Omit<WindowedSelectProps, "isDisabled" | "isMulti" | "isSearchable" | "onChange" | "options" | "defaultMenuIsOpen" | "defaultInputValue"> & CustomProps<unknown, boolean, GroupBase<unknown>>, "ref"> & React.RefAttributes<unknown>>;
-export declare const getOption: (options: NDSOptionType[], value: unknown) => unknown;
-export default ReactSelect;
+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>, "isDisabled" | "isMulti" | "isSearchable" | "defaultMenuIsOpen" | keyof CustomProps<Option_1, IsMulti_1, Group_1>> & CustomProps<Option, IsMulti, Group> & React.RefAttributes<Select<Option, IsMulti, Group>>) => React.ReactElement;
+export default NDSSelect;

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

@@ -4,6 +4,7 @@ declare const _default: {
 };
 export default _default;
 export declare const _Select: () => React.JSX.Element;
+export declare const WithStyledProps: () => React.JSX.Element;
 export declare const WithABlankValue: {
     (): React.JSX.Element;
     story: {
@@ -102,12 +103,7 @@ export declare const WithCustomOptionComponent: {
         name: string;
     };
 };
-export declare const WithACustomSelectedOption: () => React.JSX.Element;
-export declare const UsingRefToControlFocus: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+export declare const UsingRefToControlFocus: () => React.JSX.Element;
 export declare const WithTopMenuPlacement: () => React.JSX.Element;
-export declare const WithCustomProps: () => React.JSX.Element;
+export declare const WithCustomStyles: () => React.JSX.Element;
+export declare const WithCustomOptionFields: () => React.JSX.Element;

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { GroupBase } from "react-select";
+import { SelectOptionProps } from "./SelectOption";
+import { NDSOption } from "./Select";
+export declare const errorList: string[];
+export declare const options: NDSOption[];
+export declare const partnerCompanyName: {
+    value: string;
+    label: string;
+}[];
+export declare const wrappingOptions: {
+    value: string;
+    label: string;
+}[];
+export declare const PCNList: {
+    value: string;
+    label: string;
+}[];
+export declare const getPhotos: () => Promise<any>;
+export declare const CustomOption: ({ children, ...props }: SelectOptionProps<NDSOption, true, GroupBase<NDSOption>>) => React.JSX.Element;
+export interface DescriptiveOption extends NDSOption {
+    description: string;
+}
+export declare const CustomFieldsOption: ({ ...props }: SelectOptionProps<DescriptiveOption, true, GroupBase<DescriptiveOption>>) => React.JSX.Element;

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

@@ -1,8 +1,10 @@
 import React from "react";
-export declare const SelectControl: (props: any) => React.JSX.Element;
-export declare const SelectMultiValue: (props: any) => React.JSX.Element;
-export declare const SelectClearIndicator: (props: any) => React.JSX.Element;
-export declare const SelectDropdownIndicator: (props: any) => React.JSX.Element;
-export declare const SelectMenu: (props: any) => React.JSX.Element;
-export declare const SelectContainer: (props: any) => React.JSX.Element;
-export declare const SelectInput: (props: any) => React.JSX.Element;
+import { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, InputProps, MenuProps, MultiValueProps, GroupBase } from "react-select";
+import { NDSOption } from "./Select";
+export declare function SelectControl<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectMultiValue<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: MultiValueProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectClearIndicator<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ClearIndicatorProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectDropdownIndicator<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: DropdownIndicatorProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectMenu<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectContainer<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>): React.JSX.Element;
+export declare function SelectInput<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>): React.JSX.Element;

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

@@ -1,14 +1,12 @@
 import React from "react";
-import { OptionProps } from "react-windowed-select";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-type SelectOptionProps = {
+import { GroupBase, OptionProps } from "react-select";
+import { NDSOption } from "./Select";
+type StyledOptionProps = {
     isSelected: boolean;
     isFocused: boolean;
-    variant: ComponentVariant;
 };
-export declare const StyledOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectOptionProps>> & string;
-interface CustomOptionProps extends OptionProps {
-    variant?: ComponentVariant;
+export declare const StyledOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledOptionProps>> & string;
+export interface SelectOptionProps<Option = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> extends OptionProps<Option, IsMulti, Group> {
 }
-export declare function SelectOption(props: CustomOptionProps): React.JSX.Element;
+export declare function SelectOption<Option extends NDSOption = NDSOption, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectOptionProps<Option, IsMulti, Group>): React.JSX.Element;
 export {};

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

@@ -27,9 +27,14 @@ export declare function showIndicatorSeparator({ hasValue, isClearable, isMulti
     isClearable: any;
     isMulti: any;
 }): any;
-interface Args {
+interface CustomStylesArgs {
     theme: DefaultNDSThemeType;
-    [key: string]: any;
+    error: boolean;
+    maxHeight: string;
+    windowed: boolean;
+    variant: ComponentVariant;
+    hasIcon?: boolean;
+    hasDefaultOptions?: boolean;
 }
-declare const customStyles: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(args: Args) => StylesConfig<Option, IsMulti, Group>;
+declare const customStyles: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(args: CustomStylesArgs) => StylesConfig<Option, IsMulti, Group>;
 export default customStyles;

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

@@ -1,3 +1,3 @@
-export { SelectOption } from "./SelectOption";
-export { default as Select } from "./Select";
+export { SelectOption, type SelectOptionProps } from "./SelectOption";
+export { default as Select, type NDSOption, type NDSOptionValue, type NDSSelectProps } from "./Select";
 export * from "./SelectComponents";

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

@@ -0,0 +1,20 @@
+import { Options, PropsValue } from "react-select";
+import { NDSOption, NDSOptionValue } from "./Select";
+export declare function calcOptionsLength(options: any): any;
+export declare function flattenGroupedChildren(children: any): any;
+export declare function isFocused({ props: { isFocused } }: {
+    props: {
+        isFocused: any;
+    };
+}): boolean;
+export declare function getCurrentIndex(children: any): number;
+export declare function createGetHeight({ groupHeadingStyles, noOptionsMsgStyles, optionStyles, loadingMsgStyles }: {
+    groupHeadingStyles: any;
+    noOptionsMsgStyles: any;
+    optionStyles: any;
+    loadingMsgStyles: any;
+}): (child: any) => any;
+export declare function checkOptionsAreValid(options: Options<NDSOption>): void;
+export declare function getOption(options: Options<NDSOption>, value: PropsValue<NDSOptionValue>): any;
+export declare function getReactSelectValue(options: Options<NDSOption>, input: PropsValue<NDSOptionValue>): any;
+export declare function extractValue(options: Options<NDSOption> | NDSOption, isMulti: boolean): NDSOptionValue[] | NDSOptionValue;

package/dist/src/StatusIndicator/StatusIndicator.d.ts

@@ -9,7 +9,7 @@ export declare const StatusIndicatorValues: {
     readonly warning: "warning";
     readonly quiet: "quiet";
 };
-export type StatusIndicatorType = typeof StatusIndicatorValues[keyof typeof StatusIndicatorValues];
+export type StatusIndicatorType = (typeof StatusIndicatorValues)[keyof typeof StatusIndicatorValues];
 interface Props extends SpaceProps, TypographyProps, FlexboxProps {
     type?: StatusIndicatorType;
 }

package/dist/src/index.d.ts

@@ -35,7 +35,7 @@ export { Overlay } from "./Overlay";
 export { Pagination } from "./Pagination";
 export { Radio, RadioGroup } from "./Radio";
 export { RangeContainer } from "./RangeContainer";
-export { Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, } from "./Select";
+export { Select, SelectClearIndicator, SelectContainer, SelectControl, SelectDropdownIndicator, SelectInput, SelectMenu, SelectMultiValue, SelectOption, type SelectOptionProps, type NDSOption, type NDSOptionValue, type NDSSelectProps, } from "./Select";
 export { SortingTable } from "./SortingTable";
 export { StatusIndicator, StatusIndicatorValues } from "./StatusIndicator";
 export type { StatusIndicatorType } from "./StatusIndicator";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "12.2.1",
+  "version": "13.0.0",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -123,6 +123,7 @@
     "jscodeshift": "^0.11.0",
     "mockdate": "^3.0.2",
     "plop": "^2.4.0",
+    "prettier": "^3.4.2",
     "react": "17.0.2",
     "react-color": "^2.18.1",
     "react-dom": "17.0.2",
@@ -151,6 +152,7 @@
     "@styled-system/prop-types": "^5.1.4",
     "@styled-system/theme-get": "^5.1.2",
     "@types/react-router-dom": "5.3.0",
+    "@types/react-window": "^1.8.8",
     "@types/styled-system": "5.1.22",
     "body-scroll-lock": "^3.1.5",
     "core-js": "3",
@@ -169,7 +171,7 @@
     "react-popper-2": "npm:react-popper@2.2.4",
     "react-resize-detector": "^9.1.0",
     "react-select": "^5.8.0",
-    "react-windowed-select": "^5.2.0",
+    "react-window": "^1.8.11",
     "smoothscroll-polyfill": "^0.4.4",
     "styled-system": "^5.1.4",
     "stylis": "^4.0.0"