@wordpress/components 19.11.0 → 19.12.0

package/build/date-time/time/timezone.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/date-time/time/timezone.tsx"],"names":["TimeZone","timezone","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","timezoneDetail","string","replace"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA,MAAMA,QAAQ,GAAG,MAAM;AACtB,QAAM;AAAEC,IAAAA;AAAF,MAAe,sCAArB,CADsB,CAGtB;;AACA,QAAMC,kBAAkB,GAAG,CAAC,CAAD,IAAO,IAAIC,IAAJ,GAAWC,iBAAX,KAAiC,EAAxC,CAA3B,CAJsB,CAMtB;AACA;;AACA,MAAKC,MAAM,CAAEJ,QAAQ,CAACK,MAAX,CAAN,KAA8BJ,kBAAnC,EAAwD;AACvD,WAAO,IAAP;AACA;;AAED,QAAMK,YAAY,GAAGF,MAAM,CAAEJ,QAAQ,CAACK,MAAX,CAAN,IAA6B,CAA7B,GAAiC,GAAjC,GAAuC,EAA5D;AACA,QAAME,QAAQ,GACb,OAAOP,QAAQ,CAACQ,IAAhB,IAAwBC,KAAK,CAAEL,MAAM,CAAEJ,QAAQ,CAACQ,IAAX,CAAR,CAA7B,GACGR,QAAQ,CAACQ,IADZ,GAEI,MAAMF,YAAc,GAAGN,QAAQ,CAACK,MAAQ,EAH7C;AAKA,QAAMK,cAAc,GACnB,UAAUV,QAAQ,CAACW,MAAnB,GACG,cAAI,4BAAJ,CADH,GAEI,IAAIJ,QAAU,KAAKP,QAAQ,CAACW,MAAT,CAAgBC,OAAhB,CAAyB,GAAzB,EAA8B,GAA9B,CAAqC,EAH7D;AAKA,SACC,4BAAC,gBAAD;AAAS,IAAA,QAAQ,EAAC,YAAlB;AAA+B,IAAA,IAAI,EAAGF;AAAtC,KACC,4BAAC,gBAAD;AAAiB,IAAA,SAAS,EAAC;AAA3B,KACGH,QADH,CADD,CADD;AAOA,CA9BD;;eAgCeR,Q","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalGetSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../../tooltip';\nimport { TimeZone as StyledComponent } from './styles';\n\n/**\n * Displays timezone information when user timezone is different from site\n * timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = Number( timezone.offset ) >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offset }`;\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;\n\n\treturn (\n\t\t<Tooltip position=\"top center\" text={ timezoneDetail }>\n\t\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t\t{ zoneAbbr }\n\t\t\t</StyledComponent>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"]}

package/build/draggable/index.native.js

@@ -42,6 +42,7 @@ const {
  * @param {Function}    [props.onDragEnd]   Callback when dragging ends.
  * @param {Function}    [props.onDragOver]  Callback when dragging happens over an element.
  * @param {Function}    [props.onDragStart] Callback when dragging starts.
+ * @param {string}      [props.testID]      Id used for querying the pan gesture in tests.
  *
  * @return {JSX.Element} The component to be rendered.
  */
@@ -51,7 +52,8 @@ const Draggable = _ref => {
     children,
     onDragEnd,
     onDragOver,
-    onDragStart
+    onDragStart,
+    testID
   } = _ref;
   const isDragging = (0, _reactNativeReanimated.useSharedValue)(false);
   const isPanActive = (0, _reactNativeReanimated.useSharedValue)(false);
@@ -132,7 +134,7 @@ const Draggable = _ref => {
     currentFirstTouchId.value = null;
     isPanActive.value = false;
     isDragging.value = false;
-  }).withRef(panGestureRef).shouldCancelWhenOutside(false);
+  }).withRef(panGestureRef).shouldCancelWhenOutside(false).withTestId(testID);
 
   const providerValue = (0, _element.useMemo)(() => {
     return {
@@ -163,6 +165,7 @@ const Draggable = _ref => {
  * @param {number}      [props.minDuration]    Minimum time, that a finger must remain pressed on the corresponding view.
  * @param {Function}    [props.onLongPress]    Callback when long-press gesture is triggered over an element.
  * @param {Function}    [props.onLongPressEnd] Callback when long-press gesture ends.
+ * @param {string}      [props.testID]         Id used for querying the long-press gesture handler in tests.
  *
  * @return {JSX.Element} The component to be rendered.
  */
@@ -176,7 +179,8 @@ const DraggableTrigger = _ref2 => {
     maxDistance = 1000,
     minDuration = 500,
     onLongPress,
-    onLongPressEnd
+    onLongPressEnd,
+    testID
   } = _ref2;
   const {
     panGestureRef,
@@ -190,8 +194,8 @@ const DraggableTrigger = _ref2 => {
         return;
       }
 
-      isDragging.value = true;
       draggingId.value = id;
+      isDragging.value = true;
 
       if (onLongPress) {
         (0, _reactNativeReanimated.runOnJS)(onLongPress)(id);
@@ -213,7 +217,8 @@ const DraggableTrigger = _ref2 => {
     maxDist: maxDistance,
     simultaneousHandlers: panGestureRef,
     shouldCancelWhenOutside: false,
-    onGestureEvent: gestureHandler
+    onGestureEvent: gestureHandler,
+    testID: testID
   }, children);
 };
 

package/build/draggable/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/draggable/index.native.js"],"names":["Context","Provider","Draggable","children","onDragEnd","onDragOver","onDragStart","isDragging","isPanActive","draggingId","panGestureRef","currentFirstTouchId","initialPosition","x","y","lastPosition","value","result","previous","id","getFirstTouchEvent","event","allTouches","find","touch","panGesture","Gesture","Pan","manualActivation","onTouchesDown","firstEvent","onTouchesMove","state","activate","end","onTouchesCancelled","_event","onEnd","withRef","shouldCancelWhenOutside","providerValue","styles","draggable__container","DraggableTrigger","enabled","maxDistance","minDuration","onLongPress","onLongPressEnd","gestureHandler","onActive"],"mappings":";;;;;;;;;AAkBA;;AAfA;;AAKA;;AAeA;;;;;;AAvBA;AACA;AACA;;AAaA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,OAAO,GAAG,4BAAe,EAAf,CAAhB;AACA,MAAM;AAAEC,EAAAA;AAAF,IAAeD,OAArB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAME,SAAS,GAAG,QAAwD;AAAA,MAAtD;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuBC,IAAAA,UAAvB;AAAmCC,IAAAA;AAAnC,GAAsD;AACzE,QAAMC,UAAU,GAAG,2CAAgB,KAAhB,CAAnB;AACA,QAAMC,WAAW,GAAG,2CAAgB,KAAhB,CAApB;AACA,QAAMC,UAAU,GAAG,2CAAgB,EAAhB,CAAnB;AACA,QAAMC,aAAa,GAAG,sBAAtB;AACA,QAAMC,mBAAmB,GAAG,2CAAgB,IAAhB,CAA5B;AAEA,QAAMC,eAAe,GAAG;AACvBC,IAAAA,CAAC,EAAE,2CAAgB,CAAhB,CADoB;AAEvBC,IAAAA,CAAC,EAAE,2CAAgB,CAAhB;AAFoB,GAAxB;AAIA,QAAMC,YAAY,GAAG;AACpBF,IAAAA,CAAC,EAAE,2CAAgB,CAAhB,CADiB;AAEpBC,IAAAA,CAAC,EAAE,2CAAgB,CAAhB;AAFiB,GAArB;AAKA,kDACC,MAAMP,UAAU,CAACS,KADlB,EAEC,CAAEC,MAAF,EAAUC,QAAV,KAAwB;AACvB,QAAKD,MAAM,KAAKC,QAAX,IAAuBA,QAAQ,KAAK,IAAzC,EAAgD;AAC/C;AACA;;AAED,QAAKD,MAAL,EAAc;AACb,UAAKX,WAAL,EAAmB;AAClBA,QAAAA,WAAW,CAAE;AACZO,UAAAA,CAAC,EAAED,eAAe,CAACC,CAAhB,CAAkBG,KADT;AAEZF,UAAAA,CAAC,EAAEF,eAAe,CAACE,CAAhB,CAAkBE,KAFT;AAGZG,UAAAA,EAAE,EAAEV,UAAU,CAACO;AAHH,SAAF,CAAX;AAKA;AACD,KARD,MAQO,IAAKZ,SAAL,EAAiB;AACvBA,MAAAA,SAAS,CAAE;AACVS,QAAAA,CAAC,EAAEE,YAAY,CAACF,CAAb,CAAeG,KADR;AAEVF,QAAAA,CAAC,EAAEC,YAAY,CAACD,CAAb,CAAeE,KAFR;AAGVG,QAAAA,EAAE,EAAEV,UAAU,CAACO;AAHL,OAAF,CAAT;AAKA;AACD,GAtBF;;AAyBA,WAASI,kBAAT,CAA6BC,KAA7B,EAAqC;AACpC;;AAEA,WAAOA,KAAK,CAACC,UAAN,CAAiBC,IAAjB,CACJC,KAAF,IAAaA,KAAK,CAACL,EAAN,KAAaR,mBAAmB,CAACK,KADxC,CAAP;AAGA;;AAED,QAAMS,UAAU,GAAGC,mCAAQC,GAAR,GACjBC,gBADiB,CACC,IADD,EAEjBC,aAFiB,CAEAR,KAAF,IAAa;AAC5B,QAAK,CAAEV,mBAAmB,CAACK,KAA3B,EAAmC;AAClC,YAAMc,UAAU,GAAGT,KAAK,CAACC,UAAN,CAAkB,CAAlB,CAAnB;AACA,YAAM;AAAET,QAAAA,CAAC,GAAG,CAAN;AAASC,QAAAA,CAAC,GAAG;AAAb,UAAmBgB,UAAzB;AAEAnB,MAAAA,mBAAmB,CAACK,KAApB,GAA4Bc,UAAU,CAACX,EAAvC;AAEAP,MAAAA,eAAe,CAACC,CAAhB,CAAkBG,KAAlB,GAA0BH,CAA1B;AACAD,MAAAA,eAAe,CAACE,CAAhB,CAAkBE,KAAlB,GAA0BF,CAA1B;AACA;AACD,GAZiB,EAajBiB,aAbiB,CAaF,CAAEV,KAAF,EAASW,KAAT,KAAoB;AACnC,QAAK,CAAExB,WAAW,CAACQ,KAAd,IAAuBT,UAAU,CAACS,KAAvC,EAA+C;AAC9CR,MAAAA,WAAW,CAACQ,KAAZ,GAAoB,IAApB;AACAgB,MAAAA,KAAK,CAACC,QAAN;AACA;;AAED,QAAKzB,WAAW,CAACQ,KAAZ,IAAqBT,UAAU,CAACS,KAArC,EAA6C;AAC5C,YAAMc,UAAU,GAAGV,kBAAkB,CAAEC,KAAF,CAArC;;AAEA,UAAK,CAAES,UAAP,EAAoB;AACnBE,QAAAA,KAAK,CAACE,GAAN;AACA;AACA;;AAEDnB,MAAAA,YAAY,CAACF,CAAb,CAAeG,KAAf,GAAuBc,UAAU,CAACjB,CAAlC;AACAE,MAAAA,YAAY,CAACD,CAAb,CAAeE,KAAf,GAAuBc,UAAU,CAAChB,CAAlC;;AAEA,UAAKT,UAAL,EAAkB;AACjBA,QAAAA,UAAU,CAAEyB,UAAF,CAAV;AACA;AACD;AACD,GAlCiB,EAmCjBK,kBAnCiB,CAmCG,CAAEC,MAAF,EAAUJ,KAAV,KAAqB;AACzCA,IAAAA,KAAK,CAACE,GAAN;AACA,GArCiB,EAsCjBG,KAtCiB,CAsCV,MAAM;AACb1B,IAAAA,mBAAmB,CAACK,KAApB,GAA4B,IAA5B;AACAR,IAAAA,WAAW,CAACQ,KAAZ,GAAoB,KAApB;AACAT,IAAAA,UAAU,CAACS,KAAX,GAAmB,KAAnB;AACA,GA1CiB,EA2CjBsB,OA3CiB,CA2CR5B,aA3CQ,EA4CjB6B,uBA5CiB,CA4CQ,KA5CR,CAAnB;;AA8CA,QAAMC,aAAa,GAAG,sBAAS,MAAM;AACpC,WAAO;AAAE9B,MAAAA,aAAF;AAAiBH,MAAAA,UAAjB;AAA6BC,MAAAA,WAA7B;AAA0CC,MAAAA;AAA1C,KAAP;AACA,GAFqB,EAEnB,EAFmB,CAAtB;AAIA,SACC,4BAAC,0CAAD;AAAiB,IAAA,OAAO,EAAGgB;AAA3B,KACC,4BAAC,8BAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAGgB,eAAOC;AAA9B,KACC,4BAAC,QAAD;AAAU,IAAA,KAAK,EAAGF;AAAlB,KAAoCrC,QAApC,CADD,CADD,CADD;AAOA,CA1GD;AA4GA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMwC,gBAAgB,GAAG,SAQlB;AAAA,MARoB;AAC1BxC,IAAAA,QAD0B;AAE1ByC,IAAAA,OAAO,GAAG,IAFgB;AAG1BzB,IAAAA,EAH0B;AAI1B0B,IAAAA,WAAW,GAAG,IAJY;AAK1BC,IAAAA,WAAW,GAAG,GALY;AAM1BC,IAAAA,WAN0B;AAO1BC,IAAAA;AAP0B,GAQpB;AACN,QAAM;AAAEtC,IAAAA,aAAF;AAAiBH,IAAAA,UAAjB;AAA6BC,IAAAA,WAA7B;AAA0CC,IAAAA;AAA1C,MAAyD,yBAC9DT,OAD8D,CAA/D;AAIA,QAAMiD,cAAc,GAAG,sDAA2B;AACjDC,IAAAA,QAAQ,EAAE,MAAM;AACf,UAAK3C,UAAU,CAACS,KAAhB,EAAwB;AACvB;AACA;;AAEDT,MAAAA,UAAU,CAACS,KAAX,GAAmB,IAAnB;AACAP,MAAAA,UAAU,CAACO,KAAX,GAAmBG,EAAnB;;AACA,UAAK4B,WAAL,EAAmB;AAClB,4CAASA,WAAT,EAAwB5B,EAAxB;AACA;AACD,KAXgD;AAYjDkB,IAAAA,KAAK,EAAE,MAAM;AACZ,UAAK,CAAE7B,WAAW,CAACQ,KAAnB,EAA2B;AAC1BT,QAAAA,UAAU,CAACS,KAAX,GAAmB,KAAnB;AACA;;AAED,UAAKgC,cAAL,EAAsB;AACrB,4CAASA,cAAT,EAA2B7B,EAA3B;AACA;AACD;AApBgD,GAA3B,CAAvB;AAuBA,SACC,4BAAC,kDAAD;AACC,IAAA,OAAO,EAAGyB,OADX;AAEC,IAAA,aAAa,EAAGE,WAFjB;AAGC,IAAA,OAAO,EAAGD,WAHX;AAIC,IAAA,oBAAoB,EAAGnC,aAJxB;AAKC,IAAA,uBAAuB,EAAG,KAL3B;AAMC,IAAA,cAAc,EAAGuC;AANlB,KAQG9C,QARH,CADD;AAYA,CAhDD;;;eAmDeD,S","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tGesture,\n\tGestureDetector,\n\tLongPressGestureHandler,\n} from 'react-native-gesture-handler';\nimport Animated, {\n\tuseSharedValue,\n\trunOnJS,\n\tuseAnimatedReaction,\n\tuseAnimatedGestureHandler,\n} from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext, useRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst Context = createContext( {} );\nconst { Provider } = Context;\n\n/**\n * Draggable component.\n *\n * @param {Object}      props               Component props.\n * @param {JSX.Element} props.children      Children to be rendered.\n * @param {Function}    [props.onDragEnd]   Callback when dragging ends.\n * @param {Function}    [props.onDragOver]  Callback when dragging happens over an element.\n * @param {Function}    [props.onDragStart] Callback when dragging starts.\n *\n * @return {JSX.Element} The component to be rendered.\n */\nconst Draggable = ( { children, onDragEnd, onDragOver, onDragStart } ) => {\n\tconst isDragging = useSharedValue( false );\n\tconst isPanActive = useSharedValue( false );\n\tconst draggingId = useSharedValue( '' );\n\tconst panGestureRef = useRef();\n\tconst currentFirstTouchId = useSharedValue( null );\n\n\tconst initialPosition = {\n\t\tx: useSharedValue( 0 ),\n\t\ty: useSharedValue( 0 ),\n\t};\n\tconst lastPosition = {\n\t\tx: useSharedValue( 0 ),\n\t\ty: useSharedValue( 0 ),\n\t};\n\n\tuseAnimatedReaction(\n\t\t() => isDragging.value,\n\t\t( result, previous ) => {\n\t\t\tif ( result === previous || previous === null ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( result ) {\n\t\t\t\tif ( onDragStart ) {\n\t\t\t\t\tonDragStart( {\n\t\t\t\t\t\tx: initialPosition.x.value,\n\t\t\t\t\t\ty: initialPosition.y.value,\n\t\t\t\t\t\tid: draggingId.value,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} else if ( onDragEnd ) {\n\t\t\t\tonDragEnd( {\n\t\t\t\t\tx: lastPosition.x.value,\n\t\t\t\t\ty: lastPosition.y.value,\n\t\t\t\t\tid: draggingId.value,\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\t);\n\n\tfunction getFirstTouchEvent( event ) {\n\t\t'worklet';\n\n\t\treturn event.allTouches.find(\n\t\t\t( touch ) => touch.id === currentFirstTouchId.value\n\t\t);\n\t}\n\n\tconst panGesture = Gesture.Pan()\n\t\t.manualActivation( true )\n\t\t.onTouchesDown( ( event ) => {\n\t\t\tif ( ! currentFirstTouchId.value ) {\n\t\t\t\tconst firstEvent = event.allTouches[ 0 ];\n\t\t\t\tconst { x = 0, y = 0 } = firstEvent;\n\n\t\t\t\tcurrentFirstTouchId.value = firstEvent.id;\n\n\t\t\t\tinitialPosition.x.value = x;\n\t\t\t\tinitialPosition.y.value = y;\n\t\t\t}\n\t\t} )\n\t\t.onTouchesMove( ( event, state ) => {\n\t\t\tif ( ! isPanActive.value && isDragging.value ) {\n\t\t\t\tisPanActive.value = true;\n\t\t\t\tstate.activate();\n\t\t\t}\n\n\t\t\tif ( isPanActive.value && isDragging.value ) {\n\t\t\t\tconst firstEvent = getFirstTouchEvent( event );\n\n\t\t\t\tif ( ! firstEvent ) {\n\t\t\t\t\tstate.end();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlastPosition.x.value = firstEvent.x;\n\t\t\t\tlastPosition.y.value = firstEvent.y;\n\n\t\t\t\tif ( onDragOver ) {\n\t\t\t\t\tonDragOver( firstEvent );\n\t\t\t\t}\n\t\t\t}\n\t\t} )\n\t\t.onTouchesCancelled( ( _event, state ) => {\n\t\t\tstate.end();\n\t\t} )\n\t\t.onEnd( () => {\n\t\t\tcurrentFirstTouchId.value = null;\n\t\t\tisPanActive.value = false;\n\t\t\tisDragging.value = false;\n\t\t} )\n\t\t.withRef( panGestureRef )\n\t\t.shouldCancelWhenOutside( false );\n\n\tconst providerValue = useMemo( () => {\n\t\treturn { panGestureRef, isDragging, isPanActive, draggingId };\n\t}, [] );\n\n\treturn (\n\t\t<GestureDetector gesture={ panGesture }>\n\t\t\t<Animated.View style={ styles.draggable__container }>\n\t\t\t\t<Provider value={ providerValue }>{ children }</Provider>\n\t\t\t</Animated.View>\n\t\t</GestureDetector>\n\t);\n};\n\n/**\n * Draggable trigger component.\n *\n * This component acts as the trigger for the dragging functionality.\n *\n * @param {Object}      props                  Component props.\n * @param {JSX.Element} props.children         Children to be rendered.\n * @param {*}           props.id               Identifier passed within the event callbacks.\n * @param {boolean}     [props.enabled]        Enables the long-press gesture.\n * @param {number}      [props.maxDistance]    Maximum distance, that defines how far the finger is allowed to travel during a long press gesture.\n * @param {number}      [props.minDuration]    Minimum time, that a finger must remain pressed on the corresponding view.\n * @param {Function}    [props.onLongPress]    Callback when long-press gesture is triggered over an element.\n * @param {Function}    [props.onLongPressEnd] Callback when long-press gesture ends.\n *\n * @return {JSX.Element} The component to be rendered.\n */\nconst DraggableTrigger = ( {\n\tchildren,\n\tenabled = true,\n\tid,\n\tmaxDistance = 1000,\n\tminDuration = 500,\n\tonLongPress,\n\tonLongPressEnd,\n} ) => {\n\tconst { panGestureRef, isDragging, isPanActive, draggingId } = useContext(\n\t\tContext\n\t);\n\n\tconst gestureHandler = useAnimatedGestureHandler( {\n\t\tonActive: () => {\n\t\t\tif ( isDragging.value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tisDragging.value = true;\n\t\t\tdraggingId.value = id;\n\t\t\tif ( onLongPress ) {\n\t\t\t\trunOnJS( onLongPress )( id );\n\t\t\t}\n\t\t},\n\t\tonEnd: () => {\n\t\t\tif ( ! isPanActive.value ) {\n\t\t\t\tisDragging.value = false;\n\t\t\t}\n\n\t\t\tif ( onLongPressEnd ) {\n\t\t\t\trunOnJS( onLongPressEnd )( id );\n\t\t\t}\n\t\t},\n\t} );\n\n\treturn (\n\t\t<LongPressGestureHandler\n\t\t\tenabled={ enabled }\n\t\t\tminDurationMs={ minDuration }\n\t\t\tmaxDist={ maxDistance }\n\t\t\tsimultaneousHandlers={ panGestureRef }\n\t\t\tshouldCancelWhenOutside={ false }\n\t\t\tonGestureEvent={ gestureHandler }\n\t\t>\n\t\t\t{ children }\n\t\t</LongPressGestureHandler>\n\t);\n};\n\nexport { DraggableTrigger };\nexport default Draggable;\n"]}
+{"version":3,"sources":["@wordpress/components/src/draggable/index.native.js"],"names":["Context","Provider","Draggable","children","onDragEnd","onDragOver","onDragStart","testID","isDragging","isPanActive","draggingId","panGestureRef","currentFirstTouchId","initialPosition","x","y","lastPosition","value","result","previous","id","getFirstTouchEvent","event","allTouches","find","touch","panGesture","Gesture","Pan","manualActivation","onTouchesDown","firstEvent","onTouchesMove","state","activate","end","onTouchesCancelled","_event","onEnd","withRef","shouldCancelWhenOutside","withTestId","providerValue","styles","draggable__container","DraggableTrigger","enabled","maxDistance","minDuration","onLongPress","onLongPressEnd","gestureHandler","onActive"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tGesture,\n\tGestureDetector,\n\tLongPressGestureHandler,\n} from 'react-native-gesture-handler';\nimport Animated, {\n\tuseSharedValue,\n\trunOnJS,\n\tuseAnimatedReaction,\n\tuseAnimatedGestureHandler,\n} from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext, useRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst Context = createContext( {} );\nconst { Provider } = Context;\n\n/**\n * Draggable component.\n *\n * @param {Object}      props               Component props.\n * @param {JSX.Element} props.children      Children to be rendered.\n * @param {Function}    [props.onDragEnd]   Callback when dragging ends.\n * @param {Function}    [props.onDragOver]  Callback when dragging happens over an element.\n * @param {Function}    [props.onDragStart] Callback when dragging starts.\n * @param {string}      [props.testID]      Id used for querying the pan gesture in tests.\n *\n * @return {JSX.Element} The component to be rendered.\n */\nconst Draggable = ( {\n\tchildren,\n\tonDragEnd,\n\tonDragOver,\n\tonDragStart,\n\ttestID,\n} ) => {\n\tconst isDragging = useSharedValue( false );\n\tconst isPanActive = useSharedValue( false );\n\tconst draggingId = useSharedValue( '' );\n\tconst panGestureRef = useRef();\n\tconst currentFirstTouchId = useSharedValue( null );\n\n\tconst initialPosition = {\n\t\tx: useSharedValue( 0 ),\n\t\ty: useSharedValue( 0 ),\n\t};\n\tconst lastPosition = {\n\t\tx: useSharedValue( 0 ),\n\t\ty: useSharedValue( 0 ),\n\t};\n\n\tuseAnimatedReaction(\n\t\t() => isDragging.value,\n\t\t( result, previous ) => {\n\t\t\tif ( result === previous || previous === null ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( result ) {\n\t\t\t\tif ( onDragStart ) {\n\t\t\t\t\tonDragStart( {\n\t\t\t\t\t\tx: initialPosition.x.value,\n\t\t\t\t\t\ty: initialPosition.y.value,\n\t\t\t\t\t\tid: draggingId.value,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} else if ( onDragEnd ) {\n\t\t\t\tonDragEnd( {\n\t\t\t\t\tx: lastPosition.x.value,\n\t\t\t\t\ty: lastPosition.y.value,\n\t\t\t\t\tid: draggingId.value,\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\t);\n\n\tfunction getFirstTouchEvent( event ) {\n\t\t'worklet';\n\n\t\treturn event.allTouches.find(\n\t\t\t( touch ) => touch.id === currentFirstTouchId.value\n\t\t);\n\t}\n\n\tconst panGesture = Gesture.Pan()\n\t\t.manualActivation( true )\n\t\t.onTouchesDown( ( event ) => {\n\t\t\tif ( ! currentFirstTouchId.value ) {\n\t\t\t\tconst firstEvent = event.allTouches[ 0 ];\n\t\t\t\tconst { x = 0, y = 0 } = firstEvent;\n\n\t\t\t\tcurrentFirstTouchId.value = firstEvent.id;\n\n\t\t\t\tinitialPosition.x.value = x;\n\t\t\t\tinitialPosition.y.value = y;\n\t\t\t}\n\t\t} )\n\t\t.onTouchesMove( ( event, state ) => {\n\t\t\tif ( ! isPanActive.value && isDragging.value ) {\n\t\t\t\tisPanActive.value = true;\n\t\t\t\tstate.activate();\n\t\t\t}\n\n\t\t\tif ( isPanActive.value && isDragging.value ) {\n\t\t\t\tconst firstEvent = getFirstTouchEvent( event );\n\n\t\t\t\tif ( ! firstEvent ) {\n\t\t\t\t\tstate.end();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlastPosition.x.value = firstEvent.x;\n\t\t\t\tlastPosition.y.value = firstEvent.y;\n\n\t\t\t\tif ( onDragOver ) {\n\t\t\t\t\tonDragOver( firstEvent );\n\t\t\t\t}\n\t\t\t}\n\t\t} )\n\t\t.onTouchesCancelled( ( _event, state ) => {\n\t\t\tstate.end();\n\t\t} )\n\t\t.onEnd( () => {\n\t\t\tcurrentFirstTouchId.value = null;\n\t\t\tisPanActive.value = false;\n\t\t\tisDragging.value = false;\n\t\t} )\n\t\t.withRef( panGestureRef )\n\t\t.shouldCancelWhenOutside( false )\n\t\t.withTestId( testID );\n\n\tconst providerValue = useMemo( () => {\n\t\treturn { panGestureRef, isDragging, isPanActive, draggingId };\n\t}, [] );\n\n\treturn (\n\t\t<GestureDetector gesture={ panGesture }>\n\t\t\t<Animated.View style={ styles.draggable__container }>\n\t\t\t\t<Provider value={ providerValue }>{ children }</Provider>\n\t\t\t</Animated.View>\n\t\t</GestureDetector>\n\t);\n};\n\n/**\n * Draggable trigger component.\n *\n * This component acts as the trigger for the dragging functionality.\n *\n * @param {Object}      props                  Component props.\n * @param {JSX.Element} props.children         Children to be rendered.\n * @param {*}           props.id               Identifier passed within the event callbacks.\n * @param {boolean}     [props.enabled]        Enables the long-press gesture.\n * @param {number}      [props.maxDistance]    Maximum distance, that defines how far the finger is allowed to travel during a long press gesture.\n * @param {number}      [props.minDuration]    Minimum time, that a finger must remain pressed on the corresponding view.\n * @param {Function}    [props.onLongPress]    Callback when long-press gesture is triggered over an element.\n * @param {Function}    [props.onLongPressEnd] Callback when long-press gesture ends.\n * @param {string}      [props.testID]         Id used for querying the long-press gesture handler in tests.\n *\n * @return {JSX.Element} The component to be rendered.\n */\nconst DraggableTrigger = ( {\n\tchildren,\n\tenabled = true,\n\tid,\n\tmaxDistance = 1000,\n\tminDuration = 500,\n\tonLongPress,\n\tonLongPressEnd,\n\ttestID,\n} ) => {\n\tconst { panGestureRef, isDragging, isPanActive, draggingId } = useContext(\n\t\tContext\n\t);\n\n\tconst gestureHandler = useAnimatedGestureHandler( {\n\t\tonActive: () => {\n\t\t\tif ( isDragging.value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tdraggingId.value = id;\n\t\t\tisDragging.value = true;\n\t\t\tif ( onLongPress ) {\n\t\t\t\trunOnJS( onLongPress )( id );\n\t\t\t}\n\t\t},\n\t\tonEnd: () => {\n\t\t\tif ( ! isPanActive.value ) {\n\t\t\t\tisDragging.value = false;\n\t\t\t}\n\n\t\t\tif ( onLongPressEnd ) {\n\t\t\t\trunOnJS( onLongPressEnd )( id );\n\t\t\t}\n\t\t},\n\t} );\n\n\treturn (\n\t\t<LongPressGestureHandler\n\t\t\tenabled={ enabled }\n\t\t\tminDurationMs={ minDuration }\n\t\t\tmaxDist={ maxDistance }\n\t\t\tsimultaneousHandlers={ panGestureRef }\n\t\t\tshouldCancelWhenOutside={ false }\n\t\t\tonGestureEvent={ gestureHandler }\n\t\t\ttestID={ testID }\n\t\t>\n\t\t\t{ children }\n\t\t</LongPressGestureHandler>\n\t);\n};\n\nexport { DraggableTrigger };\nexport default Draggable;\n"]}

package/build/dropdown/index.js

@@ -40,6 +40,8 @@ function useObservableState(initialState, onStateChange) {
 }
 
 function Dropdown(props) {
+  var _containerRef$current;
+
   const {
     renderContent,
     renderToggle,
@@ -114,7 +116,8 @@ function Dropdown(props) {
     // align with the editor header by default.
     ,
     offset: 13,
-    anchorRef: !hasAnchorRef ? containerRef : undefined
+    anchorRef: !hasAnchorRef ? containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.firstChild // Anchor to the rendered toggle.
+    : undefined
   }, popoverProps, {
     className: (0, _classnames.default)('components-dropdown__content', popoverProps ? popoverProps.className : undefined, contentClassName)
   }), renderContent(args)));

package/build/dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/dropdown/index.js"],"names":["useObservableState","initialState","onStateChange","state","setState","value","Dropdown","props","renderContent","renderToggle","className","contentClassName","expandOnMobile","headerTitle","focusOnMount","position","popoverProps","onClose","onToggle","containerRef","isOpen","setIsOpen","toggle","closeIfFocusOutside","ownerDocument","current","dialog","activeElement","closest","contains","close","args","hasAnchorRef","anchorRef","getAnchorRect","anchorRect","undefined"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Popover from '../popover';\n\nfunction useObservableState( initialState, onStateChange ) {\n\tconst [ state, setState ] = useState( initialState );\n\treturn [\n\t\tstate,\n\t\t( value ) => {\n\t\t\tsetState( value );\n\t\t\tif ( onStateChange ) {\n\t\t\t\tonStateChange( value );\n\t\t\t}\n\t\t},\n\t];\n}\n\nexport default function Dropdown( props ) {\n\tconst {\n\t\trenderContent,\n\t\trenderToggle,\n\t\tclassName,\n\t\tcontentClassName,\n\t\texpandOnMobile,\n\t\theaderTitle,\n\t\tfocusOnMount,\n\t\tposition,\n\t\tpopoverProps,\n\t\tonClose,\n\t\tonToggle,\n\t} = props;\n\tconst containerRef = useRef();\n\tconst [ isOpen, setIsOpen ] = useObservableState( false, onToggle );\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tif ( onToggle ) {\n\t\t\t\tonToggle( false );\n\t\t\t}\n\t\t},\n\t\t[]\n\t);\n\n\tfunction toggle() {\n\t\tsetIsOpen( ! isOpen );\n\t}\n\n\t/**\n\t * Closes the popover when focus leaves it unless the toggle was pressed or\n\t * focus has moved to a separate dialog. The former is to let the toggle\n\t * handle closing the popover and the latter is to preserve presence in\n\t * case a dialog has opened, allowing focus to return when it's dismissed.\n\t */\n\tfunction closeIfFocusOutside() {\n\t\tconst { ownerDocument } = containerRef.current;\n\t\tconst dialog = ownerDocument.activeElement.closest( '[role=\"dialog\"]' );\n\t\tif (\n\t\t\t! containerRef.current.contains( ownerDocument.activeElement ) &&\n\t\t\t( ! dialog || dialog.contains( containerRef.current ) )\n\t\t) {\n\t\t\tclose();\n\t\t}\n\t}\n\n\tfunction close() {\n\t\tif ( onClose ) {\n\t\t\tonClose();\n\t\t}\n\t\tsetIsOpen( false );\n\t}\n\n\tconst args = { isOpen, onToggle: toggle, onClose: close };\n\tconst hasAnchorRef =\n\t\t!! popoverProps?.anchorRef ||\n\t\t!! popoverProps?.getAnchorRect ||\n\t\t!! popoverProps?.anchorRect;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames( 'components-dropdown', className ) }\n\t\t\tref={ containerRef }\n\t\t\t// Some UAs focus the closest focusable parent when the toggle is\n\t\t\t// clicked. Making this div focusable ensures such UAs will focus\n\t\t\t// it and `closeIfFocusOutside` can tell if the toggle was clicked.\n\t\t\ttabIndex=\"-1\"\n\t\t>\n\t\t\t{ renderToggle( args ) }\n\t\t\t{ isOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\tposition={ position }\n\t\t\t\t\tonClose={ close }\n\t\t\t\t\tonFocusOutside={ closeIfFocusOutside }\n\t\t\t\t\texpandOnMobile={ expandOnMobile }\n\t\t\t\t\theaderTitle={ headerTitle }\n\t\t\t\t\tfocusOnMount={ focusOnMount }\n\t\t\t\t\t// This value is used to ensure that the dropdowns\n\t\t\t\t\t// align with the editor header by default.\n\t\t\t\t\toffset={ 13 }\n\t\t\t\t\tanchorRef={ ! hasAnchorRef ? containerRef : undefined }\n\t\t\t\t\t{ ...popoverProps }\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-dropdown__content',\n\t\t\t\t\t\tpopoverProps ? popoverProps.className : undefined,\n\t\t\t\t\t\tcontentClassName\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t{ renderContent( args ) }\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/dropdown/index.js"],"names":["useObservableState","initialState","onStateChange","state","setState","value","Dropdown","props","renderContent","renderToggle","className","contentClassName","expandOnMobile","headerTitle","focusOnMount","position","popoverProps","onClose","onToggle","containerRef","isOpen","setIsOpen","toggle","closeIfFocusOutside","ownerDocument","current","dialog","activeElement","closest","contains","close","args","hasAnchorRef","anchorRef","getAnchorRect","anchorRect","firstChild","undefined"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Popover from '../popover';\n\nfunction useObservableState( initialState, onStateChange ) {\n\tconst [ state, setState ] = useState( initialState );\n\treturn [\n\t\tstate,\n\t\t( value ) => {\n\t\t\tsetState( value );\n\t\t\tif ( onStateChange ) {\n\t\t\t\tonStateChange( value );\n\t\t\t}\n\t\t},\n\t];\n}\n\nexport default function Dropdown( props ) {\n\tconst {\n\t\trenderContent,\n\t\trenderToggle,\n\t\tclassName,\n\t\tcontentClassName,\n\t\texpandOnMobile,\n\t\theaderTitle,\n\t\tfocusOnMount,\n\t\tposition,\n\t\tpopoverProps,\n\t\tonClose,\n\t\tonToggle,\n\t} = props;\n\tconst containerRef = useRef();\n\tconst [ isOpen, setIsOpen ] = useObservableState( false, onToggle );\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tif ( onToggle ) {\n\t\t\t\tonToggle( false );\n\t\t\t}\n\t\t},\n\t\t[]\n\t);\n\n\tfunction toggle() {\n\t\tsetIsOpen( ! isOpen );\n\t}\n\n\t/**\n\t * Closes the popover when focus leaves it unless the toggle was pressed or\n\t * focus has moved to a separate dialog. The former is to let the toggle\n\t * handle closing the popover and the latter is to preserve presence in\n\t * case a dialog has opened, allowing focus to return when it's dismissed.\n\t */\n\tfunction closeIfFocusOutside() {\n\t\tconst { ownerDocument } = containerRef.current;\n\t\tconst dialog = ownerDocument.activeElement.closest( '[role=\"dialog\"]' );\n\t\tif (\n\t\t\t! containerRef.current.contains( ownerDocument.activeElement ) &&\n\t\t\t( ! dialog || dialog.contains( containerRef.current ) )\n\t\t) {\n\t\t\tclose();\n\t\t}\n\t}\n\n\tfunction close() {\n\t\tif ( onClose ) {\n\t\t\tonClose();\n\t\t}\n\t\tsetIsOpen( false );\n\t}\n\n\tconst args = { isOpen, onToggle: toggle, onClose: close };\n\tconst hasAnchorRef =\n\t\t!! popoverProps?.anchorRef ||\n\t\t!! popoverProps?.getAnchorRect ||\n\t\t!! popoverProps?.anchorRect;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames( 'components-dropdown', className ) }\n\t\t\tref={ containerRef }\n\t\t\t// Some UAs focus the closest focusable parent when the toggle is\n\t\t\t// clicked. Making this div focusable ensures such UAs will focus\n\t\t\t// it and `closeIfFocusOutside` can tell if the toggle was clicked.\n\t\t\ttabIndex=\"-1\"\n\t\t>\n\t\t\t{ renderToggle( args ) }\n\t\t\t{ isOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\tposition={ position }\n\t\t\t\t\tonClose={ close }\n\t\t\t\t\tonFocusOutside={ closeIfFocusOutside }\n\t\t\t\t\texpandOnMobile={ expandOnMobile }\n\t\t\t\t\theaderTitle={ headerTitle }\n\t\t\t\t\tfocusOnMount={ focusOnMount }\n\t\t\t\t\t// This value is used to ensure that the dropdowns\n\t\t\t\t\t// align with the editor header by default.\n\t\t\t\t\toffset={ 13 }\n\t\t\t\t\tanchorRef={\n\t\t\t\t\t\t! hasAnchorRef\n\t\t\t\t\t\t\t? containerRef?.current?.firstChild // Anchor to the rendered toggle.\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\t{ ...popoverProps }\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-dropdown__content',\n\t\t\t\t\t\tpopoverProps ? popoverProps.className : undefined,\n\t\t\t\t\t\tcontentClassName\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t{ renderContent( args ) }\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"]}

package/build/input-control/index.js

@@ -23,6 +23,8 @@ var _inputBase = _interopRequireDefault(require("./input-base"));
 
 var _inputField = _interopRequireDefault(require("./input-field"));
 
+var _utils = require("./utils");
+
 /**
  * External dependencies
  */
@@ -63,6 +65,11 @@ function UnforwardedInputControl(_ref, ref) {
   const [isFocused, setIsFocused] = (0, _element.useState)(false);
   const id = useUniqueId(idProp);
   const classes = (0, _classnames.default)('components-input-control', className);
+  const draftHookProps = (0, _utils.useDraft)({
+    value,
+    onBlur: props.onBlur,
+    onChange
+  });
   return (0, _element.createElement)(_inputBase.default, {
     __unstableInputWidth: __unstableInputWidth,
     className: classes,
@@ -83,15 +90,13 @@ function UnforwardedInputControl(_ref, ref) {
     id: id,
     isFocused: isFocused,
     isPressEnterToChange: isPressEnterToChange,
-    onChange: onChange,
     onKeyDown: onKeyDown,
     onValidate: onValidate,
     ref: ref,
     setIsFocused: setIsFocused,
     size: size,
-    stateReducer: stateReducer,
-    value: value
-  })));
+    stateReducer: stateReducer
+  }, draftHookProps)));
 }
 /**
  * InputControl components let users enter and edit text. This is an experimental component

package/build/input-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/input-control/index.tsx"],"names":["useUniqueId","idProp","instanceId","InputControl","id","UnforwardedInputControl","ref","__unstableStateReducer","stateReducer","state","__unstableInputWidth","className","disabled","hideLabelFromVision","isPressEnterToChange","label","labelPosition","onChange","noop","onValidate","onKeyDown","prefix","size","suffix","value","props","isFocused","setIsFocused","classes"],"mappings":";;;;;;;;;;;AAWA;;;;AARA;;AACA;;AAMA;;AAMA;;AACA;;AAjBA;AACA;AACA;;AAKA;AACA;AACA;;AAIA;AACA;AACA;AAKA,SAASA,WAAT,CAAsBC,MAAtB,EAAwC;AACvC,QAAMC,UAAU,GAAG,4BAAeC,YAAf,CAAnB;AACA,QAAMC,EAAE,GAAI,2BAA2BF,UAAY,EAAnD;AAEA,SAAOD,MAAM,IAAIG,EAAjB;AACA;;AAEM,SAASC,uBAAT,OAoBNC,GApBM,EAqBL;AAAA,MApBD;AACCC,IAAAA,sBAAsB,EAAEC,YAAY,GAAKC,KAAF,IAAaA,KADrD;AAECC,IAAAA,oBAFD;AAGCC,IAAAA,SAHD;AAICC,IAAAA,QAAQ,GAAG,KAJZ;AAKCC,IAAAA,mBAAmB,GAAG,KALvB;AAMCT,IAAAA,EAAE,EAAEH,MANL;AAOCa,IAAAA,oBAAoB,GAAG,KAPxB;AAQCC,IAAAA,KARD;AASCC,IAAAA,aAAa,GAAG,KATjB;AAUCC,IAAAA,QAAQ,GAAGC,YAVZ;AAWCC,IAAAA,UAAU,GAAGD,YAXd;AAYCE,IAAAA,SAAS,GAAGF,YAZb;AAaCG,IAAAA,MAbD;AAcCC,IAAAA,IAAI,GAAG,SAdR;AAeCC,IAAAA,MAfD;AAgBCC,IAAAA,KAhBD;AAiBC,OAAGC;AAjBJ,GAoBC;AACD,QAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8B,uBAAU,KAAV,CAApC;AAEA,QAAMvB,EAAE,GAAGJ,WAAW,CAAEC,MAAF,CAAtB;AACA,QAAM2B,OAAO,GAAG,yBAAY,0BAAZ,EAAwCjB,SAAxC,CAAhB;AAEA,SACC,4BAAC,kBAAD;AACC,IAAA,oBAAoB,EAAGD,oBADxB;AAEC,IAAA,SAAS,EAAGkB,OAFb;AAGC,IAAA,QAAQ,EAAGhB,QAHZ;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,mBAAmB,EAAGC,mBALvB;AAMC,IAAA,EAAE,EAAGT,EANN;AAOC,IAAA,SAAS,EAAGsB,SAPb;AAQC,IAAA,OAAO,EAAC,MART;AASC,IAAA,KAAK,EAAGX,KATT;AAUC,IAAA,aAAa,EAAGC,aAVjB;AAWC,IAAA,MAAM,EAAGK,MAXV;AAYC,IAAA,IAAI,EAAGC,IAZR;AAaC,IAAA,MAAM,EAAGC;AAbV,KAeC,4BAAC,mBAAD,6BACME,KADN;AAEC,IAAA,SAAS,EAAC,iCAFX;AAGC,IAAA,QAAQ,EAAGb,QAHZ;AAIC,IAAA,EAAE,EAAGR,EAJN;AAKC,IAAA,SAAS,EAAGsB,SALb;AAMC,IAAA,oBAAoB,EAAGZ,oBANxB;AAOC,IAAA,QAAQ,EAAGG,QAPZ;AAQC,IAAA,SAAS,EAAGG,SARb;AASC,IAAA,UAAU,EAAGD,UATd;AAUC,IAAA,GAAG,EAAGb,GAVP;AAWC,IAAA,YAAY,EAAGqB,YAXhB;AAYC,IAAA,IAAI,EAAGL,IAZR;AAaC,IAAA,YAAY,EAAGd,YAbhB;AAcC,IAAA,KAAK,EAAGgB;AAdT,KAfD,CADD;AAkCA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMrB,YAAY,GAAG,yBAAYE,uBAAZ,CAArB;;eAEQF,Y","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport classNames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InputBase from './input-base';\nimport InputField from './input-field';\nimport type { InputControlProps } from './types';\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( InputControl );\n\tconst id = `inspector-input-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\nexport function UnforwardedInputControl(\n\t{\n\t\t__unstableStateReducer: stateReducer = ( state ) => state,\n\t\t__unstableInputWidth,\n\t\tclassName,\n\t\tdisabled = false,\n\t\thideLabelFromVision = false,\n\t\tid: idProp,\n\t\tisPressEnterToChange = false,\n\t\tlabel,\n\t\tlabelPosition = 'top',\n\t\tonChange = noop,\n\t\tonValidate = noop,\n\t\tonKeyDown = noop,\n\t\tprefix,\n\t\tsize = 'default',\n\t\tsuffix,\n\t\tvalue,\n\t\t...props\n\t}: InputControlProps,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tconst id = useUniqueId( idProp );\n\tconst classes = classNames( 'components-input-control', className );\n\n\treturn (\n\t\t<InputBase\n\t\t\t__unstableInputWidth={ __unstableInputWidth }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tgap={ 3 }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\tisFocused={ isFocused }\n\t\t\tjustify=\"left\"\n\t\t\tlabel={ label }\n\t\t\tlabelPosition={ labelPosition }\n\t\t\tprefix={ prefix }\n\t\t\tsize={ size }\n\t\t\tsuffix={ suffix }\n\t\t>\n\t\t\t<InputField\n\t\t\t\t{ ...props }\n\t\t\t\tclassName=\"components-input-control__input\"\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tid={ id }\n\t\t\t\tisFocused={ isFocused }\n\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\tonValidate={ onValidate }\n\t\t\t\tref={ ref }\n\t\t\t\tsetIsFocused={ setIsFocused }\n\t\t\t\tsize={ size }\n\t\t\t\tstateReducer={ stateReducer }\n\t\t\t\tvalue={ value }\n\t\t\t/>\n\t\t</InputBase>\n\t);\n}\n\n/**\n * InputControl components let users enter and edit text. This is an experimental component\n * intended to (in time) merge with or replace `TextControl`.\n *\n * ```jsx\n * import { __experimentalInputControl as InputControl } from '@wordpress/components';\n * import { useState } from '@wordpress/compose';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '' );\n *\n *   return (\n *  \t<InputControl\n *  \t\tvalue={ value }\n *  \t\tonChange={ ( nextValue ) => setValue( nextValue ?? '' ) }\n *  \t/>\n *   );\n * };\n * ```\n */\nexport const InputControl = forwardRef( UnforwardedInputControl );\n\nexport default InputControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/input-control/index.tsx"],"names":["useUniqueId","idProp","instanceId","InputControl","id","UnforwardedInputControl","ref","__unstableStateReducer","stateReducer","state","__unstableInputWidth","className","disabled","hideLabelFromVision","isPressEnterToChange","label","labelPosition","onChange","noop","onValidate","onKeyDown","prefix","size","suffix","value","props","isFocused","setIsFocused","classes","draftHookProps","onBlur"],"mappings":";;;;;;;;;;;AAWA;;;;AARA;;AACA;;AAMA;;AAMA;;AACA;;AAEA;;AAnBA;AACA;AACA;;AAKA;AACA;AACA;;AAIA;AACA;AACA;AAMA,SAASA,WAAT,CAAsBC,MAAtB,EAAwC;AACvC,QAAMC,UAAU,GAAG,4BAAeC,YAAf,CAAnB;AACA,QAAMC,EAAE,GAAI,2BAA2BF,UAAY,EAAnD;AAEA,SAAOD,MAAM,IAAIG,EAAjB;AACA;;AAEM,SAASC,uBAAT,OAoBNC,GApBM,EAqBL;AAAA,MApBD;AACCC,IAAAA,sBAAsB,EAAEC,YAAY,GAAKC,KAAF,IAAaA,KADrD;AAECC,IAAAA,oBAFD;AAGCC,IAAAA,SAHD;AAICC,IAAAA,QAAQ,GAAG,KAJZ;AAKCC,IAAAA,mBAAmB,GAAG,KALvB;AAMCT,IAAAA,EAAE,EAAEH,MANL;AAOCa,IAAAA,oBAAoB,GAAG,KAPxB;AAQCC,IAAAA,KARD;AASCC,IAAAA,aAAa,GAAG,KATjB;AAUCC,IAAAA,QAAQ,GAAGC,YAVZ;AAWCC,IAAAA,UAAU,GAAGD,YAXd;AAYCE,IAAAA,SAAS,GAAGF,YAZb;AAaCG,IAAAA,MAbD;AAcCC,IAAAA,IAAI,GAAG,SAdR;AAeCC,IAAAA,MAfD;AAgBCC,IAAAA,KAhBD;AAiBC,OAAGC;AAjBJ,GAoBC;AACD,QAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8B,uBAAU,KAAV,CAApC;AAEA,QAAMvB,EAAE,GAAGJ,WAAW,CAAEC,MAAF,CAAtB;AACA,QAAM2B,OAAO,GAAG,yBAAY,0BAAZ,EAAwCjB,SAAxC,CAAhB;AAEA,QAAMkB,cAAc,GAAG,qBAAU;AAChCL,IAAAA,KADgC;AAEhCM,IAAAA,MAAM,EAAEL,KAAK,CAACK,MAFkB;AAGhCb,IAAAA;AAHgC,GAAV,CAAvB;AAMA,SACC,4BAAC,kBAAD;AACC,IAAA,oBAAoB,EAAGP,oBADxB;AAEC,IAAA,SAAS,EAAGkB,OAFb;AAGC,IAAA,QAAQ,EAAGhB,QAHZ;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,mBAAmB,EAAGC,mBALvB;AAMC,IAAA,EAAE,EAAGT,EANN;AAOC,IAAA,SAAS,EAAGsB,SAPb;AAQC,IAAA,OAAO,EAAC,MART;AASC,IAAA,KAAK,EAAGX,KATT;AAUC,IAAA,aAAa,EAAGC,aAVjB;AAWC,IAAA,MAAM,EAAGK,MAXV;AAYC,IAAA,IAAI,EAAGC,IAZR;AAaC,IAAA,MAAM,EAAGC;AAbV,KAeC,4BAAC,mBAAD,6BACME,KADN;AAEC,IAAA,SAAS,EAAC,iCAFX;AAGC,IAAA,QAAQ,EAAGb,QAHZ;AAIC,IAAA,EAAE,EAAGR,EAJN;AAKC,IAAA,SAAS,EAAGsB,SALb;AAMC,IAAA,oBAAoB,EAAGZ,oBANxB;AAOC,IAAA,SAAS,EAAGM,SAPb;AAQC,IAAA,UAAU,EAAGD,UARd;AASC,IAAA,GAAG,EAAGb,GATP;AAUC,IAAA,YAAY,EAAGqB,YAVhB;AAWC,IAAA,IAAI,EAAGL,IAXR;AAYC,IAAA,YAAY,EAAGd;AAZhB,KAaMqB,cAbN,EAfD,CADD;AAiCA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAM1B,YAAY,GAAG,yBAAYE,uBAAZ,CAArB;;eAEQF,Y","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport classNames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InputBase from './input-base';\nimport InputField from './input-field';\nimport type { InputControlProps } from './types';\nimport { useDraft } from './utils';\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( InputControl );\n\tconst id = `inspector-input-control-${ instanceId }`;\n\n\treturn idProp || id;\n}\n\nexport function UnforwardedInputControl(\n\t{\n\t\t__unstableStateReducer: stateReducer = ( state ) => state,\n\t\t__unstableInputWidth,\n\t\tclassName,\n\t\tdisabled = false,\n\t\thideLabelFromVision = false,\n\t\tid: idProp,\n\t\tisPressEnterToChange = false,\n\t\tlabel,\n\t\tlabelPosition = 'top',\n\t\tonChange = noop,\n\t\tonValidate = noop,\n\t\tonKeyDown = noop,\n\t\tprefix,\n\t\tsize = 'default',\n\t\tsuffix,\n\t\tvalue,\n\t\t...props\n\t}: InputControlProps,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\n\tconst id = useUniqueId( idProp );\n\tconst classes = classNames( 'components-input-control', className );\n\n\tconst draftHookProps = useDraft( {\n\t\tvalue,\n\t\tonBlur: props.onBlur,\n\t\tonChange,\n\t} );\n\n\treturn (\n\t\t<InputBase\n\t\t\t__unstableInputWidth={ __unstableInputWidth }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tgap={ 3 }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tid={ id }\n\t\t\tisFocused={ isFocused }\n\t\t\tjustify=\"left\"\n\t\t\tlabel={ label }\n\t\t\tlabelPosition={ labelPosition }\n\t\t\tprefix={ prefix }\n\t\t\tsize={ size }\n\t\t\tsuffix={ suffix }\n\t\t>\n\t\t\t<InputField\n\t\t\t\t{ ...props }\n\t\t\t\tclassName=\"components-input-control__input\"\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tid={ id }\n\t\t\t\tisFocused={ isFocused }\n\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\tonValidate={ onValidate }\n\t\t\t\tref={ ref }\n\t\t\t\tsetIsFocused={ setIsFocused }\n\t\t\t\tsize={ size }\n\t\t\t\tstateReducer={ stateReducer }\n\t\t\t\t{ ...draftHookProps }\n\t\t\t/>\n\t\t</InputBase>\n\t);\n}\n\n/**\n * InputControl components let users enter and edit text. This is an experimental component\n * intended to (in time) merge with or replace `TextControl`.\n *\n * ```jsx\n * import { __experimentalInputControl as InputControl } from '@wordpress/components';\n * import { useState } from '@wordpress/compose';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '' );\n *\n *   return (\n *  \t<InputControl\n *  \t\tvalue={ value }\n *  \t\tonChange={ ( nextValue ) => setValue( nextValue ?? '' ) }\n *  \t/>\n *   );\n * };\n * ```\n */\nexport const InputControl = forwardRef( UnforwardedInputControl );\n\nexport default InputControl;\n"]}

package/build/input-control/input-field.js

@@ -21,8 +21,6 @@ var _inputControlStyles = require("./styles/input-control-styles");
 
 var _reducer = require("./reducer/reducer");
 
-var _utils2 = require("../utils");
-
 /**
  * External dependencies
  */
@@ -72,37 +70,14 @@ function InputField(_ref, ref) {
     isDragEnabled,
     value: valueProp,
     isPressEnterToChange
-  });
+  }, onChange);
   const {
-    _event,
     value,
     isDragging,
     isDirty
   } = state;
   const wasDirtyOnBlur = (0, _element.useRef)(false);
   const dragCursor = (0, _utils.useDragCursor)(isDragging, dragDirection);
-  /*
-   * Handles synchronization of external and internal value state.
-   * If not focused and did not hold a dirty value[1] on blur
-   * updates the value from the props. Otherwise if not holding
-   * a dirty value[1] propagates the value and event through onChange.
-   * [1] value is only made dirty if isPressEnterToChange is true
-   */
-
-  (0, _utils2.useUpdateEffect)(() => {
-    if (valueProp === value) {
-      return;
-    }
-
-    if (!isFocused && !wasDirtyOnBlur.current) {
-      commit(valueProp, _event);
-    } else if (!isDirty) {
-      onChange(value, {
-        event: _event
-      });
-      wasDirtyOnBlur.current = false;
-    }
-  }, [value, isDirty, isFocused, valueProp]);
 
   const handleOnBlur = event => {
     onBlur(event);

package/build/input-control/input-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/input-control/input-field.tsx"],"names":["InputField","ref","disabled","dragDirection","dragThreshold","id","isDragEnabled","isFocused","isPressEnterToChange","onBlur","noop","onChange","onDrag","onDragEnd","onDragStart","onFocus","onKeyDown","onValidate","size","setIsFocused","stateReducer","state","value","valueProp","type","props","change","commit","drag","dragEnd","dragStart","invalidate","pressDown","pressEnter","pressUp","reset","_event","isDragging","isDirty","wasDirtyOnBlur","dragCursor","current","event","handleOnBlur","target","validity","valid","handleOnCommit","handleOnFocus","handleOnChange","nextValue","currentTarget","err","handleOnKeyDown","key","preventDefault","dragGestureProps","dragProps","distance","dragging","stopPropagation","axis","threshold","enabled","pointer","capture","handleOnMouseDown","onMouseDown","ownerDocument","activeElement","focus","ForwardedComponent"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport { useDrag } from '@use-gesture/react';\nimport type {\n\tSyntheticEvent,\n\tChangeEvent,\n\tKeyboardEvent,\n\tPointerEvent,\n\tFocusEvent,\n\tForwardedRef,\n\tMouseEvent,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport { useUpdateEffect } from '../utils';\nimport type { InputFieldProps } from './types';\n\nfunction InputField(\n\t{\n\t\tdisabled = false,\n\t\tdragDirection = 'n',\n\t\tdragThreshold = 10,\n\t\tid,\n\t\tisDragEnabled = false,\n\t\tisFocused,\n\t\tisPressEnterToChange = false,\n\t\tonBlur = noop,\n\t\tonChange = noop,\n\t\tonDrag = noop,\n\t\tonDragEnd = noop,\n\t\tonDragStart = noop,\n\t\tonFocus = noop,\n\t\tonKeyDown = noop,\n\t\tonValidate = noop,\n\t\tsize = 'default',\n\t\tsetIsFocused,\n\t\tstateReducer = ( state: any ) => state,\n\t\tvalue: valueProp,\n\t\ttype,\n\t\t...props\n\t}: WordPressComponentProps< InputFieldProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t// State.\n\t\tstate,\n\t\t// Actions.\n\t\tchange,\n\t\tcommit,\n\t\tdrag,\n\t\tdragEnd,\n\t\tdragStart,\n\t\tinvalidate,\n\t\tpressDown,\n\t\tpressEnter,\n\t\tpressUp,\n\t\treset,\n\t} = useInputControlStateReducer( stateReducer, {\n\t\tisDragEnabled,\n\t\tvalue: valueProp,\n\t\tisPressEnterToChange,\n\t} );\n\n\tconst { _event, value, isDragging, isDirty } = state;\n\tconst wasDirtyOnBlur = useRef( false );\n\n\tconst dragCursor = useDragCursor( isDragging, dragDirection );\n\n\t/*\n\t * Handles synchronization of external and internal value state.\n\t * If not focused and did not hold a dirty value[1] on blur\n\t * updates the value from the props. Otherwise if not holding\n\t * a dirty value[1] propagates the value and event through onChange.\n\t * [1] value is only made dirty if isPressEnterToChange is true\n\t */\n\tuseUpdateEffect( () => {\n\t\tif ( valueProp === value ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( ! isFocused && ! wasDirtyOnBlur.current ) {\n\t\t\tcommit( valueProp, _event as SyntheticEvent );\n\t\t} else if ( ! isDirty ) {\n\t\t\tonChange( value, {\n\t\t\t\tevent: _event as\n\t\t\t\t\t| ChangeEvent< HTMLInputElement >\n\t\t\t\t\t| PointerEvent< HTMLInputElement >,\n\t\t\t} );\n\t\t\twasDirtyOnBlur.current = false;\n\t\t}\n\t}, [ value, isDirty, isFocused, valueProp ] );\n\n\tconst handleOnBlur = ( event: FocusEvent< HTMLInputElement > ) => {\n\t\tonBlur( event );\n\t\tsetIsFocused?.( false );\n\n\t\t/**\n\t\t * If isPressEnterToChange is set, this commits the value to\n\t\t * the onChange callback.\n\t\t */\n\t\tif ( isDirty || ! event.target.validity.valid ) {\n\t\t\twasDirtyOnBlur.current = true;\n\t\t\thandleOnCommit( event );\n\t\t}\n\t};\n\n\tconst handleOnFocus = ( event: FocusEvent< HTMLInputElement > ) => {\n\t\tonFocus( event );\n\t\tsetIsFocused?.( true );\n\t};\n\n\tconst handleOnChange = ( event: ChangeEvent< HTMLInputElement > ) => {\n\t\tconst nextValue = event.target.value;\n\t\tchange( nextValue, event );\n\t};\n\n\tconst handleOnCommit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tconst nextValue = event.currentTarget.value;\n\n\t\ttry {\n\t\t\tonValidate( nextValue );\n\t\t\tcommit( nextValue, event );\n\t\t} catch ( err ) {\n\t\t\tinvalidate( err, event );\n\t\t}\n\t};\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { key } = event;\n\t\tonKeyDown( event );\n\n\t\tswitch ( key ) {\n\t\t\tcase 'ArrowUp':\n\t\t\t\tpressUp( event );\n\t\t\t\tbreak;\n\n\t\t\tcase 'ArrowDown':\n\t\t\t\tpressDown( event );\n\t\t\t\tbreak;\n\n\t\t\tcase 'Enter':\n\t\t\t\tpressEnter( event );\n\n\t\t\t\tif ( isPressEnterToChange ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleOnCommit( event );\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase 'Escape':\n\t\t\t\tif ( isPressEnterToChange && isDirty ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treset( valueProp, event );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tconst dragGestureProps = useDrag< PointerEvent< HTMLInputElement > >(\n\t\t( dragProps ) => {\n\t\t\tconst { distance, dragging, event, target } = dragProps;\n\n\t\t\t// The `target` prop always references the `input` element while, by\n\t\t\t// default, the `dragProps.event.target` property would reference the real\n\t\t\t// event target (i.e. any DOM element that the pointer is hovering while\n\t\t\t// dragging). Ensuring that the `target` is always the `input` element\n\t\t\t// allows consumers of `InputControl` (or any higher-level control) to\n\t\t\t// check the input's validity by accessing `event.target.validity.valid`.\n\t\t\tdragProps.event = {\n\t\t\t\t...dragProps.event,\n\t\t\t\ttarget,\n\t\t\t};\n\n\t\t\tif ( ! distance ) return;\n\t\t\tevent.stopPropagation();\n\n\t\t\t/**\n\t\t\t * Quick return if no longer dragging.\n\t\t\t * This prevents unnecessary value calculations.\n\t\t\t */\n\t\t\tif ( ! dragging ) {\n\t\t\t\tonDragEnd( dragProps );\n\t\t\t\tdragEnd( dragProps );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonDrag( dragProps );\n\t\t\tdrag( dragProps );\n\n\t\t\tif ( ! isDragging ) {\n\t\t\t\tonDragStart( dragProps );\n\t\t\t\tdragStart( dragProps );\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\taxis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',\n\t\t\tthreshold: dragThreshold,\n\t\t\tenabled: isDragEnabled,\n\t\t\tpointer: { capture: false },\n\t\t}\n\t);\n\n\tconst dragProps = isDragEnabled ? dragGestureProps() : {};\n\t/*\n\t * Works around the odd UA (e.g. Firefox) that does not focus inputs of\n\t * type=number when their spinner arrows are pressed.\n\t */\n\tlet handleOnMouseDown;\n\tif ( type === 'number' ) {\n\t\thandleOnMouseDown = ( event: MouseEvent< HTMLInputElement > ) => {\n\t\t\tprops.onMouseDown?.( event );\n\t\t\tif (\n\t\t\t\tevent.currentTarget !==\n\t\t\t\tevent.currentTarget.ownerDocument.activeElement\n\t\t\t) {\n\t\t\t\tevent.currentTarget.focus();\n\t\t\t}\n\t\t};\n\t}\n\n\treturn (\n\t\t<Input\n\t\t\t{ ...props }\n\t\t\t{ ...dragProps }\n\t\t\tclassName=\"components-input-control__input\"\n\t\t\tdisabled={ disabled }\n\t\t\tdragCursor={ dragCursor }\n\t\t\tisDragging={ isDragging }\n\t\t\tid={ id }\n\t\t\tonBlur={ handleOnBlur }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonFocus={ handleOnFocus }\n\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\tonMouseDown={ handleOnMouseDown }\n\t\t\tref={ ref }\n\t\t\tinputSize={ size }\n\t\t\tvalue={ value }\n\t\t\ttype={ type }\n\t\t/>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( InputField );\n\nexport default ForwardedComponent;\n"]}
+{"version":3,"sources":["@wordpress/components/src/input-control/input-field.tsx"],"names":["InputField","ref","disabled","dragDirection","dragThreshold","id","isDragEnabled","isFocused","isPressEnterToChange","onBlur","noop","onChange","onDrag","onDragEnd","onDragStart","onFocus","onKeyDown","onValidate","size","setIsFocused","stateReducer","state","value","valueProp","type","props","change","commit","drag","dragEnd","dragStart","invalidate","pressDown","pressEnter","pressUp","reset","isDragging","isDirty","wasDirtyOnBlur","dragCursor","handleOnBlur","event","target","validity","valid","current","handleOnCommit","handleOnFocus","handleOnChange","nextValue","currentTarget","err","handleOnKeyDown","key","preventDefault","dragGestureProps","dragProps","distance","dragging","stopPropagation","axis","threshold","enabled","pointer","capture","handleOnMouseDown","onMouseDown","ownerDocument","activeElement","focus","ForwardedComponent"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport { useDrag } from '@use-gesture/react';\nimport type {\n\tSyntheticEvent,\n\tChangeEvent,\n\tKeyboardEvent,\n\tPointerEvent,\n\tFocusEvent,\n\tForwardedRef,\n\tMouseEvent,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { useDragCursor } from './utils';\nimport { Input } from './styles/input-control-styles';\nimport { useInputControlStateReducer } from './reducer/reducer';\nimport type { InputFieldProps } from './types';\n\nfunction InputField(\n\t{\n\t\tdisabled = false,\n\t\tdragDirection = 'n',\n\t\tdragThreshold = 10,\n\t\tid,\n\t\tisDragEnabled = false,\n\t\tisFocused,\n\t\tisPressEnterToChange = false,\n\t\tonBlur = noop,\n\t\tonChange = noop,\n\t\tonDrag = noop,\n\t\tonDragEnd = noop,\n\t\tonDragStart = noop,\n\t\tonFocus = noop,\n\t\tonKeyDown = noop,\n\t\tonValidate = noop,\n\t\tsize = 'default',\n\t\tsetIsFocused,\n\t\tstateReducer = ( state: any ) => state,\n\t\tvalue: valueProp,\n\t\ttype,\n\t\t...props\n\t}: WordPressComponentProps< InputFieldProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\t// State.\n\t\tstate,\n\t\t// Actions.\n\t\tchange,\n\t\tcommit,\n\t\tdrag,\n\t\tdragEnd,\n\t\tdragStart,\n\t\tinvalidate,\n\t\tpressDown,\n\t\tpressEnter,\n\t\tpressUp,\n\t\treset,\n\t} = useInputControlStateReducer(\n\t\tstateReducer,\n\t\t{\n\t\t\tisDragEnabled,\n\t\t\tvalue: valueProp,\n\t\t\tisPressEnterToChange,\n\t\t},\n\t\tonChange\n\t);\n\n\tconst { value, isDragging, isDirty } = state;\n\tconst wasDirtyOnBlur = useRef( false );\n\n\tconst dragCursor = useDragCursor( isDragging, dragDirection );\n\n\tconst handleOnBlur = ( event: FocusEvent< HTMLInputElement > ) => {\n\t\tonBlur( event );\n\t\tsetIsFocused?.( false );\n\n\t\t/**\n\t\t * If isPressEnterToChange is set, this commits the value to\n\t\t * the onChange callback.\n\t\t */\n\t\tif ( isDirty || ! event.target.validity.valid ) {\n\t\t\twasDirtyOnBlur.current = true;\n\t\t\thandleOnCommit( event );\n\t\t}\n\t};\n\n\tconst handleOnFocus = ( event: FocusEvent< HTMLInputElement > ) => {\n\t\tonFocus( event );\n\t\tsetIsFocused?.( true );\n\t};\n\n\tconst handleOnChange = ( event: ChangeEvent< HTMLInputElement > ) => {\n\t\tconst nextValue = event.target.value;\n\t\tchange( nextValue, event );\n\t};\n\n\tconst handleOnCommit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tconst nextValue = event.currentTarget.value;\n\n\t\ttry {\n\t\t\tonValidate( nextValue );\n\t\t\tcommit( nextValue, event );\n\t\t} catch ( err ) {\n\t\t\tinvalidate( err, event );\n\t\t}\n\t};\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { key } = event;\n\t\tonKeyDown( event );\n\n\t\tswitch ( key ) {\n\t\t\tcase 'ArrowUp':\n\t\t\t\tpressUp( event );\n\t\t\t\tbreak;\n\n\t\t\tcase 'ArrowDown':\n\t\t\t\tpressDown( event );\n\t\t\t\tbreak;\n\n\t\t\tcase 'Enter':\n\t\t\t\tpressEnter( event );\n\n\t\t\t\tif ( isPressEnterToChange ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleOnCommit( event );\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\tcase 'Escape':\n\t\t\t\tif ( isPressEnterToChange && isDirty ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\treset( valueProp, event );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tconst dragGestureProps = useDrag< PointerEvent< HTMLInputElement > >(\n\t\t( dragProps ) => {\n\t\t\tconst { distance, dragging, event, target } = dragProps;\n\n\t\t\t// The `target` prop always references the `input` element while, by\n\t\t\t// default, the `dragProps.event.target` property would reference the real\n\t\t\t// event target (i.e. any DOM element that the pointer is hovering while\n\t\t\t// dragging). Ensuring that the `target` is always the `input` element\n\t\t\t// allows consumers of `InputControl` (or any higher-level control) to\n\t\t\t// check the input's validity by accessing `event.target.validity.valid`.\n\t\t\tdragProps.event = {\n\t\t\t\t...dragProps.event,\n\t\t\t\ttarget,\n\t\t\t};\n\n\t\t\tif ( ! distance ) return;\n\t\t\tevent.stopPropagation();\n\n\t\t\t/**\n\t\t\t * Quick return if no longer dragging.\n\t\t\t * This prevents unnecessary value calculations.\n\t\t\t */\n\t\t\tif ( ! dragging ) {\n\t\t\t\tonDragEnd( dragProps );\n\t\t\t\tdragEnd( dragProps );\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonDrag( dragProps );\n\t\t\tdrag( dragProps );\n\n\t\t\tif ( ! isDragging ) {\n\t\t\t\tonDragStart( dragProps );\n\t\t\t\tdragStart( dragProps );\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\taxis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',\n\t\t\tthreshold: dragThreshold,\n\t\t\tenabled: isDragEnabled,\n\t\t\tpointer: { capture: false },\n\t\t}\n\t);\n\n\tconst dragProps = isDragEnabled ? dragGestureProps() : {};\n\t/*\n\t * Works around the odd UA (e.g. Firefox) that does not focus inputs of\n\t * type=number when their spinner arrows are pressed.\n\t */\n\tlet handleOnMouseDown;\n\tif ( type === 'number' ) {\n\t\thandleOnMouseDown = ( event: MouseEvent< HTMLInputElement > ) => {\n\t\t\tprops.onMouseDown?.( event );\n\t\t\tif (\n\t\t\t\tevent.currentTarget !==\n\t\t\t\tevent.currentTarget.ownerDocument.activeElement\n\t\t\t) {\n\t\t\t\tevent.currentTarget.focus();\n\t\t\t}\n\t\t};\n\t}\n\n\treturn (\n\t\t<Input\n\t\t\t{ ...props }\n\t\t\t{ ...dragProps }\n\t\t\tclassName=\"components-input-control__input\"\n\t\t\tdisabled={ disabled }\n\t\t\tdragCursor={ dragCursor }\n\t\t\tisDragging={ isDragging }\n\t\t\tid={ id }\n\t\t\tonBlur={ handleOnBlur }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonFocus={ handleOnFocus }\n\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\tonMouseDown={ handleOnMouseDown }\n\t\t\tref={ ref }\n\t\t\tinputSize={ size }\n\t\t\tvalue={ value }\n\t\t\ttype={ type }\n\t\t/>\n\t);\n}\n\nconst ForwardedComponent = forwardRef( InputField );\n\nexport default ForwardedComponent;\n"]}

package/build/input-control/reducer/reducer.js

@@ -118,16 +118,13 @@ function inputControlStateReducer(composedStateReducers) {
         break;
     }
 
-    if (action.payload.event) {
-      nextState._event = action.payload.event;
-    }
+    nextState._event = action.payload.event;
     /**
      * Send the nextState + action to the composedReducers via
      * this "bridge" mechanism. This allows external stateReducers
      * to hook into actions, and modify state if needed.
      */
 
-
     return composedStateReducers(nextState, action);
   };
 }
@@ -141,8 +138,9 @@ function inputControlStateReducer(composedStateReducers) {
  * This technique uses the "stateReducer" design pattern:
  * https://kentcdodds.com/blog/the-state-reducer-pattern/
  *
- * @param  stateReducer An external state reducer.
- * @param  initialState The initial state for the reducer.
+ * @param  stateReducer    An external state reducer.
+ * @param  initialState    The initial state for the reducer.
+ * @param  onChangeHandler A handler for the onChange event.
  * @return State, dispatch, and a collection of actions.
  */
 
@@ -150,18 +148,10 @@ function inputControlStateReducer(composedStateReducers) {
 function useInputControlStateReducer() {
   let stateReducer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _state.initialStateReducer;
   let initialState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _state.initialInputControlState;
+  let onChangeHandler = arguments.length > 2 ? arguments[2] : undefined;
   const [state, dispatch] = (0, _element.useReducer)(inputControlStateReducer(stateReducer), mergeInitialState(initialState));
 
   const createChangeEvent = type => (nextValue, event) => {
-    /**
-     * Persist allows for the (Synthetic) event to be used outside of
-     * this function call.
-     * https://reactjs.org/docs/events.html#event-pooling
-     */
-    if (event && event.persist) {
-      event.persist();
-    }
-
     dispatch({
       type,
       payload: {
@@ -172,15 +162,6 @@ function useInputControlStateReducer() {
   };
 
   const createKeyEvent = type => event => {
-    /**
-     * Persist allows for the (Synthetic) event to be used outside of
-     * this function call.
-     * https://reactjs.org/docs/events.html#event-pooling
-     */
-    if (event && event.persist) {
-      event.persist();
-    }
-
     dispatch({
       type,
       payload: {
@@ -218,6 +199,37 @@ function useInputControlStateReducer() {
   const pressUp = createKeyEvent(actions.PRESS_UP);
   const pressDown = createKeyEvent(actions.PRESS_DOWN);
   const pressEnter = createKeyEvent(actions.PRESS_ENTER);
+  const currentState = (0, _element.useRef)(state);
+  const refProps = (0, _element.useRef)({
+    value: initialState.value,
+    onChangeHandler
+  });
+  (0, _element.useLayoutEffect)(() => {
+    currentState.current = state;
+    refProps.current = {
+      value: initialState.value,
+      onChangeHandler
+    };
+  });
+  (0, _element.useLayoutEffect)(() => {
+    if (currentState.current._event !== undefined && state.value !== refProps.current.value && !state.isDirty) {
+      var _state$value;
+
+      refProps.current.onChangeHandler((_state$value = state.value) !== null && _state$value !== void 0 ? _state$value : '', {
+        event: currentState.current._event
+      });
+    }
+  }, [state.value, state.isDirty]);
+  (0, _element.useLayoutEffect)(() => {
+    if (initialState.value !== currentState.current.value && !currentState.current.isDirty) {
+      dispatch({
+        type: actions.RESET,
+        payload: {
+          value: initialState.value
+        }
+      });
+    }
+  }, [initialState.value]);
   return {
     change,
     commit,

package/build/input-control/reducer/reducer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/input-control/reducer/reducer.ts"],"names":["mergeInitialState","initialState","initialInputControlState","value","initialValue","inputControlStateReducer","composedStateReducers","state","action","nextState","type","actions","PRESS_UP","isDirty","PRESS_DOWN","DRAG_START","isDragging","DRAG_END","CHANGE","error","payload","isPressEnterToChange","COMMIT","RESET","INVALIDATE","event","_event","useInputControlStateReducer","stateReducer","initialStateReducer","dispatch","createChangeEvent","nextValue","persist","createKeyEvent","createDragEvent","change","invalidate","reset","commit","dragStart","drag","DRAG","dragEnd","pressUp","pressDown","pressEnter","PRESS_ENTER"],"mappings":";;;;;;;AAQA;;AAKA;;AAMA;;;;;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,iBAAT,GAEc;AAAA,MADbC,YACa,uEADyBC,+BACzB;AACb,QAAM;AAAEC,IAAAA;AAAF,MAAYF,YAAlB;AAEA,SAAO,EACN,GAAGC,+BADG;AAEN,OAAGD,YAFG;AAGNG,IAAAA,YAAY,EAAED;AAHR,GAAP;AAKA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASE,wBAAT,CACCC,qBADD,EAEgB;AACf,SAAO,CAAEC,KAAF,EAASC,MAAT,KAAqB;AAC3B,UAAMC,SAAS,GAAG,EAAE,GAAGF;AAAL,KAAlB;;AAEA,YAASC,MAAM,CAACE,IAAhB;AACC;AACH;AACA;AACG,WAAKC,OAAO,CAACC,QAAb;AACCH,QAAAA,SAAS,CAACI,OAAV,GAAoB,KAApB;AACA;;AAED,WAAKF,OAAO,CAACG,UAAb;AACCL,QAAAA,SAAS,CAACI,OAAV,GAAoB,KAApB;AACA;;AAED;AACH;AACA;;AACG,WAAKF,OAAO,CAACI,UAAb;AACCN,QAAAA,SAAS,CAACO,UAAV,GAAuB,IAAvB;AACA;;AAED,WAAKL,OAAO,CAACM,QAAb;AACCR,QAAAA,SAAS,CAACO,UAAV,GAAuB,KAAvB;AACA;;AAED;AACH;AACA;;AACG,WAAKL,OAAO,CAACO,MAAb;AACCT,QAAAA,SAAS,CAACU,KAAV,GAAkB,IAAlB;AACAV,QAAAA,SAAS,CAACN,KAAV,GAAkBK,MAAM,CAACY,OAAP,CAAejB,KAAjC;;AAEA,YAAKI,KAAK,CAACc,oBAAX,EAAkC;AACjCZ,UAAAA,SAAS,CAACI,OAAV,GAAoB,IAApB;AACA;;AAED;;AAED,WAAKF,OAAO,CAACW,MAAb;AACCb,QAAAA,SAAS,CAACN,KAAV,GAAkBK,MAAM,CAACY,OAAP,CAAejB,KAAjC;AACAM,QAAAA,SAAS,CAACI,OAAV,GAAoB,KAApB;AACA;;AAED,WAAKF,OAAO,CAACY,KAAb;AACCd,QAAAA,SAAS,CAACU,KAAV,GAAkB,IAAlB;AACAV,QAAAA,SAAS,CAACI,OAAV,GAAoB,KAApB;AACAJ,QAAAA,SAAS,CAACN,KAAV,GAAkBK,MAAM,CAACY,OAAP,CAAejB,KAAf,IAAwBI,KAAK,CAACH,YAAhD;AACA;;AAED;AACH;AACA;;AACG,WAAKO,OAAO,CAACa,UAAb;AACCf,QAAAA,SAAS,CAACU,KAAV,GAAkBX,MAAM,CAACY,OAAP,CAAeD,KAAjC;AACA;AApDF;;AAuDA,QAAKX,MAAM,CAACY,OAAP,CAAeK,KAApB,EAA4B;AAC3BhB,MAAAA,SAAS,CAACiB,MAAV,GAAmBlB,MAAM,CAACY,OAAP,CAAeK,KAAlC;AACA;AAED;AACF;AACA;AACA;AACA;;;AACE,WAAOnB,qBAAqB,CAAEG,SAAF,EAAaD,MAAb,CAA5B;AACA,GApED;AAqEA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASmB,2BAAT,GAGL;AAAA,MAFDC,YAEC,uEAF4BC,0BAE5B;AAAA,MADD5B,YACC,uEADqCC,+BACrC;AACD,QAAM,CAAEK,KAAF,EAASuB,QAAT,IAAsB,yBAC3BzB,wBAAwB,CAAEuB,YAAF,CADG,EAE3B5B,iBAAiB,CAAEC,YAAF,CAFU,CAA5B;;AAKA,QAAM8B,iBAAiB,GAAKrB,IAAF,IAAiD,CAC1EsB,SAD0E,EAE1EP,KAF0E,KAGtE;AACJ;AACF;AACA;AACA;AACA;AACE,QAAKA,KAAK,IAAIA,KAAK,CAACQ,OAApB,EAA8B;AAC7BR,MAAAA,KAAK,CAACQ,OAAN;AACA;;AAEDH,IAAAA,QAAQ,CAAE;AACTpB,MAAAA,IADS;AAETU,MAAAA,OAAO,EAAE;AAAEjB,QAAAA,KAAK,EAAE6B,SAAT;AAAoBP,QAAAA;AAApB;AAFA,KAAF,CAAR;AAIA,GAjBD;;AAmBA,QAAMS,cAAc,GAAKxB,IAAF,IACtBe,KADoE,IAEhE;AACJ;AACF;AACA;AACA;AACA;AACE,QAAKA,KAAK,IAAIA,KAAK,CAACQ,OAApB,EAA8B;AAC7BR,MAAAA,KAAK,CAACQ,OAAN;AACA;;AAEDH,IAAAA,QAAQ,CAAE;AAAEpB,MAAAA,IAAF;AAAQU,MAAAA,OAAO,EAAE;AAAEK,QAAAA;AAAF;AAAjB,KAAF,CAAR;AACA,GAbD;;AAeA,QAAMU,eAAe,GAAKzB,IAAF,IACvBU,OADsE,IAElE;AACJU,IAAAA,QAAQ,CAAE;AAAEpB,MAAAA,IAAF;AAAQU,MAAAA;AAAR,KAAF,CAAR;AACA,GAJD;AAMA;AACD;AACA;;;AACC,QAAMgB,MAAM,GAAGL,iBAAiB,CAAEpB,OAAO,CAACO,MAAV,CAAhC;;AACA,QAAMmB,UAAU,GAAG,CAAElB,KAAF,EAAkBM,KAAlB,KAClBK,QAAQ,CAAE;AAAEpB,IAAAA,IAAI,EAAEC,OAAO,CAACa,UAAhB;AAA4BJ,IAAAA,OAAO,EAAE;AAAED,MAAAA,KAAF;AAASM,MAAAA;AAAT;AAArC,GAAF,CADT;;AAEA,QAAMa,KAAK,GAAGP,iBAAiB,CAAEpB,OAAO,CAACY,KAAV,CAA/B;AACA,QAAMgB,MAAM,GAAGR,iBAAiB,CAAEpB,OAAO,CAACW,MAAV,CAAhC;AAEA,QAAMkB,SAAS,GAAGL,eAAe,CAAExB,OAAO,CAACI,UAAV,CAAjC;AACA,QAAM0B,IAAI,GAAGN,eAAe,CAAExB,OAAO,CAAC+B,IAAV,CAA5B;AACA,QAAMC,OAAO,GAAGR,eAAe,CAAExB,OAAO,CAACM,QAAV,CAA/B;AAEA,QAAM2B,OAAO,GAAGV,cAAc,CAAEvB,OAAO,CAACC,QAAV,CAA9B;AACA,QAAMiC,SAAS,GAAGX,cAAc,CAAEvB,OAAO,CAACG,UAAV,CAAhC;AACA,QAAMgC,UAAU,GAAGZ,cAAc,CAAEvB,OAAO,CAACoC,WAAV,CAAjC;AAEA,SAAO;AACNX,IAAAA,MADM;AAENG,IAAAA,MAFM;AAGNT,IAAAA,QAHM;AAINW,IAAAA,IAJM;AAKNE,IAAAA,OALM;AAMNH,IAAAA,SANM;AAONH,IAAAA,UAPM;AAQNQ,IAAAA,SARM;AASNC,IAAAA,UATM;AAUNF,IAAAA,OAVM;AAWNN,IAAAA,KAXM;AAYN/B,IAAAA;AAZM,GAAP;AAcA","sourcesContent":["/**\n * External dependencies\n */\nimport type { SyntheticEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tInputState,\n\tStateReducer,\n\tinitialInputControlState,\n\tinitialStateReducer,\n} from './state';\nimport * as actions from './actions';\n\n/**\n * Prepares initialState for the reducer.\n *\n * @param  initialState The initial state.\n * @return Prepared initialState for the reducer\n */\nfunction mergeInitialState(\n\tinitialState: Partial< InputState > = initialInputControlState\n): InputState {\n\tconst { value } = initialState;\n\n\treturn {\n\t\t...initialInputControlState,\n\t\t...initialState,\n\t\tinitialValue: value,\n\t} as InputState;\n}\n\n/**\n * Creates a reducer that opens the channel for external state subscription\n * and modification.\n *\n * This technique uses the \"stateReducer\" design pattern:\n * https://kentcdodds.com/blog/the-state-reducer-pattern/\n *\n * @param  composedStateReducers A custom reducer that can subscribe and modify state.\n * @return The reducer.\n */\nfunction inputControlStateReducer(\n\tcomposedStateReducers: StateReducer\n): StateReducer {\n\treturn ( state, action ) => {\n\t\tconst nextState = { ...state };\n\n\t\tswitch ( action.type ) {\n\t\t\t/**\n\t\t\t * Keyboard events\n\t\t\t */\n\t\t\tcase actions.PRESS_UP:\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tbreak;\n\n\t\t\tcase actions.PRESS_DOWN:\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tbreak;\n\n\t\t\t/**\n\t\t\t * Drag events\n\t\t\t */\n\t\t\tcase actions.DRAG_START:\n\t\t\t\tnextState.isDragging = true;\n\t\t\t\tbreak;\n\n\t\t\tcase actions.DRAG_END:\n\t\t\t\tnextState.isDragging = false;\n\t\t\t\tbreak;\n\n\t\t\t/**\n\t\t\t * Input events\n\t\t\t */\n\t\t\tcase actions.CHANGE:\n\t\t\t\tnextState.error = null;\n\t\t\t\tnextState.value = action.payload.value;\n\n\t\t\t\tif ( state.isPressEnterToChange ) {\n\t\t\t\t\tnextState.isDirty = true;\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\n\t\t\tcase actions.COMMIT:\n\t\t\t\tnextState.value = action.payload.value;\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tbreak;\n\n\t\t\tcase actions.RESET:\n\t\t\t\tnextState.error = null;\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tnextState.value = action.payload.value || state.initialValue;\n\t\t\t\tbreak;\n\n\t\t\t/**\n\t\t\t * Validation\n\t\t\t */\n\t\t\tcase actions.INVALIDATE:\n\t\t\t\tnextState.error = action.payload.error;\n\t\t\t\tbreak;\n\t\t}\n\n\t\tif ( action.payload.event ) {\n\t\t\tnextState._event = action.payload.event;\n\t\t}\n\n\t\t/**\n\t\t * Send the nextState + action to the composedReducers via\n\t\t * this \"bridge\" mechanism. This allows external stateReducers\n\t\t * to hook into actions, and modify state if needed.\n\t\t */\n\t\treturn composedStateReducers( nextState, action );\n\t};\n}\n\n/**\n * A custom hook that connects and external stateReducer with an internal\n * reducer. This hook manages the internal state of InputControl.\n * However, by connecting an external stateReducer function, other\n * components can react to actions as well as modify state before it is\n * applied.\n *\n * This technique uses the \"stateReducer\" design pattern:\n * https://kentcdodds.com/blog/the-state-reducer-pattern/\n *\n * @param  stateReducer An external state reducer.\n * @param  initialState The initial state for the reducer.\n * @return State, dispatch, and a collection of actions.\n */\nexport function useInputControlStateReducer(\n\tstateReducer: StateReducer = initialStateReducer,\n\tinitialState: Partial< InputState > = initialInputControlState\n) {\n\tconst [ state, dispatch ] = useReducer< StateReducer >(\n\t\tinputControlStateReducer( stateReducer ),\n\t\tmergeInitialState( initialState )\n\t);\n\n\tconst createChangeEvent = ( type: actions.ChangeEventAction[ 'type' ] ) => (\n\t\tnextValue: actions.ChangeEventAction[ 'payload' ][ 'value' ],\n\t\tevent: actions.ChangeEventAction[ 'payload' ][ 'event' ]\n\t) => {\n\t\t/**\n\t\t * Persist allows for the (Synthetic) event to be used outside of\n\t\t * this function call.\n\t\t * https://reactjs.org/docs/events.html#event-pooling\n\t\t */\n\t\tif ( event && event.persist ) {\n\t\t\tevent.persist();\n\t\t}\n\n\t\tdispatch( {\n\t\t\ttype,\n\t\t\tpayload: { value: nextValue, event },\n\t\t} as actions.InputAction );\n\t};\n\n\tconst createKeyEvent = ( type: actions.KeyEventAction[ 'type' ] ) => (\n\t\tevent: actions.KeyEventAction[ 'payload' ][ 'event' ]\n\t) => {\n\t\t/**\n\t\t * Persist allows for the (Synthetic) event to be used outside of\n\t\t * this function call.\n\t\t * https://reactjs.org/docs/events.html#event-pooling\n\t\t */\n\t\tif ( event && event.persist ) {\n\t\t\tevent.persist();\n\t\t}\n\n\t\tdispatch( { type, payload: { event } } );\n\t};\n\n\tconst createDragEvent = ( type: actions.DragEventAction[ 'type' ] ) => (\n\t\tpayload: actions.DragEventAction[ 'payload' ]\n\t) => {\n\t\tdispatch( { type, payload } );\n\t};\n\n\t/**\n\t * Actions for the reducer\n\t */\n\tconst change = createChangeEvent( actions.CHANGE );\n\tconst invalidate = ( error: unknown, event: SyntheticEvent ) =>\n\t\tdispatch( { type: actions.INVALIDATE, payload: { error, event } } );\n\tconst reset = createChangeEvent( actions.RESET );\n\tconst commit = createChangeEvent( actions.COMMIT );\n\n\tconst dragStart = createDragEvent( actions.DRAG_START );\n\tconst drag = createDragEvent( actions.DRAG );\n\tconst dragEnd = createDragEvent( actions.DRAG_END );\n\n\tconst pressUp = createKeyEvent( actions.PRESS_UP );\n\tconst pressDown = createKeyEvent( actions.PRESS_DOWN );\n\tconst pressEnter = createKeyEvent( actions.PRESS_ENTER );\n\n\treturn {\n\t\tchange,\n\t\tcommit,\n\t\tdispatch,\n\t\tdrag,\n\t\tdragEnd,\n\t\tdragStart,\n\t\tinvalidate,\n\t\tpressDown,\n\t\tpressEnter,\n\t\tpressUp,\n\t\treset,\n\t\tstate,\n\t} as const;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/input-control/reducer/reducer.ts"],"names":["mergeInitialState","initialState","initialInputControlState","value","initialValue","inputControlStateReducer","composedStateReducers","state","action","nextState","type","actions","PRESS_UP","isDirty","PRESS_DOWN","DRAG_START","isDragging","DRAG_END","CHANGE","error","payload","isPressEnterToChange","COMMIT","RESET","INVALIDATE","_event","event","useInputControlStateReducer","stateReducer","initialStateReducer","onChangeHandler","dispatch","createChangeEvent","nextValue","createKeyEvent","createDragEvent","change","invalidate","reset","commit","dragStart","drag","DRAG","dragEnd","pressUp","pressDown","pressEnter","PRESS_ENTER","currentState","refProps","current","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { SyntheticEvent, ChangeEvent, PointerEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useReducer, useLayoutEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tInputState,\n\tStateReducer,\n\tinitialInputControlState,\n\tinitialStateReducer,\n} from './state';\nimport * as actions from './actions';\nimport type { InputChangeCallback } from '../types';\n\n/**\n * Prepares initialState for the reducer.\n *\n * @param  initialState The initial state.\n * @return Prepared initialState for the reducer\n */\nfunction mergeInitialState(\n\tinitialState: Partial< InputState > = initialInputControlState\n): InputState {\n\tconst { value } = initialState;\n\n\treturn {\n\t\t...initialInputControlState,\n\t\t...initialState,\n\t\tinitialValue: value,\n\t} as InputState;\n}\n\n/**\n * Creates a reducer that opens the channel for external state subscription\n * and modification.\n *\n * This technique uses the \"stateReducer\" design pattern:\n * https://kentcdodds.com/blog/the-state-reducer-pattern/\n *\n * @param  composedStateReducers A custom reducer that can subscribe and modify state.\n * @return The reducer.\n */\nfunction inputControlStateReducer(\n\tcomposedStateReducers: StateReducer\n): StateReducer {\n\treturn ( state, action ) => {\n\t\tconst nextState = { ...state };\n\n\t\tswitch ( action.type ) {\n\t\t\t/**\n\t\t\t * Keyboard events\n\t\t\t */\n\t\t\tcase actions.PRESS_UP:\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tbreak;\n\n\t\t\tcase actions.PRESS_DOWN:\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tbreak;\n\n\t\t\t/**\n\t\t\t * Drag events\n\t\t\t */\n\t\t\tcase actions.DRAG_START:\n\t\t\t\tnextState.isDragging = true;\n\t\t\t\tbreak;\n\n\t\t\tcase actions.DRAG_END:\n\t\t\t\tnextState.isDragging = false;\n\t\t\t\tbreak;\n\n\t\t\t/**\n\t\t\t * Input events\n\t\t\t */\n\t\t\tcase actions.CHANGE:\n\t\t\t\tnextState.error = null;\n\t\t\t\tnextState.value = action.payload.value;\n\n\t\t\t\tif ( state.isPressEnterToChange ) {\n\t\t\t\t\tnextState.isDirty = true;\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\n\t\t\tcase actions.COMMIT:\n\t\t\t\tnextState.value = action.payload.value;\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tbreak;\n\n\t\t\tcase actions.RESET:\n\t\t\t\tnextState.error = null;\n\t\t\t\tnextState.isDirty = false;\n\t\t\t\tnextState.value = action.payload.value || state.initialValue;\n\t\t\t\tbreak;\n\n\t\t\t/**\n\t\t\t * Validation\n\t\t\t */\n\t\t\tcase actions.INVALIDATE:\n\t\t\t\tnextState.error = action.payload.error;\n\t\t\t\tbreak;\n\t\t}\n\n\t\tnextState._event = action.payload.event;\n\n\t\t/**\n\t\t * Send the nextState + action to the composedReducers via\n\t\t * this \"bridge\" mechanism. This allows external stateReducers\n\t\t * to hook into actions, and modify state if needed.\n\t\t */\n\t\treturn composedStateReducers( nextState, action );\n\t};\n}\n\n/**\n * A custom hook that connects and external stateReducer with an internal\n * reducer. This hook manages the internal state of InputControl.\n * However, by connecting an external stateReducer function, other\n * components can react to actions as well as modify state before it is\n * applied.\n *\n * This technique uses the \"stateReducer\" design pattern:\n * https://kentcdodds.com/blog/the-state-reducer-pattern/\n *\n * @param  stateReducer    An external state reducer.\n * @param  initialState    The initial state for the reducer.\n * @param  onChangeHandler A handler for the onChange event.\n * @return State, dispatch, and a collection of actions.\n */\nexport function useInputControlStateReducer(\n\tstateReducer: StateReducer = initialStateReducer,\n\tinitialState: Partial< InputState > = initialInputControlState,\n\tonChangeHandler: InputChangeCallback\n) {\n\tconst [ state, dispatch ] = useReducer< StateReducer >(\n\t\tinputControlStateReducer( stateReducer ),\n\t\tmergeInitialState( initialState )\n\t);\n\n\tconst createChangeEvent = ( type: actions.ChangeEventAction[ 'type' ] ) => (\n\t\tnextValue: actions.ChangeEventAction[ 'payload' ][ 'value' ],\n\t\tevent: actions.ChangeEventAction[ 'payload' ][ 'event' ]\n\t) => {\n\t\tdispatch( {\n\t\t\ttype,\n\t\t\tpayload: { value: nextValue, event },\n\t\t} as actions.InputAction );\n\t};\n\n\tconst createKeyEvent = ( type: actions.KeyEventAction[ 'type' ] ) => (\n\t\tevent: actions.KeyEventAction[ 'payload' ][ 'event' ]\n\t) => {\n\t\tdispatch( { type, payload: { event } } );\n\t};\n\n\tconst createDragEvent = ( type: actions.DragEventAction[ 'type' ] ) => (\n\t\tpayload: actions.DragEventAction[ 'payload' ]\n\t) => {\n\t\tdispatch( { type, payload } );\n\t};\n\n\t/**\n\t * Actions for the reducer\n\t */\n\tconst change = createChangeEvent( actions.CHANGE );\n\tconst invalidate = ( error: unknown, event: SyntheticEvent ) =>\n\t\tdispatch( { type: actions.INVALIDATE, payload: { error, event } } );\n\tconst reset = createChangeEvent( actions.RESET );\n\tconst commit = createChangeEvent( actions.COMMIT );\n\n\tconst dragStart = createDragEvent( actions.DRAG_START );\n\tconst drag = createDragEvent( actions.DRAG );\n\tconst dragEnd = createDragEvent( actions.DRAG_END );\n\n\tconst pressUp = createKeyEvent( actions.PRESS_UP );\n\tconst pressDown = createKeyEvent( actions.PRESS_DOWN );\n\tconst pressEnter = createKeyEvent( actions.PRESS_ENTER );\n\n\tconst currentState = useRef( state );\n\tconst refProps = useRef( { value: initialState.value, onChangeHandler } );\n\tuseLayoutEffect( () => {\n\t\tcurrentState.current = state;\n\t\trefProps.current = { value: initialState.value, onChangeHandler };\n\t} );\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tcurrentState.current._event !== undefined &&\n\t\t\tstate.value !== refProps.current.value &&\n\t\t\t! state.isDirty\n\t\t) {\n\t\t\trefProps.current.onChangeHandler( state.value ?? '', {\n\t\t\t\tevent: currentState.current._event as\n\t\t\t\t\t| ChangeEvent< HTMLInputElement >\n\t\t\t\t\t| PointerEvent< HTMLInputElement >,\n\t\t\t} );\n\t\t}\n\t}, [ state.value, state.isDirty ] );\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tinitialState.value !== currentState.current.value &&\n\t\t\t! currentState.current.isDirty\n\t\t) {\n\t\t\tdispatch( {\n\t\t\t\ttype: actions.RESET,\n\t\t\t\tpayload: { value: initialState.value },\n\t\t\t} );\n\t\t}\n\t}, [ initialState.value ] );\n\n\treturn {\n\t\tchange,\n\t\tcommit,\n\t\tdispatch,\n\t\tdrag,\n\t\tdragEnd,\n\t\tdragStart,\n\t\tinvalidate,\n\t\tpressDown,\n\t\tpressEnter,\n\t\tpressUp,\n\t\treset,\n\t\tstate,\n\t} as const;\n}\n"]}

package/build/input-control/reducer/state.js

@@ -16,7 +16,6 @@ const initialStateReducer = state => state;
 
 exports.initialStateReducer = initialStateReducer;
 const initialInputControlState = {
-  _event: {},
   error: null,
   initialValue: '',
   isDirty: false,

package/build/input-control/reducer/state.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/input-control/reducer/state.ts"],"names":["initialStateReducer","state","initialInputControlState","_event","error","initialValue","isDirty","isDragEnabled","isDragging","isPressEnterToChange","value"],"mappings":";;;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AAgBO,MAAMA,mBAAiC,GAAKC,KAAF,IAAyBA,KAAnE;;;AAEA,MAAMC,wBAAoC,GAAG;AACnDC,EAAAA,MAAM,EAAE,EAD2C;AAEnDC,EAAAA,KAAK,EAAE,IAF4C;AAGnDC,EAAAA,YAAY,EAAE,EAHqC;AAInDC,EAAAA,OAAO,EAAE,KAJ0C;AAKnDC,EAAAA,aAAa,EAAE,KALoC;AAMnDC,EAAAA,UAAU,EAAE,KANuC;AAOnDC,EAAAA,oBAAoB,EAAE,KAP6B;AAQnDC,EAAAA,KAAK,EAAE;AAR4C,CAA7C","sourcesContent":["/**\n * External dependencies\n */\nimport type { Reducer } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { InputAction } from './actions';\n\nexport interface InputState {\n\t_event: Event | {};\n\terror: unknown;\n\tinitialValue?: string;\n\tisDirty: boolean;\n\tisDragEnabled: boolean;\n\tisDragging: boolean;\n\tisPressEnterToChange: boolean;\n\tvalue?: string;\n}\n\nexport type StateReducer = Reducer< InputState, InputAction >;\n\nexport const initialStateReducer: StateReducer = ( state: InputState ) => state;\n\nexport const initialInputControlState: InputState = {\n\t_event: {},\n\terror: null,\n\tinitialValue: '',\n\tisDirty: false,\n\tisDragEnabled: false,\n\tisDragging: false,\n\tisPressEnterToChange: false,\n\tvalue: '',\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/input-control/reducer/state.ts"],"names":["initialStateReducer","state","initialInputControlState","error","initialValue","isDirty","isDragEnabled","isDragging","isPressEnterToChange","value"],"mappings":";;;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AAgBO,MAAMA,mBAAiC,GAAKC,KAAF,IAAyBA,KAAnE;;;AAEA,MAAMC,wBAAoC,GAAG;AACnDC,EAAAA,KAAK,EAAE,IAD4C;AAEnDC,EAAAA,YAAY,EAAE,EAFqC;AAGnDC,EAAAA,OAAO,EAAE,KAH0C;AAInDC,EAAAA,aAAa,EAAE,KAJoC;AAKnDC,EAAAA,UAAU,EAAE,KALuC;AAMnDC,EAAAA,oBAAoB,EAAE,KAN6B;AAOnDC,EAAAA,KAAK,EAAE;AAP4C,CAA7C","sourcesContent":["/**\n * External dependencies\n */\nimport type { Reducer, SyntheticEvent } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { InputAction } from './actions';\n\nexport interface InputState {\n\t_event?: SyntheticEvent;\n\terror: unknown;\n\tinitialValue?: string;\n\tisDirty: boolean;\n\tisDragEnabled: boolean;\n\tisDragging: boolean;\n\tisPressEnterToChange: boolean;\n\tvalue?: string;\n}\n\nexport type StateReducer = Reducer< InputState, InputAction >;\n\nexport const initialStateReducer: StateReducer = ( state: InputState ) => state;\n\nexport const initialInputControlState: InputState = {\n\terror: null,\n\tinitialValue: '',\n\tisDirty: false,\n\tisDragEnabled: false,\n\tisDragging: false,\n\tisPressEnterToChange: false,\n\tvalue: '',\n};\n"]}

package/build/input-control/utils.js

@@ -4,10 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getDragCursor = getDragCursor;
+exports.useDraft = useDraft;
 exports.useDragCursor = useDragCursor;
 
 var _element = require("@wordpress/element");
 
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -57,4 +62,44 @@ function useDragCursor(isDragging, dragDirection) {
   }, [isDragging]);
   return dragCursor;
 }
+
+function useDraft(props) {
+  const refPreviousValue = (0, _element.useRef)(props.value);
+  const [draft, setDraft] = (0, _element.useState)({});
+  const value = draft.value !== undefined ? draft.value : props.value; // Determines when to discard the draft value to restore controlled status.
+  // To do so, it tracks the previous value and marks the draft value as stale
+  // after each render.
+
+  (0, _element.useLayoutEffect)(() => {
+    const {
+      current: previousValue
+    } = refPreviousValue;
+    refPreviousValue.current = props.value;
+    if (draft.value !== undefined && !draft.isStale) setDraft({ ...draft,
+      isStale: true
+    });else if (draft.isStale && props.value !== previousValue) setDraft({});
+  }, [props.value, draft]);
+
+  const onChange = (nextValue, extra) => {
+    // Mutates the draft value to avoid an extra effect run.
+    setDraft(current => Object.assign(current, {
+      value: nextValue,
+      isStale: false
+    }));
+    props.onChange(nextValue, extra);
+  };
+
+  const onBlur = event => {
+    var _props$onBlur;
+
+    setDraft({});
+    (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, event);
+  };
+
+  return {
+    value,
+    onBlur,
+    onChange
+  };
+}
 //# sourceMappingURL=utils.js.map

package/build/input-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/input-control/utils.ts"],"names":["getDragCursor","dragDirection","dragCursor","useDragCursor","isDragging","document","documentElement","style","cursor"],"mappings":";;;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,aAAT,CAAwBC,aAAxB,EAAwD;AAC9D,MAAIC,UAAU,GAAG,WAAjB;;AAEA,UAASD,aAAT;AACC,SAAK,GAAL;AACA,SAAK,GAAL;AACCC,MAAAA,UAAU,GAAG,WAAb;AACA;;AAED,SAAK,GAAL;AACA,SAAK,GAAL;AACCA,MAAAA,UAAU,GAAG,WAAb;AACA;AATF;;AAYA,SAAOA,UAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,aAAT,CACNC,UADM,EAENH,aAFM,EAGG;AACT,QAAMC,UAAU,GAAGF,aAAa,CAAEC,aAAF,CAAhC;AAEA,0BAAW,MAAM;AAChB,QAAKG,UAAL,EAAkB;AACjBC,MAAAA,QAAQ,CAACC,eAAT,CAAyBC,KAAzB,CAA+BC,MAA/B,GAAwCN,UAAxC;AACA,KAFD,MAEO;AACN;AACAG,MAAAA,QAAQ,CAACC,eAAT,CAAyBC,KAAzB,CAA+BC,MAA/B,GAAwC,IAAxC;AACA;AACD,GAPD,EAOG,CAAEJ,UAAF,CAPH;AASA,SAAOF,UAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Gets a CSS cursor value based on a drag direction.\n *\n * @param  dragDirection The drag direction.\n * @return  The CSS cursor value.\n */\nexport function getDragCursor( dragDirection: string ): string {\n\tlet dragCursor = 'ns-resize';\n\n\tswitch ( dragDirection ) {\n\t\tcase 'n':\n\t\tcase 's':\n\t\t\tdragCursor = 'ns-resize';\n\t\t\tbreak;\n\n\t\tcase 'e':\n\t\tcase 'w':\n\t\t\tdragCursor = 'ew-resize';\n\t\t\tbreak;\n\t}\n\n\treturn dragCursor;\n}\n\n/**\n * Custom hook that renders a drag cursor when dragging.\n *\n * @param {boolean} isDragging    The dragging state.\n * @param {string}  dragDirection The drag direction.\n *\n * @return {string} The CSS cursor value.\n */\nexport function useDragCursor(\n\tisDragging: boolean,\n\tdragDirection: string\n): string {\n\tconst dragCursor = getDragCursor( dragDirection );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tdocument.documentElement.style.cursor = dragCursor;\n\t\t} else {\n\t\t\t// @ts-expect-error\n\t\t\tdocument.documentElement.style.cursor = null;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn dragCursor;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/input-control/utils.ts"],"names":["getDragCursor","dragDirection","dragCursor","useDragCursor","isDragging","document","documentElement","style","cursor","useDraft","props","refPreviousValue","value","draft","setDraft","undefined","current","previousValue","isStale","onChange","nextValue","extra","Object","assign","onBlur","event"],"mappings":";;;;;;;;;AAQA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAaA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,aAAT,CAAwBC,aAAxB,EAAwD;AAC9D,MAAIC,UAAU,GAAG,WAAjB;;AAEA,UAASD,aAAT;AACC,SAAK,GAAL;AACA,SAAK,GAAL;AACCC,MAAAA,UAAU,GAAG,WAAb;AACA;;AAED,SAAK,GAAL;AACA,SAAK,GAAL;AACCA,MAAAA,UAAU,GAAG,WAAb;AACA;AATF;;AAYA,SAAOA,UAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,aAAT,CACNC,UADM,EAENH,aAFM,EAGG;AACT,QAAMC,UAAU,GAAGF,aAAa,CAAEC,aAAF,CAAhC;AAEA,0BAAW,MAAM;AAChB,QAAKG,UAAL,EAAkB;AACjBC,MAAAA,QAAQ,CAACC,eAAT,CAAyBC,KAAzB,CAA+BC,MAA/B,GAAwCN,UAAxC;AACA,KAFD,MAEO;AACN;AACAG,MAAAA,QAAQ,CAACC,eAAT,CAAyBC,KAAzB,CAA+BC,MAA/B,GAAwC,IAAxC;AACA;AACD,GAPD,EAOG,CAAEJ,UAAF,CAPH;AASA,SAAOF,UAAP;AACA;;AAEM,SAASO,QAAT,CAAmBC,KAAnB,EAIH;AACH,QAAMC,gBAAgB,GAAG,qBAAQD,KAAK,CAACE,KAAd,CAAzB;AACA,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsB,uBAGvB,EAHuB,CAA5B;AAIA,QAAMF,KAAK,GAAGC,KAAK,CAACD,KAAN,KAAgBG,SAAhB,GAA4BF,KAAK,CAACD,KAAlC,GAA0CF,KAAK,CAACE,KAA9D,CANG,CAQH;AACA;AACA;;AACA,gCAAiB,MAAM;AACtB,UAAM;AAAEI,MAAAA,OAAO,EAAEC;AAAX,QAA6BN,gBAAnC;AACAA,IAAAA,gBAAgB,CAACK,OAAjB,GAA2BN,KAAK,CAACE,KAAjC;AACA,QAAKC,KAAK,CAACD,KAAN,KAAgBG,SAAhB,IAA6B,CAAEF,KAAK,CAACK,OAA1C,EACCJ,QAAQ,CAAE,EAAE,GAAGD,KAAL;AAAYK,MAAAA,OAAO,EAAE;AAArB,KAAF,CAAR,CADD,KAEK,IAAKL,KAAK,CAACK,OAAN,IAAiBR,KAAK,CAACE,KAAN,KAAgBK,aAAtC,EACJH,QAAQ,CAAE,EAAF,CAAR;AACD,GAPD,EAOG,CAAEJ,KAAK,CAACE,KAAR,EAAeC,KAAf,CAPH;;AASA,QAAMM,QAA6B,GAAG,CAAEC,SAAF,EAAaC,KAAb,KAAwB;AAC7D;AACAP,IAAAA,QAAQ,CAAIE,OAAF,IACTM,MAAM,CAACC,MAAP,CAAeP,OAAf,EAAwB;AAAEJ,MAAAA,KAAK,EAAEQ,SAAT;AAAoBF,MAAAA,OAAO,EAAE;AAA7B,KAAxB,CADO,CAAR;AAGAR,IAAAA,KAAK,CAACS,QAAN,CAAgBC,SAAhB,EAA2BC,KAA3B;AACA,GAND;;AAOA,QAAMG,MAAyB,GAAKC,KAAF,IAAa;AAAA;;AAC9CX,IAAAA,QAAQ,CAAE,EAAF,CAAR;AACA,qBAAAJ,KAAK,CAACc,MAAN,qEAAAd,KAAK,EAAWe,KAAX,CAAL;AACA,GAHD;;AAKA,SAAO;AAAEb,IAAAA,KAAF;AAASY,IAAAA,MAAT;AAAiBL,IAAAA;AAAjB,GAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport type { FocusEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { InputChangeCallback } from './types';\n\n/**\n * Gets a CSS cursor value based on a drag direction.\n *\n * @param  dragDirection The drag direction.\n * @return  The CSS cursor value.\n */\nexport function getDragCursor( dragDirection: string ): string {\n\tlet dragCursor = 'ns-resize';\n\n\tswitch ( dragDirection ) {\n\t\tcase 'n':\n\t\tcase 's':\n\t\t\tdragCursor = 'ns-resize';\n\t\t\tbreak;\n\n\t\tcase 'e':\n\t\tcase 'w':\n\t\t\tdragCursor = 'ew-resize';\n\t\t\tbreak;\n\t}\n\n\treturn dragCursor;\n}\n\n/**\n * Custom hook that renders a drag cursor when dragging.\n *\n * @param {boolean} isDragging    The dragging state.\n * @param {string}  dragDirection The drag direction.\n *\n * @return {string} The CSS cursor value.\n */\nexport function useDragCursor(\n\tisDragging: boolean,\n\tdragDirection: string\n): string {\n\tconst dragCursor = getDragCursor( dragDirection );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tdocument.documentElement.style.cursor = dragCursor;\n\t\t} else {\n\t\t\t// @ts-expect-error\n\t\t\tdocument.documentElement.style.cursor = null;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn dragCursor;\n}\n\nexport function useDraft( props: {\n\tvalue: string | undefined;\n\tonBlur?: FocusEventHandler;\n\tonChange: InputChangeCallback;\n} ) {\n\tconst refPreviousValue = useRef( props.value );\n\tconst [ draft, setDraft ] = useState< {\n\t\tvalue?: string;\n\t\tisStale?: boolean;\n\t} >( {} );\n\tconst value = draft.value !== undefined ? draft.value : props.value;\n\n\t// Determines when to discard the draft value to restore controlled status.\n\t// To do so, it tracks the previous value and marks the draft value as stale\n\t// after each render.\n\tuseLayoutEffect( () => {\n\t\tconst { current: previousValue } = refPreviousValue;\n\t\trefPreviousValue.current = props.value;\n\t\tif ( draft.value !== undefined && ! draft.isStale )\n\t\t\tsetDraft( { ...draft, isStale: true } );\n\t\telse if ( draft.isStale && props.value !== previousValue )\n\t\t\tsetDraft( {} );\n\t}, [ props.value, draft ] );\n\n\tconst onChange: InputChangeCallback = ( nextValue, extra ) => {\n\t\t// Mutates the draft value to avoid an extra effect run.\n\t\tsetDraft( ( current ) =>\n\t\t\tObject.assign( current, { value: nextValue, isStale: false } )\n\t\t);\n\t\tprops.onChange( nextValue, extra );\n\t};\n\tconst onBlur: FocusEventHandler = ( event ) => {\n\t\tsetDraft( {} );\n\t\tprops.onBlur?.( event );\n\t};\n\n\treturn { value, onBlur, onChange };\n}\n"]}