@instructure/ui-date-input 9.6.0 → 9.6.1-pr-snapshot-1726659472372

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, 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: {
@@ -17,18 +19,14 @@ declare const DateInput2: {
             nextMonthButton: string;
         };
         value?: string;
-        size?: "small" | "medium" | "large";
         placeholder?: string;
-        onChange?: (event: React.SyntheticEvent, inputValue: string, dateString: string) => void;
-        onBlur?: (event: React.SyntheticEvent) => void;
+        onChange?: (event: React.SyntheticEvent, value: 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[];
-        onRequestShowCalendar?: (event: SyntheticEvent) => void;
-        onRequestHideCalendar?: (event: SyntheticEvent) => void;
-        onRequestValidateDate?: (value?: 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;
+            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;AAqB7D;;;;GAIG;AACH,QAAA,MAAM,UAAU;iPAqBb,eAAe;;;;;;;;;;;2BArChB,MAAM,cACJ;yBAMO,MAAO,cAIjB;;;;;;;;sCAiEa,CAAC,kCAAsC,CAAC;;;;;;+BAmE9B,CAAC;;;;;;CA8DxB,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;AAyE7D;;;;;;GAMG;AACH,QAAA,MAAM,UAAU;2OAoBb,eAAe;;;;;;;;;;2BA/FA,MAAO,cAAc;yBAC4C,MAAO,cAAa;;;;;;;;;;;+BAsFlF,CAAC;;;;;;;;wCAyBZ,MAAO,cAAc;;CAsJ9B,CAAA;AAID,eAAe,UAAU,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/types/DateInput2/props.d.ts

@@ -12,13 +12,9 @@ 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;
-    /**
-     * 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.
@@ -27,11 +23,11 @@ type DateInput2OwnProps = {
     /**
      * Callback fired when the input changes.
      */
-    onChange?: (event: React.SyntheticEvent, inputValue: string, dateString: string) => void;
+    onChange?: (event: React.SyntheticEvent, value: 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,21 +57,6 @@ type DateInput2OwnProps = {
      * }`
      */
     messages?: FormMessage[];
-    /**
-     * Callback fired requesting the calendar be shown.
-     */
-    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[];
     /**
      * 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.
@@ -125,9 +106,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;
+        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,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,KACf,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;;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;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,CAwBvC,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;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,cAAc,EAC3B,KAAK,EAAE,MAAM,EACb,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,CAAA;QAC/B,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"}