@mtes-mct/monitor-ui 7.2.1 → 7.3.1

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [7.3.0](https://github.com/MTES-MCT/monitor-ui/compare/v7.2.1...v7.3.0) (2023-06-09)
+
+
+### Features
+
+* **components:** clean naming for export ([83f3b1b](https://github.com/MTES-MCT/monitor-ui/commit/83f3b1bb3eec48b01abdea7444b6c8e2ca0f9c56))
+* **components:** create SideMenu component ([1ba4358](https://github.com/MTES-MCT/monitor-ui/commit/1ba435820145634ce8449612d2f4e7ff63d894da))
+
+## [7.2.1](https://github.com/MTES-MCT/monitor-ui/compare/v7.2.0...v7.2.1) (2023-06-08)
+
+
+### Bug Fixes
+
+* **elements:** unbold and italicize FieldError ([4ba529e](https://github.com/MTES-MCT/monitor-ui/commit/4ba529e97e1f90a7ea3beff4bf479081687c8e5f))
+
 # [7.2.0](https://github.com/MTES-MCT/monitor-ui/compare/v7.1.0...v7.2.0) (2023-06-05)
 
 

package/components/SideMenu/Button.d.ts

@@ -0,0 +1,10 @@
+import { type IconButtonProps } from '../../elements/IconButton';
+import type { IconProps } from '../../types';
+import type { FunctionComponent } from 'react';
+type SideMenuButtonProps = IconButtonProps & {
+    Icon: FunctionComponent<IconProps>;
+    isActive: boolean;
+    title: string;
+};
+export declare function Button({ Icon, isActive, title, ...originalProps }: SideMenuButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/SideMenu/index.d.ts

@@ -0,0 +1,12 @@
+import { Button } from './Button';
+import type { ReactNode } from 'react';
+export type SideMenuProps = {
+    children: ReactNode;
+};
+export declare function Menu({ children }: SideMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Menu {
+    var displayName: string;
+}
+export declare const SideMenu: typeof Menu & {
+    Button: typeof Button;
+};

package/index.d.ts

@@ -14,6 +14,7 @@ export { Dialog } from './components/Dialog';
 export { Dropdown } from './components/Dropdown';
 export { NewWindow } from './components/NewWindow';
 export { NotificationEvent, Notifier } from './components/Notifier';
+export { SideMenu } from './components/SideMenu';
 export { SingleTag } from './components/SingleTag';
 export { Button } from './elements/Button';
 export { Field } from './elements/Field';
@@ -73,6 +74,7 @@ export type { DialogProps } from './components/Dialog';
 export type { DropdownProps, DropdownItemProps } from './components/Dropdown';
 export type { NewWindowProps } from './components/NewWindow';
 export type { NotifierProps } from './components/Notifier';
+export type { SideMenuProps } from './components/SideMenu';
 export type { SingleTagProps } from './components/SingleTag';
 export type { ButtonProps } from './elements/Button';
 export type { FieldProps } from './elements/Field';

package/index.js

@@ -2645,7 +2645,7 @@ const ICON_SIZE = {
     [Size.NORMAL]: 20,
     [Size.SMALL]: 12
 };
-function Button({ accent = Accent.PRIMARY, children, className, Icon, isFullWidth = false, onClick, size = Size.NORMAL, type = 'button', withUnpropagatedClick = false, ...nativeProps }) {
+function Button$1({ accent = Accent.PRIMARY, children, className, Icon, isFullWidth = false, onClick, size = Size.NORMAL, type = 'button', withUnpropagatedClick = false, ...nativeProps }) {
     const handleClick = useCallback((event) => {
         if (withUnpropagatedClick) {
             stopMouseEventPropagation(event);
@@ -2855,6 +2855,55 @@ const TertiaryButton = styled.button `
   }
 `;
 
+function Button({ Icon, isActive, title, ...originalProps }) {
+    return jsx(MenuButton, { "$isActive": isActive, Icon: Icon, iconSize: 26, role: "menuitem", title: title, ...originalProps });
+}
+const MenuButton = styled(IconButton) `
+  animation: none;
+  background: ${p => (p.$isActive ? p.theme.color.blueGray[100] : 'none')};
+  border: 0;
+  border-bottom: solid 0.5px ${p => p.theme.color.slateGray};
+  color: ${p => (p.$isActive ? p.theme.color.white : p.theme.color.gainsboro)};
+  padding: 18px;
+
+  :hover,
+  :focus {
+    background: ${p => (p.$isActive ? p.theme.color.blueGray[100] : 'rgba(255, 255, 255, 0.125)')};
+    border: 0;
+    border: none;
+    color: ${p => p.theme.color.white};
+  }
+
+  :first-child {
+    border-top: solid 0.5px ${p => p.theme.color.slateGray};
+
+    :hover {
+      border: none;
+    }
+  }
+`;
+
+function Menu({ children }) {
+    return jsx(Wrapper, { role: "menu", children: children });
+}
+const Wrapper = styled.div `
+  background-color: ${p => p.theme.color.charcoal};
+  box-sizing: border-box;
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+  width: 64px;
+  padding: 64px 0 0;
+
+  * {
+    box-sizing: border-box;
+  }
+`;
+Menu.displayName = 'SideMenu';
+const SideMenu = Object.assign(Menu, {
+    Button
+});
+
 /**
  * Internal component used to wrap SVG icon components
  */
@@ -26084,7 +26133,7 @@ function MultiZoneEditor({ addButtonLabel, className, defaultValue = [], disable
         setZones(defaultValue);
     }, [defaultValue]);
     useFieldUndefineEffect(disabled, onChange, handleDisable);
-    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, isLegendHidden: isLabelHidden, legend: label, style: style, children: [jsx(Button, { accent: Accent.SECONDARY, disabled: disabled || isAddButtonDisabled, Icon: Plus, isFullWidth: true, onClick: addZone, children: addButtonLabel }), jsx(Fragment, { children: zones.map((zone, index) => (
+    return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, isLegendHidden: isLabelHidden, legend: label, style: style, children: [jsx(Button$1, { accent: Accent.SECONDARY, disabled: disabled || isAddButtonDisabled, Icon: Plus, isFullWidth: true, onClick: addZone, children: addButtonLabel }), jsx(Fragment, { children: zones.map((zone, index) => (
                 // eslint-disable-next-line react/no-array-index-key
                 jsxs(Row, { children: [jsxs(ZoneBox, { "$isLight": isLight, children: [zone[labelPropName], jsxs(Link, { onClick: () => centerZone(zone), children: [jsx(SelectRectangle, {}), jsx("span", { children: "Centrer sur la carte" })] })] }), jsx(IconButton, { accent: Accent.SECONDARY, Icon: Edit, onClick: () => editZone(index, zone) }), jsx(IconButton, { accent: Accent.SECONDARY, "aria-label": "Supprimer cette zone", Icon: Delete, onClick: () => deleteZone(index) })] }, `zone-${index}`))) }), hasError && jsx(FieldError, { children: controlledError })] }));
 }
@@ -35537,5 +35586,5 @@ function logSoftError({ context = {}, isSideWindowError = false, message, origin
     }
 }
 
-export { Accent, Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DatePicker, DateRangePicker, Dialog, Dropdown, Field$2 as Field, FieldError, 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, NotificationEvent, Notifier, 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, logSoftError, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
+export { Accent, Button$1 as Button, Checkbox, CoordinatesFormat, CoordinatesInput, CustomSearch, DatePicker, DateRangePicker, Dialog, Dropdown, Field$2 as Field, FieldError, 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, NotificationEvent, Notifier, NumberInput, OPENLAYERS_PROJECTION, OnlyFontGlobalStyle, Search, Select, SideMenu, SimpleTable, SingleTag, Size, THEME, Tag, TagBullet, TagGroup, TextInput, Textarea, ThemeProvider, WSG84_PROJECTION, coordinatesAreDistinct, customDayjs, getCoordinates, getLocalizedDayjs, getPseudoRandomString, getUtcizedDayjs, isNumeric, logSoftError, stopMouseEventPropagation, useClickOutsideEffect, useFieldControl, useForceUpdate, useKey, useNewWindow, usePrevious };
 //# sourceMappingURL=index.js.map