@tellescope/react-components 1.194.0 → 1.195.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.194.0",
+  "version": "1.195.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -47,13 +47,13 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^1.52.1",
-    "@tellescope/constants": "^1.194.0",
-    "@tellescope/sdk": "^1.194.0",
-    "@tellescope/types-client": "^1.194.0",
-    "@tellescope/types-models": "^1.194.0",
-    "@tellescope/types-utilities": "^1.194.0",
-    "@tellescope/utilities": "^1.194.0",
-    "@tellescope/validation": "^1.194.0",
+    "@tellescope/constants": "^1.195.0",
+    "@tellescope/sdk": "^1.195.0",
+    "@tellescope/types-client": "^1.195.0",
+    "@tellescope/types-models": "^1.195.0",
+    "@tellescope/types-utilities": "^1.195.0",
+    "@tellescope/utilities": "^1.195.0",
+    "@tellescope/validation": "^1.195.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
@@ -84,7 +84,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "aef702a95cf13209de35fc09eb6a628c10db0007",
+  "gitHead": "eb4dad9ab2bd06dd6993a6c0c55b9f0b61ee12b3",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/inputs.tsx

@@ -1589,6 +1589,7 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
   const [stripePromise, setStripePromise] = useState<ReturnType<typeof loadStripe>>()
   const [, { findById: findProduct }] = useProducts({ dontFetch: true })
   const [answertext, setAnswertext] = useState('')
+  const [error, setError] = useState('')
 
   const fetchRef = useRef(false)
   useEffect(() => {
@@ -1607,7 +1608,12 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
       setBusinessName(businessName)
       setCustomerId(customerId)
     })
-    .catch(console.error)
+    .catch((e: any) => {
+      console.error(e)
+      if (typeof e?.message === 'string') {
+        setError(e.message)
+      }
+    })
   }, [session, value, field.id])
 
   const cost = (
@@ -1615,6 +1621,13 @@ export const StripeInput = ({ field, value, onChange, setCustomerId }: FormInput
     .reduce((t, p) => t + (p?.cost?.amount || 0), 0)
   )
 
+  if (error) {
+    return (
+      <Typography color="error">
+        {error}
+      </Typography>
+    )
+  }
   if (value) {
     return (
       <Grid container alignItems="center" wrap="nowrap">

package/src/state.tsx

@@ -543,6 +543,7 @@ export const lastDataSync = { current : { numResults: 0, at: new Date(0), from:
 export const useDataSync____internal = () => {
   const session = useSession()
   const lastFetch = React.useRef(new Date())
+  const lastError = React.useRef(0)
   const loadTimings = React.useRef({ } as { [index: string]: number })
   const loaded = React.useRef({ } as { [K in string]?: ClientModelForName[keyof ClientModelForName][] })
   const deleted = React.useRef({ } as { [K in string]?: string[] })
@@ -596,6 +597,11 @@ export const useDataSync____internal = () => {
         return
       }
 
+      // 5 second delay when hitting errors intead of immediate retry
+      if (lastError.current > Date.now() - 1000 * 5) {
+        return
+      }
+
       // ensure we don't miss updates due to latency
       const from = new Date(lastFetch.current.getTime() - 3000) // large leeway could result in same data being fetched twice, but helps ensure nothing is dropped
       lastFetch.current = new Date() // update before syncing, not after it returns
@@ -631,6 +637,7 @@ export const useDataSync____internal = () => {
       .catch(err => {
         console.error('Sync error', err)
         lastFetch.current = from // don't skip this interval yet
+        lastError.current = Date.now()
       })
     }, 1000)
 

package/src/table.tsx

@@ -105,6 +105,8 @@ type LocalFilter = {
   valuesQualifier?: ListQueryQualifier,
 }
 
+const COLUMN_RESIZE_HANDLE_WIDTH = 3
+
 // export type SortType = 'infer'
 export type Sorting = {
   field: string,
@@ -358,7 +360,7 @@ export const TableHeader = <T extends Item>({
                 }}
               >
                 <div style={{ 
-                  width: '3px',
+                  width: COLUMN_RESIZE_HANDLE_WIDTH, marginLeft: -COLUMN_RESIZE_HANDLE_WIDTH,
                   height: '30px', 
                   backgroundColor: '#22222266', 
                   cursor: 'col-resize', 
@@ -457,7 +459,7 @@ export const TableRow = <T extends Item>({
         />
         </Flex>
       }
-      <Flex flex={1} wrap="nowrap">
+      <Flex flex={1} wrap="nowrap" style={{ overflow: 'hidden'}}>
       {fields.map(({ key, width, textAlign='left', render, hidden, style }, i) => hidden ? null : (
         <Flex key={key} flex={width !== undefined ? 0 : 1} style={{ 
           alignItems: 'center',