@navikt/ds-react 0.14.9 → 0.14.10-next.0

package/cjs/form/search-field/SearchField.js

@@ -33,37 +33,58 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchFieldContext = void 0;
+const ds_icons_1 = require("@navikt/ds-icons");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
+const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
 const __1 = require("../..");
-const ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
-const useFormField_1 = require("../useFormField");
-const SearchFieldButton_1 = __importDefault(require("./SearchFieldButton"));
-const SearchFieldClearButton_1 = __importDefault(require("./SearchFieldClearButton"));
-const SearchFieldInput_1 = __importDefault(require("./SearchFieldInput"));
-exports.SearchFieldContext = react_1.default.createContext(null);
+const useSearchField_1 = require("./useSearchField");
 const SearchField = (0, react_1.forwardRef)((props, ref) => {
-    const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "searchfield");
-    const { className, hideLabel, children, label, description, error } = props, rest = __rest(props, ["className", "hideLabel", "children", "label", "description", "error"]);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref }, (0, __1.omit)(rest, ["id", "error", "errorId", "size", "disabled"]), { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size !== null && size !== void 0 ? size : "medium"}`, "navds-search-field", {
-            "navds-search-field--error": hasError,
+    const { inputProps, size, inputDescriptionId } = (0, useSearchField_1.useSearchField)(props, "searchfield");
+    const { className, hideLabel, label, description, value, clearButtonLabel, onClear, inverted = false, clearButton = true } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "inverted", "clearButton"]);
+    const [controlledValue, setControlledValue] = (0, react_1.useState)(value !== null && value !== void 0 ? value : "");
+    const searchRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, react_merge_refs_1.default)([searchRef, ref]);
+    const [wrapperRef, setWrapperRef] = (0, react_1.useState)(null);
+    const handleChange = (0, react_1.useCallback)((v) => {
+        var _a;
+        if (searchRef.current && value === undefined) {
+            searchRef.current.value = v;
+            setControlledValue(v);
+        }
+        (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
+    }, [props, value]);
+    const handleClear = (0, react_1.useCallback)(() => {
+        var _a, _b;
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+        handleChange("");
+        searchRef.current && ((_b = (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a));
+    }, [handleChange, onClear]);
+    (0, __1.useEventListener)("keydown", (0, react_1.useCallback)((e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            handleClear();
+        }
+    }, [handleClear]), wrapperRef);
+    (0, react_1.useEffect)(() => {
+        value !== undefined && setControlledValue(value);
+    }, [value]);
+    return (react_1.default.createElement("div", { ref: setWrapperRef, className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size !== null && size !== void 0 ? size : "medium"}`, "navds-search-field", {
             "navds-search-field--disabled": !!inputProps.disabled,
-        }) }),
+            "navds-search-field--inverted": inverted,
+        }) },
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-text-field__label", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
             }) }, label),
         !!description && (react_1.default.createElement(__1.BodyShort, { as: "div", className: (0, classnames_1.default)("navds-text-field__description", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
-        react_1.default.createElement("div", { className: "navds-search-field__input-wrapper" },
-            react_1.default.createElement(exports.SearchFieldContext.Provider, { value: {
-                    inputProps,
-                    size,
-                } }, children)),
-        react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(ErrorMessage_1.default, { size: size }, error))));
+        react_1.default.createElement("div", { "data-value": !!controlledValue, className: "navds-search-field__input-wrapper" },
+            react_1.default.createElement("span", { className: "navds-search-field__input-icon" },
+                react_1.default.createElement(ds_icons_1.Search, { "aria-hidden": true })),
+            react_1.default.createElement("input", Object.assign({ ref: mergedRef }, (0, __1.omit)(rest, ["size"]), inputProps, (props.value !== undefined && { value: props.value }), { onChange: (e) => handleChange(e.target.value), type: "search", role: "searchbox", className: (0, classnames_1.default)(className, "navds-search-field__input", "navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`) })),
+            controlledValue && clearButton && (react_1.default.createElement("button", { onClick: () => handleClear(), className: "navds-search-field__clear-button" },
+                react_1.default.createElement("span", { className: "navds-sr-only" }, clearButtonLabel ? clearButtonLabel : "Slett tekst i felt"),
+                react_1.default.createElement(ds_icons_1.Close, { "aria-hidden": true }))))));
 });
-SearchField.Button = SearchFieldButton_1.default;
-SearchField.Clear = SearchFieldClearButton_1.default;
-SearchField.Input = SearchFieldInput_1.default;
 exports.default = SearchField;

package/cjs/form/search-field/useSearchField.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchField = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const index_1 = require("../../index");
+const index_2 = require("../index");
+const useSearchField = (props, prefix) => {
+    var _a, _b;
+    const { size } = props;
+    const fieldset = (0, react_1.useContext)(index_2.FieldsetContext);
+    const genId = (0, index_1.useId)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${prefix}-${genId}`;
+    const inputDescriptionId = `${prefix}-description-${genId}`;
+    const disabled = (fieldset === null || fieldset === void 0 ? void 0 : fieldset.disabled) || props.disabled;
+    return {
+        inputDescriptionId,
+        size: (_b = size !== null && size !== void 0 ? size : fieldset === null || fieldset === void 0 ? void 0 : fieldset.size) !== null && _b !== void 0 ? _b : "medium",
+        inputProps: {
+            id,
+            "aria-describedby": (0, classnames_1.default)(props["aria-describedby"], {
+                [inputDescriptionId]: !!(props === null || props === void 0 ? void 0 : props.description),
+            }) || undefined,
+            disabled,
+        },
+    };
+};
+exports.useSearchField = useSearchField;

package/cjs/util/index.js

@@ -10,10 +10,24 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.omit = void 0;
+exports.useEventListener = exports.omit = void 0;
+const react_1 = require("react");
 __exportStar(require("./OverridableComponent"), exports);
 __exportStar(require("./useId"), exports);
 const omit = (obj, props) => Object.entries(obj)
     .filter(([key]) => !props.includes(key))
     .reduce((obj, [key, value]) => (Object.assign(Object.assign({}, obj), { [key]: value })), {});
 exports.omit = omit;
+/* https://github.com/streamich/react-use/blob/master/src/useEvent.ts */
+const useEventListener = (name, handler, target = window) => {
+    (0, react_1.useEffect)(() => {
+        if (!target) {
+            return;
+        }
+        target === null || target === void 0 ? void 0 : target.addEventListener(name, handler);
+        return () => {
+            target === null || target === void 0 ? void 0 : target.addEventListener(name, handler);
+        };
+    }, [name, handler, target]);
+};
+exports.useEventListener = useEventListener;

package/esm/form/search-field/SearchField.d.ts

@@ -1,23 +1,6 @@
-import React from "react";
+import React, { InputHTMLAttributes } from "react";
 import { FormFieldProps } from "../useFormField";
-import { SearchFieldButtonType } from "./SearchFieldButton";
-import { SearchFieldClearButtonType } from "./SearchFieldClearButton";
-import { SearchFieldInputType } from "./SearchFieldInput";
-export interface SearchFieldContextProps {
-    inputProps: {
-        id: string;
-        "aria-invalid": boolean;
-        "aria-describedby"?: string;
-        disabled?: boolean;
-    };
-    size?: "medium" | "small";
-}
-export declare const SearchFieldContext: React.Context<SearchFieldContextProps | null>;
-export interface SearchFieldProps extends FormFieldProps, React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * SearchFieldInput & SearchFieldButton
-     */
-    children: React.ReactNode;
+export interface SearchFieldProps extends Omit<FormFieldProps, "error" | "errorId">, Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
     /**
      * If enabled shows the label and description for screenreaders only
      */
@@ -26,11 +9,28 @@ export interface SearchFieldProps extends FormFieldProps, React.HTMLAttributes<H
      * SearchField label
      */
     label: React.ReactNode;
+    /**
+     * Inverts color theme
+     * @default false
+     */
+    inverted?: boolean;
+    /**
+     * Customize aria-label on clear button
+     * @default "Slett tekst i felt"
+     */
+    clearButtonLabel?: string;
+    /**
+     * Callback for when user manually clears input with button or Escape
+     */
+    onClear?: () => void;
+    /**
+     * Callback for value in input after change
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Toggles display of "clear"-button when there is text in field
+     */
+    clearButton?: boolean;
 }
-interface SearchFieldComponent extends React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLDivElement>> {
-    Button: SearchFieldButtonType;
-    Clear: SearchFieldClearButtonType;
-    Input: SearchFieldInputType;
-}
-declare const SearchField: SearchFieldComponent;
+declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default SearchField;

package/esm/form/search-field/SearchField.js

@@ -9,37 +9,59 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { Close, Search } from "@navikt/ds-icons";
 import cl from "classnames";
-import React, { forwardRef } from "react";
-import { BodyShort, Label, omit } from "../..";
-import ErrorMessage from "../ErrorMessage";
-import { useFormField } from "../useFormField";
-import SearchFieldButton from "./SearchFieldButton";
-import SearchFieldClearButton from "./SearchFieldClearButton";
-import SearchFieldInput from "./SearchFieldInput";
-export const SearchFieldContext = React.createContext(null);
+import React, { forwardRef, useCallback, useEffect, useRef, useState, } from "react";
+import mergeRefs from "react-merge-refs";
+import { BodyShort, Label, omit, useEventListener } from "../..";
+import { useSearchField } from "./useSearchField";
 const SearchField = forwardRef((props, ref) => {
-    const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = useFormField(props, "searchfield");
-    const { className, hideLabel, children, label, description, error } = props, rest = __rest(props, ["className", "hideLabel", "children", "label", "description", "error"]);
-    return (React.createElement("div", Object.assign({ ref: ref }, omit(rest, ["id", "error", "errorId", "size", "disabled"]), { className: cl(className, "navds-form-field", `navds-form-field--${size !== null && size !== void 0 ? size : "medium"}`, "navds-search-field", {
-            "navds-search-field--error": hasError,
+    const { inputProps, size, inputDescriptionId } = useSearchField(props, "searchfield");
+    const { className, hideLabel, label, description, value, clearButtonLabel, onClear, inverted = false, clearButton = true } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "inverted", "clearButton"]);
+    const [controlledValue, setControlledValue] = useState(value !== null && value !== void 0 ? value : "");
+    const searchRef = useRef(null);
+    const mergedRef = mergeRefs([searchRef, ref]);
+    const [wrapperRef, setWrapperRef] = useState(null);
+    const handleChange = useCallback((v) => {
+        var _a;
+        if (searchRef.current && value === undefined) {
+            searchRef.current.value = v;
+            setControlledValue(v);
+        }
+        (_a = props === null || props === void 0 ? void 0 : props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
+    }, [props, value]);
+    const handleClear = useCallback(() => {
+        var _a, _b;
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+        handleChange("");
+        searchRef.current && ((_b = (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a));
+    }, [handleChange, onClear]);
+    useEventListener("keydown", useCallback((e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            handleClear();
+        }
+    }, [handleClear]), wrapperRef);
+    useEffect(() => {
+        value !== undefined && setControlledValue(value);
+    }, [value]);
+    return (React.createElement("div", { ref: setWrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${size !== null && size !== void 0 ? size : "medium"}`, "navds-search-field", {
             "navds-search-field--disabled": !!inputProps.disabled,
-        }) }),
+            "navds-search-field--inverted": inverted,
+        }) },
         React.createElement(Label, { htmlFor: inputProps.id, size: size, as: "label", className: cl("navds-text-field__label", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
             }) }, label),
         !!description && (React.createElement(BodyShort, { as: "div", className: cl("navds-text-field__description", {
-                "sr-only": hideLabel,
+                "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
-        React.createElement("div", { className: "navds-search-field__input-wrapper" },
-            React.createElement(SearchFieldContext.Provider, { value: {
-                    inputProps,
-                    size,
-                } }, children)),
-        React.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && React.createElement(ErrorMessage, { size: size }, error))));
+        React.createElement("div", { "data-value": !!controlledValue, className: "navds-search-field__input-wrapper" },
+            React.createElement("span", { className: "navds-search-field__input-icon" },
+                React.createElement(Search, { "aria-hidden": true })),
+            React.createElement("input", Object.assign({ ref: mergedRef }, omit(rest, ["size"]), inputProps, (props.value !== undefined && { value: props.value }), { onChange: (e) => handleChange(e.target.value), type: "search", role: "searchbox", className: cl(className, "navds-search-field__input", "navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`) })),
+            controlledValue && clearButton && (React.createElement("button", { onClick: () => handleClear(), className: "navds-search-field__clear-button" },
+                React.createElement("span", { className: "navds-sr-only" }, clearButtonLabel ? clearButtonLabel : "Slett tekst i felt"),
+                React.createElement(Close, { "aria-hidden": true }))))));
 });
-SearchField.Button = SearchFieldButton;
-SearchField.Clear = SearchFieldClearButton;
-SearchField.Input = SearchFieldInput;
 export default SearchField;
 //# sourceMappingURL=SearchField.js.map

package/esm/form/search-field/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../../../src/form/search-field/SearchField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAkB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,iBAA4C,MAAM,qBAAqB,CAAC;AAC/E,OAAO,sBAEN,MAAM,0BAA0B,CAAC;AAClC,OAAO,gBAA0C,MAAM,oBAAoB,CAAC;AAY5E,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CACnD,IAAI,CACL,CAAC;AA4BF,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,kBAAkB,GACnB,GAAG,YAAY,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAEvC,MAAM,EACJ,SAAS,EACT,SAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,KAEH,KAAK,EADJ,IAAI,UACL,KAAK,EARH,uEAQL,CAAQ,CAAC;IAEV,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,IACJ,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,IAC9D,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,EAAE,EACvC,oBAAoB,EACpB;YACE,2BAA2B,EAAE,QAAQ;YACrC,8BAA8B,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;SACtD,CACF;QAED,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;gBACvC,SAAS,EAAE,SAAS;aACrB,CAAC,IAED,KAAK,CACA;QACP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE;gBAC7C,SAAS,EAAE,SAAS;aACrB,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,IAET,WAAW,CACF,CACb;QACD,6BAAK,SAAS,EAAC,mCAAmC;YAChD,oBAAC,kBAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;oBACL,UAAU;oBACV,IAAI;iBACL,IAEA,QAAQ,CACmB,CAC1B;QACN,6BAAK,EAAE,EAAE,OAAO,mBAAgB,oBAAoB,eAAW,QAAQ,IACpE,YAAY,IAAI,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,IAAG,KAAK,CAAgB,CAC7D,CACF,CACP,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,WAAW,CAAC,MAAM,GAAG,iBAAiB,CAAC;AACvC,WAAW,CAAC,KAAK,GAAG,sBAAsB,CAAC;AAC3C,WAAW,CAAC,KAAK,GAAG,gBAAgB,CAAC;AAErC,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../../../src/form/search-field/SearchField.tsx"],"names":[],"mappings":"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"}

package/esm/form/search-field/useSearchField.d.ts

@@ -0,0 +1,10 @@
+import { FormFieldProps } from "../useFormField";
+export declare const useSearchField: (props: FormFieldProps, prefix: string) => {
+    inputDescriptionId: string;
+    size: "small" | "medium";
+    inputProps: {
+        id: string;
+        "aria-describedby": string | undefined;
+        disabled: boolean | undefined;
+    };
+};

package/esm/form/search-field/useSearchField.js

@@ -0,0 +1,25 @@
+import cl from "classnames";
+import { useContext } from "react";
+import { useId } from "../../index";
+import { FieldsetContext } from "../index";
+export const useSearchField = (props, prefix) => {
+    var _a, _b;
+    const { size } = props;
+    const fieldset = useContext(FieldsetContext);
+    const genId = useId();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${prefix}-${genId}`;
+    const inputDescriptionId = `${prefix}-description-${genId}`;
+    const disabled = (fieldset === null || fieldset === void 0 ? void 0 : fieldset.disabled) || props.disabled;
+    return {
+        inputDescriptionId,
+        size: (_b = size !== null && size !== void 0 ? size : fieldset === null || fieldset === void 0 ? void 0 : fieldset.size) !== null && _b !== void 0 ? _b : "medium",
+        inputProps: {
+            id,
+            "aria-describedby": cl(props["aria-describedby"], {
+                [inputDescriptionId]: !!(props === null || props === void 0 ? void 0 : props.description),
+            }) || undefined,
+            disabled,
+        },
+    };
+};
+//# sourceMappingURL=useSearchField.js.map

package/esm/form/search-field/useSearchField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSearchField.js","sourceRoot":"","sources":["../../../src/form/search-field/useSearchField.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAqB,EAAE,MAAc,EAAE,EAAE;;IACtE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEvB,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE7C,MAAM,KAAK,GAAG,KAAK,EAAE,CAAC;IAEtB,MAAM,EAAE,GAAG,MAAA,KAAK,CAAC,EAAE,mCAAI,GAAG,MAAM,IAAI,KAAK,EAAE,CAAC;IAC5C,MAAM,kBAAkB,GAAG,GAAG,MAAM,gBAAgB,KAAK,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,KAAI,KAAK,CAAC,QAAQ,CAAC;IAEtD,OAAO;QACL,kBAAkB;QAClB,IAAI,EAAE,MAAA,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,mCAAI,QAAQ;QACxC,UAAU,EAAE;YACV,EAAE;YACF,kBAAkB,EAChB,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,EAAE;gBAC5B,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAA;aAC3C,CAAC,IAAI,SAAS;YACjB,QAAQ;SACT;KACF,CAAC;AACJ,CAAC,CAAC"}

package/esm/util/index.d.ts

@@ -1,3 +1,8 @@
 export * from "./OverridableComponent";
 export * from "./useId";
 export declare const omit: (obj: object, props: string[]) => {};
+export interface ListenerT {
+    addEventListener(name: string, handler: (event?: any) => void, ...args: any[]): any;
+    removeEventListener(name: string, handler: (event?: any) => void, ...args: any[]): any;
+}
+export declare const useEventListener: <T extends ListenerT>(name: Parameters<ListenerT["addEventListener"]>[0], handler: Parameters<ListenerT["addEventListener"]>[1], target?: Window | T | null) => void;

package/esm/util/index.js

@@ -1,6 +1,19 @@
+import { useEffect } from "react";
 export * from "./OverridableComponent";
 export * from "./useId";
 export const omit = (obj, props) => Object.entries(obj)
     .filter(([key]) => !props.includes(key))
     .reduce((obj, [key, value]) => (Object.assign(Object.assign({}, obj), { [key]: value })), {});
+/* https://github.com/streamich/react-use/blob/master/src/useEvent.ts */
+export const useEventListener = (name, handler, target = window) => {
+    useEffect(() => {
+        if (!target) {
+            return;
+        }
+        target === null || target === void 0 ? void 0 : target.addEventListener(name, handler);
+        return () => {
+            target === null || target === void 0 ? void 0 : target.addEventListener(name, handler);
+        };
+    }, [name, handler, target]);
+};
 //# sourceMappingURL=index.js.map

package/esm/util/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AAExB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,KAAe,EAAE,EAAE,CACnD,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;KAChB,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACvC,MAAM,CACL,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,iCAClB,GAAG,KACN,CAAC,GAAG,CAAC,EAAE,KAAK,IACZ,EACF,EAAE,CACH,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AAExB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,GAAW,EAAE,KAAe,EAAE,EAAE,CACnD,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;KAChB,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;KACvC,MAAM,CACL,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,iCAClB,GAAG,KACN,CAAC,GAAG,CAAC,EAAE,KAAK,IACZ,EACF,EAAE,CACH,CAAC;AAgBN,wEAAwE;AACxE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,IAAkD,EAClD,OAAqD,EACrD,SAA4B,MAAM,EAC5B,EAAE;IACR,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE;YACX,OAAO;SACR;QACD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC1C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;AAC9B,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.14.9",
+  "version": "0.14.10-next.0",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -64,5 +64,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "adebf90f68922ff6c012f15ee21564b01b0cc7dd"
+  "gitHead": "d9174b43520c8691e6f539ed7c76554fb50dadd0"
 }