@norges-domstoler/dds-components 22.8.1 → 22.9.0

package/dist/index.d.mts

@@ -3537,9 +3537,11 @@ type HeadingProps = BaseComponentPropsWithChildren<HTMLHeadingElement, {
     level: HeadingLevel;
     /**Spesifiserer typografistil basert på utvalget for HTML heading elementer.  */
     typographyType?: TypographyHeadingType;
+    /**Setter standard spacing for `<Heading>` som er over et inputelement. */
+    withMarginsOverInput?: boolean;
 } & BaseTypographyProps, Omit<HTMLAttributes<HTMLHeadingElement>, 'color'>>;
 declare const Heading: {
-    ({ id, className, style, htmlProps, children, typographyType, level, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
+    ({ id, className, style, htmlProps, children, typographyType, level, withMargins, withMarginsOverInput, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -3561,9 +3563,11 @@ declare const Label: {
 type LegendProps = BaseComponentPropsWithChildren<HTMLLegendElement, BaseTypographyProps & {
     /**Typografistil basert på utvalget for HTML heading elementer.  */
     typographyType?: TypographyHeadingType;
+    /**Setter standard spacing for `<Legend>` som er over et inputelement. */
+    withMarginsOverInput?: boolean;
 }, Omit<HTMLAttributes<HTMLLegendElement>, 'color'>>;
 declare const Legend: {
-    ({ id, className, style, htmlProps, typographyType, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
+    ({ id, className, style, htmlProps, typographyType, withMarginsOverInput, withMargins, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -5008,7 +5012,7 @@ type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
     ref?: SelectForwardRefType<Option, IsMulti>;
 } & CommonInputProps & InputIconProps & Pick<HTMLAttributes<HTMLInputElement>, 'aria-required'> & WrappedReactSelectProps<Option, IsMulti, GroupBase<Option>>;
 type SelectForwardRefType<Option, IsMulti extends boolean> = Ref<SelectInstance<Option, IsMulti, GroupBase<Option>>>;
-declare function Select<Option = unknown, IsMulti extends boolean = false>({ id, label, componentSize, errorMessage, tip, 'aria-required': ariaRequired, readOnly, options, isMulti, value, icon, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, menuPortalTarget, customOptionElement, customSingleValueElement, 'data-testid': dataTestId, onKeyDown, openMenuOnClick, ref, instanceId, afterLabelContent, hideSelectedOptions, ...rest }: SelectProps<Option, IsMulti>): react_jsx_runtime.JSX.Element;
+declare function Select<Option = unknown, IsMulti extends boolean = false>({ id, label, componentSize, errorMessage, tip, 'aria-required': ariaRequired, readOnly, options, isMulti, value, icon, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, menuPortalTarget, menuPlacement, customOptionElement, customSingleValueElement, 'data-testid': dataTestId, onKeyDown, openMenuOnClick, ref, instanceId, afterLabelContent, hideSelectedOptions, ...rest }: SelectProps<Option, IsMulti>): react_jsx_runtime.JSX.Element;
 declare namespace Select {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -3537,9 +3537,11 @@ type HeadingProps = BaseComponentPropsWithChildren<HTMLHeadingElement, {
     level: HeadingLevel;
     /**Spesifiserer typografistil basert på utvalget for HTML heading elementer.  */
     typographyType?: TypographyHeadingType;
+    /**Setter standard spacing for `<Heading>` som er over et inputelement. */
+    withMarginsOverInput?: boolean;
 } & BaseTypographyProps, Omit<HTMLAttributes<HTMLHeadingElement>, 'color'>>;
 declare const Heading: {
-    ({ id, className, style, htmlProps, children, typographyType, level, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
+    ({ id, className, style, htmlProps, children, typographyType, level, withMargins, withMarginsOverInput, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -3561,9 +3563,11 @@ declare const Label: {
 type LegendProps = BaseComponentPropsWithChildren<HTMLLegendElement, BaseTypographyProps & {
     /**Typografistil basert på utvalget for HTML heading elementer.  */
     typographyType?: TypographyHeadingType;
+    /**Setter standard spacing for `<Legend>` som er over et inputelement. */
+    withMarginsOverInput?: boolean;
 }, Omit<HTMLAttributes<HTMLLegendElement>, 'color'>>;
 declare const Legend: {
-    ({ id, className, style, htmlProps, typographyType, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
+    ({ id, className, style, htmlProps, typographyType, withMarginsOverInput, withMargins, ...rest }: LegendProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -5008,7 +5012,7 @@ type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
     ref?: SelectForwardRefType<Option, IsMulti>;
 } & CommonInputProps & InputIconProps & Pick<HTMLAttributes<HTMLInputElement>, 'aria-required'> & WrappedReactSelectProps<Option, IsMulti, GroupBase<Option>>;
 type SelectForwardRefType<Option, IsMulti extends boolean> = Ref<SelectInstance<Option, IsMulti, GroupBase<Option>>>;
-declare function Select<Option = unknown, IsMulti extends boolean = false>({ id, label, componentSize, errorMessage, tip, 'aria-required': ariaRequired, readOnly, options, isMulti, value, icon, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, menuPortalTarget, customOptionElement, customSingleValueElement, 'data-testid': dataTestId, onKeyDown, openMenuOnClick, ref, instanceId, afterLabelContent, hideSelectedOptions, ...rest }: SelectProps<Option, IsMulti>): react_jsx_runtime.JSX.Element;
+declare function Select<Option = unknown, IsMulti extends boolean = false>({ id, label, componentSize, errorMessage, tip, 'aria-required': ariaRequired, readOnly, options, isMulti, value, icon, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, menuPortalTarget, menuPlacement, customOptionElement, customSingleValueElement, 'data-testid': dataTestId, onKeyDown, openMenuOnClick, ref, instanceId, afterLabelContent, hideSelectedOptions, ...rest }: SelectProps<Option, IsMulti>): react_jsx_runtime.JSX.Element;
 declare namespace Select {
     var displayName: string;
 }

package/dist/index.js

@@ -469,9 +469,11 @@ var typographyStyles_default = {
   "heading-xlarge--margins": "typographyStyles_heading-xlarge--margins",
   "heading-xxlarge": "typographyStyles_heading-xxlarge",
   "heading-xxlarge--margins": "typographyStyles_heading-xxlarge--margins",
+  "heading--margins-over-input": "typographyStyles_heading--margins-over-input",
   "label-medium": "typographyStyles_label-medium",
   "label-medium--margins": "typographyStyles_label-medium--margins",
   legend: "typographyStyles_legend",
+  "legend--margins-over-input": "typographyStyles_legend--margins-over-input",
   caption: "typographyStyles_caption",
   "caption--withMargins": "typographyStyles_caption--withMargins",
   bold: "typographyStyles_bold",
@@ -782,6 +784,12 @@ function cn(...classNames) {
 function convertCamelToHyphen(value) {
   return value.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([a-z])([0-9])/g, "$1-$2").toLowerCase();
 }
+function optAttr(value, keepZero) {
+  if (keepZero && value === 0) {
+    return value;
+  }
+  return value ? value : void 0;
+}
 
 // src/utils/getFocusableElements.ts
 function getFocusableElements(elementRef) {
@@ -4325,6 +4333,8 @@ var Heading = ({
   children,
   typographyType,
   level,
+  withMargins,
+  withMarginsOverInput,
   ...rest
 }) => {
   const headingElement = getHeadingElement(level);
@@ -4332,9 +4342,19 @@ var Heading = ({
   return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
     Typography,
     {
-      ...getBaseHTMLProps(id, className, style, htmlProps, rest),
+      ...getBaseHTMLProps(
+        id,
+        cn(
+          className,
+          withMarginsOverInput && typographyStyles_default["heading--margins-over-input"]
+        ),
+        style,
+        htmlProps,
+        rest
+      ),
       typographyType: standardTypographyType,
       as: headingElement,
+      withMargins: optAttr(withMargins || withMarginsOverInput),
       children
     }
   );
@@ -4413,14 +4433,26 @@ var Legend = ({
   style,
   htmlProps,
   typographyType = "headingLarge",
+  withMarginsOverInput,
+  withMargins,
   ...rest
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
     Typography,
     {
-      ...getBaseHTMLProps(id, className, style, htmlProps, rest),
+      ...getBaseHTMLProps(
+        id,
+        cn(
+          className,
+          withMarginsOverInput && typographyStyles_default["legend--margins-over-input"]
+        ),
+        style,
+        htmlProps,
+        rest
+      ),
       as: "legend",
-      typographyType
+      typographyType,
+      withMargins: optAttr(withMargins || withMarginsOverInput)
     }
   );
 };
@@ -11248,9 +11280,9 @@ var getCustomStyles = (size2, hasError, isReadOnly) => ({
       backgroundColor: "var(--dds-color-surface-hover-default)"
     }
   },
-  menu: () => ({
+  menu: (provided) => ({
+    ...provided,
     boxSizing: "border-box",
-    position: "absolute",
     width: "100%",
     boxShadow: "var(--dds-shadow-medium)",
     zIndex: 100,
@@ -11463,6 +11495,7 @@ function Select({
   isClearable = true,
   placeholder,
   menuPortalTarget,
+  menuPlacement = "auto",
   customOptionElement,
   customSingleValueElement,
   "data-testid": dataTestId,
@@ -11558,12 +11591,13 @@ function Select({
     isClearable,
     hideSelectedOptions: hideSelectedOptions ? hideSelectedOptions : false,
     placeholder: placeholder ? placeholder : "",
-    closeMenuOnSelect: closeMenuOnSelect ? closeMenuOnSelect : isMulti ? false : true,
+    closeMenuOnSelect: closeMenuOnSelect ? closeMenuOnSelect : !isMulti,
     isMulti,
     instanceId: instanceId != null ? instanceId : (0, import_react74.useId)(),
     inputId: uniqueId,
     name: uniqueId,
     menuPortalTarget: portalTarget,
+    menuPlacement,
     classNamePrefix: prefix,
     styles: getCustomStyles(componentSize, hasErrorMessage, readOnly),
     filterOption: (option, inputValue) => {