@mtes-mct/monitor-ui 1.7.2 → 1.7.4

package/src/fields/DateRangePicker/RangeCalendarPicker.js

@@ -1,147 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
-import { DateRangePicker } from 'rsuite';
-import styled from 'styled-components';
-import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter.js';
-import '../../utils/dayjs.js';
-import { getUtcDayjs } from '../../utils/getUtcDayjs.js';
-import { getUtcizedDayjs } from '../../utils/getUtcizedDayjs.js';
-import { sortDates } from '../../utils/sortDates.js';
-import { stopMouseEventPropagation } from '../../utils/stopMouseEventPropagation.js';
-import { RSUITE_CALENDAR_LOCALE } from './constants.js';
-import { getDateTupleFromDate } from './utils.js';
-import dayjs_minExports from '../../../_virtual/dayjs.min2.js';
-
-function RangeCalendarPicker({ defaultValue, isHistorical, onChange }) {
-    const boxRef = useRef();
-    const selectedFirstDate = useRef();
-    const calendarRef = useRef();
-    const [isFirstLoad, setIsFirstLoad] = useState(true);
-    const controlledValue = useMemo(() => (defaultValue ? sortDates(defaultValue) : undefined), [defaultValue]);
-    const utcTodayAsDayjs = useMemo(() => getUtcDayjs().endOf('day'), []);
-    const disabledDate = useMemo(() => (date) => isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false, [isHistorical, utcTodayAsDayjs]);
-    const handleSelect = useCallback((nextDate) => {
-        if (!selectedFirstDate.current) {
-            selectedFirstDate.current = nextDate;
-            return;
-        }
-        const sortedDateRange = sortDates([selectedFirstDate.current, nextDate]);
-        const [startDate, endDate] = sortedDateRange;
-        const startDateTuple = getDateTupleFromDate(startDate);
-        const endDateTuple = getDateTupleFromDate(endDate);
-        const nextDateTupleRange = [startDateTuple, endDateTuple];
-        onChange(nextDateTupleRange);
-    }, [onChange]);
-    const renderTitle = useCallback((date) => capitalizeFirstLetter(dayjs_minExports(date).format('MMMM YYYY')), []);
-    useEffect(() => {
-        // We wait for the <Box /> to render so that `boxRef` is defined
-        // and can be used as a container for <RsuiteDateRangePicker />
-        setIsFirstLoad(false);
-    }, []);
-    return (jsx(Box, { ref: boxRef, onClick: stopMouseEventPropagation, children: !isFirstLoad && (jsx(DateRangePicker, { ref: calendarRef, container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, onSelect: handleSelect, open: true, ranges: [], renderTitle: renderTitle, 
-            // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
-            value: controlledValue })) }));
-}
-const Box = styled.div `
-  height: 0;
-  position: relative;
-  user-select: none;
-
-  .rs-picker-toggle {
-    display: none;
-  }
-
-  .rs-picker-daterange-panel {
-    height: 290px;
-  }
-
-  .rs-picker-daterange-menu {
-    border: solid 1px ${p => p.theme.color.lightGray};
-    border-radius: 0;
-    margin-top: 0.25rem;
-
-    .rs-picker-daterange-header,
-    .rs-calendar-header-time-toolbar,
-    .rs-picker-toolbar {
-      display: none;
-    }
-
-    .rs-calendar {
-      height: auto !important;
-      padding: 0;
-
-      :first-child {
-        border-right: solid 1px ${p => p.theme.color.lightGray};
-      }
-
-      .rs-calendar-header {
-        border-bottom: solid 1px ${p => p.theme.color.lightGray};
-        padding: 0.5rem;
-
-        .rs-calendar-header-month-toolbar {
-          align-items: center;
-          color: ${p => p.theme.color.slateGray};
-          display: flex;
-          justify-content: space-between;
-
-          .rs-calendar-header-title {
-            font-size: inherit;
-            text-transform: uppercase;
-
-            &.rs-calendar-header-error {
-              color: ${p => p.theme.color.slateGray};
-
-              :hover {
-                color: ${p => p.theme.color.slateGray};
-              }
-            }
-          }
-        }
-      }
-
-      .rs-calendar-view {
-        padding: 0.75rem 0.5rem 0;
-
-        .rs-calendar-table-cell {
-          padding: 0 0 0.25rem 0;
-          width: 33px;
-
-          &.rs-calendar-table-cell-in-range:before {
-            background-color: ${p => p.theme.color.blueGray[25]};
-            height: 33px;
-            margin-top: 0;
-          }
-
-          > .rs-calendar-table-cell-content {
-            align-items: center;
-            border-radius: 0 !important;
-            display: inline-flex;
-            height: 33px;
-            justify-content: center;
-            padding-bottom: 3px;
-            width: 33px;
-          }
-          :hover .rs-calendar-table-cell-content {
-            background-color: ${p => p.theme.color.blueYonder[25]};
-            color: ${p => p.theme.color.blueYonder[100]};
-          }
-          &[role='columnheader'] .rs-calendar-table-cell-content,
-          &[role='columnheader']:hover .rs-calendar-table-cell-content {
-            background-color: transparent;
-            color: ${p => p.theme.color.slateGray};
-          }
-          &.rs-calendar-table-cell-disabled .rs-calendar-table-cell-content {
-            background-color: transparent;
-            color: ${p => p.theme.color.lightGray};
-          }
-          &.rs-calendar-table-cell-selected > .rs-calendar-table-cell-content {
-            background-color: ${p => p.theme.color.blueGray[100]};
-          }
-        }
-      }
-    }
-  }
-`;
-
-export { RangeCalendarPicker };
-//# sourceMappingURL=RangeCalendarPicker.js.map

package/src/fields/DateRangePicker/RangeCalendarPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RangeCalendarPicker.js","sources":["../../../../src/fields/DateRangePicker/RangeCalendarPicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { DateRangePicker as RsuiteDateRangePicker } from 'rsuite'\nimport styled from 'styled-components'\n\nimport { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter'\nimport { dayjs } from '../../utils/dayjs'\nimport { getUtcDayjs } from '../../utils/getUtcDayjs'\nimport { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'\nimport { sortDates } from '../../utils/sortDates'\nimport { stopMouseEventPropagation } from '../../utils/stopMouseEventPropagation'\nimport { RSUITE_CALENDAR_LOCALE } from './constants'\nimport { getDateTupleFromDate } from './utils'\n\nimport type { DateRange } from '../../types'\nimport type { DateTupleRange } from './types'\nimport type { MutableRefObject } from 'react'\nimport type { Promisable } from 'type-fest'\n\ntype RangeCalendarPickerProps = {\n  defaultValue?: DateRange\n  isHistorical?: boolean\n  onChange: (nextDateTupleRange: DateTupleRange) => Promisable<void>\n}\nexport function RangeCalendarPicker({ defaultValue, isHistorical, onChange }: RangeCalendarPickerProps) {\n  const boxRef = useRef() as MutableRefObject<HTMLDivElement>\n  const selectedFirstDate = useRef<Date>()\n  const calendarRef = useRef<any>()\n\n  const [isFirstLoad, setIsFirstLoad] = useState(true)\n\n  const controlledValue = useMemo(\n    () => (defaultValue ? (sortDates(defaultValue) as DateRange) : undefined),\n    [defaultValue]\n  )\n  const utcTodayAsDayjs = useMemo(() => getUtcDayjs().endOf('day'), [])\n  const disabledDate = useMemo(\n    () => (date: Date) => isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false,\n    [isHistorical, utcTodayAsDayjs]\n  )\n\n  const handleSelect = useCallback(\n    (nextDate: Date) => {\n      if (!selectedFirstDate.current) {\n        selectedFirstDate.current = nextDate\n\n        return\n      }\n\n      const sortedDateRange = sortDates([selectedFirstDate.current, nextDate]) as DateRange\n      const [startDate, endDate] = sortedDateRange\n      const startDateTuple = getDateTupleFromDate(startDate)\n      const endDateTuple = getDateTupleFromDate(endDate)\n      const nextDateTupleRange = [startDateTuple, endDateTuple] as DateTupleRange\n\n      onChange(nextDateTupleRange)\n    },\n    [onChange]\n  )\n\n  const renderTitle = useCallback((date: Date) => capitalizeFirstLetter(dayjs(date).format('MMMM YYYY')), [])\n\n  useEffect(() => {\n    // We wait for the <Box /> to render so that `boxRef` is defined\n    // and can be used as a container for <RsuiteDateRangePicker />\n    setIsFirstLoad(false)\n  }, [])\n\n  return (\n    <Box ref={boxRef} onClick={stopMouseEventPropagation}>\n      {!isFirstLoad && (\n        <RsuiteDateRangePicker\n          ref={calendarRef}\n          container={boxRef.current}\n          disabledDate={disabledDate}\n          format=\"yyyy-MM-dd\"\n          locale={RSUITE_CALENDAR_LOCALE}\n          onSelect={handleSelect}\n          open\n          ranges={[]}\n          renderTitle={renderTitle}\n          // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`\n          value={controlledValue}\n        />\n      )}\n    </Box>\n  )\n}\n\nconst Box = styled.div`\n  height: 0;\n  position: relative;\n  user-select: none;\n\n  .rs-picker-toggle {\n    display: none;\n  }\n\n  .rs-picker-daterange-panel {\n    height: 290px;\n  }\n\n  .rs-picker-daterange-menu {\n    border: solid 1px ${p => p.theme.color.lightGray};\n    border-radius: 0;\n    margin-top: 0.25rem;\n\n    .rs-picker-daterange-header,\n    .rs-calendar-header-time-toolbar,\n    .rs-picker-toolbar {\n      display: none;\n    }\n\n    .rs-calendar {\n      height: auto !important;\n      padding: 0;\n\n      :first-child {\n        border-right: solid 1px ${p => p.theme.color.lightGray};\n      }\n\n      .rs-calendar-header {\n        border-bottom: solid 1px ${p => p.theme.color.lightGray};\n        padding: 0.5rem;\n\n        .rs-calendar-header-month-toolbar {\n          align-items: center;\n          color: ${p => p.theme.color.slateGray};\n          display: flex;\n          justify-content: space-between;\n\n          .rs-calendar-header-title {\n            font-size: inherit;\n            text-transform: uppercase;\n\n            &.rs-calendar-header-error {\n              color: ${p => p.theme.color.slateGray};\n\n              :hover {\n                color: ${p => p.theme.color.slateGray};\n              }\n            }\n          }\n        }\n      }\n\n      .rs-calendar-view {\n        padding: 0.75rem 0.5rem 0;\n\n        .rs-calendar-table-cell {\n          padding: 0 0 0.25rem 0;\n          width: 33px;\n\n          &.rs-calendar-table-cell-in-range:before {\n            background-color: ${p => p.theme.color.blueGray[25]};\n            height: 33px;\n            margin-top: 0;\n          }\n\n          > .rs-calendar-table-cell-content {\n            align-items: center;\n            border-radius: 0 !important;\n            display: inline-flex;\n            height: 33px;\n            justify-content: center;\n            padding-bottom: 3px;\n            width: 33px;\n          }\n          :hover .rs-calendar-table-cell-content {\n            background-color: ${p => p.theme.color.blueYonder[25]};\n            color: ${p => p.theme.color.blueYonder[100]};\n          }\n          &[role='columnheader'] .rs-calendar-table-cell-content,\n          &[role='columnheader']:hover .rs-calendar-table-cell-content {\n            background-color: transparent;\n            color: ${p => p.theme.color.slateGray};\n          }\n          &.rs-calendar-table-cell-disabled .rs-calendar-table-cell-content {\n            background-color: transparent;\n            color: ${p => p.theme.color.lightGray};\n          }\n          &.rs-calendar-table-cell-selected > .rs-calendar-table-cell-content {\n            background-color: ${p => p.theme.color.blueGray[100]};\n          }\n        }\n      }\n    }\n  }\n`\n"],"names":["dayjs","_jsx","RsuiteDateRangePicker"],"mappings":"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"}

package/src/fields/DateRangePicker/RangedTimePicker.js

@@ -1,90 +0,0 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useMemo, useState, useCallback, useEffect } from 'react';
-import styled from 'styled-components';
-import { stopMouseEventPropagation } from '../../utils/stopMouseEventPropagation.js';
-import { getRangedTimeOptions } from './utils.js';
-
-function RangedTimePicker({ filter, minutesRange, onChange }) {
-    const rangedTimeOptions = useMemo(() => getRangedTimeOptions(minutesRange), [minutesRange]);
-    const filteredRangedTimeOptions = useMemo(() => rangedTimeOptions.filter(({ label }) => filter.test(label)), [filter, rangedTimeOptions]);
-    const [selectedOptionIndex, setSelectedOptionIndex] = useState(0);
-    const handleBoxKeyDown = useCallback((event) => {
-        if (event.key === 'ArrowDown') {
-            event.preventDefault();
-            const nextSelectedOptionIndex = selectedOptionIndex < filteredRangedTimeOptions.length - 1 ? selectedOptionIndex + 1 : 0;
-            setSelectedOptionIndex(nextSelectedOptionIndex);
-            window.document.querySelectorAll('.js-ranged-time-picker-option')[nextSelectedOptionIndex]?.scrollIntoView();
-        }
-        if (event.key === 'ArrowUp') {
-            event.preventDefault();
-            const nextSelectedOptionIndex = selectedOptionIndex > 0 ? selectedOptionIndex - 1 : filteredRangedTimeOptions.length - 1;
-            setSelectedOptionIndex(nextSelectedOptionIndex);
-            window.document.querySelectorAll('.js-ranged-time-picker-option')[nextSelectedOptionIndex]?.scrollIntoView();
-        }
-        if (['Enter', 'Space', 'Tab'].includes(event.key)) {
-            const selectedRangedTimeOption = filteredRangedTimeOptions[selectedOptionIndex];
-            if (!selectedRangedTimeOption) {
-                return;
-            }
-            onChange(selectedRangedTimeOption.value);
-        }
-    }, [filteredRangedTimeOptions, selectedOptionIndex, onChange]);
-    useEffect(() => {
-        window.addEventListener('keydown', handleBoxKeyDown, {
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            once: true
-        });
-        return () => {
-            window.removeEventListener('keydown', handleBoxKeyDown);
-        };
-    }, [handleBoxKeyDown]);
-    useEffect(() => {
-        setSelectedOptionIndex(0);
-    }, [filteredRangedTimeOptions]);
-    if (!filteredRangedTimeOptions.length) {
-        return jsx(Fragment, {});
-    }
-    return (jsx(Box, { onClick: stopMouseEventPropagation, role: "listbox", children: filteredRangedTimeOptions.map(({ label, value }, index) => (jsx(Option, { "aria-selected": false, className: "js-ranged-time-picker-option", isSelected: index === selectedOptionIndex, onClick: () => onChange(value), role: "option", tabIndex: -1, children: label }, label))) }));
-}
-const Box = styled.div `
-  background-color: ${p => p.theme.color.gainsboro};
-  display: flex;
-  flex-direction: column;
-  left: -1px;
-  max-height: 10rem;
-  overflow: auto;
-  position: absolute;
-  /* Non-WebKit Firefox Compatibility */
-  scrollbar-color: ${p => p.theme.color.lightGray};
-  scrollbar-width: thin;
-  top: 2.25rem;
-  z-index: 9999;
-
-  ::-webkit-scrollbar {
-    -webkit-appearance: none;
-  }
-  ::-webkit-scrollbar:vertical {
-    width: 0.33rem;
-  }
-  ::-webkit-scrollbar-thumb {
-    border: 0;
-    background-color: ${p => p.theme.color.lightGray};
-  }
-  ::-webkit-scrollbar-track {
-    background-color: ${p => p.theme.color.gainsboro};
-  }
-`;
-const Option = styled.div `
-  background-color: ${p => (p.isSelected ? p.theme.color.blueGray[100] : 'transparent')};
-  cursor: pointer;
-  line-height: 1;
-  padding: 5px 9px 7px 8px;
-  text-align: center;
-
-  :hover {
-    background-color: ${p => (p.isSelected ? p.theme.color.blueGray[100] : p.theme.color.blueYonder[25])};
-  }
-`;
-
-export { RangedTimePicker };
-//# sourceMappingURL=RangedTimePicker.js.map

package/src/fields/DateRangePicker/RangedTimePicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RangedTimePicker.js","sources":["../../../../src/fields/DateRangePicker/RangedTimePicker.tsx"],"sourcesContent":["import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { stopMouseEventPropagation } from '../../utils/stopMouseEventPropagation'\nimport { getRangedTimeOptions } from './utils'\n\nimport type { TimeTuple } from './types'\nimport type { Promisable } from 'type-fest'\n\ntype RangedTimePickerProps = {\n  filter: RegExp\n  minutesRange: number\n  onChange: (nextTimeTuple: TimeTuple) => Promisable<void>\n}\nexport function RangedTimePicker({ filter, minutesRange, onChange }: RangedTimePickerProps) {\n  const rangedTimeOptions = useMemo(() => getRangedTimeOptions(minutesRange), [minutesRange])\n  const filteredRangedTimeOptions = useMemo(\n    () => rangedTimeOptions.filter(({ label }) => filter.test(label)),\n    [filter, rangedTimeOptions]\n  )\n\n  const [selectedOptionIndex, setSelectedOptionIndex] = useState(0)\n\n  const handleBoxKeyDown = useCallback(\n    (event: globalThis.KeyboardEvent) => {\n      if (event.key === 'ArrowDown') {\n        event.preventDefault()\n\n        const nextSelectedOptionIndex =\n          selectedOptionIndex < filteredRangedTimeOptions.length - 1 ? selectedOptionIndex + 1 : 0\n\n        setSelectedOptionIndex(nextSelectedOptionIndex)\n\n        window.document.querySelectorAll('.js-ranged-time-picker-option')[nextSelectedOptionIndex]?.scrollIntoView()\n      }\n\n      if (event.key === 'ArrowUp') {\n        event.preventDefault()\n\n        const nextSelectedOptionIndex =\n          selectedOptionIndex > 0 ? selectedOptionIndex - 1 : filteredRangedTimeOptions.length - 1\n\n        setSelectedOptionIndex(nextSelectedOptionIndex)\n\n        window.document.querySelectorAll('.js-ranged-time-picker-option')[nextSelectedOptionIndex]?.scrollIntoView()\n      }\n\n      if (['Enter', 'Space', 'Tab'].includes(event.key)) {\n        const selectedRangedTimeOption = filteredRangedTimeOptions[selectedOptionIndex]\n        if (!selectedRangedTimeOption) {\n          return\n        }\n\n        onChange(selectedRangedTimeOption.value)\n      }\n    },\n    [filteredRangedTimeOptions, selectedOptionIndex, onChange]\n  )\n\n  useEffect(() => {\n    window.addEventListener('keydown', handleBoxKeyDown, {\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      once: true\n    })\n\n    return () => {\n      window.removeEventListener('keydown', handleBoxKeyDown)\n    }\n  }, [handleBoxKeyDown])\n\n  useEffect(() => {\n    setSelectedOptionIndex(0)\n  }, [filteredRangedTimeOptions])\n\n  if (!filteredRangedTimeOptions.length) {\n    return <></>\n  }\n\n  return (\n    <Box onClick={stopMouseEventPropagation} role=\"listbox\">\n      {filteredRangedTimeOptions.map(({ label, value }, index) => (\n        <Option\n          key={label}\n          aria-selected={false}\n          className=\"js-ranged-time-picker-option\"\n          isSelected={index === selectedOptionIndex}\n          onClick={() => onChange(value)}\n          role=\"option\"\n          tabIndex={-1}\n        >\n          {label}\n        </Option>\n      ))}\n    </Box>\n  )\n}\n\nconst Box = styled.div`\n  background-color: ${p => p.theme.color.gainsboro};\n  display: flex;\n  flex-direction: column;\n  left: -1px;\n  max-height: 10rem;\n  overflow: auto;\n  position: absolute;\n  /* Non-WebKit Firefox Compatibility */\n  scrollbar-color: ${p => p.theme.color.lightGray};\n  scrollbar-width: thin;\n  top: 2.25rem;\n  z-index: 9999;\n\n  ::-webkit-scrollbar {\n    -webkit-appearance: none;\n  }\n  ::-webkit-scrollbar:vertical {\n    width: 0.33rem;\n  }\n  ::-webkit-scrollbar-thumb {\n    border: 0;\n    background-color: ${p => p.theme.color.lightGray};\n  }\n  ::-webkit-scrollbar-track {\n    background-color: ${p => p.theme.color.gainsboro};\n  }\n`\n\nconst Option = styled.div<{\n  isSelected: boolean\n}>`\n  background-color: ${p => (p.isSelected ? p.theme.color.blueGray[100] : 'transparent')};\n  cursor: pointer;\n  line-height: 1;\n  padding: 5px 9px 7px 8px;\n  text-align: center;\n\n  :hover {\n    background-color: ${p => (p.isSelected ? p.theme.color.blueGray[100] : p.theme.color.blueYonder[25])};\n  }\n`\n"],"names":["_jsx"],"mappings":"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"}

package/src/fields/DateRangePicker/TimeInput.js

@@ -1,116 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useImperativeHandle, useCallback, useEffect } from 'react';
-import styled from 'styled-components';
-import { useForceUpdate } from '../../hooks/useForceUpdate.js';
-import { NumberInput } from './NumberInput.js';
-import { RangedTimePicker } from './RangedTimePicker.js';
-
-function TimeInputWithRef({ defaultValue, isStartDate = false, minutesRange = 15, onBack, onChange, onFocus, onNext, onPrevious }, ref) {
-    const boxSpanRef = useRef();
-    const hourInputRef = useRef();
-    const minuteInputRef = useRef();
-    const [controlledDefaultValue, setControlledDefaultValue] = useState(defaultValue);
-    const [hasFormatError, setHasFormatError] = useState(false);
-    const [hasValidationError, setHasValidationError] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
-    useImperativeHandle(ref, () => ({
-        boxSpan: boxSpanRef.current,
-        focus: (isInLastInputOfTheGroup = false) => {
-            if (isInLastInputOfTheGroup) {
-                minuteInputRef.current.focus();
-            }
-            else {
-                hourInputRef.current.focus();
-            }
-        }
-    }));
-    const isRangedTimePickerOpenRef = useRef(false);
-    const [rangedTimePickerFilter, setRangedTimePickerFilter] = useState(/.*/);
-    const { forceUpdate } = useForceUpdate();
-    const closeRangedTimePicker = useCallback(() => {
-        isRangedTimePickerOpenRef.current = false;
-        forceUpdate();
-    }, [forceUpdate]);
-    const handleBack = useCallback(() => {
-        if (!onBack) {
-            return;
-        }
-        closeRangedTimePicker();
-        onBack();
-    }, [closeRangedTimePicker, onBack]);
-    const handleBlur = useCallback(() => {
-        setIsFocused(false);
-    }, []);
-    const handleClickOutside = useCallback((event) => {
-        const target = event.target;
-        if (hourInputRef.current.contains(target) || minuteInputRef.current.contains(target)) {
-            return;
-        }
-        closeRangedTimePicker();
-    }, [closeRangedTimePicker]);
-    const handleFocus = useCallback(() => {
-        setIsFocused(true);
-        if (onFocus) {
-            onFocus();
-        }
-    }, [onFocus]);
-    const handleFormatError = useCallback((hasNextFormatError) => {
-        setHasFormatError(hasNextFormatError);
-    }, []);
-    const handleRangedTimePickedChange = useCallback((nextTimeTuple) => {
-        closeRangedTimePicker();
-        setControlledDefaultValue(nextTimeTuple);
-        onChange(nextTimeTuple);
-    }, [closeRangedTimePicker, onChange]);
-    const handleHourInput = useCallback((nextValue) => {
-        // eslint-disable-next-line no-nested-ternary
-        const nextRangedTimePickerFilter = nextValue.length ? new RegExp(`^${nextValue}`) : /.*/;
-        setRangedTimePickerFilter(nextRangedTimePickerFilter);
-    }, []);
-    const openRangedTimePicker = useCallback(() => {
-        isRangedTimePickerOpenRef.current = true;
-        forceUpdate();
-    }, [forceUpdate]);
-    useEffect(() => {
-        window.document.addEventListener('click', handleClickOutside);
-        return () => {
-            window.document.removeEventListener('click', handleClickOutside);
-        };
-    }, [handleClickOutside]);
-    const submit = useCallback(() => {
-        setHasValidationError(false);
-        if (window.document.activeElement === hourInputRef.current) {
-            minuteInputRef.current.focus();
-        }
-        if (!hourInputRef.current.value.length || !minuteInputRef.current.value.length) {
-            if (minuteInputRef.current.value.length && !hourInputRef.current.value.length) {
-                setHasValidationError(true);
-            }
-            return;
-        }
-        closeRangedTimePicker();
-        const nextTimeTuple = [hourInputRef.current.value, minuteInputRef.current.value];
-        onChange(nextTimeTuple);
-    }, [closeRangedTimePicker, onChange]);
-    return (jsxs(Box, { ref: boxSpanRef, hasError: hasFormatError || hasValidationError, isFocused: isFocused, children: [jsxs(Fragment, { children: [jsx(NumberInput, { ref: hourInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-hour`, defaultValue: controlledDefaultValue && controlledDefaultValue[0], max: 23, min: 0, onBack: handleBack, onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: handleHourInput, onNext: () => minuteInputRef.current.focus(), onPrevious: onPrevious, size: 2 }), ":", jsx(NumberInput, { ref: minuteInputRef, "data-cy": `date-range-picker-${isStartDate ? 'start' : 'end'}-minute`, defaultValue: controlledDefaultValue && controlledDefaultValue[1], max: 59, min: 0, onBack: () => hourInputRef.current.focus(), onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onNext: onNext, onPrevious: () => hourInputRef.current.focus(), size: 2 })] }), isRangedTimePickerOpenRef.current && (jsx(RangedTimePicker, { filter: rangedTimePickerFilter, minutesRange: minutesRange, onChange: handleRangedTimePickedChange }))] }));
-}
-const TimeInput = forwardRef(TimeInputWithRef);
-const Box = styled.span `
-  background-color: ${p => p.theme.color.gainsboro};
-  box-shadow: ${p => p.hasError || p.isFocused
-    ? `inset 0px 0px 0px 1px ${p.hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100]}`
-    : 'none'};
-  color: ${p => p.theme.color.slateGray};
-  display: inline-block;
-  font-size: inherit;
-  padding: 0.3125rem 0.5rem 0.4375rem;
-  position: relative;
-  user-select: none;
-
-  :hover {
-    box-shadow: ${p => `inset 0px 0px 0px 1px ${p.theme.color.blueYonder[100]}`};
-  }
-`;
-
-export { TimeInput };
-//# sourceMappingURL=TimeInput.js.map

package/src/fields/DateRangePicker/TimeInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimeInput.js","sources":["../../../../src/fields/DateRangePicker/TimeInput.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport styled from 'styled-components'\n\nimport { useForceUpdate } from '../../hooks/useForceUpdate'\nimport { NumberInput } from './NumberInput'\nimport { RangedTimePicker } from './RangedTimePicker'\n\nimport type { NumberInputProps } from './NumberInput'\nimport type { DateOrTimeInputRef, TimeTuple } from './types'\nimport type { ForwardedRef, MutableRefObject } from 'react'\nimport type { Promisable } from 'type-fest'\n\nexport type TimeInputProps = Pick<NumberInputProps, 'onBack' | 'onPrevious' | 'onNext'> & {\n  defaultValue?: TimeTuple\n  isStartDate?: boolean\n  minutesRange?: number\n  /** Called each time the time input is changed to a new valid value. */\n  onChange: (nextTimeTuple: TimeTuple) => Promisable<void>\n  onFocus?: () => Promisable<void>\n  onNext?: () => Promisable<void>\n  onPrevious?: () => Promisable<void>\n}\nfunction TimeInputWithRef(\n  {\n    defaultValue,\n    isStartDate = false,\n    minutesRange = 15,\n    onBack,\n    onChange,\n    onFocus,\n    onNext,\n    onPrevious\n  }: TimeInputProps,\n  ref: ForwardedRef<DateOrTimeInputRef>\n) {\n  const boxSpanRef = useRef() as MutableRefObject<HTMLSpanElement>\n  const hourInputRef = useRef() as MutableRefObject<HTMLInputElement>\n  const minuteInputRef = useRef() as MutableRefObject<HTMLInputElement>\n\n  const [controlledDefaultValue, setControlledDefaultValue] = useState(defaultValue)\n  const [hasFormatError, setHasFormatError] = useState(false)\n  const [hasValidationError, setHasValidationError] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n\n  useImperativeHandle<DateOrTimeInputRef, DateOrTimeInputRef>(ref, () => ({\n    boxSpan: boxSpanRef.current,\n    focus: (isInLastInputOfTheGroup = false) => {\n      if (isInLastInputOfTheGroup) {\n        minuteInputRef.current.focus()\n      } else {\n        hourInputRef.current.focus()\n      }\n    }\n  }))\n\n  const isRangedTimePickerOpenRef = useRef(false)\n\n  const [rangedTimePickerFilter, setRangedTimePickerFilter] = useState<RegExp>(/.*/)\n\n  const { forceUpdate } = useForceUpdate()\n\n  const closeRangedTimePicker = useCallback(() => {\n    isRangedTimePickerOpenRef.current = false\n\n    forceUpdate()\n  }, [forceUpdate])\n\n  const handleBack = useCallback(() => {\n    if (!onBack) {\n      return\n    }\n\n    closeRangedTimePicker()\n\n    onBack()\n  }, [closeRangedTimePicker, onBack])\n\n  const handleBlur = useCallback(() => {\n    setIsFocused(false)\n  }, [])\n\n  const handleClickOutside = useCallback(\n    (event: globalThis.MouseEvent) => {\n      const target = event.target as Node | null\n\n      if (hourInputRef.current.contains(target) || minuteInputRef.current.contains(target)) {\n        return\n      }\n\n      closeRangedTimePicker()\n    },\n    [closeRangedTimePicker]\n  )\n\n  const handleFocus = useCallback(() => {\n    setIsFocused(true)\n\n    if (onFocus) {\n      onFocus()\n    }\n  }, [onFocus])\n\n  const handleFormatError = useCallback((hasNextFormatError: boolean) => {\n    setHasFormatError(hasNextFormatError)\n  }, [])\n\n  const handleRangedTimePickedChange = useCallback(\n    (nextTimeTuple: TimeTuple) => {\n      closeRangedTimePicker()\n\n      setControlledDefaultValue(nextTimeTuple)\n\n      onChange(nextTimeTuple)\n    },\n    [closeRangedTimePicker, onChange]\n  )\n\n  const handleHourInput = useCallback((nextValue: string) => {\n    // eslint-disable-next-line no-nested-ternary\n    const nextRangedTimePickerFilter = nextValue.length ? new RegExp(`^${nextValue}`) : /.*/\n\n    setRangedTimePickerFilter(nextRangedTimePickerFilter)\n  }, [])\n\n  const openRangedTimePicker = useCallback(() => {\n    isRangedTimePickerOpenRef.current = true\n\n    forceUpdate()\n  }, [forceUpdate])\n\n  useEffect(() => {\n    window.document.addEventListener('click', handleClickOutside)\n\n    return () => {\n      window.document.removeEventListener('click', handleClickOutside)\n    }\n  }, [handleClickOutside])\n\n  const submit = useCallback(() => {\n    setHasValidationError(false)\n\n    if (window.document.activeElement === hourInputRef.current) {\n      minuteInputRef.current.focus()\n    }\n\n    if (!hourInputRef.current.value.length || !minuteInputRef.current.value.length) {\n      if (minuteInputRef.current.value.length && !hourInputRef.current.value.length) {\n        setHasValidationError(true)\n      }\n\n      return\n    }\n\n    closeRangedTimePicker()\n\n    const nextTimeTuple: TimeTuple = [hourInputRef.current.value, minuteInputRef.current.value]\n    onChange(nextTimeTuple)\n  }, [closeRangedTimePicker, onChange])\n\n  return (\n    <Box ref={boxSpanRef} hasError={hasFormatError || hasValidationError} isFocused={isFocused}>\n      <>\n        <NumberInput\n          ref={hourInputRef}\n          data-cy={`date-range-picker-${isStartDate ? 'start' : 'end'}-hour`}\n          defaultValue={controlledDefaultValue && controlledDefaultValue[0]}\n          max={23}\n          min={0}\n          onBack={handleBack}\n          onBlur={handleBlur}\n          onClick={openRangedTimePicker}\n          onFilled={submit}\n          onFocus={handleFocus}\n          onFormatError={handleFormatError}\n          onInput={handleHourInput}\n          onNext={() => minuteInputRef.current.focus()}\n          onPrevious={onPrevious}\n          size={2}\n        />\n        :\n        <NumberInput\n          ref={minuteInputRef}\n          data-cy={`date-range-picker-${isStartDate ? 'start' : 'end'}-minute`}\n          defaultValue={controlledDefaultValue && controlledDefaultValue[1]}\n          max={59}\n          min={0}\n          onBack={() => hourInputRef.current.focus()}\n          onBlur={handleBlur}\n          onClick={openRangedTimePicker}\n          onFilled={submit}\n          onFocus={handleFocus}\n          onFormatError={handleFormatError}\n          onNext={onNext}\n          onPrevious={() => hourInputRef.current.focus()}\n          size={2}\n        />\n      </>\n\n      {isRangedTimePickerOpenRef.current && (\n        <RangedTimePicker\n          filter={rangedTimePickerFilter}\n          minutesRange={minutesRange}\n          onChange={handleRangedTimePickedChange}\n        />\n      )}\n    </Box>\n  )\n}\n\nexport const TimeInput = forwardRef(TimeInputWithRef)\n\nconst Box = styled.span<{\n  hasError: boolean\n  isFocused: boolean\n}>`\n  background-color: ${p => p.theme.color.gainsboro};\n  box-shadow: ${p =>\n    p.hasError || p.isFocused\n      ? `inset 0px 0px 0px 1px ${p.hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100]}`\n      : 'none'};\n  color: ${p => p.theme.color.slateGray};\n  display: inline-block;\n  font-size: inherit;\n  padding: 0.3125rem 0.5rem 0.4375rem;\n  position: relative;\n  user-select: none;\n\n  :hover {\n    box-shadow: ${p => `inset 0px 0px 0px 1px ${p.theme.color.blueYonder[100]}`};\n  }\n`\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/src/fields/DateRangePicker/constants.js

@@ -1,34 +0,0 @@
-import fr from '../../../.yarn/cache/date-fns-npm-2.29.3-fef7e3c72c-e01cf5b62a.zip/node_modules/date-fns/esm/locale/fr/index.js';
-
-new Array(24).fill(undefined).map((_, index) => ({
-    label: String(index).padStart(2, '0'),
-    value: index
-}));
-const RSUITE_CALENDAR_LOCALE = {
-    // TODO Why this doesn't work?
-    dateLocale: fr,
-    formattedDayPattern: 'dd/MM/yyyy',
-    formattedMonthPattern: 'MM/yyyy',
-    friday: 'V',
-    hours: 'Heures',
-    minutes: 'Minutes',
-    monday: 'L',
-    ok: 'Valider',
-    saturday: 'S',
-    seconds: 'Secondes',
-    sunday: 'D',
-    thursday: 'J',
-    today: 'Aujourd’hui',
-    tuesday: 'M',
-    wednesday: 'M',
-    yesterday: 'Hier'
-};
-var STATUS;
-(function (STATUS) {
-    STATUS["END_DATE"] = "END_DATE";
-    STATUS["NO_DATE"] = "NO_DATE";
-    STATUS["START_DATE"] = "START_DATE";
-})(STATUS || (STATUS = {}));
-
-export { RSUITE_CALENDAR_LOCALE, STATUS };
-//# sourceMappingURL=constants.js.map

package/src/fields/DateRangePicker/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sources":["../../../../src/fields/DateRangePicker/constants.ts"],"sourcesContent":["import fr from 'date-fns/locale/fr'\n\nimport type { DateRangePickerLocale } from 'rsuite'\n\nexport const HOURS_AS_OPTIONS = new Array(24).fill(undefined).map((_, index) => ({\n  label: String(index).padStart(2, '0'),\n  value: index\n}))\n\nexport const RSUITE_CALENDAR_LOCALE: DateRangePickerLocale = {\n  // TODO Why this doesn't work?\n  dateLocale: fr,\n  formattedDayPattern: 'dd/MM/yyyy',\n  formattedMonthPattern: 'MM/yyyy',\n  friday: 'V',\n  hours: 'Heures',\n  minutes: 'Minutes',\n  monday: 'L',\n  ok: 'Valider',\n  saturday: 'S',\n  seconds: 'Secondes',\n  sunday: 'D',\n  thursday: 'J',\n  today: 'Aujourd’hui',\n  tuesday: 'M',\n  wednesday: 'M',\n  yesterday: 'Hier'\n}\n\nexport enum STATUS {\n  'END_DATE' = 'END_DATE',\n  'NO_DATE' = 'NO_DATE',\n  'START_DATE' = 'START_DATE'\n}\n"],"names":[],"mappings":";;AAIgC,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM;IAC/E,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;AACrC,IAAA,KAAK,EAAE,KAAK;AACb,CAAA,CAAC,EAAC;AAEU,MAAA,sBAAsB,GAA0B;;AAE3D,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,mBAAmB,EAAE,YAAY;AACjC,IAAA,qBAAqB,EAAE,SAAS;AAChC,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,KAAK,EAAE,QAAQ;AACf,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,EAAE,EAAE,SAAS;AACb,IAAA,QAAQ,EAAE,GAAG;AACb,IAAA,OAAO,EAAE,UAAU;AACnB,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,QAAQ,EAAE,GAAG;AACb,IAAA,KAAK,EAAE,aAAa;AACpB,IAAA,OAAO,EAAE,GAAG;AACZ,IAAA,SAAS,EAAE,GAAG;AACd,IAAA,SAAS,EAAE,MAAM;EAClB;IAEW,OAIX;AAJD,CAAA,UAAY,MAAM,EAAA;AAChB,IAAA,MAAA,CAAA,UAAA,CAAA,GAAA,UAAuB,CAAA;AACvB,IAAA,MAAA,CAAA,SAAA,CAAA,GAAA,SAAqB,CAAA;AACrB,IAAA,MAAA,CAAA,YAAA,CAAA,GAAA,YAA2B,CAAA;AAC7B,CAAC,EAJW,MAAM,KAAN,MAAM,GAIjB,EAAA,CAAA,CAAA;;;;"}

package/src/fields/DateRangePicker/index.js

@@ -1,187 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useMemo, useCallback, useEffect } from 'react';
-import styled from 'styled-components';
-import { Fieldset } from '../../elements/Fieldset.js';
-import { Legend } from '../../elements/Legend.js';
-import { useForceUpdate } from '../../hooks/useForceUpdate.js';
-import { getLocalizedDayjs } from '../../utils/getLocalizedDayjs.js';
-import { getUtcizedDayjs } from '../../utils/getUtcizedDayjs.js';
-import { DateInput } from './DateInput.js';
-import { RangeCalendarPicker } from './RangeCalendarPicker.js';
-import { TimeInput } from './TimeInput.js';
-import { DateRangePosition } from './types.js';
-import { getDateTupleFromDate, getTimeTupleFromDate, getDateFromDateAndTimeTuple } from './utils.js';
-
-function DateRangePicker({ defaultValue, isHistorical = false, isLabelHidden = false, label, minutesRange = 15, onChange, withTime = false }) {
-    const startDateInputRef = useRef();
-    const startTimeInputRef = useRef();
-    const endDateInputRef = useRef();
-    const endTimeInputRef = useRef();
-    const isRangeCalendarPickerOpenRef = useRef(false);
-    const selectedStartDateRef = useRef(defaultValue ? getLocalizedDayjs(defaultValue[0]).toDate() : undefined);
-    const selectedEndDateRef = useRef(defaultValue ? getLocalizedDayjs(defaultValue[1]).toDate() : undefined);
-    const selectedStartDateTupleRef = useRef(getDateTupleFromDate(selectedStartDateRef.current));
-    const selectedEndDateTupleRef = useRef(getDateTupleFromDate(selectedEndDateRef.current));
-    const selectedStartTimeTupleRef = useRef(getTimeTupleFromDate(selectedStartDateRef.current));
-    const selectedEndTimeTupleRef = useRef(getTimeTupleFromDate(selectedEndDateRef.current));
-    const { forceUpdate } = useForceUpdate();
-    const rangeCalendarPickerDefaultValue = useMemo(() => selectedStartDateTupleRef.current && selectedEndDateTupleRef.current
-        ? [
-            getDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, ['00', '00']),
-            getDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, ['00', '00'], true)
-        ]
-        : undefined, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedEndDateTupleRef.current, selectedStartDateTupleRef.current]);
-    const submit = useCallback(() => {
-        if (!onChange || !selectedStartDateRef.current || !selectedEndDateRef.current) {
-            return;
-        }
-        const utcizedStartDate = getUtcizedDayjs(selectedStartDateRef.current).toDate();
-        const utcizedEndDate = getUtcizedDayjs(selectedEndDateRef.current).toDate();
-        const nextDateRange = [utcizedStartDate, utcizedEndDate];
-        onChange(nextDateRange);
-    }, [onChange]);
-    const closeRangeCalendarPicker = useCallback(() => {
-        isRangeCalendarPickerOpenRef.current = false;
-        forceUpdate();
-    }, [forceUpdate]);
-    const handleClickOutside = useCallback((event) => {
-        const target = event.target;
-        if (startDateInputRef.current.boxSpan.contains(target) || endDateInputRef.current.boxSpan.contains(target)) {
-            return;
-        }
-        closeRangeCalendarPicker();
-    }, [closeRangeCalendarPicker]);
-    const handleEndDateInputNext = useCallback(() => {
-        if (!withTime) {
-            return;
-        }
-        endTimeInputRef.current.focus();
-    }, [withTime]);
-    const handleEndDateInputPrevious = useCallback(() => {
-        if (withTime) {
-            startTimeInputRef.current.focus(true);
-            return;
-        }
-        startDateInputRef.current.focus(true);
-    }, [withTime]);
-    const handleStartDateInputNext = useCallback(() => {
-        if (withTime) {
-            startTimeInputRef.current.focus();
-            return;
-        }
-        endDateInputRef.current.focus();
-    }, [withTime]);
-    const handleDateInputFilled = useCallback((position, nextDateTuple) => {
-        if (position === DateRangePosition.START) {
-            selectedStartDateTupleRef.current = nextDateTuple;
-            // If there is no time input or a start time has already been selected,
-            if (!withTime || selectedStartTimeTupleRef.current) {
-                // we must update the selected start date and call onChange()
-                const startTimeTuple = (withTime ? selectedStartTimeTupleRef.current : ['00', '00']);
-                const nextStartDate = getDateFromDateAndTimeTuple(nextDateTuple, startTimeTuple);
-                selectedStartDateRef.current = nextStartDate;
-                submit();
-            }
-            handleStartDateInputNext();
-        }
-        else {
-            selectedEndDateTupleRef.current = nextDateTuple;
-            // If there is no time input or an end time has already been selected,
-            if (!withTime || selectedEndTimeTupleRef.current) {
-                // we must update the selected end date and call onChange()
-                const endTimeTuple = (withTime ? selectedEndTimeTupleRef.current : ['23', '59']);
-                const nextEndDate = getDateFromDateAndTimeTuple(nextDateTuple, endTimeTuple, true);
-                selectedEndDateRef.current = nextEndDate;
-                submit();
-            }
-            handleEndDateInputNext();
-        }
-    }, [handleEndDateInputNext, handleStartDateInputNext, submit, withTime]);
-    const handleRangeCalendarPickerChange = useCallback((nextDateTupleRange) => {
-        const [nextStartDateTuple, nextEndDateTuple] = nextDateTupleRange;
-        // If this is a date picker without a time input,
-        if (!withTime) {
-            // we have to fix the start date at the beginning of the day
-            const nextStartDate = getDateFromDateAndTimeTuple(nextStartDateTuple, ['00', '00']);
-            // and the end date at the end of the day
-            const nextEndDate = getDateFromDateAndTimeTuple(nextEndDateTuple, ['23', '59'], true);
-            selectedStartDateRef.current = nextStartDate;
-            selectedEndDateRef.current = nextEndDate;
-        }
-        // If this is a date picker with a time input,
-        else {
-            // we include the selected start time if it exists, set it at the beginning of the day if not
-            const nextStartDate = getDateFromDateAndTimeTuple(nextStartDateTuple, selectedStartTimeTupleRef.current || ['00', '00']);
-            selectedStartDateRef.current = nextStartDate;
-            // we include the selected end time if it exists, set it at the end of the day if not
-            const nextEndDate = getDateFromDateAndTimeTuple(nextEndDateTuple, selectedEndTimeTupleRef.current || ['23', '59'], true);
-            selectedEndDateRef.current = nextEndDate;
-        }
-        selectedStartDateTupleRef.current = nextStartDateTuple;
-        selectedStartTimeTupleRef.current = getTimeTupleFromDate(selectedStartDateRef.current);
-        selectedEndDateTupleRef.current = nextEndDateTuple;
-        selectedEndTimeTupleRef.current = getTimeTupleFromDate(selectedEndDateRef.current);
-        closeRangeCalendarPicker();
-        forceUpdate();
-        submit();
-    }, [closeRangeCalendarPicker, forceUpdate, submit, withTime]);
-    const handleTimeInputFilled = useCallback((position, nextTimeTuple) => {
-        if (position === DateRangePosition.START) {
-            // If a start date has already been selected
-            if (selectedStartDateTupleRef.current) {
-                // we must update the selected start date accordingly and submit it
-                const nextStartDate = getDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, nextTimeTuple);
-                selectedStartDateRef.current = nextStartDate;
-                submit();
-            }
-            selectedStartTimeTupleRef.current = nextTimeTuple;
-            endDateInputRef.current.focus();
-        }
-        else {
-            // If an end date has already been selected
-            if (selectedEndDateTupleRef.current) {
-                // we must update the selected end date accordingly and submit it
-                const nextEndDate = getDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, nextTimeTuple, true);
-                selectedEndDateRef.current = nextEndDate;
-                submit();
-            }
-            selectedEndTimeTupleRef.current = nextTimeTuple;
-        }
-        submit();
-    }, [submit]);
-    const openRangeCalendarPicker = useCallback(() => {
-        isRangeCalendarPickerOpenRef.current = true;
-        forceUpdate();
-    }, [forceUpdate]);
-    useEffect(() => {
-        window.document.addEventListener('click', handleClickOutside);
-        return () => {
-            window.document.removeEventListener('click', handleClickOutside);
-        };
-    }, [handleClickOutside]);
-    return (jsxs(Fieldset, { className: "DateRangePicker", children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsxs(Box, { children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, defaultValue: selectedStartDateTupleRef.current, isForcedFocused: isRangeCalendarPickerOpenRef.current, isStartDate: true, onChange: nextDateTuple => handleDateInputFilled(DateRangePosition.START, nextDateTuple), onClick: openRangeCalendarPicker, onNext: handleStartDateInputNext }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, defaultValue: selectedStartTimeTupleRef.current, isStartDate: true, minutesRange: minutesRange, onBack: () => startDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple), onFocus: closeRangeCalendarPicker, onNext: () => endDateInputRef.current.focus(), onPrevious: () => startDateInputRef.current.focus(true) }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, defaultValue: selectedEndDateTupleRef.current, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, onBack: handleEndDateInputPrevious, onChange: nextDateTuple => handleDateInputFilled(DateRangePosition.END, nextDateTuple), onClick: openRangeCalendarPicker, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, defaultValue: selectedEndTimeTupleRef.current, minutesRange: minutesRange, onBack: () => endDateInputRef.current.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onPrevious: () => endDateInputRef.current.focus(true) }) }))] }), isRangeCalendarPickerOpenRef.current && (jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, onChange: handleRangeCalendarPickerChange }))] }));
-}
-const Box = styled.div `
-  * {
-    font-weight: 500;
-    line-height: 1;
-  }
-
-  color: ${p => p.theme.color.gunMetal};
-  font-size: 13px;
-  position: relative;
-`;
-const Field = styled.span `
-  font-size: inherit;
-  margin-left: ${p => {
-    if (p.isEndDateField) {
-        return '0.625rem';
-    }
-    return p.isTimeField ? '0.125rem' : 0;
-}};
-`;
-
-export { DateRangePicker };
-//# sourceMappingURL=index.js.map