@cube-dev/ui-kit 0.181.0 → 0.183.0

package/dist/utils/react/useBufferedValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBufferedValue.js","names":[],"sources":["../../../src/utils/react/useBufferedValue.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { useLayoutEffect } from './useLayoutEffect';\n\nconst NOTHING_PENDING: unknown[] = [];\n\nexport interface UseBufferedValueOptions<T> {\n  /**\n   * Identity of a value, for values `Object.is` doesn't compare usefully — an array of colour\n   * stops, a settings object. Defaults to the value itself, which is what strings want.\n   */\n  getKey?: (value: T) => unknown;\n  /** Nothing can be typed into a disabled control, so there is nothing to protect. */\n  isDisabled?: boolean;\n  /** Same for a read-only one. */\n  isReadOnly?: boolean;\n  /** Escape hatch: `false` makes the hook inert and passes `value`/`onChange` straight through. */\n  isBuffered?: boolean;\n}\n\nexport interface UseBufferedValueResult<T> {\n  /** Render this instead of `value`. `undefined` passes through, meaning uncontrolled. */\n  value: T | undefined;\n  /** Call this instead of `onChange`. Still emits once per call, in the same tick. */\n  onChange: (next: T) => void;\n  /** Drop the buffer and let `value` win again. The text fields call it on blur. */\n  reset: () => void;\n}\n\n/**\n * Holds a controlled value locally so a parent that echoes the new value back *late* cannot\n * overwrite what the user is doing.\n *\n * **Why any of this is needed.** A controlled `<input>` renders whatever string its parent hands\n * it. If the parent hands back the pre-keystroke string — because its state reaches the component\n * through a store that publishes a render late, or through a debounce, or a deferred update —\n * React writes that stale string into the DOM node, and a native `value` assignment collapses the\n * selection to the end. Typing in the middle of a field throws the caret to the end. The value\n * eventually lands, so it looks like a caret bug rather than a data-flow one.\n *\n * The buffer keeps the typed text on screen until the parent catches up, while still emitting\n * `onChange` once per keystroke — so nothing downstream changes: no debouncing, no commit-on-blur,\n * no swallowed calls.\n *\n * Generic on purpose. The same lateness affects values that aren't strings (a colour scale's array\n * of stops emitted through a chart-spec pipeline), and `getKey` is where those pass the signature\n * function they already have.\n *\n * ```tsx\n * const buffered = useBufferedValue(value, onChange, { isReadOnly, isDisabled });\n *\n * <input value={buffered.value} onChange={buffered.onChange} onBlur={buffered.reset} />\n * ```\n *\n * One case it cannot resolve: an external change that lands *between* an emit and its echo, and\n * happens to equal a value still in flight, is read as our own echo. Telling those apart needs a\n * sequence number from the store rather than value matching.\n */\nexport function useBufferedValue<T>(\n  value: T | undefined,\n  onChange?: (next: T) => void,\n  options: UseBufferedValueOptions<T> = {},\n): UseBufferedValueResult<T> {\n  const { getKey, isDisabled, isReadOnly, isBuffered = true } = options;\n\n  // An `undefined` value means the control is uncontrolled — it already owns its text.\n  const isActive =\n    isBuffered && value !== undefined && !isDisabled && !isReadOnly;\n\n  const keyOf = (next: T | undefined): unknown =>\n    getKey && next != null ? getKey(next) : next;\n  const valueKey = keyOf(value);\n\n  // The only state, and the only thing that can force a render: what the user typed. It is rendered\n  // *while we are ahead of the parent* and ignored otherwise — which is what makes adopting an\n  // external value free, since there is nothing to write.\n  const [draft, setDraft] = useState(value);\n  // Keys we have emitted that the parent hasn't echoed back yet. A queue rather than one slot: the\n  // user can type again before the first echo returns, and each echo has to be recognised as ours\n  // or applying it would swallow everything typed after it.\n  const pendingRef = useRef<unknown[]>(NOTHING_PENDING);\n  // The last value we accepted as the parent's opinion — not the last one we rendered.\n  const seenKeyRef = useRef<unknown>(valueKey);\n  const latestRef = useRef({ value, onChange, keyOf, isActive });\n\n  // These three refs are read during render but written *only* in an event handler or after commit,\n  // never during a render. That is what keeps them honest under concurrent rendering: React may\n  // discard a render (an interrupted pass, a StrictMode double-invoke), and a discarded render runs\n  // no effects, so it cannot leave the bookkeeping describing a pass that never committed.\n  const pending = pendingRef.current;\n  const propMoved = valueKey !== seenKeyRef.current;\n  // Our own echo, a render or more late — possibly an earlier emit a later one superseded.\n  const echoAt = propMoved ? pending.indexOf(valueKey) : -1;\n  // A real change from the parent: undo/redo, a reset, a transformed value, another record.\n  const isExternal = propMoved && echoAt < 0;\n  const isAhead = isActive && !isExternal && pending.length > 0;\n  // Not being ahead is the whole of \"the parent wins\", so an external change needs no state write\n  // and costs no extra render. Being ahead — including when the value is the stale one the parent\n  // held *before* the keystroke — is what stops React writing that string back and collapsing the\n  // selection.\n  const rendered = isAhead ? draft : value;\n\n  useLayoutEffect(() => {\n    latestRef.current = { value, onChange, keyOf, isActive };\n    seenKeyRef.current = valueKey;\n\n    if (!isActive || isExternal) {\n      pendingRef.current = NOTHING_PENDING;\n    } else if (echoAt >= 0) {\n      pendingRef.current = pending.slice(echoAt + 1);\n    }\n  });\n\n  const handleChange = useCallback((next: T) => {\n    const {\n      onChange: latestOnChange,\n      keyOf: latestKeyOf,\n      isActive: latestIsActive,\n    } = latestRef.current;\n\n    if (latestIsActive) {\n      // A ref write in an event handler, which runs after a commit — never mid-render.\n      pendingRef.current = [...pendingRef.current, latestKeyOf(next)];\n      setDraft(next);\n    }\n\n    latestOnChange?.(next);\n  }, []);\n\n  const reset = useCallback(() => {\n    const { value: latestValue } = latestRef.current;\n\n    // Emptying the queue is what hands control back: with nothing in flight we are no longer ahead,\n    // so the parent's value is rendered again. `setDraft` is only here to schedule that render.\n    pendingRef.current = NOTHING_PENDING;\n    setDraft(latestValue);\n  }, []);\n\n  return { value: rendered, onChange: handleChange, reset };\n}\n"],"mappings":";;;;;AAIA,MAAM,kBAA6B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDrC,SAAgB,iBACd,OACA,UACA,UAAsC,EAAE,EACb;CAC3B,MAAM,EAAE,QAAQ,YAAY,YAAY,aAAa,SAAS;CAG9D,MAAM,WACJ,cAAc,UAAU,UAAa,CAAC,cAAc,CAAC;CAEvD,MAAM,SAAS,SACb,UAAU,QAAQ,OAAO,OAAO,KAAK,GAAG;CAC1C,MAAM,WAAW,MAAM,MAAM;CAK7B,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CAIzC,MAAM,aAAa,OAAkB,gBAAgB;CAErD,MAAM,aAAa,OAAgB,SAAS;CAC5C,MAAM,YAAY,OAAO;EAAE;EAAO;EAAU;EAAO;EAAU,CAAC;CAM9D,MAAM,UAAU,WAAW;CAC3B,MAAM,YAAY,aAAa,WAAW;CAE1C,MAAM,SAAS,YAAY,QAAQ,QAAQ,SAAS,GAAG;CAEvD,MAAM,aAAa,aAAa,SAAS;CAMzC,MAAM,WALU,YAAY,CAAC,cAAc,QAAQ,SAAS,IAKjC,QAAQ;AAEnC,yBAAsB;AACpB,YAAU,UAAU;GAAE;GAAO;GAAU;GAAO;GAAU;AACxD,aAAW,UAAU;AAErB,MAAI,CAAC,YAAY,WACf,YAAW,UAAU;WACZ,UAAU,EACnB,YAAW,UAAU,QAAQ,MAAM,SAAS,EAAE;GAEhD;AA2BF,QAAO;EAAE,OAAO;EAAU,UAzBL,aAAa,SAAY;GAC5C,MAAM,EACJ,UAAU,gBACV,OAAO,aACP,UAAU,mBACR,UAAU;AAEd,OAAI,gBAAgB;AAElB,eAAW,UAAU,CAAC,GAAG,WAAW,SAAS,YAAY,KAAK,CAAC;AAC/D,aAAS,KAAK;;AAGhB,oBAAiB,KAAK;KACrB,EAAE,CAAC;EAW4C,OATpC,kBAAkB;GAC9B,MAAM,EAAE,OAAO,gBAAgB,UAAU;AAIzC,cAAW,UAAU;AACrB,YAAS,YAAY;KACpB,EAAE,CAAC;EAEmD"}
+{"version":3,"file":"useBufferedValue.js","names":["useCallback","useRef","useState","useLayoutEffect","NOTHING_PENDING","UseBufferedValueOptions","getKey","value","T","isDisabled","isReadOnly","isBuffered","UseBufferedValueResult","onChange","next","reset","useBufferedValue","options","isActive","undefined","keyOf","valueKey","draft","setDraft","pendingRef","seenKeyRef","latestRef","pending","current","propMoved","echoAt","indexOf","isExternal","isAhead","length","rendered","slice","handleChange","latestOnChange","latestKeyOf","latestIsActive","latestValue"],"sources":["../../../src/utils/react/useBufferedValue.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nimport { useLayoutEffect } from './useLayoutEffect';\n\nconst NOTHING_PENDING: unknown[] = [];\n\nexport interface UseBufferedValueOptions<T> {\n  /**\n   * Identity of a value, for values `Object.is` doesn't compare usefully — an array of colour\n   * stops, a settings object. Defaults to the value itself, which is what strings want.\n   */\n  getKey?: (value: T) => unknown;\n  /** Nothing can be typed into a disabled control, so there is nothing to protect. */\n  isDisabled?: boolean;\n  /** Same for a read-only one. */\n  isReadOnly?: boolean;\n  /** Escape hatch: `false` makes the hook inert and passes `value`/`onChange` straight through. */\n  isBuffered?: boolean;\n}\n\nexport interface UseBufferedValueResult<T> {\n  /** Render this instead of `value`. `undefined` passes through, meaning uncontrolled. */\n  value: T | undefined;\n  /** Call this instead of `onChange`. Still emits once per call, in the same tick. */\n  onChange: (next: T) => void;\n  /** Drop the buffer and let `value` win again. The text fields call it on blur. */\n  reset: () => void;\n}\n\n/**\n * Holds a controlled value locally so a parent that echoes the new value back *late* cannot\n * overwrite what the user is doing.\n *\n * **Why any of this is needed.** A controlled `<input>` renders whatever string its parent hands\n * it. If the parent hands back the pre-keystroke string — because its state reaches the component\n * through a store that publishes a render late, or through a debounce, or a deferred update —\n * React writes that stale string into the DOM node, and a native `value` assignment collapses the\n * selection to the end. Typing in the middle of a field throws the caret to the end. The value\n * eventually lands, so it looks like a caret bug rather than a data-flow one.\n *\n * The buffer keeps the typed text on screen until the parent catches up, while still emitting\n * `onChange` once per keystroke — so nothing downstream changes: no debouncing, no commit-on-blur,\n * no swallowed calls.\n *\n * Generic on purpose. The same lateness affects values that aren't strings (a colour scale's array\n * of stops emitted through a chart-spec pipeline), and `getKey` is where those pass the signature\n * function they already have.\n *\n * ```tsx\n * const buffered = useBufferedValue(value, onChange, { isReadOnly, isDisabled });\n *\n * <input value={buffered.value} onChange={buffered.onChange} onBlur={buffered.reset} />\n * ```\n *\n * One case it cannot resolve: an external change that lands *between* an emit and its echo, and\n * happens to equal a value still in flight, is read as our own echo. Telling those apart needs a\n * sequence number from the store rather than value matching.\n */\nexport function useBufferedValue<T>(\n  value: T | undefined,\n  onChange?: (next: T) => void,\n  options: UseBufferedValueOptions<T> = {},\n): UseBufferedValueResult<T> {\n  const { getKey, isDisabled, isReadOnly, isBuffered = true } = options;\n\n  // An `undefined` value means the control is uncontrolled — it already owns its text.\n  const isActive =\n    isBuffered && value !== undefined && !isDisabled && !isReadOnly;\n\n  const keyOf = (next: T | undefined): unknown =>\n    getKey && next != null ? getKey(next) : next;\n  const valueKey = keyOf(value);\n\n  // The only state, and the only thing that can force a render: what the user typed. It is rendered\n  // *while we are ahead of the parent* and ignored otherwise — which is what makes adopting an\n  // external value free, since there is nothing to write.\n  const [draft, setDraft] = useState(value);\n  // Keys we have emitted that the parent hasn't echoed back yet. A queue rather than one slot: the\n  // user can type again before the first echo returns, and each echo has to be recognised as ours\n  // or applying it would swallow everything typed after it.\n  const pendingRef = useRef<unknown[]>(NOTHING_PENDING);\n  // The last value we accepted as the parent's opinion — not the last one we rendered.\n  const seenKeyRef = useRef<unknown>(valueKey);\n  const latestRef = useRef({ value, onChange, keyOf, isActive });\n\n  // These three refs are read during render but written *only* in an event handler or after commit,\n  // never during a render. That is what keeps them honest under concurrent rendering: React may\n  // discard a render (an interrupted pass, a StrictMode double-invoke), and a discarded render runs\n  // no effects, so it cannot leave the bookkeeping describing a pass that never committed.\n  const pending = pendingRef.current;\n  const propMoved = valueKey !== seenKeyRef.current;\n  // Our own echo, a render or more late — possibly an earlier emit a later one superseded.\n  const echoAt = propMoved ? pending.indexOf(valueKey) : -1;\n  // A real change from the parent: undo/redo, a reset, a transformed value, another record.\n  const isExternal = propMoved && echoAt < 0;\n  const isAhead = isActive && !isExternal && pending.length > 0;\n  // Not being ahead is the whole of \"the parent wins\", so an external change needs no state write\n  // and costs no extra render. Being ahead — including when the value is the stale one the parent\n  // held *before* the keystroke — is what stops React writing that string back and collapsing the\n  // selection.\n  const rendered = isAhead ? draft : value;\n\n  useLayoutEffect(() => {\n    latestRef.current = { value, onChange, keyOf, isActive };\n    seenKeyRef.current = valueKey;\n\n    if (!isActive || isExternal) {\n      pendingRef.current = NOTHING_PENDING;\n    } else if (echoAt >= 0) {\n      pendingRef.current = pending.slice(echoAt + 1);\n    }\n  });\n\n  const handleChange = useCallback((next: T) => {\n    const {\n      onChange: latestOnChange,\n      keyOf: latestKeyOf,\n      isActive: latestIsActive,\n    } = latestRef.current;\n\n    if (latestIsActive) {\n      // A ref write in an event handler, which runs after a commit — never mid-render.\n      pendingRef.current = [...pendingRef.current, latestKeyOf(next)];\n      setDraft(next);\n    }\n\n    latestOnChange?.(next);\n  }, []);\n\n  const reset = useCallback(() => {\n    const { value: latestValue } = latestRef.current;\n\n    // Emptying the queue is what hands control back: with nothing in flight we are no longer ahead,\n    // so the parent's value is rendered again. `setDraft` is only here to schedule that render.\n    pendingRef.current = NOTHING_PENDING;\n    setDraft(latestValue);\n  }, []);\n\n  return { value: rendered, onChange: handleChange, reset };\n}\n"],"mappings":";;;;;AAIA,MAAMI,kBAA6B,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDrC,SAAgBY,iBACdT,OACAM,UACAI,UAAsC,EAAE,EACb;CAC3B,MAAM,EAAEX,QAAQG,YAAYC,YAAYC,aAAa,SAASM;CAG9D,MAAMC,WACJP,cAAcJ,UAAUY,UAAa,CAACV,cAAc,CAACC;CAEvD,MAAMU,SAASN,SACbR,UAAUQ,QAAQ,OAAOR,OAAOQ,KAAK,GAAGA;CAC1C,MAAMO,WAAWD,MAAMb,MAAM;CAK7B,MAAM,CAACe,OAAOC,YAAYrB,SAASK,MAAM;CAIzC,MAAMiB,aAAavB,OAAkBG,gBAAgB;CAErD,MAAMqB,aAAaxB,OAAgBoB,SAAS;CAC5C,MAAMK,YAAYzB,OAAO;EAAEM;EAAOM;EAAUO;EAAOF;EAAU,CAAC;CAM9D,MAAMS,UAAUH,WAAWI;CAC3B,MAAMC,YAAYR,aAAaI,WAAWG;CAE1C,MAAME,SAASD,YAAYF,QAAQI,QAAQV,SAAS,GAAG;CAEvD,MAAMW,aAAaH,aAAaC,SAAS;CAMzC,MAAMK,WALUjB,YAAY,CAACc,cAAcL,QAAQO,SAAS,IAKjCZ,QAAQf;AAEnCJ,yBAAsB;AACpBuB,YAAUE,UAAU;GAAErB;GAAOM;GAAUO;GAAOF;GAAU;AACxDO,aAAWG,UAAUP;AAErB,MAAI,CAACH,YAAYc,WACfR,YAAWI,UAAUxB;WACZ0B,UAAU,EACnBN,YAAWI,UAAUD,QAAQS,MAAMN,SAAS,EAAE;GAEhD;AA2BF,QAAO;EAAEvB,OAAO4B;EAAUtB,UAzBLb,aAAac,WAAY;GAC5C,MAAM,EACJD,UAAUyB,gBACVlB,OAAOmB,aACPrB,UAAUsB,mBACRd,UAAUE;AAEd,OAAIY,gBAAgB;AAElBhB,eAAWI,UAAU,CAAC,GAAGJ,WAAWI,SAASW,YAAYzB,OAAK,CAAC;AAC/DS,aAAST,OAAK;;AAGhBwB,oBAAiBxB,OAAK;KACrB,EAAE,CAAC;EAW4CC,OATpCf,kBAAkB;GAC9B,MAAM,EAAEO,OAAOkC,gBAAgBf,UAAUE;AAIzCJ,cAAWI,UAAUxB;AACrBmB,YAASkB,YAAY;KACpB,EAAE,CAAC;EAEmD"}

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+import { c } from "react-compiler-runtime";
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts
@@ -11,11 +12,25 @@ function mergeRefs(...refs) {
 		});
 	};
 }
-function useCombinedRefs(...refs) {
+function useCombinedRefs(...t0) {
+	const $ = c(3);
+	const refs = t0;
 	const targetRef = useRef(null);
-	useEffect(() => {
-		mergeRefs(...refs)(targetRef.current);
-	}, [refs]);
+	let t1;
+	let t2;
+	if ($[0] !== refs) {
+		t1 = () => {
+			mergeRefs(...refs)(targetRef.current);
+		};
+		t2 = [refs];
+		$[0] = refs;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
 	return targetRef;
 }
 

package/dist/utils/react/useCombinedRefs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCombinedRefs.js","names":[],"sources":["../../../src/utils/react/useCombinedRefs.ts"],"sourcesContent":["import { Ref, RefObject, useEffect, useRef } from 'react';\n\ntype AssignableRef<T> = { current: T | null };\n\nexport function mergeRefs<T>(...refs: Array<Ref<T> | undefined>) {\n  return (value: T | null) => {\n    refs.forEach((ref) => {\n      if (!ref) return;\n\n      if (typeof ref === 'function') {\n        ref(value);\n      } else {\n        (ref as AssignableRef<T>).current = value;\n      }\n    });\n  };\n}\n\nexport function useCombinedRefs<T>(\n  ...refs: Array<Ref<T> | undefined>\n): RefObject<T> {\n  const targetRef = useRef<T>(null) as RefObject<T>;\n\n  useEffect(() => {\n    mergeRefs(...refs)(targetRef.current);\n  }, [refs]);\n\n  return targetRef;\n}\n"],"mappings":";;;;AAIA,SAAgB,UAAa,GAAG,MAAiC;AAC/D,SAAQ,UAAoB;AAC1B,OAAK,SAAS,QAAQ;AACpB,OAAI,CAAC,IAAK;AAEV,OAAI,OAAO,QAAQ,WACjB,KAAI,MAAM;OAEV,CAAC,IAAyB,UAAU;IAEtC;;;AAIN,SAAgB,gBACd,GAAG,MACW;CACd,MAAM,YAAY,OAAU,KAAK;AAEjC,iBAAgB;AACd,YAAU,GAAG,KAAK,CAAC,UAAU,QAAQ;IACpC,CAAC,KAAK,CAAC;AAEV,QAAO"}
+{"version":3,"file":"useCombinedRefs.js","names":["Ref","RefObject","useEffect","useRef","AssignableRef","current","T","mergeRefs","refs","Array","value","forEach","ref","useCombinedRefs","t0","$","_c","targetRef","t1","t2"],"sources":["../../../src/utils/react/useCombinedRefs.ts"],"sourcesContent":["import { Ref, RefObject, useEffect, useRef } from 'react';\n\ntype AssignableRef<T> = { current: T | null };\n\nexport function mergeRefs<T>(...refs: Array<Ref<T> | undefined>) {\n  return (value: T | null) => {\n    refs.forEach((ref) => {\n      if (!ref) return;\n\n      if (typeof ref === 'function') {\n        ref(value);\n      } else {\n        (ref as AssignableRef<T>).current = value;\n      }\n    });\n  };\n}\n\nexport function useCombinedRefs<T>(\n  ...refs: Array<Ref<T> | undefined>\n): RefObject<T> {\n  const targetRef = useRef<T>(null) as RefObject<T>;\n\n  useEffect(() => {\n    mergeRefs(...refs)(targetRef.current);\n  }, [refs]);\n\n  return targetRef;\n}\n"],"mappings":";;;;;AAIA,SAAgBO,UAAa,GAAGC,MAAiC;AAC/D,SAAQE,UAAoB;AAC1BF,OAAKG,SAASC,QAAQ;AACpB,OAAI,CAACA,IAAK;AAEV,OAAI,OAAOA,QAAQ,WACjBA,KAAIF,MAAM;OAEV,CAACE,IAAyBP,UAAUK;IAEtC;;;AAIN,SAAOG,gBAAA,GAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACL,MAAAR,OAAAM;CAEA,MAAAG,YAAkBd,OAAU,KAAK;CAAiB,IAAAe;CAAA,IAAAC;AAAA,KAAAJ,EAAA,OAAAP,MAAA;AAExCU,aAAA;AACRX,aAAS,GAAIC,KAAK,CAACS,UAASZ,QAAS;;AACpCc,OAAA,CAACX,KAAK;AAAAO,IAAA,KAAAP;AAAAO,IAAA,KAAAG;AAAAH,IAAA,KAAAI;QAAA;AAAAD,OAAAH,EAAA;AAAAI,OAAAJ,EAAA;;AAFTb,WAAUgB,IAEPC,GAAO;AAAA,QAEHF"}

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
+import { c } from "react-compiler-runtime";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";
 
@@ -11,22 +12,57 @@ const useControlledFocusVisibleStore = createSharedStore("controlledFocusVisible
 * until the original flag is switched to false.
 */
 function useControlledFocusVisible() {
-	const { isFocusVisible: originalIsFocusVisible } = useFocusVisible({});
-	const [{ isManuallyActivated }, setStore] = useControlledFocusVisibleStore();
-	useEffect(() => {
-		if (!originalIsFocusVisible && isManuallyActivated) setStore({ isManuallyActivated: false });
-	}, [
-		originalIsFocusVisible,
-		isManuallyActivated,
-		setStore
-	]);
-	const activateFocusVisible = () => {
-		setStore({ isManuallyActivated: true });
-	};
-	return {
-		isFocusVisible: originalIsFocusVisible || isManuallyActivated,
-		activateFocusVisible
-	};
+	const $ = c(11);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {};
+		$[0] = t0;
+	} else t0 = $[0];
+	const { isFocusVisible: originalIsFocusVisible } = useFocusVisible(t0);
+	const [t1, setStore] = useControlledFocusVisibleStore();
+	const { isManuallyActivated } = t1;
+	let t2;
+	let t3;
+	if ($[1] !== isManuallyActivated || $[2] !== originalIsFocusVisible || $[3] !== setStore) {
+		t2 = () => {
+			if (!originalIsFocusVisible && isManuallyActivated) setStore({ isManuallyActivated: false });
+		};
+		t3 = [
+			originalIsFocusVisible,
+			isManuallyActivated,
+			setStore
+		];
+		$[1] = isManuallyActivated;
+		$[2] = originalIsFocusVisible;
+		$[3] = setStore;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	useEffect(t2, t3);
+	let t4;
+	if ($[6] !== setStore) {
+		t4 = () => {
+			setStore({ isManuallyActivated: true });
+		};
+		$[6] = setStore;
+		$[7] = t4;
+	} else t4 = $[7];
+	const activateFocusVisible = t4;
+	const t5 = originalIsFocusVisible || isManuallyActivated;
+	let t6;
+	if ($[8] !== activateFocusVisible || $[9] !== t5) {
+		t6 = {
+			isFocusVisible: t5,
+			activateFocusVisible
+		};
+		$[8] = activateFocusVisible;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	return t6;
 }
 
 //#endregion

package/dist/utils/react/useControlledFocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControlledFocusVisible.js","names":[],"sources":["../../../src/utils/react/useControlledFocusVisible.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { useFocusVisible } from 'react-aria';\n\nimport { createSharedStore } from './sharedStore';\n\ninterface ControlledFocusVisibleState {\n  isManuallyActivated: boolean;\n}\n\n// Create a shared store for the controlled focus visible state\nconst useControlledFocusVisibleStore =\n  createSharedStore<ControlledFocusVisibleState>('controlledFocusVisible', {\n    isManuallyActivated: false,\n  });\n\nexport interface UseControlledFocusVisibleResult {\n  isFocusVisible: boolean;\n  activateFocusVisible: () => void;\n}\n\n/**\n * A hook that shares its state using sharedStore and works like useFocusVisible from react-aria,\n * but also returns activateFocusVisible function that manually switches the state to true\n * until the original flag is switched to false.\n */\nexport function useControlledFocusVisible(): UseControlledFocusVisibleResult {\n  // Get the original focus visible state from react-aria\n  const { isFocusVisible: originalIsFocusVisible } = useFocusVisible({});\n\n  // Get the shared store state and setter\n  const [{ isManuallyActivated }, setStore] = useControlledFocusVisibleStore();\n\n  // Reset manual activation when original focus visible becomes false\n  useEffect(() => {\n    if (!originalIsFocusVisible && isManuallyActivated) {\n      setStore({ isManuallyActivated: false });\n    }\n  }, [originalIsFocusVisible, isManuallyActivated, setStore]);\n\n  // Function to manually activate focus visible state\n  const activateFocusVisible = () => {\n    setStore({ isManuallyActivated: true });\n  };\n\n  // Return combined state: true if either original is true OR manually activated\n  return {\n    isFocusVisible: originalIsFocusVisible || isManuallyActivated,\n    activateFocusVisible,\n  };\n}\n"],"mappings":";;;;;;AAUA,MAAM,iCACJ,kBAA+C,0BAA0B,EACvE,qBAAqB,OACtB,CAAC;;;;;;AAYJ,SAAgB,4BAA6D;CAE3E,MAAM,EAAE,gBAAgB,2BAA2B,gBAAgB,EAAE,CAAC;CAGtE,MAAM,CAAC,EAAE,uBAAuB,YAAY,gCAAgC;AAG5E,iBAAgB;AACd,MAAI,CAAC,0BAA0B,oBAC7B,UAAS,EAAE,qBAAqB,OAAO,CAAC;IAEzC;EAAC;EAAwB;EAAqB;EAAS,CAAC;CAG3D,MAAM,6BAA6B;AACjC,WAAS,EAAE,qBAAqB,MAAM,CAAC;;AAIzC,QAAO;EACL,gBAAgB,0BAA0B;EAC1C;EACD"}
+{"version":3,"file":"useControlledFocusVisible.js","names":["useEffect","useFocusVisible","createSharedStore","ControlledFocusVisibleState","isManuallyActivated","useControlledFocusVisibleStore","UseControlledFocusVisibleResult","isFocusVisible","activateFocusVisible","useControlledFocusVisible","$","_c","t0","Symbol","for","originalIsFocusVisible","t1","setStore","t2","t3","t4","t5","t6"],"sources":["../../../src/utils/react/useControlledFocusVisible.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { useFocusVisible } from 'react-aria';\n\nimport { createSharedStore } from './sharedStore';\n\ninterface ControlledFocusVisibleState {\n  isManuallyActivated: boolean;\n}\n\n// Create a shared store for the controlled focus visible state\nconst useControlledFocusVisibleStore =\n  createSharedStore<ControlledFocusVisibleState>('controlledFocusVisible', {\n    isManuallyActivated: false,\n  });\n\nexport interface UseControlledFocusVisibleResult {\n  isFocusVisible: boolean;\n  activateFocusVisible: () => void;\n}\n\n/**\n * A hook that shares its state using sharedStore and works like useFocusVisible from react-aria,\n * but also returns activateFocusVisible function that manually switches the state to true\n * until the original flag is switched to false.\n */\nexport function useControlledFocusVisible(): UseControlledFocusVisibleResult {\n  // Get the original focus visible state from react-aria\n  const { isFocusVisible: originalIsFocusVisible } = useFocusVisible({});\n\n  // Get the shared store state and setter\n  const [{ isManuallyActivated }, setStore] = useControlledFocusVisibleStore();\n\n  // Reset manual activation when original focus visible becomes false\n  useEffect(() => {\n    if (!originalIsFocusVisible && isManuallyActivated) {\n      setStore({ isManuallyActivated: false });\n    }\n  }, [originalIsFocusVisible, isManuallyActivated, setStore]);\n\n  // Function to manually activate focus visible state\n  const activateFocusVisible = () => {\n    setStore({ isManuallyActivated: true });\n  };\n\n  // Return combined state: true if either original is true OR manually activated\n  return {\n    isFocusVisible: originalIsFocusVisible || isManuallyActivated,\n    activateFocusVisible,\n  };\n}\n"],"mappings":";;;;;;;AAUA,MAAMK,iCACJH,kBAA+C,0BAA0B,EACvEE,qBAAqB,OACtB,CAAC;;;;;;AAYJ,SAAOK,4BAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAG,OAAAC,IAAA,4BAAA,EAAA;AAE8DF,OAAA,EAAE;AAAAF,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAArE,MAAA,EAAAH,gBAAAQ,2BAAmDd,gBAAgBW,GAAG;CAGtE,MAAA,CAAAI,IAAAC,YAA4CZ,gCAAgC;CAArE,MAAA,EAAAD,wBAAAY;CAAuB,IAAAE;CAAA,IAAAC;AAAA,KAAAT,EAAA,OAAAN,uBAAAM,EAAA,OAAAK,0BAAAL,EAAA,OAAAO,UAAA;AAGpBC,aAAA;AACR,OAAI,CAACH,0BAADX,oBACFa,UAAS,EAAAb,qBAAuB,OAAO,CAAC;;AAEzCe,OAAA;GAACJ;GAAwBX;GAAqBa;GAAS;AAAAP,IAAA,KAAAN;AAAAM,IAAA,KAAAK;AAAAL,IAAA,KAAAO;AAAAP,IAAA,KAAAQ;AAAAR,IAAA,KAAAS;QAAA;AAAAD,OAAAR,EAAA;AAAAS,OAAAT,EAAA;;AAJ1DV,WAAUkB,IAIPC,GAAwD;CAAA,IAAAC;AAAA,KAAAV,EAAA,OAAAO,UAAA;AAG9BG,aAAA;AAC3BH,YAAS,EAAAb,qBAAuB,MAAM,CAAC;;AACxCM,IAAA,KAAAO;AAAAP,IAAA,KAAAU;OAAAA,MAAAV,EAAA;CAFD,MAAAF,uBAA6BY;CAMX,MAAAC,KAAAN,0BAAAX;CAA6C,IAAAkB;AAAA,KAAAZ,EAAA,OAAAF,wBAAAE,EAAA,OAAAW,IAAA;AADxDC,OAAA;GAAAf,gBACWc;GAA6Cb;GAE9D;AAAAE,IAAA,KAAAF;AAAAE,IAAA,KAAAW;AAAAX,IAAA,MAAAY;OAAAA,MAAAZ,EAAA;AAAA,QAHMY"}

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+import { c } from "react-compiler-runtime";
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts
@@ -27,20 +28,20 @@ function EventBusProvider({ children }) {
 			if (listeners.current[event].length === 0) delete listeners.current[event];
 		}
 	}, []);
-	const emitSync = useCallback((event, data) => {
-		const eventListeners = listeners.current[event];
-		if (eventListeners) eventListeners.forEach((listener) => listener(data));
+	const emitSync = useCallback((event_0, data) => {
+		const eventListeners_0 = listeners.current[event_0];
+		if (eventListeners_0) eventListeners_0.forEach((listener_0) => listener_0(data));
 	}, []);
-	const emit = useCallback((event, data) => {
+	const emit = useCallback((event_1, data_0) => {
 		setTimeout(() => {
-			emitSync(event, data);
+			emitSync(event_1, data_0);
 		}, 0);
 	}, [emitSync]);
-	const on = useCallback((event, listener) => {
-		if (!listeners.current[event]) listeners.current[event] = [];
-		listeners.current[event].push(listener);
+	const on = useCallback((event_2, listener_1) => {
+		if (!listeners.current[event_2]) listeners.current[event_2] = [];
+		listeners.current[event_2].push(listener_1);
 		return () => {
-			off(event, listener);
+			off(event_2, listener_1);
 		};
 	}, [off]);
 	const localContextValue = useMemo(() => ({
@@ -118,15 +119,39 @@ function useEventBus() {
 * }
 * ```
 */
-function useEventListener(event, listener, deps = []) {
+function useEventListener(event, listener, t0) {
+	const $ = c(10);
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0 === void 0 ? [] : t0;
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const deps = t1;
 	const { on } = useEventBus();
-	useEffect(() => {
-		return on(event, listener);
-	}, [
-		event,
-		on,
-		...deps
-	]);
+	let t2;
+	if ($[2] !== event || $[3] !== listener || $[4] !== on) {
+		t2 = () => {
+			return on(event, listener);
+		};
+		$[2] = event;
+		$[3] = listener;
+		$[4] = on;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== deps || $[7] !== event || $[8] !== on) {
+		t3 = [
+			event,
+			on,
+			...deps
+		];
+		$[6] = deps;
+		$[7] = event;
+		$[8] = on;
+		$[9] = t3;
+	} else t3 = $[9];
+	useEffect(t2, t3);
 }
 
 //#endregion

package/dist/utils/react/useEventBus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEventBus.js","names":[],"sources":["../../../src/utils/react/useEventBus.ts"],"sourcesContent":["import React, {\n  createContext,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nexport type EventBusListener<T = any> = (data: T) => void;\n\nexport interface EventBusContextValue {\n  emit: <T = any>(event: string, data?: T) => void;\n  emitSync: <T = any>(event: string, data?: T) => void;\n  on: <T = any>(event: string, listener: EventBusListener<T>) => () => void;\n  off: <T = any>(event: string, listener: EventBusListener<T>) => void;\n}\n\nexport const EventBusContext = createContext<EventBusContextValue | null>(null);\n\nexport interface EventBusProviderProps {\n  children: ReactNode;\n}\n\n/**\n * EventBusProvider provides a global event system for the application.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <EventBusProvider>\n *       <YourComponents />\n *     </EventBusProvider>\n *   );\n * }\n * ```\n */\nexport function EventBusProvider({ children }: EventBusProviderProps) {\n  // If we're already inside a parent EventBusProvider (e.g. the global Root\n  // one), DO NOT create a fresh bus — that would isolate listeners and\n  // emitters across the boundary. This matters because overlays (Popover,\n  // Modal, Tray) re-wrap their content with our `Provider` from\n  // `provider.tsx`, which transparently nests an EventBusProvider. Cross-\n  // overlay events such as `popover:dismiss-ancestor` (a Button inside a\n  // popover footer dismissing the popover host) only work when both sides\n  // share the same bus.\n  const parentBus = useContext(EventBusContext);\n\n  const listeners = useRef<Record<string, EventBusListener[]>>({});\n\n  const off = useCallback(\n    <T = any>(event: string, listener: EventBusListener<T>) => {\n      const eventListeners = listeners.current[event];\n      if (eventListeners) {\n        listeners.current[event] = eventListeners.filter((l) => l !== listener);\n\n        // Clean up empty event arrays\n        if (listeners.current[event].length === 0) {\n          delete listeners.current[event];\n        }\n      }\n    },\n    [],\n  );\n\n  const emitSync = useCallback(<T = any>(event: string, data?: T) => {\n    const eventListeners = listeners.current[event];\n    if (eventListeners) {\n      eventListeners.forEach((listener) => listener(data));\n    }\n  }, []);\n\n  const emit = useCallback(\n    <T = any>(event: string, data?: T) => {\n      setTimeout(() => {\n        emitSync(event, data);\n      }, 0);\n    },\n    [emitSync],\n  );\n\n  const on = useCallback(\n    <T = any>(event: string, listener: EventBusListener<T>) => {\n      if (!listeners.current[event]) {\n        listeners.current[event] = [];\n      }\n      listeners.current[event].push(listener);\n\n      // Return cleanup function\n      return () => {\n        off(event, listener);\n      };\n    },\n    [off],\n  );\n\n  // Always compute the local contextValue so hook order stays stable, then\n  // pick parent OR local. `useMemo` keeps the local value referentially\n  // stable across renders — every consumer of `EventBusContext` (notably\n  // `useDismissParentPopover` inside every `Button` / `ItemButton`) would\n  // otherwise re-render on every render of this provider.\n  const localContextValue = useMemo<EventBusContextValue>(\n    () => ({ emit, emitSync, on, off }),\n    [emit, emitSync, on, off],\n  );\n\n  const contextValue = parentBus ?? localContextValue;\n\n  return React.createElement(\n    EventBusContext.Provider,\n    { value: contextValue },\n    children,\n  );\n}\n\n/**\n * Hook to access the event bus functionality.\n * Must be used within an EventBusProvider.\n *\n * @example\n * ```tsx\n * function Component() {\n *   const { emit, emitSync, on } = useEventBus();\n *\n *   const handleClick = () => {\n *     emit('user-action', { type: 'click', target: 'button' });\n *   };\n *\n *   const handleSyncAction = () => {\n *     emitSync('sync-action', { immediate: true });\n *   };\n *\n *   useEffect(() => {\n *     const unsubscribe = on('data-updated', (data) => {\n *       console.log('Data updated:', data);\n *     });\n *\n *     return unsubscribe;\n *   }, [on]);\n *\n *   return (\n *     <div>\n *       <button onClick={handleClick}>Async Event</button>\n *       <button onClick={handleSyncAction}>Sync Event</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useEventBus(): EventBusContextValue {\n  const context = useContext(EventBusContext);\n\n  if (!context) {\n    throw new Error('useEventBus must be used within an EventBusProvider');\n  }\n\n  return context;\n}\n\n/**\n * Convenience hook for subscribing to events with automatic cleanup.\n * The listener will be automatically unsubscribed when the component unmounts\n * or when the dependencies change.\n *\n * @param event - The event name to listen for\n * @param listener - The callback function to execute when the event is emitted\n * @param deps - Dependency array for the effect (similar to useEffect)\n *\n * @example\n * ```tsx\n * function NotificationComponent() {\n *   const [message, setMessage] = useState('');\n *\n *   useEventListener('notification', (data) => {\n *     setMessage(data.message);\n *   }, []);\n *\n *   return <div>{message}</div>;\n * }\n * ```\n */\nexport function useEventListener<T = any>(\n  event: string,\n  listener: EventBusListener<T>,\n  deps: React.DependencyList = [],\n) {\n  const { on } = useEventBus();\n\n  useEffect(() => {\n    const unsubscribe = on(event, listener);\n    return unsubscribe;\n  }, [event, on, ...deps]);\n}\n"],"mappings":";;;;AAmBA,MAAa,kBAAkB,cAA2C,KAAK;;;;;;;;;;;;;;;AAoB/E,SAAgB,iBAAiB,EAAE,YAAmC;CASpE,MAAM,YAAY,WAAW,gBAAgB;CAE7C,MAAM,YAAY,OAA2C,EAAE,CAAC;CAEhE,MAAM,MAAM,aACA,OAAe,aAAkC;EACzD,MAAM,iBAAiB,UAAU,QAAQ;AACzC,MAAI,gBAAgB;AAClB,aAAU,QAAQ,SAAS,eAAe,QAAQ,MAAM,MAAM,SAAS;AAGvE,OAAI,UAAU,QAAQ,OAAO,WAAW,EACtC,QAAO,UAAU,QAAQ;;IAI/B,EAAE,CACH;CAED,MAAM,WAAW,aAAsB,OAAe,SAAa;EACjE,MAAM,iBAAiB,UAAU,QAAQ;AACzC,MAAI,eACF,gBAAe,SAAS,aAAa,SAAS,KAAK,CAAC;IAErD,EAAE,CAAC;CAEN,MAAM,OAAO,aACD,OAAe,SAAa;AACpC,mBAAiB;AACf,YAAS,OAAO,KAAK;KACpB,EAAE;IAEP,CAAC,SAAS,CACX;CAED,MAAM,KAAK,aACC,OAAe,aAAkC;AACzD,MAAI,CAAC,UAAU,QAAQ,OACrB,WAAU,QAAQ,SAAS,EAAE;AAE/B,YAAU,QAAQ,OAAO,KAAK,SAAS;AAGvC,eAAa;AACX,OAAI,OAAO,SAAS;;IAGxB,CAAC,IAAI,CACN;CAOD,MAAM,oBAAoB,eACjB;EAAE;EAAM;EAAU;EAAI;EAAK,GAClC;EAAC;EAAM;EAAU;EAAI;EAAI,CAC1B;CAED,MAAM,eAAe,aAAa;AAElC,QAAO,MAAM,cACX,gBAAgB,UAChB,EAAE,OAAO,cAAc,EACvB,SACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCH,SAAgB,cAAoC;CAClD,MAAM,UAAU,WAAW,gBAAgB;AAE3C,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,sDAAsD;AAGxE,QAAO;;;;;;;;;;;;;;;;;;;;;;;;AAyBT,SAAgB,iBACd,OACA,UACA,OAA6B,EAAE,EAC/B;CACA,MAAM,EAAE,OAAO,aAAa;AAE5B,iBAAgB;AAEd,SADoB,GAAG,OAAO,SAAS;IAEtC;EAAC;EAAO;EAAI,GAAG;EAAK,CAAC"}
+{"version":3,"file":"useEventBus.js","names":["React","createContext","ReactNode","useCallback","useContext","useEffect","useMemo","useRef","EventBusListener","data","T","EventBusContextValue","emit","event","emitSync","on","listener","off","EventBusContext","EventBusProviderProps","children","EventBusProvider","parentBus","listeners","Record","eventListeners","current","filter","l","length","forEach","setTimeout","push","localContextValue","contextValue","createElement","Provider","value","useEventBus","context","Error","useEventListener","t0","$","_c","t1","undefined","deps","t2","unsubscribe","t3"],"sources":["../../../src/utils/react/useEventBus.ts"],"sourcesContent":["import React, {\n  createContext,\n  ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nexport type EventBusListener<T = any> = (data: T) => void;\n\nexport interface EventBusContextValue {\n  emit: <T = any>(event: string, data?: T) => void;\n  emitSync: <T = any>(event: string, data?: T) => void;\n  on: <T = any>(event: string, listener: EventBusListener<T>) => () => void;\n  off: <T = any>(event: string, listener: EventBusListener<T>) => void;\n}\n\nexport const EventBusContext = createContext<EventBusContextValue | null>(null);\n\nexport interface EventBusProviderProps {\n  children: ReactNode;\n}\n\n/**\n * EventBusProvider provides a global event system for the application.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <EventBusProvider>\n *       <YourComponents />\n *     </EventBusProvider>\n *   );\n * }\n * ```\n */\nexport function EventBusProvider({ children }: EventBusProviderProps) {\n  // If we're already inside a parent EventBusProvider (e.g. the global Root\n  // one), DO NOT create a fresh bus — that would isolate listeners and\n  // emitters across the boundary. This matters because overlays (Popover,\n  // Modal, Tray) re-wrap their content with our `Provider` from\n  // `provider.tsx`, which transparently nests an EventBusProvider. Cross-\n  // overlay events such as `popover:dismiss-ancestor` (a Button inside a\n  // popover footer dismissing the popover host) only work when both sides\n  // share the same bus.\n  const parentBus = useContext(EventBusContext);\n\n  const listeners = useRef<Record<string, EventBusListener[]>>({});\n\n  const off = useCallback(\n    <T = any>(event: string, listener: EventBusListener<T>) => {\n      const eventListeners = listeners.current[event];\n      if (eventListeners) {\n        listeners.current[event] = eventListeners.filter((l) => l !== listener);\n\n        // Clean up empty event arrays\n        if (listeners.current[event].length === 0) {\n          delete listeners.current[event];\n        }\n      }\n    },\n    [],\n  );\n\n  const emitSync = useCallback(<T = any>(event: string, data?: T) => {\n    const eventListeners = listeners.current[event];\n    if (eventListeners) {\n      eventListeners.forEach((listener) => listener(data));\n    }\n  }, []);\n\n  const emit = useCallback(\n    <T = any>(event: string, data?: T) => {\n      setTimeout(() => {\n        emitSync(event, data);\n      }, 0);\n    },\n    [emitSync],\n  );\n\n  const on = useCallback(\n    <T = any>(event: string, listener: EventBusListener<T>) => {\n      if (!listeners.current[event]) {\n        listeners.current[event] = [];\n      }\n      listeners.current[event].push(listener);\n\n      // Return cleanup function\n      return () => {\n        off(event, listener);\n      };\n    },\n    [off],\n  );\n\n  // Always compute the local contextValue so hook order stays stable, then\n  // pick parent OR local. `useMemo` keeps the local value referentially\n  // stable across renders — every consumer of `EventBusContext` (notably\n  // `useDismissParentPopover` inside every `Button` / `ItemButton`) would\n  // otherwise re-render on every render of this provider.\n  const localContextValue = useMemo<EventBusContextValue>(\n    () => ({ emit, emitSync, on, off }),\n    [emit, emitSync, on, off],\n  );\n\n  const contextValue = parentBus ?? localContextValue;\n\n  return React.createElement(\n    EventBusContext.Provider,\n    { value: contextValue },\n    children,\n  );\n}\n\n/**\n * Hook to access the event bus functionality.\n * Must be used within an EventBusProvider.\n *\n * @example\n * ```tsx\n * function Component() {\n *   const { emit, emitSync, on } = useEventBus();\n *\n *   const handleClick = () => {\n *     emit('user-action', { type: 'click', target: 'button' });\n *   };\n *\n *   const handleSyncAction = () => {\n *     emitSync('sync-action', { immediate: true });\n *   };\n *\n *   useEffect(() => {\n *     const unsubscribe = on('data-updated', (data) => {\n *       console.log('Data updated:', data);\n *     });\n *\n *     return unsubscribe;\n *   }, [on]);\n *\n *   return (\n *     <div>\n *       <button onClick={handleClick}>Async Event</button>\n *       <button onClick={handleSyncAction}>Sync Event</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useEventBus(): EventBusContextValue {\n  const context = useContext(EventBusContext);\n\n  if (!context) {\n    throw new Error('useEventBus must be used within an EventBusProvider');\n  }\n\n  return context;\n}\n\n/**\n * Convenience hook for subscribing to events with automatic cleanup.\n * The listener will be automatically unsubscribed when the component unmounts\n * or when the dependencies change.\n *\n * @param event - The event name to listen for\n * @param listener - The callback function to execute when the event is emitted\n * @param deps - Dependency array for the effect (similar to useEffect)\n *\n * @example\n * ```tsx\n * function NotificationComponent() {\n *   const [message, setMessage] = useState('');\n *\n *   useEventListener('notification', (data) => {\n *     setMessage(data.message);\n *   }, []);\n *\n *   return <div>{message}</div>;\n * }\n * ```\n */\nexport function useEventListener<T = any>(\n  event: string,\n  listener: EventBusListener<T>,\n  deps: React.DependencyList = [],\n) {\n  const { on } = useEventBus();\n\n  useEffect(() => {\n    const unsubscribe = on(event, listener);\n    return unsubscribe;\n  }, [event, on, ...deps]);\n}\n"],"mappings":";;;;;AAmBA,MAAakB,kBAAkBjB,cAA2C,KAAK;;;;;;;;;;;;;;;AAoB/E,SAAgBoB,iBAAiB,EAAED,YAAmC;CASpE,MAAME,YAAYlB,WAAWc,gBAAgB;CAE7C,MAAMK,YAAYhB,OAA2C,EAAE,CAAC;CAEhE,MAAMU,MAAMd,aACAU,OAAeG,aAAkC;EACzD,MAAMS,iBAAiBF,UAAUG,QAAQb;AACzC,MAAIY,gBAAgB;AAClBF,aAAUG,QAAQb,SAASY,eAAeE,QAAQC,MAAMA,MAAMZ,SAAS;AAGvE,OAAIO,UAAUG,QAAQb,OAAOgB,WAAW,EACtC,QAAON,UAAUG,QAAQb;;IAI/B,EACF,CAAC;CAED,MAAMC,WAAWX,aAAsBU,SAAeJ,SAAa;EACjE,MAAMgB,mBAAiBF,UAAUG,QAAQb;AACzC,MAAIY,iBACFA,kBAAeK,SAASd,eAAaA,WAASP,KAAK,CAAC;IAErD,EAAE,CAAC;CAEN,MAAMG,OAAOT,aACDU,SAAeJ,WAAa;AACpCsB,mBAAiB;AACfjB,YAASD,SAAOJ,OAAK;KACpB,EAAE;IAEP,CAACK,SACH,CAAC;CAED,MAAMC,KAAKZ,aACCU,SAAeG,eAAkC;AACzD,MAAI,CAACO,UAAUG,QAAQb,SACrBU,WAAUG,QAAQb,WAAS,EAAE;AAE/BU,YAAUG,QAAQb,SAAOmB,KAAKhB,WAAS;AAGvC,eAAa;AACXC,OAAIJ,SAAOG,WAAS;;IAGxB,CAACC,IACH,CAAC;CAOD,MAAMgB,oBAAoB3B,eACjB;EAAEM;EAAME;EAAUC;EAAIE;EAAK,GAClC;EAACL;EAAME;EAAUC;EAAIE;EACvB,CAAC;CAED,MAAMiB,eAAeZ,aAAaW;AAElC,QAAOjC,MAAMmC,cACXjB,gBAAgBkB,UAChB,EAAEC,OAAOH,cAAc,EACvBd,SACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCH,SAAOkB,cAAA;CACL,MAAAC,UAAgBnC,WAAWc,gBAAgB;AAE3C,KAAI,CAACqB,QACH,OAAM,IAAIC,MAAM,sDAAsD;AACvE,QAEMD;;;;;;;;;;;;;;;;;;;;;;;;AAyBT,SAAOE,iBAAA5B,OAAAG,UAAA0B,IAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAA,IAAAC;AAAA,KAAAF,EAAA,OAAAD,IAAA;AAGLG,OAAAH,OAAAI,SAAA,EAA+B,GAA/BJ;AAA+BC,IAAA,KAAAD;AAAAC,IAAA,KAAAE;OAAAA,MAAAF,EAAA;CAA/B,MAAAI,OAAAF;CAEA,MAAA,EAAA9B,OAAeuB,aAAa;CAAC,IAAAU;AAAA,KAAAL,EAAA,OAAA9B,SAAA8B,EAAA,OAAA3B,YAAA2B,EAAA,OAAA5B,IAAA;AAEnBiC,aAAA;AACgC,UAApBjC,GAAGF,OAAOG,SAAS;;AAExC2B,IAAA,KAAA9B;AAAA8B,IAAA,KAAA3B;AAAA2B,IAAA,KAAA5B;AAAA4B,IAAA,KAAAK;OAAAA,MAAAL,EAAA;CAAA,IAAAO;AAAA,KAAAP,EAAA,OAAAI,QAAAJ,EAAA,OAAA9B,SAAA8B,EAAA,OAAA5B,IAAA;AAAEmC,OAAA;GAACrC;GAAOE;GAAE,GAAKgC;GAAK;AAAAJ,IAAA,KAAAI;AAAAJ,IAAA,KAAA9B;AAAA8B,IAAA,KAAA5B;AAAA4B,IAAA,KAAAO;OAAAA,MAAAP,EAAA;AAHvBtC,WAAU2C,IAGPE,GAAqB"}

package/dist/utils/react/useId.js

@@ -1,5 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
+import { c } from "react-compiler-runtime";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";
 

package/dist/utils/react/useId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useId.js","names":["useId"],"sources":["../../../src/utils/react/useId.tsx"],"sourcesContent":["import { useSSRSafeId } from '@react-aria/ssr';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useLayoutEffect } from './useLayoutEffect';\n\nlet idsUpdaterMap = new Map();\n\n/**\n * If a default is not provided, generate an id.\n * @param defaultId - Default component id.\n */\nexport function useId(defaultId?) {\n  let isRendering = useRef(true);\n\n  isRendering.current = true;\n\n  let [value, setValue] = useState(defaultId);\n  let nextId = useRef(null);\n\n  // don't memo this, we want it new each render so that the Effects always run\n\n  let updateValue = (val) => {\n    if (!isRendering.current) {\n      setValue(val);\n    } else {\n      nextId.current = val;\n    }\n  };\n\n  useLayoutEffect(() => {\n    isRendering.current = false;\n  });\n\n  useEffect(() => {\n    let newId = nextId.current;\n    if (newId) {\n      setValue(newId);\n      nextId.current = null;\n    }\n  }, [setValue, updateValue]);\n\n  let res = useSSRSafeId(value);\n  idsUpdaterMap.set(res, updateValue);\n  return res;\n}\n\n/**\n * Merges two ids.\n * Different ids will trigger a side-effect and re-render components hooked up with `useId`.\n */\nexport function mergeIds(idA, idB) {\n  if (idA === idB) {\n    return idA;\n  }\n\n  let setIdA = idsUpdaterMap.get(idA);\n  if (setIdA) {\n    setIdA(idB);\n    return idB;\n  }\n\n  let setIdB = idsUpdaterMap.get(idB);\n  if (setIdB) {\n    setIdB(idA);\n    return idA;\n  }\n\n  return idB;\n}\n\n/**\n * Used to generate an id, and after render, check if that id is rendered so we know\n * if we can use it in places such as labelledby.\n */\nexport function useSlotId() {\n  let [id, setId] = useState<string | null>(useId());\n  useLayoutEffect(() => {\n    if (id) {\n      let setCurr = idsUpdaterMap.get(id);\n      if (setCurr && !document.getElementById(id)) {\n        setId(null);\n      }\n    }\n  }, [id]);\n\n  return id;\n}\n"],"mappings":";;;;;;AAKA,IAAI,gCAAgB,IAAI,KAAK;;;;;AAM7B,SAAgBA,QAAM,WAAY;CAChC,IAAI,cAAc,OAAO,KAAK;AAE9B,aAAY,UAAU;CAEtB,IAAI,CAAC,OAAO,YAAY,SAAS,UAAU;CAC3C,IAAI,SAAS,OAAO,KAAK;CAIzB,IAAI,eAAe,QAAQ;AACzB,MAAI,CAAC,YAAY,QACf,UAAS,IAAI;MAEb,QAAO,UAAU;;AAIrB,yBAAsB;AACpB,cAAY,UAAU;GACtB;AAEF,iBAAgB;EACd,IAAI,QAAQ,OAAO;AACnB,MAAI,OAAO;AACT,YAAS,MAAM;AACf,UAAO,UAAU;;IAElB,CAAC,UAAU,YAAY,CAAC;CAE3B,IAAI,MAAM,aAAa,MAAM;AAC7B,eAAc,IAAI,KAAK,YAAY;AACnC,QAAO;;;;;;AAOT,SAAgB,SAAS,KAAK,KAAK;AACjC,KAAI,QAAQ,IACV,QAAO;CAGT,IAAI,SAAS,cAAc,IAAI,IAAI;AACnC,KAAI,QAAQ;AACV,SAAO,IAAI;AACX,SAAO;;CAGT,IAAI,SAAS,cAAc,IAAI,IAAI;AACnC,KAAI,QAAQ;AACV,SAAO,IAAI;AACX,SAAO;;AAGT,QAAO"}
+{"version":3,"file":"useId.js","names":["useSSRSafeId","useEffect","useRef","useState","useLayoutEffect","idsUpdaterMap","Map","useId","defaultId","isRendering","current","value","setValue","nextId","updateValue","val","newId","res","set","mergeIds","idA","idB","setIdA","get","setIdB","useSlotId","$","_c","id","setId","t0","t1","setCurr","document","getElementById"],"sources":["../../../src/utils/react/useId.tsx"],"sourcesContent":["import { useSSRSafeId } from '@react-aria/ssr';\nimport { useEffect, useRef, useState } from 'react';\n\nimport { useLayoutEffect } from './useLayoutEffect';\n\nlet idsUpdaterMap = new Map();\n\n/**\n * If a default is not provided, generate an id.\n * @param defaultId - Default component id.\n */\nexport function useId(defaultId?) {\n  let isRendering = useRef(true);\n\n  isRendering.current = true;\n\n  let [value, setValue] = useState(defaultId);\n  let nextId = useRef(null);\n\n  // don't memo this, we want it new each render so that the Effects always run\n\n  let updateValue = (val) => {\n    if (!isRendering.current) {\n      setValue(val);\n    } else {\n      nextId.current = val;\n    }\n  };\n\n  useLayoutEffect(() => {\n    isRendering.current = false;\n  });\n\n  useEffect(() => {\n    let newId = nextId.current;\n    if (newId) {\n      setValue(newId);\n      nextId.current = null;\n    }\n  }, [setValue, updateValue]);\n\n  let res = useSSRSafeId(value);\n  idsUpdaterMap.set(res, updateValue);\n  return res;\n}\n\n/**\n * Merges two ids.\n * Different ids will trigger a side-effect and re-render components hooked up with `useId`.\n */\nexport function mergeIds(idA, idB) {\n  if (idA === idB) {\n    return idA;\n  }\n\n  let setIdA = idsUpdaterMap.get(idA);\n  if (setIdA) {\n    setIdA(idB);\n    return idB;\n  }\n\n  let setIdB = idsUpdaterMap.get(idB);\n  if (setIdB) {\n    setIdB(idA);\n    return idA;\n  }\n\n  return idB;\n}\n\n/**\n * Used to generate an id, and after render, check if that id is rendered so we know\n * if we can use it in places such as labelledby.\n */\nexport function useSlotId() {\n  let [id, setId] = useState<string | null>(useId());\n  useLayoutEffect(() => {\n    if (id) {\n      let setCurr = idsUpdaterMap.get(id);\n      if (setCurr && !document.getElementById(id)) {\n        setId(null);\n      }\n    }\n  }, [id]);\n\n  return id;\n}\n"],"mappings":";;;;;;;AAKA,IAAIK,gCAAgB,IAAIC,KAAK;;;;;AAM7B,SAAgBC,QAAMC,WAAY;CAChC,IAAIC,cAAcP,OAAO,KAAK;AAE9BO,aAAYC,UAAU;CAEtB,IAAI,CAACC,OAAOC,YAAYT,SAASK,UAAU;CAC3C,IAAIK,SAASX,OAAO,KAAK;CAIzB,IAAIY,eAAeC,QAAQ;AACzB,MAAI,CAACN,YAAYC,QACfE,UAASG,IAAI;MAEbF,QAAOH,UAAUK;;AAIrBX,yBAAsB;AACpBK,cAAYC,UAAU;GACtB;AAEFT,iBAAgB;EACd,IAAIe,QAAQH,OAAOH;AACnB,MAAIM,OAAO;AACTJ,YAASI,MAAM;AACfH,UAAOH,UAAU;;IAElB,CAACE,UAAUE,YAAY,CAAC;CAE3B,IAAIG,MAAMjB,aAAaW,MAAM;AAC7BN,eAAca,IAAID,KAAKH,YAAY;AACnC,QAAOG;;;;;;AAOT,SAAgBE,SAASC,KAAKC,KAAK;AACjC,KAAID,QAAQC,IACV,QAAOD;CAGT,IAAIE,SAASjB,cAAckB,IAAIH,IAAI;AACnC,KAAIE,QAAQ;AACVA,SAAOD,IAAI;AACX,SAAOA;;CAGT,IAAIG,SAASnB,cAAckB,IAAIF,IAAI;AACnC,KAAIG,QAAQ;AACVA,SAAOJ,IAAI;AACX,SAAOA;;AAGT,QAAOC"}

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,5 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
+import { c } from "react-compiler-runtime";
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts
@@ -13,21 +14,33 @@ import { useEffect, useState } from "react";
 * • Uses the modern UA-Client-Hints platform field where available,
 *   then falls back to navigator.platform, then navigator.userAgent.
 */
-function useIsDarwin(defaultValue = true) {
-	const [isDarwin, setIsDarwin] = useState(defaultValue);
-	useEffect(() => {
-		if (typeof navigator === "undefined") return;
-		const chPlatform = navigator.userAgentData?.platform;
-		if (chPlatform) {
-			setIsDarwin(/mac|iphone|ipad|ipod/i.test(chPlatform));
-			return;
-		}
-		if (navigator.platform) {
-			setIsDarwin(/mac|iphone|ipad|ipod/i.test(navigator.platform));
-			return;
-		}
-		setIsDarwin(/mac|iphone|ipad|ipod/i.test(navigator.userAgent));
-	}, []);
+function useIsDarwin(t0) {
+	const $ = c(2);
+	const [isDarwin, setIsDarwin] = useState(t0 === void 0 ? true : t0);
+	let t1;
+	let t2;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			if (typeof navigator === "undefined") return;
+			const chPlatform = navigator.userAgentData?.platform;
+			if (chPlatform) {
+				setIsDarwin(/mac|iphone|ipad|ipod/i.test(chPlatform));
+				return;
+			}
+			if (navigator.platform) {
+				setIsDarwin(/mac|iphone|ipad|ipod/i.test(navigator.platform));
+				return;
+			}
+			setIsDarwin(/mac|iphone|ipad|ipod/i.test(navigator.userAgent));
+		};
+		t2 = [];
+		$[0] = t1;
+		$[1] = t2;
+	} else {
+		t1 = $[0];
+		t2 = $[1];
+	}
+	useEffect(t1, t2);
 	return isDarwin;
 }
 

package/dist/utils/react/useIsDarwin.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsDarwin.js","names":[],"sources":["../../../src/utils/react/useIsDarwin.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * useIsDarwin\n * ----------\n * @returns true  – if the browser is running on macOS / iOS\n *          false – otherwise (Windows, Linux, Android…)\n *\n * • Safe to call during server-side rendering: it defaults to `true`\n *   until it can really inspect the client.\n * • Uses the modern UA-Client-Hints platform field where available,\n *   then falls back to navigator.platform, then navigator.userAgent.\n */\nexport function useIsDarwin(defaultValue: boolean = true): boolean {\n  const [isDarwin, setIsDarwin] = useState<boolean>(defaultValue);\n\n  useEffect(() => {\n    if (typeof navigator === 'undefined') return; // ← running on the server\n\n    // 1 — Prefer UA-CH (Chromium 89+, Edge 94+, Arc, Opera, Android Chrome)\n    const chPlatform = (navigator as any).userAgentData?.platform;\n    if (chPlatform) {\n      setIsDarwin(/mac|iphone|ipad|ipod/i.test(chPlatform));\n      return;\n    }\n\n    // 2 — Safari & Firefox: navigator.platform is still reliable\n    if (navigator.platform) {\n      setIsDarwin(/mac|iphone|ipad|ipod/i.test(navigator.platform));\n      return;\n    }\n\n    // 3 — Last-ditch for very old browsers\n    setIsDarwin(/mac|iphone|ipad|ipod/i.test(navigator.userAgent));\n  }, []);\n\n  return isDarwin;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAaA,SAAgB,YAAY,eAAwB,MAAe;CACjE,MAAM,CAAC,UAAU,eAAe,SAAkB,aAAa;AAE/D,iBAAgB;AACd,MAAI,OAAO,cAAc,YAAa;EAGtC,MAAM,aAAc,UAAkB,eAAe;AACrD,MAAI,YAAY;AACd,eAAY,wBAAwB,KAAK,WAAW,CAAC;AACrD;;AAIF,MAAI,UAAU,UAAU;AACtB,eAAY,wBAAwB,KAAK,UAAU,SAAS,CAAC;AAC7D;;AAIF,cAAY,wBAAwB,KAAK,UAAU,UAAU,CAAC;IAC7D,EAAE,CAAC;AAEN,QAAO"}
+{"version":3,"file":"useIsDarwin.js","names":["useEffect","useState","useIsDarwin","t0","$","_c","defaultValue","undefined","isDarwin","setIsDarwin","t1","t2","Symbol","for","navigator","chPlatform","userAgentData","platform","test","userAgent"],"sources":["../../../src/utils/react/useIsDarwin.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * useIsDarwin\n * ----------\n * @returns true  – if the browser is running on macOS / iOS\n *          false – otherwise (Windows, Linux, Android…)\n *\n * • Safe to call during server-side rendering: it defaults to `true`\n *   until it can really inspect the client.\n * • Uses the modern UA-Client-Hints platform field where available,\n *   then falls back to navigator.platform, then navigator.userAgent.\n */\nexport function useIsDarwin(defaultValue: boolean = true): boolean {\n  const [isDarwin, setIsDarwin] = useState<boolean>(defaultValue);\n\n  useEffect(() => {\n    if (typeof navigator === 'undefined') return; // ← running on the server\n\n    // 1 — Prefer UA-CH (Chromium 89+, Edge 94+, Arc, Opera, Android Chrome)\n    const chPlatform = (navigator as any).userAgentData?.platform;\n    if (chPlatform) {\n      setIsDarwin(/mac|iphone|ipad|ipod/i.test(chPlatform));\n      return;\n    }\n\n    // 2 — Safari & Firefox: navigator.platform is still reliable\n    if (navigator.platform) {\n      setIsDarwin(/mac|iphone|ipad|ipod/i.test(navigator.platform));\n      return;\n    }\n\n    // 3 — Last-ditch for very old browsers\n    setIsDarwin(/mac|iphone|ipad|ipod/i.test(navigator.userAgent));\n  }, []);\n\n  return isDarwin;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAaA,SAAOE,YAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACL,MAAA,CAAAG,UAAAC,eAAgCR,SADNE,OAAAI,SAAA,OAAAJ,GACqC;CAAC,IAAAO;CAAA,IAAAC;AAAA,KAAAP,EAAA,OAAAQ,OAAAC,IAAA,4BAAA,EAAA;AAEtDH,aAAA;AACR,OAAI,OAAOI,cAAc,YAAW;GAGpC,MAAAC,aAAoBD,UAAgBE,eAAyBC;AAC7D,OAAIF,YAAU;AACZN,gBAAY,wBAAuBS,KAAMH,WAAW,CAAC;AAAA;;AAKvD,OAAID,UAASG,UAAS;AACpBR,gBAAY,wBAAuBS,KAAMJ,UAASG,SAAU,CAAC;AAAA;;AAK/DR,eAAY,wBAAuBS,KAAMJ,UAASK,UAAW,CAAC;;AAC7DR,OAAA,EAAE;AAAAP,IAAA,KAAAM;AAAAN,IAAA,KAAAO;QAAA;AAAAD,OAAAN,EAAA;AAAAO,OAAAP,EAAA;;AAlBLJ,WAAUU,IAkBPC,GAAG;AAAA,QAECH"}

package/dist/utils/react/useKeySymbols.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
-import { useMemo } from "react";
+import { c } from "react-compiler-runtime";
 
 //#region src/utils/react/useKeySymbols.ts
 const COMMON = {
@@ -53,14 +53,28 @@ const PC = {
 *   [["⌘", "K"], ["Ctrl", "K"]]
 */
 function useKeySymbols(combo) {
+	const $ = c(5);
 	const modifiers = useIsDarwin() ? MAC : PC;
-	return useMemo(() => {
-		/** split on commas, trim each alternative */
-		return combo.split(",").map((raw) => raw.trim().toLowerCase()).filter(Boolean).map((alternative) => alternative.split("+").map((part) => {
-			const key = part.trim();
-			return modifiers[key] ?? COMMON[key] ?? part.toUpperCase();
-		}));
-	}, [combo, modifiers]);
+	let t0;
+	if ($[0] !== combo || $[1] !== modifiers) {
+		let t1;
+		if ($[3] !== modifiers) {
+			t1 = (alternative) => alternative.split("+").map((part) => {
+				const key = part.trim();
+				return modifiers[key] ?? COMMON[key] ?? part.toUpperCase();
+			});
+			$[3] = modifiers;
+			$[4] = t1;
+		} else t1 = $[4];
+		t0 = combo.split(",").map(_temp).filter(Boolean).map(t1);
+		$[0] = combo;
+		$[1] = modifiers;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
+function _temp(raw) {
+	return raw.trim().toLowerCase();
 }
 
 //#endregion

package/dist/utils/react/useKeySymbols.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeySymbols.js","names":[],"sources":["../../../src/utils/react/useKeySymbols.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useIsDarwin } from './useIsDarwin';\n\n/* symbols that are identical on every OS */\nconst COMMON: Record<string, string> = {\n  esc: 'Esc',\n  escape: 'Esc',\n  enter: '⏎',\n  return: '⏎',\n  space: '␣',\n  backspace: '⌫',\n  delete: '⌦',\n  up: '↑',\n  arrowup: '↑',\n  down: '↓',\n  arrowdown: '↓',\n  left: '←',\n  arrowleft: '←',\n  right: '→',\n  arrowright: '→',\n};\n\n/* modifiers for macOS / iOS */\nconst MAC: Record<string, string> = {\n  mod: '⌘',\n  meta: '⌘',\n  cmd: '⌘',\n  command: '⌘',\n  ctrl: '⌃',\n  control: '⌃',\n  alt: '⌥',\n  option: '⌥',\n  shift: '⇧',\n};\n\n/* modifiers for Windows / Linux */\nconst PC: Record<string, string> = {\n  mod: 'Ctrl',\n  ctrl: 'Ctrl',\n  control: 'Ctrl',\n  meta: 'Win',\n  win: 'Win',\n  windows: 'Win',\n  cmd: 'Win',\n  command: 'Win',\n  alt: '⎇',\n  option: '⎇',\n  shift: '⇧',\n};\n\n/**\n * useKeySymbols\n * -------------\n * Turns an author string such as\n *   \"mod+k, ctrl+k\"\n * into\n *   [[\"⌘\", \"K\"], [\"Ctrl\", \"K\"]]\n */\nexport function useKeySymbols(combo: string): string[][] {\n  const isDarwin = useIsDarwin(); // ⌘ by default during SSR\n  const modifiers = isDarwin ? MAC : PC;\n\n  return useMemo(() => {\n    /** split on commas, trim each alternative */\n    return combo\n      .split(',')\n      .map((raw) => raw.trim().toLowerCase())\n      .filter(Boolean) // drop empty fragments\n      .map((alternative) =>\n        alternative.split('+').map((part) => {\n          const key = part.trim();\n          return (\n            modifiers[key] ?? // platform-specific modifier\n            COMMON[key] ?? // shared glyphs\n            part.toUpperCase() // plain key\n          );\n        }),\n      );\n  }, [combo, modifiers]);\n}\n"],"mappings":";;;;;AAKA,MAAM,SAAiC;CACrC,KAAK;CACL,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,OAAO;CACP,WAAW;CACX,QAAQ;CACR,IAAI;CACJ,SAAS;CACT,MAAM;CACN,WAAW;CACX,MAAM;CACN,WAAW;CACX,OAAO;CACP,YAAY;CACb;AAGD,MAAM,MAA8B;CAClC,KAAK;CACL,MAAM;CACN,KAAK;CACL,SAAS;CACT,MAAM;CACN,SAAS;CACT,KAAK;CACL,QAAQ;CACR,OAAO;CACR;AAGD,MAAM,KAA6B;CACjC,KAAK;CACL,MAAM;CACN,SAAS;CACT,MAAM;CACN,KAAK;CACL,SAAS;CACT,KAAK;CACL,SAAS;CACT,KAAK;CACL,QAAQ;CACR,OAAO;CACR;;;;;;;;;AAUD,SAAgB,cAAc,OAA2B;CAEvD,MAAM,YADW,aAAa,GACD,MAAM;AAEnC,QAAO,cAAc;;AAEnB,SAAO,MACJ,MAAM,IAAI,CACV,KAAK,QAAQ,IAAI,MAAM,CAAC,aAAa,CAAC,CACtC,OAAO,QAAQ,CACf,KAAK,gBACJ,YAAY,MAAM,IAAI,CAAC,KAAK,SAAS;GACnC,MAAM,MAAM,KAAK,MAAM;AACvB,UACE,UAAU,QACV,OAAO,QACP,KAAK,aAAa;IAEpB,CACH;IACF,CAAC,OAAO,UAAU,CAAC"}
+{"version":3,"file":"useKeySymbols.js","names":["useMemo","useIsDarwin","COMMON","Record","esc","escape","enter","return","space","backspace","delete","up","arrowup","down","arrowdown","left","arrowleft","right","arrowright","MAC","mod","meta","cmd","command","ctrl","control","alt","option","shift","PC","win","windows","useKeySymbols","combo","$","_c","isDarwin","modifiers","t0","t1","alternative","split","map","part","key","trim","toUpperCase","_temp","filter","Boolean","raw","toLowerCase"],"sources":["../../../src/utils/react/useKeySymbols.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useIsDarwin } from './useIsDarwin';\n\n/* symbols that are identical on every OS */\nconst COMMON: Record<string, string> = {\n  esc: 'Esc',\n  escape: 'Esc',\n  enter: '⏎',\n  return: '⏎',\n  space: '␣',\n  backspace: '⌫',\n  delete: '⌦',\n  up: '↑',\n  arrowup: '↑',\n  down: '↓',\n  arrowdown: '↓',\n  left: '←',\n  arrowleft: '←',\n  right: '→',\n  arrowright: '→',\n};\n\n/* modifiers for macOS / iOS */\nconst MAC: Record<string, string> = {\n  mod: '⌘',\n  meta: '⌘',\n  cmd: '⌘',\n  command: '⌘',\n  ctrl: '⌃',\n  control: '⌃',\n  alt: '⌥',\n  option: '⌥',\n  shift: '⇧',\n};\n\n/* modifiers for Windows / Linux */\nconst PC: Record<string, string> = {\n  mod: 'Ctrl',\n  ctrl: 'Ctrl',\n  control: 'Ctrl',\n  meta: 'Win',\n  win: 'Win',\n  windows: 'Win',\n  cmd: 'Win',\n  command: 'Win',\n  alt: '⎇',\n  option: '⎇',\n  shift: '⇧',\n};\n\n/**\n * useKeySymbols\n * -------------\n * Turns an author string such as\n *   \"mod+k, ctrl+k\"\n * into\n *   [[\"⌘\", \"K\"], [\"Ctrl\", \"K\"]]\n */\nexport function useKeySymbols(combo: string): string[][] {\n  const isDarwin = useIsDarwin(); // ⌘ by default during SSR\n  const modifiers = isDarwin ? MAC : PC;\n\n  return useMemo(() => {\n    /** split on commas, trim each alternative */\n    return combo\n      .split(',')\n      .map((raw) => raw.trim().toLowerCase())\n      .filter(Boolean) // drop empty fragments\n      .map((alternative) =>\n        alternative.split('+').map((part) => {\n          const key = part.trim();\n          return (\n            modifiers[key] ?? // platform-specific modifier\n            COMMON[key] ?? // shared glyphs\n            part.toUpperCase() // plain key\n          );\n        }),\n      );\n  }, [combo, modifiers]);\n}\n"],"mappings":";;;;;AAKA,MAAME,SAAiC;CACrCE,KAAK;CACLC,QAAQ;CACRC,OAAO;CACPC,QAAQ;CACRC,OAAO;CACPC,WAAW;CACXC,QAAQ;CACRC,IAAI;CACJC,SAAS;CACTC,MAAM;CACNC,WAAW;CACXC,MAAM;CACNC,WAAW;CACXC,OAAO;CACPC,YAAY;CACb;AAGD,MAAMC,MAA8B;CAClCC,KAAK;CACLC,MAAM;CACNC,KAAK;CACLC,SAAS;CACTC,MAAM;CACNC,SAAS;CACTC,KAAK;CACLC,QAAQ;CACRC,OAAO;CACR;AAGD,MAAMC,KAA6B;CACjCT,KAAK;CACLI,MAAM;CACNC,SAAS;CACTJ,MAAM;CACNS,KAAK;CACLC,SAAS;CACTT,KAAK;CACLC,SAAS;CACTG,KAAK;CACLC,QAAQ;CACRC,OAAO;CACR;;;;;;;;;AAUD,SAAOI,cAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAEL,MAAAE,YADiBpC,aAAa,GACZkB,MAAAU;CAAoB,IAAAS;AAAA,KAAAJ,EAAA,OAAAD,SAAAC,EAAA,OAAAG,WAAA;EAAA,IAAAE;AAAA,MAAAL,EAAA,OAAAG,WAAA;AAQ7BE,SAAAC,gBACHA,YAAWC,MAAO,IAAI,CAAAC,KAAKC,SAAA;IACzB,MAAAC,MAAYD,KAAIE,MAAO;AAAC,WAEtBR,UAAUO,QACV1C,OAAO0C,QACPD,KAAIG,aAAc;KAEpB;AAAAZ,KAAA,KAAAG;AAAAH,KAAA,KAAAK;QAAAA,MAAAL,EAAA;AAZCI,OAAAL,MAAKQ,MACH,IAAI,CAAAC,IACNK,MAAkC,CAAAC,OAC/BC,QAAQ,CAAAP,IACXH,GASJ;AAAAL,IAAA,KAAAD;AAAAC,IAAA,KAAAG;AAAAH,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;AAAA,QAbHI;;AANG,SAAAS,MAAAG,KAAA;AAAA,QAQaA,IAAGL,MAAO,CAAAM,aAAc"}

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.181.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLayoutEffect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLayoutEffect.js","names":["useLayoutEffect","React"],"sources":["../../../src/utils/react/useLayoutEffect.tsx"],"sourcesContent":["import * as React from 'react';\n\n// During SSR, React emits a warning when calling useLayoutEffect.\n// Since neither useLayoutEffect nor useEffect run on the server,\n// we can suppress this by replacing it with a noop on the server.\nexport const useLayoutEffect =\n  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n"],"mappings":";;;;AAKA,MAAaA,oBACX,OAAO,WAAW,cAAcC,QAAM,kBAAkBA,QAAM"}
+{"version":3,"file":"useLayoutEffect.js","names":["React","useLayoutEffect","window","useEffect"],"sources":["../../../src/utils/react/useLayoutEffect.tsx"],"sourcesContent":["import * as React from 'react';\n\n// During SSR, React emits a warning when calling useLayoutEffect.\n// Since neither useLayoutEffect nor useEffect run on the server,\n// we can suppress this by replacing it with a noop on the server.\nexport const useLayoutEffect =\n  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;\n"],"mappings":";;;;AAKA,MAAaC,oBACX,OAAOC,WAAW,cAAcF,QAAMC,kBAAkBD,QAAMG"}