@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 7.28 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/toggle-group-control/toggle-group-control-option-base/component.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\n\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useLayoutEffect, useMemo, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { contextConnect, useContextSystem } from '../../context';\nimport { useToggleGroupControlContext } from '../context';\nimport * as styles from './styles';\nimport { useCx } from '../../utils/hooks';\nimport Tooltip from '../../tooltip';\nimport { jsx as _jsx, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst {\n ButtonContentView,\n LabelView\n} = styles;\nconst WithToolTip = ({\n showTooltip,\n text,\n children\n}) => {\n if (showTooltip && text) {\n return /*#__PURE__*/_jsx(Tooltip, {\n text: text,\n placement: \"top\",\n children: children\n });\n }\n return /*#__PURE__*/_jsx(_Fragment, {\n children: children\n });\n};\nfunction ToggleGroupControlOptionBase(props, forwardedRef) {\n const toggleGroupControlContext = useToggleGroupControlContext();\n const id = useInstanceId(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base');\n const buttonProps = useContextSystem({\n ...props,\n id\n }, 'ToggleGroupControlOptionBase');\n const {\n isBlock = false,\n isDeselectable = false,\n size = 'default'\n } = toggleGroupControlContext;\n const {\n className,\n isIcon = false,\n value,\n children,\n showTooltip = false,\n disabled,\n ...otherButtonProps\n } = buttonProps;\n const isPressed = toggleGroupControlContext.value === value;\n const cx = useCx();\n const labelViewClasses = useMemo(() => cx(isBlock && styles.labelBlock), [cx, isBlock]);\n const itemClasses = useMemo(() => cx(styles.buttonView({\n isDeselectable,\n isIcon,\n isPressed,\n size\n }), className), [cx, isDeselectable, isIcon, isPressed, size, className]);\n const buttonOnClick = () => {\n if (isDeselectable && isPressed) {\n toggleGroupControlContext.setValue(undefined);\n } else {\n toggleGroupControlContext.setValue(value);\n }\n };\n const commonProps = {\n ...otherButtonProps,\n className: itemClasses,\n 'data-value': value,\n ref: forwardedRef\n };\n const labelRef = useRef(null);\n useLayoutEffect(() => {\n if (isPressed && labelRef.current) {\n toggleGroupControlContext.setSelectedElement(labelRef.current);\n }\n }, [isPressed, toggleGroupControlContext]);\n return /*#__PURE__*/_jsx(LabelView, {\n ref: labelRef,\n className: labelViewClasses,\n children: /*#__PURE__*/_jsx(WithToolTip, {\n showTooltip: showTooltip,\n text: otherButtonProps['aria-label'],\n children: isDeselectable ? /*#__PURE__*/_jsx(\"button\", {\n ...commonProps,\n disabled: disabled,\n \"aria-pressed\": isPressed,\n type: \"button\",\n onClick: buttonOnClick,\n children: /*#__PURE__*/_jsx(ButtonContentView, {\n children: children\n })\n }) : /*#__PURE__*/_jsx(Ariakit.Radio, {\n disabled: disabled,\n onFocusVisible: () => {\n const selectedValueIsEmpty = toggleGroupControlContext.value === null || toggleGroupControlContext.value === '';\n\n // Conditions ensure that the first visible focus to a radio group\n // without a selected option will not automatically select the option.\n if (!selectedValueIsEmpty || toggleGroupControlContext.activeItemIsNotFirstItem?.()) {\n toggleGroupControlContext.setValue(value);\n }\n },\n render: /*#__PURE__*/_jsx(\"button\", {\n type: \"button\",\n ...commonProps\n }),\n value: value,\n children: /*#__PURE__*/_jsx(ButtonContentView, {\n children: children\n })\n })\n })\n });\n}\n\n/**\n * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal,\n * generic component for any children of `ToggleGroupControl`.\n *\n * @example\n * ```jsx\n * import {\n * __experimentalToggleGroupControl as ToggleGroupControl,\n * __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase,\n * } from '@wordpress/components';\n *\n * function Example() {\n * return (\n * <ToggleGroupControl label=\"my label\" value=\"vertical\" isBlock>\n * <ToggleGroupControlOption value=\"horizontal\" label=\"Horizontal\" />\n * <ToggleGroupControlOption value=\"vertical\" label=\"Vertical\" />\n * </ToggleGroupControl>\n * );\n * }\n * ```\n */\nconst ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase');\nexport default ConnectedToggleGroupControlOptionBase;"],
"mappings": "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",
"names": ["import_context", "_jsx", "Tooltip", "_Fragment"]
}