@instructure/ui-breadcrumb 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/Breadcrumb/BreadcrumbLink/index.js +9 -5
- package/es/Breadcrumb/BreadcrumbLink/props.js +1 -12
- package/es/Breadcrumb/index.js +6 -6
- package/es/Breadcrumb/props.js +1 -10
- package/lib/Breadcrumb/BreadcrumbLink/index.js +10 -4
- package/lib/Breadcrumb/BreadcrumbLink/props.js +1 -13
- package/lib/Breadcrumb/index.js +5 -5
- package/lib/Breadcrumb/props.js +1 -11
- package/package.json +16 -19
- package/src/Breadcrumb/BreadcrumbLink/index.tsx +2 -4
- package/src/Breadcrumb/BreadcrumbLink/props.ts +1 -16
- package/src/Breadcrumb/index.tsx +12 -7
- package/src/Breadcrumb/props.ts +2 -17
- package/tsconfig.build.json +0 -2
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/Breadcrumb/BreadcrumbLink/index.d.ts +0 -10
- package/types/Breadcrumb/BreadcrumbLink/index.d.ts.map +1 -1
- package/types/Breadcrumb/BreadcrumbLink/props.d.ts +2 -3
- package/types/Breadcrumb/BreadcrumbLink/props.d.ts.map +1 -1
- package/types/Breadcrumb/index.d.ts +2 -8
- package/types/Breadcrumb/index.d.ts.map +1 -1
- package/types/Breadcrumb/props.d.ts +2 -3
- package/types/Breadcrumb/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-breadcrumb
|
|
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,3 @@
|
|
|
1
|
-
var _dec, _class, _BreadcrumbLink;
|
|
2
1
|
/*
|
|
3
2
|
* The MIT License (MIT)
|
|
4
3
|
*
|
|
@@ -27,9 +26,8 @@ import { Component } from 'react';
|
|
|
27
26
|
import { TruncateText } from '@instructure/ui-truncate-text';
|
|
28
27
|
import { Link } from '@instructure/ui-link';
|
|
29
28
|
import { omitProps } from '@instructure/ui-react-utils';
|
|
30
|
-
import { testable } from '@instructure/ui-testable';
|
|
31
29
|
import { Tooltip } from '@instructure/ui-tooltip';
|
|
32
|
-
import {
|
|
30
|
+
import { allowedProps } from './props';
|
|
33
31
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
34
32
|
/**
|
|
35
33
|
---
|
|
@@ -37,7 +35,8 @@ parent: Breadcrumb
|
|
|
37
35
|
id: Breadcrumb.Link
|
|
38
36
|
---
|
|
39
37
|
**/
|
|
40
|
-
|
|
38
|
+
|
|
39
|
+
class BreadcrumbLink extends Component {
|
|
41
40
|
constructor(props) {
|
|
42
41
|
super(props);
|
|
43
42
|
this.ref = null;
|
|
@@ -97,6 +96,7 @@ let BreadcrumbLink = (_dec = testable(), _dec(_class = (_BreadcrumbLink = class
|
|
|
97
96
|
role: 'text'
|
|
98
97
|
})
|
|
99
98
|
}),
|
|
99
|
+
"data-cid": "BreadcrumbLink",
|
|
100
100
|
children: _jsx(TruncateText, {
|
|
101
101
|
onUpdate: isTruncated => this.handleTruncation(isTruncated),
|
|
102
102
|
children: _jsx("span", {
|
|
@@ -107,6 +107,10 @@ let BreadcrumbLink = (_dec = testable(), _dec(_class = (_BreadcrumbLink = class
|
|
|
107
107
|
})
|
|
108
108
|
});
|
|
109
109
|
}
|
|
110
|
-
}
|
|
110
|
+
}
|
|
111
|
+
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
112
|
+
BreadcrumbLink.componentId = 'Breadcrumb.Link';
|
|
113
|
+
BreadcrumbLink.allowedProps = allowedProps;
|
|
114
|
+
BreadcrumbLink.defaultProps = {};
|
|
111
115
|
export default BreadcrumbLink;
|
|
112
116
|
export { BreadcrumbLink };
|
|
@@ -22,16 +22,5 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
import PropTypes from 'prop-types';
|
|
26
|
-
const propTypes = {
|
|
27
|
-
children: PropTypes.node.isRequired,
|
|
28
|
-
href: PropTypes.string,
|
|
29
|
-
onClick: PropTypes.func,
|
|
30
|
-
onMouseEnter: PropTypes.func,
|
|
31
|
-
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
|
32
|
-
renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
33
|
-
iconPlacement: PropTypes.oneOf(['start', 'end']),
|
|
34
|
-
isCurrentPage: PropTypes.bool
|
|
35
|
-
};
|
|
36
25
|
const allowedProps = ['children', 'href', 'iconPlacement', 'onClick', 'onMouseEnter', 'renderIcon', 'size', 'isCurrentPage'];
|
|
37
|
-
export {
|
|
26
|
+
export { allowedProps };
|
package/es/Breadcrumb/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _dec,
|
|
1
|
+
var _dec, _class, _Breadcrumb;
|
|
2
2
|
/*
|
|
3
3
|
* The MIT License (MIT)
|
|
4
4
|
*
|
|
@@ -25,20 +25,19 @@ var _dec, _dec2, _class, _Breadcrumb;
|
|
|
25
25
|
|
|
26
26
|
import { isValidElement, cloneElement, Children, Component } from 'react';
|
|
27
27
|
import { View } from '@instructure/ui-view';
|
|
28
|
-
import { testable } from '@instructure/ui-testable';
|
|
29
28
|
import { withStyle } from '@instructure/emotion';
|
|
30
29
|
import { IconArrowOpenEndSolid } from '@instructure/ui-icons';
|
|
31
30
|
import { BreadcrumbLink } from './BreadcrumbLink';
|
|
32
31
|
import generateStyle from './styles';
|
|
33
32
|
import generateComponentTheme from './theme';
|
|
34
|
-
import {
|
|
33
|
+
import { allowedProps } from './props';
|
|
35
34
|
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
36
35
|
/**
|
|
37
36
|
---
|
|
38
37
|
category: components
|
|
39
38
|
---
|
|
40
39
|
**/
|
|
41
|
-
let Breadcrumb = (_dec = withStyle(generateStyle, generateComponentTheme),
|
|
40
|
+
let Breadcrumb = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Breadcrumb = class Breadcrumb extends Component {
|
|
42
41
|
constructor(...args) {
|
|
43
42
|
super(...args);
|
|
44
43
|
this.ref = null;
|
|
@@ -96,15 +95,16 @@ let Breadcrumb = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2
|
|
|
96
95
|
margin: this.props.margin,
|
|
97
96
|
"aria-label": this.props.label,
|
|
98
97
|
elementRef: this.handleRef,
|
|
98
|
+
"data-cid": "Breadcrumb",
|
|
99
99
|
children: _jsx("ol", {
|
|
100
100
|
css: styles === null || styles === void 0 ? void 0 : styles.breadcrumb,
|
|
101
101
|
children: this.renderChildren()
|
|
102
102
|
})
|
|
103
103
|
});
|
|
104
104
|
}
|
|
105
|
-
}, _Breadcrumb.displayName = "Breadcrumb", _Breadcrumb.componentId = 'Breadcrumb', _Breadcrumb.
|
|
105
|
+
}, _Breadcrumb.displayName = "Breadcrumb", _Breadcrumb.componentId = 'Breadcrumb', _Breadcrumb.allowedProps = allowedProps, _Breadcrumb.defaultProps = {
|
|
106
106
|
size: 'medium',
|
|
107
107
|
children: null
|
|
108
|
-
}, _Breadcrumb.Link = BreadcrumbLink, _Breadcrumb)) || _class)
|
|
108
|
+
}, _Breadcrumb.Link = BreadcrumbLink, _Breadcrumb)) || _class);
|
|
109
109
|
export default Breadcrumb;
|
|
110
110
|
export { Breadcrumb, BreadcrumbLink };
|
package/es/Breadcrumb/props.js
CHANGED
|
@@ -22,14 +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 { BreadcrumbLink } from './BreadcrumbLink';
|
|
28
|
-
const propTypes = {
|
|
29
|
-
children: Children.oneOf([BreadcrumbLink]),
|
|
30
|
-
label: PropTypes.string.isRequired,
|
|
31
|
-
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
|
32
|
-
margin: PropTypes.string
|
|
33
|
-
};
|
|
34
25
|
const allowedProps = ['children', 'label', 'margin', 'size'];
|
|
35
|
-
export {
|
|
26
|
+
export { allowedProps };
|
|
@@ -8,11 +8,9 @@ var _react = require("react");
|
|
|
8
8
|
var _TruncateText = require("@instructure/ui-truncate-text/lib/TruncateText");
|
|
9
9
|
var _Link = require("@instructure/ui-link/lib/Link");
|
|
10
10
|
var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
|
|
11
|
-
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
12
11
|
var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
|
|
13
12
|
var _props = require("./props");
|
|
14
13
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
15
|
-
var _dec, _class, _BreadcrumbLink;
|
|
16
14
|
/*
|
|
17
15
|
* The MIT License (MIT)
|
|
18
16
|
*
|
|
@@ -36,13 +34,15 @@ var _dec, _class, _BreadcrumbLink;
|
|
|
36
34
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
37
35
|
* SOFTWARE.
|
|
38
36
|
*/
|
|
37
|
+
|
|
39
38
|
/**
|
|
40
39
|
---
|
|
41
40
|
parent: Breadcrumb
|
|
42
41
|
id: Breadcrumb.Link
|
|
43
42
|
---
|
|
44
43
|
**/
|
|
45
|
-
|
|
44
|
+
|
|
45
|
+
class BreadcrumbLink extends _react.Component {
|
|
46
46
|
constructor(props) {
|
|
47
47
|
super(props);
|
|
48
48
|
this.ref = null;
|
|
@@ -102,6 +102,7 @@ let BreadcrumbLink = exports.BreadcrumbLink = (_dec = (0, _testable.testable)(),
|
|
|
102
102
|
role: 'text'
|
|
103
103
|
})
|
|
104
104
|
}),
|
|
105
|
+
"data-cid": "BreadcrumbLink",
|
|
105
106
|
children: (0, _jsxRuntime.jsx)(_TruncateText.TruncateText, {
|
|
106
107
|
onUpdate: isTruncated => this.handleTruncation(isTruncated),
|
|
107
108
|
children: (0, _jsxRuntime.jsx)("span", {
|
|
@@ -112,5 +113,10 @@ let BreadcrumbLink = exports.BreadcrumbLink = (_dec = (0, _testable.testable)(),
|
|
|
112
113
|
})
|
|
113
114
|
});
|
|
114
115
|
}
|
|
115
|
-
}
|
|
116
|
+
}
|
|
117
|
+
exports.BreadcrumbLink = BreadcrumbLink;
|
|
118
|
+
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
119
|
+
BreadcrumbLink.componentId = 'Breadcrumb.Link';
|
|
120
|
+
BreadcrumbLink.allowedProps = _props.allowedProps;
|
|
121
|
+
BreadcrumbLink.defaultProps = {};
|
|
116
122
|
var _default = exports.default = BreadcrumbLink;
|
|
@@ -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,14 +28,4 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
30
28
|
* SOFTWARE.
|
|
31
29
|
*/
|
|
32
30
|
|
|
33
|
-
const propTypes = exports.propTypes = {
|
|
34
|
-
children: _propTypes.default.node.isRequired,
|
|
35
|
-
href: _propTypes.default.string,
|
|
36
|
-
onClick: _propTypes.default.func,
|
|
37
|
-
onMouseEnter: _propTypes.default.func,
|
|
38
|
-
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
|
|
39
|
-
renderIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
40
|
-
iconPlacement: _propTypes.default.oneOf(['start', 'end']),
|
|
41
|
-
isCurrentPage: _propTypes.default.bool
|
|
42
|
-
};
|
|
43
31
|
const allowedProps = exports.allowedProps = ['children', 'href', 'iconPlacement', 'onClick', 'onMouseEnter', 'renderIcon', 'size', 'isCurrentPage'];
|
package/lib/Breadcrumb/index.js
CHANGED
|
@@ -14,7 +14,6 @@ Object.defineProperty(exports, "BreadcrumbLink", {
|
|
|
14
14
|
exports.default = void 0;
|
|
15
15
|
var _react = require("react");
|
|
16
16
|
var _View = require("@instructure/ui-view/lib/View");
|
|
17
|
-
var _testable = require("@instructure/ui-testable/lib/testable.js");
|
|
18
17
|
var _emotion = require("@instructure/emotion");
|
|
19
18
|
var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
|
|
20
19
|
var _BreadcrumbLink = require("./BreadcrumbLink");
|
|
@@ -22,7 +21,7 @@ var _styles = _interopRequireDefault(require("./styles"));
|
|
|
22
21
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
23
22
|
var _props = require("./props");
|
|
24
23
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
25
|
-
var _dec,
|
|
24
|
+
var _dec, _class, _Breadcrumb;
|
|
26
25
|
/*
|
|
27
26
|
* The MIT License (MIT)
|
|
28
27
|
*
|
|
@@ -51,7 +50,7 @@ var _dec, _dec2, _class, _Breadcrumb;
|
|
|
51
50
|
category: components
|
|
52
51
|
---
|
|
53
52
|
**/
|
|
54
|
-
let Breadcrumb = exports.Breadcrumb = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
|
|
53
|
+
let Breadcrumb = exports.Breadcrumb = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Breadcrumb = class Breadcrumb extends _react.Component {
|
|
55
54
|
constructor(...args) {
|
|
56
55
|
super(...args);
|
|
57
56
|
this.ref = null;
|
|
@@ -109,14 +108,15 @@ let Breadcrumb = exports.Breadcrumb = (_dec = (0, _emotion.withStyle)(_styles.de
|
|
|
109
108
|
margin: this.props.margin,
|
|
110
109
|
"aria-label": this.props.label,
|
|
111
110
|
elementRef: this.handleRef,
|
|
111
|
+
"data-cid": "Breadcrumb",
|
|
112
112
|
children: (0, _jsxRuntime.jsx)("ol", {
|
|
113
113
|
css: styles === null || styles === void 0 ? void 0 : styles.breadcrumb,
|
|
114
114
|
children: this.renderChildren()
|
|
115
115
|
})
|
|
116
116
|
});
|
|
117
117
|
}
|
|
118
|
-
}, _Breadcrumb.displayName = "Breadcrumb", _Breadcrumb.componentId = 'Breadcrumb', _Breadcrumb.
|
|
118
|
+
}, _Breadcrumb.displayName = "Breadcrumb", _Breadcrumb.componentId = 'Breadcrumb', _Breadcrumb.allowedProps = _props.allowedProps, _Breadcrumb.defaultProps = {
|
|
119
119
|
size: 'medium',
|
|
120
120
|
children: null
|
|
121
|
-
}, _Breadcrumb.Link = _BreadcrumbLink.BreadcrumbLink, _Breadcrumb)) || _class)
|
|
121
|
+
}, _Breadcrumb.Link = _BreadcrumbLink.BreadcrumbLink, _Breadcrumb)) || _class);
|
|
122
122
|
var _default = exports.default = Breadcrumb;
|
package/lib/Breadcrumb/props.js
CHANGED
|
@@ -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 _BreadcrumbLink = require("./BreadcrumbLink");
|
|
6
|
+
exports.allowedProps = void 0;
|
|
11
7
|
/*
|
|
12
8
|
* The MIT License (MIT)
|
|
13
9
|
*
|
|
@@ -32,10 +28,4 @@ var _BreadcrumbLink = require("./BreadcrumbLink");
|
|
|
32
28
|
* SOFTWARE.
|
|
33
29
|
*/
|
|
34
30
|
|
|
35
|
-
const propTypes = exports.propTypes = {
|
|
36
|
-
children: _Children.Children.oneOf([_BreadcrumbLink.BreadcrumbLink]),
|
|
37
|
-
label: _propTypes.default.string.isRequired,
|
|
38
|
-
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
|
|
39
|
-
margin: _propTypes.default.string
|
|
40
|
-
};
|
|
41
31
|
const allowedProps = exports.allowedProps = ['children', 'label', 'margin', 'size'];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-breadcrumb",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "11.0.1-snapshot-0",
|
|
4
4
|
"description": "A breadcrumb component",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -23,31 +23,28 @@
|
|
|
23
23
|
},
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@instructure/ui-axe-check": "
|
|
27
|
-
"@instructure/ui-babel-preset": "
|
|
28
|
-
"@instructure/ui-scripts": "
|
|
29
|
-
"@instructure/ui-themes": "
|
|
26
|
+
"@instructure/ui-axe-check": "11.0.1-snapshot-0",
|
|
27
|
+
"@instructure/ui-babel-preset": "11.0.1-snapshot-0",
|
|
28
|
+
"@instructure/ui-scripts": "11.0.1-snapshot-0",
|
|
29
|
+
"@instructure/ui-themes": "11.0.1-snapshot-0",
|
|
30
30
|
"@testing-library/jest-dom": "^6.6.3",
|
|
31
|
-
"@testing-library/react": "
|
|
31
|
+
"@testing-library/react": "15.0.7",
|
|
32
32
|
"vitest": "^3.2.2"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@babel/runtime": "^7.27.6",
|
|
36
|
-
"@instructure/emotion": "
|
|
37
|
-
"@instructure/shared-types": "
|
|
38
|
-
"@instructure/ui-icons": "
|
|
39
|
-
"@instructure/ui-link": "
|
|
40
|
-
"@instructure/ui-
|
|
41
|
-
"@instructure/ui-
|
|
42
|
-
"@instructure/ui-
|
|
43
|
-
"@instructure/ui-
|
|
44
|
-
"@instructure/ui-
|
|
45
|
-
"@instructure/ui-utils": "10.26.1",
|
|
46
|
-
"@instructure/ui-view": "10.26.1",
|
|
47
|
-
"prop-types": "^15.8.1"
|
|
36
|
+
"@instructure/emotion": "11.0.1-snapshot-0",
|
|
37
|
+
"@instructure/shared-types": "11.0.1-snapshot-0",
|
|
38
|
+
"@instructure/ui-icons": "11.0.1-snapshot-0",
|
|
39
|
+
"@instructure/ui-link": "11.0.1-snapshot-0",
|
|
40
|
+
"@instructure/ui-react-utils": "11.0.1-snapshot-0",
|
|
41
|
+
"@instructure/ui-tooltip": "11.0.1-snapshot-0",
|
|
42
|
+
"@instructure/ui-truncate-text": "11.0.1-snapshot-0",
|
|
43
|
+
"@instructure/ui-utils": "11.0.1-snapshot-0",
|
|
44
|
+
"@instructure/ui-view": "11.0.1-snapshot-0"
|
|
48
45
|
},
|
|
49
46
|
"peerDependencies": {
|
|
50
|
-
"react": ">=
|
|
47
|
+
"react": ">=18 <=19"
|
|
51
48
|
},
|
|
52
49
|
"publishConfig": {
|
|
53
50
|
"access": "public"
|
|
@@ -27,10 +27,9 @@ import { Component } from 'react'
|
|
|
27
27
|
import { TruncateText } from '@instructure/ui-truncate-text'
|
|
28
28
|
import { Link } from '@instructure/ui-link'
|
|
29
29
|
import { omitProps } from '@instructure/ui-react-utils'
|
|
30
|
-
import { testable } from '@instructure/ui-testable'
|
|
31
30
|
import { Tooltip } from '@instructure/ui-tooltip'
|
|
32
31
|
|
|
33
|
-
import {
|
|
32
|
+
import { allowedProps } from './props'
|
|
34
33
|
import type { BreadcrumbLinkProps, BreadcrumbLinkState } from './props'
|
|
35
34
|
|
|
36
35
|
/**
|
|
@@ -40,14 +39,12 @@ id: Breadcrumb.Link
|
|
|
40
39
|
---
|
|
41
40
|
**/
|
|
42
41
|
|
|
43
|
-
@testable()
|
|
44
42
|
class BreadcrumbLink extends Component<
|
|
45
43
|
BreadcrumbLinkProps,
|
|
46
44
|
BreadcrumbLinkState
|
|
47
45
|
> {
|
|
48
46
|
static readonly componentId = 'Breadcrumb.Link'
|
|
49
47
|
|
|
50
|
-
static propTypes = propTypes
|
|
51
48
|
static allowedProps = allowedProps
|
|
52
49
|
static defaultProps = {}
|
|
53
50
|
|
|
@@ -107,6 +104,7 @@ class BreadcrumbLink extends Component<
|
|
|
107
104
|
...(typeof children === 'string' && { 'aria-label': children }),
|
|
108
105
|
...(!isInteractive && { role: 'text' })
|
|
109
106
|
})}
|
|
107
|
+
data-cid="BreadcrumbLink"
|
|
110
108
|
>
|
|
111
109
|
<TruncateText
|
|
112
110
|
onUpdate={(isTruncated) => this.handleTruncation(isTruncated)}
|
|
@@ -23,12 +23,9 @@
|
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
25
|
import React from 'react'
|
|
26
|
-
import PropTypes from 'prop-types'
|
|
27
|
-
|
|
28
26
|
import type {
|
|
29
27
|
PickPropsWithExceptions,
|
|
30
28
|
OtherHTMLAttributes,
|
|
31
|
-
PropValidators,
|
|
32
29
|
Renderable
|
|
33
30
|
} from '@instructure/shared-types'
|
|
34
31
|
import type { ViewOwnProps } from '@instructure/ui-view'
|
|
@@ -86,18 +83,6 @@ type BreadcrumbLinkProps = PickPropsWithExceptions<
|
|
|
86
83
|
> &
|
|
87
84
|
BreadcrumbLinkOwnProps &
|
|
88
85
|
OtherHTMLAttributes<BreadcrumbLinkOwnProps & LinkProps>
|
|
89
|
-
|
|
90
|
-
const propTypes: PropValidators<PropKeys> = {
|
|
91
|
-
children: PropTypes.node.isRequired,
|
|
92
|
-
href: PropTypes.string,
|
|
93
|
-
onClick: PropTypes.func,
|
|
94
|
-
onMouseEnter: PropTypes.func,
|
|
95
|
-
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
|
96
|
-
renderIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
|
|
97
|
-
iconPlacement: PropTypes.oneOf(['start', 'end']),
|
|
98
|
-
isCurrentPage: PropTypes.bool
|
|
99
|
-
}
|
|
100
|
-
|
|
101
86
|
const allowedProps: AllowedPropKeys = [
|
|
102
87
|
'children',
|
|
103
88
|
'href',
|
|
@@ -114,4 +99,4 @@ type BreadcrumbLinkState = {
|
|
|
114
99
|
}
|
|
115
100
|
|
|
116
101
|
export type { BreadcrumbLinkProps, BreadcrumbLinkState }
|
|
117
|
-
export {
|
|
102
|
+
export { allowedProps }
|
package/src/Breadcrumb/index.tsx
CHANGED
|
@@ -22,10 +22,15 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
import {
|
|
25
|
+
import {
|
|
26
|
+
isValidElement,
|
|
27
|
+
cloneElement,
|
|
28
|
+
Children,
|
|
29
|
+
Component,
|
|
30
|
+
ReactElement
|
|
31
|
+
} from 'react'
|
|
26
32
|
|
|
27
33
|
import { View } from '@instructure/ui-view'
|
|
28
|
-
import { testable } from '@instructure/ui-testable'
|
|
29
34
|
|
|
30
35
|
import { withStyle } from '@instructure/emotion'
|
|
31
36
|
import { IconArrowOpenEndSolid } from '@instructure/ui-icons'
|
|
@@ -34,7 +39,7 @@ import { BreadcrumbLink } from './BreadcrumbLink'
|
|
|
34
39
|
import generateStyle from './styles'
|
|
35
40
|
import generateComponentTheme from './theme'
|
|
36
41
|
|
|
37
|
-
import {
|
|
42
|
+
import { allowedProps } from './props'
|
|
38
43
|
import type { BreadcrumbProps } from './props'
|
|
39
44
|
|
|
40
45
|
/**
|
|
@@ -44,11 +49,9 @@ category: components
|
|
|
44
49
|
**/
|
|
45
50
|
|
|
46
51
|
@withStyle(generateStyle, generateComponentTheme)
|
|
47
|
-
@testable()
|
|
48
52
|
class Breadcrumb extends Component<BreadcrumbProps> {
|
|
49
53
|
static readonly componentId = 'Breadcrumb'
|
|
50
54
|
|
|
51
|
-
static propTypes = propTypes
|
|
52
55
|
static allowedProps = allowedProps
|
|
53
56
|
static defaultProps = {
|
|
54
57
|
size: 'medium',
|
|
@@ -91,7 +94,8 @@ class Breadcrumb extends Component<BreadcrumbProps> {
|
|
|
91
94
|
return Children.map(children, (child, index) => {
|
|
92
95
|
const isLastElement = index === numChildren - 1
|
|
93
96
|
if (isValidElement(child)) {
|
|
94
|
-
const isCurrentPage =
|
|
97
|
+
const isCurrentPage =
|
|
98
|
+
(child as ReactElement<any>).props.isCurrentPage || false
|
|
95
99
|
if (isAriaCurrentSet && isCurrentPage) {
|
|
96
100
|
console.warn(
|
|
97
101
|
`Warning: Multiple elements with isCurrentPage=true found. Only one element should be set to current.`
|
|
@@ -105,7 +109,7 @@ class Breadcrumb extends Component<BreadcrumbProps> {
|
|
|
105
109
|
<li css={styles?.crumb} style={inlineStyle}>
|
|
106
110
|
{!isAriaCurrentSet &&
|
|
107
111
|
isLastElement &&
|
|
108
|
-
(child as React.ReactElement).props.isCurrentPage !== false
|
|
112
|
+
(child as React.ReactElement<any>).props.isCurrentPage !== false
|
|
109
113
|
? this.addAriaCurrent(child)
|
|
110
114
|
: child}
|
|
111
115
|
{index < numChildren - 1 && (
|
|
@@ -126,6 +130,7 @@ class Breadcrumb extends Component<BreadcrumbProps> {
|
|
|
126
130
|
margin={this.props.margin}
|
|
127
131
|
aria-label={this.props.label}
|
|
128
132
|
elementRef={this.handleRef}
|
|
133
|
+
data-cid="Breadcrumb"
|
|
129
134
|
>
|
|
130
135
|
<ol css={styles?.breadcrumb}>{this.renderChildren()}</ol>
|
|
131
136
|
</View>
|
package/src/Breadcrumb/props.ts
CHANGED
|
@@ -21,19 +21,12 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
-
|
|
25
|
-
import PropTypes from 'prop-types'
|
|
26
|
-
|
|
27
|
-
import { Children } from '@instructure/ui-prop-types'
|
|
28
|
-
|
|
29
|
-
import { BreadcrumbLink } from './BreadcrumbLink'
|
|
30
|
-
|
|
31
24
|
import type {
|
|
32
25
|
Spacing,
|
|
33
26
|
WithStyleProps,
|
|
34
27
|
ComponentStyle
|
|
35
28
|
} from '@instructure/emotion'
|
|
36
|
-
import type { BreadcrumbTheme
|
|
29
|
+
import type { BreadcrumbTheme } from '@instructure/shared-types'
|
|
37
30
|
|
|
38
31
|
type BreadcrumbOwnProps = {
|
|
39
32
|
/**
|
|
@@ -64,15 +57,7 @@ type BreadcrumbProps = BreadcrumbOwnProps &
|
|
|
64
57
|
WithStyleProps<BreadcrumbTheme, BreadcrumbStyle>
|
|
65
58
|
|
|
66
59
|
type BreadcrumbStyle = ComponentStyle<'breadcrumb' | 'crumb' | 'separator'>
|
|
67
|
-
|
|
68
|
-
const propTypes: PropValidators<PropKeys> = {
|
|
69
|
-
children: Children.oneOf([BreadcrumbLink]),
|
|
70
|
-
label: PropTypes.string.isRequired,
|
|
71
|
-
size: PropTypes.oneOf(['small', 'medium', 'large']),
|
|
72
|
-
margin: PropTypes.string
|
|
73
|
-
}
|
|
74
|
-
|
|
75
60
|
const allowedProps: AllowedPropKeys = ['children', 'label', 'margin', 'size']
|
|
76
61
|
|
|
77
62
|
export type { BreadcrumbProps, BreadcrumbStyle }
|
|
78
|
-
export {
|
|
63
|
+
export { allowedProps }
|
package/tsconfig.build.json
CHANGED
|
@@ -13,9 +13,7 @@
|
|
|
13
13
|
{ "path": "../shared-types/tsconfig.build.json" },
|
|
14
14
|
{ "path": "../ui-icons/tsconfig.build.json" },
|
|
15
15
|
{ "path": "../ui-link/tsconfig.build.json" },
|
|
16
|
-
{ "path": "../ui-prop-types/tsconfig.build.json" },
|
|
17
16
|
{ "path": "../ui-react-utils/tsconfig.build.json" },
|
|
18
|
-
{ "path": "../ui-testable/tsconfig.build.json" },
|
|
19
17
|
{ "path": "../ui-truncate-text/tsconfig.build.json" },
|
|
20
18
|
{ "path": "../ui-tooltip/tsconfig.build.json" },
|
|
21
19
|
{ "path": "../ui-utils/tsconfig.build.json" },
|