@canonical/react-components 1.7.2 → 1.8.0

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

@@ -0,0 +1,126 @@
+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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : 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); }
+function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import CustomSelect from "./CustomSelect";
+import React, { useState } from "react";
+var generateStandardOptions = num => Array(num).fill(null).map((_, i) => ({
+  value: "option-".concat(i + 1),
+  label: "Option ".concat(i + 1),
+  text: "Option ".concat(i + 1),
+  disabled: false
+}));
+var generateCustomOptions = () => {
+  return [{
+    value: "smile",
+    label: /*#__PURE__*/React.createElement("div", null, "\uD83D\uDE00"),
+    text: "Smile",
+    disabled: false
+  }, {
+    value: "grin",
+    label: /*#__PURE__*/React.createElement("div", null, "\uD83D\uDE01"),
+    text: "Grin",
+    disabled: false
+  }, {
+    value: "cry",
+    label: /*#__PURE__*/React.createElement("div", null, "\uD83D\uDE2D"),
+    text: "Cry",
+    disabled: false
+  }, {
+    value: "angry",
+    label: /*#__PURE__*/React.createElement("div", null, "\uD83D\uDE21"),
+    text: "Angry",
+    disabled: false
+  }, {
+    value: "sad",
+    label: /*#__PURE__*/React.createElement("div", null, "\uD83D\uDE22"),
+    text: "Sad",
+    disabled: false
+  }];
+};
+var Template = _ref => {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  var [selected, setSelected] = useState(props.value || "");
+  return /*#__PURE__*/React.createElement(CustomSelect, _extends({}, props, {
+    value: selected,
+    onChange: value => setSelected(value)
+  }));
+};
+var meta = {
+  component: CustomSelect,
+  render: Template,
+  tags: ["autodocs"],
+  args: {
+    name: "customSelect",
+    label: "Custom Select",
+    searchable: "auto",
+    initialPosition: "left"
+  },
+  argTypes: {
+    searchable: {
+      options: ["auto", "always", "never"],
+      control: {
+        type: "select"
+      }
+    },
+    initialPosition: {
+      options: ["left", "right"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+export default meta;
+/**
+ * If `label` is of `string` type. You do not have to do anything extra to render it.
+ */
+export var StandardOptions = {
+  args: {
+    options: generateStandardOptions(10)
+  }
+};
+
+/**
+ * If `label` is of `ReactNode` type. You can render custom content.
+ * In this case, the `text` property for each option is required and is used for display in the toggle, search and sort functionalities.
+ */
+export var CustomOptions = {
+  args: {
+    options: generateCustomOptions()
+  }
+};
+
+/**
+ * For each option, if `disabled` is set to `true`, the option will be disabled.
+ */
+export var DisabledOptions = {
+  args: {
+    options: generateStandardOptions(5).map((option, i) => _objectSpread(_objectSpread({}, option), {}, {
+      disabled: i % 2 === 0
+    }))
+  }
+};
+
+/**
+ * Search is enabled by default when there are 5 or more options.
+ */
+export var AutoSearchable = {
+  args: {
+    options: generateStandardOptions(5),
+    searchable: "auto"
+  }
+};
+
+/**
+ * Search can be enabled manually by setting `searchable` to `always`.
+ */
+export var ManualSearchable = {
+  args: {
+    options: generateStandardOptions(4),
+    searchable: "always"
+  }
+};

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

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

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

@@ -0,0 +1,25 @@
+import { FC, LiHTMLAttributes, ReactNode } from "react";
+export type CustomSelectOption = LiHTMLAttributes<HTMLLIElement> & {
+    value: string;
+    label: ReactNode;
+    text?: string;
+    disabled?: boolean;
+};
+export type Props = {
+    searchable?: "auto" | "always" | "never";
+    name: string;
+    options: CustomSelectOption[];
+    onSelect: (value: string) => void;
+    onSearch?: (value: string) => void;
+    onClose: () => void;
+    header?: ReactNode;
+    toggleId: string;
+};
+export declare const adjustDropdownHeightBelow: (dropdown: HTMLUListElement) => void;
+export declare const adjustDropdownHeightAbove: (dropdown: HTMLUListElement, search: HTMLInputElement | null) => void;
+export declare const dropdownIsAbove: (dropdown: HTMLUListElement) => boolean;
+export declare const adjustDropdownHeight: (dropdown: HTMLUListElement | null, search: HTMLInputElement | null) => void;
+export declare const getNearestParentsZIndex: (element: HTMLElement | null) => string;
+export declare const getOptionText: (option: CustomSelectOption) => string;
+declare const CustomSelectDropdown: FC<Props>;
+export default CustomSelectDropdown;

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

@@ -0,0 +1,285 @@
+import _pt from "prop-types";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import classnames from "classnames";
+import { useListener } from "../../../hooks";
+import SearchBox from "../../SearchBox";
+var DROPDOWN_MAX_HEIGHT = 16 * 30; // 30rem with base 16px
+var DROPDOWN_MARGIN = 20;
+export var adjustDropdownHeightBelow = dropdown => {
+  var _window$visualViewpor;
+  var dropdownRect = dropdown.getBoundingClientRect();
+  var dropdownHeight = dropdown.offsetHeight;
+  var viewportHeight = ((_window$visualViewpor = window.visualViewport) === null || _window$visualViewpor === void 0 ? void 0 : _window$visualViewpor.height) || window.innerHeight;
+
+  // If the dropdown is cut off at the bottom of the viewport
+  // adjust the height to fit within the viewport minus fixed margin.
+  // This usually becomes an issue when the dropdown is at the bottom of the viewport or screen getting smaller.
+  if (dropdownRect.bottom >= viewportHeight) {
+    var _adjustedHeight = dropdownHeight - dropdownRect.bottom + viewportHeight - DROPDOWN_MARGIN;
+    dropdown.style.height = "".concat(_adjustedHeight, "px");
+    dropdown.style.maxHeight = "".concat(_adjustedHeight, "px");
+    return;
+  }
+
+  // If the dropdown does not have overflow, the dropdown should fit its content.
+  var hasOverflow = dropdown.scrollHeight > dropdown.clientHeight;
+  if (!hasOverflow) {
+    dropdown.style.height = "auto";
+    dropdown.style.maxHeight = "";
+    return;
+  }
+
+  // If the dropdown is not cut off at the bottom of the viewport
+  // adjust the height of the dropdown so that its bottom edge is 20px from the bottom of the viewport
+  // until the dropdown max height is reached.
+  var adjustedHeight = Math.min(viewportHeight - dropdownRect.top - DROPDOWN_MARGIN, DROPDOWN_MAX_HEIGHT);
+  dropdown.style.height = "".concat(adjustedHeight, "px");
+  dropdown.style.maxHeight = "".concat(adjustedHeight, "px");
+};
+export var adjustDropdownHeightAbove = (dropdown, search) => {
+  // The search height is subtracted (if necessary) so that no options will be hidden behind the search input.
+  var searchRect = search === null || search === void 0 ? void 0 : search.getBoundingClientRect();
+  var searchHeight = (searchRect === null || searchRect === void 0 ? void 0 : searchRect.height) || 0;
+  var dropdownRect = dropdown.getBoundingClientRect();
+
+  // If the dropdown does not have overflow, do not adjust.
+  var hasOverflow = dropdown.scrollHeight > dropdown.clientHeight;
+  if (!hasOverflow) {
+    dropdown.style.height = "auto";
+    dropdown.style.maxHeight = "";
+    return;
+  }
+
+  // adjust the height of the dropdown so that its top edge is 20px from the top of the viewport.
+  // until the dropdown max height is reached.
+  // unlike the case where the dropdown is bellow the toggle, dropdown.bottom represents the available space above the toggle always.
+  // this makes the calculation simpler since we only need to work with dropdown.bottom regardless if the element is cut off or not.
+  var adjustedHeight = Math.min(dropdownRect.bottom - searchHeight - DROPDOWN_MARGIN, DROPDOWN_MAX_HEIGHT);
+  dropdown.style.height = "".concat(adjustedHeight, "px");
+  dropdown.style.maxHeight = "".concat(adjustedHeight, "px");
+};
+export var dropdownIsAbove = dropdown => {
+  var toggle = document.querySelector(".p-custom-select__toggle");
+  var dropdownRect = dropdown.getBoundingClientRect();
+  var toggleRect = toggle.getBoundingClientRect();
+  return toggleRect.top >= dropdownRect.bottom;
+};
+export var adjustDropdownHeight = (dropdown, search) => {
+  if (!dropdown) {
+    return;
+  }
+  if (dropdownIsAbove(dropdown)) {
+    adjustDropdownHeightAbove(dropdown, search);
+    return;
+  }
+  adjustDropdownHeightBelow(dropdown);
+};
+export var getNearestParentsZIndex = element => {
+  if (!document.defaultView || !element) {
+    return "0";
+  }
+  var zIndex = document.defaultView.getComputedStyle(element, null).getPropertyValue("z-index");
+  if (!element.parentElement) {
+    return zIndex;
+  }
+  if (zIndex === "auto" || zIndex === "0" || zIndex === "") {
+    return getNearestParentsZIndex(element.parentElement);
+  }
+  return zIndex;
+};
+export var getOptionText = option => {
+  if (option.text) {
+    return option.text;
+  }
+  if (typeof option.label === "string") {
+    return option.label;
+  }
+  throw new Error("CustomSelect: options must have a string label or a text property");
+};
+var CustomSelectDropdown = _ref => {
+  var {
+    searchable,
+    name,
+    options,
+    onSelect,
+    onSearch,
+    onClose,
+    header,
+    toggleId
+  } = _ref;
+  var [search, setSearch] = useState("");
+  // track highlighted option index for keyboard actions
+  var [highlightedOptionIndex, setHighlightedOptionIndex] = useState(0);
+  // use ref to keep a reference to all option HTML elements so we do not need to make DOM calls later for scrolling
+  var optionsRef = useRef([]);
+  var dropdownRef = useRef(null);
+  var searchRef = useRef(null);
+  var dropdownListRef = useRef(null);
+  var isSearchable = searchable !== "never" && options.length > 1 && (searchable === "always" || searchable === "auto" && options.length >= 5);
+  useEffect(() => {
+    if (dropdownRef.current) {
+      var _toggle$getBoundingCl, _toggle$getBoundingCl2;
+      var toggle = document.getElementById(toggleId);
+
+      // align width with wrapper toggle width
+      var toggleWidth = (_toggle$getBoundingCl = toggle === null || toggle === void 0 || (_toggle$getBoundingCl2 = toggle.getBoundingClientRect()) === null || _toggle$getBoundingCl2 === void 0 ? void 0 : _toggle$getBoundingCl2.width) !== null && _toggle$getBoundingCl !== void 0 ? _toggle$getBoundingCl : 0;
+      dropdownRef.current.style.setProperty("min-width", "".concat(toggleWidth, "px"));
+
+      // align z-index: when we are in a modal context, we want the dropdown to be above the modal
+      // apply the nearest parents z-index + 1
+      var zIndex = getNearestParentsZIndex(toggle);
+      if (parseInt(zIndex) > 0) {
+        var _dropdownRef$current$;
+        (_dropdownRef$current$ = dropdownRef.current.parentElement) === null || _dropdownRef$current$ === void 0 || _dropdownRef$current$.style.setProperty("z-index", zIndex + 1);
+      }
+    }
+    setTimeout(() => {
+      var _dropdownRef$current;
+      if (isSearchable) {
+        var _searchRef$current;
+        (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 || _searchRef$current.focus();
+        return;
+      }
+      (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 || _dropdownRef$current.focus();
+    }, 100);
+  }, [isSearchable, toggleId]);
+  var handleResize = () => {
+    adjustDropdownHeight(dropdownListRef.current, searchRef.current);
+  };
+  useLayoutEffect(handleResize, []);
+  useListener(window, handleResize, "resize");
+
+  // track selected index from key board action and scroll into view if needed
+  useEffect(() => {
+    var _optionsRef$current$h;
+    (_optionsRef$current$h = optionsRef.current[highlightedOptionIndex]) === null || _optionsRef$current$h === void 0 || _optionsRef$current$h.scrollIntoView({
+      block: "nearest",
+      inline: "nearest"
+    });
+  }, [highlightedOptionIndex]);
+  var filteredOptions = onSearch ? options : options === null || options === void 0 ? void 0 : options.filter(option => {
+    if (!search || option.disabled) return true;
+    var searchText = getOptionText(option) || option.value;
+    return searchText.toLowerCase().includes(search);
+  });
+  var getNextOptionIndex = (goingUp, prevIndex) => {
+    var increment = goingUp ? -1 : 1;
+    var currIndex = prevIndex + increment;
+    // skip disabled options for key board action
+    while (filteredOptions[currIndex] && (_filteredOptions$curr = filteredOptions[currIndex]) !== null && _filteredOptions$curr !== void 0 && _filteredOptions$curr.disabled) {
+      var _filteredOptions$curr;
+      currIndex += increment;
+    }
+
+    // consider upper bound for navigating down the list
+    if (increment > 0) {
+      return currIndex < filteredOptions.length ? currIndex : prevIndex;
+    }
+
+    // consider lower bound for navigating up the list
+    return currIndex >= 0 ? currIndex : prevIndex;
+  };
+
+  // handle keyboard actions for navigating the select dropdown
+  var handleKeyDown = event => {
+    var upDownKeys = ["ArrowUp", "ArrowDown"];
+
+    // prevent default browser actions for up, down, enter and escape keys
+    // also prevent any other event listeners from being called up the DOM tree
+    if ([...upDownKeys, "Enter", "Escape", "Tab"].includes(event.key)) {
+      event.preventDefault();
+      event.nativeEvent.stopImmediatePropagation();
+    }
+    if (upDownKeys.includes(event.key)) {
+      setHighlightedOptionIndex(prevIndex => {
+        var goingUp = event.key === "ArrowUp";
+        return getNextOptionIndex(goingUp, prevIndex);
+      });
+    }
+    if (event.key === "Enter" && filteredOptions[highlightedOptionIndex]) {
+      onSelect(filteredOptions[highlightedOptionIndex].value);
+    }
+    if (event.key === "Escape" || event.key === "Tab") {
+      onClose();
+    }
+  };
+  var handleSearch = value => {
+    setSearch(value.toLowerCase());
+    // reset selected index when search text changes
+    setHighlightedOptionIndex(0);
+    optionsRef.current = [];
+    if (onSearch) {
+      onSearch(value);
+    }
+  };
+  var handleSelect = option => {
+    if (option.disabled) {
+      return;
+    }
+    onSelect(option.value);
+  };
+  var optionItems = filteredOptions.map((option, idx) => {
+    return /*#__PURE__*/React.createElement("li", {
+      key: "".concat(option.value, "-").concat(idx),
+      onClick: () => handleSelect(option),
+      className: classnames("p-list__item", "p-custom-select__option", "u-truncate", {
+        disabled: option.disabled,
+        highlight: idx === highlightedOptionIndex && !option.disabled
+      })
+      // adding option elements to a ref array makes it easier to scroll the element later
+      // else we'd have to make a DOM call to find the element based on some identifier
+      ,
+      ref: el => {
+        if (!el) return;
+        optionsRef.current[idx] = el;
+      },
+      role: "option",
+      onMouseMove: () => setHighlightedOptionIndex(idx)
+    }, /*#__PURE__*/React.createElement("span", {
+      className: classnames({
+        "u-text--muted": option.disabled
+      })
+    }, option.label));
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "p-custom-select__dropdown u-no-padding",
+    role: "combobox",
+    onKeyDownCapture: handleKeyDown
+    // allow focus on the dropdown so that keyboard actions can be captured
+    ,
+    tabIndex: -1,
+    ref: dropdownRef,
+    onMouseDown: e => {
+      // when custom select is used in a modal, which is a portal, a dropdown click
+      // should not close the modal itself, so we stop the event right here.
+      e.stopPropagation();
+    }
+  }, isSearchable && /*#__PURE__*/React.createElement("div", {
+    className: "p-custom-select__search u-no-padding--bottom"
+  }, /*#__PURE__*/React.createElement(SearchBox, {
+    ref: searchRef,
+    id: "select-search-".concat(name),
+    name: "select-search-".concat(name),
+    type: "text",
+    "aria-label": "Search for ".concat(name),
+    className: "u-no-margin--bottom",
+    onChange: handleSearch,
+    value: search,
+    autocomplete: "off"
+  })), header, /*#__PURE__*/React.createElement("ul", {
+    className: "p-list u-no-margin--bottom",
+    role: "listbox",
+    ref: dropdownListRef
+  }, optionItems));
+};
+CustomSelectDropdown.propTypes = {
+  searchable: _pt.oneOf(["auto", "always", "never"]),
+  name: _pt.string.isRequired,
+  options: _pt.array.isRequired,
+  onSelect: _pt.func.isRequired,
+  onSearch: _pt.func,
+  onClose: _pt.func.isRequired,
+  header: _pt.node,
+  toggleId: _pt.string.isRequired
+};
+export default CustomSelectDropdown;

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

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

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

@@ -0,0 +1,2 @@
+export { default, getOptionText } from "./CustomSelectDropdown";
+export type { CustomSelectOption, Props as CustomSelectDropdownProps, } from "./CustomSelectDropdown";

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

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

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

@@ -0,0 +1,3 @@
+export { default } from "./CustomSelect";
+export type { Props as CustomSelectProps } from "./CustomSelect";
+export type { CustomSelectDropdownProps, CustomSelectOption, } from "./CustomSelectDropdown";

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

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

package/dist/esm/components/MultiSelect/MultiSelect.scss

@@ -56,6 +56,7 @@ $dropdown-max-height: 20rem;
   list-style: none;
   margin-bottom: $sph--x-small;
   margin-left: 0;
+  margin-top: $sph--x-small;
   padding-left: 0;
 }
 

package/dist/esm/index.d.ts

@@ -67,6 +67,7 @@ export { default as Textarea } from "./components/Textarea";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
+export { default as CustomSelect } from "./components/CustomSelect";
 export type { AccordionProps } from "./components/Accordion";
 export type { ActionButtonProps } from "./components/ActionButton";
 export type { ArticlePaginationProps } from "./components/ArticlePagination";
@@ -131,6 +132,7 @@ export type { TabsProps } from "./components/Tabs";
 export type { TextareaProps } from "./components/Textarea";
 export type { TooltipProps } from "./components/Tooltip";
 export type { TablePaginationProps } from "./components/TablePagination";
+export type { CustomSelectProps, CustomSelectDropdownProps, CustomSelectOption, } from "./components/CustomSelect";
 export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, useThrottle, useWindowFitment, } from "./hooks";
 export type { WindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";

package/dist/esm/index.js

@@ -67,6 +67,7 @@ export { default as Textarea } from "./components/Textarea";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
+export { default as CustomSelect } from "./components/CustomSelect";
 export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, useThrottle, useWindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";
 export { Theme } from "./enums";

package/dist/index.d.ts

@@ -67,6 +67,7 @@ export { default as Textarea } from "./components/Textarea";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
+export { default as CustomSelect } from "./components/CustomSelect";
 export type { AccordionProps } from "./components/Accordion";
 export type { ActionButtonProps } from "./components/ActionButton";
 export type { ArticlePaginationProps } from "./components/ArticlePagination";
@@ -131,6 +132,7 @@ export type { TabsProps } from "./components/Tabs";
 export type { TextareaProps } from "./components/Textarea";
 export type { TooltipProps } from "./components/Tooltip";
 export type { TablePaginationProps } from "./components/TablePagination";
+export type { CustomSelectProps, CustomSelectDropdownProps, CustomSelectOption, } from "./components/CustomSelect";
 export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, useThrottle, useWindowFitment, } from "./hooks";
 export type { WindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";

package/dist/index.js

@@ -84,6 +84,7 @@ var _exportNames = {
   Tooltip: true,
   TablePagination: true,
   TablePaginationControls: true,
+  CustomSelect: true,
   useOnClickOutside: true,
   useClickOutside: true,
   useId: true,
@@ -235,6 +236,12 @@ Object.defineProperty(exports, "ContextualMenu", {
     return _ContextualMenu.default;
   }
 });
+Object.defineProperty(exports, "CustomSelect", {
+  enumerable: true,
+  get: function () {
+    return _CustomSelect.default;
+  }
+});
 Object.defineProperty(exports, "DoughnutChart", {
   enumerable: true,
   get: function () {
@@ -729,6 +736,7 @@ var _Textarea = _interopRequireDefault(require("./components/Textarea"));
 var _Tooltip = _interopRequireDefault(require("./components/Tooltip"));
 var _TablePagination = _interopRequireDefault(require("./components/TablePagination"));
 var _TablePaginationControls = _interopRequireDefault(require("./components/TablePagination/TablePaginationControls"));
+var _CustomSelect = _interopRequireDefault(require("./components/CustomSelect"));
 var _hooks = require("./hooks");
 var _utils = require("./utils");
 var _enums = require("./enums");

package/package.json

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