@snack-uikit/segmented-control 0.6.11-preview-f2182dc7.0 → 0.6.11

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.6.11 (2025-10-22)</small>
+
+* feat(PDS-3093): counter added in segment ([d5c9867](https://github.com/cloud-ru-tech/snack-uikit/commit/d5c9867))
+
+
+
+
+
 ## <small>0.6.10 (2025-09-22)</small>
 
 ### Only dependencies have been changed

package/README.md

@@ -14,6 +14,15 @@ SegmentedControl
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| items* | `Segment<Value>[]` | - | Набор сегментов. |
+| value | `IdType` | - | Value выбранного сегмента. |
+| defaultValue | `IdType` | - | ID выбранного по умолчанию сегмента. (в uncontrolled режиме) |
+| onChange | `(value: Value) => void` | - | Колбек смены выбранного сегмента. |
+| className | `string` | - | CSS-класс контейнера. |
+| size | enum Size: `"xs"`, `"s"`, `"m"`, `"l"` | m | Размер компонента. |
+| outline | `boolean` | - | Обводка |
+| width | enum Width: `"auto"`, `"full"` | auto | Управление шириной компонента. |
+| name | `string` | - | Имя поля |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/cjs/helperComponents/Segment/Segment.js

@@ -63,7 +63,7 @@ function Segment(_ref) {
       className: styles_module_scss_1.default.label,
       "data-size": size,
       text: label
-    }), counter !== undefined && (0, jsx_runtime_1.jsx)(counter_1.Counter, Object.assign({}, counter, {
+    }), counter && (0, jsx_runtime_1.jsx)(counter_1.Counter, Object.assign({}, counter, {
       size: 's'
     }))]
   });

package/dist/cjs/types.d.ts

@@ -5,35 +5,53 @@ import { SIZE, WIDTH } from './constants';
 export type IdType = string | number;
 export type Size = ValueOf<typeof SIZE>;
 export type Width = ValueOf<typeof WIDTH>;
-export type Segment<Value extends IdType = IdType> = {
+export type SelectionPosition = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+type SegmentBase<Value extends IdType = IdType> = {
     /**
      * Идентификатор сегмента.
      */
     value: Value;
-    /**
-     * Текстовый заголовок сегмента.
-     */
-    label?: string;
     /**
      * Состояние активности сегмента.
      */
     disabled?: boolean;
+    /**
+     * Render-обертка над сегментом.
+     */
+    renderWrapSegment?: (segment: ReactNode) => ReactNode;
+};
+type SegmentWithIcon = {
+    /**
+     * Текстовый заголовок сегмента.
+     */
+    label?: string;
     /**
      * Иконка сегмента.
      */
     icon?: ReactNode;
+    /**
+     * Счетчик сегмента.
+     */
+    counter?: never;
+};
+type SegmentWithCounter = {
+    /**
+     * Текстовый заголовок сегмента.
+     */
+    label: string;
     /**
      * Счетчик сегмента.
      */
     counter?: Omit<CounterProps, 'size'>;
     /**
-     * Render-обертка над сегментом.
+     * Иконка сегмента.
      */
-    renderWrapSegment?: (segment: ReactNode) => ReactNode;
-};
-export type SelectionPosition = {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
+    icon?: never;
 };
+export type Segment<Value extends IdType = IdType> = SegmentBase<Value> & (SegmentWithIcon | SegmentWithCounter);
+export {};

package/dist/esm/helperComponents/Segment/Segment.js

@@ -17,6 +17,6 @@ export function Segment({ size, label, value, selected, onClick, disabled, icon,
             onSelectionUpdated(buttonRef.current);
         }
     }, [selected, buttonRef, onSelectionUpdated]);
-    const segment = (_jsxs("button", { ref: buttonRef, "data-test-id": `section-${value}`, "data-active": selected || undefined, "data-disabled": disabled || undefined, "data-layout": getLayout(icon, label, size), className: cn(styles.segment), onClick: onClick, "data-size": size, disabled: disabled, tabIndex: focusable ? 0 : -1, "aria-checked": selected, role: 'radio', type: 'button', children: [size !== 'xs' && icon && _jsx("div", { className: styles.icon, children: icon }), label && _jsx(TruncateString, { className: styles.label, "data-size": size, text: label }), counter !== undefined && _jsx(Counter, Object.assign({}, counter, { size: 's' }))] }));
+    const segment = (_jsxs("button", { ref: buttonRef, "data-test-id": `section-${value}`, "data-active": selected || undefined, "data-disabled": disabled || undefined, "data-layout": getLayout(icon, label, size), className: cn(styles.segment), onClick: onClick, "data-size": size, disabled: disabled, tabIndex: focusable ? 0 : -1, "aria-checked": selected, role: 'radio', type: 'button', children: [size !== 'xs' && icon && _jsx("div", { className: styles.icon, children: icon }), label && _jsx(TruncateString, { className: styles.label, "data-size": size, text: label }), counter && _jsx(Counter, Object.assign({}, counter, { size: 's' }))] }));
     return renderWrapSegment ? renderWrapSegment(segment) : segment;
 }

package/dist/esm/types.d.ts

@@ -5,35 +5,53 @@ import { SIZE, WIDTH } from './constants';
 export type IdType = string | number;
 export type Size = ValueOf<typeof SIZE>;
 export type Width = ValueOf<typeof WIDTH>;
-export type Segment<Value extends IdType = IdType> = {
+export type SelectionPosition = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+type SegmentBase<Value extends IdType = IdType> = {
     /**
      * Идентификатор сегмента.
      */
     value: Value;
-    /**
-     * Текстовый заголовок сегмента.
-     */
-    label?: string;
     /**
      * Состояние активности сегмента.
      */
     disabled?: boolean;
+    /**
+     * Render-обертка над сегментом.
+     */
+    renderWrapSegment?: (segment: ReactNode) => ReactNode;
+};
+type SegmentWithIcon = {
+    /**
+     * Текстовый заголовок сегмента.
+     */
+    label?: string;
     /**
      * Иконка сегмента.
      */
     icon?: ReactNode;
+    /**
+     * Счетчик сегмента.
+     */
+    counter?: never;
+};
+type SegmentWithCounter = {
+    /**
+     * Текстовый заголовок сегмента.
+     */
+    label: string;
     /**
      * Счетчик сегмента.
      */
     counter?: Omit<CounterProps, 'size'>;
     /**
-     * Render-обертка над сегментом.
+     * Иконка сегмента.
      */
-    renderWrapSegment?: (segment: ReactNode) => ReactNode;
-};
-export type SelectionPosition = {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
+    icon?: never;
 };
+export type Segment<Value extends IdType = IdType> = SegmentBase<Value> & (SegmentWithIcon | SegmentWithCounter);
+export {};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Segmented Control",
-  "version": "0.6.11-preview-f2182dc7.0",
+  "version": "0.6.11",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -42,5 +42,5 @@
     "classnames": "2.5.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "c1668db4e5d5b7024028b8af0e4d9ff908be5214"
+  "gitHead": "b89a1f2e4c907c09a74c5ed35edcd10af502e97a"
 }

package/src/helperComponents/Segment/Segment.tsx

@@ -63,7 +63,7 @@ export function Segment({
     >
       {size !== 'xs' && icon && <div className={styles.icon}>{icon}</div>}
       {label && <TruncateString className={styles.label} data-size={size} text={label} />}
-      {counter !== undefined && <Counter {...counter} size='s' />}
+      {counter && <Counter {...counter} size='s' />}
     </button>
   );
 

package/src/types.ts

@@ -11,36 +11,56 @@ export type Size = ValueOf<typeof SIZE>;
 
 export type Width = ValueOf<typeof WIDTH>;
 
-export type Segment<Value extends IdType = IdType> = {
+export type SelectionPosition = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+};
+
+type SegmentBase<Value extends IdType = IdType> = {
   /**
    * Идентификатор сегмента.
    */
   value: Value;
-  /**
-   * Текстовый заголовок сегмента.
-   */
-  label?: string;
   /**
    * Состояние активности сегмента.
    */
   disabled?: boolean;
+  /**
+   * Render-обертка над сегментом.
+   */
+  renderWrapSegment?: (segment: ReactNode) => ReactNode;
+};
+
+type SegmentWithIcon = {
+  /**
+   * Текстовый заголовок сегмента.
+   */
+  label?: string;
   /**
    * Иконка сегмента.
    */
   icon?: ReactNode;
+  /**
+   * Счетчик сегмента.
+   */
+  counter?: never;
+};
+
+type SegmentWithCounter = {
+  /**
+   * Текстовый заголовок сегмента.
+   */
+  label: string;
   /**
    * Счетчик сегмента.
    */
   counter?: Omit<CounterProps, 'size'>;
   /**
-   * Render-обертка над сегментом.
+   * Иконка сегмента.
    */
-  renderWrapSegment?: (segment: ReactNode) => ReactNode;
+  icon?: never;
 };
 
-export type SelectionPosition = {
-  top: number;
-  left: number;
-  width: number;
-  height: number;
-};
+export type Segment<Value extends IdType = IdType> = SegmentBase<Value> & (SegmentWithIcon | SegmentWithCounter);