@tenancy.nz/ui 1.0.2 → 1.0.4

package/dist/esm/components/Autocomplete.js

@@ -1,4 +1,5 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import PropTypes from 'prop-types';
@@ -7,88 +8,101 @@ import FormControl from './FormControl.js';
 import { StyledAutocomplete } from './Autocomplete.styled.js';
 import TextInput from './TextInput.js';
 
-function Autocomplete({
-  disabled = false,
-  edges = "smooth",
-  fullWidth = true,
-  helperText = "",
-  helperTextPlacement = "below",
-  label = "",
-  placeholder = "",
-  popupIcon = void 0,
-  required = false,
-  size = "medium",
-  variant = "outlined",
-  showError = false,
-  errorMessage = "",
-  name,
-  hideLabel = false,
-  disableIconRotation = false,
-  TextInputProps = {},
-  onChange = () => {
-  },
-  textInputAttrs = {},
-  ...rest
-}) {
-  const [selectedValue, setSelectedValue] = useState(rest.value || null);
-  const handleChange = (event, val, ...extras) => {
+var _excluded = ["disabled", "edges", "fullWidth", "helperText", "helperTextPlacement", "label", "placeholder", "popupIcon", "required", "size", "variant", "showError", "errorMessage", "name", "hideLabel", "disableIconRotation", "TextInputProps", "onChange", "textInputAttrs"],
+  _excluded2 = ["inputProps", "InputProps"];
+function Autocomplete(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$edges = _ref.edges,
+    edges = _ref$edges === void 0 ? "smooth" : _ref$edges,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth,
+    _ref$helperText = _ref.helperText,
+    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+    _ref$helperTextPlacem = _ref.helperTextPlacement,
+    helperTextPlacement = _ref$helperTextPlacem === void 0 ? "below" : _ref$helperTextPlacem,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    _ref$popupIcon = _ref.popupIcon,
+    popupIcon = _ref$popupIcon === void 0 ? void 0 : _ref$popupIcon,
+    _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$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "outlined" : _ref$variant,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    name = _ref.name,
+    _ref$hideLabel = _ref.hideLabel,
+    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
+    _ref$disableIconRotat = _ref.disableIconRotation,
+    disableIconRotation = _ref$disableIconRotat === void 0 ? false : _ref$disableIconRotat,
+    _ref$TextInputProps = _ref.TextInputProps,
+    TextInputProps = _ref$TextInputProps === void 0 ? {} : _ref$TextInputProps,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    _ref$textInputAttrs = _ref.textInputAttrs,
+    textInputAttrs = _ref$textInputAttrs === void 0 ? {} : _ref$textInputAttrs,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(rest.value || null),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedValue = _useState2[0],
+    setSelectedValue = _useState2[1];
+  var handleChange = function handleChange(event, val) {
     setSelectedValue(val);
-    onChange(event, val, ...extras);
-  };
-  return /* @__PURE__ */ jsx(
-    FormControl,
-    {
-      name,
-      fullWidth,
-      label,
-      helperText,
-      helperTextPlacement,
-      disabled,
-      required,
-      showError,
-      errorMessage,
-      hideLabel,
-      edges,
-      children: /* @__PURE__ */ jsx(
-        StyledAutocomplete,
-        {
-          disabled,
-          iconrotation: disableIconRotation ? "no" : "yes",
-          popupIcon: popupIcon === void 0 ? /* @__PURE__ */ jsx(KeyboardArrowDownIcon, {}) : popupIcon,
-          renderInput: ({ inputProps, InputProps, ...params }) => /* @__PURE__ */ jsx(
-            TextInput,
-            {
-              ...params,
-              disabled,
-              name,
-              variant,
-              size,
-              edges,
-              required,
-              value: selectedValue,
-              placeholder,
-              inputProps: {
-                autoComplete: "off",
-                ...textInputAttrs,
-                ...inputProps
-              },
-              slotProps: {
-                input: {
-                  ...TextInputProps,
-                  ...InputProps
-                }
-              },
-              showError,
-              message: errorMessage,
-              ref: InputProps.ref
-            }
-          ),
-          onChange: handleChange,
-          ...rest
-        }
-      )
+    for (var _len = arguments.length, extras = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      extras[_key - 2] = arguments[_key];
     }
-  );
+    onChange.apply(void 0, [event, val].concat(extras));
+  };
+  return /* @__PURE__ */jsx(FormControl, {
+    name: name,
+    fullWidth: fullWidth,
+    label: label,
+    helperText: helperText,
+    helperTextPlacement: helperTextPlacement,
+    disabled: disabled,
+    required: required,
+    showError: showError,
+    errorMessage: errorMessage,
+    hideLabel: hideLabel,
+    edges: edges,
+    children: /* @__PURE__ */jsx(StyledAutocomplete, _objectSpread2({
+      disabled: disabled,
+      iconrotation: disableIconRotation ? "no" : "yes",
+      popupIcon: popupIcon === void 0 ? /* @__PURE__ */jsx(KeyboardArrowDownIcon, {}) : popupIcon,
+      renderInput: function renderInput(_ref2) {
+        var inputProps = _ref2.inputProps,
+          InputProps = _ref2.InputProps,
+          params = _objectWithoutProperties(_ref2, _excluded2);
+        return /* @__PURE__ */jsx(TextInput, _objectSpread2(_objectSpread2({}, params), {}, {
+          disabled: disabled,
+          name: name,
+          variant: variant,
+          size: size,
+          edges: edges,
+          required: required,
+          value: selectedValue,
+          placeholder: placeholder,
+          inputProps: _objectSpread2(_objectSpread2({
+            autoComplete: "off"
+          }, textInputAttrs), inputProps),
+          slotProps: {
+            input: _objectSpread2(_objectSpread2({}, TextInputProps), InputProps)
+          },
+          showError: showError,
+          message: errorMessage,
+          ref: InputProps.ref
+        }));
+      },
+      onChange: handleChange
+    }, rest))
+  });
 }
 Autocomplete.propTypes = {
   /**

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

@@ -2,12 +2,13 @@
 import Autocomplete from '@mui/material/Autocomplete';
 import { styled } from '@mui/material/styles';
 
-const StyledAutocomplete = styled(
-  Autocomplete
-)(({ iconrotation }) => ({
-  "& .MuiAutocomplete-popupIndicatorOpen": {
-    transform: iconrotation === "yes" ? null : "rotate(0)"
-  }
-}));
+var StyledAutocomplete = styled(Autocomplete)(function (_ref) {
+  var iconrotation = _ref.iconrotation;
+  return {
+    "& .MuiAutocomplete-popupIndicatorOpen": {
+      transform: iconrotation === "yes" ? null : "rotate(0)"
+    }
+  };
+});
 
 export { StyledAutocomplete };

package/dist/esm/components/Avatar.js

@@ -1,19 +1,32 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import PropTypes from 'prop-types';
 import { StyledAvatar } from './Avatar.styled.js';
 
-function Avatar({
-  children = null,
-  size = "small",
-  src = "",
-  srcSet = "",
-  variant = "",
-  ...rest
-}) {
-  const props = { size, src, srcSet, variant, ...rest };
-  return /* @__PURE__ */ jsx(StyledAvatar, { ...props, children });
+var _excluded = ["children", "size", "src", "srcSet", "variant"];
+function Avatar(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "small" : _ref$size,
+    _ref$src = _ref.src,
+    src = _ref$src === void 0 ? "" : _ref$src,
+    _ref$srcSet = _ref.srcSet,
+    srcSet = _ref$srcSet === void 0 ? "" : _ref$srcSet,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "" : _ref$variant,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var props = _objectSpread2({
+    size: size,
+    src: src,
+    srcSet: srcSet,
+    variant: variant
+  }, rest);
+  return /* @__PURE__ */jsx(StyledAvatar, _objectSpread2(_objectSpread2({}, props), {}, {
+    children: children
+  }));
 }
 Avatar.propTypes = {
   /**

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

@@ -1,22 +1,20 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import styled, { css } from 'styled-components';
 import MuiAvatar from '@mui/material/Avatar';
 
-const sizeFn = (size) => {
-  const sizes = {
+var _templateObject, _templateObject2;
+var sizeFn = function sizeFn(size) {
+  var sizes = {
     large: 50,
     medium: 40,
     small: 30
   };
   return sizes[size];
 };
-const StyledAvatar = styled(MuiAvatar)`
-  ${({ size }) => css`
-    && {
-      width: ${sizeFn(size)}px;
-      height: ${sizeFn(size)}px;
-    }
-  `}
-`;
+var StyledAvatar = styled(MuiAvatar)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var size = _ref.size;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    && {\n      width: ", "px;\n      height: ", "px;\n    }\n  "])), sizeFn(size), sizeFn(size));
+});
 
 export { StyledAvatar };

package/dist/esm/components/AvatarCropDialog.js

@@ -1,4 +1,5 @@
 "use strict";
+import { slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import PropTypes from 'prop-types';
@@ -11,44 +12,80 @@ import ModalActions from './ModalActions.js';
 import 'react-image-crop/dist/ReactCrop.css';
 import { StyledEditor } from './AvatarCropDialog.styled.js';
 
-function AvatarCropDialog({
-  helperText = "",
-  label = "",
-  showError = false,
-  errorMessage = "",
-  onSave = () => Promise.resolve(true),
-  onDelete = () => Promise.resolve(true),
-  droppedFile = null
-}) {
-  const isNotMobile = useMediaQuery((theme) => theme.breakpoints.up("md"));
-  const [crop, setCrop] = useState({ aspect: 1, unit: "%", width: 100 });
-  const [originalImage, setOriginalImage] = useState(null);
-  const [confirmDelete, setConfirmDelete] = useState(false);
-  const [editorWidth, setEditorWidth] = useState("100%");
-  const [saving, setSaving] = useState(false);
-  const [cancelling, setCancelling] = useState(false);
-  const handleCancel = () => {
+function AvatarCropDialog(_ref) {
+  var _ref$helperText = _ref.helperText,
+    helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    _ref$onSave = _ref.onSave,
+    onSave = _ref$onSave === void 0 ? function () {
+      return Promise.resolve(true);
+    } : _ref$onSave,
+    _ref$onDelete = _ref.onDelete,
+    onDelete = _ref$onDelete === void 0 ? function () {
+      return Promise.resolve(true);
+    } : _ref$onDelete,
+    _ref$droppedFile = _ref.droppedFile,
+    droppedFile = _ref$droppedFile === void 0 ? null : _ref$droppedFile;
+  var isNotMobile = useMediaQuery(function (theme) {
+    return theme.breakpoints.up("md");
+  });
+  var _useState = useState({
+      aspect: 1,
+      unit: "%",
+      width: 100
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    crop = _useState2[0],
+    setCrop = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    originalImage = _useState4[0],
+    setOriginalImage = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    confirmDelete = _useState6[0],
+    setConfirmDelete = _useState6[1];
+  var _useState7 = useState("100%"),
+    _useState8 = _slicedToArray(_useState7, 2),
+    editorWidth = _useState8[0],
+    setEditorWidth = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    saving = _useState0[0],
+    setSaving = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    cancelling = _useState10[0],
+    setCancelling = _useState10[1];
+  var handleCancel = function handleCancel() {
     setCancelling(true);
-    onDelete().then(() => {
+    onDelete().then(function () {
       setOriginalImage(null);
       setConfirmDelete(false);
       setCancelling(false);
     });
   };
-  const handleCropChange = (newCrop) => setCrop(newCrop);
-  const handleImageLoaded = (image) => {
-    let { width } = image;
+  var handleCropChange = function handleCropChange(newCrop) {
+    return setCrop(newCrop);
+  };
+  var handleImageLoaded = function handleImageLoaded(image) {
+    var width = image.width;
     if (window.innerHeight * 0.7 < image.height) {
       width = image.width * (window.innerHeight * 0.7 / image.height);
     }
     if (width < window.innerWidth * 0.7) {
-      setEditorWidth(`${width}px`);
+      setEditorWidth("".concat(width, "px"));
     }
-    const widthPercent = image.width < image.height ? 1 : image.height / image.width;
-    const heightPercent = image.width > image.height ? 1 : image.width / image.height;
-    const y = (1 - heightPercent) / 2;
-    const x = (1 - widthPercent) / 2;
-    const height = image.height * (width / image.width);
+    var widthPercent = image.width < image.height ? 1 : image.height / image.width;
+    var heightPercent = image.width > image.height ? 1 : image.width / image.height;
+    var y = (1 - heightPercent) / 2;
+    var x = (1 - widthPercent) / 2;
+    var height = image.height * (width / image.width);
     setCrop({
       unit: "px",
       width: width * widthPercent,
@@ -60,107 +97,81 @@ function AvatarCropDialog({
     setOriginalImage(image);
     return false;
   };
-  const handleImageSave = () => {
+  var handleImageSave = function handleImageSave() {
     if (originalImage && crop.width && crop.height) {
-      const canvas = document.createElement("canvas");
-      const scaleX = originalImage.naturalWidth / originalImage.width;
-      const scaleY = originalImage.naturalHeight / originalImage.height;
+      var canvas = document.createElement("canvas");
+      var scaleX = originalImage.naturalWidth / originalImage.width;
+      var scaleY = originalImage.naturalHeight / originalImage.height;
       canvas.width = crop.width;
       canvas.height = crop.height;
-      const ctx = canvas.getContext("2d");
-      ctx.drawImage(
-        originalImage,
-        crop.x * scaleX,
-        crop.y * scaleY,
-        crop.width * scaleX,
-        crop.height * scaleY,
-        0,
-        0,
-        crop.width,
-        crop.height
-      );
-      return new Promise((resolve, reject) => {
-        canvas.toBlob(
-          (blob) => {
-            if (!blob) {
-              console.error("Canvas is empty");
-              reject();
-            }
-            setSaving(true);
-            const reader = new FileReader();
-            reader.addEventListener("load", () => {
-              onSave(reader.result, blob).then(() => resolve());
+      var ctx = canvas.getContext("2d");
+      ctx.drawImage(originalImage, crop.x * scaleX, crop.y * scaleY, crop.width * scaleX, crop.height * scaleY, 0, 0, crop.width, crop.height);
+      return new Promise(function (resolve, reject) {
+        canvas.toBlob(function (blob) {
+          if (!blob) {
+            console.error("Canvas is empty");
+            reject();
+          }
+          setSaving(true);
+          var reader = new FileReader();
+          reader.addEventListener("load", function () {
+            onSave(reader.result, blob).then(function () {
+              return resolve();
             });
-            reader.readAsDataURL(blob);
-          },
-          "image/jpeg",
-          0.6
-        );
+          });
+          reader.readAsDataURL(blob);
+        }, "image/jpeg", 0.6);
       });
     }
     return false;
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      FormControl,
-      {
-        name: "avatar-crop-editor",
-        fullWidth: true,
-        label,
-        helperText,
-        showError,
-        errorMessage,
-        children: /* @__PURE__ */ jsx(StyledEditor, { showError, children: /* @__PURE__ */ jsx(
-          ReactCrop,
-          {
-            src: droppedFile,
-            crop,
-            style: {
-              width: editorWidth,
-              maxHeight: window.innerHeight * 0.7
-            },
-            circularCrop: true,
-            onChange: handleCropChange,
-            onImageLoaded: handleImageLoaded,
-            keepSelection: true
-          }
-        ) })
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsx(FormControl, {
+      name: "avatar-crop-editor",
+      fullWidth: true,
+      label: label,
+      helperText: helperText,
+      showError: showError,
+      errorMessage: errorMessage,
+      children: /* @__PURE__ */jsx(StyledEditor, {
+        showError: showError,
+        children: /* @__PURE__ */jsx(ReactCrop, {
+          src: droppedFile,
+          crop: crop,
+          style: {
+            width: editorWidth,
+            maxHeight: window.innerHeight * 0.7
+          },
+          circularCrop: true,
+          onChange: handleCropChange,
+          onImageLoaded: handleImageLoaded,
+          keepSelection: true
+        })
+      })
+    }, "form-control"), /* @__PURE__ */jsxs(ModalActions, {
+      children: [/* @__PURE__ */jsx(Button, {
+        onClick: handleCancel,
+        variant: "outlined",
+        loading: cancelling,
+        color: "primaryAlt",
+        fullWidth: !isNotMobile,
+        children: "Cancel"
+      }), /* @__PURE__ */jsx(Button, {
+        onClick: handleImageSave,
+        loading: saving,
+        color: "primaryAlt",
+        fullWidth: !isNotMobile,
+        children: "Save"
+      })]
+    }), /* @__PURE__ */jsx(Confirmation, {
+      open: confirmDelete,
+      onCancel: function onCancel() {
+        return setConfirmDelete(false);
       },
-      "form-control"
-    ),
-    /* @__PURE__ */ jsxs(ModalActions, { children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: handleCancel,
-          variant: "outlined",
-          loading: cancelling,
-          color: "primaryAlt",
-          fullWidth: !isNotMobile,
-          children: "Cancel"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          onClick: handleImageSave,
-          loading: saving,
-          color: "primaryAlt",
-          fullWidth: !isNotMobile,
-          children: "Save"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      Confirmation,
-      {
-        open: confirmDelete,
-        onCancel: () => setConfirmDelete(false),
-        onConfirm: handleCancel,
-        message: "Are you sure you want to remove the attached image?"
-      }
-    )
-  ] });
+      onConfirm: handleCancel,
+      message: "Are you sure you want to remove the attached image?"
+    })]
+  });
 }
 AvatarCropDialog.propTypes = {
   /**

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

@@ -1,19 +1,23 @@
 "use strict";
 import { styled } from '@mui/material/styles';
 
-const StyledEditor = styled("div")(({ showError, theme }) => ({
-  width: "100%",
-  padding: theme.spacing(6, 4),
-  backgroundImage: `linear-gradient(45deg, ${theme.palette.grey[700]} 25%, transparent 25%), linear-gradient(-45deg, ${theme.palette.grey[700]} 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ${theme.palette.grey[700]} 75%), linear-gradient(-45deg, transparent 75%, ${theme.palette.grey[700]} 75%)`,
-  backgroundSize: "20px 20px",
-  backgroundColor: "rgba(0, 0, 0, 0.5)",
-  backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
-  border: `1px solid ${showError ? theme.palette.error.main : theme.palette.primary.main}`,
-  borderRadius: theme.shape.borderRadius,
-  "& .ReactCrop": {
-    margin: "0 auto",
-    display: "block"
-  }
-}));
+var StyledEditor = styled("div")(function (_ref) {
+  var showError = _ref.showError,
+    theme = _ref.theme;
+  return {
+    width: "100%",
+    padding: theme.spacing(6, 4),
+    backgroundImage: "linear-gradient(45deg, ".concat(theme.palette.grey[700], " 25%, transparent 25%), linear-gradient(-45deg, ").concat(theme.palette.grey[700], " 25%, transparent 25%), linear-gradient(45deg, transparent 75%, ").concat(theme.palette.grey[700], " 75%), linear-gradient(-45deg, transparent 75%, ").concat(theme.palette.grey[700], " 75%)"),
+    backgroundSize: "20px 20px",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
+    border: "1px solid ".concat(showError ? theme.palette.error.main : theme.palette.primary.main),
+    borderRadius: theme.shape.borderRadius,
+    "& .ReactCrop": {
+      margin: "0 auto",
+      display: "block"
+    }
+  };
+});
 
 export { StyledEditor };