@strapi/design-system 2.0.0-rc.22 → 2.0.0-rc.24

package/dist/index.mjs

@@ -2875,11 +2875,14 @@ const CarouselImage = (props) => {
   }
   return /* @__PURE__ */ jsx(StyledImage, { tag: "img", height: "100%", maxWidth: "100%", ...props, onError: handleImageError });
 };
+const CarouselSlideFlex = styled(Flex)`
+  display: ${({ $selected }) => $selected ? "flex" : "none"};
+`;
 const CarouselSlide = ({ label, children, selected = false, ...props }) => /* @__PURE__ */ jsx(
-  Flex,
+  CarouselSlideFlex,
   {
+    $selected: selected,
     alignItems: "center",
-    display: selected ? "flex" : "none",
     role: "group",
     "aria-roledescription": "slide",
     "aria-label": label,
@@ -2973,6 +2976,7 @@ const Combobox = React.forwardRef(
     className,
     clearLabel = "Clear",
     creatable = false,
+    creatableDisabled = false,
     creatableStartIcon,
     createMessage = (value2) => `Create "${value2}"`,
     defaultFilterValue,
@@ -3061,6 +3065,7 @@ const Combobox = React.forwardRef(
         onCreateOption(internalTextValue);
       } else if (onCreateOption && creatable === "visible") {
         onCreateOption();
+        setInternalIsOpen(false);
       }
     };
     const generatedIntersectionId = useId();
@@ -3143,10 +3148,19 @@ const Combobox = React.forwardRef(
               loading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: /* @__PURE__ */ jsx(Loader, { small: true, children: loadingMessage }) }) : null,
               /* @__PURE__ */ jsx(Box, { id: intersectionId, width: "100%", height: "1px" })
             ] }),
-            creatable ? /* @__PURE__ */ jsx(ComboboxCreateItem, { onPointerUp: handleCreateItemClick, asChild: true, children: /* @__PURE__ */ jsx(OptionBox, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-              creatableStartIcon && /* @__PURE__ */ jsx(Box, { tag: "span", "aria-hidden": true, display: "inline-flex", children: creatableStartIcon }),
-              /* @__PURE__ */ jsx(Typography, { children: createMessage(internalTextValue ?? "") })
-            ] }) }) }) : null
+            creatable ? /* @__PURE__ */ jsx(
+              ComboboxCreateItem,
+              {
+                onPointerUp: handleCreateItemClick,
+                onClick: handleCreateItemClick,
+                disabled: creatableDisabled,
+                asChild: true,
+                children: /* @__PURE__ */ jsx(OptionBox, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+                  creatableStartIcon && /* @__PURE__ */ jsx(Box, { tag: "span", "aria-hidden": true, display: "inline-flex", children: creatableStartIcon }),
+                  /* @__PURE__ */ jsx(Typography, { children: createMessage(internalTextValue ?? "") })
+                ] }) })
+              }
+            ) : null
           ] }) }) })
         ]
       }
@@ -3266,7 +3280,18 @@ const ComboboxCreateItem = styled(Combobox$1.CreateItem)`
   }
   &&:hover,
   &&[data-highlighted] {
-    background-color: transparent;
+    background: ${({ theme }) => theme.colors.neutral0};
+  }
+  &&[data-disabled] {
+    color: ${({ theme }) => theme.colors.neutral600};
+    background: ${({ theme }) => theme.colors.neutral150};
+    cursor: not-allowed;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &&[data-disabled]:hover {
+    background: ${({ theme }) => theme.colors.neutral150};
+    color: ${({ theme }) => theme.colors.neutral600};
   }
   && > div {
     padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
@@ -3275,6 +3300,9 @@ const ComboboxCreateItem = styled(Combobox$1.CreateItem)`
   &&[data-highlighted] > div {
     background-color: ${({ theme }) => theme.colors.primary100};
   }
+  &&[data-disabled] > div:hover {
+    background: ${({ theme }) => theme.colors.neutral150};
+  }
 `;
 const ScrollAreaCombobox = styled(ScrollAreaImpl$1)`
   padding: ${({ theme }) => theme.spaces[1]};
@@ -5298,6 +5326,10 @@ const BodyScroll = styled(ScrollAreaImpl$1)`
 
   & > div {
     padding-block: ${(props) => props.theme.spaces[8]};
+    /* Add negative margin and padding to avoid cropping the box shadow when the inputs are focused */
+    margin: 0 -2px 0 -2px;
+    padding-left: 2px;
+    padding-right: 2px;
 
     & > div {
       // the scroll area component applies a display: table to the child, which we don't want.