@norges-domstoler/dds-components 1.0.1 → 2.0.0

package/dist/components/RadioButton/RadioButtonGroup.tokens.d.ts

@@ -1,5 +1,19 @@
+import { CSSObject } from 'styled-components';
 export declare const radioButtonGroupTokens: {
     label: {
         spaceLeft: string;
     };
+    container: {
+        base: CSSObject;
+    };
+    groupContainer: {
+        direction: {
+            row: {
+                base: CSSObject;
+            };
+            column: {
+                base: CSSObject;
+            };
+        };
+    };
 };

package/dist/components/Select/Select.d.ts

@@ -2,21 +2,16 @@ import * as CSS from 'csstype';
 import React from 'react';
 import { GroupBase, Props as ReactSelectProps, SelectInstance } from 'react-select';
 export declare function searchFilter(text: string, search: string): boolean;
-export declare type SelectOption = {
-    label: string;
-    value: string | number;
-    data?: unknown;
-};
-export declare type SelectProps<IsMulti extends boolean> = {
+export declare type SelectProps<TOption, IsMulti extends boolean> = {
     label?: string;
     required?: boolean;
     readOnly?: boolean;
     errorMessage?: string;
     tip?: string;
-    width?: CSS.WidthProperty<string>;
+    width?: CSS.Property.Width<string>;
     className?: string;
     style?: React.CSSProperties;
-} & ReactSelectProps<SelectOption, IsMulti, GroupBase<SelectOption>>;
-declare type ForwardRefType<IsMulti extends boolean> = React.ForwardedRef<SelectInstance<SelectOption, IsMulti, GroupBase<SelectOption>>>;
-export declare const Select: <IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, ...rest }: SelectProps<IsMulti>, ref: ForwardRefType<IsMulti>) => JSX.Element;
+} & ReactSelectProps<TOption, IsMulti, GroupBase<TOption>>;
+declare type ForwardRefType<TOption, IsMulti extends boolean> = React.ForwardedRef<SelectInstance<TOption, IsMulti, GroupBase<TOption>>>;
+export declare const Select: <TOption, IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, ...rest }: SelectProps<TOption, IsMulti>, ref: ForwardRefType<TOption, IsMulti>) => JSX.Element;
 export {};

package/dist/components/Select/Select.styles.d.ts

@@ -1,6 +1,6 @@
+/// <reference types="react" />
 import { GroupBase, StylesConfig } from 'react-select';
 import { IconWrapper } from '../../helpers/IconWrapper';
-import { SelectOption } from './Select';
 export declare const prefix = "dds-select";
 export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 declare type StyledContainerProps = {
@@ -15,5 +15,5 @@ export declare const Wrapper: import("styled-components").StyledComponent<"div",
     width?: string | number | undefined;
 }, never>;
 export declare const SelectedIconWrapper: import("styled-components").StyledComponent<typeof IconWrapper, any, {}, never>;
-export declare const CustomStyles: Partial<StylesConfig<SelectOption, boolean, GroupBase<SelectOption>>>;
+export declare const getCustomStyles: <TOption>() => Partial<StylesConfig<TOption, boolean, GroupBase<TOption>>>;
 export {};

package/dist/components/Select/Select.tokens.d.ts

@@ -1,9 +1,10 @@
 import { CSSObject } from 'styled-components';
+import * as CSS from 'csstype';
 export declare const multiValueContainerMinHeight: string;
 export declare const selectTokens: {
     container: {
         base: CSSObject;
-        defaultWidth: string;
+        defaultWidth: CSS.Property.Width<string>;
         hover: {
             base: CSSObject;
         };
@@ -49,7 +50,7 @@ export declare const selectTokens: {
     placeholder: {
         base: CSSObject;
     };
-    optionsList: {
+    menu: {
         base: CSSObject;
         spaceTop: number;
     };

package/dist/components/SkipToContent/SkipToContent.d.ts

@@ -3,10 +3,10 @@ import * as CSS from 'csstype';
 export declare type SkipToContentProps = {
     text?: string;
     href: string;
-    top?: CSS.TopProperty<string | number>;
+    top?: CSS.Property.Top<string | number>;
 } & HTMLAttributes<HTMLAnchorElement>;
 export declare const SkipToContent: import("react").ForwardRefExoticComponent<{
     text?: string | undefined;
     href: string;
-    top?: CSS.TopProperty<string | number> | undefined;
+    top?: CSS.Property.Top<string | number> | undefined;
 } & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/components/Spinner/Spinner.d.ts

@@ -3,6 +3,6 @@ import * as CSS from 'csstype';
 import { TextColor } from '../Typography';
 export declare type SpinnerProps = {
     color?: TextColor | string;
-    size?: CSS.WidthProperty<string>;
+    size?: CSS.Property.Width<string>;
 } & HTMLAttributes<SVGElement>;
 export declare function Spinner({ size, color, ...rest }: SpinnerProps): JSX.Element;

package/dist/components/Table/Cell.tokens.d.ts

@@ -15,6 +15,9 @@ export declare const cellTokens: {
             icon: {
                 base: CSSObject;
             };
+            focus: {
+                base: CSSObject;
+            };
         };
     };
     data: {

package/dist/components/Table/Row.tokens.d.ts

@@ -17,6 +17,9 @@ export declare const rowTokens: {
         hover: {
             base: CSSObject;
         };
+        focus: {
+            base: CSSObject;
+        };
         mode: {
             sum: {
                 base: CSSObject;

package/dist/components/TextInput/TextInput.d.ts

@@ -5,7 +5,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     style?: React.CSSProperties | undefined;
 } & {
     label?: string | undefined;
-    width?: string | undefined;
+    width?: import("csstype").Property.Width<string> | undefined;
     tip?: string | undefined;
     errorMessage?: string | undefined;
 } & React.InputHTMLAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/TextInput/TextInput.styles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TextInputProps } from './TextInput.types';
 export declare const TextArea: import("styled-components").StyledComponent<"textarea", any, Pick<import("../../helpers/Input").InputProps, "label" | "readOnly" | "disabled"> & {
     hasErrorMessage: boolean;

package/dist/components/TextInput/TextInput.tokens.d.ts

@@ -1,4 +1,5 @@
 import { CSSObject } from 'styled-components';
+import * as CSS from 'csstype';
 export declare const textInputTokens: {
     general: {
         input: {
@@ -49,7 +50,7 @@ export declare const textInputTokens: {
         };
     };
     wrapper: {
-        defaultWidth: string;
+        defaultWidth: CSS.Property.Width<string>;
     };
     container: {
         multiline: {

package/dist/components/Tooltip/Tooltip.tokens.d.ts

@@ -11,11 +11,4 @@ export declare const tooltipTokens: {
             fill: string;
         };
     };
-    arrowPlacementTemplate: {
-        top: string;
-        bottom: string;
-        left: string;
-        right: string;
-    };
-    offset: number;
 };

package/dist/helpers/Chevron/AnimatedChevronUpDown.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 import * as CSS from 'csstype';
 declare type SvgChevronProps = {
     isUp?: boolean;
-    height?: CSS.HeightProperty<string>;
-    width?: CSS.WidthProperty<string>;
+    height?: CSS.Property.Height<string>;
+    width?: CSS.Property.Width<string>;
 };
 export declare const AnimatedChevronUpDown: ({ isUp, height, width }: SvgChevronProps) => JSX.Element;
 export {};

package/dist/helpers/IconWrapper/IconWrapper.d.ts

@@ -1,11 +1,11 @@
-import { SvgIconTypeMap } from '@material-ui/core/SvgIcon';
-import { OverridableComponent } from '@material-ui/core/OverridableComponent';
+import { SvgIconTypeMap } from '@mui/material/SvgIcon';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
 import { HTMLAttributes } from 'react';
 import * as CSS from 'csstype';
 export declare type IconSize = 'small' | 'medium' | 'large' | 'inline';
 export declare type IconWrapperProps = {
     Icon: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
     iconSize?: IconSize;
-    color?: CSS.ColorProperty;
+    color?: CSS.Property.Color;
 } & HTMLAttributes<SVGElement>;
 export declare function IconWrapper({ Icon, iconSize, color, className, style, ...rest }: IconWrapperProps): JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { InputProps, StyledInputProps, StyledLabelProps } from './Input.types';
 export declare const inputStyling: ({ readOnly, label, disabled, hasErrorMessage }: StyledInputProps) => import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
 export declare const Input: import("styled-components").StyledComponent<"input", any, Pick<InputProps, "readOnly" | "label" | "disabled"> & {

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

@@ -2,7 +2,7 @@ import { InputHTMLAttributes } from 'react';
 import * as CSS from 'csstype';
 export declare type InputProps = {
     label?: string;
-    width?: CSS.WidthProperty<string>;
+    width?: CSS.Property.Width<string>;
     tip?: string;
     errorMessage?: string;
 } & InputHTMLAttributes<HTMLInputElement>;

package/dist/helpers/InputMessage/InputMessage.d.ts

@@ -1,9 +1,10 @@
+import * as CSS from 'csstype';
 import { HTMLAttributes } from 'react';
 declare type MessageType = 'error' | 'tip';
 export declare const InputMessage: import("react").ForwardRefExoticComponent<{
     message: string;
     messageType: MessageType;
-    maxWidth?: string | undefined;
+    maxWidth?: CSS.Property.MaxWidth<string> | undefined;
     messageId?: string | undefined;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/helpers/InputMessage/InputMessage.tokens.d.ts

@@ -1,8 +1,9 @@
 import { CSSObject } from 'styled-components';
+import * as CSS from 'csstype';
 export declare const inputMessageTokens: {
     padding: string;
     base: CSSObject;
-    defaultMaxWidth: string;
+    defaultMaxWidth: CSS.Property.MaxWidth<string>;
     tip: {
         base: CSSObject;
     };

package/dist/helpers/Paper/Paper.d.ts

@@ -0,0 +1 @@
+export declare const Paper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/helpers/Paper/Paper.tokens.d.ts

@@ -0,0 +1,4 @@
+import { CSSObject } from 'styled-components';
+export declare const paperTokens: {
+    base: CSSObject;
+};

package/dist/helpers/Paper/index.d.ts

@@ -0,0 +1 @@
+export * from './Paper';

package/dist/helpers/RequiredMarker.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare function RequiredMarker(): JSX.Element;
 export default RequiredMarker;

package/dist/helpers/styling/danger.d.ts

@@ -0,0 +1,4 @@
+export declare const dangerInputfield: {
+    borderColor: string;
+    boxShadow: string;
+};

package/dist/helpers/styling/focus.d.ts

@@ -0,0 +1,9 @@
+export declare const focusInputfield: {
+    outline: string;
+    borderColor: string;
+    boxShadow: string;
+};
+export declare const focusDangerInputfield: {
+    borderColor: string;
+    boxShadow: string;
+};

package/dist/helpers/styling/focusVisible.d.ts

@@ -0,0 +1,35 @@
+export declare const outlineOffset = "2px";
+export declare const focusVisible: {
+    outline: string;
+    outlineOffset: string;
+};
+export declare const focusVisibleOnDark: {
+    outline: string;
+    outlineOffset: string;
+};
+export declare const focusVisibleLink: {
+    outline: string;
+    backgroundColor: string;
+    color: string;
+    textDecoration: string;
+};
+export declare const focusVisibleLinkOnDark: {
+    outline: string;
+    backgroundColor: string;
+    color: string;
+    textDecoration: string;
+};
+export declare const focusVisibleWithBorder: {
+    outline: string;
+    borderColor: string;
+    boxShadow: string;
+};
+export declare const focusVisibleThickWithBorderOnDark: {
+    outline: string;
+    borderColor: string;
+    boxShadow: string;
+};
+export declare const focusVisibleInset: {
+    outline: string;
+    boxShadow: string;
+};

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

@@ -0,0 +1,14 @@
+export declare const hoverWithBorder: {
+    borderColor: string;
+    boxShadow: string;
+};
+export declare const hoverInputfield: {
+    borderColor: string;
+    boxShadow: string;
+    backgroundColor: string;
+};
+export declare const hoverDangerInputfield: {
+    borderColor: string;
+    boxShadow: string;
+    backgroundColor: string;
+};

package/dist/helpers/styling/index.d.ts

@@ -1,2 +1,6 @@
 export * from './removeButtonStyling';
 export * from './visibilityTransition';
+export * from './focusVisible';
+export * from './hover';
+export * from './focus';
+export * from './danger';

package/dist/hooks/index.d.ts

@@ -1,7 +1,8 @@
 export * from './useCombinedRefs';
 export * from './useOnClickOutside';
 export * from './useOnKeyDown';
-export * from './useReactPopper';
+export * from './useFloatPosition';
 export * from './useRoveFocus';
 export * from './useFocusTrap';
 export * from './useMountTransition';
+export * from './useId';

package/dist/hooks/useFloatPosition.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+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) => {
+    reference: (node: (Element | import("@floating-ui/core").VirtualElement) | null) => void;
+    floating: (node: HTMLElement | null) => void;
+    refs: {
+        reference: import("react").MutableRefObject<(Element | import("@floating-ui/core").VirtualElement) | null>;
+        floating: import("react").MutableRefObject<HTMLElement | null>;
+    };
+    styles: {
+        floating: {
+            position: Strategy;
+            top: string | number;
+            left: string | number;
+        };
+        arrow: {
+            [x: string]: string | number;
+            position: Strategy;
+            top: string | number;
+            left: string | number;
+            transform: string;
+        } | undefined;
+    };
+};

package/dist/hooks/useFocusTrap.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function useFocusTrap<T extends HTMLElement>(active: boolean): import("react").RefObject<T>;

package/dist/hooks/useId.d.ts

@@ -0,0 +1 @@
+export declare function useId(prefix: string, suffix?: string): string;

package/dist/index.css

@@ -58,3 +58,10 @@
     url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
     url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
 }
+
+@import '~@norges-domstoler/dds-design-tokens/dist/css/colors.css';
+
+*::selection {
+  background-color: var(--dds-color-tertiary-lightest);
+  color: var(--dds-color-neutrals-gray-9);
+}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import 'focus-visible';
 import './styles/fontStyles.css';
+import './styles/selection.css';
 export * from './components/RadioButton';
 export * from './components/Checkbox';
 export * from './components/Button';
@@ -23,4 +24,6 @@ export * from './components/Datepicker';
 export * from './components/SkipToContent';
 export * from './components/Tooltip';
 export * from './components/Modal';
+export * from './components/Drawer';
+export * from './components/OverflowMenu';
 export * from './components/Popover';

package/dist/index.es.css

@@ -58,3 +58,10 @@
     url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
     url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
 }
+
+@import '~@norges-domstoler/dds-design-tokens/dist/css/colors.css';
+
+*::selection {
+  background-color: var(--dds-color-tertiary-lightest);
+  color: var(--dds-color-neutrals-gray-9);
+}