@fuf-stack/pixels 1.11.0 → 1.11.2

package/dist/Popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","names":["HeroPopover","HeroPopoverTrigger","Button","HeroPopoverContent","ScrollShadow"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ButtonProps } from '@heroui/button';\nimport type { PopoverProps as HeroPopoverProps } from '@heroui/popover';\nimport type { ReactNode } from 'react';\n\nimport { Button } from '@heroui/button';\nimport {\n  Popover as HeroPopover,\n  PopoverContent as HeroPopoverContent,\n  PopoverTrigger as HeroPopoverTrigger,\n} from '@heroui/popover';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport ScrollShadow from '../ScrollShadow/ScrollShadow';\n\n// popover styling variants\nexport const popoverVariants = tv({\n  slots: {\n    body: 'w-full px-4 py-2',\n    content: 'flex max-h-[80vh] flex-col p-0',\n    divider: 'm-0 w-full border-divider p-0',\n    footer: 'w-full px-4 py-2',\n    footerWrapper: 'w-full',\n    header: 'w-full px-4 pb-1 pt-2 font-semibold',\n    headerWrapper: 'w-full',\n    trigger: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof popoverVariants>;\ntype ClassName = TVClassName<typeof popoverVariants>;\n\nexport interface PopoverProps extends VariantProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** content of the popover */\n  content: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  contentTestId?: string;\n  /** popover footer */\n  footer?: ReactNode;\n  /** Popover title */\n  header?: ReactNode;\n  /** use as controlled component  */\n  openControlled?: { open: boolean; setOpen: (open: boolean) => void };\n  /** placement of the popover relative to its trigger reference */\n  placement?: HeroPopoverProps['placement'];\n  /** The container element in which the overlay portal will be placed. */\n  portalContainer?: HeroPopoverProps['portalContainer'];\n  /** Whether to block scrolling outside the popover */\n  shouldBlockScroll?: boolean;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */\n  triggerButtonProps?: Pick<\n    ButtonProps,\n    | 'aria-label'\n    | 'className'\n    | 'color'\n    | 'disableAnimation'\n    | 'disabled'\n    | 'size'\n    | 'variant'\n  >;\n}\n\n/**\n * Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)\n */\nconst Popover = ({\n  children = null,\n  className: _className = undefined,\n  content,\n  contentTestId = undefined,\n  footer = undefined,\n  header = undefined,\n  openControlled = undefined,\n  placement = 'top',\n  portalContainer = undefined,\n  shouldBlockScroll = undefined,\n  testId = undefined,\n  triggerButtonProps = undefined,\n}: PopoverProps) => {\n  // className from slots\n  const variants = popoverVariants();\n  const className = variantsToClassNames(variants, _className, 'trigger');\n\n  return (\n    <HeroPopover\n      showArrow\n      classNames={className}\n      placement={placement}\n      portalContainer={portalContainer}\n      radius=\"sm\"\n      shouldBlockScroll={shouldBlockScroll}\n      {...(openControlled\n        ? { isOpen: openControlled.open, onOpenChange: openControlled.setOpen }\n        : {})}\n    >\n      <HeroPopoverTrigger data-testid={testId}>\n        {/* NOTE: type and aria properties are injected by HeroPopoverTrigger */}\n        {triggerButtonProps ? (\n          // TODO: currently we have to use @heroui/button because\n          // passing ref does not work (even with forwardRef in Button)\n\n          <Button className={className.trigger} {...triggerButtonProps}>\n            {children}\n          </Button>\n        ) : (\n          //  eslint-disable-next-line react/button-has-type\n          <button className={className.trigger}>{children}</button>\n        )}\n      </HeroPopoverTrigger>\n      <HeroPopoverContent data-testid={contentTestId}>\n        {header ? (\n          <div className={className.headerWrapper}>\n            <div className={className.header}>{header}</div>\n            <hr className={className.divider} />\n          </div>\n        ) : null}\n        <ScrollShadow className={className.body}>{content}</ScrollShadow>\n        {footer ? (\n          <div className={className.footerWrapper}>\n            <hr className={className.divider} />\n            <div className={className.footer}>{footer}</div>\n          </div>\n        ) : null}\n      </HeroPopoverContent>\n    </HeroPopover>\n  );\n};\n\nexport default Popover;\n"],"mappings":";;;;;;;AAiBA,MAAa,mBAAA,GAAA,uBAAA,IAAqB,EAChC,OAAO;CACL,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,eAAe;CACf,SAAS;AACX,EACF,CAAC;;;;AA4CD,MAAM,WAAW,EACf,WAAW,MACX,WAAW,aAAa,KAAA,GACxB,SACA,gBAAgB,KAAA,GAChB,SAAS,KAAA,GACT,SAAS,KAAA,GACT,iBAAiB,KAAA,GACjB,YAAY,OACZ,kBAAkB,KAAA,GAClB,oBAAoB,KAAA,GACpB,SAAS,KAAA,GACT,qBAAqB,KAAA,QACH;CAGlB,MAAM,aAAA,GAAA,uBAAA,sBADW,gBAC6B,GAAG,YAAY,SAAS;CAEtE,OACE,iBAAA,GAAA,kBAAA,MAACA,gBAAAA,SAAD;EACE,WAAA;EACA,YAAY;EACD;EACM;EACjB,QAAO;EACY;EACnB,GAAK,iBACD;GAAE,QAAQ,eAAe;GAAM,cAAc,eAAe;EAAQ,IACpE,CAAC;YATP,CAWE,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,gBAAD;GAAoB,eAAa;aAE9B,qBAIC,iBAAA,GAAA,kBAAA,KAACC,eAAAA,QAAD;IAAQ,WAAW,UAAU;IAAS,GAAI;IACvC;GACK,CAAA,IAGR,iBAAA,GAAA,kBAAA,KAAC,UAAD;IAAQ,WAAW,UAAU;IAAU;GAAiB,CAAA;EAExC,CAAA,GACpB,iBAAA,GAAA,kBAAA,MAACC,gBAAAA,gBAAD;GAAoB,eAAa;aAAjC;IACG,SACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAW,UAAU;eAA1B,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAW,UAAU;gBAAS;KAAY,CAAA,GAC/C,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAI,WAAW,UAAU,QAAU,CAAA,CAChC;SACH;IACJ,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,SAAD;KAAc,WAAW,UAAU;eAAO;IAAsB,CAAA;IAC/D,SACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAW,UAAU;eAA1B,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAI,WAAW,UAAU,QAAU,CAAA,GACnC,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAW,UAAU;gBAAS;KAAY,CAAA,CAC5C;SACH;GACc;IACT;;AAEjB"}
+{"version":3,"file":"Popover.cjs","names":["HeroPopover","HeroPopoverTrigger","Button","HeroPopoverContent","ScrollShadow"],"sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ButtonProps } from '@heroui/button';\nimport type { PopoverProps as HeroPopoverProps } from '@heroui/popover';\nimport type { ReactNode } from 'react';\n\nimport { Button } from '@heroui/button';\nimport {\n  Popover as HeroPopover,\n  PopoverContent as HeroPopoverContent,\n  PopoverTrigger as HeroPopoverTrigger,\n} from '@heroui/popover';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport ScrollShadow from '../ScrollShadow/ScrollShadow';\n\n// popover styling variants\nexport const popoverVariants = tv({\n  slots: {\n    body: 'w-full px-4 py-2',\n    content: 'flex max-h-[80vh] flex-col p-0',\n    divider: 'm-0 w-full border-divider p-0',\n    footer: 'w-full px-4 py-2',\n    footerWrapper: 'w-full',\n    header: 'w-full px-4 pb-1 pt-2 font-semibold',\n    headerWrapper: 'w-full',\n    trigger: '',\n  },\n});\n\ntype VariantProps = TVProps<typeof popoverVariants>;\ntype ClassName = TVClassName<typeof popoverVariants>;\n\nexport interface PopoverProps extends VariantProps {\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** content of the popover */\n  content: ReactNode;\n  /** HTML data-testid attribute used in e2e tests */\n  contentTestId?: string;\n  /** popover footer */\n  footer?: ReactNode;\n  /** Popover title */\n  header?: ReactNode;\n  /** use as controlled component  */\n  openControlled?: { open: boolean; setOpen: (open: boolean) => void };\n  /** placement of the popover relative to its trigger reference */\n  placement?: HeroPopoverProps['placement'];\n  /** The container element in which the overlay portal will be placed. */\n  portalContainer?: HeroPopoverProps['portalContainer'];\n  /** Whether to block scrolling outside the popover */\n  shouldBlockScroll?: boolean;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */\n  triggerButtonProps?: Pick<\n    ButtonProps,\n    | 'aria-label'\n    | 'className'\n    | 'color'\n    | 'disableAnimation'\n    | 'disabled'\n    | 'size'\n    | 'variant'\n  >;\n}\n\n/**\n * Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)\n */\nconst Popover = ({\n  children = null,\n  className: _className = undefined,\n  content,\n  contentTestId = undefined,\n  footer = undefined,\n  header = undefined,\n  openControlled = undefined,\n  placement = 'top',\n  portalContainer = undefined,\n  shouldBlockScroll = undefined,\n  testId = undefined,\n  triggerButtonProps = undefined,\n}: PopoverProps) => {\n  // className from slots\n  const variants = popoverVariants();\n  const className = variantsToClassNames(variants, _className, 'trigger');\n\n  return (\n    <HeroPopover\n      classNames={className}\n      placement={placement}\n      portalContainer={portalContainer}\n      radius=\"sm\"\n      shouldBlockScroll={shouldBlockScroll}\n      showArrow\n      {...(openControlled\n        ? { isOpen: openControlled.open, onOpenChange: openControlled.setOpen }\n        : {})}\n    >\n      <HeroPopoverTrigger data-testid={testId}>\n        {/* NOTE: type and aria properties are injected by HeroPopoverTrigger */}\n        {triggerButtonProps ? (\n          // TODO: currently we have to use @heroui/button because\n          // passing ref does not work (even with forwardRef in Button)\n\n          <Button className={className.trigger} {...triggerButtonProps}>\n            {children}\n          </Button>\n        ) : (\n          //  eslint-disable-next-line react/button-has-type\n          <button className={className.trigger}>{children}</button>\n        )}\n      </HeroPopoverTrigger>\n      <HeroPopoverContent data-testid={contentTestId}>\n        {header ? (\n          <div className={className.headerWrapper}>\n            <div className={className.header}>{header}</div>\n            <hr className={className.divider} />\n          </div>\n        ) : null}\n        <ScrollShadow className={className.body}>{content}</ScrollShadow>\n        {footer ? (\n          <div className={className.footerWrapper}>\n            <hr className={className.divider} />\n            <div className={className.footer}>{footer}</div>\n          </div>\n        ) : null}\n      </HeroPopoverContent>\n    </HeroPopover>\n  );\n};\n\nexport default Popover;\n"],"mappings":";;;;;;AAiBA,MAAa,mBAAA,GAAA,uBAAA,IAAqB,EAChC,OAAO;CACL,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,eAAe;CACf,SAAS;AACX,EACF,CAAC;;;;AA4CD,MAAM,WAAW,EACf,WAAW,MACX,WAAW,aAAa,KAAA,GACxB,SACA,gBAAgB,KAAA,GAChB,SAAS,KAAA,GACT,SAAS,KAAA,GACT,iBAAiB,KAAA,GACjB,YAAY,OACZ,kBAAkB,KAAA,GAClB,oBAAoB,KAAA,GACpB,SAAS,KAAA,GACT,qBAAqB,KAAA,QACH;CAGlB,MAAM,aAAA,GAAA,uBAAA,sBADW,gBAC6B,GAAG,YAAY,SAAS;CAEtE,OACE,iBAAA,GAAA,kBAAA,MAACA,gBAAAA,SAAD;EACE,YAAY;EACD;EACM;EACjB,QAAO;EACY;EACnB,WAAA;EACA,GAAK,iBACD;GAAE,QAAQ,eAAe;GAAM,cAAc,eAAe;EAAQ,IACpE,CAAC;YATP,CAWE,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,gBAAD;GAAoB,eAAa;aAE9B,qBAIC,iBAAA,GAAA,kBAAA,KAACC,eAAAA,QAAD;IAAQ,WAAW,UAAU;IAAS,GAAI;IACvC;GACK,CAAA,IAGR,iBAAA,GAAA,kBAAA,KAAC,UAAD;IAAQ,WAAW,UAAU;IAAU;GAAiB,CAAA;EAExC,CAAA,GACpB,iBAAA,GAAA,kBAAA,MAACC,gBAAAA,gBAAD;GAAoB,eAAa;aAAjC;IACG,SACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAW,UAAU;eAA1B,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAW,UAAU;gBAAS;KAAY,CAAA,GAC/C,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAI,WAAW,UAAU,QAAU,CAAA,CAChC;SACH;IACJ,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,SAAD;KAAc,WAAW,UAAU;eAAO;IAAsB,CAAA;IAC/D,SACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAW,UAAU;eAA1B,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD,EAAI,WAAW,UAAU,QAAU,CAAA,GACnC,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAW,UAAU;gBAAS;KAAY,CAAA,CAC5C;SACH;GACc;IACT;;AAEjB"}