New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@instructure/ui-table

Package Overview
Dependencies
Maintainers
34
Versions
1570
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@instructure/ui-table - npm Package Compare versions

Comparing version

5.52.3-rc.31
to
5.52.3-rc.32

2

es/Table/Body/index.js

@@ -49,3 +49,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";

---
parent: TableControlled
parent: Table
---

@@ -52,0 +52,0 @@ **/

2

es/Table/Cell/index.js

@@ -52,3 +52,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

---
parent: TableControlled
parent: Table
---

@@ -55,0 +55,0 @@ **/

2

es/Table/ColHeader/index.js

@@ -57,3 +57,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

---
parent: TableControlled
parent: Table
---

@@ -60,0 +60,0 @@ **/

2

es/Table/Head/index.js

@@ -52,3 +52,3 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";

---
parent: TableControlled
parent: Table
---

@@ -55,0 +55,0 @@ **/

1

es/Table/index.js

@@ -60,3 +60,2 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

category: components
id: TableControlled
---

@@ -63,0 +62,0 @@ **/

2

es/Table/Row/index.js

@@ -55,3 +55,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

---
parent: TableControlled
parent: Table
---

@@ -58,0 +58,0 @@ **/

2

es/Table/RowHeader/index.js

@@ -52,3 +52,3 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

---
parent: TableControlled
parent: Table
---

@@ -55,0 +55,0 @@ **/

22

lib/Table/Body/index.js

@@ -26,10 +26,14 @@ "use strict";

var _uiThemeable = require("@instructure/ui-themeable");
var _themeable = require("@instructure/ui-themeable/lib/themeable");
var _uiReactUtils = require("@instructure/ui-react-utils");
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes");
var _uiPropTypes = require("@instructure/ui-prop-types");
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement");
var _uiLayout = require("@instructure/ui-layout");
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps");
var _Children = require("@instructure/ui-prop-types/lib/Children");
var _View = require("@instructure/ui-layout/lib/View");
var _Row = require("../Row");

@@ -51,6 +55,6 @@

---
parent: TableControlled
parent: Table
---
**/
var Body = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
var Body = (_dec = (0, _themeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/

@@ -75,3 +79,3 @@ function (_Component) {

headers = _this$props.headers;
return _react.default.createElement(_uiLayout.View, Object.assign({}, _uiLayout.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Body.propTypes), Body), {
return _react.default.createElement(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Body.propTypes), Body), {
as: isStacked ? 'div' : 'tbody',

@@ -81,3 +85,3 @@ className: styles.root,

}), _react.Children.map(children, function (child) {
return (0, _uiReactUtils.matchComponentTypes)(child, [_Row.Row]) ? (0, _uiReactUtils.safeCloneElement)(child, {
return (0, _matchComponentTypes.matchComponentTypes)(child, [_Row.Row]) ? (0, _safeCloneElement.safeCloneElement)(child, {
key: child.props.name,

@@ -97,3 +101,3 @@ hover: hover,

*/
children: _uiPropTypes.Children.oneOf([_Row.Row]),
children: _Children.Children.oneOf([_Row.Row]),
hover: _propTypes.default.bool,

@@ -100,0 +104,0 @@ isStacked: _propTypes.default.bool,

16

lib/Table/Cell/index.js

@@ -30,8 +30,10 @@ "use strict";

var _uiThemeable = require("@instructure/ui-themeable");
var _themeable = require("@instructure/ui-themeable/lib/themeable");
var _uiReactUtils = require("@instructure/ui-react-utils");
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps");
var _uiLayout = require("@instructure/ui-layout");
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp");
var _View = require("@instructure/ui-layout/lib/View");
var _theme = _interopRequireDefault(require("./theme"));

@@ -54,6 +56,6 @@

---
parent: TableControlled
parent: Table
---
**/
var Cell = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
var Cell = (_dec = (0, _themeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/

@@ -80,7 +82,7 @@ function (_Component) {

header = _this$props.header;
return _react.default.createElement(_uiLayout.View, Object.assign({}, _uiLayout.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Cell.propTypes), Cell), {
return _react.default.createElement(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Cell.propTypes), Cell), {
as: isStacked ? 'div' : 'td',
className: (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, styles.root, true), (0, _defineProperty2.default)(_classnames, styles["textAlign--".concat(textAlign)], textAlign), _classnames)),
role: isStacked ? "cell" : null
}), header && (0, _uiReactUtils.callRenderProp)(header), header && ': ', (0, _uiReactUtils.callRenderProp)(children));
}), header && (0, _callRenderProp.callRenderProp)(header), header && ': ', (0, _callRenderProp.callRenderProp)(children));
}

@@ -87,0 +89,0 @@ }]);

24

lib/Table/ColHeader/index.js

@@ -30,8 +30,12 @@ "use strict";

var _uiThemeable = require("@instructure/ui-themeable");
var _themeable = require("@instructure/ui-themeable/lib/themeable");
var _uiReactUtils = require("@instructure/ui-react-utils");
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps");
var _uiIcons = require("@instructure/ui-icons");
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp");
var _IconMiniArrowUpLine = require("@instructure/ui-icons/lib/IconMiniArrowUpLine");
var _IconMiniArrowDownLine = require("@instructure/ui-icons/lib/IconMiniArrowDownLine");
var _theme = _interopRequireDefault(require("./theme"));

@@ -59,14 +63,14 @@

/*#__PURE__*/
_react.default.createElement(_uiIcons.IconMiniArrowUpLine, null);
_react.default.createElement(_IconMiniArrowUpLine.IconMiniArrowUpLine, null);
var _ref2 =
/*#__PURE__*/
_react.default.createElement(_uiIcons.IconMiniArrowDownLine, null);
_react.default.createElement(_IconMiniArrowDownLine.IconMiniArrowDownLine, null);
/**
---
parent: TableControlled
parent: Table
---
**/
var ColHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
var ColHeader = (_dec = (0, _themeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/

@@ -118,3 +122,3 @@ function (_Component) {

// Reserve a space for arrow to keep column width consistent
return _react.default.createElement(_uiIcons.IconMiniArrowUpLine, {
return _react.default.createElement(_IconMiniArrowUpLine.IconMiniArrowUpLine, {
style: {

@@ -138,3 +142,3 @@ color: 'transparent'

children = _this$props3.children;
return _react.default.createElement("th", Object.assign({}, (0, _uiReactUtils.omitProps)(this.props, ColHeader.propTypes), {
return _react.default.createElement("th", Object.assign({}, (0, _omitProps.omitProps)(this.props, ColHeader.propTypes), {
className: (0, _classnames3.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, styles.root, true), (0, _defineProperty2.default)(_classnames, styles.header, !onRequestSort), (0, _defineProperty2.default)(_classnames, styles["textAlign--".concat(textAlign)], true), _classnames)),

@@ -148,3 +152,3 @@ style: {

className: (0, _classnames3.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, styles.header, true), (0, _defineProperty2.default)(_classnames2, styles.button, true), (0, _defineProperty2.default)(_classnames2, styles["flexDirection--".concat(textAlign)], true), _classnames2))
}, (0, _uiReactUtils.callRenderProp)(children), _react.default.createElement("div", null, this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
}, (0, _callRenderProp.callRenderProp)(children), _react.default.createElement("div", null, this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
}

@@ -151,0 +155,0 @@ }]);

32

lib/Table/Head/index.js

@@ -28,12 +28,14 @@ "use strict";

var _uiThemeable = require("@instructure/ui-themeable");
var _themeable = require("@instructure/ui-themeable/lib/themeable");
var _uiReactUtils = require("@instructure/ui-react-utils");
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps");
var _uiPropTypes = require("@instructure/ui-prop-types");
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes");
var _uiForms = require("@instructure/ui-forms");
var _Children = require("@instructure/ui-prop-types/lib/Children");
var _uiIcons = require("@instructure/ui-icons");
var _Select = require("@instructure/ui-forms/lib/Select");
var _IconCheckLine = require("@instructure/ui-icons/lib/IconCheckLine");
var _theme = _interopRequireDefault(require("./theme"));

@@ -57,6 +59,6 @@

---
parent: TableControlled
parent: Table
---
**/
var Head = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
var Head = (_dec = (0, _themeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/

@@ -82,3 +84,3 @@ function (_Component) {

if (!(0, _uiReactUtils.matchComponentTypes)(row, [_Row.Row])) {
if (!(0, _matchComponentTypes.matchComponentTypes)(row, [_Row.Row])) {
return null;

@@ -95,3 +97,3 @@ }

if ((0, _uiReactUtils.matchComponentTypes)(colHeader, [_ColHeader.ColHeader])) {
if ((0, _matchComponentTypes.matchComponentTypes)(colHeader, [_ColHeader.ColHeader])) {
var _colHeader$props = colHeader.props,

@@ -131,3 +133,3 @@ id = _colHeader$props.id,

"aria-colspan": count
}, _react.default.createElement(_uiForms.Select, {
}, _react.default.createElement(_Select.Select, {
label: "",

@@ -140,4 +142,4 @@ selectedOption: selectedOption,

value: option,
icon: option === selectedOption ? _uiIcons.IconCheckLine : function () {
return _react.default.createElement(_uiIcons.IconCheckLine, {
icon: option === selectedOption ? _IconCheckLine.IconCheckLine : function () {
return _react.default.createElement(_IconCheckLine.IconCheckLine, {
style: {

@@ -157,6 +159,6 @@ color: 'transparent'

isStacked = _this$props.isStacked;
return isStacked ? this.renderSelect() : _react.default.createElement("thead", Object.assign({}, (0, _uiReactUtils.omitProps)(this.props, Head.propTypes), {
return isStacked ? this.renderSelect() : _react.default.createElement("thead", Object.assign({}, (0, _omitProps.omitProps)(this.props, Head.propTypes), {
className: styles.root
}), _react.Children.map(children, function (child) {
return (0, _uiReactUtils.matchComponentTypes)(child, [_Row.Row]) ? child : null;
return (0, _matchComponentTypes.matchComponentTypes)(child, [_Row.Row]) ? child : null;
}));

@@ -171,3 +173,3 @@ }

*/
children: _uiPropTypes.Children.oneOf([_Row.Row]),
children: _Children.Children.oneOf([_Row.Row]),
isStacked: _propTypes.default.bool

@@ -174,0 +176,0 @@ /* eslint-enable react/require-default-props */

45

lib/Table/index.js

@@ -32,12 +32,20 @@ "use strict";

var _uiThemeable = require("@instructure/ui-themeable");
var _themeable = require("@instructure/ui-themeable/lib/themeable");
var _uiReactUtils = require("@instructure/ui-react-utils");
var _ThemeablePropTypes = require("@instructure/ui-themeable/lib/ThemeablePropTypes");
var _uiPropTypes = require("@instructure/ui-prop-types");
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes");
var _uiA11y = require("@instructure/ui-a11y");
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement");
var _uiLayout = require("@instructure/ui-layout");
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps");
var _deprecated = require("@instructure/ui-react-utils/lib/deprecated");
var _Children = require("@instructure/ui-prop-types/lib/Children");
var _ScreenReaderContent = require("@instructure/ui-a11y/lib/ScreenReaderContent");
var _View = require("@instructure/ui-layout/lib/View");
var _theme = _interopRequireDefault(require("./theme"));

@@ -71,8 +79,7 @@

category: components
id: TableControlled
---
**/
var Table = (_dec = (0, _uiReactUtils.deprecated)('7.0', {
var Table = (_dec = (0, _deprecated.deprecated)('7.0', {
mode: true
}), _dec2 = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = _dec2(_class = (_temp = _class2 =
}), _dec2 = (0, _themeable.themeable)(_theme.default, styles), _dec(_class = _dec2(_class = (_temp = _class2 =
/*#__PURE__*/

@@ -96,3 +103,3 @@ function (_Component) {

if ((0, _uiReactUtils.matchComponentTypes)(head, [_Head.Head])) {
if ((0, _matchComponentTypes.matchComponentTypes)(head, [_Head.Head])) {
var _Children$toArray3 = _react.Children.toArray(head.props.children),

@@ -102,5 +109,5 @@ _Children$toArray4 = (0, _slicedToArray2.default)(_Children$toArray3, 1),

if ((0, _uiReactUtils.matchComponentTypes)(row, [_Row.Row])) {
if ((0, _matchComponentTypes.matchComponentTypes)(row, [_Row.Row])) {
return _react.Children.map(row.props.children, function (colHeader) {
return (0, _uiReactUtils.matchComponentTypes)(colHeader, [_ColHeader.ColHeader]) ? colHeader.props.children : null;
return (0, _matchComponentTypes.matchComponentTypes)(colHeader, [_ColHeader.ColHeader]) ? colHeader.props.children : null;
});

@@ -128,3 +135,3 @@ }

var headers = isStacked ? this.getHeaders() : null;
return _react.default.createElement(_uiLayout.View, Object.assign({}, _uiLayout.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Table.propTypes), Table), {
return _react.default.createElement(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Table.propTypes), Table), {
as: isStacked ? 'div' : 'table',

@@ -136,5 +143,5 @@ margin: margin,

"aria-label": isStacked ? caption : null
}), !isStacked && _react.default.createElement("caption", null, _react.default.createElement(_uiA11y.ScreenReaderContent, null, caption)), _react.Children.map(children, function (child) {
if ((0, _uiReactUtils.matchComponentTypes)(child, [_Head.Head])) {
return (0, _uiReactUtils.safeCloneElement)(child, {
}), !isStacked && _react.default.createElement("caption", null, _react.default.createElement(_ScreenReaderContent.ScreenReaderContent, null, caption)), _react.Children.map(children, function (child) {
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Head.Head])) {
return (0, _safeCloneElement.safeCloneElement)(child, {
key: child.props.name,

@@ -145,4 +152,4 @@ isStacked: isStacked

if ((0, _uiReactUtils.matchComponentTypes)(child, [_Body.Body])) {
return (0, _uiReactUtils.safeCloneElement)(child, {
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Body.Body])) {
return (0, _safeCloneElement.safeCloneElement)(child, {
key: child.props.name,

@@ -170,3 +177,3 @@ isStacked: isStacked,

*/
children: _uiPropTypes.Children.oneOf([_Head.Head, _Body.Body]),
children: _Children.Children.oneOf([_Head.Head, _Body.Body]),

@@ -178,3 +185,3 @@ /**

*/
margin: _uiThemeable.ThemeablePropTypes.spacing,
margin: _ThemeablePropTypes.ThemeablePropTypes.spacing,

@@ -181,0 +188,0 @@ /**

30

lib/Table/Row/index.js

@@ -30,10 +30,14 @@ "use strict";

var _uiThemeable = require("@instructure/ui-themeable");
var _themeable = require("@instructure/ui-themeable/lib/themeable");
var _uiReactUtils = require("@instructure/ui-react-utils");
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps");
var _uiPropTypes = require("@instructure/ui-prop-types");
var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes");
var _uiLayout = require("@instructure/ui-layout");
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement");
var _Children = require("@instructure/ui-prop-types/lib/Children");
var _View = require("@instructure/ui-layout/lib/View");
var _ColHeader = require("../ColHeader");

@@ -61,6 +65,6 @@

---
parent: TableControlled
parent: Table
---
**/
var Row = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
var Row = (_dec = (0, _themeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/

@@ -87,3 +91,3 @@ function (_Component) {

headers = _this$props.headers;
return _react.default.createElement(_uiLayout.View, Object.assign({}, _uiLayout.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Row.propTypes), Row), {
return _react.default.createElement(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Row.propTypes), Row), {
as: isStacked ? 'div' : 'tr',

@@ -93,8 +97,8 @@ className: (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, styles.root, true), (0, _defineProperty2.default)(_classnames, styles.hover, hover), (0, _defineProperty2.default)(_classnames, styles.stacked, isStacked), _classnames)),

}), _react.Children.map(children, function (child, index) {
if ((0, _uiReactUtils.matchComponentTypes)(child, [_ColHeader.ColHeader])) {
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_ColHeader.ColHeader])) {
return child;
}
if ((0, _uiReactUtils.matchComponentTypes)(child, [_RowHeader.RowHeader])) {
return (0, _uiReactUtils.safeCloneElement)(child, {
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_RowHeader.RowHeader])) {
return (0, _safeCloneElement.safeCloneElement)(child, {
key: child.props.name,

@@ -105,4 +109,4 @@ isStacked: isStacked

if ((0, _uiReactUtils.matchComponentTypes)(child, [_Cell.Cell])) {
return (0, _uiReactUtils.safeCloneElement)(child, {
if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Cell.Cell])) {
return (0, _safeCloneElement.safeCloneElement)(child, {
key: child.props.name,

@@ -124,3 +128,3 @@ isStacked: isStacked,

*/
children: _uiPropTypes.Children.oneOf([_ColHeader.ColHeader, _RowHeader.RowHeader, _Cell.Cell]),
children: _Children.Children.oneOf([_ColHeader.ColHeader, _RowHeader.RowHeader, _Cell.Cell]),
hover: _propTypes.default.bool,

@@ -127,0 +131,0 @@ isStacked: _propTypes.default.bool,

16

lib/Table/RowHeader/index.js

@@ -30,8 +30,10 @@ "use strict";

var _uiThemeable = require("@instructure/ui-themeable");
var _themeable = require("@instructure/ui-themeable/lib/themeable");
var _uiReactUtils = require("@instructure/ui-react-utils");
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps");
var _uiLayout = require("@instructure/ui-layout");
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp");
var _View = require("@instructure/ui-layout/lib/View");
var _theme = _interopRequireDefault(require("./theme"));

@@ -54,6 +56,6 @@

---
parent: TableControlled
parent: Table
---
**/
var RowHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
var RowHeader = (_dec = (0, _themeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 =
/*#__PURE__*/

@@ -79,3 +81,3 @@ function (_Component) {

isStacked = _this$props.isStacked;
return _react.default.createElement(_uiLayout.View, Object.assign({}, _uiLayout.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, RowHeader.propTypes), RowHeader), {
return _react.default.createElement(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, RowHeader.propTypes), RowHeader), {
as: isStacked ? 'div' : 'th',

@@ -85,3 +87,3 @@ className: (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, styles.root, true), (0, _defineProperty2.default)(_classnames, styles["textAlign--".concat(textAlign)], textAlign), _classnames)),

role: isStacked ? "rowheader" : null
}), (0, _uiReactUtils.callRenderProp)(children));
}), (0, _callRenderProp.callRenderProp)(children));
}

@@ -88,0 +90,0 @@ }]);

28

package.json
{
"name": "@instructure/ui-table",
"version": "5.52.3-rc.31+81265a8b",
"version": "5.52.3-rc.32+d02cc45a",
"description": "A UI component library made by Instructure Inc.",

@@ -23,17 +23,17 @@ "author": "Instructure, Inc. Engineering and Product Design",

"devDependencies": {
"@instructure/ui-babel-preset": "5.52.3-rc.31+81265a8b",
"@instructure/ui-color-utils": "5.52.3-rc.31+81265a8b",
"@instructure/ui-test-utils": "5.52.3-rc.31+81265a8b"
"@instructure/ui-babel-preset": "5.52.3-rc.32+d02cc45a",
"@instructure/ui-color-utils": "5.52.3-rc.32+d02cc45a",
"@instructure/ui-test-utils": "5.52.3-rc.32+d02cc45a"
},
"dependencies": {
"@babel/runtime": "^7",
"@instructure/ui-a11y": "5.52.3-rc.31+81265a8b",
"@instructure/ui-forms": "5.52.3-rc.31+81265a8b",
"@instructure/ui-icons": "5.52.3-rc.31+81265a8b",
"@instructure/ui-layout": "5.52.3-rc.31+81265a8b",
"@instructure/ui-prop-types": "5.52.3-rc.31+81265a8b",
"@instructure/ui-react-utils": "5.52.3-rc.31+81265a8b",
"@instructure/ui-testable": "5.52.3-rc.31+81265a8b",
"@instructure/ui-themeable": "5.52.3-rc.31+81265a8b",
"@instructure/ui-utils": "5.52.3-rc.31+81265a8b",
"@instructure/ui-a11y": "5.52.3-rc.32+d02cc45a",
"@instructure/ui-forms": "5.52.3-rc.32+d02cc45a",
"@instructure/ui-icons": "5.52.3-rc.32+d02cc45a",
"@instructure/ui-layout": "5.52.3-rc.32+d02cc45a",
"@instructure/ui-prop-types": "5.52.3-rc.32+d02cc45a",
"@instructure/ui-react-utils": "5.52.3-rc.32+d02cc45a",
"@instructure/ui-testable": "5.52.3-rc.32+d02cc45a",
"@instructure/ui-themeable": "5.52.3-rc.32+d02cc45a",
"@instructure/ui-utils": "5.52.3-rc.32+d02cc45a",
"classnames": "^2",

@@ -47,3 +47,3 @@ "prop-types": "^15",

"sideEffects": false,
"gitHead": "81265a8bde6e983313a8e3ca2819517b9bccd237"
"gitHead": "d02cc45a3141b784262fe29da86d5e1f87b3b2a9"
}

2

README.md

@@ -23,3 +23,3 @@ ---

The `ui-table` package contains the following:
- [TableControlled](#TableControlled)
- [Table](#Table)

@@ -26,0 +26,0 @@ ```javascript

2

src/Table/Body/index.js

@@ -40,3 +40,3 @@ /*

---
parent: TableControlled
parent: Table
---

@@ -43,0 +43,0 @@ **/

2

src/Table/Cell/index.js

@@ -38,3 +38,3 @@ /*

---
parent: TableControlled
parent: Table
---

@@ -41,0 +41,0 @@ **/

2

src/Table/ColHeader/index.js

@@ -38,3 +38,3 @@ /*

---
parent: TableControlled
parent: Table
---

@@ -41,0 +41,0 @@ **/

2

src/Table/Head/index.js

@@ -42,3 +42,3 @@ /*

---
parent: TableControlled
parent: Table
---

@@ -45,0 +45,0 @@ **/

1

src/Table/index.js

@@ -48,3 +48,2 @@ /*

category: components
id: TableControlled
---

@@ -51,0 +50,0 @@ **/

191

src/Table/README.md
---
describes: TableControlled
id: TableControlled__README
describes: Table
---

@@ -32,3 +31,3 @@

<Flex alignItems="start">
<FlexItem margin="small">
<Flex.Item margin="small">
<RadioInputGroup

@@ -44,4 +43,4 @@ name="layout"

</RadioInputGroup>
</FlexItem>
<FlexItem margin="small">
</Flex.Item>
<Flex.Item margin="small">
<Checkbox

@@ -52,3 +51,3 @@ label="hover"

/>
</FlexItem>
</Flex.Item>
</Flex>

@@ -64,3 +63,3 @@ )

{this.renderOptions()}
<TableControlled
<Table
caption='Top rated movies'

@@ -70,31 +69,31 @@ layout={layout}

>
<TableControlled.Head>
<TableControlled.Row>
<TableControlled.ColHeader id="Rank">Rank</TableControlled.ColHeader>
<TableControlled.ColHeader id="Title">Title</TableControlled.ColHeader>
<TableControlled.ColHeader id="Year">Year</TableControlled.ColHeader>
<TableControlled.ColHeader id="Rating">Rating</TableControlled.ColHeader>
</TableControlled.Row>
</TableControlled.Head>
<TableControlled.Body>
<TableControlled.Row>
<TableControlled.RowHeader>1</TableControlled.RowHeader>
<TableControlled.Cell>The Shawshank Redemption</TableControlled.Cell>
<TableControlled.Cell>1994</TableControlled.Cell>
<TableControlled.Cell>9.3</TableControlled.Cell>
</TableControlled.Row>
<TableControlled.Row>
<TableControlled.RowHeader>2</TableControlled.RowHeader>
<TableControlled.Cell>The Godfather</TableControlled.Cell>
<TableControlled.Cell>1972</TableControlled.Cell>
<TableControlled.Cell>9.2</TableControlled.Cell>
</TableControlled.Row>
<TableControlled.Row>
<TableControlled.RowHeader>3</TableControlled.RowHeader>
<TableControlled.Cell>The Godfather: Part II</TableControlled.Cell>
<TableControlled.Cell>1974</TableControlled.Cell>
<TableControlled.Cell>9.0</TableControlled.Cell>
</TableControlled.Row>
</TableControlled.Body>
</TableControlled>
<Table.Head>
<Table.Row>
<Table.ColHeader id="Rank">Rank</Table.ColHeader>
<Table.ColHeader id="Title">Title</Table.ColHeader>
<Table.ColHeader id="Year">Year</Table.ColHeader>
<Table.ColHeader id="Rating">Rating</Table.ColHeader>
</Table.Row>
</Table.Head>
<Table.Body>
<Table.Row>
<Table.RowHeader>1</Table.RowHeader>
<Table.Cell>The Shawshank Redemption</Table.Cell>
<Table.Cell>1994</Table.Cell>
<Table.Cell>9.3</Table.Cell>
</Table.Row>
<Table.Row>
<Table.RowHeader>2</Table.RowHeader>
<Table.Cell>The Godfather</Table.Cell>
<Table.Cell>1972</Table.Cell>
<Table.Cell>9.2</Table.Cell>
</Table.Row>
<Table.Row>
<Table.RowHeader>3</Table.RowHeader>
<Table.Cell>The Godfather: Part II</Table.Cell>
<Table.Cell>1974</Table.Cell>
<Table.Cell>9.0</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</div>

@@ -135,10 +134,10 @@ )

<div>
<TableControlled
<Table
caption='Top rated movies'
layout={layout}
>
<TableControlled.Head>
<TableControlled.Row>
<Table.Head>
<Table.Row>
{(headers || []).map(({ id, text, width, textAlign }) => (
<TableControlled.ColHeader
<Table.ColHeader
key={id}

@@ -150,11 +149,11 @@ id={id}

{text}
</TableControlled.ColHeader>
</Table.ColHeader>
))}
</TableControlled.Row>
</TableControlled.Head>
<TableControlled.Body>
</Table.Row>
</Table.Head>
<Table.Body>
{rows.map((row) => (
<TableControlled.Row key={row.id}>
<Table.Row key={row.id}>
{headers.map(({ id, renderCell, textAlign }) => (
<TableControlled.Cell
<Table.Cell
key={id}

@@ -164,8 +163,8 @@ textAlign={layout === 'stacked' ? 'start' : textAlign}

{renderCell ? renderCell(row[id], layout) : row[id]}
</TableControlled.Cell>
</Table.Cell>
))}
</TableControlled.Row>
</Table.Row>
))}
</TableControlled.Body>
</TableControlled>
</Table.Body>
</Table>
</div>

@@ -313,10 +312,10 @@ )}

<div>
<TableControlled
<Table
caption={`${caption}: sorted by ${sortBy} in ${direction} order`}
{...props}
>
<TableControlled.Head>
<TableControlled.Row>
<Table.Head>
<Table.Row>
{(headers || []).map(({ id, text }) => (
<TableControlled.ColHeader
<Table.ColHeader
key={id}

@@ -328,18 +327,18 @@ id={id}

{text}
</TableControlled.ColHeader>
</Table.ColHeader>
))}
</TableControlled.Row>
</TableControlled.Head>
<TableControlled.Body>
</Table.Row>
</Table.Head>
<Table.Body>
{sortedRows.map((row) => (
<TableControlled.Row key={row.id}>
<Table.Row key={row.id}>
{headers.map(({ id, renderCell }) => (
<TableControlled.Cell key={id}>
<Table.Cell key={id}>
{renderCell ? renderCell(row[id]) : row[id]}
</TableControlled.Cell>
</Table.Cell>
))}
</TableControlled.Row>
</Table.Row>
))}
</TableControlled.Body>
</TableControlled>
</Table.Body>
</Table>
<Alert

@@ -489,9 +488,9 @@ liveRegion={() => document.getElementById('flash-messages')}

</View>
<TableControlled
<Table
caption={`${caption}: sorted by ${sortBy} in ${direction} order`}
{...props}
>
<TableControlled.Head>
<TableControlled.Row>
<TableControlled.ColHeader id="select">
<Table.Head>
<Table.Row>
<Table.ColHeader id="select">
<Checkbox

@@ -503,5 +502,5 @@ label={<ScreenReaderContent>Select all</ScreenReaderContent>}

/>
</TableControlled.ColHeader>
</Table.ColHeader>
{(headers || []).map(({ id, text, width }) => (
<TableControlled.ColHeader
<Table.ColHeader
key={id}

@@ -514,7 +513,7 @@ id={id}

{text}
</TableControlled.ColHeader>
</Table.ColHeader>
))}
</TableControlled.Row>
</TableControlled.Head>
<TableControlled.Body>
</Table.Row>
</Table.Head>
<Table.Body>
{(rows || []).map((row) => {

@@ -524,4 +523,4 @@ const rowSelected = selected.has(row.id)

return (
<TableControlled.Row key={row.id}>
<TableControlled.RowHeader>
<Table.Row key={row.id}>
<Table.RowHeader>
<Checkbox

@@ -532,13 +531,13 @@ label={<ScreenReaderContent>Select row</ScreenReaderContent>}

/>
</TableControlled.RowHeader>
</Table.RowHeader>
{(headers || []).map(({ id, renderCell }) => (
<TableControlled.Cell key={id}>
<Table.Cell key={id}>
{renderCell ? renderCell(row[id]) : row[id]}
</TableControlled.Cell>
</Table.Cell>
))}
</TableControlled.Row>
</Table.Row>
)
})}
</TableControlled.Body>
</TableControlled>
</Table.Body>
</Table>
<Alert

@@ -607,3 +606,3 @@ liveRegion={() => document.getElementById('flash-messages')}

{Array.from(Array(pageCount), (item, index) => (
<PaginationButton
<Pagination.Page
key={index}

@@ -614,3 +613,3 @@ onClick={() => this.handleClick(index)}

{index + 1}
</PaginationButton>
</Pagination.Page>
))}

@@ -778,18 +777,18 @@ </Pagination>

<Figure recommendation="yes" title="Do">
<FigureItem>Column headers can be sortable</FigureItem>
<FigureItem>Use the <code>small</code> Buttons and Inputs inside cells</FigureItem>
<FigureItem>Actions must relate to that row only</FigureItem>
<FigureItem>Use horizontal and vertical alignment that makes sense with the content</FigureItem>
<FigureItem>Left align US dates and apply i18n</FigureItem>
<FigureItem>Left align text and alphanumeric</FigureItem>
<FigureItem>Right align quantities, decimals</FigureItem>
<FigureItem>Left align column headers, including currency</FigureItem>
<Figure.Item>Column headers can be sortable</Figure.Item>
<Figure.Item>Use the <code>small</code> Buttons and Inputs inside cells</Figure.Item>
<Figure.Item>Actions must relate to that row only</Figure.Item>
<Figure.Item>Use horizontal and vertical alignment that makes sense with the content</Figure.Item>
<Figure.Item>Left align US dates and apply i18n</Figure.Item>
<Figure.Item>Left align text and alphanumeric</Figure.Item>
<Figure.Item>Right align quantities, decimals</Figure.Item>
<Figure.Item>Left align column headers, including currency</Figure.Item>
</Figure>
<Figure recommendation="no" title="Don't">
<FigureItem>Center align more than 4 characters/numbers, choose left or right</FigureItem>
<FigureItem>Use to create a layout</FigureItem>
<FigureItem>Use zebra stripes</FigureItem>
<FigureItem>Bottom align ever</FigureItem>
<Figure.Item>Center align more than 4 characters/numbers, choose left or right</Figure.Item>
<Figure.Item>Use to create a layout</Figure.Item>
<Figure.Item>Use zebra stripes</Figure.Item>
<Figure.Item>Bottom align ever</Figure.Item>
</Figure>
</Guidelines>
```

2

src/Table/Row/index.js

@@ -43,3 +43,3 @@ /*

---
parent: TableControlled
parent: Table
---

@@ -46,0 +46,0 @@ **/

2

src/Table/RowHeader/index.js

@@ -38,3 +38,3 @@ /*

---
parent: TableControlled
parent: Table
---

@@ -41,0 +41,0 @@ **/