@mtes-mct/monitor-ui 1.1.1

package/README.md

@@ -0,0 +1,25 @@
+# Monitor UI
+
+[![License][img-license]][lnk-license]
+[![CI Status][img-github]][lnk-github]
+<!-- [![NPM Version][img-npm]][lnk-npm] -->
+
+> Common React UI components and styles for Monitorfish and Monitorenv..
+
+## Documentation
+
+Here is [the Storybook][lnk-storybook].
+
+## Contributing
+
+Please read the [contributing document](CONTRIBUTING.md) for setup and contributing instructions.
+
+---
+
+[img-github]:  https://img.shields.io/github/workflow/status/MTES-MCT/monitor-ui/Check/main?style=flat-square
+[img-license]: https://img.shields.io/github/license/MTES-MCT/monitor-ui?style=flat-square
+[img-npm]: https://img.shields.io/npm/v/@MTES-MCT/monitor-ui?style=flat-square
+[lnk-github]: https://github.com/MTES-MCT/monitor-ui/actions?query=branch%3Amain++
+[lnk-license]: https://github.com/MTES-MCT/monitor-ui/blob/main/LICENSE
+[lnk-npm]: https://www.npmjs.com/package/@MTES-MCT/monitor-ui
+[lnk-storybook]: https://mtes-mct.github.io/monitor-ui/

package/ThemeProvider.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from './theme';
+import type { DeepPartial } from './types';
+export declare type ThemeProviderProps = {
+    children: any;
+    theme?: DeepPartial<Theme>;
+};
+export declare function ThemeProvider({ children, theme }: ThemeProviderProps): JSX.Element;

package/_virtual/_commonjsHelpers.js

@@ -0,0 +1,4 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+export { commonjsGlobal };
+//# sourceMappingURL=_commonjsHelpers.js.map

package/_virtual/_commonjsHelpers.js.map

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

package/_virtual/fr.js

@@ -0,0 +1,4 @@
+var fr = {exports: {}};
+
+export { fr as f };
+//# sourceMappingURL=fr.js.map

package/_virtual/fr.js.map

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

package/_virtual/timezone.js

@@ -0,0 +1,4 @@
+var timezone = {exports: {}};
+
+export { timezone as t };
+//# sourceMappingURL=timezone.js.map

package/_virtual/timezone.js.map

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

package/_virtual/utc.js

@@ -0,0 +1,4 @@
+var utc = {exports: {}};
+
+export { utc as u };
+//# sourceMappingURL=utc.js.map

package/_virtual/utc.js.map

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

package/constants.d.ts

@@ -0,0 +1 @@
+export {};

package/fields/DatePicker/CalendarPicker.d.ts

@@ -0,0 +1,9 @@
+import type { DateTuple } from '../DateRangePicker/types';
+import type { Promisable } from 'type-fest';
+declare type CalendarPickerProps = {
+    defaultValue?: Date;
+    isHistorical?: boolean;
+    onChange: (nextDateTuple: DateTuple) => Promisable<void>;
+};
+export declare function CalendarPicker({ defaultValue, isHistorical, onChange }: CalendarPickerProps): JSX.Element;
+export {};

package/fields/DatePicker/index.d.ts

@@ -0,0 +1,23 @@
+import type { Promisable } from 'type-fest';
+export declare type DatePickerProps = {
+    defaultValue?: Date;
+    /** Only allow past dates until today. */
+    isHistorical?: boolean;
+    isLabelHidden?: boolean;
+    label: string;
+    /**
+     * Range of minutes used to generate the time picker list.
+     *
+     * @example
+     * `15` would produce a list with `..., 10:45, 11:00, 11:15, ...`.
+     */
+    minutesRange?: number;
+    /**
+     * Called each time the date range picker is changed to a new valid value.
+     *
+     * @param nextUtcDateRange - A utcized date to be used as is to interact with the API.
+     */
+    onChange: (nextUtcDate: Date) => Promisable<void>;
+    withTime?: boolean;
+};
+export declare function DatePicker({ defaultValue, isHistorical, isLabelHidden, label, minutesRange, onChange, withTime }: DatePickerProps): JSX.Element;

package/fields/DateRangePicker/DateInput.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { NumberInputProps } from './NumberInput';
+import type { DateTuple, DateOrTimeInputRef } from './types';
+import type { Promisable } from 'type-fest';
+export declare type DateInputProps = Pick<NumberInputProps, 'onBack' | 'onPrevious' | 'onNext'> & {
+    defaultValue?: DateTuple;
+    isEndDate?: boolean;
+    isForcedFocused: boolean;
+    isStartDate?: boolean;
+    /** Called each time the date input is changed to a new valid value. */
+    onChange: (nextDateTuple: DateTuple) => Promisable<void>;
+    onClick: () => Promisable<void>;
+};
+export declare const DateInput: import("react").ForwardRefExoticComponent<Pick<NumberInputProps, "onBack" | "onNext" | "onPrevious"> & {
+    defaultValue?: DateTuple | undefined;
+    isEndDate?: boolean | undefined;
+    isForcedFocused: boolean;
+    isStartDate?: boolean | undefined;
+    /** Called each time the date input is changed to a new valid value. */
+    onChange: (nextDateTuple: DateTuple) => Promisable<void>;
+    onClick: () => Promisable<void>;
+} & import("react").RefAttributes<DateOrTimeInputRef>>;

package/fields/DateRangePicker/NumberInput.d.ts

@@ -0,0 +1,32 @@
+import type { InputHTMLAttributes } from 'react';
+import type { Promisable } from 'type-fest';
+export declare type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onInput' | 'pattern' | 'type'> & {
+    max: number;
+    min: number;
+    /** Called when the use press backspace key while the input is empty. */
+    onBack?: () => Promisable<void>;
+    /** Called when the input value reaches the size property. */
+    onFilled?: () => Promisable<void>;
+    onFormatError: (hasNextFormatError: boolean) => Promisable<void>;
+    onInput?: (nextValue: string) => Promisable<void>;
+    /** Called when the right arrow is pressed while the cursor is positionned at the input end. */
+    onNext?: () => Promisable<void>;
+    /** Called when the left arrow is pressed while the cursor is positionned at the input start. */
+    onPrevious?: () => Promisable<void>;
+    size: number;
+};
+export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "maxLength" | "onInput" | "pattern" | "type"> & {
+    max: number;
+    min: number;
+    /** Called when the use press backspace key while the input is empty. */
+    onBack?: (() => Promisable<void>) | undefined;
+    /** Called when the input value reaches the size property. */
+    onFilled?: (() => Promisable<void>) | undefined;
+    onFormatError: (hasNextFormatError: boolean) => Promisable<void>;
+    onInput?: ((nextValue: string) => Promisable<void>) | undefined;
+    /** Called when the right arrow is pressed while the cursor is positionned at the input end. */
+    onNext?: (() => Promisable<void>) | undefined;
+    /** Called when the left arrow is pressed while the cursor is positionned at the input start. */
+    onPrevious?: (() => Promisable<void>) | undefined;
+    size: number;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/fields/DateRangePicker/RangeCalendarPicker.d.ts

@@ -0,0 +1,10 @@
+import type { DateRange } from '../../types';
+import type { DateTupleRange } from './types';
+import type { Promisable } from 'type-fest';
+declare type RangeCalendarPickerProps = {
+    defaultValue?: DateRange;
+    isHistorical?: boolean;
+    onChange: (nextDateTupleRange: DateTupleRange) => Promisable<void>;
+};
+export declare function RangeCalendarPicker({ defaultValue, isHistorical, onChange }: RangeCalendarPickerProps): JSX.Element;
+export {};

package/fields/DateRangePicker/RangedTimePicker.d.ts

@@ -0,0 +1,9 @@
+import type { TimeTuple } from './types';
+import type { Promisable } from 'type-fest';
+declare type RangedTimePickerProps = {
+    filter: RegExp;
+    minutesRange: number;
+    onChange: (nextTimeTuple: TimeTuple) => Promisable<void>;
+};
+export declare function RangedTimePicker({ filter, minutesRange, onChange }: RangedTimePickerProps): JSX.Element;
+export {};

package/fields/DateRangePicker/TimeInput.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { NumberInputProps } from './NumberInput';
+import type { DateOrTimeInputRef, TimeTuple } from './types';
+import type { Promisable } from 'type-fest';
+export declare type TimeInputProps = Pick<NumberInputProps, 'onBack' | 'onPrevious' | 'onNext'> & {
+    defaultValue?: TimeTuple;
+    isStartDate?: boolean;
+    minutesRange?: number;
+    /** Called each time the time input is changed to a new valid value. */
+    onChange: (nextTimeTuple: TimeTuple) => Promisable<void>;
+    onFocus?: () => Promisable<void>;
+    onNext?: () => Promisable<void>;
+    onPrevious?: () => Promisable<void>;
+};
+export declare const TimeInput: import("react").ForwardRefExoticComponent<Pick<NumberInputProps, "onBack" | "onNext" | "onPrevious"> & {
+    defaultValue?: TimeTuple | undefined;
+    isStartDate?: boolean | undefined;
+    minutesRange?: number | undefined;
+    /** Called each time the time input is changed to a new valid value. */
+    onChange: (nextTimeTuple: TimeTuple) => Promisable<void>;
+    onFocus?: (() => Promisable<void>) | undefined;
+    onNext?: (() => Promisable<void>) | undefined;
+    onPrevious?: (() => Promisable<void>) | undefined;
+} & import("react").RefAttributes<DateOrTimeInputRef>>;

package/fields/DateRangePicker/constants.d.ts

@@ -0,0 +1,11 @@
+import type { DateRangePickerLocale } from 'rsuite';
+export declare const HOURS_AS_OPTIONS: {
+    label: string;
+    value: number;
+}[];
+export declare const RSUITE_CALENDAR_LOCALE: DateRangePickerLocale;
+export declare enum STATUS {
+    'END_DATE' = "END_DATE",
+    'NO_DATE' = "NO_DATE",
+    'START_DATE' = "START_DATE"
+}

package/fields/DateRangePicker/index.d.ts

@@ -0,0 +1,24 @@
+import type { DateRange } from '../../types';
+import type { Promisable } from 'type-fest';
+export declare type DateRangePickerProps = {
+    defaultValue?: DateRange;
+    /** Only allow past dates until today. */
+    isHistorical?: boolean;
+    isLabelHidden?: boolean;
+    label: string;
+    /**
+     * Range of minutes used to generate the time picker list.
+     *
+     * @example
+     * `15` would produce a list with `..., 10:45, 11:00, 11:15, ...`.
+     */
+    minutesRange?: number;
+    /**
+     * Called each time the date range picker is changed to a new valid value.
+     *
+     * @param nextUtcDateRange - A utcized date to be used as is to interact with the API.
+     */
+    onChange: (nextUtcDateRange: DateRange) => Promisable<void>;
+    withTime?: boolean;
+};
+export declare function DateRangePicker({ defaultValue, isHistorical, isLabelHidden, label, minutesRange, onChange, withTime }: DateRangePickerProps): JSX.Element;

package/fields/DateRangePicker/types.d.ts

@@ -0,0 +1,18 @@
+export declare type DateOrTimeInputRef = {
+    boxSpan: HTMLSpanElement;
+    /**
+     * Focus the first input in the group.
+     *
+     * @param inLastInputOfTheGroup - If `true`, focus the last input in the group instead of the first one
+     */
+    focus: (inLastInputOfTheGroup?: boolean) => void;
+};
+export declare enum DateRangePosition {
+    END = "END",
+    START = "START"
+}
+/** In the shape of ["YYYY", "MM", "DD"]. */
+export declare type DateTuple = [string, string, string];
+export declare type DateTupleRange = [DateTuple, DateTuple];
+/** In the shape of ["hh", "mm"]. */
+export declare type TimeTuple = [string, string];

package/fields/DateRangePicker/utils.d.ts

@@ -0,0 +1,24 @@
+import type { Option } from '../../types';
+import type { DateTuple, TimeTuple } from './types';
+export declare function formatNumberAsDoubleDigit(numberLike: number | string): string;
+export declare function getDateFromDateAndTimeTuple(dateTuple: DateTuple, timeTuple: TimeTuple, isEnd?: boolean): Date;
+export declare function getDateTupleFromDate(date: undefined): undefined;
+export declare function getDateTupleFromDate(date: Date): DateTuple;
+export declare function getDateTupleFromDate(date?: Date): DateTuple | undefined;
+/**
+ * Generate a list of ranged time options.
+ *
+ * @example
+ * ```
+ * (minutesRange = 30) => ([
+ *   { label: '00:00', value: ['00', '00'] },
+ *   { label: '00:30', value: ['00', '30'] },
+ *   { label: '01:00', value: ['01', '00'] },
+ *   { label: '01:30', value: ['01', '30'] },
+ *   { label: '02:00', value: ['02', '00'] },
+ *   ...
+ * ])
+ * ```
+ */
+export declare const getRangedTimeOptions: (minutesRange: number) => Option<TimeTuple>[];
+export declare function getTimeTupleFromDate(date?: Date): TimeTuple | undefined;

package/fields/Select.d.ts

@@ -0,0 +1,11 @@
+import type { Option } from '../types';
+import type { TagPickerProps } from 'rsuite';
+import type { Promisable } from 'type-fest';
+export declare type SelectProps = Omit<TagPickerProps, 'as' | 'data' | 'onChange' | 'placeholder'> & {
+    isMulti?: boolean;
+    label: string;
+    name: string;
+    onChange: (valueOrValues: string | string[] | undefined) => Promisable<void>;
+    options: Option[];
+};
+export declare function Select({ isMulti, label, name, onChange, options, searchable, ...originalProps }: SelectProps): JSX.Element;

package/formiks/FormikEffect.d.ts

@@ -0,0 +1,5 @@
+import type { Promisable } from 'type-fest';
+export declare type FormikEffectProps = {
+    onChange: (nextValues: Record<string, any>) => Promisable<void>;
+};
+export declare function FormikEffect({ onChange }: FormikEffectProps): JSX.Element;

package/formiks/FormikSelect.d.ts

@@ -0,0 +1,5 @@
+import type { SelectProps } from '../fields/Select';
+export declare type FormikSelectProps = Omit<SelectProps, 'name' | 'onChange'> & {
+    name: string;
+};
+export declare function FormikSelect({ name, ...originalProps }: FormikSelectProps): JSX.Element;

package/hooks/useForceUpdate.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * Force component re-rendering
+ *
+ * @see https://reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
+ */
+export declare function useForceUpdate(): {
+    forceDebouncedUpdate: import("lodash").DebouncedFunc<import("react").DispatchWithoutAction>;
+    forceUpdate: import("react").DispatchWithoutAction;
+};

package/index.d.ts

@@ -0,0 +1,14 @@
+export * as MUI from './constants';
+export { THEME } from './theme';
+export { DateRangePicker } from './fields/DateRangePicker';
+export { DatePicker } from './fields/DatePicker';
+export { Select } from './fields/Select';
+export { FormikEffect } from './formiks/FormikEffect';
+export { FormikSelect } from './formiks/FormikSelect';
+export { ThemeProvider } from './ThemeProvider';
+export type { PartialTheme, Theme } from './theme';
+export type { DateRangePickerProps } from './fields/DateRangePicker';
+export type { DatePickerProps } from './fields/DatePicker';
+export type { SelectProps } from './fields/Select';
+export type { FormikEffectProps } from './formiks/FormikEffect';
+export type { FormikSelectProps } from './formiks/FormikSelect';

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@mtes-mct/monitor-ui",
+  "description": "Common React UI components and styles for Monitorfish and Monitorenv.",
+  "version": "1.1.1",
+  "license": "AGPL-3.0",
+  "engines": {
+    "node": "18",
+    "npm": "8"
+  },
+  "browser": "./src/index.ts",
+  "dependencies": {
+    "@babel/runtime": "7.19.4",
+    "date-fns": "2.29.3",
+    "dayjs": "1.11.5",
+    "lodash.throttle": "4.1.1",
+    "prop-types": "15.8.1",
+    "ramda": "0.28.0",
+    "rsuite": "5.19.1",
+    "tslib": "2.4.0",
+    "type-fest": "3.1.0"
+  },
+  "peerDependencies": {
+    "formik": "^2.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "styled-components": "^5.0.0"
+  },
+  "//": "https://github.com/okonet/lint-staged/issues/825#issuecomment-674575655",
+  "lint-staged": {
+    "*.{json,md,yaml,yml}": "prettier --write",
+    "*.{ts,tsx}": [
+      "eslint",
+      "bash -c 'npm run test:type:partial'"
+    ]
+  },
+  "packageManager": "yarn@3.2.4",
+  "bugs": {
+    "url": "https://github.com/MTES-MCT/monitor-ui/issues"
+  },
+  "exports": "./index.js",
+  "homepage": "https://mtes-mct.github.io/monitor-ui/",
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MTES-MCT/monitor-ui.git"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "types": "./index.d.ts"
+}

package/src/ThemeProvider.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { mergeDeepRight } from 'ramda';
+import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
+import { THEME } from './theme.js';
+
+const UntypedStyledComponentsThemeProvider = ThemeProvider$1;
+function ThemeProvider({ children, theme = {} }) {
+    const finalTheme = mergeDeepRight(THEME, theme);
+    return jsx(UntypedStyledComponentsThemeProvider, { theme: finalTheme, children: children });
+}
+
+export { ThemeProvider };
+//# sourceMappingURL=ThemeProvider.js.map

package/src/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sources":["../../src/ThemeProvider.tsx"],"sourcesContent":["import { mergeDeepRight } from 'ramda'\nimport { ThemeProvider as StyledComponentsThemeProvider } from 'styled-components'\n\nimport { THEME, Theme } from './theme'\n\nimport type { DeepPartial } from './types'\n\nconst UntypedStyledComponentsThemeProvider: any = StyledComponentsThemeProvider\n\nexport type ThemeProviderProps = {\n  children: any\n  theme?: DeepPartial<Theme>\n}\nexport function ThemeProvider({ children, theme = {} }: ThemeProviderProps) {\n  const finalTheme = mergeDeepRight(THEME, theme)\n\n  return <UntypedStyledComponentsThemeProvider theme={finalTheme}>{children}</UntypedStyledComponentsThemeProvider>\n}\n"],"names":["StyledComponentsThemeProvider","_jsx"],"mappings":";;;;;AAOA,MAAM,oCAAoC,GAAQA,eAA6B,CAAA;AAMzE,SAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,EAAE,EAAsB,EAAA;IACxE,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA;IAE/C,OAAOC,GAAA,CAAC,oCAAoC,EAAC,EAAA,KAAK,EAAE,UAAU,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAwC,CAAA;AACnH;;;;"}

package/src/constants.js

@@ -0,0 +1,2 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/string-enum */
+//# sourceMappingURL=constants.js.map

package/src/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../src/constants.ts"],"sourcesContent":["/* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/string-enum */\n\nexport {}\n"],"names":[],"mappings":"AAAA"}

package/src/fields/DatePicker/CalendarPicker.js

@@ -0,0 +1,137 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { DatePicker } from 'rsuite';
+import styled, { createGlobalStyle } from 'styled-components';
+import { getUtcDayjs } from '../../utils/getUtcDayjs.js';
+import { getUtcizedDayjs } from '../../utils/getUtcizedDayjs.js';
+import { stopMouseEventPropagation } from '../../utils/stopMouseEventPropagation.js';
+import { RSUITE_CALENDAR_LOCALE } from '../DateRangePicker/constants.js';
+import { getDateTupleFromDate } from '../DateRangePicker/utils.js';
+
+function CalendarPicker({ defaultValue, isHistorical, onChange }) {
+    const boxRef = useRef();
+    const calendarRef = useRef();
+    const [isFirstLoad, setIsFirstLoad] = useState(true);
+    const utcTodayAsDayjs = useMemo(() => getUtcDayjs().endOf('day'), []);
+    const disabledDate = useMemo(() => (date) => date && isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false, [isHistorical, utcTodayAsDayjs]);
+    const handleSelect = useCallback((nextDate) => {
+        const nextDateTuple = getDateTupleFromDate(nextDate);
+        onChange(nextDateTuple);
+    }, [onChange]);
+    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 (jsxs(Fragment, { children: [jsx(GlobalStyleToHideBodyDialog, {}), jsx(Box, { ref: boxRef, onClick: stopMouseEventPropagation, children: !isFirstLoad && (jsx(DatePicker, { ref: calendarRef, container: boxRef.current, disabledDate: disabledDate, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: true, ranges: [], 
+                    // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
+                    value: defaultValue })) })] }));
+}
+const GlobalStyleToHideBodyDialog = createGlobalStyle `
+  body > div[role="dialog"].rs-picker-date-menu {
+    display: none;
+  }
+`;
+const Box = styled.div `
+  height: 0;
+  position: relative;
+  user-select: none;
+
+  .rs-picker-toggle {
+    display: none;
+  }
+
+  .rs-picker-date-panel {
+    height: 290px;
+  }
+
+  .rs-picker-date-menu {
+    border: solid 1px ${p => p.theme.color.lightGray};
+    border-radius: 0;
+    margin-top: 0.25rem;
+
+    .rs-picker-date-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 { CalendarPicker };
+//# sourceMappingURL=CalendarPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarPicker.js","sources":["../../../../src/fields/DatePicker/CalendarPicker.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { DatePicker as RsuiteDatePicker } from 'rsuite'\nimport styled, { createGlobalStyle } from 'styled-components'\n\nimport { getUtcDayjs } from '../../utils/getUtcDayjs'\nimport { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'\nimport { stopMouseEventPropagation } from '../../utils/stopMouseEventPropagation'\nimport { RSUITE_CALENDAR_LOCALE } from '../DateRangePicker/constants'\nimport { getDateTupleFromDate } from '../DateRangePicker/utils'\n\nimport type { DateTuple } from '../DateRangePicker/types'\nimport type { MutableRefObject } from 'react'\nimport type { Promisable } from 'type-fest'\n\ntype CalendarPickerProps = {\n  defaultValue?: Date\n  isHistorical?: boolean\n  onChange: (nextDateTuple: DateTuple) => Promisable<void>\n}\nexport function CalendarPicker({ defaultValue, isHistorical, onChange }: CalendarPickerProps) {\n  const boxRef = useRef() as MutableRefObject<HTMLDivElement>\n  const calendarRef = useRef<any>()\n\n  const [isFirstLoad, setIsFirstLoad] = useState(true)\n\n  const utcTodayAsDayjs = useMemo(() => getUtcDayjs().endOf('day'), [])\n  const disabledDate = useMemo(\n    () => (date?: Date) => date && isHistorical ? getUtcizedDayjs(date).isAfter(utcTodayAsDayjs) : false,\n    [isHistorical, utcTodayAsDayjs]\n  )\n\n  const handleSelect = useCallback(\n    (nextDate: Date) => {\n      const nextDateTuple = getDateTupleFromDate(nextDate)\n\n      onChange(nextDateTuple)\n    },\n    [onChange]\n  )\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    <>\n      <GlobalStyleToHideBodyDialog />\n\n      <Box ref={boxRef} onClick={stopMouseEventPropagation}>\n        {!isFirstLoad && (\n          <RsuiteDatePicker\n            ref={calendarRef}\n            container={boxRef.current}\n            disabledDate={disabledDate}\n            format=\"yyyy-MM-dd\"\n            locale={RSUITE_CALENDAR_LOCALE}\n            oneTap\n            onSelect={handleSelect}\n            open\n            ranges={[]}\n            // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`\n            value={defaultValue}\n          />\n        )}\n      </Box>\n    </>\n  )\n}\n\nconst GlobalStyleToHideBodyDialog: any = createGlobalStyle`\n  body > div[role=\"dialog\"].rs-picker-date-menu {\n    display: none;\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-date-panel {\n    height: 290px;\n  }\n\n  .rs-picker-date-menu {\n    border: solid 1px ${p => p.theme.color.lightGray};\n    border-radius: 0;\n    margin-top: 0.25rem;\n\n    .rs-picker-date-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":["_jsxs","_Fragment","_jsx","RsuiteDatePicker"],"mappings":"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"}