@codacy/ui-components 0.64.15 → 0.64.17
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/lib/Avatar/Avatar.js +25 -19
- package/lib/Avatar/Avatar.types.js +5 -1
- package/lib/Avatar/gravatar.js +17 -13
- package/lib/Avatar/index.js +16 -1
- package/lib/Banner/Banner.js +45 -32
- package/lib/Banner/Banner.styles.d.ts +11 -12
- package/lib/Banner/Banner.styles.js +26 -15
- package/lib/Banner/Banner.types.js +5 -1
- package/lib/Banner/index.js +27 -2
- package/lib/Button/Button.js +54 -51
- package/lib/Button/index.js +27 -2
- package/lib/Button/styles.d.ts +16 -12
- package/lib/Button/styles.js +58 -44
- package/lib/Button/types.js +5 -1
- package/lib/Checkbox/Checkbox.js +63 -54
- package/lib/Checkbox/CheckboxFilterList.js +46 -32
- package/lib/Checkbox/index.js +38 -3
- package/lib/Checkbox/styles.d.ts +25 -22
- package/lib/Checkbox/styles.js +52 -37
- package/lib/Checkbox/types.js +5 -1
- package/lib/CloseButton/index.js +27 -16
- package/lib/Divider/Divider.js +23 -13
- package/lib/Divider/Divider.styles.d.ts +16 -19
- package/lib/Divider/Divider.styles.js +24 -11
- package/lib/Divider/Divider.types.js +5 -1
- package/lib/Divider/index.js +16 -1
- package/lib/Dropdown/Content/DropdownInput.js +20 -8
- package/lib/Dropdown/Content/DropdownItem.js +29 -21
- package/lib/Dropdown/Content/DropdownSeparator.js +19 -7
- package/lib/Dropdown/Content/index.js +38 -3
- package/lib/Dropdown/Dropdown.js +89 -85
- package/lib/Dropdown/Dropdown.styles.d.ts +37 -34
- package/lib/Dropdown/Dropdown.styles.js +62 -43
- package/lib/Dropdown/Dropdown.types.js +5 -1
- package/lib/Dropdown/Triggers/DropdownButtonTrigger.js +30 -20
- package/lib/Dropdown/Triggers/DropdownLinkTrigger.js +29 -19
- package/lib/Dropdown/Triggers/InputTrigger.js +18 -10
- package/lib/Dropdown/Triggers/SelectTrigger.js +19 -12
- package/lib/Dropdown/Triggers/hooks.js +18 -14
- package/lib/Dropdown/Triggers/index.js +60 -5
- package/lib/Dropdown/Triggers/types.js +5 -1
- package/lib/Dropdown/index.js +49 -4
- package/lib/Flexbox/Flexbox.d.ts +31 -17
- package/lib/Flexbox/Flexbox.js +36 -16
- package/lib/Flexbox/index.js +16 -1
- package/lib/Group/Group.js +17 -8
- package/lib/Group/Group.styles.d.ts +8 -10
- package/lib/Group/Group.styles.js +17 -7
- package/lib/Group/Group.types.js +5 -1
- package/lib/Group/index.js +16 -1
- package/lib/Icon/Icon.js +24 -14
- package/lib/Icon/Icon.styles.d.ts +9 -11
- package/lib/Icon/Icon.styles.js +39 -44
- package/lib/Icon/Icon.types.js +5 -1
- package/lib/Icon/index.js +16 -1
- package/lib/IconAndText/IconAndText.js +33 -21
- package/lib/IconAndText/IconAndText.styles.d.ts +8 -10
- package/lib/IconAndText/IconAndText.styles.js +20 -10
- package/lib/IconAndText/IconAndText.types.js +5 -1
- package/lib/IconAndText/index.js +16 -1
- package/lib/Icons/Chevrons.js +53 -41
- package/lib/Icons/CodacyIcon.js +17 -8
- package/lib/Icons/Messages.js +54 -35
- package/lib/Icons/Search.js +16 -7
- package/lib/Icons/Severities.js +117 -106
- package/lib/Icons/Sorting.js +23 -13
- package/lib/Icons/Spinner.js +19 -10
- package/lib/Icons/Symbols.js +73 -58
- package/lib/Icons/index.js +93 -8
- package/lib/Img/Img.js +44 -37
- package/lib/Img/Img.styles.d.ts +12 -11
- package/lib/Img/Img.styles.js +37 -32
- package/lib/Img/Img.types.js +5 -1
- package/lib/Img/index.js +16 -1
- package/lib/InlineMessage/InlineMessage.js +47 -34
- package/lib/InlineMessage/index.js +16 -1
- package/lib/InlineMessage/types.js +5 -1
- package/lib/Input/Input.js +148 -126
- package/lib/Input/hooks.js +149 -178
- package/lib/Input/index.js +27 -2
- package/lib/Input/styles.d.ts +55 -104
- package/lib/Input/styles.js +85 -54
- package/lib/Input/types.js +5 -1
- package/lib/Labeled/Labeled.js +34 -22
- package/lib/Labeled/index.js +16 -1
- package/lib/Labeled/styles.d.ts +16 -12
- package/lib/Labeled/styles.js +27 -11
- package/lib/Labeled/types.js +5 -1
- package/lib/LeftMenu/LeftMenu.js +20 -11
- package/lib/LeftMenu/LeftMenu.styles.d.ts +8 -10
- package/lib/LeftMenu/LeftMenu.styles.js +20 -10
- package/lib/LeftMenu/LeftMenu.types.js +5 -1
- package/lib/LeftMenu/index.js +16 -1
- package/lib/Link/Link.js +43 -33
- package/lib/Link/Link.styles.d.ts +4 -1
- package/lib/Link/Link.styles.js +21 -11
- package/lib/Link/Link.types.js +5 -1
- package/lib/Link/index.js +38 -3
- package/lib/Message/Message.js +32 -24
- package/lib/Message/Message.styles.d.ts +8 -10
- package/lib/Message/Message.styles.js +17 -7
- package/lib/Message/Message.types.js +5 -1
- package/lib/Message/index.js +16 -1
- package/lib/Modal/ConfirmationModal.js +65 -39
- package/lib/Modal/Modal.js +120 -107
- package/lib/Modal/index.js +27 -2
- package/lib/Modal/styles.d.ts +44 -61
- package/lib/Modal/styles.js +97 -85
- package/lib/Modal/types.d.ts +1 -0
- package/lib/Modal/types.js +5 -1
- package/lib/MoreInfo/MoreInfo.js +45 -39
- package/lib/MoreInfo/index.js +16 -1
- package/lib/MoreInfo/types.js +5 -1
- package/lib/Panel/Panel.js +18 -9
- package/lib/Panel/Panel.styles.d.ts +8 -11
- package/lib/Panel/Panel.styles.js +15 -5
- package/lib/Panel/Panel.types.js +5 -1
- package/lib/Panel/index.js +27 -2
- package/lib/PillLabel/PillLabel.js +28 -21
- package/lib/PillLabel/PillLabel.styles.d.ts +8 -10
- package/lib/PillLabel/PillLabel.styles.js +25 -16
- package/lib/PillLabel/PillLabel.types.js +5 -1
- package/lib/PillLabel/index.js +16 -1
- package/lib/Popup/Popup.js +55 -45
- package/lib/Popup/index.js +16 -1
- package/lib/Popup/styles.d.ts +12 -11
- package/lib/Popup/styles.js +21 -8
- package/lib/Popup/types.js +5 -1
- package/lib/ProgressBar/ProgressBar.js +30 -20
- package/lib/ProgressBar/index.js +27 -2
- package/lib/ProgressBar/styles.d.ts +24 -28
- package/lib/ProgressBar/styles.js +30 -14
- package/lib/ProgressBar/types.js +5 -1
- package/lib/Radio/Radio.js +53 -48
- package/lib/Radio/index.js +16 -1
- package/lib/Radio/styles.d.ts +25 -22
- package/lib/Radio/styles.js +49 -30
- package/lib/Radio/types.js +5 -1
- package/lib/ScrollableContent/ScrollableContent.js +35 -24
- package/lib/ScrollableContent/ScrollableContent.styles.d.ts +9 -11
- package/lib/ScrollableContent/ScrollableContent.styles.js +23 -13
- package/lib/ScrollableContent/ScrollableContent.types.js +5 -1
- package/lib/ScrollableContent/index.js +27 -2
- package/lib/ScrollableContent/useScrollContainer.js +29 -24
- package/lib/Select/Select.js +31 -20
- package/lib/Select/index.js +16 -1
- package/lib/Select/types.js +5 -1
- package/lib/Skeleton/Skeleton.js +30 -25
- package/lib/Skeleton/Skeleton.styles.d.ts +8 -10
- package/lib/Skeleton/Skeleton.styles.js +21 -14
- package/lib/Skeleton/Skeleton.types.js +5 -1
- package/lib/Skeleton/index.js +20 -2
- package/lib/Stepper/Stepper.js +49 -40
- package/lib/Stepper/Stepper.styles.d.ts +24 -29
- package/lib/Stepper/Stepper.styles.js +35 -19
- package/lib/Stepper/Stepper.types.js +5 -1
- package/lib/Stepper/index.js +16 -1
- package/lib/Switcher/Switcher.js +32 -23
- package/lib/Switcher/Switcher.styles.d.ts +13 -13
- package/lib/Switcher/Switcher.styles.js +27 -15
- package/lib/Switcher/Switcher.types.js +5 -1
- package/lib/Switcher/index.js +16 -1
- package/lib/Tab/Tab.js +31 -23
- package/lib/Tab/Tab.styles.d.ts +13 -12
- package/lib/Tab/Tab.styles.js +30 -21
- package/lib/Tab/Tab.types.js +5 -1
- package/lib/Tab/index.js +16 -1
- package/lib/Table/NewSelectableTable.js +77 -56
- package/lib/Table/SelectableTable.js +138 -118
- package/lib/Table/Table.js +126 -111
- package/lib/Table/Table.styles.d.ts +32 -16
- package/lib/Table/Table.styles.js +79 -59
- package/lib/Table/Table.types.js +5 -1
- package/lib/Table/index.js +27 -2
- package/lib/TagsInput/TagsInput.js +44 -33
- package/lib/TagsInput/index.js +16 -1
- package/lib/TagsInput/style.d.ts +16 -19
- package/lib/TagsInput/style.js +22 -9
- package/lib/TagsInput/types.js +5 -1
- package/lib/Textarea/Textarea.js +75 -58
- package/lib/Textarea/Textarea.styles.d.ts +28 -22
- package/lib/Textarea/Textarea.styles.js +55 -32
- package/lib/Textarea/Textarea.types.js +5 -1
- package/lib/Textarea/index.js +16 -1
- package/lib/ThemeProvider/ThemeProvider.d.ts +5 -2
- package/lib/ThemeProvider/ThemeProvider.js +48 -30
- package/lib/ThemeProvider/index.js +16 -1
- package/lib/Toast/Toast.js +56 -53
- package/lib/Toast/index.js +16 -1
- package/lib/Toast/styles.d.ts +4 -2
- package/lib/Toast/styles.js +13 -3
- package/lib/Toast/types.js +5 -1
- package/lib/Toggle/Toggle.js +59 -50
- package/lib/Toggle/index.js +16 -1
- package/lib/Toggle/styles.d.ts +21 -14
- package/lib/Toggle/styles.js +51 -34
- package/lib/Toggle/types.js +5 -1
- package/lib/Tooltip/Tooltip.js +100 -102
- package/lib/Tooltip/index.js +16 -1
- package/lib/Tooltip/styles.d.ts +14 -8
- package/lib/Tooltip/styles.js +33 -25
- package/lib/Tooltip/types.js +5 -1
- package/lib/Typography/Typography.js +96 -85
- package/lib/Typography/Typography.styles.d.ts +48 -54
- package/lib/Typography/Typography.styles.js +70 -45
- package/lib/Typography/Typography.types.js +5 -1
- package/lib/Typography/index.js +38 -3
- package/lib/emotion.d.js +3 -0
- package/lib/hooks/index.js +38 -3
- package/lib/hooks/useForwardedRef.js +11 -6
- package/lib/hooks/useInfiniteScroll.js +24 -20
- package/lib/hooks/useStatefulRef.js +18 -14
- package/lib/index.js +489 -44
- package/lib/system-props/color.js +8 -2
- package/lib/system-props/index.js +27 -2
- package/lib/system-props/types.js +5 -1
- package/lib/theme/ColorSchemes/codacy.js +11 -4
- package/lib/theme/ColorSchemes/pulse.js +17 -9
- package/lib/theme/index.js +38 -3
- package/lib/theme/theme.js +42 -69
- package/lib/types.js +5 -1
- package/lib/utils/hash.js +8 -6
- package/lib/utils/reactNodeToText.js +13 -14
- package/package.json +32 -32
|
@@ -1,32 +1,39 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.DropdownItem = void 0;
|
|
9
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
10
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
|
|
11
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _Dropdown = require("../Dropdown.styles");
|
|
13
|
+
var _Dropdown2 = require("../Dropdown");
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
2
15
|
var _excluded = ["children", "onClick", "disabled", "automaticClose", "value", "active"];
|
|
3
|
-
|
|
4
|
-
import { DropdownItemWrapper } from '../Dropdown.styles';
|
|
5
|
-
import { useDropdownContext } from '../Dropdown';
|
|
6
|
-
export var DropdownItem = function DropdownItem(_ref) {
|
|
16
|
+
var DropdownItem = exports.DropdownItem = function DropdownItem(_ref) {
|
|
7
17
|
var children = _ref.children,
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
var
|
|
18
|
-
var handleClick = useCallback(function (event) {
|
|
18
|
+
onClick = _ref.onClick,
|
|
19
|
+
_ref$disabled = _ref.disabled,
|
|
20
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
21
|
+
_ref$automaticClose = _ref.automaticClose,
|
|
22
|
+
automaticClose = _ref$automaticClose === void 0 ? true : _ref$automaticClose,
|
|
23
|
+
value = _ref.value,
|
|
24
|
+
active = _ref.active,
|
|
25
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
26
|
+
var dropdownContext = (0, _Dropdown2.useDropdownContext)();
|
|
27
|
+
var handleClick = (0, _react.useCallback)(function (event) {
|
|
19
28
|
if (event) event.stopPropagation();
|
|
20
|
-
|
|
21
29
|
if (!disabled) {
|
|
22
30
|
if (!!value) dropdownContext.setValue(value);
|
|
23
31
|
if (!!onClick) onClick(value);
|
|
24
32
|
}
|
|
25
|
-
|
|
26
33
|
if (automaticClose) dropdownContext.setOpen(false);
|
|
27
34
|
}, [automaticClose, disabled, dropdownContext, onClick, value]);
|
|
28
35
|
var isActive = active === undefined ? !!value && value === dropdownContext.value : active;
|
|
29
|
-
return /*#__PURE__*/
|
|
36
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownItemWrapper, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
|
|
30
37
|
onClick: handleClick,
|
|
31
38
|
onKeyDown: function onKeyDown(event) {
|
|
32
39
|
if (event.key === 'Enter') handleClick();
|
|
@@ -35,6 +42,7 @@ export var DropdownItem = function DropdownItem(_ref) {
|
|
|
35
42
|
disabled: disabled,
|
|
36
43
|
active: isActive,
|
|
37
44
|
"aria-selected": isActive,
|
|
38
|
-
role: "option"
|
|
39
|
-
|
|
45
|
+
role: "option",
|
|
46
|
+
children: children
|
|
47
|
+
}));
|
|
40
48
|
};
|
|
@@ -1,9 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.DropdownSeparator = void 0;
|
|
8
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
9
|
+
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectDestructuringEmpty"));
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _Dropdown = require("../Dropdown.styles");
|
|
12
|
+
var _Divider = require("../../Divider");
|
|
13
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
|
+
var DropdownSeparator = exports.DropdownSeparator = function DropdownSeparator(_ref) {
|
|
15
|
+
var props = Object.assign({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
|
|
16
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownSeparatorWrapper, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
|
|
17
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.Divider, {
|
|
18
|
+
my: 2
|
|
19
|
+
})
|
|
8
20
|
}));
|
|
9
21
|
};
|
|
@@ -1,3 +1,38 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _DropdownItem = require("./DropdownItem");
|
|
7
|
+
Object.keys(_DropdownItem).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _DropdownItem[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function get() {
|
|
13
|
+
return _DropdownItem[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
var _DropdownSeparator = require("./DropdownSeparator");
|
|
18
|
+
Object.keys(_DropdownSeparator).forEach(function (key) {
|
|
19
|
+
if (key === "default" || key === "__esModule") return;
|
|
20
|
+
if (key in exports && exports[key] === _DropdownSeparator[key]) return;
|
|
21
|
+
Object.defineProperty(exports, key, {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function get() {
|
|
24
|
+
return _DropdownSeparator[key];
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
var _DropdownInput = require("./DropdownInput");
|
|
29
|
+
Object.keys(_DropdownInput).forEach(function (key) {
|
|
30
|
+
if (key === "default" || key === "__esModule") return;
|
|
31
|
+
if (key in exports && exports[key] === _DropdownInput[key]) return;
|
|
32
|
+
Object.defineProperty(exports, key, {
|
|
33
|
+
enumerable: true,
|
|
34
|
+
get: function get() {
|
|
35
|
+
return _DropdownInput[key];
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
});
|
package/lib/Dropdown/Dropdown.js
CHANGED
|
@@ -1,91 +1,94 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.useDropdownContext = exports.DropdownContext = exports.Dropdown = void 0;
|
|
9
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
10
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
11
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
|
|
12
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
+
var _Dropdown = require("./Dropdown.styles");
|
|
14
|
+
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
15
|
+
var _reactPopper = require("react-popper");
|
|
16
|
+
var _react2 = require("@emotion/react");
|
|
17
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
4
18
|
var _excluded = ["trigger", "disabled", "placement", "size", "initialValue", "portal", "children", "onOpen", "onClose", "onChange"];
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
import ReactDOM from 'react-dom';
|
|
8
|
-
import { usePopper } from 'react-popper';
|
|
9
|
-
import { useTheme } from 'emotion-theming';
|
|
10
|
-
export var DropdownContext = React.createContext(null);
|
|
19
|
+
var DropdownContext = exports.DropdownContext = /*#__PURE__*/_react["default"].createContext(null);
|
|
20
|
+
|
|
11
21
|
/**
|
|
12
22
|
* Base structure for dropdowns, dropdown buttons or menus, selects, etc.
|
|
13
23
|
*/
|
|
14
|
-
|
|
15
|
-
export var Dropdown = function Dropdown(_ref) {
|
|
24
|
+
var Dropdown = exports.Dropdown = function Dropdown(_ref) {
|
|
16
25
|
var trigger = _ref.trigger,
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
var
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
name: 'flip',
|
|
64
|
-
enabled: true
|
|
65
|
-
}]
|
|
66
|
-
}),
|
|
67
|
-
styles = _usePopper.styles,
|
|
68
|
-
attributes = _usePopper.attributes;
|
|
69
|
-
|
|
26
|
+
disabled = _ref.disabled,
|
|
27
|
+
_ref$placement = _ref.placement,
|
|
28
|
+
placement = _ref$placement === void 0 ? 'left' : _ref$placement,
|
|
29
|
+
_ref$size = _ref.size,
|
|
30
|
+
size = _ref$size === void 0 ? 'md' : _ref$size,
|
|
31
|
+
initialValue = _ref.initialValue,
|
|
32
|
+
_ref$portal = _ref.portal,
|
|
33
|
+
portal = _ref$portal === void 0 ? false : _ref$portal,
|
|
34
|
+
children = _ref.children,
|
|
35
|
+
onOpen = _ref.onOpen,
|
|
36
|
+
onClose = _ref.onClose,
|
|
37
|
+
onChange = _ref.onChange,
|
|
38
|
+
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
39
|
+
var _useState = (0, _react.useState)(initialValue || null),
|
|
40
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
41
|
+
value = _useState2[0],
|
|
42
|
+
setValue = _useState2[1];
|
|
43
|
+
var _useState3 = (0, _react.useState)(false),
|
|
44
|
+
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
|
|
45
|
+
open = _useState4[0],
|
|
46
|
+
setOpen = _useState4[1];
|
|
47
|
+
var _useState5 = (0, _react.useState)(),
|
|
48
|
+
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
49
|
+
triggerRef = _useState6[0],
|
|
50
|
+
setTriggerRef = _useState6[1];
|
|
51
|
+
var _useState7 = (0, _react.useState)(),
|
|
52
|
+
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
|
53
|
+
panelRef = _useState8[0],
|
|
54
|
+
setPanelRef = _useState8[1];
|
|
55
|
+
var parentDropdownCtx = (0, _react.useContext)(DropdownContext);
|
|
56
|
+
var theme = (0, _react2.useTheme)();
|
|
57
|
+
var _usePopper = (0, _reactPopper.usePopper)(triggerRef, panelRef, {
|
|
58
|
+
placement: placement === 'left' ? 'bottom-start' : 'bottom-end',
|
|
59
|
+
modifiers: [{
|
|
60
|
+
name: 'offset',
|
|
61
|
+
enabled: true,
|
|
62
|
+
options: {
|
|
63
|
+
offset: [0, 8]
|
|
64
|
+
}
|
|
65
|
+
}, {
|
|
66
|
+
name: 'flip',
|
|
67
|
+
enabled: true
|
|
68
|
+
}]
|
|
69
|
+
}),
|
|
70
|
+
styles = _usePopper.styles,
|
|
71
|
+
attributes = _usePopper.attributes;
|
|
70
72
|
var level = ((parentDropdownCtx === null || parentDropdownCtx === void 0 ? void 0 : parentDropdownCtx.level) || 0) + 1;
|
|
71
|
-
useEffect(function () {
|
|
73
|
+
(0, _react.useEffect)(function () {
|
|
72
74
|
if (open && onOpen) onOpen();
|
|
73
75
|
if (!open && onClose) onClose();
|
|
74
76
|
}, [open, onOpen, onClose]);
|
|
75
|
-
useEffect(function () {
|
|
77
|
+
(0, _react.useEffect)(function () {
|
|
76
78
|
if (onChange) onChange(value);
|
|
77
79
|
}, [value, onChange]);
|
|
78
|
-
var content = /*#__PURE__*/
|
|
80
|
+
var content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownPanel, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
79
81
|
ref: setPanelRef,
|
|
80
|
-
style:
|
|
82
|
+
style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, styles.popper), {}, {
|
|
81
83
|
visibility: open ? 'visible' : 'hidden',
|
|
82
84
|
zIndex: level + theme.zIndices['dropdown']
|
|
83
85
|
})
|
|
84
|
-
}, attributes.popper, {
|
|
85
|
-
size: size
|
|
86
|
-
|
|
86
|
+
}, attributes.popper), {}, {
|
|
87
|
+
size: size,
|
|
88
|
+
children: children
|
|
89
|
+
}));
|
|
87
90
|
var containerElement = portal && document.querySelector(portal === true ? 'body' : portal);
|
|
88
|
-
return /*#__PURE__*/
|
|
91
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownContext.Provider, {
|
|
89
92
|
value: {
|
|
90
93
|
open: open,
|
|
91
94
|
setOpen: setOpen,
|
|
@@ -95,22 +98,23 @@ export var Dropdown = function Dropdown(_ref) {
|
|
|
95
98
|
triggerRef: triggerRef,
|
|
96
99
|
panelRef: panelRef,
|
|
97
100
|
level: level
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
101
|
+
},
|
|
102
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.DropdownWrapper, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
|
|
103
|
+
open: open
|
|
104
|
+
}, props), {}, {
|
|
105
|
+
children: [/*#__PURE__*/_react["default"].cloneElement(trigger, {
|
|
106
|
+
ref: setTriggerRef,
|
|
107
|
+
open: open,
|
|
108
|
+
'aria-haspopup': 'true',
|
|
109
|
+
'aria-expanded': open.toString()
|
|
110
|
+
}), open && (containerElement ? /*#__PURE__*/_reactDom["default"].createPortal(content, containerElement) : content)]
|
|
111
|
+
}))
|
|
112
|
+
});
|
|
107
113
|
};
|
|
108
|
-
|
|
109
|
-
var dropdownContext = useContext(DropdownContext);
|
|
110
|
-
|
|
114
|
+
var useDropdownContext = exports.useDropdownContext = function useDropdownContext() {
|
|
115
|
+
var dropdownContext = (0, _react.useContext)(DropdownContext);
|
|
111
116
|
if (dropdownContext === null) {
|
|
112
117
|
throw new Error("You are using DropdownContext outside it's provider.");
|
|
113
118
|
}
|
|
114
|
-
|
|
115
119
|
return dropdownContext;
|
|
116
120
|
};
|
|
@@ -1,42 +1,45 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { CodacyTheme } from '../theme';
|
|
3
|
-
import { BoxProps } from '../Flexbox';
|
|
4
3
|
import { DropdownProps, DropdownItemProps } from './Dropdown.types';
|
|
5
|
-
export declare const DropdownWrapper: import("@emotion/styled
|
|
4
|
+
export declare const DropdownWrapper: import("@emotion/styled").StyledComponent<{
|
|
5
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
6
|
+
as?: import("react").ElementType<any> | undefined;
|
|
7
|
+
} & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("../Flexbox").As & {
|
|
6
8
|
fontWeight?: import("styled-system").ResponsiveValue<number | import("../theme").FontWeights, CodacyTheme> | undefined;
|
|
7
|
-
}
|
|
8
|
-
theme?:
|
|
9
|
-
}
|
|
10
|
-
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
11
|
-
} & Pick<BoxProps, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps | keyof import("..").FlexboxProps | keyof import("..").GridboxProps> & {
|
|
12
|
-
theme?: object | undefined;
|
|
13
|
-
}, {
|
|
9
|
+
} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
|
|
10
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
11
|
+
} & import("..").FlexboxProps & import("..").GridboxProps & {
|
|
14
12
|
open: boolean;
|
|
15
|
-
},
|
|
16
|
-
export declare const DropdownPanel: import("@emotion/styled
|
|
17
|
-
theme?:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
13
|
+
}, {}, {}>;
|
|
14
|
+
export declare const DropdownPanel: import("@emotion/styled").StyledComponent<{
|
|
15
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
16
|
+
as?: import("react").ElementType<any> | undefined;
|
|
17
|
+
} & import("react").HTMLAttributes<HTMLDivElement> & import("react").ClassAttributes<HTMLDivElement> & {
|
|
18
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
19
|
+
} & Pick<DropdownProps, "size">, {}, {}>;
|
|
20
|
+
export declare const DropdownItemWrapper: import("@emotion/styled").StyledComponent<{
|
|
21
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
22
|
+
as?: import("react").ElementType<any> | undefined;
|
|
23
|
+
} & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("../Flexbox").As & {
|
|
22
24
|
fontWeight?: import("styled-system").ResponsiveValue<number | import("../theme").FontWeights, CodacyTheme> | undefined;
|
|
23
|
-
}
|
|
24
|
-
theme?:
|
|
25
|
-
}
|
|
26
|
-
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
27
|
-
} & Pick<BoxProps, "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "as" | keyof import("..").ColorProps | keyof import("..").LayoutProps | keyof import("..").SpaceProps | keyof import("..").BorderProps | keyof import("..").PositionProps | keyof import("..").ShadowProps | keyof import("..").FlexboxProps | keyof import("..").GridboxProps> & {
|
|
28
|
-
theme?: object | undefined;
|
|
29
|
-
}, Pick<DropdownItemProps, "disabled"> & {
|
|
25
|
+
} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
|
|
26
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
27
|
+
} & import("..").FlexboxProps & import("..").GridboxProps & Pick<DropdownItemProps, "disabled"> & {
|
|
30
28
|
active: boolean;
|
|
31
|
-
},
|
|
32
|
-
export declare const DropdownFooter: import("@emotion/styled
|
|
29
|
+
}, {}, {}>;
|
|
30
|
+
export declare const DropdownFooter: import("@emotion/styled").StyledComponent<{
|
|
31
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
32
|
+
as?: import("react").ElementType<any> | undefined;
|
|
33
|
+
} & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("../Flexbox").As & {
|
|
33
34
|
fontWeight?: import("styled-system").ResponsiveValue<number | import("../theme").FontWeights, CodacyTheme> | undefined;
|
|
34
|
-
}
|
|
35
|
-
theme?:
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
export declare const
|
|
42
|
-
|
|
35
|
+
} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
|
|
36
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
37
|
+
} & import("..").FlexboxProps & import("..").GridboxProps, {}, {}>;
|
|
38
|
+
export declare const DropdownSeparatorWrapper: import("@emotion/styled").StyledComponent<{
|
|
39
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
40
|
+
as?: import("react").ElementType<any> | undefined;
|
|
41
|
+
} & Record<string, unknown>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
42
|
+
export declare const DropdownInputWrapper: import("@emotion/styled").StyledComponent<{
|
|
43
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
44
|
+
as?: import("react").ElementType<any> | undefined;
|
|
45
|
+
} & Record<string, unknown>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|