@trackunit/react-components 0.1.116 → 0.1.119

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 (128) hide show
  1. package/index.cjs +38907 -2449
  2. package/index.js +38914 -2455
  3. package/package.json +7 -7
  4. package/src/common/CommonProps.d.ts +12 -12
  5. package/src/common/StorybookProps.d.ts +6 -6
  6. package/src/common/index.d.ts +3 -3
  7. package/src/common/useContainerProps.d.ts +16 -16
  8. package/src/components/Alert/Alert.d.ts +53 -53
  9. package/src/components/Alert/Alert.variants.d.ts +18 -18
  10. package/src/components/Alert/index.d.ts +1 -1
  11. package/src/components/Badge/Badge.d.ts +38 -38
  12. package/src/components/Badge/Badge.variants.d.ts +3 -3
  13. package/src/components/Badge/index.d.ts +1 -1
  14. package/src/components/Card/Card.d.ts +39 -39
  15. package/src/components/Card/Card.variants.d.ts +13 -13
  16. package/src/components/Card/CardBody.d.ts +25 -25
  17. package/src/components/Card/CardFooter.d.ts +25 -25
  18. package/src/components/Card/CardHeader.d.ts +47 -47
  19. package/src/components/Card/DensityContainer.d.ts +30 -30
  20. package/src/components/Card/index.d.ts +5 -5
  21. package/src/components/Clickable/Clickable.variants.d.ts +3 -3
  22. package/src/components/Collapse/Collapse.d.ts +28 -28
  23. package/src/components/Collapse/Collapse.variants.d.ts +8 -8
  24. package/src/components/Collapse/index.d.ts +1 -1
  25. package/src/components/CopyableText/CopyableText.d.ts +21 -21
  26. package/src/components/CopyableText/CopyableText.variants.d.ts +3 -3
  27. package/src/components/CopyableText/index.d.ts +1 -1
  28. package/src/components/DayPicker/DayPicker.d.ts +32 -32
  29. package/src/components/DayPicker/DayPickerPopover.d.ts +22 -22
  30. package/src/components/DayPicker/DayRangePicker.d.ts +33 -33
  31. package/src/components/DayPicker/index.d.ts +21 -21
  32. package/src/components/DayPicker/useLocale.d.ts +8 -8
  33. package/src/components/Drawer/Drawer.d.ts +32 -32
  34. package/src/components/Drawer/Drawer.variants.d.ts +4 -4
  35. package/src/components/ExternalLink/ExternalLink.d.ts +31 -31
  36. package/src/components/Heading/Heading.d.ts +28 -28
  37. package/src/components/Heading/Heading.variants.d.ts +5 -5
  38. package/src/components/Heading/index.d.ts +1 -1
  39. package/src/components/Icon/Icon.d.ts +52 -52
  40. package/src/components/Icon/Icon.variants.d.ts +8 -8
  41. package/src/components/Indicator/Indicator.d.ts +42 -42
  42. package/src/components/Indicator/Indicator.variants.d.ts +10 -10
  43. package/src/components/Indicator/index.d.ts +1 -1
  44. package/src/components/Menu/MenuItem/MenuItem.d.ts +65 -65
  45. package/src/components/Menu/MenuList/MenuList.d.ts +36 -36
  46. package/src/components/Menu/MoreMenu/MoreMenu.d.ts +24 -24
  47. package/src/components/Menu/index.d.ts +3 -3
  48. package/src/components/Modal/Modal.d.ts +30 -30
  49. package/src/components/Modal/ModalBackdrop.d.ts +13 -13
  50. package/src/components/Modal/index.d.ts +3 -3
  51. package/src/components/Modal/useModal.d.ts +21 -21
  52. package/src/components/PageHeader/PageHeader.d.ts +47 -47
  53. package/src/components/PageHeader/PageHeader.variants.d.ts +5 -5
  54. package/src/components/PageHeader/index.d.ts +1 -1
  55. package/src/components/Pagination/Pagination.d.ts +62 -62
  56. package/src/components/Pagination/Pagination.variants.d.ts +2 -2
  57. package/src/components/Popover/Popover.d.ts +72 -72
  58. package/src/components/Popover/Popover.variants.d.ts +5 -5
  59. package/src/components/Popover/PopoverContent.d.ts +7 -7
  60. package/src/components/Popover/PopoverTitle.d.ts +20 -20
  61. package/src/components/Popover/PopoverTrigger.d.ts +12 -12
  62. package/src/components/Popover/PopoverTypes.d.ts +33 -33
  63. package/src/components/Popover/index.d.ts +5 -5
  64. package/src/components/Popover/usePopover.d.ts +56 -56
  65. package/src/components/Prompt/Prompt.d.ts +20 -20
  66. package/src/components/Prompt/index.d.ts +1 -1
  67. package/src/components/SectionHeader/SectionHeader.d.ts +23 -23
  68. package/src/components/SectionHeader/index.d.ts +1 -1
  69. package/src/components/Sidebar/Sidebar.d.ts +57 -57
  70. package/src/components/Sidebar/Sidebar.variants.d.ts +4 -4
  71. package/src/components/Sidebar/useOverflowItems.d.ts +39 -39
  72. package/src/components/SkeletonLines/SkeletonLines.d.ts +25 -25
  73. package/src/components/SkeletonLines/SkeletonLines.variants.d.ts +1 -1
  74. package/src/components/SkeletonLines/index.d.ts +1 -1
  75. package/src/components/Spacer/Spacer.d.ts +20 -20
  76. package/src/components/Spacer/Spacer.variants.d.ts +4 -4
  77. package/src/components/Spacer/index.d.ts +1 -1
  78. package/src/components/Spinner/Spinner.d.ts +39 -39
  79. package/src/components/Spinner/Spinner.variants.d.ts +7 -7
  80. package/src/components/Spinner/index.d.ts +1 -1
  81. package/src/components/Tag/Tag.d.ts +40 -40
  82. package/src/components/Tag/Tag.variants.d.ts +7 -7
  83. package/src/components/Tag/index.d.ts +1 -1
  84. package/src/components/Text/Text.d.ts +58 -58
  85. package/src/components/Text/index.d.ts +1 -1
  86. package/src/components/Timeline/Timeline.d.ts +33 -33
  87. package/src/components/Timeline/Timeline.variants.d.ts +3 -3
  88. package/src/components/Tip/Tip.d.ts +26 -26
  89. package/src/components/Tip/Tip.variants.d.ts +4 -4
  90. package/src/components/Tip/index.d.ts +1 -1
  91. package/src/components/Tooltip/Tooltip.d.ts +37 -37
  92. package/src/components/Tooltip/Tooltip.variants.d.ts +6 -6
  93. package/src/components/Tooltip/index.d.ts +1 -1
  94. package/src/components/ValueBar/ValueBar.d.ts +44 -44
  95. package/src/components/ValueBar/ValueBar.variants.d.ts +9 -9
  96. package/src/components/ValueBar/ValueBarHelper.d.ts +35 -35
  97. package/src/components/ValueBar/ValueBarTypes.d.ts +9 -9
  98. package/src/components/ValueBar/index.d.ts +3 -3
  99. package/src/components/buttons/BackToTopButton/BackToTopButton.d.ts +14 -14
  100. package/src/components/buttons/BackToTopButton/BackToTopButton.variants.d.ts +3 -3
  101. package/src/components/buttons/Button/Button.d.ts +44 -44
  102. package/src/components/buttons/IconButton/IconButton.d.ts +20 -20
  103. package/src/components/buttons/StarButton/StarButton.d.ts +13 -13
  104. package/src/components/buttons/index.d.ts +4 -4
  105. package/src/components/buttons/shared/Button.variants.d.ts +13 -13
  106. package/src/components/buttons/shared/ButtonProps.d.ts +48 -48
  107. package/src/components/index.d.ts +30 -30
  108. package/src/hooks/index.d.ts +9 -9
  109. package/src/hooks/useClickOutside.d.ts +12 -12
  110. package/src/hooks/useDebounce.d.ts +13 -13
  111. package/src/hooks/useDevicePixelRatio.d.ts +37 -37
  112. package/src/hooks/useHover.d.ts +24 -24
  113. package/src/hooks/useIsFirstRender.d.ts +6 -6
  114. package/src/hooks/useLocalStorage.d.ts +9 -9
  115. package/src/hooks/useLocalStorageReducer.d.ts +7 -7
  116. package/src/hooks/useResize.d.ts +10 -10
  117. package/src/hooks/useTimeout.d.ts +11 -11
  118. package/src/index.d.ts +7 -7
  119. package/src/layout/helper/MinTopFullContentLayout.d.ts +18 -18
  120. package/src/layout/index.d.ts +6 -7
  121. package/src/layout/responsive/FilterListMapLayout.d.ts +15 -22
  122. package/src/layout/responsive/FullWidthRepeatingLayout.d.ts +19 -19
  123. package/src/layout/responsive/GridArea.d.ts +13 -13
  124. package/src/layout/responsive/IntrinsicallyResponsiveGrid.d.ts +32 -32
  125. package/src/layout/responsive/TitleNavContentLayout.d.ts +28 -28
  126. package/src/test-utils/hooks.d.ts +4 -4
  127. package/src/test-utils/test-utils.d.ts +5 -5
  128. package/src/layout/responsive/TwoColumnLayout.d.ts +0 -12
@@ -1,13 +1,13 @@
1
- export type DebounceDirection = "in" | "out" | "both";
2
- /**
3
- * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
4
- *
5
- * @param {any} value The value to set
6
- * @param {number} delay The debounce time
7
- * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
8
- * @returns {any} The latest value received
9
- */
10
- /**
11
- *
12
- */
13
- export declare const useDebounce: <T>(value: T, delay?: number, direction?: DebounceDirection) => T;
1
+ export type DebounceDirection = "in" | "out" | "both";
2
+ /**
3
+ * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
4
+ *
5
+ * @param {any} value The value to set
6
+ * @param {number} delay The debounce time
7
+ * @param {"in" | "out" | "both"} direction Considers truthiness of value. If set to "in", the value will only be debounced if it is truthy. If set to "out", the value will only be debounced if it is falsy. If set to "both" or if not defined, the value will be debounced regardless of truthiness.
8
+ * @returns {any} The latest value received
9
+ */
10
+ /**
11
+ *
12
+ */
13
+ export declare const useDebounce: <T>(value: T, delay?: number, direction?: DebounceDirection) => T;
@@ -1,37 +1,37 @@
1
- export interface DevicePixelRatioOptions {
2
- /**
3
- * Default DPR to use if browser does not support the `devicePixelRatio`
4
- * property, or when rendering on server
5
- *
6
- * @default `1`
7
- * @returns DPR
8
- */
9
- defaultDpr?: number;
10
- /**
11
- * Whether or not to round the number down to the closest integer
12
- *
13
- * @default `true`
14
- */
15
- round?: boolean;
16
- /**
17
- * Maximum DPR to return (set to `2` to only generate 1 and 2)
18
- *
19
- * @default `3`
20
- */
21
- maxDpr?: number;
22
- }
23
- /**
24
- * Get the device pixel ratio, potentially rounded and capped.
25
- * Will emit new values if it changes.
26
- *
27
- * @param {DevicePixelRatioOptions} options the options object
28
- * @returns { number } The current device pixel ratio, or the default if none can be resolved
29
- */
30
- export declare function useDevicePixelRatio(options?: DevicePixelRatioOptions): number;
31
- /**
32
- * Returns the current device pixel ratio (DPR) given the passed options
33
- *
34
- * @param { DevicePixelRatioOptions } options the options object
35
- * @returns { number } current device pixel ratio
36
- */
37
- export declare function getDevicePixelRatio(options?: DevicePixelRatioOptions): number;
1
+ export interface DevicePixelRatioOptions {
2
+ /**
3
+ * Default DPR to use if browser does not support the `devicePixelRatio`
4
+ * property, or when rendering on server
5
+ *
6
+ * @default `1`
7
+ * @returns DPR
8
+ */
9
+ defaultDpr?: number;
10
+ /**
11
+ * Whether or not to round the number down to the closest integer
12
+ *
13
+ * @default `true`
14
+ */
15
+ round?: boolean;
16
+ /**
17
+ * Maximum DPR to return (set to `2` to only generate 1 and 2)
18
+ *
19
+ * @default `3`
20
+ */
21
+ maxDpr?: number;
22
+ }
23
+ /**
24
+ * Get the device pixel ratio, potentially rounded and capped.
25
+ * Will emit new values if it changes.
26
+ *
27
+ * @param {DevicePixelRatioOptions} options the options object
28
+ * @returns { number } The current device pixel ratio, or the default if none can be resolved
29
+ */
30
+ export declare function useDevicePixelRatio(options?: DevicePixelRatioOptions): number;
31
+ /**
32
+ * Returns the current device pixel ratio (DPR) given the passed options
33
+ *
34
+ * @param { DevicePixelRatioOptions } options the options object
35
+ * @returns { number } current device pixel ratio
36
+ */
37
+ export declare function getDevicePixelRatio(options?: DevicePixelRatioOptions): number;
@@ -1,24 +1,24 @@
1
- import { DebounceDirection } from "./useDebounce";
2
- type ConditionalUseHoverProps = {
3
- debounced: true;
4
- delay?: number;
5
- direction?: DebounceDirection;
6
- } | {
7
- debounced: false;
8
- delay?: never;
9
- direction?: never;
10
- };
11
- /**
12
- * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
13
- * The boolean will be true if the element is being hovered, and false if it is not.
14
- * Can be directionally debounced.
15
- *
16
- * @param {ConditionalUseHoverProps} param0 The options
17
- * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
18
- */
19
- export declare const useHover: ({ debounced, delay, direction }?: ConditionalUseHoverProps) => {
20
- onMouseEnter: () => void;
21
- onMouseLeave: () => void;
22
- hovering: boolean;
23
- };
24
- export {};
1
+ import { DebounceDirection } from "./useDebounce";
2
+ type ConditionalUseHoverProps = {
3
+ debounced: true;
4
+ delay?: number;
5
+ direction?: DebounceDirection;
6
+ } | {
7
+ debounced: false;
8
+ delay?: never;
9
+ direction?: never;
10
+ };
11
+ /**
12
+ * The useHover hook returns a onMouseEnter, onMouseLeave and a boolean indicating whether the element is being hovered.
13
+ * The boolean will be true if the element is being hovered, and false if it is not.
14
+ * Can be directionally debounced.
15
+ *
16
+ * @param {ConditionalUseHoverProps} param0 The options
17
+ * @returns {Object} The object containing the onMouseEnter, onMouseLeave and hovering props
18
+ */
19
+ export declare const useHover: ({ debounced, delay, direction }?: ConditionalUseHoverProps) => {
20
+ onMouseEnter: () => void;
21
+ onMouseLeave: () => void;
22
+ hovering: boolean;
23
+ };
24
+ export {};
@@ -1,6 +1,6 @@
1
- /**
2
- * Differentiate between the first and subsequent renders.
3
- *
4
- * @returns {boolean} Returns true if it is the first render, false otherwise.
5
- */
6
- export declare const useIsFirstRender: () => boolean;
1
+ /**
2
+ * Differentiate between the first and subsequent renders.
3
+ *
4
+ * @returns {boolean} Returns true if it is the first render, false otherwise.
5
+ */
6
+ export declare const useIsFirstRender: () => boolean;
@@ -1,9 +1,9 @@
1
- import { Dispatch, SetStateAction } from "react";
2
- /**
3
- * The useLocalStorage hook works like useState, but saves to localstorage.
4
- *
5
- * @param {string} key - The key the values is saved under.
6
- * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
7
- * @returns {string | null | undefined} value
8
- */
9
- export declare const useLocalStorage: <TValue = string | null | undefined>(key: string, initialValue?: TValue | undefined) => [TValue | null, Dispatch<SetStateAction<TValue | null>>, () => void];
1
+ import { Dispatch, SetStateAction } from "react";
2
+ /**
3
+ * The useLocalStorage hook works like useState, but saves to localstorage.
4
+ *
5
+ * @param {string} key - The key the values is saved under.
6
+ * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
7
+ * @returns {string | null | undefined} value
8
+ */
9
+ export declare const useLocalStorage: <TValue = string | null | undefined>(key: string, initialValue?: TValue | undefined) => [TValue | null, Dispatch<SetStateAction<TValue | null>>, () => void];
@@ -1,7 +1,7 @@
1
- import { Dispatch } from "react";
2
- /**
3
- * Wraps a normal useReducer with local storage functionality
4
- *
5
- * @param {string} key - The key the state is saved with in local storage.
6
- */
7
- export declare const useLocalStorageReducer: <State, Action>(key: string, reducer: (state: State, action: Action) => State, initialState: State) => [State, Dispatch<Action>];
1
+ import { Dispatch } from "react";
2
+ /**
3
+ * Wraps a normal useReducer with local storage functionality
4
+ *
5
+ * @param {string} key - The key the state is saved with in local storage.
6
+ */
7
+ export declare const useLocalStorageReducer: <State, Action>(key: string, reducer: (state: State, action: Action) => State, initialState: State) => [State, Dispatch<Action>];
@@ -1,10 +1,10 @@
1
- export interface WindowSize {
2
- height: number;
3
- width: number;
4
- }
5
- /**
6
- * Custom hook to handle window resize events and provide the current window size.
7
- *
8
- * @returns {WindowSize} An object containing the current window height and width.
9
- */
10
- export declare const useResize: () => WindowSize;
1
+ export interface WindowSize {
2
+ height: number;
3
+ width: number;
4
+ }
5
+ /**
6
+ * Custom hook to handle window resize events and provide the current window size.
7
+ *
8
+ * @returns {WindowSize} An object containing the current window height and width.
9
+ */
10
+ export declare const useResize: () => WindowSize;
@@ -1,11 +1,11 @@
1
- export type UseTimeoutReturn = [() => boolean | null, () => void, () => void];
2
- interface UseTimeoutProps {
3
- onTimeout: () => void;
4
- duration: number;
5
- }
6
- /**
7
- * @param {UseTimeoutProps} props The props
8
- * @returns {{ startTimeout: () => void; stopTimeout: () => void; isReady: boolean | null}} return
9
- */
10
- export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) => UseTimeoutReturn;
11
- export {};
1
+ export type UseTimeoutReturn = [() => boolean | null, () => void, () => void];
2
+ interface UseTimeoutProps {
3
+ onTimeout: () => void;
4
+ duration: number;
5
+ }
6
+ /**
7
+ * @param {UseTimeoutProps} props The props
8
+ * @returns {{ startTimeout: () => void; stopTimeout: () => void; isReady: boolean | null}} return
9
+ */
10
+ export declare const useTimeout: ({ onTimeout, duration }: UseTimeoutProps) => UseTimeoutReturn;
11
+ export {};
package/src/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- export * from "./common";
2
- export * from "./components";
3
- export * from "./components/buttons/shared/Button.variants";
4
- export * from "./components/Clickable/Clickable.variants";
5
- export * from "./components/Indicator/Indicator.variants";
6
- export * from "./hooks";
7
- export * from "./layout";
1
+ export * from "./common";
2
+ export * from "./components";
3
+ export * from "./components/buttons/shared/Button.variants";
4
+ export * from "./components/Clickable/Clickable.variants";
5
+ export * from "./components/Indicator/Indicator.variants";
6
+ export * from "./hooks";
7
+ export * from "./layout";
@@ -1,18 +1,18 @@
1
- import { ReactNode } from "react";
2
- import { CommonProps } from "../../common/CommonProps";
3
- /**
4
- * Pass two children. The first will be min-content and the second full height
5
- * Useful when toy want the second child to have 100% height and be scrollable
6
- * Example: FilterBar + Fleet List
7
- */
8
- interface MinTopFullContentLayoutProps extends CommonProps {
9
- children: ReactNode;
10
- }
11
- /**
12
- * The MinTopFullContentLayout component.
13
- *
14
- * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
15
- * @returns {JSX.Element} MinTopFullContentLayout component
16
- */
17
- export declare const MinTopFullContentLayout: ({ children, className, dataTestId }: MinTopFullContentLayoutProps) => JSX.Element;
18
- export {};
1
+ import { ReactNode } from "react";
2
+ import { CommonProps } from "../../common/CommonProps";
3
+ /**
4
+ * Pass two children. The first will be min-content and the second full height
5
+ * Useful when toy want the second child to have 100% height and be scrollable
6
+ * Example: FilterBar + Fleet List
7
+ */
8
+ interface MinTopFullContentLayoutProps extends CommonProps {
9
+ children: ReactNode;
10
+ }
11
+ /**
12
+ * The MinTopFullContentLayout component.
13
+ *
14
+ * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
15
+ * @returns {JSX.Element} MinTopFullContentLayout component
16
+ */
17
+ export declare const MinTopFullContentLayout: ({ children, className, dataTestId }: MinTopFullContentLayoutProps) => JSX.Element;
18
+ export {};
@@ -1,7 +1,6 @@
1
- export * from "./helper/MinTopFullContentLayout";
2
- export * from "./responsive/FilterListMapLayout";
3
- export * from "./responsive/FullWidthRepeatingLayout";
4
- export * from "./responsive/GridArea";
5
- export * from "./responsive/IntrinsicallyResponsiveGrid";
6
- export * from "./responsive/TitleNavContentLayout";
7
- export * from "./responsive/TwoColumnLayout";
1
+ export * from "./helper/MinTopFullContentLayout";
2
+ export * from "./responsive/FilterListMapLayout";
3
+ export * from "./responsive/FullWidthRepeatingLayout";
4
+ export * from "./responsive/GridArea";
5
+ export * from "./responsive/IntrinsicallyResponsiveGrid";
6
+ export * from "./responsive/TitleNavContentLayout";
@@ -1,22 +1,15 @@
1
- /// <reference types="react" />
2
- interface FilterListMapLayoutProps {
3
- children: React.ReactNode;
4
- }
5
- /**
6
- * Responsive layout component setting up three grid areas
7
- * one for filtering, (result-)list and (result-map)
8
- *
9
- * List needs to handle its own min size - and map takes up the rest.
10
- *
11
- * Will be inlined to
12
- * - filter
13
- * - list
14
- * - map
15
- * on screens < mediaQuery.xxl
16
- *
17
- *
18
- * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
19
- * @returns {JSX.Element} FilterListMapLayout component
20
- */
21
- export declare const FilterListMapLayout: ({ children }: FilterListMapLayoutProps) => JSX.Element;
22
- export {};
1
+ /// <reference types="react" />
2
+ interface FilterListMapLayoutProps {
3
+ children: React.ReactNode;
4
+ }
5
+ /**
6
+ * Responsive layout component setting up three grid areas
7
+ * one for filtering, (result-)list and (result-map)
8
+ *
9
+ * List needs to handle its own min size - and map takes up the rest.
10
+ *
11
+ * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
12
+ * @returns {JSX.Element} FilterListMapLayout component
13
+ */
14
+ export declare const FilterListMapLayout: ({ children }: FilterListMapLayoutProps) => JSX.Element;
15
+ export {};
@@ -1,19 +1,19 @@
1
- /// <reference types="react" />
2
- type RowSizing = "Equal" | "MinContent" | "Unmanaged";
3
- interface FullWidthRepeatingLayoutProps {
4
- children: React.ReactNode;
5
- rowSizing?: RowSizing;
6
- rowMinHeight?: number;
7
- dataTestId?: string;
8
- className?: string;
9
- }
10
- /**
11
- * Layout component with repeating full width areas, default one height fraction each but option to use content height instead
12
- * Row min height can optionally be set here or managed by children
13
- * Scrolling happens if/when children's a min-height is reached
14
- *
15
- * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
16
- * @returns {JSX.Element} FullWidthRepeatingLayout component
17
- */
18
- export declare const FullWidthRepeatingLayout: ({ children, rowSizing, rowMinHeight, dataTestId, className, }: FullWidthRepeatingLayoutProps) => JSX.Element;
19
- export {};
1
+ /// <reference types="react" />
2
+ type RowSizing = "Equal" | "MinContent" | "Unmanaged";
3
+ interface FullWidthRepeatingLayoutProps {
4
+ children: React.ReactNode;
5
+ rowSizing?: RowSizing;
6
+ rowMinHeight?: number;
7
+ dataTestId?: string;
8
+ className?: string;
9
+ }
10
+ /**
11
+ * Layout component with repeating full width areas, default one height fraction each but option to use content height instead
12
+ * Row min height can optionally be set here or managed by children
13
+ * Scrolling happens if/when children's a min-height is reached
14
+ *
15
+ * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
16
+ * @returns {JSX.Element} FullWidthRepeatingLayout component
17
+ */
18
+ export declare const FullWidthRepeatingLayout: ({ children, rowSizing, rowMinHeight, dataTestId, className, }: FullWidthRepeatingLayoutProps) => JSX.Element;
19
+ export {};
@@ -1,13 +1,13 @@
1
- import React from "react";
2
- import { CommonProps } from "../../common/CommonProps";
3
- export interface GridAreaProps extends CommonProps {
4
- area: string;
5
- children: React.ReactNode;
6
- }
7
- /**
8
- * Simply applies a Grid Area to the element
9
- *
10
- * @param {GridAreaProps} props - The props for the GridArea component
11
- * @returns {JSX.Element} GridArea component
12
- */
13
- export declare const GridArea: ({ area, dataTestId, className, children }: GridAreaProps) => JSX.Element;
1
+ import React from "react";
2
+ import { CommonProps } from "../../common/CommonProps";
3
+ export interface GridAreaProps extends CommonProps {
4
+ area: string;
5
+ children: React.ReactNode;
6
+ }
7
+ /**
8
+ * Simply applies a Grid Area to the element
9
+ *
10
+ * @param {GridAreaProps} props - The props for the GridArea component
11
+ * @returns {JSX.Element} GridArea component
12
+ */
13
+ export declare const GridArea: ({ area, dataTestId, className, children }: GridAreaProps) => JSX.Element;
@@ -1,32 +1,32 @@
1
- /// <reference types="react" />
2
- import { CommonProps } from "../../common/CommonProps";
3
- export type ColumnWidth = "xs" | "sm" | "md" | "lg" | "xl";
4
- export type RowHeight = "auto" | "1fr";
5
- export type Space = "inherit" | "auto" | "none" | "tiny" | "mini" | "small" | "medium" | "large" | "giant" | "enormous";
6
- export type Occupation = "auto-fill" | "auto-fit";
7
- interface IntrinsicallyResponsiveGridProps extends CommonProps {
8
- /**
9
- * The children to be laid out
10
- */
11
- children: React.ReactNode;
12
- /**
13
- * Default "auto-fill" stretch a little, till there's room for another column.
14
- * Optionally set "auto-fit" to stretch children to fit entire container width,
15
- */
16
- occupation?: Occupation;
17
- minColumnWidth?: ColumnWidth;
18
- rowHeight?: RowHeight;
19
- /**
20
- * The gap size between children
21
- */
22
- gap?: Space;
23
- }
24
- /**
25
- * A grid container that has a flexible number of columns.
26
- * Adds more columns if constraints allow it, otherwise wraps to next row
27
- *
28
- * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
29
- * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
30
- */
31
- export declare const IntrinsicallyResponsiveGrid: ({ children, occupation, minColumnWidth, rowHeight, gap, dataTestId, className, }: IntrinsicallyResponsiveGridProps) => JSX.Element;
32
- export {};
1
+ /// <reference types="react" />
2
+ import { CommonProps } from "../../common/CommonProps";
3
+ export type ColumnWidth = "xs" | "sm" | "md" | "lg" | "xl";
4
+ export type RowHeight = "auto" | "1fr";
5
+ export type Space = "inherit" | "auto" | "none" | "tiny" | "mini" | "small" | "medium" | "large" | "giant" | "enormous";
6
+ export type Occupation = "auto-fill" | "auto-fit";
7
+ interface IntrinsicallyResponsiveGridProps extends CommonProps {
8
+ /**
9
+ * The children to be laid out
10
+ */
11
+ children: React.ReactNode;
12
+ /**
13
+ * Default "auto-fill" stretch a little, till there's room for another column.
14
+ * Optionally set "auto-fit" to stretch children to fit entire container width,
15
+ */
16
+ occupation?: Occupation;
17
+ minColumnWidth?: ColumnWidth;
18
+ rowHeight?: RowHeight;
19
+ /**
20
+ * The gap size between children
21
+ */
22
+ gap?: Space;
23
+ }
24
+ /**
25
+ * A grid container that has a flexible number of columns.
26
+ * Adds more columns if constraints allow it, otherwise wraps to next row
27
+ *
28
+ * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
29
+ * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
30
+ */
31
+ export declare const IntrinsicallyResponsiveGrid: ({ children, occupation, minColumnWidth, rowHeight, gap, dataTestId, className, }: IntrinsicallyResponsiveGridProps) => JSX.Element;
32
+ export {};
@@ -1,28 +1,28 @@
1
- /// <reference types="react" />
2
- import { CommonProps } from "../../common";
3
- interface TitleNavContentLayoutProps extends CommonProps {
4
- children: React.ReactNode;
5
- }
6
- /**
7
- * The TitleNavContentLayout.
8
- * Use the `TitleGridArea`, `NavGridArea` and `ContentGridArea` components to define the layout elements.
9
- *
10
- * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
11
- * @returns {JSX.Element} TitleNavContentLayout component
12
- */
13
- export declare const TitleNavContentLayout: ({ children, className }: TitleNavContentLayoutProps) => JSX.Element;
14
- /**
15
- * A component to define the title area of the TitleNavContentLayout.
16
- */
17
- export declare const TitleGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"header">, {}>;
18
- /**
19
- * A component to define the navigation area of the TitleNavContentLayout.
20
- * Adds the needed left padding on large screens.
21
- */
22
- export declare const NavGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"aside">, {}>;
23
- /**
24
- * A component to define the content area of the TitleNavContentLayout.
25
- * Adds the needed right padding on large screens.
26
- */
27
- export declare const ContentGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"article">, {}>;
28
- export {};
1
+ /// <reference types="react" />
2
+ import { CommonProps } from "../../common";
3
+ interface TitleNavContentLayoutProps extends CommonProps {
4
+ children: React.ReactNode;
5
+ }
6
+ /**
7
+ * The TitleNavContentLayout.
8
+ * Use the `TitleGridArea`, `NavGridArea` and `ContentGridArea` components to define the layout elements.
9
+ *
10
+ * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
11
+ * @returns {JSX.Element} TitleNavContentLayout component
12
+ */
13
+ export declare const TitleNavContentLayout: ({ children, className }: TitleNavContentLayoutProps) => JSX.Element;
14
+ /**
15
+ * A component to define the title area of the TitleNavContentLayout.
16
+ */
17
+ export declare const TitleGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"header">, {}>;
18
+ /**
19
+ * A component to define the navigation area of the TitleNavContentLayout.
20
+ * Adds the needed left padding on large screens.
21
+ */
22
+ export declare const NavGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"aside">, {}>;
23
+ /**
24
+ * A component to define the content area of the TitleNavContentLayout.
25
+ * Adds the needed right padding on large screens.
26
+ */
27
+ export declare const ContentGridArea: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"article">, {}>;
28
+ export {};
@@ -1,4 +1,4 @@
1
- import { RenderHookOptions } from "@testing-library/react";
2
- declare const customRenderHook: <T, K>(callback: (props: T) => K, options?: RenderHookOptions<T, typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement> | undefined) => import("@testing-library/react").RenderHookResult<K, T>;
3
- export * from "@testing-library/react";
4
- export { customRenderHook as renderHook };
1
+ import { RenderHookOptions } from "@testing-library/react";
2
+ declare const customRenderHook: <T, K>(callback: (props: T) => K, options?: RenderHookOptions<T, typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement> | undefined) => import("@testing-library/react").RenderHookResult<K, T>;
3
+ export * from "@testing-library/react";
4
+ export { customRenderHook as renderHook };
@@ -1,5 +1,5 @@
1
- import { RenderOptions } from "@testing-library/react";
2
- import * as React from "react";
3
- declare const customRender: (ui: React.ReactElement, options?: Omit<RenderOptions, "queries">) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
4
- export * from "@testing-library/react";
5
- export { customRender as render };
1
+ import { RenderOptions } from "@testing-library/react";
2
+ import * as React from "react";
3
+ declare const customRender: (ui: React.ReactElement, options?: Omit<RenderOptions, "queries">) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
4
+ export * from "@testing-library/react";
5
+ export { customRender as render };
@@ -1,12 +0,0 @@
1
- /// <reference types="react" />
2
- interface TwoColumnLayoutProps {
3
- children: React.ReactNode;
4
- }
5
- /**
6
- * TwoColumnLayout.
7
- *
8
- * @param {TwoColumnLayoutProps} props - The props for the TwoColumnLayout component
9
- * @returns {JSX.Element} TwoColumnLayout component
10
- */
11
- export declare const TwoColumnLayout: ({ children }: TwoColumnLayoutProps) => JSX.Element;
12
- export {};