@nulogy/components 10.0.0 → 10.0.1

package/dist/main.js

@@ -17588,11 +17588,11 @@
             }
           });
         },
-        dropdownIndicator: function dropdownIndicator(provided, state) {
+        dropdownIndicator: function dropdownIndicator(provided) {
           return Object.assign(Object.assign(Object.assign({}, provided), !hasDefaultOptions && {
             display: "none"
           }), {
-            color: state.isHovered ? theme.colors.blackBlue : theme.colors.grey
+            color: theme.colors.grey
           });
         },
         indicatorsContainer: function indicatorsContainer(provided) {
@@ -17609,9 +17609,6 @@
             transform: "translateY(-50%)"
           });
         },
-        input: function input() {
-          return {};
-        },
         valueContainer: function valueContainer(provided, state) {
           return Object.assign(Object.assign(Object.assign({}, provided), {
             display: "flex",
@@ -17637,14 +17634,13 @@
             marginBottom: 0,
             position: "absolute",
             overflowX: "auto",
-            zIndex: "100",
+            zIndex: 100,
             width: "100%",
             background: theme.colors.white,
             borderWidth: "1px",
             borderColor: getBorderColor({
               errored: error,
               isOpen: true,
-              disabled: state.isDisabled,
               isFocused: false,
               theme: theme
             }),
@@ -18669,7 +18665,7 @@
       };
     }, function (_ref2) {
       var theme = _ref2.theme,
-          selectProps = _ref2.selectProps;
+          size = _ref2.size;
       return stylesForSize({
         large: {
           div: {
@@ -18681,14 +18677,16 @@
             padding: subPx(theme.space.x1)
           }
         }
-      }, selectProps.size);
+      }, size);
     });
-    var SelectOption = function SelectOption(props) {
-      return /*#__PURE__*/React__default["default"].createElement(StyledOption, Object.assign({}, props, {
-        cx: null,
+    function SelectOption(props) {
+      return /*#__PURE__*/React__default["default"].createElement(StyledOption, {
+        isSelected: props.isSelected,
+        isFocused: props.isFocused,
+        size: props.size,
         "data-testid": "select-option"
-      }), /*#__PURE__*/React__default["default"].createElement(WindowedSelect.components.Option, Object.assign({}, props)));
-    };
+      }, /*#__PURE__*/React__default["default"].createElement(WindowedSelect.components.Option, Object.assign({}, props)));
+    }
 
     var getSubset = function getSubset(o, propObj) {
       var fields = Object.keys(propObj);
@@ -18795,7 +18793,8 @@
           defaultOptions = _a.defaultOptions,
           loadOptions = _a.loadOptions,
           isClearable = _a.isClearable,
-          props = __rest(_a, ["autocomplete", "labelText", "required", "requirementText", "helpText", "noOptionsMessage", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "menuPosition", "multiselect", "name", "onChange", "placeholder", "value", "defaultValue", "className", "classNamePrefix", "onBlur", "menuIsOpen", "onMenuOpen", "onMenuClose", "onInputChange", "components", "aria-label", "cacheOptions", "defaultOptions", "loadOptions", "isClearable"]);
+          size = _a.size,
+          props = __rest(_a, ["autocomplete", "labelText", "required", "requirementText", "helpText", "noOptionsMessage", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "menuPosition", "multiselect", "name", "onChange", "placeholder", "value", "defaultValue", "className", "classNamePrefix", "onBlur", "menuIsOpen", "onMenuOpen", "onMenuClose", "onInputChange", "components", "aria-label", "cacheOptions", "defaultOptions", "loadOptions", "isClearable", "size"]);
 
       var _useTranslation = useTranslation(),
           t = _useTranslation.t;
@@ -18803,6 +18802,7 @@
       var theme = styled.useTheme();
       var spaceProps = getSubset(props, propTypes.space);
       var error = !!(errorMessage || errorList);
+      var componentSize = useComponentSize(size);
       return /*#__PURE__*/React__default["default"].createElement(Field, Object.assign({}, spaceProps), /*#__PURE__*/React__default["default"].createElement(MaybeFieldLabel, {
         labelText: labelText,
         requirementText: requirementText,
@@ -18840,7 +18840,11 @@
         onInputChange: onInputChange,
         theme: theme,
         components: Object.assign({
-          Option: SelectOption,
+          Option: function Option(props) {
+            return /*#__PURE__*/React__default["default"].createElement(SelectOption, Object.assign({
+              size: componentSize
+            }, props));
+          },
           Control: SelectControl$1,
           MultiValue: SelectMultiValue$1,
           ClearIndicator: SelectClearIndicator$1,
@@ -49099,7 +49103,7 @@
           initialIsOpen = _a.initialIsOpen,
           maxHeight = _a.maxHeight,
           multiselect = _a.multiselect,
-          onChange = _a.onChange,
+          _onChange = _a.onChange,
           placeholder = _a.placeholder,
           value = _a.value,
           defaultValue = _a.defaultValue,
@@ -49121,9 +49125,6 @@
         checkOptionsAreValid(options);
         optionsRef.current = options;
       }, [options]);
-      var handleChange = React__default["default"].useCallback(function (option) {
-        onChange && onChange(extractValue(option, multiselect));
-      }, [multiselect, onChange]);
       React__default["default"].useEffect(function () {
         if (ref) {
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -49136,7 +49137,6 @@
         requirementText: requirementText,
         helpText: helpText
       }, /*#__PURE__*/React__default["default"].createElement(WindowedSelect__default["default"], Object.assign({
-        size: componentSize,
         ref: reactSelectRef,
         placeholder: placeholder || t("select"),
         windowThreshold: windowThreshold,
@@ -49153,13 +49153,21 @@
         "aria-invalid": error,
         defaultMenuIsOpen: initialIsOpen,
         inputId: id,
-        onChange: handleChange,
+        onChange: function onChange(option) {
+          if (!_onChange) return;
+          var value = extractValue(option, multiselect);
+
+          _onChange(value);
+        },
         defaultValue: getReactSelectValue(options, defaultValue),
         value: getReactSelectValue(options, value),
         isMulti: multiselect,
-        theme: themeContext,
         components: Object.assign({
-          Option: SelectOption,
+          Option: function Option(props) {
+            return /*#__PURE__*/React__default["default"].createElement(SelectOption, Object.assign({
+              size: componentSize
+            }, props));
+          },
           Control: SelectControl,
           MultiValue: SelectMultiValue,
           ClearIndicator: SelectClearIndicator,
@@ -49169,8 +49177,7 @@
           Input: SelectInput
         }, components),
         "aria-label": ariaLabel,
-        options: options,
-        labelText: labelText
+        options: options
       }, props)), /*#__PURE__*/React__default["default"].createElement(InlineValidation, {
         mt: "x1",
         errorMessage: errorMessage,
@@ -49217,19 +49224,23 @@
       return getOption(options, input);
     };
 
-    var extractValue = function extractValue(options, isMulti) {
-      if (isMulti) {
-        return options && options.length ? options.map(function (o) {
-          return o.value;
-        }) : [];
+    function extractValue(options, isMulti) {
+      if (Array.isArray(options)) {
+        if (isMulti) {
+          return options && options.length ? options.map(function (o) {
+            return o.value;
+          }) : [];
+        } else {
+          throw new Error("UNEXPECTED ERROR: don't forget to enable isMulti");
+        }
       }
 
-      if (options == null) {
+      if (options === null) {
         return options;
       } else {
         return options.value;
       }
-    };
+    }
 
     ReactSelect.defaultProps = Object.assign(Object.assign({}, SelectDefaultProps), {
       windowThreshold: 300,

package/dist/main.module.js

@@ -17571,11 +17571,11 @@ var customStyles = function customStyles(_ref6) {
         }
       });
     },
-    dropdownIndicator: function dropdownIndicator(provided, state) {
+    dropdownIndicator: function dropdownIndicator(provided) {
       return Object.assign(Object.assign(Object.assign({}, provided), !hasDefaultOptions && {
         display: "none"
       }), {
-        color: state.isHovered ? theme.colors.blackBlue : theme.colors.grey
+        color: theme.colors.grey
       });
     },
     indicatorsContainer: function indicatorsContainer(provided) {
@@ -17592,9 +17592,6 @@ var customStyles = function customStyles(_ref6) {
         transform: "translateY(-50%)"
       });
     },
-    input: function input() {
-      return {};
-    },
     valueContainer: function valueContainer(provided, state) {
       return Object.assign(Object.assign(Object.assign({}, provided), {
         display: "flex",
@@ -17620,14 +17617,13 @@ var customStyles = function customStyles(_ref6) {
         marginBottom: 0,
         position: "absolute",
         overflowX: "auto",
-        zIndex: "100",
+        zIndex: 100,
         width: "100%",
         background: theme.colors.white,
         borderWidth: "1px",
         borderColor: getBorderColor({
           errored: error,
           isOpen: true,
-          disabled: state.isDisabled,
           isFocused: false,
           theme: theme
         }),
@@ -18652,7 +18648,7 @@ var StyledOption = styled.div.withConfig({
   };
 }, function (_ref2) {
   var theme = _ref2.theme,
-      selectProps = _ref2.selectProps;
+      size = _ref2.size;
   return stylesForSize({
     large: {
       div: {
@@ -18664,14 +18660,16 @@ var StyledOption = styled.div.withConfig({
         padding: subPx(theme.space.x1)
       }
     }
-  }, selectProps.size);
+  }, size);
 });
-var SelectOption = function SelectOption(props) {
-  return /*#__PURE__*/React__default.createElement(StyledOption, Object.assign({}, props, {
-    cx: null,
+function SelectOption(props) {
+  return /*#__PURE__*/React__default.createElement(StyledOption, {
+    isSelected: props.isSelected,
+    isFocused: props.isFocused,
+    size: props.size,
     "data-testid": "select-option"
-  }), /*#__PURE__*/React__default.createElement(components$1.Option, Object.assign({}, props)));
-};
+  }, /*#__PURE__*/React__default.createElement(components$1.Option, Object.assign({}, props)));
+}
 
 var getSubset = function getSubset(o, propObj) {
   var fields = Object.keys(propObj);
@@ -18778,7 +18776,8 @@ var AsyncSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       defaultOptions = _a.defaultOptions,
       loadOptions = _a.loadOptions,
       isClearable = _a.isClearable,
-      props = __rest(_a, ["autocomplete", "labelText", "required", "requirementText", "helpText", "noOptionsMessage", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "menuPosition", "multiselect", "name", "onChange", "placeholder", "value", "defaultValue", "className", "classNamePrefix", "onBlur", "menuIsOpen", "onMenuOpen", "onMenuClose", "onInputChange", "components", "aria-label", "cacheOptions", "defaultOptions", "loadOptions", "isClearable"]);
+      size = _a.size,
+      props = __rest(_a, ["autocomplete", "labelText", "required", "requirementText", "helpText", "noOptionsMessage", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "menuPosition", "multiselect", "name", "onChange", "placeholder", "value", "defaultValue", "className", "classNamePrefix", "onBlur", "menuIsOpen", "onMenuOpen", "onMenuClose", "onInputChange", "components", "aria-label", "cacheOptions", "defaultOptions", "loadOptions", "isClearable", "size"]);
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
@@ -18786,6 +18785,7 @@ var AsyncSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
   var theme = useTheme();
   var spaceProps = getSubset(props, propTypes.space);
   var error = !!(errorMessage || errorList);
+  var componentSize = useComponentSize(size);
   return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, spaceProps), /*#__PURE__*/React__default.createElement(MaybeFieldLabel, {
     labelText: labelText,
     requirementText: requirementText,
@@ -18823,7 +18823,11 @@ var AsyncSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     onInputChange: onInputChange,
     theme: theme,
     components: Object.assign({
-      Option: SelectOption,
+      Option: function Option(props) {
+        return /*#__PURE__*/React__default.createElement(SelectOption, Object.assign({
+          size: componentSize
+        }, props));
+      },
       Control: SelectControl$1,
       MultiValue: SelectMultiValue$1,
       ClearIndicator: SelectClearIndicator$1,
@@ -49082,7 +49086,7 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       initialIsOpen = _a.initialIsOpen,
       maxHeight = _a.maxHeight,
       multiselect = _a.multiselect,
-      onChange = _a.onChange,
+      _onChange = _a.onChange,
       placeholder = _a.placeholder,
       value = _a.value,
       defaultValue = _a.defaultValue,
@@ -49104,9 +49108,6 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     checkOptionsAreValid(options);
     optionsRef.current = options;
   }, [options]);
-  var handleChange = React__default.useCallback(function (option) {
-    onChange && onChange(extractValue(option, multiselect));
-  }, [multiselect, onChange]);
   React__default.useEffect(function () {
     if (ref) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -49119,7 +49120,6 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     requirementText: requirementText,
     helpText: helpText
   }, /*#__PURE__*/React__default.createElement(WindowedSelect, Object.assign({
-    size: componentSize,
     ref: reactSelectRef,
     placeholder: placeholder || t("select"),
     windowThreshold: windowThreshold,
@@ -49136,13 +49136,21 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     "aria-invalid": error,
     defaultMenuIsOpen: initialIsOpen,
     inputId: id,
-    onChange: handleChange,
+    onChange: function onChange(option) {
+      if (!_onChange) return;
+      var value = extractValue(option, multiselect);
+
+      _onChange(value);
+    },
     defaultValue: getReactSelectValue(options, defaultValue),
     value: getReactSelectValue(options, value),
     isMulti: multiselect,
-    theme: themeContext,
     components: Object.assign({
-      Option: SelectOption,
+      Option: function Option(props) {
+        return /*#__PURE__*/React__default.createElement(SelectOption, Object.assign({
+          size: componentSize
+        }, props));
+      },
       Control: SelectControl,
       MultiValue: SelectMultiValue,
       ClearIndicator: SelectClearIndicator,
@@ -49152,8 +49160,7 @@ var ReactSelect = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
       Input: SelectInput
     }, components),
     "aria-label": ariaLabel,
-    options: options,
-    labelText: labelText
+    options: options
   }, props)), /*#__PURE__*/React__default.createElement(InlineValidation, {
     mt: "x1",
     errorMessage: errorMessage,
@@ -49200,19 +49207,23 @@ var getReactSelectValue = function getReactSelectValue(options, input) {
   return getOption(options, input);
 };
 
-var extractValue = function extractValue(options, isMulti) {
-  if (isMulti) {
-    return options && options.length ? options.map(function (o) {
-      return o.value;
-    }) : [];
+function extractValue(options, isMulti) {
+  if (Array.isArray(options)) {
+    if (isMulti) {
+      return options && options.length ? options.map(function (o) {
+        return o.value;
+      }) : [];
+    } else {
+      throw new Error("UNEXPECTED ERROR: don't forget to enable isMulti");
+    }
   }
 
-  if (options == null) {
+  if (options === null) {
     return options;
   } else {
     return options.value;
   }
-};
+}
 
 ReactSelect.defaultProps = Object.assign(Object.assign({}, SelectDefaultProps), {
   windowThreshold: 300,

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

@@ -2,9 +2,11 @@ import React, { ReactNode } from "react";
 import Select from "react-select/base";
 import { AsyncProps } from "react-select/async";
 import { GroupBase } from "react-select";
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
 type AsyncCustomProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
     autocomplete?: AsyncProps<Option, IsMulti, Group>["isSearchable"];
     labelText?: string;
+    size?: ComponentSize;
     requirementText?: string;
     helpText?: ReactNode;
     disabled?: AsyncProps<Option, IsMulti, Group>["isDisabled"];
@@ -15,5 +17,6 @@ type AsyncCustomProps<Option, IsMulti extends boolean, Group extends GroupBase<O
     maxHeight?: string;
     defaultValue?: AsyncProps<Option, IsMulti, Group>["defaultInputValue"];
 };
+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>>>>;
 export default AsyncSelect;

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

@@ -1,44 +1,32 @@
-import React from "react";
+import React, { ReactNode } from "react";
+import { GroupBase } from "react-windowed-select";
+import type { MenuPlacement, MenuPosition, Props as SelectProps } from "react-select";
 import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
-export type SelectProps = {
-    options?: any[];
+interface WindowedSelectProps extends SelectProps {
     windowThreshold?: number;
-    filterOption?: (...args: any[]) => any;
-    autocomplete?: boolean;
-    disabled?: boolean;
-    error?: boolean;
-    errorMessage?: string;
-    errorList?: string[];
+}
+interface NDSOptionType {
+    label: string;
+    value: unknown;
+}
+interface CustomProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
+    autocomplete?: SelectProps<Option, IsMulti, Group>["isSearchable"];
     labelText?: string;
-    helpText?: any;
-    noOptionsMessage?: Function;
     requirementText?: string;
-    id?: string;
-    initialIsOpen?: boolean;
-    menuPosition?: string;
-    menuPlacement?: string;
+    helpText?: ReactNode;
+    disabled?: SelectProps<Option, IsMulti, Group>["isDisabled"];
+    errorMessage?: string;
+    errorList?: string[];
+    initialIsOpen?: SelectProps<Option, IsMulti, Group>["defaultMenuIsOpen"];
+    multiselect?: SelectProps<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;
     size?: ComponentSize;
-    isClearable?: boolean;
+    error?: boolean;
+    options: NDSOptionType[];
+    onChange?: (newValue: unknown) => void;
     [key: string]: any;
-};
+}
+export type NDSSelectProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<WindowedSelectProps, "isSearchable" | "isDisabled" | "isMulti" | "defaultMenuIsOpen" | "defaultInputValue" | "options" | "onChange"> & CustomProps<Option, IsMulti, Group>;
 export declare const SelectDefaultProps: {
     autocomplete: boolean;
     disabled: any;
@@ -53,8 +41,8 @@ export declare const SelectDefaultProps: {
     id: any;
     initialIsOpen: any;
     maxHeight: string;
-    menuPosition: string;
-    menuPlacement: string;
+    menuPosition: MenuPosition;
+    menuPlacement: MenuPlacement;
     multiselect: boolean;
     name: any;
     onBlur: any;
@@ -71,6 +59,6 @@ export declare const SelectDefaultProps: {
     components: any;
     closeMenuOnSelect: boolean;
 };
-declare const ReactSelect: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<unknown>>;
-export declare const getOption: (options: any, value: any) => any;
+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;

package/dist/src/Select/Select.spec-utils.d.ts

@@ -1,2 +1,5 @@
-export function openDropdown(container: any, i?: number): void;
-export function selectOption(optionText: any, container: any, queryByText: any, i: any): void;
+import { Matcher, SelectorMatcherOptions } from "@testing-library/react";
+type QueryByText = (id: Matcher, options?: SelectorMatcherOptions) => HTMLElement;
+export declare const openDropdown: (element: HTMLElement, i: number) => void;
+export declare const selectOption: (optionText: string, container: HTMLElement, queryByText: QueryByText, i?: number) => void;
+export {};

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

@@ -109,5 +109,5 @@ export declare const UsingRefToControlFocus: {
         name: string;
     };
 };
-export declare const WithCustomProps: () => React.JSX.Element;
 export declare const WithTopMenuPlacement: () => React.JSX.Element;
+export declare const WithCustomProps: () => React.JSX.Element;

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

@@ -1,2 +1,7 @@
 import React from "react";
-export declare const SelectOption: (props: any) => React.JSX.Element;
+import { OptionProps } from "react-windowed-select";
+import { GroupBase } from "react-select";
+import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+export declare function SelectOption<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: OptionProps<Option, IsMulti, Group> & {
+    size: ComponentSize;
+}): React.JSX.Element;