@servicetitan/table 22.1.2 → 22.3.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v22.2.0 (Fri Jul 01 2022)
+
+#### 🚀 Enhancement
+
+- Table: prevent onRowClick when user misses row selection [#122](https://github.com/servicetitan/anvil-uikit-contrib/pull/122) ([@AntonMaksimenko](https://github.com/AntonMaksimenko))
+
+#### Authors: 1
+
+- Anton Maksimenko ([@AntonMaksimenko](https://github.com/AntonMaksimenko))
+
+---
+
+# v22.1.3 (Wed Jun 29 2022)
+
+#### 🐛 Bug Fix
+
+- Revert "Table: allow user to select table row by clicking on any spot within cell with selection" [#120](https://github.com/servicetitan/anvil-uikit-contrib/pull/120) ([@kanoshin](https://github.com/kanoshin))
+
+#### Authors: 1
+
+- Kirill Anoshin ([@kanoshin](https://github.com/kanoshin))
+
+---
+
 # v22.1.2 (Wed Jun 29 2022)
 
 #### 🐛 Bug Fix

package/dist/select-cell/select-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-cell.d.ts","sourceRoot":"","sources":["../../src/select-cell/select-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,EAAE,EAAe,MAAM,OAAO,CAAC;AACvE,OAAO,EACH,cAAc,EACd,oBAAoB,EAEpB,aAAa,EAChB,MAAM,6BAA6B,CAAC;AAIrC,oBAAY,oBAAoB,GAAG,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AAEvE,UAAU,qBAAsB,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,UAAU,qBAAsB,SAAQ,oBAAoB;IACxD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,UAAU,eAAe;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,cAAc,EAAE,cAAc,CAAC,GAAG,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAgB1C,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA2CtD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAOtD,CAAC"}
+{"version":3,"file":"select-cell.d.ts","sourceRoot":"","sources":["../../src/select-cell/select-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AACtE,OAAO,EACH,cAAc,EACd,oBAAoB,EAEpB,aAAa,EAChB,MAAM,6BAA6B,CAAC;AAIrC,oBAAY,oBAAoB,GAAG,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AAEvE,UAAU,qBAAsB,SAAQ,cAAc;IAClD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,UAAU,qBAAsB,SAAQ,oBAAoB;IACxD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,UAAU,eAAe;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,cAAc,EAAE,cAAc,CAAC,GAAG,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAa1C,CAAC;AAGF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAyBtD,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAOtD,CAAC"}

package/dist/select-cell/select-cell.js

@@ -10,33 +10,30 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
 import { Checkbox, } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import * as Styles from './select-cell.module.css';
 export const SelectCell = (_a) => {
     var { selectionChange, control: Control = Checkbox } = _a, props = __rest(_a, ["selectionChange", "control"]);
-    const onChange = useCallback((_0, _1, event) => {
+    const onChange = (_0, _1, event) => {
         if (!selectionChange) {
             return;
         }
         selectionChange({ syntheticEvent: event });
-    }, [selectionChange]);
+    };
     return _jsx(Control, Object.assign({ className: Styles.checkbox, onChange: onChange }, props));
 };
-export const SelectColumnCell = ({ style, rowType, dataItem, control, isRowSelectable, selectionChange, className, }) => {
-    const onSelectionChange = useCallback((event) => {
-        if (isRowSelectable && selectionChange) {
-            selectionChange({ syntheticEvent: event });
-        }
-    }, [selectionChange, isRowSelectable]);
-    if (rowType === 'groupHeader') {
+const stopPropagation = (e) => e.stopPropagation();
+export const SelectColumnCell = (props) => {
+    if (props.rowType === 'groupHeader') {
         return null;
     }
-    if (rowType === 'groupFooter') {
+    if (props.rowType === 'groupFooter') {
         return _jsx("td", {});
     }
-    return (_jsx("td", Object.assign({ style: style, className: classNames(isRowSelectable && selectionChange && 'cursor-pointer', className), onClick: onSelectionChange }, { children: _jsx(SelectCell, { checked: dataItem.selected, disabled: !isRowSelectable, indeterminate: dataItem.indeterminate, control: control }) })));
+    return (_jsx("td", Object.assign({ style: props.style, 
+        // prevent onRowClick when user misses row selection
+        onClick: stopPropagation, className: classNames(props.className, 'cursor-default-i') }, { children: _jsx(SelectCell, { checked: props.dataItem.selected, disabled: !props.isRowSelectable, selectionChange: props.selectionChange, indeterminate: props.dataItem.indeterminate, control: props.control }) })));
 };
 export const SelectHeaderCell = (props) => (_jsx(SelectCell, { checked: props.selectionValue, indeterminate: props.isSomeRowsSelected, selectionChange: props.selectionChange, control: props.control }));
 //# sourceMappingURL=select-cell.js.map

package/dist/select-cell/select-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-cell.js","sourceRoot":"","sources":["../../src/select-cell/select-cell.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAqC,WAAW,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAGH,QAAQ,GAEX,MAAM,6BAA6B,CAAC;AACrC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,MAAM,MAAM,0BAA0B,CAAC;AAsBnD,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAI9B,EAAE,EAAE;QAJ0B,EAC5C,eAAe,EACf,OAAO,EAAE,OAAO,GAAG,QAAQ,OAEb,EADX,KAAK,cAHoC,8BAI/C,CADW;IAER,MAAM,QAAQ,GAAG,WAAW,CACxB,CAAC,EAAS,EAAE,EAAW,EAAE,KAAuC,EAAE,EAAE;QAChE,IAAI,CAAC,eAAe,EAAE;YAClB,OAAO;SACV;QACD,eAAe,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,eAAe,CAAC,CACpB,CAAC;IAEF,OAAO,KAAC,OAAO,kBAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,IAAM,KAAK,EAAI,CAAC;AAClF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EACxD,KAAK,EACL,OAAO,EACP,QAAQ,EACR,OAAO,EACP,eAAe,EACf,eAAe,EACf,SAAS,GACW,EAAE,EAAE;IACxB,MAAM,iBAAiB,GAAG,WAAW,CACjC,CAAC,KAA2C,EAAE,EAAE;QAC5C,IAAI,eAAe,IAAI,eAAe,EAAE;YACpC,eAAe,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;SAC9C;IACL,CAAC,EACD,CAAC,eAAe,EAAE,eAAe,CAAC,CACrC,CAAC;IAEF,IAAI,OAAO,KAAK,aAAa,EAAE;QAC3B,OAAO,IAAI,CAAC;KACf;IAED,IAAI,OAAO,KAAK,aAAa,EAAE;QAC3B,OAAO,cAAM,CAAC;KACjB;IAED,OAAO,CACH,2BACI,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,UAAU,CACjB,eAAe,IAAI,eAAe,IAAI,gBAAgB,EACtD,SAAS,CACZ,EACD,OAAO,EAAE,iBAAiB,gBAE1B,KAAC,UAAU,IACP,OAAO,EAAE,QAAQ,CAAC,QAAQ,EAC1B,QAAQ,EAAE,CAAC,eAAe,EAC1B,aAAa,EAAE,QAAQ,CAAC,aAAa,EACrC,OAAO,EAAE,OAAO,GAClB,IACD,CACR,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,KAA4B,EAAE,EAAE,CAAC,CACzF,KAAC,UAAU,IACP,OAAO,EAAE,KAAK,CAAC,cAAc,EAC7B,aAAa,EAAE,KAAK,CAAC,kBAAkB,EACvC,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB,CACL,CAAC"}
+{"version":3,"file":"select-cell.js","sourceRoot":"","sources":["../../src/select-cell/select-cell.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAGH,QAAQ,GAEX,MAAM,6BAA6B,CAAC;AACrC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,MAAM,MAAM,0BAA0B,CAAC;AAsBnD,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAI9B,EAAE,EAAE;QAJ0B,EAC5C,eAAe,EACf,OAAO,EAAE,OAAO,GAAG,QAAQ,OAEb,EADX,KAAK,cAHoC,8BAI/C,CADW;IAER,MAAM,QAAQ,GAAG,CAAC,EAAS,EAAE,EAAW,EAAE,KAAuC,EAAE,EAAE;QACjF,IAAI,CAAC,eAAe,EAAE;YAClB,OAAO;SACV;QACD,eAAe,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEF,OAAO,KAAC,OAAO,kBAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,IAAM,KAAK,EAAI,CAAC;AAClF,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,CAAmC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC;AACrF,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,KAA4B,EAAE,EAAE;IACxF,IAAI,KAAK,CAAC,OAAO,KAAK,aAAa,EAAE;QACjC,OAAO,IAAI,CAAC;KACf;IAED,IAAI,KAAK,CAAC,OAAO,KAAK,aAAa,EAAE;QACjC,OAAO,cAAM,CAAC;KACjB;IAED,OAAO,CACH,2BACI,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,oDAAoD;QACpD,OAAO,EAAE,eAAe,EACxB,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,kBAAkB,CAAC,gBAE1D,KAAC,UAAU,IACP,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,QAAQ,EAChC,QAAQ,EAAE,CAAC,KAAK,CAAC,eAAe,EAChC,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,aAAa,EAC3C,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB,IACD,CACR,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,KAA4B,EAAE,EAAE,CAAC,CACzF,KAAC,UAAU,IACP,OAAO,EAAE,KAAK,CAAC,cAAc,EAC7B,aAAa,EAAE,KAAK,CAAC,kBAAkB,EACvC,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB,CACL,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/table",
-    "version": "22.1.2",
+    "version": "22.3.0",
     "description": "",
     "homepage": "https://docs.st.dev/docs/frontend/table",
     "repository": {
@@ -36,9 +36,9 @@
         "memoize-one": "~6.0.0"
     },
     "devDependencies": {
-        "@servicetitan/data-query": "^22.1.2",
+        "@servicetitan/data-query": "^22.3.0",
         "@servicetitan/design-system": "~11.8.0",
-        "@servicetitan/form": "^22.1.2",
+        "@servicetitan/form": "^22.3.0",
         "@servicetitan/react-ioc": "^21.6.0",
         "@servicetitan/suppress-warnings": "^21.6.0",
         "@types/accounting": "~0.4.2",
@@ -52,9 +52,9 @@
         "react": "~17.0.2"
     },
     "peerDependencies": {
-        "@servicetitan/data-query": "^22.1.2",
+        "@servicetitan/data-query": "^22.3.0",
         "@servicetitan/design-system": "~11.8.0",
-        "@servicetitan/form": "^22.1.2",
+        "@servicetitan/form": "^22.3.0",
         "@servicetitan/react-ioc": "^20.0.0",
         "@servicetitan/suppress-warnings": "^20.0.0",
         "accounting": "~0.4.1",
@@ -71,5 +71,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "9f87b9bf91c403984f6f4d9bdc5c0cc20302bb57"
+    "gitHead": "9ff86a1eef1078b7a38b5fee09b7e96715617da7"
 }

package/src/select-cell/select-cell.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, SyntheticEvent, FC, useCallback } from 'react';
+import { ComponentType, SyntheticEvent, FC, MouseEvent } from 'react';
 import {
     TableCellProps,
     TableHeaderCellProps,
@@ -33,59 +33,39 @@ export const SelectCell: FC<SelectCellProps> = ({
     control: Control = Checkbox,
     ...props
 }: SelectCellProps) => {
-    const onChange = useCallback(
-        (_0: never, _1: boolean, event: SyntheticEvent<HTMLInputElement>) => {
-            if (!selectionChange) {
-                return;
-            }
-            selectionChange({ syntheticEvent: event });
-        },
-        [selectionChange]
-    );
+    const onChange = (_0: never, _1: boolean, event: SyntheticEvent<HTMLInputElement>) => {
+        if (!selectionChange) {
+            return;
+        }
+        selectionChange({ syntheticEvent: event });
+    };
 
     return <Control className={Styles.checkbox} onChange={onChange} {...props} />;
 };
 
-export const SelectColumnCell: FC<SelectColumnCellProps> = ({
-    style,
-    rowType,
-    dataItem,
-    control,
-    isRowSelectable,
-    selectionChange,
-    className,
-}: SelectColumnCellProps) => {
-    const onSelectionChange = useCallback(
-        (event: SyntheticEvent<HTMLTableCellElement>) => {
-            if (isRowSelectable && selectionChange) {
-                selectionChange({ syntheticEvent: event });
-            }
-        },
-        [selectionChange, isRowSelectable]
-    );
-
-    if (rowType === 'groupHeader') {
+const stopPropagation = (e: MouseEvent<HTMLTableCellElement>) => e.stopPropagation();
+export const SelectColumnCell: FC<SelectColumnCellProps> = (props: SelectColumnCellProps) => {
+    if (props.rowType === 'groupHeader') {
         return null;
     }
 
-    if (rowType === 'groupFooter') {
+    if (props.rowType === 'groupFooter') {
         return <td />;
     }
 
     return (
         <td
-            style={style}
-            className={classNames(
-                isRowSelectable && selectionChange && 'cursor-pointer',
-                className
-            )}
-            onClick={onSelectionChange}
+            style={props.style}
+            // prevent onRowClick when user misses row selection
+            onClick={stopPropagation}
+            className={classNames(props.className, 'cursor-default-i')}
         >
             <SelectCell
-                checked={dataItem.selected}
-                disabled={!isRowSelectable}
-                indeterminate={dataItem.indeterminate}
-                control={control}
+                checked={props.dataItem.selected}
+                disabled={!props.isRowSelectable}
+                selectionChange={props.selectionChange}
+                indeterminate={props.dataItem.indeterminate}
+                control={props.control}
             />
         </td>
     );