@instructure/ui-tree-browser 10.26.1 → 11.0.1-snapshot-0
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 +30 -1
- package/es/TreeBrowser/TreeButton/index.js +6 -6
- package/es/TreeBrowser/TreeButton/props.js +1 -21
- package/es/TreeBrowser/TreeCollection/index.js +6 -6
- package/es/TreeBrowser/TreeCollection/props.js +1 -32
- package/es/TreeBrowser/TreeNode/index.js +6 -6
- package/es/TreeBrowser/TreeNode/props.js +1 -16
- package/es/TreeBrowser/index.js +6 -6
- package/es/TreeBrowser/props.js +1 -27
- package/lib/TreeBrowser/TreeButton/index.js +5 -5
- package/lib/TreeBrowser/TreeButton/props.js +1 -22
- package/lib/TreeBrowser/TreeCollection/index.js +5 -5
- package/lib/TreeBrowser/TreeCollection/props.js +1 -33
- package/lib/TreeBrowser/TreeNode/index.js +5 -5
- package/lib/TreeBrowser/TreeNode/props.js +1 -17
- package/lib/TreeBrowser/index.js +5 -5
- package/lib/TreeBrowser/props.js +1 -27
- package/package.json +14 -17
- package/src/TreeBrowser/TreeButton/index.tsx +2 -4
- package/src/TreeBrowser/TreeButton/props.ts +2 -28
- package/src/TreeBrowser/TreeCollection/index.tsx +3 -5
- package/src/TreeBrowser/TreeCollection/props.ts +2 -40
- package/src/TreeBrowser/TreeNode/index.tsx +7 -5
- package/src/TreeBrowser/TreeNode/props.ts +2 -23
- package/src/TreeBrowser/index.tsx +2 -4
- package/src/TreeBrowser/props.ts +4 -43
- package/tsconfig.build.json +0 -2
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/TreeBrowser/TreeButton/index.d.ts +0 -1
- package/types/TreeBrowser/TreeButton/index.d.ts.map +1 -1
- package/types/TreeBrowser/TreeButton/props.d.ts +2 -3
- package/types/TreeBrowser/TreeButton/props.d.ts.map +1 -1
- package/types/TreeBrowser/TreeCollection/index.d.ts +2 -10
- package/types/TreeBrowser/TreeCollection/index.d.ts.map +1 -1
- package/types/TreeBrowser/TreeCollection/props.d.ts +2 -3
- package/types/TreeBrowser/TreeCollection/props.d.ts.map +1 -1
- package/types/TreeBrowser/TreeNode/index.d.ts +0 -1
- package/types/TreeBrowser/TreeNode/index.d.ts.map +1 -1
- package/types/TreeBrowser/TreeNode/props.d.ts +2 -3
- package/types/TreeBrowser/TreeNode/props.d.ts.map +1 -1
- package/types/TreeBrowser/index.d.ts +0 -1
- package/types/TreeBrowser/index.d.ts.map +1 -1
- package/types/TreeBrowser/props.d.ts +4 -5
- package/types/TreeBrowser/props.d.ts.map +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
|
-
## [
|
|
6
|
+
## [11.0.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v11.0.0...v11.0.1-snapshot-0) (2025-10-07)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-tree-browser
|
|
9
9
|
|
|
@@ -11,6 +11,35 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
+
# [11.0.0](https://github.com/instructure/instructure-ui/compare/v10.26.0...v11.0.0) (2025-10-06)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* **many:** instUI v11 release ([36f5438](https://github.com/instructure/instructure-ui/commit/36f54382669186227ba24798bbf7201ef2f5cd4c))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### BREAKING CHANGES
|
|
23
|
+
|
|
24
|
+
* **many:** InstUI v11 contains the following breaking changes:
|
|
25
|
+
- React 16 and 17 are no longer supported
|
|
26
|
+
- remove `PropTypes` from all packages
|
|
27
|
+
- remove `CodeEditor` component
|
|
28
|
+
- remove `@instui/theme-registry` package
|
|
29
|
+
- remove `@testable`, `@experimental`, `@hack` decorators
|
|
30
|
+
- InstUISettingsProvider's `as` prop is removed
|
|
31
|
+
- `canvas.use()`, `canvasHighContrast.use()` functions are removed
|
|
32
|
+
- `canvasThemeLocal`, `canvasHighContrastThemeLocal` are removed
|
|
33
|
+
- `variables` field on theme objects are removed
|
|
34
|
+
- remove deprecated props from Table: Row's `isStacked`, Body's
|
|
35
|
+
`isStacked`, `hover`, and `headers`
|
|
36
|
+
- `Table`'s `caption` prop is now required
|
|
37
|
+
- `ui-dom-utils`'s `getComputedStyle` can now return `undefined`
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
14
43
|
# [10.26.0](https://github.com/instructure/instructure-ui/compare/v10.25.0...v10.26.0) (2025-10-01)
|
|
15
44
|
|
|
16
45
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _dec,
|
|
1
|
+
var _dec, _class, _TreeButton;
|
|
2
2
|
/*
|
|
3
3
|
* The MIT License (MIT)
|
|
4
4
|
*
|
|
@@ -24,13 +24,12 @@ var _dec, _dec2, _class, _TreeButton;
|
|
|
24
24
|
*/
|
|
25
25
|
|
|
26
26
|
import { Component } from 'react';
|
|
27
|
-
import { testable } from '@instructure/ui-testable';
|
|
28
27
|
import { Img } from '@instructure/ui-img';
|
|
29
28
|
import { callRenderProp } from '@instructure/ui-react-utils';
|
|
30
29
|
import { withStyle } from '@instructure/emotion';
|
|
31
30
|
import generateStyles from './styles';
|
|
32
31
|
import generateComponentTheme from './theme';
|
|
33
|
-
import { allowedProps
|
|
32
|
+
import { allowedProps } from './props';
|
|
34
33
|
import TreeBrowserContext from '../TreeBrowserContext';
|
|
35
34
|
|
|
36
35
|
// Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
|
|
@@ -42,7 +41,7 @@ id: TreeBrowser.Button
|
|
|
42
41
|
---
|
|
43
42
|
**/
|
|
44
43
|
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
45
|
-
let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme),
|
|
44
|
+
let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = (_TreeButton = class TreeButton extends Component {
|
|
46
45
|
constructor(...args) {
|
|
47
46
|
super(...args);
|
|
48
47
|
this.ref = null;
|
|
@@ -144,16 +143,17 @@ let TreeButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
|
|
|
144
143
|
tabIndex: -1,
|
|
145
144
|
type: "button",
|
|
146
145
|
css: styles === null || styles === void 0 ? void 0 : styles.treeButton,
|
|
146
|
+
"data-cid": "TreeButton",
|
|
147
147
|
children: buttonContent
|
|
148
148
|
});
|
|
149
149
|
}
|
|
150
|
-
}, _TreeButton.displayName = "TreeButton", _TreeButton.componentId = 'TreeBrowser.Button', _TreeButton.allowedProps = allowedProps, _TreeButton.
|
|
150
|
+
}, _TreeButton.displayName = "TreeButton", _TreeButton.componentId = 'TreeBrowser.Button', _TreeButton.allowedProps = allowedProps, _TreeButton.contextType = TreeBrowserContext, _TreeButton.defaultProps = {
|
|
151
151
|
type: 'treeButton',
|
|
152
152
|
size: 'medium',
|
|
153
153
|
variant: 'folderTree',
|
|
154
154
|
selected: false,
|
|
155
155
|
focused: false,
|
|
156
156
|
expanded: false
|
|
157
|
-
}, _TreeButton)) || _class)
|
|
157
|
+
}, _TreeButton)) || _class);
|
|
158
158
|
export default TreeButton;
|
|
159
159
|
export { TreeButton };
|
|
@@ -22,25 +22,5 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
import PropTypes from 'prop-types';
|
|
26
|
-
const propTypes = {
|
|
27
|
-
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
28
|
-
name: PropTypes.string,
|
|
29
|
-
descriptor: PropTypes.string,
|
|
30
|
-
type: PropTypes.string,
|
|
31
|
-
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
|
32
|
-
variant: PropTypes.oneOf(['folderTree', 'indent']),
|
|
33
|
-
collectionIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
34
|
-
collectionIconExpanded: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
35
|
-
itemIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
36
|
-
thumbnail: PropTypes.string,
|
|
37
|
-
onClick: PropTypes.func,
|
|
38
|
-
expanded: PropTypes.bool,
|
|
39
|
-
selected: PropTypes.bool,
|
|
40
|
-
focused: PropTypes.bool,
|
|
41
|
-
level: PropTypes.number,
|
|
42
|
-
containerRef: PropTypes.func,
|
|
43
|
-
renderContent: PropTypes.func
|
|
44
|
-
};
|
|
45
25
|
const allowedProps = ['id', 'name', 'descriptor', 'type', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'thumbnail', 'onClick', 'expanded', 'selected', 'focused', 'level', 'containerRef', 'renderContent'];
|
|
46
|
-
export {
|
|
26
|
+
export { allowedProps };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _dec,
|
|
1
|
+
var _dec, _class, _TreeCollection;
|
|
2
2
|
/*
|
|
3
3
|
* The MIT License (MIT)
|
|
4
4
|
*
|
|
@@ -24,13 +24,12 @@ var _dec, _dec2, _class, _TreeCollection;
|
|
|
24
24
|
*/
|
|
25
25
|
|
|
26
26
|
import { Component } from 'react';
|
|
27
|
-
import { testable } from '@instructure/ui-testable';
|
|
28
27
|
import { withStyle } from '@instructure/emotion';
|
|
29
28
|
import { safeCloneElement } from '@instructure/ui-react-utils';
|
|
30
29
|
import { TreeButton } from '../TreeButton';
|
|
31
30
|
import generateStyles from './styles';
|
|
32
31
|
import generateComponentTheme from './theme';
|
|
33
|
-
import { allowedProps
|
|
32
|
+
import { allowedProps } from './props';
|
|
34
33
|
import TreeBrowserContext from '../TreeBrowserContext';
|
|
35
34
|
import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
36
35
|
import { createElement as _createElement } from "@emotion/react";
|
|
@@ -40,7 +39,7 @@ parent: TreeBrowser
|
|
|
40
39
|
id: TreeBrowser.Collection
|
|
41
40
|
---
|
|
42
41
|
**/
|
|
43
|
-
let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
|
|
42
|
+
let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = (_TreeCollection = class TreeCollection extends Component {
|
|
44
43
|
constructor(props) {
|
|
45
44
|
super(props);
|
|
46
45
|
this.ref = null;
|
|
@@ -341,6 +340,7 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
|
|
|
341
340
|
type: 'collection'
|
|
342
341
|
}),
|
|
343
342
|
...ariaSelected,
|
|
343
|
+
"data-cid": "TreeCollection",
|
|
344
344
|
children: [_jsx(TreeButton, {
|
|
345
345
|
...collectionProps
|
|
346
346
|
}), expanded && this.childCount > 0 && _jsx("ul", {
|
|
@@ -351,7 +351,7 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
|
|
|
351
351
|
})]
|
|
352
352
|
});
|
|
353
353
|
}
|
|
354
|
-
}, _TreeCollection.displayName = "TreeCollection", _TreeCollection.componentId = 'TreeBrowser.Collection', _TreeCollection.allowedProps = allowedProps, _TreeCollection.
|
|
354
|
+
}, _TreeCollection.displayName = "TreeCollection", _TreeCollection.componentId = 'TreeBrowser.Collection', _TreeCollection.allowedProps = allowedProps, _TreeCollection.contextType = TreeBrowserContext, _TreeCollection.defaultProps = {
|
|
355
355
|
collections: [],
|
|
356
356
|
items: [],
|
|
357
357
|
expanded: false,
|
|
@@ -361,6 +361,6 @@ let TreeCollection = (_dec = withStyle(generateStyles, generateComponentTheme),
|
|
|
361
361
|
getItemProps: props => props,
|
|
362
362
|
getCollectionProps: props => props,
|
|
363
363
|
isCollectionFlattened: false
|
|
364
|
-
}, _TreeCollection)) || _class)
|
|
364
|
+
}, _TreeCollection)) || _class);
|
|
365
365
|
export default TreeCollection;
|
|
366
366
|
export { TreeCollection };
|
|
@@ -22,36 +22,5 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
import PropTypes from 'prop-types';
|
|
26
|
-
import { Children } from '@instructure/ui-prop-types';
|
|
27
|
-
import { TreeNode } from '../TreeNode';
|
|
28
|
-
const propTypes = {
|
|
29
|
-
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
30
|
-
name: PropTypes.string,
|
|
31
|
-
descriptor: PropTypes.string,
|
|
32
|
-
items: PropTypes.array,
|
|
33
|
-
collections: PropTypes.array,
|
|
34
|
-
expanded: PropTypes.bool,
|
|
35
|
-
selection: PropTypes.string,
|
|
36
|
-
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
|
37
|
-
variant: PropTypes.oneOf(['folderTree', 'indent']),
|
|
38
|
-
collectionIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
39
|
-
collectionIconExpanded: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
40
|
-
itemIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
41
|
-
getItemProps: PropTypes.func,
|
|
42
|
-
getCollectionProps: PropTypes.func,
|
|
43
|
-
onItemClick: PropTypes.func,
|
|
44
|
-
onCollectionClick: PropTypes.func,
|
|
45
|
-
onKeyDown: PropTypes.func,
|
|
46
|
-
numChildren: PropTypes.number,
|
|
47
|
-
level: PropTypes.number.isRequired,
|
|
48
|
-
position: PropTypes.number,
|
|
49
|
-
renderBeforeItems: Children.oneOf([TreeNode]),
|
|
50
|
-
renderAfterItems: Children.oneOf([TreeNode]),
|
|
51
|
-
containerRef: PropTypes.func,
|
|
52
|
-
isCollectionFlattened: PropTypes.bool,
|
|
53
|
-
renderContent: PropTypes.func,
|
|
54
|
-
compareFunc: PropTypes.func
|
|
55
|
-
};
|
|
56
25
|
const allowedProps = ['id', 'name', 'descriptor', 'items', 'collections', 'expanded', 'selection', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'onItemClick', 'onCollectionClick', 'onKeyDown', 'numChildren', 'level', 'position', 'renderBeforeItems', 'renderAfterItems', 'containerRef', 'isCollectionFlattened', 'renderContent'];
|
|
57
|
-
export {
|
|
26
|
+
export { allowedProps };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _dec,
|
|
1
|
+
var _dec, _class, _TreeNode;
|
|
2
2
|
/*
|
|
3
3
|
* The MIT License (MIT)
|
|
4
4
|
*
|
|
@@ -26,11 +26,10 @@ var _dec, _dec2, _class, _TreeNode;
|
|
|
26
26
|
import { Component } from 'react';
|
|
27
27
|
import { Img } from '@instructure/ui-img';
|
|
28
28
|
import { callRenderProp } from '@instructure/ui-react-utils';
|
|
29
|
-
import { testable } from '@instructure/ui-testable';
|
|
30
29
|
import { withStyle } from '@instructure/emotion';
|
|
31
30
|
import generateStyles from '../TreeButton/styles';
|
|
32
31
|
import generateComponentTheme from '../TreeButton/theme';
|
|
33
|
-
import { allowedProps
|
|
32
|
+
import { allowedProps } from './props';
|
|
34
33
|
import TreeBrowserContext from '../TreeBrowserContext';
|
|
35
34
|
|
|
36
35
|
// Todo: merge TreeButton and TreeNode: TreeButton should be a special type of TreeNode
|
|
@@ -44,7 +43,7 @@ A helper class used to render the :renderBeforeItems and :renderAfterItems
|
|
|
44
43
|
in the TreeBrowser.
|
|
45
44
|
**/
|
|
46
45
|
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
47
|
-
let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme),
|
|
46
|
+
let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = (_TreeNode = class TreeNode extends Component {
|
|
48
47
|
constructor(...args) {
|
|
49
48
|
super(...args);
|
|
50
49
|
this.ref = null;
|
|
@@ -98,6 +97,7 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
|
|
|
98
97
|
ref: this.handleRef,
|
|
99
98
|
tabIndex: -1,
|
|
100
99
|
css: styles === null || styles === void 0 ? void 0 : styles.treeButton,
|
|
100
|
+
"data-cid": "TreeNode",
|
|
101
101
|
children: _jsxs("span", {
|
|
102
102
|
css: styles === null || styles === void 0 ? void 0 : styles.layout,
|
|
103
103
|
children: [this.renderItemImage(), _jsx("span", {
|
|
@@ -107,11 +107,11 @@ let TreeNode = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2
|
|
|
107
107
|
})
|
|
108
108
|
});
|
|
109
109
|
}
|
|
110
|
-
}, _TreeNode.displayName = "TreeNode", _TreeNode.componentId = 'TreeBrowser.Node', _TreeNode.allowedProps = allowedProps, _TreeNode.
|
|
110
|
+
}, _TreeNode.displayName = "TreeNode", _TreeNode.componentId = 'TreeBrowser.Node', _TreeNode.allowedProps = allowedProps, _TreeNode.contextType = TreeBrowserContext, _TreeNode.defaultProps = {
|
|
111
111
|
size: 'medium',
|
|
112
112
|
variant: 'folderTree',
|
|
113
113
|
selected: false,
|
|
114
114
|
focused: false
|
|
115
|
-
}, _TreeNode)) || _class)
|
|
115
|
+
}, _TreeNode)) || _class);
|
|
116
116
|
export default TreeNode;
|
|
117
117
|
export { TreeNode };
|
|
@@ -22,20 +22,5 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
import PropTypes from 'prop-types';
|
|
26
|
-
const propTypes = {
|
|
27
|
-
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
28
|
-
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
|
29
|
-
variant: PropTypes.oneOf(['folderTree', 'indent']),
|
|
30
|
-
selected: PropTypes.bool,
|
|
31
|
-
focused: PropTypes.bool,
|
|
32
|
-
itemIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
33
|
-
thumbnail: PropTypes.string,
|
|
34
|
-
level: PropTypes.number,
|
|
35
|
-
children: PropTypes.node,
|
|
36
|
-
containerRef: PropTypes.func,
|
|
37
|
-
onKeyDown: PropTypes.func,
|
|
38
|
-
onClick: PropTypes.func
|
|
39
|
-
};
|
|
40
25
|
const allowedProps = ['id', 'size', 'variant', 'selected', 'focused', 'itemIcon', 'thumbnail', 'level', 'children', 'containerRef', 'onKeyDown', 'onClick'];
|
|
41
|
-
export {
|
|
26
|
+
export { allowedProps };
|
package/es/TreeBrowser/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _dec,
|
|
1
|
+
var _dec, _class, _TreeBrowser;
|
|
2
2
|
/*
|
|
3
3
|
* The MIT License (MIT)
|
|
4
4
|
*
|
|
@@ -27,14 +27,13 @@ import { Component } from 'react';
|
|
|
27
27
|
import keycode from 'keycode';
|
|
28
28
|
import { IconFolderLine, IconDocumentLine } from '@instructure/ui-icons';
|
|
29
29
|
import { omitProps, pickProps } from '@instructure/ui-react-utils';
|
|
30
|
-
import { testable } from '@instructure/ui-testable';
|
|
31
30
|
import { withStyle } from '@instructure/emotion';
|
|
32
31
|
import { TreeCollection } from './TreeCollection';
|
|
33
32
|
import { TreeButton } from './TreeButton';
|
|
34
33
|
import { TreeNode } from './TreeNode';
|
|
35
34
|
import generateStyles from './styles';
|
|
36
35
|
import generateComponentTheme from './theme';
|
|
37
|
-
import { allowedProps
|
|
36
|
+
import { allowedProps } from './props';
|
|
38
37
|
import TreeBrowserContext from './TreeBrowserContext';
|
|
39
38
|
|
|
40
39
|
/**
|
|
@@ -43,7 +42,7 @@ category: components
|
|
|
43
42
|
---
|
|
44
43
|
**/
|
|
45
44
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
46
|
-
let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme),
|
|
45
|
+
let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = (_TreeBrowser = class TreeBrowser extends Component {
|
|
47
46
|
constructor(props) {
|
|
48
47
|
super(props);
|
|
49
48
|
this.ref = null;
|
|
@@ -287,11 +286,12 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
|
|
|
287
286
|
this.ref = el;
|
|
288
287
|
},
|
|
289
288
|
"aria-label": this.props.treeLabel,
|
|
289
|
+
"data-cid": "TreeBrowser",
|
|
290
290
|
children: this.renderRoot()
|
|
291
291
|
})
|
|
292
292
|
});
|
|
293
293
|
}
|
|
294
|
-
}, _TreeBrowser.displayName = "TreeBrowser", _TreeBrowser.componentId = 'TreeBrowser', _TreeBrowser.allowedProps = allowedProps, _TreeBrowser.
|
|
294
|
+
}, _TreeBrowser.displayName = "TreeBrowser", _TreeBrowser.componentId = 'TreeBrowser', _TreeBrowser.allowedProps = allowedProps, _TreeBrowser.defaultProps = {
|
|
295
295
|
size: 'medium',
|
|
296
296
|
variant: 'folderTree',
|
|
297
297
|
showRootCollection: true,
|
|
@@ -306,6 +306,6 @@ let TreeBrowser = (_dec = withStyle(generateStyles, generateComponentTheme), _de
|
|
|
306
306
|
return 0;
|
|
307
307
|
},
|
|
308
308
|
animation: true
|
|
309
|
-
}, _TreeBrowser.Node = TreeNode, _TreeBrowser.Collection = TreeCollection, _TreeBrowser.Button = TreeButton, _TreeBrowser)) || _class)
|
|
309
|
+
}, _TreeBrowser.Node = TreeNode, _TreeBrowser.Collection = TreeCollection, _TreeBrowser.Button = TreeButton, _TreeBrowser)) || _class);
|
|
310
310
|
export default TreeBrowser;
|
|
311
311
|
export { TreeBrowser };
|
package/es/TreeBrowser/props.js
CHANGED
|
@@ -22,9 +22,6 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
import PropTypes from 'prop-types';
|
|
26
|
-
import { controllable } from '@instructure/ui-prop-types';
|
|
27
|
-
|
|
28
25
|
// props shared between TreeBrowser, TreeCollection
|
|
29
26
|
|
|
30
27
|
// props shared between TreeBrowser, TreeCollection, TreeButton
|
|
@@ -34,28 +31,5 @@ import { controllable } from '@instructure/ui-prop-types';
|
|
|
34
31
|
|
|
35
32
|
// this is a sum type, so CompareObject is one of CompareCollection OR CompareItem
|
|
36
33
|
|
|
37
|
-
const propTypes = {
|
|
38
|
-
collections: PropTypes.object.isRequired,
|
|
39
|
-
items: PropTypes.object.isRequired,
|
|
40
|
-
rootId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
41
|
-
expanded: controllable(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), 'onCollectionToggle'),
|
|
42
|
-
defaultExpanded: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
|
|
43
|
-
selectionType: PropTypes.oneOf(['none', 'single']),
|
|
44
|
-
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
|
45
|
-
variant: PropTypes.oneOf(['folderTree', 'indent']),
|
|
46
|
-
collectionIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
47
|
-
collectionIconExpanded: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
48
|
-
itemIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
49
|
-
getItemProps: PropTypes.func,
|
|
50
|
-
getCollectionProps: PropTypes.func,
|
|
51
|
-
showRootCollection: PropTypes.bool,
|
|
52
|
-
onCollectionClick: PropTypes.func,
|
|
53
|
-
onCollectionToggle: PropTypes.func,
|
|
54
|
-
onItemClick: PropTypes.func,
|
|
55
|
-
treeLabel: PropTypes.string,
|
|
56
|
-
renderContent: PropTypes.func,
|
|
57
|
-
sortOrder: PropTypes.func,
|
|
58
|
-
animation: PropTypes.bool
|
|
59
|
-
};
|
|
60
34
|
const allowedProps = ['collections', 'items', 'rootId', 'expanded', 'defaultExpanded', 'selectionType', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'showRootCollection', 'onCollectionClick', 'onCollectionToggle', 'onItemClick', 'treeLabel', 'renderContent', 'sortOrder', 'animation'];
|
|
61
|
-
export {
|
|
35
|
+
export { allowedProps };
|
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.TreeButton = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
10
9
|
var _Img = require("@instructure/ui-img/lib/Img");
|
|
11
10
|
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
12
11
|
var _emotion = require("@instructure/emotion");
|
|
@@ -15,7 +14,7 @@ var _theme = _interopRequireDefault(require("./theme"));
|
|
|
15
14
|
var _props = require("./props");
|
|
16
15
|
var _TreeBrowserContext = _interopRequireDefault(require("../TreeBrowserContext"));
|
|
17
16
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
18
|
-
var _dec,
|
|
17
|
+
var _dec, _class, _TreeButton;
|
|
19
18
|
/*
|
|
20
19
|
* The MIT License (MIT)
|
|
21
20
|
*
|
|
@@ -46,7 +45,7 @@ parent: TreeBrowser
|
|
|
46
45
|
id: TreeBrowser.Button
|
|
47
46
|
---
|
|
48
47
|
**/
|
|
49
|
-
let TreeButton = exports.TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
|
|
48
|
+
let TreeButton = exports.TreeButton = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_TreeButton = class TreeButton extends _react.Component {
|
|
50
49
|
constructor(...args) {
|
|
51
50
|
super(...args);
|
|
52
51
|
this.ref = null;
|
|
@@ -148,15 +147,16 @@ let TreeButton = exports.TreeButton = (_dec = (0, _emotion.withStyle)(_styles.de
|
|
|
148
147
|
tabIndex: -1,
|
|
149
148
|
type: "button",
|
|
150
149
|
css: styles === null || styles === void 0 ? void 0 : styles.treeButton,
|
|
150
|
+
"data-cid": "TreeButton",
|
|
151
151
|
children: buttonContent
|
|
152
152
|
});
|
|
153
153
|
}
|
|
154
|
-
}, _TreeButton.displayName = "TreeButton", _TreeButton.componentId = 'TreeBrowser.Button', _TreeButton.allowedProps = _props.allowedProps, _TreeButton.
|
|
154
|
+
}, _TreeButton.displayName = "TreeButton", _TreeButton.componentId = 'TreeBrowser.Button', _TreeButton.allowedProps = _props.allowedProps, _TreeButton.contextType = _TreeBrowserContext.default, _TreeButton.defaultProps = {
|
|
155
155
|
type: 'treeButton',
|
|
156
156
|
size: 'medium',
|
|
157
157
|
variant: 'folderTree',
|
|
158
158
|
selected: false,
|
|
159
159
|
focused: false,
|
|
160
160
|
expanded: false
|
|
161
|
-
}, _TreeButton)) || _class)
|
|
161
|
+
}, _TreeButton)) || _class);
|
|
162
162
|
var _default = exports.default = TreeButton;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
|
-
exports.
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
6
|
+
exports.allowedProps = void 0;
|
|
9
7
|
/*
|
|
10
8
|
* The MIT License (MIT)
|
|
11
9
|
*
|
|
@@ -30,23 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
30
28
|
* SOFTWARE.
|
|
31
29
|
*/
|
|
32
30
|
|
|
33
|
-
const propTypes = exports.propTypes = {
|
|
34
|
-
id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
35
|
-
name: _propTypes.default.string,
|
|
36
|
-
descriptor: _propTypes.default.string,
|
|
37
|
-
type: _propTypes.default.string,
|
|
38
|
-
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
|
|
39
|
-
variant: _propTypes.default.oneOf(['folderTree', 'indent']),
|
|
40
|
-
collectionIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
41
|
-
collectionIconExpanded: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
42
|
-
itemIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
43
|
-
thumbnail: _propTypes.default.string,
|
|
44
|
-
onClick: _propTypes.default.func,
|
|
45
|
-
expanded: _propTypes.default.bool,
|
|
46
|
-
selected: _propTypes.default.bool,
|
|
47
|
-
focused: _propTypes.default.bool,
|
|
48
|
-
level: _propTypes.default.number,
|
|
49
|
-
containerRef: _propTypes.default.func,
|
|
50
|
-
renderContent: _propTypes.default.func
|
|
51
|
-
};
|
|
52
31
|
const allowedProps = exports.allowedProps = ['id', 'name', 'descriptor', 'type', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'thumbnail', 'onClick', 'expanded', 'selected', 'focused', 'level', 'containerRef', 'renderContent'];
|
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.TreeCollection = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
10
9
|
var _emotion = require("@instructure/emotion");
|
|
11
10
|
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
|
12
11
|
var _TreeButton = require("../TreeButton");
|
|
@@ -16,7 +15,7 @@ var _props = require("./props");
|
|
|
16
15
|
var _TreeBrowserContext = _interopRequireDefault(require("../TreeBrowserContext"));
|
|
17
16
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
18
17
|
var _react2 = require("@emotion/react");
|
|
19
|
-
var _dec,
|
|
18
|
+
var _dec, _class, _TreeCollection;
|
|
20
19
|
/*
|
|
21
20
|
* The MIT License (MIT)
|
|
22
21
|
*
|
|
@@ -46,7 +45,7 @@ parent: TreeBrowser
|
|
|
46
45
|
id: TreeBrowser.Collection
|
|
47
46
|
---
|
|
48
47
|
**/
|
|
49
|
-
let TreeCollection = exports.TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
|
|
48
|
+
let TreeCollection = exports.TreeCollection = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_TreeCollection = class TreeCollection extends _react.Component {
|
|
50
49
|
constructor(props) {
|
|
51
50
|
super(props);
|
|
52
51
|
this.ref = null;
|
|
@@ -347,6 +346,7 @@ let TreeCollection = exports.TreeCollection = (_dec = (0, _emotion.withStyle)(_s
|
|
|
347
346
|
type: 'collection'
|
|
348
347
|
}),
|
|
349
348
|
...ariaSelected,
|
|
349
|
+
"data-cid": "TreeCollection",
|
|
350
350
|
children: [(0, _jsxRuntime.jsx)(_TreeButton.TreeButton, {
|
|
351
351
|
...collectionProps
|
|
352
352
|
}), expanded && this.childCount > 0 && (0, _jsxRuntime.jsx)("ul", {
|
|
@@ -357,7 +357,7 @@ let TreeCollection = exports.TreeCollection = (_dec = (0, _emotion.withStyle)(_s
|
|
|
357
357
|
})]
|
|
358
358
|
});
|
|
359
359
|
}
|
|
360
|
-
}, _TreeCollection.displayName = "TreeCollection", _TreeCollection.componentId = 'TreeBrowser.Collection', _TreeCollection.allowedProps = _props.allowedProps, _TreeCollection.
|
|
360
|
+
}, _TreeCollection.displayName = "TreeCollection", _TreeCollection.componentId = 'TreeBrowser.Collection', _TreeCollection.allowedProps = _props.allowedProps, _TreeCollection.contextType = _TreeBrowserContext.default, _TreeCollection.defaultProps = {
|
|
361
361
|
collections: [],
|
|
362
362
|
items: [],
|
|
363
363
|
expanded: false,
|
|
@@ -367,5 +367,5 @@ let TreeCollection = exports.TreeCollection = (_dec = (0, _emotion.withStyle)(_s
|
|
|
367
367
|
getItemProps: props => props,
|
|
368
368
|
getCollectionProps: props => props,
|
|
369
369
|
isCollectionFlattened: false
|
|
370
|
-
}, _TreeCollection)) || _class)
|
|
370
|
+
}, _TreeCollection)) || _class);
|
|
371
371
|
var _default = exports.default = TreeCollection;
|
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
|
-
exports.
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
|
10
|
-
var _TreeNode = require("../TreeNode");
|
|
6
|
+
exports.allowedProps = void 0;
|
|
11
7
|
/*
|
|
12
8
|
* The MIT License (MIT)
|
|
13
9
|
*
|
|
@@ -32,32 +28,4 @@ var _TreeNode = require("../TreeNode");
|
|
|
32
28
|
* SOFTWARE.
|
|
33
29
|
*/
|
|
34
30
|
|
|
35
|
-
const propTypes = exports.propTypes = {
|
|
36
|
-
id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
37
|
-
name: _propTypes.default.string,
|
|
38
|
-
descriptor: _propTypes.default.string,
|
|
39
|
-
items: _propTypes.default.array,
|
|
40
|
-
collections: _propTypes.default.array,
|
|
41
|
-
expanded: _propTypes.default.bool,
|
|
42
|
-
selection: _propTypes.default.string,
|
|
43
|
-
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
|
|
44
|
-
variant: _propTypes.default.oneOf(['folderTree', 'indent']),
|
|
45
|
-
collectionIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
46
|
-
collectionIconExpanded: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
47
|
-
itemIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
48
|
-
getItemProps: _propTypes.default.func,
|
|
49
|
-
getCollectionProps: _propTypes.default.func,
|
|
50
|
-
onItemClick: _propTypes.default.func,
|
|
51
|
-
onCollectionClick: _propTypes.default.func,
|
|
52
|
-
onKeyDown: _propTypes.default.func,
|
|
53
|
-
numChildren: _propTypes.default.number,
|
|
54
|
-
level: _propTypes.default.number.isRequired,
|
|
55
|
-
position: _propTypes.default.number,
|
|
56
|
-
renderBeforeItems: _Children.Children.oneOf([_TreeNode.TreeNode]),
|
|
57
|
-
renderAfterItems: _Children.Children.oneOf([_TreeNode.TreeNode]),
|
|
58
|
-
containerRef: _propTypes.default.func,
|
|
59
|
-
isCollectionFlattened: _propTypes.default.bool,
|
|
60
|
-
renderContent: _propTypes.default.func,
|
|
61
|
-
compareFunc: _propTypes.default.func
|
|
62
|
-
};
|
|
63
31
|
const allowedProps = exports.allowedProps = ['id', 'name', 'descriptor', 'items', 'collections', 'expanded', 'selection', 'size', 'variant', 'collectionIcon', 'collectionIconExpanded', 'itemIcon', 'getItemProps', 'getCollectionProps', 'onItemClick', 'onCollectionClick', 'onKeyDown', 'numChildren', 'level', 'position', 'renderBeforeItems', 'renderAfterItems', 'containerRef', 'isCollectionFlattened', 'renderContent'];
|
|
@@ -8,14 +8,13 @@ exports.default = exports.TreeNode = void 0;
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _Img = require("@instructure/ui-img/lib/Img");
|
|
10
10
|
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
11
|
-
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
12
11
|
var _emotion = require("@instructure/emotion");
|
|
13
12
|
var _styles = _interopRequireDefault(require("../TreeButton/styles"));
|
|
14
13
|
var _theme = _interopRequireDefault(require("../TreeButton/theme"));
|
|
15
14
|
var _props = require("./props");
|
|
16
15
|
var _TreeBrowserContext = _interopRequireDefault(require("../TreeBrowserContext"));
|
|
17
16
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
18
|
-
var _dec,
|
|
17
|
+
var _dec, _class, _TreeNode;
|
|
19
18
|
/*
|
|
20
19
|
* The MIT License (MIT)
|
|
21
20
|
*
|
|
@@ -48,7 +47,7 @@ id: TreeBrowser.Node
|
|
|
48
47
|
A helper class used to render the :renderBeforeItems and :renderAfterItems
|
|
49
48
|
in the TreeBrowser.
|
|
50
49
|
**/
|
|
51
|
-
let TreeNode = exports.TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
|
|
50
|
+
let TreeNode = exports.TreeNode = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_TreeNode = class TreeNode extends _react.Component {
|
|
52
51
|
constructor(...args) {
|
|
53
52
|
super(...args);
|
|
54
53
|
this.ref = null;
|
|
@@ -102,6 +101,7 @@ let TreeNode = exports.TreeNode = (_dec = (0, _emotion.withStyle)(_styles.defaul
|
|
|
102
101
|
ref: this.handleRef,
|
|
103
102
|
tabIndex: -1,
|
|
104
103
|
css: styles === null || styles === void 0 ? void 0 : styles.treeButton,
|
|
104
|
+
"data-cid": "TreeNode",
|
|
105
105
|
children: (0, _jsxRuntime.jsxs)("span", {
|
|
106
106
|
css: styles === null || styles === void 0 ? void 0 : styles.layout,
|
|
107
107
|
children: [this.renderItemImage(), (0, _jsxRuntime.jsx)("span", {
|
|
@@ -111,10 +111,10 @@ let TreeNode = exports.TreeNode = (_dec = (0, _emotion.withStyle)(_styles.defaul
|
|
|
111
111
|
})
|
|
112
112
|
});
|
|
113
113
|
}
|
|
114
|
-
}, _TreeNode.displayName = "TreeNode", _TreeNode.componentId = 'TreeBrowser.Node', _TreeNode.allowedProps = _props.allowedProps, _TreeNode.
|
|
114
|
+
}, _TreeNode.displayName = "TreeNode", _TreeNode.componentId = 'TreeBrowser.Node', _TreeNode.allowedProps = _props.allowedProps, _TreeNode.contextType = _TreeBrowserContext.default, _TreeNode.defaultProps = {
|
|
115
115
|
size: 'medium',
|
|
116
116
|
variant: 'folderTree',
|
|
117
117
|
selected: false,
|
|
118
118
|
focused: false
|
|
119
|
-
}, _TreeNode)) || _class)
|
|
119
|
+
}, _TreeNode)) || _class);
|
|
120
120
|
var _default = exports.default = TreeNode;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
|
-
exports.
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
6
|
+
exports.allowedProps = void 0;
|
|
9
7
|
/*
|
|
10
8
|
* The MIT License (MIT)
|
|
11
9
|
*
|
|
@@ -30,18 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
30
28
|
* SOFTWARE.
|
|
31
29
|
*/
|
|
32
30
|
|
|
33
|
-
const propTypes = exports.propTypes = {
|
|
34
|
-
id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
35
|
-
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
|
|
36
|
-
variant: _propTypes.default.oneOf(['folderTree', 'indent']),
|
|
37
|
-
selected: _propTypes.default.bool,
|
|
38
|
-
focused: _propTypes.default.bool,
|
|
39
|
-
itemIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
40
|
-
thumbnail: _propTypes.default.string,
|
|
41
|
-
level: _propTypes.default.number,
|
|
42
|
-
children: _propTypes.default.node,
|
|
43
|
-
containerRef: _propTypes.default.func,
|
|
44
|
-
onKeyDown: _propTypes.default.func,
|
|
45
|
-
onClick: _propTypes.default.func
|
|
46
|
-
};
|
|
47
31
|
const allowedProps = exports.allowedProps = ['id', 'size', 'variant', 'selected', 'focused', 'itemIcon', 'thumbnail', 'level', 'children', 'containerRef', 'onKeyDown', 'onClick'];
|