@tenancy.nz/ui 1.0.1 → 1.0.3

package/dist/esm/components/TimeInput.js

@@ -1,4 +1,5 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
@@ -8,34 +9,51 @@ import 'mime/lite';
 import { parseTimeStrByFormat, getHourOptions, getMinuteOptions, getMeridianOptions } from '../utils/helpers/time.js';
 import { StyledContainer, StyledSelect, StyledSpacer } from './TimeInput.styled.js';
 
-function TimeInput({
-  disabled = false,
-  disableFirstOption = false,
-  errorMessage = "",
-  fullWidth = false,
-  fromFormat = "HH:mm:ss",
-  helperText = "",
-  helperTextPlacement = "below",
-  label = "",
-  minutesIncrementStep = 5,
-  onChange,
-  name,
-  required = false,
-  showError = false,
-  size = "medium",
-  toFormat = "HH:mm:ss",
-  value = "",
-  ...rest
-}) {
-  const inputRef = useRef();
-  const [values, setValues] = useState({
-    hour: "",
-    minute: "",
-    meridian: ""
-  });
-  useEffect(() => {
+var _excluded = ["disabled", "disableFirstOption", "errorMessage", "fullWidth", "fromFormat", "helperText", "helperTextPlacement", "label", "minutesIncrementStep", "onChange", "name", "required", "showError", "size", "toFormat", "value"];
+function TimeInput(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$disableFirstOpti = _ref.disableFirstOption,
+    disableFirstOption = _ref$disableFirstOpti === void 0 ? false : _ref$disableFirstOpti,
+    _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? "" : _ref$errorMessage,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    _ref$fromFormat = _ref.fromFormat,
+    fromFormat = _ref$fromFormat === void 0 ? "HH:mm:ss" : _ref$fromFormat,
+    _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$minutesIncrement = _ref.minutesIncrementStep,
+    minutesIncrementStep = _ref$minutesIncrement === void 0 ? 5 : _ref$minutesIncrement,
+    onChange = _ref.onChange,
+    name = _ref.name,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$showError = _ref.showError,
+    showError = _ref$showError === void 0 ? false : _ref$showError,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$toFormat = _ref.toFormat,
+    toFormat = _ref$toFormat === void 0 ? "HH:mm:ss" : _ref$toFormat,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? "" : _ref$value,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var inputRef = useRef();
+  var _useState = useState({
+      hour: "",
+      minute: "",
+      meridian: ""
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    values = _useState2[0],
+    setValues = _useState2[1];
+  useEffect(function () {
     if (value) {
-      const dateObj = parseTimeStrByFormat(value, fromFormat);
+      var dateObj = parseTimeStrByFormat(value, fromFormat);
       setValues({
         hour: dateObj.format("hh"),
         minute: dateObj.format("mm"),
@@ -43,135 +61,102 @@ function TimeInput({
       });
     }
   }, [fromFormat, value]);
-  const hourOptions = getHourOptions(disableFirstOption);
-  const meridianOptions = getMeridianOptions(disableFirstOption);
-  const minuteOptions = getMinuteOptions(
-    0,
-    minutesIncrementStep === 5 ? 55 : 59,
-    minutesIncrementStep,
-    disableFirstOption
-  );
-  const handleChange = (e, type) => {
-    const newValues = { ...values, [type]: e.target.value };
-    const dateObj = parseTimeStrByFormat(
-      `${newValues.hour}:${newValues.minute}${newValues.meridian}`,
-      "hh:mma"
-    );
-    const dateStr = dateObj.format(toFormat);
-    const newValue = dateStr === "Invalid Date" ? "" : dateStr;
+  var hourOptions = getHourOptions(disableFirstOption);
+  var meridianOptions = getMeridianOptions(disableFirstOption);
+  var minuteOptions = getMinuteOptions(0, minutesIncrementStep === 5 ? 55 : 59, minutesIncrementStep, disableFirstOption);
+  var handleChange = function handleChange(e, type) {
+    var newValues = _objectSpread2(_objectSpread2({}, values), {}, _defineProperty({}, type, e.target.value));
+    var dateObj = parseTimeStrByFormat("".concat(newValues.hour, ":").concat(newValues.minute).concat(newValues.meridian), "hh:mma");
+    var dateStr = dateObj.format(toFormat);
+    var newValue = dateStr === "Invalid Date" ? "" : dateStr;
     inputRef.current.value = newValue;
-    const evt = new Event("change", { bubbles: true, cancelable: false });
+    var evt = new Event("change", {
+      bubbles: true,
+      cancelable: false
+    });
     inputRef.current.dispatchEvent(evt);
     setValues(newValues);
     onChange(evt);
   };
-  return /* @__PURE__ */ jsxs(
-    FormControl,
-    {
-      fullWidth,
-      name,
-      label,
-      helperText,
-      helperTextPlacement,
-      disabled,
-      required,
-      showError,
-      errorMessage,
-      edges: "normal",
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            defaultValue: rest.defaultValue || value,
-            name,
-            ref: inputRef,
-            style: {
-              height: 0,
-              width: 0,
-              appearance: "none",
-              border: "none",
-              outline: "none",
-              margin: 0,
-              padding: 0
-            }
+  return /* @__PURE__ */jsxs(FormControl, {
+    fullWidth: fullWidth,
+    name: name,
+    label: label,
+    helperText: helperText,
+    helperTextPlacement: helperTextPlacement,
+    disabled: disabled,
+    required: required,
+    showError: showError,
+    errorMessage: errorMessage,
+    edges: "normal",
+    children: [/* @__PURE__ */jsx("input", {
+      defaultValue: rest.defaultValue || value,
+      name: name,
+      ref: inputRef,
+      style: {
+        height: 0,
+        width: 0,
+        appearance: "none",
+        border: "none",
+        outline: "none",
+        margin: 0,
+        padding: 0
+      }
+    }), /* @__PURE__ */jsxs(StyledContainer, {
+      size: size,
+      children: [/* @__PURE__ */jsx(StyledSelect, {
+        required: required,
+        size: size,
+        value: inputRef.current ? inputRef.current.value : value,
+        children: /* @__PURE__ */jsx(Select, {
+          disabled: disabled,
+          name: "".concat(name, "_hours"),
+          placeholder: "HH",
+          required: required,
+          native: true,
+          options: hourOptions,
+          value: values.hour,
+          onChange: function onChange(e) {
+            handleChange(e, "hour");
           }
-        ),
-        /* @__PURE__ */ jsxs(StyledContainer, { size, children: [
-          /* @__PURE__ */ jsx(
-            StyledSelect,
-            {
-              required,
-              size,
-              value: inputRef.current ? inputRef.current.value : value,
-              children: /* @__PURE__ */ jsx(
-                Select,
-                {
-                  disabled,
-                  name: `${name}_hours`,
-                  placeholder: "HH",
-                  required,
-                  native: true,
-                  options: hourOptions,
-                  value: values.hour,
-                  onChange: (e) => {
-                    handleChange(e, "hour");
-                  }
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(StyledSpacer, { children: ":" }),
-          /* @__PURE__ */ jsx(
-            StyledSelect,
-            {
-              required,
-              size,
-              value: inputRef.current ? inputRef.current.value : value,
-              children: /* @__PURE__ */ jsx(
-                Select,
-                {
-                  disabled,
-                  name: `${name}_minutes`,
-                  placeholder: "MM",
-                  required,
-                  native: true,
-                  options: minuteOptions,
-                  value: values.minute,
-                  onChange: (e) => {
-                    handleChange(e, "minute");
-                  }
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(StyledSpacer, {}),
-          /* @__PURE__ */ jsx(
-            StyledSelect,
-            {
-              required,
-              size,
-              value: inputRef.current ? inputRef.current.value : value,
-              children: /* @__PURE__ */ jsx(
-                Select,
-                {
-                  disabled,
-                  name: `${name}_meridian`,
-                  placeholder: "AM",
-                  required,
-                  native: true,
-                  options: meridianOptions,
-                  value: values.meridian,
-                  onChange: (e) => {
-                    handleChange(e, "meridian");
-                  }
-                }
-              )
-            }
-          )
-        ] })
-      ]
-    }
-  );
+        })
+      }), /* @__PURE__ */jsx(StyledSpacer, {
+        children: ":"
+      }), /* @__PURE__ */jsx(StyledSelect, {
+        required: required,
+        size: size,
+        value: inputRef.current ? inputRef.current.value : value,
+        children: /* @__PURE__ */jsx(Select, {
+          disabled: disabled,
+          name: "".concat(name, "_minutes"),
+          placeholder: "MM",
+          required: required,
+          native: true,
+          options: minuteOptions,
+          value: values.minute,
+          onChange: function onChange(e) {
+            handleChange(e, "minute");
+          }
+        })
+      }), /* @__PURE__ */jsx(StyledSpacer, {}), /* @__PURE__ */jsx(StyledSelect, {
+        required: required,
+        size: size,
+        value: inputRef.current ? inputRef.current.value : value,
+        children: /* @__PURE__ */jsx(Select, {
+          disabled: disabled,
+          name: "".concat(name, "_meridian"),
+          placeholder: "AM",
+          required: required,
+          native: true,
+          options: meridianOptions,
+          value: values.meridian,
+          onChange: function onChange(e) {
+            handleChange(e, "meridian");
+          }
+        })
+      })]
+    })]
+  });
 }
 TimeInput.propTypes = {
   /**

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

@@ -2,33 +2,46 @@
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 
-const StyledContainer = styled(Box)(({ size }) => ({
-  display: "flex",
-  flexWrap: "nowrap",
-  alignItems: "center",
-  justifyContent: "space-between",
-  width: "100%",
-  "& .MuiNativeSelect-icon": {
-    width: size === "small" ? "0.7em" : null,
-    height: size === "small" ? "0.7em" : null,
-    right: size === "small" ? "3px" : null,
-    top: size === "small" ? "calc(50% - 9px)" : null
-  }
-}));
-const StyledSelect = styled("div")(({ required, size, theme, value }) => ({
-  minWidth: size === "small" ? 50 : 80,
-  "& select": {
-    padding: "0.8rem 2rem 0.7rem 1rem !important"
-  },
-  "& fieldset": {
-    borderColor: required && !value ? theme.palette.secondary.main : null
-  }
-}));
-const StyledSpacer = styled("span")(({ size, theme }) => ({
-  color: theme.palette.default.light,
-  padding: size === "small" ? "0 3px" : "0 5px",
-  fontSize: size === "small" ? "14px" : "18px",
-  fontWeight: 700
-}));
+var StyledContainer = styled(Box)(function (_ref) {
+  var size = _ref.size;
+  return {
+    display: "flex",
+    flexWrap: "nowrap",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    "& .MuiNativeSelect-icon": {
+      width: size === "small" ? "0.7em" : null,
+      height: size === "small" ? "0.7em" : null,
+      right: size === "small" ? "3px" : null,
+      top: size === "small" ? "calc(50% - 9px)" : null
+    }
+  };
+});
+var StyledSelect = styled("div")(function (_ref2) {
+  var required = _ref2.required,
+    size = _ref2.size,
+    theme = _ref2.theme,
+    value = _ref2.value;
+  return {
+    minWidth: size === "small" ? 50 : 80,
+    "& select": {
+      padding: "0.8rem 2rem 0.7rem 1rem !important"
+    },
+    "& fieldset": {
+      borderColor: required && !value ? theme.palette.secondary.main : null
+    }
+  };
+});
+var StyledSpacer = styled("span")(function (_ref3) {
+  var size = _ref3.size,
+    theme = _ref3.theme;
+  return {
+    color: theme.palette.default.light,
+    padding: size === "small" ? "0 3px" : "0 5px",
+    fontSize: size === "small" ? "14px" : "18px",
+    fontWeight: 700
+  };
+});
 
 export { StyledContainer, StyledSelect, StyledSpacer };

package/dist/esm/components/Tooltip.js

@@ -1,36 +1,56 @@
 "use strict";
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { jsx } from 'react/jsx-runtime';
 import Box from './Box.js';
 import StyledTooltip from './Tooltip.styled.js';
 
-function Tooltip({
-  children,
-  boxProps = {},
-  arrow = true,
-  enterDelay = 100,
-  enterNextDelay = 0,
-  enterTouchDelay = 700,
-  followCursor = false,
-  id = "",
-  leaveDelay = 0,
-  leaveTouchDelay = 1500,
-  placement = "top",
-  ...others
-}) {
-  const { className } = others;
-  const rest = {
-    arrow,
-    enterDelay,
-    enterNextDelay,
-    enterTouchDelay,
-    followCursor,
-    id,
-    leaveDelay,
-    leaveTouchDelay,
-    placement,
-    ...others
-  };
-  return /* @__PURE__ */ jsx(StyledTooltip, { classes: { popper: className }, ...rest, children: /* @__PURE__ */ jsx(Box, { display: "inline-flex", sx: boxProps, children }) });
+var _excluded = ["children", "boxProps", "arrow", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "placement"];
+function Tooltip(_ref) {
+  var children = _ref.children,
+    _ref$boxProps = _ref.boxProps,
+    boxProps = _ref$boxProps === void 0 ? {} : _ref$boxProps,
+    _ref$arrow = _ref.arrow,
+    arrow = _ref$arrow === void 0 ? true : _ref$arrow,
+    _ref$enterDelay = _ref.enterDelay,
+    enterDelay = _ref$enterDelay === void 0 ? 100 : _ref$enterDelay,
+    _ref$enterNextDelay = _ref.enterNextDelay,
+    enterNextDelay = _ref$enterNextDelay === void 0 ? 0 : _ref$enterNextDelay,
+    _ref$enterTouchDelay = _ref.enterTouchDelay,
+    enterTouchDelay = _ref$enterTouchDelay === void 0 ? 700 : _ref$enterTouchDelay,
+    _ref$followCursor = _ref.followCursor,
+    followCursor = _ref$followCursor === void 0 ? false : _ref$followCursor,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? "" : _ref$id,
+    _ref$leaveDelay = _ref.leaveDelay,
+    leaveDelay = _ref$leaveDelay === void 0 ? 0 : _ref$leaveDelay,
+    _ref$leaveTouchDelay = _ref.leaveTouchDelay,
+    leaveTouchDelay = _ref$leaveTouchDelay === void 0 ? 1500 : _ref$leaveTouchDelay,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "top" : _ref$placement,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var className = others.className;
+  var rest = _objectSpread2({
+    arrow: arrow,
+    enterDelay: enterDelay,
+    enterNextDelay: enterNextDelay,
+    enterTouchDelay: enterTouchDelay,
+    followCursor: followCursor,
+    id: id,
+    leaveDelay: leaveDelay,
+    leaveTouchDelay: leaveTouchDelay,
+    placement: placement
+  }, others);
+  return /* @__PURE__ */jsx(StyledTooltip, _objectSpread2(_objectSpread2({
+    classes: {
+      popper: className
+    }
+  }, rest), {}, {
+    children: /* @__PURE__ */jsx(Box, {
+      display: "inline-flex",
+      sx: boxProps,
+      children: children
+    })
+  }));
 }
 
 export { Tooltip as default };

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

@@ -1,51 +1,13 @@
 "use strict";
+import { taggedTemplateLiteral as _taggedTemplateLiteral } from '../_virtual/_rollupPluginBabelHelpers.js';
 import { styled } from '@mui/material/styles';
 import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import { getObjectProp } from '../utils/helpers/object.js';
 
-const StyledTooltip = styled(Tooltip)`
-  ${({ theme }) => `
-    & .${tooltipClasses.tooltip} {
-      padding: ${theme.spacing(3)};
-      background-color: ${getObjectProp(theme, "vars.palette.secondary.main")};
-      color: ${getObjectProp(theme, "vars.palette.secondary.contrastText")};
-      border: none;
-      font-size: 14px;
-      font-weight: 400;
-    }
-
-    && .${tooltipClasses.arrow} {
-      color: ${getObjectProp(theme, "vars.palette.secondary.main")};
-
-
-      &:before {
-        border-radius: ${theme.shape.borderRadius}px;
-      }
-    }
-
-    && .${tooltipClasses.tooltipPlacementTop} .${tooltipClasses.arrow} {
-      margin-bottom: -1.08em;
-      width: 2em;
-      height: 1.2em;
-    }
-    && .${tooltipClasses.tooltipPlacementBottom} .${tooltipClasses.arrow} {
-      margin-top: -1.08em;
-      width: 2em;
-      height: 1.2em;
-    }
-
-    && .${tooltipClasses.tooltipPlacementLeft} .${tooltipClasses.arrow} {
-      margin-right: -1.08em;
-      width: 1.2em;
-      height: 2em;
-    }
-
-    && .${tooltipClasses.tooltipPlacementRight} .${tooltipClasses.arrow} {
-      margin-left: -1.08em;
-      width: 1.2em;
-      height: 2em;
-    }
-`}
-`;
+var _templateObject;
+var StyledTooltip = styled(Tooltip)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return "\n    & .".concat(tooltipClasses.tooltip, " {\n      padding: ").concat(theme.spacing(3), ";\n      background-color: ").concat(getObjectProp(theme, "vars.palette.secondary.main"), ";\n      color: ").concat(getObjectProp(theme, "vars.palette.secondary.contrastText"), ";\n      border: none;\n      font-size: 14px;\n      font-weight: 400;\n    }\n\n    && .").concat(tooltipClasses.arrow, " {\n      color: ").concat(getObjectProp(theme, "vars.palette.secondary.main"), ";\n\n\n      &:before {\n        border-radius: ").concat(theme.shape.borderRadius, "px;\n      }\n    }\n\n    && .").concat(tooltipClasses.tooltipPlacementTop, " .").concat(tooltipClasses.arrow, " {\n      margin-bottom: -1.08em;\n      width: 2em;\n      height: 1.2em;\n    }\n    && .").concat(tooltipClasses.tooltipPlacementBottom, " .").concat(tooltipClasses.arrow, " {\n      margin-top: -1.08em;\n      width: 2em;\n      height: 1.2em;\n    }\n\n    && .").concat(tooltipClasses.tooltipPlacementLeft, " .").concat(tooltipClasses.arrow, " {\n      margin-right: -1.08em;\n      width: 1.2em;\n      height: 2em;\n    }\n\n    && .").concat(tooltipClasses.tooltipPlacementRight, " .").concat(tooltipClasses.arrow, " {\n      margin-left: -1.08em;\n      width: 1.2em;\n      height: 2em;\n    }\n");
+});
 
 export { StyledTooltip as default };

package/dist/esm/components/Truncate.js

@@ -4,10 +4,12 @@ import 'mime/lite';
 import { stripTags } from '../utils/helpers/string.js';
 import '../utils/helpers/time.js';
 
-function Truncate({ children, limit }) {
-  const truncatedStr = stripTags(children).slice(0, limit).trim();
+function Truncate(_ref) {
+  var children = _ref.children,
+    limit = _ref.limit;
+  var truncatedStr = stripTags(children).slice(0, limit).trim();
   if (children.length > truncatedStr.length) {
-    return `${truncatedStr}...`;
+    return "".concat(truncatedStr, "...");
   }
   return truncatedStr;
 }