@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 5.57 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/panel/body.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion, useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { chevronUp, chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\n\nimport Button from '../button';\nimport Icon from '../icon';\nimport { useControlledState, useUpdateEffect } from '../utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nexport function UnforwardedPanelBody(props, ref) {\n const {\n buttonProps = {},\n children,\n className,\n icon,\n initialOpen,\n onToggle = noop,\n opened,\n title,\n scrollAfterOpen = true\n } = props;\n const [isOpened, setIsOpened] = useControlledState(opened, {\n initial: initialOpen === undefined ? true : initialOpen,\n fallback: false\n });\n const nodeRef = useRef(null);\n\n // Defaults to 'smooth' scrolling\n // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView\n const scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';\n const handleOnToggle = event => {\n event.preventDefault();\n const next = !isOpened;\n setIsOpened(next);\n onToggle(next);\n };\n\n // Ref is used so that the effect does not re-run upon scrollAfterOpen changing value.\n const scrollAfterOpenRef = useRef(undefined);\n scrollAfterOpenRef.current = scrollAfterOpen;\n // Runs after initial render.\n useUpdateEffect(() => {\n if (isOpened && scrollAfterOpenRef.current && nodeRef.current?.scrollIntoView) {\n /*\n * Scrolls the content into view when visible.\n * This improves the UX when there are multiple stacking <PanelBody />\n * components in a scrollable container.\n */\n nodeRef.current.scrollIntoView({\n inline: 'nearest',\n block: 'nearest',\n behavior: scrollBehavior\n });\n }\n }, [isOpened, scrollBehavior]);\n const classes = clsx('components-panel__body', className, {\n 'is-opened': isOpened\n });\n return /*#__PURE__*/_jsxs(\"div\", {\n className: classes,\n ref: useMergeRefs([nodeRef, ref]),\n children: [/*#__PURE__*/_jsx(PanelBodyTitle, {\n icon: icon,\n isOpened: Boolean(isOpened),\n onClick: handleOnToggle,\n title: title,\n ...buttonProps\n }), typeof children === 'function' ? children({\n opened: Boolean(isOpened)\n }) : isOpened && children]\n });\n}\nconst PanelBodyTitle = forwardRef(({\n isOpened,\n icon,\n title,\n ...props\n}, ref) => {\n if (!title) {\n return null;\n }\n return /*#__PURE__*/_jsx(\"h2\", {\n className: \"components-panel__body-title\",\n children: /*#__PURE__*/_jsxs(Button, {\n __next40pxDefaultSize: true,\n className: \"components-panel__body-toggle\",\n \"aria-expanded\": isOpened,\n ref: ref,\n ...props,\n children: [/*#__PURE__*/_jsx(\"span\", {\n \"aria-hidden\": \"true\",\n children: /*#__PURE__*/_jsx(Icon, {\n className: \"components-panel__arrow\",\n icon: isOpened ? chevronUp : chevronDown\n })\n }), title, icon && /*#__PURE__*/_jsx(Icon, {\n icon: icon,\n className: \"components-panel__icon\",\n size: 20\n })]\n })\n });\n});\nexport const PanelBody = forwardRef(UnforwardedPanelBody);\nPanelBody.displayName = 'PanelBody';\nexport default PanelBody;"],
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAA+C;AAC/C,qBAAmC;AACnC,mBAAuC;AAMvC,oBAAmB;AACnB,kBAAiB;AACjB,mBAAoD;AACpD,yBAA2C;AAC3C,IAAM,OAAO,MAAM;AAAC;AACb,SAAS,qBAAqB,OAAO,KAAK;AAC/C,QAAM;AAAA,IACJ,cAAc,CAAC;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,EACpB,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,QAAI,iCAAmB,QAAQ;AAAA,IACzD,SAAS,gBAAgB,SAAY,OAAO;AAAA,IAC5C,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,cAAU,uBAAO,IAAI;AAI3B,QAAM,qBAAiB,iCAAiB,IAAI,SAAS;AACrD,QAAM,iBAAiB,WAAS;AAC9B,UAAM,eAAe;AACrB,UAAM,OAAO,CAAC;AACd,gBAAY,IAAI;AAChB,aAAS,IAAI;AAAA,EACf;AAGA,QAAM,yBAAqB,uBAAO,MAAS;AAC3C,qBAAmB,UAAU;AAE7B,oCAAgB,MAAM;AACpB,QAAI,YAAY,mBAAmB,WAAW,QAAQ,SAAS,gBAAgB;AAM7E,cAAQ,QAAQ,eAAe;AAAA,QAC7B,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,UAAU;AAAA,MACZ,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,UAAU,cAAc,CAAC;AAC7B,QAAM,cAAU,YAAAA,SAAK,0BAA0B,WAAW;AAAA,IACxD,aAAa;AAAA,EACf,CAAC;AACD,SAAoB,uCAAAC,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,SAAK,6BAAa,CAAC,SAAS,GAAG,CAAC;AAAA,IAChC,UAAU,CAAc,uCAAAC,KAAK,gBAAgB;AAAA,MAC3C;AAAA,MACA,UAAU,QAAQ,QAAQ;AAAA,MAC1B,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IACL,CAAC,GAAG,OAAO,aAAa,aAAa,SAAS;AAAA,MAC5C,QAAQ,QAAQ,QAAQ;AAAA,IAC1B,CAAC,IAAI,YAAY,QAAQ;AAAA,EAC3B,CAAC;AACH;AACA,IAAM,qBAAiB,2BAAW,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,QAAQ;AACT,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AACA,SAAoB,uCAAAA,KAAK,MAAM;AAAA,IAC7B,WAAW;AAAA,IACX,UAAuB,uCAAAD,MAAM,cAAAE,SAAQ;AAAA,MACnC,uBAAuB;AAAA,MACvB,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB;AAAA,MACA,GAAG;AAAA,MACH,UAAU,CAAc,uCAAAD,KAAK,QAAQ;AAAA,QACnC,eAAe;AAAA,QACf,UAAuB,uCAAAA,KAAK,YAAAE,SAAM;AAAA,UAChC,WAAW;AAAA,UACX,MAAM,WAAW,yBAAY;AAAA,QAC/B,CAAC;AAAA,MACH,CAAC,GAAG,OAAO,QAAqB,uCAAAF,KAAK,YAAAE,SAAM;AAAA,QACzC;AAAA,QACA,WAAW;AAAA,QACX,MAAM;AAAA,MACR,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH,CAAC;AACM,IAAM,gBAAY,2BAAW,oBAAoB;AACxD,UAAU,cAAc;AACxB,IAAO,eAAQ;",
"names": ["clsx", "_jsxs", "_jsx", "Button", "Icon"]
}