@synerise/ds-subject 1.0.38 → 1.1.0

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.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subject@1.0.39...@synerise/ds-subject@1.1.0) (2025-11-06)
+
+
+### Features
+
+* **dropdown:** dropdownMenu component ([f0ec827](https://github.com/Synerise/synerise-design/commit/f0ec82792cdcb021fa9a454912f6e7a892e53895))
+
+
+
+
+
+## [1.0.39](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subject@1.0.38...@synerise/ds-subject@1.0.39) (2025-10-31)
+
+**Note:** Version bump only for package @synerise/ds-subject
+
+
+
+
+
 ## [1.0.38](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subject@1.0.37...@synerise/ds-subject@1.0.38) (2025-10-22)
 
 **Note:** Version bump only for package @synerise/ds-subject

package/dist/Subject.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type SubjectProps } from './Subject.types';
-declare const Subject: React.FC<SubjectProps>;
+declare const Subject: ({ selectedItem, iconPlaceholder, items, placeholder, onSelectItem, onShowPreview, type, getPopupContainerOverride, onActivate, onDeactivate, texts, opened, }: SubjectProps) => React.JSX.Element;
 export default Subject;

package/dist/Subject.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Dropdown from '@synerise/ds-dropdown';
 import Icon, { ShowM } from '@synerise/ds-icon';
 import * as S from './Subject.style';
@@ -26,15 +26,18 @@ var Subject = function Subject(_ref) {
   }, [type]);
   var onDropdownVisibilityChange = React.useCallback(function (value) {
     value && onActivate && onActivate('');
-    !value && onDeactivate && onDeactivate();
-  }, [onActivate, onDeactivate]);
-  React.useEffect(function () {
+    setDropdownVisible(value);
+  }, [onActivate]);
+  useEffect(function () {
     setDropdownVisible(Boolean(opened));
   }, [opened]);
   return /*#__PURE__*/React.createElement(S.Subject, null, /*#__PURE__*/React.createElement(Dropdown, {
-    visible: dropdownVisible,
+    open: dropdownVisible,
     getPopupContainer: getPopupContainerOverride,
-    onVisibleChange: onDropdownVisibilityChange,
+    onOpenChange: onDropdownVisibilityChange,
+    onDismiss: onDeactivate,
+    size: "medium",
+    asChild: true,
     overlay: /*#__PURE__*/React.createElement(SubjectList, {
       texts: texts,
       items: items,
@@ -42,7 +45,10 @@ var Subject = function Subject(_ref) {
       hideDropdown: function hideDropdown() {
         return setDropdownVisible(false);
       }
-    })
+    }),
+    popoverProps: {
+      testId: 'subject'
+    }
   }, /*#__PURE__*/React.createElement(SubjectTrigger, {
     onClick: function onClick() {
       return setDropdownVisible(true);

package/dist/Subject.style.d.ts

@@ -1,3 +1,29 @@
-import Button from '@synerise/ds-button';
-export declare const ShowPreviewButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
+export declare const ShowPreviewButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Partial<{
+    href: string;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "type" | "onClick"> & {
+    htmlType?: import("antd/lib/button/button").ButtonHTMLType;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+} & Omit<import("react").ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
+    type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
+    mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
+    color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
+    justifyContent?: string;
+    loading?: boolean | {
+        delay?: number;
+    };
+    onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
+    iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
+    error?: boolean;
+    readOnly?: boolean;
+    tagProps?: import("@synerise/ds-tag").TagProps;
+    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
+} & import("react").RefAttributes<HTMLButtonElement>> & {
+    Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
+    Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
+    Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
+}, any, {}, never>;
 export declare const Subject: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/SubjectList/SubjectList.js

@@ -4,7 +4,7 @@ import Dropdown from '@synerise/ds-dropdown';
 import Icon, { SearchM } from '@synerise/ds-icon';
 import Result from '@synerise/ds-result';
 import Scrollbar from '@synerise/ds-scrollbar';
-import { focusWithArrowKeys, useOnClickOutside } from '@synerise/ds-utils';
+import { focusWithArrowKeys } from '@synerise/ds-utils';
 import * as S from './SubjectList.styles';
 import SubjectListItem from './SubjectListItem';
 var SubjectList = function SubjectList(_ref) {
@@ -22,9 +22,6 @@ var SubjectList = function SubjectList(_ref) {
   var classNames = React.useMemo(function () {
     return "ds-subject-item ds-subject-item-" + uuid();
   }, []);
-  useOnClickOutside(overlayRef, function () {
-    hideDropdown();
-  });
   var renderItems = React.useMemo(function () {
     return items.filter(function (item) {
       return item.name.toLowerCase().includes(searchQuery.toLowerCase());
@@ -43,9 +40,6 @@ var SubjectList = function SubjectList(_ref) {
     });
   }, [items, searchQuery, hideDropdown, onSelectItem, setSearchQuery, classNames]);
   return /*#__PURE__*/React.createElement(Dropdown.Wrapper, {
-    style: {
-      width: '300px'
-    },
     ref: overlayRef,
     "data-testid": "subject-overlay",
     onKeyDown: function onKeyDown(e) {

package/dist/SubjectTrigger/SubjectTrigger.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
-import { type SubjectTriggerProps } from '../Subject.types';
-declare const SubjectTrigger: React.FC<SubjectTriggerProps>;
+declare const SubjectTrigger: React.ForwardRefExoticComponent<Pick<import("../Subject.types").SubjectProps, "placeholder" | "iconPlaceholder" | "selectedItem"> & {
+    color: string;
+    onClick: () => void;
+} & React.RefAttributes<HTMLButtonElement>>;
 export default SubjectTrigger;

package/dist/SubjectTrigger/SubjectTrigger.js

@@ -1,19 +1,20 @@
-import React from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import Button from '@synerise/ds-button';
 import Icon, { AngleDownS } from '@synerise/ds-icon';
-var SubjectTrigger = function SubjectTrigger(_ref) {
+var SubjectTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var iconPlaceholder = _ref.iconPlaceholder,
     placeholder = _ref.placeholder,
     selectedItem = _ref.selectedItem,
     color = _ref.color,
     onClick = _ref.onClick;
-  var icon = React.useMemo(function () {
+  var icon = useMemo(function () {
     return selectedItem !== undefined ? selectedItem.icon : iconPlaceholder;
   }, [selectedItem, iconPlaceholder]);
-  var label = React.useMemo(function () {
+  var label = useMemo(function () {
     return selectedItem !== undefined ? selectedItem.name : placeholder;
   }, [selectedItem, placeholder]);
   return /*#__PURE__*/React.createElement(Button, {
+    ref: ref,
     "data-testid": "subject-trigger",
     type: "custom-color",
     mode: "two-icons",
@@ -24,5 +25,5 @@ var SubjectTrigger = function SubjectTrigger(_ref) {
   }), label, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(AngleDownS, null)
   }));
-};
+});
 export default SubjectTrigger;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-subject",
-  "version": "1.0.38",
+  "version": "1.1.0",
   "description": "Subject UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,12 +35,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.4.16",
-    "@synerise/ds-dropdown": "^1.0.33",
-    "@synerise/ds-icon": "^1.7.3",
-    "@synerise/ds-list-item": "^1.1.0",
-    "@synerise/ds-result": "^1.0.29",
-    "@synerise/ds-scrollbar": "^1.1.9",
+    "@synerise/ds-button": "^1.5.0",
+    "@synerise/ds-dropdown": "^1.1.0",
+    "@synerise/ds-icon": "^1.8.0",
+    "@synerise/ds-list-item": "^1.2.0",
+    "@synerise/ds-result": "^1.0.30",
+    "@synerise/ds-scrollbar": "^1.2.0",
     "@synerise/ds-utils": "^1.5.0",
     "uuid": "^8.3.2"
   },
@@ -49,5 +49,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "a40fca2cc78eda64afa96d18dc4d177538a22404"
+  "gitHead": "cbbb7d9f155735bcc4035d8fd8a7813878d6e051"
 }