@pingux/astro 2.33.0-alpha.0 → 2.33.0-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/lib/cjs/components/ButtonBar/ButtonBar.stories.js +61 -5
  2. package/lib/cjs/components/Tabs/Tabs.stories.js +2 -2
  3. package/lib/cjs/components/Tabs/Tabs.style.js +0 -1
  4. package/lib/cjs/hooks/useComponentToggle/useComponentToggle.js +1 -3
  5. package/lib/cjs/hooks/useField/useField.d.ts +33 -35
  6. package/lib/cjs/hooks/useField/useField.js +1 -1
  7. package/lib/cjs/hooks/useOverlayPanelState/index.d.ts +1 -0
  8. package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.d.ts +32 -0
  9. package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.js +0 -10
  10. package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.test.d.ts +1 -0
  11. package/lib/cjs/hooks/useProgressiveState/index.d.ts +1 -0
  12. package/lib/cjs/hooks/useProgressiveState/useProgressiveState.d.ts +11 -0
  13. package/lib/cjs/hooks/useProgressiveState/useProgressiveState.js +3 -6
  14. package/lib/cjs/hooks/useProgressiveState/useProgressiveState.test.d.ts +1 -0
  15. package/lib/cjs/hooks/useProgressiveState/useProgressiveState.test.js +7 -16
  16. package/lib/cjs/hooks/usePropWarning/index.d.ts +1 -0
  17. package/lib/cjs/hooks/usePropWarning/usePropWarning.d.ts +13 -0
  18. package/lib/cjs/hooks/usePropWarning/usePropWarning.js +0 -8
  19. package/lib/cjs/hooks/usePropWarning/usePropWarning.test.d.ts +1 -0
  20. package/lib/cjs/hooks/usePropWarning/usePropWarning.test.js +13 -9
  21. package/lib/cjs/hooks/useRockerButton/index.d.ts +1 -0
  22. package/lib/cjs/hooks/useRockerButton/useRockerButton.d.ts +241 -0
  23. package/lib/cjs/hooks/useSelectField/index.d.ts +1 -0
  24. package/lib/cjs/hooks/useSelectField/useSelectField.d.ts +55 -0
  25. package/lib/cjs/hooks/useSelectField/useSelectField.js +10 -10
  26. package/lib/cjs/types/item.d.ts +4 -7
  27. package/lib/cjs/types/popoverContainer.d.ts +1 -0
  28. package/lib/cjs/types/shared/style.d.ts +6 -0
  29. package/lib/cjs/utils/designUtils/figmaLinks.js +4 -2
  30. package/lib/components/ButtonBar/ButtonBar.stories.js +57 -3
  31. package/lib/components/Tabs/Tabs.stories.js +3 -3
  32. package/lib/components/Tabs/Tabs.style.js +0 -1
  33. package/lib/hooks/useComponentToggle/useComponentToggle.js +1 -3
  34. package/lib/hooks/useField/useField.js +2 -0
  35. package/lib/hooks/useOverlayPanelState/useOverlayPanelState.js +0 -11
  36. package/lib/hooks/useProgressiveState/useProgressiveState.js +3 -7
  37. package/lib/hooks/useProgressiveState/useProgressiveState.test.js +7 -16
  38. package/lib/hooks/usePropWarning/usePropWarning.js +0 -8
  39. package/lib/hooks/usePropWarning/usePropWarning.test.js +13 -9
  40. package/lib/hooks/useSelectField/useSelectField.js +11 -9
  41. package/lib/utils/designUtils/figmaLinks.js +4 -2
  42. package/package.json +1 -1
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
5
5
  _Object$defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports["default"] = exports.RightAligned = exports.Default = void 0;
8
+ exports["default"] = exports.SecondaryRightAligned = exports.Secondary = exports.RightAligned = exports.Default = void 0;
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
11
11
  var _index = require("../../index");
@@ -60,12 +60,39 @@ var RightAligned = function RightAligned() {
60
60
  return (0, _react2.jsx)(_index.ButtonBar, {
61
61
  align: "right"
62
62
  }, (0, _react2.jsx)(_index.Button, {
63
+ variant: "link",
64
+ "data-id": "cancel-button",
65
+ onPress: function onPress() {
66
+ return alert('Cancel button pressed');
67
+ }
68
+ }, "Cancel"), (0, _react2.jsx)(_index.Button, {
63
69
  variant: "primary",
64
70
  "data-id": "next-button",
65
71
  onPress: function onPress() {
66
72
  return alert('Next button pressed');
67
73
  }
68
- }, "Next"), (0, _react2.jsx)(_index.Button, {
74
+ }, "Next"));
75
+ };
76
+ exports.RightAligned = RightAligned;
77
+ RightAligned.parameters = {
78
+ design: {
79
+ type: 'figma',
80
+ url: _figmaLinks.FIGMA_LINKS.buttonBar.rightAligned
81
+ }
82
+ };
83
+ var Secondary = function Secondary() {
84
+ return (0, _react2.jsx)(_index.ButtonBar, null, (0, _react2.jsx)(_index.Button, {
85
+ variant: "primary",
86
+ "data-id": "save-button",
87
+ onPress: function onPress() {
88
+ return alert('Save button pressed');
89
+ }
90
+ }, "Save"), (0, _react2.jsx)(_index.Button, {
91
+ "data-id": "close-button",
92
+ onPress: function onPress() {
93
+ return alert('Close button pressed');
94
+ }
95
+ }, "Close"), (0, _react2.jsx)(_index.Button, {
69
96
  variant: "link",
70
97
  "data-id": "cancel-button",
71
98
  onPress: function onPress() {
@@ -73,10 +100,39 @@ var RightAligned = function RightAligned() {
73
100
  }
74
101
  }, "Cancel"));
75
102
  };
76
- exports.RightAligned = RightAligned;
77
- RightAligned.parameters = {
103
+ exports.Secondary = Secondary;
104
+ Secondary.parameters = {
78
105
  design: {
79
106
  type: 'figma',
80
- url: _figmaLinks.FIGMA_LINKS.buttonBar.rightAligned
107
+ url: _figmaLinks.FIGMA_LINKS.buttonBar.secondary
108
+ }
109
+ };
110
+ var SecondaryRightAligned = function SecondaryRightAligned() {
111
+ return (0, _react2.jsx)(_index.ButtonBar, {
112
+ align: "right"
113
+ }, (0, _react2.jsx)(_index.Button, {
114
+ variant: "link",
115
+ "data-id": "cancel-button",
116
+ onPress: function onPress() {
117
+ return alert('Cancel button pressed');
118
+ }
119
+ }, "Cancel"), (0, _react2.jsx)(_index.Button, {
120
+ "data-id": "close-button",
121
+ onPress: function onPress() {
122
+ return alert('Close button pressed');
123
+ }
124
+ }, "Close"), (0, _react2.jsx)(_index.Button, {
125
+ variant: "primary",
126
+ "data-id": "next-button",
127
+ onPress: function onPress() {
128
+ return alert('Next button pressed');
129
+ }
130
+ }, "Next"));
131
+ };
132
+ exports.SecondaryRightAligned = SecondaryRightAligned;
133
+ SecondaryRightAligned.parameters = {
134
+ design: {
135
+ type: 'figma',
136
+ url: _figmaLinks.FIGMA_LINKS.buttonBar.secondaryRightAligned
81
137
  }
82
138
  };
@@ -196,11 +196,11 @@ var ContentSlots = function ContentSlots() {
196
196
  marginLeft: 6,
197
197
  marginTop: 10
198
198
  };
199
- var afterTabNode = (0, _react2.jsx)(_index.Badge, {
199
+ var afterTabNode = (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Badge, {
200
200
  variant: "countNeutral",
201
201
  sx: nodeSx,
202
202
  label: "14"
203
- });
203
+ }));
204
204
  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Tabs, {
205
205
  items: tabs,
206
206
  mb: 50
@@ -24,7 +24,6 @@ var tab = {
24
24
  display: 'inline-flex',
25
25
  outline: 'none',
26
26
  transform: 'translateY(1px)',
27
- width: '100%',
28
27
  '&.is-focused': {
29
28
  '& > span': _objectSpread({}, _Buttons.focusWithCroppedOutline)
30
29
  },
@@ -14,9 +14,7 @@ var useComponentToggle = function useComponentToggle(props) {
14
14
  ComponentToRenderIfFalse = props.ComponentToRenderIfFalse,
15
15
  condition = props.condition,
16
16
  onConditionChange = props.onConditionChange;
17
- var _useProgressiveState = (0, _index.useProgressiveState)(condition, function () {
18
- return null;
19
- }),
17
+ var _useProgressiveState = (0, _index.useProgressiveState)(condition, false),
20
18
  _useProgressiveState2 = (0, _slicedToArray2["default"])(_useProgressiveState, 2),
21
19
  isToggled = _useProgressiveState2[0],
22
20
  setIsToggled = _useProgressiveState2[1];
@@ -1,5 +1,5 @@
1
- /// <reference types="react" />
2
- /// <reference types="react" />
1
+ import { Key } from 'react';
2
+ import { AriaLabelingProps, CollectionChildren, DOMProps } from '@react-types/shared';
3
3
  import { LabelProps as ThemeUILabelProps } from 'theme-ui';
4
4
  import { BoxProps } from '../../types';
5
5
  /**
@@ -22,7 +22,29 @@ interface LabelProps extends ThemeUILabelProps {
22
22
  [className: string]: boolean;
23
23
  };
24
24
  }
25
- interface ControlProps<T> extends React.HTMLAttributes<T> {
25
+ export interface FieldControlInputProps extends AriaLabelingProps, DOMProps {
26
+ autoComplete?: string;
27
+ autoCorrect?: string;
28
+ autoFocus?: boolean;
29
+ className?: string;
30
+ defaultSelected?: boolean;
31
+ defaultValue?: string | number;
32
+ disabled?: boolean;
33
+ id?: string;
34
+ isFocused?: boolean;
35
+ isIndeterminate?: boolean;
36
+ maxLength?: number;
37
+ name?: string;
38
+ onChange: (event: CustomChangeEventType | React.ChangeEvent) => void | undefined;
39
+ placeholder?: string;
40
+ readOnly?: boolean;
41
+ required?: boolean;
42
+ role?: string;
43
+ spellCheck?: boolean;
44
+ type?: string;
45
+ value?: string | number;
46
+ }
47
+ export interface ControlProps extends React.HTMLAttributes<Element> {
26
48
  statusClasses?: {
27
49
  [className: string]: boolean;
28
50
  };
@@ -31,14 +53,14 @@ export interface UseFieldProps<T> {
31
53
  autocomplete?: string;
32
54
  autoComplete?: string;
33
55
  autoCorrect?: string;
34
- children?: React.ReactNode;
56
+ children?: React.ReactNode | CollectionChildren<T>;
35
57
  className?: string;
36
58
  containerProps?: ContainerProps;
37
- controlProps?: ControlProps<T>;
59
+ controlProps?: ControlProps;
38
60
  defaultText?: string;
39
61
  defaultValue?: string | number;
40
62
  direction?: string;
41
- disabledKeys?: string[];
63
+ disabledKeys?: string[] | Iterable<Key>;
42
64
  hasAutoFocus?: boolean;
43
65
  hasNoStatusIndicator?: boolean;
44
66
  helperText?: string;
@@ -62,7 +84,7 @@ export interface UseFieldProps<T> {
62
84
  onFocus?: (e: React.FocusEvent) => void;
63
85
  onFocusChange?: (isFocused: boolean) => void;
64
86
  onLoadMore?: () => void;
65
- onOpenChange?: () => void;
87
+ onOpenChange?: (isOpen: boolean) => unknown;
66
88
  onSelectionChange?: (key: string) => void;
67
89
  placeholder?: string | number;
68
90
  role?: string;
@@ -84,32 +106,7 @@ type CustomChangeEventType = {
84
106
  };
85
107
  declare const useField: <T>(props: UseFieldProps<T>) => {
86
108
  fieldContainerProps: any;
87
- fieldControlInputProps: {
88
- 'aria-label'?: string | undefined;
89
- 'aria-labelledby'?: string | undefined;
90
- 'aria-describedby'?: string | undefined;
91
- 'aria-details'?: string | undefined;
92
- id: string | undefined;
93
- autoComplete: string | undefined;
94
- autoCorrect: string | undefined;
95
- autoFocus: boolean | undefined;
96
- className: string;
97
- defaultSelected: boolean | undefined;
98
- defaultValue: string | number | undefined;
99
- disabled: boolean | undefined;
100
- isFocused: boolean;
101
- isIndeterminate: boolean | undefined;
102
- maxLength: number | undefined;
103
- name: string | undefined;
104
- onChange: (e: CustomChangeEventType) => any;
105
- placeholder: string | number | undefined;
106
- readOnly: boolean | undefined;
107
- required: boolean | undefined;
108
- role: string | undefined;
109
- spellCheck: string | undefined;
110
- type: string | undefined;
111
- value: string | number | undefined;
112
- };
109
+ fieldControlInputProps: FieldControlInputProps;
113
110
  fieldControlWrapperProps: {
114
111
  id?: string | undefined;
115
112
  statusClasses?: {
@@ -120,6 +117,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
120
117
  isDisabled?: boolean | undefined;
121
118
  variant?: string | undefined;
122
119
  as?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | null | undefined;
120
+ style?: string | import("react").CSSProperties | undefined;
123
121
  grid?: import("theme-ui").StylePropertyValue<import("csstype").Property.Grid | undefined>;
124
122
  accentColor?: import("theme-ui").StylePropertyValue<import("csstype").Property.AccentColor | undefined>;
125
123
  alignContent?: import("theme-ui").StylePropertyValue<import("csstype").Property.AlignContent | undefined>;
@@ -1118,7 +1116,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
1118
1116
  color?: string | undefined;
1119
1117
  content?: string | undefined;
1120
1118
  translate?: "yes" | "no" | undefined;
1121
- key?: import("react").Key | null | undefined;
1119
+ key?: Key | null | undefined;
1122
1120
  defaultChecked?: boolean | undefined;
1123
1121
  defaultValue?: string | number | readonly string[] | undefined;
1124
1122
  suppressContentEditableWarning?: boolean | undefined;
@@ -1433,7 +1431,7 @@ declare const useField: <T>(props: UseFieldProps<T>) => {
1433
1431
  color?: string | undefined;
1434
1432
  content?: string | undefined;
1435
1433
  translate?: "yes" | "no" | undefined;
1436
- key?: import("react").Key | null | undefined;
1434
+ key?: Key | null | undefined;
1437
1435
  defaultChecked?: boolean | undefined;
1438
1436
  defaultValue?: string | number | readonly string[] | undefined;
1439
1437
  suppressContentEditableWarning?: boolean | undefined;
@@ -25,7 +25,7 @@ var _constants = require("../../components/Label/constants");
25
25
  var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
26
26
  var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
27
27
  var _ = require("..");
28
- var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "className", "containerProps", "controlProps", "defaultValue", "hasAutoFocus", "hasNoStatusIndicator", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "role", "spellCheck", "status", "statusClasses", "type", "value", "wrapperProps"];
28
+ var _excluded = ["autocomplete", "autoComplete", "autoCorrect", "className", "containerProps", "controlProps", "defaultValue", "hasAutoFocus", "hasNoStatusIndicator", "hintText", "id", "isDefaultSelected", "isDisabled", "isIndeterminate", "isReadOnly", "isRequired", "isRestrictiveMultivalues", "label", "labelMode", "labelProps", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "role", "spellCheck", "status", "statusClasses", "type", "value", "wrapperProps"]; // eslint-disable-next-line import/no-unresolved
29
29
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
30
30
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
31
31
  /**
@@ -0,0 +1 @@
1
+ export { default } from './useOverlayPanelState';
@@ -0,0 +1,32 @@
1
+ /// <reference types="react" />
2
+ import { OverlayTriggerState } from 'react-stately';
3
+ interface UseOverlayPanelStateProps {
4
+ isDefaultOpen?: boolean;
5
+ isOpen?: boolean;
6
+ onOpenChange?: (isOpen: boolean) => void;
7
+ transitionDuration?: number;
8
+ }
9
+ export interface UseOverlayPanelReturnState extends OverlayTriggerState {
10
+ isTransitioning?: boolean;
11
+ }
12
+ interface UseOverlayPanelStateReturnValues {
13
+ state: UseOverlayPanelReturnState;
14
+ onClose: (stateProp?: OverlayTriggerState, triggerRef?: React.RefObject<HTMLButtonElement>, onCloseProp?: VoidFunction) => void;
15
+ isTransitioning: boolean;
16
+ }
17
+ interface UseOverlayPanelState {
18
+ /**
19
+ * Returns state-related data and functions for use with a Modal component.
20
+ * @param {Object} [props] Properties provided to the state
21
+ *
22
+ * @param {boolean} [prop.isDefaultOpen] Whether the modal is open by default (uncontrolled).
23
+ * @param {boolean} [prop.isOpen] Whether the modal is currently open (controlled).
24
+ * @param {function} [prop.onOpenChange] Handler that is called when the open state changes.
25
+ * @param {number} [prop.transitionDuration] Number value of the length of the transition in ms.
26
+ *
27
+ * @returns {Object} `{ isOpen: Boolean, open: Function, close: Function, toggle: Function }`
28
+ */
29
+ (props?: UseOverlayPanelStateProps): UseOverlayPanelStateReturnValues;
30
+ }
31
+ declare const useOverlayPanelState: UseOverlayPanelState;
32
+ export default useOverlayPanelState;
@@ -18,16 +18,6 @@ var _reactStately = require("react-stately");
18
18
  var _useMountTransition = _interopRequireDefault(require("../useMountTransition"));
19
19
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
20
20
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
21
- /**
22
- * Returns state-related data and functions for use with a Modal component.
23
- * @param {Object} [props] Properties provided to the state
24
- * @param {Boolean} [props.isDefaultOpen] Whether the modal is open by default (uncontrolled).
25
- * @param {Boolean} [props.isOpen] Whether the modal is currently open (controlled).
26
- * @param {Function} [props.onOpenChange] Handler that is called when the open state changes.
27
- * @param {Number} [props.transitionDuration] Number value of the length of the transition in ms.
28
- * `(isOpen: boolean) => void`
29
- * @returns {Object} `{ isOpen: Boolean, open: Function, close: Function, toggle: Function }`
30
- */
31
21
  var useOverlayPanelState = function useOverlayPanelState() {
32
22
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
33
23
  var isDefaultOpen = props.isDefaultOpen,
@@ -0,0 +1 @@
1
+ export { default } from './useProgressiveState';
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ interface UseProgressiveState {
3
+ /**
4
+ * A custom hook that provides stateful capabilities when the associated prop is not supplied
5
+ * @param {T} prop The intended prop to be controlled by state
6
+ * @param {U} initial The initial state value, used only if the given prop is undefined
7
+ */
8
+ <T, U>(prop: T | undefined, initial: U): [U, React.Dispatch<U>] | [T, () => undefined];
9
+ }
10
+ declare const useProgressiveState: UseProgressiveState;
11
+ export default useProgressiveState;
@@ -6,17 +6,14 @@ _Object$defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports["default"] = void 0;
8
8
  var _react = require("react");
9
- /**
10
- * A custom hook that provides stateful capabilities when the associated prop is not supplied
11
- * @param {*} prop The intended prop to be controlled by state
12
- * @param {*} initial The initial state value, used only if the given prop is undefined
13
- */
14
9
  var useProgressiveState = function useProgressiveState(prop, initial) {
15
10
  var controlledState = (0, _react.useState)(initial);
16
11
  if (prop === undefined) {
17
12
  return controlledState;
18
13
  }
19
- return [prop, function () {}];
14
+ return [prop, function () {
15
+ return undefined;
16
+ }];
20
17
  };
21
18
  var _default = useProgressiveState;
22
19
  exports["default"] = _default;
@@ -1,29 +1,19 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
5
4
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
6
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
7
5
  var _react = _interopRequireDefault(require("react"));
8
6
  var _react2 = require("@testing-library/react");
9
7
  var _reactHooks = require("@testing-library/react-hooks");
10
8
  var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
11
9
  var _useProgressiveState3 = _interopRequireDefault(require("./useProgressiveState"));
12
10
  var _react3 = require("@emotion/react");
13
- var _excluded = ["count"];
14
- var testId = 'test';
15
- var defaultProps = {
16
- 'data-testid': testId
17
- };
18
11
  var hookProps = {
19
12
  prop: 'count',
20
13
  initial: 0
21
14
  };
22
-
23
- /* eslint-disable react/prop-types */
24
15
  var TestComponent = function TestComponent(_ref) {
25
- var count = _ref.count,
26
- others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
16
+ var count = _ref.count;
27
17
  var _useProgressiveState = (0, _useProgressiveState3["default"])(count, 0),
28
18
  _useProgressiveState2 = (0, _slicedToArray2["default"])(_useProgressiveState, 2),
29
19
  countVal = _useProgressiveState2[0],
@@ -31,18 +21,19 @@ var TestComponent = function TestComponent(_ref) {
31
21
  var handleClick = function handleClick() {
32
22
  return setCountVal(countVal + 1);
33
23
  };
34
- return (0, _react3.jsx)("button", (0, _extends2["default"])({}, others, {
24
+ return (0, _react3.jsx)("button", {
25
+ type: "button",
35
26
  onClick: handleClick
36
- }), countVal);
27
+ }, countVal);
37
28
  };
38
29
  var getComponent = function getComponent() {
39
30
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
40
- return (0, _react2.render)((0, _react3.jsx)(TestComponent, (0, _extends2["default"])({}, props, defaultProps)));
31
+ return (0, _react2.render)((0, _react3.jsx)(TestComponent, props));
41
32
  };
42
33
  describe('State Utils', function () {
43
34
  it('should update the state when no prop is provided', function () {
44
35
  getComponent();
45
- var component = _react2.screen.getByTestId(testId);
36
+ var component = _react2.screen.getByRole('button');
46
37
  expect(component).toHaveTextContent('0');
47
38
  _userEvent["default"].click(component);
48
39
  expect(component).toHaveTextContent('1');
@@ -53,7 +44,7 @@ describe('State Utils', function () {
53
44
  getComponent({
54
45
  count: 5
55
46
  });
56
- var component = _react2.screen.getByTestId(testId);
47
+ var component = _react2.screen.getByRole('button');
57
48
  expect(component).toHaveTextContent('5');
58
49
  _userEvent["default"].click(component);
59
50
  expect(component).toHaveTextContent('5');
@@ -0,0 +1 @@
1
+ export { default } from './usePropWarning';
@@ -0,0 +1,13 @@
1
+ /// <reference types="react" />
2
+ interface UsePropWarning {
3
+ /**
4
+ * Provides a development-only console warning for props that we don't want consumers to use
5
+ * @param {Object} props - The whole props object
6
+ * @param {String} propToWarn - Specify prop to warn not to use
7
+ * @param {String} propToUse - Specify prop that should be used instead
8
+ * @param {Boolean} [allowDuplicates] - If allow duplicate warning messages
9
+ */
10
+ (props: React.ComponentProps<React.ComponentType>, propToWarn: string, propToUse: string, allowDuplicates?: boolean): void;
11
+ }
12
+ declare const usePropWarning: UsePropWarning;
13
+ export default usePropWarning;
@@ -10,14 +10,6 @@ var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
10
10
  var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
11
11
  var _react = require("react");
12
12
  var alreadyShown = new _set["default"]();
13
-
14
- /**
15
- * Provides a development-only console warning for props that we don't want consumers to use
16
- * @param {Object} props - The whole props object
17
- * @param {String} propToWarn - Specify prop to warn not to use
18
- * @param {String} propToUse - Specify prop that should be used instead
19
- * @param {Boolean} [allowDuplicates] - If allow duplicate warning messages
20
- */
21
13
  var usePropWarning = function usePropWarning(props, propToWarn, propToUse, allowDuplicates) {
22
14
  (0, _react.useEffect)(function () {
23
15
  if (!allowDuplicates && alreadyShown.has(propToWarn)) {
@@ -7,7 +7,7 @@ describe('usePropWarning', function () {
7
7
  beforeEach(function () {
8
8
  process.env.NODE_ENV = 'development';
9
9
  global.console.warn = function () {
10
- return jest.mock();
10
+ return jest.fn();
11
11
  }; // eslint-disable-line no-console
12
12
  });
13
13
 
@@ -16,8 +16,9 @@ describe('usePropWarning', function () {
16
16
  jest.clearAllMocks();
17
17
  });
18
18
  test('default', function () {
19
- var props = {};
20
- props.disabled = true;
19
+ var props = {
20
+ disabled: true
21
+ };
21
22
  var spy = jest.spyOn(console, 'warn');
22
23
  expect(spy).not.toHaveBeenCalled();
23
24
  (0, _reactHooks.renderHook)(function () {
@@ -26,8 +27,9 @@ describe('usePropWarning', function () {
26
27
  expect(spy).toHaveBeenCalledTimes(1);
27
28
  });
28
29
  test('does not warn if prop does not exist', function () {
29
- var props = {};
30
- props.isDisabled = true;
30
+ var props = {
31
+ isDisabled: true
32
+ };
31
33
  var spy = jest.spyOn(console, 'warn');
32
34
  expect(spy).not.toHaveBeenCalled();
33
35
  (0, _reactHooks.renderHook)(function () {
@@ -36,8 +38,9 @@ describe('usePropWarning', function () {
36
38
  expect(spy).not.toHaveBeenCalled();
37
39
  });
38
40
  test('showns duplicated messages if explicitly allowed', function () {
39
- var props = {};
40
- props.disabled = true;
41
+ var props = {
42
+ disabled: true
43
+ };
41
44
  var spy = jest.spyOn(console, 'warn');
42
45
  (0, _reactHooks.renderHook)(function () {
43
46
  return (0, _usePropWarning["default"])(props, 'disabled', 'isDisabled', true);
@@ -49,8 +52,9 @@ describe('usePropWarning', function () {
49
52
  });
50
53
  test('does not warn if it is in production environment', function () {
51
54
  process.env.NODE_ENV = 'production';
52
- var props = {};
53
- props.disabled = true;
55
+ var props = {
56
+ disabled: true
57
+ };
54
58
  var spy = jest.spyOn(console, 'warn');
55
59
  expect(spy).not.toHaveBeenCalled();
56
60
  (0, _reactHooks.renderHook)(function () {
@@ -0,0 +1 @@
1
+ export { default } from './useRockerButton';