@hexure/ui 1.6.5 → 1.6.7
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/dist/cjs/index.js +17 -5
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/Drawer/Drawer.d.ts +2 -0
- package/dist/esm/index.js +17 -5
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/Drawer/Drawer.d.ts +2 -0
- package/dist/index.d.ts +2 -0
- package/package.json +1 -1
|
@@ -21,6 +21,8 @@ export interface DrawerProps extends AccessibleProps {
|
|
|
21
21
|
width?: string | number;
|
|
22
22
|
/** Display an scrim over the main content, forcing users to interact with the drawer */
|
|
23
23
|
scrim?: 'transparent' | 'dark';
|
|
24
|
+
/** Set the drawer's positioning. Default is 'fixed' */
|
|
25
|
+
position?: 'fixed' | 'absolute';
|
|
24
26
|
/** It is used to close drawer. */
|
|
25
27
|
onClose: (e?: any) => void;
|
|
26
28
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -2682,20 +2682,32 @@ var DatePicker = function (_a) {
|
|
|
2682
2682
|
};
|
|
2683
2683
|
var templateObject_1$f, templateObject_2$d;
|
|
2684
2684
|
|
|
2685
|
-
var Scrim$1 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n position:
|
|
2685
|
+
var Scrim$1 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n position: ", ";\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: ", ";\n background: ", ";\n"], ["\n position: ", ";\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: ", ";\n background: ", ";\n"])), function (_a) {
|
|
2686
|
+
var $position = _a.$position;
|
|
2687
|
+
return $position;
|
|
2688
|
+
}, function (_a) {
|
|
2689
|
+
var $position = _a.$position;
|
|
2690
|
+
return ($position === 'fixed' ? 9998 : 10);
|
|
2691
|
+
}, function (_a) {
|
|
2686
2692
|
var $scrim = _a.$scrim;
|
|
2687
2693
|
return ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent');
|
|
2688
2694
|
});
|
|
2689
|
-
var Container$2 = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n z-index:
|
|
2695
|
+
var Container$2 = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n z-index: ", ";\n min-width: 400px;\n width: ", ";\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: ", ";\n top: 0;\n right: 0;\n bottom: 0;\n padding: 0px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n background: #fff;\n"], ["\n z-index: ", ";\n min-width: 400px;\n width: ", ";\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: ", ";\n top: 0;\n right: 0;\n bottom: 0;\n padding: 0px;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n background: #fff;\n"])), function (_a) {
|
|
2696
|
+
var $position = _a.$position;
|
|
2697
|
+
return ($position === 'fixed' ? 9999 : 11);
|
|
2698
|
+
}, function (_a) {
|
|
2690
2699
|
var $width = _a.$width;
|
|
2691
2700
|
return $width || '400px';
|
|
2701
|
+
}, function (_a) {
|
|
2702
|
+
var $position = _a.$position;
|
|
2703
|
+
return $position;
|
|
2692
2704
|
});
|
|
2693
2705
|
var Header$2 = styled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n padding: 30px 20px;\n display: flex;\n align-items: flex-start;\n box-sizing: border-box;\n flex-shrink: 0;\n background: #fff;\n"], ["\n padding: 30px 20px;\n display: flex;\n align-items: flex-start;\n box-sizing: border-box;\n flex-shrink: 0;\n background: #fff;\n"])));
|
|
2694
2706
|
var Close$1 = styled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n padding-left: 20px;\n cursor: pointer;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n padding-left: 20px;\n cursor: pointer;\n"])));
|
|
2695
2707
|
var ContentWrapper$1 = styled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n box-sizing: border-box;\n flex: 1;\n background: #fff;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n box-sizing: border-box;\n flex: 1;\n background: #fff;\n"])));
|
|
2696
2708
|
var ButtonBar$1 = styled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n padding: 20px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n box-sizing: border-box;\n gap: 10px;\n flex-shrink: 0;\n background: #fff;\n"], ["\n padding: 20px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n box-sizing: border-box;\n gap: 10px;\n flex-shrink: 0;\n background: #fff;\n"])));
|
|
2697
2709
|
var Drawer = function (_a) {
|
|
2698
|
-
var children = _a.children, description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton,
|
|
2710
|
+
var children = _a.children, description = _a.description, title = _a.title, onClose = _a.onClose, primaryButton = _a.primaryButton, _b = _a.position, position = _b === void 0 ? 'fixed' : _b, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, _c = _a.scrim, scrim = _c === void 0 ? 'dark' : _c, width = _a.width, accessibleProps = __rest(_a, ["children", "description", "title", "onClose", "primaryButton", "position", "secondaryButton", "tertiaryButton", "scrim", "width"]);
|
|
2699
2711
|
useEffect(function () {
|
|
2700
2712
|
document.onkeydown = function (e) {
|
|
2701
2713
|
if (e.key === 'Escape') {
|
|
@@ -2707,7 +2719,7 @@ var Drawer = function (_a) {
|
|
|
2707
2719
|
};
|
|
2708
2720
|
}, []);
|
|
2709
2721
|
return (React.createElement(React.Fragment, null,
|
|
2710
|
-
React.createElement(Container$2, __assign({}, accessibleProps, { "$width": width }),
|
|
2722
|
+
React.createElement(Container$2, __assign({}, accessibleProps, { "$position": position, "$width": width }),
|
|
2711
2723
|
React.createElement(Header$2, null,
|
|
2712
2724
|
React.createElement("div", null,
|
|
2713
2725
|
title ? React.createElement(Heading, { type: 'secondary' }, title) : null,
|
|
@@ -2719,7 +2731,7 @@ var Drawer = function (_a) {
|
|
|
2719
2731
|
tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { format: 'secondary' })) : null,
|
|
2720
2732
|
secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
2721
2733
|
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary' })) : null)) : null),
|
|
2722
|
-
scrim ? React.createElement(Scrim$1, { "$scrim": scrim, onClick: onClose }) : null));
|
|
2734
|
+
scrim ? React.createElement(Scrim$1, { "$position": position, "$scrim": scrim, onClick: onClose }) : null));
|
|
2723
2735
|
};
|
|
2724
2736
|
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$3;
|
|
2725
2737
|
|