@canonical/react-components 0.36.0 → 0.37.0

package/dist/components/SearchAndFilter/SearchAndFilter.js

@@ -17,6 +17,8 @@ var _Chip = _interopRequireDefault(require("../Chip"));
 
 var _utils = require("./utils");
 
+var _hooks = require("../../hooks");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -108,14 +110,18 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
     return function () {
       document.removeEventListener("click", searchContainerClickCheck);
     };
-  }, [searchContainerActive]); // This useEffect sets up listeners so the panel will close if user clicks
+  }, [searchContainerActive]);
+
+  var closePanel = function closePanel() {
+    setFilterPanelHidden(true);
+  };
+
+  (0, _hooks.useOnEscapePressed)(function () {
+    return closePanel();
+  }); // This useEffect sets up listeners so the panel will close if user clicks
   // anywhere else on the page or hits the escape key
 
   (0, _react.useEffect)(function () {
-    var closePanel = function closePanel() {
-      setFilterPanelHidden(true);
-    };
-
     var mouseDown = function mouseDown(e) {
       var _searchAndFilterRef$c;
 
@@ -124,23 +130,13 @@ var SearchAndFilter = function SearchAndFilter(_ref) {
         // If so, close the panel
         closePanel();
       }
-    };
-
-    var keyDown = function keyDown(e) {
-      if (e.code === "Escape") {
-        // Close panel if Esc keydown detected
-        closePanel();
-      }
     }; // Add listener on document to capture click events
 
 
-    document.addEventListener("mousedown", mouseDown); // Add listener on document to capture keydown events
-
-    document.addEventListener("keydown", keyDown); // return function to be called when unmounted
+    document.addEventListener("mousedown", mouseDown); // return function to be called when unmounted
 
     return function () {
       document.removeEventListener("mousedown", mouseDown);
-      document.removeEventListener("keydown", keyDown);
     };
   }, []); // Add passed chip to the searchData array
 

package/dist/components/SearchBox/SearchBox.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps } from "react";
+import React, { HTMLProps } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 export declare type Props = PropsWithSpread<{
     /**
@@ -29,13 +29,14 @@ export declare type Props = PropsWithSpread<{
      * A search input placeholder message.
      */
     placeholder?: string;
+    /**
+     * A ref that is passed to the input element.
+     */
+    ref?: string;
     /**
      * The value of the search input when the state is externally controlled.
      */
     value?: string;
 }, HTMLProps<HTMLInputElement>>;
-declare const SearchBox: {
-    ({ autocomplete, className, disabled, externallyControlled, onChange, onSearch, placeholder, value, ...props }: Props): JSX.Element;
-    displayName: string;
-};
+declare const SearchBox: React.ForwardRefExoticComponent<Pick<Props, "content" | "title" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "pattern" | "children" | "className" | "key" | "list" | "role" | "id" | "onClick" | "type" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "externallyControlled" | "autocomplete" | "onSearch"> & React.RefAttributes<HTMLInputElement>>;
 export default SearchBox;

package/dist/components/SearchBox/SearchBox.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,21 +9,25 @@ exports.default = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _excluded = ["autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "placeholder", "value"];
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var SearchBox = function SearchBox(_ref) {
+var SearchBox = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedRef) {
   var _ref$autocomplete = _ref.autocomplete,
       autocomplete = _ref$autocomplete === void 0 ? "on" : _ref$autocomplete,
       className = _ref.className,
@@ -34,13 +40,13 @@ var SearchBox = function SearchBox(_ref) {
       value = _ref.value,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var input = /*#__PURE__*/_react.default.createRef();
+  var internalRef = (0, _react.useRef)();
 
   var resetInput = function resetInput() {
     _onChange && _onChange("");
 
-    if (input.current) {
-      input.current.value = "";
+    if (internalRef.current) {
+      internalRef.current.value = "";
     }
   };
 
@@ -63,7 +69,15 @@ var SearchBox = function SearchBox(_ref) {
       return _onChange(evt.target.value);
     },
     placeholder: placeholder,
-    ref: input,
+    ref: function 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
@@ -81,7 +95,7 @@ var SearchBox = function SearchBox(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "search"
   }, "Search")));
-};
+});
 
 SearchBox.displayName = "SearchBox";
 var _default = SearchBox;

package/dist/components/Select/Select.js

@@ -24,7 +24,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 

package/dist/components/Slider/Slider.js

@@ -15,7 +15,7 @@ var _excluded = ["caution", "disabled", "error", "help", "id", "inputDisabled",
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 

package/dist/components/Spinner/Spinner.js

@@ -15,7 +15,7 @@ var _excluded = ["className", "text", "isLight", "ariaLive", "role"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 

package/dist/components/StatusLabel/StatusLabel.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLProps, ReactNode } from "react";
+import { ClassName, PropsWithSpread, ValueOf } from "../../types";
+export declare const StatusLabelAppearance: {
+    readonly CAUTION: "caution";
+    readonly DEFAULT: "";
+    readonly INFORMATION: "information";
+    readonly NEGATIVE: "negative";
+    readonly POSITIVE: "positive";
+};
+/**
+ * The type of the StatusLabel props.
+ */
+export declare type Props = PropsWithSpread<{
+    /**
+     * The appearance of the label.
+     */
+    appearance?: ValueOf<typeof StatusLabelAppearance> | string;
+    /**
+     * The content of the label.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class(es) to pass to the wrapping element.
+     */
+    className?: ClassName;
+}, HTMLProps<HTMLDivElement>>;
+/**
+ * A component for the Vanilla Label.
+ */
+declare const StatusLabel: ({ appearance, children, className, ...labelProps }: Props) => JSX.Element;
+export default StatusLabel;

package/dist/components/StatusLabel/StatusLabel.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StatusLabelAppearance = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["appearance", "children", "className"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var StatusLabelAppearance = {
+  CAUTION: "caution",
+  DEFAULT: "",
+  INFORMATION: "information",
+  NEGATIVE: "negative",
+  POSITIVE: "positive"
+};
+/**
+ * The type of the StatusLabel props.
+ */
+
+exports.StatusLabelAppearance = StatusLabelAppearance;
+
+/**
+ * A component for the Vanilla Label.
+ */
+var StatusLabel = function StatusLabel(_ref) {
+  var appearance = _ref.appearance,
+      children = _ref.children,
+      className = _ref.className,
+      labelProps = _objectWithoutProperties(_ref, _excluded);
+
+  var classes = (0, _classnames.default)(appearance ? "p-status-label--".concat(appearance) : "p-status-label", className);
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, labelProps, {
+    className: classes
+  }), children);
+};
+
+var _default = StatusLabel;
+exports.default = _default;

package/dist/components/StatusLabel/index.d.ts

@@ -0,0 +1,2 @@
+export { default, StatusLabelAppearance } from "./StatusLabel";
+export type { Props as StatusLabelProps } from "./StatusLabel";

package/dist/components/StatusLabel/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "StatusLabelAppearance", {
+  enumerable: true,
+  get: function get() {
+    return _StatusLabel.StatusLabelAppearance;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _StatusLabel.default;
+  }
+});
+
+var _StatusLabel = _interopRequireWildcard(require("./StatusLabel"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/components/Strip/Strip.js

@@ -17,7 +17,7 @@ var _excluded = ["background", "bordered", "children", "className", "colSize", "
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 

package/dist/components/Switch/Switch.js

@@ -11,7 +11,7 @@ var _excluded = ["label", "disabled"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 

package/dist/components/Table/Table.js

@@ -13,7 +13,7 @@ var _excluded = ["children", "className", "expanding", "responsive"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 

package/dist/components/TableCell/TableCell.js

@@ -13,7 +13,7 @@ var _excluded = ["children", "className", "hasOverflow", "expanding", "hidden",
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 

package/dist/components/TableHeader/TableHeader.js

@@ -11,7 +11,7 @@ var _excluded = ["children", "sort"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 

package/dist/components/TableRow/TableRow.js

@@ -11,7 +11,7 @@ var _excluded = ["children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 

package/dist/components/Tabs/Tabs.js

@@ -13,7 +13,7 @@ var _excluded = ["active", "className", "component", "label", "listItemClassName
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 

package/dist/components/Textarea/Textarea.js

@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 

package/dist/hooks/index.d.ts

@@ -1,7 +1,9 @@
-export { useWindowFitment } from "./useWindowFitment";
+export { useClickOutside } from "./useClickOutside";
+export { useId } from "./useId";
 export { useListener } from "./useListener";
+export { useOnEscapePressed } from "./useOnEscapePressed";
 export { usePrevious } from "./usePrevious";
 export { useThrottle } from "./useThrottle";
-export { useId } from "./useId";
 export { usePagination } from "./usePagination";
+export { useWindowFitment } from "./useWindowFitment";
 export type { WindowFitment } from "./useWindowFitment";

package/dist/hooks/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useClickOutside", {
+  enumerable: true,
+  get: function get() {
+    return _useClickOutside.useClickOutside;
+  }
+});
 Object.defineProperty(exports, "useId", {
   enumerable: true,
   get: function get() {
@@ -15,6 +21,12 @@ Object.defineProperty(exports, "useListener", {
     return _useListener.useListener;
   }
 });
+Object.defineProperty(exports, "useOnEscapePressed", {
+  enumerable: true,
+  get: function get() {
+    return _useOnEscapePressed.useOnEscapePressed;
+  }
+});
 Object.defineProperty(exports, "usePagination", {
   enumerable: true,
   get: function get() {
@@ -40,14 +52,18 @@ Object.defineProperty(exports, "useWindowFitment", {
   }
 });
 
-var _useWindowFitment = require("./useWindowFitment");
+var _useClickOutside = require("./useClickOutside");
+
+var _useId = require("./useId");
 
 var _useListener = require("./useListener");
 
+var _useOnEscapePressed = require("./useOnEscapePressed");
+
 var _usePrevious = require("./usePrevious");
 
 var _useThrottle = require("./useThrottle");
 
-var _useId = require("./useId");
+var _usePagination = require("./usePagination");
 
-var _usePagination = require("./usePagination");
+var _useWindowFitment = require("./useWindowFitment");

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from "react";
+/**
+ * Handle clicks outside an element.
+ * @returns An id and ref to pass to the element to handle clicks
+ * outside of.
+ */
+export declare const useClickOutside: <E extends HTMLElement>(onClickOutside: () => void) => [MutableRefObject<E>, string];

package/dist/hooks/useClickOutside.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useClickOutside = void 0;
+
+var _react = require("react");
+
+var _useId = require("./useId");
+
+/**
+ * Handle clicks outside an element.
+ * @returns An id and ref to pass to the element to handle clicks
+ * outside of.
+ */
+var useClickOutside = function useClickOutside(onClickOutside) {
+  var wrapperRef = (0, _react.useRef)(null);
+  var id = (0, _useId.useId)();
+  var handleClickOutside = (0, _react.useCallback)(function (evt) {
+    var _evt$target, _wrapperRef$current;
+
+    var target = evt.target; // The target might be something like an SVG node which doesn't provide
+    // the class name as a string.
+
+    var isValidTarget = typeof (evt === null || evt === void 0 ? void 0 : (_evt$target = evt.target) === null || _evt$target === void 0 ? void 0 : _evt$target.className) === "string";
+
+    if (!isValidTarget || wrapperRef.current && !((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(target)) && target.id !== id) {
+      onClickOutside();
+    }
+  }, [id, onClickOutside]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("click", handleClickOutside, false);
+    return function () {
+      return document.removeEventListener("click", handleClickOutside, false);
+    };
+  }, [handleClickOutside]);
+  return [wrapperRef, id];
+};
+
+exports.useClickOutside = useClickOutside;

package/dist/hooks/useOnEscapePressed.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Handle the escape key pressed.
+ */
+export declare const useOnEscapePressed: (onEscape: () => void) => void;

package/dist/hooks/useOnEscapePressed.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnEscapePressed = void 0;
+
+var _react = require("react");
+
+/**
+ * Handle the escape key pressed.
+ */
+var useOnEscapePressed = function useOnEscapePressed(onEscape) {
+  var keyDown = (0, _react.useCallback)(function (evt) {
+    if (evt.code === "Escape") {
+      onEscape();
+    }
+  }, [onEscape]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("keydown", keyDown);
+    return function () {
+      document.removeEventListener("keydown", keyDown);
+    };
+  }, [keyDown]);
+};
+
+exports.useOnEscapePressed = useOnEscapePressed;

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export { default as List } from "./components/List";
 export { default as Loader } from "./components/Loader";
 export { default as MainTable } from "./components/MainTable";
 export { default as ModularTable } from "./components/ModularTable";
+export { default as Navigation } from "./components/Navigation";
 export { default as Modal } from "./components/Modal";
 export { default as Notification, NotificationSeverity, } from "./components/Notification";
 export { default as Pagination } from "./components/Pagination";
@@ -31,6 +32,7 @@ export { default as Select } from "./components/Select";
 export { default as Slider } from "./components/Slider";
 export { default as Switch } from "./components/Switch";
 export { default as Spinner } from "./components/Spinner";
+export { default as StatusLabel, StatusLabelAppearance, } from "./components/StatusLabel";
 export { default as Strip } from "./components/Strip";
 export { default as SummaryButton } from "./components/SummaryButton";
 export { default as Table } from "./components/Table";
@@ -63,6 +65,7 @@ export type { ListProps } from "./components/List";
 export type { MainTableProps } from "./components/MainTable";
 export type { ModularTableProps } from "./components/ModularTable";
 export type { ModalProps } from "./components/Modal";
+export type { GenerateLink, LogoProps, NavigationProps, NavItem, NavLink, } from "./components/Navigation";
 export type { NotificationProps } from "./components/Notification";
 export type { PaginationProps } from "./components/Pagination";
 export type { RadioInputProps } from "./components/RadioInput";
@@ -72,6 +75,7 @@ export type { SearchBoxProps } from "./components/SearchBox";
 export type { SelectProps } from "./components/Select";
 export type { SliderProps } from "./components/Slider";
 export type { SpinnerProps } from "./components/Spinner";
+export type { StatusLabelProps } from "./components/StatusLabel";
 export type { StripProps } from "./components/Strip";
 export type { SummaryButtonProps } from "./components/SummaryButton";
 export type { TableProps } from "./components/Table";
@@ -81,6 +85,6 @@ export type { TableRowProps } from "./components/TableRow";
 export type { TabsProps } from "./components/Tabs";
 export type { TextareaProps } from "./components/Textarea";
 export type { TooltipProps } from "./components/Tooltip";
-export { useWindowFitment, useListener, usePrevious, useThrottle, useId, } from "./hooks";
+export { useClickOutside, useId, useListener, useOnEscapePressed, usePrevious, useThrottle, useWindowFitment, } from "./hooks";
 export type { WindowFitment } from "./hooks";
-export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";
+export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, Theme, TSFixMe, ValueOf, } from "./types";