@canonical/react-components 3.2.0 → 3.3.0

package/dist/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/components/ColumnSelector/ColumnSelector.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _ContextualMenu = _interopRequireDefault(require("../ContextualMenu"));
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput"));
+require("./ColumnSelector.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+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.
+*/
+const ColumnSelector = _ref => {
+  let {
+    className,
+    columns,
+    userHidden,
+    sizeHidden,
+    setUserHidden
+  } = _ref;
+  const selectedCount = columns.length - userHidden.length;
+  const toggleHiddenColumn = column => {
+    if (userHidden.includes(column)) {
+      setUserHidden(userHidden.filter(c => c !== column));
+    } else {
+      setUserHidden([...userHidden, column]);
+    }
+  };
+  const wrapTooltip = (element, column) => {
+    if (!sizeHidden.includes(column)) return element;
+    return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      message: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Screen is too narrow to fit the column.", /*#__PURE__*/_react.default.createElement("br", null), "Disable columns above or use a bigger screen."),
+      position: "left"
+    }, element);
+  };
+  return /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, {
+    className: (0, _classnames.default)(className, "column-selector-toggle"),
+    dropdownProps: {
+      "aria-label": "columns menu"
+    },
+    position: "right",
+    toggleClassName: "has-icon",
+    toggleProps: {
+      "aria-label": "Columns selection toggle"
+    },
+    toggleLabel: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      name: "settings"
+    }),
+    toggleAppearance: "base",
+    title: "Columns"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "column-selector-column-list"
+  }, /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    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.default.createElement("hr", null), columns.map(column => /*#__PURE__*/_react.default.createElement("div", {
+    key: column
+  }, wrapTooltip( /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
+    "aria-label": column,
+    labelClassName: (0, _classnames.default)({
+      "size-hidden": sizeHidden.includes(column)
+    }),
+    checked: !userHidden.includes(column),
+    label: column,
+    onChange: () => {
+      toggleHiddenColumn(column);
+    },
+    disabled: sizeHidden.includes(column)
+  }), column)))));
+};
+var _default = exports.default = ColumnSelector;

package/dist/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/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/components/ColumnSelector/ColumnSelector.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ColumnSelector = _interopRequireDefault(require("./ColumnSelector"));
+var _MainTable = _interopRequireDefault(require("../MainTable"));
+var _ColumnSelectorStoriesHelper = require("./ColumnSelectorStoriesHelper");
+var _columnSelectorHelper = require("./columnSelectorHelper");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.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 meta = {
+  component: _ColumnSelector.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [userHidden, setUserHidden] = (0, _react.useState)([_ColumnSelectorStoriesHelper.FILESYSTEM, _ColumnSelectorStoriesHelper.SNAPSHOTS, _ColumnSelectorStoriesHelper.CLUSTER_MEMBER]);
+    const sizeHidden = [_ColumnSelectorStoriesHelper.DESCRIPTION];
+    const hiddenColumns = userHidden.concat(sizeHidden);
+    const ROWS = (0, _ColumnSelectorStoriesHelper.getRows)();
+    const setUserHiddenAndSaveInLocalStorage = columns => {
+      setUserHidden(columns);
+    };
+    const displayedRows = (0, _columnSelectorHelper.visibleRowColumns)(ROWS, hiddenColumns);
+    const displayedHeaders = (0, _columnSelectorHelper.visibleHeaderColumns)(_ColumnSelectorStoriesHelper.COLUMN_HEADERS.map(t => {
+      return {
+        content: t,
+        sortKey: t
+      };
+    }), hiddenColumns);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ColumnSelector.default, {
+      columns: _ColumnSelectorStoriesHelper.USER_HIDEABLE_COLUMNS,
+      userHidden: userHidden,
+      sizeHidden: sizeHidden,
+      setUserHidden: setUserHiddenAndSaveInLocalStorage
+    }), /*#__PURE__*/_react.default.createElement(_MainTable.default, {
+      rows: displayedRows,
+      headers: displayedHeaders
+    }));
+  },
+  name: "Default"
+};

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

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

package/dist/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/components/ColumnSelector/ColumnSelectorStoriesHelper.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRows = exports.USER_HIDEABLE_COLUMNS = exports.TYPE = exports.STATUS = exports.SNAPSHOTS = exports.PROJECT = exports.NAME = exports.MEMORY = exports.IPV6 = exports.IPV4 = exports.FILESYSTEM = exports.DESCRIPTION = exports.COLUMN_HEADERS = exports.CLUSTER_MEMBER = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const STATUS = exports.STATUS = "Status";
+const NAME = exports.NAME = "Name";
+const TYPE = exports.TYPE = "Type";
+const CLUSTER_MEMBER = exports.CLUSTER_MEMBER = "Cluster member";
+const DESCRIPTION = exports.DESCRIPTION = "Description";
+const MEMORY = exports.MEMORY = "Memory";
+const FILESYSTEM = exports.FILESYSTEM = "Root filesystem";
+const IPV4 = exports.IPV4 = "IPv4";
+const IPV6 = exports.IPV6 = "IPv6";
+const SNAPSHOTS = exports.SNAPSHOTS = "Snapshots";
+const PROJECT = exports.PROJECT = "Project";
+const COLUMN_HEADERS = exports.COLUMN_HEADERS = [NAME, TYPE, PROJECT, CLUSTER_MEMBER, MEMORY, FILESYSTEM, DESCRIPTION, IPV4, IPV6, SNAPSHOTS, STATUS];
+
+// All columns except name and status
+const USER_HIDEABLE_COLUMNS = exports.USER_HIDEABLE_COLUMNS = [TYPE, PROJECT, CLUSTER_MEMBER, MEMORY, FILESYSTEM, DESCRIPTION, IPV4, IPV6, SNAPSHOTS];
+const 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"
+}];
+const getRows = () => {
+  const 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.default.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.default.createElement("a", null, instance.project),
+        role: "cell",
+        "aria-label": PROJECT // needed
+      }, {
+        content: /*#__PURE__*/_react.default.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.default.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;
+};
+exports.getRows = getRows;

package/dist/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/components/ColumnSelector/columnSelectorHelper.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.visibleRowColumns = exports.visibleHeaderColumns = void 0;
+const visibleRowColumns = (rows, hiddenCols) => {
+  return rows.map(row => {
+    return {
+      ...row,
+      columns: row.columns.filter(item => !hiddenCols.includes(item["aria-label"]))
+    };
+  });
+};
+exports.visibleRowColumns = visibleRowColumns;
+const visibleHeaderColumns = (headers, hiddenCols) => headers.filter(item => typeof item.content !== "string" || !hiddenCols.includes(item.content));
+exports.visibleHeaderColumns = visibleHeaderColumns;

package/dist/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/components/ColumnSelector/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ColumnSelector.default;
+  }
+});
+Object.defineProperty(exports, "visibleHeaderColumns", {
+  enumerable: true,
+  get: function () {
+    return _columnSelectorHelper.visibleHeaderColumns;
+  }
+});
+Object.defineProperty(exports, "visibleRowColumns", {
+  enumerable: true,
+  get: function () {
+    return _columnSelectorHelper.visibleRowColumns;
+  }
+});
+var _ColumnSelector = _interopRequireDefault(require("./ColumnSelector"));
+var _columnSelectorHelper = require("./columnSelectorHelper");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/CustomSelect/CustomSelect.js

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

package/dist/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/components/CustomSelect/CustomSelect.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StandardOptions = exports.ManualSearchable = exports.DisabledOptions = exports.CustomOptions = exports.AutoSearchable = void 0;
+exports.default = exports.StandardOptions = exports.ManualSearchable = exports.DisabledOptions = exports.CustomOptionsAndSelectedLabel = exports.CustomOptions = exports.AutoSearchable = void 0;
 var _CustomSelect = _interopRequireDefault(require("./CustomSelect"));
 var _react = _interopRequireWildcard(require("react"));
 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); }
@@ -44,6 +44,95 @@ const generateCustomOptions = () => {
     disabled: false
   }];
 };
+const generateCustomOptionsWithSelectedLabel = () => {
+  const 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.default.createElement("div", {
+        className: "label",
+        style: {
+          display: "flex",
+          gap: "5px"
+        }
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        title: network.name,
+        className: "network-option u-truncate",
+        style: {
+          width: "12rem"
+        }
+      }, network.name), /*#__PURE__*/_react.default.createElement("span", {
+        title: network.type,
+        className: "network-option u-truncate",
+        style: {
+          width: "8rem"
+        }
+      }, network.type), /*#__PURE__*/_react.default.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.default.createElement("span", null, network.name, "\xA0", /*#__PURE__*/_react.default.createElement("span", {
+        className: "u-text--muted"
+      }, "(", network.type, ")"))
+    };
+  });
+  return options;
+};
+const getHeader = () => {
+  return /*#__PURE__*/_react.default.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.default.createElement("span", {
+    className: "network-option u-no-margin--bottom",
+    style: {
+      color: "$colors--theme--text-default",
+      width: "12rem"
+    }
+  }, "Name"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "network-option u-no-margin--bottom",
+    style: {
+      color: "$colors--theme--text-default",
+      width: "8rem"
+    }
+  }, "Type"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "network-option u-no-margin--bottom",
+    style: {
+      color: "$colors--theme--text-default",
+      width: "4rem"
+    }
+  }, "ACLs"));
+};
 const Template = _ref => {
   let {
     ...props
@@ -99,6 +188,19 @@ const CustomOptions = exports.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.
+ */
+const CustomOptionsAndSelectedLabel = exports.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/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/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/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";

package/dist/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/index.js

@@ -24,6 +24,9 @@ var _exportNames = {
   CodeSnippet: true,
   CodeSnippetBlockAppearance: true,
   Col: true,
+  ColumnSelector: true,
+  visibleHeaderColumns: true,
+  visibleRowColumns: true,
   ConfirmationButton: true,
   ConfirmationModal: true,
   ContextualMenu: true,
@@ -236,6 +239,12 @@ Object.defineProperty(exports, "Col", {
     return _Col.default;
   }
 });
+Object.defineProperty(exports, "ColumnSelector", {
+  enumerable: true,
+  get: function () {
+    return _ColumnSelector.default;
+  }
+});
 Object.defineProperty(exports, "ConfirmationButton", {
   enumerable: true,
   get: function () {
@@ -782,6 +791,18 @@ Object.defineProperty(exports, "useWindowFitment", {
     return _hooks.useWindowFitment;
   }
 });
+Object.defineProperty(exports, "visibleHeaderColumns", {
+  enumerable: true,
+  get: function () {
+    return _ColumnSelector.visibleHeaderColumns;
+  }
+});
+Object.defineProperty(exports, "visibleRowColumns", {
+  enumerable: true,
+  get: function () {
+    return _ColumnSelector.visibleRowColumns;
+  }
+});
 var _Accordion = _interopRequireDefault(require("./components/Accordion"));
 var _ActionButton = _interopRequireDefault(require("./components/ActionButton"));
 var _ArticlePagination = _interopRequireDefault(require("./components/ArticlePagination"));
@@ -800,6 +821,7 @@ var _Chip = _interopRequireDefault(require("./components/Chip"));
 var _Code = _interopRequireDefault(require("./components/Code"));
 var _CodeSnippet = _interopRequireWildcard(require("./components/CodeSnippet"));
 var _Col = _interopRequireDefault(require("./components/Col"));
+var _ColumnSelector = _interopRequireWildcard(require("./components/ColumnSelector"));
 var _ConfirmationButton = _interopRequireDefault(require("./components/ConfirmationButton"));
 var _ConfirmationModal = _interopRequireDefault(require("./components/ConfirmationModal"));
 var _ContextualMenu = _interopRequireDefault(require("./components/ContextualMenu"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {