@instructure/ui-breadcrumb 10.26.1-snapshot-2 → 10.26.1
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 +2 -23
- package/es/Breadcrumb/BreadcrumbLink/index.js +5 -9
- package/es/Breadcrumb/BreadcrumbLink/props.js +12 -1
- package/es/Breadcrumb/index.js +6 -6
- package/es/Breadcrumb/props.js +10 -1
- package/lib/Breadcrumb/BreadcrumbLink/index.js +4 -10
- package/lib/Breadcrumb/BreadcrumbLink/props.js +13 -1
- package/lib/Breadcrumb/index.js +5 -5
- package/lib/Breadcrumb/props.js +11 -1
- package/package.json +19 -16
- package/src/Breadcrumb/BreadcrumbLink/index.tsx +4 -2
- package/src/Breadcrumb/BreadcrumbLink/props.ts +16 -1
- package/src/Breadcrumb/index.tsx +7 -12
- package/src/Breadcrumb/props.ts +17 -2
- package/tsconfig.build.json +2 -0
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/Breadcrumb/BreadcrumbLink/index.d.ts +10 -0
- package/types/Breadcrumb/BreadcrumbLink/index.d.ts.map +1 -1
- package/types/Breadcrumb/BreadcrumbLink/props.d.ts +3 -2
- package/types/Breadcrumb/BreadcrumbLink/props.d.ts.map +1 -1
- package/types/Breadcrumb/index.d.ts +8 -2
- package/types/Breadcrumb/index.d.ts.map +1 -1
- package/types/Breadcrumb/props.d.ts +3 -2
- package/types/Breadcrumb/props.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,30 +3,9 @@
|
|
|
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
|
-
## [10.26.1
|
|
6
|
+
## [10.26.1](https://github.com/instructure/instructure-ui/compare/v10.26.0...v10.26.1) (2025-10-06)
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
### Features
|
|
10
|
-
|
|
11
|
-
* **many:** instUI v11 release ([36f5438](https://github.com/instructure/instructure-ui/commit/36f54382669186227ba24798bbf7201ef2f5cd4c))
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
### BREAKING CHANGES
|
|
15
|
-
|
|
16
|
-
* **many:** InstUI v11 contains the following breaking changes:
|
|
17
|
-
- React 16 and 17 are no longer supported
|
|
18
|
-
- remove `PropTypes` from all packages
|
|
19
|
-
- remove `CodeEditor` component
|
|
20
|
-
- remove `@instui/theme-registry` package
|
|
21
|
-
- remove `@testable`, `@experimental`, `@hack` decorators
|
|
22
|
-
- InstUISettingsProvider's `as` prop is removed
|
|
23
|
-
- `canvas.use()`, `canvasHighContrast.use()` functions are removed
|
|
24
|
-
- `canvasThemeLocal`, `canvasHighContrastThemeLocal` are removed
|
|
25
|
-
- `variables` field on theme objects are removed
|
|
26
|
-
- remove deprecated props from Table: Row's `isStacked`, Body's
|
|
27
|
-
`isStacked`, `hover`, and `headers`
|
|
28
|
-
- `Table`'s `caption` prop is now required
|
|
29
|
-
- `ui-dom-utils`'s `getComputedStyle` can now return `undefined`
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-breadcrumb
|
|
30
9
|
|
|
31
10
|
|
|
32
11
|
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
var _dec, _class, _BreadcrumbLink;
|
|
1
2
|
/*
|
|
2
3
|
* The MIT License (MIT)
|
|
3
4
|
*
|
|
@@ -26,8 +27,9 @@ import { Component } from 'react';
|
|
|
26
27
|
import { TruncateText } from '@instructure/ui-truncate-text';
|
|
27
28
|
import { Link } from '@instructure/ui-link';
|
|
28
29
|
import { omitProps } from '@instructure/ui-react-utils';
|
|
30
|
+
import { testable } from '@instructure/ui-testable';
|
|
29
31
|
import { Tooltip } from '@instructure/ui-tooltip';
|
|
30
|
-
import { allowedProps } from './props';
|
|
32
|
+
import { propTypes, allowedProps } from './props';
|
|
31
33
|
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
|
|
32
34
|
/**
|
|
33
35
|
---
|
|
@@ -35,8 +37,7 @@ parent: Breadcrumb
|
|
|
35
37
|
id: Breadcrumb.Link
|
|
36
38
|
---
|
|
37
39
|
**/
|
|
38
|
-
|
|
39
|
-
class BreadcrumbLink extends Component {
|
|
40
|
+
let BreadcrumbLink = (_dec = testable(), _dec(_class = (_BreadcrumbLink = class BreadcrumbLink extends Component {
|
|
40
41
|
constructor(props) {
|
|
41
42
|
super(props);
|
|
42
43
|
this.ref = null;
|
|
@@ -96,7 +97,6 @@ class BreadcrumbLink extends Component {
|
|
|
96
97
|
role: 'text'
|
|
97
98
|
})
|
|
98
99
|
}),
|
|
99
|
-
"data-cid": "BreadcrumbLink",
|
|
100
100
|
children: _jsx(TruncateText, {
|
|
101
101
|
onUpdate: isTruncated => this.handleTruncation(isTruncated),
|
|
102
102
|
children: _jsx("span", {
|
|
@@ -107,10 +107,6 @@ class BreadcrumbLink extends Component {
|
|
|
107
107
|
})
|
|
108
108
|
});
|
|
109
109
|
}
|
|
110
|
-
}
|
|
111
|
-
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
112
|
-
BreadcrumbLink.componentId = 'Breadcrumb.Link';
|
|
113
|
-
BreadcrumbLink.allowedProps = allowedProps;
|
|
114
|
-
BreadcrumbLink.defaultProps = {};
|
|
110
|
+
}, _BreadcrumbLink.displayName = "BreadcrumbLink", _BreadcrumbLink.componentId = 'Breadcrumb.Link', _BreadcrumbLink.propTypes = propTypes, _BreadcrumbLink.allowedProps = allowedProps, _BreadcrumbLink.defaultProps = {}, _BreadcrumbLink)) || _class);
|
|
115
111
|
export default BreadcrumbLink;
|
|
116
112
|
export { BreadcrumbLink };
|
|
@@ -22,5 +22,16 @@
|
|
|
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
|
+
};
|
|
25
36
|
const allowedProps = ['children', 'href', 'iconPlacement', 'onClick', 'onMouseEnter', 'renderIcon', 'size', 'isCurrentPage'];
|
|
26
|
-
export { allowedProps };
|
|
37
|
+
export { propTypes, allowedProps };
|
package/es/Breadcrumb/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _dec, _class, _Breadcrumb;
|
|
1
|
+
var _dec, _dec2, _class, _Breadcrumb;
|
|
2
2
|
/*
|
|
3
3
|
* The MIT License (MIT)
|
|
4
4
|
*
|
|
@@ -25,19 +25,20 @@ var _dec, _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';
|
|
28
29
|
import { withStyle } from '@instructure/emotion';
|
|
29
30
|
import { IconArrowOpenEndSolid } from '@instructure/ui-icons';
|
|
30
31
|
import { BreadcrumbLink } from './BreadcrumbLink';
|
|
31
32
|
import generateStyle from './styles';
|
|
32
33
|
import generateComponentTheme from './theme';
|
|
33
|
-
import { allowedProps } from './props';
|
|
34
|
+
import { propTypes, allowedProps } from './props';
|
|
34
35
|
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
|
|
35
36
|
/**
|
|
36
37
|
---
|
|
37
38
|
category: components
|
|
38
39
|
---
|
|
39
40
|
**/
|
|
40
|
-
let Breadcrumb = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Breadcrumb = class Breadcrumb extends Component {
|
|
41
|
+
let Breadcrumb = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_Breadcrumb = class Breadcrumb extends Component {
|
|
41
42
|
constructor(...args) {
|
|
42
43
|
super(...args);
|
|
43
44
|
this.ref = null;
|
|
@@ -95,16 +96,15 @@ let Breadcrumb = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
|
|
|
95
96
|
margin: this.props.margin,
|
|
96
97
|
"aria-label": this.props.label,
|
|
97
98
|
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.allowedProps = allowedProps, _Breadcrumb.defaultProps = {
|
|
105
|
+
}, _Breadcrumb.displayName = "Breadcrumb", _Breadcrumb.componentId = 'Breadcrumb', _Breadcrumb.propTypes = propTypes, _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) || _class);
|
|
109
109
|
export default Breadcrumb;
|
|
110
110
|
export { Breadcrumb, BreadcrumbLink };
|
package/es/Breadcrumb/props.js
CHANGED
|
@@ -22,5 +22,14 @@
|
|
|
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
|
+
};
|
|
25
34
|
const allowedProps = ['children', 'label', 'margin', 'size'];
|
|
26
|
-
export { allowedProps };
|
|
35
|
+
export { propTypes, allowedProps };
|
|
@@ -8,9 +8,11 @@ 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");
|
|
11
12
|
var _Tooltip = require("@instructure/ui-tooltip/lib/Tooltip");
|
|
12
13
|
var _props = require("./props");
|
|
13
14
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
15
|
+
var _dec, _class, _BreadcrumbLink;
|
|
14
16
|
/*
|
|
15
17
|
* The MIT License (MIT)
|
|
16
18
|
*
|
|
@@ -34,15 +36,13 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
|
34
36
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
35
37
|
* SOFTWARE.
|
|
36
38
|
*/
|
|
37
|
-
|
|
38
39
|
/**
|
|
39
40
|
---
|
|
40
41
|
parent: Breadcrumb
|
|
41
42
|
id: Breadcrumb.Link
|
|
42
43
|
---
|
|
43
44
|
**/
|
|
44
|
-
|
|
45
|
-
class BreadcrumbLink extends _react.Component {
|
|
45
|
+
let BreadcrumbLink = exports.BreadcrumbLink = (_dec = (0, _testable.testable)(), _dec(_class = (_BreadcrumbLink = class BreadcrumbLink extends _react.Component {
|
|
46
46
|
constructor(props) {
|
|
47
47
|
super(props);
|
|
48
48
|
this.ref = null;
|
|
@@ -102,7 +102,6 @@ class BreadcrumbLink extends _react.Component {
|
|
|
102
102
|
role: 'text'
|
|
103
103
|
})
|
|
104
104
|
}),
|
|
105
|
-
"data-cid": "BreadcrumbLink",
|
|
106
105
|
children: (0, _jsxRuntime.jsx)(_TruncateText.TruncateText, {
|
|
107
106
|
onUpdate: isTruncated => this.handleTruncation(isTruncated),
|
|
108
107
|
children: (0, _jsxRuntime.jsx)("span", {
|
|
@@ -113,10 +112,5 @@ class BreadcrumbLink extends _react.Component {
|
|
|
113
112
|
})
|
|
114
113
|
});
|
|
115
114
|
}
|
|
116
|
-
}
|
|
117
|
-
exports.BreadcrumbLink = BreadcrumbLink;
|
|
118
|
-
BreadcrumbLink.displayName = "BreadcrumbLink";
|
|
119
|
-
BreadcrumbLink.componentId = 'Breadcrumb.Link';
|
|
120
|
-
BreadcrumbLink.allowedProps = _props.allowedProps;
|
|
121
|
-
BreadcrumbLink.defaultProps = {};
|
|
115
|
+
}, _BreadcrumbLink.displayName = "BreadcrumbLink", _BreadcrumbLink.componentId = 'Breadcrumb.Link', _BreadcrumbLink.propTypes = _props.propTypes, _BreadcrumbLink.allowedProps = _props.allowedProps, _BreadcrumbLink.defaultProps = {}, _BreadcrumbLink)) || _class);
|
|
122
116
|
var _default = exports.default = BreadcrumbLink;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
|
-
exports.allowedProps = void 0;
|
|
7
|
+
exports.propTypes = exports.allowedProps = void 0;
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
7
9
|
/*
|
|
8
10
|
* The MIT License (MIT)
|
|
9
11
|
*
|
|
@@ -28,4 +30,14 @@ exports.allowedProps = void 0;
|
|
|
28
30
|
* SOFTWARE.
|
|
29
31
|
*/
|
|
30
32
|
|
|
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
|
+
};
|
|
31
43
|
const allowedProps = exports.allowedProps = ['children', 'href', 'iconPlacement', 'onClick', 'onMouseEnter', 'renderIcon', 'size', 'isCurrentPage'];
|
package/lib/Breadcrumb/index.js
CHANGED
|
@@ -14,6 +14,7 @@ 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");
|
|
17
18
|
var _emotion = require("@instructure/emotion");
|
|
18
19
|
var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEndSolid.js");
|
|
19
20
|
var _BreadcrumbLink = require("./BreadcrumbLink");
|
|
@@ -21,7 +22,7 @@ var _styles = _interopRequireDefault(require("./styles"));
|
|
|
21
22
|
var _theme = _interopRequireDefault(require("./theme"));
|
|
22
23
|
var _props = require("./props");
|
|
23
24
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
24
|
-
var _dec, _class, _Breadcrumb;
|
|
25
|
+
var _dec, _dec2, _class, _Breadcrumb;
|
|
25
26
|
/*
|
|
26
27
|
* The MIT License (MIT)
|
|
27
28
|
*
|
|
@@ -50,7 +51,7 @@ var _dec, _class, _Breadcrumb;
|
|
|
50
51
|
category: components
|
|
51
52
|
---
|
|
52
53
|
**/
|
|
53
|
-
let Breadcrumb = exports.Breadcrumb = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_Breadcrumb = class Breadcrumb extends _react.Component {
|
|
54
|
+
let Breadcrumb = exports.Breadcrumb = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_Breadcrumb = class Breadcrumb extends _react.Component {
|
|
54
55
|
constructor(...args) {
|
|
55
56
|
super(...args);
|
|
56
57
|
this.ref = null;
|
|
@@ -108,15 +109,14 @@ let Breadcrumb = exports.Breadcrumb = (_dec = (0, _emotion.withStyle)(_styles.de
|
|
|
108
109
|
margin: this.props.margin,
|
|
109
110
|
"aria-label": this.props.label,
|
|
110
111
|
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.allowedProps = _props.allowedProps, _Breadcrumb.defaultProps = {
|
|
118
|
+
}, _Breadcrumb.displayName = "Breadcrumb", _Breadcrumb.componentId = 'Breadcrumb', _Breadcrumb.propTypes = _props.propTypes, _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) || _class);
|
|
122
122
|
var _default = exports.default = Breadcrumb;
|
package/lib/Breadcrumb/props.js
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
|
-
exports.allowedProps = void 0;
|
|
7
|
+
exports.propTypes = exports.allowedProps = void 0;
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _Children = require("@instructure/ui-prop-types/lib/Children.js");
|
|
10
|
+
var _BreadcrumbLink = require("./BreadcrumbLink");
|
|
7
11
|
/*
|
|
8
12
|
* The MIT License (MIT)
|
|
9
13
|
*
|
|
@@ -28,4 +32,10 @@ exports.allowedProps = void 0;
|
|
|
28
32
|
* SOFTWARE.
|
|
29
33
|
*/
|
|
30
34
|
|
|
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
|
+
};
|
|
31
41
|
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": "10.26.1
|
|
3
|
+
"version": "10.26.1",
|
|
4
4
|
"description": "A breadcrumb component",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -23,28 +23,31 @@
|
|
|
23
23
|
},
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@instructure/ui-axe-check": "10.26.1
|
|
27
|
-
"@instructure/ui-babel-preset": "10.26.1
|
|
28
|
-
"@instructure/ui-scripts": "10.26.1
|
|
29
|
-
"@instructure/ui-themes": "10.26.1
|
|
26
|
+
"@instructure/ui-axe-check": "10.26.1",
|
|
27
|
+
"@instructure/ui-babel-preset": "10.26.1",
|
|
28
|
+
"@instructure/ui-scripts": "10.26.1",
|
|
29
|
+
"@instructure/ui-themes": "10.26.1",
|
|
30
30
|
"@testing-library/jest-dom": "^6.6.3",
|
|
31
|
-
"@testing-library/react": "
|
|
31
|
+
"@testing-library/react": "^16.0.1",
|
|
32
32
|
"vitest": "^3.2.2"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@babel/runtime": "^7.27.6",
|
|
36
|
-
"@instructure/emotion": "10.26.1
|
|
37
|
-
"@instructure/shared-types": "10.26.1
|
|
38
|
-
"@instructure/ui-icons": "10.26.1
|
|
39
|
-
"@instructure/ui-link": "10.26.1
|
|
40
|
-
"@instructure/ui-
|
|
41
|
-
"@instructure/ui-
|
|
42
|
-
"@instructure/ui-
|
|
43
|
-
"@instructure/ui-
|
|
44
|
-
"@instructure/ui-
|
|
36
|
+
"@instructure/emotion": "10.26.1",
|
|
37
|
+
"@instructure/shared-types": "10.26.1",
|
|
38
|
+
"@instructure/ui-icons": "10.26.1",
|
|
39
|
+
"@instructure/ui-link": "10.26.1",
|
|
40
|
+
"@instructure/ui-prop-types": "10.26.1",
|
|
41
|
+
"@instructure/ui-react-utils": "10.26.1",
|
|
42
|
+
"@instructure/ui-testable": "10.26.1",
|
|
43
|
+
"@instructure/ui-tooltip": "10.26.1",
|
|
44
|
+
"@instructure/ui-truncate-text": "10.26.1",
|
|
45
|
+
"@instructure/ui-utils": "10.26.1",
|
|
46
|
+
"@instructure/ui-view": "10.26.1",
|
|
47
|
+
"prop-types": "^15.8.1"
|
|
45
48
|
},
|
|
46
49
|
"peerDependencies": {
|
|
47
|
-
"react": ">=
|
|
50
|
+
"react": ">=16.14 <=18"
|
|
48
51
|
},
|
|
49
52
|
"publishConfig": {
|
|
50
53
|
"access": "public"
|
|
@@ -27,9 +27,10 @@ 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'
|
|
30
31
|
import { Tooltip } from '@instructure/ui-tooltip'
|
|
31
32
|
|
|
32
|
-
import { allowedProps } from './props'
|
|
33
|
+
import { propTypes, allowedProps } from './props'
|
|
33
34
|
import type { BreadcrumbLinkProps, BreadcrumbLinkState } from './props'
|
|
34
35
|
|
|
35
36
|
/**
|
|
@@ -39,12 +40,14 @@ id: Breadcrumb.Link
|
|
|
39
40
|
---
|
|
40
41
|
**/
|
|
41
42
|
|
|
43
|
+
@testable()
|
|
42
44
|
class BreadcrumbLink extends Component<
|
|
43
45
|
BreadcrumbLinkProps,
|
|
44
46
|
BreadcrumbLinkState
|
|
45
47
|
> {
|
|
46
48
|
static readonly componentId = 'Breadcrumb.Link'
|
|
47
49
|
|
|
50
|
+
static propTypes = propTypes
|
|
48
51
|
static allowedProps = allowedProps
|
|
49
52
|
static defaultProps = {}
|
|
50
53
|
|
|
@@ -104,7 +107,6 @@ class BreadcrumbLink extends Component<
|
|
|
104
107
|
...(typeof children === 'string' && { 'aria-label': children }),
|
|
105
108
|
...(!isInteractive && { role: 'text' })
|
|
106
109
|
})}
|
|
107
|
-
data-cid="BreadcrumbLink"
|
|
108
110
|
>
|
|
109
111
|
<TruncateText
|
|
110
112
|
onUpdate={(isTruncated) => this.handleTruncation(isTruncated)}
|
|
@@ -23,9 +23,12 @@
|
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
25
|
import React from 'react'
|
|
26
|
+
import PropTypes from 'prop-types'
|
|
27
|
+
|
|
26
28
|
import type {
|
|
27
29
|
PickPropsWithExceptions,
|
|
28
30
|
OtherHTMLAttributes,
|
|
31
|
+
PropValidators,
|
|
29
32
|
Renderable
|
|
30
33
|
} from '@instructure/shared-types'
|
|
31
34
|
import type { ViewOwnProps } from '@instructure/ui-view'
|
|
@@ -83,6 +86,18 @@ type BreadcrumbLinkProps = PickPropsWithExceptions<
|
|
|
83
86
|
> &
|
|
84
87
|
BreadcrumbLinkOwnProps &
|
|
85
88
|
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
|
+
|
|
86
101
|
const allowedProps: AllowedPropKeys = [
|
|
87
102
|
'children',
|
|
88
103
|
'href',
|
|
@@ -99,4 +114,4 @@ type BreadcrumbLinkState = {
|
|
|
99
114
|
}
|
|
100
115
|
|
|
101
116
|
export type { BreadcrumbLinkProps, BreadcrumbLinkState }
|
|
102
|
-
export { allowedProps }
|
|
117
|
+
export { propTypes, allowedProps }
|
package/src/Breadcrumb/index.tsx
CHANGED
|
@@ -22,15 +22,10 @@
|
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
24
|
|
|
25
|
-
import {
|
|
26
|
-
isValidElement,
|
|
27
|
-
cloneElement,
|
|
28
|
-
Children,
|
|
29
|
-
Component,
|
|
30
|
-
ReactElement
|
|
31
|
-
} from 'react'
|
|
25
|
+
import { isValidElement, cloneElement, Children, Component } from 'react'
|
|
32
26
|
|
|
33
27
|
import { View } from '@instructure/ui-view'
|
|
28
|
+
import { testable } from '@instructure/ui-testable'
|
|
34
29
|
|
|
35
30
|
import { withStyle } from '@instructure/emotion'
|
|
36
31
|
import { IconArrowOpenEndSolid } from '@instructure/ui-icons'
|
|
@@ -39,7 +34,7 @@ import { BreadcrumbLink } from './BreadcrumbLink'
|
|
|
39
34
|
import generateStyle from './styles'
|
|
40
35
|
import generateComponentTheme from './theme'
|
|
41
36
|
|
|
42
|
-
import { allowedProps } from './props'
|
|
37
|
+
import { propTypes, allowedProps } from './props'
|
|
43
38
|
import type { BreadcrumbProps } from './props'
|
|
44
39
|
|
|
45
40
|
/**
|
|
@@ -49,9 +44,11 @@ category: components
|
|
|
49
44
|
**/
|
|
50
45
|
|
|
51
46
|
@withStyle(generateStyle, generateComponentTheme)
|
|
47
|
+
@testable()
|
|
52
48
|
class Breadcrumb extends Component<BreadcrumbProps> {
|
|
53
49
|
static readonly componentId = 'Breadcrumb'
|
|
54
50
|
|
|
51
|
+
static propTypes = propTypes
|
|
55
52
|
static allowedProps = allowedProps
|
|
56
53
|
static defaultProps = {
|
|
57
54
|
size: 'medium',
|
|
@@ -94,8 +91,7 @@ class Breadcrumb extends Component<BreadcrumbProps> {
|
|
|
94
91
|
return Children.map(children, (child, index) => {
|
|
95
92
|
const isLastElement = index === numChildren - 1
|
|
96
93
|
if (isValidElement(child)) {
|
|
97
|
-
const isCurrentPage =
|
|
98
|
-
(child as ReactElement<any>).props.isCurrentPage || false
|
|
94
|
+
const isCurrentPage = child.props.isCurrentPage || false
|
|
99
95
|
if (isAriaCurrentSet && isCurrentPage) {
|
|
100
96
|
console.warn(
|
|
101
97
|
`Warning: Multiple elements with isCurrentPage=true found. Only one element should be set to current.`
|
|
@@ -109,7 +105,7 @@ class Breadcrumb extends Component<BreadcrumbProps> {
|
|
|
109
105
|
<li css={styles?.crumb} style={inlineStyle}>
|
|
110
106
|
{!isAriaCurrentSet &&
|
|
111
107
|
isLastElement &&
|
|
112
|
-
(child as React.ReactElement
|
|
108
|
+
(child as React.ReactElement).props.isCurrentPage !== false
|
|
113
109
|
? this.addAriaCurrent(child)
|
|
114
110
|
: child}
|
|
115
111
|
{index < numChildren - 1 && (
|
|
@@ -130,7 +126,6 @@ class Breadcrumb extends Component<BreadcrumbProps> {
|
|
|
130
126
|
margin={this.props.margin}
|
|
131
127
|
aria-label={this.props.label}
|
|
132
128
|
elementRef={this.handleRef}
|
|
133
|
-
data-cid="Breadcrumb"
|
|
134
129
|
>
|
|
135
130
|
<ol css={styles?.breadcrumb}>{this.renderChildren()}</ol>
|
|
136
131
|
</View>
|
package/src/Breadcrumb/props.ts
CHANGED
|
@@ -21,12 +21,19 @@
|
|
|
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
|
+
|
|
24
31
|
import type {
|
|
25
32
|
Spacing,
|
|
26
33
|
WithStyleProps,
|
|
27
34
|
ComponentStyle
|
|
28
35
|
} from '@instructure/emotion'
|
|
29
|
-
import type { BreadcrumbTheme } from '@instructure/shared-types'
|
|
36
|
+
import type { BreadcrumbTheme, PropValidators } from '@instructure/shared-types'
|
|
30
37
|
|
|
31
38
|
type BreadcrumbOwnProps = {
|
|
32
39
|
/**
|
|
@@ -57,7 +64,15 @@ type BreadcrumbProps = BreadcrumbOwnProps &
|
|
|
57
64
|
WithStyleProps<BreadcrumbTheme, BreadcrumbStyle>
|
|
58
65
|
|
|
59
66
|
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
|
+
|
|
60
75
|
const allowedProps: AllowedPropKeys = ['children', 'label', 'margin', 'size']
|
|
61
76
|
|
|
62
77
|
export type { BreadcrumbProps, BreadcrumbStyle }
|
|
63
|
-
export { allowedProps }
|
|
78
|
+
export { propTypes, allowedProps }
|
package/tsconfig.build.json
CHANGED
|
@@ -13,7 +13,9 @@
|
|
|
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" },
|
|
16
17
|
{ "path": "../ui-react-utils/tsconfig.build.json" },
|
|
18
|
+
{ "path": "../ui-testable/tsconfig.build.json" },
|
|
17
19
|
{ "path": "../ui-truncate-text/tsconfig.build.json" },
|
|
18
20
|
{ "path": "../ui-tooltip/tsconfig.build.json" },
|
|
19
21
|
{ "path": "../ui-utils/tsconfig.build.json" },
|