@decisiv/ui-components 2.0.1-alpha.222 → 2.0.1-alpha.224

package/lib/atoms/OptionsList/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}

package/lib/atoms/OptionsList/utils.d.ts

@@ -1,4 +1,4 @@
-import { Item, Category, Option, LinkOption } from './types';
+import { Item, Category, Option, LinkOption, FlattenedItem } from './types';
 export declare const getId: (item: Item) => string;
 export declare const isCategory: (item: Item) => item is Category;
 export declare const sanitizeIds: (ids: string | string[] | undefined, multiple: boolean) => string[];
@@ -6,4 +6,6 @@ export declare const ensureItemIsVisible: (container: HTMLUListElement | null, i
     focus?: boolean | undefined;
 } | undefined) => void;
 export declare const isLink: (item: Option) => item is LinkOption;
+export declare const flattenItems: (items: Item[]) => FlattenedItem[];
+export declare const getItemHeight: (flattenedItem: FlattenedItem, size?: "small" | "medium") => number;
 //# sourceMappingURL=utils.d.ts.map

package/lib/atoms/OptionsList/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE7D,eAAO,MAAM,KAAK,wBAAgD,CAAC;AAEnE,eAAO,MAAM,UAAU,kCACuB,CAAC;AAE/C,eAAO,MAAM,WAAW,qEAWvB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;sBA+B/B,CAAC;AAEF,eAAO,MAAM,MAAM,sCACgB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE5E,eAAO,MAAM,KAAK,wBAAgD,CAAC;AAEnE,eAAO,MAAM,UAAU,kCACuB,CAAC;AAE/C,eAAO,MAAM,WAAW,qEAWvB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;sBA+B/B,CAAC;AAEF,eAAO,MAAM,MAAM,sCACgB,CAAC;AAepC,eAAO,MAAM,YAAY,oCA+BxB,CAAC;AAYF,eAAO,MAAM,aAAa,qEAkBzB,CAAC"}

package/lib/atoms/OptionsList/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isLink = exports.ensureItemIsVisible = exports.sanitizeIds = exports.isCategory = exports.getId = void 0;
+exports.getItemHeight = exports.flattenItems = exports.isLink = exports.ensureItemIsVisible = exports.sanitizeIds = exports.isCategory = exports.getId = void 0;
 
 var _castArray = _interopRequireDefault(require("lodash/castArray"));
 
@@ -73,5 +73,82 @@ exports.ensureItemIsVisible = ensureItemIsVisible;
 var isLink = function isLink(item) {
   return 'linkTo' in item && !!item.linkTo;
 };
+/**
+ * Flatten items array to include category items inline for virtualization
+ *
+ * Categories are rendered as:
+ * - Category header (with special styling)
+ * - Followed by its items
+ *
+ * This function transforms:
+ * [Option1, Category{items: [Option2, Option3]}, Option4]
+ *
+ * Into:
+ * [Option1, CategoryHeader, Option2, Option3, Option4]
+ */
+
+
+exports.isLink = isLink;
+
+var flattenItems = function flattenItems(items) {
+  var flattened = [];
+  items.forEach(function (item) {
+    if (isCategory(item)) {
+      // Add the category header
+      flattened.push({
+        item: item,
+        type: 'category-header',
+        originalItem: item
+      }); // Add all items within the category
+
+      item.items.forEach(function (subItem) {
+        flattened.push({
+          item: subItem,
+          type: 'option',
+          originalItem: item // Keep reference to parent category
+
+        });
+      });
+    } else {
+      // Regular option
+      flattened.push({
+        item: item,
+        type: 'option',
+        originalItem: item
+      });
+    }
+  });
+  return flattened;
+};
+/**
+ * Calculate item height based on type and size for virtualization
+ *
+ * Heights are based on the styled-components padding values:
+ * - Options (small): 5px top + 5px bottom padding + ~25px content = ~35px
+ * - Options (medium): 10px top + 10px bottom padding + ~25px content = ~45px
+ * - Categories (small): 15px top + 7px bottom padding + ~20px content = ~42px
+ * - Categories (medium): 15px top + 10px bottom padding + ~25px content = ~50px
+ * - Options with labelDetails: Add ~20px extra height
+ */
+
+
+exports.flattenItems = flattenItems;
+
+var getItemHeight = function getItemHeight(flattenedItem) {
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'small';
+  var type = flattenedItem.type,
+      item = flattenedItem.item;
+
+  if (type === 'category-header') {
+    // Category headers are taller
+    return size === 'medium' ? 50 : 42;
+  } // Regular option
+
+
+  var baseHeight = size === 'medium' ? 45 : 35; // Check if option has labelDetails (secondary text) which adds height
+
+  var hasLabelDetails = 'labelDetails' in item && item.labelDetails;
+  return hasLabelDetails ? baseHeight + 20 : baseHeight;
+};
 
-exports.isLink = isLink;
+exports.getItemHeight = getItemHeight;

package/lib/components/Combobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AA4mBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AA8mBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}

package/lib/components/Combobox/index.js

@@ -126,7 +126,8 @@ function Combobox(props, ref) {
       containerSelector = props.containerSelector,
       pointerEvents = props.pointerEvents,
       externalIsPopoverVisible = props.isPopoverVisible,
-      externalListRef = props.listRef;
+      externalListRef = props.listRef,
+      enableVirtualization = props.enableVirtualization;
 
   var _useCombobox = (0, _useCombobox2.default)(props),
       getInputFieldProps = _useCombobox.getInputFieldProps,
@@ -605,7 +606,8 @@ function Combobox(props, ref) {
       visible: Boolean(popoverVisibleStateToUse || loading),
       renderOptionLabel: renderOptionLabel,
       zIndex: zIndex,
-      pointerEvents: pointerEvents
+      pointerEvents: pointerEvents,
+      enableVirtualization: enableVirtualization
     }));
   }));
 }

package/lib/components/Combobox/types.d.ts

@@ -12,6 +12,7 @@ export interface ComboboxProps extends Omit<React.InputHTMLAttributes<ComboboxIn
     clearButtonLabel?: string;
     defaultInputValue?: string;
     defaultValue?: string;
+    enableVirtualization?: boolean;
     inputValue?: string;
     isPopoverVisible?: boolean;
     multiple?: boolean;

package/lib/components/Combobox/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,oBAAY,gBAAgB,GAAG,gBAAgB,CAAC;AAEhD,aAAK,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhC,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CACR,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,OAAO,CACrB,EACD,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,EAC5D,IAAI,CACF,iBAAiB,EACf,QAAQ,GACR,QAAQ,GACR,mBAAmB,GACnB,mBAAmB,GACnB,eAAe,CAClB;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,kBAAkB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;IACzD,aAAa,CAAC,EAAE,CACd,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,YAAY,EAAE,aAAa,KACxB,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;CACjC;AAED,MAAM,WAAW,aAAa;IAC5B,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED,oBAAY,eAAe,GAAG,IAAI,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC;AAEpE,oBAAY,IAAI,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;AAE/E,MAAM,WAAW,WAAW;IAC1B,kBAAkB,EAAE,MAAM,eAAe,CAAC;IAC1C,kBAAkB,EAAE,MAAM,CAAC;IAC3B,qBAAqB,EAAE,CAAC,kBAAkB,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9D;AAED,MAAM,WAAW,WAAY,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,GAAG,EAAE,CAAC;IACvB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAC;IAC1D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACpC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/types.ts"],"names":[],"mappings":"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"}

package/lib/components/TagInput/index.d.ts

@@ -1,14 +1,5 @@
 /// <reference types="react" />
-import { BaseInputFieldProps } from '../../atoms/InputField';
-import { DropdownListItem } from '../DropdownList/types';
-export interface TagInputProps extends Omit<BaseInputFieldProps, 'onChange' | 'children' | 'value' | 'hideLabel'> {
-    hiddenLabel?: boolean;
-    defaultTags?: string[];
-    tags?: string[];
-    options: DropdownListItem[];
-    onChange?: (value: string[]) => void;
-    onSelect?: (item: string[]) => void;
-    zIndex?: number;
-}
-export default function TagInput({ defaultTags, tags, onChange, disabled, readOnly, label, hiddenLabel, options, onSelect, zIndex, ...props }: TagInputProps): JSX.Element;
+import { TagInputProps, TagItem, TagObject } from './types';
+export { TagInputProps, TagItem, TagObject };
+export default function TagInput({ defaultTags, tags, onChange, disabled, readOnly, label, hiddenLabel, options, onSelect, maxTags, showMaxTagsCount, zIndex, ...props }: TagInputProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/TagInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/index.tsx"],"names":[],"mappings":";AAoBA,OAAmB,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAIzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAKzD,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAChD;IACD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,WAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,aAAa,eA2Sf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/index.tsx"],"names":[],"mappings":";AAyBA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI5D,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;AAE7C,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,WAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,aAAa,eAkUf"}

package/lib/components/TagInput/index.js

@@ -4,6 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = TagInput;
+Object.defineProperty(exports, "TagInputProps", {
+  enumerable: true,
+  get: function get() {
+    return _types.TagInputProps;
+  }
+});
+Object.defineProperty(exports, "TagItem", {
+  enumerable: true,
+  get: function get() {
+    return _types.TagItem;
+  }
+});
+Object.defineProperty(exports, "TagObject", {
+  enumerable: true,
+  get: function get() {
+    return _types.TagObject;
+  }
+});
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -29,6 +47,8 @@ var _Button = _interopRequireDefault(require("../Button"));
 
 var _DropdownList = _interopRequireDefault(require("../DropdownList"));
 
+var _types = require("./types");
+
 var _styles = require("./styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -68,8 +88,10 @@ function TagInput(_ref) {
       hiddenLabel = _ref.hiddenLabel,
       options = _ref.options,
       onSelect = _ref.onSelect,
+      maxTags = _ref.maxTags,
+      showMaxTagsCount = _ref.showMaxTagsCount,
       zIndex = _ref.zIndex,
-      props = _objectWithoutProperties(_ref, ["defaultTags", "tags", "onChange", "disabled", "readOnly", "label", "hiddenLabel", "options", "onSelect", "zIndex"]);
+      props = _objectWithoutProperties(_ref, ["defaultTags", "tags", "onChange", "disabled", "readOnly", "label", "hiddenLabel", "options", "onSelect", "maxTags", "showMaxTagsCount", "zIndex"]);
 
   var clearButtonRef = (0, _react.useRef)(null);
   var listRef = (0, _react.useRef)(null);
@@ -102,6 +124,11 @@ function TagInput(_ref) {
   var tagsToRender = (0, _react.useMemo)(function () {
     return tags || innerTags;
   }, [tags, innerTags]);
+  var flatenTagsToRender = (0, _react.useMemo)(function () {
+    return tagsToRender.map(function (tag) {
+      return typeof tag === 'string' ? tag : tag.text;
+    });
+  }, [tagsToRender]);
   var isDisabled = disabled || readOnly;
   var handleNotifyChange = (0, _react.useCallback)(function (value) {
     if (!onChange) return;
@@ -112,7 +139,7 @@ function TagInput(_ref) {
   }, [options]);
   var handleAddTag = (0, _react.useCallback)(function (rawString) {
     var text = rawString.replace(/\s+/g, ' ').trim();
-    if (!text || tagsToRender.includes(text)) return;
+    if (!text || flatenTagsToRender.includes(text)) return;
 
     if (isControlled) {
       handleNotifyChange([].concat(_toConsumableArray(tags), [text]));
@@ -124,7 +151,7 @@ function TagInput(_ref) {
       handleNotifyChange(newState);
       return newState;
     });
-  }, [handleNotifyChange, tags, tagsToRender, isControlled]);
+  }, [handleNotifyChange, tags, flatenTagsToRender, isControlled]);
   var handleRemoveOnBackspace = (0, _react.useCallback)(function () {
     if (isControlled) {
       handleNotifyChange(_toConsumableArray(tags.slice(0, -1)));
@@ -144,14 +171,14 @@ function TagInput(_ref) {
 
       if (isControlled) {
         handleNotifyChange(_toConsumableArray(tags).filter(function (tag) {
-          return tag !== text;
+          return typeof tag === 'string' ? tag !== text : tag.text !== text;
         }));
         return;
       }
 
       setInnerTags(function (oldState) {
         var newState = _toConsumableArray(oldState).filter(function (tag) {
-          return tag !== text;
+          return typeof tag === 'string' ? tag !== text : tag.text !== text;
         });
 
         handleNotifyChange(newState);
@@ -213,7 +240,7 @@ function TagInput(_ref) {
       return newState;
     });
     setIsPopoverVisible(false);
-  }, [handleNotifyChange, tags, isControlled, options]);
+  }, [handleNotifyChange, tags, isControlled, options, onSelect]);
   /**
    * Toggle the dropdown list.
    */
@@ -274,20 +301,36 @@ function TagInput(_ref) {
     label: label,
     hideLabel: hiddenLabel,
     inputContainerRef: inputContainerRef,
-    onClick: handleContainerClick
+    onClick: handleContainerClick,
+    containerMaxCount: maxTags,
+    containerCount: tagsToRender.length,
+    showContainerCount: showMaxTagsCount
   }, props), function (innerProps) {
     return _react.default.createElement(_styles.Container, null, tagsToRender.map(function (tag) {
+      var _ref2 = typeof tag === 'string' ? {
+        text: tag
+      } : {
+        text: tag.text,
+        color: tag.color,
+        palette: tag.palette
+      },
+          text = _ref2.text,
+          _ref2$color = _ref2.color,
+          color = _ref2$color === void 0 ? 'information' : _ref2$color,
+          _ref2$palette = _ref2.palette,
+          palette = _ref2$palette === void 0 ? 'pastel' : _ref2$palette;
+
       return _react.default.createElement(_Tag.default, {
-        key: tag,
+        key: text,
         size: "small",
-        text: tag,
-        palette: "pastel",
-        color: isDisabled ? 'licoriceMousse' : 'information',
-        action: isDisabled ? undefined : handleRemoveTag(tag),
+        text: text,
+        palette: palette,
+        color: isDisabled ? 'licoriceMousse' : color,
+        action: isDisabled ? undefined : handleRemoveTag(text),
         actionIntent: "danger",
         actionAttributes: {
           'aria-label': translate(undefined, 'tagInput.tagAriaLabel', {
-            tagName: tag
+            tagName: text
           })
         },
         actionIcon: isDisabled ? undefined : _Times.default

package/lib/components/TagInput/index.test.js

@@ -1074,4 +1074,70 @@ describe('TagInput', function () {
       expect(onSelectMock).toHaveBeenCalledWith(['Option1']);
     });
   });
+  describe('maxTags counter', function () {
+    it('renders maxTags counter when showMaxTagsCount is true', function () {
+      var _render34 = render(_react.default.createElement(_.default, {
+        defaultTags: ['Tag1', 'Tag2'],
+        maxTags: 5,
+        showMaxTagsCount: true,
+        label: "My Tag Input"
+      })),
+          getByText = _render34.getByText;
+
+      expect(getByText('2/5')).toBeInTheDocument();
+    });
+    it('does not render maxTags counter when showMaxTagsCount is false', function () {
+      var _render35 = render(_react.default.createElement(_.default, {
+        defaultTags: ['Tag1', 'Tag2'],
+        maxTags: 5,
+        showMaxTagsCount: false,
+        label: "My Tag Input"
+      })),
+          queryByText = _render35.queryByText;
+
+      expect(queryByText('2/5')).not.toBeInTheDocument();
+    });
+    it('renders red counter when maxTags is reached', function () {
+      var _render36 = render(_react.default.createElement(_.default, {
+        defaultTags: ['Tag1', 'Tag2', 'Tag3', 'Tag4'],
+        maxTags: 3,
+        showMaxTagsCount: true,
+        label: "My Tag Input"
+      })),
+          getByText = _render36.getByText;
+
+      expect(getByText('4/3')).toHaveStyle("\n        color: #FF4142;\n      ");
+    });
+  });
+  describe('decorated tags', function () {
+    it('renders tags with specified colors', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee33() {
+      var _render37, getByText;
+
+      return regeneratorRuntime.wrap(function _callee33$(_context33) {
+        while (1) {
+          switch (_context33.prev = _context33.next) {
+            case 0:
+              _render37 = render(_react.default.createElement(_.default, {
+                defaultTags: [{
+                  text: 'Red Tag',
+                  color: 'danger'
+                }, {
+                  text: 'Green Tag',
+                  color: 'fizzyLime',
+                  palette: 'dark'
+                }, 'default tag'],
+                label: "My Tag Input"
+              })), getByText = _render37.getByText;
+              expect(getByText('Red Tag').parentElement.parentElement).toHaveStyle("\n        background-color: #ffdfdf;\n      ");
+              expect(getByText('Green Tag').parentElement.parentElement).toHaveStyle("\n        background-color: #6b7700;\n      ");
+              expect(getByText('default tag').parentElement.parentElement).toHaveStyle("\n        background-color: #d4eefe;\n      ");
+
+            case 4:
+            case "end":
+              return _context33.stop();
+          }
+        }
+      }, _callee33);
+    })));
+  });
 });

package/lib/components/TagInput/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;AAoBrD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/schema.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,MAAM,KAAwC,CAAC;AAmCrD,eAAe,MAAM,CAAC"}

package/lib/components/TagInput/schema.js

@@ -23,8 +23,14 @@ var schema = (0, _reactDesc.describe)({
   displayName: 'TagInput'
 });
 schema.propTypes = _objectSpread({}, (0, _omit.default)(_InputField.schema.makePropTypes(), ['icon', 'children', 'value', 'onFocus', 'onBlur', 'showCharacterCount', 'maxLength']), {
-  tags: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.string).description('An array of tags that represents the controlled value of the component.'),
-  defaultTags: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.string).description('An array of tags that represents the initial uncontrolled value of the component.')
+  tags: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.oneOf([_reactDesc.PropTypes.string, _reactDesc.PropTypes.shape({
+    text: _reactDesc.PropTypes.string,
+    color: _reactDesc.PropTypes.string,
+    palette: _reactDesc.PropTypes.string
+  })])).description('An array of tags that represents the controlled value of the component. Array elements can be either strings or objects with `text`, `color` and `palette` properties.'),
+  defaultTags: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.string).description('An array of tags that represents the initial uncontrolled value of the component.'),
+  maxTags: _reactDesc.PropTypes.number.description('The maximum number of tags that should be added to the component. Used in conjuction with `showMaxTagsCount`.'),
+  showMaxTagsCount: _reactDesc.PropTypes.bool.description('Whether to show a counter with the number of added tags and the maximum allowed when `maxTags` is set.')
 });
 var _default = schema;
 exports.default = _default;

package/lib/components/TagInput/types.d.ts

@@ -0,0 +1,21 @@
+import { CommonUIColorKeys } from '../../utils/commonUIColors';
+import { BaseInputFieldProps } from '../../atoms/InputField';
+import { DropdownListItem } from '../DropdownList/types';
+export interface TagObject {
+    text: string;
+    color?: CommonUIColorKeys;
+    palette?: 'pastel' | 'bright' | 'dark';
+}
+export declare type TagItem = TagObject | string;
+export interface TagInputProps extends Omit<BaseInputFieldProps, 'onChange' | 'children' | 'value' | 'hideLabel'> {
+    hiddenLabel?: boolean;
+    defaultTags?: TagItem[];
+    tags?: TagItem[];
+    options: DropdownListItem[];
+    onChange?: (value: TagItem[]) => void;
+    onSelect?: (item: string[]) => void;
+    maxTags?: number;
+    showMaxTagsCount?: boolean;
+    zIndex?: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/components/TagInput/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;CACxC;AAED,oBAAY,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,mBAAmB,EACnB,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAChD;IACD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,EAAE,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/lib/components/TagInput/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Wizard/index.d.ts

@@ -6,14 +6,22 @@ export interface Step {
     content: React.ReactNode;
     nextButtonProps?: ButtonProps;
     previousButtonProps?: ButtonProps;
+    hideBodyTitle?: boolean;
 }
 export interface WizardProps extends Pick<ModalProps, 'id' | 'visible' | 'zIndex'> {
     title: string;
     size?: 'normal' | 'extraLarge';
     steps: Step[];
     activeStep: number;
-    submitButtonProps: ButtonProps;
+    submitButtonProps?: ButtonProps;
     onCancel: NonNullable<ModalProps['onClose']>;
+    renderActions?: (context: {
+        step: Step;
+        stepIndex: number;
+        isFirstStep: boolean;
+        isLastStep: boolean;
+        defaultActions: React.ReactNode;
+    }) => React.ReactNode;
 }
 declare function WizardManger(props: PropsWithChildren<WizardProps>): JSX.Element;
 declare namespace WizardManger {

package/lib/components/Wizard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAOjD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAa5C,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mBAAmB,CAAC,EAAE,WAAW,CAAC;CACnC;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,WAAW,CAAC;IAC/B,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;CAC9C;AAmGD,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,eAQ1D;kBARQ,YAAY;;;;AAiBrB,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAO1D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAa5C,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE;QACxB,IAAI,EAAE,IAAI,CAAC;QACX,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,OAAO,CAAC;QACrB,UAAU,EAAE,OAAO,CAAC;QACpB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;KACjC,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AAsID,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,eAQ1D;kBARQ,YAAY;;;;AAiBrB,eAAe,YAAY,CAAC"}

package/lib/components/Wizard/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _breakpointObserver = require("@decisiv/breakpoint-observer");
 
@@ -31,6 +31,8 @@ var _schema = _interopRequireDefault(require("./schema"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -63,6 +65,7 @@ var Wizard = function Wizard(_ref) {
       size = _ref$size === void 0 ? 'normal' : _ref$size,
       steps = _ref.steps,
       onCancel = _ref.onCancel,
+      renderActions = _ref.renderActions,
       _ref$zIndex = _ref.zIndex,
       zIndex = _ref$zIndex === void 0 ? 100 : _ref$zIndex;
   var translate = (0, _useTranslations.default)();
@@ -82,10 +85,31 @@ var Wizard = function Wizard(_ref) {
   var title = currentStep.title,
       content = currentStep.content,
       nextButtonProps = currentStep.nextButtonProps,
-      previousButtonProps = currentStep.previousButtonProps;
+      previousButtonProps = currentStep.previousButtonProps,
+      hideBodyTitle = currentStep.hideBodyTitle;
   var showPrevious = currentStepNumber > 1 && !!previousButtonProps;
   var showSubmit = currentStepNumber === steps.length && !!submitButtonProps;
   var showNext = currentStepNumber < steps.length && !showSubmit && !!nextButtonProps;
+  var defaultActions = (0, _react.useMemo)(function () {
+    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_styles.ActionButtonsContainer, {
+      size: breakpoint
+    }, showSubmit && _react.default.createElement(_.Button, _extends({
+      text: translate('Submit', 'wizard.actions.submit')
+    }, submitButtonProps)), showNext && _react.default.createElement(_.Button, _extends({
+      text: translate('Continue', 'wizard.actions.continue'),
+      icon: _ArrowRight.default,
+      iconPosition: "right"
+    }, nextButtonProps)), showPrevious && _react.default.createElement(_.Button, _extends({
+      text: translate('Back', 'wizard.actions.back'),
+      kind: "secondary",
+      icon: _ArrowLeft.default
+    }, previousButtonProps))), _react.default.createElement(_.Button, {
+      text: translate('Cancel', 'wizard.actions.cancel'),
+      kind: "secondary",
+      variant: "ghost",
+      onClick: onCancel
+    }));
+  }, [breakpoint, showSubmit, translate, submitButtonProps, showNext, nextButtonProps, showPrevious, previousButtonProps, onCancel]);
   return _react.default.createElement(_ResponsiveModalWrapper.default, {
     id: id,
     size: sizeMapping[size],
@@ -103,30 +127,19 @@ var Wizard = function Wizard(_ref) {
     activeStep: currentStepNumber
   })), _react.default.createElement(_styles.StepContainer, {
     tabIndex: 0
-  }, _react.default.createElement(_.Flex, {
+  }, !hideBodyTitle && _react.default.createElement(_.Flex, {
     marginBottom: 2
   }, _react.default.createElement(_Typography.H3, null, title)), content)), _react.default.createElement(_styles.Footer, {
     size: breakpoint,
     paddingX: (_ref3 = {}, _defineProperty(_ref3, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref3, _breakpointObserver.sizes.XS, 2), _ref3),
     paddingY: 1.5
-  }, _react.default.createElement(_styles.ActionButtonsContainer, {
-    size: breakpoint
-  }, showSubmit && _react.default.createElement(_.Button, _extends({
-    text: translate('Submit', 'wizard.actions.submit')
-  }, submitButtonProps)), showNext && _react.default.createElement(_.Button, _extends({
-    text: translate('Continue', 'wizard.actions.continue'),
-    icon: _ArrowRight.default,
-    iconPosition: "right"
-  }, nextButtonProps)), showPrevious && _react.default.createElement(_.Button, _extends({
-    text: translate('Back', 'wizard.actions.back'),
-    kind: "secondary",
-    icon: _ArrowLeft.default
-  }, previousButtonProps))), _react.default.createElement(_.Button, {
-    text: translate('Cancel', 'wizard.actions.cancel'),
-    kind: "secondary",
-    variant: "ghost",
-    onClick: onCancel
-  }))));
+  }, renderActions ? renderActions({
+    step: currentStep,
+    stepIndex: currentStepNumber - 1,
+    isFirstStep: currentStepNumber === 1,
+    isLastStep: currentStepNumber === steps.length,
+    defaultActions: defaultActions
+  }) : defaultActions)));
 };
 
 function WizardManger(props) {