@canonical/react-components 0.31.0 → 0.34.0

package/dist/__mocks__/nanoid.d.ts

@@ -0,0 +1 @@
+export declare const nanoid: () => string;

package/dist/__mocks__/nanoid.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.nanoid = void 0;
+var id = 0;
+beforeEach(function () {
+  id = 0;
+});
+
+var nanoid = function nanoid() {
+  id++;
+  return "mock-nanoid-".concat(id);
+};
+
+exports.nanoid = nanoid;

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/Chip/Chip.d.ts

@@ -1,12 +1,12 @@
-import type { MouseEvent } from "react";
-import { ValueOf } from "../../types";
+import type { MouseEvent, HTMLProps } from "react";
+import { ValueOf, PropsWithSpread } from "../../types";
 export declare const ChipType: {
     readonly CAUTION: "caution";
     readonly INFORMATION: "information";
     readonly NEGATIVE: "negative";
     readonly POSITIVE: "positive";
 };
-export declare type Props = {
+export declare type Props = PropsWithSpread<{
     /**
      * The appearance of the chip.
      */
@@ -43,6 +43,6 @@ export declare type Props = {
      * The value of the chip.
      */
     value: string;
-};
-declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, }: Props) => JSX.Element;
+}, HTMLProps<HTMLButtonElement>>;
+declare const Chip: ({ appearance, lead, onClick, onDismiss, quoteValue, selected, subString, value, ...props }: Props) => JSX.Element;
 export default Chip;

package/dist/components/Chip/Chip.js

@@ -11,10 +11,18 @@ var _utils = require("../../utils");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _excluded = ["appearance", "lead", "onClick", "onDismiss", "quoteValue", "selected", "subString", "value"];
+
 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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+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 ChipType = {
   CAUTION: "caution",
   INFORMATION: "information",
@@ -35,7 +43,8 @@ var Chip = function Chip(_ref) {
       selected = _ref.selected,
       _ref$subString = _ref.subString,
       subString = _ref$subString === void 0 ? "" : _ref$subString,
-      value = _ref.value;
+      value = _ref.value,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   // When user tabs over chip and presses Enter or Space key, chip will trigger
   // click functionality
@@ -62,29 +71,28 @@ var Chip = function Chip(_ref) {
     }
   }));
 
-  var chipClassName = (0, _classnames.default)((_classNames = {}, _defineProperty(_classNames, "p-chip--".concat(appearance), !!appearance), _defineProperty(_classNames, "p-chip", !appearance), _classNames));
+  var chipClassName = (0, _classnames.default)((_classNames = {}, _defineProperty(_classNames, "p-chip--".concat(appearance), !!appearance), _defineProperty(_classNames, "p-chip", !appearance), _classNames), props.className);
 
   if (onDismiss) {
-    return /*#__PURE__*/_react.default.createElement("span", {
-      className: chipClassName,
-      "aria-pressed": selected
-    }, chipContent, /*#__PURE__*/_react.default.createElement("button", {
+    return /*#__PURE__*/_react.default.createElement("span", _extends({}, props, {
+      className: chipClassName
+    }), chipContent, /*#__PURE__*/_react.default.createElement("button", {
       className: "p-chip__dismiss",
-      onClick: function onClick() {
-        return onDismiss();
-      }
+      onClick: onDismiss,
+      type: "button"
     }, /*#__PURE__*/_react.default.createElement("i", {
       className: "p-icon--close"
     }, "Dismiss")));
   } else {
-    return /*#__PURE__*/_react.default.createElement("button", {
-      className: chipClassName,
+    return /*#__PURE__*/_react.default.createElement("button", _extends({}, props, {
       "aria-pressed": selected,
+      className: chipClassName,
       onClick: onClick,
       onKeyDown: function onKeyDown(e) {
         return _onKeyDown(e);
-      }
-    }, chipContent);
+      },
+      type: "button"
+    }), chipContent);
   }
 };
 

package/dist/components/CodeSnippet/CodeSnippet.d.ts

@@ -1,6 +1,7 @@
+import { HTMLProps } from "react";
 import type { Props as CodeSnippetBlockProps } from "./CodeSnippetBlock";
-import type { ClassName } from "../../types";
-export declare type Props = {
+import type { ClassName, PropsWithSpread } from "../../types";
+export declare type Props = PropsWithSpread<{
     /**
      * Optional class(es) to pass to the wrapping div element.
      */
@@ -9,5 +10,5 @@ export declare type Props = {
      * A list of code blocks to display.
      */
     blocks: CodeSnippetBlockProps[];
-};
-export default function CodeSnippet({ className, blocks }: Props): JSX.Element;
+}, HTMLProps<HTMLDivElement>>;
+export default function CodeSnippet({ className, blocks, ...props }: Props): JSX.Element;

package/dist/components/CodeSnippet/CodeSnippet.js

@@ -5,34 +5,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = CodeSnippet;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _CodeSnippetBlock = _interopRequireDefault(require("./CodeSnippetBlock"));
 
+var _excluded = ["className", "blocks"];
+
 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; }
+
 function CodeSnippet(_ref) {
   var className = _ref.className,
-      blocks = _ref.blocks;
-  return /*#__PURE__*/_react.default.createElement("div", {
+      blocks = _ref.blocks,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: (0, _classnames.default)("p-code-snippet", {
       "is-bordered": blocks.some(function (block) {
         return block.content;
       })
     }, className)
-  }, blocks.map(function (props, i) {
+  }, props), blocks.map(function (blockProps, i) {
     return /*#__PURE__*/_react.default.createElement(_CodeSnippetBlock.default, _extends({
       key: "code-snippet-block-".concat(i)
-    }, props));
+    }, blockProps));
   }));
-}
-
-CodeSnippet.propTypes = {
-  blocks: _propTypes.default.array.isRequired
-};
+}

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/Field/Field.d.ts

@@ -28,6 +28,10 @@ export declare type Props = {
      * Help text to show below the field.
      */
     help?: ReactNode;
+    /**
+     * An id to give to the help element.
+     */
+    helpId?: string;
     /**
      * Whether the component is wrapping a select element.
      */
@@ -56,6 +60,10 @@ export declare type Props = {
      * The content for success validation.
      */
     success?: ReactNode;
+    /**
+     * An id to give to the caution, error or success element.
+     */
+    validationId?: string;
 };
-declare const Field: ({ caution, children, className, error, forId, help, isSelect, label, labelClassName, labelFirst, required, stacked, success, }: Props) => JSX.Element;
+declare const Field: ({ caution, children, className, error, forId, help, helpId, isSelect, label, labelClassName, labelFirst, required, stacked, success, validationId, }: Props) => JSX.Element;
 export default Field;

package/dist/components/Field/Field.js

@@ -15,20 +15,22 @@ var _Col = _interopRequireDefault(require("../Col"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var generateHelp = function generateHelp(help) {
+var generateHelp = function generateHelp(help, helpId) {
   return help && /*#__PURE__*/_react.default.createElement("p", {
-    className: "p-form-help-text"
+    className: "p-form-help-text",
+    id: helpId
   }, help);
 };
 
-var generateError = function generateError(error, caution, success) {
+var generateError = function generateError(error, caution, success, validationId) {
   if (!error && !caution && !success) {
     return null;
   }
 
   var messageType = error && "Error" || caution && "Caution" || success && "Success";
   return /*#__PURE__*/_react.default.createElement("p", {
-    className: "p-form-validation__message"
+    className: "p-form-validation__message",
+    id: validationId
   }, /*#__PURE__*/_react.default.createElement("strong", null, messageType, ":"), " ", error || caution || success);
 };
 
@@ -52,12 +54,12 @@ var generateLabel = function generateLabel(forId, required, label, labelClassNam
   return labelNode;
 };
 
-var generateContent = function generateContent(isSelect, children, labelFirst, labelNode, help, error, caution, success) {
+var generateContent = function generateContent(isSelect, children, labelFirst, labelNode, help, error, caution, success, validationId, helpId) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form__control u-clearfix"
   }, isSelect ? /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form-validation__select-wrapper"
-  }, children) : children, !labelFirst && labelNode, generateHelp(help), generateError(error, caution, success));
+  }, children) : children, !labelFirst && labelNode, generateHelp(help, helpId), generateError(error, caution, success, validationId));
 };
 
 var Field = function Field(_ref) {
@@ -67,6 +69,7 @@ var Field = function Field(_ref) {
       error = _ref.error,
       forId = _ref.forId,
       help = _ref.help,
+      helpId = _ref.helpId,
       isSelect = _ref.isSelect,
       label = _ref.label,
       labelClassName = _ref.labelClassName,
@@ -74,9 +77,10 @@ var Field = function Field(_ref) {
       labelFirst = _ref$labelFirst === void 0 ? true : _ref$labelFirst,
       required = _ref.required,
       stacked = _ref.stacked,
-      success = _ref.success;
+      success = _ref.success,
+      validationId = _ref.validationId;
   var labelNode = generateLabel(forId, required, label, labelClassName, stacked);
-  var content = generateContent(isSelect, children, labelFirst, labelNode, help, error, caution, success);
+  var content = generateContent(isSelect, children, labelFirst, labelNode, help, error, caution, success, validationId, helpId);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("p-form__group", "p-form-validation", className, {
       "is-error": error,

package/dist/components/Input/Input.js

@@ -17,6 +17,8 @@ var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput"));
 
 var _RadioInput = _interopRequireDefault(require("../RadioInput"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["caution", "className", "error", "help", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "type", "wrapperClassName"];
 
 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); }
@@ -27,6 +29,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 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; }
@@ -49,32 +57,42 @@ 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),
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
+
+  var commonProps = _objectSpread({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     id: id,
-    ref: inputRef,
-    required: required,
-    type: type,
-    "aria-invalid": !!error
-  }, inputProps));
+    label: label,
+    required: required
+  }, inputProps);
 
   (0, _react.useEffect)(function () {
     if (takeFocus) {
       inputRef.current.focus();
     }
   }, [takeFocus]);
+  var input;
 
   if (type === "checkbox") {
     input = /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, _extends({
       label: label,
-      id: id
-    }, inputProps));
+      labelClassName: labelClassName
+    }, commonProps));
   } else if (type === "radio") {
     input = /*#__PURE__*/_react.default.createElement(_RadioInput.default, _extends({
       label: label,
-      id: id
-    }, inputProps));
+      labelClassName: labelClassName
+    }, commonProps));
+  } else {
+    input = /*#__PURE__*/_react.default.createElement("input", _extends({
+      className: (0, _classnames.default)("p-form-validation__input", className),
+      ref: inputRef,
+      type: type
+    }, commonProps));
   }
 
   return /*#__PURE__*/_react.default.createElement(_Field.default, {
@@ -83,11 +101,13 @@ var Input = function Input(_ref) {
     error: error,
     forId: id,
     help: help,
+    helpId: helpId,
     label: fieldLabel,
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
-    success: success
+    success: success,
+    validationId: validationId
   }, input);
 };
 

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)));