@pingux/astro 1.2.0-alpha.0 → 1.2.0-alpha.12

package/lib/cjs/components/HelpHint/HelpHint.stories.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.WithTooltipAndIconButtonProps = exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'HelpHint',
+  component: _["default"],
+  argTypes: {
+    children: {
+      description: 'Tooltip content',
+      defaultValue: 'Text of the tooltip right here...',
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+exports["default"] = _default;
+
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_Box["default"], {
+    p: 50
+  }, (0, _react2.jsx)(_["default"], args));
+};
+
+exports.Default = Default;
+
+var WithTooltipAndIconButtonProps = function WithTooltipAndIconButtonProps() {
+  return (0, _react2.jsx)(_Box["default"], {
+    p: 50
+  }, (0, _react2.jsx)(_["default"], {
+    tooltipProps: {
+      direction: 'bottom'
+    },
+    iconButtonProps: {
+      'aria-label': 'Help hint'
+    }
+  }, "Text of the tooltip right here..."));
+};
+
+exports.WithTooltipAndIconButtonProps = WithTooltipAndIconButtonProps;

package/lib/cjs/components/HelpHint/HelpHint.test.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _HelpHint = _interopRequireDefault(require("./HelpHint"));
+
+var _react2 = require("@emotion/react");
+
+var testId = 'help-hint__button';
+var tooltipValue = 'Some text';
+var defaultProps = {
+  children: tooltipValue
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_HelpHint["default"], (0, _extends2["default"])({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('renders HelpHint component', function () {
+  getComponent();
+
+  var helpHintButton = _testWrapper.screen.getByTestId(testId);
+
+  expect(helpHintButton).toBeInTheDocument();
+});
+test('shows tooltip on hover', function () {
+  getComponent();
+
+  var helpHintButton = _testWrapper.screen.getByTestId(testId);
+
+  expect(_testWrapper.screen.queryByText(tooltipValue)).not.toBeInTheDocument();
+
+  _testWrapper.fireEvent.mouseMove(helpHintButton);
+
+  _testWrapper.fireEvent.mouseEnter(helpHintButton);
+
+  expect(_testWrapper.screen.getByText(tooltipValue)).toBeInTheDocument();
+});
+test('shows tooltip on focus', function () {
+  getComponent();
+
+  var helpHintButton = _testWrapper.screen.getByTestId(testId);
+
+  expect(_testWrapper.screen.queryByText(tooltipValue)).not.toBeInTheDocument();
+
+  _userEvent["default"].tab();
+
+  expect(helpHintButton).toHaveFocus();
+  expect(_testWrapper.screen.queryByText(tooltipValue)).toBeInTheDocument();
+});
+test('applies tooltipProps', function () {
+  getComponent({
+    tooltipProps: {
+      isOpen: true
+    }
+  });
+  expect(_testWrapper.screen.getByText(tooltipValue)).toBeInTheDocument();
+});
+test('applies iconButtonProps', function () {
+  var newLabel = 'New label';
+  getComponent({
+    iconButtonProps: {
+      'aria-label': newLabel
+    }
+  });
+  expect(_testWrapper.screen.getByLabelText(newLabel)).toBeInTheDocument();
+});

package/lib/cjs/components/Messages/Messages.reducer.js

@@ -8,7 +8,7 @@ _Object$defineProperty2(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.multiMessagesReducer = void 0;
+exports["default"] = exports.multiMessagesReducer = exports.messagesReducer = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
 
@@ -35,6 +35,7 @@ function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(obje
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
 
 var messagesReducer = _utils.messagesReducer;
+exports.messagesReducer = messagesReducer;
 var multiMessagesReducer = _utils.multiMessagesReducer;
 exports.multiMessagesReducer = multiMessagesReducer;
 

package/lib/cjs/components/Messages/Messages.stories.js

@@ -52,7 +52,7 @@ var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/s
 
 var _ = require("../..");
 
-var _Messages = _interopRequireWildcard(require("./Messages.reducer"));
+var _index = require("./index");
 
 var _react2 = require("@emotion/react");
 
@@ -233,21 +233,21 @@ var UseReducer = function UseReducer() {
   //   showErrorMessage: makeShowMessage('error', -1),
   //   showWarningMessage: makeShowMessage('warning', -1),
   // };
-  var _useReducer = (0, _react.useReducer)(_Messages["default"]),
+  var _useReducer = (0, _react.useReducer)(_index.messagesReducerStory),
       _useReducer2 = (0, _slicedToArray2["default"])(_useReducer, 2),
       items = _useReducer2[0],
       dispatch = _useReducer2[1];
 
   var showAMessage = function showAMessage() {
-    var actionFn = [_Messages["default"].actions.showSuccessMessage, _Messages["default"].actions.showErrorMessage, _Messages["default"].actions.showWarningMessage][Math.floor(Math.random() * 3)];
+    var actionFn = [_index.messagesReducerStory.actions.showSuccessMessage, _index.messagesReducerStory.actions.showErrorMessage, _index.messagesReducerStory.actions.showWarningMessage][Math.floor(Math.random() * 3)];
     var message = messageText[Math.floor(Math.random() * 6)];
     actionFn(message)(dispatch);
   };
 
   var removeMessage = function removeMessage(key) {
-    dispatch(_Messages["default"].actions.hideMessage(key));
+    dispatch(_index.messagesReducerStory.actions.hideMessage(key));
     (0, _setTimeout2["default"])(function () {
-      return dispatch(_Messages["default"].actions.removeMessage(key));
+      return dispatch(_index.messagesReducerStory.actions.removeMessage(key));
     }, 200);
   };
 
@@ -256,7 +256,7 @@ var UseReducer = function UseReducer() {
   }, "Add Message"), (items === null || items === void 0 ? void 0 : items.length) > 0 && (0, _react2.jsx)(_.Button, {
     mt: "md",
     onPress: function onPress() {
-      return dispatch(_Messages["default"].actions.clearMessages());
+      return dispatch(_index.messagesReducerStory.actions.clearMessages());
     }
   }, "Clear messages"), (0, _react2.jsx)(_.Messages, {
     items: items,
@@ -269,7 +269,7 @@ var UseReducer = function UseReducer() {
 exports.UseReducer = UseReducer;
 
 var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers() {
-  var _useReducer3 = (0, _react.useReducer)(_Messages.multiMessagesReducer, {
+  var _useReducer3 = (0, _react.useReducer)(_index.multiMessagesReducerStory, {
     'container-one': [],
     'container-two': []
   }),
@@ -278,15 +278,15 @@ var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers
       dispatch = _useReducer4[1];
 
   var showAMessage = function showAMessage(container) {
-    var actionFn = [_Messages.multiMessagesReducer.actions.showSuccessMessage, _Messages.multiMessagesReducer.actions.showCriticalMessage, _Messages.multiMessagesReducer.actions.showWarningMessage][Math.floor(Math.random() * 3)];
+    var actionFn = [_index.multiMessagesReducerStory.actions.showSuccessMessage, _index.multiMessagesReducerStory.actions.showCriticalMessage, _index.multiMessagesReducerStory.actions.showWarningMessage][Math.floor(Math.random() * 3)];
     var message = messageText[Math.floor(Math.random() * 6)];
     actionFn(container, message)(dispatch);
   };
 
   var removeMessage = function removeMessage(key, container) {
-    dispatch(_Messages.multiMessagesReducer.actions.hideMessage(container, key));
+    dispatch(_index.multiMessagesReducerStory.actions.hideMessage(container, key));
     (0, _setTimeout2["default"])(function () {
-      return dispatch(_Messages.multiMessagesReducer.actions.removeMessage(container, key));
+      return dispatch(_index.multiMessagesReducerStory.actions.removeMessage(container, key));
     }, 200);
   };
 

package/lib/cjs/components/Messages/Messages.test.js

@@ -26,7 +26,7 @@ var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
-var _ = _interopRequireDefault(require("."));
+var _ = _interopRequireWildcard(require("."));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
@@ -211,4 +211,18 @@ describe('announcements', function () {
     expect(messages.childElementCount).toBe(1);
     expect(_liveAnnouncer.announce).toHaveBeenCalledWith('New message 1', 'polite');
   });
+});
+test('should render messages with messagesReducerStory', function () {
+  getComponent();
+
+  _.messagesReducerStory.actions.showSuccessMessage();
+
+  expect(_testWrapper.screen.getByTestId(testId)).toBeInTheDocument();
+});
+test('should render messages with multiMessagesReducerStory', function () {
+  getComponent();
+
+  _.multiMessagesReducerStory.actions.showSuccessMessage();
+
+  expect(_testWrapper.screen.getByTestId(testId)).toBeInTheDocument();
 });

package/lib/cjs/components/Messages/index.js

@@ -14,7 +14,10 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _exportNames = {};
+var _exportNames = {
+  messagesReducerStory: true,
+  multiMessagesReducerStory: true
+};
 
 _Object$defineProperty(exports, "default", {
   enumerable: true,
@@ -23,6 +26,20 @@ _Object$defineProperty(exports, "default", {
   }
 });
 
+_Object$defineProperty(exports, "messagesReducerStory", {
+  enumerable: true,
+  get: function get() {
+    return _Messages2.messagesReducer;
+  }
+});
+
+_Object$defineProperty(exports, "multiMessagesReducerStory", {
+  enumerable: true,
+  get: function get() {
+    return _Messages2.multiMessagesReducer;
+  }
+});
+
 var _Messages = _interopRequireDefault(require("./Messages"));
 
 var _utils = require("./utils");
@@ -37,4 +54,6 @@ _forEachInstanceProperty(_context = _Object$keys(_utils)).call(_context, functio
       return _utils[key];
     }
   });
-});
+});
+
+var _Messages2 = require("./Messages.reducer");

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -320,7 +320,9 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
           height: '100%',
           m: 5,
           mr: 10,
-          py: 2
+          ml: 0,
+          py: 3,
+          pr: 0
         },
         textProps: {
           sx: {

package/lib/cjs/components/NumberField/NumberField.js

@@ -50,6 +50,8 @@ var _i18n = require("@react-aria/i18n");
 
 var _utils = require("@react-aria/utils");
 
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _index = require("../../index");
@@ -130,7 +132,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: inputRef // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
 
-  }, fieldControlProps, inputProps)), ControlArrows), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
+  }, fieldControlProps, (0, _omit["default"])(inputProps, 'name'))), ControlArrows), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
     status: status
   }, helperText)));
 });

package/lib/cjs/components/NumberField/NumberField.test.js

@@ -169,4 +169,11 @@ test('increment and decrement buttons shouldn\'t be able to be focused via keybo
   _userEvent["default"].tab();
 
   expect(_testWrapper.screen.getByLabelText('arrow-down')).not.toHaveFocus();
+});
+test('number field input receiving name attribute', function () {
+  var testName = 'testName';
+  getComponent({
+    name: testName
+  });
+  expect(_testWrapper.screen.getByLabelText(testLabel)).toHaveAttribute('name', testName);
 });

package/lib/cjs/components/OverlayPanel/OverlayPanel.js

@@ -18,8 +18,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -52,14 +50,8 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       onClose = _useOverlayPanelState.onClose;
 
   var overlayPanelRef = (0, _react.useRef)();
-
-  var _useState = (0, _react.useState)(true),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      contain = _useState2[0],
-      setIsContained = _useState2[1];
   /* istanbul ignore next */
 
-
   (0, _react.useImperativeHandle)(ref, function () {
     return overlayPanelRef.current;
   });
@@ -73,18 +65,12 @@ var OverlayPanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     e.stopPropagation();
 
     if (e.key === 'Escape') {
-      setIsContained(false);
+      onClose(state, triggerRef, onCloseProp);
     }
   };
 
-  (0, _react.useEffect)(function () {
-    if (!contain && onClose) {
-      onClose(state, triggerRef, onCloseProp);
-    }
-  }, [contain]);
   return (0, _react2.jsx)(_focus.FocusScope, {
-    autoFocus: true,
-    contain: contain
+    autoFocus: true
   }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "overlayPanel.overlayPanel",
     ref: overlayPanelRef

package/lib/cjs/components/OverlayPanel/OverlayPanel.test.js

@@ -79,6 +79,15 @@ test('onClose callback fires when provided', function () {
 
   expect(onClose).toHaveBeenCalled();
 });
+test('custom classname can be passed', function () {
+  getComponent({
+    className: 'testing-class'
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  expect(overlayPanel).toHaveClass('testing-class');
+});
 test('neither callback fires when not provided', function () {
   var onClose = jest.fn();
   getComponent({
@@ -137,4 +146,39 @@ test('triggerRef.current.focus() fires when provided', function () {
   });
 
   expect(focusFunction).toHaveBeenCalled();
+});
+test('triggerRef.current.focus() does not fire when key other than esc is pressed', function () {
+  var onClose = jest.fn();
+  var focusFunction = jest.fn();
+  var state = {
+    close: onClose
+  };
+  var triggerRef = {
+    current: {
+      focus: focusFunction
+    }
+  };
+  getComponent({
+    state: state,
+    children: (0, _react2.jsx)("div", null, "Test"),
+    triggerRef: triggerRef
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.keyDown(overlayPanel, {
+    key: 'KeyA',
+    code: 'KeyA',
+    keyCode: 65,
+    charCode: 65
+  });
+
+  _testWrapper.fireEvent.keyUp(overlayPanel, {
+    key: 'KeyA',
+    code: 'KeyA',
+    keyCode: 65,
+    charCode: 65
+  });
+
+  expect(focusFunction).not.toHaveBeenCalled();
 });

package/lib/cjs/components/SearchField/SearchField.stories.js

@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.ControlledWithDebouncedInput = exports.MaxLength = exports.NoClearButton = exports.CustomIcon = exports.Controlled = exports.Default = exports["default"] = void 0;
+exports.ControlledWithDebouncedInput = exports.NoClearButton = exports.CustomIcon = exports.Controlled = exports.Default = exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
@@ -137,20 +137,6 @@ var NoClearButton = function NoClearButton() {
 
 exports.NoClearButton = NoClearButton;
 
-var MaxLength = function MaxLength(args) {
-  return (0, _react2.jsx)(_index.SearchField, (0, _extends2["default"])({}, args, {
-    icon: _SearchIcon["default"],
-    "aria-label": "Search Groups",
-    onSubmit: function onSubmit(text) {
-      return alert(text);
-    } // eslint-disable-line no-alert
-    ,
-    maxLength: 9
-  }));
-};
-
-exports.MaxLength = MaxLength;
-
 var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {
   var _useState3 = (0, _react.useState)(''),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),

package/lib/cjs/components/TextAreaField/TextAreaField.js

@@ -227,7 +227,7 @@ TextAreaField.defaultProps = {
   isReadOnly: false,
   isRequired: false,
   isUnresizable: false,
-  rows: 2,
+  rows: 4,
   status: _statuses["default"].DEFAULT
 };
 TextAreaField.displayName = 'TextAreaField';

package/lib/cjs/components/TextAreaField/TextAreaField.stories.js

@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.MaxLength = exports.WithoutStatusIndicator = exports.Warning = exports.Success = exports.Error = exports.Unresizable = exports.Rows = exports.Required = exports.ReadOnly = exports.Disabled = exports.Controlled = exports.LeftLabel = exports.FloatLabel = exports.Default = exports["default"] = void 0;
+exports.MaxLength = exports.WithoutStatusIndicator = exports.Error = exports.Unresizable = exports.Rows = exports.Required = exports.ReadOnly = exports.Disabled = exports.Controlled = exports.FloatLabel = exports.Default = exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
@@ -20,8 +20,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ = _interopRequireDefault(require("."));
 
-var _Box = _interopRequireDefault(require("../Box"));
-
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _constants = require("../Label/constants");
@@ -101,37 +99,6 @@ var FloatLabel = function FloatLabel() {
 
 exports.FloatLabel = FloatLabel;
 
-var LeftLabel = function LeftLabel() {
-  return (0, _react2.jsx)(_Box["default"], {
-    gap: "xl",
-    width: "fit-content"
-  }, (0, _react2.jsx)(_["default"], {
-    label: "Example label",
-    labelMode: "left"
-  }), (0, _react2.jsx)(_["default"], {
-    label: "Example label that is much longer than the previous one",
-    labelMode: "left",
-    status: "error"
-  }), (0, _react2.jsx)(_["default"], {
-    label: "Example label with set width",
-    labelMode: "left",
-    containerProps: {
-      sx: {
-        gridTemplateColumns: '120px auto'
-      }
-    }
-  }));
-};
-
-exports.LeftLabel = LeftLabel;
-LeftLabel.parameters = {
-  docs: {
-    description: {
-      story: 'Users are able to override the default 40% column width when using left label by providing a new gridTemplatesColumn value, as shown in the example below.'
-    }
-  }
-};
-
 var Controlled = function Controlled() {
   var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -206,26 +173,6 @@ var Error = function Error() {
 
 exports.Error = Error;
 
-var Success = function Success() {
-  return (0, _react2.jsx)(_["default"], {
-    helperText: "Here is some helpful text...",
-    label: "Example Label",
-    status: "success"
-  });
-};
-
-exports.Success = Success;
-
-var Warning = function Warning() {
-  return (0, _react2.jsx)(_["default"], {
-    helperText: "Here is some helpful text...",
-    label: "Example Label",
-    status: "warning"
-  });
-};
-
-exports.Warning = Warning;
-
 var WithoutStatusIndicator = function WithoutStatusIndicator() {
   return (0, _react2.jsx)(_["default"], {
     label: "Example Label",

package/lib/cjs/components/TextField/TextField.stories.js

@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.MaxLength = exports.WithoutStatusIndicator = exports.WithHelpHint = exports.Warning = exports.Success = exports.Error = exports.DynamicRequired = exports.Required = exports.ReadOnly = exports.Disabled = exports.Password = exports.Controlled = exports.LeftLabel = exports.FloatLabel = exports.SmallVariant = exports.Default = exports["default"] = void 0;
+exports.WithSlots = exports.MaxLength = exports.WithoutStatusIndicator = exports.WithHelpHint = exports.Warning = exports.Success = exports.Error = exports.DynamicRequired = exports.Required = exports.ReadOnly = exports.Disabled = exports.Password = exports.Controlled = exports.LeftLabel = exports.FloatLabel = exports.SmallVariant = exports.Default = exports["default"] = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
@@ -32,6 +32,10 @@ var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/s
 
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _useCopyToClipboard = _interopRequireDefault(require("../../hooks/useCopyToClipboard"));
+
+var _CopyButton = _interopRequireDefault(require("../CopyText/CopyButton"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
@@ -259,4 +263,77 @@ var MaxLength = function MaxLength() {
   });
 };
 
-exports.MaxLength = MaxLength;
+exports.MaxLength = MaxLength;
+
+var WithSlots = function WithSlots() {
+  var _useState5 = (0, _react.useState)("[{ 'type': 'work', 'streetAddress': 'San Antonio MI 47096' },{ 'type': 'home', 'streetAddress': 'Santa Rosa MN 98804' }]"),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      addressesValue = _useState6[0],
+      setAddressesValue = _useState6[1];
+
+  var _useState7 = (0, _react.useState)("[{ 'status': 'inactive', 'subject': 'example@pingidentity.com' },{ 'status': 'active', 'subject': 'john@pingidentity.com' }]"),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      jsonValue = _useState8[0],
+      setJsonValue = _useState8[1];
+
+  var copyAddressesToClipboard = (0, _useCopyToClipboard["default"])(addressesValue);
+  var copyJsonToClipboard = (0, _useCopyToClipboard["default"])(jsonValue);
+  var buttonSx = {
+    position: 'absolute',
+    right: 0,
+    top: '5px'
+  };
+  var containerSx = {
+    sx: {
+      '& input': {
+        paddingRight: '40px'
+      }
+    }
+  };
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_["default"], {
+    label: "Multiple Addresses",
+    labelMode: "float",
+    onChange: function onChange(e) {
+      return setAddressesValue(e.target.value);
+    },
+    value: addressesValue,
+    containerProps: containerSx,
+    slots: {
+      inContainer: (0, _react2.jsx)(_CopyButton["default"], {
+        onPress: copyAddressesToClipboard,
+        sx: buttonSx,
+        iconProps: {
+          sx: {
+            path: {
+              fill: 'active'
+            }
+          }
+        }
+      })
+    },
+    mb: 30
+  }), (0, _react2.jsx)(_["default"], {
+    label: "Example JSON",
+    labelMode: "float",
+    onChange: function onChange(e) {
+      return setJsonValue(e.target.value);
+    },
+    value: jsonValue,
+    containerProps: containerSx,
+    slots: {
+      inContainer: (0, _react2.jsx)(_CopyButton["default"], {
+        onPress: copyJsonToClipboard,
+        sx: buttonSx,
+        iconProps: {
+          sx: {
+            path: {
+              fill: 'active'
+            }
+          }
+        }
+      })
+    }
+  }));
+};
+
+exports.WithSlots = WithSlots;

package/lib/cjs/hooks/useAriaLabelWarning/useAriaLabelWarning.js

@@ -17,8 +17,9 @@ var _react = require("react");
  * e.g. "\`Component\` requires an aria-label."
 */
 var useAriaLabelWarning = function useAriaLabelWarning(component, ariaLabel) {
+  var condition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   (0, _react.useEffect)(function () {
-    if (process.env.NODE_ENV === 'development' && !ariaLabel) {
+    if (process.env.NODE_ENV === 'development' && condition && !ariaLabel) {
       // eslint-disable-next-line no-console
       console.warn("".concat(component, " requires an aria-label"), '\n', '\n', 'NOTE: This is a development-only warning and will not display in production.');
     }