@gravity-ui/dynamic-forms 1.8.1 → 1.9.1

package/build/esm/lib/kit/hooks/useOneOf/useOneOf.css

@@ -0,0 +1,4 @@
+.df-use-oneof__toggler_radio > .df-row {
+  width: unset;
+  max-width: unset;
+}

package/build/esm/lib/kit/hooks/{useOneOf.d.ts → useOneOf/useOneOf.d.ts}

@@ -1,11 +1,12 @@
-import { ObjectIndependentInputProps } from '../../core';
+import { ObjectIndependentInputProps } from '../../../core';
+import './useOneOf.css';
 export interface UseOneOfParams {
     props: ObjectIndependentInputProps;
     onTogglerChange?: (value: string) => void;
 }
 export declare const useOneOf: ({ props, onTogglerChange }: UseOneOfParams) => {
     oneOfValue: string;
-    specProperties: Record<string, import("../../core").Spec>;
+    specProperties: Record<string, import("../../../core").Spec>;
     toggler: JSX.Element;
     togglerInput: JSX.Element;
 };

package/build/esm/lib/kit/hooks/{useOneOf.js → useOneOf/useOneOf.js}

@@ -1,6 +1,9 @@
 import React from 'react';
 import { RadioButton, Select } from '@gravity-ui/uikit';
 import _ from 'lodash';
+import { block } from '../../utils';
+import './useOneOf.css';
+const b = block('use-oneof');
 const MAX_TAB_TITLE_LENGTH = 20;
 export const useOneOf = ({ props, onTogglerChange }) => {
     var _a;
@@ -35,21 +38,27 @@ export const useOneOf = ({ props, onTogglerChange }) => {
             content: title,
         };
     }), [spec.description, spec.viewSpec.order, specProperties]);
-    const togglerInput = React.useMemo(() => {
+    const selectToggler = React.useMemo(() => {
         var _a, _b;
-        if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) !== 'radio' &&
+        return ((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) !== 'radio' &&
             (((_b = spec.viewSpec.oneOfParams) === null || _b === void 0 ? void 0 : _b.toggler) === 'select' ||
                 options.length > 3 ||
-                _.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH))) {
+                _.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH));
+    }, [options, (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler]);
+    const togglerInput = React.useMemo(() => {
+        if (selectToggler) {
             return (React.createElement(Select, { width: "max", value: [oneOfValue], onUpdate: onOneOfChange, options: options, disabled: spec.viewSpec.disabled, filterable: options.length > 7, qa: name }));
         }
         return (React.createElement(RadioButton, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (React.createElement(RadioButton.Option, { key: option.value, value: option.value }, option.title)))));
-    }, [options, oneOfValue, onOneOfChange, name, (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler]);
+    }, [selectToggler, oneOfValue, spec.viewSpec.disabled, name, options, onOneOfChange]);
     const toggler = React.useMemo(() => {
         if (Layout) {
-            return React.createElement(Layout, Object.assign({}, props), togglerInput);
+            return (React.createElement("div", { className: b('toggler', {
+                    radio: !selectToggler,
+                }) },
+                React.createElement(Layout, Object.assign({}, props), togglerInput)));
         }
-        return togglerInput;
-    }, [Layout, togglerInput, props]);
+        return React.createElement("div", null, togglerInput);
+    }, [Layout, togglerInput, selectToggler, props]);
     return { oneOfValue, specProperties, toggler, togglerInput };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "1.8.1",
+  "version": "1.9.1",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -57,6 +57,7 @@
     "@storybook/react": "^6.5.16",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.180",
     "@types/react": "^18.0.28",