@hh.ru/magritte-ui-card 8.3.24 → 8.4.0

package/index.d.ts

@@ -1,2 +1,3 @@
 export * from '@hh.ru/magritte-ui-card/Card';
 export { type CardStyle, type CardProps } from '@hh.ru/magritte-ui-card/types';
+export { type CardSegmentProps } from '@hh.ru/magritte-ui-card/CardSegment';

package/index.js

@@ -3,9 +3,12 @@ export { Card } from './Card.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'classnames';
+import '@hh.ru/magritte-common-use-disabled';
+import './CardSegment-B8AT6F5t.js';
+import './useCardActivation.js';
 import '@hh.ru/magritte-common-keyboard';
 import '@hh.ru/magritte-common-mouse';
-import '@hh.ru/magritte-common-use-disabled';
+import '@hh.ru/magritte-ui-layout';
 import './Skeleton.js';
 import '@hh.ru/magritte-ui-skeleton';
 import '@hh.ru/magritte-ui-icon';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-card",
-  "version": "8.3.24",
+  "version": "8.4.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -31,6 +31,7 @@
     "@hh.ru/magritte-types": "5.0.6",
     "@hh.ru/magritte-ui-breakpoint": "6.0.8",
     "@hh.ru/magritte-ui-icon": "14.2.1",
+    "@hh.ru/magritte-ui-layout": "2.0.0",
     "@hh.ru/magritte-ui-mock-component": "1.1.7",
     "@hh.ru/magritte-ui-skeleton": "3.0.20",
     "@hh.ru/magritte-ui-typography": "5.2.0"
@@ -38,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b65af31dd81516396082133c8fefd2404ae7c071"
+  "gitHead": "3300c3c2d412c0a92b17e48f3b05619643f5be72"
 }

package/types.d.ts

@@ -1,3 +1,4 @@
+import type { MouseEventHandler, PropsWithChildren } from 'react';
 import { TokenColorBackground, TokenBaseStaticBorderRadius, TokenBaseStaticSpace, TokenColorStroke, TokenShadow } from '@hh.ru/magritte-design-tokens/types';
 export type CardPadding = TokenBaseStaticSpace;
 export type CardBorderRadius = TokenBaseStaticBorderRadius | 'halfHeight';
@@ -56,6 +57,8 @@ export interface CommonCardProps {
      **/
     pressEnabled?: boolean;
     /** Обработчик клика по карточке */
-    onClick?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+    onClick?: MouseEventHandler<HTMLElement>;
+    /** Направление раскладки сегментов внутри карточки */
+    direction?: 'row' | 'column';
 }
-export type CardProps = React.PropsWithChildren<CommonCardProps>;
+export type CardProps = PropsWithChildren<CommonCardProps>;

package/useCardActivation.d.ts

@@ -0,0 +1,17 @@
+import { type MouseEventHandler, type KeyboardEventHandler } from 'react';
+interface UseCardActivationParams {
+    onClick?: MouseEventHandler<HTMLElement>;
+    disabled?: boolean;
+    hasExplicitRole?: boolean;
+}
+interface CardActivationProps {
+    onClick: MouseEventHandler<HTMLElement>;
+    onKeyDown: KeyboardEventHandler<HTMLElement>;
+    onFocus: () => void;
+    onBlur: () => void;
+    role?: string;
+    tabIndex?: number;
+    'aria-disabled': boolean;
+}
+export declare const useCardActivation: ({ onClick, disabled, hasExplicitRole, }: UseCardActivationParams) => Partial<CardActivationProps>;
+export {};

package/useCardActivation.js

@@ -0,0 +1,53 @@
+import './index.css';
+import { useRef, useCallback } from 'react';
+import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
+import { isEventFromInteractiveComponent } from '@hh.ru/magritte-common-mouse';
+import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
+
+const useCardActivation = ({ onClick, disabled = false, hasExplicitRole = false, }) => {
+    const forceDisabled = useDisabled();
+    const hasFocusRef = useRef(false);
+    const isEffectivelyDisabled = forceDisabled || disabled;
+    const clickHandler = useCallback((event) => {
+        if (isEffectivelyDisabled || !onClick || isEventFromInteractiveComponent(event)) {
+            return;
+        }
+        onClick(event);
+    }, [onClick, isEffectivelyDisabled]);
+    const keyDownHandler = useCallback((event) => {
+        if (isEffectivelyDisabled ||
+            !onClick ||
+            !hasFocusRef.current ||
+            !keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space]) ||
+            isEventFromInteractiveComponent(event)) {
+            return;
+        }
+        // card может использоваться с SPALink который проверяет defaultPrevented
+        // поэтому preventDefault делаем только на Space
+        if (keyboardMatches(event.nativeEvent, [keyboardKeys.Space])) {
+            event.preventDefault();
+        }
+        event.currentTarget.click();
+    }, [onClick, isEffectivelyDisabled]);
+    const focusCallback = useCallback(() => {
+        hasFocusRef.current = true;
+    }, []);
+    const blurCallback = useCallback(() => {
+        hasFocusRef.current = false;
+    }, []);
+    if (!onClick) {
+        return {};
+    }
+    return {
+        onClick: clickHandler,
+        onKeyDown: keyDownHandler,
+        onFocus: focusCallback,
+        onBlur: blurCallback,
+        'aria-disabled': isEffectivelyDisabled,
+        ...(!isEffectivelyDisabled && { tabIndex: 0 }),
+        ...(!hasExplicitRole && { role: 'button' }),
+    };
+};
+
+export { useCardActivation };
+//# sourceMappingURL=useCardActivation.js.map

package/useCardActivation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCardActivation.js","sources":["src/useCardActivation.ts"],"sourcesContent":["import { useCallback, useRef, type MouseEventHandler, type KeyboardEventHandler } from 'react';\n\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { isEventFromInteractiveComponent } from '@hh.ru/magritte-common-mouse';\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\n\ninterface UseCardActivationParams {\n    onClick?: MouseEventHandler<HTMLElement>;\n    disabled?: boolean;\n    hasExplicitRole?: boolean;\n}\n\ninterface CardActivationProps {\n    onClick: MouseEventHandler<HTMLElement>;\n    onKeyDown: KeyboardEventHandler<HTMLElement>;\n    onFocus: () => void;\n    onBlur: () => void;\n    role?: string;\n    tabIndex?: number;\n    'aria-disabled': boolean;\n}\n\nexport const useCardActivation = ({\n    onClick,\n    disabled = false,\n    hasExplicitRole = false,\n}: UseCardActivationParams): Partial<CardActivationProps> => {\n    const forceDisabled = useDisabled();\n    const hasFocusRef = useRef(false);\n\n    const isEffectivelyDisabled = forceDisabled || disabled;\n\n    const clickHandler: MouseEventHandler<HTMLElement> = useCallback(\n        (event) => {\n            if (isEffectivelyDisabled || !onClick || isEventFromInteractiveComponent(event)) {\n                return;\n            }\n\n            onClick(event);\n        },\n        [onClick, isEffectivelyDisabled]\n    );\n\n    const keyDownHandler: KeyboardEventHandler<HTMLElement> = useCallback(\n        (event) => {\n            if (\n                isEffectivelyDisabled ||\n                !onClick ||\n                !hasFocusRef.current ||\n                !keyboardMatches(event.nativeEvent, [keyboardKeys.Enter, keyboardKeys.Space]) ||\n                isEventFromInteractiveComponent(event)\n            ) {\n                return;\n            }\n\n            // card может использоваться с SPALink который проверяет defaultPrevented\n            // поэтому preventDefault делаем только на Space\n            if (keyboardMatches(event.nativeEvent, [keyboardKeys.Space])) {\n                event.preventDefault();\n            }\n\n            event.currentTarget.click();\n        },\n        [onClick, isEffectivelyDisabled]\n    );\n\n    const focusCallback = useCallback(() => {\n        hasFocusRef.current = true;\n    }, []);\n\n    const blurCallback = useCallback(() => {\n        hasFocusRef.current = false;\n    }, []);\n\n    if (!onClick) {\n        return {};\n    }\n\n    return {\n        onClick: clickHandler,\n        onKeyDown: keyDownHandler,\n        onFocus: focusCallback,\n        onBlur: blurCallback,\n        'aria-disabled': isEffectivelyDisabled,\n        ...(!isEffectivelyDisabled && { tabIndex: 0 }),\n        ...(!hasExplicitRole && { role: 'button' }),\n    };\n};\n"],"names":[],"mappings":";;;;;AAsBa,MAAA,iBAAiB,GAAG,CAAC,EAC9B,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,eAAe,GAAG,KAAK,GACD,KAAkC;AACxD,IAAA,MAAM,aAAa,GAAG,WAAW,EAAE,CAAC;AACpC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAElC,IAAA,MAAM,qBAAqB,GAAG,aAAa,IAAI,QAAQ,CAAC;AAExD,IAAA,MAAM,YAAY,GAAmC,WAAW,CAC5D,CAAC,KAAK,KAAI;QACN,IAAI,qBAAqB,IAAI,CAAC,OAAO,IAAI,+BAA+B,CAAC,KAAK,CAAC,EAAE;YAC7E,OAAO;SACV;QAED,OAAO,CAAC,KAAK,CAAC,CAAC;AACnB,KAAC,EACD,CAAC,OAAO,EAAE,qBAAqB,CAAC,CACnC,CAAC;AAEF,IAAA,MAAM,cAAc,GAAsC,WAAW,CACjE,CAAC,KAAK,KAAI;AACN,QAAA,IACI,qBAAqB;AACrB,YAAA,CAAC,OAAO;YACR,CAAC,WAAW,CAAC,OAAO;AACpB,YAAA,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;AAC7E,YAAA,+BAA+B,CAAC,KAAK,CAAC,EACxC;YACE,OAAO;SACV;;;AAID,QAAA,IAAI,eAAe,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE;YAC1D,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;AAED,QAAA,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;AAChC,KAAC,EACD,CAAC,OAAO,EAAE,qBAAqB,CAAC,CACnC,CAAC;AAEF,IAAA,MAAM,aAAa,GAAG,WAAW,CAAC,MAAK;AACnC,QAAA,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;KAC9B,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAK;AAClC,QAAA,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;KAC/B,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,OAAO,EAAE;AACV,QAAA,OAAO,EAAE,CAAC;KACb;IAED,OAAO;AACH,QAAA,OAAO,EAAE,YAAY;AACrB,QAAA,SAAS,EAAE,cAAc;AACzB,QAAA,OAAO,EAAE,aAAa;AACtB,QAAA,MAAM,EAAE,YAAY;AACpB,QAAA,eAAe,EAAE,qBAAqB;QACtC,IAAI,CAAC,qBAAqB,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE;QAC7C,IAAI,CAAC,eAAe,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC7C,CAAC;AACN;;;;"}