@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
1 lines • 6.05 kB
Source Map (JSON)
{"version":3,"sources":["../src/form/fieldset/fieldset.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n useId,\n forwardRef,\n createContext,\n useContext,\n} from \"react\";\nimport type {\n FieldsetHTMLAttributes,\n ReactElement,\n ReactNode,\n CSSProperties,\n ComponentProps,\n} from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { ValidationMessage, type ValidationMessageProps } from \"../validation-message\";\nimport { type ErrorMessageProps } from \"../error-message\";\nimport { getValidationMessageValue } from \"../../utils\";\nimport { FieldsetDescription } from \"./fieldset-description\";\nimport { FieldsetLegend } from \"./fieldset-legend\";\n\ntype FieldsetLegendProps = ComponentProps<typeof FieldsetLegend>;\n\nexport interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {\n className?: string;\n style?: CSSProperties;\n \"data-color\"?: \"info\" | \"success\" | \"warning\" | \"error\";\n validationMessage?: ReactNode | { value: ReactNode };\n validationMessageProps?: Partial<ValidationMessageProps>;\n /**\n * Providing an errorMessage will also give contained Checkboxes or Radio buttons\n * error styling and aria to indicate invalid state.\n *\n * For Radio buttons you are even better off using RadioGroup.\n */\n\n /** @deprecated Use `validationMessage` instead */\n errorMessage?: ReactNode;\n /**\n * @deprecated Pass props directly to <Fieldset.Legend> instead.\n */\n legendProps?: FieldsetLegendProps;\n /**\n * @deprecated Use <Fieldset.Legend>...</Fieldset.Legend> instead.\n */\n legend?: ReactNode;\n size?: \"small\" | \"\";\n children: ReactNode;\n /** @deprecated Use `validationMessageProps` instead */\n errorMessageProps?: Partial<ErrorMessageProps>;\n}\n\n/** @deprecated Will no longer be needed */\nconst FieldsetContext = createContext<{ hasError: boolean; size: \"small\" | \"\" }>({\n hasError: false,\n size: \"\",\n});\n\n/** @deprecated Will no longer be needed */\nexport const useFieldsetContext = () => useContext(FieldsetContext);\n\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n {\n className,\n style,\n \"data-color\": dataColor = undefined,\n validationMessage,\n validationMessageProps,\n errorMessage,\n errorMessageProps,\n legendProps,\n legend,\n size = \"\",\n children,\n ...rest\n },\n ref,\n) {\n const validationMessageId = useId();\n const validationColor = errorMessage ? \"error\" : dataColor;\n const validationMessageValue = getValidationMessageValue(validationMessage, errorMessage);\n const childArray = Children.toArray(children);\n const legendChild = childArray.find(\n (child): child is ReactElement<FieldsetLegendProps> =>\n isValidElement<FieldsetLegendProps>(child) && child.type === FieldsetLegend,\n );\n const contentChildren = legendChild\n ? childArray.filter((child) => child !== legendChild)\n : childArray;\n let renderedLegend = null;\n\n if (legendChild) {\n renderedLegend = cloneElement(legendChild, {\n ...legendProps,\n ...legendChild.props,\n className: clsx(\n legendProps?.className as undefined,\n legendChild.props.className as undefined,\n ),\n });\n } else if (legend !== undefined) {\n renderedLegend = <FieldsetLegend {...legendProps}>{legend}</FieldsetLegend>;\n }\n\n return (\n <fieldset\n aria-describedby={validationMessageValue ? validationMessageId : undefined}\n aria-invalid={errorMessage ? true : undefined}\n className={clsx(\"hds-fieldset\", { [`hds-fieldset--${size}`]: size }, className as undefined)}\n data-color={validationColor}\n ref={ref}\n style={style}\n {...rest}\n >\n {renderedLegend}\n <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage), size }}>\n {contentChildren}\n </FieldsetContext.Provider>\n <ValidationMessage\n id={validationMessageId}\n {...(validationMessageProps ?? errorMessageProps)}\n >\n {validationMessageValue}\n </ValidationMessage>\n </fieldset>\n );\n}) as FieldsetType;\n\ntype FieldsetType = ReturnType<typeof forwardRef<HTMLFieldSetElement, FieldsetProps>> & {\n Description: typeof FieldsetDescription;\n Legend: typeof FieldsetLegend;\n};\n\nFieldset.Description = FieldsetDescription;\nFieldset.Legend = FieldsetLegend;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAQP,SAAS,YAAY;AAuFA,cAIjB,YAJiB;AAhDrB,IAAM,kBAAkB,cAAyD;AAAA,EAC/E,UAAU;AAAA,EACV,MAAM;AACR,CAAC;AAGM,IAAM,qBAAqB,MAAM,WAAW,eAAe;AAE3D,IAAM,WAAW,WAA+C,SAASA,UAC9E,IAcA,KACA;AAfA,eACE;AAAA;AAAA,IACA;AAAA,IACA,cAAc,YAAY;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EA3EJ,IAgEE,IAYK,iBAZL,IAYK;AAAA,IAXH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAKF,QAAM,sBAAsB,MAAM;AAClC,QAAM,kBAAkB,eAAe,UAAU;AACjD,QAAM,yBAAyB,0BAA0B,mBAAmB,YAAY;AACxF,QAAM,aAAa,SAAS,QAAQ,QAAQ;AAC5C,QAAM,cAAc,WAAW;AAAA,IAC7B,CAAC,UACC,eAAoC,KAAK,KAAK,MAAM,SAAS;AAAA,EACjE;AACA,QAAM,kBAAkB,cACpB,WAAW,OAAO,CAAC,UAAU,UAAU,WAAW,IAClD;AACJ,MAAI,iBAAiB;AAErB,MAAI,aAAa;AACf,qBAAiB,aAAa,aAAa,gDACtC,cACA,YAAY,QAF0B;AAAA,MAGzC,WAAW;AAAA,QACT,2CAAa;AAAA,QACb,YAAY,MAAM;AAAA,MACpB;AAAA,IACF,EAAC;AAAA,EACH,WAAW,WAAW,QAAW;AAC/B,qBAAiB,oBAAC,iDAAmB,cAAnB,EAAiC,mBAAO;AAAA,EAC5D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAkB,yBAAyB,sBAAsB;AAAA,MACjE,gBAAc,eAAe,OAAO;AAAA,MACpC,WAAW,KAAK,gBAAgB,EAAE,CAAC,iBAAiB,IAAI,EAAE,GAAG,KAAK,GAAG,SAAsB;AAAA,MAC3F,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,OACI,OAPL;AAAA,MASE;AAAA;AAAA,QACD,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,QAAQ,YAAY,GAAG,KAAK,GACtE,2BACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,aACC,0DAA0B,oBAFhC;AAAA,YAIE;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAOD,SAAS,cAAc;AACvB,SAAS,SAAS;","names":["Fieldset"]}