@digital-ai/dot-components 1.19.0 → 1.19.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/CHANGE_LOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [1.19.1](https://github.com/digital-ai/dot-components/tree/1.19.1) (07/18/2022)
|
|
4
|
+
|
|
5
|
+
[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.19.0...1.19.1)
|
|
6
|
+
|
|
7
|
+
**Fixed bugs:**
|
|
8
|
+
|
|
9
|
+
- `DotAutocomplete` the property `inputId` is ignored [\#1216](https://github.com/digital-ai/dot-components/issues/1216)
|
|
10
|
+
- D-21972: DotListItem should accept tooltipPlacement props for custom tooltip placement [\#1206](https://github.com/digital-ai/dot-components/issues/1206)
|
|
11
|
+
- For the Sidebar component the "subheader" style in the pattern library doesn't match with the implementation in dot-components [\#1108](https://github.com/digital-ai/dot-components/issues/1108)
|
|
12
|
+
- Clicking on App Logo in navbar should have the same behavior as clicking the Primary Logo [\#1059](https://github.com/digital-ai/dot-components/issues/1059)
|
|
13
|
+
- D-22029: `DotAutocomplete`: fix id attribute on input [\#1217](https://github.com/digital-ai/dot-components/pull/1217) ([angel-git](https://github.com/angel-git))
|
|
14
|
+
- D-20693: `DotSidebar` updates to match Figma [\#1214](https://github.com/digital-ai/dot-components/pull/1214) ([CWSites](https://github.com/CWSites))
|
|
15
|
+
- D-20329: add href to application logo [\#1213](https://github.com/digital-ai/dot-components/pull/1213) ([CWSites](https://github.com/CWSites))
|
|
16
|
+
- D-20404: update table border color [\#1211](https://github.com/digital-ai/dot-components/pull/1211) ([CWSites](https://github.com/CWSites))
|
|
17
|
+
- D-21972: Adds props for custom tooltip position in ListItemProps [\#1207](https://github.com/digital-ai/dot-components/pull/1207) ([s-zimm](https://github.com/s-zimm))
|
|
18
|
+
|
|
3
19
|
## [1.19.0](https://github.com/digital-ai/dot-components/tree/1.19.0) (07/11/2022)
|
|
4
20
|
|
|
5
21
|
[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.18.0...1.19.0)
|
|
@@ -152,7 +168,6 @@
|
|
|
152
168
|
|
|
153
169
|
- `InlineEdit` Support for different text in view/edit modes [\#1103](https://github.com/digital-ai/dot-components/issues/1103)
|
|
154
170
|
- S-83748: `InlineEdit`: Support for different text in view/edit modes [\#1105](https://github.com/digital-ai/dot-components/pull/1105) ([dmiletic85](https://github.com/dmiletic85))
|
|
155
|
-
- S-76904: `InlineEdit` improvements [\#1053](https://github.com/digital-ai/dot-components/pull/1053) ([dmiletic85](https://github.com/dmiletic85))
|
|
156
171
|
|
|
157
172
|
**Fixed bugs:**
|
|
158
173
|
|
|
@@ -195,6 +210,7 @@
|
|
|
195
210
|
- S-82453: `TruncateWithTooltip`: Create new component [\#1072](https://github.com/digital-ai/dot-components/pull/1072) ([dmiletic85](https://github.com/dmiletic85))
|
|
196
211
|
- S-82519: `Snackbar` Allow positioning [\#1064](https://github.com/digital-ai/dot-components/pull/1064) ([dmiletic85](https://github.com/dmiletic85))
|
|
197
212
|
- S-82617: `DotInputText` Expose mouse up event [\#1063](https://github.com/digital-ai/dot-components/pull/1063) ([dmiletic85](https://github.com/dmiletic85))
|
|
213
|
+
- S-76904: `InlineEdit` improvements [\#1053](https://github.com/digital-ai/dot-components/pull/1053) ([dmiletic85](https://github.com/dmiletic85))
|
|
198
214
|
- S-82059: `DraggableList`: Create and export the component [\#1003](https://github.com/digital-ai/dot-components/pull/1003) ([dmiletic85](https://github.com/dmiletic85))
|
|
199
215
|
|
|
200
216
|
**Fixed bugs:**
|
|
@@ -824,10 +840,6 @@
|
|
|
824
840
|
|
|
825
841
|
[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.1.0...1.1.1)
|
|
826
842
|
|
|
827
|
-
**Features:**
|
|
828
|
-
|
|
829
|
-
- S-78164: Sticky menu item on DotMenu component [\#687](https://github.com/digital-ai/dot-components/pull/687) ([dmiletic85](https://github.com/dmiletic85))
|
|
830
|
-
|
|
831
843
|
**Closed issues:**
|
|
832
844
|
|
|
833
845
|
- Security Updates [\#699](https://github.com/digital-ai/dot-components/issues/699)
|
|
@@ -844,6 +856,10 @@
|
|
|
844
856
|
|
|
845
857
|
[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.0.12...1.1.0)
|
|
846
858
|
|
|
859
|
+
**Features:**
|
|
860
|
+
|
|
861
|
+
- S-78164: Sticky menu item on DotMenu component [\#687](https://github.com/digital-ai/dot-components/pull/687) ([dmiletic85](https://github.com/dmiletic85))
|
|
862
|
+
|
|
847
863
|
**Fixed bugs:**
|
|
848
864
|
|
|
849
865
|
- value prop isn't being passed to tab [\#693](https://github.com/digital-ai/dot-components/issues/693)
|
package/index.esm.js
CHANGED
|
@@ -485,7 +485,7 @@ const typographyOptions = {
|
|
|
485
485
|
marginBottom: 3
|
|
486
486
|
},
|
|
487
487
|
overline: {
|
|
488
|
-
fontSize:
|
|
488
|
+
fontSize: 11,
|
|
489
489
|
lineHeight: '14px',
|
|
490
490
|
letterSpacing: '0.03em',
|
|
491
491
|
textTransform: 'uppercase',
|
|
@@ -1873,6 +1873,8 @@ const StyledDotDrawer = styled(DotDrawer).withConfig({
|
|
|
1873
1873
|
open
|
|
1874
1874
|
}) => css(["&.", "{.dot-drawer-paper{z-index:", ";animation:", ";}}"], nestedDrawerClassName, open ? levelFirst : levelBottom, open && css(["", " 0.2s cubic-bezier(1,0,1,.01);"], fadeIn)));
|
|
1875
1875
|
|
|
1876
|
+
const DEFAULT_TOOLTIP_PLACEMENT = 'top-start';
|
|
1877
|
+
|
|
1876
1878
|
const DotListDivider = ({
|
|
1877
1879
|
item,
|
|
1878
1880
|
index
|
|
@@ -1881,7 +1883,7 @@ const DotListDivider = ({
|
|
|
1881
1883
|
return /*#__PURE__*/React__default.createElement(ListSubheader, {
|
|
1882
1884
|
disableSticky: true
|
|
1883
1885
|
}, /*#__PURE__*/React__default.createElement(DotTypography, {
|
|
1884
|
-
variant: "
|
|
1886
|
+
variant: "overline"
|
|
1885
1887
|
}, item.text));
|
|
1886
1888
|
}
|
|
1887
1889
|
|
|
@@ -1982,7 +1984,8 @@ const DotList = ({
|
|
|
1982
1984
|
target: item.target,
|
|
1983
1985
|
text: item.text,
|
|
1984
1986
|
title: item.title,
|
|
1985
|
-
tooltip: item.tooltip
|
|
1987
|
+
tooltip: item.tooltip,
|
|
1988
|
+
tooltipPlacement: item.tooltipPlacement || DEFAULT_TOOLTIP_PLACEMENT
|
|
1986
1989
|
});
|
|
1987
1990
|
}), children);
|
|
1988
1991
|
};
|
|
@@ -2011,7 +2014,8 @@ const DotListItem = ({
|
|
|
2011
2014
|
target,
|
|
2012
2015
|
text,
|
|
2013
2016
|
title,
|
|
2014
|
-
tooltip
|
|
2017
|
+
tooltip,
|
|
2018
|
+
tooltipPlacement: _tooltipPlacement = DEFAULT_TOOLTIP_PLACEMENT
|
|
2015
2019
|
}) => {
|
|
2016
2020
|
const hasChildren = _items2.length > 0;
|
|
2017
2021
|
const isFlyout = nestedListType === 'menu' && hasChildren;
|
|
@@ -2072,7 +2076,7 @@ const DotListItem = ({
|
|
|
2072
2076
|
|
|
2073
2077
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DotTooltip, {
|
|
2074
2078
|
"data-testid": `${dataTestId}-tooltip`,
|
|
2075
|
-
placement:
|
|
2079
|
+
placement: _tooltipPlacement,
|
|
2076
2080
|
title: tooltip || title
|
|
2077
2081
|
}, /*#__PURE__*/React__default.createElement(StyledListItem, {
|
|
2078
2082
|
"aria-label": ariaLabel,
|
|
@@ -2146,12 +2150,13 @@ const NestedList = ({
|
|
|
2146
2150
|
onClick,
|
|
2147
2151
|
title,
|
|
2148
2152
|
tooltip,
|
|
2153
|
+
tooltipPlacement = DEFAULT_TOOLTIP_PLACEMENT,
|
|
2149
2154
|
text
|
|
2150
2155
|
} = item;
|
|
2151
2156
|
return {
|
|
2152
2157
|
children: /*#__PURE__*/React__default.createElement(DotTooltip, {
|
|
2153
2158
|
key: `${parentItemIndex}-${index}-tooltip`,
|
|
2154
|
-
placement:
|
|
2159
|
+
placement: tooltipPlacement,
|
|
2155
2160
|
title: tooltip || title
|
|
2156
2161
|
}, /*#__PURE__*/React__default.createElement(StyledListItem, {
|
|
2157
2162
|
className: flyoutItemClasses,
|
|
@@ -2296,7 +2301,7 @@ const StyledSidebar = styled.aside.withConfig({
|
|
|
2296
2301
|
componentId: "l3atb4-0"
|
|
2297
2302
|
})(["", ""], ({
|
|
2298
2303
|
theme
|
|
2299
|
-
}) => css(["&.", "{align-items:stretch;background:", ";border-width:0 1px;border-style:solid;border-color:", ";box-shadow:", ";box-sizing:border-box;color:", ";display:flex;height:100%;flex-direction:column;justify-content:space-between;letter-spacing:0.01em;padding:", ";-o-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;header{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;height:40px;flex-shrink:0;overflow:hidden;margin-bottom:", ";padding:", ";white-space:nowrap;&.app-logo{box-sizing:border-box;.dot-app-logo{svg,img{max-width:100%;}}}.dot-avatar{margin-right:", "px;}}.go-back{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;.go-back-button{margin:", ";background-color:", ";&:hover{background-color:", ";}&:focus-visible{box-shadow:0 0 0 2px ", ",0 0 0 4px ", ";}}}hr.MuiDivider-root{background-color:", ";margin:", ";}.MuiListSubheader-root{border-bottom:1px solid;border-bottom-color:", ";margin:", ";.dot-typography{margin:0;}}ul.side-nav{background:transparent;flex-grow:2;overflow-x:hidden;overflow-y:auto;padding:0;width:auto;.dot-nested-list{background:transparent;}.", "{.dot-drawer-paper{padding:", "px;overflow-y:
|
|
2304
|
+
}) => css(["&.", "{align-items:stretch;background:", ";border-width:0 1px;border-style:solid;border-color:", ";box-shadow:", ";box-sizing:border-box;color:", ";display:flex;height:100%;flex-direction:column;justify-content:space-between;letter-spacing:0.01em;padding:", ";-o-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;transition:width cubic-bezier(0.4,0,0.6,1) 0.3s;header{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;height:40px;flex-shrink:0;overflow:hidden;margin-bottom:", ";padding:", ";white-space:nowrap;&.app-logo{box-sizing:border-box;.dot-app-logo{svg,img{max-width:100%;}}}.dot-avatar{margin-right:", "px;}}.go-back{align-items:center;border-bottom:1px solid;border-bottom-color:", ";display:flex;.go-back-button{margin:", ";background-color:", ";&:hover{background-color:", ";}&:focus-visible{box-shadow:0 0 0 2px ", ",0 0 0 4px ", ";}}}hr.MuiDivider-root{background-color:", ";margin:", ";}.MuiListSubheader-root{border-bottom:1px solid;border-bottom-color:", ";margin:", ";.dot-typography{display:block;margin:0;padding:", ";}}ul.side-nav{background:transparent;flex-grow:2;overflow-x:hidden;overflow-y:auto;padding:0;width:auto;.dot-nested-list{background:transparent;}.", "{.dot-drawer-paper{padding:", "px;overflow-y:auto;border-right:1px solid ", ";box-shadow:0 0 5px 0 rgba(0,0,0,0.15);padding-top:", ";}.MuiTypography-root.MuiTypography-subtitle2{border:", ";color:", ";font-size:", ";line-height:40px;margin:", ";padding:", ";}.", "{margin:0;padding-left:", "px;}}.dot-list-item{height:", ";padding:0;margin-bottom:", ";&.MuiListItem-root.Mui-selected,&.MuiListItem-root.Mui-selected:hover,&:hover{background-color:", ";}&.Mui-focusVisible{box-shadow:inset 0 0 0 2px ", ";border:2px solid ", ";}&:hover,&:active,&:focus{.dot-typography,.dot-icon i.dot-i:before{color:", ";}}&.open{background-color:", ";border:", ";border-radius:", ";&:hover{background-color:", ";}}.MuiTouchRipple-root{display:", ";}.dot-list-item-link .dot-icon{margin-right:", "px;}.dot-icon{border-radius:50%;height:40px;margin:", ";width:40px;}.dot-typography{white-space:nowrap;}}}.toggle-nav{border-top:1px solid;border-top-color:", ";padding:", "px;text-align:right;.dot-icon{transform:rotate(0deg);-o-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;transition:all cubic-bezier(0.4,0,0.2,1) 0.3s;}}.powered-by{border-top:1px solid;border-top-color:", ";color:", ";display:flex;flex-direction:column;flex-shrink:0;font-size:12px;overflow:hidden;padding:", "px;p.desc{white-space:nowrap;}.company-name{margin-top:", "px;}.d-icon{display:none;}}&.collapsed{overflow:hidden;padding:", ";width:58px;-o-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-moz-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;-webkit-transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;transition:all cubic-bezier(0.4,0,0.6,1) 0.3s;li.MuiListSubheader-root .dot-typography,.go-back .MuiTypography-root,.MuiListItem-divider .dot-list-item-link,.child,.powered-by .company-name,.powered-by p.desc{display:none;}.dot-nested-drawer li.MuiListSubheader-root .dot-typography,.powered-by .d-icon{display:block;}header .dot-app-logo{text-align:center;}ul.side-nav{width:56px;.dot-list-item{margin-left:0;}.toggle-nav{align-self:center;}}.powered-by{align-items:center;}}}"], rootClassName$K, theme.palette.layer.n50, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && `${theme.spacing(2)}px`, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.product === 'agility' && `${theme.spacing(1)}px`, theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.spacing(0, 0, 1), theme.spacing(1.5, 2), nestedDrawerClassName, theme.spacing(2), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && `${theme.spacing(1)}px`, theme.palette.product === 'agility' && 'transparent', theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? `1px solid ${theme.palette.agilityInterface.sideNavHoverBorder}` : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.spacing(0, 1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.grey[400], theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0)));
|
|
2300
2305
|
|
|
2301
2306
|
const Brand = ({
|
|
2302
2307
|
brandDesc
|
|
@@ -2538,6 +2543,7 @@ const StyledAppToolbar = styled.header.withConfig({
|
|
|
2538
2543
|
const DotAppToolbar = ({
|
|
2539
2544
|
appName,
|
|
2540
2545
|
appLogo,
|
|
2546
|
+
appLogoHref: _appLogoHref = '/',
|
|
2541
2547
|
appLogoSmall,
|
|
2542
2548
|
ariaLabel,
|
|
2543
2549
|
avatar,
|
|
@@ -2652,12 +2658,15 @@ const DotAppToolbar = ({
|
|
|
2652
2658
|
href: _primaryLogoHref
|
|
2653
2659
|
}, customLogo ? customLogo : /*#__PURE__*/React__default.createElement(DotTooltip, {
|
|
2654
2660
|
title: "digital.ai"
|
|
2655
|
-
}, /*#__PURE__*/React__default.createElement(ForwardRef, null))), displayAppLogo && /*#__PURE__*/React__default.createElement(
|
|
2661
|
+
}, /*#__PURE__*/React__default.createElement(ForwardRef, null))), displayAppLogo && /*#__PURE__*/React__default.createElement(DotLink, {
|
|
2662
|
+
href: _appLogoHref,
|
|
2663
|
+
"data-testid": "app-logo"
|
|
2664
|
+
}, /*#__PURE__*/React__default.createElement(DotAppLogo, {
|
|
2656
2665
|
appLogo: appLogo,
|
|
2657
2666
|
appLogoSmall: appLogoSmall,
|
|
2658
2667
|
className: "dot-app-logo",
|
|
2659
2668
|
smallOnly: !targetBreakpoint
|
|
2660
|
-
}), appName && /*#__PURE__*/React__default.createElement(DotTypography, {
|
|
2669
|
+
})), appName && /*#__PURE__*/React__default.createElement(DotTypography, {
|
|
2661
2670
|
className: "dot-product-name"
|
|
2662
2671
|
}, appName)), children, /*#__PURE__*/React__default.createElement("div", {
|
|
2663
2672
|
className: "dot-right-side"
|
|
@@ -3120,8 +3129,8 @@ const DotAutoComplete = ({
|
|
|
3120
3129
|
},
|
|
3121
3130
|
error: _error,
|
|
3122
3131
|
helperText: helperText,
|
|
3123
|
-
id: inputId,
|
|
3124
3132
|
inputProps: Object.assign(Object.assign({}, inputProps), {
|
|
3133
|
+
id: inputId,
|
|
3125
3134
|
className: useStylesWithRootClass(inputProps.className, 'dot-input')
|
|
3126
3135
|
}),
|
|
3127
3136
|
InputProps: Object.assign(Object.assign({}, params.InputProps), {
|
|
@@ -6368,13 +6377,13 @@ const StyledPaper = styled(Paper).withConfig({
|
|
|
6368
6377
|
componentId: "s95z6y-0"
|
|
6369
6378
|
})(["", ""], ({
|
|
6370
6379
|
theme
|
|
6371
|
-
}) => css(["&.", "{background:", ";overflow:hidden;border:1px solid ", ";&.loading{opacity:0.4;pointer-events:none;.dot-table-pagination{display:none;}}}"], rootClassName$f, theme.palette.product === 'agility' && theme.palette.layer.n50, theme.palette.
|
|
6380
|
+
}) => css(["&.", "{background:", ";overflow:hidden;border:1px solid ", ";&.loading{opacity:0.4;pointer-events:none;.dot-table-pagination{display:none;}}}"], rootClassName$f, theme.palette.product === 'agility' && theme.palette.layer.n50, theme.palette.layer.n100));
|
|
6372
6381
|
const StyledTableContainer = styled(TableContainer).withConfig({
|
|
6373
6382
|
displayName: "Tablestyles__StyledTableContainer",
|
|
6374
6383
|
componentId: "s95z6y-1"
|
|
6375
6384
|
})(["", ""], ({
|
|
6376
6385
|
theme
|
|
6377
|
-
}) => css(["&.dot-table-container{border-radius:4px;align-items:stretch;flex-direction:column;justify-content:center;table{width:100%;td,th{.dot-cell-typography{margin:0;}}.Mui-selected:not(:hover){background-color:", ";}.MuiTableRow-head{height:56px;}.MuiTableCell-root{border-bottom:1px solid ", ";&.MuiTableCell-stickyHeader{background:", ";}}.MuiTableRow-root{height:52px;}}}"], theme.palette.product === 'agility' ? theme.palette.agilityInterface.fixedCol : theme.palette.grey[200], theme.palette.
|
|
6386
|
+
}) => css(["&.dot-table-container{border-radius:4px;align-items:stretch;flex-direction:column;justify-content:center;table{width:100%;td,th{.dot-cell-typography{margin:0;}}.Mui-selected:not(:hover){background-color:", ";}.MuiTableRow-head{height:56px;}.MuiTableCell-root{border-bottom:1px solid ", ";&.MuiTableCell-stickyHeader{background:", ";}}.MuiTableRow-root{height:52px;}}}"], theme.palette.product === 'agility' ? theme.palette.agilityInterface.fixedCol : theme.palette.grey[200], theme.palette.layer.n100, theme.palette.product === 'agility' && theme.palette.layer.n50));
|
|
6378
6387
|
const StyledMenu$1 = styled(DotMenu).withConfig({
|
|
6379
6388
|
displayName: "Tablestyles__StyledMenu",
|
|
6380
6389
|
componentId: "s95z6y-2"
|
package/index.umd.js
CHANGED
|
@@ -587,7 +587,7 @@
|
|
|
587
587
|
marginBottom: 3
|
|
588
588
|
},
|
|
589
589
|
overline: {
|
|
590
|
-
fontSize:
|
|
590
|
+
fontSize: 11,
|
|
591
591
|
lineHeight: '14px',
|
|
592
592
|
letterSpacing: '0.03em',
|
|
593
593
|
textTransform: 'uppercase',
|
|
@@ -2067,6 +2067,8 @@
|
|
|
2067
2067
|
});
|
|
2068
2068
|
var templateObject_1$O, templateObject_2$M, templateObject_3$9, templateObject_4$5;
|
|
2069
2069
|
|
|
2070
|
+
var DEFAULT_TOOLTIP_PLACEMENT = 'top-start';
|
|
2071
|
+
|
|
2070
2072
|
var DotListDivider = function DotListDivider(_a) {
|
|
2071
2073
|
var item = _a.item,
|
|
2072
2074
|
index = _a.index;
|
|
@@ -2075,7 +2077,7 @@
|
|
|
2075
2077
|
return /*#__PURE__*/React__default["default"].createElement(core.ListSubheader, {
|
|
2076
2078
|
disableSticky: true
|
|
2077
2079
|
}, /*#__PURE__*/React__default["default"].createElement(DotTypography, {
|
|
2078
|
-
variant: "
|
|
2080
|
+
variant: "overline"
|
|
2079
2081
|
}, item.text));
|
|
2080
2082
|
}
|
|
2081
2083
|
|
|
@@ -2186,7 +2188,8 @@
|
|
|
2186
2188
|
target: item.target,
|
|
2187
2189
|
text: item.text,
|
|
2188
2190
|
title: item.title,
|
|
2189
|
-
tooltip: item.tooltip
|
|
2191
|
+
tooltip: item.tooltip,
|
|
2192
|
+
tooltipPlacement: item.tooltipPlacement || DEFAULT_TOOLTIP_PLACEMENT
|
|
2190
2193
|
});
|
|
2191
2194
|
}), children);
|
|
2192
2195
|
};
|
|
@@ -2218,13 +2221,15 @@
|
|
|
2218
2221
|
target = _a.target,
|
|
2219
2222
|
text = _a.text,
|
|
2220
2223
|
title = _a.title,
|
|
2221
|
-
tooltip = _a.tooltip
|
|
2224
|
+
tooltip = _a.tooltip,
|
|
2225
|
+
_e = _a.tooltipPlacement,
|
|
2226
|
+
tooltipPlacement = _e === void 0 ? DEFAULT_TOOLTIP_PLACEMENT : _e;
|
|
2222
2227
|
var hasChildren = items.length > 0;
|
|
2223
2228
|
var isFlyout = nestedListType === 'menu' && hasChildren;
|
|
2224
2229
|
|
|
2225
|
-
var
|
|
2226
|
-
anchorEl =
|
|
2227
|
-
setAnchorEl =
|
|
2230
|
+
var _f = React.useState(null),
|
|
2231
|
+
anchorEl = _f[0],
|
|
2232
|
+
setAnchorEl = _f[1];
|
|
2228
2233
|
|
|
2229
2234
|
var showStartIcon = startIcon || startIconId;
|
|
2230
2235
|
var showEndIcon = endIcon || endIconId || hasChildren;
|
|
@@ -2288,7 +2293,7 @@
|
|
|
2288
2293
|
|
|
2289
2294
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
|
|
2290
2295
|
"data-testid": dataTestId + "-tooltip",
|
|
2291
|
-
placement:
|
|
2296
|
+
placement: tooltipPlacement,
|
|
2292
2297
|
title: tooltip || title
|
|
2293
2298
|
}, /*#__PURE__*/React__default["default"].createElement(StyledListItem, {
|
|
2294
2299
|
"aria-label": ariaLabel,
|
|
@@ -2360,11 +2365,13 @@
|
|
|
2360
2365
|
onClick = item.onClick,
|
|
2361
2366
|
title = item.title,
|
|
2362
2367
|
tooltip = item.tooltip,
|
|
2368
|
+
_a = item.tooltipPlacement,
|
|
2369
|
+
tooltipPlacement = _a === void 0 ? DEFAULT_TOOLTIP_PLACEMENT : _a,
|
|
2363
2370
|
text = item.text;
|
|
2364
2371
|
return {
|
|
2365
2372
|
children: /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
|
|
2366
2373
|
key: parentItemIndex + "-" + index + "-tooltip",
|
|
2367
|
-
placement:
|
|
2374
|
+
placement: tooltipPlacement,
|
|
2368
2375
|
title: tooltip || title
|
|
2369
2376
|
}, /*#__PURE__*/React__default["default"].createElement(StyledListItem, {
|
|
2370
2377
|
className: flyoutItemClasses,
|
|
@@ -2509,7 +2516,7 @@
|
|
|
2509
2516
|
componentId: "l3atb4-0"
|
|
2510
2517
|
})(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
2511
2518
|
var theme = _a.theme;
|
|
2512
|
-
return styled.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n &.", " {\n align-items: stretch;\n background: ", ";\n border-width: 0 1px;\n border-style: solid;\n border-color: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n letter-spacing: 0.01em;\n padding: ", ";\n -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n height: 40px;\n flex-shrink: 0;\n overflow: hidden;\n margin-bottom: ", ";\n padding: ", ";\n white-space: nowrap;\n\n &.app-logo {\n box-sizing: border-box;\n\n .dot-app-logo {\n svg,\n img {\n max-width: 100%;\n }\n }\n }\n\n .dot-avatar {\n margin-right: ", "px;\n }\n }\n\n .go-back {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n\n .go-back-button {\n margin: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px ", ",\n 0 0 0 4px ", ";\n }\n }\n }\n\n hr.MuiDivider-root {\n background-color: ", ";\n margin: ", ";\n }\n\n .MuiListSubheader-root {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n margin: ", ";\n\n .dot-typography {\n margin: 0;\n }\n }\n\n ul.side-nav {\n background: transparent;\n flex-grow: 2;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n width: auto;\n\n .dot-nested-list {\n background: transparent;\n }\n\n .", " {\n .dot-drawer-paper {\n padding: ", "px;\n overflow-y: scroll;\n border-right: 1px solid\n ", ";\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n padding-top: ", ";\n }\n\n .MuiTypography-root.MuiTypography-subtitle2 {\n border: ", ";\n color: ", ";\n font-size: ", ";\n line-height: 40px;\n margin: ", ";\n padding: ", ";\n }\n\n .", " {\n margin: 0;\n padding-left: ", "px;\n }\n }\n\n .dot-list-item {\n height: ", ";\n padding: 0;\n margin-bottom: ", ";\n\n &.MuiListItem-root.Mui-selected,\n &.MuiListItem-root.Mui-selected:hover,\n &:hover {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n box-shadow: inset 0 0 0 2px ", ";\n border: 2px solid ", ";\n }\n\n &:hover,\n &:active,\n &:focus {\n .dot-typography,\n .dot-icon i.dot-i:before {\n color: ", ";\n }\n }\n\n &.open {\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n\n &:hover {\n background-color: ", ";\n }\n }\n\n .MuiTouchRipple-root {\n display: ", ";\n }\n\n .dot-list-item-link .dot-icon {\n margin-right: ", "px;\n }\n\n .dot-icon {\n border-radius: 50%;\n height: 40px;\n margin: ", ";\n width: 40px;\n }\n\n .dot-typography {\n white-space: nowrap;\n }\n }\n }\n\n .toggle-nav {\n border-top: 1px solid;\n border-top-color: ", ";\n padding: ", "px;\n text-align: right;\n\n .dot-icon {\n transform: rotate(0deg);\n -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n }\n }\n\n .powered-by {\n border-top: 1px solid;\n border-top-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n font-size: 12px;\n overflow: hidden;\n padding: ", "px;\n\n p.desc {\n white-space: nowrap;\n }\n\n .company-name {\n margin-top: ", "px;\n }\n\n .d-icon {\n display: none;\n }\n }\n\n &.collapsed {\n overflow: hidden;\n padding: ", ";\n width: 58px;\n -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n li.MuiListSubheader-root .dot-typography,\n .go-back .MuiTypography-root,\n .MuiListItem-divider .dot-list-item-link,\n .child,\n .powered-by .company-name,\n .powered-by p.desc {\n display: none;\n }\n\n .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n .powered-by .d-icon {\n display: block;\n }\n\n header .dot-app-logo {\n text-align: center;\n }\n\n ul.side-nav {\n width: 56px;\n .dot-list-item {\n margin-left: 0;\n }\n\n .toggle-nav {\n align-self: center;\n }\n }\n\n .powered-by {\n align-items: center;\n }\n }\n }\n "], ["\n &.", " {\n align-items: stretch;\n background: ", ";\n border-width: 0 1px;\n border-style: solid;\n border-color: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n letter-spacing: 0.01em;\n padding: ", ";\n -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n height: 40px;\n flex-shrink: 0;\n overflow: hidden;\n margin-bottom: ", ";\n padding: ", ";\n white-space: nowrap;\n\n &.app-logo {\n box-sizing: border-box;\n\n .dot-app-logo {\n svg,\n img {\n max-width: 100%;\n }\n }\n }\n\n .dot-avatar {\n margin-right: ", "px;\n }\n }\n\n .go-back {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n\n .go-back-button {\n margin: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px ", ",\n 0 0 0 4px ", ";\n }\n }\n }\n\n hr.MuiDivider-root {\n background-color: ", ";\n margin: ", ";\n }\n\n .MuiListSubheader-root {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n margin: ", ";\n\n .dot-typography {\n margin: 0;\n }\n }\n\n ul.side-nav {\n background: transparent;\n flex-grow: 2;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n width: auto;\n\n .dot-nested-list {\n background: transparent;\n }\n\n .", " {\n .dot-drawer-paper {\n padding: ", "px;\n overflow-y: scroll;\n border-right: 1px solid\n ", ";\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n padding-top: ", ";\n }\n\n .MuiTypography-root.MuiTypography-subtitle2 {\n border: ", ";\n color: ", ";\n font-size: ", ";\n line-height: 40px;\n margin: ", ";\n padding: ", ";\n }\n\n .", " {\n margin: 0;\n padding-left: ", "px;\n }\n }\n\n .dot-list-item {\n height: ", ";\n padding: 0;\n margin-bottom: ", ";\n\n &.MuiListItem-root.Mui-selected,\n &.MuiListItem-root.Mui-selected:hover,\n &:hover {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n box-shadow: inset 0 0 0 2px ", ";\n border: 2px solid ", ";\n }\n\n &:hover,\n &:active,\n &:focus {\n .dot-typography,\n .dot-icon i.dot-i:before {\n color: ", ";\n }\n }\n\n &.open {\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n\n &:hover {\n background-color: ", ";\n }\n }\n\n .MuiTouchRipple-root {\n display: ", ";\n }\n\n .dot-list-item-link .dot-icon {\n margin-right: ", "px;\n }\n\n .dot-icon {\n border-radius: 50%;\n height: 40px;\n margin: ", ";\n width: 40px;\n }\n\n .dot-typography {\n white-space: nowrap;\n }\n }\n }\n\n .toggle-nav {\n border-top: 1px solid;\n border-top-color: ", ";\n padding: ", "px;\n text-align: right;\n\n .dot-icon {\n transform: rotate(0deg);\n -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n }\n }\n\n .powered-by {\n border-top: 1px solid;\n border-top-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n font-size: 12px;\n overflow: hidden;\n padding: ", "px;\n\n p.desc {\n white-space: nowrap;\n }\n\n .company-name {\n margin-top: ", "px;\n }\n\n .d-icon {\n display: none;\n }\n }\n\n &.collapsed {\n overflow: hidden;\n padding: ", ";\n width: 58px;\n -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n li.MuiListSubheader-root .dot-typography,\n .go-back .MuiTypography-root,\n .MuiListItem-divider .dot-list-item-link,\n .child,\n .powered-by .company-name,\n .powered-by p.desc {\n display: none;\n }\n\n .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n .powered-by .d-icon {\n display: block;\n }\n\n header .dot-app-logo {\n text-align: center;\n }\n\n ul.side-nav {\n width: 56px;\n .dot-list-item {\n margin-left: 0;\n }\n\n .toggle-nav {\n align-self: center;\n }\n }\n\n .powered-by {\n align-items: center;\n }\n }\n }\n "])), rootClassName$K, theme.palette.product === 'agility' ? theme.palette.layer.n50 : theme.palette.grey[50], theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && theme.spacing(2) + "px", theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(0, 0, 1), nestedDrawerClassName, theme.spacing(2), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agility' && 'transparent', theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? "1px solid " + theme.palette.agilityInterface.sideNavHoverBorder : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.spacing(0, 1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.grey[100], theme.palette.grey[400], theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0));
|
|
2519
|
+
return styled.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n &.", " {\n align-items: stretch;\n background: ", ";\n border-width: 0 1px;\n border-style: solid;\n border-color: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n letter-spacing: 0.01em;\n padding: ", ";\n -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n height: 40px;\n flex-shrink: 0;\n overflow: hidden;\n margin-bottom: ", ";\n padding: ", ";\n white-space: nowrap;\n\n &.app-logo {\n box-sizing: border-box;\n\n .dot-app-logo {\n svg,\n img {\n max-width: 100%;\n }\n }\n }\n\n .dot-avatar {\n margin-right: ", "px;\n }\n }\n\n .go-back {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n\n .go-back-button {\n margin: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px ", ",\n 0 0 0 4px ", ";\n }\n }\n }\n\n hr.MuiDivider-root {\n background-color: ", ";\n margin: ", ";\n }\n\n .MuiListSubheader-root {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n margin: ", ";\n\n .dot-typography {\n display: block;\n margin: 0;\n padding: ", ";\n }\n }\n\n ul.side-nav {\n background: transparent;\n flex-grow: 2;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n width: auto;\n\n .dot-nested-list {\n background: transparent;\n }\n\n .", " {\n .dot-drawer-paper {\n padding: ", "px;\n overflow-y: auto;\n border-right: 1px solid\n ", ";\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n padding-top: ", ";\n }\n\n .MuiTypography-root.MuiTypography-subtitle2 {\n border: ", ";\n color: ", ";\n font-size: ", ";\n line-height: 40px;\n margin: ", ";\n padding: ", ";\n }\n\n .", " {\n margin: 0;\n padding-left: ", "px;\n }\n }\n\n .dot-list-item {\n height: ", ";\n padding: 0;\n margin-bottom: ", ";\n\n &.MuiListItem-root.Mui-selected,\n &.MuiListItem-root.Mui-selected:hover,\n &:hover {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n box-shadow: inset 0 0 0 2px ", ";\n border: 2px solid ", ";\n }\n\n &:hover,\n &:active,\n &:focus {\n .dot-typography,\n .dot-icon i.dot-i:before {\n color: ", ";\n }\n }\n\n &.open {\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n\n &:hover {\n background-color: ", ";\n }\n }\n\n .MuiTouchRipple-root {\n display: ", ";\n }\n\n .dot-list-item-link .dot-icon {\n margin-right: ", "px;\n }\n\n .dot-icon {\n border-radius: 50%;\n height: 40px;\n margin: ", ";\n width: 40px;\n }\n\n .dot-typography {\n white-space: nowrap;\n }\n }\n }\n\n .toggle-nav {\n border-top: 1px solid;\n border-top-color: ", ";\n padding: ", "px;\n text-align: right;\n\n .dot-icon {\n transform: rotate(0deg);\n -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n }\n }\n\n .powered-by {\n border-top: 1px solid;\n border-top-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n font-size: 12px;\n overflow: hidden;\n padding: ", "px;\n\n p.desc {\n white-space: nowrap;\n }\n\n .company-name {\n margin-top: ", "px;\n }\n\n .d-icon {\n display: none;\n }\n }\n\n &.collapsed {\n overflow: hidden;\n padding: ", ";\n width: 58px;\n -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n li.MuiListSubheader-root .dot-typography,\n .go-back .MuiTypography-root,\n .MuiListItem-divider .dot-list-item-link,\n .child,\n .powered-by .company-name,\n .powered-by p.desc {\n display: none;\n }\n\n .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n .powered-by .d-icon {\n display: block;\n }\n\n header .dot-app-logo {\n text-align: center;\n }\n\n ul.side-nav {\n width: 56px;\n .dot-list-item {\n margin-left: 0;\n }\n\n .toggle-nav {\n align-self: center;\n }\n }\n\n .powered-by {\n align-items: center;\n }\n }\n }\n "], ["\n &.", " {\n align-items: stretch;\n background: ", ";\n border-width: 0 1px;\n border-style: solid;\n border-color: ", ";\n box-shadow: ", ";\n box-sizing: border-box;\n color: ", ";\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n letter-spacing: 0.01em;\n padding: ", ";\n -o-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: width cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n header {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n height: 40px;\n flex-shrink: 0;\n overflow: hidden;\n margin-bottom: ", ";\n padding: ", ";\n white-space: nowrap;\n\n &.app-logo {\n box-sizing: border-box;\n\n .dot-app-logo {\n svg,\n img {\n max-width: 100%;\n }\n }\n }\n\n .dot-avatar {\n margin-right: ", "px;\n }\n }\n\n .go-back {\n align-items: center;\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n display: flex;\n\n .go-back-button {\n margin: ", ";\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px ", ",\n 0 0 0 4px ", ";\n }\n }\n }\n\n hr.MuiDivider-root {\n background-color: ", ";\n margin: ", ";\n }\n\n .MuiListSubheader-root {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n margin: ", ";\n\n .dot-typography {\n display: block;\n margin: 0;\n padding: ", ";\n }\n }\n\n ul.side-nav {\n background: transparent;\n flex-grow: 2;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 0;\n width: auto;\n\n .dot-nested-list {\n background: transparent;\n }\n\n .", " {\n .dot-drawer-paper {\n padding: ", "px;\n overflow-y: auto;\n border-right: 1px solid\n ", ";\n box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);\n padding-top: ", ";\n }\n\n .MuiTypography-root.MuiTypography-subtitle2 {\n border: ", ";\n color: ", ";\n font-size: ", ";\n line-height: 40px;\n margin: ", ";\n padding: ", ";\n }\n\n .", " {\n margin: 0;\n padding-left: ", "px;\n }\n }\n\n .dot-list-item {\n height: ", ";\n padding: 0;\n margin-bottom: ", ";\n\n &.MuiListItem-root.Mui-selected,\n &.MuiListItem-root.Mui-selected:hover,\n &:hover {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n box-shadow: inset 0 0 0 2px ", ";\n border: 2px solid ", ";\n }\n\n &:hover,\n &:active,\n &:focus {\n .dot-typography,\n .dot-icon i.dot-i:before {\n color: ", ";\n }\n }\n\n &.open {\n background-color: ", ";\n border: ", ";\n border-radius: ", ";\n\n &:hover {\n background-color: ", ";\n }\n }\n\n .MuiTouchRipple-root {\n display: ", ";\n }\n\n .dot-list-item-link .dot-icon {\n margin-right: ", "px;\n }\n\n .dot-icon {\n border-radius: 50%;\n height: 40px;\n margin: ", ";\n width: 40px;\n }\n\n .dot-typography {\n white-space: nowrap;\n }\n }\n }\n\n .toggle-nav {\n border-top: 1px solid;\n border-top-color: ", ";\n padding: ", "px;\n text-align: right;\n\n .dot-icon {\n transform: rotate(0deg);\n -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;\n }\n }\n\n .powered-by {\n border-top: 1px solid;\n border-top-color: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n font-size: 12px;\n overflow: hidden;\n padding: ", "px;\n\n p.desc {\n white-space: nowrap;\n }\n\n .company-name {\n margin-top: ", "px;\n }\n\n .d-icon {\n display: none;\n }\n }\n\n &.collapsed {\n overflow: hidden;\n padding: ", ";\n width: 58px;\n -o-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -moz-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n -webkit-transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n transition: all cubic-bezier(0.4, 0, 0.6, 1) 0.3s;\n\n li.MuiListSubheader-root .dot-typography,\n .go-back .MuiTypography-root,\n .MuiListItem-divider .dot-list-item-link,\n .child,\n .powered-by .company-name,\n .powered-by p.desc {\n display: none;\n }\n\n .dot-nested-drawer li.MuiListSubheader-root .dot-typography,\n .powered-by .d-icon {\n display: block;\n }\n\n header .dot-app-logo {\n text-align: center;\n }\n\n ul.side-nav {\n width: 56px;\n .dot-list-item {\n margin-left: 0;\n }\n\n .toggle-nav {\n align-self: center;\n }\n }\n\n .powered-by {\n align-items: center;\n }\n }\n }\n "])), rootClassName$K, theme.palette.layer.n50, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.product === 'agility' && '0 0 5px rgba(0, 0, 0, 0.15)', theme.palette.product === 'agility' ? theme.palette.layer.n700 : theme.palette.grey[700], theme.palette.product === 'agility' && theme.spacing(2) + "px", theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agililty' ? theme.spacing(0, 0, 1) : theme.spacing(1, 2), theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.spacing(0.5, 1), theme.palette.layer.n100, theme.palette.layer.n200, theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.product === 'agility' ? theme.spacing(2, 0) : theme.spacing(1, 0), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.spacing(0, 0, 1), theme.spacing(1.5, 2), nestedDrawerClassName, theme.spacing(2), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.product === 'agility' && '10px', theme.palette.product === 'agility' && 'none', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavSubHeaderText, theme.palette.product === 'agility' && '11px', theme.palette.product === 'agility' && '10px 0 0', theme.palette.product === 'agility' && '0 8px', listItemRootClass, theme.spacing(2), theme.palette.product === 'agility' ? '40px' : '44px', theme.palette.product === 'agility' && theme.spacing(1) + "px", theme.palette.product === 'agility' && 'transparent', theme.palette.layer.n0, theme.palette.layer.n900, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverText, theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' ? "1px solid " + theme.palette.agilityInterface.sideNavHoverBorder : 'none', theme.palette.product === 'agility' && '4px', theme.palette.product === 'agility' && theme.palette.agilityInterface.sideNavHoverBg, theme.palette.product === 'agility' && 'none', theme.spacing(1), theme.spacing(0, 1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.spacing(1), theme.palette.product === 'agility' ? theme.palette.agilityInterface.sideNavBorder : theme.palette.layer.n100, theme.palette.grey[400], theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0));
|
|
2513
2520
|
});
|
|
2514
2521
|
var templateObject_1$N, templateObject_2$L;
|
|
2515
2522
|
|
|
@@ -2774,6 +2781,8 @@
|
|
|
2774
2781
|
var DotAppToolbar = function DotAppToolbar(_a) {
|
|
2775
2782
|
var appName = _a.appName,
|
|
2776
2783
|
appLogo = _a.appLogo,
|
|
2784
|
+
_b = _a.appLogoHref,
|
|
2785
|
+
appLogoHref = _b === void 0 ? '/' : _b,
|
|
2777
2786
|
appLogoSmall = _a.appLogoSmall,
|
|
2778
2787
|
ariaLabel = _a.ariaLabel,
|
|
2779
2788
|
avatar = _a.avatar,
|
|
@@ -2783,20 +2792,20 @@
|
|
|
2783
2792
|
closeMenuOnItemClick = _a.closeMenuOnItemClick,
|
|
2784
2793
|
customLogo = _a.customLogo,
|
|
2785
2794
|
dataTestId = _a["data-testid"],
|
|
2786
|
-
|
|
2787
|
-
dense =
|
|
2788
|
-
|
|
2789
|
-
navItems =
|
|
2795
|
+
_c = _a.dense,
|
|
2796
|
+
dense = _c === void 0 ? true : _c,
|
|
2797
|
+
_d = _a.navItems,
|
|
2798
|
+
navItems = _d === void 0 ? [] : _d,
|
|
2790
2799
|
mainMenu = _a.mainMenu,
|
|
2791
2800
|
mainMenuItems = _a.mainMenuItems,
|
|
2792
|
-
|
|
2793
|
-
mainMenuWidth =
|
|
2794
|
-
|
|
2795
|
-
primaryLogoHref =
|
|
2801
|
+
_e = _a.mainMenuWidth,
|
|
2802
|
+
mainMenuWidth = _e === void 0 ? 240 : _e,
|
|
2803
|
+
_f = _a.primaryLogoHref,
|
|
2804
|
+
primaryLogoHref = _f === void 0 ? '/' : _f;
|
|
2796
2805
|
|
|
2797
|
-
var
|
|
2798
|
-
menuOpen =
|
|
2799
|
-
updateMenuOpen =
|
|
2806
|
+
var _g = React.useState(false),
|
|
2807
|
+
menuOpen = _g[0],
|
|
2808
|
+
updateMenuOpen = _g[1];
|
|
2800
2809
|
|
|
2801
2810
|
var showMainMenu = mainMenu || mainMenuItems;
|
|
2802
2811
|
var displayAppLogo = appLogo || appLogoSmall;
|
|
@@ -2901,12 +2910,15 @@
|
|
|
2901
2910
|
href: primaryLogoHref
|
|
2902
2911
|
}, customLogo ? customLogo : /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
|
|
2903
2912
|
title: "digital.ai"
|
|
2904
|
-
}, /*#__PURE__*/React__default["default"].createElement(ForwardRef, null))), displayAppLogo && /*#__PURE__*/React__default["default"].createElement(
|
|
2913
|
+
}, /*#__PURE__*/React__default["default"].createElement(ForwardRef, null))), displayAppLogo && /*#__PURE__*/React__default["default"].createElement(DotLink, {
|
|
2914
|
+
href: appLogoHref,
|
|
2915
|
+
"data-testid": "app-logo"
|
|
2916
|
+
}, /*#__PURE__*/React__default["default"].createElement(DotAppLogo, {
|
|
2905
2917
|
appLogo: appLogo,
|
|
2906
2918
|
appLogoSmall: appLogoSmall,
|
|
2907
2919
|
className: "dot-app-logo",
|
|
2908
2920
|
smallOnly: !targetBreakpoint
|
|
2909
|
-
}), appName && /*#__PURE__*/React__default["default"].createElement(DotTypography, {
|
|
2921
|
+
})), appName && /*#__PURE__*/React__default["default"].createElement(DotTypography, {
|
|
2910
2922
|
className: "dot-product-name"
|
|
2911
2923
|
}, appName)), children, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
2912
2924
|
className: "dot-right-side"
|
|
@@ -3434,8 +3446,8 @@
|
|
|
3434
3446
|
},
|
|
3435
3447
|
error: error,
|
|
3436
3448
|
helperText: helperText,
|
|
3437
|
-
id: inputId,
|
|
3438
3449
|
inputProps: __assign(__assign({}, inputProps), {
|
|
3450
|
+
id: inputId,
|
|
3439
3451
|
className: useStylesWithRootClass(inputProps.className, 'dot-input')
|
|
3440
3452
|
}),
|
|
3441
3453
|
InputProps: __assign(__assign({}, params.InputProps), {
|
|
@@ -6925,14 +6937,14 @@
|
|
|
6925
6937
|
componentId: "s95z6y-0"
|
|
6926
6938
|
})(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6927
6939
|
var theme = _a.theme;
|
|
6928
|
-
return styled.css(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n &.", " {\n background: ", ";\n overflow: hidden;\n border: 1px solid
|
|
6940
|
+
return styled.css(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n &.", " {\n background: ", ";\n overflow: hidden;\n border: 1px solid ", ";\n\n // while loading, change opacity, disable pointer events\n // and hide pagination.\n &.loading {\n opacity: 0.4;\n pointer-events: none;\n .dot-table-pagination {\n display: none;\n }\n }\n }\n "], ["\n &.", " {\n background: ", ";\n overflow: hidden;\n border: 1px solid ", ";\n\n // while loading, change opacity, disable pointer events\n // and hide pagination.\n &.loading {\n opacity: 0.4;\n pointer-events: none;\n .dot-table-pagination {\n display: none;\n }\n }\n }\n "])), rootClassName$f, theme.palette.product === 'agility' && theme.palette.layer.n50, theme.palette.layer.n100);
|
|
6929
6941
|
});
|
|
6930
6942
|
var StyledTableContainer = styled__default["default"](core.TableContainer).withConfig({
|
|
6931
6943
|
displayName: "Tablestyles__StyledTableContainer",
|
|
6932
6944
|
componentId: "s95z6y-1"
|
|
6933
6945
|
})(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6934
6946
|
var theme = _a.theme;
|
|
6935
|
-
return styled.css(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n &.dot-table-container {\n border-radius: 4px;\n align-items: stretch;\n flex-direction: column;\n justify-content: center;\n\n table {\n width: 100%;\n\n td,\n th {\n .dot-cell-typography {\n margin: 0;\n }\n }\n\n .Mui-selected:not(:hover) {\n background-color: ", ";\n }\n\n .MuiTableRow-head {\n height: 56px;\n }\n\n .MuiTableCell-root {\n border-bottom: 1px solid
|
|
6947
|
+
return styled.css(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n &.dot-table-container {\n border-radius: 4px;\n align-items: stretch;\n flex-direction: column;\n justify-content: center;\n\n table {\n width: 100%;\n\n td,\n th {\n .dot-cell-typography {\n margin: 0;\n }\n }\n\n .Mui-selected:not(:hover) {\n background-color: ", ";\n }\n\n .MuiTableRow-head {\n height: 56px;\n }\n\n .MuiTableCell-root {\n border-bottom: 1px solid ", ";\n\n &.MuiTableCell-stickyHeader {\n background: ", ";\n }\n }\n\n .MuiTableRow-root {\n height: 52px;\n }\n }\n }\n "], ["\n &.dot-table-container {\n border-radius: 4px;\n align-items: stretch;\n flex-direction: column;\n justify-content: center;\n\n table {\n width: 100%;\n\n td,\n th {\n .dot-cell-typography {\n margin: 0;\n }\n }\n\n .Mui-selected:not(:hover) {\n background-color: ", ";\n }\n\n .MuiTableRow-head {\n height: 56px;\n }\n\n .MuiTableCell-root {\n border-bottom: 1px solid ", ";\n\n &.MuiTableCell-stickyHeader {\n background: ", ";\n }\n }\n\n .MuiTableRow-root {\n height: 52px;\n }\n }\n }\n "])), theme.palette.product === 'agility' ? theme.palette.agilityInterface.fixedCol : theme.palette.grey[200], theme.palette.layer.n100, theme.palette.product === 'agility' && theme.palette.layer.n50);
|
|
6936
6948
|
});
|
|
6937
6949
|
var StyledMenu$1 = styled__default["default"](DotMenu).withConfig({
|
|
6938
6950
|
displayName: "Tablestyles__StyledMenu",
|
|
@@ -15,6 +15,8 @@ export interface AppToolbarIconButtons extends IconButtonProps {
|
|
|
15
15
|
export interface AppToolbarProps extends CommonProps {
|
|
16
16
|
/** If provided will display application logo */
|
|
17
17
|
appLogo?: ReactNode;
|
|
18
|
+
/** URL of the page the application logo link will go to */
|
|
19
|
+
appLogoHref?: string;
|
|
18
20
|
/** If provided will display application logo */
|
|
19
21
|
appLogoSmall?: ReactNode;
|
|
20
22
|
/** DEPRECATED, DO NOT USE */
|
|
@@ -42,4 +44,4 @@ export interface AppToolbarProps extends CommonProps {
|
|
|
42
44
|
/** URL of the page the primary logo link will go to */
|
|
43
45
|
primaryLogoHref?: string;
|
|
44
46
|
}
|
|
45
|
-
export declare const DotAppToolbar: ({ appName, appLogo, appLogoSmall, ariaLabel, avatar, borderColor, children, className, closeMenuOnItemClick, customLogo, "data-testid": dataTestId, dense, navItems, mainMenu, mainMenuItems, mainMenuWidth, primaryLogoHref, }: AppToolbarProps) => JSX.Element;
|
|
47
|
+
export declare const DotAppToolbar: ({ appName, appLogo, appLogoHref, appLogoSmall, ariaLabel, avatar, borderColor, children, className, closeMenuOnItemClick, customLogo, "data-testid": dataTestId, dense, navItems, mainMenu, mainMenuItems, mainMenuWidth, primaryLogoHref, }: AppToolbarProps) => JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ListItemProps, ListProps, NestedListProps } from './utils/models';
|
|
3
3
|
export declare const DotList: ({ ariaLabel, children, className, component, "data-testid": dataTestId, dense, disablePadding, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, width, }: ListProps) => JSX.Element;
|
|
4
|
-
export declare const DotListItem: ({ ariaLabel, className, component, "data-testid": dataTestId, divider, endIcon, endIconId, href, isOpened, onClick, onMenuLeave, index, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, startIconId, target, text, title, tooltip, }: ListItemProps) => JSX.Element;
|
|
4
|
+
export declare const DotListItem: ({ ariaLabel, className, component, "data-testid": dataTestId, divider, endIcon, endIconId, href, isOpened, onClick, onMenuLeave, index, items, menuPlacement, nestedDrawerLeftSpacing, nestedListType, primaryText, secondaryText, selected, startIcon, startIconId, target, text, title, tooltip, tooltipPlacement, }: ListItemProps) => JSX.Element;
|
|
5
5
|
export declare const NestedList: ({ ariaLabel, anchorEl, "data-testid": dataTestId, items, menuPlacement, nestedDrawerLeftSpacing, onMenuLeave, open, parentItemIndex, type, }: NestedListProps) => JSX.Element;
|
|
@@ -2,6 +2,7 @@ import { ElementType, KeyboardEvent, MouseEvent, ReactNode } from 'react';
|
|
|
2
2
|
import { CommonProps } from '../../CommonProps';
|
|
3
3
|
import { PopperPlacement } from '../../menu/Menu';
|
|
4
4
|
import { LinkTarget } from '../../link/Link';
|
|
5
|
+
import { tooltipPlacement } from '../../tooltip/Tooltip';
|
|
5
6
|
export declare type NestedListType = 'drawer' | 'expandable' | 'menu';
|
|
6
7
|
export interface ListProps extends CommonProps {
|
|
7
8
|
/** string or JSX element that is displayed inside the list */
|
|
@@ -69,6 +70,8 @@ export interface ListItemProps extends CommonProps {
|
|
|
69
70
|
title?: string;
|
|
70
71
|
/** Tooltip text displayed on hover */
|
|
71
72
|
tooltip?: string;
|
|
73
|
+
/** Tooltip placement displayed on hover */
|
|
74
|
+
tooltipPlacement?: tooltipPlacement;
|
|
72
75
|
}
|
|
73
76
|
export interface NestedListProps extends CommonProps {
|
|
74
77
|
/** Element that menu is attached to */
|