fix: fixed styles for transperant and toggler oneof (#60)

Author: NasgulNexus

src/lib/kit/components/Inputs/OneOf/OneOf.tsx

@@ -44,7 +44,7 @@ const OneOfComponent: React.FC<OneOfProps> = (props) => {
                 flat: props.withoutIndent,
             })}
         >
-            <div>{toggler}</div>
+            {toggler}
             {specProperties[oneOfValue] ? (
                 <GroupIndent>
                     <Controller

src/lib/kit/components/Layouts/Transparent/Transparent.scss

@@ -14,6 +14,10 @@
 
     &_without-max-width {
         max-width: unset;
+
+        & > .df-error-wrapper {
+            width: unset;
+        }
     }
 
     &__remove-button {

src/lib/kit/hooks/useOneOf/index.ts

@@ -0,0 +1 @@
+export * from './useOneOf';

src/lib/kit/hooks/useOneOf/useOneOf.scss

@@ -0,0 +1,12 @@
+@import '../../styles/variables.scss';
+
+.#{$ns}use-oneof {
+    &__toggler {
+        &_radio {
+            & > .df-row {
+                width: unset;
+                max-width: unset;
+            }
+        }
+    }
+}

src/lib/kit/hooks/useOneOf.tsx src/lib/kit/hooks/useOneOf/useOneOf.tsxsrc/lib/kit/hooks/useOneOf.tsx renamed to src/lib/kit/hooks/useOneOf/useOneOf.tsx

@@ -3,7 +3,12 @@ import React from 'react';
 import {RadioButton, Select} from '@gravity-ui/uikit';
 import _ from 'lodash';
 
-import {ObjectIndependentInputProps} from '../../core';
+import {ObjectIndependentInputProps} from '../../../core';
+import {block} from '../../utils';
+
+import './useOneOf.scss';
+
+const b = block('use-oneof');
 
 const MAX_TAB_TITLE_LENGTH = 20;
 
@@ -63,13 +68,17 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
         [spec.description, spec.viewSpec.order, specProperties],
     );
 
-    const togglerInput = React.useMemo(() => {
-        if (
+    const selectToggler = React.useMemo(
+        () =>
             spec.viewSpec.oneOfParams?.toggler !== 'radio' &&
             (spec.viewSpec.oneOfParams?.toggler === 'select' ||
                 options.length > 3 ||
-                _.some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH))
-        ) {
+                _.some(options, ({title}) => title.length > MAX_TAB_TITLE_LENGTH)),
+        [options, spec.viewSpec.oneOfParams?.toggler],
+    );
+
+    const togglerInput = React.useMemo(() => {
+        if (selectToggler) {
             return (
                 <Select
                     width="max"
@@ -97,15 +106,23 @@ export const useOneOf = ({props, onTogglerChange}: UseOneOfParams) => {
                 ))}
             </RadioButton>
         );
-    }, [options, oneOfValue, onOneOfChange, name, spec.viewSpec.oneOfParams?.toggler]);
+    }, [selectToggler, oneOfValue, spec.viewSpec.disabled, name, options, onOneOfChange]);
 
     const toggler = React.useMemo(() => {
         if (Layout) {
-            return <Layout {...props}>{togglerInput}</Layout>;
+            return (
+                <div
+                    className={b('toggler', {
+                        radio: !selectToggler,
+                    })}
+                >
+                    <Layout {...props}>{togglerInput}</Layout>
+                </div>
+            );
         }
 
-        return togglerInput;
-    }, [Layout, togglerInput, props]);
+        return <div>{togglerInput}</div>;
+    }, [Layout, togglerInput, selectToggler, props]);
 
     return {oneOfValue, specProperties, toggler, togglerInput};
 };