@instructure/ui-date-input 9.5.2 → 9.6.1-snapshot-2

package/types/DateInput2/index.d.ts

@@ -6,9 +6,11 @@ import type { FormMessage } from '@instructure/ui-form-field';
 ---
 category: components
 ---
+
+@module experimental
 **/
 declare const DateInput2: {
-    ({ renderLabel, screenReaderLabels, isRequired, interaction, size, isInline, value, messages, width, onChange, onBlur, withYearPicker, onRequestValidateDate, invalidDateErrorMessage, locale, timezone, placeholder, ...rest }: DateInput2Props): jsx.JSX.Element;
+    ({ renderLabel, screenReaderLabels, isRequired, interaction, size, isInline, value, messages, width, onChange, onBlur, withYearPicker, onRequestValidateDate, invalidDateErrorMessage, locale, timezone, placeholder, formatDate, ...rest }: DateInput2Props): jsx.JSX.Element;
     propTypes: import("@instructure/shared-types").PropValidators<keyof {
         renderLabel: import("@instructure/shared-types").Renderable;
         screenReaderLabels: {
@@ -19,22 +21,14 @@ declare const DateInput2: {
         value?: string;
         size?: "small" | "medium" | "large";
         placeholder?: string;
-        onChange?: (event: 
-        /**
-        ---
-        category: components
-        ---
-        **/
-        React.SyntheticEvent, value: string) => void;
+        onChange?: (event: React.SyntheticEvent, isoDateString: string, formattedValue: string) => void;
         onBlur?: (event: React.SyntheticEvent) => void;
         interaction?: "enabled" | "disabled" | "readonly";
         isRequired?: boolean;
         isInline?: boolean;
         width?: string;
         messages?: FormMessage[];
-        onRequestShowCalendar?: (event: SyntheticEvent) => void;
-        onRequestHideCalendar?: (event: SyntheticEvent) => void;
-        onRequestValidateDate?: (value?: string, internalValidationPassed?: boolean) => void | FormMessage[];
+        onRequestValidateDate?: (isoDateString?: string, internalValidationPassed?: boolean) => void | FormMessage[];
         invalidDateErrorMessage?: string;
         locale?: string;
         timezone?: string;
@@ -44,6 +38,7 @@ declare const DateInput2: {
             startYear: number;
             endYear: number;
         };
+        formatDate?: (isoDate: string, locale: string, timezone: string) => string;
     }>;
 };
 export default DateInput2;

package/types/DateInput2/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateInput2/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAa3C,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAG1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAS7D;;;;GAIG;AACH,QAAA,MAAM,UAAU;qOAmBb,eAAe;;;;;;;;;;;;QAxBlB;;;;WAIG;QACH,MAJC,cACU;yBAOG,MAAO,cACb;;;;;;;;sCAyDU,CAAC,kCAAsC,CAAC;;;;;;+BA0EpD,CAAF;;;;;CAsDH,CAAA;AAID,eAAe,UAAU,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateInput2/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAa3C,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAG1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AA8C7D;;;;;;GAMG;AACH,QAAA,MAAM,UAAU;iPAqBb,eAAe;;;;;;;;;;;2BAlET,MAAO,cAAc;yBAMV,MAAO,cAEvB;;;;;;8CAuDW,CAAC,kCACE,CAAA;;;;;;+BAgEZ,CAAA;;;;;;CAoGL,CAAA;AAID,eAAe,UAAU,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/types/DateInput2/props.d.ts

@@ -12,7 +12,7 @@ type DateInput2OwnProps = {
         nextMonthButton: string;
     };
     /**
-     * Specifies the input value.
+     * Specifies the input value *before* formatting. The `formatDate` will be applied to it before displaying. Should be a valid, parsable date.
      */
     value?: string;
     /**
@@ -27,7 +27,7 @@ type DateInput2OwnProps = {
     /**
      * Callback fired when the input changes.
      */
-    onChange?: (event: React.SyntheticEvent, value: string) => void;
+    onChange?: (event: React.SyntheticEvent, isoDateString: string, formattedValue: string) => void;
     /**
      * Callback executed when the input fires a blur event.
      */
@@ -62,20 +62,11 @@ type DateInput2OwnProps = {
      */
     messages?: FormMessage[];
     /**
-     * Callback fired requesting the calendar be shown.
+     * Callback fired when the input is blurred or a date is selected from the calendar.
+     * Feedback should be provided to the user when this function is called if the selected date or input
+     * value is invalid. The component has an internal check whether the date can be parsed to a valid date.
      */
-    onRequestShowCalendar?: (event: SyntheticEvent) => void;
-    /**
-     * Callback fired requesting the calendar be hidden.
-     */
-    onRequestHideCalendar?: (event: SyntheticEvent) => void;
-    /**
-     * Callback fired when the input is blurred. Feedback should be provided
-     * to the user when this function is called if the selected date or input
-     * value is invalid. The component has an internal check whether the date can
-     * be parsed to a valid date.
-     */
-    onRequestValidateDate?: (value?: string, internalValidationPassed?: boolean) => void | FormMessage[];
+    onRequestValidateDate?: (isoDateString?: string, internalValidationPassed?: boolean) => void | FormMessage[];
     /**
      * The message shown to the user when the date is invalid. If this prop is not set, validation is bypassed.
      * If it's set to an empty string, validation happens and the input border changes to red if validation hasn't passed.
@@ -124,6 +115,10 @@ type DateInput2OwnProps = {
         startYear: number;
         endYear: number;
     };
+    /**
+     * Formatting function for how the date should be displayed inside the input field. It will be applied if the user clicks on a date in the date picker of after blur event from the input field.
+     */
+    formatDate?: (isoDate: string, locale: string, timezone: string) => string;
 };
 type PropKeys = keyof DateInput2OwnProps;
 type DateInput2Props = DateInput2OwnProps & OtherHTMLAttributes<DateInput2OwnProps, InputHTMLAttributes<DateInput2OwnProps & Element>>;

package/types/DateInput2/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/DateInput2/props.ts"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAIhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAEhG,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,WAAW,EAAE,UAAU,CAAA;IACvB,kBAAkB,EAAE;QAClB,YAAY,EAAE,MAAM,CAAA;QACpB,eAAe,EAAE,MAAM,CAAA;QACvB,eAAe,EAAE,MAAM,CAAA;KACxB,CAAA;IACD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/D;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAA;IAC9C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAA;IACjD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAA;IACvD;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAA;IACvD;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,CACtB,KAAK,CAAC,EAAE,MAAM,EACd,wBAAwB,CAAC,EAAE,OAAO,KAC/B,IAAI,GAAG,WAAW,EAAE,CAAA;IACzB;;;QAGI;IACJ,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC;;;;;;;;;;;QAWI;IACJ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;;;;;;;QAWI;IACJ,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE;QACf,iBAAiB,EAAE,MAAM,CAAA;QACzB,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;QACxE,SAAS,EAAE,MAAM,CAAA;QACjB,OAAO,EAAE,MAAM,CAAA;KAChB,CAAA;CACF,CAAA;AAED,KAAK,QAAQ,GAAG,MAAM,kBAAkB,CAAA;AAExC,KAAK,eAAe,GAAG,kBAAkB,GACvC,mBAAmB,CACjB,kBAAkB,EAClB,mBAAmB,CAAC,kBAAkB,GAAG,OAAO,CAAC,CAClD,CAAA;AAEH,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAuBvC,CAAA;AAED,YAAY,EAAE,eAAe,EAAE,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/DateInput2/props.ts"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAIhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,KAAK,EACV,mBAAmB,EACnB,UAAU,EACV,cAAc,EACf,MAAM,2BAA2B,CAAA;AAElC,KAAK,kBAAkB,GAAG;IACxB;;OAEG;IACH,WAAW,EAAE,UAAU,CAAA;IACvB,kBAAkB,EAAE;QAClB,YAAY,EAAE,MAAM,CAAA;QACpB,eAAe,EAAE,MAAM,CAAA;QACvB,eAAe,EAAE,MAAM,CAAA;KACxB,CAAA;IACD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,cAAc,EAC3B,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,KACnB,IAAI,CAAA;IACT;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,KAAK,IAAI,CAAA;IAC9C;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAA;IACjD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;IACxB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CACtB,aAAa,CAAC,EAAE,MAAM,EACtB,wBAAwB,CAAC,EAAE,OAAO,KAC/B,IAAI,GAAG,WAAW,EAAE,CAAA;IACzB;;;QAGI;IACJ,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC;;;;;;;;;;;QAWI;IACJ,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;;;;;;;QAWI;IACJ,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE;QACf,iBAAiB,EAAE,MAAM,CAAA;QACzB,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;QACxE,SAAS,EAAE,MAAM,CAAA;QACjB,OAAO,EAAE,MAAM,CAAA;KAChB,CAAA;IAED;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAA;CAQ3E,CAAA;AAED,KAAK,QAAQ,GAAG,MAAM,kBAAkB,CAAA;AAExC,KAAK,eAAe,GAAG,kBAAkB,GACvC,mBAAmB,CACjB,kBAAkB,EAClB,mBAAmB,CAAC,kBAAkB,GAAG,OAAO,CAAC,CAClD,CAAA;AAEH,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAsBvC,CAAA;AAED,YAAY,EAAE,eAAe,EAAE,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,CAAA"}