@navikt/ds-react 0.16.17 → 0.16.20

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.
Files changed (45) hide show
  1. package/cjs/button/Button.js +3 -3
  2. package/cjs/modal/Modal.js +2 -2
  3. package/cjs/table/ColumnHeader.js +58 -0
  4. package/cjs/table/DataCell.js +4 -2
  5. package/cjs/table/HeaderCell.js +4 -2
  6. package/cjs/table/Table.js +4 -2
  7. package/cjs/toggle-group/ToggleGroup.js +1 -1
  8. package/esm/button/Button.d.ts +1 -1
  9. package/esm/button/Button.js +3 -3
  10. package/esm/button/Button.js.map +1 -1
  11. package/esm/menu/Menu.js.map +1 -1
  12. package/esm/modal/Modal.d.ts +5 -0
  13. package/esm/modal/Modal.js +2 -2
  14. package/esm/modal/Modal.js.map +1 -1
  15. package/esm/table/ColumnHeader.d.ts +17 -0
  16. package/esm/table/ColumnHeader.js +35 -0
  17. package/esm/table/ColumnHeader.js.map +1 -0
  18. package/esm/table/DataCell.d.ts +5 -0
  19. package/esm/table/DataCell.js +4 -2
  20. package/esm/table/DataCell.js.map +1 -1
  21. package/esm/table/HeaderCell.d.ts +6 -1
  22. package/esm/table/HeaderCell.js +4 -2
  23. package/esm/table/HeaderCell.js.map +1 -1
  24. package/esm/table/Table.d.ts +16 -0
  25. package/esm/table/Table.js +4 -2
  26. package/esm/table/Table.js.map +1 -1
  27. package/esm/toggle-group/ToggleGroup.js +1 -1
  28. package/esm/toggle-group/ToggleGroup.js.map +1 -1
  29. package/package.json +4 -3
  30. package/src/button/Button.tsx +7 -3
  31. package/src/button/button.stories.tsx +8 -0
  32. package/src/menu/Menu.tsx +9 -9
  33. package/src/modal/Modal.tsx +7 -0
  34. package/src/modal/{stories/modal.stories.tsx → modal.stories.tsx} +9 -5
  35. package/src/table/ColumnHeader.tsx +70 -0
  36. package/src/table/DataCell.tsx +11 -3
  37. package/src/table/HeaderCell.tsx +11 -3
  38. package/src/table/Table.tsx +30 -2
  39. package/src/table/stories/people.json +822 -0
  40. package/src/table/stories/table-async.stories.tsx +169 -0
  41. package/src/table/stories/table-hot.stories.tsx +376 -0
  42. package/src/table/stories/table.stories.tsx +35 -2
  43. package/src/toggle-group/ToggleGroup.stories.tsx +11 -0
  44. package/src/toggle-group/ToggleGroup.tsx +1 -1
  45. package/src/modal/stories/modal.stories.mdx +0 -32
@@ -39,7 +39,7 @@ const classnames_1 = __importDefault(require("classnames"));
39
39
  const __1 = require("../");
40
40
  const util_1 = require("../util");
41
41
  const Button = (0, react_1.forwardRef)((_a, ref) => {
42
- var { as: Component = "button", variant = "primary", className, children, size = "medium", loading = false, disabled } = _a, rest = __rest(_a, ["as", "variant", "className", "children", "size", "loading", "disabled"]);
42
+ var { as: Component = "button", variant = "primary", className, children, size = "medium", loading = false, disabled, style } = _a, rest = __rest(_a, ["as", "variant", "className", "children", "size", "loading", "disabled", "style"]);
43
43
  const buttonRef = (0, react_1.useRef)(null);
44
44
  const mergedRef = (0, react_merge_refs_1.default)([buttonRef, ref]);
45
45
  const [widthOverride, setWidthOverride] = (0, react_1.useState)();
@@ -57,7 +57,7 @@ const Button = (0, react_1.forwardRef)((_a, ref) => {
57
57
  }, [loading, children]);
58
58
  return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: mergedRef, className: (0, classnames_1.default)(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`, {
59
59
  "navds-button--loading": widthOverride,
60
- }), style: { width: widthOverride }, disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }),
61
- react_1.default.createElement(__1.BodyShort, { as: "span", className: "navds-button__inner", size: size, "aria-live": "polite" }, widthOverride ? react_1.default.createElement(__1.Loader, { size: size }) : children)));
60
+ }), style: Object.assign(Object.assign({}, style), { width: widthOverride }), disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }),
61
+ react_1.default.createElement(__1.BodyShort, { as: "span", className: "navds-button__inner", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, widthOverride ? react_1.default.createElement(__1.Loader, { size: size }) : children)));
62
62
  });
63
63
  exports.default = Button;
@@ -41,7 +41,7 @@ const ds_icons_1 = require("@navikt/ds-icons");
41
41
  const __1 = require("..");
42
42
  const ModalContent_1 = __importDefault(require("./ModalContent"));
43
43
  const Modal = (0, react_1.forwardRef)((_a, ref) => {
44
- var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal"]);
44
+ var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal, "aria-label": contentLabel } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal", "aria-label"]);
45
45
  const modalRef = (0, react_1.useRef)(null);
46
46
  const mergedRef = (0, react_merge_refs_1.default)([modalRef, ref]);
47
47
  const buttonRef = (0, react_1.useRef)(null);
@@ -57,7 +57,7 @@ const Modal = (0, react_1.forwardRef)((_a, ref) => {
57
57
  describedby: ariaDescribedBy,
58
58
  labelledby: ariaLabelledBy,
59
59
  modal: ariaModal,
60
- } }),
60
+ }, contentLabel: contentLabel }),
61
61
  children,
62
62
  closeButton && (react_1.default.createElement(__1.Button, { className: (0, classnames_1.default)("navds-modal__button", {
63
63
  "navds-modal__button--shake": shouldCloseOnOverlayClick,
@@ -0,0 +1,58 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
11
+ }) : function(o, v) {
12
+ o["default"] = v;
13
+ });
14
+ var __importStar = (this && this.__importStar) || function (mod) {
15
+ if (mod && mod.__esModule) return mod;
16
+ var result = {};
17
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
+ __setModuleDefault(result, mod);
19
+ return result;
20
+ };
21
+ var __rest = (this && this.__rest) || function (s, e) {
22
+ var t = {};
23
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
24
+ t[p] = s[p];
25
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
26
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
27
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
28
+ t[p[i]] = s[p[i]];
29
+ }
30
+ return t;
31
+ };
32
+ var __importDefault = (this && this.__importDefault) || function (mod) {
33
+ return (mod && mod.__esModule) ? mod : { "default": mod };
34
+ };
35
+ Object.defineProperty(exports, "__esModule", { value: true });
36
+ const react_1 = __importStar(require("react"));
37
+ const ds_icons_1 = require("@navikt/ds-icons");
38
+ const __1 = require("..");
39
+ const HeaderCell_1 = __importDefault(require("./HeaderCell"));
40
+ const ColumnHeader = (0, react_1.forwardRef)((_a, ref) => {
41
+ var _b, _c, _d, _e;
42
+ var { className, children, sortable = false, sortKey } = _a, rest = __rest(_a, ["className", "children", "sortable", "sortKey"]);
43
+ const context = (0, react_1.useContext)(__1.TableContext);
44
+ if (sortable && !sortKey) {
45
+ console.warn("ColumnHeader with `sortable=true` must have a sortKey.");
46
+ }
47
+ return (react_1.default.createElement(HeaderCell_1.default, Object.assign({ scope: "col", ref: ref, className: className, "aria-sort": sortable
48
+ ? ((_b = context === null || context === void 0 ? void 0 : context.sort) === null || _b === void 0 ? void 0 : _b.orderBy) === sortKey
49
+ ? (_c = context === null || context === void 0 ? void 0 : context.sort) === null || _c === void 0 ? void 0 : _c.direction
50
+ : "none"
51
+ : undefined }, rest), sortable ? (react_1.default.createElement("button", { className: "navds-table__sort-button", onClick: sortable && sortKey
52
+ ? () => { var _a; return (_a = context === null || context === void 0 ? void 0 : context.onSortChange) === null || _a === void 0 ? void 0 : _a.call(context, sortKey); }
53
+ : undefined },
54
+ children,
55
+ ((_d = context === null || context === void 0 ? void 0 : context.sort) === null || _d === void 0 ? void 0 : _d.orderBy) === sortKey &&
56
+ ((_e = context === null || context === void 0 ? void 0 : context.sort) === null || _e === void 0 ? void 0 : _e.direction) === "descending" ? (react_1.default.createElement(ds_icons_1.Down, { "aria-label": "sorter synkende" })) : (react_1.default.createElement(ds_icons_1.Up, { "aria-label": "sorter stigende" })))) : (children)));
57
+ });
58
+ exports.default = ColumnHeader;
@@ -38,8 +38,10 @@ const classnames_1 = __importDefault(require("classnames"));
38
38
  const __1 = require("..");
39
39
  const _1 = require(".");
40
40
  const DataCell = (0, react_1.forwardRef)((_a, ref) => {
41
- var { className, children = "" } = _a, rest = __rest(_a, ["className", "children"]);
41
+ var { className, children = "", align } = _a, rest = __rest(_a, ["className", "children", "align"]);
42
42
  const context = (0, react_1.useContext)(_1.TableContext);
43
- return (react_1.default.createElement(__1.BodyShort, Object.assign({ as: "td", ref: ref, className: (0, classnames_1.default)("navds-table__data-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
43
+ return (react_1.default.createElement(__1.BodyShort, Object.assign({ as: "td", ref: ref, className: (0, classnames_1.default)("navds-table__data-cell", className, {
44
+ [`navds-table__data-cell--align-${align}`]: align,
45
+ }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
44
46
  });
45
47
  exports.default = DataCell;
@@ -37,8 +37,10 @@ const react_1 = __importStar(require("react"));
37
37
  const classnames_1 = __importDefault(require("classnames"));
38
38
  const __1 = require("..");
39
39
  const HeaderCell = (0, react_1.forwardRef)((_a, ref) => {
40
- var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
40
+ var { className, children, align } = _a, rest = __rest(_a, ["className", "children", "align"]);
41
41
  const context = (0, react_1.useContext)(__1.TableContext);
42
- return (react_1.default.createElement(__1.Label, Object.assign({ as: "th", ref: ref, className: (0, classnames_1.default)("navds-table__header-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
42
+ return (react_1.default.createElement(__1.Label, Object.assign({ as: "th", ref: ref, className: (0, classnames_1.default)("navds-table__header-cell", className, {
43
+ [`navds-table__header-cell--align-${align}`]: align,
44
+ }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
43
45
  });
44
46
  exports.default = HeaderCell;
@@ -39,12 +39,13 @@ const classnames_1 = __importDefault(require("classnames"));
39
39
  const Header_1 = __importDefault(require("./Header"));
40
40
  const Body_1 = __importDefault(require("./Body"));
41
41
  const Row_1 = __importDefault(require("./Row"));
42
+ const ColumnHeader_1 = __importDefault(require("./ColumnHeader"));
42
43
  const HeaderCell_1 = __importDefault(require("./HeaderCell"));
43
44
  const DataCell_1 = __importDefault(require("./DataCell"));
44
45
  exports.TableContext = (0, react_1.createContext)(null);
45
46
  const Table = (0, react_1.forwardRef)((_a, ref) => {
46
- var { className, zebraStripes = false, size = "medium" } = _a, rest = __rest(_a, ["className", "zebraStripes", "size"]);
47
- return (react_1.default.createElement(exports.TableContext.Provider, { value: { size } },
47
+ var { className, zebraStripes = false, size = "medium", onSortChange, sort } = _a, rest = __rest(_a, ["className", "zebraStripes", "size", "onSortChange", "sort"]);
48
+ return (react_1.default.createElement(exports.TableContext.Provider, { value: { size, onSortChange, sort } },
48
49
  react_1.default.createElement("table", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table", `navds-table--${size}`, className, {
49
50
  "navds-table--zebra-stripes": zebraStripes,
50
51
  }) }))));
@@ -52,6 +53,7 @@ const Table = (0, react_1.forwardRef)((_a, ref) => {
52
53
  Table.Header = Header_1.default;
53
54
  Table.Body = Body_1.default;
54
55
  Table.Row = Row_1.default;
56
+ Table.ColumnHeader = ColumnHeader_1.default;
55
57
  Table.HeaderCell = HeaderCell_1.default;
56
58
  Table.DataCell = DataCell_1.default;
57
59
  exports.default = Table;
@@ -65,7 +65,7 @@ const ToggleGroup = (0, react_1.forwardRef)((_a, ref) => {
65
65
  } },
66
66
  react_1.default.createElement("div", null,
67
67
  label && (react_1.default.createElement(__1.Label, { size: size, className: "navds-toggle-group__label", id: labelId }, label)),
68
- react_1.default.createElement(RadixToggleGroup.Root, Object.assign({}, rest, { onValueChange: handleValueChange, value: value !== null && value !== void 0 ? value : groupValue, defaultValue: defaultValue, ref: ref, className: (0, classnames_1.default)("navds-toggle-group", className, `navds-toggle-group--${size}`) }, (describeBy && { "aria-describedby": describeBy }), { role: "toolbar", type: "single" }), children))));
68
+ react_1.default.createElement(RadixToggleGroup.Root, Object.assign({}, rest, { onValueChange: handleValueChange, value: value !== null && value !== void 0 ? value : groupValue, defaultValue: defaultValue, ref: ref, className: (0, classnames_1.default)("navds-toggle-group", className, `navds-toggle-group--${size}`) }, (describeBy && { "aria-describedby": describeBy }), { role: "radiogroup", type: "single" }), children))));
69
69
  });
70
70
  ToggleGroup.Item = ToggleItem_1.default;
71
71
  exports.default = ToggleGroup;
@@ -14,7 +14,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
14
14
  * Changes padding, height and font-size
15
15
  * @default "medium"
16
16
  */
17
- size?: "medium" | "small";
17
+ size?: "medium" | "small" | "xsmall";
18
18
  /**
19
19
  * Prevent the user from interacting with the button: it cannot be pressed or focused.
20
20
  * @note Avoid using if possible for accessibility purposes
@@ -15,7 +15,7 @@ import cl from "classnames";
15
15
  import { BodyShort, Loader } from "../";
16
16
  import { useClientLayoutEffect } from "../util";
17
17
  const Button = forwardRef((_a, ref) => {
18
- var { as: Component = "button", variant = "primary", className, children, size = "medium", loading = false, disabled } = _a, rest = __rest(_a, ["as", "variant", "className", "children", "size", "loading", "disabled"]);
18
+ var { as: Component = "button", variant = "primary", className, children, size = "medium", loading = false, disabled, style } = _a, rest = __rest(_a, ["as", "variant", "className", "children", "size", "loading", "disabled", "style"]);
19
19
  const buttonRef = useRef(null);
20
20
  const mergedRef = mergeRefs([buttonRef, ref]);
21
21
  const [widthOverride, setWidthOverride] = useState();
@@ -33,8 +33,8 @@ const Button = forwardRef((_a, ref) => {
33
33
  }, [loading, children]);
34
34
  return (React.createElement(Component, Object.assign({}, rest, { ref: mergedRef, className: cl(className, "navds-button", `navds-button--${variant}`, `navds-button--${size}`, {
35
35
  "navds-button--loading": widthOverride,
36
- }), style: { width: widthOverride }, disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }),
37
- React.createElement(BodyShort, { as: "span", className: "navds-button__inner", size: size, "aria-live": "polite" }, widthOverride ? React.createElement(Loader, { size: size }) : children)));
36
+ }), style: Object.assign(Object.assign({}, style), { width: widthOverride }), disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }),
37
+ React.createElement(BodyShort, { as: "span", className: "navds-button__inner", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, widthOverride ? React.createElement(Loader, { size: size }) : children)));
38
38
  });
39
39
  export default Button;
40
40
  //# sourceMappingURL=Button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAwB,MAAM,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+BhD,MAAM,MAAM,GAAyD,UAAU,CAC7E,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,OAAO,GAAG,SAAS,EACnB,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,KAAK,EACf,QAAQ,OAET,EADI,IAAI,cART,yEASC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAU,CAAC;IAE7D,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,OAAO,EAAE;YACX,MAAM,SAAS,GAAG,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;;gBAClD,gBAAgB,CAAC,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,qBAAqB,EAAE,0CAAE,KAAK,CAAC,CAAC;YACvE,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,EAAE;gBACV,gBAAgB,CAAC,SAAS,CAAC,CAAC;gBAC5B,oBAAoB,CAAC,SAAS,CAAC,CAAC;YAClC,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CACX,SAAS,EACT,cAAc,EACd,iBAAiB,OAAO,EAAE,EAC1B,iBAAiB,IAAI,EAAE,EACvB;YACE,uBAAuB,EAAE,aAAa;SACvC,CACF,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,EAC/B,QAAQ,EAAE,CAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;QAEtD,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAE,IAAI,eACA,QAAQ,IAEjB,aAAa,CAAC,CAAC,CAAC,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,QAAQ,CACxC,CACF,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAwB,MAAM,EAAE,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA+BhD,MAAM,MAAM,GAAyD,UAAU,CAC7E,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,OAAO,GAAG,SAAS,EACnB,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,KAAK,OAEN,EADI,IAAI,cATT,kFAUC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAU,CAAC;IAE7D,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,OAAO,EAAE;YACX,MAAM,SAAS,GAAG,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;;gBAClD,gBAAgB,CAAC,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,qBAAqB,EAAE,0CAAE,KAAK,CAAC,CAAC;YACvE,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,EAAE;gBACV,gBAAgB,CAAC,SAAS,CAAC,CAAC;gBAC5B,oBAAoB,CAAC,SAAS,CAAC,CAAC;YAClC,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CACX,SAAS,EACT,cAAc,EACd,iBAAiB,OAAO,EAAE,EAC1B,iBAAiB,IAAI,EAAE,EACvB;YACE,uBAAuB,EAAE,aAAa;SACvC,CACF,EACD,KAAK,kCACA,KAAK,KACR,KAAK,EAAE,aAAa,KAEtB,QAAQ,EAAE,CAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;QAEtD,oBAAC,SAAS,IACR,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,eAClC,QAAQ,IAEjB,aAAa,CAAC,CAAC,CAAC,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC,CAAC,QAAQ,CACxC,CACF,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/menu/Menu.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,OAAO,IAAsB,MAAM,YAAY,CAAC;AAChD,OAAO,QAA8B,MAAM,gBAAgB,CAAC;AAc5D,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAAY,OAAA,CACvC,6CACM,IAAI,IACR,IAAI,EAAC,YAAY,EACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC;QAEtC,oBAAC,SAAS,QAAE,QAAQ,CAAa,CAC7B,CACP,CAAA;CAAA,CACa,CAAC;AAEnB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;AAEjB,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/menu/Menu.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC,OAAO,IAAsB,MAAM,YAAY,CAAC;AAChD,OAAO,QAA8B,MAAM,gBAAgB,CAAC;AAc5D,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAAY,OAAA,CACzC,6CACM,IAAI,IACR,IAAI,EAAC,YAAY,EACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC;QAEtC,oBAAC,SAAS,QAAE,QAAQ,CAAa,CAC7B,CACP,CAAA;CAAA,CACe,CAAC;AAEnB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;AAEjB,eAAe,IAAI,CAAC"}
@@ -31,6 +31,11 @@ export interface ModalProps {
31
31
  "aria-labelledby"?: string;
32
32
  "aria-describedby"?: string;
33
33
  "aria-modal"?: boolean;
34
+ /**
35
+ * Sets aria-label on modal
36
+ * @warning This should be set if not using 'aria-labelledby' or 'aria-describedby'
37
+ */
38
+ "aria-label"?: string;
34
39
  }
35
40
  interface ModalComponent extends ModalLifecycle, React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ReactModal>> {
36
41
  Content: ModalContentType;
@@ -17,7 +17,7 @@ import { Close } from "@navikt/ds-icons";
17
17
  import { Button } from "..";
18
18
  import ModalContent from "./ModalContent";
19
19
  const Modal = forwardRef((_a, ref) => {
20
- var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal"]);
20
+ var { children, open, onClose, className, shouldCloseOnOverlayClick = true, closeButton = true, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-modal": ariaModal, "aria-label": contentLabel } = _a, rest = __rest(_a, ["children", "open", "onClose", "className", "shouldCloseOnOverlayClick", "closeButton", "aria-describedby", "aria-labelledby", "aria-modal", "aria-label"]);
21
21
  const modalRef = useRef(null);
22
22
  const mergedRef = mergeRefs([modalRef, ref]);
23
23
  const buttonRef = useRef(null);
@@ -33,7 +33,7 @@ const Modal = forwardRef((_a, ref) => {
33
33
  describedby: ariaDescribedBy,
34
34
  labelledby: ariaLabelledBy,
35
35
  modal: ariaModal,
36
- } }),
36
+ }, contentLabel: contentLabel }),
37
37
  children,
38
38
  closeButton && (React.createElement(Button, { className: cl("navds-modal__button", {
39
39
  "navds-modal__button--shake": shouldCloseOnOverlayClick,
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC5B,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AA8ChE,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,yBAAyB,GAAG,IAAI,EAChC,WAAW,GAAG,IAAI,EAClB,kBAAkB,EAAE,eAAe,EACnC,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,SAAS,OAExB,EADI,IAAI,cAVT,6IAWC,CADQ;IAIT,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,MAAM,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE;QAChC,IAAI,yBAAyB,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;YACrD,OAAO,EAAE,CAAC;SACX;aAAM,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5B,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,MAAM,EAAE,IAAI,EACZ,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,gBAAgB,EAAC,sBAAsB,EACvC,yBAAyB,EAAE,yBAAyB,EACpD,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAC7C,IAAI,EAAE;YACJ,WAAW,EAAE,eAAe;YAC5B,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,SAAS;SACjB;QAEA,QAAQ;QACR,WAAW,IAAI,CACd,oBAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,4BAA4B,EAAE,yBAAyB;aACxD,CAAC,EACF,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,OAAO;YAEhB,oBAAC,KAAK,IAAC,KAAK,EAAC,iBAAiB,GAAG,CAC1B,CACV,CACU,CACd,CAAC;AACJ,CAAC,CACgB,CAAC;AAEpB,KAAK,CAAC,aAAa,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACrE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAE7B,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAC5B,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AAmDhE,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,yBAAyB,GAAG,IAAI,EAChC,WAAW,GAAG,IAAI,EAClB,kBAAkB,EAAE,eAAe,EACnC,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,SAAS,EACvB,YAAY,EAAE,YAAY,OAE3B,EADI,IAAI,cAXT,2JAYC,CADQ;IAIT,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC;IAC7C,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAElD,MAAM,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE;QAChC,IAAI,yBAAyB,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;YACrD,OAAO,EAAE,CAAC;SACX;aAAM,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5B,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,MAAM,EAAE,IAAI,EACZ,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,EACvC,gBAAgB,EAAC,sBAAsB,EACvC,yBAAyB,EAAE,yBAAyB,EACpD,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAC7C,IAAI,EAAE;YACJ,WAAW,EAAE,eAAe;YAC5B,UAAU,EAAE,cAAc;YAC1B,KAAK,EAAE,SAAS;SACjB,EACD,YAAY,EAAE,YAAY;QAEzB,QAAQ;QACR,WAAW,IAAI,CACd,oBAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,4BAA4B,EAAE,yBAAyB;aACxD,CAAC,EACF,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,OAAO;YAEhB,oBAAC,KAAK,IAAC,KAAK,EAAC,iBAAiB,GAAG,CAC1B,CACV,CACU,CACd,CAAC;AACJ,CAAC,CACgB,CAAC;AAEpB,KAAK,CAAC,aAAa,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACrE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAE7B,eAAe,KAAK,CAAC"}
@@ -0,0 +1,17 @@
1
+ import React from "react";
2
+ import { HeaderCellProps } from "./HeaderCell";
3
+ interface ColumnHeaderProps extends HeaderCellProps {
4
+ /**
5
+ * Key to sort by
6
+ */
7
+ sortKey?: string;
8
+ /**
9
+ * Column is sortable
10
+ * @default false
11
+ */
12
+ sortable?: boolean;
13
+ }
14
+ export interface ColumnHeaderType extends React.ForwardRefExoticComponent<ColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>> {
15
+ }
16
+ declare const ColumnHeader: ColumnHeaderType;
17
+ export default ColumnHeader;
@@ -0,0 +1,35 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import React, { forwardRef, useContext } from "react";
13
+ import { Down, Up } from "@navikt/ds-icons";
14
+ import { TableContext } from "..";
15
+ import HeaderCell from "./HeaderCell";
16
+ const ColumnHeader = forwardRef((_a, ref) => {
17
+ var _b, _c, _d, _e;
18
+ var { className, children, sortable = false, sortKey } = _a, rest = __rest(_a, ["className", "children", "sortable", "sortKey"]);
19
+ const context = useContext(TableContext);
20
+ if (sortable && !sortKey) {
21
+ console.warn("ColumnHeader with `sortable=true` must have a sortKey.");
22
+ }
23
+ return (React.createElement(HeaderCell, Object.assign({ scope: "col", ref: ref, className: className, "aria-sort": sortable
24
+ ? ((_b = context === null || context === void 0 ? void 0 : context.sort) === null || _b === void 0 ? void 0 : _b.orderBy) === sortKey
25
+ ? (_c = context === null || context === void 0 ? void 0 : context.sort) === null || _c === void 0 ? void 0 : _c.direction
26
+ : "none"
27
+ : undefined }, rest), sortable ? (React.createElement("button", { className: "navds-table__sort-button", onClick: sortable && sortKey
28
+ ? () => { var _a; return (_a = context === null || context === void 0 ? void 0 : context.onSortChange) === null || _a === void 0 ? void 0 : _a.call(context, sortKey); }
29
+ : undefined },
30
+ children,
31
+ ((_d = context === null || context === void 0 ? void 0 : context.sort) === null || _d === void 0 ? void 0 : _d.orderBy) === sortKey &&
32
+ ((_e = context === null || context === void 0 ? void 0 : context.sort) === null || _e === void 0 ? void 0 : _e.direction) === "descending" ? (React.createElement(Down, { "aria-label": "sorter synkende" })) : (React.createElement(Up, { "aria-label": "sorter stigende" })))) : (children)));
33
+ });
34
+ export default ColumnHeader;
35
+ //# sourceMappingURL=ColumnHeader.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColumnHeader.js","sourceRoot":"","sources":["../../src/table/ColumnHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAClC,OAAO,UAA+B,MAAM,cAAc,CAAC;AAmB3D,MAAM,YAAY,GAAqB,UAAU,CAC/C,CAAC,EAA2D,EAAE,GAAG,EAAE,EAAE;;QAApE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,OAAO,OAAW,EAAN,IAAI,cAAzD,gDAA2D,CAAF;IACxD,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,IAAI,QAAQ,IAAI,CAAC,OAAO,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,wDAAwD,CAAC,CAAC;KACxE;IAED,OAAO,CACL,oBAAC,UAAU,kBACT,KAAK,EAAC,KAAK,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,eAElB,QAAQ;YACN,CAAC,CAAC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO;gBAClC,CAAC,CAAC,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS;gBAC1B,CAAC,CAAC,MAAM;YACV,CAAC,CAAC,SAAS,IAEX,IAAI,GAEP,QAAQ,CAAC,CAAC,CAAC,CACV,gCACE,SAAS,EAAC,0BAA0B,EACpC,OAAO,EACL,QAAQ,IAAI,OAAO;YACjB,CAAC,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,+CAArB,OAAO,EAAiB,OAAO,CAAC,CAAA,EAAA;YACxC,CAAC,CAAC,SAAS;QAGd,QAAQ;QACR,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,OAAO,MAAK,OAAO;YACnC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,SAAS,MAAK,YAAY,CAAC,CAAC,CAAC,CAC1C,oBAAC,IAAI,kBAAY,iBAAiB,GAAG,CACtC,CAAC,CAAC,CAAC,CACF,oBAAC,EAAE,kBAAY,iBAAiB,GAAG,CACpC,CACM,CACV,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -1,5 +1,10 @@
1
1
  import React from "react";
2
2
  interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
3
+ /**
4
+ * Content alignment
5
+ * @default "left"
6
+ */
7
+ align?: "left" | "center" | "right";
3
8
  }
4
9
  export interface DataCellType extends React.ForwardRefExoticComponent<DataCellProps & React.RefAttributes<HTMLTableCellElement>> {
5
10
  }
@@ -14,9 +14,11 @@ import cl from "classnames";
14
14
  import { BodyShort } from "..";
15
15
  import { TableContext } from ".";
16
16
  const DataCell = forwardRef((_a, ref) => {
17
- var { className, children = "" } = _a, rest = __rest(_a, ["className", "children"]);
17
+ var { className, children = "", align } = _a, rest = __rest(_a, ["className", "children", "align"]);
18
18
  const context = useContext(TableContext);
19
- return (React.createElement(BodyShort, Object.assign({ as: "td", ref: ref, className: cl("navds-table__data-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
19
+ return (React.createElement(BodyShort, Object.assign({ as: "td", ref: ref, className: cl("navds-table__data-cell", className, {
20
+ [`navds-table__data-cell--align-${align}`]: align,
21
+ }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
20
22
  });
21
23
  export default DataCell;
22
24
  //# sourceMappingURL=DataCell.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DataCell.js","sourceRoot":"","sources":["../../src/table/DataCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,GAAG,CAAC;AASjC,MAAM,QAAQ,GAAiB,UAAU,CACvC,CAAC,EAAqC,EAAE,GAAG,EAAE,EAAE;QAA9C,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE,OAAW,EAAN,IAAI,cAAnC,yBAAqC,CAAF;IAClC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,SAAS,kBACR,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAClD,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IACf,IAAI,GAEP,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"DataCell.js","sourceRoot":"","sources":["../../src/table/DataCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,GAAG,CAAC;AAejC,MAAM,QAAQ,GAAiB,UAAU,CACvC,CAAC,EAA4C,EAAE,GAAG,EAAE,EAAE;QAArD,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,OAAW,EAAN,IAAI,cAA1C,kCAA4C,CAAF;IACzC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,SAAS,kBACR,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,EAAE;YACjD,CAAC,iCAAiC,KAAK,EAAE,CAAC,EAAE,KAAK;SAClD,CAAC,EACF,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IACf,IAAI,GAEP,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -1,6 +1,11 @@
1
1
  import React from "react";
2
- interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
2
+ export interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
3
3
  scope?: string;
4
+ /**
5
+ * Content alignment
6
+ * @default "left"
7
+ */
8
+ align?: "left" | "center" | "right";
4
9
  }
5
10
  export interface HeaderCellType extends React.ForwardRefExoticComponent<HeaderCellProps & React.RefAttributes<HTMLTableCellElement>> {
6
11
  }
@@ -13,9 +13,11 @@ import React, { forwardRef, useContext } from "react";
13
13
  import cl from "classnames";
14
14
  import { Label, TableContext } from "..";
15
15
  const HeaderCell = forwardRef((_a, ref) => {
16
- var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
16
+ var { className, children, align } = _a, rest = __rest(_a, ["className", "children", "align"]);
17
17
  const context = useContext(TableContext);
18
- return (React.createElement(Label, Object.assign({ as: "th", ref: ref, className: cl("navds-table__header-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
18
+ return (React.createElement(Label, Object.assign({ as: "th", ref: ref, className: cl("navds-table__header-cell", className, {
19
+ [`navds-table__header-cell--align-${align}`]: align,
20
+ }), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
19
21
  });
20
22
  export default HeaderCell;
21
23
  //# sourceMappingURL=HeaderCell.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"HeaderCell.js","sourceRoot":"","sources":["../../src/table/HeaderCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAWzC,MAAM,UAAU,GAAmB,UAAU,CAC3C,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,KAAK,kBACJ,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,EACpD,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IACf,IAAI,GAEP,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}
1
+ {"version":3,"file":"HeaderCell.js","sourceRoot":"","sources":["../../src/table/HeaderCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAiBzC,MAAM,UAAU,GAAmB,UAAU,CAC3C,CAAC,EAAuC,EAAE,GAAG,EAAE,EAAE;QAAhD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,OAAW,EAAN,IAAI,cAArC,kCAAuC,CAAF;IACpC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,KAAK,kBACJ,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,EAAE;YACnD,CAAC,mCAAmC,KAAK,EAAE,CAAC,EAAE,KAAK;SACpD,CAAC,EACF,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IACf,IAAI,GAEP,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -2,8 +2,13 @@ import React from "react";
2
2
  import { HeaderType } from "./Header";
3
3
  import { BodyType } from "./Body";
4
4
  import { RowType } from "./Row";
5
+ import { ColumnHeaderType } from "./ColumnHeader";
5
6
  import { HeaderCellType } from "./HeaderCell";
6
7
  import { DataCellType } from "./DataCell";
8
+ export interface SortState {
9
+ orderBy: string;
10
+ direction: "ascending" | "descending";
11
+ }
7
12
  export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
8
13
  /**
9
14
  * Changes padding
@@ -15,6 +20,14 @@ export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement>
15
20
  * @default false
16
21
  */
17
22
  zebraStripes?: boolean;
23
+ /**
24
+ * Sort state
25
+ */
26
+ sort?: SortState;
27
+ /**
28
+ * Callback whens sort state changes
29
+ */
30
+ onSortChange?: (sortKey?: string) => void;
18
31
  }
19
32
  export interface TableType extends React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>> {
20
33
  Header: HeaderType;
@@ -22,9 +35,12 @@ export interface TableType extends React.ForwardRefExoticComponent<TableProps &
22
35
  Row: RowType;
23
36
  DataCell: DataCellType;
24
37
  HeaderCell: HeaderCellType;
38
+ ColumnHeader: ColumnHeaderType;
25
39
  }
26
40
  export interface TableContextProps {
27
41
  size: "medium" | "small";
42
+ onSortChange?: (sortKey: string) => void;
43
+ sort?: SortState;
28
44
  }
29
45
  export declare const TableContext: React.Context<TableContextProps | null>;
30
46
  declare const Table: TableType;
@@ -14,12 +14,13 @@ import cl from "classnames";
14
14
  import Header from "./Header";
15
15
  import Body from "./Body";
16
16
  import Row from "./Row";
17
+ import ColumnHeader from "./ColumnHeader";
17
18
  import HeaderCell from "./HeaderCell";
18
19
  import DataCell from "./DataCell";
19
20
  export const TableContext = createContext(null);
20
21
  const Table = forwardRef((_a, ref) => {
21
- var { className, zebraStripes = false, size = "medium" } = _a, rest = __rest(_a, ["className", "zebraStripes", "size"]);
22
- return (React.createElement(TableContext.Provider, { value: { size } },
22
+ var { className, zebraStripes = false, size = "medium", onSortChange, sort } = _a, rest = __rest(_a, ["className", "zebraStripes", "size", "onSortChange", "sort"]);
23
+ return (React.createElement(TableContext.Provider, { value: { size, onSortChange, sort } },
23
24
  React.createElement("table", Object.assign({}, rest, { ref: ref, className: cl("navds-table", `navds-table--${size}`, className, {
24
25
  "navds-table--zebra-stripes": zebraStripes,
25
26
  }) }))));
@@ -27,6 +28,7 @@ const Table = forwardRef((_a, ref) => {
27
28
  Table.Header = Header;
28
29
  Table.Body = Body;
29
30
  Table.Row = Row;
31
+ Table.ColumnHeader = ColumnHeader;
30
32
  Table.HeaderCell = HeaderCell;
31
33
  Table.DataCell = DataCell;
32
34
  export default Table;
@@ -1 +1 @@
1
- {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,IAAkB,MAAM,QAAQ,CAAC;AACxC,OAAO,GAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,QAA0B,MAAM,YAAY,CAAC;AA+BpD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAE1E,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAA6D,EAAE,GAAG,EAAE,EAAE;QAAtE,EAAE,SAAS,EAAE,YAAY,GAAG,KAAK,EAAE,IAAI,GAAG,QAAQ,OAAW,EAAN,IAAI,cAA3D,qCAA6D,CAAF;IAAY,OAAA,CACtE,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE;QACpC,+CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE,SAAS,EAAE;gBAC9D,4BAA4B,EAAE,YAAY;aAC3C,CAAC,IACF,CACoB,CACzB,CAAA;CAAA,CACW,CAAC;AAEf,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AACtB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;AAClB,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;AAChB,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;AAC9B,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE1B,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,IAAkB,MAAM,QAAQ,CAAC;AACxC,OAAO,GAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AAChE,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,QAA0B,MAAM,YAAY,CAAC;AA+CpD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAE1E,MAAM,KAAK,GAAG,UAAU,CACtB,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,IAAI,GAAG,QAAQ,EACf,YAAY,EACZ,IAAI,OAEL,EADI,IAAI,cANT,6DAOC,CADQ;IAGN,OAAA,CACH,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE;QACxD,+CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE,SAAS,EAAE;gBAC9D,4BAA4B,EAAE,YAAY;aAC3C,CAAC,IACF,CACoB,CACzB,CAAA;CAAA,CACW,CAAC;AAEf,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AACtB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;AAClB,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;AAChB,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;AAClC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;AAC9B,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE1B,eAAe,KAAK,CAAC"}
@@ -40,7 +40,7 @@ const ToggleGroup = forwardRef((_a, ref) => {
40
40
  } },
41
41
  React.createElement("div", null,
42
42
  label && (React.createElement(Label, { size: size, className: "navds-toggle-group__label", id: labelId }, label)),
43
- React.createElement(RadixToggleGroup.Root, Object.assign({}, rest, { onValueChange: handleValueChange, value: value !== null && value !== void 0 ? value : groupValue, defaultValue: defaultValue, ref: ref, className: cl("navds-toggle-group", className, `navds-toggle-group--${size}`) }, (describeBy && { "aria-describedby": describeBy }), { role: "toolbar", type: "single" }), children))));
43
+ React.createElement(RadixToggleGroup.Root, Object.assign({}, rest, { onValueChange: handleValueChange, value: value !== null && value !== void 0 ? value : groupValue, defaultValue: defaultValue, ref: ref, className: cl("navds-toggle-group", className, `navds-toggle-group--${size}`) }, (describeBy && { "aria-describedby": describeBy }), { role: "radiogroup", type: "single" }), children))));
44
44
  });
45
45
  ToggleGroup.Item = ToggleItem;
46
46
  export default ToggleGroup;
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleGroup.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,UAAU,EAEV,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,gBAAgB,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AA0ClC,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAC7C,IAAI,CACL,CAAC;AAEF,MAAM,WAAW,GAAG,UAAU,CAC5B,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,KAAK,EACL,YAAY,EACZ,EAAE,EACF,kBAAkB,EAAE,IAAI,OAEzB,EADI,IAAI,cAVT,yGAWC,CADQ;IAIT,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,sBAAsB,KAAK,EAAE,EAAE,CAAC;IAEhD,MAAM,iBAAiB,GAAG,CAAC,CAAS,EAAE,EAAE;QACtC,IAAI,CAAC,KAAK,EAAE,EAAE;YACZ,aAAa,CAAC,CAAC,CAAC,CAAC;YACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;SACf;IACH,CAAC,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,uDAAuD,CAAC,CAAC;KACxE;IAED,MAAM,UAAU,GAAG,EAAE,CAAC;QACpB,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;QACpB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK;KACnB,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,kDAAkD,CAAC,CAAC;KACnE;IAED,OAAO,CACL,oBAAC,kBAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACL,IAAI;SACL;QAED;YACG,KAAK,IAAI,CACR,oBAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAE,OAAO,IAEV,KAAK,CACA,CACT;YACD,oBAAC,gBAAgB,CAAC,IAAI,oBAChB,IAAI,IACR,aAAa,EAAE,iBAAiB,EAChC,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,UAAU,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,SAAS,EACT,uBAAuB,IAAI,EAAE,CAC9B,IACG,CAAC,UAAU,IAAI,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC,IACtD,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,KAEZ,QAAQ,CACa,CACpB,CACsB,CAC/B,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,WAAW,CAAC,IAAI,GAAG,UAAU,CAAC;AAE9B,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"ToggleGroup.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,UAAU,EAEV,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,gBAAgB,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AA0ClC,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAC7C,IAAI,CACL,CAAC;AAEF,MAAM,WAAW,GAAG,UAAU,CAC5B,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,KAAK,EACL,YAAY,EACZ,EAAE,EACF,kBAAkB,EAAE,IAAI,OAEzB,EADI,IAAI,cAVT,yGAWC,CADQ;IAIT,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,sBAAsB,KAAK,EAAE,EAAE,CAAC;IAEhD,MAAM,iBAAiB,GAAG,CAAC,CAAS,EAAE,EAAE;QACtC,IAAI,CAAC,KAAK,EAAE,EAAE;YACZ,aAAa,CAAC,CAAC,CAAC,CAAC;YACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;SACf;IACH,CAAC,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,uDAAuD,CAAC,CAAC;KACxE;IAED,MAAM,UAAU,GAAG,EAAE,CAAC;QACpB,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;QACpB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK;KACnB,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,kDAAkD,CAAC,CAAC;KACnE;IAED,OAAO,CACL,oBAAC,kBAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACL,IAAI;SACL;QAED;YACG,KAAK,IAAI,CACR,oBAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAE,OAAO,IAEV,KAAK,CACA,CACT;YACD,oBAAC,gBAAgB,CAAC,IAAI,oBAChB,IAAI,IACR,aAAa,EAAE,iBAAiB,EAChC,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,UAAU,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,SAAS,EACT,uBAAuB,IAAI,EAAE,CAC9B,IACG,CAAC,UAAU,IAAI,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC,IACtD,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,QAAQ,KAEZ,QAAQ,CACa,CACpB,CACsB,CAC/B,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,WAAW,CAAC,IAAI,GAAG,UAAU,CAAC;AAE9B,eAAe,WAAW,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-react",
3
- "version": "0.16.17",
3
+ "version": "0.16.20",
4
4
  "private": false,
5
5
  "description": "NAV designsystem react components",
6
6
  "author": "NAV Designsystem team",
@@ -37,7 +37,7 @@
37
37
  "@material-ui/core": "^4.12.3",
38
38
  "@navikt/ds-icons": "^0.8.4",
39
39
  "@popperjs/core": "^2.10.1",
40
- "@radix-ui/react-toggle-group": "0.1.4",
40
+ "@radix-ui/react-toggle-group": "0.1.5",
41
41
  "classnames": "^2.2.6",
42
42
  "react-collapse": "^5.1.0",
43
43
  "react-merge-refs": "^1.1.0",
@@ -59,11 +59,12 @@
59
59
  "react-router-dom": "^6.1.0",
60
60
  "rimraf": "3.0.2",
61
61
  "styled-components": "^5.3.1",
62
+ "swr": "^1.1.2",
62
63
  "ts-jest": "^27.0.5"
63
64
  },
64
65
  "peerDependencies": {
65
66
  "@types/react": "^17.0.30",
66
67
  "react": "^17.0.0"
67
68
  },
68
- "gitHead": "9c86becab0a0f5d4cd2d9086e4c2c65812eb71fc"
69
+ "gitHead": "7e8899df34bc6b7dbbb20cf0558210ba6db3e23d"
69
70
  }
@@ -19,7 +19,7 @@ export interface ButtonProps
19
19
  * Changes padding, height and font-size
20
20
  * @default "medium"
21
21
  */
22
- size?: "medium" | "small";
22
+ size?: "medium" | "small" | "xsmall";
23
23
  /**
24
24
  * Prevent the user from interacting with the button: it cannot be pressed or focused.
25
25
  * @note Avoid using if possible for accessibility purposes
@@ -43,6 +43,7 @@ const Button: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(
43
43
  size = "medium",
44
44
  loading = false,
45
45
  disabled,
46
+ style,
46
47
  ...rest
47
48
  },
48
49
  ref
@@ -76,13 +77,16 @@ const Button: OverridableComponent<ButtonProps, HTMLButtonElement> = forwardRef(
76
77
  "navds-button--loading": widthOverride,
77
78
  }
78
79
  )}
79
- style={{ width: widthOverride }}
80
+ style={{
81
+ ...style,
82
+ width: widthOverride,
83
+ }}
80
84
  disabled={disabled ?? widthOverride ? true : undefined}
81
85
  >
82
86
  <BodyShort
83
87
  as="span"
84
88
  className="navds-button__inner"
85
- size={size}
89
+ size={size === "medium" ? "medium" : "small"}
86
90
  aria-live="polite"
87
91
  >
88
92
  {widthOverride ? <Loader size={size} /> : children}
@@ -81,6 +81,14 @@ export const All = () => {
81
81
  </Button>
82
82
  ))}
83
83
  </Section>
84
+ <h2>Xsmall</h2>
85
+ <Section>
86
+ {variants.map((variant) => (
87
+ <Button key={variant} variant={variant} size="xsmall">
88
+ {varSwitch[variant]}
89
+ </Button>
90
+ ))}
91
+ </Section>
84
92
  <h2>Button w/icon</h2>
85
93
  <Section>
86
94
  {variants.map((variant) => (
package/src/menu/Menu.tsx CHANGED
@@ -19,15 +19,15 @@ interface MenuComponent
19
19
 
20
20
  const Menu = forwardRef<HTMLElement, MenuProps>(
21
21
  ({ children, className, ...rest }, ref) => (
22
- <nav
23
- {...rest}
24
- role="navigation"
25
- ref={ref}
26
- className={cl("navds-menu", className)}
27
- >
28
- <MenuItems>{children}</MenuItems>
29
- </nav>
30
- )
22
+ <nav
23
+ {...rest}
24
+ role="navigation"
25
+ ref={ref}
26
+ className={cl("navds-menu", className)}
27
+ >
28
+ <MenuItems>{children}</MenuItems>
29
+ </nav>
30
+ )
31
31
  ) as MenuComponent;
32
32
 
33
33
  Menu.Collapse = Collapse;