@snack-uikit/segmented-control 0.6.10 → 0.6.11-preview-4eb2b89e.0

package/README.md

@@ -14,15 +14,6 @@ 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.d.ts

@@ -7,5 +7,5 @@ type SegmentProps = SegmentType & {
     onGetFocusable?: (ref: HTMLButtonElement | null) => void;
     onSelectionUpdated: (element: HTMLButtonElement) => void;
 };
-export declare function Segment({ size, label, value, selected, onClick, disabled, icon, focusable, onGetFocusable, onSelectionUpdated, renderWrapSegment, }: SegmentProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function Segment({ size, label, value, selected, onClick, disabled, icon, counter, focusable, onGetFocusable, onSelectionUpdated, renderWrapSegment, }: SegmentProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

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

@@ -12,6 +12,7 @@ exports.Segment = Segment;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
+const counter_1 = require("@snack-uikit/counter");
 const truncate_string_1 = require("@snack-uikit/truncate-string");
 const utils_1 = require("../../utils");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
@@ -24,6 +25,7 @@ function Segment(_ref) {
     onClick,
     disabled,
     icon,
+    counter,
     focusable,
     onGetFocusable,
     onSelectionUpdated,
@@ -61,6 +63,10 @@ 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, {
+      size: 's',
+      appearance: 'primary',
+      value: counter
     })]
   });
   return renderWrapSegment ? renderWrapSegment(segment) : segment;

package/dist/cjs/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { CounterProps } from '@snack-uikit/counter';
 import { ValueOf } from '@snack-uikit/utils';
 import { SIZE, WIDTH } from './constants';
 export type IdType = string | number;
@@ -21,6 +22,10 @@ export type Segment<Value extends IdType = IdType> = {
      * Иконка сегмента.
      */
     icon?: ReactNode;
+    /**
+     * Иконка сегмента.
+     */
+    counter?: CounterProps['value'];
     /**
      * Render-обертка над сегментом.
      */

package/dist/esm/helperComponents/Segment/Segment.d.ts

@@ -7,5 +7,5 @@ type SegmentProps = SegmentType & {
     onGetFocusable?: (ref: HTMLButtonElement | null) => void;
     onSelectionUpdated: (element: HTMLButtonElement) => void;
 };
-export declare function Segment({ size, label, value, selected, onClick, disabled, icon, focusable, onGetFocusable, onSelectionUpdated, renderWrapSegment, }: SegmentProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function Segment({ size, label, value, selected, onClick, disabled, icon, counter, focusable, onGetFocusable, onSelectionUpdated, renderWrapSegment, }: SegmentProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { useEffect, useRef } from 'react';
+import { Counter } from '@snack-uikit/counter';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { getLayout } from '../../utils';
 import styles from './styles.module.css';
-export function Segment({ size, label, value, selected, onClick, disabled, icon, focusable, onGetFocusable, onSelectionUpdated, renderWrapSegment, }) {
+export function Segment({ size, label, value, selected, onClick, disabled, icon, counter, focusable, onGetFocusable, onSelectionUpdated, renderWrapSegment, }) {
     const buttonRef = useRef(null);
     useEffect(() => {
         if (focusable) {
@@ -16,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 })] }));
+    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, { size: 's', appearance: 'primary', value: counter })] }));
     return renderWrapSegment ? renderWrapSegment(segment) : segment;
 }

package/dist/esm/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { CounterProps } from '@snack-uikit/counter';
 import { ValueOf } from '@snack-uikit/utils';
 import { SIZE, WIDTH } from './constants';
 export type IdType = string | number;
@@ -21,6 +22,10 @@ export type Segment<Value extends IdType = IdType> = {
      * Иконка сегмента.
      */
     icon?: ReactNode;
+    /**
+     * Иконка сегмента.
+     */
+    counter?: CounterProps['value'];
     /**
      * Render-обертка над сегментом.
      */

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Segmented Control",
-  "version": "0.6.10",
+  "version": "0.6.11-preview-4eb2b89e.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,10 +36,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
+    "@snack-uikit/counter": "0.8.10",
     "@snack-uikit/truncate-string": "0.7.2",
     "@snack-uikit/utils": "4.0.0",
     "classnames": "2.5.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "6f4dbbdf91fdd49fc8a49ecf0be7a2e7e56ae73b"
+  "gitHead": "d46627c950a04cca650210be851e436e9994ca6a"
 }

package/src/helperComponents/Segment/Segment.tsx

@@ -1,6 +1,7 @@
 import cn from 'classnames';
 import { useEffect, useRef } from 'react';
 
+import { Counter } from '@snack-uikit/counter';
 import { TruncateString } from '@snack-uikit/truncate-string';
 
 import { Segment as SegmentType, Size } from '../../types';
@@ -24,6 +25,7 @@ export function Segment({
   onClick,
   disabled,
   icon,
+  counter,
   focusable,
   onGetFocusable,
   onSelectionUpdated,
@@ -61,6 +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 size='s' appearance='primary' value={counter} />}
     </button>
   );
 

package/src/types.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 
+import { CounterProps } from '@snack-uikit/counter';
 import { ValueOf } from '@snack-uikit/utils';
 
 import { SIZE, WIDTH } from './constants';
@@ -27,6 +28,10 @@ export type Segment<Value extends IdType = IdType> = {
    * Иконка сегмента.
    */
   icon?: ReactNode;
+  /**
+   * Иконка сегмента.
+   */
+  counter?: CounterProps['value'];
   /**
    * Render-обертка над сегментом.
    */