@synerise/ds-subject 1.1.22 → 1.1.24

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subject@1.1.23...@synerise/ds-subject@1.1.24) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-subject
+
+## [1.1.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subject@1.1.22...@synerise/ds-subject@1.1.23) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-subject
+
 ## [1.1.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subject@1.1.21...@synerise/ds-subject@1.1.22) (2026-03-09)
 
 **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';
+import { default as React } from 'react';
+import { SubjectProps } from './Subject.types';
 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,69 +1,42 @@
-import React, { useEffect } from 'react';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { ShowM } from '@synerise/ds-icon';
-import * as S from './Subject.style';
-import SubjectList from './SubjectList/SubjectList';
-import SubjectTrigger from './SubjectTrigger/SubjectTrigger';
-var Subject = function Subject(_ref) {
-  var selectedItem = _ref.selectedItem,
-    iconPlaceholder = _ref.iconPlaceholder,
-    items = _ref.items,
-    placeholder = _ref.placeholder,
-    onSelectItem = _ref.onSelectItem,
-    onShowPreview = _ref.onShowPreview,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'parameter' : _ref$type,
-    getPopupContainerOverride = _ref.getPopupContainerOverride,
-    onActivate = _ref.onActivate,
-    onDeactivate = _ref.onDeactivate,
-    texts = _ref.texts,
-    opened = _ref.opened;
-  var _React$useState = React.useState(false),
-    dropdownVisible = _React$useState[0],
-    setDropdownVisible = _React$useState[1];
-  var color = React.useMemo(function () {
-    return type && ['event', 'context'].indexOf(type) >= 0 ? 'cyan' : 'green';
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useEffect } from "react";
+import Dropdown from "@synerise/ds-dropdown";
+import Icon, { ShowM } from "@synerise/ds-icon";
+import { Subject as Subject$1, ShowPreviewButton } from "./Subject.style.js";
+import SubjectList from "./SubjectList/SubjectList.js";
+import SubjectTrigger from "./SubjectTrigger/SubjectTrigger.js";
+const Subject = ({
+  selectedItem,
+  iconPlaceholder,
+  items,
+  placeholder,
+  onSelectItem,
+  onShowPreview,
+  type = "parameter",
+  getPopupContainerOverride,
+  onActivate,
+  onDeactivate,
+  texts,
+  opened
+}) => {
+  const [dropdownVisible, setDropdownVisible] = React.useState(false);
+  const color = React.useMemo(() => {
+    return type && ["event", "context"].indexOf(type) >= 0 ? "cyan" : "green";
   }, [type]);
-  var onDropdownVisibilityChange = React.useCallback(function (value) {
-    value && onActivate && onActivate('');
+  const onDropdownVisibilityChange = React.useCallback((value) => {
+    value && onActivate && onActivate("");
     setDropdownVisible(value);
   }, [onActivate]);
-  useEffect(function () {
+  useEffect(() => {
     setDropdownVisible(Boolean(opened));
   }, [opened]);
-  return /*#__PURE__*/React.createElement(S.Subject, null, /*#__PURE__*/React.createElement(Dropdown, {
-    open: dropdownVisible,
-    getPopupContainer: getPopupContainerOverride,
-    onOpenChange: onDropdownVisibilityChange,
-    onDismiss: onDeactivate,
-    size: "medium",
-    asChild: true,
-    overlay: /*#__PURE__*/React.createElement(SubjectList, {
-      texts: texts,
-      items: items,
-      onSelectItem: onSelectItem,
-      hideDropdown: function hideDropdown() {
-        return setDropdownVisible(false);
-      }
-    }),
-    popoverProps: {
-      testId: 'subject'
-    }
-  }, /*#__PURE__*/React.createElement(SubjectTrigger, {
-    onClick: function onClick() {
-      return setDropdownVisible(true);
-    },
-    color: color,
-    iconPlaceholder: iconPlaceholder,
-    placeholder: placeholder,
-    selectedItem: selectedItem
-  })), onShowPreview && /*#__PURE__*/React.createElement(S.ShowPreviewButton, {
-    onClick: onShowPreview,
-    type: "custom-color",
-    mode: "single-icon",
-    color: color
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(ShowM, null)
-  })));
+  return /* @__PURE__ */ jsxs(Subject$1, { children: [
+    /* @__PURE__ */ jsx(Dropdown, { open: dropdownVisible, getPopupContainer: getPopupContainerOverride, onOpenChange: onDropdownVisibilityChange, onDismiss: onDeactivate, size: "medium", asChild: true, overlay: /* @__PURE__ */ jsx(SubjectList, { texts, items, onSelectItem, hideDropdown: () => setDropdownVisible(false) }), popoverProps: {
+      testId: "subject"
+    }, children: /* @__PURE__ */ jsx(SubjectTrigger, { onClick: () => setDropdownVisible(true), color, iconPlaceholder, placeholder, selectedItem }) }),
+    onShowPreview && /* @__PURE__ */ jsx(ShowPreviewButton, { onClick: onShowPreview, type: "custom-color", mode: "single-icon", color, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ShowM, {}) }) })
+  ] });
+};
+export {
+  Subject as default
 };
-export default Subject;

package/dist/Subject.style.d.ts

@@ -1,3 +1,3 @@
-import { type StyledButton } from '@synerise/ds-button';
+import { StyledButton } from '@synerise/ds-button';
 export declare const ShowPreviewButton: StyledButton;
-export declare const Subject: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Subject: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Subject.style.js

@@ -1,10 +1,14 @@
-import styled from 'styled-components';
-import Button from '@synerise/ds-button';
-export var ShowPreviewButton = styled(Button).withConfig({
+import styled from "styled-components";
+import Button from "@synerise/ds-button";
+const ShowPreviewButton = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "Subjectstyle__ShowPreviewButton",
   componentId: "sc-1y9zv0u-0"
 })([""]);
-export var Subject = styled.div.withConfig({
+const Subject = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Subjectstyle__Subject",
   componentId: "sc-1y9zv0u-1"
-})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;", "{margin-left:8px;}"], ShowPreviewButton);
+})(["display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;", "{margin-left:8px;}"], ShowPreviewButton);
+export {
+  ShowPreviewButton,
+  Subject
+};

package/dist/Subject.types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, ReactText } from 'react';
+import { ReactNode, ReactText } from 'react';
 export declare const ALL_TYPES: readonly ["event", "parameter", "context"];
 export type SubjectType = (typeof ALL_TYPES)[number] | string;
 export type SubjectItem = {

package/dist/Subject.types.js

@@ -1 +1,4 @@
-export var ALL_TYPES = ['event', 'parameter', 'context'];
+const ALL_TYPES = ["event", "parameter", "context"];
+export {
+  ALL_TYPES
+};

package/dist/SubjectList/SubjectList.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type SubjectListProps } from '../Subject.types';
+import { default as React } from 'react';
+import { SubjectListProps } from '../Subject.types';
 declare const SubjectList: React.FC<SubjectListProps>;
 export default SubjectList;

package/dist/SubjectList/SubjectList.js

@@ -1,74 +1,42 @@
-import React from 'react';
-import { v4 as uuid } from 'uuid';
-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 } from '@synerise/ds-utils';
-import * as S from './SubjectList.styles';
-import SubjectListItem from './SubjectListItem';
-var SubjectList = function SubjectList(_ref) {
-  var items = _ref.items,
-    onSelectItem = _ref.onSelectItem,
-    hideDropdown = _ref.hideDropdown,
-    texts = _ref.texts;
-  var _React$useState = React.useState(''),
-    searchQuery = _React$useState[0],
-    setSearchQuery = _React$useState[1];
-  var overlayRef = React.useRef(null);
-  var _React$useState2 = React.useState(true),
-    searchInputCanBeFocused = _React$useState2[0],
-    setSearchInputFocus = _React$useState2[1];
-  var classNames = React.useMemo(function () {
-    return "ds-subject-item ds-subject-item-" + uuid();
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { v4 } from "uuid";
+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 } from "@synerise/ds-utils";
+import { ItemsList } from "./SubjectList.styles.js";
+import SubjectListItem from "./SubjectListItem.js";
+const SubjectList = ({
+  items,
+  onSelectItem,
+  hideDropdown,
+  texts
+}) => {
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const overlayRef = React.useRef(null);
+  const [searchInputCanBeFocused, setSearchInputFocus] = React.useState(true);
+  const classNames = React.useMemo(() => {
+    return `ds-subject-item ds-subject-item-${v4()}`;
   }, []);
-  var renderItems = React.useMemo(function () {
-    return items.filter(function (item) {
-      return item.name.toLowerCase().includes(searchQuery.toLowerCase());
-    }).map(function (item) {
-      return /*#__PURE__*/React.createElement(SubjectListItem, {
-        className: classNames,
-        searchQuery: searchQuery,
-        key: item.name + "-" + item.id,
-        select: onSelectItem,
-        hideDropdown: hideDropdown,
-        clearSearch: function clearSearch() {
-          return setSearchQuery('');
-        },
-        item: item
-      });
+  const renderItems = React.useMemo(() => {
+    return items.filter((item) => item.name.toLowerCase().includes(searchQuery.toLowerCase())).map((item) => {
+      return /* @__PURE__ */ jsx(SubjectListItem, { className: classNames, searchQuery, select: onSelectItem, hideDropdown, clearSearch: () => setSearchQuery(""), item }, `${item.name}-${item.id}`);
     });
   }, [items, searchQuery, hideDropdown, onSelectItem, setSearchQuery, classNames]);
-  return /*#__PURE__*/React.createElement(Dropdown.Wrapper, {
-    ref: overlayRef,
-    "data-testid": "subject-overlay",
-    onKeyDown: function onKeyDown(e) {
-      setSearchInputFocus(false);
-      searchQuery && focusWithArrowKeys(e, classNames.split(' ')[1], function () {
-        setSearchInputFocus(true);
-      });
-    }
-  }, /*#__PURE__*/React.createElement(Dropdown.SearchInput, {
-    autofocus: !searchQuery || searchInputCanBeFocused,
-    iconLeft: /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SearchM, null)
-    }),
-    onSearchChange: setSearchQuery,
-    placeholder: texts.searchPlaceholder,
-    value: searchQuery,
-    onClearInput: function onClearInput() {
-      return setSearchQuery('');
-    }
-  }), /*#__PURE__*/React.createElement(S.ItemsList, null, /*#__PURE__*/React.createElement(Scrollbar, {
-    style: {
+  return /* @__PURE__ */ jsxs(Dropdown.Wrapper, { ref: overlayRef, "data-testid": "subject-overlay", onKeyDown: (e) => {
+    setSearchInputFocus(false);
+    searchQuery && focusWithArrowKeys(e, classNames.split(" ")[1], () => {
+      setSearchInputFocus(true);
+    });
+  }, children: [
+    /* @__PURE__ */ jsx(Dropdown.SearchInput, { autofocus: !searchQuery || searchInputCanBeFocused, iconLeft: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SearchM, {}) }), onSearchChange: setSearchQuery, placeholder: texts.searchPlaceholder, value: searchQuery, onClearInput: () => setSearchQuery("") }),
+    /* @__PURE__ */ jsx(ItemsList, { children: /* @__PURE__ */ jsx(Scrollbar, { style: {
       padding: 8
-    },
-    absolute: true,
-    maxHeight: 300
-  }, renderItems.length ? renderItems : /*#__PURE__*/React.createElement(Result, {
-    noSearchResults: true,
-    type: "no-results",
-    description: texts.noResults
-  }))));
+    }, absolute: true, maxHeight: 300, children: renderItems.length ? renderItems : /* @__PURE__ */ jsx(Result, { noSearchResults: true, type: "no-results", description: texts.noResults }) }) })
+  ] });
+};
+export {
+  SubjectList as default
 };
-export default SubjectList;

package/dist/SubjectList/SubjectList.styles.d.ts

@@ -1,3 +1,3 @@
-export declare const SearchResult: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const SearchResultHighlight: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const ItemsList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchResult: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const SearchResultHighlight: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const ItemsList: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/SubjectList/SubjectList.styles.js

@@ -1,17 +1,18 @@
-import styled from 'styled-components';
-export var SearchResult = styled.span.withConfig({
+import styled from "styled-components";
+const SearchResult = /* @__PURE__ */ styled.span.withConfig({
   displayName: "SubjectListstyles__SearchResult",
   componentId: "sc-1b94el7-0"
-})(["font-weight:400;color:", ";"], function (props) {
-  return props.theme.palette['grey-500'];
-});
-export var SearchResultHighlight = styled.span.withConfig({
+})(["font-weight:400;color:", ";"], (props) => props.theme.palette["grey-500"]);
+const SearchResultHighlight = /* @__PURE__ */ styled.span.withConfig({
   displayName: "SubjectListstyles__SearchResultHighlight",
   componentId: "sc-1b94el7-1"
-})(["font-weight:500;color:", ";"], function (props) {
-  return props.theme.palette['grey-700'];
-});
-export var ItemsList = styled.div.withConfig({
+})(["font-weight:500;color:", ";"], (props) => props.theme.palette["grey-700"]);
+const ItemsList = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SubjectListstyles__ItemsList",
   componentId: "sc-1b94el7-2"
-})(["width:100%;"]);
+})(["width:100%;"]);
+export {
+  ItemsList,
+  SearchResult,
+  SearchResultHighlight
+};

package/dist/SubjectList/SubjectListItem.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type SubjectItem } from '../Subject.types';
+import { default as React } from 'react';
+import { SubjectItem } from '../Subject.types';
 type Props = {
     item: SubjectItem;
     clearSearch: () => void;

package/dist/SubjectList/SubjectListItem.js

@@ -1,24 +1,20 @@
-import React from 'react';
-import Icon from '@synerise/ds-icon';
-import ListItem from '@synerise/ds-list-item';
-var SubjectListItem = function SubjectListItem(_ref) {
-  var item = _ref.item,
-    clearSearch = _ref.clearSearch,
-    searchQuery = _ref.searchQuery,
-    hideDropdown = _ref.hideDropdown,
-    select = _ref.select,
-    className = _ref.className;
-  return /*#__PURE__*/React.createElement(ListItem, {
-    className: className,
-    highlight: searchQuery,
-    onClick: function onClick() {
-      hideDropdown();
-      clearSearch();
-      select(item);
-    },
-    prefixel: /*#__PURE__*/React.createElement(Icon, {
-      component: item.icon
-    })
-  }, item.name);
+import { jsx } from "react/jsx-runtime";
+import Icon from "@synerise/ds-icon";
+import ListItem from "@synerise/ds-list-item";
+const SubjectListItem = ({
+  item,
+  clearSearch,
+  searchQuery,
+  hideDropdown,
+  select,
+  className
+}) => {
+  return /* @__PURE__ */ jsx(ListItem, { className, highlight: searchQuery, onClick: () => {
+    hideDropdown();
+    clearSearch();
+    select(item);
+  }, prefixel: /* @__PURE__ */ jsx(Icon, { component: item.icon }), children: item.name });
+};
+export {
+  SubjectListItem as default
 };
-export default SubjectListItem;

package/dist/SubjectTrigger/SubjectTrigger.d.ts

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

package/dist/SubjectTrigger/SubjectTrigger.js

@@ -1,29 +1,26 @@
-import React, { forwardRef, useMemo } from 'react';
-import Button from '@synerise/ds-button';
-import Icon, { AngleDownS } from '@synerise/ds-icon';
-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 = useMemo(function () {
-    return selectedItem !== undefined ? selectedItem.icon : iconPlaceholder;
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import Button from "@synerise/ds-button";
+import Icon, { AngleDownS } from "@synerise/ds-icon";
+const SubjectTrigger = forwardRef(({
+  iconPlaceholder,
+  placeholder,
+  selectedItem,
+  color,
+  onClick
+}, ref) => {
+  const icon = useMemo(() => {
+    return selectedItem !== void 0 ? selectedItem.icon : iconPlaceholder;
   }, [selectedItem, iconPlaceholder]);
-  var label = useMemo(function () {
-    return selectedItem !== undefined ? selectedItem.name : placeholder;
+  const label = useMemo(() => {
+    return selectedItem !== void 0 ? selectedItem.name : placeholder;
   }, [selectedItem, placeholder]);
-  return /*#__PURE__*/React.createElement(Button, {
-    ref: ref,
-    "data-testid": "subject-trigger",
-    type: "custom-color",
-    mode: "two-icons",
-    color: color,
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: icon
-  }), label, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(AngleDownS, null)
-  }));
+  return /* @__PURE__ */ jsxs(Button, { ref, "data-testid": "subject-trigger", type: "custom-color", mode: "two-icons", color, onClick, children: [
+    /* @__PURE__ */ jsx(Icon, { component: icon }),
+    label,
+    /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}) })
+  ] });
 });
-export default SubjectTrigger;
+export {
+  SubjectTrigger as default
+};

package/dist/index.js

@@ -1 +1,4 @@
-export { default } from './Subject';
+import { default as default2 } from "./Subject.js";
+export {
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-subject",
-  "version": "1.1.22",
+  "version": "1.1.24",
   "description": "Subject UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,13 +35,13 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.16",
-    "@synerise/ds-dropdown": "^1.3.0",
-    "@synerise/ds-icon": "^1.14.1",
-    "@synerise/ds-list-item": "^1.4.8",
-    "@synerise/ds-result": "^1.0.47",
-    "@synerise/ds-scrollbar": "^1.2.15",
-    "@synerise/ds-utils": "^1.6.0",
+    "@synerise/ds-button": "^1.5.18",
+    "@synerise/ds-dropdown": "^1.3.2",
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-list-item": "^1.4.10",
+    "@synerise/ds-result": "^1.0.49",
+    "@synerise/ds-scrollbar": "^1.2.17",
+    "@synerise/ds-utils": "^1.7.1",
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
@@ -49,5 +49,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }