npm - @kaizen/components - Versions diffs - 1.53.0 → 1.54.1 - Mend

@kaizen/components 1.53.0 → 1.54.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/cjs/Calendar/CalendarRange/CalendarRange.cjs CHANGED Viewed

@@ -8,7 +8,6 @@ require('../../Icon/subcomponents/SVG/SVG.cjs');
 var ArrowBackwardIcon = require('../../Icon/ArrowBackwardIcon.cjs');
 var ArrowForwardIcon = require('../../Icon/ArrowForwardIcon.cjs');
 var baseCalendarClassNames = require('../baseCalendarClassNames.cjs');
-var enums = require('../enums.cjs');
 require('date-fns');
 var isInvalidDate = require('../utils/isInvalidDate.cjs');
 var CalendarRange_module = require('./CalendarRange.module.scss.cjs');
@@ -53,7 +52,6 @@ var CalendarRange = function (_a) {
     mode: "range",
     selected: selected,
     defaultMonth: selectedMonth,
-    weekStartsOn: enums.DayOfWeek.Mon,
     classNames: classNames,
     components: {
       IconRight: function () {

package/dist/cjs/Calendar/CalendarSingle/CalendarSingle.cjs CHANGED Viewed

@@ -8,7 +8,6 @@ require('../../Icon/subcomponents/SVG/SVG.cjs');
 var ArrowBackwardIcon = require('../../Icon/ArrowBackwardIcon.cjs');
 var ArrowForwardIcon = require('../../Icon/ArrowForwardIcon.cjs');
 var baseCalendarClassNames = require('../baseCalendarClassNames.cjs');
-var enums = require('../enums.cjs');
 require('date-fns');
 var isInvalidDate = require('../utils/isInvalidDate.cjs');
 var isValidWeekStartsOn = require('../utils/isValidWeekStartsOn.cjs');
@@ -25,10 +24,9 @@ var CalendarSingle = function (_a) {
     classNameOverride = _a.classNameOverride,
     selected = _a.selected,
     defaultMonth = _a.defaultMonth,
-    _b = _a.weekStartsOn,
-    weekStartsOn = _b === void 0 ? enums.DayOfWeek.Mon : _b,
-    _c = _a.locale,
-    locale$1 = _c === void 0 ? locale.enAU : _c,
+    weekStartsOn = _a.weekStartsOn,
+    _b = _a.locale,
+    locale$1 = _b === void 0 ? locale.enAU : _b,
     restProps = tslib.__rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale"]);
   var calendarRef = React.useRef(null);
   React.useEffect(function () {

package/dist/cjs/DatePicker/utils/getLocale.cjs CHANGED Viewed

@@ -3,14 +3,105 @@
 var locale = require('date-fns/locale');
 var getLocale = function (locale$1) {
   switch (locale$1) {
-    case "en-AU":
-      return locale.enAU;
+    case "zh":
+      return locale.zhCN;
+    case "zh-TW":
+      return locale.zhTW;
+    case "da":
+      return locale.da;
+    case "nl":
+      return locale.nl;
     case "en-US":
       return locale.enUS;
+    case "fr":
+      return locale.fr;
+    case "de":
+      return locale.de;
+    case "he":
+      return locale.he;
+    case "it":
+      return locale.it;
+    case "ja":
+      return locale.ja;
+    case "ko":
+    case "kr":
+      return locale.ko;
+    case "es-419":
+      return locale.es;
+    case "sv":
+      return locale.sv;
+    case "ru":
+      return locale.ru;
+    // @todo: Add when locale is available https://github.com/date-fns/date-fns/issues/2627
+    // case "mi":
+    // return miNZ
+    case "pl":
+      return locale.pl;
+    case "pt-BR":
+      return locale.ptBR;
+    case "uk":
+      return locale.uk;
+    case "en":
+    case "en-GB":
+    case "en-AU":
+      return locale.enGB;
+    case "ar":
+      return locale.arSA;
+    case "bg":
+      return locale.bg;
+    case "cs":
+      return locale.cs;
+    case "et":
+      return locale.et;
+    case "fi":
+      return locale.fi;
     case "fr-CA":
       return locale.frCA;
+    case "ht":
+      return locale.ht;
+    case "el":
+      return locale.el;
+    case "hi":
+      return locale.hi;
+    case "hu":
+      return locale.hu;
+    case "id":
+      return locale.id;
+    case "km-KH":
+      return locale.km;
+    case "lv":
+      return locale.lv;
+    case "lt":
+      return locale.lt;
+    case "ms":
+      return locale.ms;
+    case "nb":
+    case "no":
+      return locale.nb;
+    case "pt":
+      return locale.pt;
+    case "ro":
+      return locale.ro;
+    case "sr":
+      return locale.sr;
+    // case "si-LK":
+    //   return siLK
+    case "sk":
+      return locale.sk;
+    case "es":
+      return locale.es;
+    // case "tl":
+    //   return tlPH
+    case "th":
+      return locale.th;
+    case "tr":
+      return locale.tr;
+    case "vi":
+      return locale.vi;
+    case "cy":
+      return locale.cy;
     default:
-      return locale.enAU;
+      return locale.enGB;
   }
 };
 exports.getLocale = getLocale;

package/dist/esm/Calendar/CalendarRange/CalendarRange.mjs CHANGED Viewed

@@ -6,7 +6,6 @@ import '../../Icon/subcomponents/SVG/SVG.mjs';
 import { ArrowBackwardIcon } from '../../Icon/ArrowBackwardIcon.mjs';
 import { ArrowForwardIcon } from '../../Icon/ArrowForwardIcon.mjs';
 import { baseCalendarClassNames } from '../baseCalendarClassNames.mjs';
-import { DayOfWeek } from '../enums.mjs';
 import 'date-fns';
 import { isInvalidDate } from '../utils/isInvalidDate.mjs';
 import styles from './CalendarRange.module.scss.mjs';
@@ -46,7 +45,6 @@ const CalendarRange = /*#__PURE__*/function () {
       mode: "range",
       selected: selected,
       defaultMonth: selectedMonth,
-      weekStartsOn: DayOfWeek.Mon,
       classNames: classNames,
       components: {
         IconRight: function () {

package/dist/esm/Calendar/CalendarSingle/CalendarSingle.mjs CHANGED Viewed

@@ -6,7 +6,6 @@ import '../../Icon/subcomponents/SVG/SVG.mjs';
 import { ArrowBackwardIcon } from '../../Icon/ArrowBackwardIcon.mjs';
 import { ArrowForwardIcon } from '../../Icon/ArrowForwardIcon.mjs';
 import { baseCalendarClassNames } from '../baseCalendarClassNames.mjs';
-import { DayOfWeek } from '../enums.mjs';
 import 'date-fns';
 import { isInvalidDate } from '../utils/isInvalidDate.mjs';
 import { isValidWeekStartsOn } from '../utils/isValidWeekStartsOn.mjs';
@@ -18,10 +17,9 @@ const CalendarSingle = /*#__PURE__*/function () {
       classNameOverride = _a.classNameOverride,
       selected = _a.selected,
       defaultMonth = _a.defaultMonth,
-      _b = _a.weekStartsOn,
-      weekStartsOn = _b === void 0 ? DayOfWeek.Mon : _b,
-      _c = _a.locale,
-      locale = _c === void 0 ? enAU : _c,
+      weekStartsOn = _a.weekStartsOn,
+      _b = _a.locale,
+      locale = _b === void 0 ? enAU : _b,
       restProps = __rest(_a, ["id", "onMount", "classNameOverride", "selected", "defaultMonth", "weekStartsOn", "locale"]);
     var calendarRef = useRef(null);
     useEffect(function () {

package/dist/esm/DatePicker/utils/getLocale.mjs CHANGED Viewed

@@ -1,14 +1,105 @@
-import { enAU, frCA, enUS } from 'date-fns/locale';
+import { enGB, cy, vi, tr, th, es, sk, sr, ro, pt, nb, ms, lt, lv, km, id, hu, hi, el, ht, frCA, fi, et, cs, bg, arSA, uk, ptBR, pl, ru, sv, ko, ja, it, he, de, fr, enUS, nl, da, zhTW, zhCN } from 'date-fns/locale';
 var getLocale = function (locale) {
   switch (locale) {
-    case "en-AU":
-      return enAU;
+    case "zh":
+      return zhCN;
+    case "zh-TW":
+      return zhTW;
+    case "da":
+      return da;
+    case "nl":
+      return nl;
     case "en-US":
       return enUS;
+    case "fr":
+      return fr;
+    case "de":
+      return de;
+    case "he":
+      return he;
+    case "it":
+      return it;
+    case "ja":
+      return ja;
+    case "ko":
+    case "kr":
+      return ko;
+    case "es-419":
+      return es;
+    case "sv":
+      return sv;
+    case "ru":
+      return ru;
+    // @todo: Add when locale is available https://github.com/date-fns/date-fns/issues/2627
+    // case "mi":
+    // return miNZ
+    case "pl":
+      return pl;
+    case "pt-BR":
+      return ptBR;
+    case "uk":
+      return uk;
+    case "en":
+    case "en-GB":
+    case "en-AU":
+      return enGB;
+    case "ar":
+      return arSA;
+    case "bg":
+      return bg;
+    case "cs":
+      return cs;
+    case "et":
+      return et;
+    case "fi":
+      return fi;
     case "fr-CA":
       return frCA;
+    case "ht":
+      return ht;
+    case "el":
+      return el;
+    case "hi":
+      return hi;
+    case "hu":
+      return hu;
+    case "id":
+      return id;
+    case "km-KH":
+      return km;
+    case "lv":
+      return lv;
+    case "lt":
+      return lt;
+    case "ms":
+      return ms;
+    case "nb":
+    case "no":
+      return nb;
+    case "pt":
+      return pt;
+    case "ro":
+      return ro;
+    case "sr":
+      return sr;
+    // case "si-LK":
+    //   return siLK
+    case "sk":
+      return sk;
+    case "es":
+      return es;
+    // case "tl":
+    //   return tlPH
+    case "th":
+      return th;
+    case "tr":
+      return tr;
+    case "vi":
+      return vi;
+    case "cy":
+      return cy;
     default:
-      return enAU;
+      return enGB;
   }
 };
 export { getLocale };

package/dist/types/DatePicker/DatePicker.d.ts CHANGED Viewed

@@ -14,8 +14,8 @@ export type DatePickerProps = {
     onButtonClick?: DateInputFieldProps["onButtonClick"];
     locale?: DatePickerSupportedLocales;
     /**
-     * Accepts a DayOfWeek value to start the week on that day. By default,
-     * it's set to Monday.
+     * Accepts a DayOfWeek value to start the week on that day.
+     * By default it adapts to the provided locale.
      */
     weekStartsOn?: CalendarSingleProps["weekStartsOn"];
     /**

package/dist/types/DatePicker/utils/getLocale.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
 import type { Locale } from "date-fns";
-import { StringSuggestions } from "../../types/StringSuggestions";
-export type DatePickerSupportedLocales = StringSuggestions<"en-US" | "en-AU" | "fr-CA">;
+export type DatePickerSupportedLocales = string;
 export declare const getLocale: (locale: DatePickerSupportedLocales) => Locale;

package/dist/types/DateRangePicker/DateRangePicker.d.ts CHANGED Viewed

@@ -21,8 +21,8 @@ export type DateRangePickerProps = {
      */
     value?: string;
     /**
-     * Accepts a DayOfWeek value to start the week on that day. By default,
-     * it's set to Monday.
+     * Accepts a DayOfWeek value to start the week on that day.
+     * By default it adapts to the provided locale.
      */
     weekStartsOn?: LegacyCalendarRangeProps["weekStartsOn"];
     /**

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.53.0",
+  "version": "1.54.1",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -76,19 +76,19 @@
     "react-textfit": "^1.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "use-debounce": "^10.0.1",
-    "uuid": "^9.0.1",
+    "uuid": "^10.0.0",
     "@kaizen/hosted-assets": "2.0.3"
   },
   "dependenciesComments": {
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
   },
   "devDependencies": {
-    "@cultureamp/frontend-apis": "^9.5.0",
+    "@cultureamp/frontend-apis": "^9.5.1",
     "@cultureamp/i18n-react-intl": "^2.5.8",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-dom": "^18.3.0",
     "@types/react-textfit": "^1.1.4",
-    "@types/uuid": "^9.0.8",
+    "@types/uuid": "^10.0.0",
     "autoprefixer": "^10.4.19",
     "concat-cli": "^4.0.0",
     "query-string": "^9.0.0",
@@ -100,7 +100,7 @@
     "ts-jest": "^29.1.4",
     "tslib": "^2.6.3",
     "tsx": "^4.15.1",
-    "@kaizen/design-tokens": "10.4.1",
+    "@kaizen/design-tokens": "10.4.2",
     "@kaizen/package-bundler": "1.1.2"
   },
   "devDependenciesComments": {

package/src/Calendar/CalendarRange/CalendarRange.tsx CHANGED Viewed

@@ -4,7 +4,6 @@ import { DayPicker, DayPickerRangeProps } from "react-day-picker"
 import { ArrowBackwardIcon, ArrowForwardIcon } from "~components/Icon"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { baseCalendarClassNames } from "../baseCalendarClassNames"
-import { DayOfWeek } from "../enums"
 import { isInvalidDate } from "../utils"
 import styles from "./CalendarRange.module.scss"
@@ -54,7 +53,6 @@ export const CalendarRange = ({
         mode="range"
         selected={selected}
         defaultMonth={selectedMonth}
-        weekStartsOn={DayOfWeek.Mon}
         classNames={classNames}
         components={{
           IconRight: () => <ArrowForwardIcon role="presentation" />,

package/src/Calendar/CalendarSingle/CalendarSingle.tsx CHANGED Viewed

@@ -4,7 +4,6 @@ import { DayPicker, DayPickerSingleProps } from "react-day-picker"
 import { ArrowBackwardIcon, ArrowForwardIcon } from "~components/Icon"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { baseCalendarClassNames } from "../baseCalendarClassNames"
-import { DayOfWeek } from "../enums"
 import { isInvalidDate, isValidWeekStartsOn } from "../utils"
 import styles from "./CalendarSingle.module.scss"
@@ -21,7 +20,7 @@ export const CalendarSingle = ({
   classNameOverride,
   selected,
   defaultMonth,
-  weekStartsOn = DayOfWeek.Mon,
+  weekStartsOn,
   locale = enAU,
   ...restProps
 }: CalendarSingleProps): JSX.Element => {

package/src/DatePicker/DatePicker.tsx CHANGED Viewed

@@ -46,8 +46,8 @@ export type DatePickerProps = {
   onButtonClick?: DateInputFieldProps["onButtonClick"]
   locale?: DatePickerSupportedLocales
   /**
-   * Accepts a DayOfWeek value to start the week on that day. By default,
-   * it's set to Monday.
+   * Accepts a DayOfWeek value to start the week on that day.
+   * By default it adapts to the provided locale.
    */
   weekStartsOn?: CalendarSingleProps["weekStartsOn"]
   /**

package/src/DatePicker/_docs/DatePicker.mdx CHANGED Viewed

@@ -42,8 +42,6 @@ Pass the values to `selectedDay` (can be passed a pre-loaded value) and `onDayCh
 Change the locale of the date-related elements within the DatePicker.
 This changes the input format and the contents in the calendar.
-Currently only supports `"en-AU"` and `"en-US"`.
 <Canvas of={DatePickerStories.Locale} />
 ### Description

package/src/DatePicker/_docs/controls/datePickerLocaleControls.ts CHANGED Viewed

@@ -1,10 +1,16 @@
+import { LOCALE_REGIONS } from "@cultureamp/i18n-react-intl"
 import { ArgTypes } from "@storybook/react"
-const DATE_PICKER_SUPPORTED_LOCALES = ["en-US", "en-AU", "fr-CA"]
+const DATE_PICKER_SUPPORTED_LOCALES = [
+  ...Object.keys(LOCALE_REGIONS),
+  // The following are for murmur
+  "kr",
+  "no",
+]
 export const datePickerLocaleControls: Partial<ArgTypes> = {
   locale: {
     options: DATE_PICKER_SUPPORTED_LOCALES,
-    control: { type: "radio" },
+    control: { type: "select" },
   },
 }

package/src/DatePicker/_docs/getLocale.stickersheet.stories.tsx ADDED Viewed

@@ -0,0 +1,49 @@
+import React from "react"
+import { LOCALE_REGIONS } from "@cultureamp/i18n-react-intl"
+import { Meta } from "@storybook/react"
+import { CalendarSingle } from "~components/Calendar"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { getLocale } from "../utils/getLocale"
+export default {
+  title: "Components/Date controls/DatePicker/Tests",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+export const UtilGetLocale: StickerSheetStory = {
+  // Skip running this with test-storybook (still runs in Chromatic) as it times out
+  tags: ["skip-test"],
+  name: "Util - getLocale",
+  render: () => {
+    const locales = [
+      ...Object.keys(LOCALE_REGIONS),
+      // The following are for murmur
+      "kr",
+      "no",
+      // Old API values
+      "en-AU",
+      "en-US",
+    ]
+    return (
+      <StickerSheet heading="Util - getLocale">
+        <StickerSheet.Body>
+          {locales.map(locale => (
+            <StickerSheet.Row key={locale} rowTitle={locale}>
+              <CalendarSingle
+                defaultMonth={new Date("2021-09-05")}
+                locale={getLocale(locale)}
+              />
+            </StickerSheet.Row>
+          ))}
+        </StickerSheet.Body>
+      </StickerSheet>
+    )
+  },
+}

package/src/DatePicker/utils/getLocale.spec.ts CHANGED Viewed

@@ -1,8 +1,8 @@
-import { enAU } from "date-fns/locale"
+import { enGB } from "date-fns/locale"
 import { getLocale } from "./getLocale"
 describe("getLocale", () => {
   it("retrieves fallback value when passed an unsupported locale", () => {
-    expect(getLocale("invalid")).toEqual(enAU)
+    expect(getLocale("invalid")).toEqual(enGB)
   })
 })

package/src/DatePicker/utils/getLocale.ts CHANGED Viewed

@@ -1,21 +1,152 @@
 import type { Locale } from "date-fns"
-import { enAU, enUS, frCA } from "date-fns/locale"
-import { StringSuggestions } from "~types/StringSuggestions"
+import {
+  arSA,
+  bg,
+  cs,
+  cy,
+  da,
+  de,
+  el,
+  enGB,
+  enUS,
+  es,
+  et,
+  fi,
+  fr,
+  frCA,
+  he,
+  hi,
+  ht,
+  hu,
+  id,
+  it,
+  ja,
+  km,
+  ko,
+  lt,
+  lv,
+  ms,
+  nb,
+  nl,
+  pl,
+  pt,
+  ptBR,
+  ro,
+  ru,
+  sk,
+  sr,
+  sv,
+  th,
+  tr,
+  uk,
+  vi,
+  zhCN,
+  zhTW,
+} from "date-fns/locale"
 // Ensure you update the storybook DATE_PICKER_SUPPORTED_LOCALES arg options when updating DatePickerSupportedLocales.
-export type DatePickerSupportedLocales = StringSuggestions<
-  "en-US" | "en-AU" | "fr-CA"
->
+export type DatePickerSupportedLocales = string
 export const getLocale = (locale: DatePickerSupportedLocales): Locale => {
   switch (locale) {
-    case "en-AU":
-      return enAU
+    case "zh":
+      return zhCN
+    case "zh-TW":
+      return zhTW
+    case "da":
+      return da
+    case "nl":
+      return nl
     case "en-US":
       return enUS
+    case "fr":
+      return fr
+    case "de":
+      return de
+    case "he":
+      return he
+    case "it":
+      return it
+    case "ja":
+      return ja
+    case "ko":
+    case "kr":
+      return ko
+    case "es-419":
+      return es
+    case "sv":
+      return sv
+    case "ru":
+      return ru
+    // @todo: Add when locale is available https://github.com/date-fns/date-fns/issues/2627
+    // case "mi":
+    // return miNZ
+    case "pl":
+      return pl
+    case "pt-BR":
+      return ptBR
+    case "uk":
+      return uk
+    case "en":
+    case "en-GB":
+    case "en-AU":
+      return enGB
+    case "ar":
+      return arSA
+    case "bg":
+      return bg
+    case "cs":
+      return cs
+    case "et":
+      return et
+    case "fi":
+      return fi
     case "fr-CA":
       return frCA
+    case "ht":
+      return ht
+    case "el":
+      return el
+    case "hi":
+      return hi
+    case "hu":
+      return hu
+    case "id":
+      return id
+    case "km-KH":
+      return km
+    case "lv":
+      return lv
+    case "lt":
+      return lt
+    case "ms":
+      return ms
+    case "nb":
+    case "no":
+      return nb
+    case "pt":
+      return pt
+    case "ro":
+      return ro
+    case "sr":
+      return sr
+    // case "si-LK":
+    //   return siLK
+    case "sk":
+      return sk
+    case "es":
+      return es
+    // case "tl":
+    //   return tlPH
+    case "th":
+      return th
+    case "tr":
+      return tr
+    case "vi":
+      return vi
+    case "cy":
+      return cy
     default:
-      return enAU
+      return enGB
   }
 }

package/src/DateRangePicker/DateRangePicker.tsx CHANGED Viewed

@@ -37,8 +37,8 @@ export type DateRangePickerProps = {
    */
   value?: string
   /**
-   * Accepts a DayOfWeek value to start the week on that day. By default,
-   * it's set to Monday.
+   * Accepts a DayOfWeek value to start the week on that day.
+   * By default it adapts to the provided locale.
    */
   weekStartsOn?: LegacyCalendarRangeProps["weekStartsOn"]
   /**

package/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx CHANGED Viewed

@@ -178,4 +178,10 @@ export const StickerSheetLocales: StickerSheetStory = {
       </div>
     ),
   ],
+  parameters: {
+    a11y: {
+      // Wait for translations to load
+      timeout: 1500,
+    },
+  },
 }