@norges-domstoler/dds-components 9.0.1 → 9.1.1

package/dist/bundle.css

@@ -59,6 +59,36 @@
     url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
 }
 
+@font-face {
+  font-family: IBM Plex Mono;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('IBM Plex Mono'), local('IBMPlexMono'),
+    url('../assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexMono-Regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Mono;
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
+    url('../assets/fonts/IBMPlexMono-Light.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexMono-Light.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Mono;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
+    url('../assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexMono-SemiBold.woff') format('woff');
+}
+
 @import '~@norges-domstoler/dds-design-tokens/dist/css/colors.css';
 
 *::selection {

package/dist/cjs/bundle.css

@@ -59,6 +59,36 @@
     url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
 }
 
+@font-face {
+  font-family: IBM Plex Mono;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('IBM Plex Mono'), local('IBMPlexMono'),
+    url('../assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexMono-Regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Mono;
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
+    url('../assets/fonts/IBMPlexMono-Light.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexMono-Light.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Mono;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
+    url('../assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexMono-SemiBold.woff') format('woff');
+}
+
 @import '~@norges-domstoler/dds-design-tokens/dist/css/colors.css';
 
 *::selection {

package/dist/cjs/components/FileUploader/ErrorList.d.ts

@@ -0,0 +1,9 @@
+declare type ErrorListProps = {
+    errors: {
+        id: string | undefined;
+        message: string;
+    }[];
+};
+export declare const MessageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorList: (props: ErrorListProps) => JSX.Element | null;
+export {};

package/dist/cjs/components/FileUploader/File.d.ts

@@ -0,0 +1,10 @@
+import { FileUploaderFile } from './fileUploaderReducer';
+declare type FileProps = {
+    parentId: string;
+    index: number;
+    isValid: boolean;
+    file: FileUploaderFile;
+    removeFile: () => void;
+};
+export declare const File: (props: FileProps) => JSX.Element;
+export {};

package/dist/cjs/components/FileUploader/FileUploader.d.ts

@@ -0,0 +1,19 @@
+import { FileList } from './types';
+import { FileUploaderHookProps } from './useFileUploader';
+import { Property } from 'csstype';
+declare type FileUploaderProps = {
+    /**Id til filopplasteren. */
+    id?: string;
+    /**Ledetekst for filopplaster. */
+    label?: string;
+    /**Hjelpetekst. */
+    tip?: string;
+    /**Om det er påkrevd med minst en fil. */
+    required?: boolean;
+    /**Callback for når fil-listen endres. */
+    onChange: (newFiles: FileList) => void;
+    /**Bredde for filopplasteren. */
+    width?: Property.Width<string>;
+} & Pick<FileUploaderHookProps, 'initialFiles' | 'accept' | 'maxFiles' | 'disabled'>;
+export declare const FileUploader: (props: FileUploaderProps) => JSX.Element;
+export {};

package/dist/cjs/components/FileUploader/FileUploader.stories.d.ts

@@ -0,0 +1,25 @@
+declare const _default: {
+    title: string;
+    component: (props: {
+        id?: string | undefined;
+        label?: string | undefined;
+        tip?: string | undefined;
+        required?: boolean | undefined;
+        onChange: (newFiles: import("./types").FileList) => void;
+        width?: import("csstype").Property.Width<string> | undefined;
+    } & Pick<import("./useFileUploader").FileUploaderHookProps, "disabled" | "accept" | "initialFiles" | "maxFiles">) => JSX.Element;
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: () => JSX.Element;

package/dist/cjs/components/FileUploader/FileUploader.tokens.d.ts

@@ -0,0 +1,25 @@
+export declare const rootTokens: {
+    borderColor: string;
+    borderColorError: string;
+    paddingLeftRightTop: string;
+    paddingBottom: string;
+    gap: string;
+    backgroundColor: string;
+    dragActive: {
+        borderColor: string;
+        backgroundColor: string;
+    };
+};
+export declare const fileTokens: {
+    marginTop: string;
+    paddingLeftRight: string;
+    paddingTopBottom: string;
+    backgroundColor: string;
+    textToIconsGap: string;
+    invalid: {
+        borderColor: string;
+    };
+};
+export declare const errorsTokens: {
+    gap: string;
+};

package/dist/cjs/components/FileUploader/fileUploaderReducer.d.ts

@@ -0,0 +1,35 @@
+import { FileWithPath } from 'file-selector';
+import { Reducer } from 'react';
+export declare type FileUploaderFile = {
+    file: FileWithPath;
+    errors: string[];
+};
+declare type FileChangePayload = {
+    rootErrors: RootErrorList;
+    files: FileUploaderFile[];
+};
+export declare type RootErrorList = string[];
+export declare type FileUploaderAction = {
+    type: 'focus';
+} | {
+    type: 'blur';
+} | {
+    type: 'dragEnter';
+} | {
+    type: 'dragLeave';
+} | {
+    type: 'onSetFiles';
+    payload: FileChangePayload;
+} | {
+    type: 'onRemoveFile';
+    payload: FileChangePayload;
+};
+export declare type FileUploaderState = {
+    files: FileUploaderFile[];
+    isFocused: boolean;
+    isFileDialogActive: boolean;
+    isDragActive: boolean;
+    rootErrors: string[];
+};
+export declare const fileUploaderReducer: Reducer<FileUploaderState, FileUploaderAction>;
+export {};

package/dist/cjs/components/FileUploader/index.d.ts

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

package/dist/cjs/components/FileUploader/types.d.ts

@@ -0,0 +1,10 @@
+declare type FileExtensionAccept = `.${string}`;
+declare type AnyMimeType = '*';
+declare type ImageMimeType = 'png' | 'jpeg' | 'bmp' | 'gif' | 'svg+xml' | 'tiff' | 'webp';
+declare type VideoMimeType = 'x-msvideo' | 'mp4' | 'mpeg' | 'ogg' | 'mp2t' | 'webm' | '3gpp' | '3gpp2';
+declare type AudioMimeType = 'aac' | 'midi' | 'x-midi' | 'mpeg' | 'ogg' | 'opus' | 'wav' | 'webm' | '3gpp' | '3gpp2';
+declare type ApplicationMimeType = 'octet-stream' | 'msword' | 'vnd.openxmlformats-officedocument.wordprocessingml.document' | 'epub+zip' | 'gzip' | 'java-archive' | 'json' | 'vnd.oasis.opendocument.presentation' | 'vnd.oasis.opendocument.spreadsheet' | 'vnd.oasis.opendocument.text' | 'pdf' | 'vnd.ms-powerpoint' | 'vnd.openxmlformats-officedocument.presentationml.presentation' | 'rtf' | 'x-sh' | 'x-tar' | 'vnd.visio' | 'xhtml+xml' | 'vnd.ms-excel' | 'vnd.openxmlformats-officedocument.spreadsheetml.sheet' | 'xml' | 'vnd.mozilla.xul+xml' | 'zip';
+declare type MimeType = `image/${ImageMimeType | AnyMimeType}` | `video/${VideoMimeType | AnyMimeType}` | `audio/${AudioMimeType | AnyMimeType}` | `application/${ApplicationMimeType}`;
+export declare type Accept = MimeType | FileExtensionAccept;
+export declare type FileList = File[];
+export {};

package/dist/cjs/components/FileUploader/useFileUploader.d.ts

@@ -0,0 +1,27 @@
+import React, { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, Ref } from 'react';
+import { FileUploaderFile } from './fileUploaderReducer';
+import { Accept, FileList } from './types';
+export declare type FileUploaderHookProps = {
+    id?: string;
+    /**Dersom komponenten styres utenfra. En liste over filer som skal være med ved første render. */
+    initialFiles?: FileList;
+    /**Hvilke filendelser eller mime-typer som filopplasteren skal akseptere. */
+    accept?: Accept[];
+    /**Om filopplasteren er avslått eller ikke */
+    disabled?: boolean;
+    /**Maks antall filer som tillates. */
+    maxFiles?: number;
+};
+export declare const useFileUploader: <TRootElement extends HTMLElement>(props: FileUploaderHookProps) => {
+    state: import("./fileUploaderReducer").FileUploaderState;
+    getRootProps: () => React.HTMLAttributes<TRootElement> & {
+        ref: React.Ref<TRootElement>;
+    };
+    getInputProps: () => InputHTMLAttributes<HTMLInputElement> & {
+        ref: Ref<HTMLInputElement>;
+    };
+    getButtonProps: () => ButtonHTMLAttributes<HTMLButtonElement> & {
+        ref: Ref<HTMLButtonElement>;
+    };
+    removeFile: (file: FileUploaderFile) => void;
+};

package/dist/cjs/components/FileUploader/utils.d.ts

@@ -0,0 +1,6 @@
+export declare const preventDefaults: (event: React.BaseSyntheticEvent) => void;
+export declare const isDragEvent: (event: unknown) => event is import("react").DragEvent<unknown>;
+export declare const isEventWithFiles: (event: React.DragEvent<unknown> | React.ChangeEvent<HTMLInputElement>) => boolean;
+export declare const isFileAccepted: (file: File, accept: string[] | undefined) => boolean;
+export declare const getTooManyFilesErrorMessage: (maxFiles: number) => string;
+export declare const getInvalidFileTypeErrorMessage: () => string;

package/dist/cjs/index.js

@@ -6199,7 +6199,6 @@ var SelectInner = function SelectInner(props, ref) {
       NoOptionsMessage: DDSNoOptionsMessage,
       Input: function Input(props) {
         return DDSInput(Object.assign(Object.assign({}, props), {
-          required: required,
           'aria-required': ariaRequired
         }), hasErrorMessage, spaceSeparatedIdListGenerator([singleValueId, tip ? tipId : undefined, errorMessage ? errorMessageId : undefined]));
       },

package/dist/components/FileUploader/ErrorList.d.ts

@@ -0,0 +1,9 @@
+declare type ErrorListProps = {
+    errors: {
+        id: string | undefined;
+        message: string;
+    }[];
+};
+export declare const MessageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorList: (props: ErrorListProps) => JSX.Element | null;
+export {};

package/dist/components/FileUploader/File.d.ts

@@ -0,0 +1,10 @@
+import { FileUploaderFile } from './fileUploaderReducer';
+declare type FileProps = {
+    parentId: string;
+    index: number;
+    isValid: boolean;
+    file: FileUploaderFile;
+    removeFile: () => void;
+};
+export declare const File: (props: FileProps) => JSX.Element;
+export {};

package/dist/components/FileUploader/FileUploader.d.ts

@@ -0,0 +1,19 @@
+import { FileList } from './types';
+import { FileUploaderHookProps } from './useFileUploader';
+import { Property } from 'csstype';
+declare type FileUploaderProps = {
+    /**Id til filopplasteren. */
+    id?: string;
+    /**Ledetekst for filopplaster. */
+    label?: string;
+    /**Hjelpetekst. */
+    tip?: string;
+    /**Om det er påkrevd med minst en fil. */
+    required?: boolean;
+    /**Callback for når fil-listen endres. */
+    onChange: (newFiles: FileList) => void;
+    /**Bredde for filopplasteren. */
+    width?: Property.Width<string>;
+} & Pick<FileUploaderHookProps, 'initialFiles' | 'accept' | 'maxFiles' | 'disabled'>;
+export declare const FileUploader: (props: FileUploaderProps) => JSX.Element;
+export {};

package/dist/components/FileUploader/FileUploader.stories.d.ts

@@ -0,0 +1,25 @@
+declare const _default: {
+    title: string;
+    component: (props: {
+        id?: string | undefined;
+        label?: string | undefined;
+        tip?: string | undefined;
+        required?: boolean | undefined;
+        onChange: (newFiles: import("./types").FileList) => void;
+        width?: import("csstype").Property.Width<string> | undefined;
+    } & Pick<import("./useFileUploader").FileUploaderHookProps, "disabled" | "accept" | "initialFiles" | "maxFiles">) => JSX.Element;
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+            };
+        };
+        size: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: () => JSX.Element;

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

@@ -0,0 +1,25 @@
+export declare const rootTokens: {
+    borderColor: string;
+    borderColorError: string;
+    paddingLeftRightTop: string;
+    paddingBottom: string;
+    gap: string;
+    backgroundColor: string;
+    dragActive: {
+        borderColor: string;
+        backgroundColor: string;
+    };
+};
+export declare const fileTokens: {
+    marginTop: string;
+    paddingLeftRight: string;
+    paddingTopBottom: string;
+    backgroundColor: string;
+    textToIconsGap: string;
+    invalid: {
+        borderColor: string;
+    };
+};
+export declare const errorsTokens: {
+    gap: string;
+};

package/dist/components/FileUploader/fileUploaderReducer.d.ts

@@ -0,0 +1,35 @@
+import { FileWithPath } from 'file-selector';
+import { Reducer } from 'react';
+export declare type FileUploaderFile = {
+    file: FileWithPath;
+    errors: string[];
+};
+declare type FileChangePayload = {
+    rootErrors: RootErrorList;
+    files: FileUploaderFile[];
+};
+export declare type RootErrorList = string[];
+export declare type FileUploaderAction = {
+    type: 'focus';
+} | {
+    type: 'blur';
+} | {
+    type: 'dragEnter';
+} | {
+    type: 'dragLeave';
+} | {
+    type: 'onSetFiles';
+    payload: FileChangePayload;
+} | {
+    type: 'onRemoveFile';
+    payload: FileChangePayload;
+};
+export declare type FileUploaderState = {
+    files: FileUploaderFile[];
+    isFocused: boolean;
+    isFileDialogActive: boolean;
+    isDragActive: boolean;
+    rootErrors: string[];
+};
+export declare const fileUploaderReducer: Reducer<FileUploaderState, FileUploaderAction>;
+export {};

package/dist/components/FileUploader/index.d.ts

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

package/dist/components/FileUploader/types.d.ts

@@ -0,0 +1,10 @@
+declare type FileExtensionAccept = `.${string}`;
+declare type AnyMimeType = '*';
+declare type ImageMimeType = 'png' | 'jpeg' | 'bmp' | 'gif' | 'svg+xml' | 'tiff' | 'webp';
+declare type VideoMimeType = 'x-msvideo' | 'mp4' | 'mpeg' | 'ogg' | 'mp2t' | 'webm' | '3gpp' | '3gpp2';
+declare type AudioMimeType = 'aac' | 'midi' | 'x-midi' | 'mpeg' | 'ogg' | 'opus' | 'wav' | 'webm' | '3gpp' | '3gpp2';
+declare type ApplicationMimeType = 'octet-stream' | 'msword' | 'vnd.openxmlformats-officedocument.wordprocessingml.document' | 'epub+zip' | 'gzip' | 'java-archive' | 'json' | 'vnd.oasis.opendocument.presentation' | 'vnd.oasis.opendocument.spreadsheet' | 'vnd.oasis.opendocument.text' | 'pdf' | 'vnd.ms-powerpoint' | 'vnd.openxmlformats-officedocument.presentationml.presentation' | 'rtf' | 'x-sh' | 'x-tar' | 'vnd.visio' | 'xhtml+xml' | 'vnd.ms-excel' | 'vnd.openxmlformats-officedocument.spreadsheetml.sheet' | 'xml' | 'vnd.mozilla.xul+xml' | 'zip';
+declare type MimeType = `image/${ImageMimeType | AnyMimeType}` | `video/${VideoMimeType | AnyMimeType}` | `audio/${AudioMimeType | AnyMimeType}` | `application/${ApplicationMimeType}`;
+export declare type Accept = MimeType | FileExtensionAccept;
+export declare type FileList = File[];
+export {};

package/dist/components/FileUploader/useFileUploader.d.ts

@@ -0,0 +1,27 @@
+import React, { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, Ref } from 'react';
+import { FileUploaderFile } from './fileUploaderReducer';
+import { Accept, FileList } from './types';
+export declare type FileUploaderHookProps = {
+    id?: string;
+    /**Dersom komponenten styres utenfra. En liste over filer som skal være med ved første render. */
+    initialFiles?: FileList;
+    /**Hvilke filendelser eller mime-typer som filopplasteren skal akseptere. */
+    accept?: Accept[];
+    /**Om filopplasteren er avslått eller ikke */
+    disabled?: boolean;
+    /**Maks antall filer som tillates. */
+    maxFiles?: number;
+};
+export declare const useFileUploader: <TRootElement extends HTMLElement>(props: FileUploaderHookProps) => {
+    state: import("./fileUploaderReducer").FileUploaderState;
+    getRootProps: () => React.HTMLAttributes<TRootElement> & {
+        ref: React.Ref<TRootElement>;
+    };
+    getInputProps: () => InputHTMLAttributes<HTMLInputElement> & {
+        ref: Ref<HTMLInputElement>;
+    };
+    getButtonProps: () => ButtonHTMLAttributes<HTMLButtonElement> & {
+        ref: Ref<HTMLButtonElement>;
+    };
+    removeFile: (file: FileUploaderFile) => void;
+};

package/dist/components/FileUploader/utils.d.ts

@@ -0,0 +1,6 @@
+export declare const preventDefaults: (event: React.BaseSyntheticEvent) => void;
+export declare const isDragEvent: (event: unknown) => event is import("react").DragEvent<unknown>;
+export declare const isEventWithFiles: (event: React.DragEvent<unknown> | React.ChangeEvent<HTMLInputElement>) => boolean;
+export declare const isFileAccepted: (file: File, accept: string[] | undefined) => boolean;
+export declare const getTooManyFilesErrorMessage: (maxFiles: number) => string;
+export declare const getInvalidFileTypeErrorMessage: () => string;

package/dist/components/Select/Select.js

@@ -195,7 +195,6 @@ var SelectInner = function SelectInner(props, ref) {
       NoOptionsMessage: DDSNoOptionsMessage,
       Input: function Input(props) {
         return DDSInput(Object.assign(Object.assign({}, props), {
-          required: required,
           'aria-required': ariaRequired
         }), hasErrorMessage, spaceSeparatedIdListGenerator([singleValueId, tip ? tipId : undefined, errorMessage ? errorMessageId : undefined]));
       },

package/dist/styles/fontStyles.css

@@ -58,3 +58,33 @@
     url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
     url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
 }
+
+@font-face {
+  font-family: IBM Plex Mono;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('IBM Plex Mono'), local('IBMPlexMono'),
+    url('../assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexMono-Regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Mono;
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('IBM Plex Mono Light'), local('IBMPlexMono-Light'),
+    url('../assets/fonts/IBMPlexMono-Light.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexMono-Light.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Mono;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: local('IBM Plex Mono SemiBold'), local('IBMPlexMono-SemiBold'),
+    url('../assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexMono-SemiBold.woff') format('woff');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "9.0.1",
+  "version": "9.1.1",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -116,6 +116,8 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^1.0.0",
+    "attr-accept": "^2.2.2",
+    "file-selector": "^0.6.0",
     "focus-visible": "^5.2.0",
     "react-select": "^5.4.0",
     "tslib": "^2.4.0"