0
# Development & Styling
1

2
Development tools and styling utilities including deprecation warnings, attribute filtering, layout effect management, and data manipulation helpers.
3

4
## Capabilities
5

6
### Attribute Management
7

8
#### pickAttrs
9

10
Extracts valid HTML attributes and events from props object, useful for passing through valid DOM props while filtering out component-specific props.
11

12
```typescript { .api }
13
/**
14
 * Pick valid HTML attributes and events from props
15
 * @param {object} props - Props object to filter
16
 * @param {boolean} [ariaOnly=false] - If true, only pick aria-* attributes
17
 * @returns {object} Filtered props containing only valid HTML attributes
18
 */
19
function pickAttrs(props: object, ariaOnly?: boolean): object;
20
```
21

22
**Usage Example:**
23

24
```javascript
25
import pickAttrs from 'rc-util/lib/pickAttrs';
26

27
function Button({ 
28
  children, 
29
  type = 'button', 
30
  customProp, 
31
  onClick, 
32
  className,
33
  'aria-label': ariaLabel,
34
  'data-testid': testId,
35
  ...restProps 
36
}) {
37
  // Get only valid HTML attributes
38
  const htmlProps = pickAttrs(restProps);
39
  
40
  return (
41
    <button 
42
      type={type}
43
      onClick={onClick}
44
      className={className}
45
      aria-label={ariaLabel}
46
      data-testid={testId}
47
      {...htmlProps}
48
    >
49
      {children}
50
    </button>
51
  );
52
}
53

54
// Only aria attributes
55
const ariaProps = pickAttrs(props, true);
56
```
57

58
### Styling Utilities
59

60
#### setStyle
61

62
Sets element styles and returns previous styles for restoration, with IE browser compatibility.
63

64
```typescript { .api }
65
/**
66
 * Set element styles and return previous styles
67
 * @param {React.CSSProperties} style - Styles to apply
68
 * @param {SetStyleOptions} [options] - Configuration options
69
 * @returns {React.CSSProperties} Previous styles for restoration
70
 */
71
function setStyle(
72
  style: React.CSSProperties,
73
  options?: SetStyleOptions
74
): React.CSSProperties;
75

76
interface SetStyleOptions {
77
  /** Target element (defaults to document.body) */
78
  element?: HTMLElement;
79
}
80
```
81

82
**Usage Example:**
83

84
```typescript
85
import setStyle from 'rc-util/lib/setStyle';
86

87
// Apply modal styles
88
const previousStyles = setStyle({
89
  overflow: 'hidden',
90
  paddingRight: '17px'
91
});
92

93
// Later restore original styles
94
setStyle(previousStyles);
95

96
// Apply to specific element
97
const elementStyles = setStyle(
98
  { position: 'fixed', top: '0' },
99
  { element: document.getElementById('header') }
100
);
101
```
102

103
### Data Utilities
104

105
#### get
106

107
Safe property access using path array, useful for accessing nested object properties without throwing errors.
108

109
```typescript { .api }
110
/**
111
 * Safe property access using path array
112
 * @param {any} entity - Object to access properties from
113
 * @param {(string | number)[]} path - Property path as array
114
 * @returns {T | undefined} Property value or undefined if not found
115
 */
116
function get<T = any>(entity: any, path: (string | number)[]): T | undefined;
117
```
118

119
**Usage Example:**
120

121
```typescript
122
import get from 'rc-util/lib/utils/get';
123

124
const user = {
125
  profile: {
126
    address: {
127
      city: 'New York'
128
    }
129
  }
130
};
131

132
// Safe nested access
133
const city = get(user, ['profile', 'address', 'city']); // 'New York'
134
const missing = get(user, ['profile', 'phone', 'number']); // undefined
135

136
// Array access
137
const items = [{ name: 'first' }, { name: 'second' }];
138
const firstName = get(items, [0, 'name']); // 'first'
139
```
140

141
#### set
142

143
Immutable property setting using path array, returns new object with updated property.
144

145
```typescript { .api }
146
/**
147
 * Immutable property setting using path array
148
 * @param {Entity} entity - Source object/array
149
 * @param {(string | number)[]} paths - Property path as array
150
 * @param {Value} value - Value to set
151
 * @returns {Output} New object/array with updated property
152
 */
153
function set<Entity = any, Output = Entity, Value = any>(
154
  entity: Entity,
155
  paths: (string | number)[],
156
  value: Value
157
): Output;
158
```
159

160
**Usage Example:**
161

162
```typescript
163
import set from 'rc-util/lib/utils/set';
164

165
const original = {
166
  user: {
167
    profile: {
168
      name: 'John'
169
    }
170
  }
171
};
172

173
// Immutable update
174
const updated = set(original, ['user', 'profile', 'name'], 'Jane');
175
// Original object is unchanged, new object returned
176

177
// Array updates
178
const items = [{ id: 1, name: 'Item 1' }];
179
const updatedItems = set(items, [0, 'name'], 'Updated Item');
180
```
181

182
### KeyCode Utilities
183

184
#### KeyCode
185

186
Comprehensive keyboard key code definitions and utilities for keyboard event handling.
187

188
```typescript { .api }
189
/**
190
 * Key code constants and utilities
191
 */
192
const KeyCode: {
193
  // Key code constants
194
  MAC_ENTER: 3;
195
  BACKSPACE: 8;
196
  TAB: 9;
197
  ENTER: 13;
198
  SHIFT: 16;
199
  CTRL: 17;
200
  ALT: 18;
201
  ESC: 27;
202
  SPACE: 32;
203
  LEFT: 37;
204
  UP: 38;
205
  RIGHT: 39;
206
  DOWN: 40;
207
  DELETE: 46;
208
  // ... many more key codes
209
  
210
  /**
211
   * Check if key event is a text-modifying key
212
   * @param {Event} e - Keyboard event
213
   * @returns {boolean} True if key modifies text
214
   */
215
  isTextModifyingKeyEvent(e: Event): boolean;
216
  
217
  /**
218
   * Check if key code represents a character key
219
   * @param {number} keyCode - Key code to check
220
   * @returns {boolean} True if key produces character input
221
   */
222
  isCharacterKey(keyCode: number): boolean;
223
};
224
```
225

226
**Usage Example:**
227

228
```javascript
229
import KeyCode from 'rc-util/lib/KeyCode';
230

231
function handleKeyDown(e) {
232
  switch (e.keyCode) {
233
    case KeyCode.ENTER:
234
      handleSubmit();
235
      break;
236
    case KeyCode.ESC:
237
      handleCancel();
238
      break;
239
    case KeyCode.TAB:
240
      // Handle tab navigation
241
      break;
242
  }
243
  
244
  // Check if text is being modified
245
  if (KeyCode.isTextModifyingKeyEvent(e)) {
246
    setHasChanges(true);
247
  }
248
  
249
  // Check if character was entered
250
  if (KeyCode.isCharacterKey(e.keyCode)) {
251
    updateCharacterCount();
252
  }
253
}
254
```
255

256
### Children Utilities
257

258
#### mapSelf
259

260
Returns a shallow copy of React children, useful for React element manipulation.
261

262
```javascript { .api }
263
/**
264
 * Return a shallow copy of React children
265
 * @param {ReactNode} children - React children to copy
266
 * @returns {ReactNode[]} Shallow copy of children
267
 */
268
function mapSelf(children: ReactNode): ReactNode[];
269
```
270

271
#### toArray
272

273
Converts React children to a flat array, handling fragments and nested arrays.
274

275
```typescript { .api }
276
/**
277
 * Convert React children to flat array
278
 * @param {React.ReactNode} children - React children to convert
279
 * @returns {React.ReactElement[]} Flat array of React elements
280
 */
281
function toArray(children: React.ReactNode): React.ReactElement[];
282
```
283

284
**Usage Examples:**
285

286
```javascript
287
import mapSelf from 'rc-util/lib/Children/mapSelf';
288
import toArray from 'rc-util/lib/Children/toArray';
289

290
// Shallow copy children
291
function ParentComponent({ children }) {
292
  const childrenCopy = mapSelf(children);
293
  return <div>{childrenCopy}</div>;
294
}
295

296
// Convert to flat array
297
function ListComponent({ children }) {
298
  const childArray = toArray(children);
299
  
300
  return (
301
    <ul>
302
      {childArray.map((child, index) => (
303
        <li key={index}>{child}</li>
304
      ))}
305
    </ul>
306
  );
307
}
308

309
// Handles fragments automatically
310
<ListComponent>
311
  <span>Item 1</span>
312
  <>
313
    <span>Item 2</span>
314
    <span>Item 3</span>
315
  </>
316
  {[<span key="4">Item 4</span>, <span key="5">Item 5</span>]}
317
</ListComponent>
318
```
319

320
### Legacy Utilities
321

322
#### PureRenderMixin
323

324
Legacy pure render mixin for class components (use React.memo for functional components).
325

326
```javascript { .api }
327
/**
328
 * Legacy mixin for pure rendering in class components
329
 */
330
const PureRenderMixin: {
331
  shouldComponentUpdate(nextProps: object, nextState: object): boolean;
332
};
333
```
334

335
#### unsafeLifecyclesPolyfill
336

337
Polyfill for unsafe React lifecycle methods.
338

339
```javascript { .api }
340
/**
341
 * Polyfill for unsafe React lifecycle methods
342
 * @param {React.ComponentType} Component - Component to polyfill
343
 */
344
function unsafeLifecyclesPolyfill(Component: React.ComponentType): void;
345
```
346

347
### Debug Utilities
348

349
#### diff
350

351
Development debugging utility for deep object comparison and difference detection.
352

353
```javascript { .api }
354
/**
355
 * Deep diff two objects and return difference list
356
 * @param {any} obj1 - First object to compare
357
 * @param {any} obj2 - Second object to compare
358
 * @param {number} [depth=10] - Maximum comparison depth
359
 * @param {string[]} [path=[]] - Current path being compared
360
 * @param {Array} [diffList] - Accumulator for differences
361
 * @returns {Array} List of differences with paths and values
362
 */
363
function diff(
364
  obj1: any, 
365
  obj2: any, 
366
  depth?: number, 
367
  path?: string[], 
368
  diffList?: Array
369
): Array;
370
```
371

372
### Test Utilities
373

374
Testing utilities for DOM element spying and mocking in test environments.
375

376
#### spyElementPrototypes
377

378
Spy on multiple element prototype properties for testing.
379

380
```typescript { .api }
381
/**
382
 * Spy on multiple element prototype properties
383
 * @param {ElementClass} elementClass - Element class to spy on
384
 * @param {Record<string, Property>} properties - Properties to spy
385
 * @returns {{ mockRestore(): void }} Object with restore method
386
 */
387
function spyElementPrototypes<T extends ElementClass>(
388
  elementClass: T,
389
  properties: Record<string, Property>
390
): { mockRestore(): void };
391

392
type ElementClass = Function;
393
type Property = PropertyDescriptor | Function;
394
```
395

396
#### spyElementPrototype
397

398
Spy on a single element prototype property for testing.
399

400
```typescript { .api }
401
/**
402
 * Spy on single element prototype property
403
 * @param {ElementClass} Element - Element class to spy on
404
 * @param {string} propName - Property name to spy
405
 * @param {Property} property - Property descriptor or function
406
 * @returns {{ mockRestore(): void }} Object with restore method
407
 */
408
function spyElementPrototype(
409
  Element: ElementClass, 
410
  propName: string, 
411
  property: Property
412
): { mockRestore(): void };
413
```