@snack-uikit/button-combo 0.0.1-preview-a2f98ef7.0 → 0.1.1

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 0.1.1 (2025-01-23)
+
+
+### Bug Fixes
+
+* **PDS-53:** disappeared loading-icon in option button ([a6ca36c](https://github.com/cloud-ru-tech/snack-uikit/commit/a6ca36c7042cd01809b3cff7252c801412b68ea8))
+
+
+
+
+
+# 0.1.0 (2025-01-23)
+
+
+### Features
+
+* **PDS-53:** added ButtonCombo component ([a4ce25c](https://github.com/cloud-ru-tech/snack-uikit/commit/a4ce25c0f79120002445188413355f9b75e13159))
+
+
+
+
+
 ## CHANGELOG
 
 ### v0.0.0

package/README.md

@@ -14,14 +14,19 @@
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | items* | `Item[]` | - | Основные элементы списка |
-| fullWidth* | `BaseButtonProps` | - |  |
-| tabIndex* | `BaseButtonProps` | - |  |
-| loading* | `BaseButtonProps` | - |  |
-| disabled* | `BaseButtonProps` | - |  |
-| className* | `BaseButtonProps` | - | CSS-класс |
-| size | `BaseButtonProps` | SIZE.S |  |
-| type | `BaseButtonProps` | HTML_TYPE.Button |  |
+| className | `string` | - | CSS-класс |
+| disabled | `boolean` | - | Флаг неактивности компонента |
+| loading | `boolean` | - | Флаг состояния загрузки |
+| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | s | Размер |
+| tabIndex | `number` | - | HTML-аттрибут tab-index |
+| fullWidth | `boolean` | - | Сделать кнопку во всю ширину |
+| open | `boolean` | - | Управляет состоянием показан/не показан. |
+| onOpenChange | `(isOpen: boolean) => void` | - | Колбек отображения компонента. Срабатывает при изменении состояния open. |
 | dropdownClassName | `string` | - | CSS-класс Dropdown |
+| optionClassName | `string` | - | CSS-класс Option кнопки |
+| dropdownTriggerClassName | `string` | - | CSS-класс Dropdown trigger кнопки |
+| value | `ItemId` | - | Controlled состояние |
+| onChange | `(value: ItemId) => void` | - | Controlled обработчик измения состояния |
 | defaultValue | `string` | - | Начальное состояние |
 | defaultLabel | `string` | - | Начальное состояние лейбла |
 | ref | `LegacyRef<HTMLDivElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |

package/dist/cjs/ButtonCombo.d.ts

@@ -0,0 +1,42 @@
+import { ButtonFilledProps } from '@snack-uikit/button';
+import { DroplistProps, ItemId } from '@snack-uikit/list';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Item } from './types';
+export type ButtonComboProps = WithSupportProps<Pick<ButtonFilledProps, 'className' | 'disabled' | 'loading' | 'size' | 'tabIndex' | 'fullWidth'> & Pick<DroplistProps, 'open' | 'onOpenChange'> & {
+    /** CSS-класс Dropdown */
+    dropdownClassName?: string;
+    /** CSS-класс Option кнопки */
+    optionClassName?: string;
+    /** CSS-класс Dropdown trigger кнопки */
+    dropdownTriggerClassName?: string;
+    /** Controlled состояние */
+    value?: ItemId;
+    /** Controlled обработчик измения состояния */
+    onChange?(value: ItemId): void;
+    /** Начальное состояние */
+    defaultValue?: string;
+    /** Начальное состояние лейбла */
+    defaultLabel?: string;
+    /** Основные элементы списка */
+    items: Item[];
+}>;
+export declare const ButtonCombo: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & Pick<ButtonFilledProps, "className" | "disabled" | "loading" | "size" | "tabIndex" | "fullWidth"> & Pick<DroplistProps, "open" | "onOpenChange"> & {
+    /** CSS-класс Dropdown */
+    dropdownClassName?: string;
+    /** CSS-класс Option кнопки */
+    optionClassName?: string;
+    /** CSS-класс Dropdown trigger кнопки */
+    dropdownTriggerClassName?: string;
+    /** Controlled состояние */
+    value?: ItemId;
+    /** Controlled обработчик измения состояния */
+    onChange?(value: ItemId): void;
+    /** Начальное состояние */
+    defaultValue?: string;
+    /** Начальное состояние лейбла */
+    defaultLabel?: string;
+    /** Основные элементы списка */
+    items: Item[];
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/{components/ButtonCombo.js → ButtonCombo.js}

@@ -20,59 +20,70 @@ exports.ButtonCombo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
-const button_private_1 = require("@snack-uikit/button-private");
+const button_1 = require("@snack-uikit/button");
 const icons_1 = require("@snack-uikit/icons");
 const list_1 = require("@snack-uikit/list");
 const utils_1 = require("@snack-uikit/utils");
-const constants_1 = require("../constants");
+const constants_1 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_2 = require("./utils");
 exports.ButtonCombo = (0, react_1.forwardRef)((_a, ref) => {
   var _b;
   var {
-      size = button_private_1.SIZE.S,
-      type = button_private_1.HTML_TYPE.Button,
+      size = 's',
       defaultLabel = '',
       className,
       dropdownClassName,
+      optionClassName,
+      dropdownTriggerClassName,
       defaultValue,
       items,
       tabIndex,
-      fullWidth
+      fullWidth,
+      disabled,
+      loading,
+      value: valueProp,
+      open: openProp,
+      onOpenChange,
+      onChange
     } = _a,
-    rest = __rest(_a, ["size", "type", "defaultLabel", "className", "dropdownClassName", "defaultValue", "items", "tabIndex", "fullWidth"]);
-  const [open, setOpen] = (0, react_1.useState)(false);
-  const [activeOption, setActiveOption] = (0, react_1.useState)({});
+    rest = __rest(_a, ["size", "defaultLabel", "className", "dropdownClassName", "optionClassName", "dropdownTriggerClassName", "defaultValue", "items", "tabIndex", "fullWidth", "disabled", "loading", "value", "open", "onOpenChange", "onChange"]);
+  const [open, setOpen] = (0, utils_1.useValueControl)({
+    value: openProp,
+    onChange: onOpenChange
+  });
+  const [value, setValue] = (0, utils_1.useValueControl)({
+    value: valueProp,
+    defaultValue,
+    onChange
+  });
   const droplistItems = (0, react_1.useMemo)(() => items.map(utils_2.extractDroplistItemProps).map(item => Object.assign(Object.assign({}, item), {
     id: item === null || item === void 0 ? void 0 : item.id,
     content: item === null || item === void 0 ? void 0 : item.label
   })), [items]);
-  const handleSelectionChange = (0, react_1.useCallback)(value => {
-    if (value) {
-      const option = items.find(item => (item === null || item === void 0 ? void 0 : item.id) === value);
-      option && setActiveOption(option);
+  const activeOption = (0, react_1.useMemo)(() => items.find(item => (item === null || item === void 0 ? void 0 : item.id) === value), [items, value]);
+  const handleSelectionChange = (0, react_1.useCallback)(selectionValue => {
+    if (selectionValue) {
+      const option = items.find(item => (item === null || item === void 0 ? void 0 : item.id) === selectionValue);
+      option && setValue(selectionValue);
     }
-  }, [items]);
-  (0, utils_1.useLayoutEffect)(() => {
-    if (defaultValue) {
-      handleSelectionChange(defaultValue);
-    }
-  }, [defaultValue, handleSelectionChange]);
+  }, [items, setValue]);
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
     ref: ref,
     className: (0, classnames_1.default)(styles_module_scss_1.default.buttonComboWrapper, className),
     tabIndex: tabIndex,
     "data-full-width": fullWidth || undefined,
-    children: [(0, jsx_runtime_1.jsx)(button_private_1.ButtonPrivate, Object.assign({}, (0, button_private_1.extractCommonButtonProps)(rest), (0, utils_2.extractButtonActionsProps)(activeOption), {
+    children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFilled, {
       "data-type": 'option',
       size: size,
       label: (_b = activeOption === null || activeOption === void 0 ? void 0 : activeOption.label) !== null && _b !== void 0 ? _b : defaultLabel,
-      type: type,
+      onClick: activeOption === null || activeOption === void 0 ? void 0 : activeOption.onClick,
+      className: optionClassName,
       fullWidth: fullWidth,
-      iconClassName: styles_module_scss_1.default.icon,
-      labelClassName: styles_module_scss_1.default.label,
+      disabled: disabled,
+      loading: loading,
       "data-test-id": 'button-combo__option'
-    })), (0, jsx_runtime_1.jsx)(list_1.Droplist, {
+    }), (0, jsx_runtime_1.jsx)(list_1.Droplist, {
       items: droplistItems,
       open: open,
       onOpenChange: setOpen,
@@ -86,14 +97,15 @@ exports.ButtonCombo = (0, react_1.forwardRef)((_a, ref) => {
       placement: 'bottom-end',
       closeDroplistOnItemClick: true,
       "data-test-id": 'button-combo__dropdown',
-      children: (0, jsx_runtime_1.jsx)(button_private_1.ButtonPrivate, Object.assign({}, (0, button_private_1.extractCommonButtonProps)(rest), {
+      children: (0, jsx_runtime_1.jsx)(button_1.ButtonFilled, {
         "data-type": 'dropdown',
+        className: dropdownTriggerClassName,
         size: size,
-        iconClassName: styles_module_scss_1.default.icon,
-        labelClassName: styles_module_scss_1.default.label,
+        disabled: disabled,
+        loading: loading,
         icon: open ? (0, jsx_runtime_1.jsx)(icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(icons_1.ChevronDownSVG, {}),
         "data-test-id": 'button-combo__dropdown-button'
-      }))
+      })
     })]
   }));
 });

package/dist/cjs/constants.d.ts

@@ -1,3 +1,3 @@
-import { Size } from '@snack-uikit/button-private';
+import { ButtonFilledProps } from '@snack-uikit/button';
 import { DroplistProps } from '@snack-uikit/list';
-export declare const DROPLIST_SIZE_MAP: Record<Size, DroplistProps['size']>;
+export declare const DROPLIST_SIZE_MAP: Record<NonNullable<ButtonFilledProps['size']>, DroplistProps['size']>;

package/dist/cjs/constants.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DROPLIST_SIZE_MAP = void 0;
-const button_private_1 = require("@snack-uikit/button-private");
 exports.DROPLIST_SIZE_MAP = {
-  [button_private_1.SIZE.Xs]: 's',
-  [button_private_1.SIZE.S]: 's',
-  [button_private_1.SIZE.M]: 'm',
-  [button_private_1.SIZE.L]: 'l'
+  xs: 's',
+  s: 's',
+  m: 'm',
+  l: 'l'
 };

package/dist/cjs/index.d.ts

@@ -1 +1 @@
-export * from './components';
+export * from './ButtonCombo';

package/dist/cjs/index.js

@@ -22,4 +22,4 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-__exportStar(require("./components"), exports);
+__exportStar(require("./ButtonCombo"), exports);

package/dist/cjs/styles.module.css

@@ -0,0 +1,91 @@
+.buttonComboWrapper{
+  display:inline-flex;
+  align-items:center;
+}
+.buttonComboWrapper[data-full-width]{
+  flex-grow:1;
+  flex-shrink:1;
+  width:100%;
+}
+.buttonComboWrapper button:focus-visible + button{
+  position:static;
+}
+.buttonComboWrapper button[data-type=option]{
+  border-right:var(--border-width-button-combo-divider, 1px) solid var(--sys-neutral-decor-default, #dde0ea);
+}
+.buttonComboWrapper button[data-type=option][data-size=xs]{
+  min-width:auto;
+  height:var(--size-button-xs, 24px);
+  border-top-left-radius:var(--radius-button-xs, 8px);
+  border-bottom-left-radius:var(--radius-button-xs, 8px);
+  border-top-right-radius:var(--dimension-0m, 0px);
+  border-bottom-right-radius:var(--dimension-0m, 0px);
+  padding-right:var(--space-button-xs-from-label, 8px);
+  padding-left:var(--space-button-xs-from-label, 8px);
+  border-right-width:var(--border-width-button-combo-divider, 1px);
+}
+.buttonComboWrapper button[data-type=option][data-size=s]{
+  min-width:auto;
+  height:var(--size-button-s, 32px);
+  border-top-left-radius:var(--radius-button-s, 12px);
+  border-bottom-left-radius:var(--radius-button-s, 12px);
+  border-top-right-radius:var(--dimension-0m, 0px);
+  border-bottom-right-radius:var(--dimension-0m, 0px);
+  padding-right:var(--space-button-s-from-label, 16px);
+  padding-left:var(--space-button-s-from-label, 16px);
+  border-right-width:var(--border-width-button-combo-divider, 1px);
+}
+.buttonComboWrapper button[data-type=option][data-size=m]{
+  min-width:auto;
+  height:var(--size-button-m, 40px);
+  border-top-left-radius:var(--radius-button-m, 14px);
+  border-bottom-left-radius:var(--radius-button-m, 14px);
+  border-top-right-radius:var(--dimension-0m, 0px);
+  border-bottom-right-radius:var(--dimension-0m, 0px);
+  padding-right:var(--space-button-m-from-label, 24px);
+  padding-left:var(--space-button-m-from-label, 24px);
+  border-right-width:var(--border-width-button-combo-divider, 1px);
+}
+.buttonComboWrapper button[data-type=option][data-size=l]{
+  min-width:auto;
+  height:var(--size-button-l, 48px);
+  border-top-left-radius:var(--radius-button-l, 16px);
+  border-bottom-left-radius:var(--radius-button-l, 16px);
+  border-top-right-radius:var(--dimension-0m, 0px);
+  border-bottom-right-radius:var(--dimension-0m, 0px);
+  padding-right:var(--space-button-l-from-label, 32px);
+  padding-left:var(--space-button-l-from-label, 32px);
+  border-right-width:var(--border-width-button-combo-divider, 1px);
+}
+.buttonComboWrapper button[data-type=dropdown][data-size=xs]{
+  border-top-left-radius:var(--dimension-0m, 0px);
+  border-bottom-left-radius:var(--dimension-0m, 0px);
+  border-top-right-radius:var(--radius-button-xs, 8px);
+  border-bottom-right-radius:var(--radius-button-xs, 8px);
+  width:var(--size-button-xs, 24px);
+  height:var(--size-button-xs, 24px);
+}
+.buttonComboWrapper button[data-type=dropdown][data-size=s]{
+  border-top-left-radius:var(--dimension-0m, 0px);
+  border-bottom-left-radius:var(--dimension-0m, 0px);
+  border-top-right-radius:var(--radius-button-s, 12px);
+  border-bottom-right-radius:var(--radius-button-s, 12px);
+  width:var(--size-button-s, 32px);
+  height:var(--size-button-s, 32px);
+}
+.buttonComboWrapper button[data-type=dropdown][data-size=m]{
+  border-top-left-radius:var(--dimension-0m, 0px);
+  border-bottom-left-radius:var(--dimension-0m, 0px);
+  border-top-right-radius:var(--radius-button-m, 14px);
+  border-bottom-right-radius:var(--radius-button-m, 14px);
+  width:var(--size-button-m, 40px);
+  height:var(--size-button-m, 40px);
+}
+.buttonComboWrapper button[data-type=dropdown][data-size=l]{
+  border-top-left-radius:var(--dimension-0m, 0px);
+  border-bottom-left-radius:var(--dimension-0m, 0px);
+  border-top-right-radius:var(--radius-button-l, 16px);
+  border-bottom-right-radius:var(--radius-button-l, 16px);
+  width:var(--size-button-l, 48px);
+  height:var(--size-button-l, 48px);
+}

package/dist/cjs/types.d.ts

@@ -1,16 +1,5 @@
-import { BaseButtonProps } from '@snack-uikit/button-private';
 import { BaseItemProps } from '@snack-uikit/list';
-export type Item = BaseItemProps & {
+export type Item = Omit<BaseItemProps, 'onClick' | 'onMouseDown' | 'onKeyDown' | 'onFocus' | 'onBlur'> & Required<Pick<BaseItemProps, 'onClick'>> & {
     /** Название */
     label?: string;
 };
-export type BaseButtonComboProps = Pick<BaseButtonProps, 'className' | 'disabled' | 'loading' | 'size' | 'type' | 'tabIndex' | 'fullWidth'> & {
-    /** CSS-класс Dropdown */
-    dropdownClassName?: string;
-    /** Начальное состояние */
-    defaultValue?: string;
-    /** Начальное состояние лейбла */
-    defaultLabel?: string;
-    /** Основные элементы списка */
-    items: Item[];
-};

package/dist/cjs/utils.d.ts

@@ -0,0 +1,2 @@
+import { Item } from './types';
+export declare function extractDroplistItemProps(props: Item): Omit<Item, 'onClick'>;

package/dist/cjs/{components/utils.js → utils.js}

@@ -4,14 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.extractDroplistItemProps = extractDroplistItemProps;
-exports.extractButtonActionsProps = extractButtonActionsProps;
 function extractDroplistItemProps(props) {
   return Object.keys(props).filter(item => !item.startsWith('on')).reduce((nextProps, prop) => Object.assign(Object.assign({}, nextProps), {
     [prop]: props[prop]
   }), {});
-}
-function extractButtonActionsProps(props) {
-  return Object.keys(props).filter(item => item.startsWith('on')).reduce((nextProps, prop) => Object.assign(Object.assign({}, nextProps), {
-    [prop]: props[prop]
-  }), {});
 }

package/dist/esm/ButtonCombo.d.ts

@@ -0,0 +1,42 @@
+import { ButtonFilledProps } from '@snack-uikit/button';
+import { DroplistProps, ItemId } from '@snack-uikit/list';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Item } from './types';
+export type ButtonComboProps = WithSupportProps<Pick<ButtonFilledProps, 'className' | 'disabled' | 'loading' | 'size' | 'tabIndex' | 'fullWidth'> & Pick<DroplistProps, 'open' | 'onOpenChange'> & {
+    /** CSS-класс Dropdown */
+    dropdownClassName?: string;
+    /** CSS-класс Option кнопки */
+    optionClassName?: string;
+    /** CSS-класс Dropdown trigger кнопки */
+    dropdownTriggerClassName?: string;
+    /** Controlled состояние */
+    value?: ItemId;
+    /** Controlled обработчик измения состояния */
+    onChange?(value: ItemId): void;
+    /** Начальное состояние */
+    defaultValue?: string;
+    /** Начальное состояние лейбла */
+    defaultLabel?: string;
+    /** Основные элементы списка */
+    items: Item[];
+}>;
+export declare const ButtonCombo: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & Pick<ButtonFilledProps, "className" | "disabled" | "loading" | "size" | "tabIndex" | "fullWidth"> & Pick<DroplistProps, "open" | "onOpenChange"> & {
+    /** CSS-класс Dropdown */
+    dropdownClassName?: string;
+    /** CSS-класс Option кнопки */
+    optionClassName?: string;
+    /** CSS-класс Dropdown trigger кнопки */
+    dropdownTriggerClassName?: string;
+    /** Controlled состояние */
+    value?: ItemId;
+    /** Controlled обработчик измения состояния */
+    onChange?(value: ItemId): void;
+    /** Начальное состояние */
+    defaultValue?: string;
+    /** Начальное состояние лейбла */
+    defaultLabel?: string;
+    /** Основные элементы списка */
+    items: Item[];
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/ButtonCombo.js

@@ -0,0 +1,40 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { forwardRef, useCallback, useMemo } from 'react';
+import { ButtonFilled } from '@snack-uikit/button';
+import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
+import { Droplist } from '@snack-uikit/list';
+import { extractSupportProps, useValueControl } from '@snack-uikit/utils';
+import { DROPLIST_SIZE_MAP } from './constants';
+import styles from './styles.module.css';
+import { extractDroplistItemProps } from './utils';
+export const ButtonCombo = forwardRef((_a, ref) => {
+    var _b;
+    var { size = 's', defaultLabel = '', className, dropdownClassName, optionClassName, dropdownTriggerClassName, defaultValue, items, tabIndex, fullWidth, disabled, loading, value: valueProp, open: openProp, onOpenChange, onChange } = _a, rest = __rest(_a, ["size", "defaultLabel", "className", "dropdownClassName", "optionClassName", "dropdownTriggerClassName", "defaultValue", "items", "tabIndex", "fullWidth", "disabled", "loading", "value", "open", "onOpenChange", "onChange"]);
+    const [open, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
+    const [value, setValue] = useValueControl({ value: valueProp, defaultValue, onChange });
+    const droplistItems = useMemo(() => items.map(extractDroplistItemProps).map(item => (Object.assign(Object.assign({}, item), { id: item === null || item === void 0 ? void 0 : item.id, content: item === null || item === void 0 ? void 0 : item.label }))), [items]);
+    const activeOption = useMemo(() => items.find(item => (item === null || item === void 0 ? void 0 : item.id) === value), [items, value]);
+    const handleSelectionChange = useCallback((selectionValue) => {
+        if (selectionValue) {
+            const option = items.find(item => (item === null || item === void 0 ? void 0 : item.id) === selectionValue);
+            option && setValue(selectionValue);
+        }
+    }, [items, setValue]);
+    return (_jsxs("div", Object.assign({}, extractSupportProps(rest), { ref: ref, className: cn(styles.buttonComboWrapper, className), tabIndex: tabIndex, "data-full-width": fullWidth || undefined, children: [_jsx(ButtonFilled, { "data-type": 'option', size: size, label: (_b = activeOption === null || activeOption === void 0 ? void 0 : activeOption.label) !== null && _b !== void 0 ? _b : defaultLabel, onClick: activeOption === null || activeOption === void 0 ? void 0 : activeOption.onClick, className: optionClassName, fullWidth: fullWidth, disabled: disabled, loading: loading, "data-test-id": 'button-combo__option' }), _jsx(Droplist, { items: droplistItems, open: open, onOpenChange: setOpen, selection: {
+                    defaultValue,
+                    mode: 'single',
+                    onChange: handleSelectionChange,
+                }, className: dropdownClassName, size: DROPLIST_SIZE_MAP[size], placement: 'bottom-end', closeDroplistOnItemClick: true, "data-test-id": 'button-combo__dropdown', children: _jsx(ButtonFilled, { "data-type": 'dropdown', className: dropdownTriggerClassName, size: size, disabled: disabled, loading: loading, icon: open ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), "data-test-id": 'button-combo__dropdown-button' }) })] })));
+});

package/dist/esm/constants.d.ts

@@ -1,3 +1,3 @@
-import { Size } from '@snack-uikit/button-private';
+import { ButtonFilledProps } from '@snack-uikit/button';
 import { DroplistProps } from '@snack-uikit/list';
-export declare const DROPLIST_SIZE_MAP: Record<Size, DroplistProps['size']>;
+export declare const DROPLIST_SIZE_MAP: Record<NonNullable<ButtonFilledProps['size']>, DroplistProps['size']>;

package/dist/esm/constants.js

@@ -1,7 +1,6 @@
-import { SIZE } from '@snack-uikit/button-private';
 export const DROPLIST_SIZE_MAP = {
-    [SIZE.Xs]: 's',
-    [SIZE.S]: 's',
-    [SIZE.M]: 'm',
-    [SIZE.L]: 'l',
+    xs: 's',
+    s: 's',
+    m: 'm',
+    l: 'l',
 };

package/dist/esm/index.d.ts

@@ -1 +1 @@
-export * from './components';
+export * from './ButtonCombo';

package/dist/esm/index.js

@@ -1 +1 @@
-export * from './components';
+export * from './ButtonCombo';

package/dist/esm/styles.module.css

@@ -0,0 +1,91 @@
+.buttonComboWrapper{
+  display:inline-flex;
+  align-items:center;
+}
+.buttonComboWrapper[data-full-width]{
+  flex-grow:1;
+  flex-shrink:1;
+  width:100%;
+}
+.buttonComboWrapper button:focus-visible + button{
+  position:static;
+}
+.buttonComboWrapper button[data-type=option]{
+  border-right:var(--border-width-button-combo-divider, 1px) solid var(--sys-neutral-decor-default, #dde0ea);
+}
+.buttonComboWrapper button[data-type=option][data-size=xs]{
+  min-width:auto;
+  height:var(--size-button-xs, 24px);
+  border-top-left-radius:var(--radius-button-xs, 8px);
+  border-bottom-left-radius:var(--radius-button-xs, 8px);
+  border-top-right-radius:var(--dimension-0m, 0px);
+  border-bottom-right-radius:var(--dimension-0m, 0px);
+  padding-right:var(--space-button-xs-from-label, 8px);
+  padding-left:var(--space-button-xs-from-label, 8px);
+  border-right-width:var(--border-width-button-combo-divider, 1px);
+}
+.buttonComboWrapper button[data-type=option][data-size=s]{
+  min-width:auto;
+  height:var(--size-button-s, 32px);
+  border-top-left-radius:var(--radius-button-s, 12px);
+  border-bottom-left-radius:var(--radius-button-s, 12px);
+  border-top-right-radius:var(--dimension-0m, 0px);
+  border-bottom-right-radius:var(--dimension-0m, 0px);
+  padding-right:var(--space-button-s-from-label, 16px);
+  padding-left:var(--space-button-s-from-label, 16px);
+  border-right-width:var(--border-width-button-combo-divider, 1px);
+}
+.buttonComboWrapper button[data-type=option][data-size=m]{
+  min-width:auto;
+  height:var(--size-button-m, 40px);
+  border-top-left-radius:var(--radius-button-m, 14px);
+  border-bottom-left-radius:var(--radius-button-m, 14px);
+  border-top-right-radius:var(--dimension-0m, 0px);
+  border-bottom-right-radius:var(--dimension-0m, 0px);
+  padding-right:var(--space-button-m-from-label, 24px);
+  padding-left:var(--space-button-m-from-label, 24px);
+  border-right-width:var(--border-width-button-combo-divider, 1px);
+}
+.buttonComboWrapper button[data-type=option][data-size=l]{
+  min-width:auto;
+  height:var(--size-button-l, 48px);
+  border-top-left-radius:var(--radius-button-l, 16px);
+  border-bottom-left-radius:var(--radius-button-l, 16px);
+  border-top-right-radius:var(--dimension-0m, 0px);
+  border-bottom-right-radius:var(--dimension-0m, 0px);
+  padding-right:var(--space-button-l-from-label, 32px);
+  padding-left:var(--space-button-l-from-label, 32px);
+  border-right-width:var(--border-width-button-combo-divider, 1px);
+}
+.buttonComboWrapper button[data-type=dropdown][data-size=xs]{
+  border-top-left-radius:var(--dimension-0m, 0px);
+  border-bottom-left-radius:var(--dimension-0m, 0px);
+  border-top-right-radius:var(--radius-button-xs, 8px);
+  border-bottom-right-radius:var(--radius-button-xs, 8px);
+  width:var(--size-button-xs, 24px);
+  height:var(--size-button-xs, 24px);
+}
+.buttonComboWrapper button[data-type=dropdown][data-size=s]{
+  border-top-left-radius:var(--dimension-0m, 0px);
+  border-bottom-left-radius:var(--dimension-0m, 0px);
+  border-top-right-radius:var(--radius-button-s, 12px);
+  border-bottom-right-radius:var(--radius-button-s, 12px);
+  width:var(--size-button-s, 32px);
+  height:var(--size-button-s, 32px);
+}
+.buttonComboWrapper button[data-type=dropdown][data-size=m]{
+  border-top-left-radius:var(--dimension-0m, 0px);
+  border-bottom-left-radius:var(--dimension-0m, 0px);
+  border-top-right-radius:var(--radius-button-m, 14px);
+  border-bottom-right-radius:var(--radius-button-m, 14px);
+  width:var(--size-button-m, 40px);
+  height:var(--size-button-m, 40px);
+}
+.buttonComboWrapper button[data-type=dropdown][data-size=l]{
+  border-top-left-radius:var(--dimension-0m, 0px);
+  border-bottom-left-radius:var(--dimension-0m, 0px);
+  border-top-right-radius:var(--radius-button-l, 16px);
+  border-bottom-right-radius:var(--radius-button-l, 16px);
+  width:var(--size-button-l, 48px);
+  height:var(--size-button-l, 48px);
+}

package/dist/esm/types.d.ts

@@ -1,16 +1,5 @@
-import { BaseButtonProps } from '@snack-uikit/button-private';
 import { BaseItemProps } from '@snack-uikit/list';
-export type Item = BaseItemProps & {
+export type Item = Omit<BaseItemProps, 'onClick' | 'onMouseDown' | 'onKeyDown' | 'onFocus' | 'onBlur'> & Required<Pick<BaseItemProps, 'onClick'>> & {
     /** Название */
     label?: string;
 };
-export type BaseButtonComboProps = Pick<BaseButtonProps, 'className' | 'disabled' | 'loading' | 'size' | 'type' | 'tabIndex' | 'fullWidth'> & {
-    /** CSS-класс Dropdown */
-    dropdownClassName?: string;
-    /** Начальное состояние */
-    defaultValue?: string;
-    /** Начальное состояние лейбла */
-    defaultLabel?: string;
-    /** Основные элементы списка */
-    items: Item[];
-};

package/dist/esm/utils.d.ts

@@ -0,0 +1,2 @@
+import { Item } from './types';
+export declare function extractDroplistItemProps(props: Item): Omit<Item, 'onClick'>;

package/dist/esm/{components/utils.js → utils.js}

@@ -3,8 +3,3 @@ export function extractDroplistItemProps(props) {
         .filter(item => !item.startsWith('on'))
         .reduce((nextProps, prop) => (Object.assign(Object.assign({}, nextProps), { [prop]: props[prop] })), {});
 }
-export function extractButtonActionsProps(props) {
-    return Object.keys(props)
-        .filter(item => item.startsWith('on'))
-        .reduce((nextProps, prop) => (Object.assign(Object.assign({}, nextProps), { [prop]: props[prop] })), {});
-}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Button Combo",
-  "version": "0.0.1-preview-a2f98ef7.0",
+  "version": "0.1.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,11 +36,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button-private": "0.0.1-preview-a2f98ef7.0",
+    "@snack-uikit/button": "0.19.5",
     "@snack-uikit/icons": "0.24.1",
-    "@snack-uikit/list": "0.22.3-preview-a2f98ef7.0",
+    "@snack-uikit/list": "0.23.0",
     "@snack-uikit/utils": "3.6.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "16999df080b0b870c1a90ba74aa6c296cd4d480b"
+  "gitHead": "7e01ebe58fd9bf9a4c06064e6415ed6c16cc06e5"
 }