@canonical/react-components 0.24.0 → 0.30.0

package/dist/components/AccordionSection/AccordionSection.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _nanoid = require("nanoid");
 
 var _react = _interopRequireWildcard(require("react"));
@@ -17,8 +15,6 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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 }; }
-
 var AccordionSection = function AccordionSection(_ref) {
   var content = _ref.content,
       expanded = _ref.expanded,
@@ -63,14 +59,5 @@ var AccordionSection = function AccordionSection(_ref) {
   }, content));
 };
 
-AccordionSection.propTypes = {
-  content: _propTypes.default.node,
-  expanded: _propTypes.default.string,
-  headingLevel: _propTypes.default.number,
-  onTitleClick: _propTypes.default.func,
-  sectionKey: _propTypes.default.string,
-  setExpanded: _propTypes.default.func,
-  title: _propTypes.default.string
-};
 var _default = AccordionSection;
 exports.default = _default;

package/dist/components/ActionButton/ActionButton.js

@@ -11,8 +11,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Button = require("../Button");
-
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -47,8 +45,7 @@ var SUCCESS_DURATION = 2000; // duration (ms) success tick is displayed
 exports.SUCCESS_DURATION = SUCCESS_DURATION;
 
 var ActionButton = function ActionButton(_ref) {
-  var _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? _Button.ButtonAppearance.NEUTRAL : _ref$appearance,
+  var appearance = _ref.appearance,
       children = _ref.children,
       className = _ref.className,
       _ref$disabled = _ref.disabled,
@@ -126,7 +123,7 @@ var ActionButton = function ActionButton(_ref) {
       return window.clearTimeout(successTimeout);
     };
   }, [showSuccess]);
-  var buttonClasses = (0, _classnames.default)(className, "p-action-button", "p-button--".concat(appearance), {
+  var buttonClasses = (0, _classnames.default)(className, "p-action-button", appearance ? "p-button--".concat(appearance) : "p-button", {
     "is-processing": showLoader || showSuccess,
     "is-disabled": disabled,
     "is-inline": inline

package/dist/components/Button/Button.d.ts

@@ -5,7 +5,6 @@ export declare const ButtonAppearance: {
     readonly BRAND: "brand";
     readonly LINK: "link";
     readonly NEGATIVE: "negative";
-    readonly NEUTRAL: "neutral";
     readonly POSITIVE: "positive";
 };
 /**
@@ -34,7 +33,7 @@ export declare type Props<P = null> = {
      */
     disabled?: boolean;
     /**
-     * Optional element or component to use instead of <button>.
+     * Optional element or component to use instead of `button`.
      */
     element?: ElementType | ComponentType<P>;
     /**

package/dist/components/Button/Button.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ButtonAppearance = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -24,7 +22,6 @@ var ButtonAppearance = {
   BRAND: "brand",
   LINK: "link",
   NEGATIVE: "negative",
-  NEUTRAL: "neutral",
   POSITIVE: "positive"
 };
 /**
@@ -39,8 +36,7 @@ exports.ButtonAppearance = ButtonAppearance;
  * @template P - The type of the props if providing a component to `element`
  */
 var Button = function Button(_ref) {
-  var _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? ButtonAppearance.NEUTRAL : _ref$appearance,
+  var appearance = _ref.appearance,
       children = _ref.children,
       className = _ref.className,
       dense = _ref.dense,
@@ -53,7 +49,7 @@ var Button = function Button(_ref) {
       small = _ref.small,
       buttonProps = _objectWithoutProperties(_ref, ["appearance", "children", "className", "dense", "disabled", "element", "hasIcon", "inline", "onClick", "small"]);
 
-  var classes = (0, _classnames.default)("p-button--".concat(appearance), {
+  var classes = (0, _classnames.default)(appearance ? "p-button--".concat(appearance) : "p-button", {
     "has-icon": hasIcon,
     "is-dense": dense,
     "is-disabled": Component !== "button" && disabled,
@@ -76,15 +72,5 @@ var Button = function Button(_ref) {
   }, disabledProp, buttonProps), children);
 };
 
-Button.propTypes = {
-  children: _propTypes.default.node,
-  dense: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  element: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.elementType]),
-  hasIcon: _propTypes.default.bool,
-  inline: _propTypes.default.bool,
-  onClick: _propTypes.default.func,
-  small: _propTypes.default.bool
-};
 var _default = Button;
 exports.default = _default;

package/dist/components/Chip/Chip.d.ts

@@ -7,7 +7,7 @@ export declare type Props = {
     /**
      * Function for handling chip div click event.
      */
-    onClick?: (event: MouseEvent<HTMLDivElement> | {
+    onClick?: (event: MouseEvent<HTMLButtonElement> | {
         lead: string;
         value: string;
     }) => void;

package/dist/components/Chip/Chip.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _utils = require("../../utils");
@@ -39,40 +37,39 @@ var Chip = function Chip(_ref) {
   };
 
   var chipValue = (0, _utils.highlightSubString)(value, subString).text;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-chip",
-    "aria-pressed": selected,
-    role: "button",
-    tabIndex: !onDismiss ? 0 : null,
-    onClick: onClick,
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown(e);
-    }
-  }, lead && /*#__PURE__*/_react.default.createElement("span", {
+
+  var chipContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, lead && /*#__PURE__*/_react.default.createElement("span", {
     className: "p-chip__lead"
   }, lead.toUpperCase()), /*#__PURE__*/_react.default.createElement("span", {
     className: "p-chip__value",
     dangerouslySetInnerHTML: {
       __html: quoteValue ? "'".concat(chipValue, "'") : chipValue
     }
-  }), onDismiss ? /*#__PURE__*/_react.default.createElement("button", {
-    className: "p-chip__dismiss",
-    onClick: function onClick() {
-      return onDismiss();
-    }
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "p-icon--close"
-  }, "Dismiss")) : null);
-};
+  }));
 
-Chip.propTypes = {
-  lead: _propTypes.default.string,
-  onClick: _propTypes.default.func,
-  onDismiss: _propTypes.default.func,
-  selected: _propTypes.default.bool,
-  subString: _propTypes.default.string,
-  quoteValue: _propTypes.default.bool,
-  value: _propTypes.default.string.isRequired
+  if (onDismiss) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "p-chip",
+      "aria-pressed": selected
+    }, chipContent, /*#__PURE__*/_react.default.createElement("button", {
+      className: "p-chip__dismiss",
+      onClick: function onClick() {
+        return onDismiss();
+      }
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "p-icon--close"
+    }, "Dismiss")));
+  } else {
+    return /*#__PURE__*/_react.default.createElement("button", {
+      className: "p-chip",
+      "aria-pressed": selected,
+      onClick: onClick,
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e);
+      }
+    }, chipContent);
+  }
 };
+
 var _default = Chip;
 exports.default = _default;

package/dist/components/CodeSnippet/CodeSnippetBlock.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = CodeSnippetBlock;
 exports.CodeSnippetBlockAppearance = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -75,13 +73,4 @@ function CodeSnippetBlock(_ref) {
   }))), /*#__PURE__*/_react.default.createElement("pre", {
     className: className
   }, /*#__PURE__*/_react.default.createElement("code", null, isNumbered ? numberedCode : code)), content);
-}
-
-CodeSnippetBlock.propTypes = {
-  code: _propTypes.default.string.isRequired,
-  content: _propTypes.default.node,
-  dropdowns: _propTypes.default.array,
-  stacked: _propTypes.default.bool,
-  title: _propTypes.default.string,
-  wrapLines: _propTypes.default.bool
-};
+}

package/dist/components/CodeSnippet/CodeSnippetDropdown.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = CodeSnippetDropdown;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,9 +33,4 @@ function CodeSnippetDropdown(_ref) {
       key: value + "" || label
     }, props), label);
   }));
-}
-
-CodeSnippetDropdown.propTypes = {
-  onChange: _propTypes.default.func.isRequired,
-  options: _propTypes.default.array.isRequired
-};
+}

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -236,7 +236,7 @@ var ContextualMenu = function ContextualMenu(_ref) {
     },
     type: "button"
   }, toggleProps), toggleLabelFirst ? labelNode : null, hasToggleIcon ? /*#__PURE__*/_react.default.createElement("i", {
-    className: (0, _classnames.default)("p-icon--contextual-menu p-contextual-menu__indicator", {
+    className: (0, _classnames.default)("p-icon--chevron-down p-contextual-menu__indicator", {
       "is-light": ["negative", "positive"].includes(toggleAppearance)
     })
   }) : null, toggleLabelFirst ? null : labelNode) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.adjustForWindow = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -225,19 +223,5 @@ var ContextualMenuDropdown = function ContextualMenuDropdown(_ref) {
   })));
 };
 
-ContextualMenuDropdown.propTypes = {
-  adjustedPosition: _propTypes.default.oneOf(["left", "center", "right"]),
-  autoAdjust: _propTypes.default.bool,
-  closePortal: _propTypes.default.func,
-  constrainPanelWidth: _propTypes.default.bool,
-  dropdownClassName: _propTypes.default.string,
-  dropdownContent: _propTypes.default.node,
-  id: _propTypes.default.string,
-  isOpen: _propTypes.default.bool,
-  links: _propTypes.default.array,
-  position: _propTypes.default.oneOf(["left", "center", "right"]),
-  setAdjustedPosition: _propTypes.default.func,
-  wrapperClass: _propTypes.default.string
-};
 var _default = ContextualMenuDropdown;
 exports.default = _default;

package/dist/components/Field/Field.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -91,19 +89,5 @@ var Field = function Field(_ref) {
   }, content) : content);
 };
 
-Field.propTypes = {
-  caution: _propTypes.default.node,
-  children: _propTypes.default.node,
-  error: _propTypes.default.node,
-  forId: _propTypes.default.string,
-  help: _propTypes.default.node,
-  isSelect: _propTypes.default.bool,
-  label: _propTypes.default.node,
-  labelClassName: _propTypes.default.string,
-  labelFirst: _propTypes.default.bool,
-  required: _propTypes.default.bool,
-  stacked: _propTypes.default.bool,
-  success: _propTypes.default.node
-};
 var _default = Field;
 exports.default = _default;

package/dist/components/Input/Input.js

@@ -13,6 +13,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Field = _interopRequireDefault(require("../Field"));
 
+var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput"));
+
+var _RadioInput = _interopRequireDefault(require("../RadioInput"));
+
 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; }
@@ -42,31 +46,47 @@ var Input = function Input(_ref) {
       inputProps = _objectWithoutProperties(_ref, ["caution", "className", "error", "help", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "type", "wrapperClassName"]);
 
   var inputRef = (0, _react.useRef)(null);
-  var labelFirst = !["checkbox", "radio"].includes(type);
+  var fieldLabel = !["checkbox", "radio"].includes(type) ? label : "";
+
+  var input = /*#__PURE__*/_react.default.createElement("input", _extends({
+    className: (0, _classnames.default)("p-form-validation__input", className),
+    id: id,
+    ref: inputRef,
+    required: required,
+    type: type,
+    "aria-invalid": !!error
+  }, inputProps));
+
   (0, _react.useEffect)(function () {
     if (takeFocus) {
       inputRef.current.focus();
     }
   }, [takeFocus]);
+
+  if (type === "checkbox") {
+    input = /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, _extends({
+      label: label,
+      id: id
+    }, inputProps));
+  } else if (type === "radio") {
+    input = /*#__PURE__*/_react.default.createElement(_RadioInput.default, _extends({
+      label: label,
+      id: id
+    }, inputProps));
+  }
+
   return /*#__PURE__*/_react.default.createElement(_Field.default, {
     caution: caution,
     className: wrapperClassName,
     error: error,
     forId: id,
     help: help,
-    label: label,
+    label: fieldLabel,
     labelClassName: labelClassName,
-    labelFirst: labelFirst,
     required: required,
     stacked: stacked,
     success: success
-  }, /*#__PURE__*/_react.default.createElement("input", _extends({
-    className: (0, _classnames.default)("p-form-validation__input", className),
-    id: id,
-    ref: inputRef,
-    type: type,
-    "aria-invalid": !!error
-  }, inputProps)));
+  }, input);
 };
 
 var _default = Input;

package/dist/components/Link/Link.d.ts

@@ -9,10 +9,6 @@ export declare type Props = PropsWithSpread<{
      * Optional class(es) to pass to the wrapping anchor element.
      */
     className?: ClassName;
-    /**
-     * Whether the link should have external styling.
-     */
-    external?: boolean;
     /**
      * Whether the link should have inverted styling.
      */
@@ -26,5 +22,5 @@ export declare type Props = PropsWithSpread<{
      */
     top?: boolean;
 }, HTMLProps<HTMLAnchorElement>>;
-declare const Link: ({ children, className, external, href, inverted, soft, top, ...props }: Props) => JSX.Element;
+declare const Link: ({ children, className, href, inverted, soft, top, ...props }: Props) => JSX.Element;
 export default Link;

package/dist/components/Link/Link.js

@@ -20,8 +20,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Link = function Link(_ref) {
   var children = _ref.children,
       className = _ref.className,
-      _ref$external = _ref.external,
-      external = _ref$external === void 0 ? false : _ref$external,
       _ref$href = _ref.href,
       href = _ref$href === void 0 ? "#" : _ref$href,
       _ref$inverted = _ref.inverted,
@@ -30,11 +28,10 @@ var Link = function Link(_ref) {
       soft = _ref$soft === void 0 ? false : _ref$soft,
       _ref$top = _ref.top,
       top = _ref$top === void 0 ? false : _ref$top,
-      props = _objectWithoutProperties(_ref, ["children", "className", "external", "href", "inverted", "soft", "top"]);
+      props = _objectWithoutProperties(_ref, ["children", "className", "href", "inverted", "soft", "top"]);
 
   var link = /*#__PURE__*/_react.default.createElement("a", _extends({
     className: (0, _classnames.default)(className, {
-      "p-link--external": external,
       "p-link--inverted": inverted,
       "p-link--soft": soft,
       "p-top__link": top

package/dist/components/List/List.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -30,7 +28,7 @@ var generateItems = function generateItems(items, ticked, inline, stepped) {
     var TitleComponent = "h3";
     var liProps;
 
-    if (_react.default.isValidElement(item) || typeof item === "string" || typeof item === "number") {
+    if ( /*#__PURE__*/_react.default.isValidElement(item) || typeof item === "string" || typeof item === "number") {
       content = item;
     } else if (item && _typeof(item) === "object" && "content" in item) {
       if ("titleElement" in item) {
@@ -104,17 +102,5 @@ var List = function List(_ref) {
   }, props), generateItems(items, ticked, inline || middot || stretch, stepped));
 };
 
-List.propTypes = {
-  items: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.array]).isRequired,
-  detailed: _propTypes.default.bool,
-  divided: _propTypes.default.bool,
-  inline: _propTypes.default.bool,
-  isDark: _propTypes.default.bool,
-  middot: _propTypes.default.bool,
-  split: _propTypes.default.bool,
-  stepped: _propTypes.default.bool,
-  stretch: _propTypes.default.bool,
-  ticked: _propTypes.default.bool
-};
 var _default = List;
 exports.default = _default;

package/dist/components/PaginationButton/PaginationButton.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -29,14 +27,9 @@ var PaginationButton = function PaginationButton(_ref) {
     disabled: disabled,
     onClick: onClick
   }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "p-icon--contextual-menu"
+    className: "p-icon--chevron-down"
   }, label)));
 };
 
-PaginationButton.propTypes = {
-  direction: _propTypes.default.oneOf(["forward", "back"]).isRequired,
-  disabled: _propTypes.default.bool,
-  onClick: _propTypes.default.func.isRequired
-};
 var _default = PaginationButton;
 exports.default = _default;

package/dist/components/PaginationItem/PaginationItem.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -28,10 +26,5 @@ var PaginationItem = function PaginationItem(_ref) {
   }, number));
 };
 
-PaginationItem.propTypes = {
-  isActive: _propTypes.default.bool,
-  number: _propTypes.default.number.isRequired,
-  onClick: _propTypes.default.func.isRequired
-};
 var _default = PaginationItem;
 exports.default = _default;

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

@@ -41,6 +41,10 @@ export declare type Props = PropsWithSpread<{
      * The content for success validation.
      */
     success?: ReactNode;
+    /**
+     * The content for success validation.
+     */
+    type?: "submit" | "reset" | "button";
     /**
      * Optional class(es) to pass to the wrapping Field component
      */
@@ -83,9 +87,13 @@ declare const PasswordToggle: React.ForwardRefExoticComponent<{
      * The content for success validation.
      */
     success?: ReactNode;
+    /**
+     * The content for success validation.
+     */
+    type?: "submit" | "reset" | "button";
     /**
      * 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>>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "label" | "className" | "error" | "id" | "type" | "readOnly" | "required" | "help" | "success" | "caution" | "wrapperClassName"> & React.RefAttributes<HTMLInputElement>>;
 export default PasswordToggle;

package/dist/components/PasswordToggle/PasswordToggle.js

@@ -41,7 +41,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 PasswordToggle = _react.default.forwardRef(function (_ref, ref) {
+var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var caution = _ref.caution,
       className = _ref.className,
       error = _ref.error,
@@ -51,8 +51,9 @@ var PasswordToggle = _react.default.forwardRef(function (_ref, ref) {
       readOnly = _ref.readOnly,
       required = _ref.required,
       success = _ref.success,
+      type = _ref.type,
       wrapperClassName = _ref.wrapperClassName,
-      inputProps = _objectWithoutProperties(_ref, ["caution", "className", "error", "help", "id", "label", "readOnly", "required", "success", "wrapperClassName"]);
+      inputProps = _objectWithoutProperties(_ref, ["caution", "className", "error", "help", "id", "label", "readOnly", "required", "success", "type", "wrapperClassName"]);
 
   var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -81,6 +82,7 @@ var PasswordToggle = _react.default.forwardRef(function (_ref, ref) {
     required: required
   }, label), /*#__PURE__*/_react.default.createElement(_Button.default, {
     appearance: "base",
+    type: type ? type : "button",
     className: "u-no-margin--bottom",
     hasIcon: true,
     "aria-controls": id,

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

@@ -123,9 +123,8 @@ var FilterPanelSection = function FilterPanelSection(_ref) {
     // should display
     var searchTermInChip = (0, _utils2.highlightSubString)(chip.value, searchTerm).match;
     var chipVisible = searchTermInChip || searchTerm === "" || (0, _utils2.highlightSubString)(heading, searchTerm).match;
-    return /*#__PURE__*/_react.default.createElement("span", {
-      key: "".concat(chip.lead, "+").concat(chip.value)
-    }, chipVisible && !sectionHidden && /*#__PURE__*/_react.default.createElement(_Chip.default, {
+    return chipVisible && !sectionHidden && /*#__PURE__*/_react.default.createElement(_Chip.default, {
+      key: "".concat(chip.lead, "+").concat(chip.value),
       lead: chip.lead,
       value: chip.value,
       selected: (0, _utils.isChipInArray)(chip, searchData),
@@ -133,7 +132,7 @@ var FilterPanelSection = function FilterPanelSection(_ref) {
       onClick: function onClick() {
         return handleChipClick(chip);
       }
-    }));
+    });
   }), overflowCounter > 0 && !expanded && /*#__PURE__*/_react.default.createElement("span", {
     className: "p-filter-panel-section__counter",
     onClick: showAllChips,

package/dist/components/SummaryButton/SummaryButton.js

@@ -5,16 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _ActionButton = _interopRequireDefault(require("../ActionButton"));
 
-var _Button = require("../Button/Button");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var SummaryButton = function SummaryButton(_ref) {
@@ -28,7 +24,6 @@ var SummaryButton = function SummaryButton(_ref) {
   }, summary && /*#__PURE__*/_react.default.createElement("span", {
     className: "u-text--muted"
   }, summary), onClick && /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
-    appearance: _Button.ButtonAppearance.NEUTRAL,
     className: (0, _classnames.default)("is-small", "is-dense", {
       "is-inline": summary
     }),
@@ -38,11 +33,5 @@ var SummaryButton = function SummaryButton(_ref) {
   }, label));
 };
 
-SummaryButton.propTypes = {
-  isLoading: _propTypes.default.bool,
-  label: _propTypes.default.string.isRequired,
-  onClick: _propTypes.default.func.isRequired,
-  summary: _propTypes.default.string
-};
 var _default = SummaryButton;
 exports.default = _default;

package/dist/components/Tabs/Tabs.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -47,9 +45,5 @@ var Tabs = function Tabs(_ref) {
   })));
 };
 
-Tabs.propTypes = {
-  links: _propTypes.default.array.isRequired,
-  listClassName: _propTypes.default.string
-};
 var _default = Tabs;
 exports.default = _default;

package/dist/components/Tooltip/Tooltip.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.adjustForWindow = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -236,14 +234,5 @@ var Tooltip = function Tooltip(_ref) {
   }, children));
 };
 
-Tooltip.propTypes = {
-  autoAdjust: _propTypes.default.bool,
-  children: _propTypes.default.node.isRequired,
-  followMouse: _propTypes.default.bool,
-  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
-};
 var _default = Tooltip;
 exports.default = _default;

package/dist/hooks/useListener.js

@@ -1,22 +1,16 @@
 "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.useListener = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _useThrottle = require("./useThrottle");
 
 var _usePrevious = require("./usePrevious");
 
-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; }
-
 /**
  * A hook that handles attaching/removing listeners and smartly reattaching if
  * any of the attributes change.

package/dist/hooks/usePrevious.js

@@ -1,17 +1,11 @@
 "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.usePrevious = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
+var _react = require("react");
 
 /**
  * A hook to handle storing the previous value of anything.

package/dist/hooks/useThrottle.js

@@ -1,17 +1,11 @@
 "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.useThrottle = exports.THROTTLE_DELAY = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
+var _react = require("react");
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 

package/dist/hooks/useWindowFitment.js

@@ -1,20 +1,14 @@
 "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.useWindowFitment = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _useListener = require("./useListener");
 
-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; }
-
 /**
  * A hook to determine if an element fits on the window.
  * @param targetNode The element to try and fit on the window.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.24.0",
+  "version": "0.30.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -22,81 +22,84 @@
   },
   "homepage": "/react-components/",
   "devDependencies": {
-    "@babel/cli": "7.16.0",
-    "@babel/preset-typescript": "7.16.0",
-    "@percy/storybook": "3.3.1",
-    "@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",
+    "@babel/cli": "7.16.7",
+    "@babel/eslint-parser": "7.16.5",
+    "@babel/preset-typescript": "7.16.7",
+    "@percy/cli": "1.0.0-beta.71",
+    "@percy/storybook": "4.1.0",
+    "@storybook/addon-a11y": "6.4.9",
+    "@storybook/addon-controls": "6.4.9",
+    "@storybook/addon-docs": "6.4.9",
+    "@storybook/addons": "6.4.9",
+    "@storybook/react": "6.4.9",
+    "@storybook/theming": "6.4.9",
     "@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.3.1",
+    "@typescript-eslint/eslint-plugin": "5.9.1",
+    "@typescript-eslint/parser": "5.9.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.6",
+    "babel-jest": "27.4.5",
     "babel-loader": "8.2.3",
     "babel-plugin-module-resolver": "4.1.0",
-    "babel-plugin-typescript-to-proptypes": "1.4.2",
-    "concurrently": "6.4.0",
+    "babel-plugin-typescript-to-proptypes": "2.0.0",
+    "concurrently": "6.5.1",
     "css-loader": "5.2.7",
-    "cypress": "7.7.0",
+    "cypress": "9.2.0",
     "deepmerge": "4.2.2",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
-    "eslint": "7.32.0",
+    "eslint": "8.6.0",
     "eslint-config-prettier": "8.3.0",
-    "eslint-config-react-app": "6.0.0",
+    "eslint-config-react-app": "7.0.0",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-flowtype": "5.10.0",
-    "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-flowtype": "8.0.3",
+    "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-prettier": "3.4.1",
-    "eslint-plugin-react": "7.27.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.28.0",
     "eslint-plugin-react-hooks": "4.3.0",
-    "jest": "27.3.1",
-    "node-sass": "6.0.1",
+    "jest": "27.4.5",
     "npm-package-json-lint": "5.4.2",
-    "prettier": "2.4.1",
+    "prettier": "2.5.1",
     "react": "17.0.2",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "17.0.2",
+    "sass": "1.48.0",
     "sass-loader": "10.2.0",
     "style-loader": "2.0.0",
-    "stylelint": "13.13.1",
-    "stylelint-config-prettier": "8.0.2",
-    "stylelint-config-standard": "22.0.0",
-    "stylelint-order": "4.1.0",
-    "stylelint-prettier": "1.2.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",
+    "stylelint": "14.2.0",
+    "stylelint-config-prettier": "9.0.3",
+    "stylelint-config-recommended-scss": "5.0.2",
+    "stylelint-order": "5.0.0",
+    "stylelint-prettier": "2.0.0",
+    "ts-jest": "27.1.2",
+    "tsc-alias": "1.5.0",
+    "typescript": "4.5.4",
+    "vanilla-framework": "3.0.1",
     "wait-on": "5.3.0"
   },
   "dependencies": {
-    "@types/jest": "27.0.3",
-    "@types/node": "16.11.9",
-    "@types/react": "17.0.36",
+    "@types/jest": "27.4.0",
+    "@types/node": "16.11.18",
+    "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
-    "@types/react-table": "7.7.8",
+    "@types/react-table": "7.7.9",
     "classnames": "2.3.1",
     "nanoid": "3.1.30",
-    "prop-types": "15.7.2",
+    "prop-types": "15.8.0",
     "react-table": "7.7.0",
-    "react-useportal": "1.0.14"
+    "react-useportal": "1.0.16"
+  },
+  "resolutions": {
+    "postcss": "^8.3.11"
   },
   "peerDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "vanilla-framework": "2.37.1"
+    "vanilla-framework": "3.0.1"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",
@@ -108,10 +111,10 @@
     "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",
+    "lint-style": "stylelint src/**/*.scss",
     "lint-package-json": "npmPkgJsonLint .",
     "lint": "yarn lint-package-json && yarn lint-js && yarn lint-style",
-    "percy": "yarn build-docs && percy-storybook --build_dir=docs --widths=1280",
+    "percy": "yarn build-docs && percy storybook ./docs",
     "prepublishOnly": "yarn clean && yarn install && yarn build",
     "serve": "yarn docs",
     "start": "yarn docs",