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

package/src/ButtonCombo.tsx

@@ -0,0 +1,127 @@
+import cn from 'classnames';
+import { forwardRef, useCallback, useMemo } from 'react';
+
+import { ButtonFilled, ButtonFilledProps } from '@snack-uikit/button';
+import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
+import { Droplist, DroplistProps, ItemId } from '@snack-uikit/list';
+import { extractSupportProps, useValueControl, WithSupportProps } from '@snack-uikit/utils';
+
+import { DROPLIST_SIZE_MAP } from './constants';
+import styles from './styles.module.scss';
+import { Item } from './types';
+import { extractDroplistItemProps } from './utils';
+
+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 const ButtonCombo = forwardRef<HTMLDivElement, ButtonComboProps>(
+  (
+    {
+      size = 's',
+      defaultLabel = '',
+      className,
+      dropdownClassName,
+      optionClassName,
+      dropdownTriggerClassName,
+      defaultValue,
+      items,
+      tabIndex,
+      fullWidth,
+      disabled,
+      loading,
+      value: valueProp,
+      open: openProp,
+      onOpenChange,
+      onChange,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useValueControl<boolean>({ value: openProp, onChange: onOpenChange });
+    const [value, setValue] = useValueControl<ItemId>({ value: valueProp, defaultValue, onChange });
+
+    const droplistItems = useMemo(
+      () => items.map(extractDroplistItemProps).map(item => ({ ...item, id: item?.id, content: item?.label })),
+      [items],
+    );
+
+    const activeOption = useMemo(() => items.find(item => item?.id === value), [items, value]);
+
+    const handleSelectionChange = useCallback(
+      (selectionValue: ItemId) => {
+        if (selectionValue) {
+          const option = items.find(item => item?.id === selectionValue);
+
+          option && setValue(selectionValue);
+        }
+      },
+      [items, setValue],
+    );
+
+    return (
+      <div
+        {...extractSupportProps(rest)}
+        ref={ref}
+        className={cn(styles.buttonComboWrapper, className)}
+        tabIndex={tabIndex}
+        data-full-width={fullWidth || undefined}
+      >
+        <ButtonFilled
+          data-type='option'
+          size={size}
+          label={activeOption?.label ?? defaultLabel}
+          onClick={activeOption?.onClick}
+          className={optionClassName}
+          fullWidth={fullWidth}
+          disabled={disabled}
+          loading={loading}
+          data-test-id='button-combo__option'
+        />
+        <Droplist
+          items={droplistItems}
+          open={open}
+          onOpenChange={setOpen}
+          selection={{
+            defaultValue,
+            mode: 'single',
+            onChange: handleSelectionChange,
+          }}
+          className={dropdownClassName}
+          size={DROPLIST_SIZE_MAP[size]}
+          placement='bottom-end'
+          closeDroplistOnItemClick
+          data-test-id='button-combo__dropdown'
+        >
+          <ButtonFilled
+            data-type='dropdown'
+            className={dropdownTriggerClassName}
+            size={size}
+            disabled={disabled}
+            loading={loading}
+            icon={open ? <ChevronUpSVG /> : <ChevronDownSVG />}
+            data-test-id='button-combo__dropdown-button'
+          />
+        </Droplist>
+      </div>
+    );
+  },
+);

package/src/constants.ts

@@ -1,9 +1,9 @@
-import { SIZE, Size } from '@snack-uikit/button-private';
+import { ButtonFilledProps } from '@snack-uikit/button';
 import { DroplistProps } from '@snack-uikit/list';
 
-export const DROPLIST_SIZE_MAP: Record<Size, DroplistProps['size']> = {
-  [SIZE.Xs]: 's',
-  [SIZE.S]: 's',
-  [SIZE.M]: 'm',
-  [SIZE.L]: 'l',
+export const DROPLIST_SIZE_MAP: Record<NonNullable<ButtonFilledProps['size']>, DroplistProps['size']> = {
+  xs: 's',
+  s: 's',
+  m: 'm',
+  l: 'l',
 };

package/src/index.ts

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

package/src/styles.module.scss

@@ -1,79 +1,43 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-buttonCombo';
 @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
 
-@mixin icon-fill($color) {
-  .icon {
-    color: $color;
-  }
-}
-
-@mixin label-color($color) {
-  .label {
-    color: $color;
-  }
-}
+$sizes: 'xs', 's', 'm', 'l';
 
-@mixin icon-size($icon-sizes, $size) {
-  .icon {
-    display: inline-flex;
+.buttonComboWrapper {
+  display: inline-flex;
+  align-items: center;
 
-    svg {
-      width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
-      height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
-    }
+  &[data-full-width] {
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 100%;
   }
-}
 
-@mixin button-anatomy-styles($button-theme, $sizes, $variants, $typography, $hasLabel: true) {
-  @each $size in $sizes {
-    &[data-size='#{$size}'] {
-      @if $hasLabel == true {
-        .label {
-          @include styles-tokens-element.composite-var($typography, $size);
-        }
-      }
-
-      .icon {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-
-        width: styles-tokens-element.$icon-s;
-        height: styles-tokens-element.$icon-s;
+  button {
+    &:not(:focus-visible) {
+      position: static;
+    }
 
-        svg {
-          max-width: styles-tokens-element.$icon-s;
-          max-height: styles-tokens-element.$icon-s;
-        }
-      }
+    &[data-type='option'] {
+      @each $size in $sizes {
+        &[data-size='#{$size}'] {
+          min-width: auto;
 
-      @each $variant in $variants {
-        &[data-variant='#{$variant}'] {
-          @include styles-tokens-element.composite-var($button-theme, 'container', $size, $variant);
+          @include styles-tokens-element.composite-var(styles-tokens-buttonCombo.$button-combo, 'container', $size, 'option');
         }
       }
-    }
-  }
-}
 
-@mixin loading-label-only($button-theme) {
-  &[data-loading][data-variant='label-only'] {
-    .icon {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+      border-right: styles-theme-variables.$border-width-button-combo-divider solid
+        styles-theme-variables.$sys-neutral-decor-default;
     }
 
-    .label {
-      @include styles-tokens-element.composite-var($button-theme, 'label', 'load-label-only');
+    &[data-type='dropdown'] {
+      @each $size in $sizes {
+        &[data-size='#{$size}'] {
+          @include styles-tokens-element.composite-var(styles-tokens-buttonCombo.$button-combo, 'container', $size, 'dropdown');
+        }
+      }
     }
   }
-}
-
-@mixin button-common-state {
-  &:focus-visible {
-    @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
-
-    outline-offset: styles-tokens-element.$spacing-state-focus-offset;
-  }
-}
+}

package/src/types.ts

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

package/src/utils.ts

@@ -0,0 +1,13 @@
+import { Item } from './types';
+
+export function extractDroplistItemProps(props: Item): Omit<Item, 'onClick'> {
+  return Object.keys(props)
+    .filter(item => !item.startsWith('on'))
+    .reduce(
+      (nextProps, prop) => ({
+        ...nextProps,
+        [prop]: props[prop as unknown as keyof Item],
+      }),
+      {},
+    );
+}

package/dist/cjs/components/ButtonCombo.d.ts

@@ -1,11 +0,0 @@
-import { WithSupportProps } from '@snack-uikit/utils';
-import { BaseButtonComboProps, Item } from '../types';
-export type ButtonComboProps = WithSupportProps<BaseButtonComboProps>;
-export declare const ButtonCombo: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string;
-} & import("react").AriaAttributes & Pick<import("@snack-uikit/button-private").BaseButtonProps, "className" | "tabIndex" | "loading" | "size" | "disabled" | "type" | "fullWidth"> & {
-    dropdownClassName?: string;
-    defaultValue?: string;
-    defaultLabel?: string;
-    items: Item[];
-} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/index.d.ts

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

package/dist/cjs/components/index.js

@@ -1,25 +0,0 @@
-"use strict";
-
-var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  var desc = Object.getOwnPropertyDescriptor(m, k);
-  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-    desc = {
-      enumerable: true,
-      get: function () {
-        return m[k];
-      }
-    };
-  }
-  Object.defineProperty(o, k2, desc);
-} : function (o, m, k, k2) {
-  if (k2 === undefined) k2 = k;
-  o[k2] = m[k];
-});
-var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
-  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-__exportStar(require("./ButtonCombo"), exports);

package/dist/cjs/components/styles.module.css

@@ -1,221 +0,0 @@
-.buttonComboWrapper{
-  display:inline-flex;
-  align-items:center;
-}
-.buttonComboWrapper[data-full-width]{
-  flex-grow:1;
-  flex-shrink:1;
-  width:100%;
-}
-.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]{
-  height:var(--size-button-xs, 24px);
-  border-top-left-radius:var(--radius-button-xs, 8px);
-  border-bottom-left-radius:var(--radius-button-xs, 8px);
-  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]{
-  height:var(--size-button-s, 32px);
-  border-top-left-radius:var(--radius-button-s, 12px);
-  border-bottom-left-radius:var(--radius-button-s, 12px);
-  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]{
-  height:var(--size-button-m, 40px);
-  border-top-left-radius:var(--radius-button-m, 14px);
-  border-bottom-left-radius:var(--radius-button-m, 14px);
-  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]{
-  height:var(--size-button-l, 48px);
-  border-top-left-radius:var(--radius-button-l, 16px);
-  border-bottom-left-radius:var(--radius-button-l, 16px);
-  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-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-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-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-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);
-}
-.buttonComboWrapper button[data-size=xs] .label{
-  font-family:var(--sans-label-s-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-s-font-weight, Semibold);
-  line-height:var(--sans-label-s-line-height, 14px);
-  font-size:var(--sans-label-s-font-size, 11px);
-  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
-}
-.buttonComboWrapper button[data-size=xs] .icon{
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  width:var(--size-icon-container-s, 24px);
-  height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-size=xs] .icon svg{
-  max-width:var(--size-icon-container-s, 24px);
-  max-height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-size=s] .label{
-  font-family:var(--sans-label-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-m-font-weight, Semibold);
-  line-height:var(--sans-label-m-line-height, 16px);
-  font-size:var(--sans-label-m-font-size, 12px);
-  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
-}
-.buttonComboWrapper button[data-size=s] .icon{
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  width:var(--size-icon-container-s, 24px);
-  height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-size=s] .icon svg{
-  max-width:var(--size-icon-container-s, 24px);
-  max-height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-size=m] .label{
-  font-family:var(--sans-label-l-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-l-font-weight, Semibold);
-  line-height:var(--sans-label-l-line-height, 20px);
-  font-size:var(--sans-label-l-font-size, 14px);
-  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
-}
-.buttonComboWrapper button[data-size=m] .icon{
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  width:var(--size-icon-container-s, 24px);
-  height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-size=m] .icon svg{
-  max-width:var(--size-icon-container-s, 24px);
-  max-height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-size=l] .label{
-  font-family:var(--sans-label-l-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-l-font-weight, Semibold);
-  line-height:var(--sans-label-l-line-height, 20px);
-  font-size:var(--sans-label-l-font-size, 14px);
-  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
-}
-.buttonComboWrapper button[data-size=l] .icon{
-  display:inline-flex;
-  align-items:center;
-  justify-content:center;
-  width:var(--size-icon-container-s, 24px);
-  height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-size=l] .icon svg{
-  max-width:var(--size-icon-container-s, 24px);
-  max-height:var(--size-icon-container-s, 24px);
-}
-.buttonComboWrapper button[data-loading][data-variant=label-only] .icon{
-  position:absolute;
-  top:50%;
-  left:50%;
-  transform:translate(-50%, -50%);
-}
-.buttonComboWrapper button[data-loading][data-variant=label-only] .label{
-  opacity:var(--opacity-a0, 0);
-}
-.buttonComboWrapper button[data-appearance=primary]{
-  background-color:var(--sys-primary-accent-default, #794ed3);
-}
-.buttonComboWrapper button[data-appearance=primary] .label{
-  color:var(--sys-primary-on-accent, #fdfbff);
-}
-.buttonComboWrapper button[data-appearance=primary] .icon{
-  color:var(--sys-primary-on-accent, #fdfbff);
-}
-@media (hover: hover){
-  .buttonComboWrapper button[data-appearance=primary]:hover{
-    background-color:var(--sys-primary-accent-hovered, #6851a6);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:hover .label{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:hover .icon{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-}
-@media (hover: none) or (hover: hover){
-  .buttonComboWrapper button[data-appearance=primary]:focus-visible{
-    background-color:var(--sys-primary-accent-hovered, #6851a6);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:focus-visible .label{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:focus-visible .icon{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:active{
-    background-color:var(--sys-primary-accent-pressed, #5b4796);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:active .label{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:active .icon{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-  .buttonComboWrapper button[data-appearance=primary][data-loading]{
-    background-color:var(--sys-primary-accent-pressed, #5b4796);
-  }
-  .buttonComboWrapper button[data-appearance=primary][data-loading] .label{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-  .buttonComboWrapper button[data-appearance=primary][data-loading] .icon{
-    color:var(--sys-primary-on-accent, #fdfbff);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:disabled, .buttonComboWrapper button[data-appearance=primary][data-disabled]{
-    background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:disabled .label, .buttonComboWrapper button[data-appearance=primary][data-disabled] .label{
-    color:var(--sys-neutral-text-light, #8b8e9b);
-  }
-  .buttonComboWrapper button[data-appearance=primary]:disabled .icon, .buttonComboWrapper button[data-appearance=primary][data-disabled] .icon{
-    color:var(--sys-neutral-text-light, #8b8e9b);
-  }
-}
-.buttonComboWrapper button[data-appearance=primary]:focus-visible{
-  z-index:1;
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.buttonComboWrapper button:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  outline-offset:var(--spacing-state-focus-offset, 2px);
-}

package/dist/cjs/components/utils.d.ts

@@ -1,3 +0,0 @@
-import { Item } from '../types';
-export declare function extractDroplistItemProps(props: Item): Item;
-export declare function extractButtonActionsProps(props: Item): Item;

package/dist/esm/components/ButtonCombo.d.ts

@@ -1,11 +0,0 @@
-import { WithSupportProps } from '@snack-uikit/utils';
-import { BaseButtonComboProps, Item } from '../types';
-export type ButtonComboProps = WithSupportProps<BaseButtonComboProps>;
-export declare const ButtonCombo: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string;
-} & import("react").AriaAttributes & Pick<import("@snack-uikit/button-private").BaseButtonProps, "className" | "tabIndex" | "loading" | "size" | "disabled" | "type" | "fullWidth"> & {
-    dropdownClassName?: string;
-    defaultValue?: string;
-    defaultLabel?: string;
-    items: Item[];
-} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/ButtonCombo.js

@@ -1,44 +0,0 @@
-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, useState } from 'react';
-import { ButtonPrivate, extractCommonButtonProps, HTML_TYPE, SIZE } from '@snack-uikit/button-private';
-import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
-import { Droplist } from '@snack-uikit/list';
-import { extractSupportProps, useLayoutEffect } from '@snack-uikit/utils';
-import { DROPLIST_SIZE_MAP } from '../constants';
-import styles from './styles.module.css';
-import { extractButtonActionsProps, extractDroplistItemProps } from './utils';
-export const ButtonCombo = forwardRef((_a, ref) => {
-    var _b;
-    var { size = SIZE.S, type = HTML_TYPE.Button, defaultLabel = '', className, dropdownClassName, defaultValue, items, tabIndex, fullWidth } = _a, rest = __rest(_a, ["size", "type", "defaultLabel", "className", "dropdownClassName", "defaultValue", "items", "tabIndex", "fullWidth"]);
-    const [open, setOpen] = useState(false);
-    const [activeOption, setActiveOption] = useState({});
-    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 handleSelectionChange = useCallback((value) => {
-        if (value) {
-            const option = items.find(item => (item === null || item === void 0 ? void 0 : item.id) === value);
-            option && setActiveOption(option);
-        }
-    }, [items]);
-    useLayoutEffect(() => {
-        if (defaultValue) {
-            handleSelectionChange(defaultValue);
-        }
-    }, [defaultValue, handleSelectionChange]);
-    return (_jsxs("div", Object.assign({}, extractSupportProps(rest), { ref: ref, className: cn(styles.buttonComboWrapper, className), tabIndex: tabIndex, "data-full-width": fullWidth || undefined, children: [_jsx(ButtonPrivate, Object.assign({}, extractCommonButtonProps(rest), extractButtonActionsProps(activeOption), { "data-type": 'option', size: size, label: (_b = activeOption === null || activeOption === void 0 ? void 0 : activeOption.label) !== null && _b !== void 0 ? _b : defaultLabel, type: type, fullWidth: fullWidth, iconClassName: styles.icon, labelClassName: styles.label, "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(ButtonPrivate, Object.assign({}, extractCommonButtonProps(rest), { "data-type": 'dropdown', size: size, iconClassName: styles.icon, labelClassName: styles.label, icon: open ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), "data-test-id": 'button-combo__dropdown-button' })) })] })));
-});

package/dist/esm/components/index.d.ts

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

package/dist/esm/components/index.js

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