@wordpress/components 39.0.0 → 40.0.0

package/build-module/box-control/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/box-control/index.tsx"],
-  "sourcesContent": ["import { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\nimport { BaseControl } from '../base-control';\nimport BoxInputControl from './box-input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport { InputWrapper, ResetButton, LinkedButtonWrapper } from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { DEFAULT_VALUES, isValueMixed, isValuesDefined, getAllowedSides } from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst defaultInputProps = {\n  min: 0\n};\nconst noop = () => {};\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(BoxControl, 'inspector-box-control');\n  return idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ values, setValues ] = useState( {\n *     top: '50px',\n *     left: '10%',\n *     right: '10%',\n *     bottom: '50px',\n *   } );\n *\n *   return (\n *     <BoxControl values={ values } onChange={ setValues } />\n *   );\n * };\n * ```\n */\nfunction BoxControl({\n  id: idProp,\n  inputProps = defaultInputProps,\n  onChange = noop,\n  label = __('Box Control'),\n  values: valuesProp,\n  units,\n  sides,\n  splitOnAxis = false,\n  allowReset = true,\n  resetValues = DEFAULT_VALUES,\n  presets,\n  presetKey,\n  onMouseOver,\n  onMouseOut\n}) {\n  const [values, setValues] = useControlledState(valuesProp, {\n    fallback: DEFAULT_VALUES\n  });\n  const inputValues = values || DEFAULT_VALUES;\n  const hasInitialValue = isValuesDefined(valuesProp);\n  const hasOneSide = sides?.length === 1;\n  const [isDirty, setIsDirty] = useState(hasInitialValue);\n  const [isLinked, setIsLinked] = useState(!hasInitialValue || !isValueMixed(inputValues) || hasOneSide);\n\n  // Tracking selected units via internal state allows filtering of CSS unit\n  // only values from being saved while maintaining preexisting unit selection\n  // behaviour. Filtering CSS only values prevents invalid style values.\n  const [selectedUnits, setSelectedUnits] = useState({\n    top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],\n    right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],\n    bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1],\n    left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1]\n  });\n  const id = useUniqueId(idProp);\n  const headingId = `${id}-heading`;\n  const toggleLinked = () => {\n    setIsLinked(!isLinked);\n  };\n  const handleOnChange = nextValues => {\n    onChange(nextValues);\n    setValues(nextValues);\n    setIsDirty(true);\n  };\n  const handleOnReset = () => {\n    onChange(resetValues);\n    setValues(resetValues);\n    setSelectedUnits(resetValues);\n    setIsDirty(false);\n  };\n  const inputControlProps = {\n    onMouseOver,\n    onMouseOut,\n    ...inputProps,\n    onChange: handleOnChange,\n    isLinked,\n    units,\n    selectedUnits,\n    setSelectedUnits,\n    sides,\n    values: inputValues,\n    presets,\n    presetKey\n  };\n  const sidesToRender = getAllowedSides(sides);\n  if (presets && !presetKey || !presets && presetKey) {\n    const definedProp = presets ? 'presets' : 'presetKey';\n    const missingProp = presets ? 'presetKey' : 'presets';\n    globalThis.SCRIPT_DEBUG === true ? warning(`wp.components.BoxControl: the '${missingProp}' prop is required when the '${definedProp}' prop is defined.`) : void 0;\n  }\n  return /*#__PURE__*/_jsxs(Grid, {\n    id: id,\n    columns: 3,\n    templateColumns: \"1fr min-content min-content\",\n    role: \"group\",\n    \"aria-labelledby\": headingId,\n    children: [/*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n      id: headingId,\n      children: label\n    }), isLinked && /*#__PURE__*/_jsx(InputWrapper, {\n      children: /*#__PURE__*/_jsx(BoxInputControl, {\n        side: \"all\",\n        ...inputControlProps\n      })\n    }), !hasOneSide && /*#__PURE__*/_jsx(LinkedButtonWrapper, {\n      children: /*#__PURE__*/_jsx(LinkedButton, {\n        onClick: toggleLinked,\n        isLinked: isLinked\n      })\n    }), !isLinked && splitOnAxis && ['vertical', 'horizontal'].map(axis => /*#__PURE__*/_jsx(BoxInputControl, {\n      side: axis,\n      ...inputControlProps\n    }, axis)), !isLinked && !splitOnAxis && Array.from(sidesToRender).map(axis => /*#__PURE__*/_jsx(BoxInputControl, {\n      side: axis,\n      ...inputControlProps\n    }, axis)), allowReset && /*#__PURE__*/_jsx(ResetButton, {\n      className: \"component-box-control__reset-button\",\n      variant: \"secondary\",\n      size: \"small\",\n      onClick: handleOnReset,\n      disabled: !isDirty,\n      children: __('Reset')\n    })]\n  });\n}\nexport default BoxControl;"],
-  "mappings": ";AAAA,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,UAAU;AACnB,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAC5B,OAAO,qBAAqB;AAC5B,OAAO,kBAAkB;AACzB,SAAS,YAAY;AACrB,SAAS,cAAc,aAAa,2BAA2B;AAC/D,SAAS,wCAAwC;AACjD,SAAS,gBAAgB,cAAc,iBAAiB,uBAAuB;AAC/E,SAAS,0BAA0B;AACnC,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,IAAM,oBAAoB;AAAA,EACxB,KAAK;AACP;AACA,IAAM,OAAO,MAAM;AAAC;AACpB,SAAS,YAAY,QAAQ;AAC3B,QAAM,aAAa,cAAc,YAAY,uBAAuB;AACpE,SAAO,UAAU;AACnB;AAwBA,SAAS,WAAW;AAAA,EAClB,IAAI;AAAA,EACJ,aAAa;AAAA,EACb,WAAW;AAAA,EACX,QAAQ,GAAG,aAAa;AAAA,EACxB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,CAAC,QAAQ,SAAS,IAAI,mBAAmB,YAAY;AAAA,IACzD,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,cAAc,UAAU;AAC9B,QAAM,kBAAkB,gBAAgB,UAAU;AAClD,QAAM,aAAa,OAAO,WAAW;AACrC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,eAAe;AACtD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC,mBAAmB,CAAC,aAAa,WAAW,KAAK,UAAU;AAKrG,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS;AAAA,IACjD,KAAK,iCAAiC,YAAY,GAAG,EAAE,CAAC;AAAA,IACxD,OAAO,iCAAiC,YAAY,KAAK,EAAE,CAAC;AAAA,IAC5D,QAAQ,iCAAiC,YAAY,MAAM,EAAE,CAAC;AAAA,IAC9D,MAAM,iCAAiC,YAAY,IAAI,EAAE,CAAC;AAAA,EAC5D,CAAC;AACD,QAAM,KAAK,YAAY,MAAM;AAC7B,QAAM,YAAY,GAAG,EAAE;AACvB,QAAM,eAAe,MAAM;AACzB,gBAAY,CAAC,QAAQ;AAAA,EACvB;AACA,QAAM,iBAAiB,gBAAc;AACnC,aAAS,UAAU;AACnB,cAAU,UAAU;AACpB,eAAW,IAAI;AAAA,EACjB;AACA,QAAM,gBAAgB,MAAM;AAC1B,aAAS,WAAW;AACpB,cAAU,WAAW;AACrB,qBAAiB,WAAW;AAC5B,eAAW,KAAK;AAAA,EAClB;AACA,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,IACH,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF;AACA,QAAM,gBAAgB,gBAAgB,KAAK;AAC3C,MAAI,WAAW,CAAC,aAAa,CAAC,WAAW,WAAW;AAClD,UAAM,cAAc,UAAU,YAAY;AAC1C,UAAM,cAAc,UAAU,cAAc;AAC5C,eAAW,iBAAiB,OAAO,QAAQ,kCAAkC,WAAW,gCAAgC,WAAW,oBAAoB,IAAI;AAAA,EAC7J;AACA,SAAoB,sBAAM,MAAM;AAAA,IAC9B;AAAA,IACA,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,MAAM;AAAA,IACN,mBAAmB;AAAA,IACnB,UAAU,CAAc,qBAAK,YAAY,aAAa;AAAA,MACpD,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,GAAG,YAAyB,qBAAK,cAAc;AAAA,MAC9C,UAAuB,qBAAK,iBAAiB;AAAA,QAC3C,MAAM;AAAA,QACN,GAAG;AAAA,MACL,CAAC;AAAA,IACH,CAAC,GAAG,CAAC,cAA2B,qBAAK,qBAAqB;AAAA,MACxD,UAAuB,qBAAK,cAAc;AAAA,QACxC,SAAS;AAAA,QACT;AAAA,MACF,CAAC;AAAA,IACH,CAAC,GAAG,CAAC,YAAY,eAAe,CAAC,YAAY,YAAY,EAAE,IAAI,UAAqB,qBAAK,iBAAiB;AAAA,MACxG,MAAM;AAAA,MACN,GAAG;AAAA,IACL,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,eAAe,MAAM,KAAK,aAAa,EAAE,IAAI,UAAqB,qBAAK,iBAAiB;AAAA,MAC/G,MAAM;AAAA,MACN,GAAG;AAAA,IACL,GAAG,IAAI,CAAC,GAAG,cAA2B,qBAAK,aAAa;AAAA,MACtD,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU,CAAC;AAAA,MACX,UAAU,GAAG,OAAO;AAAA,IACtB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,sBAAQ;",
+  "sources": ["../../src/box-control/index.tsx", "../../../style-runtime/src/index.ts", "../../src/box-control/style.module.scss"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\nimport { BaseControl } from '../base-control';\nimport BoxInputControl from './box-input-control';\nimport LinkedButton from './linked-button';\nimport Button from '../button';\nimport { Grid } from '../grid';\nimport { HStack } from '../h-stack';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { DEFAULT_VALUES, isValueMixed, isValuesDefined, getAllowedSides } from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst defaultInputProps = {\n  min: 0\n};\nconst noop = () => {};\nfunction useUniqueId(idProp) {\n  const instanceId = useInstanceId(BoxControl, 'inspector-box-control');\n  return idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ values, setValues ] = useState( {\n *     top: '50px',\n *     left: '10%',\n *     right: '10%',\n *     bottom: '50px',\n *   } );\n *\n *   return (\n *     <BoxControl values={ values } onChange={ setValues } />\n *   );\n * };\n * ```\n */\nfunction BoxControl({\n  id: idProp,\n  inputProps = defaultInputProps,\n  onChange = noop,\n  label = __('Box Control'),\n  values: valuesProp,\n  units,\n  sides,\n  splitOnAxis = false,\n  allowReset = true,\n  resetValues = DEFAULT_VALUES,\n  presets,\n  presetKey,\n  onMouseOver,\n  onMouseOut\n}) {\n  const [values, setValues] = useControlledState(valuesProp, {\n    fallback: DEFAULT_VALUES\n  });\n  const inputValues = values || DEFAULT_VALUES;\n  const hasInitialValue = isValuesDefined(valuesProp);\n  const hasOneSide = sides?.length === 1;\n  const [isDirty, setIsDirty] = useState(hasInitialValue);\n  const [isLinked, setIsLinked] = useState(!hasInitialValue || !isValueMixed(inputValues) || hasOneSide);\n\n  // Tracking selected units via internal state allows filtering of CSS unit\n  // only values from being saved while maintaining preexisting unit selection\n  // behaviour. Filtering CSS only values prevents invalid style values.\n  const [selectedUnits, setSelectedUnits] = useState({\n    top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],\n    right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],\n    bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1],\n    left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1]\n  });\n  const id = useUniqueId(idProp);\n  const headingId = `${id}-heading`;\n  const toggleLinked = () => {\n    setIsLinked(!isLinked);\n  };\n  const handleOnChange = nextValues => {\n    onChange(nextValues);\n    setValues(nextValues);\n    setIsDirty(true);\n  };\n  const handleOnReset = () => {\n    onChange(resetValues);\n    setValues(resetValues);\n    setSelectedUnits(resetValues);\n    setIsDirty(false);\n  };\n  const inputControlProps = {\n    onMouseOver,\n    onMouseOut,\n    ...inputProps,\n    onChange: handleOnChange,\n    isLinked,\n    units,\n    selectedUnits,\n    setSelectedUnits,\n    sides,\n    values: inputValues,\n    presets,\n    presetKey\n  };\n  const sidesToRender = getAllowedSides(sides);\n  if (presets && !presetKey || !presets && presetKey) {\n    const definedProp = presets ? 'presets' : 'presetKey';\n    const missingProp = presets ? 'presetKey' : 'presets';\n    globalThis.SCRIPT_DEBUG === true ? warning(`wp.components.BoxControl: the '${missingProp}' prop is required when the '${definedProp}' prop is defined.`) : void 0;\n  }\n  return /*#__PURE__*/_jsxs(Grid, {\n    id: id,\n    columns: 3,\n    templateColumns: \"1fr min-content min-content\",\n    role: \"group\",\n    \"aria-labelledby\": headingId,\n    children: [/*#__PURE__*/_jsx(BaseControl.VisualLabel, {\n      id: headingId,\n      children: label\n    }), isLinked && /*#__PURE__*/_jsx(HStack, {\n      className: styles['input-wrapper'],\n      children: /*#__PURE__*/_jsx(BoxInputControl, {\n        side: \"all\",\n        ...inputControlProps\n      })\n    }), !hasOneSide && /*#__PURE__*/_jsx(\"div\", {\n      className: styles['linked-button-wrapper'],\n      children: /*#__PURE__*/_jsx(LinkedButton, {\n        onClick: toggleLinked,\n        isLinked: isLinked\n      })\n    }), !isLinked && splitOnAxis && ['vertical', 'horizontal'].map(axis => /*#__PURE__*/_jsx(BoxInputControl, {\n      side: axis,\n      ...inputControlProps\n    }, axis)), !isLinked && !splitOnAxis && Array.from(sidesToRender).map(axis => /*#__PURE__*/_jsx(BoxInputControl, {\n      side: axis,\n      ...inputControlProps\n    }, axis)), allowReset && /*#__PURE__*/_jsx(Button, {\n      className: clsx(styles['reset-button'], 'component-box-control__reset-button'),\n      variant: \"secondary\",\n      size: \"small\",\n      onClick: handleOnReset,\n      disabled: !isDirty,\n      accessibleWhenDisabled: true,\n      children: __('Reset')\n    })]\n  });\n}\nexport default BoxControl;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"541c332c55\", \".d5a55650545c8e59__unit-control{max-width:90px}.ea5687e40d8b3401__input-wrapper{grid-column:1/span 3}._33fca83ebb9a56db__reset-button{grid-area:1/2;justify-self:end}._80f02f0884ee052b__linked-button-wrapper{grid-area:1/3;justify-self:end}._432c155702d177a9__icon{flex:0 0 auto}._4c5932d5023e1609__range-control{margin-inline-end:8px;width:100%}\");\n}\nexport default {\"unit-control\":\"d5a55650545c8e59__unit-control\",\"input-wrapper\":\"ea5687e40d8b3401__input-wrapper\",\"reset-button\":\"_33fca83ebb9a56db__reset-button\",\"linked-button-wrapper\":\"_80f02f0884ee052b__linked-button-wrapper\",\"icon\":\"_432c155702d177a9__icon\",\"range-control\":\"_4c5932d5023e1609__range-control\"};\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/button/index.mjs

@@ -1,7 +1,7 @@
 // packages/components/src/button/index.tsx
 import clsx from "clsx";
 import deprecated from "@wordpress/deprecated";
-import { forwardRef } from "@wordpress/element";
+import { Children, Fragment, forwardRef, isValidElement } from "@wordpress/element";
 import { useInstanceId } from "@wordpress/compose";
 import Tooltip from "../tooltip/index.mjs";
 import Icon from "../icon/index.mjs";
@@ -9,6 +9,15 @@ import { VisuallyHidden } from "../visually-hidden/index.mjs";
 import { positionToPlacement } from "../popover/utils.mjs";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var disabledEventsOnDisabledButton = ["onMouseDown", "onClick"];
+var hasRenderableChildren = (children) => Children.toArray(children).some((child) => {
+  if (!isValidElement(child)) {
+    return child !== "";
+  }
+  if (child.type === Fragment) {
+    return hasRenderableChildren(child.props.children);
+  }
+  return child.props.className !== "components-tooltip";
+});
 function useDeprecatedProps({
   __experimentalIsFocusable,
   isDefault,
@@ -95,8 +104,6 @@ var Button = forwardRef(function UnforwardedButton(props, ref) {
     ...buttonOrAnchorProps
   };
   const instanceId = useInstanceId(Button, "components-button__description");
-  const hasChildren = "string" === typeof children && !!children || Array.isArray(children) && children?.[0] && children[0] !== null && // Tooltip should not considered as a child
-  children?.[0]?.props?.className !== "components-tooltip";
   const truthyAriaPressedValues = [true, "true", "mixed"];
   const classes = clsx("components-button", className, {
     "is-next-40px-default-size": __next40pxDefaultSize,
@@ -110,7 +117,7 @@ var Button = forwardRef(function UnforwardedButton(props, ref) {
     "is-busy": isBusy,
     "is-link": variant === "link",
     "is-destructive": isDestructive,
-    "has-text": !!icon && (hasChildren || text),
+    "has-text": !!icon && (text || hasRenderableChildren(children)),
     "has-icon": !!icon,
     "has-icon-right": iconPosition === "right"
   });

package/build-module/button/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/button/index.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { positionToPlacement } from '../popover/utils';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst disabledEventsOnDisabledButton = ['onMouseDown', 'onClick'];\nfunction useDeprecatedProps({\n  __experimentalIsFocusable,\n  isDefault,\n  isPrimary,\n  isSecondary,\n  isTertiary,\n  isLink,\n  isPressed,\n  isSmall,\n  size,\n  variant,\n  describedBy,\n  ...otherProps\n}) {\n  let computedSize = size;\n  let computedVariant = variant;\n  const newProps = {\n    accessibleWhenDisabled: __experimentalIsFocusable,\n    // @todo Mark `isPressed` as deprecated\n    'aria-pressed': isPressed,\n    description: describedBy\n  };\n  if (isSmall) {\n    computedSize ??= 'small';\n  }\n  if (isPrimary) {\n    computedVariant ??= 'primary';\n  }\n  if (isTertiary) {\n    computedVariant ??= 'tertiary';\n  }\n  if (isSecondary) {\n    computedVariant ??= 'secondary';\n  }\n  if (isDefault) {\n    deprecated('wp.components.Button `isDefault` prop', {\n      since: '5.4',\n      alternative: 'variant=\"secondary\"'\n    });\n    computedVariant ??= 'secondary';\n  }\n  if (isLink) {\n    computedVariant ??= 'link';\n  }\n  return {\n    ...newProps,\n    ...otherProps,\n    size: computedSize,\n    variant: computedVariant\n  };\n}\n\n/**\n * Lets users take actions and make choices with a single click or tap.\n *\n * ```jsx\n * import { Button } from '@wordpress/components';\n * const Mybutton = () => (\n *   <Button\n *     variant=\"primary\"\n *     onClick={ handleClick }\n *   >\n *     Click here\n *   </Button>\n * );\n * ```\n */\nexport const Button = forwardRef(function UnforwardedButton(props, ref) {\n  const {\n    __next40pxDefaultSize,\n    accessibleWhenDisabled,\n    isBusy,\n    isDestructive,\n    className,\n    disabled,\n    icon,\n    iconPosition = 'left',\n    iconSize,\n    showTooltip,\n    tooltipPosition,\n    shortcut,\n    label,\n    children,\n    size = 'default',\n    text,\n    variant,\n    description,\n    ...buttonOrAnchorProps\n  } = useDeprecatedProps(props);\n  const {\n    href,\n    target,\n    'aria-checked': ariaChecked,\n    'aria-pressed': ariaPressed,\n    'aria-selected': ariaSelected,\n    ...additionalProps\n  } = 'href' in buttonOrAnchorProps ? buttonOrAnchorProps : {\n    href: undefined,\n    target: undefined,\n    ...buttonOrAnchorProps\n  };\n  const instanceId = useInstanceId(Button, 'components-button__description');\n  const hasChildren = 'string' === typeof children && !!children || Array.isArray(children) && children?.[0] && children[0] !== null &&\n  // Tooltip should not considered as a child\n  children?.[0]?.props?.className !== 'components-tooltip';\n  const truthyAriaPressedValues = [true, 'true', 'mixed'];\n  const classes = clsx('components-button', className, {\n    'is-next-40px-default-size': __next40pxDefaultSize,\n    'is-secondary': variant === 'secondary',\n    'is-primary': variant === 'primary',\n    'is-small': size === 'small',\n    'is-compact': size === 'compact',\n    'is-tertiary': variant === 'tertiary',\n    'is-pressed': truthyAriaPressedValues.includes(ariaPressed),\n    'is-pressed-mixed': ariaPressed === 'mixed',\n    'is-busy': isBusy,\n    'is-link': variant === 'link',\n    'is-destructive': isDestructive,\n    'has-text': !!icon && (hasChildren || text),\n    'has-icon': !!icon,\n    'has-icon-right': iconPosition === 'right'\n  });\n  const trulyDisabled = disabled && !accessibleWhenDisabled;\n  const Tag = href !== undefined && !disabled ? 'a' : 'button';\n  const buttonProps = Tag === 'button' ? {\n    type: 'button',\n    disabled: trulyDisabled,\n    'aria-checked': ariaChecked,\n    'aria-pressed': ariaPressed,\n    'aria-selected': ariaSelected\n  } : {};\n  const anchorProps = Tag === 'a' ? {\n    href,\n    target\n  } : {};\n  const disableEventProps = {};\n  if (disabled && accessibleWhenDisabled) {\n    // In this case, the button will be disabled, but still focusable and\n    // perceivable by screen reader users.\n    buttonProps['aria-disabled'] = true;\n    anchorProps['aria-disabled'] = true;\n    for (const disabledEvent of disabledEventsOnDisabledButton) {\n      disableEventProps[disabledEvent] = event => {\n        if (event) {\n          event.stopPropagation();\n          event.preventDefault();\n        }\n      };\n    }\n  }\n\n  // Should show the tooltip if...\n  const shouldShowTooltip = !trulyDisabled && (\n  // An explicit tooltip is passed or...\n  showTooltip && !!label ||\n  // There's a shortcut or...\n  !!shortcut ||\n  // There's a label and...\n  !!label &&\n  // The children are empty and...\n  !children?.length &&\n  // The tooltip is not explicitly disabled.\n  false !== showTooltip);\n  const descriptionId = description ? instanceId : undefined;\n  const describedById = additionalProps['aria-describedby'] || descriptionId;\n  const commonProps = {\n    className: classes,\n    'aria-label': additionalProps['aria-label'] || label,\n    'aria-describedby': describedById,\n    ref\n  };\n  const elementChildren = /*#__PURE__*/_jsxs(_Fragment, {\n    children: [icon && iconPosition === 'left' && /*#__PURE__*/_jsx(Icon, {\n      icon: icon,\n      size: iconSize\n    }), text && /*#__PURE__*/_jsx(_Fragment, {\n      children: text\n    }), children, icon && iconPosition === 'right' && /*#__PURE__*/_jsx(Icon, {\n      icon: icon,\n      size: iconSize\n    })]\n  });\n  const element = Tag === 'a' ? /*#__PURE__*/_jsx(\"a\", {\n    ...anchorProps,\n    ...additionalProps,\n    ...disableEventProps,\n    ...commonProps,\n    children: elementChildren\n  }) : /*#__PURE__*/_jsx(\"button\", {\n    ...buttonProps,\n    ...additionalProps,\n    ...disableEventProps,\n    ...commonProps,\n    children: elementChildren\n  });\n\n  // In order to avoid some React reconciliation issues, we are always rendering\n  // the `Tooltip` component even when `shouldShowTooltip` is `false`.\n  // In order to make sure that the tooltip doesn't show when it shouldn't,\n  // we don't pass the props to the `Tooltip` component.\n  const tooltipProps = shouldShowTooltip ? {\n    text: children?.length && description ? description : label,\n    shortcut,\n    placement: tooltipPosition &&\n    // Convert legacy `position` values to be used with the new `placement` prop\n    positionToPlacement(tooltipPosition)\n  } : {};\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(Tooltip, {\n      ...tooltipProps,\n      children: element\n    }), description && /*#__PURE__*/_jsx(VisuallyHidden, {\n      children: /*#__PURE__*/_jsx(\"span\", {\n        id: descriptionId,\n        children: description\n      })\n    })]\n  });\n});\nexport default Button;"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport deprecated from '@wordpress/deprecated';\nimport { Children, Fragment, forwardRef, isValidElement } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport Tooltip from '../tooltip';\nimport Icon from '../icon';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { positionToPlacement } from '../popover/utils';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst disabledEventsOnDisabledButton = ['onMouseDown', 'onClick'];\n\n/**\n * Whether `children` will render any content, to differentiate an icon-only\n * button or an icon-with-text button.\n *\n * `Children.toArray` discards the children that render nothing (`null`,\n * `undefined`, and booleans), which is what conditionally rendered content\n * evaluates to when its condition is unmet.\n *\n * @param children The children passed to the button.\n */\nconst hasRenderableChildren = children => Children.toArray(children).some(child => {\n  if (!isValidElement(child)) {\n    return child !== '';\n  }\n  if (child.type === Fragment) {\n    return hasRenderableChildren(child.props.children);\n  }\n\n  // A tooltip should not be considered as a child.\n  return child.props.className !== 'components-tooltip';\n});\nfunction useDeprecatedProps({\n  __experimentalIsFocusable,\n  isDefault,\n  isPrimary,\n  isSecondary,\n  isTertiary,\n  isLink,\n  isPressed,\n  isSmall,\n  size,\n  variant,\n  describedBy,\n  ...otherProps\n}) {\n  let computedSize = size;\n  let computedVariant = variant;\n  const newProps = {\n    accessibleWhenDisabled: __experimentalIsFocusable,\n    // @todo Mark `isPressed` as deprecated\n    'aria-pressed': isPressed,\n    description: describedBy\n  };\n  if (isSmall) {\n    computedSize ??= 'small';\n  }\n  if (isPrimary) {\n    computedVariant ??= 'primary';\n  }\n  if (isTertiary) {\n    computedVariant ??= 'tertiary';\n  }\n  if (isSecondary) {\n    computedVariant ??= 'secondary';\n  }\n  if (isDefault) {\n    deprecated('wp.components.Button `isDefault` prop', {\n      since: '5.4',\n      alternative: 'variant=\"secondary\"'\n    });\n    computedVariant ??= 'secondary';\n  }\n  if (isLink) {\n    computedVariant ??= 'link';\n  }\n  return {\n    ...newProps,\n    ...otherProps,\n    size: computedSize,\n    variant: computedVariant\n  };\n}\n\n/**\n * Lets users take actions and make choices with a single click or tap.\n *\n * ```jsx\n * import { Button } from '@wordpress/components';\n * const Mybutton = () => (\n *   <Button\n *     variant=\"primary\"\n *     onClick={ handleClick }\n *   >\n *     Click here\n *   </Button>\n * );\n * ```\n */\nexport const Button = forwardRef(function UnforwardedButton(props, ref) {\n  const {\n    __next40pxDefaultSize,\n    accessibleWhenDisabled,\n    isBusy,\n    isDestructive,\n    className,\n    disabled,\n    icon,\n    iconPosition = 'left',\n    iconSize,\n    showTooltip,\n    tooltipPosition,\n    shortcut,\n    label,\n    children,\n    size = 'default',\n    text,\n    variant,\n    description,\n    ...buttonOrAnchorProps\n  } = useDeprecatedProps(props);\n  const {\n    href,\n    target,\n    'aria-checked': ariaChecked,\n    'aria-pressed': ariaPressed,\n    'aria-selected': ariaSelected,\n    ...additionalProps\n  } = 'href' in buttonOrAnchorProps ? buttonOrAnchorProps : {\n    href: undefined,\n    target: undefined,\n    ...buttonOrAnchorProps\n  };\n  const instanceId = useInstanceId(Button, 'components-button__description');\n  const truthyAriaPressedValues = [true, 'true', 'mixed'];\n  const classes = clsx('components-button', className, {\n    'is-next-40px-default-size': __next40pxDefaultSize,\n    'is-secondary': variant === 'secondary',\n    'is-primary': variant === 'primary',\n    'is-small': size === 'small',\n    'is-compact': size === 'compact',\n    'is-tertiary': variant === 'tertiary',\n    'is-pressed': truthyAriaPressedValues.includes(ariaPressed),\n    'is-pressed-mixed': ariaPressed === 'mixed',\n    'is-busy': isBusy,\n    'is-link': variant === 'link',\n    'is-destructive': isDestructive,\n    'has-text': !!icon && (text || hasRenderableChildren(children)),\n    'has-icon': !!icon,\n    'has-icon-right': iconPosition === 'right'\n  });\n  const trulyDisabled = disabled && !accessibleWhenDisabled;\n  const Tag = href !== undefined && !disabled ? 'a' : 'button';\n  const buttonProps = Tag === 'button' ? {\n    type: 'button',\n    disabled: trulyDisabled,\n    'aria-checked': ariaChecked,\n    'aria-pressed': ariaPressed,\n    'aria-selected': ariaSelected\n  } : {};\n  const anchorProps = Tag === 'a' ? {\n    href,\n    target\n  } : {};\n  const disableEventProps = {};\n  if (disabled && accessibleWhenDisabled) {\n    // In this case, the button will be disabled, but still focusable and\n    // perceivable by screen reader users.\n    buttonProps['aria-disabled'] = true;\n    anchorProps['aria-disabled'] = true;\n    for (const disabledEvent of disabledEventsOnDisabledButton) {\n      disableEventProps[disabledEvent] = event => {\n        if (event) {\n          event.stopPropagation();\n          event.preventDefault();\n        }\n      };\n    }\n  }\n\n  // Should show the tooltip if...\n  const shouldShowTooltip = !trulyDisabled && (\n  // An explicit tooltip is passed or...\n  showTooltip && !!label ||\n  // There's a shortcut or...\n  !!shortcut ||\n  // There's a label and...\n  !!label &&\n  // The children are empty and...\n  !children?.length &&\n  // The tooltip is not explicitly disabled.\n  false !== showTooltip);\n  const descriptionId = description ? instanceId : undefined;\n  const describedById = additionalProps['aria-describedby'] || descriptionId;\n  const commonProps = {\n    className: classes,\n    'aria-label': additionalProps['aria-label'] || label,\n    'aria-describedby': describedById,\n    ref\n  };\n  const elementChildren = /*#__PURE__*/_jsxs(_Fragment, {\n    children: [icon && iconPosition === 'left' && /*#__PURE__*/_jsx(Icon, {\n      icon: icon,\n      size: iconSize\n    }), text && /*#__PURE__*/_jsx(_Fragment, {\n      children: text\n    }), children, icon && iconPosition === 'right' && /*#__PURE__*/_jsx(Icon, {\n      icon: icon,\n      size: iconSize\n    })]\n  });\n  const element = Tag === 'a' ? /*#__PURE__*/_jsx(\"a\", {\n    ...anchorProps,\n    ...additionalProps,\n    ...disableEventProps,\n    ...commonProps,\n    children: elementChildren\n  }) : /*#__PURE__*/_jsx(\"button\", {\n    ...buttonProps,\n    ...additionalProps,\n    ...disableEventProps,\n    ...commonProps,\n    children: elementChildren\n  });\n\n  // In order to avoid some React reconciliation issues, we are always rendering\n  // the `Tooltip` component even when `shouldShowTooltip` is `false`.\n  // In order to make sure that the tooltip doesn't show when it shouldn't,\n  // we don't pass the props to the `Tooltip` component.\n  const tooltipProps = shouldShowTooltip ? {\n    text: children?.length && description ? description : label,\n    shortcut,\n    placement: tooltipPosition &&\n    // Convert legacy `position` values to be used with the new `placement` prop\n    positionToPlacement(tooltipPosition)\n  } : {};\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(Tooltip, {\n      ...tooltipProps,\n      children: element\n    }), description && /*#__PURE__*/_jsx(VisuallyHidden, {\n      children: /*#__PURE__*/_jsx(\"span\", {\n        id: descriptionId,\n        children: description\n      })\n    })]\n  });\n});\nexport default Button;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/card/card-body/hook.mjs

@@ -14,14 +14,16 @@ function useCardBody(props) {
   } = useContextSystem(props, "CardBody");
   const cx = useCx();
   const classes = useMemo(() => cx(
-    styles.Body,
+    styles.getCardBodyStyles({
+      isScrollable
+    }),
     styles.borderRadius,
     getPaddingBySize(size),
     isShady && styles.shady,
     // This classname is added for legacy compatibility reasons.
     "components-card__body",
     className
-  ), [className, cx, isShady, size]);
+  ), [className, cx, isScrollable, isShady, size]);
   return {
     ...otherProps,
     className: classes,

package/build-module/card/card-body/hook.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/card/card-body/hook.ts"],
-  "sourcesContent": ["import { useMemo } from '@wordpress/element';\nimport { useContextSystem } from '../../context';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { getPaddingBySize } from '../get-padding-by-size';\nexport function useCardBody(props) {\n  const {\n    className,\n    isScrollable = false,\n    isShady = false,\n    size = 'medium',\n    ...otherProps\n  } = useContextSystem(props, 'CardBody');\n  const cx = useCx();\n  const classes = useMemo(() => cx(styles.Body, styles.borderRadius, getPaddingBySize(size), isShady && styles.shady,\n  // This classname is added for legacy compatibility reasons.\n  'components-card__body', className), [className, cx, isShady, size]);\n  return {\n    ...otherProps,\n    className: classes,\n    isScrollable\n  };\n}"],
-  "mappings": ";AAAA,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,YAAY,YAAY;AACxB,SAAS,aAAa;AACtB,SAAS,wBAAwB;AAC1B,SAAS,YAAY,OAAO;AACjC,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,UAAU;AACtC,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM;AAAA,IAAU;AAAA,IAAa;AAAA,IAAc,iBAAiB,IAAI;AAAA,IAAG,WAAkB;AAAA;AAAA,IAE7G;AAAA,IAAyB;AAAA,EAAS,GAAG,CAAC,WAAW,IAAI,SAAS,IAAI,CAAC;AACnE,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,IACX;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useMemo } from '@wordpress/element';\nimport { useContextSystem } from '../../context';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { getPaddingBySize } from '../get-padding-by-size';\nexport function useCardBody(props) {\n  const {\n    className,\n    isScrollable = false,\n    isShady = false,\n    size = 'medium',\n    ...otherProps\n  } = useContextSystem(props, 'CardBody');\n  const cx = useCx();\n  const classes = useMemo(() => cx(styles.getCardBodyStyles({\n    isScrollable\n  }), styles.borderRadius, getPaddingBySize(size), isShady && styles.shady,\n  // This classname is added for legacy compatibility reasons.\n  'components-card__body', className), [className, cx, isScrollable, isShady, size]);\n  return {\n    ...otherProps,\n    className: classes,\n    isScrollable\n  };\n}"],
+  "mappings": ";AAAA,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,YAAY,YAAY;AACxB,SAAS,aAAa;AACtB,SAAS,wBAAwB;AAC1B,SAAS,YAAY,OAAO;AACjC,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,UAAU;AACtC,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,QAAQ,MAAM;AAAA,IAAU,yBAAkB;AAAA,MACxD;AAAA,IACF,CAAC;AAAA,IAAU;AAAA,IAAc,iBAAiB,IAAI;AAAA,IAAG,WAAkB;AAAA;AAAA,IAEnE;AAAA,IAAyB;AAAA,EAAS,GAAG,CAAC,WAAW,IAAI,cAAc,SAAS,IAAI,CAAC;AACjF,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,IACX;AAAA,EACF;AACF;",
   "names": []
 }