@snack-uikit/segmented-control 0.4.19 → 0.4.20-preview-2b94e286.0

package/README.md

@@ -22,6 +22,7 @@ SegmentedControl
 | size | enum Size: `"s"`, `"m"`, `"l"` | m | Размер компонента. |
 | outline | `boolean` | - | Обводка |
 | width | enum Width: `"auto"`, `"full"` | auto | Управление шириной компонента. |
+| name | `string` | - | Имя поля |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -33,8 +33,12 @@ export type SegmentedControlProps<Value extends IdType = IdType> = WithSupportPr
      * Управление шириной компонента.
      */
     width?: Width;
+    /**
+     * Имя поля
+     */
+    name?: string;
 }>;
 /**
  * SegmentedControl
  */
-export declare function SegmentedControl<Value extends IdType>({ defaultValue, size, className, onChange, items, value, outline, width, ...other }: SegmentedControlProps<Value>): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedControl<Value extends IdType>({ defaultValue, size, className, onChange, items, value, outline, width, name, ...other }: SegmentedControlProps<Value>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SegmentedControl.js

@@ -38,9 +38,10 @@ function SegmentedControl(_a) {
       items,
       value,
       outline,
-      width = constants_1.WIDTH.Auto
+      width = constants_1.WIDTH.Auto,
+      name
     } = _a,
-    other = __rest(_a, ["defaultValue", "size", "className", "onChange", "items", "value", "outline", "width"]);
+    other = __rest(_a, ["defaultValue", "size", "className", "onChange", "items", "value", "outline", "width", "name"]);
   const [selected, setSelected] = (0, uncontrollable_1.useUncontrolledProp)(value, defaultValue, onChange);
   const {
     focusableSegmentValue,
@@ -106,7 +107,11 @@ function SegmentedControl(_a) {
       "data-outline": outline || undefined,
       "data-width": width
     }, (0, utils_1.extractDataTestProps)(other), (0, utils_1.extractSupportProps)(other), {
-      children: [(0, jsx_runtime_1.jsx)("div", {
+      children: [name && (0, jsx_runtime_1.jsx)("input", {
+        type: 'hidden',
+        value: selected,
+        name: name
+      }), (0, jsx_runtime_1.jsx)("div", {
         "data-size": size,
         style: selectionPosition,
         className: styles_module_scss_1.default.selection,

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

@@ -33,8 +33,12 @@ export type SegmentedControlProps<Value extends IdType = IdType> = WithSupportPr
      * Управление шириной компонента.
      */
     width?: Width;
+    /**
+     * Имя поля
+     */
+    name?: string;
 }>;
 /**
  * SegmentedControl
  */
-export declare function SegmentedControl<Value extends IdType>({ defaultValue, size, className, onChange, items, value, outline, width, ...other }: SegmentedControlProps<Value>): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedControl<Value extends IdType>({ defaultValue, size, className, onChange, items, value, outline, width, name, ...other }: SegmentedControlProps<Value>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SegmentedControl.js

@@ -22,7 +22,7 @@ import styles from './styles.module.css';
  * SegmentedControl
  */
 export function SegmentedControl(_a) {
-    var { defaultValue, size = 'm', className, onChange, items, value, outline, width = WIDTH.Auto } = _a, other = __rest(_a, ["defaultValue", "size", "className", "onChange", "items", "value", "outline", "width"]);
+    var { defaultValue, size = 'm', className, onChange, items, value, outline, width = WIDTH.Auto, name } = _a, other = __rest(_a, ["defaultValue", "size", "className", "onChange", "items", "value", "outline", "width", "name"]);
     const [selected, setSelected] = useUncontrolledProp(value, defaultValue, onChange);
     const { focusableSegmentValue, onGetFocusable, onKeyDown } = useFocusControl({ selected, items });
     const containerRef = useRef(null);
@@ -60,5 +60,5 @@ export function SegmentedControl(_a) {
     const itemsJSX = useMemo(() => items.map(props => (_jsx("div", { className: styles.segmentHolder, "data-width": width, children: _jsx(Segment, Object.assign({}, props, { size: size, onGetFocusable: onGetFocusable, selected: selected === props.value, onClick: () => setSelected(props.value), focusable: focusableSegmentValue === props.value, onSelectionUpdated: updateSelectionPosition })) }, props.value))), [items, width, size, onGetFocusable, selected, focusableSegmentValue, updateSelectionPosition, setSelected]);
     return (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    _jsxs("div", Object.assign({ ref: containerRef, "data-size": size, onKeyDown: onKeyDown, className: cn(styles.container, className), role: 'radiogroup', "data-outline": outline || undefined, "data-width": width }, extractDataTestProps(other), extractSupportProps(other), { children: [_jsx("div", { "data-size": size, style: selectionPosition, className: styles.selection, "aria-hidden": true }), itemsJSX] })));
+    _jsxs("div", Object.assign({ ref: containerRef, "data-size": size, onKeyDown: onKeyDown, className: cn(styles.container, className), role: 'radiogroup', "data-outline": outline || undefined, "data-width": width }, extractDataTestProps(other), extractSupportProps(other), { children: [name && _jsx("input", { type: 'hidden', value: selected, name: name }), _jsx("div", { "data-size": size, style: selectionPosition, className: styles.selection, "aria-hidden": true }), itemsJSX] })));
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Segmented Control",
-  "version": "0.4.19",
+  "version": "0.4.20-preview-2b94e286.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -41,5 +41,5 @@
     "classnames": "2.5.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "e14c6ec6fbc59b086b7ed348403eb1bac740b9c3"
+  "gitHead": "c4c169513a2393af7ce64c9bdbca39a5d284faf4"
 }

package/src/components/SegmentedControl.tsx

@@ -43,6 +43,10 @@ export type SegmentedControlProps<Value extends IdType = IdType> = WithSupportPr
    * Управление шириной компонента.
    */
   width?: Width;
+  /**
+   * Имя поля
+   */
+  name?: string;
 }>;
 
 /**
@@ -57,6 +61,7 @@ export function SegmentedControl<Value extends IdType>({
   value,
   outline,
   width = WIDTH.Auto,
+  name,
   ...other
 }: SegmentedControlProps<Value>) {
   const [selected, setSelected] = useUncontrolledProp(value, defaultValue, onChange);
@@ -129,6 +134,7 @@ export function SegmentedControl<Value extends IdType>({
       {...extractDataTestProps(other)}
       {...extractSupportProps(other)}
     >
+      {name && <input type='hidden' value={selected} name={name} />}
       <div data-size={size} style={selectionPosition} className={styles.selection} aria-hidden={true} />
       {itemsJSX}
     </div>