@pingux/astro 1.13.0 → 1.14.0-alpha.2

package/lib/cjs/components/CopyText/CopyText.js

@@ -114,14 +114,41 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return undefined;
   }, [isCopied]);
   var copyToClipboard = (0, _useCopyToClipboard["default"])(value, setIsCopied);
-  var content = mode === 'link' || mode === 'nonClickableContent' ? children : (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
-    variant: "quiet",
-    onPress: copyToClipboard,
-    "aria-label": "copy-content",
-    tabIndex: -1
-  }, focusProps), children);
+
+  var onTextClick = function onTextClick() {
+    var selection = window.getSelection();
+
+    if (selection.toString() === '') {
+      copyToClipboard();
+    }
+  };
+  /* Used for text copying */
+
+
+  var contentRef = (0, _react.useRef)();
+
+  var _usePress = (0, _interactions.usePress)({
+    ref: contentRef,
+    onClick: onTextClick
+  }),
+      pressProps = _usePress.pressProps;
+
+  delete pressProps.onMouseDown;
+  delete pressProps.onPointerDown;
+  var content = mode === 'link' || mode === 'nonClickableContent' ? children : (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    ref: contentRef
+  }, (0, _utils.mergeProps)(focusProps, pressProps)), children);
   var tooltip = isCopied ? 'Copied!' : tooltipText;
   var isTooltipOpen = isFocusVisible || isHovered || isCopied;
+  var pressableRef = (0, _react.useRef)();
+
+  var _usePress2 = (0, _interactions.usePress)({
+    ref: pressableRef
+  }),
+      pressableProps = _usePress2.pressProps;
+
+  delete pressableProps.onMouseDown;
+  delete pressableProps.onPointerDown;
   var wrapperRef = (0, _react.useRef)();
 
   if (mode === 'nonClickableContent') {
@@ -153,12 +180,19 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   return (0, _react2.jsx)(TooltipWrapper, {
     isOpen: isTooltipOpen,
-    tooltip: tooltip
-  }, (0, _react2.jsx)(_interactions.Pressable, null, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    tooltip: tooltip,
+    targetRef: pressableRef
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    ref: pressableRef
+  }, (0, _utils.mergeProps)(hoverProps, pressableProps), {
+    sx: {
+      width: 'min-content'
+    }
+  }), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: ref,
     isRow: true,
     variant: "boxes.copy"
-  }, (0, _utils.mergeProps)(hoverProps, others)), content, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
+  }, others), content, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({
     onPress: copyToClipboard
   }, focusProps)))));
 });

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

@@ -49,6 +49,7 @@ var testId = 'test-copy-text';
 var originalClipboard = _objectSpread({}, global.navigator.clipboard);
 
 var originalExecCommand = global.document.execCommand;
+var originalGetSelection = window.getSelection;
 
 var defaultTest = function defaultTest() {
   var getComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -107,11 +108,15 @@ describe('Text mode', function () {
     global.navigator.clipboard = mockClipboard;
     global.document.execCommand = jest.fn();
     global.document.execCommand.mockReturnValue(true);
+    var mockGetSelection = jest.fn();
+    mockGetSelection.mockReturnValue('');
+    window.getSelection = mockGetSelection;
   });
   afterEach(function () {
     jest.resetAllMocks();
     global.navigator.clipboard = originalClipboard;
     global.document.execCommand = originalExecCommand;
+    window.getSelection = originalGetSelection;
   });
   test('click on text copies data to the clipboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
     var button;
@@ -433,10 +438,14 @@ describe('Link mode', function () {
       writeText: jest.fn()
     };
     global.navigator.clipboard = mockClipboard;
+    var mockGetSelection = jest.fn();
+    mockGetSelection.mockReturnValue('');
+    window.getSelection = mockGetSelection;
   });
   afterEach(function () {
     jest.resetAllMocks();
     global.navigator.clipboard = originalClipboard;
+    window.getSelection = originalGetSelection;
   });
   test('click on copy button copies data to the clipboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16() {
     var button;

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

@@ -1,5 +1,7 @@
 "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", {
@@ -8,22 +10,19 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = void 0;
 
-var _react = require("react");
+var _useDevelopmentWarning = _interopRequireDefault(require("../useDevelopmentWarning"));
 
 /**
  * Provides a development-only console warning when a component
  * that needs an aria-label is mounted without one.
- *
- * 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' && 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.');
-    }
-  }, []);
+  var shouldTrigger = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var message = "".concat(component, " has an undefined aria-label. If the surrounding content sufficiently labels this component instance, you may disable this warning by setting the prop to `null`. Otherwise, please provide an appropriate aria-label. See more info here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label");
+  (0, _useDevelopmentWarning["default"])({
+    message: message,
+    shouldTrigger: shouldTrigger && ariaLabel === undefined
+  });
 };
 
 var _default = useAriaLabelWarning;

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

@@ -28,7 +28,7 @@ test('default useAriaLabelWarning', function () {
   expect(spy).toHaveBeenCalledTimes(1);
 });
 test('useAriaLabelWarning with string', function () {
-  var compound = "".concat(component, " requires an aria-label");
+  var compound = "".concat(component, " has an undefined aria-label. If the surrounding content sufficiently labels this component instance, you may disable this warning by setting the prop to `null`. Otherwise, please provide an appropriate aria-label. See more info here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label");
   var spy = jest.spyOn(console, 'warn');
   expect(spy).not.toHaveBeenCalled();
   (0, _reactHooks.renderHook)(function () {

package/lib/cjs/hooks/useDevelopmentWarning/index.js

@@ -0,0 +1,18 @@
+"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
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useDevelopmentWarning["default"];
+  }
+});
+
+var _useDevelopmentWarning = _interopRequireDefault(require("./useDevelopmentWarning"));

package/lib/cjs/hooks/useDevelopmentWarning/useDevelopmentWarning.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _react = require("react");
+
+/**
+ * Provides a development-only console warning.
+*/
+var useDevelopmentWarning = function useDevelopmentWarning(_ref) {
+  var message = _ref.message,
+      shouldTrigger = _ref.shouldTrigger;
+  (0, _react.useMemo)(function () {
+    if (process.env.NODE_ENV === 'development' && shouldTrigger) {
+      // eslint-disable-next-line no-console
+      console.warn("".concat(message), '\n', '\n', 'NOTE: This is a development-only warning and will not display in production.');
+    }
+  }, [message, shouldTrigger]);
+};
+
+var _default = useDevelopmentWarning;
+exports["default"] = _default;

package/lib/cjs/hooks/useDevelopmentWarning/useDevelopmentWarning.test.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _reactHooks = require("@testing-library/react-hooks");
+
+var _useDevelopmentWarning = _interopRequireDefault(require("./useDevelopmentWarning"));
+
+var message = 'This is test message';
+beforeEach(function () {
+  process.env.NODE_ENV = 'development';
+
+  global.console.warn = function () {
+    return jest.mock();
+  }; // eslint-disable-line no-console
+
+});
+afterEach(function () {
+  process.env.NODE_ENV = 'test';
+  jest.restoreAllMocks();
+});
+test('useDevelopmentWarning with message and trigger false', function () {
+  var spy = jest.spyOn(console, 'warn');
+  expect(spy).not.toHaveBeenCalled();
+  (0, _reactHooks.renderHook)(function () {
+    return (0, _useDevelopmentWarning["default"])({
+      message: message,
+      shouldTrigger: false
+    });
+  });
+  expect(spy).not.toHaveBeenCalled();
+});
+test('useDevelopmentWarning with message and trigger true', function () {
+  var spy = jest.spyOn(console, 'warn');
+  expect(spy).not.toHaveBeenCalled();
+  (0, _reactHooks.renderHook)(function () {
+    return (0, _useDevelopmentWarning["default"])({
+      message: message,
+      shouldTrigger: true
+    });
+  });
+  expect(spy).toHaveBeenNthCalledWith(1, expect.stringMatching(message), expect.any(String), expect.any(String), expect.any(String));
+});

package/lib/cjs/recipes/AttributeMappingReadOnlyField.stories.js

@@ -0,0 +1,165 @@
+"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["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
+
+var _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Recipes/AttributeMappingReadOnlyField'
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var Row = function Row(props) {
+    var withChip = props.withChip,
+        withTooltip = props.withTooltip,
+        leftValue = props.leftValue,
+        rightValue = props.rightValue;
+    return (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      alignItems: "center",
+      mt: "10px"
+    }, (0, _react2.jsx)(_index.TextField, {
+      isReadOnly: true,
+      value: leftValue,
+      labelProps: {
+        mb: 0
+      },
+      controlProps: {
+        variant: 'input.small',
+        'aria-label': "input ".concat(leftValue),
+        sx: {
+          width: '165px'
+        }
+      }
+    }), (0, _react2.jsx)(_index.Separator, {
+      sx: {
+        width: '21px',
+        ml: '2px',
+        mr: '2px'
+      }
+    }), (0, _react2.jsx)(_index.TextField, {
+      isReadOnly: true,
+      value: rightValue,
+      labelProps: {
+        mb: 0
+      },
+      controlProps: {
+        variant: 'input.small',
+        'aria-label': "input ".concat(rightValue),
+        sx: {
+          width: '165px'
+        }
+      }
+    }), withChip && (0, _react2.jsx)(_index.Chip, {
+      label: "Required",
+      sx: {
+        width: '65px',
+        height: '22px',
+        alignSelf: 'center',
+        minWidth: 'fit-content',
+        border: '1px solid',
+        borderColor: 'neutral.80',
+        backgroundColor: 'white !important',
+        ml: 8,
+        '& span': {
+          fontSize: 'sm',
+          lineHeight: 1,
+          color: '#253746'
+        }
+      }
+    }), withTooltip && (0, _react2.jsx)(_index.Box, {
+      ml: "5px",
+      height: "15px",
+      width: "15px"
+    }, (0, _react2.jsx)(_index.HelpHint, {
+      tooltipProps: {
+        direction: 'bottom'
+      }
+    }, "Population set to default")));
+  };
+
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center",
+    mb: "15px"
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontSize: 'lg',
+      lineHeight: '21px',
+      fontWeight: 3,
+      color: 'text.primary'
+    }
+  }, "Attribute Mapping"), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
+    ml: "5px",
+    variant: "inverted",
+    "aria-label": "edit header button"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CreateIcon["default"],
+    size: 18
+  })))), (0, _react2.jsx)(_index.Box, {
+    backgroundColor: "accent.99",
+    width: "450px",
+    padding: "10px 10px 25px 10px"
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: {
+      width: '100%'
+    }
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: {
+      width: 'calc(50% - 22px)'
+    }
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontWeight: 3,
+      fontSize: 'md',
+      lineHeight: '18px',
+      mb: '5px'
+    }
+  }, "PingOne")), (0, _react2.jsx)(_index.Box, {
+    sx: {
+      width: 'calc(50% - 22px)'
+    }
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: {
+      fontWeight: 3,
+      fontSize: 'md',
+      lineHeight: '18px',
+      mb: '5px'
+    }
+  }, "Google Suites"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
+    withChip: true,
+    leftValue: "UserId",
+    rightValue: "mdorey"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "givenName",
+    rightValue: "firstName"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "familyName",
+    rightValue: "lastName"
+  }), (0, _react2.jsx)(Row, {
+    withTooltip: true,
+    leftValue: "population",
+    rightValue: "population"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "password",
+    rightValue: "password"
+  })));
+};
+
+exports.Default = Default;

package/lib/cjs/styles/variants/boxes.js

@@ -172,12 +172,14 @@ var textFieldInContainerSlot = {
 var copy = {
   alignItems: 'center',
   width: 'max-content',
-  cursor: 'pointer',
   '& .is-focused': {
     outline: '1px solid',
     outlineColor: 'active',
     outlineOffset: '4px',
     borderRadius: '4px'
+  },
+  '& span': {
+    cursor: 'text'
   }
 };
 var topShadowScrollbox = {

package/lib/components/CopyText/CopyText.js

@@ -7,10 +7,10 @@ var _excluded = ["children", "tooltip"],
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useFocusRing } from '@react-aria/focus';
-import { Pressable, useHover } from '@react-aria/interactions';
+import { useHover, usePress } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { announce } from '@react-aria/live-announcer';
-import { Box, Button, Tooltip, TooltipTrigger } from '../../index';
+import { Box, Tooltip, TooltipTrigger } from '../../index';
 import CopyButton from './CopyButton';
 import useCopyToClipboard from '../../hooks/useCopyToClipboard';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -82,14 +82,41 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
     return undefined;
   }, [isCopied]);
   var copyToClipboard = useCopyToClipboard(value, setIsCopied);
-  var content = mode === 'link' || mode === 'nonClickableContent' ? children : ___EmotionJSX(Button, _extends({
-    variant: "quiet",
-    onPress: copyToClipboard,
-    "aria-label": "copy-content",
-    tabIndex: -1
-  }, focusProps), children);
+
+  var onTextClick = function onTextClick() {
+    var selection = window.getSelection();
+
+    if (selection.toString() === '') {
+      copyToClipboard();
+    }
+  };
+  /* Used for text copying */
+
+
+  var contentRef = useRef();
+
+  var _usePress = usePress({
+    ref: contentRef,
+    onClick: onTextClick
+  }),
+      pressProps = _usePress.pressProps;
+
+  delete pressProps.onMouseDown;
+  delete pressProps.onPointerDown;
+  var content = mode === 'link' || mode === 'nonClickableContent' ? children : ___EmotionJSX(Box, _extends({
+    ref: contentRef
+  }, mergeProps(focusProps, pressProps)), children);
   var tooltip = isCopied ? 'Copied!' : tooltipText;
   var isTooltipOpen = isFocusVisible || isHovered || isCopied;
+  var pressableRef = useRef();
+
+  var _usePress2 = usePress({
+    ref: pressableRef
+  }),
+      pressableProps = _usePress2.pressProps;
+
+  delete pressableProps.onMouseDown;
+  delete pressableProps.onPointerDown;
   var wrapperRef = useRef();
 
   if (mode === 'nonClickableContent') {
@@ -121,12 +148,19 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
 
   return ___EmotionJSX(TooltipWrapper, {
     isOpen: isTooltipOpen,
-    tooltip: tooltip
-  }, ___EmotionJSX(Pressable, null, ___EmotionJSX(Box, _extends({
+    tooltip: tooltip,
+    targetRef: pressableRef
+  }, ___EmotionJSX(Box, _extends({
+    ref: pressableRef
+  }, mergeProps(hoverProps, pressableProps), {
+    sx: {
+      width: 'min-content'
+    }
+  }), ___EmotionJSX(Box, _extends({
     ref: ref,
     isRow: true,
     variant: "boxes.copy"
-  }, mergeProps(hoverProps, others)), content, ___EmotionJSX(CopyButton, _extends({
+  }, others), content, ___EmotionJSX(CopyButton, _extends({
     onPress: copyToClipboard
   }, focusProps)))));
 });

package/lib/components/CopyText/CopyText.test.js

@@ -27,6 +27,7 @@ var testId = 'test-copy-text';
 var originalClipboard = _objectSpread({}, global.navigator.clipboard);
 
 var originalExecCommand = global.document.execCommand;
+var originalGetSelection = window.getSelection;
 
 var defaultTest = function defaultTest() {
   var getComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -75,11 +76,15 @@ describe('Text mode', function () {
     global.navigator.clipboard = mockClipboard;
     global.document.execCommand = jest.fn();
     global.document.execCommand.mockReturnValue(true);
+    var mockGetSelection = jest.fn();
+    mockGetSelection.mockReturnValue('');
+    window.getSelection = mockGetSelection;
   });
   afterEach(function () {
     jest.resetAllMocks();
     global.navigator.clipboard = originalClipboard;
     global.document.execCommand = originalExecCommand;
+    window.getSelection = originalGetSelection;
   });
   test('click on text copies data to the clipboard', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var button;
@@ -388,10 +393,14 @@ describe('Link mode', function () {
       writeText: jest.fn()
     };
     global.navigator.clipboard = mockClipboard;
+    var mockGetSelection = jest.fn();
+    mockGetSelection.mockReturnValue('');
+    window.getSelection = mockGetSelection;
   });
   afterEach(function () {
     jest.resetAllMocks();
     global.navigator.clipboard = originalClipboard;
+    window.getSelection = originalGetSelection;
   });
   test('click on copy button copies data to the clipboard', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
     var button;

package/lib/hooks/useAriaLabelWarning/useAriaLabelWarning.js

@@ -1,19 +1,16 @@
-import { useEffect } from 'react';
+import useDevelopmentWarning from '../useDevelopmentWarning';
 /**
  * Provides a development-only console warning when a component
  * that needs an aria-label is mounted without one.
- *
- * e.g. "\`Component\` requires an aria-label."
 */
 
 var useAriaLabelWarning = function useAriaLabelWarning(component, ariaLabel) {
-  var condition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-  useEffect(function () {
-    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.');
-    }
-  }, []);
+  var shouldTrigger = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var message = "".concat(component, " has an undefined aria-label. If the surrounding content sufficiently labels this component instance, you may disable this warning by setting the prop to `null`. Otherwise, please provide an appropriate aria-label. See more info here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label");
+  useDevelopmentWarning({
+    message: message,
+    shouldTrigger: shouldTrigger && ariaLabel === undefined
+  });
 };
 
 export default useAriaLabelWarning;

package/lib/hooks/useAriaLabelWarning/useAriaLabelWarning.test.js

@@ -22,7 +22,7 @@ test('default useAriaLabelWarning', function () {
   expect(spy).toHaveBeenCalledTimes(1);
 });
 test('useAriaLabelWarning with string', function () {
-  var compound = "".concat(component, " requires an aria-label");
+  var compound = "".concat(component, " has an undefined aria-label. If the surrounding content sufficiently labels this component instance, you may disable this warning by setting the prop to `null`. Otherwise, please provide an appropriate aria-label. See more info here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label");
   var spy = jest.spyOn(console, 'warn');
   expect(spy).not.toHaveBeenCalled();
   renderHook(function () {

package/lib/hooks/useDevelopmentWarning/index.js

@@ -0,0 +1 @@
+export { default } from './useDevelopmentWarning';

package/lib/hooks/useDevelopmentWarning/useDevelopmentWarning.js

@@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+/**
+ * Provides a development-only console warning.
+*/
+
+var useDevelopmentWarning = function useDevelopmentWarning(_ref) {
+  var message = _ref.message,
+      shouldTrigger = _ref.shouldTrigger;
+  useMemo(function () {
+    if (process.env.NODE_ENV === 'development' && shouldTrigger) {
+      // eslint-disable-next-line no-console
+      console.warn("".concat(message), '\n', '\n', 'NOTE: This is a development-only warning and will not display in production.');
+    }
+  }, [message, shouldTrigger]);
+};
+
+export default useDevelopmentWarning;

package/lib/hooks/useDevelopmentWarning/useDevelopmentWarning.test.js

@@ -0,0 +1,37 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useDevelopmentWarning from './useDevelopmentWarning';
+var message = 'This is test message';
+beforeEach(function () {
+  process.env.NODE_ENV = 'development';
+
+  global.console.warn = function () {
+    return jest.mock();
+  }; // eslint-disable-line no-console
+
+});
+afterEach(function () {
+  process.env.NODE_ENV = 'test';
+  jest.restoreAllMocks();
+});
+test('useDevelopmentWarning with message and trigger false', function () {
+  var spy = jest.spyOn(console, 'warn');
+  expect(spy).not.toHaveBeenCalled();
+  renderHook(function () {
+    return useDevelopmentWarning({
+      message: message,
+      shouldTrigger: false
+    });
+  });
+  expect(spy).not.toHaveBeenCalled();
+});
+test('useDevelopmentWarning with message and trigger true', function () {
+  var spy = jest.spyOn(console, 'warn');
+  expect(spy).not.toHaveBeenCalled();
+  renderHook(function () {
+    return useDevelopmentWarning({
+      message: message,
+      shouldTrigger: true
+    });
+  });
+  expect(spy).toHaveBeenNthCalledWith(1, expect.stringMatching(message), expect.any(String), expect.any(String), expect.any(String));
+});