@mtes-mct/monitor-ui 1.1.1 → 1.3.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [1.2.0](https://github.com/MTES-MCT/monitor-ui/compare/v1.1.1...v1.2.0) (2022-11-24)
+
+
+### Bug Fixes
+
+* **build:** fix dist npm exports path ([#17](https://github.com/MTES-MCT/monitor-ui/issues/17)) ([aad4c07](https://github.com/MTES-MCT/monitor-ui/commit/aad4c07b160ec38fcad68fbfcb8055c971c0f5ed))
+
+
+### Features
+
+* **formiks:** add FormikDatePicker ([#16](https://github.com/MTES-MCT/monitor-ui/issues/16)) ([a4db006](https://github.com/MTES-MCT/monitor-ui/commit/a4db006c1f72a39fd7ea8dc2722399783c44826b))
+* **formiks:** add FormikDateRangePicker ([#15](https://github.com/MTES-MCT/monitor-ui/issues/15)) ([e40e53d](https://github.com/MTES-MCT/monitor-ui/commit/e40e53d7c15e54244bde801fd42d57c9e7033947))
+
+## [1.1.1](https://github.com/MTES-MCT/monitor-ui/compare/v1.1.0...v1.1.1) (2022-11-24)
+
+
+### Bug Fixes
+
+* **semantic-release:** publish to NPM ([#12](https://github.com/MTES-MCT/monitor-ui/issues/12)) ([2c42952](https://github.com/MTES-MCT/monitor-ui/commit/2c42952dcc8bbc3983aee55f784e0ca082760d0f))
+
 # [1.1.0](https://github.com/MTES-MCT/monitor-ui/compare/v1.0.0...v1.1.0) (2022-11-24)
 
 

package/README.md

@@ -2,9 +2,22 @@
 
 [![License][img-license]][lnk-license]
 [![CI Status][img-github]][lnk-github]
-<!-- [![NPM Version][img-npm]][lnk-npm] -->
+[![NPM Version][img-npm]][lnk-npm]
 
-> Common React UI components and styles for Monitorfish and Monitorenv..
+> Common React components, hooks, utilities and CSS stylesheets
+> for [Monitorfish][lnk-github-monitorfish] and [Monitorenv][lnk-github-monitorenv].
+
+## Usage
+
+```sh
+npm i -E @mtes-mct/monitor-ui
+```
+
+or
+
+```sh
+yarn add -E @mtes-mct/monitor-ui
+```
 
 ## Documentation
 
@@ -18,8 +31,10 @@ Please read the [contributing document](CONTRIBUTING.md) for setup and contribut
 
 [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
+[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-github-monitorenv]: https://github.com/MTES-MCT/monitorenv
+[lnk-github-monitorfish]: https://github.com/MTES-MCT/monitorfish
 [lnk-license]: https://github.com/MTES-MCT/monitor-ui/blob/main/LICENSE
-[lnk-npm]: https://www.npmjs.com/package/@MTES-MCT/monitor-ui
+[lnk-npm]: https://www.npmjs.com/package/@mtes-mct/monitor-ui
 [lnk-storybook]: https://mtes-mct.github.io/monitor-ui/

package/assets/rsuite-override.css

@@ -0,0 +1,708 @@
+/* variables */
+:root {
+  /* colors */
+  --gunMetal: #282f3e;
+  --charcoal: #3b4559;
+  --slateGray: #707785;
+  --lightGray: #cccfd6;
+  --gainsboro: #e5e5eb;
+  --cultured: #f7f7fa;
+  --white: #ffffff;
+
+  --steel-blue: #5e87ad;
+  --steel-blue-25: #d6e1ea;
+  --blue-jeans: #42a7ff;
+  --blue-jeans-25: #cfe9ff;
+
+  --mediumSeaGreen: #29b361;
+  --golden-poppy: #fac11a;
+  --maximum-red: #e1000f;
+
+  --cadet-grey: #8e9a9f;
+  --grullo: #b89b8c;
+  --copper-red: #cf6a4e;
+  --chinese-red: #a13112;
+
+  --powder-blue: #9ed7d9;
+  --wheat: #edd6a4;
+  --opal: #a5bcc0;
+
+  /* text */
+  --rs-text-primary: var(--gunMetal);
+
+  /* btn vars */
+  --rs-btn-primary-text: var(--white);
+  --rs-btn-primary-bg: var(--charcoal);
+  --rs-btn-primary-hover-bg: var(--steel-blue);
+  --rs-btn-link-text: var(--charcoal);
+  --rs-btn-ghost-text: var(--charcoal);
+  --rs-btn-ghost-border: var(--charcoal);
+  --rs-btn-ghost-hover-border: var(--steel-blue);
+  --rs-btn-ghost-hover-text: var(--steel-blue);
+
+  --rs-iconbtn-primary-addon: var(--charcoal);
+  --rs-iconbtn-primary-activated-addon: var(--steel-blue);
+
+  --rs-btn-primary-active-bg: var(--steel-blue);
+  --rs-iconbtn-primary-pressed-addon: var(--steel-blue);
+
+  /* Checkbox vars */
+  --rs-checkbox-disabled-bg: var(--white);
+
+  /* input vars */
+  --rs-input-bg: var(--gainsboro);
+
+  --rs-menuitem-active-text: var(--steel-blue);
+
+  /* tags */
+  --rs-tag-bg: var(--gainsboro);
+}
+
+/*
+  Default font size should be 16px instead of 13px as stated in Rsuite CSS,
+  so we need to apply this fix in order to have consistent 16px-based rems
+  while overriding both Rsuite CSS and mini.css.
+*/
+html {
+  font-size: 16px;
+}
+
+/*
+  We reduce the default font-size to 13px for the app.
+ */
+html * {
+  font-size: 0.8125rem;
+}
+
+label {
+  color: var(--slateGray);
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.rs-input {
+  border-radius: 0;
+  color: var(--gunMetal);
+  padding-left: 5px;
+}
+
+.rs-input.ghost {
+  background-color: var(--white);
+}
+
+/* rs input textarea */
+textarea {
+  padding: 5px;
+}
+
+.rs-input-group,
+.rs-input-group:not(.rs-input-group-inside) .rs-auto-complete:first-child .rs-input,
+.rs-input-group:not(.rs-input-group-inside) .rs-form-control-wrapper:first-child > .rs-input,
+.rs-input-group:not(.rs-input-group-inside) .rs-picker-date:first-child .rs-picker-toggle,
+.rs-input-group:not(.rs-input-group-inside) > :first-child,
+.rs-input-group:not(.rs-input-group-inside) .rs-auto-complete:last-child .rs-input,
+.rs-input-group:not(.rs-input-group-inside) .rs-form-control-wrapper:last-child > .rs-input,
+.rs-input-group:not(.rs-input-group-inside) .rs-picker-date:last-child .rs-picker-toggle,
+.rs-input-group:not(.rs-input-group-inside) > :last-child {
+  border-radius: 0;
+}
+
+.rs-input-group-addon.primary {
+  background-color: var(--rs-btn-primary-bg);
+}
+
+.rs-input-group.rs-input-group-inside .rs-input-group-addon {
+  padding: 8px 13px 8px 11px;
+}
+
+/* button */
+.rs-ripple-pond {
+  height: 30px;
+}
+
+.rs-btn {
+  line-height: 18px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  border-radius: 0;
+}
+
+.rs-btn-sm {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.rs-btn-icon-with-text.rs-btn.rs-btn-icon-placement-left {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.rs-btn-icon-with-text.rs-btn-sm.rs-btn-icon-placement-left {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-left: 26px;
+}
+
+.rs-btn-icon.rs-btn {
+  padding: 7px;
+}
+
+.rs-btn-icon.rs-btn-sm {
+  padding: 2px;
+}
+
+.rs-btn-icon-with-text.rs-btn {
+  line-height: 18px;
+}
+
+.rs-btn-icon-with-text.rs-btn > .rs-icon {
+  width: 30px;
+  height: 30px;
+  padding: 8px;
+}
+
+.rs-btn-icon-with-text.rs-btn-sm > .rs-icon {
+  width: 24px;
+  height: 24px;
+}
+
+/* checkbox */
+.rs-checkbox-wrapper {
+  top: 8px !important;
+}
+
+.rs-checkbox-checker {
+  padding-bottom: 0;
+  padding-left: 36px;
+  min-height: 0px;
+}
+
+.rs-checkbox label {
+  font-weight: 500;
+}
+
+.rs-checkbox-checker > label {
+  font-size: 13px;
+  color: var(--gunMetal);
+}
+
+.rs-checkbox-wrapper .rs-checkbox-inner::before {
+  border: 2px solid var(--lightGray);
+  background: var(--gainsboro) 0% 0% no-repeat padding-box;
+  border-radius: 0px;
+}
+
+.rs-checkbox-wrapper .rs-checkbox-inner::after {
+  border-color: var(--lightGray);
+  border-width: 0 0 2px;
+  -webkit-transform: rotate(0deg) scale(1);
+  transform: rotate(0deg) scale(1);
+  width: 8px;
+  margin-top: -1px;
+  margin-left: 5px;
+}
+
+.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::before {
+  background-color: var(--charcoal);
+  border-color: var(--charcoal);
+}
+
+.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::after {
+  border-color: var(--white);
+  border-width: 0 0 2px;
+  -webkit-transform: rotate(0deg) scale(1);
+  transform: rotate(0deg) scale(1);
+  width: 8px;
+  margin-top: 0px;
+  margin-left: 6px;
+}
+
+.rs-checkbox-disabled:not(.rs-checkbox-checked):not(.rs-checkbox-indeterminate)
+  .rs-checkbox-wrapper
+  .rs-checkbox-inner:before {
+  border-color: var(--lightGray);
+}
+
+.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::before {
+  border-color: var(--charcoal);
+  background-color: var(--charcoal);
+}
+
+label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
+  border-color: var(--steel-blue);
+  background: var(--steel-blue-25) 0% 0% no-repeat padding-box;
+}
+
+.rs-checkbox-checked label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
+  border-color: var(--steel-blue);
+  background: var(--steel-blue) 0% 0% no-repeat padding-box;
+}
+
+.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::after {
+  border: solid var(--white);
+  border-width: 0 2px 2px 0;
+  margin-top: 3px !important;
+  margin-left: 6px !important;
+}
+
+.checkbox-hidden > div > label > .rs-checkbox-wrapper {
+  opacity: 0 !important;
+  margin-left: -40px;
+  position: inherit;
+}
+
+/* radio */
+
+.rs-radio-group {
+  border-radius: 2px;
+}
+
+.rs-radio-wrapper::before,
+.rs-radio-wrapper .rs-radio-inner::before,
+.rs-radio-wrapper {
+  width: 13px;
+  height: 13px;
+}
+
+.rs-radio-wrapper .rs-radio-inner::before {
+  background: var(--gainsboro);
+  border-width: 2.5px;
+}
+
+.rs-radio-checked .rs-radio-wrapper .rs-radio-inner::before {
+  background: var(--gainsboro);
+  border-color: var(--charcoal);
+}
+
+/* center of radio button when checked */
+.rs-radio-wrapper .rs-radio-inner::after {
+  background: var(--charcoal);
+  width: 8px;
+  height: 8px;
+  margin-top: 5px;
+  margin-left: 5px;
+}
+
+.rs-radio.rs-radio-disabled .rs-radio-wrapper .rs-radio-inner::after {
+  background: var(--lightGray);
+}
+
+.rs-radio.rs-radio-disabled .rs-radio-inner:before {
+  background: var(--white);
+  border-color: var(--lightGray);
+}
+
+.rs-radio-checker > label {
+  color: var(--charcoal);
+  font-weight: 500;
+  line-height: 17px;
+}
+
+/* form */
+.rs-form:not(.rs-form-inline) .rs-form-group:not(:last-child) {
+  margin-bottom: 32px;
+}
+
+/* dropdown */
+
+.rs-dropdown-menu {
+  border-radius: 0;
+  padding: 0;
+}
+
+.rs-dropdown-item {
+  padding-top: 0px;
+  padding-bottom: 0px;
+  line-height: 38px;
+}
+
+.rs-dropdown-item-with-icon > svg {
+  vertical-align: text-bottom;
+}
+
+.rs-dropdown-item:not(:last-child) {
+  border-bottom: 1px solid var(--lightGray);
+}
+
+/* Tags */
+
+.rs-tag-default {
+  font-weight: 500;
+}
+
+.rs-tag-closable.rs-tag-md {
+  padding-right: 32px;
+}
+
+.rs-tag-md {
+  font-size: 13px;
+  line-height: 18px;
+  border-radius: 0px;
+  padding-top: 1px;
+  padding-bottom: 3px;
+}
+
+/* TagPicker */
+.rs-picker-tag .rs-tag {
+  max-width: calc(100% - 30px) !important;
+  background-color: var(--white);
+}
+
+.rs-tag-md .rs-tag-icon-close {
+  padding: 6px 6px;
+}
+
+.rs-tag-icon-close.rs-btn-close {
+  border-left: 1px solid var(--lightGray);
+}
+
+.rs-picker-tag .rs-picker-toggle.rs-btn-sm ~ .rs-picker-tag-wrapper .rs-tag {
+  margin-top: 3px;
+}
+
+/* */
+.rs-modal-lg {
+  width: 1300px;
+}
+
+.rs-slider-mark {
+  font-size: 13px;
+  color: var(--slateGray);
+}
+
+.rs-slider {
+  position: absolute;
+  width: 341px;
+  margin-top: -19px;
+}
+
+.rs-slider-bar {
+  height: 0;
+}
+
+.rs-slider-progress-bar {
+  height: 2px;
+  background: none;
+}
+
+.rs-slider-graduator > ul > li::before {
+  visibility: hidden;
+}
+
+.rs-slider-graduator > ul > li:last-child::after,
+.rs-slider-graduator > ul > li::before {
+  top: -3px;
+  border: none;
+}
+
+.rs-slider-handle::before {
+  background: var(--lightGray);
+  border: unset;
+  top: -6px;
+  margin-left: -5px;
+  width: 16px;
+  height: 16px;
+}
+
+.rs-slider-graduator {
+  margin-left: -5px;
+  margin-top: -10px;
+}
+
+.rs-slider-graduated > div:nth-child(2)::before {
+  background: #9095a2;
+  z-index: 99;
+}
+
+.rs-slider-graduated > div:nth-child(2) {
+  z-index: 9999;
+}
+
+.rs-slider-graduated > div:nth-child(3)::before {
+  background: var(--charcoal);
+  z-index: 99;
+}
+
+.rs-picker-menu {
+  border-radius: 2px;
+  z-index: 9999 !important;
+}
+
+.rs-picker-default:not(.rs-picker-disabled) .rs-btn:hover,
+.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle:hover,
+.rs-picker-default:not(.rs-picker-disabled) .rs-btn.active,
+.rs-picker-default:not(.rs-picker-disabled) .rs-picker-toggle.active {
+  border-color: var(--slateGray) !important;
+}
+
+.rs-table:not(.rs-table-column-resizing) .rs-table-cell-header .rs-table-cell:hover ~ .rs-table-column-resize-spanner,
+.rs-table:not(.rs-table-column-resizing) .rs-table-column-resize-spanner:hover {
+  background-color: var(--slateGray);
+}
+
+.rs-table-column-resize-spanner::before {
+  border-color: transparent var(--slateGray) transparent transparent;
+}
+
+.rs-calendar-table-cell-is-today .rs-calendar-table-cell-content {
+  border: 1px solid var(--slateGray) !important;
+}
+
+.rs-picker-toggle.rs-btn-sm {
+  border-radius: 2px !important;
+}
+
+.rs-calendar,
+.rs-calendar-header,
+.rs-calendar-table-cell-content {
+  box-sizing: border-box !important;
+}
+
+.rs-calendar-table-cell-content {
+  border-radius: 2px !important;
+}
+
+.rs-calendar-table-cell-selected .rs-calendar-table-cell-content {
+  color: #f0f0f0;
+  border-color: var(--charcoal);
+  background-color: var(--charcoal);
+}
+
+.rs-calendar-table-cell-in-range::before {
+  background-color: #e0e0e0;
+}
+
+.rs-picker-toolbar-right-btn-ok {
+  padding: 5px 10px;
+  font-size: 13px;
+  line-height: 1.42857143;
+  border-radius: 2px;
+  color: #fff;
+  background-color: var(--charcoal);
+}
+
+.rs-picker-toolbar-right-btn-ok.rs-picker-toolbar-btn-disabled,
+.rs-picker-toolbar-right-btn-ok.rs-picker-toolbar-btn-disabled:hover,
+.rs-picker-toolbar-right-btn-ok.rs-picker-toolbar-btn-disabled:hover:active {
+  background-color: var(--charcoal);
+}
+
+.rs-picker-toolbar-right-btn-ok:not(.rs-btn-disabled):hover {
+  background-color: var(--charcoal);
+}
+
+.rs-modal-body {
+  padding: 20px 25px 0 25px !important;
+}
+
+.rs-table-body-info {
+  font-size: 13px;
+  color: var(--slateGray);
+}
+
+.rs-modal-full .rs-modal-dialog {
+  width: 100%;
+  margin-left: 0;
+}
+
+.rs-modal-content {
+  padding: 0;
+  border-radius: 2px;
+}
+
+.rs-modal-body {
+  padding: 20px 25px 20px 25px;
+  margin-top: 0;
+  max-height: 800px !important;
+  min-height: 210px !important;
+}
+
+.rs-modal-header {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  padding: 5px 14px 8px 14px;
+  background: var(--charcoal);
+}
+
+.rs-modal-header .rs-modal-title {
+  color: #f0f0f0;
+  font-size: 22px;
+  font-weight: normal;
+}
+
+.rs-table-cell-header,
+.rs-table-cell[role='columnheader'],
+.rs-table-cell-header:focus,
+.rs-table-cell[role='columnheader']:focus,
+.rs-table-cell-header:hover,
+.rs-table-cell[role='columnheader']:hover {
+  background: var(--gainsboro);
+  color: white;
+}
+
+.ghost .rs-picker-toggle.rs-btn.rs-btn-default {
+  background-color: var(--white) !important;
+}
+
+.rs-table-hover .rs-table-row-header:hover .rs-table-cell-group,
+.rs-table-hover .rs-table-row-header:hover .rs-table-cell {
+  background: var(--gainsboro);
+}
+
+.rs-table-cell[role='columnheader'] > .rs-table-cell-content {
+  color: var(--slateGray);
+}
+
+.rs-table-cell {
+  border: 1px solid #e0e0e0;
+}
+
+.rs-table-cell-content {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--gunMetal);
+  text-align: left;
+}
+
+.rs-table-cell-content > input {
+  border: none;
+  width: inherit;
+  background: none;
+  padding-left: 15px;
+  font-size: 13px;
+  font-weight: normal;
+  color: var(--gunMetal);
+}
+
+.rs-table-scrollbar-handle,
+.rs-table-scrollbar-handle:hover,
+.rs-table-scrollbar-handle:focus {
+  position: absolute;
+  background-color: #575757;
+  border-radius: 4px;
+}
+
+.rs-table-cell-content > .rs-checkbox {
+  margin-top: -10px;
+  margin-left: -10px;
+}
+
+.rs-modal-header-close {
+  background: unset;
+  right: 10px !important;
+  top: 6px !important;
+  font-size: 15px !important;
+  color: var(--gainsboro) !important;
+}
+
+/* .rs-picker-default .rs-btn,
+.rs-picker-input .rs-btn,
+.rs-picker-default .rs-picker-toggle,
+.rs-picker-input .rs-picker-toggle {
+  background: unset !important;
+} */
+
+.rs-picker-tag-wrapper {
+  padding-bottom: 0;
+}
+
+.rs-picker-input {
+  vertical-align: top;
+  border-radius: 2px;
+}
+
+.rs-picker-toggle {
+  border-radius: 2px;
+}
+
+.rs-picker-toggle-placeholder {
+  font-size: 11px;
+  color: var(--slateGray) !important;
+}
+
+.rs-picker-has-value .rs-btn .rs-picker-toggle-value,
+.rs-picker-has-value .rs-picker-toggle .rs-picker-toggle-value {
+  color: var(--gunMetal);
+  font-size: 13px;
+  font-weight: normal;
+}
+
+.rs-picker-select-menu-item.rs-picker-select-menu-item-active,
+.rs-picker-select-menu-item.rs-picker-select-menu-item-active:hover,
+.rs-picker-select-menu-item:not(.rs-picker-select-menu-item-disabled):hover,
+.rs-picker-select-menu-item.rs-picker-select-menu-item-focus,
+.rs-picker-select-menu-item {
+  color: var(--slateGray);
+  font-size: 13px;
+  font-weight: normal;
+  width: inherit;
+}
+
+.grouped .rs-picker-select-menu-item {
+  padding-left: 0px;
+}
+
+.rs-picker-select-menu-items.rs-picker-select-menu-group.rs-picker-select-menu-group-title {
+  font-size: 13px;
+  color: var(--slateGray);
+}
+
+.rs-picker-toggle-clean,
+.rs-picker-toggle-caret {
+  color: var(--slateGray);
+}
+
+.rs-picker-toggle-clean:hover {
+  padding: 4px 0px !important;
+}
+
+.rs-picker-check-menu-group[role='listitem'] {
+  height: 48px !important;
+}
+
+.rs-picker-check-menu-items .rs-picker-check-menu-group:not(:first-child) {
+  padding-top: 0px !important;
+}
+
+.rs-picker-check-menu.rs-picker-check-menu-items {
+  max-height: 200px !important;
+}
+
+.rs-table-cell-header .rs-table-cell-content {
+  padding: 10px 7px;
+}
+
+.rs-table-cell-header-icon-sort {
+  color: var(--slateGray);
+  line-height: 1.66666667;
+  position: absolute;
+  right: 9px;
+  top: 10px;
+}
+
+.rs-table-cell-header-icon-sort-asc::after {
+  color: var(--slateGray);
+}
+
+.rs-table-cell-header-icon-sort-desc::after {
+  color: var(--slateGray);
+}
+
+.rs-table-hover .rs-table-row:not(.rs-table-row-header):hover,
+.rs-table-hover .rs-table-row:hover .rs-table-cell-group,
+.rs-table-hover .rs-table-row:hover .rs-table-cell {
+  /* blueYonder 25 */
+  background: #D4DDE7 !important;
+}
+
+.rs-table-cell,
+.rs-table-cell-group,
+.rs-table-row {
+  -webkit-transition: background-color 0.1s linear !important;
+  transition: background-color 0.1s linear !important;
+}
+
+.rs-table-row-expanded {
+  height: 100px !important;
+  background: white !important;
+}

package/formiks/FormikDatePicker.d.ts

@@ -0,0 +1,5 @@
+import type { DatePickerProps } from '../fields/DatePicker';
+export declare type FormikDatePickerProps = Omit<DatePickerProps, 'onChange'> & {
+    name: string;
+};
+export declare function FormikDatePicker({ name, ...originalProps }: FormikDatePickerProps): JSX.Element;

package/formiks/FormikDateRangePicker.d.ts

@@ -0,0 +1,5 @@
+import type { DateRangePickerProps } from '../fields/DateRangePicker';
+export declare type FormikDateRangePickerProps = Omit<DateRangePickerProps, 'onChange'> & {
+    name: string;
+};
+export declare function FormikDateRangePicker({ name, ...originalProps }: FormikDateRangePickerProps): JSX.Element;

package/index.d.ts

@@ -3,6 +3,8 @@ export { THEME } from './theme';
 export { DateRangePicker } from './fields/DateRangePicker';
 export { DatePicker } from './fields/DatePicker';
 export { Select } from './fields/Select';
+export { FormikDatePicker } from './formiks/FormikDatePicker';
+export { FormikDateRangePicker } from './formiks/FormikDateRangePicker';
 export { FormikEffect } from './formiks/FormikEffect';
 export { FormikSelect } from './formiks/FormikSelect';
 export { ThemeProvider } from './ThemeProvider';
@@ -10,5 +12,7 @@ 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 { FormikDatePickerProps } from './formiks/FormikDatePicker';
+export type { FormikDateRangePickerProps } from './formiks/FormikDateRangePicker';
 export type { FormikEffectProps } from './formiks/FormikEffect';
 export type { FormikSelectProps } from './formiks/FormikSelect';

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@mtes-mct/monitor-ui",
   "description": "Common React UI components and styles for Monitorfish and Monitorenv.",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "license": "AGPL-3.0",
   "engines": {
     "node": "18",
     "npm": "8"
   },
-  "browser": "./src/index.ts",
   "dependencies": {
     "@babel/runtime": "7.19.4",
     "date-fns": "2.29.3",
@@ -37,7 +36,7 @@
   "bugs": {
     "url": "https://github.com/MTES-MCT/monitor-ui/issues"
   },
-  "exports": "./index.js",
+  "exports": "./src/index.js",
   "homepage": "https://mtes-mct.github.io/monitor-ui/",
   "publishConfig": {
     "access": "public",

package/src/formiks/FormikDatePicker.js

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

package/src/formiks/FormikDatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormikDatePicker.js","sources":["../../../src/formiks/FormikDatePicker.tsx"],"sourcesContent":["import { useField } from 'formik'\nimport { useEffect } from 'react'\n\nimport { DatePicker } from '../fields/DatePicker'\n\nimport type { DatePickerProps } from '../fields/DatePicker'\n\nexport type FormikDatePickerProps = Omit<DatePickerProps, 'onChange'> & {\n  name: string\n}\nexport function FormikDatePicker({ name, ...originalProps }: FormikDatePickerProps) {\n  const [, , helpers] = useField(name)\n  const { setValue } = helpers\n\n  // We don't include `setValues` in  `useEffect()` dependencies\n  // both because it is useless and it will trigger infinite hook calls\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => () => setValue(undefined), [])\n\n  return <DatePicker onChange={setValue} {...originalProps} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAUM,SAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,GAAG,aAAa,EAAyB,EAAA;IAChF,MAAM,KAAK,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;AACpC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;;;;AAK5B,IAAA,SAAS,CAAC,MAAM,MAAM,QAAQ,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAA;IAE9C,OAAOA,GAAA,CAAC,UAAU,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAA,GAAM,aAAa,EAAA,CAAI,CAAA;AAC9D;;;;"}

package/src/formiks/FormikDateRangePicker.js

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

package/src/formiks/FormikDateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormikDateRangePicker.js","sources":["../../../src/formiks/FormikDateRangePicker.tsx"],"sourcesContent":["import { useField } from 'formik'\nimport { useEffect } from 'react'\n\nimport { DateRangePicker } from '../fields/DateRangePicker'\n\nimport type { DateRangePickerProps } from '../fields/DateRangePicker'\n\nexport type FormikDateRangePickerProps = Omit<DateRangePickerProps, 'onChange'> & {\n  name: string\n}\nexport function FormikDateRangePicker({ name, ...originalProps }: FormikDateRangePickerProps) {\n  const [, , helpers] = useField(name)\n  const { setValue } = helpers\n\n  // We don't include `setValues` in  `useEffect()` dependencies\n  // both because it is useless and it will trigger infinite hook calls\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => () => setValue(undefined), [])\n\n  return <DateRangePicker onChange={setValue} {...originalProps} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAUM,SAAU,qBAAqB,CAAC,EAAE,IAAI,EAAE,GAAG,aAAa,EAA8B,EAAA;IAC1F,MAAM,KAAK,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;AACpC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;;;;AAK5B,IAAA,SAAS,CAAC,MAAM,MAAM,QAAQ,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAA;IAE9C,OAAOA,GAAA,CAAC,eAAe,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAA,GAAM,aAAa,EAAA,CAAI,CAAA;AACnE;;;;"}

package/src/index.js

@@ -4,6 +4,8 @@ export { THEME } from './theme.js';
 export { DateRangePicker } from './fields/DateRangePicker/index.js';
 export { DatePicker } from './fields/DatePicker/index.js';
 export { Select } from './fields/Select.js';
+export { FormikDatePicker } from './formiks/FormikDatePicker.js';
+export { FormikDateRangePicker } from './formiks/FormikDateRangePicker.js';
 export { FormikEffect } from './formiks/FormikEffect.js';
 export { FormikSelect } from './formiks/FormikSelect.js';
 export { ThemeProvider } from './ThemeProvider.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":";;;;;;;;;;"}