devexpress-reporting-react 24.1.2-beta

package/dx-report-viewer/components/analytics/Properties/CollectionEditor/CollectionEditor.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ICollectionEditorOptions } from '@devexpress/analytics-core/property-grid/widgets/collectioneditor/_editor';
+declare const CollectionEditorWrapper: React.FC<{
+    data: ICollectionEditorOptions;
+    contentTemplate: ({ data }: {
+        data: any;
+    }) => React.ReactNode;
+}>;
+export default CollectionEditorWrapper;

package/dx-report-viewer/components/analytics/Properties/CollectionEditor/CollectionEditor.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import Button from 'devextreme-react/button';
+import Template from '../../../core/Template';
+import ScrollView from 'devextreme-react/scroll-view';
+import { CollectionEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/collectioneditor/_editor';
+import useDxAccordion from '../../../../hooks/dxAccordion';
+import useDxMutationObserver from '../../../../hooks/dxMutationObserver';
+import useDxAction from '../../../../hooks/dxAction';
+import useDxForceRerender from '../../../../hooks/dxForceRerender';
+import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
+const Action = ({ value, contentTemplate }) => {
+    const ref = React.useRef();
+    useDxAction(ref, value.select, value);
+    return (React.createElement("div", { ref: ref, className: `dx-collectioneditor-item-container dxd-button-back-color dxd-state-normal dxd-back-highlighted dx-accessibility-list-item dx-accessibility-focus-border-accented ${value.selected ? 'dxd-state-selected' : ''}`, "aria-selected": value.selected },
+        React.createElement("div", { className: "dx-collection-item" }, contentTemplate({ data: value }))));
+};
+const CollectionEditorActions = ({ data }) => {
+    if (!data.showButtons)
+        return undefined;
+    return (React.createElement("div", { className: "dx-collectioneditor-actions-wrapper" },
+        data.buttons.up.visible && React.createElement(Button, { className: "dx-collectioneditor-action dx-accessibility-focus-border-accented", onClick: data.buttons.up.action, disabled: data.buttons.up.disabled, icon: "dxrd-svg-operations-moveup", template: data.buttons.up.template, hint: data.buttons.up.text }),
+        data.buttons.down.visible && React.createElement(Button, { className: "dx-collectioneditor-action dx-accessibility-focus-border-accented", onClick: data.buttons.down.action, disabled: data.buttons.down.disabled, icon: "dxrd-svg-operations-movedown", template: data.buttons.down.template, hint: data.buttons.down.text }),
+        React.createElement("div", { className: "dx-collectioneditor-action-separator" }),
+        data.buttons.add.visible && React.createElement(Button, { className: "dx-collectioneditor-action dx-accessibility-focus-border-accented", onClick: data.buttons.add.action, disabled: data.buttons.add.disabled, template: data.buttons.add.template, icon: "dxrd-svg-operations-add", hint: data.buttons.add.text }),
+        data.buttons.delete.visible && React.createElement(Button, { className: "dx-collectioneditor-action dx-accessibility-focus-border-accented", onClick: data.buttons.delete.action, disabled: data.buttons.delete.disabled, template: data.buttons.delete.template, icon: "dxrd-svg-operations-remove", hint: data.buttons.delete.text })));
+};
+const CollectionEditorWrapper = ({ data, contentTemplate }) => {
+    const [viewModel, setViewModel] = React.useState();
+    const forceRerender = useDxForceRerender();
+    React.useEffect(() => {
+        const editorModel = new CollectionEditorViewModel(data);
+        const editorViewModel = editorModel.getViewModel();
+        const subscription = editorViewModel._viewModelEvents.on(ViewModelChangedEvent, forceRerender);
+        setViewModel(editorViewModel);
+        return () => {
+            subscription && subscription();
+            editorModel === null || editorModel === void 0 ? void 0 : editorModel.dispose();
+            setViewModel(null);
+        };
+    }, []);
+    if (!viewModel)
+        return undefined;
+    return React.createElement(CollectionEditor, { viewModel: viewModel, contentTemplate: contentTemplate });
+};
+const CollectionEditor = ({ viewModel, contentTemplate }) => {
+    const onScrollViewInitialized = (args) => {
+        args.component.option('useKeyboard', false);
+    };
+    const ref = React.useRef();
+    useDxAccordion(ref, viewModel);
+    useDxMutationObserver(ref, viewModel.keyboardHelper);
+    return (React.createElement("div", { className: "dx-collectioneditor" },
+        React.createElement("div", { ref: ref },
+            React.createElement("div", { className: "dx-collectioneditor-header dx-accordion-header" },
+                React.createElement("div", { className: "dx-editor-header" },
+                    React.createElement("div", { role: "treeitem", className: "dx-field dx-accessibility-focus-border-accented dxrd-accessibility-accordion-trigger", "aria-expanded": viewModel.alwaysShow || !viewModel.collapsed ? 'true' : 'false', "aria-owns": viewModel.contentId, id: viewModel.headerId },
+                        React.createElement(CollectionEditorActions, { data: viewModel }),
+                        !!viewModel.displayName && React.createElement("div", { className: "dx-collectioneditor-header-text dxd-text-primary", style: { paddingLeft: viewModel.padding + 'px' } },
+                            React.createElement(Template, { className: `dx-collapsing-image dxrd-display-inline-block ${!viewModel.collapsed ? 'dx-image-expanded' : ''}`, template: "dxrd-svg-collapsed" }),
+                            React.createElement("div", { className: "dx-group-header-font dxd-text-primary dxrd-display-inline-block", title: viewModel.displayName }, viewModel.displayName))))),
+            React.createElement("div", { role: "group", className: "dx-accordion-content", "aria-hidden": !viewModel.alwaysShow && viewModel.collapsed ? 'true' : 'false', "aria-labelledby": viewModel.headerId, id: viewModel.contentId },
+                React.createElement("div", { hidden: viewModel.disabled },
+                    React.createElement(ScrollView, { showScrollbar: "onHover", disabled: !viewModel.showScroll, useNative: false, scrollByThumb: true, onInitialized: onScrollViewInitialized }, viewModel.values.length === 0 ? React.createElement("div", { className: "dx-collectioneditor-empty dxd-empty-area-placeholder-text-color dxd-text-info" },
+                        React.createElement("span", { className: "dx-collectioneditor-empty-text" }, viewModel.emptyAreaText)) : React.createElement("div", { className: "dx-collectioneditor-items" }, viewModel.values.map(value => React.createElement(Action, { value: value, key: value.value.key, contentTemplate: contentTemplate })))))))));
+};
+export default CollectionEditorWrapper;

package/dx-report-viewer/components/analytics/Properties/CollectionEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CollectionEditor';
+export { default } from './CollectionEditor';

package/dx-report-viewer/components/analytics/Properties/CollectionEditor/index.js

@@ -0,0 +1,2 @@
+export * from './CollectionEditor';
+export { default } from './CollectionEditor';

package/dx-report-viewer/components/analytics/Properties/EditorDescriptionPopover/EditorDescriptionPopover.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IPopoverViewModel } from '@devexpress/analytics-core/core/widgets/popover';
+declare const EditorDescriptionPopover: React.FC<{
+    data: IPopoverViewModel;
+}>;
+export default EditorDescriptionPopover;

package/dx-report-viewer/components/analytics/Properties/EditorDescriptionPopover/EditorDescriptionPopover.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Popover } from 'devextreme-react/popover';
+const EditorDescriptionPopover = ({ data }) => {
+    const ref = React.useRef();
+    const [container, setContainer] = React.useState();
+    React.useEffect(() => {
+        const element = ref.current.instance().element();
+        setContainer(data.getPopupContainer(element));
+    }, [data]);
+    return (React.createElement(Popover, { ref: ref, container: container, target: data.target, position: "bottom", showCloseButton: false, onHiding: data.onHiding, hideOnOutsideClick: true, hideOnParentScroll: true, width: "350px", visible: data.visible },
+        React.createElement("div", { className: "propertygrid-editor-description-popover-content" },
+            React.createElement("span", null, data.data))));
+};
+export default EditorDescriptionPopover;

package/dx-report-viewer/components/analytics/Properties/EditorDescriptionPopover/index.d.ts

@@ -0,0 +1,2 @@
+export * from './EditorDescriptionPopover';
+export { default } from './EditorDescriptionPopover';

package/dx-report-viewer/components/analytics/Properties/EditorDescriptionPopover/index.js

@@ -0,0 +1,2 @@
+export * from './EditorDescriptionPopover';
+export { default } from './EditorDescriptionPopover';

package/dx-report-viewer/components/analytics/Properties/Editors/BoolSelect/BoolSelectEditor.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/editor';
+declare const BoolSelectEditor: React.FC<{
+    data: IEditorViewModel;
+}>;
+export default BoolSelectEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/BoolSelect/BoolSelectEditor.js

@@ -0,0 +1,19 @@
+import { SelectBoxEditorBase } from '../SelectBox';
+import { getLocalization } from '@devexpress/analytics-core/property-grid/localization/_localization';
+const BoolSelectEditor = ({ data }) => {
+    const getEditorOptions = () => ({
+        dataSource: [{
+                val: true,
+                text: getLocalization('Yes', 'AnalyticsCoreStringId.ParametersPanel_True')
+            }, {
+                val: false, text: getLocalization('No', 'AnalyticsCoreStringId.ParametersPanel_False')
+            }],
+        inputAttr: { 'aria-label': data.displayName, id: data.editorInputId },
+        valueExpr: 'val',
+        displayExpr: 'text',
+        value: data.value,
+        disabled: data.disabled
+    });
+    return SelectBoxEditorBase(getEditorOptions)({ data });
+};
+export default BoolSelectEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/BoolSelect/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BoolSelectEditor';
+export { default } from './BoolSelectEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/BoolSelect/index.js

@@ -0,0 +1,2 @@
+export * from './BoolSelectEditor';
+export { default } from './BoolSelectEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/Boolean/BooleanEditor.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/editor';
+declare const BooleanEditor: React.FC<{
+    data: IEditorViewModel;
+}>;
+export default BooleanEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/Boolean/BooleanEditor.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CheckBox } from 'devextreme-react/check-box';
+import Validator from 'devextreme-react/validator';
+import { useEditorOptions, useValidatorOptions } from '../editorHooks';
+const BooleanEditor = ({ data }) => {
+    const checkBoxRef = React.useRef();
+    const args = {
+        getEditorOptions: () => ({
+            value: data.value,
+            disabled: data.disabled,
+            elementAttr: { 'aria-label': data.displayName }
+        })
+    };
+    const options = useEditorOptions(checkBoxRef, data, args);
+    const validatorOptions = useValidatorOptions(data);
+    return (React.createElement(CheckBox, { ref: checkBoxRef, className: "propertygrid-editor-checkbox", value: options.value, disabled: options.disabled, elementAttr: options.elementAttr, onValueChanged: options.onValueChanged, onInitialized: options.onInitialized }, data.validationRules && React.createElement(Validator, { validationRules: validatorOptions.validationRules })));
+};
+export default BooleanEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/Boolean/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BooleanEditor';
+export { default } from './BooleanEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/Boolean/index.js

@@ -0,0 +1,2 @@
+export * from './BooleanEditor';
+export { default } from './BooleanEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/ColorPicker/ColorPickerEditor.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IColorPickerEditorViewModel } from '@devexpress/analytics-core/core/widgets/colorPickerEditor';
+declare const ColorPickerEditor: React.FC<{
+    data: IColorPickerEditorViewModel;
+}>;
+export default ColorPickerEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/ColorPicker/ColorPickerEditor.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ColorBox } from 'devextreme-react/color-box';
+import { getLocalization } from '@devexpress/analytics-core/property-grid/localization/_localization';
+import { useDropDownOptions, useEditorOptions } from '../editorHooks';
+const ColorPickerEditor = ({ data }) => {
+    const colorBoxRef = React.useRef();
+    const args = {
+        getEditorOptions: () => ({
+            value: data.displayValue,
+            placeholder: getLocalization('(Not set)', 'ReportStringId.UD_PropertyGrid_NotSetText'),
+            editAlphaChannel: true,
+            disabled: data.disabled,
+            inputAttr: { 'aria-label': data.displayName, id: data.editorInputId }
+        })
+    };
+    const options = useEditorOptions(colorBoxRef, data, args);
+    const dropDownOptions = useDropDownOptions(colorBoxRef, ({ element, container }) => {
+        const dropDownOptions = {
+            container,
+            position: {
+                at: 'left bottom',
+                collision: 'flipfit flipfit',
+                my: 'left top',
+                boundary: container,
+                of: element
+            }
+        };
+        return dropDownOptions;
+    });
+    return (React.createElement(ColorBox, { ref: colorBoxRef, value: options.value, onValueChanged: options.onValueChanged, placeholder: options.placeholder, editAlphaChannel: options.editAlphaChannel, disabled: options.disabled, dropDownOptions: dropDownOptions, inputAttr: options.inputAttr }));
+};
+export default ColorPickerEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/ColorPicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ColorPickerEditor';
+export { default } from './ColorPickerEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/ColorPicker/index.js

@@ -0,0 +1,2 @@
+export * from './ColorPickerEditor';
+export { default } from './ColorPickerEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/Date/DateEditor.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/editor';
+declare const DateEditor: React.FC<{
+    data: IEditorViewModel;
+}>;
+export default DateEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/Date/DateEditor.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { DateBox } from 'devextreme-react/date-box';
+import Validator from 'devextreme-react/validator';
+import { useDropDownOptions, useEditorOptions, useValidatorOptions } from '../editorHooks';
+const DateEditor = ({ data }) => {
+    const dateBoxRef = React.useRef();
+    const args = {
+        getEditorOptions: () => ({
+            value: data.value,
+            type: 'datetime',
+            disabled: data.disabled,
+            inputAttr: { 'aria-label': data.displayName, id: data.editorInputId },
+        })
+    };
+    const options = useEditorOptions(dateBoxRef, data, args);
+    const dropDownOptions = useDropDownOptions(dateBoxRef, ({ element, container }) => {
+        const dropDownOptions = {
+            container,
+            position: {
+                at: 'left bottom',
+                collision: 'flipfit flip',
+                my: 'left top',
+                boundary: container,
+                of: element
+            }
+        };
+        return dropDownOptions;
+    });
+    const validatorOptions = useValidatorOptions(data);
+    return (React.createElement("div", { className: "dx-datebox-container" },
+        React.createElement(DateBox, { ref: dateBoxRef, value: options.value, type: options.type, disabled: options.disabled, onValueChanged: options.onValueChanged, inputAttr: options.inputAttr, placeholder: options.placeholder, showClearButton: options.showClearButton, dropDownOptions: dropDownOptions },
+            React.createElement(Validator, { validationRules: validatorOptions.validationRules }))));
+};
+export default DateEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/Date/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DateEditor';
+export { default } from './DateEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/Date/index.js

@@ -0,0 +1,2 @@
+export * from './DateEditor';
+export { default } from './DateEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/EditorBase/EditorBase.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/editor';
+declare const EditorBase: React.FC<{
+    data: IEditorViewModel;
+}>;
+export default EditorBase;

package/dx-report-viewer/components/analytics/Properties/Editors/EditorBase/EditorBase.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import Template from '../../../../core/Template';
+import LazyTemplate from '../../../../core/LazyTemplate';
+import useDxAccordion from '../../../../../hooks/dxAccordion';
+import useDxButtonWithTemplate from '../../../../../hooks/dxButtonWithTemplate';
+const GroupHeader = ({ data }) => (
+//<div disabled={data.templateName !== 'dx-emptyHeader'}>
+React.createElement("div", null,
+    React.createElement(Template, { className: `dx-collapsing-image dxrd-display-inline-block ${!data.collapsed ? 'dx-image-expanded' : ''}`, template: "dxrd-svg-collapsed" }),
+    React.createElement("div", { className: "dx-group-header-font", title: data.displayName, "data-bind": data.textToSearch ? `searchHighlighting: { text: displayName, textToSearch: ${data.textToSearch} }` : undefined }, !data.textToSearch ? data.displayName : undefined)));
+const EditorLabel = ({ data }) => {
+    var _a;
+    const buttonWithTemplateRef = React.useRef();
+    useDxButtonWithTemplate(buttonWithTemplateRef, { onClick: (_a = data.editorDescriptionAddon) === null || _a === void 0 ? void 0 : _a.data.onClick, icon: 'dxrd-svg-tabs-description_info' });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("label", { className: `propertygrid-editor-displayName ${data.isRequired ? ' dx-field-label-required' : ''}`, title: data.displayName, htmlFor: data.editorInputId, style: { fontWeight: data.isPropertyModified ? 'Bold' : '' }, "data-bind": data.textToSearch ? `searchHighlighting: { text: displayName, textToSearch: ${data.textToSearch} }` : undefined }, !data.textToSearch ? data.displayName : undefined),
+        data.editorDescriptionAddon && React.createElement("div", { className: "propertygrid-editor-description", ref: buttonWithTemplateRef })));
+};
+const EditorBase = ({ data }) => {
+    const accordionRef = React.useRef();
+    useDxAccordion(accordionRef, data);
+    const isResolved = (newVal) => data.setIsRendered(newVal);
+    return (React.createElement("div", { className: "dx-editor", hidden: !data.visible },
+        React.createElement("div", { className: "dx-group", ref: accordionRef },
+            React.createElement("div", { className: "dx-editor-header" },
+                React.createElement("div", { className: `dx-field ${data.isComplexEditor ? 'dxrd-accessibility-accordion-trigger dx-accessibility-focus-border-accented' : ''}`, role: "treeitem", id: data.isComplexEditor ? data.headerId : undefined, "aria-owns": data.isComplexEditor ? data.contentId : undefined, "aria-expanded": data.isComplexEditor ? (data.alwaysShow || !data.collapsed ? 'true' : 'false') : undefined },
+                    React.createElement("div", { className: `dx-field-label dx-accordion-header dxd-text-primary ${data.templateName === 'dx-emptyHeader' ? 'dx-accordion-empty' : ''}`, style: { paddingLeft: data.padding['padding-left'] + 'px' } }, data.isComplexEditor ? React.createElement(GroupHeader, { data: data }) : React.createElement(EditorLabel, { data: data })),
+                    React.createElement("div", { className: `dx-field-value ${data.isPropertyHighlighted ? 'dxd-border-accented' : ''}` }, data.templateName !== 'dx-emptyHeader' && React.createElement(LazyTemplate, { isResolved: isResolved, template: data.templateName, data: data })))),
+            data.isComplexEditor && (React.createElement("div", { className: "dx-editor-content dx-accordion-content", role: "group", "aria-labelledby": data.headerId, id: data.contentId, "aria-hidden": !data.alwaysShow && data.collapsed ? 'true' : 'false' }, data.editorCreated && React.createElement(Template, { template: data.contentTemplateName, data: data }))))));
+};
+export default EditorBase;

package/dx-report-viewer/components/analytics/Properties/Editors/EditorBase/index.d.ts

@@ -0,0 +1,2 @@
+export * from './EditorBase';
+export { default } from './EditorBase';

package/dx-report-viewer/components/analytics/Properties/Editors/EditorBase/index.js

@@ -0,0 +1,2 @@
+export * from './EditorBase';
+export { default } from './EditorBase';

package/dx-report-viewer/components/analytics/Properties/Editors/LocalizedSelectBox/LocalizedSelectBoxEditor.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/editor';
+declare const LocalizedSelectBoxEditor: React.FC<{
+    data: IEditorViewModel;
+}>;
+export default LocalizedSelectBoxEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/LocalizedSelectBox/LocalizedSelectBoxEditor.js

@@ -0,0 +1,20 @@
+import { SelectBoxEditorBase } from '../SelectBox';
+import { getLocalization } from '@devexpress/analytics-core/property-grid/localization/_localization';
+const LocalizedSelectBoxEditor = ({ data }) => {
+    const getEditorOptions = () => ({
+        dataSource: data.values.map(x => ({
+            value: x.value,
+            displayValue: getLocalization(x.displayValue, x.localizationId)
+        })),
+        value: data.value,
+        valueExpr: 'value',
+        displayExpr: 'displayValue',
+        disabled: data.disabled,
+        inputAttr: {
+            'aria-label': data.displayName,
+            'id': data.editorInputId
+        }
+    });
+    return SelectBoxEditorBase(getEditorOptions)({ data });
+};
+export default LocalizedSelectBoxEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/LocalizedSelectBox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './LocalizedSelectBoxEditor';
+export { default } from './LocalizedSelectBoxEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/LocalizedSelectBox/index.js

@@ -0,0 +1,2 @@
+export * from './LocalizedSelectBoxEditor';
+export { default } from './LocalizedSelectBoxEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/Numeric/NumericEditor.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/editor';
+declare const NumericEditor: React.FC<{
+    data: IEditorViewModel;
+}>;
+export default NumericEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/Numeric/NumericEditor.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { NumberBox } from 'devextreme-react/number-box';
+import Validator from 'devextreme-react/validator';
+import { useEditorOptions, useValidatorOptions } from '../editorHooks';
+const NumericEditor = ({ data }) => {
+    const numberBoxRef = React.useRef();
+    const args = {
+        getEditorOptions: () => ({
+            value: data.value,
+            showSpinButtons: true,
+            disabled: data.disabled,
+            inputAttr: { 'aria-label': data.displayName, id: data.editorInputId }
+        })
+    };
+    const options = useEditorOptions(numberBoxRef, data, args);
+    const validatorOptions = useValidatorOptions(data);
+    return (React.createElement(NumberBox, { ref: numberBoxRef, value: options.value, showSpinButtons: options.showSpinButtons, inputAttr: options.inputAttr, disabled: options.disabled, onValueChanged: options.onValueChanged }, data.validationRules && React.createElement(Validator, { validationRules: validatorOptions.validationRules })));
+};
+export default NumericEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/Numeric/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NumericEditor';
+export { default } from './NumericEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/Numeric/index.js

@@ -0,0 +1,2 @@
+export * from './NumericEditor';
+export { default } from './NumericEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/SelectBox/SelectBoxEditor.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Properties as SelectBoxOptions } from 'devextreme/ui/select_box';
+import { IEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/editor';
+export declare const SelectBoxEditorBase: (getEditorOptions: () => SelectBoxOptions) => React.FC<{
+    data: IEditorViewModel;
+}>;
+declare const SelectBoxEditor: React.FC<{
+    data: IEditorViewModel;
+}>;
+export default SelectBoxEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/SelectBox/SelectBoxEditor.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SelectBox } from 'devextreme-react/select-box';
+import Validator from 'devextreme-react/validator';
+import { useDropDownOptions, useEditorOptions, useValidatorOptions } from '../editorHooks';
+import { noDataText } from '@devexpress/analytics-core/property-grid/localization/_localization';
+export const SelectBoxEditorBase = (getEditorOptions) => ({ data }) => {
+    const selectBoxRef = React.useRef();
+    const args = {
+        getEditorOptions,
+        getPrivateWidgetOptions: () => {
+            var _a;
+            return ({
+                allowClearing: (_a = data.editorOptions) === null || _a === void 0 ? void 0 : _a.allowClearing,
+                displayCustomValue: true,
+                encodeNoDataText: true,
+            });
+        },
+    };
+    const options = useEditorOptions(selectBoxRef, data, args);
+    const dropDownOptions = useDropDownOptions(selectBoxRef, ({ container }) => ({ container }));
+    const validatorOptions = useValidatorOptions(data);
+    return (React.createElement(SelectBox, { ref: selectBoxRef, dataSource: options.dataSource, value: options.value, valueExpr: options.valueExpr, displayExpr: options.displayExpr, disabled: options.disabled, onValueChanged: options.onValueChanged, useItemTextAsTitle: options.useItemTextAsTitle, noDataText: options.noDataText, dropDownOptions: dropDownOptions, inputAttr: options.inputAttr, placeholder: options.placeholder, showClearButton: options.showClearButton, searchEnabled: options.searchEnabled }, data.validationRules && React.createElement(Validator, { validationRules: validatorOptions.validationRules })));
+};
+const SelectBoxEditor = ({ data }) => {
+    const getEditorOptions = () => ({
+        dataSource: data.values,
+        value: data.value,
+        valueExpr: 'value',
+        displayExpr: 'displayValue',
+        disabled: data.disabled,
+        useItemTextAsTitle: true,
+        noDataText: noDataText(),
+        inputAttr: { 'aria-label': data.displayName, id: data.editorInputId }
+    });
+    return SelectBoxEditorBase(getEditorOptions)({ data });
+};
+export default SelectBoxEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/SelectBox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SelectBoxEditor';
+export { default } from './SelectBoxEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/SelectBox/index.js

@@ -0,0 +1,2 @@
+export * from './SelectBoxEditor';
+export { default } from './SelectBoxEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/TextBox/TextBoxEditor.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/editor';
+declare const TextBoxEditor: React.FC<{
+    data: IEditorViewModel;
+}>;
+export default TextBoxEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/TextBox/TextBoxEditor.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TextBox } from 'devextreme-react/text-box';
+import Validator from 'devextreme-react/validator';
+import { useEditorOptions, useValidatorOptions } from '../editorHooks';
+const TextBoxEditor = ({ data }) => {
+    const textBoxRef = React.useRef();
+    const args = {
+        getEditorOptions: () => ({
+            value: data.value,
+            disabled: data.disabled,
+            inputAttr: {
+                'aria-label': data.displayName,
+                'id': data.editorInputId
+            }
+        })
+    };
+    const options = useEditorOptions(textBoxRef, data, args);
+    const validatorOptions = useValidatorOptions(data);
+    return (React.createElement(TextBox, { ref: textBoxRef, value: options.value, disabled: options.disabled, inputAttr: options.inputAttr, onValueChanged: options.onValueChanged, onFocusIn: options.onFocusIn && options.onFocusIn, onKeyDown: options.onKeyDown && options.onKeyDown, onPaste: options.onPaste && options.onPaste, placeholder: options.placeholder, showClearButton: options.showClearButton }, data.validationRules && React.createElement(Validator, { validationRules: validatorOptions.validationRules })));
+};
+export default TextBoxEditor;

package/dx-report-viewer/components/analytics/Properties/Editors/TextBox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TextBoxEditor';
+export { default } from './TextBoxEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/TextBox/index.js

@@ -0,0 +1,2 @@
+export * from './TextBoxEditor';
+export { default } from './TextBoxEditor';

package/dx-report-viewer/components/analytics/Properties/Editors/editorHooks.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/editor';
+import { Properties as DropDownOptions } from 'devextreme/ui/popup';
+import { Properties as ValidatorOptions } from 'devextreme/ui/validator';
+export declare const useDropDownOptions: (ref: React.MutableRefObject<any>, mapper: (args: {
+    element: HTMLElement;
+    container: HTMLElement;
+}) => DropDownOptions) => DropDownOptions;
+export type EditorOptionsHookArgsType<TOptions> = {
+    getOptions?: () => TOptions;
+    getEditorOptions?: () => TOptions;
+    getPrivateWidgetOptions?: () => object;
+};
+export declare const useEditorOptions: <T extends IEditorViewModel<any>, TOptions>(ref: React.MutableRefObject<any>, data: T, args: EditorOptionsHookArgsType<TOptions>) => TOptions;
+export declare const useValidatorOptions: <T extends IEditorViewModel<any>>(data: T) => ValidatorOptions;

package/dx-report-viewer/components/analytics/Properties/Editors/editorHooks.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { getParentContainer } from '@devexpress/analytics-core/widgets/_utils';
+import { extend } from '@devexpress/analytics-core/analytics-internal-native';
+export const useDropDownOptions = (ref, mapper) => {
+    const [dropDownOptions, setDropDownOptions] = React.useState({});
+    React.useEffect(() => {
+        const widget = ref.current;
+        if (!widget)
+            return;
+        const element = widget.instance().element();
+        const container = getParentContainer(element);
+        setDropDownOptions(mapper({ element, container }));
+    }, []);
+    return dropDownOptions;
+};
+const useEditorExtendedOptions = (ref, data, getPrivateWidgetOptions) => {
+    React.useEffect(() => {
+        if (!ref.current || !(data.extendedOptions || getPrivateWidgetOptions()))
+            return;
+        const dxWidget = ref.current.instance();
+        dxWidget.beginUpdate();
+        const options = extend(true, {}, getPrivateWidgetOptions(), data.extendedOptions);
+        dxWidget.option(options);
+        dxWidget.endUpdate();
+    }, [data.extendedOptions]);
+};
+const onPropertyChanged = (expectedWidgetOptions, widgetOptionsState, setWidgetOptionsState) => {
+    const nextWidgetState = Object.assign({}, widgetOptionsState);
+    for (const name in expectedWidgetOptions) {
+        if (typeof expectedWidgetOptions[name] !== 'function' && expectedWidgetOptions[name] !== widgetOptionsState[name]) {
+            if (Array.isArray(expectedWidgetOptions[name])) {
+                if (JSON.stringify(widgetOptionsState[name]) !== JSON.stringify(expectedWidgetOptions[name]))
+                    nextWidgetState[name] = expectedWidgetOptions[name];
+            }
+            else {
+                nextWidgetState[name] = expectedWidgetOptions[name];
+            }
+        }
+    }
+    setWidgetOptionsState(nextWidgetState);
+};
+export const useEditorOptions = (ref, data, args) => {
+    const { getOptions, getEditorOptions, getPrivateWidgetOptions = () => null } = args;
+    const getExpectedOptions = () => {
+        if (getOptions)
+            return getOptions();
+        return data.getOptions(getEditorOptions());
+    };
+    const [options, setOptions] = React.useState(getExpectedOptions());
+    React.useEffect(() => {
+        const model = data.getModel();
+        return model.events.on('propertyChanged', () => onPropertyChanged(getExpectedOptions(), options, setOptions));
+    }, [data]);
+    useEditorExtendedOptions(ref, data, getPrivateWidgetOptions);
+    return options;
+};
+export const useValidatorOptions = (data) => {
+    const getOptions = () => data.getValidatorOptions(data.validatorOptions || { validationRules: data.validationRules || [] });
+    const [validationOptions, setValidationOptions] = React.useState(getOptions());
+    React.useEffect(() => {
+        setValidationOptions(getOptions());
+    }, [data]);
+    return validationOptions;
+};

package/dx-report-viewer/components/analytics/Properties/ObjectEditor/ObjectEditor.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IPropertyGridEditorViewModel } from '@devexpress/analytics-core/property-grid/propertygrid';
+declare const ObjectEditor: React.FC<{
+    data: IPropertyGridEditorViewModel;
+}>;
+export default ObjectEditor;

package/dx-report-viewer/components/analytics/Properties/ObjectEditor/ObjectEditor.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Template from '../../../core/Template';
+const ObjectEditor = ({ data }) => {
+    if (!data.visible)
+        return undefined;
+    return React.createElement(Template, { template: "dx-propertieseditor", data: data.viewmodel });
+};
+export default ObjectEditor;