@synerise/ds-dropdown 0.18.31 → 0.19.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.19.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-dropdown@0.19.0...@synerise/ds-dropdown@0.19.1) (2025-02-07)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-dropdown
9
+
10
+
11
+
12
+
13
+
14
+ # [0.19.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-dropdown@0.18.31...@synerise/ds-dropdown@0.19.0) (2025-01-29)
15
+
16
+
17
+ ### Features
18
+
19
+ * antd@4.24 react@18 ([d97a667](https://github.com/synerise/synerise-design/commit/d97a667b1f33aed3177e1851de3b6f60be2d46a6))
20
+
21
+
22
+
23
+
24
+
6
25
  ## [0.18.31](https://github.com/synerise/synerise-design/compare/@synerise/ds-dropdown@0.18.30...@synerise/ds-dropdown@0.18.31) (2025-01-21)
7
26
 
8
27
  **Note:** Version bump only for package @synerise/ds-dropdown
package/README.md CHANGED
@@ -13,17 +13,18 @@ Dropdown UI Component
13
13
 
14
14
  ### Dropdown
15
15
 
16
- | Property | Description | Type | Default |
17
- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | --------------------- |
18
- | disabled | Whether the dropdown menu is disabled | boolean | - |
19
- | getPopupContainer | Function used to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. | Function(triggerNode) | `() => document.body` |
20
- | overlay | Dropdown menu | [Menu](/docs/components/menu) \ () => Menu | - |
21
- | overlayClassName | Class name of the dropdown root element | string | - |
22
- | overlayStyle | Style of the dropdown root element | object | - |
23
- | placement | Placement of pop menu. | `bottomLeft` / `bottomCenter` / `bottomRight` / `topLeft` / `topCenter` / `topRight` / `bottomLeft` | - |
24
- | trigger | Trigger mode which executes the drop-down action (hover doesn't work on mobile device) | `['hover', 'click', 'contextMenu']` | `['hover']` |
25
- | visible | Whether the dropdown menu is visible | boolean | - |
26
- | onVisibleChange | A callback executed on visibility changes. | (visible: boolean)=>void | - |
16
+ | Property | Description | Type | Default |
17
+ |-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------|-----------------------|
18
+ | disabled | Whether the dropdown menu is disabled | boolean | - |
19
+ | getPopupContainer | Function used to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. | Function(triggerNode) | `() => document.body` |
20
+ | overlay | Dropdown menu | [Menu](/docs/components/menu) \ () => Menu | - |
21
+ | overlayClassName | Class name of the dropdown root element | string | - |
22
+ | overlayStyle | Style of the dropdown root element | object | - |
23
+ | placement | Placement of pop menu. | `bottomLeft` / `bottomCenter` / `bottomRight` / `topLeft` / `topCenter` / `topRight` / `bottomLeft` | - |
24
+ | trigger | Trigger mode which executes the drop-down action (hover doesn't work on mobile device) | `['hover', 'click', 'contextMenu']` | `['hover']` |
25
+ | visible | Whether the dropdown menu is visible | boolean | - |
26
+ | onVisibleChange | A callback executed on visibility changes. | (visible: boolean)=>void | - |
27
+ | hideOnItemClick | Will hide dropdown on click of an item inside the dropdown changes. Provide a CSS selector of element that should trigger dropdown closing or `true` to use `[role="menuitem"]` selector | boolean / string | - |
27
28
 
28
29
  ### Dropdown.SearchInput
29
30
 
@@ -1,7 +1,7 @@
1
- import React from 'react';
1
+ import { ComponentType } from 'react';
2
2
  import '@synerise/ds-core/dist/js/style';
3
3
  import './style/index.less';
4
- import AntdDropdown, { DropDownProps as AntDropDownProps } from 'antd/lib/dropdown';
4
+ import { DropDownProps as AntDropDownProps, DropdownButtonProps } from 'antd/lib/dropdown';
5
5
  import SearchBar from '@synerise/ds-search-bar/';
6
6
  import BottomAction from './elements/BottomAction/BottomAction';
7
7
  import BackAction from './elements/BackAction/BackAction';
@@ -9,14 +9,16 @@ import { Wrapper } from './Dropdown.styles';
9
9
  import TextTrigger from './elements/TextTrigger/TextTrigger';
10
10
  export type DropdownProps = AntDropDownProps & {
11
11
  destroyPopupOnHide?: boolean;
12
+ hideOnItemClick?: string | boolean;
12
13
  };
13
- declare class Dropdown extends React.Component<DropdownProps> {
14
- static Wrapper: typeof Wrapper;
15
- static SearchInput: typeof SearchBar;
16
- static BottomAction: typeof BottomAction;
17
- static BackAction: typeof BackAction;
18
- static Button: typeof AntdDropdown.Button;
19
- static TextTrigger: typeof TextTrigger;
20
- render(): React.ReactNode;
21
- }
14
+ type DropdownButtonType = ComponentType<DropdownButtonProps>;
15
+ type SubComponents = {
16
+ Wrapper: typeof Wrapper;
17
+ SearchInput: typeof SearchBar;
18
+ BottomAction: typeof BottomAction;
19
+ BackAction: typeof BackAction;
20
+ Button: DropdownButtonType;
21
+ TextTrigger: typeof TextTrigger;
22
+ };
23
+ declare const Dropdown: ComponentType<DropdownProps> & SubComponents;
22
24
  export default Dropdown;
package/dist/Dropdown.js CHANGED
@@ -1,10 +1,7 @@
1
+ var _excluded = ["hideOnItemClick", "placement", "dropdownRender", "visible", "open", "onVisibleChange", "onOpenChange", "overlay"];
1
2
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
- function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
3
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
4
- function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
- function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
6
- function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
7
- import React from 'react';
3
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
4
+ import React, { useState, useRef, useCallback, useEffect } from 'react';
8
5
  import '@synerise/ds-core/dist/js/style';
9
6
  import "./style/index.css";
10
7
  import AntdDropdown from 'antd/lib/dropdown';
@@ -12,34 +9,78 @@ import SearchBar from '@synerise/ds-search-bar/';
12
9
  import { getPopupContainer } from '@synerise/ds-utils';
13
10
  import BottomAction from './elements/BottomAction/BottomAction';
14
11
  import BackAction from './elements/BackAction/BackAction';
15
- import { Wrapper } from './Dropdown.styles';
12
+ import { Wrapper, OverlayWrapper } from './Dropdown.styles';
16
13
  import TextTrigger from './elements/TextTrigger/TextTrigger';
17
14
  var topPlacements = ['topLeft', 'topRight', 'topCenter'];
18
- var Dropdown = /*#__PURE__*/function (_React$Component) {
19
- function Dropdown() {
20
- return _React$Component.apply(this, arguments) || this;
21
- }
22
- _inheritsLoose(Dropdown, _React$Component);
23
- var _proto = Dropdown.prototype;
24
- _proto.render = function render() {
25
- var placement = this.props.placement;
26
- var offsetVertical = topPlacements.find(function (topPlacement) {
27
- return topPlacement === placement;
28
- }) !== undefined ? -8 : 8;
29
- return /*#__PURE__*/React.createElement(AntdDropdown, _extends({
30
- getPopupContainer: getPopupContainer,
31
- align: {
32
- offset: [0, offsetVertical]
33
- },
34
- trigger: ['click']
35
- }, this.props));
15
+ var Dropdown = function Dropdown(_ref) {
16
+ var hideOnItemClick = _ref.hideOnItemClick,
17
+ placement = _ref.placement,
18
+ dropdownRender = _ref.dropdownRender,
19
+ visible = _ref.visible,
20
+ open = _ref.open,
21
+ onVisibleChange = _ref.onVisibleChange,
22
+ onOpenChange = _ref.onOpenChange,
23
+ overlay = _ref.overlay,
24
+ rest = _objectWithoutPropertiesLoose(_ref, _excluded);
25
+ var openMerged = open !== undefined ? open : visible;
26
+ var onOpenChangeMerged = onOpenChange !== undefined ? onOpenChange : onVisibleChange;
27
+ var _useState = useState(openMerged || false),
28
+ isOpen = _useState[0],
29
+ setIsOpen = _useState[1];
30
+ var overlayWrapperRef = useRef(null);
31
+ useEffect(function () {
32
+ openMerged !== undefined && setIsOpen(openMerged);
33
+ }, [openMerged]);
34
+ var handleOpenChange = function handleOpenChange(newIsOpen) {
35
+ onOpenChangeMerged && onOpenChangeMerged(newIsOpen);
36
+ setIsOpen(newIsOpen);
36
37
  };
37
- return Dropdown;
38
- }(React.Component);
39
- _defineProperty(Dropdown, "Wrapper", Wrapper);
40
- _defineProperty(Dropdown, "SearchInput", SearchBar);
41
- _defineProperty(Dropdown, "BottomAction", BottomAction);
42
- _defineProperty(Dropdown, "BackAction", BackAction);
43
- _defineProperty(Dropdown, "Button", AntdDropdown.Button);
44
- _defineProperty(Dropdown, "TextTrigger", TextTrigger);
38
+ var offsetVertical = topPlacements.find(function (topPlacement) {
39
+ return topPlacement === placement;
40
+ }) !== undefined ? -8 : 8;
41
+ var renderContent = useCallback(function (originNode) {
42
+ if (overlay) {
43
+ return typeof overlay === 'function' ? overlay() : overlay;
44
+ }
45
+ return dropdownRender && dropdownRender(originNode);
46
+ }, [dropdownRender, overlay]);
47
+ var renderOverlay = useCallback(function (originNode) {
48
+ return /*#__PURE__*/React.createElement(OverlayWrapper, {
49
+ ref: overlayWrapperRef
50
+ }, renderContent(originNode));
51
+ }, [renderContent]);
52
+ useEffect(function () {
53
+ var handleOverlayClick = function handleOverlayClick(event) {
54
+ if (overlayWrapperRef.current && hideOnItemClick && event.target instanceof HTMLElement) {
55
+ var itemSelector = typeof hideOnItemClick === 'string' ? hideOnItemClick : '[role="menuitem"]';
56
+ var listItem = event.target.closest(itemSelector);
57
+ if (overlayWrapperRef.current.contains(listItem)) {
58
+ setIsOpen(false);
59
+ }
60
+ }
61
+ };
62
+ var overlayNode = overlayWrapperRef.current;
63
+ overlayNode && overlayNode.addEventListener('click', handleOverlayClick);
64
+ return function () {
65
+ overlayNode && overlayNode.removeEventListener('click', handleOverlayClick);
66
+ };
67
+ });
68
+ return /*#__PURE__*/React.createElement(AntdDropdown, _extends({
69
+ getPopupContainer: getPopupContainer,
70
+ align: {
71
+ offset: [0, offsetVertical]
72
+ },
73
+ trigger: ['click'],
74
+ open: isOpen,
75
+ onOpenChange: handleOpenChange,
76
+ dropdownRender: renderOverlay,
77
+ placement: placement
78
+ }, rest));
79
+ };
80
+ Dropdown.Wrapper = Wrapper;
81
+ Dropdown.SearchInput = SearchBar;
82
+ Dropdown.BottomAction = BottomAction;
83
+ Dropdown.BackAction = BackAction;
84
+ Dropdown.Button = AntdDropdown.Button;
85
+ Dropdown.TextTrigger = TextTrigger;
45
86
  export default Dropdown;
@@ -1 +1,2 @@
1
1
  export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const OverlayWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -4,4 +4,8 @@ import styled from 'styled-components';
4
4
  export var Wrapper = styled.div.withConfig({
5
5
  displayName: "Dropdownstyles__Wrapper",
6
6
  componentId: "sc-1onktq5-0"
7
- })(["background:#fff;width:200px;"]);
7
+ })(["background:#fff;width:200px;"]);
8
+ export var OverlayWrapper = styled.div.withConfig({
9
+ displayName: "Dropdownstyles__OverlayWrapper",
10
+ componentId: "sc-1onktq5-1"
11
+ })([""]);
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { Props } from './BottomAction.types';
3
- declare const BottomAction: React.FC<Props>;
3
+ declare const BottomAction: ({ onClickAction, children, style, icon, ...rest }: Props) => React.JSX.Element;
4
4
  export default BottomAction;
@@ -1,6 +1,7 @@
1
- import React from 'react';
1
+ import type { CSSProperties, ReactElement, ReactNode } from 'react';
2
2
  export interface Props {
3
3
  onClickAction: () => void;
4
- icon?: React.ReactElement;
5
- style?: React.CSSProperties;
4
+ icon?: ReactElement;
5
+ children?: ReactNode;
6
+ style?: CSSProperties;
6
7
  }
@@ -0,0 +1 @@
1
+ import '@testing-library/jest-dom';
@@ -1 +1 @@
1
- .ant-image-preview,.ant-modal{pointer-events:none}.ant-image-preview.zoom-appear,.ant-image-preview.zoom-enter,.ant-modal.zoom-appear,.ant-modal.zoom-enter{transform:none;opacity:0;animation-duration:.3s;user-select:none}.ant-image-preview-mask,.ant-modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:991000;height:100%;background-color:rgba(0,0,0,.2);filter:alpha(opacity=50)}.ant-image-preview-mask-hidden,.ant-modal-mask-hidden{display:none}.ant-image-preview-wrap,.ant-modal-wrap{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;outline:0;-webkit-overflow-scrolling:touch}.ant-dropdown-menu-item.ant-dropdown-menu-item-danger{color:#f52922}.ant-dropdown-menu-item.ant-dropdown-menu-item-danger:hover{color:#fff;background-color:#f52922}.ant-dropdown{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:absolute;top:-9999px;left:-9999px;z-index:991050;display:block}.ant-dropdown::before{position:absolute;top:-7px;right:0;bottom:-7px;left:-7px;z-index:-9999;opacity:.0001;content:' '}.ant-dropdown-wrap{position:relative}.ant-dropdown-wrap .ant-btn>.anticon-down{display:inline-block;font-size:10px}.ant-dropdown-wrap .anticon-down::before{transition:transform .2s}.ant-dropdown-wrap-open .anticon-down::before{transform:rotate(180deg)}.ant-dropdown-hidden,.ant-dropdown-menu-hidden{display:none}.ant-dropdown-show-arrow.ant-dropdown-placement-topCenter,.ant-dropdown-show-arrow.ant-dropdown-placement-topLeft,.ant-dropdown-show-arrow.ant-dropdown-placement-topRight{padding-bottom:10px}.ant-dropdown-show-arrow.ant-dropdown-placement-bottomCenter,.ant-dropdown-show-arrow.ant-dropdown-placement-bottomLeft,.ant-dropdown-show-arrow.ant-dropdown-placement-bottomRight{padding-top:10px}.ant-dropdown-arrow{position:absolute;z-index:1;display:block;width:8.49px;height:8.49px;background:0 0;border-style:solid;border-width:4.24px;transform:rotate(45deg)}.ant-dropdown-placement-topCenter>.ant-dropdown-arrow,.ant-dropdown-placement-topLeft>.ant-dropdown-arrow,.ant-dropdown-placement-topRight>.ant-dropdown-arrow{bottom:6.2px;border-top-color:transparent;border-right-color:#fff;border-bottom-color:#fff;border-left-color:transparent;box-shadow:3px 3px 7px rgba(0,0,0,.07)}.ant-dropdown-placement-topCenter>.ant-dropdown-arrow{left:50%;transform:translateX(-50%) rotate(45deg)}.ant-dropdown-placement-topLeft>.ant-dropdown-arrow{left:16px}.ant-dropdown-placement-topRight>.ant-dropdown-arrow{right:16px}.ant-dropdown-placement-bottomCenter>.ant-dropdown-arrow,.ant-dropdown-placement-bottomLeft>.ant-dropdown-arrow,.ant-dropdown-placement-bottomRight>.ant-dropdown-arrow{top:6px;border-top-color:#fff;border-right-color:transparent;border-bottom-color:transparent;border-left-color:#fff;box-shadow:-2px -2px 5px rgba(0,0,0,.06)}.ant-dropdown-placement-bottomCenter>.ant-dropdown-arrow{left:50%;transform:translateX(-50%) rotate(45deg)}.ant-dropdown-placement-bottomLeft>.ant-dropdown-arrow{left:16px}.ant-dropdown-placement-bottomRight>.ant-dropdown-arrow{right:16px}.ant-dropdown-menu{position:relative;margin:0;padding:4px 0;text-align:left;list-style-type:none;background-color:#fff;background-clip:padding-box;border-radius:3px;outline:0;box-shadow:0 2px 6px rgba(171,178,183,.12)}.ant-dropdown-menu-item-group-title{padding:5px 16px;color:#232936;transition:all .3s}.ant-dropdown-menu-submenu-popup{position:absolute;z-index:991050;background:0 0;box-shadow:none}.ant-dropdown-menu-submenu-popup>.ant-dropdown-menu{transform-origin:0 0}.ant-dropdown-menu-submenu-popup li,.ant-dropdown-menu-submenu-popup ul{list-style:none}.ant-dropdown-menu-submenu-popup ul{margin-right:.3em;margin-left:.3em}.ant-dropdown-menu-item,.ant-dropdown-menu-submenu-title{clear:both;margin:0;padding:5px 16px;color:#6a7580;font-weight:400;font-size:13px;line-height:22px;white-space:nowrap;cursor:pointer;transition:all .3s}.ant-dropdown-menu-item>.anticon:first-child,.ant-dropdown-menu-item>span>.anticon:first-child,.ant-dropdown-menu-submenu-title>.anticon:first-child,.ant-dropdown-menu-submenu-title>span>.anticon:first-child{min-width:12px;margin-right:8px;font-size:11px}.ant-dropdown-menu-item>a,.ant-dropdown-menu-submenu-title>a{display:block;margin:-5px -16px;padding:5px 16px;color:#6a7580;transition:all .3s}.ant-dropdown-menu-item>a:hover,.ant-dropdown-menu-submenu-title>a:hover{color:#6a7580}.ant-dropdown-menu-item>.anticon+span>a,.ant-dropdown-menu-submenu-title>.anticon+span>a{color:#6a7580;transition:all .3s}.ant-dropdown-menu-item>.anticon+span>a:hover,.ant-dropdown-menu-submenu-title>.anticon+span>a:hover{color:#6a7580}.ant-dropdown-menu-item-selected,.ant-dropdown-menu-item-selected>a,.ant-dropdown-menu-submenu-title-selected,.ant-dropdown-menu-submenu-title-selected>a{color:#0b68ff;background-color:#d9eeff}.ant-dropdown-menu-item:hover,.ant-dropdown-menu-submenu-title:hover{background-color:#f4faff}.ant-dropdown-menu-item-disabled,.ant-dropdown-menu-submenu-title-disabled{color:#b5bdc3;cursor:not-allowed}.ant-dropdown-menu-item-disabled:hover,.ant-dropdown-menu-submenu-title-disabled:hover{color:#b5bdc3;background-color:#fff;cursor:not-allowed}.ant-dropdown-menu-item-divider,.ant-dropdown-menu-submenu-title-divider{height:1px;margin:4px 0;overflow:hidden;line-height:0;background-color:#e9edee}.ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow,.ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow{position:absolute;right:8px}.ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow-icon,.ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow-icon{margin-right:0!important;color:#232936;font-style:normal;display:inline-block;font-size:10px}.ant-dropdown-menu-item-group-list{margin:0 8px;padding:0;list-style:none}.ant-dropdown-menu-submenu-title{padding-right:27px}.ant-dropdown-menu-submenu-vertical{position:relative}.ant-dropdown-menu-submenu-vertical>.ant-dropdown-menu{position:absolute;top:0;left:100%;min-width:100%;margin-left:4px;transform-origin:0 0}.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title,.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow-icon{color:#b5bdc3;background-color:#fff;cursor:not-allowed}.ant-dropdown-menu-submenu-selected .ant-dropdown-menu-submenu-title{color:#0b68ff}.ant-dropdown.slide-down-appear.slide-down-appear-active.ant-dropdown-placement-bottomCenter,.ant-dropdown.slide-down-appear.slide-down-appear-active.ant-dropdown-placement-bottomLeft,.ant-dropdown.slide-down-appear.slide-down-appear-active.ant-dropdown-placement-bottomRight,.ant-dropdown.slide-down-enter.slide-down-enter-active.ant-dropdown-placement-bottomCenter,.ant-dropdown.slide-down-enter.slide-down-enter-active.ant-dropdown-placement-bottomLeft,.ant-dropdown.slide-down-enter.slide-down-enter-active.ant-dropdown-placement-bottomRight{animation-name:antSlideUpIn}.ant-dropdown.slide-up-appear.slide-up-appear-active.ant-dropdown-placement-topCenter,.ant-dropdown.slide-up-appear.slide-up-appear-active.ant-dropdown-placement-topLeft,.ant-dropdown.slide-up-appear.slide-up-appear-active.ant-dropdown-placement-topRight,.ant-dropdown.slide-up-enter.slide-up-enter-active.ant-dropdown-placement-topCenter,.ant-dropdown.slide-up-enter.slide-up-enter-active.ant-dropdown-placement-topLeft,.ant-dropdown.slide-up-enter.slide-up-enter-active.ant-dropdown-placement-topRight{animation-name:antSlideDownIn}.ant-dropdown.slide-down-leave.slide-down-leave-active.ant-dropdown-placement-bottomCenter,.ant-dropdown.slide-down-leave.slide-down-leave-active.ant-dropdown-placement-bottomLeft,.ant-dropdown.slide-down-leave.slide-down-leave-active.ant-dropdown-placement-bottomRight{animation-name:antSlideUpOut}.ant-dropdown.slide-up-leave.slide-up-leave-active.ant-dropdown-placement-topCenter,.ant-dropdown.slide-up-leave.slide-up-leave-active.ant-dropdown-placement-topLeft,.ant-dropdown.slide-up-leave.slide-up-leave-active.ant-dropdown-placement-topRight{animation-name:antSlideDownOut}.ant-dropdown-button>.anticon.anticon-down,.ant-dropdown-link>.anticon.anticon-down,.ant-dropdown-trigger>.anticon.anticon-down{vertical-align:baseline;display:inline-block;font-size:10px}.ant-dropdown-button{white-space:nowrap}.ant-dropdown-button.ant-btn-group>.ant-btn:last-child:not(:first-child):not(.ant-btn-icon-only){padding-right:8px;padding-left:8px}.ant-dropdown-menu-dark,.ant-dropdown-menu-dark .ant-dropdown-menu{background:#001529}.ant-dropdown-menu-dark .ant-dropdown-menu-item,.ant-dropdown-menu-dark .ant-dropdown-menu-item>.anticon+span>a,.ant-dropdown-menu-dark .ant-dropdown-menu-item>a,.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title{color:#f9fafb}.ant-dropdown-menu-dark .ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow::after,.ant-dropdown-menu-dark .ant-dropdown-menu-item>.anticon+span>a .ant-dropdown-menu-submenu-arrow::after,.ant-dropdown-menu-dark .ant-dropdown-menu-item>a .ant-dropdown-menu-submenu-arrow::after,.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow::after{color:#f9fafb}.ant-dropdown-menu-dark .ant-dropdown-menu-item:hover,.ant-dropdown-menu-dark .ant-dropdown-menu-item>.anticon+span>a:hover,.ant-dropdown-menu-dark .ant-dropdown-menu-item>a:hover,.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title:hover{color:#fff;background:0 0}.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected,.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected:hover,.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected>a{color:#fff;background:#0b68ff}.ant-dropdown-rtl{direction:rtl}.ant-dropdown-rtl.ant-dropdown::before{right:-7px;left:0}.ant-dropdown-menu.ant-dropdown-menu-rtl{direction:rtl;text-align:right}.ant-dropdown-rtl .ant-dropdown-menu-item-group-title{direction:rtl;text-align:right}.ant-dropdown-rtl .ant-dropdown-menu-submenu-popup li,.ant-dropdown-rtl .ant-dropdown-menu-submenu-popup ul{text-align:right}.ant-dropdown-rtl .ant-dropdown-menu-item,.ant-dropdown-rtl .ant-dropdown-menu-submenu-title{text-align:right}.ant-dropdown-rtl .ant-dropdown-menu-item>.anticon:first-child,.ant-dropdown-rtl .ant-dropdown-menu-item>span>.anticon:first-child,.ant-dropdown-rtl .ant-dropdown-menu-submenu-title>.anticon:first-child,.ant-dropdown-rtl .ant-dropdown-menu-submenu-title>span>.anticon:first-child{margin-right:0;margin-left:8px}.ant-dropdown-rtl .ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow,.ant-dropdown-rtl .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow{right:auto;left:8px}.ant-dropdown-rtl .ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow-icon,.ant-dropdown-rtl .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow-icon{margin-left:0!important;transform:scaleX(-1)}.ant-dropdown-rtl .ant-dropdown-menu-submenu-title{padding-right:16px;padding-left:27px}.ant-dropdown-rtl .ant-dropdown-menu-submenu-vertical>.ant-dropdown-menu{right:100%;left:0;margin-right:4px;margin-left:0}.ant-dropdown{border-radius:3px;overflow:hidden}.ant-dropdown.ant-dropdown{box-shadow:0 16px 32px 0 rgba(35,41,54,.1);margin-top:0;padding-top:0}.ant-dropdown.ant-dropdown>div{box-shadow:none;margin:0;border-radius:3px;overflow:visible}.ant-dropdown:before{display:none!important}.ant-dropdown-menu{padding:8px 0}.ant-dropdown-menu-item-group-title{padding:4px 16px}.ant-dropdown-menu-item,.ant-dropdown-menu-submenu-title{font-size:13px;font-weight:500!important;min-width:175px;min-height:32px;padding:4px 16px}.ant-dropdown-menu-item>.icon,.ant-dropdown-menu-submenu-title>.icon{margin-right:8px;vertical-align:top}.ant-dropdown-menu-item>a,.ant-dropdown-menu-submenu-title>a{padding:4px 16px;margin:-4px -16px}.ant-dropdown-menu-item:hover,.ant-dropdown-menu-submenu-title:hover{color:#384350;background-color:#f4faff}.ant-dropdown-menu-item-selected{background-color:#f4faff;color:#384350}.ant-dropdown-trigger:after{animation:none;animation-fill-mode:none}
1
+ .ant-dropdown-menu-item.ant-dropdown-menu-item-danger{color:#f52922}.ant-dropdown-menu-item.ant-dropdown-menu-item-danger:hover{color:#fff;background-color:#f52922}.ant-dropdown{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:absolute;top:-9999px;left:-9999px;z-index:991050;display:block}.ant-dropdown::before{position:absolute;top:-4px;right:0;bottom:-4px;left:-7px;z-index:-9999;opacity:.0001;content:' '}.ant-dropdown-wrap{position:relative}.ant-dropdown-wrap .ant-btn>.anticon-down{font-size:10px}.ant-dropdown-wrap .anticon-down::before{transition:transform .2s}.ant-dropdown-wrap-open .anticon-down::before{transform:rotate(180deg)}.ant-dropdown-hidden,.ant-dropdown-menu-hidden,.ant-dropdown-menu-submenu-hidden{display:none}.ant-dropdown-show-arrow.ant-dropdown-placement-top,.ant-dropdown-show-arrow.ant-dropdown-placement-topLeft,.ant-dropdown-show-arrow.ant-dropdown-placement-topRight{padding-bottom:9px}.ant-dropdown-show-arrow.ant-dropdown-placement-bottom,.ant-dropdown-show-arrow.ant-dropdown-placement-bottomLeft,.ant-dropdown-show-arrow.ant-dropdown-placement-bottomRight{padding-top:9px}.ant-dropdown-arrow{position:absolute;z-index:1;display:block;width:5px;height:5px;border-radius:0 0 2px;pointer-events:none}.ant-dropdown-arrow::before{position:absolute;top:-5px;left:-5px;width:15px;height:15px;background:#fff;background-repeat:no-repeat;background-position:-4px -4px;content:'';clip-path:inset(33% 33%);clip-path:path('M 3.5355339059327373 11.464466094067262 A 5 5 0 0 1 7.071067811865475 10 L 8 10 A 2 2 0 0 0 10 8 L 10 7.071067811865475 A 5 5 0 0 1 11.464466094067262 3.5355339059327373 L 10.464466094067262 3.5355339059327373 L 3.5355339059327373 10.464466094067262 Z')}.ant-dropdown-placement-top>.ant-dropdown-arrow,.ant-dropdown-placement-topLeft>.ant-dropdown-arrow,.ant-dropdown-placement-topRight>.ant-dropdown-arrow{bottom:5.54px;box-shadow:3px 3px 7px -3px rgba(0,0,0,.1);transform:rotate(45deg)}.ant-dropdown-placement-top>.ant-dropdown-arrow{left:50%;transform:translateX(-50%) rotate(45deg)}.ant-dropdown-placement-topLeft>.ant-dropdown-arrow{left:16px}.ant-dropdown-placement-topRight>.ant-dropdown-arrow{right:16px}.ant-dropdown-placement-bottom>.ant-dropdown-arrow,.ant-dropdown-placement-bottomLeft>.ant-dropdown-arrow,.ant-dropdown-placement-bottomRight>.ant-dropdown-arrow{top:4.95px;box-shadow:2px 2px 5px -2px rgba(0,0,0,.1);transform:rotate(-135deg) translateY(-.5px)}.ant-dropdown-placement-bottom>.ant-dropdown-arrow{left:50%;transform:translateX(-50%) rotate(-135deg) translateY(-.5px)}.ant-dropdown-placement-bottomLeft>.ant-dropdown-arrow{left:16px}.ant-dropdown-placement-bottomRight>.ant-dropdown-arrow{right:16px}.ant-dropdown-menu{position:relative;margin:0;padding:4px 0;text-align:left;list-style-type:none;background-color:#fff;background-clip:padding-box;border-radius:3px;outline:0;box-shadow:0 2px 6px rgba(171,178,183,.12)}.ant-dropdown-menu-item-group-title{padding:5px 16px;color:#232936;transition:all .3s}.ant-dropdown-menu-submenu-popup{position:absolute;z-index:991050;background:0 0;box-shadow:none;transform-origin:0 0}.ant-dropdown-menu-submenu-popup li,.ant-dropdown-menu-submenu-popup ul{list-style:none}.ant-dropdown-menu-submenu-popup ul{margin-right:.3em;margin-left:.3em}.ant-dropdown-menu-item{position:relative;display:flex;align-items:center}.ant-dropdown-menu-item-icon{min-width:12px;margin-right:8px;font-size:11px}.ant-dropdown-menu-title-content{flex:auto}.ant-dropdown-menu-title-content>a{color:inherit;transition:all .3s}.ant-dropdown-menu-title-content>a:hover{color:inherit}.ant-dropdown-menu-title-content>a::after{position:absolute;top:0;right:0;bottom:0;left:0;content:''}.ant-dropdown-menu-item,.ant-dropdown-menu-submenu-title{clear:both;margin:0;padding:5px 16px;color:#6a7580;font-weight:400;font-size:13px;line-height:22px;cursor:pointer;transition:all .3s}.ant-dropdown-menu-item-selected,.ant-dropdown-menu-submenu-title-selected{color:#0b68ff;background-color:#d9eeff}.ant-dropdown-menu-item.ant-dropdown-menu-item-active,.ant-dropdown-menu-item.ant-dropdown-menu-submenu-title-active,.ant-dropdown-menu-item:hover,.ant-dropdown-menu-submenu-title.ant-dropdown-menu-item-active,.ant-dropdown-menu-submenu-title.ant-dropdown-menu-submenu-title-active,.ant-dropdown-menu-submenu-title:hover{background-color:#f4faff}.ant-dropdown-menu-item.ant-dropdown-menu-item-disabled,.ant-dropdown-menu-item.ant-dropdown-menu-submenu-title-disabled,.ant-dropdown-menu-submenu-title.ant-dropdown-menu-item-disabled,.ant-dropdown-menu-submenu-title.ant-dropdown-menu-submenu-title-disabled{color:#b5bdc3;cursor:not-allowed}.ant-dropdown-menu-item.ant-dropdown-menu-item-disabled:hover,.ant-dropdown-menu-item.ant-dropdown-menu-submenu-title-disabled:hover,.ant-dropdown-menu-submenu-title.ant-dropdown-menu-item-disabled:hover,.ant-dropdown-menu-submenu-title.ant-dropdown-menu-submenu-title-disabled:hover{color:#b5bdc3;background-color:#fff;cursor:not-allowed}.ant-dropdown-menu-item.ant-dropdown-menu-item-disabled a,.ant-dropdown-menu-item.ant-dropdown-menu-submenu-title-disabled a,.ant-dropdown-menu-submenu-title.ant-dropdown-menu-item-disabled a,.ant-dropdown-menu-submenu-title.ant-dropdown-menu-submenu-title-disabled a{pointer-events:none}.ant-dropdown-menu-item-divider,.ant-dropdown-menu-submenu-title-divider{height:1px;margin:4px 0;overflow:hidden;line-height:0;background-color:#e9edee}.ant-dropdown-menu-item .ant-dropdown-menu-submenu-expand-icon,.ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-expand-icon{position:absolute;right:8px}.ant-dropdown-menu-item .ant-dropdown-menu-submenu-expand-icon .ant-dropdown-menu-submenu-arrow-icon,.ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-expand-icon .ant-dropdown-menu-submenu-arrow-icon{margin-right:0!important;color:#232936;font-size:10px;font-style:normal}.ant-dropdown-menu-item-group-list{margin:0 8px;padding:0;list-style:none}.ant-dropdown-menu-submenu-title{padding-right:27px}.ant-dropdown-menu-submenu-vertical{position:relative}.ant-dropdown-menu-submenu-vertical>.ant-dropdown-menu{position:absolute;top:0;left:100%;min-width:100%;margin-left:4px;transform-origin:0 0}.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title,.ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow-icon{color:#b5bdc3;background-color:#fff;cursor:not-allowed}.ant-dropdown-menu-submenu-selected .ant-dropdown-menu-submenu-title{color:#0b68ff}.ant-dropdown.ant-slide-down-appear.ant-slide-down-appear-active.ant-dropdown-placement-bottom,.ant-dropdown.ant-slide-down-appear.ant-slide-down-appear-active.ant-dropdown-placement-bottomLeft,.ant-dropdown.ant-slide-down-appear.ant-slide-down-appear-active.ant-dropdown-placement-bottomRight,.ant-dropdown.ant-slide-down-enter.ant-slide-down-enter-active.ant-dropdown-placement-bottom,.ant-dropdown.ant-slide-down-enter.ant-slide-down-enter-active.ant-dropdown-placement-bottomLeft,.ant-dropdown.ant-slide-down-enter.ant-slide-down-enter-active.ant-dropdown-placement-bottomRight{animation-name:antSlideUpIn}.ant-dropdown.ant-slide-up-appear.ant-slide-up-appear-active.ant-dropdown-placement-top,.ant-dropdown.ant-slide-up-appear.ant-slide-up-appear-active.ant-dropdown-placement-topLeft,.ant-dropdown.ant-slide-up-appear.ant-slide-up-appear-active.ant-dropdown-placement-topRight,.ant-dropdown.ant-slide-up-enter.ant-slide-up-enter-active.ant-dropdown-placement-top,.ant-dropdown.ant-slide-up-enter.ant-slide-up-enter-active.ant-dropdown-placement-topLeft,.ant-dropdown.ant-slide-up-enter.ant-slide-up-enter-active.ant-dropdown-placement-topRight{animation-name:antSlideDownIn}.ant-dropdown.ant-slide-down-leave.ant-slide-down-leave-active.ant-dropdown-placement-bottom,.ant-dropdown.ant-slide-down-leave.ant-slide-down-leave-active.ant-dropdown-placement-bottomLeft,.ant-dropdown.ant-slide-down-leave.ant-slide-down-leave-active.ant-dropdown-placement-bottomRight{animation-name:antSlideUpOut}.ant-dropdown.ant-slide-up-leave.ant-slide-up-leave-active.ant-dropdown-placement-top,.ant-dropdown.ant-slide-up-leave.ant-slide-up-leave-active.ant-dropdown-placement-topLeft,.ant-dropdown.ant-slide-up-leave.ant-slide-up-leave-active.ant-dropdown-placement-topRight{animation-name:antSlideDownOut}.ant-dropdown-button>.anticon.anticon-down,.ant-dropdown-link>.anticon.anticon-down,.ant-dropdown-trigger>.anticon.anticon-down{font-size:10px;vertical-align:baseline}.ant-dropdown-button{white-space:nowrap}.ant-dropdown-button.ant-btn-group>.ant-btn-loading,.ant-dropdown-button.ant-btn-group>.ant-btn-loading+.ant-btn{cursor:default;pointer-events:none}.ant-dropdown-button.ant-btn-group>.ant-btn-loading+.ant-btn::before{display:block}.ant-dropdown-button.ant-btn-group>.ant-btn:last-child:not(:first-child):not(.ant-btn-icon-only){padding-right:8px;padding-left:8px}.ant-dropdown-menu-dark,.ant-dropdown-menu-dark .ant-dropdown-menu{background:#001529}.ant-dropdown-menu-dark .ant-dropdown-menu-item,.ant-dropdown-menu-dark .ant-dropdown-menu-item>.anticon+span>a,.ant-dropdown-menu-dark .ant-dropdown-menu-item>a,.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title{color:#f9fafb}.ant-dropdown-menu-dark .ant-dropdown-menu-item .ant-dropdown-menu-submenu-arrow::after,.ant-dropdown-menu-dark .ant-dropdown-menu-item>.anticon+span>a .ant-dropdown-menu-submenu-arrow::after,.ant-dropdown-menu-dark .ant-dropdown-menu-item>a .ant-dropdown-menu-submenu-arrow::after,.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow::after{color:#f9fafb}.ant-dropdown-menu-dark .ant-dropdown-menu-item:hover,.ant-dropdown-menu-dark .ant-dropdown-menu-item>.anticon+span>a:hover,.ant-dropdown-menu-dark .ant-dropdown-menu-item>a:hover,.ant-dropdown-menu-dark .ant-dropdown-menu-submenu-title:hover{color:#fff;background:0 0}.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected,.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected:hover,.ant-dropdown-menu-dark .ant-dropdown-menu-item-selected>a{color:#fff;background:#0b68ff}.ant-dropdown-rtl{direction:rtl}.ant-dropdown-rtl.ant-dropdown::before{right:-7px;left:0}.ant-dropdown-menu.ant-dropdown-menu-rtl{direction:rtl;text-align:right}.ant-dropdown-menu-submenu-rtl .ant-dropdown-menu-item-group-title,.ant-dropdown-rtl .ant-dropdown-menu-item-group-title{direction:rtl;text-align:right}.ant-dropdown-menu-submenu-popup.ant-dropdown-menu-submenu-rtl{transform-origin:100% 0}.ant-dropdown-rtl .ant-dropdown-menu-submenu-popup li,.ant-dropdown-rtl .ant-dropdown-menu-submenu-popup ul{text-align:right}.ant-dropdown-rtl .ant-dropdown-menu-item,.ant-dropdown-rtl .ant-dropdown-menu-submenu-title{text-align:right}.ant-dropdown-rtl .ant-dropdown-menu-item>.anticon:first-child,.ant-dropdown-rtl .ant-dropdown-menu-item>span>.anticon:first-child,.ant-dropdown-rtl .ant-dropdown-menu-submenu-title>.anticon:first-child,.ant-dropdown-rtl .ant-dropdown-menu-submenu-title>span>.anticon:first-child{margin-right:0;margin-left:8px}.ant-dropdown-rtl .ant-dropdown-menu-item .ant-dropdown-menu-submenu-expand-icon,.ant-dropdown-rtl .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-expand-icon{right:auto;left:8px}.ant-dropdown-rtl .ant-dropdown-menu-item .ant-dropdown-menu-submenu-expand-icon .ant-dropdown-menu-submenu-arrow-icon,.ant-dropdown-rtl .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-expand-icon .ant-dropdown-menu-submenu-arrow-icon{margin-left:0!important;transform:scaleX(-1)}.ant-dropdown-rtl .ant-dropdown-menu-submenu-title{padding-right:16px;padding-left:27px}.ant-dropdown-rtl .ant-dropdown-menu-submenu-vertical>.ant-dropdown-menu{right:100%;left:0;margin-right:4px;margin-left:0}.ant-dropdown{border-radius:3px;overflow:hidden}.ant-dropdown.ant-dropdown{box-shadow:0 16px 32px 0 rgba(35,41,54,.1);background:#fff;margin-top:0;padding-top:0}.ant-dropdown.ant-dropdown>div{box-shadow:none;margin:0;border-radius:3px;overflow:visible}.ant-dropdown:before{display:none!important}.ant-dropdown-menu{padding:8px 0}.ant-dropdown-menu-item-group-title{padding:4px 16px}.ant-dropdown-menu-item,.ant-dropdown-menu-submenu-title{font-size:13px;font-weight:500!important;min-width:175px;min-height:32px;padding:4px 16px}.ant-dropdown-menu-item>.icon,.ant-dropdown-menu-submenu-title>.icon{margin-right:8px;vertical-align:top}.ant-dropdown-menu-item>a,.ant-dropdown-menu-submenu-title>a{padding:4px 16px;margin:-4px -16px}.ant-dropdown-menu-item:hover,.ant-dropdown-menu-submenu-title:hover{color:#384350;background-color:#f4faff}.ant-dropdown-menu-item-selected{background-color:#f4faff;color:#384350}.ant-dropdown-trigger:after{animation:none;animation-fill-mode:none}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-dropdown",
3
- "version": "0.18.31",
3
+ "version": "0.19.1",
4
4
  "description": "Dropdown UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -34,17 +34,17 @@
34
34
  ],
35
35
  "types": "dist/index.d.ts",
36
36
  "dependencies": {
37
- "@synerise/ds-divider": "^0.7.21",
38
- "@synerise/ds-icon": "^0.70.0",
39
- "@synerise/ds-search-bar": "^0.7.9",
40
- "@synerise/ds-typography": "^0.16.12",
41
- "@synerise/ds-utils": "^0.31.2"
37
+ "@synerise/ds-divider": "^0.8.0",
38
+ "@synerise/ds-icon": "^0.71.0",
39
+ "@synerise/ds-search-bar": "^0.8.1",
40
+ "@synerise/ds-typography": "^0.17.0",
41
+ "@synerise/ds-utils": "^0.32.0"
42
42
  },
43
43
  "peerDependencies": {
44
44
  "@synerise/ds-core": "*",
45
- "antd": "4.7.0",
46
- "react": ">=16.9.0 <= 17.0.2",
47
- "styled-components": "5.0.1"
45
+ "antd": "4.24.16",
46
+ "react": ">=16.9.0 <= 18.3.1",
47
+ "styled-components": "^5.3.3"
48
48
  },
49
- "gitHead": "56e23cda61b7ddfe7da4669307183b105a500e1a"
49
+ "gitHead": "9aaa7260a474fb987a6dad183ce6e609ddc965d2"
50
50
  }