@digital-ai/dot-components 1.0.11 → 1.0.12
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/dot-components.esm.js
CHANGED
|
@@ -275,6 +275,14 @@ var DotLink = function DotLink(_ref) {
|
|
|
275
275
|
_ref$underline = _ref.underline,
|
|
276
276
|
underline = _ref$underline === void 0 ? 'always' : _ref$underline;
|
|
277
277
|
var rootClasses = useStylesWithRootClass(rootClassName$z, className);
|
|
278
|
+
|
|
279
|
+
var handleKeyPress = function handleKeyPress(event) {
|
|
280
|
+
if (onClick && event.key === 'Enter') {
|
|
281
|
+
event.preventDefault();
|
|
282
|
+
onClick(event);
|
|
283
|
+
}
|
|
284
|
+
};
|
|
285
|
+
|
|
278
286
|
return /*#__PURE__*/React__default.createElement(StyledLink, {
|
|
279
287
|
"aria-label": ariaLabel,
|
|
280
288
|
classes: {
|
|
@@ -282,9 +290,10 @@ var DotLink = function DotLink(_ref) {
|
|
|
282
290
|
},
|
|
283
291
|
color: color,
|
|
284
292
|
"data-testid": dataTestId,
|
|
285
|
-
href:
|
|
293
|
+
href: href,
|
|
286
294
|
onClick: onClick,
|
|
287
295
|
onMouseEnter: onMouseEnter,
|
|
296
|
+
onKeyPress: handleKeyPress,
|
|
288
297
|
rel: rel,
|
|
289
298
|
tabIndex: tabIndex,
|
|
290
299
|
target: target,
|
|
@@ -3951,6 +3960,23 @@ function SvgLogoDigitalAiWhite(_ref, svgRef) {
|
|
|
3951
3960
|
|
|
3952
3961
|
var ForwardRef = /*#__PURE__*/React.forwardRef(SvgLogoDigitalAiWhite);
|
|
3953
3962
|
|
|
3963
|
+
var levelBottom = -1;
|
|
3964
|
+
var levelFirst = 1;
|
|
3965
|
+
var levelSecond = 10;
|
|
3966
|
+
var levelThird = 100;
|
|
3967
|
+
var levelFourth = 1000;
|
|
3968
|
+
var levelTop = 9999;
|
|
3969
|
+
|
|
3970
|
+
var variables = /*#__PURE__*/Object.freeze({
|
|
3971
|
+
__proto__: null,
|
|
3972
|
+
levelBottom: levelBottom,
|
|
3973
|
+
levelFirst: levelFirst,
|
|
3974
|
+
levelSecond: levelSecond,
|
|
3975
|
+
levelThird: levelThird,
|
|
3976
|
+
levelFourth: levelFourth,
|
|
3977
|
+
levelTop: levelTop
|
|
3978
|
+
});
|
|
3979
|
+
|
|
3954
3980
|
var _templateObject$x;
|
|
3955
3981
|
var rootClassName$u = 'dot-drawer';
|
|
3956
3982
|
var StyledDrawer = styled(Drawer)(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
@@ -4006,13 +4032,12 @@ var DotDrawer = function DotDrawer(_ref) {
|
|
|
4006
4032
|
|
|
4007
4033
|
var _templateObject$w, _templateObject2$5;
|
|
4008
4034
|
var rootClassName$t = 'dot-app-toolbar';
|
|
4009
|
-
var StyledMainMenu = styled(DotDrawer)(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (
|
|
4010
|
-
_ref.theme;
|
|
4035
|
+
var StyledMainMenu = styled(DotDrawer)(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n ", "\n"])), function () {
|
|
4011
4036
|
return css(["&.dot-main-menu .dot-drawer-paper{top:52px;padding:0;.dot-sidebar{height:calc(100vh - 52px);}}"]);
|
|
4012
4037
|
});
|
|
4013
|
-
var StyledAppToolbar = styled.header(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (
|
|
4014
|
-
var theme =
|
|
4015
|
-
return css(["&.dot-app-toolbar{align-items:center;background:", ";border-bottom:4px solid ", ";color:", ";display:flex;height:64px;padding-left:", "px;position:fixed;width:100%;z-index:
|
|
4038
|
+
var StyledAppToolbar = styled.header(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
4039
|
+
var theme = _ref.theme;
|
|
4040
|
+
return css(["&.dot-app-toolbar{align-items:center;background:", ";border-bottom:4px solid ", ";color:", ";display:flex;height:64px;padding-left:", "px;position:fixed;width:100%;z-index:", ";top:0;left:0;right:0;&.dense{height:48px;.dot-icon-btn{margin-right:", "px;padding:", "px;&.hamburger{margin-left:10px;margin-right:", "px;}}.dot-button{padding:", ";margin-right:", "px;}}.dot-branding{align-items:center;display:flex;margin-left:", "px;&.hamburger{margin-left:", "px;}a{line-height:0;}.dot-product-name{color:", ";font-size:18px;margin:", ";}}.dot-icon-btn{color:", ";margin-right:", "px;padding:", "px;}div.dot-right-side{display:flex;flex-grow:2;justify-content:flex-end;}.dot-avatar{margin:", ";}}"], theme.palette.grey[700], theme.palette.grey[100], theme.palette.grey[0], theme.spacing(0.5), levelFourth, theme.spacing(3), theme.spacing(0.25), theme.spacing(0.5), theme.spacing(0.5, 1), theme.spacing(2), theme.spacing(1.5), theme.spacing(1), theme.palette.grey[100], theme.spacing(0, 1.5), theme.palette.grey[100], theme.spacing(1), theme.spacing(1.5), theme.spacing(0, 2, 0, 1));
|
|
4016
4041
|
});
|
|
4017
4042
|
|
|
4018
4043
|
var DotAppToolbar = function DotAppToolbar(_ref) {
|
|
@@ -4027,8 +4052,7 @@ var DotAppToolbar = function DotAppToolbar(_ref) {
|
|
|
4027
4052
|
_ref$navItems = _ref.navItems,
|
|
4028
4053
|
navItems = _ref$navItems === void 0 ? [] : _ref$navItems,
|
|
4029
4054
|
mainMenu = _ref.mainMenu,
|
|
4030
|
-
|
|
4031
|
-
mainMenuItems = _ref$mainMenuItems === void 0 ? [] : _ref$mainMenuItems,
|
|
4055
|
+
mainMenuItems = _ref.mainMenuItems,
|
|
4032
4056
|
_ref$mainMenuWidth = _ref.mainMenuWidth,
|
|
4033
4057
|
mainMenuWidth = _ref$mainMenuWidth === void 0 ? 240 : _ref$mainMenuWidth;
|
|
4034
4058
|
|
|
@@ -4199,7 +4223,11 @@ var parseAutoCompleteValue = function parseAutoCompleteValue(value) {
|
|
|
4199
4223
|
titles += ',';
|
|
4200
4224
|
}
|
|
4201
4225
|
|
|
4202
|
-
|
|
4226
|
+
if (typeof val === 'string') {
|
|
4227
|
+
titles += val;
|
|
4228
|
+
} else {
|
|
4229
|
+
titles += val.title;
|
|
4230
|
+
}
|
|
4203
4231
|
});
|
|
4204
4232
|
return titles;
|
|
4205
4233
|
} else if (value && value.title) {
|
|
@@ -5192,7 +5220,7 @@ var gridClassName = 'debug-grid';
|
|
|
5192
5220
|
var gridClassContainer = 'debug-grid-container';
|
|
5193
5221
|
var cellClassName = 'debug-cell';
|
|
5194
5222
|
var StyledGridOverlay = styled(CssGrid)(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose(["\n ", "\n"])), function () {
|
|
5195
|
-
return css(["
|
|
5223
|
+
return css(["&.", "{position:absolute;z-index:", ";width:100%;.", "{background:rgba(255,192,203,0.4);height:100vh;}}"], gridClassName, levelBottom, cellClassName);
|
|
5196
5224
|
});
|
|
5197
5225
|
var StyledInfo = styled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n &.breakpoint-info {\n border-radius: 4px 0 0 4px;\n padding: 8px;\n position: fixed;\n background: rgba(255, 255, 255, 0.8);\n right: -1px;\n bottom: 10px;\n box-shadow: 2px 2px 2px #9c9c9c;\n font-family: sans-serif;\n font-size: 11px;\n width: 100px;\n border: 1px solid red;\n ul {\n list-style: none;\n padding-left: 4px;\n margin: 0;\n }\n .list {\n padding-top: 4px;\n }\n .header {\n font-weight: bold;\n }\n .message {\n padding-top: 8px;\n color: red;\n }\n }\n"])));
|
|
5198
5226
|
var StyledDivContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n &.", " {\n position: relative;\n }\n"])), gridClassContainer);
|
|
@@ -5728,7 +5756,7 @@ var rootClassName$b = 'dot-navigation-rail';
|
|
|
5728
5756
|
var StyledNavigationRail = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
5729
5757
|
var theme = _ref.theme,
|
|
5730
5758
|
railItemPosition = _ref.railItemPosition;
|
|
5731
|
-
return css(["&.", "{background-color:", ";display:flex;flex-direction:column;justify-content:", ";padding:", ";
|
|
5759
|
+
return css(["&.", "{background-color:", ";border-left:1px solid ", ";display:flex;flex-direction:column;justify-content:", ";padding:", ";width:72px;.rail-item-button{flex-basis:72px;border-radius:0;margin:0;padding:0;width:100%;white-space:normal;&.selected{background-color:", ";}&:focus-visible{background-color:", ";}.MuiButton-label{display:flex;flex-direction:column;word-break:break-word;}}}"], rootClassName$b, theme.palette.layer.n50, theme.palette.layer.n100, railItemPosition, theme.spacing(1, 0, 0), theme.palette.layer.n0, theme.palette.layer.n100);
|
|
5732
5760
|
});
|
|
5733
5761
|
|
|
5734
5762
|
var MAX_ALLOWED_ITEMS = 7;
|
|
@@ -6028,7 +6056,7 @@ var _templateObject$6;
|
|
|
6028
6056
|
var rootClassName$6 = 'dot-snackbar';
|
|
6029
6057
|
var StyledSnackbar = styled(Snackbar)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
6030
6058
|
var theme = _ref.theme;
|
|
6031
|
-
return css(["&.", "{.MuiSvgIcon-root{color:", ";}.MuiAlert-icon{padding:11px 0px;}.MuiAlert-message{padding:13px 0px;word-break:break-all;}&.MuiSnackbar-anchorOriginTopRight{top:0px;z-index:
|
|
6059
|
+
return css(["&.", "{.MuiSvgIcon-root{color:", ";}.MuiAlert-icon{padding:11px 0px;}.MuiAlert-message{padding:13px 0px;word-break:break-all;}&.MuiSnackbar-anchorOriginTopRight{top:0px;z-index:", ";}.MuiAlert-root{&.MuiAlert-standardInfo{background-color:", ";}&.MuiAlert-standardWarning{color:", ";.MuiSvgIcon-root{color:", ";}}max-width:500px;min-width:344px;color:", ";z-index:", ";position:relative;margin-top:108px;background-color:", ";@media (min-width:720px){.MuiAlert-root{top:112px;position:relative;}}}"], rootClassName$6, theme.palette.layer.n0, levelFourth, theme.palette.primary[500], theme.palette.grey[900], theme.palette.grey[900], theme.palette.layer.n0, levelFourth, function (props) {
|
|
6032
6060
|
return theme.palette[props.severity].main;
|
|
6033
6061
|
});
|
|
6034
6062
|
});
|
|
@@ -6180,7 +6208,7 @@ var StyledSplitButtonGroup = styled(ButtonGroup)(_templateObject$4 || (_template
|
|
|
6180
6208
|
var theme = _ref.theme;
|
|
6181
6209
|
return css(["&.", "{box-shadow:0px 3px 1px -2px rgb(0 0 0 / 20%),0px 2px 2px 0px rgb(0 0 0 / 14%),0px 1px 5px 0px rgb(0 0 0 / 12%);&.disabled{box-shadow:none;.dot-button{background:", ";border:1px solid ", ";}}&.outlined,&.text{box-shadow:none;.expand-button{border-left:none;}}&.outlined .dot-button{border-color:", ";}&.destructive .expand-button{border-left-color:", ";}.dot-button{box-shadow:none;margin:0;padding:", ";}.expand-button{border-left:1px solid ", ";&.Mui-disabled{border-left:0;}.MuiButton-label,.dot-icon{width:14px;height:14px;}}}"], rootClassName$4, theme.palette.grey['50'], theme.palette.grey['200'], theme.palette.grey['300'], theme.palette.error['800'], theme.spacing(0.75, 1.5), theme.palette.primary['800']);
|
|
6182
6210
|
});
|
|
6183
|
-
var StyledMenu = styled(DotMenu)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n &.dot-menu {\n z-index:
|
|
6211
|
+
var StyledMenu = styled(DotMenu)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n &.dot-menu {\n z-index: ", ";\n }\n"])), levelTop);
|
|
6184
6212
|
|
|
6185
6213
|
var DotSplitButton = function DotSplitButton(_ref) {
|
|
6186
6214
|
var _ref$autoFocus = _ref.autoFocus,
|
|
@@ -6860,4 +6888,4 @@ var DotTabs = function DotTabs(_ref) {
|
|
|
6860
6888
|
}, tabArray);
|
|
6861
6889
|
};
|
|
6862
6890
|
|
|
6863
|
-
export { Cell, CssCell, CssGrid, CssGridDebug, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotConfirmationDialog, DotDialog, DotDrawer, DotEmptyState, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotProgress, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotSwitch, DotTable, DotTablePagination, DotTabs, DotThemeProvider, DotTypography, lightThemeColors as lightColors, parseAutoCompleteValue, useDotSnackbarContext };
|
|
6891
|
+
export { Cell, CssCell, CssGrid, CssGridDebug, DotAccordion, DotActionToolbar, DotAlertBanner, DotAppToolbar, DotAutoComplete, DotAvatar, DotAvatarGroup, DotBreadcrumbs, DotButton, DotButtonToggle, DotCard, DotCardContent, DotCardFooter, DotCardHeader, DotCheckbox, DotCheckboxGroup, DotChip, DotConfirmationDialog, DotDialog, DotDrawer, DotEmptyState, DotForm, DotFormGroup, DotHeaderRow, DotIcon, DotIconButton, DotInlineEdit, DotInputSelect, DotInputText, DotLink, DotList, DotMenu, DotNavigationRail, DotPill, DotProgress, DotRadioButton, DotRadioGroup, DotSidebar, DotSkeleton, DotSnackbar, DotSnackbarContainer, DotSnackbarProvider, DotSplitButton, DotSwitch, DotTable, DotTablePagination, DotTabs, DotThemeProvider, DotTypography, lightThemeColors as lightColors, parseAutoCompleteValue, variables as themeVariables, useDotSnackbarContext };
|
package/dot-components.umd.js
CHANGED
|
@@ -370,6 +370,14 @@
|
|
|
370
370
|
_e = _a.underline,
|
|
371
371
|
underline = _e === void 0 ? 'always' : _e;
|
|
372
372
|
var rootClasses = useStylesWithRootClass(rootClassName$z, className);
|
|
373
|
+
|
|
374
|
+
var handleKeyPress = function handleKeyPress(event) {
|
|
375
|
+
if (onClick && event.key === 'Enter') {
|
|
376
|
+
event.preventDefault();
|
|
377
|
+
onClick(event);
|
|
378
|
+
}
|
|
379
|
+
};
|
|
380
|
+
|
|
373
381
|
return /*#__PURE__*/React__default['default'].createElement(StyledLink, {
|
|
374
382
|
"aria-label": ariaLabel,
|
|
375
383
|
classes: {
|
|
@@ -377,9 +385,10 @@
|
|
|
377
385
|
},
|
|
378
386
|
color: color,
|
|
379
387
|
"data-testid": dataTestId,
|
|
380
|
-
href:
|
|
388
|
+
href: href,
|
|
381
389
|
onClick: onClick,
|
|
382
390
|
onMouseEnter: onMouseEnter,
|
|
391
|
+
onKeyPress: handleKeyPress,
|
|
383
392
|
rel: rel,
|
|
384
393
|
tabIndex: tabIndex,
|
|
385
394
|
target: target,
|
|
@@ -4047,6 +4056,23 @@
|
|
|
4047
4056
|
|
|
4048
4057
|
var ForwardRef = /*#__PURE__*/React__namespace.forwardRef(SvgLogoDigitalAiWhite);
|
|
4049
4058
|
|
|
4059
|
+
var levelBottom = -1;
|
|
4060
|
+
var levelFirst = 1;
|
|
4061
|
+
var levelSecond = 10;
|
|
4062
|
+
var levelThird = 100;
|
|
4063
|
+
var levelFourth = 1000;
|
|
4064
|
+
var levelTop = 9999;
|
|
4065
|
+
|
|
4066
|
+
var variables = /*#__PURE__*/Object.freeze({
|
|
4067
|
+
__proto__: null,
|
|
4068
|
+
levelBottom: levelBottom,
|
|
4069
|
+
levelFirst: levelFirst,
|
|
4070
|
+
levelSecond: levelSecond,
|
|
4071
|
+
levelThird: levelThird,
|
|
4072
|
+
levelFourth: levelFourth,
|
|
4073
|
+
levelTop: levelTop
|
|
4074
|
+
});
|
|
4075
|
+
|
|
4050
4076
|
var rootClassName$u = 'dot-drawer';
|
|
4051
4077
|
var StyledDrawer = styled__default['default'](core.Drawer)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
4052
4078
|
var theme = _a.theme;
|
|
@@ -4101,13 +4127,12 @@
|
|
|
4101
4127
|
};
|
|
4102
4128
|
|
|
4103
4129
|
var rootClassName$t = 'dot-app-toolbar';
|
|
4104
|
-
var StyledMainMenu = styled__default['default'](DotDrawer)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (
|
|
4105
|
-
_a.theme;
|
|
4130
|
+
var StyledMainMenu = styled__default['default'](DotDrawer)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
|
|
4106
4131
|
return styled.css(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n &.dot-main-menu .dot-drawer-paper {\n top: 52px;\n padding: 0;\n .dot-sidebar {\n height: calc(100vh - 52px);\n }\n }\n "], ["\n &.dot-main-menu .dot-drawer-paper {\n top: 52px;\n padding: 0;\n .dot-sidebar {\n height: calc(100vh - 52px);\n }\n }\n "])));
|
|
4107
4132
|
});
|
|
4108
4133
|
var StyledAppToolbar = styled__default['default'].header(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
4109
4134
|
var theme = _a.theme;
|
|
4110
|
-
return styled.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n &.dot-app-toolbar {\n align-items: center;\n background: ", ";\n border-bottom: 4px solid ", ";\n color: ", ";\n display: flex;\n height: 64px;\n padding-left: ", "px;\n position: fixed;\n width: 100%;\n z-index:
|
|
4135
|
+
return styled.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n &.dot-app-toolbar {\n align-items: center;\n background: ", ";\n border-bottom: 4px solid ", ";\n color: ", ";\n display: flex;\n height: 64px;\n padding-left: ", "px;\n position: fixed;\n width: 100%;\n z-index: ", ";\n top: 0;\n left: 0;\n right: 0;\n &.dense {\n height: 48px;\n\n .dot-icon-btn {\n margin-right: ", "px;\n padding: ", "px;\n\n &.hamburger {\n margin-left: 10px;\n margin-right: ", "px;\n }\n }\n\n .dot-button {\n padding: ", ";\n margin-right: ", "px;\n }\n }\n\n .dot-branding {\n align-items: center;\n display: flex;\n margin-left: ", "px;\n\n &.hamburger {\n margin-left: ", "px;\n }\n\n a {\n line-height: 0;\n }\n\n .dot-product-name {\n color: ", ";\n font-size: 18px;\n margin: ", ";\n }\n }\n\n .dot-icon-btn {\n color: ", ";\n margin-right: ", "px;\n padding: ", "px;\n }\n\n div.dot-right-side {\n display: flex;\n flex-grow: 2;\n justify-content: flex-end;\n }\n\n .dot-avatar {\n margin: ", ";\n }\n }\n "], ["\n &.dot-app-toolbar {\n align-items: center;\n background: ", ";\n border-bottom: 4px solid ", ";\n color: ", ";\n display: flex;\n height: 64px;\n padding-left: ", "px;\n position: fixed;\n width: 100%;\n z-index: ", ";\n top: 0;\n left: 0;\n right: 0;\n &.dense {\n height: 48px;\n\n .dot-icon-btn {\n margin-right: ", "px;\n padding: ", "px;\n\n &.hamburger {\n margin-left: 10px;\n margin-right: ", "px;\n }\n }\n\n .dot-button {\n padding: ", ";\n margin-right: ", "px;\n }\n }\n\n .dot-branding {\n align-items: center;\n display: flex;\n margin-left: ", "px;\n\n &.hamburger {\n margin-left: ", "px;\n }\n\n a {\n line-height: 0;\n }\n\n .dot-product-name {\n color: ", ";\n font-size: 18px;\n margin: ", ";\n }\n }\n\n .dot-icon-btn {\n color: ", ";\n margin-right: ", "px;\n padding: ", "px;\n }\n\n div.dot-right-side {\n display: flex;\n flex-grow: 2;\n justify-content: flex-end;\n }\n\n .dot-avatar {\n margin: ", ";\n }\n }\n "])), theme.palette.grey[700], theme.palette.grey[100], theme.palette.grey[0], theme.spacing(0.5), levelFourth, theme.spacing(3), theme.spacing(0.25), theme.spacing(0.5), theme.spacing(0.5, 1), theme.spacing(2), theme.spacing(1.5), theme.spacing(1), theme.palette.grey[100], theme.spacing(0, 1.5), theme.palette.grey[100], theme.spacing(1), theme.spacing(1.5), theme.spacing(0, 2, 0, 1));
|
|
4111
4136
|
});
|
|
4112
4137
|
var templateObject_1$w, templateObject_2$t, templateObject_3$5, templateObject_4$2;
|
|
4113
4138
|
|
|
@@ -4123,14 +4148,13 @@
|
|
|
4123
4148
|
_b = _a.navItems,
|
|
4124
4149
|
navItems = _b === void 0 ? [] : _b,
|
|
4125
4150
|
mainMenu = _a.mainMenu,
|
|
4126
|
-
|
|
4127
|
-
|
|
4128
|
-
|
|
4129
|
-
mainMenuWidth = _d === void 0 ? 240 : _d;
|
|
4151
|
+
mainMenuItems = _a.mainMenuItems,
|
|
4152
|
+
_c = _a.mainMenuWidth,
|
|
4153
|
+
mainMenuWidth = _c === void 0 ? 240 : _c;
|
|
4130
4154
|
|
|
4131
|
-
var
|
|
4132
|
-
menuOpen =
|
|
4133
|
-
updateMenuOpen =
|
|
4155
|
+
var _d = React.useState(false),
|
|
4156
|
+
menuOpen = _d[0],
|
|
4157
|
+
updateMenuOpen = _d[1];
|
|
4134
4158
|
|
|
4135
4159
|
var showMainMenu = mainMenu || mainMenuItems;
|
|
4136
4160
|
var mainMenuRef = React.useRef(null);
|
|
@@ -4295,7 +4319,11 @@
|
|
|
4295
4319
|
titles_1 += ',';
|
|
4296
4320
|
}
|
|
4297
4321
|
|
|
4298
|
-
|
|
4322
|
+
if (typeof val === 'string') {
|
|
4323
|
+
titles_1 += val;
|
|
4324
|
+
} else {
|
|
4325
|
+
titles_1 += val.title;
|
|
4326
|
+
}
|
|
4299
4327
|
});
|
|
4300
4328
|
return titles_1;
|
|
4301
4329
|
} else if (value && value.title) {
|
|
@@ -5286,7 +5314,7 @@
|
|
|
5286
5314
|
var gridClassContainer = 'debug-grid-container';
|
|
5287
5315
|
var cellClassName = 'debug-cell';
|
|
5288
5316
|
var StyledGridOverlay = styled__default['default'](CssGrid)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function () {
|
|
5289
|
-
return styled.css(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n
|
|
5317
|
+
return styled.css(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n &.", " {\n position: absolute;\n z-index: ", ";\n width: 100%;\n .", " {\n background: rgba(255, 192, 203, 0.4);\n height: 100vh;\n }\n }\n "], ["\n &.", " {\n position: absolute;\n z-index: ", ";\n width: 100%;\n .", " {\n background: rgba(255, 192, 203, 0.4);\n height: 100vh;\n }\n }\n "])), gridClassName, levelBottom, cellClassName);
|
|
5290
5318
|
});
|
|
5291
5319
|
var StyledInfo = styled__default['default'].div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n &.breakpoint-info {\n border-radius: 4px 0 0 4px;\n padding: 8px;\n position: fixed;\n background: rgba(255, 255, 255, 0.8);\n right: -1px;\n bottom: 10px;\n box-shadow: 2px 2px 2px #9c9c9c;\n font-family: sans-serif;\n font-size: 11px;\n width: 100px;\n border: 1px solid red;\n ul {\n list-style: none;\n padding-left: 4px;\n margin: 0;\n }\n .list {\n padding-top: 4px;\n }\n .header {\n font-weight: bold;\n }\n .message {\n padding-top: 8px;\n color: red;\n }\n }\n"], ["\n &.breakpoint-info {\n border-radius: 4px 0 0 4px;\n padding: 8px;\n position: fixed;\n background: rgba(255, 255, 255, 0.8);\n right: -1px;\n bottom: 10px;\n box-shadow: 2px 2px 2px #9c9c9c;\n font-family: sans-serif;\n font-size: 11px;\n width: 100px;\n border: 1px solid red;\n ul {\n list-style: none;\n padding-left: 4px;\n margin: 0;\n }\n .list {\n padding-top: 4px;\n }\n .header {\n font-weight: bold;\n }\n .message {\n padding-top: 8px;\n color: red;\n }\n }\n"])));
|
|
5292
5320
|
var StyledDivContainer = styled__default['default'].div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n &.", " {\n position: relative;\n }\n"], ["\n &.", " {\n position: relative;\n }\n"])), gridClassContainer);
|
|
@@ -5795,7 +5823,7 @@
|
|
|
5795
5823
|
var StyledNavigationRail = styled__default['default'].div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
5796
5824
|
var theme = _a.theme,
|
|
5797
5825
|
railItemPosition = _a.railItemPosition;
|
|
5798
|
-
return styled.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n &.", " {\n background-color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: ", ";\n padding: ", ";\n
|
|
5826
|
+
return styled.css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n &.", " {\n background-color: ", ";\n border-left: 1px solid ", ";\n display: flex;\n flex-direction: column;\n justify-content: ", ";\n padding: ", ";\n width: 72px;\n\n .rail-item-button {\n flex-basis: 72px;\n border-radius: 0;\n margin: 0;\n padding: 0;\n width: 100%;\n white-space: normal;\n\n &.selected {\n background-color: ", ";\n }\n\n &:focus-visible {\n background-color: ", ";\n }\n\n .MuiButton-label {\n display: flex;\n flex-direction: column;\n word-break: break-word;\n }\n }\n }\n "], ["\n &.", " {\n background-color: ", ";\n border-left: 1px solid ", ";\n display: flex;\n flex-direction: column;\n justify-content: ", ";\n padding: ", ";\n width: 72px;\n\n .rail-item-button {\n flex-basis: 72px;\n border-radius: 0;\n margin: 0;\n padding: 0;\n width: 100%;\n white-space: normal;\n\n &.selected {\n background-color: ", ";\n }\n\n &:focus-visible {\n background-color: ", ";\n }\n\n .MuiButton-label {\n display: flex;\n flex-direction: column;\n word-break: break-word;\n }\n }\n }\n "])), rootClassName$b, theme.palette.layer.n50, theme.palette.layer.n100, railItemPosition, theme.spacing(1, 0, 0), theme.palette.layer.n0, theme.palette.layer.n100);
|
|
5799
5827
|
});
|
|
5800
5828
|
var templateObject_1$b, templateObject_2$a;
|
|
5801
5829
|
|
|
@@ -6095,7 +6123,7 @@
|
|
|
6095
6123
|
var rootClassName$6 = 'dot-snackbar';
|
|
6096
6124
|
var StyledSnackbar = styled__default['default'](core.Snackbar)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6097
6125
|
var theme = _a.theme;
|
|
6098
|
-
return styled.css(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n &.", " {\n .MuiSvgIcon-root {\n color: ", ";\n }\n .MuiAlert-icon {\n padding: 11px 0px;\n }\n .MuiAlert-message {\n padding: 13px 0px;\n word-break: break-all;\n }\n &.MuiSnackbar-anchorOriginTopRight{\n top: 0px;\n z-index:
|
|
6126
|
+
return styled.css(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n &.", " {\n .MuiSvgIcon-root {\n color: ", ";\n }\n .MuiAlert-icon {\n padding: 11px 0px;\n }\n .MuiAlert-message {\n padding: 13px 0px;\n word-break: break-all;\n }\n &.MuiSnackbar-anchorOriginTopRight{\n top: 0px;\n z-index: ", ";\n }\n .MuiAlert-root {\n &.MuiAlert-standardInfo{\n background-color: ", ";\n }\n &.MuiAlert-standardWarning{\n color: ", ";\n .MuiSvgIcon-root{\n color: ", ";\n }\n }\n max-width: 500px;\n min-width: 344px;\n color: ", ";\n z-index: ", ";\n position: relative;\n margin-top: 108px;\n background-color: ", ";\n @media (min-width: 720px) {\n .MuiAlert-root {\n top: 112px;\n position: relative;\n }\n }\n }\n "], ["\n &.", " {\n .MuiSvgIcon-root {\n color: ", ";\n }\n .MuiAlert-icon {\n padding: 11px 0px;\n }\n .MuiAlert-message {\n padding: 13px 0px;\n word-break: break-all;\n }\n &.MuiSnackbar-anchorOriginTopRight{\n top: 0px;\n z-index: ", ";\n }\n .MuiAlert-root {\n &.MuiAlert-standardInfo{\n background-color: ", ";\n }\n &.MuiAlert-standardWarning{\n color: ", ";\n .MuiSvgIcon-root{\n color: ", ";\n }\n }\n max-width: 500px;\n min-width: 344px;\n color: ", ";\n z-index: ", ";\n position: relative;\n margin-top: 108px;\n background-color: ", ";\n @media (min-width: 720px) {\n .MuiAlert-root {\n top: 112px;\n position: relative;\n }\n }\n }\n "])), rootClassName$6, theme.palette.layer.n0, levelFourth, theme.palette.primary[500], theme.palette.grey[900], theme.palette.grey[900], theme.palette.layer.n0, levelFourth, function (props) {
|
|
6099
6127
|
return theme.palette[props.severity].main;
|
|
6100
6128
|
});
|
|
6101
6129
|
});
|
|
@@ -6247,7 +6275,7 @@
|
|
|
6247
6275
|
var theme = _a.theme;
|
|
6248
6276
|
return styled.css(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n &.", " {\n box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),\n 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);\n &.disabled {\n box-shadow: none;\n\n .dot-button {\n background: ", ";\n border: 1px solid ", ";\n }\n }\n\n &.outlined,\n &.text {\n box-shadow: none;\n .expand-button {\n border-left: none;\n }\n }\n\n &.outlined .dot-button {\n border-color: ", ";\n }\n\n &.destructive .expand-button {\n border-left-color: ", ";\n }\n\n .dot-button {\n box-shadow: none;\n margin: 0;\n padding: ", ";\n }\n\n .expand-button {\n border-left: 1px solid ", ";\n\n &.Mui-disabled {\n border-left: 0;\n }\n\n .MuiButton-label,\n .dot-icon {\n width: 14px;\n height: 14px;\n }\n }\n }\n "], ["\n &.", " {\n box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),\n 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);\n &.disabled {\n box-shadow: none;\n\n .dot-button {\n background: ", ";\n border: 1px solid ", ";\n }\n }\n\n &.outlined,\n &.text {\n box-shadow: none;\n .expand-button {\n border-left: none;\n }\n }\n\n &.outlined .dot-button {\n border-color: ", ";\n }\n\n &.destructive .expand-button {\n border-left-color: ", ";\n }\n\n .dot-button {\n box-shadow: none;\n margin: 0;\n padding: ", ";\n }\n\n .expand-button {\n border-left: 1px solid ", ";\n\n &.Mui-disabled {\n border-left: 0;\n }\n\n .MuiButton-label,\n .dot-icon {\n width: 14px;\n height: 14px;\n }\n }\n }\n "])), rootClassName$4, theme.palette.grey['50'], theme.palette.grey['200'], theme.palette.grey['300'], theme.palette.error['800'], theme.spacing(0.75, 1.5), theme.palette.primary['800']);
|
|
6249
6277
|
});
|
|
6250
|
-
var StyledMenu = styled__default['default'](DotMenu)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n &.dot-menu {\n z-index:
|
|
6278
|
+
var StyledMenu = styled__default['default'](DotMenu)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n &.dot-menu {\n z-index: ", ";\n }\n"], ["\n &.dot-menu {\n z-index: ", ";\n }\n"])), levelTop);
|
|
6251
6279
|
var templateObject_1$4, templateObject_2$4, templateObject_3$1;
|
|
6252
6280
|
|
|
6253
6281
|
var DotSplitButton = function DotSplitButton(_a) {
|
|
@@ -6983,6 +7011,7 @@
|
|
|
6983
7011
|
exports.DotTypography = DotTypography;
|
|
6984
7012
|
exports.lightColors = lightThemeColors;
|
|
6985
7013
|
exports.parseAutoCompleteValue = parseAutoCompleteValue;
|
|
7014
|
+
exports.themeVariables = variables;
|
|
6986
7015
|
exports.useDotSnackbarContext = useDotSnackbarContext;
|
|
6987
7016
|
|
|
6988
7017
|
Object.defineProperty(exports, '__esModule', { value: true });
|
package/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ChangeEvent, Ref } from 'react';
|
|
2
2
|
import { CommonProps } from '../CommonProps';
|
|
3
3
|
export declare type autoCompleteSize = 'medium' | 'small';
|
|
4
|
-
export declare type AutoCompleteValue = string | AutoCompleteOption | AutoCompleteOption[];
|
|
4
|
+
export declare type AutoCompleteValue = string | string[] | AutoCompleteOption | AutoCompleteOption[];
|
|
5
5
|
export interface AutoCompleteOption {
|
|
6
6
|
group?: string;
|
|
7
7
|
title: string;
|
|
@@ -34,7 +34,7 @@ export interface AutoCompleteProps extends CommonProps {
|
|
|
34
34
|
/** A function that should be executed when the value of the input changes */
|
|
35
35
|
onChange?: (event: ChangeEvent<unknown>, value: AutoCompleteValue, reason: string) => void;
|
|
36
36
|
/** pre-defined options available to the user */
|
|
37
|
-
options
|
|
37
|
+
options?: Array<AutoCompleteOption>;
|
|
38
38
|
/** Placeholder text always displayed inside the input field */
|
|
39
39
|
placeholder?: string;
|
|
40
40
|
/** Determines the padding within the input field 'medium' or 'small' */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MouseEvent, ReactNode } from 'react';
|
|
1
|
+
import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
|
|
2
2
|
import { CommonProps } from '../CommonProps';
|
|
3
3
|
export declare type LinkColor = 'initial' | 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error';
|
|
4
4
|
export declare type LinkUnderline = 'always' | 'hover' | 'none';
|
|
@@ -11,9 +11,9 @@ export interface LinkProps extends CommonProps {
|
|
|
11
11
|
/** href for the link. */
|
|
12
12
|
href?: string;
|
|
13
13
|
/** event callback */
|
|
14
|
-
onClick?: (event: MouseEvent<
|
|
14
|
+
onClick?: (event: KeyboardEvent<Element> | MouseEvent<Element>) => void;
|
|
15
15
|
/** mouse enter event callback */
|
|
16
|
-
onMouseEnter?: (event: MouseEvent<
|
|
16
|
+
onMouseEnter?: (event: MouseEvent<Element>) => void;
|
|
17
17
|
/** specifies the relationship between the current document and the linked document */
|
|
18
18
|
rel?: string;
|
|
19
19
|
/** tab order for the link */
|