@canonical/react-components 1.2.4 → 1.3.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/README.md +2 -2
- package/package.json +9 -6
- package/dist/components/Accordion/Accordion.d.ts +0 -46
- package/dist/components/Accordion/Accordion.stories.d.ts +0 -18
- package/dist/components/Accordion/Accordion.stories.js +0 -117
- package/dist/components/Accordion/AccordionSection/AccordionSection.d.ts +0 -34
- package/dist/components/Accordion/AccordionSection/index.d.ts +0 -2
- package/dist/components/Accordion/index.d.ts +0 -2
- package/dist/components/ActionButton/ActionButton.d.ts +0 -48
- package/dist/components/ActionButton/ActionButton.stories.d.ts +0 -7
- package/dist/components/ActionButton/ActionButton.stories.js +0 -36
- package/dist/components/ActionButton/index.d.ts +0 -2
- package/dist/components/ApplicationLayout/AppAside/AppAside.d.ts +0 -33
- package/dist/components/ApplicationLayout/AppAside/AppAside.stories.d.ts +0 -13
- package/dist/components/ApplicationLayout/AppAside/AppAside.stories.js +0 -116
- package/dist/components/ApplicationLayout/AppAside/index.d.ts +0 -2
- package/dist/components/ApplicationLayout/AppMain/AppMain.d.ts +0 -14
- package/dist/components/ApplicationLayout/AppMain/AppMain.stories.d.ts +0 -14
- package/dist/components/ApplicationLayout/AppMain/AppMain.stories.js +0 -45
- package/dist/components/ApplicationLayout/AppMain/index.d.ts +0 -2
- package/dist/components/ApplicationLayout/AppNavigation/AppNavigation.d.ts +0 -26
- package/dist/components/ApplicationLayout/AppNavigation/AppNavigation.stories.d.ts +0 -12
- package/dist/components/ApplicationLayout/AppNavigation/AppNavigation.stories.js +0 -104
- package/dist/components/ApplicationLayout/AppNavigation/index.d.ts +0 -2
- package/dist/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.d.ts +0 -18
- package/dist/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.stories.d.ts +0 -15
- package/dist/components/ApplicationLayout/AppNavigationBar/AppNavigationBar.stories.js +0 -52
- package/dist/components/ApplicationLayout/AppNavigationBar/index.d.ts +0 -2
- package/dist/components/ApplicationLayout/AppStatus/AppStatus.d.ts +0 -14
- package/dist/components/ApplicationLayout/AppStatus/AppStatus.stories.d.ts +0 -13
- package/dist/components/ApplicationLayout/AppStatus/AppStatus.stories.js +0 -41
- package/dist/components/ApplicationLayout/AppStatus/index.d.ts +0 -2
- package/dist/components/ApplicationLayout/Application/Application.d.ts +0 -15
- package/dist/components/ApplicationLayout/Application/Application.stories.d.ts +0 -6
- package/dist/components/ApplicationLayout/Application/Application.stories.js +0 -16
- package/dist/components/ApplicationLayout/Application/index.d.ts +0 -2
- package/dist/components/ApplicationLayout/ApplicationLayout.d.ts +0 -89
- package/dist/components/ApplicationLayout/ApplicationLayout.stories.d.ts +0 -24
- package/dist/components/ApplicationLayout/ApplicationLayout.stories.js +0 -232
- package/dist/components/ApplicationLayout/index.d.ts +0 -7
- package/dist/components/ArticlePagination/ArticlePagination.d.ts +0 -31
- package/dist/components/ArticlePagination/ArticlePagination.stories.d.ts +0 -6
- package/dist/components/ArticlePagination/ArticlePagination.stories.js +0 -22
- package/dist/components/ArticlePagination/index.d.ts +0 -2
- package/dist/components/Badge/Badge.d.ts +0 -34
- package/dist/components/Badge/Badge.stories.d.ts +0 -15
- package/dist/components/Badge/Badge.stories.js +0 -62
- package/dist/components/Badge/index.d.ts +0 -2
- package/dist/components/Button/Button.d.ts +0 -64
- package/dist/components/Button/Button.stories.d.ts +0 -32
- package/dist/components/Button/Button.stories.js +0 -180
- package/dist/components/Button/index.d.ts +0 -2
- package/dist/components/Card/Card.d.ts +0 -35
- package/dist/components/Card/Card.stories.d.ts +0 -33
- package/dist/components/Card/Card.stories.js +0 -51
- package/dist/components/Card/index.d.ts +0 -2
- package/dist/components/CheckboxInput/CheckableInput/CheckableInput.d.ts +0 -27
- package/dist/components/CheckboxInput/CheckableInput/index.d.ts +0 -2
- package/dist/components/CheckboxInput/CheckboxInput.d.ts +0 -9
- package/dist/components/CheckboxInput/CheckboxInput.stories.d.ts +0 -11
- package/dist/components/CheckboxInput/CheckboxInput.stories.js +0 -84
- package/dist/components/CheckboxInput/index.d.ts +0 -2
- package/dist/components/Chip/Chip.d.ts +0 -56
- package/dist/components/Chip/Chip.stories.d.ts +0 -9
- package/dist/components/Chip/Chip.stories.js +0 -45
- package/dist/components/Chip/index.d.ts +0 -2
- package/dist/components/Code/Code.d.ts +0 -13
- package/dist/components/Code/index.d.ts +0 -2
- package/dist/components/CodeSnippet/CodeSnippet.d.ts +0 -21
- package/dist/components/CodeSnippet/CodeSnippet.stories.d.ts +0 -45
- package/dist/components/CodeSnippet/CodeSnippet.stories.js +0 -279
- package/dist/components/CodeSnippet/CodeSnippetBlock.d.ts +0 -40
- package/dist/components/CodeSnippet/CodeSnippetDropdown.d.ts +0 -18
- package/dist/components/CodeSnippet/index.d.ts +0 -5
- package/dist/components/Col/Col.d.ts +0 -53
- package/dist/components/Col/Col.stories.d.ts +0 -11
- package/dist/components/Col/Col.stories.js +0 -154
- package/dist/components/Col/index.d.ts +0 -2
- package/dist/components/ConfirmationButton/ConfirmationButton.d.ts +0 -28
- package/dist/components/ConfirmationButton/ConfirmationButton.stories.d.ts +0 -9
- package/dist/components/ConfirmationButton/ConfirmationButton.stories.js +0 -108
- package/dist/components/ConfirmationButton/index.d.ts +0 -2
- package/dist/components/ConfirmationModal/ConfirmationModal.d.ts +0 -53
- package/dist/components/ConfirmationModal/ConfirmationModal.stories.d.ts +0 -18
- package/dist/components/ConfirmationModal/ConfirmationModal.stories.js +0 -135
- package/dist/components/ConfirmationModal/index.d.ts +0 -2
- package/dist/components/ContextualMenu/ContextualMenu.d.ts +0 -110
- package/dist/components/ContextualMenu/ContextualMenu.stories.d.ts +0 -13
- package/dist/components/ContextualMenu/ContextualMenu.stories.js +0 -107
- package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts +0 -43
- package/dist/components/ContextualMenu/ContextualMenuDropdown/index.d.ts +0 -2
- package/dist/components/ContextualMenu/index.d.ts +0 -3
- package/dist/components/EmptyState/EmptyState.d.ts +0 -25
- package/dist/components/EmptyState/EmptyState.stories.d.ts +0 -7
- package/dist/components/EmptyState/EmptyState.stories.js +0 -49
- package/dist/components/EmptyState/index.d.ts +0 -2
- package/dist/components/Field/Field.d.ts +0 -77
- package/dist/components/Field/index.d.ts +0 -2
- package/dist/components/Form/Form.d.ts +0 -21
- package/dist/components/Form/Form.stories.d.ts +0 -12
- package/dist/components/Form/Form.stories.js +0 -179
- package/dist/components/Form/index.d.ts +0 -2
- package/dist/components/FormikField/FormikField.d.ts +0 -25
- package/dist/components/FormikField/FormikField.stories.d.ts +0 -8
- package/dist/components/FormikField/FormikField.stories.js +0 -85
- package/dist/components/FormikField/index.d.ts +0 -1
- package/dist/components/Icon/Icon.d.ts +0 -59
- package/dist/components/Icon/Icon.stories.d.ts +0 -16
- package/dist/components/Icon/Icon.stories.js +0 -49
- package/dist/components/Icon/index.d.ts +0 -2
- package/dist/components/Input/Input.d.ts +0 -70
- package/dist/components/Input/Input.stories.d.ts +0 -14
- package/dist/components/Input/Input.stories.js +0 -148
- package/dist/components/Input/index.d.ts +0 -2
- package/dist/components/Label/Label.d.ts +0 -25
- package/dist/components/Label/index.d.ts +0 -2
- package/dist/components/Link/Link.d.ts +0 -31
- package/dist/components/Link/Link.stories.d.ts +0 -9
- package/dist/components/Link/Link.stories.js +0 -48
- package/dist/components/Link/index.d.ts +0 -2
- package/dist/components/List/List.d.ts +0 -36
- package/dist/components/List/List.stories.d.ts +0 -15
- package/dist/components/List/List.stories.js +0 -122
- package/dist/components/List/index.d.ts +0 -2
- package/dist/components/Loader/Loader.d.ts +0 -6
- package/dist/components/Loader/index.d.ts +0 -1
- package/dist/components/LoginPageLayout/LoginPageLayout.d.ts +0 -17
- package/dist/components/LoginPageLayout/LoginPageLayout.stories.d.ts +0 -9
- package/dist/components/LoginPageLayout/LoginPageLayout.stories.js +0 -58
- package/dist/components/LoginPageLayout/index.d.ts +0 -2
- package/dist/components/MainTable/MainTable.d.ts +0 -102
- package/dist/components/MainTable/MainTable.stories.d.ts +0 -15
- package/dist/components/MainTable/MainTable.stories.js +0 -553
- package/dist/components/MainTable/index.d.ts +0 -2
- package/dist/components/Modal/Modal.d.ts +0 -36
- package/dist/components/Modal/Modal.stories.d.ts +0 -6
- package/dist/components/Modal/Modal.stories.js +0 -57
- package/dist/components/Modal/index.d.ts +0 -2
- package/dist/components/ModularTable/ModularTable.d.ts +0 -105
- package/dist/components/ModularTable/ModularTable.stories.d.ts +0 -27
- package/dist/components/ModularTable/ModularTable.stories.js +0 -343
- package/dist/components/ModularTable/index.d.ts +0 -2
- package/dist/components/MultiSelect/FadeInDown/FadeInDown.d.ts +0 -10
- package/dist/components/MultiSelect/FadeInDown/index.d.ts +0 -1
- package/dist/components/MultiSelect/MultiSelect.d.ts +0 -57
- package/dist/components/MultiSelect/MultiSelect.stories.d.ts +0 -8
- package/dist/components/MultiSelect/MultiSelect.stories.js +0 -70
- package/dist/components/MultiSelect/index.d.ts +0 -1
- package/dist/components/Navigation/Navigation.d.ts +0 -66
- package/dist/components/Navigation/Navigation.stories.d.ts +0 -43
- package/dist/components/Navigation/Navigation.stories.js +0 -232
- package/dist/components/Navigation/NavigationLink/NavigationLink.d.ts +0 -10
- package/dist/components/Navigation/NavigationLink/index.d.ts +0 -1
- package/dist/components/Navigation/NavigationMenu/NavigationMenu.d.ts +0 -11
- package/dist/components/Navigation/NavigationMenu/index.d.ts +0 -1
- package/dist/components/Navigation/index.d.ts +0 -3
- package/dist/components/Navigation/types.d.ts +0 -64
- package/dist/components/Notification/Notification.d.ts +0 -110
- package/dist/components/Notification/Notification.stories.d.ts +0 -45
- package/dist/components/Notification/Notification.stories.js +0 -201
- package/dist/components/Notification/index.d.ts +0 -2
- package/dist/components/NotificationProvider/NotificationProvider.d.ts +0 -5
- package/dist/components/NotificationProvider/index.d.ts +0 -3
- package/dist/components/NotificationProvider/messageBuilder.d.ts +0 -6
- package/dist/components/NotificationProvider/types.d.ts +0 -35
- package/dist/components/Pagination/Pagination.d.ts +0 -102
- package/dist/components/Pagination/Pagination.stories.d.ts +0 -14
- package/dist/components/Pagination/Pagination.stories.js +0 -94
- package/dist/components/Pagination/PaginationButton/PaginationButton.d.ts +0 -30
- package/dist/components/Pagination/PaginationButton/index.d.ts +0 -2
- package/dist/components/Pagination/PaginationItem/PaginationItem.d.ts +0 -17
- package/dist/components/Pagination/PaginationItem/index.d.ts +0 -2
- package/dist/components/Pagination/index.d.ts +0 -2
- package/dist/components/Panel/Panel.d.ts +0 -123
- package/dist/components/Panel/Panel.stories.d.ts +0 -17
- package/dist/components/Panel/Panel.stories.js +0 -60
- package/dist/components/Panel/index.d.ts +0 -1
- package/dist/components/PasswordToggle/PasswordToggle.d.ts +0 -108
- package/dist/components/PasswordToggle/PasswordToggle.stories.d.ts +0 -12
- package/dist/components/PasswordToggle/PasswordToggle.stories.js +0 -74
- package/dist/components/PasswordToggle/index.d.ts +0 -2
- package/dist/components/RadioInput/RadioInput.d.ts +0 -9
- package/dist/components/RadioInput/RadioInput.stories.d.ts +0 -10
- package/dist/components/RadioInput/RadioInput.stories.js +0 -83
- package/dist/components/RadioInput/index.d.ts +0 -2
- package/dist/components/Row/Row.d.ts +0 -19
- package/dist/components/Row/Row.stories.d.ts +0 -9
- package/dist/components/Row/Row.stories.js +0 -29
- package/dist/components/Row/index.d.ts +0 -2
- package/dist/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.d.ts +0 -25
- package/dist/components/SearchAndFilter/FilterPanelSection/index.d.ts +0 -1
- package/dist/components/SearchAndFilter/SearchAndFilter.d.ts +0 -33
- package/dist/components/SearchAndFilter/SearchAndFilter.stories.d.ts +0 -8
- package/dist/components/SearchAndFilter/SearchAndFilter.stories.js +0 -218
- package/dist/components/SearchAndFilter/index.d.ts +0 -2
- package/dist/components/SearchAndFilter/types.d.ts +0 -11
- package/dist/components/SearchAndFilter/utils.d.ts +0 -13
- package/dist/components/SearchBox/SearchBox.d.ts +0 -63
- package/dist/components/SearchBox/SearchBox.stories.d.ts +0 -14
- package/dist/components/SearchBox/SearchBox.stories.js +0 -106
- package/dist/components/SearchBox/index.d.ts +0 -2
- package/dist/components/Select/Select.d.ts +0 -71
- package/dist/components/Select/Select.stories.d.ts +0 -7
- package/dist/components/Select/Select.stories.js +0 -97
- package/dist/components/Select/index.d.ts +0 -2
- package/dist/components/SideNavigation/SideNavigation.d.ts +0 -50
- package/dist/components/SideNavigation/SideNavigation.stories.d.ts +0 -14
- package/dist/components/SideNavigation/SideNavigation.stories.js +0 -62
- package/dist/components/SideNavigation/SideNavigationBase/SideNavigationBase.d.ts +0 -31
- package/dist/components/SideNavigation/SideNavigationBase/index.d.ts +0 -1
- package/dist/components/SideNavigation/SideNavigationItem/SideNavigationItem.d.ts +0 -20
- package/dist/components/SideNavigation/SideNavigationItem/SideNavigationItem.stories.d.ts +0 -22
- package/dist/components/SideNavigation/SideNavigationItem/SideNavigationItem.stories.js +0 -70
- package/dist/components/SideNavigation/SideNavigationItem/index.d.ts +0 -1
- package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.d.ts +0 -21
- package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.stories.d.ts +0 -7
- package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.stories.js +0 -32
- package/dist/components/SideNavigation/SideNavigationLink/index.d.ts +0 -1
- package/dist/components/SideNavigation/SideNavigationText/SideNavigationText.d.ts +0 -7
- package/dist/components/SideNavigation/SideNavigationText/SideNavigationText.stories.d.ts +0 -6
- package/dist/components/SideNavigation/SideNavigationText/SideNavigationText.stories.js +0 -25
- package/dist/components/SideNavigation/SideNavigationText/index.d.ts +0 -1
- package/dist/components/SideNavigation/index.d.ts +0 -5
- package/dist/components/Slider/Slider.d.ts +0 -62
- package/dist/components/Slider/Slider.stories.d.ts +0 -10
- package/dist/components/Slider/Slider.stories.js +0 -74
- package/dist/components/Slider/index.d.ts +0 -2
- package/dist/components/Spinner/Spinner.d.ts +0 -29
- package/dist/components/Spinner/Spinner.stories.d.ts +0 -8
- package/dist/components/Spinner/Spinner.stories.js +0 -28
- package/dist/components/Spinner/index.d.ts +0 -2
- package/dist/components/StatusLabel/StatusLabel.d.ts +0 -33
- package/dist/components/StatusLabel/StatusLabel.stories.d.ts +0 -10
- package/dist/components/StatusLabel/StatusLabel.stories.js +0 -61
- package/dist/components/StatusLabel/index.d.ts +0 -2
- package/dist/components/Strip/Strip.d.ts +0 -64
- package/dist/components/Strip/Strip.stories.d.ts +0 -12
- package/dist/components/Strip/Strip.stories.js +0 -130
- package/dist/components/Strip/index.d.ts +0 -2
- package/dist/components/SummaryButton/SummaryButton.d.ts +0 -29
- package/dist/components/SummaryButton/SummaryButton.stories.d.ts +0 -18
- package/dist/components/SummaryButton/SummaryButton.stories.js +0 -59
- package/dist/components/SummaryButton/index.d.ts +0 -2
- package/dist/components/Switch/Switch.d.ts +0 -17
- package/dist/components/Switch/Switch.stories.d.ts +0 -7
- package/dist/components/Switch/Switch.stories.js +0 -26
- package/dist/components/Switch/index.d.ts +0 -2
- package/dist/components/Table/Table.d.ts +0 -22
- package/dist/components/Table/index.d.ts +0 -2
- package/dist/components/TableCell/TableCell.d.ts +0 -26
- package/dist/components/TableCell/index.d.ts +0 -2
- package/dist/components/TableHeader/TableHeader.d.ts +0 -14
- package/dist/components/TableHeader/index.d.ts +0 -2
- package/dist/components/TablePagination/TablePagination.d.ts +0 -98
- package/dist/components/TablePagination/TablePagination.stories.d.ts +0 -14
- package/dist/components/TablePagination/TablePagination.stories.js +0 -330
- package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.d.ts +0 -24
- package/dist/components/TablePagination/TablePaginationControls/index.d.ts +0 -2
- package/dist/components/TablePagination/index.d.ts +0 -2
- package/dist/components/TablePagination/utils.d.ts +0 -27
- package/dist/components/TableRow/TableRow.d.ts +0 -10
- package/dist/components/TableRow/index.d.ts +0 -2
- package/dist/components/Tabs/Tabs.d.ts +0 -45
- package/dist/components/Tabs/Tabs.stories.d.ts +0 -11
- package/dist/components/Tabs/Tabs.stories.js +0 -56
- package/dist/components/Tabs/index.d.ts +0 -2
- package/dist/components/Textarea/Textarea.d.ts +0 -70
- package/dist/components/Textarea/Textarea.stories.d.ts +0 -7
- package/dist/components/Textarea/Textarea.stories.js +0 -62
- package/dist/components/Textarea/index.d.ts +0 -2
- package/dist/components/Tooltip/Tooltip.d.ts +0 -75
- package/dist/components/Tooltip/Tooltip.stories.d.ts +0 -12
- package/dist/components/Tooltip/Tooltip.stories.js +0 -71
- package/dist/components/Tooltip/index.d.ts +0 -2
- package/dist/enums.d.ts +0 -13
- package/dist/hooks/index.d.ts +0 -9
- package/dist/hooks/useId.d.ts +0 -4
- package/dist/hooks/useListener.d.ts +0 -11
- package/dist/hooks/useOnClickOutside.d.ts +0 -12
- package/dist/hooks/useOnEscapePressed.d.ts +0 -6
- package/dist/hooks/usePagination.d.ts +0 -19
- package/dist/hooks/usePrevious.d.ts +0 -7
- package/dist/hooks/useThrottle.d.ts +0 -9
- package/dist/hooks/useWindowFitment.d.ts +0 -54
- package/dist/index.d.ts +0 -132
- package/dist/types/index.d.ts +0 -38
- package/dist/utils.d.ts +0 -27
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.IconOnly = exports.IconAndLabel = exports.Default = exports.BaseAppearance = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _ConfirmationButton = _interopRequireDefault(require("./ConfirmationButton"));
|
|
9
|
-
var _Icon = _interopRequireWildcard(require("../Icon"));
|
|
10
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
-
const doNothing = () => {};
|
|
14
|
-
const meta = {
|
|
15
|
-
component: _ConfirmationButton.default,
|
|
16
|
-
tags: ["autodocs"]
|
|
17
|
-
};
|
|
18
|
-
const Default = exports.Default = {
|
|
19
|
-
render: () => /*#__PURE__*/_react.default.createElement(_ConfirmationButton.default, {
|
|
20
|
-
confirmationModalProps: {
|
|
21
|
-
title: "Confirm delete",
|
|
22
|
-
confirmButtonLabel: "Delete",
|
|
23
|
-
onConfirm: doNothing,
|
|
24
|
-
children: /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")
|
|
25
|
-
}
|
|
26
|
-
}, "Delete"),
|
|
27
|
-
name: "Default"
|
|
28
|
-
};
|
|
29
|
-
var _default = exports.default = meta;
|
|
30
|
-
const IconAndLabel = exports.IconAndLabel = {
|
|
31
|
-
render: () => {
|
|
32
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
33
|
-
const [isLoading, setLoading] = (0, _react.useState)(false);
|
|
34
|
-
const brieflyLoad = () => {
|
|
35
|
-
setLoading(true);
|
|
36
|
-
setTimeout(() => setLoading(false), 2000);
|
|
37
|
-
};
|
|
38
|
-
return /*#__PURE__*/_react.default.createElement(_ConfirmationButton.default, {
|
|
39
|
-
confirmationModalProps: {
|
|
40
|
-
title: "Confirm delete",
|
|
41
|
-
confirmButtonLabel: "Delete",
|
|
42
|
-
onConfirm: brieflyLoad,
|
|
43
|
-
children: /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")
|
|
44
|
-
},
|
|
45
|
-
className: "has-icon",
|
|
46
|
-
disabled: isLoading,
|
|
47
|
-
loading: isLoading,
|
|
48
|
-
shiftClickEnabled: true,
|
|
49
|
-
showShiftClickHint: true
|
|
50
|
-
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
51
|
-
name: _Icon.ICONS.delete
|
|
52
|
-
}), /*#__PURE__*/_react.default.createElement("span", null, "Delete"));
|
|
53
|
-
},
|
|
54
|
-
name: "Icon and label"
|
|
55
|
-
};
|
|
56
|
-
const IconOnly = exports.IconOnly = {
|
|
57
|
-
render: () => {
|
|
58
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
59
|
-
const [isLoading, setLoading] = (0, _react.useState)(false);
|
|
60
|
-
const brieflyLoad = () => {
|
|
61
|
-
setLoading(true);
|
|
62
|
-
setTimeout(() => setLoading(false), 2000);
|
|
63
|
-
};
|
|
64
|
-
return /*#__PURE__*/_react.default.createElement(_ConfirmationButton.default, {
|
|
65
|
-
confirmationModalProps: {
|
|
66
|
-
title: "Confirm delete",
|
|
67
|
-
confirmButtonLabel: "Delete",
|
|
68
|
-
onConfirm: brieflyLoad,
|
|
69
|
-
children: /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")
|
|
70
|
-
},
|
|
71
|
-
className: "has-icon",
|
|
72
|
-
disabled: isLoading,
|
|
73
|
-
loading: isLoading,
|
|
74
|
-
shiftClickEnabled: true,
|
|
75
|
-
showShiftClickHint: true
|
|
76
|
-
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
77
|
-
name: _Icon.ICONS.delete
|
|
78
|
-
}));
|
|
79
|
-
},
|
|
80
|
-
name: "Icon only"
|
|
81
|
-
};
|
|
82
|
-
const BaseAppearance = exports.BaseAppearance = {
|
|
83
|
-
render: () => {
|
|
84
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
85
|
-
const [isLoading, setLoading] = (0, _react.useState)(false);
|
|
86
|
-
const brieflyLoad = () => {
|
|
87
|
-
setLoading(true);
|
|
88
|
-
setTimeout(() => setLoading(false), 2000);
|
|
89
|
-
};
|
|
90
|
-
return /*#__PURE__*/_react.default.createElement(_ConfirmationButton.default, {
|
|
91
|
-
appearance: "base",
|
|
92
|
-
confirmationModalProps: {
|
|
93
|
-
title: "Confirm delete",
|
|
94
|
-
confirmButtonLabel: "Delete",
|
|
95
|
-
onConfirm: brieflyLoad,
|
|
96
|
-
children: /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")
|
|
97
|
-
},
|
|
98
|
-
className: "has-icon",
|
|
99
|
-
disabled: isLoading,
|
|
100
|
-
loading: isLoading,
|
|
101
|
-
shiftClickEnabled: true,
|
|
102
|
-
showShiftClickHint: true
|
|
103
|
-
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
104
|
-
name: _Icon.ICONS.delete
|
|
105
|
-
}));
|
|
106
|
-
},
|
|
107
|
-
name: "Base appearance"
|
|
108
|
-
};
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { MouseEvent, ReactElement } from "react";
|
|
2
|
-
import type { ReactNode } from "react";
|
|
3
|
-
import { PropsWithSpread, ValueOf } from "../../types";
|
|
4
|
-
import { ButtonAppearance, ButtonProps } from "../Button";
|
|
5
|
-
import { ModalProps } from "../Modal";
|
|
6
|
-
import { ActionButtonProps } from "../ActionButton";
|
|
7
|
-
export type Props = PropsWithSpread<{
|
|
8
|
-
/**
|
|
9
|
-
* Label for the cancel button.
|
|
10
|
-
*/
|
|
11
|
-
cancelButtonLabel?: ReactNode;
|
|
12
|
-
/**
|
|
13
|
-
* Additional props to be spread on the cancel button.
|
|
14
|
-
*/
|
|
15
|
-
cancelButtonProps?: Partial<ButtonProps>;
|
|
16
|
-
/**
|
|
17
|
-
* The content of the modal.
|
|
18
|
-
*/
|
|
19
|
-
children: ReactNode;
|
|
20
|
-
/**
|
|
21
|
-
* Appearance of the confirm button.
|
|
22
|
-
*/
|
|
23
|
-
confirmButtonAppearance?: ValueOf<typeof ButtonAppearance> | string;
|
|
24
|
-
/**
|
|
25
|
-
* Label for the confirm button.
|
|
26
|
-
*/
|
|
27
|
-
confirmButtonLabel: ReactNode;
|
|
28
|
-
/**
|
|
29
|
-
* Additional props to be spread on the confirm button.
|
|
30
|
-
*/
|
|
31
|
-
confirmButtonProps?: Partial<ActionButtonProps>;
|
|
32
|
-
/**
|
|
33
|
-
* Extra elements to be placed in the button row of the modal.
|
|
34
|
-
*/
|
|
35
|
-
confirmExtra?: ReactNode;
|
|
36
|
-
/**
|
|
37
|
-
* Function to perform the action prompted by the modal.
|
|
38
|
-
*/
|
|
39
|
-
onConfirm: (event: MouseEvent<HTMLElement>) => void;
|
|
40
|
-
/**
|
|
41
|
-
* Whether the confirm button should be in the loading state.
|
|
42
|
-
*/
|
|
43
|
-
confirmButtonLoading?: boolean;
|
|
44
|
-
/**
|
|
45
|
-
* Whether the confirm button should be disabled.
|
|
46
|
-
*/
|
|
47
|
-
confirmButtonDisabled?: boolean;
|
|
48
|
-
}, Omit<ModalProps, "buttonRow">>;
|
|
49
|
-
/**
|
|
50
|
-
* `ConfirmationModal` is a specialised version of the [Modal](?path=/docs/modal--default-story) component to prompt a confirmation from the user before executing an action.
|
|
51
|
-
*/
|
|
52
|
-
export declare const ConfirmationModal: ({ cancelButtonLabel, cancelButtonProps, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, confirmButtonLoading, confirmButtonDisabled, confirmButtonProps, ...props }: Props) => ReactElement;
|
|
53
|
-
export default ConfirmationModal;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import ConfirmationModal from "./ConfirmationModal";
|
|
3
|
-
declare const meta: Meta<typeof ConfirmationModal>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof ConfirmationModal>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
/**
|
|
8
|
-
* The title is optional, and the content is fully customisable.
|
|
9
|
-
*/
|
|
10
|
-
export declare const NoTitle: Story;
|
|
11
|
-
/**
|
|
12
|
-
* The appearance of the confirm button can be any of the `Button`'s appearance values.
|
|
13
|
-
*/
|
|
14
|
-
export declare const Positive: Story;
|
|
15
|
-
/**
|
|
16
|
-
* Extra elements can be added to the button row.
|
|
17
|
-
*/
|
|
18
|
-
export declare const Extra: Story;
|
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.Positive = exports.NoTitle = exports.Extra = exports.Default = void 0;
|
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
-
var _ConfirmationModal = _interopRequireDefault(require("./ConfirmationModal"));
|
|
9
|
-
var _Input = _interopRequireDefault(require("../Input"));
|
|
10
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
|
-
const doNothing = () => {};
|
|
14
|
-
const meta = {
|
|
15
|
-
component: _ConfirmationModal.default,
|
|
16
|
-
tags: ["autodocs"]
|
|
17
|
-
};
|
|
18
|
-
var _default = exports.default = meta;
|
|
19
|
-
const Default = exports.Default = {
|
|
20
|
-
render: () => {
|
|
21
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
22
|
-
const [modalOpen, setModalOpen] = (0, _react.useState)(false);
|
|
23
|
-
const closeHandler = () => setModalOpen(false);
|
|
24
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
|
|
25
|
-
onClick: () => setModalOpen(true)
|
|
26
|
-
}, "Open confirmation modal"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
|
|
27
|
-
title: "Confirm delete",
|
|
28
|
-
confirmButtonLabel: "Delete",
|
|
29
|
-
onConfirm: doNothing,
|
|
30
|
-
close: closeHandler
|
|
31
|
-
}, /*#__PURE__*/_react.default.createElement("p", null, "This will permanently delete the user \"Simon\".", /*#__PURE__*/_react.default.createElement("br", null), "You cannot undo this action.")) : null);
|
|
32
|
-
},
|
|
33
|
-
name: "Default"
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* The title is optional, and the content is fully customisable.
|
|
38
|
-
*/
|
|
39
|
-
const NoTitle = exports.NoTitle = {
|
|
40
|
-
render: () => {
|
|
41
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
42
|
-
const [modalOpen, setModalOpen] = (0, _react.useState)(false);
|
|
43
|
-
const closeHandler = () => setModalOpen(false);
|
|
44
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
|
|
45
|
-
onClick: () => setModalOpen(true)
|
|
46
|
-
}, "Run"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
|
|
47
|
-
close: closeHandler,
|
|
48
|
-
confirmButtonAppearance: "positive",
|
|
49
|
-
confirmButtonLabel: "Confirm",
|
|
50
|
-
onConfirm: doNothing
|
|
51
|
-
}, /*#__PURE__*/_react.default.createElement("h4", {
|
|
52
|
-
style: {
|
|
53
|
-
margin: "1rem 0"
|
|
54
|
-
}
|
|
55
|
-
}, "Run list-backups?"), /*#__PURE__*/_react.default.createElement("div", {
|
|
56
|
-
style: {
|
|
57
|
-
width: "480px",
|
|
58
|
-
marginBottom: "1rem"
|
|
59
|
-
}
|
|
60
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
61
|
-
className: "u-text--muted"
|
|
62
|
-
}, "UNIT COUNT"), /*#__PURE__*/_react.default.createElement("div", null, "1")), /*#__PURE__*/_react.default.createElement("div", {
|
|
63
|
-
style: {
|
|
64
|
-
marginBottom: "1.5rem"
|
|
65
|
-
}
|
|
66
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
67
|
-
className: "u-text--muted"
|
|
68
|
-
}, "UNIT NAME"), /*#__PURE__*/_react.default.createElement("div", null, "mysql/0"))) : null);
|
|
69
|
-
},
|
|
70
|
-
name: "No title"
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* The appearance of the confirm button can be any of the `Button`'s appearance values.
|
|
75
|
-
*/
|
|
76
|
-
const Positive = exports.Positive = {
|
|
77
|
-
render: () => {
|
|
78
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
79
|
-
const [modalOpen, setModalOpen] = (0, _react.useState)(false);
|
|
80
|
-
const closeHandler = () => setModalOpen(false);
|
|
81
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
|
|
82
|
-
onClick: () => setModalOpen(true)
|
|
83
|
-
}, "Apply changes"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
|
|
84
|
-
close: closeHandler,
|
|
85
|
-
confirmButtonAppearance: "positive",
|
|
86
|
-
confirmButtonLabel: "Yes, apply changes",
|
|
87
|
-
onConfirm: doNothing
|
|
88
|
-
}, /*#__PURE__*/_react.default.createElement("h4", {
|
|
89
|
-
style: {
|
|
90
|
-
margin: "1rem 0"
|
|
91
|
-
}
|
|
92
|
-
}, "Are you sure you wish to apply these changes?"), /*#__PURE__*/_react.default.createElement("p", null, "You have edited the following values to the mysql configuration:"), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h5", {
|
|
93
|
-
className: "u-no-margin--bottom"
|
|
94
|
-
}, "cluster-name"), /*#__PURE__*/_react.default.createElement("pre", {
|
|
95
|
-
className: "u-no-padding",
|
|
96
|
-
style: {
|
|
97
|
-
backgroundColor: "transparent"
|
|
98
|
-
}
|
|
99
|
-
}, "test")), /*#__PURE__*/_react.default.createElement("div", {
|
|
100
|
-
className: "p-text--small",
|
|
101
|
-
style: {
|
|
102
|
-
width: "480px"
|
|
103
|
-
}
|
|
104
|
-
}, "You can revert back to the applications default settings by clicking the \u201CReset all values\u201D button; or reset each edited field by clicking \u201CUse default\u201D.")) : null);
|
|
105
|
-
},
|
|
106
|
-
name: "Positive"
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* Extra elements can be added to the button row.
|
|
111
|
-
*/
|
|
112
|
-
const Extra = exports.Extra = {
|
|
113
|
-
render: () => {
|
|
114
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
115
|
-
const [modalOpen, setModalOpen] = (0, _react.useState)(false);
|
|
116
|
-
const closeHandler = () => setModalOpen(false);
|
|
117
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
|
|
118
|
-
onClick: () => setModalOpen(true)
|
|
119
|
-
}, "Stop"), modalOpen ? /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, {
|
|
120
|
-
confirmExtra: /*#__PURE__*/_react.default.createElement("span", {
|
|
121
|
-
className: "u-float-left"
|
|
122
|
-
}, /*#__PURE__*/_react.default.createElement(_Input.default, {
|
|
123
|
-
type: "checkbox",
|
|
124
|
-
id: "extraCheckbox",
|
|
125
|
-
label: "Force stop",
|
|
126
|
-
tabIndex: -1
|
|
127
|
-
})),
|
|
128
|
-
title: "Confirm stop",
|
|
129
|
-
confirmButtonLabel: "Stop",
|
|
130
|
-
onConfirm: doNothing,
|
|
131
|
-
close: closeHandler
|
|
132
|
-
}, /*#__PURE__*/_react.default.createElement("p", null, "This will stop instance", /*#__PURE__*/_react.default.createElement("b", null, "whimsical-mouflon"), ".")) : null);
|
|
133
|
-
},
|
|
134
|
-
name: "Extra"
|
|
135
|
-
};
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import type { HTMLProps, ReactNode } from "react";
|
|
3
|
-
import type { ButtonProps } from "../Button";
|
|
4
|
-
import type { ContextualMenuDropdownProps } from "./ContextualMenuDropdown";
|
|
5
|
-
import type { MenuLink, Position } from "./ContextualMenuDropdown";
|
|
6
|
-
import { ClassName, ExclusiveProps, PropsWithSpread, SubComponentProps } from "../../types";
|
|
7
|
-
export declare enum Label {
|
|
8
|
-
Toggle = "Toggle menu"
|
|
9
|
-
}
|
|
10
|
-
export type BaseProps<L> = PropsWithSpread<{
|
|
11
|
-
/**
|
|
12
|
-
* Whether the menu should adjust its horizontal position to fit on the screen.
|
|
13
|
-
*/
|
|
14
|
-
autoAdjust?: boolean;
|
|
15
|
-
/**
|
|
16
|
-
* The menu content (if the links prop is not supplied).
|
|
17
|
-
*/
|
|
18
|
-
children?: ContextualMenuDropdownProps["dropdownContent"];
|
|
19
|
-
/**
|
|
20
|
-
* An optional class to apply to the wrapping element.
|
|
21
|
-
*/
|
|
22
|
-
className?: ClassName;
|
|
23
|
-
/**
|
|
24
|
-
* Whether the menu should close when the escape key is pressed.
|
|
25
|
-
*/
|
|
26
|
-
closeOnEsc?: boolean;
|
|
27
|
-
/**
|
|
28
|
-
* Whether the menu should close when clicking outside the menu.
|
|
29
|
-
*/
|
|
30
|
-
closeOnOutsideClick?: boolean;
|
|
31
|
-
/**
|
|
32
|
-
* Whether the menu's width should match the toggle's width.
|
|
33
|
-
*/
|
|
34
|
-
constrainPanelWidth?: boolean;
|
|
35
|
-
/**
|
|
36
|
-
* An optional class to apply to the dropdown.
|
|
37
|
-
*/
|
|
38
|
-
dropdownClassName?: string | null;
|
|
39
|
-
/**
|
|
40
|
-
* Additional props to pass to the dropdown.
|
|
41
|
-
*/
|
|
42
|
-
dropdownProps?: SubComponentProps<ContextualMenuDropdownProps>;
|
|
43
|
-
/**
|
|
44
|
-
* A list of links to display in the menu (if the children prop is not supplied.)
|
|
45
|
-
*/
|
|
46
|
-
links?: MenuLink<L>[] | null;
|
|
47
|
-
/**
|
|
48
|
-
* A function to call when the menu is toggled.
|
|
49
|
-
*/
|
|
50
|
-
onToggleMenu?: (isOpen: boolean) => void | null;
|
|
51
|
-
/**
|
|
52
|
-
* The horizontal position of the menu.
|
|
53
|
-
*/
|
|
54
|
-
position?: Position | null;
|
|
55
|
-
/**
|
|
56
|
-
* An element to make the menu relative to.
|
|
57
|
-
*/
|
|
58
|
-
positionNode?: HTMLElement | null;
|
|
59
|
-
/**
|
|
60
|
-
* Whether the dropdown should scroll if it is too long to fit on the screen.
|
|
61
|
-
*/
|
|
62
|
-
scrollOverflow?: boolean;
|
|
63
|
-
/**
|
|
64
|
-
* Whether the menu should be visible.
|
|
65
|
-
*/
|
|
66
|
-
visible?: boolean;
|
|
67
|
-
}, HTMLProps<HTMLSpanElement>>;
|
|
68
|
-
/**
|
|
69
|
-
* The props for the ContextualMenu component.
|
|
70
|
-
* @template L - The type of the link props.
|
|
71
|
-
*/
|
|
72
|
-
export type Props<L> = BaseProps<L> & ExclusiveProps<{
|
|
73
|
-
/**
|
|
74
|
-
* Whether the toggle should display a chevron icon.
|
|
75
|
-
*/
|
|
76
|
-
hasToggleIcon?: boolean;
|
|
77
|
-
/**
|
|
78
|
-
* The appearance of the toggle button.
|
|
79
|
-
*/
|
|
80
|
-
toggleAppearance?: ButtonProps["appearance"] | null;
|
|
81
|
-
/**
|
|
82
|
-
* A class to apply to the toggle button.
|
|
83
|
-
*/
|
|
84
|
-
toggleClassName?: string | null;
|
|
85
|
-
/**
|
|
86
|
-
* Whether the toggle button should be disabled.
|
|
87
|
-
*/
|
|
88
|
-
toggleDisabled?: boolean;
|
|
89
|
-
/**
|
|
90
|
-
* The toggle button's label.
|
|
91
|
-
*/
|
|
92
|
-
toggleLabel?: React.ReactNode | null;
|
|
93
|
-
/**
|
|
94
|
-
* Whether the toggle lable or icon should appear first.
|
|
95
|
-
*/
|
|
96
|
-
toggleLabelFirst?: boolean;
|
|
97
|
-
/**
|
|
98
|
-
* Additional props to pass to the toggle button.
|
|
99
|
-
*/
|
|
100
|
-
toggleProps?: SubComponentProps<ButtonProps>;
|
|
101
|
-
}, {
|
|
102
|
-
toggle: ReactNode;
|
|
103
|
-
}>;
|
|
104
|
-
/**
|
|
105
|
-
* This is a [React](https://reactjs.org/) component for the Vanilla [Contextual menu](https://docs.vanillaframework.io/patterns//contextual-menu/).
|
|
106
|
-
*
|
|
107
|
-
* A contextual menu can be used in conjunction with any page element to provide a contextual menu.
|
|
108
|
-
*/
|
|
109
|
-
declare const ContextualMenu: <L>({ autoAdjust, children, className, closeOnEsc, closeOnOutsideClick, constrainPanelWidth, dropdownClassName, dropdownProps, hasToggleIcon, links, onToggleMenu, position, positionNode, scrollOverflow, toggle, toggleAppearance, toggleClassName, toggleDisabled, toggleLabel, toggleLabelFirst, toggleProps, visible, ...wrapperProps }: Props<L>) => JSX.Element;
|
|
110
|
-
export default ContextualMenu;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import ContextualMenu from "./ContextualMenu";
|
|
3
|
-
declare const meta: Meta<typeof ContextualMenu>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof ContextualMenu>;
|
|
6
|
-
/**
|
|
7
|
-
* The contextual menu will provide a visual wrapper to any provided children. Visibility can be toggled via the `visible` prop.
|
|
8
|
-
*/
|
|
9
|
-
export declare const Default: Story;
|
|
10
|
-
export declare const Toggle: Story;
|
|
11
|
-
export declare const OverflowingContainer: Story;
|
|
12
|
-
export declare const ChildFunction: Story;
|
|
13
|
-
export declare const ChildElement: Story;
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.Toggle = exports.OverflowingContainer = exports.Default = exports.ChildFunction = exports.ChildElement = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _Button = _interopRequireDefault(require("../Button"));
|
|
9
|
-
var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
|
|
10
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
|
-
const ScrollTemplate = args => /*#__PURE__*/_react.default.createElement("div", {
|
|
12
|
-
style: {
|
|
13
|
-
maxWidth: "30rem",
|
|
14
|
-
maxHeight: "10rem",
|
|
15
|
-
overflow: "auto",
|
|
16
|
-
padding: "1rem"
|
|
17
|
-
}
|
|
18
|
-
}, /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, args), Array(3).fill( /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")), /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, args));
|
|
19
|
-
const Template = args => /*#__PURE__*/_react.default.createElement("div", {
|
|
20
|
-
className: "u-align--center"
|
|
21
|
-
}, /*#__PURE__*/_react.default.createElement(_ContextualMenu.default, args));
|
|
22
|
-
const meta = {
|
|
23
|
-
component: _ContextualMenu.default,
|
|
24
|
-
render: Template,
|
|
25
|
-
tags: ["autodocs"],
|
|
26
|
-
argTypes: {
|
|
27
|
-
children: {
|
|
28
|
-
control: {
|
|
29
|
-
disable: true
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
links: {
|
|
33
|
-
control: {
|
|
34
|
-
disable: true
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
var _default = exports.default = meta;
|
|
40
|
-
/**
|
|
41
|
-
* The contextual menu will provide a visual wrapper to any provided children. Visibility can be toggled via the `visible` prop.
|
|
42
|
-
*/
|
|
43
|
-
const Default = exports.Default = {
|
|
44
|
-
name: "Default",
|
|
45
|
-
args: {
|
|
46
|
-
children: /*#__PURE__*/_react.default.createElement("span", {
|
|
47
|
-
style: {
|
|
48
|
-
padding: "1rem"
|
|
49
|
-
}
|
|
50
|
-
}, "This is a menu."),
|
|
51
|
-
closeOnOutsideClick: false,
|
|
52
|
-
constrainPanelWidth: false,
|
|
53
|
-
position: "left",
|
|
54
|
-
visible: true
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
const Toggle = exports.Toggle = {
|
|
58
|
-
name: "Toggle",
|
|
59
|
-
args: {
|
|
60
|
-
links: [{
|
|
61
|
-
children: "Link 1",
|
|
62
|
-
onClick: () => {}
|
|
63
|
-
}, {
|
|
64
|
-
children: "Link 2",
|
|
65
|
-
onClick: () => {}
|
|
66
|
-
}],
|
|
67
|
-
hasToggleIcon: true,
|
|
68
|
-
position: "right",
|
|
69
|
-
toggleLabel: "Click me!"
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
const OverflowingContainer = exports.OverflowingContainer = {
|
|
73
|
-
render: ScrollTemplate.bind({}),
|
|
74
|
-
name: "Overflowing container",
|
|
75
|
-
args: {
|
|
76
|
-
links: [{
|
|
77
|
-
children: "Link 1",
|
|
78
|
-
onClick: () => {}
|
|
79
|
-
}, {
|
|
80
|
-
children: "Long Link 2",
|
|
81
|
-
onClick: () => {}
|
|
82
|
-
}],
|
|
83
|
-
hasToggleIcon: true,
|
|
84
|
-
position: "right",
|
|
85
|
-
toggleLabel: "Click me!"
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
const ChildFunction = exports.ChildFunction = {
|
|
89
|
-
name: "Child function",
|
|
90
|
-
args: {
|
|
91
|
-
children: close => /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
92
|
-
onClick: close
|
|
93
|
-
}, "child function"),
|
|
94
|
-
hasToggleIcon: true,
|
|
95
|
-
position: "right",
|
|
96
|
-
toggleLabel: "Click me!"
|
|
97
|
-
}
|
|
98
|
-
};
|
|
99
|
-
const ChildElement = exports.ChildElement = {
|
|
100
|
-
name: "Child element",
|
|
101
|
-
args: {
|
|
102
|
-
children: /*#__PURE__*/_react.default.createElement(_Button.default, null, "child element"),
|
|
103
|
-
hasToggleIcon: true,
|
|
104
|
-
position: "right",
|
|
105
|
-
toggleLabel: "Click me!"
|
|
106
|
-
}
|
|
107
|
-
};
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { ReactElement } from "react";
|
|
2
|
-
import type { HTMLProps, ReactNode } from "react";
|
|
3
|
-
import type { ButtonProps } from "../../Button";
|
|
4
|
-
import type { WindowFitment } from "../../../hooks";
|
|
5
|
-
export declare enum Label {
|
|
6
|
-
Dropdown = "submenu"
|
|
7
|
-
}
|
|
8
|
-
/**
|
|
9
|
-
* The type of the menu links.
|
|
10
|
-
* @template L - The type of the link props.
|
|
11
|
-
*/
|
|
12
|
-
export type MenuLink<L = null> = string | ButtonProps<L> | ButtonProps<L>[];
|
|
13
|
-
export type Position = "left" | "center" | "right";
|
|
14
|
-
/**
|
|
15
|
-
* The props for the ContextualMenuDropdown component.
|
|
16
|
-
* @template L - The type of the link props.
|
|
17
|
-
*/
|
|
18
|
-
export type Props<L = null> = {
|
|
19
|
-
adjustedPosition?: Position;
|
|
20
|
-
autoAdjust?: boolean;
|
|
21
|
-
handleClose?: (evt?: MouseEvent) => void;
|
|
22
|
-
constrainPanelWidth?: boolean;
|
|
23
|
-
dropdownClassName?: string;
|
|
24
|
-
dropdownContent?: ReactNode | ((close: () => void) => ReactElement);
|
|
25
|
-
id?: string;
|
|
26
|
-
isOpen?: boolean;
|
|
27
|
-
links?: MenuLink<L>[];
|
|
28
|
-
position?: Position;
|
|
29
|
-
positionCoords?: DOMRect;
|
|
30
|
-
positionNode?: HTMLElement;
|
|
31
|
-
scrollOverflow?: boolean;
|
|
32
|
-
setAdjustedPosition?: (position: Position) => void;
|
|
33
|
-
contextualMenuClassName?: string;
|
|
34
|
-
} & HTMLProps<HTMLSpanElement>;
|
|
35
|
-
/**
|
|
36
|
-
* Calculate the adjusted position in relation to the window.
|
|
37
|
-
* @param position - The requested position.
|
|
38
|
-
* @param fitsWindow - The window fitment info.
|
|
39
|
-
* @return The new position.
|
|
40
|
-
*/
|
|
41
|
-
export declare const adjustForWindow: (position: Position, fitsWindow: WindowFitment) => Position;
|
|
42
|
-
declare const ContextualMenuDropdown: <L>({ adjustedPosition, autoAdjust, handleClose, constrainPanelWidth, dropdownClassName, dropdownContent, id, isOpen, links, position, positionCoords, positionNode, scrollOverflow, setAdjustedPosition, contextualMenuClassName, ...props }: Props<L>) => JSX.Element;
|
|
43
|
-
export default ContextualMenuDropdown;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { ReactNode, HTMLProps, ReactElement } from "react";
|
|
2
|
-
import { PropsWithSpread } from "../../types";
|
|
3
|
-
export type Props = PropsWithSpread<{
|
|
4
|
-
/**
|
|
5
|
-
* The content of the empty state.
|
|
6
|
-
*/
|
|
7
|
-
children?: ReactNode;
|
|
8
|
-
/**
|
|
9
|
-
* Optional class(es) to add to the wrapping element.
|
|
10
|
-
*/
|
|
11
|
-
className?: string;
|
|
12
|
-
/**
|
|
13
|
-
* An image representing the empty state.
|
|
14
|
-
*/
|
|
15
|
-
image: ReactNode;
|
|
16
|
-
/**
|
|
17
|
-
* The title of the empty state.
|
|
18
|
-
*/
|
|
19
|
-
title: string;
|
|
20
|
-
}, HTMLProps<HTMLDivElement>>;
|
|
21
|
-
/**
|
|
22
|
-
* This is a [React](https://reactjs.org/) component to represent an empty state.
|
|
23
|
-
*/
|
|
24
|
-
export declare const EmptyState: ({ children, className, image, title, ...props }: Props) => ReactElement;
|
|
25
|
-
export default EmptyState;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { Meta, StoryObj } from "@storybook/react";
|
|
2
|
-
import EmptyState from "./EmptyState";
|
|
3
|
-
declare const meta: Meta<typeof EmptyState>;
|
|
4
|
-
export default meta;
|
|
5
|
-
type Story = StoryObj<typeof EmptyState>;
|
|
6
|
-
export declare const Default: Story;
|
|
7
|
-
export declare const WithContent: Story;
|