@redocly/theme 0.42.3 → 0.43.0

package/lib/components/Select/Select.js

@@ -26,60 +26,150 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectListItem = exports.SelectList = exports.SelectInputValue = exports.SelectInput = exports.SelectContainer = exports.Select = void 0;
+exports.SelectWrapper = exports.Select = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const hooks_1 = require("../../core/hooks");
-const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
-const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
 const CheckmarkIcon_1 = require("../../icons/CheckmarkIcon/CheckmarkIcon");
+const SelectInput_1 = require("../../components/Select/SelectInput");
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
+const hooks_1 = require("../../core/hooks");
 function Select(props) {
-    const { className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, disabled, placeholder, hideCheckmarkIcon, renderInput, renderDivider, dataTestId = 'select', } = props;
-    const containerRef = (0, react_1.useRef)(null);
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    // const [selectedIdx, setSelectedIdx] = useState<React.ReactNode | string>(selected);
-    const handleOpen = () => {
-        setIsOpen(true);
+    const { className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', placement, alignment, icon, onlyIcon, disabled, placeholder, hideCheckmarkIcon, checkmarkIconPosition, dataTestId = 'select', multiple, searchable, clearable, footer, onChange, onSearch, renderInput, renderDivider, } = props;
+    const getSelectedOptionsFromPropsValue = () => {
+        const values = Array.isArray(value) ? value : [value];
+        return values
+            .map((value) => {
+            const selectedOption = options.find((option) => option.value === value);
+            return selectedOption || typeof value === 'string'
+                ? { value }
+                : value;
+        })
+            .filter((option) => !!option);
+    };
+    const [selectedOptions, setSelectedOptions] = (0, react_1.useState)(getSelectedOptionsFromPropsValue());
+    const selectRef = (0, react_1.useRef)(null);
+    const [searchValue, setSearchValue] = (0, react_1.useState)(null);
+    const [dropdownActive, setDropdownActive] = (0, react_1.useState)(false);
+    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
+    const [stickyInputValue, setStickyInputValue] = (0, react_1.useState)(placeholder || '');
+    const inputId = (0, react_1.useId)();
+    (0, hooks_1.useOutsideClick)(selectRef, () => {
+        setDropdownActive(false);
+    });
+    (0, react_1.useEffect)(() => {
+        setFilteredOptions(options);
+    }, [options]);
+    (0, react_1.useEffect)(() => {
+        setSelectedOptions(getSelectedOptionsFromPropsValue());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [multiple, value]);
+    (0, react_1.useEffect)(() => {
+        if (onSearch) {
+            onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchValue);
+        }
+        else {
+            if (typeof searchValue === 'string') {
+                const filteredOptions = options.filter((option) => {
+                    var _a, _b;
+                    const valueForSearch = String((_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : '');
+                    return (!valueForSearch || valueForSearch.toLowerCase().indexOf(searchValue.toLowerCase()) > -1);
+                });
+                setFilteredOptions(filteredOptions);
+            }
+            else {
+                setFilteredOptions(options);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchValue]);
+    const selectHandler = (selectedOption) => {
+        const newSelectedOptions = multiple
+            ? isSelected(selectedOption)
+                ? selectedOptions.filter((option) => option.value !== selectedOption.value)
+                : [...selectedOptions, selectedOption]
+            : [selectedOption];
+        const newSelectedValues = newSelectedOptions.length
+            ? multiple
+                ? newSelectedOptions.map((o) => o.value)
+                : newSelectedOptions[0].value
+            : multiple
+                ? []
+                : '';
+        setSelectedOptions(newSelectedOptions);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newSelectedValues);
+        setSearchValue(null);
+        setDropdownActive(false);
+        if (!multiple) {
+            setStickyInputValue('');
+        }
+    };
+    const searchHandler = (e) => {
+        const targetValue = e.target.value;
+        setSearchValue(targetValue);
+        setDropdownActive(true);
+    };
+    const clearHandler = (option) => {
+        if (option) {
+            selectHandler(option);
+        }
+        else {
+            if (!multiple) {
+                setStickyInputValue('');
+            }
+            setSelectedOptions([]);
+            onChange === null || onChange === void 0 ? void 0 : onChange(multiple ? [] : '');
+        }
     };
-    const handleClose = () => {
-        setIsOpen(false);
+    const inputBlurHandler = (e) => {
+        var _a, _b;
+        const relatedTarget = e.relatedTarget;
+        const isDropdownItem = ((_a = relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.attributes.getNamedItem('data-component-name')) === null || _a === void 0 ? void 0 : _a.value) ===
+            'Dropdown/DropdownMenuItem';
+        if (!isDropdownItem) {
+            if (!e.relatedTarget || ((_b = e.relatedTarget) === null || _b === void 0 ? void 0 : _b.id) !== inputId) {
+                setDropdownActive(false);
+            }
+            setSearchValue(null);
+            setStickyInputValue('');
+        }
     };
-    const handleToggle = () => {
-        setIsOpen(!isOpen);
+    const inputFocusHandler = () => {
+        if (!multiple && selectedOptions.length) {
+            setStickyInputValue(selectedOptions[0].label || selectedOptions[0].value);
+        }
     };
-    const handleSelect = (value) => {
-        // setSelectedIdx(options.findIndex(o => o.value === value));
-        setIsOpen(false);
-        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    const inputClickHandler = () => {
+        setDropdownActive(!dropdownActive);
     };
-    (0, hooks_1.useOutsideClick)(containerRef, handleClose);
-    // useEffect(() => {
-    //   handleSelect(selected);
-    //   // eslint-disable-next-line react-hooks/exhaustive-deps
-    // }, [selected]);
-    const selectedOption = options.find((option) => option.value === value);
-    const renderDefaultInput = () => (react_1.default.createElement(exports.SelectInput, null,
-        !onlyIcon && (react_1.default.createElement(exports.SelectInputValue, null, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.element) || placeholder)),
-        icon,
-        withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, { size: "14px" }) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "14px" }) : null));
-    return (react_1.default.createElement(exports.SelectContainer, Object.assign({ "data-component-name": "Select/Select" }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className, ref: containerRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
-        renderInput ? renderInput({ isOpen }) : renderDefaultInput(),
-        isOpen && (react_1.default.createElement(exports.SelectList, { placement: placement, alignment: alignment }, options.map((option, index) => {
-            const selected = option.value === value;
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(exports.SelectListItem, { key: index, onClick: () => handleSelect(option.value), selected: selected },
-                    typeof option.element === 'string' ? (react_1.default.createElement("div", null, option.element)) : (option.element),
-                    !hideCheckmarkIcon && selected && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null)),
-                renderDivider && index !== options.length - 1 ? renderDivider() : null));
-        })))));
+    const isSelected = (option) => {
+        return !!selectedOptions.find((selectOption) => selectOption.value === option.value || selectOption.value === option.label);
+    };
+    const renderDefaultInput = () => {
+        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, clearable: clearable, customIcon: icon, onlyIcon: onlyIcon, clearHandler: clearHandler, searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
+    };
+    return (react_1.default.createElement(exports.SelectWrapper, Object.assign({ "data-component-name": "Select/Select", ref: selectRef }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className }),
+        react_1.default.createElement(SelectDropdown, { closeOnClick: !multiple, withArrow: withArrow, trigger: renderInput ? renderInput() : renderDefaultInput(), triggerEvent: triggerEvent, placement: placement, alignment: alignment, active: !renderInput ? dropdownActive : undefined },
+            react_1.default.createElement(SelectDropdownMenu, { footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, "No results")) : (filteredOptions.map((option, index) => {
+                return (react_1.default.createElement(react_1.Fragment, { key: index },
+                    react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => selectHandler(option), prefix: !hideCheckmarkIcon &&
+                            (checkmarkIconPosition ? checkmarkIconPosition === 'start' : false) &&
+                            isSelected(option) && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null), suffix: !hideCheckmarkIcon &&
+                            (checkmarkIconPosition ? checkmarkIconPosition === 'end' : true) &&
+                            isSelected(option) && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null) }, typeof option.element === 'string' ? (react_1.default.createElement("div", null, option.element)) : (option.element)),
+                    renderDivider && index !== options.length - 1 ? renderDivider() : null));
+            }) || 'No results')))));
 }
 exports.Select = Select;
-exports.SelectContainer = styled_components_1.default.div `
+exports.SelectWrapper = styled_components_1.default.div `
+  display: flex;
   position: relative;
   font-size: var(--select-font-size);
   font-weight: var(--select-font-weight);
   line-height: var(--select-line-height);
   border-radius: var(--select-border-radius);
+  border: var(--select-border);
   color: var(--select-text-color);
   min-width: 0;
 
@@ -88,67 +178,15 @@ exports.SelectContainer = styled_components_1.default.div `
     opacity: 0.59;
     pointer-events: none;
   `}
-  a {
-    display: block;
-    text-decoration: none;
-    color: var(--select-text-color);
-  }
 `;
-exports.SelectInput = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: var(--select-input-border-radius);
-  padding: var(--select-input-padding);
-  cursor: pointer;
-  gap: 8px;
-`;
-exports.SelectInputValue = styled_components_1.default.div `
-  pointer-events: none;
-  min-width: 0;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;
-exports.SelectList = styled_components_1.default.ul `
-  position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
-  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
-  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
-  margin: 0;
-  min-width: var(--select-list-min-width);
-  max-width: var(--select-list-max-width);
-  padding: var(--select-list-padding);
-  background-color: var(--select-list-bg-color);
-  border-radius: var(--select-list-border-radius);
-  box-shadow: var(--select-list-box-shadow);
-  list-style-type: none;
-  cursor: pointer;
-  white-space: nowrap;
-  overflow: hidden;
-  z-index: 1;
-`;
-exports.SelectListItem = styled_components_1.default.li `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-radius: var(--select-list-item-border-radius);
-  gap: var(--select-list-item-gap);
-  padding: var(--select-list-item-padding);
-  ${({ selected }) => selected &&
-    `
-      font-weight: var(--select-list-item-font-weight-active);
-      background-color: var(--select-list-item-bg-color-active);
-      &:hover { background-color: var(--select-list-item-bg-color-active)};
-    `}
-
-  & > * {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+const SelectDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  width: 100%;
 
-  &:hover {
-    background-color: var(--select-list-item-bg-color-hover);
+  > * {
+    width: 100%;
   }
 `;
+const SelectDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
+  width: 100%;
+`;
 //# sourceMappingURL=Select.js.map

package/lib/components/Select/SelectInput.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { SelectOption } from '../../core/types/select';
+type SelectInputProps<T> = {
+    id?: string;
+    selectedOptions: SelectOption<T>[];
+    searchValue: any;
+    stickyValue: any;
+    onlyIcon?: boolean;
+    icon?: React.ReactNode;
+    customIcon?: React.ReactNode;
+    placeholder?: string;
+    multiple?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    clearHandler?: (value?: any) => void;
+    inputBlurHandler?: (e?: any) => void;
+    inputFocusHandler?: (e?: any) => void;
+    searchHandler?: (e?: any) => void;
+    clickHandler?: (e?: any) => void;
+};
+export declare function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode;
+export declare const SelectInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/lib/components/Select/SelectInput.js

@@ -0,0 +1,129 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectInputWrapper = exports.SelectInput = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importStar(require("react"));
+const Tag_1 = require("../../components/Tag/Tag");
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const Button_1 = require("../../components/Button/Button");
+function SelectInput(props) {
+    const { id, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, } = props;
+    const inputRef = (0, react_1.useRef)(null);
+    const onChangeHandler = (e) => {
+        var _a;
+        searchHandler === null || searchHandler === void 0 ? void 0 : searchHandler(e);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const onKeyDownHandler = (e) => {
+        var _a;
+        e.stopPropagation();
+        if (e.key === 'Backspace' && !searchValue && selectedOptions.length) {
+            clearHandler === null || clearHandler === void 0 ? void 0 : clearHandler(selectedOptions[selectedOptions.length - 1]);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const onClickHandler = (e) => {
+        clickHandler === null || clickHandler === void 0 ? void 0 : clickHandler(e);
+    };
+    const onFocusHandler = (e) => {
+        var _a;
+        inputFocusHandler === null || inputFocusHandler === void 0 ? void 0 : inputFocusHandler(e);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const onBlurHandler = (e) => {
+        inputBlurHandler === null || inputBlurHandler === void 0 ? void 0 : inputBlurHandler(e);
+    };
+    const onClearAllHandler = (e) => {
+        e.stopPropagation();
+        clearHandler === null || clearHandler === void 0 ? void 0 : clearHandler();
+    };
+    const selectTags = selectedOptions.map((option, index) => (react_1.default.createElement(SelectInputTag, { closable: true, key: index, onClose: () => {
+            var _a;
+            clearHandler === null || clearHandler === void 0 ? void 0 : clearHandler(option);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        } }, option.label || option.value || option.element)));
+    const selectInput = (react_1.default.createElement(SelectInternalInput, { value: searchValue ||
+            (!multiple && !stickyValue && selectedOptions.length
+                ? selectedOptions[0].label || selectedOptions[0].value
+                : ''), placeholder: searchValue || (multiple && selectedOptions.length) ? '' : stickyValue || placeholder, onChange: onChangeHandler, onKeyDown: onKeyDownHandler, onBlur: onBlurHandler, ref: inputRef, width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%' }));
+    const simpleValue = selectedOptions.length ? (selectedOptions[0].label || selectedOptions[0].element || selectedOptions[0].value) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
+    const multipleValues = selectedOptions.length ? (selectTags) : (react_1.default.createElement(SelectInternalInputPlaceholder, null, placeholder));
+    return (react_1.default.createElement(exports.SelectInputWrapper, Object.assign({}, props, { id: id, onFocus: onFocusHandler, onClick: onClickHandler }),
+        !onlyIcon && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(SelectInputValue, null, multiple ? (searchable ? (react_1.default.createElement(react_1.default.Fragment, null,
+                selectTags,
+                selectInput)) : (multipleValues)) : searchable ? (selectInput) : (simpleValue)),
+            !!(clearable && selectedOptions.length) && (react_1.default.createElement(Button_1.Button, { size: "small", variant: "text", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), onClick: onClearAllHandler })))),
+        customIcon || icon));
+}
+exports.SelectInput = SelectInput;
+exports.SelectInputWrapper = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--select-input-border-radius);
+  padding: var(--select-input-padding);
+  cursor: pointer;
+  gap: var(--select-input-gap);
+`;
+const SelectInputValue = styled_components_1.default.div `
+  width: calc(100% - 20px);
+  display: flex;
+  min-width: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex-wrap: wrap;
+  gap: var(--select-input-value-gap);
+`;
+const SelectInputTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  --tag-content-padding: 0;
+`;
+const SelectInternalInput = styled_components_1.default.input.attrs(() => ({
+    type: 'text',
+})) `
+  outline: none;
+  border-radius: var(--select-input-border-radius);
+  border: none;
+  font-size: var(--select-input-font-size);
+  font-weight: var(--select-input-font-weight);
+  line-height: var(--select-input-line-height);
+  background-color: var(--select-input-bg-color);
+
+  &::placeholder {
+    color: var(--select-input-placeholder-color);
+  }
+
+  width: ${({ width }) => width || 'auto'};
+`;
+const SelectInternalInputPlaceholder = styled_components_1.default.div `
+  color: var(--select-input-placeholder-color);
+  padding-left: 8px;
+`;
+//# sourceMappingURL=SelectInput.js.map

package/lib/components/Select/variables.js

@@ -11,10 +11,19 @@ exports.select = (0, styled_components_1.css) `
   --select-line-height: var(--line-height-base); // @presenter LineHeight
   --select-text-color: var(--text-color-secondary); // @presenter Color
   --select-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
+  
   --select-input-padding-vertical: 6px; // @presenter Spacing
-  --select-input-padding-horizontal: 16px; // @presenter Spacing
+  --select-input-padding-horizontal: 6px; // @presenter Spacing
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
+  --select-input-gap: var(--spacing-xs); // @presenter Spacing
+  --select-input-value-gap: var(--spacing-unit); // @presenter Spacing
   --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-input-font-size: var(--font-size-base); // @presenter FontSize
+  --select-input-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --select-input-line-height: var(--line-height-base); // @presenter LineHeight
+  --select-input-bg-color: var(--bg-color); // @presenter Color
+  --select-input-placeholder-color: var(--input-content-placeholder-color); // @presenter Color
 
   --select-list-min-width: 100px;
   --select-list-max-width: 300px;
@@ -32,6 +41,8 @@ exports.select = (0, styled_components_1.css) `
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
   --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  
+
+  --select-placeholder-color: var(--color-warm-grey-6); // @presenter Color
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Tag/Tag.d.ts

@@ -16,7 +16,9 @@ export type TagProps = {
     statusDotColor?: string;
     size?: string;
     icon?: React.ReactNode;
-    onClick?: () => void;
+    active?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    onClose?: (event: React.MouseEvent) => void;
 };
-export declare function Tag({ children, color, icon, onClick, size, borderless, withStatusDot, statusDotColor, ...otherProps }: TagProps): JSX.Element;
+export declare function Tag({ children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor, ...otherProps }: TagProps): JSX.Element;
 export {};

package/lib/components/Tag/Tag.js

@@ -17,14 +17,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
 function Tag(_a) {
-    var { children, color, icon, onClick, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "onClick", "size", "borderless", "withStatusDot", "statusDotColor"]);
-    return (react_1.default.createElement(TagContainer, Object.assign({ "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick }, otherProps),
+    var { children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "onClick", "onClose", "size", "borderless", "withStatusDot", "statusDotColor"]);
+    return (react_1.default.createElement(TagWrapper, Object.assign({ "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, hasCloseButton: closable }, otherProps),
         withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
-        children));
+        react_1.default.createElement(ContentWrapper, null, children),
+        closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
+                onClose === null || onClose === void 0 ? void 0 : onClose(event);
+            } },
+            react_1.default.createElement(CloseIcon_1.CloseIcon, null))),
+        active && react_1.default.createElement(ActiveIcon, null)));
 }
 exports.Tag = Tag;
-const TagContainer = styled_components_1.default.div.attrs(({ className, color, size }) => ({
+const ContentWrapper = styled_components_1.default.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-wrap: nowrap;
+
+  padding: var(--tag-content-padding);
+  gap: var(--tag-content-gap);
+`;
+const CloseButton = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  border-radius: 0 var(--tag-border-radius) var(--tag-border-radius) 0;
+
+  &:hover {
+    background: var(--tag-close-button-bg-color-hover);
+  }
+`;
+const TagWrapper = styled_components_1.default.div.attrs(({ className, color, size }) => ({
     className: (className || '') +
         ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
 })) `
@@ -32,8 +59,10 @@ const TagContainer = styled_components_1.default.div.attrs(({ className, color,
   align-items: center;
   justify-content: center;
   text-wrap: nowrap;
+  position: relative;
 
   padding: var(--tag-padding);
+  ${({ hasCloseButton }) => (hasCloseButton ? 'padding-right: 0;' : '')};
   margin: var(--tag-margin);
 
   &:last-child {
@@ -64,4 +93,11 @@ const StatusDot = styled_components_1.default.div `
   border-radius: 50%;
   background-color: ${({ color }) => color};
 `;
+const ActiveIcon = (0, styled_components_1.default)(CheckmarkFilledIcon_1.CheckmarkFilledIcon) `
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  right: -4px;
+  top: -4px;
+`;
 //# sourceMappingURL=Tag.js.map

package/lib/components/Tag/variables.dark.js

@@ -3,11 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tagDarkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.tagDarkMode = (0, styled_components_1.css) `
-  --tag-operation-color-delete: #fa82a2;
-  --tag-operation-color-get: #68cc97;
-  --tag-operation-color-post: #90b0f0;
-  --tag-operation-color-put: #e0a663;
-  --tag-operation-color-patch: #e0c363;
+  --tag-operation-color-delete: #fa82a2; // @presenter Color
+  --tag-operation-bg-color-delete: #77214C; // @presenter Color
+
+  --tag-operation-color-get: #68cc97; // @presenter Color
+  --tag-operation-bg-color-get: #1F4D2D; // @presenter Color
+
+  --tag-operation-color-post: #90b0f0; // @presenter Color
+  --tag-operation-bg-color-post: #233061; // @presenter Color
+
+  --tag-operation-color-put: #e0a663; // @presenter Color
+  --tag-operation-bg-color-put: #612729; // @presenter Color
+
+  --tag-operation-color-patch: #e0c363; // @presenter Color
+  --tag-operation-bg-color-patch: #5C3721; // @presenter Color
+
+  --tag-operation-color-head: #e6e1fe; // @presenter Color
+  --tag-operation-bg-color-head: #5b4ccc; // @presenter Color
+
+  --tag-operation-color-options: #1a1c21; // @presenter Color
+  --tag-operation-bg-color-options: #2a2b33; // @presenter Color
 
   .tag-grey,
   .tag-draft,