@navikt/ds-react 8.9.0 → 8.10.0

package/src/data/token-filter/FilterChip.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import { ActionMenu } from "../../action-menu";
+import { Popover } from "../../popover";
+import type { ExternalToken, OperationT } from "./TokenFilter.types";
+
+type TokenFilterChipsProps = {
+  tokens: ExternalToken[];
+  removeToken: (index: number) => void;
+  operation: OperationT;
+  updateOperation: (operation: OperationT) => void;
+};
+
+function TokenFilterChips(props: TokenFilterChipsProps) {
+  const { tokens, removeToken, operation, updateOperation } = props;
+
+  if (tokens.length === 0) {
+    return null;
+  }
+
+  return (
+    <ul className="aksel-property-filter__chips">
+      {tokens.map((token, index) => (
+        <TokenFilterChip
+          key={index}
+          onRemove={() => removeToken(index)}
+          token={token}
+          showOperation={index > 0}
+          operation={operation}
+          updateOperation={updateOperation}
+        />
+      ))}
+    </ul>
+  );
+}
+
+type TokenFilterChipProps = {
+  token: ExternalToken;
+  onRemove: () => void;
+  showOperation: boolean;
+  operation?: OperationT;
+  updateOperation?: (operation: OperationT) => void;
+};
+
+function TokenFilterChip(props: TokenFilterChipProps) {
+  const { token, onRemove, showOperation, operation } = props;
+  const [popupAnchor, setPopupAnchor] = useState<HTMLButtonElement | null>(
+    null,
+  );
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+
+  return (
+    <li className="aksel-property-filter__chip">
+      {showOperation && (
+        <ActionMenu>
+          <ActionMenu.Trigger>
+            <button
+              className="aksel-property-filter__chip-button"
+              data-type="operation"
+              /* onClick={onRemove} */
+            >
+              {operation === "and" ? "og" : "eller"}
+            </button>
+          </ActionMenu.Trigger>
+          <ActionMenu.Content>
+            <ActionMenu.Item onSelect={() => props.updateOperation?.("and")}>
+              AND
+            </ActionMenu.Item>
+            <ActionMenu.Item onSelect={() => props.updateOperation?.("or")}>
+              OR
+            </ActionMenu.Item>
+          </ActionMenu.Content>
+        </ActionMenu>
+      )}
+      <button
+        data-type="value"
+        className="aksel-property-filter__chip-button"
+        ref={setPopupAnchor}
+        onClick={() => setIsPopupOpen((open) => !open)}
+      >{`${token.propertyKey} ${token.operator} ${token.value}`}</button>
+      <Popover
+        open={isPopupOpen}
+        onClose={() => setIsPopupOpen(false)}
+        anchorEl={popupAnchor}
+        placement="bottom-start"
+      >
+        <Popover.Content>Edit filter</Popover.Content>
+      </Popover>
+      <button
+        data-type="remove"
+        className="aksel-property-filter__chip-button"
+        onClick={onRemove}
+      >
+        <XMarkIcon aria-hidden fontSize="1.25rem" />
+      </button>
+    </li>
+  );
+}
+
+export { TokenFilterChips };

package/src/data/token-filter/TokenFilter.tsx

@@ -1,9 +1,8 @@
 import React, { forwardRef, useState } from "react";
-import { Chips } from "../../chips";
-import { HStack } from "../../primitives/stack";
 import { cl } from "../../utils/helpers";
 import { AutoSuggest } from "./AutoSuggest";
 import { AutoCompleteOption } from "./AutoSuggest.types";
+import { TokenFilterChips } from "./FilterChip";
 import type {
   ExternalOptions,
   ExternalPropertyDefinitions,
@@ -46,7 +45,7 @@ export const TokenFilter = forwardRef<HTMLDivElement, TokenFilterProps>(
       parsedPropertyOptions,
     );
 
-    const { addToken, removeToken } = createActionHandlers({
+    const { addToken, removeToken, updateOperation } = createActionHandlers({
       query,
       onChange,
     });
@@ -116,27 +115,12 @@ export const TokenFilter = forwardRef<HTMLDivElement, TokenFilterProps>(
           open={open}
           setOpen={setOpen}
         />
-        <HStack marginBlock="space-8" gap="space-8">
-          {query.tokens.map((token, index) => {
-            return (
-              <React.Fragment
-                key={`${token.propertyKey}-${token.operator}-${token.value}-${index}`}
-              >
-                <Chips.Removable
-                  key={index}
-                  onClick={() => {
-                    removeToken(index);
-                  }}
-                >
-                  {`${token.propertyKey} ${token.operator} ${token.value}`}
-                </Chips.Removable>
-                {index < query.tokens.length - 1 && (
-                  <span>{query.operation}</span>
-                )}
-              </React.Fragment>
-            );
-          })}
-        </HStack>
+        <TokenFilterChips
+          tokens={query.tokens}
+          removeToken={removeToken}
+          updateOperation={updateOperation}
+          operation={query.operation}
+        />
       </div>
     );
   },

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

@@ -183,7 +183,7 @@ const initialValidation = (
   range?: DateRange,
   opt?: UseRangeDatepickerOptions,
 ): RangeValidationT => {
-  if (!range || !range?.from) {
+  if (!range?.from) {
     return getValidationMessage(
       { isEmpty: true, isValidDate: false },
       { isEmpty: true, isValidDate: false },

package/src/date/datepicker/parts/DatePicker.DayButton.tsx

@@ -43,12 +43,13 @@ const DatePickerDayButton = ({
         "rdp-day_range_start": modifiers.range_start,
         "rdp-day_range_middle": modifiers.range_middle,
         "rdp-day_range_end": modifiers.range_end,
+        "rdp-day__range-hover-middle": modifiers.hoverRange,
         "rdp-day_today": modifiers.today,
         "rdp-day_outside": modifiers.outside,
         "rdp-day__weekend": modifiers.weekend,
       })}
     >
-      {children}
+      <div className="rdp-day__inner">{children}</div>
     </button>
   );
 };

package/src/date/datepicker/parts/DatePicker.RDP.tsx

@@ -1,5 +1,5 @@
 import { isBefore, isSameDay, isWeekend } from "date-fns";
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { ClassNames, DayPicker, dateMatchModifiers } from "react-day-picker";
 import { Show } from "../../../primitives/responsive";
 import { omit } from "../../../utils-external";
@@ -8,7 +8,7 @@ import { useDateLocale } from "../../../utils/i18n/i18n.hooks";
 import { getLocaleFromString } from "../../Date.locale";
 import { DateRange, isDateRange } from "../../Date.typeutils";
 import { clampDisplayMonth, isDateOutsideRange } from "../../date-utils";
-import {
+import type {
   ConditionalModeProps,
   DatePickerDefaultProps,
 } from "../DatePicker.types";
@@ -70,8 +70,8 @@ const ReactDayPicker = ({
 }: ReactDayPickerProps) => {
   const langProviderLocale = useDateLocale();
   const locale = _locale ? getLocaleFromString(_locale) : langProviderLocale;
-
   const mode = _mode ?? ("single" as any);
+  const [dayHovering, setDayHovering] = useState<Date>();
 
   return (
     <DayPicker
@@ -173,28 +173,46 @@ const ReactDayPicker = ({
         ),
         Weekdays: useCallback(
           (props) => (
-            <thead {...props} className="rdp-head" aria-hidden>
-              <tr className="rdp-head_row">{props.children}</tr>
+            <thead className="rdp-head" aria-hidden>
+              <tr {...props} />
             </thead>
           ),
           [],
         ),
       }}
       className={cl("aksel-date", className)}
-      disabled={(day) => {
-        return (
-          (disableWeekends && isWeekend(day)) ||
-          dateMatchModifiers(day, disabled) ||
-          isDateOutsideRange({ day, fromDate, toDate })
-        );
-      }}
+      disabled={(day) =>
+        (disableWeekends && isWeekend(day)) ||
+        dateMatchModifiers(day, disabled) ||
+        isDateOutsideRange({ day, fromDate, toDate })
+      }
       weekStartsOn={1}
       modifiers={{
         weekend: (day) => disableWeekends && isWeekend(day),
+        hoverRange: (day: Date) => {
+          if (
+            !isDateRange(selected) ||
+            !selected.from ||
+            (selected.from && selected.to) ||
+            !dayHovering
+          ) {
+            return false;
+          }
+
+          const dayTime = day.getTime();
+          const fromTime = selected.from.getTime();
+          const hoverTime = dayHovering.getTime();
+
+          // Hovering after the start date
+          if (hoverTime > fromTime) {
+            return dayTime > fromTime && dayTime < hoverTime;
+          }
+          // Hovering before the start date
+          return dayTime < fromTime && dayTime > hoverTime;
+        },
       }}
-      modifiersClassNames={{
-        weekend: "rdp-day__weekend",
-      }}
+      onDayMouseEnter={setDayHovering}
+      onDayMouseLeave={() => setDayHovering(undefined)}
       // eslint-disable-next-line jsx-a11y/no-autofocus
       autoFocus={false}
       showWeekNumber={showWeekNumber}
@@ -203,6 +221,7 @@ const ReactDayPicker = ({
       startMonth={fromDate}
       endMonth={toDate}
       month={clampDisplayMonth({ month, start: fromDate, end: toDate })}
+      resetOnSelect // Range mode: Starts a new range when selecting a day even when a range is already selected
       {...omit(rest, ["onSelect", "role", "id", "defaultSelected"])}
     />
   );

package/src/date/monthpicker/parts/MonthPicker.Button.tsx

@@ -63,7 +63,7 @@ export const MonthButton = ({
 
   useEffect(() => {
     if (focus) {
-      isSameMonth(month, focus) && ref.current && ref.current.focus();
+      isSameMonth(month, focus) && ref.current?.focus();
       setFocus();
     }
   }, [focus, month, setFocus]);
@@ -111,14 +111,16 @@ export const MonthButton = ({
         setTabRoot(focus);
       }}
     >
-      <span aria-hidden="true">
-        {format(new Date(month), "LLL", { locale })
-          .replace(".", "")
-          .substring(0, 3)}
-      </span>
-      <span className="aksel-sr-only">
-        {format(new Date(month), "LLLL", { locale })}
-      </span>
+      <div className="rdp-day__inner">
+        <span aria-hidden="true">
+          {format(new Date(month), "LLL", { locale })
+            .replace(".", "")
+            .substring(0, 3)}
+        </span>
+        <span className="aksel-sr-only">
+          {format(new Date(month), "LLLL", { locale })}
+        </span>
+      </div>
     </button>
   );
 };

package/src/date/monthpicker/parts/MonthPicker.Standalone.tsx

@@ -16,7 +16,7 @@ export interface MonthPickerStandaloneProps extends Omit<
   "open" | "onClose" | "onOpenToggle" | "wrapperClassName" | "strategy"
 > {
   /**
-   * Monthpicker classname
+   * MonthPicker class name
    */
   className?: string;
 }

package/src/dialog/popup/DialogPopupInternal.tsx

@@ -266,7 +266,7 @@ function translateHeight(
 }
 
 function isFocusable(element: Element | null) {
-  if (!element || !element.isConnected) {
+  if (!element?.isConnected) {
     return false;
   }
 

package/src/form/checkbox/Checkbox.tsx

@@ -3,93 +3,66 @@ import { BodyShort } from "../../typography";
 import { omit, useId } from "../../utils-external";
 import { cl } from "../../utils/helpers";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
+import { CheckboxInput } from "./checkbox-input/CheckboxInput";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  (props, ref) => {
+  (props: CheckboxProps, forwardedRef) => {
     const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
     const descriptionId = useId();
 
+    const { className, description, children, indeterminate, hideLabel } =
+      props;
+
     return (
       <div
-        className={cl(
-          props.className,
-          "aksel-checkbox",
-          `aksel-checkbox--${size}`,
-          {
-            "aksel-checkbox--error": hasError,
-            "aksel-checkbox--disabled": inputProps.disabled,
-            "aksel-checkbox--readonly": readOnly,
-          },
-        )}
+        className={cl(className, "aksel-checkbox", `aksel-checkbox--${size}`, {
+          "aksel-checkbox--error": hasError,
+          "aksel-checkbox--disabled": inputProps.disabled,
+          "aksel-checkbox--readonly": readOnly,
+        })}
         data-color={hasError ? "danger" : props["data-color"]}
       >
-        <div className="aksel-checkbox__input-wrapper">
-          <input
-            {...omit(props, [
-              "children",
-              "size",
-              "error",
-              "description",
-              "hideLabel",
-              "indeterminate",
-              "errorId",
-              "readOnly",
-            ])}
-            {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-            aria-describedby={
-              cl(inputProps["aria-describedby"], {
-                [descriptionId]: props.description,
-              }) || undefined
-            }
-            type="checkbox"
-            className="aksel-checkbox__input"
-            ref={(el) => {
-              if (el) {
-                el.indeterminate = props.indeterminate ?? false;
-              }
-
-              if (typeof ref === "function") {
-                ref(el);
-              } else if (ref != null) {
-                ref.current = el;
-              }
-            }}
-          />
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 13 10"
-            fill="none"
-            focusable={false}
-            role="img"
-            aria-hidden
-            className="aksel-checkbox__icon"
-          >
-            <path
-              d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
+        <CheckboxInput
+          ref={forwardedRef}
+          {...omit(props, [
+            "children",
+            "size",
+            "error",
+            "description",
+            "hideLabel",
+            "indeterminate",
+            "errorId",
+            "readOnly",
+          ])}
+          {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+          aria-describedby={
+            cl(inputProps["aria-describedby"], {
+              [descriptionId]: description,
+            }) || undefined
+          }
+          indeterminate={indeterminate ?? false}
+          standalone={false}
+        />
         <BodyShort
           as="label"
           htmlFor={inputProps.id}
           size={size}
-          className={cl("aksel-checkbox__label", {
-            "aksel-sr-only": props.hideLabel,
-          })}
+          className="aksel-checkbox__label"
+          visuallyHidden={hideLabel}
         >
           {!nested && readOnly && <ReadOnlyIconWithTitle />}
-          {props.children}
+          {children}
         </BodyShort>
-        {props.description && (
+        {description && (
           <BodyShort
             id={descriptionId}
             size={size}
             className="aksel-form-field__subdescription aksel-checkbox__description"
+            visuallyHidden={hideLabel}
           >
-            {props.description}
+            {description}
           </BodyShort>
         )}
       </div>

package/src/form/checkbox/CheckboxGroup.context.ts

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+
+export interface CheckboxGroupContextProps {
+  readonly defaultValue?: readonly any[];
+  readonly value?: readonly any[];
+  toggleValue(value: any): void;
+}
+
+export const CheckboxGroupContext =
+  createContext<CheckboxGroupContextProps | null>(null);

package/src/form/checkbox/CheckboxGroup.tsx

@@ -1,17 +1,8 @@
-import React, { createContext, forwardRef, useContext, useState } from "react";
+import React, { forwardRef, useContext, useState } from "react";
 import { cl } from "../../utils/helpers";
 import { Fieldset, FieldsetProps } from "../fieldset";
 import { FieldsetContext } from "../fieldset/context";
-
-export interface CheckboxGroupState {
-  readonly defaultValue?: readonly any[];
-  readonly value?: readonly any[];
-  toggleValue(value: any): void;
-}
-
-export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
-  null,
-);
+import { CheckboxGroupContext } from "./CheckboxGroup.context";
 
 export interface CheckboxGroupProps extends Omit<
   FieldsetProps,
@@ -73,26 +64,25 @@ export const CheckboxGroup = forwardRef<
     };
 
     return (
-      <Fieldset
-        {...rest}
-        ref={ref}
-        className={cl(
-          className,
-          "aksel-checkbox-group",
-          `aksel-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`,
-        )}
-        _fieldsSupportNativeReadOnly={false}
+      <CheckboxGroupContext.Provider
+        value={{
+          value,
+          defaultValue,
+          toggleValue,
+        }}
       >
-        <CheckboxGroupContext.Provider
-          value={{
-            value,
-            defaultValue,
-            toggleValue,
-          }}
+        <Fieldset
+          {...rest}
+          ref={ref}
+          className={cl(
+            className,
+            "aksel-checkbox-group",
+            `aksel-checkbox-group--${rest.size ?? fieldset?.size ?? "medium"}`,
+          )}
         >
           <div className="aksel-checkboxes">{children}</div>
-        </CheckboxGroupContext.Provider>
-      </Fieldset>
+        </Fieldset>
+      </CheckboxGroupContext.Provider>
     );
   },
 );

package/src/form/checkbox/checkbox-input/CheckboxInput.tsx

@@ -0,0 +1,69 @@
+import React, { forwardRef, useCallback } from "react";
+import { cl } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
+
+type CheckboxInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  indeterminate?: boolean;
+  children?: never;
+  standalone?: boolean;
+  /**
+   * Reduces pseudo-element target-size.
+   */
+  compact?: boolean;
+};
+
+const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
+  (
+    {
+      className,
+      indeterminate,
+      standalone = true,
+      compact,
+      ...rest
+    }: CheckboxInputProps,
+    forwardedRef,
+  ) => {
+    const indeterminateRef = useCallback(
+      (el: HTMLInputElement | null) => {
+        if (el) {
+          el.indeterminate = indeterminate ?? false;
+        }
+      },
+      [indeterminate],
+    );
+
+    const mergedRef = useMergeRefs(indeterminateRef, forwardedRef);
+
+    return (
+      <div
+        className="aksel-checkbox__input-wrapper"
+        data-standalone={standalone}
+        data-compact={compact}
+      >
+        <input
+          {...rest}
+          className={cl("aksel-checkbox__input", className)}
+          type="checkbox"
+          ref={mergedRef}
+        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 13 10"
+          fill="none"
+          focusable={false}
+          role="img"
+          aria-hidden
+          className="aksel-checkbox__icon"
+        >
+          <path
+            d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    );
+  },
+);
+
+export { CheckboxInput };
+export type { CheckboxInputProps };

package/src/form/checkbox/types.ts

@@ -19,7 +19,7 @@ export interface CheckboxProps
    */
   children: React.ReactNode;
   /**
-   * Hides label and makes it viewable for screen-readers only.
+   * Visually hides label and description, and makes it viewable for screen-readers only.
    */
   hideLabel?: boolean;
   /**

package/src/form/checkbox/useCheckbox.ts

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { omit } from "../../utils-external";
 import { useFormField } from "../useFormField";
-import { CheckboxGroupContext } from "./CheckboxGroup";
+import { CheckboxGroupContext } from "./CheckboxGroup.context";
 import { CheckboxProps } from "./types";
 
 /**