@synerise/ds-context-selector 1.3.48 → 1.3.49

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.49](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@1.3.48...@synerise/ds-context-selector@1.3.49) (2026-08-18)
+
+### Bug Fixes
+
+- **context-selector:** show keyboard selection highlight in safari ([ea54f49](https://github.com/Synerise/synerise-design/commit/ea54f495cd3c92575fb0c4c2c8f43ce3c5683787))
+
 ## [1.3.48](https://github.com/Synerise/synerise-design/compare/@synerise/ds-context-selector@1.3.47...@synerise/ds-context-selector@1.3.48) (2026-08-14)
 
 **Note:** Version bump only for package @synerise/ds-context-selector

package/dist/ContextSelector.styles.js

@@ -11,7 +11,7 @@ const ContentPlaceholder = /* @__PURE__ */ styled.div.withConfig({
 const ItemsList = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ContextSelectorstyles__ItemsList",
   componentId: "sc-1tuu6xk-2"
-})(["width:100%;background:", ";.ds-context-selector-list{height:auto !important;max-height:300px;}", ""], (props) => props.theme.palette.white, (props) => props.contentHeight !== void 0 && `height: ${props.contentHeight}px;`);
+})(["width:100%;background:", ";.ds-context-selector-list{height:auto !important;max-height:300px;}&[data-keyboard-nav='true'] .ds-context-item:focus > div{box-shadow:inset 0 0 0 2px ", ";}", ""], (props) => props.theme.palette.white, (props) => props.theme.palette["blue-600"], (props) => props.contentHeight !== void 0 && `height: ${props.contentHeight}px;`);
 const SearchResult = /* @__PURE__ */ styled.span.withConfig({
   displayName: "ContextSelectorstyles__SearchResult",
   componentId: "sc-1tuu6xk-3"

package/dist/ContextSelectorDropdown/ContextSelectorDropdown.js

@@ -76,6 +76,7 @@ const ContextSelectorDropdown = ({
   const [activeGroup, setActiveGroup] = useState(void 0);
   const [searchInputCanBeFocused, setSearchInputFocus] = useState(true);
   const [topSectionHeight, setTopSectionHeight] = useState(0);
+  const [isKeyboardNav, setIsKeyboardNav] = useState(false);
   const classNames = useMemo(() => {
     return `ds-context-item ds-context-item-${v4()}`;
   }, []);
@@ -321,7 +322,8 @@ const ContextSelectorDropdown = ({
     document.addEventListener("keydown", recoverLostFocus);
     return () => document.removeEventListener("keydown", recoverLostFocus);
   }, [visible, classNames, searchInputHandle]);
-  return /* @__PURE__ */ jsxs(Dropdown.Wrapper, { style: dropdownWrapperStyles, ref: overlayRef, "data-testid": "context-selector-dropdown", onKeyDown: (event) => {
+  return /* @__PURE__ */ jsxs(Dropdown.Wrapper, { style: dropdownWrapperStyles, ref: overlayRef, "data-testid": "context-selector-dropdown", onMouseDownCapture: () => setIsKeyboardNav(false), onKeyDown: (event) => {
+    setIsKeyboardNav(true);
     const searchInput = searchInputHandle?.current ?? null;
     if (document?.activeElement === searchInput) {
       setSearchInputFocus(false);
@@ -385,7 +387,7 @@ const ContextSelectorDropdown = ({
       resetList();
     }, visible }) }),
     activeGroup && /* @__PURE__ */ jsx(Dropdown.BackAction, { label: activeGroup.name, onClick: () => setActiveGroup(void 0) }),
-    loading ? /* @__PURE__ */ jsx(Skeleton, { contentHeight: dropdownContentHeight, size: "M", numberOfSkeletons: 3 }) : /* @__PURE__ */ jsx(ItemsList, { contentHeight: dropdownContentHeight, children: activeItems?.length ? /* @__PURE__ */ jsxs(Scrollbar, { absolute: true, style: {
+    loading ? /* @__PURE__ */ jsx(Skeleton, { contentHeight: dropdownContentHeight, size: "M", numberOfSkeletons: 3 }) : /* @__PURE__ */ jsx(ItemsList, { contentHeight: dropdownContentHeight, "data-keyboard-nav": isKeyboardNav, children: activeItems?.length ? /* @__PURE__ */ jsxs(Scrollbar, { absolute: true, style: {
       padding: 8
     }, loading, hasMore: hasMoreItems, onYReachEnd: onFetchData, onScroll: handleScroll, ref: scrollBarRef, children: [
       activeTopSection && /* @__PURE__ */ jsx("div", { ref: topSectionRef, children: activeTopSection }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-context-selector",
-  "version": "1.3.48",
+  "version": "1.3.49",
   "description": "ContextSelector UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,25 +36,25 @@
     "check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
     "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
   },
-  "gitHead": "fbaec1b62812804ecab17db27553c2071c7bad49",
+  "gitHead": "e1fece64a41fd18a78583ecb6c21ee00fe8c0759",
   "sideEffects": [
     "dist/style/*",
     "*.less"
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.5.36",
-    "@synerise/ds-divider": "^1.3.17",
-    "@synerise/ds-dropdown": "^1.3.23",
-    "@synerise/ds-factors": "^1.12.15",
+    "@synerise/ds-button": "^1.5.37",
+    "@synerise/ds-divider": "^1.3.18",
+    "@synerise/ds-dropdown": "^1.4.0",
+    "@synerise/ds-factors": "^1.12.16",
     "@synerise/ds-icon": "^1.18.5",
-    "@synerise/ds-information-card": "^1.7.12",
-    "@synerise/ds-list-item": "^1.6.4",
-    "@synerise/ds-popover": "^1.6.3",
-    "@synerise/ds-result": "^1.0.67",
+    "@synerise/ds-information-card": "^1.7.13",
+    "@synerise/ds-list-item": "^1.6.5",
+    "@synerise/ds-popover": "^1.7.0",
+    "@synerise/ds-result": "^1.0.68",
     "@synerise/ds-scrollbar": "^1.5.2",
-    "@synerise/ds-skeleton": "^1.0.61",
-    "@synerise/ds-tabs": "^1.2.9",
+    "@synerise/ds-skeleton": "^1.0.62",
+    "@synerise/ds-tabs": "^1.2.10",
     "@synerise/ds-utils": "^1.10.2",
     "react-intl": "^6.8.7",
     "react-window": "1.8.11",