@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/date-picker/__snapshots__/DatePickerControlled.test.tsx.snap

@@ -0,0 +1,597 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DatePickerControlled> Snapshots and structure should render correctly 1`] = `
+<div
+  className="lumx-date-picker"
+>
+  <Toolbar
+    after={
+      <IconButton
+        emphasis="low"
+        icon="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+        label="Next month"
+        onClick={[MockFunction]}
+        size="m"
+        theme="light"
+      />
+    }
+    before={
+      <IconButton
+        emphasis="low"
+        icon="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"
+        label="Previous month"
+        onClick={[MockFunction]}
+        size="m"
+        theme="light"
+      />
+    }
+    className="lumx-date-picker__toolbar"
+    label={
+      <span
+        className="lumx-date-picker__month"
+      >
+        janvier 1970
+      </span>
+    }
+  />
+  <div
+    className="lumx-date-picker__calendar"
+  >
+    <div
+      className="lumx-date-picker__week-days lumx-date-picker__days-wrapper"
+    >
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="947721"
+      >
+        <span
+          className="lumx-date-picker__week-day"
+        >
+          L
+        </span>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1034121"
+      >
+        <span
+          className="lumx-date-picker__week-day"
+        >
+          M
+        </span>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1120521"
+      >
+        <span
+          className="lumx-date-picker__week-day"
+        >
+          M
+        </span>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1206921"
+      >
+        <span
+          className="lumx-date-picker__week-day"
+        >
+          J
+        </span>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1293321"
+      >
+        <span
+          className="lumx-date-picker__week-day"
+        >
+          V
+        </span>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1379721"
+      >
+        <span
+          className="lumx-date-picker__week-day"
+        >
+          S
+        </span>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1466121"
+      >
+        <span
+          className="lumx-date-picker__week-day"
+        >
+          D
+        </span>
+      </div>
+    </div>
+    <div
+      className="lumx-date-picker__month-days lumx-date-picker__days-wrapper"
+    >
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="-262800"
+      />
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="-176400"
+      />
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="-90000"
+      />
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="-3600"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            01
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="82800"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            02
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="169200"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            03
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="255600"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            04
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="342000"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            05
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="428400"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            06
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="514800"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            07
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="601200"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            08
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="687600"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            09
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="774000"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            10
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="860400"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            11
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="946800"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            12
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1033200"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            13
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1119600"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            14
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1206000"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            15
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1292400"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            16
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1378800"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            17
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1465200"
+      >
+        <button
+          className="lumx-date-picker__month-day lumx-date-picker__month-day--is-selected lumx-date-picker__month-day--is-today"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            18
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1551600"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            19
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1638000"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            20
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1724400"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            21
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1810800"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            22
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1897200"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            23
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="1983600"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            24
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="2070000"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            25
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="2156400"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            26
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="2242800"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            27
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="2329200"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            28
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="2415600"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            29
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="2502000"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            30
+          </span>
+        </button>
+      </div>
+      <div
+        className="lumx-date-picker__day-wrapper"
+        key="2588400"
+      >
+        <button
+          className="lumx-date-picker__month-day"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <span>
+            31
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/dist/src/components/date-picker/__snapshots__/DatePickerField.test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DatePickerField> Snapshots and structure should render correctly 1`] = `
+<Fragment>
+  <TextField
+    forceFocusStyle={false}
+    label="DatePickerField"
+    onChange={[Function]}
+    onClick={[Function]}
+    onKeyPress={[Function]}
+    readOnly={true}
+    textFieldRef={
+      {
+        "current": null,
+      }
+    }
+    theme="light"
+    type="text"
+    value="18 janvier 1970"
+  />
+</Fragment>
+`;
+
+exports[`<DatePickerField> Snapshots and structure should render correctly when passed a date object 1`] = `
+<Fragment>
+  <TextField
+    forceFocusStyle={false}
+    label="DatePickerField"
+    onChange={[Function]}
+    onClick={[Function]}
+    onKeyPress={[Function]}
+    readOnly={true}
+    textFieldRef={
+      {
+        "current": null,
+      }
+    }
+    theme="light"
+    type="text"
+    value="18 janvier 1970"
+  />
+</Fragment>
+`;

package/dist/src/components/date-picker/constants.ts

@@ -0,0 +1,11 @@
+import { getRootClassName } from '@lumx/react/utils/className';
+
+/**
+ * Component display name.
+ */
+export const COMPONENT_NAME = 'DatePicker';
+
+/**
+ * Component default class name and class prefix.
+ */
+export const CLASSNAME = getRootClassName(COMPONENT_NAME);

package/dist/src/components/date-picker/index.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './DatePicker';
+export * from './DatePickerControlled';
+export * from './DatePickerField';

package/dist/src/components/date-picker/types.ts

@@ -0,0 +1,28 @@
+import { IconButtonProps } from '@lumx/react';
+import { GenericProps } from '@lumx/react/utils/type';
+import { Ref } from 'react';
+
+/**
+ * Defines the props of the component.
+ */
+export interface DatePickerProps extends GenericProps {
+    /** Default month. */
+    defaultMonth?: Date;
+    /** Locale (language or region) to use. */
+    locale: string;
+    /** Date after which dates can't be selected. */
+    maxDate?: Date;
+    /** Date before which dates can't be selected. */
+    minDate?: Date;
+    /** Props to pass to the next month button (minus those already set by the DatePickerControlled props). */
+    nextButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+    /** Props to pass to the previous month button (minus those already set by the DatePickerControlled props). */
+    previousButtonProps: Pick<IconButtonProps, 'label'> &
+        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+    /** Reference to the <button> element corresponding to the current date or the selected date. */
+    todayOrSelectedDateRef?: Ref<HTMLButtonElement>;
+    /** Currently selected date. */
+    value: Date | undefined;
+    /** On change callback. */
+    onChange(value: Date | undefined): void;
+}