@mantine/core/cjs/core/Box/Box.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Box.cjs","names":["useMantineTheme","extractStyleProps","useMantineSxTransform","useRandomClassName","parseStyleProps","STYlE_PROPS_DATA","useMantineDeduplicateInlineStyles","hashStyleProps","getBoxStyle","isNumberLike","getBoxMod","InlineStyles","polymorphic"],"sources":["../../../src/core/Box/Box.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { polymorphic } from '../factory';\nimport { hashStyleProps, InlineStyles } from '../InlineStyles';\nimport {\n  MantineBreakpoint,\n  useMantineDeduplicateInlineStyles,\n  useMantineSxTransform,\n  useMantineTheme,\n} from '../MantineProvider';\nimport { isNumberLike } from '../utils';\nimport type { CssVarsProp, MantineStyleProp } from './Box.types';\nimport { getBoxMod } from './get-box-mod/get-box-mod';\nimport { getBoxStyle } from './get-box-style/get-box-style';\nimport {\n  extractStyleProps,\n  MantineStyleProps,\n  parseStyleProps,\n  STYlE_PROPS_DATA,\n} from './style-props';\nimport { useRandomClassName } from './use-random-classname/use-random-classname';\n\nexport type Mod = Record<string, any> | string;\nexport type BoxMod = Mod | Mod[] | BoxMod[];\n\nexport interface BoxProps extends MantineStyleProps {\n  /** Class added to the root element, if applicable */\n  className?: string;\n\n  /** Inline style added to root component element, can subscribe to theme defined on MantineProvider */\n  style?: MantineStyleProp;\n\n  /** CSS variables defined on root component element */\n  __vars?: CssVarsProp;\n\n  /** `size` property passed down the HTML element */\n  __size?: string;\n\n  /** Breakpoint above which the component is hidden with `display: none` */\n  hiddenFrom?: MantineBreakpoint;\n\n  /** Breakpoint below which the component is hidden with `display: none` */\n  visibleFrom?: MantineBreakpoint;\n\n  /** Determines whether component should be hidden in light color scheme with `display: none` */\n  lightHidden?: boolean;\n\n  /** Determines whether component should be hidden in dark color scheme with `display: none` */\n  darkHidden?: boolean;\n\n  /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */\n  mod?: BoxMod;\n}\n\nexport type ElementProps<\n  ElementType extends React.ElementType,\n  PropsToOmit extends string = never,\n> = Omit<React.ComponentProps<ElementType>, 'style' | PropsToOmit>;\n\nexport interface BoxComponentProps extends BoxProps {\n  /** Variant passed from parent component, sets `data-variant` */\n  variant?: string;\n\n  /** Size passed from parent component, sets `data-size` if value is not number like */\n  size?: string | number;\n}\n\nfunction _Box({\n  component,\n  style,\n  __vars,\n  className,\n  variant,\n  mod,\n  size,\n  hiddenFrom,\n  visibleFrom,\n  lightHidden,\n  darkHidden,\n  renderRoot,\n  __size,\n  ref,\n  ...others\n}: BoxComponentProps & { component: any; className: string; renderRoot: any; ref: any }) {\n  const theme = useMantineTheme();\n  const Element = component || 'div';\n  const { styleProps, rest } = extractStyleProps(others);\n  const useSxTransform = useMantineSxTransform();\n  const transformedSx = useSxTransform?.()?.(styleProps.sx);\n  const randomClassName = useRandomClassName();\n  const parsedStyleProps = parseStyleProps({\n    styleProps,\n    theme,\n    data: STYlE_PROPS_DATA,\n  });\n\n  const deduplicateInlineStyles = useMantineDeduplicateInlineStyles();\n  const responsiveClassName =\n    deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles\n      ? hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media)\n      : randomClassName;\n\n  const props = {\n    ref,\n    style: getBoxStyle({\n      theme,\n      style,\n      vars: __vars,\n      styleProps: parsedStyleProps.inlineStyles,\n    }),\n    className: cx(className, transformedSx, {\n      [responsiveClassName]: parsedStyleProps.hasResponsiveStyles,\n      'mantine-light-hidden': lightHidden,\n      'mantine-dark-hidden': darkHidden,\n      [`mantine-hidden-from-${hiddenFrom}`]: hiddenFrom,\n      [`mantine-visible-from-${visibleFrom}`]: visibleFrom,\n    }),\n    'data-variant': variant,\n    'data-size': isNumberLike(size) ? undefined : size || undefined,\n    size: __size,\n    ...getBoxMod(mod),\n    ...rest,\n  };\n\n  return (\n    <>\n      {parsedStyleProps.hasResponsiveStyles && (\n        <InlineStyles\n          selector={`.${responsiveClassName}`}\n          styles={parsedStyleProps.styles}\n          media={parsedStyleProps.media}\n          deduplicate={deduplicateInlineStyles}\n        />\n      )}\n\n      {typeof renderRoot === 'function' ? renderRoot(props) : <Element {...props} />}\n    </>\n  );\n}\n\n_Box.displayName = '@mantine/core/Box';\n\nexport const Box = polymorphic<'div', BoxComponentProps>(_Box);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkEA,SAAS,KAAK,EACZ,WACA,OACA,QACA,WACA,SACA,KACA,MACA,YACA,aACA,aACA,YACA,YACA,QACA,KACA,GAAG,UACoF;CACvF,MAAM,QAAQA,6BAAAA,gBAAgB;CAC9B,MAAM,UAAU,aAAa;CAC7B,MAAM,EAAE,YAAY,SAASC,4BAAAA,kBAAkB,MAAM;CAErD,MAAM,gBADiBC,wBAAAA,sBACY,IAAI,IAAI,WAAW,EAAE;CACxD,MAAM,kBAAkBC,6BAAAA,mBAAmB;CAC3C,MAAM,mBAAmBC,0BAAAA,gBAAgB;EACvC;EACA;EACA,MAAMC,yBAAAA;CACR,CAAC;CAED,MAAM,0BAA0BC,wBAAAA,kCAAkC;CAClE,MAAM,sBACJ,2BAA2B,iBAAiB,sBACxCC,oBAAAA,eAAe,iBAAiB,QAAQ,iBAAiB,KAAK,IAC9D;CAEN,MAAM,QAAQ;EACZ;EACA,OAAOC,sBAAAA,YAAY;GACjB;GACA;GACA,MAAM;GACN,YAAY,iBAAiB;EAC/B,CAAC;EACD,YAAA,GAAA,KAAA,SAAc,WAAW,eAAe;IACrC,sBAAsB,iBAAiB;GACxC,wBAAwB;GACxB,uBAAuB;IACtB,uBAAuB,eAAe;IACtC,wBAAwB,gBAAgB;EAC3C,CAAC;EACD,gBAAgB;EAChB,aAAaC,uBAAAA,aAAa,IAAI,IAAI,KAAA,IAAY,QAAQ,KAAA;EACtD,MAAM;EACN,GAAGC,oBAAAA,UAAU,GAAG;EAChB,GAAG;CACL;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,aAAa;CACd,CAAA,GAGF,OAAO,eAAe,aAAa,WAAW,KAAK,IAAI,iBAAA,GAAA,kBAAA,KAAC,SAAD,EAAS,GAAI,MAAQ,CAAA,CAC7E,EAAA,CAAA;AAEN;AAEA,KAAK,cAAc;AAEnB,MAAa,MAAMC,qCAAAA,YAAsC,IAAI"}