@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.
- package/lib/cjs/components/FieldHelperText/FieldHelperText.styles.d.ts +832 -2
- package/lib/cjs/components/ListBox/ListBox.d.ts +11 -0
- package/lib/cjs/components/ListBox/ListBox.js +7 -45
- package/lib/cjs/components/ListBox/ListBox.styles.d.ts +3 -0
- package/lib/cjs/components/ListBox/ListBox.test.d.ts +1 -0
- package/lib/cjs/components/ListBox/ListBox.test.js +29 -28
- package/lib/cjs/components/ListBox/ListBoxContext.d.ts +2 -0
- package/lib/cjs/components/ListBox/ListBoxContext.js +1 -1
- package/lib/cjs/components/ListBox/ListBoxSection.d.ts +10 -0
- package/lib/cjs/components/ListBox/ListBoxSection.js +4 -4
- package/lib/cjs/components/ListBox/Option.d.ts +4 -0
- package/lib/cjs/components/ListBox/Option.js +11 -33
- package/lib/cjs/components/ListBox/index.d.ts +2 -0
- package/lib/cjs/components/Text/Text.styles.d.ts +1664 -18
- package/lib/cjs/hooks/useSelectField/useSelectField.d.ts +2 -2
- package/lib/cjs/hooks/useSelectField/useSelectField.js +1 -1
- package/lib/cjs/types/index.d.ts +1 -0
- package/lib/cjs/types/index.js +27 -16
- package/lib/cjs/types/listBox.d.ts +49 -0
- package/lib/cjs/types/listBox.js +6 -0
- package/lib/components/ListBox/ListBox.js +8 -46
- package/lib/components/ListBox/ListBox.test.js +23 -28
- package/lib/components/ListBox/ListBoxContext.js +1 -1
- package/lib/components/ListBox/ListBoxSection.js +4 -4
- package/lib/components/ListBox/Option.js +11 -33
- package/lib/hooks/useSelectField/useSelectField.js +1 -1
- package/lib/types/index.js +1 -0
- package/lib/types/listBox.js +1 -0
- 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
|
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
|
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
|
-
|
94
|
+
|
96
95
|
// Object matching React Aria API with all options
|
97
96
|
var listBoxOptions = {
|
98
|
-
autoFocus: hasAutoFocus
|
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,
|
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 @@
|
|
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 =
|
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
|
44
|
-
var
|
45
|
-
|
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
|
-
})
|
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
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
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 () {
|
@@ -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(
|
10
|
+
var ListBoxContext = /*#__PURE__*/_react["default"].createContext({});
|
11
11
|
exports.ListBoxContext = ListBoxContext;
|
@@ -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
|
29
|
+
var _ref = (0, _listbox.useListBoxSection)({
|
30
30
|
heading: item.rendered,
|
31
31
|
'aria-label': item['aria-label']
|
32
32
|
}),
|
33
|
-
headingProps =
|
34
|
-
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
|
@@ -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
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
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
|
-
},
|
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;
|