goblin-magic 1.7.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goblin-magic",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "goblin-magic",
   "author": "Epsitec SA",
   "contributors": [

package/widgets/calendar-menu/widget.js

@@ -17,7 +17,7 @@ class CalendarMenu extends Widget {
   };
 
   render() {
-    const {allowEmpty, value, onChange, children} = this.props;
+    const {allowEmpty, selectWeek, value, onChange, children} = this.props;
     return (
       <Menu>
         {children}
@@ -26,6 +26,7 @@ class CalendarMenu extends Widget {
             {(menu) => (
               <CalendarMenuContent
                 allowEmpty={allowEmpty}
+                selectWeek={selectWeek}
                 value={value || DateConverters.getNowCanonical()}
                 onChange={(date) => this.handleCalendarChange(date, menu)}
                 onCancel={menu.close}

package/widgets/calendar-menu-content/widget.js

@@ -52,6 +52,7 @@ class CalendarMenuContent extends Widget {
       >
         <SmallCalendar
           ref={this.calendarRef}
+          selectWeek={this.props.selectWeek}
           date={this.state.date}
           onDateChange={this.handleDateChange}
           onDayClick={this.handleDayClick}

package/widgets/checkbox-menu-items/styles.js

@@ -0,0 +1,28 @@
+export default function styles() {
+  const items = {
+    padding: '3px 3px 2px 3px',
+  };
+
+  const item = {
+    display: 'flex',
+    flexDirection: 'row',
+  };
+
+  const hr = {
+    width: '100%',
+    margin: 0,
+  };
+
+  const buttons = {
+    display: 'flex',
+    flexDirection: 'row',
+    padding: '1px',
+  };
+
+  return {
+    items,
+    item,
+    hr,
+    buttons,
+  };
+}

package/widgets/checkbox-menu-items/widget.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import MagicButton from '../magic-button/widget.js';
+import Icon from '@mdi/react';
+import {
+  mdiCheckboxBlankOutline,
+  mdiCheckboxIntermediateVariant,
+  mdiCheckboxMarked,
+} from '@mdi/js';
+import MagicCheckbox from '../magic-checkbox/widget.js';
+import Menu from '../menu/widget.js';
+import withC from 'goblin-laboratory/widgets/connect-helpers/with-c.js';
+
+class CheckboxMenuItemsNC extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  toggle = (value) => {
+    const {checkedValues} = this.props;
+    if (!checkedValues) {
+      this.props.onChange(this.values.filter((v) => v !== value));
+    } else if (checkedValues.includes(value)) {
+      this.props.onChange([...checkedValues].filter((v) => v !== value));
+    } else {
+      this.props.onChange([...checkedValues, value]);
+    }
+  };
+
+  set = (value, event) => {
+    const {checkedValues} = this.props;
+    if (event.ctrlKey) {
+      this.toggle(value);
+    } else if (checkedValues?.length === 1 && checkedValues.includes(value)) {
+      this.all();
+    } else {
+      this.props.onChange([value]);
+    }
+    event.preventDefault();
+  };
+
+  all = () => {
+    this.props.onChange(null);
+  };
+
+  empty = () => {
+    this.props.onChange([]);
+  };
+
+  invert = () => {
+    const {checkedValues} = this.props;
+    if (checkedValues) {
+      if (checkedValues.length === 0) {
+        this.all();
+      } else {
+        this.props.onChange(
+          this.values.filter((value) => !checkedValues.includes(value))
+        );
+      }
+    } else {
+      this.empty();
+    }
+  };
+
+  renderItem(value, text) {
+    const {checkedValues} = this.props;
+    return (
+      <div key={value} className={this.styles.classNames.item}>
+        <MagicCheckbox
+          value={!checkedValues || checkedValues.includes(value)}
+          onChange={() => this.toggle(value)}
+          // disabled
+        />
+        <Menu.Item onPointerUp={(event) => this.set(value, event)}>
+          {typeof text === 'string' ? <span>{text}</span> : text}
+        </Menu.Item>
+      </div>
+    );
+  }
+
+  render() {
+    const {values, checkedValues, renderValue, children} = this.props;
+    this.values = values ? [...values] : [];
+    const renderedChildren = React.Children.map(children, (child) => {
+      if (React.isValidElement(child) && child.type === 'option') {
+        const {value, children} = child.props;
+        this.values.push(value);
+        return this.renderItem(value, children);
+      }
+      return child;
+    });
+    return (
+      <>
+        <div className={this.styles.classNames.items}>
+          {values?.map((value) => this.renderItem(value, renderValue(value)))}
+          {renderedChildren}
+        </div>
+        <Menu.Hr className={this.styles.classNames.hr} />
+        <div className={this.styles.classNames.buttons}>
+          <MagicButton simple onPointerUp={this.all}>
+            <Icon path={mdiCheckboxMarked} size="1.2em" />
+            Tout
+          </MagicButton>
+          <MagicButton simple onPointerUp={this.empty}>
+            <Icon path={mdiCheckboxBlankOutline} size="1.2em" />
+            Aucun
+          </MagicButton>
+          <MagicButton simple onPointerUp={this.invert}>
+            <Icon path={mdiCheckboxIntermediateVariant} size="1.2em" />
+            Inverser
+          </MagicButton>
+        </div>
+      </>
+    );
+  }
+}
+
+const CheckboxMenuItems = withC(CheckboxMenuItemsNC);
+
+export default CheckboxMenuItems;

package/widgets/magic-datetime-field/widget.js

@@ -68,7 +68,6 @@ class MagicDatetimeFieldNC extends Widget {
       requiredDate,
       requiredTime,
       isEndTime,
-      dispatch,
       ...props
     } = this.props;
     const {date, time} = value ? parseZonedDateTime(value) : {};

package/widgets/magic-navigation/widget.js

@@ -46,7 +46,9 @@ let MagicNavigationView = class extends Widget {
     return (
       <div className={this.styles.classNames.view} data-visible={visible}>
         <WithModel model={serviceId ? `backend.${serviceId}` : ''}>
-          <ViewContext.Provider value={view.set('id', viewId)}>
+          <ViewContext.Provider
+            value={view.set('id', viewId).set('visible', visible)}
+          >
             <ErrorHandler big>
               <Component id={serviceId} viewId={viewId} {...widgetProps} />
             </ErrorHandler>

package/widgets/magic-table/widget.js

@@ -81,10 +81,8 @@ class MagicTableRow extends Widget {
   }
 
   componentDidMount() {
-    this.observer = new MutationObserver((mutations, observer) => {
-      for (const mutation of mutations) {
-        this.props.onUpdate(mutation.target.data);
-      }
+    this.observer = new MutationObserver(() => {
+      this.props.onUpdate();
     });
     this.observer.observe(this.row.current, {
       subtree: true,
@@ -291,7 +289,6 @@ class MagicTableContainer extends Widget {
       sortOrder,
       sortCustom,
       showMenu,
-      dispatch,
       ...props
     } = this.props;
 

package/widgets/magic-wave/styles.js

@@ -0,0 +1,57 @@
+/******************************************************************************/
+
+export default function styles() {
+  const waveAnim = {
+    '0%': {
+      transform: 'scaleY(0.3)',
+    },
+    '15%': {
+      transform: 'scaleY(1.7)',
+    },
+    '30%': {
+      transform: 'scaleY(0.6)',
+    },
+    '55%': {
+      transform: 'scaleY(2)',
+    },
+    '75%': {
+      transform: 'scaleY(0.8)',
+    },
+    '100%': {
+      transform: 'scaleY(0.3)',
+    },
+  };
+
+  const wave = {
+    'display': 'inline-flex',
+    'flexDirection': 'row',
+    'alignItems': 'center',
+    'justifyContent': 'center',
+    'gap': '2px',
+
+    '& span': {
+      width: '2px',
+      height: 'calc(6px + 16px * var(--level))',
+      borderRadius: '50px',
+      backgroundColor:
+        'color-mix(in srgb, var(--button-accent-color), transparent 70%)',
+      borderColor:
+        'color-mix(in srgb, var(--button-accent-color), transparent 10%)',
+      display: 'inline-block',
+
+      animationName: waveAnim,
+      animationDuration: 'var(--speed, 0.6s)',
+      animationTimingFunction: 'cubic-bezier(0.37, 0, 0.63, 1)',
+      animationIterationCount: 'infinite',
+      animationDirection: 'alternate',
+      animationDelay: 'calc(var(--i) * -0.08s)',
+      transformOrigin: 'bottom',
+    },
+  };
+
+  return {
+    wave,
+  };
+}
+
+/******************************************************************************/

package/widgets/magic-wave/widget.js

@@ -0,0 +1,36 @@
+import * as styles from './styles.js';
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+
+class MagicWave extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const bars = this.props.bars || 5;
+    return (
+      <div className={this.styles.classNames.wave}>
+        {[...Array(bars)].map((_, i) => {
+          const center = (bars - 1) / 2;
+          const distance = Math.abs(i - center);
+          const level = 0.1 + (1 - distance / center) * 0.1;
+          const speed = `${(0.45 + Math.random() * 0.35).toFixed(2)}s`;
+          return (
+            <span
+              key={i}
+              style={{
+                '--i': i,
+                '--level': level.toFixed(2),
+                '--speed': speed,
+              }}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+export default MagicWave;

package/widgets/menu/styles.js

@@ -150,7 +150,7 @@ export default function styles() {
   };
 
   const menuHr = {
-    width: 'calc(100% - 20px)',
+    width: 'calc(100% - 12px)',
     opacity: '0.5',
     margin: '3px 0',
     alignSelf: 'center',

package/widgets/menu/widget.js

@@ -193,10 +193,10 @@ class MenuButton extends Widget {
   }
 
   componentWillUnmount() {
-    window.removeEventListener('click', this.stopPropagation, {
-      capture: true,
-      once: true,
-    });
+    // window.removeEventListener('click', this.stopPropagation, {
+    //   capture: true,
+    //   once: true,
+    // });
   }
 
   stopPropagation(event) {
@@ -220,10 +220,10 @@ class MenuButton extends Widget {
   handlePointerDown = (event, menu) => {
     event.currentTarget?.focus();
     // Prevent click event on parent elements
-    window.addEventListener('click', this.stopPropagation, {
-      capture: true,
-      once: true,
-    });
+    // window.addEventListener('click', this.stopPropagation, {
+    //   capture: true,
+    //   once: true,
+    // });
     menu.open(event);
   };
 

package/widgets/small-calendar-grid/styles.js

@@ -33,6 +33,11 @@ export default function styles() {
 
   const weekRow = {
     ...row,
+
+    '&[data-select-week=true]:hover': {
+      backgroundColor:
+        'color-mix(in srgb, var(--accent-color), transparent 75%)',
+    },
   };
 
   const weekNumber = {

package/widgets/small-calendar-grid/widget.js

@@ -68,15 +68,17 @@ class SmallCalendarGrid extends Widget {
   }
 
   renderWeeks(currentDay) {
-    const {startDate} = this.props;
-    const weekStarts = CalendarHelpers.generateWeekStarts(
-      CalendarHelpers.getMonthStart(startDate),
-      6
-    );
+    const {startDate, selectWeek} = this.props;
+    const monthStart = CalendarHelpers.getMonthStart(startDate);
+    const weekStarts = CalendarHelpers.generateWeekStarts(monthStart, 6);
     return weekStarts.map((weekStart) => {
       const days = CalendarHelpers.generateDays(weekStart);
       return (
-        <div key={weekStart} className={this.styles.classNames.weekRow}>
+        <div
+          key={monthStart + '_' + weekStart}
+          className={this.styles.classNames.weekRow}
+          data-select-week={selectWeek}
+        >
           <div className={this.styles.classNames.weekNumber}>
             {CalendarHelpers.getWeekNumber(toJsDate(weekStart))}
           </div>

package/widgets/year-month/styles.js

@@ -0,0 +1,63 @@
+export default function styles() {
+  const yearMonth = {};
+
+  const top = {
+    'display': 'flex',
+    'flexDirection': 'row',
+    'gap': '5px',
+    'marginBottom': '5px',
+
+    '& > *': {
+      flexBasis: 0,
+      flexGrow: 1,
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+  };
+
+  const today = {
+    color: 'var(--text-color)',
+  };
+
+  const group = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    zIndex: 0,
+  };
+
+  const arrow = {
+    'zIndex': -1,
+    'padding': '6px 0px 4px 0px',
+    'margin': '0 -3px',
+    ':not(:hover)': {
+      opacity: 0.5,
+    },
+  };
+
+  const datePart = {
+    'fontSize': '18px',
+    'padding': '4px 4px',
+    '&[class][class]' /* increase specificity */: {
+      opacity: 1,
+    },
+  };
+
+  const years = {
+    columnCount: 2,
+    columnRule:
+      '1px solid color-mix(in srgb, var(--text-color), transparent 75%)',
+    columnGap: '10px',
+  };
+
+  return {
+    yearMonth,
+    top,
+    today,
+    group,
+    arrow,
+    datePart,
+    years,
+  };
+}

package/widgets/year-month/widget.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import MagicButton from '../magic-button/widget.js';
+import {mdiCalendarToday, mdiChevronLeft, mdiChevronRight} from '@mdi/js';
+import Icon from '@mdi/react';
+import CalendarHelpers from '../calendar-helpers.js';
+import MaxTextWidth from '../max-text-width/widget.js';
+import YearMonthsGrid from '../year-month-grid/widget.js';
+import {yearMonth as YearMonthConverters} from 'xcraft-core-converters';
+
+class YearMonth extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  setToday = (event) => {
+    const yearMonth = YearMonthConverters.getNowCanonical();
+    this.props.onMonthChange(yearMonth);
+  };
+
+  validateToday = (event) => {
+    const yearMonth = YearMonthConverters.getNowCanonical();
+    this.props.onMonthClick(yearMonth, event);
+  };
+
+  addMonth = (event, count) => {
+    let newDate = YearMonthConverters.addMonths(this.props.value, count);
+    this.props.onMonthChange(newDate);
+  };
+
+  previousMonth = (event) => {
+    this.addMonth(event, -1);
+  };
+
+  nextMonth = (event) => {
+    this.addMonth(event, 1);
+  };
+
+  previousYear = (event) => {
+    let newDate = YearMonthConverters.addYears(this.props.value, -1);
+    this.props.onMonthChange(newDate);
+  };
+
+  nextYear = (event) => {
+    let newDate = YearMonthConverters.addYears(this.props.value, 1);
+    this.props.onMonthChange(newDate);
+  };
+
+  handleKeyDown = (event) => {
+    this.props.onKeyDown?.(event);
+    if (event.key === 'Enter') {
+      if (event.target === event.currentTarget) {
+        this.props.onMonthClick(this.props.value, event);
+        event.stopPropagation();
+      }
+    } else if (event.key === 'ArrowUp') {
+      this.addMonth(event, -3);
+      event.stopPropagation();
+    } else if (event.key === 'ArrowDown') {
+      this.addMonth(event, 3);
+      event.stopPropagation();
+    } else if (event.key === 'ArrowLeft') {
+      this.addMonth(event, -1);
+      event.stopPropagation();
+    } else if (event.key === 'ArrowRight') {
+      this.addMonth(event, 1);
+      event.stopPropagation();
+    }
+  };
+
+  render() {
+    const {value, onMonthClick} = this.props;
+    const [year, month] = YearMonthConverters.parse(value);
+    const monthNames = CalendarHelpers.getMonthNames('fr-CH', 'long', {
+      upperCase: true,
+    });
+    const monthName = monthNames[month - 1];
+    return (
+      <div
+        className={this.styles.classNames.yearMonth}
+        onKeyDown={this.handleKeyDown}
+      >
+        <div className={this.styles.classNames.top}>
+          <div className={this.styles.classNames.topLeft}>
+            <MagicButton
+              simple
+              onClick={this.setToday}
+              onDoubleClick={this.validateToday}
+              title="Aujourd'hui"
+              className={this.styles.classNames.today}
+            >
+              <Icon path={mdiCalendarToday} size={0.8} />
+            </MagicButton>
+            <div className={this.styles.classNames.group}>
+              <MagicButton
+                simple
+                onClick={this.previousMonth}
+                className={this.styles.classNames.arrow}
+              >
+                <Icon path={mdiChevronLeft} size={1.1} />
+              </MagicButton>
+              <MagicButton
+                simple
+                disabled
+                className={this.styles.classNames.datePart}
+              >
+                <MaxTextWidth texts={monthNames}>{monthName}</MaxTextWidth>
+              </MagicButton>
+              <MagicButton
+                simple
+                onClick={this.nextMonth}
+                className={this.styles.classNames.arrow}
+              >
+                <Icon path={mdiChevronRight} size={1.1} />
+              </MagicButton>
+            </div>
+          </div>
+          <div className={this.styles.classNames.topRight}>
+            <div className={this.styles.classNames.group}>
+              <MagicButton
+                simple
+                onClick={this.previousYear}
+                className={this.styles.classNames.arrow}
+              >
+                <Icon path={mdiChevronLeft} size={1.1} />
+              </MagicButton>
+              <MagicButton
+                simple
+                disabled
+                className={this.styles.classNames.datePart}
+              >
+                {year}
+              </MagicButton>
+              <MagicButton
+                simple
+                onClick={this.nextYear}
+                className={this.styles.classNames.arrow}
+              >
+                <Icon path={mdiChevronRight} size={1.1} />
+              </MagicButton>
+            </div>
+          </div>
+        </div>
+        <div className={this.styles.classNames.years}>
+          <YearMonthsGrid
+            year={year}
+            value={value}
+            onMonthClick={onMonthClick}
+          />
+          <YearMonthsGrid
+            year={year + 1}
+            value={value}
+            onMonthClick={onMonthClick}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default YearMonth;

package/widgets/year-month-grid/styles.js

@@ -0,0 +1,57 @@
+export default function styles() {
+  const yearMonthGrid = {
+    display: 'flex',
+    flexDirection: 'column',
+    userSelect: 'none',
+    padding: '5px',
+  };
+
+  const yearHeader = {
+    color: 'color-mix(in srgb, var(--text-color), transparent 50%)',
+    paddingLeft: '3px',
+  };
+
+  const monthsGrid = {
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr 1fr',
+  };
+
+  const month = {
+    'display': 'flex',
+    'alignItems': 'center',
+    'border': '1px solid transparent',
+    'minHeight': '33px',
+    'padding': '0 3px',
+
+    '&[data-today=true]': {
+      borderColor:
+        'color-mix(in srgb, var(--button-accent-color), transparent 80%)',
+    },
+
+    '&[data-selected=true]': {
+      borderRadius: '5px',
+      backgroundColor:
+        'color-mix(in srgb, var(--accent-color), transparent 70%)',
+      borderColor:
+        'color-mix(in srgb, var(--button-accent-color), transparent 40%)',
+    },
+
+    '&[data-enable-selection=true]': {
+      'cursor': 'pointer',
+      '&:hover': {
+        borderRadius: '5px',
+        backgroundColor:
+          'color-mix(in srgb, var(--button-accent-color), transparent 65%)',
+        borderColor:
+          'color-mix(in srgb, var(--button-accent-color), transparent 10%)',
+      },
+    },
+  };
+
+  return {
+    yearMonthGrid,
+    yearHeader,
+    monthsGrid,
+    month,
+  };
+}

package/widgets/year-month-grid/widget.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import CurrentDay from '../time-interval/current-day.js';
+import CalendarHelpers from '../calendar-helpers.js';
+import {yearMonth as YearMonthConverters} from 'xcraft-core-converters';
+
+class YearMonthsGrid extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  /** @type {React.PointerEventHandler} */
+  handleMonthClick = (event) => {
+    const yearMonth = event.currentTarget.getAttribute('data-month');
+    this.props.onMonthClick?.(yearMonth, event);
+  };
+
+  renderMonth(name, index, currentMonth) {
+    const {year, value, onMonthClick} = this.props;
+    const yearMonth = YearMonthConverters.from(year, index + 1);
+    return (
+      <div
+        key={index}
+        className={this.styles.classNames.month}
+        data-selected={yearMonth === value}
+        data-today={yearMonth === currentMonth}
+        data-enable-selection={Boolean(onMonthClick)}
+        onClick={this.handleMonthClick}
+        data-month={yearMonth}
+      >
+        {name}
+      </div>
+    );
+  }
+
+  renderMonths(currentDay) {
+    const monthNames = CalendarHelpers.getMonthNames('fr-CH', 'long', {
+      upperCase: true,
+    });
+    const currentMonth = currentDay.split('-', 2).join('-');
+    return monthNames.map((name, index) =>
+      this.renderMonth(name, index, currentMonth)
+    );
+  }
+
+  render() {
+    const {year} = this.props;
+    return (
+      <div role="grid" className={this.styles.classNames.yearMonthGrid}>
+        <div className={this.styles.classNames.yearHeader}>{year}</div>
+        <div className={this.styles.classNames.monthsGrid}>
+          <CurrentDay>
+            {(currentDay) => this.renderMonths(currentDay)}
+          </CurrentDay>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default YearMonthsGrid;

package/widgets/year-month-menu/styles.js

@@ -0,0 +1,22 @@
+export default function styles() {
+  const yearMonthMenuContent = {
+    padding: '5px',
+    outline: 'none',
+  };
+
+  const clearButton = {
+    '&[class]' /* increase specificity */: {
+      minWidth: 'unset',
+    },
+  };
+
+  const buttons = {
+    marginTop: '5px',
+  };
+
+  return {
+    yearMonthMenuContent,
+    clearButton,
+    buttons,
+  };
+}

package/widgets/year-month-menu/widget.js

@@ -0,0 +1,117 @@
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import * as styles from './styles.js';
+import Menu from '../menu/widget.js';
+import MagicButton from '../magic-button/widget.js';
+import Icon from '@mdi/react';
+import {mdiBackspaceOutline, mdiCancel, mdiCheck} from '@mdi/js';
+import DialogButtons from '../dialog-buttons/widget.js';
+import {yearMonth as YearMonthConverters} from 'xcraft-core-converters';
+import YearMonth from '../year-month/widget.js';
+
+class YearMonthMenuContent extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+    this.state = {
+      yearMonth: this.props.value,
+    };
+    this.calendarRef = React.createRef();
+  }
+
+  /** @type {React.KeyboardEventHandler} */
+  handleKeyDown = (event) => {
+    this.calendarRef.current?.handleKeyDown(event);
+  };
+
+  handleMonthChange = (yearMonth) => {
+    this.setState({yearMonth});
+  };
+
+  handleMonthClick = (value) => {
+    this.props.onChange(value);
+  };
+
+  clear = () => {
+    this.props.onChange(null);
+  };
+
+  cancel = () => {
+    this.props.onCancel();
+  };
+
+  validate = () => {
+    this.props.onChange(this.state.yearMonth);
+  };
+
+  render() {
+    return (
+      <div
+        className={this.styles.classNames.yearMonthMenuContent}
+        tabIndex={0}
+        onKeyDown={this.handleKeyDown}
+      >
+        <YearMonth
+          ref={this.calendarRef}
+          value={this.state.yearMonth}
+          onMonthChange={this.handleMonthChange}
+          onMonthClick={this.handleMonthClick}
+        />
+
+        <DialogButtons className={this.styles.classNames.buttons}>
+          {this.props.allowEmpty && (
+            <MagicButton
+              onClick={this.clear}
+              className={this.styles.classNames.clearButton}
+            >
+              <Icon path={mdiBackspaceOutline} size={0.8} /> Effacer
+            </MagicButton>
+          )}
+          <DialogButtons.Spacing />
+          <MagicButton onClick={this.cancel}>
+            <Icon path={mdiCancel} size={0.8} /> Annuler
+          </MagicButton>
+          <MagicButton onClick={this.validate} className="main">
+            <Icon path={mdiCheck} size={0.8} />{' '}
+            {YearMonthConverters.toLocaleString(this.state.yearMonth, 'fr-CH')}
+          </MagicButton>
+        </DialogButtons>
+      </div>
+    );
+  }
+}
+
+class YearMonthMenu extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  handleChange = (value, menu) => {
+    menu.close();
+    this.props.onChange(value);
+  };
+
+  render() {
+    const {allowEmpty, value, onChange, children} = this.props;
+    return (
+      <Menu>
+        {children}
+        <Menu.Content position="bottom center" addTabIndex={false}>
+          <Menu.Context.Consumer>
+            {(menu) => (
+              <YearMonthMenuContent
+                allowEmpty={allowEmpty}
+                value={value || YearMonthConverters.getNowCanonical()}
+                onChange={(value) => this.handleChange(value, menu)}
+                onCancel={menu.close}
+              />
+            )}
+          </Menu.Context.Consumer>
+        </Menu.Content>
+      </Menu>
+    );
+  }
+}
+
+export default YearMonthMenu;