@postenbring/hedwig-react/dist/chunk-INDTHGWZ.mjs.map

React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

{"version":3,"sources":["../src/help-text/help-text.tsx"],"sourcesContent":["import * as Popover from \"@radix-ui/react-popover\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Box } from \"../box\";\n\ninterface HelpTextProps extends React.HTMLAttributes<HTMLButtonElement> {\n  className?: string;\n\n  /**\n   * The content of the help text, often a word or phrase that could use some explanation\n   */\n  children: React.ReactNode;\n\n  /**\n   * The help text that will be shown when the user clicks the trigger\n   */\n  helpText: React.ReactNode;\n\n  /**\n   * The title of the help text. Used by screen readers and if the user hover over the help text\n   */\n  title?: string;\n\n  /**\n   * Props for the `Box` that contains the help text\n   */\n  boxProps?: React.ComponentProps<typeof Box>;\n\n  /**\n   * The side of the trigger the popover should be attached to\n   *\n   * @default \"top\"\n   */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\n  /**\n   * The alignment of the popover content\n   *\n   * @default \"start\"\n   */\n  align?: \"center\" | \"end\" | \"start\";\n}\n\n/**\n * Show a help text for a word or phrase when clicked\n *\n * Useful for providing explanations for domain-specific terms, acronyms or phrases that could do with further elaboration\n *\n * @example\n * ```tsx\n * <p>\n *   En annen avgjørende faktor for avgifter er om nettbutikken er registrert i{\" \"}\n *   <HelpText helpText={`VOEC er en forkortelse for \"VAT on E-commerce\" (mva. på e-handel).`}>\n *    VOEC\n *   </HelpText>\n * </p>\n * ```\n */\nexport const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(\n  (\n    { children, className, helpText, title, side = \"top\", align = \"start\", boxProps, ...rest },\n    ref,\n  ) => {\n    return (\n      // NOTE: Using radix's [Popover component](https://www.radix-ui.com/primitives/docs/components/popover)\n      // In the future we can use the native popover api, but as of writing, though all browsers support it\n      // it's not far enough back to be used in production\n      // https://caniuse.com/mdn-html_elements_input_popovertarget\n      <Popover.Root>\n        <Popover.Trigger asChild>\n          <button\n            ref={ref}\n            className={clsx(\"hds-help-text-button\", className as undefined)}\n            title={title}\n            type=\"button\"\n            {...rest}\n          >\n            {children}\n          </button>\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content asChild side={side} align={align}>\n            <Box\n              {...boxProps}\n              className={clsx(\"hds-help-text-box\", boxProps?.className as undefined)}\n            >\n              <Popover.Close asChild>\n                <Box.CloseButton />\n              </Popover.Close>\n              {helpText}\n            </Box>\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n    );\n  },\n);\nHelpText.displayName = \"HelpText\";\n"],"mappings":";;;;;;;;;;AAAA,YAAY,aAAa;AACzB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAoEjB,cAYE,YAZF;AAZH,IAAM,WAAW;AAAA,EACtB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,WAAW,UAAU,OAAO,OAAO,OAAO,QAAQ,SAAS,SA5D3E,IA4DI,IAAoF,iBAApF,IAAoF,CAAlF,YAAU,aAAW,YAAU,SAAO,QAAc,SAAiB;AAGvE;AAAA;AAAA;AAAA;AAAA;AAAA,MAKE,qBAAS,cAAR,EACC;AAAA,4BAAS,iBAAR,EAAgB,SAAO,MACtB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,WAAW,KAAK,wBAAwB,SAAsB;AAAA,YAC9D;AAAA,YACA,MAAK;AAAA,aACD,OALL;AAAA,YAOE;AAAA;AAAA,QACH,GACF;AAAA,QACA,oBAAS,gBAAR,EACC,8BAAS,iBAAR,EAAgB,SAAO,MAAC,MAAY,OACnC;AAAA,UAAC;AAAA,2CACK,WADL;AAAA,YAEC,WAAW,KAAK,qBAAqB,qCAAU,SAAsB;AAAA,YAErE;AAAA,kCAAS,eAAR,EAAc,SAAO,MACpB,8BAAC,IAAI,aAAJ,EAAgB,GACnB;AAAA,cACC;AAAA;AAAA;AAAA,QACH,GACF,GACF;AAAA,SACF;AAAA;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;","names":[]}