@ikatec/nebula-react 0.0.1-alpha.21 → 0.0.1-alpha.23

package/dist/index.d.mts

@@ -248,21 +248,22 @@ declare const Tag: React$1.ForwardRefExoticComponent<TagProps & React$1.RefAttri
 interface CreateStyledSelectProps extends Omit<Props, 'isDisabled'> {
     icon?: React.ReactNode;
     disabled?: boolean;
+    isError?: boolean;
 }
 declare const StyledSelect: {
-    ({ icon, disabled, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const StyledCreatable: {
-    ({ icon, disabled, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const StyledAsync: {
-    ({ icon, disabled, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const StyledAsyncCreatable: {
-    ({ icon, disabled, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -248,21 +248,22 @@ declare const Tag: React$1.ForwardRefExoticComponent<TagProps & React$1.RefAttri
 interface CreateStyledSelectProps extends Omit<Props, 'isDisabled'> {
     icon?: React.ReactNode;
     disabled?: boolean;
+    isError?: boolean;
 }
 declare const StyledSelect: {
-    ({ icon, disabled, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const StyledCreatable: {
-    ({ icon, disabled, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const StyledAsync: {
-    ({ icon, disabled, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 declare const StyledAsyncCreatable: {
-    ({ icon, disabled, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
+    ({ icon, disabled, isError, ...props }: CreateStyledSelectProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

@@ -1378,7 +1378,14 @@ var Tag = React8__namespace.forwardRef(
 );
 Tag.displayName = "Tag";
 var DropdownIndicator = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: "16px" }) });
-var ClearIndicator = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.ClearIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(X, { size: "16px" }) });
+var ClearIndicator = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  Select.components.ClearIndicator,
+  {
+    ...props,
+    className: cn(props.className, "cursor-pointer"),
+    children: /* @__PURE__ */ jsxRuntime.jsx(X, { size: "16px" })
+  }
+);
 var MultiValueRemove = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(CircleX, { size: "16px" }) });
 var Option = (props) => {
   const { isSelected, data, innerRef, innerProps } = props;
@@ -1398,13 +1405,11 @@ var Option = (props) => {
           hover:text-inputSelect-focus-text 
           hover:bg-listItem-background-hover 
           bg-listItem-background-default
-          `,
-        isSelected ? `
-          text-inputSelect-focus-text
-          font-semibold
-          bg-listItem-background-hover` : `
           text-inputSelect-default-text
-          `
+          `,
+        {
+          "text-inputSelect-focus-text font-semibold bg-listItem-background-hover": isSelected
+        }
       ),
       children: [
         isSelected && /* @__PURE__ */ jsxRuntime.jsx(Check, { size: "16px" }),
@@ -1413,71 +1418,84 @@ var Option = (props) => {
     }
   );
 };
-var controlStyles = (state) => cn([
-  `
-      border 
-      bg-inputSelect-default-background 
-      rounded-[20px] 
-      px-4
-      w-full
-      min-h-10 
-      transition
-    `,
-  {
-    "border-inputSelect-focus-border text-inputSelect-focus-text ring-[3px] ring-inputSelect-focus-border": state.isFocused,
-    "border-inputSelect-default-border text-inputSelect-default-text": !state.isFocused,
-    "bg-inputText-background-disabled": state.isDisabled
-  }
-]);
+var controlStyles = ({ isDisabled, isFocused }, isError) => {
+  return cn(
+    "flex w-full items-center border bg-inputSelect-default-background rounded-[20px] px-4 min-h-10 transition",
+    {
+      "ring-[3px] border-inputSelect-focus-border text-inputSelect-focus-text ring-inputSelect-focus-border": isFocused,
+      "border-inputSelect-danger-border text-inputSelect-danger-icon": isError,
+      "border-inputSelect-default-border text-inputSelect-default-text": !isFocused && !isError,
+      "bg-inputText-background-disabled": isDisabled,
+      "ring-button-danger-border-focus": isError && isFocused
+    }
+  );
+};
 var placeholderStyles = "text-inputSelect-default-text text-sm";
 var selectInputStyles = "p-0";
 var valueContainerStyles = "gap-1";
 var singleValueStyles = "text-inputSelect-active-text text-sm";
-var multiValueStyles = "border rounded-full items-center px-2 py-0.2 gap-1.5 text-xs border-inputSelect-default-border";
-var multiValueLabelStyles = "leading-6 px-2 py-0.2";
+var multiValueStyles = "border rounded-full items-center gap-1.5 text-xs border-inputSelect-default-border h-6 px-2";
+var multiValueLabelStyles = "";
 var indicatorsContainerStyles = "";
 var clearIndicatorStyles = "text-inputSelect-default-icon mr-2";
 var dropdownIndicatorStyles = "text-inputSelect-default-icon";
-var menuStyles = "mt-2 border bg-inputSelect-default-background rounded-2xl overflow-hidden shadow-md shadow-dropdownMenu-shadow";
+var menuStyles = "mt-2 z-[1000] rounded-2xl border border-dropdownMenu-border  bg-dropdownMenu-background  shadow-dropdownMenu-shadow shadow-sm outline-none overflow-hidden";
 var groupHeadingStyles = "ml-3 mt-2 mb-1 text-inputSelect-default-text text-sm";
 var noOptionsMessageStyles = "p-2 text-inputSelect-default-text";
 var createStyledSelect = (BaseSelect, displayName) => {
   const StyledSelect2 = ({
     icon,
     disabled = false,
+    isError = false,
     ...props
   }) => {
     const { messages: messages8 } = useNebulaI18n();
+    const customClassNames = React8.useMemo(() => {
+      return {
+        control: (props2) => controlStyles(props2, isError),
+        placeholder: () => placeholderStyles,
+        input: () => selectInputStyles,
+        valueContainer: () => valueContainerStyles,
+        singleValue: () => singleValueStyles,
+        multiValue: () => multiValueStyles,
+        multiValueLabel: () => multiValueLabelStyles,
+        indicatorsContainer: () => indicatorsContainerStyles,
+        clearIndicator: () => clearIndicatorStyles,
+        dropdownIndicator: () => dropdownIndicatorStyles,
+        menu: () => menuStyles,
+        groupHeading: () => groupHeadingStyles,
+        noOptionsMessage: () => noOptionsMessageStyles
+      };
+    }, [isError]);
+    const customComponents = React8.useMemo(
+      () => ({
+        DropdownIndicator,
+        ClearIndicator,
+        MultiValueRemove,
+        Option,
+        Control: ({ children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.Control, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds flex w-full items-center", children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn("mr-2", {
+                "text-inputSelect-default-icon": !isError,
+                "text-inputSelect-danger-icon": isError
+              }),
+              children: icon
+            }
+          ),
+          children
+        ] }) })
+      }),
+      [icon, isError]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseSelect,
       {
         unstyled: true,
         isDisabled: disabled,
-        components: {
-          DropdownIndicator,
-          ClearIndicator,
-          MultiValueRemove,
-          Option,
-          Control: ({ children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.Control, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nebula-ds flex w-full items-center", children: [
-            icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nebula-ds text-inputSelect-default-icon pr-2", children: icon }),
-            children
-          ] }) })
-        },
-        classNames: {
-          control: (state) => cn(controlStyles(state)),
-          placeholder: () => placeholderStyles,
-          input: () => selectInputStyles,
-          valueContainer: () => valueContainerStyles,
-          singleValue: () => singleValueStyles,
-          multiValue: () => multiValueStyles,
-          multiValueLabel: () => multiValueLabelStyles,
-          indicatorsContainer: () => indicatorsContainerStyles,
-          clearIndicator: () => clearIndicatorStyles,
-          dropdownIndicator: () => dropdownIndicatorStyles,
-          menu: () => menuStyles,
-          groupHeading: () => groupHeadingStyles,
-          noOptionsMessage: () => noOptionsMessageStyles
-        },
+        components: customComponents,
+        classNames: customClassNames,
         noOptionsMessage: () => /* @__PURE__ */ jsxRuntime.jsx("p", { children: messages8.inputSelect.noOptions }),
         ...props
       }

package/dist/index.mjs

@@ -1342,7 +1342,14 @@ var Tag = React8.forwardRef(
 );
 Tag.displayName = "Tag";
 var DropdownIndicator = (props) => /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsx(ChevronDown, { size: "16px" }) });
-var ClearIndicator = (props) => /* @__PURE__ */ jsx(components.ClearIndicator, { ...props, children: /* @__PURE__ */ jsx(X, { size: "16px" }) });
+var ClearIndicator = (props) => /* @__PURE__ */ jsx(
+  components.ClearIndicator,
+  {
+    ...props,
+    className: cn(props.className, "cursor-pointer"),
+    children: /* @__PURE__ */ jsx(X, { size: "16px" })
+  }
+);
 var MultiValueRemove = (props) => /* @__PURE__ */ jsx(components.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsx(CircleX, { size: "16px" }) });
 var Option = (props) => {
   const { isSelected, data, innerRef, innerProps } = props;
@@ -1362,13 +1369,11 @@ var Option = (props) => {
           hover:text-inputSelect-focus-text 
           hover:bg-listItem-background-hover 
           bg-listItem-background-default
-          `,
-        isSelected ? `
-          text-inputSelect-focus-text
-          font-semibold
-          bg-listItem-background-hover` : `
           text-inputSelect-default-text
-          `
+          `,
+        {
+          "text-inputSelect-focus-text font-semibold bg-listItem-background-hover": isSelected
+        }
       ),
       children: [
         isSelected && /* @__PURE__ */ jsx(Check, { size: "16px" }),
@@ -1377,71 +1382,84 @@ var Option = (props) => {
     }
   );
 };
-var controlStyles = (state) => cn([
-  `
-      border 
-      bg-inputSelect-default-background 
-      rounded-[20px] 
-      px-4
-      w-full
-      min-h-10 
-      transition
-    `,
-  {
-    "border-inputSelect-focus-border text-inputSelect-focus-text ring-[3px] ring-inputSelect-focus-border": state.isFocused,
-    "border-inputSelect-default-border text-inputSelect-default-text": !state.isFocused,
-    "bg-inputText-background-disabled": state.isDisabled
-  }
-]);
+var controlStyles = ({ isDisabled, isFocused }, isError) => {
+  return cn(
+    "flex w-full items-center border bg-inputSelect-default-background rounded-[20px] px-4 min-h-10 transition",
+    {
+      "ring-[3px] border-inputSelect-focus-border text-inputSelect-focus-text ring-inputSelect-focus-border": isFocused,
+      "border-inputSelect-danger-border text-inputSelect-danger-icon": isError,
+      "border-inputSelect-default-border text-inputSelect-default-text": !isFocused && !isError,
+      "bg-inputText-background-disabled": isDisabled,
+      "ring-button-danger-border-focus": isError && isFocused
+    }
+  );
+};
 var placeholderStyles = "text-inputSelect-default-text text-sm";
 var selectInputStyles = "p-0";
 var valueContainerStyles = "gap-1";
 var singleValueStyles = "text-inputSelect-active-text text-sm";
-var multiValueStyles = "border rounded-full items-center px-2 py-0.2 gap-1.5 text-xs border-inputSelect-default-border";
-var multiValueLabelStyles = "leading-6 px-2 py-0.2";
+var multiValueStyles = "border rounded-full items-center gap-1.5 text-xs border-inputSelect-default-border h-6 px-2";
+var multiValueLabelStyles = "";
 var indicatorsContainerStyles = "";
 var clearIndicatorStyles = "text-inputSelect-default-icon mr-2";
 var dropdownIndicatorStyles = "text-inputSelect-default-icon";
-var menuStyles = "mt-2 border bg-inputSelect-default-background rounded-2xl overflow-hidden shadow-md shadow-dropdownMenu-shadow";
+var menuStyles = "mt-2 z-[1000] rounded-2xl border border-dropdownMenu-border  bg-dropdownMenu-background  shadow-dropdownMenu-shadow shadow-sm outline-none overflow-hidden";
 var groupHeadingStyles = "ml-3 mt-2 mb-1 text-inputSelect-default-text text-sm";
 var noOptionsMessageStyles = "p-2 text-inputSelect-default-text";
 var createStyledSelect = (BaseSelect, displayName) => {
   const StyledSelect2 = ({
     icon,
     disabled = false,
+    isError = false,
     ...props
   }) => {
     const { messages: messages8 } = useNebulaI18n();
+    const customClassNames = useMemo(() => {
+      return {
+        control: (props2) => controlStyles(props2, isError),
+        placeholder: () => placeholderStyles,
+        input: () => selectInputStyles,
+        valueContainer: () => valueContainerStyles,
+        singleValue: () => singleValueStyles,
+        multiValue: () => multiValueStyles,
+        multiValueLabel: () => multiValueLabelStyles,
+        indicatorsContainer: () => indicatorsContainerStyles,
+        clearIndicator: () => clearIndicatorStyles,
+        dropdownIndicator: () => dropdownIndicatorStyles,
+        menu: () => menuStyles,
+        groupHeading: () => groupHeadingStyles,
+        noOptionsMessage: () => noOptionsMessageStyles
+      };
+    }, [isError]);
+    const customComponents = useMemo(
+      () => ({
+        DropdownIndicator,
+        ClearIndicator,
+        MultiValueRemove,
+        Option,
+        Control: ({ children, ...rest }) => /* @__PURE__ */ jsx(components.Control, { ...rest, children: /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex w-full items-center", children: [
+          icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("mr-2", {
+                "text-inputSelect-default-icon": !isError,
+                "text-inputSelect-danger-icon": isError
+              }),
+              children: icon
+            }
+          ),
+          children
+        ] }) })
+      }),
+      [icon, isError]
+    );
     return /* @__PURE__ */ jsx(
       BaseSelect,
       {
         unstyled: true,
         isDisabled: disabled,
-        components: {
-          DropdownIndicator,
-          ClearIndicator,
-          MultiValueRemove,
-          Option,
-          Control: ({ children, ...rest }) => /* @__PURE__ */ jsx(components.Control, { ...rest, children: /* @__PURE__ */ jsxs("div", { className: "nebula-ds flex w-full items-center", children: [
-            icon && /* @__PURE__ */ jsx("span", { className: "nebula-ds text-inputSelect-default-icon pr-2", children: icon }),
-            children
-          ] }) })
-        },
-        classNames: {
-          control: (state) => cn(controlStyles(state)),
-          placeholder: () => placeholderStyles,
-          input: () => selectInputStyles,
-          valueContainer: () => valueContainerStyles,
-          singleValue: () => singleValueStyles,
-          multiValue: () => multiValueStyles,
-          multiValueLabel: () => multiValueLabelStyles,
-          indicatorsContainer: () => indicatorsContainerStyles,
-          clearIndicator: () => clearIndicatorStyles,
-          dropdownIndicator: () => dropdownIndicatorStyles,
-          menu: () => menuStyles,
-          groupHeading: () => groupHeadingStyles,
-          noOptionsMessage: () => noOptionsMessageStyles
-        },
+        components: customComponents,
+        classNames: customClassNames,
         noOptionsMessage: () => /* @__PURE__ */ jsx("p", { children: messages8.inputSelect.noOptions }),
         ...props
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikatec/nebula-react",
-  "version": "0.0.1-alpha.21",
+  "version": "0.0.1-alpha.23",
   "description": "React components",
   "publishConfig": {
     "access": "public"