@canonical/react-components 0.20.0 → 0.24.0

package/README.md

@@ -6,7 +6,7 @@ This is a collection of components designed to be the way to consume [Vanilla Fr
 
 See the [component docs](https://canonical-web-and-design.github.io/react-components/) for usage instructions.
 
-![CI](https://github.com/canonical-web-and-design/react-components/workflows/CI/badge.svg?branch=master)
+![CI](https://github.com/canonical-web-and-design/react-components/workflows/CI/badge.svg?branch=main)
 ![Cypress chrome headless](https://github.com/canonical-web-and-design/react-components/workflows/Cypress%20chrome%20headless/badge.svg)
 
 ## Requirements
@@ -36,9 +36,9 @@ Please file any issues at [GitHub](https://github.com/canonical-web-and-design/r
 You might want to:
 
 - [View the source](https://github.com/canonical-web-and-design/react-components) on GitHub.
-- Read about [developing components](https://github.com/canonical-web-and-design/react-components/blob/master/HACKING.md).
-- Find out how to [publish to NPM](https://github.com/canonical-web-and-design/react-components/blob/master/PUBLISH-NPM-PACKAGE.md).
-- Know how to [publish the docs](https://github.com/canonical-web-and-design/react-components/blob/master/PUBLISHING-DOCS.md) to GitHub Pages.
+- Read about [developing components](https://github.com/canonical-web-and-design/react-components/blob/main/HACKING.md).
+- Find out how to [publish to NPM](https://github.com/canonical-web-and-design/react-components/blob/main/PUBLISH-NPM-PACKAGE.md).
+- Know how to [publish the docs](https://github.com/canonical-web-and-design/react-components/blob/main/PUBLISHING-DOCS.md) to GitHub Pages.
 
 ## Developing locally using this repository
 

package/dist/components/Icon/Icon.d.ts

@@ -24,6 +24,14 @@ export declare const ICONS: {
     readonly success: "success";
     readonly user: "user";
     readonly warning: "warning";
+    readonly facebook: "facebook";
+    readonly twitter: "twitter";
+    readonly instagram: "instagram";
+    readonly linkedin: "linkedin";
+    readonly youtube: "youtube";
+    readonly github: "github";
+    readonly rss: "rss";
+    readonly email: "email";
 };
 export declare type Props = PropsWithSpread<{
     /**

package/dist/components/Icon/Icon.js

@@ -40,7 +40,15 @@ var ICONS = {
   spinner: "spinner",
   success: "success",
   user: "user",
-  warning: "warning"
+  warning: "warning",
+  facebook: "facebook",
+  twitter: "twitter",
+  instagram: "instagram",
+  linkedin: "linkedin",
+  youtube: "youtube",
+  github: "github",
+  rss: "rss",
+  email: "email"
 };
 exports.ICONS = ICONS;
 

package/dist/components/Input/Input.d.ts

@@ -13,7 +13,7 @@ export declare type Props = PropsWithSpread<{
      */
     className?: ClassName;
     /**
-     * The content for error validation.
+     * The content for error validation message. Controls the value of aria-invalid attribute.
      */
     error?: ReactNode;
     /**

package/dist/components/Input/Input.js

@@ -64,7 +64,8 @@ var Input = function Input(_ref) {
     className: (0, _classnames.default)("p-form-validation__input", className),
     id: id,
     ref: inputRef,
-    type: type
+    type: type,
+    "aria-invalid": !!error
   }, inputProps)));
 };
 

package/dist/components/Modal/Modal.d.ts

@@ -1,9 +1,15 @@
-import { ReactElement, ReactNode } from "react";
-export declare type Props = {
+import { ReactElement } from "react";
+import type { HTMLProps, ReactNode } from "react";
+import { ClassName, PropsWithSpread } from "../../types";
+export declare type Props = PropsWithSpread<{
     /**
      * Buttons to display underneath the main modal content.
      */
     buttonRow?: ReactNode | null;
+    /**
+     * Optional class(es) to apply to the wrapping element.
+     */
+    className?: ClassName;
     /**
      * The content of the modal.
      */
@@ -16,6 +22,6 @@ export declare type Props = {
      * The title of the modal.
      */
     title?: ReactNode | null;
-};
-export declare const Modal: ({ buttonRow, children, close, title, }: Props) => ReactElement;
+}, HTMLProps<HTMLDivElement>>;
+export declare const Modal: ({ buttonRow, children, className, close, title, ...wrapperProps }: Props) => ReactElement;
 export default Modal;

package/dist/components/Modal/Modal.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Modal = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
 var _nanoid = require("nanoid");
 
@@ -19,44 +19,102 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return 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 _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 Modal = function Modal(_ref) {
   var buttonRow = _ref.buttonRow,
       children = _ref.children,
+      className = _ref.className,
       close = _ref.close,
-      title = _ref.title;
+      title = _ref.title,
+      wrapperProps = _objectWithoutProperties(_ref, ["buttonRow", "children", "className", "close", "title"]);
+
+  // list of focusable selectors is based on this Stack Overflow answer:
+  // https://stackoverflow.com/a/30753870/3732840
+  var focusableElementSelectors = 'a[href]:not([tabindex="-1"]), button:not([disabled]), textarea:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), area[href]:not([tabindex="-1"]), iframe:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), [contentEditable=true]:not([tabindex="-1"])';
   var descriptionId = (0, _react.useRef)((0, _nanoid.nanoid)());
-  var titleId = (0, _react.useRef)((0, _nanoid.nanoid)()); // This useEffect sets up listeners so the panel will close if user clicks
-  // anywhere else on the page or hits the escape key
+  var titleId = (0, _react.useRef)((0, _nanoid.nanoid)());
+  var shouldClose = (0, _react.useRef)(false);
+  var modalRef = (0, _react.useRef)(null);
+  var focusableModalElements = (0, _react.useRef)(null);
 
-  (0, _react.useEffect)(function () {
-    var keyDown = function keyDown(e) {
-      if (e.code === "Escape") {
-        // Close panel if Esc keydown detected
-        if (close) {
-          close();
-        }
+  var handleTabKey = function handleTabKey(e) {
+    if (focusableModalElements.current.length > 0) {
+      var firstElement = focusableModalElements.current[0];
+      var lastElement = focusableModalElements.current[focusableModalElements.current.length - 1];
+
+      if (!e.shiftKey && document.activeElement === lastElement) {
+        firstElement.focus();
+        e.preventDefault();
       }
-    }; // Add listener on document to capture keydown events
 
+      if (e.shiftKey && document.activeElement === firstElement) {
+        lastElement.focus();
+        return e.preventDefault();
+      }
+    }
+  };
 
-    document.addEventListener("keydown", keyDown); // return function to be called when unmounted
+  var keyListenersMap = new Map([[27, close], [9, handleTabKey]]);
+  (0, _react.useEffect)(function () {
+    modalRef.current.focus();
+  }, [modalRef]);
+  (0, _react.useEffect)(function () {
+    var _focusableModalElemen;
 
+    focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
+    (_focusableModalElemen = focusableModalElements.current[0]) === null || _focusableModalElemen === void 0 ? void 0 : _focusableModalElemen.focus();
+  }, []);
+  (0, _react.useEffect)(function () {
+    var keyDown = function keyDown(e) {
+      var listener = keyListenersMap.get(e.keyCode);
+      return listener && listener(e);
+    };
+
+    document.addEventListener("keydown", keyDown);
     return function () {
       document.removeEventListener("keydown", keyDown);
     };
-  }, [close]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-modal",
-    onClick: close
-  }, /*#__PURE__*/_react.default.createElement("section", {
+  });
+
+  var handleContentOnMouseDown = function handleContentOnMouseDown() {
+    shouldClose.current = false;
+  };
+
+  var handleContentOnMouseUp = function handleContentOnMouseUp() {
+    shouldClose.current = false;
+  };
+
+  var handleOverlayOnMouseDown = function handleOverlayOnMouseDown(event) {
+    if (event.target === modalRef.current) {
+      shouldClose.current = true;
+    }
+  };
+
+  var handleOverlayOnClick = function handleOverlayOnClick() {
+    if (shouldClose.current) {
+      close();
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _classnames.default)("p-modal", className),
+    onClick: handleOverlayOnClick,
+    onMouseDown: handleOverlayOnMouseDown
+  }, wrapperProps, {
+    ref: modalRef
+  }), /*#__PURE__*/_react.default.createElement("section", {
     className: "p-modal__dialog",
     role: "dialog",
     "aria-modal": "true",
     "aria-labelledby": titleId.current,
     "aria-describedby": descriptionId.current,
-    onClick: function onClick(evt) {
-      return evt.stopPropagation();
-    }
+    onMouseDown: handleContentOnMouseDown,
+    onMouseUp: handleContentOnMouseUp
   }, !!title && /*#__PURE__*/_react.default.createElement("header", {
     className: "p-modal__header"
   }, /*#__PURE__*/_react.default.createElement("h2", {
@@ -74,11 +132,5 @@ var Modal = function Modal(_ref) {
 };
 
 exports.Modal = Modal;
-Modal.propTypes = {
-  buttonRow: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.oneOf([null])]),
-  children: _propTypes.default.node.isRequired,
-  close: _propTypes.default.func,
-  title: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.oneOf([null])])
-};
 var _default = Modal;
 exports.default = _default;

package/dist/components/Notification/Notification.js

@@ -83,27 +83,27 @@ var Notification = function Notification(_ref) {
     className: "p-notification__content"
   }, title && /*#__PURE__*/_react.default.createElement("h5", {
     className: "p-notification__title",
-    "data-test": "notification-title"
+    "data-testid": "notification-title"
   }, title), inline && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2002"), /*#__PURE__*/_react.default.createElement("p", {
     className: "p-notification__message"
   }, children), onDismiss && /*#__PURE__*/_react.default.createElement("button", {
     "aria-label": "Close notification",
     className: "p-notification__close",
-    "data-test": "notification-close-button",
+    "data-testid": "notification-close-button",
     onClick: onDismiss
   }, "Close")), showMeta && /*#__PURE__*/_react.default.createElement("div", {
     className: "p-notification__meta",
-    "data-test": "notification-meta"
+    "data-testid": "notification-meta"
   }, timestamp && /*#__PURE__*/_react.default.createElement("span", {
     className: "p-notification__timestamp",
-    "data-test": "notification-timestamp"
+    "data-testid": "notification-timestamp"
   }, timestamp), hasActions ? /*#__PURE__*/_react.default.createElement("div", {
     className: "p-notification__actions"
   }, actions.map(function (action, i) {
     return /*#__PURE__*/_react.default.createElement(_Button.default, {
       appearance: _Button.ButtonAppearance.LINK,
       className: "p-notification__action",
-      "data-test": "notification-action",
+      "data-testid": "notification-action",
       key: "".concat(action.label, "-").concat(i),
       onClick: action.onClick
     }, action.label);

package/dist/components/PasswordToggle/PasswordToggle.d.ts

@@ -0,0 +1,91 @@
+import React from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import type { ClassName, PropsWithSpread } from "../../types";
+/**
+ * The props for the Password Toggle component.
+ */
+export declare type Props = PropsWithSpread<{
+    /**
+     * The content for caution validation.
+     */
+    caution?: ReactNode;
+    /**
+     * Optional class(es) to pass to the input element.
+     */
+    className?: ClassName;
+    /**
+     * The content for error validation.
+     */
+    error?: ReactNode;
+    /**
+     * Help text to show below the field.
+     */
+    help?: ReactNode;
+    /**
+     * The id of the input.
+     */
+    id: string;
+    /**
+     * The label for the field.
+     */
+    label?: ReactNode;
+    /**
+     * Whether the field is read only.
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * The content for success validation.
+     */
+    success?: ReactNode;
+    /**
+     * Optional class(es) to pass to the wrapping Field component
+     */
+    wrapperClassName?: string;
+}, InputHTMLAttributes<HTMLInputElement>>;
+declare const PasswordToggle: React.ForwardRefExoticComponent<{
+    /**
+     * The content for caution validation.
+     */
+    caution?: ReactNode;
+    /**
+     * Optional class(es) to pass to the input element.
+     */
+    className?: ClassName;
+    /**
+     * The content for error validation.
+     */
+    error?: ReactNode;
+    /**
+     * Help text to show below the field.
+     */
+    help?: ReactNode;
+    /**
+     * The id of the input.
+     */
+    id: string;
+    /**
+     * The label for the field.
+     */
+    label?: ReactNode;
+    /**
+     * Whether the field is read only.
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the field is required.
+     */
+    required?: boolean;
+    /**
+     * The content for success validation.
+     */
+    success?: ReactNode;
+    /**
+     * Optional class(es) to pass to the wrapping Field component
+     */
+    wrapperClassName?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "label" | "className" | "error" | "id" | "readOnly" | "required" | "help" | "success" | "caution" | "wrapperClassName"> & React.RefAttributes<HTMLInputElement>>;
+export default PasswordToggle;

package/dist/components/PasswordToggle/PasswordToggle.js

@@ -0,0 +1,105 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Field = _interopRequireDefault(require("../Field"));
+
+var _Label = _interopRequireDefault(require("../Label"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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 PasswordToggle = _react.default.forwardRef(function (_ref, ref) {
+  var caution = _ref.caution,
+      className = _ref.className,
+      error = _ref.error,
+      help = _ref.help,
+      id = _ref.id,
+      label = _ref.label,
+      readOnly = _ref.readOnly,
+      required = _ref.required,
+      success = _ref.success,
+      wrapperClassName = _ref.wrapperClassName,
+      inputProps = _objectWithoutProperties(_ref, ["caution", "className", "error", "help", "id", "label", "readOnly", "required", "success", "wrapperClassName"]);
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      isPassword = _useState2[0],
+      setIsPassword = _useState2[1];
+
+  var togglePassword = function togglePassword() {
+    if (isPassword) {
+      setIsPassword(false);
+    } else {
+      setIsPassword(true);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_Field.default, {
+    caution: caution,
+    className: wrapperClassName,
+    error: error,
+    help: help,
+    required: required,
+    success: success
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-form-password-toggle"
+  }, /*#__PURE__*/_react.default.createElement(_Label.default, {
+    forId: id,
+    required: required
+  }, label), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    appearance: "base",
+    className: "u-no-margin--bottom",
+    hasIcon: true,
+    "aria-controls": id,
+    "aria-live": "polite",
+    onClick: function onClick() {
+      return togglePassword();
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "p-form-password-toggle__label"
+  }, isPassword ? "Show" : "Hide"), /*#__PURE__*/_react.default.createElement("i", {
+    className: isPassword ? "p-icon--show" : "p-icon--hide"
+  }))), /*#__PURE__*/_react.default.createElement("input", _extends({
+    className: (0, _classnames.default)("p-form-validation__input", className),
+    id: id,
+    ref: ref,
+    type: isPassword ? "password" : "text",
+    readOnly: readOnly
+  }, inputProps)));
+});
+
+var _default = PasswordToggle;
+exports.default = _default;

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

@@ -0,0 +1,2 @@
+export { default } from "./PasswordToggle";
+export type { Props as PasswordToggleProps } from "./PasswordToggle";

package/dist/components/PasswordToggle/index.js

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

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

@@ -1,7 +1,5 @@
-import React from "react";
-import type { HTMLProps, FormEvent } from "react";
-import type { ClassName, PropsWithSpread } from "../../types";
-export declare type Props = PropsWithSpread<{
+import type { ClassName } from "../../types";
+export declare type Props = {
     /**
      * Whether autocomplete should be enabled for the search input.
      */
@@ -23,9 +21,9 @@ export declare type Props = PropsWithSpread<{
      */
     onChange?: (inputValue: string) => void;
     /**
-     * A function that will be called when the form is submitted.
+     * A function that is called when the user clicks the search icon
      */
-    onSubmit?: (evt: FormEvent) => void;
+    onSearch?: () => void;
     /**
      * A search input placeholder message.
      */
@@ -34,6 +32,9 @@ export declare type Props = PropsWithSpread<{
      * The value of the search input when the state is externally controlled.
      */
     value?: string;
-}, HTMLProps<HTMLFormElement>>;
-declare const SearchBox: React.ForwardRefExoticComponent<Pick<Props, "content" | "title" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "pattern" | "children" | "list" | "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" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "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" | "onClick" | "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" | "key" | "externallyControlled" | "autocomplete"> & React.RefAttributes<HTMLFormElement>>;
+};
+declare const SearchBox: {
+    ({ autocomplete, className, disabled, externallyControlled, onChange, onSearch, placeholder, value, }: Props): JSX.Element;
+    displayName: string;
+};
 export default SearchBox;

package/dist/components/SearchBox/SearchBox.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -13,26 +15,19 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 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 _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 = _react.default.forwardRef(function (_ref, ref) {
+var SearchBox = function SearchBox(_ref) {
   var _ref$autocomplete = _ref.autocomplete,
       autocomplete = _ref$autocomplete === void 0 ? "on" : _ref$autocomplete,
       className = _ref.className,
       disabled = _ref.disabled,
       externallyControlled = _ref.externallyControlled,
       _onChange = _ref.onChange,
-      onSubmit = _ref.onSubmit,
+      onSearch = _ref.onSearch,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? "Search" : _ref$placeholder,
-      value = _ref.value,
-      props = _objectWithoutProperties(_ref, ["autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSubmit", "placeholder", "value"]);
+      value = _ref.value;
 
-  var input = _react.default.createRef();
+  var input = /*#__PURE__*/_react.default.createRef();
 
   var resetInput = function resetInput() {
     _onChange && _onChange("");
@@ -42,17 +37,13 @@ var SearchBox = _react.default.forwardRef(function (_ref, ref) {
     }
   };
 
-  var submit = function submit(e) {
-    e.preventDefault();
-    onSubmit && onSubmit(e);
+  var triggerSearch = function triggerSearch() {
+    onSearch && onSearch();
   };
 
-  return /*#__PURE__*/_react.default.createElement("form", _extends({
-    className: (0, _classnames.default)("p-search-box", className),
-    onSubmit: submit
-  }, props, {
-    ref: ref
-  }), /*#__PURE__*/_react.default.createElement("label", {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("p-search-box", className)
+  }, /*#__PURE__*/_react.default.createElement("label", {
     className: "u-off-screen",
     htmlFor: "search"
   }, placeholder || "Search"), /*#__PURE__*/_react.default.createElement("input", {
@@ -79,12 +70,21 @@ var SearchBox = _react.default.forwardRef(function (_ref, ref) {
   }, "Clear search field")), /*#__PURE__*/_react.default.createElement("button", {
     className: "p-search-box__button",
     disabled: disabled,
-    type: "submit"
+    onClick: triggerSearch
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "search"
   }, "Search")));
-});
+};
 
+SearchBox.propTypes = {
+  autocomplete: _propTypes.default.oneOf(["on", "off"]),
+  disabled: _propTypes.default.bool,
+  externallyControlled: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  onSearch: _propTypes.default.func,
+  placeholder: _propTypes.default.string,
+  value: _propTypes.default.string
+};
 SearchBox.displayName = "SearchBox";
 var _default = SearchBox;
 exports.default = _default;

package/dist/components/Select/Select.d.ts

@@ -24,7 +24,7 @@ export declare type Props = PropsWithSpread<{
     /**
      * The id of the input.
      */
-    id?: string;
+    id?: string | null;
     /**
      * The label for the field.
      */
@@ -32,15 +32,15 @@ export declare type Props = PropsWithSpread<{
     /**
      * Optional class(es) to pass to the label component.
      */
-    labelClassName?: string;
+    labelClassName?: string | null;
     /**
      * Function to run when select value changes.
      */
-    onChange?: ChangeEventHandler<HTMLSelectElement>;
+    onChange?: ChangeEventHandler<HTMLSelectElement> | null;
     /**
      * Array of options that the select can choose from.
      */
-    options?: Option[];
+    options?: Option[] | null;
     /**
      * Whether the field is required.
      */
@@ -60,7 +60,7 @@ export declare type Props = PropsWithSpread<{
     /**
      * Optional class(es) to pass to the wrapping Field component
      */
-    wrapperClassName?: string;
+    wrapperClassName?: ClassName;
 }, SelectHTMLAttributes<HTMLSelectElement>>;
 declare const Select: ({ caution, className, error, help, id, label, labelClassName, onChange, options, required, stacked, success, takeFocus, wrapperClassName, ...selectProps }: Props) => JSX.Element;
 export default Select;

package/dist/components/Select/Select.js

@@ -26,7 +26,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 generateOptions = function generateOptions(options) {
-  return options.map(function (_ref) {
+  return options === null || options === void 0 ? void 0 : options.map(function (_ref) {
     var label = _ref.label,
         value = _ref.value,
         props = _objectWithoutProperties(_ref, ["label", "value"]);

package/dist/components/Tabs/Tabs.js

@@ -42,7 +42,7 @@ var Tabs = function Tabs(_ref) {
     }, /*#__PURE__*/_react.default.createElement(Component, _extends({
       "aria-selected": active,
       className: (0, _classnames.default)("p-tabs__link", className),
-      "data-test": "tab-link-".concat(label)
+      "data-testid": "tab-link-".concat(label)
     }, rest), label));
   })));
 };

package/dist/components/Textarea/Textarea.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from "react";
+import type { TextareaHTMLAttributes, ReactNode } from "react";
 import type { ClassName, PropsWithSpread } from "../../types";
 /**
  * The props for the Textarea component.
@@ -56,6 +56,6 @@ export declare type Props = PropsWithSpread<{
      * Optional class(es) to pass to the wrapping Field component
      */
     wrapperClassName?: string;
-}, HTMLAttributes<HTMLTextAreaElement>>;
+}, TextareaHTMLAttributes<HTMLTextAreaElement>>;
 declare const Textarea: ({ caution, className, error, grow, help, id, label, labelClassName, onKeyUp, required, stacked, style, success, takeFocus, wrapperClassName, ...props }: Props) => JSX.Element;
 export default Textarea;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -29,7 +29,7 @@ export declare type Props = {
     /**
      * Message to display when the element is hovered.
      */
-    message?: string | null;
+    message?: ReactNode;
     /**
      * Position of the tooltip relative to the element.
      */

package/dist/components/Tooltip/Tooltip.js

@@ -226,7 +226,7 @@ var Tooltip = function Tooltip(_ref) {
     }
   }, children), isOpen && /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("p-tooltip--".concat(adjustedPosition), "is-detached", tooltipClassName),
-    "data-test": "tooltip-portal",
+    "data-testid": "tooltip-portal",
     style: positionStyle
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "p-tooltip__message",
@@ -240,7 +240,7 @@ Tooltip.propTypes = {
   autoAdjust: _propTypes.default.bool,
   children: _propTypes.default.node.isRequired,
   followMouse: _propTypes.default.bool,
-  message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOf([null])]),
+  message: _propTypes.default.node,
   position: _propTypes.default.oneOf(["btm-center", "btm-left", "btm-right", "left", "right", "top-center", "top-left", "top-right"]),
   positionElementClassName: _propTypes.default.string,
   tooltipClassName: _propTypes.default.string

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export { default as ModularTable } from "./components/ModularTable";
 export { default as Modal } from "./components/Modal";
 export { default as Notification, NotificationSeverity, } from "./components/Notification";
 export { default as Pagination } from "./components/Pagination";
+export { default as PasswordToggle } from "./components/PasswordToggle";
 export { default as RadioInput } from "./components/RadioInput";
 export { default as Row } from "./components/Row";
 export { default as SearchAndFilter } from "./components/SearchAndFilter";

package/dist/index.js

@@ -173,6 +173,12 @@ Object.defineProperty(exports, "Pagination", {
     return _Pagination.default;
   }
 });
+Object.defineProperty(exports, "PasswordToggle", {
+  enumerable: true,
+  get: function get() {
+    return _PasswordToggle.default;
+  }
+});
 Object.defineProperty(exports, "RadioInput", {
   enumerable: true,
   get: function get() {
@@ -318,6 +324,8 @@ var _Notification = _interopRequireWildcard(require("./components/Notification")
 
 var _Pagination = _interopRequireDefault(require("./components/Pagination"));
 
+var _PasswordToggle = _interopRequireDefault(require("./components/PasswordToggle"));
+
 var _RadioInput = _interopRequireDefault(require("./components/RadioInput"));
 
 var _Row = _interopRequireDefault(require("./components/Row"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.20.0",
+  "version": "0.24.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -22,45 +22,48 @@
   },
   "homepage": "/react-components/",
   "devDependencies": {
-    "@babel/cli": "7.14.8",
-    "@babel/preset-typescript": "7.14.5",
+    "@babel/cli": "7.16.0",
+    "@babel/preset-typescript": "7.16.0",
     "@percy/storybook": "3.3.1",
-    "@storybook/addon-a11y": "6.3.2",
-    "@storybook/addon-controls": "6.3.2",
-    "@storybook/addon-docs": "6.3.2",
-    "@storybook/addons": "6.3.2",
-    "@storybook/react": "6.3.2",
-    "@storybook/theming": "6.3.2",
-    "@testing-library/react-hooks": "7.0.1",
-    "@typescript-eslint/eslint-plugin": "4.28.1",
-    "@typescript-eslint/parser": "4.28.1",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.3",
+    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-controls": "6.3.12",
+    "@storybook/addon-docs": "6.3.12",
+    "@storybook/addons": "6.3.12",
+    "@storybook/react": "6.3.12",
+    "@storybook/theming": "6.3.12",
+    "@testing-library/cypress": "8.0.2",
+    "@testing-library/dom": "8.11.1",
+    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/user-event": "13.5.0",
+    "@typescript-eslint/eslint-plugin": "4.33.0",
+    "@typescript-eslint/parser": "4.33.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.5",
     "babel-eslint": "10.1.0",
-    "babel-jest": "27.0.6",
-    "babel-loader": "8.2.2",
+    "babel-jest": "27.3.1",
+    "babel-loader": "8.2.3",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-typescript-to-proptypes": "1.4.2",
-    "concurrently": "6.2.0",
+    "concurrently": "6.4.0",
     "css-loader": "5.2.7",
-    "cypress": "7.6.0",
+    "cypress": "7.7.0",
     "deepmerge": "4.2.2",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
-    "eslint": "7.30.0",
+    "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-react-app": "6.0.0",
-    "eslint-plugin-cypress": "2.11.3",
-    "eslint-plugin-flowtype": "5.8.1",
-    "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-react": "7.24.0",
-    "eslint-plugin-react-hooks": "4.2.0",
-    "jest": "27.0.6",
+    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-flowtype": "5.10.0",
+    "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "3.4.1",
+    "eslint-plugin-react": "7.27.1",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "jest": "27.3.1",
     "node-sass": "6.0.1",
-    "npm-package-json-lint": "5.1.0",
-    "prettier": "2.3.2",
+    "npm-package-json-lint": "5.4.2",
+    "prettier": "2.4.1",
     "react": "17.0.2",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "17.0.2",
@@ -71,21 +74,21 @@
     "stylelint-config-standard": "22.0.0",
     "stylelint-order": "4.1.0",
     "stylelint-prettier": "1.2.0",
-    "stylelint-scss": "3.19.0",
-    "ts-jest": "27.0.4",
-    "tsc-alias": "1.3.7",
-    "typescript": "4.3.5",
-    "vanilla-framework": "2.33.0",
+    "stylelint-scss": "3.21.0",
+    "ts-jest": "27.0.7",
+    "tsc-alias": "1.4.1",
+    "typescript": "4.5.2",
+    "vanilla-framework": "2.37.1",
     "wait-on": "5.3.0"
   },
   "dependencies": {
-    "@types/jest": "26.0.24",
-    "@types/node": "14.17.6",
-    "@types/react": "17.0.15",
-    "@types/react-dom": "17.0.9",
-    "@types/react-table": "7.7.2",
+    "@types/jest": "27.0.3",
+    "@types/node": "16.11.9",
+    "@types/react": "17.0.36",
+    "@types/react-dom": "17.0.11",
+    "@types/react-table": "7.7.8",
     "classnames": "2.3.1",
-    "nanoid": "3.1.23",
+    "nanoid": "3.1.30",
     "prop-types": "15.7.2",
     "react-table": "7.7.0",
     "react-useportal": "1.0.14"
@@ -93,7 +96,7 @@
   "peerDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "vanilla-framework": "2.33.0"
+    "vanilla-framework": "2.37.1"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",
@@ -102,7 +105,7 @@
     "build-watch": "yarn run build-local --watch",
     "build-docs": "build-storybook -c .storybook -o docs",
     "clean": "rm -rf node_modules dist .out",
-    "docs": "start-storybook --port ${PORT}",
+    "docs": "start-storybook --port ${PORT:-9009}",
     "link-packages": "yarn install && yarn build && yarn link && cd node_modules/react && yarn link && cd ../react-dom && yarn link",
     "lint-js": "eslint src",
     "lint-style": "stylelint src",
@@ -115,7 +118,7 @@
     "test": "jest",
     "test-cypress": "concurrently 'yarn run docs' 'yarn run cypress:test' -k -s first",
     "unlink-packages": "yarn unlink && cd node_modules/react && yarn unlink && cd ../react-dom && yarn unlink",
-    "cypress:test": "wait-on http://localhost:${PORT} && cypress run --env port=${PORT}",
+    "cypress:test": "wait-on http://localhost:${PORT:-9009} && cypress run --env port=${PORT:-9009}",
     "cypress:run": "cypress run",
     "cypress:open": "cypress open"
   },