@tenancy.nz/ui 1.0.2 → 1.0.4

package/dist/esm/components/DateNumberInput.js

@@ -1,4 +1,5 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
@@ -8,52 +9,71 @@ import Autocomplete from './Autocomplete.js';
 import Select from './Select.js';
 import { StyledWrapper, StyledTextField } from './DateNumberInput.styled.js';
 
-function DateNumberInput({
-  inputRef,
-  leadingZero = true,
-  max,
-  min = 0,
-  name,
-  onChange,
-  placeholder = "",
-  required = false,
-  reverse = false,
-  value = "",
-  ...rest
-}) {
-  const [error, setError] = useState(false);
-  const [selected, setSelected] = useState(null);
-  const controls = useAnimation();
-  const maxLength = max.toString().length;
-  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("sm"));
-  useEffect(() => {
+var _excluded = ["inputRef", "leadingZero", "max", "min", "name", "onChange", "placeholder", "required", "reverse", "value"];
+function DateNumberInput(_ref) {
+  var inputRef = _ref.inputRef,
+    _ref$leadingZero = _ref.leadingZero,
+    leadingZero = _ref$leadingZero === void 0 ? true : _ref$leadingZero,
+    max = _ref.max,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    name = _ref.name,
+    onChange = _ref.onChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$reverse = _ref.reverse,
+    reverse = _ref$reverse === void 0 ? false : _ref$reverse,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    error = _useState2[0],
+    setError = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selected = _useState4[0],
+    setSelected = _useState4[1];
+  var controls = useAnimation();
+  var maxLength = max.toString().length;
+  var isNotMobile = useMediaQuery(function (theme) {
+    return theme.breakpoints.up("sm");
+  });
+  useEffect(function () {
     if (error) {
       controls.start({
         translateX: ["-12px", "10px", "-6px", "4px"],
-        transition: { duration: 0.25, ease: "easeInOut" }
+        transition: {
+          duration: 0.25,
+          ease: "easeInOut"
+        }
       });
       inputRef.current.focus();
       if (isNotMobile) {
         inputRef.current.select();
       }
-      setTimeout(() => setError(false), 500);
+      setTimeout(function () {
+        return setError(false);
+      }, 500);
     }
   }, [error, controls, inputRef, isNotMobile]);
-  useEffect(() => {
+  useEffect(function () {
     if (value && parseInt(value, 10) > max) {
       onChange(max);
       setError(true);
     }
   }, [value, max, onChange]);
-  const handleKeyDown = (e) => {
-    const notAllowed = ["-", "+", ".", "e", "E"];
+  var handleKeyDown = function handleKeyDown(e) {
+    var notAllowed = ["-", "+", ".", "e", "E"];
     if (notAllowed.includes(e.key)) {
       e.preventDefault();
     }
   };
-  const handleChange = (newValue) => {
-    let hasError = false;
-    let updatedValue = newValue;
+  var handleChange = function handleChange(newValue) {
+    var hasError = false;
+    var updatedValue = newValue;
     updatedValue = parseInt(updatedValue, 10).toString();
     if (updatedValue.length > maxLength) {
       updatedValue = updatedValue.substring(0, maxLength);
@@ -68,95 +88,96 @@ function DateNumberInput({
     }
     if (leadingZero && updatedValue !== "0") {
       while (updatedValue.length < maxLength) {
-        updatedValue = `0${updatedValue}`;
+        updatedValue = "0".concat(updatedValue);
       }
     }
     onChange(updatedValue);
   };
-  const handleAutocompleteChange = (event, option) => {
+  var handleAutocompleteChange = function handleAutocompleteChange(event, option) {
     setSelected(option);
     handleChange(option.value);
   };
-  const handleNativeChange = ({ target }) => {
+  var handleNativeChange = function handleNativeChange(_ref2) {
+    var target = _ref2.target;
     onChange(target.value);
   };
-  const options = useMemo(() => {
-    const optionArray = [];
-    let count = min;
+  var options = useMemo(function () {
+    var optionArray = [];
+    var count = min;
     while (count < max + 1) {
-      let label = count.toString();
+      var label = count.toString();
       if (leadingZero) {
         while (label.length < maxLength) {
-          label = `0${label}`;
+          label = "0".concat(label);
         }
       }
       optionArray.push({
-        label,
+        label: label,
         value: isNotMobile ? count : parseInt(label, 10)
       });
       count += 1;
     }
     return reverse ? optionArray.reverse() : optionArray;
   }, [min, max, leadingZero, maxLength]);
-  const autoCompleteDefault = Object.values(options).filter(
-    (option) => option.value === value
-  )[0];
-  return /* @__PURE__ */ jsx(StyledWrapper, { animate: controls, error, children: isNotMobile ? /* @__PURE__ */ jsx(
-    Autocomplete,
-    {
+  var autoCompleteDefault = Object.values(options).filter(function (option) {
+    return option.value === value;
+  })[0];
+  return /* @__PURE__ */jsx(StyledWrapper, {
+    animate: controls,
+    error: error,
+    children: isNotMobile ? /* @__PURE__ */jsx(Autocomplete, _objectSpread2({
       fullWidth: true,
       autoHighlight: true,
       autoSelect: true,
       blurOnSelect: true,
       value: selected || autoCompleteDefault || null,
       noOptionsText: "Invalid",
-      options: [{ value: "", label: "" }, ...options],
+      options: [{
+        value: "",
+        label: ""
+      }].concat(_toConsumableArray(options)),
       disableClearable: true,
-      name,
-      required,
+      name: name,
+      required: required,
       onChange: handleAutocompleteChange,
-      getOptionLabel: (option) => option.label ? option.label : "",
-      renderInput: (params) => /* @__PURE__ */ jsx(
-        StyledTextField,
-        {
-          ...params,
-          value,
-          placeholder,
-          name,
+      getOptionLabel: function getOptionLabel(option) {
+        return option.label ? option.label : "";
+      },
+      renderInput: function renderInput(params) {
+        return /* @__PURE__ */jsx(StyledTextField, _objectSpread2(_objectSpread2({}, params), {}, {
+          value: value,
+          placeholder: placeholder,
+          name: name,
           variant: "outlined",
           onChange: handleNativeChange,
           onKeyDown: handleKeyDown,
-          inputRef,
-          required,
-          inputProps: {
-            autoComplete: "off",
-            ...params.inputProps
-          }
-        }
-      ),
-      ...rest
-    }
-  ) : /* @__PURE__ */ jsx(
-    Select,
-    {
+          inputRef: inputRef,
+          required: required,
+          inputProps: _objectSpread2({
+            autoComplete: "off"
+          }, params.inputProps)
+        }));
+      }
+    }, rest)) : /* @__PURE__ */jsx(Select, _objectSpread2({
       fullWidth: true,
       value: !Number.isNaN(value) ? value : null,
-      required,
-      placeholder,
+      required: required,
+      placeholder: placeholder,
       onChange: handleNativeChange,
-      options: [{ value: "", label: placeholder }, ...options],
-      inputRef,
-      name,
-      native: true,
-      ...rest
-    }
-  ) });
+      options: [{
+        value: "",
+        label: placeholder
+      }].concat(_toConsumableArray(options)),
+      inputRef: inputRef,
+      name: name,
+      native: true
+    }, rest))
+  });
 }
 DateNumberInput.propTypes = {
-  inputRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(Element) })
-  ]).isRequired,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })]).isRequired,
   leadingZero: PropTypes.bool,
   max: PropTypes.number.isRequired,
   min: PropTypes.number,

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

@@ -3,27 +3,38 @@ import { motion } from 'framer-motion';
 import { styled } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 
-const StyledWrapper = styled(motion.div)(({ error, theme }) => ({
-  "& input": {
-    padding: "0 !important"
-  },
-  "& .MuiInputBase-root": {
-    color: error ? theme.palette.error.main : null
-  },
-  "& .Mui-focused .MuiOutlinedInput-notchedOutline, & .MuiOutlinedInput-notchedOutline": {
-    borderColor: error ? theme.palette.error.main : null
-  },
-  "& .MuiTouchRipple-root": {
-    display: "none"
-  }
-}));
-const StyledTextField = styled(TextField)(
-  ({ edges, required, showError, size, theme, value, variant }) => ({
+var StyledWrapper = styled(motion.div)(function (_ref) {
+  var error = _ref.error,
+    theme = _ref.theme;
+  return {
+    "& input": {
+      padding: "0 !important"
+    },
+    "& .MuiInputBase-root": {
+      color: error ? theme.palette.error.main : null
+    },
+    "& .Mui-focused .MuiOutlinedInput-notchedOutline, & .MuiOutlinedInput-notchedOutline": {
+      borderColor: error ? theme.palette.error.main : null
+    },
+    "& .MuiTouchRipple-root": {
+      display: "none"
+    }
+  };
+});
+var StyledTextField = styled(TextField)(function (_ref2) {
+  var edges = _ref2.edges,
+    required = _ref2.required,
+    showError = _ref2.showError,
+    size = _ref2.size,
+    theme = _ref2.theme,
+    value = _ref2.value,
+    variant = _ref2.variant;
+  return {
     margin: 0,
     "& .MuiInputBase-root": {
-      padding: size === "small" ? `${theme.spacing(1, 8, 1, 2)} !important` : `${theme.spacing(3, 8, 3, 4)} !important`,
+      padding: size === "small" ? "".concat(theme.spacing(1, 8, 1, 2), " !important") : "".concat(theme.spacing(3, 8, 3, 4), " !important"),
       border: variant === "filled" ? "2px solid transparent" : null,
-      borderRadius: () => {
+      borderRadius: function borderRadius() {
         switch (edges) {
           case "rounded":
             return 99;
@@ -41,7 +52,7 @@ const StyledTextField = styled(TextField)(
       backgroundColor: theme.palette.grey.transparent
     },
     "& .Mui-focused": {
-      border: variant === "filled" ? `2px solid ${required && !value ? theme.palette.secondary.main : theme.palette.primary.main}` : null
+      border: variant === "filled" ? "2px solid ".concat(required && !value ? theme.palette.secondary.main : theme.palette.primary.main) : null
     },
     "& .MuiOutlinedInput-notchedOutline": {
       borderColor: required && !value ? theme.palette.secondary.main : null
@@ -49,7 +60,7 @@ const StyledTextField = styled(TextField)(
     "& input": {
       padding: "0 !important"
     }
-  })
-);
+  };
+});
 
 export { StyledTextField, StyledWrapper };

package/dist/esm/components/DatePicker.js

@@ -1,4 +1,5 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import PropTypes from 'prop-types';
@@ -10,59 +11,91 @@ import TextInput from './TextInput.js';
 import IconButton from './IconButton.js';
 import { StyledWrapper } from './DatePicker.styled.js';
 
-function DatePicker({
-  disabled = false,
-  edges = "normal",
-  error = false,
-  showError = false,
-  errorMessage = "",
-  fullWidth = false,
-  helperText = "",
-  icon = void 0,
-  label = "",
-  required = false,
-  variant = "outlined",
-  format = "dd/MM/yyyy",
-  value = void 0,
-  onChange = null,
-  name,
-  ...others
-}) {
-  const rest = { error, ...others };
-  const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsx(StyledWrapper, { required, hasValue: !!value, children: /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx(
-    DatePicker$1,
-    {
-      clearable: true,
-      disableCloseOnSelect: false,
-      inputFormat: format,
-      value,
-      onChange,
-      onClose: () => setOpen(false),
-      renderInput: (params) => /* @__PURE__ */ jsx(
-        TextInput,
-        {
-          ...params,
-          onClick: () => setOpen(true),
-          name,
-          fullWidth,
-          label,
-          helperText,
-          disabled,
-          required,
-          showError,
-          message: errorMessage,
-          edges,
-          variant,
-          autoComplete: "off",
-          InputProps: {
-            endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { onClick: () => setOpen(true), children: icon || /* @__PURE__ */ jsx(EventIcon, {}) }) })
-          }
+var _excluded = ["disabled", "edges", "error", "showError", "errorMessage", "fullWidth", "helperText", "icon", "label", "required", "variant", "format", "value", "onChange", "name"];
+function DatePicker(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? "normal" : _ref$edges,
+    _ref$error = _ref.error,
+    error = _ref$error === void 0 ? false : _ref$error,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$helperText = _ref.helperText,
+    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? void 0 : _ref$icon,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "outlined" : _ref$variant,
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? "dd/MM/yyyy" : _ref$format,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? void 0 : _ref$value,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? null : _ref$onChange,
+    name = _ref.name,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var rest = _objectSpread2({
+    error: error
+  }, others);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2);
+    _useState2[0];
+    var setOpen = _useState2[1];
+  return /* @__PURE__ */jsx(StyledWrapper, {
+    required: required,
+    hasValue: !!value,
+    children: /* @__PURE__ */jsx(LocalizationProvider, {
+      dateAdapter: AdapterDayjs,
+      children: /* @__PURE__ */jsx(DatePicker$1, _objectSpread2({
+        clearable: true,
+        disableCloseOnSelect: false,
+        inputFormat: format,
+        value: value,
+        onChange: onChange,
+        onClose: function onClose() {
+          return setOpen(false);
+        },
+        renderInput: function renderInput(params) {
+          return /* @__PURE__ */jsx(TextInput, _objectSpread2(_objectSpread2({}, params), {}, {
+            onClick: function onClick() {
+              return setOpen(true);
+            },
+            name: name,
+            fullWidth: fullWidth,
+            label: label,
+            helperText: helperText,
+            disabled: disabled,
+            required: required,
+            showError: showError,
+            message: errorMessage,
+            edges: edges,
+            variant: variant,
+            autoComplete: "off",
+            InputProps: {
+              endAdornment: /* @__PURE__ */jsx(InputAdornment, {
+                position: "end",
+                children: /* @__PURE__ */jsx(IconButton, {
+                  onClick: function onClick() {
+                    return setOpen(true);
+                  },
+                  children: icon || /* @__PURE__ */jsx(EventIcon, {})
+                })
+              })
+            }
+          }));
         }
-      ),
-      ...rest
-    }
-  ) }) });
+      }, rest))
+    })
+  });
 }
 DatePicker.propTypes = {
   /**

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

@@ -1,15 +1,20 @@
 "use strict";
 import { styled } from '@mui/material/styles';
 
-const StyledWrapper = styled("span")(({ required, theme, hasValue }) => ({
-  "& input": {
-    "&::placeholder": {
-      textTransform: "uppercase"
+var StyledWrapper = styled("span")(function (_ref) {
+  var required = _ref.required,
+    theme = _ref.theme,
+    hasValue = _ref.hasValue;
+  return {
+    "& input": {
+      "&::placeholder": {
+        textTransform: "uppercase"
+      }
+    },
+    "& .MuiOutlinedInput-notchedOutline, &:hover .MuiOutlinedInput-notchedOutline": {
+      borderColor: required && !hasValue ? theme.palette.secondary.main : theme.palette.grey.main
     }
-  },
-  "& .MuiOutlinedInput-notchedOutline, &:hover .MuiOutlinedInput-notchedOutline": {
-    borderColor: required && !hasValue ? theme.palette.secondary.main : theme.palette.grey.main
-  }
-}));
+  };
+});
 
 export { StyledWrapper };