@applica-software-guru/react-admin 1.5.303 → 1.5.304

package/package.json

@@ -107,5 +107,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.303"
+  "version": "1.5.304"
 }

package/src/components/ra-inputs/LabeledInput.tsx

@@ -16,7 +16,7 @@ function LabeledInput({
 }: LabeledInputProps): JSX.Element {
   const theme = useTheme();
   const { getCurrentDialog } = useAppConfig();
-  const { source, resource, isRequired } = props;
+  const { source, resource, isRequired, chip } = props;
   const {
     fieldState: { invalid }
   } = useInput(props);
@@ -60,6 +60,7 @@ function LabeledInput({
             // @ts-ignore
             ...children.props,
             ...props,
+            chip: chip && typeof chip === 'function' ? React.createElement(chip) : chip,
             label: display === 'legend' ? label : false
           })
         : children}
@@ -90,6 +91,7 @@ type LabeledInputProps = InputProps & {
   display?: 'legend' | 'label';
   helperText?: string | boolean | React.ReactElement | null;
   divider?: boolean;
+  chip?: any;
 };
 
 export { LabeledInput };

package/src/components/ra-lists/FilterSidebar/ActiveFiltersChips.tsx

@@ -75,7 +75,7 @@ function Chips(): ReactElement {
         flexDirection={'row'}
         flexWrap={isMobile ? 'nowrap' : 'wrap'}
         gap={2}
-        pb={0.5}
+        py={0.5}
         overflow={'auto'}
         width={isMobile ? window.innerWidth - (24 + 34) : 'auto'}
       >

package/src/components/ra-lists/FilterSidebar/FilterSidebar.tsx

@@ -27,7 +27,7 @@ function FiltersInput(props: FiltersInputProps): ReactElement {
             ? (Array.isArray(filters) ? filters : [filters]).map((filter: ReactElement, i) => {
                 const props = { ...filter.props, display: 'label' };
                 return React.isValidElement(filter) ? (
-                  <Box key={i} sx={{ mb: 1 }}>
+                  <Box key={i} mb={1}>
                     {React.cloneElement(filter, { ...props, resource })}
                   </Box>
                 ) : null;

package/src/components/ra-lists/FilterSidebar/FilterSidebarContext.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useMemo } from 'react';
 import { FilterContext, useResourceContext } from 'react-admin';
+import { isFunction } from 'lodash';
 
 interface FiltersContextType {
   hasFilterSidebar?: boolean;
@@ -30,24 +31,26 @@ function useGetChipValue({ source, value }: ChipItemProps): JSX.Element | null {
     [currentSourceFilter]
   );
 
-  const ChipComponent = React.isValidElement(currentSourceFilter) ? currentSourceFilter.props?.chip : null;
-
-  if (!ChipComponent) {
+  if (!currentSourceFilterProps?.chip) {
     throw new Error(
       `No chip component found for filter source "${source}". Ensure your filter components define a 'chip' prop.`
     );
   }
 
-  const label = useMemo(() => {
-    return React.cloneElement(ChipComponent as React.ReactElement<any>, {
-      ...currentSourceFilterProps,
-      record: { [source]: value },
-      value,
-      resource
-    });
-  }, [value, ChipComponent, source, resource, currentSourceFilterProps]);
+  const chipProps = {
+    ...currentSourceFilterProps,
+    record: { [source]: value },
+    value,
+    resource
+  };
+
+  const Chip = React.isValidElement(currentSourceFilterProps.chip)
+    ? React.cloneElement(currentSourceFilterProps.chip, chipProps)
+    : isFunction(currentSourceFilterProps.chip)
+    ? React.createElement(currentSourceFilterProps.chip, chipProps)
+    : null;
 
-  return label;
+  return Chip;
 }
 
 export { FilterSidebarContext, useGetChipValue, useIsEnabledSidebarFilter };