@navikt/ds-react 0.16.18 → 0.17.0

package/src/form/index.ts

@@ -10,7 +10,7 @@ export {
   FieldsetProps,
 } from "./Fieldset";
 export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
-export { SearchField, SearchFieldProps } from "./search-field";
+export { Search, SearchProps, SearchClearEvent } from "./search";
 export { default as Select, SelectProps } from "./Select";
 export { default as Switch, SwitchProps } from "./Switch";
 export { ErrorSummary, ErrorSummaryProps } from "./error-summary";

package/src/form/search/Search.tsx

@@ -0,0 +1,235 @@
+import { Close } from "@navikt/ds-icons";
+import cl from "classnames";
+import React, {
+  forwardRef,
+  InputHTMLAttributes,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import mergeRefs from "react-merge-refs";
+import { BodyShort, Label, omit, useEventListener } from "../..";
+import { FormFieldProps } from "../useFormField";
+import SearchButton, { SearchButtonType } from "./SearchButton";
+import { useSearch } from "./useSearch";
+
+export type SearchClearEvent =
+  | {
+      trigger: "Click";
+      event: React.MouseEvent<HTMLButtonElement, MouseEvent>;
+    }
+  | { trigger: "Escape"; event: React.KeyboardEvent<HTMLDivElement> };
+
+export interface SearchProps
+  extends Omit<FormFieldProps, "error" | "errorId">,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+  children?: React.ReactNode;
+  /**
+   * Search label
+   * @info Will be hidden by default, is required for accessibility reasons.
+   */
+  label: React.ReactNode;
+  /**
+   * Shows label and description for screenreaders-only
+   * @default true
+   */
+  hideLabel?: boolean;
+  /**
+   * Callback for value-change in input
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Callback for <Search.Button/> click with current input-value
+   */
+  onSearch?: (value: string | number | readonly string[]) => void;
+  /**
+   * Callback for click on clear-button or Escape keydown
+   */
+  onClear?: (e: SearchClearEvent) => void;
+  /**
+   * aria-label on clear button
+   * @default "Slett tekst i felt"
+   */
+  clearButtonLabel?: string;
+  /**
+   * If false, removes clear-button option from input.
+   * @default true
+   */
+  clearButton?: boolean;
+  /**
+   * Changes button-variant
+   * @default "tertiary"
+   */
+  variant?: "tertiary" | "primary";
+}
+
+interface SearchComponent
+  extends React.ForwardRefExoticComponent<
+    SearchProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Button: SearchButtonType;
+}
+
+export interface SearchContextProps {
+  disabled?: boolean;
+  size: "medium" | "small";
+  onSearch: () => void;
+  variant?: "tertiary" | "primary";
+}
+
+export const SearchContext = React.createContext<SearchContextProps | null>(
+  null
+);
+
+const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
+  const { inputProps, size = "medium", inputDescriptionId } = useSearch(
+    props,
+    "searchfield"
+  );
+
+  const {
+    className,
+    hideLabel = true,
+    label,
+    description,
+    value,
+    clearButtonLabel,
+    onClear,
+    clearButton = true,
+    children,
+    onSearch,
+    variant = "tertiary",
+    ...rest
+  } = props;
+
+  const searchRef = useRef<HTMLInputElement | null>(null);
+  const mergedRef = mergeRefs([searchRef, ref]);
+  const [wrapperRef, setWrapperRef] = useState<HTMLFormElement | null>(null);
+
+  const [controlledValue, setControlledValue] = useState(value ?? "");
+
+  const handleChange = useCallback(
+    (v: string) => {
+      searchRef.current && value === undefined && setControlledValue(v);
+      props?.onChange?.(v);
+    },
+    [props, value]
+  );
+
+  const handleClear = useCallback(
+    (event: SearchClearEvent) => {
+      onClear?.(event);
+      handleChange("");
+      if (searchRef.current && value === undefined) {
+        searchRef.current.value = "";
+      }
+      searchRef.current && searchRef.current?.focus?.();
+    },
+    [handleChange, onClear, value]
+  );
+
+  useEventListener(
+    "keydown",
+    useCallback(
+      (e) => {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          handleClear({ trigger: "Escape", event: e });
+        }
+      },
+      [handleClear]
+    ),
+    wrapperRef
+  );
+
+  useEffect(() => {
+    value !== undefined && setControlledValue(value);
+  }, [value]);
+
+  return (
+    <form
+      role="search"
+      ref={setWrapperRef}
+      className={cl(
+        className,
+        "navds-form-field",
+        `navds-form-field--${size}`,
+        "navds-search",
+        {
+          "navds-search--disabled": !!inputProps.disabled,
+        }
+      )}
+      onSubmit={(e) => e.preventDefault()}
+    >
+      <Label
+        htmlFor={inputProps.id}
+        size={size}
+        as="label"
+        className={cl("navds-text-field__label", {
+          "navds-sr-only": hideLabel,
+        })}
+      >
+        {label}
+      </Label>
+      {!!description && (
+        <BodyShort
+          as="div"
+          className={cl("navds-text-field__description", {
+            "navds-sr-only": hideLabel,
+          })}
+          id={inputDescriptionId}
+          size={size}
+        >
+          {description}
+        </BodyShort>
+      )}
+      <div className="navds-search__wrapper">
+        <div className="navds-search__wrapper-inner">
+          <input
+            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__input",
+              "navds-text-field__input",
+              "navds-body-short",
+              `navds-body-${size ?? "medium"}`
+            )}
+          />
+          {controlledValue && clearButton && (
+            <button
+              type="button"
+              onClick={(e) => handleClear({ trigger: "Click", event: e })}
+              className="navds-search__button-clear"
+            >
+              <span className="navds-sr-only">
+                {clearButtonLabel ? clearButtonLabel : "Tøm"}
+              </span>
+              <Close aria-hidden />
+            </button>
+          )}
+        </div>
+        <SearchContext.Provider
+          value={{
+            size,
+            disabled: inputProps.disabled,
+            onSearch: () => onSearch?.(controlledValue),
+            variant,
+          }}
+        >
+          {children ? children : <SearchButton />}
+        </SearchContext.Provider>
+      </div>
+    </form>
+  );
+}) as SearchComponent;
+
+Search.Button = SearchButton;
+
+export default Search;

package/src/form/search/SearchButton.tsx

@@ -0,0 +1,51 @@
+import { Search } from "@navikt/ds-icons";
+import cl from "classnames";
+import React, { forwardRef, useContext } from "react";
+import { Button, ButtonProps } from "../..";
+import { SearchContext } from "./Search";
+
+export interface SearchButtonProps
+  extends Omit<ButtonProps, "size" | "children" | "variant"> {
+  /**
+   * Text set before <Search/> icon
+   */
+  children?: React.ReactNode;
+}
+
+export type SearchButtonType = React.ForwardRefExoticComponent<
+  SearchButtonProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+const SearchButton: SearchButtonType = forwardRef(
+  ({ className, children, disabled, onClick, ...rest }, ref) => {
+    const context = useContext(SearchContext);
+
+    if (context === null) {
+      console.warn("<Search.Button> has to be wrapped in <Search />");
+      return null;
+    }
+
+    const { size, onSearch, variant } = context;
+
+    return (
+      <Button
+        type="button"
+        {...rest}
+        ref={ref}
+        size={size}
+        variant={variant}
+        className={cl("navds-search__button-search", className)}
+        disabled={context?.disabled ?? disabled}
+        onClick={(e) => {
+          onSearch();
+          onClick?.(e);
+        }}
+      >
+        <Search aria-hidden />
+        {children ? children : <span className="navds-sr-only">Søk</span>}
+      </Button>
+    );
+  }
+);
+
+export default SearchButton;

package/src/form/search/index.ts

@@ -0,0 +1 @@
+export { default as Search, SearchProps, SearchClearEvent } from "./Search";

package/src/form/search/search.stories.tsx

@@ -0,0 +1,91 @@
+import { Meta } from "@storybook/react/types-6-0";
+import React, { useState } from "react";
+
+import { Search } from "../index";
+export default {
+  title: "ds-react/form/search",
+  component: Search,
+} as Meta;
+
+export const All = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div style={{ maxWidth: 300 }}>
+      <h1>Search</h1>
+      <div>
+        <Search
+          label="Søk alle sider om X og Y"
+          onSearch={console.log}
+        ></Search>
+        <br />
+        <Search
+          label="Søk alle sider om X og Y"
+          onSearch={console.log}
+          variant="primary"
+        ></Search>
+      </div>
+
+      <h2>Search small</h2>
+      <Search
+        label="Søk alle sider om X og Y"
+        description="Beskrivelse av søket"
+        size="small"
+      >
+        <Search.Button />
+      </Search>
+      <br />
+      <Search
+        label="Søk alle sider om X og Y"
+        description="Beskrivelse av søket"
+        size="small"
+        hideLabel
+        variant="primary"
+      >
+        <Search.Button />
+      </Search>
+
+      <h2>Med knappe-tekst</h2>
+      <Search label="Søk alle sider om X og Y" hideLabel={false}>
+        <Search.Button>Søk</Search.Button>
+      </Search>
+      <Search
+        label="Søk alle sider om X og Y"
+        hideLabel={false}
+        variant="primary"
+      >
+        <Search.Button>Søk</Search.Button>
+      </Search>
+      <h2>Hidelabel false</h2>
+      <Search label="Søk alle sider om X og Y" hideLabel={false}>
+        <Search.Button />
+      </Search>
+      <h2>Controlled state </h2>
+      <Search
+        value={value}
+        label="Søk alle sider om X og Y"
+        description="Beskrivelse av søket"
+        onChange={(e) => setValue(e)}
+        onClear={() => setValue("")}
+      >
+        <Search.Button />
+      </Search>
+      <h2>No clear button</h2>
+      <Search
+        hideLabel
+        label="Søk alle sider om X og Y"
+        description="Beskrivelse av søket"
+        clearButton={false}
+      >
+        <Search.Button />
+      </Search>
+    </div>
+  );
+};
+
+export const UUDemo = () => {
+  return (
+    <Search label="Søk på nav.no" onSearch={console.log} placeholder="Søk">
+      <Search.Button />
+    </Search>
+  );
+};

package/src/form/search/useSearch.ts

@@ -0,0 +1,31 @@
+import cl from "classnames";
+import { useContext } from "react";
+import { useId } from "../../index";
+import { FieldsetContext } from "../index";
+import { FormFieldProps } from "../useFormField";
+
+export const useSearch = (props: FormFieldProps, prefix: string) => {
+  const { size } = props;
+
+  const fieldset = useContext(FieldsetContext);
+
+  const genId = useId();
+
+  const id = props.id ?? `${prefix}-${genId}`;
+  const inputDescriptionId = `${prefix}-description-${genId}`;
+
+  const disabled = fieldset?.disabled || props.disabled;
+
+  return {
+    inputDescriptionId,
+    size: size ?? fieldset?.size ?? "medium",
+    inputProps: {
+      id,
+      "aria-describedby":
+        cl(props["aria-describedby"], {
+          [inputDescriptionId]: !!props?.description,
+        }) || undefined,
+      disabled,
+    },
+  };
+};

package/src/modal/Modal.tsx

@@ -36,6 +36,11 @@ export interface ModalProps {
   "aria-labelledby"?: string;
   "aria-describedby"?: string;
   "aria-modal"?: boolean;
+  /**
+   * Sets aria-label on modal
+   * @warning This should be set if not using 'aria-labelledby' or 'aria-describedby'
+   */
+  "aria-label"?: string;
 }
 
 interface ModalComponent
@@ -62,6 +67,7 @@ const Modal = forwardRef<ReactModal, ModalProps>(
       "aria-describedby": ariaDescribedBy,
       "aria-labelledby": ariaLabelledBy,
       "aria-modal": ariaModal,
+      "aria-label": contentLabel,
       ...rest
     },
     ref
@@ -92,6 +98,7 @@ const Modal = forwardRef<ReactModal, ModalProps>(
           labelledby: ariaLabelledBy,
           modal: ariaModal,
         }}
+        contentLabel={contentLabel}
       >
         {children}
         {closeButton && (

package/src/modal/{stories/modal.stories.tsx → modal.stories.tsx}

@@ -16,9 +16,13 @@ export const All = () => {
   return (
     <>
       <button onClick={() => setOpen(true)}>Open modal</button>
-      <Modal open={open} onClose={() => setOpen(false)}>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        aria-labelledby="header123"
+      >
         <Modal.Content>
-          <h1>Header</h1>
+          <h1 id="header123">Header</h1>
           <h2>subheader</h2>
           <p>Cupidatat irure ipsum veniam ad in esse.</p>
           <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
@@ -32,9 +36,10 @@ export const All = () => {
         shouldCloseOnOverlayClick={false}
         open={openTwo}
         onClose={() => setOpenTwo(false)}
+        aria-labelledby="header123"
       >
         <Modal.Content>
-          <h1>Header</h1>
+          <h1 id="header123">Header</h1>
           <h2>subheader</h2>
           <p>
             Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
@@ -54,10 +59,9 @@ export const All = () => {
         open={openThree}
         closeButton={false}
         onClose={() => setOpenThree(false)}
+        aria-label="Min modal"
       >
         <Modal.Content>
-          <h1>Header</h1>
-          <h2>subheader</h2>
           <p>Cupidatat irure ipsum veniam ad in esse.</p>
           <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
         </Modal.Content>

package/src/toggle-group/ToggleGroup.stories.tsx

@@ -51,6 +51,17 @@ const Items = (icon?: boolean, both?: boolean) => (
   </>
 );
 
+export const UUDemo = () => {
+  const [activeValue, setActiveValue] = useState("ulest");
+  return (
+    <ToggleGroup value={activeValue} onChange={setActiveValue}>
+      <ToggleGroup.Item value="ulest">Ulest</ToggleGroup.Item>
+      <ToggleGroup.Item value="lest">Leste</ToggleGroup.Item>
+      <ToggleGroup.Item value="sendt">Sendte</ToggleGroup.Item>
+    </ToggleGroup>
+  );
+};
+
 export const All = () => {
   const [activeValue, setActiveValue] = useState("first");
 

package/src/toggle-group/ToggleGroup.tsx

@@ -120,7 +120,7 @@ const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
               `navds-toggle-group--${size}`
             )}
             {...(describeBy && { "aria-describedby": describeBy })}
-            role="toolbar"
+            role="radiogroup"
             type="single"
           >
             {children}

package/src/util/index.ts

@@ -1,3 +1,5 @@
+import { useEffect } from "react";
+
 export * from "./OverridableComponent";
 export * from "./useId";
 
@@ -11,3 +13,34 @@ export const omit = (obj: object, props: string[]) =>
       }),
       {}
     );
+
+export interface ListenerT {
+  addEventListener(
+    name: string,
+    handler: (event?: any) => void,
+    ...args: any[]
+  );
+
+  removeEventListener(
+    name: string,
+    handler: (event?: any) => void,
+    ...args: any[]
+  );
+}
+
+/* https://github.com/streamich/react-use/blob/master/src/useEvent.ts */
+export const useEventListener = <T extends ListenerT>(
+  name: Parameters<ListenerT["addEventListener"]>[0],
+  handler: Parameters<ListenerT["addEventListener"]>[1],
+  target: null | T | Window = window
+): void => {
+  useEffect(() => {
+    if (!target) {
+      return;
+    }
+    target?.addEventListener(name, handler);
+    return () => {
+      target?.addEventListener(name, handler);
+    };
+  }, [name, handler, target]);
+};

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

@@ -1,69 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-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 classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importStar(require("react"));
-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 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,
-            "navds-search-field--disabled": !!inputProps.disabled,
-        }) }),
-        react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-text-field__label", {
-                "navds-sr-only": hideLabel,
-            }) }, label),
-        !!description && (react_1.default.createElement(__1.BodyShort, { as: "div", className: (0, classnames_1.default)("navds-text-field__description", {
-                "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))));
-});
-SearchField.Button = SearchFieldButton_1.default;
-SearchField.Clear = SearchFieldClearButton_1.default;
-SearchField.Input = SearchFieldInput_1.default;
-exports.default = SearchField;

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

@@ -1,50 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const SearchField_1 = require("./SearchField");
-const __1 = require("../..");
-const SearchFieldClearButton = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, variant = "secondary", disabled } = _a, rest = __rest(_a, ["className", "variant", "disabled"]);
-    const searchField = (0, react_1.useContext)(SearchField_1.SearchFieldContext);
-    if (searchField === null) {
-        console.warn("SearchFieldClearButton has to be wrapped in <SearchField />");
-        return null;
-    }
-    const { size, inputProps } = searchField;
-    return (react_1.default.createElement(__1.Button, Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)(className, "navds-search-field__clear-button"), size: size, variant: variant, disabled: disabled !== null && disabled !== void 0 ? disabled : inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled })));
-});
-exports.default = SearchFieldClearButton;