@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
|
@@ -1899,6 +1899,10 @@ declare const _default: {
|
|
|
1899
1899
|
borderBottom: string;
|
|
1900
1900
|
borderBottomLeftRadius: string;
|
|
1901
1901
|
borderBottomRightRadius: string;
|
|
1902
|
+
'&.is-focused': {
|
|
1903
|
+
borderBottomLeftRadius: string;
|
|
1904
|
+
borderBottomRightRadius: string;
|
|
1905
|
+
};
|
|
1902
1906
|
'& > td:first-of-type': {
|
|
1903
1907
|
borderBottomLeftRadius: string;
|
|
1904
1908
|
};
|
|
@@ -1935,12 +1939,18 @@ declare const _default: {
|
|
|
1935
1939
|
};
|
|
1936
1940
|
'&.is-hovered': {
|
|
1937
1941
|
bg: string;
|
|
1942
|
+
'& > td:last-of-type': {
|
|
1943
|
+
bg: string;
|
|
1944
|
+
};
|
|
1938
1945
|
};
|
|
1939
1946
|
'&:nth-of-type(odd)': {
|
|
1940
1947
|
bg: string;
|
|
1941
1948
|
'&.is-hovered': {
|
|
1942
1949
|
bg: string;
|
|
1943
1950
|
};
|
|
1951
|
+
'& > td:last-of-type': {
|
|
1952
|
+
bg: string;
|
|
1953
|
+
};
|
|
1944
1954
|
};
|
|
1945
1955
|
};
|
|
1946
1956
|
thead: {
|
|
@@ -1962,6 +1972,9 @@ declare const _default: {
|
|
|
1962
1972
|
outline: string;
|
|
1963
1973
|
outlineColor: string;
|
|
1964
1974
|
};
|
|
1975
|
+
'&:last-of-type': {
|
|
1976
|
+
backgroundColor: string;
|
|
1977
|
+
};
|
|
1965
1978
|
};
|
|
1966
1979
|
tbody: {
|
|
1967
1980
|
borderTopColor: string;
|
|
@@ -1973,6 +1986,10 @@ declare const _default: {
|
|
|
1973
1986
|
data: {
|
|
1974
1987
|
py: string;
|
|
1975
1988
|
fontWeight: string;
|
|
1989
|
+
'&:last-of-type': {
|
|
1990
|
+
backgroundColor: string;
|
|
1991
|
+
zIndex: number;
|
|
1992
|
+
};
|
|
1976
1993
|
px: string;
|
|
1977
1994
|
fontSize: string;
|
|
1978
1995
|
color: string;
|
|
@@ -17,6 +17,7 @@ export interface TableBaseProps<T extends object> extends TableProps<T>, Omit<Ba
|
|
|
17
17
|
'data-testid'?: string;
|
|
18
18
|
caption?: ReactNode | string;
|
|
19
19
|
isStickyHeader?: boolean;
|
|
20
|
+
isLastColumnSticky?: boolean;
|
|
20
21
|
}
|
|
21
22
|
export interface TableRowGroupProps extends BaseProp {
|
|
22
23
|
type: 'thead' | 'tbody';
|
|
@@ -10,7 +10,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
|
10
10
|
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
11
11
|
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
|
12
12
|
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
13
|
-
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
|
|
13
|
+
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; _forEachInstanceProperty(_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]], _forEachInstanceProperty(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, _forEachInstanceProperty(_context9 = this.tryEntries).call(_context9, m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+_sliceInstanceProperty(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; }
|
|
14
14
|
import React from 'react';
|
|
15
15
|
import { CalendarDate, getLocalTimeZone, today } from '@internationalized/date';
|
|
16
16
|
import userEvent from '@testing-library/user-event';
|
|
@@ -274,4 +274,48 @@ test('parseDateIfString should correctly parse string or DateValue inputs', func
|
|
|
274
274
|
var result2 = parseDateIfString(value2);
|
|
275
275
|
expect(result1).toEqual(new CalendarDate(2022, 8, 1));
|
|
276
276
|
expect(result2).toEqual(new CalendarDate(2022, 8, 10));
|
|
277
|
-
});
|
|
277
|
+
});
|
|
278
|
+
test('should allow selecting a range spanning more than 2 months with minValue constraint', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
|
|
279
|
+
var minValue, buttons, cellsAfterNavigation, octFirstCell, cellsInJuly, julyFifthCell, selectedCells;
|
|
280
|
+
return _regeneratorRuntime().wrap(function _callee6$(_context7) {
|
|
281
|
+
while (1) switch (_context7.prev = _context7.next) {
|
|
282
|
+
case 0:
|
|
283
|
+
minValue = '2022-07-01';
|
|
284
|
+
getComponent({
|
|
285
|
+
minValue: minValue
|
|
286
|
+
});
|
|
287
|
+
|
|
288
|
+
// Navigate to October to select end date first (1st Oct)
|
|
289
|
+
buttons = screen.getAllByRole('button');
|
|
290
|
+
_context7.next = 5;
|
|
291
|
+
return userEvent.click(buttons[1]);
|
|
292
|
+
case 5:
|
|
293
|
+
_context7.next = 7;
|
|
294
|
+
return userEvent.click(buttons[1]);
|
|
295
|
+
case 7:
|
|
296
|
+
cellsAfterNavigation = screen.queryAllByRole('gridcell');
|
|
297
|
+
octFirstCell = cellsAfterNavigation[0]; // October 1st
|
|
298
|
+
_context7.next = 11;
|
|
299
|
+
return userEvent.click(octFirstCell);
|
|
300
|
+
case 11:
|
|
301
|
+
_context7.next = 13;
|
|
302
|
+
return userEvent.click(buttons[0]);
|
|
303
|
+
case 13:
|
|
304
|
+
_context7.next = 15;
|
|
305
|
+
return userEvent.click(buttons[0]);
|
|
306
|
+
case 15:
|
|
307
|
+
cellsInJuly = screen.queryAllByRole('gridcell');
|
|
308
|
+
julyFifthCell = cellsInJuly[4]; // July 5th
|
|
309
|
+
_context7.next = 19;
|
|
310
|
+
return userEvent.click(julyFifthCell);
|
|
311
|
+
case 19:
|
|
312
|
+
selectedCells = screen.getAllByRole('gridcell', {
|
|
313
|
+
selected: true
|
|
314
|
+
});
|
|
315
|
+
expect(selectedCells.length).toBeGreaterThan(0);
|
|
316
|
+
case 21:
|
|
317
|
+
case "end":
|
|
318
|
+
return _context7.stop();
|
|
319
|
+
}
|
|
320
|
+
}, _callee6);
|
|
321
|
+
})));
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["onFocusChange"]
|
|
3
|
+
var _excluded = ["onFocusChange"],
|
|
4
|
+
_excluded2 = ["onFocusChange"];
|
|
4
5
|
import React from 'react';
|
|
5
6
|
import ChevronLeftIcon from '@pingux/mdi-react/ChevronLeftIcon';
|
|
6
7
|
import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
|
|
@@ -20,11 +21,23 @@ var RangeCalendarHeader = function RangeCalendarHeader(props) {
|
|
|
20
21
|
timeZone: state.timeZone
|
|
21
22
|
});
|
|
22
23
|
|
|
23
|
-
//
|
|
24
|
-
|
|
24
|
+
// Removes warning without Safari losing Spectrum’s focus management
|
|
25
|
+
var onPrevFocusChange = prevButtonProps.onFocusChange,
|
|
26
|
+
otherPrevButtonProps = _objectWithoutProperties(prevButtonProps, _excluded);
|
|
27
|
+
|
|
28
|
+
/* istanbul ignore next */
|
|
29
|
+
var prevButtonFocusProps = {
|
|
30
|
+
onFocus: function onFocus() {
|
|
31
|
+
return onPrevFocusChange === null || onPrevFocusChange === void 0 ? void 0 : onPrevFocusChange(true);
|
|
32
|
+
},
|
|
33
|
+
onBlur: function onBlur() {
|
|
34
|
+
return onPrevFocusChange === null || onPrevFocusChange === void 0 ? void 0 : onPrevFocusChange(false);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
|
|
25
38
|
// Removes warning without Safari losing Spectrum’s focus management
|
|
26
39
|
var onFocusChange = nextButtonProps.onFocusChange,
|
|
27
|
-
otherNextButtonProps = _objectWithoutProperties(nextButtonProps,
|
|
40
|
+
otherNextButtonProps = _objectWithoutProperties(nextButtonProps, _excluded2);
|
|
28
41
|
|
|
29
42
|
/* istanbul ignore next */
|
|
30
43
|
var nextButtonFocusProps = {
|
|
@@ -51,7 +64,7 @@ var RangeCalendarHeader = function RangeCalendarHeader(props) {
|
|
|
51
64
|
position: 'absolute',
|
|
52
65
|
left: '10px'
|
|
53
66
|
}
|
|
54
|
-
}, ___EmotionJSX(IconButton, _extends({},
|
|
67
|
+
}, ___EmotionJSX(IconButton, _extends({}, otherPrevButtonProps, prevButtonFocusProps, {
|
|
55
68
|
"aria-label": "Previous month navigation",
|
|
56
69
|
color: "pink"
|
|
57
70
|
}), ___EmotionJSX(Icon, {
|
|
@@ -10,7 +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 = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className"],
|
|
13
|
+
var _excluded = ["caption", "selectionMode", "selectionBehavior", "hasSelectionCheckboxes", "isStickyHeader", "className", "isLastColumnSticky"],
|
|
14
14
|
_excluded2 = ["caption"],
|
|
15
15
|
_excluded3 = ["type", "children", "className", "isSticky"];
|
|
16
16
|
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
@@ -27,6 +27,25 @@ import { useTableColumnResizeState, useTableState } from '@react-stately/table';
|
|
|
27
27
|
import { Box, CheckboxField, Icon, Loader, Text } from '../..';
|
|
28
28
|
import { useGetTheme, useLocalOrForwardRef, useStatusClasses } from '../../hooks';
|
|
29
29
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
30
|
+
var useHandleFocusRef = function useHandleFocusRef(ref) {
|
|
31
|
+
React.useEffect(function () {
|
|
32
|
+
var el = ref.current;
|
|
33
|
+
if (!el) return;
|
|
34
|
+
var handleFocus = function handleFocus() {
|
|
35
|
+
var container = el.closest('.last-column-sticky');
|
|
36
|
+
if (!container) return;
|
|
37
|
+
var cellRect = el.getBoundingClientRect();
|
|
38
|
+
var contRect = container.getBoundingClientRect();
|
|
39
|
+
container.scrollLeft = cellRect.left + contRect.width;
|
|
40
|
+
};
|
|
41
|
+
el.addEventListener('focus', handleFocus);
|
|
42
|
+
|
|
43
|
+
// eslint-disable-next-line consistent-return
|
|
44
|
+
return function () {
|
|
45
|
+
el.removeEventListener('focus', handleFocus);
|
|
46
|
+
};
|
|
47
|
+
}, []);
|
|
48
|
+
};
|
|
30
49
|
var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
31
50
|
var _context, _context3;
|
|
32
51
|
var caption = props.caption,
|
|
@@ -36,6 +55,7 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
36
55
|
_props$isStickyHeader = props.isStickyHeader,
|
|
37
56
|
isStickyHeader = _props$isStickyHeader === void 0 ? false : _props$isStickyHeader,
|
|
38
57
|
className = props.className,
|
|
58
|
+
isLastColumnSticky = props.isLastColumnSticky,
|
|
39
59
|
others = _objectWithoutProperties(props, _excluded);
|
|
40
60
|
var tableRef = useLocalOrForwardRef(ref);
|
|
41
61
|
var headerRef = useRef(null);
|
|
@@ -82,7 +102,8 @@ var TableBase = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
82
102
|
}
|
|
83
103
|
});
|
|
84
104
|
var _useStatusClasses = useStatusClasses(className, {
|
|
85
|
-
'has-caption': !!caption
|
|
105
|
+
'has-caption': !!caption,
|
|
106
|
+
'is-last-column-sticky': isLastColumnSticky
|
|
86
107
|
}),
|
|
87
108
|
classNames = _useStatusClasses.classNames;
|
|
88
109
|
return ___EmotionJSX(Box, {
|
|
@@ -184,7 +205,8 @@ var TableRowGroup = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
184
205
|
display: type === 'thead' ? 'table-header-group' : 'table-row-group',
|
|
185
206
|
ref: ref,
|
|
186
207
|
className: classNames,
|
|
187
|
-
variant: "tableBase.".concat(type)
|
|
208
|
+
variant: "tableBase.".concat(type),
|
|
209
|
+
tabIndex: "0"
|
|
188
210
|
}, rowGroupProps, others), children);
|
|
189
211
|
});
|
|
190
212
|
function TableHeaderRow(props) {
|
|
@@ -236,6 +258,7 @@ function TableColumnHeader(props) {
|
|
|
236
258
|
isFocused: isFocusVisible
|
|
237
259
|
}),
|
|
238
260
|
classNames = _useStatusClasses3.classNames;
|
|
261
|
+
useHandleFocusRef(ref);
|
|
239
262
|
return ___EmotionJSX(Box, _extends({
|
|
240
263
|
as: "th",
|
|
241
264
|
display: "table-cell",
|
|
@@ -308,6 +331,7 @@ function TableCell(props) {
|
|
|
308
331
|
isFocused: isFocusVisible
|
|
309
332
|
}),
|
|
310
333
|
classNames = _useStatusClasses5.classNames;
|
|
334
|
+
useHandleFocusRef(ref);
|
|
311
335
|
return ___EmotionJSX(Box, _extends({
|
|
312
336
|
as: "td",
|
|
313
337
|
display: "table-cell",
|
|
@@ -371,4 +371,29 @@ DynamicWithSorting.parameters = {
|
|
|
371
371
|
}]
|
|
372
372
|
}
|
|
373
373
|
}
|
|
374
|
+
};
|
|
375
|
+
export var WithLastColumnSticky = function WithLastColumnSticky() {
|
|
376
|
+
return ___EmotionJSX(Card, {
|
|
377
|
+
variant: "cards.tableWrapper",
|
|
378
|
+
className: "last-column-sticky"
|
|
379
|
+
}, ___EmotionJSX(TableBase, {
|
|
380
|
+
caption: "Lorem ipsum",
|
|
381
|
+
"aria-label": "table",
|
|
382
|
+
isLastColumnSticky: true
|
|
383
|
+
}, ___EmotionJSX(THead, {
|
|
384
|
+
columns: headers
|
|
385
|
+
}, function (column) {
|
|
386
|
+
return ___EmotionJSX(Column, {
|
|
387
|
+
key: column.key,
|
|
388
|
+
minWidth: 200
|
|
389
|
+
}, column.name);
|
|
390
|
+
}), ___EmotionJSX(TBody, {
|
|
391
|
+
items: objects
|
|
392
|
+
}, function (item) {
|
|
393
|
+
return ___EmotionJSX(Row, {
|
|
394
|
+
key: item.id
|
|
395
|
+
}, function (columnKey) {
|
|
396
|
+
return ___EmotionJSX(Cell, null, item[columnKey]);
|
|
397
|
+
});
|
|
398
|
+
})));
|
|
374
399
|
};
|
|
@@ -14,14 +14,55 @@ var defaultFocus = {
|
|
|
14
14
|
outline: '1px',
|
|
15
15
|
outlineStyle: 'solid',
|
|
16
16
|
outlineColor: 'focus',
|
|
17
|
-
outlineOffset: '-1px'
|
|
17
|
+
outlineOffset: '-1px',
|
|
18
|
+
zIndex: 2
|
|
18
19
|
};
|
|
19
20
|
var container = {
|
|
20
21
|
width: '100%',
|
|
21
22
|
height: '100%',
|
|
22
23
|
borderSpacing: '0',
|
|
23
24
|
borderCollapse: 'collapse',
|
|
24
|
-
position: 'relative'
|
|
25
|
+
position: 'relative',
|
|
26
|
+
'&.is-last-column-sticky': {
|
|
27
|
+
'thead tr th:last-of-type': {
|
|
28
|
+
position: 'sticky',
|
|
29
|
+
right: 0,
|
|
30
|
+
backgroundColor: 'white',
|
|
31
|
+
zIndex: 2,
|
|
32
|
+
'&.is-focused': {
|
|
33
|
+
borderStyle: 'solid',
|
|
34
|
+
borderColor: 'transparent',
|
|
35
|
+
borderWidth: '2px'
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
'tbody tr': {
|
|
39
|
+
'&.is-focused td:last-of-type': {
|
|
40
|
+
borderStyle: 'solid',
|
|
41
|
+
borderColor: 'transparent',
|
|
42
|
+
borderWidth: '4px 2px'
|
|
43
|
+
},
|
|
44
|
+
'&:nth-of-type(odd) td:last-of-type': {
|
|
45
|
+
position: 'sticky',
|
|
46
|
+
right: 0,
|
|
47
|
+
backgroundColor: 'inherit',
|
|
48
|
+
'&.is-focused': {
|
|
49
|
+
borderStyle: 'solid',
|
|
50
|
+
borderColor: 'transparent',
|
|
51
|
+
borderWidth: '2px'
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
'&:nth-of-type(even) td:last-of-type': {
|
|
55
|
+
position: 'sticky',
|
|
56
|
+
right: 0,
|
|
57
|
+
backgroundColor: 'white',
|
|
58
|
+
'&.is-focused': {
|
|
59
|
+
borderStyle: 'solid',
|
|
60
|
+
borderColor: 'transparent',
|
|
61
|
+
borderWidth: '2px'
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
25
66
|
};
|
|
26
67
|
var caption = {
|
|
27
68
|
fontFamily: 'standard',
|
|
@@ -37,7 +78,7 @@ var thead = {
|
|
|
37
78
|
'&.is-sticky': {
|
|
38
79
|
position: 'sticky',
|
|
39
80
|
top: 0,
|
|
40
|
-
zIndex:
|
|
81
|
+
zIndex: 2,
|
|
41
82
|
boxShadow: '0 1px 0 #68747f'
|
|
42
83
|
}
|
|
43
84
|
};
|
|
@@ -58,8 +99,8 @@ var tbody = {
|
|
|
58
99
|
scrollPaddingBottom: '20px'
|
|
59
100
|
};
|
|
60
101
|
var row = {
|
|
61
|
-
'&:nth-of-type(odd)
|
|
62
|
-
|
|
102
|
+
'&:nth-of-type(odd)': {
|
|
103
|
+
backgroundColor: 'neutral.95'
|
|
63
104
|
},
|
|
64
105
|
'&:focus-visible': {
|
|
65
106
|
outline: 'none'
|
|
@@ -74,7 +115,10 @@ var row = {
|
|
|
74
115
|
'&.is-disabled': {
|
|
75
116
|
bg: 'neutral.90',
|
|
76
117
|
opacity: 0.5,
|
|
77
|
-
cursor: 'not-allowed'
|
|
118
|
+
cursor: 'not-allowed',
|
|
119
|
+
'& > td:last-of-type': {
|
|
120
|
+
backgroundColor: 'neutral.90'
|
|
121
|
+
}
|
|
78
122
|
}
|
|
79
123
|
};
|
|
80
124
|
var data = _objectSpread(_objectSpread({}, text.tableData), {}, {
|
|
@@ -217,6 +217,18 @@ export default {
|
|
|
217
217
|
}
|
|
218
218
|
},
|
|
219
219
|
tableBase: {
|
|
220
|
+
container: {
|
|
221
|
+
'&.is-last-column-sticky': {
|
|
222
|
+
'thead tr th:last-of-type': {
|
|
223
|
+
backgroundColor: 'backgroundBase'
|
|
224
|
+
},
|
|
225
|
+
'tbody tr': {
|
|
226
|
+
'&:nth-of-type(even) td:last-of-type': {
|
|
227
|
+
backgroundColor: 'backgroundBase'
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
},
|
|
220
232
|
caption: {
|
|
221
233
|
color: 'text.secondary'
|
|
222
234
|
},
|
|
@@ -28,6 +28,10 @@ var container = {
|
|
|
28
28
|
borderBottom: 'unset',
|
|
29
29
|
borderBottomLeftRadius: borderRadius,
|
|
30
30
|
borderBottomRightRadius: borderRadius,
|
|
31
|
+
'&.is-focused': {
|
|
32
|
+
borderBottomLeftRadius: '12px',
|
|
33
|
+
borderBottomRightRadius: '12px'
|
|
34
|
+
},
|
|
31
35
|
'& > td:first-of-type': {
|
|
32
36
|
borderBottomLeftRadius: borderRadius
|
|
33
37
|
},
|
|
@@ -59,12 +63,18 @@ var row = {
|
|
|
59
63
|
borderBottomColor: 'border.base',
|
|
60
64
|
'&.is-focused': _objectSpread({}, defaultFocus),
|
|
61
65
|
'&.is-hovered': {
|
|
62
|
-
bg: 'background.hover'
|
|
66
|
+
bg: 'background.hover',
|
|
67
|
+
'& > td:last-of-type': {
|
|
68
|
+
bg: 'background.hover'
|
|
69
|
+
}
|
|
63
70
|
},
|
|
64
71
|
'&:nth-of-type(odd)': {
|
|
65
72
|
bg: 'backgroundBase',
|
|
66
73
|
'&.is-hovered': {
|
|
67
74
|
bg: 'background.hover'
|
|
75
|
+
},
|
|
76
|
+
'& > td:last-of-type': {
|
|
77
|
+
bg: 'backgroundBase'
|
|
68
78
|
}
|
|
69
79
|
}
|
|
70
80
|
};
|
|
@@ -82,7 +92,10 @@ var head = {
|
|
|
82
92
|
fontWeight: '2',
|
|
83
93
|
color: 'text.primary',
|
|
84
94
|
lineHeight: 'body',
|
|
85
|
-
'&.is-focused': _objectSpread({}, defaultFocus)
|
|
95
|
+
'&.is-focused': _objectSpread({}, defaultFocus),
|
|
96
|
+
'&:last-of-type': {
|
|
97
|
+
backgroundColor: 'backgroundBase'
|
|
98
|
+
}
|
|
86
99
|
};
|
|
87
100
|
var tbody = {
|
|
88
101
|
borderTopColor: 'border.base',
|
|
@@ -93,7 +106,11 @@ var tbody = {
|
|
|
93
106
|
};
|
|
94
107
|
var data = _objectSpread(_objectSpread({}, head), {}, {
|
|
95
108
|
py: 'md',
|
|
96
|
-
fontWeight: '1'
|
|
109
|
+
fontWeight: '1',
|
|
110
|
+
'&:last-of-type': {
|
|
111
|
+
backgroundColor: 'backgroundBase',
|
|
112
|
+
zIndex: 1
|
|
113
|
+
}
|
|
97
114
|
});
|
|
98
115
|
export var tableBase = {
|
|
99
116
|
container: container,
|