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

package/src/form/search-field/SearchField.tsx

@@ -1,35 +1,21 @@
+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 { FormFieldProps, useFormField } from "../useFormField";
-import SearchFieldButton, { SearchFieldButtonType } from "./SearchFieldButton";
-import SearchFieldClearButton, {
-  SearchFieldClearButtonType,
-} from "./SearchFieldClearButton";
-import SearchFieldInput, { SearchFieldInputType } from "./SearchFieldInput";
-
-export interface SearchFieldContextProps {
-  inputProps: {
-    id: string;
-    "aria-invalid": boolean;
-    "aria-describedby"?: string;
-    disabled?: boolean;
-  };
-  size?: "medium" | "small";
-}
-
-export const SearchFieldContext = React.createContext<SearchFieldContextProps | null>(
-  null
-);
+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 { useSearchField } from "./useSearchField";
 
 export interface SearchFieldProps
-  extends FormFieldProps,
-    React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * SearchFieldInput & SearchFieldButton
-   */
-  children: React.ReactNode;
+  extends Omit<FormFieldProps, "error" | "errorId">,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
   /**
    * If enabled shows the label and description for screenreaders only
    */
@@ -38,50 +24,101 @@ export interface SearchFieldProps
    * 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;
-}
-
-const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
+const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
   (props, ref) => {
-    const {
-      inputProps,
-      errorId,
-      showErrorMsg,
-      hasError,
-      size,
-      inputDescriptionId,
-    } = useFormField(props, "searchfield");
+    const { inputProps, size, inputDescriptionId } = useSearchField(
+      props,
+      "searchfield"
+    );
 
     const {
       className,
       hideLabel,
-      children,
       label,
       description,
-      error,
+      value,
+      clearButtonLabel,
+      onClear,
+      inverted = false,
+      clearButton = true,
       ...rest
     } = props;
 
+    const [controlledValue, setControlledValue] = useState(value ?? "");
+    const searchRef = useRef<HTMLInputElement | null>(null);
+    const mergedRef = mergeRefs([searchRef, ref]);
+    const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
+
+    const handleChange = useCallback(
+      (v: string) => {
+        if (searchRef.current && value === undefined) {
+          searchRef.current.value = v;
+          setControlledValue(v);
+        }
+        props?.onChange?.(v);
+      },
+      [props, value]
+    );
+
+    const handleClear = useCallback(() => {
+      onClear?.();
+      handleChange("");
+      searchRef.current && searchRef.current?.focus?.();
+    }, [handleChange, onClear]);
+
+    useEventListener(
+      "keydown",
+      useCallback(
+        (e) => {
+          if (e.key === "Escape") {
+            e.preventDefault();
+            handleClear();
+          }
+        },
+        [handleClear]
+      ),
+      wrapperRef
+    );
+
+    useEffect(() => {
+      value !== undefined && setControlledValue(value);
+    }, [value]);
+
     return (
       <div
-        ref={ref}
-        {...omit(rest, ["id", "error", "errorId", "size", "disabled"])}
+        ref={setWrapperRef}
         className={cl(
           className,
           "navds-form-field",
           `navds-form-field--${size ?? "medium"}`,
           "navds-search-field",
           {
-            "navds-search-field--error": hasError,
             "navds-search-field--disabled": !!inputProps.disabled,
+            "navds-search-field--inverted": inverted,
           }
         )}
       >
@@ -90,7 +127,7 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
           size={size}
           as="label"
           className={cl("navds-text-field__label", {
-            "sr-only": hideLabel,
+            "navds-sr-only": hideLabel,
           })}
         >
           {label}
@@ -99,7 +136,7 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
           <BodyShort
             as="div"
             className={cl("navds-text-field__description", {
-              "sr-only": hideLabel,
+              "navds-sr-only": hideLabel,
             })}
             id={inputDescriptionId}
             size={size}
@@ -107,26 +144,44 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
             {description}
           </BodyShort>
         )}
-        <div className="navds-search-field__input-wrapper">
-          <SearchFieldContext.Provider
-            value={{
-              inputProps,
-              size,
-            }}
-          >
-            {children}
-          </SearchFieldContext.Provider>
-        </div>
-        <div id={errorId} aria-relevant="additions removals" aria-live="polite">
-          {showErrorMsg && <ErrorMessage size={size}>{error}</ErrorMessage>}
+        <div
+          data-value={!!controlledValue}
+          className="navds-search-field__input-wrapper"
+        >
+          <span className="navds-search-field__input-icon">
+            <Search aria-hidden />
+          </span>
+          <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-field__input",
+              "navds-text-field__input",
+              "navds-body-short",
+              `navds-body-${size ?? "medium"}`
+            )}
+          />
+          {controlledValue && clearButton && (
+            <button
+              onClick={() => handleClear()}
+              className="navds-search-field__clear-button"
+            >
+              <span className="navds-sr-only">
+                {clearButtonLabel ? clearButtonLabel : "Slett tekst i felt"}
+              </span>
+              <Close aria-hidden />
+            </button>
+          )}
         </div>
       </div>
     );
   }
-) as SearchFieldComponent;
-
-SearchField.Button = SearchFieldButton;
-SearchField.Clear = SearchFieldClearButton;
-SearchField.Input = SearchFieldInput;
+);
 
 export default SearchField;

package/src/form/search-field/stories/search-field.stories.mdx

@@ -1,9 +1,8 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
 import { SearchField } from "../index";
 
-import { Example } from "./search-field-example.tsx";
-
-import { Search } from "@navikt/ds-icons";
+import { Table } from "@navikt/ds-react";
+import { Header } from "@navikt/ds-react-internal";
 
 <Meta title="ds-react/form/search-field/intro" />
 
@@ -16,24 +15,47 @@ Komponenten er ikke testet eller gått gjennom et design-review, så anbefalses
 ## Bruk
 
 ```jsx
-<SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
-  <SearchField.Input />
-  <SearchField.Button>
-    <Search /> Søk
-  </SearchField.Button>
-</SearchField>
+<SearchField
+  label="Mollit eiusmod"
+  description="Ea cupidatat eu sunt commodo"
+/>
 ```
 
 <Canvas>
-  <SearchField
-    label="Mollit eiusmod"
-    description="Ea cupidatat eu sunt commodo"
+  <div style={{ width: 300 }}>
+    <SearchField
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+    />
+  </div>
+</Canvas>
+
+## Inverted
+
+```jsx
+<SearchField
+  label="Mollit eiusmod"
+  description="Ea cupidatat eu sunt commodo"
+  hideLabel
+  inverted
+/>
+```
+
+<Canvas>
+  <div
+    style={{
+      width: 300,
+      padding: "1rem",
+      background: "var(--navds-global-color-gray-900)",
+    }}
   >
-    <SearchField.Input />
-    <SearchField.Button>
-      <Search /> Søk
-    </SearchField.Button>
-  </SearchField>
+    <SearchField
+      inverted
+      hideLabel
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+    />
+  </div>
 </Canvas>
 
 ## hideLabel
@@ -46,25 +68,41 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   label="Mollit eiusmod"
   description="Ea cupidatat eu sunt commodo"
   hideLabel
->
-  <SearchField.Input />
-  <SearchField.Button>
-    <Search /> Søk
-  </SearchField.Button>
-</SearchField>
+/>
 ```
 
 <Canvas>
-  <SearchField
-    label="Mollit eiusmod"
-    description="Ea cupidatat eu sunt commodo"
-    hideLabel
-  >
-    <SearchField.Input />
-    <SearchField.Button>
-      <Search /> Søk
-    </SearchField.Button>
-  </SearchField>
+  <div style={{ width: 300 }}>
+    <SearchField
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+      hideLabel
+    />
+  </div>
+</Canvas>
+
+## Uten "clear"-button
+
+Fjerner "lukke"-knapp som dukker opp når feltet ikke er tomt.
+
+```jsx
+<SearchField
+  label="Mollit eiusmod"
+  description="Ea cupidatat eu sunt commodo"
+  hideLabel
+  clearButton={false}
+/>
+```
+
+<Canvas>
+  <div style={{ width: 300 }}>
+    <SearchField
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+      hideLabel
+      clearButton={false}
+    />
+  </div>
 </Canvas>
 
 ## Sizing
@@ -75,82 +113,113 @@ Vi har satt `label` som required siden man vil bruke den i sammenheng med denne
   description="Ea cupidatat eu sunt commodo"
   hideLabel
   size="small"
->
-  <SearchField.Input />
-  <SearchField.Button>
-    <Search /> Søk
-  </SearchField.Button>
-</SearchField>
+/>
 ```
 
 <Canvas>
-  <SearchField
-    label="Mollit eiusmod"
-    description="Ea cupidatat eu sunt commodo"
-    hideLabel
-    size="small"
-  >
-    <SearchField.Input />
-    <SearchField.Button>
-      <Search /> Søk
-    </SearchField.Button>
-  </SearchField>
+  <div style={{ width: 300 }}>
+    <SearchField
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+      hideLabel
+      size="small"
+    />
+  </div>
 </Canvas>
 
-## Errors
+## Disabled
 
 ```jsx
 <SearchField
+  disabled
   label="Mollit eiusmod"
   description="Ea cupidatat eu sunt commodo"
   hideLabel
-  error="Error message"
->
-  <SearchField.Input />
-  <SearchField.Button>
-    <Search /> Søk
-  </SearchField.Button>
-</SearchField>
+
+/>
+<SearchField
+  disabled
+  label="Mollit eiusmod"
+  description="Ea cupidatat eu sunt commodo"
+  hideLabel
+  size="small"
+/>
 ```
 
 <Canvas>
+  <div style={{ width: 300 }}>
+    <SearchField
+      disabled
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+      hideLabel
+    />
+  </div>
   <SearchField
+    disabled
     label="Mollit eiusmod"
     description="Ea cupidatat eu sunt commodo"
     hideLabel
-    error="Error message"
-  >
-    <SearchField.Input />
-    <SearchField.Button>
-      <Search /> Søk
-    </SearchField.Button>
-  </SearchField>
+    size="small"
+  />
 </Canvas>
 
-## ClearButton
-
-Man kan bruke `SearchField.Clear` for å håndtere clearing av value i `<input />`. For å bruke denne
-kreves det da at `SearchField.Input` er controlled slik at man styrer state selv slik som eksemplet under.
-Hvis man bare ønsker at den bare skal vises når bruker har begynt å skrive, anbefaler vi bare å rendre
-den når inputvalue ikke er empty.
-
-```jsx
-<SearchField label="Mollit eiusmod" description="Ea cupidatat eu sunt commodo">
-  <SearchField.Input value={value} onChange={(e) => setValue(e.target.value)} />
-  {!!value && (
-    <SearchField.Clear onClick={() => setValue("")}>
-      <Close /> Tøm
-    </SearchField.Clear>
-  )}
-  <SearchField.Button>
-    <Search /> Søk
-  </SearchField.Button>
-</SearchField>
-```
+## Table
 
 <Canvas>
-  <div>
-    <Example />
-    <Example size="small" />
-  </div>
+  <Table>
+    <Table.Body>
+      <Table.Row>
+        <Table.HeaderCell scope="col">
+          <SearchField
+            label="Mollit eiusmod"
+            description="Ea cupidatat eu sunt commodo"
+            hideLabel
+          />
+        </Table.HeaderCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell scope="col">Name</Table.HeaderCell>
+        <Table.HeaderCell scope="col">Age</Table.HeaderCell>
+        <Table.HeaderCell scope="col">Country</Table.HeaderCell>
+        <Table.HeaderCell scope="col">Points</Table.HeaderCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell scope="row">
+          Donald SmithDonald Smith
+        </Table.HeaderCell>
+        <Table.DataCell>32</Table.DataCell>
+        <Table.DataCell>USA</Table.DataCell>
+        <Table.DataCell>38</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell scope="row">Preben Aalborg</Table.HeaderCell>
+        <Table.DataCell>44</Table.DataCell>
+        <Table.DataCell>Denmark</Table.DataCell>
+        <Table.DataCell>11</Table.DataCell>
+      </Table.Row>
+      <Table.Row>
+        <Table.HeaderCell scope="row">Rudolph Bachenmeier</Table.HeaderCell>
+        <Table.DataCell>32</Table.DataCell>
+        <Table.DataCell>Germany</Table.DataCell>
+        <Table.DataCell>70</Table.DataCell>
+      </Table.Row>
+    </Table.Body>
+  </Table>
 </Canvas>
+
+## Header
+
+<Header>
+  <Header.Title href="#">NAV Sykepenger</Header.Title>
+  <div style={{ margin: "auto 1rem auto auto" }}>
+    <SearchField
+      label="Mollit eiusmod"
+      description="Ea cupidatat eu sunt commodo"
+      hideLabel
+      size="small"
+      inverted
+    />
+  </div>
+  <Header.User name="Ola Normann" />
+</Header>