@instructure/ui-table 11.7.9-snapshot-0 → 11.7.9-snapshot-2
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/v1/Body/index.js +3 -4
- package/lib/Table/v1/Cell/index.js +3 -4
- package/lib/Table/v1/ColHeader/index.js +7 -10
- package/lib/Table/v1/Head/index.js +7 -8
- package/lib/Table/v1/Row/index.js +3 -4
- package/lib/Table/v1/RowHeader/index.js +3 -4
- package/lib/Table/v1/index.js +5 -6
- package/lib/Table/v2/Body/index.js +3 -4
- package/lib/Table/v2/Cell/index.js +3 -4
- package/lib/Table/v2/ColHeader/index.js +3 -4
- package/lib/Table/v2/Head/index.js +4 -5
- package/lib/Table/v2/Row/index.js +3 -4
- package/lib/Table/v2/RowHeader/index.js +3 -4
- package/lib/Table/v2/index.js +5 -6
- package/package.json +15 -15
- package/tsconfig.build.tsbuildinfo +1 -1
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
|
-
## [11.7.9-snapshot-
|
|
6
|
+
## [11.7.9-snapshot-2](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-snapshot-2) (2026-10-12)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-table
|
|
9
9
|
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Body = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
10
|
var _v11_ = require("@instructure/ui-view/v11_6");
|
|
12
11
|
var _emotion = require("@instructure/emotion");
|
|
13
12
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
@@ -68,13 +67,13 @@ let Body = exports.Body = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
|
68
67
|
isStacked
|
|
69
68
|
} = this.context;
|
|
70
69
|
return (0, _jsxRuntime.jsx)(_v11_.View, {
|
|
71
|
-
..._v11_.View.omitViewProps((0,
|
|
70
|
+
..._v11_.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Body.allowedProps), Body),
|
|
72
71
|
as: isStacked ? 'div' : 'tbody',
|
|
73
72
|
css: styles?.body,
|
|
74
73
|
role: isStacked ? 'rowgroup' : undefined,
|
|
75
74
|
children: _react.Children.map(children, child => {
|
|
76
75
|
if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
|
|
77
|
-
return (0,
|
|
76
|
+
return (0, _uiReactUtils.safeCloneElement)(child, {
|
|
78
77
|
key: child.props.name
|
|
79
78
|
});
|
|
80
79
|
}
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Cell = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
10
|
var _v11_ = require("@instructure/ui-view/v11_6");
|
|
12
11
|
var _emotion = require("@instructure/emotion");
|
|
13
12
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
@@ -68,11 +67,11 @@ let Cell = exports.Cell = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
|
68
67
|
} = this.props;
|
|
69
68
|
const isStacked = this.context.isStacked;
|
|
70
69
|
return (0, _jsxRuntime.jsxs)(_v11_.View, {
|
|
71
|
-
..._v11_.View.omitViewProps((0,
|
|
70
|
+
..._v11_.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Cell.allowedProps), Cell),
|
|
72
71
|
as: isStacked ? 'div' : 'td',
|
|
73
72
|
css: styles?.cell,
|
|
74
73
|
role: isStacked ? 'cell' : undefined,
|
|
75
|
-
children: [header && (0,
|
|
74
|
+
children: [header && (0, _uiReactUtils.callRenderProp)(header), header && ': ', (0, _uiReactUtils.callRenderProp)(children)]
|
|
76
75
|
});
|
|
77
76
|
}
|
|
78
77
|
}) || _class);
|
|
@@ -6,11 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.ColHeader = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var _IconMiniArrowUpLine = require("@instructure/ui-icons/lib/generated/IconMiniArrowUpLine.js");
|
|
12
|
-
var _IconMiniArrowDownLine = require("@instructure/ui-icons/lib/generated/IconMiniArrowDownLine.js");
|
|
13
|
-
var _IconMiniArrowDoubleLine = require("@instructure/ui-icons/lib/generated/IconMiniArrowDoubleLine.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
10
|
+
var _uiIcons = require("@instructure/ui-icons");
|
|
14
11
|
var _emotion = require("@instructure/emotion");
|
|
15
12
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
16
13
|
var _theme = _interopRequireDefault(require("./theme.js"));
|
|
@@ -78,17 +75,17 @@ let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
|
78
75
|
styles
|
|
79
76
|
} = this.props;
|
|
80
77
|
if (sortDirection === 'ascending') {
|
|
81
|
-
return (0, _jsxRuntime.jsx)(
|
|
78
|
+
return (0, _jsxRuntime.jsx)(_uiIcons.IconMiniArrowUpLine, {
|
|
82
79
|
css: styles?.sortedIconColor
|
|
83
80
|
});
|
|
84
81
|
}
|
|
85
82
|
if (sortDirection === 'descending') {
|
|
86
|
-
return (0, _jsxRuntime.jsx)(
|
|
83
|
+
return (0, _jsxRuntime.jsx)(_uiIcons.IconMiniArrowDownLine, {
|
|
87
84
|
css: styles?.sortedIconColor
|
|
88
85
|
});
|
|
89
86
|
}
|
|
90
87
|
if (onRequestSort) {
|
|
91
|
-
return (0, _jsxRuntime.jsx)(
|
|
88
|
+
return (0, _jsxRuntime.jsx)(_uiIcons.IconMiniArrowDoubleLine, {
|
|
92
89
|
css: styles?.unSortedIconColor
|
|
93
90
|
});
|
|
94
91
|
}
|
|
@@ -104,7 +101,7 @@ let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
|
104
101
|
styles
|
|
105
102
|
} = this.props;
|
|
106
103
|
return (0, _jsxRuntime.jsxs)("th", {
|
|
107
|
-
...(0,
|
|
104
|
+
...(0, _uiReactUtils.omitProps)(this.props, ColHeader.allowedProps),
|
|
108
105
|
css: styles?.colHeader,
|
|
109
106
|
style: {
|
|
110
107
|
width
|
|
@@ -116,7 +113,7 @@ let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
|
116
113
|
css: styles?.button,
|
|
117
114
|
children: (0, _jsxRuntime.jsxs)("div", {
|
|
118
115
|
css: styles?.buttonContent,
|
|
119
|
-
children: [(0,
|
|
116
|
+
children: [(0, _uiReactUtils.callRenderProp)(children), this.renderSortArrow()]
|
|
120
117
|
})
|
|
121
118
|
}), !onRequestSort && children, !onRequestSort && this.renderSortArrow()]
|
|
122
119
|
});
|
|
@@ -6,11 +6,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Head = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
10
|
var _v11_ = require("@instructure/ui-simple-select/v11_6");
|
|
12
|
-
var
|
|
13
|
-
var
|
|
11
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
12
|
+
var _uiIcons = require("@instructure/ui-icons");
|
|
14
13
|
var _console = require("@instructure/console");
|
|
15
14
|
var _emotion = require("@instructure/emotion");
|
|
16
15
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
@@ -142,8 +141,8 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
|
142
141
|
role: "cell",
|
|
143
142
|
"aria-colspan": count,
|
|
144
143
|
children: (0, _jsxRuntime.jsx)(_v11_.SimpleSelect, {
|
|
145
|
-
renderLabel: renderSortLabel ? (0,
|
|
146
|
-
renderBeforeInput: selectedOption &&
|
|
144
|
+
renderLabel: renderSortLabel ? (0, _uiReactUtils.callRenderProp)(renderSortLabel) : (0, _jsxRuntime.jsx)(_uiA11yContent.ScreenReaderContent, {}),
|
|
145
|
+
renderBeforeInput: selectedOption && _uiIcons.IconCheckLine,
|
|
147
146
|
value: selectedOption,
|
|
148
147
|
onChange: handleSelect,
|
|
149
148
|
children: options.map(({
|
|
@@ -152,7 +151,7 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
|
152
151
|
}) => (0, _jsxRuntime.jsx)(_v11_.SimpleSelect.Option, {
|
|
153
152
|
id: id,
|
|
154
153
|
value: id,
|
|
155
|
-
renderBeforeLabel: id === selectedOption ?
|
|
154
|
+
renderBeforeLabel: id === selectedOption ? _uiIcons.IconCheckLine : () => (0, _jsxRuntime.jsx)(_uiIcons.IconCheckLine, {
|
|
156
155
|
style: {
|
|
157
156
|
color: 'transparent'
|
|
158
157
|
}
|
|
@@ -170,7 +169,7 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyle)(_styles.default, _them
|
|
|
170
169
|
styles
|
|
171
170
|
} = this.props;
|
|
172
171
|
return this.context.isStacked ? this.renderSelect() : (0, _jsxRuntime.jsx)("thead", {
|
|
173
|
-
...(0,
|
|
172
|
+
...(0, _uiReactUtils.omitProps)(this.props, Head.allowedProps),
|
|
174
173
|
css: styles?.head,
|
|
175
174
|
children: children
|
|
176
175
|
});
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Row = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
10
|
var _v11_ = require("@instructure/ui-view/v11_6");
|
|
12
11
|
var _emotion = require("@instructure/emotion");
|
|
13
12
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
@@ -73,13 +72,13 @@ let Row = exports.Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
|
|
|
73
72
|
const isStacked = this.context.isStacked;
|
|
74
73
|
const headers = this.context.headers;
|
|
75
74
|
return (0, _jsxRuntime.jsx)(_v11_.View, {
|
|
76
|
-
..._v11_.View.omitViewProps((0,
|
|
75
|
+
..._v11_.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Row.allowedProps), Row),
|
|
77
76
|
as: isStacked ? 'div' : 'tr',
|
|
78
77
|
css: styles?.row,
|
|
79
78
|
role: isStacked ? 'row' : undefined,
|
|
80
79
|
children: _react.Children.toArray(children).filter(Boolean).map((child, index) => {
|
|
81
80
|
if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
|
|
82
|
-
return (0,
|
|
81
|
+
return (0, _uiReactUtils.safeCloneElement)(child, {
|
|
83
82
|
key: child.props.name,
|
|
84
83
|
// used by `Cell` to render its column title in `stacked` layout
|
|
85
84
|
header: headers && headers[index]
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.RowHeader = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
10
|
var _v11_ = require("@instructure/ui-view/v11_6");
|
|
12
11
|
var _emotion = require("@instructure/emotion");
|
|
13
12
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
@@ -67,12 +66,12 @@ let RowHeader = exports.RowHeader = (_dec = (0, _emotion.withStyle)(_styles.defa
|
|
|
67
66
|
} = this.props;
|
|
68
67
|
const isStacked = this.context.isStacked;
|
|
69
68
|
return (0, _jsxRuntime.jsx)(_v11_.View, {
|
|
70
|
-
..._v11_.View.omitViewProps((0,
|
|
69
|
+
..._v11_.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, RowHeader.allowedProps), RowHeader),
|
|
71
70
|
as: isStacked ? 'div' : 'th',
|
|
72
71
|
css: styles?.rowHeader,
|
|
73
72
|
scope: "row",
|
|
74
73
|
role: isStacked ? 'rowheader' : undefined,
|
|
75
|
-
children: (0,
|
|
74
|
+
children: (0, _uiReactUtils.callRenderProp)(children)
|
|
76
75
|
});
|
|
77
76
|
}
|
|
78
77
|
}) || _class);
|
package/lib/Table/v1/index.js
CHANGED
|
@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Table = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
10
|
var _v11_ = require("@instructure/ui-view/v11_6");
|
|
12
|
-
var
|
|
11
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
13
12
|
var _emotion = require("@instructure/emotion");
|
|
14
13
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
15
14
|
var _theme = _interopRequireDefault(require("./theme.js"));
|
|
@@ -188,7 +187,7 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyle)(_styles.default, _th
|
|
|
188
187
|
}), (0, _jsxRuntime.jsxs)(_v11_.View
|
|
189
188
|
// All HTML props, except the ones accepted by `View` and `Table`
|
|
190
189
|
, {
|
|
191
|
-
..._v11_.View.omitViewProps((0,
|
|
190
|
+
..._v11_.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Table.allowedProps), Table),
|
|
192
191
|
minWidth: minWidth,
|
|
193
192
|
as: isStacked ? 'div' : 'table',
|
|
194
193
|
margin: margin,
|
|
@@ -197,10 +196,10 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyle)(_styles.default, _th
|
|
|
197
196
|
role: isStacked ? 'table' : undefined,
|
|
198
197
|
"aria-label": captionText,
|
|
199
198
|
children: [!isStacked && caption && (0, _jsxRuntime.jsx)("caption", {
|
|
200
|
-
children: (0, _jsxRuntime.jsx)(
|
|
199
|
+
children: (0, _jsxRuntime.jsx)(_uiA11yContent.ScreenReaderContent, {
|
|
201
200
|
children: captionText
|
|
202
201
|
})
|
|
203
|
-
}), _react.Children.map(children, child => /*#__PURE__*/(0, _react.isValidElement)(child) ? (0,
|
|
202
|
+
}), _react.Children.map(children, child => /*#__PURE__*/(0, _react.isValidElement)(child) ? (0, _uiReactUtils.safeCloneElement)(child, {
|
|
204
203
|
key: child.props.name
|
|
205
204
|
}) : child)]
|
|
206
205
|
})]
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Body = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
10
|
var _latest = require("@instructure/ui-view/latest");
|
|
12
11
|
var _emotion = require("@instructure/emotion");
|
|
13
12
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
@@ -67,13 +66,13 @@ let Body = exports.Body = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
|
|
|
67
66
|
isStacked
|
|
68
67
|
} = this.context;
|
|
69
68
|
return (0, _jsxRuntime.jsx)(_latest.View, {
|
|
70
|
-
..._latest.View.omitViewProps((0,
|
|
69
|
+
..._latest.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Body.allowedProps), Body),
|
|
71
70
|
as: isStacked ? 'div' : 'tbody',
|
|
72
71
|
css: styles?.body,
|
|
73
72
|
role: isStacked ? 'rowgroup' : undefined,
|
|
74
73
|
children: _react.Children.map(children, child => {
|
|
75
74
|
if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
|
|
76
|
-
return (0,
|
|
75
|
+
return (0, _uiReactUtils.safeCloneElement)(child, {
|
|
77
76
|
key: child.props.name
|
|
78
77
|
});
|
|
79
78
|
}
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Cell = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
10
|
var _latest = require("@instructure/ui-view/latest");
|
|
12
11
|
var _emotion = require("@instructure/emotion");
|
|
13
12
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
@@ -67,11 +66,11 @@ let Cell = exports.Cell = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
|
|
|
67
66
|
} = this.props;
|
|
68
67
|
const isStacked = this.context.isStacked;
|
|
69
68
|
return (0, _jsxRuntime.jsxs)(_latest.View, {
|
|
70
|
-
..._latest.View.omitViewProps((0,
|
|
69
|
+
..._latest.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Cell.allowedProps), Cell),
|
|
71
70
|
as: isStacked ? 'div' : 'td',
|
|
72
71
|
css: styles?.cell,
|
|
73
72
|
role: isStacked ? 'cell' : undefined,
|
|
74
|
-
children: [header && (0,
|
|
73
|
+
children: [header && (0, _uiReactUtils.callRenderProp)(header), header && ': ', (0, _uiReactUtils.callRenderProp)(children)]
|
|
75
74
|
});
|
|
76
75
|
}
|
|
77
76
|
}) || _class);
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.ColHeader = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
10
|
var _emotion = require("@instructure/emotion");
|
|
12
11
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
13
12
|
var _props = require("./props.js");
|
|
@@ -103,7 +102,7 @@ let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyleNew)(_styles.d
|
|
|
103
102
|
styles
|
|
104
103
|
} = this.props;
|
|
105
104
|
return (0, _jsxRuntime.jsxs)("th", {
|
|
106
|
-
...(0,
|
|
105
|
+
...(0, _uiReactUtils.omitProps)(this.props, ColHeader.allowedProps),
|
|
107
106
|
css: styles?.colHeader,
|
|
108
107
|
style: {
|
|
109
108
|
width
|
|
@@ -115,7 +114,7 @@ let ColHeader = exports.ColHeader = (_dec = (0, _emotion.withStyleNew)(_styles.d
|
|
|
115
114
|
css: styles?.button,
|
|
116
115
|
children: (0, _jsxRuntime.jsxs)("div", {
|
|
117
116
|
css: styles?.buttonContent,
|
|
118
|
-
children: [(0,
|
|
117
|
+
children: [(0, _uiReactUtils.callRenderProp)(children), this.renderSortArrow()]
|
|
119
118
|
})
|
|
120
119
|
}), !onRequestSort && children, !onRequestSort && this.renderSortArrow()]
|
|
121
120
|
});
|
|
@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Head = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
10
|
var _latest = require("@instructure/ui-simple-select/latest");
|
|
12
|
-
var
|
|
11
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
13
12
|
var _uiIcons = require("@instructure/ui-icons");
|
|
14
13
|
var _console = require("@instructure/console");
|
|
15
14
|
var _emotion = require("@instructure/emotion");
|
|
@@ -141,7 +140,7 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
|
|
|
141
140
|
role: "cell",
|
|
142
141
|
"aria-colspan": count,
|
|
143
142
|
children: (0, _jsxRuntime.jsx)(_latest.SimpleSelect, {
|
|
144
|
-
renderLabel: renderSortLabel ? (0,
|
|
143
|
+
renderLabel: renderSortLabel ? (0, _uiReactUtils.callRenderProp)(renderSortLabel) : (0, _jsxRuntime.jsx)(_uiA11yContent.ScreenReaderContent, {}),
|
|
145
144
|
renderBeforeInput: selectedOption ? () => (0, _jsxRuntime.jsx)(_uiIcons.CheckInstUIIcon, {}) : undefined,
|
|
146
145
|
value: selectedOption,
|
|
147
146
|
onChange: handleSelect,
|
|
@@ -170,7 +169,7 @@ let Head = exports.Head = (_dec = (0, _emotion.withStyleNew)(_styles.default), _
|
|
|
170
169
|
styles
|
|
171
170
|
} = this.props;
|
|
172
171
|
return this.context.isStacked ? this.renderSelect() : (0, _jsxRuntime.jsx)("thead", {
|
|
173
|
-
...(0,
|
|
172
|
+
...(0, _uiReactUtils.omitProps)(this.props, Head.allowedProps),
|
|
174
173
|
css: styles?.head,
|
|
175
174
|
children: children
|
|
176
175
|
});
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Row = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
10
|
var _latest = require("@instructure/ui-view/latest");
|
|
12
11
|
var _emotion = require("@instructure/emotion");
|
|
13
12
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
@@ -74,14 +73,14 @@ id: Table.Row
|
|
|
74
73
|
}
|
|
75
74
|
};
|
|
76
75
|
return (0, _jsxRuntime.jsx)(_latest.View, {
|
|
77
|
-
..._latest.View.omitViewProps((0,
|
|
76
|
+
..._latest.View.omitViewProps((0, _uiReactUtils.omitProps)(props, _props.allowedProps), Row),
|
|
78
77
|
as: isStacked ? 'div' : 'tr',
|
|
79
78
|
css: styles?.row,
|
|
80
79
|
role: isStacked ? 'row' : undefined,
|
|
81
80
|
elementRef: handleElementRef,
|
|
82
81
|
children: _react.Children.toArray(children).filter(Boolean).map((child, index) => {
|
|
83
82
|
if (/*#__PURE__*/(0, _react.isValidElement)(child)) {
|
|
84
|
-
return (0,
|
|
83
|
+
return (0, _uiReactUtils.safeCloneElement)(child, {
|
|
85
84
|
key: child.props.name,
|
|
86
85
|
// used by `Cell` to render its column title in `stacked` layout
|
|
87
86
|
header: headers && headers[index]
|
|
@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.RowHeader = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
10
|
var _latest = require("@instructure/ui-view/latest");
|
|
12
11
|
var _emotion = require("@instructure/emotion");
|
|
13
12
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
@@ -66,12 +65,12 @@ let RowHeader = exports.RowHeader = (_dec = (0, _emotion.withStyleNew)(_styles.d
|
|
|
66
65
|
} = this.props;
|
|
67
66
|
const isStacked = this.context.isStacked;
|
|
68
67
|
return (0, _jsxRuntime.jsx)(_latest.View, {
|
|
69
|
-
..._latest.View.omitViewProps((0,
|
|
68
|
+
..._latest.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, RowHeader.allowedProps), RowHeader),
|
|
70
69
|
as: isStacked ? 'div' : 'th',
|
|
71
70
|
css: styles?.rowHeader,
|
|
72
71
|
scope: "row",
|
|
73
72
|
role: isStacked ? 'rowheader' : undefined,
|
|
74
|
-
children: (0,
|
|
73
|
+
children: (0, _uiReactUtils.callRenderProp)(children)
|
|
75
74
|
});
|
|
76
75
|
}
|
|
77
76
|
}) || _class);
|
package/lib/Table/v2/index.js
CHANGED
|
@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.Table = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
11
10
|
var _latest = require("@instructure/ui-view/latest");
|
|
12
|
-
var
|
|
11
|
+
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
13
12
|
var _emotion = require("@instructure/emotion");
|
|
14
13
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
15
14
|
var _index = require("./Head/index.js");
|
|
@@ -169,7 +168,7 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyleNew)(_styles.default),
|
|
|
169
168
|
}), (0, _jsxRuntime.jsxs)(_latest.View
|
|
170
169
|
// All HTML props, except the ones accepted by `View` and `Table`
|
|
171
170
|
, {
|
|
172
|
-
..._latest.View.omitViewProps((0,
|
|
171
|
+
..._latest.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Table.allowedProps), Table),
|
|
173
172
|
minWidth: minWidth,
|
|
174
173
|
as: isStacked ? 'div' : 'table',
|
|
175
174
|
margin: margin,
|
|
@@ -178,10 +177,10 @@ let Table = exports.Table = (_dec = (0, _emotion.withStyleNew)(_styles.default),
|
|
|
178
177
|
role: isStacked ? 'table' : undefined,
|
|
179
178
|
"aria-label": captionText,
|
|
180
179
|
children: [!isStacked && captionText && (0, _jsxRuntime.jsx)("caption", {
|
|
181
|
-
children: (0, _jsxRuntime.jsx)(
|
|
180
|
+
children: (0, _jsxRuntime.jsx)(_uiA11yContent.ScreenReaderContent, {
|
|
182
181
|
children: captionText
|
|
183
182
|
})
|
|
184
|
-
}), _react.Children.map(children, child => /*#__PURE__*/(0, _react.isValidElement)(child) ? (0,
|
|
183
|
+
}), _react.Children.map(children, child => /*#__PURE__*/(0, _react.isValidElement)(child) ? (0, _uiReactUtils.safeCloneElement)(child, {
|
|
185
184
|
key: child.props.name
|
|
186
185
|
}) : child)]
|
|
187
186
|
})]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-table",
|
|
3
|
-
"version": "11.7.9-snapshot-
|
|
3
|
+
"version": "11.7.9-snapshot-2",
|
|
4
4
|
"description": "A styled HTML table component",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -15,22 +15,22 @@
|
|
|
15
15
|
"license": "MIT",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@babel/runtime": "^7.29.7",
|
|
18
|
-
"@instructure/console": "11.7.9-snapshot-
|
|
19
|
-
"@instructure/emotion": "11.7.9-snapshot-
|
|
20
|
-
"@instructure/
|
|
21
|
-
"@instructure/ui-
|
|
22
|
-
"@instructure/
|
|
23
|
-
"@instructure/ui-react-utils": "11.7.9-snapshot-
|
|
24
|
-
"@instructure/ui-simple-select": "11.7.9-snapshot-
|
|
25
|
-
"@instructure/ui-
|
|
26
|
-
"@instructure/ui-
|
|
27
|
-
"@instructure/ui-view": "11.7.9-snapshot-
|
|
18
|
+
"@instructure/console": "11.7.9-snapshot-2",
|
|
19
|
+
"@instructure/emotion": "11.7.9-snapshot-2",
|
|
20
|
+
"@instructure/shared-types": "11.7.9-snapshot-2",
|
|
21
|
+
"@instructure/ui-a11y-content": "11.7.9-snapshot-2",
|
|
22
|
+
"@instructure/ui-icons": "11.7.9-snapshot-2",
|
|
23
|
+
"@instructure/ui-react-utils": "11.7.9-snapshot-2",
|
|
24
|
+
"@instructure/ui-simple-select": "11.7.9-snapshot-2",
|
|
25
|
+
"@instructure/ui-themes": "11.7.9-snapshot-2",
|
|
26
|
+
"@instructure/ui-utils": "11.7.9-snapshot-2",
|
|
27
|
+
"@instructure/ui-view": "11.7.9-snapshot-2"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"
|
|
31
|
-
"@instructure/ui-
|
|
32
|
-
"@instructure/ui-
|
|
33
|
-
"
|
|
30
|
+
"@instructure/ui-axe-check": "11.7.9-snapshot-2",
|
|
31
|
+
"@instructure/ui-babel-preset": "11.7.9-snapshot-2",
|
|
32
|
+
"@instructure/ui-color-utils": "11.7.9-snapshot-2",
|
|
33
|
+
"vitest": "^5.0.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": ">=18 <=19"
|