@canonical/react-components 0.47.1 → 0.47.2

package/dist/components/TableHeader/TableHeader.js

@@ -5,19 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["children", "sort"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var TableHeader = function TableHeader(_ref) {
-  var children = _ref.children,
-    sort = _ref.sort,
-    props = _objectWithoutProperties(_ref, _excluded);
+const TableHeader = _ref => {
+  let {
+    children,
+    sort,
+    ...props
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("th", _extends({
     role: "columnheader",
     "aria-sort": sort
   }, props), children);
 };
-var _default = TableHeader;
-exports.default = _default;
+var _default = exports.default = TableHeader;

package/dist/components/TableHeader/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _TableHeader.default;
   }
 });

package/dist/components/TablePagination/TablePagination.d.ts

@@ -0,0 +1,37 @@
+import React, { HTMLAttributes, PropsWithChildren, ReactNode } from "react";
+import "./TablePagination.scss";
+export type Props = PropsWithChildren<{
+    /**
+     * list of data elements to be paginated. This component is un-opinionated about
+     * the structure of the data but it should be identical to the data structure
+     * reuiqred by the child table component
+     */
+    data: unknown[];
+    /**
+     * prop name of the child table component that receives paginated data.
+     * default value is set to @constant rows, which is the data prop for the @func MainTable component
+     */
+    dataForwardProp?: string;
+    /**
+     * the name of the item associated to each row within the table.
+     */
+    itemName?: string;
+    /**
+     * custom styling for the pagination container
+     */
+    className?: string;
+    /**
+     * custom description to be displayed by the pagination
+     */
+    description?: ReactNode;
+    /**
+     * custom per page limits express as an array of numbers.
+     */
+    pageLimits?: number[];
+    /**
+     * place the pagination component above or below the table?
+     */
+    position?: "above" | "below";
+}> & HTMLAttributes<HTMLDivElement>;
+declare const TablePagination: ({ data, className, itemName, description, position, dataForwardProp, pageLimits, children, ...divProps }: Props) => React.JSX.Element;
+export default TablePagination;

package/dist/components/TablePagination/TablePagination.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("../../hooks");
+var _Select = _interopRequireDefault(require("../Select"));
+var _TablePaginationControls = _interopRequireDefault(require("./TablePaginationControls"));
+require("./TablePagination.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/**
+ * Determine if we are working with a small screen.
+ * 'small screen' in this case is relative to the width of the description div
+ */
+const figureSmallScreen = descriptionRef => {
+  const descriptionElement = descriptionRef.current;
+  if (!descriptionElement) {
+    return true;
+  }
+  return descriptionElement.getBoundingClientRect().width < 230;
+};
+
+/**
+ * Iterate direct react child components and override the value of the prop specified by @param dataForwardProp
+ * for those child components.
+ * @param children - react node children to iterate
+ * @param dataForwardProp - the name of the prop from the children components to override
+ * @param data - actual data to be passed to the prop specified by @param dataForwardProp
+ */
+const renderChildren = (children, dataForwardProp, data) => {
+  return _react.Children.map(children, child => {
+    return /*#__PURE__*/(0, _react.cloneElement)(child, {
+      [dataForwardProp]: data
+    });
+  });
+};
+const DEFAULT_PAGE_LIMITS = [50, 100, 200];
+const generatePagingOptions = pageLimits => {
+  return pageLimits.map(limit => ({
+    value: limit,
+    label: "".concat(limit, "/page")
+  }));
+};
+const TablePagination = _ref => {
+  let {
+    data,
+    className,
+    itemName = "item",
+    description,
+    position = "above",
+    dataForwardProp = "rows",
+    pageLimits = DEFAULT_PAGE_LIMITS,
+    children,
+    ...divProps
+  } = _ref;
+  const descriptionRef = (0, _react.useRef)(null);
+  const [isSmallScreen, setSmallScreen] = (0, _react.useState)(false);
+  const [pageSize, setPageSize] = (0, _react.useState)(() => {
+    return generatePagingOptions(pageLimits)[0].value;
+  });
+  const {
+    paginate,
+    currentPage,
+    pageData,
+    totalItems
+  } = (0, _hooks.usePagination)(data, {
+    itemsPerPage: pageSize,
+    autoResetPage: true
+  });
+  (0, _react.useEffect)(() => {
+    const handleResize = () => {
+      setSmallScreen(figureSmallScreen(descriptionRef));
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [isSmallScreen]);
+  const handlePageSizeChange = e => {
+    paginate(1);
+    setPageSize(parseInt(e.target.value));
+  };
+  const getDescription = () => {
+    if (description) {
+      return description;
+    }
+    const visibleCount = pageData.length;
+    if (isSmallScreen) {
+      return "".concat(visibleCount, " out of ").concat(totalItems);
+    }
+    if (visibleCount === totalItems && visibleCount > 1) {
+      return "Showing all ".concat(totalItems, " ").concat(itemName, "s");
+    }
+    return "Showing ".concat(visibleCount, " out of ").concat(totalItems, " ").concat(itemName).concat(totalItems !== 1 ? "s" : "");
+  };
+  const totalPages = Math.ceil(data.length / pageSize);
+  const clonedChildren = renderChildren(children, dataForwardProp, pageData);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, position === "below" && clonedChildren, /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _classnames.default)("pagination", className)
+  }, divProps, {
+    role: "navigation"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "description",
+    ref: descriptionRef
+  }, getDescription()), /*#__PURE__*/_react.default.createElement(_TablePaginationControls.default, {
+    onPageChange: paginate,
+    currentPage: currentPage,
+    totalPages: totalPages
+  }), /*#__PURE__*/_react.default.createElement(_Select.default, {
+    className: "items-per-page",
+    label: "Items per page",
+    labelClassName: "u-off-screen",
+    id: "itemsPerPage",
+    options: generatePagingOptions(pageLimits),
+    onChange: handlePageSizeChange,
+    value: pageSize
+  })), position === "above" && clonedChildren);
+};
+var _default = exports.default = TablePagination;

package/dist/components/TablePagination/TablePagination.scss

@@ -0,0 +1,40 @@
+@import "~vanilla-framework/scss/settings";
+
+.pagination {
+  align-items: baseline;
+  display: flex;
+  margin-top: 1.2rem;
+
+  .description {
+    flex-grow: 1;
+  }
+
+  .back {
+    margin: 0 $spv--large;
+
+    .p-icon--chevron-down {
+      rotate: 90deg;
+    }
+  }
+
+  .next {
+    margin: 0 $spv--large;
+
+    .p-icon--chevron-down {
+      rotate: 270deg;
+    }
+  }
+
+  .pagination-input {
+    margin-right: $spv--small;
+    min-width: 0;
+    width: 3rem;
+  }
+
+  .pagination-select {
+    margin-bottom: 0;
+    margin-left: $spv--x-large;
+    min-width: 0;
+    width: 7rem;
+  }
+}

package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.d.ts

@@ -0,0 +1,16 @@
+export type Props = {
+    /**
+     * Callback function to handle a change in page number
+     */
+    onPageChange: (pageNumber: number) => void;
+    /**
+     * The current page of the data
+     */
+    currentPage: number;
+    /**
+     * The total number of pages that exists within the data
+     */
+    totalPages: number;
+};
+declare const TablePaginationControls: ({ onPageChange, currentPage, totalPages, }: Props) => JSX.Element;
+export default TablePaginationControls;

package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Button = _interopRequireDefault(require("../../Button"));
+var _Icon = _interopRequireDefault(require("../../Icon"));
+var _Input = _interopRequireDefault(require("../../Input"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TablePaginationControls = _ref => {
+  let {
+    onPageChange,
+    currentPage,
+    totalPages
+  } = _ref;
+  const handleDecrementPage = currentPage => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+  const handleIncrementPage = (currentPage, totalPages) => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+  const handleInputPageChange = e => {
+    const newPage = Math.min(totalPages, Math.max(1, parseInt(e.target.value)));
+    onPageChange(newPage);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    "aria-label": "Previous page",
+    className: "back",
+    appearance: "base",
+    hasIcon: true,
+    disabled: currentPage === 1,
+    onClick: () => handleDecrementPage(currentPage)
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "chevron-down"
+  })), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    id: "paginationPageInput",
+    label: "Page number",
+    labelClassName: "u-off-screen",
+    className: "u-no-margin--bottom pagination-input",
+    onChange: handleInputPageChange,
+    value: currentPage,
+    type: "number"
+  }), " ", "of\xA0", totalPages, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    "aria-label": "Next page",
+    className: "next",
+    appearance: "base",
+    hasIcon: true,
+    disabled: currentPage === totalPages,
+    onClick: () => handleIncrementPage(currentPage, totalPages)
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: "chevron-down"
+  })));
+};
+TablePaginationControls.propTypes = {
+  onPageChange: _propTypes.default.func.isRequired,
+  currentPage: _propTypes.default.number.isRequired,
+  totalPages: _propTypes.default.number.isRequired
+};
+var _default = exports.default = TablePaginationControls;

package/dist/components/TablePagination/TablePaginationControls/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./TablePaginationControls";
+export type { Props as TablePaginationControlsProps } from "./TablePaginationControls";

package/dist/components/TablePagination/TablePaginationControls/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _TablePaginationControls.default;
+  }
+});
+var _TablePaginationControls = _interopRequireDefault(require("./TablePaginationControls"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/TablePagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./TablePagination";
+export type { Props as TablePaginationProps } from "./TablePagination";

package/dist/components/TablePagination/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _TablePagination.default;
+  }
+});
+var _TablePagination = _interopRequireDefault(require("./TablePagination"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/TableRow/TableRow.js

@@ -5,17 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["children"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var TableRow = function TableRow(_ref) {
-  var children = _ref.children,
-    trProps = _objectWithoutProperties(_ref, _excluded);
+const TableRow = _ref => {
+  let {
+    children,
+    ...trProps
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("tr", _extends({
     role: "row"
   }, trProps), children);
 };
-var _default = TableRow;
-exports.default = _default;
+var _default = exports.default = TableRow;

package/dist/components/TableRow/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _TableRow.default;
   }
 });

package/dist/components/Tabs/Tabs.js

@@ -6,27 +6,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["active", "className", "component", "label", "listItemClassName"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var Tabs = function Tabs(_ref) {
-  var className = _ref.className,
-    links = _ref.links,
-    listClassName = _ref.listClassName;
+const Tabs = _ref => {
+  let {
+    className,
+    links,
+    listClassName
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("nav", {
     className: (0, _classnames.default)("p-tabs", className)
   }, /*#__PURE__*/_react.default.createElement("ul", {
     className: (0, _classnames.default)("p-tabs__list", listClassName)
-  }, links.map(function (link, i) {
-    var active = link.active,
-      className = link.className,
-      component = link.component,
-      label = link.label,
-      listItemClassName = link.listItemClassName,
-      rest = _objectWithoutProperties(link, _excluded);
-    var Component = component || "a";
+  }, links.map((link, i) => {
+    const {
+      active,
+      className,
+      component,
+      label,
+      listItemClassName,
+      ...rest
+    } = link;
+    const Component = component || "a";
     return /*#__PURE__*/_react.default.createElement("li", {
       className: (0, _classnames.default)("p-tabs__item", listItemClassName),
       key: i
@@ -37,5 +38,4 @@ var Tabs = function Tabs(_ref) {
     }, rest), label));
   })));
 };
-var _default = Tabs;
-exports.default = _default;
+var _default = exports.default = Tabs;

package/dist/components/Tabs/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Tabs.default;
   }
 });

package/dist/components/Textarea/Textarea.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,50 +8,53 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Field = _interopRequireDefault(require("../Field"));
 var _hooks = require("../../hooks");
-var _excluded = ["caution", "className", "error", "grow", "help", "id", "label", "labelClassName", "onKeyUp", "required", "stacked", "style", "success", "takeFocus", "wrapperClassName"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * The props for the Textarea component.
  */
 
-var Textarea = function Textarea(_ref) {
-  var caution = _ref.caution,
-    className = _ref.className,
-    error = _ref.error,
-    _ref$grow = _ref.grow,
-    grow = _ref$grow === void 0 ? false : _ref$grow,
-    help = _ref.help,
-    id = _ref.id,
-    label = _ref.label,
-    labelClassName = _ref.labelClassName,
-    _onKeyUp = _ref.onKeyUp,
-    required = _ref.required,
-    stacked = _ref.stacked,
-    style = _ref.style,
-    success = _ref.success,
-    _ref$takeFocus = _ref.takeFocus,
-    takeFocus = _ref$takeFocus === void 0 ? false : _ref$takeFocus,
-    wrapperClassName = _ref.wrapperClassName,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var textareaRef = (0, _react.useRef)(null);
-  var validationId = (0, _hooks.useId)();
-  var helpId = (0, _hooks.useId)();
-  var hasError = !!error;
-  (0, _react.useEffect)(function () {
+const Textarea = _ref => {
+  let {
+    caution,
+    className,
+    error,
+    grow = false,
+    help,
+    id,
+    label,
+    labelClassName,
+    onKeyUp,
+    required,
+    stacked,
+    style,
+    success,
+    takeFocus = false,
+    wrapperClassName,
+    ...props
+  } = _ref;
+  const textareaRef = (0, _react.useRef)(null);
+  const validationId = (0, _hooks.useId)();
+  const helpId = (0, _hooks.useId)();
+  const hasError = !!error;
+  const [innerValue, setInnervalue] = (0, _react.useState)(props.defaultValue);
+  (0, _react.useEffect)(() => {
     if (takeFocus) {
       textareaRef.current.focus();
     }
   }, [takeFocus]);
+  (0, _react.useLayoutEffect)(() => {
+    if (grow) {
+      const textArea = textareaRef.current;
+      if (textArea) {
+        textArea.style.height = "0px";
+        const scrollHeight = textArea.scrollHeight;
+        textArea.style.height = "".concat(scrollHeight, "px");
+      }
+    }
+  }, [textareaRef, grow, innerValue, props.value]);
   return /*#__PURE__*/_react.default.createElement(_Field.default, {
     caution: caution,
     className: wrapperClassName,
@@ -72,20 +74,24 @@ var Textarea = function Textarea(_ref) {
     "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),
     id: id,
-    onKeyUp: function onKeyUp(evt) {
-      _onKeyUp && _onKeyUp(evt);
-      if (grow) {
-        evt.currentTarget.style.height = evt.currentTarget.scrollHeight + "px";
+    onKeyUp: evt => {
+      onKeyUp && onKeyUp(evt);
+    },
+    onChange: evt => {
+      if (!props.value) {
+        setInnervalue(evt.target.value);
       }
     },
     ref: textareaRef,
-    style: grow && _objectSpread({
+    style: grow && {
       minHeight: "5rem",
       resize: "none",
       overflow: "hidden",
-      boxSizing: "border-box"
-    }, style) || style
-  }, props)));
+      boxSizing: "border-box",
+      ...style
+    } || style
+  }, props, {
+    value: props.value || innerValue
+  })));
 };
-var _default = Textarea;
-exports.default = _default;
+var _default = exports.default = Textarea;

package/dist/components/Textarea/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Textarea.default;
   }
 });

package/dist/components/Tooltip/Tooltip.d.ts

@@ -56,6 +56,10 @@ export type Props = {
      * The z-index value of the tooltip message element.
      */
     zIndex?: number;
+    /**
+     * Delay in ms after which Tooltip will appear (defaults to 350ms).
+     */
+    delay?: number;
 };
 export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
 /**
@@ -70,5 +74,5 @@ export declare const adjustForWindow: (position: Position, fitsWindow: WindowFit
  * @param tooltipClassName An optional class to apply to the tooltip message element.
  * @param zIndex The z-index value of the tooltip message element.
  */
-declare const Tooltip: ({ autoAdjust, children, className, followMouse, message, position, positionElementClassName, tooltipClassName, zIndex, }: Props) => JSX.Element;
+declare const Tooltip: ({ autoAdjust, children, className, followMouse, message, position, positionElementClassName, tooltipClassName, zIndex, delay, }: Props) => JSX.Element;
 export default Tooltip;