@tenancy.nz/feature-ui 1.10.5 → 1.10.6

package/dist/cjs/components/ContactCard.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/components/ContactCardHeader.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var Stack = require('@mui/material/Stack');
+var ui = require('@tenancy.nz/ui');
+
+var _excluded = ["avatarColor", "avatarUrl", "disabled", "email", "firstName", "lastName", "mobile", "sx"];
+var CONTACT_TEXT = {
+  default: ui.token("palette.semantic.text.secondaryColor"),
+  disabled: ui.token("palette.semantic.text.disabledColor")
+};
+function ContactCardHeader(_ref) {
+  var _ref$avatarColor = _ref.avatarColor,
+    avatarColor = _ref$avatarColor === void 0 ? "grey" : _ref$avatarColor,
+    _ref$avatarUrl = _ref.avatarUrl,
+    avatarUrl = _ref$avatarUrl === void 0 ? void 0 : _ref$avatarUrl,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$email = _ref.email,
+    email = _ref$email === void 0 ? void 0 : _ref$email,
+    _ref$firstName = _ref.firstName,
+    firstName = _ref$firstName === void 0 ? void 0 : _ref$firstName,
+    _ref$lastName = _ref.lastName,
+    lastName = _ref$lastName === void 0 ? void 0 : _ref$lastName,
+    _ref$mobile = _ref.mobile,
+    mobile = _ref$mobile === void 0 ? void 0 : _ref$mobile,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var name = [firstName, lastName].filter(Boolean).join(" ");
+  return /* @__PURE__ */React.createElement(Stack, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    direction: "row",
+    alignItems: "center",
+    gap: 4
+  }, rest), {}, {
+    sx: sx
+  }), /* @__PURE__ */React.createElement(ui.Avatar, {
+    color: avatarColor,
+    src: avatarUrl,
+    alt: name,
+    size: 64
+  }), /* @__PURE__ */React.createElement(Stack, {
+    gap: 2
+  }, name && /* @__PURE__ */React.createElement(ui.Heading, {
+    as: "h5",
+    color: "inherit"
+  }, name), (email || mobile) && /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      color: disabled ? CONTACT_TEXT.disabled : CONTACT_TEXT.default,
+      fontSize: "12px"
+    }
+  }, email && /* @__PURE__ */React.createElement(ui.Text, {
+    variant: "inherit",
+    weight: "500"
+  }, email), mobile && /* @__PURE__ */React.createElement(ui.Text, {
+    variant: "inherit",
+    weight: "500"
+  }, mobile))));
+}
+
+exports.default = ContactCardHeader;

package/dist/cjs/components/ScrollTopButton.cjs

@@ -0,0 +1,193 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var Box = require('@mui/material/Box');
+var Portal = require('@mui/material/Portal');
+var ui = require('@tenancy.nz/ui');
+var ChevronUpOutlinedIcon = require('@tenancy.nz/icons/ChevronUpOutlined');
+
+var _excluded = ["anchorOrigin", "asIcon", "behavior", "container", "disablePortal", "label", "onClick", "position", "scrollContainer", "threshold", "x", "y"];
+var icon = /* @__PURE__ */React.createElement(ChevronUpOutlinedIcon, null);
+var defaultAnchorOrigin = {
+  horizontal: "right",
+  vertical: "bottom"
+};
+function resolveTarget(target) {
+  if (!target) {
+    return null;
+  }
+  if (typeof target === "function") {
+    return target();
+  }
+  if ("current" in target) {
+    return target.current;
+  }
+  return target;
+}
+function isDocumentScroller(element) {
+  if (!element) {
+    return true;
+  }
+  return element === document.body || element === document.documentElement;
+}
+function getScrollEventTarget(element) {
+  if (isDocumentScroller(element)) {
+    return window;
+  }
+  return element;
+}
+function getScrollTop(element) {
+  if (!element || isDocumentScroller(element)) {
+    return window.scrollY;
+  }
+  return element.scrollTop;
+}
+function scrollToTop(scrollElement, behavior) {
+  if (!scrollElement || isDocumentScroller(scrollElement)) {
+    window.scrollTo({
+      top: 0,
+      behavior: behavior
+    });
+    return;
+  }
+  scrollElement.scrollTo({
+    top: 0,
+    behavior: behavior
+  });
+}
+function getPosition(position, portalElement) {
+  if (position) {
+    return position;
+  }
+  if (!portalElement) {
+    return "static";
+  }
+  if (portalElement === document.body) {
+    return "fixed";
+  }
+  return "absolute";
+}
+function getPlacementSx(position, anchorOrigin, x, y) {
+  return _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({
+    position: position,
+    zIndex: "fab"
+  }, anchorOrigin.horizontal, x), anchorOrigin.vertical, y);
+}
+function useResolvedTarget(target, fallbackToBody) {
+  var _useState = React.useState(null),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    element = _useState2[0],
+    setElement = _useState2[1];
+  React.useEffect(function () {
+    var resolved = resolveTarget(target);
+    if (resolved) {
+      setElement(resolved);
+      return;
+    }
+    if (fallbackToBody) {
+      setElement(document.body);
+      return;
+    }
+    setElement(null);
+  }, [target, fallbackToBody]);
+  return element;
+}
+function useScrolledPast(scrollElement, threshold) {
+  var _useState3 = React.useState(threshold <= 0),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    scrolled = _useState4[0],
+    setScrolled = _useState4[1];
+  React.useEffect(function () {
+    if (threshold <= 0) {
+      setScrolled(true);
+      return void 0;
+    }
+    var eventTarget = getScrollEventTarget(scrollElement);
+    var update = function update() {
+      return setScrolled(getScrollTop(scrollElement) > threshold);
+    };
+    update();
+    eventTarget.addEventListener("scroll", update, {
+      passive: true
+    });
+    return function () {
+      return eventTarget.removeEventListener("scroll", update);
+    };
+  }, [scrollElement, threshold]);
+  return scrolled;
+}
+function ScrollTopButton(_ref2) {
+  var _ref2$anchorOrigin = _ref2.anchorOrigin,
+    anchorOrigin = _ref2$anchorOrigin === void 0 ? defaultAnchorOrigin : _ref2$anchorOrigin,
+    _ref2$asIcon = _ref2.asIcon,
+    asIcon = _ref2$asIcon === void 0 ? false : _ref2$asIcon,
+    _ref2$behavior = _ref2.behavior,
+    behavior = _ref2$behavior === void 0 ? "smooth" : _ref2$behavior,
+    _ref2$container = _ref2.container,
+    container = _ref2$container === void 0 ? null : _ref2$container,
+    _ref2$disablePortal = _ref2.disablePortal,
+    disablePortal = _ref2$disablePortal === void 0 ? false : _ref2$disablePortal,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? "Back to top" : _ref2$label,
+    _ref2$onClick = _ref2.onClick,
+    onClick = _ref2$onClick === void 0 ? void 0 : _ref2$onClick,
+    _ref2$position = _ref2.position,
+    position = _ref2$position === void 0 ? void 0 : _ref2$position,
+    _ref2$scrollContainer = _ref2.scrollContainer,
+    scrollContainer = _ref2$scrollContainer === void 0 ? null : _ref2$scrollContainer,
+    _ref2$threshold = _ref2.threshold,
+    threshold = _ref2$threshold === void 0 ? 120 : _ref2$threshold,
+    _ref2$x = _ref2.x,
+    x = _ref2$x === void 0 ? 32 : _ref2$x,
+    _ref2$y = _ref2.y,
+    y = _ref2$y === void 0 ? 32 : _ref2$y,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded);
+  var portalElement = useResolvedTarget(container, !disablePortal);
+  var scrollElement = useResolvedTarget(scrollContainer, true);
+  var scrolled = useScrolledPast(scrollElement, threshold);
+  var handleClick = function handleClick(event) {
+    scrollToTop(scrollElement, behavior);
+    onClick === null || onClick === void 0 || onClick(event);
+  };
+  if (!scrolled) {
+    return null;
+  }
+  if (!disablePortal && !portalElement) {
+    return null;
+  }
+  var resolvedPosition = getPosition(position, portalElement);
+  var withPlacement = function withPlacement(node) {
+    if (resolvedPosition === "static") {
+      return node;
+    }
+    return /* @__PURE__ */React.createElement(Box, {
+      sx: getPlacementSx(resolvedPosition, anchorOrigin, x, y)
+    }, node);
+  };
+  var withPortal = function withPortal(node) {
+    if (!portalElement) {
+      return node;
+    }
+    return /* @__PURE__ */React.createElement(Portal, {
+      container: portalElement
+    }, node);
+  };
+  if (asIcon) {
+    return withPortal(withPlacement(/* @__PURE__ */React.createElement(ui.IconButton, _rollupPluginBabelHelpers.objectSpread2({
+      variant: "outlined",
+      size: "large",
+      onClick: handleClick
+    }, rest), icon)));
+  }
+  return withPortal(withPlacement(/* @__PURE__ */React.createElement(ui.Button, _rollupPluginBabelHelpers.objectSpread2({
+    variant: "outlined",
+    startIcon: icon,
+    size: "large",
+    onClick: handleClick
+  }, rest), label)));
+}
+
+exports.default = ScrollTopButton;

package/dist/cjs/index.cjs

@@ -21,6 +21,7 @@ var NotesCard = require('./components/NotesCard.cjs');
 var PersonCard = require('./components/PersonCard.cjs');
 var PersonDetailHeader = require('./components/PersonDetailHeader.cjs');
 var PropertyCard = require('./components/PropertyCard.cjs');
+var ScrollTopButton = require('./components/ScrollTopButton.cjs');
 var StatusButton = require('./components/StatusButton.cjs');
 var TenantAvatarGroup = require('./components/TenantAvatarGroup.cjs');
 
@@ -47,5 +48,6 @@ exports.NotesCard = NotesCard.default;
 exports.PersonCard = PersonCard.default;
 exports.PersonDetailHeader = PersonDetailHeader.default;
 exports.PropertyCard = PropertyCard.default;
+exports.ScrollTopButton = ScrollTopButton.default;
 exports.StatusButton = StatusButton.default;
 exports.TenantAvatarGroup = TenantAvatarGroup.default;

package/dist/esm/components/ContactCard.js

@@ -0,0 +1 @@
+

package/dist/esm/components/ContactCardHeader.js

@@ -0,0 +1,60 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React from 'react';
+import Stack from '@mui/material/Stack';
+import { token, Avatar, Heading, Text } from '@tenancy.nz/ui';
+
+var _excluded = ["avatarColor", "avatarUrl", "disabled", "email", "firstName", "lastName", "mobile", "sx"];
+var CONTACT_TEXT = {
+  default: token("palette.semantic.text.secondaryColor"),
+  disabled: token("palette.semantic.text.disabledColor")
+};
+function ContactCardHeader(_ref) {
+  var _ref$avatarColor = _ref.avatarColor,
+    avatarColor = _ref$avatarColor === void 0 ? "grey" : _ref$avatarColor,
+    _ref$avatarUrl = _ref.avatarUrl,
+    avatarUrl = _ref$avatarUrl === void 0 ? void 0 : _ref$avatarUrl,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$email = _ref.email,
+    email = _ref$email === void 0 ? void 0 : _ref$email,
+    _ref$firstName = _ref.firstName,
+    firstName = _ref$firstName === void 0 ? void 0 : _ref$firstName,
+    _ref$lastName = _ref.lastName,
+    lastName = _ref$lastName === void 0 ? void 0 : _ref$lastName,
+    _ref$mobile = _ref.mobile,
+    mobile = _ref$mobile === void 0 ? void 0 : _ref$mobile,
+    _ref$sx = _ref.sx,
+    sx = _ref$sx === void 0 ? {} : _ref$sx,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var name = [firstName, lastName].filter(Boolean).join(" ");
+  return /* @__PURE__ */React.createElement(Stack, _objectSpread2(_objectSpread2({
+    direction: "row",
+    alignItems: "center",
+    gap: 4
+  }, rest), {}, {
+    sx: sx
+  }), /* @__PURE__ */React.createElement(Avatar, {
+    color: avatarColor,
+    src: avatarUrl,
+    alt: name,
+    size: 64
+  }), /* @__PURE__ */React.createElement(Stack, {
+    gap: 2
+  }, name && /* @__PURE__ */React.createElement(Heading, {
+    as: "h5",
+    color: "inherit"
+  }, name), (email || mobile) && /* @__PURE__ */React.createElement(Stack, {
+    sx: {
+      color: disabled ? CONTACT_TEXT.disabled : CONTACT_TEXT.default,
+      fontSize: "12px"
+    }
+  }, email && /* @__PURE__ */React.createElement(Text, {
+    variant: "inherit",
+    weight: "500"
+  }, email), mobile && /* @__PURE__ */React.createElement(Text, {
+    variant: "inherit",
+    weight: "500"
+  }, mobile))));
+}
+
+export { ContactCardHeader as default };

package/dist/esm/components/ScrollTopButton.js

@@ -0,0 +1,189 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React, { useState, useEffect } from 'react';
+import Box from '@mui/material/Box';
+import Portal from '@mui/material/Portal';
+import { IconButton, Button } from '@tenancy.nz/ui';
+import ChevronUpOutlinedIcon from '@tenancy.nz/icons/ChevronUpOutlined';
+
+var _excluded = ["anchorOrigin", "asIcon", "behavior", "container", "disablePortal", "label", "onClick", "position", "scrollContainer", "threshold", "x", "y"];
+var icon = /* @__PURE__ */React.createElement(ChevronUpOutlinedIcon, null);
+var defaultAnchorOrigin = {
+  horizontal: "right",
+  vertical: "bottom"
+};
+function resolveTarget(target) {
+  if (!target) {
+    return null;
+  }
+  if (typeof target === "function") {
+    return target();
+  }
+  if ("current" in target) {
+    return target.current;
+  }
+  return target;
+}
+function isDocumentScroller(element) {
+  if (!element) {
+    return true;
+  }
+  return element === document.body || element === document.documentElement;
+}
+function getScrollEventTarget(element) {
+  if (isDocumentScroller(element)) {
+    return window;
+  }
+  return element;
+}
+function getScrollTop(element) {
+  if (!element || isDocumentScroller(element)) {
+    return window.scrollY;
+  }
+  return element.scrollTop;
+}
+function scrollToTop(scrollElement, behavior) {
+  if (!scrollElement || isDocumentScroller(scrollElement)) {
+    window.scrollTo({
+      top: 0,
+      behavior: behavior
+    });
+    return;
+  }
+  scrollElement.scrollTo({
+    top: 0,
+    behavior: behavior
+  });
+}
+function getPosition(position, portalElement) {
+  if (position) {
+    return position;
+  }
+  if (!portalElement) {
+    return "static";
+  }
+  if (portalElement === document.body) {
+    return "fixed";
+  }
+  return "absolute";
+}
+function getPlacementSx(position, anchorOrigin, x, y) {
+  return _defineProperty(_defineProperty({
+    position: position,
+    zIndex: "fab"
+  }, anchorOrigin.horizontal, x), anchorOrigin.vertical, y);
+}
+function useResolvedTarget(target, fallbackToBody) {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    element = _useState2[0],
+    setElement = _useState2[1];
+  useEffect(function () {
+    var resolved = resolveTarget(target);
+    if (resolved) {
+      setElement(resolved);
+      return;
+    }
+    if (fallbackToBody) {
+      setElement(document.body);
+      return;
+    }
+    setElement(null);
+  }, [target, fallbackToBody]);
+  return element;
+}
+function useScrolledPast(scrollElement, threshold) {
+  var _useState3 = useState(threshold <= 0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    scrolled = _useState4[0],
+    setScrolled = _useState4[1];
+  useEffect(function () {
+    if (threshold <= 0) {
+      setScrolled(true);
+      return void 0;
+    }
+    var eventTarget = getScrollEventTarget(scrollElement);
+    var update = function update() {
+      return setScrolled(getScrollTop(scrollElement) > threshold);
+    };
+    update();
+    eventTarget.addEventListener("scroll", update, {
+      passive: true
+    });
+    return function () {
+      return eventTarget.removeEventListener("scroll", update);
+    };
+  }, [scrollElement, threshold]);
+  return scrolled;
+}
+function ScrollTopButton(_ref2) {
+  var _ref2$anchorOrigin = _ref2.anchorOrigin,
+    anchorOrigin = _ref2$anchorOrigin === void 0 ? defaultAnchorOrigin : _ref2$anchorOrigin,
+    _ref2$asIcon = _ref2.asIcon,
+    asIcon = _ref2$asIcon === void 0 ? false : _ref2$asIcon,
+    _ref2$behavior = _ref2.behavior,
+    behavior = _ref2$behavior === void 0 ? "smooth" : _ref2$behavior,
+    _ref2$container = _ref2.container,
+    container = _ref2$container === void 0 ? null : _ref2$container,
+    _ref2$disablePortal = _ref2.disablePortal,
+    disablePortal = _ref2$disablePortal === void 0 ? false : _ref2$disablePortal,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? "Back to top" : _ref2$label,
+    _ref2$onClick = _ref2.onClick,
+    onClick = _ref2$onClick === void 0 ? void 0 : _ref2$onClick,
+    _ref2$position = _ref2.position,
+    position = _ref2$position === void 0 ? void 0 : _ref2$position,
+    _ref2$scrollContainer = _ref2.scrollContainer,
+    scrollContainer = _ref2$scrollContainer === void 0 ? null : _ref2$scrollContainer,
+    _ref2$threshold = _ref2.threshold,
+    threshold = _ref2$threshold === void 0 ? 120 : _ref2$threshold,
+    _ref2$x = _ref2.x,
+    x = _ref2$x === void 0 ? 32 : _ref2$x,
+    _ref2$y = _ref2.y,
+    y = _ref2$y === void 0 ? 32 : _ref2$y,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var portalElement = useResolvedTarget(container, !disablePortal);
+  var scrollElement = useResolvedTarget(scrollContainer, true);
+  var scrolled = useScrolledPast(scrollElement, threshold);
+  var handleClick = function handleClick(event) {
+    scrollToTop(scrollElement, behavior);
+    onClick === null || onClick === void 0 || onClick(event);
+  };
+  if (!scrolled) {
+    return null;
+  }
+  if (!disablePortal && !portalElement) {
+    return null;
+  }
+  var resolvedPosition = getPosition(position, portalElement);
+  var withPlacement = function withPlacement(node) {
+    if (resolvedPosition === "static") {
+      return node;
+    }
+    return /* @__PURE__ */React.createElement(Box, {
+      sx: getPlacementSx(resolvedPosition, anchorOrigin, x, y)
+    }, node);
+  };
+  var withPortal = function withPortal(node) {
+    if (!portalElement) {
+      return node;
+    }
+    return /* @__PURE__ */React.createElement(Portal, {
+      container: portalElement
+    }, node);
+  };
+  if (asIcon) {
+    return withPortal(withPlacement(/* @__PURE__ */React.createElement(IconButton, _objectSpread2({
+      variant: "outlined",
+      size: "large",
+      onClick: handleClick
+    }, rest), icon)));
+  }
+  return withPortal(withPlacement(/* @__PURE__ */React.createElement(Button, _objectSpread2({
+    variant: "outlined",
+    startIcon: icon,
+    size: "large",
+    onClick: handleClick
+  }, rest), label)));
+}
+
+export { ScrollTopButton as default };

package/dist/esm/index.js

@@ -19,5 +19,6 @@ export { default as NotesCard } from './components/NotesCard.js';
 export { default as PersonCard } from './components/PersonCard.js';
 export { default as PersonDetailHeader } from './components/PersonDetailHeader.js';
 export { default as PropertyCard } from './components/PropertyCard.js';
+export { default as ScrollTopButton } from './components/ScrollTopButton.js';
 export { default as StatusButton } from './components/StatusButton.js';
 export { default as TenantAvatarGroup } from './components/TenantAvatarGroup.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tenancy.nz/feature-ui",
   "description": "React UI feature components.",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "author": "TPS <https://www.tenancy.co.nz>",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -19,15 +19,15 @@
     "primereact": "3.1.3",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@tenancy.nz/icons": "1.10.5",
-    "@tenancy.nz/ui": "1.10.5"
+    "@tenancy.nz/ui": "1.10.6",
+    "@tenancy.nz/icons": "1.10.6"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/material": "^7.3.1",
-    "@tenancy.nz/icons": "1.10.5",
-    "@tenancy.nz/ui": "1.10.5"
+    "@tenancy.nz/icons": "1.10.6",
+    "@tenancy.nz/ui": "1.10.6"
   },
   "dependencies": {
     "react-uid": "^2.4.0"