@ceed/cds 1.36.0 → 1.37.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Alert/Alert.d.ts +1 -1
- package/dist/components/FilterableCheckboxGroup/FilterableCheckboxGroup.d.ts +1 -1
- package/dist/components/Pagination/Pagination.d.ts +1 -1
- package/dist/components/ThemeProvider/ThemeProvider.d.ts +15 -0
- package/dist/index.browser.js +3 -3
- package/dist/index.browser.js.map +3 -3
- package/dist/index.cjs +211 -192
- package/dist/index.js +44 -25
- package/framer/index.js +1 -1
- package/package.json +3 -2
package/dist/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import {
|
|
3
3
|
useTheme as useTheme2,
|
|
4
4
|
useColorScheme,
|
|
5
|
-
useThemeProps as
|
|
5
|
+
useThemeProps as useThemeProps13,
|
|
6
6
|
ButtonGroup,
|
|
7
7
|
alertClasses,
|
|
8
8
|
boxClasses,
|
|
@@ -141,7 +141,7 @@ Accordions.displayName = "Accordions";
|
|
|
141
141
|
|
|
142
142
|
// src/components/Alert/Alert.tsx
|
|
143
143
|
import React3 from "react";
|
|
144
|
-
import { Alert as JoyAlert, styled } from "@mui/joy";
|
|
144
|
+
import { Alert as JoyAlert, styled, useThemeProps } from "@mui/joy";
|
|
145
145
|
import { motion as motion3 } from "framer-motion";
|
|
146
146
|
|
|
147
147
|
// src/components/Typography/Typography.tsx
|
|
@@ -178,7 +178,8 @@ var contentLevelMapping = {
|
|
|
178
178
|
md: "body-sm",
|
|
179
179
|
lg: "body-md"
|
|
180
180
|
};
|
|
181
|
-
function Alert(
|
|
181
|
+
function Alert(inProps) {
|
|
182
|
+
const props = useThemeProps({ props: inProps, name: "Alert" });
|
|
182
183
|
const { title, content, actions, color = "primary", size = "md", ...innerProps } = props;
|
|
183
184
|
const invertedColors = props.invertedColors || props.variant === "solid";
|
|
184
185
|
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)));
|
|
@@ -583,7 +584,7 @@ var Autocomplete_default = Autocomplete;
|
|
|
583
584
|
|
|
584
585
|
// src/components/Avatar/Avatar.tsx
|
|
585
586
|
import React6, { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
|
|
586
|
-
import { Avatar as JoyAvatar, AvatarGroup, styled as styled4, useThemeProps } from "@mui/joy";
|
|
587
|
+
import { Avatar as JoyAvatar, AvatarGroup, styled as styled4, useThemeProps as useThemeProps2 } from "@mui/joy";
|
|
587
588
|
var StyledAvatar = styled4(JoyAvatar, {
|
|
588
589
|
name: "Avatar",
|
|
589
590
|
slot: "Root",
|
|
@@ -605,7 +606,7 @@ var defaultGetInitial = (name) => {
|
|
|
605
606
|
}
|
|
606
607
|
};
|
|
607
608
|
var Avatar = forwardRef2(function Avatar2(inProps, ref) {
|
|
608
|
-
const props =
|
|
609
|
+
const props = useThemeProps2({
|
|
609
610
|
props: inProps,
|
|
610
611
|
name: "Avatar"
|
|
611
612
|
});
|
|
@@ -825,7 +826,7 @@ var isSameMonth = (date1, date2) => {
|
|
|
825
826
|
|
|
826
827
|
// src/components/Calendar/hooks/use-calendar-props.ts
|
|
827
828
|
import { useCallback as useCallback4, useMemo as useMemo4, useState as useState3 } from "react";
|
|
828
|
-
import { useThemeProps as
|
|
829
|
+
import { useThemeProps as useThemeProps3 } from "@mui/joy";
|
|
829
830
|
var resolveView = (view, views) => {
|
|
830
831
|
return views.includes(view) ? view : views[0];
|
|
831
832
|
};
|
|
@@ -874,7 +875,7 @@ var useCalendarProps = (inProps) => {
|
|
|
874
875
|
},
|
|
875
876
|
[resolvedView, inProps, viewMonth, paginate]
|
|
876
877
|
);
|
|
877
|
-
const props =
|
|
878
|
+
const props = useThemeProps3({
|
|
878
879
|
props: {
|
|
879
880
|
locale: "default",
|
|
880
881
|
views: ["day", "month"],
|
|
@@ -1926,7 +1927,7 @@ Input.displayName = "Input";
|
|
|
1926
1927
|
var Input_default = Input;
|
|
1927
1928
|
|
|
1928
1929
|
// src/components/CurrencyInput/CurrencyInput.tsx
|
|
1929
|
-
import { styled as styled7, useThemeProps as
|
|
1930
|
+
import { styled as styled7, useThemeProps as useThemeProps4 } from "@mui/joy";
|
|
1930
1931
|
|
|
1931
1932
|
// src/components/CurrencyInput/hooks/use-currency-setting.ts
|
|
1932
1933
|
var CURRENCY_DECIMAL_MAP = {
|
|
@@ -2112,7 +2113,7 @@ var CurrencyInputRoot = styled7(Input_default, {
|
|
|
2112
2113
|
overridesResolver: (props, styles) => styles.root
|
|
2113
2114
|
})({});
|
|
2114
2115
|
var CurrencyInput = React17.forwardRef(function CurrencyInput2(inProps, ref) {
|
|
2115
|
-
const props =
|
|
2116
|
+
const props = useThemeProps4({ props: inProps, name: "CurrencyInput" });
|
|
2116
2117
|
const {
|
|
2117
2118
|
currency = "USD",
|
|
2118
2119
|
name,
|
|
@@ -2640,7 +2641,7 @@ import { AnimatePresence as AnimatePresence2 } from "framer-motion";
|
|
|
2640
2641
|
import React19, { forwardRef as forwardRef6, useCallback as useCallback9, useEffect as useEffect4, useImperativeHandle, useRef as useRef4, useState as useState8 } from "react";
|
|
2641
2642
|
import { IMaskInput, IMask } from "react-imask";
|
|
2642
2643
|
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
|
|
2643
|
-
import { styled as styled10, useThemeProps as
|
|
2644
|
+
import { styled as styled10, useThemeProps as useThemeProps5 } from "@mui/joy";
|
|
2644
2645
|
import { FocusTrap, ClickAwayListener, Popper as Popper2 } from "@mui/base";
|
|
2645
2646
|
|
|
2646
2647
|
// src/components/Sheet/Sheet.tsx
|
|
@@ -2828,7 +2829,7 @@ var TextMaskAdapter3 = React19.forwardRef(function TextMaskAdapter4(props, ref)
|
|
|
2828
2829
|
);
|
|
2829
2830
|
});
|
|
2830
2831
|
var DatePicker = forwardRef6((inProps, ref) => {
|
|
2831
|
-
const props =
|
|
2832
|
+
const props = useThemeProps5({ props: inProps, name: "DatePicker" });
|
|
2832
2833
|
const {
|
|
2833
2834
|
onChange,
|
|
2834
2835
|
disabled,
|
|
@@ -4222,7 +4223,7 @@ import PreviousIcon from "@mui/icons-material/ChevronLeftRounded";
|
|
|
4222
4223
|
import NextIcon from "@mui/icons-material/ChevronRightRounded";
|
|
4223
4224
|
import FirstPageIcon from "@mui/icons-material/FirstPageRounded";
|
|
4224
4225
|
import LastPageIcon from "@mui/icons-material/LastPageRounded";
|
|
4225
|
-
import { styled as styled13 } from "@mui/joy";
|
|
4226
|
+
import { styled as styled13, useThemeProps as useThemeProps6 } from "@mui/joy";
|
|
4226
4227
|
var PaginationButton = styled13(Button_default, {
|
|
4227
4228
|
name: "Pagination",
|
|
4228
4229
|
slot: "button"
|
|
@@ -4273,7 +4274,8 @@ var PaginationContainer = styled13(Stack_default, {
|
|
|
4273
4274
|
lg: theme.spacing(2)
|
|
4274
4275
|
}[size]
|
|
4275
4276
|
}));
|
|
4276
|
-
function Pagination(
|
|
4277
|
+
function Pagination(inProps) {
|
|
4278
|
+
const props = useThemeProps6({ props: inProps, name: "Pagination" });
|
|
4277
4279
|
const {
|
|
4278
4280
|
paginationModel: _paginationModel,
|
|
4279
4281
|
defaultPaginationModel = { page: 1, pageSize: 25 },
|
|
@@ -4934,7 +4936,7 @@ DataTable.displayName = "DataTable";
|
|
|
4934
4936
|
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";
|
|
4935
4937
|
import { IMaskInput as IMaskInput2, IMask as IMask2 } from "react-imask";
|
|
4936
4938
|
import CalendarTodayIcon2 from "@mui/icons-material/CalendarToday";
|
|
4937
|
-
import { styled as styled14, useThemeProps as
|
|
4939
|
+
import { styled as styled14, useThemeProps as useThemeProps7 } from "@mui/joy";
|
|
4938
4940
|
import { FocusTrap as FocusTrap2, ClickAwayListener as ClickAwayListener2, Popper as Popper3 } from "@mui/base";
|
|
4939
4941
|
var hasAlphabeticMonth2 = (format) => /MMMM|MMM/.test(format);
|
|
4940
4942
|
var CalendarButton2 = styled14(IconButton_default, {
|
|
@@ -5110,7 +5112,7 @@ var TextMaskAdapter5 = React27.forwardRef(function TextMaskAdapter6(props, ref)
|
|
|
5110
5112
|
);
|
|
5111
5113
|
});
|
|
5112
5114
|
var DateRangePicker = forwardRef8((inProps, ref) => {
|
|
5113
|
-
const props =
|
|
5115
|
+
const props = useThemeProps7({ props: inProps, name: "DateRangePicker" });
|
|
5114
5116
|
const {
|
|
5115
5117
|
onChange,
|
|
5116
5118
|
disabled,
|
|
@@ -5507,6 +5509,7 @@ var InsetDrawer = styled20(JoyDrawer2)(({ theme }) => ({
|
|
|
5507
5509
|
// src/components/FilterableCheckboxGroup/FilterableCheckboxGroup.tsx
|
|
5508
5510
|
import React32, { useCallback as useCallback15, useEffect as useEffect9, useMemo as useMemo13, useRef as useRef9, useState as useState12 } from "react";
|
|
5509
5511
|
import SearchIcon from "@mui/icons-material/Search";
|
|
5512
|
+
import { useThemeProps as useThemeProps8 } from "@mui/joy";
|
|
5510
5513
|
import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
|
|
5511
5514
|
function LabelWithTooltip(props) {
|
|
5512
5515
|
const { label, size } = props;
|
|
@@ -5539,7 +5542,8 @@ function LabelWithTooltip(props) {
|
|
|
5539
5542
|
}
|
|
5540
5543
|
return labelContent;
|
|
5541
5544
|
}
|
|
5542
|
-
function FilterableCheckboxGroup(
|
|
5545
|
+
function FilterableCheckboxGroup(inProps) {
|
|
5546
|
+
const props = useThemeProps8({ props: inProps, name: "FilterableCheckboxGroup" });
|
|
5543
5547
|
const {
|
|
5544
5548
|
value,
|
|
5545
5549
|
options,
|
|
@@ -5967,7 +5971,7 @@ MenuButton2.displayName = "MenuButton";
|
|
|
5967
5971
|
// src/components/MonthPicker/MonthPicker.tsx
|
|
5968
5972
|
import React36, { forwardRef as forwardRef9, useCallback as useCallback16, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef10, useState as useState14 } from "react";
|
|
5969
5973
|
import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
|
|
5970
|
-
import { styled as styled21, useThemeProps as
|
|
5974
|
+
import { styled as styled21, useThemeProps as useThemeProps9 } from "@mui/joy";
|
|
5971
5975
|
import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
|
|
5972
5976
|
var StyledPopper3 = styled21(Popper4, {
|
|
5973
5977
|
name: "MonthPicker",
|
|
@@ -6022,7 +6026,7 @@ function parseDate3(dateString, format) {
|
|
|
6022
6026
|
return result;
|
|
6023
6027
|
}
|
|
6024
6028
|
var MonthPicker = forwardRef9((inProps, ref) => {
|
|
6025
|
-
const props =
|
|
6029
|
+
const props = useThemeProps9({ props: inProps, name: "MonthPicker" });
|
|
6026
6030
|
const {
|
|
6027
6031
|
onChange,
|
|
6028
6032
|
disabled,
|
|
@@ -6222,7 +6226,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6222
6226
|
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";
|
|
6223
6227
|
import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
|
|
6224
6228
|
import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
|
|
6225
|
-
import { styled as styled22, useThemeProps as
|
|
6229
|
+
import { styled as styled22, useThemeProps as useThemeProps10 } from "@mui/joy";
|
|
6226
6230
|
import { FocusTrap as FocusTrap4, ClickAwayListener as ClickAwayListener4, Popper as Popper5 } from "@mui/base";
|
|
6227
6231
|
var hasAlphabeticMonth3 = (format) => /MMMM|MMM/.test(format);
|
|
6228
6232
|
var StyledPopper4 = styled22(Popper5, {
|
|
@@ -6311,7 +6315,7 @@ var TextMaskAdapter7 = React37.forwardRef(function TextMaskAdapter8(props, ref)
|
|
|
6311
6315
|
);
|
|
6312
6316
|
});
|
|
6313
6317
|
var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
6314
|
-
const props =
|
|
6318
|
+
const props = useThemeProps10({ props: inProps, name: "MonthRangePicker" });
|
|
6315
6319
|
const {
|
|
6316
6320
|
onChange,
|
|
6317
6321
|
disabled,
|
|
@@ -6631,7 +6635,7 @@ Navigator.displayName = "Navigator";
|
|
|
6631
6635
|
// src/components/PercentageInput/PercentageInput.tsx
|
|
6632
6636
|
import React41, { useCallback as useCallback18, useMemo as useMemo15, useState as useState16 } from "react";
|
|
6633
6637
|
import { NumericFormat as NumericFormat2 } from "react-number-format";
|
|
6634
|
-
import { styled as styled25, useThemeProps as
|
|
6638
|
+
import { styled as styled25, useThemeProps as useThemeProps11 } from "@mui/joy";
|
|
6635
6639
|
var padDecimal = (value, decimalScale) => {
|
|
6636
6640
|
const [integer, decimal = ""] = `${value}`.split(".");
|
|
6637
6641
|
return Number(`${integer}${decimal.padEnd(decimalScale, "0")}`);
|
|
@@ -6665,7 +6669,7 @@ var PercentageInputRoot = styled25(Input_default, {
|
|
|
6665
6669
|
})({});
|
|
6666
6670
|
var PercentageInput = React41.forwardRef(
|
|
6667
6671
|
function PercentageInput2(inProps, ref) {
|
|
6668
|
-
const props =
|
|
6672
|
+
const props = useThemeProps11({ props: inProps, name: "PercentageInput" });
|
|
6669
6673
|
const {
|
|
6670
6674
|
name,
|
|
6671
6675
|
onChange,
|
|
@@ -6927,7 +6931,7 @@ RadioList.displayName = "RadioList";
|
|
|
6927
6931
|
|
|
6928
6932
|
// src/components/SearchBar/SearchBar.tsx
|
|
6929
6933
|
import * as React44 from "react";
|
|
6930
|
-
import { styled as styled27, useThemeProps as
|
|
6934
|
+
import { styled as styled27, useThemeProps as useThemeProps12 } from "@mui/joy/styles";
|
|
6931
6935
|
import Box2 from "@mui/joy/Box";
|
|
6932
6936
|
import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
|
|
6933
6937
|
import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
|
|
@@ -6947,7 +6951,7 @@ var SearchBarRoot = styled27(Box2, {
|
|
|
6947
6951
|
flexShrink: 0
|
|
6948
6952
|
}));
|
|
6949
6953
|
var SearchBar = React44.forwardRef(function SearchBar2(inProps, ref) {
|
|
6950
|
-
const props =
|
|
6954
|
+
const props = useThemeProps12({ props: inProps, name: "SearchBar" });
|
|
6951
6955
|
const { showSelect = false, options, placeholder: placeholderProp, value, onChange, onSearch, ...other } = props;
|
|
6952
6956
|
const [selectVal, setSelectVal] = React44.useState(options?.[0]?.value ?? "");
|
|
6953
6957
|
const [isHovered, setIsHovered] = React44.useState(false);
|
|
@@ -7438,6 +7442,21 @@ var defaultTheme = extendTheme({
|
|
|
7438
7442
|
fontWeight: "var(--ceed-fontWeight-xl, 700)"
|
|
7439
7443
|
}
|
|
7440
7444
|
}
|
|
7445
|
+
},
|
|
7446
|
+
Alert: {
|
|
7447
|
+
defaultProps: {
|
|
7448
|
+
size: "md"
|
|
7449
|
+
}
|
|
7450
|
+
},
|
|
7451
|
+
Pagination: {
|
|
7452
|
+
defaultProps: {
|
|
7453
|
+
size: "md"
|
|
7454
|
+
}
|
|
7455
|
+
},
|
|
7456
|
+
FilterableCheckboxGroup: {
|
|
7457
|
+
defaultProps: {
|
|
7458
|
+
size: "md"
|
|
7459
|
+
}
|
|
7441
7460
|
}
|
|
7442
7461
|
}
|
|
7443
7462
|
});
|
|
@@ -7982,5 +8001,5 @@ export {
|
|
|
7982
8001
|
useColorScheme,
|
|
7983
8002
|
useMenuButton,
|
|
7984
8003
|
useTheme2 as useTheme,
|
|
7985
|
-
|
|
8004
|
+
useThemeProps13 as useThemeProps
|
|
7986
8005
|
};
|