@pingux/astro 2.51.0-alpha.0 → 2.51.0

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 (29) hide show
  1. package/lib/cjs/components/FieldHelperText/FieldHelperText.styles.d.ts +832 -2
  2. package/lib/cjs/components/ListBox/ListBox.d.ts +11 -0
  3. package/lib/cjs/components/ListBox/ListBox.js +7 -45
  4. package/lib/cjs/components/ListBox/ListBox.styles.d.ts +3 -0
  5. package/lib/cjs/components/ListBox/ListBox.test.d.ts +1 -0
  6. package/lib/cjs/components/ListBox/ListBox.test.js +29 -28
  7. package/lib/cjs/components/ListBox/ListBoxContext.d.ts +2 -0
  8. package/lib/cjs/components/ListBox/ListBoxContext.js +1 -1
  9. package/lib/cjs/components/ListBox/ListBoxSection.d.ts +10 -0
  10. package/lib/cjs/components/ListBox/ListBoxSection.js +4 -4
  11. package/lib/cjs/components/ListBox/Option.d.ts +4 -0
  12. package/lib/cjs/components/ListBox/Option.js +11 -33
  13. package/lib/cjs/components/ListBox/index.d.ts +2 -0
  14. package/lib/cjs/components/Text/Text.styles.d.ts +1664 -18
  15. package/lib/cjs/hooks/useSelectField/useSelectField.d.ts +2 -2
  16. package/lib/cjs/hooks/useSelectField/useSelectField.js +1 -1
  17. package/lib/cjs/types/index.d.ts +1 -0
  18. package/lib/cjs/types/index.js +27 -16
  19. package/lib/cjs/types/listBox.d.ts +49 -0
  20. package/lib/cjs/types/listBox.js +6 -0
  21. package/lib/components/ListBox/ListBox.js +8 -46
  22. package/lib/components/ListBox/ListBox.test.js +23 -28
  23. package/lib/components/ListBox/ListBoxContext.js +1 -1
  24. package/lib/components/ListBox/ListBoxSection.js +4 -4
  25. package/lib/components/ListBox/Option.js +11 -33
  26. package/lib/hooks/useSelectField/useSelectField.js +1 -1
  27. package/lib/types/index.js +1 -0
  28. package/lib/types/listBox.js +1 -0
  29. package/package.json +1 -1
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import { ListLayout } from '@react-stately/layout';
3
+ import { ListBoxProps } from '../../types';
4
+ export declare const collectionTypes: {
5
+ ITEM: string;
6
+ LOADER: string;
7
+ PLACEHOLDER: string;
8
+ };
9
+ export declare function useListBoxLayout(state: any): ListLayout<unknown>;
10
+ declare const ListBox: React.ForwardRefExoticComponent<ListBoxProps & React.RefAttributes<unknown>>;
11
+ export default ListBox;
@@ -27,10 +27,9 @@ var _i18n = require("@react-aria/i18n");
27
27
  var _listbox = require("@react-aria/listbox");
28
28
  var _virtualizer = require("@react-aria/virtualizer");
29
29
  var _layout = require("@react-stately/layout");
30
- var _propTypes = _interopRequireDefault(require("prop-types"));
31
- var _isIterable = require("../../utils/devUtils/props/isIterable");
30
+ var _hooks = require("../../hooks");
32
31
  var _Loader = _interopRequireDefault(require("../Loader"));
33
- var _index = require("./index.js");
32
+ var _index = require("./index");
34
33
  var _ListBoxContext = require("./ListBoxContext");
35
34
  var _ListBoxSection = _interopRequireDefault(require("./ListBoxSection"));
36
35
  var _react2 = require("@emotion/react");
@@ -92,10 +91,10 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
92
91
  ariaDescribedby = props['aria-describedby'],
93
92
  ariaDetails = props['aria-details'],
94
93
  others = (0, _objectWithoutProperties2["default"])(props, _excluded);
95
- var focusStrategy = state.focusStrategy;
94
+
96
95
  // Object matching React Aria API with all options
97
96
  var listBoxOptions = {
98
- autoFocus: hasAutoFocus || focusStrategy,
97
+ autoFocus: hasAutoFocus,
99
98
  defaultSelectedKeys: defaultSelectedKeys,
100
99
  disabledKeys: disabledKeys,
101
100
  disallowEmptySelection: hasNoEmptySelection,
@@ -120,13 +119,13 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
120
119
  'aria-describedby': ariaDescribedby,
121
120
  'aria-details': ariaDetails
122
121
  };
123
- var listBoxRef = (0, _react.useRef)();
122
+ var listBoxRef = (0, _hooks.useLocalOrForwardRef)(null);
124
123
  /* istanbul ignore next */
125
124
  (0, _react.useImperativeHandle)(ref, function () {
126
125
  return listBoxRef.current;
127
126
  });
128
127
  var layout = useListBoxLayout(state);
129
- layout.isLoading = props.isLoading;
128
+ layout.isLoading = props.isLoading ? props.isLoading : false;
130
129
 
131
130
  // Get props for the listbox
132
131
  var _useListBox = (0, _listbox.useListBox)(_objectSpread(_objectSpread({}, listBoxOptions), {}, {
@@ -155,6 +154,7 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
155
154
  return (0, _react2.jsx)(_ListBoxContext.ListBoxContext.Provider, {
156
155
  value: state
157
156
  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _reactAria.mergeProps)(listBoxProps, others), {
157
+ autoFocus: hasAutoFocus,
158
158
  style: {
159
159
  outline: 'none'
160
160
  },
@@ -188,43 +188,5 @@ var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
188
188
  return null;
189
189
  }));
190
190
  });
191
- ListBox.propTypes = {
192
- defaultSelectedKeys: _isIterable.isIterableProp,
193
- disabledKeys: _isIterable.isIterableProp,
194
- hasAutoFocus: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string]),
195
- hasFocusWrap: _propTypes["default"].bool,
196
- hasNoEmptySelection: _propTypes["default"].bool,
197
- hasVirtualFocus: _propTypes["default"].bool,
198
- id: _propTypes["default"].string,
199
- isFocusedOnHover: _propTypes["default"].bool,
200
- isLoading: _propTypes["default"].bool,
201
- isSelectedOnPressUp: _propTypes["default"].bool,
202
- isVirtualized: _propTypes["default"].bool,
203
- items: _isIterable.isIterableProp,
204
- keyboardDelegate: _propTypes["default"].shape({}),
205
- label: _propTypes["default"].node,
206
- onLoadMore: _propTypes["default"].func,
207
- onScroll: _propTypes["default"].func,
208
- onSelectionChange: _propTypes["default"].func,
209
- renderEmptyState: _propTypes["default"].node,
210
- selectedKeys: _isIterable.isIterableProp,
211
- selectionMode: _propTypes["default"].oneOf(['none', 'single', 'multiple']),
212
- 'aria-label': _propTypes["default"].string,
213
- 'aria-labelledby': _propTypes["default"].string,
214
- 'aria-describedby': _propTypes["default"].string,
215
- 'aria-details': _propTypes["default"].string,
216
- state: _propTypes["default"].shape({
217
- close: _propTypes["default"].func,
218
- collection: _propTypes["default"].shape({}),
219
- focusStrategy: _propTypes["default"].string,
220
- isOpen: _propTypes["default"].bool,
221
- selectionManager: _propTypes["default"].shape({
222
- focusedKey: _propTypes["default"].string
223
- })
224
- })
225
- };
226
- ListBox.defaultProps = {
227
- state: {}
228
- };
229
191
  var _default = ListBox;
230
192
  exports["default"] = _default;
@@ -0,0 +1,3 @@
1
+ import { ThemeUICSSObject } from 'theme-ui';
2
+ declare const listBox: ThemeUICSSObject;
3
+ export default listBox;
@@ -0,0 +1 @@
1
+ export {};
@@ -1,8 +1,12 @@
1
1
  "use strict";
2
2
 
3
+ var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
+ var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
5
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
+ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
3
7
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
5
- var _react = _interopRequireDefault(require("react"));
9
+ var _react = _interopRequireWildcard(require("react"));
6
10
  var _reactStately = require("react-stately");
7
11
  var _list = require("@react-stately/list");
8
12
  var _react2 = require("@testing-library/react");
@@ -10,6 +14,8 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
10
14
  var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
11
15
  var _ = _interopRequireDefault(require("."));
12
16
  var _react3 = require("@emotion/react");
17
+ 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); }
18
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
13
19
  var testId = 'test-label';
14
20
  var items = [{
15
21
  name: 'a'
@@ -40,19 +46,13 @@ var defaultWithSectionsProps = {
40
46
  'aria-labelledby': 'label',
41
47
  items: itemsWithSections
42
48
  };
43
- var ListBoxWithState = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
44
- var state = (0, _list.useListState)({
45
- props: props
46
- });
49
+ var ListBoxWithState = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
50
+ var theseProps = {};
51
+ var state = (0, _list.useListState)(theseProps);
47
52
  return (0, _react3.jsx)(_["default"], (0, _extends2["default"])({}, props, {
48
53
  state: state,
49
54
  ref: ref
50
- }), function (item) {
51
- return (0, _react3.jsx)(_reactStately.Item, {
52
- key: item.name,
53
- childItems: item.options
54
- }, item.name);
55
- });
55
+ }));
56
56
  });
57
57
  var ListBoxWithSections = function ListBoxWithSections(props) {
58
58
  var state = (0, _list.useListState)(props);
@@ -62,24 +62,28 @@ var ListBoxWithSections = function ListBoxWithSections(props) {
62
62
  };
63
63
  var getComponent = function getComponent() {
64
64
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
65
- return (0, _react2.render)((0, _react3.jsx)(ListBoxWithState, (0, _extends2["default"])({}, defaultProps, props)));
65
+ return (0, _react2.render)((0, _react3.jsx)(ListBoxWithState, (0, _extends2["default"])({}, defaultProps, props, {
66
+ items: items
67
+ }), function (item) {
68
+ return (0, _react3.jsx)(_reactStately.Item, {
69
+ key: item.name,
70
+ childItems: item.options
71
+ }, item.name);
72
+ }));
66
73
  };
67
74
  var getSectionsComponent = function getSectionsComponent() {
68
75
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
69
76
  return (0, _react2.render)((0, _react3.jsx)(ListBoxWithSections, (0, _extends2["default"])({}, defaultWithSectionsProps, props), function (section) {
70
- return (
71
- // eslint-disable-next-line testing-library/no-node-access
72
- (0, _react3.jsx)(_reactStately.Section, {
73
- key: section.name,
74
- title: section.name,
75
- items: section.options
76
- }, function (item) {
77
- return (0, _react3.jsx)(_reactStately.Item, {
78
- key: item.name,
79
- childItems: item.options
80
- }, item.name);
81
- })
82
- );
77
+ return (0, _react3.jsx)(_reactStately.Section, {
78
+ key: section.name,
79
+ title: section.name,
80
+ items: section.options
81
+ }, function (item) {
82
+ return (0, _react3.jsx)(_reactStately.Item, {
83
+ key: item.name,
84
+ childItems: item.options
85
+ }, item.name);
86
+ });
83
87
  }));
84
88
  };
85
89
  var offsetWidth;
@@ -96,9 +100,6 @@ beforeAll(function () {
96
100
  scrollHeight = jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(function () {
97
101
  return 48;
98
102
  });
99
- jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
100
- return cb();
101
- });
102
103
  jest.useFakeTimers();
103
104
  });
104
105
  afterEach(function () {
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const ListBoxContext: React.Context<{}>;
@@ -7,5 +7,5 @@ _Object$defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.ListBoxContext = void 0;
9
9
  var _react = _interopRequireDefault(require("react"));
10
- var ListBoxContext = /*#__PURE__*/_react["default"].createContext(null);
10
+ var ListBoxContext = /*#__PURE__*/_react["default"].createContext({});
11
11
  exports.ListBoxContext = ListBoxContext;
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { ListBoxSectionProps } from '../../types';
3
+ declare const ListBoxSection: {
4
+ (props: ListBoxSectionProps): React.JSX.Element;
5
+ propTypes: {
6
+ header: any;
7
+ reusableView: any;
8
+ };
9
+ };
10
+ export default ListBoxSection;
@@ -26,13 +26,13 @@ var ListBoxSection = function ListBoxSection(props) {
26
26
  reusableView = props.reusableView,
27
27
  header = props.header;
28
28
  var item = reusableView.content;
29
- var _useListBoxSection = (0, _listbox.useListBoxSection)({
29
+ var _ref = (0, _listbox.useListBoxSection)({
30
30
  heading: item.rendered,
31
31
  'aria-label': item['aria-label']
32
32
  }),
33
- headingProps = _useListBoxSection.headingProps,
34
- groupProps = _useListBoxSection.groupProps;
35
- var headerRef = (0, _react.useRef)();
33
+ headingProps = _ref.headingProps,
34
+ groupProps = _ref.groupProps;
35
+ var headerRef = (0, _react.useRef)(null);
36
36
  (0, _virtualizer.useVirtualizerItem)({
37
37
  reusableView: header,
38
38
  ref: headerRef
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { OptionType } from '../../types';
3
+ declare const Option: React.ForwardRefExoticComponent<OptionType & React.RefAttributes<unknown>>;
4
+ export default Option;
@@ -21,15 +21,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
21
21
  var _react = _interopRequireWildcard(require("react"));
22
22
  var _CircleSmallIcon = _interopRequireDefault(require("@pingux/mdi-react/CircleSmallIcon"));
23
23
  var _listbox = require("@react-aria/listbox");
24
- var _propTypes = _interopRequireDefault(require("prop-types"));
25
24
  var _MultivaluesContext = require("../../context/MultivaluesContext");
26
25
  var _hooks = require("../../hooks");
27
- var _isIterable = require("../../utils/devUtils/props/isIterable");
28
26
  var _Box = _interopRequireDefault(require("../Box"));
29
27
  var _Icon = _interopRequireDefault(require("../Icon"));
30
28
  var _ListBoxContext = require("./ListBoxContext");
31
29
  var _react2 = require("@emotion/react");
32
- var _excluded = ["item", "hasVirtualFocus"];
30
+ var _excluded = ["item", "hasVirtualFocus"],
31
+ _excluded2 = ["onPressStart", "onPressUp"];
33
32
  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); }
34
33
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
35
34
  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; }
@@ -47,7 +46,7 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
47
46
  var isSeparator = itemProps.isSeparator,
48
47
  dataId = itemProps['data-id'];
49
48
  // Get props for the option element
50
- var optionRef = (0, _react.useRef)();
49
+ var optionRef = (0, _react.useRef)(null);
51
50
  /* istanbul ignore next */
52
51
  (0, _react.useImperativeHandle)(ref, function () {
53
52
  return optionRef.current;
@@ -82,11 +81,13 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
82
81
  }
83
82
  }, [isFocused, updateActiveDescendant]);
84
83
 
85
- /* Related to UIP-4992
86
- * Need to remove these properties to avoid errors in the console on the external app.
87
- * By the way, these properties return "undefined", so it shouldn't create issues */
88
- delete optionProps.onPressStart;
89
- delete optionProps.onPressUp;
84
+ // /* Related to UIP-4992
85
+ // * Need to remove these properties to avoid errors in the console on the external app.
86
+ // * By the way, these properties return "undefined", so it shouldn't create issues */
87
+ var _ref = optionProps,
88
+ onPressStart = _ref.onPressStart,
89
+ onPressUp = _ref.onPressUp,
90
+ theseOptionProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
90
91
  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
91
92
  as: "li",
92
93
  isRow: true,
@@ -95,7 +96,7 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
95
96
  "data-id": dataId,
96
97
  className: classNames,
97
98
  onPointerOver: setFocusOnHover
98
- }, optionProps, others, {
99
+ }, theseOptionProps, others, {
99
100
  "aria-label": ariaLabel
100
101
  }), isSelected && (0, _react2.jsx)(_Icon["default"], {
101
102
  icon: _CircleSmallIcon["default"],
@@ -104,28 +105,5 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
104
105
  }
105
106
  }), rendered);
106
107
  });
107
- Option.propTypes = {
108
- hasVirtualFocus: _propTypes["default"].bool,
109
- item: _propTypes["default"].shape({
110
- key: _propTypes["default"].string,
111
- props: _propTypes["default"].shape({
112
- 'data-id': _propTypes["default"].string,
113
- isSeparator: _propTypes["default"].bool
114
- }),
115
- rendered: _propTypes["default"].node,
116
- 'aria-label': _propTypes["default"].string
117
- }),
118
- state: _propTypes["default"].shape({
119
- disabledKeys: _isIterable.isIterableProp,
120
- selectionManager: _propTypes["default"].shape({
121
- focusedKey: _propTypes["default"].string,
122
- isSelected: _propTypes["default"].func
123
- })
124
- })
125
- };
126
- Option.defaultProps = {
127
- item: {},
128
- state: {}
129
- };
130
108
  var _default = Option;
131
109
  exports["default"] = _default;
@@ -0,0 +1,2 @@
1
+ export { default } from './ListBox';
2
+ export { default as Option } from './Option';