Merge branch 'main' of https://github.com/chanzuckerberg/sci-components…

… into prod

.anima/.gitignore

@@ -0,0 +1 @@
+cache

.anima/conventions.json

@@ -0,0 +1 @@
+{"assetsPath":"packages/components/src/common/svgs/","componentsPath":"","framework":"react","language":"typescript","styling":"css","tailwindConfigPath":"","tailwindConfigReuseEnabled":false}

.anima/workspace.json

@@ -0,0 +1 @@
+{"workspaceId":"6748293e-b9be-4c7d-b442-7852b921c58d"}

packages/components/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [20.5.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@20.0.1...@czi-sds/components@20.5.0) (2024-06-17)
+
+### Bug Fixes
+
+- **autocomplete:** fix controlled open state ([#767](https://github.com/chanzuckerberg/sci-components/issues/767)) ([6a77a3d](https://github.com/chanzuckerberg/sci-components/commit/6a77a3d49f2313ed569d1916ad58b1abfa68b935))
+- **complexfilter:** fix prop propagation ([7530284](https://github.com/chanzuckerberg/sci-components/commit/7530284831aec9d62c67b938303eb7f88f775158))
+- **dropdown:** fix props propagating ([#774](https://github.com/chanzuckerberg/sci-components/issues/774)) ([c42970a](https://github.com/chanzuckerberg/sci-components/commit/c42970a2270c5c6c1dda40422cb7eeee9b4b2f5e))
+- **sdstheme:** fix SDS Theme backward compatibility ([#770](https://github.com/chanzuckerberg/sci-components/issues/770)) ([860283f](https://github.com/chanzuckerberg/sci-components/commit/860283fefda3664b34685c5d0e52e9c87d3f069d))
+
+### Features
+
+- **Button:** figma refactor button ([#761](https://github.com/chanzuckerberg/sci-components/issues/761)) ([199bc4c](https://github.com/chanzuckerberg/sci-components/commit/199bc4c03f7366e0e6bff79575bc727708f9ac57))
+- **complexfilter:** add shouldisTriggerChangeOnOptionClick to complexFilter and ([#772](https://github.com/chanzuckerberg/sci-components/issues/772)) ([038ad54](https://github.com/chanzuckerberg/sci-components/commit/038ad542a91b05b06af5b77dff0a644a509f0cc0))
+- **rotateleft and rotateright:** add small icons for RotateLeft and RotateRight ([#781](https://github.com/chanzuckerberg/sci-components/issues/781)) ([96a2af1](https://github.com/chanzuckerberg/sci-components/commit/96a2af14747a5413c1bbd45ad45c35a10d52f76d))
+
+# [20.4.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@20.1.2...@czi-sds/components@20.4.0) (2024-05-10)
+
+### Bug Fixes
+
+- **complexfilter:** fix prop propagation ([7530284](https://github.com/chanzuckerberg/sci-components/commit/7530284831aec9d62c67b938303eb7f88f775158))
+- **dropdown:** fix props propagating ([#774](https://github.com/chanzuckerberg/sci-components/issues/774)) ([c42970a](https://github.com/chanzuckerberg/sci-components/commit/c42970a2270c5c6c1dda40422cb7eeee9b4b2f5e))
+
+### Features
+
+- **complexfilter:** add shouldisTriggerChangeOnOptionClick to complexFilter and ([#772](https://github.com/chanzuckerberg/sci-components/issues/772)) ([038ad54](https://github.com/chanzuckerberg/sci-components/commit/038ad542a91b05b06af5b77dff0a644a509f0cc0))
+
 # [20.3.0](https://github.com/chanzuckerberg/sci-components/compare/@czi-sds/components@20.1.2...@czi-sds/components@20.3.0) (2024-05-10)
 
 ### Bug Fixes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@czi-sds/components",
-  "version": "20.3.0",
+  "version": "20.5.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.cjs.d.ts",

packages/components/src/common/helpers/userTabbing.ts

@@ -0,0 +1,67 @@
+import { useEffect } from "react";
+
+/**
+ * Adds a 'user-is-tabbing' class and a 'data-user-is-tabbing' attribute to the provided element when the user starts navigating
+ * with the keyboard. This is useful for styling focus outlines differently when the user is using the keyboard to tab through elements.
+ * It is particularly beneficial for input elements where the styles for :focus and :focus-visible are identical,
+ * unlike button elements which have both :focus and :focus-visible states available to style separately.
+ * By detecting when the user is tabbing, we can apply different styles for :focus and :focus-visible states.
+ *
+ * @param {HTMLElement} element - The element to which the 'user-is-tabbing' class will be added.
+ * @returns {Function} A function to remove the 'user-is-tabbing' class and 'data-user-is-tabbing' attribute and clean up the event listeners.
+ */
+
+const detectUserTabbing = (element: HTMLElement) => {
+  if (!element) return;
+
+  let removed = false;
+
+  function handleFirstTab(e: KeyboardEvent) {
+    if (e.code === "Tab") {
+      element.classList.add("user-is-tabbing");
+      element.setAttribute("data-user-is-tabbing", "true");
+
+      window.removeEventListener("keydown", handleFirstTab);
+      window.addEventListener("mousedown", handleMouseDownOnce);
+    }
+  }
+
+  function handleMouseDownOnce() {
+    element.classList.remove("user-is-tabbing");
+    element.removeAttribute("data-user-is-tabbing");
+
+    window.removeEventListener("mousedown", handleMouseDownOnce);
+    window.addEventListener("keydown", handleFirstTab);
+  }
+
+  window.addEventListener("keydown", handleFirstTab);
+
+  return () => {
+    if (removed) {
+      return;
+    }
+
+    removed = true;
+
+    window.removeEventListener("keydown", handleFirstTab);
+    window.removeEventListener("mousedown", handleMouseDownOnce);
+  };
+};
+
+/**
+ * Custom hook that listens for keyboard and mouse events to detect when
+ * the user is tabbing through elements.
+ *
+ * @param {React.RefObject} ref - The ref to the element to which the 'user-is-tabbing' class
+ * and 'data-user-is-tabbing' attribute will be added.
+ */
+const useDetectUserTabbing = (ref: React.RefObject<HTMLElement>) => {
+  useEffect(() => {
+    if (ref.current) {
+      const destroyListener = detectUserTabbing(ref.current);
+      return () => destroyListener?.();
+    }
+  }, [ref]);
+};
+
+export default useDetectUserTabbing;