@pingux/astro 2.55.0 → 2.56.0-alpha.1
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/HelpHint/HelpHint.stories.d.ts +1 -0
- package/lib/cjs/components/HelpHint/HelpHint.stories.js +10 -2
- package/lib/cjs/components/ListView/ListView.d.ts +11 -0
- package/lib/cjs/components/ListView/ListView.js +12 -65
- package/lib/cjs/components/ListView/ListView.stories.d.ts +169 -0
- package/lib/cjs/components/ListView/ListView.stories.js +22 -56
- package/lib/cjs/components/ListView/ListView.test.d.ts +1 -0
- package/lib/cjs/components/ListView/ListView.test.js +5 -5
- package/lib/cjs/components/ListView/ListViewContext.d.ts +7 -0
- package/lib/cjs/components/ListView/ListViewExpandableItem.d.ts +4 -0
- package/lib/cjs/components/ListView/ListViewExpandableItem.js +14 -27
- package/lib/cjs/components/ListView/ListViewFocusWrapper.d.ts +11 -0
- package/lib/cjs/components/ListView/ListViewFocusWrapper.js +3 -13
- package/lib/cjs/components/ListView/ListViewItem.d.ts +10 -0
- package/lib/cjs/components/ListView/ListViewItem.js +1 -1
- package/lib/cjs/components/ListView/index.d.ts +1 -0
- package/lib/cjs/components/ListView/listViewAttributes.d.ts +113 -0
- package/lib/cjs/components/ListView/listViewAttributes.js +74 -0
- package/lib/cjs/hooks/useExpandableListViewItem/useExpandableListViewItem.d.ts +3 -21
- package/lib/cjs/hooks/useExpandableListViewItem/useExpandableListViewItem.js +3 -1
- package/lib/cjs/hooks/useField/useField.d.ts +3 -2
- package/lib/cjs/types/box.d.ts +1 -0
- package/lib/cjs/types/listView.d.ts +69 -0
- package/lib/cjs/types/listView.js +6 -0
- package/lib/components/HelpHint/HelpHint.stories.js +7 -0
- package/lib/components/ListView/ListView.js +12 -65
- package/lib/components/ListView/ListView.stories.js +21 -53
- package/lib/components/ListView/ListView.test.js +5 -5
- package/lib/components/ListView/ListViewExpandableItem.js +14 -27
- package/lib/components/ListView/ListViewFocusWrapper.js +3 -13
- package/lib/components/ListView/ListViewItem.js +1 -1
- package/lib/components/ListView/listViewAttributes.js +66 -0
- package/lib/hooks/useExpandableListViewItem/useExpandableListViewItem.js +3 -1
- package/lib/types/listView.js +1 -0
- package/package.json +2 -2
@@ -10,8 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
10
10
|
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
11
11
|
import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
|
12
12
|
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
13
|
-
var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "onExpandedChange", "expandedKeys", "selectedKeys", "selectionMode", "selectionStyle", "items"];
|
14
|
-
import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
|
13
|
+
var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "onExpandedChange", "expandedKeys", "selectedKeys", "selectionMode", "selectionStyle", "items", "onFocus"];
|
15
14
|
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; }
|
16
15
|
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) { _defineProperty(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; }
|
17
16
|
import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
@@ -20,9 +19,7 @@ import { useTreeState } from 'react-stately';
|
|
20
19
|
import { useCollator } from '@react-aria/i18n';
|
21
20
|
import { Virtualizer, VirtualizerItem } from '@react-aria/virtualizer';
|
22
21
|
import { ListLayout } from '@react-stately/layout';
|
23
|
-
import PropTypes from 'prop-types';
|
24
22
|
import loadingStates from '../../utils/devUtils/constants/loadingStates';
|
25
|
-
import { isIterableProp } from '../../utils/devUtils/props/isIterable';
|
26
23
|
import Loader from '../Loader';
|
27
24
|
import { ListViewContext } from './ListViewContext';
|
28
25
|
import ListViewExpandableItem from './ListViewExpandableItem';
|
@@ -43,8 +40,6 @@ export function useListLayout(state) {
|
|
43
40
|
return new ListLayout({
|
44
41
|
estimatedRowHeight: ROW_HEIGHT,
|
45
42
|
estimatedHeadingHeight: 26,
|
46
|
-
paddingRight: 4,
|
47
|
-
paddingLeft: 4,
|
48
43
|
loaderHeight: ROW_HEIGHT,
|
49
44
|
placeholderHeight: ROW_HEIGHT,
|
50
45
|
collator: collator
|
@@ -67,8 +62,9 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
67
62
|
selectionMode = props.selectionMode,
|
68
63
|
selectionStyle = props.selectionStyle,
|
69
64
|
items = props.items,
|
65
|
+
onFocus = props.onFocus,
|
70
66
|
others = _objectWithoutProperties(props, _excluded);
|
71
|
-
var _useState = useState(
|
67
|
+
var _useState = useState(null),
|
72
68
|
_useState2 = _slicedToArray(_useState, 2),
|
73
69
|
hoveredItem = _useState2[0],
|
74
70
|
setHoveredItem = _useState2[1];
|
@@ -81,7 +77,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
81
77
|
parent: parent
|
82
78
|
});
|
83
79
|
};
|
84
|
-
var listViewRef = useRef();
|
80
|
+
var listViewRef = useRef(null);
|
85
81
|
|
86
82
|
/* istanbul ignore next */
|
87
83
|
useImperativeHandle(ref, function () {
|
@@ -102,8 +98,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
102
98
|
var layout = useListLayout(state);
|
103
99
|
var _useGridList = useGridList(_objectSpread(_objectSpread({}, props), {}, {
|
104
100
|
isVirtualized: true,
|
105
|
-
keyboardDelegate: layout
|
106
|
-
loadingState: loadingState
|
101
|
+
keyboardDelegate: layout
|
107
102
|
}), state, listViewRef),
|
108
103
|
gridProps = _useGridList.gridProps;
|
109
104
|
// Sync loading state into the layout.
|
@@ -113,10 +108,12 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
113
108
|
if (!items) {
|
114
109
|
delete others['aria-label'];
|
115
110
|
}
|
116
|
-
var
|
117
|
-
gridProps.onFocus
|
118
|
-
|
119
|
-
|
111
|
+
var onFocusCallback = function onFocusCallback(e) {
|
112
|
+
if (gridProps !== null && gridProps !== void 0 && gridProps.onFocus) {
|
113
|
+
gridProps.onFocus(e);
|
114
|
+
}
|
115
|
+
if (onFocus) {
|
116
|
+
onFocus(e);
|
120
117
|
}
|
121
118
|
};
|
122
119
|
|
@@ -142,7 +139,7 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
142
139
|
collection: collection,
|
143
140
|
transitionDuration: 0
|
144
141
|
}, others, {
|
145
|
-
onFocus: isFocusable
|
142
|
+
onFocus: isFocusable ? onFocusCallback : undefined,
|
146
143
|
onScroll: resetHoverState,
|
147
144
|
tabIndex: isFocusable ? 0 : -1,
|
148
145
|
shouldUseVirtualFocus: !isFocusable
|
@@ -170,56 +167,6 @@ var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
170
167
|
return null;
|
171
168
|
}));
|
172
169
|
});
|
173
|
-
ListView.propTypes = {
|
174
|
-
/** Shows loader instead of children */
|
175
|
-
loadingState: PropTypes.oneOf(_Object$values(loadingStates)),
|
176
|
-
/**
|
177
|
-
* The item keys that are disabled. These items cannot be selected, focused, or otherwise
|
178
|
-
* interacted with.
|
179
|
-
*/
|
180
|
-
disabledKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
|
181
|
-
/** The initial expanded keys in the collection (uncontrolled). */
|
182
|
-
defaultExpandedKeys: isIterableProp,
|
183
|
-
/** The expanded keys in the collection (controlled). */
|
184
|
-
expandedKeys: isIterableProp,
|
185
|
-
/** Handler that is called when items are expanded or collapsed. */
|
186
|
-
onExpandedChange: PropTypes.func,
|
187
|
-
/** The list of ListView items (controlled). */
|
188
|
-
items: isIterableProp,
|
189
|
-
/** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
|
190
|
-
id: PropTypes.string,
|
191
|
-
/** Whether ListView should handle hover state (defaults to true) */
|
192
|
-
isHoverable: PropTypes.bool,
|
193
|
-
/** Defines a string value that labels the current element. */
|
194
|
-
'aria-label': PropTypes.string,
|
195
|
-
/** Identifies the element (or elements) that labels the current element. */
|
196
|
-
'aria-labelledby': PropTypes.string,
|
197
|
-
/** Identifies the element (or elements) that describes the object. */
|
198
|
-
'aria-describedby': PropTypes.string,
|
199
|
-
/**
|
200
|
-
* Identifies the element (or elements) that provide a detailed, extended description for the
|
201
|
-
* object.
|
202
|
-
*/
|
203
|
-
'aria-details': PropTypes.string,
|
204
|
-
/**
|
205
|
-
* The currently selected keys in the collection (controlled).
|
206
|
-
*
|
207
|
-
* `selectedKeys="all"` can be used to select every key.
|
208
|
-
*/
|
209
|
-
selectedKeys: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
210
|
-
/** The type of selection that is allowed in the collection. */
|
211
|
-
selectionMode: PropTypes.oneOf(['none', 'single', 'multiple', 'expansion']),
|
212
|
-
/** */
|
213
|
-
selectionStyle: PropTypes.oneOf(['highlight', undefined]),
|
214
|
-
/** Callback function that fires when the selected key changes. */
|
215
|
-
onSelectionChange: PropTypes.func,
|
216
|
-
/**
|
217
|
-
* Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.
|
218
|
-
*
|
219
|
-
* () => any
|
220
|
-
*/
|
221
|
-
onLoadMore: PropTypes.func
|
222
|
-
};
|
223
170
|
ListView.defaultProps = {
|
224
171
|
'aria-label': 'listView',
|
225
172
|
selectionMode: 'single'
|
@@ -1,8 +1,14 @@
|
|
1
|
+
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
2
|
+
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
3
|
+
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
4
|
+
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
5
|
+
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
6
|
+
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
7
|
+
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
1
8
|
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
2
9
|
import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
|
3
10
|
import _Object$create from "@babel/runtime-corejs3/core-js-stable/object/create";
|
4
11
|
import _Object$getPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/get-prototype-of";
|
5
|
-
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
6
12
|
import _Object$setPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/set-prototype-of";
|
7
13
|
import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reverse";
|
8
14
|
import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
|
@@ -11,8 +17,9 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
|
|
11
17
|
import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
|
12
18
|
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
13
19
|
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
20
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
14
21
|
var _excluded = ["string", "secondString"];
|
15
|
-
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = _Object$defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context4; _forEachInstanceProperty(_context4 = ["next", "throw", "return"]).call(_context4, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context5; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context5 = this.tryEntries).call(_context5, resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
|
22
|
+
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = _Object$defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof _Symbol ? _Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return _Object$defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = _Object$create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = _Object$getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(IteratorPrototype); function defineIteratorMethods(prototype) { var _context6; _forEachInstanceProperty(_context6 = ["next", "throw", "return"]).call(_context6, function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator["return"] && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], _forEachInstanceProperty(tryLocsList).call(tryLocsList, pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = _Object$create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = _Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) keys.push(key); return _reverseInstanceProperty(keys).call(keys), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { var _context7; if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, _forEachInstanceProperty(_context7 = this.tryEntries).call(_context7, resetTryEntry), !skipTempReset) for (var name in this) "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+_sliceInstanceProperty(name).call(name, 1)) && (this[name] = undefined); }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, "catch": function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
|
16
23
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
17
24
|
import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
|
18
25
|
import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
|
@@ -20,6 +27,8 @@ import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
|
|
20
27
|
import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
|
21
28
|
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
22
29
|
import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
|
30
|
+
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; }
|
31
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
23
32
|
import React, { useRef, useState } from 'react';
|
24
33
|
import { Item, useAsyncList } from 'react-stately';
|
25
34
|
import FormSelectIcon from '@pingux/mdi-react/FormSelectIcon';
|
@@ -28,9 +37,9 @@ import { action } from '@storybook/addon-actions';
|
|
28
37
|
import isChromatic from 'chromatic/isChromatic';
|
29
38
|
import DocsLayout from '../../../.storybook/storybookDocsLayout';
|
30
39
|
import { Badge, Box, Button, HelpHint, Icon, IconButton, ListView, ListViewItem, ListViewItemChart, ListViewItemMenu, ListViewItemSwitchField, Text, TextField } from '../..';
|
31
|
-
import loadingStates from '../../utils/devUtils/constants/loadingStates';
|
32
40
|
import { chartData } from '../ListViewItem/controls/chart/chartData';
|
33
41
|
import ListViewReadme from './ListView.mdx';
|
42
|
+
import { listViewArgTypes } from './listViewAttributes';
|
34
43
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
35
44
|
export default {
|
36
45
|
title: 'Components/ListView',
|
@@ -45,23 +54,7 @@ export default {
|
|
45
54
|
}
|
46
55
|
}
|
47
56
|
},
|
48
|
-
argTypes: {
|
49
|
-
loadingState: {
|
50
|
-
control: {
|
51
|
-
type: 'select',
|
52
|
-
options: loadingStates
|
53
|
-
}
|
54
|
-
},
|
55
|
-
disabledKeys: {},
|
56
|
-
items: {
|
57
|
-
control: {
|
58
|
-
type: 'none'
|
59
|
-
}
|
60
|
-
},
|
61
|
-
onSelectionChange: {
|
62
|
-
control: 'none'
|
63
|
-
}
|
64
|
-
},
|
57
|
+
argTypes: _objectSpread({}, listViewArgTypes),
|
65
58
|
args: {
|
66
59
|
disabledKeys: ['Snake'],
|
67
60
|
// eslint-disable-next-line no-console
|
@@ -590,9 +583,7 @@ var ExpandableChildren = function ExpandableChildren() {
|
|
590
583
|
border: '1px solid',
|
591
584
|
borderColor: 'neutral.80'
|
592
585
|
}
|
593
|
-
}), ___EmotionJSX(HelpHint, {
|
594
|
-
label: "".concat(env, " help hint")
|
595
|
-
}, "Text of the popover right here..."))), (_env$populations = env.populations) === null || _env$populations === void 0 ? void 0 : _mapInstanceProperty(_env$populations).call(_env$populations, function (pop) {
|
586
|
+
}), ___EmotionJSX(HelpHint, null, "Text of the popover right here..."))), (_env$populations = env.populations) === null || _env$populations === void 0 ? void 0 : _mapInstanceProperty(_env$populations).call(_env$populations, function (pop) {
|
596
587
|
return ___EmotionJSX(CustomText, {
|
597
588
|
key: pop,
|
598
589
|
sx: {
|
@@ -651,29 +642,6 @@ export var Default = function Default(_ref2) {
|
|
651
642
|
}, ___EmotionJSX(Controls, null)));
|
652
643
|
});
|
653
644
|
};
|
654
|
-
export var Controlled = function Controlled() {
|
655
|
-
var _useState = useState(['Snake']),
|
656
|
-
_useState2 = _slicedToArray(_useState, 2),
|
657
|
-
selectedKeys = _useState2[0],
|
658
|
-
setSelectedKeys = _useState2[1];
|
659
|
-
var onSelectedChange = function onSelectedChange(e) {
|
660
|
-
setSelectedKeys(_Array$from(e));
|
661
|
-
};
|
662
|
-
return ___EmotionJSX(ListView, {
|
663
|
-
items: items,
|
664
|
-
onSelectionChange: onSelectedChange,
|
665
|
-
selectedKeys: selectedKeys
|
666
|
-
}, function (item) {
|
667
|
-
return ___EmotionJSX(Item, {
|
668
|
-
key: item.name
|
669
|
-
}, ___EmotionJSX(ListViewItem, {
|
670
|
-
data: {
|
671
|
-
text: item.name,
|
672
|
-
icon: FormSelectIcon
|
673
|
-
}
|
674
|
-
}, ___EmotionJSX(Controls, null)));
|
675
|
-
});
|
676
|
-
};
|
677
645
|
export var WithExpandableItems = function WithExpandableItems(_ref3) {
|
678
646
|
var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
|
679
647
|
return ___EmotionJSX(ListView, _extends({}, props, args, {
|
@@ -690,10 +658,10 @@ export var WithExpandableItems = function WithExpandableItems(_ref3) {
|
|
690
658
|
};
|
691
659
|
export var ControlledExpandableItems = function ControlledExpandableItems(_ref4) {
|
692
660
|
var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
|
693
|
-
var
|
694
|
-
|
695
|
-
expandedKeys =
|
696
|
-
setExpandedKeys =
|
661
|
+
var _useState = useState(['Kangaroo']),
|
662
|
+
_useState2 = _slicedToArray(_useState, 2),
|
663
|
+
expandedKeys = _useState2[0],
|
664
|
+
setExpandedKeys = _useState2[1];
|
697
665
|
var onExpandedKeyCallback = function onExpandedKeyCallback(e) {
|
698
666
|
setExpandedKeys(_Array$from(e));
|
699
667
|
};
|
@@ -765,7 +733,7 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
|
|
765
733
|
_context2.next = 2;
|
766
734
|
break;
|
767
735
|
}
|
768
|
-
return _context2.abrupt("return", getMockData());
|
736
|
+
return _context2.abrupt("return", getMockData(null, null));
|
769
737
|
case 2:
|
770
738
|
_context2.prev = 2;
|
771
739
|
_context2.next = 5;
|
@@ -800,7 +768,7 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
|
|
800
768
|
case 14:
|
801
769
|
_context2.prev = 14;
|
802
770
|
_context2.t0 = _context2["catch"](2);
|
803
|
-
return _context2.abrupt("return", getMockData());
|
771
|
+
return _context2.abrupt("return", getMockData(null, null));
|
804
772
|
case 17:
|
805
773
|
case "end":
|
806
774
|
return _context2.stop();
|
@@ -829,7 +797,7 @@ export var InfiniteLoadingList = function InfiniteLoadingList(args) {
|
|
829
797
|
_context3.next = 4;
|
830
798
|
break;
|
831
799
|
}
|
832
|
-
return _context3.abrupt("return", getMockData(signal, cursor
|
800
|
+
return _context3.abrupt("return", getMockData(signal, cursor));
|
833
801
|
case 4:
|
834
802
|
return _context3.abrupt("return", fetchApiData(signal, cursor, filterText));
|
835
803
|
case 5:
|
@@ -76,9 +76,6 @@ beforeAll(function () {
|
|
76
76
|
jest.spyOn(window.screen, 'width', 'get').mockImplementation(function () {
|
77
77
|
return 1024;
|
78
78
|
});
|
79
|
-
jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
|
80
|
-
return cb();
|
81
|
-
});
|
82
79
|
jest.useFakeTimers();
|
83
80
|
});
|
84
81
|
afterEach(function () {
|
@@ -118,7 +115,7 @@ var getComponentExpandable = function getComponentExpandable() {
|
|
118
115
|
return ___EmotionJSX(Item, {
|
119
116
|
key: item.name,
|
120
117
|
textValue: item.name
|
121
|
-
}, ___EmotionJSX("h1", null,
|
118
|
+
}, ___EmotionJSX("h1", null, "I am a heading"), ___EmotionJSX(Button, null, "I am a button"));
|
122
119
|
}));
|
123
120
|
};
|
124
121
|
var getComponentEmpty = function getComponentEmpty() {
|
@@ -534,7 +531,10 @@ test('should navigate to expandable listitems with keyboard ', /*#__PURE__*/_asy
|
|
534
531
|
case 15:
|
535
532
|
button = _context11.sent;
|
536
533
|
expect(button).toHaveClass('is-focused');
|
537
|
-
|
534
|
+
userEvent.type(row, '{esc}', {
|
535
|
+
skipClick: true
|
536
|
+
});
|
537
|
+
case 18:
|
538
538
|
case "end":
|
539
539
|
return _context11.stop();
|
540
540
|
}
|
@@ -2,7 +2,6 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
2
2
|
import React, { useContext, useRef } from 'react';
|
3
3
|
import MenuDownIcon from '@pingux/mdi-react/MenuDownIcon';
|
4
4
|
import MenuUpIcon from '@pingux/mdi-react/MenuUpIcon';
|
5
|
-
import PropTypes from 'prop-types';
|
6
5
|
import useExpandableListViewItem from '../../hooks/useExpandableListViewItem/useExpandableListViewItem';
|
7
6
|
import { Box, Icon } from '../../index';
|
8
7
|
import { ListViewContext } from './ListViewContext';
|
@@ -10,22 +9,25 @@ import ListViewFocusWrapper from './ListViewFocusWrapper';
|
|
10
9
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
11
10
|
var ListViewExpandableItem = function ListViewExpandableItem(props) {
|
12
11
|
var item = props.item,
|
13
|
-
_props$item
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
12
|
+
_props$item = props.item,
|
13
|
+
_props$item$props = _props$item.props,
|
14
|
+
_props$item$props2 = _props$item$props === void 0 ? {} : _props$item$props,
|
15
|
+
listItemProps = _props$item$props2.listItemProps,
|
16
|
+
rowProps = _props$item$props2.rowProps,
|
17
|
+
_props$item$props2$ha = _props$item$props2.hasSeparator,
|
18
|
+
hasSeparator = _props$item$props2$ha === void 0 ? true : _props$item$props2$ha,
|
19
|
+
hasInsetSeparator = _props$item$props2.hasInsetSeparator,
|
20
|
+
key = _props$item.key,
|
19
21
|
isHoverable = props.isHoverable,
|
20
22
|
isFocusable = props.isFocusable,
|
21
23
|
className = props.className;
|
22
|
-
var key = item.key;
|
23
24
|
var _useContext = useContext(ListViewContext),
|
24
25
|
state = _useContext.state;
|
25
|
-
var expandableItemRowRef = useRef();
|
26
|
-
var expandableChildrenRef = useRef();
|
26
|
+
var expandableItemRowRef = useRef(null);
|
27
|
+
var expandableChildrenRef = useRef(null);
|
27
28
|
var hookProps = {
|
28
29
|
item: item,
|
30
|
+
key: key,
|
29
31
|
listItemProps: listItemProps,
|
30
32
|
rowProps: rowProps,
|
31
33
|
hasSeparator: hasSeparator,
|
@@ -55,7 +57,7 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
|
|
55
57
|
alignItems: 'center',
|
56
58
|
width: '100%'
|
57
59
|
}
|
58
|
-
}, item.rendered[0], ___EmotionJSX(Icon, {
|
60
|
+
}, item.rendered && item.rendered[0], ___EmotionJSX(Icon, {
|
59
61
|
sx: {
|
60
62
|
ml: 'auto'
|
61
63
|
},
|
@@ -66,21 +68,6 @@ var ListViewExpandableItem = function ListViewExpandableItem(props) {
|
|
66
68
|
}))), ___EmotionJSX(Box, expandableItemState.gridCellProps, isExpanded && ___EmotionJSX(ListViewFocusWrapper, {
|
67
69
|
isFocusEscaped: isFocusEscaped,
|
68
70
|
containerProps: expandableContainerProps
|
69
|
-
}, item.rendered[1])));
|
70
|
-
};
|
71
|
-
ListViewExpandableItem.propTypes = {
|
72
|
-
item: PropTypes.shape({
|
73
|
-
key: PropTypes.string,
|
74
|
-
rendered: PropTypes.node,
|
75
|
-
props: PropTypes.shape({
|
76
|
-
'data-id': PropTypes.string,
|
77
|
-
listItemProps: PropTypes.shape({}),
|
78
|
-
rowProps: PropTypes.shape({}),
|
79
|
-
hasSeparator: PropTypes.bool,
|
80
|
-
hasInsetSeparator: PropTypes.bool
|
81
|
-
})
|
82
|
-
}),
|
83
|
-
isHoverable: PropTypes.bool,
|
84
|
-
isFocusable: PropTypes.bool
|
71
|
+
}, item.rendered && item.rendered[1])));
|
85
72
|
};
|
86
73
|
export default ListViewExpandableItem;
|
@@ -36,6 +36,8 @@ export var escapeFocusDelegate = function escapeFocusDelegate(e, setIsFocusEscap
|
|
36
36
|
}
|
37
37
|
}
|
38
38
|
};
|
39
|
+
|
40
|
+
// eslint-disable-next-line max-len
|
39
41
|
var ExpandableItemChildrenContainer = /*#__PURE__*/forwardRef(function (props, ref) {
|
40
42
|
var children = props.children,
|
41
43
|
gridCellProps = props.gridCellProps,
|
@@ -51,7 +53,7 @@ var ExpandableItemChildrenContainer = /*#__PURE__*/forwardRef(function (props, r
|
|
51
53
|
|
52
54
|
// this handles instances where a user clicks into the container.
|
53
55
|
useEffect(function () {
|
54
|
-
if (isFocusWithin && !isFocusEscaped && !isFocused) {
|
56
|
+
if (isFocusWithin && !isFocusEscaped && !isFocused && setIsFocusEscaped) {
|
55
57
|
setIsFocusEscaped(true);
|
56
58
|
}
|
57
59
|
}, [isFocusWithin]);
|
@@ -64,18 +66,6 @@ var ExpandableItemChildrenContainer = /*#__PURE__*/forwardRef(function (props, r
|
|
64
66
|
}
|
65
67
|
}), children);
|
66
68
|
});
|
67
|
-
ExpandableItemChildrenContainer.propTypes = {
|
68
|
-
gridCellProps: PropTypes.shape({}),
|
69
|
-
focusManager: PropTypes.shape({}),
|
70
|
-
focusProps: PropTypes.shape({}),
|
71
|
-
focusWithinProps: PropTypes.shape({}),
|
72
|
-
isFocusEscaped: PropTypes.bool,
|
73
|
-
isFocused: PropTypes.bool,
|
74
|
-
isFocusWithin: PropTypes.bool,
|
75
|
-
expandableContainerOnBlur: PropTypes.func,
|
76
|
-
expandableContainerOnFocus: PropTypes.func,
|
77
|
-
setIsFocusEscaped: PropTypes.func
|
78
|
-
};
|
79
69
|
var ListViewFocusWrapper = function ListViewFocusWrapper(props) {
|
80
70
|
var children = props.children,
|
81
71
|
containerProps = props.containerProps,
|
@@ -35,7 +35,7 @@ var ListViewItem = function ListViewItem(props) {
|
|
35
35
|
var _useContext = useContext(ListViewContext),
|
36
36
|
state = _useContext.state;
|
37
37
|
var isDisabled = state.disabledKeys.has(item.key);
|
38
|
-
var rowRef = useRef();
|
38
|
+
var rowRef = useRef(null);
|
39
39
|
var isSelectable = state.selectionManager.selectionMode !== 'none';
|
40
40
|
var _useFocusRing = useFocusRing({
|
41
41
|
within: true
|
@@ -0,0 +1,66 @@
|
|
1
|
+
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
2
|
+
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
3
|
+
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
4
|
+
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
5
|
+
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
6
|
+
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
7
|
+
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
8
|
+
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
9
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
10
|
+
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; }
|
11
|
+
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) { _defineProperty(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; }
|
12
|
+
import loadingStates from '../../utils/devUtils/constants/loadingStates';
|
13
|
+
import { ariaAttributeBaseArgTypes, ariaAttributeBaseDocSettings } from '../../utils/docUtils/ariaAttributes';
|
14
|
+
export var listViewArgTypes = _objectSpread(_objectSpread({}, ariaAttributeBaseArgTypes), {}, {
|
15
|
+
loadingState: {
|
16
|
+
description: 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.',
|
17
|
+
control: 'radio',
|
18
|
+
options: loadingStates
|
19
|
+
},
|
20
|
+
disabledKeys: {
|
21
|
+
description: 'The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.'
|
22
|
+
},
|
23
|
+
defaultExpandedKeys: {
|
24
|
+
description: 'The initial expanded keys in the collection (uncontrolled).'
|
25
|
+
},
|
26
|
+
expandedKeys: {
|
27
|
+
description: 'The expanded keys in the collection (controlled).'
|
28
|
+
},
|
29
|
+
onExpandedChange: {
|
30
|
+
description: 'Handler that is called when items are expanded or collapsed.'
|
31
|
+
},
|
32
|
+
items: {
|
33
|
+
description: 'The list of ListView items (controlled).'
|
34
|
+
},
|
35
|
+
id: {
|
36
|
+
description: "The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)."
|
37
|
+
},
|
38
|
+
isHoverable: {
|
39
|
+
description: 'Whether ListView should handle hover state (defaults to true)'
|
40
|
+
},
|
41
|
+
'aria-label': _objectSpread({
|
42
|
+
description: 'Defines a string value that labels the current element.'
|
43
|
+
}, ariaAttributeBaseDocSettings),
|
44
|
+
'aria-labelledby': _objectSpread({
|
45
|
+
description: 'Identifies the element (or elements) that labels the current element.'
|
46
|
+
}, ariaAttributeBaseDocSettings),
|
47
|
+
'aria-describedby': _objectSpread({
|
48
|
+
description: 'Identifies the element (or elements) that describes the object.'
|
49
|
+
}, ariaAttributeBaseDocSettings),
|
50
|
+
'aria-details': _objectSpread({
|
51
|
+
description: 'Identifies the element (or elements) that provide a detailed, extended description for the object.'
|
52
|
+
}, ariaAttributeBaseDocSettings),
|
53
|
+
selectedKeys: {
|
54
|
+
description: 'The currently selected keys in the collection (controlled). `selectedKeys="all"` can be used to select every key.'
|
55
|
+
},
|
56
|
+
selectionMode: {
|
57
|
+
description: 'The type of selection that is allowed in the collection.'
|
58
|
+
},
|
59
|
+
selectionStyle: {},
|
60
|
+
onSelectionChange: {
|
61
|
+
description: 'Callback function that fires when the selected key changes.'
|
62
|
+
},
|
63
|
+
onLoadMore: {
|
64
|
+
description: 'Handler called when more items should be loaded, e.g. while scrolling near the bottom.'
|
65
|
+
}
|
66
|
+
});
|
@@ -23,11 +23,12 @@ var useExpandableListViewItem = function useExpandableListViewItem(props) {
|
|
23
23
|
_props$item$props = props.item.props,
|
24
24
|
listItemProps = _props$item$props.listItemProps,
|
25
25
|
rowProps = _props$item$props.rowProps,
|
26
|
+
_props$item$props$has = _props$item$props.hasSeparator,
|
27
|
+
hasSeparator = _props$item$props$has === void 0 ? true : _props$item$props$has,
|
26
28
|
state = props.state,
|
27
29
|
expandableItemRowRef = props.expandableItemRowRef,
|
28
30
|
expandableChildrenRef = props.expandableChildrenRef,
|
29
31
|
className = props.className;
|
30
|
-
var hasSeparator = true;
|
31
32
|
|
32
33
|
// convenience extractions from props
|
33
34
|
var key = item.key;
|
@@ -128,6 +129,7 @@ var useExpandableListViewItem = function useExpandableListViewItem(props) {
|
|
128
129
|
|
129
130
|
// if the expanded content container is focused, this function will call
|
130
131
|
// it returns focus to the row on right press, and calls the native left press
|
132
|
+
/* istanbul ignore next */
|
131
133
|
var expandedChildrenKeyCaptureOverride = function expandedChildrenKeyCaptureOverride(e) {
|
132
134
|
var _expandableItemRowRef;
|
133
135
|
// if left go back ie dont stifle
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@pingux/astro",
|
3
|
-
"version": "2.
|
3
|
+
"version": "2.56.0-alpha.1",
|
4
4
|
"description": "React component library for Ping Identity's design system",
|
5
5
|
"repository": {
|
6
6
|
"type": "git",
|
@@ -56,7 +56,7 @@
|
|
56
56
|
"@react-aria/dnd": "^3.5.0",
|
57
57
|
"@react-aria/focus": "~3.8.0",
|
58
58
|
"@react-aria/grid": "~3.4.1",
|
59
|
-
"@react-aria/gridlist": "^3.7.
|
59
|
+
"@react-aria/gridlist": "^3.7.4",
|
60
60
|
"@react-aria/i18n": "~3.6.0",
|
61
61
|
"@react-aria/interactions": "~3.11.0",
|
62
62
|
"@react-aria/label": "^3.1.0",
|