feat(date-picker): make locale prop optional

Author: gcornut

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   `@lumx/react` no long depend on `moment` or `moment-range` to generate the date picker.
 -   Deprecated `@lumx/core/js/date-picker` functions that **will be removed in the next major version** along with `moment` and `moment-range`.
+-   DatePicker & DatePickerField: `locale` prop is now optional (uses browser locale by default)
 
 ## [3.5.3][] - 2023-08-30
 

packages/lumx-react/src/components/date-picker/DatePickerControlled.tsx

@@ -5,6 +5,7 @@ import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
 import { Comp } from '@lumx/react/utils/type';
 import { getMonthCalendar } from '@lumx/react/utils/date/getMonthCalendar';
 import { isSameDay } from '@lumx/react/utils/date/isSameDay';
+import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
 import { parseLocale } from '@lumx/react/utils/locale/parseLocale';
 import { Locale } from '@lumx/react/utils/locale/types';
 import { CLASSNAME } from './constants';
@@ -35,7 +36,7 @@ const COMPONENT_NAME = 'DatePickerControlled';
  */
 export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElement> = forwardRef((props, ref) => {
     const {
-        locale,
+        locale = getCurrentLocale(),
         maxDate,
         minDate,
         nextButtonProps,

packages/lumx-react/src/components/date-picker/DatePickerField.stories.tsx

@@ -8,7 +8,6 @@ export default {
     component: DatePickerField,
     args: {
         ...DatePickerField.defaultProps,
-        locale: 'fr',
         'nextButtonProps.label': 'Next month',
         'previousButtonProps.label': 'Previous month',
     },

packages/lumx-react/src/components/date-picker/DatePickerField.tsx

@@ -4,6 +4,7 @@ import { DatePicker, IconButtonProps, Placement, Popover, TextField } from '@lum
 import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
 import { useFocus } from '@lumx/react/hooks/useFocus';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getCurrentLocale } from '@lumx/react/utils/locale/getCurrentLocale';
 
 /**
  * Defines the props of the component.
@@ -14,7 +15,7 @@ export interface DatePickerFieldProps extends GenericProps {
     /** Whether the component is disabled or not. */
     isDisabled?: boolean;
     /** Locale (language or region) to use. */
-    locale: string;
+    locale?: string;
     /** Date after which dates can't be selected. */
     maxDate?: Date;
     /** Date before which dates can't be selected. */
@@ -49,7 +50,7 @@ export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwa
         defaultMonth,
         disabled,
         isDisabled = disabled,
-        locale,
+        locale = getCurrentLocale(),
         maxDate,
         minDate,
         name,

packages/lumx-react/src/components/date-picker/types.ts

@@ -9,7 +9,7 @@ export interface DatePickerProps extends GenericProps {
     /** Default month. */
     defaultMonth?: Date;
     /** Locale (language or region) to use. */
-    locale: string;
+    locale?: string;
     /** Date after which dates can't be selected. */
     maxDate?: Date;
     /** Date before which dates can't be selected. */