@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 5.9 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/radio-control/index.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { VStack } from '../v-stack';\nimport { StyledHelp } from '../base-control/styles/base-control-styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction generateOptionDescriptionId(radioGroupId, index) {\n return `${radioGroupId}-${index}-option-description`;\n}\nfunction generateOptionId(radioGroupId, index) {\n return `${radioGroupId}-${index}`;\n}\nfunction generateHelpId(radioGroupId) {\n return `${radioGroupId}__help`;\n}\n\n/**\n * Render a user interface to select the user type using radio inputs.\n *\n * ```jsx\n * import { RadioControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyRadioControl = () => {\n * const [ option, setOption ] = useState( 'a' );\n *\n * return (\n * <RadioControl\n * label=\"User type\"\n * help=\"The type of the current user\"\n * selected={ option }\n * options={ [\n * { label: 'Author', value: 'a' },\n * { label: 'Editor', value: 'e' },\n * ] }\n * onChange={ ( value ) => setOption( value ) }\n * />\n * );\n * };\n * ```\n */\nexport function RadioControl(props) {\n const {\n label,\n className,\n selected,\n help,\n onChange,\n onClick,\n hideLabelFromVision,\n options = [],\n id: preferredId,\n ...additionalProps\n } = props;\n const id = useInstanceId(RadioControl, 'inspector-radio-control', preferredId);\n const onChangeValue = event => onChange(event.target.value);\n if (!options?.length) {\n return null;\n }\n return /*#__PURE__*/_jsxs(\"fieldset\", {\n id: id,\n role: \"radiogroup\",\n className: clsx(className, 'components-radio-control'),\n \"aria-describedby\": !!help ? generateHelpId(id) : undefined,\n children: [hideLabelFromVision ? /*#__PURE__*/_jsx(VisuallyHidden, {\n as: \"legend\",\n children: label\n }) : /*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n as: \"legend\",\n children: label\n }), /*#__PURE__*/_jsx(VStack, {\n spacing: 3,\n className: clsx('components-radio-control__group-wrapper', {\n 'has-help': !!help\n }),\n children: options.map((option, index) => /*#__PURE__*/_jsxs(\"div\", {\n className: \"components-radio-control__option\",\n children: [/*#__PURE__*/_jsx(\"input\", {\n id: generateOptionId(id, index),\n className: \"components-radio-control__input\",\n type: \"radio\",\n name: id,\n value: option.value,\n onChange: onChangeValue,\n checked: option.value === selected,\n \"aria-describedby\": !!option.description ? generateOptionDescriptionId(id, index) : undefined,\n onClick: event => {\n // Compat code for Safari to ensure that the radio is focused when clicked.\n event.currentTarget.focus();\n onClick?.(event);\n },\n ...additionalProps\n }), /*#__PURE__*/_jsx(\"label\", {\n className: \"components-radio-control__label\",\n htmlFor: generateOptionId(id, index),\n children: option.label\n }), !!option.description ? /*#__PURE__*/_jsx(StyledHelp, {\n id: generateOptionDescriptionId(id, index),\n className: \"components-radio-control__option-description\",\n children: option.description\n }) : null]\n }, generateOptionId(id, index)))\n }), !!help && /*#__PURE__*/_jsx(StyledHelp, {\n id: generateHelpId(id),\n className: \"components-base-control__help\",\n children: help\n })]\n });\n}\nexport default RadioControl;"],
"mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,qBAAqB;AAK9B,OAAO,iBAAiB;AACxB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,4BAA4B,cAAc,OAAO;AACxD,SAAO,GAAG,YAAY,IAAI,KAAK;AACjC;AACA,SAAS,iBAAiB,cAAc,OAAO;AAC7C,SAAO,GAAG,YAAY,IAAI,KAAK;AACjC;AACA,SAAS,eAAe,cAAc;AACpC,SAAO,GAAG,YAAY;AACxB;AA2BO,SAAS,aAAa,OAAO;AAClC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAC;AAAA,IACX,IAAI;AAAA,IACJ,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,KAAK,cAAc,cAAc,2BAA2B,WAAW;AAC7E,QAAM,gBAAgB,WAAS,SAAS,MAAM,OAAO,KAAK;AAC1D,MAAI,CAAC,SAAS,QAAQ;AACpB,WAAO;AAAA,EACT;AACA,SAAoB,sBAAM,YAAY;AAAA,IACpC;AAAA,IACA,MAAM;AAAA,IACN,WAAW,KAAK,WAAW,0BAA0B;AAAA,IACrD,oBAAoB,CAAC,CAAC,OAAO,eAAe,EAAE,IAAI;AAAA,IAClD,UAAU,CAAC,sBAAmC,qBAAK,gBAAgB;AAAA,MACjE,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,IAAiB,qBAAK,YAAY,aAAa;AAAA,MAC9C,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,MAC5B,SAAS;AAAA,MACT,WAAW,KAAK,2CAA2C;AAAA,QACzD,YAAY,CAAC,CAAC;AAAA,MAChB,CAAC;AAAA,MACD,UAAU,QAAQ,IAAI,CAAC,QAAQ,UAAuB,sBAAM,OAAO;AAAA,QACjE,WAAW;AAAA,QACX,UAAU,CAAc,qBAAK,SAAS;AAAA,UACpC,IAAI,iBAAiB,IAAI,KAAK;AAAA,UAC9B,WAAW;AAAA,UACX,MAAM;AAAA,UACN,MAAM;AAAA,UACN,OAAO,OAAO;AAAA,UACd,UAAU;AAAA,UACV,SAAS,OAAO,UAAU;AAAA,UAC1B,oBAAoB,CAAC,CAAC,OAAO,cAAc,4BAA4B,IAAI,KAAK,IAAI;AAAA,UACpF,SAAS,WAAS;AAEhB,kBAAM,cAAc,MAAM;AAC1B,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,GAAG;AAAA,QACL,CAAC,GAAgB,qBAAK,SAAS;AAAA,UAC7B,WAAW;AAAA,UACX,SAAS,iBAAiB,IAAI,KAAK;AAAA,UACnC,UAAU,OAAO;AAAA,QACnB,CAAC,GAAG,CAAC,CAAC,OAAO,cAA2B,qBAAK,YAAY;AAAA,UACvD,IAAI,4BAA4B,IAAI,KAAK;AAAA,UACzC,WAAW;AAAA,UACX,UAAU,OAAO;AAAA,QACnB,CAAC,IAAI,IAAI;AAAA,MACX,GAAG,iBAAiB,IAAI,KAAK,CAAC,CAAC;AAAA,IACjC,CAAC,GAAG,CAAC,CAAC,QAAqB,qBAAK,YAAY;AAAA,MAC1C,IAAI,eAAe,EAAE;AAAA,MACrB,WAAW;AAAA,MACX,UAAU;AAAA,IACZ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,wBAAQ;",
"names": []
}