@nulogy/components 11.0.0-beta.2 → 11.0.0-beta.4

package/dist/main.js

@@ -50434,13 +50434,14 @@
           size = _a.size,
           windowThreshold = _a.windowThreshold,
           options = _a.options,
-          props = __rest(_a, ["autocomplete", "value", "onChange", "defaultValue", "labelText", "required", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "multiselect", "placeholder", "components", "size", "windowThreshold", "options"]);
+          styles = _a.styles,
+          props = __rest(_a, ["autocomplete", "value", "onChange", "defaultValue", "labelText", "required", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "multiselect", "placeholder", "components", "size", "windowThreshold", "options", "styles"]);
 
       var _useTranslation = useTranslation(),
           t = _useTranslation.t;
 
       var theme = styled.useTheme();
-      var spaceProps = getSubset(props, propTypes.space);
+      var styledProps = getSubset(props, addStyledProps);
       var error = !!(errorMessage || errorList);
       var optionsRef = React__default["default"].useRef(options);
       var componentSize = useComponentSize(size);
@@ -50452,7 +50453,14 @@
         checkOptionsAreValid(options);
         optionsRef.current = options;
       }, [options]);
-      return /*#__PURE__*/React__default["default"].createElement(Field, Object.assign({}, spaceProps), /*#__PURE__*/React__default["default"].createElement(MaybeFieldLabel, {
+      var stylesConfig = customStyles({
+        theme: theme,
+        error: error,
+        maxHeight: maxHeight,
+        size: componentSize,
+        windowed: options.length > windowThreshold
+      });
+      return /*#__PURE__*/React__default["default"].createElement(Field, Object.assign({}, styledProps), /*#__PURE__*/React__default["default"].createElement(MaybeFieldLabel, {
         labelText: labelText,
         requirementText: requirementText,
         helpText: helpText
@@ -50476,13 +50484,7 @@
         required: required,
         "aria-invalid": error,
         inputId: id,
-        styles: customStyles({
-          theme: theme,
-          error: error,
-          maxHeight: maxHeight,
-          size: componentSize,
-          windowed: options.length > windowThreshold
-        }),
+        styles: styles ? styles(stylesConfig) : stylesConfig,
         components: Object.assign(Object.assign({
           Option: function Option(props) {
             return /*#__PURE__*/React__default["default"].createElement(SelectOption$1, Object.assign({

package/dist/main.module.js

@@ -50417,13 +50417,14 @@ var NDSSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
       size = _a.size,
       windowThreshold = _a.windowThreshold,
       options = _a.options,
-      props = __rest(_a, ["autocomplete", "value", "onChange", "defaultValue", "labelText", "required", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "multiselect", "placeholder", "components", "size", "windowThreshold", "options"]);
+      styles = _a.styles,
+      props = __rest(_a, ["autocomplete", "value", "onChange", "defaultValue", "labelText", "required", "requirementText", "helpText", "disabled", "errorMessage", "errorList", "id", "initialIsOpen", "maxHeight", "multiselect", "placeholder", "components", "size", "windowThreshold", "options", "styles"]);
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
   var theme = useTheme();
-  var spaceProps = getSubset(props, propTypes.space);
+  var styledProps = getSubset(props, addStyledProps);
   var error = !!(errorMessage || errorList);
   var optionsRef = React__default.useRef(options);
   var componentSize = useComponentSize(size);
@@ -50435,7 +50436,14 @@ var NDSSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     checkOptionsAreValid(options);
     optionsRef.current = options;
   }, [options]);
-  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, spaceProps), /*#__PURE__*/React__default.createElement(MaybeFieldLabel, {
+  var stylesConfig = customStyles({
+    theme: theme,
+    error: error,
+    maxHeight: maxHeight,
+    size: componentSize,
+    windowed: options.length > windowThreshold
+  });
+  return /*#__PURE__*/React__default.createElement(Field, Object.assign({}, styledProps), /*#__PURE__*/React__default.createElement(MaybeFieldLabel, {
     labelText: labelText,
     requirementText: requirementText,
     helpText: helpText
@@ -50459,13 +50467,7 @@ var NDSSelect = /*#__PURE__*/forwardRef(function (_a, ref) {
     required: required,
     "aria-invalid": error,
     inputId: id,
-    styles: customStyles({
-      theme: theme,
-      error: error,
-      maxHeight: maxHeight,
-      size: componentSize,
-      windowed: options.length > windowThreshold
-    }),
+    styles: styles ? styles(stylesConfig) : stylesConfig,
     components: Object.assign(Object.assign({
       Option: function Option(props) {
         return /*#__PURE__*/React__default.createElement(SelectOption$1, Object.assign({

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

@@ -1,14 +1,15 @@
 import React, { ReactNode } from "react";
 import Select from "react-select/base";
 import { PropsValue } from "react-select";
-import type { GroupBase, Props } from "react-select";
+import type { GroupBase, Props, StylesConfig } from "react-select";
+import { StyledProps } from "../StyledProps";
 import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
 export type NDSOptionValue = string | number | boolean | null;
 export interface NDSOption {
-    label: string;
+    label: ReactNode;
     value: NDSOptionValue;
 }
-type CustomProps<IsMulti extends boolean, Group extends GroupBase<NDSOption>> = {
+interface CustomProps<IsMulti extends boolean, Group extends GroupBase<NDSOption>> extends StyledProps {
     autocomplete?: Props<NDSOption, IsMulti, Group>["isSearchable"];
     labelText?: string;
     size?: ComponentSize;
@@ -25,7 +26,8 @@ type CustomProps<IsMulti extends boolean, Group extends GroupBase<NDSOption>> =
     options: NDSOption[];
     onChange?: (newValue: PropsValue<NDSOptionValue>) => void;
     windowThreshold?: number;
-};
-export type NDSSelectProps<IsMulti extends boolean = boolean, Group extends GroupBase<NDSOption> = GroupBase<NDSOption>> = Omit<Props<NDSOption, IsMulti, Group>, keyof CustomProps<IsMulti, Group> | "isSearchable" | "isDisabled" | "defaultMenuIsOpen" | "isMulti"> & CustomProps<IsMulti, Group>;
+    styles?: (selectStyles: StylesConfig<NDSOption, IsMulti, Group>) => StylesConfig<NDSOption, IsMulti, Group>;
+}
+export type NDSSelectProps<IsMulti extends boolean = boolean, Group extends GroupBase<NDSOption> = GroupBase<NDSOption>> = Omit<Props<NDSOption, IsMulti, Group>, keyof CustomProps<IsMulti, Group> | "isSearchable" | "isDisabled" | "defaultMenuIsOpen" | "isMulti" | "styles"> & CustomProps<IsMulti, Group>;
 declare const NDSSelect: React.ForwardRefExoticComponent<Omit<Props<NDSOption, boolean, GroupBase<NDSOption>>, "isDisabled" | "isMulti" | "isSearchable" | "defaultMenuIsOpen" | keyof CustomProps<IsMulti, Group>> & CustomProps<boolean, GroupBase<NDSOption>> & React.RefAttributes<Select<NDSOption, boolean, GroupBase<NDSOption>>>>;
 export default NDSSelect;

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

@@ -5,6 +5,7 @@ declare const _default: {
 export default _default;
 export declare const _Select: () => React.JSX.Element;
 export declare const WithDifferentSizes: () => React.JSX.Element;
+export declare const WithStyledProps: () => React.JSX.Element;
 export declare const WithABlankValue: {
     (): React.JSX.Element;
     story: {
@@ -103,10 +104,6 @@ export declare const WithCustomOptionComponent: {
         name: string;
     };
 };
-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 WithCustomStyles: () => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "11.0.0-beta.2",
+  "version": "11.0.0-beta.4",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {