@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 5.46 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": ";AAGA,OAAO,UAAU;AAKjB,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,YAAY,cAAc;AACnC,SAAS,WAAW,mBAAmB;AAMvC,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,OAAO,MAAM,QAAQ,aAAa;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,IAAI,mBAAmB,QAAQ;AAAA,IACzD,SAAS,gBAAgB,SAAY,OAAO;AAAA,IAC5C,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,UAAU,OAAO,IAAI;AAI3B,QAAM,iBAAiB,iBAAiB,IAAI,SAAS;AACrD,QAAM,iBAAiB,WAAS;AAC9B,UAAM,eAAe;AACrB,UAAM,OAAO,CAAC;AACd,gBAAY,IAAI;AAChB,aAAS,IAAI;AAAA,EACf;AAGA,QAAM,qBAAqB,OAAO,MAAS;AAC3C,qBAAmB,UAAU;AAE7B,kBAAgB,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,UAAU,KAAK,0BAA0B,WAAW;AAAA,IACxD,aAAa;AAAA,EACf,CAAC;AACD,SAAoB,sBAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,KAAK,aAAa,CAAC,SAAS,GAAG,CAAC;AAAA,IAChC,UAAU,CAAc,qBAAK,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,iBAAiB,WAAW,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,QAAQ;AACT,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AACA,SAAoB,qBAAK,MAAM;AAAA,IAC7B,WAAW;AAAA,IACX,UAAuB,sBAAM,QAAQ;AAAA,MACnC,uBAAuB;AAAA,MACvB,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB;AAAA,MACA,GAAG;AAAA,MACH,UAAU,CAAc,qBAAK,QAAQ;AAAA,QACnC,eAAe;AAAA,QACf,UAAuB,qBAAK,MAAM;AAAA,UAChC,WAAW;AAAA,UACX,MAAM,WAAW,YAAY;AAAA,QAC/B,CAAC;AAAA,MACH,CAAC,GAAG,OAAO,QAAqB,qBAAK,MAAM;AAAA,QACzC;AAAA,QACA,WAAW;AAAA,QACX,MAAM;AAAA,MACR,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH,CAAC;AACH,CAAC;AACM,IAAM,YAAY,WAAW,oBAAoB;AACxD,UAAU,cAAc;AACxB,IAAO,eAAQ;",
"names": []
}