@canonical/react-components 1.3.1 → 1.3.2

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

@@ -1,104 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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

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

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

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

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

@@ -1,67 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

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

@@ -1,42 +0,0 @@
-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

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

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

@@ -1,115 +0,0 @@
-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

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