@spaced-out/ui-design-system 0.4.6 → 0.4.8

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.4.8](https://github.com/spaced-out/ui-design-system/compare/v0.4.7...v0.4.8) (2025-07-24)
+
+
+### Features
+
+* localization in date range picker ([#377](https://github.com/spaced-out/ui-design-system/issues/377)) ([ae21b25](https://github.com/spaced-out/ui-design-system/commit/ae21b255c5f1a0122408000239eaf5c44abbd2b9))
+
+### [0.4.7](https://github.com/spaced-out/ui-design-system/compare/v0.4.6...v0.4.7) (2025-07-24)
+
+
+### Features
+
+* static lables for simple dropdown ([#376](https://github.com/spaced-out/ui-design-system/issues/376)) ([397a108](https://github.com/spaced-out/ui-design-system/commit/397a1089b95bc3d5136cc81bd4a35c39f42d4fd5))
+
 ### [0.4.6](https://github.com/spaced-out/ui-design-system/compare/v0.4.5...v0.4.6) (2025-07-24)
 
 ### [0.4.5](https://github.com/spaced-out/ui-design-system/compare/v0.4.4...v0.4.5) (2025-07-24)

package/lib/components/DateRangePicker/Calendar.js

@@ -24,7 +24,8 @@ const Calendar = _ref => {
     hoverDay,
     dateRange,
     inHoverRange,
-    today
+    today,
+    t
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: _CalendarModule.default.calendar
@@ -34,7 +35,7 @@ const Calendar = _ref => {
     key: day,
     className: _CalendarModule.default.calendarRowItem,
     color: _Text.TEXT_COLORS.tertiary
-  }, day))), (0, _utils.getDaysInMonth)(value).map((week, index) => /*#__PURE__*/React.createElement("div", {
+  }, (0, _dateRangePicker.getTranslation)(t, day)))), (0, _utils.getDaysInMonth)(value).map((week, index) => /*#__PURE__*/React.createElement("div", {
     key: week[index],
     className: _CalendarModule.default.calendarRow
   }, week.map(date => {

package/lib/components/DateRangePicker/Calendar.js.flow

@@ -16,7 +16,12 @@ import {
   NAVIGATION_ACTION,
   WEEKDAYS,
 } from '../../utils';
-import {isAfter, isBefore, isSame} from '../../utils/date-range-picker';
+import {
+  getTranslation,
+  isAfter,
+  isBefore,
+  isSame,
+} from '../../utils/date-range-picker';
 import {BodySmall, TEXT_COLORS} from '../Text';
 
 import {Day} from './Day';
@@ -41,6 +46,7 @@ type CalendarProps = {
     ) => void,
   },
   today: string,
+  t: ?(key: string, fallback: string) => string,
 };
 
 export const Calendar = ({
@@ -53,6 +59,7 @@ export const Calendar = ({
   dateRange,
   inHoverRange,
   today,
+  t,
 }: CalendarProps): React.Node => (
   <div className={css.calendar}>
     <div className={css.calendarRow}>
@@ -62,7 +69,7 @@ export const Calendar = ({
           className={css.calendarRowItem}
           color={TEXT_COLORS.tertiary}
         >
-          {day}
+          {getTranslation(t, day)}
         </BodySmall>
       ))}
     </div>

package/lib/components/DateRangePicker/DateRangePicker.js

@@ -26,7 +26,9 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     hideTimezone = false,
     selectedDateRange = {},
     startDateLabel,
-    endDateLabel
+    endDateLabel,
+    t,
+    locale
   } = _ref;
   const localTimezone = _momentTimezone.default.tz.guess();
   const {
@@ -43,7 +45,8 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     minDate,
     maxDate,
     today,
-    onError
+    onError,
+    t
   }), [today]);
   const {
     startDate,
@@ -132,6 +135,8 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     cardWrapperClass: (0, _classify.default)(_DateRangePickerModule.default.container, classNames?.wrapper),
     today: today,
     startDateLabel: startDateLabel,
-    endDateLabel: endDateLabel
+    endDateLabel: endDateLabel,
+    t: t,
+    locale: locale
   });
 });

package/lib/components/DateRangePicker/DateRangePicker.js.flow

@@ -47,6 +47,8 @@ export type DateRangePickerProps = {
   maxDate?: string,
   startDateLabel?: string,
   endDateLabel?: string,
+  t?: ?(key: string, fallback: string) => string,
+  locale?: string,
 };
 
 export const DateRangePicker: React$AbstractComponent<
@@ -65,6 +67,8 @@ export const DateRangePicker: React$AbstractComponent<
       selectedDateRange = {},
       startDateLabel,
       endDateLabel,
+      t,
+      locale,
     }: DateRangePickerProps,
     ref,
   ): React.Node => {
@@ -87,6 +91,7 @@ export const DateRangePicker: React$AbstractComponent<
           maxDate,
           today,
           onError,
+          t,
         }),
       [today],
     );
@@ -201,6 +206,8 @@ export const DateRangePicker: React$AbstractComponent<
         today={today}
         startDateLabel={startDateLabel}
         endDateLabel={endDateLabel}
+        t={t}
+        locale={locale}
       />
     );
   },

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -22,6 +22,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // $FlowFixMe[untyped-import]
 const CalendarHeader = _ref => {
   let {
+    t,
     date,
     marker,
     minDate,
@@ -46,12 +47,14 @@ const CalendarHeader = _ref => {
     minDate,
     maxDate,
     rangeStartMonth,
-    rangeEndMonth
+    rangeEndMonth,
+    t
   });
+  const MONTHS = (0, _utils.getMonths)(t);
   return /*#__PURE__*/React.createElement("div", {
     className: _DateRangeWrapperModule.default.calendarHeader
   }, /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
-    ariaLabel: "Select Previous Month",
+    ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Previous Month'),
     size: "small",
     name: "chevron-left",
     className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
@@ -69,7 +72,7 @@ const CalendarHeader = _ref => {
     onChange: event => {
       setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('M', event.key)));
     },
-    dropdownInputText: _utils.MONTHS[_moment.default.utc(date).month()].label,
+    dropdownInputText: MONTHS[_moment.default.utc(date).month()].label,
     scrollMenuToBottom: true
   }), /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
     disabled: !availableYears.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
@@ -85,7 +88,7 @@ const CalendarHeader = _ref => {
     scrollMenuToBottom: true
   }), /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
     size: "small",
-    ariaLabel: "Select Next Month",
+    ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Next Month'),
     name: "chevron-right",
     className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
       [_DateRangeWrapperModule.default.disabledIcon]: nextDisabled
@@ -114,7 +117,9 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
     hideTimezone,
     today,
     startDateLabel,
-    endDateLabel
+    endDateLabel,
+    t,
+    locale
   } = _ref2;
   const canNavigateCloser = _moment.default.utc(rangeStartMonth).year() !== _moment.default.utc(rangeEndMonth).year() || Math.abs(_moment.default.utc(rangeStartMonth).month() - _moment.default.utc(rangeEndMonth).month()) > 1;
   const handleApplyClick = () => {
@@ -142,7 +147,8 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
     dateRange,
     minDate,
     maxDate,
-    today
+    today,
+    t
   };
   return /*#__PURE__*/React.createElement(_FocusManager.FocusManager, null, /*#__PURE__*/React.createElement(_Card.Card, {
     classNames: {
@@ -154,7 +160,7 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
   }, /*#__PURE__*/React.createElement(_Text.BodySmall, {
     className: _DateRangeWrapperModule.default.selectedDate,
     color: _Text.TEXT_COLORS.secondary
-  }, `${startDateLabel || 'Start Date'}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange)}`), /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }, `${startDateLabel || (0, _dateRangePicker.getTranslation)(t, 'Start Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange, locale)}`), /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: "minus",
     size: _Icon.ICON_SIZE.small,
     type: _Icon.ICON_TYPE.regular,
@@ -162,9 +168,10 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
   }), /*#__PURE__*/React.createElement(_Text.BodySmall, {
     className: _DateRangeWrapperModule.default.selectedDate,
     color: _Text.TEXT_COLORS.secondary
-  }, `${endDateLabel || 'End Date'}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange)}`)), /*#__PURE__*/React.createElement("div", {
+  }, `${endDateLabel || (0, _dateRangePicker.getTranslation)(t, 'End Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange, locale)}`)), /*#__PURE__*/React.createElement("div", {
     className: _DateRangeWrapperModule.default.calendarMenuContainer
   }, /*#__PURE__*/React.createElement(CalendarHeader, {
+    t: t,
     marker: _utils.MARKERS.DATE_RANGE_START,
     rangeStartMonth: rangeStartMonth,
     rangeEndMonth: rangeEndMonth,
@@ -177,6 +184,7 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
     onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.NEXT),
     onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.PREV)
   }), /*#__PURE__*/React.createElement(CalendarHeader, {
+    t: t,
     marker: _utils.MARKERS.DATE_RANGE_END,
     rangeStartMonth: rangeStartMonth,
     rangeEndMonth: rangeEndMonth,
@@ -202,26 +210,34 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
     className: _DateRangeWrapperModule.default.cardFooter
   }, /*#__PURE__*/React.createElement(_Card.CardTitle, {
     className: _DateRangeWrapperModule.default.timezoneDropdownContainer
-  }, !hideTimezone && /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
-    options: (0, _utils.getTimezones)(),
+  }, !hideTimezone && /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
+    menu: {
+      selectedKeys: [timezone],
+      options: (0, _utils.getTimezones)(t),
+      allowSearch: true,
+      staticLabels: {
+        SEARCH_PLACEHOLDER: `${(0, _dateRangePicker.getTranslation)(t, 'Search')}...`,
+        RESULT: (0, _dateRangePicker.getTranslation)(t, 'result'),
+        RESULTS: (0, _dateRangePicker.getTranslation)(t, 'results')
+      }
+    },
+    dropdownInputText: (0, _dateRangePicker.getTranslation)(t, _dateRangePicker.TIMEZONES[timezone]),
     disabled: (0, _dateRangePicker.isAfter)(minDate, maxDate),
     classNames: {
       box: _DateRangeWrapperModule.default.timezoneDropdown
     },
-    selectedKeys: [timezone],
     onChange: event => setTimezone(event.key),
     size: "small",
     menuVirtualization: {
       enable: true
-    },
-    allowSearch: true
+    }
   })), /*#__PURE__*/React.createElement(_Card.CardActions, null, /*#__PURE__*/React.createElement(_Button.Button, {
     type: "ghost",
     onClick: onCancel,
     size: "small"
-  }, "Cancel"), /*#__PURE__*/React.createElement(_Button.Button, {
+  }, (0, _dateRangePicker.getTranslation)(t, 'Cancel')), /*#__PURE__*/React.createElement(_Button.Button, {
     onClick: handleApplyClick,
     size: "small",
     disabled: !(dateRange.startDate && dateRange.endDate)
-  }, "Apply")))));
+  }, (0, _dateRangePicker.getTranslation)(t, 'Apply'))))));
 });

package/lib/components/DateRangePicker/DateRangeWrapper.js.flow

@@ -9,9 +9,9 @@ import {
   generateAvailableYears,
   getAvailableMonths,
   getMonthEndDate,
+  getMonths,
   getTimezones,
   MARKERS,
-  MONTHS,
   NAVIGATION_ACTION,
 } from '../../utils';
 import classify from '../../utils/classify';
@@ -19,9 +19,11 @@ import {
   addTimezoneEndOfDay,
   addTimezoneStartOfDay,
   getFormattedDate,
+  getTranslation,
   isAfter,
   isSameOrAfter,
   isSameOrBefore,
+  TIMEZONES,
 } from '../../utils/date-range-picker';
 import {Button} from '../Button';
 import {
@@ -32,7 +34,7 @@ import {
   CardHeader,
   CardTitle,
 } from '../Card';
-import {Dropdown, SimpleDropdown} from '../Dropdown';
+import {Dropdown} from '../Dropdown';
 import {FocusManager} from '../FocusManager';
 import {ClickableIcon, Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
 import {BodySmall, TEXT_COLORS} from '../Text';
@@ -54,6 +56,7 @@ type HeaderProps = {
   onClickPrevious: () => void,
   marker: $Values<typeof MARKERS>,
   setMonth: (date: string) => void,
+  t: ?(key: string, fallback: string) => string,
 };
 
 type DateRangeWrapperProps = {
@@ -83,9 +86,12 @@ type DateRangeWrapperProps = {
   today: string,
   startDateLabel?: string,
   endDateLabel?: string,
+  t?: ?(key: string, fallback: string) => string,
+  locale?: string,
 };
 
 const CalendarHeader = ({
+  t,
   date,
   marker,
   minDate,
@@ -111,12 +117,14 @@ const CalendarHeader = ({
     maxDate,
     rangeStartMonth,
     rangeEndMonth,
+    t,
   });
+  const MONTHS = getMonths(t);
 
   return (
     <div className={css.calendarHeader}>
       <ClickableIcon
-        ariaLabel="Select Previous Month"
+        ariaLabel={getTranslation(t, 'Select Previous Month')}
         size="small"
         name="chevron-left"
         className={classify(css.headerIcon, {
@@ -153,7 +161,7 @@ const CalendarHeader = ({
       />
       <ClickableIcon
         size="small"
-        ariaLabel="Select Next Month"
+        ariaLabel={getTranslation(t, 'Select Next Month')}
         name="chevron-right"
         className={classify(css.headerIcon, {
           [css.disabledIcon]: nextDisabled,
@@ -190,6 +198,8 @@ export const DateRangeWrapper: React$AbstractComponent<
       today,
       startDateLabel,
       endDateLabel,
+      t,
+      locale,
     }: DateRangeWrapperProps,
     ref,
   ): React.Node => {
@@ -223,6 +233,7 @@ export const DateRangeWrapper: React$AbstractComponent<
       minDate,
       maxDate,
       today,
+      t,
     };
 
     return (
@@ -238,9 +249,12 @@ export const DateRangeWrapper: React$AbstractComponent<
               className={css.selectedDate}
               color={TEXT_COLORS.secondary}
             >
-              {`${startDateLabel || 'Start Date'}: ${getFormattedDate(
+              {`${
+                startDateLabel || getTranslation(t, 'Start Date')
+              }: ${getFormattedDate(
                 MARKERS.DATE_RANGE_START,
                 dateRange,
+                locale,
               )}`}
             </BodySmall>
 
@@ -255,15 +269,19 @@ export const DateRangeWrapper: React$AbstractComponent<
               className={css.selectedDate}
               color={TEXT_COLORS.secondary}
             >
-              {`${endDateLabel || 'End Date'}: ${getFormattedDate(
+              {`${
+                endDateLabel || getTranslation(t, 'End Date')
+              }: ${getFormattedDate(
                 MARKERS.DATE_RANGE_END,
                 dateRange,
+                locale,
               )}`}
             </BodySmall>
           </CardHeader>
 
           <div className={css.calendarMenuContainer}>
             <CalendarHeader
+              t={t}
               marker={MARKERS.DATE_RANGE_START}
               rangeStartMonth={rangeStartMonth}
               rangeEndMonth={rangeEndMonth}
@@ -287,6 +305,7 @@ export const DateRangeWrapper: React$AbstractComponent<
               }
             />
             <CalendarHeader
+              t={t}
               marker={MARKERS.DATE_RANGE_END}
               rangeStartMonth={rangeStartMonth}
               rangeEndMonth={rangeEndMonth}
@@ -321,32 +340,40 @@ export const DateRangeWrapper: React$AbstractComponent<
           <CardFooter className={css.cardFooter}>
             <CardTitle className={css.timezoneDropdownContainer}>
               {!hideTimezone && (
-                <SimpleDropdown
-                  options={getTimezones()}
+                <Dropdown
+                  menu={{
+                    selectedKeys: [timezone],
+                    options: getTimezones(t),
+                    allowSearch: true,
+                    staticLabels: {
+                      SEARCH_PLACEHOLDER: `${getTranslation(t, 'Search')}...`,
+                      RESULT: getTranslation(t, 'result'),
+                      RESULTS: getTranslation(t, 'results'),
+                    },
+                  }}
+                  dropdownInputText={getTranslation(t, TIMEZONES[timezone])}
                   disabled={isAfter(minDate, maxDate)}
                   classNames={{
                     box: css.timezoneDropdown,
                   }}
-                  selectedKeys={[timezone]}
                   onChange={(event) => setTimezone(event.key)}
                   size="small"
                   menuVirtualization={{
                     enable: true,
                   }}
-                  allowSearch
                 />
               )}
             </CardTitle>
             <CardActions>
               <Button type="ghost" onClick={onCancel} size="small">
-                Cancel
+                {getTranslation(t, 'Cancel')}
               </Button>
               <Button
                 onClick={handleApplyClick}
                 size="small"
                 disabled={!(dateRange.startDate && dateRange.endDate)}
               >
-                Apply
+                {getTranslation(t, 'Apply')}
               </Button>
             </CardActions>
           </CardFooter>

package/lib/components/Dropdown/SimpleDropdown.js

@@ -32,6 +32,7 @@ const SimpleDropdownBase = (props, ref) => {
     showLabelTooltip,
     clickAwayRef,
     allowWrap = false,
+    staticLabels,
     ...inputProps
   } = props;
   const [dropdownInputText, setDropdownInputText] = React.useState('');
@@ -83,7 +84,8 @@ const SimpleDropdownBase = (props, ref) => {
       footer,
       classNames: menuClassNames,
       showLabelTooltip,
-      allowWrap
+      allowWrap,
+      staticLabels
     }
   }));
 };

package/lib/components/Dropdown/SimpleDropdown.js.flow

@@ -44,6 +44,11 @@ export type SimpleDropdownProps = {
   menuClassNames?: MenuClassNames,
   showLabelTooltip?: MenuLabelTooltip,
   allowWrap?: boolean,
+  staticLabels?: {
+    RESULT?: string,
+    RESULTS?: string,
+    SEARCH_PLACEHOLDER?: string,
+  },
 
   // events
   onChange?: (option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed,
@@ -79,6 +84,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     showLabelTooltip,
     clickAwayRef,
     allowWrap = false,
+    staticLabels,
     ...inputProps
   } = props;
 
@@ -150,6 +156,7 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
         classNames: menuClassNames,
         showLabelTooltip,
         allowWrap,
+        staticLabels,
       }}
     />
   );

package/lib/types/date-range-picker.js

@@ -1,3 +1 @@
-"use strict";
-
-var _dateRangePicker = require("../utils/date-range-picker");
+"use strict";

package/lib/types/date-range-picker.js.flow

@@ -1,10 +1,10 @@
 // @flow strict
-import {DATE_RANGE_PICKER_ERRORS} from '../utils/date-range-picker';
-
 
 export type TimeUnit = 'years' | 'months' | 'days' | 'd' | 'M' | 'y';
 export type DateRange = {startDate?: ?string, endDate?: ?string};
-export type DateRangePickerErrorTypes = $Keys<typeof DATE_RANGE_PICKER_ERRORS>;
+export type DateRangePickerErrorTypes = {
+  [key: string]: {type: string, description: string},
+};
 export type DateRangePickerError = {
   type: string,
   description: string,

package/lib/utils/date-range-picker/date-range-picker.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrangleMoment = exports.isValid = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isSameOrBefore = exports.isSameOrAfter = exports.isSame = exports.isEndOfRange = exports.isBetween = exports.isBefore = exports.isAfter = exports.inDateRange = exports.getValidDates = exports.getTimezones = exports.getSubtractedDate = exports.getMonthEndDate = exports.getFormattedDate = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.checkRangeValidity = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = exports.DATE_RANGE_PICKER_ERRORS = void 0;
+exports.wrangleMoment = exports.makeKey = exports.isValid = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isSameOrBefore = exports.isSameOrAfter = exports.isSame = exports.isEndOfRange = exports.isBetween = exports.isBefore = exports.isAfter = exports.inDateRange = exports.getValidDates = exports.getTranslation = exports.getTimezones = exports.getSubtractedDate = exports.getMonths = exports.getMonthEndDate = exports.getFormattedDate = exports.getDaysInMonth = exports.getDateRangePickerErrors = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.checkRangeValidity = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MARKERS = void 0;
 var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _lodash = require("lodash");
@@ -12,6 +12,21 @@ var _timezones = require("./timezones");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // $FlowFixMe - strict types for date-fns
 // $FlowFixMe[untyped-import]
+const makeKey = value => {
+  try {
+    if (value && typeof value === 'string') {
+      return value.replace(/\(s\)/gi, '_s') // Replace (s) with _s (case-insensitive)
+      .replace(/[^\w\s']/g, '') // Remove special chars except apostrophes
+      .replace(/\s+/g, '_') // Spaces → underscores
+      .replace(/_+/g, '_') // Collapse multiple ____ into _
+      .replace(/^_|_$/g, ''); // Trim leading/trailing _
+    }
+    return value;
+  } catch {
+    return value;
+  }
+};
+exports.makeKey = makeKey;
 const NAVIGATION_ACTION = exports.NAVIGATION_ACTION = Object.freeze({
   NEXT: 'next',
   PREV: 'prev'
@@ -21,61 +36,63 @@ const MARKERS = exports.MARKERS = Object.freeze({
   DATE_RANGE_END: 'SECOND'
 });
 const WEEKDAYS = exports.WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-const MONTHS = exports.MONTHS = [{
+const getMonths = t => [{
   key: '0',
-  label: 'Jan'
+  label: getTranslation(t, 'Jan')
 }, {
   key: '1',
-  label: 'Feb'
+  label: getTranslation(t, 'Feb')
 }, {
   key: '2',
-  label: 'Mar'
+  label: getTranslation(t, 'Mar')
 }, {
   key: '3',
-  label: 'Apr'
+  label: getTranslation(t, 'Apr')
 }, {
   key: '4',
-  label: 'May'
+  label: getTranslation(t, 'May')
 }, {
   key: '5',
-  label: 'Jun'
+  label: getTranslation(t, 'Jun')
 }, {
   key: '6',
-  label: 'Jul'
+  label: getTranslation(t, 'Jul')
 }, {
   key: '7',
-  label: 'Aug'
+  label: getTranslation(t, 'Aug')
 }, {
   key: '8',
-  label: 'Sep'
+  label: getTranslation(t, 'Sep')
 }, {
   key: '9',
-  label: 'Oct'
+  label: getTranslation(t, 'Oct')
 }, {
   key: '10',
-  label: 'Nov'
+  label: getTranslation(t, 'Nov')
 }, {
   key: '11',
-  label: 'Dec'
+  label: getTranslation(t, 'Dec')
 }];
-const DATE_RANGE_PICKER_ERRORS = exports.DATE_RANGE_PICKER_ERRORS = Object.freeze({
+exports.getMonths = getMonths;
+const getDateRangePickerErrors = t => ({
   MIN_MAX_INVALID: {
     type: 'MIN_MAX_INVALID',
-    description: 'Given minDate and maxDate are invalid.'
+    description: getTranslation(t, 'Given minDate and maxDate are invalid.')
   },
   START_DATE_EARLY: {
     type: 'START_DATE_EARLY',
-    description: 'Given startDate can not come before minDate.'
+    description: getTranslation(t, 'Given startDate can not come before minDate.')
   },
   START_DATE_LATE: {
     type: 'START_DATE_LATE',
-    description: 'Given startDate can not come after endDate.'
+    description: getTranslation(t, 'Given startDate can not come after endDate.')
   },
   END_DATE_LATE: {
     type: 'END_DATE_LATE',
-    description: 'Given endDate can not come after maxDate.'
+    description: getTranslation(t, 'Given endDate can not come after maxDate.')
   }
 });
+exports.getDateRangePickerErrors = getDateRangePickerErrors;
 const checkRangeValidity = (rangeStart, rangeEnd, errorBody, onError) => {
   const isRangeStartValid = isValid(rangeStart);
   const isRangeEndValid = isRangeStartValid && isValid(rangeEnd);
@@ -174,10 +191,10 @@ const getSubtractedDate = (date, subtractCount, timeUnit) => formatIsoDate(_mome
 exports.getSubtractedDate = getSubtractedDate;
 const getMonthEndDate = date => formatIsoDate(_moment.default.utc(date).endOf('M'));
 exports.getMonthEndDate = getMonthEndDate;
-const getTimezones = () => Object.keys(_timezones.TIMEZONES).reduce((menuOptions, key) => {
+const getTimezones = t => Object.keys(_timezones.TIMEZONES).reduce((menuOptions, key) => {
   menuOptions.push({
     key,
-    label: _timezones.TIMEZONES[key]
+    label: getTranslation(t, _timezones.TIMEZONES[key])
   });
   return menuOptions;
 }, []);
@@ -205,12 +222,14 @@ const getAvailableMonths = _ref6 => {
     minDate,
     maxDate,
     rangeStartMonth,
-    rangeEndMonth
+    rangeEndMonth,
+    t
   } = _ref6;
   const [rangeStartMonthKey, rangeStartYear] = getMonthAndYear(rangeStartMonth);
   const [rangeEndMonthKey, rangeEndYear] = getMonthAndYear(rangeEndMonth);
   const [minDateMonth, minDateYear] = getMonthAndYear(minDate);
   const [maxDateMonth, maxDateYear] = getMonthAndYear(maxDate);
+  const MONTHS = getMonths(t);
   return MONTHS.filter(month => {
     const isSameYear = rangeStartYear === rangeEndYear;
     const isFirstAndMinDateYearSame = rangeStartYear === minDateYear;
@@ -241,7 +260,8 @@ const getValidDates = _ref7 => {
     minDate,
     maxDate,
     today,
-    onError
+    onError,
+    t
   } = _ref7;
   const {
     startDate,
@@ -252,10 +272,10 @@ const getValidDates = _ref7 => {
   const isRangeValid = (min, max, errorMessage) => checkRangeValidity(min, max, errorMessage, onError);
 
   // minDate should be after maxDate
-  const isMinMaxRangeInvalid = !isRangeValid(validMinDate, validMaxDate, DATE_RANGE_PICKER_ERRORS.MIN_MAX_INVALID);
+  const isMinMaxRangeInvalid = !isRangeValid(validMinDate, validMaxDate, getDateRangePickerErrors(t).MIN_MAX_INVALID);
 
   // if startDate is defined and then it should be after minDate
-  const isStartDateInvalid = isMinMaxRangeInvalid || (0, _lodash.isEmpty)(startDate) || !isRangeValid(validMinDate, startDate, DATE_RANGE_PICKER_ERRORS.START_DATE_EARLY);
+  const isStartDateInvalid = isMinMaxRangeInvalid || (0, _lodash.isEmpty)(startDate) || !isRangeValid(validMinDate, startDate, getDateRangePickerErrors(t).START_DATE_EARLY);
   if (isMinMaxRangeInvalid || isStartDateInvalid) {
     return {
       validDateRange: {
@@ -267,10 +287,10 @@ const getValidDates = _ref7 => {
     };
   }
   // if endDate is defined then it should be before maxDate
-  const isEndDateInvalid = (0, _lodash.isEmpty)(endDate) || !isRangeValid(endDate, validMaxDate, DATE_RANGE_PICKER_ERRORS.END_DATE_LATE);
+  const isEndDateInvalid = (0, _lodash.isEmpty)(endDate) || !isRangeValid(endDate, validMaxDate, getDateRangePickerErrors(t).END_DATE_LATE);
 
   // startDate should be before endDate
-  const isStartEndRangeInvalid = isEndDateInvalid || !isRangeValid(startDate, endDate, DATE_RANGE_PICKER_ERRORS.START_DATE_LATE);
+  const isStartEndRangeInvalid = isEndDateInvalid || !isRangeValid(startDate, endDate, getDateRangePickerErrors(t).START_DATE_LATE);
   if (isEndDateInvalid || isStartEndRangeInvalid) {
     return {
       validDateRange: {
@@ -319,11 +339,16 @@ const isBetween = (date, startRange, endRange) => _moment.default.utc(date).isBe
 exports.isBetween = isBetween;
 const isValid = date => _moment.default.utc(date).isValid();
 exports.isValid = isValid;
-const getFormattedDate = (marker, dateRange) => {
+const getFormattedDate = (marker, dateRange, locale) => {
   const {
     startDate,
     endDate
   } = dateRange;
+
+  // set locale if provided
+  if (locale) {
+    _moment.default.locale(locale);
+  }
   switch (marker) {
     case MARKERS.DATE_RANGE_START:
       return startDate ? _moment.default.utc(startDate).format('MMM DD, YYYY') : 'MMM DD, YYYY';
@@ -331,4 +356,6 @@ const getFormattedDate = (marker, dateRange) => {
       return endDate ? _moment.default.utc(endDate).format('MMM DD, YYYY') : 'MMM DD, YYYY';
   }
 };
-exports.getFormattedDate = getFormattedDate;
+exports.getFormattedDate = getFormattedDate;
+const getTranslation = (t, labelToTranslate) => t ? t(makeKey(labelToTranslate), labelToTranslate) : labelToTranslate;
+exports.getTranslation = getTranslation;

package/lib/utils/date-range-picker/date-range-picker.js.flow

@@ -9,6 +9,7 @@ import moment from 'moment';
 import type {
   DateRange,
   DateRangePickerError,
+  DateRangePickerErrorTypes,
   DateRangeWithTimezone,
   TimeUnit,
 } from 'src/types/date-range-picker';
@@ -18,6 +19,22 @@ import type {MenuOption} from '../../components/Menu';
 import {TIMEZONES} from './timezones';
 
 
+export const makeKey = (value: string): string => {
+  try {
+    if (value && typeof value === 'string') {
+      return value
+        .replace(/\(s\)/gi, '_s') // Replace (s) with _s (case-insensitive)
+        .replace(/[^\w\s']/g, '') // Remove special chars except apostrophes
+        .replace(/\s+/g, '_') // Spaces → underscores
+        .replace(/_+/g, '_') // Collapse multiple ____ into _
+        .replace(/^_|_$/g, ''); // Trim leading/trailing _
+    }
+    return value;
+  } catch {
+    return value;
+  }
+};
+
 export const NAVIGATION_ACTION = Object.freeze({
   NEXT: 'next',
   PREV: 'prev',
@@ -27,37 +44,47 @@ export const MARKERS = Object.freeze({
   DATE_RANGE_END: 'SECOND',
 });
 export const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-export const MONTHS = [
-  {key: '0', label: 'Jan'},
-  {key: '1', label: 'Feb'},
-  {key: '2', label: 'Mar'},
-  {key: '3', label: 'Apr'},
-  {key: '4', label: 'May'},
-  {key: '5', label: 'Jun'},
-  {key: '6', label: 'Jul'},
-  {key: '7', label: 'Aug'},
-  {key: '8', label: 'Sep'},
-  {key: '9', label: 'Oct'},
-  {key: '10', label: 'Nov'},
-  {key: '11', label: 'Dec'},
+export const getMonths = (
+  t: ?(key: string, fallback: string) => string,
+): Array<MenuOption> => [
+  {key: '0', label: getTranslation(t, 'Jan')},
+  {key: '1', label: getTranslation(t, 'Feb')},
+  {key: '2', label: getTranslation(t, 'Mar')},
+  {key: '3', label: getTranslation(t, 'Apr')},
+  {key: '4', label: getTranslation(t, 'May')},
+  {key: '5', label: getTranslation(t, 'Jun')},
+  {key: '6', label: getTranslation(t, 'Jul')},
+  {key: '7', label: getTranslation(t, 'Aug')},
+  {key: '8', label: getTranslation(t, 'Sep')},
+  {key: '9', label: getTranslation(t, 'Oct')},
+  {key: '10', label: getTranslation(t, 'Nov')},
+  {key: '11', label: getTranslation(t, 'Dec')},
 ];
 
-export const DATE_RANGE_PICKER_ERRORS = Object.freeze({
+export const getDateRangePickerErrors = (
+  t: ?(key: string, fallback: string) => string,
+): DateRangePickerErrorTypes => ({
   MIN_MAX_INVALID: {
     type: 'MIN_MAX_INVALID',
-    description: 'Given minDate and maxDate are invalid.',
+    description: getTranslation(t, 'Given minDate and maxDate are invalid.'),
   },
   START_DATE_EARLY: {
     type: 'START_DATE_EARLY',
-    description: 'Given startDate can not come before minDate.',
+    description: getTranslation(
+      t,
+      'Given startDate can not come before minDate.',
+    ),
   },
   START_DATE_LATE: {
     type: 'START_DATE_LATE',
-    description: 'Given startDate can not come after endDate.',
+    description: getTranslation(
+      t,
+      'Given startDate can not come after endDate.',
+    ),
   },
   END_DATE_LATE: {
     type: 'END_DATE_LATE',
-    description: 'Given endDate can not come after maxDate.',
+    description: getTranslation(t, 'Given endDate can not come after maxDate.'),
   },
 });
 
@@ -168,11 +195,13 @@ export const getSubtractedDate = (
 export const getMonthEndDate = (date: string): string =>
   formatIsoDate(moment.utc(date).endOf('M'));
 
-export const getTimezones = (): Array<MenuOption> =>
+export const getTimezones = (
+  t: ?(key: string, fallback: string) => string,
+): Array<MenuOption> =>
   Object.keys(TIMEZONES).reduce((menuOptions, key) => {
     menuOptions.push({
       key,
-      label: TIMEZONES[key],
+      label: getTranslation(t, TIMEZONES[key]),
     });
     return menuOptions;
   }, []);
@@ -212,17 +241,20 @@ export const getAvailableMonths = ({
   maxDate,
   rangeStartMonth,
   rangeEndMonth,
+  t,
 }: {
   marker: $Values<typeof MARKERS>,
   minDate: string,
   maxDate: string,
   rangeStartMonth: string,
   rangeEndMonth: string,
+  t: ?(key: string, fallback: string) => string,
 }): Array<MenuOption> => {
   const [rangeStartMonthKey, rangeStartYear] = getMonthAndYear(rangeStartMonth);
   const [rangeEndMonthKey, rangeEndYear] = getMonthAndYear(rangeEndMonth);
   const [minDateMonth, minDateYear] = getMonthAndYear(minDate);
   const [maxDateMonth, maxDateYear] = getMonthAndYear(maxDate);
+  const MONTHS = getMonths(t);
 
   return MONTHS.filter((month: MenuOption) => {
     const isSameYear = rangeStartYear === rangeEndYear;
@@ -255,12 +287,14 @@ export const getValidDates = ({
   maxDate,
   today,
   onError,
+  t,
 }: {
   selectedDateRange: DateRangeWithTimezone,
   minDate?: ?string,
   maxDate?: ?string,
   today: string,
   onError?: (DateRangePickerError) => void,
+  t: ?(key: string, fallback: string) => string,
 }): {
   validMinDate: string,
   validMaxDate: string,
@@ -279,7 +313,7 @@ export const getValidDates = ({
   const isMinMaxRangeInvalid = !isRangeValid(
     validMinDate,
     validMaxDate,
-    DATE_RANGE_PICKER_ERRORS.MIN_MAX_INVALID,
+    getDateRangePickerErrors(t).MIN_MAX_INVALID,
   );
 
   // if startDate is defined and then it should be after minDate
@@ -289,7 +323,7 @@ export const getValidDates = ({
     !isRangeValid(
       validMinDate,
       startDate,
-      DATE_RANGE_PICKER_ERRORS.START_DATE_EARLY,
+      getDateRangePickerErrors(t).START_DATE_EARLY,
     );
 
   if (isMinMaxRangeInvalid || isStartDateInvalid) {
@@ -305,13 +339,17 @@ export const getValidDates = ({
     !isRangeValid(
       endDate,
       validMaxDate,
-      DATE_RANGE_PICKER_ERRORS.END_DATE_LATE,
+      getDateRangePickerErrors(t).END_DATE_LATE,
     );
 
   // startDate should be before endDate
   const isStartEndRangeInvalid =
     isEndDateInvalid ||
-    !isRangeValid(startDate, endDate, DATE_RANGE_PICKER_ERRORS.START_DATE_LATE);
+    !isRangeValid(
+      startDate,
+      endDate,
+      getDateRangePickerErrors(t).START_DATE_LATE,
+    );
 
   if (isEndDateInvalid || isStartEndRangeInvalid) {
     return {
@@ -376,8 +414,15 @@ export const isValid = (date?: ?string): boolean => moment.utc(date).isValid();
 export const getFormattedDate = (
   marker: string,
   dateRange: DateRange,
+  locale?: string,
 ): string => {
   const {startDate, endDate} = dateRange;
+
+  // set locale if provided
+  if (locale) {
+    moment.locale(locale);
+  }
+
   switch (marker) {
   case MARKERS.DATE_RANGE_START:
     return startDate
@@ -389,3 +434,9 @@ export const getFormattedDate = (
       : 'MMM DD, YYYY';
   }
 };
+
+export const getTranslation = (
+  t: ?(key: string, fallback: string) => string,
+  labelToTranslate: string,
+): string =>
+  t ? t(makeKey(labelToTranslate), labelToTranslate) : labelToTranslate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {