@canonical/react-components 1.2.5 → 1.3.1

package/dist-esm/components/TablePagination/TablePagination.js

@@ -0,0 +1,104 @@
+var _excluded = ["data", "dataForwardProp", "itemName", "className", "description", "pageLimits", "position", "externallyControlled", "children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React, { useState } from "react";
+import "./TablePagination.scss";
+import TablePaginationControls from "./TablePaginationControls";
+import { DEFAULT_PAGE_LIMITS, generatePagingOptions, renderChildren } from "./utils";
+import { usePagination } from "../../hooks";
+/**
+This is an HOC [React](https://reactjs.org/) component for applying pagination to direct children components. This component is un-opinionated about
+the structure of the input data and can be used with any child component that displays a list of data. However, the styling and behaviour of this component were designed
+to work nicely with the `MainTable` component. To use this component, simply wrap a child component with it and provide the data that you want
+to paginate to the `data` prop. This component will then pass the paged data to all <b>direct</b> child components via a child prop specified by `dataForwardProp`.
+The component may be externally controlled, see following sections for detailed explanation.
+
+#### Externally controlled pagination
+
+For externally controlled mode, you will be responsible for the pagination logic and therefore the component will be purely presentational.
+The pagination behaviour is controlled outside of this component. Note the data injection to child components is essentially a passthrough in this case.
+To enable externally controlled mode for this component, set the `externallyControlled` prop to `true`. From there, it is your responsibility
+to ensure that the following props `totalItems`, `currentPage`, `pageSize`, `onPageChange` and `onPageSizeChange` are set properly.
+You can refer to the props table below on how to set these props.
+
+#### Un-controlled pagination
+
+In this mode, the component assumes that the input data is not paginated. The component will implement the pagination logic and apply it to the input data
+then inject the paged data into direct child components. This is the default mode of operations for the component where `externallyControlled` prop is set
+to `false`.
+ */
+var TablePagination = props => {
+  var {
+      data,
+      dataForwardProp = "rows",
+      itemName = "item",
+      className,
+      description,
+      pageLimits = DEFAULT_PAGE_LIMITS,
+      position = "above",
+      externallyControlled,
+      children
+    } = props,
+    divProps = _objectWithoutProperties(props, _excluded);
+
+  // Safety check to ensure pageSize is a valid option in
+  // pageLimits if the component is externally controlled
+  if (externallyControlled) {
+    var pageSizeFound = false;
+    for (var limit of pageLimits) {
+      if (limit === Number(props.pageSize)) {
+        pageSizeFound = true;
+        break;
+      }
+    }
+    if (!pageSizeFound) {
+      throw new Error("pageSize must be a valid option in pageLimits, pageLimits is set to [".concat(pageLimits, "]"));
+    }
+  }
+  var [internalPageSize, setInternalPageSize] = useState(() => {
+    return generatePagingOptions(pageLimits)[0].value;
+  });
+  var {
+    paginate,
+    currentPage: internalCurrentPage,
+    pageData: internalData
+  } = usePagination(externallyControlled ? [] : data, {
+    itemsPerPage: internalPageSize,
+    autoResetPage: true
+  });
+  var controlData = externallyControlled ? data : internalData;
+  var controlPageSize = externallyControlled ? props.pageSize : internalPageSize;
+  var controlTotalItems = externallyControlled ? props.totalItems : data.length;
+  var controlCurrentPage = externallyControlled ? props.currentPage : internalCurrentPage;
+  var handlePageChange = page => {
+    if (externallyControlled) {
+      props.onPageChange(page);
+      return;
+    }
+    paginate(page);
+  };
+  var handlePageSizeChange = pageSize => {
+    if (externallyControlled) {
+      props.onPageSizeChange(pageSize);
+      return;
+    }
+    paginate(1);
+    setInternalPageSize(pageSize);
+  };
+  var clonedChildren = renderChildren(children, dataForwardProp, controlData);
+  var controls = /*#__PURE__*/React.createElement(TablePaginationControls, _extends({}, divProps, {
+    visibleCount: controlData.length,
+    className: className,
+    itemName: itemName,
+    description: description,
+    pageLimits: pageLimits,
+    totalItems: controlTotalItems,
+    currentPage: controlCurrentPage,
+    pageSize: controlPageSize,
+    onPageChange: handlePageChange,
+    onPageSizeChange: handlePageSizeChange
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, position === "above" && controls, clonedChildren, position === "below" && controls);
+};
+export default TablePagination;

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

@@ -0,0 +1,120 @@
+import _pt from "prop-types";
+var _excluded = ["className", "currentPage", "description", "displayDescription", "onInputPageChange", "itemName", "nextButtonProps", "onNextPage", "onPageChange", "onPageSizeChange", "onPreviousPage", "pageLimits", "pageSize", "previousButtonProps", "showPageInput", "totalItems", "visibleCount"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import Button from "../../Button";
+import Icon from "../../Icon";
+import Input from "../../Input";
+import Select from "../../Select";
+import React from "react";
+import classnames from "classnames";
+import { generatePagingOptions, getDescription, useFigureSmallScreen } from "../utils";
+export var Label = /*#__PURE__*/function (Label) {
+  Label["NEXT_PAGE"] = "Next page";
+  Label["PREVIOUS_PAGE"] = "Previous page";
+  Label["PAGE_NUMBER"] = "Page number";
+  return Label;
+}({});
+var TablePaginationControls = _ref => {
+  var {
+      className,
+      currentPage,
+      description,
+      displayDescription = true,
+      onInputPageChange,
+      itemName,
+      nextButtonProps,
+      onNextPage,
+      onPageChange,
+      onPageSizeChange,
+      onPreviousPage,
+      pageLimits,
+      pageSize,
+      previousButtonProps,
+      showPageInput = true,
+      totalItems,
+      visibleCount
+    } = _ref,
+    divProps = _objectWithoutProperties(_ref, _excluded);
+  var isSmallScreen = useFigureSmallScreen();
+  var totalPages = totalItems ? Math.ceil(totalItems / pageSize) : null;
+  var descriptionDisplay = getDescription({
+    description,
+    visibleCount,
+    isSmallScreen,
+    totalItems,
+    itemName
+  });
+  var handleDecrementPage = currentPage => {
+    if (currentPage > 1) {
+      onPageChange === null || onPageChange === void 0 || onPageChange(currentPage - 1);
+    }
+    onPreviousPage === null || onPreviousPage === void 0 || onPreviousPage(typeof currentPage === "number" ? currentPage - 1 : null);
+  };
+  var handleIncrementPage = (currentPage, totalPages) => {
+    if (currentPage < totalPages) {
+      onPageChange === null || onPageChange === void 0 || onPageChange(currentPage + 1);
+    }
+    onNextPage === null || onNextPage === void 0 || onNextPage(typeof currentPage === "number" ? currentPage + 1 : null);
+  };
+  var handleInputPageChange = e => {
+    var newPage = Math.min(totalPages, Math.max(1, parseInt(e.target.value)));
+    onPageChange === null || onPageChange === void 0 || onPageChange(newPage);
+    onInputPageChange === null || onInputPageChange === void 0 || onInputPageChange(Number(e.target.value));
+  };
+  var handlePageSizeChange = e => {
+    onPageSizeChange(parseInt(e.target.value));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classnames("pagination", className)
+  }, divProps, {
+    role: "navigation"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "description",
+    id: "pagination-description"
+  }, displayDescription ? descriptionDisplay : null), /*#__PURE__*/React.createElement(Button, _extends({
+    "aria-label": Label.PREVIOUS_PAGE,
+    className: "back",
+    appearance: "base",
+    hasIcon: true,
+    disabled: currentPage === 1,
+    onClick: () => handleDecrementPage(currentPage)
+  }, previousButtonProps), previousButtonProps !== null && previousButtonProps !== void 0 && previousButtonProps.children ? previousButtonProps.children : /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-down"
+  })), showPageInput ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
+    id: "paginationPageInput",
+    label: Label.PAGE_NUMBER,
+    labelClassName: "u-off-screen",
+    className: "u-no-margin--bottom pagination-input",
+    onChange: handleInputPageChange,
+    value: currentPage,
+    type: "number"
+  }), " ") : null, typeof totalPages === "number" ? "of ".concat(totalPages) : null, /*#__PURE__*/React.createElement(Button, _extends({
+    "aria-label": Label.NEXT_PAGE,
+    className: "next",
+    appearance: "base",
+    hasIcon: true,
+    disabled: currentPage === totalPages,
+    onClick: () => handleIncrementPage(currentPage, totalPages)
+  }, nextButtonProps), /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-down"
+  })), /*#__PURE__*/React.createElement(Select, {
+    className: "u-no-margin--bottom",
+    label: "Items per page",
+    labelClassName: "u-off-screen",
+    id: "itemsPerPage",
+    options: generatePagingOptions(pageLimits),
+    onChange: handlePageSizeChange,
+    value: pageSize
+  }));
+};
+TablePaginationControls.propTypes = {
+  displayDescription: _pt.bool,
+  onInputPageChange: _pt.func,
+  onNextPage: _pt.func,
+  onPreviousPage: _pt.func,
+  visibleCount: _pt.number,
+  showPageInput: _pt.bool
+};
+export default TablePaginationControls;

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

@@ -0,0 +1 @@
+export { default } from "./TablePaginationControls";

package/dist-esm/components/TablePagination/index.js

@@ -0,0 +1 @@
+export { default } from "./TablePagination";

package/dist-esm/components/TablePagination/utils.js

@@ -0,0 +1,67 @@
+import { Children, cloneElement, useEffect, useState } from "react";
+
+/**
+ * Determine if we are working with a small screen.
+ * 'small screen' in this case is relative to the width of the description div
+ */
+export var figureSmallScreen = () => {
+  var descriptionElement = document.getElementById("pagination-description");
+  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
+ */
+export var renderChildren = (children, dataForwardProp, data) => {
+  return Children.map(children, child => {
+    return /*#__PURE__*/cloneElement(child, {
+      [dataForwardProp]: data
+    });
+  });
+};
+export var DEFAULT_PAGE_LIMITS = [50, 100, 200];
+export var generatePagingOptions = pageLimits => {
+  return pageLimits.map(limit => ({
+    value: limit,
+    label: "".concat(limit, "/page")
+  }));
+};
+export var getDescription = _ref => {
+  var {
+    description,
+    isSmallScreen,
+    totalItems,
+    itemName,
+    visibleCount
+  } = _ref;
+  if (description) {
+    return description;
+  }
+  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" : "");
+};
+export var useFigureSmallScreen = () => {
+  var [isSmallScreen, setSmallScreen] = useState(false);
+  useEffect(() => {
+    var handleResize = () => {
+      setSmallScreen(figureSmallScreen());
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return isSmallScreen;
+};

package/dist-esm/components/TableRow/TableRow.js

@@ -0,0 +1,15 @@
+var _excluded = ["children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+var TableRow = _ref => {
+  var {
+      children
+    } = _ref,
+    trProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("tr", _extends({
+    role: "row"
+  }, trProps), children);
+};
+export default TableRow;

package/dist-esm/components/TableRow/index.js

@@ -0,0 +1 @@
+export { default } from "./TableRow";

package/dist-esm/components/Tabs/Tabs.js

@@ -0,0 +1,42 @@
+var _excluded = ["active", "className", "component", "label", "listItemClassName"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+/**
+ * This is the [React](https://reactjs.org/) component for Vanilla [Tabs](https://vanillaframework.io/docs/patterns/tabs).
+Tabs organise and allow navigation between groups of content that are related and at the same level
+of hierarchy.
+ */
+var Tabs = _ref => {
+  var {
+    className,
+    links,
+    listClassName
+  } = _ref;
+  return /*#__PURE__*/React.createElement("nav", {
+    className: classNames("p-tabs", className)
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: classNames("p-tabs__list", listClassName)
+  }, links.map((link, i) => {
+    var {
+        active,
+        className,
+        component,
+        label,
+        listItemClassName
+      } = link,
+      rest = _objectWithoutProperties(link, _excluded);
+    var Component = component || "a";
+    return /*#__PURE__*/React.createElement("li", {
+      className: classNames("p-tabs__item", listItemClassName),
+      key: i
+    }, /*#__PURE__*/React.createElement(Component, _extends({
+      "aria-selected": active,
+      className: classNames("p-tabs__link", className),
+      "data-testid": "tab-link-".concat(label)
+    }, rest), label));
+  })));
+};
+export default Tabs;

package/dist-esm/components/Tabs/index.js

@@ -0,0 +1 @@
+export { default } from "./Tabs";

package/dist-esm/components/Textarea/Textarea.js

@@ -0,0 +1,115 @@
+var _excluded = ["caution", "className", "error", "grow", "help", "id", "label", "labelClassName", "onKeyUp", "onControlEnter", "required", "stacked", "style", "success", "takeFocus", "wrapperClassName"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React, { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import Field from "../Field";
+
+/**
+ * The props for the Textarea component.
+ */
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Textarea](https://docs.vanillaframework.io/base/forms/#textarea).
+ *
+ * The Textarea component defines a multi-line text input control.
+ */
+var Textarea = _ref => {
+  var _props$value;
+  var {
+      caution,
+      className,
+      error,
+      grow = false,
+      help,
+      id,
+      label,
+      labelClassName,
+      onKeyUp: _onKeyUp,
+      onControlEnter,
+      required,
+      stacked,
+      style,
+      success,
+      takeFocus = false,
+      wrapperClassName
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var textareaRef = useRef(null);
+  var validationId = useId();
+  var helpId = useId();
+  var hasError = !!error;
+  var [innerValue, setInnervalue] = useState(props.defaultValue);
+  var defaultTextAreaId = useId();
+  var textAreaId = id || defaultTextAreaId;
+  var handleKeyDown = useCallback(event => {
+    if (event.key === "Enter" && (event.ctrlKey || event.metaKey) && document.activeElement === textareaRef.current) {
+      onControlEnter();
+    }
+  }, [onControlEnter]);
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+  useEffect(() => {
+    if (takeFocus) {
+      textareaRef.current.focus();
+    }
+  }, [takeFocus]);
+  useLayoutEffect(() => {
+    if (grow) {
+      var textArea = textareaRef.current;
+      if (textArea) {
+        textArea.style.height = "0px";
+        var scrollHeight = textArea.scrollHeight;
+        textArea.style.height = "".concat(scrollHeight, "px");
+      }
+    }
+  }, [textareaRef, grow, innerValue, props.value]);
+  return /*#__PURE__*/React.createElement(Field, {
+    caution: caution,
+    className: wrapperClassName,
+    error: error,
+    forId: textAreaId,
+    help: help,
+    helpId: helpId,
+    label: label,
+    labelClassName: labelClassName,
+    required: required,
+    stacked: stacked,
+    success: success,
+    validationId: validationId
+  }, /*#__PURE__*/React.createElement("textarea", _extends({
+    "aria-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
+    className: classNames("p-form-validation__input", className),
+    id: textAreaId,
+    onKeyUp: evt => {
+      _onKeyUp && _onKeyUp(evt);
+    },
+    onChange: evt => {
+      if (!props.value) {
+        setInnervalue(evt.target.value);
+      }
+    },
+    ref: textareaRef,
+    style: grow && _objectSpread({
+      minHeight: "5rem",
+      resize: "none",
+      overflow: "hidden",
+      boxSizing: "border-box"
+    }, style) || style
+  }, props, {
+    value: (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : innerValue
+  })));
+};
+export default Textarea;

package/dist-esm/components/Textarea/index.js

@@ -0,0 +1 @@
+export { default } from "./Textarea";