@gravity-ui/dynamic-forms 5.16.0 → 5.17.1

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const unstable_1 = require("@gravity-ui/uikit/unstable");
+const ColorPicker = ({ input, spec, inputProps }) => {
+    const { value, onChange, onBlur, onFocus } = input;
+    const handleOpenChange = react_1.default.useCallback((open) => {
+        var _a;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(inputProps, open);
+        if (open) {
+            onFocus();
+        }
+        else {
+            onBlur();
+        }
+    }, [inputProps, onBlur, onFocus]);
+    return (react_1.default.createElement(unstable_1.unstable_ColorPicker, Object.assign({}, inputProps, { value: value || '', onUpdate: onChange, onOpenChange: handleOpenChange, disabled: spec.viewSpec.disabled })));
+};
+exports.ColorPicker = ColorPicker;

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

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

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

@@ -7,6 +7,7 @@ tslib_1.__exportStar(require("./Checkbox"), exports);
 tslib_1.__exportStar(require("./CheckboxGroup"), exports);
 tslib_1.__exportStar(require("./FileInput"), exports);
 tslib_1.__exportStar(require("./DateInput"), exports);
+tslib_1.__exportStar(require("./ColorPicker"), exports);
 tslib_1.__exportStar(require("./MonacoInput"), exports);
 tslib_1.__exportStar(require("./MultiOneOf"), exports);
 tslib_1.__exportStar(require("./MultiSelect"), exports);

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

@@ -0,0 +1,31 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
+.df-color-picker-view {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+.df-color-picker-view__preview {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-xs);
+}

package/build/cjs/lib/kit/components/Views/ColorPickerView/ColorPickerView.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPickerView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("../../../components");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('color-picker-view');
+const ColorPickerView = ({ value = '' }) => (react_1.default.createElement("div", { className: b() },
+    value ? react_1.default.createElement("div", { className: b('preview'), style: { backgroundColor: value } }) : null,
+    react_1.default.createElement(components_1.LongValue, { value: value })));
+exports.ColorPickerView = ColorPickerView;

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

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

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

@@ -6,6 +6,7 @@ tslib_1.__exportStar(require("./BaseView"), exports);
 tslib_1.__exportStar(require("./CheckboxGroupView"), exports);
 tslib_1.__exportStar(require("./CardOneOfView"), exports);
 tslib_1.__exportStar(require("./FileInputView"), exports);
+tslib_1.__exportStar(require("./ColorPickerView"), exports);
 tslib_1.__exportStar(require("./MonacoInputView"), exports);
 tslib_1.__exportStar(require("./MultiOneOfView"), exports);
 tslib_1.__exportStar(require("./MultiSelectView"), exports);

package/build/cjs/lib/kit/constants/config.js

@@ -103,6 +103,7 @@ exports.dynamicConfig = {
             base: { Component: components_1.Text },
             file_input: { Component: components_1.FileInput },
             date_input: { Component: components_1.DateInput },
+            color_picker: { Component: components_1.ColorPicker },
             number_with_scale: { Component: components_1.NumberWithScale },
             monaco_input: { Component: components_1.MonacoInput },
             text_content: { Component: components_1.TextContent, independent: true },
@@ -214,6 +215,7 @@ exports.dynamicViewConfig = {
             select: { Component: components_1.BaseView },
             base: { Component: components_1.BaseView },
             date_input: { Component: components_1.DateView },
+            color_picker: { Component: components_1.ColorPickerView },
             file_input: { Component: components_1.FileInputView },
             number_with_scale: { Component: components_1.NumberWithScaleView },
             monaco_input: { Component: components_1.MonacoView },

package/build/esm/lib/kit/components/Inputs/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { unstable_ColorPicker as ColorPickerBase } from '@gravity-ui/uikit/unstable';
+import type { StringInput } from '../../../../core';
+export interface ColorPickerProps extends Omit<React.ComponentProps<typeof ColorPickerBase>, 'value' | 'onUpdate' | 'disabled'> {
+}
+export declare const ColorPicker: StringInput<ColorPickerProps>;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { unstable_ColorPicker as ColorPickerBase } from '@gravity-ui/uikit/unstable';
+export const ColorPicker = ({ input, spec, inputProps }) => {
+    const { value, onChange, onBlur, onFocus } = input;
+    const handleOpenChange = React.useCallback((open) => {
+        var _a;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(inputProps, open);
+        if (open) {
+            onFocus();
+        }
+        else {
+            onBlur();
+        }
+    }, [inputProps, onBlur, onFocus]);
+    return (React.createElement(ColorPickerBase, Object.assign({}, inputProps, { value: value || '', onUpdate: onChange, onOpenChange: handleOpenChange, disabled: spec.viewSpec.disabled })));
+};

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

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

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

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

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

@@ -4,6 +4,7 @@ export * from './Checkbox';
 export * from './CheckboxGroup';
 export * from './FileInput';
 export * from './DateInput';
+export * from './ColorPicker';
 export * from './MonacoInput';
 export * from './MultiOneOf';
 export * from './MultiSelect';

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

@@ -4,6 +4,7 @@ export * from './Checkbox';
 export * from './CheckboxGroup';
 export * from './FileInput';
 export * from './DateInput';
+export * from './ColorPicker';
 export * from './MonacoInput';
 export * from './MultiOneOf';
 export * from './MultiSelect';

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

@@ -0,0 +1,31 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
+.df-color-picker-view {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+.df-color-picker-view__preview {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-xs);
+}

package/build/esm/lib/kit/components/Views/ColorPickerView/ColorPickerView.d.ts

@@ -0,0 +1,3 @@
+import type { StringView } from '../../../../core';
+import './ColorPickerView.css';
+export declare const ColorPickerView: StringView;

package/build/esm/lib/kit/components/Views/ColorPickerView/ColorPickerView.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { LongValue } from '../../../components';
+import { block } from '../../../utils';
+import './ColorPickerView.css';
+const b = block('color-picker-view');
+export const ColorPickerView = ({ value = '' }) => (React.createElement("div", { className: b() },
+    value ? React.createElement("div", { className: b('preview'), style: { backgroundColor: value } }) : null,
+    React.createElement(LongValue, { value: value })));

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

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

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

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

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

@@ -3,6 +3,7 @@ export * from './BaseView';
 export * from './CheckboxGroupView';
 export * from './CardOneOfView';
 export * from './FileInputView';
+export * from './ColorPickerView';
 export * from './MonacoInputView';
 export * from './MultiOneOfView';
 export * from './MultiSelectView';

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

@@ -3,6 +3,7 @@ export * from './BaseView';
 export * from './CheckboxGroupView';
 export * from './CardOneOfView';
 export * from './FileInputView';
+export * from './ColorPickerView';
 export * from './MonacoInputView';
 export * from './MultiOneOfView';
 export * from './MultiSelectView';

package/build/esm/lib/kit/constants/config.js

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, Column, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumInput, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, RadioGroup, RangeInputPicker, RangeInputPickerNumber, RangeInputPickerNumberView, RangeInputPickerView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextContentView, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewColumn, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, ColorPicker, ColorPickerView, Column, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumInput, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, RadioGroup, RangeInputPicker, RangeInputPickerNumber, RangeInputPickerNumberView, RangeInputPickerView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextContentView, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewColumn, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getNumberWithScaleValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -100,6 +100,7 @@ export const dynamicConfig = {
             base: { Component: Text },
             file_input: { Component: FileInput },
             date_input: { Component: DateInput },
+            color_picker: { Component: ColorPicker },
             number_with_scale: { Component: NumberWithScale },
             monaco_input: { Component: MonacoInput },
             text_content: { Component: TextContent, independent: true },
@@ -211,6 +212,7 @@ export const dynamicViewConfig = {
             select: { Component: BaseView },
             base: { Component: BaseView },
             date_input: { Component: DateView },
+            color_picker: { Component: ColorPickerView },
             file_input: { Component: FileInputView },
             number_with_scale: { Component: NumberWithScaleView },
             monaco_input: { Component: MonacoView },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "5.16.0",
+  "version": "5.17.1",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -60,7 +60,7 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^7.25.0",
+    "@gravity-ui/uikit": "^7.41.0",
     "@playwright/experimental-ct-react": "^1.40.0",
     "@playwright/test": "^1.40.0",
     "@storybook/addon-essentials": "^8.6.4",