@abgov/react-components 4.0.0-alpha.64 → 4.0.0-alpha.65

package/lib/input/input.d.ts

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { GoAIconType } from '../..';
-declare type GoAInputType = "text" | "number" | "password" | "email" | "date" | "datetime-local" | "month" | "range" | "search" | "tel" | "time" | "url" | "week";
+declare type GoAInputType = "text" | "password" | "email" | "number" | "date" | "datetime-local" | "month" | "range" | "search" | "tel" | "time" | "url" | "week";
 declare type GoAAutoCapitalize = "on" | "off" | "none" | "sentences" | "words" | "characters";
 interface WCProps {
     ref?: React.MutableRefObject<HTMLInputElement | null>;
@@ -24,8 +24,8 @@ interface WCProps {
     prefix?: string;
     suffix?: string;
     testid?: string;
-    min?: string;
-    max?: string;
+    min?: string | number;
+    max?: string | number;
     step?: number;
 }
 declare global {
@@ -35,10 +35,8 @@ declare global {
         }
     }
 }
-export interface InputProps {
+interface BaseProps {
     name: string;
-    value: string;
-    onChange: (name: string, value: string) => void;
     id?: string;
     disabled?: boolean;
     autoCapitalize?: GoAAutoCapitalize;
@@ -56,8 +54,26 @@ export interface InputProps {
     prefix?: string;
     suffix?: string;
     testId?: string;
-    min?: string;
-    max?: string;
+}
+export interface InputProps extends BaseProps {
+    onChange: (name: string, value: string) => void;
+    value: string;
+    min?: number | string;
+    max?: number | string;
+    step?: number;
+}
+interface NumberInputProps extends BaseProps {
+    onChange: (name: string, value: number) => void;
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+interface DateInputProps extends BaseProps {
+    onChange: (name: string, value: Date) => void;
+    value: string | Date;
+    min?: string | Date;
+    max?: string | Date;
     step?: number;
 }
 export declare const GoAInput: FC<InputProps & {
@@ -65,25 +81,15 @@ export declare const GoAInput: FC<InputProps & {
 }>;
 export declare const GoAInputText: FC<InputProps>;
 export declare const GoAInputPassword: FC<InputProps>;
-export declare const GoAInputDate: FC<Omit<InputProps, "value"> & {
-    value: Date | string;
-}>;
-export declare const GoAInputTime: FC<Omit<InputProps, "value"> & {
-    value: Date | string;
-}>;
-export declare const GoAInputDateTime: FC<Omit<InputProps, "value"> & {
-    value: Date;
-}>;
+export declare const GoAInputDate: FC<DateInputProps>;
+export declare const GoAInputTime: FC<DateInputProps>;
+export declare const GoAInputDateTime: FC<DateInputProps>;
 export declare const GoAInputEmail: FC<InputProps>;
 export declare const GoAInputSearch: FC<InputProps>;
 export declare const GoAInputUrl: FC<InputProps>;
 export declare const GoAInputTel: FC<InputProps>;
 export declare const GoAInputFile: FC<InputProps>;
 export declare const GoAInputMonth: FC<InputProps>;
-export declare const GoAInputNumber: FC<Omit<InputProps, "value" | "min" | "max"> & {
-    value: number;
-    min?: number;
-    max?: number;
-}>;
+export declare const GoAInputNumber: FC<NumberInputProps>;
 export declare const GoAInputRange: FC<InputProps>;
 export default GoAInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.64",
+  "version": "4.0.0-alpha.65",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
-import { format } from 'date-fns';
+import { parseISO, format } from 'date-fns';
 
 function noop() {}
 
@@ -14828,38 +14828,55 @@ const GoAInputPassword = props => {
 const GoAInputDate = _a => {
   var {
     value,
-    min,
-    max
+    min = "",
+    max = ""
   } = _a,
       props = __rest(_a, ["value", "min", "max"]);
 
-  const _value = typeof value === "string" ? new Date(value) : value;
+  const _format = value => {
+    return format(value, "yyyy-MM-dd");
+  };
+
+  const _value = _format(typeof value === "string" ? parseISO(value) : value);
 
-  const _min = min ? format(new Date(min), "yyyy-MM-dd") : "";
+  const _min = min && _format(typeof min === "string" ? parseISO(min) : min);
 
-  const _max = max ? format(new Date(max), "yyyy-MM-dd") : "";
+  const _max = max && _format(typeof max === "string" ? parseISO(max) : max);
+
+  const onDateChange = (name, value) => {
+    props.onChange(name, parseISO(value));
+  };
 
   return jsx(GoAInput, Object.assign({}, props, {
+    onChange: onDateChange,
     min: _min,
     max: _max,
-    value: format(_value, "yyyy-MM-dd"),
+    value: _value,
     type: "date"
   }), void 0);
 };
 const GoAInputTime = _a => {
   var {
-    value
+    value,
+    min = "",
+    max = ""
   } = _a,
-      props = __rest(_a, ["value"]);
+      props = __rest(_a, ["value", "min", "max"]);
+
+  const onDateChange = (name, value) => {
+    props.onChange(name, parseISO(value));
+  };
 
   try {
-    const d = typeof value === "string" ? new Date(value) : value;
+    const d = typeof value === "string" ? parseISO(value) : value;
     return jsx(GoAInput, Object.assign({}, props, {
+      onChange: onDateChange,
       value: format(d, "hh:mm"),
       type: "time"
     }), void 0);
   } catch (e) {
     return jsx(GoAInput, Object.assign({}, props, {
+      onChange: onDateChange,
       value: value,
       type: "time"
     }), void 0);
@@ -14867,12 +14884,20 @@ const GoAInputTime = _a => {
 };
 const GoAInputDateTime = _a => {
   var {
-    value
+    value,
+    min = "",
+    max = ""
   } = _a,
-      props = __rest(_a, ["value"]);
+      props = __rest(_a, ["value", "min", "max"]);
+
+  const d = typeof value === "string" ? parseISO(value) : value;
+
+  const onDateChange = (name, value) => {
+    props.onChange(name, parseISO(value));
+  };
 
-  const d = typeof value === "string" ? new Date(value) : value;
   return jsx(GoAInput, Object.assign({}, props, {
+    onChange: onDateChange,
     value: format(d, "yyyy-MM-dd'T'hh:mm"),
     type: "datetime-local"
   }), void 0);
@@ -14916,13 +14941,18 @@ const GoAInputMonth = props => {
 };
 const GoAInputNumber = _a => {
   var {
-    min,
-    max,
+    min = Number.MIN_VALUE,
+    max = Number.MAX_VALUE,
     value
   } = _a,
       props = __rest(_a, ["min", "max", "value"]);
 
+  const onNumberChange = (name, value) => {
+    props.onChange(name, parseInt(value));
+  };
+
   return jsx(GoAInput, Object.assign({}, props, {
+    onChange: onNumberChange,
     min: min === null || min === void 0 ? void 0 : min.toString(),
     max: max === null || max === void 0 ? void 0 : max.toString(),
     value: value.toString(),

package/react-components.umd.js

@@ -14873,46 +14873,73 @@
 	};
 	var GoAInputDate = function GoAInputDate(_a) {
 	  var value = _a.value,
-	      min = _a.min,
-	      max = _a.max,
+	      _b = _a.min,
+	      min = _b === void 0 ? "" : _b,
+	      _c = _a.max,
+	      max = _c === void 0 ? "" : _c,
 	      props = __rest(_a, ["value", "min", "max"]);
 
-	  var _value = typeof value === "string" ? new Date(value) : value;
+	  var _format = function _format(value) {
+	    return dateFns.format(value, "yyyy-MM-dd");
+	  };
+
+	  var _value = _format(typeof value === "string" ? dateFns.parseISO(value) : value);
 
-	  var _min = min ? dateFns.format(new Date(min), "yyyy-MM-dd") : "";
+	  var _min = min && _format(typeof min === "string" ? dateFns.parseISO(min) : min);
 
-	  var _max = max ? dateFns.format(new Date(max), "yyyy-MM-dd") : "";
+	  var _max = max && _format(typeof max === "string" ? dateFns.parseISO(max) : max);
+
+	  var onDateChange = function onDateChange(name, value) {
+	    props.onChange(name, dateFns.parseISO(value));
+	  };
 
 	  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	    onChange: onDateChange,
 	    min: _min,
 	    max: _max,
-	    value: dateFns.format(_value, "yyyy-MM-dd"),
+	    value: _value,
 	    type: "date"
 	  }), void 0);
 	};
 	var GoAInputTime = function GoAInputTime(_a) {
-	  var value = _a.value,
-	      props = __rest(_a, ["value"]);
+	  var value = _a.value;
+	      _a.min;
+	      _a.max;
+	      var props = __rest(_a, ["value", "min", "max"]);
+
+	  var onDateChange = function onDateChange(name, value) {
+	    props.onChange(name, dateFns.parseISO(value));
+	  };
 
 	  try {
-	    var d = typeof value === "string" ? new Date(value) : value;
+	    var d = typeof value === "string" ? dateFns.parseISO(value) : value;
 	    return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	      onChange: onDateChange,
 	      value: dateFns.format(d, "hh:mm"),
 	      type: "time"
 	    }), void 0);
 	  } catch (e) {
 	    return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	      onChange: onDateChange,
 	      value: value,
 	      type: "time"
 	    }), void 0);
 	  }
 	};
 	var GoAInputDateTime = function GoAInputDateTime(_a) {
-	  var value = _a.value,
-	      props = __rest(_a, ["value"]);
+	  var value = _a.value;
+	      _a.min;
+	      _a.max;
+	      var props = __rest(_a, ["value", "min", "max"]);
+
+	  var d = typeof value === "string" ? dateFns.parseISO(value) : value;
+
+	  var onDateChange = function onDateChange(name, value) {
+	    props.onChange(name, dateFns.parseISO(value));
+	  };
 
-	  var d = typeof value === "string" ? new Date(value) : value;
 	  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	    onChange: onDateChange,
 	    value: dateFns.format(d, "yyyy-MM-dd'T'hh:mm"),
 	    type: "datetime-local"
 	  }), void 0);
@@ -14957,12 +14984,19 @@
 	  }), void 0);
 	};
 	var GoAInputNumber = function GoAInputNumber(_a) {
-	  var min = _a.min,
-	      max = _a.max,
+	  var _b = _a.min,
+	      min = _b === void 0 ? Number.MIN_VALUE : _b,
+	      _c = _a.max,
+	      max = _c === void 0 ? Number.MAX_VALUE : _c,
 	      value = _a.value,
 	      props = __rest(_a, ["min", "max", "value"]);
 
+	  var onNumberChange = function onNumberChange(name, value) {
+	    props.onChange(name, parseInt(value));
+	  };
+
 	  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	    onChange: onNumberChange,
 	    min: min === null || min === void 0 ? void 0 : min.toString(),
 	    max: max === null || max === void 0 ? void 0 : max.toString(),
 	    value: value.toString(),