tessl/npm-mui--utils

Utility functions for React components providing hooks, PropType validators, DOM utilities, and component helpers.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Slot and Props Utilities

Name: tessl/npm-mui--utils
Author: tessl

Advanced prop management utilities for component slot patterns and dynamic prop resolution. These utilities enable sophisticated component composition and prop forwarding patterns.

Capabilities

Slot Props Management

useSlotProps

Hook for managing slot component props with advanced prop resolution and owner state integration.

/**
 * Hook for managing slot component props
 * @param parameters - Slot props configuration
 * @returns Resolved slot props and internal ref
 */
function unstable_useSlotProps<TSlotComponent, TSlotState, TSlotOwnerState>(
  parameters: UseSlotPropsParameters<TSlotComponent, TSlotState, TSlotOwnerState>
): UseSlotPropsResult<TSlotComponent>;

interface UseSlotPropsParameters<TSlotComponent, TSlotState, TSlotOwnerState> {
  /** The element type for the slot */
  elementType: TSlotComponent;
  /** External props passed to the slot */
  externalSlotProps: any;
  /** Owner state for prop resolution */
  ownerState: TSlotOwnerState;
  /** Skip resolving slot props if true */
  skipResolvingSlotProps?: boolean;
  /** Additional props to merge */
  additionalProps?: any;
  /** Internal props for the slot */
  internalSlotProps?: any;
}

interface UseSlotPropsResult<TSlotComponent> {
  /** Resolved props for the slot component */
  props: React.ComponentPropsWithRef<TSlotComponent>;
  /** Internal ref for the slot */
  internalRef: React.Ref<any>;
}

Usage Example:

import { unstable_useSlotProps as useSlotProps } from '@mui/utils';

function CustomButton({ 
  slots = {}, 
  slotProps = {},
  variant = 'contained',
  children,
  ...props 
}) {
  const ownerState = { variant };
  
  const Root = slots.root || 'button';
  const rootProps = useSlotProps({
    elementType: Root,
    externalSlotProps: slotProps.root,
    ownerState,
    additionalProps: {
      className: `custom-button custom-button-${variant}`,
      ...props
    }
  });

  return <Root {...rootProps.props} ref={rootProps.internalRef}>{children}</Root>;
}

Types

type SlotComponentProps<TSlotComponent extends React.ElementType, TOverrides, TOwnerState> =
  | (Partial<React.ComponentPropsWithRef<TSlotComponent>> & TOverrides)
  | ((ownerState: TOwnerState) => Partial<React.ComponentPropsWithRef<TSlotComponent>> & TOverrides);

type SlotComponentPropsWithSlotState<
  TSlotComponent extends React.ElementType,
  TOverrides,
  TOwnerState,
  TSlotState
> =
  | (Partial<React.ComponentPropsWithRef<TSlotComponent>> & TOverrides)
  | ((
      ownerState: TOwnerState,
      slotState: TSlotState,
    ) => Partial<React.ComponentPropsWithRef<TSlotComponent>> & TOverrides);

type WithOptionalOwnerState<Props extends { ownerState: unknown }> = Omit<
  Props,
  'ownerState'
> & Partial<Pick<Props, 'ownerState'>>;