@hazelcast/ui 3.0.13 → 4.0.1-canary.10
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 +1 -29
- package/lib/components/Alert.js +2 -2
- package/lib/components/Alert.js.map +1 -1
- package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.js +1 -1
- package/lib/components/AppHeader/AppHeaderMenu/AppHeaderMenu.js.map +1 -1
- package/lib/components/AppHeader/SelectCluster/SelectCluster.js +1 -1
- package/lib/components/AppHeader/SelectCluster/SelectCluster.js.map +1 -1
- package/lib/components/AppSidebar/AppSidebar.js +1 -1
- package/lib/components/AppSidebar/AppSidebar.js.map +1 -1
- package/lib/components/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.js +1 -1
- package/lib/components/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.js.map +1 -1
- package/lib/components/AppSidebar/AppSidebarItem/AppSidebarItem.d.ts +1 -3
- package/lib/components/AppSidebar/AppSidebarItem/AppSidebarItem.js +11 -10
- package/lib/components/AppSidebar/AppSidebarItem/AppSidebarItem.js.map +1 -1
- package/lib/components/AutocompleteField.d.ts +1 -3
- package/lib/components/AutocompleteField.js +4 -5
- package/lib/components/AutocompleteField.js.map +1 -1
- package/lib/components/AutocompleteField.module.css +183 -0
- package/lib/components/Badge.d.ts +1 -2
- package/lib/components/Badge.js +3 -7
- package/lib/components/Badge.js.map +1 -1
- package/lib/components/Badge.module.scss +18 -29
- package/lib/components/Button.d.ts +10 -33
- package/lib/components/Button.js +31 -51
- package/lib/components/Button.js.map +1 -1
- package/lib/components/Button.module.css +188 -0
- package/lib/components/ButtonGroup.d.ts +10 -0
- package/lib/components/ButtonGroup.js +6 -0
- package/lib/components/ButtonGroup.js.map +1 -0
- package/lib/components/ButtonGroup.module.css +29 -0
- package/lib/components/Calendar/components/CalendarTime.js +1 -1
- package/lib/components/Calendar/components/CalendarTime.js.map +1 -1
- package/lib/components/Checkbox.js +1 -1
- package/lib/components/Checkbox.js.map +1 -1
- package/lib/components/Checkbox.module.css +97 -0
- package/lib/components/Dialog.js +1 -1
- package/lib/components/Dialog.js.map +1 -1
- package/lib/components/Error.d.ts +2 -2
- package/lib/components/Help.d.ts +2 -2
- package/lib/components/Help.js +3 -2
- package/lib/components/Help.js.map +1 -1
- package/lib/components/IconButton.d.ts +8 -8
- package/lib/components/IconButton.js +24 -13
- package/lib/components/IconButton.js.map +1 -1
- package/lib/components/IconButton.module.css +145 -0
- package/lib/components/InteractiveList.d.ts +1 -1
- package/lib/components/InteractiveList.js +5 -5
- package/lib/components/InteractiveList.js.map +1 -1
- package/lib/components/InteractiveList.module.css +59 -0
- package/lib/components/Modal.d.ts +19 -2
- package/lib/components/Modal.js +56 -25
- package/lib/components/Modal.js.map +1 -1
- package/lib/components/Modal.module.css +222 -0
- package/lib/components/NumberField.d.ts +2 -3
- package/lib/components/NumberField.js +7 -10
- package/lib/components/NumberField.js.map +1 -1
- package/lib/components/NumberField.module.css +73 -0
- package/lib/components/Pagination.js +7 -7
- package/lib/components/Pagination.js.map +1 -1
- package/lib/components/PasswordField.d.ts +1 -2
- package/lib/components/PasswordField.js +2 -2
- package/lib/components/PasswordField.js.map +1 -1
- package/lib/components/PasswordField.module.scss +3 -0
- package/lib/components/Select/CheckableSelectField.d.ts +0 -1
- package/lib/components/Select/CheckableSelectField.js +12 -6
- package/lib/components/Select/CheckableSelectField.js.map +1 -1
- package/lib/components/Select/CheckableSelectField.module.css +112 -0
- package/lib/components/Select/Common.js +3 -3
- package/lib/components/Select/Common.js.map +1 -1
- package/lib/components/Select/Common.module.css +35 -0
- package/lib/components/Select/MultiSelectField.d.ts +1 -1
- package/lib/components/Select/MultiSelectField.js +3 -5
- package/lib/components/Select/MultiSelectField.js.map +1 -1
- package/lib/components/Select/MultiSelectField.module.css +60 -0
- package/lib/components/Select/SelectField.d.ts +2 -3
- package/lib/components/Select/SelectField.js +4 -6
- package/lib/components/Select/SelectField.js.map +1 -1
- package/lib/components/Select/SelectField.module.css +202 -0
- package/lib/components/SimpleTable.d.ts +25 -6
- package/lib/components/SimpleTable.js +27 -12
- package/lib/components/SimpleTable.js.map +1 -1
- package/lib/components/SimpleTable.module.css +80 -0
- package/lib/components/Table/Cell.js +6 -7
- package/lib/components/Table/Cell.js.map +1 -1
- package/lib/components/Tabs/Tab.js +1 -1
- package/lib/components/Tabs/Tab.js.map +1 -1
- package/lib/components/Tabs/Tab.module.css +58 -0
- package/lib/components/Tabs/TabList.js +1 -1
- package/lib/components/Tabs/TabList.js.map +1 -1
- package/lib/components/Tabs/TabList.module.css +9 -0
- package/lib/components/Tabs/TabPanel.js +1 -1
- package/lib/components/Tabs/TabPanel.js.map +1 -1
- package/lib/components/Tabs/TabPanel.module.css +7 -0
- package/lib/components/TextArea.js +1 -1
- package/lib/components/TextArea.js.map +1 -1
- package/lib/components/TextArea.module.css +109 -0
- package/lib/components/TextField.d.ts +2 -2
- package/lib/components/TextField.js +2 -2
- package/lib/components/TextField.js.map +1 -1
- package/lib/components/TextField.module.css +195 -0
- package/lib/components/Toast/Toast.d.ts +12 -0
- package/lib/components/Toast/Toast.js +26 -0
- package/lib/components/Toast/Toast.js.map +1 -0
- package/lib/components/Toast/Toast.module.css +98 -0
- package/lib/components/Toast/index.d.ts +4 -0
- package/lib/components/Toast/index.js +5 -0
- package/lib/components/Toast/index.js.map +1 -0
- package/lib/components/Toggle.js +2 -3
- package/lib/components/Toggle.js.map +1 -1
- package/lib/components/Toggle.module.css +120 -0
- package/lib/components/Tooltip.d.ts +35 -22
- package/lib/components/Tooltip.js +22 -47
- package/lib/components/Tooltip.js.map +1 -1
- package/lib/components/Tooltip.module.css +128 -0
- package/lib/components/TruncatedText.d.ts +2 -2
- package/lib/components/TruncatedText.js +3 -3
- package/lib/components/TruncatedText.js.map +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js.map +1 -1
- package/lib/old/AutocompleteField.d.ts +49 -0
- package/lib/old/AutocompleteField.js +166 -0
- package/lib/old/AutocompleteField.js.map +1 -0
- package/lib/old/AutocompleteFieldFormik.d.ts +9 -0
- package/lib/old/AutocompleteFieldFormik.js +19 -0
- package/lib/old/AutocompleteFieldFormik.js.map +1 -0
- package/lib/old/Button.d.ts +75 -0
- package/lib/old/Button.js +37 -0
- package/lib/old/Button.js.map +1 -0
- package/lib/{components/Button.module.scss → old/ButtonLegacy.module.scss} +2 -8
- package/lib/old/Checkbox.d.ts +35 -0
- package/lib/old/Checkbox.js +38 -0
- package/lib/old/Checkbox.js.map +1 -0
- package/lib/old/CheckboxFormik.d.ts +10 -0
- package/lib/old/CheckboxFormik.js +17 -0
- package/lib/old/CheckboxFormik.js.map +1 -0
- package/lib/old/IconButton.d.ts +49 -0
- package/lib/old/IconButton.js +25 -0
- package/lib/old/IconButton.js.map +1 -0
- package/lib/old/InteractiveList.d.ts +34 -0
- package/lib/old/InteractiveList.js +43 -0
- package/lib/old/InteractiveList.js.map +1 -0
- package/lib/old/InteractiveListFormik.d.ts +10 -0
- package/lib/old/InteractiveListFormik.js +75 -0
- package/lib/old/InteractiveListFormik.js.map +1 -0
- package/lib/old/Modal.d.ts +26 -0
- package/lib/old/Modal.js +41 -0
- package/lib/old/Modal.js.map +1 -0
- package/lib/old/NumberField.d.ts +33 -0
- package/lib/old/NumberField.js +141 -0
- package/lib/old/NumberField.js.map +1 -0
- package/lib/old/NumberFieldFormik.d.ts +10 -0
- package/lib/old/NumberFieldFormik.js +52 -0
- package/lib/old/NumberFieldFormik.js.map +1 -0
- package/lib/old/PasswordField.d.ts +29 -0
- package/lib/old/PasswordField.js +26 -0
- package/lib/old/PasswordField.js.map +1 -0
- package/lib/old/PasswordFieldFormik.d.ts +10 -0
- package/lib/old/PasswordFieldFormik.js +17 -0
- package/lib/old/PasswordFieldFormik.js.map +1 -0
- package/lib/old/PasswordFieldLegacy.module.scss +26 -0
- package/lib/old/Select/CheckableSelectField.d.ts +40 -0
- package/lib/old/Select/CheckableSelectField.js +77 -0
- package/lib/old/Select/CheckableSelectField.js.map +1 -0
- package/lib/old/Select/CheckableSelectFieldFormik.d.ts +10 -0
- package/lib/old/Select/CheckableSelectFieldFormik.js +19 -0
- package/lib/old/Select/CheckableSelectFieldFormik.js.map +1 -0
- package/lib/old/Select/Common.d.ts +5 -0
- package/lib/old/Select/Common.js +54 -0
- package/lib/old/Select/Common.js.map +1 -0
- package/lib/old/Select/MultiSelectField.d.ts +28 -0
- package/lib/old/Select/MultiSelectField.js +113 -0
- package/lib/old/Select/MultiSelectField.js.map +1 -0
- package/lib/old/Select/MultiSelectFieldFormik.d.ts +11 -0
- package/lib/old/Select/MultiSelectFieldFormik.js +19 -0
- package/lib/old/Select/MultiSelectFieldFormik.js.map +1 -0
- package/lib/old/Select/SelectField.d.ts +43 -0
- package/lib/old/Select/SelectField.js +103 -0
- package/lib/old/Select/SelectField.js.map +1 -0
- package/lib/old/Select/SelectFieldFormik.d.ts +10 -0
- package/lib/old/Select/SelectFieldFormik.js +19 -0
- package/lib/old/Select/SelectFieldFormik.js.map +1 -0
- package/lib/old/Select/helpers.d.ts +12 -0
- package/lib/old/Select/helpers.js +29 -0
- package/lib/old/Select/helpers.js.map +1 -0
- package/lib/old/SimpleTable.d.ts +11 -0
- package/lib/old/SimpleTable.js +26 -0
- package/lib/old/SimpleTable.js.map +1 -0
- package/lib/old/Tabs.d.ts +53 -0
- package/lib/old/Tabs.js +92 -0
- package/lib/old/Tabs.js.map +1 -0
- package/lib/{components/Tabs/Tab.module.scss → old/TabsLegacy.module.scss} +14 -6
- package/lib/old/TextArea.d.ts +19 -0
- package/lib/old/TextArea.js +25 -0
- package/lib/old/TextArea.js.map +1 -0
- package/lib/old/TextAreaFormik.d.ts +9 -0
- package/lib/old/TextAreaFormik.js +11 -0
- package/lib/old/TextAreaFormik.js.map +1 -0
- package/lib/old/TextField.d.ts +50 -0
- package/lib/old/TextField.js +65 -0
- package/lib/old/TextField.js.map +1 -0
- package/lib/old/TextFieldFormik.d.ts +11 -0
- package/lib/old/TextFieldFormik.js +23 -0
- package/lib/old/TextFieldFormik.js.map +1 -0
- package/lib/{components/TextField.module.scss → old/TextFieldLegacy.module.scss} +0 -1
- package/lib/{components → old}/Toast.js +2 -2
- package/lib/old/Toast.js.map +1 -0
- package/lib/old/Toggle.d.ts +21 -0
- package/lib/old/Toggle.js +22 -0
- package/lib/old/Toggle.js.map +1 -0
- package/lib/old/ToggleFormik.d.ts +9 -0
- package/lib/old/ToggleFormik.js +12 -0
- package/lib/old/ToggleFormik.js.map +1 -0
- package/lib/{components/Toggle.module.scss → old/ToggleLegacy.module.scss} +0 -2
- package/lib/old/Tooltip.d.ts +34 -0
- package/lib/old/Tooltip.js +57 -0
- package/lib/old/Tooltip.js.map +1 -0
- package/lib/old/Tooltip.module.scss +45 -0
- package/lib/old/index.d.ts +58 -0
- package/lib/old/index.js +34 -0
- package/lib/old/index.js.map +1 -0
- package/package.json +5 -11
- package/styles/constants/_colors.scss +18 -0
- package/styles/variables.css +162 -0
- package/lib/components/Tabs/TabList.module.scss +0 -3
- package/lib/components/Tabs/TabPanel.module.scss +0 -7
- package/lib/components/Toast.js.map +0 -1
- /package/lib/{components/AutocompleteField.module.scss → old/AutocompleteFieldLegacy.module.scss} +0 -0
- /package/lib/{components/Checkbox.module.scss → old/CheckboxLegacy.module.scss} +0 -0
- /package/lib/{components/IconButton.module.scss → old/IconButtonLegacy.module.scss} +0 -0
- /package/lib/{components/InteractiveList.module.scss → old/InteractiveListLegacy.module.scss} +0 -0
- /package/lib/{components/Modal.module.scss → old/ModalLegacy.module.scss} +0 -0
- /package/lib/{components/NumberField.module.scss → old/NumberFieldLegacy.module.scss} +0 -0
- /package/lib/{components/Select/CheckableSelectField.module.scss → old/Select/CheckableSelectFieldLegacy.module.scss} +0 -0
- /package/lib/{components/Select/Common.module.scss → old/Select/CommonLegacy.module.scss} +0 -0
- /package/lib/{components/Select/MultiSelectField.module.scss → old/Select/MultiSelectFieldLegacy.module.scss} +0 -0
- /package/lib/{components/Select/SelectField.module.scss → old/Select/SelectFieldLegacy.module.scss} +0 -0
- /package/lib/{components/SimpleTable.module.scss → old/SimpleTableLegacy.module.scss} +0 -0
- /package/lib/{components/TextArea.module.scss → old/TextAreaLegacy.module.scss} +0 -0
- /package/lib/{components → old}/Toast.d.ts +0 -0
- /package/lib/{components/Toast.module.scss → old/ToastLegacy.module.scss} +0 -0
package/README.md
CHANGED
|
@@ -2,37 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|

|
|
4
4
|
|
|
5
|
-
Design system built with A11Y in mind.
|
|
5
|
+
Design system built with A11Y in mind.
|
|
6
6
|
**Design system is available live at URL**: https://5f80b6aa3ceb290022dfea61-tultjjrhhk.chromatic.com/?path=/story/getting-started-intro--page
|
|
7
7
|
|
|
8
|
-
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
|
9
|
-
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
|
10
|
-
|
|
11
|
-
- [Installation](#installation)
|
|
12
|
-
- [Usage](#usage)
|
|
13
|
-
- [Global CSS](#global-css)
|
|
14
|
-
- [SSR](#ssr)
|
|
15
|
-
- [Stable IDs](#stable-ids)
|
|
16
|
-
- [Project structure](#project-structure)
|
|
17
|
-
- [Automated visual regression testing](#automated-visual-regression-testing)
|
|
18
|
-
- [How-to](#how-to)
|
|
19
|
-
- [Install PnpM](#install-pnpm)
|
|
20
|
-
- [Setup](#setup)
|
|
21
|
-
- [Under the hood](#under-the-hood)
|
|
22
|
-
- [Deploy](#deploy)
|
|
23
|
-
- [Add a new shared dependency](#add-a-new-shared-dependency)
|
|
24
|
-
- [Add a new local dependency (for one package only)](#add-a-new-local-dependency-for-one-package-only)
|
|
25
|
-
- [Make changes to several packages and test it](#make-changes-to-several-packages-and-test-it)
|
|
26
|
-
- [Run storybook for development](#run-storybook-for-development)
|
|
27
|
-
- [Run linting](#run-linting)
|
|
28
|
-
- [Run unit tests](#run-unit-tests)
|
|
29
|
-
- [Run visual regression tests](#run-visual-regression-tests)
|
|
30
|
-
- [Approve the updated for visual regression test screenshots](#approve-the-updated-for-visual-regression-test-screenshots)
|
|
31
|
-
- [Run all checks at once](#run-all-checks-at-once)
|
|
32
|
-
- [Releasing a new version](#releasing-a-new-version)
|
|
33
|
-
|
|
34
|
-
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
|
|
35
|
-
|
|
36
8
|
## Installation
|
|
37
9
|
|
|
38
10
|
1. `npm i @hazelcast/ui` (`npm i @hazelcast/ui@next` - canary version) - set of Hive UI components
|
package/lib/components/Alert.js
CHANGED
|
@@ -29,7 +29,7 @@ export const Alert = ({ type, title, content, actions, className, dismissableByE
|
|
|
29
29
|
React.createElement("div", { className: styles.rightSide },
|
|
30
30
|
React.createElement("div", { className: styles.header },
|
|
31
31
|
title && (React.createElement("div", { "data-test": "alert-title", className: cn(styles.title, titleClassName) }, title)),
|
|
32
|
-
!!closeToast && React.createElement(IconButton, { "data-test": "alert-close",
|
|
32
|
+
!!closeToast && React.createElement(IconButton, { "data-test": "alert-close", variant: "ghost", ariaLabel: "Close icon", icon: X, onClick: closeToast })),
|
|
33
33
|
React.createElement("div", { "data-test": "alert-body", className: cn(styles.body, bodyClassName) },
|
|
34
34
|
content && React.createElement("div", { "data-test": "alert-content" }, content),
|
|
35
35
|
(actions === null || actions === void 0 ? void 0 : actions.length) ? (React.createElement("div", { "data-test": "alert-actions", className: styles.actions }, actions.map((action, aI) => {
|
|
@@ -42,7 +42,7 @@ export const Alert = ({ type, title, content, actions, className, dismissableByE
|
|
|
42
42
|
iconLeftClassName: styles.actionButtonIcon,
|
|
43
43
|
}
|
|
44
44
|
: {};
|
|
45
|
-
return (React.createElement(Button, { key: aI, variant: "
|
|
45
|
+
return (React.createElement(Button, { key: aI, variant: "ghost", color: "secondary", className: cn(styles.action, styles.actionButton), bodyClassName: styles.actionButtonBody, onClick: onClick, ...iconLeftProps }, text));
|
|
46
46
|
}
|
|
47
47
|
const { text, href, ...props } = action;
|
|
48
48
|
return (React.createElement(Link, { key: aI, href: href, icon: ChevronRight, ariaLabel: "Icon chevron right", className: styles.action, size: "small", ...props }, text));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAC/C,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AACzD,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,MAAM,EAAiC,MAAM,UAAU,CAAA;AAChE,OAAO,EAAE,SAAS,EAAa,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAGzC,OAAO,MAAM,MAAM,qBAAqB,CAAA;AA4BxC,MAAM,mBAAmB,GAAG,CAAC,MAAmB,EAA+B,EAAE,CAAE,MAA4B,CAAC,OAAO,KAAK,SAAS,CAAA;AAcrI,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,IAAI,EACJ,KAAK,EACL,OAAO,EACP,OAAO,EACP,SAAS,EACT,mBAAmB,GAAG,IAAI,EAC1B,UAAU,EACV,cAAc,EACd,aAAa,GACd,EAAE,EAAE;IACH,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,CAAA;IAE3C,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,WAA0B,EAAE,EAAE;QAC7B,IAAI,mBAAmB,EAAE,CAAC;YACxB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;YACd,WAAW,CAAC,wBAAwB,EAAE,CAAA;QACxC,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAClC,CAAA;IAED,MAAM,CAAC,qBAAqB,EAAE,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAA;IAEzG,OAAO,CACL,0CACY,OAAO,EACjB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,KAAK,EACZ;YACE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM;YAC9B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,KAAK,UAAU;SACvC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;QACzF,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;YAC9B,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;gBAC1B,KAAK,IAAI,CACR,0CAAe,aAAa,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,IACrE,KAAK,CACF,CACP;gBACA,CAAC,CAAC,UAAU,IAAI,oBAAC,UAAU,iBAAW,aAAa,EAAC,
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ export const AppHeaderMenu = ({ separator, children }) => {
|
|
|
9
9
|
const [anchorElement, setAnchorElement] = useState();
|
|
10
10
|
const { isOpen, toggle, close } = useOpenCloseState();
|
|
11
11
|
return (React.createElement("div", { className: cn(styles.root, { [styles.separator]: separator }) },
|
|
12
|
-
React.createElement(Button, { variant: "
|
|
12
|
+
React.createElement(Button, { variant: "ghost", color: "secondary", onClick: toggle, iconRight: MenuIcon, ref: setAnchorElement, "data-test": "app-header-menu-toggle", iconRightAriaLabel: "menu icon", className: styles.toggleButton }, "Menu"),
|
|
13
13
|
React.createElement(Popover, { open: isOpen, anchorElement: anchorElement, onClose: close, className: styles.content }, children({ onClose: close }))));
|
|
14
14
|
};
|
|
15
15
|
//# sourceMappingURL=AppHeaderMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeaderMenu.js","sourceRoot":"","sources":["../../../../src/components/AppHeader/AppHeaderMenu/AppHeaderMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAOhD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAsB,EAAE,EAAE;IAC3E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAsB,CAAA;IACxE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAErD,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,CAAC;QAChE,oBAAC,MAAM,IACL,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"AppHeaderMenu.js","sourceRoot":"","sources":["../../../../src/components/AppHeader/AppHeaderMenu/AppHeaderMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAElD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAOhD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAsB,EAAE,EAAE;IAC3E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAsB,CAAA;IACxE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAErD,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,CAAC;QAChE,oBAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,gBAAgB,eACX,wBAAwB,EAClC,kBAAkB,EAAC,WAAW,EAC9B,SAAS,EAAE,MAAM,CAAC,YAAY,WAGvB;QACT,oBAAC,OAAO,IAAC,IAAI,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO,IAC3F,QAAQ,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CACrB,CACN,CACP,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -27,7 +27,7 @@ export const SelectCluster = ({ clusterVersions, clusterName, clusterNames, isRe
|
|
|
27
27
|
})), [clusterVersions, clusterNames]);
|
|
28
28
|
const { status, value } = getSafeValue(clusterName, clusterNames);
|
|
29
29
|
const disabled = isReadOnly || status === 'disabled';
|
|
30
|
-
return (React.createElement(SelectField, { name: "cluster", label: "Select Cluster", showAriaLabel: true,
|
|
30
|
+
return (React.createElement(SelectField, { name: "cluster", label: "Select Cluster", showAriaLabel: true, "data-test": "select-cluster", className: cn(styles.select, { [styles.disabled]: disabled }), classNames: {
|
|
31
31
|
menuPortal: () => styles.menuPortal,
|
|
32
32
|
}, disabled: disabled, iconLeft: CheckCircle, iconLeftAriaLabel: "Select cluster", iconLeftContainerClassName: styles.selectIconLeftContainer, iconLeftClassName: cn(styles.selectIconLeft, {
|
|
33
33
|
[styles.disabled]: status === 'disabled',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectCluster.js","sourceRoot":"","sources":["../../../../src/components/AppHeader/SelectCluster/SelectCluster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,KAAK,EAAE,EAAM,OAAO,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAEhD,MAAM,YAAY,GAAG,CACnB,WAA0B,EAC1B,YAA6B,EAI7B,EAAE;IACF,IAAI,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,CAAA,EAAE,CAAC;QAC1B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA;IACrD,CAAC;IAED,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO;YACL,MAAM,EAAE,cAAc;YACtB,KAAK,EAAE,gBAAgB;SACxB,CAAA;IACH,CAAC;IAED,OAAO;QACL,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc;QACzE,KAAK,EAAE,WAAW;KACnB,CAAA;AACH,CAAC,CAAA;AAUD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5H,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CACH,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAClC,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,YAAY,EACV,eAAe,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACzC,2CAAgB,iBAAiB,IAAE,eAAe,CAAC,IAAI,CAAC,CAAQ,CACjE,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,GAAG,CAChC;KACJ,CAAC,CAAC,EACL,CAAC,eAAe,EAAE,YAAY,CAAC,CAChC,CAAA;IAED,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAA;IACjE,MAAM,QAAQ,GAAG,UAAU,IAAI,MAAM,KAAK,UAAU,CAAA;IAEpD,OAAO,CACL,oBAAC,WAAW,IACV,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,gBAAgB,EACtB,aAAa,
|
|
1
|
+
{"version":3,"file":"SelectCluster.js","sourceRoot":"","sources":["../../../../src/components/AppHeader/SelectCluster/SelectCluster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,KAAK,EAAE,EAAM,OAAO,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAErD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAEhD,MAAM,YAAY,GAAG,CACnB,WAA0B,EAC1B,YAA6B,EAI7B,EAAE;IACF,IAAI,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,CAAA,EAAE,CAAC;QAC1B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA;IACrD,CAAC;IAED,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO;YACL,MAAM,EAAE,cAAc;YACtB,KAAK,EAAE,gBAAgB;SACxB,CAAA;IACH,CAAC;IAED,OAAO;QACL,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc;QACzE,KAAK,EAAE,WAAW;KACnB,CAAA;AACH,CAAC,CAAA;AAUD,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5H,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CACH,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAClC,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,YAAY,EACV,eAAe,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACzC,2CAAgB,iBAAiB,IAAE,eAAe,CAAC,IAAI,CAAC,CAAQ,CACjE,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IAAC,IAAI,EAAC,OAAO,GAAG,CAChC;KACJ,CAAC,CAAC,EACL,CAAC,eAAe,EAAE,YAAY,CAAC,CAChC,CAAA;IAED,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,CAAC,WAAW,EAAE,YAAY,CAAC,CAAA;IACjE,MAAM,QAAQ,GAAG,UAAU,IAAI,MAAM,KAAK,UAAU,CAAA;IAEpD,OAAO,CACL,oBAAC,WAAW,IACV,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,gBAAgB,EACtB,aAAa,qBACH,gBAAgB,EAC1B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,EAC7D,UAAU,EAAE;YACV,UAAU,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU;SACpC,EACD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,WAAW,EACrB,iBAAiB,EAAC,gBAAgB,EAClC,0BAA0B,EAAE,MAAM,CAAC,uBAAuB,EAC1D,iBAAiB,EAAE,EAAE,CAAC,MAAM,CAAC,cAAc,EAAE;YAC3C,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,UAAU;YACxC,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,MAAM,KAAK,cAAc;SACjD,CAAC,EACF,WAAW,EAAE,KAAK,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -15,7 +15,7 @@ export const AppSidebar = ({ children, className, storageKey = 'SideBarMenu', op
|
|
|
15
15
|
const close = useCallback(() => setIsOpen(false), [setIsOpen]);
|
|
16
16
|
const isCollapsed = controlledOpen !== undefined ? !controlledOpen : !isOpen;
|
|
17
17
|
return (React.createElement("aside", { "data-test": dataTest, className: cn(styles.root, { [styles.collapsed]: isCollapsed }, className) },
|
|
18
|
-
React.createElement(IconButton, {
|
|
18
|
+
React.createElement(IconButton, { variant: "ghost", ariaLabel: !isCollapsed ? 'Collapse sidebar' : 'Expand sidebar', icon: !isCollapsed ? ChevronsLeft : ChevronsRight, onClick: toggle, className: styles.toggle }),
|
|
19
19
|
React.createElement(appSidebarContext.Provider, { value: {
|
|
20
20
|
open,
|
|
21
21
|
close,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppSidebar.js","sourceRoot":"","sources":["../../../src/components/AppSidebar/AppSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAG3D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAW7C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,aAAa,EAC1B,IAAI,EAAE,cAAc,EACpB,WAAW,GAAG,IAAI,EAClB,MAAM,EACN,WAAW,EAAE,QAAQ,GACL,EAAE,EAAE;IACpB,MAAM,+BAA+B,GAAG,oBAAoB,CAAU,UAAU,CAAC,CAAA;IACjF,MAAM,0BAA0B,GAAG,oBAAoB,CAAW,kBAAkB,CAAC,CAAA;IAErF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,0BAA0B,CAAC,EAAE,CAAC,CAAA;IAChE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,+BAA+B,CAAC,WAAW,CAAC,CAAA;IAExE,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAC3E,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAC5D,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAC9D,MAAM,WAAW,GAAG,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,MAAM,CAAA;IAE5E,OAAO,CACL,4CAAkB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,EAAE,SAAS,CAAC;QACpG,oBAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"AppSidebar.js","sourceRoot":"","sources":["../../../src/components/AppSidebar/AppSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAG3D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAW7C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,aAAa,EAC1B,IAAI,EAAE,cAAc,EACpB,WAAW,GAAG,IAAI,EAClB,MAAM,EACN,WAAW,EAAE,QAAQ,GACL,EAAE,EAAE;IACpB,MAAM,+BAA+B,GAAG,oBAAoB,CAAU,UAAU,CAAC,CAAA;IACjF,MAAM,0BAA0B,GAAG,oBAAoB,CAAW,kBAAkB,CAAC,CAAA;IAErF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,0BAA0B,CAAC,EAAE,CAAC,CAAA;IAChE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,+BAA+B,CAAC,WAAW,CAAC,CAAA;IAExE,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAC3E,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAC5D,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAC9D,MAAM,WAAW,GAAG,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,MAAM,CAAA;IAE5E,OAAO,CACL,4CAAkB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,EAAE,SAAS,CAAC;QACpG,oBAAC,UAAU,IACT,OAAO,EAAC,OAAO,EACf,SAAS,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,EAC/D,IAAI,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACjD,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,CAAC,MAAM,GACxB;QACF,oBAAC,iBAAiB,CAAC,QAAQ,IACzB,KAAK,EAAE;gBACL,IAAI;gBACJ,KAAK;gBACL,MAAM,EAAE,CAAC,WAAW;gBACpB,MAAM;gBACN,SAAS;gBACT,YAAY;aACb;YAED,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;gBAC5B,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CAC5C;YACL,MAAM,IAAI,gCAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAU,CACnC,CACvB,CACT,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -17,6 +17,6 @@ export const AppSidebarFavoriteButton = ({ id, className }) => {
|
|
|
17
17
|
};
|
|
18
18
|
return (React.createElement(IconButton, { className: cn(styles.root, {
|
|
19
19
|
[styles.isFilled]: isFavoriteItem,
|
|
20
|
-
}, className), onClick: handleToggleFavorite, ariaLabel: "Favorite Item", icon: Star
|
|
20
|
+
}, className), onClick: handleToggleFavorite, ariaLabel: "Favorite Item", icon: Star }));
|
|
21
21
|
};
|
|
22
22
|
//# sourceMappingURL=AppSidebarFavoriteButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppSidebarFavoriteButton.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAExD,OAAO,MAAM,MAAM,wCAAwC,CAAA;AAO3D,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAiC,EAAE,EAAE;IAC3F,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACjE,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAA;IAE5F,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IAAI,cAAc,EAAE,CAAC;YACnB,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAA;QAC9D,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA;QACzC,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,UAAU,IACT,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,IAAI,EACX;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,cAAc;SAClC,EACD,SAAS,CACV,EACD,OAAO,EAAE,oBAAoB,EAC7B,SAAS,EAAC,eAAe,EACzB,IAAI,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"AppSidebarFavoriteButton.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAExD,OAAO,MAAM,MAAM,wCAAwC,CAAA;AAO3D,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAiC,EAAE,EAAE;IAC3F,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACjE,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAA;IAE5F,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IAAI,cAAc,EAAE,CAAC;YACnB,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAA;QAC9D,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA;QACzC,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,UAAU,IACT,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,IAAI,EACX;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,cAAc;SAClC,EACD,SAAS,CACV,EACD,OAAO,EAAE,oBAAoB,EAC7B,SAAS,EAAC,eAAe,EACzB,IAAI,EAAE,IAAI,GACV,CACH,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
2
|
import { Icon as FeatherIcon } from 'react-feather';
|
|
3
3
|
import { DataTestProp } from '../../../helpers/types';
|
|
4
|
-
import { ButtonColor } from '../../Button';
|
|
5
4
|
export type AppSidebarItemProps = {
|
|
6
5
|
id?: string;
|
|
7
6
|
title: string;
|
|
8
7
|
className?: string;
|
|
9
8
|
active?: boolean;
|
|
10
|
-
color?: ButtonColor;
|
|
11
9
|
onClick?: () => void;
|
|
12
10
|
available?: boolean;
|
|
13
11
|
adornment?: ReactNode;
|
|
@@ -25,4 +23,4 @@ export type AppSidebarItemProps = {
|
|
|
25
23
|
icon: FeatherIcon;
|
|
26
24
|
iconAriaLabel: string;
|
|
27
25
|
});
|
|
28
|
-
export declare const AppSidebarItem: ({ id, title, className, active, icon, iconAriaLabel, disabled, disabledTooltip, onClick,
|
|
26
|
+
export declare const AppSidebarItem: ({ id, title, className, active, icon, iconAriaLabel, disabled, disabledTooltip, onClick, adornment, available, adornmentClassName, "data-test": dataTest, }: AppSidebarItemProps) => React.JSX.Element;
|
|
@@ -7,17 +7,18 @@ import { appSidebarContext } from '../appSidebarContext';
|
|
|
7
7
|
import { AppSidebarFavoriteButton } from '../AppSidebarFavoriteButton';
|
|
8
8
|
import { appSidebarSectionContext } from '../AppSidebarSection/appSidebarSectionContext';
|
|
9
9
|
import styles from './AppSidebarItem.module.scss';
|
|
10
|
-
export const AppSidebarItem = ({ id, title, className, active, icon, iconAriaLabel, disabled, disabledTooltip, onClick,
|
|
10
|
+
export const AppSidebarItem = ({ id, title, className, active, icon, iconAriaLabel, disabled, disabledTooltip, onClick, adornment, available, adornmentClassName, 'data-test': dataTest, }) => {
|
|
11
11
|
const { isOpen } = useContext(appSidebarContext);
|
|
12
12
|
const ctx = useContext(appSidebarSectionContext);
|
|
13
|
-
return (React.createElement(Tooltip, { arrow: false,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
React.createElement(
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
adornment,
|
|
21
|
-
|
|
13
|
+
return (React.createElement(Tooltip, { arrow: false, side: "right", align: "start", color: "dark", open: isOpen ? false : undefined, content: iconAriaLabel },
|
|
14
|
+
React.createElement("div", { className: cn(styles.root, { [styles.collapsed]: !isOpen, [styles.nested]: !!ctx }), "data-test": dataTest },
|
|
15
|
+
id && ctx && React.createElement(AppSidebarFavoriteButton, { id: id, className: styles.favorite }),
|
|
16
|
+
React.createElement(Button, { variant: "ghost", color: "secondary", active: active, truncate: false, onClick: onClick, outline: "inset", disabled: disabled, disabledTooltip: disabledTooltip, bodyClassName: styles.content, "data-test": "sidebar-menu-item-title", className: cn(styles.button, { [styles.active]: active }, className) },
|
|
17
|
+
React.createElement(React.Fragment, null,
|
|
18
|
+
icon && React.createElement(Icon, { size: "medium", icon: icon, ariaLabel: iconAriaLabel, className: styles.icon }),
|
|
19
|
+
title,
|
|
20
|
+
(adornment || available !== undefined) && (React.createElement("div", { className: cn(styles.adornment, adornmentClassName) },
|
|
21
|
+
adornment,
|
|
22
|
+
available !== undefined && React.createElement("span", { className: cn(styles.status, { [styles.available]: available }) }))))))));
|
|
22
23
|
};
|
|
23
24
|
//# sourceMappingURL=AppSidebarItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppSidebarItem.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarItem/AppSidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,MAAM,YAAY,CAAA;AAI3B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"AppSidebarItem.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarItem/AppSidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,MAAM,YAAY,CAAA;AAI3B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAA;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+CAA+C,CAAA;AAExF,OAAO,MAAM,MAAM,8BAA8B,CAAA;AAejD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,EAAE,EACF,KAAK,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,aAAa,EACb,QAAQ,EACR,eAAe,EACf,OAAO,EACP,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,WAAW,EAAE,QAAQ,GACD,EAAE,EAAE;IACxB,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAChD,MAAM,GAAG,GAAG,UAAU,CAAC,wBAAwB,CAAC,CAAA;IAEhD,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa;QACrH,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,eAAa,QAAQ;YAC1G,EAAE,IAAI,GAAG,IAAI,oBAAC,wBAAwB,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI;YAC9E,oBAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,WAAW,EACjB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,OAAO,EACf,QAAQ,EAAE,QAAmB,EAC7B,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,MAAM,CAAC,OAAO,eACnB,yBAAyB,EACnC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,SAAS,CAAC;gBAEpE;oBACG,IAAI,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;oBAC5F,KAAK;oBACL,CAAC,SAAS,IAAI,SAAS,KAAK,SAAS,CAAC,IAAI,CACzC,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC;wBACrD,SAAS;wBACT,SAAS,KAAK,SAAS,IAAI,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,CAAC,GAAI,CACjG,CACP,CACA,CACI,CACL,CACE,CACX,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { FocusEvent, ReactNode } from 'react';
|
|
2
2
|
import { FormatOptionLabelMeta } from 'react-select';
|
|
3
3
|
import { HelpProps } from './Help';
|
|
4
|
-
import { SelectFieldSize } from './Select/SelectField';
|
|
5
4
|
import { FieldHeaderProps } from './FieldHeader';
|
|
6
5
|
export type AutocompleteFieldOption = {
|
|
7
6
|
label: string;
|
|
@@ -10,7 +9,6 @@ export type AutocompleteFieldOption = {
|
|
|
10
9
|
export type RenderOptionFunction<O = AutocompleteFieldOption> = (highlightedLabelText: ReactNode, option: O extends AutocompleteFieldOption ? O : never, labelMeta: FormatOptionLabelMeta<AutocompleteFieldOption>) => ReactNode;
|
|
11
10
|
export type AutocompleteFieldProps = {
|
|
12
11
|
'data-test'?: string;
|
|
13
|
-
size?: SelectFieldSize;
|
|
14
12
|
className?: string;
|
|
15
13
|
disabled?: boolean;
|
|
16
14
|
error?: string;
|
|
@@ -31,7 +29,7 @@ export type AutocompleteFieldProps = {
|
|
|
31
29
|
value?: string | null;
|
|
32
30
|
placeholder?: string;
|
|
33
31
|
openMenuOnClick?: boolean;
|
|
34
|
-
} & Omit<FieldHeaderProps, 'id'>;
|
|
32
|
+
} & Omit<FieldHeaderProps, 'id' | 'size'>;
|
|
35
33
|
type GetSelectedOptionFromValueProps = {
|
|
36
34
|
value?: string | null;
|
|
37
35
|
optionsMap: {
|
|
@@ -4,7 +4,7 @@ import { useUID } from 'react-uid';
|
|
|
4
4
|
import cn from 'classnames';
|
|
5
5
|
import { Search, X } from 'react-feather';
|
|
6
6
|
import useIsomorphicLayoutEffect from 'react-use/lib/useIsomorphicLayoutEffect';
|
|
7
|
-
import styles from './AutocompleteField.module.
|
|
7
|
+
import styles from './AutocompleteField.module.css';
|
|
8
8
|
import { Error, errorId } from './Error';
|
|
9
9
|
import { canUseDOM } from '../utils/ssr';
|
|
10
10
|
import { IconButton } from './IconButton';
|
|
@@ -39,7 +39,7 @@ const DropdownIndicator = (props) => {
|
|
|
39
39
|
const ClearIndicator = ({ innerProps }) => {
|
|
40
40
|
// Visually impaired people will use the keyboard (backspace) to remove the value. We do not want to confuse them by allowing to focus this button.
|
|
41
41
|
// @ts-ignore
|
|
42
|
-
return React.createElement(IconButton, { ...innerProps, icon: X, ariaHidden: true,
|
|
42
|
+
return React.createElement(IconButton, { ...innerProps, icon: X, ariaHidden: true, variant: "ghost", size: "small", className: styles.clear, tabIndex: -1 });
|
|
43
43
|
};
|
|
44
44
|
export const highlightOptionText = (labelText, inputValue) => {
|
|
45
45
|
const separator = '<%>';
|
|
@@ -54,7 +54,7 @@ export const highlightOptionText = (labelText, inputValue) => {
|
|
|
54
54
|
}), key: val + `${i}` }, val)))
|
|
55
55
|
: labelText;
|
|
56
56
|
};
|
|
57
|
-
export const AutocompleteField = ({ 'data-test': dataTest = 'autocomplete-field', className, disabled, error, errorClassName, isClearable, label, labelClassName, helperText,
|
|
57
|
+
export const AutocompleteField = ({ 'data-test': dataTest = 'autocomplete-field', className, disabled, error, errorClassName, isClearable, label, labelClassName, helperText, menuPortalTarget = 'body', name, onChange, onFocus, onBlur, onInputChange, options, required, value, placeholder = 'Search...', showAriaLabel = false, renderOption, openMenuOnClick = true, ...rest }) => {
|
|
58
58
|
// when the user clicks on an input with the value, the value should disappear,
|
|
59
59
|
// but then it should appear after the user selects something or blurs the input
|
|
60
60
|
const [isValueHidden, setValueHidden] = useState(false);
|
|
@@ -140,14 +140,13 @@ export const AutocompleteField = ({ 'data-test': dataTest = 'autocomplete-field'
|
|
|
140
140
|
[styles.withError]: 'error' in props,
|
|
141
141
|
[styles.disabled]: disabled,
|
|
142
142
|
[styles.hasError]: error,
|
|
143
|
-
[styles.small]: size === 'small',
|
|
144
143
|
[styles.empty]: !value,
|
|
145
144
|
},
|
|
146
145
|
// Menu container is either this select itself or any other element
|
|
147
146
|
// We can always add this class to the select itself because even if the menu container is any parent it won't break it
|
|
148
147
|
// However, if it is the select itself, it will properly add necessary specificity level to the menu styles.
|
|
149
148
|
styles.menuContainer, className) },
|
|
150
|
-
React.createElement(FieldHeader, { label: label, id: id, size:
|
|
149
|
+
React.createElement(FieldHeader, { label: label, id: id, size: "small", "data-test": dataTest, helperText: helperText, showAriaLabel: showAriaLabel, labelClassName: labelClassName }),
|
|
151
150
|
React.createElement("div", { className: styles.selectBlock },
|
|
152
151
|
React.createElement(ReactSelect, { onInputChange: onInputChange, formatOptionLabel: formatOptionLabelFn, styles: {
|
|
153
152
|
...props.styles,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteField.js","sourceRoot":"","sources":["../../src/components/AutocompleteField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACtF,OAAO,WAAW,EAAE,EAAc,UAAU,EAAmE,MAAM,cAAc,CAAA;AACnI,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,yBAAyB,MAAM,yCAAyC,CAAA;AAC/E,OAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"AutocompleteField.js","sourceRoot":"","sources":["../../src/components/AutocompleteField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
color: var(--hive-color-text-v4);
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
font-family: var(--hive-font-family-text);
|
|
5
|
+
font-size: var(--hive-font-size-body-small);
|
|
6
|
+
font-weight: var(--hive-font-weight-text-regular);
|
|
7
|
+
line-height: normal;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.container .selectBlock {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: row;
|
|
13
|
+
align-items: center;
|
|
14
|
+
position: relative;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.clear.clear {
|
|
18
|
+
--button-size: calc(var(--hive-grid) * 6);
|
|
19
|
+
|
|
20
|
+
margin-left: calc(var(--hive-grid) * 1);
|
|
21
|
+
border-radius: var(--hive-border-radius-pill);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.container :global(.hz-autocomplete-field) {
|
|
25
|
+
flex: 1 1 auto;
|
|
26
|
+
font-size: var(--hive-font-size-body-small);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.container :global(.hz-autocomplete-field__value-container) {
|
|
30
|
+
padding: 0;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.container :global(.hz-autocomplete-field__single-value) {
|
|
34
|
+
color: var(--hive-color-text-v4);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.container :global(.hz-autocomplete-field__placeholder) {
|
|
38
|
+
color: var(--hive-color-text-secondary-v4);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.container :global(.hz-autocomplete-field__indicator-separator) {
|
|
42
|
+
display: none;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.container :global(.hz-autocomplete-field__control) {
|
|
46
|
+
cursor: text;
|
|
47
|
+
color: var(--hive-color-text-v4);
|
|
48
|
+
min-height: calc(var(--hive-grid) * 7.5);
|
|
49
|
+
padding-left: calc(var(--hive-grid) * 3);
|
|
50
|
+
padding-right: calc(var(--hive-grid) * 2);
|
|
51
|
+
box-sizing: border-box;
|
|
52
|
+
border: var(--hive-border-width) solid var(--hive-color-border-v4);
|
|
53
|
+
border-radius: var(--hive-border-radius);
|
|
54
|
+
background-color: var(--hive-color-neutral-white-v4);
|
|
55
|
+
transition: none;
|
|
56
|
+
box-shadow: none;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.container :global(.hz-autocomplete-field__control--menu-is-open) {
|
|
60
|
+
border-radius: var(--hive-border-radius) var(--hive-border-radius) 0 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.container :global(.hz-autocomplete-field__dropdown-indicator) {
|
|
64
|
+
color: var(--hive-color-text-secondary-v4);
|
|
65
|
+
padding: 0 calc(var(--hive-grid) * 0.5);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.container.disabled {
|
|
69
|
+
opacity: 0.5;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.container.disabled :global(.hz-autocomplete-field__control) {
|
|
73
|
+
color: var(--hive-color-text-secondary-v4);
|
|
74
|
+
background-color: var(--hive-color-neutral-white-v4);
|
|
75
|
+
border-color: var(--hive-color-border-v4);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.container.hasError :global(.hz-autocomplete-field__control) {
|
|
79
|
+
border-color: var(--hive-color-error-v4);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.container :global(.hz-autocomplete-field__control):hover,
|
|
83
|
+
.container.hover :global(.hz-autocomplete-field__control) {
|
|
84
|
+
border-color: var(--hive-color-text-v4);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.container.focus :global(.hz-autocomplete-field__control),
|
|
88
|
+
.container :global(.hz-autocomplete-field__control--is-focused) {
|
|
89
|
+
outline: none;
|
|
90
|
+
border-color: var(--hive-color-primary-v4);
|
|
91
|
+
box-shadow: 0 0 0 3px oklch(from var(--hive-color-primary-v4) l c h / 0.5);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.container :global(.hz-autocomplete-field__control--menu-is-open),
|
|
95
|
+
.container :global(.hz-autocomplete-field__control--is-focused.hz-autocomplete-field__control--menu-is-open) {
|
|
96
|
+
border-color: var(--hive-color-border-v4);
|
|
97
|
+
box-shadow: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.container.hasError.focus :global(.hz-autocomplete-field__control),
|
|
101
|
+
.container.hasError :global(.hz-autocomplete-field__control--is-focused) {
|
|
102
|
+
border-color: var(--hive-color-error-v4);
|
|
103
|
+
box-shadow: 0 0 0 3px oklch(from var(--hive-color-error-v4) l c h / 0.4);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.container.hasError :global(.hz-autocomplete-field__control--menu-is-open) {
|
|
107
|
+
border-color: var(--hive-color-error-v4);
|
|
108
|
+
box-shadow: none;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.menuContainer :global(.hz-autocomplete-field__menu-portal) {
|
|
112
|
+
z-index: 2000;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.menuContainer.menuContainer :global(.hz-autocomplete-field__menu) {
|
|
116
|
+
margin-top: 0;
|
|
117
|
+
margin-bottom: calc(var(--hive-grid) * 1);
|
|
118
|
+
border: var(--hive-border-width) solid var(--hive-color-border-v4);
|
|
119
|
+
border-top: none;
|
|
120
|
+
border-radius: 0 0 var(--hive-border-radius) var(--hive-border-radius);
|
|
121
|
+
background-color: var(--hive-color-neutral-white-v4);
|
|
122
|
+
overflow: hidden;
|
|
123
|
+
box-shadow:
|
|
124
|
+
0 4px 12px oklch(0 0 0 / 0.08),
|
|
125
|
+
0 1px 3px oklch(0 0 0 / 0.06);
|
|
126
|
+
z-index: 1000;
|
|
127
|
+
font-family: var(--hive-font-family-text);
|
|
128
|
+
font-size: var(--hive-font-size-body-small);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.menuContainer :global(.hz-autocomplete-field__menu-list) {
|
|
132
|
+
padding: 0;
|
|
133
|
+
color: var(--hive-color-text-v4);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.menuContainer.menuContainer.menuContainer :global(.hz-autocomplete-field__option),
|
|
137
|
+
.menuContainer.menuContainer.menuContainer :global(.hz-autocomplete-field__menu-notice) {
|
|
138
|
+
min-height: calc(var(--hive-grid) * 10);
|
|
139
|
+
line-height: calc(var(--hive-grid) * 10);
|
|
140
|
+
padding: 0 calc(var(--hive-grid) * 3);
|
|
141
|
+
background-color: transparent;
|
|
142
|
+
outline: none;
|
|
143
|
+
text-align: left;
|
|
144
|
+
white-space: pre;
|
|
145
|
+
cursor: pointer;
|
|
146
|
+
color: var(--hive-color-text-v4);
|
|
147
|
+
text-decoration: none;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.menuContainer.menuContainer.menuContainer :global(.hz-autocomplete-field__option--is-focused) {
|
|
151
|
+
background-color: var(--hive-color-surface-hover-v4);
|
|
152
|
+
outline: none;
|
|
153
|
+
box-shadow: none !important;
|
|
154
|
+
text-decoration: none !important;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.menuContainer.menuContainer.menuContainer :global(.hz-autocomplete-field__option--is-selected) {
|
|
158
|
+
background-color: var(--hive-color-surface-active-v4);
|
|
159
|
+
color: var(--hive-color-text-v4);
|
|
160
|
+
font-weight: var(--hive-font-weight-text-medium);
|
|
161
|
+
text-decoration: none !important;
|
|
162
|
+
box-shadow: none !important;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.menuContainer.menuContainer.menuContainer :global(.hz-autocomplete-field__matched-option-text) {
|
|
166
|
+
font-weight: var(--hive-font-weight-text-bold);
|
|
167
|
+
color: var(--hive-color-text-v4);
|
|
168
|
+
text-decoration: none;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.withError {
|
|
172
|
+
position: relative;
|
|
173
|
+
padding-bottom: calc(var(--hive-grid) * 4.75 + var(--hive-grid));
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.withError .errorContainer {
|
|
177
|
+
position: absolute;
|
|
178
|
+
bottom: 0;
|
|
179
|
+
left: 0;
|
|
180
|
+
overflow: hidden;
|
|
181
|
+
height: calc(var(--hive-grid) * 4.75);
|
|
182
|
+
width: 100%;
|
|
183
|
+
}
|
|
@@ -8,11 +8,10 @@ export type BadgeIconDescriptor = {
|
|
|
8
8
|
export declare const BadgeIcon: {
|
|
9
9
|
[key in BadgeType]: BadgeIconDescriptor;
|
|
10
10
|
};
|
|
11
|
-
export type BadgeSize = 'small' | 'normal';
|
|
12
11
|
export type BadgeProps = {
|
|
13
12
|
type: BadgeType;
|
|
14
|
-
size?: BadgeSize;
|
|
15
13
|
content: ReactNode;
|
|
14
|
+
icon?: BadgeIconDescriptor;
|
|
16
15
|
className?: string;
|
|
17
16
|
};
|
|
18
17
|
export declare const Badge: FC<BadgeProps>;
|
package/lib/components/Badge.js
CHANGED
|
@@ -25,20 +25,16 @@ export const BadgeIcon = {
|
|
|
25
25
|
ariaLabel: 'Info critical circle icon',
|
|
26
26
|
},
|
|
27
27
|
};
|
|
28
|
-
export const Badge = ({ type, content,
|
|
29
|
-
const { icon, ariaLabel } = BadgeIcon[type];
|
|
28
|
+
export const Badge = ({ type, content, icon, className }) => {
|
|
29
|
+
const { icon: resolvedIcon, ariaLabel } = icon !== null && icon !== void 0 ? icon : BadgeIcon[type];
|
|
30
30
|
return (React.createElement("div", { "data-test": "badge-container", className: cn(styles.badge, {
|
|
31
|
-
// Colors
|
|
32
31
|
[styles.neutral]: type === 'neutral',
|
|
33
32
|
[styles.success]: type === 'success',
|
|
34
33
|
[styles.info]: type === 'info',
|
|
35
34
|
[styles.warning]: type === 'warning',
|
|
36
35
|
[styles.critical]: type === 'critical',
|
|
37
|
-
// Size
|
|
38
|
-
[styles.normal]: size === 'normal',
|
|
39
|
-
[styles.small]: size === 'small',
|
|
40
36
|
}, className) },
|
|
41
|
-
React.createElement(Icon, { "data-test": "badge-icon", ariaLabel: ariaLabel, icon:
|
|
37
|
+
React.createElement(Icon, { "data-test": "badge-icon", ariaLabel: ariaLabel, icon: resolvedIcon, className: styles.icon, size: "small" }),
|
|
42
38
|
React.createElement("div", { "data-test": "badge-content", className: styles.content }, content)));
|
|
43
39
|
};
|
|
44
40
|
//# sourceMappingURL=Badge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAoB,MAAM,eAAe,CAAA;AAE/F,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,MAAM,MAAM,qBAAqB,CAAA;AASxC,MAAM,CAAC,MAAM,SAAS,GAAgD;IACpE,OAAO,EAAE;QACP,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,mBAAmB;KAC/B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,uBAAuB;KACnC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,2BAA2B;KACvC;CACF,CAAA;
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAoB,MAAM,eAAe,CAAA;AAE/F,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,MAAM,MAAM,qBAAqB,CAAA;AASxC,MAAM,CAAC,MAAM,SAAS,GAAgD;IACpE,OAAO,EAAE;QACP,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,mBAAmB;KAC/B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,uBAAuB;KACnC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,2BAA2B;KACvC;CACF,CAAA;AASD,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;IAC1E,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,SAAS,CAAC,IAAI,CAAC,CAAA;IAEjE,OAAO,CACL,0CACY,iBAAiB,EAC3B,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,KAAK,EACZ;YACE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM;YAC9B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,KAAK,UAAU;SACvC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBAAW,YAAY,EAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,GAAG;QAC9G,0CAAe,eAAe,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IACrD,OAAO,CACJ,CACF,CACP,CAAA;AACH,CAAC,CAAA"}
|