@ceed/cds 1.34.0 → 1.34.1

package/dist/index.cjs

@@ -6978,34 +6978,34 @@ RadioList.displayName = "RadioList";
 // src/components/SearchBar/SearchBar.tsx
 var React43 = __toESM(require("react"));
 var import_styles = require("@mui/joy/styles");
+var import_Box5 = __toESM(require("@mui/joy/Box"));
 var import_SearchRounded = __toESM(require("@mui/icons-material/SearchRounded"));
 var import_CloseRounded = __toESM(require("@mui/icons-material/CloseRounded"));
-var SearchBarRoot = (0, import_styles.styled)("div", {
+var SearchBarRoot = (0, import_styles.styled)(import_Box5.default, {
   name: "SearchBar",
-  slot: "root"
-})(({ theme, ownerState }) => {
-  const width = `--${theme.cssVarPrefix}-SearchBar-width`;
-  return {
-    [width]: ownerState.hideSelect ? "220px" : "300px",
-    display: "flex",
-    flexDirection: "row",
-    width: `var(${width})`,
-    backgroundColor: theme.vars.palette.background.surface,
-    borderRadius: theme.vars.radius.sm,
-    border: `1px solid ${theme.vars.palette.neutral.outlinedBorder}`,
-    overflow: "hidden"
-  };
-});
+  slot: "root",
+  shouldForwardProp: (prop) => prop !== "ownerState"
+})(({ theme, ownerState }) => ({
+  display: "inline-flex",
+  flexDirection: "row",
+  minWidth: "220px",
+  ...ownerState.showSelect && { maxWidth: "330px" },
+  backgroundColor: theme.vars.palette.background.surface,
+  borderRadius: theme.vars.radius.sm,
+  border: `1px solid ${theme.vars.palette.neutral.outlinedBorder}`,
+  overflow: "hidden",
+  flexShrink: 0
+}));
 var SearchBar = React43.forwardRef(function SearchBar2(inProps, ref) {
   const props = (0, import_styles.useThemeProps)({ props: inProps, name: "SearchBar" });
-  const { hideSelect = false, options, value, onChange, onSearch, ...other } = props;
+  const { showSelect = false, options, placeholder: placeholderProp, value, onChange, onSearch, ...other } = props;
   const [selectVal, setSelectVal] = React43.useState(options?.[0]?.value ?? "");
   const [isHovered, setIsHovered] = React43.useState(false);
-  const ownerState = { hideSelect };
+  const ownerState = { showSelect };
   const selectedOption = options?.find((o) => o.value === selectVal);
-  const placeholder = selectedOption?.placeholder ?? "";
+  const placeholder = placeholderProp ?? selectedOption?.placeholder ?? "";
   const handleSearch = () => {
-    onSearch?.({ selectValue: hideSelect ? void 0 : selectVal, inputValue: value });
+    onSearch?.({ selectValue: showSelect ? selectVal : void 0, inputValue: value });
   };
   const handleClear = () => {
     onChange("");
@@ -7015,7 +7015,7 @@ var SearchBar = React43.forwardRef(function SearchBar2(inProps, ref) {
       handleSearch();
     }
   };
-  return /* @__PURE__ */ React43.createElement(SearchBarRoot, { ref, ownerState, ...other }, !hideSelect && options && /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React43.createElement(SearchBarRoot, { ref, ownerState, ...other }, showSelect && options && /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement(
     Select,
     {
       variant: "plain",
@@ -7024,14 +7024,14 @@ var SearchBar = React43.forwardRef(function SearchBar2(inProps, ref) {
       value: selectVal,
       options,
       onChange: (_, newValue) => setSelectVal(newValue),
-      sx: { flex: 1, maxWidth: "110px" },
+      sx: { flex: 1, minWidth: "80px", maxWidth: "110px" },
       slotProps: {
         button: {
           style: { display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
         }
       }
     }
-  ), /* @__PURE__ */ React43.createElement(Divider, { orientation: "vertical", sx: { height: "16px", alignSelf: "center" } })), /* @__PURE__ */ React43.createElement(
+  ), /* @__PURE__ */ React43.createElement(Divider, { orientation: "vertical", sx: { height: (theme) => theme.spacing(4), alignSelf: "center" } })), /* @__PURE__ */ React43.createElement(
     Input,
     {
       variant: "plain",

package/dist/index.js

@@ -6879,34 +6879,34 @@ RadioList.displayName = "RadioList";
 // src/components/SearchBar/SearchBar.tsx
 import * as React43 from "react";
 import { styled as styled27, useThemeProps as useThemeProps9 } from "@mui/joy/styles";
+import Box2 from "@mui/joy/Box";
 import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
 import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
-var SearchBarRoot = styled27("div", {
+var SearchBarRoot = styled27(Box2, {
   name: "SearchBar",
-  slot: "root"
-})(({ theme, ownerState }) => {
-  const width = `--${theme.cssVarPrefix}-SearchBar-width`;
-  return {
-    [width]: ownerState.hideSelect ? "220px" : "300px",
-    display: "flex",
-    flexDirection: "row",
-    width: `var(${width})`,
-    backgroundColor: theme.vars.palette.background.surface,
-    borderRadius: theme.vars.radius.sm,
-    border: `1px solid ${theme.vars.palette.neutral.outlinedBorder}`,
-    overflow: "hidden"
-  };
-});
+  slot: "root",
+  shouldForwardProp: (prop) => prop !== "ownerState"
+})(({ theme, ownerState }) => ({
+  display: "inline-flex",
+  flexDirection: "row",
+  minWidth: "220px",
+  ...ownerState.showSelect && { maxWidth: "330px" },
+  backgroundColor: theme.vars.palette.background.surface,
+  borderRadius: theme.vars.radius.sm,
+  border: `1px solid ${theme.vars.palette.neutral.outlinedBorder}`,
+  overflow: "hidden",
+  flexShrink: 0
+}));
 var SearchBar = React43.forwardRef(function SearchBar2(inProps, ref) {
   const props = useThemeProps9({ props: inProps, name: "SearchBar" });
-  const { hideSelect = false, options, value, onChange, onSearch, ...other } = props;
+  const { showSelect = false, options, placeholder: placeholderProp, value, onChange, onSearch, ...other } = props;
   const [selectVal, setSelectVal] = React43.useState(options?.[0]?.value ?? "");
   const [isHovered, setIsHovered] = React43.useState(false);
-  const ownerState = { hideSelect };
+  const ownerState = { showSelect };
   const selectedOption = options?.find((o) => o.value === selectVal);
-  const placeholder = selectedOption?.placeholder ?? "";
+  const placeholder = placeholderProp ?? selectedOption?.placeholder ?? "";
   const handleSearch = () => {
-    onSearch?.({ selectValue: hideSelect ? void 0 : selectVal, inputValue: value });
+    onSearch?.({ selectValue: showSelect ? selectVal : void 0, inputValue: value });
   };
   const handleClear = () => {
     onChange("");
@@ -6916,7 +6916,7 @@ var SearchBar = React43.forwardRef(function SearchBar2(inProps, ref) {
       handleSearch();
     }
   };
-  return /* @__PURE__ */ React43.createElement(SearchBarRoot, { ref, ownerState, ...other }, !hideSelect && options && /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React43.createElement(SearchBarRoot, { ref, ownerState, ...other }, showSelect && options && /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement(
     Select,
     {
       variant: "plain",
@@ -6925,14 +6925,14 @@ var SearchBar = React43.forwardRef(function SearchBar2(inProps, ref) {
       value: selectVal,
       options,
       onChange: (_, newValue) => setSelectVal(newValue),
-      sx: { flex: 1, maxWidth: "110px" },
+      sx: { flex: 1, minWidth: "80px", maxWidth: "110px" },
       slotProps: {
         button: {
           style: { display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }
         }
       }
     }
-  ), /* @__PURE__ */ React43.createElement(Divider, { orientation: "vertical", sx: { height: "16px", alignSelf: "center" } })), /* @__PURE__ */ React43.createElement(
+  ), /* @__PURE__ */ React43.createElement(Divider, { orientation: "vertical", sx: { height: (theme) => theme.spacing(4), alignSelf: "center" } })), /* @__PURE__ */ React43.createElement(
     Input,
     {
       variant: "plain",