@navikt/ds-react 6.11.0 → 6.13.0
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/alert/Alert.d.ts +9 -4
- package/cjs/alert/Alert.js +5 -3
- package/cjs/alert/Alert.js.map +1 -1
- package/cjs/layout/base/BasePrimitive.d.ts +35 -3
- package/cjs/layout/base/BasePrimitive.js +33 -3
- package/cjs/layout/base/BasePrimitive.js.map +1 -1
- package/cjs/layout/base/PrimitiveAsChildProps.d.ts +41 -0
- package/cjs/layout/base/PrimitiveAsChildProps.js +3 -0
- package/cjs/layout/base/PrimitiveAsChildProps.js.map +1 -0
- package/cjs/layout/box/Box.d.ts +5 -32
- package/cjs/layout/box/Box.js +15 -4
- package/cjs/layout/box/Box.js.map +1 -1
- package/cjs/layout/grid/HGrid.d.ts +7 -5
- package/cjs/layout/grid/HGrid.js +7 -2
- package/cjs/layout/grid/HGrid.js.map +1 -1
- package/cjs/layout/stack/HStack.d.ts +2 -1
- package/cjs/layout/stack/HStack.js.map +1 -1
- package/cjs/layout/stack/Stack.d.ts +8 -5
- package/cjs/layout/stack/Stack.js +10 -5
- package/cjs/layout/stack/Stack.js.map +1 -1
- package/cjs/layout/stack/VStack.d.ts +2 -1
- package/cjs/layout/stack/VStack.js.map +1 -1
- package/cjs/layout/utilities/css.js +3 -0
- package/cjs/layout/utilities/css.js.map +1 -1
- package/cjs/modal/Modal.js +3 -2
- package/cjs/modal/Modal.js.map +1 -1
- package/cjs/modal/types.d.ts +5 -0
- package/cjs/toggle-group/parts/useToggleItem.js +1 -1
- package/cjs/toggle-group/parts/useToggleItem.js.map +1 -1
- package/cjs/util/types/AsChildProps.d.ts +1 -0
- package/esm/alert/Alert.d.ts +9 -4
- package/esm/alert/Alert.js +5 -3
- package/esm/alert/Alert.js.map +1 -1
- package/esm/layout/base/BasePrimitive.d.ts +35 -3
- package/esm/layout/base/BasePrimitive.js +32 -2
- package/esm/layout/base/BasePrimitive.js.map +1 -1
- package/esm/layout/base/PrimitiveAsChildProps.d.ts +41 -0
- package/esm/layout/base/PrimitiveAsChildProps.js +2 -0
- package/esm/layout/base/PrimitiveAsChildProps.js.map +1 -0
- package/esm/layout/box/Box.d.ts +5 -32
- package/esm/layout/box/Box.js +15 -4
- package/esm/layout/box/Box.js.map +1 -1
- package/esm/layout/grid/HGrid.d.ts +7 -5
- package/esm/layout/grid/HGrid.js +7 -2
- package/esm/layout/grid/HGrid.js.map +1 -1
- package/esm/layout/stack/HStack.d.ts +2 -1
- package/esm/layout/stack/HStack.js.map +1 -1
- package/esm/layout/stack/Stack.d.ts +8 -5
- package/esm/layout/stack/Stack.js +10 -5
- package/esm/layout/stack/Stack.js.map +1 -1
- package/esm/layout/stack/VStack.d.ts +2 -1
- package/esm/layout/stack/VStack.js.map +1 -1
- package/esm/layout/utilities/css.js +3 -0
- package/esm/layout/utilities/css.js.map +1 -1
- package/esm/modal/Modal.js +3 -2
- package/esm/modal/Modal.js.map +1 -1
- package/esm/modal/types.d.ts +5 -0
- package/esm/toggle-group/parts/useToggleItem.js +1 -1
- package/esm/toggle-group/parts/useToggleItem.js.map +1 -1
- package/esm/util/types/AsChildProps.d.ts +1 -0
- package/package.json +3 -3
- package/src/alert/Alert.tsx +27 -6
- package/src/layout/base/BasePrimitive.tsx +84 -2
- package/src/layout/base/PrimitiveAsChildProps.ts +42 -0
- package/src/layout/box/Box.tsx +64 -81
- package/src/layout/grid/HGrid.tsx +73 -45
- package/src/layout/stack/HStack.tsx +2 -1
- package/src/layout/stack/Stack.tsx +80 -62
- package/src/layout/stack/VStack.tsx +3 -1
- package/src/layout/utilities/css.ts +3 -0
- package/src/modal/Modal.tsx +3 -1
- package/src/modal/types.ts +5 -0
- package/src/toggle-group/parts/useToggleItem.ts +4 -1
- package/src/util/types/AsChildProps.ts +1 -0
- package/cjs/layout/sidemal-test/AvatarPanel.d.ts +0 -4
- package/cjs/layout/sidemal-test/AvatarPanel.js +0 -19
- package/cjs/layout/sidemal-test/AvatarPanel.js.map +0 -1
- package/cjs/layout/sidemal-test/Content.d.ts +0 -2
- package/cjs/layout/sidemal-test/Content.js +0 -67
- package/cjs/layout/sidemal-test/Content.js.map +0 -1
- package/cjs/layout/sidemal-test/Filter.d.ts +0 -2
- package/cjs/layout/sidemal-test/Filter.js +0 -49
- package/cjs/layout/sidemal-test/Filter.js.map +0 -1
- package/cjs/layout/sidemal-test/Header.d.ts +0 -2
- package/cjs/layout/sidemal-test/Header.js +0 -49
- package/cjs/layout/sidemal-test/Header.js.map +0 -1
- package/cjs/layout/sidemal-test/Intro.d.ts +0 -2
- package/cjs/layout/sidemal-test/Intro.js +0 -37
- package/cjs/layout/sidemal-test/Intro.js.map +0 -1
- package/cjs/layout/sidemal-test/Sidebar.d.ts +0 -4
- package/cjs/layout/sidemal-test/Sidebar.js +0 -50
- package/cjs/layout/sidemal-test/Sidebar.js.map +0 -1
- package/cjs/layout/sidemal-test/content-box/ContentBox.d.ts +0 -8
- package/cjs/layout/sidemal-test/content-box/ContentBox.js +0 -66
- package/cjs/layout/sidemal-test/content-box/ContentBox.js.map +0 -1
- package/cjs/layout/sidemal-test/content-box/index.d.ts +0 -1
- package/cjs/layout/sidemal-test/content-box/index.js +0 -9
- package/cjs/layout/sidemal-test/content-box/index.js.map +0 -1
- package/esm/layout/sidemal-test/AvatarPanel.d.ts +0 -4
- package/esm/layout/sidemal-test/AvatarPanel.js +0 -12
- package/esm/layout/sidemal-test/AvatarPanel.js.map +0 -1
- package/esm/layout/sidemal-test/Content.d.ts +0 -2
- package/esm/layout/sidemal-test/Content.js +0 -60
- package/esm/layout/sidemal-test/Content.js.map +0 -1
- package/esm/layout/sidemal-test/Filter.d.ts +0 -2
- package/esm/layout/sidemal-test/Filter.js +0 -22
- package/esm/layout/sidemal-test/Filter.js.map +0 -1
- package/esm/layout/sidemal-test/Header.d.ts +0 -2
- package/esm/layout/sidemal-test/Header.js +0 -42
- package/esm/layout/sidemal-test/Header.js.map +0 -1
- package/esm/layout/sidemal-test/Intro.d.ts +0 -2
- package/esm/layout/sidemal-test/Intro.js +0 -30
- package/esm/layout/sidemal-test/Intro.js.map +0 -1
- package/esm/layout/sidemal-test/Sidebar.d.ts +0 -4
- package/esm/layout/sidemal-test/Sidebar.js +0 -41
- package/esm/layout/sidemal-test/Sidebar.js.map +0 -1
- package/esm/layout/sidemal-test/content-box/ContentBox.d.ts +0 -8
- package/esm/layout/sidemal-test/content-box/ContentBox.js +0 -37
- package/esm/layout/sidemal-test/content-box/ContentBox.js.map +0 -1
- package/esm/layout/sidemal-test/content-box/index.d.ts +0 -1
- package/esm/layout/sidemal-test/content-box/index.js +0 -2
- package/esm/layout/sidemal-test/content-box/index.js.map +0 -1
- package/src/layout/sidemal-test/AvatarPanel.tsx +0 -27
- package/src/layout/sidemal-test/Content.tsx +0 -129
- package/src/layout/sidemal-test/Filter.tsx +0 -46
- package/src/layout/sidemal-test/Header.tsx +0 -96
- package/src/layout/sidemal-test/Intro.tsx +0 -91
- package/src/layout/sidemal-test/Sidebar.tsx +0 -77
- package/src/layout/sidemal-test/content-box/ContentBox.tsx +0 -46
- package/src/layout/sidemal-test/content-box/index.ts +0 -1
- package/src/layout/sidemal-test/styling.css +0 -43
package/cjs/alert/Alert.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
5
5
|
*/
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
/**
|
|
8
|
-
* Changes colors and icon
|
|
8
|
+
* Level of severity. Changes colors and icon.
|
|
9
9
|
*/
|
|
10
10
|
variant: "error" | "warning" | "info" | "success";
|
|
11
11
|
/**
|
|
@@ -19,15 +19,20 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
19
19
|
*/
|
|
20
20
|
fullWidth?: boolean;
|
|
21
21
|
/**
|
|
22
|
-
*
|
|
22
|
+
* Sets max-width on the content to 43.5rem.
|
|
23
|
+
* @default true
|
|
24
|
+
*/
|
|
25
|
+
contentMaxWidth?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Removes background, border and padding.
|
|
23
28
|
* @default false
|
|
24
29
|
*/
|
|
25
30
|
inline?: boolean;
|
|
26
31
|
/**
|
|
27
|
-
*
|
|
32
|
+
* Adds a close-button (X).
|
|
28
33
|
*
|
|
29
34
|
* **Requires onClose to be set**.
|
|
30
|
-
* @default
|
|
35
|
+
* @default false
|
|
31
36
|
*/
|
|
32
37
|
closeButton?: boolean;
|
|
33
38
|
/**
|
package/cjs/alert/Alert.js
CHANGED
|
@@ -68,16 +68,18 @@ const Icon = (_a) => {
|
|
|
68
68
|
* ```
|
|
69
69
|
*/
|
|
70
70
|
exports.Alert = (0, react_1.forwardRef)((_a, ref) => {
|
|
71
|
-
var { children, className, variant, size = "medium", fullWidth = false, inline = false, closeButton = false, onClose } = _a, rest = __rest(_a, ["children", "className", "variant", "size", "fullWidth", "inline", "closeButton", "onClose"]);
|
|
71
|
+
var { children, className, variant, size = "medium", fullWidth = false, contentMaxWidth = true, inline = false, closeButton = false, onClose } = _a, rest = __rest(_a, ["children", "className", "variant", "size", "fullWidth", "contentMaxWidth", "inline", "closeButton", "onClose"]);
|
|
72
72
|
return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, {
|
|
73
73
|
"navds-alert--full-width": fullWidth,
|
|
74
74
|
"navds-alert--inline": inline,
|
|
75
75
|
"navds-alert--close-button": closeButton,
|
|
76
76
|
}) }),
|
|
77
77
|
react_1.default.createElement(Icon, { variant: variant, className: "navds-alert__icon" }),
|
|
78
|
-
react_1.default.createElement(typography_1.BodyLong, { as: "div", size: size, className: "navds-alert__wrapper" }, children),
|
|
78
|
+
react_1.default.createElement(typography_1.BodyLong, { as: "div", size: size, className: (0, clsx_1.default)("navds-alert__wrapper", contentMaxWidth && "navds-alert__wrapper--maxwidth") }, children),
|
|
79
79
|
closeButton && !inline && (react_1.default.createElement("div", { className: "navds-alert__button-wrapper" },
|
|
80
|
-
react_1.default.createElement(button_1.Button, { className: "navds-alert__button", size: "small", variant: "tertiary-neutral", onClick: onClose, type: "button", icon: react_1.default.createElement(aksel_icons_1.XMarkIcon, { title: "
|
|
80
|
+
react_1.default.createElement(button_1.Button, { className: "navds-alert__button", size: "small", variant: "tertiary-neutral", onClick: onClose, type: "button", icon: react_1.default.createElement(aksel_icons_1.XMarkIcon, { title: ["error", "warning"].includes(variant)
|
|
81
|
+
? "Lukk varsel"
|
|
82
|
+
: "Lukk melding" }) })))));
|
|
81
83
|
});
|
|
82
84
|
exports.default = exports.Alert;
|
|
83
85
|
//# sourceMappingURL=Alert.js.map
|
package/cjs/alert/Alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,qDAM6B;AAC7B,sCAAmC;AACnC,8CAAyC;
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/alert/Alert.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,qDAM6B;AAC7B,sCAAmC;AACnC,8CAAyC;AA8CzC,MAAM,IAAI,GAAG,CAAC,EAAqB,EAAE,EAAE;QAAzB,EAAE,OAAO,OAAY,EAAP,KAAK,cAAnB,WAAqB,CAAF;IAC/B,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,OAAO;YACV,OAAO,8BAAC,kCAAoB,kBAAC,KAAK,EAAC,MAAM,IAAK,KAAK,EAAI,CAAC;QAC1D,KAAK,SAAS;YACZ,OAAO,8BAAC,6CAA+B,kBAAC,KAAK,EAAC,UAAU,IAAK,KAAK,EAAI,CAAC;QACzE,KAAK,MAAM;YACT,OAAO,8BAAC,uCAAyB,kBAAC,KAAK,EAAC,aAAa,IAAK,KAAK,EAAI,CAAC;QACtE,KAAK,SAAS;YACZ,OAAO,8BAAC,qCAAuB,kBAAC,KAAK,EAAC,SAAS,IAAK,KAAK,EAAI,CAAC;QAChE;YACE,OAAO,IAAI,CAAC;IAChB,CAAC;AACH,CAAC,CAAC;AAMF;;;;;;;;GAQG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,IAAI,EACtB,MAAM,GAAG,KAAK,EACd,WAAW,GAAG,KAAK,EACnB,OAAO,OAER,EADI,IAAI,cAVT,gHAWC,CADQ;IAIT,OAAO,CACL,uDACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EACX,SAAS,EACT,aAAa,EACb,gBAAgB,OAAO,EAAE,EACzB,gBAAgB,IAAI,EAAE,EACtB;YACE,yBAAyB,EAAE,SAAS;YACpC,qBAAqB,EAAE,MAAM;YAC7B,2BAA2B,EAAE,WAAW;SACzC,CACF;QAED,8BAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,mBAAmB,GAAG;QACxD,8BAAC,qBAAQ,IACP,EAAE,EAAC,KAAK,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,cAAE,EACX,sBAAsB,EACtB,eAAe,IAAI,gCAAgC,CACpD,IAEA,QAAQ,CACA;QACV,WAAW,IAAI,CAAC,MAAM,IAAI,CACzB,uCAAK,SAAS,EAAC,6BAA6B;YAC1C,8BAAC,eAAM,IACL,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,kBAAkB,EAC1B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EACF,8BAAC,uBAAS,IACR,KAAK,EACH,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC;wBACpC,CAAC,CAAC,aAAa;wBACf,CAAC,CAAC,cAAc,GAEpB,GAEJ,CACE,CACP,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,aAAK,CAAC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ResponsiveProp, SpacingScale } from "../utilities/types";
|
|
3
|
-
export
|
|
4
|
-
children: React.ReactElement;
|
|
3
|
+
export type PrimitiveProps = {
|
|
5
4
|
className?: string;
|
|
6
5
|
/**
|
|
7
6
|
* Padding around children.
|
|
@@ -32,6 +31,35 @@ export interface BasePrimitiveProps {
|
|
|
32
31
|
* paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
|
|
33
32
|
*/
|
|
34
33
|
paddingBlock?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
|
|
34
|
+
/**
|
|
35
|
+
* Margin around element.
|
|
36
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
|
|
37
|
+
* or an object of spacing tokens for different breakpoints.
|
|
38
|
+
* @example
|
|
39
|
+
* margin='4'
|
|
40
|
+
* margin={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
|
|
41
|
+
*/
|
|
42
|
+
margin?: ResponsiveProp<SpacingScale>;
|
|
43
|
+
/**
|
|
44
|
+
* Horizontal margin around element.
|
|
45
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
|
|
46
|
+
* or an object of spacing tokens for different breakpoints.
|
|
47
|
+
* @example
|
|
48
|
+
* marginInline='4'
|
|
49
|
+
* marginInline='4 5'
|
|
50
|
+
* marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
|
|
51
|
+
*/
|
|
52
|
+
marginInline?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}` | "auto" | `auto ${SpacingScale}` | `${SpacingScale} auto`>;
|
|
53
|
+
/**
|
|
54
|
+
* Vertical margin around element.
|
|
55
|
+
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
|
|
56
|
+
* or an object of spacing tokens for different breakpoints.
|
|
57
|
+
* @example
|
|
58
|
+
* marginBlock='4'
|
|
59
|
+
* marginBlock='4 5'
|
|
60
|
+
* marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
|
|
61
|
+
*/
|
|
62
|
+
marginBlock?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}` | "auto" | `auto ${SpacingScale}` | `${SpacingScale} auto`>;
|
|
35
63
|
/**
|
|
36
64
|
* CSS `width`
|
|
37
65
|
*/
|
|
@@ -130,6 +158,10 @@ export interface BasePrimitiveProps {
|
|
|
130
158
|
* CSS `flex-grow`
|
|
131
159
|
*/
|
|
132
160
|
flexGrow?: ResponsiveProp<string>;
|
|
161
|
+
};
|
|
162
|
+
export declare const PRIMITIVE_PROPS: (keyof PrimitiveProps)[];
|
|
163
|
+
interface BasePrimitiveProps extends PrimitiveProps {
|
|
164
|
+
children: React.ReactElement;
|
|
133
165
|
}
|
|
134
|
-
export declare const BasePrimitive: ({ children, className, padding, paddingInline, paddingBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink, }: BasePrimitiveProps) => React.JSX.Element;
|
|
166
|
+
export declare const BasePrimitive: ({ children, className, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink, }: BasePrimitiveProps) => React.JSX.Element;
|
|
135
167
|
export default BasePrimitive;
|
|
@@ -3,18 +3,48 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.BasePrimitive = void 0;
|
|
6
|
+
exports.BasePrimitive = exports.PRIMITIVE_PROPS = void 0;
|
|
7
7
|
const clsx_1 = __importDefault(require("clsx"));
|
|
8
8
|
const react_1 = __importDefault(require("react"));
|
|
9
9
|
const Slot_1 = require("../../slot/Slot");
|
|
10
10
|
const css_1 = require("../utilities/css");
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
exports.PRIMITIVE_PROPS = [
|
|
12
|
+
"className",
|
|
13
|
+
"padding",
|
|
14
|
+
"paddingInline",
|
|
15
|
+
"paddingBlock",
|
|
16
|
+
"margin",
|
|
17
|
+
"marginInline",
|
|
18
|
+
"marginBlock",
|
|
19
|
+
"width",
|
|
20
|
+
"minWidth",
|
|
21
|
+
"maxWidth",
|
|
22
|
+
"height",
|
|
23
|
+
"minHeight",
|
|
24
|
+
"maxHeight",
|
|
25
|
+
"position",
|
|
26
|
+
"inset",
|
|
27
|
+
"top",
|
|
28
|
+
"right",
|
|
29
|
+
"bottom",
|
|
30
|
+
"left",
|
|
31
|
+
"overflow",
|
|
32
|
+
"overflowX",
|
|
33
|
+
"overflowY",
|
|
34
|
+
"flexBasis",
|
|
35
|
+
"flexGrow",
|
|
36
|
+
"flexShrink",
|
|
37
|
+
];
|
|
38
|
+
const BasePrimitive = ({ children, className, padding, paddingInline, paddingBlock, margin, marginInline, marginBlock, width, minWidth, maxWidth, height, minHeight, maxHeight, position, inset, top, right, left, bottom, overflow, overflowX, overflowY, flexBasis, flexGrow, flexShrink, }) => {
|
|
39
|
+
const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (0, css_1.getResponsiveProps)("r", "p", "spacing", padding)), (0, css_1.getResponsiveProps)("r", "pi", "spacing", paddingInline)), (0, css_1.getResponsiveProps)("r", "pb", "spacing", paddingBlock)), (0, css_1.getResponsiveProps)("r", "m", "spacing", margin)), (0, css_1.getResponsiveProps)("r", "mi", "spacing", marginInline)), (0, css_1.getResponsiveProps)("r", "mb", "spacing", marginBlock)), (0, css_1.getResponsiveValue)("r", "w", width)), (0, css_1.getResponsiveValue)("r", "minw", minWidth)), (0, css_1.getResponsiveValue)("r", "maxw", maxWidth)), (0, css_1.getResponsiveValue)("r", "h", height)), (0, css_1.getResponsiveValue)("r", "minh", minHeight)), (0, css_1.getResponsiveValue)("r", "maxh", maxHeight)), (0, css_1.getResponsiveValue)("r", "position", position)), (0, css_1.getResponsiveProps)("r", "inset", "spacing", inset)), (0, css_1.getResponsiveProps)("r", "top", "spacing", top)), (0, css_1.getResponsiveProps)("r", "right", "spacing", right)), (0, css_1.getResponsiveProps)("r", "bottom", "spacing", bottom)), (0, css_1.getResponsiveProps)("r", "left", "spacing", left)), (0, css_1.getResponsiveValue)("r", "overflow", overflow)), (0, css_1.getResponsiveValue)("r", "overflowx", overflowX)), (0, css_1.getResponsiveValue)("r", "overflowy", overflowY)), (0, css_1.getResponsiveValue)("r", "flex-basis", flexBasis)), (0, css_1.getResponsiveValue)("r", "flex-grow", flexGrow)), (0, css_1.getResponsiveValue)("r", "flex-shrink", flexShrink));
|
|
13
40
|
return (react_1.default.createElement(Slot_1.Slot, { className: (0, clsx_1.default)({
|
|
14
41
|
className,
|
|
15
42
|
"navds-r-p": padding,
|
|
16
43
|
"navds-r-pi": paddingInline,
|
|
17
44
|
"navds-r-pb": paddingBlock,
|
|
45
|
+
"navds-r-m": margin,
|
|
46
|
+
"navds-r-mi": marginInline,
|
|
47
|
+
"navds-r-mb": marginBlock,
|
|
18
48
|
"navds-r-w": width,
|
|
19
49
|
"navds-r-minw": minWidth,
|
|
20
50
|
"navds-r-maxw": maxWidth,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BasePrimitive.js","sourceRoot":"","sources":["../../../src/layout/base/BasePrimitive.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAsB;AACtB,kDAA0B;AAC1B,0CAAuC;AACvC,0CAA0E;
|
|
1
|
+
{"version":3,"file":"BasePrimitive.js","sourceRoot":"","sources":["../../../src/layout/base/BasePrimitive.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export type PrimitiveAsChildProps = {
|
|
3
|
+
children: React.ReactElement | false | null;
|
|
4
|
+
/**
|
|
5
|
+
* Renders the component and its child as a single element,
|
|
6
|
+
* merging the props of the component with the props of the child.
|
|
7
|
+
* @example
|
|
8
|
+
* ```tsx
|
|
9
|
+
* <Component asChild data-prop>
|
|
10
|
+
* <ChildComponent data-child />
|
|
11
|
+
* </Component>
|
|
12
|
+
*
|
|
13
|
+
* // Renders
|
|
14
|
+
* <div data-prop data-child />
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
asChild: true;
|
|
18
|
+
/**
|
|
19
|
+
* Implements [OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent)
|
|
20
|
+
*
|
|
21
|
+
* When using asChild, the prop is not allowed as it would have no effect.
|
|
22
|
+
*/
|
|
23
|
+
as?: never;
|
|
24
|
+
} | {
|
|
25
|
+
children?: React.ReactNode;
|
|
26
|
+
/**
|
|
27
|
+
* Renders the component and its child as a single element,
|
|
28
|
+
* merging the props of the component with the props of the child.
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* ```tsx
|
|
32
|
+
* <Component asChild data-prop>
|
|
33
|
+
* <ChildComponent data-child />
|
|
34
|
+
* </Component>
|
|
35
|
+
*
|
|
36
|
+
* // Renders
|
|
37
|
+
* <div data-prop data-child />
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
asChild?: false;
|
|
41
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PrimitiveAsChildProps.js","sourceRoot":"","sources":["../../../src/layout/base/PrimitiveAsChildProps.ts"],"names":[],"mappings":""}
|
package/cjs/layout/box/Box.d.ts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { OverridableComponent } from "../../util/types";
|
|
3
|
-
import {
|
|
4
|
-
|
|
3
|
+
import { PrimitiveProps } from "../base/BasePrimitive";
|
|
4
|
+
import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
|
|
5
|
+
import { BackgroundColorToken, BorderColorToken, BorderRadiiToken, ResponsiveProp, ShadowToken, SpaceDelimitedAttribute, SurfaceColorToken } from "../utilities/types";
|
|
6
|
+
export type BoxProps = PrimitiveProps & PrimitiveAsChildProps & React.HTMLAttributes<HTMLDivElement> & {
|
|
5
7
|
/**
|
|
6
8
|
* CSS `background-color` property.
|
|
7
9
|
* Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
|
|
@@ -29,41 +31,12 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
29
31
|
* borderWidth='1 2 3 4'
|
|
30
32
|
*/
|
|
31
33
|
borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
|
|
32
|
-
/**
|
|
33
|
-
* Padding around children.
|
|
34
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
|
|
35
|
-
* or an object of spacing tokens for different breakpoints.
|
|
36
|
-
* @example
|
|
37
|
-
* padding='4'
|
|
38
|
-
* padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
|
|
39
|
-
*/
|
|
40
|
-
padding?: ResponsiveProp<SpacingScale>;
|
|
41
|
-
/**
|
|
42
|
-
* Horizontal padding around children.
|
|
43
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
|
|
44
|
-
* or an object of spacing tokens for different breakpoints.
|
|
45
|
-
* @example
|
|
46
|
-
* paddingInline='4'
|
|
47
|
-
* paddingInline='4 5'
|
|
48
|
-
* paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
|
|
49
|
-
*/
|
|
50
|
-
paddingInline?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
|
|
51
|
-
/**
|
|
52
|
-
* Vertical padding around children.
|
|
53
|
-
* Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
|
|
54
|
-
* or an object of spacing tokens for different breakpoints.
|
|
55
|
-
* @example
|
|
56
|
-
* paddingBlock='4'
|
|
57
|
-
* paddingBlock='4 5'
|
|
58
|
-
* paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
|
|
59
|
-
*/
|
|
60
|
-
paddingBlock?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
|
|
61
34
|
/** Shadow on box. Accepts a shadow token.
|
|
62
35
|
* @example
|
|
63
36
|
* shadow='small'
|
|
64
37
|
*/
|
|
65
38
|
shadow?: ShadowToken;
|
|
66
|
-
}
|
|
39
|
+
};
|
|
67
40
|
/**
|
|
68
41
|
* Foundational Layout-primitive for generic encapsulation & styling.
|
|
69
42
|
*
|
package/cjs/layout/box/Box.js
CHANGED
|
@@ -40,6 +40,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
40
40
|
exports.Box = void 0;
|
|
41
41
|
const clsx_1 = __importDefault(require("clsx"));
|
|
42
42
|
const react_1 = __importStar(require("react"));
|
|
43
|
+
const Slot_1 = require("../../slot/Slot");
|
|
44
|
+
const util_1 = require("../../util");
|
|
45
|
+
const BasePrimitive_1 = __importStar(require("../base/BasePrimitive"));
|
|
43
46
|
const css_1 = require("../utilities/css");
|
|
44
47
|
/**
|
|
45
48
|
* Foundational Layout-primitive for generic encapsulation & styling.
|
|
@@ -69,8 +72,8 @@ const css_1 = require("../utilities/css");
|
|
|
69
72
|
* </VStack>
|
|
70
73
|
*/
|
|
71
74
|
exports.Box = (0, react_1.forwardRef)((_a, ref) => {
|
|
72
|
-
var { as: Component = "div", background, borderColor, borderWidth, borderRadius,
|
|
73
|
-
const style = Object.assign(Object.assign(Object.assign(
|
|
75
|
+
var { children, className, as: Component = "div", background, borderColor, borderWidth, borderRadius, shadow, style: _style, asChild } = _a, rest = __rest(_a, ["children", "className", "as", "background", "borderColor", "borderWidth", "borderRadius", "shadow", "style", "asChild"]);
|
|
76
|
+
const style = Object.assign(Object.assign(Object.assign({}, _style), { "--__ac-box-background": background
|
|
74
77
|
? `var(--a-${background})`
|
|
75
78
|
: undefined, "--__ac-box-shadow": shadow ? `var(--a-shadow-${shadow})` : undefined, "--__ac-box-border-color": borderColor
|
|
76
79
|
? `var(--a-${borderColor})`
|
|
@@ -79,8 +82,16 @@ exports.Box = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
79
82
|
.split(" ")
|
|
80
83
|
.map((x) => `${x}px`)
|
|
81
84
|
.join(" ")
|
|
82
|
-
: undefined }), (0, css_1.getResponsiveProps)("box", "border-radius", "border-radius", borderRadius, false, ["0"]))
|
|
83
|
-
|
|
85
|
+
: undefined }), (0, css_1.getResponsiveProps)("box", "border-radius", "border-radius", borderRadius, false, ["0"]));
|
|
86
|
+
const Comp = asChild ? Slot_1.Slot : Component;
|
|
87
|
+
return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
|
|
88
|
+
react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, style: style, className: (0, clsx_1.default)("navds-box", className, {
|
|
89
|
+
"navds-box-bg": background,
|
|
90
|
+
"navds-box-border-color": borderColor,
|
|
91
|
+
"navds-box-border-width": borderWidth,
|
|
92
|
+
"navds-box-border-radius": borderRadius,
|
|
93
|
+
"navds-box-shadow": shadow,
|
|
94
|
+
}) }), children)));
|
|
84
95
|
});
|
|
85
96
|
exports.default = exports.Box;
|
|
86
97
|
//# sourceMappingURL=Box.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;
|
|
1
|
+
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,0CAAuC;AACvC,qCAAkC;AAElC,uEAG+B;AAE/B,0CAAsD;AAgDtD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACU,QAAA,GAAG,GAAmD,IAAA,kBAAU,EAC3E,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,MAAM,EACN,KAAK,EAAE,MAAM,EACb,OAAO,OAER,EADI,IAAI,cAXT,yHAYC,CADQ;IAIT,MAAM,KAAK,iDACN,MAAM,KACT,uBAAuB,EAAE,UAAU;YACjC,CAAC,CAAC,WAAW,UAAU,GAAG;YAC1B,CAAC,CAAC,SAAS,EACb,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC,kBAAkB,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,EACrE,yBAAyB,EAAE,WAAW;YACpC,CAAC,CAAC,WAAW,WAAW,GAAG;YAC3B,CAAC,CAAC,SAAS,EACb,yBAAyB,EAAE,WAAW;YACpC,CAAC,CAAC,WAAW;iBACR,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC;iBACpB,IAAI,CAAC,GAAG,CAAC;YACd,CAAC,CAAC,SAAS,KACV,IAAA,wBAAkB,EACnB,KAAK,EACL,eAAe,EACf,eAAe,EACf,YAAY,EACZ,KAAK,EACL,CAAC,GAAG,CAAC,CACN,CACF,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,cAAE,EAAC,WAAW,EAAE,SAAS,EAAE;gBACpC,cAAc,EAAE,UAAU;gBAC1B,wBAAwB,EAAE,WAAW;gBACrC,wBAAwB,EAAE,WAAW;gBACrC,yBAAyB,EAAE,YAAY;gBACvC,kBAAkB,EAAE,MAAM;aAC3B,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAe,WAAG,CAAC"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { OverridableComponent } from "../../util";
|
|
3
|
+
import { PrimitiveProps } from "../base/BasePrimitive";
|
|
4
|
+
import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
|
|
2
5
|
import { ResponsiveProp, SpacingScale } from "../utilities/types";
|
|
3
|
-
export
|
|
4
|
-
children: React.ReactNode;
|
|
6
|
+
export type HGridProps = PrimitiveProps & PrimitiveAsChildProps & React.HTMLAttributes<HTMLDivElement> & {
|
|
5
7
|
/**
|
|
6
8
|
* Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints.
|
|
7
9
|
* Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
|
|
@@ -25,7 +27,7 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
25
27
|
* Vertical alignment of children. Elements will by default stretch to the height of parent-element.
|
|
26
28
|
*/
|
|
27
29
|
align?: "start" | "center" | "end";
|
|
28
|
-
}
|
|
30
|
+
};
|
|
29
31
|
/**
|
|
30
32
|
* Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
|
|
31
33
|
*
|
|
@@ -51,5 +53,5 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
51
53
|
* <div />
|
|
52
54
|
* </HGrid>
|
|
53
55
|
*/
|
|
54
|
-
export declare const HGrid:
|
|
56
|
+
export declare const HGrid: OverridableComponent<HGridProps, HTMLDivElement>;
|
|
55
57
|
export default HGrid;
|
package/cjs/layout/grid/HGrid.js
CHANGED
|
@@ -40,6 +40,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
40
40
|
exports.HGrid = void 0;
|
|
41
41
|
const clsx_1 = __importDefault(require("clsx"));
|
|
42
42
|
const react_1 = __importStar(require("react"));
|
|
43
|
+
const Slot_1 = require("../../slot/Slot");
|
|
44
|
+
const util_1 = require("../../util");
|
|
45
|
+
const BasePrimitive_1 = __importStar(require("../base/BasePrimitive"));
|
|
43
46
|
const css_1 = require("../utilities/css");
|
|
44
47
|
/**
|
|
45
48
|
* Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
|
|
@@ -67,9 +70,11 @@ const css_1 = require("../utilities/css");
|
|
|
67
70
|
* </HGrid>
|
|
68
71
|
*/
|
|
69
72
|
exports.HGrid = (0, react_1.forwardRef)((_a, ref) => {
|
|
70
|
-
var { className, columns, gap, style, align } = _a, rest = __rest(_a, ["className", "columns", "gap", "style", "align"]);
|
|
73
|
+
var { children, className, as: Component = "div", columns, gap, style, align, asChild } = _a, rest = __rest(_a, ["children", "className", "as", "columns", "gap", "style", "align", "asChild"]);
|
|
71
74
|
const styles = Object.assign(Object.assign(Object.assign(Object.assign({}, style), { "--__ac-hgrid-align": align }), (0, css_1.getResponsiveProps)(`hgrid`, "gap", "spacing", gap)), (0, css_1.getResponsiveValue)(`hgrid`, "columns", formatGrid(columns)));
|
|
72
|
-
|
|
75
|
+
const Comp = asChild ? Slot_1.Slot : Component;
|
|
76
|
+
return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
|
|
77
|
+
react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, className: (0, clsx_1.default)("navds-hgrid", className), style: styles }), children)));
|
|
73
78
|
});
|
|
74
79
|
function formatGrid(props) {
|
|
75
80
|
if (!props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HGrid.js","sourceRoot":"","sources":["../../../src/layout/grid/HGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+
|
|
1
|
+
{"version":3,"file":"HGrid.js","sourceRoot":"","sources":["../../../src/layout/grid/HGrid.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0C;AAC1C,0CAAuC;AACvC,qCAAwD;AACxD,uEAG+B;AAE/B,0CAA0E;AA8B1E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACU,QAAA,KAAK,GAChB,IAAA,kBAAU,EACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,OAAO,EACP,GAAG,EACH,KAAK,EACL,KAAK,EACL,OAAO,OAER,EADI,IAAI,cATT,8EAUC,CADQ;IAIT,MAAM,MAAM,+DACP,KAAK,KACR,oBAAoB,EAAE,KAAK,KACxB,IAAA,wBAAkB,EAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,IAAA,wBAAkB,EAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAC/D,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAE,EAAC,aAAa,EAAE,SAAS,CAAC,EACvC,KAAK,EAAE,MAAM,KAEZ,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,SAAS,UAAU,CACjB,KAAuC;IAEvC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC3D,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC;QAC5D,eAAe;QACf,cAAc,CAAC,WAAW,CAAC;KAC5B,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,IAAqB,EAAE,EAAE;IAC/C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO,UAAU,IAAI,mBAAmB,CAAC;IAC3C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,kBAAe,aAAK,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { OverridableComponent } from "../../util/types";
|
|
2
|
+
import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
|
|
2
3
|
import { StackProps } from "./Stack";
|
|
3
|
-
export type HStackProps = Omit<StackProps, "direction">;
|
|
4
|
+
export type HStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction">;
|
|
4
5
|
/**
|
|
5
6
|
* Layout-primitive for horizontal flexbox
|
|
6
7
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HStack.js","sourceRoot":"","sources":["../../../src/layout/stack/HStack.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;
|
|
1
|
+
{"version":3,"file":"HStack.js","sourceRoot":"","sources":["../../../src/layout/stack/HStack.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAG1C,mCAA4C;AAI5C;;;;;;;;;;;;;;;;;;;GAmBG;AACU,QAAA,MAAM,GACjB,IAAA,kBAAU,EAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxB,OAAO,8BAAC,aAAK,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,KAAK,IAAG,CAAC;AACxD,CAAC,CAAC,CAAC;AAEL,kBAAe,cAAM,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { HTMLAttributes } from "react";
|
|
2
2
|
import { OverridableComponent } from "../../util/types";
|
|
3
|
+
import { PrimitiveProps } from "../base/BasePrimitive";
|
|
4
|
+
import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
|
|
3
5
|
import { ResponsiveProp, SpacingScale } from "../utilities/types";
|
|
4
|
-
export
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
+
export type StackProps = PrimitiveProps & PrimitiveAsChildProps & HTMLAttributes<HTMLDivElement> & {
|
|
6
7
|
/**
|
|
7
8
|
* CSS `justify-content` property.
|
|
8
9
|
*
|
|
@@ -13,6 +14,7 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
13
14
|
justify?: ResponsiveProp<"start" | "center" | "end" | "space-around" | "space-between" | "space-evenly">;
|
|
14
15
|
/**
|
|
15
16
|
* CSS `align-items` property.
|
|
17
|
+
* @default "stretch"
|
|
16
18
|
*
|
|
17
19
|
* @example
|
|
18
20
|
* align='center'
|
|
@@ -30,9 +32,10 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
30
32
|
*
|
|
31
33
|
* @example
|
|
32
34
|
* gap='4'
|
|
35
|
+
* gap='8 4'
|
|
33
36
|
* gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
|
|
34
37
|
*/
|
|
35
|
-
gap?: ResponsiveProp<SpacingScale
|
|
38
|
+
gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
|
|
36
39
|
/**
|
|
37
40
|
* CSS `flex-direction` property.
|
|
38
41
|
* @default "row"
|
|
@@ -42,6 +45,6 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
42
45
|
* direction={{xs: 'row', sm: 'column'}}
|
|
43
46
|
*/
|
|
44
47
|
direction?: ResponsiveProp<"row" | "column" | "row-reverse" | "column-reverse">;
|
|
45
|
-
}
|
|
48
|
+
};
|
|
46
49
|
export declare const Stack: OverridableComponent<StackProps, HTMLDivElement>;
|
|
47
50
|
export default Stack;
|
|
@@ -40,14 +40,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
40
40
|
exports.Stack = void 0;
|
|
41
41
|
const clsx_1 = __importDefault(require("clsx"));
|
|
42
42
|
const react_1 = __importStar(require("react"));
|
|
43
|
+
const Slot_1 = require("../../slot/Slot");
|
|
44
|
+
const util_1 = require("../../util");
|
|
45
|
+
const BasePrimitive_1 = __importStar(require("../base/BasePrimitive"));
|
|
43
46
|
const css_1 = require("../utilities/css");
|
|
44
47
|
exports.Stack = (0, react_1.forwardRef)((_a, ref) => {
|
|
45
|
-
var { as: Component = "div",
|
|
48
|
+
var { children, className, as: Component = "div", align = "stretch", justify, wrap = true, gap, style: _style, direction = "row", asChild } = _a, rest = __rest(_a, ["children", "className", "as", "align", "justify", "wrap", "gap", "style", "direction", "asChild"]);
|
|
46
49
|
const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, _style), { "--__ac-stack-wrap": wrap ? "wrap" : "nowrap" }), (0, css_1.getResponsiveProps)(`stack`, "gap", "spacing", gap)), (0, css_1.getResponsiveValue)(`stack`, "direction", direction)), (0, css_1.getResponsiveValue)(`stack`, "align", align)), (0, css_1.getResponsiveValue)(`stack`, "justify", justify));
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
50
|
+
const Comp = asChild ? Slot_1.Slot : Component;
|
|
51
|
+
return (react_1.default.createElement(BasePrimitive_1.default, Object.assign({}, rest),
|
|
52
|
+
react_1.default.createElement(Comp, Object.assign({}, (0, util_1.omit)(rest, BasePrimitive_1.PRIMITIVE_PROPS), { ref: ref, style: style, className: (0, clsx_1.default)("navds-stack", className, {
|
|
53
|
+
"navds-vstack": direction === "column",
|
|
54
|
+
"navds-hstack": direction === "row",
|
|
55
|
+
}) }), children)));
|
|
51
56
|
});
|
|
52
57
|
exports.default = exports.Stack;
|
|
53
58
|
//# sourceMappingURL=Stack.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0D;
|
|
1
|
+
{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA0D;AAC1D,0CAAuC;AACvC,qCAAkC;AAElC,uEAG+B;AAE/B,0CAA0E;AA0D7D,QAAA,KAAK,GAChB,IAAA,kBAAU,EACR,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,KAAK,GAAG,SAAS,EACjB,OAAO,EACP,IAAI,GAAG,IAAI,EACX,GAAG,EACH,KAAK,EAAE,MAAM,EACb,SAAS,GAAG,KAAK,EACjB,OAAO,OAER,EADI,IAAI,cAXT,mGAYC,CADQ;IAIT,MAAM,KAAK,2FACN,MAAM,KACT,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAC1C,IAAA,wBAAkB,EAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,IAAA,wBAAkB,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,GACnD,IAAA,wBAAkB,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,GAC3C,IAAA,wBAAkB,EAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CACnD,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,WAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,8BAAC,uBAAa,oBAAK,IAAI;QACrB,8BAAC,IAAI,oBACC,IAAA,WAAI,EAAC,IAAI,EAAE,+BAAe,CAAC,IAC/B,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,cAAE,EAAC,aAAa,EAAE,SAAS,EAAE;gBACtC,cAAc,EAAE,SAAS,KAAK,QAAQ;gBACtC,cAAc,EAAE,SAAS,KAAK,KAAK;aACpC,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,kBAAe,aAAK,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { OverridableComponent } from "../../util/types";
|
|
2
|
+
import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
|
|
2
3
|
import { StackProps } from "./Stack";
|
|
3
|
-
export type VStackProps = Omit<StackProps, "direction" | "wrap">;
|
|
4
|
+
export type VStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction" | "wrap">;
|
|
4
5
|
/**
|
|
5
6
|
* Layout-primitive for vetical flexbox
|
|
6
7
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VStack.js","sourceRoot":"","sources":["../../../src/layout/stack/VStack.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;
|
|
1
|
+
{"version":3,"file":"VStack.js","sourceRoot":"","sources":["../../../src/layout/stack/VStack.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAG1C,mCAA4C;AAK5C;;;;;;;;;;;;;;;;;;;GAmBG;AACU,QAAA,MAAM,GACjB,IAAA,kBAAU,EAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACxB,OAAO,8BAAC,aAAK,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,IAAI,CAAC;AACxE,CAAC,CAAC,CAAC;AAEL,kBAAe,cAAM,CAAC"}
|
|
@@ -35,6 +35,9 @@ const translateTokenStringToCSS = (componentProp, tokenString, tokenSubgroup, to
|
|
|
35
35
|
const width = 100 / arr.length;
|
|
36
36
|
return `calc((100vw - ${width}%)/2)`;
|
|
37
37
|
}
|
|
38
|
+
if (["mi", "mb"].includes(componentProp) && x === "auto") {
|
|
39
|
+
return "auto";
|
|
40
|
+
}
|
|
38
41
|
let output = `var(--a-${tokenSubgroup}-${x})`;
|
|
39
42
|
if (tokenExceptions.includes(x)) {
|
|
40
43
|
output = translateExceptionToCSS(x);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../src/layout/utilities/css.ts"],"names":[],"mappings":";;;AAEA,SAAgB,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,cAAkC;IAElC,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE,CAAC;QACvC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAAE,cAAc;SAChE,CAAC;IACJ,CAAC;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,eAAe,CAAC,EAAE,EAAE,CAAC;QACzE,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE;QAC7D,eAAe;KAChB,CAAC,CACH,CAAC;AACJ,CAAC;AArBD,gDAqBC;AAED,MAAM,uBAAuB,GAAG,CAAC,SAAiB,EAAE,EAAE;IACpD,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,IAAI;YACP,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAChC,aAAqB,EACrB,WAAmB,EACnB,aAAqB,EACrB,eAAyB,EACzB,MAAe,EACf,EAAE;IACF,OAAO,WAAW;SACf,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE;QACjB,IAAI,aAAa,KAAK,eAAe,IAAI,CAAC,KAAK,MAAM,EAAE,CAAC;YACtD,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;YAC/B,OAAO,iBAAiB,KAAK,QAAQ,CAAC;QACxC,CAAC;QAED,IAAI,aAAa,KAAK,gBAAgB,IAAI,CAAC,KAAK,MAAM,EAAE,CAAC;YACvD,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;YAC/B,OAAO,iBAAiB,KAAK,OAAO,CAAC;QACvC,CAAC;QAED,IAAI,MAAM,GAAG,WAAW,aAAa,IAAI,CAAC,GAAG,CAAC;QAC9C,IAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;YAChC,MAAM,GAAG,uBAAuB,CAAC,CAAC,CAAC,CAAC;QACtC,CAAC;QACD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;gBACd,OAAO,GAAG,CAAC;YACb,CAAC;YACD,OAAO,aAAa,MAAM,GAAG,CAAC;QAChC,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC,CAAC;AAEF,SAAgB,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,aAAqB,EACrB,cAAkC,EAClC,MAAM,GAAG,KAAK,EACd,kBAA4B,EAAE;IAE9B,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE,CAAC;QACvC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAC7C,yBAAyB,CACvB,aAAa,EACb,cAAc,EACd,aAAa,EACb,eAAe,EACf,MAAM,CACP;SACJ,CAAC;IACJ,CAAC;IAED,MAAM,UAAU,GAAG,EAAE,CAAC;IACtB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,EAAE;QACzE,UAAU,CAAC,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE,CAAC;YACvE,yBAAyB,CACvB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,eAAe,EACf,MAAM,CACP,CAAC;IACN,CAAC,CAAC,CAAC;IACH,OAAO,UAAU,CAAC;AACpB,CAAC;AArCD,gDAqCC"}
|
|
1
|
+
{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../src/layout/utilities/css.ts"],"names":[],"mappings":";;;AAEA,SAAgB,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,cAAkC;IAElC,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE,CAAC;QACvC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAAE,cAAc;SAChE,CAAC;IACJ,CAAC;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,eAAe,CAAC,EAAE,EAAE,CAAC;QACzE,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE;QAC7D,eAAe;KAChB,CAAC,CACH,CAAC;AACJ,CAAC;AArBD,gDAqBC;AAED,MAAM,uBAAuB,GAAG,CAAC,SAAiB,EAAE,EAAE;IACpD,QAAQ,SAAS,EAAE,CAAC;QAClB,KAAK,IAAI;YACP,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAChC,aAAqB,EACrB,WAAmB,EACnB,aAAqB,EACrB,eAAyB,EACzB,MAAe,EACf,EAAE;IACF,OAAO,WAAW;SACf,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE;QACjB,IAAI,aAAa,KAAK,eAAe,IAAI,CAAC,KAAK,MAAM,EAAE,CAAC;YACtD,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;YAC/B,OAAO,iBAAiB,KAAK,QAAQ,CAAC;QACxC,CAAC;QAED,IAAI,aAAa,KAAK,gBAAgB,IAAI,CAAC,KAAK,MAAM,EAAE,CAAC;YACvD,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;YAC/B,OAAO,iBAAiB,KAAK,OAAO,CAAC;QACvC,CAAC;QACD,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,MAAM,EAAE,CAAC;YACzD,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,IAAI,MAAM,GAAG,WAAW,aAAa,IAAI,CAAC,GAAG,CAAC;QAC9C,IAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;YAChC,MAAM,GAAG,uBAAuB,CAAC,CAAC,CAAC,CAAC;QACtC,CAAC;QACD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;gBACd,OAAO,GAAG,CAAC;YACb,CAAC;YACD,OAAO,aAAa,MAAM,GAAG,CAAC;QAChC,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC,CAAC;AAEF,SAAgB,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,aAAqB,EACrB,cAAkC,EAClC,MAAM,GAAG,KAAK,EACd,kBAA4B,EAAE;IAE9B,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE,CAAC;QACvC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAC7C,yBAAyB,CACvB,aAAa,EACb,cAAc,EACd,aAAa,EACb,eAAe,EACf,MAAM,CACP;SACJ,CAAC;IACJ,CAAC;IAED,MAAM,UAAU,GAAG,EAAE,CAAC;IACtB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,EAAE;QACzE,UAAU,CAAC,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE,CAAC;YACvE,yBAAyB,CACvB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,eAAe,EACf,MAAM,CACP,CAAC;IACN,CAAC,CAAC,CAAC;IACH,OAAO,UAAU,CAAC;AACpB,CAAC;AArCD,gDAqCC"}
|
package/cjs/modal/Modal.js
CHANGED
|
@@ -103,7 +103,7 @@ const polyfillClassName = "navds-modal--polyfilled";
|
|
|
103
103
|
*/
|
|
104
104
|
exports.Modal = (0, react_2.forwardRef)((_a, ref) => {
|
|
105
105
|
var _b, _c;
|
|
106
|
-
var { header, children, open, onBeforeClose, onCancel, closeOnBackdropClick, width, portal, className, "aria-labelledby": ariaLabelledby, style, onClick, onMouseDown } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "closeOnBackdropClick", "width", "portal", "className", "aria-labelledby", "style", "onClick", "onMouseDown"]);
|
|
106
|
+
var { header, children, open, onBeforeClose, onCancel, closeOnBackdropClick, width, placement, portal, className, "aria-labelledby": ariaLabelledby, style, onClick, onMouseDown } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "closeOnBackdropClick", "width", "placement", "portal", "className", "aria-labelledby", "style", "onClick", "onMouseDown"]);
|
|
107
107
|
const modalRef = (0, react_2.useRef)(null);
|
|
108
108
|
const mergedRef = (0, useMergeRefs_1.useMergeRefs)(modalRef, ref);
|
|
109
109
|
const ariaLabelId = (0, hooks_1.useId)();
|
|
@@ -146,9 +146,10 @@ exports.Modal = (0, react_2.forwardRef)((_a, ref) => {
|
|
|
146
146
|
(0, ModalUtils_1.useBodyScrollLock)(modalRef, portalNode, isNested);
|
|
147
147
|
const isWidthPreset = typeof width === "string" && ["small", "medium"].includes(width);
|
|
148
148
|
const mergedClassName = (0, clsx_1.default)("navds-modal", className, {
|
|
149
|
-
polyfillClassName: dialog_polyfill_1.needPolyfill,
|
|
149
|
+
[polyfillClassName]: dialog_polyfill_1.needPolyfill,
|
|
150
150
|
"navds-modal--autowidth": !width,
|
|
151
151
|
[`navds-modal--${width}`]: isWidthPreset,
|
|
152
|
+
"navds-modal--top": placement === "top" && !dialog_polyfill_1.needPolyfill,
|
|
152
153
|
});
|
|
153
154
|
const mergedStyle = Object.assign(Object.assign({}, style), (!isWidthPreset ? { width } : {}));
|
|
154
155
|
const mouseClickStart = (0, react_2.useRef)({
|
package/cjs/modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8CAA2D;AAC3D,gDAAsB;AACtB,+CAAyE;AACzE,yCAAyC;AACzC,6CAA8C;AAC9C,mDAAmD;AACnD,8CAAgD;AAChD,uEAAoE;AACpE,yCAAsC;AACtC,6DAA0D;AAC1D,mDAAwE;AACxE,4DAAoC;AACpC,gEAAwC;AACxC,gEAAwC;AACxC,6CAKsB;AACtB,qEAAiE;AAGjE,MAAM,iBAAiB,GAAG,yBAAyB,CAAC;AAWpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":"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"}
|