@ceed/cds 1.36.1 → 1.37.0
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 +1 -1
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,
|
|
@@ -5974,7 +5978,7 @@ MenuButton2.displayName = "MenuButton";
|
|
|
5974
5978
|
// src/components/MonthPicker/MonthPicker.tsx
|
|
5975
5979
|
import React36, { forwardRef as forwardRef9, useCallback as useCallback16, useEffect as useEffect11, useImperativeHandle as useImperativeHandle4, useRef as useRef10, useState as useState14 } from "react";
|
|
5976
5980
|
import CalendarTodayIcon3 from "@mui/icons-material/CalendarToday";
|
|
5977
|
-
import { styled as styled21, useThemeProps as
|
|
5981
|
+
import { styled as styled21, useThemeProps as useThemeProps9 } from "@mui/joy";
|
|
5978
5982
|
import { FocusTrap as FocusTrap3, ClickAwayListener as ClickAwayListener3, Popper as Popper4 } from "@mui/base";
|
|
5979
5983
|
var StyledPopper3 = styled21(Popper4, {
|
|
5980
5984
|
name: "MonthPicker",
|
|
@@ -6029,7 +6033,7 @@ function parseDate3(dateString, format) {
|
|
|
6029
6033
|
return result;
|
|
6030
6034
|
}
|
|
6031
6035
|
var MonthPicker = forwardRef9((inProps, ref) => {
|
|
6032
|
-
const props =
|
|
6036
|
+
const props = useThemeProps9({ props: inProps, name: "MonthPicker" });
|
|
6033
6037
|
const {
|
|
6034
6038
|
onChange,
|
|
6035
6039
|
disabled,
|
|
@@ -6229,7 +6233,7 @@ var MonthPicker = forwardRef9((inProps, ref) => {
|
|
|
6229
6233
|
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";
|
|
6230
6234
|
import { IMaskInput as IMaskInput3, IMask as IMask3 } from "react-imask";
|
|
6231
6235
|
import CalendarTodayIcon4 from "@mui/icons-material/CalendarToday";
|
|
6232
|
-
import { styled as styled22, useThemeProps as
|
|
6236
|
+
import { styled as styled22, useThemeProps as useThemeProps10 } from "@mui/joy";
|
|
6233
6237
|
import { FocusTrap as FocusTrap4, ClickAwayListener as ClickAwayListener4, Popper as Popper5 } from "@mui/base";
|
|
6234
6238
|
var hasAlphabeticMonth3 = (format) => /MMMM|MMM/.test(format);
|
|
6235
6239
|
var StyledPopper4 = styled22(Popper5, {
|
|
@@ -6318,7 +6322,7 @@ var TextMaskAdapter7 = React37.forwardRef(function TextMaskAdapter8(props, ref)
|
|
|
6318
6322
|
);
|
|
6319
6323
|
});
|
|
6320
6324
|
var MonthRangePicker = forwardRef10((inProps, ref) => {
|
|
6321
|
-
const props =
|
|
6325
|
+
const props = useThemeProps10({ props: inProps, name: "MonthRangePicker" });
|
|
6322
6326
|
const {
|
|
6323
6327
|
onChange,
|
|
6324
6328
|
disabled,
|
|
@@ -6638,7 +6642,7 @@ Navigator.displayName = "Navigator";
|
|
|
6638
6642
|
// src/components/PercentageInput/PercentageInput.tsx
|
|
6639
6643
|
import React41, { useCallback as useCallback18, useMemo as useMemo15, useState as useState16 } from "react";
|
|
6640
6644
|
import { NumericFormat as NumericFormat2 } from "react-number-format";
|
|
6641
|
-
import { styled as styled25, useThemeProps as
|
|
6645
|
+
import { styled as styled25, useThemeProps as useThemeProps11 } from "@mui/joy";
|
|
6642
6646
|
var padDecimal = (value, decimalScale) => {
|
|
6643
6647
|
const [integer, decimal = ""] = `${value}`.split(".");
|
|
6644
6648
|
return Number(`${integer}${decimal.padEnd(decimalScale, "0")}`);
|
|
@@ -6672,7 +6676,7 @@ var PercentageInputRoot = styled25(Input_default, {
|
|
|
6672
6676
|
})({});
|
|
6673
6677
|
var PercentageInput = React41.forwardRef(
|
|
6674
6678
|
function PercentageInput2(inProps, ref) {
|
|
6675
|
-
const props =
|
|
6679
|
+
const props = useThemeProps11({ props: inProps, name: "PercentageInput" });
|
|
6676
6680
|
const {
|
|
6677
6681
|
name,
|
|
6678
6682
|
onChange,
|
|
@@ -6934,7 +6938,7 @@ RadioList.displayName = "RadioList";
|
|
|
6934
6938
|
|
|
6935
6939
|
// src/components/SearchBar/SearchBar.tsx
|
|
6936
6940
|
import * as React44 from "react";
|
|
6937
|
-
import { styled as styled27, useThemeProps as
|
|
6941
|
+
import { styled as styled27, useThemeProps as useThemeProps12 } from "@mui/joy/styles";
|
|
6938
6942
|
import Box2 from "@mui/joy/Box";
|
|
6939
6943
|
import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
|
|
6940
6944
|
import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
|
|
@@ -6954,7 +6958,7 @@ var SearchBarRoot = styled27(Box2, {
|
|
|
6954
6958
|
flexShrink: 0
|
|
6955
6959
|
}));
|
|
6956
6960
|
var SearchBar = React44.forwardRef(function SearchBar2(inProps, ref) {
|
|
6957
|
-
const props =
|
|
6961
|
+
const props = useThemeProps12({ props: inProps, name: "SearchBar" });
|
|
6958
6962
|
const { showSelect = false, options, placeholder: placeholderProp, value, onChange, onSearch, ...other } = props;
|
|
6959
6963
|
const [selectVal, setSelectVal] = React44.useState(options?.[0]?.value ?? "");
|
|
6960
6964
|
const [isHovered, setIsHovered] = React44.useState(false);
|
|
@@ -7445,6 +7449,21 @@ var defaultTheme = extendTheme({
|
|
|
7445
7449
|
fontWeight: "var(--ceed-fontWeight-xl, 700)"
|
|
7446
7450
|
}
|
|
7447
7451
|
}
|
|
7452
|
+
},
|
|
7453
|
+
Alert: {
|
|
7454
|
+
defaultProps: {
|
|
7455
|
+
size: "md"
|
|
7456
|
+
}
|
|
7457
|
+
},
|
|
7458
|
+
Pagination: {
|
|
7459
|
+
defaultProps: {
|
|
7460
|
+
size: "md"
|
|
7461
|
+
}
|
|
7462
|
+
},
|
|
7463
|
+
FilterableCheckboxGroup: {
|
|
7464
|
+
defaultProps: {
|
|
7465
|
+
size: "md"
|
|
7466
|
+
}
|
|
7448
7467
|
}
|
|
7449
7468
|
}
|
|
7450
7469
|
});
|
|
@@ -7989,5 +8008,5 @@ export {
|
|
|
7989
8008
|
useColorScheme,
|
|
7990
8009
|
useMenuButton,
|
|
7991
8010
|
useTheme2 as useTheme,
|
|
7992
|
-
|
|
8011
|
+
useThemeProps13 as useThemeProps
|
|
7993
8012
|
};
|