@tenancy.nz/ui 1.0.2 → 1.0.3

package/dist/esm/components/DateSelect.js

@@ -1,4 +1,5 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import Autocomplete from './Autocomplete.js';
@@ -13,8 +14,9 @@ import 'mime/lite';
 import '../utils/helpers/time.js';
 import dayjs from 'dayjs';
 
-const prepareValue = (value, max, pad) => {
-  const parsed = parseInt(value, 10);
+var _excluded = ["disabled", "fromFormat", "name", "onChange", "required", "size", "toFormat", "value", "variant", "yearRange", "selectProps"];
+var prepareValue = function prepareValue(value, max, pad) {
+  var parsed = parseInt(value, 10);
   if (isNaN(parsed) || parsed === 0) {
     return "";
   }
@@ -26,50 +28,71 @@ const prepareValue = (value, max, pad) => {
   }
   return value;
 };
-function DateSelect({
-  disabled = false,
-  fromFormat = "YYYY-MM-DD",
-  name,
-  onChange,
-  required = false,
-  size = "medium",
-  toFormat = "YYYY-MM-DD",
-  value = "",
-  variant = "outlined",
-  yearRange = "-5:5",
-  selectProps = {},
-  ...rest
-}) {
-  const [day, setDay] = useState(null);
-  const [month, setMonth] = useState(null);
-  const [year, setYear] = useState(null);
-  useEffect(() => {
-    const parsed = dayjs(value, fromFormat);
+function DateSelect(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$fromFormat = _ref.fromFormat,
+    fromFormat = _ref$fromFormat === void 0 ? "YYYY-MM-DD" : _ref$fromFormat,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$toFormat = _ref.toFormat,
+    toFormat = _ref$toFormat === void 0 ? "YYYY-MM-DD" : _ref$toFormat,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "outlined" : _ref$variant,
+    _ref$yearRange = _ref.yearRange,
+    yearRange = _ref$yearRange === void 0 ? "-5:5" : _ref$yearRange,
+    _ref$selectProps = _ref.selectProps,
+    selectProps = _ref$selectProps === void 0 ? {} : _ref$selectProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    day = _useState2[0],
+    setDay = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    month = _useState4[0],
+    setMonth = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    year = _useState6[0],
+    setYear = _useState6[1];
+  useEffect(function () {
+    var parsed = dayjs(value, fromFormat);
     if (parsed.isValid()) {
       setDay(parsed.format("DD"));
       setMonth(parsed.format("MM"));
       setYear(parsed.format("YYYY"));
     }
   }, [fromFormat, value]);
-  const handleChange = ({ y, m, d }) => {
-    const values = {
-      year,
-      month,
-      day,
-      ...y !== void 0 && { year: y },
-      ...m !== void 0 && { month: m },
-      ...d !== void 0 && { day: d }
-    };
+  var handleChange = function handleChange(_ref2) {
+    var y = _ref2.y,
+      m = _ref2.m,
+      d = _ref2.d;
+    var values = _objectSpread2(_objectSpread2(_objectSpread2({
+      year: year,
+      month: month,
+      day: day
+    }, y !== void 0 && {
+      year: y
+    }), m !== void 0 && {
+      month: m
+    }), d !== void 0 && {
+      day: d
+    });
     setDay(values.day);
     setMonth(values.month);
     setYear(values.year);
-    const filtered = Object.values([
-      values.year,
-      values.month,
-      values.day
-    ]).filter((v) => !!v);
+    var filtered = Object.values([values.year, values.month, values.day]).filter(function (v) {
+      return !!v;
+    });
     if (filtered.length === 3) {
-      const parsed = dayjs(filtered.join("-"), "YYYY-MM-DD");
+      var parsed = dayjs(filtered.join("-"), "YYYY-MM-DD");
       if (isFunction(onChange)) {
         onChange(!parsed.isValid() ? "" : parsed.format(toFormat));
       }
@@ -77,132 +100,125 @@ function DateSelect({
       onChange("");
     }
   };
-  const ddProps = {
-    disabled,
+  var ddProps = _objectSpread2({
+    disabled: disabled,
     noOptionsText: "",
     fullWidth: true,
     disableClearable: true,
-    required,
-    size,
-    variant,
-    freeSolo: true,
-    ...selectProps
-  };
-  const separator = /* @__PURE__ */ jsx(Grid, { item: true, sx: { color: "grey.400" }, children: /* @__PURE__ */ jsx(Text, { color: "inherit", variant: "body1", children: "/" }) });
-  return /* @__PURE__ */ jsx(FormControl, { fullWidth: true, ...rest, children: /* @__PURE__ */ jsx(StyledDateSelect, { children: /* @__PURE__ */ jsxs(
-    Grid,
-    {
-      container: true,
-      spacing: 2,
-      alignItems: "center",
-      sx: { flexWrap: "nowrap" },
-      children: [
-        /* @__PURE__ */ jsx(
-          Grid,
-          {
-            item: true,
-            sx: {
-              flexGrow: 0.5,
-              minWidth: {
-                xs: 70,
-                sm: 80
-              }
+    required: required,
+    size: size,
+    variant: variant,
+    freeSolo: true
+  }, selectProps);
+  var separator = /* @__PURE__ */jsx(Grid, {
+    item: true,
+    sx: {
+      color: "grey.400"
+    },
+    children: /* @__PURE__ */jsx(Text, {
+      color: "inherit",
+      variant: "body1",
+      children: "/"
+    })
+  });
+  return /* @__PURE__ */jsx(FormControl, _objectSpread2(_objectSpread2({
+    fullWidth: true
+  }, rest), {}, {
+    children: /* @__PURE__ */jsx(StyledDateSelect, {
+      children: /* @__PURE__ */jsxs(Grid, {
+        container: true,
+        spacing: 2,
+        alignItems: "center",
+        sx: {
+          flexWrap: "nowrap"
+        },
+        children: [/* @__PURE__ */jsx(Grid, {
+          item: true,
+          sx: {
+            flexGrow: 0.5,
+            minWidth: {
+              xs: 70,
+              sm: 80
+            }
+          },
+          children: /* @__PURE__ */jsx(Autocomplete, _objectSpread2(_objectSpread2({}, ddProps), {}, {
+            name: "".concat(name, "_day"),
+            options: dayOptions(),
+            placeholder: "DD",
+            textInputAttrs: {
+              maxLength: 2,
+              inputMode: "numeric"
             },
-            children: /* @__PURE__ */ jsx(
-              Autocomplete,
-              {
-                ...ddProps,
-                name: `${name}_day`,
-                options: dayOptions(),
-                placeholder: "DD",
-                textInputAttrs: {
-                  maxLength: 2,
-                  inputMode: "numeric"
-                },
-                onInputChange: (_, val) => {
-                  setDay(val);
-                },
-                onBlur: (e) => {
-                  const d = prepareValue(e.target.value, 31, 2);
-                  handleChange({ d });
-                },
-                value: day
-              }
-            )
-          }
-        ),
-        separator,
-        /* @__PURE__ */ jsx(
-          Grid,
-          {
-            item: true,
-            sx: {
-              flexGrow: 0.5,
-              minWidth: {
-                xs: 70,
-                sm: 80
-              }
+            onInputChange: function onInputChange(_, val) {
+              setDay(val);
             },
-            children: /* @__PURE__ */ jsx(
-              Autocomplete,
-              {
-                ...ddProps,
-                name: `${name}_month`,
-                options: monthOptions(),
-                onInputChange: (_, val) => {
-                  setMonth(val);
-                },
-                onBlur: (e) => {
-                  const m = prepareValue(e.target.value, 12, 2);
-                  handleChange({ m });
-                },
-                textInputAttrs: {
-                  maxLength: 2,
-                  inputMode: "numeric"
-                },
-                placeholder: "MM",
-                value: month
-              }
-            )
-          }
-        ),
-        separator,
-        /* @__PURE__ */ jsx(
-          Grid,
-          {
-            item: true,
-            sx: {
-              flexGrow: 2,
-              minWidth: {
-                sm: 110
-              }
+            onBlur: function onBlur(e) {
+              var d = prepareValue(e.target.value, 31, 2);
+              handleChange({
+                d: d
+              });
             },
-            children: /* @__PURE__ */ jsx(
-              Autocomplete,
-              {
-                ...ddProps,
-                name: `${name}_year`,
-                options: yearOptions(yearRange),
-                onInputChange: (_, val) => {
-                  setYear(val);
-                },
-                onBlur: (e) => {
-                  const y = prepareValue(e.target.value);
-                  handleChange({ y });
-                },
-                textInputAttrs: {
-                  maxLength: 4,
-                  inputMode: "numeric"
-                },
-                placeholder: "YYYY",
-                value: year
-              }
-            )
-          }
-        )
-      ]
-    }
-  ) }) });
+            value: day
+          }))
+        }), separator, /* @__PURE__ */jsx(Grid, {
+          item: true,
+          sx: {
+            flexGrow: 0.5,
+            minWidth: {
+              xs: 70,
+              sm: 80
+            }
+          },
+          children: /* @__PURE__ */jsx(Autocomplete, _objectSpread2(_objectSpread2({}, ddProps), {}, {
+            name: "".concat(name, "_month"),
+            options: monthOptions(),
+            onInputChange: function onInputChange(_, val) {
+              setMonth(val);
+            },
+            onBlur: function onBlur(e) {
+              var m = prepareValue(e.target.value, 12, 2);
+              handleChange({
+                m: m
+              });
+            },
+            textInputAttrs: {
+              maxLength: 2,
+              inputMode: "numeric"
+            },
+            placeholder: "MM",
+            value: month
+          }))
+        }), separator, /* @__PURE__ */jsx(Grid, {
+          item: true,
+          sx: {
+            flexGrow: 2,
+            minWidth: {
+              sm: 110
+            }
+          },
+          children: /* @__PURE__ */jsx(Autocomplete, _objectSpread2(_objectSpread2({}, ddProps), {}, {
+            name: "".concat(name, "_year"),
+            options: yearOptions(yearRange),
+            onInputChange: function onInputChange(_, val) {
+              setYear(val);
+            },
+            onBlur: function onBlur(e) {
+              var y = prepareValue(e.target.value);
+              handleChange({
+                y: y
+              });
+            },
+            textInputAttrs: {
+              maxLength: 4,
+              inputMode: "numeric"
+            },
+            placeholder: "YYYY",
+            value: year
+          }))
+        })]
+      })
+    })
+  }));
 }
 
 export { DateSelect as default };

package/dist/esm/components/DateSelect.styled.js

@@ -1,11 +1,9 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import 'react';
 import { styled } from '@mui/material/styles';
 
-const StyledDateSelect = styled(
-  "div"
-)`
-  width: 100%;
-`;
+var _templateObject;
+var StyledDateSelect = styled("div")(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
 
 export { StyledDateSelect as default };

package/dist/esm/components/Divider.js

@@ -1,29 +1,39 @@
 "use strict";
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import PropTypes from 'prop-types';
 import { StyledDivider } from './Divider.styled.js';
 
-function Divider({
-  as = "hr",
-  classes = "",
-  color = "default",
-  dense = false,
-  disableGutter = false,
-  flexItem = false,
-  orientation = "horizontal",
-  variant = "dotted"
-}) {
-  const props = {
-    as,
-    color,
-    dense,
-    disableGutter,
-    flexItem,
-    orientation,
-    variant
+function Divider(_ref) {
+  var _ref$as = _ref.as,
+    as = _ref$as === void 0 ? "hr" : _ref$as,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? "" : _ref$classes,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "default" : _ref$color,
+    _ref$dense = _ref.dense,
+    dense = _ref$dense === void 0 ? false : _ref$dense,
+    _ref$disableGutter = _ref.disableGutter,
+    disableGutter = _ref$disableGutter === void 0 ? false : _ref$disableGutter,
+    _ref$flexItem = _ref.flexItem,
+    flexItem = _ref$flexItem === void 0 ? false : _ref$flexItem,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "dotted" : _ref$variant;
+  var props = {
+    as: as,
+    color: color,
+    dense: dense,
+    disableGutter: disableGutter,
+    flexItem: flexItem,
+    orientation: orientation,
+    variant: variant
   };
-  return /* @__PURE__ */ jsx(StyledDivider, { className: classes, ...props });
+  return /* @__PURE__ */jsx(StyledDivider, _objectSpread2({
+    className: classes
+  }, props));
 }
 Divider.propTypes = {
   /**

package/dist/esm/components/Divider.styled.js

@@ -1,60 +1,18 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import styled, { css } from 'styled-components';
 
-const StyledDivider = styled.hr`
-  ${({
-  as,
-  color,
-  dense,
-  disableGutter,
-  flexItem,
-  orientation,
-  variant,
-  theme
-}) => css`
-    color: inherit;
-    background: transparent;
-    border-style: ${variant};
-    border-color: ${color === "default" ? theme.palette.grey[300] : "currentColor"};
-    flex-shrink: 0;
-    list-style-type: none;
-
-    ${as === "span" && css`
-      display: block;
-    `}
-
-    ${flexItem && css`
-      align-self: stretch;
-    `}
-
-    ${disableGutter && css`
-      margin: 0;
-    `}
-
-    ${orientation === "horizontal" && !disableGutter && !dense && css`
-      margin: 1rem 0;
-    `}
-
-    ${orientation === "horizontal" && !disableGutter && dense && css`
-      margin: 0.4rem 0;
-    `}
-
-    ${orientation === "vertical" && !disableGutter && !dense && css`
-      margin: 0 1rem;
-    `}
-
-    ${orientation === "vertical" && !disableGutter && dense && css`
-      margin: 0 0.4rem;
-    `}
-
-    ${orientation === "horizontal" && !flexItem && css`
-      border-width: 0px 0px thin 0px;
-    `}
-
-    ${(orientation === "vertical" || flexItem) && css`
-      border-width: 0px thin 0px 0px;
-    `}
-  `}
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1;
+var StyledDivider = styled.hr(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var as = _ref.as,
+    color = _ref.color,
+    dense = _ref.dense,
+    disableGutter = _ref.disableGutter,
+    flexItem = _ref.flexItem,
+    orientation = _ref.orientation,
+    variant = _ref.variant,
+    theme = _ref.theme;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: inherit;\n    background: transparent;\n    border-style: ", ";\n    border-color: ", ";\n    flex-shrink: 0;\n    list-style-type: none;\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), variant, color === "default" ? theme.palette.grey[300] : "currentColor", as === "span" && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      display: block;\n    "]))), flexItem && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      align-self: stretch;\n    "]))), disableGutter && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      margin: 0;\n    "]))), orientation === "horizontal" && !disableGutter && !dense && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      margin: 1rem 0;\n    "]))), orientation === "horizontal" && !disableGutter && dense && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      margin: 0.4rem 0;\n    "]))), orientation === "vertical" && !disableGutter && !dense && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      margin: 0 1rem;\n    "]))), orientation === "vertical" && !disableGutter && dense && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      margin: 0 0.4rem;\n    "]))), orientation === "horizontal" && !flexItem && css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n      border-width: 0px 0px thin 0px;\n    "]))), (orientation === "vertical" || flexItem) && css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n      border-width: 0px thin 0px 0px;\n    "]))));
+});
 
 export { StyledDivider };