@navikt/ds-react 0.15.0 → 0.15.3

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 (16) hide show
  1. package/cjs/form/checkbox/Checkbox.js +12 -1
  2. package/cjs/form/checkbox/useCheckbox.js +1 -1
  3. package/cjs/help-text/HelpText.js +4 -4
  4. package/esm/form/checkbox/Checkbox.d.ts +5 -0
  5. package/esm/form/checkbox/Checkbox.js +12 -1
  6. package/esm/form/checkbox/Checkbox.js.map +1 -1
  7. package/esm/form/checkbox/useCheckbox.d.ts +0 -1
  8. package/esm/form/checkbox/useCheckbox.js +1 -1
  9. package/esm/form/checkbox/useCheckbox.js.map +1 -1
  10. package/esm/help-text/HelpText.js +4 -4
  11. package/esm/help-text/HelpText.js.map +1 -1
  12. package/package.json +3 -3
  13. package/src/form/checkbox/Checkbox.tsx +18 -1
  14. package/src/form/checkbox/stories/checkbox.stories.tsx +38 -1
  15. package/src/form/checkbox/useCheckbox.ts +0 -1
  16. package/src/help-text/HelpText.tsx +4 -5
package/cjs/form/checkbox/Checkbox.js CHANGED
@@ -39,7 +39,18 @@ const Checkbox = (0, react_1.forwardRef)((props, ref) => {
39
39
  "error",
40
40
  "description",
41
41
  "hideLabel",
42
- ]), inputProps, { className: "navds-checkbox__input", ref: ref })),
42
+ ]), inputProps, { type: "checkbox", className: "navds-checkbox__input", "aria-checked": props.indeterminate ? "mixed" : inputProps.checked, ref: (el) => {
43
+ var _a;
44
+ if (el) {
45
+ el.indeterminate = (_a = props.indeterminate) !== null && _a !== void 0 ? _a : false;
46
+ }
47
+ if (typeof ref === "function") {
48
+ ref(el);
49
+ }
50
+ else if (ref != null) {
51
+ ref.current = el;
52
+ }
53
+ } })),
43
54
  react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-checkbox__label" },
44
55
  react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-checkbox__content", {
45
56
  "navds-sr-only": props.hideLabel,
package/cjs/form/checkbox/useCheckbox.js CHANGED
@@ -30,7 +30,7 @@ const useCheckbox = (_a) => {
30
30
  console.warn("A <Checkbox> element within a <CheckboxGroup> requires a `value` property.");
31
31
  }
32
32
  }
33
- return Object.assign(Object.assign({}, rest), { inputProps: Object.assign(Object.assign({}, inputProps), { type: "checkbox", checked: (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.value)
33
+ return Object.assign(Object.assign({}, rest), { inputProps: Object.assign(Object.assign({}, inputProps), { checked: (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.value)
34
34
  ? checkboxGroup.value.includes(props.value)
35
35
  : props.checked, defaultChecked: (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.defaultValue)
36
36
  ? checkboxGroup.defaultValue.includes(props.value)
package/cjs/help-text/HelpText.js CHANGED
@@ -42,13 +42,13 @@ const HelpText = (0, react_1.forwardRef)((_a, ref) => {
42
42
  var { className, children, placement = "top", strategy = "absolute", title = "hjelp" } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title"]);
43
43
  const buttonRef = (0, react_1.useRef)(null);
44
44
  const mergedRef = (0, react_merge_refs_1.default)([buttonRef, ref]);
45
- const popoverRef = (0, react_1.useRef)(null);
45
+ const [popoverRef, setPopoverRef] = (0, react_1.useState)(null);
46
46
  const wrapperRef = (0, react_1.useRef)(null);
47
47
  const [open, setOpen] = (0, react_1.useState)(false);
48
48
  (0, react_1.useEffect)(() => {
49
49
  var _a;
50
- open && ((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.focus());
51
- }, [open]);
50
+ open && ((_a = popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.focus) === null || _a === void 0 ? void 0 : _a.call(popoverRef));
51
+ }, [open, popoverRef]);
52
52
  const handleClick = (e) => {
53
53
  setOpen((x) => !x);
54
54
  rest.onClick && rest.onClick(e);
@@ -57,7 +57,7 @@ const HelpText = (0, react_1.forwardRef)((_a, ref) => {
57
57
  react_1.default.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => handleClick(e), className: (0, classnames_1.default)(className, "navds-help-text__button"), type: "button", "aria-expanded": open, "aria-haspopup": "dialog", title: title }),
58
58
  react_1.default.createElement(ds_icons_1.Helptext, { className: "navds-help-text__icon" }),
59
59
  react_1.default.createElement("span", { className: "navds-sr-only" }, title)),
60
- react_1.default.createElement(__1.Popover, { ref: popoverRef, onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, role: "tooltip", anchorEl: buttonRef.current, placement: placement, strategy: strategy },
60
+ react_1.default.createElement(__1.Popover, { ref: setPopoverRef, onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, role: "tooltip", anchorEl: buttonRef.current, placement: placement, strategy: strategy },
61
61
  react_1.default.createElement(__1.Popover.Content, null, children))));
62
62
  });
63
63
  exports.default = HelpText;
package/esm/form/checkbox/Checkbox.d.ts CHANGED
@@ -18,6 +18,11 @@ export interface CheckboxProps extends Omit<FormFieldProps, "errorId">, Omit<Inp
18
18
  * The value of the HTML element.
19
19
  */
20
20
  value?: string;
21
+ /**
22
+ * Specify whether the Checkbox is in an indeterminate state
23
+ * @default false
24
+ */
25
+ indeterminate?: boolean;
21
26
  }
22
27
  declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
23
28
  export default Checkbox;
package/esm/form/checkbox/Checkbox.js CHANGED
@@ -15,7 +15,18 @@ const Checkbox = forwardRef((props, ref) => {
15
15
  "error",
16
16
  "description",
17
17
  "hideLabel",
18
- ]), inputProps, { className: "navds-checkbox__input", ref: ref })),
18
+ ]), inputProps, { type: "checkbox", className: "navds-checkbox__input", "aria-checked": props.indeterminate ? "mixed" : inputProps.checked, ref: (el) => {
19
+ var _a;
20
+ if (el) {
21
+ el.indeterminate = (_a = props.indeterminate) !== null && _a !== void 0 ? _a : false;
22
+ }
23
+ if (typeof ref === "function") {
24
+ ref(el);
25
+ }
26
+ else if (ref != null) {
27
+ ref.current = el;
28
+ }
29
+ } })),
19
30
  React.createElement("label", { htmlFor: inputProps.id, className: "navds-checkbox__label" },
20
31
  React.createElement("div", { className: cl("navds-checkbox__content", {
21
32
  "navds-sr-only": props.hideLabel,
package/esm/form/checkbox/Checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAwBhD,MAAM,QAAQ,GAAG,UAAU,CAAkC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC1E,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,WAAW,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,SAAS,EACf,gBAAgB,EAChB,mBAAmB,IAAI,EAAE,EACzB;YACE,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,UAAU,CAAC,QAAQ;SAChD,CACF;QAED,+CACM,IAAI,CAAC,KAAK,EAAE;YACd,UAAU;YACV,MAAM;YACN,OAAO;YACP,aAAa;YACb,WAAW;SACZ,CAAC,EACE,UAAU,IACd,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE,GAAG,IACR;QACF,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,uBAAuB;YAC9D,6BACE,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;oBACvC,eAAe,EAAE,KAAK,CAAC,SAAS;iBACjC,CAAC;gBAEF,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,IAC3B,KAAK,CAAC,QAAQ,CACL;gBACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,WAAW,IACV,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,6BAA6B,IAEtC,KAAK,CAAC,WAAW,CACN,CACf,CACG,CACA,CACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AA6BhD,MAAM,QAAQ,GAAG,UAAU,CAAkC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC1E,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,WAAW,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,SAAS,EACf,gBAAgB,EAChB,mBAAmB,IAAI,EAAE,EACzB;YACE,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,UAAU,CAAC,QAAQ;SAChD,CACF;QAED,+CACM,IAAI,CAAC,KAAK,EAAE;YACd,UAAU;YACV,MAAM;YACN,OAAO;YACP,aAAa;YACb,WAAW;SACZ,CAAC,EACE,UAAU,IACd,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,uBAAuB,kBACnB,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,EAChE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;;gBACV,IAAI,EAAE,EAAE;oBACN,EAAE,CAAC,aAAa,GAAG,MAAA,KAAK,CAAC,aAAa,mCAAI,KAAK,CAAC;iBACjD;gBAED,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;oBAC7B,GAAG,CAAC,EAAE,CAAC,CAAC;iBACT;qBAAM,IAAI,GAAG,IAAI,IAAI,EAAE;oBACtB,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;iBAClB;YACH,CAAC,IACD;QACF,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,uBAAuB;YAC9D,6BACE,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;oBACvC,eAAe,EAAE,KAAK,CAAC,SAAS;iBACjC,CAAC;gBAEF,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,IAC3B,KAAK,CAAC,QAAQ,CACL;gBACX,KAAK,CAAC,WAAW,IAAI,CACpB,oBAAC,WAAW,IACV,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,6BAA6B,IAEtC,KAAK,CAAC,WAAW,CACN,CACf,CACG,CACA,CACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC"}
package/esm/form/checkbox/useCheckbox.d.ts CHANGED
@@ -4,7 +4,6 @@ import { CheckboxProps } from "../..";
4
4
  */
5
5
  declare const useCheckbox: ({ children, ...props }: CheckboxProps) => {
6
6
  inputProps: {
7
- type: string;
8
7
  checked: boolean | undefined;
9
8
  defaultChecked: boolean | undefined;
10
9
  onChange: (e: any) => void;
package/esm/form/checkbox/useCheckbox.js CHANGED
@@ -28,7 +28,7 @@ const useCheckbox = (_a) => {
28
28
  console.warn("A <Checkbox> element within a <CheckboxGroup> requires a `value` property.");
29
29
  }
30
30
  }
31
- return Object.assign(Object.assign({}, rest), { inputProps: Object.assign(Object.assign({}, inputProps), { type: "checkbox", checked: (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.value)
31
+ return Object.assign(Object.assign({}, rest), { inputProps: Object.assign(Object.assign({}, inputProps), { checked: (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.value)
32
32
  ? checkboxGroup.value.includes(props.value)
33
33
  : props.checked, defaultChecked: (checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.defaultValue)
34
34
  ? checkboxGroup.defaultValue.includes(props.value)
package/esm/form/checkbox/useCheckbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useCheckbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/useCheckbox.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE7B;;GAEG;AACH,MAAM,WAAW,GAAG,CAAC,EAAqC,EAAE,EAAE;QAAzC,EAAE,QAAQ,OAA2B,EAAtB,KAAK,cAApB,YAAsB,CAAF;IACvC,MAAM,aAAa,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEvD,MAAM,KAA0B,YAAY,CAC1C,IAAI,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,CAAC,EAC5B,UAAU,CACX,EAHK,EAAE,UAAU,OAGjB,EAHsB,IAAI,cAArB,cAAuB,CAG5B,CAAC;IAEF,IAAI,aAAa,EAAE;QACjB,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,OAAO,CAAC,IAAI,CACV,8IAA8I,CAC/I,CAAC;SACH;QACD,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE;YAC7B,OAAO,CAAC,IAAI,CACV,4EAA4E,CAC7E,CAAC;SACH;KACF;IAED,uCACK,IAAI,KACP,UAAU,kCACL,UAAU,KACb,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK;gBAC3B,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAe,CAAC;gBACrD,CAAC,CAAC,KAAK,CAAC,OAAO,EACjB,cAAc,EAAE,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY;gBACzC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAe,CAAC;gBAC5D,CAAC,CAAC,KAAK,CAAC,cAAc,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACpC,aAAa,IAAI,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC,KAAe,CAAC,CAAC;YACpE,CAAC,OAEH;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"useCheckbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/useCheckbox.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAE7B;;GAEG;AACH,MAAM,WAAW,GAAG,CAAC,EAAqC,EAAE,EAAE;QAAzC,EAAE,QAAQ,OAA2B,EAAtB,KAAK,cAApB,YAAsB,CAAF;IACvC,MAAM,aAAa,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEvD,MAAM,KAA0B,YAAY,CAC1C,IAAI,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC,CAAC,EAC5B,UAAU,CACX,EAHK,EAAE,UAAU,OAGjB,EAHsB,IAAI,cAArB,cAAuB,CAG5B,CAAC;IAEF,IAAI,aAAa,EAAE;QACjB,IAAI,KAAK,CAAC,OAAO,EAAE;YACjB,OAAO,CAAC,IAAI,CACV,8IAA8I,CAC/I,CAAC;SACH;QACD,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE;YAC7B,OAAO,CAAC,IAAI,CACV,4EAA4E,CAC7E,CAAC;SACH;KACF;IAED,uCACK,IAAI,KACP,UAAU,kCACL,UAAU,KACb,OAAO,EAAE,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK;gBAC3B,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAe,CAAC;gBACrD,CAAC,CAAC,KAAK,CAAC,OAAO,EACjB,cAAc,EAAE,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,YAAY;gBACzC,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAe,CAAC;gBAC5D,CAAC,CAAC,KAAK,CAAC,cAAc,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACpC,aAAa,IAAI,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC,KAAe,CAAC,CAAC;YACpE,CAAC,OAEH;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
package/esm/help-text/HelpText.js CHANGED
@@ -18,13 +18,13 @@ const HelpText = forwardRef((_a, ref) => {
18
18
  var { className, children, placement = "top", strategy = "absolute", title = "hjelp" } = _a, rest = __rest(_a, ["className", "children", "placement", "strategy", "title"]);
19
19
  const buttonRef = useRef(null);
20
20
  const mergedRef = mergeRefs([buttonRef, ref]);
21
- const popoverRef = useRef(null);
21
+ const [popoverRef, setPopoverRef] = useState(null);
22
22
  const wrapperRef = useRef(null);
23
23
  const [open, setOpen] = useState(false);
24
24
  useEffect(() => {
25
25
  var _a;
26
- open && ((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.focus());
27
- }, [open]);
26
+ open && ((_a = popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.focus) === null || _a === void 0 ? void 0 : _a.call(popoverRef));
27
+ }, [open, popoverRef]);
28
28
  const handleClick = (e) => {
29
29
  setOpen((x) => !x);
30
30
  rest.onClick && rest.onClick(e);
@@ -33,7 +33,7 @@ const HelpText = forwardRef((_a, ref) => {
33
33
  React.createElement("button", Object.assign({}, rest, { ref: mergedRef, onClick: (e) => handleClick(e), className: cl(className, "navds-help-text__button"), type: "button", "aria-expanded": open, "aria-haspopup": "dialog", title: title }),
34
34
  React.createElement(HelpTextIcon, { className: "navds-help-text__icon" }),
35
35
  React.createElement("span", { className: "navds-sr-only" }, title)),
36
- React.createElement(Popover, { ref: popoverRef, onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, role: "tooltip", anchorEl: buttonRef.current, placement: placement, strategy: strategy },
36
+ React.createElement(Popover, { ref: setPopoverRef, onClose: () => setOpen(false), className: "navds-help-text__popover", open: open, role: "tooltip", anchorEl: buttonRef.current, placement: placement, strategy: strategy },
37
37
  React.createElement(Popover.Content, null, children))));
38
38
  });
39
39
  export default HelpText;
package/esm/help-text/HelpText.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../src/help-text/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAgB,MAAM,IAAI,CAAC;AAW3C,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,OAEhB,EADI,IAAI,cANT,2DAOC,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,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,KAAI,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,CAAC;IACtC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,WAAW,GAAG,CAClB,CAAkD,EAClD,EAAE;QACF,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB,EAAC,GAAG,EAAE,UAAU;QAC9C,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAC9B,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI,mBACL,QAAQ,EACtB,KAAK,EAAE,KAAK;YAEZ,oBAAC,YAAY,IAAC,SAAS,EAAC,uBAAuB,GAAG;YAClD,8BAAM,SAAS,EAAC,eAAe,IAAE,KAAK,CAAQ,CACvC;QACT,oBAAC,OAAO,IACN,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,QAAE,QAAQ,CAAmB,CACrC,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"HelpText.js","sourceRoot":"","sources":["../../src/help-text/HelpText.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAgB,MAAM,IAAI,CAAC;AAW3C,MAAM,QAAQ,GAAG,UAAU,CACzB,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,UAAU,EACrB,KAAK,GAAG,OAAO,OAEhB,EADI,IAAI,cANT,2DAOC,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,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAC1E,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,KAAI,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,+CAAjB,UAAU,CAAW,CAAA,CAAC;IAChC,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvB,MAAM,WAAW,GAAG,CAClB,CAAkD,EAClD,EAAE;QACF,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACnB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAClC,CAAC,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAC,iBAAiB,EAAC,GAAG,EAAE,UAAU;QAC9C,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAC9B,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,yBAAyB,CAAC,EACnD,IAAI,EAAC,QAAQ,mBACE,IAAI,mBACL,QAAQ,EACtB,KAAK,EAAE,KAAK;YAEZ,oBAAC,YAAY,IAAC,SAAS,EAAC,uBAAuB,GAAG;YAClD,8BAAM,SAAS,EAAC,eAAe,IAAE,KAAK,CAAQ,CACvC;QACT,oBAAC,OAAO,IACN,GAAG,EAAE,aAAa,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,SAAS,CAAC,OAAO,EAC3B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ;YAElB,oBAAC,OAAO,CAAC,OAAO,QAAE,QAAQ,CAAmB,CACrC,CACN,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-react",
3
- "version": "0.15.0",
3
+ "version": "0.15.3",
4
4
  "private": false,
5
5
  "description": "NAV designsystem react components",
6
6
  "author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@material-ui/core": "^4.12.3",
38
- "@navikt/ds-icons": "^0.8.0",
38
+ "@navikt/ds-icons": "^0.8.1",
39
39
  "@popperjs/core": "^2.10.1",
40
40
  "classnames": "^2.2.6",
41
41
  "react-collapse": "^5.1.0",
@@ -64,5 +64,5 @@
64
64
  "@types/react": "^17.0.30",
65
65
  "react": "^17.0.0"
66
66
  },
67
- "gitHead": "eceaa7e65907270047c4c0728370b1e606261aee"
67
+ "gitHead": "d002c03647f18abf543b112cba0a977e00e3a912"
68
68
  }
package/src/form/checkbox/Checkbox.tsx CHANGED
@@ -24,6 +24,11 @@ export interface CheckboxProps
24
24
  * The value of the HTML element.
25
25
  */
26
26
  value?: string;
27
+ /**
28
+ * Specify whether the Checkbox is in an indeterminate state
29
+ * @default false
30
+ */
31
+ indeterminate?: boolean;
27
32
  }
28
33
 
29
34
  const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
@@ -52,8 +57,20 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
52
57
  "hideLabel",
53
58
  ])}
54
59
  {...inputProps}
60
+ type="checkbox"
55
61
  className="navds-checkbox__input"
56
- ref={ref}
62
+ aria-checked={props.indeterminate ? "mixed" : inputProps.checked}
63
+ ref={(el) => {
64
+ if (el) {
65
+ el.indeterminate = props.indeterminate ?? false;
66
+ }
67
+
68
+ if (typeof ref === "function") {
69
+ ref(el);
70
+ } else if (ref != null) {
71
+ ref.current = el;
72
+ }
73
+ }}
57
74
  />
58
75
  <label htmlFor={inputProps.id} className="navds-checkbox__label">
59
76
  <div
package/src/form/checkbox/stories/checkbox.stories.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import React, { useState } from "react";
2
2
  import { Checkbox, CheckboxGroup } from "../../index";
3
3
  import { Meta } from "@storybook/react/types-6-0";
4
4
  export default {
@@ -6,6 +6,36 @@ export default {
6
6
  component: Checkbox,
7
7
  } as Meta;
8
8
 
9
+ export const Indeterminate = () => {
10
+ const [checked, setChecked] = useState([true, false]);
11
+
12
+ return (
13
+ <>
14
+ <Checkbox
15
+ checked={checked[0] && checked[1]}
16
+ indeterminate={checked[0] !== checked[1]}
17
+ onChange={(e) => setChecked([e.target.checked, e.target.checked])}
18
+ >
19
+ Parent
20
+ </Checkbox>
21
+ <div style={{ paddingLeft: "2rem" }}>
22
+ <Checkbox
23
+ checked={checked[0]}
24
+ onChange={(e) => setChecked([e.target.checked, checked[1]])}
25
+ >
26
+ Child 1
27
+ </Checkbox>
28
+ <Checkbox
29
+ checked={checked[1]}
30
+ onChange={(e) => setChecked([checked[0], e.target.checked])}
31
+ >
32
+ Child 2
33
+ </Checkbox>
34
+ </div>
35
+ </>
36
+ );
37
+ };
38
+
9
39
  export const All = () => {
10
40
  const Checkboxes = (props) => (
11
41
  <CheckboxGroup
@@ -51,6 +81,13 @@ export const All = () => {
51
81
  <Checkbox value="Orange" description="Laborum ad" disabled defaultChecked>
52
82
  Orange
53
83
  </Checkbox>
84
+ <h3>Indeterminate</h3>
85
+ <Checkbox value="Apple" indeterminate>
86
+ Apple
87
+ </Checkbox>
88
+ <Checkbox value="Orange" indeterminate size="small">
89
+ Orange
90
+ </Checkbox>
54
91
 
55
92
  <h2>Checkbox group</h2>
56
93
  <Checkboxes />
package/src/form/checkbox/useCheckbox.ts CHANGED
@@ -32,7 +32,6 @@ const useCheckbox = ({ children, ...props }: CheckboxProps) => {
32
32
  ...rest,
33
33
  inputProps: {
34
34
  ...inputProps,
35
- type: "checkbox",
36
35
  checked: checkboxGroup?.value
37
36
  ? checkboxGroup.value.includes(props.value as string)
38
37
  : props.checked,
package/src/help-text/HelpText.tsx CHANGED
@@ -27,14 +27,14 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
27
27
  ) => {
28
28
  const buttonRef = useRef<HTMLButtonElement | null>(null);
29
29
  const mergedRef = mergeRefs([buttonRef, ref]);
30
- const popoverRef = useRef<HTMLDivElement | null>(null);
30
+ const [popoverRef, setPopoverRef] = useState<HTMLDivElement | null>(null);
31
31
  const wrapperRef = useRef<HTMLDivElement | null>(null);
32
32
 
33
33
  const [open, setOpen] = useState(false);
34
34
 
35
35
  useEffect(() => {
36
- open && popoverRef.current?.focus();
37
- }, [open]);
36
+ open && popoverRef?.focus?.();
37
+ }, [open, popoverRef]);
38
38
 
39
39
  const handleClick = (
40
40
  e: React.MouseEvent<HTMLButtonElement, MouseEvent>
@@ -42,7 +42,6 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
42
42
  setOpen((x) => !x);
43
43
  rest.onClick && rest.onClick(e);
44
44
  };
45
-
46
45
  return (
47
46
  <div className="navds-help-text" ref={wrapperRef}>
48
47
  <button
@@ -59,7 +58,7 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
59
58
  <span className="navds-sr-only">{title}</span>
60
59
  </button>
61
60
  <Popover
62
- ref={popoverRef}
61
+ ref={setPopoverRef}
63
62
  onClose={() => setOpen(false)}
64
63
  className="navds-help-text__popover"
65
64
  open={open}