@abgov/react-components 4.0.0-alpha.71 → 4.0.0-alpha.73

package/lib/input/input.d.ts

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import { GoAIconType } from '../..';
+export declare type GoADate = Date | string;
 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 {
@@ -55,25 +56,28 @@ interface BaseProps {
     suffix?: string;
     testId?: string;
 }
+declare type OnChange = (name: string, value: string) => void;
 export interface InputProps extends BaseProps {
-    onChange: (name: string, value: string) => void;
+    onChange: OnChange;
     value: string;
     min?: number | string;
     max?: number | string;
     step?: number;
 }
+declare type OnNumberChange = (name: string, value: number) => void;
 interface NumberInputProps extends BaseProps {
-    onChange: (name: string, value: number) => void;
+    onChange: OnNumberChange;
     value: number;
     min?: number;
     max?: number;
     step?: number;
 }
+declare type OnDateChange = (name: string, value: GoADate) => void;
 interface DateInputProps extends BaseProps {
-    onChange: (name: string, value: Date) => void;
-    value: string | Date;
-    min?: string | Date;
-    max?: string | Date;
+    onChange: OnDateChange;
+    value: GoADate;
+    min?: GoADate;
+    max?: GoADate;
     step?: number;
 }
 export declare const GoAInput: FC<InputProps & {
@@ -82,7 +86,7 @@ export declare const GoAInput: FC<InputProps & {
 export declare const GoAInputText: FC<InputProps>;
 export declare const GoAInputPassword: FC<InputProps>;
 export declare const GoAInputDate: FC<DateInputProps>;
-export declare const GoAInputTime: FC<DateInputProps>;
+export declare const GoAInputTime: FC<InputProps>;
 export declare const GoAInputDateTime: FC<DateInputProps>;
 export declare const GoAInputEmail: FC<InputProps>;
 export declare const GoAInputSearch: FC<InputProps>;

package/package.json

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

package/react-components.esm.js

@@ -7432,7 +7432,7 @@ function instance$h($$self, $$props, $$invalidate) {
 class FormItem extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}*{box-sizing:border-box}.label{display:block;font-weight:var(--fw-bold);color:var(--goa-color-text);font-size:var(--fs-base);padding:0.5rem 0;overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis}.label em{color:var(--color-gray-600);font-weight:var(--fw-regular);font-size:var(--fs-sm);line-height:var(--lh-sm);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--fs-sm);color:var(--goa-color-text);margin-right:56px}.error-msg{font-size:var(--fs-sm);color:var(--goa-color-interactive--error);margin-bottom:0.25rem}</style>`;
+    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}*{box-sizing:border-box}.label{display:block;font-weight:var(--fw-bold);color:var(--goa-color-text);font-size:var(--fs-base);padding:0.5rem 0}.label em{color:var(--color-gray-600);font-weight:var(--fw-regular);font-size:var(--fs-sm);line-height:var(--lh-sm);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--fs-sm);color:var(--goa-color-text);margin-right:56px}.error-msg{font-size:var(--fs-sm);color:var(--goa-color-interactive--error);margin-bottom:0.25rem}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -14839,6 +14839,45 @@ const GoAInput = ({
     handletrailingiconclick: !!onTrailingIconClick
   }, void 0);
 };
+
+const onDateChangeHandler = onChange => {
+  return (name, value) => {
+    if (!value) {
+      onChange(name, new Date(0));
+      return;
+    }
+
+    onChange(name, parseISO(value));
+  };
+};
+
+const onTimeChangeHandler = onChange => {
+  return (name, value) => {
+    if (!value) {
+      onChange(name, "");
+      return;
+    }
+
+    onChange(name, value);
+  };
+};
+
+function toString(value, tmpl = "yyyy-MM-dd") {
+  if (!value) {
+    return "";
+  }
+
+  if (typeof value === "string") {
+    return format(parseISO(value), tmpl);
+  }
+
+  if (value.toISOString() === new Date(0).toISOString()) {
+    return "";
+  }
+
+  return format(value, tmpl);
+}
+
 const GoAInputText = props => {
   return jsx(GoAInput, Object.assign({}, props, {
     type: "text"
@@ -14857,26 +14896,12 @@ const GoAInputDate = _a => {
   } = _a,
       props = __rest(_a, ["value", "min", "max"]);
 
-  const _format = value => {
-    return format(value, "yyyy-MM-dd");
-  };
-
-  const _value = _format(typeof value === "string" ? parseISO(value) : value);
-
-  const _min = min && _format(typeof min === "string" ? parseISO(min) : min);
-
-  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: _value,
-    type: "date"
+    type: "date",
+    onChange: onDateChangeHandler(props.onChange),
+    min: toString(min),
+    max: toString(max),
+    value: toString(value)
   }), void 0);
 };
 const GoAInputTime = _a => {
@@ -14887,24 +14912,11 @@ const GoAInputTime = _a => {
   } = _a,
       props = __rest(_a, ["value", "min", "max"]);
 
-  const onDateChange = (name, value) => {
-    props.onChange(name, parseISO(value));
-  };
-
-  try {
-    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);
-  }
+  return jsx(GoAInput, Object.assign({}, props, {
+    onChange: onTimeChangeHandler(props.onChange),
+    value: value,
+    type: "time"
+  }), void 0);
 };
 const GoAInputDateTime = _a => {
   var {
@@ -14914,15 +14926,9 @@ const GoAInputDateTime = _a => {
   } = _a,
       props = __rest(_a, ["value", "min", "max"]);
 
-  const d = typeof value === "string" ? parseISO(value) : value;
-
-  const onDateChange = (name, value) => {
-    props.onChange(name, parseISO(value));
-  };
-
   return jsx(GoAInput, Object.assign({}, props, {
-    onChange: onDateChange,
-    value: format(d, "yyyy-MM-dd'T'hh:mm"),
+    onChange: onDateChangeHandler(props.onChange),
+    value: toString(value, "yyyy-MM-dd'T'hh:mm"),
     type: "datetime-local"
   }), void 0);
 };

package/react-components.umd.js

@@ -7479,7 +7479,7 @@
 	class FormItem extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}*{box-sizing:border-box}.label{display:block;font-weight:var(--fw-bold);color:var(--goa-color-text);font-size:var(--fs-base);padding:0.5rem 0;overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis}.label em{color:var(--color-gray-600);font-weight:var(--fw-regular);font-size:var(--fs-sm);line-height:var(--lh-sm);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--fs-sm);color:var(--goa-color-text);margin-right:56px}.error-msg{font-size:var(--fs-sm);color:var(--goa-color-interactive--error);margin-bottom:0.25rem}</style>`;
+	    this.shadowRoot.innerHTML = `<style>:host{box-sizing:border-box;font-family:var(--font-family)}*{box-sizing:border-box}.label{display:block;font-weight:var(--fw-bold);color:var(--goa-color-text);font-size:var(--fs-base);padding:0.5rem 0}.label em{color:var(--color-gray-600);font-weight:var(--fw-regular);font-size:var(--fs-sm);line-height:var(--lh-sm);font-style:normal}.form-item-input{margin-bottom:0.25rem}.help-msg{font-size:var(--fs-sm);color:var(--goa-color-text);margin-right:56px}.error-msg{font-size:var(--fs-sm);color:var(--goa-color-interactive--error);margin-bottom:0.25rem}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -14885,6 +14885,49 @@
 	    handletrailingiconclick: !!onTrailingIconClick
 	  }, void 0);
 	};
+
+	var onDateChangeHandler = function onDateChangeHandler(onChange) {
+	  return function (name, value) {
+	    if (!value) {
+	      onChange(name, new Date(0));
+	      return;
+	    }
+
+	    onChange(name, dateFns.parseISO(value));
+	  };
+	};
+
+	var onTimeChangeHandler = function onTimeChangeHandler(onChange) {
+	  return function (name, value) {
+	    if (!value) {
+	      onChange(name, "");
+	      return;
+	    }
+
+	    onChange(name, value);
+	  };
+	};
+
+	function toString(value, tmpl) {
+	  if (tmpl === void 0) {
+	    tmpl = "yyyy-MM-dd";
+	  }
+
+	  if (!value) {
+	    return "";
+	  }
+
+	  if (typeof value === "string") {
+	    return dateFns.format(dateFns.parseISO(value), tmpl);
+	  }
+
+	  if (value.toISOString() === new Date(0).toISOString()) {
+	    return "";
+	  }
+
+	  return dateFns.format(value, tmpl);
+	}
+
 	var GoAInputText = function GoAInputText(props) {
 	  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
 	    type: "text"
@@ -14903,26 +14946,12 @@
 	      max = _c === void 0 ? "" : _c,
 	      props = __rest(_a, ["value", "min", "max"]);
 
-	  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 && _format(typeof min === "string" ? dateFns.parseISO(min) : min);
-
-	  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: _value,
-	    type: "date"
+	    type: "date",
+	    onChange: onDateChangeHandler(props.onChange),
+	    min: toString(min),
+	    max: toString(max),
+	    value: toString(value)
 	  }), void 0);
 	};
 	var GoAInputTime = function GoAInputTime(_a) {
@@ -14931,24 +14960,11 @@
 	      _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" ? 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);
-	  }
+	  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
+	    onChange: onTimeChangeHandler(props.onChange),
+	    value: value,
+	    type: "time"
+	  }), void 0);
 	};
 	var GoAInputDateTime = function GoAInputDateTime(_a) {
 	  var value = _a.value;
@@ -14956,15 +14972,9 @@
 	      _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));
-	  };
-
 	  return jsxRuntime.jsx(GoAInput, __assign({}, props, {
-	    onChange: onDateChange,
-	    value: dateFns.format(d, "yyyy-MM-dd'T'hh:mm"),
+	    onChange: onDateChangeHandler(props.onChange),
+	    value: toString(value, "yyyy-MM-dd'T'hh:mm"),
 	    type: "datetime-local"
 	  }), void 0);
 	};