@norges-domstoler/dds-components 13.3.0 → 13.5.0

package/dist/components/Search/Search.js

@@ -23,7 +23,11 @@ import { Button } from '../Button/Button.js';
 import { Icon } from '../Icon/Icon.js';
 import '../Typography/Typography/Typography.js';
 import { Label } from '../Typography/Label/Label.js';
+import '../Typography/Paragraph/Paragraph.js';
+import '../Typography/Heading/Heading.js';
 import '../Typography/Link/Link.js';
+import '../Typography/Legend/Legend.js';
+import '../Typography/Caption/Caption.js';
 import { getFontStyling } from '../Typography/Typography.utils.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { useAutocompleteSearch } from './AutocompleteSearch.context.js';
@@ -135,11 +139,10 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
   var hasSuggestions = !!context.suggestions;
   var showSearchButton = !!buttonProps && !!onClick;
   return jsxs(OuterContainer, {
-    children: [hasLabel && jsx(Label, Object.assign({
-      htmlFor: uniqueId
-    }, {
+    children: [hasLabel && jsx(Label, {
+      htmlFor: uniqueId,
       children: label
-    })), jsxs("div", {
+    }), jsxs("div", {
       children: [jsxs(HorisontalContainer, Object.assign({
         hasSearchButton: showSearchButton
       }, containerProps, {
@@ -162,12 +165,11 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
               suggestions: context.suggestions,
               showSuggestions: context.showSuggestions,
               componentSize: componentSize
-            }), jsx(VisuallyHidden, Object.assign({
+            }), jsx(VisuallyHidden, {
               id: suggestionsDescriptionId,
-              as: "span"
-            }, {
+              as: "span",
               children: "Bla i s\xF8keforslag med piltaster n\xE5r listen er utvidet."
-            }))]
+            })]
           }), hasValue && jsx(StyledClearButton, {
             icon: CloseSmallIcon,
             size: "tiny",
@@ -185,5 +187,6 @@ var Search = /*#__PURE__*/forwardRef(function (_a, ref) {
     })]
   });
 });
+Search.displayName = 'Search';
 
 export { Search };

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

@@ -1,47 +1,51 @@
-import { SearchProps } from '.';
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("../../helpers").InputProps, "label" | "tip"> & {
-        componentSize?: import("./Search").SearchSize | undefined;
-        buttonProps?: ({
-            onClick: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-            label?: string | undefined;
-            loading?: boolean | undefined;
-        } & import("react").ButtonHTMLAttributes<HTMLButtonElement>) | undefined;
-    } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>> & {
-        AutocompleteWrapper: (props: import("./SearchAutocompleteWrapper").SearchAutocompleteWrapperProps) => JSX.Element;
-        Suggestions: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & Pick<SearchProps, "componentSize"> & {
-            suggestions?: string[] | undefined;
-            showSuggestions?: boolean | undefined;
-            onSuggestionClick?: ((e: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
-            maxSuggestions?: number | undefined;
-            searchId: string;
-        } & {
-            htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-        } & import("react").RefAttributes<HTMLDivElement>>;
-    };
-    argTypes: {
-        tip: {
-            control: {
-                type: string;
-            };
-        };
-        label: {
-            control: {
-                type: string;
-            };
-        };
-    };
-    parameters: {
-        controls: {
-            exclude: string[];
-        };
-    };
-};
-export default _default;
-export declare const Overview: (args: SearchProps) => JSX.Element;
-export declare const OverviewSizes: (args: SearchProps) => JSX.Element;
-export declare const OverviewWithSuggestions: (args: SearchProps) => JSX.Element;
-export declare const Default: (args: SearchProps) => JSX.Element;
-export declare const WithButton: (args: SearchProps) => JSX.Element;
-export declare const WithSuggestions: (args: SearchProps) => JSX.Element;
+/// <reference types="react" />
+import { SearchProps } from '.';
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../helpers").InputProps, "label" | "tip"> & {
+        componentSize?: import("./Search").SearchSize | undefined;
+        buttonProps?: ({
+            onClick: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+            label?: string | undefined;
+            loading?: boolean | undefined;
+        } & import("react").ButtonHTMLAttributes<HTMLButtonElement>) | undefined;
+    } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>> & {
+        AutocompleteWrapper: {
+            (props: import("./SearchAutocompleteWrapper").SearchAutocompleteWrapperProps): import("react/jsx-runtime").JSX.Element;
+            displayName: string;
+        };
+        Suggestions: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & Pick<SearchProps, "componentSize"> & {
+            suggestions?: string[] | undefined;
+            showSuggestions?: boolean | undefined;
+            onSuggestionClick?: ((e: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
+            maxSuggestions?: number | undefined;
+            searchId: string;
+        } & {
+            htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+        } & import("react").RefAttributes<HTMLDivElement>>;
+    };
+    argTypes: {
+        tip: {
+            control: {
+                type: string;
+            };
+        };
+        label: {
+            control: {
+                type: string;
+            };
+        };
+    };
+    parameters: {
+        controls: {
+            exclude: string[];
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OverviewSizes: (args: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OverviewWithSuggestions: (args: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Default: (args: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WithButton: (args: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WithSuggestions: (args: SearchProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,64 +1,64 @@
-import { StaticTypographyType } from '../Typography';
-import { SearchSize } from './Search';
-export declare const typographyTypes: {
-    [k in SearchSize]: StaticTypographyType;
-};
-export declare const searchTokens: {
-    input: {
-        base: {
-            paddingRight: string;
-            paddingLeft: string;
-        };
-        sizes: {
-            small: {
-                paddingTop: string;
-                paddingBottom: string;
-                paddingLeft: string;
-            };
-            medium: {
-                paddingTop: string;
-                paddingBottom: string;
-                paddingLeft: string;
-            };
-            large: {
-                paddingTop: string;
-                paddingBottom: string;
-                paddingLeft: string;
-            };
-        };
-    };
-    searchIcon: {
-        base: {
-            left: string;
-            color: string;
-        };
-        small: {
-            top: string;
-        };
-        medium: {
-            top: string;
-        };
-        large: {
-            top: string;
-        };
-    };
-    clearButton: {
-        right: string;
-        top: string;
-        color: string;
-    };
-    horisontalContainer: {
-        gap: string;
-    };
-    outerContainer: {
-        gap: string;
-    };
-    suggestionsContainer: {
-        marginTop: string;
-        border: string;
-        boxShadow: string;
-    };
-    suggestionsHeader: {
-        paddingLeft: string;
-    };
-};
+import { StaticTypographyType } from '../Typography';
+import { SearchSize } from './Search';
+export declare const typographyTypes: {
+    [k in SearchSize]: StaticTypographyType;
+};
+export declare const searchTokens: {
+    input: {
+        base: {
+            paddingRight: string;
+            paddingLeft: string;
+        };
+        sizes: {
+            small: {
+                paddingTop: string;
+                paddingBottom: string;
+                paddingLeft: string;
+            };
+            medium: {
+                paddingTop: string;
+                paddingBottom: string;
+                paddingLeft: string;
+            };
+            large: {
+                paddingTop: string;
+                paddingBottom: string;
+                paddingLeft: string;
+            };
+        };
+    };
+    searchIcon: {
+        base: {
+            left: string;
+            color: string;
+        };
+        small: {
+            top: string;
+        };
+        medium: {
+            top: string;
+        };
+        large: {
+            top: string;
+        };
+    };
+    clearButton: {
+        right: string;
+        top: string;
+        color: string;
+    };
+    horisontalContainer: {
+        gap: string;
+    };
+    outerContainer: {
+        gap: string;
+    };
+    suggestionsContainer: {
+        marginTop: string;
+        border: string;
+        boxShadow: string;
+    };
+    suggestionsHeader: {
+        paddingLeft: string;
+    };
+};

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

@@ -1,9 +1,9 @@
-import { ChangeEvent } from 'react';
-/**
- * Lager en change-event som kan resette verdien i et input-felt.
- * Dette vil resultere i en event som har: event.target.value = ''.
- *
- * @param inputElementId Id'en til et gitt input-felt
- * @returns En change-event som har en tom streng som target value
- */
-export declare function createEmptyChangeEvent(inputElementId: string): ChangeEvent<HTMLInputElement>;
+import { ChangeEvent } from 'react';
+/**
+ * Lager en change-event som kan resette verdien i et input-felt.
+ * Dette vil resultere i en event som har: event.target.value = ''.
+ *
+ * @param inputElementId Id'en til et gitt input-felt
+ * @returns En change-event som har en tom streng som target value
+ */
+export declare function createEmptyChangeEvent(inputElementId: string): ChangeEvent<HTMLInputElement>;

package/dist/components/Search/Search.utils.js

@@ -1,9 +1,9 @@
-/**
- * Lager en change-event som kan resette verdien i et input-felt.
- * Dette vil resultere i en event som har: event.target.value = ''.
- *
- * @param inputElementId Id'en til et gitt input-felt
- * @returns En change-event som har en tom streng som target value
+/**
+ * Lager en change-event som kan resette verdien i et input-felt.
+ * Dette vil resultere i en event som har: event.target.value = ''.
+ *
+ * @param inputElementId Id'en til et gitt input-felt
+ * @returns En change-event som har en tom streng som target value
  */
 function createEmptyChangeEvent(inputElementId) {
   var inputElement = document.getElementById(inputElementId);

package/dist/components/Search/SearchAutocompleteWrapper.d.ts

@@ -1,31 +1,34 @@
-import { ChangeEvent, ReactNode } from 'react';
-type WeightedValue = {
-    text: string;
-    relevance: number;
-};
-export type WeightedSearchData = {
-    array: WeightedValue[];
-    sortFunction?: (a: WeightedValue, b: WeightedValue) => number;
-};
-export type SearchData = {
-    array: string[];
-    sortFunction?: (a: string, b: string) => number;
-};
-export type SearchAutocompleteWrapperProps = {
-    /**Array med data som kan søkes på og eventuelt tilhørende sorteringsfunksjon. Array kan bestå av elementer av typen `string`  eller objekter med vekt og tekst.*/
-    data?: SearchData | WeightedSearchData;
-    /** Ekstra callback ved `onChange` i `<Search>`. */
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    /**Callback når et forslag blir valgt, inkludert søkefunksjon. */
-    onSuggestionSelection?: () => void;
-    /** Custom filter for forslag. */
-    filter?: (sugestion: string, query: string) => boolean;
-    /**Minst lengde på query når forslag skal vises. */
-    queryLength?: number;
-    /** Barnet til komponenten (`<Search />`). */
-    children?: ReactNode;
-    /**Initielle `value` i `<Search>`. */
-    value?: string;
-};
-export declare const SearchAutocompleteWrapper: (props: SearchAutocompleteWrapperProps) => JSX.Element;
-export {};
+import { ChangeEvent, ReactNode } from 'react';
+type WeightedValue = {
+    text: string;
+    relevance: number;
+};
+export type WeightedSearchData = {
+    array: WeightedValue[];
+    sortFunction?: (a: WeightedValue, b: WeightedValue) => number;
+};
+export type SearchData = {
+    array: string[];
+    sortFunction?: (a: string, b: string) => number;
+};
+export type SearchAutocompleteWrapperProps = {
+    /**Array med data som kan søkes på og eventuelt tilhørende sorteringsfunksjon. Array kan bestå av elementer av typen `string`  eller objekter med vekt og tekst.*/
+    data?: SearchData | WeightedSearchData;
+    /** Ekstra callback ved `onChange` i `<Search>`. */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    /**Callback når et forslag blir valgt, inkludert søkefunksjon. */
+    onSuggestionSelection?: () => void;
+    /** Custom filter for forslag. */
+    filter?: (sugestion: string, query: string) => boolean;
+    /**Minst lengde på query når forslag skal vises. */
+    queryLength?: number;
+    /** Barnet til komponenten (`<Search />`). */
+    children?: ReactNode;
+    /**Initielle `value` i `<Search>`. */
+    value?: string;
+};
+export declare const SearchAutocompleteWrapper: {
+    (props: SearchAutocompleteWrapperProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/Search/SearchAutocompleteWrapper.js

@@ -106,11 +106,11 @@ var SearchAutocompleteWrapper = function SearchAutocompleteWrapper(props) {
     inputValue: inputValue,
     onSugggestionClick: handleSuggestionClick
   };
-  return jsx(AutocompleteSearchContext.Provider, Object.assign({
-    value: contextProps
-  }, {
+  return jsx(AutocompleteSearchContext.Provider, {
+    value: contextProps,
     children: children
-  }));
+  });
 };
+SearchAutocompleteWrapper.displayName = 'SearchAutocompleteWrapper';
 
 export { SearchAutocompleteWrapper };

package/dist/components/Search/SearchSuggestions.d.ts

@@ -1,29 +1,29 @@
-import { SearchProps } from './Search';
-import { BaseComponentProps } from '../../types';
-import { MouseEvent } from 'react';
-export type SearchSuggestionsProps = BaseComponentProps<HTMLDivElement, Pick<SearchProps, 'componentSize'> & {
-    /**Forslag som vises i listen. */
-    suggestions?: string[];
-    /** Om listen skal vises. */
-    showSuggestions?: boolean;
-    /**Callback når et forslag blir valgt, inkludert søkefunksjon. */
-    onSuggestionClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-    /** Maks antall forslag vist i listen. */
-    maxSuggestions?: number;
-    /**Id til `<Search>`. */
-    searchId: string;
-}>;
-export declare const SearchSuggestions: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & Pick<SearchProps, "componentSize"> & {
-    /**Forslag som vises i listen. */
-    suggestions?: string[] | undefined;
-    /** Om listen skal vises. */
-    showSuggestions?: boolean | undefined;
-    /**Callback når et forslag blir valgt, inkludert søkefunksjon. */
-    onSuggestionClick?: ((e: MouseEvent<HTMLButtonElement>) => void) | undefined;
-    /** Maks antall forslag vist i listen. */
-    maxSuggestions?: number | undefined;
-    /**Id til `<Search>`. */
-    searchId: string;
-} & {
-    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
+import { SearchProps } from './Search';
+import { BaseComponentProps } from '../../types';
+import { MouseEvent } from 'react';
+export type SearchSuggestionsProps = BaseComponentProps<HTMLDivElement, Pick<SearchProps, 'componentSize'> & {
+    /**Forslag som vises i listen. */
+    suggestions?: string[];
+    /** Om listen skal vises. */
+    showSuggestions?: boolean;
+    /**Callback når et forslag blir valgt, inkludert søkefunksjon. */
+    onSuggestionClick?: (e: MouseEvent<HTMLButtonElement>) => void;
+    /** Maks antall forslag vist i listen. */
+    maxSuggestions?: number;
+    /**Id til `<Search>`. */
+    searchId: string;
+}>;
+export declare const SearchSuggestions: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & Pick<SearchProps, "componentSize"> & {
+    /**Forslag som vises i listen. */
+    suggestions?: string[] | undefined;
+    /** Om listen skal vises. */
+    showSuggestions?: boolean | undefined;
+    /**Callback når et forslag blir valgt, inkludert søkefunksjon. */
+    onSuggestionClick?: ((e: MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /** Maks antall forslag vist i listen. */
+    maxSuggestions?: number | undefined;
+    /**Id til `<Search>`. */
+    searchId: string;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Search/SearchSuggestions.js

@@ -20,9 +20,14 @@ import { derivativeIdGenerator } from '../../utils/idGenerator.js';
 import '../../utils/color.js';
 import '../../hooks/useScreenSize.js';
 import { Typography } from '../Typography/Typography/Typography.js';
-import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import '../Typography/Label/Label.js';
+import '../Typography/Paragraph/Paragraph.js';
+import '../Typography/Heading/Heading.js';
 import '../Typography/Link/Link.js';
+import '../Typography/Legend/Legend.js';
+import '../Typography/Caption/Caption.js';
 import { getFontStyling } from '../Typography/Typography.utils.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../ScrollableContainer/Scrollbar.js';
 import '../ScrollableContainer/ScrollableContainer.js';
 import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
@@ -75,14 +80,12 @@ var SearchSuggestions = /*#__PURE__*/forwardRef(function (props, ref) {
     focus = _useRoveFocus2[0],
     setFocus = _useRoveFocus2[1];
   var suggestionsToRender = maxSuggestions ? suggestions === null || suggestions === void 0 ? void 0 : suggestions.slice(maxSuggestions) : suggestions;
-  var renderedSuggestions = jsx(SuggestionsList, Object.assign({
+  var renderedSuggestions = jsx(SuggestionsList, {
     role: "listbox",
-    "aria-labelledby": suggestionsHeaderId
-  }, {
+    "aria-labelledby": suggestionsHeaderId,
     children: suggestionsToRender.map(function (suggestion, index) {
-      return jsx("li", Object.assign({
-        role: "option"
-      }, {
+      return jsx("li", {
+        role: "option",
         children: jsx(MenuItem, {
           index: index,
           focus: focus === index && showSuggestions,
@@ -94,23 +97,22 @@ var SearchSuggestions = /*#__PURE__*/forwardRef(function (props, ref) {
           "aria-posinset": index,
           size: componentSize
         })
-      }), index);
+      }, index);
     })
-  }));
+  });
   var isHidden = !showSuggestions;
   return jsxs(SuggestionsContainer, Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest), {
     ref: ref,
     isHidden: isHidden,
-    "aria-hidden": isHidden
-  }, {
-    children: [jsx(SuggestionsHeader, Object.assign({
+    "aria-hidden": isHidden,
+    children: [jsx(SuggestionsHeader, {
       typographyType: "supportingStyleTiny01",
       forwardedAs: "span",
-      id: suggestionsHeaderId
-    }, {
+      id: suggestionsHeaderId,
       children: "S\xF8keforslag"
-    })), renderedSuggestions]
+    }), renderedSuggestions]
   }));
 });
+SearchSuggestions.displayName = 'SearchSuggestions';
 
 export { SearchSuggestions };

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

@@ -1,10 +1,10 @@
-import { Search as BaseSearch, SearchProps, SearchSize } from './Search';
-import { SearchAutocompleteWrapper, SearchAutocompleteWrapperProps, SearchData, WeightedSearchData } from './SearchAutocompleteWrapper';
-import { SearchSuggestions, SearchSuggestionsProps } from './SearchSuggestions';
-type SearchCompoundProps = typeof BaseSearch & {
-    AutocompleteWrapper: typeof SearchAutocompleteWrapper;
-    Suggestions: typeof SearchSuggestions;
-};
-declare const Search: SearchCompoundProps;
-export { Search };
-export type { SearchProps, SearchSize, SearchData, WeightedSearchData, SearchAutocompleteWrapperProps, SearchSuggestionsProps, };
+import { Search as BaseSearch, SearchProps, SearchSize } from './Search';
+import { SearchAutocompleteWrapper, SearchAutocompleteWrapperProps, SearchData, WeightedSearchData } from './SearchAutocompleteWrapper';
+import { SearchSuggestions, SearchSuggestionsProps } from './SearchSuggestions';
+type SearchCompoundProps = typeof BaseSearch & {
+    AutocompleteWrapper: typeof SearchAutocompleteWrapper;
+    Suggestions: typeof SearchSuggestions;
+};
+declare const Search: SearchCompoundProps;
+export { Search };
+export type { SearchProps, SearchSize, SearchData, WeightedSearchData, SearchAutocompleteWrapperProps, SearchSuggestionsProps, };