@tellescope/react-components 1.174.0 → 1.175.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.174.0",
+  "version": "1.175.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.174.0",
-    "@tellescope/sdk": "^1.174.0",
-    "@tellescope/types-client": "^1.174.0",
-    "@tellescope/types-models": "^1.174.0",
-    "@tellescope/types-utilities": "^1.174.0",
-    "@tellescope/utilities": "^1.174.0",
-    "@tellescope/validation": "^1.174.0",
+    "@tellescope/constants": "^1.175.0",
+    "@tellescope/sdk": "^1.175.0",
+    "@tellescope/types-client": "^1.175.0",
+    "@tellescope/types-models": "^1.175.0",
+    "@tellescope/types-utilities": "^1.175.0",
+    "@tellescope/utilities": "^1.175.0",
+    "@tellescope/validation": "^1.175.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": "b18cb31c80f3294f01abeb2bcb2d73c19441f738",
+  "gitHead": "d4b035d1d3a40b4177169dd41b911eec7383c949",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/inputs.tsx

@@ -1755,7 +1755,11 @@ export const DropdownInput = ({ field, value, onChange }: FormInputProps<'Dropdo
               ? onChange(e.target.value ? [e.target.value] : [], field.id)
               : undefined
           )}
-          placeholder={field.placeholder + ((!field.title && !field.isOptional) ? '*' : '')}
+          placeholder={
+            field.placeholder
+              ? field.placeholder + ((!field.title && !field.isOptional) ? '*' : '')
+              : undefined
+          }
           label={
             (!field.options?.radio && field.options?.other)
               ? "Press enter to save a custom value"

package/src/table.tsx

@@ -38,7 +38,7 @@ import { PRIMARY_HEX } from "@tellescope/constants"
 
 import CloudDownloadIcon from '@mui/icons-material/CloudDownload';
 import { Autocomplete } from "@mui/material"
-import { SortingField } from "@tellescope/types-models"
+import { ListQueryQualifier, SortingField } from "@tellescope/types-models"
 // import DragHandleIcon from '@mui/icons-material/DragHandle';
 
 const LIGHT_GRAY = "#fafafa"
@@ -101,6 +101,7 @@ const checkboxStyle: React.CSSProperties = {
 type LocalFilter = {
   query: string,
   values?: string[],
+  valuesQualifier?: ListQueryQualifier,
 }
 
 // export type SortType = 'infer'
@@ -183,6 +184,19 @@ export const TableHeader = <T extends Item>({
         <Flex flex={1} justifyContent="center">
         {fields[openFilter]?.filterType === 'multi'
           ? (
+            <>
+            <Autocomplete disableClearable disablePortal size={'small'} options={['One Of', 'All Of']} sx={{ width: 140, mr: 0.5 }}
+              onChange={(e, value) => {
+                setLocalFilters(fs => fs.map((f, i) => i === openFilter ? { ...f, valuesQualifier: value === 'All Of' ? 'All Of' : 'One Of' } : f))
+              }}
+              value={localFilters[openFilter]?.valuesQualifier === 'All Of' ? 'All Of' : 'One Of'}
+              renderInput={(params) => 
+                <TextField {...params} fullWidth autoFocus label={"Qualifier"} size={'small'}
+                  value={localFilters[openFilter]?.valuesQualifier === 'All Of' ? 'All Of' : 'One Of'}
+                />
+              }
+            />
+            
             <Autocomplete size={'small'}
               disablePortal multiple
               options={(filterSuggestions?.[fields[openFilter]?.key?.toString()] || []).sort()}
@@ -192,13 +206,14 @@ export const TableHeader = <T extends Item>({
               }}
               value={localFilters[openFilter]?.values ?? []}
               renderInput={(params) => 
-                <TextField {...params} autoFocus label={"Filter"} size={'small'} 
+                <TextField {...params} autoFocus label={"Filter by"} size={'small'} 
                   style={{ width: 400 }}
                   value={localFilters[openFilter]?.query ?? ''}
                   // onKeyUp={e => e.which === 13 && onEnterPress?.()}
                 />
               }
             />
+            </>
           ) : (
             <Autocomplete size={'small'}
               disablePortal
@@ -922,13 +937,16 @@ export const Table = <T extends Item>({
         const { getFilterValue, filterType } = fields[i]
         if (!getFilterValue) continue
 
-        const { query, values } = localFilters[i] ?? {}
+        const { query, values, valuesQualifier } = localFilters[i] ?? {}
 
         if (filterType === 'multi') {
           if (!values?.length) continue
 
           const filterValueOrValues = getFilterValue(v)
           const filterValues = Array.isArray(filterValueOrValues) ? filterValueOrValues : [filterValueOrValues]
+          if (valuesQualifier === 'All Of') {
+            return values.every(v => filterValues.includes(v))
+          }
           if (!filterValues.find(v => values.includes(v))) {
             return false
           }