@gravity-ui/dynamic-forms 2.3.0 → 2.4.0

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

@@ -11,9 +11,6 @@
 .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/TogglerCard/TogglerCard.css

@@ -0,0 +1,18 @@
+.df-toggler-card {
+  width: 254px;
+  padding: 10px;
+  height: 88px;
+}
+.df-toggler-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+.df-toggler-card__text {
+  margin-top: 12px;
+  display: block;
+  margin-right: 15px;
+  height: 36px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/build/cjs/lib/kit/components/TogglerCard/TogglerCard.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TogglerCard = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("@gravity-ui/components");
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('toggler-card');
+const TogglerCard = ({ description, title, text, onClick, disabled, selected, }) => {
+    return (react_1.default.createElement(uikit_1.Card, { onClick: onClick, type: "selection", disabled: disabled ? !selected : disabled, selected: selected, size: "m", className: b() },
+        react_1.default.createElement("div", { className: b('header') },
+            react_1.default.createElement(uikit_1.Text, { variant: "subheader-2", ellipsis: true }, title),
+            description ? (react_1.default.createElement(components_1.HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] })) : null),
+        react_1.default.createElement(uikit_1.Text, { variant: "body-1", color: "secondary", className: b('text') }, text)));
+};
+exports.TogglerCard = TogglerCard;

package/build/cjs/lib/kit/components/TogglerCard/index.js

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

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

@@ -10,4 +10,5 @@
 }
 .df-view-transparent__inner {
   max-width: 100%;
+  width: 100%;
 }

package/build/cjs/lib/kit/components/index.js

@@ -10,5 +10,6 @@ tslib_1.__exportStar(require("./Inputs"), exports);
 tslib_1.__exportStar(require("./Layouts"), exports);
 tslib_1.__exportStar(require("./LongValue"), exports);
 tslib_1.__exportStar(require("./SimpleVerticalAccordeon"), exports);
+tslib_1.__exportStar(require("./TogglerCard"), exports);
 tslib_1.__exportStar(require("./Views"), exports);
 tslib_1.__exportStar(require("./ViewLayouts"), exports);

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

@@ -1,4 +1,14 @@
 .df-use-oneof__toggler_radio > .df-row {
   width: unset;
   max-width: unset;
+}
+.df-use-oneof__toggler_card + .df-group-indent > .df-use-search:not(.df-group-indent) {
+  padding-top: 0px;
+  margin-top: 15px;
+}
+.df-use-oneof__card {
+  display: flex;
+}
+.df-use-oneof__card > :first-child {
+  margin-right: 8px;
 }

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

@@ -5,6 +5,7 @@ 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 components_1 = require("../../components");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('use-oneof');
 const MAX_TAB_TITLE_LENGTH = 20;
@@ -41,28 +42,52 @@ const useOneOf = ({ props, onTogglerChange }) => {
             content: title,
         };
     }), [spec.description, spec.viewSpec.order, specProperties]);
-    const selectToggler = react_1.default.useMemo(() => {
-        var _a, _b;
-        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' ||
+    const togglerType = react_1.default.useMemo(() => {
+        var _a, _b, _c;
+        if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) === 'card' && options.length < 3) {
+            return 'card';
+        }
+        if (((_b = spec.viewSpec.oneOfParams) === null || _b === void 0 ? void 0 : _b.toggler) !== 'radio' &&
+            (((_c = spec.viewSpec.oneOfParams) === null || _c === void 0 ? void 0 : _c.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))) {
+            return 'select';
+        }
+        return 'radio';
     }, [options, (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler]);
     const togglerInput = react_1.default.useMemo(() => {
-        if (selectToggler) {
+        if (togglerType === 'card') {
+            return (react_1.default.createElement("div", { className: b('card') }, options.map(({ value }) => {
+                var _a, _b, _c;
+                const onClick = () => {
+                    onOneOfChange([value]);
+                };
+                return (react_1.default.createElement(components_1.TogglerCard, { title: ((_a = specProperties[value]) === null || _a === void 0 ? void 0 : _a.viewSpec.layoutTitle) || '', disabled: spec.viewSpec.disabled, text: ((_b = spec.description) === null || _b === void 0 ? void 0 : _b[value]) || '', description: (_c = specProperties[value]) === null || _c === void 0 ? void 0 : _c.viewSpec.layoutDescription, onClick: onClick, selected: oneOfValue === value, key: value }));
+            })));
+        }
+        if (togglerType === 'select') {
             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)))));
-    }, [selectToggler, oneOfValue, spec.viewSpec.disabled, name, options, onOneOfChange]);
+    }, [
+        togglerType,
+        oneOfValue,
+        spec.viewSpec.disabled,
+        name,
+        options,
+        onOneOfChange,
+        specProperties,
+    ]);
     const toggler = react_1.default.useMemo(() => {
         if (Layout) {
             return (react_1.default.createElement("div", { className: b('toggler', {
-                    radio: !selectToggler,
+                    radio: togglerType === 'radio',
+                    card: togglerType === 'card',
                 }) },
                 react_1.default.createElement(Layout, Object.assign({}, props), togglerInput)));
         }
         return react_1.default.createElement("div", null, togglerInput);
-    }, [Layout, togglerInput, selectToggler, props]);
+    }, [Layout, togglerInput, togglerType, props]);
     return { oneOfValue, specProperties, toggler, togglerInput };
 };
 exports.useOneOf = useOneOf;

package/build/esm/lib/core/types/specs.d.ts

@@ -81,7 +81,7 @@ export interface ObjectSpec<LinkType = any> {
         order?: string[];
         link?: LinkType;
         oneOfParams?: {
-            toggler?: 'select' | 'radio';
+            toggler?: 'select' | 'radio' | 'card';
         };
         placeholder?: string;
     };

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

@@ -11,9 +11,6 @@
 .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/TogglerCard/TogglerCard.css

@@ -0,0 +1,18 @@
+.df-toggler-card {
+  width: 254px;
+  padding: 10px;
+  height: 88px;
+}
+.df-toggler-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+.df-toggler-card__text {
+  margin-top: 12px;
+  display: block;
+  margin-right: 15px;
+  height: 36px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/build/esm/lib/kit/components/TogglerCard/TogglerCard.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './TogglerCard.css';
+interface TogglerCardProps {
+    description?: string;
+    title: string;
+    text: string;
+    onClick: () => void;
+    disabled?: boolean;
+    selected: boolean;
+}
+export declare const TogglerCard: React.FC<TogglerCardProps>;
+export {};

package/build/esm/lib/kit/components/TogglerCard/TogglerCard.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { HelpPopover } from '@gravity-ui/components';
+import { Card, Text } from '@gravity-ui/uikit';
+import { block } from '../../utils';
+import './TogglerCard.css';
+const b = block('toggler-card');
+export const TogglerCard = ({ description, title, text, onClick, disabled, selected, }) => {
+    return (React.createElement(Card, { onClick: onClick, type: "selection", disabled: disabled ? !selected : disabled, selected: selected, size: "m", className: b() },
+        React.createElement("div", { className: b('header') },
+            React.createElement(Text, { variant: "subheader-2", ellipsis: true }, title),
+            description ? (React.createElement(HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] })) : null),
+        React.createElement(Text, { variant: "body-1", color: "secondary", className: b('text') }, text)));
+};

package/build/esm/lib/kit/components/TogglerCard/index.d.ts

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

package/build/esm/lib/kit/components/TogglerCard/index.js

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

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

@@ -10,4 +10,5 @@
 }
 .df-view-transparent__inner {
   max-width: 100%;
+  width: 100%;
 }

package/build/esm/lib/kit/components/index.d.ts

@@ -7,5 +7,6 @@ export * from './Inputs';
 export * from './Layouts';
 export * from './LongValue';
 export * from './SimpleVerticalAccordeon';
+export * from './TogglerCard';
 export * from './Views';
 export * from './ViewLayouts';

package/build/esm/lib/kit/components/index.js

@@ -7,5 +7,6 @@ export * from './Inputs';
 export * from './Layouts';
 export * from './LongValue';
 export * from './SimpleVerticalAccordeon';
+export * from './TogglerCard';
 export * from './Views';
 export * from './ViewLayouts';

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

@@ -1,4 +1,14 @@
 .df-use-oneof__toggler_radio > .df-row {
   width: unset;
   max-width: unset;
+}
+.df-use-oneof__toggler_card + .df-group-indent > .df-use-search:not(.df-group-indent) {
+  padding-top: 0px;
+  margin-top: 15px;
+}
+.df-use-oneof__card {
+  display: flex;
+}
+.df-use-oneof__card > :first-child {
+  margin-right: 8px;
 }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { RadioButton, Select } from '@gravity-ui/uikit';
 import _ from 'lodash';
+import { TogglerCard } from '../../components';
 import { block } from '../../utils';
 import './useOneOf.css';
 const b = block('use-oneof');
@@ -38,27 +39,51 @@ export const useOneOf = ({ props, onTogglerChange }) => {
             content: title,
         };
     }), [spec.description, spec.viewSpec.order, specProperties]);
-    const selectToggler = React.useMemo(() => {
-        var _a, _b;
-        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' ||
+    const togglerType = React.useMemo(() => {
+        var _a, _b, _c;
+        if (((_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler) === 'card' && options.length < 3) {
+            return 'card';
+        }
+        if (((_b = spec.viewSpec.oneOfParams) === null || _b === void 0 ? void 0 : _b.toggler) !== 'radio' &&
+            (((_c = spec.viewSpec.oneOfParams) === null || _c === void 0 ? void 0 : _c.toggler) === 'select' ||
                 options.length > 3 ||
-                _.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH));
+                _.some(options, ({ title }) => title.length > MAX_TAB_TITLE_LENGTH))) {
+            return 'select';
+        }
+        return 'radio';
     }, [options, (_a = spec.viewSpec.oneOfParams) === null || _a === void 0 ? void 0 : _a.toggler]);
     const togglerInput = React.useMemo(() => {
-        if (selectToggler) {
+        if (togglerType === 'card') {
+            return (React.createElement("div", { className: b('card') }, options.map(({ value }) => {
+                var _a, _b, _c;
+                const onClick = () => {
+                    onOneOfChange([value]);
+                };
+                return (React.createElement(TogglerCard, { title: ((_a = specProperties[value]) === null || _a === void 0 ? void 0 : _a.viewSpec.layoutTitle) || '', disabled: spec.viewSpec.disabled, text: ((_b = spec.description) === null || _b === void 0 ? void 0 : _b[value]) || '', description: (_c = specProperties[value]) === null || _c === void 0 ? void 0 : _c.viewSpec.layoutDescription, onClick: onClick, selected: oneOfValue === value, key: value }));
+            })));
+        }
+        if (togglerType === 'select') {
             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)))));
-    }, [selectToggler, oneOfValue, spec.viewSpec.disabled, name, options, onOneOfChange]);
+    }, [
+        togglerType,
+        oneOfValue,
+        spec.viewSpec.disabled,
+        name,
+        options,
+        onOneOfChange,
+        specProperties,
+    ]);
     const toggler = React.useMemo(() => {
         if (Layout) {
             return (React.createElement("div", { className: b('toggler', {
-                    radio: !selectToggler,
+                    radio: togglerType === 'radio',
+                    card: togglerType === 'card',
                 }) },
                 React.createElement(Layout, Object.assign({}, props), togglerInput)));
         }
         return React.createElement("div", null, togglerInput);
-    }, [Layout, togglerInput, selectToggler, props]);
+    }, [Layout, togglerInput, togglerType, props]);
     return { oneOfValue, specProperties, toggler, togglerInput };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",