@navikt/ds-react 1.3.0-alpha.0 → 1.3.1

package/src/datepicker/DatePicker.tsx

@@ -1,281 +0,0 @@
-import { FloatingPortal } from "@floating-ui/react-dom-interactions";
-import cl from "clsx";
-import { isWeekend } from "date-fns";
-import React, { createContext, forwardRef, useRef, useState } from "react";
-import {
-  DateRange,
-  DayPicker,
-  DayPickerBase,
-  isMatch,
-  Matcher,
-  SelectMultipleEventHandler,
-  SelectRangeEventHandler,
-  SelectSingleEventHandler,
-} from "react-day-picker";
-import { Popover, useId } from "..";
-import { omit } from "../util";
-import { Caption, DropdownCaption } from "./caption";
-import DatePickerInput, { DatePickerInputType } from "./DatePickerInput";
-import DatePickerStandalone, {
-  DatePickerStandaloneType,
-} from "./DatePickerStandalone";
-import { getLocaleFromString, labels } from "./utils";
-
-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;
-    };
-
-//github.com/gpbl/react-day-picker/blob/50b6dba/packages/react-day-picker/src/types/DayPickerBase.ts#L139
-export interface DatePickerDefaultProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">,
-    Pick<DayPickerBase, "month" | "onMonthChange" | "today" | "onDayClick"> {
-  /**
-   * Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle,
-   * or make your own with the open/onClose props
-   */
-  children?: React.ReactNode;
-  /**
-   * Changes datepicker locale
-   * @default "nb" (norsk bokmål)
-   */
-  locale?: "nb" | "nn" | "en";
-  /**
-   * The earliest Date available for the user to pick from
-   */
-  fromDate?: Date;
-  /**
-   * The latest Date available for the user to pick from
-   */
-  toDate?: Date;
-  /**
-   * Adds a `Select` for picking Year and Month
-   * Needs `fromDate` + `toDate` to be set!
-   * @default false
-   */
-  yearSelector?: boolean;
-  /**
-   * Apply the disabled modifier to the matching days.
-   * {@link https://react-day-picker.js.org/api/types/Matcher | Matcher type-definition}
-   */
-  disabled?: Matcher[];
-  /**
-   * Disable saturday and sunday.
-   * @default false
-   */
-  disableWeekends?: boolean;
-  /**
-   * Shows week numbers in left-column
-   * Use with caution, takes up valuable screenspace in small screens!
-   * @default false
-   */
-  showWeekNumber?: boolean;
-  /**
-   * Open state for user-controlled state
-   * @remark Controlled by component by default
-   */
-  open?: boolean;
-  /**
-   * onClose callback for user-controlled state
-   */
-  onClose?: () => void;
-  /**
-   * onOpenToggle callback for user-controlled-state
-   * @remark only called if `<DatePicker.Input />` is used
-   */
-  onOpenToggle?: () => void;
-  /**
-   * Classnames for adding classes
-   */
-  classNames?: {
-    /**
-     * Children wrapper
-     */
-    wrapper?: string;
-    /**
-     * DatePicker-wrapper
-     */
-    datepicker?: string;
-  };
-}
-
-export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
-
-interface DatePickerComponent
-  extends React.ForwardRefExoticComponent<DatePickerProps> {
-  Input: DatePickerInputType;
-  Standalone: DatePickerStandaloneType;
-}
-
-interface DatePickerContextProps {
-  open: boolean;
-  onOpen: () => void;
-  buttonRef: React.MutableRefObject<HTMLButtonElement | null> | null;
-  ariaId?: string;
-}
-
-export const DatePickerContext = createContext<DatePickerContextProps>({
-  open: false,
-  onOpen: () => null,
-  buttonRef: null,
-  ariaId: undefined,
-});
-
-export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
-  (
-    {
-      children,
-      locale = "nb",
-      yearSelector,
-      disabled = [],
-      disableWeekends = false,
-      showWeekNumber = false,
-      mode = "single",
-      selected,
-      id,
-      defaultSelected,
-      classNames,
-      open: _open,
-      onClose,
-      onOpenToggle,
-      ...rest
-    },
-    ref
-  ) => {
-    const ariaId = useId(id);
-    const [open, setOpen] = useState(_open ?? false);
-
-    const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const buttonRef = useRef<HTMLButtonElement | null>(null);
-
-    const [selectedDates, setSelectedDates] = React.useState<
-      Date | Date[] | DateRange | undefined
-    >(defaultSelected);
-
-    const handleSingleSelect: SelectSingleEventHandler = (selectedDay) => {
-      setSelectedDates(selectedDay);
-      selectedDay && (onClose?.() ?? setOpen(false));
-      selectedDay && buttonRef && buttonRef?.current?.focus();
-      rest?.onSelect && (rest?.onSelect as (val?: Date) => void)(selectedDay);
-    };
-
-    const handleMultipleSelect: SelectMultipleEventHandler = (selectedDays) => {
-      setSelectedDates(selectedDays);
-      rest?.onSelect &&
-        (rest?.onSelect as (val?: Date[]) => void)(selectedDays);
-    };
-
-    const handleRangeSelect: SelectRangeEventHandler = (selectedDays) => {
-      setSelectedDates(selectedDays);
-      selectedDays?.from && selectedDays?.to && (onClose?.() ?? setOpen(false));
-      selectedDays?.from &&
-        selectedDays?.to &&
-        buttonRef &&
-        buttonRef?.current?.focus();
-      rest?.onSelect &&
-        (rest?.onSelect as (val?: DateRange) => void)(selectedDays);
-    };
-
-    const overrideProps = {
-      onSelect:
-        mode === "single"
-          ? handleSingleSelect
-          : mode === "multiple"
-          ? handleMultipleSelect
-          : handleRangeSelect,
-    };
-
-    return (
-      <DatePickerContext.Provider
-        value={{
-          open: _open ?? open,
-          onOpen: () => {
-            setOpen((x) => !x);
-            onOpenToggle?.();
-          },
-          buttonRef,
-          ariaId,
-        }}
-      >
-        <div
-          ref={wrapperRef}
-          className={cl("navds-date__wrapper", classNames?.wrapper)}
-        >
-          {children}
-          <FloatingPortal>
-            {(_open ?? open) && (
-              <Popover
-                arrow={false}
-                anchorEl={wrapperRef.current}
-                open={_open ?? open}
-                onClose={() => onClose?.() ?? setOpen(false)}
-                placement="bottom-start"
-                id={ariaId}
-                aria-roledescription={
-                  locale === "en" ? "datepicker" : "datovelger"
-                }
-                role="dialog"
-                ref={ref}
-              >
-                <DayPicker
-                  locale={getLocaleFromString(locale)}
-                  mode={mode}
-                  {...overrideProps}
-                  selected={selected ?? selectedDates}
-                  components={{
-                    Caption: yearSelector ? DropdownCaption : Caption,
-                  }}
-                  className={cl("navds-date", classNames?.datepicker)}
-                  classNames={{
-                    vhidden: "navds-sr-only",
-                  }}
-                  disabled={(day) => {
-                    return (
-                      (disableWeekends && isWeekend(day)) ||
-                      isMatch(day, disabled)
-                    );
-                  }}
-                  weekStartsOn={1}
-                  initialFocus={false}
-                  labels={labels as any}
-                  modifiers={{
-                    weekend: (day) => disableWeekends && isWeekend(day),
-                  }}
-                  modifiersClassNames={{
-                    weekend: "rdp-day__weekend",
-                  }}
-                  showWeekNumber={showWeekNumber}
-                  {...omit(rest, ["onSelect"])}
-                />
-              </Popover>
-            )}
-          </FloatingPortal>
-        </div>
-      </DatePickerContext.Provider>
-    );
-  }
-) as DatePickerComponent;
-
-DatePicker.Input = DatePickerInput;
-DatePicker.Standalone = DatePickerStandalone;
-
-export default DatePicker;

package/src/datepicker/DatePickerInput.tsx

@@ -1,131 +0,0 @@
-import { Calender } from "@navikt/ds-icons";
-import cl from "clsx";
-import React, { forwardRef, InputHTMLAttributes, useContext } from "react";
-import { Button } from "../button";
-import { FormFieldProps, useFormField } from "../form/useFormField";
-import { BodyShort, ErrorMessage, Label } from "../typography";
-import { omit } from "../util";
-import { DatePickerContext } from "./DatePicker";
-
-export interface DatePickerInputProps
-  extends FormFieldProps,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
-  /**
-   * Input label
-   */
-  label: React.ReactNode;
-  /**
-   * Shows label and description for screenreaders-only
-   * @default false
-   */
-  hideLabel?: boolean;
-  /**
-   * Changes padding and font-sizes
-   * @default medium
-   */
-  size?: "medium" | "small";
-  /**
-   * @private
-   */
-  wrapperRef?: React.RefObject<HTMLDivElement>;
-}
-
-export type DatePickerInputType = React.ForwardRefExoticComponent<
-  DatePickerInputProps & React.RefAttributes<HTMLInputElement>
->;
-
-export const DatePickerInput: DatePickerInputType = forwardRef<
-  HTMLInputElement,
-  DatePickerInputProps
->((props, ref) => {
-  const { onOpen, buttonRef, ariaId, open } = useContext(DatePickerContext);
-
-  const {
-    inputProps,
-    size = "medium",
-    inputDescriptionId,
-    errorId,
-    showErrorMsg,
-    hasError,
-  } = useFormField(props, "datepicker-input");
-
-  const { className, hideLabel = false, label, description, ...rest } = props;
-
-  return (
-    <div
-      className={cl(
-        className,
-        "navds-form-field",
-        `navds-form-field--${size}`,
-        "navds-date__field",
-        {
-          "navds-date__field--error": hasError,
-          "navds-date__field--disabled": !!inputProps.disabled,
-        }
-      )}
-      ref={props?.wrapperRef}
-    >
-      <Label
-        htmlFor={inputProps.id}
-        size={size}
-        className={cl("navds-form-field__label", {
-          "navds-sr-only": hideLabel,
-        })}
-      >
-        {label}
-      </Label>
-      {!!description && (
-        <BodyShort
-          as="div"
-          className={cl("navds-form-field__description", {
-            "navds-sr-only": hideLabel,
-          })}
-          id={inputDescriptionId}
-          size={size}
-        >
-          {description}
-        </BodyShort>
-      )}
-      <div className="navds-date__field-wrapper">
-        <input
-          ref={ref}
-          {...omit(rest, ["error", "errorId", "size", "wrapperRef"])}
-          {...inputProps}
-          autoComplete="off"
-          aria-controls={ariaId}
-          className={cl(
-            className,
-            "navds-date__field-input",
-            "navds-text-field__input",
-            "navds-body-short",
-            `navds-body-${size}`
-          )}
-          size={14}
-          aria-haspopup="grid"
-        />
-        <Button
-          ref={buttonRef}
-          variant="tertiary"
-          type="button"
-          size="small"
-          onClick={() => onOpen()}
-          className="navds-date__field-button"
-          icon={
-            <Calender title={open ? "Lukk datovelger" : "Åpne datovelger"} />
-          }
-          aria-haspopup="grid"
-        />
-      </div>
-      <div
-        className="navds-form-field__error"
-        id={errorId}
-        aria-relevant="additions removals"
-        aria-live="polite"
-      >
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
-      </div>
-    </div>
-  );
-});
-
-export default DatePickerInput;

package/src/datepicker/DatePickerStandalone.tsx

@@ -1,121 +0,0 @@
-import cl from "clsx";
-import { isWeekend } from "date-fns";
-import React, { forwardRef } from "react";
-import {
-  DateRange,
-  DayPicker,
-  isMatch,
-  SelectMultipleEventHandler,
-  SelectRangeEventHandler,
-  SelectSingleEventHandler,
-} from "react-day-picker";
-import { Caption, DropdownCaption } from "./caption";
-import { ConditionalModeProps, DatePickerDefaultProps } from "./DatePicker";
-import { getLocaleFromString, labels } from "./utils";
-
-interface DatePickerStandaloneDefaultProps
-  extends Omit<
-    DatePickerDefaultProps,
-    "focusOnOpen" | "open" | "onClose" | "classNames" | "onOpenToggle"
-  > {
-  /**
-   * Wrapper className
-   */
-  className?: string;
-}
-
-export type DatePickerStandaloneProps = DatePickerStandaloneDefaultProps &
-  ConditionalModeProps;
-
-export type DatePickerStandaloneType = React.ForwardRefExoticComponent<
-  DatePickerStandaloneProps & React.RefAttributes<HTMLDivElement>
->;
-
-export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
-  HTMLDivElement,
-  DatePickerStandaloneProps
->(
-  (
-    {
-      children,
-      className,
-      locale = "nb",
-      yearSelector,
-      disabled = [],
-      disableWeekends = false,
-      showWeekNumber = false,
-      mode = "single",
-      selected,
-      id,
-      defaultSelected,
-      onSelect,
-      ...rest
-    },
-    ref
-  ) => {
-    const [selectedDates, setSelectedDates] = React.useState<
-      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 overrideProps = {
-      onSelect:
-        mode === "single"
-          ? handleSingleSelect
-          : mode === "multiple"
-          ? handleMultipleSelect
-          : handleRangeSelect,
-    };
-
-    return (
-      <div
-        ref={ref}
-        className={cl("navds-date__standalone-wrapper", className)}
-      >
-        <DayPicker
-          locale={getLocaleFromString(locale)}
-          mode={mode}
-          {...overrideProps}
-          selected={selected ?? selectedDates}
-          components={{
-            Caption: yearSelector ? DropdownCaption : Caption,
-          }}
-          className="navds-date"
-          classNames={{ vhidden: "navds-sr-only" }}
-          disabled={(day) => {
-            return (
-              (disableWeekends && isWeekend(day)) || isMatch(day, disabled)
-            );
-          }}
-          weekStartsOn={1}
-          initialFocus={false}
-          labels={labels as any}
-          modifiers={{
-            weekend: (day) => disableWeekends && isWeekend(day),
-          }}
-          modifiersClassNames={{
-            weekend: "rdp-day__weekend",
-          }}
-          showWeekNumber={showWeekNumber}
-          {...rest}
-        />
-      </div>
-    );
-  }
-);
-
-export default DatePickerStandalone;

package/src/datepicker/caption/Caption.tsx

@@ -1,51 +0,0 @@
-import { Left, Right } from "@navikt/ds-icons";
-import React from "react";
-import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
-import { Button, Label } from "../..";
-
-export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
-  const { goToMonth, nextMonth, previousMonth } = useNavigation();
-  const {
-    labels: { labelPrevious, labelNext },
-    formatters: { formatCaption },
-    locale,
-  } = useDayPicker();
-
-  const previousLabel = labelPrevious(previousMonth, { locale });
-  const nextLabel = labelNext(nextMonth, { locale });
-
-  return (
-    <div className="navds-date__caption">
-      <Label
-        as="span"
-        aria-live="polite"
-        aria-atomic="true"
-        id={id}
-        className="navds-date__caption-label"
-      >
-        {formatCaption(displayMonth, { locale })}
-      </Label>
-
-      <div className="navds-date__caption__month-wrapper">
-        <Button
-          aria-label={previousLabel}
-          variant="tertiary"
-          disabled={!previousMonth}
-          onClick={() => previousMonth && goToMonth(previousMonth)}
-          icon={<Left title="velg forrige månede" />}
-          className="navds-date__caption-button"
-        />
-        <Button
-          aria-label={nextLabel}
-          icon={<Right title="velg neste månede" />}
-          onClick={() => nextMonth && goToMonth(nextMonth)}
-          disabled={!nextMonth}
-          variant="tertiary"
-          className="navds-date__caption-button"
-        />
-      </div>
-    </div>
-  );
-};
-
-export default DatePickerCaption;

package/src/datepicker/caption/DropdownCaption.tsx

@@ -1,94 +0,0 @@
-import { Left, Right } from "@navikt/ds-icons";
-import { setMonth, setYear, startOfMonth } from "date-fns";
-import React from "react";
-import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
-import { Button, Select } from "../..";
-import { getMonths, getYears } from "../utils/get-dates";
-import { labelMonthDropdown, labelYearDropdown } from "../utils/labels";
-
-export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
-  const { goToMonth, nextMonth, previousMonth } = useNavigation();
-  const {
-    fromDate,
-    toDate,
-    formatters: { formatYearCaption, formatMonthCaption, formatCaption },
-    labels: { labelPrevious, labelNext },
-    locale,
-  } = useDayPicker();
-
-  if (!fromDate || !toDate) return <></>;
-
-  const handleYearChange: React.ChangeEventHandler<HTMLSelectElement> = (e) =>
-    goToMonth(setYear(startOfMonth(displayMonth), Number(e.target.value)));
-
-  const handleMonthChange: React.ChangeEventHandler<HTMLSelectElement> = (e) =>
-    goToMonth(setMonth(startOfMonth(displayMonth), Number(e.target.value)));
-
-  const years = getYears(fromDate, toDate);
-  const months = getMonths(fromDate, toDate, displayMonth);
-
-  const previousLabel = labelPrevious(previousMonth, { locale });
-  const nextLabel = labelNext(nextMonth, { locale });
-  const yearDropdownLabel = labelYearDropdown(locale);
-  const MonthDropdownLabel = labelMonthDropdown(locale);
-
-  return (
-    <div className="navds-date__caption-dropdown">
-      <span
-        aria-live="polite"
-        aria-atomic="true"
-        id={id}
-        className="navds-sr-only"
-      >
-        {formatCaption(displayMonth, { locale })}
-      </span>
-      <Button
-        aria-label={previousLabel}
-        variant={"tertiary"}
-        disabled={!previousMonth}
-        onClick={() => previousMonth && goToMonth(previousMonth)}
-        icon={<Left title="velg forrige månede" />}
-        className="navds-date__caption-button"
-      />
-
-      <div className="navds-date__caption__month-wrapper">
-        <Select
-          label={MonthDropdownLabel}
-          hideLabel
-          className="navds-date__caption__month"
-          value={displayMonth.getMonth()}
-          onChange={handleMonthChange}
-        >
-          {months.map((m) => (
-            <option key={m.getMonth()} value={m.getMonth()}>
-              {formatMonthCaption(m, { locale })}
-            </option>
-          ))}
-        </Select>
-        <Select
-          label={yearDropdownLabel}
-          hideLabel
-          value={displayMonth.getFullYear()}
-          onChange={handleYearChange}
-        >
-          {years.map((year) => (
-            <option key={year.getFullYear()} value={year.getFullYear()}>
-              {formatYearCaption(year, { locale })}
-            </option>
-          ))}
-        </Select>
-      </div>
-
-      <Button
-        aria-label={nextLabel}
-        icon={<Right title="velg neste månede" />}
-        onClick={() => nextMonth && goToMonth(nextMonth)}
-        disabled={!nextMonth}
-        variant={"tertiary"}
-        className="navds-date__caption-button"
-      />
-    </div>
-  );
-};
-
-export default DropdownCaption;

package/src/datepicker/caption/index.ts

@@ -1,2 +0,0 @@
-export { default as Caption } from "./Caption";
-export { default as DropdownCaption } from "./DropdownCaption";