@canonical/react-components 1.2.4 → 1.3.0

package/dist/components/ModularTable/ModularTable.d.ts

@@ -1,105 +0,0 @@
-import { ReactNode, HTMLProps } from "react";
-import { TableCellProps, TableHeaderProps, TableRowProps } from "react-table";
-import type { Column, UseTableOptions, Cell, Row, HeaderGroup } from "react-table";
-import { PropsWithSpread } from "../../types";
-export type Props<D extends Record<string, unknown>> = PropsWithSpread<{
-    /**
-     * The columns of the table.
-     */
-    columns: Column<D>[];
-    /**
-     * The data of the table.
-     */
-    data: D[];
-    /**
-     * A message to display if data is empty.
-     */
-    emptyMsg?: string;
-    /**
-     * Optional extra row to display underneath the main table content.
-     */
-    footer?: ReactNode;
-    /**
-     * Optional argument to make the tables be sortable and use the `useSortBy` plugin.
-     */
-    sortable?: boolean;
-    /**
-     * This function is used to resolve any props needed for a particular column's header cell.
-     */
-    getHeaderProps?: (header: HeaderGroup<D>) => Partial<TableHeaderProps & HTMLProps<HTMLTableHeaderCellElement>>;
-    /**
-     * This function is used to resolve any props needed for a particular row.
-     */
-    getRowProps?: (row: Row<D>) => Partial<TableRowProps & HTMLProps<HTMLTableRowElement>>;
-    /**
-     * This function is used to resolve any props needed for a particular cell.
-     */
-    getCellProps?: (cell: Cell<D>) => Partial<TableCellProps & HTMLProps<HTMLTableCellElement>>;
-    getRowId?: UseTableOptions<D>["getRowId"];
-    /**
-     * The column that the table will be sorted by (this should match a cell selector).
-     */
-    initialSortColumn?: string;
-    /**
-     * The direction of the initial sort.
-     */
-    initialSortDirection?: "ascending" | "descending";
-    /**
-     * Whether the sort by needs to be reset after each data change.
-     */
-    autoResetSortBy?: boolean;
-}, HTMLProps<HTMLTableElement>>;
-/**
-This is a [React](https://reactjs.org/) component to support many table use cases.
- 
-ModularTable components accepts `columns` and `data` arguments in the same format as [`useTable`](https://react-table.tanstack.com/docs/api/useTable) hook of the ReactTable library.
-
-`columns` - The core columns configuration object for the entire table. https://react-table.tanstack.com/docs/api/useTable#column-options
-`data` - The data array that you want to display on the table.
-### Important note!
-Values passed to both of these params have to me memoized (for example via{" "}
-  <code>React.useMemo</code>). Memoization ensures that our data isn't recreated
-  on every render. If we didn't use <code>React.useMemo</code>, the table would
-  think it was receiving new data on every render and attempt to recalulate a
-  lot of logic every single time.
-
-#### Custom column options
-
-In addition to standard column propeties from [`useTable`](https://react-table.tanstack.com/docs/api/useTable) `ModularTable` accepts some custom properties.
-
-##### Class names
-
-Custom `className` can be used to provide a specific CSS class name that will be added to all cells in given column.
-You can also provide `getHeaderProps`, `getRowProps` and `getCellProps` to resolve additional custom props for a specific element. More on this in [`useTable - cell properties`](https://react-table.tanstack.com/docs/api/useTable#cell-properties).
-
-```js
-getCellProps={({ value, column }) => ({
-  className: `table__cell--${column.id} ${value ===  "1 minute" ? "p-heading--5" : ""}`,
-})}
-columns = {
-  Header: "Hidden on mobile",
-  accessor: "example",
-  className: "u-hide--small"
-}
-```
-
-##### Icons
-
-To show an icon in the cells of a column `getCellIcon` function should be defined. The function takes a cell data as an argument and should return one of built in icons (from the `ICONS` const), a string with a custom icon name, or `false` if no icon should be shown.
-
-The `ICONS` const contains all [the Vanilla built in icons](https://vanillaframework.io/docs/patterns/icons) such as "plus", "minus", "success", "error", etc.
-
-Product specific icons can be used as well, assuming that the product provides the necessary CSS styling and the icon follows the Vanilla naming convention `p-icon--{name}`.
-
-```js
-columns = {
-  Header: "With icons",
-  accessor: "status",
-  getCellIcon: ({ value }) => {
-    return value === "released" ? ICONS.success : false;
-  },
-};
-```
- */
-declare function ModularTable<D extends Record<string, unknown>>({ data, columns, emptyMsg, footer, sortable, getHeaderProps, getRowProps, getCellProps, getRowId, initialSortColumn, initialSortDirection, autoResetSortBy, ...props }: Props<D>): JSX.Element;
-export default ModularTable;

package/dist/components/ModularTable/ModularTable.stories.d.ts

@@ -1,27 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import ModularTable from "./ModularTable";
-declare const meta: Meta<typeof ModularTable>;
-export default meta;
-type Story = StoryObj<typeof ModularTable>;
-export declare const Default: Story;
-export declare const Empty: Story;
-export declare const Sortable: Story;
-/**
- * Subrows can be used to group table rows under a heading that needs to appear
-at the start of the group. In the following example sorting the columns will
-sort the group rows, then sort the sub-rows, but the group header always comes first.
- */
-export declare const Subrows: Story;
-/**
-Example below shows a basic `ModularTable` with `SummaryButton` component in the footer.
-```
-export const getSampleData = (i = 0) => [
-  { data: ++i * 100 + i },
-  { data: ++i * 100 + i },
-  { data: ++i * 100 + i },
-  { data: ++i * 100 + i },
-  { data: ++i * 100 + i },
-];
-```
- */
-export declare const LoadMore: Story;

package/dist/components/ModularTable/ModularTable.stories.js

@@ -1,343 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Subrows = exports.Sortable = exports.LoadMore = exports.Empty = exports.Default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _SummaryButton = _interopRequireDefault(require("../SummaryButton"));
-var _ModularTable = _interopRequireDefault(require("./ModularTable"));
-var _Icon = require("../Icon");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 && {}.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; }
-const getSampleData = function () {
-  let i = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  return [{
-    data: ++i * 100 + i
-  }, {
-    data: ++i * 100 + i
-  }, {
-    data: ++i * 100 + i
-  }, {
-    data: ++i * 100 + i
-  }, {
-    data: ++i * 100 + i
-  }];
-};
-const meta = {
-  component: _ModularTable.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  render: () => /*#__PURE__*/_react.default.createElement(_ModularTable.default, {
-    getCellProps: _ref => {
-      let {
-        value
-      } = _ref;
-      return {
-        className: value === "1 minute" ? "p-heading--5" : ""
-      };
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    ,
-    columns: _react.default.useMemo(() => [{
-      Header: "ID",
-      accessor: "buildId",
-      Cell: _ref2 => {
-        let {
-          value
-        } = _ref2;
-        return /*#__PURE__*/_react.default.createElement("a", {
-          href: "#test"
-        }, "#", value);
-      }
-    }, {
-      Header: "Architecture",
-      accessor: "arch"
-    }, {
-      Header: "Build Duration",
-      accessor: "duration",
-      className: "u-hide--small"
-    }, {
-      Header: "Result",
-      accessor: "result",
-      Cell: _ref3 => {
-        let {
-          value
-        } = _ref3;
-        switch (value) {
-          case "released":
-            return "Released";
-          case "failed":
-            return "Failed";
-          default:
-            return "Unknown";
-        }
-      },
-      getCellIcon: _ref4 => {
-        let {
-          value
-        } = _ref4;
-        switch (value) {
-          case "released":
-            return _Icon.ICONS.success;
-          case "failed":
-            return _Icon.ICONS.error;
-          default:
-            return false;
-        }
-      }
-    }, {
-      Header: "Build Finished",
-      accessor: "finished",
-      className: "u-align-text--right"
-    }], [])
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    ,
-    data: _react.default.useMemo(() => [{
-      buildId: "5432",
-      arch: "arm64",
-      duration: "5 minutes",
-      result: "released",
-      finished: "10 minutes ago"
-    }, {
-      buildId: "1234",
-      arch: "armhf",
-      duration: "5 minutes",
-      result: "failed",
-      finished: "over 1 year ago"
-    }, {
-      buildId: "1111",
-      arch: "test64",
-      duration: "1 minute",
-      result: "other",
-      finished: "ages ago"
-    }], [])
-  }),
-  name: "Default"
-};
-const Empty = exports.Empty = {
-  render: () => /*#__PURE__*/_react.default.createElement(_ModularTable.default, {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    columns: _react.default.useMemo(() => [{
-      Header: "ID",
-      accessor: "buildId"
-    }, {
-      Header: "Architecture",
-      accessor: "arch"
-    }, {
-      Header: "Build Duration",
-      accessor: "duration",
-      className: "u-hide--small"
-    }, {
-      Header: "Result",
-      accessor: "result"
-    }, {
-      Header: "Build Finished",
-      accessor: "finished",
-      className: "u-align-text--right"
-    }], []),
-    data: [],
-    emptyMsg: "Waiting for data..."
-  }),
-  name: "Empty"
-};
-const Sortable = exports.Sortable = {
-  render: () => /*#__PURE__*/_react.default.createElement(_ModularTable.default, {
-    sortable: true,
-    initialSortColumn: "duration",
-    initialSortDirection: "ascending",
-    getCellProps: _ref5 => {
-      let {
-        value
-      } = _ref5;
-      return {
-        className: value === "1 minute" ? "p-heading--5" : ""
-      };
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    ,
-    columns: _react.default.useMemo(() => [{
-      Header: "ID",
-      accessor: "buildId",
-      sortType: "basic",
-      Cell: _ref6 => {
-        let {
-          value
-        } = _ref6;
-        return /*#__PURE__*/_react.default.createElement("a", {
-          href: "#test"
-        }, "#", value);
-      }
-    }, {
-      Header: "Architecture",
-      accessor: "arch",
-      sortType: "basic"
-    }, {
-      Header: "Build Duration",
-      accessor: "duration",
-      className: "u-hide--small",
-      sortType: "basic"
-    }, {
-      Header: "Result",
-      accessor: "result",
-      sortType: "basic",
-      Cell: _ref7 => {
-        let {
-          value
-        } = _ref7;
-        switch (value) {
-          case "released":
-            return "Released";
-          case "failed":
-            return "Failed";
-          default:
-            return "Unknown";
-        }
-      },
-      getCellIcon: _ref8 => {
-        let {
-          value
-        } = _ref8;
-        switch (value) {
-          case "released":
-            return _Icon.ICONS.success;
-          case "failed":
-            return _Icon.ICONS.error;
-          default:
-            return false;
-        }
-      }
-    }, {
-      Header: "Build Finished",
-      accessor: "finished",
-      className: "u-align-text--right",
-      sortType: "basic"
-    }], [])
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    ,
-    data: _react.default.useMemo(() => [{
-      buildId: "5432",
-      arch: "arm64",
-      duration: "5 minutes",
-      result: "released",
-      finished: "10 minutes ago"
-    }, {
-      buildId: "1234",
-      arch: "armhf",
-      duration: "5 minutes",
-      result: "failed",
-      finished: "over 1 year ago"
-    }, {
-      buildId: "1111",
-      arch: "test64",
-      duration: "1 minute",
-      result: "other",
-      finished: "ages ago"
-    }], [])
-  }),
-  name: "Sortable"
-};
-
-/**
- * Subrows can be used to group table rows under a heading that needs to appear
-at the start of the group. In the following example sorting the columns will
-sort the group rows, then sort the sub-rows, but the group header always comes first.
- */
-const Subrows = exports.Subrows = {
-  render: () => /*#__PURE__*/_react.default.createElement(_ModularTable.default, {
-    sortable: true
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    ,
-    columns: _react.default.useMemo(() => [{
-      Header: "Flavour",
-      accessor: "flavour",
-      sortType: "basic",
-      Cell: props => props.row.depth === 0 ? /*#__PURE__*/_react.default.createElement("strong", null, props.value) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
-        type: "checkbox"
-      }), " ", props.value)
-    }, {
-      Header: "Scoops",
-      accessor: "scoops",
-      sortType: "basic",
-      Cell: props => props.row.depth === 0 ? /*#__PURE__*/_react.default.createElement("span", {
-        className: "u-text--muted"
-      }, props.value) : props.value
-    }], [])
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    ,
-    data: _react.default.useMemo(() => [{
-      flavour: "Sorbet",
-      scoops: "1-2",
-      subRows: [{
-        flavour: "Lemon",
-        scoops: 2
-      }, {
-        flavour: "Mango",
-        scoops: 1
-      }, {
-        flavour: "Raspberry",
-        scoops: 2
-      }]
-    }, {
-      flavour: "Ice-cream",
-      scoops: "1-3",
-      subRows: [{
-        flavour: "Chocolate",
-        scoops: 1
-      }, {
-        flavour: "Vanilla",
-        scoops: 3
-      }, {
-        flavour: "Caramel",
-        scoops: 2
-      }]
-    }], [])
-  }),
-  name: "Subrows"
-};
-
-/**
-Example below shows a basic `ModularTable` with `SummaryButton` component in the footer.
-```
-export const getSampleData = (i = 0) => [
-  { data: ++i * 100 + i },
-  { data: ++i * 100 + i },
-  { data: ++i * 100 + i },
-  { data: ++i * 100 + i },
-  { data: ++i * 100 + i },
-];
-```
- */
-const LoadMore = exports.LoadMore = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [data, setData] = (0, _react.useState)(getSampleData());
-    const hasMore = data.length < 20;
-    const loadMore = () => {
-      setData(data.concat(getSampleData(data.length)));
-    };
-    const columns = [{
-      Header: "Id",
-      accessor: (_d, i) => i
-    }, {
-      Header: "Data",
-      accessor: "data"
-    }];
-    const footer = hasMore ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "u-align--right"
-    }, /*#__PURE__*/_react.default.createElement(_SummaryButton.default, {
-      summary: "Showing ".concat(data.length, " of 20 items."),
-      label: "Show 5 more",
-      onClick: loadMore
-    })) : null;
-    return /*#__PURE__*/_react.default.createElement(_ModularTable.default, {
-      data: data,
-      columns: columns,
-      footer: footer
-    });
-  },
-  name: "Load more"
-};

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

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

package/dist/components/MultiSelect/FadeInDown/FadeInDown.d.ts

@@ -1,10 +0,0 @@
-import { FC, PropsWithChildren } from "react";
-import "./FadeInDown.scss";
-export interface FadeInDownProps extends PropsWithChildren {
-    isVisible: boolean;
-    className?: string;
-}
-/**
- * EXPERIMENTAL: This component is experimental and should be used internally only.
- */
-export declare const FadeInDown: FC<FadeInDownProps>;

package/dist/components/MultiSelect/FadeInDown/index.d.ts

@@ -1 +0,0 @@
-export * from "./FadeInDown";

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -1,57 +0,0 @@
-import type { ReactNode } from "react";
-import React from "react";
-import "./MultiSelect.scss";
-export type MultiSelectItem = {
-    label: string;
-    value: string | number;
-    group?: string;
-};
-export type MultiSelectProps = {
-    disabled?: boolean;
-    error?: string;
-    selectedItems?: MultiSelectItem[];
-    help?: string;
-    label?: string | null;
-    listSelected?: boolean;
-    onDeselectItem?: (item: MultiSelectItem) => void;
-    onItemsUpdate?: (items: MultiSelectItem[]) => void;
-    onSelectItem?: (item: MultiSelectItem) => void;
-    placeholder?: string;
-    required?: boolean;
-    items: MultiSelectItem[];
-    disabledItems?: MultiSelectItem[];
-    renderItem?: (item: MultiSelectItem) => ReactNode;
-    dropdownHeader?: ReactNode;
-    dropdownFooter?: ReactNode;
-    showDropdownFooter?: boolean;
-    variant?: "condensed" | "search";
-};
-type GroupFn = (items: Parameters<typeof getGroupedItems>[0]) => ReturnType<typeof getGroupedItems>;
-type SortFn = typeof sortAlphabetically;
-type MultiSelectDropdownProps = {
-    isOpen: boolean;
-    items: MultiSelectItem[];
-    selectedItems: MultiSelectItem[];
-    disabledItems: MultiSelectItem[];
-    header?: ReactNode;
-    updateItems: (newItems: MultiSelectItem[]) => void;
-    onDeselectItem?: (item: MultiSelectItem) => void;
-    onSelectItem?: (item: MultiSelectItem) => void;
-    footer?: ReactNode;
-    groupFn?: GroupFn;
-    sortFn?: SortFn;
-} & React.HTMLAttributes<HTMLDivElement>;
-declare const sortAlphabetically: (a: MultiSelectItem, b: MultiSelectItem) => number;
-declare const getGroupedItems: (items: MultiSelectItem[]) => {
-    group: string;
-    items: MultiSelectItem[];
-}[];
-export declare const MultiSelectDropdown: React.FC<MultiSelectDropdownProps>;
-/**
- * Component allowing to select multiple items from a list of options.
- *
- * `MultiSelectDropdown` displays the dropdown with options which are grouped and sorted alphabetically.
- * `SearchBox` or `Button` is used to trigger the dropdown depending on the variant.
- */
-export declare const MultiSelect: React.FC<MultiSelectProps>;
-export {};

package/dist/components/MultiSelect/MultiSelect.stories.d.ts

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { MultiSelect } from "./MultiSelect";
-declare const meta: Meta<typeof MultiSelect>;
-export default meta;
-type Story = StoryObj<typeof MultiSelect>;
-export declare const CondensedExample: Story;
-export declare const SearchExample: Story;
-export declare const WithDisabledItems: Story;

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -1,70 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithDisabledItems = exports.SearchExample = exports.CondensedExample = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _MultiSelect = require("./MultiSelect");
-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 && {}.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() { 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); }
-const Template = props => {
-  const [selectedItems, setSelectedItems] = (0, _react.useState)(props.selectedItems || []);
-  return /*#__PURE__*/_react.default.createElement(_MultiSelect.MultiSelect, _extends({}, props, {
-    selectedItems: selectedItems,
-    onItemsUpdate: setSelectedItems
-  }));
-};
-const meta = {
-  component: _MultiSelect.MultiSelect,
-  render: Template,
-  tags: ["autodocs"],
-  parameters: {}
-};
-var _default = exports.default = meta;
-const CondensedExample = exports.CondensedExample = {
-  args: {
-    items: [...Array.from({
-      length: 26
-    }, (_, i) => ({
-      label: "".concat(String.fromCharCode(i + 65)),
-      value: "".concat(String.fromCharCode(i + 65))
-    })), ...Array.from({
-      length: 26
-    }, (_, i) => ({
-      label: "Item ".concat(i + 1),
-      value: i + 1
-    }))],
-    selectedItems: [{
-      label: "A",
-      value: "A"
-    }, {
-      label: "Item 2",
-      value: 2
-    }],
-    variant: "condensed"
-  }
-};
-const SearchExample = exports.SearchExample = {
-  args: {
-    ...CondensedExample.args,
-    variant: "search",
-    items: [...CondensedExample.args.items.map((item, i) => ({
-      ...item,
-      group: i % 2 === 0 ? "Group 1" : "Group 2"
-    }))]
-  }
-};
-const WithDisabledItems = exports.WithDisabledItems = {
-  args: {
-    ...CondensedExample.args,
-    disabledItems: [{
-      label: "Item 1",
-      value: 1
-    }, {
-      label: "Item 2",
-      value: 2
-    }]
-  }
-};

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

@@ -1 +0,0 @@
-export * from "./MultiSelect";