@synerise/ds-tags 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.2.0...@synerise/ds-tags@1.3.0) (2025-09-23)
+
+
+### Features
+
+* **tags:** add dropdownFooter and maxVisibleTags ([cfb0358](https://github.com/Synerise/synerise-design/commit/cfb035830ea4fd8ec5ba800985f1bea50194f25c))
+
+
+
+
+
 # [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.1.25...@synerise/ds-tags@1.2.0) (2025-09-19)
 
 

package/README.md

@@ -11,21 +11,23 @@ Tags UI Component
 
 ## Tags API (Group of <Tag />)
 
-| Property         | Description                                                         | Type                                                    | Default |
-|------------------|---------------------------------------------------------------------|---------------------------------------------------------|---------|
-| addable          | Allow adding tags from `data` (which are not present in `selected`) | boolean                                                 | -       |
-| className        | Tag Group container class                                           | string                                                  | -       |
-| creatable        | Allow creating new tags                                             | boolean                                                 | -       |
-| data             | All available tags                                                  | (Tag & {informationCardProps?: InformationCardProps})[] | []      |
-| disabled         | Disable entire group (all tags)                                     | boolean                                                 | -       |
-| manageLink       | optional link visible in add tag dropdown                           | string                                                  | -       |
-| onCreate         | fired whenever a new tag has been created                           | (tagName: string) => void                               | -       |
-| onSelectedChange | fired whenever the list of selected tags changes                    | (tags: Tag[], actionTaken: ActionTaken) => void         | -       |
-| removable        | Allow removing tags from `selected`                                 | boolean                                                 | -       |
-| style            | Tag Group container styles                                          | React.CSSProperties                                     | -       |
-| selected         | Selected tags                                                       | (Tag & {informationCardProps?: InformationCardProps})[] | []      |
-| tagShape         | Shape of tags                                                       | TagShape                                                | -       |
-| texts            | necessary texts to render tags group                                | TagsTexts                                               | {}      |
+| Property         | Description                                                                                                             | Type                                                    | Default |
+|------------------|-------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------|---------|
+| addable          | Allow adding tags from `data` (which are not present in `selected`)                                                     | boolean                                                 | -       |
+| className        | Tag Group container class                                                                                               | string                                                  | -       |
+| creatable        | Allow creating new tags                                                                                                 | boolean                                                 | -       |
+| data             | All available tags                                                                                                      | (Tag & {informationCardProps?: InformationCardProps})[] | []      |
+| disabled         | Disable entire group (all tags)                                                                                         | boolean                                                 | -       |
+| onCreate         | fired whenever a new tag has been created                                                                               | (tagName: string) => void                               | -       |
+| onSelectedChange | fired whenever the list of selected tags changes                                                                        | (tags: Tag[], actionTaken: ActionTaken) => void         | -       |
+| removable        | Allow removing tags from `selected`                                                                                     | boolean                                                 | -       |
+| style            | Tag Group container styles                                                                                              | React.CSSProperties                                     | -       |
+| selected         | Selected tags                                                                                                           | (Tag & {informationCardProps?: InformationCardProps})[] | []      |
+| tagShape         | Shape of tags                                                                                                           | TagShape                                                | -       |
+| texts            | necessary texts to render tags group                                                                                    | TagsTexts                                               | {}      |
+| dropdownFooter   | Allows adding custom content to the footer of the dropdown                                                              | ReactNode                                               | -       |
+| maxVisibleTags   | Defines the max number of selected tags that are visible by default. Additional selected tags will appear in a dropdown | number                                                  | -       |
+
 ## ActionTaken
 
 | Property | Description                                                    | Type             |

package/dist/Tags.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { TagsProps } from './Tags.types';
-declare const Tags: ({ data, tagShape, onSelectedChange, disabled, removable, addable, creatable, texts, selected, style, className, manageLink, onCreate, title, maxHeight, overlayStyle, overlayPlacement, asPill, onManageTagClick, }: TagsProps) => React.JSX.Element;
+declare const Tags: ({ data, tagShape, onSelectedChange, disabled, removable, addable, creatable, texts, selected, style, className, onCreate, title, maxHeight, overlayStyle, overlayPlacement, asPill, dropdownFooter, maxVisibleTags, }: TagsProps) => React.JSX.Element;
 export default Tags;

package/dist/Tags.js

@@ -1,13 +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 from 'react';
-import Button from '@synerise/ds-button';
-import { useTheme } from '@synerise/ds-core';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { Add3M, SearchM, SettingsM } from '@synerise/ds-icon';
 import InformationCard from '@synerise/ds-information-card';
-import Result from '@synerise/ds-result';
 import Tag from '@synerise/ds-tag';
 import * as S from './Tags.styles';
+import { AddTags } from './components/AddTags/AddTags';
+import { LimitedTags } from './components/LimitedTags/LimitedTags';
 var Tags = function Tags(_ref) {
   var _ref$data = _ref.data,
     data = _ref$data === void 0 ? [] : _ref$data,
@@ -23,21 +20,17 @@ var Tags = function Tags(_ref) {
     selected = _ref$selected === void 0 ? [] : _ref$selected,
     style = _ref.style,
     className = _ref.className,
-    manageLink = _ref.manageLink,
     onCreate = _ref.onCreate,
     title = _ref.title,
     maxHeight = _ref.maxHeight,
     overlayStyle = _ref.overlayStyle,
     overlayPlacement = _ref.overlayPlacement,
     asPill = _ref.asPill,
-    onManageTagClick = _ref.onManageTagClick;
-  var _React$useState = React.useState(false),
-    isAdding = _React$useState[0],
-    setAddingState = _React$useState[1];
-  var _React$useState2 = React.useState(''),
-    searchQuery = _React$useState2[0],
-    setSearchQuery = _React$useState2[1];
-  var theme = useTheme();
+    dropdownFooter = _ref.dropdownFooter,
+    maxVisibleTags = _ref.maxVisibleTags;
+  var isMaxVisibleTagsDefined = typeof maxVisibleTags === 'number';
+  var visibleSelectedTags = isMaxVisibleTagsDefined ? selected.slice(0, maxVisibleTags) : selected;
+  var areLimitedTags = isMaxVisibleTagsDefined && selected.length > maxVisibleTags;
   var onRemove = function onRemove(tagKey) {
     if (!onSelectedChange || !selected) {
       return;
@@ -55,114 +48,13 @@ var Tags = function Tags(_ref) {
       tag: removedTag
     });
   };
-  var notSelectedList = data && selected && data.filter(function (t) {
-    return !selected.find(function (s) {
-      return s.id === t.id;
-    });
-  });
-  var selectablePool = !searchQuery ? notSelectedList : notSelectedList && notSelectedList.filter(function (t) {
-    return t.name && t.name.toLowerCase().includes(searchQuery.toLowerCase());
-  });
-  var isExactMatchFound = searchQuery && selectablePool && selectablePool.find(function (t) {
-    return t.name === searchQuery;
-  });
-  var emptyPool = selectablePool && selectablePool.length === 0;
-  var isCreatable = creatable && !isExactMatchFound && searchQuery;
-  var isSeperated = !(!manageLink && emptyPool);
-  var reset = function reset() {
-    setAddingState(false);
-    setSearchQuery('');
-  };
-  var onPoolTagSelect = function onPoolTagSelect(tag) {
-    onSelectedChange && selected && onSelectedChange([].concat(selected, [tag]), {
-      type: 'ADD',
-      tag: tag
-    });
-    reset();
-  };
-  var onCreateNewTag = function onCreateNewTag() {
-    onCreate && onCreate(searchQuery);
-    reset();
-  };
-  var dropdownOverlay = /*#__PURE__*/React.createElement(S.Overlay, {
-    "data-testid": "dropdown"
-  }, /*#__PURE__*/React.createElement(S.DropdownSearch, {
-    value: searchQuery,
-    onSearchChange: setSearchQuery,
-    placeholder: texts && texts.searchPlaceholder || '',
-    iconLeft: /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(SearchM, null),
-      color: theme.palette['grey-600']
-    }),
-    onClearInput: function onClearInput() {
-      return setSearchQuery('');
-    },
-    clearTooltip: texts && texts.clearTooltip
-  }), /*#__PURE__*/React.createElement(S.DropdownContainer, {
-    maxHeight: maxHeight,
-    style: {
-      padding: '12px'
-    }
-  }, isCreatable && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.CreateTagDropdownButton, {
-    "data-testid": "ds-tags-create-button",
-    type: "ghost",
-    onClick: onCreateNewTag,
-    marginless: !isSeperated
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(Add3M, null),
-    size: 24,
-    color: theme.palette['grey-500']
-  }), /*#__PURE__*/React.createElement("span", null, texts && texts.createTagButtonLabel), /*#__PURE__*/React.createElement("strong", null, searchQuery)), isSeperated && /*#__PURE__*/React.createElement(S.Seperator, null)), !emptyPool && /*#__PURE__*/React.createElement(S.DropdownTagsContainer, {
-    "data-testid": "ds-tags-available-tags",
-    isCreatable: !!isCreatable
-  }, selectablePool && selectablePool.map(function (tag) {
-    return /*#__PURE__*/React.createElement(Tag, _extends({}, tag, {
-      key: tag.id,
-      shape: tagShape,
-      onClick: function onClick() {
-        return onPoolTagSelect(tag);
-      },
-      texts: texts,
-      tooltipProps: tag.informationCardProps ? _extends({
-        render: function render() {
-          return /*#__PURE__*/React.createElement(InformationCard, _extends({
-            title: tag.name
-          }, tag.informationCardProps, {
-            asTooltip: true
-          }));
-        },
-        placement: 'bottomLeft'
-      }, tag.tooltipProps) : undefined
-    }));
-  })), emptyPool && !isCreatable && !manageLink && /*#__PURE__*/React.createElement(S.DropdownNoTags, null, texts && texts.dropdownNoTags), emptyPool && isCreatable && /*#__PURE__*/React.createElement(Result, {
-    type: "no-results",
-    noSearchResults: true,
-    description: (texts == null ? void 0 : texts.noResultsLabel) || 'No results'
-  })), manageLink && selectablePool && !selectablePool.length && /*#__PURE__*/React.createElement(Dropdown.BottomAction, {
-    onClickAction: function onClickAction() {
-      onManageTagClick && onManageTagClick();
-    },
-    style: {
-      padding: '0 8px',
-      cursor: 'auto'
-    }
-  }, /*#__PURE__*/React.createElement(S.ManageLinkButton, {
-    type: "ghost",
-    mode: "icon-label",
-    href: manageLink,
-    onlyChild: !!(emptyPool && !isCreatable)
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(SettingsM, null),
-    size: 20,
-    color: theme.palette['grey-500']
-  }), ' ', texts && texts.manageLinkLabel)));
   return /*#__PURE__*/React.createElement(S.Container, {
     className: "ds-tags " + (className || ''),
     style: style,
     "data-testid": "tags"
   }, title && /*#__PURE__*/React.createElement(S.Title, {
     shape: tagShape
-  }, title), /*#__PURE__*/React.createElement(S.TagsWrapper, null, /*#__PURE__*/React.createElement(S.SelectedTags, null, selected && selected.map(function (tag) {
+  }, title), /*#__PURE__*/React.createElement(S.TagsWrapper, null, /*#__PURE__*/React.createElement(S.SelectedTags, null, visibleSelectedTags && visibleSelectedTags.map(function (tag) {
     return /*#__PURE__*/React.createElement(S.TagOverflow, null, /*#__PURE__*/React.createElement(Tag, _extends({
       key: tag.id,
       shape: tagShape,
@@ -183,20 +75,26 @@ var Tags = function Tags(_ref) {
         placement: 'bottomLeft'
       }, tag.tooltipProps) : undefined
     })));
-  }), addable && /*#__PURE__*/React.createElement(Dropdown, {
-    trigger: ['click'],
-    placement: overlayPlacement,
-    visible: isAdding,
-    onVisibleChange: setAddingState,
-    overlay: dropdownOverlay,
-    overlayStyle: overlayStyle
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "ghost",
-    mode: texts != null && texts.addButtonLabel ? 'icon-label' : 'single-icon'
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(Add3M, null),
-    size: 24,
-    color: theme.palette['grey-500']
-  }), texts && texts.addButtonLabel)))));
+  }), areLimitedTags && /*#__PURE__*/React.createElement(LimitedTags, {
+    selected: selected,
+    maxVisibleTags: maxVisibleTags,
+    tagShape: tagShape,
+    removable: removable,
+    onRemove: removable ? onRemove : undefined,
+    disabled: disabled,
+    asPill: asPill
+  }), addable && /*#__PURE__*/React.createElement(AddTags, {
+    data: data,
+    selected: selected,
+    creatable: creatable,
+    overlayPlacement: overlayPlacement,
+    overlayStyle: overlayStyle,
+    texts: texts,
+    tagShape: tagShape,
+    maxHeight: maxHeight,
+    dropdownFooter: dropdownFooter,
+    onSelectedChange: onSelectedChange,
+    onCreate: onCreate
+  }))));
 };
 export default Tags;

package/dist/Tags.styles.d.ts

@@ -1,5 +1,3 @@
-import Button from '@synerise/ds-button';
-import { type ScrollbarProps } from '@synerise/ds-scrollbar/dist/Scrollbar.types';
 import { type TagShape } from '@synerise/ds-tag';
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TagOverflow: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -8,17 +6,3 @@ export declare const Title: import("styled-components").StyledComponent<"div", a
     shape?: TagShape;
 }, never>;
 export declare const SelectedTags: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CreateTagDropdownButton: import("styled-components").StyledComponent<typeof Button, any, {
-    marginless: boolean;
-}, never>;
-export declare const ManageLinkButton: import("styled-components").StyledComponent<typeof Button, any, {
-    onlyChild: boolean;
-}, never>;
-export declare const Seperator: import("styled-components").StyledComponent<"hr", any, {}, never>;
-export declare const DropdownContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(ScrollbarProps | import("@synerise/ds-scrollbar").VirtualScrollbarProps) & import("react").RefAttributes<HTMLElement>>, any, ScrollbarProps, never>;
-export declare const DropdownTagsContainer: import("styled-components").StyledComponent<"div", any, {
-    isCreatable: boolean;
-}, never>;
-export declare const DropdownSearch: import("styled-components").StyledComponent<({ value, className, onSearchChange, onClearInput, placeholder, iconLeft, autofocus, clearTooltip, disabled, borderRadius, handleInputRef, autofocusDelay, clearTooltipProps, valuePrefix, ...htmlAttributes }: import("@synerise/ds-search-bar/").SearchBarProps) => React.JSX.Element, any, {}, never>;
-export declare const DropdownNoTags: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Tags.styles.js

@@ -1,8 +1,4 @@
 import styled from 'styled-components';
-import Button from '@synerise/ds-button';
-import { ButtonLabel } from '@synerise/ds-button/dist/Button.styles';
-import Scrollbar from '@synerise/ds-scrollbar';
-import SearchBar from '@synerise/ds-search-bar/';
 export var Container = styled.div.withConfig({
   displayName: "Tagsstyles__Container",
   componentId: "sc-156lf0a-0"
@@ -24,44 +20,4 @@ export var Title = styled.div.withConfig({
 export var SelectedTags = styled.div.withConfig({
   displayName: "Tagsstyles__SelectedTags",
   componentId: "sc-156lf0a-4"
-})(["display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;&& .ds-tag{margin:4px;}"]);
-export var CreateTagDropdownButton = styled(Button).withConfig({
-  displayName: "Tagsstyles__CreateTagDropdownButton",
-  componentId: "sc-156lf0a-5"
-})(["margin:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;position:absolute;", "{justify-content:flex-start;}&&{font-weight:400;text-align:left;width:100%;justify-content:flex-start;}strong{font-weight:500;margin:0 0 0 3px;display:block;overflow:hidden;text-overflow:ellipsis;}"], function (props) {
-  return props.marginless ? '0' : '0 0 8px';
-}, ButtonLabel);
-export var ManageLinkButton = styled(Button).withConfig({
-  displayName: "Tagsstyles__ManageLinkButton",
-  componentId: "sc-156lf0a-6"
-})(["margin:8px 0px;"]);
-export var Seperator = styled.hr.withConfig({
-  displayName: "Tagsstyles__Seperator",
-  componentId: "sc-156lf0a-7"
-})(["width:auto;margin:0;padding:0;border:0;height:1px;background-image:linear-gradient( to right,", " 33%,rgba(255,255,255,0) 0% );background-repeat:repeat-x;background-size:4px 1px;background-position:top;"], function (props) {
-  return props.theme.palette['grey-300'];
-});
-export var DropdownContainer = styled(Scrollbar).withConfig({
-  displayName: "Tagsstyles__DropdownContainer",
-  componentId: "sc-156lf0a-8"
-})(["display:flex;flex-direction:column;"]);
-export var DropdownTagsContainer = styled.div.withConfig({
-  displayName: "Tagsstyles__DropdownTagsContainer",
-  componentId: "sc-156lf0a-9"
-})(["display:flex;flex-direction:column;padding:", ";max-height:320px;> *{width:fit-content;max-width:fit-content;display:block;width:inherit;cursor:pointer;flex-shrink:0;}"], function (props) {
-  return props.isCreatable ? '8px 0 0' : '0';
-});
-export var DropdownSearch = styled(SearchBar).withConfig({
-  displayName: "Tagsstyles__DropdownSearch",
-  componentId: "sc-156lf0a-10"
-})(["&&{margin:0 !important;}"]);
-export var DropdownNoTags = styled.div.withConfig({
-  displayName: "Tagsstyles__DropdownNoTags",
-  componentId: "sc-156lf0a-11"
-})(["padding:8px 20px;"]);
-export var Overlay = styled.div.withConfig({
-  displayName: "Tagsstyles__Overlay",
-  componentId: "sc-156lf0a-12"
-})(["width:216px;background-color:", ";"], function (props) {
-  return props.theme.palette.white;
-});
+})(["display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;&& .ds-tag{margin:4px;}"]);

package/dist/Tags.types.d.ts

@@ -5,13 +5,12 @@ export type ActionTaken = {
     type: 'ADD' | 'REMOVE';
     tag: TagProps;
 };
+export type ExtendedTagProps = TagProps & {
+    informationCardProps?: InformationCardProps;
+};
 export type TagsProps = {
-    data?: Array<TagProps & {
-        informationCardProps?: InformationCardProps;
-    }>;
-    selected?: Array<TagProps & {
-        informationCardProps?: InformationCardProps;
-    }>;
+    data?: ExtendedTagProps[];
+    selected?: ExtendedTagProps[];
     tagShape?: TagShape;
     className?: string;
     style?: CSSProperties;
@@ -20,7 +19,6 @@ export type TagsProps = {
     removable?: boolean;
     creatable?: boolean;
     disabled?: boolean;
-    manageLink?: string;
     texts?: TagTexts;
     /**
      * @deprecated deprecated in favour of useTheme hook
@@ -34,7 +32,8 @@ export type TagsProps = {
     maxHeight?: number;
     overlayPlacement?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
     asPill?: boolean;
-    onManageTagClick?: () => void;
+    dropdownFooter?: ReactNode;
+    maxVisibleTags?: number;
 };
 /**
  *  @deprecated - use TagsProps instead

package/dist/components/AddTags/AddTags.d.ts

@@ -0,0 +1,19 @@
+import React, { type ReactNode } from 'react';
+import { type DropdownProps } from '@synerise/ds-dropdown';
+import { type TagProps, type TagShape, type TagTexts } from '@synerise/ds-tag';
+import { type ActionTaken } from '../../Tags.types';
+type AddTagsProps = {
+    creatable?: boolean;
+    data?: TagProps[];
+    selected: TagProps[];
+    overlayPlacement: DropdownProps['placement'];
+    overlayStyle: DropdownProps['overlayStyle'];
+    texts?: TagTexts;
+    maxHeight?: number;
+    dropdownFooter?: ReactNode;
+    tagShape?: TagShape;
+    onSelectedChange?: (tags: Array<TagProps>, action: ActionTaken) => void;
+    onCreate?: (name: string) => void;
+};
+export declare const AddTags: ({ creatable, data, selected, overlayPlacement, overlayStyle, texts, tagShape, maxHeight, dropdownFooter, onSelectedChange, onCreate, }: AddTagsProps) => React.JSX.Element;
+export {};

package/dist/components/AddTags/AddTags.js

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import Button from '@synerise/ds-button';
+import { useTheme } from '@synerise/ds-core';
+import Icon, { Add3M, SearchM } from '@synerise/ds-icon';
+import Result from '@synerise/ds-result';
+import SearchBar from '@synerise/ds-search-bar';
+import { TagsDropdown } from '../TagsDropdown/TagsDropdown';
+import * as S from './AddTags.styles';
+export var AddTags = function AddTags(_ref) {
+  var creatable = _ref.creatable,
+    data = _ref.data,
+    selected = _ref.selected,
+    overlayPlacement = _ref.overlayPlacement,
+    overlayStyle = _ref.overlayStyle,
+    texts = _ref.texts,
+    tagShape = _ref.tagShape,
+    maxHeight = _ref.maxHeight,
+    dropdownFooter = _ref.dropdownFooter,
+    onSelectedChange = _ref.onSelectedChange,
+    onCreate = _ref.onCreate;
+  var theme = useTheme();
+  var _useState = useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var _useState2 = useState(false),
+    isTagAddDropdownOpen = _useState2[0],
+    setIsTagAddDropdownOpen = _useState2[1];
+  var reset = function reset() {
+    setIsTagAddDropdownOpen(false);
+    setSearchQuery('');
+  };
+  var onPoolTagSelect = function onPoolTagSelect(tag) {
+    onSelectedChange && selected && onSelectedChange([].concat(selected, [tag]), {
+      type: 'ADD',
+      tag: tag
+    });
+    reset();
+  };
+  var onCreateNewTag = function onCreateNewTag() {
+    onCreate && onCreate(searchQuery);
+    reset();
+  };
+  var notSelectedList = data && selected && data.filter(function (t) {
+    return !selected.find(function (s) {
+      return s.id === t.id;
+    });
+  });
+  var selectablePool = !searchQuery ? notSelectedList : notSelectedList && notSelectedList.filter(function (t) {
+    return t.name && t.name.toLowerCase().includes(searchQuery.toLowerCase());
+  });
+  var isExactMatchFound = searchQuery && selectablePool && selectablePool.find(function (t) {
+    return t.name === searchQuery;
+  });
+  var emptyPool = selectablePool && selectablePool.length === 0;
+  var isCreatable = creatable && !isExactMatchFound && searchQuery;
+  var isSeparated = !emptyPool;
+  var noTagsContentLabel = !!(notSelectedList != null && notSelectedList.length) && !!searchQuery ? texts == null ? void 0 : texts.noResultsLabel : texts == null ? void 0 : texts.dropdownNoTags;
+  return /*#__PURE__*/React.createElement(TagsDropdown, {
+    tags: selectablePool,
+    trigger: ['click'],
+    maxHeight: maxHeight,
+    placement: overlayPlacement,
+    open: isTagAddDropdownOpen,
+    onOpenChange: setIsTagAddDropdownOpen,
+    overlayStyle: overlayStyle,
+    tagShape: tagShape,
+    onTagClick: onPoolTagSelect,
+    dropdownFooter: dropdownFooter,
+    aboveTagsContent: isCreatable && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.CreateTagDropdownButton, {
+      "data-testid": "ds-tags-create-button",
+      type: "ghost",
+      mode: "icon-label",
+      onClick: onCreateNewTag,
+      marginless: !isSeparated
+    }, /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(Add3M, null),
+      size: 24,
+      color: theme.palette['grey-500']
+    }), /*#__PURE__*/React.createElement("span", null, texts && texts.createTagButtonLabel), /*#__PURE__*/React.createElement("strong", null, searchQuery)), isSeparated && /*#__PURE__*/React.createElement(S.Separator, null)),
+    noTagsContent: /*#__PURE__*/React.createElement(Result, {
+      type: "no-results",
+      description: noTagsContentLabel || 'No results'
+    }),
+    dropdownHeader: /*#__PURE__*/React.createElement(SearchBar, {
+      value: searchQuery,
+      onSearchChange: setSearchQuery,
+      placeholder: texts && texts.searchPlaceholder || '',
+      iconLeft: /*#__PURE__*/React.createElement(Icon, {
+        component: /*#__PURE__*/React.createElement(SearchM, null),
+        color: theme.palette['grey-600']
+      }),
+      onClearInput: function onClearInput() {
+        return setSearchQuery('');
+      },
+      clearTooltip: texts && texts.clearTooltip
+    })
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "ghost",
+    mode: texts != null && texts.addButtonLabel ? 'icon-label' : 'single-icon'
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(Add3M, null),
+    size: 24,
+    color: theme.palette['grey-500']
+  }), texts && texts.addButtonLabel));
+};

package/dist/components/AddTags/AddTags.styles.d.ts

@@ -0,0 +1,5 @@
+import Button from '@synerise/ds-button';
+export declare const CreateTagDropdownButton: import("styled-components").StyledComponent<typeof Button, any, {
+    marginless: boolean;
+}, never>;
+export declare const Separator: import("styled-components").StyledComponent<"hr", any, {}, never>;

package/dist/components/AddTags/AddTags.styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import Button from '@synerise/ds-button';
+import { ButtonLabel } from '@synerise/ds-button/dist/Button.styles';
+export var CreateTagDropdownButton = styled(Button).withConfig({
+  displayName: "AddTagsstyles__CreateTagDropdownButton",
+  componentId: "sc-1wg5ubr-0"
+})(["margin:", ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;position:absolute;", "{justify-content:flex-start;}&&{font-weight:400;text-align:left;width:100%;justify-content:flex-start;}strong{font-weight:500;margin:0 0 0 3px;display:block;overflow:hidden;text-overflow:ellipsis;}"], function (props) {
+  return props.marginless ? '0' : '0 0 8px';
+}, ButtonLabel);
+export var Separator = styled.hr.withConfig({
+  displayName: "AddTagsstyles__Separator",
+  componentId: "sc-1wg5ubr-1"
+})(["width:auto;margin:0;padding:0;padding-bottom:8px;border:0;height:1px;background-image:linear-gradient( to right,", " 33%,rgba(255,255,255,0) 0% );background-repeat:repeat-x;background-size:4px 1px;background-position:top;"], function (props) {
+  return props.theme.palette['grey-300'];
+});

package/dist/components/LimitedTags/LimitedTags.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type TagProps, type TagShape } from '@synerise/ds-tag';
+type LimitedTagsProps = {
+    selected: TagProps[];
+    tagShape?: TagShape;
+    maxVisibleTags?: number;
+    removable?: boolean;
+    disabled?: boolean;
+    asPill?: boolean;
+    onRemove?: (tagKey: string | number) => void;
+};
+export declare const LimitedTags: ({ tagShape, selected, maxVisibleTags, asPill, removable, disabled, onRemove, }: LimitedTagsProps) => React.JSX.Element;
+export {};

package/dist/components/LimitedTags/LimitedTags.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Tag from '@synerise/ds-tag';
+import { TagsDropdown } from '../TagsDropdown/TagsDropdown';
+export var LimitedTags = function LimitedTags(_ref) {
+  var tagShape = _ref.tagShape,
+    selected = _ref.selected,
+    maxVisibleTags = _ref.maxVisibleTags,
+    asPill = _ref.asPill,
+    removable = _ref.removable,
+    disabled = _ref.disabled,
+    onRemove = _ref.onRemove;
+  var limitedSelectedTags = selected.slice(maxVisibleTags);
+  return /*#__PURE__*/React.createElement(TagsDropdown, {
+    tags: limitedSelectedTags,
+    trigger: ['hover'],
+    tagShape: tagShape,
+    removable: removable,
+    onRemove: removable ? onRemove : undefined,
+    disabled: disabled,
+    asPill: asPill
+  }, /*#__PURE__*/React.createElement(Tag, {
+    id: "limited-tags",
+    shape: tagShape,
+    name: "+" + limitedSelectedTags.length,
+    asPill: true
+  }));
+};

package/dist/components/TagsDropdown/TagsDropdown.d.ts

@@ -0,0 +1,21 @@
+import React, { type ReactNode } from 'react';
+import { type DropdownProps } from '@synerise/ds-dropdown';
+import { type TagProps, type TagShape, type TagTexts } from '@synerise/ds-tag';
+import { type ExtendedTagProps } from '../../Tags.types';
+type TagDropdownProps = {
+    tags?: ExtendedTagProps[];
+    texts?: TagTexts;
+    removable?: boolean;
+    disabled?: boolean;
+    asPill?: boolean;
+    tagShape?: TagShape;
+    dropdownFooter?: ReactNode;
+    noTagsContent?: ReactNode;
+    aboveTagsContent?: ReactNode;
+    dropdownHeader?: ReactNode;
+    maxHeight?: number;
+    onRemove?: (tagKey: string | number) => void;
+    onTagClick?: (tag: TagProps) => void;
+} & DropdownProps;
+export declare const TagsDropdown: ({ tags, tagShape, texts, removable, disabled, onRemove, asPill, dropdownFooter, noTagsContent, dropdownHeader, aboveTagsContent, maxHeight, onTagClick, ...dropdownProps }: TagDropdownProps) => React.JSX.Element;
+export {};

package/dist/components/TagsDropdown/TagsDropdown.js

@@ -0,0 +1,70 @@
+var _excluded = ["tags", "tagShape", "texts", "removable", "disabled", "onRemove", "asPill", "dropdownFooter", "noTagsContent", "dropdownHeader", "aboveTagsContent", "maxHeight", "onTagClick"];
+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); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import Dropdown from '@synerise/ds-dropdown';
+import InformationCard from '@synerise/ds-information-card';
+import Tag from '@synerise/ds-tag';
+import { NOOP } from '@synerise/ds-utils';
+import * as S from './TagsDropdown.styles';
+var DROPDOWN_BOTTOM_ACTION_STYLES = {
+  padding: '0 8px',
+  cursor: 'auto'
+};
+var DROPDOWN_CONTAINER_STYLES = {
+  padding: '8px'
+};
+export var TagsDropdown = function TagsDropdown(_ref) {
+  var tags = _ref.tags,
+    tagShape = _ref.tagShape,
+    texts = _ref.texts,
+    removable = _ref.removable,
+    disabled = _ref.disabled,
+    onRemove = _ref.onRemove,
+    asPill = _ref.asPill,
+    dropdownFooter = _ref.dropdownFooter,
+    noTagsContent = _ref.noTagsContent,
+    dropdownHeader = _ref.dropdownHeader,
+    aboveTagsContent = _ref.aboveTagsContent,
+    maxHeight = _ref.maxHeight,
+    onTagClick = _ref.onTagClick,
+    dropdownProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var areTags = !!(tags != null && tags.length);
+  return /*#__PURE__*/React.createElement(Dropdown, _extends({}, dropdownProps, {
+    overlay: /*#__PURE__*/React.createElement(S.Overlay, {
+      "data-testid": "ds-tags-dropdown-overlay"
+    }, dropdownHeader, /*#__PURE__*/React.createElement(S.DropdownContainer, {
+      absolute: true,
+      maxHeight: maxHeight,
+      style: DROPDOWN_CONTAINER_STYLES
+    }, aboveTagsContent, areTags ? /*#__PURE__*/React.createElement(S.DropdownTagsContainer, {
+      "data-testid": "ds-tags-available-tags"
+    }, tags.map(function (tag) {
+      return /*#__PURE__*/React.createElement(Tag, _extends({}, tag, {
+        key: tag.id,
+        shape: tagShape,
+        removable: removable,
+        onRemove: removable ? onRemove : undefined,
+        disabled: disabled,
+        asPill: asPill,
+        onClick: function onClick() {
+          return onTagClick == null ? void 0 : onTagClick(tag);
+        },
+        texts: texts,
+        tooltipProps: tag.informationCardProps ? _extends({
+          render: function render() {
+            return /*#__PURE__*/React.createElement(InformationCard, _extends({
+              title: tag.name
+            }, tag.informationCardProps, {
+              asTooltip: true
+            }));
+          },
+          placement: 'right'
+        }, tag.tooltipProps) : undefined
+      }));
+    })) : noTagsContent), dropdownFooter && /*#__PURE__*/React.createElement(Dropdown.BottomAction, {
+      onClickAction: NOOP,
+      style: DROPDOWN_BOTTOM_ACTION_STYLES
+    }, dropdownFooter))
+  }));
+};

package/dist/components/TagsDropdown/TagsDropdown.styles.d.ts

@@ -0,0 +1,4 @@
+import { type ScrollbarProps } from '@synerise/ds-scrollbar';
+export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(ScrollbarProps | import("@synerise/ds-scrollbar").VirtualScrollbarProps) & import("react").RefAttributes<HTMLElement>>, any, ScrollbarProps, never>;
+export declare const DropdownTagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/TagsDropdown/TagsDropdown.styles.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import Scrollbar from '@synerise/ds-scrollbar';
+export var Overlay = styled.div.withConfig({
+  displayName: "TagsDropdownstyles__Overlay",
+  componentId: "sc-15cr02t-0"
+})(["width:216px;background-color:", ";"], function (props) {
+  return props.theme.palette.white;
+});
+export var DropdownContainer = styled(Scrollbar).withConfig({
+  displayName: "TagsDropdownstyles__DropdownContainer",
+  componentId: "sc-15cr02t-1"
+})(["display:flex;flex-direction:column;"]);
+export var DropdownTagsContainer = styled.div.withConfig({
+  displayName: "TagsDropdownstyles__DropdownTagsContainer",
+  componentId: "sc-15cr02t-2"
+})(["display:flex;flex-direction:column;max-height:320px;> *{width:fit-content;max-width:fit-content;display:block;width:inherit;cursor:pointer;flex-shrink:0;}"]);

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { default } from './Tags';
 export * as TagsStyles from './Tags.styles';
-export type { TagsProps, ActionTaken } from './Tags.types';
+export type { TagsProps, ActionTaken, ExtendedTagProps } from './Tags.types';
 /**
  * @deprecated import directly from @synerise/ds-tag
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-tags",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Tags UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,12 +36,12 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@synerise/ds-button": "^1.4.11",
-    "@synerise/ds-dropdown": "^1.0.23",
+    "@synerise/ds-dropdown": "^1.0.24",
     "@synerise/ds-icon": "^1.7.2",
-    "@synerise/ds-information-card": "^1.1.0",
+    "@synerise/ds-information-card": "^1.1.1",
     "@synerise/ds-result": "^1.0.24",
     "@synerise/ds-scrollbar": "^1.1.8",
-    "@synerise/ds-search-bar": "^1.3.12",
+    "@synerise/ds-search-bar": "^1.3.13",
     "@synerise/ds-tag": "^1.2.0",
     "@synerise/ds-tooltip": "^1.2.0",
     "@synerise/ds-utils": "^1.4.2"
@@ -51,5 +51,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "5029af8713235b315d36bb3c73363f2feca86da0"
+  "gitHead": "4f56489ade5b08524578821d0c51c963002ff48c"
 }