@rainbow-oh/yee-c 0.7.0 → 0.8.1

package/src/hooks/useFocusManage.ts

@@ -1,20 +1,36 @@
-import { useEffect } from 'react';
-import { popFocus, pushFocus } from '../utils/focusStack';
-import useDelayState from './useDelayState';
-
-export default function useFocusManage(ele: HTMLElement, open: boolean) {
-  const delayOpen = useDelayState(open);
-
+import { useEffect, useRef } from 'react';
+import { type FocusStackEntry, popFocus, pushFocus } from '../utils/focusStack';
+export default function useFocusManage(
+  element: HTMLElement | null,
+  open: boolean,
+) {
+  const entryRef = useRef<FocusStackEntry | null>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+  const openCycleRef = useRef(false);
+  const releaseEntry = () => {
+    if (entryRef.current) {
+      popFocus(entryRef.current);
+      entryRef.current = null;
+    }
+  };
+  const endOpenCycle = () => {
+    releaseEntry();
+    previousFocusRef.current = null;
+    openCycleRef.current = false;
+  };
+  useEffect(() => {
+    if (open && !openCycleRef.current) {
+      openCycleRef.current = true;
+      previousFocusRef.current = document.activeElement as HTMLElement | null;
+    } else if (!open && openCycleRef.current) {
+      endOpenCycle();
+    }
+  }, [open]);
   useEffect(() => {
-    if (!ele) return;
-    if (delayOpen) {
-      pushFocus(ele);
-    } else {
-      popFocus();
+    if (!open || !openCycleRef.current || !element || entryRef.current) {
+      return;
     }
-
-    return () => {
-      popFocus();
-    };
-  }, [ele, delayOpen]);
+    entryRef.current = pushFocus(element, previousFocusRef.current);
+  }, [element, open]);
+  useEffect(() => releaseEntry, []);
 }

package/src/style/color.css

@@ -848,6 +848,7 @@
   --yee-table-thead-stripe-borderbottom-color: var(
     --yee-table-thead-borderbottom-color
   );
+  --yee-table-row-bg-color: var(--yee-color-bg-container);
   --yee-table-odd-row-bg-color: var(--yee-color-bg-container);
   --yee-table-even-row-bg-color: var(--yee-color-bg-head);
   --yee-table-elevated-thead-stripe-borderbottom-color: var(
@@ -870,6 +871,7 @@
   --yee-table-head-filter-active-color: var(--yee-primary-color);
   --yee-table-fixed-left-after-bs-color: var(--yee-box-shadow-color);
   --yee-table-fixed-right-after-bs-color: var(--yee-box-shadow-color);
+  --yee-table-fixed-column-bg-color: inherit;
   --yee-table-filter-list-bg-color: var(--yee-color-bg-elevated);
   --yee-table-tbody-tr-expanded-bg-color: var(--yee-color-bg-container);
   --yee-table-elevated-tbody-tr-expanded-bg-color: var(

package/src/utils/focusStack.ts

@@ -1,22 +1,65 @@
-// focusStack.ts
 type Focusable = HTMLElement | null;
 
-const stack: Focusable[] = [];
+export interface FocusStackEntry {
+  container: HTMLElement;
+  previous: Focusable;
+}
+
+const focusableSelector = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'details',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+const stack: FocusStackEntry[] = [];
 let raf = 0;
 
-const schedule = (el: Focusable) => {
+const schedule = (callback: () => void) => {
   cancelAnimationFrame(raf);
-  raf = requestAnimationFrame(() => el?.focus());
+  raf = requestAnimationFrame(callback);
 };
 
-export const pushFocus = (el: Focusable) => {
-  const prev = document.activeElement as HTMLElement;
-  if (prev && prev !== el) stack.push(prev);
-  schedule(el);
+const focusInitialElement = (entry: FocusStackEntry) => {
+  if (stack[stack.length - 1] !== entry || !entry.container.isConnected) {
+    return;
+  }
+
+  const activeElement = document.activeElement;
+  if (activeElement && entry.container.contains(activeElement)) {
+    return;
+  }
+
+  const firstFocusable =
+    entry.container.querySelector<HTMLElement>(focusableSelector);
+  (firstFocusable ?? entry.container).focus();
 };
 
-export const popFocus = () => {
-  const el = stack.pop();
-  if (!el) return;
-  schedule(el);
+export const pushFocus = (
+  container: HTMLElement,
+  previous: Focusable = document.activeElement as HTMLElement | null,
+): FocusStackEntry => {
+  const entry = { container, previous };
+  stack.push(entry);
+  schedule(() => focusInitialElement(entry));
+  return entry;
+};
+
+export const popFocus = (entry: FocusStackEntry) => {
+  const index = stack.lastIndexOf(entry);
+  if (index === -1) return;
+
+  const isTopEntry = index === stack.length - 1;
+  stack.splice(index, 1);
+
+  if (!isTopEntry) return;
+
+  schedule(() => {
+    if (entry.previous?.isConnected) {
+      entry.previous.focus();
+    }
+  });
 };

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.7.0";
+export const version = "0.8.1";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;