@canonical/react-components 1.7.2 → 1.8.0

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

@@ -0,0 +1,300 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getOptionText = exports.getNearestParentsZIndex = exports.dropdownIsAbove = exports.default = exports.adjustDropdownHeightBelow = exports.adjustDropdownHeightAbove = exports.adjustDropdownHeight = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("../../../hooks");
+var _SearchBox = _interopRequireDefault(require("../../SearchBox"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DROPDOWN_MAX_HEIGHT = 16 * 30; // 30rem with base 16px
+const DROPDOWN_MARGIN = 20;
+const adjustDropdownHeightBelow = dropdown => {
+  var _window$visualViewpor;
+  const dropdownRect = dropdown.getBoundingClientRect();
+  const dropdownHeight = dropdown.offsetHeight;
+  const 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) {
+    const 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.
+  const 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.
+  const adjustedHeight = Math.min(viewportHeight - dropdownRect.top - DROPDOWN_MARGIN, DROPDOWN_MAX_HEIGHT);
+  dropdown.style.height = "".concat(adjustedHeight, "px");
+  dropdown.style.maxHeight = "".concat(adjustedHeight, "px");
+};
+exports.adjustDropdownHeightBelow = adjustDropdownHeightBelow;
+const adjustDropdownHeightAbove = (dropdown, search) => {
+  // The search height is subtracted (if necessary) so that no options will be hidden behind the search input.
+  const searchRect = search === null || search === void 0 ? void 0 : search.getBoundingClientRect();
+  const searchHeight = (searchRect === null || searchRect === void 0 ? void 0 : searchRect.height) || 0;
+  const dropdownRect = dropdown.getBoundingClientRect();
+
+  // If the dropdown does not have overflow, do not adjust.
+  const 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.
+  const adjustedHeight = Math.min(dropdownRect.bottom - searchHeight - DROPDOWN_MARGIN, DROPDOWN_MAX_HEIGHT);
+  dropdown.style.height = "".concat(adjustedHeight, "px");
+  dropdown.style.maxHeight = "".concat(adjustedHeight, "px");
+};
+exports.adjustDropdownHeightAbove = adjustDropdownHeightAbove;
+const dropdownIsAbove = dropdown => {
+  const toggle = document.querySelector(".p-custom-select__toggle");
+  const dropdownRect = dropdown.getBoundingClientRect();
+  const toggleRect = toggle.getBoundingClientRect();
+  return toggleRect.top >= dropdownRect.bottom;
+};
+exports.dropdownIsAbove = dropdownIsAbove;
+const adjustDropdownHeight = (dropdown, search) => {
+  if (!dropdown) {
+    return;
+  }
+  if (dropdownIsAbove(dropdown)) {
+    adjustDropdownHeightAbove(dropdown, search);
+    return;
+  }
+  adjustDropdownHeightBelow(dropdown);
+};
+exports.adjustDropdownHeight = adjustDropdownHeight;
+const getNearestParentsZIndex = element => {
+  if (!document.defaultView || !element) {
+    return "0";
+  }
+  const 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;
+};
+exports.getNearestParentsZIndex = getNearestParentsZIndex;
+const 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");
+};
+exports.getOptionText = getOptionText;
+const CustomSelectDropdown = _ref => {
+  let {
+    searchable,
+    name,
+    options,
+    onSelect,
+    onSearch,
+    onClose,
+    header,
+    toggleId
+  } = _ref;
+  const [search, setSearch] = (0, _react.useState)("");
+  // track highlighted option index for keyboard actions
+  const [highlightedOptionIndex, setHighlightedOptionIndex] = (0, _react.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
+  const optionsRef = (0, _react.useRef)([]);
+  const dropdownRef = (0, _react.useRef)(null);
+  const searchRef = (0, _react.useRef)(null);
+  const dropdownListRef = (0, _react.useRef)(null);
+  const isSearchable = searchable !== "never" && options.length > 1 && (searchable === "always" || searchable === "auto" && options.length >= 5);
+  (0, _react.useEffect)(() => {
+    if (dropdownRef.current) {
+      var _toggle$getBoundingCl, _toggle$getBoundingCl2;
+      const toggle = document.getElementById(toggleId);
+
+      // align width with wrapper toggle width
+      const 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
+      const 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]);
+  const handleResize = () => {
+    adjustDropdownHeight(dropdownListRef.current, searchRef.current);
+  };
+  (0, _react.useLayoutEffect)(handleResize, []);
+  (0, _hooks.useListener)(window, handleResize, "resize");
+
+  // track selected index from key board action and scroll into view if needed
+  (0, _react.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]);
+  const filteredOptions = onSearch ? options : options === null || options === void 0 ? void 0 : options.filter(option => {
+    if (!search || option.disabled) return true;
+    const searchText = getOptionText(option) || option.value;
+    return searchText.toLowerCase().includes(search);
+  });
+  const getNextOptionIndex = (goingUp, prevIndex) => {
+    const increment = goingUp ? -1 : 1;
+    let 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
+  const handleKeyDown = event => {
+    const 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 => {
+        const 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();
+    }
+  };
+  const handleSearch = value => {
+    setSearch(value.toLowerCase());
+    // reset selected index when search text changes
+    setHighlightedOptionIndex(0);
+    optionsRef.current = [];
+    if (onSearch) {
+      onSearch(value);
+    }
+  };
+  const handleSelect = option => {
+    if (option.disabled) {
+      return;
+    }
+    onSelect(option.value);
+  };
+  const optionItems = filteredOptions.map((option, idx) => {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: "".concat(option.value, "-").concat(idx),
+      onClick: () => handleSelect(option),
+      className: (0, _classnames.default)("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.default.createElement("span", {
+      className: (0, _classnames.default)({
+        "u-text--muted": option.disabled
+      })
+    }, option.label));
+  });
+  return /*#__PURE__*/_react.default.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.default.createElement("div", {
+    className: "p-custom-select__search u-no-padding--bottom"
+  }, /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
+    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.default.createElement("ul", {
+    className: "p-list u-no-margin--bottom",
+    role: "listbox",
+    ref: dropdownListRef
+  }, optionItems));
+};
+CustomSelectDropdown.propTypes = {
+  searchable: _propTypes.default.oneOf(["auto", "always", "never"]),
+  name: _propTypes.default.string.isRequired,
+  options: _propTypes.default.array.isRequired,
+  onSelect: _propTypes.default.func.isRequired,
+  onSearch: _propTypes.default.func,
+  onClose: _propTypes.default.func.isRequired,
+  header: _propTypes.default.node,
+  toggleId: _propTypes.default.string.isRequired
+};
+var _default = exports.default = CustomSelectDropdown;

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _CustomSelectDropdown.default;
+  }
+});
+Object.defineProperty(exports, "getOptionText", {
+  enumerable: true,
+  get: function () {
+    return _CustomSelectDropdown.getOptionText;
+  }
+});
+var _CustomSelectDropdown = _interopRequireWildcard(require("./CustomSelectDropdown"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _CustomSelect.default;
+  }
+});
+var _CustomSelect = _interopRequireDefault(require("./CustomSelect"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/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/components/CustomSelect/CustomSelect.d.ts

@@ -0,0 +1,36 @@
+import type { MutableRefObject, ReactNode } from "react";
+import { ClassName, PropsWithSpread } from "../../types";
+import { FieldProps } from "../Field";
+import { Position } from "../ContextualMenu";
+import { CustomSelectOption } from "./CustomSelectDropdown";
+import "./CustomSelect.scss";
+export type SelectRef = MutableRefObject<{
+    open: () => void;
+    close: () => void;
+    isOpen: boolean;
+    focus: () => void;
+} | undefined>;
+export type Props = PropsWithSpread<FieldProps, {
+    value: string;
+    options: CustomSelectOption[];
+    onChange: (value: string) => void;
+    onSearch?: (value: string) => void;
+    id?: string | null;
+    name?: string;
+    disabled?: boolean;
+    wrapperClassName?: ClassName;
+    toggleClassName?: ClassName;
+    dropdownClassName?: string;
+    searchable?: "auto" | "always" | "never";
+    takeFocus?: boolean;
+    header?: ReactNode;
+    selectRef?: SelectRef;
+    initialPosition?: Position;
+}>;
+/**
+ * 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 select component with customisable options and a dropdown menu, whilst maintaining accessibility and usability.
+ */
+declare const CustomSelect: ({ value, options, onChange, onSearch, id, name, disabled, success, error, help, wrapperClassName, toggleClassName, dropdownClassName, searchable, takeFocus, header, selectRef, initialPosition, ...fieldProps }: Props) => JSX.Element;
+export default CustomSelect;

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

@@ -0,0 +1,139 @@
+var _excluded = ["value", "options", "onChange", "onSearch", "id", "name", "disabled", "success", "error", "help", "wrapperClassName", "toggleClassName", "dropdownClassName", "searchable", "takeFocus", "header", "selectRef", "initialPosition"];
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React, { useEffect, useId, useImperativeHandle, useState } from "react";
+import Field from "../Field";
+import ContextualMenu from "../ContextualMenu";
+import { useListener } from "../../hooks";
+import CustomSelectDropdown, { getOptionText } from "./CustomSelectDropdown";
+import "./CustomSelect.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 select component with customisable options and a dropdown menu, whilst maintaining accessibility and usability.
+ */
+var CustomSelect = _ref => {
+  var {
+      value,
+      options,
+      onChange,
+      onSearch,
+      id,
+      name,
+      disabled,
+      success,
+      error,
+      help,
+      wrapperClassName,
+      toggleClassName,
+      dropdownClassName,
+      searchable = "auto",
+      takeFocus,
+      header,
+      selectRef,
+      initialPosition = "left"
+    } = _ref,
+    fieldProps = _objectWithoutProperties(_ref, _excluded);
+  var [isOpen, setIsOpen] = useState(false);
+  var validationId = useId();
+  var defaultSelectId = useId();
+  var selectId = id || defaultSelectId;
+  var helpId = useId();
+  var hasError = !!error;
+
+  // Close the dropdown when the browser tab is hidden
+  var onBrowserTabHidden = () => {
+    if (document.visibilityState === "hidden") {
+      setIsOpen(false);
+    }
+  };
+  useListener(window, onBrowserTabHidden, "visibilitychange");
+
+  // Close the dropdown when the browser window loses focus
+  useListener(window, () => setIsOpen(false), "blur");
+  useImperativeHandle(selectRef, () => ({
+    open: () => {
+      var _document$getElementB;
+      setIsOpen(true);
+      (_document$getElementB = document.getElementById(selectId)) === null || _document$getElementB === void 0 || _document$getElementB.focus();
+    },
+    focus: () => {
+      var _document$getElementB2;
+      return (_document$getElementB2 = document.getElementById(selectId)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.focus();
+    },
+    close: setIsOpen.bind(null, false),
+    isOpen: isOpen
+  }), [isOpen, selectId]);
+  useEffect(() => {
+    if (takeFocus) {
+      var toggleButton = document.getElementById(selectId);
+      toggleButton === null || toggleButton === void 0 || toggleButton.focus();
+    }
+  }, [takeFocus, selectId]);
+  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");
+  var handleSelect = value => {
+    var _document$getElementB3;
+    (_document$getElementB3 = document.getElementById(selectId)) === null || _document$getElementB3 === void 0 || _document$getElementB3.focus();
+    setIsOpen(false);
+    onChange(value);
+  };
+  return /*#__PURE__*/React.createElement(Field, _extends({}, fieldProps, {
+    className: classNames("p-custom-select", wrapperClassName),
+    error: error,
+    forId: selectId,
+    help: help,
+    helpId: helpId,
+    isSelect: true,
+    success: success,
+    validationId: validationId
+  }), /*#__PURE__*/React.createElement(ContextualMenu, {
+    "aria-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
+    "aria-errormessage": hasError ? validationId : undefined,
+    "aria-invalid": hasError,
+    toggleClassName: classNames("p-custom-select__toggle", "p-form-validation__input", toggleClassName, {
+      active: isOpen
+    }),
+    toggleLabel: toggleLabel,
+    visible: isOpen,
+    onToggleMenu: open => {
+      // Handle syncing the state when toggling the menu from within the
+      // contextual menu component e.g. when clicking outside.
+      if (open !== isOpen) {
+        setIsOpen(open);
+      }
+    },
+    toggleProps: {
+      id: selectId,
+      disabled: disabled,
+      // tabIndex is set to -1 when disabled to prevent keyboard navigation to the select toggle
+      tabIndex: disabled ? -1 : 0
+    },
+    className: "p-custom-select__wrapper",
+    dropdownClassName: dropdownClassName,
+    style: {
+      width: "100%"
+    },
+    autoAdjust: true,
+    position: initialPosition
+  }, close => /*#__PURE__*/React.createElement(CustomSelectDropdown, {
+    searchable: searchable,
+    onSearch: onSearch,
+    name: name || "",
+    options: options || [],
+    onSelect: handleSelect,
+    onClose: () => {
+      var _document$getElementB4;
+      // When pressing ESC to close the dropdown, we keep focus on the toggle button
+      close();
+      (_document$getElementB4 = document.getElementById(selectId)) === null || _document$getElementB4 === void 0 || _document$getElementB4.focus();
+    },
+    header: header,
+    toggleId: selectId
+  })));
+};
+export default CustomSelect;

package/dist/esm/components/CustomSelect/CustomSelect.scss

@@ -0,0 +1,82 @@
+@use "sass:map";
+@import "vanilla-framework";
+@include vf-b-placeholders; // Vanilla base placeholders to extend from
+
+.p-custom-select {
+  @include vf-b-forms;
+
+  // style copied directly from vanilla-framework for the select element
+  .p-custom-select__toggle {
+    @include vf-icon-chevron-themed;
+    @extend %vf-input-elements;
+
+    // stylelint-disable property-no-vendor-prefix
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    // stylelint-enable property-no-vendor-prefix
+    background-position: right calc(map-get($grid-margin-widths, default) / 2)
+      center;
+    background-repeat: no-repeat;
+    background-size: map-get($icon-sizes, default);
+    border-top: none;
+    box-shadow: none;
+    min-height: map-get($line-heights, default-text);
+    padding-right: calc($default-icon-size + 2 * $sph--small);
+    text-indent: 0.01px;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    // this emulates the highlight effect when the select is focused
+    // without crowding the content with a border
+    &.active,
+    &:focus {
+      box-shadow: inset 0 0 0 3px $color-focus;
+    }
+
+    .toggle-label {
+      display: flow-root;
+      text-align: left;
+      width: 100%;
+    }
+  }
+}
+
+.p-custom-select__dropdown {
+  background-color: $colors--theme--background-alt;
+  box-shadow: $box-shadow--deep;
+  outline: none;
+  position: relative;
+
+  .p-custom-select__option {
+    background-color: $colors--theme--background-alt;
+    font-weight: $font-weight-regular-text;
+    padding: $sph--x-small $sph--small;
+
+    &.highlight {
+      // browser default styling for options when hovered
+      background-color: #06c;
+      cursor: pointer;
+
+      // make sure that if an option is highlighted, its text is white for good contrast
+      * {
+        color: white;
+      }
+    }
+  }
+
+  .p-custom-select__search {
+    background-color: $colors--theme--background-alt;
+    padding: $sph--x-small;
+    padding-bottom: $sph--small;
+    position: sticky;
+    top: 0;
+  }
+
+  .p-list {
+    max-height: 30rem;
+    overflow: auto;
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from "@storybook/react/*";
+import CustomSelect from "./CustomSelect";
+import { ComponentProps } from "react";
+type StoryProps = ComponentProps<typeof CustomSelect>;
+declare const meta: Meta<StoryProps>;
+export default meta;
+type Story = StoryObj<StoryProps>;
+/**
+ * If `label` is of `string` type. You do not have to do anything extra to render it.
+ */
+export declare const StandardOptions: Story;
+/**
+ * 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 declare const CustomOptions: Story;
+/**
+ * For each option, if `disabled` is set to `true`, the option will be disabled.
+ */
+export declare const DisabledOptions: Story;
+/**
+ * Search is enabled by default when there are 5 or more options.
+ */
+export declare const AutoSearchable: Story;
+/**
+ * Search can be enabled manually by setting `searchable` to `always`.
+ */
+export declare const ManualSearchable: Story;