@lets-events/react 11.8.0 → 11.8.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@11.8.0 build
+> @lets-events/react@11.8.1 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -8,11 +8,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
-ESM dist\index.mjs 322.91 KB
-ESM ⚡️ Build success in 230ms
-CJS dist\index.js 335.24 KB
-CJS ⚡️ Build success in 230ms
 DTS Build start
-DTS ⚡️ Build success in 4099ms
-DTS dist\index.d.mts 374.57 KB
-DTS dist\index.d.ts  374.57 KB
+ESM dist\index.mjs 323.44 KB
+ESM ⚡️ Build success in 653ms
+CJS dist\index.js 335.78 KB
+CJS ⚡️ Build success in 654ms
+DTS ⚡️ Build success in 4387ms
+DTS dist\index.d.mts 374.64 KB
+DTS dist\index.d.ts  374.64 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lets-events/react
 
+## 11.8.1
+
+### Patch Changes
+
+- add disabled state to select
+
 ## 11.8.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -12215,6 +12215,7 @@ declare function Tooltip({ children, content, delayDuration, side, }: TooltipPro
 
 declare const StyledTrigger: _stitches_react_types_styled_component.StyledComponent<"div", {
     color?: "default" | "error" | undefined;
+    disabled?: boolean | "true" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
@@ -12597,6 +12598,7 @@ type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
     zIndex?: string;
     showSelectedValues?: boolean;
     singleSelect?: boolean;
+    disabled?: boolean;
 };
 declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -12215,6 +12215,7 @@ declare function Tooltip({ children, content, delayDuration, side, }: TooltipPro
 
 declare const StyledTrigger: _stitches_react_types_styled_component.StyledComponent<"div", {
     color?: "default" | "error" | undefined;
+    disabled?: boolean | "true" | undefined;
 }, {}, _stitches_react_types_css_util.CSS<{}, {
     colors: {
         brand50: string;
@@ -12597,6 +12598,7 @@ type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
     zIndex?: string;
     showSelectedValues?: boolean;
     singleSelect?: boolean;
+    disabled?: boolean;
 };
 declare const MultiSelect: React__default.ForwardRefExoticComponent<Omit<MultiSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -9461,6 +9461,12 @@ var StyledTrigger = styled("div", {
       error: {
         border: "1px solid $error400"
       }
+    },
+    disabled: {
+      true: {
+        cursor: "not-allowed",
+        border: "1px solid $dark100"
+      }
     }
   },
   defaultVariants: {
@@ -9499,7 +9505,8 @@ var MultiSelect = import_react17.default.forwardRef(
     width = "100%",
     zIndex = "auto",
     showSelectedValues = true,
-    singleSelect = false
+    singleSelect = false,
+    disabled = false
   }, fowardedRef) => {
     var _a;
     const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
@@ -9532,48 +9539,59 @@ var MultiSelect = import_react17.default.forwardRef(
     };
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes18.Theme, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes18.DropdownMenu.Root, { open: isOpen, onOpenChange: () => setIsOpen(false), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes18.DropdownMenu.Trigger, { onClick: () => setIsOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
-          StyledTrigger,
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          import_themes18.DropdownMenu.Trigger,
           {
-            css: {
-              width
+            onClick: () => {
+              if (disabled) return;
+              setIsOpen(true);
             },
-            ref: (r) => {
-              if (!r) return;
-              triggerRef.current = r;
-              if (fowardedRef) {
-                if (typeof fowardedRef === "function") fowardedRef(r);
-                else {
-                  fowardedRef.current = r;
-                }
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+              StyledTrigger,
+              {
+                css: {
+                  width
+                },
+                ref: (r) => {
+                  if (!r) return;
+                  triggerRef.current = r;
+                  if (fowardedRef) {
+                    if (typeof fowardedRef === "function") fowardedRef(r);
+                    else {
+                      fowardedRef.current = r;
+                    }
+                  }
+                },
+                color,
+                disabled,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    Text,
+                    {
+                      typography: "labelMedium",
+                      css: {
+                        flex: 1,
+                        overflow: "hidden",
+                        whiteSpace: "nowrap",
+                        textOverflow: "ellipsis"
+                      },
+                      color: disabled ? "dark400" : void 0,
+                      children: text
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    import_react_fontawesome3.FontAwesomeIcon,
+                    {
+                      icon: isOpen ? import_free_solid_svg_icons3.faChevronUp : import_free_solid_svg_icons3.faChevronDown,
+                      size: "sm",
+                      color: disabled ? colors.dark400 : colors.dark600
+                    }
+                  )
+                ]
               }
-            },
-            color,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                Text,
-                {
-                  typography: "labelMedium",
-                  css: {
-                    flex: 1,
-                    overflow: "hidden",
-                    whiteSpace: "nowrap",
-                    textOverflow: "ellipsis"
-                  },
-                  children: text
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-                import_react_fontawesome3.FontAwesomeIcon,
-                {
-                  icon: isOpen ? import_free_solid_svg_icons3.faChevronUp : import_free_solid_svg_icons3.faChevronDown,
-                  size: "sm",
-                  color: colors.dark600
-                }
-              )
-            ]
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           StyledContent,
           {

package/dist/index.mjs

@@ -9362,6 +9362,12 @@ var StyledTrigger = styled("div", {
       error: {
         border: "1px solid $error400"
       }
+    },
+    disabled: {
+      true: {
+        cursor: "not-allowed",
+        border: "1px solid $dark100"
+      }
     }
   },
   defaultVariants: {
@@ -9400,7 +9406,8 @@ var MultiSelect = React9.forwardRef(
     width = "100%",
     zIndex = "auto",
     showSelectedValues = true,
-    singleSelect = false
+    singleSelect = false,
+    disabled = false
   }, fowardedRef) => {
     var _a;
     const [isOpen, setIsOpen] = useState6(false);
@@ -9433,48 +9440,59 @@ var MultiSelect = React9.forwardRef(
     };
     return /* @__PURE__ */ jsxs14(Theme3, { children: [
       /* @__PURE__ */ jsxs14(DropdownMenu3.Root, { open: isOpen, onOpenChange: () => setIsOpen(false), children: [
-        /* @__PURE__ */ jsx26(DropdownMenu3.Trigger, { onClick: () => setIsOpen(true), children: /* @__PURE__ */ jsxs14(
-          StyledTrigger,
+        /* @__PURE__ */ jsx26(
+          DropdownMenu3.Trigger,
           {
-            css: {
-              width
+            onClick: () => {
+              if (disabled) return;
+              setIsOpen(true);
             },
-            ref: (r) => {
-              if (!r) return;
-              triggerRef.current = r;
-              if (fowardedRef) {
-                if (typeof fowardedRef === "function") fowardedRef(r);
-                else {
-                  fowardedRef.current = r;
-                }
+            children: /* @__PURE__ */ jsxs14(
+              StyledTrigger,
+              {
+                css: {
+                  width
+                },
+                ref: (r) => {
+                  if (!r) return;
+                  triggerRef.current = r;
+                  if (fowardedRef) {
+                    if (typeof fowardedRef === "function") fowardedRef(r);
+                    else {
+                      fowardedRef.current = r;
+                    }
+                  }
+                },
+                color,
+                disabled,
+                children: [
+                  /* @__PURE__ */ jsx26(
+                    Text,
+                    {
+                      typography: "labelMedium",
+                      css: {
+                        flex: 1,
+                        overflow: "hidden",
+                        whiteSpace: "nowrap",
+                        textOverflow: "ellipsis"
+                      },
+                      color: disabled ? "dark400" : void 0,
+                      children: text
+                    }
+                  ),
+                  /* @__PURE__ */ jsx26(
+                    FontAwesomeIcon3,
+                    {
+                      icon: isOpen ? faChevronUp2 : faChevronDown2,
+                      size: "sm",
+                      color: disabled ? colors.dark400 : colors.dark600
+                    }
+                  )
+                ]
               }
-            },
-            color,
-            children: [
-              /* @__PURE__ */ jsx26(
-                Text,
-                {
-                  typography: "labelMedium",
-                  css: {
-                    flex: 1,
-                    overflow: "hidden",
-                    whiteSpace: "nowrap",
-                    textOverflow: "ellipsis"
-                  },
-                  children: text
-                }
-              ),
-              /* @__PURE__ */ jsx26(
-                FontAwesomeIcon3,
-                {
-                  icon: isOpen ? faChevronUp2 : faChevronDown2,
-                  size: "sm",
-                  color: colors.dark600
-                }
-              )
-            ]
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx26(
           StyledContent,
           {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "11.8.0",
+  "version": "11.8.1",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/MultiSelect.tsx

@@ -46,6 +46,12 @@ const StyledTrigger = styled("div", {
         border: "1px solid $error400",
       },
     },
+    disabled: {
+      true: {
+        cursor: "not-allowed",
+        border: "1px solid $dark100",
+      },
+    },
   },
 
   defaultVariants: {
@@ -94,6 +100,7 @@ export type MultiSelectProps = ComponentProps<typeof StyledTrigger> & {
   zIndex?: string;
   showSelectedValues?: boolean;
   singleSelect?: boolean;
+  disabled?: boolean;
 };
 
 export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
@@ -108,6 +115,7 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
       zIndex = "auto",
       showSelectedValues = true,
       singleSelect = false,
+      disabled = false,
     },
     fowardedRef
   ) => {
@@ -151,7 +159,12 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
     return (
       <Theme>
         <DropdownMenu.Root open={isOpen} onOpenChange={() => setIsOpen(false)}>
-          <DropdownMenu.Trigger onClick={() => setIsOpen(true)}>
+          <DropdownMenu.Trigger
+            onClick={() => {
+              if (disabled) return;
+              setIsOpen(true);
+            }}
+          >
             <StyledTrigger
               css={{
                 width,
@@ -167,6 +180,7 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
                 }
               }}
               color={color}
+              disabled={disabled}
             >
               <Text
                 typography={"labelMedium"}
@@ -176,13 +190,14 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
                   whiteSpace: "nowrap",
                   textOverflow: "ellipsis",
                 }}
+                color={disabled ? "dark400" : undefined}
               >
                 {text}
               </Text>
               <FontAwesomeIcon
                 icon={isOpen ? faChevronUp : faChevronDown}
                 size="sm"
-                color={colors.dark600}
+                color={disabled ? colors.dark400 : colors.dark600}
               />
             </StyledTrigger>
           </DropdownMenu.Trigger>