@snack-uikit/segmented-control 0.1.4-preview-963c3343.0 → 0.2.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.2.0 (2024-09-09)
+
+
+### Features
+
+* **FF-0000:** improve segmented control value type ([e6f1d66](https://github.com/cloud-ru-tech/snack-uikit/commit/e6f1d66c132402a126d8b00a5918c1f3eb40f764))
+
+
+
+
+
+## 0.1.4 (2024-09-06)
+
+### Only dependencies have been changed
+* [@snack-uikit/truncate-string@0.4.21](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
 ## 0.1.3 (2024-08-01)
 
 

package/README.md

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

package/dist/components/SegmentedControl.d.ts

@@ -1,22 +1,22 @@
 import { WithSupportProps } from '@snack-uikit/utils';
 import { IdType, Segment as SegmentType, Size, Width } from '../types';
-export type SegmentedControlProps = WithSupportProps<{
+export type SegmentedControlProps<Value extends IdType = IdType> = WithSupportProps<{
     /**
      * Набор сегментов.
      */
-    items: SegmentType[];
+    items: SegmentType<Value>[];
     /**
      * Value выбранного сегмента.
      */
-    value?: IdType;
+    value?: Value;
     /**
      * ID выбранного по умолчанию сегмента. (в uncontrolled режиме)
      */
-    defaultValue?: IdType;
+    defaultValue?: Value;
     /**
      * Колбек смены выбранного сегмента.
      */
-    onChange?: (value: IdType) => void;
+    onChange?: (value: Value) => void;
     /**
      * CSS-класс контейнера.
      */
@@ -37,4 +37,4 @@ export type SegmentedControlProps = WithSupportProps<{
 /**
  * SegmentedControl
  */
-export declare function SegmentedControl({ defaultValue, size, className, onChange, items, value, outline, width, ...other }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedControl<Value extends IdType>({ defaultValue, size, className, onChange, items, value, outline, width, ...other }: SegmentedControlProps<Value>): import("react/jsx-runtime").JSX.Element;

package/dist/types.d.ts

@@ -4,11 +4,11 @@ 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 = {
+export type Segment<Value extends IdType = IdType> = {
     /**
      * Идентификатор сегмента.
      */
-    value: IdType;
+    value: Value;
     /**
      * Текстовый заголовок сегмента.
      */

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Segmented Control",
-  "version": "0.1.4-preview-963c3343.0",
+  "version": "0.2.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,10 +32,10 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/truncate-string": "0.4.21-preview-963c3343.0",
+    "@snack-uikit/truncate-string": "0.4.21",
     "@snack-uikit/utils": "3.3.0",
     "classnames": "2.5.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "dadc3669642ccf55bc0cb9cb700ba4457428cc0e"
+  "gitHead": "cfd6f6352e10e2000db375500ea301dc82fafc67"
 }

package/src/components/SegmentedControl.tsx

@@ -10,23 +10,23 @@ import { useFocusControl } from '../hooks';
 import { IdType, Segment as SegmentType, SelectionPosition, Size, Width } from '../types';
 import styles from './styles.module.scss';
 
-export type SegmentedControlProps = WithSupportProps<{
+export type SegmentedControlProps<Value extends IdType = IdType> = WithSupportProps<{
   /**
    * Набор сегментов.
    */
-  items: SegmentType[];
+  items: SegmentType<Value>[];
   /**
    * Value выбранного сегмента.
    */
-  value?: IdType;
+  value?: Value;
   /**
    * ID выбранного по умолчанию сегмента. (в uncontrolled режиме)
    */
-  defaultValue?: IdType;
+  defaultValue?: Value;
   /**
    * Колбек смены выбранного сегмента.
    */
-  onChange?: (value: IdType) => void;
+  onChange?: (value: Value) => void;
   /**
    * CSS-класс контейнера.
    */
@@ -48,7 +48,7 @@ export type SegmentedControlProps = WithSupportProps<{
 /**
  * SegmentedControl
  */
-export function SegmentedControl({
+export function SegmentedControl<Value extends IdType>({
   defaultValue,
   size = 'm',
   className,
@@ -58,7 +58,7 @@ export function SegmentedControl({
   outline,
   width = WIDTH.Auto,
   ...other
-}: SegmentedControlProps) {
+}: SegmentedControlProps<Value>) {
   const [selected, setSelected] = useUncontrolledProp(value, defaultValue, onChange);
   const { focusableSegmentValue, onGetFocusable, onKeyDown } = useFocusControl({ selected, items });
   const containerRef = useRef<HTMLDivElement>(null);

package/src/types.ts

@@ -10,11 +10,11 @@ export type Size = ValueOf<typeof SIZE>;
 
 export type Width = ValueOf<typeof WIDTH>;
 
-export type Segment = {
+export type Segment<Value extends IdType = IdType> = {
   /**
    * Идентификатор сегмента.
    */
-  value: IdType;
+  value: Value;
   /**
    * Текстовый заголовок сегмента.
    */