@canonical/react-components 1.3.0 → 1.3.1

package/dist-esm/components/RadioInput/RadioInput.js

@@ -0,0 +1,22 @@
+var _excluded = ["label"];
+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 React from "react";
+import CheckableInput from "../CheckboxInput/CheckableInput";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Radio input](https://docs.vanillaframework.io/base/forms#radio-button).
+ *
+ * Use radio buttons to select one of the given set of options.
+ */
+var RadioInput = _ref => {
+  var {
+      label
+    } = _ref,
+    radioProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(CheckableInput, _extends({
+    inputType: "radio",
+    label: label
+  }, radioProps));
+};
+export default RadioInput;

package/dist-esm/components/RadioInput/index.js

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

package/dist-esm/components/Row/Row.js

@@ -0,0 +1,22 @@
+var _excluded = ["children", "className"];
+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 from "react";
+/**
+ * This is a [React](https://reactjs.org/) component for use within the Vanilla [Grid](https://docs.vanillaframework.io/patterns/grid/).
+ *
+ * Vanilla has a responsive grid using a combination of rows and columns.
+ */
+var Row = _ref => {
+  var {
+      children,
+      className
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(className, "row")
+  }, props), children);
+};
+export default Row;

package/dist-esm/components/Row/index.js

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

package/dist-esm/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.js

@@ -0,0 +1,107 @@
+import _pt from "prop-types";
+import React, { useEffect, useRef, useState } from "react";
+import Chip from "../../Chip";
+import { overflowingChipsCount, isChipInArray } from "../utils";
+import { highlightSubString } from "../../../utils";
+var FilterPanelSection = _ref => {
+  var {
+    data,
+    searchData,
+    searchTerm = "",
+    sectionHidden,
+    toggleSelected
+  } = _ref;
+  var {
+    chips,
+    heading
+  } = data;
+  var [overflowCounter, setOverflowCounter] = useState(0);
+  var [expanded, setExpanded] = useState(false);
+  var chipWrapper = useRef(null);
+  var handleChipClick = chip => {
+    toggleSelected(chip);
+  };
+
+  // If the offsetTop is more than double height of a single chip, consider it
+  // overflowing
+  var updateFlowCount = function updateFlowCount() {
+    var _chipWrapper$current;
+    var chips = chipWrapper === null || chipWrapper === void 0 || (_chipWrapper$current = chipWrapper.current) === null || _chipWrapper$current === void 0 ? void 0 : _chipWrapper$current.querySelectorAll(".p-chip");
+    var overflowCount = overflowingChipsCount(chips, 2);
+    setOverflowCounter(overflowCount);
+  };
+
+  // Check if search term characters matches any characters in panel heading
+  var searchTermInHeading = highlightSubString(heading, searchTerm).match;
+
+  // Serialise chip values into string so it can be interrogated with subString
+  var chipValues = [];
+  Object.entries(chips).forEach(chipValue => {
+    chipValues.push(chipValue[1].value);
+  });
+
+  // Search chips for character match with search term
+  var searchTermInChips = highlightSubString(chipValues.toString(), searchTerm).match;
+  var panelSectionVisible = searchTermInHeading || searchTermInChips || searchTerm === "";
+
+  // Update overflow count when component is resized
+  useEffect(() => {
+    var resizeObserverSupported = typeof ResizeObserver !== "undefined";
+    var wrapper = chipWrapper === null || chipWrapper === void 0 ? void 0 : chipWrapper.current;
+    var wrapperWidthObserver;
+    if (resizeObserverSupported && panelSectionVisible) {
+      wrapperWidthObserver = new ResizeObserver(() => {
+        updateFlowCount();
+      });
+      wrapperWidthObserver.observe(wrapper);
+    } else {
+      updateFlowCount();
+    }
+    return () => {
+      var _wrapperWidthObserver;
+      resizeObserverSupported && ((_wrapperWidthObserver = wrapperWidthObserver) === null || _wrapperWidthObserver === void 0 ? void 0 : _wrapperWidthObserver.disconnect());
+    };
+  }, [panelSectionVisible]);
+
+  // When overflow counter is clicked, all chips are shown
+  var showAllChips = () => {
+    setExpanded(true);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, panelSectionVisible && /*#__PURE__*/React.createElement("div", {
+    className: "p-filter-panel-section"
+  }, heading && chips.length > 0 && /*#__PURE__*/React.createElement("h3", {
+    className: "p-filter-panel-section__heading",
+    dangerouslySetInnerHTML: {
+      __html: highlightSubString(heading, searchTerm).text
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "p-filter-panel-section__chips",
+    "aria-expanded": expanded,
+    ref: chipWrapper
+  }, chips === null || chips === void 0 ? void 0 : chips.map(chip => {
+    // If search term has been added to input, only matching chips
+    // should display
+    var searchTermInChip = highlightSubString(chip.value, searchTerm).match;
+    var chipVisible = searchTermInChip || searchTerm === "" || highlightSubString(heading, searchTerm).match;
+    return chipVisible && !sectionHidden && /*#__PURE__*/React.createElement(Chip, {
+      key: "".concat(chip.lead, "+").concat(chip.value),
+      lead: chip.lead,
+      value: chip.value,
+      selected: isChipInArray(chip, searchData),
+      subString: searchTerm,
+      onClick: () => handleChipClick(chip)
+    });
+  }), overflowCounter > 0 && !expanded && /*#__PURE__*/React.createElement("span", {
+    className: "p-filter-panel-section__counter",
+    onClick: showAllChips,
+    onKeyPress: showAllChips,
+    tabIndex: 0
+  }, "+", overflowCounter))));
+};
+FilterPanelSection.propTypes = {
+  searchData: _pt.array.isRequired,
+  searchTerm: _pt.string.isRequired,
+  sectionHidden: _pt.bool,
+  toggleSelected: _pt.func.isRequired
+};
+export default FilterPanelSection;

package/dist-esm/components/SearchAndFilter/FilterPanelSection/index.js

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

package/dist-esm/components/SearchAndFilter/SearchAndFilter.js

@@ -0,0 +1,286 @@
+import _pt from "prop-types";
+var _excluded = ["existingSearchData", "filterPanelData", "returnSearchData", "onPanelToggle", "onExpandChange"];
+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 React, { useState, useEffect, useRef } from "react";
+import FilterPanelSection from "./FilterPanelSection";
+import Chip from "../Chip";
+import { overflowingChipsCount, isChipInArray } from "./utils";
+import { useOnEscapePressed, useWindowFitment } from "../../hooks";
+export var Label = /*#__PURE__*/function (Label) {
+  Label["AddFilter"] = "Add filter";
+  Label["Clear"] = "Clear input";
+  Label["SearchAndFilter"] = "Search and filter";
+  return Label;
+}({});
+/**
+ * This component allows searching and filtering of large datasets.
+ */
+var SearchAndFilter = _ref => {
+  var {
+      existingSearchData = [],
+      filterPanelData,
+      returnSearchData,
+      onPanelToggle = () => {},
+      onExpandChange = () => {}
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var [searchData, setSearchData] = useState(existingSearchData);
+  var [searchTerm, setSearchTerm] = useState("");
+  var [filterPanelHidden, setFilterPanelHidden] = useState(true);
+  var [searchBoxExpanded, setSearchBoxExpanded] = useState(false);
+  var [overflowSearchTermCounter, setOverflowSearchTermCounter] = useState(0);
+  var [searchContainerActive, setSearchContainerActive] = useState(false);
+  var [maxHeight, setMaxHeight] = useState();
+  var searchAndFilterRef = useRef(null);
+  var searchContainerRef = useRef(null);
+  var searchBoxRef = useRef(null);
+  var panel = useRef();
+
+  // Call onPanelToggle when the filterPanelHidden state changes
+  useEffect(onPanelToggle, [onPanelToggle, filterPanelHidden]);
+
+  // Call onExpandChange when the search box is expanded or collapsed
+  useEffect(onExpandChange, [onExpandChange, searchBoxExpanded]);
+
+  // Return searchData to parent component
+  useEffect(() => {
+    var mounted = true;
+    returnSearchData && mounted && returnSearchData(searchData);
+    return () => {
+      mounted = false;
+    };
+  }, [searchData, returnSearchData]);
+  var searchOnChange = searchTerm => {
+    setSearchTerm(searchTerm);
+  };
+
+  // Hide manual input form field when search container is inactive
+  useEffect(() => {
+    var searchContainerClickCheck = e => {
+      var _e$target;
+      var clickInContainer = ((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.closest(".p-search-and-filter")) !== null;
+      setSearchContainerActive(clickInContainer);
+    };
+    document.addEventListener("click", searchContainerClickCheck);
+    return () => {
+      document.removeEventListener("click", searchContainerClickCheck);
+    };
+  }, [searchContainerActive]);
+  var closePanel = () => {
+    setFilterPanelHidden(true);
+  };
+  useOnEscapePressed(() => closePanel());
+
+  // This useEffect sets up listeners so the panel will close if user clicks
+  // anywhere else on the page or hits the escape key
+  useEffect(() => {
+    var mouseDown = e => {
+      var _searchAndFilterRef$c;
+      // Check if click is outside of filter panel
+      if (!(searchAndFilterRef !== null && searchAndFilterRef !== void 0 && (_searchAndFilterRef$c = searchAndFilterRef.current) !== null && _searchAndFilterRef$c !== void 0 && _searchAndFilterRef$c.contains(e.target))) {
+        // If so, close the panel
+        closePanel();
+      }
+    };
+
+    // Add listener on document to capture click events
+    document.addEventListener("mousedown", mouseDown);
+    // return function to be called when unmounted
+    return () => {
+      document.removeEventListener("mousedown", mouseDown);
+    };
+  }, []);
+
+  // Add passed chip to the searchData array
+  var toggleSelected = chip => {
+    var currentSelected = [...searchData];
+    if (!isChipInArray(chip, currentSelected)) {
+      currentSelected.push(chip);
+      setSearchData(currentSelected);
+      setSearchTerm("");
+    } else {
+      var updatedCurrentSelected = currentSelected.filter(currentSelectedChip => {
+        return currentSelectedChip.value !== chip.value;
+      });
+      setSearchData(updatedCurrentSelected);
+    }
+  };
+
+  // Remove passed chip from the searchData array
+  var removeFromSelected = chip => {
+    if (searchData.includes(chip)) {
+      var updatedSelected = searchData.filter(searchDataChip => searchDataChip !== chip);
+      setSearchData(updatedSelected);
+    }
+  };
+
+  // When overflow chips are shown, clicking anywhere outside search area
+  // or clicking on a chip should hide them again
+  useEffect(() => {
+    var hideOverflowChips = e => {
+      if (!e.target.closest(".p-search-and-filter") && e.target.className !== "p-icon--close") {
+        setSearchBoxExpanded(false);
+      }
+    };
+    document.addEventListener("click", e => {
+      hideOverflowChips(e);
+    });
+    return () => {
+      document.removeEventListener("click", e => {
+        hideOverflowChips(e);
+      });
+    };
+  }, []);
+  var handleSubmit = () => {
+    if (searchTerm.trim() !== "") {
+      toggleSelected({
+        value: searchTerm,
+        quoteValue: true
+      });
+      setSearchTerm("");
+    }
+  };
+
+  // If the offsetTop is more than double height of a single chip, consider it
+  // overflowing
+  var updateFlowCount = function updateFlowCount() {
+    var _searchContainerRef$c;
+    var chips = searchContainerRef === null || searchContainerRef === void 0 || (_searchContainerRef$c = searchContainerRef.current) === null || _searchContainerRef$c === void 0 ? void 0 : _searchContainerRef$c.querySelectorAll(".p-chip");
+    var overflowCount = overflowingChipsCount(chips, 1);
+    setOverflowSearchTermCounter(overflowCount);
+  };
+
+  // Watch for container resize and recalculate overflow count accordingly
+  useEffect(() => {
+    var resizeObserverSupported = typeof ResizeObserver !== "undefined";
+    var wrapper = searchContainerRef.current;
+    var wrapperWidthObserver;
+    if (resizeObserverSupported && wrapper) {
+      wrapperWidthObserver = new ResizeObserver(() => {
+        updateFlowCount();
+      });
+      wrapperWidthObserver.observe(wrapper);
+    } else {
+      updateFlowCount();
+    }
+    return () => {
+      var _wrapperWidthObserver;
+      resizeObserverSupported && ((_wrapperWidthObserver = wrapperWidthObserver) === null || _wrapperWidthObserver === void 0 ? void 0 : _wrapperWidthObserver.disconnect());
+    };
+  }, [searchData]);
+  useWindowFitment(panel.current, searchAndFilterRef.current, fitsWindow => setMaxHeight(fitsWindow.fromBottom.spaceBelow - 16), 0, !filterPanelHidden);
+
+  // Add search prompt value to search on Enter key
+  var searchPromptKeyDown = e => {
+    if (e.key === "Enter") {
+      handleSubmit();
+    }
+  };
+  var searchBox = searchBoxRef.current;
+  var searchContainer = searchContainerRef.current;
+  if (!searchBoxExpanded && searchBox && searchContainer && overflowSearchTermCounter === 0) {
+    if (searchBox.offsetTop > searchContainer.offsetHeight) {
+      setSearchBoxExpanded(true);
+    }
+  }
+
+  // If chips or input field contains values, clear 'em out
+  var clearAllSearchTerms = () => {
+    setSearchTerm("");
+  };
+  var placeholder = searchData.length ? Label.AddFilter : Label.SearchAndFilter;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "p-search-and-filter",
+    ref: searchAndFilterRef,
+    onClick: () => filterPanelHidden && setFilterPanelHidden(false)
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "p-search-and-filter__search-container",
+    "aria-expanded": searchBoxExpanded,
+    "data-active": searchContainerActive || searchData.length === 0,
+    "data-empty": searchData.length <= 0,
+    ref: searchContainerRef
+  }, searchTerm !== "" && /*#__PURE__*/React.createElement("button", {
+    "aria-label": Label.Clear,
+    className: "p-search-and-filter__clear",
+    onClick: () => clearAllSearchTerms()
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "p-icon--close"
+  })), Object.values(searchData).map(chip => {
+    return /*#__PURE__*/React.createElement(Chip, {
+      lead: chip.lead,
+      value: chip.value,
+      key: "search-".concat(chip.lead, "+").concat(chip.value),
+      onDismiss: event => {
+        // Prevent filter chip dismissals from bubbling up and triggering the parent onClick handler
+        event.stopPropagation();
+        removeFromSelected(chip);
+      },
+      selected: true,
+      quoteValue: chip.quoteValue
+    });
+  }), /*#__PURE__*/React.createElement("form", {
+    className: "p-search-and-filter__box",
+    onSubmit: e => {
+      e.preventDefault();
+      handleSubmit();
+    },
+    "data-overflowing": searchBoxExpanded,
+    ref: searchBoxRef
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "u-off-screen",
+    htmlFor: "search-and-filter-input"
+  }, searchData.length ? Label.AddFilter : Label.SearchAndFilter), /*#__PURE__*/React.createElement("input", {
+    autoComplete: "off",
+    className: "p-search-and-filter__input",
+    id: "search-and-filter-input",
+    name: "search",
+    onChange: e => searchOnChange(e.target.value),
+    placeholder: placeholder,
+    type: "search",
+    value: searchTerm
+  }), /*#__PURE__*/React.createElement("button", {
+    className: "u-off-screen",
+    type: "submit"
+  }, "Search")), overflowSearchTermCounter > 0 && /*#__PURE__*/React.createElement("span", {
+    className: "p-search-and-filter__selected-count",
+    onClick: () => setSearchBoxExpanded(true),
+    onKeyDown: () => setSearchBoxExpanded(true),
+    role: "button",
+    tabIndex: 0
+  }, "+", overflowSearchTermCounter)), (filterPanelData.length > 0 || searchTerm.length > 0) && /*#__PURE__*/React.createElement("div", {
+    className: "p-search-and-filter__panel",
+    "aria-hidden": filterPanelHidden,
+    ref: panel,
+    style: {
+      maxHeight,
+      minHeight: "5rem",
+      overflowX: "auto"
+    }
+  }, /*#__PURE__*/React.createElement("div", null, searchTerm.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "p-search-and-filter__search-prompt",
+    onClick: () => handleSubmit(),
+    onKeyDown: e => searchPromptKeyDown(e),
+    role: "button",
+    tabIndex: 0
+  }, "Search for", " ", /*#__PURE__*/React.createElement("span", {
+    className: "p-search-and-filter__search-query"
+  }, searchTerm), "..."), filterPanelData.map(filterPanelSectionData => {
+    return /*#__PURE__*/React.createElement(FilterPanelSection, {
+      key: filterPanelSectionData.id,
+      data: filterPanelSectionData,
+      toggleSelected: toggleSelected,
+      searchData: searchData,
+      searchTerm: searchTerm
+    });
+  }))));
+};
+SearchAndFilter.propTypes = {
+  existingSearchData: _pt.array,
+  filterPanelData: _pt.array.isRequired,
+  returnSearchData: _pt.func.isRequired,
+  onPanelToggle: _pt.func,
+  onExpandChange: _pt.func
+};
+export default SearchAndFilter;

package/dist-esm/components/SearchAndFilter/index.js

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

package/dist-esm/components/SearchAndFilter/types.js

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

package/dist-esm/components/SearchAndFilter/utils.js

@@ -0,0 +1,22 @@
+/**
+ * Return number of overflowing chips given a row threshold
+ * @param {array} chips - An array of chips
+ * @param {Integer} overflowRowLimit - Number of rows to show before counting
+ * overflow
+ */
+export var overflowingChipsCount = (chips, overflowRowLimit) => {
+  var overflowChips = 0;
+  if (chips) {
+    chips.forEach(chip => {
+      if (chip.offsetTop > chip.offsetHeight * overflowRowLimit) overflowChips++;
+    });
+  }
+  return overflowChips;
+};
+
+/**
+ * Check if supplied chip object already exists in searchData prop
+ * @param {Object} chip - A chip object {lead: 'foo', value: 'bar'}
+ * @param {Array} existingArr - An array of chip objects
+ */
+export var isChipInArray = (chip, existingArr) => existingArr === null || existingArr === void 0 ? void 0 : existingArr.some(searchDataItem => searchDataItem.lead === chip.lead && searchDataItem.value === chip.value);

package/dist-esm/components/SearchBox/SearchBox.js

@@ -0,0 +1,95 @@
+var _excluded = ["autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "onClear", "placeholder", "shouldBlurOnSearch", "shouldRefocusAfterReset", "value"];
+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, { useRef } from "react";
+import Icon from "../Icon";
+export var Label = /*#__PURE__*/function (Label) {
+  Label["Clear"] = "Clear search field";
+  Label["Search"] = "Search";
+  return Label;
+}({});
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [SearchBox](https://docs.vanillaframework.io/patterns/search-box/).
+ *
+ * Search boxes enable search functionality on a page and are typically used in a navigation bar. SearchBox elements should be wrapped within a form element that handles its own submit action.
+ */
+var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
+  var {
+      autocomplete = "on",
+      className,
+      disabled,
+      externallyControlled,
+      onChange: _onChange,
+      onSearch,
+      onClear,
+      placeholder = "Search",
+      shouldBlurOnSearch = true,
+      shouldRefocusAfterReset,
+      value
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var internalRef = useRef();
+  var resetInput = () => {
+    _onChange === null || _onChange === void 0 || _onChange("");
+    onClear === null || onClear === void 0 || onClear();
+    if (internalRef.current) {
+      internalRef.current.value = "";
+      if (shouldRefocusAfterReset) internalRef.current.focus();
+    }
+  };
+  var triggerSearch = () => {
+    onSearch === null || onSearch === void 0 || onSearch(externallyControlled ? value : internalRef.current.value);
+  };
+  var onKeyDown = e => {
+    if (e.key === "Enter" && internalRef.current.checkValidity()) {
+      if (shouldBlurOnSearch) {
+        internalRef.current.blur();
+      }
+      triggerSearch();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("p-search-box", className)
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "u-off-screen",
+    htmlFor: "search"
+  }, placeholder || "Search"), /*#__PURE__*/React.createElement("input", _extends({
+    autoComplete: autocomplete,
+    className: "p-search-box__input",
+    disabled: disabled,
+    id: "search",
+    name: "search",
+    onChange: evt => _onChange === null || _onChange === void 0 ? void 0 : _onChange(evt.target.value),
+    onKeyDown: onKeyDown,
+    placeholder: placeholder,
+    ref: input => {
+      internalRef.current = input;
+      // Handle both function and object refs.
+      if (typeof forwardedRef === "function") {
+        forwardedRef(input);
+      } else if (forwardedRef) {
+        forwardedRef.current = input;
+      }
+    },
+    type: "search",
+    defaultValue: externallyControlled ? undefined : value,
+    value: externallyControlled ? value : undefined
+  }, props)), value && /*#__PURE__*/React.createElement("button", {
+    className: "p-search-box__reset",
+    disabled: disabled,
+    onClick: resetInput,
+    type: "reset"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "close"
+  }, Label.Clear)), /*#__PURE__*/React.createElement("button", {
+    className: "p-search-box__button",
+    disabled: disabled,
+    onClick: triggerSearch
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "search"
+  }, Label.Search)));
+});
+SearchBox.displayName = "SearchBox";
+export default SearchBox;

package/dist-esm/components/SearchBox/index.js

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

package/dist-esm/components/Select/Select.js

@@ -0,0 +1,84 @@
+var _excluded = ["label", "value"],
+  _excluded2 = ["caution", "className", "error", "help", "id", "label", "labelClassName", "onChange", "options", "required", "stacked", "success", "takeFocus", "wrapperClassName"];
+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, useRef } from "react";
+import Field from "../Field";
+
+/**
+ * The props for the Select component.
+ */
+
+var generateOptions = options => options === null || options === void 0 ? void 0 : options.map(_ref => {
+  var {
+      label,
+      value
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("option", _extends({
+    value: value,
+    key: "".concat(value) || label
+  }, props), label);
+});
+
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Select](https://docs.vanillaframework.io/base/forms/#select).
+ *
+ * Use the Select component to create a drop-down list.
+ */
+var Select = _ref2 => {
+  var {
+      caution,
+      className,
+      error,
+      help,
+      id,
+      label,
+      labelClassName,
+      onChange: _onChange,
+      options,
+      required,
+      stacked,
+      success,
+      takeFocus,
+      wrapperClassName
+    } = _ref2,
+    selectProps = _objectWithoutProperties(_ref2, _excluded2);
+  var selectRef = useRef(null);
+  var validationId = useId();
+  var defaultSelectId = useId();
+  var selectId = id || defaultSelectId;
+  var helpId = useId();
+  var hasError = !!error;
+  useEffect(() => {
+    if (takeFocus) {
+      selectRef.current.focus();
+    }
+  }, [takeFocus]);
+  return /*#__PURE__*/React.createElement(Field, {
+    caution: caution,
+    className: wrapperClassName,
+    error: error,
+    forId: selectId,
+    help: help,
+    helpId: helpId,
+    isSelect: true,
+    label: label,
+    labelClassName: labelClassName,
+    required: required,
+    stacked: stacked,
+    success: success,
+    validationId: validationId
+  }, /*#__PURE__*/React.createElement("select", _extends({
+    "aria-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
+    className: classNames("p-form-validation__input", className),
+    id: selectId,
+    onChange: evt => _onChange && _onChange(evt),
+    ref: selectRef
+  }, selectProps), generateOptions(options)));
+};
+export default Select;

package/dist-esm/components/Select/index.js

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