UNPKG

@wordpress/components

Version:
8 lines (7 loc) 2.66 kB
{ "version": 3, "sources": ["../../src/disabled/index.tsx"], "sourcesContent": ["import { disabledStyles } from './styles/disabled-styles';\nimport { useCx } from '../utils';\nimport Context from './context';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst {\n Consumer,\n Provider\n} = Context;\n\n/**\n * `Disabled` is a component which disables descendant tabbable elements and\n * prevents pointer interaction.\n *\n * _Note: this component may not behave as expected in browsers that don't\n * support the `inert` HTML attribute. We recommend adding the official WICG\n * polyfill when using this component in your project._\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert\n *\n * ```jsx\n * import { Button, Disabled, TextControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDisabled = () => {\n * \tconst [ isDisabled, setIsDisabled ] = useState( true );\n *\n *\tlet input = (\n *\t\t<TextControl\n *\t\t\t__next40pxDefaultSize\n *\t\t\tlabel=\"Input\"\n *\t\t\tonChange={ () => {} }\n *\t\t/>\n *\t);\n * \tif ( isDisabled ) {\n * \t\tinput = <Disabled>{ input }</Disabled>;\n * \t}\n *\n * \tconst toggleDisabled = () => {\n * \t\tsetIsDisabled( ( state ) => ! state );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ input }\n * \t\t\t<Button variant=\"primary\" onClick={ toggleDisabled }>\n * \t\t\t\tToggle Disabled\n * \t\t\t</Button>\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction Disabled({\n className,\n children,\n isDisabled = true,\n ...props\n}) {\n const cx = useCx();\n return /*#__PURE__*/_jsx(Provider, {\n value: isDisabled,\n children: /*#__PURE__*/_jsx(\"div\", {\n // @ts-ignore Reason: inert is a recent HTML attribute\n inert: isDisabled ? 'true' : undefined,\n className: isDisabled ? cx(disabledStyles, className, 'components-disabled') : undefined,\n ...props,\n children: children\n })\n });\n}\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\nexport default Disabled;"], "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAA+B;AAC/B,mBAAsB;AACtB,qBAAoB;AACpB,yBAA4B;AAC5B,IAAM;AAAA,EACJ;AAAA,EACA;AACF,IAAI,eAAAA;AA6CJ,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,GAAG;AACD,QAAM,SAAK,oBAAM;AACjB,SAAoB,uCAAAC,KAAK,UAAU;AAAA,IACjC,OAAO;AAAA,IACP,UAAuB,uCAAAA,KAAK,OAAO;AAAA;AAAA,MAEjC,OAAO,aAAa,SAAS;AAAA,MAC7B,WAAW,aAAa,GAAG,uCAAgB,WAAW,qBAAqB,IAAI;AAAA,MAC/E,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;AACA,SAAS,UAAU,eAAAD;AACnB,SAAS,WAAW;AACpB,IAAO,mBAAQ;", "names": ["Context", "_jsx"] }