@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/cjs/components/DateInput.cjs

@@ -0,0 +1,218 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var PropTypes = require('prop-types');
+var Grid = require('@mui/material/Grid');
+var FormControl = require('./FormControl.cjs');
+var DateNumberInput = require('./DateNumberInput.cjs');
+var DateInput_styled = require('./DateInput.styled.cjs');
+
+const isLeapYear = (year) => year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+function DateInput({
+  disabled = false,
+  fullWidth = false,
+  helperText = "",
+  helperTextPlacement = "below",
+  label = "",
+  required = false,
+  showError = false,
+  errorMessage = "",
+  edges = "normal",
+  name,
+  minYear = 1900,
+  maxYear = 2100,
+  onChange,
+  value = {}
+}) {
+  const [maxDays, setMaxDays] = React.useState(31);
+  const dayInput = React.useRef(null);
+  const monthInput = React.useRef(null);
+  const yearInput = React.useRef(null);
+  const handleDayChange = (day2) => {
+    onChange({ ...value, day: day2 });
+  };
+  const handleMonthChange = (month2) => {
+    onChange({ ...value, month: month2 });
+  };
+  const handleYearChange = (year2) => {
+    onChange({ ...value, year: year2 });
+  };
+  const { day, month, year } = value;
+  React.useEffect(() => {
+    const hasThirtyDays = [4, 6, 9, 11];
+    if (parseInt(month, 10) === 2) {
+      setMaxDays(isLeapYear(year) ? 29 : 28);
+    } else if (hasThirtyDays.includes(parseInt(month, 10))) {
+      setMaxDays(30);
+    } else {
+      setMaxDays(31);
+    }
+  }, [month, year]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormControl.default,
+    {
+      fullWidth,
+      name,
+      label,
+      helperText,
+      helperTextPlacement,
+      disabled,
+      required,
+      showError,
+      errorMessage,
+      edges,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            name,
+            style: {
+              height: 0,
+              width: 0,
+              appearance: "none",
+              border: "none",
+              outline: "none",
+              margin: 0,
+              padding: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Grid,
+          {
+            container: true,
+            spacing: 2,
+            style: {
+              flexWrap: "nowrap"
+            },
+            alignItems: "center",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DateInput_styled.StyledDay, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                DateNumberInput.default,
+                {
+                  disabled,
+                  min: 1,
+                  max: maxDays,
+                  placeholder: "DD",
+                  leadingZero: true,
+                  onChange: handleDayChange,
+                  value: day,
+                  name: `${name}_day`,
+                  inputRef: dayInput,
+                  required,
+                  label: "Day",
+                  hideLabel: true
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(DateInput_styled.StyledSlash, { item: true, children: "/" }),
+              /* @__PURE__ */ jsxRuntime.jsx(DateInput_styled.StyledMonth, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                DateNumberInput.default,
+                {
+                  disabled,
+                  min: 1,
+                  max: 12,
+                  placeholder: "MM",
+                  leadingZero: true,
+                  onChange: handleMonthChange,
+                  value: month,
+                  name: `${name}_month`,
+                  inputRef: monthInput,
+                  required,
+                  label: "Month",
+                  hideLabel: true
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(DateInput_styled.StyledSlash, { item: true, children: "/" }),
+              /* @__PURE__ */ jsxRuntime.jsx(DateInput_styled.StyledYear, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                DateNumberInput.default,
+                {
+                  disabled,
+                  min: parseInt(minYear, 10),
+                  max: parseInt(maxYear, 10),
+                  placeholder: "YYYY",
+                  leadingZero: false,
+                  onChange: handleYearChange,
+                  value: value.year,
+                  name: `${name}_year`,
+                  inputRef: yearInput,
+                  required,
+                  label: "Year",
+                  reverse: true,
+                  hideLabel: true
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+DateInput.propTypes = {
+  /**
+   * Function to handle input change
+   */
+  onChange: PropTypes.func.isRequired,
+  /**
+   * Function to handle input change
+   */
+  value: PropTypes.shape({
+    day: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    month: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    year: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Whether or not to display an error message (if there is a message to display).
+   */
+  showError: PropTypes.bool,
+  /**
+   * The error message to display if showError === true
+   */
+  errorMessage: PropTypes.string,
+  /**
+   * Minimun year
+   */
+  minYear: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * Maximum Year
+   */
+  maxYear: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /**
+   * If `true`, the component will take up the full width of its container.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * Placed the helper text above or below the input.
+   */
+  helperTextPlacement: PropTypes.oneOf(["above", "below"]),
+  /**
+   * The label content.
+   */
+  label: PropTypes.node,
+  /**
+   * The input name.
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * If `true`, the label will indicate that the input is required.
+   */
+  required: PropTypes.bool,
+  /**
+   * Make button edges rounded or square
+   */
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"])
+};
+
+exports.default = DateInput;

package/dist/cjs/components/DateInput.styled.cjs

@@ -0,0 +1,26 @@
+"use strict";
+'use strict';
+
+var styles = require('@mui/material/styles');
+var Grid = require('@mui/material/Grid');
+
+const StyledDay = styles.styled(Grid)({
+  flexGrow: 0.5,
+  minWidth: 80
+});
+const StyledMonth = styles.styled(Grid)({
+  flexGrow: 0.5,
+  minWidth: 80
+});
+const StyledYear = styles.styled(Grid)({
+  flexGrow: 2,
+  minWidth: 110
+});
+const StyledSlash = styles.styled(Grid)(({ theme }) => ({
+  color: theme.palette.default.light
+}));
+
+exports.StyledDay = StyledDay;
+exports.StyledMonth = StyledMonth;
+exports.StyledSlash = StyledSlash;
+exports.StyledYear = StyledYear;

package/dist/cjs/components/DateNumberInput.cjs

@@ -0,0 +1,175 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var PropTypes = require('prop-types');
+var framerMotion = require('framer-motion');
+var useMediaQuery = require('@mui/material/useMediaQuery');
+var Autocomplete = require('./Autocomplete.cjs');
+var Select = require('./Select.cjs');
+var DateNumberInput_styled = require('./DateNumberInput.styled.cjs');
+
+function DateNumberInput({
+  inputRef,
+  leadingZero = true,
+  max,
+  min = 0,
+  name,
+  onChange,
+  placeholder = "",
+  required = false,
+  reverse = false,
+  value = "",
+  ...rest
+}) {
+  const [error, setError] = React.useState(false);
+  const [selected, setSelected] = React.useState(null);
+  const controls = framerMotion.useAnimation();
+  const maxLength = max.toString().length;
+  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("sm"));
+  React.useEffect(() => {
+    if (error) {
+      controls.start({
+        translateX: ["-12px", "10px", "-6px", "4px"],
+        transition: { duration: 0.25, ease: "easeInOut" }
+      });
+      inputRef.current.focus();
+      if (isNotMobile) {
+        inputRef.current.select();
+      }
+      setTimeout(() => setError(false), 500);
+    }
+  }, [error, controls, inputRef, isNotMobile]);
+  React.useEffect(() => {
+    if (value && parseInt(value, 10) > max) {
+      onChange(max);
+      setError(true);
+    }
+  }, [value, max, onChange]);
+  const handleKeyDown = (e) => {
+    const notAllowed = ["-", "+", ".", "e", "E"];
+    if (notAllowed.includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+  const handleChange = (newValue) => {
+    let hasError = false;
+    let updatedValue = newValue;
+    updatedValue = parseInt(updatedValue, 10).toString();
+    if (updatedValue.length > maxLength) {
+      updatedValue = updatedValue.substring(0, maxLength);
+      hasError = true;
+    }
+    if (parseInt(updatedValue, 10) > max) {
+      updatedValue = max;
+      hasError = true;
+    }
+    if (hasError) {
+      setError(true);
+    }
+    if (leadingZero && updatedValue !== "0") {
+      while (updatedValue.length < maxLength) {
+        updatedValue = `0${updatedValue}`;
+      }
+    }
+    onChange(updatedValue);
+  };
+  const handleAutocompleteChange = (event, option) => {
+    setSelected(option);
+    handleChange(option.value);
+  };
+  const handleNativeChange = ({ target }) => {
+    onChange(target.value);
+  };
+  const options = React.useMemo(() => {
+    const optionArray = [];
+    let count = min;
+    while (count < max + 1) {
+      let label = count.toString();
+      if (leadingZero) {
+        while (label.length < maxLength) {
+          label = `0${label}`;
+        }
+      }
+      optionArray.push({
+        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__ */ jsxRuntime.jsx(DateNumberInput_styled.StyledWrapper, { animate: controls, error, children: isNotMobile ? /* @__PURE__ */ jsxRuntime.jsx(
+    Autocomplete.default,
+    {
+      fullWidth: true,
+      autoHighlight: true,
+      autoSelect: true,
+      blurOnSelect: true,
+      value: selected || autoCompleteDefault || null,
+      noOptionsText: "Invalid",
+      options: [{ value: "", label: "" }, ...options],
+      disableClearable: true,
+      name,
+      required,
+      onChange: handleAutocompleteChange,
+      getOptionLabel: (option) => option.label ? option.label : "",
+      renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
+        DateNumberInput_styled.StyledTextField,
+        {
+          ...params,
+          value,
+          placeholder,
+          name,
+          variant: "outlined",
+          onChange: handleNativeChange,
+          onKeyDown: handleKeyDown,
+          inputRef,
+          required,
+          inputProps: {
+            autoComplete: "off",
+            ...params.inputProps
+          }
+        }
+      ),
+      ...rest
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    Select.default,
+    {
+      fullWidth: true,
+      value: !Number.isNaN(value) ? value : null,
+      required,
+      placeholder,
+      onChange: handleNativeChange,
+      options: [{ value: "", label: placeholder }, ...options],
+      inputRef,
+      name,
+      native: true,
+      ...rest
+    }
+  ) });
+}
+DateNumberInput.propTypes = {
+  inputRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) })
+  ]).isRequired,
+  leadingZero: PropTypes.bool,
+  max: PropTypes.number.isRequired,
+  min: PropTypes.number,
+  name: PropTypes.string.isRequired,
+  reverse: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+exports.default = DateNumberInput;

package/dist/cjs/components/DateNumberInput.styled.cjs

@@ -0,0 +1,58 @@
+"use strict";
+'use strict';
+
+var framerMotion = require('framer-motion');
+var styles = require('@mui/material/styles');
+var TextField = require('@mui/material/TextField');
+
+const StyledWrapper = styles.styled(framerMotion.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 = styles.styled(TextField)(
+  ({ edges, required, showError, size, theme, value, variant }) => ({
+    margin: 0,
+    "& .MuiInputBase-root": {
+      padding: size === "small" ? `${theme.spacing(1, 8, 1, 2)} !important` : `${theme.spacing(3, 8, 3, 4)} !important`,
+      border: variant === "filled" ? "2px solid transparent" : null,
+      borderRadius: () => {
+        switch (edges) {
+          case "rounded":
+            return 99;
+          case "sharp":
+            return 0;
+          default:
+            return theme.shape.borderRadius;
+        }
+      }
+    },
+    "& .MuiOutlinedInput-notchedOutline, &:hover .MuiOutlinedInput-notchedOutline": {
+      borderColor: required && !value || showError ? theme.palette.secondary.main : null
+    },
+    "& .MuiFilledInput-root": {
+      backgroundColor: theme.palette.grey.transparent
+    },
+    "& .Mui-focused": {
+      border: variant === "filled" ? `2px solid ${required && !value ? theme.palette.secondary.main : theme.palette.primary.main}` : null
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      borderColor: required && !value ? theme.palette.secondary.main : null
+    },
+    "& input": {
+      padding: "0 !important"
+    }
+  })
+);
+
+exports.StyledTextField = StyledTextField;
+exports.StyledWrapper = StyledWrapper;

package/dist/cjs/components/DatePicker.cjs

@@ -0,0 +1,134 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var PropTypes = require('prop-types');
+var InputAdornment = require('@mui/material/InputAdornment');
+var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
+var EventIcon = require('@mui/icons-material/Event');
+var xDatePickers = require('@mui/x-date-pickers');
+var TextInput = require('./TextInput.cjs');
+var IconButton = require('./IconButton.cjs');
+var DatePicker_styled = require('./DatePicker.styled.cjs');
+
+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] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(DatePicker_styled.StyledWrapper, { required, hasValue: !!value, children: /* @__PURE__ */ jsxRuntime.jsx(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ jsxRuntime.jsx(
+    xDatePickers.DatePicker,
+    {
+      clearable: true,
+      disableCloseOnSelect: false,
+      inputFormat: format,
+      value,
+      onChange,
+      onClose: () => setOpen(false),
+      renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
+        TextInput.default,
+        {
+          ...params,
+          onClick: () => setOpen(true),
+          name,
+          fullWidth,
+          label,
+          helperText,
+          disabled,
+          required,
+          showError,
+          message: errorMessage,
+          edges,
+          variant,
+          autoComplete: "off",
+          InputProps: {
+            endAdornment: /* @__PURE__ */ jsxRuntime.jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton.default, { onClick: () => setOpen(true), children: icon || /* @__PURE__ */ jsxRuntime.jsx(EventIcon, {}) }) })
+          }
+        }
+      ),
+      ...rest
+    }
+  ) }) });
+}
+DatePicker.propTypes = {
+  /**
+   * If `true`, the `input` element will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Make button edges rounded or square
+   */
+  edges: PropTypes.oneOf(["normal", "rounded", "sharp"]),
+  /**
+   * If `true`, the label will be displayed in an error state.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.string,
+  /**
+   * Input icon
+   */
+  icon: PropTypes.node,
+  /**
+   * The label content.
+   */
+  label: PropTypes.string,
+  /**
+   * The field name.
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * If `true`, the label is displayed as required and the `input` element` will be required.
+   */
+  required: PropTypes.bool,
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: PropTypes.any,
+  /**
+   * The variant to use.
+   */
+  variant: PropTypes.oneOf(["filled", "outlined"]),
+  /**
+   * Whether or not to display an error message (if there is a message to display).
+   */
+  showError: PropTypes.bool,
+  /**
+   * The error message to display if showError === true
+   */
+  errorMessage: PropTypes.string,
+  /**
+   * Date format. See: https://day.js.org/docs/en/display/format
+   */
+  format: PropTypes.string,
+  /**
+   * Handle Input change event
+   */
+  onChange: PropTypes.func
+};
+
+exports.default = DatePicker;

package/dist/cjs/components/DatePicker.styled.cjs

@@ -0,0 +1,17 @@
+"use strict";
+'use strict';
+
+var styles = require('@mui/material/styles');
+
+const StyledWrapper = styles.styled("span")(({ required, theme, hasValue }) => ({
+  "& input": {
+    "&::placeholder": {
+      textTransform: "uppercase"
+    }
+  },
+  "& .MuiOutlinedInput-notchedOutline, &:hover .MuiOutlinedInput-notchedOutline": {
+    borderColor: required && !hasValue ? theme.palette.secondary.main : theme.palette.grey.main
+  }
+}));
+
+exports.StyledWrapper = StyledWrapper;