@mantine/core/cjs/components/SimpleGrid/SimpleGridVariables.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"SimpleGridVariables.cjs","names":["rem","useMantineTheme","filterProps","getSpacing","getBaseValue","keys","InlineStyles","getSortedBreakpoints","px"],"sources":["../../../src/components/SimpleGrid/SimpleGridVariables.tsx"],"sourcesContent":["import {\n  filterProps,\n  getBaseValue,\n  getSortedBreakpoints,\n  getSpacing,\n  InlineStyles,\n  keys,\n  MantineBreakpoint,\n  px,\n  rem,\n  useMantineTheme,\n} from '../../core';\nimport type { SimpleGridProps } from './SimpleGrid';\n\ninterface SimpleGridVariablesProps extends SimpleGridProps {\n  selector: string;\n}\n\nfunction getMinColWidthValue(value: string | number | undefined): string | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  if (typeof value === 'number') {\n    return rem(value);\n  }\n\n  return value;\n}\n\nexport function SimpleGridMediaVariables({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n  autoRows,\n  selector,\n}: SimpleGridVariablesProps) {\n  const theme = useMantineTheme();\n  const _verticalSpacing = verticalSpacing === undefined ? spacing : verticalSpacing;\n  const useAutoColumns = minColWidth !== undefined;\n\n  const baseStyles: Record<string, string | undefined> = filterProps({\n    '--sg-spacing-x': getSpacing(getBaseValue(spacing)),\n    '--sg-spacing-y': getSpacing(getBaseValue(_verticalSpacing)),\n    '--sg-auto-rows': autoRows,\n    ...(useAutoColumns\n      ? { '--sg-min-col-width': getMinColWidthValue(minColWidth) }\n      : { '--sg-cols': getBaseValue(cols)?.toString() }),\n  });\n\n  const queries = keys(theme.breakpoints).reduce<Record<string, Record<string, any>>>(\n    (acc, breakpoint) => {\n      if (!acc[breakpoint]) {\n        acc[breakpoint] = {};\n      }\n\n      if (typeof spacing === 'object' && spacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-x'] = getSpacing(spacing[breakpoint]);\n      }\n\n      if (typeof _verticalSpacing === 'object' && _verticalSpacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-y'] = getSpacing(_verticalSpacing[breakpoint]);\n      }\n\n      if (!useAutoColumns && typeof cols === 'object' && cols[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-cols'] = cols[breakpoint];\n      }\n\n      return acc;\n    },\n    {}\n  );\n\n  const sortedBreakpoints = getSortedBreakpoints(keys(queries), theme.breakpoints).filter(\n    (breakpoint) => keys(queries[breakpoint.value]).length > 0\n  );\n\n  const media = sortedBreakpoints.map((breakpoint) => ({\n    query: `(min-width: ${theme.breakpoints[breakpoint.value as MantineBreakpoint]})`,\n    styles: queries[breakpoint.value],\n  }));\n\n  return <InlineStyles styles={baseStyles} media={media} selector={selector} />;\n}\n\nfunction getBreakpoints(values: unknown) {\n  if (typeof values === 'object' && values !== null) {\n    return keys(values);\n  }\n\n  return [];\n}\n\nfunction sortBreakpoints(breakpoints: string[]) {\n  return breakpoints.sort((a, b) => (px(a) as number) - (px(b) as number));\n}\n\nfunction getUniqueBreakpoints({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n}: Omit<SimpleGridVariablesProps, 'selector'>) {\n  const breakpoints = Array.from(\n    new Set([\n      ...getBreakpoints(spacing),\n      ...getBreakpoints(verticalSpacing),\n      ...(minColWidth !== undefined ? [] : getBreakpoints(cols)),\n    ])\n  );\n\n  return sortBreakpoints(breakpoints);\n}\n\nexport function SimpleGridContainerVariables({\n  spacing,\n  verticalSpacing,\n  cols,\n  minColWidth,\n  autoRows,\n  selector,\n}: SimpleGridVariablesProps) {\n  const _verticalSpacing = verticalSpacing === undefined ? spacing : verticalSpacing;\n  const useAutoColumns = minColWidth !== undefined;\n\n  const baseStyles: Record<string, string | undefined> = filterProps({\n    '--sg-spacing-x': getSpacing(getBaseValue(spacing)),\n    '--sg-spacing-y': getSpacing(getBaseValue(_verticalSpacing)),\n    '--sg-auto-rows': autoRows,\n    ...(useAutoColumns\n      ? { '--sg-min-col-width': getMinColWidthValue(minColWidth) }\n      : { '--sg-cols': getBaseValue(cols)?.toString() }),\n  });\n\n  const uniqueBreakpoints = getUniqueBreakpoints({ spacing, verticalSpacing, cols, minColWidth });\n\n  const queries = uniqueBreakpoints.reduce<Record<string, Record<string, any>>>(\n    (acc, breakpoint) => {\n      if (!acc[breakpoint]) {\n        acc[breakpoint] = {};\n      }\n\n      if (typeof spacing === 'object' && spacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-x'] = getSpacing(spacing[breakpoint]);\n      }\n\n      if (typeof _verticalSpacing === 'object' && _verticalSpacing[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-spacing-y'] = getSpacing(_verticalSpacing[breakpoint]);\n      }\n\n      if (!useAutoColumns && typeof cols === 'object' && cols[breakpoint] !== undefined) {\n        acc[breakpoint]['--sg-cols'] = cols[breakpoint];\n      }\n\n      return acc;\n    },\n    {}\n  );\n\n  const media = uniqueBreakpoints.map((breakpoint) => ({\n    query: `simple-grid (min-width: ${breakpoint})`,\n    styles: queries[breakpoint],\n  }));\n\n  return <InlineStyles styles={baseStyles} container={media} selector={selector} />;\n}\n"],"mappings":"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"}