@mantine/core/cjs/components/EmptyState/EmptyState.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"EmptyState.cjs","names":["Fragment","Children","createVarsResolver","getSize","factory","useProps","useStyles","EmptyStateIndicator","EmptyStateProvider","Box","EmptyStateTitle","EmptyStateDescription","classes","EmptyStateActions"],"sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import { Children, Fragment, isValidElement } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  MantineColor,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { EmptyStateProvider } from './EmptyState.context';\nimport {\n  EmptyStateActions,\n  EmptyStateActionsFactory,\n  EmptyStateActionsProps,\n  EmptyStateActionsStylesNames,\n} from './EmptyStateActions/EmptyStateActions';\nimport {\n  EmptyStateDescription,\n  EmptyStateDescriptionFactory,\n  EmptyStateDescriptionProps,\n  EmptyStateDescriptionStylesNames,\n} from './EmptyStateDescription/EmptyStateDescription';\nimport {\n  EmptyStateIndicator,\n  EmptyStateIndicatorFactory,\n  EmptyStateIndicatorProps,\n  EmptyStateIndicatorStylesNames,\n} from './EmptyStateIndicator/EmptyStateIndicator';\nimport {\n  EmptyStateTitle,\n  EmptyStateTitleFactory,\n  EmptyStateTitleProps,\n  EmptyStateTitleStylesNames,\n} from './EmptyStateTitle/EmptyStateTitle';\nimport classes from './EmptyState.module.css';\n\nexport type EmptyStateStylesNames =\n  | 'root'\n  | 'body'\n  | EmptyStateIndicatorStylesNames\n  | EmptyStateTitleStylesNames\n  | EmptyStateDescriptionStylesNames\n  | EmptyStateActionsStylesNames;\n\nexport type EmptyStateVariant = 'filled' | 'light';\n\nexport type EmptyStateCssVariables = {\n  root:\n    | '--empty-state-indicator-size'\n    | '--empty-state-gap'\n    | '--empty-state-title-fz'\n    | '--empty-state-description-fz'\n    | '--empty-state-indicator-bg'\n    | '--empty-state-indicator-color';\n};\n\nexport interface EmptyStateProps\n  extends BoxProps, StylesApiProps<EmptyStateFactory>, ElementProps<'div', 'title'> {\n  /** Controls indicator size, gap between elements and font sizes of title and description @default 'md' */\n  size?: MantineSize;\n\n  /** Content alignment. `center` stacks the content in a centered column, `left`/`right` place the indicator on the side with the content next to it @default 'center' */\n  align?: 'left' | 'center' | 'right';\n\n  /** Controls the indicator appearance. `filled` and `light` display a colored circular background behind the icon. If not set, the icon is displayed with dimmed color */\n  variant?: EmptyStateVariant;\n\n  /** Key of `theme.colors` or any valid CSS color, used by `filled` and `light` variants @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Title content, rendered inside `EmptyState.Title` */\n  title?: React.ReactNode;\n\n  /** Description content, rendered inside `EmptyState.Description` */\n  description?: React.ReactNode;\n\n  /** Icon or illustration, rendered inside `EmptyState.Indicator` */\n  icon?: React.ReactNode;\n\n  /** If set, a neutral circular background is displayed behind the indicator. Setting `variant` always displays a colored background regardless of this prop @default false */\n  withIndicatorBackground?: boolean;\n\n  /** `EmptyState` compound components, rendered after the shorthand props content */\n  children?: React.ReactNode;\n}\n\nexport type EmptyStateFactory = Factory<{\n  props: EmptyStateProps;\n  ref: HTMLDivElement;\n  stylesNames: EmptyStateStylesNames;\n  vars: EmptyStateCssVariables;\n  variant: EmptyStateVariant;\n  staticComponents: {\n    Indicator: typeof EmptyStateIndicator;\n    Title: typeof EmptyStateTitle;\n    Description: typeof EmptyStateDescription;\n    Actions: typeof EmptyStateActions;\n  };\n}>;\n\nconst defaultProps = {\n  size: 'md',\n  align: 'center',\n} satisfies Partial<EmptyStateProps>;\n\nfunction flattenChildren(children: React.ReactNode): React.ReactNode[] {\n  const flat: React.ReactNode[] = [];\n\n  const collect = (nodes: React.ReactNode) => {\n    Children.forEach(nodes, (child) => {\n      if (isValidElement(child) && child.type === Fragment) {\n        collect((child.props as { children?: React.ReactNode }).children);\n      } else {\n        flat.push(child);\n      }\n    });\n  };\n\n  collect(children);\n  return Children.toArray(flat);\n}\n\nconst varsResolver = createVarsResolver<EmptyStateFactory>((theme, { size, variant, color }) => {\n  const colors = variant\n    ? theme.variantColorResolver({ color: color || theme.primaryColor, theme, variant })\n    : null;\n\n  return {\n    root: {\n      '--empty-state-indicator-size': getSize(size, 'empty-state-indicator-size'),\n      '--empty-state-gap': getSize(size, 'empty-state-gap'),\n      '--empty-state-title-fz': getSize(size, 'empty-state-title-fz'),\n      '--empty-state-description-fz': getSize(size, 'empty-state-description-fz'),\n      '--empty-state-indicator-bg': colors ? colors.background : undefined,\n      '--empty-state-indicator-color': colors ? colors.color : undefined,\n    },\n  };\n});\n\nexport const EmptyState = factory<EmptyStateFactory>((_props) => {\n  const props = useProps('EmptyState', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    align,\n    variant,\n    color,\n    title,\n    description,\n    icon,\n    withIndicatorBackground,\n    children,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<EmptyStateFactory>({\n    name: 'EmptyState',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const bodyChildren: React.ReactNode[] = [];\n  let childrenIndicator: React.ReactNode = null;\n\n  flattenChildren(children).forEach((child) => {\n    if (\n      isValidElement(child) &&\n      (child.type === EmptyStateIndicator ||\n        (child.type as any)?.displayName === '@mantine/core/EmptyStateIndicator')\n    ) {\n      childrenIndicator = child;\n    } else {\n      bodyChildren.push(child);\n    }\n  });\n\n  const indicator = icon ? <EmptyStateIndicator>{icon}</EmptyStateIndicator> : childrenIndicator;\n  const hasBody = title != null || description != null || bodyChildren.length > 0;\n\n  return (\n    <EmptyStateProvider\n      value={{ getStyles, withIndicatorBackground: withIndicatorBackground || !!variant }}\n    >\n      <Box {...getStyles('root', { variant })} variant={variant} mod={[{ align }, mod]} {...others}>\n        {indicator}\n        {hasBody && (\n          <div {...getStyles('body')}>\n            {title && <EmptyStateTitle>{title}</EmptyStateTitle>}\n            {description && <EmptyStateDescription>{description}</EmptyStateDescription>}\n            {bodyChildren}\n          </div>\n        )}\n      </Box>\n    </EmptyStateProvider>\n  );\n});\n\nEmptyState.classes = classes;\nEmptyState.varsResolver = varsResolver;\nEmptyState.displayName = '@mantine/core/EmptyState';\nEmptyState.Indicator = EmptyStateIndicator;\nEmptyState.Title = EmptyStateTitle;\nEmptyState.Description = EmptyStateDescription;\nEmptyState.Actions = EmptyStateActions;\n\nexport namespace EmptyState {\n  export type Props = EmptyStateProps;\n  export type StylesNames = EmptyStateStylesNames;\n  export type CssVariables = EmptyStateCssVariables;\n  export type Variant = EmptyStateVariant;\n  export type Factory = EmptyStateFactory;\n\n  export namespace Indicator {\n    export type Props = EmptyStateIndicatorProps;\n    export type StylesNames = EmptyStateIndicatorStylesNames;\n    export type Factory = EmptyStateIndicatorFactory;\n  }\n\n  export namespace Title {\n    export type Props = EmptyStateTitleProps;\n    export type StylesNames = EmptyStateTitleStylesNames;\n    export type Factory = EmptyStateTitleFactory;\n  }\n\n  export namespace Description {\n    export type Props = EmptyStateDescriptionProps;\n    export type StylesNames = EmptyStateDescriptionStylesNames;\n    export type Factory = EmptyStateDescriptionFactory;\n  }\n\n  export namespace Actions {\n    export type Props = EmptyStateActionsProps;\n    export type StylesNames = EmptyStateActionsStylesNames;\n    export type Factory = EmptyStateActionsFactory;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA0GA,MAAM,eAAe;CACnB,MAAM;CACN,OAAO;AACT;AAEA,SAAS,gBAAgB,UAA8C;CACrE,MAAM,OAA0B,CAAC;CAEjC,MAAM,WAAW,UAA2B;EAC1C,MAAA,SAAS,QAAQ,QAAQ,UAAU;GACjC,KAAA,GAAA,MAAA,eAAA,CAAmB,KAAK,KAAK,MAAM,SAASA,MAAAA,UAC1C,QAAS,MAAM,MAAyC,QAAQ;QAEhE,KAAK,KAAK,KAAK;EAEnB,CAAC;CACH;CAEA,QAAQ,QAAQ;CAChB,OAAOC,MAAAA,SAAS,QAAQ,IAAI;AAC9B;AAEA,MAAM,eAAeC,6BAAAA,oBAAuC,OAAO,EAAE,MAAM,SAAS,YAAY;CAC9F,MAAM,SAAS,UACX,MAAM,qBAAqB;EAAE,OAAO,SAAS,MAAM;EAAc;EAAO;CAAQ,CAAC,IACjF;CAEJ,OAAO,EACL,MAAM;EACJ,gCAAgCC,iBAAAA,QAAQ,MAAM,4BAA4B;EAC1E,qBAAqBA,iBAAAA,QAAQ,MAAM,iBAAiB;EACpD,0BAA0BA,iBAAAA,QAAQ,MAAM,sBAAsB;EAC9D,gCAAgCA,iBAAAA,QAAQ,MAAM,4BAA4B;EAC1E,8BAA8B,SAAS,OAAO,aAAa,KAAA;EAC3D,iCAAiC,SAAS,OAAO,QAAQ,KAAA;CAC3D,EACF;AACF,CAAC;AAED,MAAa,aAAaC,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,SACA,OACA,OACA,aACA,MACA,yBACA,UACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA6B;EAC7C,MAAM;EACN,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,eAAkC,CAAC;CACzC,IAAI,oBAAqC;CAEzC,gBAAgB,QAAQ,CAAC,CAAC,SAAS,UAAU;EAC3C,KAAA,GAAA,MAAA,eAAA,CACiB,KAAK,MACnB,MAAM,SAASC,4BAAAA,uBACb,MAAM,MAAc,gBAAgB,sCAEvC,oBAAoB;OAEpB,aAAa,KAAK,KAAK;CAE3B,CAAC;CAED,MAAM,YAAY,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,4BAAAA,qBAAD,EAAA,UAAsB,KAA0B,CAAA,IAAI;CAC7E,MAAM,UAAU,SAAS,QAAQ,eAAe,QAAQ,aAAa,SAAS;CAE9E,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,oBAAD;EACE,OAAO;GAAE;GAAW,yBAAyB,2BAA2B,CAAC,CAAC;EAAQ;YAElF,iBAAA,GAAA,kBAAA,KAAA,CAACC,YAAAA,KAAD;GAAK,GAAI,UAAU,QAAQ,EAAE,QAAQ,CAAC;GAAY;GAAS,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG;GAAG,GAAI;aAAtF,CACG,WACA,WACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,GAAI,UAAU,MAAM;cAAzB;KACG,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,iBAAD,EAAA,UAAkB,MAAuB,CAAA;KAClD,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,uBAAD,EAAA,UAAwB,YAAmC,CAAA;KAC1E;IACE;KAEJ;;CACa,CAAA;AAExB,CAAC;AAED,WAAW,UAAUC,0BAAAA;AACrB,WAAW,eAAe;AAC1B,WAAW,cAAc;AACzB,WAAW,YAAYL,4BAAAA;AACvB,WAAW,QAAQG,wBAAAA;AACnB,WAAW,cAAcC,8BAAAA;AACzB,WAAW,UAAUE,0BAAAA"}