@navikt/ds-react 5.3.5 → 5.4.1

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 (54) hide show
  1. package/_docs.json +206 -0
  2. package/cjs/date/monthpicker/MonthButton.js +6 -5
  3. package/cjs/form/search/Search.js +10 -8
  4. package/cjs/index.js +1 -0
  5. package/cjs/layout/grid/HGrid.js +1 -1
  6. package/cjs/layout/responsive/Responsive.js +95 -0
  7. package/cjs/layout/responsive/index.js +6 -0
  8. package/cjs/layout/responsive/package.json +6 -0
  9. package/cjs/layout/stack/HStack.js +1 -1
  10. package/cjs/layout/stack/Spacer.js +1 -1
  11. package/cjs/layout/stack/VStack.js +1 -1
  12. package/cjs/modal/Modal.js +2 -2
  13. package/cjs/util/AnimateHeight.js +3 -1
  14. package/esm/date/monthpicker/MonthButton.js +6 -5
  15. package/esm/date/monthpicker/MonthButton.js.map +1 -1
  16. package/esm/form/search/Search.js +11 -9
  17. package/esm/form/search/Search.js.map +1 -1
  18. package/esm/index.d.ts +1 -0
  19. package/esm/index.js +1 -0
  20. package/esm/index.js.map +1 -1
  21. package/esm/layout/grid/HGrid.d.ts +1 -1
  22. package/esm/layout/grid/HGrid.js +1 -1
  23. package/esm/layout/responsive/Responsive.d.ts +64 -0
  24. package/esm/layout/responsive/Responsive.js +67 -0
  25. package/esm/layout/responsive/Responsive.js.map +1 -0
  26. package/esm/layout/responsive/index.d.ts +1 -0
  27. package/esm/layout/responsive/index.js +2 -0
  28. package/esm/layout/responsive/index.js.map +1 -0
  29. package/esm/layout/stack/HStack.d.ts +1 -1
  30. package/esm/layout/stack/HStack.js +1 -1
  31. package/esm/layout/stack/Spacer.d.ts +1 -1
  32. package/esm/layout/stack/Spacer.js +1 -1
  33. package/esm/layout/stack/VStack.d.ts +1 -1
  34. package/esm/layout/stack/VStack.js +1 -1
  35. package/esm/modal/Modal.js +2 -2
  36. package/esm/modal/Modal.js.map +1 -1
  37. package/esm/util/AnimateHeight.js +3 -1
  38. package/esm/util/AnimateHeight.js.map +1 -1
  39. package/package.json +4 -4
  40. package/src/date/monthpicker/MonthButton.tsx +6 -5
  41. package/src/date/monthpicker/monthpicker.stories.tsx +1 -1
  42. package/src/form/search/Search.tsx +11 -24
  43. package/src/index.ts +1 -0
  44. package/src/layout/grid/HGrid.tsx +1 -1
  45. package/src/layout/responsive/Responsive.tsx +96 -0
  46. package/src/layout/responsive/hide.stories.tsx +45 -0
  47. package/src/layout/responsive/index.ts +1 -0
  48. package/src/layout/responsive/show.stories.tsx +45 -0
  49. package/src/layout/stack/HStack.tsx +1 -1
  50. package/src/layout/stack/Spacer.tsx +1 -1
  51. package/src/layout/stack/VStack.tsx +1 -1
  52. package/src/modal/Modal.tsx +1 -1
  53. package/src/modal/modal.stories.tsx +2 -2
  54. package/src/util/AnimateHeight.tsx +3 -1
@@ -7,7 +7,7 @@ export type VStackProps = Omit<StackProps, "direction" | "wrap">;
7
7
  /**
8
8
  * Layout-primitive for vetical flexbox
9
9
  *
10
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/Stack)
10
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/vstack)
11
11
  * @see 🏷️ {@link VStackProps}
12
12
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
13
13
  *
@@ -192,6 +192,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
192
192
 
193
193
  const component = (
194
194
  <dialog
195
+ {...rest}
195
196
  ref={mergedRef}
196
197
  className={cl("navds-modal", className, {
197
198
  "navds-modal--polyfilled": needPolyfill,
@@ -213,7 +214,6 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
213
214
  ? ariaLabelId
214
215
  : ariaLabelledby
215
216
  }
216
- {...rest}
217
217
  >
218
218
  <ModalContext.Provider
219
219
  value={{
@@ -16,7 +16,7 @@ export const WithUseRef = () => {
16
16
  const ref2 = useRef<HTMLDialogElement>(null);
17
17
 
18
18
  return (
19
- <>
19
+ <div>
20
20
  <Button onClick={() => ref.current?.showModal()}>Open Modal</Button>
21
21
  <Modal
22
22
  open={ref.current ? undefined : true /* initially open */}
@@ -80,7 +80,7 @@ export const WithUseRef = () => {
80
80
  <Button variant="tertiary">Tertiary</Button>
81
81
  </Modal.Footer>
82
82
  </Modal>
83
- </>
83
+ </div>
84
84
  );
85
85
  };
86
86
  WithUseRef.storyName = "With useRef";
@@ -85,7 +85,9 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
85
85
 
86
86
  if (typeof initHeight === "number") {
87
87
  // Reset negative height to 0
88
- initHeight = height < 0 ? 0 : height;
88
+ if (typeof height !== "string") {
89
+ initHeight = height < 0 ? 0 : height;
90
+ }
89
91
  initOverflow = "hidden";
90
92
  } else if (isPercentage(initHeight)) {
91
93
  // If value is string "0%" make sure we convert it to number 0