akeneo-design-system 0.1.241 → 0.1.243
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/lib/components/Dropdown/Item/Item.js +9 -4
- package/lib/components/Dropdown/Item/Item.js.map +1 -1
- package/lib/components/Dropdown/Overlay/Overlay.js +5 -1
- package/lib/components/Dropdown/Overlay/Overlay.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Dropdown/Dropdown.unit.tsx +1 -0
- package/src/components/Dropdown/Item/Item.tsx +9 -3
- package/src/components/Dropdown/Overlay/Overlay.tsx +9 -4
|
@@ -81,7 +81,8 @@ var ItemContainer = styled_components_1.default.div(templateObject_6 || (templat
|
|
|
81
81
|
});
|
|
82
82
|
var Item = react_1.default.forwardRef(function (_a, forwardedRef) {
|
|
83
83
|
var children = _a.children, onKeyDown = _a.onKeyDown, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.isActive, isActive = _c === void 0 ? false : _c, onClick = _a.onClick, title = _a.title, rest = __rest(_a, ["children", "onKeyDown", "disabled", "isActive", "onClick", "title"]);
|
|
84
|
-
var
|
|
84
|
+
var hasImageChild = false;
|
|
85
|
+
var hasSurtitleChild = false;
|
|
85
86
|
var actionableRef = (0, react_1.useRef)(null);
|
|
86
87
|
var handleClick = (0, react_1.useCallback)(function (event) {
|
|
87
88
|
if (disabled)
|
|
@@ -108,8 +109,7 @@ var Item = react_1.default.forwardRef(function (_a, forwardedRef) {
|
|
|
108
109
|
disabled && react_1.default.createElement(icons_1.LockIcon, { size: 18 })));
|
|
109
110
|
}
|
|
110
111
|
if ((0, react_1.isValidElement)(child) && child.type === Image_1.Image) {
|
|
111
|
-
|
|
112
|
-
size = 'big';
|
|
112
|
+
hasImageChild = true;
|
|
113
113
|
return react_1.default.cloneElement(child, {
|
|
114
114
|
width: 34,
|
|
115
115
|
height: 34,
|
|
@@ -133,10 +133,15 @@ var Item = react_1.default.forwardRef(function (_a, forwardedRef) {
|
|
|
133
133
|
});
|
|
134
134
|
}
|
|
135
135
|
if ((0, react_1.isValidElement)(child) && child.type === Surtitle_1.Surtitle) {
|
|
136
|
-
|
|
136
|
+
hasSurtitleChild = true;
|
|
137
137
|
}
|
|
138
138
|
return child;
|
|
139
139
|
});
|
|
140
|
+
var size = 'default';
|
|
141
|
+
if (hasImageChild || hasSurtitleChild)
|
|
142
|
+
size = 'big';
|
|
143
|
+
if (hasImageChild && hasSurtitleChild)
|
|
144
|
+
size = 'bigger';
|
|
140
145
|
return (react_1.default.createElement(ItemContainer, __assign({ size: size, tabIndex: null === actionableRef.current && !disabled ? 0 : -1, onClick: handleClick, onKeyDown: handleKeyDown, disabled: disabled, "aria-disabled": disabled, isActive: isActive, title: title }, rest, { ref: forwardedRef }), decoratedChildren));
|
|
141
146
|
});
|
|
142
147
|
exports.Item = Item;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Item/Item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgH;AAChH,qEAA8C;AAC9C,wCAA2D;AAC3D,yDAAsD;AACtD,kEAA+D;AAC/D,sDAAmD;AACnD,0CAA8C;AAC9C,wCAAwC;AACxC,iDAA8C;AAE9C,IAAM,SAAS,GAAG,2BAAM,CAAC,IAAI,4JAAA,yFAK5B,IAAA,CAAC;
|
|
1
|
+
{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Item/Item.tsx"],"names":[],"mappings":"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"}
|
|
@@ -60,7 +60,7 @@ var getWidthProperties = function (_a) {
|
|
|
60
60
|
}
|
|
61
61
|
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n min-width: 150px;\n max-width: 400px;\n "], ["\n min-width: 150px;\n max-width: 400px;\n "])));
|
|
62
62
|
};
|
|
63
|
-
var Container = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "
|
|
63
|
+
var Container = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n background: ", ";\n box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);\n padding: 10px 0;\n position: fixed;\n opacity: ", ";\n transition: opacity 0.15s ease-in-out;\n z-index: 1901;\n top: ", "px;\n left: ", "px;\n ", ";\n"], ["\n ", ";\n background: ", ";\n box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);\n padding: 10px 0;\n position: fixed;\n opacity: ", ";\n transition: opacity 0.15s ease-in-out;\n z-index: 1901;\n top: ", "px;\n left: ", "px;\n ", ";\n"])), theme_1.CommonStyle, (0, theme_1.getColor)('white'), function (_a) {
|
|
64
64
|
var visible = _a.visible;
|
|
65
65
|
return (visible ? 1 : 0);
|
|
66
66
|
}, function (_a) {
|
|
@@ -86,6 +86,10 @@ var getOverlayPosition = function (verticalPosition, horizontalPosition, dropdow
|
|
|
86
86
|
if (dropdownOpenerVisible) {
|
|
87
87
|
top = 'up' === verticalPosition ? parentRect.top - elementRect.height : parentRect.bottom + 1;
|
|
88
88
|
}
|
|
89
|
+
var spaceBelow = window.innerHeight - parentRect.bottom;
|
|
90
|
+
var exceedsScreen = spaceBelow < elementRect.height && parentRect.top > elementRect.height;
|
|
91
|
+
top = exceedsScreen ? parentRect.bottom - elementRect.height + BORDER_SHADOW_OFFSET : top;
|
|
92
|
+
top = exceedsScreen && dropdownOpenerVisible ? parentRect.top - elementRect.height : top;
|
|
89
93
|
var left = 'left' === horizontalPosition ? parentRect.right - elementRect.width : parentRect.left;
|
|
90
94
|
return [top, left];
|
|
91
95
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Overlay/Overlay.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+E;AAC/E,uCAAuC;AACvC,qEAA8C;AAC9C,0CAA8C;AAC9C,wCAOwB;AACxB,wCAAwE;AAExE,IAAM,oBAAoB,GAAG,CAAC,CAAC;AAE/B,IAAM,kBAAkB,GAAG,UAAC,EAA6D;QAA5D,UAAU,gBAAA;IACrC,IAAI,IAAI,KAAK,UAAU,EAAE;QACvB,WAAO,uBAAG,kGAAA,iBACC,EAAU,WACpB,KADU,UAAU,EACnB;KACH;IAED,WAAO,uBAAG,wHAAA,oDAGT,KAAC;AACJ,CAAC,CAAC;AAEF,IAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,kTAO3B,MACG,EAAW,
|
|
1
|
+
{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/Overlay/Overlay.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -107,6 +107,7 @@ test('it renders Surtitle item', () => {
|
|
|
107
107
|
</Dropdown.Header>
|
|
108
108
|
<Dropdown.ItemCollection>
|
|
109
109
|
<Dropdown.Item data-testid="item_with_surtitle">
|
|
110
|
+
<Image src="image.png" alt="my image" />
|
|
110
111
|
<Surtitle label="Item label">Item</Surtitle>
|
|
111
112
|
</Dropdown.Item>
|
|
112
113
|
<Dropdown.Item>Simple Item</Dropdown.Item>
|
|
@@ -104,7 +104,9 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>(
|
|
|
104
104
|
{children, onKeyDown, disabled = false, isActive = false, onClick, title, ...rest}: ItemProps,
|
|
105
105
|
forwardedRef: Ref<HTMLDivElement>
|
|
106
106
|
): React.ReactElement => {
|
|
107
|
-
let
|
|
107
|
+
let hasImageChild = false;
|
|
108
|
+
let hasSurtitleChild = false;
|
|
109
|
+
|
|
108
110
|
const actionableRef = useRef<HTMLAnchorElement>(null);
|
|
109
111
|
const handleClick = useCallback(
|
|
110
112
|
(event: SyntheticEvent) => {
|
|
@@ -143,7 +145,7 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>(
|
|
|
143
145
|
|
|
144
146
|
// Change size of Image children
|
|
145
147
|
if (isValidElement(child) && child.type === Image) {
|
|
146
|
-
|
|
148
|
+
hasImageChild = true;
|
|
147
149
|
|
|
148
150
|
return React.cloneElement(child, {
|
|
149
151
|
width: 34,
|
|
@@ -178,12 +180,16 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>(
|
|
|
178
180
|
}
|
|
179
181
|
|
|
180
182
|
if (isValidElement(child) && child.type === Surtitle) {
|
|
181
|
-
|
|
183
|
+
hasSurtitleChild = true;
|
|
182
184
|
}
|
|
183
185
|
|
|
184
186
|
return child;
|
|
185
187
|
});
|
|
186
188
|
|
|
189
|
+
let size = 'default';
|
|
190
|
+
if (hasImageChild || hasSurtitleChild) size = 'big';
|
|
191
|
+
if (hasImageChild && hasSurtitleChild) size = 'bigger';
|
|
192
|
+
|
|
187
193
|
return (
|
|
188
194
|
<ItemContainer
|
|
189
195
|
size={size}
|
|
@@ -35,7 +35,7 @@ const Container = styled.div<
|
|
|
35
35
|
fixedWidth: number | null;
|
|
36
36
|
} & AkeneoThemedProps
|
|
37
37
|
>`
|
|
38
|
-
${CommonStyle}
|
|
38
|
+
${CommonStyle};
|
|
39
39
|
background: ${getColor('white')};
|
|
40
40
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
|
|
41
41
|
padding: 10px 0;
|
|
@@ -45,8 +45,7 @@ const Container = styled.div<
|
|
|
45
45
|
z-index: 1901;
|
|
46
46
|
top: ${({top}) => top}px;
|
|
47
47
|
left: ${({left}) => left}px;
|
|
48
|
-
|
|
49
|
-
${getWidthProperties}
|
|
48
|
+
${getWidthProperties};
|
|
50
49
|
`;
|
|
51
50
|
|
|
52
51
|
type OverlayProps = Override<
|
|
@@ -84,7 +83,7 @@ type OverlayProps = Override<
|
|
|
84
83
|
}
|
|
85
84
|
>;
|
|
86
85
|
|
|
87
|
-
const Backdrop = styled.div
|
|
86
|
+
const Backdrop = styled.div`
|
|
88
87
|
position: fixed;
|
|
89
88
|
top: 0;
|
|
90
89
|
left: 0;
|
|
@@ -121,6 +120,12 @@ const getOverlayPosition = (
|
|
|
121
120
|
top = 'up' === verticalPosition ? parentRect.top - elementRect.height : parentRect.bottom + 1;
|
|
122
121
|
}
|
|
123
122
|
|
|
123
|
+
// Adjust the vertical position to top if the dropdown list height exceeds the screen
|
|
124
|
+
const spaceBelow = window.innerHeight - parentRect.bottom;
|
|
125
|
+
const exceedsScreen = spaceBelow < elementRect.height && parentRect.top > elementRect.height;
|
|
126
|
+
top = exceedsScreen ? parentRect.bottom - elementRect.height + BORDER_SHADOW_OFFSET : top;
|
|
127
|
+
top = exceedsScreen && dropdownOpenerVisible ? parentRect.top - elementRect.height : top;
|
|
128
|
+
|
|
124
129
|
const left = 'left' === horizontalPosition ? parentRect.right - elementRect.width : parentRect.left;
|
|
125
130
|
|
|
126
131
|
return [top, left];
|