@navikt/ds-react 3.4.2 → 4.0.0

package/src/date/datepicker/datepicker.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React, { useId, useState } from "react";
-import { UNSAFE_useDatepicker, UNSAFE_useRangeDatepicker } from "..";
+import { useDatepicker, useRangeDatepicker } from "..";
 import { Button } from "../..";
 import DatePicker from "./DatePicker";
 
@@ -18,12 +18,12 @@ export const Default = {
   render: (props) => {
     const [open, setOpen] = useState(false);
 
-    const rangeCtx = UNSAFE_useRangeDatepicker({
+    const rangeCtx = useRangeDatepicker({
       fromDate: new Date("Aug 23 2020"),
       toDate: new Date("Aug 23 2023"),
     });
 
-    const singleCtx = UNSAFE_useDatepicker({
+    const singleCtx = useDatepicker({
       fromDate: new Date("Aug 23 2020"),
       toDate: new Date("Aug 23 2023"),
     });
@@ -147,7 +147,7 @@ export const ShowWeekNumber = () => (
 );
 
 export const UseDatepicker = () => {
-  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+  const { datepickerProps, inputProps } = useDatepicker({
     fromDate: new Date("Aug 23 2019"),
     toDate: new Date("Feb 23 2024"),
     onDateChange: console.log,
@@ -163,12 +163,11 @@ export const UseDatepicker = () => {
 };
 
 export const UseRangedDatepicker = () => {
-  const { datepickerProps, fromInputProps, toInputProps } =
-    UNSAFE_useRangeDatepicker({
-      fromDate: new Date("Aug 23 2019"),
-      onRangeChange: console.log,
-      onValidate: console.log,
-    });
+  const { datepickerProps, fromInputProps, toInputProps } = useRangeDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    onRangeChange: console.log,
+    onValidate: console.log,
+  });
 
   return (
     <div style={{ display: "flex", gap: "1rem" }}>
@@ -183,7 +182,7 @@ export const UseRangedDatepicker = () => {
 };
 
 export const OpenOnFocus = () => {
-  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+  const { datepickerProps, inputProps } = useDatepicker({
     onDateChange: console.log,
     openOnFocus: false,
   });
@@ -243,7 +242,7 @@ export const UserControlled = () => {
 
 export const Validering = () => {
   const [error, setError] = useState(false);
-  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+  const { datepickerProps, inputProps } = useDatepicker({
     fromDate: new Date("Aug 2 2019"),
     onValidate: (val) => setError(val.isWeekend),
     defaultSelected: new Date("Nov 26 2022"),
@@ -289,13 +288,12 @@ export const ErrorInput = () => {
 };
 
 export const UseRangedDatepickerValidation = () => {
-  const { datepickerProps, fromInputProps, toInputProps } =
-    UNSAFE_useRangeDatepicker({
-      fromDate: new Date("Aug 23 2019"),
-      disableWeekends: true,
-      disabled: [new Date("Oct 10 2022")],
-      onValidate: console.table,
-    });
+  const { datepickerProps, fromInputProps, toInputProps } = useRangeDatepicker({
+    fromDate: new Date("Aug 23 2019"),
+    disableWeekends: true,
+    disabled: [new Date("Oct 10 2022")],
+    onValidate: console.table,
+  });
 
   return (
     <div style={{ display: "flex", gap: "1rem" }}>
@@ -310,7 +308,7 @@ export const UseRangedDatepickerValidation = () => {
 };
 
 export const defaultShownMonth = () => {
-  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+  const { datepickerProps, inputProps } = useDatepicker({
     fromDate: new Date("Aug 23 2019"),
     onDateChange: console.log,
     defaultMonth: new Date("Oct 23 2022"),
@@ -326,7 +324,7 @@ export const defaultShownMonth = () => {
 };
 
 export const Size = () => {
-  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+  const { datepickerProps, inputProps } = useDatepicker({
     fromDate: new Date("Aug 23 2019"),
     toDate: new Date("Feb 23 2024"),
     onDateChange: console.log,

package/src/date/datepicker/datepicker.test.tsx

@@ -2,18 +2,18 @@
 import { act, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
-import { UNSAFE_DatePicker, UNSAFE_useDatepicker } from "..";
+import { DatePicker, useDatepicker } from "..";
 
 const App = () => {
-  const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
+  const { datepickerProps, inputProps } = useDatepicker({
     fromDate: new Date("Aug 23 2019"),
     onDateChange: console.log,
   });
 
   return (
-    <UNSAFE_DatePicker {...datepickerProps}>
-      <UNSAFE_DatePicker.Input {...inputProps} label="Velg dato" />
-    </UNSAFE_DatePicker>
+    <DatePicker {...datepickerProps}>
+      <DatePicker.Input {...inputProps} label="Velg dato" />
+    </DatePicker>
   );
 };
 

package/src/date/hooks/index.ts

@@ -1,6 +1,6 @@
-export { useDatepicker as UNSAFE_useDatepicker } from "./useDatepicker";
+export { useDatepicker } from "./useDatepicker";
 export type { DateValidationT } from "./useDatepicker";
-export { useRangeDatepicker as UNSAFE_useRangeDatepicker } from "./useRangeDatepicker";
+export { useRangeDatepicker } from "./useRangeDatepicker";
 export type { RangeValidationT } from "./useRangeDatepicker";
-export { useMonthpicker as UNSAFE_useMonthpicker } from "./useMonthPicker";
+export { useMonthpicker } from "./useMonthPicker";
 export type { MonthValidationT } from "./useMonthPicker";

package/src/date/hooks/useRangeDatepicker.test.tsx

@@ -2,20 +2,20 @@
 import { act, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
-import { UNSAFE_DatePicker, UNSAFE_useRangeDatepicker } from "..";
+import { DatePicker, useRangeDatepicker } from "..";
 
 const RangeDemo = () => {
   const { datepickerProps, fromInputProps, selectedRange, toInputProps } =
-    UNSAFE_useRangeDatepicker({
+    useRangeDatepicker({
       fromDate: new Date("Aug 23 2019"),
     });
 
   return (
     <div style={{ display: "flex", gap: "1rem" }}>
-      <UNSAFE_DatePicker {...datepickerProps}>
-        <UNSAFE_DatePicker.Input {...fromInputProps} label="Fra" />
-        <UNSAFE_DatePicker.Input {...toInputProps} label="Til" />
-      </UNSAFE_DatePicker>
+      <DatePicker {...datepickerProps}>
+        <DatePicker.Input {...fromInputProps} label="Fra" />
+        <DatePicker.Input {...toInputProps} label="Til" />
+      </DatePicker>
       <div title="res">{JSON.stringify(selectedRange)}</div>
     </div>
   );

package/src/date/index.ts

@@ -1,19 +1,19 @@
 export { type DateInputProps } from "./DateInput";
 export {
   type DatePickerProps,
-  default as UNSAFE_DatePicker,
+  default as DatePicker,
 } from "./datepicker/DatePicker";
 export { type DatePickerStandaloneProps } from "./datepicker/DatePickerStandalone";
 export { type MonthPickerStandaloneProps } from "./monthpicker/MonthPickerStandalone";
 export {
-  UNSAFE_useDatepicker,
-  UNSAFE_useMonthpicker,
-  UNSAFE_useRangeDatepicker,
+  useDatepicker,
+  useMonthpicker,
+  useRangeDatepicker,
   type RangeValidationT,
   type DateValidationT,
   type MonthValidationT,
 } from "./hooks";
 export {
-  default as UNSAFE_MonthPicker,
+  default as MonthPicker,
   type MonthPickerProps,
 } from "./monthpicker/MonthPicker";

package/src/date/monthpicker/monthpicker.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useId, useState } from "react";
 import { Button } from "../..";
-import { UNSAFE_useMonthpicker } from "../hooks";
+import { useMonthpicker } from "../hooks";
 import MonthPicker from "./MonthPicker";
 
 export default {
@@ -23,7 +23,7 @@ export default {
 };
 
 export const Default = () => {
-  const { inputProps, monthpickerProps } = UNSAFE_useMonthpicker({
+  const { inputProps, monthpickerProps } = useMonthpicker({
     disabled: [new Date("Apr 1 2022")],
   });
 
@@ -74,7 +74,7 @@ export const Standalone = () => {
 };
 
 export const UseMonthpicker = () => {
-  const { inputProps, monthpickerProps } = UNSAFE_useMonthpicker({
+  const { inputProps, monthpickerProps } = useMonthpicker({
     disabled: [new Date("Apr 1 2022")],
     onMonthChange: console.log,
     fromDate: new Date("Jan 1 2022"),
@@ -95,7 +95,7 @@ export const UseMonthpicker = () => {
 };
 
 export const UseMonthpickerFormat = () => {
-  const { inputProps, monthpickerProps } = UNSAFE_useMonthpicker({
+  const { inputProps, monthpickerProps } = useMonthpicker({
     disabled: [new Date("Apr 1 2022")],
     onMonthChange: console.log,
     inputFormat: "MM.yyyy",
@@ -115,7 +115,7 @@ export const UseMonthpickerFormat = () => {
 };
 
 export const Required = () => {
-  const { inputProps, monthpickerProps } = UNSAFE_useMonthpicker({
+  const { inputProps, monthpickerProps } = useMonthpicker({
     locale: "nb",
     defaultSelected: new Date(),
     disabled: [new Date("Apr 1 2022")],

package/src/date/utils/__tests__/get-dates.test.ts

@@ -73,7 +73,6 @@ describe("Extracts correct months", () => {
       current: new Date(2022, 9, 22),
       res: 9,
     };
-    console.log(getMonths(t.start, t.end, t.current));
     expect(getMonths(t.start, t.end, t.current).length).toEqual(t.res);
   });
 });

package/src/dropdown/Dropdown.tsx

@@ -0,0 +1,80 @@
+import React, { createContext, useState } from "react";
+import Toggle, { ToggleType } from "./Toggle";
+import Menu, { MenuType } from "./Menu";
+
+export interface DropdownProps {
+  children: React.ReactNode;
+  /**
+   * Handler called when an item is selected.
+   */
+  onSelect?: (element: React.MouseEvent) => void;
+  /**
+   * Whether the Menu closes when a selection is made.
+   * @default true
+   */
+  closeOnSelect?: boolean;
+  /**
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Controlled state of the dropdown. When set, you will need to handle onClose and onSelect manually.
+   */
+  open?: boolean;
+}
+
+export interface DropdownType extends React.FC<DropdownProps> {
+  Toggle: ToggleType;
+  Menu: MenuType;
+}
+
+export interface DropdownContextType {
+  readonly isOpen: boolean;
+  handleToggle: (v: boolean) => void;
+  readonly anchorEl: Element | null;
+  setAnchorEl: React.Dispatch<React.SetStateAction<Element | null>>;
+  onSelect: (element: React.MouseEvent) => void;
+}
+
+export const DropdownContext = createContext<DropdownContextType | null>(null);
+
+export const Dropdown = (({
+  children,
+  onSelect,
+  closeOnSelect = true,
+  defaultOpen = false,
+  open,
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
+  const [anchorEl, setAnchorEl] = useState<Element | null>(null);
+
+  const handleToggle = (v: boolean) => {
+    if (open === undefined) {
+      setIsOpen(v);
+    }
+  };
+
+  return (
+    <DropdownContext.Provider
+      value={{
+        isOpen: open ?? isOpen,
+        handleToggle,
+        anchorEl,
+        setAnchorEl,
+        onSelect: (event) => {
+          onSelect?.(event);
+          if (closeOnSelect) {
+            open === undefined && setIsOpen(false);
+          }
+        },
+      }}
+    >
+      {children}
+    </DropdownContext.Provider>
+  );
+}) as DropdownType;
+
+Dropdown.Toggle = Toggle;
+Dropdown.Menu = Menu;
+
+export default Dropdown;

package/src/dropdown/Menu/Divider.tsx

@@ -0,0 +1,18 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+
+export type DividerType = React.ForwardRefExoticComponent<
+  React.HTMLAttributes<HTMLHRElement> & React.RefAttributes<HTMLHRElement>
+>;
+
+export const Divider: DividerType = forwardRef(
+  ({ className, ...rest }, ref) => (
+    <hr
+      {...rest}
+      ref={ref}
+      className={cl("navds-dropdown__divider", className)}
+    />
+  )
+);
+
+export default Divider;

package/src/dropdown/Menu/GroupedList/Heading.tsx

@@ -0,0 +1,31 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+
+export interface GroupedHeadingProps
+  extends React.HTMLAttributes<HTMLDetailsElement> {
+  /**
+   * Heading
+   */
+  children: React.ReactNode;
+}
+
+export type GroupedHeadingType = React.ForwardRefExoticComponent<
+  GroupedHeadingProps & React.RefAttributes<HTMLElement>
+>;
+
+export const GroupedHeading: GroupedHeadingType = forwardRef(
+  ({ className, ...rest }, ref) => (
+    <dt
+      {...rest}
+      ref={ref}
+      className={cl(
+        "navds-dropdown__list-heading",
+        "navds-heading",
+        "navds-heading--xsmall",
+        className
+      )}
+    />
+  )
+);
+
+export default GroupedHeading;

package/src/dropdown/Menu/GroupedList/Item.tsx

@@ -0,0 +1,45 @@
+import { OverridableComponent } from "../../../util/OverridableComponent";
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { DropdownContext } from "../../Dropdown";
+
+export interface GroupedItemProps
+  extends React.ButtonHTMLAttributes<HTMLElement> {
+  /**
+   * Menu item content
+   */
+  children: React.ReactNode;
+}
+
+export type GroupedItemType = OverridableComponent<
+  GroupedItemProps,
+  HTMLButtonElement
+>;
+
+export const GroupedItem: GroupedItemType = forwardRef(
+  ({ as: Component = "button", className, ...rest }, ref) => {
+    const context = useContext(DropdownContext);
+
+    return (
+      <dd className="navds-dropdown__list-item">
+        <Component
+          {...rest}
+          value={rest.children}
+          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+            context?.onSelect?.(event);
+            rest?.onClick?.(event);
+          }}
+          ref={ref}
+          className={cl(
+            "navds-dropdown__item",
+            "navds-body-short",
+            "navds-body-short--small",
+            className
+          )}
+        />
+      </dd>
+    );
+  }
+);
+
+export default GroupedItem;

package/src/dropdown/Menu/GroupedList/index.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+import GroupedHeading, { GroupedHeadingType } from "./Heading";
+import GroupedItem, { GroupedItemType } from "./Item";
+
+export interface GroupedListProps
+  extends React.HTMLAttributes<HTMLDListElement> {
+  /**
+   * Menu list content
+   */
+  children: React.ReactNode;
+}
+
+export interface GroupedListType
+  extends React.ForwardRefExoticComponent<
+    GroupedListProps & React.RefAttributes<HTMLDListElement>
+  > {
+  Heading: GroupedHeadingType;
+  Item: GroupedItemType;
+}
+
+export const DescriptionList = forwardRef(
+  ({ className, children, ...rest }, ref) => (
+    <dl {...rest} ref={ref} className={cl("navds-dropdown__list", className)}>
+      {children}
+    </dl>
+  )
+) as GroupedListType;
+
+DescriptionList.Heading = GroupedHeading;
+DescriptionList.Item = GroupedItem;
+
+export default DescriptionList;

package/src/dropdown/Menu/List/Item.tsx

@@ -0,0 +1,44 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "clsx";
+import { OverridableComponent } from "../../../util/OverridableComponent";
+import { DropdownContext } from "../../Dropdown";
+
+export interface ListItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
+  /**
+   * Menu item content
+   */
+  children: React.ReactNode;
+}
+
+export type ListItemType = OverridableComponent<
+  ListItemProps,
+  HTMLButtonElement
+>;
+
+export const ListItem: ListItemType = forwardRef(
+  ({ as: Component = "button", className, ...rest }, ref) => {
+    const context = useContext(DropdownContext);
+
+    return (
+      <li className="navds-dropdown__list-item">
+        <Component
+          {...rest}
+          value={rest.children}
+          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+            context?.onSelect?.(event);
+            rest?.onClick?.(event);
+          }}
+          ref={ref}
+          className={cl(
+            "navds-dropdown__item",
+            "navds-body-short",
+            "navds-body-short--small",
+            className
+          )}
+        />
+      </li>
+    );
+  }
+);
+
+export default ListItem;

package/src/dropdown/Menu/List/index.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from "react";
+import cl from "clsx";
+import ListItem, { ListItemType } from "./Item";
+
+export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
+  /**
+   * Menu list content
+   */
+  children: React.ReactNode;
+}
+
+export interface ListType
+  extends React.ForwardRefExoticComponent<
+    ListProps & React.RefAttributes<HTMLUListElement>
+  > {
+  Item: ListItemType;
+}
+
+export const List = forwardRef(({ className, children, ...rest }, ref) => (
+  <ul {...rest} ref={ref} className={cl("navds-dropdown__list", className)}>
+    {children}
+  </ul>
+)) as ListType;
+
+List.Item = ListItem;
+
+export default List;

package/src/dropdown/Menu/index.tsx

@@ -0,0 +1,85 @@
+import { Popover } from "../../popover";
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { DropdownContext } from "../Dropdown";
+import Divider, { DividerType } from "./Divider";
+import GroupedList, { GroupedListType } from "./GroupedList";
+import List, { ListType } from "./List";
+
+interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Dropdown content
+   */
+  children: React.ReactNode;
+  /**
+   * onClose callback
+   */
+  onClose?: () => void;
+  /**
+   * Popover positionion strategy
+   * @default "absolute"
+   */
+  strategy?: "fixed" | "absolute";
+  /*
+   * Default dialog-placement on open
+   * @default "bottom-end"
+   */
+  placement?:
+    | "top"
+    | "bottom"
+    | "right"
+    | "left"
+    | "top-start"
+    | "top-end"
+    | "bottom-start"
+    | "bottom-end"
+    | "right-start"
+    | "right-end"
+    | "left-start"
+    | "left-end";
+}
+
+export interface MenuType<Props = MenuProps>
+  extends React.ForwardRefExoticComponent<
+    Props & React.RefAttributes<HTMLDivElement>
+  > {
+  List: ListType;
+  GroupedList: GroupedListType;
+  Divider: DividerType;
+}
+
+export const Menu = forwardRef<HTMLDivElement, MenuProps>(
+  ({ className, onClose, placement = "bottom-end", ...rest }, ref) => {
+    const context = useContext(DropdownContext);
+
+    if (!context) {
+      console.warn("Dropdown.Menu has to be wrapped in <Dropdown />");
+      return null;
+    }
+
+    const { isOpen, anchorEl, handleToggle } = context;
+
+    return (
+      <Popover
+        {...rest}
+        placement={placement}
+        ref={ref}
+        arrow={false}
+        className={cl("navds-dropdown__menu", className)}
+        offset={-4}
+        anchorEl={anchorEl}
+        open={isOpen}
+        onClose={() => {
+          handleToggle(false);
+          onClose && onClose();
+        }}
+      />
+    );
+  }
+) as MenuType;
+
+Menu.List = List;
+Menu.GroupedList = GroupedList;
+Menu.Divider = Divider;
+
+export default Menu;

package/src/dropdown/Toggle.tsx

@@ -0,0 +1,52 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "clsx";
+import { DropdownContext } from ".";
+
+export interface ToggleProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Button content
+   */
+  children: React.ReactNode;
+}
+
+export type ToggleType = React.ForwardRefExoticComponent<
+  ToggleProps & React.RefAttributes<HTMLButtonElement>
+>;
+
+export const Toggle: ToggleType = forwardRef(
+  ({ className, onClick, ...rest }, ref) => {
+    const context = useContext(DropdownContext);
+
+    if (!context) {
+      console.warn("Dropdown.Toggle has to be wrapped in <Dropdown />");
+      return null;
+    }
+
+    const { setAnchorEl, handleToggle, isOpen } = context;
+
+    return (
+      <button
+        {...rest}
+        ref={(el) => {
+          setAnchorEl(el);
+
+          if (typeof ref === "function") {
+            ref(el);
+          } else if (ref != null) {
+            ref.current = el;
+          }
+        }}
+        onClick={(e) => {
+          setAnchorEl(e.currentTarget);
+          handleToggle(!isOpen);
+          onClick && onClick(e);
+        }}
+        aria-expanded={isOpen}
+        className={cl("navds-dropdown__toggle", className)}
+      />
+    );
+  }
+);
+
+export default Toggle;