@synerise/ds-tags 1.5.25 → 1.5.27

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.5.27](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.5.26...@synerise/ds-tags@1.5.27) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-tags
+
+## [1.5.26](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.5.25...@synerise/ds-tags@1.5.26) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-tags
+
 ## [1.5.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tags@1.5.24...@synerise/ds-tags@1.5.25) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-tags

package/README.md

@@ -24,10 +24,14 @@ Tags UI Component
 | 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                                               | {}            |
+| texts            | necessary texts to render tags group                                                                                    | Partial\<TagTexts\>                                     | -             |
 | 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                                                  | -             |
-| addButtonType    | Defines the type of button used to add more tags. 'icon-label' by default                                               | 'icon-label'                                            | 'single-icon' | 'icon-label' |
+| addButtonType    | Defines the type of button used to add more tags. Defaults to `'icon-label'` when `texts.addButtonLabel` is set, otherwise `'single-icon'` | `'single-icon' \| 'icon-label'` | - |
+| overlayPlacement | Placement of the add-tags dropdown                                                                                      | `'topLeft' \| 'topCenter' \| 'topRight' \| 'bottomLeft' \| 'bottomCenter' \| 'bottomRight'` | - |
+| overlayStyle     | Inline style override for the add-tags dropdown overlay                                                                 | React.CSSProperties                                     | - |
+| maxHeight        | Max height (px) of the add-tags dropdown scrollable area                                                                | number                                                  | - |
+| asPill           | Render all tags as pills                                                                                                | boolean                                                 | - |
 
 ## ActionTaken
 
@@ -36,7 +40,7 @@ Tags UI Component
 | tag      | Affected tag                                                   | Tag              |
 | type     | Type of action taken that caused onSelectedChange to be called | 'ADD' / 'REMOVE' |
 
-## TagsTexts
+## TagTexts
 
 | Property             | Description                                                   | Type               | Default      |
 | -------------------- | ------------------------------------------------------------- | ------------------ | ------------ |
@@ -46,6 +50,5 @@ Tags UI Component
 | searchPlaceholder    | Search input placeholder for add tag dropdown                 | string             |              |
 | manageLinkLabel      | Label for manage link for add tag dropdown                    | string / ReactNode |              |
 | createTagButtonLabel | Label for create tag button for add tag dropdown              | string / ReactNode |              |
-| noResultsLabel       | Label displayed when filtering tags returns an empty array    | string / ReactNode | `No results` |
+| noResultsLabel       | Label displayed when filtering tags returns an empty array    | string / ReactNode | `No tags found` |
 | dropdownNoTags       | Text for a label displayed when no tags are found to be added | string / ReactNode |              |
-| title                | Text for a tags group                                         | ReactNode          |              |

package/dist/Tags.d.ts

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

package/dist/Tags.js

@@ -1,101 +1,61 @@
-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 InformationCard from '@synerise/ds-information-card';
-import Tag, { useDefaultTexts } 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,
-    tagShape = _ref.tagShape,
-    onSelectedChange = _ref.onSelectedChange,
-    disabled = _ref.disabled,
-    removable = _ref.removable,
-    addable = _ref.addable,
-    creatable = _ref.creatable,
-    texts = _ref.texts,
-    _ref$selected = _ref.selected,
-    selected = _ref$selected === void 0 ? [] : _ref$selected,
-    style = _ref.style,
-    className = _ref.className,
-    onCreate = _ref.onCreate,
-    title = _ref.title,
-    maxHeight = _ref.maxHeight,
-    overlayStyle = _ref.overlayStyle,
-    overlayPlacement = _ref.overlayPlacement,
-    asPill = _ref.asPill,
-    dropdownFooter = _ref.dropdownFooter,
-    addButtonType = _ref.addButtonType,
-    maxVisibleTags = _ref.maxVisibleTags;
-  var isMaxVisibleTagsDefined = typeof maxVisibleTags === 'number';
-  var allTexts = useDefaultTexts(texts);
-  var visibleSelectedTags = isMaxVisibleTagsDefined ? selected.slice(0, maxVisibleTags) : selected;
-  var areLimitedTags = isMaxVisibleTagsDefined && selected.length > maxVisibleTags;
-  var onRemove = function onRemove(tagKey) {
+import { jsxs, jsx } from "react/jsx-runtime";
+import InformationCard from "@synerise/ds-information-card";
+import Tag, { useDefaultTexts } from "@synerise/ds-tag";
+import { Container, Title, TagsWrapper, SelectedTags, TagOverflow } from "./Tags.styles.js";
+import { AddTags } from "./components/AddTags/AddTags.js";
+import { LimitedTags } from "./components/LimitedTags/LimitedTags.js";
+const Tags = ({
+  data = [],
+  tagShape,
+  onSelectedChange,
+  disabled,
+  removable,
+  addable,
+  creatable,
+  texts,
+  selected = [],
+  style,
+  className,
+  onCreate,
+  title,
+  maxHeight,
+  overlayStyle,
+  overlayPlacement,
+  asPill,
+  dropdownFooter,
+  addButtonType,
+  maxVisibleTags
+}) => {
+  const isMaxVisibleTagsDefined = typeof maxVisibleTags === "number";
+  const allTexts = useDefaultTexts(texts);
+  const visibleSelectedTags = isMaxVisibleTagsDefined ? selected.slice(0, maxVisibleTags) : selected;
+  const areLimitedTags = isMaxVisibleTagsDefined && selected.length > maxVisibleTags;
+  const onRemove = (tagKey) => {
     if (!onSelectedChange || !selected) {
       return;
     }
-    var removedTag = selected.find(function (tag) {
-      return tag.id === tagKey;
-    });
+    const removedTag = selected.find((tag) => tag.id === tagKey);
     if (!removedTag) {
       return;
     }
-    onSelectedChange(selected.filter(function (tag) {
-      return tag.id !== tagKey;
-    }), {
-      type: 'REMOVE',
+    onSelectedChange(selected.filter((tag) => tag.id !== tagKey), {
+      type: "REMOVE",
       tag: removedTag
     });
   };
-  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, visibleSelectedTags && visibleSelectedTags.map(function (tag) {
-    return /*#__PURE__*/React.createElement(S.TagOverflow, null, /*#__PURE__*/React.createElement(Tag, _extends({
-      key: tag.id,
-      shape: tagShape,
-      removable: removable,
-      onRemove: removable ? onRemove : undefined,
-      disabled: disabled,
-      texts: allTexts,
-      asPill: asPill
-    }, tag, {
-      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
-    })));
-  }), areLimitedTags && /*#__PURE__*/React.createElement(LimitedTags, {
-    selected: selected,
-    maxVisibleTags: maxVisibleTags,
-    tagShape: tagShape,
-    removable: removable,
-    onRemove: removable ? onRemove : undefined,
-    disabled: disabled
-  }), addable && /*#__PURE__*/React.createElement(AddTags, {
-    data: data,
-    selected: selected,
-    creatable: creatable,
-    overlayPlacement: overlayPlacement,
-    overlayStyle: overlayStyle,
-    texts: allTexts,
-    tagShape: tagShape,
-    maxHeight: maxHeight,
-    dropdownFooter: dropdownFooter,
-    onSelectedChange: onSelectedChange,
-    onCreate: onCreate,
-    addButtonType: addButtonType
-  }))));
+  return /* @__PURE__ */ jsxs(Container, { className: `ds-tags ${className || ""}`, style, "data-testid": "tags", children: [
+    title && /* @__PURE__ */ jsx(Title, { shape: tagShape, children: title }),
+    /* @__PURE__ */ jsx(TagsWrapper, { children: /* @__PURE__ */ jsxs(SelectedTags, { children: [
+      visibleSelectedTags && visibleSelectedTags.map((tag) => /* @__PURE__ */ jsx(TagOverflow, { children: /* @__PURE__ */ jsx(Tag, { shape: tagShape, removable, onRemove: removable ? onRemove : void 0, disabled, texts: allTexts, asPill, ...tag, tooltipProps: tag.informationCardProps ? {
+        render: () => /* @__PURE__ */ jsx(InformationCard, { title: tag.name, ...tag.informationCardProps, asTooltip: true }),
+        placement: "bottomLeft",
+        ...tag.tooltipProps
+      } : void 0 }, tag.id) })),
+      areLimitedTags && /* @__PURE__ */ jsx(LimitedTags, { selected, maxVisibleTags, tagShape, removable, onRemove: removable ? onRemove : void 0, disabled }),
+      addable && /* @__PURE__ */ jsx(AddTags, { data, selected, creatable, overlayPlacement, overlayStyle, texts: allTexts, tagShape, maxHeight, dropdownFooter, onSelectedChange, onCreate, addButtonType })
+    ] }) })
+  ] });
+};
+export {
+  Tags as default
 };
-export default Tags;

package/dist/Tags.styles.d.ts

@@ -1,7 +1,7 @@
-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>;
-export declare const LimitedTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+import { 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>;
+export declare const LimitedTag: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
     id?: string | number;
     name?: string;
     textColor?: string;
@@ -15,13 +15,13 @@ export declare const LimitedTag: import("styled-components").StyledComponent<imp
     onRemove?: (tag: string | number) => void;
     prefixel?: React.ReactNode;
     suffixel?: React.ReactNode;
-    texts?: import("@synerise/ds-tag").TagTexts;
+    texts?: import('@synerise/ds-tag').TagTexts;
     asPill?: boolean;
     dashed?: boolean;
-    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
-} & Omit<import("react").HTMLAttributes<HTMLDivElement>, "image" | "className" | "id" | "color" | "onClick" | "name" | "textColor" | "shape" | "removable" | "disabled" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import("@synerise/ds-utils").DataAttributes & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const TagsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Title: import("styled-components").StyledComponent<"div", any, {
+    tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "image" | "className" | "id" | "color" | "onClick" | "name" | "textColor" | "shape" | "removable" | "disabled" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const TagsWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Title: import('styled-components').StyledComponent<"div", any, {
     shape?: TagShape;
 }, never>;
-export declare const SelectedTags: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectedTags: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Tags.styles.js

@@ -1,28 +1,34 @@
-import styled from 'styled-components';
-import Tag from '@synerise/ds-tag';
-export var Container = styled.div.withConfig({
+import styled from "styled-components";
+import Tag from "@synerise/ds-tag";
+const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tagsstyles__Container",
   componentId: "sc-156lf0a-0"
 })(["display:flex;margin-bottom:24px;max-width:100%;"]);
-export var TagOverflow = styled.div.withConfig({
+const TagOverflow = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tagsstyles__TagOverflow",
   componentId: "sc-156lf0a-1"
 })(["display:flex;height:32px;align-items:center;max-width:100%;min-width:0;flex:0 1 auto;"]);
-export var LimitedTag = styled(Tag).withConfig({
+const LimitedTag = /* @__PURE__ */ styled(Tag).withConfig({
   displayName: "Tagsstyles__LimitedTag",
   componentId: "sc-156lf0a-2"
 })(["flex:0 0 auto;"]);
-export var TagsWrapper = styled.div.withConfig({
+const TagsWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tagsstyles__TagsWrapper",
   componentId: "sc-156lf0a-3"
 })(["display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;min-width:0;"]);
-export var Title = styled.div.withConfig({
+const Title = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tagsstyles__Title",
   componentId: "sc-156lf0a-4"
-})(["color:", ";font-weight:500;display:block;margin:6px 4px 0 0;"], function (props) {
-  return props.theme.palette['grey-800'];
-});
-export var SelectedTags = styled.div.withConfig({
+})(["color:", ";font-weight:500;display:block;margin:6px 4px 0 0;"], (props) => props.theme.palette["grey-800"]);
+const SelectedTags = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tagsstyles__SelectedTags",
   componentId: "sc-156lf0a-5"
-})(["display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;min-width:0;&& .ds-tag{margin:4px;}"]);
+})(["display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;min-width:0;&& .ds-tag{margin:4px;}"]);
+export {
+  Container,
+  LimitedTag,
+  SelectedTags,
+  TagOverflow,
+  TagsWrapper,
+  Title
+};

package/dist/Tags.types.d.ts

@@ -1,6 +1,6 @@
-import type { CSSProperties, ReactNode } from 'react';
-import { type InformationCardProps } from '@synerise/ds-information-card';
-import { type TagProps, type TagShape, type TagTexts } from '@synerise/ds-tag';
+import { CSSProperties, ReactNode } from 'react';
+import { InformationCardProps } from '@synerise/ds-information-card';
+import { TagProps, TagShape, TagTexts } from '@synerise/ds-tag';
 export type ActionTaken = {
     type: 'ADD' | 'REMOVE';
     tag: TagProps;

package/dist/Tags.types.js

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

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { type TagTexts } from '@synerise/ds-tag';
-import { type TagsProps } from '../../Tags.types';
+import { default as React } from 'react';
+import { TagTexts } from '@synerise/ds-tag';
+import { TagsProps } from '../../Tags.types';
 export type AddTagsProps = Pick<TagsProps, 'creatable' | 'data' | 'selected' | 'overlayPlacement' | 'overlayStyle' | 'dropdownFooter' | 'maxHeight' | 'tagShape' | 'onSelectedChange' | 'onCreate' | 'addButtonType'> & {
     texts: TagTexts;
 };

package/dist/components/AddTags/AddTags.js

@@ -1,120 +1,68 @@
-import React, { useEffect, useRef, useState } from 'react';
-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,
-    addButtonType = _ref.addButtonType;
-  var theme = useTheme();
-  var searchRef = useRef(null);
-  var _useState = useState(''),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
-  var _useState2 = useState(false),
-    isTagAddDropdownOpen = _useState2[0],
-    setIsTagAddDropdownOpen = _useState2[1];
-  var reset = function reset() {
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+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.js";
+import { AddTagButton, CreateTagDropdownButton, Separator } from "./AddTags.styles.js";
+const AddTags = ({
+  creatable,
+  data,
+  selected,
+  overlayPlacement,
+  overlayStyle,
+  texts,
+  tagShape,
+  maxHeight,
+  dropdownFooter,
+  onSelectedChange,
+  onCreate,
+  addButtonType
+}) => {
+  const theme = useTheme();
+  const searchRef = useRef(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isTagAddDropdownOpen, setIsTagAddDropdownOpen] = useState(false);
+  const reset = () => {
     setIsTagAddDropdownOpen(false);
-    setSearchQuery('');
+    setSearchQuery("");
   };
-  var onPoolTagSelect = function onPoolTagSelect(tag) {
-    onSelectedChange && selected && onSelectedChange([].concat(selected, [tag]), {
-      type: 'ADD',
-      tag: tag
+  const onPoolTagSelect = (tag) => {
+    onSelectedChange && selected && onSelectedChange([...selected, tag], {
+      type: "ADD",
+      tag
     });
     reset();
   };
-  var onCreateNewTag = function onCreateNewTag() {
+  const 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;
-  useEffect(function () {
+  const notSelectedList = data && selected && data.filter((t) => !selected.find((s) => s.id === t.id));
+  const selectablePool = !searchQuery ? notSelectedList : notSelectedList && notSelectedList.filter((t) => t.name && t.name.toLowerCase().includes(searchQuery.toLowerCase()));
+  const isExactMatchFound = searchQuery && selectablePool && selectablePool.find((t) => t.name === searchQuery);
+  const emptyPool = selectablePool && selectablePool.length === 0;
+  const isCreatable = creatable && !isExactMatchFound && searchQuery;
+  const isSeparated = !emptyPool;
+  const noTagsContentLabel = !!notSelectedList?.length && !!searchQuery ? texts?.noResultsLabel : texts?.dropdownNoTags;
+  useEffect(() => {
     if (isTagAddDropdownOpen) {
-      // revert delay to 0 after STOR-1881
-      setTimeout(function () {
-        var _searchRef$current;
-        return (_searchRef$current = searchRef.current) == null ? void 0 : _searchRef$current.focus();
-      }, 500);
+      setTimeout(() => searchRef.current?.focus(), 500);
     }
   }, [isTagAddDropdownOpen]);
-  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,
-    componentId: "tags-add",
-    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.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, {
-      handleInputRef: function handleInputRef(ref) {
-        return searchRef.current = ref.current;
-      },
-      value: searchQuery,
-      onSearchChange: setSearchQuery,
-      placeholder: 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.clearTooltip
-    })
-  }, /*#__PURE__*/React.createElement(S.AddTagButton, {
-    isOpen: isTagAddDropdownOpen,
-    type: "ghost",
-    mode: addButtonType || (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']
-  }), addButtonType !== 'single-icon' && texts.addButtonLabel));
-};
+  return /* @__PURE__ */ jsx(TagsDropdown, { tags: selectablePool, trigger: ["click"], maxHeight, placement: overlayPlacement, open: isTagAddDropdownOpen, onOpenChange: setIsTagAddDropdownOpen, overlayStyle, tagShape, onTagClick: onPoolTagSelect, dropdownFooter, componentId: "tags-add", aboveTagsContent: isCreatable && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(CreateTagDropdownButton, { "data-testid": "ds-tags-create-button", type: "ghost", mode: "icon-label", onClick: onCreateNewTag, marginless: !isSeparated, children: [
+      /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Add3M, {}), size: 24, color: theme.palette["grey-500"] }),
+      /* @__PURE__ */ jsx("span", { children: texts.createTagButtonLabel }),
+      /* @__PURE__ */ jsx("strong", { children: searchQuery })
+    ] }),
+    isSeparated && /* @__PURE__ */ jsx(Separator, {})
+  ] }), noTagsContent: /* @__PURE__ */ jsx(Result, { type: "no-results", description: noTagsContentLabel || "No results" }), dropdownHeader: /* @__PURE__ */ jsx(SearchBar, { handleInputRef: (ref) => searchRef.current = ref.current, value: searchQuery, onSearchChange: setSearchQuery, placeholder: texts.searchPlaceholder || "", iconLeft: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(SearchM, {}), color: theme.palette["grey-600"] }), onClearInput: () => setSearchQuery(""), clearTooltip: texts.clearTooltip }), children: /* @__PURE__ */ jsxs(AddTagButton, { isOpen: isTagAddDropdownOpen, type: "ghost", mode: addButtonType || (texts?.addButtonLabel ? "icon-label" : "single-icon"), children: [
+    /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Add3M, {}), size: 24, color: theme.palette["grey-500"] }),
+    addButtonType !== "single-icon" && texts.addButtonLabel
+  ] }) });
+};
+export {
+  AddTags
+};

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

@@ -1,9 +1,9 @@
-import { type StyledButton } from '@synerise/ds-button';
+import { StyledButton } from '@synerise/ds-button';
 type ExtraProps = {
     marginless: boolean;
 };
 export declare const CreateTagDropdownButton: StyledButton<ExtraProps>;
-export declare const Separator: import("styled-components").StyledComponent<"hr", any, {}, never>;
+export declare const Separator: import('styled-components').StyledComponent<"hr", any, {}, never>;
 export declare const AddTagButton: StyledButton<{
     isOpen?: boolean;
 }>;

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

@@ -1,21 +1,20 @@
-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({
+import styled from "styled-components";
+import Button from "@synerise/ds-button";
+import { ButtonLabel } from "@synerise/ds-button/dist/Button.styles";
+const CreateTagDropdownButton = /* @__PURE__ */ 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({
+})(["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;}"], (props) => props.marginless ? "0" : "0 0 8px", ButtonLabel);
+const Separator = /* @__PURE__ */ 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'];
-});
-export var AddTagButton = styled(Button).withConfig({
+})(["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;"], (props) => props.theme.palette["grey-300"]);
+const AddTagButton = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "AddTagsstyles__AddTagButton",
   componentId: "sc-1wg5ubr-2"
-})(["flex:0 0 auto;", ""], function (props) {
-  return props.isOpen && " &&&&& { visibility: visible }";
-});
+})(["flex:0 0 auto;", ""], (props) => props.isOpen && ` &&&&& { visibility: visible }`);
+export {
+  AddTagButton,
+  CreateTagDropdownButton,
+  Separator
+};

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type TagProps, type TagShape } from '@synerise/ds-tag';
+import { default as React } from 'react';
+import { TagProps, TagShape } from '@synerise/ds-tag';
 type LimitedTagsProps = {
     selected: TagProps[];
     tagShape?: TagShape;

package/dist/components/LimitedTags/LimitedTags.js

@@ -1,34 +1,21 @@
-import React from 'react';
-import { useTheme } from '@synerise/ds-core';
-import * as S from '../../Tags.styles';
-import { TagsDropdown } from '../TagsDropdown/TagsDropdown';
-export var LimitedTags = function LimitedTags(_ref) {
-  var tagShape = _ref.tagShape,
-    selected = _ref.selected,
-    maxVisibleTags = _ref.maxVisibleTags,
-    removable = _ref.removable,
-    disabled = _ref.disabled,
-    onRemove = _ref.onRemove;
-  var limitedSelectedTags = selected.slice(maxVisibleTags);
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement(TagsDropdown, {
-    tags: limitedSelectedTags,
-    trigger: ['hover'],
-    tagShape: tagShape,
-    removable: removable,
-    onRemove: removable ? onRemove : undefined,
-    disabled: disabled,
-    componentId: 'tags-limited',
-    asPill: true,
-    overlayStyle: {
-      zIndex: parseInt(theme.variables['zindex-dropdown'], 10) + 1
-    }
-  }, /*#__PURE__*/React.createElement(S.LimitedTag, {
-    id: "limited-tags",
-    shape: tagShape,
-    color: theme.palette['grey-100'],
-    textColor: theme.palette['grey-700'],
-    name: "+" + limitedSelectedTags.length,
-    asPill: true
-  }));
-};
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@synerise/ds-core";
+import { LimitedTag } from "../../Tags.styles.js";
+import { TagsDropdown } from "../TagsDropdown/TagsDropdown.js";
+const LimitedTags = ({
+  tagShape,
+  selected,
+  maxVisibleTags,
+  removable,
+  disabled,
+  onRemove
+}) => {
+  const limitedSelectedTags = selected.slice(maxVisibleTags);
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(TagsDropdown, { tags: limitedSelectedTags, trigger: ["hover"], tagShape, removable, onRemove: removable ? onRemove : void 0, disabled, componentId: "tags-limited", asPill: true, overlayStyle: {
+    zIndex: parseInt(theme.variables["zindex-dropdown"], 10) + 1
+  }, children: /* @__PURE__ */ jsx(LimitedTag, { id: "limited-tags", shape: tagShape, color: theme.palette["grey-100"], textColor: theme.palette["grey-700"], name: `+${limitedSelectedTags.length}`, asPill: true }) });
+};
+export {
+  LimitedTags
+};

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

@@ -1,7 +1,7 @@
-import React, { type ReactNode } from 'react';
-import { type DropdownSharedProps } from '@synerise/ds-dropdown';
-import { type TagProps, type TagShape, type TagTexts } from '@synerise/ds-tag';
-import { type ExtendedTagProps } from '../../Tags.types';
+import { default as React, ReactNode } from 'react';
+import { DropdownSharedProps } from '@synerise/ds-dropdown';
+import { TagProps, TagShape, TagTexts } from '@synerise/ds-tag';
+import { ExtendedTagProps } from '../../Tags.types';
 type TagDropdownProps = {
     tags?: ExtendedTagProps[];
     texts?: TagTexts;

package/dist/components/TagsDropdown/TagsDropdown.js

@@ -1,68 +1,45 @@
-var _excluded = ["tags", "tagShape", "texts", "removable", "disabled", "onRemove", "asPill", "dropdownFooter", "noTagsContent", "dropdownHeader", "aboveTagsContent", "maxHeight", "onTagClick", "componentId"];
-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';
-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,
-    componentId = _ref.componentId,
-    dropdownProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var areTags = !!(tags != null && tags.length);
-  return /*#__PURE__*/React.createElement(Dropdown, _extends({
-    popoverProps: _extends({
-      componentId: componentId,
-      testId: "" + componentId
-    }, dropdownProps == null ? void 0 : dropdownProps.popoverProps)
-  }, dropdownProps, {
-    size: "small",
-    overlay: /*#__PURE__*/React.createElement(S.Overlay, {
-      "data-testid": "ds-tags-dropdown-overlay"
-    }, dropdownHeader, /*#__PURE__*/React.createElement(S.DropdownContainer, {
-      absolute: true,
-      maxHeight: maxHeight
-    }, 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(S.BottomAction, {
-      onClickAction: NOOP
-    }, dropdownFooter))
-  }));
-};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement } 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 { Overlay, DropdownContainer, DropdownTagsContainer, BottomAction } from "./TagsDropdown.styles.js";
+const TagsDropdown = ({
+  tags,
+  tagShape,
+  texts,
+  removable,
+  disabled,
+  onRemove,
+  asPill,
+  dropdownFooter,
+  noTagsContent,
+  dropdownHeader,
+  aboveTagsContent,
+  maxHeight,
+  onTagClick,
+  componentId,
+  ...dropdownProps
+}) => {
+  const areTags = !!tags?.length;
+  return /* @__PURE__ */ jsx(Dropdown, { popoverProps: {
+    componentId,
+    testId: `${componentId}`,
+    ...dropdownProps?.popoverProps
+  }, ...dropdownProps, size: "small", overlay: /* @__PURE__ */ jsxs(Overlay, { "data-testid": "ds-tags-dropdown-overlay", children: [
+    dropdownHeader,
+    /* @__PURE__ */ jsxs(DropdownContainer, { absolute: true, maxHeight, children: [
+      aboveTagsContent,
+      areTags ? /* @__PURE__ */ jsx(DropdownTagsContainer, { "data-testid": "ds-tags-available-tags", children: tags.map((tag) => /* @__PURE__ */ createElement(Tag, { ...tag, key: tag.id, shape: tagShape, removable, onRemove: removable ? onRemove : void 0, disabled, asPill, onClick: () => onTagClick?.(tag), texts, tooltipProps: tag.informationCardProps ? {
+        render: () => /* @__PURE__ */ jsx(InformationCard, { title: tag.name, ...tag.informationCardProps, asTooltip: true }),
+        placement: "right",
+        ...tag.tooltipProps
+      } : void 0 })) }) : noTagsContent
+    ] }),
+    dropdownFooter && /* @__PURE__ */ jsx(BottomAction, { onClickAction: NOOP, children: dropdownFooter })
+  ] }) });
+};
+export {
+  TagsDropdown
+};

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

@@ -1,5 +1,5 @@
-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>;
-export declare const BottomAction: import("styled-components").StyledComponent<({ onClickAction, children, icon, ...rest }: import("@synerise/ds-dropdown/dist/components/BottomAction/BottomAction.types").BottomActionProps) => React.JSX.Element, any, {}, never>;
+import { 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>;
+export declare const BottomAction: import('styled-components').StyledComponent<({ onClickAction, children, icon, ...rest }: import('@synerise/ds-dropdown/dist/components/BottomAction/BottomAction.types').BottomActionProps) => React.JSX.Element, any, {}, never>;

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

@@ -1,19 +1,25 @@
-import styled from 'styled-components';
-import Dropdown from '@synerise/ds-dropdown';
-import Scrollbar from '@synerise/ds-scrollbar';
-export var Overlay = styled.div.withConfig({
+import styled from "styled-components";
+import Dropdown from "@synerise/ds-dropdown";
+import Scrollbar from "@synerise/ds-scrollbar";
+const Overlay = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TagsDropdownstyles__Overlay",
   componentId: "sc-15cr02t-0"
 })([""]);
-export var DropdownContainer = styled(Scrollbar).withConfig({
+const DropdownContainer = /* @__PURE__ */ styled(Scrollbar).withConfig({
   displayName: "TagsDropdownstyles__DropdownContainer",
   componentId: "sc-15cr02t-1"
 })(["display:flex;flex-direction:column;padding:8px 0 0 8px;"]);
-export var DropdownTagsContainer = styled.div.withConfig({
+const DropdownTagsContainer = /* @__PURE__ */ 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;}&:after{content:'\\00a0';flex:0 0 8px;overflow:hidden;visibility:hidden;width:10px;}"]);
-export var BottomAction = styled(Dropdown.BottomAction).withConfig({
+const BottomAction = /* @__PURE__ */ styled(Dropdown.BottomAction).withConfig({
   displayName: "TagsDropdownstyles__BottomAction",
   componentId: "sc-15cr02t-3"
-})(["margin-top:0;padding:0 8px;cursor:auto;"]);
+})(["margin-top:0;padding:0 8px;cursor:auto;"]);
+export {
+  BottomAction,
+  DropdownContainer,
+  DropdownTagsContainer,
+  Overlay
+};

package/dist/index.js

@@ -1,13 +1,11 @@
-export { default } from './Tags';
-import * as _TagsStyles from './Tags.styles';
-export { _TagsStyles as TagsStyles };
-export { AddTags } from './components/AddTags/AddTags';
-
-/**
- * @deprecated import directly from @synerise/ds-tag
- */
-export { default as Tag, TagShape } from '@synerise/ds-tag';
-/**
- * @deprecated import directly from @synerise/ds-tag
- */
-// eslint-disable-next-line no-duplicate-imports
+import { default as default2 } from "./Tags.js";
+import * as Tags_styles from "./Tags.styles.js";
+import { AddTags } from "./components/AddTags/AddTags.js";
+import { default as default3, TagShape } from "@synerise/ds-tag";
+export {
+  AddTags,
+  default3 as Tag,
+  TagShape,
+  Tags_styles as TagsStyles,
+  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-tags",
-  "version": "1.5.25",
+  "version": "1.5.27",
   "description": "Tags 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,16 +35,16 @@
   ],
   "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-information-card": "^1.6.3",
-    "@synerise/ds-result": "^1.0.47",
-    "@synerise/ds-scrollbar": "^1.2.15",
-    "@synerise/ds-search-bar": "^1.4.18",
-    "@synerise/ds-tag": "^1.4.16",
-    "@synerise/ds-tooltip": "^1.4.8",
-    "@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-information-card": "^1.6.5",
+    "@synerise/ds-result": "^1.0.49",
+    "@synerise/ds-scrollbar": "^1.2.17",
+    "@synerise/ds-search-bar": "^1.4.20",
+    "@synerise/ds-tag": "^1.4.18",
+    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-utils": "^1.7.1"
   },
   "devDependencies": {
     "@testing-library/user-event": "^14"
@@ -54,5 +54,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }