@applica-software-guru/react-admin 1.5.347 → 1.5.349

package/package.json

@@ -108,5 +108,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.347"
+  "version": "1.5.349"
 }

package/src/components/@extended/IconButton.tsx

@@ -1,6 +1,6 @@
 import { getColors } from '@/themes/getColors';
 import { getShadow } from '@/themes/getShadow';
-import { default as MuiIconButton } from '@mui/material/IconButton';
+import { default as MuiIconButton, IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';
 import { Theme, alpha, styled, useTheme } from '@mui/material/styles';
 import { PropsWithChildren, forwardRef } from 'react';
 
@@ -146,7 +146,8 @@ type IconButtonProps = PropsWithChildren<{
   variant?: string;
   shape?: string;
   color?: string;
-}>;
+}> &
+  MuiIconButtonProps;
 
 const IconButton = forwardRef(
   ({ variant = 'text', shape = 'square', children, color = 'primary', ...others }: IconButtonProps, ref) => {

package/src/components/Layout/Header/Profile/HeaderProfile.tsx

@@ -1,4 +1,3 @@
-import { ChangePasswordButton, LogoutButton, StopImpersonateButton } from './buttons';
 import { HeaderToggleButton, MainCard } from '@/components';
 import { Avatar, IconButton, Transitions } from '@/components/@extended';
 import { usePopoverState } from '@/hooks';
@@ -7,6 +6,7 @@ import { Popper } from '@mui/base';
 import { CardContent, ClickAwayListener, Grid, List, Paper, Stack, Tooltip, Typography, useTheme } from '@mui/material';
 import { useDataProvider, useGetIdentity, useLogout } from 'ra-core';
 import React, { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { ChangePasswordButton, LogoutButton, StopImpersonateButton } from './buttons';
 
 interface HeaderProfileProps {
   roles?: ReactNode;
@@ -86,7 +86,6 @@ function HeaderProfile(props: HeaderProfileProps) {
                       </Grid>
                       <Grid item>
                         <Tooltip title="Logout">
-                          {/* @ts-expect-error WARN: wtf  */}
                           <IconButton size="large" sx={{ color: 'text.primary' }} onClick={handleLogout}>
                             <LogoutOutlined />
                           </IconButton>

package/src/components/Pagination/Pagination.tsx

@@ -1,6 +1,5 @@
-import { FC, ReactElement, memo, useCallback, useEffect, useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
 import { TablePagination, TablePaginationBaseProps, Theme, Toolbar, useMediaQuery, useTheme } from '@mui/material';
+import PropTypes from 'prop-types';
 import {
   ComponentPropType,
   ListPaginationContextValue,
@@ -9,9 +8,10 @@ import {
   useResourceDefinition,
   useTranslate
 } from 'ra-core';
+import { FC, ReactElement, memo, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { PaginationActions, PaginationActionsProps } from './PaginationActions';
 import { debounce } from 'lodash';
+import { PaginationActions, PaginationActionsProps } from './PaginationActions';
 
 const Pagination: FC<PaginationProps> = memo((props) => {
   const { rowsPerPageOptions = DefaultRowsPerPageOptions, actions, limit = null, ...rest } = props;
@@ -244,3 +244,4 @@ interface PaginationProps extends TablePaginationBaseProps, Partial<ListPaginati
 }
 
 export { Pagination };
+export type { PaginationProps };

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

@@ -1,8 +1,8 @@
 import { useAppConfig } from '@/components/AppStateProvider';
 import { FormHelperText, InputLabel, Stack } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import React from 'react';
-import { FieldTitle, InputProps, useInput } from 'react-admin';
+import React, { PropsWithChildren, ReactElement } from 'react';
+import { CommonInputProps, FieldTitle, useInput } from 'react-admin';
 
 function LabeledInput({
   label,
@@ -80,19 +80,19 @@ function LabeledInput({
   );
 }
 
-type LabeledInputProps = InputProps & {
-  sx?: any;
-  children?: React.ReactElement;
-  label?: string | boolean;
-  addLabel?: boolean;
-  resource?: string;
-  isRequired?: boolean;
-  source?: string;
-  display?: 'legend' | 'label';
-  helperText?: string | boolean | React.ReactElement | null;
-  divider?: boolean;
-  chip?: any;
-};
+type LabeledInputProps = PropsWithChildren<
+  CommonInputProps & {
+    sx?: any;
+    label?: string | ReactElement | false;
+    addLabel?: boolean;
+    resource?: string;
+    isRequired?: boolean;
+    display?: 'legend' | 'label';
+    helperText?: string | boolean | React.ReactElement | null;
+    divider?: boolean;
+    chip?: any;
+  }
+>;
 
 export { LabeledInput };
 export type { LabeledInputProps };

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

@@ -0,0 +1,99 @@
+import { IconButton } from '@/components/@extended';
+import { LabeledInput, LabeledInputProps } from '@/components/ra-inputs/LabeledInput';
+import { SearchInput } from '@/components/ra-inputs/SearchInput';
+import { useDialogState } from '@/hooks';
+import { AddCircleRounded } from '@mui/icons-material';
+import { Stack } from '@mui/material';
+import _ from 'lodash';
+import { FilterPayload, Identifier, useInput } from 'ra-core';
+import { ReactElement, useCallback, useMemo } from 'react';
+import { EntityField, EntityLookupDialog, RecordRepresentationType } from './common';
+
+type ReferenceLookupInputProps = {
+  filter?: FilterPayload;
+  filterDefaultValues?: object;
+  filters?: ReactElement | ReactElement[];
+  recordRepresentation?: RecordRepresentationType;
+  reference: string;
+} & LabeledInputProps;
+
+function ReferenceLookupInput(props: ReferenceLookupInputProps): JSX.Element {
+  const {
+    children,
+    filter: propFilter,
+    filterDefaultValues,
+    filters: propFilters,
+    recordRepresentation,
+    reference,
+    source
+  } = props;
+  const { field } = useInput({ source });
+  const { value, onChange } = field ?? {};
+  const hasValue = !_.isEmpty(value);
+  const { open, handleOpen, handleClose } = useDialogState(false);
+  const filter = useMemo(
+    () =>
+      _.chain(propFilter ?? {})
+        .clone()
+        .extend({ id__ne: value })
+        .value(),
+    [propFilter, value]
+  );
+  const filters = useMemo(
+    () => propFilters ?? [<SearchInput key="keyword" source="keyword" alwaysOn />],
+    [propFilters]
+  );
+
+  const onAdd = useCallback(
+    (ids: Identifier[]) => {
+      const id = _.first(ids);
+      handleClose();
+      onChange(id);
+      return id;
+    },
+    [onChange, handleClose]
+  );
+
+  const onDelete = useCallback(() => onChange(null), [onChange]);
+
+  return (
+    <LabeledInput {...props}>
+      <Stack alignItems="center" direction="row" spacing={1}>
+        {hasValue ? (
+          <EntityField
+            id={value}
+            onClick={handleOpen}
+            onDelete={onDelete}
+            recordRepresentation={recordRepresentation}
+            resource={reference}
+          />
+        ) : null}
+        {!hasValue && (
+          <IconButton onClick={handleOpen}>
+            <AddCircleRounded />
+          </IconButton>
+        )}
+        <EntityLookupDialog
+          onCancel={handleClose}
+          onConfirm={onAdd}
+          multiple={false}
+          slotProps={{
+            dialog: { open, onClose: handleClose },
+            list: {
+              filter,
+              filterDefaultValues,
+              resource: reference
+            },
+            listToolbar: {
+              filters: filters
+            }
+          }}
+        >
+          {children}
+        </EntityLookupDialog>
+      </Stack>
+    </LabeledInput>
+  );
+}
+
+export { ReferenceLookupInput };

package/src/components/ra-inputs/ReferenceLookupInput/ReferenceManyLookupInput.tsx

@@ -0,0 +1,99 @@
+import { IconButton } from '@/components/@extended';
+import { LabeledInput, LabeledInputProps } from '@/components/ra-inputs/LabeledInput';
+import { SearchInput } from '@/components/ra-inputs/SearchInput';
+import { useDialogState } from '@/hooks';
+import { AddCircleRounded } from '@mui/icons-material';
+import { Stack } from '@mui/material';
+import _ from 'lodash';
+import { FilterPayload, Identifier, RaRecord, useInput } from 'ra-core';
+import { ReactElement, useCallback, useMemo } from 'react';
+import { EntityField, EntityLookupDialog, RecordRepresentationType } from './common';
+
+type ReferenceManyLookupInputProps = {
+  filter?: FilterPayload;
+  filterDefaultValues?: object;
+  filters?: ReactElement | ReactElement[];
+  recordRepresentation?: RecordRepresentationType;
+  reference: string;
+} & LabeledInputProps;
+
+function ReferenceManyLookupInput(props: ReferenceManyLookupInputProps): JSX.Element {
+  const {
+    children,
+    filter: propFilter,
+    filterDefaultValues,
+    filters: propFilters,
+    recordRepresentation,
+    reference,
+    source
+  } = props;
+  const { field } = useInput({ source });
+  const { value, onChange } = field ?? {};
+  const hasValue = !_.isEmpty(value);
+  const { open, handleOpen, handleClose } = useDialogState(false);
+  const filter = useMemo(
+    () =>
+      _.chain(propFilter ?? {})
+        .clone()
+        .extend({ id__nin: value })
+        .value(),
+    [propFilter, value]
+  );
+  const filters = useMemo(
+    () => propFilters ?? [<SearchInput key="keyword" source="keyword" alwaysOn />],
+    [propFilters]
+  );
+
+  const onAdd = useCallback(
+    (ids: Identifier[]) => {
+      const newValue = _.union(value ?? [], ids);
+      handleClose();
+      onChange(newValue);
+      return newValue;
+    },
+    [onChange, handleClose, value]
+  );
+
+  const onDelete = useCallback((record: RaRecord) => onChange(_.without(value ?? [], record.id)), [onChange, value]);
+
+  return (
+    <LabeledInput {...props}>
+      <Stack alignItems="center" direction="row" spacing={1}>
+        {hasValue
+          ? _.map(value ?? [], (id, index) => (
+              <EntityField
+                key={index}
+                id={id}
+                onDelete={onDelete}
+                recordRepresentation={recordRepresentation}
+                resource={reference}
+              />
+            ))
+          : null}
+        <IconButton onClick={handleOpen}>
+          <AddCircleRounded />
+        </IconButton>
+        <EntityLookupDialog
+          onCancel={handleClose}
+          onConfirm={onAdd}
+          multiple={true}
+          slotProps={{
+            dialog: { open, onClose: handleClose },
+            list: {
+              filter,
+              filterDefaultValues,
+              resource: reference
+            },
+            listToolbar: {
+              filters: filters
+            }
+          }}
+        >
+          {children}
+        </EntityLookupDialog>
+      </Stack>
+    </LabeledInput>
+  );
+}
+
+export { ReferenceManyLookupInput };

package/src/components/ra-inputs/ReferenceLookupInput/common.tsx

@@ -0,0 +1,182 @@
+import { Pagination, PaginationProps } from '@/components/Pagination';
+import { FunctionField } from '@/components/ra-fields';
+import { Datagrid, ListToolbar, ListToolbarProps } from '@/components/ra-lists';
+import { DatagridProps } from '@/components/ra-lists/Datagrid/Datagrid';
+import { useUuid } from '@/hooks';
+import { CheckBox, CheckBoxOutlineBlankOutlined, Error } from '@mui/icons-material';
+import {
+  Button,
+  Chip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentProps,
+  DialogProps,
+  Stack
+} from '@mui/material';
+import _ from 'lodash';
+import {
+  Identifier,
+  ListBase,
+  ListControllerProps,
+  RaRecord,
+  RecordRepresentation,
+  WithListContext,
+  useGetMany,
+  useGetRecordRepresentation,
+  useTranslate
+} from 'ra-core';
+import { PropsWithChildren, useCallback } from 'react';
+
+type RecordRepresentationType = (record: RaRecord) => string;
+type EntityFieldProps = {
+  id: Identifier;
+  onClick?: (record: RaRecord) => void;
+  onDelete?: (record: RaRecord) => void;
+  recordRepresentation?: RecordRepresentationType;
+  resource: string;
+};
+type EntityLookupDialogProps = PropsWithChildren<{
+  onCancel: () => void;
+  onConfirm: (selectedIds: Identifier[]) => void;
+  multiple: boolean;
+  slotProps?: {
+    dataGrid?: DatagridProps;
+    dialog?: DialogProps;
+    dialogContent?: DialogContentProps;
+    list?: ListControllerProps;
+    listToolbar?: Pick<ListToolbarProps, 'filters'>;
+    pagination?: PaginationProps;
+  };
+}>;
+
+function EntityField(props: EntityFieldProps): JSX.Element | null {
+  const { id, onClick: onClickCb, onDelete: onDeleteCb, recordRepresentation, resource } = props;
+  const fallbackRecordRepresentation = useGetRecordRepresentation(resource);
+  const { data, isLoading, error } = useGetMany<RaRecord>(resource, { ids: [id] });
+  const record = _.find(data ?? [], { id });
+  const canDelete = !_.isNil(record) && _.isFunction(onDeleteCb);
+  const onDelete = useCallback(() => {
+    if (canDelete) {
+      onDeleteCb(record);
+    }
+  }, [onDeleteCb, record, canDelete]);
+  const canClick = !_.isNil(record) && _.isFunction(onClickCb);
+  const onClick = useCallback(() => {
+    if (canClick) {
+      onClickCb(record);
+    }
+  }, [onClickCb, record, canClick]);
+
+  if (isLoading) {
+    return null;
+  } else if (error || _.isNil(record)) {
+    return <Error color="error" />;
+  } else {
+    const label = _.isFunction(recordRepresentation)
+      ? recordRepresentation(record)
+      : fallbackRecordRepresentation(record);
+    return <Chip label={label} onDelete={canDelete ? onDelete : undefined} onClick={canClick ? onClick : undefined} />;
+  }
+}
+
+function EntityLookupDialog(props: EntityLookupDialogProps): JSX.Element {
+  const uuid = useUuid();
+  const t = useTranslate();
+  const { children, multiple, onCancel, onConfirm, slotProps } = props;
+
+  const {
+    dialogContent: dialogContentProps = {},
+    listToolbar: listToolbarProps = {},
+    pagination: paginationProps
+  } = slotProps ?? {};
+
+  const listProps = _.chain(slotProps?.list)
+    .defaults({ disableSyncWithLocation: true, emptyWhileLoading: true, exporter: false })
+    .value();
+
+  const hasListToolbar = !_.isNil(listToolbarProps.filters);
+
+  const dialogProps = _.chain(slotProps?.dialog)
+    .defaults({ disableEscapeKeyDown: true, fullWidth: true, keepMounted: false, open: false })
+    .value();
+
+  const dataGridProps = _.chain(slotProps?.dataGrid)
+    .defaults({})
+    .extend({
+      bulkActionButtons: false,
+      rowClick: 'toggleSelection'
+    })
+    .value();
+
+  const updateSelection = useCallback(
+    (selectedIds: Identifier[], id: Identifier): Identifier[] => {
+      if (multiple) {
+        return _.includes(selectedIds, id) ? _.without(selectedIds, id) : _.concat(selectedIds, id);
+      } else {
+        return _.includes(selectedIds, id) ? [] : [id];
+      }
+    },
+    [multiple]
+  );
+  return (
+    <ListBase {...listProps} storeKey={`reference-lookup-input-${uuid}`}>
+      <WithListContext
+        render={({ onSelect, selectedIds, onUnselectItems }) => {
+          return (
+            <Dialog
+              {...dialogProps}
+              onClose={() => {
+                onUnselectItems();
+                onCancel();
+              }}
+            >
+              <DialogContent {...dialogContentProps}>
+                <Stack spacing={2} flexDirection="column">
+                  {hasListToolbar ? <ListToolbar {...listToolbarProps} /> : null}
+                  <Datagrid {...dataGridProps} onToggleItem={(id) => onSelect(updateSelection(selectedIds, id))}>
+                    <FunctionField
+                      render={(record) =>
+                        _.includes(selectedIds, record.id) ? <CheckBox /> : <CheckBoxOutlineBlankOutlined />
+                      }
+                    />
+                    {children ?? (
+                      <FunctionField
+                        label={t('ra.input.referenceLookup.dialog.defaultField')}
+                        render={(record) => <RecordRepresentation record={record} />}
+                      />
+                    )}
+                  </Datagrid>
+                  <Pagination {...paginationProps} />
+                  <DialogActions>
+                    <Button
+                      onClick={() => {
+                        onUnselectItems();
+                        onCancel();
+                      }}
+                    >
+                      {t('ra.input.referenceLookup.dialog.cancel')}
+                    </Button>
+                    <Button
+                      disabled={_.isEmpty(selectedIds)}
+                      onClick={() => {
+                        onConfirm(selectedIds);
+                        onUnselectItems();
+                      }}
+                      color="primary"
+                    >
+                      {t('ra.input.referenceLookup.dialog.confirm')}
+                    </Button>
+                  </DialogActions>
+                </Stack>
+              </DialogContent>
+            </Dialog>
+          );
+        }}
+      />
+    </ListBase>
+  );
+}
+
+export { EntityField, EntityLookupDialog };
+export type { EntityFieldProps, EntityLookupDialogProps, RecordRepresentationType };

package/src/components/ra-inputs/ReferenceLookupInput/index.ts

@@ -0,0 +1,2 @@
+export * from './ReferenceLookupInput';
+export * from './ReferenceManyLookupInput';

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

@@ -1,14 +1,16 @@
 import { ReferenceManyField, ReferenceManyFieldProps } from '@/components/ra-fields';
-import { ReactElement } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import { ListToolbar, Pagination, ResourceContextProvider } from 'react-admin';
 
-type ReferenceManyInputProps = {
-  reference: string;
-  target: string;
-  children: React.ReactNode;
-  filters?: ReactElement;
-  actions?: ReactElement;
-} & ReferenceManyFieldProps;
+type ReferenceManyInputProps = PropsWithChildren<
+  {
+    reference: string;
+    target: string;
+    children: React.ReactNode;
+    filters?: ReactElement;
+    actions?: ReactElement;
+  } & ReferenceManyFieldProps
+>;
 
 function ReferenceManyInput({
   reference,

package/src/components/ra-inputs/index.ts

@@ -16,6 +16,7 @@ export * from './RadioButtonGroupInput';
 export * from './RecordInput';
 export * from './ReferenceArrayInput';
 export * from './ReferenceInput';
+export * from './ReferenceLookupInput';
 export * from './ReferenceManyInput';
 export * from './SearchInput';
 export * from './SelectArrayInput';

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

@@ -145,7 +145,7 @@ function Empty({
           ) : null)}
       </Box>
       <StyledToolbar className={EmptyClasses.toolbar}>
-        {actions || (canCreate ? <CreateButton disableFloatingButton /> : null)}
+        {actions || (canCreate ? <CreateButton variant="contained" size="medium" disableFloatingButton /> : null)}
       </StyledToolbar>
     </Root>
   );

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './mui';
+export * from './useDialogState';
 export * from './useLocalStorage';
 export * from './useLocalizedValue';
 export * from './useMemoizedObject';
@@ -6,3 +7,4 @@ export * from './usePopoverState';
 export * from './useRefDimensions';
 export * from './useResourceTitle';
 export * from './useSystemTheme';
+export * from './useUuid';

package/src/hooks/useDialogState.tsx

@@ -0,0 +1,27 @@
+import { useCallback, useState } from 'react';
+
+type UseDialogStateReturn = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  handleOpen: () => void;
+  handleClose: () => void;
+  handleToggle: () => void;
+};
+
+function useDialogState(initialState: boolean = false): UseDialogStateReturn {
+  const [open, setOpen] = useState(Boolean(initialState));
+  const safeSetOpen = useCallback((open: boolean) => setOpen(Boolean(open)), [setOpen]);
+  const handleOpen = useCallback(() => setOpen(true), [setOpen]);
+  const handleClose = useCallback(() => setOpen(false), [setOpen]);
+  const handleToggle = useCallback(() => setOpen((prev) => !prev), [setOpen]);
+
+  return {
+    open,
+    setOpen: safeSetOpen,
+    handleOpen,
+    handleClose,
+    handleToggle
+  };
+}
+
+export { useDialogState };

package/src/hooks/useUuid.tsx

@@ -0,0 +1,14 @@
+import { uuid as getUuid } from '@/utils';
+import { useEffect, useState } from 'react';
+
+function useUuid(uuid?: string): string {
+  const [_uuid, setUuid] = useState(uuid ?? getUuid());
+
+  useEffect(() => {
+    setUuid(uuid ?? getUuid());
+  }, [uuid]);
+
+  return _uuid;
+}
+
+export { useUuid };