@activecollab/components 2.0.421 → 2.0.422
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/RadioCard/RadioCard.js +81 -0
- package/dist/cjs/components/RadioCard/RadioCard.js.map +1 -0
- package/dist/cjs/components/RadioCard/Styles.js +39 -0
- package/dist/cjs/components/RadioCard/Styles.js.map +1 -0
- package/dist/cjs/components/RadioCard/index.js +17 -0
- package/dist/cjs/components/RadioCard/index.js.map +1 -0
- package/dist/cjs/components/RadioGroup/RadioGroup.js +102 -0
- package/dist/cjs/components/RadioGroup/RadioGroup.js.map +1 -0
- package/dist/cjs/components/RadioGroup/Styles.js +38 -0
- package/dist/cjs/components/RadioGroup/Styles.js.map +1 -0
- package/dist/cjs/components/RadioGroup/index.js +17 -0
- package/dist/cjs/components/RadioGroup/index.js.map +1 -0
- package/dist/cjs/components/index.js +22 -0
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/cjs/presentation/shared/PortfolioOptionsMenu.js +74 -15
- package/dist/cjs/presentation/shared/PortfolioOptionsMenu.js.map +1 -1
- package/dist/cjs/presentation/shared/index.js +93 -1
- package/dist/cjs/presentation/shared/index.js.map +1 -1
- package/dist/cjs/presentation/shared/portfolioDetails.js +566 -0
- package/dist/cjs/presentation/shared/portfolioDetails.js.map +1 -0
- package/dist/cjs/utils/useStableId.js +33 -0
- package/dist/cjs/utils/useStableId.js.map +1 -0
- package/dist/esm/components/RadioCard/RadioCard.d.ts +27 -0
- package/dist/esm/components/RadioCard/RadioCard.d.ts.map +1 -0
- package/dist/esm/components/RadioCard/RadioCard.js +72 -0
- package/dist/esm/components/RadioCard/RadioCard.js.map +1 -0
- package/dist/esm/components/RadioCard/Styles.d.ts +16 -0
- package/dist/esm/components/RadioCard/Styles.d.ts.map +1 -0
- package/dist/esm/components/RadioCard/Styles.js +26 -0
- package/dist/esm/components/RadioCard/Styles.js.map +1 -0
- package/dist/esm/components/RadioCard/index.d.ts +2 -0
- package/dist/esm/components/RadioCard/index.d.ts.map +1 -0
- package/dist/esm/components/RadioCard/index.js +2 -0
- package/dist/esm/components/RadioCard/index.js.map +1 -0
- package/dist/esm/components/RadioGroup/RadioGroup.d.ts +48 -0
- package/dist/esm/components/RadioGroup/RadioGroup.d.ts.map +1 -0
- package/dist/esm/components/RadioGroup/RadioGroup.js +89 -0
- package/dist/esm/components/RadioGroup/RadioGroup.js.map +1 -0
- package/dist/esm/components/RadioGroup/Styles.d.ts +22 -0
- package/dist/esm/components/RadioGroup/Styles.d.ts.map +1 -0
- package/dist/esm/components/RadioGroup/Styles.js +23 -0
- package/dist/esm/components/RadioGroup/Styles.js.map +1 -0
- package/dist/esm/components/RadioGroup/index.d.ts +2 -0
- package/dist/esm/components/RadioGroup/index.d.ts.map +1 -0
- package/dist/esm/components/RadioGroup/index.js +2 -0
- package/dist/esm/components/RadioGroup/index.js.map +1 -0
- package/dist/esm/components/index.d.ts +2 -0
- package/dist/esm/components/index.d.ts.map +1 -1
- package/dist/esm/components/index.js +2 -0
- package/dist/esm/components/index.js.map +1 -1
- package/dist/esm/presentation/shared/PortfolioOptionsMenu.d.ts +5 -1
- package/dist/esm/presentation/shared/PortfolioOptionsMenu.d.ts.map +1 -1
- package/dist/esm/presentation/shared/PortfolioOptionsMenu.js +61 -14
- package/dist/esm/presentation/shared/PortfolioOptionsMenu.js.map +1 -1
- package/dist/esm/presentation/shared/index.d.ts +2 -0
- package/dist/esm/presentation/shared/index.d.ts.map +1 -1
- package/dist/esm/presentation/shared/index.js +1 -0
- package/dist/esm/presentation/shared/index.js.map +1 -1
- package/dist/esm/presentation/shared/portfolioDetails.d.ts +74 -0
- package/dist/esm/presentation/shared/portfolioDetails.d.ts.map +1 -0
- package/dist/esm/presentation/shared/portfolioDetails.js +490 -0
- package/dist/esm/presentation/shared/portfolioDetails.js.map +1 -0
- package/dist/esm/utils/useStableId.d.ts +2 -0
- package/dist/esm/utils/useStableId.d.ts.map +1 -0
- package/dist/esm/utils/useStableId.js +25 -0
- package/dist/esm/utils/useStableId.js.map +1 -0
- package/dist/index.js +1068 -815
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"portfolioDetails.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_Button","_Dialog","_IconButton","_Icons","_Input","_Label","_RadioGroup","_Select","_SelectTrigger","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","value","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","a","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","l","iterator","u","next","done","return","isArray","DEFAULT_PORTFOLIO_FORM_VALUES","exports","type","context","undefined","projectIds","groupBy","visibility","LEADERS_LIST","short","CATEGORIES","CLIENTS","PICKER_PROJECTS","id","client","category","label","leader","favorite","GROUP_BY_OPTIONS","projectOptionId","project","concat","sampleProjectOptionIds","count","Math","max","map","toProjectOptions","projects","sort","b","localeCompare","groupPickerProjects","other","groups","options","field","without","buckets","Map","_buckets$get","key","entries","_ref","_ref2","PORTFOLIO_TYPES","title","description","VISIBILITY_OPTIONS","contextFieldLabel","leaderShortName","_LEADERS_LIST$find$sh","_LEADERS_LIST$find","find","defaultPortfolioName","isPortfolioDetailsValid","values","trim","Boolean","ProjectsGroupBy","_ref3","selected","onChange","createElement","Select","keepSameOptionsOrder","disableSearch","disabledInternalSort","forceCloseMenu","position","target","IconButton","variant","SortGeneralIcon","ProjectsPicker","_ref4","onGroupBy","invalid","useMemo","triggerText","noResultText","endAdornment","SelectTrigger","className","typographyProps","color","ContextPicker","_ref5","placeholder","StyledDetailsForm","styled","div","withConfig","displayName","componentId","PortfolioDetailsFields","_ref6","onName","onContext","onProjects","onVisibility","showErrors","nameInvalid","pickerInvalid","Label","htmlFor","Input","event","RadioGroup","option","EditPortfolioDialog","_ref7","open","initialValues","onClose","onSave","_useState","useState","_useState2","setValues","_useState3","_useState4","setShowErrors","useEffect","patch","current","handleSave","Dialog","disableCloseOnEsc","Title","ContentDivider","Content","Actions","Button","style","marginRight","onClick"],"sources":["../../../../src/presentation/shared/portfolioDetails.tsx"],"sourcesContent":["import React, { ReactElement, useEffect, useMemo, useState } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { Button } from \"../../components/Button\";\nimport { Dialog } from \"../../components/Dialog\";\nimport { IconButton } from \"../../components/IconButton\";\nimport { SortGeneralIcon } from \"../../components/Icons\";\nimport { Input } from \"../../components/Input\";\nimport { Label } from \"../../components/Label\";\nimport { RadioGroup } from \"../../components/RadioGroup\";\nimport { Select } from \"../../components/Select\";\nimport { SelectTrigger } from \"../../components/SelectTrigger\";\n\n/*\n Portfolio details form — the shared \"step 2\" of the Create Portfolio wizard,\n reused verbatim as the Edit Portfolio dialog.\n\n This mirrors a pattern used across the app: the fields that make up the final\n step of a creation wizard are the same fields shown, later, when the object is\n edited. So the form body (name, the type's picker, visibility) and its\n validation live here once, and two consumers render it:\n\n - The Create Portfolio wizard (PortfoliosList.stories.tsx) renders\n <PortfolioDetailsFields> inside its step-2 <Dialog.Content>, with a\n \"Create Portfolio\" action.\n - <EditPortfolioDialog> (opened from PortfolioOptionsMenu's Edit item)\n renders the SAME <PortfolioDetailsFields> inside a standalone <Dialog>,\n with a \"Save Changes\" action.\n\n Both use isPortfolioDetailsValid() and the same always-enabled-submit,\n outline-on-submit validation rule.\n*/\n\n/* ------------------------------------------------------------------ */\n/* Domain types */\n/* ------------------------------------------------------------------ */\n\n/** How a portfolio decides its members (two kinds, three context types). */\nexport type PortfolioKind = \"custom\" | \"category\" | \"client\" | \"leader\";\n\nexport type PortfolioVisibility = \"everyone\" | \"me\";\n\n/** Grouping of the projects multi-select — matches Invite-to-Projects. */\nexport type GroupBy =\n | \"favorites\"\n | \"labels\"\n | \"companies\"\n | \"categories\"\n | \"leaders\";\n\n/** The editable shape shared by create step 2 and the edit dialog. */\nexport interface PortfolioFormValues {\n type: PortfolioKind;\n name: string;\n /** For context portfolios: the chosen category / client / leader. */\n context?: string;\n /** For custom portfolios: the hand-picked project option ids. */\n projectIds: string[];\n groupBy: GroupBy;\n visibility: PortfolioVisibility;\n}\n\n/** A blank custom portfolio — the fallback seed for the edit dialog. */\nexport const DEFAULT_PORTFOLIO_FORM_VALUES: PortfolioFormValues = {\n type: \"custom\",\n name: \"\",\n context: undefined,\n projectIds: [],\n groupBy: \"favorites\",\n visibility: \"everyone\",\n};\n\n/* ------------------------------------------------------------------ */\n/* Pickers' mock data */\n/* ------------------------------------------------------------------ */\n\nexport interface PickerLeader {\n name: string;\n /** Short \"Firstname L.\" form used in the default portfolio name. */\n short: string;\n}\n\nexport const LEADERS_LIST: PickerLeader[] = [\n { name: \"Theo Brandt\", short: \"Theo B.\" },\n { name: \"Isabel Cortez\", short: \"Isabel C.\" },\n { name: \"Grace Bauer\", short: \"Grace B.\" },\n { name: \"Noah Mercer\", short: \"Noah M.\" },\n];\n\nexport const CATEGORIES = [\n \"Brand & Identity\",\n \"Web & Product\",\n \"Marketing\",\n \"Internal Ops\",\n];\n\nexport const CLIENTS = [\n \"Aperture Studio\",\n \"Orbit Telecom\",\n \"Northwind Traders\",\n \"Meridian Health\",\n];\n\ninterface PickerProject {\n id: number;\n name: string;\n client: string;\n category: string;\n label: string;\n leader: string;\n favorite: boolean;\n}\n\nconst PICKER_PROJECTS: PickerProject[] = [\n {\n id: 1,\n name: \"Website Redesign\",\n client: \"Aperture Studio\",\n category: \"Web & Product\",\n label: \"Design\",\n leader: \"Theo Brandt\",\n favorite: true,\n },\n {\n id: 2,\n name: \"Brand Refresh\",\n client: \"Aperture Studio\",\n category: \"Brand & Identity\",\n label: \"Design\",\n leader: \"Isabel Cortez\",\n favorite: true,\n },\n {\n id: 3,\n name: \"Mobile App\",\n client: \"Orbit Telecom\",\n category: \"Web & Product\",\n label: \"Build\",\n leader: \"Grace Bauer\",\n favorite: false,\n },\n {\n id: 4,\n name: \"Q3 Campaign\",\n client: \"Orbit Telecom\",\n category: \"Marketing\",\n label: \"Campaign\",\n leader: \"Noah Mercer\",\n favorite: true,\n },\n {\n id: 5,\n name: \"Internal Wiki\",\n client: \"\",\n category: \"Internal Ops\",\n label: \"\",\n leader: \"Theo Brandt\",\n favorite: false,\n },\n {\n id: 6,\n name: \"Packaging System\",\n client: \"Northwind Traders\",\n category: \"Brand & Identity\",\n label: \"Design\",\n leader: \"Isabel Cortez\",\n favorite: false,\n },\n {\n id: 7,\n name: \"Support Portal\",\n client: \"Meridian Health\",\n category: \"Web & Product\",\n label: \"Build\",\n leader: \"Grace Bauer\",\n favorite: false,\n },\n {\n id: 8,\n name: \"Annual Report\",\n client: \"Northwind Traders\",\n category: \"Marketing\",\n label: \"Campaign\",\n leader: \"Noah Mercer\",\n favorite: true,\n },\n];\n\n/* Group-by options and default match the Invite-to-Projects picker exactly. */\nconst GROUP_BY_OPTIONS: { id: GroupBy; name: string }[] = [\n { id: \"favorites\", name: \"Favorites\" },\n { id: \"labels\", name: \"Label\" },\n { id: \"companies\", name: \"Client\" },\n { id: \"categories\", name: \"Category\" },\n { id: \"leaders\", name: \"Project Leader\" },\n];\n\ninterface ProjectOption {\n id: string;\n name: string;\n}\ninterface ProjectOptionGroup {\n id: string;\n name: string;\n options: ProjectOption[];\n}\n\nconst projectOptionId = (project: PickerProject): string => `p${project.id}`;\n\n/** A small deterministic set of project option ids — seeds a custom\n portfolio's edit dialog so the picker reads as an existing selection. */\nexport const sampleProjectOptionIds = (count: number): string[] =>\n PICKER_PROJECTS.slice(0, Math.max(0, count)).map(projectOptionId);\n\nconst toProjectOptions = (projects: PickerProject[]): ProjectOption[] =>\n projects\n .map((project) => ({ id: projectOptionId(project), name: project.name }))\n .sort((a, b) => a.name.localeCompare(b.name));\n\n/* Build the grouped option tree the Select expects. Alphabetical rows and\n groups; the \"Without ...\" / \"Other\" bucket sits last; the Favorites grouping\n collapses to a flat list when it is the only group (as the app's does). */\nconst groupPickerProjects = (\n groupBy: GroupBy\n): ProjectOption[] | ProjectOptionGroup[] => {\n if (groupBy === \"favorites\") {\n const favorite = PICKER_PROJECTS.filter((project) => project.favorite);\n const other = PICKER_PROJECTS.filter((project) => !project.favorite);\n const groups: ProjectOptionGroup[] = [];\n if (favorite.length) {\n groups.push({\n id: \"g-fav\",\n name: \"Favorite\",\n options: toProjectOptions(favorite),\n });\n }\n if (other.length) {\n groups.push({\n id: \"g-other\",\n name: \"Other\",\n options: toProjectOptions(other),\n });\n }\n return groups.length === 1 ? groups[0].options : groups;\n }\n\n const field: keyof PickerProject =\n groupBy === \"labels\"\n ? \"label\"\n : groupBy === \"companies\"\n ? \"client\"\n : groupBy === \"categories\"\n ? \"category\"\n : \"leader\";\n const without =\n groupBy === \"labels\"\n ? \"Without Label\"\n : groupBy === \"companies\"\n ? \"Without Client\"\n : groupBy === \"categories\"\n ? \"Without Category\"\n : \"Without Leader\";\n\n const buckets = new Map<string, PickerProject[]>();\n PICKER_PROJECTS.forEach((project) => {\n const key = (project[field] as string) || without;\n if (!buckets.has(key)) {\n buckets.set(key, []);\n }\n buckets.get(key)?.push(project);\n });\n\n return Array.from(buckets.entries())\n .map(([name, projects]) => ({\n id: `g-${name}`,\n name,\n options: toProjectOptions(projects),\n }))\n .sort((a, b) =>\n a.name === without\n ? 1\n : b.name === without\n ? -1\n : a.name.localeCompare(b.name)\n );\n};\n\n/* ------------------------------------------------------------------ */\n/* Type + visibility option copy */\n/* ------------------------------------------------------------------ */\n\nexport const PORTFOLIO_TYPES: {\n id: PortfolioKind;\n title: string;\n description: string;\n}[] = [\n {\n id: \"custom\",\n title: \"Custom Portfolio\",\n description: \"The projects you pick by hand. Nothing joins automatically.\",\n },\n {\n id: \"client\",\n title: \"Client Portfolio\",\n description:\n \"All projects for a client company. New ones join automatically.\",\n },\n {\n id: \"leader\",\n title: \"Project Leader Portfolio\",\n description: \"All projects led by a person. New ones join automatically.\",\n },\n {\n id: \"category\",\n title: \"Category Portfolio\",\n description:\n \"All projects in a project category. New ones join automatically.\",\n },\n];\n\nexport const VISIBILITY_OPTIONS: {\n id: PortfolioVisibility;\n title: string;\n description: string;\n}[] = [\n {\n id: \"everyone\",\n title: \"Visible to Everyone\",\n description:\n \"Anyone who can use portfolios sees this one. They still only see the projects they already have access to.\",\n },\n {\n id: \"me\",\n title: \"Visible Only to Me\",\n description: \"Nobody else sees this portfolio.\",\n },\n];\n\nexport const contextFieldLabel = (type: PortfolioKind): string =>\n type === \"custom\"\n ? \"Projects\"\n : type === \"category\"\n ? \"Category\"\n : type === \"client\"\n ? \"Client\"\n : \"Project leader\";\n\nexport const leaderShortName = (name: string): string =>\n LEADERS_LIST.find((leader) => leader.name === name)?.short ?? name;\n\n/* Default names: \"{Category} Projects\", \"{Client} Projects\", \"Lead by {N.}\". */\nexport const defaultPortfolioName = (\n type: PortfolioKind,\n context: string\n): string => {\n if (!context) return \"\";\n if (type === \"category\" || type === \"client\") return `${context} Projects`;\n if (type === \"leader\") return `Lead by ${leaderShortName(context)}`;\n return \"\";\n};\n\n/* ------------------------------------------------------------------ */\n/* Validation (shared by create step 2 and the edit dialog) */\n/* ------------------------------------------------------------------ */\n\n/** Name is required; a custom portfolio needs at least one project, a context\n portfolio needs its context chosen. Same rule for create and edit. */\nexport const isPortfolioDetailsValid = (values: PortfolioFormValues): boolean =>\n values.name.trim().length > 0 &&\n (values.type === \"custom\"\n ? values.projectIds.length > 0\n : Boolean(values.context));\n\n/* ------------------------------------------------------------------ */\n/* Pickers */\n/* ------------------------------------------------------------------ */\n\n/* Group-by control: the SortGeneralIcon button the Invite-to-Projects picker\n shows as the search bar's right-side adornment. Controls grouping, not sort. */\nconst ProjectsGroupBy = ({\n selected,\n onChange,\n}: {\n selected: GroupBy;\n onChange: (groupBy: GroupBy) => void;\n}): ReactElement => (\n <Select\n keepSameOptionsOrder\n disableSearch\n disabledInternalSort\n forceCloseMenu\n position=\"bottom-end\"\n selected={selected}\n onChange={(value) => onChange(value as GroupBy)}\n options={GROUP_BY_OPTIONS}\n target={\n <IconButton type=\"button\" variant=\"text gray\">\n <SortGeneralIcon />\n </IconButton>\n }\n />\n);\n\nconst ProjectsPicker = ({\n selected,\n onChange,\n groupBy,\n onGroupBy,\n invalid,\n}: {\n selected: string[];\n onChange: (ids: string[]) => void;\n groupBy: GroupBy;\n onGroupBy: (groupBy: GroupBy) => void;\n invalid?: boolean;\n}): ReactElement => {\n const options = useMemo(() => groupPickerProjects(groupBy), [groupBy]);\n const count = selected.length;\n const triggerText =\n count === 0\n ? \"Choose projects\"\n : count === 1\n ? \"1 project selected\"\n : `${count} projects selected`;\n return (\n <Select\n type=\"multiple\"\n options={options}\n selected={selected}\n onChange={(value) => onChange(value as string[])}\n noResultText=\"No results\"\n endAdornment={<ProjectsGroupBy selected={groupBy} onChange={onGroupBy} />}\n target={\n <SelectTrigger\n id=\"pf-projects\"\n className=\"pf-trigger\"\n invalid={invalid}\n typographyProps={{ color: count > 0 ? \"primary\" : \"quaternary\" }}\n >\n {triggerText}\n </SelectTrigger>\n }\n />\n );\n};\n\nconst ContextPicker = ({\n type,\n value,\n onChange,\n invalid,\n}: {\n type: PortfolioKind;\n value?: string;\n onChange: (value: string) => void;\n invalid?: boolean;\n}): ReactElement => {\n const options =\n type === \"category\"\n ? CATEGORIES.map((name) => ({ id: name, name }))\n : type === \"client\"\n ? CLIENTS.map((name) => ({ id: name, name }))\n : LEADERS_LIST.map((leader) => ({ id: leader.name, name: leader.name }));\n const placeholder =\n type === \"category\"\n ? \"Choose a category\"\n : type === \"client\"\n ? \"Choose a client\"\n : \"Choose a project leader\";\n return (\n <Select\n forceCloseMenu\n options={options}\n selected={value ?? \"\"}\n onChange={(next) => onChange(String(next))}\n target={\n <SelectTrigger\n id=\"pf-context\"\n className=\"pf-trigger\"\n invalid={invalid}\n typographyProps={{ color: value ? \"primary\" : \"quaternary\" }}\n >\n {value ?? placeholder}\n </SelectTrigger>\n }\n />\n );\n};\n\n/* ------------------------------------------------------------------ */\n/* The reusable form body */\n/* ------------------------------------------------------------------ */\n\nconst StyledDetailsForm = styled.div`\n display: flex;\n flex-direction: column;\n gap: 24px;\n\n .field {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n /* DS form controls are fixed-width (Input 360px, SelectTrigger 300px); let\n them fill the dialog column instead. */\n .field .c-input-wrapper {\n width: 100%;\n }\n\n .field .pf-trigger {\n width: 100%;\n }\n`;\n\nexport interface PortfolioDetailsFieldsProps {\n values: PortfolioFormValues;\n onName: (value: string) => void;\n onContext: (value: string) => void;\n onProjects: (ids: string[]) => void;\n onGroupBy: (groupBy: GroupBy) => void;\n onVisibility: (value: PortfolioVisibility) => void;\n /* Form pattern (propagating through the app): the submit button is ALWAYS\n enabled. On submit the consumer flips showErrors; each field then outlines\n itself (aria-invalid) while it is invalid, and clears once it becomes\n valid. No field disables submit. */\n showErrors: boolean;\n}\n\n/** Name + the type's picker + visibility. No Dialog wrappers and no action\n button — the consumer (create step or edit dialog) supplies those. */\nexport const PortfolioDetailsFields = ({\n values,\n onName,\n onContext,\n onProjects,\n onGroupBy,\n onVisibility,\n showErrors,\n}: PortfolioDetailsFieldsProps): ReactElement => {\n const { type, name, context, projectIds, groupBy, visibility } = values;\n const nameInvalid = showErrors && name.trim().length === 0;\n const pickerInvalid =\n showErrors && (type === \"custom\" ? projectIds.length === 0 : !context);\n\n return (\n <StyledDetailsForm>\n <div className=\"field\">\n <Label htmlFor=\"pf-name\">Name</Label>\n <Input\n id=\"pf-name\"\n value={name}\n placeholder=\"Portfolio name\"\n invalid={nameInvalid}\n onChange={(event) => onName(event.target.value)}\n />\n </div>\n <div className=\"field\">\n <Label htmlFor={type === \"custom\" ? \"pf-projects\" : \"pf-context\"}>\n {contextFieldLabel(type)}\n </Label>\n {type === \"custom\" ? (\n <ProjectsPicker\n selected={projectIds}\n onChange={onProjects}\n groupBy={groupBy}\n onGroupBy={onGroupBy}\n invalid={pickerInvalid}\n />\n ) : (\n <ContextPicker\n type={type}\n value={context}\n onChange={onContext}\n invalid={pickerInvalid}\n />\n )}\n </div>\n <div className=\"field\">\n <RadioGroup\n label=\"Visibility\"\n variant=\"plain\"\n value={visibility}\n onChange={(value) => onVisibility(value as PortfolioVisibility)}\n options={VISIBILITY_OPTIONS.map((option) => ({\n id: option.id,\n name: option.title,\n description: option.description,\n }))}\n />\n </div>\n </StyledDetailsForm>\n );\n};\n\nPortfolioDetailsFields.displayName = \"PortfolioDetailsFields\";\n\n/* ------------------------------------------------------------------ */\n/* Edit Portfolio dialog — the create wizard's step 2, on its own */\n/* ------------------------------------------------------------------ */\n\nexport interface EditPortfolioDialogProps {\n open: boolean;\n /** The portfolio's current values; the dialog seeds itself from these on\n open, so Cancel discards edits and Save commits them. */\n initialValues: PortfolioFormValues;\n onClose: () => void;\n onSave?: (values: PortfolioFormValues) => void;\n}\n\n/*\n Same fields, same validation as create step 2. The type is fixed to the\n portfolio's kind (edit changes the details, not the kind), so there is no\n type radio here — only the name, the type's picker, and visibility.\n*/\nexport const EditPortfolioDialog = ({\n open,\n initialValues,\n onClose,\n onSave,\n}: EditPortfolioDialogProps): ReactElement => {\n const [values, setValues] = useState<PortfolioFormValues>(initialValues);\n const [showErrors, setShowErrors] = useState(false);\n\n /* Re-seed from the portfolio each time the dialog opens. */\n useEffect(() => {\n if (open) {\n setValues(initialValues);\n setShowErrors(false);\n }\n // Seed on open only — initialValues is read at that moment by design.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open]);\n\n const patch = (next: Partial<PortfolioFormValues>): void =>\n setValues((current) => ({ ...current, ...next }));\n\n const handleSave = (): void => {\n if (!isPortfolioDetailsValid(values)) {\n setShowErrors(true);\n return;\n }\n onSave?.(values);\n onClose();\n };\n\n return (\n <Dialog open={open} onClose={onClose} disableCloseOnEsc>\n <Dialog.Title>Edit Portfolio</Dialog.Title>\n <Dialog.ContentDivider />\n <Dialog.Content>\n <PortfolioDetailsFields\n values={values}\n onName={(name) => patch({ name })}\n onContext={(context) => patch({ context })}\n onProjects={(projectIds) => patch({ projectIds })}\n onGroupBy={(groupBy) => patch({ groupBy })}\n onVisibility={(visibility) => patch({ visibility })}\n showErrors={showErrors}\n />\n </Dialog.Content>\n <Dialog.ContentDivider />\n <Dialog.Actions>\n <Button\n variant=\"primary\"\n style={{ marginRight: \"12px\" }}\n onClick={handleSave}\n >\n Save Changes\n </Button>\n <Button variant=\"secondary\" data-action=\"cancel\" onClick={onClose}>\n Cancel\n </Button>\n </Dialog.Actions>\n </Dialog>\n );\n};\n\nEditPortfolioDialog.displayName = \"EditPortfolioDialog\";\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = useStableId;
|
|
7
|
+
var React = _interopRequireWildcard(require("react"));
|
|
8
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
9
|
+
/**
|
|
10
|
+
* Stable id generator for a single element.
|
|
11
|
+
*
|
|
12
|
+
* `React.useId` only exists in React 18+. This package still declares React
|
|
13
|
+
* 16/17 in `peerDependencies`, so we must not call `React.useId` directly.
|
|
14
|
+
* Instead we read it off the React export once, at module load, and fall back
|
|
15
|
+
* to a module-level counter when it is absent. Which branch runs is fixed for
|
|
16
|
+
* the life of the module, so the hook call order stays stable across renders.
|
|
17
|
+
*
|
|
18
|
+
* Intentionally NOT re-exported from `src/utils/index.ts`: the package root
|
|
19
|
+
* re-exports `./utils`, and this helper is internal to the radio components.
|
|
20
|
+
*/
|
|
21
|
+
var counter = 0;
|
|
22
|
+
var reactUseId = React.useId;
|
|
23
|
+
function useStableId(providedId) {
|
|
24
|
+
var generatedId = reactUseId ?
|
|
25
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
26
|
+
reactUseId() :
|
|
27
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
28
|
+
React.useMemo(function () {
|
|
29
|
+
return "ds-".concat(counter += 1);
|
|
30
|
+
}, []);
|
|
31
|
+
return providedId !== null && providedId !== void 0 ? providedId : generatedId;
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=useStableId.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useStableId.js","names":["React","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","counter","reactUseId","useId","useStableId","providedId","generatedId","useMemo","concat"],"sources":["../../../src/utils/useStableId.ts"],"sourcesContent":["import * as React from \"react\";\n\n/**\n * Stable id generator for a single element.\n *\n * `React.useId` only exists in React 18+. This package still declares React\n * 16/17 in `peerDependencies`, so we must not call `React.useId` directly.\n * Instead we read it off the React export once, at module load, and fall back\n * to a module-level counter when it is absent. Which branch runs is fixed for\n * the life of the module, so the hook call order stays stable across renders.\n *\n * Intentionally NOT re-exported from `src/utils/index.ts`: the package root\n * re-exports `./utils`, and this helper is internal to the radio components.\n */\nlet counter = 0;\n\nconst reactUseId = (React as { useId?: () => string }).useId;\n\nexport default function useStableId(providedId?: string): string {\n const generatedId = reactUseId\n ? // eslint-disable-next-line react-hooks/rules-of-hooks\n reactUseId()\n : // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useMemo(() => `ds-${(counter += 1)}`, []);\n\n return providedId ?? generatedId;\n}\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA+B,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,wBAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAImB,OAAO,GAAG,CAAC;AAEf,IAAMC,UAAU,GAAIxB,KAAK,CAA8ByB,KAAK;AAE7C,SAASC,WAAWA,CAACC,UAAmB,EAAU;EAC/D,IAAMC,WAAW,GAAGJ,UAAU;EAC1B;EACAA,UAAU,CAAC,CAAC;EACZ;EACAxB,KAAK,CAAC6B,OAAO,CAAC;IAAA,aAAAC,MAAA,CAAaP,OAAO,IAAI,CAAC;EAAA,CAAG,EAAE,EAAE,CAAC;EAEnD,OAAOI,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAIC,WAAW;AAClC","ignoreList":[]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
import { RadioCardVariant } from "./Styles";
|
|
3
|
+
export type { RadioCardVariant } from "./Styles";
|
|
4
|
+
export interface IRadioCardProps {
|
|
5
|
+
/** Option title — the accessible name of the radio. */
|
|
6
|
+
title: string;
|
|
7
|
+
/** Optional helper text, linked to the input via `aria-describedby`. */
|
|
8
|
+
description?: string;
|
|
9
|
+
/** Optional decorative leading icon. Rendered `aria-hidden`. */
|
|
10
|
+
icon?: ReactNode;
|
|
11
|
+
/** `"plain"` (dialog look, default) or `"card"` (bordered tile). */
|
|
12
|
+
variant?: RadioCardVariant;
|
|
13
|
+
/**
|
|
14
|
+
* Invalid state — turns the card border the alert colour. Ignored while the
|
|
15
|
+
* option is `checked`: a selected option can't also signal an error.
|
|
16
|
+
*/
|
|
17
|
+
invalid?: boolean;
|
|
18
|
+
/** Extra class names. */
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* A single radio option that owns a real, reachable native `<input type="radio">`.
|
|
23
|
+
* The whole card is one `<label>`, so clicking the title or description selects
|
|
24
|
+
* the option. Meant to be composed by `RadioGroup`.
|
|
25
|
+
*/
|
|
26
|
+
export declare const RadioCard: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof IRadioCardProps> & IRadioCardProps & React.RefAttributes<HTMLInputElement>>;
|
|
27
|
+
//# sourceMappingURL=RadioCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioCard.d.ts","sourceRoot":"","sources":["../../../../src/components/RadioCard/RadioCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAmC,SAAS,EAAO,MAAM,OAAO,CAAC;AAI/E,OAAO,EAAE,gBAAgB,EAAgC,MAAM,UAAU,CAAC;AAK1E,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,WAAW,eAAe;IAC9B,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,qKAyErB,CAAC"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["title", "description", "icon", "variant", "invalid", "className", "id", "checked", "disabled"];
|
|
4
|
+
import React, { forwardRef } from "react";
|
|
5
|
+
import classnames from "classnames";
|
|
6
|
+
import { StyledInput, StyledRadioCard } from "./Styles";
|
|
7
|
+
import useStableId from "../../utils/useStableId";
|
|
8
|
+
import RadioButtonIcon from "../Icons/collection/RadioButton";
|
|
9
|
+
import { Typography } from "../Typography/Typography";
|
|
10
|
+
/**
|
|
11
|
+
* A single radio option that owns a real, reachable native `<input type="radio">`.
|
|
12
|
+
* The whole card is one `<label>`, so clicking the title or description selects
|
|
13
|
+
* the option. Meant to be composed by `RadioGroup`.
|
|
14
|
+
*/
|
|
15
|
+
export const RadioCard = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
16
|
+
let title = _ref.title,
|
|
17
|
+
description = _ref.description,
|
|
18
|
+
icon = _ref.icon,
|
|
19
|
+
_ref$variant = _ref.variant,
|
|
20
|
+
variant = _ref$variant === void 0 ? "plain" : _ref$variant,
|
|
21
|
+
_ref$invalid = _ref.invalid,
|
|
22
|
+
invalid = _ref$invalid === void 0 ? false : _ref$invalid,
|
|
23
|
+
className = _ref.className,
|
|
24
|
+
id = _ref.id,
|
|
25
|
+
checked = _ref.checked,
|
|
26
|
+
disabled = _ref.disabled,
|
|
27
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
28
|
+
const inputId = useStableId(id);
|
|
29
|
+
const descriptionId = description ? inputId + "-desc" : undefined;
|
|
30
|
+
const isInvalid = invalid && !checked;
|
|
31
|
+
return /*#__PURE__*/React.createElement(StyledRadioCard, {
|
|
32
|
+
className: classnames("c-radio-card", className),
|
|
33
|
+
htmlFor: inputId,
|
|
34
|
+
$variant: variant,
|
|
35
|
+
$checked: !!checked,
|
|
36
|
+
$invalid: isInvalid,
|
|
37
|
+
$disabled: !!disabled,
|
|
38
|
+
$hasIcon: !!icon
|
|
39
|
+
}, /*#__PURE__*/React.createElement(StyledInput, _extends({
|
|
40
|
+
id: inputId,
|
|
41
|
+
className: "c-radio-card--input",
|
|
42
|
+
type: "radio",
|
|
43
|
+
ref: ref,
|
|
44
|
+
checked: checked,
|
|
45
|
+
disabled: disabled,
|
|
46
|
+
"aria-describedby": descriptionId,
|
|
47
|
+
"aria-invalid": isInvalid || undefined
|
|
48
|
+
}, props)), /*#__PURE__*/React.createElement("span", {
|
|
49
|
+
className: "c-radio-card--indicator",
|
|
50
|
+
"aria-hidden": "true"
|
|
51
|
+
}, /*#__PURE__*/React.createElement(RadioButtonIcon, {
|
|
52
|
+
width: "16",
|
|
53
|
+
height: "16"
|
|
54
|
+
})), icon ? /*#__PURE__*/React.createElement("span", {
|
|
55
|
+
className: "c-radio-card--icon",
|
|
56
|
+
"aria-hidden": "true"
|
|
57
|
+
}, icon) : null, /*#__PURE__*/React.createElement("span", {
|
|
58
|
+
className: "c-radio-card--text"
|
|
59
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
60
|
+
as: "span",
|
|
61
|
+
variant: "Body 2",
|
|
62
|
+
className: "c-radio-card--title"
|
|
63
|
+
}, title), description ? /*#__PURE__*/React.createElement(Typography, {
|
|
64
|
+
as: "span",
|
|
65
|
+
variant: "Caption 1",
|
|
66
|
+
color: "secondary",
|
|
67
|
+
id: descriptionId,
|
|
68
|
+
className: "c-radio-card--description"
|
|
69
|
+
}, description) : null));
|
|
70
|
+
});
|
|
71
|
+
RadioCard.displayName = "RadioCard";
|
|
72
|
+
//# sourceMappingURL=RadioCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioCard.js","names":["React","forwardRef","classnames","StyledInput","StyledRadioCard","useStableId","RadioButtonIcon","Typography","RadioCard","_ref","ref","title","description","icon","_ref$variant","variant","_ref$invalid","invalid","className","id","checked","disabled","props","_objectWithoutPropertiesLoose","_excluded","inputId","descriptionId","undefined","isInvalid","createElement","htmlFor","$variant","$checked","$invalid","$disabled","$hasIcon","_extends","type","width","height","as","color","displayName"],"sources":["../../../../src/components/RadioCard/RadioCard.tsx"],"sourcesContent":["import React, { forwardRef, InputHTMLAttributes, ReactNode, Ref } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { RadioCardVariant, StyledInput, StyledRadioCard } from \"./Styles\";\nimport useStableId from \"../../utils/useStableId\";\nimport RadioButtonIcon from \"../Icons/collection/RadioButton\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport type { RadioCardVariant } from \"./Styles\";\n\nexport interface IRadioCardProps {\n /** Option title — the accessible name of the radio. */\n title: string;\n /** Optional helper text, linked to the input via `aria-describedby`. */\n description?: string;\n /** Optional decorative leading icon. Rendered `aria-hidden`. */\n icon?: ReactNode;\n /** `\"plain\"` (dialog look, default) or `\"card\"` (bordered tile). */\n variant?: RadioCardVariant;\n /**\n * Invalid state — turns the card border the alert colour. Ignored while the\n * option is `checked`: a selected option can't also signal an error.\n */\n invalid?: boolean;\n /** Extra class names. */\n className?: string;\n}\n\n/**\n * A single radio option that owns a real, reachable native `<input type=\"radio\">`.\n * The whole card is one `<label>`, so clicking the title or description selects\n * the option. Meant to be composed by `RadioGroup`.\n */\nexport const RadioCard = forwardRef(\n (\n {\n title,\n description,\n icon,\n variant = \"plain\",\n invalid = false,\n className,\n id,\n checked,\n disabled,\n ...props\n }: Omit<InputHTMLAttributes<HTMLInputElement>, keyof IRadioCardProps> &\n IRadioCardProps,\n ref: Ref<HTMLInputElement> | null | undefined\n ) => {\n const inputId = useStableId(id);\n const descriptionId = description ? `${inputId}-desc` : undefined;\n const isInvalid = invalid && !checked;\n\n return (\n <StyledRadioCard\n className={classnames(\"c-radio-card\", className)}\n htmlFor={inputId}\n $variant={variant}\n $checked={!!checked}\n $invalid={isInvalid}\n $disabled={!!disabled}\n $hasIcon={!!icon}\n >\n <StyledInput\n id={inputId}\n className=\"c-radio-card--input\"\n type=\"radio\"\n ref={ref}\n checked={checked}\n disabled={disabled}\n aria-describedby={descriptionId}\n aria-invalid={isInvalid || undefined}\n {...props}\n />\n <span className=\"c-radio-card--indicator\" aria-hidden=\"true\">\n <RadioButtonIcon width=\"16\" height=\"16\" />\n </span>\n {icon ? (\n <span className=\"c-radio-card--icon\" aria-hidden=\"true\">\n {icon}\n </span>\n ) : null}\n <span className=\"c-radio-card--text\">\n <Typography\n as=\"span\"\n variant=\"Body 2\"\n className=\"c-radio-card--title\"\n >\n {title}\n </Typography>\n {description ? (\n <Typography\n as=\"span\"\n variant=\"Caption 1\"\n color=\"secondary\"\n id={descriptionId}\n className=\"c-radio-card--description\"\n >\n {description}\n </Typography>\n ) : null}\n </span>\n </StyledRadioCard>\n );\n }\n);\n\nRadioCard.displayName = \"RadioCard\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAA6C,OAAO;AAE9E,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAA2BC,WAAW,EAAEC,eAAe,QAAQ,UAAU;AACzE,OAAOC,WAAW,MAAM,yBAAyB;AACjD,OAAOC,eAAe,MAAM,iCAAiC;AAC7D,SAASC,UAAU,QAAQ,0BAA0B;AAsBrD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,SAAS,gBAAGP,UAAU,CACjC,CAAAQ,IAAA,EAcEC,GAA6C,KAC1C;EAAA,IAbDC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IACXC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IAAAC,YAAA,GAAAL,IAAA,CACJM,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,OAAO,GAAAA,YAAA;IAAAE,YAAA,GAAAP,IAAA,CACjBQ,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IACfE,SAAS,GAAAT,IAAA,CAATS,SAAS;IACTC,EAAE,GAAAV,IAAA,CAAFU,EAAE;IACFC,OAAO,GAAAX,IAAA,CAAPW,OAAO;IACPC,QAAQ,GAAAZ,IAAA,CAARY,QAAQ;IACLC,KAAK,GAAAC,6BAAA,CAAAd,IAAA,EAAAe,SAAA;EAKV,MAAMC,OAAO,GAAGpB,WAAW,CAACc,EAAE,CAAC;EAC/B,MAAMO,aAAa,GAAGd,WAAW,GAAMa,OAAO,aAAUE,SAAS;EACjE,MAAMC,SAAS,GAAGX,OAAO,IAAI,CAACG,OAAO;EAErC,oBACEpB,KAAA,CAAA6B,aAAA,CAACzB,eAAe;IACdc,SAAS,EAAEhB,UAAU,CAAC,cAAc,EAAEgB,SAAS,CAAE;IACjDY,OAAO,EAAEL,OAAQ;IACjBM,QAAQ,EAAEhB,OAAQ;IAClBiB,QAAQ,EAAE,CAAC,CAACZ,OAAQ;IACpBa,QAAQ,EAAEL,SAAU;IACpBM,SAAS,EAAE,CAAC,CAACb,QAAS;IACtBc,QAAQ,EAAE,CAAC,CAACtB;EAAK,gBAEjBb,KAAA,CAAA6B,aAAA,CAAC1B,WAAW,EAAAiC,QAAA;IACVjB,EAAE,EAAEM,OAAQ;IACZP,SAAS,EAAC,qBAAqB;IAC/BmB,IAAI,EAAC,OAAO;IACZ3B,GAAG,EAAEA,GAAI;IACTU,OAAO,EAAEA,OAAQ;IACjBC,QAAQ,EAAEA,QAAS;IACnB,oBAAkBK,aAAc;IAChC,gBAAcE,SAAS,IAAID;EAAU,GACjCL,KAAK,CACV,CAAC,eACFtB,KAAA,CAAA6B,aAAA;IAAMX,SAAS,EAAC,yBAAyB;IAAC,eAAY;EAAM,gBAC1DlB,KAAA,CAAA6B,aAAA,CAACvB,eAAe;IAACgC,KAAK,EAAC,IAAI;IAACC,MAAM,EAAC;EAAI,CAAE,CACrC,CAAC,EACN1B,IAAI,gBACHb,KAAA,CAAA6B,aAAA;IAAMX,SAAS,EAAC,oBAAoB;IAAC,eAAY;EAAM,GACpDL,IACG,CAAC,GACL,IAAI,eACRb,KAAA,CAAA6B,aAAA;IAAMX,SAAS,EAAC;EAAoB,gBAClClB,KAAA,CAAA6B,aAAA,CAACtB,UAAU;IACTiC,EAAE,EAAC,MAAM;IACTzB,OAAO,EAAC,QAAQ;IAChBG,SAAS,EAAC;EAAqB,GAE9BP,KACS,CAAC,EACZC,WAAW,gBACVZ,KAAA,CAAA6B,aAAA,CAACtB,UAAU;IACTiC,EAAE,EAAC,MAAM;IACTzB,OAAO,EAAC,WAAW;IACnB0B,KAAK,EAAC,WAAW;IACjBtB,EAAE,EAAEO,aAAc;IAClBR,SAAS,EAAC;EAA2B,GAEpCN,WACS,CAAC,GACX,IACA,CACS,CAAC;AAEtB,CACF,CAAC;AAEDJ,SAAS,CAACkC,WAAW,GAAG,WAAW","ignoreList":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type RadioCardVariant = "plain" | "card";
|
|
2
|
+
/**
|
|
3
|
+
* Real, focusable native radio, visually hidden with the sr-only idiom (copied
|
|
4
|
+
* from `Checkbox/Styles.ts`). Never `display: none` / `visibility: hidden`, so
|
|
5
|
+
* it stays in the tab order and in the accessibility tree.
|
|
6
|
+
*/
|
|
7
|
+
export declare const StyledInput: import("styled-components").StyledComponent<"input", any, {}, never>;
|
|
8
|
+
export interface IStyledRadioCard {
|
|
9
|
+
$variant: RadioCardVariant;
|
|
10
|
+
$checked?: boolean;
|
|
11
|
+
$invalid?: boolean;
|
|
12
|
+
$disabled?: boolean;
|
|
13
|
+
$hasIcon?: boolean;
|
|
14
|
+
}
|
|
15
|
+
export declare const StyledRadioCard: import("styled-components").StyledComponent<"label", any, IStyledRadioCard, never>;
|
|
16
|
+
//# sourceMappingURL=Styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/RadioCard/Styles.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,CAAC;AAUhD;;;;GAIG;AACH,eAAO,MAAM,WAAW,sEAYvB,CAAC;AAGF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,oFAgI3B,CAAC"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import styled, { css } from "styled-components";
|
|
2
|
+
import { BoxSizingStyle } from "../BoxSizingStyle";
|
|
3
|
+
/**
|
|
4
|
+
* Selected-state ring for the card variant. A shared, exported `SELECTION_RING`
|
|
5
|
+
* token does not exist yet (`StackedCard/Styles.ts` keeps its own as a private
|
|
6
|
+
* const), so we keep a local one here. Promotion to a shared token is tracked
|
|
7
|
+
* in #461359.
|
|
8
|
+
*/
|
|
9
|
+
const SELECTION_RING = "var(--color-primary-500)";
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Real, focusable native radio, visually hidden with the sr-only idiom (copied
|
|
13
|
+
* from `Checkbox/Styles.ts`). Never `display: none` / `visibility: hidden`, so
|
|
14
|
+
* it stays in the tab order and in the accessibility tree.
|
|
15
|
+
*/
|
|
16
|
+
export const StyledInput = styled.input.withConfig({
|
|
17
|
+
displayName: "Styles__StyledInput",
|
|
18
|
+
componentId: "sc-vi6l2r-0"
|
|
19
|
+
})(["border:0px;clip:rect(0px,0px,0px,0px);cursor:pointer;height:1px;margin:-1px;opacity:0;overflow:hidden;padding:0px;position:absolute;white-space:nowrap;width:1px;"]);
|
|
20
|
+
StyledInput.displayName = "RadioCardInput";
|
|
21
|
+
export const StyledRadioCard = styled.label.withConfig({
|
|
22
|
+
displayName: "Styles__StyledRadioCard",
|
|
23
|
+
componentId: "sc-vi6l2r-1"
|
|
24
|
+
})(["", " display:flex;align-items:flex-start;column-gap:12px;cursor:pointer;position:relative;", " .c-radio-card--indicator,.c-radio-card--icon{flex:0 0 auto;display:inline-flex;align-items:center;height:20px;}.c-radio-card--indicator svg{fill:transparent;}.c-radio-card--indicator circle:first-child{transition-duration:0.2s;stroke:var(--color-theme-500);}.c-radio-card--indicator circle:last-child{transition-duration:0.2s;transform-origin:center;transform:scale(0);fill:var(--color-secondary-500);}", ":checked ~ .c-radio-card--indicator{circle:first-child{stroke:var(--color-secondary);}circle:last-child{transform:scale(1);fill:var(--color-secondary);}}", ":focus-visible ~ .c-radio-card--indicator circle:first-child{stroke:var(--color-secondary);}.c-radio-card--text{display:flex;flex-direction:column;row-gap:2px;min-width:0;}", " ", ""], BoxSizingStyle, props => props.$hasIcon && css([".c-radio-card--icon{order:1;}.c-radio-card--text{order:2;margin-right:auto;}.c-radio-card--indicator{order:3;margin-left:auto;align-self:center;}"]), StyledInput, StyledInput, props => props.$variant === "card" && css(["align-items:center;min-height:44px;padding:8px 12px;border-radius:var(--ac-br-8);border:solid 1px var(--color-theme-300);background-color:var(--page-paper-main);transition:border-color 0.2s,background-color 0.2s,box-shadow 0.2s;&:hover{background-color:var(--color-theme-200);border-color:var(--color-theme-500);}", " ", " &:has(input:focus-visible),&:focus-within{box-shadow:0 0 0 2px var(--color-secondary);}"], props.$checked && css(["border-color:", ";box-shadow:0 0 0 1px ", ";&:hover{border-color:", ";}"], SELECTION_RING, SELECTION_RING, SELECTION_RING), props.$invalid && css(["border-color:var(--red-alert);&:hover{border-color:var(--red-alert);}"])), props => props.$disabled && css(["opacity:0.5;cursor:not-allowed;.c-radio-card--indicator svg,.c-radio-card--icon svg{cursor:not-allowed;}"]));
|
|
25
|
+
StyledRadioCard.displayName = "StyledRadioCard";
|
|
26
|
+
//# sourceMappingURL=Styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","SELECTION_RING","StyledInput","input","withConfig","displayName","componentId","StyledRadioCard","label","props","$hasIcon","$variant","$checked","$invalid","$disabled"],"sources":["../../../../src/components/RadioCard/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\nexport type RadioCardVariant = \"plain\" | \"card\";\n\n/**\n * Selected-state ring for the card variant. A shared, exported `SELECTION_RING`\n * token does not exist yet (`StackedCard/Styles.ts` keeps its own as a private\n * const), so we keep a local one here. Promotion to a shared token is tracked\n * in #461359.\n */\nconst SELECTION_RING = \"var(--color-primary-500)\";\n\n/**\n * Real, focusable native radio, visually hidden with the sr-only idiom (copied\n * from `Checkbox/Styles.ts`). Never `display: none` / `visibility: hidden`, so\n * it stays in the tab order and in the accessibility tree.\n */\nexport const StyledInput = styled.input`\n border: 0px;\n clip: rect(0px, 0px, 0px, 0px);\n cursor: pointer;\n height: 1px;\n margin: -1px;\n opacity: 0;\n overflow: hidden;\n padding: 0px;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`;\nStyledInput.displayName = \"RadioCardInput\";\n\nexport interface IStyledRadioCard {\n $variant: RadioCardVariant;\n $checked?: boolean;\n $invalid?: boolean;\n $disabled?: boolean;\n $hasIcon?: boolean;\n}\n\nexport const StyledRadioCard = styled.label<IStyledRadioCard>`\n ${BoxSizingStyle}\n\n display: flex;\n align-items: flex-start;\n column-gap: 12px;\n cursor: pointer;\n position: relative;\n\n /* EXPERIMENT: when a leading icon is present, move the radio indicator to the\n far right of the card, vertically centered to the middle of the card. */\n ${(props) =>\n props.$hasIcon &&\n css`\n .c-radio-card--icon {\n order: 1;\n }\n .c-radio-card--text {\n order: 2;\n margin-right: auto;\n }\n .c-radio-card--indicator {\n order: 3;\n margin-left: auto;\n align-self: center;\n }\n `}\n\n /* Indicator: drawn with RadioButtonIcon, retinted with the same CSS-var\n tokens RadioButton uses so old and new radios look identical. The wrapper\n height matches the Body2 title line-height so the 16px indicator centers\n against the first line of the title. */\n .c-radio-card--indicator,\n .c-radio-card--icon {\n flex: 0 0 auto;\n display: inline-flex;\n align-items: center;\n height: 20px;\n }\n\n .c-radio-card--indicator svg {\n fill: transparent;\n }\n .c-radio-card--indicator circle:first-child {\n transition-duration: 0.2s;\n stroke: var(--color-theme-500);\n }\n .c-radio-card--indicator circle:last-child {\n transition-duration: 0.2s;\n transform-origin: center;\n transform: scale(0);\n fill: var(--color-secondary-500);\n }\n\n ${StyledInput}:checked ~ .c-radio-card--indicator {\n circle:first-child {\n stroke: var(--color-secondary);\n }\n circle:last-child {\n transform: scale(1);\n fill: var(--color-secondary);\n }\n }\n\n ${StyledInput}:focus-visible ~ .c-radio-card--indicator circle:first-child {\n stroke: var(--color-secondary);\n }\n\n .c-radio-card--text {\n display: flex;\n flex-direction: column;\n row-gap: 2px;\n min-width: 0;\n }\n\n /* Card variant: bordered tile on Card variant=\"tile-1\" tokens. */\n ${(props) =>\n props.$variant === \"card\" &&\n css`\n align-items: center;\n min-height: 44px;\n padding: 8px 12px;\n border-radius: var(--ac-br-8);\n border: solid 1px var(--color-theme-300);\n background-color: var(--page-paper-main);\n transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;\n\n &:hover {\n background-color: var(--color-theme-200);\n border-color: var(--color-theme-500);\n }\n\n ${props.$checked &&\n css`\n border-color: ${SELECTION_RING};\n box-shadow: 0 0 0 1px ${SELECTION_RING};\n\n &:hover {\n border-color: ${SELECTION_RING};\n }\n `}\n\n ${props.$invalid &&\n css`\n border-color: var(--red-alert);\n\n &:hover {\n border-color: var(--red-alert);\n }\n `}\n\n &:has(input:focus-visible),\n &:focus-within {\n box-shadow: 0 0 0 2px var(--color-secondary);\n }\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n opacity: 0.5;\n cursor: not-allowed;\n\n .c-radio-card--indicator svg,\n .c-radio-card--icon svg {\n cursor: not-allowed;\n }\n `}\n`;\nStyledRadioCard.displayName = \"StyledRadioCard\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAIlD;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,cAAc,GAAG,0BAA0B;;AAEjD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAGJ,MAAM,CAACK,KAAK,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,yKAYtC;AACDJ,WAAW,CAACG,WAAW,GAAG,gBAAgB;AAU1C,OAAO,MAAME,eAAe,GAAGT,MAAM,CAACU,KAAK,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,g1BACvCN,cAAc,EAUbS,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdX,GAAG,uJAaF,EA4BDG,WAAW,EAUXA,WAAW,EAYVO,KAAK,IACNA,KAAK,CAACE,QAAQ,KAAK,MAAM,IACzBZ,GAAG,iaAcCU,KAAK,CAACG,QAAQ,IAChBb,GAAG,8EACeE,cAAc,EACNA,cAAc,EAGpBA,cAAc,CAEjC,EAECQ,KAAK,CAACI,QAAQ,IAChBd,GAAG,2EAMF,CAMF,EAEAU,KAAK,IACNA,KAAK,CAACK,SAAS,IACff,GAAG,8GAQF,CACJ;AACDQ,eAAe,CAACF,WAAW,GAAG,iBAAiB","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/RadioCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/RadioCard/index.ts"],"sourcesContent":["export * from \"./RadioCard\";\n"],"mappings":"AAAA,cAAc,aAAa","ignoreList":[]}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React, { ReactNode } from "react";
|
|
2
|
+
import { RadioGroupOrientation } from "./Styles";
|
|
3
|
+
import { Space } from "../LayoutTokens";
|
|
4
|
+
import { RadioCardVariant } from "../RadioCard";
|
|
5
|
+
export interface RadioGroupOption {
|
|
6
|
+
id: string | number;
|
|
7
|
+
name: string;
|
|
8
|
+
description?: string;
|
|
9
|
+
icon?: ReactNode;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
}
|
|
12
|
+
export interface IRadioGroupProps {
|
|
13
|
+
/** The options rendered as radios. */
|
|
14
|
+
options: RadioGroupOption[];
|
|
15
|
+
/** Selected option id. `undefined` means nothing is selected. */
|
|
16
|
+
value?: string | number;
|
|
17
|
+
/** Fired with the selected option id. Never called with `undefined`. */
|
|
18
|
+
onChange: (value: string | number) => void;
|
|
19
|
+
/** Shared input `name`. Defaults to a generated id; pass for real form posts. */
|
|
20
|
+
name?: string;
|
|
21
|
+
/** Group label, rendered as the `<legend>`. */
|
|
22
|
+
label?: string;
|
|
23
|
+
/** Visually hide the legend while keeping it in the accessibility tree. */
|
|
24
|
+
hideLabel?: boolean;
|
|
25
|
+
/** Helper text under the group. */
|
|
26
|
+
description?: string;
|
|
27
|
+
/** Adds the required asterisk and `aria-required`. */
|
|
28
|
+
required?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Invalid state — marks the group `aria-invalid` and shows `errorMessage`.
|
|
31
|
+
* Ignored once a `value` is selected: making any choice clears the error.
|
|
32
|
+
*/
|
|
33
|
+
invalid?: boolean;
|
|
34
|
+
/** Error text that replaces `description` while invalid. */
|
|
35
|
+
errorMessage?: string;
|
|
36
|
+
/** Disable the whole group. */
|
|
37
|
+
disabled?: boolean;
|
|
38
|
+
/** `"plain"` (default) or `"card"`. */
|
|
39
|
+
variant?: RadioCardVariant;
|
|
40
|
+
/** Layout direction of the option list. */
|
|
41
|
+
orientation?: RadioGroupOrientation;
|
|
42
|
+
/** Number of columns — card variant only, rendered through `Tiles`. */
|
|
43
|
+
columns?: number;
|
|
44
|
+
/** Override for the between-options gap only. */
|
|
45
|
+
space?: Space;
|
|
46
|
+
}
|
|
47
|
+
export declare const RadioGroup: React.ForwardRefExoticComponent<IRadioGroupProps & Omit<Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref">, keyof IRadioGroupProps> & React.RefAttributes<HTMLFieldSetElement>>;
|
|
48
|
+
//# sourceMappingURL=RadioGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwC,SAAS,EAAE,MAAM,OAAO,CAAC;AAI/E,OAAO,EAAE,qBAAqB,EAA8B,MAAM,UAAU,CAAC;AAE7E,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAa,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAI3D,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wEAAwE;IACxE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2EAA2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED,eAAO,MAAM,UAAU,2OAgHtB,CAAC"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["options", "value", "onChange", "name", "label", "hideLabel", "description", "required", "invalid", "errorMessage", "disabled", "variant", "orientation", "columns", "space", "className"];
|
|
4
|
+
import React, { forwardRef } from "react";
|
|
5
|
+
import classnames from "classnames";
|
|
6
|
+
import { StyledFieldset, StyledList } from "./Styles";
|
|
7
|
+
import useStableId from "../../utils/useStableId";
|
|
8
|
+
import { RadioCard } from "../RadioCard";
|
|
9
|
+
import { Tiles } from "../Tiles";
|
|
10
|
+
import { Typography } from "../Typography/Typography";
|
|
11
|
+
export const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
12
|
+
let options = _ref.options,
|
|
13
|
+
value = _ref.value,
|
|
14
|
+
onChange = _ref.onChange,
|
|
15
|
+
name = _ref.name,
|
|
16
|
+
label = _ref.label,
|
|
17
|
+
_ref$hideLabel = _ref.hideLabel,
|
|
18
|
+
hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
|
|
19
|
+
description = _ref.description,
|
|
20
|
+
_ref$required = _ref.required,
|
|
21
|
+
required = _ref$required === void 0 ? false : _ref$required,
|
|
22
|
+
_ref$invalid = _ref.invalid,
|
|
23
|
+
invalid = _ref$invalid === void 0 ? false : _ref$invalid,
|
|
24
|
+
errorMessage = _ref.errorMessage,
|
|
25
|
+
_ref$disabled = _ref.disabled,
|
|
26
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
27
|
+
_ref$variant = _ref.variant,
|
|
28
|
+
variant = _ref$variant === void 0 ? "plain" : _ref$variant,
|
|
29
|
+
_ref$orientation = _ref.orientation,
|
|
30
|
+
orientation = _ref$orientation === void 0 ? "vertical" : _ref$orientation,
|
|
31
|
+
columns = _ref.columns,
|
|
32
|
+
space = _ref.space,
|
|
33
|
+
className = _ref.className,
|
|
34
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
35
|
+
const groupName = useStableId(name);
|
|
36
|
+
const messageId = useStableId();
|
|
37
|
+
|
|
38
|
+
// A group with a selection isn't invalid — picking any option clears the
|
|
39
|
+
// error, mirroring how `checked` beats `invalid` on a single RadioCard.
|
|
40
|
+
const isInvalid = invalid && value === undefined;
|
|
41
|
+
const showError = isInvalid && !!errorMessage;
|
|
42
|
+
const messageText = showError ? errorMessage : description;
|
|
43
|
+
const hasMessage = !!messageText;
|
|
44
|
+
const cards = options.map(option => /*#__PURE__*/React.createElement(RadioCard, {
|
|
45
|
+
key: option.id,
|
|
46
|
+
variant: variant,
|
|
47
|
+
name: groupName,
|
|
48
|
+
value: option.id,
|
|
49
|
+
checked: value === option.id,
|
|
50
|
+
disabled: option.disabled,
|
|
51
|
+
invalid: isInvalid,
|
|
52
|
+
icon: option.icon,
|
|
53
|
+
title: option.name,
|
|
54
|
+
description: option.description,
|
|
55
|
+
onChange: () => onChange(option.id)
|
|
56
|
+
}));
|
|
57
|
+
const useTiles = variant === "card" && typeof columns === "number";
|
|
58
|
+
return /*#__PURE__*/React.createElement(StyledFieldset, _extends({
|
|
59
|
+
ref: ref,
|
|
60
|
+
className: classnames("c-radio-group", className),
|
|
61
|
+
$hideLabel: hideLabel,
|
|
62
|
+
disabled: disabled,
|
|
63
|
+
"aria-required": required || undefined,
|
|
64
|
+
"aria-invalid": isInvalid || undefined,
|
|
65
|
+
"aria-describedby": hasMessage ? messageId : undefined
|
|
66
|
+
}, rest), label ? /*#__PURE__*/React.createElement(Typography, {
|
|
67
|
+
as: "legend",
|
|
68
|
+
variant: "Body 2",
|
|
69
|
+
weight: "bold",
|
|
70
|
+
color: isInvalid ? "alert" : "primary",
|
|
71
|
+
className: "c-radio-group--legend"
|
|
72
|
+
}, label, required ? "*" : null) : null, useTiles ? /*#__PURE__*/React.createElement(Tiles, {
|
|
73
|
+
className: "c-radio-group--list",
|
|
74
|
+
columns: columns,
|
|
75
|
+
space: space
|
|
76
|
+
}, cards) : /*#__PURE__*/React.createElement(StyledList, {
|
|
77
|
+
className: "c-radio-group--list",
|
|
78
|
+
$orientation: orientation,
|
|
79
|
+
$space: space
|
|
80
|
+
}, cards), hasMessage ? /*#__PURE__*/React.createElement(Typography, {
|
|
81
|
+
as: "p",
|
|
82
|
+
variant: "Caption 1",
|
|
83
|
+
id: messageId,
|
|
84
|
+
color: showError ? "alert" : "secondary",
|
|
85
|
+
className: "c-radio-group--message"
|
|
86
|
+
}, messageText) : null);
|
|
87
|
+
});
|
|
88
|
+
RadioGroup.displayName = "RadioGroup";
|
|
89
|
+
//# sourceMappingURL=RadioGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","names":["React","forwardRef","classnames","StyledFieldset","StyledList","useStableId","RadioCard","Tiles","Typography","RadioGroup","_ref","ref","options","value","onChange","name","label","_ref$hideLabel","hideLabel","description","_ref$required","required","_ref$invalid","invalid","errorMessage","_ref$disabled","disabled","_ref$variant","variant","_ref$orientation","orientation","columns","space","className","rest","_objectWithoutPropertiesLoose","_excluded","groupName","messageId","isInvalid","undefined","showError","messageText","hasMessage","cards","map","option","createElement","key","id","checked","icon","title","useTiles","_extends","$hideLabel","as","weight","color","$orientation","$space","displayName"],"sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React, { ComponentPropsWithoutRef, forwardRef, ReactNode } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { RadioGroupOrientation, StyledFieldset, StyledList } from \"./Styles\";\nimport useStableId from \"../../utils/useStableId\";\nimport { Space } from \"../LayoutTokens\";\nimport { RadioCard, RadioCardVariant } from \"../RadioCard\";\nimport { Tiles } from \"../Tiles\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport interface RadioGroupOption {\n id: string | number;\n name: string;\n description?: string;\n icon?: ReactNode;\n disabled?: boolean;\n}\n\nexport interface IRadioGroupProps {\n /** The options rendered as radios. */\n options: RadioGroupOption[];\n /** Selected option id. `undefined` means nothing is selected. */\n value?: string | number;\n /** Fired with the selected option id. Never called with `undefined`. */\n onChange: (value: string | number) => void;\n /** Shared input `name`. Defaults to a generated id; pass for real form posts. */\n name?: string;\n /** Group label, rendered as the `<legend>`. */\n label?: string;\n /** Visually hide the legend while keeping it in the accessibility tree. */\n hideLabel?: boolean;\n /** Helper text under the group. */\n description?: string;\n /** Adds the required asterisk and `aria-required`. */\n required?: boolean;\n /**\n * Invalid state — marks the group `aria-invalid` and shows `errorMessage`.\n * Ignored once a `value` is selected: making any choice clears the error.\n */\n invalid?: boolean;\n /** Error text that replaces `description` while invalid. */\n errorMessage?: string;\n /** Disable the whole group. */\n disabled?: boolean;\n /** `\"plain\"` (default) or `\"card\"`. */\n variant?: RadioCardVariant;\n /** Layout direction of the option list. */\n orientation?: RadioGroupOrientation;\n /** Number of columns — card variant only, rendered through `Tiles`. */\n columns?: number;\n /** Override for the between-options gap only. */\n space?: Space;\n}\n\nexport const RadioGroup = forwardRef<\n HTMLFieldSetElement,\n IRadioGroupProps &\n Omit<ComponentPropsWithoutRef<\"fieldset\">, keyof IRadioGroupProps>\n>(\n (\n {\n options,\n value,\n onChange,\n name,\n label,\n hideLabel = false,\n description,\n required = false,\n invalid = false,\n errorMessage,\n disabled = false,\n variant = \"plain\",\n orientation = \"vertical\",\n columns,\n space,\n className,\n ...rest\n },\n ref\n ) => {\n const groupName = useStableId(name);\n const messageId = useStableId();\n\n // A group with a selection isn't invalid — picking any option clears the\n // error, mirroring how `checked` beats `invalid` on a single RadioCard.\n const isInvalid = invalid && value === undefined;\n\n const showError = isInvalid && !!errorMessage;\n const messageText = showError ? errorMessage : description;\n const hasMessage = !!messageText;\n\n const cards = options.map((option) => (\n <RadioCard\n key={option.id}\n variant={variant}\n name={groupName}\n value={option.id}\n checked={value === option.id}\n disabled={option.disabled}\n invalid={isInvalid}\n icon={option.icon}\n title={option.name}\n description={option.description}\n onChange={() => onChange(option.id)}\n />\n ));\n\n const useTiles = variant === \"card\" && typeof columns === \"number\";\n\n return (\n <StyledFieldset\n ref={ref}\n className={classnames(\"c-radio-group\", className)}\n $hideLabel={hideLabel}\n disabled={disabled}\n aria-required={required || undefined}\n aria-invalid={isInvalid || undefined}\n aria-describedby={hasMessage ? messageId : undefined}\n {...rest}\n >\n {label ? (\n <Typography\n as=\"legend\"\n variant=\"Body 2\"\n weight=\"bold\"\n color={isInvalid ? \"alert\" : \"primary\"}\n className=\"c-radio-group--legend\"\n >\n {label}\n {required ? \"*\" : null}\n </Typography>\n ) : null}\n\n {useTiles ? (\n <Tiles\n className=\"c-radio-group--list\"\n columns={columns as number}\n space={space}\n >\n {cards}\n </Tiles>\n ) : (\n <StyledList\n className=\"c-radio-group--list\"\n $orientation={orientation}\n $space={space}\n >\n {cards}\n </StyledList>\n )}\n\n {hasMessage ? (\n <Typography\n as=\"p\"\n variant=\"Caption 1\"\n id={messageId}\n color={showError ? \"alert\" : \"secondary\"}\n className=\"c-radio-group--message\"\n >\n {messageText}\n </Typography>\n ) : null}\n </StyledFieldset>\n );\n }\n);\n\nRadioGroup.displayName = \"RadioGroup\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAA8BC,UAAU,QAAmB,OAAO;AAE9E,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAAgCC,cAAc,EAAEC,UAAU,QAAQ,UAAU;AAC5E,OAAOC,WAAW,MAAM,yBAAyB;AAEjD,SAASC,SAAS,QAA0B,cAAc;AAC1D,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,UAAU,QAAQ,0BAA0B;AA8CrD,OAAO,MAAMC,UAAU,gBAAGR,UAAU,CAKlC,CAAAS,IAAA,EAoBEC,GAAG,KACA;EAAA,IAnBDC,OAAO,GAAAF,IAAA,CAAPE,OAAO;IACPC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IACJC,KAAK,GAAAN,IAAA,CAALM,KAAK;IAAAC,cAAA,GAAAP,IAAA,CACLQ,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IACjBE,WAAW,GAAAT,IAAA,CAAXS,WAAW;IAAAC,aAAA,GAAAV,IAAA,CACXW,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,YAAA,GAAAZ,IAAA,CAChBa,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,KAAK,GAAAA,YAAA;IACfE,YAAY,GAAAd,IAAA,CAAZc,YAAY;IAAAC,aAAA,GAAAf,IAAA,CACZgB,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,KAAK,GAAAA,aAAA;IAAAE,YAAA,GAAAjB,IAAA,CAChBkB,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,OAAO,GAAAA,YAAA;IAAAE,gBAAA,GAAAnB,IAAA,CACjBoB,WAAW;IAAXA,WAAW,GAAAD,gBAAA,cAAG,UAAU,GAAAA,gBAAA;IACxBE,OAAO,GAAArB,IAAA,CAAPqB,OAAO;IACPC,KAAK,GAAAtB,IAAA,CAALsB,KAAK;IACLC,SAAS,GAAAvB,IAAA,CAATuB,SAAS;IACNC,IAAI,GAAAC,6BAAA,CAAAzB,IAAA,EAAA0B,SAAA;EAIT,MAAMC,SAAS,GAAGhC,WAAW,CAACU,IAAI,CAAC;EACnC,MAAMuB,SAAS,GAAGjC,WAAW,CAAC,CAAC;;EAE/B;EACA;EACA,MAAMkC,SAAS,GAAGhB,OAAO,IAAIV,KAAK,KAAK2B,SAAS;EAEhD,MAAMC,SAAS,GAAGF,SAAS,IAAI,CAAC,CAACf,YAAY;EAC7C,MAAMkB,WAAW,GAAGD,SAAS,GAAGjB,YAAY,GAAGL,WAAW;EAC1D,MAAMwB,UAAU,GAAG,CAAC,CAACD,WAAW;EAEhC,MAAME,KAAK,GAAGhC,OAAO,CAACiC,GAAG,CAAEC,MAAM,iBAC/B9C,KAAA,CAAA+C,aAAA,CAACzC,SAAS;IACR0C,GAAG,EAAEF,MAAM,CAACG,EAAG;IACfrB,OAAO,EAAEA,OAAQ;IACjBb,IAAI,EAAEsB,SAAU;IAChBxB,KAAK,EAAEiC,MAAM,CAACG,EAAG;IACjBC,OAAO,EAAErC,KAAK,KAAKiC,MAAM,CAACG,EAAG;IAC7BvB,QAAQ,EAAEoB,MAAM,CAACpB,QAAS;IAC1BH,OAAO,EAAEgB,SAAU;IACnBY,IAAI,EAAEL,MAAM,CAACK,IAAK;IAClBC,KAAK,EAAEN,MAAM,CAAC/B,IAAK;IACnBI,WAAW,EAAE2B,MAAM,CAAC3B,WAAY;IAChCL,QAAQ,EAAEA,CAAA,KAAMA,QAAQ,CAACgC,MAAM,CAACG,EAAE;EAAE,CACrC,CACF,CAAC;EAEF,MAAMI,QAAQ,GAAGzB,OAAO,KAAK,MAAM,IAAI,OAAOG,OAAO,KAAK,QAAQ;EAElE,oBACE/B,KAAA,CAAA+C,aAAA,CAAC5C,cAAc,EAAAmD,QAAA;IACb3C,GAAG,EAAEA,GAAI;IACTsB,SAAS,EAAE/B,UAAU,CAAC,eAAe,EAAE+B,SAAS,CAAE;IAClDsB,UAAU,EAAErC,SAAU;IACtBQ,QAAQ,EAAEA,QAAS;IACnB,iBAAeL,QAAQ,IAAImB,SAAU;IACrC,gBAAcD,SAAS,IAAIC,SAAU;IACrC,oBAAkBG,UAAU,GAAGL,SAAS,GAAGE;EAAU,GACjDN,IAAI,GAEPlB,KAAK,gBACJhB,KAAA,CAAA+C,aAAA,CAACvC,UAAU;IACTgD,EAAE,EAAC,QAAQ;IACX5B,OAAO,EAAC,QAAQ;IAChB6B,MAAM,EAAC,MAAM;IACbC,KAAK,EAAEnB,SAAS,GAAG,OAAO,GAAG,SAAU;IACvCN,SAAS,EAAC;EAAuB,GAEhCjB,KAAK,EACLK,QAAQ,GAAG,GAAG,GAAG,IACR,CAAC,GACX,IAAI,EAEPgC,QAAQ,gBACPrD,KAAA,CAAA+C,aAAA,CAACxC,KAAK;IACJ0B,SAAS,EAAC,qBAAqB;IAC/BF,OAAO,EAAEA,OAAkB;IAC3BC,KAAK,EAAEA;EAAM,GAEZY,KACI,CAAC,gBAER5C,KAAA,CAAA+C,aAAA,CAAC3C,UAAU;IACT6B,SAAS,EAAC,qBAAqB;IAC/B0B,YAAY,EAAE7B,WAAY;IAC1B8B,MAAM,EAAE5B;EAAM,GAEbY,KACS,CACb,EAEAD,UAAU,gBACT3C,KAAA,CAAA+C,aAAA,CAACvC,UAAU;IACTgD,EAAE,EAAC,GAAG;IACN5B,OAAO,EAAC,WAAW;IACnBqB,EAAE,EAAEX,SAAU;IACdoB,KAAK,EAAEjB,SAAS,GAAG,OAAO,GAAG,WAAY;IACzCR,SAAS,EAAC;EAAwB,GAEjCS,WACS,CAAC,GACX,IACU,CAAC;AAErB,CACF,CAAC;AAEDjC,UAAU,CAACoD,WAAW,GAAG,YAAY","ignoreList":[]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Space } from "../LayoutTokens";
|
|
2
|
+
export type RadioGroupOrientation = "vertical" | "horizontal";
|
|
3
|
+
export interface IStyledFieldset {
|
|
4
|
+
$hideLabel?: boolean;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* `<fieldset>` reset — no default border or padding. Layout lives on the inner
|
|
8
|
+
* list div, never on the fieldset, because a fieldset breaks flex/grid in some
|
|
9
|
+
* browsers.
|
|
10
|
+
*/
|
|
11
|
+
export declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", any, IStyledFieldset, never>;
|
|
12
|
+
export interface IStyledList {
|
|
13
|
+
$orientation: RadioGroupOrientation;
|
|
14
|
+
$space?: Space;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Flex list of options. Default between-options gap is 12px (the
|
|
18
|
+
* ExportProjectDialog look); `$space` overrides only this gap, using the same
|
|
19
|
+
* `Space`-to-pixel mapping as `Tiles` so a group and a `Tiles` grid line up.
|
|
20
|
+
*/
|
|
21
|
+
export declare const StyledList: import("styled-components").StyledComponent<"div", any, IStyledList, never>;
|
|
22
|
+
//# sourceMappingURL=Styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/RadioGroup/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAS,MAAM,iBAAiB,CAAC;AAE/C,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE9D,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,cAAc,sFAgC1B,CAAC;AAGF,MAAM,WAAW,WAAW;IAC1B,YAAY,EAAE,qBAAqB,CAAC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU,6EAYtB,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import styled, { css } from "styled-components";
|
|
2
|
+
import { SPACE } from "../LayoutTokens";
|
|
3
|
+
/**
|
|
4
|
+
* `<fieldset>` reset — no default border or padding. Layout lives on the inner
|
|
5
|
+
* list div, never on the fieldset, because a fieldset breaks flex/grid in some
|
|
6
|
+
* browsers.
|
|
7
|
+
*/
|
|
8
|
+
export const StyledFieldset = styled.fieldset.withConfig({
|
|
9
|
+
displayName: "Styles__StyledFieldset",
|
|
10
|
+
componentId: "sc-2qnvoo-0"
|
|
11
|
+
})(["border:0;margin:0;padding:0;min-width:0;.c-radio-group--legend{padding:0;margin:0 0 12px;}.c-radio-group--message{margin:8px 0 0;}", ""], props => props.$hideLabel && css([".c-radio-group--legend{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;white-space:nowrap;border:0;clip:rect(0px,0px,0px,0px);}"]));
|
|
12
|
+
StyledFieldset.displayName = "RadioGroupFieldset";
|
|
13
|
+
/**
|
|
14
|
+
* Flex list of options. Default between-options gap is 12px (the
|
|
15
|
+
* ExportProjectDialog look); `$space` overrides only this gap, using the same
|
|
16
|
+
* `Space`-to-pixel mapping as `Tiles` so a group and a `Tiles` grid line up.
|
|
17
|
+
*/
|
|
18
|
+
export const StyledList = styled.div.withConfig({
|
|
19
|
+
displayName: "Styles__StyledList",
|
|
20
|
+
componentId: "sc-2qnvoo-1"
|
|
21
|
+
})(["display:flex;flex-direction:", ";gap:", ";", ""], props => props.$orientation === "horizontal" ? "row" : "column", props => props.$space ? SPACE[props.$space] : "12px", props => props.$orientation === "horizontal" && css(["flex-wrap:wrap;align-items:center;"]));
|
|
22
|
+
StyledList.displayName = "RadioGroupList";
|
|
23
|
+
//# sourceMappingURL=Styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","SPACE","StyledFieldset","fieldset","withConfig","displayName","componentId","props","$hideLabel","StyledList","div","$orientation","$space"],"sources":["../../../../src/components/RadioGroup/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Space, SPACE } from \"../LayoutTokens\";\n\nexport type RadioGroupOrientation = \"vertical\" | \"horizontal\";\n\nexport interface IStyledFieldset {\n $hideLabel?: boolean;\n}\n\n/**\n * `<fieldset>` reset — no default border or padding. Layout lives on the inner\n * list div, never on the fieldset, because a fieldset breaks flex/grid in some\n * browsers.\n */\nexport const StyledFieldset = styled.fieldset<IStyledFieldset>`\n border: 0;\n margin: 0;\n padding: 0;\n min-width: 0;\n\n .c-radio-group--legend {\n padding: 0;\n margin: 0 0 12px;\n }\n\n .c-radio-group--message {\n margin: 8px 0 0;\n }\n\n /* hideLabel: keep the legend in the a11y tree, hide it visually. Same sr-only\n idiom the hidden radio input uses. */\n ${(props) =>\n props.$hideLabel &&\n css`\n .c-radio-group--legend {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n white-space: nowrap;\n border: 0;\n clip: rect(0px, 0px, 0px, 0px);\n }\n `}\n`;\nStyledFieldset.displayName = \"RadioGroupFieldset\";\n\nexport interface IStyledList {\n $orientation: RadioGroupOrientation;\n $space?: Space;\n}\n\n/**\n * Flex list of options. Default between-options gap is 12px (the\n * ExportProjectDialog look); `$space` overrides only this gap, using the same\n * `Space`-to-pixel mapping as `Tiles` so a group and a `Tiles` grid line up.\n */\nexport const StyledList = styled.div<IStyledList>`\n display: flex;\n flex-direction: ${(props) =>\n props.$orientation === \"horizontal\" ? \"row\" : \"column\"};\n gap: ${(props) => (props.$space ? SPACE[props.$space] : \"12px\")};\n\n ${(props) =>\n props.$orientation === \"horizontal\" &&\n css`\n flex-wrap: wrap;\n align-items: center;\n `}\n`;\nStyledList.displayName = \"RadioGroupList\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAAgBC,KAAK,QAAQ,iBAAiB;AAQ9C;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAGH,MAAM,CAACI,QAAQ,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+IAiBxCC,KAAK,IACNA,KAAK,CAACC,UAAU,IAChBR,GAAG,kKAYF,CACJ;AACDE,cAAc,CAACG,WAAW,GAAG,oBAAoB;AAOjD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,UAAU,GAAGV,MAAM,CAACW,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,uDAEfC,KAAK,IACtBA,KAAK,CAACI,YAAY,KAAK,YAAY,GAAG,KAAK,GAAG,QAAQ,EAChDJ,KAAK,IAAMA,KAAK,CAACK,MAAM,GAAGX,KAAK,CAACM,KAAK,CAACK,MAAM,CAAC,GAAG,MAAO,EAE5DL,KAAK,IACNA,KAAK,CAACI,YAAY,KAAK,YAAY,IACnCX,GAAG,wCAGF,CACJ;AACDS,UAAU,CAACJ,WAAW,GAAG,gBAAgB","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/RadioGroup/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/RadioGroup/index.ts"],"sourcesContent":["export * from \"./RadioGroup\";\n"],"mappings":"AAAA,cAAc,cAAc","ignoreList":[]}
|