@ceed/cds 1.36.0-next.1 → 1.36.1

package/dist/index.js

@@ -2,7 +2,7 @@
 import {
   useTheme as useTheme2,
   useColorScheme,
-  useThemeProps as useThemeProps13,
+  useThemeProps as useThemeProps10,
   ButtonGroup,
   alertClasses,
   boxClasses,
@@ -141,7 +141,7 @@ Accordions.displayName = "Accordions";
 
 // src/components/Alert/Alert.tsx
 import React3 from "react";
-import { Alert as JoyAlert, styled, useThemeProps } from "@mui/joy";
+import { Alert as JoyAlert, styled } from "@mui/joy";
 import { motion as motion3 } from "framer-motion";
 
 // src/components/Typography/Typography.tsx
@@ -178,8 +178,7 @@ var contentLevelMapping = {
   md: "body-sm",
   lg: "body-md"
 };
-function Alert(inProps) {
-  const props = useThemeProps({ props: inProps, name: "Alert" });
+function Alert(props) {
   const { title, content, actions, color = "primary", size = "md", ...innerProps } = props;
   const invertedColors = props.invertedColors || props.variant === "solid";
   return /* @__PURE__ */ React3.createElement(MotionAlert, { ...innerProps, color, endDecorator: actions, invertedColors, size }, /* @__PURE__ */ React3.createElement(Stack_default, null, title && /* @__PURE__ */ React3.createElement(Typography_default, { level: titleLevelMapping[size], fontWeight: "bold", color }, title), /* @__PURE__ */ React3.createElement(Typography_default, { level: contentLevelMapping[size], fontWeight: 500, color }, content)));
@@ -584,7 +583,7 @@ var Autocomplete_default = Autocomplete;
 
 // src/components/Avatar/Avatar.tsx
 import React6, { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
-import { Avatar as JoyAvatar, AvatarGroup, styled as styled4, useThemeProps as useThemeProps2 } from "@mui/joy";
+import { Avatar as JoyAvatar, AvatarGroup, styled as styled4, useThemeProps } from "@mui/joy";
 var StyledAvatar = styled4(JoyAvatar, {
   name: "Avatar",
   slot: "Root",
@@ -606,7 +605,7 @@ var defaultGetInitial = (name) => {
   }
 };
 var Avatar = forwardRef2(function Avatar2(inProps, ref) {
-  const props = useThemeProps2({
+  const props = useThemeProps({
     props: inProps,
     name: "Avatar"
   });
@@ -826,7 +825,7 @@ var isSameMonth = (date1, date2) => {
 
 // src/components/Calendar/hooks/use-calendar-props.ts
 import { useCallback as useCallback4, useMemo as useMemo4, useState as useState3 } from "react";
-import { useThemeProps as useThemeProps3 } from "@mui/joy";
+import { useThemeProps as useThemeProps2 } from "@mui/joy";
 var resolveView = (view, views) => {
   return views.includes(view) ? view : views[0];
 };
@@ -875,7 +874,7 @@ var useCalendarProps = (inProps) => {
     },
     [resolvedView, inProps, viewMonth, paginate]
   );
-  const props = useThemeProps3({
+  const props = useThemeProps2({
     props: {
       locale: "default",
       views: ["day", "month"],
@@ -1927,7 +1926,7 @@ Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/CurrencyInput/CurrencyInput.tsx
-import { styled as styled7, useThemeProps as useThemeProps4 } from "@mui/joy";
+import { styled as styled7, useThemeProps as useThemeProps3 } from "@mui/joy";
 
 // src/components/CurrencyInput/hooks/use-currency-setting.ts
 var CURRENCY_DECIMAL_MAP = {
@@ -2113,7 +2112,7 @@ var CurrencyInputRoot = styled7(Input_default, {
   overridesResolver: (props, styles) => styles.root
 })({});
 var CurrencyInput = React17.forwardRef(function CurrencyInput2(inProps, ref) {
-  const props = useThemeProps4({ props: inProps, name: "CurrencyInput" });
+  const props = useThemeProps3({ props: inProps, name: "CurrencyInput" });
   const {
     currency = "USD",
     name,
@@ -2641,7 +2640,7 @@ import { AnimatePresence as AnimatePresence2 } from "framer-motion";
 import React19, { forwardRef as forwardRef6, useCallback as useCallback9, useEffect as useEffect4, useImperativeHandle, useRef as useRef4, useState as useState8 } from "react";
 import { IMaskInput, IMask } from "react-imask";
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
-import { styled as styled10, useThemeProps as useThemeProps5 } from "@mui/joy";
+import { styled as styled10, useThemeProps as useThemeProps4 } from "@mui/joy";
 import { FocusTrap, ClickAwayListener, Popper as Popper2 } from "@mui/base";
 
 // src/components/Sheet/Sheet.tsx
@@ -2829,7 +2828,7 @@ var TextMaskAdapter3 = React19.forwardRef(function TextMaskAdapter4(props, ref)
   );
 });
 var DatePicker = forwardRef6((inProps, ref) => {
-  const props = useThemeProps5({ props: inProps, name: "DatePicker" });
+  const props = useThemeProps4({ props: inProps, name: "DatePicker" });
   const {
     onChange,
     disabled,
@@ -3176,11 +3175,22 @@ function Select(props) {
     disabled,
     required,
     onChange,
+    // NOTE: id 를 FormControl 에 넘겨 htmlFor/labelId(`${id}-label`)를 결정론적으로 만든다.
+    // Joy FormControl context 가 FormLabel(id) ↔ Select button(aria-labelledby)을 자동 결선하므로,
+    // 외부에서 useId 로 라벨/버튼 ARIA 를 수동 결합할 필요가 없다.
+    id,
+    slotProps,
     // NOTE: 스타일 관련된 props는 최상위 엘리먼트에 적용한다.
     sx,
     className,
     ...innerProps
   } = props;
+  const {
+    formControl: formControlProps,
+    formLabel: formLabelProps,
+    formHelperText: formHelperTextProps,
+    ...joySlotProps
+  } = slotProps ?? {};
   const options = useMemo8(
     () => props.options.map((option) => {
       if (option.hasOwnProperty("value") && option.hasOwnProperty("label")) {
@@ -3221,6 +3231,7 @@ function Select(props) {
       disabled,
       size,
       color: error ? "danger" : color,
+      slotProps: joySlotProps,
       onChange: handleChange,
       renderValue: (selected) => {
         if (!selected) return null;
@@ -3240,12 +3251,14 @@ function Select(props) {
       size,
       color,
       error,
+      id,
       sx,
-      className
+      className,
+      ...formControlProps
     },
-    label && /* @__PURE__ */ React21.createElement(FormLabel_default, null, label),
+    label && /* @__PURE__ */ React21.createElement(FormLabel_default, { ...formLabelProps }, label),
     select,
-    helperText && /* @__PURE__ */ React21.createElement(FormHelperText_default, null, helperText)
+    helperText && /* @__PURE__ */ React21.createElement(FormHelperText_default, { ...formHelperTextProps }, helperText)
   );
 }
 Select.displayName = "Select";
@@ -4209,7 +4222,7 @@ import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
 import NextIcon from "@mui/icons-material/ChevronRightRounded";
 import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
 import LastPageIcon from "@mui/icons-material/LastPageRounded";
-import { styled as styled13, useThemeProps as useThemeProps6 } from "@mui/joy";
+import { styled as styled13 } from "@mui/joy";
 var PaginationButton = styled13(Button_default, {
   name: "Pagination",
   slot: "button"
@@ -4260,8 +4273,7 @@ var PaginationContainer = styled13(Stack_default, {
     lg: theme.spacing(2)
   }[size]
 }));
-function Pagination(inProps) {
-  const props = useThemeProps6({ props: inProps, name: "Pagination" });
+function Pagination(props) {
   const {
     paginationModel: _paginationModel,
     defaultPaginationModel = { page: 1, pageSize: 25 },
@@ -4922,7 +4934,7 @@ DataTable.displayName = "DataTable";
 import React27, { forwardRef as forwardRef8, useCallback as useCallback14, useEffect as useEffect8, useImperativeHandle as useImperativeHandle3, useMemo as useMemo12, useRef as useRef8, useState as useState11 } from "react";
 import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
 import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
-import { styled as styled14, useThemeProps as useThemeProps7 } from "@mui/joy";
+import { styled as styled14, useThemeProps as useThemeProps5 } from "@mui/joy";
 import { FocusTrap as FocusTrap2, ClickAwayListener as ClickAwayListener2, Popper as Popper3 } from "@mui/base";
 var hasAlphabeticMonth2 = (format) => /MMMM|MMM/.test(format);
 var CalendarButton2 = styled14(IconButton_default, {
@@ -5098,7 +5110,7 @@ var TextMaskAdapter5 = React27.forwardRef(function TextMaskAdapter6(props, ref)
   );
 });
 var DateRangePicker = forwardRef8((inProps, ref) => {
-  const props = useThemeProps7({ props: inProps, name: "DateRangePicker" });
+  const props = useThemeProps5({ props: inProps, name: "DateRangePicker" });
   const {
     onChange,
     disabled,
@@ -5495,7 +5507,6 @@ var InsetDrawer = styled20(JoyDrawer2)(({ theme }) => ({
 // src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
 import React32, { useCallback as useCallback15, useEffect as useEffect9, useMemo as useMemo13, useRef as useRef9, useState as useState12 } from "react";
 import SearchIcon from "@mui/icons-material/Search";
-import { useThemeProps as useThemeProps8 } from "@mui/joy";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
 function LabelWithTooltip(props) {
   const { label, size } = props;
@@ -5528,8 +5539,7 @@ function LabelWithTooltip(props) {
   }
   return labelContent;
 }
-function FilterableCheckboxGroup(inProps) {
-  const props = useThemeProps8({ props: inProps, name: "FilterableCheckboxGroup" });
+function FilterableCheckboxGroup(props) {
   const {
     value,
     options,
@@ -5806,7 +5816,14 @@ var Markdown = (props) => {
   return /* @__PURE__ */ React34.createElement(Typography, { component: "div", color, textColor, level: defaultLevel, ...innerProps }, /* @__PURE__ */ React34.createElement(
     Suspense,
     {
-      fallback: fallback || /* @__PURE__ */ React34.createElement(Typography, null, /* @__PURE__ */ React34.createElement(Skeleton, null, content || ""))
+      fallback: (
+        // While in the fallback state, prevent browser auto-translation (e.g. Chrome/Google Translate)
+        // from wrapping text nodes in <font> tags. Once the lazy react-markdown chunk arrives, React
+        // swaps the fallback for the real content via insertBefore; if the browser has mutated the DOM
+        // in the meantime, the reference node's parent changes and React throws a DOMException
+        // ("Failed to execute 'insertBefore' on 'Node'"), crashing the subtree. (cf. facebook/react#11538)
+        fallback || /* @__PURE__ */ React34.createElement(Typography, { translate: "no", className: "notranslate" }, /* @__PURE__ */ React34.createElement(Skeleton, null, content || ""))
+      )
     },
     /* @__PURE__ */ React34.createElement(
       LazyReactMarkdown,
@@ -5957,7 +5974,7 @@ MenuButton2.displayName = "MenuButton";
 // src/components/MonthPicker/MonthPicker.tsx
 import React36, { forwardRef as forwardRef9, useCallback as useCallback16, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef10, useState as useState14 } from "react";
 import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
-import { styled as styled21, useThemeProps as useThemeProps9 } from "@mui/joy";
+import { styled as styled21, useThemeProps as useThemeProps6 } from "@mui/joy";
 import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
 var StyledPopper3 = styled21(Popper4, {
   name: "MonthPicker",
@@ -6012,7 +6029,7 @@ function parseDate3(dateString, format) {
   return result;
 }
 var MonthPicker = forwardRef9((inProps, ref) => {
-  const props = useThemeProps9({ props: inProps, name: "MonthPicker" });
+  const props = useThemeProps6({ props: inProps, name: "MonthPicker" });
   const {
     onChange,
     disabled,
@@ -6212,7 +6229,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
 import React37, { forwardRef as forwardRef10, useCallback as useCallback17, useEffect as useEffect12, useImperativeHandle as useImperativeHandle5, useMemo as useMemo14, useRef as useRef11, useState as useState15 } from "react";
 import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
 import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
-import { styled as styled22, useThemeProps as useThemeProps10 } from "@mui/joy";
+import { styled as styled22, useThemeProps as useThemeProps7 } from "@mui/joy";
 import { FocusTrap as FocusTrap4, ClickAwayListener as ClickAwayListener4, Popper as Popper5 } from "@mui/base";
 var hasAlphabeticMonth3 = (format) => /MMMM|MMM/.test(format);
 var StyledPopper4 = styled22(Popper5, {
@@ -6301,7 +6318,7 @@ var TextMaskAdapter7 = React37.forwardRef(function TextMaskAdapter8(props, ref)
   );
 });
 var MonthRangePicker = forwardRef10((inProps, ref) => {
-  const props = useThemeProps10({ props: inProps, name: "MonthRangePicker" });
+  const props = useThemeProps7({ props: inProps, name: "MonthRangePicker" });
   const {
     onChange,
     disabled,
@@ -6621,7 +6638,7 @@ Navigator.displayName = "Navigator";
 // src/components/PercentageInput/PercentageInput.tsx
 import React41, { useCallback as useCallback18, useMemo as useMemo15, useState as useState16 } from "react";
 import { NumericFormat as NumericFormat2 } from "react-number-format";
-import { styled as styled25, useThemeProps as useThemeProps11 } from "@mui/joy";
+import { styled as styled25, useThemeProps as useThemeProps8 } from "@mui/joy";
 var padDecimal = (value, decimalScale) => {
   const [integer, decimal = ""] = `${value}`.split(".");
   return Number(`${integer}${decimal.padEnd(decimalScale, "0")}`);
@@ -6655,7 +6672,7 @@ var PercentageInputRoot = styled25(Input_default, {
 })({});
 var PercentageInput = React41.forwardRef(
   function PercentageInput2(inProps, ref) {
-    const props = useThemeProps11({ props: inProps, name: "PercentageInput" });
+    const props = useThemeProps8({ props: inProps, name: "PercentageInput" });
     const {
       name,
       onChange,
@@ -6917,7 +6934,7 @@ RadioList.displayName = "RadioList";
 
 // src/components/SearchBar/SearchBar.tsx
 import * as React44 from "react";
-import { styled as styled27, useThemeProps as useThemeProps12 } from "@mui/joy/styles";
+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";
@@ -6937,7 +6954,7 @@ var SearchBarRoot = styled27(Box2, {
   flexShrink: 0
 }));
 var SearchBar = React44.forwardRef(function SearchBar2(inProps, ref) {
-  const props = useThemeProps12({ props: inProps, name: "SearchBar" });
+  const props = useThemeProps9({ props: inProps, name: "SearchBar" });
   const { showSelect = false, options, placeholder: placeholderProp, value, onChange, onSearch, ...other } = props;
   const [selectVal, setSelectVal] = React44.useState(options?.[0]?.value ?? "");
   const [isHovered, setIsHovered] = React44.useState(false);
@@ -7428,21 +7445,6 @@ var defaultTheme = extendTheme({
           fontWeight: "var(--ceed-fontWeight-xl, 700)"
         }
       }
-    },
-    Alert: {
-      defaultProps: {
-        size: "md"
-      }
-    },
-    Pagination: {
-      defaultProps: {
-        size: "md"
-      }
-    },
-    FilterableCheckboxGroup: {
-      defaultProps: {
-        size: "md"
-      }
     }
   }
 });
@@ -7987,5 +7989,5 @@ export {
   useColorScheme,
   useMenuButton,
   useTheme2 as useTheme,
-  useThemeProps13 as useThemeProps
+  useThemeProps10 as useThemeProps
 };