✨ Combobox: Mulighet for å begrense hvor mange valg bruker kan ta

.changeset/red-crabs-sell.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+:sparkles: Combobox: Mulighet for å begrense hvor mange valg bruker kan ta

@navikt/core/css/form/combobox.css

@@ -74,7 +74,6 @@
 }
 
 .navds-combobox__input {
-  z-index: 1;
   flex: 1;
   border: none;
   padding: 0;
@@ -208,28 +207,24 @@
   height: 1.25rem;
 }
 
-/* dropdown list */
+/* dropdown & non selectable dropdown items */
 
 .navds-combobox__list {
   max-height: 290px;
   overflow-y: auto;
   position: absolute;
   left: 0;
   right: 0;
-  z-index: 9999;
+  z-index: var(--a-z-index-popover);
   top: calc(100% + var(--a-spacing-2));
-  list-style: none;
-  margin: 0;
   border: 1px solid var(--ac-combobox-list-border-color, var(--a-border-divider));
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  padding: 0;
   box-shadow: var(--a-shadow-small);
   border-radius: var(--a-border-radius-medium);
-  gap: var(--a-spacing-1) 0;
   background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
   color: var(--ac-combobox-list-text, var(--a-text-default));
+  gap: var(--a-spacing-1) 0;
 }
 
 .navds-combobox__list--closed {
@@ -241,34 +236,70 @@
   width: 1.5rem;
 }
 
+.navds-combobox__list_non-selectables {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+
 .navds-combobox__list-item,
-.navds-combobox__list-item__no-options,
-.navds-combobox__list-item__new-option {
+.navds-combobox__list-item--loading,
+.navds-combobox__list-item--no-options,
+.navds-combobox__list-item--new-option,
+.navds-combobox__list-item--max-selected {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: center;
   padding: var(--a-spacing-3);
   width: 100%;
   background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
+  scroll-margin-top: 50px;
 }
 
 .navds-form-field--small .navds-combobox__list-item,
-.navds-form-field--small .navds-combobox__list-item__no-options,
-.navds-form-field--small .navds-combobox__list-item__new-option {
+.navds-form-field--small .navds-combobox__list-item--loading,
+.navds-form-field--small .navds-combobox__list-item--no-options,
+.navds-form-field--small .navds-combobox__list-item--new-option,
+.navds-form-field--small .navds-combobox__list-item--max-selected {
   padding: calc(var(--a-spacing-3) / 2) var(--a-spacing-2);
 }
 
 .navds-combobox__list-item--loading {
-  display: flex;
   justify-content: center;
-  padding: var(--a-spacing-3);
   background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
+}
+
+.navds-combobox__list-item--max-selected {
+  background: var(--ac-combobox-list-item-max-selected-bg, var(--a-surface-info-subtle));
+  border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
+  border-start-end-radius: calc(var(--a-border-radius-medium) - 1px);
+  border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info));
+  margin-bottom: calc(var(--a-spacing-1) * -1);
+}
+
+.navds-combobox__list_non-selectables:hover {
+  cursor: default;
+}
+
+/* ul-list and selectable li-items */
+
+.navds-combobox__list-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   width: 100%;
+  display: inherit;
+  flex-direction: inherit;
+  gap: inherit;
+  background-color: inherit;
+  align-items: flex-start;
 }
 
 .navds-combobox__list-item--focus,
-.navds-combobox__list--with-hover .navds-combobox__list-item:hover {
+.navds-combobox__list--with-hover
+  .navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover {
   background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
   cursor: pointer;
   border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
@@ -280,6 +311,11 @@
   padding-left: calc(var(--a-spacing-2) - 4px);
 }
 
+.navds-combobox__list-item[data-no-focus="true"] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
 .navds-combobox__list-item--selected {
   background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
 }
@@ -295,20 +331,20 @@
   padding-left: calc(var(--a-spacing-3) - 4px);
 }
 
-.navds-combobox__list-item__new-option {
+.navds-combobox__list-item--new-option {
   border-bottom: 1px solid var(--a-border-divider);
   background: var(--a-surface-neutral-subtle);
   cursor: pointer;
   justify-content: flex-start;
   gap: 0.25rem;
 }
 
-.navds-combobox__list--with-hover .navds-combobox__list-item__new-option:hover {
+.navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
   border-bottom: 1px solid var(--a-border-divider);
   background: var(--a-surface-neutral-subtle-hover);
 }
 
-.navds-combobox__list-item__new-option--focus {
+.navds-combobox__list-item--new-option--focus {
   box-shadow:
     var(--a-shadow-focus) inset,
     var(--a-border-action) 0 0 0 5px inset;

@navikt/core/css/tokens.json

@@ -392,6 +392,8 @@
     "--ac-combobox-list-item-loading-bg": "--a-surface-default",
     "--ac-combobox-list-item-hover-border-left": "--a-border-strong",
     "--ac-combobox-list-item-selected-hover-border-left": "--a-border-focus",
+    "--ac-combobox-list-item-max-selected-bg": "--a-surface-info-subtle",
+    "--ac-combobox-list-item-max-selected-border": "--a-border-info",
     "--ac-combobox-error-border": "--a-border-danger"
   },
   "select": {

@navikt/core/react/src/form/combobox/Combobox.tsx

@@ -89,7 +89,7 @@ export const Combobox = forwardRef<
             "navds-combobox__wrapper-inner navds-text-field__input",
             {
               "navds-combobox__wrapper-inner--virtually-unfocused":
-                activeDecendantId !== null,
+                activeDecendantId !== undefined,
             },
           )}
           onClick={focusInput}

@navikt/core/react/src/form/combobox/ComboboxProvider.tsx

@@ -43,6 +43,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
       isMultiSelect,
       onToggleSelected,
       selectedOptions,
+      maxSelected,
       options,
       value,
       onChange,
@@ -71,6 +72,7 @@ const ComboboxProvider = forwardRef<HTMLInputElement, ComboboxProps>(
               allowNewValues,
               isMultiSelect,
               selectedOptions,
+              maxSelected,
               onToggleSelected,
               options,
             }}

@navikt/core/react/src/form/combobox/ComboboxWrapper.tsx

@@ -57,7 +57,6 @@ const ComboboxWrapper = ({
       )}
       onFocus={onFocusInsideWrapper}
       onBlur={onBlurWrapper}
-      tabIndex={-1}
     >
       {children}
     </div>