@navikt/ds-react 7.28.0 → 7.29.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/accordion/Accordion.d.ts +1 -0
- package/cjs/accordion/Accordion.js.map +1 -1
- package/cjs/form/fieldset/Fieldset.js +4 -3
- package/cjs/form/fieldset/Fieldset.js.map +1 -1
- package/cjs/form/fieldset/useFieldset.d.ts +3 -3
- package/cjs/form/fieldset/useFieldset.js +11 -4
- package/cjs/form/fieldset/useFieldset.js.map +1 -1
- package/cjs/form/useFormField.d.ts +1 -0
- package/cjs/form/useFormField.js +53 -4
- package/cjs/form/useFormField.js.map +1 -1
- package/cjs/index.d.ts +1 -0
- package/cjs/index.js +4 -2
- package/cjs/index.js.map +1 -1
- package/cjs/layout/box/Box.js +2 -1
- package/cjs/layout/box/Box.js.map +1 -1
- package/cjs/link-card/LinkCard.d.ts +5 -0
- package/cjs/link-card/LinkCard.js +6 -6
- package/cjs/link-card/LinkCard.js.map +1 -1
- package/cjs/process/Process.d.ts +90 -0
- package/cjs/process/Process.js +184 -0
- package/cjs/process/Process.js.map +1 -0
- package/cjs/process/index.d.ts +1 -0
- package/cjs/process/index.js +8 -0
- package/cjs/process/index.js.map +1 -0
- package/cjs/stepper/Stepper.d.ts +1 -0
- package/cjs/stepper/Stepper.js.map +1 -1
- package/cjs/toggle-group/ToggleGroup.js +3 -4
- package/cjs/toggle-group/ToggleGroup.js.map +1 -1
- package/cjs/util/i18n/locales/en.d.ts +3 -0
- package/cjs/util/i18n/locales/en.js +3 -0
- package/cjs/util/i18n/locales/en.js.map +1 -1
- package/cjs/util/i18n/locales/nb.d.ts +4 -0
- package/cjs/util/i18n/locales/nb.js +4 -0
- package/cjs/util/i18n/locales/nb.js.map +1 -1
- package/cjs/util/i18n/locales/nn.d.ts +3 -0
- package/cjs/util/i18n/locales/nn.js +3 -0
- package/cjs/util/i18n/locales/nn.js.map +1 -1
- package/cjs/util/renderStoriesForChromatic.d.ts +13 -0
- package/cjs/util/renderStoriesForChromatic.js +21 -0
- package/cjs/util/renderStoriesForChromatic.js.map +1 -0
- package/esm/accordion/Accordion.d.ts +1 -0
- package/esm/accordion/Accordion.js.map +1 -1
- package/esm/form/fieldset/Fieldset.js +5 -4
- package/esm/form/fieldset/Fieldset.js.map +1 -1
- package/esm/form/fieldset/useFieldset.d.ts +3 -3
- package/esm/form/fieldset/useFieldset.js +9 -5
- package/esm/form/fieldset/useFieldset.js.map +1 -1
- package/esm/form/useFormField.d.ts +1 -0
- package/esm/form/useFormField.js +19 -4
- package/esm/form/useFormField.js.map +1 -1
- package/esm/index.d.ts +1 -0
- package/esm/index.js +1 -0
- package/esm/index.js.map +1 -1
- package/esm/layout/box/Box.js +2 -1
- package/esm/layout/box/Box.js.map +1 -1
- package/esm/link-card/LinkCard.d.ts +5 -0
- package/esm/link-card/LinkCard.js +6 -6
- package/esm/link-card/LinkCard.js.map +1 -1
- package/esm/process/Process.d.ts +90 -0
- package/esm/process/Process.js +148 -0
- package/esm/process/Process.js.map +1 -0
- package/esm/process/index.d.ts +1 -0
- package/esm/process/index.js +3 -0
- package/esm/process/index.js.map +1 -0
- package/esm/stepper/Stepper.d.ts +1 -0
- package/esm/stepper/Stepper.js.map +1 -1
- package/esm/toggle-group/ToggleGroup.js +3 -4
- package/esm/toggle-group/ToggleGroup.js.map +1 -1
- package/esm/util/i18n/locales/en.d.ts +3 -0
- package/esm/util/i18n/locales/en.js +3 -0
- package/esm/util/i18n/locales/en.js.map +1 -1
- package/esm/util/i18n/locales/nb.d.ts +4 -0
- package/esm/util/i18n/locales/nb.js +4 -0
- package/esm/util/i18n/locales/nb.js.map +1 -1
- package/esm/util/i18n/locales/nn.d.ts +3 -0
- package/esm/util/i18n/locales/nn.js +3 -0
- package/esm/util/i18n/locales/nn.js.map +1 -1
- package/esm/util/renderStoriesForChromatic.d.ts +13 -0
- package/esm/util/renderStoriesForChromatic.js +15 -0
- package/esm/util/renderStoriesForChromatic.js.map +1 -0
- package/package.json +14 -4
- package/src/accordion/Accordion.tsx +1 -0
- package/src/form/fieldset/Fieldset.tsx +5 -3
- package/src/form/fieldset/useFieldset.ts +15 -5
- package/src/form/useFormField.ts +21 -3
- package/src/index.ts +1 -0
- package/src/layout/box/Box.tsx +2 -1
- package/src/link-card/LinkCard.tsx +14 -7
- package/src/process/Process.tsx +358 -0
- package/src/process/index.ts +7 -0
- package/src/stepper/Stepper.tsx +1 -0
- package/src/toggle-group/ToggleGroup.tsx +2 -5
- package/src/util/i18n/locales/en.ts +3 -0
- package/src/util/i18n/locales/nb.ts +3 -0
- package/src/util/i18n/locales/nn.ts +3 -0
- package/src/util/renderStoriesForChromatic.tsx +24 -0
|
@@ -24,6 +24,7 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
24
24
|
variant?: "default" | "neutral";
|
|
25
25
|
/**
|
|
26
26
|
* @default "small"
|
|
27
|
+
* @deprecated `size`-prop will be the only prop to control the size of the accordion.
|
|
27
28
|
*/
|
|
28
29
|
headingSize?: "large" | "medium" | "small" | "xsmall";
|
|
29
30
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/accordion/Accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,0CAA8C;AAC9C,0EAA6E;AAC7E,yDAAsD;AACtD,wEAA0E;AAC1E,oEAAoE;
|
|
1
|
+
{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/accordion/Accordion.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,0CAA8C;AAC9C,0EAA6E;AAC7E,yDAAsD;AACtD,wEAA0E;AAC1E,oEAAoE;AAoDpE;;;;;;;;;;;;;;;;;;;GAmBG;AACU,QAAA,SAAS,GAAG,IAAA,kBAAU,EACjC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,OAAO,EACrB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,IAAI,OAEd,EADI,IAAI,cANT,yDAOC,CADQ;IAIT,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE9B,OAAO,CACL,8BAAC,mCAAgB,CAAC,QAAQ,IACxB,KAAK,EAAE;YACL,OAAO;YACP,WAAW;YACX,IAAI;YACJ,OAAO,EAAE,IAAI;SACd;QAED,uDACM,IAAI,IACR,SAAS,EAAE,EAAE,CACX,iBAAiB,EACjB,SAAS,EACT,oBAAoB,IAAI,EAAE,EAC1B,EAAE,yBAAyB,EAAE,MAAM,EAAE,CACtC,EACD,GAAG,EAAE,GAAG,IACR,CACwB,CAC7B,CAAC;AACJ,CAAC,CACoB,CAAC;AAExB,iBAAS,CAAC,MAAM,GAAG,yBAAe,CAAC;AACnC,iBAAS,CAAC,OAAO,GAAG,0BAAgB,CAAC;AACrC,iBAAS,CAAC,IAAI,GAAG,uBAAa,CAAC;AAE/B,kBAAe,iBAAS,CAAC"}
|
|
@@ -58,7 +58,8 @@ const context_1 = require("./context");
|
|
|
58
58
|
const useFieldset_1 = require("./useFieldset");
|
|
59
59
|
exports.Fieldset = (0, react_1.forwardRef)((props, ref) => {
|
|
60
60
|
var _a, _b, _c;
|
|
61
|
-
const
|
|
61
|
+
const legendId = (0, util_1.useId)();
|
|
62
|
+
const { inputProps, errorId, showErrorMsg, hasError, size, readOnly, inputDescriptionId, } = (0, useFieldset_1.useFieldset)(props, legendId);
|
|
62
63
|
const { cn } = (0, Theme_1.useRenameCSS)();
|
|
63
64
|
const fieldset = (0, react_1.useContext)(context_1.FieldsetContext);
|
|
64
65
|
const { children, className, errorPropagation = true, legend, description, hideLegend, nativeReadOnly = true } = props, rest = __rest(props, ["children", "className", "errorPropagation", "legend", "description", "hideLegend", "nativeReadOnly"]);
|
|
@@ -72,11 +73,11 @@ exports.Fieldset = (0, react_1.forwardRef)((props, ref) => {
|
|
|
72
73
|
disabled: (_c = props.disabled) !== null && _c !== void 0 ? _c : false,
|
|
73
74
|
readOnly,
|
|
74
75
|
} },
|
|
75
|
-
react_1.default.createElement("fieldset", Object.assign({}, (0, util_1.omit)(rest, ["errorId", "error", "size", "readOnly"]),
|
|
76
|
+
react_1.default.createElement("fieldset", Object.assign({}, (0, util_1.omit)(rest, ["errorId", "error", "size", "readOnly"]), inputProps, { ref: ref, className: cn(className, "navds-fieldset", `navds-fieldset--${size}`, {
|
|
76
77
|
"navds-fieldset--error": hasError,
|
|
77
78
|
"navds-fieldset--readonly": readOnly,
|
|
78
79
|
}) }),
|
|
79
|
-
react_1.default.createElement(typography_1.Label, { size: size, as: "legend", className: cn("navds-fieldset__legend", {
|
|
80
|
+
react_1.default.createElement(typography_1.Label, { id: legendId, size: size, as: "legend", className: cn("navds-fieldset__legend", {
|
|
80
81
|
"navds-sr-only": !!hideLegend,
|
|
81
82
|
}) },
|
|
82
83
|
readOnly &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../../src/form/fieldset/Fieldset.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAAsB;AACtB,+CAA8E;AAC9E,6CAAiD;AACjD,iDAAkE;AAClE,
|
|
1
|
+
{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../../src/form/fieldset/Fieldset.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
+
import { type FormFieldProps } from "../useFormField";
|
|
1
2
|
/**
|
|
2
3
|
* Handles props for Fieldset in context with parent Fieldset.
|
|
3
4
|
*/
|
|
4
|
-
export declare const useFieldset: (props:
|
|
5
|
+
export declare const useFieldset: (props: FormFieldProps, legendId: string) => {
|
|
5
6
|
inputProps: {
|
|
6
|
-
"aria-
|
|
7
|
-
"aria-describedby": string | undefined;
|
|
7
|
+
"aria-labelledby": any;
|
|
8
8
|
};
|
|
9
9
|
showErrorMsg: boolean;
|
|
10
10
|
hasError: boolean;
|
|
@@ -1,16 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.useFieldset = void 0;
|
|
7
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
4
8
|
const useFormField_1 = require("../useFormField");
|
|
5
9
|
/**
|
|
6
10
|
* Handles props for Fieldset in context with parent Fieldset.
|
|
7
11
|
*/
|
|
8
|
-
const useFieldset = (props) => {
|
|
12
|
+
const useFieldset = (props, legendId) => {
|
|
9
13
|
const formField = (0, useFormField_1.useFormField)(props, "fieldset");
|
|
10
|
-
const { inputProps } = formField;
|
|
11
14
|
return Object.assign(Object.assign({}, formField), { inputProps: {
|
|
12
|
-
|
|
13
|
-
"aria-
|
|
15
|
+
// Having both legend and description in labelledby seems to work best, ref. https://mortentollefsen.no/demo/radio-description.html
|
|
16
|
+
"aria-labelledby": props["aria-labelledby"] ||
|
|
17
|
+
(0, clsx_1.default)(legendId, {
|
|
18
|
+
[formField.inputDescriptionId]: props.description && !(0, useFormField_1.containsReadMore)(props.description),
|
|
19
|
+
}),
|
|
20
|
+
// We don't include errorId in labelledby/describedby on the fieldset, because it will be included on each input inside.
|
|
14
21
|
} });
|
|
15
22
|
};
|
|
16
23
|
exports.useFieldset = useFieldset;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFieldset.js","sourceRoot":"","sources":["../../../src/form/fieldset/useFieldset.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useFieldset.js","sourceRoot":"","sources":["../../../src/form/fieldset/useFieldset.ts"],"names":[],"mappings":";;;;;;AAAA,gDAAsB;AACtB,kDAIyB;AAEzB;;GAEG;AACI,MAAM,WAAW,GAAG,CAAC,KAAqB,EAAE,QAAgB,EAAE,EAAE;IACrE,MAAM,SAAS,GAAG,IAAA,2BAAY,EAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAElD,uCACK,SAAS,KACZ,UAAU,EAAE;YACV,mIAAmI;YACnI,iBAAiB,EACf,KAAK,CAAC,iBAAiB,CAAC;gBACxB,IAAA,cAAE,EAAC,QAAQ,EAAE;oBACX,CAAC,SAAS,CAAC,kBAAkB,CAAC,EAC5B,KAAK,CAAC,WAAW,IAAI,CAAC,IAAA,+BAAgB,EAAC,KAAK,CAAC,WAAW,CAAC;iBAC5D,CAAC;YACJ,wHAAwH;SACzH,IACD;AACJ,CAAC,CAAC;AAhBW,QAAA,WAAW,eAgBtB"}
|
|
@@ -49,3 +49,4 @@ export interface FormFieldType {
|
|
|
49
49
|
* Handles props and their state for various form-fields in context with Fieldset
|
|
50
50
|
*/
|
|
51
51
|
export declare const useFormField: (props: FormFieldProps, prefix: string) => FormFieldType;
|
|
52
|
+
export declare function containsReadMore(children: React.ReactNode, checkNested?: boolean): boolean;
|
package/cjs/form/useFormField.js
CHANGED
|
@@ -1,11 +1,46 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
2
35
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
37
|
};
|
|
5
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
39
|
exports.useFormField = void 0;
|
|
40
|
+
exports.containsReadMore = containsReadMore;
|
|
7
41
|
const clsx_1 = __importDefault(require("clsx"));
|
|
8
|
-
const react_1 = require("react");
|
|
42
|
+
const react_1 = __importStar(require("react"));
|
|
43
|
+
const ReadMore_1 = require("../read-more/ReadMore");
|
|
9
44
|
const hooks_1 = require("../util/hooks");
|
|
10
45
|
const context_1 = require("./fieldset/context");
|
|
11
46
|
/**
|
|
@@ -26,7 +61,7 @@ const useFormField = (props, prefix) => {
|
|
|
26
61
|
const ariaInvalid = Object.assign({}, (hasError ? { "aria-invalid": true } : {}));
|
|
27
62
|
if ((props === null || props === void 0 ? void 0 : props.required) && process.env.NODE_ENV !== "production") {
|
|
28
63
|
console.warn("Aksel: Use of 'required' in form-elements is heavily discuouraged. Docs about why here:");
|
|
29
|
-
console.warn("https://aksel.nav.no/god-praksis/artikler/obligatoriske-og-valgfrie-skjemafelter#
|
|
64
|
+
console.warn("https://aksel.nav.no/god-praksis/artikler/obligatoriske-og-valgfrie-skjemafelter#dc7a536235fa");
|
|
30
65
|
}
|
|
31
66
|
return {
|
|
32
67
|
showErrorMsg,
|
|
@@ -36,11 +71,25 @@ const useFormField = (props, prefix) => {
|
|
|
36
71
|
size: (_b = size !== null && size !== void 0 ? size : fieldset === null || fieldset === void 0 ? void 0 : fieldset.size) !== null && _b !== void 0 ? _b : "medium",
|
|
37
72
|
readOnly,
|
|
38
73
|
inputProps: Object.assign(Object.assign({ id }, ariaInvalid), { "aria-describedby": (0, clsx_1.default)(props["aria-describedby"], {
|
|
39
|
-
[inputDescriptionId]:
|
|
74
|
+
[inputDescriptionId]: props.description && !containsReadMore(props.description),
|
|
40
75
|
[errorId]: showErrorMsg,
|
|
41
|
-
[(_c = fieldset === null || fieldset === void 0 ? void 0 : fieldset.errorId) !== null && _c !== void 0 ? _c : ""]: hasError &&
|
|
76
|
+
[(_c = fieldset === null || fieldset === void 0 ? void 0 : fieldset.errorId) !== null && _c !== void 0 ? _c : ""]: hasError && (fieldset === null || fieldset === void 0 ? void 0 : fieldset.error),
|
|
42
77
|
}) || undefined, disabled }),
|
|
43
78
|
};
|
|
44
79
|
};
|
|
45
80
|
exports.useFormField = useFormField;
|
|
81
|
+
function containsReadMore(children, checkNested = true) {
|
|
82
|
+
if (react_1.default.isValidElement(children)) {
|
|
83
|
+
if (children.type === ReadMore_1.ReadMore) {
|
|
84
|
+
return true;
|
|
85
|
+
}
|
|
86
|
+
if (children.props.children && checkNested) {
|
|
87
|
+
return containsReadMore(children.props.children, false);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
else if (Array.isArray(children)) {
|
|
91
|
+
return children.some((child) => containsReadMore(child, checkNested));
|
|
92
|
+
}
|
|
93
|
+
return false;
|
|
94
|
+
}
|
|
46
95
|
//# sourceMappingURL=useFormField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFormField.js","sourceRoot":"","sources":["../../src/form/useFormField.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useFormField.js","sourceRoot":"","sources":["../../src/form/useFormField.ts"],"names":[],"mappings":"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"}
|
package/cjs/index.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ export { Modal, type ModalProps } from "./modal";
|
|
|
25
25
|
export { Pagination, type PaginationProps } from "./pagination";
|
|
26
26
|
export { Popover, type PopoverProps } from "./popover";
|
|
27
27
|
export { Portal, type PortalProps } from "./portal";
|
|
28
|
+
export { Process, type ProcessProps } from "./process";
|
|
28
29
|
export { ProgressBar, type ProgressBarProps } from "./progress-bar";
|
|
29
30
|
export { Provider, type ProviderProps } from "./provider";
|
|
30
31
|
export { ReadMore, type ReadMoreProps } from "./read-more";
|
package/cjs/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
"use client";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.
|
|
5
|
-
exports.Panel = exports.LinkPanel = exports.Theme = exports.LinkCard = exports.TextField = exports.Textarea = exports.Switch = exports.Select = exports.Search = exports.RadioGroup = exports.Radio = exports.FormProgress = exports.FormSummary = exports.FileUpload = exports.Fieldset = exports.ErrorSummary = exports.ConfirmationPanel = exports.UNSAFE_Combobox = exports.CheckboxGroup = exports.Checkbox = exports.useId = exports.useEventListener = exports.useClientLayoutEffect = exports.omit = exports.debounce = exports.Label = exports.Ingress = exports.Heading = void 0;
|
|
4
|
+
exports.Detail = exports.BodyShort = exports.BodyLong = exports.Tooltip = exports.ToggleGroup = exports.Timeline = exports.Tag = exports.Tabs = exports.Table = exports.Stepper = exports.Skeleton = exports.ReadMore = exports.Provider = exports.ProgressBar = exports.Process = exports.Portal = exports.Popover = exports.Pagination = exports.Modal = exports.Loader = exports.List = exports.Link = exports.VStack = exports.Stack = exports.Spacer = exports.HStack = exports.Show = exports.Hide = exports.Page = exports.HGrid = exports.BoxNew = exports.Box = exports.Bleed = exports.InternalHeader = exports.HelpText = exports.GuidePanel = exports.ExpansionCard = exports.Dropdown = exports.useMonthpicker = exports.MonthPicker = exports.useRangeDatepicker = exports.useDatepicker = exports.DatePicker = exports.CopyButton = exports.Chips = exports.Chat = exports.Button = exports.Alert = exports.ActionMenu = exports.Accordion = void 0;
|
|
5
|
+
exports.Panel = exports.LinkPanel = exports.Theme = exports.LinkCard = exports.TextField = exports.Textarea = exports.Switch = exports.Select = exports.Search = exports.RadioGroup = exports.Radio = exports.FormProgress = exports.FormSummary = exports.FileUpload = exports.Fieldset = exports.ErrorSummary = exports.ConfirmationPanel = exports.UNSAFE_Combobox = exports.CheckboxGroup = exports.Checkbox = exports.useId = exports.useEventListener = exports.useClientLayoutEffect = exports.omit = exports.debounce = exports.Label = exports.Ingress = exports.Heading = exports.ErrorMessage = void 0;
|
|
6
6
|
var accordion_1 = require("./accordion");
|
|
7
7
|
Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return accordion_1.Accordion; } });
|
|
8
8
|
var action_menu_1 = require("./overlays/action-menu");
|
|
@@ -65,6 +65,8 @@ var popover_1 = require("./popover");
|
|
|
65
65
|
Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return popover_1.Popover; } });
|
|
66
66
|
var portal_1 = require("./portal");
|
|
67
67
|
Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return portal_1.Portal; } });
|
|
68
|
+
var process_1 = require("./process");
|
|
69
|
+
Object.defineProperty(exports, "Process", { enumerable: true, get: function () { return process_1.Process; } });
|
|
68
70
|
var progress_bar_1 = require("./progress-bar");
|
|
69
71
|
Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return progress_bar_1.ProgressBar; } });
|
|
70
72
|
var provider_1 = require("./provider");
|
package/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AACb,yCAA6D;AAApD,sGAAA,SAAS,OAAA;AAClB,sDAA0E;AAAjE,yGAAA,UAAU,OAAA;AACnB,iCAAiD;AAAxC,8FAAA,KAAK,OAAA;AACd,mCAAoD;AAA3C,gGAAA,MAAM,OAAA;AACf,+BAA8C;AAArC,4FAAA,IAAI,OAAA;AACb,iCAAiD;AAAxC,8FAAA,KAAK,OAAA;AACd,2CAAgE;AAAvD,wGAAA,UAAU,OAAA;AACnB,gDAW2B;AAVzB,wGAAA,UAAU,OAAA;AACV,2GAAA,aAAa,OAAA;AACb,gHAAA,kBAAkB,OAAA;AASpB,kDAM4B;AAL1B,0GAAA,WAAW,OAAA;AACX,6GAAA,cAAc,OAAA;AAKhB,uCAA0D;AAAjD,oGAAA,QAAQ,OAAA;AACjB,mDAA0E;AAAjE,+GAAA,aAAa,OAAA;AACtB,6CAAiE;AAAxD,yGAAA,UAAU,OAAA;AACnB,yCAA2D;AAAlD,qGAAA,QAAQ,OAAA;AACjB,qDAO2B;AANzB,iHAAA,cAAc,OAAA;AAOhB,wCAAwD;AAA/C,8FAAA,KAAK,OAAA;AACd,oCAA4E;AAAnE,0FAAA,GAAG,OAAA;AAAiB,6FAAA,MAAM,OAAA;AACnC,sCAAuD;AAA9C,6FAAA,KAAK,OAAA;AACd,sCAA0E;AAAjE,4FAAA,IAAI,OAAA;AACb,kDAAuE;AAA9D,kGAAA,IAAI,OAAA;AAAE,kGAAA,IAAI,OAAA;AACnB,wCAQwB;AAPtB,+FAAA,MAAM,OAAA;AACN,+FAAA,MAAM,OAAA;AACN,8FAAA,KAAK,OAAA;AACL,+FAAA,MAAM,OAAA;AAKR,+BAA8C;AAArC,4FAAA,IAAI,OAAA;AACb,+BAAkE;AAAzD,4FAAA,IAAI,OAAA;AACb,mCAAoD;AAA3C,gGAAA,MAAM,OAAA;AACf,iCAAiD;AAAxC,8FAAA,KAAK,OAAA;AACd,2CAAgE;AAAvD,wGAAA,UAAU,OAAA;AACnB,qCAAuD;AAA9C,kGAAA,OAAO,OAAA;AAChB,mCAAoD;AAA3C,gGAAA,MAAM,OAAA;AACf,qCAAuD;AAA9C,kGAAA,OAAO,OAAA;AAChB,+CAAoE;AAA3D,2GAAA,WAAW,OAAA;AACpB,uCAA0D;AAAjD,oGAAA,QAAQ,OAAA;AACjB,yCAA2D;AAAlD,qGAAA,QAAQ,OAAA;AACjB,uCAA0D;AAAjD,oGAAA,QAAQ,OAAA;AACjB,qCAAuD;AAA9C,kGAAA,OAAO,OAAA;AAChB,iCAWiB;AAVf,8FAAA,KAAK,OAAA;AAWP,+BAA8C;AAArC,4FAAA,IAAI,OAAA;AACb,6BAA2C;AAAlC,0FAAA,GAAG,OAAA;AACZ,uCAOoB;AANlB,oGAAA,QAAQ,OAAA;AAOV,+CAAoE;AAA3D,2GAAA,WAAW,OAAA;AACpB,qCAAuD;AAA9C,kGAAA,OAAO,OAAA;AAChB,2CAesB;AAdpB,sGAAA,QAAQ,OAAA;AACR,uGAAA,SAAS,OAAA;AACT,oGAAA,MAAM,OAAA;AACN,0GAAA,YAAY,OAAA;AACZ,qGAAA,OAAO,OAAA;AACP,qGAAA,OAAO,OAAA;AACP,mGAAA,KAAK,OAAA;AASP,+BAOgB;AALd,gGAAA,QAAQ,OAAA;AACR,4FAAA,IAAI,OAAA;AACJ,6GAAA,qBAAqB,OAAA;AACrB,wGAAA,gBAAgB,OAAA;AAChB,6FAAA,KAAK,OAAA;AAGP,4CAKyB;AAJvB,oGAAA,QAAQ,OAAA;AACR,yGAAA,aAAa,OAAA;AAIf,4CAAsE;AAA7D,2GAAA,eAAe,OAAA;AACxB,gEAGmC;AAFjC,uHAAA,iBAAiB,OAAA;AAGnB,sDAA4E;AAAnE,6GAAA,YAAY,OAAA;AACrB,4CAA+D;AAAtD,oGAAA,QAAQ,OAAA;AACjB,kDAa4B;AAZ1B,yGAAA,UAAU,OAAA;AAaZ,oDAAyE;AAAhE,2GAAA,WAAW,OAAA;AACpB,sDAA4E;AAAnE,6GAAA,YAAY,OAAA;AACrB,sCAKsB;AAJpB,8FAAA,KAAK,OAAA;AACL,mGAAA,UAAU,OAAA;AAIZ,wCAAgF;AAAvE,gGAAA,MAAM,OAAA;AACf,wCAAyD;AAAhD,gGAAA,MAAM,OAAA;AACf,wCAAyD;AAAhD,gGAAA,MAAM,OAAA;AACf,4CAA+D;AAAtD,oGAAA,QAAQ,OAAA;AACjB,8CAAkE;AAAzD,sGAAA,SAAS,OAAA;AAClB,yCASqB;AARnB,qGAAA,QAAQ,OAAA;AAUV;;GAEG;AACH,iCAAiD;AAAxC,8FAAA,KAAK,OAAA;AAEd;;GAEG;AACH,2CAA8D;AAArD,uGAAA,SAAS,OAAA;AAClB,iCAAiD;AAAxC,8FAAA,KAAK,OAAA"}
|
package/cjs/layout/box/Box.js
CHANGED
|
@@ -120,7 +120,8 @@ exports.BoxComponent = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
120
120
|
"navds-box-bg": background,
|
|
121
121
|
"navds-box-border-color": borderColor,
|
|
122
122
|
"navds-box-border-width": borderWidth,
|
|
123
|
-
"navds-box-border-radius": borderRadius,
|
|
123
|
+
"navds-box-border-radius": borderRadius && !themeContext,
|
|
124
|
+
"navds-box-radius": borderRadius && themeContext,
|
|
124
125
|
"navds-box-shadow": shadow,
|
|
125
126
|
}) }), children)));
|
|
126
127
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,0CAAuC;AACvC,6CAAmE;AACnE,qCAAkC;AAElC,uEAG+B;AAE/B,0CAAsD;AAUtD,kEAAoC;AA6CpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACU,QAAA,YAAY,GACvB,IAAA,kBAAU,EACR,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,YAAY,GAAG,IAAA,wBAAgB,EAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE9B,IACE,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;QACrC,YAAY;QACZ,CAAC,UAAU,IAAI,WAAW,IAAI,MAAM,CAAC,EACrC,CAAC;QACD,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,IAAI,UAAU,EAAE,CAAC;YACf,SAAS,IAAI,oBAAoB,UAAU,GAAG,CAAC;QACjD,CAAC;QACD,IAAI,WAAW,EAAE,CAAC;YAChB,SAAS,IAAI,qBAAqB,WAAW,GAAG,CAAC;QACnD,CAAC;QACD,IAAI,MAAM,EAAE,CAAC;YACX,SAAS,IAAI,gBAAgB,MAAM,GAAG,CAAC;QACzC,CAAC;QACD,MAAM,IAAI,KAAK,CACb,6NAA6N,SAAS,EAAE,CACzO,CAAC;IACJ,CAAC;IAED,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;IAEzC,MAAM,KAAK,iDACN,MAAM,KACT,CAAC,OAAO,MAAM,kBAAkB,CAAC,EAAE,UAAU;YAC3C,CAAC,CAAC,WAAW,UAAU,GAAG;YAC1B,CAAC,CAAC,SAAS,EACb,CAAC,OAAO,MAAM,cAAc,CAAC,EAAE,MAAM;YACnC,CAAC,CAAC,kBAAkB,MAAM,GAAG;YAC7B,CAAC,CAAC,SAAS,EACb,CAAC,OAAO,MAAM,oBAAoB,CAAC,EAAE,WAAW;YAC9C,CAAC,CAAC,WAAW,WAAW,GAAG;YAC3B,CAAC,CAAC,SAAS,EACb,CAAC,OAAO,MAAM,oBAAoB,CAAC,EAAE,WAAW;YAC9C,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,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,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,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE;gBACpC,cAAc,EAAE,UAAU;gBAC1B,wBAAwB,EAAE,WAAW;gBACrC,wBAAwB,EAAE,WAAW;gBACrC,yBAAyB,EAAE,YAAY;
|
|
1
|
+
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/layout/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,0CAAuC;AACvC,6CAAmE;AACnE,qCAAkC;AAElC,uEAG+B;AAE/B,0CAAsD;AAUtD,kEAAoC;AA6CpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACU,QAAA,YAAY,GACvB,IAAA,kBAAU,EACR,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,YAAY,GAAG,IAAA,wBAAgB,EAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IAE9B,IACE,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;QACrC,YAAY;QACZ,CAAC,UAAU,IAAI,WAAW,IAAI,MAAM,CAAC,EACrC,CAAC;QACD,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,IAAI,UAAU,EAAE,CAAC;YACf,SAAS,IAAI,oBAAoB,UAAU,GAAG,CAAC;QACjD,CAAC;QACD,IAAI,WAAW,EAAE,CAAC;YAChB,SAAS,IAAI,qBAAqB,WAAW,GAAG,CAAC;QACnD,CAAC;QACD,IAAI,MAAM,EAAE,CAAC;YACX,SAAS,IAAI,gBAAgB,MAAM,GAAG,CAAC;QACzC,CAAC;QACD,MAAM,IAAI,KAAK,CACb,6NAA6N,SAAS,EAAE,CACzO,CAAC;IACJ,CAAC;IAED,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;IAEzC,MAAM,KAAK,iDACN,MAAM,KACT,CAAC,OAAO,MAAM,kBAAkB,CAAC,EAAE,UAAU;YAC3C,CAAC,CAAC,WAAW,UAAU,GAAG;YAC1B,CAAC,CAAC,SAAS,EACb,CAAC,OAAO,MAAM,cAAc,CAAC,EAAE,MAAM;YACnC,CAAC,CAAC,kBAAkB,MAAM,GAAG;YAC7B,CAAC,CAAC,SAAS,EACb,CAAC,OAAO,MAAM,oBAAoB,CAAC,EAAE,WAAW;YAC9C,CAAC,CAAC,WAAW,WAAW,GAAG;YAC3B,CAAC,CAAC,SAAS,EACb,CAAC,OAAO,MAAM,oBAAoB,CAAC,EAAE,WAAW;YAC9C,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,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,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,EAAE,CAAC,WAAW,EAAE,SAAS,EAAE;gBACpC,cAAc,EAAE,UAAU;gBAC1B,wBAAwB,EAAE,WAAW;gBACrC,wBAAwB,EAAE,WAAW;gBACrC,yBAAyB,EAAE,YAAY,IAAI,CAAC,YAAY;gBACxD,kBAAkB,EAAE,YAAY,IAAI,YAAY;gBAChD,kBAAkB,EAAE,MAAM;aAC3B,CAAC,KAED,QAAQ,CACJ,CACO,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAES,QAAA,GAAG,GAAG,oBAAgC,CAAC;AAEpD,WAAG,CAAC,GAAG,GAAG,sBAAM,CAAC;AAEjB,kBAAe,WAAG,CAAC"}
|
|
@@ -5,6 +5,11 @@ interface LinkCardProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
5
5
|
* @default true
|
|
6
6
|
*/
|
|
7
7
|
arrow?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Adjusts arrow position.
|
|
10
|
+
* @default "baseline"
|
|
11
|
+
*/
|
|
12
|
+
arrowPosition?: "baseline" | "center";
|
|
8
13
|
/**
|
|
9
14
|
* Changes padding and typo sizes.
|
|
10
15
|
* @default "medium"
|
|
@@ -79,11 +79,13 @@ const [LinkCardContextProvider, useLinkCardContext] = (0, create_context_1.creat
|
|
|
79
79
|
* ```
|
|
80
80
|
*/
|
|
81
81
|
exports.LinkCard = (0, react_1.forwardRef)((_a, forwardedRef) => {
|
|
82
|
-
var { children, className, arrow = true, size = "medium" } = _a, restProps = __rest(_a, ["children", "className", "arrow", "size"]);
|
|
82
|
+
var { children, className, arrow = true, arrowPosition = "baseline", size = "medium" } = _a, restProps = __rest(_a, ["children", "className", "arrow", "arrowPosition", "size"]);
|
|
83
83
|
const { cn } = (0, Theme_1.useRenameCSS)();
|
|
84
|
-
return (react_1.default.createElement(LinkCardContextProvider, { size: size
|
|
84
|
+
return (react_1.default.createElement(LinkCardContextProvider, { size: size },
|
|
85
85
|
react_1.default.createElement(link_anchor_1.LinkAnchorOverlay, { asChild: true },
|
|
86
|
-
react_1.default.createElement(typography_1.BodyLong, Object.assign({ as: "div", size: size, ref: forwardedRef, "data-color": "neutral", className: cn("navds-link-card", className, `navds-link-card--${size}`) }, restProps),
|
|
86
|
+
react_1.default.createElement(typography_1.BodyLong, Object.assign({ as: "div", size: size, ref: forwardedRef, "data-color": "neutral", className: cn("navds-link-card", className, `navds-link-card--${size}`), "data-align-arrow": arrowPosition }, restProps),
|
|
87
|
+
children,
|
|
88
|
+
arrow && (react_1.default.createElement(link_anchor_1.LinkAnchorArrow, { fontSize: size === "medium" ? "1.75rem" : "1.5rem", className: cn("navds-link-card__arrow") }))))));
|
|
87
89
|
});
|
|
88
90
|
/**
|
|
89
91
|
* @see 🏷️ {@link LinkCardTitleProps}
|
|
@@ -92,9 +94,7 @@ exports.LinkCardTitle = (0, react_1.forwardRef)((_a, forwardedRef) => {
|
|
|
92
94
|
var { children, as = "span", className } = _a, restProps = __rest(_a, ["children", "as", "className"]);
|
|
93
95
|
const { cn } = (0, Theme_1.useRenameCSS)();
|
|
94
96
|
const context = useLinkCardContext();
|
|
95
|
-
return (react_1.default.createElement(typography_1.Heading, Object.assign({ ref: forwardedRef, as: as, size: context.size === "medium" ? "small" : "xsmall", className: cn("navds-link-card__title", className) }, restProps),
|
|
96
|
-
children,
|
|
97
|
-
context.arrow && (react_1.default.createElement(link_anchor_1.LinkAnchorArrow, { fontSize: context.size === "medium" ? "1.75rem" : "1.5rem" }))));
|
|
97
|
+
return (react_1.default.createElement(typography_1.Heading, Object.assign({ ref: forwardedRef, as: as, size: context.size === "medium" ? "small" : "xsmall", className: cn("navds-link-card__title", className) }, restProps), children));
|
|
98
98
|
});
|
|
99
99
|
/**
|
|
100
100
|
* @see 🏷️ {@link LinkCardAnchorProps}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkCard.js","sourceRoot":"","sources":["../../src/link-card/LinkCard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0D;AAC1D,0CAA8C;AAC9C,8CAAkD;AAClD,2DAAuD;AACvD,qDAK6B;
|
|
1
|
+
{"version":3,"file":"LinkCard.js","sourceRoot":"","sources":["../../src/link-card/LinkCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface ProcessProps extends React.HTMLAttributes<HTMLOListElement> {
|
|
3
|
+
/**
|
|
4
|
+
* `<Process.Event />` elements.
|
|
5
|
+
*/
|
|
6
|
+
children: React.ReactElement<typeof ProcessEvent>[];
|
|
7
|
+
/**
|
|
8
|
+
* Hides the "aktiv"-text when the event is active.
|
|
9
|
+
* @default false
|
|
10
|
+
*/
|
|
11
|
+
hideStatusText?: boolean;
|
|
12
|
+
}
|
|
13
|
+
interface ProcessComponent extends React.ForwardRefExoticComponent<ProcessProps & React.RefAttributes<HTMLOListElement>> {
|
|
14
|
+
/**
|
|
15
|
+
* @see 🏷️ {@link ProcessEventProps}
|
|
16
|
+
*/
|
|
17
|
+
Event: typeof ProcessEvent;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* A component that presents a Process as a vertical line of events.
|
|
21
|
+
* Each event can contain information, actions, links or status indicators.
|
|
22
|
+
*
|
|
23
|
+
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/process)
|
|
24
|
+
* @see 🏷️ {@link ProcessProps}
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```jsx
|
|
28
|
+
* <>
|
|
29
|
+
* <Heading size="medium" spacing level="2" id="Process-heading">
|
|
30
|
+
* Søknadssteg
|
|
31
|
+
* </Heading>
|
|
32
|
+
* <Process
|
|
33
|
+
* aria-labelledby="Process-heading"
|
|
34
|
+
* activeStep={activeStep}
|
|
35
|
+
* >
|
|
36
|
+
* <Process.Event title="Start søknad" timestamp="21. august 2025" />
|
|
37
|
+
* <Process.Event
|
|
38
|
+
* title="Saksopplysninger"
|
|
39
|
+
* timestamp="22. august 2025"
|
|
40
|
+
* icon={<PaperclipIcon />}
|
|
41
|
+
* >
|
|
42
|
+
* Saksopplysninger er sendt inn
|
|
43
|
+
* </Process.Event>
|
|
44
|
+
* <Process.Event
|
|
45
|
+
* title="Vedlegg"
|
|
46
|
+
* timestamp="25. august 2025"
|
|
47
|
+
* >
|
|
48
|
+
* <h3> Vedlegg er lastet opp </h3>
|
|
49
|
+
* <p>
|
|
50
|
+
* Dokumentasjon av saksopplysninger er lastet opp og tilgjengelig for
|
|
51
|
+
* saksbehandler.
|
|
52
|
+
* </p>
|
|
53
|
+
* </Process.Event>
|
|
54
|
+
* <Process.Event title="Vedtak" timestamp="8. september 2025">
|
|
55
|
+
* Det er gjort endelig vedtak i saken
|
|
56
|
+
* </Process.Event>
|
|
57
|
+
* </Process>
|
|
58
|
+
* </>
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
export declare const Process: ProcessComponent;
|
|
62
|
+
interface ProcessEventProps extends React.HTMLAttributes<HTMLLIElement> {
|
|
63
|
+
/**
|
|
64
|
+
* Rich content to display under the title and timestamp if provided.
|
|
65
|
+
*/
|
|
66
|
+
children?: React.ReactNode;
|
|
67
|
+
/**
|
|
68
|
+
* Hide the content section of the event.
|
|
69
|
+
*/
|
|
70
|
+
hideContent?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Step title.
|
|
73
|
+
*/
|
|
74
|
+
title?: string;
|
|
75
|
+
/**
|
|
76
|
+
* Timestamp or date to display for event.
|
|
77
|
+
*/
|
|
78
|
+
timestamp?: string;
|
|
79
|
+
/**
|
|
80
|
+
* Icon or number to display inside the bullet.
|
|
81
|
+
*/
|
|
82
|
+
bullet?: React.ReactNode;
|
|
83
|
+
/**
|
|
84
|
+
* Current event status.
|
|
85
|
+
* @default "uncompleted"
|
|
86
|
+
*/
|
|
87
|
+
status?: "active" | "completed" | "uncompleted";
|
|
88
|
+
}
|
|
89
|
+
export declare const ProcessEvent: React.ForwardRefExoticComponent<ProcessEventProps & React.RefAttributes<HTMLLIElement>>;
|
|
90
|
+
export type { ProcessEventProps, ProcessProps };
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
36
|
+
var t = {};
|
|
37
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
38
|
+
t[p] = s[p];
|
|
39
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
40
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
41
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
42
|
+
t[p[i]] = s[p[i]];
|
|
43
|
+
}
|
|
44
|
+
return t;
|
|
45
|
+
};
|
|
46
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
47
|
+
exports.ProcessEvent = exports.Process = void 0;
|
|
48
|
+
const react_1 = __importStar(require("react"));
|
|
49
|
+
const Theme_1 = require("../theme/Theme");
|
|
50
|
+
const typography_1 = require("../typography");
|
|
51
|
+
const util_1 = require("../util");
|
|
52
|
+
const create_context_1 = require("../util/create-context");
|
|
53
|
+
const hooks_1 = require("../util/hooks");
|
|
54
|
+
const i18n_hooks_1 = require("../util/i18n/i18n.hooks");
|
|
55
|
+
const [ProcessContextProvider, useProcessContext] = (0, create_context_1.createContext)({
|
|
56
|
+
providerName: "ProcessContextProvider",
|
|
57
|
+
hookName: "useProcessContext",
|
|
58
|
+
name: "ProcessContext",
|
|
59
|
+
errorMessage: "`<Process.Event />` must be used within a `<Process />` component.",
|
|
60
|
+
});
|
|
61
|
+
/**
|
|
62
|
+
* A component that presents a Process as a vertical line of events.
|
|
63
|
+
* Each event can contain information, actions, links or status indicators.
|
|
64
|
+
*
|
|
65
|
+
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/process)
|
|
66
|
+
* @see 🏷️ {@link ProcessProps}
|
|
67
|
+
*
|
|
68
|
+
* @example
|
|
69
|
+
* ```jsx
|
|
70
|
+
* <>
|
|
71
|
+
* <Heading size="medium" spacing level="2" id="Process-heading">
|
|
72
|
+
* Søknadssteg
|
|
73
|
+
* </Heading>
|
|
74
|
+
* <Process
|
|
75
|
+
* aria-labelledby="Process-heading"
|
|
76
|
+
* activeStep={activeStep}
|
|
77
|
+
* >
|
|
78
|
+
* <Process.Event title="Start søknad" timestamp="21. august 2025" />
|
|
79
|
+
* <Process.Event
|
|
80
|
+
* title="Saksopplysninger"
|
|
81
|
+
* timestamp="22. august 2025"
|
|
82
|
+
* icon={<PaperclipIcon />}
|
|
83
|
+
* >
|
|
84
|
+
* Saksopplysninger er sendt inn
|
|
85
|
+
* </Process.Event>
|
|
86
|
+
* <Process.Event
|
|
87
|
+
* title="Vedlegg"
|
|
88
|
+
* timestamp="25. august 2025"
|
|
89
|
+
* >
|
|
90
|
+
* <h3> Vedlegg er lastet opp </h3>
|
|
91
|
+
* <p>
|
|
92
|
+
* Dokumentasjon av saksopplysninger er lastet opp og tilgjengelig for
|
|
93
|
+
* saksbehandler.
|
|
94
|
+
* </p>
|
|
95
|
+
* </Process.Event>
|
|
96
|
+
* <Process.Event title="Vedtak" timestamp="8. september 2025">
|
|
97
|
+
* Det er gjort endelig vedtak i saken
|
|
98
|
+
* </Process.Event>
|
|
99
|
+
* </Process>
|
|
100
|
+
* </>
|
|
101
|
+
* ```
|
|
102
|
+
*/
|
|
103
|
+
exports.Process = (0, react_1.forwardRef)((_a, forwardedRef) => {
|
|
104
|
+
var { children, className, hideStatusText = false, id } = _a, restProps = __rest(_a, ["children", "className", "hideStatusText", "id"]);
|
|
105
|
+
const { cn } = (0, Theme_1.useRenameCSS)();
|
|
106
|
+
const rootId = (0, util_1.useId)(id);
|
|
107
|
+
const rootRef = (0, react_1.useRef)(null);
|
|
108
|
+
const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, rootRef);
|
|
109
|
+
const [activeChildId, setActiveChildId] = (0, react_1.useState)(undefined);
|
|
110
|
+
const syncAriaControls = (0, react_1.useCallback)(() => {
|
|
111
|
+
var _a;
|
|
112
|
+
const activeChildren = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-process-event][aria-current="true"]');
|
|
113
|
+
if (!activeChildren) {
|
|
114
|
+
setActiveChildId(undefined);
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
if (activeChildren.length > 1) {
|
|
118
|
+
if (process.env.NODE_ENV !== "production") {
|
|
119
|
+
console.warn("Aksel: Found multiple `<Process.Event />` elements with `status='active'`. Only one event should be active at a time.", rootRef.current);
|
|
120
|
+
}
|
|
121
|
+
setActiveChildId(undefined);
|
|
122
|
+
return;
|
|
123
|
+
}
|
|
124
|
+
if (activeChildren.length === 1) {
|
|
125
|
+
const lastActiveChild = activeChildren[activeChildren.length - 1];
|
|
126
|
+
setActiveChildId(lastActiveChild.id);
|
|
127
|
+
}
|
|
128
|
+
else {
|
|
129
|
+
setActiveChildId(undefined);
|
|
130
|
+
}
|
|
131
|
+
}, []);
|
|
132
|
+
return (
|
|
133
|
+
// `<ol />` elements with `list-style: none;` tends to be ignored by voiceover on Safari.
|
|
134
|
+
// To resolve this, we add `role="list"` to the `<ol />` element.
|
|
135
|
+
// eslint-disable-next-line jsx-a11y/no-redundant-roles
|
|
136
|
+
react_1.default.createElement("ol", Object.assign({ ref: mergedRef, "data-color": "info",
|
|
137
|
+
// biome-ignore lint/a11y/noRedundantRoles: See comment above
|
|
138
|
+
role: "list" }, restProps, { className: cn("navds-process", className), id: rootId, "aria-controls": activeChildId }),
|
|
139
|
+
react_1.default.createElement(ProcessContextProvider, { hideStatusText: hideStatusText, rootId: rootId, syncAriaControls: syncAriaControls }, children)));
|
|
140
|
+
});
|
|
141
|
+
exports.ProcessEvent = (0, react_1.forwardRef)((_a, forwardedRef) => {
|
|
142
|
+
var { title, timestamp, children, bullet, hideContent, className, id, status = "uncompleted" } = _a, restProps = __rest(_a, ["title", "timestamp", "children", "bullet", "hideContent", "className", "id", "status"]);
|
|
143
|
+
const translate = (0, i18n_hooks_1.useI18n)("Process");
|
|
144
|
+
const { cn } = (0, Theme_1.useRenameCSS)();
|
|
145
|
+
const eventId = (0, util_1.useId)();
|
|
146
|
+
const { syncAriaControls, hideStatusText, rootId } = useProcessContext();
|
|
147
|
+
// syncAriaControls is already memoized with useCallback
|
|
148
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: We want to run this only when status changes
|
|
149
|
+
(0, react_1.useEffect)(syncAriaControls, [status]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
150
|
+
const isActive = status === "active";
|
|
151
|
+
return (react_1.default.createElement("li", Object.assign({ ref: forwardedRef, "aria-current": isActive, id: id !== null && id !== void 0 ? id : eventId }, restProps, { "aria-controls": isActive ? rootId : undefined, className: cn("navds-process__event", className), "data-dot": bullet === undefined, "data-process-event": "", "data-status": status }),
|
|
152
|
+
react_1.default.createElement("div", { className: cn("navds-process__item") },
|
|
153
|
+
react_1.default.createElement(ProcessBullet, null, bullet),
|
|
154
|
+
react_1.default.createElement("div", { className: cn("navds-process__body") },
|
|
155
|
+
title && react_1.default.createElement(ProcessTitle, null, title),
|
|
156
|
+
isActive && !hideStatusText && (react_1.default.createElement(typography_1.BodyShort, { size: "small", className: cn("navds-process__active-label") }, translate("active"))),
|
|
157
|
+
timestamp && react_1.default.createElement(ProcessTimestamp, null, timestamp),
|
|
158
|
+
!hideContent && !!children && (react_1.default.createElement(ProcessContent, null, children)))),
|
|
159
|
+
react_1.default.createElement(ProcessLine, null)));
|
|
160
|
+
});
|
|
161
|
+
const ProcessTitle = ({ children }) => {
|
|
162
|
+
const { cn } = (0, Theme_1.useRenameCSS)();
|
|
163
|
+
return (react_1.default.createElement(typography_1.Heading, { size: "small", as: "div", className: cn("navds-process__title") }, children));
|
|
164
|
+
};
|
|
165
|
+
const ProcessTimestamp = ({ children }) => {
|
|
166
|
+
const { cn } = (0, Theme_1.useRenameCSS)();
|
|
167
|
+
return (react_1.default.createElement(typography_1.BodyShort, { spacing: true, as: "div", size: "small", textColor: "subtle", className: cn("navds-process__timestamp") }, children));
|
|
168
|
+
};
|
|
169
|
+
const ProcessContent = ({ children }) => {
|
|
170
|
+
const { cn } = (0, Theme_1.useRenameCSS)();
|
|
171
|
+
return (react_1.default.createElement(typography_1.BodyLong, { as: "div", className: cn("navds-process__content") }, children));
|
|
172
|
+
};
|
|
173
|
+
const ProcessBullet = ({ children }) => {
|
|
174
|
+
const { cn } = (0, Theme_1.useRenameCSS)();
|
|
175
|
+
return (react_1.default.createElement(typography_1.BodyShort, { as: "span", weight: "semibold", className: cn("navds-process__bullet"), "aria-hidden": true }, children));
|
|
176
|
+
};
|
|
177
|
+
/* ------------------------------ Process Line ------------------------------ */
|
|
178
|
+
const ProcessLine = () => {
|
|
179
|
+
const { cn } = (0, Theme_1.useRenameCSS)();
|
|
180
|
+
return react_1.default.createElement("span", { className: cn("navds-process__line") });
|
|
181
|
+
};
|
|
182
|
+
/* -------------------------- Process exports ------------------------- */
|
|
183
|
+
exports.Process.Event = exports.ProcessEvent;
|
|
184
|
+
//# sourceMappingURL=Process.js.map
|