@digital-ai/dot-components 1.5.2 → 1.5.3
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,25 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [Current](https://github.com/digital-ai/dot-components/tree/HEAD)
|
|
4
|
+
|
|
5
|
+
[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.5.2...HEAD)
|
|
6
|
+
|
|
7
|
+
**Features:**
|
|
8
|
+
|
|
9
|
+
- `Sidebar` Ability to view the sub nav items without expanding the DotSidebar [\#787](https://github.com/digital-ai/dot-components/issues/787)
|
|
10
|
+
|
|
11
|
+
**Fixed bugs:**
|
|
12
|
+
|
|
13
|
+
- Circular dependency on `useBreadcrumbsObserver` [\#881](https://github.com/digital-ai/dot-components/issues/881)
|
|
14
|
+
- `Sidebar` Collapsed sidebar with long divider titles [\#801](https://github.com/digital-ai/dot-components/issues/801)
|
|
15
|
+
- `List` Extended sidenav should open if custom onClick handler is supplied [\#767](https://github.com/digital-ai/dot-components/issues/767)
|
|
16
|
+
- D-19321: `Breadcrumbs` - Circular dependency on `useBreadcrumbsObserver` [\#882](https://github.com/digital-ai/dot-components/pull/882) ([dmiletic85](https://github.com/dmiletic85))
|
|
17
|
+
- S-79458: `Sidebar` & `List` updates [\#872](https://github.com/digital-ai/dot-components/pull/872) ([CWSites](https://github.com/CWSites))
|
|
18
|
+
|
|
19
|
+
**Merged pull requests:**
|
|
20
|
+
|
|
21
|
+
- S-80787: include changelog generation with release [\#877](https://github.com/digital-ai/dot-components/pull/877) ([CWSites](https://github.com/CWSites))
|
|
22
|
+
|
|
3
23
|
## [1.5.2](https://github.com/digital-ai/dot-components/tree/1.5.2) (12/17/2021)
|
|
4
24
|
|
|
5
25
|
[Full Changelog](https://github.com/digital-ai/dot-components/compare/1.5.1...1.5.2)
|
package/dot-components.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import React__default, { useEffect, useState, useRef, useMemo, Fragment, useContext, createContext } from 'react';
|
|
3
|
-
import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, Divider, AccordionActions, Toolbar, StylesProvider, MuiThemeProvider, IconButton, Link, Avatar, Drawer, CircularProgress, Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, List, ListItem, ListItemText, Collapse, ListSubheader,
|
|
3
|
+
import { Tooltip, Icon, Typography, Accordion, AccordionSummary, AccordionDetails, Divider, AccordionActions, Toolbar, StylesProvider, MuiThemeProvider, IconButton, Link, Avatar, Drawer, CircularProgress, Popper, Grow, Paper, ClickAwayListener, MenuList, MenuItem, List, ListItem, ListItemIcon, ListItemText, Collapse, ListSubheader, useMediaQuery, Chip, InputAdornment, TextField, Button, darken, Badge, Breadcrumbs, Card, CardContent, CardHeader, FormControlLabel, Checkbox, FormControl, FormGroup, FormLabel, FormHelperText, Dialog, DialogTitle, DialogContent, DialogActions, useTheme, RadioGroup, Radio, Switch, Snackbar, ButtonGroup, TableContainer, TableCell, TableRow, TableBody, TableHead, TableSortLabel, TablePagination, Table, Tabs, Tab } from '@material-ui/core';
|
|
4
4
|
import styled, { css, createGlobalStyle, ThemeProvider } from 'styled-components';
|
|
5
5
|
import { Alert, Autocomplete, AvatarGroup, ToggleButtonGroup, ToggleButton, Skeleton } from '@material-ui/lab';
|
|
6
6
|
import { createTheme, alpha } from '@material-ui/core/styles';
|
|
@@ -1547,7 +1547,7 @@ var StyledList = styled(List)(_templateObject$B || (_templateObject$B = _taggedT
|
|
|
1547
1547
|
});
|
|
1548
1548
|
var StyledListItem = styled(ListItem)(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref2) {
|
|
1549
1549
|
var theme = _ref2.theme;
|
|
1550
|
-
return css(["&.", "{&.", "{padding:0;}p.MuiTypography-root{margin-bottom:0;}.", "{align-items:center;display:flex;flex-grow:2;}.", " .MuiIcon-root{margin-right:", "px;}.dot-
|
|
1550
|
+
return css(["&.", "{&.", "{padding:0;}p.MuiTypography-root{margin-bottom:0;}.", "{align-items:center;display:flex;flex-grow:2;}.", " .MuiIcon-root{margin-right:", "px;}.dot-icon i:before{color:", ";}}"], listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary);
|
|
1551
1551
|
});
|
|
1552
1552
|
|
|
1553
1553
|
var CreateUUID = function CreateUUID() {
|
|
@@ -1595,9 +1595,6 @@ var NestedList = function NestedList(_ref) {
|
|
|
1595
1595
|
title = item.title,
|
|
1596
1596
|
tooltip = item.tooltip,
|
|
1597
1597
|
text = item.text;
|
|
1598
|
-
var startIcon = /*#__PURE__*/React__default.createElement(DotIcon, {
|
|
1599
|
-
iconId: startIconId
|
|
1600
|
-
});
|
|
1601
1598
|
return {
|
|
1602
1599
|
children: /*#__PURE__*/React__default.createElement(DotTooltip, {
|
|
1603
1600
|
key: parentItemIndex + "-" + index + "-tooltip",
|
|
@@ -1612,7 +1609,9 @@ var NestedList = function NestedList(_ref) {
|
|
|
1612
1609
|
target: target
|
|
1613
1610
|
}, /*#__PURE__*/React__default.createElement("span", {
|
|
1614
1611
|
className: flyoutSpanClasses
|
|
1615
|
-
}, startIconId &&
|
|
1612
|
+
}, startIconId && /*#__PURE__*/React__default.createElement(DotIcon, {
|
|
1613
|
+
iconId: startIconId
|
|
1614
|
+
}), /*#__PURE__*/React__default.createElement(DotTypography, {
|
|
1616
1615
|
variant: "body1"
|
|
1617
1616
|
}, text)))),
|
|
1618
1617
|
classes: '',
|
|
@@ -1759,7 +1758,7 @@ var DotList = function DotList(_ref3) {
|
|
|
1759
1758
|
primaryText: item.primaryText,
|
|
1760
1759
|
secondaryText: item.secondaryText,
|
|
1761
1760
|
selected: item.selected,
|
|
1762
|
-
startIconId: item.startIconId,
|
|
1761
|
+
startIconId: item.startIconId || 'block',
|
|
1763
1762
|
target: item.target,
|
|
1764
1763
|
text: item.text,
|
|
1765
1764
|
title: item.title,
|
|
@@ -1801,6 +1800,7 @@ var DotListItem = function DotListItem(_ref4) {
|
|
|
1801
1800
|
anchorEl = _useState2[0],
|
|
1802
1801
|
setAnchorEl = _useState2[1];
|
|
1803
1802
|
|
|
1803
|
+
var showEndIcon = endIconId || hasChildren;
|
|
1804
1804
|
var rootClasses = useStylesWithRootClass(listItemRootClass, className, isOpened ? 'open' : '');
|
|
1805
1805
|
useEffect(function () {
|
|
1806
1806
|
// deprecation warnings
|
|
@@ -1825,9 +1825,7 @@ var DotListItem = function DotListItem(_ref4) {
|
|
|
1825
1825
|
onClick(event);
|
|
1826
1826
|
}
|
|
1827
1827
|
|
|
1828
|
-
|
|
1829
|
-
toggleOpen(event);
|
|
1830
|
-
}
|
|
1828
|
+
toggleOpen(event);
|
|
1831
1829
|
};
|
|
1832
1830
|
|
|
1833
1831
|
var handleMenuLeave = function handleMenuLeave() {
|
|
@@ -1847,14 +1845,6 @@ var DotListItem = function DotListItem(_ref4) {
|
|
|
1847
1845
|
return 'chevron-down';
|
|
1848
1846
|
};
|
|
1849
1847
|
|
|
1850
|
-
var startIcon = /*#__PURE__*/React__default.createElement(ListItemIcon, null, /*#__PURE__*/React__default.createElement(DotIcon, {
|
|
1851
|
-
iconId: startIconId
|
|
1852
|
-
}));
|
|
1853
|
-
var endIcon = /*#__PURE__*/React__default.createElement(ListItemIcon, {
|
|
1854
|
-
className: "dot-list-item-end-icon"
|
|
1855
|
-
}, /*#__PURE__*/React__default.createElement(DotIcon, {
|
|
1856
|
-
iconId: endIconId
|
|
1857
|
-
}));
|
|
1858
1848
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DotTooltip, {
|
|
1859
1849
|
"data-testid": dataTestId + "-tooltip",
|
|
1860
1850
|
placement: "top-start",
|
|
@@ -1874,20 +1864,16 @@ var DotListItem = function DotListItem(_ref4) {
|
|
|
1874
1864
|
target: target
|
|
1875
1865
|
}, /*#__PURE__*/React__default.createElement("span", {
|
|
1876
1866
|
className: listItemLinkClassName
|
|
1877
|
-
}, startIconId &&
|
|
1867
|
+
}, startIconId && /*#__PURE__*/React__default.createElement(ListItemIcon, null, /*#__PURE__*/React__default.createElement(DotIcon, {
|
|
1868
|
+
iconId: startIconId
|
|
1869
|
+
})), primaryText && secondaryText ? /*#__PURE__*/React__default.createElement(ListItemText, {
|
|
1878
1870
|
primary: primaryText,
|
|
1879
1871
|
secondary: secondaryText
|
|
1880
1872
|
}) : /*#__PURE__*/React__default.createElement(DotTypography, {
|
|
1881
1873
|
variant: "body1"
|
|
1882
|
-
}, text)),
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
onClick: toggleOpen,
|
|
1886
|
-
underline: "none"
|
|
1887
|
-
}, /*#__PURE__*/React__default.createElement(DotIcon, {
|
|
1888
|
-
className: "toggle-display",
|
|
1889
|
-
iconId: getChevronIcon()
|
|
1890
|
-
})) : endIconId && endIcon)), hasChildren && /*#__PURE__*/React__default.createElement(NestedList, {
|
|
1874
|
+
}, text)), showEndIcon && /*#__PURE__*/React__default.createElement(DotIcon, {
|
|
1875
|
+
iconId: hasChildren ? getChevronIcon() : endIconId
|
|
1876
|
+
}))), hasChildren && /*#__PURE__*/React__default.createElement(NestedList, {
|
|
1891
1877
|
anchorEl: anchorEl,
|
|
1892
1878
|
ariaLabel: "nested list",
|
|
1893
1879
|
items: items,
|
|
@@ -1983,7 +1969,7 @@ var _templateObject$A;
|
|
|
1983
1969
|
var rootClassName$x = 'dot-sidebar';
|
|
1984
1970
|
var StyledSidebar = styled.aside(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref) {
|
|
1985
1971
|
var theme = _ref.theme;
|
|
1986
|
-
return 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;.dot-icon{margin-right:", "px;width:40px;height:40px;}&:hover{background-color:", ";}}hr.MuiDivider-root{background-color:", ";margin:", ";}.
|
|
1972
|
+
return 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;.dot-icon{margin-right:", "px;width:40px;height:40px;}&:hover{background-color:", ";}}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{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;}}.go-back .dot-icon{margin:", ";}.powered-by{align-items:center;}}}"], rootClassName$x, 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(2), theme.palette.grey[100], 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.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), theme.spacing(0, 1));
|
|
1987
1973
|
});
|
|
1988
1974
|
|
|
1989
1975
|
var Brand = function Brand(_ref) {
|
|
@@ -2034,7 +2020,8 @@ var DotSidebar = function DotSidebar(_ref3) {
|
|
|
2034
2020
|
className = _ref3.className,
|
|
2035
2021
|
_ref3$collapsable = _ref3.collapsable,
|
|
2036
2022
|
collapsable = _ref3$collapsable === void 0 ? false : _ref3$collapsable,
|
|
2037
|
-
|
|
2023
|
+
_ref3$dataTestid = _ref3['data-testid'],
|
|
2024
|
+
dataTestId = _ref3$dataTestid === void 0 ? 'primaryNav' : _ref3$dataTestid,
|
|
2038
2025
|
_ref3$displayAppLogo = _ref3.displayAppLogo,
|
|
2039
2026
|
displayAppLogo = _ref3$displayAppLogo === void 0 ? false : _ref3$displayAppLogo,
|
|
2040
2027
|
_ref3$displayBrand = _ref3.displayBrand,
|
|
@@ -2063,6 +2050,7 @@ var DotSidebar = function DotSidebar(_ref3) {
|
|
|
2063
2050
|
var hasAppLogo = appLogo !== null && displayAppLogo;
|
|
2064
2051
|
var hasBackItem = goBack && backItem;
|
|
2065
2052
|
var displayHeader = title || hasAppLogo;
|
|
2053
|
+
var openClass = isOpen ? 'open' : 'collapsed';
|
|
2066
2054
|
useEffect(function () {
|
|
2067
2055
|
setIsOpen(open);
|
|
2068
2056
|
}, [open]);
|
|
@@ -2074,12 +2062,12 @@ var DotSidebar = function DotSidebar(_ref3) {
|
|
|
2074
2062
|
setIsOpen(!isOpen);
|
|
2075
2063
|
};
|
|
2076
2064
|
|
|
2077
|
-
var sidebarClasses = useStylesWithRootClass('side-nav',
|
|
2078
|
-
var rootClasses = useStylesWithRootClass(rootClassName$x,
|
|
2065
|
+
var sidebarClasses = useStylesWithRootClass('side-nav', openClass);
|
|
2066
|
+
var rootClasses = useStylesWithRootClass(rootClassName$x, openClass, className);
|
|
2079
2067
|
return /*#__PURE__*/React__default.createElement(StyledSidebar, {
|
|
2080
2068
|
"aria-label": ariaLabel,
|
|
2081
2069
|
className: rootClasses,
|
|
2082
|
-
"data-testid":
|
|
2070
|
+
"data-testid": dataTestId,
|
|
2083
2071
|
style: {
|
|
2084
2072
|
width: sidebarWidth
|
|
2085
2073
|
}
|
|
@@ -2100,7 +2088,7 @@ var DotSidebar = function DotSidebar(_ref3) {
|
|
|
2100
2088
|
className: "go-back"
|
|
2101
2089
|
}, /*#__PURE__*/React__default.createElement(DotIcon, {
|
|
2102
2090
|
"data-testid": "back-button",
|
|
2103
|
-
iconId: backItem.iconId
|
|
2091
|
+
iconId: backItem.iconId || 'back'
|
|
2104
2092
|
}), /*#__PURE__*/React__default.createElement(DotTypography, {
|
|
2105
2093
|
variant: "h4"
|
|
2106
2094
|
}, backItem.text))), navItems.length > 0 && /*#__PURE__*/React__default.createElement(DotList, {
|
|
@@ -2113,7 +2101,9 @@ var DotSidebar = function DotSidebar(_ref3) {
|
|
|
2113
2101
|
nestedDrawerLeftSpacing: sidebarWidth,
|
|
2114
2102
|
nestedListType: nestedListType,
|
|
2115
2103
|
width: "100%"
|
|
2116
|
-
}), children
|
|
2104
|
+
}), children && /*#__PURE__*/React__default.createElement("div", {
|
|
2105
|
+
className: "child"
|
|
2106
|
+
}, children), collapsable && /*#__PURE__*/React__default.createElement("div", {
|
|
2117
2107
|
className: "toggle-nav"
|
|
2118
2108
|
}, /*#__PURE__*/React__default.createElement(DotTooltip, {
|
|
2119
2109
|
title: isOpen ? 'Collapse' : 'Expand'
|
|
@@ -2904,6 +2894,8 @@ var mapBreadcrumbItems = function mapBreadcrumbItems(items, refs, itemsAfterColl
|
|
|
2904
2894
|
});
|
|
2905
2895
|
};
|
|
2906
2896
|
|
|
2897
|
+
var MIN_AVAILABLE_SPACE = 60;
|
|
2898
|
+
var ITEMS_SEPARATOR_SPACE = 20;
|
|
2907
2899
|
var useBreadcrumbsResizer = function useBreadcrumbsResizer(breadcrumbsRightCoord, breadcrumbItemsProps, refs) {
|
|
2908
2900
|
var firstItemRef = refs.firstItemRef,
|
|
2909
2901
|
lastItemRef = refs.lastItemRef;
|
|
@@ -2955,8 +2947,6 @@ var useBreadcrumbsResizer = function useBreadcrumbsResizer(breadcrumbsRightCoord
|
|
|
2955
2947
|
return [breadcrumbsSettings];
|
|
2956
2948
|
};
|
|
2957
2949
|
|
|
2958
|
-
var MIN_AVAILABLE_SPACE = 60;
|
|
2959
|
-
var ITEMS_SEPARATOR_SPACE = 20;
|
|
2960
2950
|
var useBreadcrumbsObserver = function useBreadcrumbsObserver(items, maxItems) {
|
|
2961
2951
|
var breadcrumbRef = useRef();
|
|
2962
2952
|
var firstItemRef = useRef();
|
package/dot-components.umd.js
CHANGED
|
@@ -1637,7 +1637,7 @@
|
|
|
1637
1637
|
});
|
|
1638
1638
|
var StyledListItem = styled__default["default"](core.ListItem)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
1639
1639
|
var theme = _a.theme;
|
|
1640
|
-
return styled.css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n &.", " {\n &.", " {\n padding: 0;\n }\n\n p.MuiTypography-root {\n margin-bottom: 0;\n }\n\n .", " {\n align-items: center;\n display: flex;\n flex-grow: 2;\n }\n\n .", " .MuiIcon-root {\n margin-right: ", "px;\n }\n\n .dot-
|
|
1640
|
+
return styled.css(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n &.", " {\n &.", " {\n padding: 0;\n }\n\n p.MuiTypography-root {\n margin-bottom: 0;\n }\n\n .", " {\n align-items: center;\n display: flex;\n flex-grow: 2;\n }\n\n .", " .MuiIcon-root {\n margin-right: ", "px;\n }\n\n .dot-icon i:before {\n color: ", ";\n }\n }\n "], ["\n &.", " {\n &.", " {\n padding: 0;\n }\n\n p.MuiTypography-root {\n margin-bottom: 0;\n }\n\n .", " {\n align-items: center;\n display: flex;\n flex-grow: 2;\n }\n\n .", " .MuiIcon-root {\n margin-right: ", "px;\n }\n\n .dot-icon i:before {\n color: ", ";\n }\n }\n "])), listItemRootClass, flyoutListItemClassName, listItemLinkClassName, flyoutItemLinkClassName, theme.spacing(4), theme.palette.text.primary);
|
|
1641
1641
|
});
|
|
1642
1642
|
var templateObject_1$B, templateObject_2$z, templateObject_3$8, templateObject_4$5;
|
|
1643
1643
|
|
|
@@ -1686,9 +1686,6 @@
|
|
|
1686
1686
|
title = item.title,
|
|
1687
1687
|
tooltip = item.tooltip,
|
|
1688
1688
|
text = item.text;
|
|
1689
|
-
var startIcon = /*#__PURE__*/React__default["default"].createElement(DotIcon, {
|
|
1690
|
-
iconId: startIconId
|
|
1691
|
-
});
|
|
1692
1689
|
return {
|
|
1693
1690
|
children: /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
|
|
1694
1691
|
key: parentItemIndex + "-" + index + "-tooltip",
|
|
@@ -1703,7 +1700,9 @@
|
|
|
1703
1700
|
target: target
|
|
1704
1701
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
1705
1702
|
className: flyoutSpanClasses
|
|
1706
|
-
}, startIconId &&
|
|
1703
|
+
}, startIconId && /*#__PURE__*/React__default["default"].createElement(DotIcon, {
|
|
1704
|
+
iconId: startIconId
|
|
1705
|
+
}), /*#__PURE__*/React__default["default"].createElement(DotTypography, {
|
|
1707
1706
|
variant: "body1"
|
|
1708
1707
|
}, text)))),
|
|
1709
1708
|
classes: '',
|
|
@@ -1850,7 +1849,7 @@
|
|
|
1850
1849
|
primaryText: item.primaryText,
|
|
1851
1850
|
secondaryText: item.secondaryText,
|
|
1852
1851
|
selected: item.selected,
|
|
1853
|
-
startIconId: item.startIconId,
|
|
1852
|
+
startIconId: item.startIconId || 'block',
|
|
1854
1853
|
target: item.target,
|
|
1855
1854
|
text: item.text,
|
|
1856
1855
|
title: item.title,
|
|
@@ -1892,6 +1891,7 @@
|
|
|
1892
1891
|
anchorEl = _e[0],
|
|
1893
1892
|
setAnchorEl = _e[1];
|
|
1894
1893
|
|
|
1894
|
+
var showEndIcon = endIconId || hasChildren;
|
|
1895
1895
|
var rootClasses = useStylesWithRootClass(listItemRootClass, className, isOpened ? 'open' : '');
|
|
1896
1896
|
React.useEffect(function () {
|
|
1897
1897
|
// deprecation warnings
|
|
@@ -1916,9 +1916,7 @@
|
|
|
1916
1916
|
onClick(event);
|
|
1917
1917
|
}
|
|
1918
1918
|
|
|
1919
|
-
|
|
1920
|
-
toggleOpen(event);
|
|
1921
|
-
}
|
|
1919
|
+
toggleOpen(event);
|
|
1922
1920
|
};
|
|
1923
1921
|
|
|
1924
1922
|
var handleMenuLeave = function handleMenuLeave() {
|
|
@@ -1938,14 +1936,6 @@
|
|
|
1938
1936
|
return 'chevron-down';
|
|
1939
1937
|
};
|
|
1940
1938
|
|
|
1941
|
-
var startIcon = /*#__PURE__*/React__default["default"].createElement(core.ListItemIcon, null, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
|
|
1942
|
-
iconId: startIconId
|
|
1943
|
-
}));
|
|
1944
|
-
var endIcon = /*#__PURE__*/React__default["default"].createElement(core.ListItemIcon, {
|
|
1945
|
-
className: "dot-list-item-end-icon"
|
|
1946
|
-
}, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
|
|
1947
|
-
iconId: endIconId
|
|
1948
|
-
}));
|
|
1949
1939
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
|
|
1950
1940
|
"data-testid": dataTestId + "-tooltip",
|
|
1951
1941
|
placement: "top-start",
|
|
@@ -1965,20 +1955,16 @@
|
|
|
1965
1955
|
target: target
|
|
1966
1956
|
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
1967
1957
|
className: listItemLinkClassName
|
|
1968
|
-
}, startIconId &&
|
|
1958
|
+
}, startIconId && /*#__PURE__*/React__default["default"].createElement(core.ListItemIcon, null, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
|
|
1959
|
+
iconId: startIconId
|
|
1960
|
+
})), primaryText && secondaryText ? /*#__PURE__*/React__default["default"].createElement(core.ListItemText, {
|
|
1969
1961
|
primary: primaryText,
|
|
1970
1962
|
secondary: secondaryText
|
|
1971
1963
|
}) : /*#__PURE__*/React__default["default"].createElement(DotTypography, {
|
|
1972
1964
|
variant: "body1"
|
|
1973
|
-
}, text)),
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
onClick: toggleOpen,
|
|
1977
|
-
underline: "none"
|
|
1978
|
-
}, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
|
|
1979
|
-
className: "toggle-display",
|
|
1980
|
-
iconId: getChevronIcon()
|
|
1981
|
-
})) : endIconId && endIcon)), hasChildren && /*#__PURE__*/React__default["default"].createElement(NestedList, {
|
|
1965
|
+
}, text)), showEndIcon && /*#__PURE__*/React__default["default"].createElement(DotIcon, {
|
|
1966
|
+
iconId: hasChildren ? getChevronIcon() : endIconId
|
|
1967
|
+
}))), hasChildren && /*#__PURE__*/React__default["default"].createElement(NestedList, {
|
|
1982
1968
|
anchorEl: anchorEl,
|
|
1983
1969
|
ariaLabel: "nested list",
|
|
1984
1970
|
items: items,
|
|
@@ -2073,7 +2059,7 @@
|
|
|
2073
2059
|
var rootClassName$x = 'dot-sidebar';
|
|
2074
2060
|
var StyledSidebar = styled__default["default"].aside(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
2075
2061
|
var theme = _a.theme;
|
|
2076
|
-
return styled.css(templateObject_1$A || (templateObject_1$A = __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 .dot-icon {\n margin-right: ", "px;\n width: 40px;\n height: 40px;\n }\n\n &:hover {\n background-color: ", ";\n }\n }\n\n hr.MuiDivider-root {\n background-color: ", ";\n margin: ", ";\n }\n\n .MuiTypography-subtitle2 {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n margin: ", ";\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 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 &: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 width: 40px;\n }\n &.Mui-focusVisible {\n box-shadow: inset 0 0 0 2px ", ";\n border: 2px solid ", ";\n }\n }\n\n li.dot-list-item .dot-typography {\n white-space: nowrap;\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 margin: ", ";\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 header .dot-app-logo {\n text-align: center;\n }\n\n ul.side-nav {\n width: 56px;\n li.MuiListSubheader-root .MuiTypography-root {\n opacity: 0;\n }\n .dot-list-item {\n margin-left: 0;\n\n .dot-icon {\n margin-left: ", "px;\n }\n }\n\n .toggle-nav {\n align-self: center;\n }\n }\n\n .go-back .dot-icon {\n margin: ", ";\n }\n\n .go-back .MuiTypography-root,\n .MuiListItem-divider .dot-list-item-link,\n .dot-drawer {\n display: none;\n }\n\n .powered-by {\n align-items: center;\n\n .company-name,\n p.desc {\n display: none;\n }\n\n .d-icon {\n display: block;\n }\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 .dot-icon {\n margin-right: ", "px;\n width: 40px;\n height: 40px;\n }\n\n &:hover {\n background-color: ", ";\n }\n }\n\n hr.MuiDivider-root {\n background-color: ", ";\n margin: ", ";\n }\n\n .MuiTypography-subtitle2 {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n margin: ", ";\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 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 &: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 width: 40px;\n }\n &.Mui-focusVisible {\n box-shadow: inset 0 0 0 2px ", ";\n border: 2px solid ", ";\n }\n }\n\n li.dot-list-item .dot-typography {\n white-space: nowrap;\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 margin: ", ";\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 header .dot-app-logo {\n text-align: center;\n }\n\n ul.side-nav {\n width: 56px;\n li.MuiListSubheader-root .MuiTypography-root {\n opacity: 0;\n }\n .dot-list-item {\n margin-left: 0;\n\n .dot-icon {\n margin-left: ", "px;\n }\n }\n\n .toggle-nav {\n align-self: center;\n }\n }\n\n .go-back .dot-icon {\n margin: ", ";\n }\n\n .go-back .MuiTypography-root,\n .MuiListItem-divider .dot-list-item-link,\n .dot-drawer {\n display: none;\n }\n\n .powered-by {\n align-items: center;\n\n .company-name,\n p.desc {\n display: none;\n }\n\n .d-icon {\n display: block;\n }\n }\n }\n }\n "])), rootClassName$x, 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(2), theme.palette.grey[100], 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.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.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.palette.layer.n0, theme.palette.layer.n900, 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.palette.product !== 'agility' && theme.spacing(0, 1), theme.spacing(1), theme.spacing(1), theme.palette.product === 'agility' && theme.spacing(2, 0), theme.spacing(1), theme.spacing(0, 1));
|
|
2062
|
+
return styled.css(templateObject_1$A || (templateObject_1$A = __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 .dot-icon {\n margin-right: ", "px;\n width: 40px;\n height: 40px;\n }\n\n &:hover {\n background-color: ", ";\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 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 .go-back .dot-icon {\n margin: ", ";\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 .dot-icon {\n margin-right: ", "px;\n width: 40px;\n height: 40px;\n }\n\n &:hover {\n background-color: ", ";\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 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 .go-back .dot-icon {\n margin: ", ";\n }\n\n .powered-by {\n align-items: center;\n }\n }\n }\n "])), rootClassName$x, 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(2), theme.palette.grey[100], 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.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), theme.spacing(0, 1));
|
|
2077
2063
|
});
|
|
2078
2064
|
var templateObject_1$A, templateObject_2$y;
|
|
2079
2065
|
|
|
@@ -2125,35 +2111,37 @@
|
|
|
2125
2111
|
className = _a.className,
|
|
2126
2112
|
_b = _a.collapsable,
|
|
2127
2113
|
collapsable = _b === void 0 ? false : _b,
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2114
|
+
_c = _a["data-testid"],
|
|
2115
|
+
dataTestId = _c === void 0 ? 'primaryNav' : _c,
|
|
2116
|
+
_d = _a.displayAppLogo,
|
|
2117
|
+
displayAppLogo = _d === void 0 ? false : _d,
|
|
2118
|
+
_e = _a.displayBrand,
|
|
2119
|
+
displayBrand = _e === void 0 ? true : _e,
|
|
2120
|
+
_f = _a.goBack,
|
|
2121
|
+
goBack = _f === void 0 ? false : _f,
|
|
2122
|
+
_g = _a.navItems,
|
|
2123
|
+
navItems = _g === void 0 ? [] : _g,
|
|
2124
|
+
_h = _a.nestedListType,
|
|
2125
|
+
nestedListType = _h === void 0 ? 'expandable' : _h,
|
|
2126
|
+
_j = _a.open,
|
|
2127
|
+
open = _j === void 0 ? true : _j,
|
|
2141
2128
|
title = _a.title,
|
|
2142
2129
|
titleAvatarProps = _a.titleAvatarProps,
|
|
2143
|
-
|
|
2144
|
-
width =
|
|
2130
|
+
_k = _a.width,
|
|
2131
|
+
width = _k === void 0 ? 240 : _k;
|
|
2145
2132
|
|
|
2146
|
-
var
|
|
2147
|
-
isOpen =
|
|
2148
|
-
setIsOpen =
|
|
2133
|
+
var _l = React.useState(open),
|
|
2134
|
+
isOpen = _l[0],
|
|
2135
|
+
setIsOpen = _l[1];
|
|
2149
2136
|
|
|
2150
|
-
var
|
|
2151
|
-
sidebarWidth =
|
|
2152
|
-
setSidebarWidth =
|
|
2137
|
+
var _m = React.useState(width),
|
|
2138
|
+
sidebarWidth = _m[0],
|
|
2139
|
+
setSidebarWidth = _m[1];
|
|
2153
2140
|
|
|
2154
2141
|
var hasAppLogo = appLogo !== null && displayAppLogo;
|
|
2155
2142
|
var hasBackItem = goBack && backItem;
|
|
2156
2143
|
var displayHeader = title || hasAppLogo;
|
|
2144
|
+
var openClass = isOpen ? 'open' : 'collapsed';
|
|
2157
2145
|
React.useEffect(function () {
|
|
2158
2146
|
setIsOpen(open);
|
|
2159
2147
|
}, [open]);
|
|
@@ -2165,12 +2153,12 @@
|
|
|
2165
2153
|
setIsOpen(!isOpen);
|
|
2166
2154
|
};
|
|
2167
2155
|
|
|
2168
|
-
var sidebarClasses = useStylesWithRootClass('side-nav',
|
|
2169
|
-
var rootClasses = useStylesWithRootClass(rootClassName$x,
|
|
2156
|
+
var sidebarClasses = useStylesWithRootClass('side-nav', openClass);
|
|
2157
|
+
var rootClasses = useStylesWithRootClass(rootClassName$x, openClass, className);
|
|
2170
2158
|
return /*#__PURE__*/React__default["default"].createElement(StyledSidebar, {
|
|
2171
2159
|
"aria-label": ariaLabel,
|
|
2172
2160
|
className: rootClasses,
|
|
2173
|
-
"data-testid":
|
|
2161
|
+
"data-testid": dataTestId,
|
|
2174
2162
|
style: {
|
|
2175
2163
|
width: sidebarWidth
|
|
2176
2164
|
}
|
|
@@ -2191,7 +2179,7 @@
|
|
|
2191
2179
|
className: "go-back"
|
|
2192
2180
|
}, /*#__PURE__*/React__default["default"].createElement(DotIcon, {
|
|
2193
2181
|
"data-testid": "back-button",
|
|
2194
|
-
iconId: backItem.iconId
|
|
2182
|
+
iconId: backItem.iconId || 'back'
|
|
2195
2183
|
}), /*#__PURE__*/React__default["default"].createElement(DotTypography, {
|
|
2196
2184
|
variant: "h4"
|
|
2197
2185
|
}, backItem.text))), navItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(DotList, {
|
|
@@ -2204,7 +2192,9 @@
|
|
|
2204
2192
|
nestedDrawerLeftSpacing: sidebarWidth,
|
|
2205
2193
|
nestedListType: nestedListType,
|
|
2206
2194
|
width: "100%"
|
|
2207
|
-
}), children
|
|
2195
|
+
}), children && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
2196
|
+
className: "child"
|
|
2197
|
+
}, children), collapsable && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
2208
2198
|
className: "toggle-nav"
|
|
2209
2199
|
}, /*#__PURE__*/React__default["default"].createElement(DotTooltip, {
|
|
2210
2200
|
title: isOpen ? 'Collapse' : 'Expand'
|
|
@@ -2997,6 +2987,8 @@
|
|
|
2997
2987
|
});
|
|
2998
2988
|
};
|
|
2999
2989
|
|
|
2990
|
+
var MIN_AVAILABLE_SPACE = 60;
|
|
2991
|
+
var ITEMS_SEPARATOR_SPACE = 20;
|
|
3000
2992
|
var useBreadcrumbsResizer = function useBreadcrumbsResizer(breadcrumbsRightCoord, breadcrumbItemsProps, refs) {
|
|
3001
2993
|
var firstItemRef = refs.firstItemRef,
|
|
3002
2994
|
lastItemRef = refs.lastItemRef;
|
|
@@ -3048,8 +3040,6 @@
|
|
|
3048
3040
|
return [breadcrumbsSettings];
|
|
3049
3041
|
};
|
|
3050
3042
|
|
|
3051
|
-
var MIN_AVAILABLE_SPACE = 60;
|
|
3052
|
-
var ITEMS_SEPARATOR_SPACE = 20;
|
|
3053
3043
|
var useBreadcrumbsObserver = function useBreadcrumbsObserver(items, maxItems) {
|
|
3054
3044
|
var breadcrumbRef = React.useRef();
|
|
3055
3045
|
var firstItemRef = React.useRef();
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { MutableRefObject } from 'react';
|
|
2
2
|
import { BreadcrumbItem } from '../Breadcrumbs';
|
|
3
|
-
export declare const MIN_AVAILABLE_SPACE = 60;
|
|
4
|
-
export declare const ITEMS_SEPARATOR_SPACE = 20;
|
|
5
3
|
interface BreadcrumbsObserverRefs {
|
|
6
4
|
breadcrumbRef: MutableRefObject<HTMLElement>;
|
|
7
5
|
firstItemRef: MutableRefObject<HTMLDivElement>;
|
|
@@ -12,5 +12,7 @@ interface BreadcrumbItemsProps {
|
|
|
12
12
|
items: Array<BreadcrumbItem>;
|
|
13
13
|
maxItems?: number;
|
|
14
14
|
}
|
|
15
|
+
export declare const MIN_AVAILABLE_SPACE = 60;
|
|
16
|
+
export declare const ITEMS_SEPARATOR_SPACE = 20;
|
|
15
17
|
export declare const useBreadcrumbsResizer: (breadcrumbsRightCoord: number, breadcrumbItemsProps: BreadcrumbItemsProps, refs: BreadcrumbsResizerRefs) => [MaxVisibleItems];
|
|
16
18
|
export {};
|