@gravity-ui/dynamic-forms 1.9.0 → 1.9.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.9.2](https://github.com/gravity-ui/dynamic-forms/compare/v1.9.1...v1.9.2) (2023-06-13)
+
+
+### Bug Fixes
+
+* fix oneof and view layouts styles ([#62](https://github.com/gravity-ui/dynamic-forms/issues/62)) ([06794e2](https://github.com/gravity-ui/dynamic-forms/commit/06794e2a1891d9f630cb7a7820890f49f0bfcba1))
+
+## [1.9.1](https://github.com/gravity-ui/dynamic-forms/compare/v1.9.0...v1.9.1) (2023-06-07)
+
+
+### Bug Fixes
+
+* fixed styles for transperant and toggler oneof ([#60](https://github.com/gravity-ui/dynamic-forms/issues/60)) ([64ca12a](https://github.com/gravity-ui/dynamic-forms/commit/64ca12ad87ffd50fdda24901cd8f2e70e8c03868))
+
 ## [1.9.0](https://github.com/gravity-ui/dynamic-forms/compare/v1.8.1...v1.9.0) (2023-06-07)
 
 

package/build/cjs/lib/kit/components/Inputs/OneOf/OneOf.js

@@ -20,7 +20,7 @@ const OneOfComponent = (props) => {
             base: !props.withoutIndent,
             flat: props.withoutIndent,
         }) },
-        react_1.default.createElement("div", null, toggler),
+        toggler,
         specProperties[oneOfValue] ? (react_1.default.createElement(__1.GroupIndent, null,
             react_1.default.createElement(core_1.Controller, { value: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: props.input.parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null));
 };

package/build/cjs/lib/kit/components/Layouts/Transparent/Transparent.css

@@ -11,6 +11,9 @@
 .df-transparent_without-max-width {
   max-width: unset;
 }
+.df-transparent_without-max-width > .df-error-wrapper {
+  width: unset;
+}
 .df-transparent__remove-button {
   margin-left: 5px;
 }

package/build/cjs/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.css

@@ -2,6 +2,7 @@
   display: flex;
 }
 .df-view-table-cell__inner {
+  max-width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;

package/build/cjs/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.css

@@ -7,4 +7,7 @@
 }
 .df-view-transparent:hover > .df-copy-button {
   display: block;
+}
+.df-view-transparent__inner {
+  max-width: 100%;
 }

package/build/cjs/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.js

@@ -7,6 +7,6 @@ const kit_1 = require("../../../../kit");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('view-transparent');
 const ViewTransparent = ({ value, spec, children, }) => (0, utils_1.isNotEmptyValue)(value, spec) ? (react_1.default.createElement("div", { className: b() },
-    react_1.default.createElement("div", null, children),
+    react_1.default.createElement("div", { className: b('inner') }, children),
     react_1.default.createElement(kit_1.CopyButton, { spec: spec, value: value }))) : null;
 exports.ViewTransparent = ViewTransparent;

package/build/cjs/lib/kit/components/Views/OneOfView/OneOfView.css

@@ -1,6 +1,9 @@
 .df-oneof-view > .df-group-indent {
   margin-bottom: 20px;
 }
+.df-oneof-view:last-child > .df-group-indent {
+  margin-bottom: 0;
+}
 .df-oneof-view_flat > .df-group-indent {
   margin: 0 0 20px;
   border-left: none;

package/build/cjs/lib/kit/hooks/useOneOf/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useOneOf"), exports);

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

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

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

@@ -5,6 +5,8 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('use-oneof');
 const MAX_TAB_TITLE_LENGTH = 20;
 const useOneOf = ({ props, onTogglerChange }) => {
     var _a;
@@ -39,22 +41,28 @@ const useOneOf = ({ props, onTogglerChange }) => {
             content: title,
         };
     }), [spec.description, spec.viewSpec.order, specProperties]);
-    const togglerInput = react_1.default.useMemo(() => {
+    const selectToggler = react_1.default.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 ||
-                lodash_1.default.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH))) {
+                lodash_1.default.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_1.default.useMemo(() => {
+        if (selectToggler) {
             return (react_1.default.createElement(uikit_1.Select, { width: "max", value: [oneOfValue], onUpdate: onOneOfChange, options: options, disabled: spec.viewSpec.disabled, filterable: options.length > 7, qa: name }));
         }
         return (react_1.default.createElement(uikit_1.RadioButton, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (react_1.default.createElement(uikit_1.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_1.default.useMemo(() => {
         if (Layout) {
-            return react_1.default.createElement(Layout, Object.assign({}, props), togglerInput);
+            return (react_1.default.createElement("div", { className: b('toggler', {
+                    radio: !selectToggler,
+                }) },
+                react_1.default.createElement(Layout, Object.assign({}, props), togglerInput)));
         }
-        return togglerInput;
-    }, [Layout, togglerInput, props]);
+        return react_1.default.createElement("div", null, togglerInput);
+    }, [Layout, togglerInput, selectToggler, props]);
     return { oneOfValue, specProperties, toggler, togglerInput };
 };
 exports.useOneOf = useOneOf;

package/build/esm/lib/kit/components/Inputs/OneOf/OneOf.js

@@ -17,7 +17,7 @@ const OneOfComponent = (props) => {
             base: !props.withoutIndent,
             flat: props.withoutIndent,
         }) },
-        React.createElement("div", null, toggler),
+        toggler,
         specProperties[oneOfValue] ? (React.createElement(GroupIndent, null,
             React.createElement(Controller, { value: (_a = props.input.value) === null || _a === void 0 ? void 0 : _a[oneOfValue], spec: specProperties[oneOfValue], name: `${props.name}.${oneOfValue}`, parentOnChange: parentOnChange, parentOnUnmount: props.input.parentOnUnmount, key: `${props.name}.${oneOfValue}` }))) : null));
 };

package/build/esm/lib/kit/components/Layouts/Transparent/Transparent.css

@@ -11,6 +11,9 @@
 .df-transparent_without-max-width {
   max-width: unset;
 }
+.df-transparent_without-max-width > .df-error-wrapper {
+  width: unset;
+}
 .df-transparent__remove-button {
   margin-left: 5px;
 }

package/build/esm/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.css

@@ -2,6 +2,7 @@
   display: flex;
 }
 .df-view-table-cell__inner {
+  max-width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;

package/build/esm/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.css

@@ -7,4 +7,7 @@
 }
 .df-view-transparent:hover > .df-copy-button {
   display: block;
+}
+.df-view-transparent__inner {
+  max-width: 100%;
 }

package/build/esm/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.js

@@ -4,5 +4,5 @@ import { block, isNotEmptyValue } from '../../../utils';
 import './ViewTransparent.css';
 const b = block('view-transparent');
 export const ViewTransparent = ({ value, spec, children, }) => isNotEmptyValue(value, spec) ? (React.createElement("div", { className: b() },
-    React.createElement("div", null, children),
+    React.createElement("div", { className: b('inner') }, children),
     React.createElement(CopyButton, { spec: spec, value: value }))) : null;

package/build/esm/lib/kit/components/Views/OneOfView/OneOfView.css

@@ -1,6 +1,9 @@
 .df-oneof-view > .df-group-indent {
   margin-bottom: 20px;
 }
+.df-oneof-view:last-child > .df-group-indent {
+  margin-bottom: 0;
+}
 .df-oneof-view_flat > .df-group-indent {
   margin: 0 0 20px;
   border-left: none;

package/build/esm/lib/kit/hooks/useOneOf/index.d.ts

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

package/build/esm/lib/kit/hooks/useOneOf/index.js

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

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.9.0",
+  "version": "1.9.2",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",