@consta/uikit 4.20.0 → 4.22.0

package/__internal__/src/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["IconSelect","React","forwardRef","useRef","useForkRef","useSelect","usePropsHandler","cnSelect","COMPONENT_NAME","defaultLabelForEmptyItems","SelectContainer","SelectDropdown","SelectItem","defaultPropForm","defaultPropSize","defaultPropView","withDefaultGetters","SelectRender","props","ref","defaultDropdownRef","controlRef","placeholder","onBlur","onFocus","items","onChange","value","required","disabled","ariaLabel","id","dropdownRef","form","view","size","dropdownClassName","name","groups","getItemLabel","labelForEmptyItems","getItemKey","getItemGroupKey","getItemDisabled","getGroupKey","getGroupLabel","renderItem","isLoading","renderValueProp","renderValue","inputRefProp","inputRef","style","dropdownForm","restProps","multiple","getKeyProps","getOptionProps","isOpen","visibleItems","isFocused","handleInputFocus","handleInputBlur","handleToggleDropdown","handleInputClick","notFound","hasItems","renderValueDefault","label","item","renderItemDefault","active","hovered","onClick","onMouseEnter","zIndex","Select"],"sources":["../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import '../SelectComponents/Select.css';\n\nimport { IconSelect } from '@consta/icons/IconSelect';\nimport React, { forwardRef, useRef } from 'react';\n\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { useSelect } from '../../hooks/useSelect/useSelect';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport { cnSelect, COMPONENT_NAME } from '../SelectComponents/cnSelect';\nimport { defaultLabelForEmptyItems } from '../SelectComponents/helpers';\nimport { SelectContainer } from '../SelectComponents/SelectContainer/SelectContainer';\nimport { SelectDropdown } from '../SelectComponents/SelectDropdown/SelectDropdown';\nimport { SelectItem } from '../SelectComponents/SelectItem/SelectItem';\nimport {\n  defaultPropForm,\n  defaultPropSize,\n  defaultPropView,\n} from '../SelectComponents/types';\nimport {\n  DefaultGroup,\n  DefaultItem,\n  PropRenderItem,\n  PropRenderValue,\n  SelectComponent,\n  SelectProps,\n  withDefaultGetters,\n} from './helpers';\n\nconst SelectRender = <ITEM = DefaultItem, GROUP = DefaultGroup>(\n  props: SelectProps<ITEM, GROUP>,\n  ref: React.Ref<HTMLDivElement>,\n) => {\n  const defaultDropdownRef = useRef<HTMLDivElement | null>(null);\n  const controlRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    placeholder,\n    onBlur,\n    onFocus,\n    items,\n    onChange,\n    value,\n    required,\n    disabled,\n    ariaLabel,\n    id,\n    dropdownRef = defaultDropdownRef,\n    form = defaultPropForm,\n    view = defaultPropView,\n    size = defaultPropSize,\n    dropdownClassName,\n    name,\n    groups = [],\n    getItemLabel,\n    labelForEmptyItems = defaultLabelForEmptyItems,\n    getItemKey,\n    getItemGroupKey,\n    getItemDisabled,\n    getGroupKey,\n    getGroupLabel,\n    renderItem,\n    isLoading,\n    renderValue: renderValueProp,\n    inputRef: inputRefProp,\n    style,\n    dropdownForm = 'default',\n    ...restProps\n  } = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), controlRef);\n\n  const {\n    getKeyProps,\n    getOptionProps,\n    isOpen,\n    visibleItems,\n    isFocused,\n    handleInputFocus,\n    handleInputBlur,\n    handleToggleDropdown,\n    inputRef,\n    handleInputClick,\n    notFound,\n    hasItems,\n  } = useSelect<ITEM, GROUP, false>({\n    items,\n    groups,\n    value,\n    onChange,\n    dropdownRef,\n    controlRef,\n    disabled,\n    getItemLabel,\n    getItemKey,\n    getGroupKey,\n    getItemGroupKey,\n    getItemDisabled,\n    multiple: false,\n    onBlur,\n    onFocus,\n  });\n\n  const renderItemDefault: PropRenderItem<ITEM> = (props) => {\n    const { item, active, hovered, onClick, onMouseEnter } = props;\n\n    return (\n      <SelectItem\n        label={getItemLabel(item)}\n        active={active}\n        hovered={hovered}\n        multiple={false}\n        size={size}\n        indent={dropdownForm === 'round' ? 'increased' : 'normal'}\n        onClick={onClick}\n        onMouseEnter={onMouseEnter}\n        disabled={getItemDisabled(item)}\n      />\n    );\n  };\n\n  const renderValueDefault: PropRenderValue<ITEM> = (props) => {\n    const label = getItemLabel(props.item);\n\n    return (\n      <span className={cnSelect('ControlValue')} title={label}>\n        {label}\n      </span>\n    );\n  };\n\n  const renderValue = renderValueProp || renderValueDefault;\n\n  return (\n    <>\n      <SelectContainer\n        focused={isFocused}\n        disabled={disabled}\n        size={size}\n        view={view}\n        form={form}\n        required={required}\n        ref={ref}\n        style={style}\n        {...restProps}\n      >\n        <div\n          className={cnSelect('Control')}\n          ref={controlRef}\n          aria-expanded={isOpen}\n          aria-haspopup=\"listbox\"\n          id={id}\n        >\n          <div className={cnSelect('ControlInner')}>\n            <div className={cnSelect('ControlValueContainer')}>\n              <input\n                {...getKeyProps()}\n                type=\"button\"\n                name={name}\n                onFocus={handleInputFocus}\n                onBlur={handleInputBlur}\n                aria-label={ariaLabel}\n                onClick={handleInputClick}\n                ref={useForkRef([inputRef, inputRefProp])}\n                className={cnSelect('FakeField')}\n                readOnly\n              />\n              {value && renderValue({ item: value })}\n              {(typeof value === 'undefined' || value === null) && placeholder && (\n                <span className={cnSelect('Placeholder')} title=\"placeholder\">\n                  {placeholder}\n                </span>\n              )}\n            </div>\n          </div>\n          <span className={cnSelect('Indicators')}>\n            <button\n              type=\"button\"\n              className={cnSelect('IndicatorsDropdown')}\n              tabIndex={-1}\n              onClick={handleToggleDropdown}\n            >\n              <IconSelect\n                size=\"xs\"\n                className={cnSelect('DropdownIndicatorIcon')}\n              />\n            </button>\n          </span>\n        </div>\n      </SelectContainer>\n      <SelectDropdown\n        isOpen={isOpen}\n        size={size}\n        controlRef={controlRef}\n        getOptionProps={getOptionProps}\n        dropdownRef={dropdownRef}\n        form={dropdownForm}\n        className={dropdownClassName}\n        renderItem={renderItem || renderItemDefault}\n        getGroupLabel={getGroupLabel}\n        visibleItems={visibleItems}\n        notFound={notFound}\n        isLoading={isLoading}\n        labelForEmptyItems={labelForEmptyItems}\n        hasItems={hasItems}\n        style={\n          typeof style?.zIndex === 'number'\n            ? { zIndex: style.zIndex + 1 }\n            : undefined\n        }\n      />\n    </>\n  );\n};\n\nexport const Select = forwardRef(SelectRender) as SelectComponent;\n\nexport * from './helpers';\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["IconSelect","React","forwardRef","useRef","useForkRef","useSelect","usePropsHandler","cnSelect","COMPONENT_NAME","defaultLabelForEmptyItems","SelectContainer","SelectDropdown","SelectItem","defaultPropForm","defaultPropSize","defaultPropView","withDefaultGetters","SelectRender","props","ref","defaultDropdownRef","controlRef","placeholder","onBlur","onFocus","items","onChange","value","required","disabled","ariaLabel","id","dropdownRef","form","view","size","dropdownClassName","name","groups","getItemLabel","labelForEmptyItems","getItemKey","getItemGroupKey","getItemDisabled","getGroupKey","getGroupLabel","renderItem","isLoading","renderValueProp","renderValue","inputRefProp","inputRef","style","dropdownForm","restProps","multiple","getKeyProps","getOptionProps","isOpen","visibleItems","isFocused","handleInputFocus","handleInputBlur","handleToggleDropdown","handleInputClick","notFound","hasItems","inputId","renderValueDefault","label","item","renderItemDefault","active","hovered","onClick","onMouseEnter","zIndex","Select"],"sources":["../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import '../SelectComponents/Select.css';\n\nimport { IconSelect } from '@consta/icons/IconSelect';\nimport React, { forwardRef, useRef } from 'react';\n\nimport { useForkRef } from '../../hooks/useForkRef/useForkRef';\nimport { useSelect } from '../../hooks/useSelect/useSelect';\nimport { usePropsHandler } from '../EventInterceptor/usePropsHandler';\nimport { cnSelect, COMPONENT_NAME } from '../SelectComponents/cnSelect';\nimport { defaultLabelForEmptyItems } from '../SelectComponents/helpers';\nimport { SelectContainer } from '../SelectComponents/SelectContainer/SelectContainer';\nimport { SelectDropdown } from '../SelectComponents/SelectDropdown/SelectDropdown';\nimport { SelectItem } from '../SelectComponents/SelectItem/SelectItem';\nimport {\n  defaultPropForm,\n  defaultPropSize,\n  defaultPropView,\n} from '../SelectComponents/types';\nimport {\n  DefaultGroup,\n  DefaultItem,\n  PropRenderItem,\n  PropRenderValue,\n  SelectComponent,\n  SelectProps,\n  withDefaultGetters,\n} from './helpers';\n\nconst SelectRender = <ITEM = DefaultItem, GROUP = DefaultGroup>(\n  props: SelectProps<ITEM, GROUP>,\n  ref: React.Ref<HTMLDivElement>,\n) => {\n  const defaultDropdownRef = useRef<HTMLDivElement | null>(null);\n  const controlRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    placeholder,\n    onBlur,\n    onFocus,\n    items,\n    onChange,\n    value,\n    required,\n    disabled,\n    ariaLabel,\n    id,\n    dropdownRef = defaultDropdownRef,\n    form = defaultPropForm,\n    view = defaultPropView,\n    size = defaultPropSize,\n    dropdownClassName,\n    name,\n    groups = [],\n    getItemLabel,\n    labelForEmptyItems = defaultLabelForEmptyItems,\n    getItemKey,\n    getItemGroupKey,\n    getItemDisabled,\n    getGroupKey,\n    getGroupLabel,\n    renderItem,\n    isLoading,\n    renderValue: renderValueProp,\n    inputRef: inputRefProp,\n    style,\n    dropdownForm = 'default',\n    ...restProps\n  } = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), controlRef);\n\n  const {\n    getKeyProps,\n    getOptionProps,\n    isOpen,\n    visibleItems,\n    isFocused,\n    handleInputFocus,\n    handleInputBlur,\n    handleToggleDropdown,\n    inputRef,\n    handleInputClick,\n    notFound,\n    hasItems,\n  } = useSelect<ITEM, GROUP, false>({\n    items,\n    groups,\n    value,\n    onChange,\n    dropdownRef,\n    controlRef,\n    disabled,\n    getItemLabel,\n    getItemKey,\n    getGroupKey,\n    getItemGroupKey,\n    getItemDisabled,\n    multiple: false,\n    onBlur,\n    onFocus,\n  });\n\n  const inputId = id ? `${id}-input` : id;\n\n  const renderItemDefault: PropRenderItem<ITEM> = (props) => {\n    const { item, active, hovered, onClick, onMouseEnter } = props;\n\n    return (\n      <SelectItem\n        label={getItemLabel(item)}\n        active={active}\n        hovered={hovered}\n        multiple={false}\n        size={size}\n        indent={dropdownForm === 'round' ? 'increased' : 'normal'}\n        onClick={onClick}\n        onMouseEnter={onMouseEnter}\n        disabled={getItemDisabled(item)}\n      />\n    );\n  };\n\n  const renderValueDefault: PropRenderValue<ITEM> = (props) => {\n    const label = getItemLabel(props.item);\n\n    return (\n      <span className={cnSelect('ControlValue')} title={label}>\n        {label}\n      </span>\n    );\n  };\n\n  const renderValue = renderValueProp || renderValueDefault;\n\n  return (\n    <>\n      <SelectContainer\n        focused={isFocused}\n        disabled={disabled}\n        size={size}\n        view={view}\n        form={form}\n        required={required}\n        ref={ref}\n        style={style}\n        id={inputId}\n        {...restProps}\n      >\n        <div\n          className={cnSelect('Control')}\n          ref={controlRef}\n          aria-expanded={isOpen}\n          aria-haspopup=\"listbox\"\n          id={id}\n        >\n          <div className={cnSelect('ControlInner')}>\n            <div className={cnSelect('ControlValueContainer')}>\n              <input\n                {...getKeyProps()}\n                type=\"button\"\n                name={name}\n                id={inputId}\n                onFocus={handleInputFocus}\n                onBlur={handleInputBlur}\n                aria-label={ariaLabel}\n                onClick={handleInputClick}\n                ref={useForkRef([inputRef, inputRefProp])}\n                className={cnSelect('FakeField')}\n                readOnly\n              />\n              {value && renderValue({ item: value })}\n              {(typeof value === 'undefined' || value === null) && placeholder && (\n                <span className={cnSelect('Placeholder')} title=\"placeholder\">\n                  {placeholder}\n                </span>\n              )}\n            </div>\n          </div>\n          <span className={cnSelect('Indicators')}>\n            <button\n              type=\"button\"\n              className={cnSelect('IndicatorsDropdown')}\n              tabIndex={-1}\n              onClick={handleToggleDropdown}\n            >\n              <IconSelect\n                size=\"xs\"\n                className={cnSelect('DropdownIndicatorIcon')}\n              />\n            </button>\n          </span>\n        </div>\n      </SelectContainer>\n      <SelectDropdown\n        isOpen={isOpen}\n        size={size}\n        controlRef={controlRef}\n        getOptionProps={getOptionProps}\n        dropdownRef={dropdownRef}\n        form={dropdownForm}\n        className={dropdownClassName}\n        renderItem={renderItem || renderItemDefault}\n        getGroupLabel={getGroupLabel}\n        visibleItems={visibleItems}\n        notFound={notFound}\n        isLoading={isLoading}\n        labelForEmptyItems={labelForEmptyItems}\n        hasItems={hasItems}\n        style={\n          typeof style?.zIndex === 'number'\n            ? { zIndex: style.zIndex + 1 }\n            : undefined\n        }\n      />\n    </>\n  );\n};\n\nexport const Select = forwardRef(SelectRender) as SelectComponent;\n\nexport * from './helpers';\n"],"mappings":"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"}

package/__internal__/src/components/SelectComponents/Select.css

@@ -1 +1 @@
-.Select{--caption-margin-left:calc(var(--input-space) + var(--control-border-width));align-items:flex-start;display:flex;justify-content:flex-start;position:relative;width:100%}.Select_type_userselect.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_userselect.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-3xs))}.Select_type_userselect.Select_size_l{--select-element-height:calc(var(--space-3xl) - var(--space-2xs))}.Select_type_combobox.Select_size_xs{--select-element-height:calc(var(--space-m) + var(--space-3xs))}.Select_type_combobox.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_combobox.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-2xs))}.Select_type_combobox.Select_size_l{--select-element-height:var(--space-2xl)}.Select_type_select.Select_size_xs{--select-element-height:calc(var(--space-m) + var(--space-3xs))}.Select_type_select.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_select.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-2xs))}.Select_type_select.Select_size_l{--select-element-height:var(--space-2xl)}.Select_size_xs{--label-offset:var(--space-2xs);--caption-offset:var(--space-2xs);--round-offset:calc(var(--space-3xs) + var(--space-2xs));--input-height:var(--control-height-xs);--input-space:calc(var(--control-space-xs)*0.5);--input-font-size:var(--control-text-size-xs);--tag-space:calc((var(--space-xs) - 1px)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--select-element-height)*4.5)}.Select_size_s{--label-offset:var(--space-2xs);--caption-offset:var(--space-2xs);--round-offset:calc(var(--space-2xs));--input-height:var(--control-height-s);--input-space:calc(var(--control-space-s)*0.5);--input-font-size:var(--control-text-size-s);--tag-space:calc(var(--space-xs)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--select-element-height)*4.5)}.Select_size_m{--label-offset:var(--space-xs);--caption-offset:var(--space-xs);--round-offset:calc(var(--space-3xs) + var(--space-2xs));--input-height:var(--control-height-m);--input-space:calc(var(--control-space-m)*0.5);--input-font-size:var(--control-text-size-m);--tag-space:calc(var(--space-s)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--space-2xl)*4.5 - var(--space-2xs)*4.5)}.Select_size_l{--label-offset:var(--space-xs);--caption-offset:var(--space-xs);--round-offset:calc(var(--space-xs));--input-height:var(--control-height-l);--input-space:calc(var(--control-space-l)*0.5);--input-font-size:var(--control-text-size-l);--tag-space:calc(var(--space-m)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--space-2xl)*4.5)}.Select_labelPosition_top{flex-direction:column}.Select_labelPosition_top>:not(:last-child){margin-bottom:var(--label-offset)}.Select_labelPosition_left{flex-direction:row}.Select_labelPosition_left .Select-Label{align-items:center;display:inline-flex;height:var(--input-height)}.Select_labelPosition_left>:not(:last-child){margin-right:var(--space-s)}.Select-Body{display:inline-flex;flex-direction:column;width:100%}.Select-Body .Select-Caption{margin-left:var(--caption-margin-left);margin-top:var(--caption-offset)}.Select-SelectContainer{--container-border-color:var(--color-control-bg-border-default);display:flex;position:relative;width:100%}.Select-SelectContainer_status_alert{--container-border-color:var(--color-bg-alert)}.Select-SelectContainer_status_success{--container-border-color:var(--color-bg-success)}.Select-SelectContainer_status_warning{--container-border-color:var(--color-bg-warning)}.Select-SelectContainer_view_default .Select-Control{background:var(--color-control-bg-default);border:var(--control-border-width) solid var(--container-border-color);border-radius:var(--control-radius);color:var(--color-control-typo-default);padding:0}.Select-SelectContainer_view_default .Select-Control:hover{border-color:var(--color-control-bg-border-default-hover)}.Select-SelectContainer_view_default.Select-SelectContainer_focused .Select-Control{border-color:var(--color-control-bg-border-focus);outline:none;z-index:1}.Select-SelectContainer_multiple .Select-Control{height:auto;min-height:var(--input-height)}.Select-SelectContainer_form_round .Select-Control{border-radius:calc(var(--input-height)/2);padding-left:var(--round-offset)}.Select-SelectContainer_form_brick .Select-Control{border-radius:0}.Select-SelectContainer_form_clear .Select-Control{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0}.Select-SelectContainer_form_defaultClear .Select-Control{border-radius:var(--control-radius) 0 0 var(--control-radius);border-right-width:0}.Select-SelectContainer_form_clearDefault .Select-Control{border-left-width:0;border-radius:0 var(--control-radius) var(--control-radius) 0}.Select-SelectContainer_form_defaultBrick .Select-Control{border-radius:var(--control-radius) 0 0 var(--control-radius)}.Select-SelectContainer_form_brickDefault .Select-Control{border-radius:0 var(--control-radius) var(--control-radius) 0}.Select-SelectContainer_form_roundBrick .Select-Control{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);padding-left:var(--round-offset)}.Select-SelectContainer_form_brickRound .Select-Control{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0}.Select-SelectContainer_form_brickClear .Select-Control{border-radius:0;border-right-width:0}.Select-SelectContainer_form_clearBrick .Select-Control{border-left-width:0;border-radius:0}.Select-SelectContainer_form_clearRound .Select-Control{border-left-width:0;border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0}.Select-SelectContainer_form_roundClear .Select-Control{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);border-right-width:0;padding-left:var(--round-offset)}.Select-SelectContainer_form_clearClear .Select-Control{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0;border-top-width:var(--control-border-width)}.Select-SelectContainer_view_default.Select-SelectContainer_form_clear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearClear.Select-SelectContainer_focused .Select-Control{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus),calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_form_brickClear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_defaultClear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_roundClear.Select-SelectContainer_focused .Select-Control{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_form_clearBrick.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearDefault.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearRound.Select-SelectContainer_focused .Select-Control{box-shadow:calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_disabled .Select-Control{background:var(--color-control-bg-disable);border-color:var(--color-control-bg-border-disable);color:var(--color-control-typo-disable);pointer-events:none}.Select-SelectContainer_view_clear .Select-Control,.Select-SelectContainer_view_clear .Select-Control:focus,.Select-SelectContainer_view_clear .Select-Control:hover{color:var(--color-control-typo-default);padding:0}.Select-SelectContainer_view_clear .Select-Control.Select-SelectContainer_disabled,.Select-SelectContainer_view_clear .Select-Control:focus.Select-SelectContainer_disabled,.Select-SelectContainer_view_clear .Select-Control:hover.Select-SelectContainer_disabled{pointer-events:none}.Select-SelectContainer_view_clear .Select-Control.Select-SelectContainer_disabled .Select-Control,.Select-SelectContainer_view_clear .Select-Control:focus.Select-SelectContainer_disabled .Select-Control,.Select-SelectContainer_view_clear .Select-Control:hover.Select-SelectContainer_disabled .Select-Control{color:var(--color-control-typo-disable)}.Select-SelectContainer_view_clear.Select-SelectContainer_disabled .Select-Control{pointer-events:none}.Select-SelectContainer_view_default .Select-ControlValueContainer{padding:0 0 0 var(--input-space)}.Select-SelectContainer_form_round .Select-SelectContainer-IndicatorsDropdown{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0}.Select-SelectContainer_multiple .Select-ControlValueContainer{box-sizing:border-box;display:flex;line-height:1;padding-bottom:0;padding-top:0;position:relative}.Select-SelectContainer_multiple .Select-ControlValue{-ms-overflow-style:none;max-height:calc(var(--tag-space)*4 + var(--select-element-height)*4.5);overflow-x:visible;overflow-y:auto;padding-top:calc(var(--tag-space) - var(--control-border-width));scrollbar-width:none;white-space:normal}.Select-SelectContainer_multiple .Select-ControlValue::-webkit-scrollbar{display:none}.Select-SelectContainer_multiple .Select-ControlValue_isUserSelect{display:flex;flex-wrap:wrap;padding-top:calc(var(--space-s)/4)}.Select_view_clear{--caption-margin-left:0}.Select-Delimiter{background-color:var(--color-control-bg-border-default);width:1px}.Select-Control{background:transparent;border:none;box-sizing:border-box;color:currentColor;cursor:pointer;display:inline-flex;font-family:var(--font-primary);font-weight:var(--font-weight-text-regular);height:var(--input-height);line-height:calc(var(--input-height) - var(--control-border-width));outline:none;padding:0;transition:border-color .15s,box-shadow .15s,background-color .15s;width:100%}.Select-Control:focus{outline:none}.Select-Indicators{display:flex;height:100%}.Select-IndicatorsDropdown{background-color:transparent;border:none;color:var(--color-control-typo-placeholder);cursor:pointer;display:block;margin:0;padding:0;text-align:center;width:var(--input-height)}.Select-IndicatorsDropdown:focus{outline:none}.Select-ControlInner{position:relative;width:100%}.Select-ControlValueContainer{background-color:transparent;border:none;bottom:0;color:inherit;font-size:var(--input-font-size);left:0;line-height:calc(var(--input-height) - 2px);margin:0;min-height:calc(var(--input-height) - 2px);padding:0;position:absolute;right:0;text-align:left;top:0}.Select-ControlValueContainer:focus{outline:none}.Select-Control[aria-expanded=true] .Select-IndicatorsDropdown{transform:rotate(180deg)}.Select-ControlValue,.Select-Placeholder{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select-Placeholder{color:var(--color-control-typo-placeholder);font-size:var(--input-font-size);padding-right:var(--input-space);pointer-events:none;text-align:left}.Select-Placeholder_isHidden{opacity:0;visibility:hidden}.Select-Control_hasInput .Select-Placeholder{background-color:transparent;line-height:calc(var(--input-height) - 2px);position:absolute;top:0;width:calc(100% - var(--input-space))}.Select-DropdownIndicatorIcon{position:relative;top:1px}.Select-ClearIndicator{background-color:transparent;border:none;color:var(--color-control-typo-clear);cursor:pointer;margin:0;padding:0 var(--space-xs)}.Select-ClearIndicatorIcon{position:relative;top:1px}.Select-Input{background-color:transparent;border:none;color:inherit;font-family:inherit;font-size:inherit;line-height:calc(var(--input-height) - 2px);margin:0;outline:none;padding:0;position:relative;width:100%}.Select-Input_hide{bottom:0;left:0;opacity:0;position:absolute;top:0;width:100%}.Select-Input_multiple{display:inline-flex;height:calc(var(--input-height) - var(--control-border-width)*2);line-height:1;line-height:calc(var(--input-height) - var(--control-border-width)*2);margin-top:calc(var(--tag-space)*-1);min-width:10px}.Select-Input_multiple.Select-Input_isUserSelect{margin-top:calc(var(--space-s)/4*-1)}.Select-FakeField{bottom:0;left:0;opacity:0;position:absolute;top:0;width:100%}.Select-HelperInputFakeElement{display:inline-block;font-size:var(--input-font-size);height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap}
+.Select{--caption-margin-left:calc(var(--input-space) + var(--control-border-width));align-items:flex-start;display:flex;justify-content:flex-start;position:relative;width:100%}.Select_type_userselect.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_userselect.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-3xs))}.Select_type_userselect.Select_size_l{--select-element-height:calc(var(--space-3xl) - var(--space-2xs))}.Select_type_combobox.Select_size_xs{--select-element-height:calc(var(--space-m) + var(--space-3xs))}.Select_type_combobox.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_combobox.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-2xs))}.Select_type_combobox.Select_size_l{--select-element-height:var(--space-2xl)}.Select_type_select.Select_size_xs{--select-element-height:calc(var(--space-m) + var(--space-3xs))}.Select_type_select.Select_size_s{--select-element-height:var(--space-xl)}.Select_type_select.Select_size_m{--select-element-height:calc(var(--space-2xl) - var(--space-2xs))}.Select_type_select.Select_size_l{--select-element-height:var(--space-2xl)}.Select_size_xs{--label-offset:var(--space-2xs);--caption-offset:var(--space-2xs);--round-offset:calc(var(--space-3xs) + var(--space-2xs));--input-height:var(--control-height-xs);--input-space:calc(var(--control-space-xs)*0.5);--input-font-size:var(--control-text-size-xs);--tag-space:calc((var(--space-xs) - 1px)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--select-element-height)*4.5)}.Select_size_s{--label-offset:var(--space-2xs);--caption-offset:var(--space-2xs);--round-offset:calc(var(--space-2xs));--input-height:var(--control-height-s);--input-space:calc(var(--control-space-s)*0.5);--input-font-size:var(--control-text-size-s);--tag-space:calc(var(--space-xs)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--select-element-height)*4.5)}.Select_size_m{--label-offset:var(--space-xs);--caption-offset:var(--space-xs);--round-offset:calc(var(--space-3xs) + var(--space-2xs));--input-height:var(--control-height-m);--input-space:calc(var(--control-space-m)*0.5);--input-font-size:var(--control-text-size-m);--tag-space:calc(var(--space-s)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--space-2xl)*4.5 - var(--space-2xs)*4.5)}.Select_size_l{--label-offset:var(--space-xs);--caption-offset:var(--space-xs);--round-offset:calc(var(--space-xs));--input-height:var(--control-height-l);--input-space:calc(var(--control-space-l)*0.5);--input-font-size:var(--control-text-size-l);--tag-space:calc(var(--space-m)/2 - var(--control-border-width));--input-max-height:calc(var(--tag-space)*4 + var(--space-2xl)*4.5)}.Select_labelPosition_top{flex-direction:column}.Select_labelPosition_top>:not(:last-child){margin-bottom:var(--label-offset)}.Select_labelPosition_left{flex-direction:row}.Select_labelPosition_left .Select-Label{align-items:center;display:inline-flex;height:var(--input-height)}.Select_labelPosition_left>:not(:last-child){margin-right:var(--space-s)}.Select-Body{display:inline-flex;flex-direction:column;width:100%}.Select-Body .Select-Caption{margin-left:var(--caption-margin-left);margin-top:var(--caption-offset)}.Select-SelectContainer{--container-border-color:var(--color-control-bg-border-default);display:flex;position:relative;width:100%}.Select-SelectContainer_status_alert{--container-border-color:var(--color-bg-alert)}.Select-SelectContainer_status_success{--container-border-color:var(--color-bg-success)}.Select-SelectContainer_status_warning{--container-border-color:var(--color-bg-warning)}.Select-SelectContainer_view_default .Select-Control{background:var(--color-control-bg-default);border:var(--control-border-width) solid var(--container-border-color);border-radius:var(--control-radius);color:var(--color-control-typo-default);padding:0}.Select-SelectContainer_view_default .Select-Control:hover{border-color:var(--color-control-bg-border-default-hover)}.Select-SelectContainer_view_default.Select-SelectContainer_focused .Select-Control{border-color:var(--color-control-bg-border-focus);outline:none}.Select-SelectContainer_multiple .Select-Control{height:auto;min-height:var(--input-height)}.Select-SelectContainer_form_round .Select-Control{border-radius:calc(var(--input-height)/2);padding-left:var(--round-offset)}.Select-SelectContainer_form_brick .Select-Control{border-radius:0}.Select-SelectContainer_form_clear .Select-Control{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0}.Select-SelectContainer_form_defaultClear .Select-Control{border-radius:var(--control-radius) 0 0 var(--control-radius);border-right-width:0}.Select-SelectContainer_form_clearDefault .Select-Control{border-left-width:0;border-radius:0 var(--control-radius) var(--control-radius) 0}.Select-SelectContainer_form_defaultBrick .Select-Control{border-radius:var(--control-radius) 0 0 var(--control-radius)}.Select-SelectContainer_form_brickDefault .Select-Control{border-radius:0 var(--control-radius) var(--control-radius) 0}.Select-SelectContainer_form_roundBrick .Select-Control{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);padding-left:var(--round-offset)}.Select-SelectContainer_form_brickRound .Select-Control{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0}.Select-SelectContainer_form_brickClear .Select-Control{border-radius:0;border-right-width:0}.Select-SelectContainer_form_clearBrick .Select-Control{border-left-width:0;border-radius:0}.Select-SelectContainer_form_clearRound .Select-Control{border-left-width:0;border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0}.Select-SelectContainer_form_roundClear .Select-Control{border-radius:calc(var(--input-height)/2) 0 0 calc(var(--input-height)/2);border-right-width:0;padding-left:var(--round-offset)}.Select-SelectContainer_form_clearClear .Select-Control{border-width:0;border-bottom-width:var(--control-border-width);border-radius:0;border-top-width:var(--control-border-width)}.Select-SelectContainer_view_default.Select-SelectContainer_form_clear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearClear.Select-SelectContainer_focused .Select-Control{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus),calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_form_brickClear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_defaultClear.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_roundClear.Select-SelectContainer_focused .Select-Control{box-shadow:var(--control-border-width) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_form_clearBrick.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearDefault.Select-SelectContainer_focused .Select-Control,.Select-SelectContainer_view_default.Select-SelectContainer_form_clearRound.Select-SelectContainer_focused .Select-Control{box-shadow:calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus)}.Select-SelectContainer_view_default.Select-SelectContainer_disabled .Select-Control{background:var(--color-control-bg-disable);border-color:var(--color-control-bg-border-disable);color:var(--color-control-typo-disable);pointer-events:none}.Select-SelectContainer_view_clear .Select-Control,.Select-SelectContainer_view_clear .Select-Control:focus,.Select-SelectContainer_view_clear .Select-Control:hover{color:var(--color-control-typo-default);padding:0}.Select-SelectContainer_view_clear .Select-Control.Select-SelectContainer_disabled,.Select-SelectContainer_view_clear .Select-Control:focus.Select-SelectContainer_disabled,.Select-SelectContainer_view_clear .Select-Control:hover.Select-SelectContainer_disabled{pointer-events:none}.Select-SelectContainer_view_clear .Select-Control.Select-SelectContainer_disabled .Select-Control,.Select-SelectContainer_view_clear .Select-Control:focus.Select-SelectContainer_disabled .Select-Control,.Select-SelectContainer_view_clear .Select-Control:hover.Select-SelectContainer_disabled .Select-Control{color:var(--color-control-typo-disable)}.Select-SelectContainer_view_clear.Select-SelectContainer_disabled .Select-Control{pointer-events:none}.Select-SelectContainer_view_default .Select-ControlValueContainer{padding:0 0 0 var(--input-space)}.Select-SelectContainer_form_round .Select-SelectContainer-IndicatorsDropdown{border-radius:0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0}.Select-SelectContainer_multiple .Select-ControlValueContainer{box-sizing:border-box;display:flex;line-height:1;padding-bottom:0;padding-top:0;position:relative}.Select-SelectContainer_multiple .Select-ControlValue{-ms-overflow-style:none;max-height:calc(var(--tag-space)*4 + var(--select-element-height)*4.5);overflow-x:visible;overflow-y:auto;padding-top:calc(var(--tag-space) - var(--control-border-width));scrollbar-width:none;white-space:normal}.Select-SelectContainer_multiple .Select-ControlValue::-webkit-scrollbar{display:none}.Select-SelectContainer_multiple .Select-ControlValue_isUserSelect{display:flex;flex-wrap:wrap;padding-top:calc(var(--space-s)/4)}.Select_view_clear{--caption-margin-left:0}.Select-Delimiter{background-color:var(--color-control-bg-border-default);width:1px}.Select-Control{background:transparent;border:none;box-sizing:border-box;color:currentColor;cursor:pointer;display:inline-flex;font-family:var(--font-primary);font-weight:var(--font-weight-text-regular);height:var(--input-height);line-height:calc(var(--input-height) - var(--control-border-width));outline:none;padding:0;transition:border-color .15s,box-shadow .15s,background-color .15s;width:100%}.Select-Control:focus{outline:none}.Select-Indicators{display:flex;height:100%}.Select-IndicatorsDropdown{background-color:transparent;border:none;color:var(--color-control-typo-placeholder);cursor:pointer;display:block;margin:0;padding:0;text-align:center;width:var(--input-height)}.Select-IndicatorsDropdown:focus{outline:none}.Select-ControlInner{position:relative;width:100%}.Select-ControlValueContainer{background-color:transparent;border:none;bottom:0;color:inherit;font-size:var(--input-font-size);left:0;line-height:calc(var(--input-height) - 2px);margin:0;min-height:calc(var(--input-height) - 2px);padding:0;position:absolute;right:0;text-align:left;top:0}.Select-ControlValueContainer:focus{outline:none}.Select-Control[aria-expanded=true] .Select-IndicatorsDropdown{transform:rotate(180deg)}.Select-ControlValue,.Select-Placeholder{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select-Placeholder{color:var(--color-control-typo-placeholder);font-size:var(--input-font-size);padding-right:var(--input-space);pointer-events:none;text-align:left}.Select-Placeholder_isHidden{opacity:0;visibility:hidden}.Select-Control_hasInput .Select-Placeholder{background-color:transparent;line-height:calc(var(--input-height) - 2px);position:absolute;top:0;width:calc(100% - var(--input-space))}.Select-DropdownIndicatorIcon{position:relative;top:1px}.Select-ClearIndicator{background-color:transparent;border:none;color:var(--color-control-typo-clear);cursor:pointer;margin:0;padding:0 var(--space-xs)}.Select-ClearIndicatorIcon{position:relative;top:1px}.Select-Input{background-color:transparent;border:none;color:inherit;font-family:inherit;font-size:inherit;line-height:calc(var(--input-height) - 2px);margin:0;outline:none;padding:0;position:relative;width:100%}.Select-Input_hide{bottom:0;left:0;opacity:0;position:absolute;top:0;width:100%}.Select-Input_multiple{display:inline-flex;height:calc(var(--input-height) - var(--control-border-width)*2);line-height:1;line-height:calc(var(--input-height) - var(--control-border-width)*2);margin-top:calc(var(--tag-space)*-1);min-width:10px}.Select-Input_multiple.Select-Input_isUserSelect{margin-top:calc(var(--space-s)/4*-1)}.Select-FakeField{bottom:0;left:0;opacity:0;position:absolute;top:0;width:100%}.Select-HelperInputFakeElement{display:inline-block;font-size:var(--input-font-size);height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap}

package/__internal__/src/components/SelectComponents/SelectContainer/SelectContainer.js

@@ -1,2 +1,2 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","form","view","className","disabled","required","children","status","focused","multiple","type","labelPosition","label","labelIcon","caption"];import React,{forwardRef}from"react";import{FieldCaption}from"../../FieldCaption/FieldCaption";import{FieldLabel}from"../../FieldLabel/FieldLabel";import{cnSelect}from"../cnSelect";import{defaultPropForm,defaultPropSize,defaultPropView}from"../types";export var SelectContainer=forwardRef(function(a,b){var c=a.size,d=void 0===c?defaultPropSize:c,e=a.form,f=void 0===e?defaultPropForm:e,g=a.view,h=void 0===g?defaultPropView:g,i=a.className,j=a.disabled,k=a.required,l=a.children,m=a.status,n=a.focused,o=a.multiple,p=a.type,q=void 0===p?"select":p,r=a.labelPosition,s=void 0===r?"top":r,t=a.label,u=a.labelIcon,v=a.caption,w=_objectWithoutProperties(a,_excluded);return React.createElement("div",Object.assign({className:cnSelect({labelPosition:s,size:d,view:h,type:q},[i])},w),t&&React.createElement(FieldLabel,{icon:u,required:k,className:cnSelect("Label",{labelPosition:s}),size:d},t),React.createElement("div",{className:cnSelect("Body")},React.createElement("div",{className:cnSelect("SelectContainer",{view:h,form:f,disabled:j,focused:n,multiple:o,status:m}),ref:b},l),v&&React.createElement(FieldCaption,{className:cnSelect("Caption"),status:m},v)))});
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","form","view","className","disabled","required","children","status","focused","id","multiple","type","labelPosition","label","labelIcon","caption"];import React,{forwardRef}from"react";import{FieldCaption}from"../../FieldCaption/FieldCaption";import{FieldLabel}from"../../FieldLabel/FieldLabel";import{cnSelect}from"../cnSelect";import{defaultPropForm,defaultPropSize,defaultPropView}from"../types";export var SelectContainer=forwardRef(function(a,b){var c=a.size,d=void 0===c?defaultPropSize:c,e=a.form,f=void 0===e?defaultPropForm:e,g=a.view,h=void 0===g?defaultPropView:g,i=a.className,j=a.disabled,k=a.required,l=a.children,m=a.status,n=a.focused,o=a.id,p=a.multiple,q=a.type,r=void 0===q?"select":q,s=a.labelPosition,t=void 0===s?"top":s,u=a.label,v=a.labelIcon,w=a.caption,x=_objectWithoutProperties(a,_excluded);return React.createElement("div",Object.assign({className:cnSelect({labelPosition:t,size:d,view:h,type:r},[i])},x),u&&React.createElement(FieldLabel,{icon:v,as:"label",required:k,htmlFor:o,className:cnSelect("Label",{labelPosition:t}),size:d},u),React.createElement("div",{className:cnSelect("Body")},React.createElement("div",{className:cnSelect("SelectContainer",{view:h,form:f,disabled:j,focused:n,multiple:p,status:m}),ref:b},l),w&&React.createElement(FieldCaption,{className:cnSelect("Caption"),status:m},w)))});
 //# sourceMappingURL=SelectContainer.js.map

package/__internal__/src/components/SelectComponents/SelectContainer/SelectContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContainer.js","names":["React","forwardRef","FieldCaption","FieldLabel","cnSelect","defaultPropForm","defaultPropSize","defaultPropView","SelectContainer","props","ref","size","form","view","className","disabled","required","children","status","focused","multiple","type","labelPosition","label","labelIcon","caption","otherProps"],"sources":["../../../../../../src/components/SelectComponents/SelectContainer/SelectContainer.tsx"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React, { forwardRef } from 'react';\n\nimport { PropsWithHTMLAttributesAndRef } from '../../../utils/types/PropsWithHTMLAttributes';\nimport { FieldCaption } from '../../FieldCaption/FieldCaption';\nimport { FieldLabel } from '../../FieldLabel/FieldLabel';\nimport { cnSelect } from '../cnSelect';\nimport {\n  defaultPropForm,\n  defaultPropSize,\n  defaultPropView,\n  PropForm,\n  PropSize,\n  PropStatus,\n  PropView,\n} from '../types';\n\nexport type SelectContainerProps = PropsWithHTMLAttributesAndRef<\n  {\n    disabled?: boolean;\n    form?: PropForm;\n    size?: PropSize;\n    view?: PropView;\n    focused?: boolean;\n    multiple?: boolean;\n    required?: boolean;\n    status?: PropStatus;\n    label?: string;\n    labelIcon?: IconComponent;\n    type?: 'select' | 'combobox' | 'userselect';\n    labelPosition?: 'top' | 'left';\n    caption?: string;\n  },\n  HTMLDivElement\n>;\n\nexport const SelectContainer = forwardRef<HTMLDivElement, SelectContainerProps>(\n  (props, ref) => {\n    const {\n      size = defaultPropSize,\n      form = defaultPropForm,\n      view = defaultPropView,\n      className,\n      disabled,\n      required,\n      children,\n      status,\n      focused,\n      multiple,\n      type = 'select',\n      labelPosition = 'top',\n      label,\n      labelIcon,\n      caption,\n      ...otherProps\n    } = props;\n\n    return (\n      <div\n        className={cnSelect({ labelPosition, size, view, type }, [className])}\n        {...otherProps}\n      >\n        {label && (\n          <FieldLabel\n            icon={labelIcon}\n            required={required}\n            className={cnSelect('Label', { labelPosition })}\n            size={size}\n          >\n            {label}\n          </FieldLabel>\n        )}\n        <div className={cnSelect('Body')}>\n          <div\n            className={cnSelect('SelectContainer', {\n              view,\n              form,\n              disabled,\n              focused,\n              multiple,\n              status,\n            })}\n            ref={ref}\n          >\n            {children}\n          </div>\n          {caption && (\n            <FieldCaption className={cnSelect('Caption')} status={status}>\n              {caption}\n            </FieldCaption>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"0PACA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAGA,OAASC,YAAT,uCACA,OAASC,UAAT,mCACA,OAASC,QAAT,mBACA,OACEC,eADF,CAEEC,eAFF,CAGEC,eAHF,gBA6BA,MAAO,IAAMC,gBAAe,CAAGP,UAAU,CACvC,SAACQ,CAAD,CAAQC,CAAR,CAAgB,CACd,MAiBID,CAjBJ,CACEE,IADF,CACEA,CADF,YACSL,eADT,KAiBIG,CAjBJ,CAEEG,IAFF,CAEEA,CAFF,YAESP,eAFT,KAiBII,CAjBJ,CAGEI,IAHF,CAGEA,CAHF,YAGSN,eAHT,GAIEO,CAJF,CAiBIL,CAjBJ,CAIEK,SAJF,CAKEC,CALF,CAiBIN,CAjBJ,CAKEM,QALF,CAMEC,CANF,CAiBIP,CAjBJ,CAMEO,QANF,CAOEC,CAPF,CAiBIR,CAjBJ,CAOEQ,QAPF,CAQEC,CARF,CAiBIT,CAjBJ,CAQES,MARF,CASEC,CATF,CAiBIV,CAjBJ,CASEU,OATF,CAUEC,CAVF,CAiBIX,CAjBJ,CAUEW,QAVF,GAiBIX,CAjBJ,CAWEY,IAXF,CAWEA,CAXF,YAWS,QAXT,KAiBIZ,CAjBJ,CAYEa,aAZF,CAYEA,CAZF,YAYkB,KAZlB,GAaEC,CAbF,CAiBId,CAjBJ,CAaEc,KAbF,CAcEC,CAdF,CAiBIf,CAjBJ,CAcEe,SAdF,CAeEC,CAfF,CAiBIhB,CAjBJ,CAeEgB,OAfF,CAgBKC,CAhBL,0BAiBIjB,CAjBJ,YAmBA,MACE,0CACE,SAAS,CAAEL,QAAQ,CAAC,CAAEkB,aAAa,CAAbA,CAAF,CAAiBX,IAAI,CAAJA,CAAjB,CAAuBE,IAAI,CAAJA,CAAvB,CAA6BQ,IAAI,CAAJA,CAA7B,CAAD,CAAsC,CAACP,CAAD,CAAtC,CADrB,EAEMY,CAFN,EAIGH,CAAK,EACJ,oBAAC,UAAD,EACE,IAAI,CAAEC,CADR,CAEE,QAAQ,CAAER,CAFZ,CAGE,SAAS,CAAEZ,QAAQ,CAAC,OAAD,CAAU,CAAEkB,aAAa,CAAbA,CAAF,CAAV,CAHrB,CAIE,IAAI,CAAEX,CAJR,EAMGY,CANH,CALJ,CAcE,2BAAK,SAAS,CAAEnB,QAAQ,CAAC,MAAD,CAAxB,EACE,2BACE,SAAS,CAAEA,QAAQ,CAAC,iBAAD,CAAoB,CACrCS,IAAI,CAAJA,CADqC,CAErCD,IAAI,CAAJA,CAFqC,CAGrCG,QAAQ,CAARA,CAHqC,CAIrCI,OAAO,CAAPA,CAJqC,CAKrCC,QAAQ,CAARA,CALqC,CAMrCF,MAAM,CAANA,CANqC,CAApB,CADrB,CASE,GAAG,CAAER,CATP,EAWGO,CAXH,CADF,CAcGQ,CAAO,EACN,oBAAC,YAAD,EAAc,SAAS,CAAErB,QAAQ,CAAC,SAAD,CAAjC,CAA8C,MAAM,CAAEc,CAAtD,EACGO,CADH,CAfJ,CAdF,CAoCH,CA1DsC,CAAlC"}
+{"version":3,"file":"SelectContainer.js","names":["React","forwardRef","FieldCaption","FieldLabel","cnSelect","defaultPropForm","defaultPropSize","defaultPropView","SelectContainer","props","ref","size","form","view","className","disabled","required","children","status","focused","id","multiple","type","labelPosition","label","labelIcon","caption","otherProps"],"sources":["../../../../../../src/components/SelectComponents/SelectContainer/SelectContainer.tsx"],"sourcesContent":["import { IconComponent } from '@consta/icons/Icon';\nimport React, { forwardRef } from 'react';\n\nimport { PropsWithHTMLAttributesAndRef } from '../../../utils/types/PropsWithHTMLAttributes';\nimport { FieldCaption } from '../../FieldCaption/FieldCaption';\nimport { FieldLabel } from '../../FieldLabel/FieldLabel';\nimport { cnSelect } from '../cnSelect';\nimport {\n  defaultPropForm,\n  defaultPropSize,\n  defaultPropView,\n  PropForm,\n  PropSize,\n  PropStatus,\n  PropView,\n} from '../types';\n\nexport type SelectContainerProps = PropsWithHTMLAttributesAndRef<\n  {\n    disabled?: boolean;\n    form?: PropForm;\n    size?: PropSize;\n    view?: PropView;\n    focused?: boolean;\n    multiple?: boolean;\n    required?: boolean;\n    status?: PropStatus;\n    label?: string;\n    labelIcon?: IconComponent;\n    type?: 'select' | 'combobox' | 'userselect';\n    labelPosition?: 'top' | 'left';\n    caption?: string;\n  },\n  HTMLDivElement\n>;\n\nexport const SelectContainer = forwardRef<HTMLDivElement, SelectContainerProps>(\n  (props, ref) => {\n    const {\n      size = defaultPropSize,\n      form = defaultPropForm,\n      view = defaultPropView,\n      className,\n      disabled,\n      required,\n      children,\n      status,\n      focused,\n      id,\n      multiple,\n      type = 'select',\n      labelPosition = 'top',\n      label,\n      labelIcon,\n      caption,\n      ...otherProps\n    } = props;\n\n    return (\n      <div\n        className={cnSelect({ labelPosition, size, view, type }, [className])}\n        {...otherProps}\n      >\n        {label && (\n          <FieldLabel\n            icon={labelIcon}\n            as=\"label\"\n            required={required}\n            htmlFor={id}\n            className={cnSelect('Label', { labelPosition })}\n            size={size}\n          >\n            {label}\n          </FieldLabel>\n        )}\n        <div className={cnSelect('Body')}>\n          <div\n            className={cnSelect('SelectContainer', {\n              view,\n              form,\n              disabled,\n              focused,\n              multiple,\n              status,\n            })}\n            ref={ref}\n          >\n            {children}\n          </div>\n          {caption && (\n            <FieldCaption className={cnSelect('Caption')} status={status}>\n              {caption}\n            </FieldCaption>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"+PACA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAGA,OAASC,YAAT,uCACA,OAASC,UAAT,mCACA,OAASC,QAAT,mBACA,OACEC,eADF,CAEEC,eAFF,CAGEC,eAHF,gBA6BA,MAAO,IAAMC,gBAAe,CAAGP,UAAU,CACvC,SAACQ,CAAD,CAAQC,CAAR,CAAgB,CACd,MAkBID,CAlBJ,CACEE,IADF,CACEA,CADF,YACSL,eADT,KAkBIG,CAlBJ,CAEEG,IAFF,CAEEA,CAFF,YAESP,eAFT,KAkBII,CAlBJ,CAGEI,IAHF,CAGEA,CAHF,YAGSN,eAHT,GAIEO,CAJF,CAkBIL,CAlBJ,CAIEK,SAJF,CAKEC,CALF,CAkBIN,CAlBJ,CAKEM,QALF,CAMEC,CANF,CAkBIP,CAlBJ,CAMEO,QANF,CAOEC,CAPF,CAkBIR,CAlBJ,CAOEQ,QAPF,CAQEC,CARF,CAkBIT,CAlBJ,CAQES,MARF,CASEC,CATF,CAkBIV,CAlBJ,CASEU,OATF,CAUEC,CAVF,CAkBIX,CAlBJ,CAUEW,EAVF,CAWEC,CAXF,CAkBIZ,CAlBJ,CAWEY,QAXF,GAkBIZ,CAlBJ,CAYEa,IAZF,CAYEA,CAZF,YAYS,QAZT,KAkBIb,CAlBJ,CAaEc,aAbF,CAaEA,CAbF,YAakB,KAblB,GAcEC,CAdF,CAkBIf,CAlBJ,CAcEe,KAdF,CAeEC,CAfF,CAkBIhB,CAlBJ,CAeEgB,SAfF,CAgBEC,CAhBF,CAkBIjB,CAlBJ,CAgBEiB,OAhBF,CAiBKC,CAjBL,0BAkBIlB,CAlBJ,YAoBA,MACE,0CACE,SAAS,CAAEL,QAAQ,CAAC,CAAEmB,aAAa,CAAbA,CAAF,CAAiBZ,IAAI,CAAJA,CAAjB,CAAuBE,IAAI,CAAJA,CAAvB,CAA6BS,IAAI,CAAJA,CAA7B,CAAD,CAAsC,CAACR,CAAD,CAAtC,CADrB,EAEMa,CAFN,EAIGH,CAAK,EACJ,oBAAC,UAAD,EACE,IAAI,CAAEC,CADR,CAEE,EAAE,CAAC,OAFL,CAGE,QAAQ,CAAET,CAHZ,CAIE,OAAO,CAAEI,CAJX,CAKE,SAAS,CAAEhB,QAAQ,CAAC,OAAD,CAAU,CAAEmB,aAAa,CAAbA,CAAF,CAAV,CALrB,CAME,IAAI,CAAEZ,CANR,EAQGa,CARH,CALJ,CAgBE,2BAAK,SAAS,CAAEpB,QAAQ,CAAC,MAAD,CAAxB,EACE,2BACE,SAAS,CAAEA,QAAQ,CAAC,iBAAD,CAAoB,CACrCS,IAAI,CAAJA,CADqC,CAErCD,IAAI,CAAJA,CAFqC,CAGrCG,QAAQ,CAARA,CAHqC,CAIrCI,OAAO,CAAPA,CAJqC,CAKrCE,QAAQ,CAARA,CALqC,CAMrCH,MAAM,CAANA,CANqC,CAApB,CADrB,CASE,GAAG,CAAER,CATP,EAWGO,CAXH,CADF,CAcGS,CAAO,EACN,oBAAC,YAAD,EAAc,SAAS,CAAEtB,QAAQ,CAAC,SAAD,CAAjC,CAA8C,MAAM,CAAEc,CAAtD,EACGQ,CADH,CAfJ,CAhBF,CAsCH,CA7DsC,CAAlC"}

package/__internal__/src/components/Steps/Steps.js

@@ -1,2 +1,2 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","items","value","getItemLabel","getItemDisabled","getItemCompleted","getItemSkipped","onChange","className"];import"./Steps.css";import{IconArrowLeft}from"@consta/icons/IconArrowLeft";import{IconArrowRight}from"@consta/icons/IconArrowRight";import React,{forwardRef,useMemo,useRef,useState}from"react";import{useChoiceGroup}from"../../hooks/useChoiceGroup/useChoiceGroup";import{useOverflow}from"../../hooks/useOverflow/useOverflow";import{useScrollElements}from"../../hooks/useScrollElements/useScrollElements";import{cn}from"../../utils/bem";import{Button}from"../Button/Button";import{withDefaultGetters}from"./helper";import{StepsStep}from"./StepsStep/StepsStep";import{stepsDefaultSize}from"./types";export var cnSteps=cn("Steps");var StepsRender=function(a,b){var c=withDefaultGetters(a),d=c.size,e=void 0===d?stepsDefaultSize:d,f=c.items,g=c.value,h=c.getItemLabel,i=c.getItemDisabled,j=c.getItemCompleted,k=c.getItemSkipped,l=c.onChange,m=c.className,n=_objectWithoutProperties(c,_excluded),o=useState(-1),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useChoiceGroup({value:g,getKey:h,callBack:l,multiple:!1}),t=s.getOnChange,u=s.getChecked;useMemo(function(){f.forEach(function(a,b){u(a)&&r(b)})},[f,g]);var v=useScrollElements(f),w=v.refs,x=v.scrollTo,y=useRef(null),z=useOverflow({currentRef:y}),A=function(a,b){b&&0!==q&&(t(f[q-1])(a),x(q-1)),b||q===f.length-1||(t(f[q+1])(a),x(q+1))};return React.createElement("div",Object.assign({ref:b,className:cnSteps({size:e},[m])},n),z&&React.createElement(Button,{iconLeft:function iconLeft(){return React.createElement(IconArrowLeft,{size:"xs"})},view:"clear",onlyIcon:!0,size:"xs",type:"button",className:cnSteps("Button",{side:"left"}),onClick:function onClick(a){return A(a,!0)}}),React.createElement("div",{ref:y,className:cnSteps("List")},f.map(function(a,b){return React.createElement(StepsStep,{key:b,ref:w[b],className:cnSteps("Item"),label:null!==j&&void 0!==j&&j(a)?h(a):"".concat(b+1," ").concat(h(a)),size:e,active:q===b,onChange:t(a),completed:null===j||void 0===j?void 0:j(a),skipped:null===k||void 0===k?void 0:k(a),disabled:null===i||void 0===i?void 0:i(a)})})),z&&React.createElement(Button,{iconLeft:function iconLeft(){return React.createElement(IconArrowRight,{size:"xs"})},view:"clear",onlyIcon:!0,size:"xs",type:"button",className:cnSteps("Button",{side:"right"}),onClick:function onClick(a){return A(a,!1)}}))};export var Steps=forwardRef(StepsRender);export*from"./types";
+import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["size","items","value","getItemLabel","getItemDisabled","getItemCompleted","getItemSkipped","onChange","className"];import"./Steps.css";import{IconArrowLeft}from"@consta/icons/IconArrowLeft";import{IconArrowRight}from"@consta/icons/IconArrowRight";import React,{forwardRef,useMemo,useRef,useState}from"react";import{useChoiceGroup}from"../../hooks/useChoiceGroup/useChoiceGroup";import{useOverflow}from"../../hooks/useOverflow/useOverflow";import{useScrollElements}from"../../hooks/useScrollElements/useScrollElements";import{cn}from"../../utils/bem";import{Button}from"../Button/Button";import{withDefaultGetters}from"./helper";import{StepsStep}from"./StepsStep/StepsStep";import{stepsDefaultSize}from"./types";export var cnSteps=cn("Steps");var StepsRender=function(a,b){var c=withDefaultGetters(a),d=c.size,e=void 0===d?stepsDefaultSize:d,f=c.items,g=c.value,h=c.getItemLabel,i=c.getItemDisabled,j=c.getItemCompleted,k=c.getItemSkipped,l=c.onChange,m=c.className,n=_objectWithoutProperties(c,_excluded),o=useState(-1),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useChoiceGroup({value:g,getKey:h,callBack:l,multiple:!1}),t=s.getOnChange,u=s.getChecked;useMemo(function(){f.forEach(function(a,b){u(a)&&r(b)})},[f,g]);var v=useScrollElements(f),w=v.refs,x=v.scrollTo,y=useRef(null),z=useOverflow({currentRef:y}),A=function(a,b){b&&0!==q&&(t(f[q-1])(a),x(q-1)),b||q===f.length-1||(t(f[q+1])(a),x(q+1))};return React.createElement("div",Object.assign({ref:b,className:cnSteps({size:e},[m])},n),z&&React.createElement(Button,{iconLeft:function iconLeft(){return React.createElement(IconArrowLeft,{size:"xs"})},view:"clear",onlyIcon:!0,size:"xs",type:"button",className:cnSteps("Button",{side:"left"}),onClick:function onClick(a){return A(a,!0)}}),React.createElement("div",{ref:y,className:cnSteps("List")},f.map(function(a,b){return React.createElement(StepsStep,{key:b,ref:w[b],className:cnSteps("Item"),label:h(a),step:b+1,size:e,active:q===b,onChange:t(a),completed:null===j||void 0===j?void 0:j(a),skipped:null===k||void 0===k?void 0:k(a),disabled:null===i||void 0===i?void 0:i(a)})})),z&&React.createElement(Button,{iconLeft:function iconLeft(){return React.createElement(IconArrowRight,{size:"xs"})},view:"clear",onlyIcon:!0,size:"xs",type:"button",className:cnSteps("Button",{side:"right"}),onClick:function onClick(a){return A(a,!1)}}))};export var Steps=forwardRef(StepsRender);export*from"./types";
 //# sourceMappingURL=Steps.js.map

package/__internal__/src/components/Steps/Steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"Steps.js","names":["IconArrowLeft","IconArrowRight","React","forwardRef","useMemo","useRef","useState","useChoiceGroup","useOverflow","useScrollElements","cn","Button","withDefaultGetters","StepsStep","stepsDefaultSize","cnSteps","StepsRender","props","ref","size","items","value","getItemLabel","getItemDisabled","getItemCompleted","getItemSkipped","onChange","className","otherProps","activeStep","setActiveStep","getKey","callBack","multiple","getOnChange","getChecked","forEach","item","index","refs","scrollTo","stepsRef","isOverflow","currentRef","changeStep","e","prev","length","side","map","Steps"],"sources":["../../../../../src/components/Steps/Steps.tsx"],"sourcesContent":["import './Steps.css';\n\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\nimport React, { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';\nimport { useOverflow } from '../../hooks/useOverflow/useOverflow';\nimport { useScrollElements } from '../../hooks/useScrollElements/useScrollElements';\nimport { cn } from '../../utils/bem';\nimport { Button } from '../Button/Button';\nimport { withDefaultGetters } from './helper';\nimport { StepsStep } from './StepsStep/StepsStep';\nimport { StepsCompnent, stepsDefaultSize, StepsProps } from './types';\n\nexport const cnSteps = cn('Steps');\n\nconst StepsRender = (props: StepsProps, ref: React.Ref<HTMLDivElement>) => {\n  const {\n    size = stepsDefaultSize,\n    items,\n    value,\n    getItemLabel,\n    getItemDisabled,\n    getItemCompleted,\n    getItemSkipped,\n    onChange,\n    className,\n    ...otherProps\n  } = withDefaultGetters(props);\n\n  const [activeStep, setActiveStep] = useState<number>(-1);\n\n  const { getOnChange, getChecked } = useChoiceGroup({\n    value,\n    getKey: getItemLabel,\n    callBack: onChange,\n    multiple: false,\n  });\n\n  useMemo(() => {\n    items.forEach((item, index) => {\n      if (getChecked(item)) {\n        setActiveStep(index);\n      }\n    });\n  }, [items, value]);\n\n  const { refs, scrollTo } = useScrollElements(items);\n\n  const stepsRef = useRef<HTMLDivElement>(null);\n\n  const isOverflow = useOverflow({ currentRef: stepsRef });\n\n  const changeStep = (e: React.MouseEvent, prev: boolean) => {\n    if (prev && activeStep !== 0) {\n      getOnChange(items[activeStep - 1])(e);\n      scrollTo(activeStep - 1);\n    }\n    if (!prev && activeStep !== items.length - 1) {\n      getOnChange(items[activeStep + 1])(e);\n      scrollTo(activeStep + 1);\n    }\n  };\n\n  return (\n    <div ref={ref} className={cnSteps({ size }, [className])} {...otherProps}>\n      {isOverflow && (\n        <Button\n          iconLeft={() => <IconArrowLeft size=\"xs\" />}\n          view=\"clear\"\n          onlyIcon\n          size=\"xs\"\n          type=\"button\"\n          className={cnSteps('Button', { side: 'left' })}\n          onClick={(e) => changeStep(e, true)}\n        />\n      )}\n      <div ref={stepsRef} className={cnSteps('List')}>\n        {items.map((item, index) => (\n          <StepsStep\n            key={index}\n            ref={refs[index] as React.RefObject<HTMLButtonElement>}\n            className={cnSteps('Item')}\n            label={\n              getItemCompleted?.(item)\n                ? getItemLabel(item)\n                : `${index + 1} ${getItemLabel(item)}`\n            }\n            size={size}\n            active={activeStep === index}\n            onChange={getOnChange(item)}\n            completed={getItemCompleted?.(item)}\n            skipped={getItemSkipped?.(item)}\n            disabled={getItemDisabled?.(item)}\n          />\n        ))}\n      </div>\n      {isOverflow && (\n        <Button\n          iconLeft={() => <IconArrowRight size=\"xs\" />}\n          view=\"clear\"\n          onlyIcon\n          size=\"xs\"\n          type=\"button\"\n          className={cnSteps('Button', { side: 'right' })}\n          onClick={(e) => changeStep(e, false)}\n        />\n      )}\n    </div>\n  );\n};\n\nexport const Steps = forwardRef(StepsRender) as StepsCompnent;\n\nexport * from './types';\n"],"mappings":"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"}
+{"version":3,"file":"Steps.js","names":["IconArrowLeft","IconArrowRight","React","forwardRef","useMemo","useRef","useState","useChoiceGroup","useOverflow","useScrollElements","cn","Button","withDefaultGetters","StepsStep","stepsDefaultSize","cnSteps","StepsRender","props","ref","size","items","value","getItemLabel","getItemDisabled","getItemCompleted","getItemSkipped","onChange","className","otherProps","activeStep","setActiveStep","getKey","callBack","multiple","getOnChange","getChecked","forEach","item","index","refs","scrollTo","stepsRef","isOverflow","currentRef","changeStep","e","prev","length","side","map","Steps"],"sources":["../../../../../src/components/Steps/Steps.tsx"],"sourcesContent":["import './Steps.css';\n\nimport { IconArrowLeft } from '@consta/icons/IconArrowLeft';\nimport { IconArrowRight } from '@consta/icons/IconArrowRight';\nimport React, { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';\nimport { useOverflow } from '../../hooks/useOverflow/useOverflow';\nimport { useScrollElements } from '../../hooks/useScrollElements/useScrollElements';\nimport { cn } from '../../utils/bem';\nimport { Button } from '../Button/Button';\nimport { withDefaultGetters } from './helper';\nimport { StepsStep } from './StepsStep/StepsStep';\nimport { StepsCompnent, stepsDefaultSize, StepsProps } from './types';\n\nexport const cnSteps = cn('Steps');\n\nconst StepsRender = (props: StepsProps, ref: React.Ref<HTMLDivElement>) => {\n  const {\n    size = stepsDefaultSize,\n    items,\n    value,\n    getItemLabel,\n    getItemDisabled,\n    getItemCompleted,\n    getItemSkipped,\n    onChange,\n    className,\n    ...otherProps\n  } = withDefaultGetters(props);\n\n  const [activeStep, setActiveStep] = useState<number>(-1);\n\n  const { getOnChange, getChecked } = useChoiceGroup({\n    value,\n    getKey: getItemLabel,\n    callBack: onChange,\n    multiple: false,\n  });\n\n  useMemo(() => {\n    items.forEach((item, index) => {\n      if (getChecked(item)) {\n        setActiveStep(index);\n      }\n    });\n  }, [items, value]);\n\n  const { refs, scrollTo } = useScrollElements(items);\n\n  const stepsRef = useRef<HTMLDivElement>(null);\n\n  const isOverflow = useOverflow({ currentRef: stepsRef });\n\n  const changeStep = (e: React.MouseEvent, prev: boolean) => {\n    if (prev && activeStep !== 0) {\n      getOnChange(items[activeStep - 1])(e);\n      scrollTo(activeStep - 1);\n    }\n    if (!prev && activeStep !== items.length - 1) {\n      getOnChange(items[activeStep + 1])(e);\n      scrollTo(activeStep + 1);\n    }\n  };\n\n  return (\n    <div ref={ref} className={cnSteps({ size }, [className])} {...otherProps}>\n      {isOverflow && (\n        <Button\n          iconLeft={() => <IconArrowLeft size=\"xs\" />}\n          view=\"clear\"\n          onlyIcon\n          size=\"xs\"\n          type=\"button\"\n          className={cnSteps('Button', { side: 'left' })}\n          onClick={(e) => changeStep(e, true)}\n        />\n      )}\n      <div ref={stepsRef} className={cnSteps('List')}>\n        {items.map((item, index) => (\n          <StepsStep\n            key={index}\n            ref={refs[index] as React.RefObject<HTMLButtonElement>}\n            className={cnSteps('Item')}\n            label={getItemLabel(item)}\n            step={index + 1}\n            size={size}\n            active={activeStep === index}\n            onChange={getOnChange(item)}\n            completed={getItemCompleted?.(item)}\n            skipped={getItemSkipped?.(item)}\n            disabled={getItemDisabled?.(item)}\n          />\n        ))}\n      </div>\n      {isOverflow && (\n        <Button\n          iconLeft={() => <IconArrowRight size=\"xs\" />}\n          view=\"clear\"\n          onlyIcon\n          size=\"xs\"\n          type=\"button\"\n          className={cnSteps('Button', { side: 'right' })}\n          onClick={(e) => changeStep(e, false)}\n        />\n      )}\n    </div>\n  );\n};\n\nexport const Steps = forwardRef(StepsRender) as StepsCompnent;\n\nexport * from './types';\n"],"mappings":"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"}

package/__internal__/src/components/Steps/StepsStep/StepsStep.css

@@ -1 +1 @@
-.StepsStep{align-items:center;background-color:transparent;border:none;color:var(--color-control-typo-ghost);cursor:pointer;display:inline-flex;flex:1;font-family:var(--font);line-height:var(--line-height-text-s);padding:var(--space-xs) 0;position:relative;text-align:left;transition:color .2s,font-weight .2s;white-space:nowrap}.StepsStep-Icon{margin-right:var(--space-2xs)}.StepsStep:after{background-color:var(--color-control-bg-ghost);border-radius:var(--control-radius);bottom:-2px;content:"";height:2px;position:absolute;transition:background-color .2s,opacity .2s;width:100%}.StepsStep:hover{color:var(--color-control-typo-ghost-hover)}.StepsStep:hover:after{background-color:var(--color-control-bg-ghost-hover)}.StepsStep:focus{outline:none}.StepsStep_size_m{font-size:var(--size-text-m)}.StepsStep_size_l{font-size:var(--size-text-l)}.StepsStep_active,.StepsStep_completed,.StepsStep_skipped{color:var(--color-control-typo-secondary)}.StepsStep_active:after,.StepsStep_completed:after,.StepsStep_skipped:after{background-color:var(--color-control-bg-border-secondary);opacity:.5}.StepsStep_active:hover,.StepsStep_completed:hover,.StepsStep_skipped:hover{color:var(--color-control-typo-secondary-hover)}.StepsStep_active:hover:after,.StepsStep_completed:hover:after,.StepsStep_skipped:hover:after{background-color:var(--color-control-bg-border-secondary-hover);opacity:.5}.StepsStep_active{font-weight:var(--font-weight-text-semibold)}.StepsStep_active:after{opacity:1}.StepsStep_active:hover:after{opacity:1}.StepsStep_disabled{color:var(--color-control-typo-disable);cursor:unset}.StepsStep_disabled:after{background-color:var(--color-control-bg-disable)}.StepsStep_disabled:hover{color:var(--color-control-typo-disable)}.StepsStep_disabled:hover:after{background-color:var(--color-control-bg-disable)}
+.StepsStep{align-items:center;background-color:transparent;border:none;color:var(--color-control-typo-ghost);cursor:pointer;display:inline-flex;flex:1;font-family:var(--font);font-size:var(--step-text-size);gap:var(--space-2xs);line-height:var(--line-height-text-s);line-height:var(--step-text-line-height);padding:var(--space-xs) var(--step-text-padding-right) var(--space-xs) 0;position:relative;text-align:left;transition:color .2s,font-weight .2s;white-space:nowrap}.StepsStep:after{background-color:var(--color-control-bg-ghost);border-radius:var(--control-radius);bottom:-2px;content:"";height:2px;position:absolute;transition:background-color .2s,opacity .2s;width:100%}.StepsStep:hover{color:var(--color-control-typo-ghost-hover)}.StepsStep:hover:after{background-color:var(--color-control-bg-ghost-hover)}.StepsStep:focus{outline:none}.StepsStep_size_s{--step-text-size:var(--size-text-s);--step-text-padding-right:var(--space-xs);--step-text-line-height:var(--line-height-text-xs)}.StepsStep_size_m{--step-text-padding-right:var(--space-s);--step-text-size:var(--size-text-m);--step-text-line-height:var(--line-height-text-s)}.StepsStep_size_l{--step-text-padding-right:var(--space-s);--step-text-size:var(--size-text-l);--step-text-line-height:var(--line-height-text-s)}.StepsStep_active,.StepsStep_completed,.StepsStep_skipped{color:var(--color-control-typo-secondary)}.StepsStep_active:after,.StepsStep_completed:after,.StepsStep_skipped:after{background-color:var(--color-control-bg-border-secondary);opacity:.5}.StepsStep_active:hover,.StepsStep_completed:hover,.StepsStep_skipped:hover{color:var(--color-control-typo-secondary-hover)}.StepsStep_active:hover:after,.StepsStep_completed:hover:after,.StepsStep_skipped:hover:after{background-color:var(--color-control-bg-border-secondary-hover);opacity:.5}.StepsStep_active{font-weight:var(--font-weight-text-semibold)}.StepsStep_active:after{opacity:1}.StepsStep_active:hover:after{opacity:1}.StepsStep_disabled{color:var(--color-control-typo-disable);cursor:unset}.StepsStep_disabled:after{background-color:var(--color-control-bg-disable)}.StepsStep_disabled:hover{color:var(--color-control-typo-disable)}.StepsStep_disabled:hover:after{background-color:var(--color-control-bg-disable)}

package/__internal__/src/components/Steps/StepsStep/StepsStep.d.ts

@@ -5,6 +5,7 @@ export declare const cnStepsStep: import("@bem-react/classname").ClassNameFormat
 declare type Props = {
     size: StepsPropSize;
     label: string;
+    step?: number;
     active?: boolean;
     disabled?: boolean;
     completed?: boolean;

package/__internal__/src/components/Steps/StepsStep/StepsStep.js

@@ -1,2 +1,2 @@
-import"./StepsStep.css";import{IconCheck}from"@consta/icons/IconCheck";import React from"react";import{cn}from"../../../utils/bem";import{getByMap}from"../../../utils/getByMap";export var cnStepsStep=cn("StepsStep");var sizeMap={m:"xs",l:"s"};export var StepsStep=React.forwardRef(function(a,b){var c=a.size,d=a.label,e=a.active,f=void 0!==e&&e,g=a.disabled,h=void 0!==g&&g,i=a.completed,j=void 0!==i&&i,k=a.skipped,l=a.onChange,m=a.className,n=getByMap(sizeMap,c);return React.createElement("button",{ref:b,className:cnStepsStep({size:c,active:f,disabled:h,completed:j,skipped:void 0!==k&&k},[m]),type:"button",title:d,onClick:function clickHandler(a){f||h||(null===l||void 0===l?void 0:l(a))}},j&&React.createElement(IconCheck,{className:cnStepsStep("Icon"),size:n}),React.createElement("span",null,d))});
+import"./StepsStep.css";import{IconCheck}from"@consta/icons/IconCheck";import React from"react";import{cn}from"../../../utils/bem";import{getByMap}from"../../../utils/getByMap";export var cnStepsStep=cn("StepsStep");var sizeMap={m:"xs",s:"xs",l:"s"};export var StepsStep=React.forwardRef(function(a,b){var c=a.size,d=a.label,e=a.active,f=void 0!==e&&e,g=a.disabled,h=void 0!==g&&g,i=a.completed,j=void 0!==i&&i,k=a.skipped,l=a.onChange,m=a.step,n=void 0===m?1:m,o=a.className,p=getByMap(sizeMap,c);return React.createElement("button",{ref:b,className:cnStepsStep({size:c,active:f,disabled:h,completed:j,skipped:void 0!==k&&k},[o]),type:"button",title:d,onClick:function clickHandler(a){f||h||(null===l||void 0===l?void 0:l(a))}},j?React.createElement(IconCheck,{className:cnStepsStep("Icon"),size:p}):n,React.createElement("span",null,d))});
 //# sourceMappingURL=StepsStep.js.map

package/__internal__/src/components/Steps/StepsStep/StepsStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepsStep.js","names":["IconCheck","React","cn","getByMap","cnStepsStep","sizeMap","m","l","StepsStep","forwardRef","props","ref","size","label","active","disabled","completed","skipped","onChange","className","iconSize","clickHandler","e"],"sources":["../../../../../../src/components/Steps/StepsStep/StepsStep.tsx"],"sourcesContent":["import './StepsStep.css';\n\nimport { IconPropSize } from '@consta/icons/Icon';\nimport { IconCheck } from '@consta/icons/IconCheck';\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { getByMap } from '../../../utils/getByMap';\nimport { StepsPropSize } from '../Steps';\n\nexport const cnStepsStep = cn('StepsStep');\n\ntype Props = {\n  size: StepsPropSize;\n  label: string;\n  active?: boolean;\n  disabled?: boolean;\n  completed?: boolean;\n  skipped?: boolean;\n  onChange: React.MouseEventHandler<HTMLButtonElement>;\n  className?: string;\n};\n\nconst sizeMap: Record<StepsPropSize, IconPropSize> = {\n  m: 'xs',\n  l: 's',\n};\n\nexport const StepsStep = React.forwardRef<HTMLButtonElement, Props>(\n  (props, ref) => {\n    const {\n      size,\n      label,\n      active = false,\n      disabled = false,\n      completed = false,\n      skipped = false,\n      onChange,\n      className,\n    } = props;\n\n    const clickHandler = (e: React.MouseEvent<HTMLButtonElement>) => {\n      !active && !disabled && onChange?.(e);\n    };\n    const iconSize = getByMap(sizeMap, size);\n\n    return (\n      <button\n        ref={ref}\n        className={cnStepsStep({ size, active, disabled, completed, skipped }, [\n          className,\n        ])}\n        type=\"button\"\n        title={label}\n        onClick={clickHandler}\n      >\n        {completed && (\n          <IconCheck className={cnStepsStep('Icon')} size={iconSize} />\n        )}\n        <span>{label}</span>\n      </button>\n    );\n  },\n);\n"],"mappings":"AAAA,wBAGA,OAASA,SAAT,KAA0B,yBAA1B,CACA,MAAOC,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,QAAT,+BAGA,MAAO,IAAMC,YAAW,CAAGF,EAAE,CAAC,WAAD,CAAtB,CAaP,GAAMG,QAA4C,CAAG,CACnDC,CAAC,CAAE,IADgD,CAEnDC,CAAC,CAAE,GAFgD,CAArD,CAKA,MAAO,IAAMC,UAAS,CAAGP,KAAK,CAACQ,UAAN,CACvB,SAACC,CAAD,CAAQC,CAAR,CAAgB,IAEZC,EAFY,CAUVF,CAVU,CAEZE,IAFY,CAGZC,CAHY,CAUVH,CAVU,CAGZG,KAHY,GAUVH,CAVU,CAIZI,MAJY,CAIZA,CAJY,iBAUVJ,CAVU,CAKZK,QALY,CAKZA,CALY,iBAUVL,CAVU,CAMZM,SANY,CAMZA,CANY,iBAUVN,CAVU,CAOZO,OAPY,CAQZC,CARY,CAUVR,CAVU,CAQZQ,QARY,CASZC,CATY,CAUVT,CAVU,CASZS,SATY,CAeRC,CAAQ,CAAGjB,QAAQ,CAACE,OAAD,CAAUO,CAAV,CAfX,CAiBd,MACE,+BACE,GAAG,CAAED,CADP,CAEE,SAAS,CAAEP,WAAW,CAAC,CAAEQ,IAAI,CAAJA,CAAF,CAAQE,MAAM,CAANA,CAAR,CAAgBC,QAAQ,CAARA,CAAhB,CAA0BC,SAAS,CAATA,CAA1B,CAAqCC,OAAO,cAA5C,CAAD,CAAiD,CACrEE,CADqE,CAAjD,CAFxB,CAKE,IAAI,CAAC,QALP,CAME,KAAK,CAAEN,CANT,CAOE,OAAO,CAbU,QAAfQ,aAAe,CAACC,CAAD,CAA4C,CAC9DR,CAAD,EAAYC,CAAZ,UAAwBG,CAAxB,WAAwBA,CAAxB,QAAwBA,CAAQ,CAAGI,CAAH,CAAhC,CACD,CAIC,EASGN,CAAS,EACR,oBAAC,SAAD,EAAW,SAAS,CAAEZ,WAAW,CAAC,MAAD,CAAjC,CAA2C,IAAI,CAAEgB,CAAjD,EAVJ,CAYE,gCAAOP,CAAP,CAZF,CAeH,CAlCsB,CAAlB"}
+{"version":3,"file":"StepsStep.js","names":["IconCheck","React","cn","getByMap","cnStepsStep","sizeMap","m","s","l","StepsStep","forwardRef","props","ref","size","label","active","disabled","completed","skipped","onChange","step","className","iconSize","clickHandler","e"],"sources":["../../../../../../src/components/Steps/StepsStep/StepsStep.tsx"],"sourcesContent":["import './StepsStep.css';\n\nimport { IconPropSize } from '@consta/icons/Icon';\nimport { IconCheck } from '@consta/icons/IconCheck';\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { getByMap } from '../../../utils/getByMap';\nimport { StepsPropSize } from '../Steps';\n\nexport const cnStepsStep = cn('StepsStep');\n\ntype Props = {\n  size: StepsPropSize;\n  label: string;\n  step?: number;\n  active?: boolean;\n  disabled?: boolean;\n  completed?: boolean;\n  skipped?: boolean;\n  onChange: React.MouseEventHandler<HTMLButtonElement>;\n  className?: string;\n};\n\nconst sizeMap: Record<StepsPropSize, IconPropSize> = {\n  m: 'xs',\n  s: 'xs',\n  l: 's',\n};\n\nexport const StepsStep = React.forwardRef<HTMLButtonElement, Props>(\n  (props, ref) => {\n    const {\n      size,\n      label,\n      active = false,\n      disabled = false,\n      completed = false,\n      skipped = false,\n      onChange,\n      step = 1,\n      className,\n    } = props;\n\n    const clickHandler = (e: React.MouseEvent<HTMLButtonElement>) => {\n      !active && !disabled && onChange?.(e);\n    };\n    const iconSize = getByMap(sizeMap, size);\n\n    return (\n      <button\n        ref={ref}\n        className={cnStepsStep({ size, active, disabled, completed, skipped }, [\n          className,\n        ])}\n        type=\"button\"\n        title={label}\n        onClick={clickHandler}\n      >\n        {completed ? (\n          <IconCheck className={cnStepsStep('Icon')} size={iconSize} />\n        ) : (\n          step\n        )}\n        <span>{label}</span>\n      </button>\n    );\n  },\n);\n"],"mappings":"AAAA,wBAGA,OAASA,SAAT,KAA0B,yBAA1B,CACA,MAAOC,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,QAAT,+BAGA,MAAO,IAAMC,YAAW,CAAGF,EAAE,CAAC,WAAD,CAAtB,CAcP,GAAMG,QAA4C,CAAG,CACnDC,CAAC,CAAE,IADgD,CAEnDC,CAAC,CAAE,IAFgD,CAGnDC,CAAC,CAAE,GAHgD,CAArD,CAMA,MAAO,IAAMC,UAAS,CAAGR,KAAK,CAACS,UAAN,CACvB,SAACC,CAAD,CAAQC,CAAR,CAAgB,IAEZC,EAFY,CAWVF,CAXU,CAEZE,IAFY,CAGZC,CAHY,CAWVH,CAXU,CAGZG,KAHY,GAWVH,CAXU,CAIZI,MAJY,CAIZA,CAJY,iBAWVJ,CAXU,CAKZK,QALY,CAKZA,CALY,iBAWVL,CAXU,CAMZM,SANY,CAMZA,CANY,iBAWVN,CAXU,CAOZO,OAPY,CAQZC,CARY,CAWVR,CAXU,CAQZQ,QARY,GAWVR,CAXU,CASZS,IATY,CASZA,CATY,YASL,CATK,GAUZC,CAVY,CAWVV,CAXU,CAUZU,SAVY,CAgBRC,CAAQ,CAAGnB,QAAQ,CAACE,OAAD,CAAUQ,CAAV,CAhBX,CAkBd,MACE,+BACE,GAAG,CAAED,CADP,CAEE,SAAS,CAAER,WAAW,CAAC,CAAES,IAAI,CAAJA,CAAF,CAAQE,MAAM,CAANA,CAAR,CAAgBC,QAAQ,CAARA,CAAhB,CAA0BC,SAAS,CAATA,CAA1B,CAAqCC,OAAO,cAA5C,CAAD,CAAiD,CACrEG,CADqE,CAAjD,CAFxB,CAKE,IAAI,CAAC,QALP,CAME,KAAK,CAAEP,CANT,CAOE,OAAO,CAbU,QAAfS,aAAe,CAACC,CAAD,CAA4C,CAC9DT,CAAD,EAAYC,CAAZ,UAAwBG,CAAxB,WAAwBA,CAAxB,QAAwBA,CAAQ,CAAGK,CAAH,CAAhC,CACD,CAIC,EASGP,CAAS,CACR,oBAAC,SAAD,EAAW,SAAS,CAAEb,WAAW,CAAC,MAAD,CAAjC,CAA2C,IAAI,CAAEkB,CAAjD,EADQ,CAGRF,CAZJ,CAcE,gCAAON,CAAP,CAdF,CAiBH,CArCsB,CAAlB"}

package/__internal__/src/components/Steps/helper.d.ts

@@ -5,7 +5,7 @@ export declare function withDefaultGetters(props: StepsProps): {
     getItemDisabled: StepsPropGetDisabled<StepsItemDefault>;
     getItemCompleted: StepsPropGetCompleted<StepsItemDefault>;
     getItemSkipped: StepsPropGetSkipped<StepsItemDefault>;
-    size?: "m" | "l" | undefined;
+    size?: "m" | "s" | "l" | undefined;
     items: StepsItemDefault[];
     value: StepsItemDefault;
     onChange: import("./types").StepsPropOnChange<StepsItemDefault>;

package/__internal__/src/components/Steps/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
-export declare const stepsSizes: readonly ["m", "l"];
+export declare const stepsSizes: readonly ["m", "s", "l"];
 export declare type StepsPropSize = typeof stepsSizes[number];
 export declare const stepsDefaultSize: StepsPropSize;
 export declare type StepsPropOnChange<ITEM> = (props: {

package/__internal__/src/components/Steps/types.js

@@ -1,2 +1,2 @@
-export var stepsSizes=["m","l"];export var stepsDefaultSize=stepsSizes[0];
+export var stepsSizes=["m","s","l"];export var stepsDefaultSize=stepsSizes[0];
 //# sourceMappingURL=types.js.map

package/__internal__/src/components/Steps/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["stepsSizes","stepsDefaultSize"],"sources":["../../../../../src/components/Steps/types.ts"],"sourcesContent":["import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport const stepsSizes = ['m', 'l'] as const;\nexport type StepsPropSize = typeof stepsSizes[number];\nexport const stepsDefaultSize: StepsPropSize = stepsSizes[0];\n\nexport type StepsPropOnChange<ITEM> = (props: {\n  e: React.MouseEvent;\n  value: ITEM;\n}) => void;\n\nexport type StepsPropGetLabel<ITEM> = (item: ITEM) => string;\nexport type StepsPropGetDisabled<ITEM> = (item: ITEM) => boolean | undefined;\nexport type StepsPropGetSkipped<ITEM> = (item: ITEM) => boolean | undefined;\nexport type StepsPropGetCompleted<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type StepsItemDefault = {\n  label: string;\n  disabled?: boolean;\n  skipped?: boolean;\n  completed?: boolean;\n};\n\nexport type StepsProps<ITEM = StepsItemDefault> = PropsWithHTMLAttributesAndRef<\n  {\n    size?: StepsPropSize;\n    items: ITEM[];\n    value: ITEM;\n    getItemLabel?: StepsPropGetLabel<ITEM>;\n    getItemDisabled?: StepsPropGetDisabled<ITEM>;\n    getItemCompleted?: StepsPropGetCompleted<ITEM>;\n    getItemSkipped?: StepsPropGetSkipped<ITEM>;\n    onChange: StepsPropOnChange<ITEM>;\n    className?: string;\n  },\n  HTMLDivElement\n> &\n  (ITEM extends { label: StepsItemDefault['label'] }\n    ? {}\n    : {\n        getItemLabel: StepsPropGetLabel<ITEM>;\n      });\n\nexport type StepsCompnent = <ITEM>(\n  props: StepsProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":"AAEA,MAAO,IAAMA,WAAU,CAAG,CAAC,GAAD,CAAM,GAAN,CAAnB,CAEP,MAAO,IAAMC,iBAA+B,CAAGD,UAAU,CAAC,CAAD,CAAlD"}
+{"version":3,"file":"types.js","names":["stepsSizes","stepsDefaultSize"],"sources":["../../../../../src/components/Steps/types.ts"],"sourcesContent":["import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';\n\nexport const stepsSizes = ['m', 's', 'l'] as const;\nexport type StepsPropSize = typeof stepsSizes[number];\nexport const stepsDefaultSize: StepsPropSize = stepsSizes[0];\n\nexport type StepsPropOnChange<ITEM> = (props: {\n  e: React.MouseEvent;\n  value: ITEM;\n}) => void;\n\nexport type StepsPropGetLabel<ITEM> = (item: ITEM) => string;\nexport type StepsPropGetDisabled<ITEM> = (item: ITEM) => boolean | undefined;\nexport type StepsPropGetSkipped<ITEM> = (item: ITEM) => boolean | undefined;\nexport type StepsPropGetCompleted<ITEM> = (item: ITEM) => boolean | undefined;\n\nexport type StepsItemDefault = {\n  label: string;\n  disabled?: boolean;\n  skipped?: boolean;\n  completed?: boolean;\n};\n\nexport type StepsProps<ITEM = StepsItemDefault> = PropsWithHTMLAttributesAndRef<\n  {\n    size?: StepsPropSize;\n    items: ITEM[];\n    value: ITEM;\n    getItemLabel?: StepsPropGetLabel<ITEM>;\n    getItemDisabled?: StepsPropGetDisabled<ITEM>;\n    getItemCompleted?: StepsPropGetCompleted<ITEM>;\n    getItemSkipped?: StepsPropGetSkipped<ITEM>;\n    onChange: StepsPropOnChange<ITEM>;\n    className?: string;\n  },\n  HTMLDivElement\n> &\n  (ITEM extends { label: StepsItemDefault['label'] }\n    ? {}\n    : {\n        getItemLabel: StepsPropGetLabel<ITEM>;\n      });\n\nexport type StepsCompnent = <ITEM>(\n  props: StepsProps<ITEM>,\n) => React.ReactElement | null;\n"],"mappings":"AAEA,MAAO,IAAMA,WAAU,CAAG,CAAC,GAAD,CAAM,GAAN,CAAW,GAAX,CAAnB,CAEP,MAAO,IAAMC,iBAA+B,CAAGD,UAAU,CAAC,CAAD,CAAlD"}

package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js

@@ -1,2 +1,2 @@
-import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import"./TabsFitModeDropdownWrapper.css";import React from"react";import{cn}from"../../../utils/bem";import{getTabsWidth}from"../helpers";import{TabsMoreItems}from"../MoreItems/TabsMoreItems";import{useFittingItems}from"./useFittingItems";var cnTabsFitModeDropdownWrapper=cn("TabsFitModeDropdownWrapper");export var TabsFitModeDropdownWrapper=function(a){var b=a.items,c=a.tabsDimensions,d=a.tabRefs,e=a.getItemLabel,f=a.getItemChecked,g=a.renderItem,h=a.renderItemsList,i=a.size,j=React.useRef(null),k=React.useRef(null),l=useFittingItems({tabsDimensions:c,containerRef:j,moreItemsRef:k}),m=l.isItemHidden,n=b.filter(function(a,b){return m(b)}),o=React.useMemo(function(){return Math.max.apply(Math,_toConsumableArray(d.map(function(a){var b,c;return null!==(b=null===(c=a.current)||void 0===c?void 0:c.offsetHeight)&&void 0!==b?b:0})))},[c]),p=n.some(f),q=getTabsWidth(c.filter(function(a,b){return!m(b)}));return React.createElement("div",{ref:j,className:cnTabsFitModeDropdownWrapper(),style:{height:o}},React.createElement("div",{className:cnTabsFitModeDropdownWrapper("Tabs")},h({withRunningLine:!p,getTabClassName:function getTabClassName(a){return cnTabsFitModeDropdownWrapper("Tab",{hidden:m(a)})}})),React.createElement("div",{ref:k,className:cnTabsFitModeDropdownWrapper("MoreItems",{hidden:!n.length}),style:{left:n.length?q:void 0}},React.createElement(TabsMoreItems,{items:n,renderItem:g,getItemLabel:e,getItemChecked:f,height:o,size:i})))};
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import"./TabsFitModeDropdownWrapper.css";import React from"react";import{cn}from"../../../utils/bem";import{getTabsWidth}from"../helpers";import{TabsMoreItems}from"../MoreItems/TabsMoreItems";import{useFittingItems}from"./useFittingItems";var cnTabsFitModeDropdownWrapper=cn("TabsFitModeDropdownWrapper");export var TabsFitModeDropdownWrapper=function(a){var b=a.items,c=a.tabsDimensions,d=a.tabRefs,e=a.getItemLabel,f=a.getItemChecked,g=a.renderItem,h=a.renderItemsList,i=a.size,j=React.useRef(null),k=React.useRef(null),l=useFittingItems({tabsDimensions:c,containerRef:j,moreItemsRef:k}),m=l.isItemHidden,n=b.filter(function(a,b){return m(b)}),o=React.useMemo(function(){return d.length?Math.max.apply(Math,_toConsumableArray(d.map(function(a){var b,c;return null!==(b=null===(c=a.current)||void 0===c?void 0:c.offsetHeight)&&void 0!==b?b:0}))):0},[c]),p=n.some(f),q=getTabsWidth(c.filter(function(a,b){return!m(b)}));return React.createElement("div",{ref:j,className:cnTabsFitModeDropdownWrapper(),style:{height:o}},React.createElement("div",{className:cnTabsFitModeDropdownWrapper("Tabs")},h({withRunningLine:!p,getTabClassName:function getTabClassName(a){return cnTabsFitModeDropdownWrapper("Tab",{hidden:m(a)})}})),React.createElement("div",{ref:k,className:cnTabsFitModeDropdownWrapper("MoreItems",{hidden:!n.length}),style:{left:n.length?q:void 0}},React.createElement(TabsMoreItems,{items:n,renderItem:g,getItemLabel:e,getItemChecked:f,height:o,size:i})))};
 //# sourceMappingURL=TabsFitModeDropdownWrapper.js.map

package/__internal__/src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsFitModeDropdownWrapper.js","names":["React","cn","getTabsWidth","TabsMoreItems","useFittingItems","cnTabsFitModeDropdownWrapper","TabsFitModeDropdownWrapper","items","tabsDimensions","tabRefs","getItemLabel","getItemChecked","renderItem","renderItemsList","size","ref","useRef","moreItemsRef","containerRef","isItemHidden","hiddenItems","filter","_item","idx","maxTabHeight","useMemo","Math","max","map","tabRef","current","offsetHeight","checkedItemIsHidden","some","visibleTabsWidth","_td","height","withRunningLine","getTabClassName","hidden","length","left"],"sources":["../../../../../../src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.tsx"],"sourcesContent":["import './TabsFitModeDropdownWrapper.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { getTabsWidth } from '../helpers';\nimport { TabsMoreItems } from '../MoreItems/TabsMoreItems';\nimport { TabsFitModeWrapperProps } from '../types';\nimport { useFittingItems } from './useFittingItems';\n\nconst cnTabsFitModeDropdownWrapper = cn('TabsFitModeDropdownWrapper');\n\nexport const TabsFitModeDropdownWrapper = <ITEM,>({\n  items,\n  tabsDimensions,\n  tabRefs,\n  getItemLabel,\n  getItemChecked,\n  renderItem,\n  renderItemsList,\n  size,\n}: TabsFitModeWrapperProps<ITEM>): React.ReactElement | null => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const moreItemsRef = React.useRef<HTMLDivElement>(null);\n  const { isItemHidden } = useFittingItems({\n    tabsDimensions,\n    containerRef: ref,\n    moreItemsRef,\n  });\n  const hiddenItems = items.filter((_item, idx) => isItemHidden(idx));\n  const maxTabHeight: number = React.useMemo(() => {\n    return Math.max(\n      ...tabRefs.map((tabRef) => tabRef.current?.offsetHeight ?? 0),\n    );\n  }, [tabsDimensions]);\n  const checkedItemIsHidden = hiddenItems.some(getItemChecked);\n  const visibleTabsWidth = getTabsWidth(\n    tabsDimensions.filter((_td, idx) => !isItemHidden(idx)),\n  );\n\n  return (\n    <div\n      ref={ref}\n      className={cnTabsFitModeDropdownWrapper()}\n      style={{ height: maxTabHeight }}\n    >\n      <div className={cnTabsFitModeDropdownWrapper('Tabs')}>\n        {renderItemsList({\n          withRunningLine: !checkedItemIsHidden,\n          getTabClassName: (idx) =>\n            cnTabsFitModeDropdownWrapper('Tab', { hidden: isItemHidden(idx) }),\n        })}\n      </div>\n      <div\n        ref={moreItemsRef}\n        className={cnTabsFitModeDropdownWrapper('MoreItems', {\n          hidden: !hiddenItems.length,\n        })}\n        style={{\n          /* В Safari скрытые табы с абсолютом продолжают растягивать контейнер,\n            поэтому приходится позиционировать кнопку абсолютом */\n          left: hiddenItems.length ? visibleTabsWidth : undefined,\n        }}\n      >\n        <TabsMoreItems\n          items={hiddenItems}\n          renderItem={renderItem}\n          getItemLabel={getItemLabel}\n          getItemChecked={getItemChecked}\n          height={maxTabHeight}\n          size={size}\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":"yEAAA,yCAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,YAAT,kBACA,OAASC,aAAT,kCAEA,OAASC,eAAT,yBAEA,GAAMC,6BAA4B,CAAGJ,EAAE,CAAC,4BAAD,CAAvC,CAEA,MAAO,IAAMK,2BAA0B,CAAG,WASsB,IAR9DC,EAQ8D,GAR9DA,KAQ8D,CAP9DC,CAO8D,GAP9DA,cAO8D,CAN9DC,CAM8D,GAN9DA,OAM8D,CAL9DC,CAK8D,GAL9DA,YAK8D,CAJ9DC,CAI8D,GAJ9DA,cAI8D,CAH9DC,CAG8D,GAH9DA,UAG8D,CAF9DC,CAE8D,GAF9DA,eAE8D,CAD9DC,CAC8D,GAD9DA,IAC8D,CACxDC,CAAG,CAAGf,KAAK,CAACgB,MAAN,CAA6B,IAA7B,CADkD,CAExDC,CAAY,CAAGjB,KAAK,CAACgB,MAAN,CAA6B,IAA7B,CAFyC,GAGrCZ,eAAe,CAAC,CACvCI,cAAc,CAAdA,CADuC,CAEvCU,YAAY,CAAEH,CAFyB,CAGvCE,YAAY,CAAZA,CAHuC,CAAD,CAHsB,CAGtDE,CAHsD,GAGtDA,YAHsD,CAQxDC,CAAW,CAAGb,CAAK,CAACc,MAAN,CAAa,SAACC,CAAD,CAAQC,CAAR,QAAgBJ,EAAY,CAACI,CAAD,CAA5B,CAAb,CAR0C,CASxDC,CAAoB,CAAGxB,KAAK,CAACyB,OAAN,CAAc,UAAM,CAC/C,MAAOC,KAAI,CAACC,GAAL,OAAAD,IAAI,oBACNjB,CAAO,CAACmB,GAAR,CAAY,SAACC,CAAD,qCAAYA,CAAM,CAACC,OAAnB,qBAAY,EAAgBC,YAA5B,gBAA4C,CAA5C,CAAZ,CADM,EAGZ,CAJ4B,CAI1B,CAACvB,CAAD,CAJ0B,CATiC,CAcxDwB,CAAmB,CAAGZ,CAAW,CAACa,IAAZ,CAAiBtB,CAAjB,CAdkC,CAexDuB,CAAgB,CAAGhC,YAAY,CACnCM,CAAc,CAACa,MAAf,CAAsB,SAACc,CAAD,CAAMZ,CAAN,QAAc,CAACJ,CAAY,CAACI,CAAD,CAA3B,CAAtB,CADmC,CAfyB,CAmB9D,MACE,4BACE,GAAG,CAAER,CADP,CAEE,SAAS,CAAEV,4BAA4B,EAFzC,CAGE,KAAK,CAAE,CAAE+B,MAAM,CAAEZ,CAAV,CAHT,EAKE,2BAAK,SAAS,CAAEnB,4BAA4B,CAAC,MAAD,CAA5C,EACGQ,CAAe,CAAC,CACfwB,eAAe,CAAE,CAACL,CADH,CAEfM,eAAe,CAAE,yBAACf,CAAD,QACflB,6BAA4B,CAAC,KAAD,CAAQ,CAAEkC,MAAM,CAAEpB,CAAY,CAACI,CAAD,CAAtB,CAAR,CADb,CAFF,CAAD,CADlB,CALF,CAYE,2BACE,GAAG,CAAEN,CADP,CAEE,SAAS,CAAEZ,4BAA4B,CAAC,WAAD,CAAc,CACnDkC,MAAM,CAAE,CAACnB,CAAW,CAACoB,MAD8B,CAAd,CAFzC,CAKE,KAAK,CAAE,CAGLC,IAAI,CAAErB,CAAW,CAACoB,MAAZ,CAAqBN,CAArB,OAHD,CALT,EAWE,oBAAC,aAAD,EACE,KAAK,CAAEd,CADT,CAEE,UAAU,CAAER,CAFd,CAGE,YAAY,CAAEF,CAHhB,CAIE,cAAc,CAAEC,CAJlB,CAKE,MAAM,CAAEa,CALV,CAME,IAAI,CAAEV,CANR,EAXF,CAZF,CAkCH,CA/DM"}
+{"version":3,"file":"TabsFitModeDropdownWrapper.js","names":["React","cn","getTabsWidth","TabsMoreItems","useFittingItems","cnTabsFitModeDropdownWrapper","TabsFitModeDropdownWrapper","items","tabsDimensions","tabRefs","getItemLabel","getItemChecked","renderItem","renderItemsList","size","ref","useRef","moreItemsRef","containerRef","isItemHidden","hiddenItems","filter","_item","idx","maxTabHeight","useMemo","length","Math","max","map","tabRef","current","offsetHeight","checkedItemIsHidden","some","visibleTabsWidth","_td","height","withRunningLine","getTabClassName","hidden","left"],"sources":["../../../../../../src/components/Tabs/FitModeDropdownWrapper/TabsFitModeDropdownWrapper.tsx"],"sourcesContent":["import './TabsFitModeDropdownWrapper.css';\n\nimport React from 'react';\n\nimport { cn } from '../../../utils/bem';\nimport { getTabsWidth } from '../helpers';\nimport { TabsMoreItems } from '../MoreItems/TabsMoreItems';\nimport { TabsFitModeWrapperProps } from '../types';\nimport { useFittingItems } from './useFittingItems';\n\nconst cnTabsFitModeDropdownWrapper = cn('TabsFitModeDropdownWrapper');\n\nexport const TabsFitModeDropdownWrapper = <ITEM,>({\n  items,\n  tabsDimensions,\n  tabRefs,\n  getItemLabel,\n  getItemChecked,\n  renderItem,\n  renderItemsList,\n  size,\n}: TabsFitModeWrapperProps<ITEM>): React.ReactElement | null => {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const moreItemsRef = React.useRef<HTMLDivElement>(null);\n  const { isItemHidden } = useFittingItems({\n    tabsDimensions,\n    containerRef: ref,\n    moreItemsRef,\n  });\n  const hiddenItems = items.filter((_item, idx) => isItemHidden(idx));\n  const maxTabHeight: number = React.useMemo(() => {\n    if (!tabRefs.length) {\n      return 0;\n    }\n    return Math.max(\n      ...tabRefs.map((tabRef) => tabRef.current?.offsetHeight ?? 0),\n    );\n  }, [tabsDimensions]);\n\n  const checkedItemIsHidden = hiddenItems.some(getItemChecked);\n  const visibleTabsWidth = getTabsWidth(\n    tabsDimensions.filter((_td, idx) => !isItemHidden(idx)),\n  );\n\n  return (\n    <div\n      ref={ref}\n      className={cnTabsFitModeDropdownWrapper()}\n      style={{ height: maxTabHeight }}\n    >\n      <div className={cnTabsFitModeDropdownWrapper('Tabs')}>\n        {renderItemsList({\n          withRunningLine: !checkedItemIsHidden,\n          getTabClassName: (idx) =>\n            cnTabsFitModeDropdownWrapper('Tab', { hidden: isItemHidden(idx) }),\n        })}\n      </div>\n      <div\n        ref={moreItemsRef}\n        className={cnTabsFitModeDropdownWrapper('MoreItems', {\n          hidden: !hiddenItems.length,\n        })}\n        style={{\n          /* В Safari скрытые табы с абсолютом продолжают растягивать контейнер,\n            поэтому приходится позиционировать кнопку абсолютом */\n          left: hiddenItems.length ? visibleTabsWidth : undefined,\n        }}\n      >\n        <TabsMoreItems\n          items={hiddenItems}\n          renderItem={renderItem}\n          getItemLabel={getItemLabel}\n          getItemChecked={getItemChecked}\n          height={maxTabHeight}\n          size={size}\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":"yEAAA,yCAEA,MAAOA,MAAP,KAAkB,OAAlB,CAEA,OAASC,EAAT,0BACA,OAASC,YAAT,kBACA,OAASC,aAAT,kCAEA,OAASC,eAAT,yBAEA,GAAMC,6BAA4B,CAAGJ,EAAE,CAAC,4BAAD,CAAvC,CAEA,MAAO,IAAMK,2BAA0B,CAAG,WASsB,IAR9DC,EAQ8D,GAR9DA,KAQ8D,CAP9DC,CAO8D,GAP9DA,cAO8D,CAN9DC,CAM8D,GAN9DA,OAM8D,CAL9DC,CAK8D,GAL9DA,YAK8D,CAJ9DC,CAI8D,GAJ9DA,cAI8D,CAH9DC,CAG8D,GAH9DA,UAG8D,CAF9DC,CAE8D,GAF9DA,eAE8D,CAD9DC,CAC8D,GAD9DA,IAC8D,CACxDC,CAAG,CAAGf,KAAK,CAACgB,MAAN,CAA6B,IAA7B,CADkD,CAExDC,CAAY,CAAGjB,KAAK,CAACgB,MAAN,CAA6B,IAA7B,CAFyC,GAGrCZ,eAAe,CAAC,CACvCI,cAAc,CAAdA,CADuC,CAEvCU,YAAY,CAAEH,CAFyB,CAGvCE,YAAY,CAAZA,CAHuC,CAAD,CAHsB,CAGtDE,CAHsD,GAGtDA,YAHsD,CAQxDC,CAAW,CAAGb,CAAK,CAACc,MAAN,CAAa,SAACC,CAAD,CAAQC,CAAR,QAAgBJ,EAAY,CAACI,CAAD,CAA5B,CAAb,CAR0C,CASxDC,CAAoB,CAAGxB,KAAK,CAACyB,OAAN,CAAc,UAAM,OAC1ChB,EAAO,CAACiB,MADkC,CAIxCC,IAAI,CAACC,GAAL,OAAAD,IAAI,oBACNlB,CAAO,CAACoB,GAAR,CAAY,SAACC,CAAD,qCAAYA,CAAM,CAACC,OAAnB,qBAAY,EAAgBC,YAA5B,gBAA4C,CAA5C,CAAZ,CADM,EAJoC,CAEtC,CAKV,CAP4B,CAO1B,CAACxB,CAAD,CAP0B,CATiC,CAkBxDyB,CAAmB,CAAGb,CAAW,CAACc,IAAZ,CAAiBvB,CAAjB,CAlBkC,CAmBxDwB,CAAgB,CAAGjC,YAAY,CACnCM,CAAc,CAACa,MAAf,CAAsB,SAACe,CAAD,CAAMb,CAAN,QAAc,CAACJ,CAAY,CAACI,CAAD,CAA3B,CAAtB,CADmC,CAnByB,CAuB9D,MACE,4BACE,GAAG,CAAER,CADP,CAEE,SAAS,CAAEV,4BAA4B,EAFzC,CAGE,KAAK,CAAE,CAAEgC,MAAM,CAAEb,CAAV,CAHT,EAKE,2BAAK,SAAS,CAAEnB,4BAA4B,CAAC,MAAD,CAA5C,EACGQ,CAAe,CAAC,CACfyB,eAAe,CAAE,CAACL,CADH,CAEfM,eAAe,CAAE,yBAAChB,CAAD,QACflB,6BAA4B,CAAC,KAAD,CAAQ,CAAEmC,MAAM,CAAErB,CAAY,CAACI,CAAD,CAAtB,CAAR,CADb,CAFF,CAAD,CADlB,CALF,CAYE,2BACE,GAAG,CAAEN,CADP,CAEE,SAAS,CAAEZ,4BAA4B,CAAC,WAAD,CAAc,CACnDmC,MAAM,CAAE,CAACpB,CAAW,CAACM,MAD8B,CAAd,CAFzC,CAKE,KAAK,CAAE,CAGLe,IAAI,CAAErB,CAAW,CAACM,MAAZ,CAAqBS,CAArB,OAHD,CALT,EAWE,oBAAC,aAAD,EACE,KAAK,CAAEf,CADT,CAEE,UAAU,CAAER,CAFd,CAGE,YAAY,CAAEF,CAHhB,CAIE,cAAc,CAAEC,CAJlB,CAKE,MAAM,CAAEa,CALV,CAME,IAAI,CAAEV,CANR,EAXF,CAZF,CAkCH,CAnEM"}

package/__internal__/src/components/Tabs/Tab/TabsTab.d.ts

@@ -1,13 +1,4 @@
 import './TabsTab.css';
-import React from 'react';
+import { TabsTabComponent } from '../types';
 export declare const cnTabsTab: import("@bem-react/classname").ClassNameFormatter;
-export declare const TabsTab: React.ForwardRefExoticComponent<{
-    onChange: React.MouseEventHandler<Element>;
-    checked: boolean;
-    size: "m" | "s" | "xs";
-    iconSize?: "m" | "s" | "xs" | "l" | undefined;
-    onlyIcon?: boolean | undefined;
-    className?: string | undefined;
-    label: string;
-    renderInDropdown?: boolean | undefined;
-} & Omit<import("../types").TabsItemDefault, "label"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const TabsTab: TabsTabComponent;

package/__internal__/src/components/Tabs/Tab/TabsTab.js

@@ -1,2 +1,2 @@
-import"./TabsTab.css";import React,{forwardRef}from"react";import{ListItem,mapIconSize,mapItemVerticalPadding}from"../../ListCanary";import{cnMixFocus}from"../../../mixs/MixFocus";import{cn}from"../../../utils/bem";import{getByMap}from"../../../utils/getByMap";export var cnTabsTab=cn("TabsTab");export var TabsTab=forwardRef(function(a,b){var c=a.label,d=a.onChange,e=a.checked,f=a.size,g=a.onlyIcon,h=a.icon,i=a.iconSize,j=a.leftIcon,k=a.leftSide,l=a.className,m=a.rightIcon,n=a.rightSide,o=a.disabled,p=a.renderInDropdown;if(g){var q=j||m||h;return React.createElement("button",{className:cnTabsTab({size:f,checked:e,onlyIcon:g,renderInDropdown:p},[cnMixFocus({before:!0}),l]),role:"tab",type:"button",onClick:e?void 0:d,title:c},q&&React.createElement(q,{size:getByMap(mapIconSize,f,i)}))}return React.createElement(ListItem,{as:"button",className:cnTabsTab({checked:e,onlyIcon:g,renderInDropdown:p,disabled:o},[o?void 0:cnMixFocus({before:!0}),l]),role:"tab",type:"button",tabIndex:o?-1:void 0,onClick:e?void 0:d,ref:b,title:g?c.toString():void 0,label:c,leftIcon:j||h,leftSide:k,rightIcon:m,rightSide:n,iconSize:i,disabled:o,size:f,space:{pV:mapItemVerticalPadding?mapItemVerticalPadding[f]:"xs"}})});
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["label","onChange","checked","size","onlyIcon","icon","iconSize","leftIcon","leftSide","tabRef","className","as","rightIcon","rightSide","disabled","renderInDropdown"];import"./TabsTab.css";import React,{forwardRef}from"react";import{ListItem,mapItemVerticalPadding}from"../../ListCanary";import{useForkRef}from"../../../hooks/useForkRef";import{cnMixFocus}from"../../../mixs/MixFocus";import{cn}from"../../../utils/bem";export var cnTabsTab=cn("TabsTab");var TabsTabRender=function(a,b){var c=a.label,d=a.onChange,e=a.checked,f=a.size,g=a.onlyIcon,h=a.icon,i=a.iconSize,j=a.leftIcon,k=a.leftSide,l=a.tabRef,m=a.className,n=a.as,o=void 0===n?"button":n,p=a.rightIcon,q=a.rightSide,r=a.disabled,s=a.renderInDropdown,t=_objectWithoutProperties(a,_excluded),u=useForkRef([b,l]);return React.createElement(ListItem,Object.assign({as:o,className:cnTabsTab({checked:e,onlyIcon:g,renderInDropdown:s,disabled:r},[r?void 0:cnMixFocus({before:!0}),m]),role:"tab",type:"button",tabIndex:r?-1:void 0,ref:u,title:g?c.toString():void 0,label:g?void 0:c.toString(),onClick:e?void 0:d,leftIcon:g?j||h||p:j||h,leftSide:g?void 0:k,rightIcon:g?void 0:p,rightSide:g?void 0:q,iconSize:i,disabled:r,size:f,space:{pV:mapItemVerticalPadding?mapItemVerticalPadding[f]:"xs"}},t))};export var TabsTab=forwardRef(TabsTabRender);
 //# sourceMappingURL=TabsTab.js.map

package/__internal__/src/components/Tabs/Tab/TabsTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTab.js","names":["React","forwardRef","ListItem","mapIconSize","mapItemVerticalPadding","cnMixFocus","cn","getByMap","cnTabsTab","TabsTab","props","ref","label","onChange","checked","size","onlyIcon","icon","iconSize","leftIcon","leftSide","className","rightIcon","rightSide","disabled","renderInDropdown","Icon","before","toString","pV"],"sources":["../../../../../../src/components/Tabs/Tab/TabsTab.tsx"],"sourcesContent":["import './TabsTab.css';\n\nimport React, { forwardRef } from 'react';\n\nimport {\n  ListItem,\n  mapIconSize,\n  mapItemVerticalPadding,\n} from '##/components/ListCanary';\nimport { cnMixFocus } from '##/mixs/MixFocus';\nimport { cn } from '##/utils/bem';\nimport { getByMap } from '##/utils/getByMap';\n\nimport { TabsTabProps } from '../types';\n\nexport const cnTabsTab = cn('TabsTab');\n\nexport const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(\n  (props, ref) => {\n    const {\n      label,\n      onChange,\n      checked,\n      size,\n      onlyIcon,\n      icon,\n      iconSize,\n      leftIcon,\n      leftSide,\n      className,\n      rightIcon,\n      rightSide,\n      disabled,\n      renderInDropdown,\n    } = props;\n\n    if (onlyIcon) {\n      const Icon = leftIcon || rightIcon || icon;\n\n      return (\n        <button\n          className={cnTabsTab({ size, checked, onlyIcon, renderInDropdown }, [\n            cnMixFocus({ before: true }),\n            className,\n          ])}\n          role=\"tab\"\n          type=\"button\"\n          onClick={checked ? undefined : onChange}\n          title={label}\n        >\n          {Icon && <Icon size={getByMap(mapIconSize, size, iconSize)} />}\n        </button>\n      );\n    }\n\n    return (\n      <ListItem\n        as=\"button\"\n        className={cnTabsTab(\n          { checked, onlyIcon, renderInDropdown, disabled },\n          [!disabled ? cnMixFocus({ before: true }) : undefined, className],\n        )}\n        role=\"tab\"\n        type=\"button\"\n        tabIndex={disabled ? -1 : undefined}\n        onClick={checked ? undefined : onChange}\n        ref={ref}\n        title={onlyIcon ? label.toString() : undefined}\n        label={label}\n        leftIcon={leftIcon || icon}\n        leftSide={leftSide}\n        rightIcon={rightIcon}\n        rightSide={rightSide}\n        iconSize={iconSize}\n        disabled={disabled}\n        size={size}\n        space={{\n          pV: mapItemVerticalPadding ? mapItemVerticalPadding[size] : 'xs',\n        }}\n      />\n    );\n  },\n);\n"],"mappings":"AAAA,sBAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OACEC,QADF,CAEEC,WAFF,CAGEC,sBAHF,wBAKA,OAASC,UAAT,8BACA,OAASC,EAAT,0BACA,OAASC,QAAT,+BAIA,MAAO,IAAMC,UAAS,CAAGF,EAAE,CAAC,SAAD,CAApB,CAEP,MAAO,IAAMG,QAAO,CAAGR,UAAU,CAC/B,SAACS,CAAD,CAAQC,CAAR,CAAgB,CACd,GACEC,EADF,CAeIF,CAfJ,CACEE,KADF,CAEEC,CAFF,CAeIH,CAfJ,CAEEG,QAFF,CAGEC,CAHF,CAeIJ,CAfJ,CAGEI,OAHF,CAIEC,CAJF,CAeIL,CAfJ,CAIEK,IAJF,CAKEC,CALF,CAeIN,CAfJ,CAKEM,QALF,CAMEC,CANF,CAeIP,CAfJ,CAMEO,IANF,CAOEC,CAPF,CAeIR,CAfJ,CAOEQ,QAPF,CAQEC,CARF,CAeIT,CAfJ,CAQES,QARF,CASEC,CATF,CAeIV,CAfJ,CASEU,QATF,CAUEC,CAVF,CAeIX,CAfJ,CAUEW,SAVF,CAWEC,CAXF,CAeIZ,CAfJ,CAWEY,SAXF,CAYEC,CAZF,CAeIb,CAfJ,CAYEa,SAZF,CAaEC,CAbF,CAeId,CAfJ,CAaEc,QAbF,CAcEC,CAdF,CAeIf,CAfJ,CAcEe,gBAdF,CAiBA,GAAIT,CAAJ,CAAc,CACZ,GAAMU,EAAI,CAAGP,CAAQ,EAAIG,CAAZ,EAAyBL,CAAtC,CAEA,MACE,+BACE,SAAS,CAAET,SAAS,CAAC,CAAEO,IAAI,CAAJA,CAAF,CAAQD,OAAO,CAAPA,CAAR,CAAiBE,QAAQ,CAARA,CAAjB,CAA2BS,gBAAgB,CAAhBA,CAA3B,CAAD,CAAgD,CAClEpB,UAAU,CAAC,CAAEsB,MAAM,GAAR,CAAD,CADwD,CAElEN,CAFkE,CAAhD,CADtB,CAKE,IAAI,CAAC,KALP,CAME,IAAI,CAAC,QANP,CAOE,OAAO,CAAEP,CAAO,QAAeD,CAPjC,CAQE,KAAK,CAAED,CART,EAUGc,CAAI,EAAI,oBAAC,CAAD,EAAM,IAAI,CAAEnB,QAAQ,CAACJ,WAAD,CAAcY,CAAd,CAAoBG,CAApB,CAApB,EAVX,CAaH,CAED,MACE,qBAAC,QAAD,EACE,EAAE,CAAC,QADL,CAEE,SAAS,CAAEV,SAAS,CAClB,CAAEM,OAAO,CAAPA,CAAF,CAAWE,QAAQ,CAARA,CAAX,CAAqBS,gBAAgB,CAAhBA,CAArB,CAAuCD,QAAQ,CAARA,CAAvC,CADkB,CAElB,CAAEA,CAAD,QAAYnB,UAAU,CAAC,CAAEsB,MAAM,GAAR,CAAD,CAAvB,CAAuDN,CAAvD,CAFkB,CAFtB,CAME,IAAI,CAAC,KANP,CAOE,IAAI,CAAC,QAPP,CAQE,QAAQ,CAAEG,CAAQ,CAAG,CAAC,CAAJ,OARpB,CASE,OAAO,CAAEV,CAAO,QAAeD,CATjC,CAUE,GAAG,CAAEF,CAVP,CAWE,KAAK,CAAEK,CAAQ,CAAGJ,CAAK,CAACgB,QAAN,EAAH,OAXjB,CAYE,KAAK,CAAEhB,CAZT,CAaE,QAAQ,CAAEO,CAAQ,EAAIF,CAbxB,CAcE,QAAQ,CAAEG,CAdZ,CAeE,SAAS,CAAEE,CAfb,CAgBE,SAAS,CAAEC,CAhBb,CAiBE,QAAQ,CAAEL,CAjBZ,CAkBE,QAAQ,CAAEM,CAlBZ,CAmBE,IAAI,CAAET,CAnBR,CAoBE,KAAK,CAAE,CACLc,EAAE,CAAEzB,sBAAsB,CAAGA,sBAAsB,CAACW,CAAD,CAAzB,CAAkC,IADvD,CApBT,EAyBH,CAhE8B,CAA1B"}
+{"version":3,"file":"TabsTab.js","names":["React","forwardRef","ListItem","mapItemVerticalPadding","useForkRef","cnMixFocus","cn","cnTabsTab","TabsTabRender","props","ref","label","onChange","checked","size","onlyIcon","icon","iconSize","leftIcon","leftSide","tabRef","className","as","Tag","rightIcon","rightSide","disabled","renderInDropdown","otherProps","currentRef","before","toString","pV","TabsTab"],"sources":["../../../../../../src/components/Tabs/Tab/TabsTab.tsx"],"sourcesContent":["import './TabsTab.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { ListItem, mapItemVerticalPadding } from '##/components/ListCanary';\nimport { useForkRef } from '##/hooks/useForkRef';\nimport { cnMixFocus } from '##/mixs/MixFocus';\nimport { cn } from '##/utils/bem';\n\nimport { TabsTabComponent, TabsTabProps } from '../types';\n\nexport const cnTabsTab = cn('TabsTab');\n\nconst TabsTabRender = (\n  props: TabsTabProps,\n  ref: React.Ref<HTMLButtonElement>,\n) => {\n  const {\n    label,\n    onChange,\n    checked,\n    size,\n    onlyIcon,\n    icon,\n    iconSize,\n    leftIcon,\n    leftSide,\n    tabRef,\n    className,\n    as: Tag = 'button',\n    rightIcon,\n    rightSide,\n    disabled,\n    renderInDropdown,\n    ...otherProps\n  } = props;\n\n  const currentRef = useForkRef([ref, tabRef]);\n\n  return (\n    <ListItem\n      as={Tag}\n      className={cnTabsTab({ checked, onlyIcon, renderInDropdown, disabled }, [\n        !disabled ? cnMixFocus({ before: true }) : undefined,\n        className,\n      ])}\n      role=\"tab\"\n      type=\"button\"\n      tabIndex={disabled ? -1 : undefined}\n      ref={currentRef}\n      title={onlyIcon ? label.toString() : undefined}\n      label={onlyIcon ? undefined : label.toString()}\n      onClick={checked ? undefined : onChange}\n      leftIcon={onlyIcon ? leftIcon || icon || rightIcon : leftIcon || icon}\n      leftSide={onlyIcon ? undefined : leftSide}\n      rightIcon={onlyIcon ? undefined : rightIcon}\n      rightSide={onlyIcon ? undefined : rightSide}\n      iconSize={iconSize}\n      disabled={disabled}\n      size={size}\n      space={{\n        pV: mapItemVerticalPadding ? mapItemVerticalPadding[size] : 'xs',\n      }}\n      {...otherProps}\n    />\n  );\n};\n\nexport const TabsTab = forwardRef(TabsTabRender) as TabsTabComponent;\n"],"mappings":"4QAAA,sBAEA,MAAOA,MAAP,EAAgBC,UAAhB,KAAkC,OAAlC,CAEA,OAASC,QAAT,CAAmBC,sBAAnB,wBACA,OAASC,UAAT,iCACA,OAASC,UAAT,8BACA,OAASC,EAAT,0BAIA,MAAO,IAAMC,UAAS,CAAGD,EAAE,CAAC,SAAD,CAApB,CAEP,GAAME,cAAa,CAAG,SACpBC,CADoB,CAEpBC,CAFoB,CAGjB,IAEDC,EAFC,CAmBCF,CAnBD,CAEDE,KAFC,CAGDC,CAHC,CAmBCH,CAnBD,CAGDG,QAHC,CAIDC,CAJC,CAmBCJ,CAnBD,CAIDI,OAJC,CAKDC,CALC,CAmBCL,CAnBD,CAKDK,IALC,CAMDC,CANC,CAmBCN,CAnBD,CAMDM,QANC,CAODC,CAPC,CAmBCP,CAnBD,CAODO,IAPC,CAQDC,CARC,CAmBCR,CAnBD,CAQDQ,QARC,CASDC,CATC,CAmBCT,CAnBD,CASDS,QATC,CAUDC,CAVC,CAmBCV,CAnBD,CAUDU,QAVC,CAWDC,CAXC,CAmBCX,CAnBD,CAWDW,MAXC,CAYDC,CAZC,CAmBCZ,CAnBD,CAYDY,SAZC,GAmBCZ,CAnBD,CAaDa,EAbC,CAaGC,CAbH,YAaS,QAbT,GAcDC,CAdC,CAmBCf,CAnBD,CAcDe,SAdC,CAeDC,CAfC,CAmBChB,CAnBD,CAeDgB,SAfC,CAgBDC,CAhBC,CAmBCjB,CAnBD,CAgBDiB,QAhBC,CAiBDC,CAjBC,CAmBClB,CAnBD,CAiBDkB,gBAjBC,CAkBEC,CAlBF,0BAmBCnB,CAnBD,YAqBGoB,CAAU,CAAGzB,UAAU,CAAC,CAACM,CAAD,CAAMU,CAAN,CAAD,CArB1B,CAuBH,MACE,qBAAC,QAAD,gBACE,EAAE,CAAEG,CADN,CAEE,SAAS,CAAEhB,SAAS,CAAC,CAAEM,OAAO,CAAPA,CAAF,CAAWE,QAAQ,CAARA,CAAX,CAAqBY,gBAAgB,CAAhBA,CAArB,CAAuCD,QAAQ,CAARA,CAAvC,CAAD,CAAoD,CACrEA,CAAD,QAAYrB,UAAU,CAAC,CAAEyB,MAAM,GAAR,CAAD,CADgD,CAEtET,CAFsE,CAApD,CAFtB,CAME,IAAI,CAAC,KANP,CAOE,IAAI,CAAC,QAPP,CAQE,QAAQ,CAAEK,CAAQ,CAAG,CAAC,CAAJ,OARpB,CASE,GAAG,CAAEG,CATP,CAUE,KAAK,CAAEd,CAAQ,CAAGJ,CAAK,CAACoB,QAAN,EAAH,OAVjB,CAWE,KAAK,CAAEhB,CAAQ,QAAeJ,CAAK,CAACoB,QAAN,EAXhC,CAYE,OAAO,CAAElB,CAAO,QAAeD,CAZjC,CAaE,QAAQ,CAAEG,CAAQ,CAAGG,CAAQ,EAAIF,CAAZ,EAAoBQ,CAAvB,CAAmCN,CAAQ,EAAIF,CAbnE,CAcE,QAAQ,CAAED,CAAQ,QAAeI,CAdnC,CAeE,SAAS,CAAEJ,CAAQ,QAAeS,CAfpC,CAgBE,SAAS,CAAET,CAAQ,QAAeU,CAhBpC,CAiBE,QAAQ,CAAER,CAjBZ,CAkBE,QAAQ,CAAES,CAlBZ,CAmBE,IAAI,CAAEZ,CAnBR,CAoBE,KAAK,CAAE,CACLkB,EAAE,CAAE7B,sBAAsB,CAAGA,sBAAsB,CAACW,CAAD,CAAzB,CAAkC,IADvD,CApBT,EAuBMc,CAvBN,EA0BH,CArDD,CAuDA,MAAO,IAAMK,QAAO,CAAGhC,UAAU,CAACO,aAAD,CAA1B"}

package/__internal__/src/components/Tabs/Tabs.d.ts

@@ -1,7 +1,5 @@
 import './Tabs.css';
-import { cnTabsTab, TabsTab } from './Tab/TabsTab';
 import { TabsComponent } from './types';
 export declare const cnTabs: import("@bem-react/classname").ClassNameFormatter;
 export declare const Tabs: TabsComponent;
-export { TabsTab, cnTabsTab };
 export * from './types';

package/__internal__/src/components/Tabs/Tabs.js

@@ -1,2 +1,2 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["item"],_excluded2=["size","className","items","view","value","linePosition","fitMode","onlyIcon","getItemIcon","getItemLabel","onChange","iconSize","renderItem","getItemLeftIcon","getItemLeftSide","getItemRightIcon","getItemRightSide","getItemDisabled","disabled"];import"./Tabs.css";import React,{forwardRef}from"react";import{useRefs}from"../../hooks/useRefs";import{useChoiceGroup}from"../../hooks/useChoiceGroup/useChoiceGroup";import{useResizeObserved}from"../../hooks/useResizeObserved/useResizeObserved";import{cn}from"../../utils/bem";import{getTabsDirection,getTabsWrapper,withDefaultGetters}from"./helpers";import{TabsBorderLine,TabsRunningLine}from"./Line/TabsLine";import{cnTabsTab,TabsTab}from"./Tab/TabsTab";import{tabsDefaultFitMode,tabsDefaultLinePosition,tabsDefaultSize,tabsDefaultView}from"./types";export var cnTabs=cn("Tabs");function renderItemDefault(a){var b=a.item,c=_objectWithoutProperties(a,_excluded);return React.createElement(TabsTab,c)}var TabsRender=function(a,b){var c=withDefaultGetters(a),d=c.size,e=void 0===d?tabsDefaultSize:d,f=c.className,g=c.items,h=c.view,i=void 0===h?tabsDefaultView:h,j=c.value,k=c.linePosition,l=void 0===k?tabsDefaultLinePosition:k,m=c.fitMode,n=void 0===m?tabsDefaultFitMode:m,o=c.onlyIcon,p=c.getItemIcon,q=c.getItemLabel,r=c.onChange,s=c.iconSize,t=c.renderItem,u=void 0===t?renderItemDefault:t,v=c.getItemLeftIcon,w=c.getItemLeftSide,x=c.getItemRightIcon,y=c.getItemRightSide,z=c.getItemDisabled,A=c.disabled,B=_objectWithoutProperties(c,_excluded2),C=useChoiceGroup({value:j||null,getKey:q,callBack:r,multiple:!1}),D=C.getOnChange,E=C.getChecked,F=getTabsDirection(l),G="vertical"===F,H=useRefs(g.length,[g,n,G]),I=useResizeObserved(H,function(a){var b;return{size:null!==(b=null===a||void 0===a?void 0:a[G?"offsetHeight":"offsetWidth"])&&void 0!==b?b:0,gap:a?parseInt(getComputedStyle(a)[G?"marginBottom":"marginRight"],10):0}}),J=g.findIndex(E),K=function(a,b,c){return u({item:a,onChange:function(){null===b||void 0===b?void 0:b(),D(a).apply(void 0,arguments)},checked:E(a),label:q(a).toString(),icon:p(a),leftIcon:v(a),rightIcon:x(a),leftSide:w(a),rightSide:y(a),disabled:A||z(a),onlyIcon:o,size:e,iconSize:s,renderInDropdown:c})},L=getTabsWrapper(F,n);return React.createElement("div",Object.assign({className:cnTabs({size:e,view:i,direction:F},[f]),ref:b},B),React.createElement(L,{tabRefs:H,tabsDimensions:I,renderItem:K,renderItemsList:function renderItemsList(a){var b=a.withRunningLine,c=a.getTabClassName;return React.createElement("div",{className:cnTabs("List",{direction:F,linePosition:l})},g.map(function(a,b){return React.createElement("div",{ref:H[b],key:q(a),className:cnTabs("Tab",{direction:F},[null===c||void 0===c?void 0:c(b)])},K(a))}),(!(void 0!==b)||b)&&!A&&React.createElement(TabsRunningLine,{linePosition:l,tabsDimensions:I,activeTabIdx:J}))},getItemLabel:q,getItemChecked:E,items:g,size:e}),"bordered"===i&&React.createElement(TabsBorderLine,{linePosition:l}))};export var Tabs=forwardRef(TabsRender);export{TabsTab,cnTabsTab};export*from"./types";
+import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["item","attributes"],_excluded2=["size","className","items","view","value","linePosition","fitMode","onlyIcon","getItemIcon","getItemAs","getItemAttributes","getItemRef","getItemLabel","onChange","iconSize","renderItem","getItemLeftIcon","getItemLeftSide","getItemRightIcon","getItemRightSide","getItemDisabled","disabled"];import"./Tabs.css";import React,{forwardRef}from"react";import{useRefs}from"../../hooks/useRefs";import{useChoiceGroup}from"../../hooks/useChoiceGroup/useChoiceGroup";import{useResizeObserved}from"../../hooks/useResizeObserved/useResizeObserved";import{cn}from"../../utils/bem";import{getTabsDirection,getTabsWrapper,withDefaultGetters}from"./helpers";import{TabsBorderLine,TabsRunningLine}from"./Line/TabsLine";import{TabsTab}from"./Tab/TabsTab";import{tabsDefaultFitMode,tabsDefaultLinePosition,tabsDefaultSize,tabsDefaultView}from"./types";export var cnTabs=cn("Tabs");function renderItemDefault(a){var b=a.item,c=a.attributes,d=void 0===c?{}:c,e=_objectWithoutProperties(a,_excluded);return React.createElement(TabsTab,Object.assign({},d,e))}var TabsRender=function(a,b){var c=withDefaultGetters(a),d=c.size,e=void 0===d?tabsDefaultSize:d,f=c.className,g=c.items,h=c.view,i=void 0===h?tabsDefaultView:h,j=c.value,k=c.linePosition,l=void 0===k?tabsDefaultLinePosition:k,m=c.fitMode,n=void 0===m?tabsDefaultFitMode:m,o=c.onlyIcon,p=c.getItemIcon,q=c.getItemAs,r=c.getItemAttributes,s=c.getItemRef,t=c.getItemLabel,u=c.onChange,v=c.iconSize,w=c.renderItem,x=void 0===w?renderItemDefault:w,y=c.getItemLeftIcon,z=c.getItemLeftSide,A=c.getItemRightIcon,B=c.getItemRightSide,C=c.getItemDisabled,D=c.disabled,E=_objectWithoutProperties(c,_excluded2),F=useChoiceGroup({value:j||null,getKey:t,callBack:u,multiple:!1}),G=F.getOnChange,H=F.getChecked,I=getTabsDirection(l),J="vertical"===I,K=useRefs(g.length,[g,n,J]),L=useResizeObserved(K,function(a){var b;return{size:null!==(b=null===a||void 0===a?void 0:a[J?"offsetHeight":"offsetWidth"])&&void 0!==b?b:0,gap:a?parseInt(getComputedStyle(a)[J?"marginBottom":"marginRight"],10):0}}),M=g.findIndex(H),N=function(a,b,c){return x({item:a,onChange:function(){null===b||void 0===b?void 0:b(),G(a).apply(void 0,arguments)},checked:H(a),label:t(a).toString(),icon:p(a),leftIcon:y(a),rightIcon:A(a),leftSide:z(a),rightSide:B(a),disabled:D||C(a),onlyIcon:o,size:e,iconSize:v,renderInDropdown:c,as:q(a)||"button",tabRef:s(a),attributes:r(a)})},O=getTabsWrapper(I,n);return React.createElement("div",Object.assign({className:cnTabs({size:e,view:i,direction:I},[f]),ref:b},E),React.createElement(O,{tabRefs:K,tabsDimensions:L,renderItem:N,renderItemsList:function renderItemsList(a){var b=a.withRunningLine,c=a.getTabClassName;return React.createElement("div",{className:cnTabs("List",{direction:I,linePosition:l})},g.map(function(a,b){return React.createElement("div",{ref:K[b],key:t(a),className:cnTabs("Tab",{direction:I},[null===c||void 0===c?void 0:c(b)])},N(a))}),(!(void 0!==b)||b)&&!D&&React.createElement(TabsRunningLine,{linePosition:l,tabsDimensions:L,activeTabIdx:M}))},getItemLabel:t,getItemChecked:H,items:g,size:e}),"bordered"===i&&React.createElement(TabsBorderLine,{linePosition:l}))};export var Tabs=forwardRef(TabsRender);export*from"./types";
 //# sourceMappingURL=Tabs.js.map

package/__internal__/src/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","forwardRef","useRefs","useChoiceGroup","useResizeObserved","cn","getTabsDirection","getTabsWrapper","withDefaultGetters","TabsBorderLine","TabsRunningLine","cnTabsTab","TabsTab","tabsDefaultFitMode","tabsDefaultLinePosition","tabsDefaultSize","tabsDefaultView","cnTabs","renderItemDefault","props","item","otherProps","TabsRender","ref","size","className","items","view","value","linePosition","fitMode","onlyIcon","getItemIcon","getItemLabel","onChange","iconSize","renderItem","renderItemProp","getItemLeftIcon","getItemLeftSide","getItemRightIcon","getItemRightSide","getItemDisabled","disabled","getKey","callBack","multiple","getOnChange","getChecked","tabsDirection","isVertical","tabRefs","length","tabsDimensions","el","gap","parseInt","getComputedStyle","activeTabIdx","findIndex","onClick","renderInDropdown","checked","label","toString","icon","leftIcon","rightIcon","leftSide","rightSide","Wrapper","direction","renderItemsList","withRunningLine","getTabClassName","map","idx","Tabs"],"sources":["../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import './Tabs.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { useRefs } from '##/hooks/useRefs';\n\nimport { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';\nimport { useResizeObserved } from '../../hooks/useResizeObserved/useResizeObserved';\nimport { cn } from '../../utils/bem';\nimport {\n  getTabsDirection,\n  getTabsWrapper,\n  withDefaultGetters,\n} from './helpers';\nimport { TabsBorderLine, TabsRunningLine } from './Line/TabsLine';\nimport { cnTabsTab, TabsTab } from './Tab/TabsTab';\nimport {\n  RenderItemProps,\n  RenderItemsListProp,\n  TabDimensions,\n  TabsComponent,\n  tabsDefaultFitMode,\n  tabsDefaultLinePosition,\n  tabsDefaultSize,\n  tabsDefaultView,\n  TabsProps,\n} from './types';\n\nexport const cnTabs = cn('Tabs');\n\nfunction renderItemDefault<ITEM>(\n  props: RenderItemProps<ITEM>,\n): React.ReactElement {\n  const { item, ...otherProps } = props;\n  return <TabsTab {...otherProps} />;\n}\n\nconst TabsRender = (props: TabsProps, ref: React.Ref<HTMLDivElement>) => {\n  const {\n    size = tabsDefaultSize,\n    className,\n    items,\n    view = tabsDefaultView,\n    value,\n    linePosition = tabsDefaultLinePosition,\n    fitMode = tabsDefaultFitMode,\n    onlyIcon,\n    getItemIcon,\n    getItemLabel,\n    onChange,\n    iconSize,\n    renderItem: renderItemProp = renderItemDefault,\n    getItemLeftIcon,\n    getItemLeftSide,\n    getItemRightIcon,\n    getItemRightSide,\n    getItemDisabled,\n    disabled,\n    ...otherProps\n  } = withDefaultGetters(props);\n\n  const { getOnChange, getChecked } = useChoiceGroup({\n    value: value || null,\n    getKey: getItemLabel,\n    callBack: onChange,\n    multiple: false,\n  });\n\n  const tabsDirection = getTabsDirection(linePosition);\n  const isVertical = tabsDirection === 'vertical';\n  const tabRefs = useRefs<HTMLDivElement>(items.length, [\n    items,\n    fitMode,\n    isVertical,\n  ]);\n\n  const tabsDimensions = useResizeObserved(\n    tabRefs,\n    (el): TabDimensions => ({\n      size: el?.[isVertical ? 'offsetHeight' : 'offsetWidth'] ?? 0,\n      gap: el\n        ? parseInt(\n            getComputedStyle(el)[isVertical ? 'marginBottom' : 'marginRight'],\n            10,\n          )\n        : 0,\n    }),\n  );\n\n  const activeTabIdx = items.findIndex(getChecked);\n\n  const renderItem = (\n    item: typeof items[number],\n    onClick?: () => void,\n    renderInDropdown?: boolean,\n  ) =>\n    renderItemProp({\n      item,\n      onChange: (...args) => {\n        onClick?.();\n        getOnChange(item)(...args);\n      },\n      checked: getChecked(item),\n      label: getItemLabel(item).toString(),\n      icon: getItemIcon(item),\n      leftIcon: getItemLeftIcon(item),\n      rightIcon: getItemRightIcon(item),\n      leftSide: getItemLeftSide(item),\n      rightSide: getItemRightSide(item),\n      disabled: disabled || getItemDisabled(item),\n      onlyIcon,\n      size,\n      iconSize,\n      renderInDropdown,\n    });\n\n  const renderItemsList: RenderItemsListProp = ({\n    withRunningLine = true,\n    getTabClassName,\n  }) => (\n    <div className={cnTabs('List', { direction: tabsDirection, linePosition })}>\n      {items.map((item, idx) => (\n        <div\n          ref={tabRefs[idx]}\n          key={getItemLabel(item)}\n          className={cnTabs('Tab', { direction: tabsDirection }, [\n            getTabClassName?.(idx),\n          ])}\n        >\n          {renderItem(item)}\n        </div>\n      ))}\n      {withRunningLine && !disabled && (\n        <TabsRunningLine\n          linePosition={linePosition}\n          tabsDimensions={tabsDimensions}\n          activeTabIdx={activeTabIdx}\n        />\n      )}\n    </div>\n  );\n\n  const Wrapper = getTabsWrapper(tabsDirection, fitMode);\n\n  return (\n    <div\n      className={cnTabs({ size, view, direction: tabsDirection }, [className])}\n      ref={ref}\n      {...otherProps}\n    >\n      <Wrapper\n        tabRefs={tabRefs}\n        tabsDimensions={tabsDimensions}\n        renderItem={renderItem}\n        renderItemsList={renderItemsList}\n        getItemLabel={getItemLabel}\n        getItemChecked={getChecked}\n        items={items}\n        size={size}\n      />\n      {view === 'bordered' && <TabsBorderLine linePosition={linePosition} />}\n    </div>\n  );\n};\n\nexport const Tabs = forwardRef(TabsRender) as TabsComponent;\n\nexport { TabsTab, cnTabsTab };\n\nexport * from './types';\n"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","names":["React","forwardRef","useRefs","useChoiceGroup","useResizeObserved","cn","getTabsDirection","getTabsWrapper","withDefaultGetters","TabsBorderLine","TabsRunningLine","TabsTab","tabsDefaultFitMode","tabsDefaultLinePosition","tabsDefaultSize","tabsDefaultView","cnTabs","renderItemDefault","props","item","attributes","otherProps","TabsRender","ref","size","className","items","view","value","linePosition","fitMode","onlyIcon","getItemIcon","getItemAs","getItemAttributes","getItemRef","getItemLabel","onChange","iconSize","renderItem","renderItemProp","getItemLeftIcon","getItemLeftSide","getItemRightIcon","getItemRightSide","getItemDisabled","disabled","getKey","callBack","multiple","getOnChange","getChecked","tabsDirection","isVertical","tabRefs","length","tabsDimensions","el","gap","parseInt","getComputedStyle","activeTabIdx","findIndex","onClick","renderInDropdown","checked","label","toString","icon","leftIcon","rightIcon","leftSide","rightSide","as","tabRef","Wrapper","direction","renderItemsList","withRunningLine","getTabClassName","map","idx","Tabs"],"sources":["../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import './Tabs.css';\n\nimport React, { forwardRef } from 'react';\n\nimport { useRefs } from '##/hooks/useRefs';\n\nimport { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';\nimport { useResizeObserved } from '../../hooks/useResizeObserved/useResizeObserved';\nimport { cn } from '../../utils/bem';\nimport {\n  getTabsDirection,\n  getTabsWrapper,\n  withDefaultGetters,\n} from './helpers';\nimport { TabsBorderLine, TabsRunningLine } from './Line/TabsLine';\nimport { TabsTab } from './Tab/TabsTab';\nimport {\n  RenderItemProps,\n  RenderItemsListProp,\n  TabDimensions,\n  TabsComponent,\n  tabsDefaultFitMode,\n  tabsDefaultLinePosition,\n  tabsDefaultSize,\n  tabsDefaultView,\n  TabsProps,\n} from './types';\n\nexport const cnTabs = cn('Tabs');\n\nfunction renderItemDefault<ITEM>(\n  props: RenderItemProps<ITEM>,\n): React.ReactElement {\n  const { item, attributes = {}, ...otherProps } = props;\n  return <TabsTab {...attributes} {...otherProps} />;\n}\n\nconst TabsRender = (props: TabsProps, ref: React.Ref<HTMLDivElement>) => {\n  const {\n    size = tabsDefaultSize,\n    className,\n    items,\n    view = tabsDefaultView,\n    value,\n    linePosition = tabsDefaultLinePosition,\n    fitMode = tabsDefaultFitMode,\n    onlyIcon,\n    getItemIcon,\n    getItemAs,\n    getItemAttributes,\n    getItemRef,\n    getItemLabel,\n    onChange,\n    iconSize,\n    renderItem: renderItemProp = renderItemDefault,\n    getItemLeftIcon,\n    getItemLeftSide,\n    getItemRightIcon,\n    getItemRightSide,\n    getItemDisabled,\n    disabled,\n    ...otherProps\n  } = withDefaultGetters(props);\n\n  const { getOnChange, getChecked } = useChoiceGroup({\n    value: value || null,\n    getKey: getItemLabel,\n    callBack: onChange,\n    multiple: false,\n  });\n\n  const tabsDirection = getTabsDirection(linePosition);\n  const isVertical = tabsDirection === 'vertical';\n  const tabRefs = useRefs<HTMLDivElement>(items.length, [\n    items,\n    fitMode,\n    isVertical,\n  ]);\n\n  const tabsDimensions = useResizeObserved(\n    tabRefs,\n    (el): TabDimensions => ({\n      size: el?.[isVertical ? 'offsetHeight' : 'offsetWidth'] ?? 0,\n      gap: el\n        ? parseInt(\n            getComputedStyle(el)[isVertical ? 'marginBottom' : 'marginRight'],\n            10,\n          )\n        : 0,\n    }),\n  );\n\n  const activeTabIdx = items.findIndex(getChecked);\n\n  const renderItem = (\n    item: typeof items[number],\n    onClick?: () => void,\n    renderInDropdown?: boolean,\n  ) =>\n    renderItemProp({\n      item,\n      onChange: (...args) => {\n        onClick?.();\n        getOnChange(item)(...args);\n      },\n      checked: getChecked(item),\n      label: getItemLabel(item).toString(),\n      icon: getItemIcon(item),\n      leftIcon: getItemLeftIcon(item),\n      rightIcon: getItemRightIcon(item),\n      leftSide: getItemLeftSide(item),\n      rightSide: getItemRightSide(item),\n      disabled: disabled || getItemDisabled(item),\n      onlyIcon,\n      size,\n      iconSize,\n      renderInDropdown,\n      as: getItemAs(item) || 'button',\n      tabRef: getItemRef(item),\n      attributes: getItemAttributes(item),\n    });\n\n  const renderItemsList: RenderItemsListProp = ({\n    withRunningLine = true,\n    getTabClassName,\n  }) => (\n    <div className={cnTabs('List', { direction: tabsDirection, linePosition })}>\n      {items.map((item, idx) => (\n        <div\n          ref={tabRefs[idx]}\n          key={getItemLabel(item)}\n          className={cnTabs('Tab', { direction: tabsDirection }, [\n            getTabClassName?.(idx),\n          ])}\n        >\n          {renderItem(item)}\n        </div>\n      ))}\n      {withRunningLine && !disabled && (\n        <TabsRunningLine\n          linePosition={linePosition}\n          tabsDimensions={tabsDimensions}\n          activeTabIdx={activeTabIdx}\n        />\n      )}\n    </div>\n  );\n\n  const Wrapper = getTabsWrapper(tabsDirection, fitMode);\n\n  return (\n    <div\n      className={cnTabs({ size, view, direction: tabsDirection }, [className])}\n      ref={ref}\n      {...otherProps}\n    >\n      <Wrapper\n        tabRefs={tabRefs}\n        tabsDimensions={tabsDimensions}\n        renderItem={renderItem}\n        renderItemsList={renderItemsList}\n        getItemLabel={getItemLabel}\n        getItemChecked={getChecked}\n        items={items}\n        size={size}\n      />\n      {view === 'bordered' && <TabsBorderLine linePosition={linePosition} />}\n    </div>\n  );\n};\n\nexport const Tabs = forwardRef(TabsRender) as TabsComponent;\n\nexport * from './types';\n"],"mappings":"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"}

package/__internal__/src/components/Tabs/helpers.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TabDimensions, TabsDirection, TabsFitModeWrapperProps, TabsItemDefault, TabsPropFitMode, TabsPropGetItemDisabled, TabsPropGetItemIcon, TabsPropGetItemLabel, TabsPropGetItemSide, TabsPropLinePosition, TabsProps } from './types';
+import { TabDimensions, TabsDirection, TabsFitModeWrapperProps, TabsItemDefault, TabsPropFitMode, TabsPropGetItemAs, TabsPropGetItemAttributes, TabsPropGetItemDisabled, TabsPropGetItemIcon, TabsPropGetItemLabel, TabsPropGetItemRef, TabsPropGetItemSide, TabsPropLinePosition, TabsProps } from './types';
 export declare const getTabsDirection: (linePosition: TabsPropLinePosition) => TabsDirection;
 export declare const getTabsWidth: (tabsDimensions: TabDimensions[]) => number;
 export declare const getTabsWrapper: (tabsDirection: TabsDirection, fitMode: TabsPropFitMode) => <ITEM>({ items, tabsDimensions, tabRefs, getItemLabel, getItemChecked, renderItem, renderItemsList, size, }: TabsFitModeWrapperProps<ITEM>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
@@ -11,6 +11,9 @@ export declare const withDefaultGetters: (props: TabsProps) => {
     getItemLeftSide: TabsPropGetItemSide<TabsItemDefault>;
     getItemRightSide: TabsPropGetItemSide<TabsItemDefault>;
     getItemDisabled: TabsPropGetItemDisabled<TabsItemDefault>;
+    getItemAs: TabsPropGetItemAs<TabsItemDefault>;
+    getItemAttributes: TabsPropGetItemAttributes<TabsItemDefault>;
+    getItemRef: TabsPropGetItemRef<TabsItemDefault>;
     size?: "m" | "s" | "xs" | undefined;
     onlyIcon?: boolean | undefined;
     view?: "clear" | "bordered" | undefined;
@@ -287,6 +290,9 @@ export declare const withDefaultGetters: (props: TabsProps) => {
     getItemLeftSide: TabsPropGetItemSide<TabsItemDefault>;
     getItemRightSide: TabsPropGetItemSide<TabsItemDefault>;
     getItemDisabled: TabsPropGetItemDisabled<TabsItemDefault>;
+    getItemAs: TabsPropGetItemAs<TabsItemDefault>;
+    getItemAttributes: TabsPropGetItemAttributes<TabsItemDefault>;
+    getItemRef: TabsPropGetItemRef<TabsItemDefault>;
     size?: "m" | "s" | "xs" | undefined;
     onlyIcon?: boolean | undefined;
     view?: "clear" | "bordered" | undefined;

package/__internal__/src/components/Tabs/helpers.js

@@ -1,2 +1,2 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React from"react";import{TabsFitModeDropdownWrapper}from"./FitModeDropdownWrapper/TabsFitModeDropdownWrapper";import{TabsFitModeScrollWrapper}from"./FitModeScrollWrapper/TabsFitModeScrollWrapper";export var getTabsDirection=function(a){return"left"===a||"right"===a?"vertical":"horizontal"};export var getTabsWidth=function(a){return a.reduce(function(a,b){return a+b.size+b.gap},0)};export var getTabsWrapper=function(a,b){return"vertical"===a?OnlyListWrapper:"scroll"===b?TabsFitModeScrollWrapper:TabsFitModeDropdownWrapper};var defaultGetItemLabel=function(a){return a.label},defaultGetItemIcon=function(a){return a.icon},defaultGetItemLeftIcon=function(a){return a.leftIcon},defaultGetItemRightIcon=function(a){return a.rightIcon},defaultGetItemLeftSide=function(a){return a.leftSide},defaultGetItemRightSide=function(a){return a.rightSide},defaultGetItemDisable=function(a){return a.disabled};export var withDefaultGetters=function(a){return _objectSpread(_objectSpread({},a),{},{getItemLabel:a.getItemLabel||defaultGetItemLabel,getItemIcon:a.getItemIcon||defaultGetItemIcon,getItemLeftIcon:a.getItemLeftIcon||defaultGetItemLeftIcon,getItemRightIcon:a.getItemRightIcon||defaultGetItemRightIcon,getItemLeftSide:a.getItemLeftSide||defaultGetItemLeftSide,getItemRightSide:a.getItemRightSide||defaultGetItemRightSide,getItemDisabled:a.getItemDisabled||defaultGetItemDisable})};var OnlyListWrapper=function(a){var b=a.renderItemsList;return React.createElement(React.Fragment,null,b({}))};export var getVisibleTabsRange=function(a){for(var b,c,d=a.tabsDimensions,e=a.containerWidth,f=a.containerPaddingLeft,g=a.scrollLeft,h=null,i=null,j=g,k=0;k<d.length;k++){var l=getTabsWidth(d.slice(0,k)),m=f+l;m>=j&&null===h&&(h=k);var n=m+d[k].size;n<=j+e&&(i=k)}return h=null!==(b=h)&&void 0!==b?b:0,i=Math.max(h,null!==(c=i)&&void 0!==c?c:0),[h,i]};
+import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import React from"react";import{TabsFitModeDropdownWrapper}from"./FitModeDropdownWrapper/TabsFitModeDropdownWrapper";import{TabsFitModeScrollWrapper}from"./FitModeScrollWrapper/TabsFitModeScrollWrapper";export var getTabsDirection=function(a){return"left"===a||"right"===a?"vertical":"horizontal"};export var getTabsWidth=function(a){return a.reduce(function(a,b){return a+b.size+b.gap},0)};export var getTabsWrapper=function(a,b){return"vertical"===a?OnlyListWrapper:"scroll"===b?TabsFitModeScrollWrapper:TabsFitModeDropdownWrapper};var defaultGetItemLabel=function(a){return a.label},defaultGetItemIcon=function(a){return a.icon},defaultGetItemLeftIcon=function(a){return a.leftIcon},defaultGetItemRightIcon=function(a){return a.rightIcon},defaultGetItemLeftSide=function(a){return a.leftSide},defaultGetItemRightSide=function(a){return a.rightSide},defaultGetItemDisable=function(a){return a.disabled},defaultGetItemAs=function(a){return a.as},defaultGetItemAttributes=function(a){return a.attributes},defaultGetItemRef=function(a){return a.ref};export var withDefaultGetters=function(a){return _objectSpread(_objectSpread({},a),{},{getItemLabel:a.getItemLabel||defaultGetItemLabel,getItemIcon:a.getItemIcon||defaultGetItemIcon,getItemLeftIcon:a.getItemLeftIcon||defaultGetItemLeftIcon,getItemRightIcon:a.getItemRightIcon||defaultGetItemRightIcon,getItemLeftSide:a.getItemLeftSide||defaultGetItemLeftSide,getItemRightSide:a.getItemRightSide||defaultGetItemRightSide,getItemDisabled:a.getItemDisabled||defaultGetItemDisable,getItemAs:a.getItemAs||defaultGetItemAs,getItemAttributes:a.getItemAttributes||defaultGetItemAttributes,getItemRef:a.getItemRef||defaultGetItemRef})};var OnlyListWrapper=function(a){var b=a.renderItemsList;return React.createElement(React.Fragment,null,b({}))};export var getVisibleTabsRange=function(a){for(var b,c,d=a.tabsDimensions,e=a.containerWidth,f=a.containerPaddingLeft,g=a.scrollLeft,h=null,i=null,j=g,k=0;k<d.length;k++){var l=getTabsWidth(d.slice(0,k)),m=f+l;m>=j&&null===h&&(h=k);var n=m+d[k].size;n<=j+e&&(i=k)}return h=null!==(b=h)&&void 0!==b?b:0,i=Math.max(h,null!==(c=i)&&void 0!==c?c:0),[h,i]};
 //# sourceMappingURL=helpers.js.map