@salutejs/plasma-new-hope 0.166.0-canary.1392.11343531504.0 → 0.166.0-canary.1392.11347585113.0

package/cjs/components/Attach/Attach.js

@@ -21,7 +21,7 @@ var addSeparator = require('./utils/addSeparator.js');
 var getFileicon = require('./utils/getFileicon.js');
 
 var _IconCloseCircleOutli;
-var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled"];
+var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled", "id", "name", "onChange", "onClear"];
 var attachRoot = function attachRoot(Root) {
   return /*#__PURE__*/React.forwardRef(function (props, outerRef) {
     var _props$flow = props.flow,
@@ -37,6 +37,10 @@ var attachRoot = function attachRoot(Root) {
       style = props.style,
       isLoading = props.isLoading,
       disabled = props.disabled,
+      id = props.id,
+      name = props.name,
+      onChange = props.onChange,
+      onClear = props.onClear,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
     var innerRef = React.useRef(null);
     var ref = plasmaCore.useForkRef(outerRef, innerRef);
@@ -105,16 +109,22 @@ var attachRoot = function attachRoot(Root) {
       }
       inputRef.current.click();
     };
-    var handleChange = function handleChange() {
-      if (!inputRef.current || !inputRef.current.files) {
+    var handleChange = function handleChange(e) {
+      if (!e.target.files) {
         return;
       }
-      setFilename(inputRef.current.files[0].name);
+      if (onChange) {
+        onChange(e);
+      }
+      setFilename(e.target.files[0].name);
     };
     var handleClear = function handleClear() {
       if (!inputRef.current) {
         return;
       }
+      if (onClear) {
+        onClear();
+      }
       inputRef.current.value = '';
       setFilename('');
       setTruncatedFilename('');
@@ -129,12 +139,11 @@ var attachRoot = function attachRoot(Root) {
       ref: inputRef,
       accept: accept,
       type: "file",
-      id: "attachHiddenInput",
-      name: "attachHiddenInput",
+      id: id,
+      name: name,
       onChange: handleChange
     }), /*#__PURE__*/React.createElement(Attach_styles.StyledHiddenInputHelper, {
-      ref: inputHelperRef,
-      id: "attachHiddenInputHelper"
+      ref: inputHelperRef
     }, filename), /*#__PURE__*/React.createElement(AttachButton.AttachButton, _rollupPluginBabelHelpers.extends({
       buttonType: buttonType,
       view: view,

package/cjs/components/Attach/Attach.js.map

@@ -1 +1 @@
-{"version":3,"file":"Attach.js","sources":["../../../src/components/Attach/Attach.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport { useForkRef, useIsomorphicLayoutEffect } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\nimport { IconCloseCircleOutline } from '../_Icon';\n\nimport { AttachProps } from './Attach.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, StyledHiddenInput, StyledHiddenInputHelper } from './Attach.styles';\nimport { StyledCell } from './ui/Cell/Cell';\nimport { extractExtension, getFileicon, addSeparator, separator } from './utils';\nimport { classes } from './Attach.tokens';\nimport { AttachButton } from './components/AttachButton';\nimport { StyledIconButtonCancel } from './ui/IconButton/IconButton.styles';\n\nexport const attachRoot = (Root: RootProps<HTMLDivElement, AttachProps>) =>\n    forwardRef<HTMLDivElement, AttachProps>((props, outerRef) => {\n        const {\n            flow = 'auto',\n            buttonType = 'button',\n            hasAttachment = true,\n            acceptedFileFormats,\n            size,\n            view,\n            className,\n            style,\n            isLoading,\n            disabled,\n            ...rest\n        } = props;\n\n        const innerRef = useRef<HTMLDivElement>(null);\n        const ref = useForkRef(outerRef, innerRef);\n\n        const inputRef = useRef<HTMLInputElement | null>(null);\n        const inputHelperRef = useRef<HTMLDivElement | null>(null);\n        const cellRef = useRef<HTMLDivElement | null>(null);\n        const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n        const emptyTextCellWidth = useRef<number | null>(null);\n\n        const [filename, setFilename] = useState<string>('');\n        const [truncatedFilename, setTruncatedFilename] = useState<string>('');\n\n        const horizontalClass = flow === 'horizontal' ? classes.horizontal : undefined;\n        const verticalClass = flow === 'vertical' ? classes.vertical : undefined;\n        const autoClass = flow === 'auto' ? classes.auto : undefined;\n        const cellHiddenClass = truncatedFilename.length === 0 ? classes.cellHidden : undefined;\n\n        const accept = acceptedFileFormats?.join(',');\n        const extension = extractExtension(filename);\n        const cellContentLeft = getFileicon(extension, size);\n\n        useEffect(() => {\n            emptyTextCellWidth.current = cellRef.current?.offsetWidth || 0;\n        }, []);\n\n        useIsomorphicLayoutEffect(() => {\n            if (\n                !cellRef.current ||\n                !cellRef.current.parentElement ||\n                !inputHelperRef.current ||\n                !inputHelperRef.current.textContent ||\n                !emptyTextCellWidth.current ||\n                !buttonRef.current\n            ) {\n                return;\n            }\n\n            const { offsetWidth: textWidth } = inputHelperRef.current;\n            const { offsetWidth: buttonWidth } = buttonRef.current;\n            const { width: parentWidth, left: parentLeft } = cellRef.current.parentElement.getBoundingClientRect();\n            const { left: cellLeft } = cellRef.current.getBoundingClientRect();\n            const leftDiff = cellLeft - parentLeft;\n            let currentTextWidth = textWidth;\n\n            if (\n                currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth ||\n                currentTextWidth + emptyTextCellWidth.current < buttonWidth\n            ) {\n                setTruncatedFilename(filename);\n                return;\n            }\n\n            let currFilename = addSeparator(filename, separator);\n            for (let i = currFilename.indexOf(separator) - 1; i > 0; i -= 1) {\n                if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth) {\n                    break;\n                }\n\n                const left = currFilename.slice(0, i);\n                const right = currFilename.slice(i + 1);\n                const newFilename = `${left}${right}`;\n                inputHelperRef.current.textContent = newFilename;\n                currentTextWidth = inputHelperRef.current.offsetWidth;\n\n                if (currentTextWidth + emptyTextCellWidth.current < buttonWidth) {\n                    break;\n                }\n\n                currFilename = newFilename;\n            }\n\n            inputHelperRef.current.textContent = filename;\n            setTruncatedFilename(currFilename);\n        });\n\n        const handleClick = () => {\n            if (!inputRef.current) {\n                return;\n            }\n\n            inputRef.current.click();\n        };\n\n        const handleChange = () => {\n            if (!inputRef.current || !inputRef.current.files) {\n                return;\n            }\n\n            setFilename(inputRef.current.files[0].name);\n        };\n\n        const handleClear = () => {\n            if (!inputRef.current) {\n                return;\n            }\n\n            inputRef.current.value = '';\n            setFilename('');\n            setTruncatedFilename('');\n        };\n\n        return (\n            <Root\n                className={cx(horizontalClass, verticalClass, autoClass, className)}\n                style={style}\n                size={size}\n                view={view}\n                ref={ref}\n            >\n                <StyledHiddenInput\n                    ref={inputRef}\n                    accept={accept}\n                    type=\"file\"\n                    id=\"attachHiddenInput\"\n                    name=\"attachHiddenInput\"\n                    onChange={handleChange}\n                />\n                <StyledHiddenInputHelper ref={inputHelperRef} id=\"attachHiddenInputHelper\">\n                    {filename}\n                </StyledHiddenInputHelper>\n\n                <AttachButton\n                    buttonType={buttonType}\n                    view={view}\n                    size={size}\n                    onClick={handleClick}\n                    isLoading={isLoading}\n                    disabled={disabled}\n                    ref={buttonRef}\n                    {...rest}\n                />\n                {hasAttachment && (\n                    <StyledCell\n                        stretching=\"fixed\"\n                        className={cellHiddenClass}\n                        ref={cellRef}\n                        size={size}\n                        title={truncatedFilename}\n                        contentLeft={cellContentLeft}\n                        contentRight={\n                            <StyledIconButtonCancel view={view} size={size} onClick={handleClear}>\n                                <IconCloseCircleOutline size=\"xs\" color=\"inherit\" />\n                            </StyledIconButtonCancel>\n                        }\n                    />\n                )}\n            </Root>\n        );\n    });\n\nexport const attachConfig = {\n    name: 'Attach',\n    tag: 'div',\n    layout: attachRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'm',\n    },\n};\n"],"names":["attachRoot","Root","forwardRef","props","outerRef","_props$flow","flow","_props$buttonType","buttonType","_props$hasAttachment","hasAttachment","acceptedFileFormats","size","view","className","style","isLoading","disabled","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","inputRef","inputHelperRef","cellRef","buttonRef","emptyTextCellWidth","_useState","useState","_useState2","_slicedToArray","filename","setFilename","_useState3","_useState4","truncatedFilename","setTruncatedFilename","horizontalClass","classes","horizontal","undefined","verticalClass","vertical","autoClass","auto","cellHiddenClass","length","cellHidden","accept","join","extension","extractExtension","cellContentLeft","getFileicon","useEffect","_cellRef$current","current","offsetWidth","useIsomorphicLayoutEffect","parentElement","textContent","textWidth","buttonWidth","_cellRef$current$pare","getBoundingClientRect","parentWidth","width","parentLeft","left","_cellRef$current$getB","cellLeft","leftDiff","currentTextWidth","currFilename","addSeparator","separator","i","indexOf","slice","right","newFilename","concat","handleClick","click","handleChange","files","name","handleClear","value","React","createElement","cx","StyledHiddenInput","type","id","onChange","StyledHiddenInputHelper","AttachButton","_extends","onClick","StyledCell","stretching","title","contentLeft","contentRight","StyledIconButtonCancel","_IconCloseCircleOutli","IconCloseCircleOutline","color","attachConfig","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}
+{"version":3,"file":"Attach.js","sources":["../../../src/components/Attach/Attach.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { ChangeEvent } from 'react';\nimport { useForkRef, useIsomorphicLayoutEffect } from '@salutejs/plasma-core';\n\nimport { RootProps } from '../../engines';\nimport { cx } from '../../utils';\nimport { IconCloseCircleOutline } from '../_Icon';\n\nimport { AttachProps } from './Attach.types';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base, StyledHiddenInput, StyledHiddenInputHelper } from './Attach.styles';\nimport { StyledCell } from './ui/Cell/Cell';\nimport { extractExtension, getFileicon, addSeparator, separator } from './utils';\nimport { classes } from './Attach.tokens';\nimport { AttachButton } from './components/AttachButton';\nimport { StyledIconButtonCancel } from './ui/IconButton/IconButton.styles';\n\nexport const attachRoot = (Root: RootProps<HTMLDivElement, AttachProps>) =>\n    forwardRef<HTMLDivElement, AttachProps>((props, outerRef) => {\n        const {\n            flow = 'auto',\n            buttonType = 'button',\n            hasAttachment = true,\n            acceptedFileFormats,\n            size,\n            view,\n            className,\n            style,\n            isLoading,\n            disabled,\n            id,\n            name,\n            onChange,\n            onClear,\n            ...rest\n        } = props;\n\n        const innerRef = useRef<HTMLDivElement>(null);\n        const ref = useForkRef(outerRef, innerRef);\n\n        const inputRef = useRef<HTMLInputElement | null>(null);\n        const inputHelperRef = useRef<HTMLDivElement | null>(null);\n        const cellRef = useRef<HTMLDivElement | null>(null);\n        const buttonRef = useRef<HTMLButtonElement | null>(null);\n\n        const emptyTextCellWidth = useRef<number | null>(null);\n\n        const [filename, setFilename] = useState<string>('');\n        const [truncatedFilename, setTruncatedFilename] = useState<string>('');\n\n        const horizontalClass = flow === 'horizontal' ? classes.horizontal : undefined;\n        const verticalClass = flow === 'vertical' ? classes.vertical : undefined;\n        const autoClass = flow === 'auto' ? classes.auto : undefined;\n        const cellHiddenClass = truncatedFilename.length === 0 ? classes.cellHidden : undefined;\n\n        const accept = acceptedFileFormats?.join(',');\n        const extension = extractExtension(filename);\n        const cellContentLeft = getFileicon(extension, size);\n\n        useEffect(() => {\n            emptyTextCellWidth.current = cellRef.current?.offsetWidth || 0;\n        }, []);\n\n        useIsomorphicLayoutEffect(() => {\n            if (\n                !cellRef.current ||\n                !cellRef.current.parentElement ||\n                !inputHelperRef.current ||\n                !inputHelperRef.current.textContent ||\n                !emptyTextCellWidth.current ||\n                !buttonRef.current\n            ) {\n                return;\n            }\n\n            const { offsetWidth: textWidth } = inputHelperRef.current;\n            const { offsetWidth: buttonWidth } = buttonRef.current;\n            const { width: parentWidth, left: parentLeft } = cellRef.current.parentElement.getBoundingClientRect();\n            const { left: cellLeft } = cellRef.current.getBoundingClientRect();\n            const leftDiff = cellLeft - parentLeft;\n            let currentTextWidth = textWidth;\n\n            if (\n                currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth ||\n                currentTextWidth + emptyTextCellWidth.current < buttonWidth\n            ) {\n                setTruncatedFilename(filename);\n                return;\n            }\n\n            let currFilename = addSeparator(filename, separator);\n            for (let i = currFilename.indexOf(separator) - 1; i > 0; i -= 1) {\n                if (currentTextWidth + emptyTextCellWidth.current + leftDiff <= parentWidth) {\n                    break;\n                }\n\n                const left = currFilename.slice(0, i);\n                const right = currFilename.slice(i + 1);\n                const newFilename = `${left}${right}`;\n                inputHelperRef.current.textContent = newFilename;\n                currentTextWidth = inputHelperRef.current.offsetWidth;\n\n                if (currentTextWidth + emptyTextCellWidth.current < buttonWidth) {\n                    break;\n                }\n\n                currFilename = newFilename;\n            }\n\n            inputHelperRef.current.textContent = filename;\n            setTruncatedFilename(currFilename);\n        });\n\n        const handleClick = () => {\n            if (!inputRef.current) {\n                return;\n            }\n\n            inputRef.current.click();\n        };\n\n        const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n            if (!e.target.files) {\n                return;\n            }\n\n            if (onChange) {\n                onChange(e);\n            }\n\n            setFilename(e.target.files[0].name);\n        };\n\n        const handleClear = () => {\n            if (!inputRef.current) {\n                return;\n            }\n\n            if (onClear) {\n                onClear();\n            }\n\n            inputRef.current.value = '';\n            setFilename('');\n            setTruncatedFilename('');\n        };\n\n        return (\n            <Root\n                className={cx(horizontalClass, verticalClass, autoClass, className)}\n                style={style}\n                size={size}\n                view={view}\n                ref={ref}\n            >\n                <StyledHiddenInput\n                    ref={inputRef}\n                    accept={accept}\n                    type=\"file\"\n                    id={id}\n                    name={name}\n                    onChange={handleChange}\n                />\n                <StyledHiddenInputHelper ref={inputHelperRef}>{filename}</StyledHiddenInputHelper>\n\n                <AttachButton\n                    buttonType={buttonType}\n                    view={view}\n                    size={size}\n                    onClick={handleClick}\n                    isLoading={isLoading}\n                    disabled={disabled}\n                    ref={buttonRef}\n                    {...rest}\n                />\n                {hasAttachment && (\n                    <StyledCell\n                        stretching=\"fixed\"\n                        className={cellHiddenClass}\n                        ref={cellRef}\n                        size={size}\n                        title={truncatedFilename}\n                        contentLeft={cellContentLeft}\n                        contentRight={\n                            <StyledIconButtonCancel view={view} size={size} onClick={handleClear}>\n                                <IconCloseCircleOutline size=\"xs\" color=\"inherit\" />\n                            </StyledIconButtonCancel>\n                        }\n                    />\n                )}\n            </Root>\n        );\n    });\n\nexport const attachConfig = {\n    name: 'Attach',\n    tag: 'div',\n    layout: attachRoot,\n    base,\n    variations: {\n        view: {\n            css: viewCSS,\n        },\n        size: {\n            css: sizeCSS,\n        },\n    },\n    defaults: {\n        view: 'default',\n        size: 'm',\n    },\n};\n"],"names":["attachRoot","Root","forwardRef","props","outerRef","_props$flow","flow","_props$buttonType","buttonType","_props$hasAttachment","hasAttachment","acceptedFileFormats","size","view","className","style","isLoading","disabled","id","name","onChange","onClear","rest","_objectWithoutProperties","_excluded","innerRef","useRef","ref","useForkRef","inputRef","inputHelperRef","cellRef","buttonRef","emptyTextCellWidth","_useState","useState","_useState2","_slicedToArray","filename","setFilename","_useState3","_useState4","truncatedFilename","setTruncatedFilename","horizontalClass","classes","horizontal","undefined","verticalClass","vertical","autoClass","auto","cellHiddenClass","length","cellHidden","accept","join","extension","extractExtension","cellContentLeft","getFileicon","useEffect","_cellRef$current","current","offsetWidth","useIsomorphicLayoutEffect","parentElement","textContent","textWidth","buttonWidth","_cellRef$current$pare","getBoundingClientRect","parentWidth","width","parentLeft","left","_cellRef$current$getB","cellLeft","leftDiff","currentTextWidth","currFilename","addSeparator","separator","i","indexOf","slice","right","newFilename","concat","handleClick","click","handleChange","e","target","files","handleClear","value","React","createElement","cx","StyledHiddenInput","type","StyledHiddenInputHelper","AttachButton","_extends","onClick","StyledCell","stretching","title","contentLeft","contentRight","StyledIconButtonCancel","_IconCloseCircleOutli","IconCloseCircleOutline","color","attachConfig","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}

package/cjs/components/Combobox/ComboboxNew/utils/filterItems.js

@@ -13,15 +13,15 @@ var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabel
 // Не мутирует исходные данные.
 var filterItems = function filterItems(items, textValue, currentLabel, customFilter) {
   if (!textValue || textValue === currentLabel) return items;
-  var defaultFilter = function defaultFilter(label, value) {
-    return label.toLowerCase().includes(value.toLowerCase());
+  var defaultFilter = function defaultFilter(item, value) {
+    return item.label.toLowerCase().includes(value.toLowerCase());
   };
   var filter = customFilter || defaultFilter;
   var dfs = function dfs(items) {
     var newItems = [];
     items.forEach(function (item) {
       if (item.items) {
-        if (filter(item.label, textValue)) {
+        if (filter(item, textValue)) {
           newItems.push(item);
           return;
         }
@@ -31,13 +31,12 @@ var filterItems = function filterItems(items, textValue, currentLabel, customFil
             items: res
           }));
         }
-      } else if (filter(item.label, textValue)) {
+      } else if (filter(item, textValue)) {
         newItems.push(item);
       }
     });
     return newItems;
   };
-  dfs(items);
   return dfs(items);
 };
 

package/cjs/components/Combobox/ComboboxNew/utils/filterItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"filterItems.js","sources":["../../../../../src/components/Combobox/ComboboxNew/utils/filterItems.ts"],"sourcesContent":["import { ItemOptionTransformed } from '../ui/Inner/ui/Item/Item.types';\n\n// Утилита, возвращающая отфильтрованное дерево items.\n// Фильтрация происходит как по названиям категорий, так и по названиям конечных элементов.\n// По дефолту регистр игнорируется. Но можно прокинуть свою функцию для кастомной фильтрации.\n// Фильтрация отключается в 2 случаях:\n//   1) При пустом инпуте (юзер пока еще не ввел значение или уже очистил);\n//   2) Если значение инпута совпадает с выбранным элементом (когда юзер выбрал айтем, но потом решил снова открыть);\n// Не мутирует исходные данные.\nexport const filterItems = (\n    items: Array<ItemOptionTransformed>,\n    textValue: string,\n    currentLabel: string,\n    customFilter?: (label: string, value: string) => boolean,\n): Array<ItemOptionTransformed> => {\n    if (!textValue || textValue === currentLabel) return items;\n\n    const defaultFilter = (label: string, value: string) => label.toLowerCase().includes(value.toLowerCase());\n\n    const filter = customFilter || defaultFilter;\n\n    const dfs = (items: Array<ItemOptionTransformed>) => {\n        const newItems: Array<ItemOptionTransformed> = [];\n\n        items.forEach((item) => {\n            if (item.items) {\n                if (filter(item.label, textValue)) {\n                    newItems.push(item);\n                    return;\n                }\n\n                const res = dfs(item.items);\n\n                if (res.length > 0) {\n                    newItems.push({ ...item, items: res });\n                }\n            } else if (filter(item.label, textValue)) {\n                newItems.push(item);\n            }\n        });\n\n        return newItems;\n    };\n    dfs(items);\n\n    return dfs(items);\n};\n"],"names":["filterItems","items","textValue","currentLabel","customFilter","defaultFilter","label","value","toLowerCase","includes","filter","dfs","newItems","forEach","item","push","res","length","_objectSpread"],"mappings":";;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,IAAAA,WAAW,GAAG,SAAdA,WAAWA,CACpBC,KAAmC,EACnCC,SAAiB,EACjBC,YAAoB,EACpBC,YAAwD,EACzB;EAC/B,IAAI,CAACF,SAAS,IAAIA,SAAS,KAAKC,YAAY,EAAE,OAAOF,KAAK,CAAA;AAE1D,EAAA,IAAMI,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,KAAa,EAAEC,KAAa,EAAA;AAAA,IAAA,OAAKD,KAAK,CAACE,WAAW,EAAE,CAACC,QAAQ,CAACF,KAAK,CAACC,WAAW,EAAE,CAAC,CAAA;AAAA,GAAA,CAAA;AAEzG,EAAA,IAAME,MAAM,GAAGN,YAAY,IAAIC,aAAa,CAAA;AAE5C,EAAA,IAAMM,GAAG,GAAG,SAANA,GAAGA,CAAIV,KAAmC,EAAK;IACjD,IAAMW,QAAsC,GAAG,EAAE,CAAA;AAEjDX,IAAAA,KAAK,CAACY,OAAO,CAAC,UAACC,IAAI,EAAK;MACpB,IAAIA,IAAI,CAACb,KAAK,EAAE;QACZ,IAAIS,MAAM,CAACI,IAAI,CAACR,KAAK,EAAEJ,SAAS,CAAC,EAAE;AAC/BU,UAAAA,QAAQ,CAACG,IAAI,CAACD,IAAI,CAAC,CAAA;AACnB,UAAA,OAAA;AACJ,SAAA;AAEA,QAAA,IAAME,GAAG,GAAGL,GAAG,CAACG,IAAI,CAACb,KAAK,CAAC,CAAA;AAE3B,QAAA,IAAIe,GAAG,CAACC,MAAM,GAAG,CAAC,EAAE;AAChBL,UAAAA,QAAQ,CAACG,IAAI,CAAAG,uCAAA,CAAAA,uCAAA,KAAMJ,IAAI,CAAA,EAAA,EAAA,EAAA;AAAEb,YAAAA,KAAK,EAAEe,GAAAA;AAAG,WAAA,CAAE,CAAC,CAAA;AAC1C,SAAA;OACH,MAAM,IAAIN,MAAM,CAACI,IAAI,CAACR,KAAK,EAAEJ,SAAS,CAAC,EAAE;AACtCU,QAAAA,QAAQ,CAACG,IAAI,CAACD,IAAI,CAAC,CAAA;AACvB,OAAA;AACJ,KAAC,CAAC,CAAA;AAEF,IAAA,OAAOF,QAAQ,CAAA;GAClB,CAAA;EACDD,GAAG,CAACV,KAAK,CAAC,CAAA;EAEV,OAAOU,GAAG,CAACV,KAAK,CAAC,CAAA;AACrB;;;;"}
+{"version":3,"file":"filterItems.js","sources":["../../../../../src/components/Combobox/ComboboxNew/utils/filterItems.ts"],"sourcesContent":["import { ItemOptionTransformed, ItemOption } from '../ui/Inner/ui/Item/Item.types';\n\n// Утилита, возвращающая отфильтрованное дерево items.\n// Фильтрация происходит как по названиям категорий, так и по названиям конечных элементов.\n// По дефолту регистр игнорируется. Но можно прокинуть свою функцию для кастомной фильтрации.\n// Фильтрация отключается в 2 случаях:\n//   1) При пустом инпуте (юзер пока еще не ввел значение или уже очистил);\n//   2) Если значение инпута совпадает с выбранным элементом (когда юзер выбрал айтем, но потом решил снова открыть);\n// Не мутирует исходные данные.\nexport const filterItems = (\n    items: Array<ItemOptionTransformed>,\n    textValue: string,\n    currentLabel: string,\n    customFilter?: (item: ItemOption, value: string) => boolean,\n): Array<ItemOptionTransformed> => {\n    if (!textValue || textValue === currentLabel) return items;\n\n    const defaultFilter = (item: ItemOption, value: string) => item.label.toLowerCase().includes(value.toLowerCase());\n\n    const filter = customFilter || defaultFilter;\n\n    const dfs = (items: Array<ItemOptionTransformed>) => {\n        const newItems: Array<ItemOptionTransformed> = [];\n\n        items.forEach((item) => {\n            if (item.items) {\n                if (filter(item, textValue)) {\n                    newItems.push(item);\n                    return;\n                }\n\n                const res = dfs(item.items);\n\n                if (res.length > 0) {\n                    newItems.push({ ...item, items: res });\n                }\n            } else if (filter(item, textValue)) {\n                newItems.push(item);\n            }\n        });\n\n        return newItems;\n    };\n\n    return dfs(items);\n};\n"],"names":["filterItems","items","textValue","currentLabel","customFilter","defaultFilter","item","value","label","toLowerCase","includes","filter","dfs","newItems","forEach","push","res","length","_objectSpread"],"mappings":";;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACaA,IAAAA,WAAW,GAAG,SAAdA,WAAWA,CACpBC,KAAmC,EACnCC,SAAiB,EACjBC,YAAoB,EACpBC,YAA2D,EAC5B;EAC/B,IAAI,CAACF,SAAS,IAAIA,SAAS,KAAKC,YAAY,EAAE,OAAOF,KAAK,CAAA;AAE1D,EAAA,IAAMI,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,IAAgB,EAAEC,KAAa,EAAA;AAAA,IAAA,OAAKD,IAAI,CAACE,KAAK,CAACC,WAAW,EAAE,CAACC,QAAQ,CAACH,KAAK,CAACE,WAAW,EAAE,CAAC,CAAA;AAAA,GAAA,CAAA;AAEjH,EAAA,IAAME,MAAM,GAAGP,YAAY,IAAIC,aAAa,CAAA;AAE5C,EAAA,IAAMO,GAAG,GAAG,SAANA,GAAGA,CAAIX,KAAmC,EAAK;IACjD,IAAMY,QAAsC,GAAG,EAAE,CAAA;AAEjDZ,IAAAA,KAAK,CAACa,OAAO,CAAC,UAACR,IAAI,EAAK;MACpB,IAAIA,IAAI,CAACL,KAAK,EAAE;AACZ,QAAA,IAAIU,MAAM,CAACL,IAAI,EAAEJ,SAAS,CAAC,EAAE;AACzBW,UAAAA,QAAQ,CAACE,IAAI,CAACT,IAAI,CAAC,CAAA;AACnB,UAAA,OAAA;AACJ,SAAA;AAEA,QAAA,IAAMU,GAAG,GAAGJ,GAAG,CAACN,IAAI,CAACL,KAAK,CAAC,CAAA;AAE3B,QAAA,IAAIe,GAAG,CAACC,MAAM,GAAG,CAAC,EAAE;AAChBJ,UAAAA,QAAQ,CAACE,IAAI,CAAAG,uCAAA,CAAAA,uCAAA,KAAMZ,IAAI,CAAA,EAAA,EAAA,EAAA;AAAEL,YAAAA,KAAK,EAAEe,GAAAA;AAAG,WAAA,CAAE,CAAC,CAAA;AAC1C,SAAA;OACH,MAAM,IAAIL,MAAM,CAACL,IAAI,EAAEJ,SAAS,CAAC,EAAE;AAChCW,QAAAA,QAAQ,CAACE,IAAI,CAACT,IAAI,CAAC,CAAA;AACvB,OAAA;AACJ,KAAC,CAAC,CAAA;AAEF,IAAA,OAAOO,QAAQ,CAAA;GAClB,CAAA;EAED,OAAOD,GAAG,CAACX,KAAK,CAAC,CAAA;AACrB;;;;"}

package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.css

@@ -14,11 +14,11 @@
 
 .base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c .base_1ejecy9_spuzt9m__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c .base_1ejecy9_sin9wo2__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
 
-.SegmentGroup_styles_1tb4sy2_b2sori2__62a256d9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}.SegmentGroup_styles_1tb4sy2_b2sori2__62a256d9:before{border-radius:var(--plasma-segment-group-border-radius);}
-.SegmentGroup_styles_1tb4sy2_sin9wo2__62a256d9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}
-.SegmentGroup_styles_1tb4sy2_spuzt9m__62a256d9{position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.SegmentGroup_styles_1tb4sy2_spuzt9m__62a256d9.SegmentGroup_styles_1tb4sy2_segmentGroupClipScroll__62a256d9{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.SegmentGroup_styles_1tb4sy2_spuzt9m__62a256d9.SegmentGroup_styles_1tb4sy2_segmentGroupClipScroll__62a256d9::-webkit-scrollbar{display:none;}.SegmentGroup_styles_1tb4sy2_spuzt9m__62a256d9.SegmentGroup_styles_1tb4sy2_segmentGroupClipScroll__62a256d9 .SegmentGroup_styles_1tb4sy2_sin9wo2__62a256d9{max-width:none;}
-.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;position:relative;}.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9.SegmentGroup_styles_1tb4sy2_focusVisible__62a256d9:focus::before,.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9[disabled]{cursor:not-allowed;}
-.SegmentGroup_styles_1tb4sy2_s3pgccr__62a256d9.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{padding:var(--plasma-segment-group-arrow-padding);padding-right:0;margin-right:0.1875rem;margin-left:0.125rem;}
-.SegmentGroup_styles_1tb4sy2_sax6mvm__62a256d9.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{padding:var(--plasma-segment-group-arrow-padding);padding-left:0;margin-left:0.1875rem;margin-right:0.125rem;}
-.SegmentGroup_styles_1tb4sy2_s1n81rr8__62a256d9.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-bottom:0;margin-bottom:0.1875rem;}
-.SegmentGroup_styles_1tb4sy2_s7ukuvj__62a256d9.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-top:0;margin-top:0.1875rem;}
+.SegmentGroup_styles_zqao76_b2sori2__a2d03c15{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}.SegmentGroup_styles_zqao76_b2sori2__a2d03c15.SegmentGroup_styles_zqao76_segmentVertical__a2d03c15{max-width:none;max-height:100%;}.SegmentGroup_styles_zqao76_b2sori2__a2d03c15:before{border-radius:var(--plasma-segment-group-border-radius);}
+.SegmentGroup_styles_zqao76_sin9wo2__a2d03c15{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}
+.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15{position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15.SegmentGroup_styles_zqao76_segmentGroupClipScroll__a2d03c15{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15.SegmentGroup_styles_zqao76_segmentGroupClipScroll__a2d03c15::-webkit-scrollbar{display:none;}.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15.SegmentGroup_styles_zqao76_segmentGroupClipScroll__a2d03c15 .SegmentGroup_styles_zqao76_sin9wo2__a2d03c15{max-width:none;}
+.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;position:relative;}.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15.SegmentGroup_styles_zqao76_focusVisible__a2d03c15:focus::before,.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15[disabled]{cursor:not-allowed;}
+.SegmentGroup_styles_zqao76_s3pgccr__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-arrow-padding);padding-right:0;margin-right:0.1875rem;margin-left:0.125rem;}
+.SegmentGroup_styles_zqao76_sax6mvm__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-arrow-padding);padding-left:0;margin-left:0.1875rem;margin-right:0.125rem;}
+.SegmentGroup_styles_zqao76_s1n81rr8__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-bottom:0;margin-bottom:0.1875rem;}
+.SegmentGroup_styles_zqao76_s7ukuvj__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-top:0;margin-top:0.1875rem;}

package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js

@@ -1,4 +1,4 @@
-import './SegmentGroup.styles_1tb4sy2.css';
+import './SegmentGroup.styles_zqao76.css';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -21,34 +21,34 @@ var StyledArrow = /*#__PURE__*/react.styled('button')({
   "class": "s1qf4oye",
   propsAsIs: false
 });
-var _exp5 = function _exp5() {
+var _exp6 = function _exp6() {
   return StyledArrow;
 };
-var StyledLeftArrow = /*#__PURE__*/react.styled(_exp5())({
+var StyledLeftArrow = /*#__PURE__*/react.styled(_exp6())({
   name: "StyledLeftArrow",
   "class": "s3pgccr",
   propsAsIs: true
 });
-var _exp7 = function _exp7() {
+var _exp8 = function _exp8() {
   return StyledArrow;
 };
-var StyledRightArrow = /*#__PURE__*/react.styled(_exp7())({
+var StyledRightArrow = /*#__PURE__*/react.styled(_exp8())({
   name: "StyledRightArrow",
   "class": "sax6mvm",
   propsAsIs: true
 });
-var _exp9 = function _exp9() {
+var _exp10 = function _exp10() {
   return StyledArrow;
 };
-var StyledTopArrow = /*#__PURE__*/react.styled(_exp9())({
+var StyledTopArrow = /*#__PURE__*/react.styled(_exp10())({
   name: "StyledTopArrow",
   "class": "s1n81rr8",
   propsAsIs: true
 });
-var _exp11 = function _exp11() {
+var _exp12 = function _exp12() {
   return StyledArrow;
 };
-var StyledBottomArrow = /*#__PURE__*/react.styled(_exp11())({
+var StyledBottomArrow = /*#__PURE__*/react.styled(_exp12())({
   name: "StyledBottomArrow",
   "class": "s7ukuvj",
   propsAsIs: true

package/cjs/components/Segment/ui/SegmentGroup/SegmentGroup.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentGroup.styles.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { addFocus } from '../../../../mixins';\nimport { classes, tokens } from '../../tokens';\n\nexport const base = css`\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n\n    &:before {\n        border-radius: var(${tokens.groupBorderRadius});\n    }\n`;\n\nexport const StyledContent = styled.div`\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    max-width: 100%;\n`;\n\nexport const StyledContentWrapper = styled.div`\n    position: relative;\n    height: 100%;\n    width: 100%;\n\n    display: flex;\n    align-items: center;\n\n    &.${classes.segmentGroupClipScroll} {\n        overflow: scroll;\n        scroll-padding: 0.25rem;\n        overscroll-behavior: contain;\n\n        scrollbar-width: none;\n        ::-webkit-scrollbar {\n            display: none;\n        }\n\n        ${StyledContent} {\n            max-width: none;\n        }\n    }\n`;\n\nexport const StyledArrow = styled.button`\n    display: flex;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n    outline: none;\n\n    ${addFocus({\n        outlineSize: '0.063rem',\n        outlineOffset: '-0.125rem',\n        outlineColor: `var(${tokens.outlineFocusColor})`,\n        outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)',\n    })};\n\n    &[disabled] {\n        cursor: not-allowed;\n    }\n`;\n\nexport const StyledLeftArrow = styled(StyledArrow)`\n    padding: var(${tokens.groupArrowPadding});\n    padding-right: 0;\n    margin-right: 0.1875rem;\n    margin-left: 0.125rem;\n`;\n\nexport const StyledRightArrow = styled(StyledArrow)`\n    padding: var(${tokens.groupArrowPadding});\n    padding-left: 0;\n    margin-left: 0.1875rem;\n    margin-right: 0.125rem;\n`;\n\nexport const StyledTopArrow = styled(StyledArrow)`\n    padding: var(${tokens.groupVerticalArrowPadding});\n    padding-bottom: 0;\n    margin-bottom: 0.1875rem;\n`;\n\nexport const StyledBottomArrow = styled(StyledArrow)`\n    padding: var(${tokens.groupVerticalArrowPadding});\n    padding-top: 0;\n    margin-top: 0.1875rem;\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper","StyledArrow","_exp5","StyledLeftArrow","_exp7","StyledRightArrow","_exp9","StyledTopArrow","_exp11","StyledBottomArrow"],"mappings":";;;;;;AAMO,IAAMA,IAAI,GAQhB,UAAA;AAEM,IAAMC,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKlC,EAAA;AAEM,IAAMC,oBAAoB,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAsBzC,EAAA;AAEM,IAAME,WAAW,gBAAGL,YAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAiBhC,EAAA;AAAC,IAAAG,KAAA,GA/DgBA,SA+DhBA,KAAAA,GAAA;AAAA,EAAA,OAEoCD,WAAW,CAAA;AAAA,CAAA,CAAA;AAA1C,IAAME,eAAe,gBAAGP,YAAM,CAAAM,KAAA,EAAA,CAAA,CAAA;AAAAL,EAAAA,IAAA,EAAA,iBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAKpC,EAAA;AAAC,IAAAK,KAAA,GAtEgBA,SAsEhBA,KAAAA,GAAA;AAAA,EAAA,OAEqCH,WAAW,CAAA;AAAA,CAAA,CAAA;AAA3C,IAAMI,gBAAgB,gBAAGT,YAAM,CAAAQ,KAAA,EAAA,CAAA,CAAA;AAAAP,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAKrC,EAAA;AAAC,IAAAO,KAAA,GA7EgBA,SA6EhBA,KAAAA,GAAA;AAAA,EAAA,OAEmCL,WAAW,CAAA;AAAA,CAAA,CAAA;AAAzC,IAAMM,cAAc,gBAAGX,YAAM,CAAAU,KAAA,EAAA,CAAA,CAAA;AAAAT,EAAAA,IAAA,EAAA,gBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAInC,EAAA;AAAC,IAAAS,MAAA,GAnFgBA,SAmFhBA,MAAAA,GAAA;AAAA,EAAA,OAEsCP,WAAW,CAAA;AAAA,CAAA,CAAA;AAA5C,IAAMQ,iBAAiB,gBAAGb,YAAM,CAAAY,MAAA,EAAA,CAAA,CAAA;AAAAX,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAItC;;;;;;;;;;;"}
+{"version":3,"file":"SegmentGroup.styles.js","sources":["../../../../../src/components/Segment/ui/SegmentGroup/SegmentGroup.styles.ts"],"sourcesContent":["import { css } from '@linaria/core';\nimport { styled } from '@linaria/react';\n\nimport { addFocus } from '../../../../mixins';\nimport { classes, tokens } from '../../tokens';\n\nexport const base = css`\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n\n    &.${classes.segmentVertical} {\n        max-width: none;\n        max-height: 100%;\n    }\n\n    &:before {\n        border-radius: var(${tokens.groupBorderRadius});\n    }\n`;\n\nexport const StyledContent = styled.div`\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    max-width: 100%;\n`;\n\nexport const StyledContentWrapper = styled.div`\n    position: relative;\n    height: 100%;\n    width: 100%;\n\n    display: flex;\n    align-items: center;\n\n    &.${classes.segmentGroupClipScroll} {\n        overflow: scroll;\n        scroll-padding: 0.25rem;\n        overscroll-behavior: contain;\n\n        scrollbar-width: none;\n        ::-webkit-scrollbar {\n            display: none;\n        }\n\n        ${StyledContent} {\n            max-width: none;\n        }\n    }\n`;\n\nexport const StyledArrow = styled.button`\n    display: flex;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n    outline: none;\n\n    ${addFocus({\n        outlineSize: '0.063rem',\n        outlineOffset: '-0.125rem',\n        outlineColor: `var(${tokens.outlineFocusColor})`,\n        outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)',\n    })};\n\n    &[disabled] {\n        cursor: not-allowed;\n    }\n`;\n\nexport const StyledLeftArrow = styled(StyledArrow)`\n    padding: var(${tokens.groupArrowPadding});\n    padding-right: 0;\n    margin-right: 0.1875rem;\n    margin-left: 0.125rem;\n`;\n\nexport const StyledRightArrow = styled(StyledArrow)`\n    padding: var(${tokens.groupArrowPadding});\n    padding-left: 0;\n    margin-left: 0.1875rem;\n    margin-right: 0.125rem;\n`;\n\nexport const StyledTopArrow = styled(StyledArrow)`\n    padding: var(${tokens.groupVerticalArrowPadding});\n    padding-bottom: 0;\n    margin-bottom: 0.1875rem;\n`;\n\nexport const StyledBottomArrow = styled(StyledArrow)`\n    padding: var(${tokens.groupVerticalArrowPadding});\n    padding-top: 0;\n    margin-top: 0.1875rem;\n`;\n"],"names":["base","StyledContent","styled","name","class","propsAsIs","StyledContentWrapper","StyledArrow","_exp6","StyledLeftArrow","_exp8","StyledRightArrow","_exp10","StyledTopArrow","_exp12","StyledBottomArrow"],"mappings":";;;;;;AAMO,IAAMA,IAAI,GAahB,UAAA;AAEM,IAAMC,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKlC,EAAA;AAEM,IAAMC,oBAAoB,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,sBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAsBzC,EAAA;AAEM,IAAME,WAAW,gBAAGL,YAAM,CAAA,QAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAiBhC,EAAA;AAAC,IAAAG,KAAA,GApEgBA,SAoEhBA,KAAAA,GAAA;AAAA,EAAA,OAEoCD,WAAW,CAAA;AAAA,CAAA,CAAA;AAA1C,IAAME,eAAe,gBAAGP,YAAM,CAAAM,KAAA,EAAA,CAAA,CAAA;AAAAL,EAAAA,IAAA,EAAA,iBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAKpC,EAAA;AAAC,IAAAK,KAAA,GA3EgBA,SA2EhBA,KAAAA,GAAA;AAAA,EAAA,OAEqCH,WAAW,CAAA;AAAA,CAAA,CAAA;AAA3C,IAAMI,gBAAgB,gBAAGT,YAAM,CAAAQ,KAAA,EAAA,CAAA,CAAA;AAAAP,EAAAA,IAAA,EAAA,kBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAKrC,EAAA;AAAC,IAAAO,MAAA,GAlFgBA,SAkFhBA,MAAAA,GAAA;AAAA,EAAA,OAEmCL,WAAW,CAAA;AAAA,CAAA,CAAA;AAAzC,IAAMM,cAAc,gBAAGX,YAAM,CAAAU,MAAA,EAAA,CAAA,CAAA;AAAAT,EAAAA,IAAA,EAAA,gBAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAInC,EAAA;AAAC,IAAAS,MAAA,GAxFgBA,SAwFhBA,MAAAA,GAAA;AAAA,EAAA,OAEsCP,WAAW,CAAA;AAAA,CAAA,CAAA;AAA5C,IAAMQ,iBAAiB,gBAAGb,YAAM,CAAAY,MAAA,EAAA,CAAA,CAAA;AAAAX,EAAAA,IAAA,EAAA,mBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,IAAA;AAAA,CAItC;;;;;;;;;;;"}

package/cjs/components/Segment/ui/SegmentGroup/{SegmentGroup.styles_1tb4sy2.css → SegmentGroup.styles_zqao76.css}

@@ -1,4 +1,4 @@
-.b2sori2{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}.b2sori2:before{border-radius:var(--plasma-segment-group-border-radius);}
+.b2sori2{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}.b2sori2.segment-vertical{max-width:none;max-height:100%;}.b2sori2:before{border-radius:var(--plasma-segment-group-border-radius);}
 .sin9wo2{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}
 .spuzt9m{position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.spuzt9m.segment-group-clip-scroll{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.spuzt9m.segment-group-clip-scroll::-webkit-scrollbar{display:none;}.spuzt9m.segment-group-clip-scroll .sin9wo2{max-width:none;}
 .s1qf4oye{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;position:relative;}.s1qf4oye::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.s1qf4oye.focus-visible:focus::before,.s1qf4oye[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.s1qf4oye[disabled]{cursor:not-allowed;}

package/cjs/index.css

@@ -401,14 +401,14 @@
 
 .base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c .base_1ejecy9_spuzt9m__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.base_1ejecy9_bb2d6sr__61b9631c.base_1ejecy9_segmentVertical__61b9631c .base_1ejecy9_sin9wo2__61b9631c{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
 
-.SegmentGroup_styles_1tb4sy2_b2sori2__62a256d9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}.SegmentGroup_styles_1tb4sy2_b2sori2__62a256d9:before{border-radius:var(--plasma-segment-group-border-radius);}
-.SegmentGroup_styles_1tb4sy2_sin9wo2__62a256d9{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}
-.SegmentGroup_styles_1tb4sy2_spuzt9m__62a256d9{position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.SegmentGroup_styles_1tb4sy2_spuzt9m__62a256d9.SegmentGroup_styles_1tb4sy2_segmentGroupClipScroll__62a256d9{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.SegmentGroup_styles_1tb4sy2_spuzt9m__62a256d9.SegmentGroup_styles_1tb4sy2_segmentGroupClipScroll__62a256d9::-webkit-scrollbar{display:none;}.SegmentGroup_styles_1tb4sy2_spuzt9m__62a256d9.SegmentGroup_styles_1tb4sy2_segmentGroupClipScroll__62a256d9 .SegmentGroup_styles_1tb4sy2_sin9wo2__62a256d9{max-width:none;}
-.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;position:relative;}.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9.SegmentGroup_styles_1tb4sy2_focusVisible__62a256d9:focus::before,.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9[disabled]{cursor:not-allowed;}
-.SegmentGroup_styles_1tb4sy2_s3pgccr__62a256d9.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{padding:var(--plasma-segment-group-arrow-padding);padding-right:0;margin-right:0.1875rem;margin-left:0.125rem;}
-.SegmentGroup_styles_1tb4sy2_sax6mvm__62a256d9.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{padding:var(--plasma-segment-group-arrow-padding);padding-left:0;margin-left:0.1875rem;margin-right:0.125rem;}
-.SegmentGroup_styles_1tb4sy2_s1n81rr8__62a256d9.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-bottom:0;margin-bottom:0.1875rem;}
-.SegmentGroup_styles_1tb4sy2_s7ukuvj__62a256d9.SegmentGroup_styles_1tb4sy2_s1qf4oye__62a256d9{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-top:0;margin-top:0.1875rem;}
+.SegmentGroup_styles_zqao76_b2sori2__a2d03c15{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}.SegmentGroup_styles_zqao76_b2sori2__a2d03c15.SegmentGroup_styles_zqao76_segmentVertical__a2d03c15{max-width:none;max-height:100%;}.SegmentGroup_styles_zqao76_b2sori2__a2d03c15:before{border-radius:var(--plasma-segment-group-border-radius);}
+.SegmentGroup_styles_zqao76_sin9wo2__a2d03c15{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;}
+.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15{position:relative;height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15.SegmentGroup_styles_zqao76_segmentGroupClipScroll__a2d03c15{overflow:scroll;-webkit-scroll-padding:0.25rem;-moz-scroll-padding:0.25rem;-ms-scroll-padding:0.25rem;scroll-padding:0.25rem;overscroll-behavior:contain;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15.SegmentGroup_styles_zqao76_segmentGroupClipScroll__a2d03c15::-webkit-scrollbar{display:none;}.SegmentGroup_styles_zqao76_spuzt9m__a2d03c15.SegmentGroup_styles_zqao76_segmentGroupClipScroll__a2d03c15 .SegmentGroup_styles_zqao76_sin9wo2__a2d03c15{max-width:none;}
+.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;position:relative;}.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15::before{content:'';position:absolute;top:-0.125rem;left:-0.125rem;right:-0.125rem;bottom:-0.125rem;z-index:1;display:block;box-sizing:content-box;border:0.063rem solid transparent;border-radius:calc(var(--plasma_private-outline-radius) - 0.063rem);-webkit-transition:box-shadow 0.2s ease-in-out;transition:box-shadow 0.2s ease-in-out;pointer-events:none;}.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15.SegmentGroup_styles_zqao76_focusVisible__a2d03c15:focus::before,.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15[data-focus-visible-added]::before{outline:none;box-shadow:0 0 0 0.063rem var(--plasma-segment-outline-focus-color);}.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15[disabled]{cursor:not-allowed;}
+.SegmentGroup_styles_zqao76_s3pgccr__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-arrow-padding);padding-right:0;margin-right:0.1875rem;margin-left:0.125rem;}
+.SegmentGroup_styles_zqao76_sax6mvm__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-arrow-padding);padding-left:0;margin-left:0.1875rem;margin-right:0.125rem;}
+.SegmentGroup_styles_zqao76_s1n81rr8__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-bottom:0;margin-bottom:0.1875rem;}
+.SegmentGroup_styles_zqao76_s7ukuvj__a2d03c15.SegmentGroup_styles_zqao76_s1qf4oye__a2d03c15{padding:var(--plasma-segment-group-vertical-arrow-padding);padding-top:0;margin-top:0.1875rem;}
 
 .base_7kjuok_b1kyapt7__5060a19f{font-family:var(--plasma-segment-item-font-family);font-size:var(--plasma-segment-item-font-size);font-style:var(--plasma-segment-item-font-style);font-weight:var(--plasma-segment-item-font-weight);-webkit-letter-spacing:var(--plasma-segment-item-letter-spacing);-moz-letter-spacing:var(--plasma-segment-item-letter-spacing);-ms-letter-spacing:var(--plasma-segment-item-letter-spacing);letter-spacing:var(--plasma-segment-item-letter-spacing);line-height:var(--plasma-segment-item-lineheight);--plasma_private-outline-radius:var(--plasma-segment-item-border-radius);border-radius:var(--plasma-segment-item-border-radius);width:var(--plasma-segment-item-width);height:var(--plasma-segment-item-height);padding:var(--plasma-segment-item-padding);}
 

package/emotion/cjs/components/Attach/Attach.js

@@ -18,7 +18,7 @@ var _Attach2 = /*#__PURE__*/require("./Attach.tokens");
 var _AttachButton = /*#__PURE__*/require("./components/AttachButton");
 var _IconButton = /*#__PURE__*/require("./ui/IconButton/IconButton.styles");
 var _IconCloseCircleOutli;
-var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled"];
+var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled", "id", "name", "onChange", "onClear"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -45,6 +45,10 @@ var attachRoot = exports.attachRoot = function attachRoot(Root) {
       style = props.style,
       isLoading = props.isLoading,
       disabled = props.disabled,
+      id = props.id,
+      name = props.name,
+      onChange = props.onChange,
+      onClear = props.onClear,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = (0, _react.useRef)(null);
     var ref = (0, _plasmaCore.useForkRef)(outerRef, innerRef);
@@ -113,16 +117,22 @@ var attachRoot = exports.attachRoot = function attachRoot(Root) {
       }
       inputRef.current.click();
     };
-    var handleChange = function handleChange() {
-      if (!inputRef.current || !inputRef.current.files) {
+    var handleChange = function handleChange(e) {
+      if (!e.target.files) {
         return;
       }
-      setFilename(inputRef.current.files[0].name);
+      if (onChange) {
+        onChange(e);
+      }
+      setFilename(e.target.files[0].name);
     };
     var handleClear = function handleClear() {
       if (!inputRef.current) {
         return;
       }
+      if (onClear) {
+        onClear();
+      }
       inputRef.current.value = '';
       setFilename('');
       setTruncatedFilename('');
@@ -137,12 +147,11 @@ var attachRoot = exports.attachRoot = function attachRoot(Root) {
       ref: inputRef,
       accept: accept,
       type: "file",
-      id: "attachHiddenInput",
-      name: "attachHiddenInput",
+      id: id,
+      name: name,
       onChange: handleChange
     }), /*#__PURE__*/_react["default"].createElement(_Attach.StyledHiddenInputHelper, {
-      ref: inputHelperRef,
-      id: "attachHiddenInputHelper"
+      ref: inputHelperRef
     }, filename), /*#__PURE__*/_react["default"].createElement(_AttachButton.AttachButton, _extends({
       buttonType: buttonType,
       view: view,

package/emotion/cjs/components/Attach/Attach.template-doc.mdx

@@ -61,3 +61,72 @@ export function App() {
     );
 }
 ```
+
+### Пример использования в форме
+
+```tsx live
+import React, { useState } from 'react';
+import { Attach, Button } from '@salutejs/{{ package }}';
+
+function App() {
+    const ids = ['0', '1', '2'];
+    const [isLoading, setIsLoading] = useState(false);
+    const [attachedFiles, setAttachedFiles] = useState([]);
+
+    const handleAttachFile = (e) => {
+        setAttachedFiles((prevAttachedFiles) => [
+            ...prevAttachedFiles,
+            {
+                fileData: e.target.files[0],
+                id: e.target.id,
+            },
+        ]);
+    };
+
+    const handleAttachClear = (id) => {
+        setAttachedFiles(attachedFiles.filter((file) => file.id !== id));
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        setIsLoading(true);
+  
+        const formData = new FormData(e.target);
+        console.log('formData', Object.fromEntries(formData));
+
+        setTimeout(() => {
+            setAttachedFiles([]);
+            setIsLoading(false);
+        }, 2000);
+    };
+
+    return (
+        <>
+            <span>{isLoading ? 'Форма отправляется' : 'Прикрепленные файлы:'}</span>
+            {!isLoading && attachedFiles.length > 0 && (
+                <div style=\{{ display: 'flex', flexDirection: 'column', gap: '0px' }}>
+                    {attachedFiles.map((file) => (
+                        <span>{file.fileData.name}</span>
+                    ))}
+                </div>
+            )}
+
+            {!isLoading && (
+                <form onSubmit={handleSubmit} style=\{{ display: 'flex', flexDirection: 'column', gap: '30px' }}>
+                    {ids.map((id) => (
+                        <Attach
+                            id={id}
+                            name={`attach${id}`}
+                            text={`Загрузить файл ${id}`}
+                            onChange={handleAttachFile}
+                            onClear={() => handleAttachClear(id)}
+                        />
+                    ))}
+
+                    <Button type="submit">Отправить</Button>
+                </form>
+            )}
+        </>
+    );
+}
+```

package/emotion/cjs/components/Combobox/ComboboxNew/utils/filterItems.js

@@ -19,15 +19,15 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 // Не мутирует исходные данные.
 var filterItems = exports.filterItems = function filterItems(items, textValue, currentLabel, customFilter) {
   if (!textValue || textValue === currentLabel) return items;
-  var defaultFilter = function defaultFilter(label, value) {
-    return label.toLowerCase().includes(value.toLowerCase());
+  var defaultFilter = function defaultFilter(item, value) {
+    return item.label.toLowerCase().includes(value.toLowerCase());
   };
   var filter = customFilter || defaultFilter;
   var dfs = function dfs(items) {
     var newItems = [];
     items.forEach(function (item) {
       if (item.items) {
-        if (filter(item.label, textValue)) {
+        if (filter(item, textValue)) {
           newItems.push(item);
           return;
         }
@@ -37,12 +37,11 @@ var filterItems = exports.filterItems = function filterItems(items, textValue, c
             items: res
           }));
         }
-      } else if (filter(item.label, textValue)) {
+      } else if (filter(item, textValue)) {
         newItems.push(item);
       }
     });
     return newItems;
   };
-  dfs(items);
   return dfs(items);
 };

package/emotion/cjs/components/Segment/Segment.template-doc.mdx

@@ -27,7 +27,7 @@ import { PropsTable, Description } from '@site/src/components';
 ### Выбранные по умолчанию SegmentItem
 
 Можно задать выбранные по умолчанию сегменты с помощью свойства `defaultSelected`.
-Оно передается в `SegmentProvider`, в виде массива `value` элеметов.
+Оно передается в `SegmentProvider`, в виде массива `value` элементов.
 
 ```tsx live
 import React from 'react';
@@ -41,8 +41,9 @@ export function App() {
 
         return (
             <>
-                <div>Выбранные элементы: {selectedSegmentItems.join(', ')}</div>
-                <SegmentGroup hasBackground pilled>
+                <div>Выбранный элемент: {selectedSegmentItems.join(', ')}</div>
+                <br />
+                <SegmentGroup hasBackground pilled clip={false}>
                     {items.map((_, i) => (
                         <SegmentItem
                             label={`Label ${i}`}
@@ -58,7 +59,49 @@ export function App() {
     }
 
     return (
-        <div style=\{{ display: "block" }} >
+        <div style={{ display: "block" }} >
+            <SegmentProvider defaultSelected={['label_1']}>
+                <SegmentTemplate/>
+            </SegmentProvider>
+        </div>
+    );
+}
+```
+
+### Вертикальное отображение
+
+Для смены ориентации передаем `orientation: 'vertical'`
+
+```tsx live
+import React from 'react';
+import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
+
+export function App() {
+    const items = Array(8).fill(0);
+
+    const SegmentTemplate = () => {
+        const {selectedSegmentItems} = useSegment();
+
+        return (
+            <>
+                <div>Выбранный элемент: {selectedSegmentItems.join(', ')}</div>
+                <br />
+                <SegmentGroup hasBackground clip={false}>
+                    {items.map((_, i) => (
+                        <SegmentItem
+                            label={`Label ${i}`}
+                            value={`label_${i}`}
+                            key={`label_${i}`}
+                            view='secondary'
+                        />
+                    ))}
+                </SegmentGroup>
+            </>
+        )
+    }
+
+    return (
+        <div style={{ display: "block" }} >
             <SegmentProvider defaultSelected={['label_1']}>
                 <SegmentTemplate/>
             </SegmentProvider>