@elliemae/ds-left-navigation 2.1.0 → 2.2.0-alpha.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/cjs/LeftNavigation.js +49 -27
- package/cjs/LeftNavigation.js.map +7 -0
- package/cjs/LeftNavigationContext.js +44 -18
- package/cjs/LeftNavigationContext.js.map +7 -0
- package/cjs/common/getItemBackgroundStyle.js +47 -8
- package/cjs/common/getItemBackgroundStyle.js.map +7 -0
- package/cjs/common/getLeftBorderStyle.js +50 -8
- package/cjs/common/getLeftBorderStyle.js.map +7 -0
- package/cjs/common/getScrollbarStyle.js +55 -4
- package/cjs/common/getScrollbarStyle.js.map +7 -0
- package/cjs/common/index.js +30 -13
- package/cjs/common/index.js.map +7 -0
- package/cjs/configs/index.js +38 -10
- package/cjs/configs/index.js.map +7 -0
- package/cjs/configs/useLeftNavConfig.js +76 -72
- package/cjs/configs/useLeftNavConfig.js.map +7 -0
- package/cjs/configs/useLeftNavItems.js +66 -64
- package/cjs/configs/useLeftNavItems.js.map +7 -0
- package/cjs/configs/useLeftNavSmoothExpand.js +42 -21
- package/cjs/configs/useLeftNavSmoothExpand.js.map +7 -0
- package/cjs/exported-related/ChevronItem/index.js +42 -27
- package/cjs/exported-related/ChevronItem/index.js.map +7 -0
- package/cjs/exported-related/Icon/index.js +51 -34
- package/cjs/exported-related/Icon/index.js.map +7 -0
- package/cjs/exported-related/ItemRenderer/index.js +99 -94
- package/cjs/exported-related/ItemRenderer/index.js.map +7 -0
- package/cjs/exported-related/ItemRenderer/styled.js +83 -51
- package/cjs/exported-related/ItemRenderer/styled.js.map +7 -0
- package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js +57 -45
- package/cjs/exported-related/ItemRenderer/usePropsWithDefaults.js.map +7 -0
- package/cjs/exported-related/Notifications/index.js +81 -61
- package/cjs/exported-related/Notifications/index.js.map +7 -0
- package/cjs/exported-related/OpenWindowItem/index.js +49 -32
- package/cjs/exported-related/OpenWindowItem/index.js.map +7 -0
- package/cjs/exported-related/constants.js +53 -25
- package/cjs/exported-related/constants.js.map +7 -0
- package/cjs/exported-related/index.js +33 -23
- package/cjs/exported-related/index.js.map +7 -0
- package/cjs/hooks/index.js +30 -13
- package/cjs/hooks/index.js.map +7 -0
- package/cjs/hooks/useExpandableOnClickHandler.js +55 -26
- package/cjs/hooks/useExpandableOnClickHandler.js.map +7 -0
- package/cjs/hooks/useKeyboardNavigation.js +62 -54
- package/cjs/hooks/useKeyboardNavigation.js.map +7 -0
- package/cjs/hooks/useOpenableOnClickHandler.js +55 -26
- package/cjs/hooks/useOpenableOnClickHandler.js.map +7 -0
- package/cjs/hooks/useSelectFirstBodyItem.js +46 -30
- package/cjs/hooks/useSelectFirstBodyItem.js.map +7 -0
- package/cjs/index.d.js +27 -2
- package/cjs/index.d.js.map +7 -0
- package/cjs/index.js +41 -30
- package/cjs/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemControlledDrilldown/index.js +97 -103
- package/cjs/outOfTheBox/ItemControlledDrilldown/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js +49 -27
- package/cjs/outOfTheBox/ItemControlledDrilldown/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemHeader/index.js +95 -91
- package/cjs/outOfTheBox/ItemHeader/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemHeader/styled.js +49 -22
- package/cjs/outOfTheBox/ItemHeader/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemLink/index.js +75 -65
- package/cjs/outOfTheBox/ItemLink/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemLink/styled.js +41 -17
- package/cjs/outOfTheBox/ItemLink/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemSection/index.js +59 -63
- package/cjs/outOfTheBox/ItemSection/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemSection/styled.js +53 -23
- package/cjs/outOfTheBox/ItemSection/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemSeparator/index.js +56 -45
- package/cjs/outOfTheBox/ItemSeparator/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemSubmenu/index.js +95 -90
- package/cjs/outOfTheBox/ItemSubmenu/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemSubmenu/styled.js +49 -22
- package/cjs/outOfTheBox/ItemSubmenu/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemTextLabel/index.js +51 -52
- package/cjs/outOfTheBox/ItemTextLabel/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemTextLabel/styled.js +43 -23
- package/cjs/outOfTheBox/ItemTextLabel/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js +107 -113
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js +49 -27
- package/cjs/outOfTheBox/ItemUncontrolledDrilldown/styled.js.map +7 -0
- package/cjs/outOfTheBox/ItemWithDate/index.js +59 -54
- package/cjs/outOfTheBox/ItemWithDate/index.js.map +7 -0
- package/cjs/outOfTheBox/ItemWithDate/styled.js +49 -27
- package/cjs/outOfTheBox/ItemWithDate/styled.js.map +7 -0
- package/cjs/outOfTheBox/index.js +65 -50
- package/cjs/outOfTheBox/index.js.map +7 -0
- package/cjs/parts/LeftNavContent/index.js +75 -71
- package/cjs/parts/LeftNavContent/index.js.map +7 -0
- package/cjs/parts/LeftNavContent/styled.js +110 -50
- package/cjs/parts/LeftNavContent/styled.js.map +7 -0
- package/cjs/parts/LeftNavContentWithScrollbar/index.js +89 -79
- package/cjs/parts/LeftNavContentWithScrollbar/index.js.map +7 -0
- package/cjs/parts/LeftNavFooterItem/index.js +97 -80
- package/cjs/parts/LeftNavFooterItem/index.js.map +7 -0
- package/cjs/parts/LeftNavFooterItem/styled.js +89 -34
- package/cjs/parts/LeftNavFooterItem/styled.js.map +7 -0
- package/cjs/parts/LeftNavLoading/index.js +51 -33
- package/cjs/parts/LeftNavLoading/index.js.map +7 -0
- package/cjs/parts/OutOfTheBoxMapItem.js +49 -46
- package/cjs/parts/OutOfTheBoxMapItem.js.map +7 -0
- package/cjs/prop-types.js +58 -39
- package/cjs/prop-types.js.map +7 -0
- package/esm/LeftNavigation.js +17 -15
- package/esm/LeftNavigation.js.map +7 -0
- package/esm/LeftNavigationContext.js +15 -11
- package/esm/LeftNavigationContext.js.map +7 -0
- package/esm/common/getItemBackgroundStyle.js +20 -6
- package/esm/common/getItemBackgroundStyle.js.map +7 -0
- package/esm/common/getLeftBorderStyle.js +23 -6
- package/esm/common/getLeftBorderStyle.js.map +7 -0
- package/esm/common/getScrollbarStyle.js +28 -2
- package/esm/common/getScrollbarStyle.js.map +7 -0
- package/esm/common/index.js +5 -3
- package/esm/common/index.js.map +7 -0
- package/esm/configs/index.js +9 -2
- package/esm/configs/index.js.map +7 -0
- package/esm/configs/useLeftNavConfig.js +47 -63
- package/esm/configs/useLeftNavConfig.js.map +7 -0
- package/esm/configs/useLeftNavItems.js +33 -55
- package/esm/configs/useLeftNavItems.js.map +7 -0
- package/esm/configs/useLeftNavSmoothExpand.js +13 -12
- package/esm/configs/useLeftNavSmoothExpand.js.map +7 -0
- package/esm/exported-related/ChevronItem/index.js +13 -18
- package/esm/exported-related/ChevronItem/index.js.map +7 -0
- package/esm/exported-related/Icon/index.js +21 -24
- package/esm/exported-related/Icon/index.js.map +7 -0
- package/esm/exported-related/ItemRenderer/index.js +65 -80
- package/esm/exported-related/ItemRenderer/index.js.map +7 -0
- package/esm/exported-related/ItemRenderer/styled.js +56 -42
- package/esm/exported-related/ItemRenderer/styled.js.map +7 -0
- package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js +27 -36
- package/esm/exported-related/ItemRenderer/usePropsWithDefaults.js.map +7 -0
- package/esm/exported-related/Notifications/index.js +57 -50
- package/esm/exported-related/Notifications/index.js.map +7 -0
- package/esm/exported-related/OpenWindowItem/index.js +20 -22
- package/esm/exported-related/OpenWindowItem/index.js.map +7 -0
- package/esm/exported-related/constants.js +24 -17
- package/esm/exported-related/constants.js.map +7 -0
- package/esm/exported-related/index.js +8 -6
- package/esm/exported-related/index.js.map +7 -0
- package/esm/hooks/index.js +5 -3
- package/esm/hooks/index.js.map +7 -0
- package/esm/hooks/useExpandableOnClickHandler.js +26 -22
- package/esm/hooks/useExpandableOnClickHandler.js.map +7 -0
- package/esm/hooks/useKeyboardNavigation.js +30 -47
- package/esm/hooks/useKeyboardNavigation.js.map +7 -0
- package/esm/hooks/useOpenableOnClickHandler.js +26 -22
- package/esm/hooks/useOpenableOnClickHandler.js.map +7 -0
- package/esm/hooks/useSelectFirstBodyItem.js +17 -26
- package/esm/hooks/useSelectFirstBodyItem.js.map +7 -0
- package/esm/index.d.js +2 -1
- package/esm/index.d.js.map +7 -0
- package/esm/index.js +12 -8
- package/esm/index.js.map +7 -0
- package/esm/outOfTheBox/ItemControlledDrilldown/index.js +62 -87
- package/esm/outOfTheBox/ItemControlledDrilldown/index.js.map +7 -0
- package/esm/outOfTheBox/ItemControlledDrilldown/styled.js +20 -17
- package/esm/outOfTheBox/ItemControlledDrilldown/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemHeader/index.js +65 -80
- package/esm/outOfTheBox/ItemHeader/index.js.map +7 -0
- package/esm/outOfTheBox/ItemHeader/styled.js +20 -12
- package/esm/outOfTheBox/ItemHeader/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemLink/index.js +46 -55
- package/esm/outOfTheBox/ItemLink/index.js.map +7 -0
- package/esm/outOfTheBox/ItemLink/styled.js +12 -8
- package/esm/outOfTheBox/ItemLink/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemSection/index.js +30 -53
- package/esm/outOfTheBox/ItemSection/index.js.map +7 -0
- package/esm/outOfTheBox/ItemSection/styled.js +24 -13
- package/esm/outOfTheBox/ItemSection/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemSeparator/index.js +27 -35
- package/esm/outOfTheBox/ItemSeparator/index.js.map +7 -0
- package/esm/outOfTheBox/ItemSubmenu/index.js +65 -79
- package/esm/outOfTheBox/ItemSubmenu/index.js.map +7 -0
- package/esm/outOfTheBox/ItemSubmenu/styled.js +20 -12
- package/esm/outOfTheBox/ItemSubmenu/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemTextLabel/index.js +22 -43
- package/esm/outOfTheBox/ItemTextLabel/index.js.map +7 -0
- package/esm/outOfTheBox/ItemTextLabel/styled.js +14 -14
- package/esm/outOfTheBox/ItemTextLabel/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js +70 -95
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/index.js.map +7 -0
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js +20 -17
- package/esm/outOfTheBox/ItemUncontrolledDrilldown/styled.js.map +7 -0
- package/esm/outOfTheBox/ItemWithDate/index.js +30 -44
- package/esm/outOfTheBox/ItemWithDate/index.js.map +7 -0
- package/esm/outOfTheBox/ItemWithDate/styled.js +20 -17
- package/esm/outOfTheBox/ItemWithDate/styled.js.map +7 -0
- package/esm/outOfTheBox/index.js +25 -34
- package/esm/outOfTheBox/index.js.map +7 -0
- package/esm/parts/LeftNavContent/index.js +54 -64
- package/esm/parts/LeftNavContent/index.js.map +7 -0
- package/esm/parts/LeftNavContent/styled.js +81 -36
- package/esm/parts/LeftNavContent/styled.js.map +7 -0
- package/esm/parts/LeftNavContentWithScrollbar/index.js +56 -64
- package/esm/parts/LeftNavContentWithScrollbar/index.js.map +7 -0
- package/esm/parts/LeftNavFooterItem/index.js +73 -68
- package/esm/parts/LeftNavFooterItem/index.js.map +7 -0
- package/esm/parts/LeftNavFooterItem/styled.js +63 -24
- package/esm/parts/LeftNavFooterItem/styled.js.map +7 -0
- package/esm/parts/LeftNavLoading/index.js +22 -22
- package/esm/parts/LeftNavLoading/index.js.map +7 -0
- package/esm/parts/OutOfTheBoxMapItem.js +19 -35
- package/esm/parts/OutOfTheBoxMapItem.js.map +7 -0
- package/esm/prop-types.js +26 -29
- package/esm/prop-types.js.map +7 -0
- package/package.json +6 -6
|
@@ -1,42 +1,34 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
const StyledSeparator = /*#__PURE__*/styled.div.withConfig({
|
|
21
|
-
componentId: "sc-lpwxj6-0"
|
|
22
|
-
})(["height:1px;background-color:", ";width:auto;margin:", " 0;margin-left:", ";grid-column:span 3;"], props => props.theme.colors.neutral[100], props => props.theme.space.xxxs, props => props.theme.space.xxxs);
|
|
23
|
-
const ItemSeparator = props => {
|
|
24
|
-
const {
|
|
25
|
-
item
|
|
26
|
-
} = props;
|
|
27
|
-
return /*#__PURE__*/_jsx(ItemRenderer, {
|
|
28
|
-
item: _objectSpread(_objectSpread({}, item), {}, {
|
|
29
|
-
itemOpts: _objectSpread(_objectSpread({}, item.itemOpts), {}, {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
import { ItemRenderer } from "../../exported-related/index";
|
|
5
|
+
const StyledSeparator = styled.div`
|
|
6
|
+
height: 1px;
|
|
7
|
+
background-color: ${(props) => props.theme.colors.neutral[100]};
|
|
8
|
+
width: auto;
|
|
9
|
+
margin: ${(props) => props.theme.space.xxxs} 0;
|
|
10
|
+
margin-left: ${(props) => props.theme.space.xxxs};
|
|
11
|
+
grid-column: span 3;
|
|
12
|
+
`;
|
|
13
|
+
const ItemSeparator = (props) => {
|
|
14
|
+
const { item } = props;
|
|
15
|
+
return /* @__PURE__ */ React2.createElement(ItemRenderer, {
|
|
16
|
+
item: {
|
|
17
|
+
...item,
|
|
18
|
+
itemOpts: {
|
|
19
|
+
...item.itemOpts,
|
|
30
20
|
selectable: false,
|
|
31
21
|
focuseable: false
|
|
32
|
-
}
|
|
22
|
+
},
|
|
33
23
|
CollapsedComponent: null
|
|
34
|
-
}
|
|
24
|
+
},
|
|
35
25
|
minHeight: "1px",
|
|
36
26
|
paddingTop: "0px"
|
|
37
|
-
},
|
|
27
|
+
}, /* @__PURE__ */ React2.createElement(StyledSeparator, {
|
|
38
28
|
"data-testid": "leftnav-separator-subitem"
|
|
39
|
-
}))
|
|
29
|
+
}));
|
|
40
30
|
};
|
|
41
|
-
|
|
42
|
-
|
|
31
|
+
export {
|
|
32
|
+
ItemSeparator
|
|
33
|
+
};
|
|
34
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemSeparator/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport styled from 'styled-components';\nimport { ItemRenderer } from '../../exported-related/index';\nimport type { ComponentProps } from '../../index.d';\n\nconst StyledSeparator = styled.div`\n height: 1px;\n background-color: ${(props) => props.theme.colors.neutral[100]};\n width: auto;\n margin: ${(props) => props.theme.space.xxxs} 0;\n margin-left: ${(props) => props.theme.space.xxxs};\n grid-column: span 3;\n`;\n\nexport const ItemSeparator = (props: ComponentProps): JSX.Element => {\n const { item } = props;\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ...item.itemOpts,\n selectable: false,\n focuseable: false,\n },\n CollapsedComponent: null,\n }}\n minHeight=\"1px\"\n paddingTop=\"0px\"\n >\n <StyledSeparator data-testid=\"leftnav-separator-subitem\" />\n </ItemRenderer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAGA,MAAM,kBAAkB,OAAO;AAAA;AAAA,sBAET,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,YAEhD,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,iBACxB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAIvC,MAAM,gBAAgB,CAAC,UAAuC;AACnE,QAAM,EAAE,SAAS;AACjB,SACE,qCAAC,cAAD;AAAA,IACE,MAAM;AAAA,SACD;AAAA,MACH,UAAU;AAAA,WACL,KAAK;AAAA,QACR,YAAY;AAAA,QACZ,YAAY;AAAA;AAAA,MAEd,oBAAoB;AAAA;AAAA,IAEtB,WAAU;AAAA,IACV,YAAW;AAAA,KAEX,qCAAC,iBAAD;AAAA,IAAiB,eAAY;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,48 +1,32 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
|
|
11
|
-
import { CHEVRON_BACK_DS_ID } from '../../exported-related/constants.js';
|
|
12
|
-
import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
|
|
13
|
-
import '@elliemae/ds-icons';
|
|
14
|
-
import 'react/jsx-runtime';
|
|
15
|
-
import 'styled-components';
|
|
16
|
-
import { StyledChevronLeft, StyledLabel } from './styled.js';
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useCallback } from "react";
|
|
3
|
+
import Grid from "@elliemae/ds-grid";
|
|
4
|
+
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
5
|
+
import { ItemRenderer } from "../../exported-related/index";
|
|
6
|
+
import { StyledLabel, StyledChevronLeft } from "./styled";
|
|
7
|
+
import { CHEVRON_BACK_DS_ID } from "../../exported-related/constants";
|
|
8
|
+
const notOpenedShadowStyle = (isSelected) => (theme) => `
|
|
9
|
+
box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : "transparent"};
|
|
17
10
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
const notOpenedShadowStyle = isSelected => theme => "\n box-shadow: inset 4px 0 0 0 ".concat(isSelected ? theme.colors.brand[400] : 'transparent', ";\n\n :hover {\n box-shadow: inset 4px 0 0 0 ").concat(isSelected ? theme.colors.brand[400] : theme.colors.brand[300], ";\n }\n\n :active {\n box-shadow: inset 4px 0 0 0 ").concat(theme.colors.brand[400], ";\n }\n");
|
|
23
|
-
|
|
24
|
-
const ItemSubmenu = props => {
|
|
25
|
-
var _item$itemOpts$ariaLa;
|
|
11
|
+
:hover {
|
|
12
|
+
box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};
|
|
13
|
+
}
|
|
26
14
|
|
|
15
|
+
:active {
|
|
16
|
+
box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};
|
|
17
|
+
}
|
|
18
|
+
`;
|
|
19
|
+
const ItemSubmenu = (props) => {
|
|
27
20
|
const {
|
|
28
21
|
item,
|
|
29
22
|
item: {
|
|
30
23
|
dsId,
|
|
31
|
-
itemOpts: {
|
|
32
|
-
label,
|
|
33
|
-
RightComponent,
|
|
34
|
-
BottomComponent,
|
|
35
|
-
labelDataTestId
|
|
36
|
-
},
|
|
24
|
+
itemOpts: { label, RightComponent, BottomComponent, labelDataTestId },
|
|
37
25
|
CollapsedComponent = () => null
|
|
38
26
|
},
|
|
39
27
|
ctx,
|
|
40
28
|
ctx: {
|
|
41
|
-
leftNavProps: {
|
|
42
|
-
openedItem,
|
|
43
|
-
labelOverflow,
|
|
44
|
-
onItemClick
|
|
45
|
-
},
|
|
29
|
+
leftNavProps: { openedItem, labelOverflow, onItemClick },
|
|
46
30
|
expandedForAnimation,
|
|
47
31
|
selectedItem,
|
|
48
32
|
selectedParent,
|
|
@@ -51,83 +35,85 @@ const ItemSubmenu = props => {
|
|
|
51
35
|
} = props;
|
|
52
36
|
const opened = openedItem === dsId;
|
|
53
37
|
const isSelected = selectedItem === dsId;
|
|
54
|
-
const shadowStyle = useCallback(
|
|
55
|
-
const ariaLabel =
|
|
56
|
-
return
|
|
57
|
-
item:
|
|
58
|
-
|
|
38
|
+
const shadowStyle = useCallback((opened2) => (theme) => !opened2 ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`, [dsId, isSelected, openedItem, selectedParent]);
|
|
39
|
+
const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === "string" ? label : "menuitem");
|
|
40
|
+
return /* @__PURE__ */ React2.createElement(ItemRenderer, {
|
|
41
|
+
item: {
|
|
42
|
+
...item,
|
|
43
|
+
itemOpts: {
|
|
44
|
+
...item.itemOpts,
|
|
59
45
|
ariaLabel,
|
|
60
46
|
ariaExpanded: opened,
|
|
61
47
|
openable: expandedForAnimation && !opened,
|
|
62
48
|
closable: expandedForAnimation && opened,
|
|
63
49
|
selectable: !opened
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
shadowStyle
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
shadowStyle,
|
|
67
53
|
hasBorderBottom: opened,
|
|
68
54
|
borderBottomMr: "12px"
|
|
69
|
-
},
|
|
70
|
-
cols: opened ? [
|
|
55
|
+
}, /* @__PURE__ */ React2.createElement(Grid, {
|
|
56
|
+
cols: opened ? ["auto", "auto"] : ["38px"],
|
|
71
57
|
gutter: "1px",
|
|
72
|
-
pl: opened ?
|
|
58
|
+
pl: opened ? "xxs" : 0,
|
|
73
59
|
justifyItems: "center",
|
|
74
60
|
"data-testid": "leftnav-leftcomponent"
|
|
75
|
-
},
|
|
61
|
+
}, opened && /* @__PURE__ */ React2.createElement(StyledChevronLeft, {
|
|
76
62
|
size: "m",
|
|
77
|
-
color: [
|
|
78
|
-
onClick: e => {
|
|
63
|
+
color: ["brand-primary", 800],
|
|
64
|
+
onClick: (e) => {
|
|
79
65
|
onItemClick(item, e);
|
|
80
66
|
},
|
|
81
67
|
"data-testid": "leftnav-leftcomponent-chevron",
|
|
82
68
|
tabIndex: 0,
|
|
83
|
-
onFocus: e => {
|
|
69
|
+
onFocus: (e) => {
|
|
84
70
|
e.stopPropagation();
|
|
85
71
|
setFocusedItem(CHEVRON_BACK_DS_ID);
|
|
86
72
|
},
|
|
87
73
|
role: "button",
|
|
88
|
-
"aria-label":
|
|
89
|
-
}),
|
|
90
|
-
item
|
|
91
|
-
ctx
|
|
92
|
-
})),
|
|
93
|
-
ml: opened ?
|
|
74
|
+
"aria-label": `Close ${ariaLabel}`
|
|
75
|
+
}), /* @__PURE__ */ React2.createElement(CollapsedComponent, {
|
|
76
|
+
item,
|
|
77
|
+
ctx
|
|
78
|
+
})), /* @__PURE__ */ React2.createElement(StyledLabel, {
|
|
79
|
+
ml: opened ? "xxs" : "1px",
|
|
94
80
|
mt: "xxxs",
|
|
95
81
|
mb: "15px",
|
|
96
|
-
"data-testid": labelDataTestId ||
|
|
97
|
-
labelOverflow
|
|
98
|
-
},
|
|
82
|
+
"data-testid": labelDataTestId || "leftnav-itemlabel",
|
|
83
|
+
labelOverflow
|
|
84
|
+
}, labelOverflow === "truncate" ? /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
|
|
99
85
|
value: label,
|
|
100
86
|
placement: "bottom-start"
|
|
101
|
-
}) : label),
|
|
87
|
+
}) : label), /* @__PURE__ */ React2.createElement(Grid, {
|
|
102
88
|
pl: "xs",
|
|
103
|
-
pr: opened ?
|
|
104
|
-
onFocus: e => {
|
|
89
|
+
pr: opened ? "xxs2" : "xxs",
|
|
90
|
+
onFocus: (e) => {
|
|
105
91
|
e.stopPropagation();
|
|
106
92
|
setFocusedItem(null);
|
|
107
93
|
},
|
|
108
|
-
onKeyDown: e => e.stopPropagation(),
|
|
109
|
-
onClick: e => openedItem === dsId && e.stopPropagation(),
|
|
94
|
+
onKeyDown: (e) => e.stopPropagation(),
|
|
95
|
+
onClick: (e) => openedItem === dsId && e.stopPropagation(),
|
|
110
96
|
"data-testid": "leftnav-right-component"
|
|
111
|
-
},
|
|
112
|
-
ctx
|
|
113
|
-
item
|
|
114
|
-
})), BottomComponent &&
|
|
115
|
-
style: {
|
|
116
|
-
gridColumn: 'span 3'
|
|
117
|
-
},
|
|
97
|
+
}, RightComponent && /* @__PURE__ */ React2.createElement(RightComponent, {
|
|
98
|
+
ctx,
|
|
99
|
+
item
|
|
100
|
+
})), BottomComponent && /* @__PURE__ */ React2.createElement(Grid, {
|
|
101
|
+
style: { gridColumn: "span 3" },
|
|
118
102
|
pb: "xxxs",
|
|
119
103
|
pl: "xxs",
|
|
120
104
|
pr: "xxs",
|
|
121
|
-
onFocus: e => {
|
|
105
|
+
onFocus: (e) => {
|
|
122
106
|
e.stopPropagation();
|
|
123
107
|
setFocusedItem(null);
|
|
124
108
|
},
|
|
125
|
-
onKeyDown: e => e.stopPropagation(),
|
|
126
|
-
onClick: e => openedItem && e.stopPropagation()
|
|
127
|
-
},
|
|
128
|
-
ctx
|
|
129
|
-
item
|
|
109
|
+
onKeyDown: (e) => e.stopPropagation(),
|
|
110
|
+
onClick: (e) => openedItem && e.stopPropagation()
|
|
111
|
+
}, /* @__PURE__ */ React2.createElement(BottomComponent, {
|
|
112
|
+
ctx,
|
|
113
|
+
item
|
|
130
114
|
})));
|
|
131
115
|
};
|
|
132
|
-
|
|
133
|
-
|
|
116
|
+
export {
|
|
117
|
+
ItemSubmenu
|
|
118
|
+
};
|
|
119
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemSubmenu/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable indent */\nimport React, { useCallback } from 'react';\nimport Grid from '@elliemae/ds-grid';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index';\nimport type { ComponentProps } from '../../index.d';\nimport { StyledLabel, StyledChevronLeft } from './styled';\nimport { CHEVRON_BACK_DS_ID } from '../../exported-related/constants';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst notOpenedShadowStyle = (isSelected: boolean) => (theme: any) =>\n `\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : 'transparent'};\n\n :hover {\n box-shadow: inset 4px 0 0 0 ${isSelected ? theme.colors.brand[400] : theme.colors.brand[300]};\n }\n\n :active {\n box-shadow: inset 4px 0 0 0 ${theme.colors.brand[400]};\n }\n`;\n\nexport const ItemSubmenu = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n dsId,\n itemOpts: { label, RightComponent, BottomComponent, labelDataTestId },\n CollapsedComponent = () => null,\n },\n ctx,\n ctx: {\n leftNavProps: { openedItem, labelOverflow, onItemClick },\n expandedForAnimation,\n selectedItem,\n selectedParent,\n setFocusedItem,\n },\n } = props;\n\n const opened = openedItem === dsId;\n\n const isSelected = selectedItem === dsId;\n\n const shadowStyle = useCallback(\n (opened) => (theme: any) =>\n !opened ? notOpenedShadowStyle(isSelected || selectedParent === dsId)(theme) : `box-shadow: inset 4px 0 0 0 #52A6EC`,\n [dsId, isSelected, openedItem, selectedParent],\n );\n\n const ariaLabel = item.itemOpts.ariaLabel ?? (typeof label === 'string' ? label : 'menuitem');\n\n return (\n <ItemRenderer\n item={{\n ...item,\n itemOpts: {\n ...item.itemOpts,\n ariaLabel,\n ariaExpanded: opened,\n openable: expandedForAnimation && !opened,\n closable: expandedForAnimation && opened,\n selectable: !opened,\n },\n }}\n shadowStyle={shadowStyle}\n hasBorderBottom={opened}\n borderBottomMr=\"12px\"\n >\n <Grid\n cols={opened ? ['auto', 'auto'] : ['38px']}\n gutter=\"1px\"\n pl={opened ? 'xxs' : 0}\n justifyItems=\"center\"\n data-testid=\"leftnav-leftcomponent\"\n >\n {opened && (\n <StyledChevronLeft\n size=\"m\"\n color={['brand-primary', 800]}\n onClick={(e) => {\n onItemClick(item, e);\n }}\n data-testid=\"leftnav-leftcomponent-chevron\"\n tabIndex={0}\n onFocus={(e) => {\n e.stopPropagation();\n setFocusedItem(CHEVRON_BACK_DS_ID);\n }}\n role=\"button\"\n aria-label={`Close ${ariaLabel}`}\n />\n )}\n <CollapsedComponent item={item} ctx={ctx} />\n </Grid>\n <StyledLabel\n ml={opened ? 'xxs' : '1px'}\n mt=\"xxxs\"\n mb=\"15px\"\n data-testid={labelDataTestId || 'leftnav-itemlabel'}\n labelOverflow={labelOverflow}\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n <Grid\n pl=\"xs\"\n pr={opened ? 'xxs2' : 'xxs'}\n onFocus={(e) => {\n e.stopPropagation();\n setFocusedItem(null);\n }}\n onKeyDown={(e) => e.stopPropagation()}\n onClick={(e) => (openedItem === dsId) && e.stopPropagation()}\n data-testid=\"leftnav-right-component\"\n >\n {RightComponent && <RightComponent ctx={ctx} item={item} />}\n </Grid>\n {BottomComponent && (\n <Grid\n style={{ gridColumn: 'span 3' }}\n pb=\"xxxs\"\n pl=\"xxs\"\n pr=\"xxs\"\n onFocus={(e) => {\n e.stopPropagation();\n setFocusedItem(null);\n }}\n onKeyDown={(e) => e.stopPropagation()}\n onClick={(e) => openedItem && e.stopPropagation()}\n >\n <BottomComponent ctx={ctx} item={item} />\n </Grid>\n )}\n </ItemRenderer>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,12 +1,20 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
const StyledLabel =
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import Grid from "@elliemae/ds-grid";
|
|
3
|
+
import { ChevronSmallLeft } from "@elliemae/ds-icons";
|
|
4
|
+
import styled from "styled-components";
|
|
5
|
+
const StyledLabel = styled(Grid)`
|
|
6
|
+
font-size: 14px;
|
|
7
|
+
color: ${(props) => props.theme.colors.neutral[800]};
|
|
8
|
+
word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
|
|
9
|
+
`;
|
|
10
|
+
const StyledChevronLeft = styled(ChevronSmallLeft)`
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
:focus {
|
|
13
|
+
outline: 2px solid ${(props) => props.theme.colors.brand[700]};
|
|
14
|
+
}
|
|
15
|
+
`;
|
|
16
|
+
export {
|
|
17
|
+
StyledChevronLeft,
|
|
18
|
+
StyledLabel
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemSubmenu/styled.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import Grid from '@elliemae/ds-grid';\nimport { ChevronSmallLeft } from '@elliemae/ds-icons';\nimport styled from 'styled-components';\n\nexport const StyledLabel = styled(Grid)`\n font-size: 14px;\n color: ${(props) => props.theme.colors.neutral[800]};\n word-break: ${(props) => (props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n`;\n\nexport const StyledChevronLeft = styled(ChevronSmallLeft)`\n cursor: pointer;\n :focus {\n outline: 2px solid ${(props) => props.theme.colors.brand[700]};\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,cAAc,OAAO;AAAA;AAAA,WAEvB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UAAW,MAAM,kBAAkB,YAAY,cAAc;AAAA;AAGvE,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA,yBAGf,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,61 +1,40 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
8
|
-
import 'react';
|
|
9
|
-
import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
|
|
10
|
-
import { ItemRenderer } from '../../exported-related/ItemRenderer/index.js';
|
|
11
|
-
import '@elliemae/ds-icons';
|
|
12
|
-
import 'react/jsx-runtime';
|
|
13
|
-
import 'styled-components';
|
|
14
|
-
import '@elliemae/ds-grid';
|
|
15
|
-
import { StyledLabel } from './styled.js';
|
|
16
|
-
|
|
17
|
-
var _div;
|
|
18
|
-
|
|
19
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
20
|
-
|
|
21
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
22
|
-
const ItemTextLabel = props => {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
4
|
+
import { ItemRenderer } from "../../exported-related/index";
|
|
5
|
+
import { StyledLabel } from "./styled";
|
|
6
|
+
const ItemTextLabel = (props) => {
|
|
23
7
|
const {
|
|
24
8
|
item,
|
|
25
9
|
item: {
|
|
26
|
-
itemOpts: {
|
|
27
|
-
label,
|
|
28
|
-
labelOverflow: itemLabelOverflow,
|
|
29
|
-
labelBold,
|
|
30
|
-
labelColor,
|
|
31
|
-
labelDataTestId
|
|
32
|
-
}
|
|
10
|
+
itemOpts: { label, labelOverflow: itemLabelOverflow, labelBold, labelColor, labelDataTestId }
|
|
33
11
|
},
|
|
34
12
|
ctx: {
|
|
35
|
-
leftNavProps: {
|
|
36
|
-
labelOverflow: leftNavLabelOverflow
|
|
37
|
-
}
|
|
13
|
+
leftNavProps: { labelOverflow: leftNavLabelOverflow }
|
|
38
14
|
}
|
|
39
15
|
} = props;
|
|
40
16
|
const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;
|
|
41
|
-
return
|
|
42
|
-
item:
|
|
17
|
+
return /* @__PURE__ */ React2.createElement(ItemRenderer, {
|
|
18
|
+
item: {
|
|
19
|
+
...item,
|
|
43
20
|
CollapsedComponent: null
|
|
44
|
-
}
|
|
21
|
+
},
|
|
45
22
|
minHeight: "32px",
|
|
46
23
|
paddingTop: "8px"
|
|
47
|
-
},
|
|
48
|
-
"data-testid": labelDataTestId ||
|
|
24
|
+
}, " ", /* @__PURE__ */ React2.createElement("div", null), /* @__PURE__ */ React2.createElement(StyledLabel, {
|
|
25
|
+
"data-testid": labelDataTestId || "leftnav-list-item-label",
|
|
49
26
|
pl: "24px",
|
|
50
|
-
labelOverflow
|
|
51
|
-
labelBold
|
|
52
|
-
labelColor
|
|
27
|
+
labelOverflow,
|
|
28
|
+
labelBold,
|
|
29
|
+
labelColor,
|
|
53
30
|
mr: "xxs2",
|
|
54
31
|
pb: "xxxs"
|
|
55
|
-
},
|
|
32
|
+
}, labelOverflow === "truncate" ? /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
|
|
56
33
|
value: label,
|
|
57
34
|
placement: "bottom-start"
|
|
58
35
|
}) : label));
|
|
59
36
|
};
|
|
60
|
-
|
|
61
|
-
|
|
37
|
+
export {
|
|
38
|
+
ItemTextLabel
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemTextLabel/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ItemRenderer } from '../../exported-related/index';\nimport type { ComponentProps } from '../../index.d';\nimport { StyledLabel } from './styled';\n\nexport const ItemTextLabel = (props: ComponentProps): JSX.Element => {\n const {\n item,\n item: {\n itemOpts: { label, labelOverflow: itemLabelOverflow, labelBold, labelColor, labelDataTestId },\n },\n ctx: {\n leftNavProps: { labelOverflow: leftNavLabelOverflow },\n },\n } = props;\n\n const labelOverflow = itemLabelOverflow || leftNavLabelOverflow;\n\n return (\n <ItemRenderer\n item={{\n ...item,\n CollapsedComponent: null,\n }}\n minHeight=\"32px\"\n paddingTop=\"8px\"\n >\n {/* Empty LeftComponent */} <div />\n <StyledLabel\n data-testid={labelDataTestId || 'leftnav-list-item-label'}\n pl=\"24px\"\n labelOverflow={labelOverflow}\n labelBold={labelBold}\n labelColor={labelColor}\n mr=\"xxs2\"\n pb=\"xxxs\"\n >\n {labelOverflow === 'truncate' ? <SimpleTruncatedTooltipText value={label} placement=\"bottom-start\" /> : label}\n </StyledLabel>\n </ItemRenderer>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAEO,MAAM,gBAAgB,CAAC,UAAuC;AACnE,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACJ,UAAU,EAAE,OAAO,eAAe,mBAAmB,WAAW,YAAY;AAAA;AAAA,IAE9E,KAAK;AAAA,MACH,cAAc,EAAE,eAAe;AAAA;AAAA,MAE/B;AAEJ,QAAM,gBAAgB,qBAAqB;AAE3C,SACE,qCAAC,cAAD;AAAA,IACE,MAAM;AAAA,SACD;AAAA,MACH,oBAAoB;AAAA;AAAA,IAEtB,WAAU;AAAA,IACV,YAAW;AAAA,KAEgB,KAAC,qCAAC,OAAD,OAC5B,qCAAC,aAAD;AAAA,IACE,eAAa,mBAAmB;AAAA,IAChC,IAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAG;AAAA,IACH,IAAG;AAAA,KAEF,kBAAkB,aAAa,qCAAC,4BAAD;AAAA,IAA4B,OAAO;AAAA,IAAO,WAAU;AAAA,OAAoB;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
const StyledLabel =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import Grid from "@elliemae/ds-grid";
|
|
4
|
+
const StyledLabel = styled(Grid)`
|
|
5
|
+
font-size: 13px;
|
|
6
|
+
font-weight: ${(props) => props.labelBold ? props.theme.fontWeights.semibold : props.theme.fontWeights.regular};
|
|
7
|
+
color: ${({ labelColor, theme }) => labelColor ? theme.colors[labelColor[0]][labelColor[1]] : theme.colors.neutral[800]};
|
|
8
|
+
line-height: 14px;
|
|
9
|
+
word-break: ${(props) => props.labelOverflow === "wrapAll" ? "break-all" : "normal"};
|
|
10
|
+
`;
|
|
11
|
+
export {
|
|
12
|
+
StyledLabel
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/ItemTextLabel/styled.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\nimport Grid from '@elliemae/ds-grid';\n\nexport const StyledLabel = styled(Grid)`\n font-size: 13px;\n font-weight: ${(props) =>\n props.labelBold\n ? props.theme.fontWeights.semibold\n : props.theme.fontWeights.regular};\n color: ${({ labelColor, theme }) =>\n labelColor\n ? theme.colors[labelColor[0]][labelColor[1]]\n : theme.colors.neutral[800]};\n line-height: 14px;\n word-break: ${(props) =>\n props.labelOverflow === 'wrapAll' ? 'break-all' : 'normal'};\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEO,MAAM,cAAc,OAAO;AAAA;AAAA,iBAEjB,CAAC,UACd,MAAM,YACF,MAAM,MAAM,YAAY,WACxB,MAAM,MAAM,YAAY;AAAA,WACrB,CAAC,EAAE,YAAY,YACtB,aACI,MAAM,OAAO,WAAW,IAAI,WAAW,MACvC,MAAM,OAAO,QAAQ;AAAA;AAAA,gBAEb,CAAC,UACb,MAAM,kBAAkB,YAAY,cAAc;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|