[UIK-4280][chore] removed keyboardFocusEnhance

semcore/base-components/src/components/popper/Popper.tsx

@@ -9,7 +9,6 @@ import {
 } from '@semcore/core';
 import { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps';
 import canUseDOM from '@semcore/core/lib/utils/canUseDOM';
-import keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import { hasParent } from '@semcore/core/lib/utils/hasParent';
 import logger from '@semcore/core/lib/utils/logger';
 import pick from '@semcore/core/lib/utils/pick';
@@ -779,8 +778,6 @@ function PopperPopper(props: PopperPopperProps & IRootComponentProps & InnerPopp
   );
 }
 
-PopperPopper.enhance = [keyboardFocusEnhance(false)];
-
 export const Popper = createComponent(PopperRoot, {
   Trigger,
   Popper: PopperPopper,

semcore/base-components/src/components/scroll-area/ScrollArea.tsx

@@ -1,7 +1,6 @@
-import { createComponent, sstyled, Component, Root, type IRootComponentProps } from '@semcore/core';
+import { createComponent, sstyled, Component, Root, type IRootComponentProps, lastInteraction } from '@semcore/core';
 import { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps';
 import canUseDOM from '@semcore/core/lib/utils/canUseDOM';
-import keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import { isAdvanceMode } from '@semcore/core/lib/utils/findComponent';
 import trottle from '@semcore/core/lib/utils/rafTrottle';
 import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
@@ -46,7 +45,7 @@ class ScrollAreaRoot extends Component<ScrollAreaProps, typeof ScrollAreaRoot.en
   static displayName = 'ScrollArea';
 
   static style = style;
-  static enhance = [uniqueIDEnhancement(), keyboardFocusEnhance()] as const;
+  static enhance = [uniqueIDEnhancement()] as const;
 
   static defaultProps: () => DefaultProps = () => ({
     container: React.createRef<HTMLElement | null>(),
@@ -203,7 +202,7 @@ class ScrollAreaRoot extends Component<ScrollAreaProps, typeof ScrollAreaRoot.en
 
   handleFocusIn = (e: FocusEvent) => {
     setTimeout(() => {
-      const { keyboardFocused, leftOffset, rightOffset, topOffset, bottomOffset } = this.asProps;
+      const { leftOffset, rightOffset, topOffset, bottomOffset } = this.asProps;
 
       if (
         e.target instanceof HTMLElement &&
@@ -227,7 +226,7 @@ class ScrollAreaRoot extends Component<ScrollAreaProps, typeof ScrollAreaRoot.en
             Math.floor(element.left) >= viewPort.right - offset.right ||
             Math.floor(element.right) <= viewPort.left + offset.left;
 
-          if (outOfViewport && keyboardFocused) {
+          if (outOfViewport && lastInteraction.isKeyboard()) {
             this.$container.scrollTo({
               top: element.top + this.$container.scrollTop - offset.top - viewPort.top,
               left: element.left + this.$container.scrollLeft - offset.left - viewPort.left,

semcore/checkbox/src/Checkbox.jsx

@@ -1,7 +1,6 @@
 import { Box, Flex, InvalidStateBox } from '@semcore/base-components';
 import { createComponent, Component, sstyled, Root } from '@semcore/core';
 import { callAllEventHandlers } from '@semcore/core/lib/utils/assignProps';
-import autoFocusEnhance from '@semcore/core/lib/utils/enhances/autoFocusEnhance';
 import resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import getInputProps, { inputProps } from '@semcore/core/lib/utils/inputProps';
 import logger from '@semcore/core/lib/utils/logger';
@@ -114,7 +113,7 @@ class ValueRoot extends Component {
     };
   };
 
-  static enhance = [autoFocusEnhance(), resolveColorEnhance()];
+  static enhance = [resolveColorEnhance()];
   static displayName = 'Value';
   static style = style;
 

semcore/checkbox/src/index.d.ts

@@ -1,6 +1,5 @@
 import type { Box, BoxProps, FlexProps } from '@semcore/base-components';
-import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
-import type { WithAutoFocusEnhanceProps } from '@semcore/core/lib/utils/enhances/autoFocusEnhance';
+import type { PropGetterFn, Intergalactic } from '@semcore/core';
 import type { TextProps } from '@semcore/typography';
 
 export type CheckboxSize = 'm' | 'l';
@@ -35,9 +34,7 @@ export type CheckboxProps = BoxProps & {
   theme?: string;
 };
 
-export type CheckboxValueProps = WithAutoFocusEnhanceProps &
-  FlexProps &
-  CheckboxValueControlProps;
+export type CheckboxValueProps = FlexProps & CheckboxValueControlProps;
 
 export type CheckboxValueControlProps = {};
 export type CheckboxValueCheckMarkProps = {};

semcore/color-picker/src/components/Item.tsx

@@ -1,6 +1,5 @@
 import { Box, ScreenReaderOnly } from '@semcore/base-components';
 import { Root, sstyled } from '@semcore/core';
-import keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import CloseM from '@semcore/icon/Close/m';
 import { Hint } from '@semcore/tooltip';
 import React from 'react';
@@ -56,6 +55,7 @@ export function Item(props: ItemAsProps) {
       onKeyDown={handleKeydown}
       __excludeProps={['title']}
       timeout={[250, 50]}
+      tabIndex={0}
     >
       {displayLabel && <SLabel data-value={value || '#6C6E79'}>A</SLabel>}
       <Children />
@@ -72,5 +72,3 @@ export function Item(props: ItemAsProps) {
     </SItemContainer>,
   ) as React.ReactElement;
 }
-
-Item.enhance = [keyboardFocusEnhance()];

semcore/core/CHANGELOG.md

@@ -8,7 +8,7 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 
 - Removed `WithI18n`. Use `useI18n`.
 - Removed `WithCSS`. Use `useCss`.
-- Removed `WithAutoFocus`. Use `autoFocusEnhance`.
+- Removed `WithAutoFocus` and `autoFocusEnhance`.
 - Removed `WithKeyboardFocus`. Just don't use.
 - Removed `WithRef`. Use `useForkRef`.
 

semcore/core/__tests__/utils.test.tsx

@@ -6,20 +6,14 @@ import {
   describe,
   beforeEach,
   vi,
-  it,
   afterEach,
 } from '@semcore/testing-utils/vitest';
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import { extractAriaProps } from '../src/utils/ariaProps';
 import assignProps, { assignHandlers } from '../src/utils/assignProps';
 import { shade, opacity } from '../src/utils/color';
 import compose from '../src/utils/compose';
-import type {
-  KeyboardFocusEnhanceHook,
-} from '../src/utils/enhances/keyboardFocusEnhance';
-import keyboardFocusEnhance from '../src/utils/enhances/keyboardFocusEnhance';
 import EventEmitter from '../src/utils/eventEmitter';
 import { BEFORE_BORDER_ID, AFTER_BORDER_ID } from '../src/utils/focus-lock/focusBorders';
 import { isFocusable } from '../src/utils/focus-lock/isFocusable';
@@ -426,37 +420,6 @@ describe('Utils ref', () => {
   });
 });
 
-describe('Enhances - keyboardFocusEnhances', () => {
-  beforeEach(cleanup);
-
-  test.concurrent(
-    'Verify keyboardFocus returns keyboardFocused to false if component is disabled',
-    () => {
-      const enhance = keyboardFocusEnhance();
-
-      const { result, rerender } = renderHook<
-        ReturnType<KeyboardFocusEnhanceHook>,
-        { disabled: boolean }
-      >(enhance, { initialProps: { disabled: false } });
-
-      act(() => {
-        // @ts-ignore
-        result.current.onFocus({});
-      });
-
-      expect(result.current.keyboardFocused).toBe(true);
-
-      rerender({ disabled: true });
-
-      expect(result.current.keyboardFocused).toBe(false);
-
-      rerender({ disabled: false });
-
-      expect(result.current.keyboardFocused).toBe(false);
-    },
-  );
-});
-
 describe('extractAriaProps', () => {
   test('Verify extract all aria attributes', () => {
     const props = {

semcore/core/package.json

@@ -71,11 +71,6 @@
       "import": "./lib/utils/enhances/animatedSizeEnhance.mjs",
       "types": "./lib/utils/enhances/animatedSizeEnhance.d.ts"
     },
-    "./lib/utils/enhances/autoFocusEnhance": {
-      "require": "./lib/utils/enhances/autoFocusEnhance.js",
-      "import": "./lib/utils/enhances/autoFocusEnhance.mjs",
-      "types": "./lib/utils/enhances/autoFocusEnhance.d.ts"
-    },
     "./lib/utils/enhances/contextEnhance": {
       "require": "./lib/utils/enhances/contextEnhance.js",
       "import": "./lib/utils/enhances/contextEnhance.mjs",
@@ -86,11 +81,6 @@
       "import": "./lib/utils/enhances/focusSourceEnhance.mjs",
       "types": "./lib/utils/enhances/focusSourceEnhance.d.ts"
     },
-    "./lib/utils/enhances/keyboardFocusEnhance": {
-      "require": "./lib/utils/enhances/keyboardFocusEnhance.js",
-      "import": "./lib/utils/enhances/keyboardFocusEnhance.mjs",
-      "types": "./lib/utils/enhances/keyboardFocusEnhance.d.ts"
-    },
     "./lib/utils/enhances/i18nEnhance": {
       "require": "./lib/utils/enhances/i18nEnhance.js",
       "import": "./lib/utils/enhances/i18nEnhance.mjs",

semcore/d3-chart/src/Plot.jsx

@@ -1,7 +1,6 @@
 import { Box } from '@semcore/base-components';
 import { createComponent, Component, Root, sstyled } from '@semcore/core';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
-import keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import colorResolverEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';
 import EventEmitter from '@semcore/core/lib/utils/eventEmitter';
 import React from 'react';
@@ -26,7 +25,7 @@ class PlotRoot extends Component {
     height: 0,
   });
 
-  static enhance = [keyboardFocusEnhance(), colorResolverEnhance(), i18nEnhance(localizedMessages)];
+  static enhance = [colorResolverEnhance(), i18nEnhance(localizedMessages)];
 
   plotId = uniqueId();
 

semcore/d3-chart/src/style/plot.shadow.css

@@ -17,7 +17,7 @@ foreignObject[data-aria-only] {
   pointer-events: none;
 }
 
-SPlot[keyboardFocused] {
+SPlot:focus-visible {
   @mixin focus-outline-mixin;
   border-radius: var(--intergalactic-surface-rounded, 6px);
 }

semcore/date-picker/src/components/Calendar.jsx

@@ -1,6 +1,5 @@
 import { Box, ScreenReaderOnly } from '@semcore/base-components';
 import { createComponent, Component, Root, sstyled } from '@semcore/core';
-import keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import fire from '@semcore/core/lib/utils/fire';
 import dayjs from 'dayjs';
 import React from 'react';
@@ -269,7 +268,6 @@ function CalendarUnit({ styles, date, long, outdated, disabled, highlighted }) {
     />,
   );
 }
-CalendarUnit.enhance = [keyboardFocusEnhance()];
 
 class CalendarDaysRoot extends CalendarAbstract {
   static displayName = 'CalendarDays';

semcore/drag-and-drop/src/DragAndDrop.tsx

@@ -2,7 +2,6 @@ import { Box, ScreenReaderOnly } from '@semcore/base-components';
 import { createComponent, sstyled, Component, Root } from '@semcore/core';
 import canUseDOM from '@semcore/core/lib/utils/canUseDOM';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
-import keyboardFocusEnhance from '@semcore/core/lib/utils/enhances/keyboardFocusEnhance';
 import uniqueIDEnhance from '@semcore/core/lib/utils/uniqueID';
 import useEnhancedEffect from '@semcore/core/lib/utils/use/useEnhancedEffect';
 import React from 'react';
@@ -633,12 +632,12 @@ function Draggable(props: any) {
       role='group'
       aria-describedby={`describe-draggable-${uid}`}
       use:keyboardFocused={isCustomFocus ? false : keyboardFocused}
+      tabIndex={0}
     >
       <Children />
     </SDraggable>,
   );
 };
-Draggable.enhance = [keyboardFocusEnhance()];
 
 type DirectionArrows = 'ArrowRight' | 'ArrowLeft' | 'ArrowUp' | 'ArrowDown';
 const findNextRectangleIndex = <