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

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.66",
   "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() {}
 
@@ -1162,7 +1162,7 @@ function create_fragment$F(ctx) {
       ctx[2]);
       attr(div2, "style", div2_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[3] || "var(--layout-max-content-width)"}`);
+      ctx[3] || "100%"}`);
     },
 
     m(target, anchor) {
@@ -1198,7 +1198,7 @@ function create_fragment$F(ctx) {
       /*maxcontentwidth*/
       8 && div2_style_value !== (div2_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[3] || "var(--layout-max-content-width)"}`)) {
+      ctx[3] || "100%"}`)) {
         attr(div2, "style", div2_style_value);
       }
     },
@@ -6976,7 +6976,7 @@ function create_fragment$k(ctx) {
       attr(div5, "class", "app-footer");
       attr(div5, "style", div5_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[0] || "var(--layout-max-content-width)"}`);
+      ctx[0] || "100%"}`);
     },
 
     m(target, anchor) {
@@ -7038,7 +7038,7 @@ function create_fragment$k(ctx) {
       /*maxcontentwidth*/
       1 && div5_style_value !== (div5_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[0] || "var(--layout-max-content-width)"}`)) {
+      ctx[0] || "100%"}`)) {
         attr(div5, "style", div5_style_value);
       }
     },
@@ -7090,7 +7090,7 @@ function instance$i($$self, $$props, $$invalidate) {
 class Footer extends SvelteElement {
   constructor(options) {
     super();
-    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100vw)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
+    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
     init(this, {
       target: this.shadowRoot,
       props: attribute_to_object(this.attributes),
@@ -10225,7 +10225,7 @@ function create_if_block$5(ctx) {
     }
 
   };
-} // (58:8) {#if heading}
+} // (55:8) {#if heading}
 
 
 function create_if_block_3(ctx) {
@@ -10259,7 +10259,7 @@ function create_if_block_3(ctx) {
     }
 
   };
-} // (61:8) {#if isClosable}
+} // (58:8) {#if isClosable}
 
 
 function create_if_block_2$2(ctx) {
@@ -10297,7 +10297,7 @@ function create_if_block_2$2(ctx) {
     }
 
   };
-} // (75:10) {:else}
+} // (72:10) {:else}
 
 
 function create_else_block$1(ctx) {
@@ -10318,7 +10318,7 @@ function create_else_block$1(ctx) {
     }
 
   };
-} // (71:10) {#if isScrollable}
+} // (68:10) {#if isScrollable}
 
 
 function create_if_block_1$3(ctx) {
@@ -10433,9 +10433,6 @@ function instance$b($$self, $$props, $$invalidate) {
   let {
     width
   } = $$props;
-  onMount(() => {
-    console.log("in the modal v2");
-  });
 
   function close(e) {
     if (!isClosable) {
@@ -13629,7 +13626,7 @@ function create_fragment$3(ctx) {
       attr(div, "style", div_style_value = `
     --max-content-width: ${
       /*maxcontentwidth*/
-      ctx[1] || "var(--layout-max-content-width)"};
+      ctx[1] || "100%"};
     --nav-column-width: ${
       /*navcolumnwidth*/
       ctx[0] || "var(--layout-nav-column-width)"};
@@ -13651,7 +13648,7 @@ function create_fragment$3(ctx) {
       3 && div_style_value !== (div_style_value = `
     --max-content-width: ${
       /*maxcontentwidth*/
-      ctx[1] || "var(--layout-max-content-width)"};
+      ctx[1] || "100%"};
     --nav-column-width: ${
       /*navcolumnwidth*/
       ctx[0] || "var(--layout-nav-column-width)"};
@@ -14828,38 +14825,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(typeof min === "string" ? parseISO(min) : min);
 
-  const _min = min ? format(new Date(min), "yyyy-MM-dd") : "";
+  const _max = max && _format(typeof max === "string" ? parseISO(max) : max);
 
-  const _max = max ? format(new Date(max), "yyyy-MM-dd") : "";
+  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 +14881,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 +14938,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

@@ -1203,7 +1203,7 @@
 	      ctx[2]);
 	      attr(div2, "style", div2_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[3] || "var(--layout-max-content-width)"}`);
+      ctx[3] || "100%"}`);
 	    },
 
 	    m(target, anchor) {
@@ -1239,7 +1239,7 @@
 	      /*maxcontentwidth*/
 	      8 && div2_style_value !== (div2_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[3] || "var(--layout-max-content-width)"}`)) {
+      ctx[3] || "100%"}`)) {
 	        attr(div2, "style", div2_style_value);
 	      }
 	    },
@@ -7022,7 +7022,7 @@
 	      attr(div5, "class", "app-footer");
 	      attr(div5, "style", div5_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[0] || "var(--layout-max-content-width)"}`);
+      ctx[0] || "100%"}`);
 	    },
 
 	    m(target, anchor) {
@@ -7084,7 +7084,7 @@
 	      /*maxcontentwidth*/
 	      1 && div5_style_value !== (div5_style_value = `--max-content-width: ${
       /*maxcontentwidth*/
-      ctx[0] || "var(--layout-max-content-width)"}`)) {
+      ctx[0] || "100%"}`)) {
 	        attr(div5, "style", div5_style_value);
 	      }
 	    },
@@ -7137,7 +7137,7 @@
 	class Footer extends SvelteElement {
 	  constructor(options) {
 	    super();
-	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100vw)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
+	    this.shadowRoot.innerHTML = `<style>*{box-sizing:border-box}.app-footer{background-color:var(--color-gray-100);border-top:2px solid var(--color-gray-200);border-bottom:1rem solid var(--goa-color-brand)}.content{padding:2rem 1rem;margin:0 auto;width:min(var(--max-content-width), 100%)}@media(min-width: 640px){.content{padding:2rem 1.5rem}}.meta-section{display:flex;flex-direction:column;padding:1rem 0}.meta-section.with-meta-links{gap:2rem;justify-content:space-between}.meta-links{display:none}.with-meta-links .meta-links{display:block}.nav-links{display:flex;flex-direction:column;gap:2rem}.abgov{display:flex;flex-direction:column;justify-content:space-between;width:100%}@media(min-width: 640px){.meta-section{flex-direction:row;gap:2rem}.nav-links{flex-direction:row}.abgov{align-items:center;flex-direction:row-reverse}}.abgov.with-meta-links{gap:1rem;flex-direction:column;width:unset}@media(min-width: 640px){.abgov.with-meta-links{align-items:flex-end}}.goa-copyright{white-space:nowrap}a{color:var(--goa-color-text-secondary)}</style>`;
 	    init(this, {
 	      target: this.shadowRoot,
 	      props: attribute_to_object(this.attributes),
@@ -10272,7 +10272,7 @@
 	    }
 
 	  };
-	} // (58:8) {#if heading}
+	} // (55:8) {#if heading}
 
 
 	function create_if_block_3(ctx) {
@@ -10306,7 +10306,7 @@
 	    }
 
 	  };
-	} // (61:8) {#if isClosable}
+	} // (58:8) {#if isClosable}
 
 
 	function create_if_block_2$2(ctx) {
@@ -10344,7 +10344,7 @@
 	    }
 
 	  };
-	} // (75:10) {:else}
+	} // (72:10) {:else}
 
 
 	function create_else_block$1(ctx) {
@@ -10365,7 +10365,7 @@
 	    }
 
 	  };
-	} // (71:10) {#if isScrollable}
+	} // (68:10) {#if isScrollable}
 
 
 	function create_if_block_1$3(ctx) {
@@ -10480,9 +10480,6 @@
 	  let {
 	    width
 	  } = $$props;
-	  onMount(() => {
-	    console.log("in the modal v2");
-	  });
 
 	  function close(e) {
 	    if (!isClosable) {
@@ -13678,7 +13675,7 @@
 	      attr(div, "style", div_style_value = `
     --max-content-width: ${
       /*maxcontentwidth*/
-      ctx[1] || "var(--layout-max-content-width)"};
+      ctx[1] || "100%"};
     --nav-column-width: ${
       /*navcolumnwidth*/
       ctx[0] || "var(--layout-nav-column-width)"};
@@ -13700,7 +13697,7 @@
 	      3 && div_style_value !== (div_style_value = `
     --max-content-width: ${
       /*maxcontentwidth*/
-      ctx[1] || "var(--layout-max-content-width)"};
+      ctx[1] || "100%"};
     --nav-column-width: ${
       /*navcolumnwidth*/
       ctx[0] || "var(--layout-nav-column-width)"};
@@ -14873,46 +14870,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 _min = min ? dateFns.format(new Date(min), "yyyy-MM-dd") : "";
+	  var _value = _format(typeof value === "string" ? dateFns.parseISO(value) : value);
 
-	  var _max = max ? dateFns.format(new Date(max), "yyyy-MM-dd") : "";
+	  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: 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 +14981,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(),