@canonical/react-components 3.1.1 → 3.3.0

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithoutSorting = exports.WithDisabledItems = exports.SearchExample = exports.Disabled = exports.CondensedExample = void 0;
+exports.default = exports.WithoutSorting = exports.WithDisabledItems = exports.SearchExample = exports.HelpText = exports.Disabled = 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); }
@@ -114,4 +114,10 @@ const Disabled = exports.Disabled = {
     ...CondensedExample.args,
     disabled: true
   }
+};
+const HelpText = exports.HelpText = {
+  args: {
+    ...CondensedExample.args,
+    help: /*#__PURE__*/_react.default.createElement("span", null, "This is a help text, that should appear underneath the component.")
+  }
 };

package/dist/esm/components/ColumnSelector/ColumnSelector.d.ts

@@ -0,0 +1,32 @@
+import React, { HTMLProps } from "react";
+import { ClassName, PropsWithSpread } from "../../types";
+import "./ColumnSelector.scss";
+export type Props = PropsWithSpread<{
+    /**
+     * Optional classes to add to the contextual menu.
+     */
+    className?: ClassName;
+    /**
+     * Columns of the table that can be hidden by the user
+     */
+    columns: string[];
+    /**
+     * Columns of the table hidden by the user
+     */
+    userHidden: string[];
+    /**
+     * Columns of the table hidden because the available space is not sufficient
+     */
+    sizeHidden: string[];
+    /**
+     * Function that sets columns hidden by the user
+     */
+    setUserHidden: (columns: string[]) => void;
+}, HTMLProps<HTMLElement>>;
+/**
+This is a [React](https://reactjs.org/) component that extends from the Vanilla [Select](https://vanillaframework.io/docs/base/forms#select) element.
+The aim of this component is to provide a dropdown menu to control the visibility of columns within a table.
+This component allows users to customize their view, hiding or showing columns as needed, while also handling columns that are automatically hidden on smaller screens.
+*/
+declare const ColumnSelector: ({ className, columns, userHidden, sizeHidden, setUserHidden, }: Props) => React.JSX.Element;
+export default ColumnSelector;

package/dist/esm/components/ColumnSelector/ColumnSelector.js

@@ -0,0 +1,79 @@
+import React from "react";
+import classnames from "classnames";
+import Tooltip from "../Tooltip";
+import ContextualMenu from "../ContextualMenu";
+import Icon from "../Icon";
+import CheckboxInput from "../CheckboxInput";
+import "./ColumnSelector.scss";
+/**
+This is a [React](https://reactjs.org/) component that extends from the Vanilla [Select](https://vanillaframework.io/docs/base/forms#select) element.
+The aim of this component is to provide a dropdown menu to control the visibility of columns within a table.
+This component allows users to customize their view, hiding or showing columns as needed, while also handling columns that are automatically hidden on smaller screens.
+*/
+var ColumnSelector = _ref => {
+  var {
+    className,
+    columns,
+    userHidden,
+    sizeHidden,
+    setUserHidden
+  } = _ref;
+  var selectedCount = columns.length - userHidden.length;
+  var toggleHiddenColumn = column => {
+    if (userHidden.includes(column)) {
+      setUserHidden(userHidden.filter(c => c !== column));
+    } else {
+      setUserHidden([...userHidden, column]);
+    }
+  };
+  var wrapTooltip = (element, column) => {
+    if (!sizeHidden.includes(column)) return element;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      message: /*#__PURE__*/React.createElement(React.Fragment, null, "Screen is too narrow to fit the column.", /*#__PURE__*/React.createElement("br", null), "Disable columns above or use a bigger screen."),
+      position: "left"
+    }, element);
+  };
+  return /*#__PURE__*/React.createElement(ContextualMenu, {
+    className: classnames(className, "column-selector-toggle"),
+    dropdownProps: {
+      "aria-label": "columns menu"
+    },
+    position: "right",
+    toggleClassName: "has-icon",
+    toggleProps: {
+      "aria-label": "Columns selection toggle"
+    },
+    toggleLabel: /*#__PURE__*/React.createElement(Icon, {
+      name: "settings"
+    }),
+    toggleAppearance: "base",
+    title: "Columns"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "column-selector-column-list"
+  }, /*#__PURE__*/React.createElement(CheckboxInput, {
+    checked: userHidden.length === 0,
+    indeterminate: selectedCount > 0 && selectedCount < columns.length,
+    label: "".concat(selectedCount, " out of ").concat(columns.length, " columns selected"),
+    onChange: () => {
+      if (userHidden.length > 0) {
+        setUserHidden([]);
+      } else {
+        setUserHidden(columns);
+      }
+    }
+  }), /*#__PURE__*/React.createElement("hr", null), columns.map(column => /*#__PURE__*/React.createElement("div", {
+    key: column
+  }, wrapTooltip( /*#__PURE__*/React.createElement(CheckboxInput, {
+    "aria-label": column,
+    labelClassName: classnames({
+      "size-hidden": sizeHidden.includes(column)
+    }),
+    checked: !userHidden.includes(column),
+    label: column,
+    onChange: () => {
+      toggleHiddenColumn(column);
+    },
+    disabled: sizeHidden.includes(column)
+  }), column)))));
+};
+export default ColumnSelector;

package/dist/esm/components/ColumnSelector/ColumnSelector.scss

@@ -0,0 +1,15 @@
+@import "vanilla-framework";
+@include vf-b-placeholders;
+@include vf-p-icon-settings;
+
+.column-selector-column-list {
+  min-width: 12rem;
+
+  .p-checkbox {
+    margin-left: 1rem;
+  }
+
+  .size-hidden > * {
+    opacity: 0.33;
+  }
+}

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ColumnSelector from "./ColumnSelector";
+declare const meta: Meta<typeof ColumnSelector>;
+export default meta;
+type Story = StoryObj<typeof ColumnSelector>;
+export declare const Default: Story;

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

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import ColumnSelector from "./ColumnSelector";
+import MainTable from "../MainTable";
+import { getRows, FILESYSTEM, SNAPSHOTS, USER_HIDEABLE_COLUMNS, DESCRIPTION, CLUSTER_MEMBER, COLUMN_HEADERS } from "./ColumnSelectorStoriesHelper";
+import { visibleHeaderColumns, visibleRowColumns } from "./columnSelectorHelper";
+var meta = {
+  component: ColumnSelector,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var [userHidden, setUserHidden] = useState([FILESYSTEM, SNAPSHOTS, CLUSTER_MEMBER]);
+    var sizeHidden = [DESCRIPTION];
+    var hiddenColumns = userHidden.concat(sizeHidden);
+    var ROWS = getRows();
+    var setUserHiddenAndSaveInLocalStorage = columns => {
+      setUserHidden(columns);
+    };
+    var displayedRows = visibleRowColumns(ROWS, hiddenColumns);
+    var displayedHeaders = visibleHeaderColumns(COLUMN_HEADERS.map(t => {
+      return {
+        content: t,
+        sortKey: t
+      };
+    }), hiddenColumns);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColumnSelector, {
+      columns: USER_HIDEABLE_COLUMNS,
+      userHidden: userHidden,
+      sizeHidden: sizeHidden,
+      setUserHidden: setUserHiddenAndSaveInLocalStorage
+    }), /*#__PURE__*/React.createElement(MainTable, {
+      rows: displayedRows,
+      headers: displayedHeaders
+    }));
+  },
+  name: "Default"
+};

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

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/esm/components/ColumnSelector/ColumnSelectorStoriesHelper.d.ts

@@ -0,0 +1,15 @@
+import { MainTableRow } from "../MainTable/MainTable";
+export declare const STATUS = "Status";
+export declare const NAME = "Name";
+export declare const TYPE = "Type";
+export declare const CLUSTER_MEMBER = "Cluster member";
+export declare const DESCRIPTION = "Description";
+export declare const MEMORY = "Memory";
+export declare const FILESYSTEM = "Root filesystem";
+export declare const IPV4 = "IPv4";
+export declare const IPV6 = "IPv6";
+export declare const SNAPSHOTS = "Snapshots";
+export declare const PROJECT = "Project";
+export declare const COLUMN_HEADERS: string[];
+export declare const USER_HIDEABLE_COLUMNS: string[];
+export declare const getRows: () => MainTableRow[];

package/dist/esm/components/ColumnSelector/ColumnSelectorStoriesHelper.js

@@ -0,0 +1,142 @@
+import React from "react";
+export var STATUS = "Status";
+export var NAME = "Name";
+export var TYPE = "Type";
+export var CLUSTER_MEMBER = "Cluster member";
+export var DESCRIPTION = "Description";
+export var MEMORY = "Memory";
+export var FILESYSTEM = "Root filesystem";
+export var IPV4 = "IPv4";
+export var IPV6 = "IPv6";
+export var SNAPSHOTS = "Snapshots";
+export var PROJECT = "Project";
+export var COLUMN_HEADERS = [NAME, TYPE, PROJECT, CLUSTER_MEMBER, MEMORY, FILESYSTEM, DESCRIPTION, IPV4, IPV6, SNAPSHOTS, STATUS];
+
+// All columns except name and status
+export var USER_HIDEABLE_COLUMNS = [TYPE, PROJECT, CLUSTER_MEMBER, MEMORY, FILESYSTEM, DESCRIPTION, IPV4, IPV6, SNAPSHOTS];
+var INSTANCES = [{
+  name: "darling-bunny",
+  type: "VM",
+  project: "default",
+  clusterMember: "-",
+  memory: "1.4 GiB of 1.9 GiB",
+  fileSystem: "3.3 GiB of 9.5 GiB",
+  description: "Meet darling-bunny, a speedy little instance hopping along with your latest project. It's got the ears for listening to your commands and the nose for sniffing out the best performance. Handle with care, and remember to feed it plenty of CPU.",
+  ipv4: ["10.138.32.6"],
+  ipv6: ["fd42:6a38:859a:587d:216:3eff:fe43:167e", "fe80::216:3eff:fe43:167e", "fe80::1050:62ff:feb2:964c"],
+  status: "Running"
+}, {
+  name: "sassy-salamander",
+  type: "VM",
+  project: "default",
+  clusterMember: "-",
+  memory: "1.4 GiB of 1.9 GiB",
+  fileSystem: "3.3 GiB of 9.5 GiB",
+  description: "sassy-salamander is a resilient and feisty instance, perfectly at home in any environment—from the scorching heat of a web server to the damp coolness of a database. Don't let its size fool you; it's quick, adaptable, and not afraid to tackle complex tasks.",
+  ipv4: ["10.138.32.6"],
+  ipv6: ["fd42:6a38:859a:587d:216:3eff:fe43:167e", "fe80::216:3eff:fe43:167e", "fe80::1050:62ff:feb2:964c"],
+  status: "Running"
+}, {
+  name: "fun-feline",
+  type: "Container",
+  project: "default",
+  clusterMember: "-",
+  memory: "0.7 GiB of 1.9 GiB",
+  fileSystem: "1.1 GiB of 9.5 GiB",
+  description: "fun-feline is a purr-fectly agile and independent instance. It’s got nine lives for all your testing needs and a mischievous spirit for tackling the toughest tasks. Just be sure to give it enough RAM—it loves to stretch out.",
+  ipv4: ["10.138.32.6"],
+  ipv6: ["fd42:6a38:859a:587d:216:3eff:fe43:167e", "fe80::216:3eff:fe43:167e", "fe80::1050:62ff:feb2:964c"],
+  snapshots: ["1", "2"],
+  status: "Stopped"
+}];
+export var getRows = () => {
+  var instanceRows = INSTANCES.map(instance => {
+    var _instance$snapshots$l, _instance$snapshots;
+    return {
+      key: instance.name,
+      name: instance.name,
+      columns: [{
+        content: instance.name,
+        className: "u-truncate",
+        title: "Instance ".concat(instance.name),
+        role: "rowheader",
+        "aria-label": NAME,
+        // needed
+        onClick: () => console.log("Click on instance", instance.name)
+      }, {
+        content: /*#__PURE__*/React.createElement("span", null, instance.type),
+        className: "clickable-cell",
+        role: "cell",
+        "aria-label": TYPE,
+        // needed
+        onClick: () => console.log("Click on instance", instance.type)
+      }, {
+        content: /*#__PURE__*/React.createElement("a", null, instance.project),
+        role: "cell",
+        "aria-label": PROJECT // needed
+      }, {
+        content: /*#__PURE__*/React.createElement("a", null, instance.clusterMember),
+        role: "cell",
+        "aria-label": CLUSTER_MEMBER // needed
+      }, {
+        content: instance.memory,
+        className: "clickable-cell",
+        role: "cell",
+        "aria-label": MEMORY,
+        // needed
+        onClick: () => console.log("Click on instance", instance.memory)
+      }, {
+        content: instance.fileSystem,
+        className: "clickable-cell",
+        role: "cell",
+        "aria-label": FILESYSTEM,
+        // needed
+        onClick: () => console.log("Click on instance", instance.fileSystem)
+      }, {
+        content: /*#__PURE__*/React.createElement("div", {
+          className: "u-truncate",
+          title: instance.description
+        }, instance.description),
+        className: "clickable-cell",
+        role: "cell",
+        "aria-label": DESCRIPTION,
+        // needed
+        onClick: () => console.log("Click on instance", instance.description)
+      }, {
+        key: "ipv4-".concat(instance.ipv4.length),
+        content: instance.ipv4.join(", "),
+        className: "u-align--right clickable-cell",
+        role: "cell",
+        "aria-label": IPV4,
+        // needed
+        onClick: () => console.log("Click on instance", instance.ipv4)
+      }, {
+        key: "ipv6-".concat(instance.ipv6.length),
+        content: instance.ipv6.join(", "),
+        className: "clickable-cell",
+        role: "cell",
+        "aria-label": IPV6,
+        // needed
+        onClick: () => console.log("Click on instance", instance.ipv6)
+      }, {
+        content: (_instance$snapshots$l = (_instance$snapshots = instance.snapshots) === null || _instance$snapshots === void 0 ? void 0 : _instance$snapshots.length) !== null && _instance$snapshots$l !== void 0 ? _instance$snapshots$l : "0",
+        className: "u-align--right clickable-cell",
+        role: "cell",
+        "aria-label": SNAPSHOTS,
+        // needed
+        onClick: () => {
+          var _instance$snapshots2;
+          return console.log("Click on instance", (_instance$snapshots2 = instance.snapshots) === null || _instance$snapshots2 === void 0 ? void 0 : _instance$snapshots2.length);
+        }
+      }, {
+        content: instance.status,
+        role: "cell",
+        className: "clickable-cell",
+        "aria-label": STATUS,
+        // needed
+        onClick: () => console.log("Click on instance", instance.status)
+      }]
+    };
+  });
+  return instanceRows;
+};

package/dist/esm/components/ColumnSelector/columnSelectorHelper.d.ts

@@ -0,0 +1,3 @@
+import { MainTableHeader, MainTableRow } from "../MainTable/MainTable";
+export declare const visibleRowColumns: (rows: MainTableRow[], hiddenCols: string[]) => MainTableRow[];
+export declare const visibleHeaderColumns: (headers: MainTableHeader[], hiddenCols: string[]) => MainTableHeader[];

package/dist/esm/components/ColumnSelector/columnSelectorHelper.js

@@ -0,0 +1,13 @@
+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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(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); }
+export var visibleRowColumns = (rows, hiddenCols) => {
+  return rows.map(row => {
+    return _objectSpread(_objectSpread({}, row), {}, {
+      columns: row.columns.filter(item => !hiddenCols.includes(item["aria-label"]))
+    });
+  });
+};
+export var visibleHeaderColumns = (headers, hiddenCols) => headers.filter(item => typeof item.content !== "string" || !hiddenCols.includes(item.content));

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

@@ -0,0 +1,3 @@
+export { default } from "./ColumnSelector";
+export { visibleHeaderColumns, visibleRowColumns, } from "./columnSelectorHelper";
+export type { Props as ColumnSelectorProps } from "./ColumnSelector";

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

@@ -0,0 +1,2 @@
+export { default } from "./ColumnSelector";
+export { visibleHeaderColumns, visibleRowColumns } from "./columnSelectorHelper";

package/dist/esm/components/CustomSelect/CustomSelect.js

@@ -75,7 +75,7 @@ var CustomSelect = _ref => {
   var selectedOption = options.find(option => option.value === value);
   var toggleLabel = /*#__PURE__*/React.createElement("span", {
     className: "toggle-label u-truncate"
-  }, selectedOption ? getOptionText(selectedOption) : "Select an option");
+  }, selectedOption ? selectedOption.selectedLabel || getOptionText(selectedOption) : "Select an option");
   var handleSelect = value => {
     var _document$getElementB3;
     (_document$getElementB3 = document.getElementById(selectId)) === null || _document$getElementB3 === void 0 || _document$getElementB3.focus();

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

@@ -14,6 +14,12 @@ export declare const StandardOptions: Story;
  * In this case, the `text` property for each option is required and is used for display in the toggle, search and sort functionalities.
  */
 export declare const CustomOptions: Story;
+/**
+ * If `label` is of `ReactNode` type. You can render custom content.
+ * In this case, the `selectedLabel` for each option is provided and will be displayed in the toggle instead of `text`
+ * The `text` property for each option is still required and is used for search and sort functionalities.
+ */
+export declare const CustomOptionsAndSelectedLabel: Story;
 /**
  * For each option, if `disabled` is set to `true`, the option will be disabled.
  */

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

@@ -41,6 +41,95 @@ var generateCustomOptions = () => {
     disabled: false
   }];
 };
+var generateCustomOptionsWithSelectedLabel = () => {
+  var options = [{
+    type: "ovn",
+    name: "ovntest",
+    config: {
+      "security.acls": "foo,bar"
+    }
+  }, {
+    type: "bridge",
+    name: "lxdbr0",
+    config: {}
+  }, {
+    type: "bridge",
+    name: "microbr0",
+    config: {}
+  }, {
+    type: "macvlan",
+    name: "macvlantest",
+    config: {}
+  }].map(network => {
+    var _network$config$secur;
+    return {
+      label: /*#__PURE__*/React.createElement("div", {
+        className: "label",
+        style: {
+          display: "flex",
+          gap: "5px"
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        title: network.name,
+        className: "network-option u-truncate",
+        style: {
+          width: "12rem"
+        }
+      }, network.name), /*#__PURE__*/React.createElement("span", {
+        title: network.type,
+        className: "network-option u-truncate",
+        style: {
+          width: "8rem"
+        }
+      }, network.type), /*#__PURE__*/React.createElement("span", {
+        title: "network ACLs",
+        className: "network-option u-truncate u-align--right",
+        style: {
+          paddingRight: "8px",
+          width: "4rem"
+        }
+      }, ((_network$config$secur = network.config["security.acls"]) === null || _network$config$secur === void 0 ? void 0 : _network$config$secur.length) || "-")),
+      value: network.name,
+      text: "".concat(network.name, " - ").concat(network.type),
+      disabled: false,
+      selectedLabel: /*#__PURE__*/React.createElement("span", null, network.name, "\xA0", /*#__PURE__*/React.createElement("span", {
+        className: "u-text--muted"
+      }, "(", network.type, ")"))
+    };
+  });
+  return options;
+};
+var getHeader = () => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "header",
+    style: {
+      backgroundColor: "$colors--theme--background-alt",
+      display: "flex",
+      gap: "$sph--small",
+      padding: "$sph--x-small $sph--small",
+      position: "sticky",
+      top: 0
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "network-option u-no-margin--bottom",
+    style: {
+      color: "$colors--theme--text-default",
+      width: "12rem"
+    }
+  }, "Name"), /*#__PURE__*/React.createElement("span", {
+    className: "network-option u-no-margin--bottom",
+    style: {
+      color: "$colors--theme--text-default",
+      width: "8rem"
+    }
+  }, "Type"), /*#__PURE__*/React.createElement("span", {
+    className: "network-option u-no-margin--bottom",
+    style: {
+      color: "$colors--theme--text-default",
+      width: "4rem"
+    }
+  }, "ACLs"));
+};
 var Template = _ref => {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   var [selected, setSelected] = useState(props.value || "");
@@ -94,6 +183,19 @@ export var CustomOptions = {
   }
 };
 
+/**
+ * If `label` is of `ReactNode` type. You can render custom content.
+ * In this case, the `selectedLabel` for each option is provided and will be displayed in the toggle instead of `text`
+ * The `text` property for each option is still required and is used for search and sort functionalities.
+ */
+export var CustomOptionsAndSelectedLabel = {
+  args: {
+    options: generateCustomOptionsWithSelectedLabel(),
+    header: getHeader(),
+    dropdownClassName: "network-select-dropdown"
+  }
+};
+
 /**
  * For each option, if `disabled` is set to `true`, the option will be disabled.
  */

package/dist/esm/components/CustomSelect/CustomSelectDropdown/CustomSelectDropdown.d.ts

@@ -4,6 +4,7 @@ export type CustomSelectOption = LiHTMLAttributes<HTMLLIElement> & {
     label: ReactNode;
     text?: string;
     disabled?: boolean;
+    selectedLabel?: ReactNode;
 };
 export type Props = {
     searchable?: "auto" | "always" | "never";

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

@@ -10,7 +10,8 @@ export type MultiSelectProps = {
     disabled?: boolean;
     error?: string;
     selectedItems?: MultiSelectItem[];
-    help?: string;
+    help?: ReactNode;
+    helpClassName?: string;
     label?: string | null;
     listSelected?: boolean;
     onDeselectItem?: (item: MultiSelectItem) => void;

package/dist/esm/components/MultiSelect/MultiSelect.js

@@ -3,6 +3,7 @@ var _excluded = ["items", "selectedItems", "disabledItems", "header", "updateIte
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import classNames from "classnames";
 import React, { useEffect, useId, useMemo, useRef, useState } from "react";
 import "./MultiSelect.scss";
 import { Button, CheckboxInput, ContextualMenu, SearchBox } from "../../index";
@@ -172,13 +173,16 @@ export var MultiSelect = _ref4 => {
     scrollOverflow = false,
     isSortedAlphabetically = true,
     hasSelectedItemsFirst = true,
-    id
+    id,
+    help,
+    helpClassName
   } = _ref4;
   var buttonRef = useRef(null);
   var [isDropdownOpen, setIsDropdownOpen] = useState(false);
   var [filter, setFilter] = useState("");
   var [internalSelectedItems, setInternalSelectedItems] = useState([]);
   var selectedItems = externalSelectedItems || internalSelectedItems;
+  var helpId = useId();
   var updateItems = newItems => {
     var uniqueItems = Array.from(new Set(newItems));
     setInternalSelectedItems(uniqueItems);
@@ -205,7 +209,7 @@ export var MultiSelect = _ref4 => {
       type: "button"
     }, "Clear"));
   }
-  return /*#__PURE__*/React.createElement(ContextualMenu, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContextualMenu, {
     className: "multi-select",
     onToggleMenu: isOpen => {
       if (!isOpen) {
@@ -269,7 +273,8 @@ export var MultiSelect = _ref4 => {
       className: "multi-select__condensed-text"
     }, listSelected && selectedItems.length > 0 ? selectedItemsLabel : placeholder !== null && placeholder !== void 0 ? placeholder : "Select items")),
     visible: isDropdownOpen,
-    scrollOverflow: scrollOverflow
+    scrollOverflow: scrollOverflow,
+    "aria-describedby": help ? helpId : undefined
   }, /*#__PURE__*/React.createElement(MultiSelectDropdown, {
     id: dropdownId,
     isOpen: isDropdownOpen,
@@ -283,7 +288,10 @@ export var MultiSelect = _ref4 => {
     footer: footer,
     sortFn: isSortedAlphabetically ? sortAlphabetically : () => 0,
     hasSelectedItemsFirst: hasSelectedItemsFirst
-  }));
+  })), help && /*#__PURE__*/React.createElement("p", {
+    className: classNames("p-form-help-text", helpClassName),
+    id: helpId
+  }, help));
 };
 MultiSelect.propTypes = {
   disabled: _pt.bool,
@@ -293,7 +301,8 @@ MultiSelect.propTypes = {
     value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
     group: _pt.string
   })),
-  help: _pt.string,
+  help: _pt.node,
+  helpClassName: _pt.string,
   label: _pt.oneOfType([_pt.string, _pt.oneOf([null])]),
   listSelected: _pt.bool,
   onDeselectItem: _pt.func,

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

@@ -8,3 +8,4 @@ export declare const SearchExample: Story;
 export declare const WithDisabledItems: Story;
 export declare const WithoutSorting: Story;
 export declare const Disabled: Story;
+export declare const HelpText: Story;

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

@@ -108,4 +108,9 @@ export var Disabled = {
   args: _objectSpread(_objectSpread({}, CondensedExample.args), {}, {
     disabled: true
   })
+};
+export var HelpText = {
+  args: _objectSpread(_objectSpread({}, CondensedExample.args), {}, {
+    help: /*#__PURE__*/React.createElement("span", null, "This is a help text, that should appear underneath the component.")
+  })
 };

package/dist/esm/index.d.ts

@@ -16,6 +16,7 @@ export { default as Chip } from "./components/Chip";
 export { default as Code } from "./components/Code";
 export { default as CodeSnippet, CodeSnippetBlockAppearance, } from "./components/CodeSnippet";
 export { default as Col } from "./components/Col";
+export { default as ColumnSelector, visibleHeaderColumns, visibleRowColumns, } from "./components/ColumnSelector";
 export { default as ConfirmationButton } from "./components/ConfirmationButton";
 export { default as ConfirmationModal } from "./components/ConfirmationModal";
 export { default as ContextualMenu } from "./components/ContextualMenu";
@@ -93,6 +94,7 @@ export type { ChipProps } from "./components/Chip";
 export type { CodeProps } from "./components/Code";
 export type { CodeSnippetProps, CodeSnippetBlockProps, CodeSnippetDropdownProps, } from "./components/CodeSnippet";
 export type { ColProps, ColSize } from "./components/Col";
+export type { ColumnSelectorProps } from "./components/ColumnSelector";
 export type { ConfirmationButtonProps } from "./components/ConfirmationButton";
 export type { ConfirmationModalProps } from "./components/ConfirmationModal";
 export type { ContextualMenuProps, ContextualMenuDropdownProps, MenuLink, Position, } from "./components/ContextualMenu";

package/dist/esm/index.js

@@ -16,6 +16,7 @@ export { default as Chip } from "./components/Chip";
 export { default as Code } from "./components/Code";
 export { default as CodeSnippet, CodeSnippetBlockAppearance } from "./components/CodeSnippet";
 export { default as Col } from "./components/Col";
+export { default as ColumnSelector, visibleHeaderColumns, visibleRowColumns } from "./components/ColumnSelector";
 export { default as ConfirmationButton } from "./components/ConfirmationButton";
 export { default as ConfirmationModal } from "./components/ConfirmationModal";
 export { default as ContextualMenu } from "./components/ContextualMenu";