@mtes-mct/monitor-ui 1.5.0 → 1.6.0

package/src/fields/DatePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/fields/DatePicker/index.tsx"],"sourcesContent":["// TODO We should make this component both form- & a11y-compliant with a `name` and proper (aria-)labels.\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport styled from 'styled-components'\n\nimport { useForceUpdate } from '../../hooks/useForceUpdate'\nimport { getLocalizedDayjs } from '../../utils/getLocalizedDayjs'\nimport { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'\nimport { DateInput } from '../DateRangePicker/DateInput'\nimport { TimeInput } from '../DateRangePicker/TimeInput'\nimport { getDateFromDateAndTimeTuple, getDateTupleFromDate, getTimeTupleFromDate } from '../DateRangePicker/utils'\nimport { CalendarPicker } from './CalendarPicker'\n\nimport type { DateOrTimeInputRef, DateTuple, TimeTuple } from '../DateRangePicker/types'\nimport type { MutableRefObject } from 'react'\nimport type { Promisable } from 'type-fest'\n\nexport type DatePickerProps = {\n  defaultValue?: Date\n  /** Only allow past dates until today. */\n  isHistorical?: boolean\n  isLabelHidden?: boolean\n  label: string\n  /**\n   * Range of minutes used to generate the time picker list.\n   *\n   * @example\n   * `15` would produce a list with `..., 10:45, 11:00, 11:15, ...`.\n   */\n  minutesRange?: number\n  /**\n   * Called each time the date range picker is changed to a new valid value.\n   *\n   * @param nextUtcDateRange - A utcized date to be used as is to interact with the API.\n   */\n  onChange?: (nextUtcDate: Date) => Promisable<void>\n  withTime?: boolean\n}\nexport function DatePicker({\n  defaultValue,\n  isHistorical = false,\n  isLabelHidden = false,\n  label,\n  minutesRange = 15,\n  onChange,\n  withTime = false\n}: DatePickerProps) {\n  const dateInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const timeInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n\n  const isCalendarPickerOpenRef = useRef(false)\n\n  const selectedDateRef = useRef<Date | undefined>(defaultValue ? getLocalizedDayjs(defaultValue).toDate() : undefined)\n  const selectedDateTupleRef = useRef<DateTuple | undefined>(getDateTupleFromDate(selectedDateRef.current))\n  const selectedTimeTupleRef = useRef<TimeTuple | undefined>(getTimeTupleFromDate(selectedDateRef.current))\n\n  const { forceUpdate } = useForceUpdate()\n\n  const rangeCalendarPickerDefaultValue = useMemo(\n    () =>\n      selectedDateTupleRef.current\n        ? getDateFromDateAndTimeTuple(selectedDateTupleRef.current, ['00', '00'])\n        : undefined,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [selectedDateTupleRef.current]\n  )\n\n  const submit = useCallback(() => {\n    if (!onChange || !selectedDateRef.current) {\n      return\n    }\n\n    const nextDate = getUtcizedDayjs(selectedDateRef.current).toDate()\n\n    onChange(nextDate)\n  }, [onChange])\n\n  const closeCalendarPicker = useCallback(() => {\n    isCalendarPickerOpenRef.current = false\n\n    forceUpdate()\n  }, [forceUpdate])\n\n  const handleClickOutside = useCallback(\n    (event: globalThis.MouseEvent) => {\n      const target = event.target as Node | null\n\n      if (dateInputRef.current.boxSpan.contains(target)) {\n        return\n      }\n\n      closeCalendarPicker()\n    },\n    [closeCalendarPicker]\n  )\n\n  const handleDateInputNext = useCallback(() => {\n    if (!withTime) {\n      return\n    }\n\n    timeInputRef.current.focus()\n  }, [withTime])\n\n  const handleDateInputFilled = useCallback(\n    (nextDateTuple: DateTuple) => {\n      selectedDateTupleRef.current = nextDateTuple\n\n      // If there is no time input or a time has already been selected,\n      if (!withTime || selectedTimeTupleRef.current) {\n        // we must update the selected date and call onChange()\n        const timeTuple = (withTime ? selectedTimeTupleRef.current : ['00', '00']) as TimeTuple\n        const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, timeTuple)\n\n        selectedDateRef.current = nextDate\n\n        submit()\n      }\n\n      handleDateInputNext()\n    },\n    [handleDateInputNext, submit, withTime]\n  )\n\n  const handleCalendarPickerChange = useCallback(\n    (nextDateTuple: DateTuple) => {\n      // If this is a date picker without a time input,\n      if (!withTime) {\n        // we have to fix the date at the beginning of the day\n        const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, ['00', '00'])\n\n        selectedDateRef.current = nextDate\n      }\n\n      // If this is a date picker with a time input,\n      else {\n        // we include the selected time if it exists, set it at the beginning of the day if not\n        const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, selectedTimeTupleRef.current || ['00', '00'])\n        selectedDateRef.current = nextDate\n      }\n\n      selectedDateTupleRef.current = nextDateTuple\n      selectedTimeTupleRef.current = getTimeTupleFromDate(selectedDateRef.current)\n\n      closeCalendarPicker()\n      forceUpdate()\n\n      submit()\n    },\n    [closeCalendarPicker, forceUpdate, submit, withTime]\n  )\n\n  const handleTimeInputFilled = useCallback(\n    (nextTimeTuple: TimeTuple) => {\n      // If a date has already been selected\n      if (selectedDateTupleRef.current) {\n        // we must update the selected date accordingly and submit it\n        const nextDate = getDateFromDateAndTimeTuple(selectedDateTupleRef.current, nextTimeTuple)\n\n        selectedDateRef.current = nextDate\n\n        submit()\n      }\n\n      selectedTimeTupleRef.current = nextTimeTuple\n\n      submit()\n    },\n    [submit]\n  )\n\n  const openCalendarPicker = useCallback(() => {\n    isCalendarPickerOpenRef.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  return (\n    <Fieldset className=\"DateRangePicker\">\n      <Legend isHidden={isLabelHidden}>{label}</Legend>\n\n      <Box>\n        <Field>\n          <DateInput\n            ref={dateInputRef}\n            defaultValue={selectedDateTupleRef.current}\n            isForcedFocused={isCalendarPickerOpenRef.current}\n            onChange={handleDateInputFilled}\n            onClick={openCalendarPicker}\n            onNext={handleDateInputNext}\n          />\n        </Field>\n\n        {withTime && (\n          <Field isTimeField>\n            <TimeInput\n              ref={timeInputRef}\n              defaultValue={selectedTimeTupleRef.current}\n              minutesRange={minutesRange}\n              onBack={() => dateInputRef.current.focus(true)}\n              onChange={handleTimeInputFilled}\n              onFocus={closeCalendarPicker}\n              onPrevious={() => dateInputRef.current.focus(true)}\n            />\n          </Field>\n        )}\n      </Box>\n\n      {isCalendarPickerOpenRef.current && (\n        <CalendarPicker\n          defaultValue={rangeCalendarPickerDefaultValue}\n          isHistorical={isHistorical}\n          onChange={handleCalendarPickerChange}\n        />\n      )}\n    </Fieldset>\n  )\n}\n\nconst Fieldset = styled.fieldset`\n  border: 0;\n  margin: 0;\n  padding: 0;\n`\n\nconst Box = styled.div`\n  * {\n    font-weight: 500;\n    line-height: 1;\n  }\n\n  color: ${p => p.theme.color.gunMetal};\n  font-size: 13px;\n  position: relative;\n`\n\nconst Legend = styled.legend<{\n  isHidden: boolean\n}>`\n  color: ${p => p.theme.color.slateGray};\n  display: ${p => (p.isHidden ? 'none' : 'table')};\n  font-weight: inherit;\n  margin-bottom: 0.5rem;\n  padding: 0;\n`\n\nconst Field = styled.span<{\n  isEndDateField?: boolean\n  isTimeField?: boolean\n}>`\n  font-size: inherit;\n  margin-left: ${p => {\n    if (p.isEndDateField) {\n      return '0.625rem'\n    }\n\n    return p.isTimeField ? '0.125rem' : 0\n  }};\n`\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/fields/DatePicker/index.tsx"],"sourcesContent":["// TODO We should make this component both form- & a11y-compliant with a `name` and proper (aria-)labels.\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport styled from 'styled-components'\n\nimport { Fieldset } from '../../elements/Fieldset'\nimport { Legend } from '../../elements/Legend'\nimport { useForceUpdate } from '../../hooks/useForceUpdate'\nimport { getLocalizedDayjs } from '../../utils/getLocalizedDayjs'\nimport { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'\nimport { DateInput } from '../DateRangePicker/DateInput'\nimport { TimeInput } from '../DateRangePicker/TimeInput'\nimport { getDateFromDateAndTimeTuple, getDateTupleFromDate, getTimeTupleFromDate } from '../DateRangePicker/utils'\nimport { CalendarPicker } from './CalendarPicker'\n\nimport type { DateOrTimeInputRef, DateTuple, TimeTuple } from '../DateRangePicker/types'\nimport type { MutableRefObject } from 'react'\nimport type { Promisable } from 'type-fest'\n\nexport type DatePickerProps = {\n  defaultValue?: Date\n  /** Only allow past dates until today. */\n  isHistorical?: boolean\n  isLabelHidden?: boolean\n  label: string\n  /**\n   * Range of minutes used to generate the time picker list.\n   *\n   * @example\n   * `15` would produce a list with `..., 10:45, 11:00, 11:15, ...`.\n   */\n  minutesRange?: number\n  /**\n   * Called each time the date range picker is changed to a new valid value.\n   *\n   * @param nextUtcDateRange - A utcized date to be used as is to interact with the API.\n   */\n  onChange?: (nextUtcDate: Date) => Promisable<void>\n  withTime?: boolean\n}\nexport function DatePicker({\n  defaultValue,\n  isHistorical = false,\n  isLabelHidden = false,\n  label,\n  minutesRange = 15,\n  onChange,\n  withTime = false\n}: DatePickerProps) {\n  const dateInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const timeInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n\n  const isCalendarPickerOpenRef = useRef(false)\n\n  const selectedDateRef = useRef<Date | undefined>(defaultValue ? getLocalizedDayjs(defaultValue).toDate() : undefined)\n  const selectedDateTupleRef = useRef<DateTuple | undefined>(getDateTupleFromDate(selectedDateRef.current))\n  const selectedTimeTupleRef = useRef<TimeTuple | undefined>(getTimeTupleFromDate(selectedDateRef.current))\n\n  const { forceUpdate } = useForceUpdate()\n\n  const rangeCalendarPickerDefaultValue = useMemo(\n    () =>\n      selectedDateTupleRef.current\n        ? getDateFromDateAndTimeTuple(selectedDateTupleRef.current, ['00', '00'])\n        : undefined,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [selectedDateTupleRef.current]\n  )\n\n  const submit = useCallback(() => {\n    if (!onChange || !selectedDateRef.current) {\n      return\n    }\n\n    const nextDate = getUtcizedDayjs(selectedDateRef.current).toDate()\n\n    onChange(nextDate)\n  }, [onChange])\n\n  const closeCalendarPicker = useCallback(() => {\n    isCalendarPickerOpenRef.current = false\n\n    forceUpdate()\n  }, [forceUpdate])\n\n  const handleClickOutside = useCallback(\n    (event: globalThis.MouseEvent) => {\n      const target = event.target as Node | null\n\n      if (dateInputRef.current.boxSpan.contains(target)) {\n        return\n      }\n\n      closeCalendarPicker()\n    },\n    [closeCalendarPicker]\n  )\n\n  const handleDateInputNext = useCallback(() => {\n    if (!withTime) {\n      return\n    }\n\n    timeInputRef.current.focus()\n  }, [withTime])\n\n  const handleDateInputFilled = useCallback(\n    (nextDateTuple: DateTuple) => {\n      selectedDateTupleRef.current = nextDateTuple\n\n      // If there is no time input or a time has already been selected,\n      if (!withTime || selectedTimeTupleRef.current) {\n        // we must update the selected date and call onChange()\n        const timeTuple = (withTime ? selectedTimeTupleRef.current : ['00', '00']) as TimeTuple\n        const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, timeTuple)\n\n        selectedDateRef.current = nextDate\n\n        submit()\n      }\n\n      handleDateInputNext()\n    },\n    [handleDateInputNext, submit, withTime]\n  )\n\n  const handleCalendarPickerChange = useCallback(\n    (nextDateTuple: DateTuple) => {\n      // If this is a date picker without a time input,\n      if (!withTime) {\n        // we have to fix the date at the beginning of the day\n        const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, ['00', '00'])\n\n        selectedDateRef.current = nextDate\n      }\n\n      // If this is a date picker with a time input,\n      else {\n        // we include the selected time if it exists, set it at the beginning of the day if not\n        const nextDate = getDateFromDateAndTimeTuple(nextDateTuple, selectedTimeTupleRef.current || ['00', '00'])\n        selectedDateRef.current = nextDate\n      }\n\n      selectedDateTupleRef.current = nextDateTuple\n      selectedTimeTupleRef.current = getTimeTupleFromDate(selectedDateRef.current)\n\n      closeCalendarPicker()\n      forceUpdate()\n\n      submit()\n    },\n    [closeCalendarPicker, forceUpdate, submit, withTime]\n  )\n\n  const handleTimeInputFilled = useCallback(\n    (nextTimeTuple: TimeTuple) => {\n      // If a date has already been selected\n      if (selectedDateTupleRef.current) {\n        // we must update the selected date accordingly and submit it\n        const nextDate = getDateFromDateAndTimeTuple(selectedDateTupleRef.current, nextTimeTuple)\n\n        selectedDateRef.current = nextDate\n\n        submit()\n      }\n\n      selectedTimeTupleRef.current = nextTimeTuple\n\n      submit()\n    },\n    [submit]\n  )\n\n  const openCalendarPicker = useCallback(() => {\n    isCalendarPickerOpenRef.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  return (\n    <Fieldset className=\"DateRangePicker\">\n      <Legend isHidden={isLabelHidden}>{label}</Legend>\n\n      <Box>\n        <Field>\n          <DateInput\n            ref={dateInputRef}\n            defaultValue={selectedDateTupleRef.current}\n            isForcedFocused={isCalendarPickerOpenRef.current}\n            onChange={handleDateInputFilled}\n            onClick={openCalendarPicker}\n            onNext={handleDateInputNext}\n          />\n        </Field>\n\n        {withTime && (\n          <Field isTimeField>\n            <TimeInput\n              ref={timeInputRef}\n              defaultValue={selectedTimeTupleRef.current}\n              minutesRange={minutesRange}\n              onBack={() => dateInputRef.current.focus(true)}\n              onChange={handleTimeInputFilled}\n              onFocus={closeCalendarPicker}\n              onPrevious={() => dateInputRef.current.focus(true)}\n            />\n          </Field>\n        )}\n      </Box>\n\n      {isCalendarPickerOpenRef.current && (\n        <CalendarPicker\n          defaultValue={rangeCalendarPickerDefaultValue}\n          isHistorical={isHistorical}\n          onChange={handleCalendarPickerChange}\n        />\n      )}\n    </Fieldset>\n  )\n}\n\nconst Box = styled.div`\n  * {\n    font-weight: 500;\n    line-height: 1;\n  }\n\n  color: ${p => p.theme.color.gunMetal};\n  font-size: 13px;\n  position: relative;\n`\n\nconst Field = styled.span<{\n  isEndDateField?: boolean\n  isTimeField?: boolean\n}>`\n  font-size: inherit;\n  margin-left: ${p => {\n    if (p.isEndDateField) {\n      return '0.625rem'\n    }\n\n    return p.isTimeField ? '0.125rem' : 0\n  }};\n`\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/src/fields/DateRangePicker/index.js

@@ -1,6 +1,8 @@
 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';
@@ -161,11 +163,6 @@ function DateRangePicker({ defaultValue, isHistorical = false, isLabelHidden = f
     }, [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 Fieldset = styled.fieldset `
-  border: 0;
-  margin: 0;
-  padding: 0;
-`;
 const Box = styled.div `
   * {
     font-weight: 500;
@@ -176,13 +173,6 @@ const Box = styled.div `
   font-size: 13px;
   position: relative;
 `;
-const Legend = styled.legend `
-  color: ${p => p.theme.color.slateGray};
-  display: ${p => (p.isHidden ? 'none' : 'table')};
-  font-weight: inherit;
-  margin-bottom: 0.5rem;
-  padding: 0;
-`;
 const Field = styled.span `
   font-size: inherit;
   margin-left: ${p => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/fields/DateRangePicker/index.tsx"],"sourcesContent":["// TODO We should make this component both form- & a11y-compliant with a `name` and proper (aria-)labels.\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport styled from 'styled-components'\n\nimport { useForceUpdate } from '../../hooks/useForceUpdate'\nimport { getLocalizedDayjs } from '../../utils/getLocalizedDayjs'\nimport { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'\nimport { DateInput } from './DateInput'\nimport { RangeCalendarPicker } from './RangeCalendarPicker'\nimport { TimeInput } from './TimeInput'\nimport { DateOrTimeInputRef, DateRangePosition, DateTuple, DateTupleRange, TimeTuple } from './types'\nimport { getDateFromDateAndTimeTuple, getDateTupleFromDate, getTimeTupleFromDate } from './utils'\n\nimport type { DateRange } from '../../types'\nimport type { MutableRefObject } from 'react'\nimport type { Promisable } from 'type-fest'\n\nexport type DateRangePickerProps = {\n  defaultValue?: DateRange\n  /** Only allow past dates until today. */\n  isHistorical?: boolean\n  isLabelHidden?: boolean\n  label: string\n  /**\n   * Range of minutes used to generate the time picker list.\n   *\n   * @example\n   * `15` would produce a list with `..., 10:45, 11:00, 11:15, ...`.\n   */\n  minutesRange?: number\n  /**\n   * Called each time the date range picker is changed to a new valid value.\n   *\n   * @param nextUtcDateRange - A utcized date to be used as is to interact with the API.\n   */\n  onChange?: (nextUtcDateRange: DateRange) => Promisable<void>\n  withTime?: boolean\n}\nexport function DateRangePicker({\n  defaultValue,\n  isHistorical = false,\n  isLabelHidden = false,\n  label,\n  minutesRange = 15,\n  onChange,\n  withTime = false\n}: DateRangePickerProps) {\n  const startDateInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const startTimeInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const endDateInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const endTimeInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n\n  const isRangeCalendarPickerOpenRef = useRef(false)\n\n  const selectedStartDateRef = useRef<Date | undefined>(\n    defaultValue ? getLocalizedDayjs(defaultValue[0]).toDate() : undefined\n  )\n  const selectedEndDateRef = useRef<Date | undefined>(\n    defaultValue ? getLocalizedDayjs(defaultValue[1]).toDate() : undefined\n  )\n  const selectedStartDateTupleRef = useRef<DateTuple | undefined>(getDateTupleFromDate(selectedStartDateRef.current))\n  const selectedEndDateTupleRef = useRef<DateTuple | undefined>(getDateTupleFromDate(selectedEndDateRef.current))\n  const selectedStartTimeTupleRef = useRef<TimeTuple | undefined>(getTimeTupleFromDate(selectedStartDateRef.current))\n  const selectedEndTimeTupleRef = useRef<TimeTuple | undefined>(getTimeTupleFromDate(selectedEndDateRef.current))\n\n  const { forceUpdate } = useForceUpdate()\n\n  const rangeCalendarPickerDefaultValue = useMemo(\n    () =>\n      selectedStartDateTupleRef.current && selectedEndDateTupleRef.current\n        ? ([\n            getDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, ['00', '00']),\n            getDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, ['00', '00'], true)\n          ] as DateRange)\n        : undefined,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [selectedEndDateTupleRef.current, selectedStartDateTupleRef.current]\n  )\n\n  const submit = useCallback(() => {\n    if (!onChange || !selectedStartDateRef.current || !selectedEndDateRef.current) {\n      return\n    }\n\n    const utcizedStartDate = getUtcizedDayjs(selectedStartDateRef.current).toDate()\n    const utcizedEndDate = getUtcizedDayjs(selectedEndDateRef.current).toDate()\n\n    const nextDateRange: DateRange = [utcizedStartDate, utcizedEndDate]\n    onChange(nextDateRange)\n  }, [onChange])\n\n  const closeRangeCalendarPicker = useCallback(() => {\n    isRangeCalendarPickerOpenRef.current = false\n\n    forceUpdate()\n  }, [forceUpdate])\n\n  const handleClickOutside = useCallback(\n    (event: globalThis.MouseEvent) => {\n      const target = event.target as Node | null\n\n      if (startDateInputRef.current.boxSpan.contains(target) || endDateInputRef.current.boxSpan.contains(target)) {\n        return\n      }\n\n      closeRangeCalendarPicker()\n    },\n    [closeRangeCalendarPicker]\n  )\n\n  const handleEndDateInputNext = useCallback(() => {\n    if (!withTime) {\n      return\n    }\n\n    endTimeInputRef.current.focus()\n  }, [withTime])\n\n  const handleEndDateInputPrevious = useCallback(() => {\n    if (withTime) {\n      startTimeInputRef.current.focus(true)\n\n      return\n    }\n\n    startDateInputRef.current.focus(true)\n  }, [withTime])\n\n  const handleStartDateInputNext = useCallback(() => {\n    if (withTime) {\n      startTimeInputRef.current.focus()\n\n      return\n    }\n\n    endDateInputRef.current.focus()\n  }, [withTime])\n\n  const handleDateInputFilled = useCallback(\n    (position: DateRangePosition, nextDateTuple: DateTuple) => {\n      if (position === DateRangePosition.START) {\n        selectedStartDateTupleRef.current = nextDateTuple\n\n        // If there is no time input or a start time has already been selected,\n        if (!withTime || selectedStartTimeTupleRef.current) {\n          // we must update the selected start date and call onChange()\n          const startTimeTuple = (withTime ? selectedStartTimeTupleRef.current : ['00', '00']) as TimeTuple\n          const nextStartDate = getDateFromDateAndTimeTuple(nextDateTuple, startTimeTuple)\n\n          selectedStartDateRef.current = nextStartDate\n\n          submit()\n        }\n\n        handleStartDateInputNext()\n      } else {\n        selectedEndDateTupleRef.current = nextDateTuple\n\n        // If there is no time input or an end time has already been selected,\n        if (!withTime || selectedEndTimeTupleRef.current) {\n          // we must update the selected end date and call onChange()\n          const endTimeTuple = (withTime ? selectedEndTimeTupleRef.current : ['23', '59']) as TimeTuple\n          const nextEndDate = getDateFromDateAndTimeTuple(nextDateTuple, endTimeTuple, true)\n\n          selectedEndDateRef.current = nextEndDate\n\n          submit()\n        }\n\n        handleEndDateInputNext()\n      }\n    },\n    [handleEndDateInputNext, handleStartDateInputNext, submit, withTime]\n  )\n\n  const handleRangeCalendarPickerChange = useCallback(\n    (nextDateTupleRange: DateTupleRange) => {\n      const [nextStartDateTuple, nextEndDateTuple] = nextDateTupleRange\n\n      // If this is a date picker without a time input,\n      if (!withTime) {\n        // we have to fix the start date at the beginning of the day\n        const nextStartDate = getDateFromDateAndTimeTuple(nextStartDateTuple, ['00', '00'])\n        // and the end date at the end of the day\n        const nextEndDate = getDateFromDateAndTimeTuple(nextEndDateTuple, ['23', '59'], true)\n\n        selectedStartDateRef.current = nextStartDate\n        selectedEndDateRef.current = nextEndDate\n      }\n\n      // If this is a date picker with a time input,\n      else {\n        // we include the selected start time if it exists, set it at the beginning of the day if not\n        const nextStartDate = getDateFromDateAndTimeTuple(\n          nextStartDateTuple,\n          selectedStartTimeTupleRef.current || ['00', '00']\n        )\n        selectedStartDateRef.current = nextStartDate\n\n        // we include the selected end time if it exists, set it at the end of the day if not\n        const nextEndDate = getDateFromDateAndTimeTuple(\n          nextEndDateTuple,\n          selectedEndTimeTupleRef.current || ['23', '59'],\n          true\n        )\n\n        selectedEndDateRef.current = nextEndDate\n      }\n\n      selectedStartDateTupleRef.current = nextStartDateTuple\n      selectedStartTimeTupleRef.current = getTimeTupleFromDate(selectedStartDateRef.current)\n      selectedEndDateTupleRef.current = nextEndDateTuple\n      selectedEndTimeTupleRef.current = getTimeTupleFromDate(selectedEndDateRef.current)\n\n      closeRangeCalendarPicker()\n      forceUpdate()\n\n      submit()\n    },\n    [closeRangeCalendarPicker, forceUpdate, submit, withTime]\n  )\n\n  const handleTimeInputFilled = useCallback(\n    (position: DateRangePosition, nextTimeTuple: TimeTuple) => {\n      if (position === DateRangePosition.START) {\n        // If a start date has already been selected\n        if (selectedStartDateTupleRef.current) {\n          // we must update the selected start date accordingly and submit it\n          const nextStartDate = getDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, nextTimeTuple)\n\n          selectedStartDateRef.current = nextStartDate\n\n          submit()\n        }\n\n        selectedStartTimeTupleRef.current = nextTimeTuple\n\n        endDateInputRef.current.focus()\n      } else {\n        // If an end date has already been selected\n        if (selectedEndDateTupleRef.current) {\n          // we must update the selected end date accordingly and submit it\n          const nextEndDate = getDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, nextTimeTuple, true)\n\n          selectedEndDateRef.current = nextEndDate\n\n          submit()\n        }\n\n        selectedEndTimeTupleRef.current = nextTimeTuple\n      }\n\n      submit()\n    },\n    [submit]\n  )\n\n  const openRangeCalendarPicker = useCallback(() => {\n    isRangeCalendarPickerOpenRef.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  return (\n    <Fieldset className=\"DateRangePicker\">\n      <Legend isHidden={isLabelHidden}>{label}</Legend>\n\n      <Box>\n        <Field>\n          <DateInput\n            ref={startDateInputRef}\n            defaultValue={selectedStartDateTupleRef.current}\n            isForcedFocused={isRangeCalendarPickerOpenRef.current}\n            isStartDate\n            onChange={nextDateTuple => handleDateInputFilled(DateRangePosition.START, nextDateTuple)}\n            onClick={openRangeCalendarPicker}\n            onNext={handleStartDateInputNext}\n          />\n        </Field>\n\n        {withTime && (\n          <Field isTimeField>\n            <TimeInput\n              ref={startTimeInputRef}\n              defaultValue={selectedStartTimeTupleRef.current}\n              isStartDate\n              minutesRange={minutesRange}\n              onBack={() => startDateInputRef.current.focus(true)}\n              onChange={nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple)}\n              onFocus={closeRangeCalendarPicker}\n              onNext={() => endDateInputRef.current.focus()}\n              onPrevious={() => startDateInputRef.current.focus(true)}\n            />\n          </Field>\n        )}\n\n        <Field isEndDateField>\n          <DateInput\n            ref={endDateInputRef}\n            defaultValue={selectedEndDateTupleRef.current}\n            isEndDate\n            isForcedFocused={isRangeCalendarPickerOpenRef.current}\n            onBack={handleEndDateInputPrevious}\n            onChange={nextDateTuple => handleDateInputFilled(DateRangePosition.END, nextDateTuple)}\n            onClick={openRangeCalendarPicker}\n            onNext={handleEndDateInputNext}\n            onPrevious={handleEndDateInputPrevious}\n          />\n        </Field>\n\n        {withTime && (\n          <Field isTimeField>\n            <TimeInput\n              ref={endTimeInputRef}\n              defaultValue={selectedEndTimeTupleRef.current}\n              minutesRange={minutesRange}\n              onBack={() => endDateInputRef.current.focus(true)}\n              onChange={nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple)}\n              onFocus={closeRangeCalendarPicker}\n              onPrevious={() => endDateInputRef.current.focus(true)}\n            />\n          </Field>\n        )}\n      </Box>\n\n      {isRangeCalendarPickerOpenRef.current && (\n        <RangeCalendarPicker\n          defaultValue={rangeCalendarPickerDefaultValue}\n          isHistorical={isHistorical}\n          onChange={handleRangeCalendarPickerChange}\n        />\n      )}\n    </Fieldset>\n  )\n}\n\nconst Fieldset = styled.fieldset`\n  border: 0;\n  margin: 0;\n  padding: 0;\n`\n\nconst Box = styled.div`\n  * {\n    font-weight: 500;\n    line-height: 1;\n  }\n\n  color: ${p => p.theme.color.gunMetal};\n  font-size: 13px;\n  position: relative;\n`\n\nconst Legend = styled.legend<{\n  isHidden: boolean\n}>`\n  color: ${p => p.theme.color.slateGray};\n  display: ${p => (p.isHidden ? 'none' : 'table')};\n  font-weight: inherit;\n  margin-bottom: 0.5rem;\n  padding: 0;\n`\n\nconst Field = styled.span<{\n  isEndDateField?: boolean\n  isTimeField?: boolean\n}>`\n  font-size: inherit;\n  margin-left: ${p => {\n    if (p.isEndDateField) {\n      return '0.625rem'\n    }\n\n    return p.isTimeField ? '0.125rem' : 0\n  }};\n`\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/fields/DateRangePicker/index.tsx"],"sourcesContent":["// TODO We should make this component both form- & a11y-compliant with a `name` and proper (aria-)labels.\n\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport styled from 'styled-components'\n\nimport { Fieldset } from '../../elements/Fieldset'\nimport { Legend } from '../../elements/Legend'\nimport { useForceUpdate } from '../../hooks/useForceUpdate'\nimport { getLocalizedDayjs } from '../../utils/getLocalizedDayjs'\nimport { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'\nimport { DateInput } from './DateInput'\nimport { RangeCalendarPicker } from './RangeCalendarPicker'\nimport { TimeInput } from './TimeInput'\nimport { DateOrTimeInputRef, DateRangePosition, DateTuple, DateTupleRange, TimeTuple } from './types'\nimport { getDateFromDateAndTimeTuple, getDateTupleFromDate, getTimeTupleFromDate } from './utils'\n\nimport type { DateRange } from '../../types'\nimport type { MutableRefObject } from 'react'\nimport type { Promisable } from 'type-fest'\n\nexport type DateRangePickerProps = {\n  defaultValue?: DateRange\n  /** Only allow past dates until today. */\n  isHistorical?: boolean\n  isLabelHidden?: boolean\n  label: string\n  /**\n   * Range of minutes used to generate the time picker list.\n   *\n   * @example\n   * `15` would produce a list with `..., 10:45, 11:00, 11:15, ...`.\n   */\n  minutesRange?: number\n  /**\n   * Called each time the date range picker is changed to a new valid value.\n   *\n   * @param nextUtcDateRange - A utcized date to be used as is to interact with the API.\n   */\n  onChange?: (nextUtcDateRange: DateRange) => Promisable<void>\n  withTime?: boolean\n}\nexport function DateRangePicker({\n  defaultValue,\n  isHistorical = false,\n  isLabelHidden = false,\n  label,\n  minutesRange = 15,\n  onChange,\n  withTime = false\n}: DateRangePickerProps) {\n  const startDateInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const startTimeInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const endDateInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n  const endTimeInputRef = useRef() as MutableRefObject<DateOrTimeInputRef>\n\n  const isRangeCalendarPickerOpenRef = useRef(false)\n\n  const selectedStartDateRef = useRef<Date | undefined>(\n    defaultValue ? getLocalizedDayjs(defaultValue[0]).toDate() : undefined\n  )\n  const selectedEndDateRef = useRef<Date | undefined>(\n    defaultValue ? getLocalizedDayjs(defaultValue[1]).toDate() : undefined\n  )\n  const selectedStartDateTupleRef = useRef<DateTuple | undefined>(getDateTupleFromDate(selectedStartDateRef.current))\n  const selectedEndDateTupleRef = useRef<DateTuple | undefined>(getDateTupleFromDate(selectedEndDateRef.current))\n  const selectedStartTimeTupleRef = useRef<TimeTuple | undefined>(getTimeTupleFromDate(selectedStartDateRef.current))\n  const selectedEndTimeTupleRef = useRef<TimeTuple | undefined>(getTimeTupleFromDate(selectedEndDateRef.current))\n\n  const { forceUpdate } = useForceUpdate()\n\n  const rangeCalendarPickerDefaultValue = useMemo(\n    () =>\n      selectedStartDateTupleRef.current && selectedEndDateTupleRef.current\n        ? ([\n            getDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, ['00', '00']),\n            getDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, ['00', '00'], true)\n          ] as DateRange)\n        : undefined,\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [selectedEndDateTupleRef.current, selectedStartDateTupleRef.current]\n  )\n\n  const submit = useCallback(() => {\n    if (!onChange || !selectedStartDateRef.current || !selectedEndDateRef.current) {\n      return\n    }\n\n    const utcizedStartDate = getUtcizedDayjs(selectedStartDateRef.current).toDate()\n    const utcizedEndDate = getUtcizedDayjs(selectedEndDateRef.current).toDate()\n\n    const nextDateRange: DateRange = [utcizedStartDate, utcizedEndDate]\n    onChange(nextDateRange)\n  }, [onChange])\n\n  const closeRangeCalendarPicker = useCallback(() => {\n    isRangeCalendarPickerOpenRef.current = false\n\n    forceUpdate()\n  }, [forceUpdate])\n\n  const handleClickOutside = useCallback(\n    (event: globalThis.MouseEvent) => {\n      const target = event.target as Node | null\n\n      if (startDateInputRef.current.boxSpan.contains(target) || endDateInputRef.current.boxSpan.contains(target)) {\n        return\n      }\n\n      closeRangeCalendarPicker()\n    },\n    [closeRangeCalendarPicker]\n  )\n\n  const handleEndDateInputNext = useCallback(() => {\n    if (!withTime) {\n      return\n    }\n\n    endTimeInputRef.current.focus()\n  }, [withTime])\n\n  const handleEndDateInputPrevious = useCallback(() => {\n    if (withTime) {\n      startTimeInputRef.current.focus(true)\n\n      return\n    }\n\n    startDateInputRef.current.focus(true)\n  }, [withTime])\n\n  const handleStartDateInputNext = useCallback(() => {\n    if (withTime) {\n      startTimeInputRef.current.focus()\n\n      return\n    }\n\n    endDateInputRef.current.focus()\n  }, [withTime])\n\n  const handleDateInputFilled = useCallback(\n    (position: DateRangePosition, nextDateTuple: DateTuple) => {\n      if (position === DateRangePosition.START) {\n        selectedStartDateTupleRef.current = nextDateTuple\n\n        // If there is no time input or a start time has already been selected,\n        if (!withTime || selectedStartTimeTupleRef.current) {\n          // we must update the selected start date and call onChange()\n          const startTimeTuple = (withTime ? selectedStartTimeTupleRef.current : ['00', '00']) as TimeTuple\n          const nextStartDate = getDateFromDateAndTimeTuple(nextDateTuple, startTimeTuple)\n\n          selectedStartDateRef.current = nextStartDate\n\n          submit()\n        }\n\n        handleStartDateInputNext()\n      } else {\n        selectedEndDateTupleRef.current = nextDateTuple\n\n        // If there is no time input or an end time has already been selected,\n        if (!withTime || selectedEndTimeTupleRef.current) {\n          // we must update the selected end date and call onChange()\n          const endTimeTuple = (withTime ? selectedEndTimeTupleRef.current : ['23', '59']) as TimeTuple\n          const nextEndDate = getDateFromDateAndTimeTuple(nextDateTuple, endTimeTuple, true)\n\n          selectedEndDateRef.current = nextEndDate\n\n          submit()\n        }\n\n        handleEndDateInputNext()\n      }\n    },\n    [handleEndDateInputNext, handleStartDateInputNext, submit, withTime]\n  )\n\n  const handleRangeCalendarPickerChange = useCallback(\n    (nextDateTupleRange: DateTupleRange) => {\n      const [nextStartDateTuple, nextEndDateTuple] = nextDateTupleRange\n\n      // If this is a date picker without a time input,\n      if (!withTime) {\n        // we have to fix the start date at the beginning of the day\n        const nextStartDate = getDateFromDateAndTimeTuple(nextStartDateTuple, ['00', '00'])\n        // and the end date at the end of the day\n        const nextEndDate = getDateFromDateAndTimeTuple(nextEndDateTuple, ['23', '59'], true)\n\n        selectedStartDateRef.current = nextStartDate\n        selectedEndDateRef.current = nextEndDate\n      }\n\n      // If this is a date picker with a time input,\n      else {\n        // we include the selected start time if it exists, set it at the beginning of the day if not\n        const nextStartDate = getDateFromDateAndTimeTuple(\n          nextStartDateTuple,\n          selectedStartTimeTupleRef.current || ['00', '00']\n        )\n        selectedStartDateRef.current = nextStartDate\n\n        // we include the selected end time if it exists, set it at the end of the day if not\n        const nextEndDate = getDateFromDateAndTimeTuple(\n          nextEndDateTuple,\n          selectedEndTimeTupleRef.current || ['23', '59'],\n          true\n        )\n\n        selectedEndDateRef.current = nextEndDate\n      }\n\n      selectedStartDateTupleRef.current = nextStartDateTuple\n      selectedStartTimeTupleRef.current = getTimeTupleFromDate(selectedStartDateRef.current)\n      selectedEndDateTupleRef.current = nextEndDateTuple\n      selectedEndTimeTupleRef.current = getTimeTupleFromDate(selectedEndDateRef.current)\n\n      closeRangeCalendarPicker()\n      forceUpdate()\n\n      submit()\n    },\n    [closeRangeCalendarPicker, forceUpdate, submit, withTime]\n  )\n\n  const handleTimeInputFilled = useCallback(\n    (position: DateRangePosition, nextTimeTuple: TimeTuple) => {\n      if (position === DateRangePosition.START) {\n        // If a start date has already been selected\n        if (selectedStartDateTupleRef.current) {\n          // we must update the selected start date accordingly and submit it\n          const nextStartDate = getDateFromDateAndTimeTuple(selectedStartDateTupleRef.current, nextTimeTuple)\n\n          selectedStartDateRef.current = nextStartDate\n\n          submit()\n        }\n\n        selectedStartTimeTupleRef.current = nextTimeTuple\n\n        endDateInputRef.current.focus()\n      } else {\n        // If an end date has already been selected\n        if (selectedEndDateTupleRef.current) {\n          // we must update the selected end date accordingly and submit it\n          const nextEndDate = getDateFromDateAndTimeTuple(selectedEndDateTupleRef.current, nextTimeTuple, true)\n\n          selectedEndDateRef.current = nextEndDate\n\n          submit()\n        }\n\n        selectedEndTimeTupleRef.current = nextTimeTuple\n      }\n\n      submit()\n    },\n    [submit]\n  )\n\n  const openRangeCalendarPicker = useCallback(() => {\n    isRangeCalendarPickerOpenRef.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  return (\n    <Fieldset className=\"DateRangePicker\">\n      <Legend isHidden={isLabelHidden}>{label}</Legend>\n\n      <Box>\n        <Field>\n          <DateInput\n            ref={startDateInputRef}\n            defaultValue={selectedStartDateTupleRef.current}\n            isForcedFocused={isRangeCalendarPickerOpenRef.current}\n            isStartDate\n            onChange={nextDateTuple => handleDateInputFilled(DateRangePosition.START, nextDateTuple)}\n            onClick={openRangeCalendarPicker}\n            onNext={handleStartDateInputNext}\n          />\n        </Field>\n\n        {withTime && (\n          <Field isTimeField>\n            <TimeInput\n              ref={startTimeInputRef}\n              defaultValue={selectedStartTimeTupleRef.current}\n              isStartDate\n              minutesRange={minutesRange}\n              onBack={() => startDateInputRef.current.focus(true)}\n              onChange={nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple)}\n              onFocus={closeRangeCalendarPicker}\n              onNext={() => endDateInputRef.current.focus()}\n              onPrevious={() => startDateInputRef.current.focus(true)}\n            />\n          </Field>\n        )}\n\n        <Field isEndDateField>\n          <DateInput\n            ref={endDateInputRef}\n            defaultValue={selectedEndDateTupleRef.current}\n            isEndDate\n            isForcedFocused={isRangeCalendarPickerOpenRef.current}\n            onBack={handleEndDateInputPrevious}\n            onChange={nextDateTuple => handleDateInputFilled(DateRangePosition.END, nextDateTuple)}\n            onClick={openRangeCalendarPicker}\n            onNext={handleEndDateInputNext}\n            onPrevious={handleEndDateInputPrevious}\n          />\n        </Field>\n\n        {withTime && (\n          <Field isTimeField>\n            <TimeInput\n              ref={endTimeInputRef}\n              defaultValue={selectedEndTimeTupleRef.current}\n              minutesRange={minutesRange}\n              onBack={() => endDateInputRef.current.focus(true)}\n              onChange={nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple)}\n              onFocus={closeRangeCalendarPicker}\n              onPrevious={() => endDateInputRef.current.focus(true)}\n            />\n          </Field>\n        )}\n      </Box>\n\n      {isRangeCalendarPickerOpenRef.current && (\n        <RangeCalendarPicker\n          defaultValue={rangeCalendarPickerDefaultValue}\n          isHistorical={isHistorical}\n          onChange={handleRangeCalendarPickerChange}\n        />\n      )}\n    </Fieldset>\n  )\n}\n\nconst Box = styled.div`\n  * {\n    font-weight: 500;\n    line-height: 1;\n  }\n\n  color: ${p => p.theme.color.gunMetal};\n  font-size: 13px;\n  position: relative;\n`\n\nconst Field = styled.span<{\n  isEndDateField?: boolean\n  isTimeField?: boolean\n}>`\n  font-size: inherit;\n  margin-left: ${p => {\n    if (p.isEndDateField) {\n      return '0.625rem'\n    }\n\n    return p.isTimeField ? '0.125rem' : 0\n  }};\n`\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/src/fields/MultiCheckbox.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import equals from '../../.yarn/cache/ramda-npm-0.28.0-6a5fe8f6cc-44ea6e5010.zip/node_modules/ramda/es/equals.js';
+import reject from '../../.yarn/cache/ramda-npm-0.28.0-6a5fe8f6cc-44ea6e5010.zip/node_modules/ramda/es/reject.js';
+import { useRef, useMemo, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import { Fieldset } from '../elements/Fieldset.js';
+import { Legend } from '../elements/Legend.js';
+import { Checkbox } from './Checkbox.js';
+
+function MultiCheckbox({ defaultValue = [], isInline = false, label, name, onChange, options }) {
+    const checkedOptionValues = useRef(defaultValue);
+    const key = useMemo(() => `${name}-${JSON.stringify(defaultValue)}`, [defaultValue, name]);
+    const handleChange = useCallback((nextOptionValue, isChecked) => {
+        const nextCheckedOptionValues = isChecked
+            ? [...checkedOptionValues.current, nextOptionValue]
+            : reject(equals(nextOptionValue))(checkedOptionValues.current);
+        checkedOptionValues.current = nextCheckedOptionValues;
+        if (onChange) {
+            const normalizedNextValue = nextCheckedOptionValues.length ? nextCheckedOptionValues : undefined;
+            onChange(normalizedNextValue);
+        }
+    }, [onChange]);
+    return (jsxs(Fieldset, { children: [label && jsx(Legend, { children: label }), jsx(ChecboxesBox, { isInline: isInline, children: options.map((option, index) => (jsx(Checkbox, { defaultChecked: defaultValue.includes(option.value), label: option.label, name: `${name}${index}`, onChange: (isChecked) => handleChange(option.value, isChecked) }))) })] }, key));
+}
+const ChecboxesBox = styled.div `
+  color: ${p => p.theme.color.gunMetal};
+  display: flex;
+  flex-direction: ${p => (p.isInline ? 'row' : 'column')};
+  font-weight: 500;
+
+  > .rs-checkbox {
+    > .rs-checkbox-checker {
+      padding-left: 28px;
+      padding-top: 2px;
+
+      .rs-checkbox-wrapper {
+        left: 2px;
+        top: 0 !important;
+      }
+    }
+  }
+
+  ${p => p.isInline &&
+    css `
+      > .rs-checkbox:not(:first-child) {
+        margin-left: 0.75rem;
+      }
+    `}
+`;
+
+export { MultiCheckbox };
+//# sourceMappingURL=MultiCheckbox.js.map

package/src/fields/MultiCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiCheckbox.js","sources":["../../../src/fields/MultiCheckbox.tsx"],"sourcesContent":["import { equals, reject } from 'ramda'\nimport { useCallback, useMemo, useRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Fieldset } from '../elements/Fieldset'\nimport { Legend } from '../elements/Legend'\nimport { Checkbox } from './Checkbox'\n\nimport type { Option } from '../types'\nimport type { Promisable } from 'type-fest'\n\nexport type MultiCheckboxProps = {\n  defaultValue?: string[]\n  isInline?: boolean\n  label?: string\n  name: string\n  onChange?: (nextValue: string[] | undefined) => Promisable<void>\n  options: Option[]\n}\nexport function MultiCheckbox({\n  defaultValue = [],\n  isInline = false,\n  label,\n  name,\n  onChange,\n  options\n}: MultiCheckboxProps) {\n  const checkedOptionValues = useRef<string[]>(defaultValue)\n\n  const key = useMemo(() => `${name}-${JSON.stringify(defaultValue)}`, [defaultValue, name])\n\n  const handleChange = useCallback(\n    (nextOptionValue: string, isChecked: boolean) => {\n      const nextCheckedOptionValues = isChecked\n        ? [...checkedOptionValues.current, nextOptionValue]\n        : reject(equals(nextOptionValue))(checkedOptionValues.current)\n\n      checkedOptionValues.current = nextCheckedOptionValues\n\n      if (onChange) {\n        const normalizedNextValue = nextCheckedOptionValues.length ? nextCheckedOptionValues : undefined\n\n        onChange(normalizedNextValue)\n      }\n    },\n    [onChange]\n  )\n\n  return (\n    <Fieldset key={key}>\n      {label && <Legend>{label}</Legend>}\n\n      <ChecboxesBox isInline={isInline}>\n        {options.map((option, index) => (\n          <Checkbox\n            defaultChecked={defaultValue.includes(option.value)}\n            label={option.label}\n            name={`${name}${index}`}\n            onChange={(isChecked: boolean) => handleChange(option.value, isChecked)}\n          />\n        ))}\n      </ChecboxesBox>\n    </Fieldset>\n  )\n}\n\nconst ChecboxesBox = styled.div<{\n  isInline: boolean\n}>`\n  color: ${p => p.theme.color.gunMetal};\n  display: flex;\n  flex-direction: ${p => (p.isInline ? 'row' : 'column')};\n  font-weight: 500;\n\n  > .rs-checkbox {\n    > .rs-checkbox-checker {\n      padding-left: 28px;\n      padding-top: 2px;\n\n      .rs-checkbox-wrapper {\n        left: 2px;\n        top: 0 !important;\n      }\n    }\n  }\n\n  ${p =>\n    p.isInline &&\n    css`\n      > .rs-checkbox:not(:first-child) {\n        margin-left: 0.75rem;\n      }\n    `}\n`\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;SAmBgB,aAAa,CAAC,EAC5B,YAAY,GAAG,EAAE,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACY,EAAA;AACnB,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAW,YAAY,CAAC,CAAA;IAE1D,MAAM,GAAG,GAAG,OAAO,CAAC,MAAM,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA,CAAE,EAAE,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC,CAAA;IAE1F,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,eAAuB,EAAE,SAAkB,KAAI;QAC9C,MAAM,uBAAuB,GAAG,SAAS;cACrC,CAAC,GAAG,mBAAmB,CAAC,OAAO,EAAE,eAAe,CAAC;AACnD,cAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAA;AAEhE,QAAA,mBAAmB,CAAC,OAAO,GAAG,uBAAuB,CAAA;AAErD,QAAA,IAAI,QAAQ,EAAE;AACZ,YAAA,MAAM,mBAAmB,GAAG,uBAAuB,CAAC,MAAM,GAAG,uBAAuB,GAAG,SAAS,CAAA;YAEhG,QAAQ,CAAC,mBAAmB,CAAC,CAAA;AAC9B,SAAA;AACH,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;AAED,IAAA,QACEA,IAAC,CAAA,QAAQ,EACN,EAAA,QAAA,EAAA,CAAA,KAAK,IAAIC,GAAC,CAAA,MAAM,EAAE,EAAA,QAAA,EAAA,KAAK,GAAU,EAElCA,GAAA,CAAC,YAAY,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAA,QAAA,EAC7B,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,MACzBA,GAAA,CAAC,QAAQ,EACP,EAAA,cAAc,EAAE,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACnD,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,IAAI,EAAE,GAAG,IAAI,CAAA,EAAG,KAAK,CAAE,CAAA,EACvB,QAAQ,EAAE,CAAC,SAAkB,KAAK,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EAAA,CACvE,CACH,CAAC,EAAA,CACW,KAZF,GAAG,CAaP,EACZ;AACH,CAAC;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAE7B,CAAA;WACS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;;AAElB,kBAAA,EAAA,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC,CAAA;;;;;;;;;;;;;;;AAepD,EAAA,EAAA,CAAC,IACD,CAAC,CAAC,QAAQ;AACV,IAAA,GAAG,CAAA,CAAA;;;;AAIF,IAAA,CAAA,CAAA;CACJ;;;;"}

package/src/fields/MultiRadio.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import { Radio } from 'rsuite';
+import styled, { css } from 'styled-components';
+import { Fieldset } from '../elements/Fieldset.js';
+import { Legend } from '../elements/Legend.js';
+
+function MultiRadio({ defaultValue, isInline = false, label, name, onChange, options }) {
+    const [checkedOptionValue, setCheckedOptionValue] = useState(undefined);
+    const key = useMemo(() => `${name}-${String(checkedOptionValue)}}`, [checkedOptionValue, name]);
+    const handleChange = useCallback((nextOptionValue, isChecked) => {
+        const nextCheckedOptionValue = isChecked ? nextOptionValue : undefined;
+        setCheckedOptionValue(nextCheckedOptionValue);
+        if (onChange) {
+            onChange(nextCheckedOptionValue);
+        }
+    }, [onChange]);
+    // TODO There may be a better solution.
+    // A key change is not enough to force radio checked check changes
+    // on `defaultValue` property update (even when appending `defaultValue` to `key`),
+    // we need to force a second re-render in order for the changes to be applied.
+    useEffect(() => {
+        setCheckedOptionValue(defaultValue);
+    }, [defaultValue]);
+    return (jsxs(Fieldset, { children: [label && jsx(Legend, { children: label }), jsx(ChecboxesBox, { isInline: isInline, children: options.map(option => (jsx(Radio, { defaultChecked: option.value === checkedOptionValue, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }))) })] }, key));
+}
+const ChecboxesBox = styled.div `
+  color: ${p => p.theme.color.gunMetal};
+  display: flex;
+  flex-direction: ${p => (p.isInline ? 'row' : 'column')};
+  font-weight: 500;
+
+  > .rs-radio {
+    > .rs-radio-checker {
+      padding-left: 28px;
+      padding-top: 2px;
+
+      .rs-radio-wrapper {
+        left: 2px;
+        top: 3px !important;
+      }
+    }
+  }
+
+  ${p => p.isInline &&
+    css `
+      > .rs-radio:not(:first-child) {
+        margin-left: 0.75rem;
+      }
+    `}
+`;
+
+export { MultiRadio };
+//# sourceMappingURL=MultiRadio.js.map

package/src/fields/MultiRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiRadio.js","sources":["../../../src/fields/MultiRadio.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { Radio } from 'rsuite'\nimport styled, { css } from 'styled-components'\n\nimport { Fieldset } from '../elements/Fieldset'\nimport { Legend } from '../elements/Legend'\n\nimport type { Option } from '../types'\nimport type { Promisable } from 'type-fest'\n\nexport type MultiRadioProps = {\n  defaultValue?: string\n  isInline?: boolean\n  label?: string\n  name: string\n  onChange?: (nextValue: string | undefined) => Promisable<void>\n  options: Option[]\n}\nexport function MultiRadio({ defaultValue, isInline = false, label, name, onChange, options }: MultiRadioProps) {\n  const [checkedOptionValue, setCheckedOptionValue] = useState<string | undefined>(undefined)\n\n  const key = useMemo(() => `${name}-${String(checkedOptionValue)}}`, [checkedOptionValue, name])\n\n  const handleChange = useCallback(\n    (nextOptionValue: string, isChecked: boolean) => {\n      const nextCheckedOptionValue = isChecked ? nextOptionValue : undefined\n\n      setCheckedOptionValue(nextCheckedOptionValue)\n\n      if (onChange) {\n        onChange(nextCheckedOptionValue)\n      }\n    },\n    [onChange]\n  )\n\n  // TODO There may be a better solution.\n  // A key change is not enough to force radio checked check changes\n  // on `defaultValue` property update (even when appending `defaultValue` to `key`),\n  // we need to force a second re-render in order for the changes to be applied.\n  useEffect(() => {\n    setCheckedOptionValue(defaultValue)\n  }, [defaultValue])\n\n  return (\n    <Fieldset key={key}>\n      {label && <Legend>{label}</Legend>}\n\n      <ChecboxesBox isInline={isInline}>\n        {options.map(option => (\n          <Radio\n            defaultChecked={option.value === checkedOptionValue}\n            name={name}\n            onChange={(_: any, isChecked: boolean) => handleChange(option.value, isChecked)}\n          >\n            {option.label}\n          </Radio>\n        ))}\n      </ChecboxesBox>\n    </Fieldset>\n  )\n}\n\nconst ChecboxesBox = styled.div<{\n  isInline: boolean\n}>`\n  color: ${p => p.theme.color.gunMetal};\n  display: flex;\n  flex-direction: ${p => (p.isInline ? 'row' : 'column')};\n  font-weight: 500;\n\n  > .rs-radio {\n    > .rs-radio-checker {\n      padding-left: 28px;\n      padding-top: 2px;\n\n      .rs-radio-wrapper {\n        left: 2px;\n        top: 3px !important;\n      }\n    }\n  }\n\n  ${p =>\n    p.isInline &&\n    css`\n      > .rs-radio:not(:first-child) {\n        margin-left: 0.75rem;\n      }\n    `}\n`\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;SAkBgB,UAAU,CAAC,EAAE,YAAY,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAmB,EAAA;IAC5G,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAA;IAE3F,MAAM,GAAG,GAAG,OAAO,CAAC,MAAM,CAAG,EAAA,IAAI,CAAI,CAAA,EAAA,MAAM,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC,CAAA;IAE/F,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,eAAuB,EAAE,SAAkB,KAAI;QAC9C,MAAM,sBAAsB,GAAG,SAAS,GAAG,eAAe,GAAG,SAAS,CAAA;QAEtE,qBAAqB,CAAC,sBAAsB,CAAC,CAAA;AAE7C,QAAA,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,sBAAsB,CAAC,CAAA;AACjC,SAAA;AACH,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;;;;;IAMD,SAAS,CAAC,MAAK;QACb,qBAAqB,CAAC,YAAY,CAAC,CAAA;AACrC,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;AAElB,IAAA,QACEA,IAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACN,KAAK,IAAIC,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAE,KAAK,EAAU,CAAA,EAElCA,GAAC,CAAA,YAAY,IAAC,QAAQ,EAAE,QAAQ,EAAA,QAAA,EAC7B,OAAO,CAAC,GAAG,CAAC,MAAM,KACjBA,IAAC,KAAK,EAAA,EACJ,cAAc,EAAE,MAAM,CAAC,KAAK,KAAK,kBAAkB,EACnD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,CAAM,EAAE,SAAkB,KAAK,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EAAA,QAAA,EAE9E,MAAM,CAAC,KAAK,EACP,CAAA,CACT,CAAC,EACW,CAAA,CAAA,EAAA,EAbF,GAAG,CAcP,EACZ;AACH,CAAC;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAE7B,CAAA;WACS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAA;;AAElB,kBAAA,EAAA,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC,CAAA;;;;;;;;;;;;;;;AAepD,EAAA,EAAA,CAAC,IACD,CAAC,CAAC,QAAQ;AACV,IAAA,GAAG,CAAA,CAAA;;;;AAIF,IAAA,CAAA,CAAA;CACJ;;;;"}

package/src/fields/MultiSelect.js

@@ -3,7 +3,7 @@ import { useMemo, useCallback } from 'react';
 import { TagPicker } from 'rsuite';
 import styled from 'styled-components';
 
-function MultiSelect({ onChange, options, 
+function MultiSelect({ fixedWidth = 5, onChange, options, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 searchable = false, ...originalProps }) {
     const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
@@ -14,10 +14,13 @@ searchable = false, ...originalProps }) {
         const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue;
         onChange(normalizedNextValue);
     }, [onChange]);
-    return jsx(StyledTagPicker, { data: options, onChange: handleChange, searchable: searchable, ...originalProps }, key);
+    return (jsx(StyledTagPicker, { data: options, fixedWidth: fixedWidth, onChange: handleChange, searchable: searchable, ...originalProps }, key));
 }
+// TODO A width seems to be mandatory in rsuite which is a very dirty behavior.
+// We should hack that.
 const StyledTagPicker = styled(TagPicker) `
   cursor: pointer;
+  width: ${p => p.fixedWidth}rem;
 
   > .rs-picker-toggle {
     cursor: inherit;

package/src/fields/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sources":["../../../src/fields/MultiSelect.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { TagPicker } from 'rsuite'\nimport styled from 'styled-components'\n\nimport type { Option } from '../types'\nimport type { TagPickerProps } from 'rsuite'\nimport type { Promisable } from 'type-fest'\n\nexport type MultiSelectProps = Omit<TagPickerProps, 'as' | 'data' | 'defaultValue' | 'onChange' | 'value'> & {\n  defaultValue?: string[]\n  name: string\n  onChange?: (nextValue: string[] | undefined) => Promisable<void>\n  options: Option[]\n}\nexport function MultiSelect({\n  onChange,\n  options,\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  searchable = false,\n  ...originalProps\n}: MultiSelectProps) {\n  const key = useMemo(\n    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,\n    [originalProps.defaultValue, originalProps.name]\n  )\n\n  const handleChange = useCallback(\n    (nextValue: string[] | null) => {\n      if (!onChange) {\n        return\n      }\n\n      const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue\n\n      onChange(normalizedNextValue)\n    },\n    [onChange]\n  )\n\n  return <StyledTagPicker key={key} data={options} onChange={handleChange} searchable={searchable} {...originalProps} />\n}\n\nconst StyledTagPicker = styled(TagPicker)`\n  cursor: pointer;\n\n  > .rs-picker-toggle {\n    cursor: inherit;\n  }\n`\n"],"names":["_jsx"],"mappings":";;;;;SAcgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAO;AACP;AACA,UAAU,GAAG,KAAK,EAClB,GAAG,aAAa,EACC,EAAA;AACjB,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAG,EAAA,aAAa,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAE,CAAA,EAC3E,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,CACjD,CAAA;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,SAA0B,KAAI;QAC7B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;AAED,QAAA,MAAM,mBAAmB,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;QAEnF,QAAQ,CAAC,mBAAmB,CAAC,CAAA;AAC/B,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;AAED,IAAA,OAAOA,IAAC,eAAe,EAAA,EAAW,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAA,GAAM,aAAa,EAArF,EAAA,GAAG,CAAsF,CAAA;AACxH,CAAC;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,CAAA;;;;;;CAMxC;;;;"}
+{"version":3,"file":"MultiSelect.js","sources":["../../../src/fields/MultiSelect.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { TagPicker } from 'rsuite'\nimport styled from 'styled-components'\n\nimport type { Option } from '../types'\nimport type { TagPickerProps } from 'rsuite'\nimport type { Promisable } from 'type-fest'\n\nexport type MultiSelectProps = Omit<TagPickerProps, 'as' | 'data' | 'defaultValue' | 'onChange' | 'value'> & {\n  defaultValue?: string[]\n  /** Width in REM */\n  fixedWidth?: number\n  name: string\n  onChange?: (nextValue: string[] | undefined) => Promisable<void>\n  options: Option[]\n}\nexport function MultiSelect({\n  fixedWidth = 5,\n  onChange,\n  options,\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  searchable = false,\n  ...originalProps\n}: MultiSelectProps) {\n  const key = useMemo(\n    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,\n    [originalProps.defaultValue, originalProps.name]\n  )\n\n  const handleChange = useCallback(\n    (nextValue: string[] | null) => {\n      if (!onChange) {\n        return\n      }\n\n      const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue\n\n      onChange(normalizedNextValue)\n    },\n    [onChange]\n  )\n\n  return (\n    <StyledTagPicker\n      key={key}\n      data={options}\n      fixedWidth={fixedWidth}\n      onChange={handleChange}\n      searchable={searchable}\n      {...originalProps}\n    />\n  )\n}\n\n// TODO A width seems to be mandatory in rsuite which is a very dirty behavior.\n// We should hack that.\nconst StyledTagPicker = styled(TagPicker)<{\n  fixedWidth: number\n}>`\n  cursor: pointer;\n  width: ${p => p.fixedWidth}rem;\n\n  > .rs-picker-toggle {\n    cursor: inherit;\n  }\n`\n"],"names":["_jsx"],"mappings":";;;;;AAgBM,SAAU,WAAW,CAAC,EAC1B,UAAU,GAAG,CAAC,EACd,QAAQ,EACR,OAAO;AACP;AACA,UAAU,GAAG,KAAK,EAClB,GAAG,aAAa,EACC,EAAA;AACjB,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAG,EAAA,aAAa,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAE,CAAA,EAC3E,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,CACjD,CAAA;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,SAA0B,KAAI;QAC7B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;AAED,QAAA,MAAM,mBAAmB,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;QAEnF,QAAQ,CAAC,mBAAmB,CAAC,CAAA;AAC/B,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,QACEA,GAAC,CAAA,eAAe,EAEd,EAAA,IAAI,EAAE,OAAO,EACb,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,UAAU,EAClB,GAAA,aAAa,EALZ,EAAA,GAAG,CAMR,EACH;AACH,CAAC;AAED;AACA;AACA,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAEvC,CAAA;;AAES,SAAA,EAAA,CAAC,IAAI,CAAC,CAAC,UAAU,CAAA;;;;;CAK3B;;;;"}

package/src/formiks/FormikMultiCheckbox.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useField } from 'formik';
+import { useCallback, useEffect } from 'react';
+import { MultiCheckbox } from '../fields/MultiCheckbox.js';
+
+function FormikMultiCheckbox({ name, ...originalProps }) {
+    const [, , helpers] = useField(name);
+    // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
+    // both because it is useless and it will trigger infinite hook calls
+    const { setValue } = helpers;
+    const handleChange = useCallback((nextValue) => {
+        setValue(nextValue);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => setValue(undefined), []);
+    return jsx(MultiCheckbox, { name: name, onChange: handleChange, ...originalProps });
+}
+
+export { FormikMultiCheckbox };
+//# sourceMappingURL=FormikMultiCheckbox.js.map

package/src/formiks/FormikMultiCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormikMultiCheckbox.js","sources":["../../../src/formiks/FormikMultiCheckbox.tsx"],"sourcesContent":["import { useField } from 'formik'\nimport { useCallback, useEffect } from 'react'\n\nimport { MultiCheckbox } from '../fields/MultiCheckbox'\n\nimport type { MultiCheckboxProps } from '../fields/MultiCheckbox'\n\nexport type FormikMultiCheckboxProps = Omit<MultiCheckboxProps, 'defaultValue' | 'onChange'>\nexport function FormikMultiCheckbox({ name, ...originalProps }: FormikMultiCheckboxProps) {\n  const [, , helpers] = useField(name)\n  // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies\n  // both because it is useless and it will trigger infinite hook calls\n  const { setValue } = helpers\n\n  const handleChange = useCallback((nextValue: string[] | undefined) => {\n    setValue(nextValue)\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => () => setValue(undefined), [])\n\n  return <MultiCheckbox name={name} onChange={handleChange} {...originalProps} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAQM,SAAU,mBAAmB,CAAC,EAAE,IAAI,EAAE,GAAG,aAAa,EAA4B,EAAA;IACtF,MAAM,KAAK,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;;;AAGpC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;AAE5B,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,SAA+B,KAAI;QACnE,QAAQ,CAAC,SAAS,CAAC,CAAA;;KAGpB,EAAE,EAAE,CAAC,CAAA;;AAGN,IAAA,SAAS,CAAC,MAAM,MAAM,QAAQ,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAA;AAE9C,IAAA,OAAOA,GAAC,CAAA,aAAa,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAM,GAAA,aAAa,GAAI,CAAA;AACjF;;;;"}

package/src/formiks/FormikMultiRadio.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useField } from 'formik';
+import { useCallback, useEffect } from 'react';
+import { MultiRadio } from '../fields/MultiRadio.js';
+
+function FormikMultiRadio({ name, ...originalProps }) {
+    const [, , helpers] = useField(name);
+    // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
+    // both because it is useless and it will trigger infinite hook calls
+    const { setValue } = helpers;
+    const handleChange = useCallback((nextValue) => {
+        setValue(nextValue);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => setValue(undefined), []);
+    return jsx(MultiRadio, { name: name, onChange: handleChange, ...originalProps });
+}
+
+export { FormikMultiRadio };
+//# sourceMappingURL=FormikMultiRadio.js.map

package/src/formiks/FormikMultiRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormikMultiRadio.js","sources":["../../../src/formiks/FormikMultiRadio.tsx"],"sourcesContent":["import { useField } from 'formik'\nimport { useCallback, useEffect } from 'react'\n\nimport { MultiRadio } from '../fields/MultiRadio'\n\nimport type { MultiRadioProps } from '../fields/MultiRadio'\n\nexport type FormikMultiRadioProps = Omit<MultiRadioProps, 'defaultValue' | 'onChange'>\nexport function FormikMultiRadio({ name, ...originalProps }: FormikMultiRadioProps) {\n  const [, , helpers] = useField(name)\n  // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies\n  // both because it is useless and it will trigger infinite hook calls\n  const { setValue } = helpers\n\n  const handleChange = useCallback((nextValue: string | undefined) => {\n    setValue(nextValue)\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => () => setValue(undefined), [])\n\n  return <MultiRadio name={name} onChange={handleChange} {...originalProps} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAQM,SAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,GAAG,aAAa,EAAyB,EAAA;IAChF,MAAM,KAAK,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;;;AAGpC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;AAE5B,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,SAA6B,KAAI;QACjE,QAAQ,CAAC,SAAS,CAAC,CAAA;;KAGpB,EAAE,EAAE,CAAC,CAAA;;AAGN,IAAA,SAAS,CAAC,MAAM,MAAM,QAAQ,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAA;AAE9C,IAAA,OAAOA,GAAC,CAAA,UAAU,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAM,GAAA,aAAa,GAAI,CAAA;AAC9E;;;;"}

package/src/index.js

@@ -1,10 +1,16 @@
 import * as constants from './constants.js';
 export { constants as MUI };
 export { THEME } from './theme.js';
+export { Field } from './elements/Field.js';
+export { Fieldset } from './elements/Fieldset.js';
+export { Label } from './elements/Label.js';
+export { Legend } from './elements/Legend.js';
 export { Checkbox } from './fields/Checkbox.js';
 export { DateRangePicker } from './fields/DateRangePicker/index.js';
 export { DatePicker } from './fields/DatePicker/index.js';
+export { MultiCheckbox } from './fields/MultiCheckbox.js';
 export { MultiSelect } from './fields/MultiSelect.js';
+export { MultiRadio } from './fields/MultiRadio.js';
 export { Select } from './fields/Select.js';
 export { Textarea } from './fields/Textarea.js';
 export { TextInput } from './fields/TextInput.js';
@@ -12,7 +18,9 @@ export { FormikCheckbox } from './formiks/FormikCheckbox.js';
 export { FormikDatePicker } from './formiks/FormikDatePicker.js';
 export { FormikDateRangePicker } from './formiks/FormikDateRangePicker.js';
 export { FormikEffect } from './formiks/FormikEffect.js';
+export { FormikMultiCheckbox } from './formiks/FormikMultiCheckbox.js';
 export { FormikMultiSelect } from './formiks/FormikMultiSelect.js';
+export { FormikMultiRadio } from './formiks/FormikMultiRadio.js';
 export { FormikSelect } from './formiks/FormikSelect.js';
 export { FormikTextarea } from './formiks/FormikTextarea.js';
 export { FormikTextInput } from './formiks/FormikTextInput.js';

package/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}