@pingux/astro 2.162.0 → 2.162.1-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/RangeCalendar/RangeCalendar.test.js +46 -2
- package/lib/cjs/components/RangeCalendar/RangeCalendarHeader.js +18 -5
- package/lib/cjs/components/TableBase/TableBase.js +27 -3
- package/lib/cjs/components/TableBase/TableBase.stories.d.ts +1 -0
- package/lib/cjs/components/TableBase/TableBase.stories.js +26 -1
- package/lib/cjs/components/TableBase/TableBase.styles.d.ts +48 -2
- package/lib/cjs/components/TableBase/TableBase.styles.js +50 -6
- package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts +12 -0
- package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js +12 -0
- package/lib/cjs/styles/themes/next-gen/next-gen.d.ts +17 -0
- package/lib/cjs/styles/themes/next-gen/variants/tableBase.d.ts +17 -0
- package/lib/cjs/styles/themes/next-gen/variants/tableBase.js +20 -3
- package/lib/cjs/styles/themes/next-gen/variants/variants.d.ts +17 -0
- package/lib/cjs/types/tableBase.d.ts +1 -0
- package/lib/components/RangeCalendar/RangeCalendar.test.js +46 -2
- package/lib/components/RangeCalendar/RangeCalendarHeader.js +18 -5
- package/lib/components/TableBase/TableBase.js +27 -3
- package/lib/components/TableBase/TableBase.stories.js +25 -0
- package/lib/components/TableBase/TableBase.styles.js +50 -6
- package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js +12 -0
- package/lib/styles/themes/next-gen/variants/tableBase.js +20 -3
- package/lib/tsconfig.lib.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -26,7 +26,7 @@ var _universalComponentTest = require("../../utils/testUtils/universalComponentT
|
|
|
26
26
|
var _RangeCalendar = _interopRequireWildcard(require("./RangeCalendar"));
|
|
27
27
|
var _react2 = require("@emotion/react");
|
|
28
28
|
function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
29
|
-
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return r; }; var t, r = {}, e = Object.prototype, n = e.hasOwnProperty, o = "function" == typeof _Symbol ? _Symbol : {}, i = o.iterator || "@@iterator", a = o.asyncIterator || "@@asyncIterator", u = o.toStringTag || "@@toStringTag"; function c(t, r, e, n) { return _Object$defineProperty(t, r, { value: e, enumerable: !n, configurable: !n, writable: !n }); } try { c({}, ""); } catch (t) { c = function c(t, r, e) { return t[r] = e; }; } function h(r, e, n, o) { var i = e && e.prototype instanceof Generator ? e : Generator, a = _Object$create(i.prototype); return c(a, "_invoke", function (r, e, n) { var o = 1; return function (i, a) { if (3 === o) throw Error("Generator is already running"); if (4 === o) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var u = n.delegate; if (u) { var c = d(u, n); if (c) { if (c === f) continue; return c; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (1 === o) throw o = 4, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = 3; var h = s(r, e, n); if ("normal" === h.type) { if (o = n.done ? 4 : 2, h.arg === f) continue; return { value: h.arg, done: n.done }; } "throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg); } }; }(r, n, new Context(o || [])), !0), a; } function s(t, r, e) { try { return { type: "normal", arg: t.call(r, e) }; } catch (t) { return { type: "throw", arg: t }; } } r.wrap = h; var f = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var l = {}; c(l, i, function () { return this; }); var p = _Object$getPrototypeOf, y = p && p(p(x([]))); y && y !== e && n.call(y, i) && (l = y); var v = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(l); function g(t) { var
|
|
29
|
+
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return r; }; var t, r = {}, e = Object.prototype, n = e.hasOwnProperty, o = "function" == typeof _Symbol ? _Symbol : {}, i = o.iterator || "@@iterator", a = o.asyncIterator || "@@asyncIterator", u = o.toStringTag || "@@toStringTag"; function c(t, r, e, n) { return _Object$defineProperty(t, r, { value: e, enumerable: !n, configurable: !n, writable: !n }); } try { c({}, ""); } catch (t) { c = function c(t, r, e) { return t[r] = e; }; } function h(r, e, n, o) { var i = e && e.prototype instanceof Generator ? e : Generator, a = _Object$create(i.prototype); return c(a, "_invoke", function (r, e, n) { var o = 1; return function (i, a) { if (3 === o) throw Error("Generator is already running"); if (4 === o) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var u = n.delegate; if (u) { var c = d(u, n); if (c) { if (c === f) continue; return c; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (1 === o) throw o = 4, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = 3; var h = s(r, e, n); if ("normal" === h.type) { if (o = n.done ? 4 : 2, h.arg === f) continue; return { value: h.arg, done: n.done }; } "throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg); } }; }(r, n, new Context(o || [])), !0), a; } function s(t, r, e) { try { return { type: "normal", arg: t.call(r, e) }; } catch (t) { return { type: "throw", arg: t }; } } r.wrap = h; var f = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var l = {}; c(l, i, function () { return this; }); var p = _Object$getPrototypeOf, y = p && p(p(x([]))); y && y !== e && n.call(y, i) && (l = y); var v = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(l); function g(t) { var _context8; _forEachInstanceProperty2(_context8 = ["next", "throw", "return"]).call(_context8, function (r) { c(t, r, function (t) { return this._invoke(r, t); }); }); } function AsyncIterator(t, r) { function e(o, i, a, u) { var c = s(t[o], t, i); if ("throw" !== c.type) { var h = c.arg, f = h.value; return f && "object" == _typeof(f) && n.call(f, "__await") ? r.resolve(f.__await).then(function (t) { e("next", t, a, u); }, function (t) { e("throw", t, a, u); }) : r.resolve(f).then(function (t) { h.value = t, a(h); }, function (t) { return e("throw", t, a, u); }); } u(c.arg); } var o; c(this, "_invoke", function (t, n) { function i() { return new r(function (r, o) { e(t, n, r, o); }); } return o = o ? o.then(i, i) : i(); }, !0); } function d(r, e) { var n = e.method, o = r.i[n]; if (o === t) return e.delegate = null, "throw" === n && r.i["return"] && (e.method = "return", e.arg = t, d(r, e), "throw" === e.method) || "return" !== n && (e.method = "throw", e.arg = new TypeError("The iterator does not provide a '" + n + "' method")), f; var i = s(o, r.i, e.arg); if ("throw" === i.type) return e.method = "throw", e.arg = i.arg, e.delegate = null, f; var a = i.arg; return a ? a.done ? (e[r.r] = a.value, e.next = r.n, "return" !== e.method && (e.method = "next", e.arg = t), e.delegate = null, f) : a : (e.method = "throw", e.arg = new TypeError("iterator result is not an object"), e.delegate = null, f); } function w(t) { this.tryEntries.push(t); } function m(r) { var e = r[4] || {}; e.type = "normal", e.arg = t, r[4] = e; } function Context(t) { this.tryEntries = [[-1]], _forEachInstanceProperty2(t).call(t, w, this), this.reset(!0); } function x(r) { if (null != r) { var e = r[i]; if (e) return e.call(r); if ("function" == typeof r.next) return r; if (!isNaN(r.length)) { var o = -1, a = function e() { for (; ++o < r.length;) if (n.call(r, o)) return e.value = r[o], e.done = !1, e; return e.value = t, e.done = !0, e; }; return a.next = a; } } throw new TypeError(_typeof(r) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, c(v, "constructor", GeneratorFunctionPrototype), c(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = c(GeneratorFunctionPrototype, u, "GeneratorFunction"), r.isGeneratorFunction = function (t) { var r = "function" == typeof t && t.constructor; return !!r && (r === GeneratorFunction || "GeneratorFunction" === (r.displayName || r.name)); }, r.mark = function (t) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, c(t, u, "GeneratorFunction")), t.prototype = _Object$create(v), t; }, r.awrap = function (t) { return { __await: t }; }, g(AsyncIterator.prototype), c(AsyncIterator.prototype, a, function () { return this; }), r.AsyncIterator = AsyncIterator, r.async = function (t, e, n, o, i) { void 0 === i && (i = _Promise); var a = new AsyncIterator(h(t, e, n, o), i); return r.isGeneratorFunction(e) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, g(v), c(v, u, "Generator"), c(v, i, function () { return this; }), c(v, "toString", function () { return "[object Generator]"; }), r.keys = function (t) { var r = Object(t), e = []; for (var n in r) e.unshift(n); return function t() { for (; e.length;) if ((n = e.pop()) in r) return t.value = n, t.done = !1, t; return t.done = !0, t; }; }, r.values = x, Context.prototype = { constructor: Context, reset: function reset(r) { var _context9; if (this.prev = this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, _forEachInstanceProperty2(_context9 = this.tryEntries).call(_context9, m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+_sliceInstanceProperty2(e).call(e, 1)) && (this[e] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0][4]; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(r) { if (this.done) throw r; var e = this; function n(t) { a.type = "throw", a.arg = r, e.next = t; } for (var o = e.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i[4], u = this.prev, c = i[1], h = i[2]; if (-1 === i[0]) return n("end"), !1; if (!c && !h) throw Error("try statement without catch or finally"); if (null != i[0] && i[0] <= u) { if (u < c) return this.method = "next", this.arg = t, n(c), !0; if (u < h) return n(h), !1; } } }, abrupt: function abrupt(t, r) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var n = this.tryEntries[e]; if (n[0] > -1 && n[0] <= this.prev && this.prev < n[2]) { var o = n; break; } } o && ("break" === t || "continue" === t) && o[0] <= r && r <= o[2] && (o = null); var i = o ? o[4] : {}; return i.type = t, i.arg = r, o ? (this.method = "next", this.next = o[2], f) : this.complete(i); }, complete: function complete(t, r) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && r && (this.next = r), f; }, finish: function finish(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[2] === t) return this.complete(e[4], e[3]), m(e), f; } }, "catch": function _catch(t) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var e = this.tryEntries[r]; if (e[0] === t) { var n = e[4]; if ("throw" === n.type) { var o = n.arg; m(e); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(r, e, n) { return this.delegate = { i: x(r), r: e, n: n }, "next" === this.method && (this.arg = t), f; } }, r; }
|
|
30
30
|
var unavailableRanges = [['2022-08-10', '2022-08-15']];
|
|
31
31
|
var defaultProps = {
|
|
32
32
|
defaultValue: {
|
|
@@ -282,4 +282,48 @@ test('parseDateIfString should correctly parse string or DateValue inputs', func
|
|
|
282
282
|
var result2 = (0, _RangeCalendar.parseDateIfString)(value2);
|
|
283
283
|
expect(result1).toEqual(new _date.CalendarDate(2022, 8, 1));
|
|
284
284
|
expect(result2).toEqual(new _date.CalendarDate(2022, 8, 10));
|
|
285
|
-
});
|
|
285
|
+
});
|
|
286
|
+
test('should allow selecting a range spanning more than 2 months with minValue constraint', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
|
|
287
|
+
var minValue, buttons, cellsAfterNavigation, octFirstCell, cellsInJuly, julyFifthCell, selectedCells;
|
|
288
|
+
return _regeneratorRuntime().wrap(function _callee6$(_context7) {
|
|
289
|
+
while (1) switch (_context7.prev = _context7.next) {
|
|
290
|
+
case 0:
|
|
291
|
+
minValue = '2022-07-01';
|
|
292
|
+
getComponent({
|
|
293
|
+
minValue: minValue
|
|
294
|
+
});
|
|
295
|
+
|
|
296
|
+
// Navigate to October to select end date first (1st Oct)
|
|
297
|
+
buttons = _testWrapper.screen.getAllByRole('button');
|
|
298
|
+
_context7.next = 5;
|
|
299
|
+
return _userEvent["default"].click(buttons[1]);
|
|
300
|
+
case 5:
|
|
301
|
+
_context7.next = 7;
|
|
302
|
+
return _userEvent["default"].click(buttons[1]);
|
|
303
|
+
case 7:
|
|
304
|
+
cellsAfterNavigation = _testWrapper.screen.queryAllByRole('gridcell');
|
|
305
|
+
octFirstCell = cellsAfterNavigation[0]; // October 1st
|
|
306
|
+
_context7.next = 11;
|
|
307
|
+
return _userEvent["default"].click(octFirstCell);
|
|
308
|
+
case 11:
|
|
309
|
+
_context7.next = 13;
|
|
310
|
+
return _userEvent["default"].click(buttons[0]);
|
|
311
|
+
case 13:
|
|
312
|
+
_context7.next = 15;
|
|
313
|
+
return _userEvent["default"].click(buttons[0]);
|
|
314
|
+
case 15:
|
|
315
|
+
cellsInJuly = _testWrapper.screen.queryAllByRole('gridcell');
|
|
316
|
+
julyFifthCell = cellsInJuly[4]; // July 5th
|
|
317
|
+
_context7.next = 19;
|
|
318
|
+
return _userEvent["default"].click(julyFifthCell);
|
|
319
|
+
case 19:
|
|
320
|
+
selectedCells = _testWrapper.screen.getAllByRole('gridcell', {
|
|
321
|
+
selected: true
|
|
322
|
+
});
|
|
323
|
+
expect(selectedCells.length).toBeGreaterThan(0);
|
|
324
|
+
case 21:
|
|
325
|
+
case "end":
|
|
326
|
+
return _context7.stop();
|
|
327
|
+
}
|
|
328
|
+
}, _callee6);
|
|
329
|
+
})));
|
|
@@ -16,7 +16,8 @@ var _visuallyHidden = require("@react-aria/visually-hidden");
|
|
|
16
16
|
var _hooks = require("../../hooks");
|
|
17
17
|
var _index = require("../../index");
|
|
18
18
|
var _react2 = require("@emotion/react");
|
|
19
|
-
var _excluded = ["onFocusChange"]
|
|
19
|
+
var _excluded = ["onFocusChange"],
|
|
20
|
+
_excluded2 = ["onFocusChange"];
|
|
20
21
|
var RangeCalendarHeader = function RangeCalendarHeader(props) {
|
|
21
22
|
var state = props.state,
|
|
22
23
|
calendarProps = props.calendarProps,
|
|
@@ -28,11 +29,23 @@ var RangeCalendarHeader = function RangeCalendarHeader(props) {
|
|
|
28
29
|
timeZone: state.timeZone
|
|
29
30
|
});
|
|
30
31
|
|
|
31
|
-
//
|
|
32
|
-
|
|
32
|
+
// Removes warning without Safari losing Spectrum’s focus management
|
|
33
|
+
var onPrevFocusChange = prevButtonProps.onFocusChange,
|
|
34
|
+
otherPrevButtonProps = (0, _objectWithoutProperties2["default"])(prevButtonProps, _excluded);
|
|
35
|
+
|
|
36
|
+
/* istanbul ignore next */
|
|
37
|
+
var prevButtonFocusProps = {
|
|
38
|
+
onFocus: function onFocus() {
|
|
39
|
+
return onPrevFocusChange === null || onPrevFocusChange === void 0 ? void 0 : onPrevFocusChange(true);
|
|
40
|
+
},
|
|
41
|
+
onBlur: function onBlur() {
|
|
42
|
+
return onPrevFocusChange === null || onPrevFocusChange === void 0 ? void 0 : onPrevFocusChange(false);
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
|
|
33
46
|
// Removes warning without Safari losing Spectrum’s focus management
|
|
34
47
|
var onFocusChange = nextButtonProps.onFocusChange,
|
|
35
|
-
otherNextButtonProps = (0, _objectWithoutProperties2["default"])(nextButtonProps,
|
|
48
|
+
otherNextButtonProps = (0, _objectWithoutProperties2["default"])(nextButtonProps, _excluded2);
|
|
36
49
|
|
|
37
50
|
/* istanbul ignore next */
|
|
38
51
|
var nextButtonFocusProps = {
|
|
@@ -59,7 +72,7 @@ var RangeCalendarHeader = function RangeCalendarHeader(props) {
|
|
|
59
72
|
position: 'absolute',
|
|
60
73
|
left: '10px'
|
|
61
74
|
}
|
|
62
|
-
}, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({},
|
|
75
|
+
}, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, otherPrevButtonProps, prevButtonFocusProps, {
|
|
63
76
|
"aria-label": "Previous month navigation",
|
|
64
77
|
color: "pink"
|
|
65
78
|
}), (0, _react2.jsx)(_index.Icon, {
|
|
@@ -31,12 +31,31 @@ var _table2 = require("@react-stately/table");
|
|
|
31
31
|
var _ = require("../..");
|
|
32
32
|
var _hooks = require("../../hooks");
|
|
33
33
|
var _react2 = require("@emotion/react");
|
|
34
|
-
var _excluded = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className"],
|
|
34
|
+
var _excluded = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className", "isLastColumnSticky"],
|
|
35
35
|
_excluded2 = ["caption"],
|
|
36
36
|
_excluded3 = ["type", "children", "className", "isSticky"];
|
|
37
37
|
function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
38
38
|
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
39
39
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
40
|
+
var useHandleFocusRef = function useHandleFocusRef(ref) {
|
|
41
|
+
_react["default"].useEffect(function () {
|
|
42
|
+
var el = ref.current;
|
|
43
|
+
if (!el) return;
|
|
44
|
+
var handleFocus = function handleFocus() {
|
|
45
|
+
var container = el.closest('.last-column-sticky');
|
|
46
|
+
if (!container) return;
|
|
47
|
+
var cellRect = el.getBoundingClientRect();
|
|
48
|
+
var contRect = container.getBoundingClientRect();
|
|
49
|
+
container.scrollLeft = cellRect.left + contRect.width;
|
|
50
|
+
};
|
|
51
|
+
el.addEventListener('focus', handleFocus);
|
|
52
|
+
|
|
53
|
+
// eslint-disable-next-line consistent-return
|
|
54
|
+
return function () {
|
|
55
|
+
el.removeEventListener('focus', handleFocus);
|
|
56
|
+
};
|
|
57
|
+
}, []);
|
|
58
|
+
};
|
|
40
59
|
var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
41
60
|
var _context, _context3;
|
|
42
61
|
var caption = props.caption,
|
|
@@ -46,6 +65,7 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
46
65
|
_props$isStickyHeader = props.isStickyHeader,
|
|
47
66
|
isStickyHeader = _props$isStickyHeader === void 0 ? false : _props$isStickyHeader,
|
|
48
67
|
className = props.className,
|
|
68
|
+
isLastColumnSticky = props.isLastColumnSticky,
|
|
49
69
|
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
50
70
|
var tableRef = (0, _hooks.useLocalOrForwardRef)(ref);
|
|
51
71
|
var headerRef = (0, _react.useRef)(null);
|
|
@@ -92,7 +112,8 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
92
112
|
}
|
|
93
113
|
});
|
|
94
114
|
var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
|
|
95
|
-
'has-caption': !!caption
|
|
115
|
+
'has-caption': !!caption,
|
|
116
|
+
'is-last-column-sticky': isLastColumnSticky
|
|
96
117
|
}),
|
|
97
118
|
classNames = _useStatusClasses.classNames;
|
|
98
119
|
return (0, _react2.jsx)(_.Box, {
|
|
@@ -194,7 +215,8 @@ var TableRowGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
194
215
|
display: type === 'thead' ? 'table-header-group' : 'table-row-group',
|
|
195
216
|
ref: ref,
|
|
196
217
|
className: classNames,
|
|
197
|
-
variant: "tableBase.".concat(type)
|
|
218
|
+
variant: "tableBase.".concat(type),
|
|
219
|
+
tabIndex: "0"
|
|
198
220
|
}, rowGroupProps, others), children);
|
|
199
221
|
});
|
|
200
222
|
function TableHeaderRow(props) {
|
|
@@ -246,6 +268,7 @@ function TableColumnHeader(props) {
|
|
|
246
268
|
isFocused: isFocusVisible
|
|
247
269
|
}),
|
|
248
270
|
classNames = _useStatusClasses3.classNames;
|
|
271
|
+
useHandleFocusRef(ref);
|
|
249
272
|
return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
|
|
250
273
|
as: "th",
|
|
251
274
|
display: "table-cell",
|
|
@@ -318,6 +341,7 @@ function TableCell(props) {
|
|
|
318
341
|
isFocused: isFocusVisible
|
|
319
342
|
}),
|
|
320
343
|
classNames = _useStatusClasses5.classNames;
|
|
344
|
+
useHandleFocusRef(ref);
|
|
321
345
|
return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
|
|
322
346
|
as: "td",
|
|
323
347
|
display: "table-cell",
|
|
@@ -15,7 +15,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
|
|
|
15
15
|
_Object$defineProperty(exports, "__esModule", {
|
|
16
16
|
value: true
|
|
17
17
|
});
|
|
18
|
-
exports["default"] = exports.WithStickyHeader = exports.WithPagination = exports.MultiSelection = exports.DynamicWithSorting = exports.Default = void 0;
|
|
18
|
+
exports["default"] = exports.WithStickyHeader = exports.WithPagination = exports.WithLastColumnSticky = exports.MultiSelection = exports.DynamicWithSorting = exports.Default = void 0;
|
|
19
19
|
var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
|
|
20
20
|
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
|
21
21
|
var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
|
|
@@ -382,4 +382,29 @@ DynamicWithSorting.parameters = {
|
|
|
382
382
|
}]
|
|
383
383
|
}
|
|
384
384
|
}
|
|
385
|
+
};
|
|
386
|
+
var WithLastColumnSticky = exports.WithLastColumnSticky = function WithLastColumnSticky() {
|
|
387
|
+
return (0, _react2.jsx)(_.Card, {
|
|
388
|
+
variant: "cards.tableWrapper",
|
|
389
|
+
className: "last-column-sticky"
|
|
390
|
+
}, (0, _react2.jsx)(_.TableBase, {
|
|
391
|
+
caption: "Lorem ipsum",
|
|
392
|
+
"aria-label": "table",
|
|
393
|
+
isLastColumnSticky: true
|
|
394
|
+
}, (0, _react2.jsx)(_.THead, {
|
|
395
|
+
columns: headers
|
|
396
|
+
}, function (column) {
|
|
397
|
+
return (0, _react2.jsx)(_.Column, {
|
|
398
|
+
key: column.key,
|
|
399
|
+
minWidth: 200
|
|
400
|
+
}, column.name);
|
|
401
|
+
}), (0, _react2.jsx)(_.TBody, {
|
|
402
|
+
items: objects
|
|
403
|
+
}, function (item) {
|
|
404
|
+
return (0, _react2.jsx)(_.Row, {
|
|
405
|
+
key: item.id
|
|
406
|
+
}, function (columnKey) {
|
|
407
|
+
return (0, _react2.jsx)(_.Cell, null, item[columnKey]);
|
|
408
|
+
});
|
|
409
|
+
})));
|
|
385
410
|
};
|
|
@@ -29,6 +29,46 @@ declare const _default: {
|
|
|
29
29
|
borderSpacing: string;
|
|
30
30
|
borderCollapse: string;
|
|
31
31
|
position: string;
|
|
32
|
+
'&.is-last-column-sticky': {
|
|
33
|
+
'thead tr th:last-of-type': {
|
|
34
|
+
position: string;
|
|
35
|
+
right: number;
|
|
36
|
+
backgroundColor: string;
|
|
37
|
+
zIndex: number;
|
|
38
|
+
'&.is-focused': {
|
|
39
|
+
borderStyle: string;
|
|
40
|
+
borderColor: string;
|
|
41
|
+
borderWidth: string;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
'tbody tr': {
|
|
45
|
+
'&.is-focused td:last-of-type': {
|
|
46
|
+
borderStyle: string;
|
|
47
|
+
borderColor: string;
|
|
48
|
+
borderWidth: string;
|
|
49
|
+
};
|
|
50
|
+
'&:nth-of-type(odd) td:last-of-type': {
|
|
51
|
+
position: string;
|
|
52
|
+
right: number;
|
|
53
|
+
backgroundColor: string;
|
|
54
|
+
'&.is-focused': {
|
|
55
|
+
borderStyle: string;
|
|
56
|
+
borderColor: string;
|
|
57
|
+
borderWidth: string;
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
'&:nth-of-type(even) td:last-of-type': {
|
|
61
|
+
position: string;
|
|
62
|
+
right: number;
|
|
63
|
+
backgroundColor: string;
|
|
64
|
+
'&.is-focused': {
|
|
65
|
+
borderStyle: string;
|
|
66
|
+
borderColor: string;
|
|
67
|
+
borderWidth: string;
|
|
68
|
+
};
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
};
|
|
32
72
|
};
|
|
33
73
|
data: {
|
|
34
74
|
p: string;
|
|
@@ -37,6 +77,7 @@ declare const _default: {
|
|
|
37
77
|
outlineStyle: string;
|
|
38
78
|
outlineColor: string;
|
|
39
79
|
outlineOffset: string;
|
|
80
|
+
zIndex: number;
|
|
40
81
|
};
|
|
41
82
|
fontSize: string;
|
|
42
83
|
fontWeight: number;
|
|
@@ -61,6 +102,7 @@ declare const _default: {
|
|
|
61
102
|
outlineStyle: string;
|
|
62
103
|
outlineColor: string;
|
|
63
104
|
outlineOffset: string;
|
|
105
|
+
zIndex: number;
|
|
64
106
|
};
|
|
65
107
|
fontSize: string;
|
|
66
108
|
color: string;
|
|
@@ -72,8 +114,8 @@ declare const _default: {
|
|
|
72
114
|
wordBreak: import("../..").wordBreak;
|
|
73
115
|
};
|
|
74
116
|
row: {
|
|
75
|
-
'&:nth-of-type(odd)
|
|
76
|
-
|
|
117
|
+
'&:nth-of-type(odd)': {
|
|
118
|
+
backgroundColor: string;
|
|
77
119
|
};
|
|
78
120
|
'&:focus-visible': {
|
|
79
121
|
outline: string;
|
|
@@ -83,6 +125,7 @@ declare const _default: {
|
|
|
83
125
|
outlineStyle: string;
|
|
84
126
|
outlineColor: string;
|
|
85
127
|
outlineOffset: string;
|
|
128
|
+
zIndex: number;
|
|
86
129
|
};
|
|
87
130
|
'&.is-hovered': {};
|
|
88
131
|
'&.is-selected': {};
|
|
@@ -90,6 +133,9 @@ declare const _default: {
|
|
|
90
133
|
bg: string;
|
|
91
134
|
opacity: number;
|
|
92
135
|
cursor: string;
|
|
136
|
+
'& > td:last-of-type': {
|
|
137
|
+
backgroundColor: string;
|
|
138
|
+
};
|
|
93
139
|
};
|
|
94
140
|
};
|
|
95
141
|
};
|
|
@@ -21,14 +21,55 @@ var defaultFocus = {
|
|
|
21
21
|
outline: '1px',
|
|
22
22
|
outlineStyle: 'solid',
|
|
23
23
|
outlineColor: 'focus',
|
|
24
|
-
outlineOffset: '-1px'
|
|
24
|
+
outlineOffset: '-1px',
|
|
25
|
+
zIndex: 2
|
|
25
26
|
};
|
|
26
27
|
var container = {
|
|
27
28
|
width: '100%',
|
|
28
29
|
height: '100%',
|
|
29
30
|
borderSpacing: '0',
|
|
30
31
|
borderCollapse: 'collapse',
|
|
31
|
-
position: 'relative'
|
|
32
|
+
position: 'relative',
|
|
33
|
+
'&.is-last-column-sticky': {
|
|
34
|
+
'thead tr th:last-of-type': {
|
|
35
|
+
position: 'sticky',
|
|
36
|
+
right: 0,
|
|
37
|
+
backgroundColor: 'white',
|
|
38
|
+
zIndex: 2,
|
|
39
|
+
'&.is-focused': {
|
|
40
|
+
borderStyle: 'solid',
|
|
41
|
+
borderColor: 'transparent',
|
|
42
|
+
borderWidth: '2px'
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
'tbody tr': {
|
|
46
|
+
'&.is-focused td:last-of-type': {
|
|
47
|
+
borderStyle: 'solid',
|
|
48
|
+
borderColor: 'transparent',
|
|
49
|
+
borderWidth: '4px 2px'
|
|
50
|
+
},
|
|
51
|
+
'&:nth-of-type(odd) td:last-of-type': {
|
|
52
|
+
position: 'sticky',
|
|
53
|
+
right: 0,
|
|
54
|
+
backgroundColor: 'inherit',
|
|
55
|
+
'&.is-focused': {
|
|
56
|
+
borderStyle: 'solid',
|
|
57
|
+
borderColor: 'transparent',
|
|
58
|
+
borderWidth: '2px'
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
'&:nth-of-type(even) td:last-of-type': {
|
|
62
|
+
position: 'sticky',
|
|
63
|
+
right: 0,
|
|
64
|
+
backgroundColor: 'white',
|
|
65
|
+
'&.is-focused': {
|
|
66
|
+
borderStyle: 'solid',
|
|
67
|
+
borderColor: 'transparent',
|
|
68
|
+
borderWidth: '2px'
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
32
73
|
};
|
|
33
74
|
var caption = {
|
|
34
75
|
fontFamily: 'standard',
|
|
@@ -44,7 +85,7 @@ var thead = {
|
|
|
44
85
|
'&.is-sticky': {
|
|
45
86
|
position: 'sticky',
|
|
46
87
|
top: 0,
|
|
47
|
-
zIndex:
|
|
88
|
+
zIndex: 2,
|
|
48
89
|
boxShadow: '0 1px 0 #68747f'
|
|
49
90
|
}
|
|
50
91
|
};
|
|
@@ -65,8 +106,8 @@ var tbody = {
|
|
|
65
106
|
scrollPaddingBottom: '20px'
|
|
66
107
|
};
|
|
67
108
|
var row = {
|
|
68
|
-
'&:nth-of-type(odd)
|
|
69
|
-
|
|
109
|
+
'&:nth-of-type(odd)': {
|
|
110
|
+
backgroundColor: 'neutral.95'
|
|
70
111
|
},
|
|
71
112
|
'&:focus-visible': {
|
|
72
113
|
outline: 'none'
|
|
@@ -81,7 +122,10 @@ var row = {
|
|
|
81
122
|
'&.is-disabled': {
|
|
82
123
|
bg: 'neutral.90',
|
|
83
124
|
opacity: 0.5,
|
|
84
|
-
cursor: 'not-allowed'
|
|
125
|
+
cursor: 'not-allowed',
|
|
126
|
+
'& > td:last-of-type': {
|
|
127
|
+
backgroundColor: 'neutral.90'
|
|
128
|
+
}
|
|
85
129
|
}
|
|
86
130
|
};
|
|
87
131
|
var data = _objectSpread(_objectSpread({}, _Text.text.tableData), {}, {
|
|
@@ -612,6 +612,18 @@ declare const _default: {
|
|
|
612
612
|
};
|
|
613
613
|
};
|
|
614
614
|
tableBase: {
|
|
615
|
+
container: {
|
|
616
|
+
'&.is-last-column-sticky': {
|
|
617
|
+
'thead tr th:last-of-type': {
|
|
618
|
+
backgroundColor: string;
|
|
619
|
+
};
|
|
620
|
+
'tbody tr': {
|
|
621
|
+
'&:nth-of-type(even) td:last-of-type': {
|
|
622
|
+
backgroundColor: string;
|
|
623
|
+
};
|
|
624
|
+
};
|
|
625
|
+
};
|
|
626
|
+
};
|
|
615
627
|
caption: {
|
|
616
628
|
color: string;
|
|
617
629
|
};
|
|
@@ -225,6 +225,18 @@ var _default = exports["default"] = {
|
|
|
225
225
|
}
|
|
226
226
|
},
|
|
227
227
|
tableBase: {
|
|
228
|
+
container: {
|
|
229
|
+
'&.is-last-column-sticky': {
|
|
230
|
+
'thead tr th:last-of-type': {
|
|
231
|
+
backgroundColor: 'backgroundBase'
|
|
232
|
+
},
|
|
233
|
+
'tbody tr': {
|
|
234
|
+
'&:nth-of-type(even) td:last-of-type': {
|
|
235
|
+
backgroundColor: 'backgroundBase'
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
},
|
|
228
240
|
caption: {
|
|
229
241
|
color: 'text.secondary'
|
|
230
242
|
},
|
|
@@ -5567,6 +5567,10 @@ declare const _default: {
|
|
|
5567
5567
|
borderBottom: string;
|
|
5568
5568
|
borderBottomLeftRadius: string;
|
|
5569
5569
|
borderBottomRightRadius: string;
|
|
5570
|
+
'&.is-focused': {
|
|
5571
|
+
borderBottomLeftRadius: string;
|
|
5572
|
+
borderBottomRightRadius: string;
|
|
5573
|
+
};
|
|
5570
5574
|
'& > td:first-of-type': {
|
|
5571
5575
|
borderBottomLeftRadius: string;
|
|
5572
5576
|
};
|
|
@@ -5603,12 +5607,18 @@ declare const _default: {
|
|
|
5603
5607
|
};
|
|
5604
5608
|
'&.is-hovered': {
|
|
5605
5609
|
bg: string;
|
|
5610
|
+
'& > td:last-of-type': {
|
|
5611
|
+
bg: string;
|
|
5612
|
+
};
|
|
5606
5613
|
};
|
|
5607
5614
|
'&:nth-of-type(odd)': {
|
|
5608
5615
|
bg: string;
|
|
5609
5616
|
'&.is-hovered': {
|
|
5610
5617
|
bg: string;
|
|
5611
5618
|
};
|
|
5619
|
+
'& > td:last-of-type': {
|
|
5620
|
+
bg: string;
|
|
5621
|
+
};
|
|
5612
5622
|
};
|
|
5613
5623
|
};
|
|
5614
5624
|
thead: {
|
|
@@ -5630,6 +5640,9 @@ declare const _default: {
|
|
|
5630
5640
|
outline: string;
|
|
5631
5641
|
outlineColor: string;
|
|
5632
5642
|
};
|
|
5643
|
+
'&:last-of-type': {
|
|
5644
|
+
backgroundColor: string;
|
|
5645
|
+
};
|
|
5633
5646
|
};
|
|
5634
5647
|
tbody: {
|
|
5635
5648
|
borderTopColor: string;
|
|
@@ -5641,6 +5654,10 @@ declare const _default: {
|
|
|
5641
5654
|
data: {
|
|
5642
5655
|
py: string;
|
|
5643
5656
|
fontWeight: string;
|
|
5657
|
+
'&:last-of-type': {
|
|
5658
|
+
backgroundColor: string;
|
|
5659
|
+
zIndex: number;
|
|
5660
|
+
};
|
|
5644
5661
|
px: string;
|
|
5645
5662
|
fontSize: string;
|
|
5646
5663
|
color: string;
|
|
@@ -12,6 +12,10 @@ export declare const tableBase: {
|
|
|
12
12
|
borderBottom: string;
|
|
13
13
|
borderBottomLeftRadius: string;
|
|
14
14
|
borderBottomRightRadius: string;
|
|
15
|
+
'&.is-focused': {
|
|
16
|
+
borderBottomLeftRadius: string;
|
|
17
|
+
borderBottomRightRadius: string;
|
|
18
|
+
};
|
|
15
19
|
'& > td:first-of-type': {
|
|
16
20
|
borderBottomLeftRadius: string;
|
|
17
21
|
};
|
|
@@ -48,12 +52,18 @@ export declare const tableBase: {
|
|
|
48
52
|
};
|
|
49
53
|
'&.is-hovered': {
|
|
50
54
|
bg: string;
|
|
55
|
+
'& > td:last-of-type': {
|
|
56
|
+
bg: string;
|
|
57
|
+
};
|
|
51
58
|
};
|
|
52
59
|
'&:nth-of-type(odd)': {
|
|
53
60
|
bg: string;
|
|
54
61
|
'&.is-hovered': {
|
|
55
62
|
bg: string;
|
|
56
63
|
};
|
|
64
|
+
'& > td:last-of-type': {
|
|
65
|
+
bg: string;
|
|
66
|
+
};
|
|
57
67
|
};
|
|
58
68
|
};
|
|
59
69
|
thead: {
|
|
@@ -75,6 +85,9 @@ export declare const tableBase: {
|
|
|
75
85
|
outline: string;
|
|
76
86
|
outlineColor: string;
|
|
77
87
|
};
|
|
88
|
+
'&:last-of-type': {
|
|
89
|
+
backgroundColor: string;
|
|
90
|
+
};
|
|
78
91
|
};
|
|
79
92
|
tbody: {
|
|
80
93
|
borderTopColor: string;
|
|
@@ -86,6 +99,10 @@ export declare const tableBase: {
|
|
|
86
99
|
data: {
|
|
87
100
|
py: string;
|
|
88
101
|
fontWeight: string;
|
|
102
|
+
'&:last-of-type': {
|
|
103
|
+
backgroundColor: string;
|
|
104
|
+
zIndex: number;
|
|
105
|
+
};
|
|
89
106
|
px: string;
|
|
90
107
|
fontSize: string;
|
|
91
108
|
color: string;
|
|
@@ -35,6 +35,10 @@ var container = {
|
|
|
35
35
|
borderBottom: 'unset',
|
|
36
36
|
borderBottomLeftRadius: borderRadius,
|
|
37
37
|
borderBottomRightRadius: borderRadius,
|
|
38
|
+
'&.is-focused': {
|
|
39
|
+
borderBottomLeftRadius: '12px',
|
|
40
|
+
borderBottomRightRadius: '12px'
|
|
41
|
+
},
|
|
38
42
|
'& > td:first-of-type': {
|
|
39
43
|
borderBottomLeftRadius: borderRadius
|
|
40
44
|
},
|
|
@@ -66,12 +70,18 @@ var row = {
|
|
|
66
70
|
borderBottomColor: 'border.base',
|
|
67
71
|
'&.is-focused': _objectSpread({}, defaultFocus),
|
|
68
72
|
'&.is-hovered': {
|
|
69
|
-
bg: 'background.hover'
|
|
73
|
+
bg: 'background.hover',
|
|
74
|
+
'& > td:last-of-type': {
|
|
75
|
+
bg: 'background.hover'
|
|
76
|
+
}
|
|
70
77
|
},
|
|
71
78
|
'&:nth-of-type(odd)': {
|
|
72
79
|
bg: 'backgroundBase',
|
|
73
80
|
'&.is-hovered': {
|
|
74
81
|
bg: 'background.hover'
|
|
82
|
+
},
|
|
83
|
+
'& > td:last-of-type': {
|
|
84
|
+
bg: 'backgroundBase'
|
|
75
85
|
}
|
|
76
86
|
}
|
|
77
87
|
};
|
|
@@ -89,7 +99,10 @@ var head = {
|
|
|
89
99
|
fontWeight: '2',
|
|
90
100
|
color: 'text.primary',
|
|
91
101
|
lineHeight: 'body',
|
|
92
|
-
'&.is-focused': _objectSpread({}, defaultFocus)
|
|
102
|
+
'&.is-focused': _objectSpread({}, defaultFocus),
|
|
103
|
+
'&:last-of-type': {
|
|
104
|
+
backgroundColor: 'backgroundBase'
|
|
105
|
+
}
|
|
93
106
|
};
|
|
94
107
|
var tbody = {
|
|
95
108
|
borderTopColor: 'border.base',
|
|
@@ -100,7 +113,11 @@ var tbody = {
|
|
|
100
113
|
};
|
|
101
114
|
var data = _objectSpread(_objectSpread({}, head), {}, {
|
|
102
115
|
py: 'md',
|
|
103
|
-
fontWeight: '1'
|
|
116
|
+
fontWeight: '1',
|
|
117
|
+
'&:last-of-type': {
|
|
118
|
+
backgroundColor: 'backgroundBase',
|
|
119
|
+
zIndex: 1
|
|
120
|
+
}
|
|
104
121
|
});
|
|
105
122
|
var tableBase = exports.tableBase = {
|
|
106
123
|
container: container,
|