@navikt/ds-react 0.8.0 → 0.9.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.js +2 -2
- package/cjs/accordion/AccordionContent.js +5 -5
- package/cjs/accordion/AccordionHeader.js +7 -7
- package/cjs/accordion/AccordionItem.js +6 -6
- package/cjs/accordion-menu/AccordionMenu.js +2 -2
- package/cjs/accordion-menu/AccordionMenuCollapsable.js +3 -3
- package/cjs/accordion-menu/AccordionMenuItem.js +2 -2
- package/cjs/alert/Alert.js +3 -3
- package/cjs/alert/AlertContent.js +3 -3
- package/cjs/alert/AlertTitle.js +3 -3
- package/cjs/button/Button.js +2 -2
- package/cjs/card/MicroCard.js +2 -2
- package/cjs/copy-to-clipboard/CopyToClipboard.js +8 -8
- package/cjs/form/ConfirmationPanel.js +2 -2
- package/cjs/form/ErrorMessage.js +1 -1
- package/cjs/form/Fieldset/Fieldset.js +7 -7
- package/cjs/form/Fieldset/useFieldset.js +1 -1
- package/cjs/form/Select.js +6 -6
- package/cjs/form/TextField.js +6 -6
- package/cjs/form/Textarea.js +10 -10
- package/cjs/form/checkbox/Checkbox.js +4 -4
- package/cjs/form/checkbox/CheckboxGroup.js +4 -4
- package/cjs/form/checkbox/useCheckbox.js +2 -2
- package/cjs/form/error-summary/ErrorSummary.js +2 -2
- package/cjs/form/error-summary/ErrorSummaryItem.js +2 -2
- package/cjs/form/radio/Radio.js +4 -4
- package/cjs/form/radio/RadioGroup.js +4 -4
- package/cjs/form/radio/useRadio.js +2 -2
- package/cjs/form/search-field/SearchField.js +5 -5
- package/cjs/form/search-field/SearchFieldButton.js +3 -3
- package/cjs/form/search-field/SearchFieldClearButton.js +3 -3
- package/cjs/form/search-field/SearchFieldInput.js +3 -3
- package/cjs/form/useFormField.js +3 -3
- package/cjs/grid/Cell.js +2 -2
- package/cjs/grid/ContentContainer.js +2 -2
- package/cjs/grid/Grid.js +2 -2
- package/cjs/guide-panel/Guide.js +3 -3
- package/cjs/guide-panel/GuidePanel.js +2 -2
- package/cjs/help-text/HelpText.js +9 -9
- package/cjs/internal-header/InternalHeader.js +2 -2
- package/cjs/internal-header/InternalHeaderTitle.js +2 -2
- package/cjs/internal-header/InternalHeaderUser.js +2 -2
- package/cjs/link/Link.js +2 -2
- package/cjs/link-panel/LinkPanel.js +2 -2
- package/cjs/link-panel/LinkPanelDescription.js +2 -2
- package/cjs/link-panel/LinkPanelTitle.js +2 -2
- package/cjs/loader/Loader.js +3 -3
- package/cjs/modal/Modal.js +6 -6
- package/cjs/modal/ModalContent.js +2 -2
- package/cjs/page-header/PageHeader.js +2 -2
- package/cjs/panel/Panel.js +2 -2
- package/cjs/popover/Popover.js +11 -11
- package/cjs/popover/PopoverContent.js +2 -2
- package/cjs/speech-bubble/Bubble.js +2 -2
- package/cjs/speech-bubble/SpeechBubble.js +4 -2
- package/cjs/speech-bubble/index.js +1 -4
- package/cjs/tag/Tag.js +2 -2
- package/cjs/typography/BodyLong.js +2 -2
- package/cjs/typography/BodyShort.js +2 -2
- package/cjs/typography/Detail.js +2 -2
- package/cjs/typography/Heading.js +2 -2
- package/cjs/typography/Ingress.js +2 -2
- package/cjs/typography/Label.js +2 -2
- package/cjs/util/useId.js +4 -7
- package/esm/form/Textarea.js +1 -1
- package/esm/form/Textarea.js.map +1 -1
- package/esm/speech-bubble/Bubble.d.ts +2 -1
- package/esm/speech-bubble/Bubble.js.map +1 -1
- package/esm/speech-bubble/SpeechBubble.d.ts +5 -1
- package/esm/speech-bubble/SpeechBubble.js +2 -0
- package/esm/speech-bubble/SpeechBubble.js.map +1 -1
- package/esm/speech-bubble/index.d.ts +0 -2
- package/esm/speech-bubble/index.js +0 -2
- package/esm/speech-bubble/index.js.map +1 -1
- package/esm/util/useId.js +2 -2
- package/esm/util/useId.js.map +1 -1
- package/package.json +10 -10
- package/src/button/stories/button.stories.mdx +22 -16
- package/src/button/stories/button.stories.tsx +4 -4
- package/src/form/Textarea.tsx +1 -1
- package/src/speech-bubble/Bubble.tsx +5 -1
- package/src/speech-bubble/SpeechBubble.tsx +11 -1
- package/src/speech-bubble/index.ts +0 -2
- package/src/speech-bubble/stories/speechbubble.stories.mdx +45 -35
- package/src/speech-bubble/stories/speechbubble.stories.tsx +29 -21
- package/src/util/useId.ts +2 -2
|
@@ -38,9 +38,9 @@ const react_1 = __importStar(require("react"));
|
|
|
38
38
|
const AccordionItem_1 = __importDefault(require("./AccordionItem"));
|
|
39
39
|
const AccordionContent_1 = __importDefault(require("./AccordionContent"));
|
|
40
40
|
const AccordionHeader_1 = __importDefault(require("./AccordionHeader"));
|
|
41
|
-
const Accordion = react_1.forwardRef((_a, ref) => {
|
|
41
|
+
const Accordion = (0, react_1.forwardRef)((_a, ref) => {
|
|
42
42
|
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
43
|
-
return (react_1.default.createElement("div", Object.assign({}, rest, { className: classnames_1.default("navds-accordion", className), ref: ref })));
|
|
43
|
+
return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)("navds-accordion", className), ref: ref })));
|
|
44
44
|
});
|
|
45
45
|
Accordion.Header = AccordionHeader_1.default;
|
|
46
46
|
Accordion.Content = AccordionContent_1.default;
|
|
@@ -38,12 +38,12 @@ const react_1 = __importStar(require("react"));
|
|
|
38
38
|
const react_collapse_1 = require("react-collapse");
|
|
39
39
|
const util_1 = require("../util");
|
|
40
40
|
const AccordionItem_1 = require("./AccordionItem");
|
|
41
|
-
const AccordionContent = react_1.forwardRef((_a, ref) => {
|
|
41
|
+
const AccordionContent = (0, react_1.forwardRef)((_a, ref) => {
|
|
42
42
|
var { children, className, id } = _a, rest = __rest(_a, ["children", "className", "id"]);
|
|
43
|
-
const context = react_1.useContext(AccordionItem_1.AccordionItemContext);
|
|
44
|
-
const newId = util_1.useId(id);
|
|
43
|
+
const context = (0, react_1.useContext)(AccordionItem_1.AccordionItemContext);
|
|
44
|
+
const newId = (0, util_1.useId)(id);
|
|
45
45
|
const setContentId = context && context.setContentId;
|
|
46
|
-
util_1.useClientLayoutEffect(() => {
|
|
46
|
+
(0, util_1.useClientLayoutEffect)(() => {
|
|
47
47
|
setContentId && setContentId(id ? newId : `accordionContent-${newId}`);
|
|
48
48
|
}, [setContentId, newId]);
|
|
49
49
|
if (context === null) {
|
|
@@ -55,6 +55,6 @@ const AccordionContent = react_1.forwardRef((_a, ref) => {
|
|
|
55
55
|
: react_collapse_1.UnmountClosed;
|
|
56
56
|
return (react_1.default.createElement("div", Object.assign({ ref: ref, id: context.contentId, role: "region", "aria-labelledby": context.buttonId }, rest),
|
|
57
57
|
react_1.default.createElement(CollapseComponent, { isOpened: context.open },
|
|
58
|
-
react_1.default.createElement("div", { className: classnames_1.default("navds-accordion__content", className) }, children))));
|
|
58
|
+
react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-accordion__content", className) }, children))));
|
|
59
59
|
});
|
|
60
60
|
exports.default = AccordionContent;
|
|
@@ -38,12 +38,12 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
38
38
|
const react_1 = __importStar(require("react"));
|
|
39
39
|
const AccordionItem_1 = require("./AccordionItem");
|
|
40
40
|
const __1 = require("..");
|
|
41
|
-
const AccordionHeader = react_1.forwardRef((_a, ref) => {
|
|
41
|
+
const AccordionHeader = (0, react_1.forwardRef)((_a, ref) => {
|
|
42
42
|
var { children, className, id, onClick } = _a, rest = __rest(_a, ["children", "className", "id", "onClick"]);
|
|
43
|
-
const context = react_1.useContext(AccordionItem_1.AccordionItemContext);
|
|
44
|
-
const newId = __1.useId(id);
|
|
43
|
+
const context = (0, react_1.useContext)(AccordionItem_1.AccordionItemContext);
|
|
44
|
+
const newId = (0, __1.useId)(id);
|
|
45
45
|
const setButtonId = context && context.setButtonId;
|
|
46
|
-
__1.useClientLayoutEffect(() => {
|
|
46
|
+
(0, __1.useClientLayoutEffect)(() => {
|
|
47
47
|
setButtonId && setButtonId(id ? newId : `accordionContent-${newId}`);
|
|
48
48
|
}, [setButtonId, newId]);
|
|
49
49
|
if (context === null) {
|
|
@@ -54,12 +54,12 @@ const AccordionHeader = react_1.forwardRef((_a, ref) => {
|
|
|
54
54
|
context.toggleOpen();
|
|
55
55
|
onClick && onClick(e);
|
|
56
56
|
};
|
|
57
|
-
return (react_1.default.createElement("button", Object.assign({ ref: ref, id: context.buttonId, className: classnames_1.default("navds-accordion__header", className, "navds-heading", "navds-heading--small"), onClick: handleClick, "aria-controls": context.contentId }, rest),
|
|
57
|
+
return (react_1.default.createElement("button", Object.assign({ ref: ref, id: context.buttonId, className: (0, classnames_1.default)("navds-accordion__header", className, "navds-heading", "navds-heading--small"), onClick: handleClick, "aria-controls": context.contentId }, rest),
|
|
58
58
|
children,
|
|
59
|
-
react_1.default.createElement(ds_icons_1.Expand, { focusable: "false", role: "img", "aria-label": context.open ? "Lukk panel ikon" : "Åpne panel ikon", className: classnames_1.default("navds-accordion__expand-icon", {
|
|
59
|
+
react_1.default.createElement(ds_icons_1.Expand, { focusable: "false", role: "img", "aria-label": context.open ? "Lukk panel ikon" : "Åpne panel ikon", className: (0, classnames_1.default)("navds-accordion__expand-icon", {
|
|
60
60
|
"navds-accordion__expand-icon--flip": context.open,
|
|
61
61
|
}) }),
|
|
62
|
-
react_1.default.createElement(ds_icons_1.ExpandFilled, { focusable: "false", role: "img", "aria-label": context.open ? "Lukk panel ikon" : "Åpne panel ikon", className: classnames_1.default("navds-accordion__expand-icon", "navds-accordion__expand-icon--filled", {
|
|
62
|
+
react_1.default.createElement(ds_icons_1.ExpandFilled, { focusable: "false", role: "img", "aria-label": context.open ? "Lukk panel ikon" : "Åpne panel ikon", className: (0, classnames_1.default)("navds-accordion__expand-icon", "navds-accordion__expand-icon--filled", {
|
|
63
63
|
"navds-accordion__expand-icon--flip": context.open,
|
|
64
64
|
}) })));
|
|
65
65
|
});
|
|
@@ -36,13 +36,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
36
36
|
exports.AccordionItemContext = void 0;
|
|
37
37
|
const classnames_1 = __importDefault(require("classnames"));
|
|
38
38
|
const react_1 = __importStar(require("react"));
|
|
39
|
-
exports.AccordionItemContext = react_1.createContext(null);
|
|
40
|
-
const AccordionItem = react_1.forwardRef((_a, ref) => {
|
|
39
|
+
exports.AccordionItemContext = (0, react_1.createContext)(null);
|
|
40
|
+
const AccordionItem = (0, react_1.forwardRef)((_a, ref) => {
|
|
41
41
|
var { children, className, open, defaultOpen = false, renderContentWhenClosed = false, onClick, id } = _a, rest = __rest(_a, ["children", "className", "open", "defaultOpen", "renderContentWhenClosed", "onClick", "id"]);
|
|
42
|
-
const [internalOpen, setInternalOpen] = react_1.useState(defaultOpen);
|
|
43
|
-
const [buttonId, setButtonId] = react_1.useState("");
|
|
44
|
-
const [contentId, setContentId] = react_1.useState("");
|
|
45
|
-
return (react_1.default.createElement("div", Object.assign({ className: classnames_1.default("navds-accordion__item", className, {
|
|
42
|
+
const [internalOpen, setInternalOpen] = (0, react_1.useState)(defaultOpen);
|
|
43
|
+
const [buttonId, setButtonId] = (0, react_1.useState)("");
|
|
44
|
+
const [contentId, setContentId] = (0, react_1.useState)("");
|
|
45
|
+
return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)("navds-accordion__item", className, {
|
|
46
46
|
"navds-accordion__item--open": open !== null && open !== void 0 ? open : internalOpen,
|
|
47
47
|
}), ref: ref }, rest),
|
|
48
48
|
react_1.default.createElement(exports.AccordionItemContext.Provider, { value: {
|
|
@@ -38,9 +38,9 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
38
38
|
const MenuItems_1 = __importDefault(require("./MenuItems"));
|
|
39
39
|
const AccordionMenuCollapsable_1 = __importDefault(require("./AccordionMenuCollapsable"));
|
|
40
40
|
const AccordionMenuItem_1 = __importDefault(require("./AccordionMenuItem"));
|
|
41
|
-
const AccordionMenu = react_1.forwardRef((_a, ref) => {
|
|
41
|
+
const AccordionMenu = (0, react_1.forwardRef)((_a, ref) => {
|
|
42
42
|
var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
|
|
43
|
-
return (react_1.default.createElement("nav", Object.assign({ role: "navigation", ref: ref, className: classnames_1.default("navds-accordion-menu", className) }, rest),
|
|
43
|
+
return (react_1.default.createElement("nav", Object.assign({ role: "navigation", ref: ref, className: (0, classnames_1.default)("navds-accordion-menu", className) }, rest),
|
|
44
44
|
react_1.default.createElement(MenuItems_1.default, null, children)));
|
|
45
45
|
});
|
|
46
46
|
AccordionMenu.Collapsable = AccordionMenuCollapsable_1.default;
|
|
@@ -37,10 +37,10 @@ const react_1 = __importStar(require("react"));
|
|
|
37
37
|
const classnames_1 = __importDefault(require("classnames"));
|
|
38
38
|
const ds_icons_1 = require("@navikt/ds-icons");
|
|
39
39
|
const MenuItems_1 = __importDefault(require("./MenuItems"));
|
|
40
|
-
const Collapsable = react_1.forwardRef((_a, ref) => {
|
|
40
|
+
const Collapsable = (0, react_1.forwardRef)((_a, ref) => {
|
|
41
41
|
var { children, defaultOpen = false, title, className } = _a, rest = __rest(_a, ["children", "defaultOpen", "title", "className"]);
|
|
42
|
-
const [isOpen, setIsOpen] = react_1.useState(defaultOpen);
|
|
43
|
-
return (react_1.default.createElement("div", Object.assign({ ref: ref, className: classnames_1.default("navds-accordion-menu-collapsable", className, {
|
|
42
|
+
const [isOpen, setIsOpen] = (0, react_1.useState)(defaultOpen);
|
|
43
|
+
return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-accordion-menu-collapsable", className, {
|
|
44
44
|
"navds-accordion-menu-collapsable--open": isOpen,
|
|
45
45
|
}) }, rest),
|
|
46
46
|
react_1.default.createElement("button", { onClick: () => setIsOpen(!isOpen), className: "navds-accordion-menu-collapsable__button" },
|
|
@@ -35,9 +35,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
36
|
const react_1 = __importStar(require("react"));
|
|
37
37
|
const classnames_1 = __importDefault(require("classnames"));
|
|
38
|
-
const Item = react_1.forwardRef((_a, ref) => {
|
|
38
|
+
const Item = (0, react_1.forwardRef)((_a, ref) => {
|
|
39
39
|
var { children, as: Component = "a", active = false, className } = _a, rest = __rest(_a, ["children", "as", "active", "className"]);
|
|
40
|
-
return (react_1.default.createElement(Component, Object.assign({ ref: ref, className: classnames_1.default("navds-accordion-menu-item", className, {
|
|
40
|
+
return (react_1.default.createElement(Component, Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-accordion-menu-item", className, {
|
|
41
41
|
"navds-accordion-menu-item--active": active,
|
|
42
42
|
}) }, rest), children));
|
|
43
43
|
});
|
package/cjs/alert/Alert.js
CHANGED
|
@@ -55,10 +55,10 @@ const Icon = (_a) => {
|
|
|
55
55
|
return null;
|
|
56
56
|
}
|
|
57
57
|
};
|
|
58
|
-
exports.AlertContext = react_1.createContext(null);
|
|
59
|
-
const Alert = react_1.forwardRef((_a, ref) => {
|
|
58
|
+
exports.AlertContext = (0, react_1.createContext)(null);
|
|
59
|
+
const Alert = (0, react_1.forwardRef)((_a, ref) => {
|
|
60
60
|
var { children, className, variant, size = "medium", fullWidth = false, inline = false } = _a, rest = __rest(_a, ["children", "className", "variant", "size", "fullWidth", "inline"]);
|
|
61
|
-
return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: classnames_1.default(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }) }),
|
|
61
|
+
return (react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-alert", `navds-alert--${variant}`, `navds-alert--${size}`, { "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }) }),
|
|
62
62
|
react_1.default.createElement(Icon, { "aria-label": `${variant}-ikon`, focusable: "false", role: "img", variant: variant, alt: `${variant}-ikon`, className: "navds-alert__icon" }),
|
|
63
63
|
react_1.default.createElement(__1.BodyLong, { as: "div", size: size, className: "navds-alert__wrapper" }, children)));
|
|
64
64
|
});
|
|
@@ -37,14 +37,14 @@ const react_1 = __importStar(require("react"));
|
|
|
37
37
|
const classnames_1 = __importDefault(require("classnames"));
|
|
38
38
|
const __1 = require("..");
|
|
39
39
|
const _1 = require(".");
|
|
40
|
-
const AlertContent = react_1.forwardRef((_a, ref) => {
|
|
40
|
+
const AlertContent = (0, react_1.forwardRef)((_a, ref) => {
|
|
41
41
|
var _b;
|
|
42
42
|
var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
|
|
43
|
-
const context = react_1.useContext(_1.AlertContext);
|
|
43
|
+
const context = (0, react_1.useContext)(_1.AlertContext);
|
|
44
44
|
if (context === null) {
|
|
45
45
|
console.warn("AlertContent has to be wrapped in <Alert />");
|
|
46
46
|
return null;
|
|
47
47
|
}
|
|
48
|
-
return (react_1.default.createElement(__1.BodyLong, Object.assign({}, rest, { as: "div", className: classnames_1.default(className, "navds-alert__content"), ref: ref, size: (_b = context.size) !== null && _b !== void 0 ? _b : "medium" }), children));
|
|
48
|
+
return (react_1.default.createElement(__1.BodyLong, Object.assign({}, rest, { as: "div", className: (0, classnames_1.default)(className, "navds-alert__content"), ref: ref, size: (_b = context.size) !== null && _b !== void 0 ? _b : "medium" }), children));
|
|
49
49
|
});
|
|
50
50
|
exports.default = AlertContent;
|
package/cjs/alert/AlertTitle.js
CHANGED
|
@@ -36,14 +36,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
36
36
|
const react_1 = __importStar(require("react"));
|
|
37
37
|
const classnames_1 = __importDefault(require("classnames"));
|
|
38
38
|
const __1 = require("..");
|
|
39
|
-
const AlertTitle = react_1.forwardRef((_a, ref) => {
|
|
39
|
+
const AlertTitle = (0, react_1.forwardRef)((_a, ref) => {
|
|
40
40
|
var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
|
|
41
|
-
const context = react_1.useContext(__1.AlertContext);
|
|
41
|
+
const context = (0, react_1.useContext)(__1.AlertContext);
|
|
42
42
|
if (context === null) {
|
|
43
43
|
console.warn("AlertTitle has to be wrapped in <Alert />");
|
|
44
44
|
return null;
|
|
45
45
|
}
|
|
46
46
|
const size = context.size === "medium" ? "small" : "xsmall";
|
|
47
|
-
return (react_1.default.createElement(__1.Heading, Object.assign({}, rest, { ref: ref, className: classnames_1.default(className, "navds-alert__title"), as: "div", size: size }), children));
|
|
47
|
+
return (react_1.default.createElement(__1.Heading, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-alert__title"), as: "div", size: size }), children));
|
|
48
48
|
});
|
|
49
49
|
exports.default = AlertTitle;
|
package/cjs/button/Button.js
CHANGED
|
@@ -36,9 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
36
36
|
const react_1 = __importStar(require("react"));
|
|
37
37
|
const classnames_1 = __importDefault(require("classnames"));
|
|
38
38
|
const __1 = require("../");
|
|
39
|
-
const Button = react_1.forwardRef((_a, ref) => {
|
|
39
|
+
const Button = (0, react_1.forwardRef)((_a, ref) => {
|
|
40
40
|
var { as: Component = "button", variant = "primary", className, children, size = "medium" } = _a, rest = __rest(_a, ["as", "variant", "className", "children", "size"]);
|
|
41
|
-
return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: classnames_1.default(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`) }),
|
|
41
|
+
return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`) }),
|
|
42
42
|
react_1.default.createElement(__1.BodyShort, { as: "span", className: "navds-button__inner", size: size }, children)));
|
|
43
43
|
});
|
|
44
44
|
exports.default = Button;
|
package/cjs/card/MicroCard.js
CHANGED
|
@@ -36,8 +36,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
36
36
|
exports.MicroCard = void 0;
|
|
37
37
|
const react_1 = __importStar(require("react"));
|
|
38
38
|
const classnames_1 = __importDefault(require("classnames"));
|
|
39
|
-
exports.MicroCard = react_1.forwardRef((_a, ref) => {
|
|
39
|
+
exports.MicroCard = (0, react_1.forwardRef)((_a, ref) => {
|
|
40
40
|
var { className, as: Component = "a", children } = _a, rest = __rest(_a, ["className", "as", "children"]);
|
|
41
|
-
return (react_1.default.createElement(Component, Object.assign({ ref: ref, className: classnames_1.default("navds-card__micro", "navds-detail", "navds-detail--small", className), title: children }, rest), children));
|
|
41
|
+
return (react_1.default.createElement(Component, Object.assign({ ref: ref, className: (0, classnames_1.default)("navds-card__micro", "navds-detail", "navds-detail--small", className), title: children }, rest), children));
|
|
42
42
|
});
|
|
43
43
|
exports.default = exports.MicroCard;
|
|
@@ -39,13 +39,13 @@ const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
|
|
|
39
39
|
const react_1 = __importStar(require("react"));
|
|
40
40
|
const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
|
|
41
41
|
const __1 = require("..");
|
|
42
|
-
const CopyToClipboard = react_1.forwardRef((_a, ref) => {
|
|
42
|
+
const CopyToClipboard = (0, react_1.forwardRef)((_a, ref) => {
|
|
43
43
|
var { children, copyText, popoverText, className, size = "medium", popoverPlacement = "right" } = _a, rest = __rest(_a, ["children", "copyText", "popoverText", "className", "size", "popoverPlacement"]);
|
|
44
|
-
const buttonRef = react_1.useRef(null);
|
|
45
|
-
const mergedRef = react_merge_refs_1.default([buttonRef, ref]);
|
|
46
|
-
const timeoutRef = react_1.useRef();
|
|
47
|
-
const [openPopover, setOpenPopover] = react_1.useState(false);
|
|
48
|
-
react_1.useEffect(() => {
|
|
44
|
+
const buttonRef = (0, react_1.useRef)(null);
|
|
45
|
+
const mergedRef = (0, react_merge_refs_1.default)([buttonRef, ref]);
|
|
46
|
+
const timeoutRef = (0, react_1.useRef)();
|
|
47
|
+
const [openPopover, setOpenPopover] = (0, react_1.useState)(false);
|
|
48
|
+
(0, react_1.useEffect)(() => {
|
|
49
49
|
timeoutRef.current = openPopover
|
|
50
50
|
? window.setTimeout(() => setOpenPopover(false), 2000)
|
|
51
51
|
: null;
|
|
@@ -55,11 +55,11 @@ const CopyToClipboard = react_1.forwardRef((_a, ref) => {
|
|
|
55
55
|
}, [openPopover]);
|
|
56
56
|
const title = `Kopier ${copyText}`;
|
|
57
57
|
const handleClick = () => {
|
|
58
|
-
copy_to_clipboard_1.default(copyText);
|
|
58
|
+
(0, copy_to_clipboard_1.default)(copyText);
|
|
59
59
|
setOpenPopover(true);
|
|
60
60
|
};
|
|
61
61
|
return (react_1.default.createElement("div", null,
|
|
62
|
-
react_1.default.createElement(__1.Button, Object.assign({ ref: mergedRef, variant: "secondary", title: title, className: classnames_1.default("navds-copy-to-clipboard", className), onClick: handleClick, size: size }, rest),
|
|
62
|
+
react_1.default.createElement(__1.Button, Object.assign({ ref: mergedRef, variant: "secondary", title: title, className: (0, classnames_1.default)("navds-copy-to-clipboard", className), onClick: handleClick, size: size }, rest),
|
|
63
63
|
react_1.default.createElement(ds_icons_1.Copy, { focusable: "false", role: "img", "aria-label": "Fil ikon for kopiering" }),
|
|
64
64
|
children ? children : react_1.default.createElement("span", { className: "sr-only" }, title)),
|
|
65
65
|
react_1.default.createElement(__1.Popover, { role: "alert", anchorEl: buttonRef.current, open: openPopover, onClose: () => setOpenPopover(false), placement: popoverPlacement, arrow: false, className: "navds-copy-to-clipboard__popover" },
|
|
@@ -36,9 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
36
36
|
const react_1 = __importStar(require("react"));
|
|
37
37
|
const classnames_1 = __importDefault(require("classnames"));
|
|
38
38
|
const __1 = require("..");
|
|
39
|
-
const ConfirmationPanel = react_1.forwardRef((_a, ref) => {
|
|
39
|
+
const ConfirmationPanel = (0, react_1.forwardRef)((_a, ref) => {
|
|
40
40
|
var { className, children, label } = _a, props = __rest(_a, ["className", "children", "label"]);
|
|
41
|
-
return (react_1.default.createElement("div", { ref: ref, className: classnames_1.default("navds-confirmation-panel", className, {
|
|
41
|
+
return (react_1.default.createElement("div", { ref: ref, className: (0, classnames_1.default)("navds-confirmation-panel", className, {
|
|
42
42
|
"navds-confirmation-panel--s": props.size === "small",
|
|
43
43
|
"navds-confirmation-panel--error": !!props.error,
|
|
44
44
|
"navds-confirmation-panel--checked": !!props.checked,
|
package/cjs/form/ErrorMessage.js
CHANGED
|
@@ -8,6 +8,6 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
8
8
|
const __1 = require("..");
|
|
9
9
|
const ErrorMessage = (props) => {
|
|
10
10
|
var _a;
|
|
11
|
-
return (react_1.default.createElement(__1.Label, Object.assign({}, props, { as: "div", className: classnames_1.default("navds-error-message", props.className, `navds-error-message--${(_a = props.size) !== null && _a !== void 0 ? _a : "medium"}`) })));
|
|
11
|
+
return (react_1.default.createElement(__1.Label, Object.assign({}, props, { as: "div", className: (0, classnames_1.default)("navds-error-message", props.className, `navds-error-message--${(_a = props.size) !== null && _a !== void 0 ? _a : "medium"}`) })));
|
|
12
12
|
};
|
|
13
13
|
exports.default = ErrorMessage;
|
|
@@ -40,25 +40,25 @@ const __1 = require("../..");
|
|
|
40
40
|
const ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
|
|
41
41
|
const useFieldset_1 = require("./useFieldset");
|
|
42
42
|
exports.FieldsetContext = react_1.default.createContext(null);
|
|
43
|
-
const Fieldset = react_1.forwardRef((props, ref) => {
|
|
43
|
+
const Fieldset = (0, react_1.forwardRef)((props, ref) => {
|
|
44
44
|
var _a, _b, _c;
|
|
45
|
-
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = useFieldset_1.useFieldset(props);
|
|
46
|
-
const fieldset = react_1.useContext(exports.FieldsetContext);
|
|
45
|
+
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFieldset_1.useFieldset)(props);
|
|
46
|
+
const fieldset = (0, react_1.useContext)(exports.FieldsetContext);
|
|
47
47
|
const { children, className, errorPropagation = true, legend, description, hideLegend } = props, rest = __rest(props, ["children", "className", "errorPropagation", "legend", "description", "hideLegend"]);
|
|
48
48
|
return (react_1.default.createElement(exports.FieldsetContext.Provider, { value: {
|
|
49
49
|
error: errorPropagation ? (_a = props.error) !== null && _a !== void 0 ? _a : fieldset === null || fieldset === void 0 ? void 0 : fieldset.error : undefined,
|
|
50
|
-
errorId: classnames_1.default({
|
|
50
|
+
errorId: (0, classnames_1.default)({
|
|
51
51
|
[errorId]: showErrorMsg,
|
|
52
52
|
[(_b = fieldset === null || fieldset === void 0 ? void 0 : fieldset.errorId) !== null && _b !== void 0 ? _b : ""]: !!(fieldset === null || fieldset === void 0 ? void 0 : fieldset.error),
|
|
53
53
|
}),
|
|
54
54
|
size,
|
|
55
55
|
disabled: (_c = props.disabled) !== null && _c !== void 0 ? _c : false,
|
|
56
56
|
} },
|
|
57
|
-
react_1.default.createElement("fieldset", Object.assign({}, __1.omit(rest, ["errorId", "error", "size"]), inputProps, { ref: ref, className: classnames_1.default(className, "navds-fieldset", `navds-fieldset--${size}`, { "navds-fieldset--error": hasError }) }),
|
|
58
|
-
react_1.default.createElement(__1.Label, { size: size, as: "legend", className: classnames_1.default("navds-fieldset__legend", {
|
|
57
|
+
react_1.default.createElement("fieldset", Object.assign({}, (0, __1.omit)(rest, ["errorId", "error", "size"]), inputProps, { ref: ref, className: (0, classnames_1.default)(className, "navds-fieldset", `navds-fieldset--${size}`, { "navds-fieldset--error": hasError }) }),
|
|
58
|
+
react_1.default.createElement(__1.Label, { size: size, as: "legend", className: (0, classnames_1.default)("navds-fieldset__legend", {
|
|
59
59
|
"sr-only": !!hideLegend,
|
|
60
60
|
}) }, legend),
|
|
61
|
-
!!description && (react_1.default.createElement(__1.BodyShort, { className: classnames_1.default("navds-fieldset__description", {
|
|
61
|
+
!!description && (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-fieldset__description", {
|
|
62
62
|
"sr-only": !!hideLegend,
|
|
63
63
|
}), id: inputDescriptionId, size: size }, description)),
|
|
64
64
|
children,
|
|
@@ -6,7 +6,7 @@ const useFormField_1 = require("../useFormField");
|
|
|
6
6
|
* Handles props for Fieldset in context with parent Fieldset.
|
|
7
7
|
*/
|
|
8
8
|
const useFieldset = (props) => {
|
|
9
|
-
const formField = useFormField_1.useFormField(props, "fieldset");
|
|
9
|
+
const formField = (0, useFormField_1.useFormField)(props, "fieldset");
|
|
10
10
|
const { inputProps } = formField;
|
|
11
11
|
return Object.assign(Object.assign({}, formField), { inputProps: {
|
|
12
12
|
"aria-invalid": inputProps["aria-invalid"],
|
package/cjs/form/Select.js
CHANGED
|
@@ -39,18 +39,18 @@ const ds_icons_1 = require("@navikt/ds-icons");
|
|
|
39
39
|
const __1 = require("..");
|
|
40
40
|
const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
|
|
41
41
|
const useFormField_1 = require("./useFormField");
|
|
42
|
-
const Select = react_1.forwardRef((props, ref) => {
|
|
43
|
-
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = useFormField_1.useFormField(props, "textField");
|
|
42
|
+
const Select = (0, react_1.forwardRef)((props, ref) => {
|
|
43
|
+
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textField");
|
|
44
44
|
const { children, label, className, description, htmlSize, hideLabel = false } = props, rest = __rest(props, ["children", "label", "className", "description", "htmlSize", "hideLabel"]);
|
|
45
|
-
return (react_1.default.createElement("div", { className: classnames_1.default(props.className, "navds-form-field", `navds-form-field--${size}`, { "navds-select--error": hasError }) },
|
|
46
|
-
react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: classnames_1.default("navds-select__label", {
|
|
45
|
+
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(props.className, "navds-form-field", `navds-form-field--${size}`, { "navds-select--error": hasError }) },
|
|
46
|
+
react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-select__label", {
|
|
47
47
|
"sr-only": hideLabel,
|
|
48
48
|
}) }, label),
|
|
49
|
-
!!description && (react_1.default.createElement(__1.BodyShort, { className: classnames_1.default("navds-select__description", {
|
|
49
|
+
!!description && (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-select__description", {
|
|
50
50
|
"sr-only": hideLabel,
|
|
51
51
|
}), id: inputDescriptionId, size: size }, description)),
|
|
52
52
|
react_1.default.createElement("div", { className: "navds-select__container" },
|
|
53
|
-
react_1.default.createElement("select", Object.assign({}, __1.omit(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: classnames_1.default(className, "navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: props.htmlSize }), children),
|
|
53
|
+
react_1.default.createElement("select", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: (0, classnames_1.default)(className, "navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: props.htmlSize }), children),
|
|
54
54
|
react_1.default.createElement(ds_icons_1.Expand, { className: "navds-select__chevron" })),
|
|
55
55
|
react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(ErrorMessage_1.default, { size: size }, props.error))));
|
|
56
56
|
});
|
package/cjs/form/TextField.js
CHANGED
|
@@ -38,15 +38,15 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
38
38
|
const __1 = require("..");
|
|
39
39
|
const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
|
|
40
40
|
const useFormField_1 = require("./useFormField");
|
|
41
|
-
const TextField = react_1.forwardRef((props, ref) => {
|
|
42
|
-
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = useFormField_1.useFormField(props, "textField");
|
|
41
|
+
const TextField = (0, react_1.forwardRef)((props, ref) => {
|
|
42
|
+
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textField");
|
|
43
43
|
const { label, className, description, htmlSize, hideLabel = false } = props, rest = __rest(props, ["label", "className", "description", "htmlSize", "hideLabel"]);
|
|
44
|
-
return (react_1.default.createElement("div", { className: classnames_1.default(props.className, "navds-form-field", `navds-form-field--${size}`, { "navds-text-field--error": hasError }) },
|
|
45
|
-
react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: classnames_1.default("navds-text-field__label", { "sr-only": hideLabel }) }, label),
|
|
46
|
-
!!description && (react_1.default.createElement(__1.BodyShort, { className: classnames_1.default("navds-text-field__description", {
|
|
44
|
+
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(props.className, "navds-form-field", `navds-form-field--${size}`, { "navds-text-field--error": hasError }) },
|
|
45
|
+
react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-text-field__label", { "sr-only": hideLabel }) }, label),
|
|
46
|
+
!!description && (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-text-field__description", {
|
|
47
47
|
"sr-only": hideLabel,
|
|
48
48
|
}), id: inputDescriptionId, size: size }, description)),
|
|
49
|
-
react_1.default.createElement("input", Object.assign({}, __1.omit(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, type: "text", className: classnames_1.default(className, "navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "m"}`), size: htmlSize })),
|
|
49
|
+
react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, type: "text", className: (0, classnames_1.default)(className, "navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "m"}`), size: htmlSize })),
|
|
50
50
|
react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(ErrorMessage_1.default, { size: size }, props.error))));
|
|
51
51
|
});
|
|
52
52
|
exports.default = TextField;
|
package/cjs/form/Textarea.js
CHANGED
|
@@ -41,22 +41,22 @@ const __1 = require("..");
|
|
|
41
41
|
const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
|
|
42
42
|
const useFormField_1 = require("./useFormField");
|
|
43
43
|
const __2 = require("..");
|
|
44
|
-
const Textarea = react_1.forwardRef((props, ref) => {
|
|
45
|
-
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = useFormField_1.useFormField(props, "textarea");
|
|
44
|
+
const Textarea = (0, react_1.forwardRef)((props, ref) => {
|
|
45
|
+
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textarea");
|
|
46
46
|
const { label, className, description, maxLength, hideLabel = false } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel"]);
|
|
47
|
-
const maxLengthId = `TextareaMaxLength-${__2.useId()}`;
|
|
47
|
+
const maxLengthId = `TextareaMaxLength-${(0, __2.useId)()}`;
|
|
48
48
|
const hasMaxLength = maxLength !== undefined && maxLength > 0;
|
|
49
|
-
return (react_1.default.createElement("div", { className: classnames_1.default(props.className, "navds-form-field", `navds-form-field--${size}`, { "navds-textarea--error": hasError }) },
|
|
50
|
-
react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: classnames_1.default("navds-textarea__label", {
|
|
49
|
+
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(props.className, "navds-form-field", `navds-form-field--${size}`, { "navds-textarea--error": hasError }) },
|
|
50
|
+
react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-textarea__label", {
|
|
51
51
|
"sr-only": hideLabel,
|
|
52
52
|
}) }, label),
|
|
53
|
-
!!description && (react_1.default.createElement(__1.BodyShort, { className: classnames_1.default("navds-textarea__description", {
|
|
53
|
+
!!description && (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-textarea__description", {
|
|
54
54
|
"sr-only": hideLabel,
|
|
55
55
|
}), id: inputDescriptionId, size: size }, description)),
|
|
56
56
|
react_1.default.createElement("div", { className: "navds-textarea__wrapper" },
|
|
57
|
-
react_1.default.createElement(TextareaAutosize_1.default, Object.assign({}, __1.omit(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: classnames_1.default(className, "navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
|
|
57
|
+
react_1.default.createElement(TextareaAutosize_1.default, Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: (0, classnames_1.default)(className, "navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
|
|
58
58
|
"navds-textarea--counter": hasMaxLength,
|
|
59
|
-
}), "aria-describedby": classnames_1.default(inputProps["aria-describedby"], {
|
|
59
|
+
}), "aria-describedby": (0, classnames_1.default)(inputProps["aria-describedby"], {
|
|
60
60
|
[maxLengthId]: hasMaxLength,
|
|
61
61
|
}) })),
|
|
62
62
|
hasMaxLength && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
@@ -72,9 +72,9 @@ const Textarea = react_1.forwardRef((props, ref) => {
|
|
|
72
72
|
});
|
|
73
73
|
const Counter = ({ maxLength, currentLength, size }) => {
|
|
74
74
|
const difference = maxLength - currentLength;
|
|
75
|
-
return (react_1.default.createElement(__1.BodyShort, { className: classnames_1.default("navds-textarea__counter", {
|
|
75
|
+
return (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-textarea__counter", {
|
|
76
76
|
"navds-textarea__counter--error": difference < 0,
|
|
77
|
-
}), "aria-live": "polite", size: size }, difference < 0
|
|
77
|
+
}), "aria-live": difference < 20 ? "polite" : "off", size: size }, difference < 0
|
|
78
78
|
? `Du har ${Math.abs(difference)} tegn for mye`
|
|
79
79
|
: `Du har ${difference} tegn igjen`));
|
|
80
80
|
};
|
|
@@ -27,14 +27,14 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
27
27
|
const useCheckbox_1 = __importDefault(require("./useCheckbox"));
|
|
28
28
|
const ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
|
|
29
29
|
const __1 = require("../..");
|
|
30
|
-
const Checkbox = react_1.forwardRef((props, ref) => {
|
|
31
|
-
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = useCheckbox_1.default(props);
|
|
32
|
-
return (react_1.default.createElement("div", { className: classnames_1.default(props.className, "navds-checkbox", `navds-checkbox--${size}`, {
|
|
30
|
+
const Checkbox = (0, react_1.forwardRef)((props, ref) => {
|
|
31
|
+
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useCheckbox_1.default)(props);
|
|
32
|
+
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(props.className, "navds-checkbox", `navds-checkbox--${size}`, {
|
|
33
33
|
"navds-checkbox--error": hasError,
|
|
34
34
|
"navds-checkbox--with-error-message": showErrorMsg,
|
|
35
35
|
"navds-checkbox--with-description": !!props.description,
|
|
36
36
|
}) },
|
|
37
|
-
react_1.default.createElement("input", Object.assign({}, __1.omit(props, [
|
|
37
|
+
react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(props, [
|
|
38
38
|
"children",
|
|
39
39
|
"size",
|
|
40
40
|
"error",
|
|
@@ -37,13 +37,13 @@ exports.CheckboxGroupContext = void 0;
|
|
|
37
37
|
const react_1 = __importStar(require("react"));
|
|
38
38
|
const classnames_1 = __importDefault(require("classnames"));
|
|
39
39
|
const __1 = require("..");
|
|
40
|
-
exports.CheckboxGroupContext = react_1.createContext(null);
|
|
41
|
-
const CheckboxGroup = react_1.forwardRef((_a, ref) => {
|
|
40
|
+
exports.CheckboxGroupContext = (0, react_1.createContext)(null);
|
|
41
|
+
const CheckboxGroup = (0, react_1.forwardRef)((_a, ref) => {
|
|
42
42
|
var _b, _c;
|
|
43
43
|
var { value, defaultValue = [], onChange = () => { }, children, className } = _a, rest = __rest(_a, ["value", "defaultValue", "onChange", "children", "className"]);
|
|
44
44
|
const state = value !== null && value !== void 0 ? value : [];
|
|
45
|
-
const fieldset = react_1.useContext(__1.FieldsetContext);
|
|
46
|
-
return (react_1.default.createElement(__1.Fieldset, Object.assign({}, rest, { ref: ref, className: classnames_1.default(className, "navds-checkbox-group", `navds-checkbox-group--${(_c = (_b = rest.size) !== null && _b !== void 0 ? _b : fieldset === null || fieldset === void 0 ? void 0 : fieldset.size) !== null && _c !== void 0 ? _c : "medium"}`) }),
|
|
45
|
+
const fieldset = (0, react_1.useContext)(__1.FieldsetContext);
|
|
46
|
+
return (react_1.default.createElement(__1.Fieldset, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-checkbox-group", `navds-checkbox-group--${(_c = (_b = rest.size) !== null && _b !== void 0 ? _b : fieldset === null || fieldset === void 0 ? void 0 : fieldset.size) !== null && _c !== void 0 ? _c : "medium"}`) }),
|
|
47
47
|
react_1.default.createElement(exports.CheckboxGroupContext.Provider, { value: {
|
|
48
48
|
value,
|
|
49
49
|
defaultValue,
|
|
@@ -19,8 +19,8 @@ const CheckboxGroup_1 = require("./CheckboxGroup");
|
|
|
19
19
|
*/
|
|
20
20
|
const useCheckbox = (_a) => {
|
|
21
21
|
var { children } = _a, props = __rest(_a, ["children"]);
|
|
22
|
-
const checkboxGroup = react_1.useContext(CheckboxGroup_1.CheckboxGroupContext);
|
|
23
|
-
const _b = useFormField_1.useFormField(props, "checkbox"), { inputProps } = _b, rest = __rest(_b, ["inputProps"]);
|
|
22
|
+
const checkboxGroup = (0, react_1.useContext)(CheckboxGroup_1.CheckboxGroupContext);
|
|
23
|
+
const _b = (0, useFormField_1.useFormField)(props, "checkbox"), { inputProps } = _b, rest = __rest(_b, ["inputProps"]);
|
|
24
24
|
if (checkboxGroup) {
|
|
25
25
|
if (props.checked) {
|
|
26
26
|
console.warn("`checked` is unsupported on <Checkbox> elements within a <CheckboxGroup>. Please set a `value` or `defaultValue` on <CheckboxGroup> instead.");
|
|
@@ -36,9 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
36
36
|
const react_1 = __importStar(require("react"));
|
|
37
37
|
const classnames_1 = __importDefault(require("classnames"));
|
|
38
38
|
const __1 = require("../..");
|
|
39
|
-
const ErrorSummary = react_1.forwardRef((_a, ref) => {
|
|
39
|
+
const ErrorSummary = (0, react_1.forwardRef)((_a, ref) => {
|
|
40
40
|
var { children, className, size = "medium", headingTag = "h2", heading } = _a, rest = __rest(_a, ["children", "className", "size", "headingTag", "heading"]);
|
|
41
|
-
return (react_1.default.createElement("div", Object.assign({ ref: ref }, rest, { className: classnames_1.default(className, "navds-error-summary", `navds-error-summary--${size}`), tabIndex: -1, role: "region" }),
|
|
41
|
+
return (react_1.default.createElement("div", Object.assign({ ref: ref }, rest, { className: (0, classnames_1.default)(className, "navds-error-summary", `navds-error-summary--${size}`), tabIndex: -1, role: "region" }),
|
|
42
42
|
react_1.default.createElement(__1.Heading, { className: "navds-error-summary__heading", as: headingTag, size: "small" }, heading),
|
|
43
43
|
react_1.default.createElement(__1.BodyShort, { as: "ul", size: size, className: "navds-error-summary__list" }, react_1.default.Children.map(children, (child) => {
|
|
44
44
|
return react_1.default.createElement("li", { key: child === null || child === void 0 ? void 0 : child.toString() }, child);
|
|
@@ -35,8 +35,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
36
|
const react_1 = __importStar(require("react"));
|
|
37
37
|
const classnames_1 = __importDefault(require("classnames"));
|
|
38
|
-
const ErrorSummaryItem = react_1.forwardRef((_a, ref) => {
|
|
38
|
+
const ErrorSummaryItem = (0, react_1.forwardRef)((_a, ref) => {
|
|
39
39
|
var { children, as: Component = "a", className } = _a, rest = __rest(_a, ["children", "as", "className"]);
|
|
40
|
-
return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: classnames_1.default(className, "navds-error-summary__item", "navds-link") }), children));
|
|
40
|
+
return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-error-summary__item", "navds-link") }), children));
|
|
41
41
|
});
|
|
42
42
|
exports.default = ErrorSummaryItem;
|
package/cjs/form/radio/Radio.js
CHANGED
|
@@ -27,14 +27,14 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
27
27
|
const __1 = require("../..");
|
|
28
28
|
const ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
|
|
29
29
|
const useRadio_1 = require("./useRadio");
|
|
30
|
-
const Radio = react_1.forwardRef((props, ref) => {
|
|
31
|
-
const { inputProps, errorId, showErrorMsg, size, hasError, inputDescriptionId, } = useRadio_1.useRadio(props);
|
|
32
|
-
return (react_1.default.createElement("div", { className: classnames_1.default(props.className, "navds-radio", `navds-radio--${size}`, {
|
|
30
|
+
const Radio = (0, react_1.forwardRef)((props, ref) => {
|
|
31
|
+
const { inputProps, errorId, showErrorMsg, size, hasError, inputDescriptionId, } = (0, useRadio_1.useRadio)(props);
|
|
32
|
+
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(props.className, "navds-radio", `navds-radio--${size}`, {
|
|
33
33
|
"navds-radio--error": hasError,
|
|
34
34
|
"navds-radio--with-error-message": showErrorMsg,
|
|
35
35
|
"navds-radio--with-description": !!props.description,
|
|
36
36
|
}) },
|
|
37
|
-
react_1.default.createElement("input", Object.assign({}, __1.omit(props, [
|
|
37
|
+
react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(props, [
|
|
38
38
|
"children",
|
|
39
39
|
"size",
|
|
40
40
|
"error",
|
|
@@ -39,12 +39,12 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
39
39
|
const __1 = require("..");
|
|
40
40
|
const __2 = require("../..");
|
|
41
41
|
exports.RadioGroupContext = react_1.default.createContext(null);
|
|
42
|
-
const RadioGroup = react_1.forwardRef((_a, ref) => {
|
|
42
|
+
const RadioGroup = (0, react_1.forwardRef)((_a, ref) => {
|
|
43
43
|
var _b, _c;
|
|
44
44
|
var { children, className, name, defaultValue, value, onChange = () => { }, required } = _a, rest = __rest(_a, ["children", "className", "name", "defaultValue", "value", "onChange", "required"]);
|
|
45
|
-
const fieldset = react_1.useContext(__1.FieldsetContext);
|
|
46
|
-
const nameId = __2.useId();
|
|
47
|
-
return (react_1.default.createElement(__1.Fieldset, Object.assign({}, rest, { ref: ref, className: classnames_1.default(className, "navds-radio-group", `navds-radio-group--${(_c = (_b = rest.size) !== null && _b !== void 0 ? _b : fieldset === null || fieldset === void 0 ? void 0 : fieldset.size) !== null && _c !== void 0 ? _c : "medium"}`) }),
|
|
45
|
+
const fieldset = (0, react_1.useContext)(__1.FieldsetContext);
|
|
46
|
+
const nameId = (0, __2.useId)();
|
|
47
|
+
return (react_1.default.createElement(__1.Fieldset, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-radio-group", `navds-radio-group--${(_c = (_b = rest.size) !== null && _b !== void 0 ? _b : fieldset === null || fieldset === void 0 ? void 0 : fieldset.size) !== null && _c !== void 0 ? _c : "medium"}`) }),
|
|
48
48
|
react_1.default.createElement(exports.RadioGroupContext.Provider, { value: {
|
|
49
49
|
name: name !== null && name !== void 0 ? name : `radioGroupName-${nameId}`,
|
|
50
50
|
defaultValue,
|
|
@@ -20,8 +20,8 @@ const RadioGroup_1 = require("./RadioGroup");
|
|
|
20
20
|
*/
|
|
21
21
|
const useRadio = (props) => {
|
|
22
22
|
var _a;
|
|
23
|
-
const radioGroup = react_1.useContext(RadioGroup_1.RadioGroupContext);
|
|
24
|
-
const _b = useFormField_1.useFormField(props, "radio"), { inputProps } = _b, rest = __rest(_b, ["inputProps"]);
|
|
23
|
+
const radioGroup = (0, react_1.useContext)(RadioGroup_1.RadioGroupContext);
|
|
24
|
+
const _b = (0, useFormField_1.useFormField)(props, "radio"), { inputProps } = _b, rest = __rest(_b, ["inputProps"]);
|
|
25
25
|
if (!radioGroup) {
|
|
26
26
|
console.warn("<Radio> must be used inside <RadioGroup>.");
|
|
27
27
|
}
|
|
@@ -40,14 +40,14 @@ const __1 = require("../..");
|
|
|
40
40
|
const ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
|
|
41
41
|
const useFormField_1 = require("../useFormField");
|
|
42
42
|
exports.SearchFieldContext = react_1.default.createContext(null);
|
|
43
|
-
const SearchField = react_1.forwardRef((props, ref) => {
|
|
44
|
-
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = useFormField_1.useFormField(props, "searchfield");
|
|
43
|
+
const SearchField = (0, react_1.forwardRef)((props, ref) => {
|
|
44
|
+
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "searchfield");
|
|
45
45
|
const { className, hideLabel, children, label, description, error } = props, rest = __rest(props, ["className", "hideLabel", "children", "label", "description", "error"]);
|
|
46
|
-
return (react_1.default.createElement("div", Object.assign({ ref: ref }, __1.omit(rest, ["id", "error", "errorId", "size", "disabled"]), { className: classnames_1.default(className, "navds-form-field", `navds-form-field--${size !== null && size !== void 0 ? size : "medium"}`, "navds-search-field", { "navds-search-field--error": hasError }) }),
|
|
47
|
-
react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: classnames_1.default("navds-text-field__label", {
|
|
46
|
+
return (react_1.default.createElement("div", Object.assign({ ref: ref }, (0, __1.omit)(rest, ["id", "error", "errorId", "size", "disabled"]), { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size !== null && size !== void 0 ? size : "medium"}`, "navds-search-field", { "navds-search-field--error": hasError }) }),
|
|
47
|
+
react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-text-field__label", {
|
|
48
48
|
"sr-only": hideLabel,
|
|
49
49
|
}) }, label),
|
|
50
|
-
!!description && (react_1.default.createElement(__1.BodyShort, { className: classnames_1.default("navds-text-field__description", {
|
|
50
|
+
!!description && (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-text-field__description", {
|
|
51
51
|
"sr-only": hideLabel,
|
|
52
52
|
}), id: inputDescriptionId, size: size }, description)),
|
|
53
53
|
react_1.default.createElement("div", { className: "navds-search-field__input-wrapper" },
|