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

@wordpress/components 32.0.1-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 (1188) hide show

package/build/flex/flex/hook.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/flex/flex/hook.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\n\nimport { useContextSystem } from '../../context';\nimport { useResponsiveValue } from '../../utils/use-responsive-value';\nimport { space } from '../../utils/space';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils';\nfunction useDeprecatedProps(props) {\n  const {\n    isReversed,\n    ...otherProps\n  } = props;\n  if (typeof isReversed !== 'undefined') {\n    deprecated('Flex isReversed', {\n      alternative: 'Flex direction=\"row-reverse\" or \"column-reverse\"',\n      since: '5.9'\n    });\n    return {\n      ...otherProps,\n      direction: isReversed ? 'row-reverse' : 'row'\n    };\n  }\n  return otherProps;\n}\nexport function useFlex(props) {\n  const {\n    align,\n    className,\n    direction: directionProp = 'row',\n    expanded = true,\n    gap = 2,\n    justify = 'space-between',\n    wrap = false,\n    ...otherProps\n  } = useContextSystem(useDeprecatedProps(props), 'Flex');\n  const directionAsArray = Array.isArray(directionProp) ? directionProp : [directionProp];\n  const direction = useResponsiveValue(directionAsArray);\n  const isColumn = typeof direction === 'string' && !!direction.includes('column');\n  const cx = useCx();\n  const classes = useMemo(() => {\n    const base = /*#__PURE__*/css({\n      alignItems: align !== null && align !== void 0 ? align : isColumn ? 'normal' : 'center',\n      flexDirection: direction,\n      flexWrap: wrap ? 'wrap' : undefined,\n      gap: space(gap),\n      justifyContent: justify,\n      height: isColumn && expanded ? '100%' : undefined,\n      width: !isColumn && expanded ? '100%' : undefined\n    }, process.env.NODE_ENV === \"production\" ? \"\" : \";label:base;\", process.env.NODE_ENV === \"production\" ? \"\" : \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0VlIiwiZmlsZSI6Imhvb2sudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCBkZXByZWNhdGVkIGZyb20gJ0B3b3JkcHJlc3MvZGVwcmVjYXRlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB0eXBlIHsgV29yZFByZXNzQ29tcG9uZW50UHJvcHMgfSBmcm9tICcuLi8uLi9jb250ZXh0JztcbmltcG9ydCB7IHVzZUNvbnRleHRTeXN0ZW0gfSBmcm9tICcuLi8uLi9jb250ZXh0JztcbmltcG9ydCB7IHVzZVJlc3BvbnNpdmVWYWx1ZSB9IGZyb20gJy4uLy4uL3V0aWxzL3VzZS1yZXNwb25zaXZlLXZhbHVlJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdXRpbHMvc3BhY2UnO1xuaW1wb3J0ICogYXMgc3R5bGVzIGZyb20gJy4uL3N0eWxlcyc7XG5pbXBvcnQgeyB1c2VDeCB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgRmxleFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5mdW5jdGlvbiB1c2VEZXByZWNhdGVkUHJvcHMoXG5cdHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgRmxleFByb3BzLCAnZGl2JyA+XG4pOiBPbWl0PCB0eXBlb2YgcHJvcHMsICdpc1JldmVyc2VkJyA+IHtcblx0Y29uc3QgeyBpc1JldmVyc2VkLCAuLi5vdGhlclByb3BzIH0gPSBwcm9wcztcblxuXHRpZiAoIHR5cGVvZiBpc1JldmVyc2VkICE9PSAndW5kZWZpbmVkJyApIHtcblx0XHRkZXByZWNhdGVkKCAnRmxleCBpc1JldmVyc2VkJywge1xuXHRcdFx0YWx0ZXJuYXRpdmU6ICdGbGV4IGRpcmVjdGlvbj1cInJvdy1yZXZlcnNlXCIgb3IgXCJjb2x1bW4tcmV2ZXJzZVwiJyxcblx0XHRcdHNpbmNlOiAnNS45Jyxcblx0XHR9ICk7XG5cdFx0cmV0dXJuIHtcblx0XHRcdC4uLm90aGVyUHJvcHMsXG5cdFx0XHRkaXJlY3Rpb246IGlzUmV2ZXJzZWQgPyAncm93LXJldmVyc2UnIDogJ3JvdycsXG5cdFx0fTtcblx0fVxuXG5cdHJldHVybiBvdGhlclByb3BzO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gdXNlRmxleCggcHJvcHM6IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBGbGV4UHJvcHMsICdkaXYnID4gKSB7XG5cdGNvbnN0IHtcblx0XHRhbGlnbixcblx0XHRjbGFzc05hbWUsXG5cdFx0ZGlyZWN0aW9uOiBkaXJlY3Rpb25Qcm9wID0gJ3JvdycsXG5cdFx0ZXhwYW5kZWQgPSB0cnVlLFxuXHRcdGdhcCA9IDIsXG5cdFx0anVzdGlmeSA9ICdzcGFjZS1iZXR3ZWVuJyxcblx0XHR3cmFwID0gZmFsc2UsXG5cdFx0Li4ub3RoZXJQcm9wc1xuXHR9ID0gdXNlQ29udGV4dFN5c3RlbSggdXNlRGVwcmVjYXRlZFByb3BzKCBwcm9wcyApLCAnRmxleCcgKTtcblxuXHRjb25zdCBkaXJlY3Rpb25Bc0FycmF5ID0gQXJyYXkuaXNBcnJheSggZGlyZWN0aW9uUHJvcCApXG5cdFx0PyBkaXJlY3Rpb25Qcm9wXG5cdFx0OiBbIGRpcmVjdGlvblByb3AgXTtcblx0Y29uc3QgZGlyZWN0aW9uID0gdXNlUmVzcG9uc2l2ZVZhbHVlKCBkaXJlY3Rpb25Bc0FycmF5ICk7XG5cblx0Y29uc3QgaXNDb2x1bW4gPVxuXHRcdHR5cGVvZiBkaXJlY3Rpb24gPT09ICdzdHJpbmcnICYmICEhIGRpcmVjdGlvbi5pbmNsdWRlcyggJ2NvbHVtbicgKTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cblx0Y29uc3QgY2xhc3NlcyA9IHVzZU1lbW8oICgpID0+IHtcblx0XHRjb25zdCBiYXNlID0gY3NzKCB7XG5cdFx0XHRhbGlnbkl0ZW1zOiBhbGlnbiA/PyAoIGlzQ29sdW1uID8gJ25vcm1hbCcgOiAnY2VudGVyJyApLFxuXHRcdFx0ZmxleERpcmVjdGlvbjogZGlyZWN0aW9uLFxuXHRcdFx0ZmxleFdyYXA6IHdyYXAgPyAnd3JhcCcgOiB1bmRlZmluZWQsXG5cdFx0XHRnYXA6IHNwYWNlKCBnYXAgKSxcblx0XHRcdGp1c3RpZnlDb250ZW50OiBqdXN0aWZ5LFxuXHRcdFx0aGVpZ2h0OiBpc0NvbHVtbiAmJiBleHBhbmRlZCA/ICcxMDAlJyA6IHVuZGVmaW5lZCxcblx0XHRcdHdpZHRoOiAhIGlzQ29sdW1uICYmIGV4cGFuZGVkID8gJzEwMCUnIDogdW5kZWZpbmVkLFxuXHRcdH0gKTtcblxuXHRcdHJldHVybiBjeChcblx0XHRcdHN0eWxlcy5GbGV4LFxuXHRcdFx0YmFzZSxcblx0XHRcdGlzQ29sdW1uID8gc3R5bGVzLkl0ZW1zQ29sdW1uIDogc3R5bGVzLkl0ZW1zUm93LFxuXHRcdFx0Y2xhc3NOYW1lXG5cdFx0KTtcblx0fSwgW1xuXHRcdGFsaWduLFxuXHRcdGNsYXNzTmFtZSxcblx0XHRjeCxcblx0XHRkaXJlY3Rpb24sXG5cdFx0ZXhwYW5kZWQsXG5cdFx0Z2FwLFxuXHRcdGlzQ29sdW1uLFxuXHRcdGp1c3RpZnksXG5cdFx0d3JhcCxcblx0XSApO1xuXG5cdHJldHVybiB7IC4uLm90aGVyUHJvcHMsIGNsYXNzTmFtZTogY2xhc3NlcywgaXNDb2x1bW4gfTtcbn1cbiJdfQ== */\");\n    return cx(styles.Flex, base, isColumn ? styles.ItemsColumn : styles.ItemsRow, className);\n  }, [align, className, cx, direction, expanded, gap, isColumn, justify, wrap]);\n  return {\n    ...otherProps,\n    className: classes,\n    isColumn\n  };\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAoB;AAKpB,qBAAwB;AACxB,wBAAuB;AAMvB,qBAAiC;AACjC,kCAAmC;AACnC,mBAAsB;AACtB,aAAwB;AACxB,mBAAsB;AACtB,SAAS,mBAAmB,OAAO;AACjC,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,MAAI,OAAO,eAAe,aAAa;AACrC,0BAAAA,SAAW,mBAAmB;AAAA,MAC5B,aAAa;AAAA,MACb,OAAO;AAAA,IACT,CAAC;AACD,WAAO;AAAA,MACL,GAAG;AAAA,MACH,WAAW,aAAa,gBAAgB;AAAA,IAC1C;AAAA,EACF;AACA,SAAO;AACT;AACO,SAAS,QAAQ,OAAO;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW,gBAAgB;AAAA,IAC3B,WAAW;AAAA,IACX,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAG;AAAA,EACL,QAAI,iCAAiB,mBAAmB,KAAK,GAAG,MAAM;AACtD,QAAM,mBAAmB,MAAM,QAAQ,aAAa,IAAI,gBAAgB,CAAC,aAAa;AACtF,QAAM,gBAAY,gDAAmB,gBAAgB;AACrD,QAAM,WAAW,OAAO,cAAc,YAAY,CAAC,CAAC,UAAU,SAAS,QAAQ;AAC/E,QAAM,SAAK,oBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM;AAC5B,UAAM,OAAoB,sCAAI;AAAA,MAC5B,YAAY,UAAU,QAAQ,UAAU,SAAS,QAAQ,WAAW,WAAW;AAAA,MAC/E,eAAe;AAAA,MACf,UAAU,OAAO,SAAS;AAAA,MAC1B,SAAK,oBAAM,GAAG;AAAA,MACd,gBAAgB;AAAA,MAChB,QAAQ,YAAY,WAAW,SAAS;AAAA,MACxC,OAAO,CAAC,YAAY,WAAW,SAAS;AAAA,IAC1C,GAAG,QAAQ,IAAI,aAAa,eAAe,KAAK,gBAAgB,QAAQ,IAAI,aAAa,eAAe,KAAK,i4GAAi4G;AAC9+G,WAAO,GAAU,aAAM,MAAM,WAAkB,qBAAqB,iBAAU,SAAS;AAAA,EACzF,GAAG,CAAC,OAAO,WAAW,IAAI,WAAW,UAAU,KAAK,UAAU,SAAS,IAAI,CAAC;AAC5E,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,IACX;AAAA,EACF;AACF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\n\nimport { useContextSystem } from '../../context';\nimport { useResponsiveValue } from '../../utils/use-responsive-value';\nimport { space } from '../../utils/space';\nimport * as styles from '../styles';\nimport { useCx } from '../../utils';\nfunction useDeprecatedProps(props) {\n  const {\n    isReversed,\n    ...otherProps\n  } = props;\n  if (typeof isReversed !== 'undefined') {\n    deprecated('Flex isReversed', {\n      alternative: 'Flex direction=\"row-reverse\" or \"column-reverse\"',\n      since: '5.9'\n    });\n    return {\n      ...otherProps,\n      direction: isReversed ? 'row-reverse' : 'row'\n    };\n  }\n  return otherProps;\n}\nexport function useFlex(props) {\n  const {\n    align,\n    className,\n    direction: directionProp = 'row',\n    expanded = true,\n    gap = 2,\n    justify = 'space-between',\n    wrap = false,\n    ...otherProps\n  } = useContextSystem(useDeprecatedProps(props), 'Flex');\n  const directionAsArray = Array.isArray(directionProp) ? directionProp : [directionProp];\n  const direction = useResponsiveValue(directionAsArray);\n  const isColumn = typeof direction === 'string' && !!direction.includes('column');\n  const cx = useCx();\n  const classes = useMemo(() => {\n    const base = /*#__PURE__*/css({\n      alignItems: align ?? (isColumn ? 'normal' : 'center'),\n      flexDirection: direction,\n      flexWrap: wrap ? 'wrap' : undefined,\n      gap: space(gap),\n      justifyContent: justify,\n      height: isColumn && expanded ? '100%' : undefined,\n      width: !isColumn && expanded ? '100%' : undefined\n    }, process.env.NODE_ENV === \"production\" ? \"\" : \";label:base;\", process.env.NODE_ENV === \"production\" ? \"\" : \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImhvb2sudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0VlIiwiZmlsZSI6Imhvb2sudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCBkZXByZWNhdGVkIGZyb20gJ0B3b3JkcHJlc3MvZGVwcmVjYXRlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB0eXBlIHsgV29yZFByZXNzQ29tcG9uZW50UHJvcHMgfSBmcm9tICcuLi8uLi9jb250ZXh0JztcbmltcG9ydCB7IHVzZUNvbnRleHRTeXN0ZW0gfSBmcm9tICcuLi8uLi9jb250ZXh0JztcbmltcG9ydCB7IHVzZVJlc3BvbnNpdmVWYWx1ZSB9IGZyb20gJy4uLy4uL3V0aWxzL3VzZS1yZXNwb25zaXZlLXZhbHVlJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdXRpbHMvc3BhY2UnO1xuaW1wb3J0ICogYXMgc3R5bGVzIGZyb20gJy4uL3N0eWxlcyc7XG5pbXBvcnQgeyB1c2VDeCB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgRmxleFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5mdW5jdGlvbiB1c2VEZXByZWNhdGVkUHJvcHMoXG5cdHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgRmxleFByb3BzLCAnZGl2JyA+XG4pOiBPbWl0PCB0eXBlb2YgcHJvcHMsICdpc1JldmVyc2VkJyA+IHtcblx0Y29uc3QgeyBpc1JldmVyc2VkLCAuLi5vdGhlclByb3BzIH0gPSBwcm9wcztcblxuXHRpZiAoIHR5cGVvZiBpc1JldmVyc2VkICE9PSAndW5kZWZpbmVkJyApIHtcblx0XHRkZXByZWNhdGVkKCAnRmxleCBpc1JldmVyc2VkJywge1xuXHRcdFx0YWx0ZXJuYXRpdmU6ICdGbGV4IGRpcmVjdGlvbj1cInJvdy1yZXZlcnNlXCIgb3IgXCJjb2x1bW4tcmV2ZXJzZVwiJyxcblx0XHRcdHNpbmNlOiAnNS45Jyxcblx0XHR9ICk7XG5cdFx0cmV0dXJuIHtcblx0XHRcdC4uLm90aGVyUHJvcHMsXG5cdFx0XHRkaXJlY3Rpb246IGlzUmV2ZXJzZWQgPyAncm93LXJldmVyc2UnIDogJ3JvdycsXG5cdFx0fTtcblx0fVxuXG5cdHJldHVybiBvdGhlclByb3BzO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gdXNlRmxleCggcHJvcHM6IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBGbGV4UHJvcHMsICdkaXYnID4gKSB7XG5cdGNvbnN0IHtcblx0XHRhbGlnbixcblx0XHRjbGFzc05hbWUsXG5cdFx0ZGlyZWN0aW9uOiBkaXJlY3Rpb25Qcm9wID0gJ3JvdycsXG5cdFx0ZXhwYW5kZWQgPSB0cnVlLFxuXHRcdGdhcCA9IDIsXG5cdFx0anVzdGlmeSA9ICdzcGFjZS1iZXR3ZWVuJyxcblx0XHR3cmFwID0gZmFsc2UsXG5cdFx0Li4ub3RoZXJQcm9wc1xuXHR9ID0gdXNlQ29udGV4dFN5c3RlbSggdXNlRGVwcmVjYXRlZFByb3BzKCBwcm9wcyApLCAnRmxleCcgKTtcblxuXHRjb25zdCBkaXJlY3Rpb25Bc0FycmF5ID0gQXJyYXkuaXNBcnJheSggZGlyZWN0aW9uUHJvcCApXG5cdFx0PyBkaXJlY3Rpb25Qcm9wXG5cdFx0OiBbIGRpcmVjdGlvblByb3AgXTtcblx0Y29uc3QgZGlyZWN0aW9uID0gdXNlUmVzcG9uc2l2ZVZhbHVlKCBkaXJlY3Rpb25Bc0FycmF5ICk7XG5cblx0Y29uc3QgaXNDb2x1bW4gPVxuXHRcdHR5cGVvZiBkaXJlY3Rpb24gPT09ICdzdHJpbmcnICYmICEhIGRpcmVjdGlvbi5pbmNsdWRlcyggJ2NvbHVtbicgKTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cblx0Y29uc3QgY2xhc3NlcyA9IHVzZU1lbW8oICgpID0+IHtcblx0XHRjb25zdCBiYXNlID0gY3NzKCB7XG5cdFx0XHRhbGlnbkl0ZW1zOiBhbGlnbiA/PyAoIGlzQ29sdW1uID8gJ25vcm1hbCcgOiAnY2VudGVyJyApLFxuXHRcdFx0ZmxleERpcmVjdGlvbjogZGlyZWN0aW9uLFxuXHRcdFx0ZmxleFdyYXA6IHdyYXAgPyAnd3JhcCcgOiB1bmRlZmluZWQsXG5cdFx0XHRnYXA6IHNwYWNlKCBnYXAgKSxcblx0XHRcdGp1c3RpZnlDb250ZW50OiBqdXN0aWZ5LFxuXHRcdFx0aGVpZ2h0OiBpc0NvbHVtbiAmJiBleHBhbmRlZCA/ICcxMDAlJyA6IHVuZGVmaW5lZCxcblx0XHRcdHdpZHRoOiAhIGlzQ29sdW1uICYmIGV4cGFuZGVkID8gJzEwMCUnIDogdW5kZWZpbmVkLFxuXHRcdH0gKTtcblxuXHRcdHJldHVybiBjeChcblx0XHRcdHN0eWxlcy5GbGV4LFxuXHRcdFx0YmFzZSxcblx0XHRcdGlzQ29sdW1uID8gc3R5bGVzLkl0ZW1zQ29sdW1uIDogc3R5bGVzLkl0ZW1zUm93LFxuXHRcdFx0Y2xhc3NOYW1lXG5cdFx0KTtcblx0fSwgW1xuXHRcdGFsaWduLFxuXHRcdGNsYXNzTmFtZSxcblx0XHRjeCxcblx0XHRkaXJlY3Rpb24sXG5cdFx0ZXhwYW5kZWQsXG5cdFx0Z2FwLFxuXHRcdGlzQ29sdW1uLFxuXHRcdGp1c3RpZnksXG5cdFx0d3JhcCxcblx0XSApO1xuXG5cdHJldHVybiB7IC4uLm90aGVyUHJvcHMsIGNsYXNzTmFtZTogY2xhc3NlcywgaXNDb2x1bW4gfTtcbn1cbiJdfQ== */\");\n    return cx(styles.Flex, base, isColumn ? styles.ItemsColumn : styles.ItemsRow, className);\n  }, [align, className, cx, direction, expanded, gap, isColumn, justify, wrap]);\n  return {\n    ...otherProps,\n    className: classes,\n    isColumn\n  };\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAoB;AAKpB,qBAAwB;AACxB,wBAAuB;AAMvB,qBAAiC;AACjC,kCAAmC;AACnC,mBAAsB;AACtB,aAAwB;AACxB,mBAAsB;AACtB,SAAS,mBAAmB,OAAO;AACjC,QAAM;AAAA,IACJ;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,MAAI,OAAO,eAAe,aAAa;AACrC,0BAAAA,SAAW,mBAAmB;AAAA,MAC5B,aAAa;AAAA,MACb,OAAO;AAAA,IACT,CAAC;AACD,WAAO;AAAA,MACL,GAAG;AAAA,MACH,WAAW,aAAa,gBAAgB;AAAA,IAC1C;AAAA,EACF;AACA,SAAO;AACT;AACO,SAAS,QAAQ,OAAO;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW,gBAAgB;AAAA,IAC3B,WAAW;AAAA,IACX,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,GAAG;AAAA,EACL,QAAI,iCAAiB,mBAAmB,KAAK,GAAG,MAAM;AACtD,QAAM,mBAAmB,MAAM,QAAQ,aAAa,IAAI,gBAAgB,CAAC,aAAa;AACtF,QAAM,gBAAY,gDAAmB,gBAAgB;AACrD,QAAM,WAAW,OAAO,cAAc,YAAY,CAAC,CAAC,UAAU,SAAS,QAAQ;AAC/E,QAAM,SAAK,oBAAM;AACjB,QAAM,cAAU,wBAAQ,MAAM;AAC5B,UAAM,OAAoB,sCAAI;AAAA,MAC5B,YAAY,UAAU,WAAW,WAAW;AAAA,MAC5C,eAAe;AAAA,MACf,UAAU,OAAO,SAAS;AAAA,MAC1B,SAAK,oBAAM,GAAG;AAAA,MACd,gBAAgB;AAAA,MAChB,QAAQ,YAAY,WAAW,SAAS;AAAA,MACxC,OAAO,CAAC,YAAY,WAAW,SAAS;AAAA,IAC1C,GAAG,QAAQ,IAAI,aAAa,eAAe,KAAK,gBAAgB,QAAQ,IAAI,aAAa,eAAe,KAAK,i4GAAi4G;AAC9+G,WAAO,GAAU,aAAM,MAAM,WAAkB,qBAAqB,iBAAU,SAAS;AAAA,EACzF,GAAG,CAAC,OAAO,WAAW,IAAI,WAAW,UAAU,KAAK,UAAU,SAAS,IAAI,CAAC;AAC5E,SAAO;AAAA,IACL,GAAG;AAAA,IACH,WAAW;AAAA,IACX;AAAA,EACF;AACF;",
   "names": ["deprecated"]
 }

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

@@ -156,8 +156,7 @@ function FocalPointPicker({
     });
   };
   const getFinalValue = (value) => {
-    var _resolvePoint;
-    const resolvedValue = (_resolvePoint = resolvePoint?.(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;
+    const resolvedValue = resolvePoint?.(value) ?? value;
     resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));
     resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));
     const roundToTwoDecimalPlaces = (n) => Math.round(n * 100) / 100;

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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,kBAAmB;AACnB,qBAA4C;AAC5C,qBAAoF;AAKpF,sBAAqB;AACrB,yBAAuB;AACvB,kBAAiB;AACjB,mBAAkB;AAClB,sCAAwD;AACxD,mBAA+B;AAC/B,mBAAgC;AAChC,iCAAwC;AACxC,6BAA+B;AAC/B,yBAA2C;AAC3C,IAAM,uBAAuB;AA+CtB,SAAS,iBAAiB;AAAA;AAAA,EAE/B,yBAAyB;AAAA,EACzB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,YAAY;AAAA,IACjB,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,CAAC,OAAO,QAAQ,QAAI,yBAAS,SAAS;AAC5C,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,yBAAS,KAAK;AAC5D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,eAAAA,2BAAY;AAAA,IACd,aAAa,WAAS;AACpB,kBAAY,SAAS,MAAM;AAC3B,YAAM,QAAQ,uBAAuB,KAAK;AAI1C,UAAI,CAAC,OAAO;AACV;AAAA,MACF;AACA,oBAAc,OAAO,KAAK;AAC1B,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,YAAY,WAAS;AAEnB,YAAM,eAAe;AACrB,YAAM,QAAQ,uBAAuB,KAAK;AAC1C,UAAI,CAAC,OAAO;AACV;AAAA,MACF;AACA,eAAS,OAAO,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,WAAW,MAAM;AACf,kBAAY;AACZ,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF,CAAC;AAGD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI,aAAa,QAAQ;AACzB,QAAM,kBAAc,uBAAO,IAAI;AAC/B,QAAM,CAAC,QAAQ,SAAS,QAAI,yBAAS,2BAAc;AACnD,QAAM,sBAAkB,uBAAO,MAAM;AACnC,QAAI,CAAC,YAAY,SAAS;AACxB;AAAA,IACF;AACA,UAAM;AAAA,MACJ,aAAa;AAAA,MACb,cAAc;AAAA,IAChB,IAAI,YAAY;AAIhB,cAAU,QAAQ,KAAK,SAAS,IAAI;AAAA,MAClC;AAAA,MACA;AAAA,IACF,IAAI;AAAA,MACF,GAAG;AAAA,IACL,CAAC;AAAA,EACH,CAAC;AACD,gCAAU,MAAM;AACd,UAAM,eAAe,gBAAgB;AACrC,QAAI,CAAC,YAAY,SAAS;AACxB;AAAA,IACF;AACA,UAAM;AAAA,MACJ;AAAA,IACF,IAAI,YAAY,QAAQ;AACxB,iBAAa,iBAAiB,UAAU,YAAY;AACpD,WAAO,MAAM,aAAa,oBAAoB,UAAU,YAAY;AAAA,EACtE,GAAG,CAAC,CAAC;AAGL,gDAA0B,MAAM,KAAK,gBAAgB,QAAQ,GAAG,CAAC,CAAC;AAIlE,QAAM,yBAAyB,CAAC;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,QAAI,CAAC,YAAY,SAAS;AACxB;AAAA,IACF;AACA,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,IACF,IAAI,YAAY,QAAQ,sBAAsB;AAC9C,QAAI,SAAS,UAAU,QAAQ,OAAO;AACtC,QAAI,SAAS,UAAU,OAAO,OAAO;AAErC,QAAI,UAAU;AACZ,cAAQ,KAAK,MAAM,QAAQ,GAAG,IAAI;AAClC,cAAQ,KAAK,MAAM,QAAQ,GAAG,IAAI;AAAA,IACpC;AACA,WAAO,cAAc;AAAA,MACnB,GAAG;AAAA,MACH,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,QAAM,gBAAgB,WAAS;AAC7B,UAAM,gBAAgB,eAAe,KAAK,KAAK;AAC/C,kBAAc,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,cAAc,GAAG,CAAC,CAAC;AAC1D,kBAAc,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,cAAc,GAAG,CAAC,CAAC;AAC1D,UAAM,0BAA0B,OAAK,KAAK,MAAM,IAAI,GAAG,IAAI;AAC3D,WAAO;AAAA,MACL,GAAG,wBAAwB,cAAc,CAAC;AAAA,MAC1C,GAAG,wBAAwB,cAAc,CAAC;AAAA,IAC5C;AAAA,EACF;AACA,QAAM,eAAe,WAAS;AAC5B,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,IACF,IAAI;AACJ,QAAI,CAAC,CAAC,WAAW,aAAa,aAAa,YAAY,EAAE,SAAS,IAAI,GAAG;AACvE;AAAA,IACF;AACA,UAAM,eAAe;AACrB,UAAM,QAAQ;AAAA,MACZ;AAAA,MACA;AAAA,IACF;AACA,UAAM,OAAO,WAAW,MAAM;AAC9B,UAAM,QAAQ,SAAS,aAAa,SAAS,cAAc,KAAK,OAAO;AACvE,UAAM,OAAO,SAAS,aAAa,SAAS,cAAc,MAAM;AAChE,UAAM,IAAI,IAAI,MAAM,IAAI,IAAI;AAC5B,eAAW,cAAc,KAAK,CAAC;AAAA,EACjC;AACA,QAAM,qBAAqB;AAAA,IACzB,MAAM,MAAM,SAAY,IAAI,OAAO,QAAQ,MAAM,OAAO;AAAA,IACxD,KAAK,MAAM,SAAY,IAAI,OAAO,SAAS,MAAM,OAAO;AAAA,EAC1D;AACA,QAAM,cAAU,YAAAC,SAAK,yCAAyC,SAAS;AACvE,QAAM,QAAQ,sBAAsB,wCAAiB;AACrD,oCAAgB,MAAM;AACpB,uBAAmB,IAAI;AACvB,UAAM,UAAU,OAAO,WAAW,MAAM;AACtC,yBAAmB,KAAK;AAAA,IAC1B,GAAG,oBAAoB;AACvB,WAAO,MAAM,OAAO,aAAa,OAAO;AAAA,EAC1C,GAAG,CAAC,GAAG,CAAC,CAAC;AACT,SAAoB,uCAAAC,MAAM,2CAAW;AAAA,IACnC,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,WAAW;AAAA,IACX,UAAU,CAAC,CAAC,CAAC,SAAsB,uCAAAC,KAAK,OAAO;AAAA,MAC7C,IAAI;AAAA,MACJ,UAAU;AAAA,IACZ,CAAC,GAAgB,uCAAAA,KAAK,8CAAc;AAAA,MAClC,WAAW;AAAA,MACX,UAAuB,uCAAAD,MAAM,gDAAgB;AAAA,QAC3C,WAAW;AAAA,QACX,WAAW;AAAA,QACX,aAAa;AAAA,QACb,QAAQ,MAAM;AACZ,cAAI,YAAY;AACd,oBAAQ;AAAA,UACV;AAAA,QACF;AAAA,QACA,KAAK;AAAA,QACL,MAAM;AAAA,QACN,UAAU;AAAA,QACV,UAAU,CAAc,uCAAAC,KAAK,YAAAC,SAAM;AAAA,UACjC;AAAA,UACA,aAAa;AAAA,QACf,CAAC,GAAgB,uCAAAD,KAAK,aAAAE,SAAO;AAAA,UAC3B,SAAK,gBAAG,eAAe;AAAA,UACvB;AAAA,UACA,QAAQ,gBAAgB;AAAA,UACxB,KAAK;AAAA,QACP,CAAC,GAAgB,uCAAAF,KAAK,mBAAAG,SAAY;AAAA,UAChC,GAAG;AAAA,UACH;AAAA,QACF,CAAC,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC,GAAgB,uCAAAH,KAAK,gBAAAI,SAAU;AAAA,MAC9B,aAAa,CAAC,CAAC;AAAA,MACf,OAAO;AAAA,QACL;AAAA,QACA;AAAA,MACF;AAAA,MACA,UAAU,WAAS;AACjB,mBAAW,cAAc,KAAK,CAAC;AAAA,MACjC;AAAA,IACF,CAAC,GAAG,CAAC,CAAC,QAAqB,uCAAAJ,KAAK,uCAAY;AAAA,MAC1C,UAAU;AAAA,IACZ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,6BAAQ;",
   "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);
                 }
@@ -215,6 +215,7 @@ var UnforwardedFontSizePicker = (props, ref) => {
   });
 };
 var FontSizePicker = (0, import_element.forwardRef)(UnforwardedFontSizePicker);
+FontSizePicker.displayName = "FontSizePicker";
 var font_size_picker_default = FontSizePicker;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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);\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/form-file-upload/index.cjs CHANGED Viewed

@@ -61,11 +61,15 @@ function FormFileUpload({
   }
   const ui = render ? render({
     openFileDialog
-  }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
-    onClick: openFileDialog,
-    ...props,
-    children
-  });
+  }) : (
+    // Disable reason: the parent component already takes care of the `__next40pxDefaultSize` prop.
+    // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
+      onClick: openFileDialog,
+      ...props,
+      children
+    })
+  );
   const compatAccept = accept?.includes("audio/*") ? `${accept}, audio/mp3, audio/x-m4a, audio/x-m4b, audio/x-m4p, audio/x-wav, audio/webm` : accept;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
     className: "components-form-file-upload",

package/build/form-file-upload/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/form-file-upload/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\n/**\n * FormFileUpload allows users to select files from their local device.\n *\n * ```jsx\n * import { FormFileUpload } from '@wordpress/components';\n *\n * const MyFormFileUpload = () => (\n *   <FormFileUpload\n *     __next40pxDefaultSize\n *     accept=\"image/*\"\n *     onChange={ ( event ) => console.log( event.currentTarget.files ) }\n *   >\n *     Upload\n *   </FormFileUpload>\n * );\n * ```\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport function FormFileUpload({\n  accept,\n  children,\n  multiple = false,\n  onChange,\n  onClick,\n  render,\n  ...props\n}) {\n  const ref = useRef(null);\n  const openFileDialog = () => {\n    ref.current?.click();\n  };\n  if (!render) {\n    maybeWarnDeprecated36pxSize({\n      componentName: 'FormFileUpload',\n      __next40pxDefaultSize: props.__next40pxDefaultSize,\n      // @ts-expect-error - We don't \"officially\" support all Button props but this likely happens.\n      size: props.size\n    });\n  }\n  const ui = render ? render({\n    openFileDialog\n  }) : /*#__PURE__*/_jsx(Button, {\n    onClick: openFileDialog,\n    ...props,\n    children: children\n  });\n\n  // iOS browsers may not reliably handle 'audio/*' in the accept attribute.\n  // Adding explicit audio MIME types improves compatibility across all devices.\n  const compatAccept = accept?.includes('audio/*') ? `${accept}, audio/mp3, audio/x-m4a, audio/x-m4b, audio/x-m4p, audio/x-wav, audio/webm` : accept;\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-form-file-upload\",\n    children: [ui, /*#__PURE__*/_jsx(\"input\", {\n      type: \"file\",\n      ref: ref,\n      multiple: multiple,\n      style: {\n        display: 'none'\n      },\n      accept: compatAccept,\n      onChange: onChange,\n      onClick: onClick,\n      \"data-testid\": \"form-file-upload-input\"\n    })]\n  });\n}\nexport default FormFileUpload;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAuB;AAKvB,oBAAmB;AACnB,kCAA4C;AAmB5C,yBAA2C;AACpC,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,UAAM,uBAAO,IAAI;AACvB,QAAM,iBAAiB,MAAM;AAC3B,QAAI,SAAS,MAAM;AAAA,EACrB;AACA,MAAI,CAAC,QAAQ;AACX,iEAA4B;AAAA,MAC1B,eAAe;AAAA,MACf,uBAAuB,MAAM;AAAA;AAAA,MAE7B,MAAM,MAAM;AAAA,IACd,CAAC;AAAA,EACH;AACA,QAAM,KAAK,SAAS,OAAO;AAAA,IACzB;AAAA,EACF,CAAC,IAAiB,uCAAAA,KAAK,cAAAC,SAAQ;AAAA,IAC7B,SAAS;AAAA,IACT,GAAG;AAAA,IACH;AAAA,EACF,CAAC;AAID,QAAM,eAAe,QAAQ,SAAS,SAAS,IAAI,GAAG,MAAM,gFAAgF;AAC5I,SAAoB,uCAAAC,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAC,IAAiB,uCAAAF,KAAK,SAAS;AAAA,MACxC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IACjB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,2BAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\n/**\n * FormFileUpload allows users to select files from their local device.\n *\n * ```jsx\n * import { FormFileUpload } from '@wordpress/components';\n *\n * const MyFormFileUpload = () => (\n *   <FormFileUpload\n *     __next40pxDefaultSize\n *     accept=\"image/*\"\n *     onChange={ ( event ) => console.log( event.currentTarget.files ) }\n *   >\n *     Upload\n *   </FormFileUpload>\n * );\n * ```\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport function FormFileUpload({\n  accept,\n  children,\n  multiple = false,\n  onChange,\n  onClick,\n  render,\n  ...props\n}) {\n  const ref = useRef(null);\n  const openFileDialog = () => {\n    ref.current?.click();\n  };\n  if (!render) {\n    maybeWarnDeprecated36pxSize({\n      componentName: 'FormFileUpload',\n      __next40pxDefaultSize: props.__next40pxDefaultSize,\n      // @ts-expect-error - We don't \"officially\" support all Button props but this likely happens.\n      size: props.size\n    });\n  }\n  const ui = render ? render({\n    openFileDialog\n  }) :\n  /*#__PURE__*/\n  // Disable reason: the parent component already takes care of the `__next40pxDefaultSize` prop.\n  // eslint-disable-next-line @wordpress/components-no-missing-40px-size-prop\n  _jsx(Button, {\n    onClick: openFileDialog,\n    ...props,\n    children: children\n  });\n\n  // iOS browsers may not reliably handle 'audio/*' in the accept attribute.\n  // Adding explicit audio MIME types improves compatibility across all devices.\n  const compatAccept = accept?.includes('audio/*') ? `${accept}, audio/mp3, audio/x-m4a, audio/x-m4b, audio/x-m4p, audio/x-wav, audio/webm` : accept;\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: \"components-form-file-upload\",\n    children: [ui, /*#__PURE__*/_jsx(\"input\", {\n      type: \"file\",\n      ref: ref,\n      multiple: multiple,\n      style: {\n        display: 'none'\n      },\n      accept: compatAccept,\n      onChange: onChange,\n      onClick: onClick,\n      \"data-testid\": \"form-file-upload-input\"\n    })]\n  });\n}\nexport default FormFileUpload;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAuB;AAKvB,oBAAmB;AACnB,kCAA4C;AAmB5C,yBAA2C;AACpC,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG;AACD,QAAM,UAAM,uBAAO,IAAI;AACvB,QAAM,iBAAiB,MAAM;AAC3B,QAAI,SAAS,MAAM;AAAA,EACrB;AACA,MAAI,CAAC,QAAQ;AACX,iEAA4B;AAAA,MAC1B,eAAe;AAAA,MACf,uBAAuB,MAAM;AAAA;AAAA,MAE7B,MAAM,MAAM;AAAA,IACd,CAAC;AAAA,EACH;AACA,QAAM,KAAK,SAAS,OAAO;AAAA,IACzB;AAAA,EACF,CAAC;AAAA;AAAA;AAAA,IAID,uCAAAA,KAAK,cAAAC,SAAQ;AAAA,MACX,SAAS;AAAA,MACT,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA;AAID,QAAM,eAAe,QAAQ,SAAS,SAAS,IAAI,GAAG,MAAM,gFAAgF;AAC5I,SAAoB,uCAAAC,MAAM,OAAO;AAAA,IAC/B,WAAW;AAAA,IACX,UAAU,CAAC,IAAiB,uCAAAF,KAAK,SAAS;AAAA,MACxC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IACjB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACA,IAAO,2BAAQ;",
   "names": ["_jsx", "Button", "_jsxs"]
 }

package/build/form-toggle/index.cjs CHANGED Viewed

@@ -77,6 +77,7 @@ function UnforwardedFormToggle(props, ref) {
   });
 }
 var FormToggle = (0, import_element.forwardRef)(UnforwardedFormToggle);
+FormToggle.displayName = "FormToggle";
 var form_toggle_default = FormToggle;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/form-toggle/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/form-toggle/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const noop = () => {};\nfunction UnforwardedFormToggle(props, ref) {\n  const {\n    className,\n    checked,\n    id,\n    disabled,\n    onChange = noop,\n    onClick,\n    ...additionalProps\n  } = props;\n  const wrapperClasses = clsx('components-form-toggle', className, {\n    'is-checked': checked,\n    'is-disabled': disabled\n  });\n  return /*#__PURE__*/_jsxs(\"span\", {\n    className: wrapperClasses,\n    children: [/*#__PURE__*/_jsx(\"input\", {\n      className: \"components-form-toggle__input\",\n      id: id,\n      type: \"checkbox\",\n      checked: checked,\n      onChange: onChange,\n      disabled: disabled,\n      onClick: event => {\n        // Compat code for Safari to ensure that the toggle is focused when clicked.\n        event.currentTarget.focus();\n        onClick?.(event);\n      },\n      ...additionalProps,\n      ref: ref\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-form-toggle__track\"\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-form-toggle__thumb\"\n    })]\n  });\n}\n\n/**\n * FormToggle switches a single setting on or off.\n *\n * ```jsx\n * import { FormToggle } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyFormToggle = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *\n *   return (\n *     <FormToggle\n *       checked={ isChecked }\n *       onChange={ () => setChecked( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const FormToggle = forwardRef(UnforwardedFormToggle);\nexport default FormToggle;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAA2B;AAK3B,yBAA2C;AACpC,IAAM,OAAO,MAAM;AAAC;AAC3B,SAAS,sBAAsB,OAAO,KAAK;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,qBAAiB,YAAAA,SAAK,0BAA0B,WAAW;AAAA,IAC/D,cAAc;AAAA,IACd,eAAe;AAAA,EACjB,CAAC;AACD,SAAoB,uCAAAC,MAAM,QAAQ;AAAA,IAChC,WAAW;AAAA,IACX,UAAU,CAAc,uCAAAC,KAAK,SAAS;AAAA,MACpC,WAAW;AAAA,MACX;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAS;AAEhB,cAAM,cAAc,MAAM;AAC1B,kBAAU,KAAK;AAAA,MACjB;AAAA,MACA,GAAG;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,uCAAAA,KAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,IACb,CAAC,GAAgB,uCAAAA,KAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,IACb,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAqBO,IAAM,iBAAa,2BAAW,qBAAqB;AAC1D,IAAO,sBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const noop = () => {};\nfunction UnforwardedFormToggle(props, ref) {\n  const {\n    className,\n    checked,\n    id,\n    disabled,\n    onChange = noop,\n    onClick,\n    ...additionalProps\n  } = props;\n  const wrapperClasses = clsx('components-form-toggle', className, {\n    'is-checked': checked,\n    'is-disabled': disabled\n  });\n  return /*#__PURE__*/_jsxs(\"span\", {\n    className: wrapperClasses,\n    children: [/*#__PURE__*/_jsx(\"input\", {\n      className: \"components-form-toggle__input\",\n      id: id,\n      type: \"checkbox\",\n      checked: checked,\n      onChange: onChange,\n      disabled: disabled,\n      onClick: event => {\n        // Compat code for Safari to ensure that the toggle is focused when clicked.\n        event.currentTarget.focus();\n        onClick?.(event);\n      },\n      ...additionalProps,\n      ref: ref\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-form-toggle__track\"\n    }), /*#__PURE__*/_jsx(\"span\", {\n      className: \"components-form-toggle__thumb\"\n    })]\n  });\n}\n\n/**\n * FormToggle switches a single setting on or off.\n *\n * ```jsx\n * import { FormToggle } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyFormToggle = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *\n *   return (\n *     <FormToggle\n *       checked={ isChecked }\n *       onChange={ () => setChecked( ( state ) => ! state ) }\n *     />\n *   );\n * };\n * ```\n */\nexport const FormToggle = forwardRef(UnforwardedFormToggle);\nFormToggle.displayName = 'FormToggle';\nexport default FormToggle;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAA2B;AAK3B,yBAA2C;AACpC,IAAM,OAAO,MAAM;AAAC;AAC3B,SAAS,sBAAsB,OAAO,KAAK;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,qBAAiB,YAAAA,SAAK,0BAA0B,WAAW;AAAA,IAC/D,cAAc;AAAA,IACd,eAAe;AAAA,EACjB,CAAC;AACD,SAAoB,uCAAAC,MAAM,QAAQ;AAAA,IAChC,WAAW;AAAA,IACX,UAAU,CAAc,uCAAAC,KAAK,SAAS;AAAA,MACpC,WAAW;AAAA,MACX;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAS;AAEhB,cAAM,cAAc,MAAM;AAC1B,kBAAU,KAAK;AAAA,MACjB;AAAA,MACA,GAAG;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,uCAAAA,KAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,IACb,CAAC,GAAgB,uCAAAA,KAAK,QAAQ;AAAA,MAC5B,WAAW;AAAA,IACb,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAqBO,IAAM,iBAAa,2BAAW,qBAAqB;AAC1D,WAAW,cAAc;AACzB,IAAO,sBAAQ;",
   "names": ["clsx", "_jsxs", "_jsx"]
 }

package/build/form-token-field/token-input.cjs CHANGED Viewed

@@ -94,6 +94,7 @@ function UnForwardedTokenInput(props, ref) {
   });
 }
 var TokenInput = (0, import_element.forwardRef)(UnForwardedTokenInput);
+TokenInput.displayName = "TokenInput";
 var token_input_default = TokenInput;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/form-token-field/token-input.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/form-token-field/token-input.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport function UnForwardedTokenInput(props, ref) {\n  const {\n    value,\n    isExpanded,\n    instanceId,\n    selectedSuggestionIndex,\n    className,\n    onChange,\n    onFocus,\n    onBlur,\n    ...restProps\n  } = props;\n  const [hasFocus, setHasFocus] = useState(false);\n  const size = value ? value.length + 1 : 0;\n  const onChangeHandler = event => {\n    if (onChange) {\n      onChange({\n        value: event.target.value\n      });\n    }\n  };\n  const onFocusHandler = e => {\n    setHasFocus(true);\n    onFocus?.(e);\n  };\n  const onBlurHandler = e => {\n    setHasFocus(false);\n    onBlur?.(e);\n  };\n  return /*#__PURE__*/_jsx(\"input\", {\n    ref: ref,\n    id: `components-form-token-input-${instanceId}`,\n    type: \"text\",\n    ...restProps,\n    value: value || '',\n    onChange: onChangeHandler,\n    onFocus: onFocusHandler,\n    onBlur: onBlurHandler,\n    size: size,\n    className: clsx(className, 'components-form-token-field__input'),\n    autoComplete: \"off\",\n    role: \"combobox\",\n    \"aria-expanded\": isExpanded,\n    \"aria-autocomplete\": \"list\",\n    \"aria-owns\": isExpanded ? `components-form-token-suggestions-${instanceId}` : undefined,\n    \"aria-activedescendant\":\n    // Only add the `aria-activedescendant` attribute when:\n    // - the user is actively interacting with the input (`hasFocus`)\n    // - there is a selected suggestion (`selectedSuggestionIndex !== -1`)\n    // - the list of suggestions are rendered in the DOM (`isExpanded`)\n    hasFocus && selectedSuggestionIndex !== -1 && isExpanded ? `components-form-token-suggestions-${instanceId}-${selectedSuggestionIndex}` : undefined,\n    \"aria-describedby\": `components-form-token-suggestions-howto-${instanceId}`\n  });\n}\nexport const TokenInput = forwardRef(UnForwardedTokenInput);\nexport default TokenInput;"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAAqC;AAKrC,yBAA4B;AACrB,SAAS,sBAAsB,OAAO,KAAK;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,QAAI,yBAAS,KAAK;AAC9C,QAAM,OAAO,QAAQ,MAAM,SAAS,IAAI;AACxC,QAAM,kBAAkB,WAAS;AAC/B,QAAI,UAAU;AACZ,eAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,MACtB,CAAC;AAAA,IACH;AAAA,EACF;AACA,QAAM,iBAAiB,OAAK;AAC1B,gBAAY,IAAI;AAChB,cAAU,CAAC;AAAA,EACb;AACA,QAAM,gBAAgB,OAAK;AACzB,gBAAY,KAAK;AACjB,aAAS,CAAC;AAAA,EACZ;AACA,SAAoB,uCAAAA,KAAK,SAAS;AAAA,IAChC;AAAA,IACA,IAAI,+BAA+B,UAAU;AAAA,IAC7C,MAAM;AAAA,IACN,GAAG;AAAA,IACH,OAAO,SAAS;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,IACA,eAAW,YAAAC,SAAK,WAAW,oCAAoC;AAAA,IAC/D,cAAc;AAAA,IACd,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,qBAAqB;AAAA,IACrB,aAAa,aAAa,qCAAqC,UAAU,KAAK;AAAA,IAC9E;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,YAAY,4BAA4B,MAAM,aAAa,qCAAqC,UAAU,IAAI,uBAAuB,KAAK;AAAA;AAAA,IAC1I,oBAAoB,2CAA2C,UAAU;AAAA,EAC3E,CAAC;AACH;AACO,IAAM,iBAAa,2BAAW,qBAAqB;AAC1D,IAAO,sBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport function UnForwardedTokenInput(props, ref) {\n  const {\n    value,\n    isExpanded,\n    instanceId,\n    selectedSuggestionIndex,\n    className,\n    onChange,\n    onFocus,\n    onBlur,\n    ...restProps\n  } = props;\n  const [hasFocus, setHasFocus] = useState(false);\n  const size = value ? value.length + 1 : 0;\n  const onChangeHandler = event => {\n    if (onChange) {\n      onChange({\n        value: event.target.value\n      });\n    }\n  };\n  const onFocusHandler = e => {\n    setHasFocus(true);\n    onFocus?.(e);\n  };\n  const onBlurHandler = e => {\n    setHasFocus(false);\n    onBlur?.(e);\n  };\n  return /*#__PURE__*/_jsx(\"input\", {\n    ref: ref,\n    id: `components-form-token-input-${instanceId}`,\n    type: \"text\",\n    ...restProps,\n    value: value || '',\n    onChange: onChangeHandler,\n    onFocus: onFocusHandler,\n    onBlur: onBlurHandler,\n    size: size,\n    className: clsx(className, 'components-form-token-field__input'),\n    autoComplete: \"off\",\n    role: \"combobox\",\n    \"aria-expanded\": isExpanded,\n    \"aria-autocomplete\": \"list\",\n    \"aria-owns\": isExpanded ? `components-form-token-suggestions-${instanceId}` : undefined,\n    \"aria-activedescendant\":\n    // Only add the `aria-activedescendant` attribute when:\n    // - the user is actively interacting with the input (`hasFocus`)\n    // - there is a selected suggestion (`selectedSuggestionIndex !== -1`)\n    // - the list of suggestions are rendered in the DOM (`isExpanded`)\n    hasFocus && selectedSuggestionIndex !== -1 && isExpanded ? `components-form-token-suggestions-${instanceId}-${selectedSuggestionIndex}` : undefined,\n    \"aria-describedby\": `components-form-token-suggestions-howto-${instanceId}`\n  });\n}\nexport const TokenInput = forwardRef(UnForwardedTokenInput);\nTokenInput.displayName = 'TokenInput';\nexport default TokenInput;"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAIjB,qBAAqC;AAKrC,yBAA4B;AACrB,SAAS,sBAAsB,OAAO,KAAK;AAChD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,QAAI,yBAAS,KAAK;AAC9C,QAAM,OAAO,QAAQ,MAAM,SAAS,IAAI;AACxC,QAAM,kBAAkB,WAAS;AAC/B,QAAI,UAAU;AACZ,eAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,MACtB,CAAC;AAAA,IACH;AAAA,EACF;AACA,QAAM,iBAAiB,OAAK;AAC1B,gBAAY,IAAI;AAChB,cAAU,CAAC;AAAA,EACb;AACA,QAAM,gBAAgB,OAAK;AACzB,gBAAY,KAAK;AACjB,aAAS,CAAC;AAAA,EACZ;AACA,SAAoB,uCAAAA,KAAK,SAAS;AAAA,IAChC;AAAA,IACA,IAAI,+BAA+B,UAAU;AAAA,IAC7C,MAAM;AAAA,IACN,GAAG;AAAA,IACH,OAAO,SAAS;AAAA,IAChB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,IACA,eAAW,YAAAC,SAAK,WAAW,oCAAoC;AAAA,IAC/D,cAAc;AAAA,IACd,MAAM;AAAA,IACN,iBAAiB;AAAA,IACjB,qBAAqB;AAAA,IACrB,aAAa,aAAa,qCAAqC,UAAU,KAAK;AAAA,IAC9E;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,YAAY,4BAA4B,MAAM,aAAa,qCAAqC,UAAU,IAAI,uBAAuB,KAAK;AAAA;AAAA,IAC1I,oBAAoB,2CAA2C,UAAU;AAAA,EAC3E,CAAC;AACH;AACO,IAAM,iBAAa,2BAAW,qBAAqB;AAC1D,WAAW,cAAc;AACzB,IAAO,sBAAQ;",
   "names": ["_jsx", "clsx"]
 }

package/build/form-token-field/token.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/form-token-field/token.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nexport default function Token({\n  value,\n  status,\n  title,\n  displayTransform,\n  isBorderless = false,\n  disabled = false,\n  onClickRemove = noop,\n  onMouseEnter,\n  onMouseLeave,\n  messages,\n  termPosition,\n  termsCount\n}) {\n  const instanceId = useInstanceId(Token);\n  const tokenClasses = clsx('components-form-token-field__token', {\n    'is-error': 'error' === status,\n    'is-success': 'success' === status,\n    'is-validating': 'validating' === status,\n    'is-borderless': isBorderless,\n    'is-disabled': disabled\n  });\n  const onClick = () => onClickRemove({\n    value\n  });\n  const transformedValue = displayTransform(value);\n  const termPositionAndCount = sprintf(/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */\n  __('%1$s (%2$d of %3$d)'), transformedValue, termPosition, termsCount);\n  return /*#__PURE__*/_jsxs(\"span\", {\n    className: tokenClasses,\n    onMouseEnter: onMouseEnter,\n    onMouseLeave: onMouseLeave,\n    title: title,\n    children: [/*#__PURE__*/_jsxs(\"span\", {\n      className: \"components-form-token-field__token-text\",\n      id: `components-form-token-field__token-text-${instanceId}`,\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        as: \"span\",\n        children: termPositionAndCount\n      }), /*#__PURE__*/_jsx(\"span\", {\n        \"aria-hidden\": \"true\",\n        children: transformedValue\n      })]\n    }), /*#__PURE__*/_jsx(Button, {\n      className: \"components-form-token-field__remove-token\",\n      size: \"small\",\n      icon: closeSmall,\n      onClick: !disabled ? onClick : undefined\n      // Disable reason: Even when FormTokenField itself is accessibly disabled, token reset buttons shouldn't be in the tab sequence.\n      // eslint-disable-next-line no-restricted-syntax\n      ,\n      disabled: disabled,\n      label: messages.remove,\n      \"aria-describedby\": `components-form-token-field__token-text-${instanceId}`\n    })]\n  });\n}"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAA8B;AAC9B,kBAA4B;AAC5B,mBAA2B;AAK3B,oBAAmB;AACnB,6BAA+B;AAC/B,yBAA2C;AAC3C,IAAM,OAAO,MAAM;AAAC;AACL,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,iBAAa,8BAAc,KAAK;AACtC,QAAM,mBAAe,YAAAA,SAAK,sCAAsC;AAAA,IAC9D,YAAY,YAAY;AAAA,IACxB,cAAc,cAAc;AAAA,IAC5B,iBAAiB,iBAAiB;AAAA,IAClC,iBAAiB;AAAA,IACjB,eAAe;AAAA,EACjB,CAAC;AACD,QAAM,UAAU,MAAM,cAAc;AAAA,IAClC;AAAA,EACF,CAAC;AACD,QAAM,mBAAmB,iBAAiB,KAAK;AAC/C,QAAM,2BAAuB;AAAA;AAAA,QAC7B,gBAAG,qBAAqB;AAAA,IAAG;AAAA,IAAkB;AAAA,IAAc;AAAA,EAAU;AACrE,SAAoB,uCAAAC,MAAM,QAAQ;AAAA,IAChC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAc,uCAAAA,MAAM,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,IAAI,2CAA2C,UAAU;AAAA,MACzD,UAAU,CAAc,uCAAAC,KAAK,uCAAgB;AAAA,QAC3C,IAAI;AAAA,QACJ,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAA,KAAK,QAAQ;AAAA,QAC5B,eAAe;AAAA,QACf,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,GAAgB,uCAAAA,KAAK,cAAAC,SAAQ;AAAA,MAC5B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS,CAAC,WAAW,UAAU;AAAA,MAI/B;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,oBAAoB,2CAA2C,UAAU;AAAA,IAC3E,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { VisuallyHidden } from '../visually-hidden';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nexport default function Token({\n  value,\n  status,\n  title,\n  displayTransform,\n  isBorderless = false,\n  disabled = false,\n  onClickRemove = noop,\n  onMouseEnter,\n  onMouseLeave,\n  messages,\n  termPosition,\n  termsCount\n}) {\n  const instanceId = useInstanceId(Token);\n  const tokenClasses = clsx('components-form-token-field__token', {\n    'is-error': 'error' === status,\n    'is-success': 'success' === status,\n    'is-validating': 'validating' === status,\n    'is-borderless': isBorderless,\n    'is-disabled': disabled\n  });\n  const onClick = () => onClickRemove({\n    value\n  });\n  const transformedValue = displayTransform(value);\n  const termPositionAndCount = sprintf(/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */\n  __('%1$s (%2$d of %3$d)'), transformedValue, termPosition, termsCount);\n  return /*#__PURE__*/_jsxs(\"span\", {\n    className: tokenClasses,\n    onMouseEnter: onMouseEnter,\n    onMouseLeave: onMouseLeave,\n    title: title,\n    children: [/*#__PURE__*/_jsxs(\"span\", {\n      className: \"components-form-token-field__token-text\",\n      id: `components-form-token-field__token-text-${instanceId}`,\n      children: [/*#__PURE__*/_jsx(VisuallyHidden, {\n        as: \"span\",\n        children: termPositionAndCount\n      }), /*#__PURE__*/_jsx(\"span\", {\n        \"aria-hidden\": \"true\",\n        children: transformedValue\n      })]\n    }), /*#__PURE__*/_jsx(Button, {\n      className: \"components-form-token-field__remove-token\",\n      size: \"small\",\n      icon: closeSmall,\n      onClick: !disabled ? onClick : undefined,\n      disabled: disabled,\n      label: messages.remove,\n      \"aria-describedby\": `components-form-token-field__token-text-${instanceId}`\n    })]\n  });\n}"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAA8B;AAC9B,kBAA4B;AAC5B,mBAA2B;AAK3B,oBAAmB;AACnB,6BAA+B;AAC/B,yBAA2C;AAC3C,IAAM,OAAO,MAAM;AAAC;AACL,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,iBAAa,8BAAc,KAAK;AACtC,QAAM,mBAAe,YAAAA,SAAK,sCAAsC;AAAA,IAC9D,YAAY,YAAY;AAAA,IACxB,cAAc,cAAc;AAAA,IAC5B,iBAAiB,iBAAiB;AAAA,IAClC,iBAAiB;AAAA,IACjB,eAAe;AAAA,EACjB,CAAC;AACD,QAAM,UAAU,MAAM,cAAc;AAAA,IAClC;AAAA,EACF,CAAC;AACD,QAAM,mBAAmB,iBAAiB,KAAK;AAC/C,QAAM,2BAAuB;AAAA;AAAA,QAC7B,gBAAG,qBAAqB;AAAA,IAAG;AAAA,IAAkB;AAAA,IAAc;AAAA,EAAU;AACrE,SAAoB,uCAAAC,MAAM,QAAQ;AAAA,IAChC,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAc,uCAAAA,MAAM,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,IAAI,2CAA2C,UAAU;AAAA,MACzD,UAAU,CAAc,uCAAAC,KAAK,uCAAgB;AAAA,QAC3C,IAAI;AAAA,QACJ,UAAU;AAAA,MACZ,CAAC,GAAgB,uCAAAA,KAAK,QAAQ;AAAA,QAC5B,eAAe;AAAA,QACf,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC,GAAgB,uCAAAA,KAAK,cAAAC,SAAQ;AAAA,MAC5B,WAAW;AAAA,MACX,MAAM;AAAA,MACN,MAAM;AAAA,MACN,SAAS,CAAC,WAAW,UAAU;AAAA,MAC/B;AAAA,MACA,OAAO,SAAS;AAAA,MAChB,oBAAoB,2CAA2C,UAAU;AAAA,IAC3E,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
   "names": ["clsx", "_jsxs", "_jsx", "Button"]
 }

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;
     }
@@ -99,15 +98,17 @@ function useNavigateRegions(shortcuts = defaultShortcuts) {
     }
   };
 }
-var navigate_regions_default = (0, import_compose.createHigherOrderComponent)((Component) => ({
+var navigate_regions_default = (0, import_compose.createHigherOrderComponent)((Component) => function NavigateRegions({
   shortcuts,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-  ...useNavigateRegions(shortcuts),
-  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
-    ...props
-  })
-}), "navigateRegions");
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    ...useNavigateRegions(shortcuts),
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
+      ...props
+    })
+  });
+}, "navigateRegions");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useNavigateRegions

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 => ({\n  shortcuts,\n  ...props\n}) => /*#__PURE__*/_jsx(\"div\", {\n  ...useNavigateRegions(shortcuts),\n  children: /*#__PURE__*/_jsx(Component, {\n    ...props\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,CAAC;AAAA,EACtD;AAAA,EACA,GAAG;AACL,MAAmB,uCAAAA,KAAK,OAAO;AAAA,EAC7B,GAAG,mBAAmB,SAAS;AAAA,EAC/B,UAAuB,uCAAAA,KAAK,WAAW;AAAA,IACrC,GAAG;AAAA,EACL,CAAC;AACH,CAAC,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/higher-order/with-fallback-styles/index.cjs CHANGED Viewed

@@ -38,7 +38,7 @@ var import_element = require("@wordpress/element");
 var import_compose = require("@wordpress/compose");
 var import_jsx_runtime = require("react/jsx-runtime");
 var with_fallback_styles_default = (mapNodeToProps) => (0, import_compose.createHigherOrderComponent)((WrappedComponent) => {
-  return class extends import_element.Component {
+  return class WithFallbackStyles extends import_element.Component {
     constructor(props) {
       super(props);
       this.nodeRef = this.props.node;

package/build/higher-order/with-fallback-styles/index.cjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/higher-order/with-fallback-styles/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default mapNodeToProps => createHigherOrderComponent(WrappedComponent => {\n  return class extends Component {\n    constructor(props) {\n      super(props);\n      this.nodeRef = this.props.node;\n      this.state = {\n        fallbackStyles: undefined,\n        grabStylesCompleted: false\n      };\n      this.bindRef = this.bindRef.bind(this);\n    }\n    bindRef(node) {\n      if (!node) {\n        return;\n      }\n      this.nodeRef = node;\n    }\n    componentDidMount() {\n      this.grabFallbackStyles();\n    }\n    componentDidUpdate() {\n      this.grabFallbackStyles();\n    }\n    grabFallbackStyles() {\n      const {\n        grabStylesCompleted,\n        fallbackStyles\n      } = this.state;\n      if (this.nodeRef && !grabStylesCompleted) {\n        const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props);\n        if (!fastDeepEqual(newFallbackStyles, fallbackStyles)) {\n          this.setState({\n            fallbackStyles: newFallbackStyles,\n            grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)\n          });\n        }\n      }\n    }\n    render() {\n      const wrappedComponent = /*#__PURE__*/_jsx(WrappedComponent, {\n        ...this.props,\n        ...this.state.fallbackStyles\n      });\n      return this.props.node ? wrappedComponent : /*#__PURE__*/_jsxs(\"div\", {\n        ref: this.bindRef,\n        children: [\" \", wrappedComponent, \" \"]\n      });\n    }\n  };\n}, 'withFallbackStyles');"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAA0B;AAK1B,qBAA0B;AAC1B,qBAA2C;AAC3C,yBAA2C;AAC3C,IAAO,+BAAQ,wBAAkB,2CAA2B,sBAAoB;AAC9E,SAAO,cAAc,yBAAU;AAAA,IAC7B,YAAY,OAAO;AACjB,YAAM,KAAK;AACX,WAAK,UAAU,KAAK,MAAM;AAC1B,WAAK,QAAQ;AAAA,QACX,gBAAgB;AAAA,QAChB,qBAAqB;AAAA,MACvB;AACA,WAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AAAA,IACvC;AAAA,IACA,QAAQ,MAAM;AACZ,UAAI,CAAC,MAAM;AACT;AAAA,MACF;AACA,WAAK,UAAU;AAAA,IACjB;AAAA,IACA,oBAAoB;AAClB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,MACF,IAAI,KAAK;AACT,UAAI,KAAK,WAAW,CAAC,qBAAqB;AACxC,cAAM,oBAAoB,eAAe,KAAK,SAAS,KAAK,KAAK;AACjE,YAAI,KAAC,WAAAA,SAAc,mBAAmB,cAAc,GAAG;AACrD,eAAK,SAAS;AAAA,YACZ,gBAAgB;AAAA,YAChB,qBAAqB,OAAO,OAAO,iBAAiB,EAAE,MAAM,OAAO;AAAA,UACrE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AACP,YAAM,mBAAgC,uCAAAC,KAAK,kBAAkB;AAAA,QAC3D,GAAG,KAAK;AAAA,QACR,GAAG,KAAK,MAAM;AAAA,MAChB,CAAC;AACD,aAAO,KAAK,MAAM,OAAO,mBAAgC,uCAAAC,MAAM,OAAO;AAAA,QACpE,KAAK,KAAK;AAAA,QACV,UAAU,CAAC,KAAK,kBAAkB,GAAG;AAAA,MACvC,CAAC;AAAA,IACH;AAAA,EACF;AACF,GAAG,oBAAoB;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport default mapNodeToProps => createHigherOrderComponent(WrappedComponent => {\n  return class WithFallbackStyles extends Component {\n    constructor(props) {\n      super(props);\n      this.nodeRef = this.props.node;\n      this.state = {\n        fallbackStyles: undefined,\n        grabStylesCompleted: false\n      };\n      this.bindRef = this.bindRef.bind(this);\n    }\n    bindRef(node) {\n      if (!node) {\n        return;\n      }\n      this.nodeRef = node;\n    }\n    componentDidMount() {\n      this.grabFallbackStyles();\n    }\n    componentDidUpdate() {\n      this.grabFallbackStyles();\n    }\n    grabFallbackStyles() {\n      const {\n        grabStylesCompleted,\n        fallbackStyles\n      } = this.state;\n      if (this.nodeRef && !grabStylesCompleted) {\n        const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props);\n        if (!fastDeepEqual(newFallbackStyles, fallbackStyles)) {\n          this.setState({\n            fallbackStyles: newFallbackStyles,\n            grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)\n          });\n        }\n      }\n    }\n    render() {\n      const wrappedComponent = /*#__PURE__*/_jsx(WrappedComponent, {\n        ...this.props,\n        ...this.state.fallbackStyles\n      });\n      return this.props.node ? wrappedComponent : /*#__PURE__*/_jsxs(\"div\", {\n        ref: this.bindRef,\n        children: [\" \", wrappedComponent, \" \"]\n      });\n    }\n  };\n}, 'withFallbackStyles');"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAA0B;AAK1B,qBAA0B;AAC1B,qBAA2C;AAC3C,yBAA2C;AAC3C,IAAO,+BAAQ,wBAAkB,2CAA2B,sBAAoB;AAC9E,SAAO,MAAM,2BAA2B,yBAAU;AAAA,IAChD,YAAY,OAAO;AACjB,YAAM,KAAK;AACX,WAAK,UAAU,KAAK,MAAM;AAC1B,WAAK,QAAQ;AAAA,QACX,gBAAgB;AAAA,QAChB,qBAAqB;AAAA,MACvB;AACA,WAAK,UAAU,KAAK,QAAQ,KAAK,IAAI;AAAA,IACvC;AAAA,IACA,QAAQ,MAAM;AACZ,UAAI,CAAC,MAAM;AACT;AAAA,MACF;AACA,WAAK,UAAU;AAAA,IACjB;AAAA,IACA,oBAAoB;AAClB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,WAAK,mBAAmB;AAAA,IAC1B;AAAA,IACA,qBAAqB;AACnB,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,MACF,IAAI,KAAK;AACT,UAAI,KAAK,WAAW,CAAC,qBAAqB;AACxC,cAAM,oBAAoB,eAAe,KAAK,SAAS,KAAK,KAAK;AACjE,YAAI,KAAC,WAAAA,SAAc,mBAAmB,cAAc,GAAG;AACrD,eAAK,SAAS;AAAA,YACZ,gBAAgB;AAAA,YAChB,qBAAqB,OAAO,OAAO,iBAAiB,EAAE,MAAM,OAAO;AAAA,UACrE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AACP,YAAM,mBAAgC,uCAAAC,KAAK,kBAAkB;AAAA,QAC3D,GAAG,KAAK;AAAA,QACR,GAAG,KAAK,MAAM;AAAA,MAChB,CAAC;AACD,aAAO,KAAK,MAAM,OAAO,mBAAgC,uCAAAC,MAAM,OAAO;AAAA,QACpE,KAAK,KAAK;AAAA,QACV,UAAU,CAAC,KAAK,kBAAkB,GAAG;AAAA,MACvC,CAAC;AAAA,IACH;AAAA,EACF;AACF,GAAG,oBAAoB;",
   "names": ["fastDeepEqual", "_jsx", "_jsxs"]
 }

package/build/higher-order/with-focus-outside/index.cjs CHANGED Viewed

@@ -26,7 +26,7 @@ module.exports = __toCommonJS(with_focus_outside_exports);
 var import_element = require("@wordpress/element");
 var import_compose = require("@wordpress/compose");
 var import_jsx_runtime = require("react/jsx-runtime");
-var with_focus_outside_default = (0, import_compose.createHigherOrderComponent)((WrappedComponent) => (props) => {
+var with_focus_outside_default = (0, import_compose.createHigherOrderComponent)((WrappedComponent) => function WithFocusOutside(props) {
   const [handleFocusOutside, setHandleFocusOutside] = (0, import_element.useState)(void 0);
   const bindFocusOutsideHandler = (0, import_element.useCallback)((node) => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : void 0), []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {