@canonical/react-components 0.31.0 → 0.34.0

package/dist/components/ModularTable/ModularTable.d.ts

@@ -1,6 +1,8 @@
-import { ReactNode } from "react";
-import type { Column } from "react-table";
-export declare type Props<D extends Record<string, unknown>> = {
+import { ReactNode, HTMLProps } from "react";
+import { TableCellProps, TableHeaderProps, TableRowProps } from "react-table";
+import type { Column, UseTableOptions, Cell, Row, HeaderGroup } from "react-table";
+import { PropsWithSpread } from "../../types";
+export declare type Props<D extends Record<string, unknown>> = PropsWithSpread<{
     /**
      * The columns of the table.
      */
@@ -17,6 +19,19 @@ export declare type Props<D extends Record<string, unknown>> = {
      * Optional extra row to display underneath the main table content.
      */
     footer?: ReactNode;
-};
-declare function ModularTable({ data, columns, emptyMsg, footer, }: Props<Record<string, unknown>>): JSX.Element;
+    /**
+     * This function is used to resolve any props needed for a particular column's header cell.
+     */
+    getHeaderProps?: (header: HeaderGroup<D>) => Partial<TableHeaderProps & HTMLProps<HTMLTableHeaderCellElement>>;
+    /**
+     * This function is used to resolve any props needed for a particular row.
+     */
+    getRowProps?: (row: Row<D>) => Partial<TableRowProps & HTMLProps<HTMLTableRowElement>>;
+    /**
+     * This function is used to resolve any props needed for a particular cell.
+     */
+    getCellProps?: (cell: Cell<D>) => Partial<TableCellProps & HTMLProps<HTMLTableCellElement>>;
+    getRowId?: UseTableOptions<D>["getRowId"];
+}, HTMLProps<HTMLTableElement>>;
+declare function ModularTable({ data, columns, emptyMsg, footer, getHeaderProps, getRowProps, getCellProps, getRowId, ...props }: Props<Record<string, unknown>>): JSX.Element;
 export default ModularTable;

package/dist/components/ModularTable/ModularTable.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 _reactTable = require("react-table");
@@ -21,17 +19,37 @@ var _TableCell = _interopRequireDefault(require("../TableCell"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _excluded = ["data", "columns", "emptyMsg", "footer", "getHeaderProps", "getRowProps", "getCellProps", "getRowId"];
+
 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 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; }
+
 function ModularTable(_ref) {
   var data = _ref.data,
       columns = _ref.columns,
       emptyMsg = _ref.emptyMsg,
-      footer = _ref.footer;
+      footer = _ref.footer,
+      getHeaderProps = _ref.getHeaderProps,
+      getRowProps = _ref.getRowProps,
+      getCellProps = _ref.getCellProps,
+      getRowId = _ref.getRowId,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var _useTable = (0, _reactTable.useTable)({
     columns: columns,
-    data: data
+    data: data,
+    getRowId: getRowId || undefined
   }),
       getTableProps = _useTable.getTableProps,
       getTableBodyProps = _useTable.getTableBodyProps,
@@ -39,28 +57,30 @@ function ModularTable(_ref) {
       rows = _useTable.rows,
       prepareRow = _useTable.prepareRow;
 
-  var showEmpty = emptyMsg && (!rows || rows.length === 0);
-  return /*#__PURE__*/_react.default.createElement(_Table.default, getTableProps(), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(function (headerGroup) {
+  var showEmpty = !!emptyMsg && (!rows || rows.length === 0);
+  return /*#__PURE__*/_react.default.createElement(_Table.default, _extends({}, getTableProps(), props), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(function (headerGroup) {
     return /*#__PURE__*/_react.default.createElement(_TableRow.default, headerGroup.getHeaderGroupProps(), headerGroup.headers.map(function (column) {
       return /*#__PURE__*/_react.default.createElement(_TableHeader.default, column.getHeaderProps([{
         className: column.className
       }, {
         className: column.getCellIcon ? "p-table__cell--icon-placeholder" : ""
-      }]), column.render("Header"));
+      }, _objectSpread({}, getHeaderProps === null || getHeaderProps === void 0 ? void 0 : getHeaderProps(column))]), column.render("Header"));
     }));
   })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), rows.map(function (row) {
     // This function is responsible for lazily preparing a row for rendering.
     // Any row that you intend to render in your table needs to be passed to this function before every render.
     // see: https://react-table.tanstack.com/docs/api/useTable#instance-properties
     prepareRow(row);
-    return /*#__PURE__*/_react.default.createElement(_TableRow.default, row.getRowProps(), row.cells.map(function (cell) {
+    return /*#__PURE__*/_react.default.createElement(_TableRow.default, row.getRowProps(getRowProps === null || getRowProps === void 0 ? void 0 : getRowProps(row)), row.cells.map(function (cell) {
+      var _cell$column$getCellI, _cell$column;
+
       var hasColumnIcon = cell.column.getCellIcon;
-      var iconName = hasColumnIcon && cell.column.getCellIcon(cell);
+      var iconName = hasColumnIcon && ((_cell$column$getCellI = (_cell$column = cell.column).getCellIcon) === null || _cell$column$getCellI === void 0 ? void 0 : _cell$column$getCellI.call(_cell$column, cell));
       return /*#__PURE__*/_react.default.createElement(_TableCell.default, cell.getCellProps([{
         className: cell.column.className
       }, {
         className: hasColumnIcon ? "p-table__cell--icon-placeholder" : ""
-      }]), iconName && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      }, _objectSpread({}, getCellProps === null || getCellProps === void 0 ? void 0 : getCellProps(cell))]), iconName && /*#__PURE__*/_react.default.createElement(_Icon.default, {
         name: iconName
       }), cell.render("Cell"));
     }));
@@ -71,11 +91,5 @@ function ModularTable(_ref) {
   }, footer))));
 }
 
-ModularTable.propTypes = {
-  columns: _propTypes.default.array.isRequired,
-  data: _propTypes.default.array.isRequired,
-  emptyMsg: _propTypes.default.string,
-  footer: _propTypes.default.node
-};
 var _default = ModularTable;
 exports.default = _default;

package/dist/components/PaginationItem/PaginationItem.js

@@ -22,7 +22,8 @@ var PaginationItem = function PaginationItem(_ref) {
     className: (0, _classnames.default)("p-pagination__link", {
       "is-active": isActive
     }),
-    onClick: onClick
+    onClick: onClick,
+    "aria-current": isActive ? "page" : undefined
   }, number));
 };
 

package/dist/components/PasswordToggle/PasswordToggle.js

@@ -17,6 +17,8 @@ var _Field = _interopRequireDefault(require("../Field"));
 
 var _Label = _interopRequireDefault(require("../Label"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["caution", "className", "error", "help", "id", "label", "readOnly", "required", "success", "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); }
@@ -62,6 +64,10 @@ var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       isPassword = _useState2[0],
       setIsPassword = _useState2[1];
 
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
+
   var togglePassword = function togglePassword() {
     if (isPassword) {
       setIsPassword(false);
@@ -75,8 +81,10 @@ var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     className: wrapperClassName,
     error: error,
     help: help,
+    helpId: helpId,
     required: required,
-    success: success
+    success: success,
+    validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form-password-toggle"
   }, /*#__PURE__*/_react.default.createElement(_Label.default, {
@@ -97,11 +105,14 @@ var PasswordToggle = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   }, isPassword ? "Show" : "Hide"), /*#__PURE__*/_react.default.createElement("i", {
     className: isPassword ? "p-icon--show" : "p-icon--hide"
   }))), /*#__PURE__*/_react.default.createElement("input", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),
     id: id,
+    readOnly: readOnly,
     ref: ref,
-    type: isPassword ? "password" : "text",
-    readOnly: readOnly
+    type: isPassword ? "password" : "text"
   }, inputProps)));
 });
 

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

@@ -1,5 +1,6 @@
-import type { ClassName } from "../../types";
-export declare type Props = {
+import { HTMLProps } from "react";
+import type { ClassName, PropsWithSpread } from "../../types";
+export declare type Props = PropsWithSpread<{
     /**
      * Whether autocomplete should be enabled for the search input.
      */
@@ -32,9 +33,9 @@ export declare type Props = {
      * The value of the search input when the state is externally controlled.
      */
     value?: string;
-};
+}, HTMLProps<HTMLInputElement>>;
 declare const SearchBox: {
-    ({ autocomplete, className, disabled, externallyControlled, onChange, onSearch, placeholder, value, }: Props): JSX.Element;
+    ({ autocomplete, className, disabled, externallyControlled, onChange, onSearch, placeholder, value, ...props }: Props): JSX.Element;
     displayName: string;
 };
 export default SearchBox;

package/dist/components/SearchBox/SearchBox.js

@@ -5,16 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _excluded = ["autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "placeholder", "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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var SearchBox = function SearchBox(_ref) {
   var _ref$autocomplete = _ref.autocomplete,
       autocomplete = _ref$autocomplete === void 0 ? "on" : _ref$autocomplete,
@@ -25,7 +31,8 @@ var SearchBox = function SearchBox(_ref) {
       onSearch = _ref.onSearch,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? "Search" : _ref$placeholder,
-      value = _ref.value;
+      value = _ref.value,
+      props = _objectWithoutProperties(_ref, _excluded);
 
   var input = /*#__PURE__*/_react.default.createRef();
 
@@ -46,7 +53,7 @@ var SearchBox = function SearchBox(_ref) {
   }, /*#__PURE__*/_react.default.createElement("label", {
     className: "u-off-screen",
     htmlFor: "search"
-  }, placeholder || "Search"), /*#__PURE__*/_react.default.createElement("input", {
+  }, placeholder || "Search"), /*#__PURE__*/_react.default.createElement("input", _extends({
     autoComplete: autocomplete,
     className: "p-search-box__input",
     disabled: disabled,
@@ -60,7 +67,7 @@ var SearchBox = function SearchBox(_ref) {
     type: "search",
     defaultValue: externallyControlled ? undefined : value,
     value: externallyControlled ? value : undefined
-  }), value && /*#__PURE__*/_react.default.createElement("button", {
+  }, props)), value && /*#__PURE__*/_react.default.createElement("button", {
     className: "p-search-box__reset",
     disabled: disabled,
     onClick: resetInput,
@@ -76,15 +83,6 @@ var SearchBox = function SearchBox(_ref) {
   }, "Search")));
 };
 
-SearchBox.propTypes = {
-  autocomplete: _propTypes.default.oneOf(["on", "off"]),
-  disabled: _propTypes.default.bool,
-  externallyControlled: _propTypes.default.bool,
-  onChange: _propTypes.default.func,
-  onSearch: _propTypes.default.func,
-  placeholder: _propTypes.default.string,
-  value: _propTypes.default.string
-};
 SearchBox.displayName = "SearchBox";
 var _default = SearchBox;
 exports.default = _default;

package/dist/components/Select/Select.js

@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Field = _interopRequireDefault(require("../Field"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["label", "value"],
     _excluded2 = ["caution", "className", "error", "help", "id", "label", "labelClassName", "onChange", "options", "required", "stacked", "success", "takeFocus", "wrapperClassName"];
 
@@ -59,6 +61,9 @@ var Select = function Select(_ref2) {
       selectProps = _objectWithoutProperties(_ref2, _excluded2);
 
   var selectRef = (0, _react.useRef)(null);
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
   (0, _react.useEffect)(function () {
     if (takeFocus) {
       selectRef.current.focus();
@@ -70,13 +75,18 @@ var Select = function Select(_ref2) {
     error: error,
     forId: id,
     help: help,
+    helpId: helpId,
     isSelect: true,
     label: label,
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
-    success: success
+    success: success,
+    validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("select", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),
     id: id,
     onChange: function onChange(evt) {

package/dist/components/Slider/Slider.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Field = _interopRequireDefault(require("../Field"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["caution", "disabled", "error", "help", "id", "inputDisabled", "label", "max", "min", "onChange", "required", "showInput"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -45,6 +47,9 @@ var Slider = function Slider(_ref) {
       showInput = _ref$showInput === void 0 ? false : _ref$showInput,
       inputProps = _objectWithoutProperties(_ref, _excluded);
 
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
   var style = {};
 
   if ((_navigator = navigator) !== null && _navigator !== void 0 && (_navigator$userAgent = _navigator.userAgent) !== null && _navigator$userAgent !== void 0 && _navigator$userAgent.includes("AppleWebKit")) {
@@ -61,11 +66,16 @@ var Slider = function Slider(_ref) {
     caution: caution,
     error: error,
     help: help,
+    helpId: helpId,
     label: label,
-    required: required
+    required: required,
+    validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "p-slider__wrapper"
   }, /*#__PURE__*/_react.default.createElement("input", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     disabled: disabled,
     id: id,
     max: max,
@@ -75,6 +85,9 @@ var Slider = function Slider(_ref) {
     style: style,
     type: "range"
   }, inputProps)), showInput && /*#__PURE__*/_react.default.createElement("input", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     className: "p-slider__input",
     disabled: disabled || inputDisabled,
     max: max,

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 ? "" : "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/components/Textarea/Textarea.js

@@ -13,6 +13,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Field = _interopRequireDefault(require("../Field"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["caution", "className", "error", "grow", "help", "id", "label", "labelClassName", "onKeyUp", "required", "stacked", "style", "success", "takeFocus", "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); }
@@ -54,6 +56,9 @@ var Textarea = function Textarea(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   var textareaRef = (0, _react.useRef)(null);
+  var validationId = (0, _hooks.useId)();
+  var helpId = (0, _hooks.useId)();
+  var hasError = !!error;
   (0, _react.useEffect)(function () {
     if (takeFocus) {
       textareaRef.current.focus();
@@ -65,12 +70,17 @@ var Textarea = function Textarea(_ref) {
     error: error,
     forId: id,
     help: help,
+    helpId: helpId,
     label: label,
     labelClassName: labelClassName,
     required: required,
     stacked: stacked,
-    success: success
+    success: success,
+    validationId: validationId
   }, /*#__PURE__*/_react.default.createElement("textarea", _extends({
+    "aria-describedby": help ? helpId : null,
+    "aria-errormessage": hasError ? validationId : null,
+    "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),
     id: id,
     onKeyUp: function onKeyUp(evt) {

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