carbon-react 119.4.0 → 119.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/__spec_helper__/mock-resize-observer.js +20 -5
- package/esm/__spec_helper__/test-utils.d.ts +1 -1
- package/esm/components/flat-table/cell-sizes.style.d.ts +28 -0
- package/esm/components/flat-table/flat-table-body/flat-table-body.component.d.ts +7 -0
- package/esm/components/flat-table/flat-table-body/flat-table-body.component.js +3 -2
- package/esm/components/flat-table/flat-table-body/index.d.ts +2 -2
- package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.d.ts +9 -0
- package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js +6 -16
- package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.d.ts +4 -0
- package/esm/components/flat-table/flat-table-body-draggable/index.d.ts +2 -2
- package/esm/components/flat-table/flat-table-cell/flat-table-cell.component.d.ts +69 -0
- package/esm/components/flat-table/flat-table-cell/flat-table-cell.component.js +7 -69
- package/esm/components/flat-table/flat-table-cell/flat-table-cell.style.d.ts +10 -0
- package/esm/components/flat-table/flat-table-cell/index.d.ts +2 -2
- package/esm/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.d.ts +45 -0
- package/esm/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js +1 -39
- package/esm/components/flat-table/flat-table-checkbox/flat-table-checkbox.style.d.ts +6 -0
- package/esm/components/flat-table/flat-table-checkbox/index.d.ts +2 -2
- package/esm/components/flat-table/flat-table-head/flat-table-head.component.d.ts +7 -0
- package/esm/components/flat-table/flat-table-head/flat-table-head.component.js +8 -13
- package/esm/components/flat-table/flat-table-head/flat-table-head.style.d.ts +2 -0
- package/esm/components/flat-table/flat-table-head/index.d.ts +2 -2
- package/esm/components/flat-table/flat-table-header/flat-table-header-utils.d.ts +3 -0
- package/esm/components/flat-table/flat-table-header/flat-table-header.component.d.ts +55 -0
- package/esm/components/flat-table/flat-table-header/flat-table-header.component.js +7 -49
- package/esm/components/flat-table/flat-table-header/flat-table-header.style.d.ts +10 -0
- package/esm/components/flat-table/flat-table-header/index.d.ts +2 -2
- package/esm/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.component.d.ts +18 -0
- package/esm/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.component.js +13 -19
- package/esm/components/flat-table/flat-table-row/flat-table-row.component.d.ts +56 -0
- package/esm/components/flat-table/flat-table-row/flat-table-row.component.js +43 -67
- package/esm/components/flat-table/flat-table-row/flat-table-row.style.d.ts +18 -0
- package/esm/components/flat-table/flat-table-row/flat-table-row.style.js +2 -3
- package/esm/components/flat-table/flat-table-row/index.d.ts +2 -2
- package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.component.d.ts +71 -0
- package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.component.js +9 -51
- package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.style.d.ts +6 -0
- package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.style.js +7 -7
- package/esm/components/flat-table/flat-table-row-header/index.d.ts +2 -2
- package/esm/components/flat-table/flat-table.component.d.ts +42 -0
- package/esm/components/flat-table/flat-table.component.js +51 -92
- package/esm/components/flat-table/flat-table.config.d.ts +2 -0
- package/esm/components/flat-table/flat-table.style.d.ts +15 -0
- package/esm/components/flat-table/flat-table.style.js +36 -59
- package/esm/components/flat-table/index.d.ts +22 -13
- package/esm/components/flat-table/sort/index.d.ts +2 -2
- package/esm/components/flat-table/sort/sort.component.d.ts +11 -0
- package/esm/components/flat-table/sort/sort.component.js +1 -10
- package/esm/components/flat-table/sort/sort.style.d.ts +4 -0
- package/esm/components/global-header/global-header.component.js +6 -29
- package/esm/components/menu/__internal__/submenu/submenu.component.js +6 -1
- package/esm/components/menu/__internal__/submenu/submenu.style.d.ts +1 -0
- package/esm/components/menu/__internal__/submenu/submenu.style.js +4 -1
- package/esm/components/navigation-bar/fixed-navigation-bar.context.d.ts +11 -0
- package/esm/components/navigation-bar/fixed-navigation-bar.context.js +31 -0
- package/esm/components/navigation-bar/navigation-bar.component.d.ts +3 -1
- package/esm/components/navigation-bar/navigation-bar.component.js +20 -8
- package/esm/components/navigation-bar/navigation-bar.style.d.ts +4 -0
- package/esm/components/navigation-bar/navigation-bar.style.js +3 -2
- package/lib/__spec_helper__/mock-resize-observer.js +20 -5
- package/lib/__spec_helper__/test-utils.d.ts +1 -1
- package/lib/components/flat-table/cell-sizes.style.d.ts +28 -0
- package/lib/components/flat-table/flat-table-body/flat-table-body.component.d.ts +7 -0
- package/lib/components/flat-table/flat-table-body/flat-table-body.component.js +4 -3
- package/lib/components/flat-table/flat-table-body/index.d.ts +2 -2
- package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.d.ts +9 -0
- package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js +7 -16
- package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.d.ts +4 -0
- package/lib/components/flat-table/flat-table-body-draggable/index.d.ts +2 -2
- package/lib/components/flat-table/flat-table-cell/flat-table-cell.component.d.ts +69 -0
- package/lib/components/flat-table/flat-table-cell/flat-table-cell.component.js +8 -69
- package/lib/components/flat-table/flat-table-cell/flat-table-cell.style.d.ts +10 -0
- package/lib/components/flat-table/flat-table-cell/index.d.ts +2 -2
- package/lib/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.d.ts +45 -0
- package/lib/components/flat-table/flat-table-checkbox/flat-table-checkbox.component.js +2 -39
- package/lib/components/flat-table/flat-table-checkbox/flat-table-checkbox.style.d.ts +6 -0
- package/lib/components/flat-table/flat-table-checkbox/index.d.ts +2 -2
- package/lib/components/flat-table/flat-table-head/flat-table-head.component.d.ts +7 -0
- package/lib/components/flat-table/flat-table-head/flat-table-head.component.js +8 -12
- package/lib/components/flat-table/flat-table-head/flat-table-head.style.d.ts +2 -0
- package/lib/components/flat-table/flat-table-head/index.d.ts +2 -2
- package/lib/components/flat-table/flat-table-header/flat-table-header-utils.d.ts +3 -0
- package/lib/components/flat-table/flat-table-header/flat-table-header.component.d.ts +55 -0
- package/lib/components/flat-table/flat-table-header/flat-table-header.component.js +8 -49
- package/lib/components/flat-table/flat-table-header/flat-table-header.style.d.ts +10 -0
- package/lib/components/flat-table/flat-table-header/index.d.ts +2 -2
- package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.component.d.ts +18 -0
- package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.component.js +14 -20
- package/lib/components/flat-table/flat-table-row/flat-table-row.component.d.ts +56 -0
- package/lib/components/flat-table/flat-table-row/flat-table-row.component.js +44 -68
- package/lib/components/flat-table/flat-table-row/flat-table-row.style.d.ts +18 -0
- package/lib/components/flat-table/flat-table-row/flat-table-row.style.js +2 -3
- package/lib/components/flat-table/flat-table-row/index.d.ts +2 -2
- package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.component.d.ts +71 -0
- package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.component.js +10 -51
- package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.style.d.ts +6 -0
- package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.style.js +7 -7
- package/lib/components/flat-table/flat-table-row-header/index.d.ts +2 -2
- package/lib/components/flat-table/flat-table.component.d.ts +42 -0
- package/lib/components/flat-table/flat-table.component.js +51 -91
- package/lib/components/flat-table/flat-table.config.d.ts +2 -0
- package/lib/components/flat-table/flat-table.style.d.ts +15 -0
- package/lib/components/flat-table/flat-table.style.js +36 -59
- package/lib/components/flat-table/index.d.ts +22 -13
- package/lib/components/flat-table/sort/index.d.ts +2 -2
- package/lib/components/flat-table/sort/sort.component.d.ts +11 -0
- package/lib/components/flat-table/sort/sort.component.js +1 -10
- package/lib/components/flat-table/sort/sort.style.d.ts +4 -0
- package/lib/components/global-header/global-header.component.js +6 -31
- package/lib/components/menu/__internal__/submenu/submenu.component.js +6 -1
- package/lib/components/menu/__internal__/submenu/submenu.style.d.ts +1 -0
- package/lib/components/menu/__internal__/submenu/submenu.style.js +4 -1
- package/lib/components/navigation-bar/fixed-navigation-bar.context.d.ts +11 -0
- package/lib/components/navigation-bar/fixed-navigation-bar.context.js +42 -0
- package/lib/components/navigation-bar/navigation-bar.component.d.ts +3 -1
- package/lib/components/navigation-bar/navigation-bar.component.js +22 -8
- package/lib/components/navigation-bar/navigation-bar.style.d.ts +4 -0
- package/lib/components/navigation-bar/navigation-bar.style.js +3 -2
- package/package.json +1 -1
- package/esm/components/flat-table/flat-table-body/flat-table-body.d.ts +0 -10
- package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.d.ts +0 -14
- package/esm/components/flat-table/flat-table-cell/flat-table-cell.d.ts +0 -28
- package/esm/components/flat-table/flat-table-checkbox/flat-table-checkbox.d.ts +0 -20
- package/esm/components/flat-table/flat-table-head/flat-table-head.d.ts +0 -10
- package/esm/components/flat-table/flat-table-header/flat-table-header.d.ts +0 -27
- package/esm/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.d.ts +0 -20
- package/esm/components/flat-table/flat-table-row/flat-table-row.d.ts +0 -31
- package/esm/components/flat-table/flat-table-row-header/flat-table-row-header.d.ts +0 -28
- package/esm/components/flat-table/flat-table.d.ts +0 -37
- package/esm/components/flat-table/sort/sort.d.ts +0 -14
- package/lib/components/flat-table/flat-table-body/flat-table-body.d.ts +0 -10
- package/lib/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.d.ts +0 -14
- package/lib/components/flat-table/flat-table-cell/flat-table-cell.d.ts +0 -28
- package/lib/components/flat-table/flat-table-checkbox/flat-table-checkbox.d.ts +0 -20
- package/lib/components/flat-table/flat-table-head/flat-table-head.d.ts +0 -10
- package/lib/components/flat-table/flat-table-header/flat-table-header.d.ts +0 -27
- package/lib/components/flat-table/flat-table-row/__internal__/flat-table-row-draggable.d.ts +0 -20
- package/lib/components/flat-table/flat-table-row/flat-table-row.d.ts +0 -31
- package/lib/components/flat-table/flat-table-row-header/flat-table-row-header.d.ts +0 -28
- package/lib/components/flat-table/flat-table.d.ts +0 -37
- package/lib/components/flat-table/sort/sort.d.ts +0 -14
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { default } from "./sort";
|
|
2
|
-
export
|
|
1
|
+
export { default } from "./sort.component";
|
|
2
|
+
export type { SortProps } from "./sort.component";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface SortProps {
|
|
3
|
+
/** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
|
|
4
|
+
sortType?: "ascending" | "descending" | false;
|
|
5
|
+
/** Callback fired when the `FlatTableSortHeader` is clicked */
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
/** Sets the content of `FlatTableSortHeader` */
|
|
8
|
+
children?: React.ReactNode;
|
|
9
|
+
}
|
|
10
|
+
declare const Sort: ({ children, onClick, sortType }: SortProps) => React.JSX.Element;
|
|
11
|
+
export default Sort;
|
|
@@ -23,7 +23,7 @@ const Sort = _ref => {
|
|
|
23
23
|
const onKeyDown = e => {
|
|
24
24
|
if (_events.default.isEnterOrSpaceKey(e)) {
|
|
25
25
|
e.preventDefault();
|
|
26
|
-
return onClick();
|
|
26
|
+
return onClick?.();
|
|
27
27
|
}
|
|
28
28
|
return null;
|
|
29
29
|
};
|
|
@@ -31,7 +31,6 @@ const Sort = _ref => {
|
|
|
31
31
|
hidden: true,
|
|
32
32
|
id: id.current
|
|
33
33
|
}, children, sortType ? `, sort type ${sortType}` : ", sortable"), /*#__PURE__*/_react.default.createElement(_sort.StyledSort, {
|
|
34
|
-
type: "button",
|
|
35
34
|
role: "button",
|
|
36
35
|
onKeyDown: onKeyDown,
|
|
37
36
|
tabIndex: 0,
|
|
@@ -43,13 +42,5 @@ const Sort = _ref => {
|
|
|
43
42
|
color: "--colorsUtilityMajor200"
|
|
44
43
|
})), !sortType && /*#__PURE__*/_react.default.createElement(_sort.StyledSpaceHolder, null));
|
|
45
44
|
};
|
|
46
|
-
Sort.propTypes = {
|
|
47
|
-
/** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
|
|
48
|
-
sortType: _propTypes.default.oneOf(["ascending", "descending", false]),
|
|
49
|
-
/** Callback fired when the `FlatTableSortHeader` is clicked */
|
|
50
|
-
onClick: _propTypes.default.func,
|
|
51
|
-
/** The content of `FlatTableSortHeader` */
|
|
52
|
-
children: _propTypes.default.node
|
|
53
|
-
};
|
|
54
45
|
var _default = Sort;
|
|
55
46
|
exports.default = _default;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { SortProps } from "./sort.component";
|
|
2
|
+
declare const StyledSort: import("styled-components").StyledComponent<"div", any, Pick<SortProps, "sortType">, never>;
|
|
3
|
+
declare const StyledSpaceHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export { StyledSort, StyledSpaceHolder };
|
|
@@ -6,31 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var _styledComponents =
|
|
10
|
-
var _themes = require("../../style/themes");
|
|
11
|
-
var _navigationBar = _interopRequireDefault(require("../navigation-bar/navigation-bar.style"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
12
10
|
var _box = _interopRequireDefault(require("../box"));
|
|
13
|
-
|
|
14
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
11
|
+
var _navigationBar = _interopRequireDefault(require("../navigation-bar"));
|
|
15
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
13
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
|
-
const StyledGlobalHeader = (0, _styledComponents.default)(_navigationBar.default).attrs(_ref => {
|
|
18
|
-
let {
|
|
19
|
-
theme
|
|
20
|
-
} = _ref;
|
|
21
|
-
return {
|
|
22
|
-
theme: theme || /* istanbul ignore next */_themes.baseTheme
|
|
23
|
-
};
|
|
24
|
-
})`
|
|
25
|
-
${_ref2 => {
|
|
26
|
-
let {
|
|
27
|
-
theme
|
|
28
|
-
} = _ref2;
|
|
29
|
-
return (0, _styledComponents.css)`
|
|
30
|
-
z-index: ${theme.zIndex.globalNav};
|
|
31
|
-
`;
|
|
32
|
-
}}
|
|
33
|
-
`;
|
|
34
14
|
const StyledLogo = (0, _styledComponents.default)(_box.default)`
|
|
35
15
|
display: flex;
|
|
36
16
|
align-items: center;
|
|
@@ -51,19 +31,14 @@ const StyledLogo = (0, _styledComponents.default)(_box.default)`
|
|
|
51
31
|
margin-left: var(--spacing500);
|
|
52
32
|
}
|
|
53
33
|
`;
|
|
54
|
-
const GlobalHeader =
|
|
34
|
+
const GlobalHeader = _ref => {
|
|
55
35
|
let {
|
|
56
36
|
children,
|
|
57
37
|
logo,
|
|
58
38
|
...rest
|
|
59
|
-
} =
|
|
60
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
61
|
-
|
|
62
|
-
"data-component": "global-header",
|
|
63
|
-
navigationType: "black",
|
|
64
|
-
orientation: "top",
|
|
65
|
-
offset: "0px",
|
|
66
|
-
position: "fixed"
|
|
39
|
+
} = _ref;
|
|
40
|
+
return /*#__PURE__*/_react.default.createElement(_navigationBar.default, _extends({
|
|
41
|
+
isGlobal: true
|
|
67
42
|
}, rest), logo && /*#__PURE__*/_react.default.createElement(StyledLogo, {
|
|
68
43
|
"data-element": "global-header-logo-wrapper"
|
|
69
44
|
}, logo), children);
|
|
@@ -16,6 +16,7 @@ var _useClickAwayListener = _interopRequireDefault(require("../../../../hooks/__
|
|
|
16
16
|
var _guid = _interopRequireDefault(require("../../../../__internal__/utils/helpers/guid"));
|
|
17
17
|
var _locators = require("../locators");
|
|
18
18
|
var _useStableCallback = _interopRequireDefault(require("../../../../hooks/__internal__/useStableCallback/useStableCallback"));
|
|
19
|
+
var _fixedNavigationBar = _interopRequireDefault(require("../../../navigation-bar/fixed-navigation-bar.context"));
|
|
19
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
20
21
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
21
22
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -55,6 +56,9 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
55
56
|
const shiftTabPressed = (0, _react.useRef)(false);
|
|
56
57
|
const focusFirstMenuItemOnOpen = (0, _react.useRef)(false);
|
|
57
58
|
const numberOfChildren = submenuItemIds.length;
|
|
59
|
+
const {
|
|
60
|
+
submenuMaxHeight
|
|
61
|
+
} = (0, _react.useContext)(_fixedNavigationBar.default);
|
|
58
62
|
const onSubmenuOpen = (0, _useStableCallback.default)(onSubmenuOpenProp);
|
|
59
63
|
const blockIndex = (0, _react.useMemo)(() => {
|
|
60
64
|
const items = submenuRef.current?.querySelectorAll(_locators.BLOCK_INDEX_SELECTOR);
|
|
@@ -291,7 +295,8 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
|
|
|
291
295
|
submenuDirection: submenuDirection,
|
|
292
296
|
variant: variant,
|
|
293
297
|
menuType: menuType,
|
|
294
|
-
role: blockIndex === 0 ? "presentation" : "list"
|
|
298
|
+
role: blockIndex === 0 ? "presentation" : "list",
|
|
299
|
+
maxHeight: submenuMaxHeight
|
|
295
300
|
}, /*#__PURE__*/_react.default.createElement(_submenu2.default.Provider, {
|
|
296
301
|
value: {
|
|
297
302
|
submenuFocusId,
|
|
@@ -10,6 +10,7 @@ interface StyledSubmenuWrapperProps extends SharedStyleProps {
|
|
|
10
10
|
}
|
|
11
11
|
interface StyledSubmenuProps extends SharedStyleProps, Pick<SubmenuProps, "variant"> {
|
|
12
12
|
submenuDirection?: string;
|
|
13
|
+
maxHeight?: string;
|
|
13
14
|
}
|
|
14
15
|
declare const StyledSubmenuWrapper: import("styled-components").StyledComponent<"div", any, StyledSubmenuWrapperProps, never>;
|
|
15
16
|
declare const StyledSubmenu: import("styled-components").StyledComponent<"ul", any, StyledSubmenuProps, never>;
|
|
@@ -55,7 +55,8 @@ const StyledSubmenu = _styledComponents.default.ul`
|
|
|
55
55
|
menuType,
|
|
56
56
|
submenuDirection,
|
|
57
57
|
variant,
|
|
58
|
-
inFullscreenView
|
|
58
|
+
inFullscreenView,
|
|
59
|
+
maxHeight
|
|
59
60
|
} = _ref3;
|
|
60
61
|
return (0, _styledComponents.css)`
|
|
61
62
|
${!inFullscreenView && menuType && (0, _styledComponents.css)`
|
|
@@ -79,6 +80,8 @@ const StyledSubmenu = _styledComponents.default.ul`
|
|
|
79
80
|
${!inFullscreenView && (0, _styledComponents.css)`
|
|
80
81
|
border-bottom-right-radius: var(--borderRadius100);
|
|
81
82
|
border-bottom-left-radius: var(--borderRadius100);
|
|
83
|
+
overflow-y: auto;
|
|
84
|
+
${maxHeight && `max-height: ${maxHeight};`}
|
|
82
85
|
|
|
83
86
|
${_menu.StyledMenuItem}:last-child a,
|
|
84
87
|
${_menu.StyledMenuItem}:last-child button,
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { NavigationBarProps } from ".";
|
|
3
|
+
declare type FixedNavigationBarContextProps = {
|
|
4
|
+
submenuMaxHeight?: string;
|
|
5
|
+
};
|
|
6
|
+
declare const FixedNavigationBarContext: React.Context<FixedNavigationBarContextProps>;
|
|
7
|
+
export interface FixedNavigationBarContextProviderProps extends Pick<NavigationBarProps, "position" | "orientation" | "offset" | "children"> {
|
|
8
|
+
navbarElement: HTMLElement | null;
|
|
9
|
+
}
|
|
10
|
+
export declare const FixedNavigationBarContextProvider: ({ position, orientation, offset, children, navbarElement, }: FixedNavigationBarContextProviderProps) => React.JSX.Element;
|
|
11
|
+
export default FixedNavigationBarContext;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.FixedNavigationBarContextProvider = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver/useResizeObserver"));
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
11
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
12
|
+
const FixedNavigationBarContext = /*#__PURE__*/(0, _react.createContext)({});
|
|
13
|
+
const FixedNavigationBarContextProvider = _ref => {
|
|
14
|
+
let {
|
|
15
|
+
position,
|
|
16
|
+
orientation,
|
|
17
|
+
offset,
|
|
18
|
+
children,
|
|
19
|
+
navbarElement
|
|
20
|
+
} = _ref;
|
|
21
|
+
const [navbarHeight, setNavbarHeight] = (0, _react.useState)(navbarElement?.offsetHeight);
|
|
22
|
+
const updateHeight = (0, _react.useCallback)(() => setNavbarHeight(navbarElement?.offsetHeight), [navbarElement]);
|
|
23
|
+
(0, _useResizeObserver.default)({
|
|
24
|
+
current: navbarElement
|
|
25
|
+
}, updateHeight);
|
|
26
|
+
let submenuMaxHeight;
|
|
27
|
+
if (position === "fixed") {
|
|
28
|
+
if (orientation === "top" && navbarHeight !== undefined) {
|
|
29
|
+
submenuMaxHeight = `calc(100vh - ${navbarHeight}px - ${offset})`;
|
|
30
|
+
} else if (orientation === "bottom") {
|
|
31
|
+
submenuMaxHeight = offset;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
return /*#__PURE__*/_react.default.createElement(FixedNavigationBarContext.Provider, {
|
|
35
|
+
value: {
|
|
36
|
+
submenuMaxHeight
|
|
37
|
+
}
|
|
38
|
+
}, children);
|
|
39
|
+
};
|
|
40
|
+
exports.FixedNavigationBarContextProvider = FixedNavigationBarContextProvider;
|
|
41
|
+
var _default = FixedNavigationBarContext;
|
|
42
|
+
exports.default = _default;
|
|
@@ -18,6 +18,8 @@ export interface NavigationBarProps extends PaddingProps, FlexboxProps {
|
|
|
18
18
|
offset?: string;
|
|
19
19
|
/** Defines whether the navigation bar should be positioned top or bottom */
|
|
20
20
|
orientation?: Orientation;
|
|
21
|
+
/** @private @ignore set to true only when rendering the GlobalHeader component */
|
|
22
|
+
isGlobal?: boolean;
|
|
21
23
|
}
|
|
22
|
-
export declare const NavigationBar: ({ navigationType, isLoading, children, ariaLabel, position, offset, orientation, ...props }: NavigationBarProps) => JSX.Element;
|
|
24
|
+
export declare const NavigationBar: ({ navigationType, isLoading, children, ariaLabel, position, offset, orientation, isGlobal, ...props }: NavigationBarProps) => JSX.Element;
|
|
23
25
|
export default NavigationBar;
|
|
@@ -4,10 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.NavigationBar = void 0;
|
|
7
|
-
var _react =
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _navigationBar = _interopRequireDefault(require("./navigation-bar.style"));
|
|
10
|
+
var _fixedNavigationBar = require("./fixed-navigation-bar.context");
|
|
10
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
11
14
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
12
15
|
const NavigationBar = _ref => {
|
|
13
16
|
let {
|
|
@@ -18,17 +21,27 @@ const NavigationBar = _ref => {
|
|
|
18
21
|
position,
|
|
19
22
|
offset = "0",
|
|
20
23
|
orientation,
|
|
24
|
+
isGlobal,
|
|
21
25
|
...props
|
|
22
26
|
} = _ref;
|
|
27
|
+
const [navbarElement, setNavbarElement] = (0, _react.useState)(null);
|
|
23
28
|
return /*#__PURE__*/_react.default.createElement(_navigationBar.default, _extends({
|
|
24
29
|
role: "navigation",
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
"
|
|
28
|
-
|
|
29
|
-
offset: offset,
|
|
30
|
-
|
|
31
|
-
}, props
|
|
30
|
+
"data-component": isGlobal ? "global-header" : "navigation-bar",
|
|
31
|
+
"aria-label": isGlobal ? "Global Header" : ariaLabel,
|
|
32
|
+
navigationType: isGlobal ? "black" : navigationType,
|
|
33
|
+
orientation: isGlobal ? "top" : orientation,
|
|
34
|
+
offset: isGlobal ? "0px" : offset,
|
|
35
|
+
position: isGlobal ? "fixed" : position
|
|
36
|
+
}, props, {
|
|
37
|
+
isGlobal: isGlobal,
|
|
38
|
+
ref: setNavbarElement
|
|
39
|
+
}), /*#__PURE__*/_react.default.createElement(_fixedNavigationBar.FixedNavigationBarContextProvider, {
|
|
40
|
+
orientation: isGlobal ? "top" : orientation,
|
|
41
|
+
offset: isGlobal ? "0px" : offset,
|
|
42
|
+
position: isGlobal ? "fixed" : position,
|
|
43
|
+
navbarElement: navbarElement
|
|
44
|
+
}, !isLoading && children));
|
|
32
45
|
};
|
|
33
46
|
exports.NavigationBar = NavigationBar;
|
|
34
47
|
NavigationBar.propTypes = {
|
|
@@ -571,6 +584,7 @@ NavigationBar.propTypes = {
|
|
|
571
584
|
"valueOf": _propTypes.default.func.isRequired
|
|
572
585
|
})]),
|
|
573
586
|
"flexWrap": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap"]), _propTypes.default.arrayOf(_propTypes.default.oneOf(["-moz-initial", "inherit", "initial", "nowrap", "revert", "unset", "wrap-reverse", "wrap", null])), _propTypes.default.object]),
|
|
587
|
+
"isGlobal": _propTypes.default.bool,
|
|
574
588
|
"isLoading": _propTypes.default.bool,
|
|
575
589
|
"justifyContent": _propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset"]), _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(["-moz-initial", "center", "end", "flex-end", "flex-start", "inherit", "initial", "left", "normal", "revert", "right", "space-around", "space-between", "space-evenly", "start", "stretch", "unset", null]), _propTypes.default.shape({
|
|
576
590
|
"__@iterator": _propTypes.default.func.isRequired,
|
|
@@ -9,6 +9,8 @@ export declare type StyledNavigationBarProps = PaddingProps & FlexboxProps & {
|
|
|
9
9
|
offset?: string;
|
|
10
10
|
/** Defines whether the navigation bar should be positioned top or bottom */
|
|
11
11
|
orientation?: Orientation;
|
|
12
|
+
/** set to true only when rendering the GlobalHeader component */
|
|
13
|
+
isGlobal?: boolean;
|
|
12
14
|
};
|
|
13
15
|
declare const StyledNavigationBar: import("styled-components").StyledComponent<"nav", any, PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
|
|
14
16
|
/** Color scheme of navigation component */
|
|
@@ -19,5 +21,7 @@ declare const StyledNavigationBar: import("styled-components").StyledComponent<"
|
|
|
19
21
|
offset?: string | undefined;
|
|
20
22
|
/** Defines whether the navigation bar should be positioned top or bottom */
|
|
21
23
|
orientation?: Orientation | undefined;
|
|
24
|
+
/** set to true only when rendering the GlobalHeader component */
|
|
25
|
+
isGlobal?: boolean | undefined;
|
|
22
26
|
}, never>;
|
|
23
27
|
export default StyledNavigationBar;
|
|
@@ -63,11 +63,12 @@ const StyledNavigationBar = _styledComponents.default.nav`
|
|
|
63
63
|
${_ref2 => {
|
|
64
64
|
let {
|
|
65
65
|
navigationType,
|
|
66
|
-
theme
|
|
66
|
+
theme,
|
|
67
|
+
isGlobal
|
|
67
68
|
} = _ref2;
|
|
68
69
|
return (0, _styledComponents.css)`
|
|
69
70
|
min-height: 40px;
|
|
70
|
-
z-index: ${theme.zIndex.nav};
|
|
71
|
+
z-index: ${isGlobal ? theme.zIndex.globalNav : theme.zIndex.nav};
|
|
71
72
|
|
|
72
73
|
${navigationType === "light" && (0, _styledComponents.css)`
|
|
73
74
|
background-color: var(--colorsComponentsMenuSpringStandard500);
|
package/package.json
CHANGED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
export interface FlatTableBodyDraggableProps {
|
|
4
|
-
/** Array of FlatTableRow. */
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
/** Callback fired when order is changed */
|
|
7
|
-
getOrder?: (draggableItemIds: number[]) => void;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
declare function FlatTableBodyDraggable(
|
|
11
|
-
props: FlatTableBodyDraggableProps
|
|
12
|
-
): JSX.Element;
|
|
13
|
-
|
|
14
|
-
export default FlatTableBodyDraggable;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { PaddingProps } from "styled-system";
|
|
3
|
-
import { TableBorderSize } from "..";
|
|
4
|
-
|
|
5
|
-
export interface FlatTableCellProps extends PaddingProps {
|
|
6
|
-
/** Content alignment */
|
|
7
|
-
align?: "left" | "center" | "right";
|
|
8
|
-
/** Cell content */
|
|
9
|
-
children?: React.ReactNode | string;
|
|
10
|
-
/** Number of columns that a cell should span */
|
|
11
|
-
colspan?: number | string;
|
|
12
|
-
/** Number of rows that a cell should span */
|
|
13
|
-
rowspan?: number | string;
|
|
14
|
-
/** Column width, pass a number to set a fixed width in pixels */
|
|
15
|
-
width?: number;
|
|
16
|
-
/** Truncate cell content and add ellipsis to any text that overflows */
|
|
17
|
-
truncate?: boolean;
|
|
18
|
-
/** Title text to display if cell content truncates */
|
|
19
|
-
title?: string;
|
|
20
|
-
/** Sets a custom vertical right border */
|
|
21
|
-
verticalBorder?: TableBorderSize;
|
|
22
|
-
/** Sets the color of the right border */
|
|
23
|
-
verticalBorderColor?: string;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
declare function FlatTableCell(props: FlatTableCellProps): JSX.Element;
|
|
27
|
-
|
|
28
|
-
export default FlatTableCell;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
export interface FlatTableCheckboxProps {
|
|
4
|
-
/** Prop to polymorphically render either a 'th' or 'td' element */
|
|
5
|
-
as?: "td" | "th";
|
|
6
|
-
/** Prop to set checked prop on Checkbox */
|
|
7
|
-
checked?: boolean;
|
|
8
|
-
/** Callback to be called onChange in Checkbox */
|
|
9
|
-
onChange?: (ev: React.ChangeEvent<HTMLElement>) => void;
|
|
10
|
-
/** Whether to render the checkbox or not, defaults to true */
|
|
11
|
-
selectable?: boolean;
|
|
12
|
-
/** Callback function to be called when click event received */
|
|
13
|
-
onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
14
|
-
/** The id of the element that labels the input */
|
|
15
|
-
ariaLabelledBy?: string;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
declare function FlatTableCheckbox(props: FlatTableCheckboxProps): JSX.Element;
|
|
19
|
-
|
|
20
|
-
export default FlatTableCheckbox;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { PaddingProps } from "styled-system";
|
|
3
|
-
|
|
4
|
-
import { TableBorderSize } from "..";
|
|
5
|
-
|
|
6
|
-
export interface FlatTableHeaderProps extends PaddingProps {
|
|
7
|
-
/** Content alignment */
|
|
8
|
-
align?: "left" | "center" | "right";
|
|
9
|
-
/** If true sets alternative background color */
|
|
10
|
-
alternativeBgColor?: boolean;
|
|
11
|
-
/** Header content */
|
|
12
|
-
children?: React.ReactNode | string;
|
|
13
|
-
/** Number of columns that a header cell should span */
|
|
14
|
-
colspan?: number | string;
|
|
15
|
-
/** Number of rows that a header cell should span */
|
|
16
|
-
rowspan?: number | string;
|
|
17
|
-
/** Sets a custom vertical right border */
|
|
18
|
-
verticalBorder?: TableBorderSize;
|
|
19
|
-
/** Sets the color of the right border */
|
|
20
|
-
verticalBorderColor?: string;
|
|
21
|
-
/** Column width, pass a number to set a fixed width in pixels */
|
|
22
|
-
width?: number;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
declare function FlatTableHeader(props: FlatTableHeaderProps): JSX.Element;
|
|
26
|
-
|
|
27
|
-
export default FlatTableHeader;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
export interface FlatTableRowDraggableProps {
|
|
4
|
-
/** Array of FlatTableRow. */
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
/** ID for use in drag and drop functionality */
|
|
7
|
-
id?: number | string;
|
|
8
|
-
/** function to find an item in the list of draggable items */
|
|
9
|
-
findItem: () => Record<string, unknown>;
|
|
10
|
-
/** function to reposition an item in the list of draggable items */
|
|
11
|
-
moveItem: () => void;
|
|
12
|
-
/** item is draggable */
|
|
13
|
-
draggable?: boolean;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
declare function FlatTableRowDraggable(
|
|
17
|
-
props: FlatTableRowDraggableProps
|
|
18
|
-
): JSX.Element;
|
|
19
|
-
|
|
20
|
-
export default FlatTableRowDraggable;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { TableBorderSize } from "..";
|
|
3
|
-
|
|
4
|
-
export interface FlatTableRowProps {
|
|
5
|
-
/** Array of FlatTableHeader or FlatTableCell. FlatTableRowHeader could also be passed. */
|
|
6
|
-
children: React.ReactNode;
|
|
7
|
-
/** Allows the row to be expanded, must be used with the `subRows` prop. */
|
|
8
|
-
expandable?: boolean;
|
|
9
|
-
/** Sets an expandable row to be expanded on start */
|
|
10
|
-
expanded?: boolean;
|
|
11
|
-
/** Area to click to open sub rows when expandable. Default is `wholeRow` */
|
|
12
|
-
expandableArea?: "wholeRow" | "firstColumn";
|
|
13
|
-
/** Allows developers to manually control highlighted state for the row. */
|
|
14
|
-
highlighted?: boolean;
|
|
15
|
-
/** Sets the color of the bottom border in the row */
|
|
16
|
-
horizontalBorderColor?: string;
|
|
17
|
-
/** Sets the weight of the bottom border in the row */
|
|
18
|
-
horizontalBorderSize?: TableBorderSize;
|
|
19
|
-
/** Function to handle click event. If provided the Component could be focused with tab key. */
|
|
20
|
-
onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
|
|
21
|
-
/** Allows developers to manually control selected state for the row. */
|
|
22
|
-
selected?: boolean;
|
|
23
|
-
/** Sub rows to be shown when the row is expanded, must be used with the `expandable` prop. */
|
|
24
|
-
subRows?: React.ReactNodeArray;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
declare function FlatTableRow(
|
|
28
|
-
props: FlatTableRowProps & React.RefAttributes<HTMLHRElement>
|
|
29
|
-
): JSX.Element;
|
|
30
|
-
|
|
31
|
-
export default FlatTableRow;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { PaddingProps } from "styled-system";
|
|
3
|
-
import { TableBorderSize } from "..";
|
|
4
|
-
|
|
5
|
-
export interface FlatTableRowHeaderProps extends PaddingProps {
|
|
6
|
-
/** Content alignment */
|
|
7
|
-
align?: string;
|
|
8
|
-
/** RowHeader content */
|
|
9
|
-
children?: React.ReactNode | string;
|
|
10
|
-
/** Column width, pass a number to set a fixed width in pixels */
|
|
11
|
-
width?: number;
|
|
12
|
-
/** Truncate cell content and add ellipsis to any text that overflows */
|
|
13
|
-
truncate?: boolean;
|
|
14
|
-
/** Title text to display if cell content truncates */
|
|
15
|
-
title?: string;
|
|
16
|
-
/** Sets a custom vertical right border */
|
|
17
|
-
verticalBorder?: TableBorderSize;
|
|
18
|
-
/** Sets the color of the right border */
|
|
19
|
-
verticalBorderColor?: string;
|
|
20
|
-
/** Defines whether the column should be sticky on the left or right hand side of the Table */
|
|
21
|
-
stickyAlignment?: "left" | "right";
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
declare function FlatTableRowHeader(
|
|
25
|
-
props: FlatTableRowHeaderProps
|
|
26
|
-
): JSX.Element;
|
|
27
|
-
|
|
28
|
-
export default FlatTableRowHeader;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { MarginProps } from "styled-system";
|
|
3
|
-
|
|
4
|
-
export interface FlatTableProps extends MarginProps {
|
|
5
|
-
/** The HTML id of the element that contains a description of this table. */
|
|
6
|
-
ariaDescribedby?: string;
|
|
7
|
-
/** A string to render as the table's caption */
|
|
8
|
-
caption?: string;
|
|
9
|
-
/** FlatTableHead and FlatTableBody */
|
|
10
|
-
children: React.ReactNode;
|
|
11
|
-
/** `FlatTable` color theme */
|
|
12
|
-
colorTheme?: "light" | "transparent-base" | "transparent-white" | "dark";
|
|
13
|
-
/** Content to be rendered at the foot of the table */
|
|
14
|
-
footer?: React.ReactNode;
|
|
15
|
-
/** If true, the header does not scroll with the content */
|
|
16
|
-
hasStickyFooter?: boolean;
|
|
17
|
-
/** If true, the header does not scroll with the content */
|
|
18
|
-
hasStickyHead?: boolean;
|
|
19
|
-
/** Set the height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
|
|
20
|
-
height?: string | number;
|
|
21
|
-
/** Set the min-height of the table. String can be any valid CSS string, numbers will be converted to pixels. */
|
|
22
|
-
minHeight?: string | number;
|
|
23
|
-
/** Toggles the zebra striping for the table rows */
|
|
24
|
-
isZebra?: boolean;
|
|
25
|
-
/** Used to define the tables size Renders as: 'compact', 'small', 'medium', 'large' and 'extraLarge' */
|
|
26
|
-
size?: "compact" | "small" | "medium" | "large" | "extraLarge";
|
|
27
|
-
/** Applies max-height of 100% to FlatTable if true */
|
|
28
|
-
hasMaxHeight?: boolean;
|
|
29
|
-
/** Set the overflow X of the table wrapper. Any valid CSS string */
|
|
30
|
-
overflowX?: string;
|
|
31
|
-
/** Width of the table. Any valid CSS string */
|
|
32
|
-
width?: string;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
declare function FlatTable(props: FlatTableProps): JSX.Element;
|
|
36
|
-
|
|
37
|
-
export default FlatTable;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
export interface SortProps {
|
|
4
|
-
/** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
|
|
5
|
-
sortType?: "ascending" | "descending" | false;
|
|
6
|
-
/** Callback fired when the `FlatTableSortHeader` is clicked */
|
|
7
|
-
onClick?: () => void;
|
|
8
|
-
/** Sets the content of `FlatTableSortHeader` */
|
|
9
|
-
children?: React.ReactNode | string;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
declare function Sort(props: SortProps): JSX.Element;
|
|
13
|
-
|
|
14
|
-
export default Sort;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
export interface FlatTableBodyDraggableProps {
|
|
4
|
-
/** Array of FlatTableRow. */
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
/** Callback fired when order is changed */
|
|
7
|
-
getOrder?: (draggableItemIds: number[]) => void;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
declare function FlatTableBodyDraggable(
|
|
11
|
-
props: FlatTableBodyDraggableProps
|
|
12
|
-
): JSX.Element;
|
|
13
|
-
|
|
14
|
-
export default FlatTableBodyDraggable;
|