@rc-component/drawer 1.4.1 → 1.4.2

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 (9) hide show
  1. package/es/DrawerPanel.d.ts +1 -0
  2. package/es/DrawerPopup.js +5 -2
  3. package/es/hooks/useFocusable.d.ts +1 -1
  4. package/es/hooks/useFocusable.js +2 -1
  5. package/lib/DrawerPanel.d.ts +1 -0
  6. package/lib/DrawerPopup.js +5 -2
  7. package/lib/hooks/useFocusable.d.ts +1 -1
  8. package/lib/hooks/useFocusable.js +2 -1
  9. package/package.json +3 -3
package/es/DrawerPanel.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface DrawerPanelEvents {
9
9
  onClick?: React.MouseEventHandler<HTMLDivElement>;
10
10
  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
11
11
  onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
12
+ onFocus?: React.FocusEventHandler<HTMLDivElement>;
12
13
  }
13
14
  export type DrawerPanelAccessibility = Pick<React.DialogHTMLAttributes<HTMLDivElement>, keyof React.AriaAttributes>;
14
15
  export interface DrawerPanelProps extends DrawerPanelEvents, DrawerPanelAccessibility {
package/es/DrawerPopup.js CHANGED
@@ -62,7 +62,7 @@ const DrawerPopup = (props, ref) => {
62
62
  React.useImperativeHandle(ref, () => panelRef.current);
63
63
 
64
64
  // ========================= Focusable ==========================
65
- useFocusable(() => panelRef.current, open, autoFocus, focusTrap, mask);
65
+ const ignoreElement = useFocusable(() => panelRef.current, open, autoFocus, focusTrap, mask);
66
66
 
67
67
  // ============================ Push ============================
68
68
  const [pushed, setPushed] = React.useState(false);
@@ -194,7 +194,10 @@ const DrawerPopup = (props, ref) => {
194
194
  onMouseLeave,
195
195
  onClick,
196
196
  onKeyDown,
197
- onKeyUp
197
+ onKeyUp,
198
+ onFocus: e => {
199
+ ignoreElement(e.target);
200
+ }
198
201
  };
199
202
 
200
203
  // =========================== Render ==========================
package/es/hooks/useFocusable.d.ts CHANGED
@@ -1 +1 @@
1
- export default function useFocusable(getContainer: () => HTMLElement, open: boolean, autoFocus?: boolean, focusTrap?: boolean, mask?: boolean): void;
1
+ export default function useFocusable(getContainer: () => HTMLElement, open: boolean, autoFocus?: boolean, focusTrap?: boolean, mask?: boolean): (ele: HTMLElement) => void;
package/es/hooks/useFocusable.js CHANGED
@@ -4,7 +4,7 @@ export default function useFocusable(getContainer, open, autoFocus, focusTrap, m
4
4
  const mergedFocusTrap = focusTrap ?? mask !== false;
5
5
 
6
6
  // Focus lock
7
- useLockFocus(open && mergedFocusTrap, getContainer);
7
+ const [ignoreElement] = useLockFocus(open && mergedFocusTrap, getContainer);
8
8
 
9
9
  // Auto Focus
10
10
  React.useEffect(() => {
@@ -14,4 +14,5 @@ export default function useFocusable(getContainer, open, autoFocus, focusTrap, m
14
14
  });
15
15
  }
16
16
  }, [open]);
17
+ return ignoreElement;
17
18
  }
package/lib/DrawerPanel.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface DrawerPanelEvents {
9
9
  onClick?: React.MouseEventHandler<HTMLDivElement>;
10
10
  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
11
11
  onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
12
+ onFocus?: React.FocusEventHandler<HTMLDivElement>;
12
13
  }
13
14
  export type DrawerPanelAccessibility = Pick<React.DialogHTMLAttributes<HTMLDivElement>, keyof React.AriaAttributes>;
14
15
  export interface DrawerPanelProps extends DrawerPanelEvents, DrawerPanelAccessibility {
package/lib/DrawerPopup.js CHANGED
@@ -71,7 +71,7 @@ const DrawerPopup = (props, ref) => {
71
71
  React.useImperativeHandle(ref, () => panelRef.current);
72
72
 
73
73
  // ========================= Focusable ==========================
74
- (0, _useFocusable.default)(() => panelRef.current, open, autoFocus, focusTrap, mask);
74
+ const ignoreElement = (0, _useFocusable.default)(() => panelRef.current, open, autoFocus, focusTrap, mask);
75
75
 
76
76
  // ============================ Push ============================
77
77
  const [pushed, setPushed] = React.useState(false);
@@ -203,7 +203,10 @@ const DrawerPopup = (props, ref) => {
203
203
  onMouseLeave,
204
204
  onClick,
205
205
  onKeyDown,
206
- onKeyUp
206
+ onKeyUp,
207
+ onFocus: e => {
208
+ ignoreElement(e.target);
209
+ }
207
210
  };
208
211
 
209
212
  // =========================== Render ==========================
package/lib/hooks/useFocusable.d.ts CHANGED
@@ -1 +1 @@
1
- export default function useFocusable(getContainer: () => HTMLElement, open: boolean, autoFocus?: boolean, focusTrap?: boolean, mask?: boolean): void;
1
+ export default function useFocusable(getContainer: () => HTMLElement, open: boolean, autoFocus?: boolean, focusTrap?: boolean, mask?: boolean): (ele: HTMLElement) => void;
package/lib/hooks/useFocusable.js CHANGED
@@ -11,7 +11,7 @@ function useFocusable(getContainer, open, autoFocus, focusTrap, mask) {
11
11
  const mergedFocusTrap = focusTrap ?? mask !== false;
12
12
 
13
13
  // Focus lock
14
- (0, _focus.useLockFocus)(open && mergedFocusTrap, getContainer);
14
+ const [ignoreElement] = (0, _focus.useLockFocus)(open && mergedFocusTrap, getContainer);
15
15
 
16
16
  // Auto Focus
17
17
  _react.default.useEffect(() => {
@@ -21,4 +21,5 @@ function useFocusable(getContainer, open, autoFocus, focusTrap, mask) {
21
21
  });
22
22
  }
23
23
  }, [open]);
24
+ return ignoreElement;
24
25
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rc-component/drawer",
3
- "version": "1.4.1",
3
+ "version": "1.4.2",
4
4
  "description": "drawer component for react",
5
5
  "keywords": [
6
6
  "react",
@@ -45,7 +45,7 @@
45
45
  "dependencies": {
46
46
  "@rc-component/motion": "^1.1.4",
47
47
  "@rc-component/portal": "^2.1.3",
48
- "@rc-component/util": "^1.7.0",
48
+ "@rc-component/util": "^1.9.0",
49
49
  "clsx": "^2.1.1"
50
50
  },
51
51
  "devDependencies": {
@@ -74,7 +74,7 @@
74
74
  "rc-test": "^7.0.9",
75
75
  "react": "^19.0.0",
76
76
  "react-dom": "^19.0.0",
77
- "stylelint": "^16.2.1",
77
+ "stylelint": "^17.1.0",
78
78
  "stylelint-config-standard-less": "^4.0.0",
79
79
  "typescript": "^5.3.3"
80
80
  },