@wordpress/components 19.8.2 → 19.8.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/angle-picker-control/angle-circle.js +5 -7
- package/build/angle-picker-control/angle-circle.js.map +1 -1
- package/build-module/angle-picker-control/angle-circle.js +5 -7
- package/build-module/angle-picker-control/angle-circle.js.map +1 -1
- package/package.json +4 -4
- package/src/angle-picker-control/angle-circle.js +3 -3
- package/tsconfig.tsbuildinfo +1 -1
- package/build-types/input-control/stories/index.d.ts +0 -17
- package/build-types/input-control/stories/index.d.ts.map +0 -1
- package/build-types/text/test/index.d.ts +0 -2
- package/build-types/text/test/index.d.ts.map +0 -1
- package/build-types/toggle-group-control/toggle-group-control-option/styles.d.ts +0 -19
- package/build-types/toggle-group-control/toggle-group-control-option/styles.d.ts.map +0 -1
|
@@ -44,15 +44,12 @@ function AngleCircle(_ref) {
|
|
|
44
44
|
const {
|
|
45
45
|
x: centerX,
|
|
46
46
|
y: centerY
|
|
47
|
-
} = angleCircleCenter.current;
|
|
48
|
-
const {
|
|
49
|
-
ownerDocument
|
|
50
|
-
} = angleCircleRef.current; // Prevent (drag) mouse events from selecting and accidentally
|
|
47
|
+
} = angleCircleCenter.current; // Prevent (drag) mouse events from selecting and accidentally
|
|
51
48
|
// triggering actions from other elements.
|
|
52
49
|
|
|
53
|
-
event.preventDefault(); //
|
|
50
|
+
event.preventDefault(); // Input control needs to lose focus and by preventDefault above, it doesn't.
|
|
54
51
|
|
|
55
|
-
|
|
52
|
+
event.target.focus();
|
|
56
53
|
onChange(getAngle(centerX, centerY, event.clientX, event.clientY));
|
|
57
54
|
};
|
|
58
55
|
|
|
@@ -92,7 +89,8 @@ function AngleCircle(_ref) {
|
|
|
92
89
|
style: value ? {
|
|
93
90
|
transform: `rotate(${value}deg)`
|
|
94
91
|
} : undefined,
|
|
95
|
-
className: "components-angle-picker-control__angle-circle-indicator-wrapper"
|
|
92
|
+
className: "components-angle-picker-control__angle-circle-indicator-wrapper",
|
|
93
|
+
tabIndex: -1
|
|
96
94
|
}, (0, _element.createElement)(_anglePickerControlStyles.CircleIndicator, {
|
|
97
95
|
className: "components-angle-picker-control__angle-circle-indicator"
|
|
98
96
|
})))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/angle-picker-control/angle-circle.js"],"names":["AngleCircle","value","onChange","props","angleCircleRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","rect","current","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","centerX","centerY","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/angle-picker-control/angle-circle.js"],"names":["AngleCircle","value","onChange","props","angleCircleRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","rect","current","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","centerX","centerY","preventDefault","target","focus","getAngle","clientX","clientY","startDrag","isDragging","onDragStart","onDragMove","onDragEnd","undefined","document","body","style","cursor","transform","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI"],"mappings":";;;;;;;;;AAGA;;;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AAOA,SAASA,WAAT,OAAsD;AAAA,MAAhC;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmB,OAAGC;AAAtB,GAAgC;AACrD,QAAMC,cAAc,GAAG,sBAAvB;AACA,QAAMC,iBAAiB,GAAG,sBAA1B;AACA,QAAMC,mBAAmB,GAAG,sBAA5B;;AAEA,QAAMC,oBAAoB,GAAG,MAAM;AAClC,UAAMC,IAAI,GAAGJ,cAAc,CAACK,OAAf,CAAuBC,qBAAvB,EAAb;AACAL,IAAAA,iBAAiB,CAACI,OAAlB,GAA4B;AAC3BE,MAAAA,CAAC,EAAEH,IAAI,CAACG,CAAL,GAASH,IAAI,CAACI,KAAL,GAAa,CADE;AAE3BC,MAAAA,CAAC,EAAEL,IAAI,CAACK,CAAL,GAASL,IAAI,CAACM,MAAL,GAAc;AAFC,KAA5B;AAIA,GAND;;AAQA,QAAMC,qBAAqB,GAAKC,KAAF,IAAa;AAC1C,UAAM;AAAEL,MAAAA,CAAC,EAAEM,OAAL;AAAcJ,MAAAA,CAAC,EAAEK;AAAjB,QAA6Bb,iBAAiB,CAACI,OAArD,CAD0C,CAE1C;AACA;;AACAO,IAAAA,KAAK,CAACG,cAAN,GAJ0C,CAK1C;;AACAH,IAAAA,KAAK,CAACI,MAAN,CAAaC,KAAb;AACAnB,IAAAA,QAAQ,CAAEoB,QAAQ,CAAEL,OAAF,EAAWC,OAAX,EAAoBF,KAAK,CAACO,OAA1B,EAAmCP,KAAK,CAACQ,OAAzC,CAAV,CAAR;AACA,GARD;;AAUA,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA;AAAb,MAA4B,wCAAa;AAC9CC,IAAAA,WAAW,EAAIX,KAAF,IAAa;AACzBT,MAAAA,oBAAoB;AACpBQ,MAAAA,qBAAqB,CAAEC,KAAF,CAArB;AACA,KAJ6C;AAK9CY,IAAAA,UAAU,EAAEb,qBALkC;AAM9Cc,IAAAA,SAAS,EAAEd;AANmC,GAAb,CAAlC;AASA,0BAAW,MAAM;AAChB,QAAKW,UAAL,EAAkB;AACjB,UAAKpB,mBAAmB,CAACG,OAApB,KAAgCqB,SAArC,EAAiD;AAChDxB,QAAAA,mBAAmB,CAACG,OAApB,GAA8BsB,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAAlD;AACA;;AACDH,MAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B,UAA7B;AACA,KALD,MAKO;AACNH,MAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B5B,mBAAmB,CAACG,OAApB,IAA+B,IAA5D;AACAH,MAAAA,mBAAmB,CAACG,OAApB,GAA8BqB,SAA9B;AACA;AACD,GAVD,EAUG,CAAEJ,UAAF,CAVH;AAYA;AACC;AACA,gCAAC,oCAAD;AACC,MAAA,GAAG,EAAGtB,cADP;AAEC,MAAA,WAAW,EAAGqB,SAFf;AAGC,MAAA,SAAS,EAAC,+CAHX;AAIC,MAAA,KAAK,EAAGC,UAAU,GAAG;AAAEQ,QAAAA,MAAM,EAAE;AAAV,OAAH,GAA4BJ;AAJ/C,OAKM3B,KALN,GAOC,4BAAC,gDAAD;AACC,MAAA,KAAK,EACJF,KAAK,GAAG;AAAEkC,QAAAA,SAAS,EAAG,UAAUlC,KAAO;AAA/B,OAAH,GAA4C6B,SAFnD;AAIC,MAAA,SAAS,EAAC,iEAJX;AAKC,MAAA,QAAQ,EAAG,CAAC;AALb,OAOC,4BAAC,yCAAD;AAAiB,MAAA,SAAS,EAAC;AAA3B,MAPD,CAPD;AAiBA;;AAnBD;AAqBA;;AAED,SAASR,QAAT,CAAmBL,OAAnB,EAA4BC,OAA5B,EAAqCkB,MAArC,EAA6CC,MAA7C,EAAsD;AACrD,QAAMxB,CAAC,GAAGwB,MAAM,GAAGnB,OAAnB;AACA,QAAMP,CAAC,GAAGyB,MAAM,GAAGnB,OAAnB;AAEA,QAAMqB,cAAc,GAAGC,IAAI,CAACC,KAAL,CAAY3B,CAAZ,EAAeF,CAAf,CAAvB;AACA,QAAM8B,UAAU,GAAGF,IAAI,CAACG,KAAL,CAAYJ,cAAc,IAAK,MAAMC,IAAI,CAACI,EAAhB,CAA1B,IAAmD,EAAtE;;AACA,MAAKF,UAAU,GAAG,CAAlB,EAAsB;AACrB,WAAO,MAAMA,UAAb;AACA;;AACD,SAAOA,UAAP;AACA;;eAEczC,W","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tCircleRoot,\n\tCircleIndicatorWrapper,\n\tCircleIndicator,\n} from './styles/angle-picker-control-styles';\n\nfunction AngleCircle( { value, onChange, ...props } ) {\n\tconst angleCircleRef = useRef();\n\tconst angleCircleCenter = useRef();\n\tconst previousCursorValue = useRef();\n\n\tconst setAngleCircleCenter = () => {\n\t\tconst rect = angleCircleRef.current.getBoundingClientRect();\n\t\tangleCircleCenter.current = {\n\t\t\tx: rect.x + rect.width / 2,\n\t\t\ty: rect.y + rect.height / 2,\n\t\t};\n\t};\n\n\tconst changeAngleToPosition = ( event ) => {\n\t\tconst { x: centerX, y: centerY } = angleCircleCenter.current;\n\t\t// Prevent (drag) mouse events from selecting and accidentally\n\t\t// triggering actions from other elements.\n\t\tevent.preventDefault();\n\t\t// Input control needs to lose focus and by preventDefault above, it doesn't.\n\t\tevent.target.focus();\n\t\tonChange( getAngle( centerX, centerY, event.clientX, event.clientY ) );\n\t};\n\n\tconst { startDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tsetAngleCircleCenter();\n\t\t\tchangeAngleToPosition( event );\n\t\t},\n\t\tonDragMove: changeAngleToPosition,\n\t\tonDragEnd: changeAngleToPosition,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tif ( previousCursorValue.current === undefined ) {\n\t\t\t\tpreviousCursorValue.current = document.body.style.cursor;\n\t\t\t}\n\t\t\tdocument.body.style.cursor = 'grabbing';\n\t\t} else {\n\t\t\tdocument.body.style.cursor = previousCursorValue.current || null;\n\t\t\tpreviousCursorValue.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\t\t<CircleRoot\n\t\t\tref={ angleCircleRef }\n\t\t\tonMouseDown={ startDrag }\n\t\t\tclassName=\"components-angle-picker-control__angle-circle\"\n\t\t\tstyle={ isDragging ? { cursor: 'grabbing' } : undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<CircleIndicatorWrapper\n\t\t\t\tstyle={\n\t\t\t\t\tvalue ? { transform: `rotate(${ value }deg)` } : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-angle-picker-control__angle-circle-indicator-wrapper\"\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t<CircleIndicator className=\"components-angle-picker-control__angle-circle-indicator\" />\n\t\t\t</CircleIndicatorWrapper>\n\t\t</CircleRoot>\n\t\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n\t);\n}\n\nfunction getAngle( centerX, centerY, pointX, pointY ) {\n\tconst y = pointY - centerY;\n\tconst x = pointX - centerX;\n\n\tconst angleInRadians = Math.atan2( y, x );\n\tconst angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;\n\tif ( angleInDeg < 0 ) {\n\t\treturn 360 + angleInDeg;\n\t}\n\treturn angleInDeg;\n}\n\nexport default AngleCircle;\n"]}
|
|
@@ -34,15 +34,12 @@ function AngleCircle(_ref) {
|
|
|
34
34
|
const {
|
|
35
35
|
x: centerX,
|
|
36
36
|
y: centerY
|
|
37
|
-
} = angleCircleCenter.current;
|
|
38
|
-
const {
|
|
39
|
-
ownerDocument
|
|
40
|
-
} = angleCircleRef.current; // Prevent (drag) mouse events from selecting and accidentally
|
|
37
|
+
} = angleCircleCenter.current; // Prevent (drag) mouse events from selecting and accidentally
|
|
41
38
|
// triggering actions from other elements.
|
|
42
39
|
|
|
43
|
-
event.preventDefault(); //
|
|
40
|
+
event.preventDefault(); // Input control needs to lose focus and by preventDefault above, it doesn't.
|
|
44
41
|
|
|
45
|
-
|
|
42
|
+
event.target.focus();
|
|
46
43
|
onChange(getAngle(centerX, centerY, event.clientX, event.clientY));
|
|
47
44
|
};
|
|
48
45
|
|
|
@@ -82,7 +79,8 @@ function AngleCircle(_ref) {
|
|
|
82
79
|
style: value ? {
|
|
83
80
|
transform: `rotate(${value}deg)`
|
|
84
81
|
} : undefined,
|
|
85
|
-
className: "components-angle-picker-control__angle-circle-indicator-wrapper"
|
|
82
|
+
className: "components-angle-picker-control__angle-circle-indicator-wrapper",
|
|
83
|
+
tabIndex: -1
|
|
86
84
|
}, createElement(CircleIndicator, {
|
|
87
85
|
className: "components-angle-picker-control__angle-circle-indicator"
|
|
88
86
|
})))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/angle-picker-control/angle-circle.js"],"names":["useEffect","useRef","__experimentalUseDragging","useDragging","CircleRoot","CircleIndicatorWrapper","CircleIndicator","AngleCircle","value","onChange","props","angleCircleRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","rect","current","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","centerX","centerY","
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/angle-picker-control/angle-circle.js"],"names":["useEffect","useRef","__experimentalUseDragging","useDragging","CircleRoot","CircleIndicatorWrapper","CircleIndicator","AngleCircle","value","onChange","props","angleCircleRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","rect","current","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","centerX","centerY","preventDefault","target","focus","getAngle","clientX","clientY","startDrag","isDragging","onDragStart","onDragMove","onDragEnd","undefined","document","body","style","cursor","transform","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tCircleRoot,\n\tCircleIndicatorWrapper,\n\tCircleIndicator,\n} from './styles/angle-picker-control-styles';\n\nfunction AngleCircle( { value, onChange, ...props } ) {\n\tconst angleCircleRef = useRef();\n\tconst angleCircleCenter = useRef();\n\tconst previousCursorValue = useRef();\n\n\tconst setAngleCircleCenter = () => {\n\t\tconst rect = angleCircleRef.current.getBoundingClientRect();\n\t\tangleCircleCenter.current = {\n\t\t\tx: rect.x + rect.width / 2,\n\t\t\ty: rect.y + rect.height / 2,\n\t\t};\n\t};\n\n\tconst changeAngleToPosition = ( event ) => {\n\t\tconst { x: centerX, y: centerY } = angleCircleCenter.current;\n\t\t// Prevent (drag) mouse events from selecting and accidentally\n\t\t// triggering actions from other elements.\n\t\tevent.preventDefault();\n\t\t// Input control needs to lose focus and by preventDefault above, it doesn't.\n\t\tevent.target.focus();\n\t\tonChange( getAngle( centerX, centerY, event.clientX, event.clientY ) );\n\t};\n\n\tconst { startDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tsetAngleCircleCenter();\n\t\t\tchangeAngleToPosition( event );\n\t\t},\n\t\tonDragMove: changeAngleToPosition,\n\t\tonDragEnd: changeAngleToPosition,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tif ( previousCursorValue.current === undefined ) {\n\t\t\t\tpreviousCursorValue.current = document.body.style.cursor;\n\t\t\t}\n\t\t\tdocument.body.style.cursor = 'grabbing';\n\t\t} else {\n\t\t\tdocument.body.style.cursor = previousCursorValue.current || null;\n\t\t\tpreviousCursorValue.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\t\t<CircleRoot\n\t\t\tref={ angleCircleRef }\n\t\t\tonMouseDown={ startDrag }\n\t\t\tclassName=\"components-angle-picker-control__angle-circle\"\n\t\t\tstyle={ isDragging ? { cursor: 'grabbing' } : undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<CircleIndicatorWrapper\n\t\t\t\tstyle={\n\t\t\t\t\tvalue ? { transform: `rotate(${ value }deg)` } : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-angle-picker-control__angle-circle-indicator-wrapper\"\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t<CircleIndicator className=\"components-angle-picker-control__angle-circle-indicator\" />\n\t\t\t</CircleIndicatorWrapper>\n\t\t</CircleRoot>\n\t\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n\t);\n}\n\nfunction getAngle( centerX, centerY, pointX, pointY ) {\n\tconst y = pointY - centerY;\n\tconst x = pointX - centerX;\n\n\tconst angleInRadians = Math.atan2( y, x );\n\tconst angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;\n\tif ( angleInDeg < 0 ) {\n\t\treturn 360 + angleInDeg;\n\t}\n\treturn angleInDeg;\n}\n\nexport default AngleCircle;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/components",
|
|
3
|
-
"version": "19.8.
|
|
3
|
+
"version": "19.8.5",
|
|
4
4
|
"description": "UI components for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -46,11 +46,11 @@
|
|
|
46
46
|
"@wordpress/escape-html": "^2.6.1",
|
|
47
47
|
"@wordpress/hooks": "^3.6.1",
|
|
48
48
|
"@wordpress/i18n": "^4.6.1",
|
|
49
|
-
"@wordpress/icons": "^8.2.
|
|
49
|
+
"@wordpress/icons": "^8.2.3",
|
|
50
50
|
"@wordpress/is-shallow-equal": "^4.6.1",
|
|
51
51
|
"@wordpress/keycodes": "^3.6.1",
|
|
52
52
|
"@wordpress/primitives": "^3.4.1",
|
|
53
|
-
"@wordpress/rich-text": "^5.4.
|
|
53
|
+
"@wordpress/rich-text": "^5.4.2",
|
|
54
54
|
"@wordpress/warning": "^2.6.1",
|
|
55
55
|
"classnames": "^2.3.1",
|
|
56
56
|
"colord": "^2.7.0",
|
|
@@ -76,5 +76,5 @@
|
|
|
76
76
|
"publishConfig": {
|
|
77
77
|
"access": "public"
|
|
78
78
|
},
|
|
79
|
-
"gitHead": "
|
|
79
|
+
"gitHead": "b83ec0e0f8bc80a73f7d606c7db10f0b3ec34a1c"
|
|
80
80
|
}
|
|
@@ -28,12 +28,11 @@ function AngleCircle( { value, onChange, ...props } ) {
|
|
|
28
28
|
|
|
29
29
|
const changeAngleToPosition = ( event ) => {
|
|
30
30
|
const { x: centerX, y: centerY } = angleCircleCenter.current;
|
|
31
|
-
const { ownerDocument } = angleCircleRef.current;
|
|
32
31
|
// Prevent (drag) mouse events from selecting and accidentally
|
|
33
32
|
// triggering actions from other elements.
|
|
34
33
|
event.preventDefault();
|
|
35
|
-
//
|
|
36
|
-
|
|
34
|
+
// Input control needs to lose focus and by preventDefault above, it doesn't.
|
|
35
|
+
event.target.focus();
|
|
37
36
|
onChange( getAngle( centerX, centerY, event.clientX, event.clientY ) );
|
|
38
37
|
};
|
|
39
38
|
|
|
@@ -72,6 +71,7 @@ function AngleCircle( { value, onChange, ...props } ) {
|
|
|
72
71
|
value ? { transform: `rotate(${ value }deg)` } : undefined
|
|
73
72
|
}
|
|
74
73
|
className="components-angle-picker-control__angle-circle-indicator-wrapper"
|
|
74
|
+
tabIndex={ -1 }
|
|
75
75
|
>
|
|
76
76
|
<CircleIndicator className="components-angle-picker-control__angle-circle-indicator" />
|
|
77
77
|
</CircleIndicatorWrapper>
|