@schedule-x/date-picker - npm Package Compare versions

Comparing version 1.5.1 to 1.6.0

./dist/core.cjs.js

@@ -77,2 +77,4 @@ 'use strict';
 
+const isKeyEnterOrSpace = (keyboardEvent) => keyboardEvent.key === 'Enter' || keyboardEvent.key === ' ';
+
 function AppInput() {
@@ -118,5 +120,5 @@ const datePickerLabelId = randomStringId();
     };
-    const handleButtonKeyDown = (e) => {
-        if (e.key === ' ' || e.key === 'Enter') {
-            e.preventDefault();
+    const handleButtonKeyDown = (keyboardEvent) => {
+        if (isKeyEnterOrSpace(keyboardEvent)) {
+            keyboardEvent.preventDefault();
             $app.datePickerState.open();
@@ -212,3 +214,7 @@ setTimeout(() => {
 function Chevron({ direction, onClick, buttonText }) {
-    return (u("button", { className: "sx__chevron-wrapper sx__ripple", onClick: onClick, children: u("i", { className: `sx__chevron sx__chevron--${direction}`, children: buttonText }) }));
+    const handleKeyDown = (keyboardEvent) => {
+        if (isKeyEnterOrSpace(keyboardEvent))
+            onClick();
+    };
+    return (u("button", { className: "sx__chevron-wrapper sx__ripple", onMouseUp: onClick, onKeyDown: handleKeyDown, tabIndex: 0, children: u("i", { className: `sx__chevron sx__chevron--${direction}`, children: buttonText }) }));
 }
@@ -262,2 +268,12 @@
 
+const dateFn = (dateTimeString, locale) => {
+    const { year, month, date } = toIntegers(dateTimeString);
+    return new Date(year, month, date).toLocaleDateString(locale, {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+    });
+};
+const getLocalizedDate = dateFn;
+
 function MonthViewWeek({ week }) {
@@ -302,3 +318,3 @@ const $app = hooks.useContext(AppContext);
     };
-    return (u(preact.Fragment, { children: u("div", { "data-testid": DATE_PICKER_WEEK, className: "sx__date-picker__week", children: weekDays.map((weekDay) => (u("button", { tabIndex: hasFocus(weekDay) ? 0 : -1, disabled: !isDateSelectable(weekDay.day), "aria-label": toJSDate($app.datePickerState.datePickerDate.value).toLocaleDateString(), className: weekDay.classes.join(' '), "data-focus": hasFocus(weekDay) ? 'true' : undefined, onClick: () => selectDate(weekDay.day), onKeyDown: handleKeyDown, children: weekDay.day.getDate() }))) }) }));
+    return (u(preact.Fragment, { children: u("div", { "data-testid": DATE_PICKER_WEEK, className: "sx__date-picker__week", children: weekDays.map((weekDay) => (u("button", { tabIndex: hasFocus(weekDay) ? 0 : -1, disabled: !isDateSelectable(weekDay.day), "aria-label": getLocalizedDate($app.datePickerState.datePickerDate.value, $app.config.locale), className: weekDay.classes.join(' '), "data-focus": hasFocus(weekDay) ? 'true' : undefined, onClick: () => selectDate(weekDay.day), onKeyDown: handleKeyDown, children: weekDay.day.getDate() }))) }) }));
 }
@@ -899,2 +915,3 @@
     'Choose Date': 'Datum auswählen',
+    'Select View': 'Ansicht auswählen',
 };
@@ -910,2 +927,6 @@
     'No events': 'Keine Ereignisse',
+    'Next period': 'Nächster Zeitraum',
+    'Previous period': 'Vorheriger Zeitraum',
+    to: 'bis', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Ganztägige und mehrtägige Ereignisse',
 };
@@ -924,2 +945,3 @@
     'Choose Date': 'Choose Date',
+    'Select View': 'Select View',
 };
@@ -935,2 +957,6 @@
     'No events': 'No events',
+    'Next period': 'Next period',
+    'Previous period': 'Previous period',
+    to: 'to', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Full day- and multiple day events',
 };
@@ -949,2 +975,3 @@
     'Choose Date': 'Scegli la data',
+    'Select View': 'Seleziona la vista',
 };
@@ -960,2 +987,6 @@
     'No events': 'Nessun evento',
+    'Next period': 'Periodo successivo',
+    'Previous period': 'Periodo precedente',
+    to: 'a', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Eventi della giornata e plurigiornalieri',
 };
@@ -974,2 +1005,3 @@
     'Choose Date': 'Choose Date',
+    'Select View': 'Select View',
 };
@@ -985,2 +1017,6 @@
     'No events': 'No events',
+    'Next period': 'Next period',
+    'Previous period': 'Previous period',
+    to: 'to', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Full day- and multiple day events',
 };
@@ -999,2 +1035,3 @@
     'Choose Date': 'Välj datum',
+    'Select View': 'Välj vy',
 };
@@ -1010,2 +1047,6 @@
     'No events': 'Inga händelser',
+    'Next period': 'Nästa period',
+    'Previous period': 'Föregående period',
+    to: 'till', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Heldags- och flerdagshändelser',
 };
@@ -1024,2 +1065,3 @@
     'Choose Date': '选择日期',
+    'Select View': '选择视图',
 };
@@ -1035,2 +1077,6 @@
     'No events': '没有活动',
+    'Next period': '下一段时间',
+    'Previous period': '上一段时间',
+    to: '至', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': '全天和多天活动',
 };
@@ -1037,0 +1083,0 @@

dist/core.cjs.js

@@ -77,2 +77,4 @@ 'use strict';
 
+const isKeyEnterOrSpace = (keyboardEvent) => keyboardEvent.key === 'Enter' || keyboardEvent.key === ' ';
+
 function AppInput() {
@@ -118,5 +120,5 @@ const datePickerLabelId = randomStringId();
     };
-    const handleButtonKeyDown = (e) => {
-        if (e.key === ' ' || e.key === 'Enter') {
-            e.preventDefault();
+    const handleButtonKeyDown = (keyboardEvent) => {
+        if (isKeyEnterOrSpace(keyboardEvent)) {
+            keyboardEvent.preventDefault();
             $app.datePickerState.open();
@@ -212,3 +214,7 @@ setTimeout(() => {
 function Chevron({ direction, onClick, buttonText }) {
-    return (u("button", { className: "sx__chevron-wrapper sx__ripple", onClick: onClick, children: u("i", { className: `sx__chevron sx__chevron--${direction}`, children: buttonText }) }));
+    const handleKeyDown = (keyboardEvent) => {
+        if (isKeyEnterOrSpace(keyboardEvent))
+            onClick();
+    };
+    return (u("button", { className: "sx__chevron-wrapper sx__ripple", onMouseUp: onClick, onKeyDown: handleKeyDown, tabIndex: 0, children: u("i", { className: `sx__chevron sx__chevron--${direction}`, children: buttonText }) }));
 }
@@ -262,2 +268,12 @@
 
+const dateFn = (dateTimeString, locale) => {
+    const { year, month, date } = toIntegers(dateTimeString);
+    return new Date(year, month, date).toLocaleDateString(locale, {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+    });
+};
+const getLocalizedDate = dateFn;
+
 function MonthViewWeek({ week }) {
@@ -302,3 +318,3 @@ const $app = hooks.useContext(AppContext);
     };
-    return (u(preact.Fragment, { children: u("div", { "data-testid": DATE_PICKER_WEEK, className: "sx__date-picker__week", children: weekDays.map((weekDay) => (u("button", { tabIndex: hasFocus(weekDay) ? 0 : -1, disabled: !isDateSelectable(weekDay.day), "aria-label": toJSDate($app.datePickerState.datePickerDate.value).toLocaleDateString(), className: weekDay.classes.join(' '), "data-focus": hasFocus(weekDay) ? 'true' : undefined, onClick: () => selectDate(weekDay.day), onKeyDown: handleKeyDown, children: weekDay.day.getDate() }))) }) }));
+    return (u(preact.Fragment, { children: u("div", { "data-testid": DATE_PICKER_WEEK, className: "sx__date-picker__week", children: weekDays.map((weekDay) => (u("button", { tabIndex: hasFocus(weekDay) ? 0 : -1, disabled: !isDateSelectable(weekDay.day), "aria-label": getLocalizedDate($app.datePickerState.datePickerDate.value, $app.config.locale), className: weekDay.classes.join(' '), "data-focus": hasFocus(weekDay) ? 'true' : undefined, onClick: () => selectDate(weekDay.day), onKeyDown: handleKeyDown, children: weekDay.day.getDate() }))) }) }));
 }
@@ -899,2 +915,3 @@
     'Choose Date': 'Datum auswählen',
+    'Select View': 'Ansicht auswählen',
 };
@@ -910,2 +927,6 @@
     'No events': 'Keine Ereignisse',
+    'Next period': 'Nächster Zeitraum',
+    'Previous period': 'Vorheriger Zeitraum',
+    to: 'bis', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Ganztägige und mehrtägige Ereignisse',
 };
@@ -924,2 +945,3 @@
     'Choose Date': 'Choose Date',
+    'Select View': 'Select View',
 };
@@ -935,2 +957,6 @@
     'No events': 'No events',
+    'Next period': 'Next period',
+    'Previous period': 'Previous period',
+    to: 'to', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Full day- and multiple day events',
 };
@@ -949,2 +975,3 @@
     'Choose Date': 'Scegli la data',
+    'Select View': 'Seleziona la vista',
 };
@@ -960,2 +987,6 @@
     'No events': 'Nessun evento',
+    'Next period': 'Periodo successivo',
+    'Previous period': 'Periodo precedente',
+    to: 'a', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Eventi della giornata e plurigiornalieri',
 };
@@ -974,2 +1005,3 @@
     'Choose Date': 'Choose Date',
+    'Select View': 'Select View',
 };
@@ -985,2 +1017,6 @@
     'No events': 'No events',
+    'Next period': 'Next period',
+    'Previous period': 'Previous period',
+    to: 'to', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Full day- and multiple day events',
 };
@@ -999,2 +1035,3 @@
     'Choose Date': 'Välj datum',
+    'Select View': 'Välj vy',
 };
@@ -1010,2 +1047,6 @@
     'No events': 'Inga händelser',
+    'Next period': 'Nästa period',
+    'Previous period': 'Föregående period',
+    to: 'till', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Heldags- och flerdagshändelser',
 };
@@ -1024,2 +1065,3 @@
     'Choose Date': '选择日期',
+    'Select View': '选择视图',
 };
@@ -1035,2 +1077,6 @@
     'No events': '没有活动',
+    'Next period': '下一段时间',
+    'Previous period': '上一段时间',
+    to: '至', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': '全天和多天活动',
 };
@@ -1037,0 +1083,0 @@

dist/core.js

@@ -75,2 +75,4 @@ import { options, createContext, Fragment, render, createElement } from 'preact';
 
+const isKeyEnterOrSpace = (keyboardEvent) => keyboardEvent.key === 'Enter' || keyboardEvent.key === ' ';
+
 function AppInput() {
@@ -116,5 +118,5 @@ const datePickerLabelId = randomStringId();
     };
-    const handleButtonKeyDown = (e) => {
-        if (e.key === ' ' || e.key === 'Enter') {
-            e.preventDefault();
+    const handleButtonKeyDown = (keyboardEvent) => {
+        if (isKeyEnterOrSpace(keyboardEvent)) {
+            keyboardEvent.preventDefault();
             $app.datePickerState.open();
@@ -210,3 +212,7 @@ setTimeout(() => {
 function Chevron({ direction, onClick, buttonText }) {
-    return (u("button", { className: "sx__chevron-wrapper sx__ripple", onClick: onClick, children: u("i", { className: `sx__chevron sx__chevron--${direction}`, children: buttonText }) }));
+    const handleKeyDown = (keyboardEvent) => {
+        if (isKeyEnterOrSpace(keyboardEvent))
+            onClick();
+    };
+    return (u("button", { className: "sx__chevron-wrapper sx__ripple", onMouseUp: onClick, onKeyDown: handleKeyDown, tabIndex: 0, children: u("i", { className: `sx__chevron sx__chevron--${direction}`, children: buttonText }) }));
 }
@@ -260,2 +266,12 @@
 
+const dateFn = (dateTimeString, locale) => {
+    const { year, month, date } = toIntegers(dateTimeString);
+    return new Date(year, month, date).toLocaleDateString(locale, {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+    });
+};
+const getLocalizedDate = dateFn;
+
 function MonthViewWeek({ week }) {
@@ -300,3 +316,3 @@ const $app = useContext(AppContext);
     };
-    return (u(Fragment, { children: u("div", { "data-testid": DATE_PICKER_WEEK, className: "sx__date-picker__week", children: weekDays.map((weekDay) => (u("button", { tabIndex: hasFocus(weekDay) ? 0 : -1, disabled: !isDateSelectable(weekDay.day), "aria-label": toJSDate($app.datePickerState.datePickerDate.value).toLocaleDateString(), className: weekDay.classes.join(' '), "data-focus": hasFocus(weekDay) ? 'true' : undefined, onClick: () => selectDate(weekDay.day), onKeyDown: handleKeyDown, children: weekDay.day.getDate() }))) }) }));
+    return (u(Fragment, { children: u("div", { "data-testid": DATE_PICKER_WEEK, className: "sx__date-picker__week", children: weekDays.map((weekDay) => (u("button", { tabIndex: hasFocus(weekDay) ? 0 : -1, disabled: !isDateSelectable(weekDay.day), "aria-label": getLocalizedDate($app.datePickerState.datePickerDate.value, $app.config.locale), className: weekDay.classes.join(' '), "data-focus": hasFocus(weekDay) ? 'true' : undefined, onClick: () => selectDate(weekDay.day), onKeyDown: handleKeyDown, children: weekDay.day.getDate() }))) }) }));
 }
@@ -897,2 +913,3 @@
     'Choose Date': 'Datum auswählen',
+    'Select View': 'Ansicht auswählen',
 };
@@ -908,2 +925,6 @@
     'No events': 'Keine Ereignisse',
+    'Next period': 'Nächster Zeitraum',
+    'Previous period': 'Vorheriger Zeitraum',
+    to: 'bis', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Ganztägige und mehrtägige Ereignisse',
 };
@@ -922,2 +943,3 @@
     'Choose Date': 'Choose Date',
+    'Select View': 'Select View',
 };
@@ -933,2 +955,6 @@
     'No events': 'No events',
+    'Next period': 'Next period',
+    'Previous period': 'Previous period',
+    to: 'to', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Full day- and multiple day events',
 };
@@ -947,2 +973,3 @@
     'Choose Date': 'Scegli la data',
+    'Select View': 'Seleziona la vista',
 };
@@ -958,2 +985,6 @@
     'No events': 'Nessun evento',
+    'Next period': 'Periodo successivo',
+    'Previous period': 'Periodo precedente',
+    to: 'a', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Eventi della giornata e plurigiornalieri',
 };
@@ -972,2 +1003,3 @@
     'Choose Date': 'Choose Date',
+    'Select View': 'Select View',
 };
@@ -983,2 +1015,6 @@
     'No events': 'No events',
+    'Next period': 'Next period',
+    'Previous period': 'Previous period',
+    to: 'to', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Full day- and multiple day events',
 };
@@ -997,2 +1033,3 @@
     'Choose Date': 'Välj datum',
+    'Select View': 'Välj vy',
 };
@@ -1008,2 +1045,6 @@
     'No events': 'Inga händelser',
+    'Next period': 'Nästa period',
+    'Previous period': 'Föregående period',
+    to: 'till', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': 'Heldags- och flerdagshändelser',
 };
@@ -1022,2 +1063,3 @@
     'Choose Date': '选择日期',
+    'Select View': '选择视图',
 };
@@ -1033,2 +1075,6 @@
     'No events': '没有活动',
+    'Next period': '下一段时间',
+    'Previous period': '上一段时间',
+    to: '至', // as in 2/1/2020 to 2/2/2020
+    'Full day- and multiple day events': '全天和多天活动',
 };
@@ -1035,0 +1081,0 @@

dist/core.umd.js

@@ -77,2 +77,4 @@ (function (global, factory) {
 
+  const isKeyEnterOrSpace = (keyboardEvent) => keyboardEvent.key === 'Enter' || keyboardEvent.key === ' ';
+
   function AppInput() {
@@ -118,5 +120,5 @@ const datePickerLabelId = randomStringId();
       };
-      const handleButtonKeyDown = (e) => {
-          if (e.key === ' ' || e.key === 'Enter') {
-              e.preventDefault();
+      const handleButtonKeyDown = (keyboardEvent) => {
+          if (isKeyEnterOrSpace(keyboardEvent)) {
+              keyboardEvent.preventDefault();
               $app.datePickerState.open();
@@ -212,3 +214,7 @@ setTimeout(() => {
   function Chevron({ direction, onClick, buttonText }) {
-      return (u("button", { className: "sx__chevron-wrapper sx__ripple", onClick: onClick, children: u("i", { className: `sx__chevron sx__chevron--${direction}`, children: buttonText }) }));
+      const handleKeyDown = (keyboardEvent) => {
+          if (isKeyEnterOrSpace(keyboardEvent))
+              onClick();
+      };
+      return (u("button", { className: "sx__chevron-wrapper sx__ripple", onMouseUp: onClick, onKeyDown: handleKeyDown, tabIndex: 0, children: u("i", { className: `sx__chevron sx__chevron--${direction}`, children: buttonText }) }));
   }
@@ -262,2 +268,12 @@
 
+  const dateFn = (dateTimeString, locale) => {
+      const { year, month, date } = toIntegers(dateTimeString);
+      return new Date(year, month, date).toLocaleDateString(locale, {
+          day: 'numeric',
+          month: 'long',
+          year: 'numeric',
+      });
+  };
+  const getLocalizedDate = dateFn;
+
   function MonthViewWeek({ week }) {
@@ -302,3 +318,3 @@ const $app = hooks.useContext(AppContext);
       };
-      return (u(preact.Fragment, { children: u("div", { "data-testid": DATE_PICKER_WEEK, className: "sx__date-picker__week", children: weekDays.map((weekDay) => (u("button", { tabIndex: hasFocus(weekDay) ? 0 : -1, disabled: !isDateSelectable(weekDay.day), "aria-label": toJSDate($app.datePickerState.datePickerDate.value).toLocaleDateString(), className: weekDay.classes.join(' '), "data-focus": hasFocus(weekDay) ? 'true' : undefined, onClick: () => selectDate(weekDay.day), onKeyDown: handleKeyDown, children: weekDay.day.getDate() }))) }) }));
+      return (u(preact.Fragment, { children: u("div", { "data-testid": DATE_PICKER_WEEK, className: "sx__date-picker__week", children: weekDays.map((weekDay) => (u("button", { tabIndex: hasFocus(weekDay) ? 0 : -1, disabled: !isDateSelectable(weekDay.day), "aria-label": getLocalizedDate($app.datePickerState.datePickerDate.value, $app.config.locale), className: weekDay.classes.join(' '), "data-focus": hasFocus(weekDay) ? 'true' : undefined, onClick: () => selectDate(weekDay.day), onKeyDown: handleKeyDown, children: weekDay.day.getDate() }))) }) }));
   }
@@ -899,2 +915,3 @@
       'Choose Date': 'Datum auswählen',
+      'Select View': 'Ansicht auswählen',
   };
@@ -910,2 +927,6 @@
       'No events': 'Keine Ereignisse',
+      'Next period': 'Nächster Zeitraum',
+      'Previous period': 'Vorheriger Zeitraum',
+      to: 'bis', // as in 2/1/2020 to 2/2/2020
+      'Full day- and multiple day events': 'Ganztägige und mehrtägige Ereignisse',
   };
@@ -924,2 +945,3 @@
       'Choose Date': 'Choose Date',
+      'Select View': 'Select View',
   };
@@ -935,2 +957,6 @@
       'No events': 'No events',
+      'Next period': 'Next period',
+      'Previous period': 'Previous period',
+      to: 'to', // as in 2/1/2020 to 2/2/2020
+      'Full day- and multiple day events': 'Full day- and multiple day events',
   };
@@ -949,2 +975,3 @@
       'Choose Date': 'Scegli la data',
+      'Select View': 'Seleziona la vista',
   };
@@ -960,2 +987,6 @@
       'No events': 'Nessun evento',
+      'Next period': 'Periodo successivo',
+      'Previous period': 'Periodo precedente',
+      to: 'a', // as in 2/1/2020 to 2/2/2020
+      'Full day- and multiple day events': 'Eventi della giornata e plurigiornalieri',
   };
@@ -974,2 +1005,3 @@
       'Choose Date': 'Choose Date',
+      'Select View': 'Select View',
   };
@@ -985,2 +1017,6 @@
       'No events': 'No events',
+      'Next period': 'Next period',
+      'Previous period': 'Previous period',
+      to: 'to', // as in 2/1/2020 to 2/2/2020
+      'Full day- and multiple day events': 'Full day- and multiple day events',
   };
@@ -999,2 +1035,3 @@
       'Choose Date': 'Välj datum',
+      'Select View': 'Välj vy',
   };
@@ -1010,2 +1047,6 @@
       'No events': 'Inga händelser',
+      'Next period': 'Nästa period',
+      'Previous period': 'Föregående period',
+      to: 'till', // as in 2/1/2020 to 2/2/2020
+      'Full day- and multiple day events': 'Heldags- och flerdagshändelser',
   };
@@ -1024,2 +1065,3 @@
       'Choose Date': '选择日期',
+      'Select View': '选择视图',
   };
@@ -1035,2 +1077,6 @@
       'No events': '没有活动',
+      'Next period': '下一段时间',
+      'Previous period': '上一段时间',
+      to: '至', // as in 2/1/2020 to 2/2/2020
+      'Full day- and multiple day events': '全天和多天活动',
   };
@@ -1037,0 +1083,0 @@

package.json

 {
   "name": "@schedule-x/date-picker",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Schedule-X date picker component",
@@ -34,3 +34,3 @@ "author": {
   "homepage": "https://schedule-x.dev",
-  "gitHead": "f5a87ee51c82e632b58620536d83d21193fe285b"
+  "gitHead": "48797bff888f8fe8969d067f1e8884c978ba0976"
 }

No alert changes

Improved metrics

Total package byte prevSize

178202

increased by4.82%

Lines of code

4563

increased by4.01%

No dependency changes