@synerise/ds-sidebar-object 1.0.43 → 1.1.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-sidebar-object@1.1.0...@synerise/ds-sidebar-object@1.1.1) (2025-11-13)
+
+**Note:** Version bump only for package @synerise/ds-sidebar-object
+
+
+
+
+
+# [1.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-sidebar-object@1.0.43...@synerise/ds-sidebar-object@1.1.0) (2025-11-06)
+
+
+### Features
+
+* **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
+
+
+
+
+
 ## [1.0.43](https://github.com/Synerise/synerise-design/compare/@synerise/ds-sidebar-object@1.0.42...@synerise/ds-sidebar-object@1.0.43) (2025-10-31)
 
 **Note:** Version bump only for package @synerise/ds-sidebar-object

package/dist/Elements/Header/Header.js

@@ -1,12 +1,10 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useMemo } from 'react';
 import Button from '@synerise/ds-button';
 import Drawer from '@synerise/ds-drawer';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { AngleDownM, AngleUpM, CloseM, CopyClipboardM, DuplicateM, EditM, FolderM, OptionHorizontalM, TrashM } from '@synerise/ds-icon';
-import Menu from '@synerise/ds-menu';
+import { DropdownMenu } from '@synerise/ds-dropdown';
+import Icon, { AngleDownM, AngleUpM, CloseM, DuplicateM, EditM, FolderM, OptionHorizontalM, TrashM } from '@synerise/ds-icon';
 import Typography from '@synerise/ds-typography';
-import { useOnClickOutside } from '@synerise/ds-utils';
 import * as S from './Header.style';
 import { ButtonVariant, HeaderType } from './Header.types';
 var Header = function Header(_ref) {
@@ -36,13 +34,6 @@ var Header = function Header(_ref) {
     typeButtons = _ref.typeButtons,
     onCancelClick = _ref.onCancelClick,
     onApplyClick = _ref.onApplyClick;
-  var _useState = useState(false),
-    dropdownVisible = _useState[0],
-    setDropdownVisible = _useState[1];
-  var ref = useRef(null);
-  useOnClickOutside(ref, function () {
-    setDropdownVisible(false);
-  });
   var renderBackTitle = function renderBackTitle(titleType) {
     if (titleType === HeaderType.EDITABLE) {
       return /*#__PURE__*/React.createElement(S.StyledInlineEdit, {
@@ -66,7 +57,6 @@ var Header = function Header(_ref) {
     var menuItems = [];
     onEdit && menuItems.push({
       onClick: function onClick() {
-        setDropdownVisible(!dropdownVisible);
         onEdit(inputObject);
       },
       prefixel: /*#__PURE__*/React.createElement(Icon, {
@@ -76,7 +66,6 @@ var Header = function Header(_ref) {
     });
     onDuplicate && menuItems.push({
       onClick: function onClick() {
-        setDropdownVisible(!dropdownVisible);
         onDuplicate(inputObject);
       },
       prefixel: /*#__PURE__*/React.createElement(Icon, {
@@ -86,7 +75,6 @@ var Header = function Header(_ref) {
     });
     onMove && menuItems.push({
       onClick: function onClick() {
-        setDropdownVisible(!dropdownVisible);
         onMove(inputObject);
       },
       prefixel: /*#__PURE__*/React.createElement(Icon, {
@@ -96,7 +84,6 @@ var Header = function Header(_ref) {
     });
     onDelete && menuItems.push({
       onClick: function onClick() {
-        setDropdownVisible(!dropdownVisible);
         onDelete(inputObject);
       },
       type: 'danger',
@@ -110,19 +97,16 @@ var Header = function Header(_ref) {
     });
     onId && menuItems.push({
       onClick: function onClick() {
-        setDropdownVisible(!dropdownVisible);
         onId(inputObject);
       },
-      style: {
-        padding: '0 12px'
+      copyable: {
+        copiedLabel: 'Copied!',
+        copyValue: "" + inputObject[inputObjectIdKey]
       },
-      prefixel: /*#__PURE__*/React.createElement(Icon, {
-        component: /*#__PURE__*/React.createElement(CopyClipboardM, null)
-      }),
-      text: "ID: " + inputObject[inputObjectIdKey]
+      text: "Copy ID"
     });
     return menuItems;
-  }, [dropdownVisible, inputObject, inputObjectIdKey, onDelete, onDuplicate, onEdit, onId, onMove, renderMenuDivider, texts.deleteIcon, texts.duplicateIcon, texts.editIcon, texts.moveIcon]);
+  }, [inputObject, inputObjectIdKey, onDelete, onDuplicate, onEdit, onId, onMove, renderMenuDivider, texts.deleteIcon, texts.duplicateIcon, texts.editIcon, texts.moveIcon]);
   var renderActionButtons = function renderActionButtons(typesOfButtons) {
     if (typesOfButtons === ButtonVariant.WITH_NAVIGATION) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, onArrowUp && /*#__PURE__*/React.createElement(S.ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
@@ -139,24 +123,16 @@ var Header = function Header(_ref) {
       }, /*#__PURE__*/React.createElement(Icon, {
         size: 20,
         component: /*#__PURE__*/React.createElement(AngleDownM, null)
-      }))), renderMenu && /*#__PURE__*/React.createElement(Dropdown, {
-        visible: dropdownVisible,
+      }))), renderMenu && /*#__PURE__*/React.createElement(DropdownMenu, {
+        dataSource: menuDataSource,
         placement: "bottomLeft",
-        overlay: /*#__PURE__*/React.createElement(S.DropdownWrapper, {
-          ref: ref
-        }, /*#__PURE__*/React.createElement(Menu, {
-          asDropdownMenu: true,
-          style: {
-            width: '100%'
-          },
-          dataSource: menuDataSource
-        }))
+        popoverProps: {
+          testId: 'sidebar-object-menu'
+        },
+        asChild: true
       }, /*#__PURE__*/React.createElement(S.ButtonWrapper, {
         "data-testid": "sidebar-object-dropdown-menu-trigger"
       }, /*#__PURE__*/React.createElement(Button, {
-        onClick: function onClick() {
-          return setDropdownVisible(!dropdownVisible);
-        },
         type: "ghost",
         mode: "single-icon"
       }, /*#__PURE__*/React.createElement(Icon, {

package/dist/Elements/Header/Header.style.js

@@ -29,7 +29,7 @@ export var ButtonsWrapper = styled.div.withConfig({
 export var DropdownWrapper = styled.div.withConfig({
   displayName: "Headerstyle__DropdownWrapper",
   componentId: "sc-16ox3vk-5"
-})(["background:", ";width:216px;"], function (props) {
+})(["background:", ";"], function (props) {
   return props.theme.palette.white;
 });
 export var OverviewWrapper = styled.div.withConfig({

package/dist/Elements/Overview/Overview.js

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useMemo, useState } from 'react';
 import Button from '@synerise/ds-button';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { AngleDownS } from '@synerise/ds-icon';
+import { useTheme } from '@synerise/ds-core';
+import { DropdownMenu } from '@synerise/ds-dropdown';
+import Icon, { Add3M, AngleDownS, FolderM } from '@synerise/ds-icon';
 import Content from '../Content/Content';
-import DropdownOverlay from '../DropdownOverlay/DropdownOverlay';
 import * as S from '../Header/Header.style';
 import ObjectSummary from '../ObjectSummary/ObjectSummary';
 var Overview = function Overview(_ref) {
@@ -19,54 +20,70 @@ var Overview = function Overview(_ref) {
     parentFolder = _ref.parentFolder,
     texts = _ref.texts,
     textDescription = _ref.textDescription,
-    _onFolderSelect = _ref.onFolderSelect,
+    onFolderSelect = _ref.onFolderSelect,
     onDescriptionChange = _ref.onDescriptionChange,
     _ref$descriptionProps = _ref.descriptionProps,
     descriptionProps = _ref$descriptionProps === void 0 ? {} : _ref$descriptionProps,
     onAddFolderClick = _ref.onAddFolderClick;
-  var _useState = useState(false),
-    dropdownVisible = _useState[0],
-    setDropdownVisible = _useState[1];
-  var _useState2 = useState(''),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  var onClearInput = function onClearInput() {
-    setValue('');
-  };
+  var theme = useTheme();
+  var _useState = useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var filteredData = useMemo(function () {
+    return folders.filter(function (item) {
+      return typeof item[foldersFilterKey] === 'string' && item[foldersFilterKey].toLowerCase().includes(searchQuery.toLowerCase());
+    });
+  }, [folders, foldersFilterKey, searchQuery]);
+  var menuDataSource = useMemo(function () {
+    return filteredData.map(function (item) {
+      return _extends({
+        key: item[foldersIdKey] + "-" + item.id,
+        onClick: function onClick() {
+          return onFolderSelect(item);
+        },
+        checked: parentFolder[foldersIdKey] === item[foldersIdKey],
+        prefixel: /*#__PURE__*/React.createElement(Icon, {
+          component: /*#__PURE__*/React.createElement(FolderM, null)
+        }),
+        // highlight: value,
+        text: item[foldersDisplayKey]
+      }, item);
+    });
+  }, [filteredData, foldersDisplayKey, foldersIdKey, onFolderSelect, parentFolder]);
   return /*#__PURE__*/React.createElement(S.OverviewWrapper, null, /*#__PURE__*/React.createElement(S.HeaderWrapper, {
-    dashed: !!_onFolderSelect
-  }, _onFolderSelect && /*#__PURE__*/React.createElement(React.Fragment, null, texts == null ? void 0 : texts.folder, ":", ' ', /*#__PURE__*/React.createElement(Dropdown, {
-    visible: dropdownVisible,
-    overlay: /*#__PURE__*/React.createElement(DropdownOverlay, {
-      texts: texts,
-      parentFolder: parentFolder,
-      data: folders,
-      onDropdownOutsideClick: function onDropdownOutsideClick() {
-        return setDropdownVisible(false);
-      },
-      onClearInput: onClearInput,
-      searchValue: value,
-      onSearchChange: setValue,
-      onFolderSelect: function onFolderSelect(folder) {
-        _onFolderSelect && _onFolderSelect(folder);
-        setDropdownVisible(false);
-      },
-      foldersDisplayKey: foldersDisplayKey,
-      foldersFilterKey: foldersFilterKey,
-      foldersIdKey: foldersIdKey,
-      onAddFolderClick: onAddFolderClick
-    })
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return setDropdownVisible(!dropdownVisible);
+    dashed: !!onFolderSelect
+  }, onFolderSelect && /*#__PURE__*/React.createElement(React.Fragment, null, texts == null ? void 0 : texts.folder, ":", ' ', /*#__PURE__*/React.createElement(DropdownMenu, {
+    withSearch: true,
+    popoverProps: {
+      testId: 'sidebar-object-folders'
+    },
+    asChild: true,
+    dataSource: menuDataSource,
+    itemMatchesSearchQuery: function itemMatchesSearchQuery() {
+      return true;
     },
+    onSearchQueryChange: setSearchQuery,
+    footer: onAddFolderClick ? {
+      left: /*#__PURE__*/React.createElement(Button, {
+        type: "ghost",
+        mode: "icon-label",
+        onClick: function onClick() {
+          return onAddFolderClick(searchQuery);
+        }
+      }, /*#__PURE__*/React.createElement(Icon, {
+        component: /*#__PURE__*/React.createElement(Add3M, null),
+        size: 24,
+        color: theme.palette['grey-500']
+      }), /*#__PURE__*/React.createElement("div", null, texts.addFolder))
+    } : undefined
+  }, /*#__PURE__*/React.createElement(Button, {
     mode: "label-icon",
     type: "ghost"
   }, parentFolder == null ? void 0 : parentFolder.name, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(AngleDownS, null)
   }))))), /*#__PURE__*/React.createElement(Content, {
     descriptionProps: descriptionProps,
-    onFolderSelect: _onFolderSelect,
+    onFolderSelect: onFolderSelect,
     texts: texts,
     onDescriptionChange: onDescriptionChange,
     textDescription: textDescription,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-sidebar-object",
-  "version": "1.0.43",
+  "version": "1.1.1",
   "description": "SidebarObject UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,18 +35,18 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.4.16",
-    "@synerise/ds-description": "^1.1.12",
+    "@synerise/ds-button": "^1.5.0",
+    "@synerise/ds-description": "^1.1.13",
     "@synerise/ds-drawer": "^1.0.10",
-    "@synerise/ds-dropdown": "^1.0.34",
-    "@synerise/ds-icon": "^1.7.3",
-    "@synerise/ds-inline-edit": "^1.0.38",
-    "@synerise/ds-menu": "^1.1.2",
-    "@synerise/ds-result": "^1.0.29",
-    "@synerise/ds-scrollbar": "^1.1.9",
-    "@synerise/ds-subtle-form": "^1.1.34",
-    "@synerise/ds-tabs": "^1.0.36",
-    "@synerise/ds-typography": "^1.0.22",
+    "@synerise/ds-dropdown": "^1.1.1",
+    "@synerise/ds-icon": "^1.8.0",
+    "@synerise/ds-inline-edit": "^1.1.1",
+    "@synerise/ds-menu": "^1.2.0",
+    "@synerise/ds-result": "^1.0.30",
+    "@synerise/ds-scrollbar": "^1.2.0",
+    "@synerise/ds-subtle-form": "^1.1.36",
+    "@synerise/ds-tabs": "^1.1.1",
+    "@synerise/ds-typography": "^1.0.23",
     "@synerise/ds-utils": "^1.5.0"
   },
   "peerDependencies": {
@@ -55,5 +55,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "73989f3707121812fcd54f3e89e80f6228298689"
+  "gitHead": "085189e79075b23a8fb86ce9b7d930f6ac7b3d23"
 }

package/dist/Elements/DropdownOverlay/DropdownOverlay.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { type Props } from './DropdownOverlay.types';
-declare const DropdownOverlay: ({ texts, onClearInput, data, onAddFolderClick, parentFolder, onDropdownOutsideClick, onSearchChange, searchValue, onFolderSelect, foldersIdKey, foldersFilterKey, foldersDisplayKey, }: Props) => React.JSX.Element;
-export default DropdownOverlay;

package/dist/Elements/DropdownOverlay/DropdownOverlay.js

@@ -1,80 +0,0 @@
-import React, { useMemo, useRef } from 'react';
-import Button from '@synerise/ds-button';
-import { theme } from '@synerise/ds-core';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { Add3M, FolderM, SearchM } from '@synerise/ds-icon';
-import Menu from '@synerise/ds-menu';
-import Result from '@synerise/ds-result';
-import { useOnClickOutside } from '@synerise/ds-utils';
-import { DropdownWrapper, MenuWrapper } from './DropdownOverlay.styles';
-var DropdownOverlay = function DropdownOverlay(_ref) {
-  var texts = _ref.texts,
-    onClearInput = _ref.onClearInput,
-    data = _ref.data,
-    onAddFolderClick = _ref.onAddFolderClick,
-    parentFolder = _ref.parentFolder,
-    onDropdownOutsideClick = _ref.onDropdownOutsideClick,
-    onSearchChange = _ref.onSearchChange,
-    searchValue = _ref.searchValue,
-    onFolderSelect = _ref.onFolderSelect,
-    foldersIdKey = _ref.foldersIdKey,
-    foldersFilterKey = _ref.foldersFilterKey,
-    foldersDisplayKey = _ref.foldersDisplayKey;
-  var ref = useRef(null);
-  var filteredData = data.filter(function (item) {
-    return typeof item[foldersFilterKey] === 'string' && item[foldersFilterKey].toLowerCase().includes(searchValue.toLowerCase());
-  });
-  useOnClickOutside(ref, function () {
-    onDropdownOutsideClick && onDropdownOutsideClick();
-  });
-  var menuDataSource = useMemo(function () {
-    return filteredData == null ? void 0 : filteredData.map(function (item) {
-      return {
-        key: item[foldersIdKey] + "-" + item.id,
-        onClick: function onClick() {
-          return onFolderSelect(item);
-        },
-        checked: parentFolder[foldersIdKey] === item[foldersIdKey],
-        prefixel: /*#__PURE__*/React.createElement(Icon, {
-          component: /*#__PURE__*/React.createElement(FolderM, null)
-        }),
-        highlight: searchValue,
-        text: item[foldersDisplayKey]
-      };
-    });
-  }, [filteredData, foldersDisplayKey, foldersIdKey, onFolderSelect, parentFolder, searchValue]);
-  return /*#__PURE__*/React.createElement(DropdownWrapper, {
-    ref: ref
-  }, /*#__PURE__*/React.createElement(Dropdown.SearchInput, {
-    onSearchChange: onSearchChange,
-    onClearInput: onClearInput,
-    placeholder: (texts == null ? void 0 : texts.search) || '',
-    value: searchValue,
-    iconLeft: /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SearchM, null),
-      color: theme.palette['grey-600']
-    }),
-    autofocus: true
-  }), /*#__PURE__*/React.createElement(MenuWrapper, {
-    withBottomAction: !!onAddFolderClick
-  }, (filteredData == null ? void 0 : filteredData.length) > 0 ? /*#__PURE__*/React.createElement(Menu, {
-    dataSource: menuDataSource
-  }) : /*#__PURE__*/React.createElement(Result, {
-    type: "no-results"
-  })), onAddFolderClick && /*#__PURE__*/React.createElement(Dropdown.BottomAction, {
-    onClickAction: function onClickAction() {
-      return onAddFolderClick(searchValue);
-    },
-    style: {
-      padding: '8px'
-    }
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "ghost",
-    mode: "icon-label"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(Add3M, null),
-    size: 24,
-    color: theme.palette['grey-500']
-  }), /*#__PURE__*/React.createElement("div", null, texts.addFolder))));
-};
-export default DropdownOverlay;

package/dist/Elements/DropdownOverlay/DropdownOverlay.styles.d.ts

@@ -1,4 +0,0 @@
-export declare const DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MenuWrapper: import("styled-components").StyledComponent<"div", any, {
-    withBottomAction: boolean;
-}, never>;

package/dist/Elements/DropdownOverlay/DropdownOverlay.styles.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-export var DropdownWrapper = styled.div.withConfig({
-  displayName: "DropdownOverlaystyles__DropdownWrapper",
-  componentId: "sc-7p7t3l-0"
-})(["background:", ";width:220px;border-radius:3px;"], function (props) {
-  return props.theme.palette.white;
-});
-export var MenuWrapper = styled.div.withConfig({
-  displayName: "DropdownOverlaystyles__MenuWrapper",
-  componentId: "sc-7p7t3l-1"
-})(["padding:8px;", ""], function (props) {
-  return props.withBottomAction && "padding-bottom: 0;";
-});

package/dist/Elements/DropdownOverlay/DropdownOverlay.types.d.ts

@@ -1,17 +0,0 @@
-import { type FolderItem } from '../../SidebarObject.types';
-import { type HeaderTexts } from '../Header/Header.types';
-import { type OverviewTexts } from '../Overview/Overview.types';
-export interface Props {
-    data: FolderItem[];
-    onAddFolderClick?: (folderName: string) => void;
-    onClearInput?: () => void;
-    parentFolder: FolderItem;
-    texts: OverviewTexts & HeaderTexts;
-    onDropdownOutsideClick: () => void;
-    onSearchChange: (value: string) => void;
-    searchValue: string;
-    onFolderSelect: (item: FolderItem) => void;
-    foldersFilterKey: keyof FolderItem;
-    foldersDisplayKey: keyof FolderItem;
-    foldersIdKey: keyof FolderItem;
-}

package/dist/Elements/DropdownOverlay/DropdownOverlay.types.js

@@ -1 +0,0 @@
-export {};