npm - @wordpress/components - Versions diffs - 32.0.2-next.v.0 → 32.1.0 - Mend

@wordpress/components 32.0.2-next.v.0 → 32.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (304) hide show

package/build/focal-point-picker/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/focal-point-picker/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging, useIsomorphicLayoutEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport { Container, MediaWrapper, MediaContainer } from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport { StyledLabel, StyledHelp } from '../base-control/styles/base-control-styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * This component addresses a specific problem: with large background images it is common to see undesirable crops,\n * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of\n * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.\n * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the\n * focal point is never cropped out, regardless of viewport.\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`\n * - Corresponding CSS: `background-position: 50% 10%;`\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.5,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\tbackgroundImage: `url(${ url })`,\n * \t\tbackgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<div style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker({\n  // Prevent passing to internal component.\n  __nextHasNoMarginBottom: _,\n  autoPlay = true,\n  className,\n  help,\n  hideLabelFromVision,\n  label,\n  onChange,\n  onDrag,\n  onDragEnd,\n  onDragStart,\n  resolvePoint,\n  url,\n  value: valueProp = {\n    x: 0.5,\n    y: 0.5\n  },\n  ...restProps\n}) {\n  const [point, setPoint] = useState(valueProp);\n  const [showGridOverlay, setShowGridOverlay] = useState(false);\n  const {\n    startDrag,\n    endDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      dragAreaRef.current?.focus();\n      const value = getValueWithinDragArea(event);\n\n      // `value` can technically be undefined if getValueWithinDragArea() is\n      // called before dragAreaRef is set, but this shouldn't happen in reality.\n      if (!value) {\n        return;\n      }\n      onDragStart?.(value, event);\n      setPoint(value);\n    },\n    onDragMove: event => {\n      // Prevents text-selection when dragging.\n      event.preventDefault();\n      const value = getValueWithinDragArea(event);\n      if (!value) {\n        return;\n      }\n      onDrag?.(value, event);\n      setPoint(value);\n    },\n    onDragEnd: () => {\n      onDragEnd?.();\n      onChange?.(point);\n    }\n  });\n\n  // Uses the internal point while dragging or else the value from props.\n  const {\n    x,\n    y\n  } = isDragging ? point : valueProp;\n  const dragAreaRef = useRef(null);\n  const [bounds, setBounds] = useState(INITIAL_BOUNDS);\n  const refUpdateBounds = useRef(() => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      clientWidth: width,\n      clientHeight: height\n    } = dragAreaRef.current;\n    // Falls back to initial bounds if the ref has no size. Since styles\n    // give the drag area dimensions even when the media has not loaded\n    // this should only happen in unit tests (jsdom).\n    setBounds(width > 0 && height > 0 ? {\n      width,\n      height\n    } : {\n      ...INITIAL_BOUNDS\n    });\n  });\n  useEffect(() => {\n    const updateBounds = refUpdateBounds.current;\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      defaultView\n    } = dragAreaRef.current.ownerDocument;\n    defaultView?.addEventListener('resize', updateBounds);\n    return () => defaultView?.removeEventListener('resize', updateBounds);\n  }, []);\n\n  // Updates the bounds to cover cases of unspecified media or load failures.\n  useIsomorphicLayoutEffect(() => void refUpdateBounds.current(), []);\n\n  // TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n  const getValueWithinDragArea = ({\n    clientX,\n    clientY,\n    shiftKey\n  }) => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      top,\n      left\n    } = dragAreaRef.current.getBoundingClientRect();\n    let nextX = (clientX - left) / bounds.width;\n    let nextY = (clientY - top) / bounds.height;\n    // Enables holding shift to jump values by 10%.\n    if (shiftKey) {\n      nextX = Math.round(nextX / 0.1) * 0.1;\n      nextY = Math.round(nextY / 0.1) * 0.1;\n    }\n    return getFinalValue({\n      x: nextX,\n      y: nextY\n    });\n  };\n  const getFinalValue = value => {\n    var _resolvePoint;\n    const resolvedValue = (_resolvePoint = resolvePoint?.(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;\n    resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));\n    resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));\n    const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2;\n    return {\n      x: roundToTwoDecimalPlaces(resolvedValue.x),\n      y: roundToTwoDecimalPlaces(resolvedValue.y)\n    };\n  };\n  const arrowKeyStep = event => {\n    const {\n      code,\n      shiftKey\n    } = event;\n    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) {\n      return;\n    }\n    event.preventDefault();\n    const value = {\n      x,\n      y\n    };\n    const step = shiftKey ? 0.1 : 0.01;\n    const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n    const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n    value[axis] = value[axis] + delta;\n    onChange?.(getFinalValue(value));\n  };\n  const focalPointPosition = {\n    left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,\n    top: y !== undefined ? y * bounds.height : 0.5 * bounds.height\n  };\n  const classes = clsx('components-focal-point-picker-control', className);\n  const Label = hideLabelFromVision ? VisuallyHidden : StyledLabel;\n  useUpdateEffect(() => {\n    setShowGridOverlay(true);\n    const timeout = window.setTimeout(() => {\n      setShowGridOverlay(false);\n    }, GRID_OVERLAY_TIMEOUT);\n    return () => window.clearTimeout(timeout);\n  }, [x, y]);\n  return /*#__PURE__*/_jsxs(Container, {\n    ...restProps,\n    as: \"fieldset\",\n    className: classes,\n    children: [!!label && /*#__PURE__*/_jsx(Label, {\n      as: \"legend\",\n      children: label\n    }), /*#__PURE__*/_jsx(MediaWrapper, {\n      className: \"components-focal-point-picker-wrapper\",\n      children: /*#__PURE__*/_jsxs(MediaContainer, {\n        className: \"components-focal-point-picker\",\n        onKeyDown: arrowKeyStep,\n        onMouseDown: startDrag,\n        onBlur: () => {\n          if (isDragging) {\n            endDrag();\n          }\n        },\n        ref: dragAreaRef,\n        role: \"button\",\n        tabIndex: -1,\n        children: [/*#__PURE__*/_jsx(Grid, {\n          bounds: bounds,\n          showOverlay: showGridOverlay\n        }), /*#__PURE__*/_jsx(Media, {\n          alt: __('Media preview'),\n          autoPlay: autoPlay,\n          onLoad: refUpdateBounds.current,\n          src: url\n        }), /*#__PURE__*/_jsx(FocalPoint, {\n          ...focalPointPosition,\n          isDragging: isDragging\n        })]\n      })\n    }), /*#__PURE__*/_jsx(Controls, {\n      hasHelpText: !!help,\n      point: {\n        x,\n        y\n      },\n      onChange: value => {\n        onChange?.(getFinalValue(value));\n      }\n    }), !!help && /*#__PURE__*/_jsx(StyledHelp, {\n      children: help\n    })]\n  });\n}\nexport default FocalPointPicker;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging, useIsomorphicLayoutEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\nimport FocalPoint from './focal-point';\nimport Grid from './grid';\nimport Media from './media';\nimport { Container, MediaWrapper, MediaContainer } from './styles/focal-point-picker-style';\nimport { INITIAL_BOUNDS } from './utils';\nimport { useUpdateEffect } from '../utils/hooks';\nimport { StyledLabel, StyledHelp } from '../base-control/styles/base-control-styles';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst GRID_OVERLAY_TIMEOUT = 600;\n\n/**\n * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.\n *\n * This component addresses a specific problem: with large background images it is common to see undesirable crops,\n * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of\n * the point with the most important visual information and returns it as a pair of numbers between 0 and 1.\n * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the\n * focal point is never cropped out, regardless of viewport.\n *\n * - Example focal point picker value: `{ x: 0.5, y: 0.1 }`\n * - Corresponding CSS: `background-position: 50% 10%;`\n *\n * ```jsx\n * import { FocalPointPicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ focalPoint, setFocalPoint ] = useState( {\n * \t\tx: 0.5,\n * \t\ty: 0.5,\n * \t} );\n *\n * \tconst url = '/path/to/image';\n *\n * \t// Example function to render the CSS styles based on Focal Point Picker value\n * \tconst style = {\n * \t\tbackgroundImage: `url(${ url })`,\n * \t\tbackgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,\n * \t};\n *\n * \treturn (\n * \t\t<>\n * \t\t\t<FocalPointPicker\n * \t\t\t\turl={ url }\n * \t\t\t\tvalue={ focalPoint }\n * \t\t\t\tonDragStart={ setFocalPoint }\n * \t\t\t\tonDrag={ setFocalPoint }\n * \t\t\t\tonChange={ setFocalPoint }\n * \t\t\t/>\n * \t\t\t<div style={ style } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nexport function FocalPointPicker({\n  // Prevent passing to internal component.\n  __nextHasNoMarginBottom: _,\n  autoPlay = true,\n  className,\n  help,\n  hideLabelFromVision,\n  label,\n  onChange,\n  onDrag,\n  onDragEnd,\n  onDragStart,\n  resolvePoint,\n  url,\n  value: valueProp = {\n    x: 0.5,\n    y: 0.5\n  },\n  ...restProps\n}) {\n  const [point, setPoint] = useState(valueProp);\n  const [showGridOverlay, setShowGridOverlay] = useState(false);\n  const {\n    startDrag,\n    endDrag,\n    isDragging\n  } = useDragging({\n    onDragStart: event => {\n      dragAreaRef.current?.focus();\n      const value = getValueWithinDragArea(event);\n\n      // `value` can technically be undefined if getValueWithinDragArea() is\n      // called before dragAreaRef is set, but this shouldn't happen in reality.\n      if (!value) {\n        return;\n      }\n      onDragStart?.(value, event);\n      setPoint(value);\n    },\n    onDragMove: event => {\n      // Prevents text-selection when dragging.\n      event.preventDefault();\n      const value = getValueWithinDragArea(event);\n      if (!value) {\n        return;\n      }\n      onDrag?.(value, event);\n      setPoint(value);\n    },\n    onDragEnd: () => {\n      onDragEnd?.();\n      onChange?.(point);\n    }\n  });\n\n  // Uses the internal point while dragging or else the value from props.\n  const {\n    x,\n    y\n  } = isDragging ? point : valueProp;\n  const dragAreaRef = useRef(null);\n  const [bounds, setBounds] = useState(INITIAL_BOUNDS);\n  const refUpdateBounds = useRef(() => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      clientWidth: width,\n      clientHeight: height\n    } = dragAreaRef.current;\n    // Falls back to initial bounds if the ref has no size. Since styles\n    // give the drag area dimensions even when the media has not loaded\n    // this should only happen in unit tests (jsdom).\n    setBounds(width > 0 && height > 0 ? {\n      width,\n      height\n    } : {\n      ...INITIAL_BOUNDS\n    });\n  });\n  useEffect(() => {\n    const updateBounds = refUpdateBounds.current;\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      defaultView\n    } = dragAreaRef.current.ownerDocument;\n    defaultView?.addEventListener('resize', updateBounds);\n    return () => defaultView?.removeEventListener('resize', updateBounds);\n  }, []);\n\n  // Updates the bounds to cover cases of unspecified media or load failures.\n  useIsomorphicLayoutEffect(() => void refUpdateBounds.current(), []);\n\n  // TODO: Consider refactoring getValueWithinDragArea() into a pure function.\n  // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173\n  const getValueWithinDragArea = ({\n    clientX,\n    clientY,\n    shiftKey\n  }) => {\n    if (!dragAreaRef.current) {\n      return;\n    }\n    const {\n      top,\n      left\n    } = dragAreaRef.current.getBoundingClientRect();\n    let nextX = (clientX - left) / bounds.width;\n    let nextY = (clientY - top) / bounds.height;\n    // Enables holding shift to jump values by 10%.\n    if (shiftKey) {\n      nextX = Math.round(nextX / 0.1) * 0.1;\n      nextY = Math.round(nextY / 0.1) * 0.1;\n    }\n    return getFinalValue({\n      x: nextX,\n      y: nextY\n    });\n  };\n  const getFinalValue = value => {\n    const resolvedValue = resolvePoint?.(value) ?? value;\n    resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));\n    resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));\n    const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2;\n    return {\n      x: roundToTwoDecimalPlaces(resolvedValue.x),\n      y: roundToTwoDecimalPlaces(resolvedValue.y)\n    };\n  };\n  const arrowKeyStep = event => {\n    const {\n      code,\n      shiftKey\n    } = event;\n    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) {\n      return;\n    }\n    event.preventDefault();\n    const value = {\n      x,\n      y\n    };\n    const step = shiftKey ? 0.1 : 0.01;\n    const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;\n    const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';\n    value[axis] = value[axis] + delta;\n    onChange?.(getFinalValue(value));\n  };\n  const focalPointPosition = {\n    left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,\n    top: y !== undefined ? y * bounds.height : 0.5 * bounds.height\n  };\n  const classes = clsx('components-focal-point-picker-control', className);\n  const Label = hideLabelFromVision ? VisuallyHidden : StyledLabel;\n  useUpdateEffect(() => {\n    setShowGridOverlay(true);\n    const timeout = window.setTimeout(() => {\n      setShowGridOverlay(false);\n    }, GRID_OVERLAY_TIMEOUT);\n    return () => window.clearTimeout(timeout);\n  }, [x, y]);\n  return /*#__PURE__*/_jsxs(Container, {\n    ...restProps,\n    as: \"fieldset\",\n    className: classes,\n    children: [!!label && /*#__PURE__*/_jsx(Label, {\n      as: \"legend\",\n      children: label\n    }), /*#__PURE__*/_jsx(MediaWrapper, {\n      className: \"components-focal-point-picker-wrapper\",\n      children: /*#__PURE__*/_jsxs(MediaContainer, {\n        className: \"components-focal-point-picker\",\n        onKeyDown: arrowKeyStep,\n        onMouseDown: startDrag,\n        onBlur: () => {\n          if (isDragging) {\n            endDrag();\n          }\n        },\n        ref: dragAreaRef,\n        role: \"button\",\n        tabIndex: -1,\n        children: [/*#__PURE__*/_jsx(Grid, {\n          bounds: bounds,\n          showOverlay: showGridOverlay\n        }), /*#__PURE__*/_jsx(Media, {\n          alt: __('Media preview'),\n          autoPlay: autoPlay,\n          onLoad: refUpdateBounds.current,\n          src: url\n        }), /*#__PURE__*/_jsx(FocalPoint, {\n          ...focalPointPosition,\n          isDragging: isDragging\n        })]\n      })\n    }), /*#__PURE__*/_jsx(Controls, {\n      hasHelpText: !!help,\n      point: {\n        x,\n        y\n      },\n      onChange: value => {\n        onChange?.(getFinalValue(value));\n      }\n    }), !!help && /*#__PURE__*/_jsx(StyledHelp, {\n      children: help\n    })]\n  });\n}\nexport default FocalPointPicker;"],
+  "mappings": "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",
   "names": ["useDragging", "clsx", "_jsxs", "_jsx", "Grid", "Media", "FocalPoint", "Controls"]
 }

package/build/font-size-picker/font-size-picker-select.cjs CHANGED Viewed

@@ -52,7 +52,6 @@ var FontSizePickerSelect = (props) => {
     };
   })];
   const selectedOption = (0, import_element.useMemo)(() => {
-    var _options$find;
     if (value === void 0) {
       return DEFAULT_OPTION;
     }
@@ -62,7 +61,7 @@ var FontSizePickerSelect = (props) => {
         return optionBySlug;
       }
     }
-    return (_options$find = options.find((option) => option.value === value)) !== null && _options$find !== void 0 ? _options$find : DEFAULT_OPTION;
+    return options.find((option) => option.value === value) ?? DEFAULT_OPTION;
   }, [value, valueMode, options]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCustomSelectControl, {
     __next40pxDefaultSize,

package/build/font-size-picker/font-size-picker-select.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/font-size-picker/font-size-picker-select.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { generateFontSizeHint } from './utils';\nimport { StyledCustomSelectControl } from './styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_OPTION = {\n  key: 'default',\n  name: __('Default'),\n  value: undefined\n};\nconst FontSizePickerSelect = props => {\n  const {\n    __next40pxDefaultSize,\n    fontSizes,\n    value,\n    size,\n    valueMode = 'literal',\n    onChange\n  } = props;\n  const options = [DEFAULT_OPTION, ...fontSizes.map(fontSize => {\n    const hint = generateFontSizeHint(fontSize);\n    return {\n      key: fontSize.slug,\n      name: fontSize.name || fontSize.slug,\n      value: fontSize.size,\n      hint\n    };\n  })];\n  const selectedOption = useMemo(() => {\n    var _options$find;\n    if (value === undefined) {\n      return DEFAULT_OPTION;\n    }\n\n    // If valueMode is 'slug', find by slug\n    if (valueMode === 'slug') {\n      const optionBySlug = options.find(option => option.key === value);\n      if (optionBySlug) {\n        return optionBySlug;\n      }\n    }\n\n    // If valueMode is 'literal', find by value (size)\n    return (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : DEFAULT_OPTION;\n  }, [value, valueMode, options]);\n  return /*#__PURE__*/_jsx(StyledCustomSelectControl, {\n    __next40pxDefaultSize: __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize: true,\n    className: \"components-font-size-picker__select\",\n    label: __('Font size'),\n    hideLabelFromVision: true,\n    describedBy: sprintf(\n    // translators: %s: Currently selected font size.\n    __('Currently selected font size: %s'), selectedOption.name),\n    options: options,\n    value: selectedOption,\n    showSelectedHint: true,\n    onChange: ({\n      selectedItem\n    }) => {\n      // Find the corresponding FontSize object\n      const matchingFontSize = selectedItem.key === 'default' ? undefined : fontSizes.find(fontSize => fontSize.slug === selectedItem.key);\n      onChange(selectedItem.value, matchingFontSize);\n    },\n    size: size\n  });\n};\nexport default FontSizePickerSelect;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA4B;AAC5B,qBAAwB;AAMxB,mBAAqC;AACrC,oBAA0C;AAC1C,yBAA4B;AAC5B,IAAM,iBAAiB;AAAA,EACrB,KAAK;AAAA,EACL,UAAM,gBAAG,SAAS;AAAA,EAClB,OAAO;AACT;AACA,IAAM,uBAAuB,WAAS;AACpC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,EACF,IAAI;AACJ,QAAM,UAAU,CAAC,gBAAgB,GAAG,UAAU,IAAI,cAAY;AAC5D,UAAM,WAAO,mCAAqB,QAAQ;AAC1C,WAAO;AAAA,MACL,KAAK,SAAS;AAAA,MACd,MAAM,SAAS,QAAQ,SAAS;AAAA,MAChC,OAAO,SAAS;AAAA,MAChB;AAAA,IACF;AAAA,EACF,CAAC,CAAC;AACF,QAAM,qBAAiB,wBAAQ,MAAM;AACnC,QAAI;AACJ,QAAI,UAAU,QAAW;AACvB,aAAO;AAAA,IACT;AAGA,QAAI,cAAc,QAAQ;AACxB,YAAM,eAAe,QAAQ,KAAK,YAAU,OAAO,QAAQ,KAAK;AAChE,UAAI,cAAc;AAChB,eAAO;AAAA,MACT;AAAA,IACF;AAGA,YAAQ,gBAAgB,QAAQ,KAAK,YAAU,OAAO,UAAU,KAAK,OAAO,QAAQ,kBAAkB,SAAS,gBAAgB;AAAA,EACjI,GAAG,CAAC,OAAO,WAAW,OAAO,CAAC;AAC9B,SAAoB,uCAAAA,KAAK,yCAA2B;AAAA,IAClD;AAAA,IACA,mCAAmC;AAAA,IACnC,WAAW;AAAA,IACX,WAAO,gBAAG,WAAW;AAAA,IACrB,qBAAqB;AAAA,IACrB,iBAAa;AAAA;AAAA,UAEb,gBAAG,kCAAkC;AAAA,MAAG,eAAe;AAAA,IAAI;AAAA,IAC3D;AAAA,IACA,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,UAAU,CAAC;AAAA,MACT;AAAA,IACF,MAAM;AAEJ,YAAM,mBAAmB,aAAa,QAAQ,YAAY,SAAY,UAAU,KAAK,cAAY,SAAS,SAAS,aAAa,GAAG;AACnI,eAAS,aAAa,OAAO,gBAAgB;AAAA,IAC/C;AAAA,IACA;AAAA,EACF,CAAC;AACH;AACA,IAAO,kCAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { generateFontSizeHint } from './utils';\nimport { StyledCustomSelectControl } from './styles';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DEFAULT_OPTION = {\n  key: 'default',\n  name: __('Default'),\n  value: undefined\n};\nconst FontSizePickerSelect = props => {\n  const {\n    __next40pxDefaultSize,\n    fontSizes,\n    value,\n    size,\n    valueMode = 'literal',\n    onChange\n  } = props;\n  const options = [DEFAULT_OPTION, ...fontSizes.map(fontSize => {\n    const hint = generateFontSizeHint(fontSize);\n    return {\n      key: fontSize.slug,\n      name: fontSize.name || fontSize.slug,\n      value: fontSize.size,\n      hint\n    };\n  })];\n  const selectedOption = useMemo(() => {\n    if (value === undefined) {\n      return DEFAULT_OPTION;\n    }\n\n    // If valueMode is 'slug', find by slug\n    if (valueMode === 'slug') {\n      const optionBySlug = options.find(option => option.key === value);\n      if (optionBySlug) {\n        return optionBySlug;\n      }\n    }\n\n    // If valueMode is 'literal', find by value (size)\n    return options.find(option => option.value === value) ?? DEFAULT_OPTION;\n  }, [value, valueMode, options]);\n  return /*#__PURE__*/_jsx(StyledCustomSelectControl, {\n    __next40pxDefaultSize: __next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize: true,\n    className: \"components-font-size-picker__select\",\n    label: __('Font size'),\n    hideLabelFromVision: true,\n    describedBy: sprintf(\n    // translators: %s: Currently selected font size.\n    __('Currently selected font size: %s'), selectedOption.name),\n    options: options,\n    value: selectedOption,\n    showSelectedHint: true,\n    onChange: ({\n      selectedItem\n    }) => {\n      // Find the corresponding FontSize object\n      const matchingFontSize = selectedItem.key === 'default' ? undefined : fontSizes.find(fontSize => fontSize.slug === selectedItem.key);\n      onChange(selectedItem.value, matchingFontSize);\n    },\n    size: size\n  });\n};\nexport default FontSizePickerSelect;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAA4B;AAC5B,qBAAwB;AAMxB,mBAAqC;AACrC,oBAA0C;AAC1C,yBAA4B;AAC5B,IAAM,iBAAiB;AAAA,EACrB,KAAK;AAAA,EACL,UAAM,gBAAG,SAAS;AAAA,EAClB,OAAO;AACT;AACA,IAAM,uBAAuB,WAAS;AACpC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,EACF,IAAI;AACJ,QAAM,UAAU,CAAC,gBAAgB,GAAG,UAAU,IAAI,cAAY;AAC5D,UAAM,WAAO,mCAAqB,QAAQ;AAC1C,WAAO;AAAA,MACL,KAAK,SAAS;AAAA,MACd,MAAM,SAAS,QAAQ,SAAS;AAAA,MAChC,OAAO,SAAS;AAAA,MAChB;AAAA,IACF;AAAA,EACF,CAAC,CAAC;AACF,QAAM,qBAAiB,wBAAQ,MAAM;AACnC,QAAI,UAAU,QAAW;AACvB,aAAO;AAAA,IACT;AAGA,QAAI,cAAc,QAAQ;AACxB,YAAM,eAAe,QAAQ,KAAK,YAAU,OAAO,QAAQ,KAAK;AAChE,UAAI,cAAc;AAChB,eAAO;AAAA,MACT;AAAA,IACF;AAGA,WAAO,QAAQ,KAAK,YAAU,OAAO,UAAU,KAAK,KAAK;AAAA,EAC3D,GAAG,CAAC,OAAO,WAAW,OAAO,CAAC;AAC9B,SAAoB,uCAAAA,KAAK,yCAA2B;AAAA,IAClD;AAAA,IACA,mCAAmC;AAAA,IACnC,WAAW;AAAA,IACX,WAAO,gBAAG,WAAW;AAAA,IACrB,qBAAqB;AAAA,IACrB,iBAAa;AAAA;AAAA,UAEb,gBAAG,kCAAkC;AAAA,MAAG,eAAe;AAAA,IAAI;AAAA,IAC3D;AAAA,IACA,OAAO;AAAA,IACP,kBAAkB;AAAA,IAClB,UAAU,CAAC;AAAA,MACT;AAAA,IACF,MAAM;AAEJ,YAAM,mBAAmB,aAAa,QAAQ,YAAY,SAAY,UAAU,KAAK,cAAY,SAAS,SAAS,aAAa,GAAG;AACnI,eAAS,aAAa,OAAO,gBAAgB;AAAA,IAC/C;AAAA,IACA;AAAA,EACF,CAAC;AACH;AACA,IAAO,kCAAQ;",
   "names": ["_jsx"]
 }

package/build/font-size-picker/index.cjs CHANGED Viewed

@@ -155,7 +155,7 @@ var UnforwardedFontSizePicker = (props, ref) => {
             label: (0, import_i18n.__)("Font size"),
             labelPosition: "top",
             hideLabelFromVision: true,
-            value: hasUnits ? `${valueQuantity !== null && valueQuantity !== void 0 ? valueQuantity : ""}${valueUnit !== null && valueUnit !== void 0 ? valueUnit : ""}` : resolvedValueForControls,
+            value: hasUnits ? `${valueQuantity ?? ""}${valueUnit ?? ""}` : resolvedValueForControls,
             onChange: (newValue) => {
               setUserRequestedCustom(true);
               if (newValue === void 0 || newValue === "") {
@@ -187,7 +187,7 @@ var UnforwardedFontSizePicker = (props, ref) => {
                 if (newValue === void 0) {
                   onChange?.(void 0);
                 } else if (hasUnits) {
-                  onChange?.(newValue + (valueUnit !== null && valueUnit !== void 0 ? valueUnit : "px"));
+                  onChange?.(newValue + (valueUnit ?? "px"));
                 } else {
                   onChange?.(newValue);
                 }

package/build/font-size-picker/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/font-size-picker/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport { default as UnitControl, parseQuantityAndUnitFromRawValue, useCustomUnits } from '../unit-control';\nimport { Container, Header, HeaderLabel, HeaderToggle } from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst DEFAULT_UNITS = ['px', 'em', 'rem', 'vw', 'vh'];\nconst MAX_TOGGLE_GROUP_SIZES = 5;\nconst UnforwardedFontSizePicker = (props, ref) => {\n  const {\n    __next40pxDefaultSize = false,\n    fallbackFontSize,\n    fontSizes = [],\n    disableCustomFontSizes = false,\n    onChange,\n    size = 'default',\n    units: unitsProp = DEFAULT_UNITS,\n    value,\n    valueMode = 'literal',\n    withSlider = false,\n    withReset = true\n  } = props;\n  const labelId = useInstanceId(UnforwardedFontSizePicker, 'font-size-picker-label');\n  const units = useCustomUnits({\n    availableUnits: unitsProp\n  });\n  const selectedFontSize = (() => {\n    if (!value) {\n      return undefined;\n    }\n\n    // If valueMode is 'slug', find by slug\n    if (valueMode === 'slug') {\n      return fontSizes.find(fontSize => fontSize.slug === value);\n    }\n\n    // If valueMode is 'literal', find by size value\n    return fontSizes.find(fontSize => fontSize.size === value);\n  })();\n  const isCustomValue = !!value && !selectedFontSize;\n\n  // Initially request a custom picker if the value is not from the predef list.\n  const [userRequestedCustom, setUserRequestedCustom] = useState(isCustomValue);\n\n  // Resolve the literal value to use in custom controls when operating in slug mode.\n  // When `valueMode` is 'slug', the `value` prop contains the slug of the\n  // selected preset. In that case, the custom input should reflect the preset's\n  // actual size value so it pre-populates correctly after clicking \"Set custom size\".\n  const resolvedValueForControls = valueMode === 'slug' ? selectedFontSize?.size : value;\n  let currentPickerType;\n  if (!disableCustomFontSizes && userRequestedCustom) {\n    // While showing the custom value picker, switch back to predef only if\n    // `disableCustomFontSizes` is set to `true`.\n    currentPickerType = 'custom';\n  } else {\n    currentPickerType = fontSizes.length > MAX_TOGGLE_GROUP_SIZES ? 'select' : 'togglegroup';\n  }\n  if (fontSizes.length === 0 && disableCustomFontSizes) {\n    return null;\n  }\n\n  // If neither the value or first font size is a string, then FontSizePicker\n  // operates in a legacy \"unitless\" mode where UnitControl can only be used\n  // to select px values and onChange() is always called with number values.\n  const hasUnits = typeof resolvedValueForControls === 'string' || typeof fontSizes[0]?.size === 'string';\n  const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(resolvedValueForControls, units);\n  const isValueUnitRelative = !!valueUnit && ['em', 'rem', 'vw', 'vh'].includes(valueUnit);\n  const isDisabled = value === undefined;\n  maybeWarnDeprecated36pxSize({\n    componentName: 'FontSizePicker',\n    __next40pxDefaultSize,\n    size\n  });\n  return /*#__PURE__*/_jsxs(Container, {\n    ref: ref,\n    className: \"components-font-size-picker\"\n    // This Container component renders a fieldset element that needs to be labeled.\n    ,\n    \"aria-labelledby\": labelId,\n    children: [/*#__PURE__*/_jsx(Spacer, {\n      children: /*#__PURE__*/_jsxs(Header, {\n        className: \"components-font-size-picker__header\",\n        children: [/*#__PURE__*/_jsx(HeaderLabel, {\n          id: labelId,\n          children: __('Font size')\n        }), !disableCustomFontSizes && /*#__PURE__*/_jsx(HeaderToggle, {\n          label: currentPickerType === 'custom' ? __('Use size preset') : __('Set custom size'),\n          icon: settings,\n          onClick: () => setUserRequestedCustom(!userRequestedCustom),\n          isPressed: currentPickerType === 'custom',\n          size: \"small\"\n        })]\n      })\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      children: [currentPickerType === 'select' && /*#__PURE__*/_jsx(FontSizePickerSelect, {\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        fontSizes: fontSizes,\n        value: value,\n        valueMode: valueMode,\n        disableCustomFontSizes: disableCustomFontSizes,\n        size: size,\n        onChange: (newValue, selectedItem) => {\n          if (newValue === undefined) {\n            onChange?.(undefined, selectedItem);\n          } else {\n            onChange?.(hasUnits ? newValue : Number(newValue), selectedItem);\n          }\n        },\n        onSelectCustom: () => setUserRequestedCustom(true)\n      }), currentPickerType === 'togglegroup' && /*#__PURE__*/_jsx(FontSizePickerToggleGroup, {\n        fontSizes: fontSizes,\n        value: value,\n        valueMode: valueMode,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        size: size,\n        onChange: (newValue, selectedItem) => {\n          if (newValue === undefined) {\n            onChange?.(undefined, selectedItem);\n          } else {\n            onChange?.(hasUnits ? newValue : Number(newValue), selectedItem);\n          }\n        }\n      }), currentPickerType === 'custom' && /*#__PURE__*/_jsxs(Flex, {\n        className: \"components-font-size-picker__custom-size-control\",\n        children: [/*#__PURE__*/_jsx(FlexItem, {\n          isBlock: true,\n          children: /*#__PURE__*/_jsx(UnitControl, {\n            __next40pxDefaultSize: __next40pxDefaultSize,\n            __shouldNotWarnDeprecated36pxSize: true,\n            label: __('Font size'),\n            labelPosition: \"top\",\n            hideLabelFromVision: true,\n            value: hasUnits ? `${valueQuantity !== null && valueQuantity !== void 0 ? valueQuantity : ''}${valueUnit !== null && valueUnit !== void 0 ? valueUnit : ''}` : resolvedValueForControls,\n            onChange: newValue => {\n              setUserRequestedCustom(true);\n\n              // Treat clearing the input (empty string) as a reset\n              if (newValue === undefined || newValue === '') {\n                onChange?.(undefined);\n              } else {\n                onChange?.(hasUnits ? newValue : parseInt(newValue, 10));\n              }\n            },\n            size: size,\n            units: hasUnits ? units : [],\n            min: 0\n          })\n        }), withSlider && /*#__PURE__*/_jsx(FlexItem, {\n          isBlock: true,\n          children: /*#__PURE__*/_jsx(Spacer, {\n            marginX: 2,\n            marginBottom: 0,\n            children: /*#__PURE__*/_jsx(RangeControl, {\n              __next40pxDefaultSize: __next40pxDefaultSize,\n              __shouldNotWarnDeprecated36pxSize: true,\n              className: \"components-font-size-picker__custom-input\",\n              label: __('Font size'),\n              hideLabelFromVision: true,\n              value: valueQuantity,\n              initialPosition: fallbackFontSize,\n              withInputField: false,\n              onChange: newValue => {\n                setUserRequestedCustom(true);\n                if (newValue === undefined) {\n                  onChange?.(undefined);\n                } else if (hasUnits) {\n                  onChange?.(newValue + (valueUnit !== null && valueUnit !== void 0 ? valueUnit : 'px'));\n                } else {\n                  onChange?.(newValue);\n                }\n              },\n              min: 0,\n              max: isValueUnitRelative ? 10 : 100,\n              step: isValueUnitRelative ? 0.1 : 1\n            })\n          })\n        }), withReset && /*#__PURE__*/_jsx(FlexItem, {\n          children: /*#__PURE__*/_jsx(Button, {\n            disabled: isDisabled,\n            accessibleWhenDisabled: true,\n            onClick: () => {\n              onChange?.(undefined);\n            },\n            variant: \"secondary\",\n            __next40pxDefaultSize: true,\n            size: size === '__unstable-large' || props.__next40pxDefaultSize ? 'default' : 'small',\n            children: __('Reset')\n          })\n        })]\n      })]\n    })]\n  });\n};\nexport const FontSizePicker = forwardRef(UnforwardedFontSizePicker);\nFontSizePicker.displayName = 'FontSizePicker';\nexport default FontSizePicker;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { settings } from '@wordpress/icons';\nimport { useState, forwardRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport RangeControl from '../range-control';\nimport { Flex, FlexItem } from '../flex';\nimport { default as UnitControl, parseQuantityAndUnitFromRawValue, useCustomUnits } from '../unit-control';\nimport { Container, Header, HeaderLabel, HeaderToggle } from './styles';\nimport { Spacer } from '../spacer';\nimport FontSizePickerSelect from './font-size-picker-select';\nimport FontSizePickerToggleGroup from './font-size-picker-toggle-group';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst DEFAULT_UNITS = ['px', 'em', 'rem', 'vw', 'vh'];\nconst MAX_TOGGLE_GROUP_SIZES = 5;\nconst UnforwardedFontSizePicker = (props, ref) => {\n  const {\n    __next40pxDefaultSize = false,\n    fallbackFontSize,\n    fontSizes = [],\n    disableCustomFontSizes = false,\n    onChange,\n    size = 'default',\n    units: unitsProp = DEFAULT_UNITS,\n    value,\n    valueMode = 'literal',\n    withSlider = false,\n    withReset = true\n  } = props;\n  const labelId = useInstanceId(UnforwardedFontSizePicker, 'font-size-picker-label');\n  const units = useCustomUnits({\n    availableUnits: unitsProp\n  });\n  const selectedFontSize = (() => {\n    if (!value) {\n      return undefined;\n    }\n\n    // If valueMode is 'slug', find by slug\n    if (valueMode === 'slug') {\n      return fontSizes.find(fontSize => fontSize.slug === value);\n    }\n\n    // If valueMode is 'literal', find by size value\n    return fontSizes.find(fontSize => fontSize.size === value);\n  })();\n  const isCustomValue = !!value && !selectedFontSize;\n\n  // Initially request a custom picker if the value is not from the predef list.\n  const [userRequestedCustom, setUserRequestedCustom] = useState(isCustomValue);\n\n  // Resolve the literal value to use in custom controls when operating in slug mode.\n  // When `valueMode` is 'slug', the `value` prop contains the slug of the\n  // selected preset. In that case, the custom input should reflect the preset's\n  // actual size value so it pre-populates correctly after clicking \"Set custom size\".\n  const resolvedValueForControls = valueMode === 'slug' ? selectedFontSize?.size : value;\n  let currentPickerType;\n  if (!disableCustomFontSizes && userRequestedCustom) {\n    // While showing the custom value picker, switch back to predef only if\n    // `disableCustomFontSizes` is set to `true`.\n    currentPickerType = 'custom';\n  } else {\n    currentPickerType = fontSizes.length > MAX_TOGGLE_GROUP_SIZES ? 'select' : 'togglegroup';\n  }\n  if (fontSizes.length === 0 && disableCustomFontSizes) {\n    return null;\n  }\n\n  // If neither the value or first font size is a string, then FontSizePicker\n  // operates in a legacy \"unitless\" mode where UnitControl can only be used\n  // to select px values and onChange() is always called with number values.\n  const hasUnits = typeof resolvedValueForControls === 'string' || typeof fontSizes[0]?.size === 'string';\n  const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(resolvedValueForControls, units);\n  const isValueUnitRelative = !!valueUnit && ['em', 'rem', 'vw', 'vh'].includes(valueUnit);\n  const isDisabled = value === undefined;\n  maybeWarnDeprecated36pxSize({\n    componentName: 'FontSizePicker',\n    __next40pxDefaultSize,\n    size\n  });\n  return /*#__PURE__*/_jsxs(Container, {\n    ref: ref,\n    className: \"components-font-size-picker\"\n    // This Container component renders a fieldset element that needs to be labeled.\n    ,\n    \"aria-labelledby\": labelId,\n    children: [/*#__PURE__*/_jsx(Spacer, {\n      children: /*#__PURE__*/_jsxs(Header, {\n        className: \"components-font-size-picker__header\",\n        children: [/*#__PURE__*/_jsx(HeaderLabel, {\n          id: labelId,\n          children: __('Font size')\n        }), !disableCustomFontSizes && /*#__PURE__*/_jsx(HeaderToggle, {\n          label: currentPickerType === 'custom' ? __('Use size preset') : __('Set custom size'),\n          icon: settings,\n          onClick: () => setUserRequestedCustom(!userRequestedCustom),\n          isPressed: currentPickerType === 'custom',\n          size: \"small\"\n        })]\n      })\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      children: [currentPickerType === 'select' && /*#__PURE__*/_jsx(FontSizePickerSelect, {\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        fontSizes: fontSizes,\n        value: value,\n        valueMode: valueMode,\n        disableCustomFontSizes: disableCustomFontSizes,\n        size: size,\n        onChange: (newValue, selectedItem) => {\n          if (newValue === undefined) {\n            onChange?.(undefined, selectedItem);\n          } else {\n            onChange?.(hasUnits ? newValue : Number(newValue), selectedItem);\n          }\n        },\n        onSelectCustom: () => setUserRequestedCustom(true)\n      }), currentPickerType === 'togglegroup' && /*#__PURE__*/_jsx(FontSizePickerToggleGroup, {\n        fontSizes: fontSizes,\n        value: value,\n        valueMode: valueMode,\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        size: size,\n        onChange: (newValue, selectedItem) => {\n          if (newValue === undefined) {\n            onChange?.(undefined, selectedItem);\n          } else {\n            onChange?.(hasUnits ? newValue : Number(newValue), selectedItem);\n          }\n        }\n      }), currentPickerType === 'custom' && /*#__PURE__*/_jsxs(Flex, {\n        className: \"components-font-size-picker__custom-size-control\",\n        children: [/*#__PURE__*/_jsx(FlexItem, {\n          isBlock: true,\n          children: /*#__PURE__*/_jsx(UnitControl, {\n            __next40pxDefaultSize: __next40pxDefaultSize,\n            __shouldNotWarnDeprecated36pxSize: true,\n            label: __('Font size'),\n            labelPosition: \"top\",\n            hideLabelFromVision: true,\n            value: hasUnits ? `${valueQuantity ?? ''}${valueUnit ?? ''}` : resolvedValueForControls,\n            onChange: newValue => {\n              setUserRequestedCustom(true);\n\n              // Treat clearing the input (empty string) as a reset\n              if (newValue === undefined || newValue === '') {\n                onChange?.(undefined);\n              } else {\n                onChange?.(hasUnits ? newValue : parseInt(newValue, 10));\n              }\n            },\n            size: size,\n            units: hasUnits ? units : [],\n            min: 0\n          })\n        }), withSlider && /*#__PURE__*/_jsx(FlexItem, {\n          isBlock: true,\n          children: /*#__PURE__*/_jsx(Spacer, {\n            marginX: 2,\n            marginBottom: 0,\n            children: /*#__PURE__*/_jsx(RangeControl, {\n              __next40pxDefaultSize: __next40pxDefaultSize,\n              __shouldNotWarnDeprecated36pxSize: true,\n              className: \"components-font-size-picker__custom-input\",\n              label: __('Font size'),\n              hideLabelFromVision: true,\n              value: valueQuantity,\n              initialPosition: fallbackFontSize,\n              withInputField: false,\n              onChange: newValue => {\n                setUserRequestedCustom(true);\n                if (newValue === undefined) {\n                  onChange?.(undefined);\n                } else if (hasUnits) {\n                  onChange?.(newValue + (valueUnit ?? 'px'));\n                } else {\n                  onChange?.(newValue);\n                }\n              },\n              min: 0,\n              max: isValueUnitRelative ? 10 : 100,\n              step: isValueUnitRelative ? 0.1 : 1\n            })\n          })\n        }), withReset && /*#__PURE__*/_jsx(FlexItem, {\n          children: /*#__PURE__*/_jsx(Button, {\n            disabled: isDisabled,\n            accessibleWhenDisabled: true,\n            onClick: () => {\n              onChange?.(undefined);\n            },\n            variant: \"secondary\",\n            __next40pxDefaultSize: true,\n            size: size === '__unstable-large' || props.__next40pxDefaultSize ? 'default' : 'small',\n            children: __('Reset')\n          })\n        })]\n      })]\n    })]\n  });\n};\nexport const FontSizePicker = forwardRef(UnforwardedFontSizePicker);\nFontSizePicker.displayName = 'FontSizePicker';\nexport default FontSizePicker;"],
+  "mappings": "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",
   "names": ["_jsxs", "_jsx", "FontSizePickerSelect", "FontSizePickerToggleGroup", "UnitControl", "RangeControl"]
 }

package/build/guide/index.cjs CHANGED Viewed

@@ -68,10 +68,9 @@ function Guide({
     }
   }, [children]);
   if (import_element.Children.count(children)) {
-    var _Children$map;
-    pages = (_Children$map = import_element.Children.map(children, (child) => ({
+    pages = import_element.Children.map(children, (child) => ({
       content: child
-    }))) !== null && _Children$map !== void 0 ? _Children$map : [];
+    })) ?? [];
   }
   const canGoBack = currentPage > 0;
   const canGoForward = currentPage < pages.length - 1;

package/build/guide/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/guide/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide({\n  children,\n  className,\n  contentLabel,\n  finishButtonText = __('Finish'),\n  nextButtonText = __('Next'),\n  previousButtonText = __('Previous'),\n  onFinish,\n  pages = []\n}) {\n  const ref = useRef(null);\n  const [currentPage, setCurrentPage] = useState(0);\n  useEffect(() => {\n    // Place focus at the top of the guide on mount and when the page changes.\n    const frame = ref.current?.querySelector('.components-guide');\n    if (frame instanceof HTMLElement) {\n      frame.focus();\n    }\n  }, [currentPage]);\n  useEffect(() => {\n    if (Children.count(children)) {\n      deprecated('Passing children to <Guide>', {\n        since: '5.5',\n        alternative: 'the `pages` prop'\n      });\n    }\n  }, [children]);\n  if (Children.count(children)) {\n    var _Children$map;\n    pages = (_Children$map = Children.map(children, child => ({\n      content: child\n    }))) !== null && _Children$map !== void 0 ? _Children$map : [];\n  }\n  const canGoBack = currentPage > 0;\n  const canGoForward = currentPage < pages.length - 1;\n  const goBack = () => {\n    if (canGoBack) {\n      setCurrentPage(currentPage - 1);\n    }\n  };\n  const goForward = () => {\n    if (canGoForward) {\n      setCurrentPage(currentPage + 1);\n    }\n  };\n  if (pages.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(Modal, {\n    className: clsx('components-guide', className),\n    contentLabel: contentLabel,\n    isDismissible: pages.length > 1,\n    onRequestClose: onFinish,\n    onKeyDown: event => {\n      if (event.code === 'ArrowLeft') {\n        goBack();\n        // Do not scroll the modal's contents.\n        event.preventDefault();\n      } else if (event.code === 'ArrowRight') {\n        goForward();\n        // Do not scroll the modal's contents.\n        event.preventDefault();\n      }\n    },\n    ref: ref,\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      className: \"components-guide__container\",\n      children: [/*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-guide__page\",\n        children: [pages[currentPage].image, pages.length > 1 && /*#__PURE__*/_jsx(PageControl, {\n          currentPage: currentPage,\n          numberOfPages: pages.length,\n          setCurrentPage: setCurrentPage\n        }), pages[currentPage].content]\n      }), /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-guide__footer\",\n        children: [canGoBack && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__back-button\",\n          variant: \"tertiary\",\n          onClick: goBack,\n          __next40pxDefaultSize: true,\n          children: previousButtonText\n        }), canGoForward && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__forward-button\",\n          variant: \"primary\",\n          onClick: goForward,\n          __next40pxDefaultSize: true,\n          children: nextButtonText\n        }), !canGoForward && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__finish-button\",\n          variant: \"primary\",\n          onClick: onFinish,\n          __next40pxDefaultSize: true,\n          children: finishButtonText\n        })]\n      })]\n    })\n  });\n}\nexport default Guide;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, Children, useRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport Button from '../button';\nimport PageControl from './page-control';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\n/**\n * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.\n *\n * ```jsx\n * function MyTutorial() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tif ( ! isOpen ) {\n * \t\treturn null;\n * \t}\n *\n * \treturn (\n * \t\t<Guide\n * \t\t\tonFinish={ () => setIsOpen( false ) }\n * \t\t\tpages={ [\n * \t\t\t\t{\n * \t\t\t\t\tcontent: <p>Welcome to the ACME Store!</p>,\n * \t\t\t\t},\n * \t\t\t\t{\n * \t\t\t\t\timage: <img src=\"https://acmestore.com/add-to-cart.png\" />,\n * \t\t\t\t\tcontent: (\n * \t\t\t\t\t\t<p>\n * \t\t\t\t\t\t\tClick <i>Add to Cart</i> to buy a product.\n * \t\t\t\t\t\t</p>\n * \t\t\t\t\t),\n * \t\t\t\t},\n * \t\t\t] }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nfunction Guide({\n  children,\n  className,\n  contentLabel,\n  finishButtonText = __('Finish'),\n  nextButtonText = __('Next'),\n  previousButtonText = __('Previous'),\n  onFinish,\n  pages = []\n}) {\n  const ref = useRef(null);\n  const [currentPage, setCurrentPage] = useState(0);\n  useEffect(() => {\n    // Place focus at the top of the guide on mount and when the page changes.\n    const frame = ref.current?.querySelector('.components-guide');\n    if (frame instanceof HTMLElement) {\n      frame.focus();\n    }\n  }, [currentPage]);\n  useEffect(() => {\n    if (Children.count(children)) {\n      deprecated('Passing children to <Guide>', {\n        since: '5.5',\n        alternative: 'the `pages` prop'\n      });\n    }\n  }, [children]);\n  if (Children.count(children)) {\n    pages = Children.map(children, child => ({\n      content: child\n    })) ?? [];\n  }\n  const canGoBack = currentPage > 0;\n  const canGoForward = currentPage < pages.length - 1;\n  const goBack = () => {\n    if (canGoBack) {\n      setCurrentPage(currentPage - 1);\n    }\n  };\n  const goForward = () => {\n    if (canGoForward) {\n      setCurrentPage(currentPage + 1);\n    }\n  };\n  if (pages.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(Modal, {\n    className: clsx('components-guide', className),\n    contentLabel: contentLabel,\n    isDismissible: pages.length > 1,\n    onRequestClose: onFinish,\n    onKeyDown: event => {\n      if (event.code === 'ArrowLeft') {\n        goBack();\n        // Do not scroll the modal's contents.\n        event.preventDefault();\n      } else if (event.code === 'ArrowRight') {\n        goForward();\n        // Do not scroll the modal's contents.\n        event.preventDefault();\n      }\n    },\n    ref: ref,\n    children: /*#__PURE__*/_jsxs(\"div\", {\n      className: \"components-guide__container\",\n      children: [/*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-guide__page\",\n        children: [pages[currentPage].image, pages.length > 1 && /*#__PURE__*/_jsx(PageControl, {\n          currentPage: currentPage,\n          numberOfPages: pages.length,\n          setCurrentPage: setCurrentPage\n        }), pages[currentPage].content]\n      }), /*#__PURE__*/_jsxs(\"div\", {\n        className: \"components-guide__footer\",\n        children: [canGoBack && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__back-button\",\n          variant: \"tertiary\",\n          onClick: goBack,\n          __next40pxDefaultSize: true,\n          children: previousButtonText\n        }), canGoForward && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__forward-button\",\n          variant: \"primary\",\n          onClick: goForward,\n          __next40pxDefaultSize: true,\n          children: nextButtonText\n        }), !canGoForward && /*#__PURE__*/_jsx(Button, {\n          className: \"components-guide__finish-button\",\n          variant: \"primary\",\n          onClick: onFinish,\n          __next40pxDefaultSize: true,\n          children: finishButtonText\n        })]\n      })]\n    })\n  });\n}\nexport default Guide;"],
+  "mappings": "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",
   "names": ["deprecated", "_jsx", "Modal", "clsx", "_jsxs", "PageControl", "Button"]
 }

package/build/higher-order/navigate-regions/index.cjs CHANGED Viewed

@@ -51,8 +51,7 @@ function useNavigateRegions(shortcuts = defaultShortcuts) {
   const ref = (0, import_element.useRef)(null);
   const [isFocusingRegions, setIsFocusingRegions] = (0, import_element.useState)(false);
   function focusRegion(offset) {
-    var _ref$current$querySel;
-    const regions = Array.from((_ref$current$querySel = ref.current?.querySelectorAll('[role="region"][tabindex="-1"]')) !== null && _ref$current$querySel !== void 0 ? _ref$current$querySel : []);
+    const regions = Array.from(ref.current?.querySelectorAll('[role="region"][tabindex="-1"]') ?? []);
     if (!regions.length) {
       return;
     }

package/build/higher-order/navigate-regions/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/higher-order/navigate-regions/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport { createHigherOrderComponent, useRefEffect, useMergeRefs } from '@wordpress/compose';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst defaultShortcuts = {\n  previous: [{\n    modifier: 'ctrlShift',\n    character: '`'\n  }, {\n    modifier: 'ctrlShift',\n    character: '~'\n  }, {\n    modifier: 'access',\n    character: 'p'\n  }],\n  next: [{\n    modifier: 'ctrl',\n    character: '`'\n  }, {\n    modifier: 'access',\n    character: 'n'\n  }]\n};\nexport function useNavigateRegions(shortcuts = defaultShortcuts) {\n  const ref = useRef(null);\n  const [isFocusingRegions, setIsFocusingRegions] = useState(false);\n  function focusRegion(offset) {\n    var _ref$current$querySel;\n    const regions = Array.from((_ref$current$querySel = ref.current?.querySelectorAll('[role=\"region\"][tabindex=\"-1\"]')) !== null && _ref$current$querySel !== void 0 ? _ref$current$querySel : []);\n    if (!regions.length) {\n      return;\n    }\n    let nextRegion = regions[0];\n    // Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.\n    const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role=\"region\"][tabindex=\"-1\"]');\n    const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1;\n    if (selectedIndex !== -1) {\n      let nextIndex = selectedIndex + offset;\n      nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;\n      nextIndex = nextIndex === regions.length ? 0 : nextIndex;\n      nextRegion = regions[nextIndex];\n    }\n    nextRegion.focus();\n    setIsFocusingRegions(true);\n  }\n  const clickRef = useRefEffect(element => {\n    function onClick() {\n      setIsFocusingRegions(false);\n    }\n    element.addEventListener('click', onClick);\n    return () => {\n      element.removeEventListener('click', onClick);\n    };\n  }, [setIsFocusingRegions]);\n  return {\n    ref: useMergeRefs([ref, clickRef]),\n    className: isFocusingRegions ? 'is-focusing-regions' : '',\n    onKeyDown(event) {\n      if (shortcuts.previous.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(-1);\n      } else if (shortcuts.next.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(1);\n      }\n    }\n  };\n}\n\n/**\n * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)\n * adding keyboard navigation to switch between the different DOM elements marked as \"regions\" (role=\"region\").\n * These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility,\n * these elements must be properly labelled to briefly describe the purpose of the content in the region.\n * For more details, see \"Landmark Roles\" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/)\n * and \"Landmark Regions\" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/).\n *\n * ```jsx\n * import { navigateRegions } from '@wordpress/components';\n *\n * const MyComponentWithNavigateRegions = navigateRegions( () => (\n * \t<div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Header\">\n * \t\t\tHeader\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Content\">\n * \t\t\tContent\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Sidebar\">\n * \t\t\tSidebar\n * \t\t</div>\n * \t</div>\n * ) );\n * ```\n */\nexport default createHigherOrderComponent(Component => function NavigateRegions({\n  shortcuts,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...useNavigateRegions(shortcuts),\n    children: /*#__PURE__*/_jsx(Component, {\n      ...props\n    })\n  });\n}, 'navigateRegions');"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAiC;AACjC,qBAAuE;AACvE,sBAAgC;AAChC,yBAA4B;AAC5B,IAAM,mBAAmB;AAAA,EACvB,UAAU,CAAC;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AAAA,EACD,MAAM,CAAC;AAAA,IACL,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AACH;AACO,SAAS,mBAAmB,YAAY,kBAAkB;AAC/D,QAAM,UAAM,uBAAO,IAAI;AACvB,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,yBAAS,KAAK;AAChE,WAAS,YAAY,QAAQ;AAC3B,QAAI;AACJ,UAAM,UAAU,MAAM,MAAM,wBAAwB,IAAI,SAAS,iBAAiB,gCAAgC,OAAO,QAAQ,0BAA0B,SAAS,wBAAwB,CAAC,CAAC;AAC9L,QAAI,CAAC,QAAQ,QAAQ;AACnB;AAAA,IACF;AACA,QAAI,aAAa,QAAQ,CAAC;AAE1B,UAAM,iBAAiB,IAAI,SAAS,eAAe,eAAe,QAAQ,gCAAgC;AAC1G,UAAM,gBAAgB,iBAAiB,QAAQ,QAAQ,cAAc,IAAI;AACzE,QAAI,kBAAkB,IAAI;AACxB,UAAI,YAAY,gBAAgB;AAChC,kBAAY,cAAc,KAAK,QAAQ,SAAS,IAAI;AACpD,kBAAY,cAAc,QAAQ,SAAS,IAAI;AAC/C,mBAAa,QAAQ,SAAS;AAAA,IAChC;AACA,eAAW,MAAM;AACjB,yBAAqB,IAAI;AAAA,EAC3B;AACA,QAAM,eAAW,6BAAa,aAAW;AACvC,aAAS,UAAU;AACjB,2BAAqB,KAAK;AAAA,IAC5B;AACA,YAAQ,iBAAiB,SAAS,OAAO;AACzC,WAAO,MAAM;AACX,cAAQ,oBAAoB,SAAS,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,oBAAoB,CAAC;AACzB,SAAO;AAAA,IACL,SAAK,6BAAa,CAAC,KAAK,QAAQ,CAAC;AAAA,IACjC,WAAW,oBAAoB,wBAAwB;AAAA,IACvD,UAAU,OAAO;AACf,UAAI,UAAU,SAAS,KAAK,CAAC;AAAA,QAC3B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gCAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,EAAE;AAAA,MAChB,WAAW,UAAU,KAAK,KAAK,CAAC;AAAA,QAC9B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gCAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,CAAC;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AA4BA,IAAO,+BAAQ,2CAA2B,eAAa,SAAS,gBAAgB;AAAA,EAC9E;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,uCAAAA,KAAK,OAAO;AAAA,IAC9B,GAAG,mBAAmB,SAAS;AAAA,IAC/B,UAAuB,uCAAAA,KAAK,WAAW;AAAA,MACrC,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH,GAAG,iBAAiB;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useRef } from '@wordpress/element';\nimport { createHigherOrderComponent, useRefEffect, useMergeRefs } from '@wordpress/compose';\nimport { isKeyboardEvent } from '@wordpress/keycodes';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst defaultShortcuts = {\n  previous: [{\n    modifier: 'ctrlShift',\n    character: '`'\n  }, {\n    modifier: 'ctrlShift',\n    character: '~'\n  }, {\n    modifier: 'access',\n    character: 'p'\n  }],\n  next: [{\n    modifier: 'ctrl',\n    character: '`'\n  }, {\n    modifier: 'access',\n    character: 'n'\n  }]\n};\nexport function useNavigateRegions(shortcuts = defaultShortcuts) {\n  const ref = useRef(null);\n  const [isFocusingRegions, setIsFocusingRegions] = useState(false);\n  function focusRegion(offset) {\n    const regions = Array.from(ref.current?.querySelectorAll('[role=\"region\"][tabindex=\"-1\"]') ?? []);\n    if (!regions.length) {\n      return;\n    }\n    let nextRegion = regions[0];\n    // Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.\n    const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role=\"region\"][tabindex=\"-1\"]');\n    const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1;\n    if (selectedIndex !== -1) {\n      let nextIndex = selectedIndex + offset;\n      nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;\n      nextIndex = nextIndex === regions.length ? 0 : nextIndex;\n      nextRegion = regions[nextIndex];\n    }\n    nextRegion.focus();\n    setIsFocusingRegions(true);\n  }\n  const clickRef = useRefEffect(element => {\n    function onClick() {\n      setIsFocusingRegions(false);\n    }\n    element.addEventListener('click', onClick);\n    return () => {\n      element.removeEventListener('click', onClick);\n    };\n  }, [setIsFocusingRegions]);\n  return {\n    ref: useMergeRefs([ref, clickRef]),\n    className: isFocusingRegions ? 'is-focusing-regions' : '',\n    onKeyDown(event) {\n      if (shortcuts.previous.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(-1);\n      } else if (shortcuts.next.some(({\n        modifier,\n        character\n      }) => {\n        return isKeyboardEvent[modifier](event, character);\n      })) {\n        focusRegion(1);\n      }\n    }\n  };\n}\n\n/**\n * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html)\n * adding keyboard navigation to switch between the different DOM elements marked as \"regions\" (role=\"region\").\n * These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility,\n * these elements must be properly labelled to briefly describe the purpose of the content in the region.\n * For more details, see \"Landmark Roles\" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/)\n * and \"Landmark Regions\" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/).\n *\n * ```jsx\n * import { navigateRegions } from '@wordpress/components';\n *\n * const MyComponentWithNavigateRegions = navigateRegions( () => (\n * \t<div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Header\">\n * \t\t\tHeader\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Content\">\n * \t\t\tContent\n * \t\t</div>\n * \t\t<div role=\"region\" tabIndex=\"-1\" aria-label=\"Sidebar\">\n * \t\t\tSidebar\n * \t\t</div>\n * \t</div>\n * ) );\n * ```\n */\nexport default createHigherOrderComponent(Component => function NavigateRegions({\n  shortcuts,\n  ...props\n}) {\n  return /*#__PURE__*/_jsx(\"div\", {\n    ...useNavigateRegions(shortcuts),\n    children: /*#__PURE__*/_jsx(Component, {\n      ...props\n    })\n  });\n}, 'navigateRegions');"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAiC;AACjC,qBAAuE;AACvE,sBAAgC;AAChC,yBAA4B;AAC5B,IAAM,mBAAmB;AAAA,EACvB,UAAU,CAAC;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AAAA,EACD,MAAM,CAAC;AAAA,IACL,UAAU;AAAA,IACV,WAAW;AAAA,EACb,GAAG;AAAA,IACD,UAAU;AAAA,IACV,WAAW;AAAA,EACb,CAAC;AACH;AACO,SAAS,mBAAmB,YAAY,kBAAkB;AAC/D,QAAM,UAAM,uBAAO,IAAI;AACvB,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,yBAAS,KAAK;AAChE,WAAS,YAAY,QAAQ;AAC3B,UAAM,UAAU,MAAM,KAAK,IAAI,SAAS,iBAAiB,gCAAgC,KAAK,CAAC,CAAC;AAChG,QAAI,CAAC,QAAQ,QAAQ;AACnB;AAAA,IACF;AACA,QAAI,aAAa,QAAQ,CAAC;AAE1B,UAAM,iBAAiB,IAAI,SAAS,eAAe,eAAe,QAAQ,gCAAgC;AAC1G,UAAM,gBAAgB,iBAAiB,QAAQ,QAAQ,cAAc,IAAI;AACzE,QAAI,kBAAkB,IAAI;AACxB,UAAI,YAAY,gBAAgB;AAChC,kBAAY,cAAc,KAAK,QAAQ,SAAS,IAAI;AACpD,kBAAY,cAAc,QAAQ,SAAS,IAAI;AAC/C,mBAAa,QAAQ,SAAS;AAAA,IAChC;AACA,eAAW,MAAM;AACjB,yBAAqB,IAAI;AAAA,EAC3B;AACA,QAAM,eAAW,6BAAa,aAAW;AACvC,aAAS,UAAU;AACjB,2BAAqB,KAAK;AAAA,IAC5B;AACA,YAAQ,iBAAiB,SAAS,OAAO;AACzC,WAAO,MAAM;AACX,cAAQ,oBAAoB,SAAS,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,oBAAoB,CAAC;AACzB,SAAO;AAAA,IACL,SAAK,6BAAa,CAAC,KAAK,QAAQ,CAAC;AAAA,IACjC,WAAW,oBAAoB,wBAAwB;AAAA,IACvD,UAAU,OAAO;AACf,UAAI,UAAU,SAAS,KAAK,CAAC;AAAA,QAC3B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gCAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,EAAE;AAAA,MAChB,WAAW,UAAU,KAAK,KAAK,CAAC;AAAA,QAC9B;AAAA,QACA;AAAA,MACF,MAAM;AACJ,eAAO,gCAAgB,QAAQ,EAAE,OAAO,SAAS;AAAA,MACnD,CAAC,GAAG;AACF,oBAAY,CAAC;AAAA,MACf;AAAA,IACF;AAAA,EACF;AACF;AA4BA,IAAO,+BAAQ,2CAA2B,eAAa,SAAS,gBAAgB;AAAA,EAC9E;AAAA,EACA,GAAG;AACL,GAAG;AACD,SAAoB,uCAAAA,KAAK,OAAO;AAAA,IAC9B,GAAG,mBAAmB,SAAS;AAAA,IAC/B,UAAuB,uCAAAA,KAAK,WAAW;AAAA,MACrC,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACH,GAAG,iBAAiB;",
   "names": ["_jsx"]
 }

package/build/input-control/input-field.cjs CHANGED Viewed

@@ -173,7 +173,7 @@ function InputField({
     onKeyDown: (0, import_with_ignore_ime_events.withIgnoreIMEEvents)(handleOnKeyDown),
     ref,
     inputSize: size,
-    value: value !== null && value !== void 0 ? value : "",
+    value: value ?? "",
     type
   });
 }

package/build/input-control/input-field.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/input-control/input-field.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { useDrag } from '@use-gesture/react';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\n\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction InputField({\n  disabled = false,\n  dragDirection = 'n',\n  dragThreshold = 10,\n  id,\n  isDragEnabled = false,\n  isPressEnterToChange = false,\n  onBlur = noop,\n  onChange = noop,\n  onDrag = noop,\n  onDragEnd = noop,\n  onDragStart = noop,\n  onKeyDown = noop,\n  onValidate = noop,\n  size = 'default',\n  stateReducer = state => state,\n  value: valueProp,\n  type,\n  ...props\n}, ref) {\n  const {\n    // State.\n    state,\n    // Actions.\n    change,\n    commit,\n    drag,\n    dragEnd,\n    dragStart,\n    invalidate,\n    pressDown,\n    pressEnter,\n    pressUp,\n    reset\n  } = useInputControlStateReducer(stateReducer, {\n    isDragEnabled,\n    value: valueProp,\n    isPressEnterToChange\n  }, onChange);\n  const {\n    value,\n    isDragging,\n    isDirty\n  } = state;\n  const wasDirtyOnBlur = useRef(false);\n  const dragCursor = useDragCursor(isDragging, dragDirection);\n  const handleOnBlur = event => {\n    onBlur(event);\n\n    /**\n     * If isPressEnterToChange is set, this commits the value to\n     * the onChange callback.\n     */\n    if (isDirty || !event.target.validity.valid) {\n      wasDirtyOnBlur.current = true;\n      handleOnCommit(event);\n    }\n  };\n  const handleOnChange = event => {\n    const nextValue = event.target.value;\n    change(nextValue, event);\n  };\n  const handleOnCommit = event => {\n    const nextValue = event.currentTarget.value;\n    try {\n      onValidate(nextValue);\n      commit(nextValue, event);\n    } catch (err) {\n      invalidate(err, event);\n    }\n  };\n  const handleOnKeyDown = event => {\n    const {\n      key\n    } = event;\n    onKeyDown(event);\n    switch (key) {\n      case 'ArrowUp':\n        pressUp(event);\n        break;\n      case 'ArrowDown':\n        pressDown(event);\n        break;\n      case 'Enter':\n        pressEnter(event);\n        if (isPressEnterToChange) {\n          event.preventDefault();\n          handleOnCommit(event);\n        }\n        break;\n      case 'Escape':\n        if (isPressEnterToChange && isDirty) {\n          event.preventDefault();\n          reset(valueProp, event);\n        }\n        break;\n    }\n  };\n  const dragGestureProps = useDrag(dragProps => {\n    const {\n      distance,\n      dragging,\n      event,\n      target\n    } = dragProps;\n\n    // The `target` prop always references the `input` element while, by\n    // default, the `dragProps.event.target` property would reference the real\n    // event target (i.e. any DOM element that the pointer is hovering while\n    // dragging). Ensuring that the `target` is always the `input` element\n    // allows consumers of `InputControl` (or any higher-level control) to\n    // check the input's validity by accessing `event.target.validity.valid`.\n    dragProps.event = {\n      ...dragProps.event,\n      target\n    };\n    if (!distance) {\n      return;\n    }\n    event.stopPropagation();\n\n    /**\n     * Quick return if no longer dragging.\n     * This prevents unnecessary value calculations.\n     */\n    if (!dragging) {\n      onDragEnd(dragProps);\n      dragEnd(dragProps);\n      return;\n    }\n    onDrag(dragProps);\n    drag(dragProps);\n    if (!isDragging) {\n      onDragStart(dragProps);\n      dragStart(dragProps);\n    }\n  }, {\n    axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',\n    threshold: dragThreshold,\n    enabled: isDragEnabled,\n    pointer: {\n      capture: false\n    }\n  });\n  const dragProps = isDragEnabled ? dragGestureProps() : {};\n  return /*#__PURE__*/_jsx(Input, {\n    ...props,\n    ...dragProps,\n    className: \"components-input-control__input\",\n    disabled: disabled,\n    dragCursor: dragCursor,\n    isDragging: isDragging,\n    id: id,\n    onBlur: handleOnBlur,\n    onChange: handleOnChange,\n    onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),\n    ref: ref,\n    inputSize: size\n    // Fallback to `''` to avoid \"uncontrolled to controlled\" warning.\n    // See https://github.com/WordPress/gutenberg/pull/47250 for details.\n    ,\n    value: value !== null && value !== void 0 ? value : '',\n    type: type\n  });\n}\nconst ForwardedComponent = forwardRef(InputField);\nexport default ForwardedComponent;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { useDrag } from '@use-gesture/react';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\n\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction InputField({\n  disabled = false,\n  dragDirection = 'n',\n  dragThreshold = 10,\n  id,\n  isDragEnabled = false,\n  isPressEnterToChange = false,\n  onBlur = noop,\n  onChange = noop,\n  onDrag = noop,\n  onDragEnd = noop,\n  onDragStart = noop,\n  onKeyDown = noop,\n  onValidate = noop,\n  size = 'default',\n  stateReducer = state => state,\n  value: valueProp,\n  type,\n  ...props\n}, ref) {\n  const {\n    // State.\n    state,\n    // Actions.\n    change,\n    commit,\n    drag,\n    dragEnd,\n    dragStart,\n    invalidate,\n    pressDown,\n    pressEnter,\n    pressUp,\n    reset\n  } = useInputControlStateReducer(stateReducer, {\n    isDragEnabled,\n    value: valueProp,\n    isPressEnterToChange\n  }, onChange);\n  const {\n    value,\n    isDragging,\n    isDirty\n  } = state;\n  const wasDirtyOnBlur = useRef(false);\n  const dragCursor = useDragCursor(isDragging, dragDirection);\n  const handleOnBlur = event => {\n    onBlur(event);\n\n    /**\n     * If isPressEnterToChange is set, this commits the value to\n     * the onChange callback.\n     */\n    if (isDirty || !event.target.validity.valid) {\n      wasDirtyOnBlur.current = true;\n      handleOnCommit(event);\n    }\n  };\n  const handleOnChange = event => {\n    const nextValue = event.target.value;\n    change(nextValue, event);\n  };\n  const handleOnCommit = event => {\n    const nextValue = event.currentTarget.value;\n    try {\n      onValidate(nextValue);\n      commit(nextValue, event);\n    } catch (err) {\n      invalidate(err, event);\n    }\n  };\n  const handleOnKeyDown = event => {\n    const {\n      key\n    } = event;\n    onKeyDown(event);\n    switch (key) {\n      case 'ArrowUp':\n        pressUp(event);\n        break;\n      case 'ArrowDown':\n        pressDown(event);\n        break;\n      case 'Enter':\n        pressEnter(event);\n        if (isPressEnterToChange) {\n          event.preventDefault();\n          handleOnCommit(event);\n        }\n        break;\n      case 'Escape':\n        if (isPressEnterToChange && isDirty) {\n          event.preventDefault();\n          reset(valueProp, event);\n        }\n        break;\n    }\n  };\n  const dragGestureProps = useDrag(dragProps => {\n    const {\n      distance,\n      dragging,\n      event,\n      target\n    } = dragProps;\n\n    // The `target` prop always references the `input` element while, by\n    // default, the `dragProps.event.target` property would reference the real\n    // event target (i.e. any DOM element that the pointer is hovering while\n    // dragging). Ensuring that the `target` is always the `input` element\n    // allows consumers of `InputControl` (or any higher-level control) to\n    // check the input's validity by accessing `event.target.validity.valid`.\n    dragProps.event = {\n      ...dragProps.event,\n      target\n    };\n    if (!distance) {\n      return;\n    }\n    event.stopPropagation();\n\n    /**\n     * Quick return if no longer dragging.\n     * This prevents unnecessary value calculations.\n     */\n    if (!dragging) {\n      onDragEnd(dragProps);\n      dragEnd(dragProps);\n      return;\n    }\n    onDrag(dragProps);\n    drag(dragProps);\n    if (!isDragging) {\n      onDragStart(dragProps);\n      dragStart(dragProps);\n    }\n  }, {\n    axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',\n    threshold: dragThreshold,\n    enabled: isDragEnabled,\n    pointer: {\n      capture: false\n    }\n  });\n  const dragProps = isDragEnabled ? dragGestureProps() : {};\n  return /*#__PURE__*/_jsx(Input, {\n    ...props,\n    ...dragProps,\n    className: \"components-input-control__input\",\n    disabled: disabled,\n    dragCursor: dragCursor,\n    isDragging: isDragging,\n    id: id,\n    onBlur: handleOnBlur,\n    onChange: handleOnChange,\n    onKeyDown: withIgnoreIMEEvents(handleOnKeyDown),\n    ref: ref,\n    inputSize: size\n    // Fallback to `''` to avoid \"uncontrolled to controlled\" warning.\n    // See https://github.com/WordPress/gutenberg/pull/47250 for details.\n    ,\n    value: value ?? '',\n    type: type\n  });\n}\nconst ForwardedComponent = forwardRef(InputField);\nexport default ForwardedComponent;"],
+  "mappings": "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",
   "names": ["dragProps", "_jsx"]
 }

package/build/input-control/reducer/reducer.cjs CHANGED Viewed

@@ -163,19 +163,17 @@ function useInputControlStateReducer(stateReducer = import_state.initialStateRed
   });
   (0, import_element.useLayoutEffect)(() => {
     if (currentStateRef.current._event !== void 0 && state.value !== refPropsRef.current.value && !state.isDirty) {
-      var _state$value;
-      refPropsRef.current.onChangeHandler((_state$value = state.value) !== null && _state$value !== void 0 ? _state$value : "", {
+      refPropsRef.current.onChangeHandler(state.value ?? "", {
         event: currentStateRef.current._event
       });
     }
   }, [state.value, state.isDirty]);
   (0, import_element.useLayoutEffect)(() => {
     if (initialState.value !== currentStateRef.current.value && !currentStateRef.current.isDirty) {
-      var _initialState$value;
       dispatch({
         type: actions.CONTROL,
         payload: {
-          value: (_initialState$value = initialState.value) !== null && _initialState$value !== void 0 ? _initialState$value : ""
+          value: initialState.value ?? ""
         }
       });
     }

package/build/input-control/reducer/reducer.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/input-control/reducer/reducer.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useReducer, useLayoutEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { initialInputControlState, initialStateReducer } from './state';\nimport * as actions from './actions';\n/**\n * Prepares initialState for the reducer.\n *\n * @param initialState The initial state.\n * @return Prepared initialState for the reducer\n */\nfunction mergeInitialState(initialState = initialInputControlState) {\n  const {\n    value\n  } = initialState;\n  return {\n    ...initialInputControlState,\n    ...initialState,\n    initialValue: value\n  };\n}\n\n/**\n * Creates the base reducer which may be coupled to a specializing reducer.\n * As its final step, for all actions other than CONTROL, the base reducer\n * passes the state and action on through the specializing reducer. The\n * exception for CONTROL actions is because they represent controlled updates\n * from props and no case has yet presented for their specialization.\n *\n * @param composedStateReducers A reducer to specialize state changes.\n * @return The reducer.\n */\nfunction inputControlStateReducer(composedStateReducers) {\n  return (state, action) => {\n    const nextState = {\n      ...state\n    };\n    switch (action.type) {\n      /*\n       * Controlled updates\n       */\n      case actions.CONTROL:\n        nextState.value = action.payload.value;\n        nextState.isDirty = false;\n        nextState._event = undefined;\n        // Returns immediately to avoid invoking additional reducers.\n        return nextState;\n\n      /**\n       * Keyboard events\n       */\n      case actions.PRESS_UP:\n        nextState.isDirty = false;\n        break;\n      case actions.PRESS_DOWN:\n        nextState.isDirty = false;\n        break;\n\n      /**\n       * Drag events\n       */\n      case actions.DRAG_START:\n        nextState.isDragging = true;\n        break;\n      case actions.DRAG_END:\n        nextState.isDragging = false;\n        break;\n\n      /**\n       * Input events\n       */\n      case actions.CHANGE:\n        nextState.error = null;\n        nextState.value = action.payload.value;\n        if (state.isPressEnterToChange) {\n          nextState.isDirty = true;\n        }\n        break;\n      case actions.COMMIT:\n        nextState.value = action.payload.value;\n        nextState.isDirty = false;\n        break;\n      case actions.RESET:\n        nextState.error = null;\n        nextState.isDirty = false;\n        nextState.value = action.payload.value || state.initialValue;\n        break;\n\n      /**\n       * Validation\n       */\n      case actions.INVALIDATE:\n        nextState.error = action.payload.error;\n        break;\n    }\n    nextState._event = action.payload.event;\n\n    /**\n     * Send the nextState + action to the composedReducers via\n     * this \"bridge\" mechanism. This allows external stateReducers\n     * to hook into actions, and modify state if needed.\n     */\n    return composedStateReducers(nextState, action);\n  };\n}\n\n/**\n * A custom hook that connects and external stateReducer with an internal\n * reducer. This hook manages the internal state of InputControl.\n * However, by connecting an external stateReducer function, other\n * components can react to actions as well as modify state before it is\n * applied.\n *\n * This technique uses the \"stateReducer\" design pattern:\n * https://kentcdodds.com/blog/the-state-reducer-pattern/\n *\n * @param stateReducer    An external state reducer.\n * @param initialState    The initial state for the reducer.\n * @param onChangeHandler A handler for the onChange event.\n * @return State, dispatch, and a collection of actions.\n */\nexport function useInputControlStateReducer(stateReducer = initialStateReducer, initialState = initialInputControlState, onChangeHandler) {\n  const [state, dispatch] = useReducer(inputControlStateReducer(stateReducer), mergeInitialState(initialState));\n  const createChangeEvent = type => (nextValue, event) => {\n    dispatch({\n      type,\n      payload: {\n        value: nextValue,\n        event\n      }\n    });\n  };\n  const createKeyEvent = type => event => {\n    dispatch({\n      type,\n      payload: {\n        event\n      }\n    });\n  };\n  const createDragEvent = type => payload => {\n    dispatch({\n      type,\n      payload\n    });\n  };\n\n  /**\n   * Actions for the reducer\n   */\n  const change = createChangeEvent(actions.CHANGE);\n  const invalidate = (error, event) => dispatch({\n    type: actions.INVALIDATE,\n    payload: {\n      error,\n      event\n    }\n  });\n  const reset = createChangeEvent(actions.RESET);\n  const commit = createChangeEvent(actions.COMMIT);\n  const dragStart = createDragEvent(actions.DRAG_START);\n  const drag = createDragEvent(actions.DRAG);\n  const dragEnd = createDragEvent(actions.DRAG_END);\n  const pressUp = createKeyEvent(actions.PRESS_UP);\n  const pressDown = createKeyEvent(actions.PRESS_DOWN);\n  const pressEnter = createKeyEvent(actions.PRESS_ENTER);\n  const currentStateRef = useRef(state);\n  const refPropsRef = useRef({\n    value: initialState.value,\n    onChangeHandler\n  });\n\n  // Freshens refs to props and state so that subsequent effects have access\n  // to their latest values without their changes causing effect runs.\n  useLayoutEffect(() => {\n    currentStateRef.current = state;\n    refPropsRef.current = {\n      value: initialState.value,\n      onChangeHandler\n    };\n  });\n\n  // Propagates the latest state through onChange.\n  useLayoutEffect(() => {\n    if (currentStateRef.current._event !== undefined && state.value !== refPropsRef.current.value && !state.isDirty) {\n      var _state$value;\n      refPropsRef.current.onChangeHandler((_state$value = state.value) !== null && _state$value !== void 0 ? _state$value : '', {\n        event: currentStateRef.current._event\n      });\n    }\n  }, [state.value, state.isDirty]);\n\n  // Updates the state from props.\n  useLayoutEffect(() => {\n    if (initialState.value !== currentStateRef.current.value && !currentStateRef.current.isDirty) {\n      var _initialState$value;\n      dispatch({\n        type: actions.CONTROL,\n        payload: {\n          value: (_initialState$value = initialState.value) !== null && _initialState$value !== void 0 ? _initialState$value : ''\n        }\n      });\n    }\n  }, [initialState.value]);\n  return {\n    change,\n    commit,\n    dispatch,\n    drag,\n    dragEnd,\n    dragStart,\n    invalidate,\n    pressDown,\n    pressEnter,\n    pressUp,\n    reset,\n    state\n  };\n}"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * WordPress dependencies\n */\nimport { useReducer, useLayoutEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport { initialInputControlState, initialStateReducer } from './state';\nimport * as actions from './actions';\n/**\n * Prepares initialState for the reducer.\n *\n * @param initialState The initial state.\n * @return Prepared initialState for the reducer\n */\nfunction mergeInitialState(initialState = initialInputControlState) {\n  const {\n    value\n  } = initialState;\n  return {\n    ...initialInputControlState,\n    ...initialState,\n    initialValue: value\n  };\n}\n\n/**\n * Creates the base reducer which may be coupled to a specializing reducer.\n * As its final step, for all actions other than CONTROL, the base reducer\n * passes the state and action on through the specializing reducer. The\n * exception for CONTROL actions is because they represent controlled updates\n * from props and no case has yet presented for their specialization.\n *\n * @param composedStateReducers A reducer to specialize state changes.\n * @return The reducer.\n */\nfunction inputControlStateReducer(composedStateReducers) {\n  return (state, action) => {\n    const nextState = {\n      ...state\n    };\n    switch (action.type) {\n      /*\n       * Controlled updates\n       */\n      case actions.CONTROL:\n        nextState.value = action.payload.value;\n        nextState.isDirty = false;\n        nextState._event = undefined;\n        // Returns immediately to avoid invoking additional reducers.\n        return nextState;\n\n      /**\n       * Keyboard events\n       */\n      case actions.PRESS_UP:\n        nextState.isDirty = false;\n        break;\n      case actions.PRESS_DOWN:\n        nextState.isDirty = false;\n        break;\n\n      /**\n       * Drag events\n       */\n      case actions.DRAG_START:\n        nextState.isDragging = true;\n        break;\n      case actions.DRAG_END:\n        nextState.isDragging = false;\n        break;\n\n      /**\n       * Input events\n       */\n      case actions.CHANGE:\n        nextState.error = null;\n        nextState.value = action.payload.value;\n        if (state.isPressEnterToChange) {\n          nextState.isDirty = true;\n        }\n        break;\n      case actions.COMMIT:\n        nextState.value = action.payload.value;\n        nextState.isDirty = false;\n        break;\n      case actions.RESET:\n        nextState.error = null;\n        nextState.isDirty = false;\n        nextState.value = action.payload.value || state.initialValue;\n        break;\n\n      /**\n       * Validation\n       */\n      case actions.INVALIDATE:\n        nextState.error = action.payload.error;\n        break;\n    }\n    nextState._event = action.payload.event;\n\n    /**\n     * Send the nextState + action to the composedReducers via\n     * this \"bridge\" mechanism. This allows external stateReducers\n     * to hook into actions, and modify state if needed.\n     */\n    return composedStateReducers(nextState, action);\n  };\n}\n\n/**\n * A custom hook that connects and external stateReducer with an internal\n * reducer. This hook manages the internal state of InputControl.\n * However, by connecting an external stateReducer function, other\n * components can react to actions as well as modify state before it is\n * applied.\n *\n * This technique uses the \"stateReducer\" design pattern:\n * https://kentcdodds.com/blog/the-state-reducer-pattern/\n *\n * @param stateReducer    An external state reducer.\n * @param initialState    The initial state for the reducer.\n * @param onChangeHandler A handler for the onChange event.\n * @return State, dispatch, and a collection of actions.\n */\nexport function useInputControlStateReducer(stateReducer = initialStateReducer, initialState = initialInputControlState, onChangeHandler) {\n  const [state, dispatch] = useReducer(inputControlStateReducer(stateReducer), mergeInitialState(initialState));\n  const createChangeEvent = type => (nextValue, event) => {\n    dispatch({\n      type,\n      payload: {\n        value: nextValue,\n        event\n      }\n    });\n  };\n  const createKeyEvent = type => event => {\n    dispatch({\n      type,\n      payload: {\n        event\n      }\n    });\n  };\n  const createDragEvent = type => payload => {\n    dispatch({\n      type,\n      payload\n    });\n  };\n\n  /**\n   * Actions for the reducer\n   */\n  const change = createChangeEvent(actions.CHANGE);\n  const invalidate = (error, event) => dispatch({\n    type: actions.INVALIDATE,\n    payload: {\n      error,\n      event\n    }\n  });\n  const reset = createChangeEvent(actions.RESET);\n  const commit = createChangeEvent(actions.COMMIT);\n  const dragStart = createDragEvent(actions.DRAG_START);\n  const drag = createDragEvent(actions.DRAG);\n  const dragEnd = createDragEvent(actions.DRAG_END);\n  const pressUp = createKeyEvent(actions.PRESS_UP);\n  const pressDown = createKeyEvent(actions.PRESS_DOWN);\n  const pressEnter = createKeyEvent(actions.PRESS_ENTER);\n  const currentStateRef = useRef(state);\n  const refPropsRef = useRef({\n    value: initialState.value,\n    onChangeHandler\n  });\n\n  // Freshens refs to props and state so that subsequent effects have access\n  // to their latest values without their changes causing effect runs.\n  useLayoutEffect(() => {\n    currentStateRef.current = state;\n    refPropsRef.current = {\n      value: initialState.value,\n      onChangeHandler\n    };\n  });\n\n  // Propagates the latest state through onChange.\n  useLayoutEffect(() => {\n    if (currentStateRef.current._event !== undefined && state.value !== refPropsRef.current.value && !state.isDirty) {\n      refPropsRef.current.onChangeHandler(state.value ?? '', {\n        event: currentStateRef.current._event\n      });\n    }\n  }, [state.value, state.isDirty]);\n\n  // Updates the state from props.\n  useLayoutEffect(() => {\n    if (initialState.value !== currentStateRef.current.value && !currentStateRef.current.isDirty) {\n      dispatch({\n        type: actions.CONTROL,\n        payload: {\n          value: initialState.value ?? ''\n        }\n      });\n    }\n  }, [initialState.value]);\n  return {\n    change,\n    commit,\n    dispatch,\n    drag,\n    dragEnd,\n    dragStart,\n    invalidate,\n    pressDown,\n    pressEnter,\n    pressUp,\n    reset,\n    state\n  };\n}"],
+  "mappings": "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",
   "names": []
 }

package/build/keyboard-shortcuts/index.cjs CHANGED Viewed

@@ -47,7 +47,7 @@ function KeyboardShortcuts({
   eventName
 }) {
   const target = (0, import_element.useRef)(null);
-  const element = Object.entries(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {}).map(([shortcut, callback]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KeyboardShortcut, {
+  const element = Object.entries(shortcuts ?? {}).map(([shortcut, callback]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KeyboardShortcut, {
     shortcut,
     callback,
     bindGlobal,

package/build/keyboard-shortcuts/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/keyboard-shortcuts/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef, Children } from '@wordpress/element';\nimport { useKeyboardShortcut } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction KeyboardShortcut({\n  target,\n  callback,\n  shortcut,\n  bindGlobal,\n  eventName\n}) {\n  useKeyboardShortcut(shortcut, callback, {\n    bindGlobal,\n    target,\n    eventName\n  });\n  return null;\n}\n\n/**\n * `KeyboardShortcuts` is a component which handles keyboard sequences during the lifetime of the rendering element.\n *\n * When passed children, it will capture key events which occur on or within the children. If no children are passed, events are captured on the document.\n *\n * It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyboard sequence bindings.\n *\n * ```jsx\n * import { KeyboardShortcuts } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyKeyboardShortcuts = () => {\n * \tconst [ isAllSelected, setIsAllSelected ] = useState( false );\n * \tconst selectAll = () => {\n * \t\tsetIsAllSelected( true );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t<KeyboardShortcuts\n * \t\t\t\tshortcuts={ {\n * \t\t\t\t\t'mod+a': selectAll,\n * \t\t\t\t} }\n * \t\t\t/>\n * \t\t\t[cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' }\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction KeyboardShortcuts({\n  children,\n  shortcuts,\n  bindGlobal,\n  eventName\n}) {\n  const target = useRef(null);\n  const element = Object.entries(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {}).map(([shortcut, callback]) => /*#__PURE__*/_jsx(KeyboardShortcut, {\n    shortcut: shortcut,\n    callback: callback,\n    bindGlobal: bindGlobal,\n    eventName: eventName,\n    target: target\n  }, shortcut));\n\n  // Render as non-visual if there are no children pressed. Keyboard\n  // events will be bound to the document instead.\n  if (!Children.count(children)) {\n    return /*#__PURE__*/_jsx(_Fragment, {\n      children: element\n    });\n  }\n  return /*#__PURE__*/_jsxs(\"div\", {\n    ref: target,\n    children: [element, children]\n  });\n}\nexport default KeyboardShortcuts;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAiC;AACjC,qBAAoC;AAKpC,yBAAkE;AAClE,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,0CAAoB,UAAU,UAAU;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAgCA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,aAAS,uBAAO,IAAI;AAC1B,QAAM,UAAU,OAAO,QAAQ,cAAc,QAAQ,cAAc,SAAS,YAAY,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,UAAU,QAAQ,MAAmB,uCAAAA,KAAK,kBAAkB;AAAA,IAC5J;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAAG,QAAQ,CAAC;AAIZ,MAAI,CAAC,wBAAS,MAAM,QAAQ,GAAG;AAC7B,WAAoB,uCAAAA,KAAK,mBAAAC,UAAW;AAAA,MAClC,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,SAAoB,uCAAAC,MAAM,OAAO;AAAA,IAC/B,KAAK;AAAA,IACL,UAAU,CAAC,SAAS,QAAQ;AAAA,EAC9B,CAAC;AACH;AACA,IAAO,6BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef, Children } from '@wordpress/element';\nimport { useKeyboardShortcut } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction KeyboardShortcut({\n  target,\n  callback,\n  shortcut,\n  bindGlobal,\n  eventName\n}) {\n  useKeyboardShortcut(shortcut, callback, {\n    bindGlobal,\n    target,\n    eventName\n  });\n  return null;\n}\n\n/**\n * `KeyboardShortcuts` is a component which handles keyboard sequences during the lifetime of the rendering element.\n *\n * When passed children, it will capture key events which occur on or within the children. If no children are passed, events are captured on the document.\n *\n * It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyboard sequence bindings.\n *\n * ```jsx\n * import { KeyboardShortcuts } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyKeyboardShortcuts = () => {\n * \tconst [ isAllSelected, setIsAllSelected ] = useState( false );\n * \tconst selectAll = () => {\n * \t\tsetIsAllSelected( true );\n * \t};\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t<KeyboardShortcuts\n * \t\t\t\tshortcuts={ {\n * \t\t\t\t\t'mod+a': selectAll,\n * \t\t\t\t} }\n * \t\t\t/>\n * \t\t\t[cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' }\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nfunction KeyboardShortcuts({\n  children,\n  shortcuts,\n  bindGlobal,\n  eventName\n}) {\n  const target = useRef(null);\n  const element = Object.entries(shortcuts ?? {}).map(([shortcut, callback]) => /*#__PURE__*/_jsx(KeyboardShortcut, {\n    shortcut: shortcut,\n    callback: callback,\n    bindGlobal: bindGlobal,\n    eventName: eventName,\n    target: target\n  }, shortcut));\n\n  // Render as non-visual if there are no children pressed. Keyboard\n  // events will be bound to the document instead.\n  if (!Children.count(children)) {\n    return /*#__PURE__*/_jsx(_Fragment, {\n      children: element\n    });\n  }\n  return /*#__PURE__*/_jsxs(\"div\", {\n    ref: target,\n    children: [element, children]\n  });\n}\nexport default KeyboardShortcuts;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAiC;AACjC,qBAAoC;AAKpC,yBAAkE;AAClE,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,0CAAoB,UAAU,UAAU;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAgCA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,aAAS,uBAAO,IAAI;AAC1B,QAAM,UAAU,OAAO,QAAQ,aAAa,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,UAAU,QAAQ,MAAmB,uCAAAA,KAAK,kBAAkB;AAAA,IAChH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAAG,QAAQ,CAAC;AAIZ,MAAI,CAAC,wBAAS,MAAM,QAAQ,GAAG;AAC7B,WAAoB,uCAAAA,KAAK,mBAAAC,UAAW;AAAA,MAClC,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AACA,SAAoB,uCAAAC,MAAM,OAAO;AAAA,IAC/B,KAAK;AAAA,IACL,UAAU,CAAC,SAAS,QAAQ;AAAA,EAC9B,CAAC;AACH;AACA,IAAO,6BAAQ;",
   "names": ["_jsx", "_Fragment", "_jsxs"]
 }

package/build/menu/index.cjs CHANGED Viewed

@@ -63,7 +63,7 @@ var UnconnectedMenu = (props) => {
   } = (0, import_context.useContextSystem)(props, "Menu");
   const parentContext = (0, import_element.useContext)(import_context2.Context);
   const rtl = (0, import_i18n.isRTL)();
-  let computedPlacement = placement !== null && placement !== void 0 ? placement : parentContext?.store ? "right-start" : "bottom-start";
+  let computedPlacement = placement ?? (parentContext?.store ? "right-start" : "bottom-start");
   if (rtl) {
     if (/right/.test(computedPlacement)) {
       computedPlacement = computedPlacement.replace("right", "left");

package/build/menu/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/menu/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo } from '@wordpress/element';\nimport { isRTL as isRTLFn } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnectWithoutRef } from '../context';\nimport { Context } from './context';\nimport { Item } from './item';\nimport { CheckboxItem } from './checkbox-item';\nimport { RadioItem } from './radio-item';\nimport { Group } from './group';\nimport { GroupLabel } from './group-label';\nimport { Separator } from './separator';\nimport { ItemLabel } from './item-label';\nimport { ItemHelpText } from './item-help-text';\nimport { TriggerButton } from './trigger-button';\nimport { SubmenuTriggerItem } from './submenu-trigger-item';\nimport { Popover } from './popover';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnconnectedMenu = props => {\n  const {\n    children,\n    defaultOpen = false,\n    open,\n    onOpenChange,\n    placement,\n    // From internal components context\n    variant\n  } = useContextSystem(props, 'Menu');\n  const parentContext = useContext(Context);\n  const rtl = isRTLFn();\n\n  // If an explicit value for the `placement` prop is not passed,\n  // apply a default placement of `bottom-start` for the root menu popover,\n  // and of `right-start` for nested menu popovers.\n  let computedPlacement = placement !== null && placement !== void 0 ? placement : parentContext?.store ? 'right-start' : 'bottom-start';\n  // Swap left/right in case of RTL direction\n  if (rtl) {\n    if (/right/.test(computedPlacement)) {\n      computedPlacement = computedPlacement.replace('right', 'left');\n    } else if (/left/.test(computedPlacement)) {\n      computedPlacement = computedPlacement.replace('left', 'right');\n    }\n  }\n  const menuStore = Ariakit.useMenuStore({\n    parent: parentContext?.store,\n    open,\n    defaultOpen,\n    placement: computedPlacement,\n    focusLoop: true,\n    setOpen(willBeOpen) {\n      onOpenChange?.(willBeOpen);\n    },\n    rtl\n  });\n  const contextValue = useMemo(() => ({\n    store: menuStore,\n    variant\n  }), [menuStore, variant]);\n  return /*#__PURE__*/_jsx(Context.Provider, {\n    value: contextValue,\n    children: children\n  });\n};\n\n/**\n * Menu is a collection of React components that combine to render\n * ARIA-compliant [menu](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) and\n * [menu button](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/) patterns.\n *\n * `Menu` itself is a wrapper component and context provider.\n * It is responsible for managing the state of the menu and its items, and for\n * rendering the `Menu.TriggerButton` (or the `Menu.SubmenuTriggerItem`)\n * component, and the `Menu.Popover` component.\n */\nexport const Menu = Object.assign(contextConnectWithoutRef(UnconnectedMenu, 'Menu'), {\n  Context: Object.assign(Context, {\n    displayName: 'Menu.Context'\n  }),\n  /**\n   * Renders a menu item inside the `Menu.Popover` or `Menu.Group` components.\n   *\n   * It can optionally contain one instance of the `Menu.ItemLabel` component\n   * and one instance of the `Menu.ItemHelpText` component.\n   */\n  Item: Object.assign(Item, {\n    displayName: 'Menu.Item'\n  }),\n  /**\n   * Renders a radio menu item inside the `Menu.Popover` or `Menu.Group`\n   * components.\n   *\n   * It can optionally contain one instance of the `Menu.ItemLabel` component\n   * and one instance of the `Menu.ItemHelpText` component.\n   */\n  RadioItem: Object.assign(RadioItem, {\n    displayName: 'Menu.RadioItem'\n  }),\n  /**\n   * Renders a checkbox menu item inside the `Menu.Popover` or `Menu.Group`\n   * components.\n   *\n   * It can optionally contain one instance of the `Menu.ItemLabel` component\n   * and one instance of the `Menu.ItemHelpText` component.\n   */\n  CheckboxItem: Object.assign(CheckboxItem, {\n    displayName: 'Menu.CheckboxItem'\n  }),\n  /**\n   * Renders a group for menu items.\n   *\n   * It should contain one instance of `Menu.GroupLabel` and one or more\n   * instances of `Menu.Item`, `Menu.RadioItem`, or `Menu.CheckboxItem`.\n   */\n  Group: Object.assign(Group, {\n    displayName: 'Menu.Group'\n  }),\n  /**\n   * Renders a label in a menu group.\n   *\n   * This component should be wrapped with `Menu.Group` so the\n   * `aria-labelledby` is correctly set on the group element.\n   */\n  GroupLabel: Object.assign(GroupLabel, {\n    displayName: 'Menu.GroupLabel'\n  }),\n  /**\n   * Renders a divider between menu items or menu groups.\n   */\n  Separator: Object.assign(Separator, {\n    displayName: 'Menu.Separator'\n  }),\n  /**\n   * Renders a menu item's label text. It should be wrapped with `Menu.Item`,\n   * `Menu.RadioItem`, or `Menu.CheckboxItem`.\n   */\n  ItemLabel: Object.assign(ItemLabel, {\n    displayName: 'Menu.ItemLabel'\n  }),\n  /**\n   * Renders a menu item's help text. It should be wrapped with `Menu.Item`,\n   * `Menu.RadioItem`, or `Menu.CheckboxItem`.\n   */\n  ItemHelpText: Object.assign(ItemHelpText, {\n    displayName: 'Menu.ItemHelpText'\n  }),\n  /**\n   * Renders a dropdown menu element that's controlled by a sibling\n   * `Menu.TriggerButton` component. It renders a popover and automatically\n   * focuses on items when the menu is shown.\n   *\n   * The only valid children of `Menu.Popover` are `Menu.Item`,\n   * `Menu.RadioItem`, `Menu.CheckboxItem`, `Menu.Group`, `Menu.Separator`,\n   * and `Menu` (for nested dropdown menus).\n   */\n  Popover: Object.assign(Popover, {\n    displayName: 'Menu.Popover'\n  }),\n  /**\n   * Renders a menu button that toggles the visibility of a sibling\n   * `Menu.Popover` component when clicked or when using arrow keys.\n   */\n  TriggerButton: Object.assign(TriggerButton, {\n    displayName: 'Menu.TriggerButton'\n  }),\n  /**\n   * Renders a menu item that toggles the visibility of a sibling\n   * `Menu.Popover` component when clicked or when using arrow keys.\n   *\n   * This component is used to create a nested dropdown menu.\n   */\n  SubmenuTriggerItem: Object.assign(SubmenuTriggerItem, {\n    displayName: 'Menu.SubmenuTriggerItem'\n  })\n});\nexport default Menu;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useMemo } from '@wordpress/element';\nimport { isRTL as isRTLFn } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnectWithoutRef } from '../context';\nimport { Context } from './context';\nimport { Item } from './item';\nimport { CheckboxItem } from './checkbox-item';\nimport { RadioItem } from './radio-item';\nimport { Group } from './group';\nimport { GroupLabel } from './group-label';\nimport { Separator } from './separator';\nimport { ItemLabel } from './item-label';\nimport { ItemHelpText } from './item-help-text';\nimport { TriggerButton } from './trigger-button';\nimport { SubmenuTriggerItem } from './submenu-trigger-item';\nimport { Popover } from './popover';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst UnconnectedMenu = props => {\n  const {\n    children,\n    defaultOpen = false,\n    open,\n    onOpenChange,\n    placement,\n    // From internal components context\n    variant\n  } = useContextSystem(props, 'Menu');\n  const parentContext = useContext(Context);\n  const rtl = isRTLFn();\n\n  // If an explicit value for the `placement` prop is not passed,\n  // apply a default placement of `bottom-start` for the root menu popover,\n  // and of `right-start` for nested menu popovers.\n  let computedPlacement = placement ?? (parentContext?.store ? 'right-start' : 'bottom-start');\n  // Swap left/right in case of RTL direction\n  if (rtl) {\n    if (/right/.test(computedPlacement)) {\n      computedPlacement = computedPlacement.replace('right', 'left');\n    } else if (/left/.test(computedPlacement)) {\n      computedPlacement = computedPlacement.replace('left', 'right');\n    }\n  }\n  const menuStore = Ariakit.useMenuStore({\n    parent: parentContext?.store,\n    open,\n    defaultOpen,\n    placement: computedPlacement,\n    focusLoop: true,\n    setOpen(willBeOpen) {\n      onOpenChange?.(willBeOpen);\n    },\n    rtl\n  });\n  const contextValue = useMemo(() => ({\n    store: menuStore,\n    variant\n  }), [menuStore, variant]);\n  return /*#__PURE__*/_jsx(Context.Provider, {\n    value: contextValue,\n    children: children\n  });\n};\n\n/**\n * Menu is a collection of React components that combine to render\n * ARIA-compliant [menu](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) and\n * [menu button](https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/) patterns.\n *\n * `Menu` itself is a wrapper component and context provider.\n * It is responsible for managing the state of the menu and its items, and for\n * rendering the `Menu.TriggerButton` (or the `Menu.SubmenuTriggerItem`)\n * component, and the `Menu.Popover` component.\n */\nexport const Menu = Object.assign(contextConnectWithoutRef(UnconnectedMenu, 'Menu'), {\n  Context: Object.assign(Context, {\n    displayName: 'Menu.Context'\n  }),\n  /**\n   * Renders a menu item inside the `Menu.Popover` or `Menu.Group` components.\n   *\n   * It can optionally contain one instance of the `Menu.ItemLabel` component\n   * and one instance of the `Menu.ItemHelpText` component.\n   */\n  Item: Object.assign(Item, {\n    displayName: 'Menu.Item'\n  }),\n  /**\n   * Renders a radio menu item inside the `Menu.Popover` or `Menu.Group`\n   * components.\n   *\n   * It can optionally contain one instance of the `Menu.ItemLabel` component\n   * and one instance of the `Menu.ItemHelpText` component.\n   */\n  RadioItem: Object.assign(RadioItem, {\n    displayName: 'Menu.RadioItem'\n  }),\n  /**\n   * Renders a checkbox menu item inside the `Menu.Popover` or `Menu.Group`\n   * components.\n   *\n   * It can optionally contain one instance of the `Menu.ItemLabel` component\n   * and one instance of the `Menu.ItemHelpText` component.\n   */\n  CheckboxItem: Object.assign(CheckboxItem, {\n    displayName: 'Menu.CheckboxItem'\n  }),\n  /**\n   * Renders a group for menu items.\n   *\n   * It should contain one instance of `Menu.GroupLabel` and one or more\n   * instances of `Menu.Item`, `Menu.RadioItem`, or `Menu.CheckboxItem`.\n   */\n  Group: Object.assign(Group, {\n    displayName: 'Menu.Group'\n  }),\n  /**\n   * Renders a label in a menu group.\n   *\n   * This component should be wrapped with `Menu.Group` so the\n   * `aria-labelledby` is correctly set on the group element.\n   */\n  GroupLabel: Object.assign(GroupLabel, {\n    displayName: 'Menu.GroupLabel'\n  }),\n  /**\n   * Renders a divider between menu items or menu groups.\n   */\n  Separator: Object.assign(Separator, {\n    displayName: 'Menu.Separator'\n  }),\n  /**\n   * Renders a menu item's label text. It should be wrapped with `Menu.Item`,\n   * `Menu.RadioItem`, or `Menu.CheckboxItem`.\n   */\n  ItemLabel: Object.assign(ItemLabel, {\n    displayName: 'Menu.ItemLabel'\n  }),\n  /**\n   * Renders a menu item's help text. It should be wrapped with `Menu.Item`,\n   * `Menu.RadioItem`, or `Menu.CheckboxItem`.\n   */\n  ItemHelpText: Object.assign(ItemHelpText, {\n    displayName: 'Menu.ItemHelpText'\n  }),\n  /**\n   * Renders a dropdown menu element that's controlled by a sibling\n   * `Menu.TriggerButton` component. It renders a popover and automatically\n   * focuses on items when the menu is shown.\n   *\n   * The only valid children of `Menu.Popover` are `Menu.Item`,\n   * `Menu.RadioItem`, `Menu.CheckboxItem`, `Menu.Group`, `Menu.Separator`,\n   * and `Menu` (for nested dropdown menus).\n   */\n  Popover: Object.assign(Popover, {\n    displayName: 'Menu.Popover'\n  }),\n  /**\n   * Renders a menu button that toggles the visibility of a sibling\n   * `Menu.Popover` component when clicked or when using arrow keys.\n   */\n  TriggerButton: Object.assign(TriggerButton, {\n    displayName: 'Menu.TriggerButton'\n  }),\n  /**\n   * Renders a menu item that toggles the visibility of a sibling\n   * `Menu.Popover` component when clicked or when using arrow keys.\n   *\n   * This component is used to create a nested dropdown menu.\n   */\n  SubmenuTriggerItem: Object.assign(SubmenuTriggerItem, {\n    displayName: 'Menu.SubmenuTriggerItem'\n  })\n});\nexport default Menu;"],
+  "mappings": "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",
   "names": ["import_context", "isRTLFn", "_jsx"]
 }

package/build/menu/item.cjs CHANGED Viewed

@@ -50,7 +50,7 @@ var Item2 = (0, import_element.forwardRef)(function Item3({
   if (!menuContext?.store) {
     throw new Error("Menu.Item can only be rendered inside a Menu component");
   }
-  const computedStore = store !== null && store !== void 0 ? store : menuContext.store;
+  const computedStore = store ?? menuContext.store;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Styled.Item, {
     ref,
     ...props,

package/build/menu/item.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/menu/item.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport * as Styled from './styles';\nimport { Context } from './context';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const Item = forwardRef(function Item({\n  prefix,\n  suffix,\n  children,\n  disabled = false,\n  hideOnClick = true,\n  store,\n  ...props\n}, ref) {\n  const menuContext = useContext(Context);\n  if (!menuContext?.store) {\n    throw new Error('Menu.Item can only be rendered inside a Menu component');\n  }\n\n  // In most cases, the menu store will be retrieved from context (ie. the store\n  // created by the top-level menu component). But in rare cases (ie.\n  // `Menu.SubmenuTriggerItem`), the context store wouldn't be correct. This is\n  // why the component accepts a `store` prop to override the context store.\n  const computedStore = store !== null && store !== void 0 ? store : menuContext.store;\n  return /*#__PURE__*/_jsxs(Styled.Item, {\n    ref: ref,\n    ...props,\n    accessibleWhenDisabled: true,\n    disabled: disabled,\n    hideOnClick: hideOnClick,\n    store: computedStore,\n    children: [/*#__PURE__*/_jsx(Styled.ItemPrefixWrapper, {\n      children: prefix\n    }), /*#__PURE__*/_jsxs(Styled.ItemContentWrapper, {\n      children: [/*#__PURE__*/_jsx(Styled.ItemChildrenWrapper, {\n        children: children\n      }), suffix && /*#__PURE__*/_jsx(Styled.ItemSuffixWrapper, {\n        children: suffix\n      })]\n    })]\n  });\n});"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,cAAAA;AAAA;AAAA;AAGA,qBAAuC;AAMvC,aAAwB;AACxB,qBAAwB;AACxB,yBAA2C;AACpC,IAAMA,YAAO,2BAAW,SAASA,MAAK;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,kBAAc,2BAAW,sBAAO;AACtC,MAAI,CAAC,aAAa,OAAO;AACvB,UAAM,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AAMA,QAAM,gBAAgB,UAAU,QAAQ,UAAU,SAAS,QAAQ,YAAY;AAC/E,SAAoB,uCAAAC,MAAa,aAAM;AAAA,IACrC;AAAA,IACA,GAAG;AAAA,IACH,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,CAAc,uCAAAC,KAAY,0BAAmB;AAAA,MACrD,UAAU;AAAA,IACZ,CAAC,GAAgB,uCAAAD,MAAa,2BAAoB;AAAA,MAChD,UAAU,CAAc,uCAAAC,KAAY,4BAAqB;AAAA,QACvD;AAAA,MACF,CAAC,GAAG,UAAuB,uCAAAA,KAAY,0BAAmB;AAAA,QACxD,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH,CAAC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\n\nimport * as Styled from './styles';\nimport { Context } from './context';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const Item = forwardRef(function Item({\n  prefix,\n  suffix,\n  children,\n  disabled = false,\n  hideOnClick = true,\n  store,\n  ...props\n}, ref) {\n  const menuContext = useContext(Context);\n  if (!menuContext?.store) {\n    throw new Error('Menu.Item can only be rendered inside a Menu component');\n  }\n\n  // In most cases, the menu store will be retrieved from context (ie. the store\n  // created by the top-level menu component). But in rare cases (ie.\n  // `Menu.SubmenuTriggerItem`), the context store wouldn't be correct. This is\n  // why the component accepts a `store` prop to override the context store.\n  const computedStore = store ?? menuContext.store;\n  return /*#__PURE__*/_jsxs(Styled.Item, {\n    ref: ref,\n    ...props,\n    accessibleWhenDisabled: true,\n    disabled: disabled,\n    hideOnClick: hideOnClick,\n    store: computedStore,\n    children: [/*#__PURE__*/_jsx(Styled.ItemPrefixWrapper, {\n      children: prefix\n    }), /*#__PURE__*/_jsxs(Styled.ItemContentWrapper, {\n      children: [/*#__PURE__*/_jsx(Styled.ItemChildrenWrapper, {\n        children: children\n      }), suffix && /*#__PURE__*/_jsx(Styled.ItemSuffixWrapper, {\n        children: suffix\n      })]\n    })]\n  });\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,cAAAA;AAAA;AAAA;AAGA,qBAAuC;AAMvC,aAAwB;AACxB,qBAAwB;AACxB,yBAA2C;AACpC,IAAMA,YAAO,2BAAW,SAASA,MAAK;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,kBAAc,2BAAW,sBAAO;AACtC,MAAI,CAAC,aAAa,OAAO;AACvB,UAAM,IAAI,MAAM,wDAAwD;AAAA,EAC1E;AAMA,QAAM,gBAAgB,SAAS,YAAY;AAC3C,SAAoB,uCAAAC,MAAa,aAAM;AAAA,IACrC;AAAA,IACA,GAAG;AAAA,IACH,wBAAwB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU,CAAc,uCAAAC,KAAY,0BAAmB;AAAA,MACrD,UAAU;AAAA,IACZ,CAAC,GAAgB,uCAAAD,MAAa,2BAAoB;AAAA,MAChD,UAAU,CAAc,uCAAAC,KAAY,4BAAqB;AAAA,QACvD;AAAA,MACF,CAAC,GAAG,UAAuB,uCAAAA,KAAY,0BAAmB;AAAA,QACxD,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH,CAAC;",
   "names": ["Item", "_jsxs", "_jsx"]
 }

package/build/menu/popover.cjs CHANGED Viewed

@@ -66,8 +66,8 @@ var Popover = (0, import_element.forwardRef)(function Popover2({
     ref,
     modal,
     store: menuContext.store,
-    gutter: gutter !== null && gutter !== void 0 ? gutter : menuContext.store.parent ? 0 : 8,
-    shift: shift !== null && shift !== void 0 ? shift : menuContext.store.parent ? -4 : 0,
+    gutter: gutter ?? (menuContext.store.parent ? 0 : 8),
+    shift: shift ?? (menuContext.store.parent ? -4 : 0),
     hideOnHoverOutside: false,
     "data-side": appliedPlacementSide,
     "data-submenu": !!menuContext.store.parent || void 0,