@mtes-mct/monitor-ui 5.8.0 → 5.9.0

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [5.8.1](https://github.com/MTES-MCT/monitor-ui/compare/v5.8.0...v5.8.1) (2023-05-04)
+
+
+### Bug Fixes
+
+* **fields:** add missing isUndefinedWhenDisabled prop to DatePicker & DateRangePicker ([17ba4f8](https://github.com/MTES-MCT/monitor-ui/commit/17ba4f8a60204c9a297d59c167c0ae2d872070cf))
+
+# [5.8.0](https://github.com/MTES-MCT/monitor-ui/compare/v5.7.1...v5.8.0) (2023-05-04)
+
+
+### Bug Fixes
+
+* **components:** retype onChangeFocus callback param in NewWindow ([da16a87](https://github.com/MTES-MCT/monitor-ui/commit/da16a87d9e461de08beb61b0f6875742ea22c19a))
+* **elements:** code review of SimpleTable ([34d7466](https://github.com/MTES-MCT/monitor-ui/commit/34d7466117fd8d08c6921e8f04e17b251ebbc957))
+* **elements:** improve style of SimpleTable ([6bfac8d](https://github.com/MTES-MCT/monitor-ui/commit/6bfac8d58141e7c3911f8f5aed605d3dc5df1abf))
+* **elements:** lint and type of SimpleTable ([9e45fde](https://github.com/MTES-MCT/monitor-ui/commit/9e45fde0e47089a0f053b48e6b702660d942050a))
+
+
+### Features
+
+* **elements:** add SimpleTable ([6517305](https://github.com/MTES-MCT/monitor-ui/commit/6517305af0b999c7dd2090460ed05d18ee797818))
+* **elements:** export component and move story in elements folder ([ca7c012](https://github.com/MTES-MCT/monitor-ui/commit/ca7c0122eae40a60f1fa405b29541e41d432525b))
+
 ## [5.7.1](https://github.com/MTES-MCT/monitor-ui/compare/v5.7.0...v5.7.1) (2023-05-03)
 
 

package/components/Dialog/Action.d.ts

@@ -0,0 +1 @@
+export declare const Action: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/components/Dialog/Body.d.ts

@@ -0,0 +1 @@
+export declare const Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/components/Dialog/Title.d.ts

@@ -0,0 +1 @@
+export declare const Title: import("styled-components").StyledComponent<"h4", import("styled-components").DefaultTheme, {}, never>;

package/components/Dialog/index.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'react';
+export type DialogProps = HTMLAttributes<HTMLDivElement> & {
+    isAbsolute?: boolean;
+};
+export declare function RawDialog({ children, isAbsolute, ...nativeProps }: DialogProps): JSX.Element;
+export declare namespace RawDialog {
+    var displayName: string;
+}
+export declare const Box: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $isAbsolute: boolean;
+}, never>;
+export declare const Dialog: typeof RawDialog & {
+    Action: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+    Body: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+    Title: import("styled-components").StyledComponent<"h4", import("styled-components").DefaultTheme, {}, never>;
+};

package/fields/DatePicker/index.d.ts

@@ -37,6 +37,7 @@ export interface DatePickerProps extends Omit<HTMLAttributes<HTMLFieldSetElement
     isLabelHidden?: boolean | undefined;
     isLight?: boolean | undefined;
     isStringDate?: boolean | undefined;
+    isUndefinedWhenDisabled?: boolean | undefined;
     label: string;
     /**
      * Range of minutes used to generate the time picker list.

package/fields/DateRangePicker/NumberInput.d.ts

@@ -16,7 +16,7 @@ export type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'defa
     onPrevious?: (() => Promisable<void>) | undefined;
     size: number;
 };
-export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "pattern" | "defaultValue" | "onInput" | "type" | "maxLength"> & {
+export declare const NumberInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "pattern" | "type" | "defaultValue" | "onInput" | "maxLength"> & {
     isLight: boolean;
     max: number;
     min: number;

package/fields/DateRangePicker/index.d.ts

@@ -40,6 +40,7 @@ export interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLFieldSetEl
     isLabelHidden?: boolean | undefined;
     isLight?: boolean | undefined;
     isStringDate?: boolean | undefined;
+    isUndefinedWhenDisabled?: boolean | undefined;
     label: string;
     /**
      * Range of minutes used to generate the time picker list.

package/index.d.ts

@@ -10,6 +10,7 @@ export { GlobalStyle } from './GlobalStyle';
 export { OnlyFontGlobalStyle } from './OnlyFontGlobalStyle';
 export { THEME } from './theme';
 export { ThemeProvider } from './ThemeProvider';
+export { Dialog } from './components/Dialog';
 export { Dropdown } from './components/Dropdown';
 export { NewWindow } from './components/NewWindow';
 export { SingleTag } from './components/SingleTag';
@@ -65,6 +66,7 @@ export { isNumeric } from './utils/isNumeric';
 export { stopMouseEventPropagation } from './utils/stopMouseEventPropagation';
 export type { PartialTheme, Theme } from './theme';
 export type { Coordinates, DateAsStringRange, DateRange, Defined, IconProps, Option, OptionValueType, Undefine } from './types';
+export type { DialogProps } from './components/Dialog';
 export type { DropdownProps, DropdownItemProps } from './components/Dropdown';
 export type { NewWindowProps } from './components/NewWindow';
 export type { SingleTagProps } from './components/SingleTag';

package/index.js

@@ -2163,6 +2163,106 @@ function ThemeProvider({ children, theme = {} }) {
     return jsx(UntypedStyledComponentsThemeProvider, { theme: finalTheme, children: children });
 }
 
+const Action = styled.div `
+  background-color: ${p => p.theme.color.white};
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+  display: flex;
+  flex-direction: column-reverse;
+  padding: 8px 8px 8px 8px;
+  @media (min-width: 740px) {
+    align-items: center;
+    flex-direction: row;
+    justify-content: center;
+    padding: 48px 8px 48px 8px;
+  }
+
+  > button {
+    margin-bottom: 2px;
+  }
+  @media (min-width: 740px) {
+    > button {
+      margin-bottom: 0;
+      margin-right: 2px;
+    }
+  }
+`;
+
+const Body = styled.div `
+  background-color: ${p => p.theme.color.white};
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  padding: 8px 8px 8px 8px;
+  text-align: center;
+  @media (min-width: 740px) {
+    padding: 48px 8px 8px 8px;
+    text-align: center;
+  }
+
+  > p {
+    color: ${p => p.theme.color.slateGray};
+    padding-top: 2px;
+  }
+`;
+
+const Title = styled.h4 `
+  font-size: 125%;
+  font-weight: 500;
+  line-height: 48px;
+  padding-bottom: 2px;
+  height: 48px;
+  color: ${p => p.theme.color.white};
+  background-color: ${p => p.theme.color.charcoal};
+  text-align: center;
+`;
+
+function RawDialog({ children, isAbsolute = false, ...nativeProps }) {
+    return (jsxs(Box$g, { "$isAbsolute": isAbsolute, ...nativeProps, onClick: e => e.stopPropagation(), children: [jsx(Overlay, { "$isAbsolute": isAbsolute }), jsx(Window, { "$isAbsolute": isAbsolute, children: children })] }));
+}
+const Box$g = styled.div `
+  position: ${p => (p.$isAbsolute ? 'absolute' : 'fixed')};
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow-y: auto;
+  z-index: 9000;
+`;
+const Overlay = styled.div `
+  background-color: ${p => p.theme.color.charcoal};
+  bottom: 0;
+  left: 0;
+  opacity: 0.53;
+  position: ${p => (p.$isAbsolute ? 'absolute' : 'fixed')};
+  right: 0;
+  top: 0;
+  z-index: 1;
+`;
+const Window = styled.div `
+  border-radius: 2px;
+  bottom: 100px;
+  box-shadow: 4px;
+  max-width: 32rem;
+  position: ${p => (p.$isAbsolute ? 'absolute' : 'fixed')};
+  width: calc(100% - 2 * 8px);
+  z-index: 1;
+  @media (min-width: 740px) {
+    bottom: auto;
+    min-width: 586px;
+  }
+`;
+RawDialog.displayName = 'Dialog';
+const Dialog = Object.assign(RawDialog, {
+    Action,
+    Body,
+    Title
+});
+
 function Item({ Icon, ...originalProps }) {
     const icon = useMemo(() => (Icon ? jsx(Icon, { size: 20 }) : undefined), [Icon]);
     const hasIcon = useMemo(() => Boolean(Icon), [Icon]);
@@ -22207,7 +22307,7 @@ const InputGroup = styled.div `
   }
 `;
 
-function DatePicker({ baseContainer, className, defaultValue, disabled = false, error, isCompact = false, isEndDate = false, isErrorMessageHidden = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+function DatePicker({ baseContainer, className, defaultValue, disabled = false, error, isCompact = false, isEndDate = false, isErrorMessageHidden = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, isUndefinedWhenDisabled = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     /* eslint-disable no-null/no-null */
     const boxRef = useRef(null);
     const dateInputRef = useRef(null);
@@ -22327,7 +22427,7 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
         isCalendarPickerOpenRef.current = true;
         forceUpdate();
     }, [forceUpdate]);
-    useFieldUndefineEffect(disabled, onChange, handleDisable);
+    useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange, handleDisable);
     useClickOutsideEffect(boxRef, closeCalendarPicker, baseContainer);
     useEffect(() => {
         if (!hasMountedRef.current) {
@@ -22576,7 +22676,7 @@ var DateRangePosition;
     DateRangePosition["START"] = "START";
 })(DateRangePosition || (DateRangePosition = {}));
 
-function DateRangePicker({ baseContainer, defaultValue, disabled = false, error, isCompact = false, isErrorMessageHidden = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
+function DateRangePicker({ baseContainer, defaultValue, disabled = false, error, isCompact = false, isErrorMessageHidden = false, isHistorical = false, isLabelHidden = false, isLight = false, isStringDate = false, isUndefinedWhenDisabled = false, label, minutesRange = 15, onChange, withTime = false, ...nativeProps }) {
     /* eslint-disable no-null/no-null */
     const startDateInputRef = useRef(null);
     const startTimeInputRef = useRef(null);
@@ -22773,7 +22873,7 @@ function DateRangePicker({ baseContainer, defaultValue, disabled = false, error,
         isRangeCalendarPickerOpenRef.current = true;
         forceUpdate();
     }, [forceUpdate]);
-    useFieldUndefineEffect(disabled, onChange, handleDisable);
+    useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange, handleDisable);
     useClickOutsideEffect([endDateInputRef, startDateInputRef], closeRangeCalendarPicker, baseContainer);
     useEffect(() => {
         if (!hasMountedRef.current) {
@@ -32448,5 +32548,5 @@ function useNewWindow() {
     return contextValue;
 }
 
-export { Accent, Button, Checkbox, CoordinatesFormat, CoordinatesInput, DatePicker, DateRangePicker, Dropdown, Field$2 as Field, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SimpleTable, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, noop, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
+export { Accent, Button, Checkbox, CoordinatesFormat, CoordinatesInput, DatePicker, DateRangePicker, Dialog, Dropdown, Field$2 as Field, Fieldset, FormikCheckbox, FormikCoordinatesInput, FormikDatePicker, FormikDateRangePicker, FormikEffect, FormikMultiCheckbox, FormikMultiRadio, FormikMultiSelect, FormikNumberInput, FormikSearch, FormikSelect, FormikTextInput, FormikTextarea, GlobalStyle, index as Icon, IconButton, Label, Legend, MultiCheckbox, MultiRadio, MultiSelect, MultiZoneEditor, NewWindow, NewWindowContext, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SimpleTable, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, noop, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
 //# sourceMappingURL=index.js.map