@servicetitan/table 24.3.2 → 25.0.1

package/dist/demo/overview/table.d.ts

@@ -1,6 +1,5 @@
 import { FC } from 'react';
-export interface TableExampleProps {
-    fixedWidthColumns?: boolean;
-}
-export declare const TableExample: FC<TableExampleProps>;
+import { TableCellProps } from '../..';
+export declare const DateEditableCell: (props: TableCellProps<any, any, never, never>) => JSX.Element;
+export declare const TableExample: FC;
 //# sourceMappingURL=table.d.ts.map

package/dist/demo/overview/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/demo/overview/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmC,EAAE,EAAgB,MAAM,OAAO,CAAC;AA0D1E,MAAM,WAAW,iBAAiB;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA+H9C,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/demo/overview/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmC,EAAE,EAAgB,MAAM,OAAO,CAAC;AAQ1E,OAAO,EAIH,cAAc,EAWjB,MAAM,OAAO,CAAC;AA6Cf,eAAO,MAAM,gBAAgB,gEAE3B,CAAC;AA0BH,eAAO,MAAM,YAAY,EAAE,EA2H1B,CAAC"}

package/dist/demo/overview/table.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, cloneElement, Fragment } from 'react';
 import { provide, useDependencies } from '@servicetitan/react-ioc';
 import { observer } from 'mobx-react';
-import { Stack, ButtonGroup, Button, Tag } from '@servicetitan/design-system';
-import { Table, TableColumn, TableCell, TextEditableCell, NumericEditableCell, BooleanEditableCell, DateEditableCell, getSelectEditableCell, CurrencyRangeColumnMenuFilter, DateRangeColumnMenuFilter, StandardColumnMenuFilter, standardFilterWithMultiselect, multiSelectColumnMenuFilter, } from '../..';
+import { Stack, ButtonGroup, Button, Tag, DatePicker } from '@servicetitan/design-system';
+import { Table, TableColumn, TableCell, TextEditableCell, BooleanEditableCell, getSelectEditableCell, DateRangeColumnMenuFilter, StandardColumnMenuFilter, standardFilterWithMultiselect, multiSelectColumnMenuFilter, CurrencyRangeColumnMenuFilter, getEditableCell, } from '../..';
 import { Export } from '../../export';
 import { TableStore } from './table.store';
 import { ActionsCell } from './actions-cell';
-import { enumToOptions, getEnumKeys } from '@servicetitan/form';
+import { NumberInput, enumToOptions, getEnumKeys } from '@servicetitan/form';
 import { UserRole, Supplier } from './product';
 const UserRoleColumnMenuFilter = multiSelectColumnMenuFilter(getEnumKeys(UserRole), userRole => (_jsx(Tag, Object.assign({ compact: true, color: UserRole[userRole] === UserRole.Owner ? 'success' : 'default' }, { children: userRole }))));
 const AvailableForEditableCell = getSelectEditableCell({
@@ -24,9 +24,21 @@ const SupplierCell = props => {
     }
     return _jsx("td", { children: Supplier[dataItem[field]] });
 };
+// Implementation of a date editable cell utilizing getEditableCell
+const DateEditor = observer(({ fieldState: { value, onChange, hasError }, className }) => {
+    return (_jsx("td", Object.assign({ className: className }, { children: _jsx(DatePicker, { value: value, onChange: onChange, error: hasError }) })));
+});
+export const DateEditableCell = getEditableCell({
+    editor: DateEditor,
+});
+// Implementation of a numeric editable cell utilizing getEditableCell
+const NumberCellEditor = observer(({ fieldState: { value, hasError, onChange } }) => (_jsx("td", { children: _jsx(NumberInput, { onChange: onChange, type: "number", error: hasError, value: value, emptyValue: 0, min: 0, max: 1000, useEmptyThousandsSeparator: true, fluid: true, decimalPlaces: 2, useKeyboardNavigation: true }) })));
+const NumericEditableCell = getEditableCell({
+    editor: getEditableCell({ editor: NumberCellEditor }),
+});
 export const TableExample = provide({
     singletons: [TableStore],
-})(observer((props) => {
+})(observer(() => {
     const [{ tableState, inEdit, editAll, cancelAll, saveAll }] = useDependencies(TableStore);
     const madeInColumnMenu = useMemo(() => standardFilterWithMultiselect({ tableState }), [tableState]);
     const cellRender = (td, { dataItem, field }) => {
@@ -39,6 +51,6 @@ export const TableExample = provide({
             },
         });
     };
-    return (_jsxs(Fragment, { children: [_jsxs(Stack, Object.assign({ justifyContent: "space-between", alignContent: "center", className: "m-b-2" }, { children: [_jsx(Export, { totalCount: tableState.totalCount, exportPdf: tableState.exportPdf, exportExcel: tableState.exportExcel }), inEdit ? (_jsxs(ButtonGroup, { children: [_jsx(Button, Object.assign({ small: true, onClick: cancelAll, className: "m-r-2" }, { children: "Cancel All" })), _jsx(Button, Object.assign({ small: true, primary: true, onClick: saveAll }, { children: "Save All" }))] })) : (_jsx(Button, Object.assign({ small: true, primary: true, onClick: editAll }, { children: "Edit All" })))] })), _jsxs(Table, Object.assign({ tableState: tableState, striped: false, selectable: true, groupable: true, sortable: true, exportable: true, exportFileName: "Table.Export.Test...File.Name.01.01.2020..~!@#$%^(*_+';", cellRender: cellRender }, { children: [_jsx(TableColumn, { field: "ProductID", title: "ID", editable: false, width: "100px" }), _jsx(TableColumn, { field: "ProductName", title: "Product Name", cell: TextEditableCell, columnMenu: StandardColumnMenuFilter, width: "240px" }), _jsx(TableColumn, { field: "Supplier", title: "Supplier", cell: SupplierCell, columnMenu: StandardColumnMenuFilter, width: "150px" }), _jsx(TableColumn, { field: "MadeIn", title: "Made In", cell: TextEditableCell, columnMenu: madeInColumnMenu, width: "175px" }), _jsx(TableColumn, { field: "UnitsOnOrder", title: "First Ordered On", cell: DateEditableCell, columnMenu: DateRangeColumnMenuFilter, format: "{0:d}", width: "240px" }), _jsx(TableColumn, { field: "UnitPrice", title: "Unit Price", cell: NumericEditableCell, columnMenu: CurrencyRangeColumnMenuFilter, format: "{0:c}", width: "125px" }), _jsx(TableColumn, { field: "Discontinued", title: "Discontinued", cell: BooleanEditableCell, sortable: false, width: "125px" }), _jsx(TableColumn, { field: "AvailableFor", title: "Available For", cell: AvailableForEditableCell, columnMenu: UserRoleColumnMenuFilter, width: "240px" }), _jsx(TableColumn, Object.assign({ cell: ActionsCell, sortable: false }, (props.fixedWidthColumns ? { width: '125px' } : {})))] }))] }));
+    return (_jsxs(Fragment, { children: [_jsxs(Stack, Object.assign({ justifyContent: "space-between", alignContent: "center", className: "m-b-2" }, { children: [_jsx(Export, { totalCount: tableState.totalCount, exportPdf: tableState.exportPdf, exportExcel: tableState.exportExcel }), inEdit ? (_jsxs(ButtonGroup, { children: [_jsx(Button, Object.assign({ small: true, onClick: cancelAll, className: "m-r-2" }, { children: "Cancel All" })), _jsx(Button, Object.assign({ small: true, primary: true, onClick: saveAll }, { children: "Save All" }))] })) : (_jsx(Button, Object.assign({ small: true, primary: true, onClick: editAll }, { children: "Edit All" })))] })), _jsxs(Table, Object.assign({ tableState: tableState, striped: false, selectable: true, groupable: true, sortable: true, exportable: true, exportFileName: "Table.Export.Test...File.Name.01.01.2020..~!@#$%^(*_+';", cellRender: cellRender }, { children: [_jsx(TableColumn, { field: "ProductID", title: "ID", editable: false, width: "100px" }), _jsx(TableColumn, { field: "ProductName", title: "Product Name", cell: TextEditableCell, columnMenu: StandardColumnMenuFilter, width: "240px" }), _jsx(TableColumn, { field: "Supplier", title: "Supplier", cell: SupplierCell, columnMenu: StandardColumnMenuFilter, width: "150px" }), _jsx(TableColumn, { field: "MadeIn", title: "Made In", cell: TextEditableCell, columnMenu: madeInColumnMenu, width: "175px" }), _jsx(TableColumn, { field: "UnitsOnOrder", title: "First Ordered On", cell: DateEditableCell, columnMenu: DateRangeColumnMenuFilter, format: "{0:MM/dd/yyyy}", width: "240px" }), _jsx(TableColumn, { field: "UnitPrice", title: "Unit Price", cell: NumericEditableCell, columnMenu: CurrencyRangeColumnMenuFilter, format: "{0:c}", width: "125px" }), _jsx(TableColumn, { field: "Discontinued", title: "Discontinued", cell: BooleanEditableCell, sortable: false, width: "125px" }), _jsx(TableColumn, { field: "AvailableFor", title: "Available For", cell: AvailableForEditableCell, columnMenu: UserRoleColumnMenuFilter, width: "240px" }), _jsx(TableColumn, { cell: ActionsCell, sortable: false, width: "125px" })] }))] }));
 }));
 //# sourceMappingURL=table.js.map

package/dist/demo/overview/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/demo/overview/table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/demo/overview/table.tsx"],"names":[],"mappings":"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"}

package/dist/editable-cell/index.d.ts

@@ -1,8 +1,6 @@
 export * from './get-action-cell';
 export * from './get-editable-cell';
 export * from './text-editable-cell';
-export * from './numeric-editable-cell';
 export * from './boolean-editable-cell';
-export * from './date-editable-cell';
 export * from './get-select-editable-cell';
 //# sourceMappingURL=index.d.ts.map

package/dist/editable-cell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/editable-cell/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/editable-cell/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC"}

package/dist/editable-cell/index.js

@@ -1,8 +1,6 @@
 export * from './get-action-cell';
 export * from './get-editable-cell';
 export * from './text-editable-cell';
-export * from './numeric-editable-cell';
 export * from './boolean-editable-cell';
-export * from './date-editable-cell';
 export * from './get-select-editable-cell';
 //# sourceMappingURL=index.js.map

package/dist/editable-cell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/editable-cell/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/editable-cell/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/table",
-    "version": "24.3.2",
+    "version": "25.0.1",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/table",
     "repository": {
@@ -32,14 +32,14 @@
         "@progress/kendo-react-pdf": "^5.5.0",
         "@progress/kendo-react-popup": "^5.5.0",
         "@progress/kendo-react-treeview": "^5.5.0",
-        "@servicetitan/react-hooks": "^2.9.0",
+        "@servicetitan/react-hooks": "^3.0.0",
         "classnames": "~2.3.1",
         "memoize-one": "~6.0.0"
     },
     "devDependencies": {
-        "@servicetitan/data-query": "^24.3.2",
+        "@servicetitan/data-query": "^25.0.1",
         "@servicetitan/design-system": ">=12.4.1",
-        "@servicetitan/form": "^24.3.2",
+        "@servicetitan/form": "^25.0.1",
         "@servicetitan/react-ioc": "^21.6.0",
         "@servicetitan/suppress-warnings": "^21.6.0",
         "@types/accounting": "~0.4.2",
@@ -53,9 +53,9 @@
         "react": "~17.0.2"
     },
     "peerDependencies": {
-        "@servicetitan/data-query": "^24.3.2",
+        "@servicetitan/data-query": "^25.0.1",
         "@servicetitan/design-system": ">=12.4.1",
-        "@servicetitan/form": "^24.3.2",
+        "@servicetitan/form": "^25.0.1",
         "@servicetitan/react-ioc": ">21.0.0",
         "@servicetitan/suppress-warnings": ">21.0.0",
         "accounting": "~0.4.1",
@@ -72,5 +72,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "c1b59595282a50978b190693924a2c5fdad68c09"
+    "gitHead": "81ba2d8ecce891162d8d4de743c6b3fff9cf1982"
 }

package/src/demo/overview/table.tsx

@@ -4,7 +4,7 @@ import { provide, useDependencies } from '@servicetitan/react-ioc';
 
 import { observer } from 'mobx-react';
 
-import { Stack, ButtonGroup, Button, Tag } from '@servicetitan/design-system';
+import { Stack, ButtonGroup, Button, Tag, DatePicker } from '@servicetitan/design-system';
 
 import {
     Table,
@@ -12,15 +12,15 @@ import {
     TableCell,
     TableCellProps,
     TextEditableCell,
-    NumericEditableCell,
     BooleanEditableCell,
-    DateEditableCell,
     getSelectEditableCell,
-    CurrencyRangeColumnMenuFilter,
     DateRangeColumnMenuFilter,
     StandardColumnMenuFilter,
     standardFilterWithMultiselect,
     multiSelectColumnMenuFilter,
+    CurrencyRangeColumnMenuFilter,
+    getEditableCell,
+    EditorProps,
 } from '../..';
 import { Export } from '../../export';
 
@@ -28,7 +28,7 @@ import { TableStore } from './table.store';
 
 import { ActionsCell } from './actions-cell';
 
-import { enumToOptions, getEnumKeys } from '@servicetitan/form';
+import { NumberInput, enumToOptions, getEnumKeys } from '@servicetitan/form';
 import { Product, UserRole, Supplier } from './product';
 
 const UserRoleColumnMenuFilter = multiSelectColumnMenuFilter(getEnumKeys(UserRole), userRole => (
@@ -56,14 +56,48 @@ const SupplierCell: FC<TableCellProps> = props => {
     return <td>{Supplier[dataItem[field!]]}</td>;
 };
 
-export interface TableExampleProps {
-    fixedWidthColumns?: boolean;
-}
+// Implementation of a date editable cell utilizing getEditableCell
+const DateEditor = observer<FC<EditorProps<Date | string | undefined>>>(
+    ({ fieldState: { value, onChange, hasError }, className }) => {
+        return (
+            <td className={className}>
+                <DatePicker value={value} onChange={onChange} error={hasError} />
+            </td>
+        );
+    }
+);
+export const DateEditableCell = getEditableCell({
+    editor: DateEditor,
+});
 
-export const TableExample: FC<TableExampleProps> = provide({
+// Implementation of a numeric editable cell utilizing getEditableCell
+const NumberCellEditor: FC<EditorProps<number>> = observer(
+    ({ fieldState: { value, hasError, onChange } }) => (
+        <td>
+            <NumberInput
+                onChange={onChange}
+                type="number"
+                error={hasError}
+                value={value}
+                emptyValue={0}
+                min={0}
+                max={1000}
+                useEmptyThousandsSeparator
+                fluid
+                decimalPlaces={2}
+                useKeyboardNavigation
+            />
+        </td>
+    )
+);
+const NumericEditableCell = getEditableCell({
+    editor: getEditableCell({ editor: NumberCellEditor }),
+});
+
+export const TableExample: FC = provide({
     singletons: [TableStore],
 })(
-    observer((props: TableExampleProps) => {
+    observer(() => {
         const [{ tableState, inEdit, editAll, cancelAll, saveAll }] = useDependencies(TableStore);
 
         const madeInColumnMenu = useMemo(
@@ -149,7 +183,7 @@ export const TableExample: FC<TableExampleProps> = provide({
                         title="First Ordered On"
                         cell={DateEditableCell}
                         columnMenu={DateRangeColumnMenuFilter}
-                        format="{0:d}"
+                        format="{0:MM/dd/yyyy}"
                         width="240px"
                     />
 
@@ -178,11 +212,7 @@ export const TableExample: FC<TableExampleProps> = provide({
                         width="240px"
                     />
 
-                    <TableColumn
-                        cell={ActionsCell}
-                        sortable={false}
-                        {...(props.fixedWidthColumns ? { width: '125px' } : {})}
-                    />
+                    <TableColumn cell={ActionsCell} sortable={false} width="125px" />
                 </Table>
             </Fragment>
         );

package/src/editable-cell/index.ts

@@ -1,7 +1,5 @@
 export * from './get-action-cell';
 export * from './get-editable-cell';
 export * from './text-editable-cell';
-export * from './numeric-editable-cell';
 export * from './boolean-editable-cell';
-export * from './date-editable-cell';
 export * from './get-select-editable-cell';

package/dist/editable-cell/date-editable-cell.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const DateEditableCell: (props: import("..").TableCellProps<any, any, never, never>) => JSX.Element;
-//# sourceMappingURL=date-editable-cell.d.ts.map

package/dist/editable-cell/date-editable-cell.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-editable-cell.d.ts","sourceRoot":"","sources":["../../src/editable-cell/date-editable-cell.tsx"],"names":[],"mappings":";AA0BA,eAAO,MAAM,gBAAgB,6EAE3B,CAAC"}

package/dist/editable-cell/date-editable-cell.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { observer } from 'mobx-react';
-import { DatePicker } from '@progress/kendo-react-dateinputs';
-import { getEditableCell } from './get-editable-cell';
-const Editor = observer(({ fieldState: { value, onChange, hasError, error }, className }) => {
-    const handleChange = (event) => {
-        onChange(event.value);
-    };
-    return (_jsx("td", Object.assign({ className: className }, { children: _jsx(DatePicker, { value: value, onChange: handleChange, valid: !hasError, validationMessage: error }) })));
-});
-export const DateEditableCell = getEditableCell({
-    editor: Editor,
-});
-//# sourceMappingURL=date-editable-cell.js.map

package/dist/editable-cell/date-editable-cell.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"date-editable-cell.js","sourceRoot":"","sources":["../../src/editable-cell/date-editable-cell.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAyB,MAAM,kCAAkC,CAAC;AAErF,OAAO,EAAE,eAAe,EAAe,MAAM,qBAAqB,CAAC;AAEnE,MAAM,MAAM,GAAG,QAAQ,CACnB,CAAC,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;IAChE,MAAM,YAAY,GAAG,CAAC,KAA4B,EAAE,EAAE;QAClD,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACH,2BAAI,SAAS,EAAE,SAAS,gBACpB,KAAC,UAAU,IACP,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,CAAC,QAAQ,EAChB,iBAAiB,EAAE,KAAK,GAC1B,IACD,CACR,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,eAAe,CAAC;IAC5C,MAAM,EAAE,MAAM;CACjB,CAAC,CAAC"}

package/dist/editable-cell/numeric-editable-cell.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const NumericEditableCell: (props: import("..").TableCellProps<any, any, never, never>) => JSX.Element;
-//# sourceMappingURL=numeric-editable-cell.d.ts.map

package/dist/editable-cell/numeric-editable-cell.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"numeric-editable-cell.d.ts","sourceRoot":"","sources":["../../src/editable-cell/numeric-editable-cell.tsx"],"names":[],"mappings":";AA2BA,eAAO,MAAM,mBAAmB,6EAE9B,CAAC"}

package/dist/editable-cell/numeric-editable-cell.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { observer } from 'mobx-react';
-import { NumericTextBox } from '@progress/kendo-react-inputs';
-import { getEditableCell } from './get-editable-cell';
-const Editor = observer(({ fieldState: { value, onChange, hasError, error }, className }) => {
-    const handleChange = (event) => {
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        onChange(event.value || undefined);
-    };
-    return (_jsx("td", Object.assign({ className: className }, { children: _jsx(NumericTextBox, { value: value, onChange: handleChange, valid: !hasError, validationMessage: error }) })));
-});
-export const NumericEditableCell = getEditableCell({
-    editor: Editor,
-});
-//# sourceMappingURL=numeric-editable-cell.js.map

package/dist/editable-cell/numeric-editable-cell.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"numeric-editable-cell.js","sourceRoot":"","sources":["../../src/editable-cell/numeric-editable-cell.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,cAAc,EAA6B,MAAM,8BAA8B,CAAC;AAEzF,OAAO,EAAE,eAAe,EAAe,MAAM,qBAAqB,CAAC;AAEnE,MAAM,MAAM,GAAG,QAAQ,CACnB,CAAC,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;IAChE,MAAM,YAAY,GAAG,CAAC,KAAgC,EAAE,EAAE;QACtD,wEAAwE;QACxE,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,OAAO,CACH,2BAAI,SAAS,EAAE,SAAS,gBACpB,KAAC,cAAc,IACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,CAAC,QAAQ,EAChB,iBAAiB,EAAE,KAAK,GAC1B,IACD,CACR,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,eAAe,CAAC;IAC/C,MAAM,EAAE,MAAM;CACjB,CAAC,CAAC"}

package/src/editable-cell/date-editable-cell.tsx

@@ -1,29 +0,0 @@
-import { FC } from 'react';
-import { observer } from 'mobx-react';
-
-import { DatePicker, DatePickerChangeEvent } from '@progress/kendo-react-dateinputs';
-
-import { getEditableCell, EditorProps } from './get-editable-cell';
-
-const Editor = observer<FC<EditorProps<Date | null>>>(
-    ({ fieldState: { value, onChange, hasError, error }, className }) => {
-        const handleChange = (event: DatePickerChangeEvent) => {
-            onChange(event.value);
-        };
-
-        return (
-            <td className={className}>
-                <DatePicker
-                    value={value}
-                    onChange={handleChange}
-                    valid={!hasError}
-                    validationMessage={error}
-                />
-            </td>
-        );
-    }
-);
-
-export const DateEditableCell = getEditableCell({
-    editor: Editor,
-});

package/src/editable-cell/numeric-editable-cell.tsx

@@ -1,30 +0,0 @@
-import { FC } from 'react';
-import { observer } from 'mobx-react';
-
-import { NumericTextBox, NumericTextBoxChangeEvent } from '@progress/kendo-react-inputs';
-
-import { getEditableCell, EditorProps } from './get-editable-cell';
-
-const Editor = observer<FC<EditorProps<number | undefined>>>(
-    ({ fieldState: { value, onChange, hasError, error }, className }) => {
-        const handleChange = (event: NumericTextBoxChangeEvent) => {
-            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-            onChange(event.value || undefined);
-        };
-
-        return (
-            <td className={className}>
-                <NumericTextBox
-                    value={value}
-                    onChange={handleChange}
-                    valid={!hasError}
-                    validationMessage={error}
-                />
-            </td>
-        );
-    }
-);
-
-export const NumericEditableCell = getEditableCell({
-    editor: Editor,
-});