{
  "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"]
}