@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
1 lines • 6.56 kB
Source Map (JSON)
{"version":3,"sources":["../src/form/error-summary/error-summary.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, type HTMLAttributes } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { Box, type BoxProps } from \"../../box\";\nimport { UnorderedList, type ListProps } from \"../../list\";\nimport { Link } from \"../../link\";\nimport { useMergeRefs } from \"../../utils\";\nimport { focusWithLegendOrLabelInViewport } from \"./focus\";\n\ninterface ErrorSummaryHeadingPropsAutoFocus {\n /**\n * The heading will be focused when the component mounts\n *\n * On following errornous form submissions you should manually focus the heading\n * e.g. by passing a ref and calling `ref.current.focus()`\n *\n * @default true\n */\n autoFocus?: boolean;\n}\n\ninterface ErrorSummaryHeadingPropsAs {\n /**\n * A heading level must be selected, or optionally opting out for a different element\n *\n * Use {@link ErrorSummaryHeadingPropsAsChild.asChild} if you need more control of the rendered element.\n */\n as: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"span\" | \"div\" | \"label\" | \"p\";\n asChild?: never;\n}\n\ninterface ErrorSummaryHeadingPropsAsChild {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild: true;\n as?: never;\n}\n\nexport type ErrorSummaryHeadingProps = HTMLAttributes<HTMLElement> &\n ErrorSummaryHeadingPropsAutoFocus &\n (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild);\n\nexport const ErrorSummaryHeading = forwardRef<\n HTMLParagraphElement,\n ErrorSummaryHeadingProps & (ErrorSummaryHeadingPropsAs | ErrorSummaryHeadingPropsAsChild)\n>(({ asChild, children, as: Tag, autoFocus = true, ...rest }, ref) => {\n const focusRef = useRef<HTMLElement>(null);\n const mergedRef = useMergeRefs([focusRef, ref]);\n const Component = asChild ? Slot : Tag;\n\n useEffect(() => {\n /**\n * Hack: Safari 18 on mac at the time of writing\n * does not correctly focus it with VoiceOver without the timeout\n */\n setTimeout(() => {\n if (focusRef.current && autoFocus) {\n focusRef.current.focus();\n }\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps -- Only on initial render\n }, []);\n\n return (\n <Component className={clsx(`hds-error-summary__title`)} ref={mergedRef} tabIndex={-1} {...rest}>\n {children}\n </Component>\n );\n});\nErrorSummaryHeading.displayName = \"ErrorSummary.Heading\";\n\nexport interface ErrorSummaryListProps extends ListProps {\n /**\n * Sets the size of the items (font)\n *\n * @default \"small\"\n */\n size?: ListProps[\"size\"];\n}\nexport const ErrorSummaryList = forwardRef<HTMLUListElement, ErrorSummaryListProps>(\n ({ children, size = \"small\", ...rest }, ref) => (\n <UnorderedList size={size} ref={ref} {...rest}>\n {children}\n </UnorderedList>\n ),\n);\nErrorSummaryList.displayName = \"ErrorSummary.List\";\n\nexport interface ErrorSummaryItemProps extends React.HTMLAttributes<HTMLLIElement> {\n /**\n * A hash link to the element that the error message refers to\n *\n * Must start with \"#\" as it's passed to the `href` attribute of an anchor element\n *\n * @example \"#email\"\n */\n href: `#${string}`;\n\n /**\n * Extra props to pass to the link element\n */\n linkProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n}\nexport const ErrorSummaryItem = forwardRef<HTMLLIElement, ErrorSummaryItemProps>(\n ({ children, href, linkProps, ...rest }, ref) => {\n function onClick(e: React.MouseEvent<HTMLAnchorElement>) {\n linkProps?.onClick?.(e);\n if (focusWithLegendOrLabelInViewport(href.replace(\"#\", \"\"))) {\n e.preventDefault();\n }\n }\n\n return (\n <li className={clsx(`hds-error-summary__list-item`)} ref={ref} {...rest}>\n <Link size=\"small\" href={href} variant=\"solid\" {...linkProps} onClick={onClick}>\n {children}\n </Link>\n </li>\n );\n },\n);\nErrorSummaryItem.displayName = \"ErrorSummary.Item\";\n\nexport type ErrorSummaryProps = Omit<\n BoxProps,\n \"variant\" | \"closeable\" | \"onClose\" | \"closed\" | \"closeButtonProps\"\n>;\n\nexport const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(\n ({ children, className, ...rest }, ref) => (\n <Box\n data-color=\"error\"\n ref={ref}\n {...rest}\n className={clsx(`hds-error-summary`, className as undefined)}\n >\n {children}\n </Box>\n ),\n) as ErrorSummaryType;\nErrorSummary.displayName = \"ErrorSummary\";\n\ntype ErrorSummaryType = ReturnType<typeof forwardRef<HTMLDivElement, ErrorSummaryProps>> & {\n Heading: typeof ErrorSummaryHeading;\n List: typeof ErrorSummaryList;\n Item: typeof ErrorSummaryItem;\n};\nErrorSummary.Heading = ErrorSummaryHeading;\nErrorSummary.List = ErrorSummaryList;\nErrorSummary.Item = ErrorSummaryItem;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,WAAW,cAAmC;AACnE,SAAS,YAAY;AACrB,SAAS,YAAY;AA+DjB;AAtBG,IAAM,sBAAsB,WAGjC,CAAC,IAA2D,QAAQ;AAAnE,eAAE,WAAS,UAAU,IAAI,KAAK,YAAY,KA9C7C,IA8CG,IAAmD,iBAAnD,IAAmD,CAAjD,WAAS,YAAU,MAAS;AAC/B,QAAM,WAAW,OAAoB,IAAI;AACzC,QAAM,YAAY,aAAa,CAAC,UAAU,GAAG,CAAC;AAC9C,QAAM,YAAY,UAAU,OAAO;AAEnC,YAAU,MAAM;AAKd,eAAW,MAAM;AACf,UAAI,SAAS,WAAW,WAAW;AACjC,iBAAS,QAAQ,MAAM;AAAA,MACzB;AAAA,IACF,CAAC;AAAA,EAEH,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,0CAAU,WAAW,KAAK,0BAA0B,GAAG,KAAK,WAAW,UAAU,MAAQ,OAAzF,EACE,WACH;AAEJ,CAAC;AACD,oBAAoB,cAAc;AAU3B,IAAM,mBAAmB;AAAA,EAC9B,CAAC,IAAuC,QAAK;AAA5C,iBAAE,YAAU,OAAO,QAjFtB,IAiFG,IAA+B,iBAA/B,IAA+B,CAA7B,YAAU;AACX,+BAAC,8CAAc,MAAY,OAAc,OAAxC,EACE,WACH;AAAA;AAEJ;AACA,iBAAiB,cAAc;AAiBxB,IAAM,mBAAmB;AAAA,EAC9B,CAAC,IAAwC,QAAQ;AAAhD,iBAAE,YAAU,MAAM,UAzGrB,IAyGG,IAAgC,iBAAhC,IAAgC,CAA9B,YAAU,QAAM;AACjB,aAAS,QAAQ,GAAwC;AA1G7D,UAAAA;AA2GM,OAAAA,MAAA,uCAAW,YAAX,gBAAAA,IAAA,gBAAqB;AACrB,UAAI,iCAAiC,KAAK,QAAQ,KAAK,EAAE,CAAC,GAAG;AAC3D,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAEA,WACE,oBAAC,qCAAG,WAAW,KAAK,8BAA8B,GAAG,OAAc,OAAlE,EACC,8BAAC,qCAAK,MAAK,SAAQ,MAAY,SAAQ,WAAY,YAAlD,EAA6D,SAC3D,WACH,IACF;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAOxB,IAAM,eAAe;AAAA,EAC1B,CAAC,IAAkC,QAAK;AAAvC,iBAAE,YAAU,UAlIf,IAkIG,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACX;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX;AAAA,SACI,OAHL;AAAA,QAIC,WAAW,KAAK,qBAAqB,SAAsB;AAAA,QAE1D;AAAA;AAAA,IACH;AAAA;AAEJ;AACA,aAAa,cAAc;AAO3B,aAAa,UAAU;AACvB,aAAa,OAAO;AACpB,aAAa,OAAO;","names":["_a"]}