@canonical/react-components 3.2.0 → 3.4.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/components/Select/Select.d.ts

@@ -22,6 +22,10 @@ export type Props = PropsWithSpread<{
      * Help text to show below the field.
      */
     help?: ReactNode;
+    /**
+     * Optional class(es) to pass to the help text element.
+     */
+    helpClassName?: string;
     /**
      * The id of the input.
      */
@@ -68,5 +72,5 @@ export type Props = PropsWithSpread<{
  *
  * Use the Select component to create a drop-down list.
  */
-declare const Select: ({ caution, className, error, help, id, label, labelClassName, onChange, options, required, stacked, success, takeFocus, wrapperClassName, ...selectProps }: Props) => React.JSX.Element;
+declare const Select: ({ caution, className, error, help, helpClassName, id, label, labelClassName, onChange, options, required, stacked, success, takeFocus, wrapperClassName, ...selectProps }: Props) => React.JSX.Element;
 export default Select;

package/dist/components/Select/Select.js

@@ -38,6 +38,7 @@ const Select = _ref2 => {
     className,
     error,
     help,
+    helpClassName,
     id,
     label,
     labelClassName,
@@ -67,6 +68,7 @@ const Select = _ref2 => {
     error: error,
     forId: selectId,
     help: help,
+    helpClassName: helpClassName,
     helpId: helpId,
     isSelect: true,
     label: label,

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;