@canonical/react-components 0.31.0 → 0.32.0

package/dist/components/AccordionSection/AccordionSection.js

@@ -1,19 +1,15 @@
 "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
 });
 exports.default = void 0;
 
-var _nanoid = require("nanoid");
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
-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); }
+var _useId = require("../../hooks/useId");
 
-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 }; }
 
 var AccordionSection = function AccordionSection(_ref) {
   var content = _ref.content,
@@ -25,8 +21,8 @@ var AccordionSection = function AccordionSection(_ref) {
       titleElement = _ref.titleElement,
       _ref$headingLevel = _ref.headingLevel,
       headingLevel = _ref$headingLevel === void 0 ? 3 : _ref$headingLevel;
-  var sectionId = (0, _react.useRef)((0, _nanoid.nanoid)());
-  var key = sectionKey || sectionId.current;
+  var sectionId = (0, _useId.useId)();
+  var key = sectionKey || sectionId;
   var isExpanded = expanded === key;
   var Title = titleElement || "div";
   return /*#__PURE__*/_react.default.createElement("li", {
@@ -36,7 +32,7 @@ var AccordionSection = function AccordionSection(_ref) {
     "aria-level": titleElement ? null : headingLevel,
     className: "p-accordion__heading"
   }, /*#__PURE__*/_react.default.createElement("button", {
-    "aria-controls": "#".concat(sectionId.current),
+    "aria-controls": "#".concat(sectionId),
     "aria-expanded": isExpanded ? "true" : "false",
     className: "p-accordion__tab",
     onClick: function onClick() {
@@ -52,9 +48,9 @@ var AccordionSection = function AccordionSection(_ref) {
     type: "button"
   }, title)), /*#__PURE__*/_react.default.createElement("section", {
     "aria-hidden": isExpanded ? "false" : "true",
-    "aria-labelledby": sectionId.current,
+    "aria-labelledby": sectionId,
     className: "p-accordion__panel",
-    id: sectionId.current,
+    id: sectionId,
     role: "tabpanel"
   }, content));
 };

package/dist/components/CheckableInput/CheckableInput.d.ts

@@ -10,10 +10,18 @@ export declare type Props = PropsWithSpread<{
      * The label for the input element.
      */
     label: ReactNode;
+    /**
+     * Optional class(es) to pass to the label element.
+     */
+    labelClassName?: string;
     /**
      * Whether the input element should display in indeterminate state.
      */
     indeterminate?: boolean;
+    /**
+     * Ensures the input and the label text are properly aligned with other inline text.
+     */
+    inline?: boolean;
 }, Omit<HTMLProps<HTMLInputElement>, "type">>;
-declare const CheckableInput: ({ inputType, label, indeterminate, ...checkboxProps }: Props) => JSX.Element;
+declare const CheckableInput: ({ inputType, label, labelClassName, indeterminate, ...checkboxProps }: Props) => JSX.Element;
 export default CheckableInput;

package/dist/components/CheckableInput/CheckableInput.js

@@ -9,11 +9,11 @@ exports.default = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _nanoid = require("nanoid");
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _excluded = ["inputType", "label", "indeterminate"];
+var _useId = require("../../hooks/useId");
+
+var _excluded = ["inputType", "label", "labelClassName", "indeterminate"];
 
 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); }
 
@@ -30,27 +30,28 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var CheckableInput = function CheckableInput(_ref) {
   var inputType = _ref.inputType,
       label = _ref.label,
+      labelClassName = _ref.labelClassName,
       _ref$indeterminate = _ref.indeterminate,
       indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
       checkboxProps = _objectWithoutProperties(_ref, _excluded);
 
-  var inputId = (0, _react.useRef)((0, _nanoid.nanoid)());
+  var inputId = (0, _useId.useId)();
   var inputRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     inputRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
   return /*#__PURE__*/_react.default.createElement("label", {
-    className: (0, _classnames.default)("p-".concat(inputType), {
+    className: (0, _classnames.default)(labelClassName, "p-".concat(inputType).concat(checkboxProps.inline ? "--inline" : ""), {
       "is-required": checkboxProps.required
     })
   }, /*#__PURE__*/_react.default.createElement("input", _extends({
-    "aria-labelledby": inputId.current,
+    "aria-labelledby": inputId,
     className: "p-".concat(inputType, "__input"),
     ref: inputRef,
     type: inputType
   }, checkboxProps)), /*#__PURE__*/_react.default.createElement("span", {
     className: "p-".concat(inputType, "__label"),
-    id: inputId.current
+    id: inputId
   }, label));
 };
 

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _nanoid = require("nanoid");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -21,6 +19,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _ContextualMenuDropdown = _interopRequireDefault(require("./ContextualMenuDropdown"));
 
+var _useId = require("../../hooks/useId");
+
 var _excluded = ["autoAdjust", "children", "className", "closeOnEsc", "closeOnOutsideClick", "constrainPanelWidth", "dropdownClassName", "dropdownProps", "hasToggleIcon", "links", "onToggleMenu", "position", "positionNode", "toggleAppearance", "toggleClassName", "toggleDisabled", "toggleLabel", "toggleLabelFirst", "toggleProps", "visible"];
 
 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); }
@@ -129,7 +129,7 @@ var ContextualMenu = function ContextualMenu(_ref) {
       visible = _ref$visible === void 0 ? false : _ref$visible,
       wrapperProps = _objectWithoutProperties(_ref, _excluded);
 
-  var id = (0, _react.useRef)((0, _nanoid.nanoid)());
+  var id = (0, _useId.useId)();
   var wrapper = (0, _react.useRef)();
 
   var _useState = (0, _react.useState)(),
@@ -223,7 +223,7 @@ var ContextualMenu = function ContextualMenu(_ref) {
     }
   }, wrapperProps), hasToggle ? /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
     appearance: toggleAppearance,
-    "aria-controls": id.current,
+    "aria-controls": id,
     "aria-expanded": isOpen ? "true" : "false",
     "aria-pressed": isOpen ? "true" : "false",
     "aria-haspopup": "true",
@@ -254,7 +254,7 @@ var ContextualMenu = function ContextualMenu(_ref) {
     constrainPanelWidth: constrainPanelWidth,
     dropdownClassName: dropdownClassName,
     dropdownContent: children,
-    id: id.current,
+    id: id,
     isOpen: isOpen,
     links: links,
     position: position,

package/dist/components/Input/Input.js

@@ -49,31 +49,35 @@ var Input = function Input(_ref) {
 
   var inputRef = (0, _react.useRef)(null);
   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]);
+  var input;
 
   if (type === "checkbox") {
     input = /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, _extends({
+      id: id,
       label: label,
-      id: id
+      labelClassName: labelClassName,
+      required: required
     }, inputProps));
   } else if (type === "radio") {
     input = /*#__PURE__*/_react.default.createElement(_RadioInput.default, _extends({
+      id: id,
       label: label,
-      id: id
+      labelClassName: labelClassName,
+      required: required
+    }, inputProps));
+  } else {
+    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));
   }
 

package/dist/components/MainTable/MainTable.d.ts

@@ -15,6 +15,10 @@ export declare type MainTableHeader = PropsWithSpread<{
      * A key to sort the rows by. It should match a key given to the row `sortData`.
      */
     sortKey?: string | null;
+    /**
+     * Replacement value for data-heading if content is not a string.
+     */
+    heading?: string;
 }, HTMLProps<HTMLTableHeaderCellElement>>;
 export declare type MainTableCell = PropsWithSpread<{
     /**

package/dist/components/MainTable/MainTable.js

@@ -102,7 +102,7 @@ var generateHeaders = function generateHeaders(currentSortKey, currentSortDirect
   })));
 };
 
-var generateRows = function generateRows(currentSortDirection, currentSortKey, emptyStateMsg, expanding, paginate, rows, currentPage, setCurrentPage, sortable, sortFunction) {
+var generateRows = function generateRows(currentSortDirection, currentSortKey, emptyStateMsg, expanding, responsive, headers, paginate, rows, currentPage, setCurrentPage, sortable, sortFunction) {
   // If the table has no rows, return empty state message
   if (Object.entries(rows).length === 0 && emptyStateMsg) {
     return /*#__PURE__*/_react.default.createElement("caption", null, emptyStateMsg);
@@ -159,6 +159,13 @@ var generateRows = function generateRows(currentSortDirection, currentSortKey, e
       var content = _ref3.content,
           cellProps = _objectWithoutProperties(_ref3, _excluded3);
 
+      var headerContent = headers && headers[index]["content"];
+      var headerReplacement = headers && headers[index]["heading"];
+
+      if (responsive) {
+        cellProps["data-heading"] = typeof headerContent === "string" ? headerContent : headerReplacement;
+      }
+
       return /*#__PURE__*/_react.default.createElement(_TableCell.default, _extends({
         key: index
       }, cellProps), content);
@@ -227,7 +234,7 @@ var MainTable = function MainTable(_ref4) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Table.default, _extends({
     expanding: expanding,
     responsive: responsive
-  }, props), !!headers && generateHeaders(currentSortKey, currentSortDirection, expanding, headers, sortable, updateSort, setSortDirection), !!rows && generateRows(currentSortDirection, currentSortKey, emptyStateMsg, expanding, paginate, rows, currentPage, setCurrentPage, sortable, sortFunction)), paginate && rows && rows.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.default, {
+  }, props), !!headers && generateHeaders(currentSortKey, currentSortDirection, expanding, headers, sortable, updateSort, setSortDirection), !!rows && generateRows(currentSortDirection, currentSortKey, emptyStateMsg, expanding, responsive, headers, paginate, rows, currentPage, setCurrentPage, sortable, sortFunction)), paginate && rows && rows.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.default, {
     currentPage: currentPage,
     itemsPerPage: paginate,
     paginate: setCurrentPage,

package/dist/components/Modal/Modal.js

@@ -9,10 +9,10 @@ exports.default = exports.Modal = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _nanoid = require("nanoid");
-
 var _react = _interopRequireWildcard(require("react"));
 
+var _useId = require("../../hooks/useId");
+
 var _excluded = ["buttonRow", "children", "className", "close", "title"];
 
 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); }
@@ -38,8 +38,8 @@ var Modal = function Modal(_ref) {
   // 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)());
+  var descriptionId = (0, _useId.useId)();
+  var titleId = (0, _useId.useId)();
   var shouldClose = (0, _react.useRef)(false);
   var modalRef = (0, _react.useRef)(null);
   var focusableModalElements = (0, _react.useRef)(null);
@@ -113,21 +113,21 @@ var Modal = function Modal(_ref) {
     className: "p-modal__dialog",
     role: "dialog",
     "aria-modal": "true",
-    "aria-labelledby": titleId.current,
-    "aria-describedby": descriptionId.current,
+    "aria-labelledby": titleId,
+    "aria-describedby": descriptionId,
     onMouseDown: handleContentOnMouseDown,
     onMouseUp: handleContentOnMouseUp
   }, !!title && /*#__PURE__*/_react.default.createElement("header", {
     className: "p-modal__header"
   }, /*#__PURE__*/_react.default.createElement("h2", {
     className: "p-modal__title",
-    id: titleId.current
+    id: titleId
   }, title), !!close && /*#__PURE__*/_react.default.createElement("button", {
     className: "p-modal__close",
     "aria-label": "Close active modal",
     onClick: close
   }, "Close")), /*#__PURE__*/_react.default.createElement("div", {
-    id: descriptionId.current
+    id: descriptionId
   }, children), !!buttonRow && /*#__PURE__*/_react.default.createElement("footer", {
     className: "p-modal__footer"
   }, buttonRow)));

package/dist/components/Spinner/Spinner.d.ts

@@ -13,6 +13,14 @@ export declare type Props = {
      * Text to display next to the spinner.
      */
     text?: string;
+    /**
+     * What the role of the spinner should be.
+     */
+    role?: string;
+    /**
+     * The politeness setting of the spinner alert.
+     */
+    ariaLive?: "assertive" | "off" | "polite";
 } & HTMLProps<HTMLSpanElement>;
-declare const Spinner: ({ className, text, isLight, ...props }: Props) => JSX.Element;
+declare const Spinner: ({ className, text, isLight, ariaLive, role, ...props }: Props) => JSX.Element;
 export default Spinner;

package/dist/components/Spinner/Spinner.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _excluded = ["className", "text", "isLight"];
+var _excluded = ["className", "text", "isLight", "ariaLive", "role"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -26,20 +26,28 @@ var Spinner = function Spinner(_ref) {
       text = _ref.text,
       _ref$isLight = _ref.isLight,
       isLight = _ref$isLight === void 0 ? false : _ref$isLight,
+      _ref$ariaLive = _ref.ariaLive,
+      ariaLive = _ref$ariaLive === void 0 ? "polite" : _ref$ariaLive,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? "alert" : _ref$role,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement("span", _extends({}, props, {
-    className: (0, _classnames.default)(className, "p-text--default")
+    className: (0, _classnames.default)(className, "p-text--default"),
+    role: role,
+    "aria-live": ariaLive
   }), /*#__PURE__*/_react.default.createElement("i", {
     className: (0, _classnames.default)("p-icon--spinner", "u-animation--spin", {
       "is-light": isLight
     })
-  }), text && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2002", /*#__PURE__*/_react.default.createElement("span", null, text)));
+  }, text ? text : "Loading"), text && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2002", /*#__PURE__*/_react.default.createElement("span", null, text)));
 };
 
 Spinner.propTypes = {
   isLight: _propTypes.default.bool,
-  text: _propTypes.default.string
+  text: _propTypes.default.string,
+  role: _propTypes.default.string,
+  ariaLive: _propTypes.default.oneOf(["assertive", "off", "polite"])
 };
 var _default = Spinner;
 exports.default = _default;

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLProps, ReactNode } from "react";
+import type { PropsWithSpread } from "../../types";
+export declare type Props = PropsWithSpread<{
+    /**
+     * The label name for the switch
+     */
+    label: ReactNode;
+    /**
+     * Whether the switch is disabled or not
+     */
+    disabled?: boolean;
+}, HTMLProps<HTMLInputElement>>;
+export declare const Switch: ({ label, disabled, ...inputProps }: Props) => JSX.Element;
+export default Switch;

package/dist/components/Switch/Switch.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Switch = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+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 _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 Switch = function Switch(_ref) {
+  var label = _ref.label,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      inputProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement("label", {
+    className: "p-switch"
+  }, /*#__PURE__*/_react.default.createElement("input", _extends({
+    type: "checkbox",
+    className: "p-switch__input",
+    role: "switch",
+    disabled: disabled
+  }, inputProps)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "p-switch__slider"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: "p-switch__label"
+  }, label));
+};
+
+exports.Switch = Switch;
+var _default = Switch;
+exports.default = _default;

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

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

package/dist/components/Switch/index.js

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

package/dist/hooks/index.d.ts

@@ -2,4 +2,5 @@ export { useWindowFitment } from "./useWindowFitment";
 export { useListener } from "./useListener";
 export { usePrevious } from "./usePrevious";
 export { useThrottle } from "./useThrottle";
+export { useId } from "./useId";
 export type { WindowFitment } from "./useWindowFitment";

package/dist/hooks/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useId", {
+  enumerable: true,
+  get: function get() {
+    return _useId.useId;
+  }
+});
 Object.defineProperty(exports, "useListener", {
   enumerable: true,
   get: function get() {
@@ -34,4 +40,6 @@ var _useListener = require("./useListener");
 
 var _usePrevious = require("./usePrevious");
 
-var _useThrottle = require("./useThrottle");
+var _useThrottle = require("./useThrottle");
+
+var _useId = require("./useId");

package/dist/hooks/useId.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A hook that returns the same random ID string on every render.
+ * Can be used as a value for HTML "id" attributes.
+ * @returns random ID string
+ */
+export declare const useId: () => string;

package/dist/hooks/useId.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useId = void 0;
+
+var _react = require("react");
+
+var _nanoid = require("nanoid");
+
+/**
+ * A hook that returns the same random ID string on every render.
+ * Can be used as a value for HTML "id" attributes.
+ * @returns random ID string
+ */
+var useId = function useId() {
+  return (0, _react.useRef)((0, _nanoid.nanoid)()).current;
+};
+
+exports.useId = useId;

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export { default as SearchAndFilter } from "./components/SearchAndFilter";
 export { default as SearchBox } from "./components/SearchBox";
 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 Strip } from "./components/Strip";
 export { default as SummaryButton } from "./components/SummaryButton";
@@ -80,4 +81,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 type { WindowFitment } from "./hooks";
 export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";

package/dist/index.js

@@ -233,6 +233,12 @@ Object.defineProperty(exports, "SummaryButton", {
     return _SummaryButton.default;
   }
 });
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function get() {
+    return _Switch.default;
+  }
+});
 Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function get() {
@@ -275,6 +281,36 @@ Object.defineProperty(exports, "Tooltip", {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "useId", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useId;
+  }
+});
+Object.defineProperty(exports, "useListener", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useListener;
+  }
+});
+Object.defineProperty(exports, "usePrevious", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.usePrevious;
+  }
+});
+Object.defineProperty(exports, "useThrottle", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useThrottle;
+  }
+});
+Object.defineProperty(exports, "useWindowFitment", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useWindowFitment;
+  }
+});
 
 var _Accordion = _interopRequireDefault(require("./components/Accordion"));
 
@@ -338,6 +374,8 @@ var _Select = _interopRequireDefault(require("./components/Select"));
 
 var _Slider = _interopRequireDefault(require("./components/Slider"));
 
+var _Switch = _interopRequireDefault(require("./components/Switch"));
+
 var _Spinner = _interopRequireDefault(require("./components/Spinner"));
 
 var _Strip = _interopRequireDefault(require("./components/Strip"));
@@ -358,6 +396,8 @@ var _Textarea = _interopRequireDefault(require("./components/Textarea"));
 
 var _Tooltip = _interopRequireDefault(require("./components/Tooltip"));
 
+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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -35,6 +35,8 @@
     "@storybook/theming": "6.4.18",
     "@testing-library/cypress": "8.0.2",
     "@testing-library/dom": "8.11.3",
+    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.5.0",
     "@typescript-eslint/eslint-plugin": "5.10.2",
@@ -61,6 +63,7 @@
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-react": "7.28.0",
     "eslint-plugin-react-hooks": "4.3.0",
+    "eslint-plugin-testing-library": "5.0.5",
     "jest": "27.4.7",
     "npm-package-json-lint": "5.4.2",
     "prettier": "2.5.1",
@@ -78,7 +81,7 @@
     "ts-jest": "27.1.3",
     "tsc-alias": "1.5.0",
     "typescript": "4.5.5",
-    "vanilla-framework": "3.1.0",
+    "vanilla-framework": "3.1.1",
     "wait-on": "5.3.0"
   },
   "dependencies": {
@@ -99,7 +102,7 @@
   "peerDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "vanilla-framework": "3.1.0"
+    "vanilla-framework": "3.1.1"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",
@@ -151,10 +154,10 @@
     "snapshotSerializers": [
       "enzyme-to-json/serializer"
     ],
-    "setupFiles": [
+    "setupFilesAfterEnv": [
       "<rootDir>/src/setupTests.js"
     ],
-    "testEnvironment": "jsdom",
+    "testEnvironment": "jest-environment-jsdom",
     "moduleDirectories": [
       "node_modules",
       "src"