orcs-design-system 3.1.21 → 3.1.23

package/es/components/ActionsMenu/index.js

@@ -3,8 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["as"],
-  _excluded2 = ["theme", "onToggle", "toggleState", "direction", "menuTopPosition", "menuLeftPosition", "menuRightPosition", "menuWidth", "customTriggerComponent", "children", "ariaLabel"],
-  _excluded3 = ["children", "customTriggerComponent", "direction", "isOpen", "theme", "closeOnClick", "ariaLabel"];
+  _excluded2 = ["theme", "onToggle", "toggleState", "direction", "menuTopPosition", "menuLeftPosition", "menuRightPosition", "menuWidth", "customTriggerComponent", "children", "triggerRef", "ariaLabel"],
+  _excluded3 = ["children", "customTriggerComponent", "direction", "isOpen", "theme", "closeOnClick", "ariaLabel", "triggerRef"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useState, useEffect, useImperativeHandle, useCallback } from "react";
@@ -135,6 +135,7 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
     menuWidth = _ref.menuWidth,
     customTriggerComponent = _ref.customTriggerComponent,
     children = _ref.children,
+    triggerRef = _ref.triggerRef,
     _ref$ariaLabel = _ref.ariaLabel,
     ariaLabel = _ref$ariaLabel === void 0 ? "Options Menu" : _ref$ariaLabel,
     props = _objectWithoutProperties(_ref, _excluded2);
@@ -183,6 +184,7 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
     triggerBtn = /*#__PURE__*/React.createElement(Control, {
       "aria-label": ariaLabel,
       "aria-expanded": "".concat(toggleState),
+      ref: triggerRef,
       onClick: onToggleInView
     }, /*#__PURE__*/React.createElement(Icon, {
       isOpen: toggleState
@@ -213,7 +215,10 @@ ActionsMenuBody.propTypes = {
   customTriggerComponent: PropTypes.node,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   theme: PropTypes.object,
-  ariaLabel: PropTypes.string
+  ariaLabel: PropTypes.string,
+  triggerRef: PropTypes.shape({
+    current: PropTypes.any
+  })
 };
 var ActionsMenu = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
@@ -226,6 +231,7 @@ var ActionsMenu = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     closeOnClick = _ref2$closeOnClick === void 0 ? true : _ref2$closeOnClick,
     _ref2$ariaLabel = _ref2.ariaLabel,
     ariaLabel = _ref2$ariaLabel === void 0 ? "Options Menu" : _ref2$ariaLabel,
+    triggerRef = _ref2.triggerRef,
     props = _objectWithoutProperties(_ref2, _excluded3);
   var _useState5 = useState(isOpen),
     _useState6 = _slicedToArray(_useState5, 2),
@@ -268,7 +274,8 @@ var ActionsMenu = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     customTriggerComponent: customTriggerComponent,
     direction: direction,
     theme: theme,
-    ariaLabel: ariaLabel
+    ariaLabel: ariaLabel,
+    triggerRef: triggerRef
   }, props), children);
 });
 ActionsMenu.propTypes = {
@@ -280,7 +287,10 @@ ActionsMenu.propTypes = {
   /** Specifies the colour theme */
   theme: PropTypes.object,
   /** Specifies the aria-label for the button */
-  ariaLabel: PropTypes.object
+  ariaLabel: PropTypes.object,
+  triggerRef: PropTypes.shape({
+    current: PropTypes.any
+  })
 };
 ActionsMenu.__docgenInfo = {
   "description": "",
@@ -355,6 +365,19 @@ ActionsMenu.__docgenInfo = {
         "name": "object"
       },
       "required": false
+    },
+    "triggerRef": {
+      "description": "",
+      "type": {
+        "name": "shape",
+        "value": {
+          "current": {
+            "name": "any",
+            "required": false
+          }
+        }
+      },
+      "required": false
     }
   }
 };
@@ -452,6 +475,19 @@ ActionsMenuBody.__docgenInfo = {
         "name": "object"
       },
       "required": false
+    },
+    "triggerRef": {
+      "description": "",
+      "type": {
+        "name": "shape",
+        "value": {
+          "current": {
+            "name": "any",
+            "required": false
+          }
+        }
+      },
+      "required": false
     }
   }
 };

package/es/components/Checkbox/index.js

@@ -1,6 +1,7 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "label", "colour", "disabled", "checked", "onClick", "onChange", "theme"];
+var _excluded = ["name", "label", "colour", "disabled", "checked", "onClick", "onChange", "theme", "ariaLabel"];
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import styled, { keyframes, ThemeProvider } from "styled-components";
@@ -70,6 +71,7 @@ export default function Checkbox(_ref) {
     onClick = _ref.onClick,
     onChange = _ref.onChange,
     theme = _ref.theme,
+    ariaLabel = _ref.ariaLabel,
     props = _objectWithoutProperties(_ref, _excluded);
   var inputRef = useRef(null);
   var handleClick = function handleClick() {
@@ -97,7 +99,8 @@ export default function Checkbox(_ref) {
     disabled: disabled,
     checked: checked,
     onChange: onChange,
-    ref: inputRef
+    ref: inputRef,
+    "aria-label": ariaLabel
   }), /*#__PURE__*/React.createElement(Box, {
     colour: colour,
     onClick: onClick
@@ -121,6 +124,16 @@ Checkbox.propTypes = {
   onClick: PropTypes.string,
   /** Text label to display beside the checkbox */
   label: PropTypes.string,
+  // ariaLabel prop must be specified if label is not provided
+  ariaLabel: function ariaLabel(props, propName) {
+    if (!props.label && (props[propName] == null || props[propName] === "")) {
+      return new Error("Missing prop `".concat(propName, "` not specified for Checkbox component. When `label` is not provided, `").concat(propName, "` is required."));
+    }
+    if (props[propName] && typeof props[propName] !== "string") {
+      return new Error("Invalid propType `".concat(propName, "` supplied to Checkbox component. Expected `string`, received `").concat(_typeof(props[propName]), "`."));
+    }
+    return null;
+  },
   /** Specifies the system design theme. */
   theme: PropTypes.object
 };
@@ -194,6 +207,14 @@ Checkbox.__docgenInfo = {
       },
       "required": false
     },
+    "ariaLabel": {
+      "description": "",
+      "type": {
+        "name": "custom",
+        "raw": "(props, propName) => {\n  if (!props.label && (props[propName] == null || props[propName] === \"\")) {\n    return new Error(\n      `Missing prop \\`${propName}\\` not specified for Checkbox component. When \\`label\\` is not provided, \\`${propName}\\` is required.`\n    );\n  }\n  if (props[propName] && typeof props[propName] !== \"string\") {\n    return new Error(\n      `Invalid propType \\`${propName}\\` supplied to Checkbox component. Expected \\`string\\`, received \\`${typeof props[\n        propName\n      ]}\\`.`\n    );\n  }\n  return null;\n}"
+      },
+      "required": false
+    },
     "theme": {
       "description": "Specifies the system design theme.",
       "type": {

package/es/components/RadioButton/index.js

@@ -1,6 +1,7 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "value", "label", "variant", "disabled", "checked", "onChange", "theme"];
+var _excluded = ["name", "value", "label", "variant", "disabled", "checked", "onChange", "theme", "ariaLabel"];
 import React from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
@@ -186,6 +187,7 @@ export default function RadioButton(_ref) {
     checked = _ref.checked,
     onChange = _ref.onChange,
     theme = _ref.theme,
+    ariaLabel = _ref.ariaLabel,
     props = _objectWithoutProperties(_ref, _excluded);
   var component = /*#__PURE__*/React.createElement(RadioButtonItem, _extends({
     variant: variant
@@ -197,7 +199,8 @@ export default function RadioButton(_ref) {
     value: value,
     disabled: disabled,
     checked: checked,
-    onChange: onChange
+    onChange: onChange,
+    "aria-label": ariaLabel
   }), /*#__PURE__*/React.createElement(RadioButtonCircle, {
     variant: variant
   }, /*#__PURE__*/React.createElement(RadioButtonDot, {
@@ -214,6 +217,16 @@ RadioButton.propTypes = {
   value: PropTypes.string,
   /** Sets the label of the radio button */
   label: PropTypes.string,
+  // ariaLabel prop must be specified if label is not provided
+  ariaLabel: function ariaLabel(props, propName) {
+    if (!props.label && (props[propName] == null || props[propName] === "")) {
+      return new Error("Missing prop `".concat(propName, "` not specified for Radio component. When `label` is not provided, `").concat(propName, "` is required."));
+    }
+    if (props[propName] && typeof props[propName] !== "string") {
+      return new Error("Invalid propType `".concat(propName, "` supplied to Radio component. Expected `string`, received `").concat(_typeof(props[propName]), "`."));
+    }
+    return null;
+  },
   /** Sets radio button colour. Default is greyDarker. Use white for inverted styling */
   variant: PropTypes.oneOf(["success", "warning", "danger", "primary", "white"]),
   /** Applies disabled attribute and styling */
@@ -251,6 +264,14 @@ RadioButton.__docgenInfo = {
       },
       "required": false
     },
+    "ariaLabel": {
+      "description": "",
+      "type": {
+        "name": "custom",
+        "raw": "(props, propName) => {\n  if (!props.label && (props[propName] == null || props[propName] === \"\")) {\n    return new Error(\n      `Missing prop \\`${propName}\\` not specified for Radio component. When \\`label\\` is not provided, \\`${propName}\\` is required.`\n    );\n  }\n  if (props[propName] && typeof props[propName] !== \"string\") {\n    return new Error(\n      `Invalid propType \\`${propName}\\` supplied to Radio component. Expected \\`string\\`, received \\`${typeof props[\n        propName\n      ]}\\`.`\n    );\n  }\n  return null;\n}"
+      },
+      "required": false
+    },
     "variant": {
       "description": "Sets radio button colour. Default is greyDarker. Use white for inverted styling",
       "type": {

package/es/components/Select/index.js

@@ -402,9 +402,9 @@ Select.propTypes = {
   /** Specifies the label for the `Select` */
   label: PropTypes.string,
   // ariaLabel prop must be specified if label is not provided
-  ariaLabel: function ariaLabel(props, propName, componentName) {
+  ariaLabel: function ariaLabel(props, propName) {
     if (!props.label && (props[propName] == null || props[propName] === "")) {
-      return new Error("Invalid prop `".concat(propName, "` supplied to `").concat(componentName, "`. When `label` is not provided, `").concat(propName, "` is required."));
+      return new Error("Missing prop `".concat(propName, "` not specified for Select component. When `label` is not provided, `").concat(propName, "` is required."));
     }
     if (props[propName] && typeof props[propName] !== "string") {
       return new Error("Invalid propType `".concat(propName, "` supplied to Select component. Expected `string`, received `").concat(_typeof(props[propName]), "`."));
@@ -508,7 +508,7 @@ Select.__docgenInfo = {
       "description": "",
       "type": {
         "name": "custom",
-        "raw": "(props, propName, componentName) => {\n  if (!props.label && (props[propName] == null || props[propName] === \"\")) {\n    return new Error(\n      `Invalid prop \\`${propName}\\` supplied to \\`${componentName}\\`. When \\`label\\` is not provided, \\`${propName}\\` is required.`\n    );\n  }\n  if (props[propName] && typeof props[propName] !== \"string\") {\n    return new Error(\n      `Invalid propType \\`${propName}\\` supplied to Select component. Expected \\`string\\`, received \\`${typeof props[\n        propName\n      ]}\\`.`\n    );\n  }\n  return null;\n}"
+        "raw": "(props, propName) => {\n  if (!props.label && (props[propName] == null || props[propName] === \"\")) {\n    return new Error(\n      `Missing prop \\`${propName}\\` not specified for Select component. When \\`label\\` is not provided, \\`${propName}\\` is required.`\n    );\n  }\n  if (props[propName] && typeof props[propName] !== \"string\") {\n    return new Error(\n      `Invalid propType \\`${propName}\\` supplied to Select component. Expected \\`string\\`, received \\`${typeof props[\n        propName\n      ]}\\`.`\n    );\n  }\n  return null;\n}"
       },
       "required": false
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.1.21",
+  "version": "3.1.23",
   "engines": {
     "node": "18.17.1"
   },