@wordpress/components 25.11.0 → 25.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (190) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/build/disclosure/index.js +37 -7
  3. package/build/disclosure/index.js.map +1 -1
  4. package/build/disclosure/types.js +6 -0
  5. package/build/disclosure/types.js.map +1 -0
  6. package/build/divider/component.js +5 -3
  7. package/build/divider/component.js.map +1 -1
  8. package/build/divider/types.js.map +1 -1
  9. package/build/dropdown-menu-v2-ariakit/index.js +26 -16
  10. package/build/dropdown-menu-v2-ariakit/index.js.map +1 -1
  11. package/build/dropdown-menu-v2-ariakit/types.js.map +1 -1
  12. package/build/gradient-picker/index.js +1 -1
  13. package/build/gradient-picker/index.js.map +1 -1
  14. package/build/index.native.js +8 -1
  15. package/build/index.native.js.map +1 -1
  16. package/build/mobile/audio-player/index.native.js +8 -9
  17. package/build/mobile/audio-player/index.native.js.map +1 -1
  18. package/build/mobile/global-styles-context/utils.native.js +44 -3
  19. package/build/mobile/global-styles-context/utils.native.js.map +1 -1
  20. package/build/radio-group/context.js +22 -0
  21. package/build/radio-group/context.js.map +1 -0
  22. package/build/radio-group/index.js +27 -23
  23. package/build/radio-group/index.js.map +1 -1
  24. package/build/radio-group/radio.js +58 -0
  25. package/build/radio-group/radio.js.map +1 -0
  26. package/build/radio-group/types.js +6 -0
  27. package/build/radio-group/types.js.map +1 -0
  28. package/build/tabs/styles.js +14 -7
  29. package/build/tabs/styles.js.map +1 -1
  30. package/build/tabs/tab.js +3 -5
  31. package/build/tabs/tab.js.map +1 -1
  32. package/build/tabs/tablist.js +3 -5
  33. package/build/tabs/tablist.js.map +1 -1
  34. package/build/tabs/tabpanel.js +6 -9
  35. package/build/tabs/tabpanel.js.map +1 -1
  36. package/build/tabs/types.js.map +1 -1
  37. package/build/text-control/index.js +5 -1
  38. package/build/text-control/index.js.map +1 -1
  39. package/build/text-control/types.js.map +1 -1
  40. package/build/toggle-group-control/toggle-group-control/component.js +4 -2
  41. package/build/toggle-group-control/toggle-group-control/component.js.map +1 -1
  42. package/build/toggle-group-control/toggle-group-control/styles.js +13 -9
  43. package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  44. package/build/toggle-group-control/types.js.map +1 -1
  45. package/build-module/disclosure/index.js +33 -8
  46. package/build-module/disclosure/index.js.map +1 -1
  47. package/build-module/disclosure/types.js +2 -0
  48. package/build-module/disclosure/types.js.map +1 -0
  49. package/build-module/divider/component.js +3 -3
  50. package/build-module/divider/component.js.map +1 -1
  51. package/build-module/divider/types.js.map +1 -1
  52. package/build-module/dropdown-menu-v2-ariakit/index.js +27 -17
  53. package/build-module/dropdown-menu-v2-ariakit/index.js.map +1 -1
  54. package/build-module/dropdown-menu-v2-ariakit/types.js.map +1 -1
  55. package/build-module/gradient-picker/index.js +1 -1
  56. package/build-module/gradient-picker/index.js.map +1 -1
  57. package/build-module/index.native.js +1 -1
  58. package/build-module/index.native.js.map +1 -1
  59. package/build-module/mobile/audio-player/index.native.js +9 -10
  60. package/build-module/mobile/audio-player/index.native.js.map +1 -1
  61. package/build-module/mobile/global-styles-context/utils.native.js +43 -4
  62. package/build-module/mobile/global-styles-context/utils.native.js.map +1 -1
  63. package/build-module/radio-group/context.js +14 -0
  64. package/build-module/radio-group/context.js.map +1 -0
  65. package/build-module/radio-group/index.js +24 -23
  66. package/build-module/radio-group/index.js.map +1 -1
  67. package/build-module/radio-group/radio.js +46 -0
  68. package/build-module/radio-group/radio.js.map +1 -0
  69. package/build-module/radio-group/types.js +2 -0
  70. package/build-module/radio-group/types.js.map +1 -0
  71. package/build-module/tabs/styles.js +11 -5
  72. package/build-module/tabs/styles.js.map +1 -1
  73. package/build-module/tabs/tab.js +3 -5
  74. package/build-module/tabs/tab.js.map +1 -1
  75. package/build-module/tabs/tablist.js +3 -5
  76. package/build-module/tabs/tablist.js.map +1 -1
  77. package/build-module/tabs/tabpanel.js +6 -7
  78. package/build-module/tabs/tabpanel.js.map +1 -1
  79. package/build-module/tabs/types.js.map +1 -1
  80. package/build-module/text-control/index.js +6 -1
  81. package/build-module/text-control/index.js.map +1 -1
  82. package/build-module/text-control/types.js.map +1 -1
  83. package/build-module/toggle-group-control/toggle-group-control/component.js +4 -2
  84. package/build-module/toggle-group-control/toggle-group-control/component.js.map +1 -1
  85. package/build-module/toggle-group-control/toggle-group-control/styles.js +13 -9
  86. package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
  87. package/build-module/toggle-group-control/types.js.map +1 -1
  88. package/build-style/style-rtl.css +21 -3
  89. package/build-style/style.css +21 -3
  90. package/build-types/card/card-divider/component.d.ts +1 -1
  91. package/build-types/card/card-divider/hook.d.ts +162 -162
  92. package/build-types/disclosure/index.d.ts +7 -1
  93. package/build-types/disclosure/index.d.ts.map +1 -1
  94. package/build-types/disclosure/types.d.ts +12 -0
  95. package/build-types/disclosure/types.d.ts.map +1 -0
  96. package/build-types/divider/component.d.ts +5 -1
  97. package/build-types/divider/component.d.ts.map +1 -1
  98. package/build-types/divider/stories/index.story.d.ts.map +1 -1
  99. package/build-types/divider/styles.d.ts +1 -1
  100. package/build-types/divider/types.d.ts +2 -2
  101. package/build-types/divider/types.d.ts.map +1 -1
  102. package/build-types/dropdown-menu-v2-ariakit/index.d.ts.map +1 -1
  103. package/build-types/dropdown-menu-v2-ariakit/stories/index.story.d.ts.map +1 -1
  104. package/build-types/dropdown-menu-v2-ariakit/types.d.ts +1 -1
  105. package/build-types/radio-group/context.d.ts +10 -0
  106. package/build-types/radio-group/context.d.ts.map +1 -0
  107. package/build-types/radio-group/index.d.ts +7 -9
  108. package/build-types/radio-group/index.d.ts.map +1 -1
  109. package/build-types/radio-group/radio.d.ts +8 -0
  110. package/build-types/radio-group/radio.d.ts.map +1 -0
  111. package/build-types/radio-group/stories/index.story.d.ts +14 -0
  112. package/build-types/radio-group/stories/index.story.d.ts.map +1 -0
  113. package/build-types/radio-group/types.d.ts +40 -0
  114. package/build-types/radio-group/types.d.ts.map +1 -0
  115. package/build-types/tabs/index.d.ts +3 -3
  116. package/build-types/tabs/stories/index.story.d.ts.map +1 -1
  117. package/build-types/tabs/styles.d.ts +10 -0
  118. package/build-types/tabs/styles.d.ts.map +1 -1
  119. package/build-types/tabs/tab.d.ts +1 -1
  120. package/build-types/tabs/tab.d.ts.map +1 -1
  121. package/build-types/tabs/tablist.d.ts +1 -1
  122. package/build-types/tabs/tablist.d.ts.map +1 -1
  123. package/build-types/tabs/tabpanel.d.ts +4 -1
  124. package/build-types/tabs/tabpanel.d.ts.map +1 -1
  125. package/build-types/tabs/types.d.ts +7 -31
  126. package/build-types/tabs/types.d.ts.map +1 -1
  127. package/build-types/text-control/index.d.ts +2 -1
  128. package/build-types/text-control/index.d.ts.map +1 -1
  129. package/build-types/text-control/types.d.ts +6 -0
  130. package/build-types/text-control/types.d.ts.map +1 -1
  131. package/build-types/toggle-group-control/toggle-group-control/component.d.ts +1 -0
  132. package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map +1 -1
  133. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts +2 -2
  134. package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
  135. package/build-types/toggle-group-control/types.d.ts +6 -0
  136. package/build-types/toggle-group-control/types.d.ts.map +1 -1
  137. package/package.json +19 -20
  138. package/src/disclosure/index.tsx +44 -0
  139. package/src/disclosure/types.tsx +10 -0
  140. package/src/divider/component.tsx +3 -3
  141. package/src/divider/stories/index.story.tsx +8 -0
  142. package/src/divider/types.ts +2 -2
  143. package/src/dropdown-menu/style.scss +4 -0
  144. package/src/dropdown-menu-v2-ariakit/README.md +0 -7
  145. package/src/dropdown-menu-v2-ariakit/index.tsx +31 -15
  146. package/src/dropdown-menu-v2-ariakit/stories/index.story.tsx +1 -4
  147. package/src/dropdown-menu-v2-ariakit/test/index.tsx +0 -26
  148. package/src/dropdown-menu-v2-ariakit/types.ts +1 -1
  149. package/src/gradient-picker/index.tsx +1 -1
  150. package/src/index.native.js +1 -0
  151. package/src/mobile/audio-player/index.native.js +9 -13
  152. package/src/mobile/global-styles-context/utils.native.js +52 -3
  153. package/src/radio-group/context.tsx +18 -0
  154. package/src/radio-group/index.tsx +65 -0
  155. package/src/radio-group/radio.tsx +55 -0
  156. package/src/radio-group/stories/index.story.tsx +90 -0
  157. package/src/radio-group/types.ts +39 -0
  158. package/src/tabs/README.md +3 -33
  159. package/src/tabs/stories/index.story.tsx +9 -1
  160. package/src/tabs/styles.ts +16 -0
  161. package/src/tabs/tab.tsx +6 -6
  162. package/src/tabs/tablist.tsx +21 -20
  163. package/src/tabs/tabpanel.tsx +24 -23
  164. package/src/tabs/test/index.tsx +71 -16
  165. package/src/tabs/types.ts +7 -32
  166. package/src/text-control/index.tsx +5 -1
  167. package/src/text-control/style.scss +5 -0
  168. package/src/text-control/types.ts +6 -0
  169. package/src/toggle-group-control/toggle-group-control/component.tsx +8 -2
  170. package/src/toggle-group-control/toggle-group-control/styles.ts +13 -4
  171. package/src/toggle-group-control/types.ts +6 -0
  172. package/src/toolbar/toolbar-button/style.scss +0 -5
  173. package/tsconfig.tsbuildinfo +1 -1
  174. package/build/radio-group/radio/index.js +0 -49
  175. package/build/radio-group/radio/index.js.map +0 -1
  176. package/build/radio-group/radio-context/index.js +0 -18
  177. package/build/radio-group/radio-context/index.js.map +0 -1
  178. package/build-module/radio-group/radio/index.js +0 -40
  179. package/build-module/radio-group/radio/index.js.map +0 -1
  180. package/build-module/radio-group/radio-context/index.js +0 -10
  181. package/build-module/radio-group/radio-context/index.js.map +0 -1
  182. package/build-types/radio-group/radio/index.d.ts +0 -7
  183. package/build-types/radio-group/radio/index.d.ts.map +0 -1
  184. package/build-types/radio-group/radio-context/index.d.ts +0 -6
  185. package/build-types/radio-group/radio-context/index.d.ts.map +0 -1
  186. package/src/disclosure/index.js +0 -11
  187. package/src/radio-group/index.js +0 -51
  188. package/src/radio-group/radio/index.js +0 -40
  189. package/src/radio-group/radio-context/index.js +0 -11
  190. package/src/radio-group/stories/index.story.js +0 -83
@@ -1,49 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _react = require("react");
9
- var _Radio = require("reakit/Radio");
10
- var _element = require("@wordpress/element");
11
- var _button = _interopRequireDefault(require("../../button"));
12
- var _radioContext = _interopRequireDefault(require("../radio-context"));
13
- // @ts-nocheck
14
-
15
- /**
16
- * External dependencies
17
- */
18
-
19
- /**
20
- * WordPress dependencies
21
- */
22
-
23
- /**
24
- * Internal dependencies
25
- */
26
-
27
- function Radio({
28
- children,
29
- value,
30
- ...props
31
- }, ref) {
32
- const radioContext = (0, _element.useContext)(_radioContext.default);
33
- const checked = radioContext.state === value;
34
- return (0, _react.createElement)(_Radio.Radio, {
35
- ref: ref,
36
- as: _button.default,
37
- variant: checked ? 'primary' : 'secondary',
38
- value: value,
39
- ...radioContext,
40
- ...props
41
- }, children || value);
42
- }
43
-
44
- /**
45
- * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
46
- */
47
- var _default = (0, _element.forwardRef)(Radio);
48
- exports.default = _default;
49
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_Radio","require","_element","_button","_interopRequireDefault","_radioContext","Radio","children","value","props","ref","radioContext","useContext","RadioContext","checked","state","_react","createElement","as","Button","variant","_default","forwardRef","exports","default"],"sources":["@wordpress/components/src/radio-group/radio/index.js"],"sourcesContent":["// @ts-nocheck\n\n/**\n * External dependencies\n */\nimport { Radio as ReakitRadio } from 'reakit/Radio';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport RadioContext from '../radio-context';\n\nfunction Radio( { children, value, ...props }, ref ) {\n\tconst radioContext = useContext( RadioContext );\n\tconst checked = radioContext.state === value;\n\n\treturn (\n\t\t<ReakitRadio\n\t\t\tref={ ref }\n\t\t\tas={ Button }\n\t\t\tvariant={ checked ? 'primary' : 'secondary' }\n\t\t\tvalue={ value }\n\t\t\t{ ...radioContext }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children || value }\n\t\t</ReakitRadio>\n\t);\n}\n\n/**\n * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.\n */\nexport default forwardRef( Radio );\n"],"mappings":";;;;;;;;AAKA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,aAAA,GAAAD,sBAAA,CAAAH,OAAA;AAhBA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIA,SAASK,KAAKA,CAAE;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,EAAG;EACpD,MAAMC,YAAY,GAAG,IAAAC,mBAAU,EAAEC,qBAAa,CAAC;EAC/C,MAAMC,OAAO,GAAGH,YAAY,CAACI,KAAK,KAAKP,KAAK;EAE5C,OACC,IAAAQ,MAAA,CAAAC,aAAA,EAACjB,MAAA,CAAAM,KAAW;IACXI,GAAG,EAAGA,GAAK;IACXQ,EAAE,EAAGC,eAAQ;IACbC,OAAO,EAAGN,OAAO,GAAG,SAAS,GAAG,WAAa;IAC7CN,KAAK,EAAGA,KAAO;IAAA,GACVG,YAAY;IAAA,GACZF;EAAK,GAERF,QAAQ,IAAIC,KACF,CAAC;AAEhB;;AAEA;AACA;AACA;AAFA,IAAAa,QAAA,GAGe,IAAAC,mBAAU,EAAEhB,KAAM,CAAC;AAAAiB,OAAA,CAAAC,OAAA,GAAAH,QAAA"}
@@ -1,18 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _element = require("@wordpress/element");
8
- /**
9
- * WordPress dependencies
10
- */
11
-
12
- const RadioContext = (0, _element.createContext)({
13
- state: null,
14
- setState: () => {}
15
- });
16
- var _default = RadioContext;
17
- exports.default = _default;
18
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["_element","require","RadioContext","createContext","state","setState","_default","exports","default"],"sources":["@wordpress/components/src/radio-group/radio-context/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nconst RadioContext = createContext( {\n\tstate: null,\n\tsetState: () => {},\n} );\n\nexport default RadioContext;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA,MAAMC,YAAY,GAAG,IAAAC,sBAAa,EAAE;EACnCC,KAAK,EAAE,IAAI;EACXC,QAAQ,EAAEA,CAAA,KAAM,CAAC;AAClB,CAAE,CAAC;AAAC,IAAAC,QAAA,GAEWJ,YAAY;AAAAK,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
@@ -1,40 +0,0 @@
1
- import { createElement } from "react";
2
- // @ts-nocheck
3
-
4
- /**
5
- * External dependencies
6
- */
7
- import { Radio as ReakitRadio } from 'reakit/Radio';
8
-
9
- /**
10
- * WordPress dependencies
11
- */
12
- import { useContext, forwardRef } from '@wordpress/element';
13
-
14
- /**
15
- * Internal dependencies
16
- */
17
- import Button from '../../button';
18
- import RadioContext from '../radio-context';
19
- function Radio({
20
- children,
21
- value,
22
- ...props
23
- }, ref) {
24
- const radioContext = useContext(RadioContext);
25
- const checked = radioContext.state === value;
26
- return createElement(ReakitRadio, {
27
- ref: ref,
28
- as: Button,
29
- variant: checked ? 'primary' : 'secondary',
30
- value: value,
31
- ...radioContext,
32
- ...props
33
- }, children || value);
34
- }
35
-
36
- /**
37
- * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
38
- */
39
- export default forwardRef(Radio);
40
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["Radio","ReakitRadio","useContext","forwardRef","Button","RadioContext","children","value","props","ref","radioContext","checked","state","createElement","as","variant"],"sources":["@wordpress/components/src/radio-group/radio/index.js"],"sourcesContent":["// @ts-nocheck\n\n/**\n * External dependencies\n */\nimport { Radio as ReakitRadio } from 'reakit/Radio';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport RadioContext from '../radio-context';\n\nfunction Radio( { children, value, ...props }, ref ) {\n\tconst radioContext = useContext( RadioContext );\n\tconst checked = radioContext.state === value;\n\n\treturn (\n\t\t<ReakitRadio\n\t\t\tref={ ref }\n\t\t\tas={ Button }\n\t\t\tvariant={ checked ? 'primary' : 'secondary' }\n\t\t\tvalue={ value }\n\t\t\t{ ...radioContext }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children || value }\n\t\t</ReakitRadio>\n\t);\n}\n\n/**\n * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.\n */\nexport default forwardRef( Radio );\n"],"mappings":";AAAA;;AAEA;AACA;AACA;AACA,SAASA,KAAK,IAAIC,WAAW,QAAQ,cAAc;;AAEnD;AACA;AACA;AACA,SAASC,UAAU,EAAEC,UAAU,QAAQ,oBAAoB;;AAE3D;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AACjC,OAAOC,YAAY,MAAM,kBAAkB;AAE3C,SAASL,KAAKA,CAAE;EAAEM,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,EAAG;EACpD,MAAMC,YAAY,GAAGR,UAAU,CAAEG,YAAa,CAAC;EAC/C,MAAMM,OAAO,GAAGD,YAAY,CAACE,KAAK,KAAKL,KAAK;EAE5C,OACCM,aAAA,CAACZ,WAAW;IACXQ,GAAG,EAAGA,GAAK;IACXK,EAAE,EAAGV,MAAQ;IACbW,OAAO,EAAGJ,OAAO,GAAG,SAAS,GAAG,WAAa;IAC7CJ,KAAK,EAAGA,KAAO;IAAA,GACVG,YAAY;IAAA,GACZF;EAAK,GAERF,QAAQ,IAAIC,KACF,CAAC;AAEhB;;AAEA;AACA;AACA;AACA,eAAeJ,UAAU,CAAEH,KAAM,CAAC"}
@@ -1,10 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { createContext } from '@wordpress/element';
5
- const RadioContext = createContext({
6
- state: null,
7
- setState: () => {}
8
- });
9
- export default RadioContext;
10
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["createContext","RadioContext","state","setState"],"sources":["@wordpress/components/src/radio-group/radio-context/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nconst RadioContext = createContext( {\n\tstate: null,\n\tsetState: () => {},\n} );\n\nexport default RadioContext;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,QAAQ,oBAAoB;AAElD,MAAMC,YAAY,GAAGD,aAAa,CAAE;EACnCE,KAAK,EAAE,IAAI;EACXC,QAAQ,EAAEA,CAAA,KAAM,CAAC;AAClB,CAAE,CAAC;AAEH,eAAeF,YAAY"}
@@ -1,7 +0,0 @@
1
- declare const _default: import("react").ForwardRefExoticComponent<Pick<{
2
- [x: string]: any;
3
- children: any;
4
- value: any;
5
- }, string | number> & import("react").RefAttributes<any>>;
6
- export default _default;
7
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/radio-group/radio/index.js"],"names":[],"mappings":""}
@@ -1,6 +0,0 @@
1
- export default RadioContext;
2
- declare const RadioContext: import("react").Context<{
3
- state: null;
4
- setState: () => void;
5
- }>;
6
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/radio-group/radio-context/index.js"],"names":[],"mappings":";AAKA;;;GAGI"}
@@ -1,11 +0,0 @@
1
- /**
2
- * Accessible Disclosure component that controls visibility of a section of
3
- * content. It follows the WAI-ARIA Disclosure Pattern.
4
- *
5
- * @see https://reakit.io/docs/disclosure/
6
- *
7
- * The plan is to build own API that accounts for future breaking changes
8
- * in Reakit (https://github.com/WordPress/gutenberg/pull/28085).
9
- */
10
- /* eslint-disable-next-line no-restricted-imports */
11
- export { DisclosureContent } from 'reakit';
@@ -1,51 +0,0 @@
1
- // @ts-nocheck
2
-
3
- /**
4
- * External dependencies
5
- */
6
- import { useRadioState, RadioGroup as ReakitRadioGroup } from 'reakit/Radio';
7
-
8
- /**
9
- * WordPress dependencies
10
- */
11
- import { forwardRef } from '@wordpress/element';
12
-
13
- /**
14
- * Internal dependencies
15
- */
16
- import ButtonGroup from '../button-group';
17
- import RadioContext from './radio-context';
18
-
19
- function RadioGroup(
20
- { label, checked, defaultChecked, disabled, onChange, ...props },
21
- ref
22
- ) {
23
- const radioState = useRadioState( {
24
- state: defaultChecked,
25
- baseId: props.id,
26
- } );
27
- const radioContext = {
28
- ...radioState,
29
- disabled,
30
- // Controlled or uncontrolled.
31
- state: checked ?? radioState.state,
32
- setState: onChange ?? radioState.setState,
33
- };
34
-
35
- return (
36
- <RadioContext.Provider value={ radioContext }>
37
- <ReakitRadioGroup
38
- ref={ ref }
39
- as={ ButtonGroup }
40
- aria-label={ label }
41
- { ...radioState }
42
- { ...props }
43
- />
44
- </RadioContext.Provider>
45
- );
46
- }
47
-
48
- /**
49
- * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
50
- */
51
- export default forwardRef( RadioGroup );
@@ -1,40 +0,0 @@
1
- // @ts-nocheck
2
-
3
- /**
4
- * External dependencies
5
- */
6
- import { Radio as ReakitRadio } from 'reakit/Radio';
7
-
8
- /**
9
- * WordPress dependencies
10
- */
11
- import { useContext, forwardRef } from '@wordpress/element';
12
-
13
- /**
14
- * Internal dependencies
15
- */
16
- import Button from '../../button';
17
- import RadioContext from '../radio-context';
18
-
19
- function Radio( { children, value, ...props }, ref ) {
20
- const radioContext = useContext( RadioContext );
21
- const checked = radioContext.state === value;
22
-
23
- return (
24
- <ReakitRadio
25
- ref={ ref }
26
- as={ Button }
27
- variant={ checked ? 'primary' : 'secondary' }
28
- value={ value }
29
- { ...radioContext }
30
- { ...props }
31
- >
32
- { children || value }
33
- </ReakitRadio>
34
- );
35
- }
36
-
37
- /**
38
- * @deprecated Use `RadioControl` or `ToggleGroupControl` instead.
39
- */
40
- export default forwardRef( Radio );
@@ -1,11 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { createContext } from '@wordpress/element';
5
-
6
- const RadioContext = createContext( {
7
- state: null,
8
- setState: () => {},
9
- } );
10
-
11
- export default RadioContext;
@@ -1,83 +0,0 @@
1
- /**
2
- * WordPress dependencies
3
- */
4
- import { useState } from '@wordpress/element';
5
-
6
- /**
7
- * Internal dependencies
8
- */
9
- import Radio from '../radio';
10
- import RadioGroup from '../';
11
-
12
- export default {
13
- title: 'Components (Deprecated)/RadioGroup',
14
- component: RadioGroup,
15
- subcomponents: { Radio },
16
- parameters: {
17
- docs: {
18
- description: {
19
- component:
20
- 'This component is deprecated. Use `RadioControl` or `ToggleGroupControl` instead.',
21
- },
22
- },
23
- },
24
- };
25
-
26
- export const _default = () => {
27
- /* eslint-disable no-restricted-syntax */
28
- return (
29
- <RadioGroup
30
- // id is required for server side rendering
31
- id="default-radiogroup"
32
- label="options"
33
- defaultChecked="option2"
34
- >
35
- <Radio value="option1">Option 1</Radio>
36
- <Radio value="option2">Option 2</Radio>
37
- <Radio value="option3">Option 3</Radio>
38
- </RadioGroup>
39
- );
40
- /* eslint-enable no-restricted-syntax */
41
- };
42
-
43
- export const Disabled = () => {
44
- /* eslint-disable no-restricted-syntax */
45
- return (
46
- <RadioGroup
47
- // id is required for server side rendering
48
- id="disabled-radiogroup"
49
- disabled
50
- label="options"
51
- defaultChecked="option2"
52
- >
53
- <Radio value="option1">Option 1</Radio>
54
- <Radio value="option2">Option 2</Radio>
55
- <Radio value="option3">Option 3</Radio>
56
- </RadioGroup>
57
- );
58
- /* eslint-enable no-restricted-syntax */
59
- };
60
-
61
- const ControlledRadioGroupWithState = () => {
62
- const [ checked, setChecked ] = useState( 1 );
63
-
64
- /* eslint-disable no-restricted-syntax */
65
- return (
66
- <RadioGroup
67
- // id is required for server side rendering
68
- id="controlled-radiogroup"
69
- label="options"
70
- checked={ checked }
71
- onChange={ setChecked }
72
- >
73
- <Radio value={ 0 }>Option 1</Radio>
74
- <Radio value={ 1 }>Option 2</Radio>
75
- <Radio value={ 2 }>Option 3</Radio>
76
- </RadioGroup>
77
- );
78
- /* eslint-enable no-restricted-syntax */
79
- };
80
-
81
- export const Controlled = () => {
82
- return <ControlledRadioGroupWithState />;
83
- };