@nulogy/components 8.16.0 → 8.17.1

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

@@ -1,40 +1,19 @@
-import React from "react";
-type AsyncSelectProps = {
-    windowThreshold?: number;
-    filterOption?: (...args: any[]) => any;
-    autocomplete?: boolean;
-    disabled?: boolean;
-    error?: boolean;
-    errorMessage?: string;
-    errorList?: string[];
+import React, { ReactNode } from "react";
+import Select from "react-select/base";
+import { AsyncProps } from "react-select/async";
+import { GroupBase } from "react-select";
+type AsyncCustomProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
+    autocomplete?: AsyncProps<Option, IsMulti, Group>["isSearchable"];
     labelText?: string;
-    helpText?: any;
-    noOptionsMessage?: string;
     requirementText?: string;
-    id?: string;
-    initialIsOpen?: boolean;
-    menuPosition?: string;
+    helpText?: ReactNode;
+    disabled?: AsyncProps<Option, IsMulti, Group>["isDisabled"];
+    errorMessage?: string;
+    errorList?: string[];
+    initialIsOpen?: AsyncProps<Option, IsMulti, Group>["defaultMenuIsOpen"];
+    multiselect?: AsyncProps<Option, IsMulti, Group>["isMulti"];
     maxHeight?: string;
-    multiselect?: boolean;
-    name?: string;
-    onBlur?: (...args: any[]) => any;
-    onChange?: (...args: any[]) => any;
-    placeholder?: string;
-    required?: boolean;
-    value?: any;
-    defaultValue?: any;
-    className?: string;
-    classNamePrefix?: string;
-    menuIsOpen?: boolean;
-    onMenuOpen?: (...args: any[]) => any;
-    onMenuClose?: (...args: any[]) => any;
-    onInputChange?: (...args: any[]) => any;
-    components?: any;
-    closeMenuOnSelect?: boolean;
-    "aria-label"?: string;
-    cacheOptions?: boolean;
-    defaultOptions?: Array<any>;
-    loadOptions: any;
+    defaultValue?: AsyncProps<Option, IsMulti, Group>["defaultInputValue"];
 };
-declare const AsyncSelect: React.ForwardRefExoticComponent<AsyncSelectProps & React.RefAttributes<unknown>>;
+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>>>>;
 export default AsyncSelect;

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

@@ -21,12 +21,8 @@ export declare const WithADefaultValue: {
         name: string;
     };
 };
-export declare const Multiselect: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+export declare const Multiselect: () => React.JSX.Element;
+export declare const WithAClearButton: () => React.JSX.Element;
 export declare const UsingRefToControlFocus: {
     (): React.JSX.Element;
     story: {

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

@@ -0,0 +1,10 @@
+import React from "react";
+import { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, InputProps, MenuProps, MultiValueProps } from "react-select";
+import { GroupBase } from "react-select";
+export declare const SelectControl: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ControlProps<Option, IsMulti, Group>) => 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;
+export declare const SelectContainer: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: ContainerProps<Option, IsMulti, Group>) => React.JSX.Element;
+export declare const SelectInput: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: InputProps<Option, IsMulti, Group>) => React.JSX.Element;
+export declare const SelectMenu: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: MenuProps<Option, IsMulti, Group>) => React.JSX.Element;

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

@@ -36,6 +36,7 @@ export type SelectProps = {
     closeMenuOnSelect?: boolean;
     "aria-label"?: string;
     size?: ComponentSize;
+    isClearable?: boolean;
     [key: string]: any;
 };
 export declare const SelectDefaultProps: {

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

@@ -47,6 +47,7 @@ export declare const Required: {
         name: string;
     };
 };
+export declare const WithAClearButton: () => React.JSX.Element;
 export declare const WithHelpText: {
     (): React.JSX.Element;
     story: {

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

@@ -37,31 +37,10 @@ declare const customStyles: ({ theme, error, maxHeight, windowed, size, hasDefau
     option: () => {
         height: number;
     };
-    control: (provided: any, state: any) => {
-        display: string;
-        minHeight: string;
-        paddingLeft: string;
-        position: string;
-        width: string;
-        fontSize: string;
-        lineHeight: string;
-        color: string;
-        background: string;
-        border: string;
-        borderColor: any;
-        boxSizing: string;
-        boxShadow: any;
-        borderRadius: string;
-        borderBottomLeftRadius: string | number;
-        borderBottomRightRadius: string | number;
-        borderTopRightRadius: string | number;
-        borderTopLeftRadius: string | number;
-        "&:hover, &:focus": {
-            borderColor: any;
-        };
-    };
+    control: (provided: any, state: any) => any;
     dropdownIndicator: (provided: any, state: any) => any;
     indicatorsContainer: (provided: any) => any;
+    singleValue: (provided: any) => any;
     input: () => {};
     valueContainer: (provided: any, state: any) => any;
     menu: (provided: any, state: any) => any;
@@ -981,6 +960,14 @@ declare const customStyles: ({ theme, error, maxHeight, windowed, size, hasDefau
     multiValueRemove: (provided: any) => any;
     noOptionsMessage: (provided: any) => any;
     indicatorSeparator: (provided: any, state: any) => any;
-    placeholder: (provided: any, state: any) => any;
+    placeholder: (state: any) => {
+        label: string;
+        marginLeft: number;
+        marginRight: number;
+        position: string;
+        top: string;
+        transform: string;
+        color: string;
+    };
 };
 export default customStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "8.16.0",
+  "version": "8.17.1",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -122,7 +122,7 @@
     "react-color": "^2.18.1",
     "react-dom": "17.0.2",
     "react-router-dom": "^5.2.0",
-    "react-select": "^3.0.8",
+    "react-select": "^5.8.0",
     "react-test-renderer": "^16.10",
     "rollup": "^2.7.3",
     "rollup-plugin-babel": "^4.4.0",
@@ -132,7 +132,7 @@
     "semantic-release": "^17.2.1",
     "source-map-loader": "^1.0.1",
     "storybook-addon-performance": "^0.17.1",
-    "styled-components": "^5.1.0",
+    "styled-components": "^5.3.11",
     "svg-sprite-loader": "^6.0.11",
     "ts-jest": "^26.1.1",
     "typescript": "4.9.5",