@navikt/ds-react 4.9.0 → 4.9.1

package/_docs.json

@@ -14345,7 +14345,7 @@
       },
       "onToggleSelected": {
         "defaultValue": null,
-        "description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected\n@returns",
+        "description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected - Whether the option has been selected or unselected\n@param isAddedByUser - Whether the option comes from user input, instead of from the list\n@returns",
         "name": "onToggleSelected",
         "parent": {
           "fileName": "react/src/form/combobox/types.ts",
@@ -14359,7 +14359,7 @@
         ],
         "required": false,
         "type": {
-          "name": "((option: string, isSelected: boolean) => void)"
+          "name": "((option: string, isSelected: boolean, isAddedByUser: boolean) => void)"
         }
       },
       "selectedOptions": {
@@ -14798,7 +14798,7 @@
       },
       "onToggleSelected": {
         "defaultValue": null,
-        "description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected\n@returns",
+        "description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected - Whether the option has been selected or unselected\n@param isAddedByUser - Whether the option comes from user input, instead of from the list\n@returns",
         "name": "onToggleSelected",
         "parent": {
           "fileName": "react/src/form/combobox/types.ts",
@@ -14812,7 +14812,7 @@
         ],
         "required": false,
         "type": {
-          "name": "((option: string, isSelected: boolean) => void)"
+          "name": "((option: string, isSelected: boolean, isAddedByUser: boolean) => void)"
         }
       },
       "selectedOptions": {

package/cjs/button/Button.js

@@ -76,7 +76,7 @@ exports.Button = (0, react_1.forwardRef)((_a, ref) => {
             "navds-button--disabled": disabled !== null && disabled !== void 0 ? disabled : widthOverride,
         }), style: Object.assign(Object.assign({}, style), { width: widthOverride }), disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }), widthOverride ? (react_1.default.createElement(__1.Loader, { size: size })) : (react_1.default.createElement(react_1.default.Fragment, null,
         icon && iconPosition === "left" && (react_1.default.createElement("span", { className: "navds-button__icon" }, icon)),
-        children && (react_1.default.createElement(__1.Label, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, children)),
+        children && (react_1.default.createElement(__1.Label, { as: "span", size: size === "medium" ? "medium" : "small" }, children)),
         icon && iconPosition === "right" && (react_1.default.createElement("span", { className: "navds-button__icon" }, icon))))));
 });
 exports.default = exports.Button;

package/cjs/form/combobox/ComboboxWrapper.js

@@ -30,22 +30,26 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize, toggleIsListOpen, toggleListButtonRef, }) => {
     const wrapperRef = (0, react_1.useRef)(null);
+    const [hasFocusWithin, setHasFocusWithin] = (0, react_1.useState)(false);
     function onFocusInsideWrapper(e) {
         var _a;
         if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
             (toggleListButtonRef === null || toggleListButtonRef === void 0 ? void 0 : toggleListButtonRef.current) !== e.target) {
             toggleIsListOpen(true);
+            setHasFocusWithin(true);
         }
     }
     function onBlurWrapper(e) {
         var _a;
         if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
             toggleIsListOpen(false);
+            setHasFocusWithin(false);
         }
     }
     return (react_1.default.createElement("div", { ref: wrapperRef, className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${inputSize}`, "navds-search", {
             "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
-        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper }, children));
+            "navds-combobox--focused": hasFocusWithin,
+        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper, tabIndex: -1 }, children));
 };
 exports.default = ComboboxWrapper;

package/cjs/form/combobox/FilteredOptions/FilteredOptions.js

@@ -11,7 +11,7 @@ const filteredOptionsContext_1 = require("./filteredOptionsContext");
 const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
 const inputContext_1 = require("../Input/inputContext");
 const FilteredOptions = () => {
-    const { inputProps: { id }, size, value, } = (0, inputContext_1.useInputContext)();
+    const { clearInput, inputProps: { id }, size, value, } = (0, inputContext_1.useInputContext)();
     const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isValueNew, toggleIsListOpen, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
     const { isMultiSelect, selectedOptions, toggleOption } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
     return (react_1.default.createElement("ul", { ref: filteredOptionsRef, className: (0, clsx_1.default)("navds-combobox__list", {
@@ -19,7 +19,10 @@ const FilteredOptions = () => {
         }), id: `${id}-filtered-options`, role: "listbox", tabIndex: -1 },
         isLoading && (react_1.default.createElement("li", { className: "navds-combobox__list-item--loading", role: "option", "aria-selected": false, id: `${id}-is-loading` },
             react_1.default.createElement(__1.Loader, { "aria-label": "S\u00F8ker..." }))),
-        isValueNew && allowNewValues && (react_1.default.createElement("li", { tabIndex: -1, onPointerUp: (event) => toggleOption(value, event), id: `${id}-combobox-new-option`, className: (0, clsx_1.default)("navds-combobox__list-item__new-option", {
+        isValueNew && allowNewValues && (react_1.default.createElement("li", { tabIndex: -1, onPointerUp: (event) => {
+                toggleOption(value, event);
+                clearInput(event);
+            }, id: `${id}-combobox-new-option`, className: (0, clsx_1.default)("navds-combobox__list-item__new-option", {
                 "navds-combobox__list-item__new-option--focus": filteredOptionsIndex === -1,
             }), role: "option", "aria-selected": false },
             react_1.default.createElement(aksel_icons_1.PlusIcon, { "aria-hidden": true }),
@@ -36,6 +39,7 @@ const FilteredOptions = () => {
                 "navds-combobox__list-item--selected": selectedOptions.includes(option),
             }), id: `${id}-option-${option.replace(" ", "-")}`, key: option, tabIndex: -1, onPointerUp: (event) => {
                 toggleOption(option, event);
+                clearInput(event);
                 if (!isMultiSelect) {
                     toggleIsListOpen(false);
                 }

package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js

@@ -40,9 +40,10 @@ const SelectedOptionsProvider = ({ children, value, }) => {
     const selectedOptions = (0, react_1.useMemo)(() => externalSelectedOptions !== null && externalSelectedOptions !== void 0 ? externalSelectedOptions : [...customOptions, ...internalSelectedOptions], [customOptions, externalSelectedOptions, internalSelectedOptions]);
     const addSelectedOption = (0, react_1.useCallback)((option) => {
         var _a;
-        if (!options
+        const isAddedByUser = !options
             .map((opt) => opt.toLowerCase())
-            .includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option))) {
+            .includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option));
+        if (isAddedByUser) {
             allowNewValues && addCustomOption(option);
         }
         else if (isMultiSelect) {
@@ -54,16 +55,17 @@ const SelectedOptionsProvider = ({ children, value, }) => {
         else {
             setSelectedOptions([option]);
         }
-        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true);
+        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true, isAddedByUser);
     }, [addCustomOption, allowNewValues, isMultiSelect, onToggleSelected, options]);
     const removeSelectedOption = (0, react_1.useCallback)((option) => {
-        if (customOptions.includes(option)) {
+        const isAddedByUser = customOptions.includes(option);
+        if (isAddedByUser) {
             removeCustomOption(option);
         }
         else {
             setSelectedOptions((prevSelectedOptions) => prevSelectedOptions.filter((selectedOption) => selectedOption !== option));
         }
-        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false);
+        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false, isAddedByUser);
     }, [customOptions, onToggleSelected, removeCustomOption]);
     const toggleOption = (0, react_1.useCallback)((option, event) => {
         if (selectedOptions.includes(option)) {

package/esm/button/Button.js

@@ -47,7 +47,7 @@ export const Button = forwardRef((_a, ref) => {
             "navds-button--disabled": disabled !== null && disabled !== void 0 ? disabled : widthOverride,
         }), style: Object.assign(Object.assign({}, style), { width: widthOverride }), disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }), widthOverride ? (React.createElement(Loader, { size: size })) : (React.createElement(React.Fragment, null,
         icon && iconPosition === "left" && (React.createElement("span", { className: "navds-button__icon" }, icon)),
-        children && (React.createElement(Label, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, children)),
+        children && (React.createElement(Label, { as: "span", size: size === "medium" ? "medium" : "small" }, children)),
         icon && iconPosition === "right" && (React.createElement("span", { className: "navds-button__icon" }, icon))))));
 });
 export default Button;

package/esm/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAwB,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA8CtD;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,MAAM,GACjB,UAAU,CACR,CACE,EAYC,EACD,GAAG,EACH,EAAE;QAdF,EACE,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,OAAO,GAAG,SAAS,EACnB,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,YAAY,GAAG,MAAM,OAEtB,EADI,IAAI,cAXT,0GAYC,CADQ;IAIT,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAU,CAAC;IAE7D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEpE,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,OAAO,EAAE;YACX,MAAM,SAAS,GAAG,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;;gBAClD,gBAAgB,CACd,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,qBAAqB,EAAE,0CAAE,KAAK,CACnD,CAAC;YACJ,CAAC,CAAC,CAAC;YACH,OAAO,GAAG,EAAE;gBACV,gBAAgB,CAAC,SAAS,CAAC,CAAC;gBAC5B,oBAAoB,CAAC,SAAS,CAAC,CAAC;YAClC,CAAC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,MAAM,WAAW,GACf,CAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa,EAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE1D,OAAO,CACL,oBAAC,SAAS,oBACJ,WAAW,IACf,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CACX,SAAS,EACT,cAAc,EACd,iBAAiB,OAAO,EAAE,EAC1B,iBAAiB,IAAI,EAAE,EACvB;YACE,uBAAuB,EAAE,aAAa;YACtC,yBAAyB,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ;YAC9C,wBAAwB,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa;SACpD,CACF,EACD,KAAK,kCACA,KAAK,KACR,KAAK,EAAE,aAAa,KAEtB,QAAQ,EAAE,CAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,aAAa,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,KAErD,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,GAAI,CACvB,CAAC,CAAC,CAAC,CACF;QACG,IAAI,IAAI,YAAY,KAAK,MAAM,IAAI,CAClC,8BAAM,SAAS,EAAC,oBAAoB,IAAE,IAAI,CAAQ,CACnD;QACA,QAAQ,IAAI,CACX,oBAAC,KAAK,IACJ,EAAE,EAAC,MAAM,EACT,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,eAClC,QAAQ,IAEjB,QAAQ,CACH,CACT;QACA,IAAI,IAAI,YAAY,KAAK,OAAO,IAAI,CACnC,8BAAM,SAAS,EAAC,oBAAoB,IAAE,IAAI,CAAQ,CACnD,CACA,CACJ,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEJ,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/button/Button.tsx"],"names":[],"mappings":"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"}

package/esm/form/combobox/ComboboxWrapper.js

@@ -1,24 +1,28 @@
 import cl from "clsx";
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize, toggleIsListOpen, toggleListButtonRef, }) => {
     const wrapperRef = useRef(null);
+    const [hasFocusWithin, setHasFocusWithin] = useState(false);
     function onFocusInsideWrapper(e) {
         var _a;
         if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
             (toggleListButtonRef === null || toggleListButtonRef === void 0 ? void 0 : toggleListButtonRef.current) !== e.target) {
             toggleIsListOpen(true);
+            setHasFocusWithin(true);
         }
     }
     function onBlurWrapper(e) {
         var _a;
         if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
             toggleIsListOpen(false);
+            setHasFocusWithin(false);
         }
     }
     return (React.createElement("div", { ref: wrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${inputSize}`, "navds-search", {
             "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
-        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper }, children));
+            "navds-combobox--focused": hasFocusWithin,
+        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper, tabIndex: -1 }, children));
 };
 export default ComboboxWrapper;
 //# sourceMappingURL=ComboboxWrapper.js.map

package/esm/form/combobox/ComboboxWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxWrapper.js","sourceRoot":"","sources":["../../../src/form/combobox/ComboboxWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AActC,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,mBAAmB,GACE,EAAE,EAAE;IACzB,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEvD,SAAS,oBAAoB,CAAC,CAAC;;QAC7B,IACE,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;YAC9C,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,MAAK,CAAC,CAAC,MAAM,EACzC;YACA,gBAAgB,CAAC,IAAI,CAAC,CAAC;SACxB;IACH,CAAC;IAED,SAAS,aAAa,CAAC,CAAC;;QACtB,IAAI,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA,EAAE;YAClD,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACzB;IACH,CAAC;IAED,OAAO,CACL,6BACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,SAAS,EAAE,EAChC,cAAc,EACd;YACE,qBAAqB,EAAE,QAAQ;YAC/B,wBAAwB,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;SAChD,CACF,EACD,OAAO,EAAE,oBAAoB,EAC7B,MAAM,EAAE,aAAa,IAEpB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ComboboxWrapper.js","sourceRoot":"","sources":["../../../src/form/combobox/ComboboxWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAchD,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,mBAAmB,GACE,EAAE,EAAE;IACzB,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,SAAS,oBAAoB,CAAC,CAAC;;QAC7B,IACE,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;YAC9C,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,MAAK,CAAC,CAAC,MAAM,EACzC;YACA,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;IACH,CAAC;IAED,SAAS,aAAa,CAAC,CAAC;;QACtB,IAAI,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA,EAAE;YAClD,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACxB,iBAAiB,CAAC,KAAK,CAAC,CAAC;SAC1B;IACH,CAAC;IAED,OAAO,CACL,6BACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,SAAS,EAAE,EAChC,cAAc,EACd;YACE,qBAAqB,EAAE,QAAQ;YAC/B,wBAAwB,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;YAC/C,yBAAyB,EAAE,cAAc;SAC1C,CACF,EACD,OAAO,EAAE,oBAAoB,EAC7B,MAAM,EAAE,aAAa,EACrB,QAAQ,EAAE,CAAC,CAAC,IAEX,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/esm/form/combobox/FilteredOptions/FilteredOptions.js

@@ -6,7 +6,7 @@ import { useFilteredOptionsContext } from "./filteredOptionsContext";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { useInputContext } from "../Input/inputContext";
 const FilteredOptions = () => {
-    const { inputProps: { id }, size, value, } = useInputContext();
+    const { clearInput, inputProps: { id }, size, value, } = useInputContext();
     const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isValueNew, toggleIsListOpen, } = useFilteredOptionsContext();
     const { isMultiSelect, selectedOptions, toggleOption } = useSelectedOptionsContext();
     return (React.createElement("ul", { ref: filteredOptionsRef, className: cl("navds-combobox__list", {
@@ -14,7 +14,10 @@ const FilteredOptions = () => {
         }), id: `${id}-filtered-options`, role: "listbox", tabIndex: -1 },
         isLoading && (React.createElement("li", { className: "navds-combobox__list-item--loading", role: "option", "aria-selected": false, id: `${id}-is-loading` },
             React.createElement(Loader, { "aria-label": "S\u00F8ker..." }))),
-        isValueNew && allowNewValues && (React.createElement("li", { tabIndex: -1, onPointerUp: (event) => toggleOption(value, event), id: `${id}-combobox-new-option`, className: cl("navds-combobox__list-item__new-option", {
+        isValueNew && allowNewValues && (React.createElement("li", { tabIndex: -1, onPointerUp: (event) => {
+                toggleOption(value, event);
+                clearInput(event);
+            }, id: `${id}-combobox-new-option`, className: cl("navds-combobox__list-item__new-option", {
                 "navds-combobox__list-item__new-option--focus": filteredOptionsIndex === -1,
             }), role: "option", "aria-selected": false },
             React.createElement(PlusIcon, { "aria-hidden": true }),
@@ -31,6 +34,7 @@ const FilteredOptions = () => {
                 "navds-combobox__list-item--selected": selectedOptions.includes(option),
             }), id: `${id}-option-${option.replace(" ", "-")}`, key: option, tabIndex: -1, onPointerUp: (event) => {
                 toggleOption(option, event);
+                clearInput(event);
                 if (!isMultiSelect) {
                     toggleIsListOpen(false);
                 }

package/esm/form/combobox/FilteredOptions/FilteredOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilteredOptions.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/FilteredOptions.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FilteredOptions.js","sourceRoot":"","sources":["../../../../src/form/combobox/FilteredOptions/FilteredOptions.tsx"],"names":[],"mappings":"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"}

package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js

@@ -11,9 +11,10 @@ export const SelectedOptionsProvider = ({ children, value, }) => {
     const selectedOptions = useMemo(() => externalSelectedOptions !== null && externalSelectedOptions !== void 0 ? externalSelectedOptions : [...customOptions, ...internalSelectedOptions], [customOptions, externalSelectedOptions, internalSelectedOptions]);
     const addSelectedOption = useCallback((option) => {
         var _a;
-        if (!options
+        const isAddedByUser = !options
             .map((opt) => opt.toLowerCase())
-            .includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option))) {
+            .includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option));
+        if (isAddedByUser) {
             allowNewValues && addCustomOption(option);
         }
         else if (isMultiSelect) {
@@ -25,16 +26,17 @@ export const SelectedOptionsProvider = ({ children, value, }) => {
         else {
             setSelectedOptions([option]);
         }
-        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true);
+        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true, isAddedByUser);
     }, [addCustomOption, allowNewValues, isMultiSelect, onToggleSelected, options]);
     const removeSelectedOption = useCallback((option) => {
-        if (customOptions.includes(option)) {
+        const isAddedByUser = customOptions.includes(option);
+        if (isAddedByUser) {
             removeCustomOption(option);
         }
         else {
             setSelectedOptions((prevSelectedOptions) => prevSelectedOptions.filter((selectedOption) => selectedOption !== option));
         }
-        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false);
+        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false, isAddedByUser);
     }, [customOptions, onToggleSelected, removeCustomOption]);
     const toggleOption = useCallback((option, event) => {
         if (selectedOptions.includes(option)) {

package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectedOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/selectedOptionsContext.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"selectedOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/selectedOptionsContext.tsx"],"names":[],"mappings":"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"}

package/esm/form/combobox/types.d.ts

@@ -75,10 +75,11 @@ export interface ComboboxProps extends FormFieldProps, Omit<InputHTMLAttributes<
      * Callback function triggered whenever an option is selected or de-selected
      *
      * @param option
-     * @param isSelected
+     * @param isSelected - Whether the option has been selected or unselected
+     * @param isAddedByUser - Whether the option comes from user input, instead of from the list
      * @returns
      */
-    onToggleSelected?: (option: string, isSelected: boolean) => void;
+    onToggleSelected?: (option: string, isSelected: boolean, isAddedByUser: boolean) => void;
     /**
      * List of selected options.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "4.9.0",
+  "version": "4.9.1",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.9.0",
+    "@navikt/aksel-icons": "^4.9.1",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/button/Button.tsx

@@ -126,11 +126,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
                 <span className="navds-button__icon">{icon}</span>
               )}
               {children && (
-                <Label
-                  as="span"
-                  size={size === "medium" ? "medium" : "small"}
-                  aria-live="polite"
-                >
+                <Label as="span" size={size === "medium" ? "medium" : "small"}>
                   {children}
                 </Label>
               )}

package/src/button/button.stories.tsx

@@ -148,8 +148,9 @@ export const Loading = {
     </div>
   ),
 
-  args: { chromatic: { disableSnapshot: true } },
-  chromatic: { disableSnapshot: true },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };
 
 export const Icon = () => (
@@ -275,6 +276,7 @@ export const LoadingWithAs = {
     </div>
   ),
 
-  args: { chromatic: { disableSnapshot: true } },
-  chromatic: { disableSnapshot: true },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };

package/src/form/combobox/ComboboxWrapper.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 
 type ComboboxWrapperProps = {
   children: any;
@@ -23,6 +23,7 @@ const ComboboxWrapper = ({
   toggleListButtonRef,
 }: ComboboxWrapperProps) => {
   const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const [hasFocusWithin, setHasFocusWithin] = useState(false);
 
   function onFocusInsideWrapper(e) {
     if (
@@ -30,12 +31,14 @@ const ComboboxWrapper = ({
       toggleListButtonRef?.current !== e.target
     ) {
       toggleIsListOpen(true);
+      setHasFocusWithin(true);
     }
   }
 
   function onBlurWrapper(e) {
     if (!wrapperRef.current?.contains(e.relatedTarget)) {
       toggleIsListOpen(false);
+      setHasFocusWithin(false);
     }
   }
 
@@ -50,10 +53,12 @@ const ComboboxWrapper = ({
         {
           "navds-search--error": hasError,
           "navds-search--disabled": !!inputProps.disabled,
+          "navds-combobox--focused": hasFocusWithin,
         }
       )}
       onFocus={onFocusInsideWrapper}
       onBlur={onBlurWrapper}
+      tabIndex={-1}
     >
       {children}
     </div>

package/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -8,6 +8,7 @@ import { useInputContext } from "../Input/inputContext";
 
 const FilteredOptions = () => {
   const {
+    clearInput,
     inputProps: { id },
     size,
     value,
@@ -48,7 +49,10 @@ const FilteredOptions = () => {
       {isValueNew && allowNewValues && (
         <li
           tabIndex={-1}
-          onPointerUp={(event) => toggleOption(value, event)}
+          onPointerUp={(event) => {
+            toggleOption(value, event);
+            clearInput(event);
+          }}
           id={`${id}-combobox-new-option`}
           className={cl("navds-combobox__list-item__new-option", {
             "navds-combobox__list-item__new-option--focus":
@@ -88,6 +92,7 @@ const FilteredOptions = () => {
           tabIndex={-1}
           onPointerUp={(event) => {
             toggleOption(option, event);
+            clearInput(event);
             if (!isMultiSelect) {
               toggleIsListOpen(false);
             }

package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -60,11 +60,10 @@ export const SelectedOptionsProvider = ({
 
   const addSelectedOption = useCallback(
     (option: string) => {
-      if (
-        !options
-          .map((opt) => opt.toLowerCase())
-          .includes(option?.toLowerCase?.())
-      ) {
+      const isAddedByUser = !options
+        .map((opt) => opt.toLowerCase())
+        .includes(option?.toLowerCase?.());
+      if (isAddedByUser) {
         allowNewValues && addCustomOption(option);
       } else if (isMultiSelect) {
         setSelectedOptions((prevSelectedOptions) => [
@@ -74,14 +73,15 @@ export const SelectedOptionsProvider = ({
       } else {
         setSelectedOptions([option]);
       }
-      onToggleSelected?.(option, true);
+      onToggleSelected?.(option, true, isAddedByUser);
     },
     [addCustomOption, allowNewValues, isMultiSelect, onToggleSelected, options]
   );
 
   const removeSelectedOption = useCallback(
     (option: string) => {
-      if (customOptions.includes(option)) {
+      const isAddedByUser = customOptions.includes(option);
+      if (isAddedByUser) {
         removeCustomOption(option);
       } else {
         setSelectedOptions((prevSelectedOptions) =>
@@ -90,7 +90,7 @@ export const SelectedOptionsProvider = ({
           )
         );
       }
-      onToggleSelected?.(option, false);
+      onToggleSelected?.(option, false, isAddedByUser);
     },
     [customOptions, onToggleSelected, removeCustomOption]
   );

package/src/form/combobox/combobox.stories.tsx

@@ -82,6 +82,7 @@ export function MultiSelect(props) {
         label="Komboboks - velg flere"
         options={props.options}
         isMultiSelect={props.isMultiSelect}
+        size={props.size}
       />
     </DemoContainer>
   );
@@ -90,6 +91,7 @@ export function MultiSelect(props) {
 MultiSelect.args = {
   options,
   isMultiSelect: true,
+  size: "medium",
 };
 
 export function MultiSelectWithAddNewOptions(props) {

package/src/form/combobox/types.ts

@@ -78,10 +78,15 @@ export interface ComboboxProps
    * Callback function triggered whenever an option is selected or de-selected
    *
    * @param option
-   * @param isSelected
+   * @param isSelected - Whether the option has been selected or unselected
+   * @param isAddedByUser - Whether the option comes from user input, instead of from the list
    * @returns
    */
-  onToggleSelected?: (option: string, isSelected: boolean) => void;
+  onToggleSelected?: (
+    option: string,
+    isSelected: boolean,
+    isAddedByUser: boolean
+  ) => void;
   /**
    * List of selected options.
    *