flowbite-react/dist/esm/components/Button/ButtonGroup.mjs.map

Official React components built for Flowbite and Tailwind CSS

{"version":3,"file":"ButtonGroup.mjs","sources":["../../../../src/components/Button/ButtonGroup.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactElement, ReactNode } from \"react\";\nimport { Children, cloneElement, isValidElement, useMemo } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { mergeDeep } from \"../../helpers/merge-deep\";\nimport { getTheme } from \"../../theme-store\";\nimport type { DeepPartial } from \"../../types\";\nimport type { ButtonProps } from \"../Button\";\n\nexport interface FlowbiteButtonGroupTheme {\n  base: string;\n  position: PositionInButtonGroup;\n}\n\nexport interface PositionInButtonGroup {\n  none: string;\n  start: string;\n  middle: string;\n  end: string;\n}\n\nexport interface ButtonGroupProps extends ComponentProps<\"div\">, Pick<ButtonProps, \"outline\" | \"pill\"> {\n  theme?: DeepPartial<FlowbiteButtonGroupTheme>;\n}\n\nconst processChildren = (\n  children: React.ReactNode,\n  outline: boolean | undefined,\n  pill: boolean | undefined,\n): ReactNode => {\n  return Children.map(children as ReactElement<ButtonProps>[], (child, index) => {\n    if (isValidElement(child)) {\n      // Check if the child has nested children\n      if (child.props.children) {\n        // Recursively process nested children\n        return cloneElement(child, {\n          ...child.props,\n          children: processChildren(child.props.children, outline, pill),\n          positionInGroup: determinePosition(index, Children.count(children)),\n        });\n      } else {\n        return cloneElement(child, {\n          outline,\n          pill,\n          positionInGroup: determinePosition(index, Children.count(children)),\n        });\n      }\n    }\n    return child;\n  });\n};\n\nconst determinePosition = (index: number, totalChildren: number) => {\n  return index === 0 ? \"start\" : index === totalChildren - 1 ? \"end\" : \"middle\";\n};\n\nexport const ButtonGroup: FC<ButtonGroupProps> = ({\n  children,\n  className,\n  outline,\n  pill,\n  theme: customTheme = {},\n  ...props\n}: ButtonGroupProps) => {\n  const items = useMemo(() => processChildren(children, outline, pill), [children, outline, pill]);\n\n  const theme = mergeDeep(getTheme().buttonGroup, customTheme);\n\n  return (\n    <div className={twMerge(theme.base, className)} role=\"group\" {...props}>\n      {items}\n    </div>\n  );\n};\n\nButtonGroup.displayName = \"Button.Group\";\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,eAAe,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,KAAK;AACrD,EAAE,OAAO,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK;AAClD,IAAI,IAAI,cAAc,CAAC,KAAK,CAAC,EAAE;AAC/B,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE;AAChC,QAAQ,OAAO,YAAY,CAAC,KAAK,EAAE;AACnC,UAAU,GAAG,KAAK,CAAC,KAAK;AACxB,UAAU,QAAQ,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC;AACxE,UAAU,eAAe,EAAE,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AAC7E,SAAS,CAAC,CAAC;AACX,OAAO,MAAM;AACb,QAAQ,OAAO,YAAY,CAAC,KAAK,EAAE;AACnC,UAAU,OAAO;AACjB,UAAU,IAAI;AACd,UAAU,eAAe,EAAE,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AAC7E,SAAS,CAAC,CAAC;AACX,OAAO;AACP,KAAK;AACL,IAAI,OAAO,KAAK,CAAC;AACjB,GAAG,CAAC,CAAC;AACL,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK;AACpD,EAAE,OAAO,KAAK,KAAK,CAAC,GAAG,OAAO,GAAG,KAAK,KAAK,aAAa,GAAG,CAAC,GAAG,KAAK,GAAG,QAAQ,CAAC;AAChF,CAAC,CAAC;AACU,MAAC,WAAW,GAAG,CAAC;AAC5B,EAAE,QAAQ;AACV,EAAE,SAAS;AACX,EAAE,OAAO;AACT,EAAE,IAAI;AACN,EAAE,KAAK,EAAE,WAAW,GAAG,EAAE;AACzB,EAAE,GAAG,KAAK;AACV,CAAC,KAAK;AACN,EAAE,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,eAAe,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;AACnG,EAAE,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AAC/D,EAAE,uBAAuB,GAAG,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;AAC7H,EAAE;AACF,WAAW,CAAC,WAAW,GAAG,cAAc;;;;"}