@instructure/ui-table 8.56.5-pr-snapshot-1728655013879 → 8.56.5-pr-snapshot-1729507712924
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/CHANGELOG.md +1 -1
- package/lib/Table/Body/index.js +6 -4
- package/lib/Table/Body/props.js +2 -2
- package/lib/Table/Cell/index.js +5 -4
- package/lib/Table/ColHeader/index.js +10 -7
- package/lib/Table/Head/index.js +16 -14
- package/lib/Table/Head/props.js +2 -2
- package/lib/Table/Row/index.js +10 -8
- package/lib/Table/Row/props.js +2 -2
- package/lib/Table/RowHeader/index.js +5 -4
- package/lib/Table/index.js +14 -12
- package/lib/Table/props.js +2 -2
- package/package.json +16 -16
package/CHANGELOG.md
CHANGED
@@ -3,7 +3,7 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
-
## [8.56.5-pr-snapshot-
|
6
|
+
## [8.56.5-pr-snapshot-1729507712924](https://github.com/instructure/instructure-ui/compare/v8.56.4...v8.56.5-pr-snapshot-1729507712924) (2024-10-21)
|
7
7
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-table
|
9
9
|
|
package/lib/Table/Body/index.js
CHANGED
@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.default = exports.Body = void 0;
|
8
8
|
var _react = require("react");
|
9
|
-
var
|
10
|
-
var
|
9
|
+
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
|
10
|
+
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
11
|
+
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
12
|
+
var _View = require("@instructure/ui-view/lib/View");
|
11
13
|
var _emotion = require("@instructure/emotion");
|
12
14
|
var _styles = _interopRequireDefault(require("./styles"));
|
13
15
|
var _theme = _interopRequireDefault(require("./theme"));
|
@@ -60,11 +62,11 @@ let Body = exports.Body = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
60
62
|
isStacked = _this$props3.isStacked,
|
61
63
|
headers = _this$props3.headers,
|
62
64
|
styles = _this$props3.styles;
|
63
|
-
return (0, _emotion.jsx)(
|
65
|
+
return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Body.allowedProps), Body), {
|
64
66
|
as: isStacked ? 'div' : 'tbody',
|
65
67
|
css: styles === null || styles === void 0 ? void 0 : styles.body,
|
66
68
|
role: isStacked ? 'rowgroup' : void 0
|
67
|
-
}), _react.Children.map(children, child => (0,
|
69
|
+
}), _react.Children.map(children, child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Row.Row]) ? (0, _safeCloneElement.safeCloneElement)(child, {
|
68
70
|
key: child.props.name,
|
69
71
|
hover,
|
70
72
|
isStacked,
|
package/lib/Table/Body/props.js
CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.propTypes = exports.allowedProps = void 0;
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
9
|
-
var
|
9
|
+
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
10
10
|
var _Row = require("../Row");
|
11
11
|
/*
|
12
12
|
* The MIT License (MIT)
|
@@ -33,7 +33,7 @@ var _Row = require("../Row");
|
|
33
33
|
*/
|
34
34
|
|
35
35
|
const propTypes = exports.propTypes = {
|
36
|
-
children:
|
36
|
+
children: _Children.Children.oneOf([_Row.Row]),
|
37
37
|
hover: _propTypes.default.bool,
|
38
38
|
isStacked: _propTypes.default.bool,
|
39
39
|
headers: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]))
|
package/lib/Table/Cell/index.js
CHANGED
@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.default = exports.Cell = void 0;
|
8
8
|
var _react = require("react");
|
9
|
-
var
|
10
|
-
var
|
9
|
+
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
10
|
+
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
11
|
+
var _View = require("@instructure/ui-view/lib/View");
|
11
12
|
var _emotion = require("@instructure/emotion");
|
12
13
|
var _styles = _interopRequireDefault(require("./styles"));
|
13
14
|
var _theme = _interopRequireDefault(require("./theme"));
|
@@ -58,11 +59,11 @@ let Cell = exports.Cell = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
58
59
|
styles = _this$props3.styles,
|
59
60
|
isStacked = _this$props3.isStacked,
|
60
61
|
header = _this$props3.header;
|
61
|
-
return (0, _emotion.jsx)(
|
62
|
+
return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Cell.allowedProps), Cell), {
|
62
63
|
as: isStacked ? 'div' : 'td',
|
63
64
|
css: styles === null || styles === void 0 ? void 0 : styles.cell,
|
64
65
|
role: isStacked ? 'cell' : void 0
|
65
|
-
}), header && (0,
|
66
|
+
}), header && (0, _callRenderProp.callRenderProp)(header), header && ': ', (0, _callRenderProp.callRenderProp)(children));
|
66
67
|
}
|
67
68
|
}, _class2.displayName = "Cell", _class2.componentId = 'Table.Cell', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
|
68
69
|
textAlign: 'start',
|
@@ -7,8 +7,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
});
|
8
8
|
exports.default = exports.ColHeader = void 0;
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
10
|
-
var
|
11
|
-
var
|
10
|
+
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
11
|
+
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
12
|
+
var _IconMiniArrowUpLine2 = require("@instructure/ui-icons/lib/IconMiniArrowUpLine.js");
|
13
|
+
var _IconMiniArrowDownLine = require("@instructure/ui-icons/lib/IconMiniArrowDownLine.js");
|
14
|
+
var _IconMiniArrowDoubleLine = require("@instructure/ui-icons/lib/IconMiniArrowDoubleLine.js");
|
12
15
|
var _emotion = require("@instructure/emotion");
|
13
16
|
var _styles = _interopRequireDefault(require("./styles"));
|
14
17
|
var _theme = _interopRequireDefault(require("./theme"));
|
@@ -69,13 +72,13 @@ let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
69
72
|
sortDirection = _this$props4.sortDirection,
|
70
73
|
onRequestSort = _this$props4.onRequestSort;
|
71
74
|
if (sortDirection === 'ascending') {
|
72
|
-
return _IconMiniArrowUpLine || (_IconMiniArrowUpLine = (0, _emotion.jsx)(
|
75
|
+
return _IconMiniArrowUpLine || (_IconMiniArrowUpLine = (0, _emotion.jsx)(_IconMiniArrowUpLine2.IconMiniArrowUpLine, null));
|
73
76
|
}
|
74
77
|
if (sortDirection === 'descending') {
|
75
|
-
return _IconMiniArrowDownLin || (_IconMiniArrowDownLin = (0, _emotion.jsx)(
|
78
|
+
return _IconMiniArrowDownLin || (_IconMiniArrowDownLin = (0, _emotion.jsx)(_IconMiniArrowDownLine.IconMiniArrowDownLine, null));
|
76
79
|
}
|
77
80
|
if (onRequestSort) {
|
78
|
-
return (0, _emotion.jsx)(
|
81
|
+
return (0, _emotion.jsx)(_IconMiniArrowDoubleLine.IconMiniArrowDoubleLine, {
|
79
82
|
css: {
|
80
83
|
opacity: '30%'
|
81
84
|
}
|
@@ -91,7 +94,7 @@ let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
91
94
|
sortDirection = _this$props5.sortDirection,
|
92
95
|
scope = _this$props5.scope,
|
93
96
|
styles = _this$props5.styles;
|
94
|
-
return (0, _emotion.jsx)("th", Object.assign({}, (0,
|
97
|
+
return (0, _emotion.jsx)("th", Object.assign({}, (0, _omitProps.omitProps)(this.props, ColHeader.allowedProps), {
|
95
98
|
css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
|
96
99
|
style: {
|
97
100
|
width
|
@@ -103,7 +106,7 @@ let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
103
106
|
css: styles === null || styles === void 0 ? void 0 : styles.button
|
104
107
|
}, (0, _emotion.jsx)("div", {
|
105
108
|
css: styles === null || styles === void 0 ? void 0 : styles.buttonContent
|
106
|
-
}, (0,
|
109
|
+
}, (0, _callRenderProp.callRenderProp)(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
|
107
110
|
}
|
108
111
|
}, _class2.displayName = "ColHeader", _class2.componentId = 'Table.ColHeader', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
|
109
112
|
textAlign: 'start',
|
package/lib/Table/Head/index.js
CHANGED
@@ -7,10 +7,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
exports.default = exports.Head = void 0;
|
8
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
9
9
|
var _react = require("react");
|
10
|
-
var
|
11
|
-
var
|
12
|
-
var
|
13
|
-
var
|
10
|
+
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
11
|
+
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
|
12
|
+
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
13
|
+
var _SimpleSelect = require("@instructure/ui-simple-select/lib/SimpleSelect");
|
14
|
+
var _ScreenReaderContent2 = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
|
15
|
+
var _IconCheckLine = require("@instructure/ui-icons/lib/IconCheckLine.js");
|
14
16
|
var _console = require("@instructure/console");
|
15
17
|
var _emotion = require("@instructure/emotion");
|
16
18
|
var _styles = _interopRequireDefault(require("./styles"));
|
@@ -57,7 +59,7 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
57
59
|
let sortable = false;
|
58
60
|
if (row) {
|
59
61
|
_react.Children.forEach(row.props.children, colHeader => {
|
60
|
-
if ((0,
|
62
|
+
if ((0, _matchComponentTypes.matchComponentTypes)(colHeader, [_ColHeader.ColHeader])) {
|
61
63
|
if (colHeader.props.onRequestSort) sortable = true;
|
62
64
|
}
|
63
65
|
});
|
@@ -82,7 +84,7 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
82
84
|
const _ref3 = _react.Children.toArray(children),
|
83
85
|
_ref4 = (0, _slicedToArray2.default)(_ref3, 1),
|
84
86
|
row = _ref4[0];
|
85
|
-
if (!(0,
|
87
|
+
if (!(0, _matchComponentTypes.matchComponentTypes)(row, [_Row.Row])) {
|
86
88
|
return null;
|
87
89
|
}
|
88
90
|
const options = [];
|
@@ -91,7 +93,7 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
91
93
|
let count = 0;
|
92
94
|
_react.Children.forEach(row.props.children, colHeader => {
|
93
95
|
count += 1;
|
94
|
-
if ((0,
|
96
|
+
if ((0, _matchComponentTypes.matchComponentTypes)(colHeader, [_ColHeader.ColHeader])) {
|
95
97
|
const _colHeader$props = colHeader.props,
|
96
98
|
id = _colHeader$props.id,
|
97
99
|
stackedSortByLabel = _colHeader$props.stackedSortByLabel,
|
@@ -129,19 +131,19 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
129
131
|
}, (0, _emotion.jsx)("div", {
|
130
132
|
role: "cell",
|
131
133
|
"aria-colspan": count
|
132
|
-
}, (0, _emotion.jsx)(
|
133
|
-
renderLabel: renderSortLabel ? (0,
|
134
|
-
renderBeforeInput: selectedOption &&
|
134
|
+
}, (0, _emotion.jsx)(_SimpleSelect.SimpleSelect, {
|
135
|
+
renderLabel: renderSortLabel ? (0, _callRenderProp.callRenderProp)(renderSortLabel) : _ScreenReaderContent || (_ScreenReaderContent = (0, _emotion.jsx)(_ScreenReaderContent2.ScreenReaderContent, null)),
|
136
|
+
renderBeforeInput: selectedOption && _IconCheckLine.IconCheckLine,
|
135
137
|
value: selectedOption,
|
136
138
|
onChange: handleSelect
|
137
139
|
}, options.map(({
|
138
140
|
id,
|
139
141
|
label
|
140
|
-
}) => (0, _emotion.jsx)(
|
142
|
+
}) => (0, _emotion.jsx)(_SimpleSelect.SimpleSelect.Option, {
|
141
143
|
id: id,
|
142
144
|
key: id,
|
143
145
|
value: id,
|
144
|
-
renderBeforeLabel: id === selectedOption ?
|
146
|
+
renderBeforeLabel: id === selectedOption ? _IconCheckLine.IconCheckLine : () => (0, _emotion.jsx)(_IconCheckLine.IconCheckLine, {
|
145
147
|
style: {
|
146
148
|
color: 'transparent'
|
147
149
|
}
|
@@ -153,9 +155,9 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
153
155
|
children = _this$props4.children,
|
154
156
|
isStacked = _this$props4.isStacked,
|
155
157
|
styles = _this$props4.styles;
|
156
|
-
return isStacked ? this.renderSelect() : (0, _emotion.jsx)("thead", Object.assign({}, (0,
|
158
|
+
return isStacked ? this.renderSelect() : (0, _emotion.jsx)("thead", Object.assign({}, (0, _omitProps.omitProps)(this.props, Head.allowedProps), {
|
157
159
|
css: styles === null || styles === void 0 ? void 0 : styles.head
|
158
|
-
}), _react.Children.map(children, child => (0,
|
160
|
+
}), _react.Children.map(children, child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Row.Row]) ? child : null));
|
159
161
|
}
|
160
162
|
}, _class2.displayName = "Head", _class2.componentId = 'Table.Head', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
|
161
163
|
children: null
|
package/lib/Table/Head/props.js
CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.propTypes = exports.allowedProps = void 0;
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
9
|
-
var
|
9
|
+
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
10
10
|
var _Row = require("../Row");
|
11
11
|
/*
|
12
12
|
* The MIT License (MIT)
|
@@ -33,7 +33,7 @@ var _Row = require("../Row");
|
|
33
33
|
*/
|
34
34
|
|
35
35
|
const propTypes = exports.propTypes = {
|
36
|
-
children:
|
36
|
+
children: _Children.Children.oneOf([_Row.Row]),
|
37
37
|
isStacked: _propTypes.default.bool,
|
38
38
|
renderSortLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
|
39
39
|
};
|
package/lib/Table/Row/index.js
CHANGED
@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.default = exports.Row = void 0;
|
8
8
|
var _react = require("react");
|
9
|
-
var
|
10
|
-
var
|
9
|
+
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
10
|
+
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
|
11
|
+
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
12
|
+
var _View = require("@instructure/ui-view/lib/View");
|
11
13
|
var _emotion = require("@instructure/emotion");
|
12
14
|
var _styles = _interopRequireDefault(require("./styles"));
|
13
15
|
var _theme = _interopRequireDefault(require("./theme"));
|
@@ -61,22 +63,22 @@ let Row = exports.Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
|
|
61
63
|
styles = _this$props3.styles,
|
62
64
|
isStacked = _this$props3.isStacked,
|
63
65
|
headers = _this$props3.headers;
|
64
|
-
return (0, _emotion.jsx)(
|
66
|
+
return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Row.allowedProps), Row), {
|
65
67
|
as: isStacked ? 'div' : 'tr',
|
66
68
|
css: styles === null || styles === void 0 ? void 0 : styles.row,
|
67
69
|
role: isStacked ? 'row' : void 0
|
68
70
|
}), _react.Children.toArray(children).filter(Boolean).map((child, index) => {
|
69
|
-
if ((0,
|
71
|
+
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_ColHeader.ColHeader])) {
|
70
72
|
return child;
|
71
73
|
}
|
72
|
-
if ((0,
|
73
|
-
return (0,
|
74
|
+
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_RowHeader.RowHeader])) {
|
75
|
+
return (0, _safeCloneElement.safeCloneElement)(child, {
|
74
76
|
key: child.props.name,
|
75
77
|
isStacked
|
76
78
|
});
|
77
79
|
}
|
78
|
-
if ((0,
|
79
|
-
return (0,
|
80
|
+
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Cell.Cell])) {
|
81
|
+
return (0, _safeCloneElement.safeCloneElement)(child, {
|
80
82
|
key: child.props.name,
|
81
83
|
isStacked,
|
82
84
|
header: headers && headers[index]
|
package/lib/Table/Row/props.js
CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.propTypes = exports.allowedProps = void 0;
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
9
|
-
var
|
9
|
+
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
10
10
|
var _ColHeader = require("../ColHeader");
|
11
11
|
var _RowHeader = require("../RowHeader");
|
12
12
|
var _Cell = require("../Cell");
|
@@ -35,7 +35,7 @@ var _Cell = require("../Cell");
|
|
35
35
|
*/
|
36
36
|
|
37
37
|
const propTypes = exports.propTypes = {
|
38
|
-
children:
|
38
|
+
children: _Children.Children.oneOf([_ColHeader.ColHeader, _RowHeader.RowHeader, _Cell.Cell]),
|
39
39
|
hover: _propTypes.default.bool,
|
40
40
|
isStacked: _propTypes.default.bool,
|
41
41
|
headers: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]))
|
@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.default = exports.RowHeader = void 0;
|
8
8
|
var _react = require("react");
|
9
|
-
var
|
10
|
-
var
|
9
|
+
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
10
|
+
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
11
|
+
var _View = require("@instructure/ui-view/lib/View");
|
11
12
|
var _emotion = require("@instructure/emotion");
|
12
13
|
var _styles = _interopRequireDefault(require("./styles"));
|
13
14
|
var _theme = _interopRequireDefault(require("./theme"));
|
@@ -57,12 +58,12 @@ let RowHeader = exports.RowHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
57
58
|
children = _this$props3.children,
|
58
59
|
isStacked = _this$props3.isStacked,
|
59
60
|
styles = _this$props3.styles;
|
60
|
-
return (0, _emotion.jsx)(
|
61
|
+
return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, RowHeader.allowedProps), RowHeader), {
|
61
62
|
as: isStacked ? 'div' : 'th',
|
62
63
|
css: styles === null || styles === void 0 ? void 0 : styles.rowHeader,
|
63
64
|
scope: "row",
|
64
65
|
role: isStacked ? 'rowheader' : void 0
|
65
|
-
}), (0,
|
66
|
+
}), (0, _callRenderProp.callRenderProp)(children));
|
66
67
|
}
|
67
68
|
}, _class2.displayName = "RowHeader", _class2.componentId = 'Table.RowHeader', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
|
68
69
|
textAlign: 'start',
|
package/lib/Table/index.js
CHANGED
@@ -7,9 +7,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
exports.default = exports.Table = void 0;
|
8
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
9
9
|
var _react = require("react");
|
10
|
-
var
|
11
|
-
var
|
12
|
-
var
|
10
|
+
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
|
11
|
+
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
12
|
+
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
13
|
+
var _View = require("@instructure/ui-view/lib/View");
|
14
|
+
var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
|
13
15
|
var _emotion = require("@instructure/emotion");
|
14
16
|
var _styles = _interopRequireDefault(require("./styles"));
|
15
17
|
var _theme = _interopRequireDefault(require("./theme"));
|
@@ -75,13 +77,13 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyle)(_styles.default, _th
|
|
75
77
|
const _ref = _react.Children.toArray(children),
|
76
78
|
_ref2 = (0, _slicedToArray2.default)(_ref, 1),
|
77
79
|
head = _ref2[0];
|
78
|
-
if ((0,
|
80
|
+
if ((0, _matchComponentTypes.matchComponentTypes)(head, [_Head.Head])) {
|
79
81
|
const _Children$toArray = _react.Children.toArray(head.props.children),
|
80
82
|
_Children$toArray2 = (0, _slicedToArray2.default)(_Children$toArray, 1),
|
81
83
|
row = _Children$toArray2[0];
|
82
|
-
if ((0,
|
84
|
+
if ((0, _matchComponentTypes.matchComponentTypes)(row, [_Row.Row])) {
|
83
85
|
return _react.Children.map(row.props.children, colHeader => {
|
84
|
-
return (0,
|
86
|
+
return (0, _matchComponentTypes.matchComponentTypes)(colHeader, [_ColHeader.ColHeader]) ? colHeader.props.children : void 0;
|
85
87
|
});
|
86
88
|
}
|
87
89
|
}
|
@@ -97,22 +99,22 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyle)(_styles.default, _th
|
|
97
99
|
styles = _this$props3.styles;
|
98
100
|
const isStacked = layout === 'stacked';
|
99
101
|
const headers = isStacked ? this.getHeaders() : void 0;
|
100
|
-
return (0, _emotion.jsx)(
|
102
|
+
return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Table.allowedProps), Table), {
|
101
103
|
as: isStacked ? 'div' : 'table',
|
102
104
|
margin: margin,
|
103
105
|
elementRef: this.handleRef,
|
104
106
|
css: styles === null || styles === void 0 ? void 0 : styles.table,
|
105
107
|
role: isStacked ? 'table' : void 0,
|
106
108
|
"aria-label": isStacked ? caption : void 0
|
107
|
-
}), !isStacked && (0, _emotion.jsx)("caption", null, (0, _emotion.jsx)(
|
108
|
-
if ((0,
|
109
|
-
return (0,
|
109
|
+
}), !isStacked && (0, _emotion.jsx)("caption", null, (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, caption)), _react.Children.map(children, child => {
|
110
|
+
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Head.Head])) {
|
111
|
+
return (0, _safeCloneElement.safeCloneElement)(child, {
|
110
112
|
key: child.props.name,
|
111
113
|
isStacked
|
112
114
|
});
|
113
115
|
}
|
114
|
-
if ((0,
|
115
|
-
return (0,
|
116
|
+
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Body.Body])) {
|
117
|
+
return (0, _safeCloneElement.safeCloneElement)(child, {
|
116
118
|
key: child.props.name,
|
117
119
|
isStacked,
|
118
120
|
hover,
|
package/lib/Table/props.js
CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.propTypes = exports.allowedProps = void 0;
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
9
|
-
var
|
9
|
+
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
10
10
|
var _emotion = require("@instructure/emotion");
|
11
11
|
var _Head = require("./Head");
|
12
12
|
var _Body = require("./Body");
|
@@ -36,7 +36,7 @@ var _Body = require("./Body");
|
|
36
36
|
|
37
37
|
const propTypes = exports.propTypes = {
|
38
38
|
caption: _propTypes.default.node.isRequired,
|
39
|
-
children:
|
39
|
+
children: _Children.Children.oneOf([_Head.Head, _Body.Body]),
|
40
40
|
margin: _emotion.ThemeablePropTypes.spacing,
|
41
41
|
elementRef: _propTypes.default.func,
|
42
42
|
hover: _propTypes.default.bool,
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@instructure/ui-table",
|
3
|
-
"version": "8.56.5-pr-snapshot-
|
3
|
+
"version": "8.56.5-pr-snapshot-1729507712924",
|
4
4
|
"description": "A styled HTML table component",
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
6
6
|
"module": "./es/index.js",
|
@@ -23,24 +23,24 @@
|
|
23
23
|
},
|
24
24
|
"license": "MIT",
|
25
25
|
"devDependencies": {
|
26
|
-
"@instructure/ui-babel-preset": "8.56.5-pr-snapshot-
|
27
|
-
"@instructure/ui-color-utils": "8.56.5-pr-snapshot-
|
28
|
-
"@instructure/ui-test-utils": "8.56.5-pr-snapshot-
|
29
|
-
"@instructure/ui-themes": "8.56.5-pr-snapshot-
|
26
|
+
"@instructure/ui-babel-preset": "8.56.5-pr-snapshot-1729507712924",
|
27
|
+
"@instructure/ui-color-utils": "8.56.5-pr-snapshot-1729507712924",
|
28
|
+
"@instructure/ui-test-utils": "8.56.5-pr-snapshot-1729507712924",
|
29
|
+
"@instructure/ui-themes": "8.56.5-pr-snapshot-1729507712924"
|
30
30
|
},
|
31
31
|
"dependencies": {
|
32
32
|
"@babel/runtime": "^7.23.2",
|
33
|
-
"@instructure/console": "8.56.5-pr-snapshot-
|
34
|
-
"@instructure/emotion": "8.56.5-pr-snapshot-
|
35
|
-
"@instructure/shared-types": "8.56.5-pr-snapshot-
|
36
|
-
"@instructure/ui-a11y-content": "8.56.5-pr-snapshot-
|
37
|
-
"@instructure/ui-icons": "8.56.5-pr-snapshot-
|
38
|
-
"@instructure/ui-prop-types": "8.56.5-pr-snapshot-
|
39
|
-
"@instructure/ui-react-utils": "8.56.5-pr-snapshot-
|
40
|
-
"@instructure/ui-simple-select": "8.56.5-pr-snapshot-
|
41
|
-
"@instructure/ui-testable": "8.56.5-pr-snapshot-
|
42
|
-
"@instructure/ui-utils": "8.56.5-pr-snapshot-
|
43
|
-
"@instructure/ui-view": "8.56.5-pr-snapshot-
|
33
|
+
"@instructure/console": "8.56.5-pr-snapshot-1729507712924",
|
34
|
+
"@instructure/emotion": "8.56.5-pr-snapshot-1729507712924",
|
35
|
+
"@instructure/shared-types": "8.56.5-pr-snapshot-1729507712924",
|
36
|
+
"@instructure/ui-a11y-content": "8.56.5-pr-snapshot-1729507712924",
|
37
|
+
"@instructure/ui-icons": "8.56.5-pr-snapshot-1729507712924",
|
38
|
+
"@instructure/ui-prop-types": "8.56.5-pr-snapshot-1729507712924",
|
39
|
+
"@instructure/ui-react-utils": "8.56.5-pr-snapshot-1729507712924",
|
40
|
+
"@instructure/ui-simple-select": "8.56.5-pr-snapshot-1729507712924",
|
41
|
+
"@instructure/ui-testable": "8.56.5-pr-snapshot-1729507712924",
|
42
|
+
"@instructure/ui-utils": "8.56.5-pr-snapshot-1729507712924",
|
43
|
+
"@instructure/ui-view": "8.56.5-pr-snapshot-1729507712924",
|
44
44
|
"prop-types": "^15.8.1"
|
45
45
|
},
|
46
46
|
"peerDependencies": {
|