@mtes-mct/monitor-ui 5.7.1 → 5.8.1

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+# [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)
+
+
+### Bug Fixes
+
+* **components:** type all allowed features in NewWindow ([1883816](https://github.com/MTES-MCT/monitor-ui/commit/18838169cc7a642c0e0d6e12fc833c23f5c69416))
+
 # [5.7.0](https://github.com/MTES-MCT/monitor-ui/compare/v5.6.0...v5.7.0) (2023-05-03)
 
 

package/components/NewWindow.d.ts

@@ -19,7 +19,7 @@ export type NewWindowProps = {
     }> | undefined;
     name?: string | undefined;
     onBlock?: ((a: null) => Promisable<void>) | undefined;
-    onChangeFocus?: ((visibility: 'hidden' | 'visible') => Promisable<void>) | undefined;
+    onChangeFocus?: ((isFocused: boolean) => Promisable<void>) | undefined;
     onOpen?: ((window: Window) => Promisable<void>) | undefined;
     onUnload?: ((a: null) => Promisable<void>) | undefined;
     shouldHaveFocus?: boolean | undefined;

package/elements/Table/SimpleTable.d.ts

@@ -0,0 +1,8 @@
+export declare const SimpleTable: {
+    BodyTr: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {}, never>;
+    Head: import("styled-components").StyledComponent<"thead", import("styled-components").DefaultTheme, {}, never>;
+    SortContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+    Table: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
+    Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {}, never>;
+    Th: import("styled-components").StyledComponent<"th", 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/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

@@ -21,6 +21,7 @@ export { Label } from './elements/Label';
 export { Legend } from './elements/Legend';
 export { Tag } from './elements/Tag';
 export { TagGroup } from './elements/TagGroup';
+export { SimpleTable } from './elements/Table/SimpleTable';
 export { Search } from './fields/Search';
 export { Checkbox } from './fields/Checkbox';
 export { DatePicker } from './fields/DatePicker';

package/index.js

@@ -2269,10 +2269,10 @@ class NewWindow extends PureComponent {
         this.setState({ mounted: true });
         this.window?.addEventListener('beforeunload', this.beforeUnloadListener, { capture: true });
         this.window?.addEventListener('blur', () => {
-            onChangeFocus('hidden');
+            onChangeFocus(false);
         });
         this.window?.addEventListener('focus', () => {
-            onChangeFocus('visible');
+            onChangeFocus(true);
         });
     }
     componentDidUpdate(prevProps) {
@@ -3331,6 +3331,80 @@ const TagGroup = styled.div `
   gap: 8px;
 `;
 
+const Table = styled.table `
+  width: 100%;
+  table-layout: auto;
+  overflow: auto;
+  border-collapse: separate;
+`;
+const Head = styled.thead `
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  th:first-child {
+    border-left: 1px solid ${p => p.theme.color.lightGray};
+  }
+`;
+const SortContainer = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: default;
+
+  &.cursor-pointer {
+    cursor: pointer;
+  }
+`;
+const Th = styled.th `
+  background-color: ${p => p.theme.color.gainsboro};
+  border-top: 1px solid ${p => p.theme.color.lightGray};
+  border-bottom: 1px solid ${p => p.theme.color.lightGray};
+  border-right: 1px solid ${p => p.theme.color.lightGray};
+  color: ${p => p.theme.color.slateGray};
+  font-size: 13px;
+  font-weight: 500;
+  padding: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const BodyTr = styled.tr `
+  :hover {
+    background-color: ${p => p.theme.color.blueYonder[25]};
+  }
+  td:first-child {
+    border-left: 1px solid ${p => p.theme.color.lightGray};
+  }
+
+  td:nth-child(10) {
+    text-align: center;
+  }
+  td:nth-child(11) {
+    text-align: center;
+  }
+`;
+const Td = styled.td `
+  font-size: 13px;
+  font-weight: 500;
+  color: ${p => p.theme.color.gunMetal};
+  text-align: left;
+  border-bottom: 1px solid ${p => p.theme.color.lightGray};
+  border-right: 1px solid ${p => p.theme.color.lightGray};
+  overflow: hidden;
+  padding: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const SimpleTable = {
+    BodyTr,
+    Head,
+    SortContainer,
+    Table,
+    Td,
+    Th
+};
+
 // eslint-lint-disable-next-line @typescript-eslint/naming-convention
 class HTTPError extends Error {
     constructor(response, request, options) {
@@ -22133,7 +22207,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);
@@ -22253,7 +22327,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) {
@@ -22502,7 +22576,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);
@@ -22699,7 +22773,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) {
@@ -32374,5 +32448,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, 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, 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