@instructure/ui-date-input 10.2.3-snapshot-10 → 10.2.3-snapshot-11

package/types/DateInput2/index.d.ts

@@ -1,13 +1,47 @@
+import type { SyntheticEvent } from 'react';
 import { jsx } from '@instructure/emotion';
 import type { DateInput2Props } from './props';
+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;
-    propTypes: import("@instructure/shared-types").PropValidators<keyof DateInput2Props>;
+    ({ 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: {
+            calendarIcon: string;
+            prevMonthButton: string;
+            nextMonthButton: string;
+        };
+        value?: string;
+        placeholder?: string;
+        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[];
+        invalidDateErrorMessage?: string;
+        locale?: string;
+        timezone?: string;
+        withYearPicker?: {
+            screenReaderLabel: string;
+            onRequestYearChange?: (e: SyntheticEvent, requestedYear: number) => void;
+            startYear: number;
+            endYear: number;
+        };
+        dateFormat?: {
+            parser: (input: string) => Date | null;
+            formatter: (date: Date) => string;
+        } | string;
+        onRequestValidateDate?: (event: React.SyntheticEvent, value: string, utcDateString: string) => void;
+    }>;
 };
 export default DateInput2;
 export { DateInput2 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateInput2/index.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAG1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAuB9C;;;;GAIG;AACH,QAAA,MAAM,UAAU;qOAmBb,eAAe;;CAmKjB,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;AAsF7D;;;;;;GAMG;AACH,QAAA,MAAM,UAAU;2OAoBb,eAAe;;;;;;;;;;2BA3GJ,MACX,cAAa;yBAEoE,MAAM,cAC1F;;;;;;;;;;;+BAuEkB,CAAA;;;;;;;;wCAiCO,MAAO,cAAc;;CAyL7C,CAAA;AAID,eAAe,UAAU,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/types/DateInput2/props.d.ts

@@ -1,7 +1,7 @@
-import type { SyntheticEvent } from 'react';
+import type { SyntheticEvent, InputHTMLAttributes } from 'react';
 import type { FormMessage } from '@instructure/ui-form-field';
-import type { Renderable, PropValidators } from '@instructure/shared-types';
-type DateInput2Props = {
+import type { OtherHTMLAttributes, Renderable, PropValidators } from '@instructure/shared-types';
+type DateInput2OwnProps = {
     /**
      * Specifies the input label.
      */
@@ -16,22 +16,17 @@ type DateInput2Props = {
      */
     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, value: 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,21 +56,6 @@ type DateInput2Props = {
      * }`
      */
     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.
@@ -103,7 +83,7 @@ type DateInput2Props = {
      * 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;
@@ -124,8 +104,20 @@ type DateInput2Props = {
         startYear: number;
         endYear: number;
     };
+    /**
+     * 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.
+     */
+    onRequestValidateDate?: (event: React.SyntheticEvent, value: string, utcDateString: string) => void;
 };
-type PropKeys = keyof DateInput2Props;
+type PropKeys = keyof DateInput2OwnProps;
+type DateInput2Props = DateInput2OwnProps & OtherHTMLAttributes<DateInput2OwnProps, InputHTMLAttributes<DateInput2OwnProps & Element>>;
 declare const propTypes: PropValidators<PropKeys>;
 export type { DateInput2Props };
 export { propTypes };

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,MAAM,OAAO,CAAA;AAI3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE3E,KAAK,eAAe,GAAG;IACrB;;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,eAAe,CAAA;AAErC,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,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,CACP,KAAK,EAAE,KAAK,CAAC,cAAc,EAC3B,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,MAAM,KAClB,IAAI,CAAA;IACT;;;;;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;;OAEG;IACH,UAAU,CAAC,EACP;QACE,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI,CAAA;QACtC,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;KAClC,GACD,MAAM,CAAA;IAEV;;OAEG;IACH,qBAAqB,CAAC,EAAE,CACtB,KAAK,EAAE,KAAK,CAAC,cAAc,EAC3B,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,MAAM,KAClB,IAAI,CAAA;CAEV,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,CAqBvC,CAAA;AAED,YAAY,EAAE,eAAe,EAAE,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,CAAA"}