@dnb/eufemia 10.73.2 → 10.75.0

package/components/date-picker/DatePickerProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerProvider.js","names":["React","useCallback","useContext","isValid","format","differenceInCalendarDays","SharedContext","correctV1Format","isDisabled","DatePickerContext","useViews","useDates","useLastEventCallCache","useHoverDate","defaultProps","returnFormat","DatePickerProvider","externalProps","props","_objectSpread","date","startDate","endDate","startMonth","endMonth","minDate","maxDate","dateFormat","range","correctInvalidDate","attributes","returnFormatProp","children","onChange","setReturnObject","hidePicker","sharedContext","dates","updateDates","previousDateProps","isRange","shouldCorrectDate","views","setViews","setHasClickedCalendarDay","lastEventCallCache","setLastEventCallCache","hoverDate","setHoverDate","getReturnObject","_ref","arguments","length","undefined","event","rest","_objectWithoutProperties","_excluded","partialStartDate","partialEndDate","invalidStartDate","invalidEndDate","startDateIsValid","Boolean","endDateIsValid","hasMinOrMaxDates","returnObject","days_between","start_date","end_date","is_valid_start_date","is_valid_end_date","partialDate","invalidDate","is_valid","callOnChangeHandler","createElement","Provider","value","translation"],"sources":["../../../../src/components/date-picker/DatePickerProvider.tsx"],"sourcesContent":["/**\n * Web DatePicker Provider\n *\n */\n\nimport React, { useCallback, useContext } from 'react'\nimport type {\n  DatePickerEventAttributes,\n  DatePickerAllProps,\n  DatePickerProps,\n} from './DatePicker'\n\nimport isValid from 'date-fns/isValid'\nimport format from 'date-fns/format'\nimport differenceInCalendarDays from 'date-fns/differenceInCalendarDays'\n\nimport SharedContext from '../../shared/Context'\nimport { correctV1Format, isDisabled } from './DatePickerCalc'\nimport DatePickerContext, {\n  DatePickerContextValues,\n} from './DatePickerContext'\nimport useViews from './hooks/useViews'\nimport useDates, { DatePickerDates } from './hooks/useDates'\nimport useLastEventCallCache from './hooks/useLastEventCallCache'\nimport { InvalidDates } from './DatePickerInput'\nimport { PartialDates } from './hooks/usePartialDates'\nimport useHoverDate from './hooks/useHoverDate'\n\ntype DatePickerProviderProps = DatePickerAllProps & {\n  setReturnObject: (\n    func: DatePickerContextValues['getReturnObject']\n  ) => DatePickerContextValues['getReturnObject']\n  hidePicker?: DatePickerContextValues['hidePicker']\n  attributes?: DatePickerEventAttributes\n  children: React.ReactNode\n}\n\nexport type DatePickerChangeEvent<E> = DatePickerDates &\n  InvalidDates & {\n    nr?: number\n    hidePicker?: boolean\n    event?: E\n  }\n\nexport type GetReturnObjectParams<E> = DatePickerDates &\n  PartialDates &\n  InvalidDates & {\n    event?: E\n  }\n\n// TODO: convert properties on event handler return objects to camelCase, constitutes a breaking change\nexport type ReturnObject<E> = InvalidDates &\n  PartialDates & {\n    event?: E\n    attributes?: Record<string, unknown>\n    days_between?: number\n    date?: string | null\n    start_date?: string | null\n    end_date?: string | null\n    is_valid?: boolean\n    is_valid_start_date?: boolean\n    is_valid_end_date?: boolean\n  }\n\nconst defaultProps: Partial<DatePickerProps> = {\n  returnFormat: 'yyyy-MM-dd', // used in date-fns v1: YYYY-MM-DD\n}\n\nfunction DatePickerProvider(externalProps: DatePickerProviderProps) {\n  const props = { ...defaultProps, ...externalProps }\n\n  const {\n    date,\n    startDate,\n    endDate,\n    startMonth,\n    endMonth,\n    minDate,\n    maxDate,\n    dateFormat,\n    range,\n    correctInvalidDate,\n    attributes,\n    returnFormat: returnFormatProp,\n    children,\n    onChange,\n    setReturnObject,\n    hidePicker,\n  } = props\n\n  const sharedContext = useContext(SharedContext)\n\n  const { dates, updateDates, previousDateProps } = useDates(\n    {\n      date,\n      startDate,\n      endDate,\n      startMonth,\n      endMonth,\n      minDate,\n      maxDate,\n    },\n    {\n      dateFormat: dateFormat,\n      isRange: range,\n      shouldCorrectDate: correctInvalidDate,\n    }\n  )\n\n  const { views, setViews, setHasClickedCalendarDay } = useViews({\n    startMonth: dates.startMonth,\n    endMonth: dates.endMonth,\n    isRange: range,\n  })\n\n  const [lastEventCallCache, setLastEventCallCache] =\n    useLastEventCallCache({\n      startDate: dates.startDate,\n      endDate: dates.endDate,\n    })\n\n  const { hoverDate, setHoverDate } = useHoverDate()\n\n  const getReturnObject = useCallback(\n    <E,>({ event = null, ...rest }: GetReturnObjectParams<E> = {}) => {\n      const {\n        startDate,\n        endDate,\n        partialStartDate,\n        partialEndDate,\n        invalidStartDate,\n        invalidEndDate,\n      } = {\n        ...views,\n        ...dates,\n        ...rest,\n      }\n\n      const returnFormat = correctV1Format(returnFormatProp)\n      const startDateIsValid = Boolean(startDate && isValid(startDate))\n      const endDateIsValid = Boolean(endDate && isValid(endDate))\n      const hasMinOrMaxDates = minDate || maxDate\n\n      const returnObject: ReturnObject<E> = {\n        event,\n        attributes: attributes || {},\n      }\n\n      // Handle range props\n      if (range) {\n        return {\n          ...returnObject,\n          days_between:\n            startDateIsValid && endDateIsValid\n              ? differenceInCalendarDays(endDate, startDate)\n              : null,\n          start_date: startDateIsValid\n            ? format(startDate, returnFormat)\n            : null,\n          end_date: endDateIsValid ? format(endDate, returnFormat) : null,\n          is_valid_start_date:\n            hasMinOrMaxDates &&\n            startDateIsValid &&\n            isDisabled(startDate, dates.minDate, dates.maxDate)\n              ? false\n              : startDateIsValid,\n          is_valid_end_date:\n            hasMinOrMaxDates &&\n            endDateIsValid &&\n            isDisabled(endDate, dates.minDate, dates.maxDate)\n              ? false\n              : endDateIsValid,\n          partialStartDate,\n          partialEndDate,\n          invalidStartDate,\n          invalidEndDate,\n        }\n      }\n\n      return {\n        ...returnObject,\n        date: startDateIsValid ? format(startDate, returnFormat) : null,\n        partialDate: partialStartDate,\n        // Can be removed in v11, in favor to partialDate,\n        // to keep the naming logic the same as with date and invalidDate when not in range mode\n        partialStartDate,\n        invalidDate: invalidStartDate,\n        is_valid:\n          hasMinOrMaxDates &&\n          startDateIsValid &&\n          isDisabled(startDate, dates.minDate, dates.maxDate)\n            ? false\n            : startDateIsValid,\n      }\n    },\n    [dates, views, attributes, maxDate, minDate, range, returnFormatProp]\n  )\n\n  const callOnChangeHandler = useCallback(\n    <E,>(event: E & DatePickerDates) => {\n      /**\n       * Prevent on_change to be fired twice if date not has actually changed\n       */\n      if (\n        lastEventCallCache &&\n        lastEventCallCache.startDate === event.startDate &&\n        lastEventCallCache.endDate === event.endDate\n      ) {\n        return // stop here\n      }\n\n      onChange?.(getReturnObject({ ...dates, ...event }))\n\n      setLastEventCallCache({\n        startDate: event.startDate,\n        endDate: event.endDate,\n      })\n    },\n    [\n      getReturnObject,\n      dates,\n      onChange,\n      lastEventCallCache,\n      setLastEventCallCache,\n    ]\n  )\n\n  // Is this at any point something other than a function?\n  if (typeof setReturnObject === 'function') {\n    setReturnObject(getReturnObject)\n  }\n\n  return (\n    <DatePickerContext.Provider\n      value={{\n        translation: sharedContext.translation,\n        updateDates,\n        getReturnObject,\n        callOnChangeHandler,\n        hidePicker: hidePicker,\n        props,\n        ...dates,\n        previousDateProps,\n        views,\n        setViews,\n        setHasClickedCalendarDay,\n        hoverDate,\n        setHoverDate,\n      }}\n    >\n      {children}\n    </DatePickerContext.Provider>\n  )\n}\n\nexport default DatePickerProvider\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DatePickerProvider.js","names":["React","useCallback","useContext","useMemo","isValid","format","differenceInCalendarDays","SharedContext","correctV1Format","isDisabled","DatePickerContext","useViews","useDates","useLastEventCallCache","useHoverDate","useSubmittedDates","DatePickerProvider","props","sharedContext","returnFormat","defaultReturnFormat","dateFormat","defaultDateFormat","translation","DatePicker","date","startDate","endDate","startMonth","endMonth","minDate","maxDate","range","attributes","returnFormatProp","children","onChange","setReturnObject","hidePicker","correctInvalidDate","dates","updateDates","previousDateProps","isRange","shouldCorrectDate","views","setViews","setHasClickedCalendarDay","lastEventCallCache","setLastEventCallCache","hoverDate","setHoverDate","submittedDatesRef","setSubmittedDates","getReturnObject","_ref","arguments","length","undefined","event","rest","_objectWithoutProperties","_excluded","partialStartDate","partialEndDate","invalidStartDate","invalidEndDate","_objectSpread","startDateIsValid","Boolean","endDateIsValid","hasMinOrMaxDates","returnObject","days_between","start_date","end_date","is_valid_start_date","is_valid_end_date","partialDate","invalidDate","is_valid","callOnChangeHandler","createElement","Provider","value","submittedDates","current"],"sources":["../../../../src/components/date-picker/DatePickerProvider.tsx"],"sourcesContent":["/**\n * Web DatePicker Provider\n *\n */\n\nimport React, { useCallback, useContext, useMemo } from 'react'\nimport type {\n  DatePickerEventAttributes,\n  DatePickerAllProps,\n} from './DatePicker'\n\nimport isValid from 'date-fns/isValid'\nimport format from 'date-fns/format'\nimport differenceInCalendarDays from 'date-fns/differenceInCalendarDays'\n\nimport SharedContext from '../../shared/Context'\nimport { correctV1Format, isDisabled } from './DatePickerCalc'\nimport DatePickerContext, {\n  DatePickerContextValues,\n} from './DatePickerContext'\nimport useViews from './hooks/useViews'\nimport useDates, { DatePickerDates } from './hooks/useDates'\nimport useLastEventCallCache from './hooks/useLastEventCallCache'\nimport { InvalidDates } from './DatePickerInput'\nimport { PartialDates } from './hooks/usePartialDates'\nimport useHoverDate from './hooks/useHoverDate'\nimport useSubmittedDates from './hooks/useSubmittedDates'\n\ntype DatePickerProviderProps = DatePickerAllProps & {\n  setReturnObject: (\n    func: DatePickerContextValues['getReturnObject']\n  ) => DatePickerContextValues['getReturnObject']\n  hidePicker?: DatePickerContextValues['hidePicker']\n  attributes?: DatePickerEventAttributes\n  children: React.ReactNode\n}\n\nexport type DatePickerChangeEvent<E> = DatePickerDates &\n  InvalidDates & {\n    nr?: number\n    hidePicker?: boolean\n    event?: E\n  }\n\nexport type GetReturnObjectParams<E> = DatePickerDates &\n  PartialDates &\n  InvalidDates & {\n    event?: E\n  }\n\n// TODO: convert properties on event handler return objects to camelCase, constitutes a breaking change\nexport type ReturnObject<E> = InvalidDates &\n  PartialDates & {\n    event?: E\n    attributes?: Record<string, unknown>\n    days_between?: number\n    date?: string | null\n    start_date?: string | null\n    end_date?: string | null\n    is_valid?: boolean\n    is_valid_start_date?: boolean\n    is_valid_end_date?: boolean\n  }\n\nfunction DatePickerProvider(props: DatePickerProviderProps) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    returnFormat: defaultReturnFormat,\n    dateFormat: defaultDateFormat,\n  } = sharedContext.translation.DatePicker\n\n  const {\n    date,\n    startDate,\n    endDate,\n    startMonth,\n    endMonth,\n    minDate,\n    maxDate,\n    dateFormat = defaultDateFormat,\n    range,\n    attributes,\n    returnFormat: returnFormatProp,\n    children,\n    onChange,\n    setReturnObject,\n    hidePicker,\n    // Deprecated – can be removed in v11\n    correctInvalidDate,\n  } = props\n\n  const returnFormat = useMemo(\n    () => correctV1Format(returnFormatProp || defaultReturnFormat),\n    [returnFormatProp, defaultReturnFormat]\n  )\n\n  const { dates, updateDates, previousDateProps } = useDates(\n    {\n      date,\n      startDate,\n      endDate,\n      startMonth,\n      endMonth,\n      minDate,\n      maxDate,\n    },\n    {\n      dateFormat,\n      isRange: range,\n      // Deprecated – can be removed in v11\n      shouldCorrectDate: correctInvalidDate,\n    }\n  )\n\n  const { views, setViews, setHasClickedCalendarDay } = useViews({\n    startMonth: dates.startMonth,\n    endMonth: dates.endMonth,\n    isRange: range,\n  })\n\n  const [lastEventCallCache, setLastEventCallCache] =\n    useLastEventCallCache({\n      startDate: dates.startDate,\n      endDate: dates.endDate,\n    })\n\n  const { hoverDate, setHoverDate } = useHoverDate()\n\n  const { submittedDatesRef, setSubmittedDates } = useSubmittedDates()\n\n  const getReturnObject = useCallback(\n    <E,>({ event = null, ...rest }: GetReturnObjectParams<E> = {}) => {\n      const {\n        startDate,\n        endDate,\n        partialStartDate,\n        partialEndDate,\n        invalidStartDate,\n        invalidEndDate,\n      } = {\n        ...views,\n        ...dates,\n        ...rest,\n      }\n\n      const startDateIsValid = Boolean(startDate && isValid(startDate))\n      const endDateIsValid = Boolean(endDate && isValid(endDate))\n      const hasMinOrMaxDates = minDate || maxDate\n\n      const returnObject: ReturnObject<E> = {\n        event,\n        attributes: attributes || {},\n      }\n\n      // Handle range props\n      if (range) {\n        return {\n          ...returnObject,\n          days_between:\n            startDateIsValid && endDateIsValid\n              ? differenceInCalendarDays(endDate, startDate)\n              : null,\n          start_date: startDateIsValid\n            ? format(startDate, returnFormat)\n            : null,\n          end_date: endDateIsValid ? format(endDate, returnFormat) : null,\n          is_valid_start_date:\n            hasMinOrMaxDates &&\n            startDateIsValid &&\n            isDisabled(startDate, dates.minDate, dates.maxDate)\n              ? false\n              : startDateIsValid,\n          is_valid_end_date:\n            hasMinOrMaxDates &&\n            endDateIsValid &&\n            isDisabled(endDate, dates.minDate, dates.maxDate)\n              ? false\n              : endDateIsValid,\n          partialStartDate,\n          partialEndDate,\n          invalidStartDate,\n          invalidEndDate,\n        }\n      }\n\n      return {\n        ...returnObject,\n        date: startDateIsValid ? format(startDate, returnFormat) : null,\n        partialDate: partialStartDate,\n        // Can be removed in v11, in favor to partialDate,\n        // to keep the naming logic the same as with date and invalidDate when not in range mode\n        partialStartDate,\n        invalidDate: invalidStartDate,\n        is_valid:\n          hasMinOrMaxDates &&\n          startDateIsValid &&\n          isDisabled(startDate, dates.minDate, dates.maxDate)\n            ? false\n            : startDateIsValid,\n      }\n    },\n    [dates, views, attributes, maxDate, minDate, range, returnFormat]\n  )\n\n  const callOnChangeHandler = useCallback(\n    <E,>(event: E & DatePickerDates) => {\n      /**\n       * Prevent on_change to be fired twice if date not has actually changed\n       */\n      if (\n        lastEventCallCache &&\n        lastEventCallCache.startDate === event.startDate &&\n        lastEventCallCache.endDate === event.endDate\n      ) {\n        return // stop here\n      }\n\n      onChange?.(getReturnObject({ ...dates, ...event }))\n\n      setLastEventCallCache({\n        startDate: event.startDate,\n        endDate: event.endDate,\n      })\n    },\n    [\n      getReturnObject,\n      dates,\n      onChange,\n      lastEventCallCache,\n      setLastEventCallCache,\n    ]\n  )\n\n  // Is this at any point something other than a function?\n  if (typeof setReturnObject === 'function') {\n    setReturnObject(getReturnObject)\n  }\n\n  return (\n    <DatePickerContext.Provider\n      value={{\n        translation: sharedContext.translation,\n        updateDates,\n        getReturnObject,\n        callOnChangeHandler,\n        hidePicker: hidePicker,\n        props,\n        dateFormat,\n        ...dates,\n        previousDateProps,\n        submittedDates: submittedDatesRef.current,\n        setSubmittedDates,\n        views,\n        setViews,\n        setHasClickedCalendarDay,\n        hoverDate,\n        setHoverDate,\n      }}\n    >\n      {children}\n    </DatePickerContext.Provider>\n  )\n}\n\nexport default DatePickerProvider\n"],"mappings":"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","ignoreList":[]}

package/components/date-picker/DatePickerRange.d.ts

@@ -12,12 +12,8 @@ export type DatePickerRangeProps = Omit<React.HTMLProps<HTMLElement>, 'onChange'
     isLink?: boolean;
     isSync?: boolean;
     onlyMonth?: boolean;
-    hideNav?: boolean;
-    views?: [{
-        nextBtn: false;
-        prevBtn: false;
-    }];
-    onChange?: (event: DatePickerChangeEvent<React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent<HTMLTableElement>>) => void;
+    hideNavigation?: boolean;
+    onPickerChange?: (event: DatePickerChangeEvent<React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent<HTMLTableElement>>) => void;
 };
-declare function DatePickerRange(props: DatePickerRangeProps): import("react/jsx-runtime").JSX.Element;
+declare function DatePickerRange({ onPickerChange, ...props }: DatePickerRangeProps): import("react/jsx-runtime").JSX.Element;
 export default DatePickerRange;

package/components/date-picker/DatePickerRange.js

@@ -2,61 +2,36 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["onPickerChange"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback, useContext } from 'react';
-import addMonths from 'date-fns/addMonths';
-import subMonths from 'date-fns/subMonths';
 import DatePickerCalendar from './DatePickerCalendar';
 import DatePickerContext from './DatePickerContext';
-const monthHandlers = {
-  prev: subMonths,
-  next: addMonths
-};
-function DatePickerRange(props) {
-  const {
-    onChange,
-    isRange,
-    isLink
-  } = props;
+function DatePickerRange(_ref) {
+  let {
+      onPickerChange
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
   const {
     views,
-    setViews,
     callOnChangeHandler
   } = useContext(DatePickerContext);
-  const onNav = useCallback(_ref => {
-    let {
-      nr,
-      type
-    } = _ref;
-    const updatedViews = views.map(view => {
-      if (view.nr === nr || isLink && view.nr === 1) {
-        const month = monthHandlers[type](view.month, 1);
-        return _objectSpread(_objectSpread({}, view), {}, {
-          month
-        });
-      }
-      return view;
-    });
-    setViews(updatedViews);
-  }, [views, setViews, isLink]);
   const onSelect = useCallback(event => {
     callOnChangeHandler(event);
-    onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread({
-      hidePicker: !isRange,
+    onPickerChange === null || onPickerChange === void 0 ? void 0 : onPickerChange(_objectSpread({
       startDate: event.startDate,
       endDate: event.endDate
     }, event));
-  }, [isRange, onChange, callOnChangeHandler]);
+  }, [onPickerChange, callOnChangeHandler]);
   return React.createElement("div", {
     className: "dnb-date-picker__views"
   }, views.map((calendar, i) => React.createElement(DatePickerCalendar, _extends({
     key: calendar.nr
   }, calendar, props, {
     id: `${props.id}-${i}-`,
-    onSelect: onSelect,
-    onPrev: onNav,
-    onNext: onNav
+    onSelect: onSelect
   }))));
 }
 export default DatePickerRange;

package/components/date-picker/DatePickerRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerRange.js","names":["React","useCallback","useContext","addMonths","subMonths","DatePickerCalendar","DatePickerContext","monthHandlers","prev","next","DatePickerRange","props","onChange","isRange","isLink","views","setViews","callOnChangeHandler","onNav","_ref","nr","type","updatedViews","map","view","month","_objectSpread","onSelect","event","hidePicker","startDate","endDate","createElement","className","calendar","i","_extends","key","id","onPrev","onNext"],"sources":["../../../../src/components/date-picker/DatePickerRange.tsx"],"sourcesContent":["/**\n * Web DatePicker Component\n *\n */\n\nimport React, { useCallback, useContext } from 'react'\n\n// date-fns\nimport addMonths from 'date-fns/addMonths'\nimport subMonths from 'date-fns/subMonths'\n\nimport DatePickerCalendar, {\n  CalendarButtonProps,\n  CalendarNavigationEvent,\n  DatePickerCalendarProps,\n} from './DatePickerCalendar'\nimport DatePickerContext from './DatePickerContext'\nimport { DatePickerDates } from './hooks/useDates'\nimport { DatePickerChangeEvent } from './DatePickerProvider'\n\nexport type DatePickerRangeViews = number | Record<string, unknown>[]\n\nexport type DatePickerRangeProps = Omit<\n  React.HTMLProps<HTMLElement>,\n  'onChange'\n> &\n  DatePickerCalendarProps & {\n    id?: string\n    isRange?: boolean\n    isLink?: boolean\n    isSync?: boolean\n    onlyMonth?: boolean\n    hideNav?: boolean\n    views?: [{ nextBtn: false; prevBtn: false }]\n    onChange?: (\n      event: DatePickerChangeEvent<\n        | React.MouseEvent<HTMLSpanElement>\n        | React.KeyboardEvent<HTMLTableElement>\n      >\n    ) => void\n  }\n\nconst monthHandlers: {\n  // eslint-disable-next-line no-unused-vars\n  [key in CalendarButtonProps['type']]: typeof subMonths\n} = {\n  prev: subMonths,\n  next: addMonths,\n}\n\nfunction DatePickerRange(props: DatePickerRangeProps) {\n  // Destructured to prevent useCallback from updating on all prop or context changes\n  const { onChange, isRange, isLink } = props\n  const { views, setViews, callOnChangeHandler } =\n    useContext(DatePickerContext)\n\n  const onNav = useCallback(\n    ({ nr, type }: CalendarNavigationEvent) => {\n      const updatedViews = views.map((view) => {\n        if (view.nr === nr || (isLink && view.nr === 1)) {\n          const month = monthHandlers[type](view.month, 1)\n\n          return { ...view, month }\n        }\n\n        return view\n      })\n      setViews(updatedViews)\n    },\n    [views, setViews, isLink]\n  )\n\n  const onSelect = useCallback(\n    (\n      event: DatePickerChangeEvent<\n        | React.MouseEvent<HTMLSpanElement>\n        | React.KeyboardEvent<HTMLTableElement>\n      > &\n        DatePickerDates\n    ) => {\n      callOnChangeHandler(event)\n\n      onChange?.({\n        hidePicker: !isRange,\n        startDate: event.startDate,\n        endDate: event.endDate,\n        ...event,\n      })\n    },\n    [isRange, onChange, callOnChangeHandler]\n  )\n\n  return (\n    <div className=\"dnb-date-picker__views\">\n      {views.map((calendar, i) => (\n        <DatePickerCalendar\n          key={calendar.nr}\n          {...calendar}\n          {...props}\n          id={`${props.id}-${i}-`}\n          onSelect={onSelect}\n          onPrev={onNav}\n          onNext={onNav}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport default DatePickerRange\n"],"mappings":";;;;;;AAKA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AAGtD,OAAOC,SAAS,MAAM,oBAAoB;AAC1C,OAAOC,SAAS,MAAM,oBAAoB;AAE1C,OAAOC,kBAAkB,MAIlB,sBAAsB;AAC7B,OAAOC,iBAAiB,MAAM,qBAAqB;AA0BnD,MAAMC,aAGL,GAAG;EACFC,IAAI,EAAEJ,SAAS;EACfK,IAAI,EAAEN;AACR,CAAC;AAED,SAASO,eAAeA,CAACC,KAA2B,EAAE;EAEpD,MAAM;IAAEC,QAAQ;IAAEC,OAAO;IAAEC;EAAO,CAAC,GAAGH,KAAK;EAC3C,MAAM;IAAEI,KAAK;IAAEC,QAAQ;IAAEC;EAAoB,CAAC,GAC5Cf,UAAU,CAACI,iBAAiB,CAAC;EAE/B,MAAMY,KAAK,GAAGjB,WAAW,CACvBkB,IAAA,IAA2C;IAAA,IAA1C;MAAEC,EAAE;MAAEC;IAA8B,CAAC,GAAAF,IAAA;IACpC,MAAMG,YAAY,GAAGP,KAAK,CAACQ,GAAG,CAAEC,IAAI,IAAK;MACvC,IAAIA,IAAI,CAACJ,EAAE,KAAKA,EAAE,IAAKN,MAAM,IAAIU,IAAI,CAACJ,EAAE,KAAK,CAAE,EAAE;QAC/C,MAAMK,KAAK,GAAGlB,aAAa,CAACc,IAAI,CAAC,CAACG,IAAI,CAACC,KAAK,EAAE,CAAC,CAAC;QAEhD,OAAAC,aAAA,CAAAA,aAAA,KAAYF,IAAI;UAAEC;QAAK;MACzB;MAEA,OAAOD,IAAI;IACb,CAAC,CAAC;IACFR,QAAQ,CAACM,YAAY,CAAC;EACxB,CAAC,EACD,CAACP,KAAK,EAAEC,QAAQ,EAAEF,MAAM,CAC1B,CAAC;EAED,MAAMa,QAAQ,GAAG1B,WAAW,CAExB2B,KAIiB,IACd;IACHX,mBAAmB,CAACW,KAAK,CAAC;IAE1BhB,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAAc,aAAA;MACNG,UAAU,EAAE,CAAChB,OAAO;MACpBiB,SAAS,EAAEF,KAAK,CAACE,SAAS;MAC1BC,OAAO,EAAEH,KAAK,CAACG;IAAO,GACnBH,KAAK,CACT,CAAC;EACJ,CAAC,EACD,CAACf,OAAO,EAAED,QAAQ,EAAEK,mBAAmB,CACzC,CAAC;EAED,OACEjB,KAAA,CAAAgC,aAAA;IAAKC,SAAS,EAAC;EAAwB,GACpClB,KAAK,CAACQ,GAAG,CAAC,CAACW,QAAQ,EAAEC,CAAC,KACrBnC,KAAA,CAAAgC,aAAA,CAAC3B,kBAAkB,EAAA+B,QAAA;IACjBC,GAAG,EAAEH,QAAQ,CAACd;EAAG,GACbc,QAAQ,EACRvB,KAAK;IACT2B,EAAE,EAAE,GAAG3B,KAAK,CAAC2B,EAAE,IAAIH,CAAC,GAAI;IACxBR,QAAQ,EAAEA,QAAS;IACnBY,MAAM,EAAErB,KAAM;IACdsB,MAAM,EAAEtB;EAAM,EACf,CACF,CACE,CAAC;AAEV;AAEA,eAAeR,eAAe","ignoreList":[]}
+{"version":3,"file":"DatePickerRange.js","names":["React","useCallback","useContext","DatePickerCalendar","DatePickerContext","DatePickerRange","_ref","onPickerChange","props","_objectWithoutProperties","_excluded","views","callOnChangeHandler","onSelect","event","_objectSpread","startDate","endDate","createElement","className","map","calendar","i","_extends","key","nr","id"],"sources":["../../../../src/components/date-picker/DatePickerRange.tsx"],"sourcesContent":["/**\n * Web DatePicker Component\n *\n */\n\nimport React, { useCallback, useContext } from 'react'\n\nimport DatePickerCalendar, {\n  DatePickerCalendarProps,\n} from './DatePickerCalendar'\nimport DatePickerContext from './DatePickerContext'\nimport { DatePickerDates } from './hooks/useDates'\nimport { DatePickerChangeEvent } from './DatePickerProvider'\n\nexport type DatePickerRangeViews = number | Record<string, unknown>[]\n\nexport type DatePickerRangeProps = Omit<\n  React.HTMLProps<HTMLElement>,\n  'onChange'\n> &\n  DatePickerCalendarProps & {\n    id?: string\n    isRange?: boolean\n    isLink?: boolean\n    isSync?: boolean\n    onlyMonth?: boolean\n    hideNavigation?: boolean\n    onPickerChange?: (\n      event: DatePickerChangeEvent<\n        | React.MouseEvent<HTMLSpanElement>\n        | React.KeyboardEvent<HTMLTableElement>\n      >\n    ) => void\n  }\n\nfunction DatePickerRange({\n  onPickerChange,\n  ...props\n}: DatePickerRangeProps) {\n  // Destructured to prevent useCallback from updating on all prop or context changes\n  const { views, callOnChangeHandler } = useContext(DatePickerContext)\n\n  const onSelect = useCallback(\n    (\n      event: DatePickerChangeEvent<\n        | React.MouseEvent<HTMLSpanElement>\n        | React.KeyboardEvent<HTMLTableElement>\n      > &\n        DatePickerDates\n    ) => {\n      callOnChangeHandler(event)\n\n      onPickerChange?.({\n        startDate: event.startDate,\n        endDate: event.endDate,\n        ...event,\n      })\n    },\n    [onPickerChange, callOnChangeHandler]\n  )\n\n  return (\n    <div className=\"dnb-date-picker__views\">\n      {views.map((calendar, i) => (\n        <DatePickerCalendar\n          key={calendar.nr}\n          {...calendar}\n          {...props}\n          id={`${props.id}-${i}-`}\n          onSelect={onSelect}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport default DatePickerRange\n"],"mappings":";;;;;;;;AAKA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AAEtD,OAAOC,kBAAkB,MAElB,sBAAsB;AAC7B,OAAOC,iBAAiB,MAAM,qBAAqB;AAyBnD,SAASC,eAAeA,CAAAC,IAAA,EAGC;EAAA,IAHA;MACvBC;IAEoB,CAAC,GAAAD,IAAA;IADlBE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAGR,MAAM;IAAEC,KAAK;IAAEC;EAAoB,CAAC,GAAGV,UAAU,CAACE,iBAAiB,CAAC;EAEpE,MAAMS,QAAQ,GAAGZ,WAAW,CAExBa,KAIiB,IACd;IACHF,mBAAmB,CAACE,KAAK,CAAC;IAE1BP,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAAQ,aAAA;MACZC,SAAS,EAAEF,KAAK,CAACE,SAAS;MAC1BC,OAAO,EAAEH,KAAK,CAACG;IAAO,GACnBH,KAAK,CACT,CAAC;EACJ,CAAC,EACD,CAACP,cAAc,EAAEK,mBAAmB,CACtC,CAAC;EAED,OACEZ,KAAA,CAAAkB,aAAA;IAAKC,SAAS,EAAC;EAAwB,GACpCR,KAAK,CAACS,GAAG,CAAC,CAACC,QAAQ,EAAEC,CAAC,KACrBtB,KAAA,CAAAkB,aAAA,CAACf,kBAAkB,EAAAoB,QAAA;IACjBC,GAAG,EAAEH,QAAQ,CAACI;EAAG,GACbJ,QAAQ,EACRb,KAAK;IACTkB,EAAE,EAAE,GAAGlB,KAAK,CAACkB,EAAE,IAAIJ,CAAC,GAAI;IACxBT,QAAQ,EAAEA;EAAS,EACpB,CACF,CACE,CAAC;AAEV;AAEA,eAAeR,eAAe","ignoreList":[]}

package/components/date-picker/hooks/useDates.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDates.js","names":["useCallback","useMemo","useState","convertStringToDate","isDisabled","addMonths","isSameDay","useDates","dateProps","_ref","dateFormat","isRange","shouldCorrectDate","previousDateProps","setPreviousDateProps","dates","setDates","_objectSpread","mapDates","hasDatePropChanges","Object","keys","some","date","dateProp","previousDate","convertedDateProp","convertedPreviousDate","Date","derivedDates","deriveDatesFromProps","currentDates","updateDates","newDates","callback","_newDates$startDate","_newDates$endDate","correctedDates","correctDates","startDate","endDate","minDate","maxDate","months","updateMonths","_ref2","_ref3","_convertStringToDate","_convertStringToDate2","getDate","undefined","startMonth","endMonth","_ref4","getStartDate","_ref5","_ref6","_ref7","_newDates$startMonth","_ref8","_newDates$endMonth"],"sources":["../../../../../src/components/date-picker/hooks/useDates.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\nimport { convertStringToDate, isDisabled } from '../DatePickerCalc'\nimport { addMonths, isSameDay } from 'date-fns'\nimport { DateType } from '../DatePickerContext'\n\nexport type DatePickerDateProps = {\n  date?: DateType\n  startDate?: DateType\n  endDate?: DateType\n  startMonth?: DateType\n  endMonth?: DateType\n  minDate?: DateType\n  maxDate?: DateType\n}\n\ntype UseDatesOptions = {\n  dateFormat: string\n  isRange: boolean\n  shouldCorrectDate: boolean\n}\n\nexport type DatePickerDates = {\n  date?: DateType\n  startDate?: Date\n  endDate?: Date\n  minDate?: Date\n  maxDate?: Date\n  startMonth?: Date\n  endMonth?: Date\n}\n\nexport default function useDates(\n  dateProps: DatePickerDateProps,\n  {\n    dateFormat,\n    isRange = false,\n    shouldCorrectDate = false,\n  }: UseDatesOptions\n) {\n  const [previousDateProps, setPreviousDateProps] = useState(dateProps)\n  const [dates, setDates] = useState<DatePickerDates>({\n    ...mapDates(dateProps, {\n      dateFormat,\n      isRange,\n      shouldCorrectDate,\n    }),\n  })\n\n  const hasDatePropChanges = useMemo(\n    () =>\n      Object.keys(dateProps).some((date) => {\n        const dateProp = dateProps[date]\n        const previousDate = previousDateProps[date]\n\n        const convertedDateProp = convertStringToDate(dateProp, {\n          dateFormat,\n        })\n        const convertedPreviousDate = convertStringToDate(previousDate, {\n          dateFormat,\n        })\n        // Make sure that same dates does not trigger a change\n        // i.e. 2021-01-01 and new Date('2021-01-01')\n        if (\n          convertedDateProp instanceof Date &&\n          convertedPreviousDate instanceof Date\n        ) {\n          return !isSameDay(convertedDateProp, convertedPreviousDate)\n        }\n\n        return dateProp !== previousDate\n      }),\n    [dateProps, previousDateProps, dateFormat]\n  )\n\n  // Update dates on prop change\n  if (hasDatePropChanges) {\n    const derivedDates = deriveDatesFromProps({\n      dates,\n      dateProps,\n      previousDateProps,\n      dateFormat,\n      isRange,\n    })\n\n    setDates((currentDates) => ({ ...currentDates, ...derivedDates }))\n    setPreviousDateProps(dateProps)\n  }\n\n  const updateDates = useCallback(\n    (\n      newDates: DatePickerDates,\n      callback?: (dates: DatePickerDates) => void\n    ) => {\n      // Correct dates based on min and max date\n      const correctedDates = shouldCorrectDate\n        ? correctDates({\n            startDate: newDates.startDate ?? dates.startDate,\n            endDate: newDates.endDate ?? dates.endDate,\n            minDate: dates.minDate,\n            maxDate: dates.maxDate,\n            isRange,\n          })\n        : {}\n\n      // Update months based on month or start/end date changes\n      const months = updateMonths({\n        newDates,\n        currentDates: dates,\n      })\n\n      setDates((currentDates) => {\n        return {\n          ...currentDates,\n          ...newDates,\n          ...months,\n          ...correctedDates,\n        }\n      })\n\n      callback?.({\n        ...dates,\n        ...newDates,\n        ...months,\n        ...correctedDates,\n      })\n    },\n    [dates, shouldCorrectDate, isRange]\n  )\n\n  return {\n    dates,\n    updateDates,\n    previousDateProps,\n  } as const\n}\n\nfunction mapDates(\n  dateProps: DatePickerDateProps,\n  {\n    dateFormat,\n    isRange,\n    shouldCorrectDate,\n  }: Omit<UseDatesOptions, 'isLinked'>\n) {\n  const date = dateProps.date\n\n  const startDate =\n    typeof dateProps?.startDate !== 'undefined'\n      ? getDate(dateProps.startDate, dateFormat)\n      : typeof date !== 'undefined'\n      ? getDate(date, dateFormat)\n      : undefined\n\n  const endDate = !isRange\n    ? startDate\n    : convertStringToDate(dateProps?.endDate, {\n        dateFormat,\n      }) || undefined\n\n  // Ensure that the calendar view displays the correct start and end months, and to prevent date flickering bug\n  const startMonth =\n    convertStringToDate(dateProps.startMonth, {\n      dateFormat,\n    }) ??\n    startDate ??\n    new Date()\n\n  const endMonth =\n    convertStringToDate(dateProps.endMonth, {\n      dateFormat: dateFormat,\n    }) ?? (isRange ? endDate ?? addMonths(startMonth, 1) : startMonth)\n\n  const minDate = convertStringToDate(dateProps.minDate, {\n    dateFormat,\n  })\n\n  const maxDate = convertStringToDate(dateProps.maxDate, {\n    dateFormat,\n  })\n\n  const correctedDates = shouldCorrectDate\n    ? correctDates({ startDate, endDate, minDate, maxDate, isRange })\n    : {}\n\n  const dates = {\n    date,\n    startDate,\n    endDate,\n    startMonth,\n    endMonth,\n    minDate,\n    maxDate,\n    ...correctedDates,\n  }\n\n  return {\n    ...dates,\n  }\n}\n\nfunction deriveDatesFromProps({\n  dates,\n  dateProps,\n  previousDateProps,\n  dateFormat,\n  isRange,\n}: {\n  dates: DatePickerDates\n  dateProps: DatePickerDateProps\n  previousDateProps: DatePickerDateProps\n  dateFormat: UseDatesOptions['dateFormat']\n  isRange: UseDatesOptions['isRange']\n}) {\n  const derivedDates: DatePickerDates = {}\n\n  const startDate = getStartDate(dateProps, previousDateProps)\n\n  // Handle updates related to date and startDate changes when not in range mode\n  if (typeof startDate !== 'undefined' && startDate !== dates.startDate) {\n    derivedDates.startDate =\n      convertStringToDate(startDate, {\n        dateFormat,\n      }) || undefined\n\n    // Set endDate and startMonth to startDate if not in range mode\n    if (!isRange) {\n      derivedDates.startMonth =\n        convertStringToDate(startDate, {\n          dateFormat,\n        }) || undefined\n\n      derivedDates.endDate = derivedDates.startDate\n    }\n  }\n\n  // update endDate based on endDate prop if in range mode\n  if (\n    isRange &&\n    typeof dateProps.endDate !== 'undefined' &&\n    dateProps.endDate !== dates.endDate\n  ) {\n    derivedDates.endDate =\n      convertStringToDate(dateProps.endDate, {\n        dateFormat,\n      }) || undefined\n  }\n\n  // Handle startMonth/endMonth\n  if (\n    typeof dateProps.startMonth !== 'undefined' &&\n    dateProps.startMonth !== previousDateProps.startMonth\n  ) {\n    derivedDates.startMonth = convertStringToDate(dateProps.startMonth, {\n      dateFormat,\n    })\n  }\n  if (\n    typeof dateProps.endMonth !== 'undefined' &&\n    dateProps.endMonth !== previousDateProps.endMonth\n  ) {\n    derivedDates.endMonth = convertStringToDate(dateProps.endMonth, {\n      dateFormat,\n    })\n  }\n\n  // Handle minDate/maxDate\n  if (\n    typeof dateProps.minDate !== 'undefined' &&\n    dateProps.minDate !== previousDateProps.minDate\n  ) {\n    derivedDates.minDate = convertStringToDate(dateProps.minDate, {\n      dateFormat,\n    })\n  }\n  if (\n    typeof dateProps.maxDate !== 'undefined' &&\n    dateProps.maxDate !== previousDateProps.maxDate\n  ) {\n    derivedDates.maxDate = convertStringToDate(dateProps.maxDate, {\n      dateFormat,\n    })\n  }\n\n  return derivedDates\n}\n\nfunction correctDates({\n  startDate,\n  endDate,\n  minDate,\n  maxDate,\n  isRange,\n}: {\n  startDate: Date\n  endDate: Date\n  minDate: Date\n  maxDate: Date\n  isRange: boolean\n}) {\n  const correctedDates = {}\n\n  if (isDisabled(startDate, minDate, maxDate)) {\n    correctedDates['startDate'] = minDate\n  }\n  if (isDisabled(endDate, minDate, maxDate)) {\n    // state.endDate is only used by the input if range is set to true.\n    // this is done to make maxDate correction work if the input is not a range and only maxDate is defined.\n    if (!isRange && !minDate) {\n      correctedDates['startDate'] = maxDate\n    } else {\n      correctedDates['endDate'] = maxDate\n    }\n  }\n\n  return correctedDates\n}\n\nfunction updateMonths({\n  newDates,\n  currentDates,\n}: {\n  newDates: DatePickerDates\n  currentDates: DatePickerDates\n}) {\n  const startMonth =\n    newDates.startMonth ?? newDates.startDate ?? currentDates.startMonth\n  const endMonth =\n    newDates.endMonth ?? newDates.endDate ?? currentDates.endMonth\n\n  return {\n    startMonth,\n    endMonth,\n  }\n}\n\nfunction getDate(date: DateType, dateFormat: string) {\n  return date instanceof Date\n    ? date\n    : convertStringToDate(date ?? '', {\n        dateFormat,\n      })\n}\n\nfunction getStartDate(\n  dateProps: DatePickerDateProps,\n  previousDateProps: DatePickerDateProps\n) {\n  // prioritize startDate over date if provided\n  if (\n    typeof dateProps.startDate !== 'undefined' &&\n    dateProps.startDate !== previousDateProps.startDate\n  ) {\n    return dateProps.startDate\n  }\n\n  if (\n    typeof dateProps.date !== 'undefined' &&\n    dateProps.date !== previousDateProps.date\n  ) {\n    return dateProps.date\n  }\n\n  return undefined\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"useDates.js","names":["useCallback","useMemo","useState","convertStringToDate","isDisabled","addMonths","isSameDay","useDates","dateProps","_ref","dateFormat","isRange","shouldCorrectDate","previousDateProps","setPreviousDateProps","dates","setDates","_objectSpread","mapDates","hasDatePropChanges","Object","keys","some","date","dateProp","previousDate","convertedDateProp","convertedPreviousDate","Date","derivedDates","deriveDatesFromProps","currentDates","updateDates","newDates","callback","_newDates$startDate","_newDates$endDate","correctedDates","correctDates","startDate","endDate","minDate","maxDate","months","updateMonths","_ref2","_ref3","_convertStringToDate","_convertStringToDate2","getDate","undefined","startMonth","endMonth","_ref4","getStartDate","_ref5","_ref6","_ref7","_newDates$startMonth","_ref8","_newDates$endMonth"],"sources":["../../../../../src/components/date-picker/hooks/useDates.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\nimport { convertStringToDate, isDisabled } from '../DatePickerCalc'\nimport { addMonths, isSameDay } from 'date-fns'\nimport { DateType } from '../DatePickerContext'\n\nexport type DatePickerDateProps = {\n  date?: DateType\n  startDate?: DateType\n  endDate?: DateType\n  startMonth?: DateType\n  endMonth?: DateType\n  minDate?: DateType\n  maxDate?: DateType\n}\n\ntype UseDatesOptions = {\n  dateFormat: string\n  isRange: boolean\n  // Deprecated – can be removed in v11\n  shouldCorrectDate: boolean\n}\n\nexport type DatePickerDates = {\n  date?: DateType\n  startDate?: Date\n  endDate?: Date\n  minDate?: Date\n  maxDate?: Date\n  startMonth?: Date\n  endMonth?: Date\n}\n\nexport default function useDates(\n  dateProps: DatePickerDateProps,\n  {\n    dateFormat,\n    isRange = false,\n    // Deprecated – can be removed in v11\n    shouldCorrectDate = false,\n  }: UseDatesOptions\n) {\n  const [previousDateProps, setPreviousDateProps] = useState(dateProps)\n  const [dates, setDates] = useState<DatePickerDates>({\n    ...mapDates(dateProps, {\n      dateFormat,\n      isRange,\n      // Deprecated – can be removed in v11\n      shouldCorrectDate,\n    }),\n  })\n\n  const hasDatePropChanges = useMemo(\n    () =>\n      Object.keys(dateProps).some((date) => {\n        const dateProp = dateProps[date]\n        const previousDate = previousDateProps[date]\n\n        const convertedDateProp = convertStringToDate(dateProp, {\n          dateFormat,\n        })\n        const convertedPreviousDate = convertStringToDate(previousDate, {\n          dateFormat,\n        })\n        // Make sure that same dates does not trigger a change\n        // i.e. 2021-01-01 and new Date('2021-01-01')\n        if (\n          convertedDateProp instanceof Date &&\n          convertedPreviousDate instanceof Date\n        ) {\n          return !isSameDay(convertedDateProp, convertedPreviousDate)\n        }\n\n        return dateProp !== previousDate\n      }),\n    [dateProps, previousDateProps, dateFormat]\n  )\n\n  // Update dates on prop change\n  if (hasDatePropChanges) {\n    const derivedDates = deriveDatesFromProps({\n      dates,\n      dateProps,\n      previousDateProps,\n      dateFormat,\n      isRange,\n    })\n\n    setDates((currentDates) => ({ ...currentDates, ...derivedDates }))\n    setPreviousDateProps(dateProps)\n  }\n\n  const updateDates = useCallback(\n    (\n      newDates: DatePickerDates,\n      callback?: (dates: DatePickerDates) => void\n    ) => {\n      // Deprecated – can be removed in v11\n      const correctedDates = shouldCorrectDate\n        ? correctDates({\n            startDate: newDates.startDate ?? dates.startDate,\n            endDate: newDates.endDate ?? dates.endDate,\n            minDate: dates.minDate,\n            maxDate: dates.maxDate,\n            isRange,\n          })\n        : {}\n\n      // Update months based on month or start/end date changes\n      const months = updateMonths({\n        newDates,\n        currentDates: dates,\n      })\n\n      setDates((currentDates) => {\n        return {\n          ...currentDates,\n          ...newDates,\n          ...months,\n          // Deprecated – can be removed in v11\n          ...correctedDates,\n        }\n      })\n\n      callback?.({\n        ...dates,\n        ...newDates,\n        ...months,\n        // Deprecated – can be removed in v11\n        ...correctedDates,\n      })\n    },\n    [dates, shouldCorrectDate, isRange]\n  )\n\n  return {\n    dates,\n    updateDates,\n    previousDateProps,\n  } as const\n}\n\nfunction mapDates(\n  dateProps: DatePickerDateProps,\n  {\n    dateFormat,\n    isRange,\n    shouldCorrectDate,\n  }: Omit<UseDatesOptions, 'isLinked'>\n) {\n  const date = dateProps.date\n\n  const startDate =\n    typeof dateProps?.startDate !== 'undefined'\n      ? getDate(dateProps.startDate, dateFormat)\n      : typeof date !== 'undefined'\n      ? getDate(date, dateFormat)\n      : undefined\n\n  const endDate = !isRange\n    ? startDate\n    : convertStringToDate(dateProps?.endDate, {\n        dateFormat,\n      }) || undefined\n\n  // Ensure that the calendar view displays the correct start and end months, and to prevent date flickering bug\n  const startMonth =\n    convertStringToDate(dateProps.startMonth, {\n      dateFormat,\n    }) ??\n    startDate ??\n    new Date()\n\n  const endMonth =\n    convertStringToDate(dateProps.endMonth, {\n      dateFormat: dateFormat,\n    }) ?? (isRange ? endDate ?? addMonths(startMonth, 1) : startMonth)\n\n  const minDate = convertStringToDate(dateProps.minDate, {\n    dateFormat,\n  })\n\n  const maxDate = convertStringToDate(dateProps.maxDate, {\n    dateFormat,\n  })\n\n  // Deprecated – can be removed in v11\n  const correctedDates = shouldCorrectDate\n    ? correctDates({ startDate, endDate, minDate, maxDate, isRange })\n    : {}\n\n  const dates = {\n    date,\n    startDate,\n    endDate,\n    startMonth,\n    endMonth,\n    minDate,\n    maxDate,\n    ...correctedDates,\n  }\n\n  return {\n    ...dates,\n  }\n}\n\nfunction deriveDatesFromProps({\n  dates,\n  dateProps,\n  previousDateProps,\n  dateFormat,\n  isRange,\n}: {\n  dates: DatePickerDates\n  dateProps: DatePickerDateProps\n  previousDateProps: DatePickerDateProps\n  dateFormat: UseDatesOptions['dateFormat']\n  isRange: UseDatesOptions['isRange']\n}) {\n  const derivedDates: DatePickerDates = {}\n\n  const startDate = getStartDate(dateProps, previousDateProps)\n\n  // Handle updates related to date and startDate changes when not in range mode\n  if (typeof startDate !== 'undefined' && startDate !== dates.startDate) {\n    derivedDates.startDate =\n      convertStringToDate(startDate, {\n        dateFormat,\n      }) || undefined\n\n    // Set endDate and startMonth to startDate if not in range mode\n    if (!isRange) {\n      derivedDates.startMonth =\n        convertStringToDate(startDate, {\n          dateFormat,\n        }) || undefined\n\n      derivedDates.endDate = derivedDates.startDate\n    }\n  }\n\n  // update endDate based on endDate prop if in range mode\n  if (\n    isRange &&\n    typeof dateProps.endDate !== 'undefined' &&\n    dateProps.endDate !== dates.endDate\n  ) {\n    derivedDates.endDate =\n      convertStringToDate(dateProps.endDate, {\n        dateFormat,\n      }) || undefined\n  }\n\n  // Handle startMonth/endMonth\n  if (\n    typeof dateProps.startMonth !== 'undefined' &&\n    dateProps.startMonth !== previousDateProps.startMonth\n  ) {\n    derivedDates.startMonth = convertStringToDate(dateProps.startMonth, {\n      dateFormat,\n    })\n  }\n  if (\n    typeof dateProps.endMonth !== 'undefined' &&\n    dateProps.endMonth !== previousDateProps.endMonth\n  ) {\n    derivedDates.endMonth = convertStringToDate(dateProps.endMonth, {\n      dateFormat,\n    })\n  }\n\n  // Handle minDate/maxDate\n  if (\n    typeof dateProps.minDate !== 'undefined' &&\n    dateProps.minDate !== previousDateProps.minDate\n  ) {\n    derivedDates.minDate = convertStringToDate(dateProps.minDate, {\n      dateFormat,\n    })\n  }\n  if (\n    typeof dateProps.maxDate !== 'undefined' &&\n    dateProps.maxDate !== previousDateProps.maxDate\n  ) {\n    derivedDates.maxDate = convertStringToDate(dateProps.maxDate, {\n      dateFormat,\n    })\n  }\n\n  return derivedDates\n}\n\n// Deprecated – can be removed in v11\nfunction correctDates({\n  startDate,\n  endDate,\n  minDate,\n  maxDate,\n  isRange,\n}: {\n  startDate: Date\n  endDate: Date\n  minDate: Date\n  maxDate: Date\n  isRange: boolean\n}) {\n  const correctedDates = {}\n\n  if (isDisabled(startDate, minDate, maxDate)) {\n    correctedDates['startDate'] = minDate\n  }\n  if (isDisabled(endDate, minDate, maxDate)) {\n    // state.endDate is only used by the input if range is set to true.\n    // this is done to make maxDate correction work if the input is not a range and only maxDate is defined.\n    if (!isRange && !minDate) {\n      correctedDates['startDate'] = maxDate\n    } else {\n      correctedDates['endDate'] = maxDate\n    }\n  }\n\n  return correctedDates\n}\n\nfunction updateMonths({\n  newDates,\n  currentDates,\n}: {\n  newDates: DatePickerDates\n  currentDates: DatePickerDates\n}) {\n  const startMonth =\n    newDates.startMonth ?? newDates.startDate ?? currentDates.startMonth\n  const endMonth =\n    newDates.endMonth ?? newDates.endDate ?? currentDates.endMonth\n\n  return {\n    startMonth,\n    endMonth,\n  }\n}\n\nfunction getDate(date: DateType, dateFormat: string) {\n  return date instanceof Date\n    ? date\n    : convertStringToDate(date ?? '', {\n        dateFormat,\n      })\n}\n\nfunction getStartDate(\n  dateProps: DatePickerDateProps,\n  previousDateProps: DatePickerDateProps\n) {\n  // prioritize startDate over date if provided\n  if (\n    typeof dateProps.startDate !== 'undefined' &&\n    dateProps.startDate !== previousDateProps.startDate\n  ) {\n    return dateProps.startDate\n  }\n\n  if (\n    typeof dateProps.date !== 'undefined' &&\n    dateProps.date !== previousDateProps.date\n  ) {\n    return dateProps.date\n  }\n\n  return undefined\n}\n"],"mappings":"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","ignoreList":[]}

package/components/date-picker/hooks/useSubmittedDates.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DatePickerDates } from './useDates';
+export type SubmittedDates = Pick<DatePickerDates, 'startDate' | 'endDate'>;
+export default function useSubmittedDates(): {
+    submittedDatesRef: import("react").MutableRefObject<SubmittedDates>;
+    setSubmittedDates: (dates: SubmittedDates) => void;
+};

package/components/date-picker/hooks/useSubmittedDates.js

@@ -0,0 +1,14 @@
+"use client";
+
+import { useCallback, useRef } from 'react';
+export default function useSubmittedDates() {
+  const submittedDatesRef = useRef({});
+  const setSubmittedDates = useCallback(dates => {
+    submittedDatesRef.current = dates;
+  }, []);
+  return {
+    submittedDatesRef,
+    setSubmittedDates
+  };
+}
+//# sourceMappingURL=useSubmittedDates.js.map

package/components/date-picker/hooks/useSubmittedDates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubmittedDates.js","names":["useCallback","useRef","useSubmittedDates","submittedDatesRef","setSubmittedDates","dates","current"],"sources":["../../../../../src/components/date-picker/hooks/useSubmittedDates.ts"],"sourcesContent":["import { useCallback, useRef } from 'react'\nimport { DatePickerDates } from './useDates'\n\nexport type SubmittedDates = Pick<DatePickerDates, 'startDate' | 'endDate'>\n\nexport default function useSubmittedDates() {\n  const submittedDatesRef = useRef<SubmittedDates>({})\n\n  const setSubmittedDates = useCallback((dates: SubmittedDates) => {\n    submittedDatesRef.current = dates\n  }, [])\n\n  return {\n    submittedDatesRef,\n    setSubmittedDates,\n  }\n}\n"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAK3C,eAAe,SAASC,iBAAiBA,CAAA,EAAG;EAC1C,MAAMC,iBAAiB,GAAGF,MAAM,CAAiB,CAAC,CAAC,CAAC;EAEpD,MAAMG,iBAAiB,GAAGJ,WAAW,CAAEK,KAAqB,IAAK;IAC/DF,iBAAiB,CAACG,OAAO,GAAGD,KAAK;EACnC,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACLF,iBAAiB;IACjBC;EACF,CAAC;AACH","ignoreList":[]}

package/components/date-picker/style/dnb-date-picker.css

@@ -254,7 +254,7 @@ html[data-whatinput=keyboard] .dnb-date-picker__container table.dnb-no-focus:foc
   content: none;
 }
 .dnb-date-picker__header {
-  height: 2.5rem;
+  min-height: 2.5rem;
   line-height: var(--line-height-basis);
 }
 .dnb-date-picker__addon, .dnb-date-picker__header {

package/components/date-picker/style/dnb-date-picker.min.css

@@ -1 +1 @@
-.dnb-date-picker{--date-picker-input-height:2rem;--date-picker-day-width:2rem;--date-picker-day-horizontal-spacing:4px;align-items:center;column-gap:var(--spacing-small);display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-date-picker__inner{display:inline-flex;flex-direction:column;line-height:var(--date-picker-input-height)}.dnb-date-picker__row{display:inline-flex}.dnb-date-picker__shell{display:inline-flex;flex-direction:column;position:relative;top:0}.dnb-date-picker__input__wrapper{display:inline-flex;height:inherit;white-space:nowrap}.dnb-date-picker__triangle{margin:0 1.5rem;overflow:hidden;pointer-events:none;right:auto;top:calc(2px - var(--date-picker-input-height)/2)}.dnb-date-picker__triangle,.dnb-date-picker__triangle:before{height:calc(var(--date-picker-input-height)/2);left:0;position:absolute;width:calc(var(--date-picker-input-height)/2)}.dnb-date-picker__triangle:before{background-color:var(--color-white);border:1px solid var(--color-black-border);content:"";top:0;transform:translateY(60%) rotate(45deg)}.dnb-date-picker__container{display:block;left:-1rem;position:absolute;top:var(--date-picker-input-height);z-index:3}.dnb-date-picker__container--small{top:1.5rem}.dnb-date-picker__container--medium{top:2.5rem}.dnb-date-picker__container--large{top:3rem}.dnb-date-picker__container--show-input{left:0}.dnb-date-picker__container--right{left:auto;right:-1rem}.dnb-date-picker__container--show-input.dnb-date-picker__container--right{left:auto;right:0}.dnb-date-picker__container--opened{z-index:100}.dnb-date-picker__container--opened:not(.dnb-date-picker__container--opened--no-animation){animation:date-picker-slide-down .2s ease-out 1 forwards}.dnb-date-picker__container--opened--no-animation,html[data-visual-test] .dnb-date-picker__container--opened{animation:date-picker-slide-down 1ms ease-out 1 forwards}.dnb-date-picker__container--hidden{display:none}.dnb-date-picker__container--closed:not(.dnb-date-picker__container--closed--no-animation){animation:date-picker-slide-up .15s ease-out 1 forwards}.dnb-date-picker__container--closed--no-animation,html[data-visual-test] .dnb-date-picker__container--closed{animation:date-picker-slide-up 1ms ease-out 1 forwards}.dnb-date-picker__container--right .dnb-date-picker__triangle{left:auto;right:0}.dnb-date-picker__container table{margin:0;position:relative;z-index:1}.dnb-date-picker__container table.dnb-no-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-date-picker__container table.dnb-no-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{background:transparent;border:none;display:inline-block;font-family:var(--font-family-monospace);margin:0;outline:none;overflow:visible;padding:0 .125rem;text-align:center;transform:translateY(0);white-space:nowrap;width:auto}@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -4px}}@supports (-ms-ime-align:auto){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -5px}}@supports (-webkit-touch-callout:none){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{text-indent:-2px}.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0 -4px}.dnb-core-style .dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker__input:first-of-type:not(:root){margin-left:.8rem}.dnb-core-style .dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker__input:last-of-type:not(:root){margin-right:2.2rem}}.dnb-core-style .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-core-style .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker__input--small.dnb-date-picker__input--small{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker__input--small:last-of-type:not(:root){margin-right:2.2rem}.dnb-core-style .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-core-style .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker__input--medium.dnb-date-picker__input--medium{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker__input--medium:last-of-type:not(:root){margin-right:3.2rem}.dnb-core-style .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-core-style .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker__input--large.dnb-date-picker__input--large{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker__input--large:last-of-type:not(:root){margin-right:4rem}.dnb-core-style .dnb-date-picker__input--label-alignment-right,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--label-alignment-right,.dnb-date-picker__input--label-alignment-right{flex-flow:row-reverse;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type,.dnb-date-picker__input:first-of-type{margin-left:.8rem}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type,.dnb-date-picker__input:last-of-type{margin-right:2.2rem}.dnb-date-picker .dnb-input__shell{display:none}.dnb-date-picker--show-input .dnb-input__shell{display:flex}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__status--error .dnb-input__shell{box-shadow:none}.dnb-input__submit-button button:focus~.dnb-date-picker__input__wrapper{display:block}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-element,.dnb-input__submit-element>.dnb-date-picker .dnb-input__submit-element{margin-left:0}.dnb-date-picker__views{display:flex;user-select:none;-webkit-user-select:none}@media screen and (max-width:60em){.dnb-date-picker__views{flex-direction:column}}.dnb-date-picker__calendar{padding:1rem;position:relative}.dnb-date-picker__calendar:after{bottom:0;content:"";height:1px;position:absolute;width:calc(100% - 2rem)}.dnb-date-picker:not(.dnb-date-picker--show-footer) .dnb-date-picker__calendar:after{content:none}.dnb-date-picker__header{height:2.5rem;line-height:var(--line-height-basis)}.dnb-date-picker__addon,.dnb-date-picker__header{display:flex;justify-content:space-between;padding-bottom:1rem;position:relative}.dnb-date-picker__addon:after,.dnb-date-picker__header:after{bottom:0;content:"";height:1px;position:absolute;width:100%}.dnb-date-picker__addon{display:flex;flex-flow:row wrap;gap:1rem;justify-content:flex-start;padding:1rem}.dnb-date-picker__addon:after{left:1rem;width:calc(100% - 2rem)}.dnb-date-picker__footer{display:flex;justify-content:space-between;padding:1rem;position:relative}.dnb-date-picker__labels__day{padding-bottom:.5rem;padding-top:1.5rem}.dnb-date-picker__days,.dnb-date-picker__labels{display:flex;flex-wrap:wrap;list-style:none;margin:0;max-width:18rem;min-width:18rem;padding:0}.dnb-date-picker__day,.dnb-date-picker__labels__day{display:flex;flex-basis:14.2857142857%;justify-content:center}.dnb-date-picker__day{margin:var(--date-picker-day-horizontal-spacing) 0;position:relative}.dnb-date-picker__day,.dnb-date-picker__day .dnb-button{height:var(--date-picker-day-width);width:var(--date-picker-day-width)}.dnb-date-picker__day .dnb-button{box-shadow:none;position:absolute;top:0;white-space:nowrap}.dnb-date-picker__day .dnb-button__bounding{border-radius:0;transform:scale(1.28)}.dnb-date-picker__day .dnb-button__text{transform:translateY(0)}.dnb-date-picker__day--selectable:hover{z-index:2}.dnb-date-picker__day--end-date .dnb-button,.dnb-date-picker__day--start-date .dnb-button{z-index:1}.dnb-date-picker__day--end-date,.dnb-date-picker__day--start-date{position:relative}.dnb-date-picker__day--end-date:after,.dnb-date-picker__day--start-date:after{content:"";height:100%;position:absolute;top:0;width:calc(var(--date-picker-day-width)/2)}.dnb-date-picker__day--start-date:after{left:auto;right:0}.dnb-date-picker__day--end-date:after{left:0;right:auto}.dnb-date-picker__day--start-date.dnb-date-picker__day--end-date:after{content:none}.dnb-date-picker .rtl{direction:rtl}.dnb-date-picker .rtl .dnb-date-picker__next:before,.dnb-date-picker .rtl .dnb-date-picker__prev:before{transform:scaleX(-1)}.dnb-date-picker__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-date-picker--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-date-picker>.dnb-form-label{line-height:var(--line-height-basis);margin-right:0}@media screen and (max-width:40em){.dnb-date-picker{flex-wrap:wrap}.dnb-date-picker>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-date-picker--stretch{display:flex;flex-grow:1}.dnb-date-picker--stretch .dnb-date-picker__inner,.dnb-date-picker--stretch .dnb-date-picker__shell,.dnb-form-row--horizontal .dnb-date-picker--stretch{width:100%}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]{align-items:flex-start}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-button .dnb-button{border-radius:50%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-date-picker{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker__helper{display:none}}.dnb-date-picker .dnb-input__submit-button .dnb-button.dnb-skeleton{visibility:hidden}.dnb-core-style .dnb-date-picker__fieldset,.dnb-date-picker__fieldset{border:none;padding:0}.dnb-core-style .dnb-date-picker__fieldset:not([class*=space__top]),.dnb-date-picker__fieldset:not([class*=space__top]){margin-top:0}.dnb-core-style .dnb-date-picker__fieldset:not([class*=space__bottom]),.dnb-date-picker__fieldset:not([class*=space__bottom]){margin-bottom:0}.dnb-core-style .dnb-date-picker__fieldset:not([class*=space__left]),.dnb-date-picker__fieldset:not([class*=space__left]){margin-left:0}.dnb-core-style .dnb-date-picker__fieldset:not([class*=space__right]),.dnb-date-picker__fieldset:not([class*=space__right]){margin-right:0}.dnb-date-picker__portal{--date-picker-input-height:2rem;--date-picker-day-width:2rem;--date-picker-day-horizontal-spacing:4px;left:0;line-height:var(--date-picker-input-height);position:absolute;z-index:calc(var(--modal-z-index) + 10)}@keyframes date-picker-slide-down{0%{opacity:0}to{opacity:1}}@keyframes date-picker-slide-up{0%{opacity:1}to{opacity:0}}
+.dnb-date-picker{--date-picker-input-height:2rem;--date-picker-day-width:2rem;--date-picker-day-horizontal-spacing:4px;align-items:center;column-gap:var(--spacing-small);display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-date-picker__inner{display:inline-flex;flex-direction:column;line-height:var(--date-picker-input-height)}.dnb-date-picker__row{display:inline-flex}.dnb-date-picker__shell{display:inline-flex;flex-direction:column;position:relative;top:0}.dnb-date-picker__input__wrapper{display:inline-flex;height:inherit;white-space:nowrap}.dnb-date-picker__triangle{margin:0 1.5rem;overflow:hidden;pointer-events:none;right:auto;top:calc(2px - var(--date-picker-input-height)/2)}.dnb-date-picker__triangle,.dnb-date-picker__triangle:before{height:calc(var(--date-picker-input-height)/2);left:0;position:absolute;width:calc(var(--date-picker-input-height)/2)}.dnb-date-picker__triangle:before{background-color:var(--color-white);border:1px solid var(--color-black-border);content:"";top:0;transform:translateY(60%) rotate(45deg)}.dnb-date-picker__container{display:block;left:-1rem;position:absolute;top:var(--date-picker-input-height);z-index:3}.dnb-date-picker__container--small{top:1.5rem}.dnb-date-picker__container--medium{top:2.5rem}.dnb-date-picker__container--large{top:3rem}.dnb-date-picker__container--show-input{left:0}.dnb-date-picker__container--right{left:auto;right:-1rem}.dnb-date-picker__container--show-input.dnb-date-picker__container--right{left:auto;right:0}.dnb-date-picker__container--opened{z-index:100}.dnb-date-picker__container--opened:not(.dnb-date-picker__container--opened--no-animation){animation:date-picker-slide-down .2s ease-out 1 forwards}.dnb-date-picker__container--opened--no-animation,html[data-visual-test] .dnb-date-picker__container--opened{animation:date-picker-slide-down 1ms ease-out 1 forwards}.dnb-date-picker__container--hidden{display:none}.dnb-date-picker__container--closed:not(.dnb-date-picker__container--closed--no-animation){animation:date-picker-slide-up .15s ease-out 1 forwards}.dnb-date-picker__container--closed--no-animation,html[data-visual-test] .dnb-date-picker__container--closed{animation:date-picker-slide-up 1ms ease-out 1 forwards}.dnb-date-picker__container--right .dnb-date-picker__triangle{left:auto;right:0}.dnb-date-picker__container table{margin:0;position:relative;z-index:1}.dnb-date-picker__container table.dnb-no-focus:focus{outline:none}html[data-whatinput=keyboard] .dnb-date-picker__container table.dnb-no-focus:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{background:transparent;border:none;display:inline-block;font-family:var(--font-family-monospace);margin:0;outline:none;overflow:visible;padding:0 .125rem;text-align:center;transform:translateY(0);white-space:nowrap;width:auto}@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -4px}}@supports (-ms-ime-align:auto){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{margin:0 -5px}}@supports (-webkit-touch-callout:none){.dnb-core-style .dnb-date-picker__input,.dnb-date-picker .dnb-input__input.dnb-date-picker__input,.dnb-date-picker__input{text-indent:-2px}.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0}}@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-touch-callout:none)){.dnb-core-style .dnb-date-picker__input:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:not(:root),.dnb-date-picker__input:not(:root){margin:0 -4px}.dnb-core-style .dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type:not(:root),.dnb-date-picker__input:first-of-type:not(:root){margin-left:.8rem}.dnb-core-style .dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type:not(:root),.dnb-date-picker__input:last-of-type:not(:root){margin-right:2.2rem}}.dnb-core-style .dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-core-style .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small--has-submit-element .dnb-date-picker__input--small__input,.dnb-core-style .dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small.dnb-date-picker__input--small,.dnb-date-picker__input--small .dnb-date-picker .dnb-input__input.dnb-date-picker__input--small,.dnb-date-picker__input--small.dnb-date-picker__input--small{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--small:last-of-type:not(:root),.dnb-date-picker__input--small:last-of-type:not(:root){margin-right:2.2rem}.dnb-core-style .dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-core-style .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium--has-submit-element .dnb-date-picker__input--medium__input,.dnb-core-style .dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium.dnb-date-picker__input--medium,.dnb-date-picker__input--medium .dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium,.dnb-date-picker__input--medium.dnb-date-picker__input--medium{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--medium:last-of-type:not(:root),.dnb-date-picker__input--medium:last-of-type:not(:root){margin-right:3.2rem}.dnb-core-style .dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-core-style .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large--has-submit-element .dnb-date-picker__input--large__input,.dnb-core-style .dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large.dnb-date-picker__input--large,.dnb-date-picker__input--large .dnb-date-picker .dnb-input__input.dnb-date-picker__input--large,.dnb-date-picker__input--large.dnb-date-picker__input--large{padding-right:.125rem}.dnb-core-style .dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker .dnb-input__input.dnb-date-picker__input--large:last-of-type:not(:root),.dnb-date-picker__input--large:last-of-type:not(:root){margin-right:4rem}.dnb-core-style .dnb-date-picker__input--label-alignment-right,.dnb-date-picker .dnb-input__input.dnb-date-picker__input--label-alignment-right,.dnb-date-picker__input--label-alignment-right{flex-flow:row-reverse;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:first-of-type,.dnb-date-picker__input:first-of-type{margin-left:.8rem}.dnb-date-picker .dnb-input__input.dnb-date-picker__input:last-of-type,.dnb-date-picker__input:last-of-type{margin-right:2.2rem}.dnb-date-picker .dnb-input__shell{display:none}.dnb-date-picker--show-input .dnb-input__shell{display:flex}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__status--error .dnb-input__shell{box-shadow:none}.dnb-input__submit-button button:focus~.dnb-date-picker__input__wrapper{display:block}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-element,.dnb-input__submit-element>.dnb-date-picker .dnb-input__submit-element{margin-left:0}.dnb-date-picker__views{display:flex;user-select:none;-webkit-user-select:none}@media screen and (max-width:60em){.dnb-date-picker__views{flex-direction:column}}.dnb-date-picker__calendar{padding:1rem;position:relative}.dnb-date-picker__calendar:after{bottom:0;content:"";height:1px;position:absolute;width:calc(100% - 2rem)}.dnb-date-picker:not(.dnb-date-picker--show-footer) .dnb-date-picker__calendar:after{content:none}.dnb-date-picker__header{line-height:var(--line-height-basis);min-height:2.5rem}.dnb-date-picker__addon,.dnb-date-picker__header{display:flex;justify-content:space-between;padding-bottom:1rem;position:relative}.dnb-date-picker__addon:after,.dnb-date-picker__header:after{bottom:0;content:"";height:1px;position:absolute;width:100%}.dnb-date-picker__addon{display:flex;flex-flow:row wrap;gap:1rem;justify-content:flex-start;padding:1rem}.dnb-date-picker__addon:after{left:1rem;width:calc(100% - 2rem)}.dnb-date-picker__footer{display:flex;justify-content:space-between;padding:1rem;position:relative}.dnb-date-picker__labels__day{padding-bottom:.5rem;padding-top:1.5rem}.dnb-date-picker__days,.dnb-date-picker__labels{display:flex;flex-wrap:wrap;list-style:none;margin:0;max-width:18rem;min-width:18rem;padding:0}.dnb-date-picker__day,.dnb-date-picker__labels__day{display:flex;flex-basis:14.2857142857%;justify-content:center}.dnb-date-picker__day{margin:var(--date-picker-day-horizontal-spacing) 0;position:relative}.dnb-date-picker__day,.dnb-date-picker__day .dnb-button{height:var(--date-picker-day-width);width:var(--date-picker-day-width)}.dnb-date-picker__day .dnb-button{box-shadow:none;position:absolute;top:0;white-space:nowrap}.dnb-date-picker__day .dnb-button__bounding{border-radius:0;transform:scale(1.28)}.dnb-date-picker__day .dnb-button__text{transform:translateY(0)}.dnb-date-picker__day--selectable:hover{z-index:2}.dnb-date-picker__day--end-date .dnb-button,.dnb-date-picker__day--start-date .dnb-button{z-index:1}.dnb-date-picker__day--end-date,.dnb-date-picker__day--start-date{position:relative}.dnb-date-picker__day--end-date:after,.dnb-date-picker__day--start-date:after{content:"";height:100%;position:absolute;top:0;width:calc(var(--date-picker-day-width)/2)}.dnb-date-picker__day--start-date:after{left:auto;right:0}.dnb-date-picker__day--end-date:after{left:0;right:auto}.dnb-date-picker__day--start-date.dnb-date-picker__day--end-date:after{content:none}.dnb-date-picker .rtl{direction:rtl}.dnb-date-picker .rtl .dnb-date-picker__next:before,.dnb-date-picker .rtl .dnb-date-picker__prev:before{transform:scaleX(-1)}.dnb-date-picker__inner>.dnb-form-status{margin-top:.5rem;order:2}.dnb-date-picker--vertical{align-items:flex-start;display:flex;flex-direction:column}.dnb-date-picker>.dnb-form-label{line-height:var(--line-height-basis);margin-right:0}@media screen and (max-width:40em){.dnb-date-picker{flex-wrap:wrap}.dnb-date-picker>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-date-picker--stretch{display:flex;flex-grow:1}.dnb-date-picker--stretch .dnb-date-picker__inner,.dnb-date-picker--stretch .dnb-date-picker__shell,.dnb-form-row--horizontal .dnb-date-picker--stretch{width:100%}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]{align-items:flex-start}.dnb-date-picker:not(.dnb-date-picker--vertical)[class*=__status]>.dnb-form-label{margin-top:.25rem}.dnb-date-picker:not(.dnb-date-picker--show-input) .dnb-input__submit-button .dnb-button{border-radius:50%}@media screen and (max-width:40em){.dnb-responsive-component .dnb-date-picker{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker>.dnb-form-label{margin-bottom:.5rem}.dnb-responsive-component .dnb-date-picker__helper{display:none}}.dnb-date-picker .dnb-input__submit-button .dnb-button.dnb-skeleton{visibility:hidden}.dnb-core-style .dnb-date-picker__fieldset,.dnb-date-picker__fieldset{border:none;padding:0}.dnb-core-style .dnb-date-picker__fieldset:not([class*=space__top]),.dnb-date-picker__fieldset:not([class*=space__top]){margin-top:0}.dnb-core-style .dnb-date-picker__fieldset:not([class*=space__bottom]),.dnb-date-picker__fieldset:not([class*=space__bottom]){margin-bottom:0}.dnb-core-style .dnb-date-picker__fieldset:not([class*=space__left]),.dnb-date-picker__fieldset:not([class*=space__left]){margin-left:0}.dnb-core-style .dnb-date-picker__fieldset:not([class*=space__right]),.dnb-date-picker__fieldset:not([class*=space__right]){margin-right:0}.dnb-date-picker__portal{--date-picker-input-height:2rem;--date-picker-day-width:2rem;--date-picker-day-horizontal-spacing:4px;left:0;line-height:var(--date-picker-input-height);position:absolute;z-index:calc(var(--modal-z-index) + 10)}@keyframes date-picker-slide-down{0%{opacity:0}to{opacity:1}}@keyframes date-picker-slide-up{0%{opacity:1}to{opacity:0}}

package/components/date-picker/style/dnb-date-picker.scss

@@ -303,7 +303,7 @@
   }
 
   &__header {
-    height: 2.5rem;
+    min-height: 2.5rem;
     line-height: var(--line-height-basis);
   }
 

package/components/date-picker/style/themes/dnb-date-picker-theme-ui.css

@@ -25,9 +25,30 @@
 .dnb-date-picker__addon::after, .dnb-date-picker__calendar::after {
   background-color: var(--color-black-8);
 }
+.dnb-date-picker__header {
+  --gap: 0.25rem;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  gap: var(--gap);
+}
 .dnb-date-picker__header::after {
   background-color: var(--color-black-8);
 }
+.dnb-date-picker__header--only-month-label {
+  justify-content: center;
+  margin-bottom: 1rem;
+}
+.dnb-date-picker__header__row {
+  min-width: 60%;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: space-between;
+}
+.dnb-date-picker__header__row--year {
+  min-width: calc(40% - var(--gap));
+}
 .dnb-date-picker__header__nav .dnb-button {
   box-shadow: none;
 }

package/components/date-picker/style/themes/dnb-date-picker-theme-ui.min.css

@@ -1 +1 @@
-.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input,.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input~.dnb-date-picker--separator{color:var(--color-black-55)}.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input--highlight:not([disabled]),.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input--highlight:not([disabled])~.dnb-date-picker--separator{color:var(--color-black)}.dnb-date-picker__container{background-color:var(--color-white);border-radius:.25rem;box-shadow:var(--shadow-default)}.dnb-date-picker__addon:after,.dnb-date-picker__calendar:after,.dnb-date-picker__header:after{background-color:var(--color-black-8)}.dnb-date-picker__header__nav .dnb-button{box-shadow:none}.dnb-date-picker__header__title{font-size:var(--font-size-basis);text-align:center}.dnb-date-picker__header__title,.dnb-date-picker__labels__day{color:var(--color-black-80);font-weight:var(--font-weight-medium);text-transform:capitalize}.dnb-date-picker__day,.dnb-date-picker__labels__day{text-align:center}.dnb-date-picker__day--today .dnb-button{font-weight:var(--font-weight-medium)}.dnb-date-picker__day--inactive .dnb-button,.dnb-date-picker__day--preview .dnb-button,.dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date) .dnb-button:not(:hover){background-color:transparent}.dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive):after,.dnb-date-picker__day--preview:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date),.dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive):after,.dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date){background-color:var(--color-mint-green-50)}.dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive) .dnb-button,.dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive) .dnb-button{background-color:var(--color-emerald-green);color:var(--color-mint-green-25)}.dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover,.dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover{box-shadow:none}html:not([data-whatintent=touch]) .dnb-date-picker__day--end-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-date-picker__day--start-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]){background-color:var(--color-emerald-green);color:var(--color-mint-green-25)}.dnb-date-picker__day--disabled .dnb-button{-webkit-text-decoration:line-through;text-decoration:line-through}.dnb-date-picker__day--inactive .dnb-button{color:var(--color-black-55)}.dnb-date-picker__day--disabled .dnb-button[disabled],.dnb-date-picker__day--inactive .dnb-button[disabled]{box-shadow:none}html:not([data-whatintent=touch]) .dnb-date-picker__day--inactive .dnb-button[disabled]{cursor:default}.dnb-date-picker--opened .dnb-input .dnb-input__shell,.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover~.dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-sea-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary,.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover~.dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.dnb-button--secondary{background-color:var(--color-sea-green);color:var(--color-white)}.dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary:after,.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover~.dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.dnb-button--secondary:after{background-color:inherit}.dnb-date-picker__triangle:before{background-color:var(--color-white);border:none;box-shadow:var(--shadow-default)}.dnb-date-picker__status--error:not(.dnb-date-picker--opened) .dnb-form-label:hover~.dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-fire-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}
+.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input,.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input~.dnb-date-picker--separator{color:var(--color-black-55)}.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input--highlight:not([disabled]),.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-date-picker__input--highlight:not([disabled])~.dnb-date-picker--separator{color:var(--color-black)}.dnb-date-picker__container{background-color:var(--color-white);border-radius:.25rem;box-shadow:var(--shadow-default)}.dnb-date-picker__addon:after,.dnb-date-picker__calendar:after{background-color:var(--color-black-8)}.dnb-date-picker__header{--gap:0.25rem;display:flex;flex-flow:row wrap;gap:var(--gap);justify-content:space-between}.dnb-date-picker__header:after{background-color:var(--color-black-8)}.dnb-date-picker__header--only-month-label{justify-content:center;margin-bottom:1rem}.dnb-date-picker__header__row{align-items:center;display:flex;flex:1 1 auto;justify-content:space-between;min-width:60%}.dnb-date-picker__header__row--year{min-width:calc(40% - var(--gap))}.dnb-date-picker__header__nav .dnb-button{box-shadow:none}.dnb-date-picker__header__title{font-size:var(--font-size-basis);text-align:center}.dnb-date-picker__header__title,.dnb-date-picker__labels__day{color:var(--color-black-80);font-weight:var(--font-weight-medium);text-transform:capitalize}.dnb-date-picker__day,.dnb-date-picker__labels__day{text-align:center}.dnb-date-picker__day--today .dnb-button{font-weight:var(--font-weight-medium)}.dnb-date-picker__day--inactive .dnb-button,.dnb-date-picker__day--preview .dnb-button,.dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date) .dnb-button:not(:hover){background-color:transparent}.dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive):after,.dnb-date-picker__day--preview:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date),.dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive):after,.dnb-date-picker__day--within-selection:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--start-date):not(.dnb-date-picker__day--end-date){background-color:var(--color-mint-green-50)}.dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive) .dnb-button,.dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive) .dnb-button{background-color:var(--color-emerald-green);color:var(--color-mint-green-25)}.dnb-date-picker__day--end-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover,.dnb-date-picker__day--start-date:not(.dnb-date-picker__day--inactive):not(.dnb-date-picker__day--preview) .dnb-button:hover{box-shadow:none}html:not([data-whatintent=touch]) .dnb-date-picker__day--end-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-date-picker__day--start-date.dnb-date-picker__day--within-selection .dnb-button:hover:not([disabled]){background-color:var(--color-emerald-green);color:var(--color-mint-green-25)}.dnb-date-picker__day--disabled .dnb-button{-webkit-text-decoration:line-through;text-decoration:line-through}.dnb-date-picker__day--inactive .dnb-button{color:var(--color-black-55)}.dnb-date-picker__day--disabled .dnb-button[disabled],.dnb-date-picker__day--inactive .dnb-button[disabled]{box-shadow:none}html:not([data-whatintent=touch]) .dnb-date-picker__day--inactive .dnb-button[disabled]{cursor:default}.dnb-date-picker--opened .dnb-input .dnb-input__shell,.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover~.dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-sea-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary,.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover~.dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.dnb-button--secondary{background-color:var(--color-sea-green);color:var(--color-white)}.dnb-date-picker--opened .dnb-input .dnb-input__submit-button__button.dnb-button--secondary:after,.dnb-date-picker:not(.dnb-date-picker__status--error) .dnb-form-label:hover~.dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__submit-button__button.dnb-button--secondary:after{background-color:inherit}.dnb-date-picker__triangle:before{background-color:var(--color-white);border:none;box-shadow:var(--shadow-default)}.dnb-date-picker__status--error:not(.dnb-date-picker--opened) .dnb-form-label:hover~.dnb-date-picker__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell{--border-color:var(--color-fire-red);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}

package/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss

@@ -37,11 +37,35 @@
   }
 
   &__header {
+    --gap: 0.25rem;
+
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    gap: var(--gap);
+
     // border
     &::after {
       background-color: var(--color-black-8);
     }
 
+    &--only-month-label {
+      justify-content: center;
+      margin-bottom: 1rem;
+    }
+
+    &__row {
+      min-width: 60%;
+      display: flex;
+      flex: 1 1 auto;
+      align-items: center;
+      justify-content: space-between;
+
+      &--year {
+        min-width: calc(40% - var(--gap));
+      }
+    }
+
     &__nav .dnb-button {
       box-shadow: none;
     }

package/components/drawer/Drawer.js

@@ -107,6 +107,7 @@ function Drawer(_ref) {
     containerPlacement
   }));
   return React.createElement(Modal, _extends({}, context.Drawer, modalProps, {
+    fullscreen: false,
     contentClass: classnames('dnb-drawer__root', contentClass)
   }), React.createElement(DrawerContent, _extends({}, context.Drawer, drawerProps)));
 }

package/components/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":["React","useContext","Modal","DrawerContent","DrawerBody","DrawerHeader","DrawerNavigation","classnames","Context","removeUndefinedProps","Drawer","_ref","id","rootId","contentId","focusSelector","labelledBy","directDomReturn","hideCloseButton","disabled","title","dialogTitle","closeTitle","containerPlacement","spacing","noAnimation","noAnimationOnMobile","animationDuration","fullscreen","onOpen","onClose","onClosePrevent","openModal","closeModal","preventClose","preventOverlayClose","openState","openDelay","omitTriggerButton","trigger","triggerAttributes","closeButtonAttributes","overlayClass","contentClass","contentRef","scrollRef","top","bottom","left","right","space","props","_objectWithoutProperties","_excluded","context","modalProps","drawerProps","_objectSpread","createElement","_extends","Body","Header","Navigation","_supportsSpacingProps"],"sources":["../../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["/**\n * Web Drawer Component\n *\n */\nimport React, { useContext } from 'react'\nimport Modal from '../modal/Modal'\nimport DrawerContent from './DrawerContent'\nimport DrawerBody from './parts/DrawerBody'\nimport DrawerHeader from './parts/DrawerHeader'\nimport DrawerNavigation from './parts/DrawerNavigation'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport { DrawerProps, DrawerContentProps } from './types'\nimport { removeUndefinedProps } from '../../shared/component-helper'\n\nexport type DrawerAllProps = DrawerProps & DrawerContentProps\n\nfunction Drawer({\n  id,\n  rootId,\n  contentId,\n  focusSelector,\n  labelledBy,\n  directDomReturn,\n  hideCloseButton,\n  disabled,\n\n  title,\n  dialogTitle,\n  closeTitle,\n  containerPlacement = 'right',\n  spacing = true,\n  noAnimation,\n  noAnimationOnMobile,\n  animationDuration,\n  fullscreen = 'auto',\n\n  onOpen,\n  onClose,\n  onClosePrevent,\n  openModal,\n  closeModal,\n  preventClose,\n  preventOverlayClose,\n  openState,\n  openDelay,\n\n  omitTriggerButton,\n  trigger,\n  triggerAttributes,\n  closeButtonAttributes,\n  overlayClass,\n  contentClass,\n  contentRef,\n  scrollRef,\n\n  top,\n  bottom,\n  left,\n  right,\n  space,\n\n  ...props\n}: DrawerAllProps): JSX.Element {\n  const context = useContext(Context)\n\n  const modalProps = removeUndefinedProps({\n    title,\n    id,\n    focusSelector,\n    labelledBy,\n    disabled,\n    spacing,\n    openDelay,\n    contentId,\n    dialogTitle,\n    closeTitle,\n    hideCloseButton,\n    preventClose,\n    preventOverlayClose,\n    animationDuration,\n    noAnimation,\n    noAnimationOnMobile,\n    fullscreen,\n    containerPlacement,\n    openState,\n    directDomReturn,\n    rootId,\n    onOpen,\n    onClose,\n    onClosePrevent,\n    openModal,\n    closeModal,\n    omitTriggerButton,\n    trigger,\n    triggerAttributes,\n    closeButtonAttributes,\n    overlayClass,\n    contentRef,\n    scrollRef,\n    top,\n    bottom,\n    left,\n    right,\n    space,\n  })\n\n  const drawerProps = removeUndefinedProps({\n    ...props,\n    noAnimation,\n    noAnimationOnMobile,\n    fullscreen,\n    spacing,\n    containerPlacement,\n  })\n\n  return (\n    <Modal\n      {...context.Drawer}\n      {...modalProps}\n      contentClass={classnames('dnb-drawer__root', contentClass)}\n    >\n      <DrawerContent {...context.Drawer} {...drawerProps} />\n    </Modal>\n  )\n}\n\nDrawer.Body = DrawerBody\nDrawer.Header = DrawerHeader\nDrawer.Navigation = DrawerNavigation\n\nDrawer._supportsSpacingProps = true\n\nexport default Drawer\n"],"mappings":";;;;;;;;AAIA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,UAAU,MAAM,oBAAoB;AAC3C,OAAOC,YAAY,MAAM,sBAAsB;AAC/C,OAAOC,gBAAgB,MAAM,0BAA0B;AACvD,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,sBAAsB;AAE1C,SAASC,oBAAoB,QAAQ,+BAA+B;AAIpE,SAASC,MAAMA,CAAAC,IAAA,EA8CiB;EAAA,IA9ChB;MACdC,EAAE;MACFC,MAAM;MACNC,SAAS;MACTC,aAAa;MACbC,UAAU;MACVC,eAAe;MACfC,eAAe;MACfC,QAAQ;MAERC,KAAK;MACLC,WAAW;MACXC,UAAU;MACVC,kBAAkB,GAAG,OAAO;MAC5BC,OAAO,GAAG,IAAI;MACdC,WAAW;MACXC,mBAAmB;MACnBC,iBAAiB;MACjBC,UAAU,GAAG,MAAM;MAEnBC,MAAM;MACNC,OAAO;MACPC,cAAc;MACdC,SAAS;MACTC,UAAU;MACVC,YAAY;MACZC,mBAAmB;MACnBC,SAAS;MACTC,SAAS;MAETC,iBAAiB;MACjBC,OAAO;MACPC,iBAAiB;MACjBC,qBAAqB;MACrBC,YAAY;MACZC,YAAY;MACZC,UAAU;MACVC,SAAS;MAETC,GAAG;MACHC,MAAM;MACNC,IAAI;MACJC,KAAK;MACLC;IAGc,CAAC,GAAAvC,IAAA;IADZwC,KAAK,GAAAC,wBAAA,CAAAzC,IAAA,EAAA0C,SAAA;EAER,MAAMC,OAAO,GAAGrD,UAAU,CAACO,OAAO,CAAC;EAEnC,MAAM+C,UAAU,GAAG9C,oBAAoB,CAAC;IACtCW,KAAK;IACLR,EAAE;IACFG,aAAa;IACbC,UAAU;IACVG,QAAQ;IACRK,OAAO;IACPa,SAAS;IACTvB,SAAS;IACTO,WAAW;IACXC,UAAU;IACVJ,eAAe;IACfgB,YAAY;IACZC,mBAAmB;IACnBR,iBAAiB;IACjBF,WAAW;IACXC,mBAAmB;IACnBE,UAAU;IACVL,kBAAkB;IAClBa,SAAS;IACTnB,eAAe;IACfJ,MAAM;IACNgB,MAAM;IACNC,OAAO;IACPC,cAAc;IACdC,SAAS;IACTC,UAAU;IACVK,iBAAiB;IACjBC,OAAO;IACPC,iBAAiB;IACjBC,qBAAqB;IACrBC,YAAY;IACZE,UAAU;IACVC,SAAS;IACTC,GAAG;IACHC,MAAM;IACNC,IAAI;IACJC,KAAK;IACLC;EACF,CAAC,CAAC;EAEF,MAAMM,WAAW,GAAG/C,oBAAoB,CAAAgD,aAAA,CAAAA,aAAA,KACnCN,KAAK;IACR1B,WAAW;IACXC,mBAAmB;IACnBE,UAAU;IACVJ,OAAO;IACPD;EAAkB,EACnB,CAAC;EAEF,OACEvB,KAAA,CAAA0D,aAAA,CAACxD,KAAK,EAAAyD,QAAA,KACAL,OAAO,CAAC5C,MAAM,EACd6C,UAAU;IACdZ,YAAY,EAAEpC,UAAU,CAAC,kBAAkB,EAAEoC,YAAY;EAAE,IAE3D3C,KAAA,CAAA0D,aAAA,CAACvD,aAAa,EAAAwD,QAAA,KAAKL,OAAO,CAAC5C,MAAM,EAAM8C,WAAW,CAAG,CAChD,CAAC;AAEZ;AAEA9C,MAAM,CAACkD,IAAI,GAAGxD,UAAU;AACxBM,MAAM,CAACmD,MAAM,GAAGxD,YAAY;AAC5BK,MAAM,CAACoD,UAAU,GAAGxD,gBAAgB;AAEpCI,MAAM,CAACqD,qBAAqB,GAAG,IAAI;AAEnC,eAAerD,MAAM","ignoreList":[]}
+{"version":3,"file":"Drawer.js","names":["React","useContext","Modal","DrawerContent","DrawerBody","DrawerHeader","DrawerNavigation","classnames","Context","removeUndefinedProps","Drawer","_ref","id","rootId","contentId","focusSelector","labelledBy","directDomReturn","hideCloseButton","disabled","title","dialogTitle","closeTitle","containerPlacement","spacing","noAnimation","noAnimationOnMobile","animationDuration","fullscreen","onOpen","onClose","onClosePrevent","openModal","closeModal","preventClose","preventOverlayClose","openState","openDelay","omitTriggerButton","trigger","triggerAttributes","closeButtonAttributes","overlayClass","contentClass","contentRef","scrollRef","top","bottom","left","right","space","props","_objectWithoutProperties","_excluded","context","modalProps","drawerProps","_objectSpread","createElement","_extends","Body","Header","Navigation","_supportsSpacingProps"],"sources":["../../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["/**\n * Web Drawer Component\n *\n */\nimport React, { useContext } from 'react'\nimport Modal from '../modal/Modal'\nimport DrawerContent from './DrawerContent'\nimport DrawerBody from './parts/DrawerBody'\nimport DrawerHeader from './parts/DrawerHeader'\nimport DrawerNavigation from './parts/DrawerNavigation'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport { DrawerProps, DrawerContentProps } from './types'\nimport { removeUndefinedProps } from '../../shared/component-helper'\n\nexport type DrawerAllProps = DrawerProps & DrawerContentProps\n\nfunction Drawer({\n  id,\n  rootId,\n  contentId,\n  focusSelector,\n  labelledBy,\n  directDomReturn,\n  hideCloseButton,\n  disabled,\n\n  title,\n  dialogTitle,\n  closeTitle,\n  containerPlacement = 'right',\n  spacing = true,\n  noAnimation,\n  noAnimationOnMobile,\n  animationDuration,\n  fullscreen = 'auto',\n\n  onOpen,\n  onClose,\n  onClosePrevent,\n  openModal,\n  closeModal,\n  preventClose,\n  preventOverlayClose,\n  openState,\n  openDelay,\n\n  omitTriggerButton,\n  trigger,\n  triggerAttributes,\n  closeButtonAttributes,\n  overlayClass,\n  contentClass,\n  contentRef,\n  scrollRef,\n\n  top,\n  bottom,\n  left,\n  right,\n  space,\n\n  ...props\n}: DrawerAllProps): JSX.Element {\n  const context = useContext(Context)\n\n  const modalProps = removeUndefinedProps({\n    title,\n    id,\n    focusSelector,\n    labelledBy,\n    disabled,\n    spacing,\n    openDelay,\n    contentId,\n    dialogTitle,\n    closeTitle,\n    hideCloseButton,\n    preventClose,\n    preventOverlayClose,\n    animationDuration,\n    noAnimation,\n    noAnimationOnMobile,\n    fullscreen,\n    containerPlacement,\n    openState,\n    directDomReturn,\n    rootId,\n    onOpen,\n    onClose,\n    onClosePrevent,\n    openModal,\n    closeModal,\n    omitTriggerButton,\n    trigger,\n    triggerAttributes,\n    closeButtonAttributes,\n    overlayClass,\n    contentRef,\n    scrollRef,\n    top,\n    bottom,\n    left,\n    right,\n    space,\n  })\n\n  const drawerProps = removeUndefinedProps({\n    ...props,\n    noAnimation,\n    noAnimationOnMobile,\n    fullscreen,\n    spacing,\n    containerPlacement,\n  })\n\n  return (\n    <Modal\n      {...context.Drawer}\n      {...modalProps}\n      fullscreen={false} // to avoid double fullscreen as it's handled in DrawerContent\n      contentClass={classnames('dnb-drawer__root', contentClass)}\n    >\n      <DrawerContent {...context.Drawer} {...drawerProps} />\n    </Modal>\n  )\n}\n\nDrawer.Body = DrawerBody\nDrawer.Header = DrawerHeader\nDrawer.Navigation = DrawerNavigation\n\nDrawer._supportsSpacingProps = true\n\nexport default Drawer\n"],"mappings":";;;;;;;;AAIA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,UAAU,MAAM,oBAAoB;AAC3C,OAAOC,YAAY,MAAM,sBAAsB;AAC/C,OAAOC,gBAAgB,MAAM,0BAA0B;AACvD,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,sBAAsB;AAE1C,SAASC,oBAAoB,QAAQ,+BAA+B;AAIpE,SAASC,MAAMA,CAAAC,IAAA,EA8CiB;EAAA,IA9ChB;MACdC,EAAE;MACFC,MAAM;MACNC,SAAS;MACTC,aAAa;MACbC,UAAU;MACVC,eAAe;MACfC,eAAe;MACfC,QAAQ;MAERC,KAAK;MACLC,WAAW;MACXC,UAAU;MACVC,kBAAkB,GAAG,OAAO;MAC5BC,OAAO,GAAG,IAAI;MACdC,WAAW;MACXC,mBAAmB;MACnBC,iBAAiB;MACjBC,UAAU,GAAG,MAAM;MAEnBC,MAAM;MACNC,OAAO;MACPC,cAAc;MACdC,SAAS;MACTC,UAAU;MACVC,YAAY;MACZC,mBAAmB;MACnBC,SAAS;MACTC,SAAS;MAETC,iBAAiB;MACjBC,OAAO;MACPC,iBAAiB;MACjBC,qBAAqB;MACrBC,YAAY;MACZC,YAAY;MACZC,UAAU;MACVC,SAAS;MAETC,GAAG;MACHC,MAAM;MACNC,IAAI;MACJC,KAAK;MACLC;IAGc,CAAC,GAAAvC,IAAA;IADZwC,KAAK,GAAAC,wBAAA,CAAAzC,IAAA,EAAA0C,SAAA;EAER,MAAMC,OAAO,GAAGrD,UAAU,CAACO,OAAO,CAAC;EAEnC,MAAM+C,UAAU,GAAG9C,oBAAoB,CAAC;IACtCW,KAAK;IACLR,EAAE;IACFG,aAAa;IACbC,UAAU;IACVG,QAAQ;IACRK,OAAO;IACPa,SAAS;IACTvB,SAAS;IACTO,WAAW;IACXC,UAAU;IACVJ,eAAe;IACfgB,YAAY;IACZC,mBAAmB;IACnBR,iBAAiB;IACjBF,WAAW;IACXC,mBAAmB;IACnBE,UAAU;IACVL,kBAAkB;IAClBa,SAAS;IACTnB,eAAe;IACfJ,MAAM;IACNgB,MAAM;IACNC,OAAO;IACPC,cAAc;IACdC,SAAS;IACTC,UAAU;IACVK,iBAAiB;IACjBC,OAAO;IACPC,iBAAiB;IACjBC,qBAAqB;IACrBC,YAAY;IACZE,UAAU;IACVC,SAAS;IACTC,GAAG;IACHC,MAAM;IACNC,IAAI;IACJC,KAAK;IACLC;EACF,CAAC,CAAC;EAEF,MAAMM,WAAW,GAAG/C,oBAAoB,CAAAgD,aAAA,CAAAA,aAAA,KACnCN,KAAK;IACR1B,WAAW;IACXC,mBAAmB;IACnBE,UAAU;IACVJ,OAAO;IACPD;EAAkB,EACnB,CAAC;EAEF,OACEvB,KAAA,CAAA0D,aAAA,CAACxD,KAAK,EAAAyD,QAAA,KACAL,OAAO,CAAC5C,MAAM,EACd6C,UAAU;IACd3B,UAAU,EAAE,KAAM;IAClBe,YAAY,EAAEpC,UAAU,CAAC,kBAAkB,EAAEoC,YAAY;EAAE,IAE3D3C,KAAA,CAAA0D,aAAA,CAACvD,aAAa,EAAAwD,QAAA,KAAKL,OAAO,CAAC5C,MAAM,EAAM8C,WAAW,CAAG,CAChD,CAAC;AAEZ;AAEA9C,MAAM,CAACkD,IAAI,GAAGxD,UAAU;AACxBM,MAAM,CAACmD,MAAM,GAAGxD,YAAY;AAC5BK,MAAM,CAACoD,UAAU,GAAGxD,gBAAgB;AAEpCI,MAAM,CAACqD,qBAAqB,GAAG,IAAI;AAEnC,eAAerD,MAAM","ignoreList":[]}

package/components/dropdown/Dropdown.js

@@ -35,7 +35,7 @@ export default class Dropdown extends React.PureComponent {
     return React.createElement(DrawerListProvider, _extends({}, this.props, {
       id: id,
       data: data || children,
-      opened: null,
+      opened: false,
       tagName: "dnb-dropdown",
       ignore_events: false,
       prevent_selection: isTrue(more_menu) || isTrue(action_menu) || isTrue(prevent_selection)
@@ -342,7 +342,8 @@ class DropdownInstance extends React.PureComponent {
     } = props;
     const id = this._id;
     const handleAsMenu = isTrue(action_menu) || isTrue(more_menu) || isTrue(prevent_selection);
-    const isPopupMenu = isTrue(more_menu) || !(_title && _title.length > 0);
+    const title = this.getTitle(_title);
+    const isPopupMenu = isTrue(more_menu) || !title;
     if (isPopupMenu) {
       icon = icon || (isTrue(more_menu) ? 'more' : 'chevron_down');
     }
@@ -358,7 +359,6 @@ class DropdownInstance extends React.PureComponent {
       opened
     } = this.context.drawerList;
     const showStatus = getStatusState(status);
-    const title = this.getTitle(_title);
     Object.assign(this.context.drawerList.attributes, validateDOMAttributes(null, attributes));
     const mainParams = {
       className: classnames(`dnb-dropdown dnb-dropdown--${direction} dnb-dropdown--icon-position-${icon_position || 'right'} dnb-dropdown--${align_dropdown || 'right'} dnb-form-component`, (isTrue(independent_width) || isTrue(action_menu)) && 'dnb-dropdown--independent-width', createSpacingClasses(props), className, opened && 'dnb-dropdown--opened', label_direction && `dnb-dropdown--${label_direction}`, isPopupMenu && 'dnb-dropdown--is-popup', isTrue(action_menu) && `dnb-dropdown--action-menu`, size && `dnb-dropdown--${size}`, isTrue(stretch) && `dnb-dropdown--stretch`, status && `dnb-dropdown__status--${status_state}`, showStatus && 'dnb-dropdown__form-status')
@@ -430,7 +430,9 @@ class DropdownInstance extends React.PureComponent {
       }, icon !== false && React.createElement(Icon, {
         icon: icon || 'chevron_down',
         size: icon_size || (size === 'large' ? 'medium' : 'default')
-      })))
+      }))),
+      role: "combobox",
+      title: title
     }, triggerParams)), React.createElement(DrawerList, {
       id: id,
       role: handleAsMenu ? 'menu' : 'listbox',