@navikt/ds-react 5.6.0-beta.0 → 5.6.0

package/esm/layout/responsive/Responsive.js

@@ -11,11 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { Slot } from "../../util/Slot";
 const Responsive = forwardRef((_a, ref) => {
-    var { as: Component = "div", className, above, below, variant } = _a, rest = __rest(_a, ["as", "className", "above", "below", "variant"]);
+    var { as: Component = "div", className, above, below, variant, asChild } = _a, rest = __rest(_a, ["as", "className", "above", "below", "variant", "asChild"]);
     const aboveProp = variant === "show" ? above : below;
     const belowProp = variant === "show" ? below : above;
-    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("navds-responsive", className, {
+    const Comp = asChild ? Slot : Component;
+    return (React.createElement(Comp, Object.assign({}, rest, { ref: ref, className: cl("navds-responsive", className, {
             [`navds-responsive__above--${aboveProp}`]: aboveProp,
             [`navds-responsive__below--${belowProp}`]: belowProp,
         }) })));
@@ -29,14 +31,14 @@ const Responsive = forwardRef((_a, ref) => {
  * @example
  * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
  *   <div/>
- *   <Hide below="md">
+ *   <Hide below="md" asChild>
  *      // Only visible above "md"
  *   </Hide>
  * </HGrid>
  * @example
  * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
  *   <div/>
- *   <Hide above="md">
+ *   <Hide above="md" asChild>
  *      // Only visible below "md"
  *   </Hide>
  * </HGrid>
@@ -51,14 +53,14 @@ export const Hide = forwardRef((props, ref) => React.createElement(Responsive, O
  * @example
  * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
  *   <div/>
- *   <Show below="md">
+ *   <Show below="md" asChild>
  *      // Only visible below "md"
  *   </Show>
  * </HGrid>
  * @example
  * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
  *   <div/>
- *   <Show above="md">
+ *   <Show above="md" asChild>
  *      // Only visible above "md"
  *   </Show>
  * </HGrid>

package/esm/layout/responsive/Responsive.js.map

@@ -1 +1 @@
-{"version":3,"file":"Responsive.js","sourceRoot":"","sources":["../../../src/layout/responsive/Responsive.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAsB1D,MAAM,UAAU,GAAG,UAAU,CAI3B,CACE,EAAoE,EACpE,GAAG,EACH,EAAE;QAFF,EAAE,EAAE,EAAE,SAAS,GAAG,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,OAAW,EAAN,IAAI,cAAlE,gDAAoE,CAAF;IAGlE,MAAM,SAAS,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IACrD,MAAM,SAAS,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;YAC3C,CAAC,4BAA4B,SAAS,EAAE,CAAC,EAAE,SAAS;YACpD,CAAC,4BAA4B,SAAS,EAAE,CAAC,EAAE,SAAS;SACrD,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,oBAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,MAAM,IAAG,CACnE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,oBAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,MAAM,IAAG,CACnE,CAAC"}
+{"version":3,"file":"Responsive.js","sourceRoot":"","sources":["../../../src/layout/responsive/Responsive.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAyBvC,MAAM,UAAU,GAAG,UAAU,CAI3B,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAO,OAER,EADI,IAAI,cAPT,2DAQC,CADQ;IAIT,MAAM,SAAS,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IACrD,MAAM,SAAS,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAExC,OAAO,CACL,oBAAC,IAAI,oBACC,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;YAC3C,CAAC,4BAA4B,SAAS,EAAE,CAAC,EAAE,SAAS;YACpD,CAAC,4BAA4B,SAAS,EAAE,CAAC,EAAE,SAAS;SACrD,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,oBAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,MAAM,IAAG,CACnE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,oBAAC,UAAU,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAC,MAAM,IAAG,CACnE,CAAC"}

package/esm/layout/utilities/css.d.ts

@@ -8,7 +8,7 @@ export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
 export declare function getResponsiveValue<T = string>(componentName: string, componentProp: string, responsiveProp?: ResponsiveProp<T>): {
     [k: string]: T;
 };
-export declare function getResponsiveProps<T extends string>(componentName: string, componentProp: string, tokenSubgroup: string, responsiveProp?: ResponsiveProp<T>, tokenExceptions?: string[]): {
+export declare function getResponsiveProps<T extends string>(componentName: string, componentProp: string, tokenSubgroup: string, responsiveProp?: ResponsiveProp<T>, invert?: boolean, tokenExceptions?: string[]): {
     [x: string]: string;
 };
 export {};

package/esm/layout/utilities/css.js

@@ -12,26 +12,49 @@ export function getResponsiveValue(componentName, componentProp, responsiveProp)
         responsiveValue,
     ]));
 }
-export function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp, tokenExceptions = []) {
+const translateExceptionToCSS = (exception) => {
+    switch (exception) {
+        case "px":
+            return "1px";
+    }
+    return exception;
+};
+const translateTokenStringToCSS = (componentProp, tokenString, tokenSubgroup, tokenExceptions, invert) => {
+    return tokenString
+        .split(" ")
+        .map((x, _, arr) => {
+        if (componentProp === "margin-inline" && x === "full") {
+            const width = 100 / arr.length;
+            return `calc((100vw - ${width}%)/-2)`;
+        }
+        let output = `var(--a-${tokenSubgroup}-${x})`;
+        if (tokenExceptions.includes(x)) {
+            output = translateExceptionToCSS(x);
+        }
+        if (invert) {
+            if (x === "0") {
+                return `0`;
+            }
+            return `calc(-1 * ${output})`;
+        }
+        return output;
+    })
+        .join(" ");
+};
+export function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp, invert = false, tokenExceptions = []) {
     if (!responsiveProp) {
         return {};
     }
     if (typeof responsiveProp === "string") {
         return {
-            [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp
-                .split(" ")
-                .map((x) => tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`)
-                .join(" "),
+            [`--__ac-${componentName}-${componentProp}-xs`]: translateTokenStringToCSS(componentProp, responsiveProp, tokenSubgroup, tokenExceptions, invert),
         };
     }
-    return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => {
-        return [
-            `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
-            aliasOrScale
-                .split(" ")
-                .map((x) => tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`)
-                .join(" "),
-        ];
-    }));
+    const styleProps = {};
+    Object.entries(responsiveProp).forEach(([breakpointAlias, aliasOrScale]) => {
+        styleProps[`--__ac-${componentName}-${componentProp}-${breakpointAlias}`] =
+            translateTokenStringToCSS(componentProp, aliasOrScale, tokenSubgroup, tokenExceptions, invert);
+    });
+    return styleProps;
 }
 //# sourceMappingURL=css.js.map

package/esm/layout/utilities/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../src/layout/utilities/css.ts"],"names":[],"mappings":"AAoCA,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,cAAkC;IAElC,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACtC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAAE,cAAc;SAChE,CAAC;KACH;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,eAAe,CAAC,EAAE,EAAE,CAAC;QACzE,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE;QAC7D,eAAe;KAChB,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,aAAqB,EACrB,cAAkC,EAClC,kBAA4B,EAAE;IAE9B,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACtC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAAE,cAAc;iBAC5D,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACT,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,aAAa,IAAI,CAAC,GAAG,CACnE;iBACA,IAAI,CAAC,GAAG,CAAC;SACb,CAAC;KACH;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,EAAE;QACrE,OAAO;YACL,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE;YAC7D,YAAY;iBACT,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CACT,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,aAAa,IAAI,CAAC,GAAG,CACnE;iBACA,IAAI,CAAC,GAAG,CAAC;SACb,CAAC;IACJ,CAAC,CAAC,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../src/layout/utilities/css.ts"],"names":[],"mappings":"AAoCA,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,cAAkC;IAElC,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACtC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAAE,cAAc;SAChE,CAAC;KACH;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,eAAe,CAAC,EAAE,EAAE,CAAC;QACzE,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE;QAC7D,eAAe;KAChB,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,uBAAuB,GAAG,CAAC,SAAiB,EAAE,EAAE;IACpD,QAAQ,SAAS,EAAE;QACjB,KAAK,IAAI;YACP,OAAO,KAAK,CAAC;KAChB;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAChC,aAAqB,EACrB,WAAmB,EACnB,aAAqB,EACrB,eAAyB,EACzB,MAAe,EACf,EAAE;IACF,OAAO,WAAW;SACf,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE;QACjB,IAAI,aAAa,KAAK,eAAe,IAAI,CAAC,KAAK,MAAM,EAAE;YACrD,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;YAC/B,OAAO,iBAAiB,KAAK,QAAQ,CAAC;SACvC;QAED,IAAI,MAAM,GAAG,WAAW,aAAa,IAAI,CAAC,GAAG,CAAC;QAC9C,IAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;YAC/B,MAAM,GAAG,uBAAuB,CAAC,CAAC,CAAC,CAAC;SACrC;QACD,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,KAAK,GAAG,EAAE;gBACb,OAAO,GAAG,CAAC;aACZ;YACD,OAAO,aAAa,MAAM,GAAG,CAAC;SAC/B;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,aAAqB,EACrB,cAAkC,EAClC,MAAM,GAAG,KAAK,EACd,kBAA4B,EAAE;IAE9B,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACtC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAC7C,yBAAyB,CACvB,aAAa,EACb,cAAc,EACd,aAAa,EACb,eAAe,EACf,MAAM,CACP;SACJ,CAAC;KACH;IAED,MAAM,UAAU,GAAG,EAAE,CAAC;IACtB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,EAAE;QACzE,UAAU,CAAC,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE,CAAC;YACvE,yBAAyB,CACvB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,eAAe,EACf,MAAM,CACP,CAAC;IACN,CAAC,CAAC,CAAC;IACH,OAAO,UAAU,CAAC;AACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.6.0-beta.0",
+  "version": "5.6.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -18,7 +18,8 @@
   "module": "./esm/index.js",
   "typings": "./esm/index.d.ts",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "files": [
     "/cjs",
@@ -37,8 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.5.0",
-    "@navikt/ds-tokens": "^5.5.0",
+    "@navikt/aksel-icons": "^5.6.0",
+    "@navikt/ds-tokens": "^5.6.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/accordion/Accordion.tsx

@@ -91,6 +91,7 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
           variant,
           headingSize,
           size,
+          mounted: true,
         }}
       >
         <div

package/src/accordion/AccordionContext.tsx

@@ -5,11 +5,12 @@ export type AccordionContextProps = {
   headingSize?: "large" | "medium" | "small" | "xsmall";
   size?: "large" | "medium" | "small";
   openItems?: number[];
+  mounted: boolean;
 };
 
 export const AccordionContext = createContext<AccordionContextProps | null>({
-  variant: "default",
   headingSize: "small",
   size: "medium",
   openItems: [],
+  mounted: false,
 });

package/src/accordion/AccordionHeader.tsx

@@ -18,7 +18,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
     const itemContext = useContext(AccordionItemContext);
     const accordionContext = useContext(AccordionContext);
 
-    if (accordionContext === null || itemContext === null) {
+    if (itemContext === null) {
       console.error(
         "<Accordion.Header> has to be used within an <Accordion.Item>, which in turn must be within an <Accordion>"
       );
@@ -45,7 +45,7 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
           />
         </div>
         <Heading
-          size={accordionContext.headingSize ?? "small"}
+          size={accordionContext?.headingSize ?? "small"}
           as="span"
           className="navds-accordion__header-content"
         >

package/src/accordion/AccordionItem.tsx

@@ -54,6 +54,10 @@ const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
       shouldAnimate.current = true;
     };
 
+    if (!context?.mounted) {
+      console.error("<Accordion.Item> has to be used within an <Accordion>");
+    }
+
     return (
       <div
         className={cl("navds-accordion__item", className, {

package/src/date/datepicker/DatePicker.tsx

@@ -5,46 +5,56 @@ import {
   DateRange,
   DayPicker,
   DayPickerBase,
-  isMatch,
   Matcher,
-  SelectMultipleEventHandler,
-  SelectRangeEventHandler,
-  SelectSingleEventHandler,
+  isMatch,
 } from "react-day-picker";
-import { omit, Popover, useId } from "../..";
+import { Popover, omit, useId } from "../..";
 import { DateInputProps, DatePickerInput } from "../DateInput";
 import { DateContext } from "../context";
 import { getLocaleFromString, labels } from "../utils";
-import { Caption, DropdownCaption } from "./caption";
 import DatePickerStandalone, {
   DatePickerStandaloneType,
 } from "./DatePickerStandalone";
-import { DayButton } from "./DayButton";
-import { TableHead } from "./TableHead";
+import Caption from "./parts/Caption";
+import DayButton from "./parts/DayButton";
+import DropdownCaption from "./parts/DropdownCaption";
+import { HeadRow } from "./parts/HeadRow";
+import Row from "./parts/Row";
+import TableHead from "./parts/TableHead";
+import WeekNumber from "./parts/WeekNumber";
 
-export type ConditionalModeProps =
-  | {
-      mode?: "single";
-      onSelect?: (val?: Date) => void;
-      selected?: Date;
-      defaultSelected?: Date;
-    }
-  | {
-      mode?: "multiple";
-      onSelect?: (val?: Date[]) => void;
-      selected?: Date[];
-      defaultSelected?: Date[];
-      min?: number;
-      max?: number;
-    }
-  | {
-      mode?: "range";
-      onSelect?: (val?: DateRange) => void;
-      selected?: DateRange;
-      defaultSelected?: DateRange;
-      min?: number;
-      max?: number;
-    };
+export type SingleMode = {
+  mode?: "single";
+  onSelect?: (val?: Date) => void;
+  selected?: Date;
+  defaultSelected?: Date;
+  onWeekNumberClick?: never;
+};
+
+export type MultipleMode = {
+  mode: "multiple";
+  onSelect?: (val?: Date[]) => void;
+  selected?: Date[];
+  defaultSelected?: Date[];
+  min?: number;
+  max?: number;
+  /**
+   * Allows selecting a week at a time. Only used with mode="multiple".
+   */
+  onWeekNumberClick?: DayPickerBase["onWeekNumberClick"];
+};
+
+export type RangeMode = {
+  mode: "range";
+  onSelect?: (val?: DateRange) => void;
+  selected?: DateRange;
+  defaultSelected?: DateRange;
+  min?: number;
+  max?: number;
+  onWeekNumberClick?: never;
+};
+
+type ConditionalModeProps = SingleMode | MultipleMode | RangeMode;
 
 //github.com/gpbl/react-day-picker/blob/50b6dba/packages/react-day-picker/src/types/DayPickerBase.ts#L139
 export interface DatePickerDefaultProps
@@ -186,6 +196,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       onOpenToggle,
       strategy,
       bubbleEscape = false,
+      onWeekNumberClick,
       ...rest
     },
     ref
@@ -199,33 +210,20 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       Date | Date[] | DateRange | undefined
     >(defaultSelected);
 
-    const handleSingleSelect: SelectSingleEventHandler = (selectedDay) => {
-      setSelectedDates(selectedDay);
-      selectedDay && (onClose?.() ?? setOpen(false));
-      rest?.onSelect && (rest?.onSelect as (val?: Date) => void)(selectedDay);
-    };
+    const mode = rest.mode ?? ("single" as any);
 
-    const handleMultipleSelect: SelectMultipleEventHandler = (selectedDays) => {
-      setSelectedDates(selectedDays);
-      rest?.onSelect &&
-        (rest?.onSelect as (val?: Date[]) => void)(selectedDays);
-    };
+    /**
+     * @param selected Date | Date[] | DateRange | undefined
+     */
+    const handleSelect = (selected) => {
+      setSelectedDates(selected);
 
-    const handleRangeSelect: SelectRangeEventHandler = (selectedDays) => {
-      setSelectedDates(selectedDays);
-      selectedDays?.from && selectedDays?.to && (onClose?.() ?? setOpen(false));
-      rest?.onSelect &&
-        (rest?.onSelect as (val?: DateRange) => void)(selectedDays);
-    };
-
-    const overrideProps = {
-      mode: rest.mode ?? ("single" as any),
-      onSelect:
-        rest?.mode === "single"
-          ? handleSingleSelect
-          : rest?.mode === "multiple"
-          ? handleMultipleSelect
-          : handleRangeSelect,
+      if (rest.mode === "single") {
+        selected && (onClose?.() ?? setOpen(false));
+      } else if (rest.mode === "range") {
+        selected?.from && selected?.to && (onClose?.() ?? setOpen(false));
+      }
+      rest?.onSelect?.(selected);
     };
 
     return (
@@ -262,12 +260,16 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
             >
               <DayPicker
                 locale={getLocaleFromString(locale)}
-                {...overrideProps}
+                mode={mode}
+                onSelect={handleSelect}
                 selected={selected ?? selectedDates}
                 components={{
                   Caption: dropdownCaption ? DropdownCaption : Caption,
-                  Day: DayButton,
                   Head: TableHead,
+                  HeadRow,
+                  WeekNumber,
+                  Row,
+                  Day: DayButton,
                 }}
                 className={cl("navds-date", className)}
                 classNames={{
@@ -289,6 +291,9 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   weekend: "rdp-day__weekend",
                 }}
                 showWeekNumber={showWeekNumber}
+                onWeekNumberClick={
+                  mode === "multiple" ? onWeekNumberClick : undefined
+                }
                 fixedWeeks
                 showOutsideDays
                 {...omit(rest, ["onSelect"])}

package/src/date/datepicker/DatePickerStandalone.tsx

@@ -1,19 +1,22 @@
 import cl from "clsx";
 import isWeekend from "date-fns/isWeekend";
 import React, { forwardRef } from "react";
-import {
-  DateRange,
-  DayPicker,
-  isMatch,
-  SelectMultipleEventHandler,
-  SelectRangeEventHandler,
-  SelectSingleEventHandler,
-} from "react-day-picker";
+import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../..";
 import { getLocaleFromString, labels } from "../utils";
-import { Caption, DropdownCaption } from "./caption";
-import { ConditionalModeProps, DatePickerDefaultProps } from "./DatePicker";
-import { TableHead } from "./TableHead";
+import {
+  DatePickerDefaultProps,
+  MultipleMode,
+  RangeMode,
+  SingleMode,
+} from "./DatePicker";
+import TableHead from "./parts/TableHead";
+import WeekNumber from "./parts/WeekNumber";
+import Caption from "./parts/Caption";
+import DropdownCaption from "./parts/DropdownCaption";
+import Row from "./parts/Row";
+import { HeadRow } from "./parts/HeadRow";
+import DayButton from "./parts/DayButton";
 
 interface DatePickerStandaloneDefaultProps
   extends Omit<
@@ -31,8 +34,10 @@ interface DatePickerStandaloneDefaultProps
   fixedWeeks?: boolean;
 }
 
+type StandaloneConditionalModeProps = SingleMode | MultipleMode | RangeMode;
+
 export type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps &
-  ConditionalModeProps;
+  StandaloneConditionalModeProps;
 
 export type DatePickerStandaloneType = React.ForwardRefExoticComponent<
   DatePickerStandaloneProps & React.RefAttributes<HTMLDivElement>
@@ -53,7 +58,8 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
       selected,
       defaultSelected,
       onSelect,
-      fixedWeeks = true,
+      fixedWeeks = false,
+      onWeekNumberClick,
       ...rest
     },
     ref
@@ -62,29 +68,14 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
       Date | Date[] | DateRange | undefined
     >(defaultSelected);
 
-    const handleSingleSelect: SelectSingleEventHandler = (selectedDay) => {
-      setSelectedDates(selectedDay);
-      onSelect && (onSelect as (val?: Date) => void)(selectedDay);
-    };
-
-    const handleMultipleSelect: SelectMultipleEventHandler = (selectedDays) => {
-      setSelectedDates(selectedDays);
-      onSelect && (onSelect as (val?: Date[]) => void)(selectedDays);
-    };
-
-    const handleRangeSelect: SelectRangeEventHandler = (selectedDays) => {
-      setSelectedDates(selectedDays);
-      onSelect && (onSelect as (val?: DateRange) => void)(selectedDays);
-    };
+    const mode = rest.mode ?? ("single" as any);
 
-    const overrideProps = {
-      mode: rest.mode ?? ("single" as any),
-      onSelect:
-        rest?.mode === "single"
-          ? handleSingleSelect
-          : rest?.mode === "multiple"
-          ? handleMultipleSelect
-          : handleRangeSelect,
+    /**
+     * @param selected Date | Date[] | DateRange | undefined
+     */
+    const handleSelect = (selected) => {
+      setSelectedDates(selected);
+      onSelect?.(selected);
     };
 
     return (
@@ -94,11 +85,16 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
       >
         <DayPicker
           locale={getLocaleFromString(locale)}
-          {...overrideProps}
+          mode={mode}
+          onSelect={handleSelect}
           selected={selected ?? selectedDates}
           components={{
             Caption: dropdownCaption ? DropdownCaption : Caption,
             Head: TableHead,
+            HeadRow,
+            WeekNumber,
+            Row,
+            Day: DayButton,
           }}
           className="navds-date"
           classNames={{ vhidden: "navds-sr-only" }}
@@ -117,9 +113,12 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
             weekend: "rdp-day__weekend",
           }}
           showWeekNumber={showWeekNumber}
+          onWeekNumberClick={
+            mode === "multiple" ? onWeekNumberClick : undefined
+          }
           fixedWeeks={fixedWeeks}
           showOutsideDays
-          {...omit(rest, ["onSelect", "children", "id"])}
+          {...omit(rest, ["children", "id"])}
         />
       </div>
     );

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

@@ -2,8 +2,9 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React, { useId, useState } from "react";
 import { useDatepicker, useRangeDatepicker } from "..";
-import { Button } from "../..";
+import { Button, HGrid, VStack } from "../..";
 import DatePicker, { DatePickerProps } from "./DatePicker";
+import isSameDay from "date-fns/isSameDay";
 
 const disabledDays = [
   new Date("Oct 10 2022"),
@@ -367,3 +368,67 @@ export const Readonly = () => {
     </div>
   );
 };
+
+export const StandaloneOptions = () => {
+  return (
+    <HGrid columns={{ xs: 1, md: 2 }} gap="8">
+      <DatePicker.Standalone today={new Date("Nov 23 2022")} />
+      <DatePicker.Standalone
+        dropdownCaption
+        fromDate={new Date("Aug 23 2019")}
+        toDate={new Date("Feb 23 2024")}
+        today={new Date("Nov 23 2022")}
+      />
+      <DatePicker.Standalone showWeekNumber today={new Date("Nov 23 2022")} />
+      <DatePicker.Standalone
+        showWeekNumber
+        mode="multiple"
+        onWeekNumberClick={console.log}
+        today={new Date("Nov 23 2022")}
+        disableWeekends
+      />
+      <DatePicker.Standalone
+        mode="range"
+        today={new Date("Nov 23 2022")}
+        disableWeekends
+      />
+    </HGrid>
+  );
+};
+
+export const WeekDayClick = () => {
+  const [days, setDays] = useState<Date[]>([]);
+
+  const handleWeekClick = (dates: Date[]) => {
+    const hasDayInWeek = !!days.find((x) => dates.find((y) => isSameDay(x, y)));
+
+    const cleanup = days.filter((y) => !dates.find((z) => isSameDay(y, z)));
+    if (hasDayInWeek) {
+      setDays(cleanup);
+    } else {
+      setDays([...dates, ...cleanup]);
+    }
+  };
+
+  return (
+    <VStack gap="8">
+      <DatePicker.Standalone
+        showWeekNumber
+        mode="multiple"
+        onWeekNumberClick={(_, dates) => handleWeekClick(dates)}
+        onSelect={(dates) => dates && setDays(dates)}
+        selected={days}
+        today={new Date("Nov 23 2022")}
+      />
+      <DatePicker.Standalone
+        showWeekNumber
+        mode="multiple"
+        onWeekNumberClick={(_, dates) => handleWeekClick(dates)}
+        onSelect={(dates) => dates && setDays(dates)}
+        selected={days}
+        today={new Date("Nov 23 2022")}
+        disableWeekends
+      />
+    </VStack>
+  );
+};