@wordpress/components 23.8.0 → 23.9.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 (142) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/build/checkbox-control/index.js +2 -2
  3. package/build/checkbox-control/index.js.map +1 -1
  4. package/build/color-palette/index.native.js +12 -0
  5. package/build/color-palette/index.native.js.map +1 -1
  6. package/build/custom-gradient-picker/index.native.js +3 -1
  7. package/build/custom-gradient-picker/index.native.js.map +1 -1
  8. package/build/draggable/index.js +6 -1
  9. package/build/draggable/index.js.map +1 -1
  10. package/build/index.js.map +1 -1
  11. package/build/mobile/bottom-sheet/cell.native.js +6 -6
  12. package/build/mobile/bottom-sheet/cell.native.js.map +1 -1
  13. package/build/mobile/color-settings/palette.screen.native.js +0 -8
  14. package/build/mobile/color-settings/palette.screen.native.js.map +1 -1
  15. package/build/mobile/global-styles-context/utils.native.js +21 -4
  16. package/build/mobile/global-styles-context/utils.native.js.map +1 -1
  17. package/build/mobile/segmented-control/index.native.js +4 -2
  18. package/build/mobile/segmented-control/index.native.js.map +1 -1
  19. package/build/navigator/navigator-screen/component.js +1 -1
  20. package/build/navigator/navigator-screen/component.js.map +1 -1
  21. package/build/popover/index.js +1 -8
  22. package/build/popover/index.js.map +1 -1
  23. package/build/private-apis.js +4 -1
  24. package/build/private-apis.js.map +1 -1
  25. package/build/sandbox/index.native.js +5 -2
  26. package/build/sandbox/index.native.js.map +1 -1
  27. package/build/slot-fill/index.js +20 -7
  28. package/build/slot-fill/index.js.map +1 -1
  29. package/build/spinner/styles.js +4 -4
  30. package/build/spinner/styles.js.map +1 -1
  31. package/build/tree-grid/index.js +3 -3
  32. package/build/tree-grid/index.js.map +1 -1
  33. package/build/view/component.js +1 -2
  34. package/build/view/component.js.map +1 -1
  35. package/build-module/checkbox-control/index.js +2 -2
  36. package/build-module/checkbox-control/index.js.map +1 -1
  37. package/build-module/color-palette/index.native.js +13 -1
  38. package/build-module/color-palette/index.native.js.map +1 -1
  39. package/build-module/custom-gradient-picker/index.native.js +3 -1
  40. package/build-module/custom-gradient-picker/index.native.js.map +1 -1
  41. package/build-module/draggable/index.js +6 -1
  42. package/build-module/draggable/index.js.map +1 -1
  43. package/build-module/index.js.map +1 -1
  44. package/build-module/mobile/bottom-sheet/cell.native.js +6 -5
  45. package/build-module/mobile/bottom-sheet/cell.native.js.map +1 -1
  46. package/build-module/mobile/color-settings/palette.screen.native.js +0 -8
  47. package/build-module/mobile/color-settings/palette.screen.native.js.map +1 -1
  48. package/build-module/mobile/global-styles-context/utils.native.js +21 -3
  49. package/build-module/mobile/global-styles-context/utils.native.js.map +1 -1
  50. package/build-module/mobile/segmented-control/index.native.js +4 -2
  51. package/build-module/mobile/segmented-control/index.native.js.map +1 -1
  52. package/build-module/navigator/navigator-screen/component.js +1 -1
  53. package/build-module/navigator/navigator-screen/component.js.map +1 -1
  54. package/build-module/popover/index.js +1 -8
  55. package/build-module/popover/index.js.map +1 -1
  56. package/build-module/private-apis.js +3 -1
  57. package/build-module/private-apis.js.map +1 -1
  58. package/build-module/sandbox/index.native.js +5 -2
  59. package/build-module/sandbox/index.native.js.map +1 -1
  60. package/build-module/slot-fill/index.js +16 -6
  61. package/build-module/slot-fill/index.js.map +1 -1
  62. package/build-module/spinner/styles.js +4 -4
  63. package/build-module/spinner/styles.js.map +1 -1
  64. package/build-module/tree-grid/index.js +3 -3
  65. package/build-module/tree-grid/index.js.map +1 -1
  66. package/build-module/view/component.js +1 -2
  67. package/build-module/view/component.js.map +1 -1
  68. package/build-style/style-rtl.css +25 -15
  69. package/build-style/style.css +25 -15
  70. package/build-types/box-control/styles/box-control-styles.d.ts +1 -1
  71. package/build-types/button/deprecated.d.ts +6 -6
  72. package/build-types/checkbox-control/index.d.ts.map +1 -1
  73. package/build-types/color-palette/styles.d.ts +1 -1
  74. package/build-types/color-picker/styles.d.ts +3 -3
  75. package/build-types/date-time/date/styles.d.ts +1 -1
  76. package/build-types/date-time/time/styles.d.ts +4 -4
  77. package/build-types/draggable/index.d.ts +1 -1
  78. package/build-types/draggable/index.d.ts.map +1 -1
  79. package/build-types/draggable/stories/index.d.ts +8 -0
  80. package/build-types/draggable/stories/index.d.ts.map +1 -1
  81. package/build-types/draggable/types.d.ts +7 -0
  82. package/build-types/draggable/types.d.ts.map +1 -1
  83. package/build-types/focal-point-picker/styles/focal-point-picker-style.d.ts +1 -1
  84. package/build-types/index.d.ts +1 -0
  85. package/build-types/index.d.ts.map +1 -1
  86. package/build-types/navigation/styles/navigation-styles.d.ts +1 -1
  87. package/build-types/navigator/navigator-back-button/component.d.ts +1 -1
  88. package/build-types/navigator/navigator-back-button/hook.d.ts +1 -1
  89. package/build-types/navigator/navigator-button/component.d.ts +1 -1
  90. package/build-types/navigator/navigator-button/hook.d.ts +1 -1
  91. package/build-types/navigator/navigator-screen/component.d.ts +1 -1
  92. package/build-types/navigator/navigator-screen/component.d.ts.map +1 -1
  93. package/build-types/navigator/navigator-to-parent-button/component.d.ts +1 -1
  94. package/build-types/number-control/index.d.ts +1 -1
  95. package/build-types/number-control/stories/index.d.ts +1 -1
  96. package/build-types/palette-edit/styles.d.ts +16 -10
  97. package/build-types/palette-edit/styles.d.ts.map +1 -1
  98. package/build-types/popover/index.d.ts +1 -1
  99. package/build-types/popover/index.d.ts.map +1 -1
  100. package/build-types/popover/stories/e2e/index.d.ts +1 -1
  101. package/build-types/private-apis.d.ts.map +1 -1
  102. package/build-types/range-control/styles/range-control-styles.d.ts +1 -1
  103. package/build-types/slot-fill/index.d.ts +13 -1
  104. package/build-types/slot-fill/index.d.ts.map +1 -1
  105. package/build-types/spinner/styles.d.ts.map +1 -1
  106. package/build-types/toolbar/toolbar-button/index.d.ts +6 -6
  107. package/build-types/tree-grid/index.d.ts.map +1 -1
  108. package/build-types/ui/context/wordpress-component.d.ts +1 -1
  109. package/build-types/ui/context/wordpress-component.d.ts.map +1 -1
  110. package/build-types/unit-control/index.d.ts +1 -1
  111. package/build-types/unit-control/styles/unit-control-styles.d.ts +1 -1
  112. package/build-types/view/component.d.ts +1 -1
  113. package/build-types/view/component.d.ts.map +1 -1
  114. package/package.json +21 -22
  115. package/src/autocomplete/README.md +4 -2
  116. package/src/checkbox-control/index.tsx +6 -2
  117. package/src/color-palette/index.native.js +20 -1
  118. package/src/color-picker/test/index.tsx +99 -99
  119. package/src/custom-gradient-picker/index.native.js +1 -1
  120. package/src/dimension-control/README.md +1 -1
  121. package/src/draggable/README.md +8 -1
  122. package/src/draggable/index.tsx +6 -1
  123. package/src/draggable/stories/index.tsx +69 -33
  124. package/src/draggable/types.ts +7 -0
  125. package/src/index.ts +1 -0
  126. package/src/mobile/bottom-sheet/cell.native.js +4 -5
  127. package/src/mobile/color-settings/palette.screen.native.js +0 -7
  128. package/src/mobile/global-styles-context/utils.native.js +18 -3
  129. package/src/mobile/segmented-control/index.native.js +2 -2
  130. package/src/modal/style.scss +20 -12
  131. package/src/navigator/navigator-screen/component.tsx +1 -1
  132. package/src/popover/index.tsx +2 -15
  133. package/src/private-apis.ts +2 -0
  134. package/src/sandbox/index.native.js +8 -1
  135. package/src/slot-fill/index.js +14 -6
  136. package/src/snackbar/style.scss +2 -1
  137. package/src/spinner/styles.ts +2 -0
  138. package/src/tree-grid/index.tsx +7 -2
  139. package/src/ui/context/wordpress-component.ts +1 -1
  140. package/src/view/component.tsx +2 -2
  141. package/tsconfig.json +2 -2
  142. package/tsconfig.tsbuildinfo +1 -1
package/src/popover/index.tsx CHANGED
@@ -109,10 +109,6 @@ const AnimatedWrapper = forwardRef(
109
109
  }: HTMLMotionProps< 'div' > & AnimatedWrapperProps,
110
110
  forwardedRef: ForwardedRef< any >
111
111
  ) => {
112
- // When animating, animate only once (i.e. when the popover is opened), and
113
- // do not animate on subsequent prop changes (as it conflicts with
114
- // floating-ui's positioning updates).
115
- const [ hasAnimatedOnce, setHasAnimatedOnce ] = useState( false );
116
112
  const shouldReduceMotion = useReducedMotion();
117
113
 
118
114
  const { style: motionInlineStyles, ...otherMotionProps } = useMemo(
@@ -120,11 +116,6 @@ const AnimatedWrapper = forwardRef(
120
116
  [ placement ]
121
117
  );
122
118
 
123
- const onAnimationComplete = useCallback(
124
- () => setHasAnimatedOnce( true ),
125
- []
126
- );
127
-
128
119
  const computedAnimationProps: HTMLMotionProps< 'div' > =
129
120
  shouldAnimate && ! shouldReduceMotion
130
121
  ? {
@@ -133,10 +124,6 @@ const AnimatedWrapper = forwardRef(
133
124
  ...receivedInlineStyles,
134
125
  },
135
126
  ...otherMotionProps,
136
- onAnimationComplete,
137
- animate: hasAnimatedOnce
138
- ? false
139
- : otherMotionProps.animate,
140
127
  }
141
128
  : {
142
129
  animate: false,
@@ -160,8 +147,8 @@ const UnforwardedPopover = (
160
147
  WordPressComponentProps< PopoverProps, 'div', false >,
161
148
  // To avoid overlaps between the standard HTML attributes and the props
162
149
  // expected by `framer-motion`, omit all framer motion props from popover
163
- // props (except for `animate`, which is re-defined in `PopoverProps`).
164
- keyof Omit< MotionProps, 'animate' >
150
+ // props (except for `animate` and `children`, which are re-defined in `PopoverProps`).
151
+ keyof Omit< MotionProps, 'animate' | 'children' >
165
152
  >,
166
153
  forwardedRef: ForwardedRef< any >
167
154
  ) => {
package/src/private-apis.ts CHANGED
@@ -8,6 +8,7 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
8
8
  */
9
9
  import { default as CustomSelectControl } from './custom-select-control';
10
10
  import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
11
+ import { createPrivateSlotFill } from './slot-fill';
11
12
 
12
13
  export const { lock, unlock } =
13
14
  __dangerousOptInToUnstableAPIsOnlyForCoreModules(
@@ -19,4 +20,5 @@ export const privateApis = {};
19
20
  lock( privateApis, {
20
21
  CustomSelectControl,
21
22
  __experimentalPopoverLegacyPositionToPlacement,
23
+ createPrivateSlotFill,
22
24
  } );
package/src/sandbox/index.native.js CHANGED
@@ -185,6 +185,7 @@ const Sandbox = forwardRef( function Sandbox(
185
185
  type,
186
186
  url,
187
187
  onWindowEvents = {},
188
+ viewportProps = '',
188
189
  },
189
190
  ref
190
191
  ) {
@@ -213,13 +214,19 @@ const Sandbox = forwardRef( function Sandbox(
213
214
  // we can use this in the future to inject custom styles or scripts.
214
215
  // Scripts go into the body rather than the head, to support embedded content such as Instagram
215
216
  // that expect the scripts to be part of the body.
217
+
218
+ // Avoid comma issues with props.viewportProps.
219
+ const addViewportProps = viewportProps
220
+ .trim()
221
+ .replace( /(^[^,])/, ', $1' );
222
+
216
223
  const htmlDoc = (
217
224
  <html lang={ lang }>
218
225
  <head>
219
226
  <title>{ title }</title>
220
227
  <meta
221
228
  name="viewport"
222
- content="width=device-width, initial-scale=1"
229
+ content={ `width=device-width, initial-scale=1${ addViewportProps }` }
223
230
  ></meta>
224
231
  <style dangerouslySetInnerHTML={ { __html: style } } />
225
232
  { styles.map( ( rules, i ) => (
package/src/slot-fill/index.js CHANGED
@@ -44,13 +44,14 @@ export function Provider( { children, ...props } ) {
44
44
  );
45
45
  }
46
46
 
47
- export function createSlotFill( name ) {
48
- const FillComponent = ( props ) => <Fill name={ name } { ...props } />;
49
- FillComponent.displayName = name + 'Fill';
47
+ export function createSlotFill( key ) {
48
+ const baseName = typeof key === 'symbol' ? key.description : key;
49
+ const FillComponent = ( props ) => <Fill name={ key } { ...props } />;
50
+ FillComponent.displayName = `${ baseName }Fill`;
50
51
 
51
- const SlotComponent = ( props ) => <Slot name={ name } { ...props } />;
52
- SlotComponent.displayName = name + 'Slot';
53
- SlotComponent.__unstableName = name;
52
+ const SlotComponent = ( props ) => <Slot name={ key } { ...props } />;
53
+ SlotComponent.displayName = `${ baseName }Slot`;
54
+ SlotComponent.__unstableName = key;
54
55
 
55
56
  return {
56
57
  Fill: FillComponent,
@@ -58,4 +59,11 @@ export function createSlotFill( name ) {
58
59
  };
59
60
  }
60
61
 
62
+ export const createPrivateSlotFill = ( name ) => {
63
+ const privateKey = Symbol( name );
64
+ const privateSlotFill = createSlotFill( privateKey );
65
+
66
+ return { privateKey, ...privateSlotFill };
67
+ };
68
+
61
69
  export { useSlot };
package/src/snackbar/style.scss CHANGED
@@ -64,7 +64,8 @@
64
64
  }
65
65
 
66
66
  &:hover {
67
- color: $components-color-accent;
67
+ text-decoration: none;
68
+ color: $white;
68
69
  }
69
70
  }
70
71
  }
package/src/spinner/styles.ts CHANGED
@@ -26,6 +26,8 @@ export const StyledSpinner = styled.svg`
26
26
  position: relative;
27
27
  color: ${ COLORS.ui.theme };
28
28
  overflow: visible;
29
+ opacity: 1;
30
+ background-color: transparent;
29
31
  `;
30
32
 
31
33
  const commonPathProps = css`
package/src/tree-grid/index.tsx CHANGED
@@ -91,7 +91,8 @@ function UnforwardedTreeGrid(
91
91
  const canExpandCollapse = 0 === currentColumnIndex;
92
92
  const cannotFocusNextColumn =
93
93
  canExpandCollapse &&
94
- activeRow.getAttribute( 'aria-expanded' ) === 'false' &&
94
+ ( activeRow.getAttribute( 'data-expanded' ) === 'false' ||
95
+ activeRow.getAttribute( 'aria-expanded' ) === 'false' ) &&
95
96
  keyCode === RIGHT;
96
97
 
97
98
  if ( ( [ LEFT, RIGHT ] as number[] ).includes( keyCode ) ) {
@@ -112,6 +113,8 @@ function UnforwardedTreeGrid(
112
113
  // Left:
113
114
  // If a row is focused, and it is expanded, collapses the current row.
114
115
  if (
116
+ activeRow.getAttribute( 'data-expanded' ) ===
117
+ 'true' ||
115
118
  activeRow.getAttribute( 'aria-expanded' ) === 'true'
116
119
  ) {
117
120
  onCollapseRow( activeRow );
@@ -151,8 +154,10 @@ function UnforwardedTreeGrid(
151
154
  // Right:
152
155
  // If a row is focused, and it is collapsed, expands the current row.
153
156
  if (
157
+ activeRow.getAttribute( 'data-expanded' ) ===
158
+ 'false' ||
154
159
  activeRow.getAttribute( 'aria-expanded' ) ===
155
- 'false'
160
+ 'false'
156
161
  ) {
157
162
  onExpandRow( activeRow );
158
163
  event.preventDefault();
package/src/ui/context/wordpress-component.ts CHANGED
@@ -44,7 +44,7 @@ export type WordPressComponent<
44
44
  * We restrict it to a class to align with the already existing class names that
45
45
  * are generated by the context system.
46
46
  */
47
- selector: `.${ string }`;
47
+ selector?: `.${ string }`;
48
48
  };
49
49
 
50
50
  export type WordPressComponentFromProps<
package/src/view/component.tsx CHANGED
@@ -27,10 +27,10 @@ import type { ViewProps } from './types';
27
27
  * }
28
28
  * ```
29
29
  */
30
- // @ts-expect-error
31
30
  export const View: WordPressComponent<
32
31
  'div',
33
- ViewProps & RefAttributes< any >
32
+ ViewProps & RefAttributes< any >,
33
+ true
34
34
  > = styled.div``;
35
35
 
36
36
  View.selector = '.components-view';
package/tsconfig.json CHANGED
@@ -12,8 +12,8 @@
12
12
  "snapshot-diff",
13
13
  "@wordpress/jest-console"
14
14
  ],
15
- // Some errors in Reakit types with TypeScript 4.3
16
- // Remove the following line when they've been addressed.
15
+ // TODO: Remove `skipLibCheck` after resolving duplicate declaration of the `process` variable
16
+ // between `@types/webpack-env` (from @storybook packages) and `gutenberg-env`.
17
17
  "skipLibCheck": true,
18
18
  "strictNullChecks": true
19
19
  },