@canonical/react-components 1.5.0 → 1.7.0

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/TablePagination.scss

@@ -0,0 +1,48 @@
+@import "vanilla-framework/scss/settings";
+
+.pagination {
+  align-items: baseline;
+  display: flex;
+  margin: $spv--large 0;
+
+  @media screen and (max-width: $breakpoint-small) {
+    justify-content: flex-end;
+  }
+
+  .description {
+    flex-grow: 1;
+
+    @media screen and (max-width: $breakpoint-small) {
+      display: none;
+    }
+  }
+
+  .back {
+    margin: 0 0 0 $spv--large;
+
+    .p-icon--chevron-down {
+      rotate: 90deg;
+    }
+  }
+
+  .next {
+    margin: 0 $spv--large;
+
+    .p-icon--chevron-down {
+      rotate: 270deg;
+    }
+  }
+
+  .pagination-input {
+    margin: 0 $spv--small 0 $spv--large;
+    min-width: 0;
+    width: 3rem;
+  }
+
+  .pagination-select {
+    margin-bottom: 0;
+    margin-left: $spv--x-large;
+    min-width: 0;
+    width: 7rem;
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from "@storybook/react";
+import TablePagination from "./TablePagination";
+declare const meta: Meta<typeof TablePagination>;
+export default meta;
+type Story = StoryObj<typeof TablePagination>;
+export declare const Default: Story;
+export declare const CustomPageLimit: Story;
+export declare const CustomDisplayTitle: Story;
+export declare const RenderAbove: Story;
+export declare const RenderBelow: Story;
+/** The table pagination controls can be used without wrapping MainTable by
+ * using the `TablePaginationControls` component.
+ */
+export declare const ControlsOnly: Story;

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

@@ -0,0 +1,323 @@
+import React from "react";
+import TablePagination from "./TablePagination";
+import MainTable from "../MainTable";
+import TablePaginationControls from "./TablePaginationControls";
+var meta = {
+  component: TablePagination,
+  tags: ["autodocs"],
+  argTypes: {
+    totalItems: {
+      if: {
+        arg: "externallyControlled",
+        truthy: true
+      }
+    },
+    currentPage: {
+      if: {
+        arg: "externallyControlled",
+        truthy: true
+      }
+    },
+    pageSize: {
+      if: {
+        arg: "externallyControlled",
+        truthy: true
+      }
+    },
+    onPageChange: {
+      if: {
+        arg: "externallyControlled",
+        truthy: true
+      }
+    },
+    onPageSizeChange: {
+      if: {
+        arg: "externallyControlled",
+        truthy: true
+      }
+    }
+  }
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    data: [{
+      id: "row-1"
+    }, {
+      id: "row-2"
+    }, {
+      id: "row-3"
+    }, {
+      id: "row-4"
+    }, {
+      id: "row-5"
+    }]
+  }
+};
+export var CustomPageLimit = {
+  name: "CustomPageLimit",
+  args: {
+    data: [{
+      id: "row-1"
+    }, {
+      id: "row-2"
+    }, {
+      id: "row-3"
+    }, {
+      id: "row-4"
+    }, {
+      id: "row-5"
+    }],
+    pageLimits: [1, 2, 3]
+  }
+};
+export var CustomDisplayTitle = {
+  name: "CustomDisplayTitle",
+  args: {
+    data: [{
+      id: "row-1"
+    }, {
+      id: "row-2"
+    }, {
+      id: "row-3"
+    }, {
+      id: "row-4"
+    }, {
+      id: "row-5"
+    }],
+    description: /*#__PURE__*/React.createElement("b", null, "Hello there")
+  }
+};
+export var RenderAbove = {
+  render: () => {
+    var data = [{
+      columns: [{
+        content: "Ready",
+        role: "rowheader"
+      }, {
+        content: 1,
+        className: "u-align--right"
+      }, {
+        content: "1 GiB",
+        className: "u-align--right"
+      }, {
+        content: 2,
+        className: "u-align--right"
+      }, {
+        content: 42,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "ready",
+        cores: 2,
+        ram: 1,
+        disks: 2
+      }
+    }, {
+      columns: [{
+        content: "Idle",
+        role: "rowheader"
+      }, {
+        content: 1,
+        className: "u-align--right"
+      }, {
+        content: "1 GiB",
+        className: "u-align--right"
+      }, {
+        content: 2,
+        className: "u-align--right"
+      }, {
+        content: 23,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "idle",
+        cores: 1,
+        ram: 1,
+        disks: 2
+      }
+    }, {
+      columns: [{
+        content: "Waiting",
+        role: "rowheader"
+      }, {
+        content: 8,
+        className: "u-align--right"
+      }, {
+        content: "3.9 GiB",
+        className: "u-align--right"
+      }, {
+        content: 3,
+        className: "u-align--right"
+      }, {
+        content: 0,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "waiting",
+        cores: 8,
+        ram: 3.9,
+        disks: 3
+      }
+    }];
+    var headers = [{
+      content: "Status",
+      sortKey: "status"
+    }, {
+      content: "Cores",
+      sortKey: "cores",
+      className: "u-align--right"
+    }, {
+      content: "RAM",
+      sortKey: "ram",
+      className: "u-align--right"
+    }, {
+      content: "Disks",
+      sortKey: "disks",
+      className: "u-align--right"
+    }, {
+      content: "Networks",
+      className: "u-align--right"
+    }];
+    return /*#__PURE__*/React.createElement(TablePagination, {
+      data: data,
+      pageLimits: [1, 2, 3]
+    }, /*#__PURE__*/React.createElement(MainTable, {
+      headers: headers,
+      rows: data,
+      sortable: true
+    }));
+  },
+  name: "RenderAbove"
+};
+export var RenderBelow = {
+  render: () => {
+    var data = [{
+      columns: [{
+        content: "Ready",
+        role: "rowheader"
+      }, {
+        content: 1,
+        className: "u-align--right"
+      }, {
+        content: "1 GiB",
+        className: "u-align--right"
+      }, {
+        content: 2,
+        className: "u-align--right"
+      }, {
+        content: 42,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "ready",
+        cores: 2,
+        ram: 1,
+        disks: 2
+      }
+    }, {
+      columns: [{
+        content: "Idle",
+        role: "rowheader"
+      }, {
+        content: 1,
+        className: "u-align--right"
+      }, {
+        content: "1 GiB",
+        className: "u-align--right"
+      }, {
+        content: 2,
+        className: "u-align--right"
+      }, {
+        content: 23,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "idle",
+        cores: 1,
+        ram: 1,
+        disks: 2
+      }
+    }, {
+      columns: [{
+        content: "Waiting",
+        role: "rowheader"
+      }, {
+        content: 8,
+        className: "u-align--right"
+      }, {
+        content: "3.9 GiB",
+        className: "u-align--right"
+      }, {
+        content: 3,
+        className: "u-align--right"
+      }, {
+        content: 0,
+        className: "u-align--right"
+      }],
+      sortData: {
+        status: "waiting",
+        cores: 8,
+        ram: 3.9,
+        disks: 3
+      }
+    }];
+    var headers = [{
+      content: "Status",
+      sortKey: "status"
+    }, {
+      content: "Cores",
+      sortKey: "cores",
+      className: "u-align--right"
+    }, {
+      content: "RAM",
+      sortKey: "ram",
+      className: "u-align--right"
+    }, {
+      content: "Disks",
+      sortKey: "disks",
+      className: "u-align--right"
+    }, {
+      content: "Networks",
+      className: "u-align--right"
+    }];
+    return /*#__PURE__*/React.createElement(TablePagination, {
+      data: data,
+      pageLimits: [1, 2, 3],
+      position: "below"
+    }, /*#__PURE__*/React.createElement(MainTable, {
+      headers: headers,
+      rows: data,
+      sortable: true
+    }));
+  },
+  name: "RenderBelow"
+};
+
+/** The table pagination controls can be used without wrapping MainTable by
+ * using the `TablePaginationControls` component.
+ */
+export var ControlsOnly = {
+  render: () => {
+    return /*#__PURE__*/React.createElement(TablePaginationControls, {
+      currentPage: 1,
+      itemName: "row",
+      nextButtonProps: {
+        disabled: false
+      },
+      onInputPageChange: console.log,
+      onNextPage: console.log,
+      onPageSizeChange: console.log,
+      onPreviousPage: console.log,
+      pageLimits: [10, 25, 50],
+      pageSize: 20,
+      previousButtonProps: {
+        disabled: false
+      },
+      showPageInput: true,
+      totalItems: 100,
+      visibleCount: 10
+    });
+  }
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,24 @@
+import { ButtonProps } from "../../Button";
+import { HTMLAttributes } from "react";
+import { BasePaginationProps, ExternalControlProps, InternalControlProps } from "../TablePagination";
+export declare enum Label {
+    NEXT_PAGE = "Next page",
+    PREVIOUS_PAGE = "Previous page",
+    PAGE_NUMBER = "Page number"
+}
+export type AllProps = BasePaginationProps & InternalControlProps & ExternalControlProps;
+export type Props = Omit<AllProps, "currentPage" | "data" | "dataForwardProp" | "externallyControlled" | "onPageChange" | "position" | "totalItems"> & {
+    currentPage?: AllProps["currentPage"];
+    displayDescription?: boolean;
+    onInputPageChange?: (page: number) => void;
+    nextButtonProps?: Partial<ButtonProps>;
+    onNextPage?: (page: number) => void;
+    onPageChange?: AllProps["onPageChange"];
+    onPreviousPage?: (page: number) => void;
+    previousButtonProps?: Partial<ButtonProps>;
+    totalItems?: AllProps["totalItems"];
+    visibleCount?: number;
+    showPageInput?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+declare const TablePaginationControls: ({ className, currentPage, description, displayDescription, onInputPageChange, itemName, nextButtonProps, onNextPage, onPageChange, onPageSizeChange, onPreviousPage, pageLimits, pageSize, previousButtonProps, showPageInput, totalItems, visibleCount, ...divProps }: Props) => JSX.Element;
+export default TablePaginationControls;

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/TablePaginationControls.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { ReactElement, ReactNode } 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 declare const figureSmallScreen: () => boolean;
+/**
+ * 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 declare const renderChildren: (children: ReactNode, dataForwardProp: string, data: unknown[]) => ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
+export declare const DEFAULT_PAGE_LIMITS: number[];
+export declare const generatePagingOptions: (pageLimits: number[]) => {
+    value: number;
+    label: string;
+}[];
+export declare const getDescription: ({ description, isSmallScreen, totalItems, itemName, visibleCount, }: {
+    description: ReactNode;
+    isSmallScreen: boolean;
+    totalItems: number;
+    itemName: string;
+    visibleCount: number;
+}) => string | number | true | ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode>;
+export declare const useFigureSmallScreen: () => boolean;