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

package/types/DateInput2/index.d.ts

@@ -10,7 +10,7 @@ category: components
 @module experimental
 **/
 declare const DateInput2: {
-    ({ renderLabel, screenReaderLabels, isRequired, interaction, size, isInline, value, messages, width, onChange, onBlur, withYearPicker, onRequestValidateDate, invalidDateErrorMessage, locale, timezone, placeholder, formatDate, ...rest }: DateInput2Props): jsx.JSX.Element;
+    ({ renderLabel, screenReaderLabels, isRequired, interaction, isInline, value, messages, width, onChange, onBlur, withYearPicker, invalidDateErrorMessage, locale, timezone, placeholder, dateFormat, onRequestValidateDate, ...rest }: DateInput2Props): jsx.JSX.Element;
     propTypes: import("@instructure/shared-types").PropValidators<keyof {
         renderLabel: import("@instructure/shared-types").Renderable;
         screenReaderLabels: {
@@ -19,16 +19,14 @@ declare const DateInput2: {
             nextMonthButton: string;
         };
         value?: string;
-        size?: "small" | "medium" | "large";
         placeholder?: string;
-        onChange?: (event: React.SyntheticEvent, isoDateString: string, formattedValue: string) => void;
-        onBlur?: (event: React.SyntheticEvent) => void;
+        onChange?: (event: React.SyntheticEvent, inputValue: string, utcDateString: string) => void;
+        onBlur?: (event: React.SyntheticEvent, value: string, utcDateString: string) => void;
         interaction?: "enabled" | "disabled" | "readonly";
         isRequired?: boolean;
         isInline?: boolean;
         width?: string;
         messages?: FormMessage[];
-        onRequestValidateDate?: (isoDateString?: string, internalValidationPassed?: boolean) => void | FormMessage[];
         invalidDateErrorMessage?: string;
         locale?: string;
         timezone?: string;
@@ -38,7 +36,11 @@ declare const DateInput2: {
             startYear: number;
             endYear: number;
         };
-        formatDate?: (isoDate: string, locale: string, timezone: string) => string;
+        dateFormat?: {
+            parser: (input: string) => Date | null;
+            formatter: (date: Date) => string;
+        } | string;
+        onRequestValidateDate?: (event: React.SyntheticEvent, value: string, utcDateString: string) => void;
     }>;
 };
 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;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"}
+{"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;AA8E7D;;;;;;GAMG;AACH,QAAA,MAAM,UAAU;2OAoBb,eAAe;;;;;;;;;;2BAtGmE,MAAO,cACrF;yBAC+E,MAAQ,cAC3F;;;;;;;;;;;+BAmEmB,CAAA;;;;;;;;wCAiCpB,MAAM,cAAa;;CA4LpB,CAAA;AAID,eAAe,UAAU,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/types/DateInput2/props.d.ts

@@ -12,26 +12,21 @@ type DateInput2OwnProps = {
         nextMonthButton: string;
     };
     /**
-     * Specifies the input value *before* formatting. The `formatDate` will be applied to it before displaying. Should be a valid, parsable date.
+     * Specifies the input value.
      */
     value?: string;
     /**
-     * Specifies the input size.
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Html placeholder text to display when the input has no value. This should
-     * be hint text, not a label replacement.
+     * Placeholder text for the input field. If it's left undefined it will display a hint for the date format (like `DD/MM/YYYY`).
      */
     placeholder?: string;
     /**
      * Callback fired when the input changes.
      */
-    onChange?: (event: React.SyntheticEvent, isoDateString: string, formattedValue: string) => void;
+    onChange?: (event: React.SyntheticEvent, inputValue: string, utcDateString: string) => void;
     /**
      * Callback executed when the input fires a blur event.
      */
-    onBlur?: (event: React.SyntheticEvent) => void;
+    onBlur?: (event: React.SyntheticEvent, value: string, utcDateString: string) => void;
     /**
      * Specifies if interaction with the input is enabled, disabled, or readonly.
      * When "disabled", the input changes visibly to indicate that it cannot
@@ -61,12 +56,6 @@ type DateInput2OwnProps = {
      * }`
      */
     messages?: FormMessage[];
-    /**
-     * 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.
-     */
-    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.
@@ -94,7 +83,7 @@ type DateInput2OwnProps = {
      * This property can also be set via a context property and if both are set
      * then the component property takes precedence over the context property.
      *
-     * The web browser's timezone will be used if no value is set via a component
+     * The system timezone will be used if no value is set via a component
      * property or a context property.
      **/
     timezone?: string;
@@ -116,9 +105,16 @@ type DateInput2OwnProps = {
         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.
+    * By default the date format is determined by the locale but can be changed via this prop to an alternate locale (passing it in as a string) or a custom parser and formatter (both as functions)
+    */
+    dateFormat?: {
+        parser: (input: string) => Date | null;
+        formatter: (date: Date) => string;
+    } | string;
+    /**
+     * Callback executed when the input fires a blur event or a date is selected from the picker.
      */
-    formatDate?: (isoDate: string, locale: string, timezone: string) => string;
+    onRequestValidateDate?: (event: React.SyntheticEvent, value: string, utcDateString: string) => void;
 };
 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,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"}
+{"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,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,cAAc,EAC3B,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,MAAM,KAClB,IAAI,CAAA;IACT;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;IACpF;;;;;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;;;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;IACD;;MAEE;IACF,UAAU,CAAC,EAAE;QACX,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI,CAAA;QACtC,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;KAClC,GAAG,MAAM,CAAA;IAEV;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,KAAK,IAAI,CAAA;CAEpG,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,CAwBvC,CAAA;AAED,YAAY,EAAE,eAAe,EAAE,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,CAAA"}