ydb-embedded-ui 18.3.2 → 18.5.0

package/dist/containers/Tenant/TableFormDialog/columnValueValidation.js

@@ -0,0 +1,179 @@
+const INTEGER_REGEX = /^-?([0-9]|[1-9][0-9]+)$/;
+const DATE_MONTH_PART = '(0[1-9]|1[0-2])';
+const DATE_DAY_PART = '(0[1-9]|[12]\\d|3[0-1])';
+const DATE_PATTERN = `\\d{4}-${DATE_MONTH_PART}-${DATE_DAY_PART}`;
+const DATE32_PATTERN = `-?\\d{4,6}-${DATE_MONTH_PART}-${DATE_DAY_PART}`;
+const DATE_REGEX = new RegExp(`^${DATE_PATTERN}$`);
+const DATE32_REGEX = new RegExp(`^${DATE32_PATTERN}$`);
+const DATETIME_REGEX = new RegExp(`^${DATE_PATTERN}T\\d{2}:\\d{2}:\\d{2}Z$`);
+const DATETIME64_REGEX = new RegExp(`^${DATE32_PATTERN}T\\d{2}:\\d{2}:\\d{2}Z$`);
+const TIMESTAMP_REGEX = new RegExp(`^${DATE_PATTERN}T\\d{2}:\\d{2}:\\d{2}\\.\\d{1,6}Z$`);
+const TIMESTAMP64_REGEX = new RegExp(`^${DATE32_PATTERN}T\\d{2}:\\d{2}:\\d{2}\\.\\d{1,6}Z$`);
+const DATE_PARTS_REGEX = /^(-?\d{4,6})-(\d{2})-(\d{2})/;
+const TIME_PARTS_REGEX = /T(\d{2}):(\d{2}):(\d{2})(?:\.\d{1,6})?Z$/;
+const MIN_DATE_YEAR = 1970;
+const MAX_DATE_YEAR = 2106;
+const MIN_EXTENDED_DATE_YEAR = -144169;
+const MAX_EXTENDED_DATE_YEAR = 148107;
+function isInt(length, stringValue) {
+    if (!INTEGER_REGEX.test(stringValue)) {
+        return false;
+    }
+    const value = Number(stringValue);
+    return !Number.isNaN(value) && value >= -(2 ** length / 2) && value < 2 ** length / 2;
+}
+function isInt64(stringValue) {
+    if (!INTEGER_REGEX.test(stringValue)) {
+        return false;
+    }
+    const value = BigInt(stringValue);
+    const total = BigInt(2) ** BigInt(64);
+    const min = -(total / BigInt(2));
+    const max = total / BigInt(2);
+    return value >= min && value < max;
+}
+function isUInt(length, stringValue) {
+    if (!INTEGER_REGEX.test(stringValue)) {
+        return false;
+    }
+    const value = Number(stringValue);
+    return !Number.isNaN(value) && value >= 0 && value < 2 ** length;
+}
+function isUInt64(stringValue) {
+    if (!INTEGER_REGEX.test(stringValue)) {
+        return false;
+    }
+    const value = BigInt(stringValue);
+    const min = BigInt(0);
+    const max = BigInt(2) ** BigInt(64);
+    return value >= min && value < max;
+}
+function isLeapYear(year) {
+    return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+}
+function getDaysInMonth(year, month) {
+    switch (month) {
+        case 2:
+            return isLeapYear(year) ? 29 : 28;
+        case 4:
+        case 6:
+        case 9:
+        case 11:
+            return 30;
+        default:
+            return 31;
+    }
+}
+function getDateParts(stringValue) {
+    const parts = stringValue.match(DATE_PARTS_REGEX);
+    if (!parts) {
+        return undefined;
+    }
+    return {
+        year: parseInt(parts[1], 10),
+        month: parseInt(parts[2], 10),
+        day: parseInt(parts[3], 10),
+    };
+}
+function getTimeParts(stringValue) {
+    const parts = stringValue.match(TIME_PARTS_REGEX);
+    if (!parts) {
+        return undefined;
+    }
+    return {
+        hour: parseInt(parts[1], 10),
+        minute: parseInt(parts[2], 10),
+        second: parseInt(parts[3], 10),
+    };
+}
+function isDatePartsValid({ year, month, day }) {
+    return day <= getDaysInMonth(year, month);
+}
+function isTimePartsValid({ hour, minute, second }) {
+    return hour < 24 && minute < 60 && second < 60;
+}
+function isYearInRange(year, min, max) {
+    return year >= min && year <= max;
+}
+function isDateValueValid(stringValue, regex, minYear, maxYear) {
+    if (!regex.test(stringValue)) {
+        return false;
+    }
+    const dateParts = getDateParts(stringValue);
+    return Boolean(dateParts && isYearInRange(dateParts.year, minYear, maxYear) && isDatePartsValid(dateParts));
+}
+function isDateTimeValueValid(stringValue, regex, minYear, maxYear) {
+    if (!regex.test(stringValue)) {
+        return false;
+    }
+    const dateParts = getDateParts(stringValue);
+    const timeParts = getTimeParts(stringValue);
+    return Boolean(dateParts &&
+        timeParts &&
+        isYearInRange(dateParts.year, minYear, maxYear) &&
+        isDatePartsValid(dateParts) &&
+        isTimePartsValid(timeParts));
+}
+function isDate32(stringValue) {
+    return isDateValueValid(stringValue, DATE32_REGEX, MIN_EXTENDED_DATE_YEAR, MAX_EXTENDED_DATE_YEAR);
+}
+function isDatetime64(stringValue) {
+    return isDateTimeValueValid(stringValue, DATETIME64_REGEX, MIN_EXTENDED_DATE_YEAR, MAX_EXTENDED_DATE_YEAR);
+}
+function isTimestamp64(stringValue) {
+    return isDateTimeValueValid(stringValue, TIMESTAMP64_REGEX, MIN_EXTENDED_DATE_YEAR, MAX_EXTENDED_DATE_YEAR);
+}
+export function isValueForTypeValid(value, type) {
+    switch (type) {
+        case 'Bool':
+            return /^(true|false)$/i.test(value);
+        case 'Int8':
+            return isInt(8, value);
+        case 'Int16':
+            return isInt(16, value);
+        case 'Int32':
+            return isInt(32, value);
+        case 'Int64':
+        case 'Interval':
+        case 'Interval64':
+            return isInt64(value);
+        case 'Uint8':
+            return isUInt(8, value);
+        case 'Uint16':
+            return isUInt(16, value);
+        case 'Uint32':
+            return isUInt(32, value);
+        case 'Uint64':
+            return isUInt64(value);
+        case 'Uuid':
+            return /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value);
+        case 'Float':
+        case 'Double':
+        case 'Decimal(22,9)':
+            return /^-?\d+(\.\d+)?$/.test(value);
+        case 'Date':
+            return isDateValueValid(value, DATE_REGEX, MIN_DATE_YEAR, MAX_DATE_YEAR);
+        case 'Date32':
+            return isDate32(value);
+        case 'Datetime':
+            return isDateTimeValueValid(value, DATETIME_REGEX, MIN_DATE_YEAR, MAX_DATE_YEAR);
+        case 'Datetime64':
+            return isDatetime64(value);
+        case 'Timestamp':
+            return isDateTimeValueValid(value, TIMESTAMP_REGEX, MIN_DATE_YEAR, MAX_DATE_YEAR);
+        case 'Timestamp64':
+            return isTimestamp64(value);
+        case 'Json':
+        case 'JsonDocument':
+            try {
+                JSON.parse(value);
+                return true;
+            }
+            catch (_a) {
+                return false;
+            }
+        default:
+            return true;
+    }
+}
+//# sourceMappingURL=columnValueValidation.js.map

package/dist/containers/Tenant/TableFormDialog/columnValueValidation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columnValueValidation.js","sourceRoot":"","sources":["../../../../src/containers/Tenant/TableFormDialog/columnValueValidation.ts"],"names":[],"mappings":"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"}

package/dist/containers/Tenant/TableFormDialog/components/ColumnSelectorField.d.ts

@@ -0,0 +1,11 @@
+import type { Column } from '../types';
+import './ColumnSelectorField.scss';
+interface ColumnSelectorFieldProps {
+    value: string[];
+    onChange: (value: string[]) => void;
+    columns: Column[];
+    invalid?: boolean;
+    className?: string;
+}
+export declare function ColumnSelectorField({ value, onChange, columns, invalid, className, }: ColumnSelectorFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Tenant/TableFormDialog/components/ColumnSelectorField.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronDown, Xmark } from '@gravity-ui/icons';
+import { Button, Icon, Label, List, Popup } from '@gravity-ui/uikit';
+import { cn } from '../../../../utils/cn';
+import { BRAND_BUTTON_CLASS } from '../../../../utils/constants';
+import i18n from '../i18n';
+import './ColumnSelectorField.scss';
+const b = cn('ydb-table-form-column-selector');
+const getColumnId = (item) => item.name;
+const filterColumnItem = (filter) => (item) => {
+    const lower = filter.toLowerCase();
+    return item.name.toLowerCase().includes(lower);
+};
+function ItemSelector({ items, value, onUpdate }) {
+    const valueSet = React.useMemo(() => new Set(value), [value]);
+    const availableItems = React.useMemo(() => items.filter((item) => !valueSet.has(getColumnId(item))), [items, valueSet]);
+    const selectedItems = React.useMemo(() => value
+        .map((id) => items.find((item) => getColumnId(item) === id))
+        .filter(Boolean), [value, items]);
+    const handleSelect = React.useCallback((item) => {
+        const id = getColumnId(item);
+        if (!valueSet.has(id)) {
+            onUpdate([...value, id]);
+        }
+    }, [onUpdate, value, valueSet]);
+    const handleRemove = React.useCallback((item) => {
+        onUpdate(value.filter((v) => v !== getColumnId(item)));
+    }, [onUpdate, value]);
+    const handleSelectAll = React.useCallback(() => {
+        onUpdate(items.map(getColumnId));
+    }, [items, onUpdate]);
+    const handleClear = React.useCallback(() => {
+        onUpdate([]);
+    }, [onUpdate]);
+    const renderAvailableItem = React.useCallback((item, isActive) => (_jsxs("div", { className: b('selector-item'), children: [_jsx("span", { className: b('selector-item-text'), children: item.name }), _jsx(Button, { view: "flat-secondary", size: "s", className: b('selector-item-action', { visible: isActive }), onClick: (e) => {
+                    e.stopPropagation();
+                    handleSelect(item);
+                }, children: i18n('action_select') })] })), [handleSelect]);
+    const renderSelectedItem = React.useCallback((item, isActive) => (_jsxs("div", { className: b('selector-item'), children: [_jsx("span", { className: b('selector-item-text'), children: item.name }), _jsx(Button, { view: "flat-secondary", size: "s", className: b('selector-item-action', { visible: isActive }), onClick: (e) => {
+                    e.stopPropagation();
+                    handleRemove(item);
+                }, children: _jsx(Icon, { data: Xmark, size: 14 }) })] })), [handleRemove]);
+    return (_jsxs("div", { className: b('panels'), children: [_jsxs("div", { className: b('panel'), children: [_jsxs("div", { className: b('panel-header'), children: [_jsx("span", { className: b('panel-title'), children: i18n('label_columns') }), _jsx(Button, { view: "flat-secondary", size: "s", onClick: handleSelectAll, children: i18n('action_select-all') })] }), _jsx(List, { items: availableItems, filterItem: filterColumnItem, filterPlaceholder: i18n('label_search'), itemsHeight: 196, renderItem: renderAvailableItem })] }), _jsxs("div", { className: b('panel'), children: [_jsxs("div", { className: b('panel-header'), children: [_jsx("span", { className: b('panel-title'), children: i18n('label_selected-count', { count: selectedItems.length }) }), _jsx(Button, { view: "flat-secondary", size: "s", onClick: handleClear, children: i18n('action_clear') })] }), _jsx(List, { items: selectedItems, filterItem: filterColumnItem, filterPlaceholder: i18n('label_search'), itemsHeight: 196, renderItem: renderSelectedItem })] })] }));
+}
+export function ColumnSelectorField({ value, onChange, columns, invalid, className, }) {
+    const [open, setOpen] = React.useState(false);
+    const [currentValue, setCurrentValue] = React.useState(undefined);
+    const controlRef = React.useRef(null);
+    const items = React.useMemo(() => columns.filter(({ name }) => Boolean(name)), [columns]);
+    React.useEffect(() => {
+        setCurrentValue(undefined);
+    }, [value, columns]);
+    React.useEffect(() => {
+        if (!value.length) {
+            return;
+        }
+        const available = new Set(items.map(getColumnId));
+        const allPresent = value.every((id) => available.has(id));
+        if (!allPresent) {
+            onChange(value.filter((id) => available.has(id)));
+        }
+    }, [items, value, onChange]);
+    const handleToggle = React.useCallback(() => {
+        setOpen((prev) => !prev);
+        setCurrentValue(undefined);
+    }, []);
+    const handleApply = React.useCallback(() => {
+        setOpen(false);
+        if (currentValue !== undefined) {
+            onChange(currentValue);
+        }
+        setCurrentValue(undefined);
+    }, [currentValue, onChange]);
+    const handleCancel = React.useCallback(() => {
+        setOpen(false);
+        setCurrentValue(undefined);
+    }, []);
+    return (_jsxs("div", { className: b(null, className), children: [_jsxs("button", { ref: controlRef, type: "button", className: b('control', { open, invalid }), onClick: handleToggle, children: [value.length > 0 ? (_jsx("span", { className: b('value'), children: value.join(', ') })) : (_jsx("span", { className: b('placeholder'), children: i18n('label_select-columns') })), value.length > 0 ? (_jsx(Label, { size: "xs", className: b('badge'), children: value.length })) : null, _jsx(Icon, { data: ChevronDown, className: b('chevron', { open }), size: 16 })] }), _jsxs(Popup, { anchorElement: controlRef.current, placement: ['bottom-start', 'bottom-end', 'top-start', 'top-end'], open: open, onOutsideClick: handleCancel, onOpenChange: (isOpen) => {
+                    if (!isOpen) {
+                        handleCancel();
+                    }
+                }, children: [_jsx(ItemSelector, { items: items, value: currentValue !== null && currentValue !== void 0 ? currentValue : value, onUpdate: setCurrentValue }), _jsxs("div", { className: b('popup-controls'), children: [_jsx(Button, { view: "flat", onClick: handleCancel, children: i18n('action_cancel') }), _jsx(Button, { view: "action", className: BRAND_BUTTON_CLASS, onClick: handleApply, children: i18n('action_apply') })] })] })] }));
+}
+//# sourceMappingURL=ColumnSelectorField.js.map

package/dist/containers/Tenant/TableFormDialog/components/ColumnSelectorField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnSelectorField.js","sourceRoot":"","sources":["../../../../../src/containers/Tenant/TableFormDialog/components/ColumnSelectorField.tsx"],"names":[],"mappings":"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"}

package/dist/containers/Tenant/TableFormDialog/components/ColumnSelectorField.scss

@@ -0,0 +1,175 @@
+.ydb-table-form-column-selector {
+    position: relative;
+
+    width: 100%;
+
+    &__control {
+        position: relative;
+
+        display: flex;
+        overflow: hidden;
+        align-items: center;
+        gap: var(--g-spacing-1);
+
+        box-sizing: border-box;
+        width: 100%;
+        height: 28px;
+        padding: 6px 9px;
+
+        font-family: var(--g-text-body-font-family);
+        font-size: var(--g-text-body-short-font-size);
+        font-weight: var(--g-text-body-font-weight);
+        line-height: var(--g-text-body-short-line-height);
+        cursor: pointer;
+        text-align: left;
+
+        color: var(--g-color-text-primary);
+        border: none;
+        border-radius: var(--g-border-radius-m);
+        outline: none;
+        background: none;
+
+        &::before {
+            position: absolute;
+            inset: 0;
+
+            content: '';
+            pointer-events: none;
+
+            border: 1px solid var(--g-color-line-generic);
+            border-radius: var(--g-border-radius-m);
+        }
+
+        &:hover::before {
+            border-color: var(--g-color-line-generic-hover);
+            background-color: var(--g-color-base-simple-hover);
+        }
+
+        &_open::before,
+        &:focus-visible::before {
+            border-color: var(--g-color-line-generic-active);
+        }
+
+        &_invalid::before {
+            border-color: var(--g-color-line-danger);
+        }
+    }
+
+    &__value {
+        overflow: hidden;
+        flex: 1;
+
+        min-width: 0;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    &__placeholder {
+        overflow: hidden;
+        flex: 1;
+
+        min-width: 0;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        color: var(--g-color-text-hint);
+    }
+
+    &__badge {
+        flex-shrink: 0;
+    }
+
+    &__chevron {
+        flex: 0 0 16px;
+        flex-shrink: 0;
+
+        margin-inline-start: auto;
+
+        color: var(--g-color-text-secondary);
+
+        transition: transform 0.15s ease;
+
+        &_open {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__panels {
+        --g-list-item-padding: var(--g-spacing-1) var(--g-spacing-4);
+        display: flex;
+
+        min-height: 200px;
+    }
+
+    &__panel {
+        overflow: hidden;
+        flex: 0 0 50%;
+
+        padding-block-start: var(--g-spacing-2);
+
+        &:not(:last-child) {
+            border-inline-end: 1px solid var(--g-color-line-generic);
+        }
+    }
+
+    &__panel-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        min-height: 24px;
+        margin-block-end: var(--g-spacing-2);
+        padding: var(--g-list-item-padding, var(--g-spacing-1) var(--g-spacing-2));
+    }
+
+    &__panel-title {
+        font-weight: var(--g-text-accent-font-weight);
+
+        color: var(--g-color-text-primary);
+    }
+
+    &__selector-item {
+        display: flex;
+        overflow: hidden;
+        align-items: center;
+        gap: var(--g-spacing-1);
+
+        width: 100%;
+
+        &:hover &-action,
+        &:focus-within &-action {
+            visibility: visible;
+        }
+
+        &-text {
+            overflow: hidden;
+            flex: 1;
+
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        &-action {
+            visibility: hidden;
+            flex-shrink: 0;
+
+            border-radius: var(--g-border-radius-l);
+
+            &_visible {
+                visibility: visible;
+            }
+        }
+    }
+
+    &__popup-controls {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--g-spacing-2);
+
+        padding: var(--g-spacing-4);
+
+        border-top: 1px solid var(--g-color-line-generic);
+    }
+}

package/dist/containers/Tenant/TableFormDialog/components/RangeInputPicker.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import './RangeInputPicker.scss';
+interface RangeInputPickerProps {
+    value?: number;
+    min: number;
+    max: number;
+    step?: number;
+    marks?: number[];
+    markFormat?: (value: number) => string;
+    onUpdate: (value: number) => void;
+    acceptInputValue?: (value: string) => boolean;
+    parseInputValue?: (value: string) => number | undefined;
+    formatInputValue?: (value: number) => string;
+    disabled?: boolean;
+    endContent?: React.ReactNode;
+    className?: string;
+}
+export declare function RangeInputPicker({ value, min, max, step, marks, markFormat, onUpdate, acceptInputValue, parseInputValue, formatInputValue, disabled, endContent, className, }: RangeInputPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/containers/Tenant/TableFormDialog/components/RangeInputPicker.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Slider, TextInput } from '@gravity-ui/uikit';
+import { cn } from '../../../../utils/cn';
+import './RangeInputPicker.scss';
+const b = cn('ydb-range-input-picker');
+function clamp(value, min, max) {
+    if (value < min) {
+        return min;
+    }
+    if (value > max) {
+        return max;
+    }
+    return value;
+}
+function defaultAcceptInputValue(value) {
+    return /^\d*$/.test(value);
+}
+function defaultParseInputValue(value) {
+    return Number.parseInt(value, 10);
+}
+function defaultFormatInputValue(value) {
+    return String(value);
+}
+export function RangeInputPicker({ value, min, max, step = 1, marks, markFormat, onUpdate, acceptInputValue = defaultAcceptInputValue, parseInputValue = defaultParseInputValue, formatInputValue = defaultFormatInputValue, disabled, endContent, className, }) {
+    const hasNumericValue = typeof value === 'number' && Number.isFinite(value);
+    const displayValue = hasNumericValue ? formatInputValue(value) : '';
+    const [inputValue, setInputValue] = React.useState(displayValue);
+    const [isInputFocused, setIsInputFocused] = React.useState(false);
+    const [hasInputChanges, setHasInputChanges] = React.useState(false);
+    React.useEffect(() => {
+        if (!isInputFocused) {
+            setInputValue(displayValue);
+        }
+    }, [displayValue, isInputFocused]);
+    const sliderValue = React.useMemo(() => {
+        if (!isInputFocused || !hasInputChanges) {
+            return hasNumericValue ? clamp(value, min, max) : min;
+        }
+        const parsedDraft = parseInputValue(inputValue);
+        if (typeof parsedDraft === 'number' && !Number.isNaN(parsedDraft)) {
+            return clamp(parsedDraft, min, max);
+        }
+        return hasNumericValue ? clamp(value, min, max) : min;
+    }, [
+        hasInputChanges,
+        hasNumericValue,
+        inputValue,
+        isInputFocused,
+        max,
+        min,
+        parseInputValue,
+        value,
+    ]);
+    const handleSliderUpdate = React.useCallback((nextValue) => {
+        const normalizedValue = Array.isArray(nextValue) ? nextValue[0] : nextValue;
+        setInputValue(formatInputValue(normalizedValue));
+        onUpdate(normalizedValue);
+    }, [formatInputValue, onUpdate]);
+    const handleInputUpdate = React.useCallback((nextValue) => {
+        if (!acceptInputValue(nextValue)) {
+            return;
+        }
+        setInputValue(nextValue);
+        setHasInputChanges(true);
+        const parsedValue = parseInputValue(nextValue);
+        if (typeof parsedValue === 'number' &&
+            !Number.isNaN(parsedValue) &&
+            parsedValue >= min &&
+            parsedValue <= max) {
+            onUpdate(parsedValue);
+        }
+    }, [acceptInputValue, max, min, onUpdate, parseInputValue]);
+    const handleInputFocus = React.useCallback(() => {
+        setIsInputFocused(true);
+        setHasInputChanges(false);
+    }, []);
+    const handleInputBlur = React.useCallback(() => {
+        if (!hasInputChanges) {
+            setIsInputFocused(false);
+            setInputValue(displayValue);
+            return;
+        }
+        const fallbackValue = hasNumericValue ? clamp(value, min, max) : min;
+        let normalizedValue;
+        if (inputValue === '') {
+            normalizedValue = fallbackValue;
+        }
+        else {
+            const parsedValue = parseInputValue(inputValue);
+            if (typeof parsedValue !== 'number' || Number.isNaN(parsedValue)) {
+                normalizedValue = fallbackValue;
+            }
+            else {
+                normalizedValue = clamp(parsedValue, min, max);
+            }
+        }
+        setIsInputFocused(false);
+        setInputValue(formatInputValue(normalizedValue));
+        onUpdate(normalizedValue);
+    }, [
+        displayValue,
+        formatInputValue,
+        hasInputChanges,
+        hasNumericValue,
+        inputValue,
+        max,
+        min,
+        onUpdate,
+        parseInputValue,
+        value,
+    ]);
+    return (_jsxs("div", { className: b(null, className), children: [_jsx(TextInput, { value: inputValue, onUpdate: handleInputUpdate, onFocus: handleInputFocus, onBlur: handleInputBlur, disabled: disabled, endContent: endContent, className: b('input') }), _jsx(Slider, { value: sliderValue, min: min, max: max, step: step, size: "s", marks: marks, markFormat: markFormat, onUpdate: handleSliderUpdate, disabled: disabled, className: b('slider') })] }));
+}
+//# sourceMappingURL=RangeInputPicker.js.map

package/dist/containers/Tenant/TableFormDialog/components/RangeInputPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangeInputPicker.js","sourceRoot":"","sources":["../../../../../src/containers/Tenant/TableFormDialog/components/RangeInputPicker.tsx"],"names":[],"mappings":"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"}

package/dist/containers/Tenant/TableFormDialog/components/RangeInputPicker.scss

@@ -0,0 +1,22 @@
+.ydb-range-input-picker {
+    width: 100%;
+
+    &__input {
+        width: 100%;
+    }
+
+    &__slider {
+        position: relative;
+        z-index: 1;
+
+        margin-top: calc(-1 * var(--g-spacing-2));
+
+        .g-slider__top {
+            display: none;
+        }
+
+        .g-base-slider__rail {
+            visibility: hidden;
+        }
+    }
+}

package/dist/containers/Tenant/TableFormDialog/components/layout.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export declare function FormSection({ title, note, children, }: {
+    title?: string;
+    note?: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FormRow({ title, note, htmlFor, children, }: {
+    title?: string;
+    note?: string;
+    htmlFor?: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function FormFieldError({ message }: {
+    message?: string;
+}): import("react/jsx-runtime").JSX.Element | null;