@norges-domstoler/dds-components 6.0.0 → 7.0.0

package/dist/cjs/helpers/Input/Input.styles.d.ts

@@ -1,14 +1,12 @@
-import { StyledLabelProps } from '.';
 import { Property } from 'csstype';
 export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const StatefulInput: import("styled-components").StyledComponent<"input", any, Pick<import("./Input.types").InputProps, "disabled" | "readOnly"> & {
+export declare const StatefulInput: import("styled-components").StyledComponent<"input", any, Pick<import("./Input.types").InputProps, "disabled" | "readOnly" | "componentSize"> & {
     hasErrorMessage: boolean;
-    hasLabel: import("./Input.types").LabelPresence;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../components/Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, any, StyledLabelProps, never>;
-export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare type OuterInputContainerProps = {
     width?: Property.Width<string>;
 };
 export declare const OuterInputContainer: import("styled-components").StyledComponent<"div", any, OuterInputContainerProps, never>;
+/**Brukes som container til input og ikon for posisjonering. */
+export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/dist/cjs/helpers/Input/Input.tokens.d.ts

@@ -1,13 +1,59 @@
 import { CSSObject } from 'styled-components';
 export declare const inputTokens: {
-    baseInput: {
-        base: CSSObject;
-        focus: {
-            base: CSSObject;
+    input: {
+        base: {
+            color: string;
+            borderRadius: string;
+            border: string;
+            borderColor: string;
+            backgroundColor: string;
+            padding: string;
         };
-        hover: {
-            base: CSSObject;
+        disabled: {
+            color: string;
+            backgroundColor: string;
+        };
+        readOnly: {
+            backgroundColor: string;
         };
+        sizes: {
+            medium: {
+                padding: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
+            small: {
+                padding: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
+            tiny: {
+                padding: string;
+                font: {
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontWeight: any;
+                    fontStyle: any;
+                };
+            };
+        };
+    };
+    container: {
+        gap: string;
     };
     general: {
         input: {
@@ -15,14 +61,6 @@ export declare const inputTokens: {
             borderWidth: string;
             borderColor: string;
             textColor: string;
-            font: {
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
-            };
             hover: {
                 backgroundColor: string;
                 borderColor: string;
@@ -48,21 +86,6 @@ export declare const inputTokens: {
     noLabel: {
         base: CSSObject;
     };
-    readOnly: {
-        base: CSSObject;
-    };
-    disabled: {
-        base: CSSObject;
-    };
-    error: {
-        base: CSSObject;
-        hover: {
-            base: CSSObject;
-        };
-        focus: {
-            base: CSSObject;
-        };
-    };
     label: {
         base: CSSObject;
         hover: {

package/dist/cjs/helpers/Input/Input.types.d.ts

@@ -1,8 +1,11 @@
 import { InputHTMLAttributes } from 'react';
 import { Property } from 'csstype';
+export declare type InputSize = 'medium' | 'small' | 'tiny';
 export declare type InputProps = {
     /**Ledetekst for input. */
     label?: string;
+    /**Størrelse på inputfeltet. */
+    componentSize?: InputSize;
     /**Bredde for inputfeltet. */
     width?: Property.Width<string>;
     /**Hjelpetekst. */
@@ -10,11 +13,6 @@ export declare type InputProps = {
     /**Feilmelding. Setter også error state. */
     errorMessage?: string;
 } & InputHTMLAttributes<HTMLInputElement>;
-export declare type LabelPresence = 'hasLabel' | 'noLabel';
-export declare type StyledInputProps = Pick<InputProps, 'readOnly' | 'disabled'> & {
+export declare type StyledInputProps = Pick<InputProps, 'readOnly' | 'disabled' | 'componentSize'> & {
     hasErrorMessage: boolean;
-    hasLabel: LabelPresence;
-};
-export declare type StyledLabelProps = {
-    disabled?: boolean;
 };

package/dist/cjs/helpers/Input/Input.utils.d.ts

@@ -0,0 +1,3 @@
+import { IconSize } from '../../components/Icon';
+import { InputSize } from './Input.types';
+export declare const getFormInputIconSize: (componentSize: InputSize) => IconSize;

package/dist/cjs/helpers/Input/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Input.styles';
 export * from './Input.types';
 export * from './Input.tokens';
+export * from './Input.utils';

package/dist/cjs/helpers/SelectionControl/SelectionControl.styles.d.ts

@@ -0,0 +1,15 @@
+declare type SelectionControlType = 'radio' | 'checkbox';
+declare type CustomSelectionControlProps = {
+    controlType?: SelectionControlType;
+};
+export declare const CustomSelectionControl: import("styled-components").StyledComponent<"span", any, CustomSelectionControlProps, never>;
+declare type ContainerProps = {
+    hasLabel?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    indeterminate?: boolean;
+    controlType: SelectionControlType;
+};
+export declare const Container: import("styled-components").StyledComponent<"label", any, ContainerProps, never>;
+export {};

package/dist/cjs/helpers/SelectionControl/SelectionControl.tokens.d.ts

@@ -0,0 +1,83 @@
+export declare const selectionControlTokens: {
+    selectionControl: {
+        base: {
+            border: string;
+            borderColor: string;
+            backgroundColor: string;
+            borderRadius: string;
+            height: string;
+            width: string;
+        };
+        hover: {
+            base: {
+                backgroundColor: string;
+                boxShadow: string;
+                borderColor: string;
+            };
+            danger: {
+                backgroundColor: string;
+                boxShadow: string;
+                borderColor: string;
+            };
+        };
+        danger: {
+            boxShadow: string;
+            borderColor: string;
+        };
+        disabled: {
+            borderColor: string;
+        };
+        readOnly: {
+            backgroundColor: string;
+        };
+        checked: {
+            base: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+            hover: {
+                backgroundColor: string;
+                boxShadow: string;
+                borderColor: string;
+            };
+            disabled: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+            readOnly: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+        };
+        checkbox: {
+            indeterminate: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+        };
+    };
+    checkmark: {
+        checkbox: {
+            borderColor: string;
+        };
+        radio: {
+            backgroundColor: string;
+            height: string;
+            width: string;
+            left: string;
+            top: string;
+        };
+    };
+    container: {
+        color: string;
+        disabled: {
+            color: string;
+        };
+        withLabel: {
+            paddingLeft: string;
+        };
+        noLabel: {
+            padding: string;
+        };
+    };
+};

package/dist/cjs/helpers/SelectionControl/SelectionControl.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const selectionControlSizeNumberPx = 18;
+export declare const selectionControlSize: string;

package/dist/cjs/helpers/SelectionControl/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SelectionControl.styles';
+export * from './SelectionControl.tokens';
+export * from './SelectionControl.utils';

package/dist/cjs/helpers/styling/hover.d.ts

@@ -5,10 +5,8 @@ export declare const hoverWithBorder: {
 export declare const hoverInputfield: {
     borderColor: string;
     boxShadow: string;
-    backgroundColor: string;
 };
 export declare const hoverDangerInputfield: {
     borderColor: string;
     boxShadow: string;
-    backgroundColor: string;
 };

package/dist/cjs/hooks/useFloatPosition.d.ts

@@ -1,6 +1,26 @@
 import { Strategy } from '@floating-ui/react-dom';
 export declare type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
-export declare const useFloatPosition: (arrowRef: HTMLElement | null, placement?: Placement, offset?: number) => {
+interface UseFloatPositionOptions {
+    /**
+     * Whether to update the position of the floating element on every animation frame if required.
+     * This is optimized for performance but can still be costly.
+     * @default true
+     */
+    animationFrame?: boolean;
+    /**
+     * `offset` is used to displace the floating element from its core placement.
+     * The value passed is logical, meaning its effect on the
+     * physical result is dependent on the writing direction (e.g. RTL).
+     * @default 8
+     */
+    offset?: number;
+    /**
+     * Where to place the floating element relative to its reference element.
+     * @default 'bottom'
+     */
+    placement?: Placement;
+}
+export declare const useFloatPosition: (arrowRef: HTMLElement | null, options?: UseFloatPositionOptions) => {
     reference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
     floating: (node: HTMLElement | null) => void;
     refs: {
@@ -22,3 +42,4 @@ export declare const useFloatPosition: (arrowRef: HTMLElement | null, placement?
         } | undefined;
     };
 };
+export {};

package/dist/cjs/hooks/useIsMounted.d.ts

@@ -0,0 +1,2 @@
+declare const useIsMounted: () => () => boolean;
+export default useIsMounted;