@hh.ru/magritte-ui-card 8.3.24 → 8.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Between.d.ts +2 -0
- package/Between.js +15 -0
- package/Between.js.map +1 -0
- package/Card.d.ts +6 -1
- package/Card.js +23 -50
- package/Card.js.map +1 -1
- package/CardSegment.d.ts +11 -0
- package/CardSegment.js +29 -0
- package/CardSegment.js.map +1 -0
- package/card-SVi6zpBS.js +5 -0
- package/card-SVi6zpBS.js.map +1 -0
- package/cardContext.d.ts +9 -0
- package/cardContext.js +9 -0
- package/cardContext.js.map +1 -0
- package/index.css +417 -954
- package/index.d.ts +1 -0
- package/index.js +8 -1
- package/index.js.map +1 -1
- package/package.json +4 -2
- package/types.d.ts +6 -2
- package/useCardActivation.d.ts +17 -0
- package/useCardActivation.js +53 -0
- package/useCardActivation.js.map +1 -0
package/Between.d.ts
ADDED
package/Between.js
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useCardContext } from './cardContext.js';
|
|
4
|
+
import { Divider } from '@hh.ru/magritte-ui-divider';
|
|
5
|
+
import { s as styles } from './card-SVi6zpBS.js';
|
|
6
|
+
import 'react';
|
|
7
|
+
|
|
8
|
+
const Between = ({ children }) => {
|
|
9
|
+
const { direction, borderStyle } = useCardContext();
|
|
10
|
+
const content = children ?? jsx(Divider, { mode: direction === 'row' ? 'vertical' : 'horizontal', color: borderStyle });
|
|
11
|
+
return jsx("div", { className: styles.between, children: content });
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export { Between };
|
|
15
|
+
//# sourceMappingURL=Between.js.map
|
package/Between.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Between.js","sources":["src/Between.tsx"],"sourcesContent":["import { FC, PropsWithChildren } from 'react';\n\nimport { useCardContext } from '@hh.ru/magritte-ui-card/cardContext';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\n\nimport styles from './card.less';\n\nexport const Between: FC<PropsWithChildren> = ({ children }) => {\n const { direction, borderStyle } = useCardContext();\n const content = children ?? <Divider mode={direction === 'row' ? 'vertical' : 'horizontal'} color={borderStyle} />;\n\n return <div className={styles.between}>{content}</div>;\n};\n"],"names":["_jsx"],"mappings":";;;;;;MAOa,OAAO,GAA0B,CAAC,EAAE,QAAQ,EAAE,KAAI;IAC3D,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;IACpD,MAAM,OAAO,GAAG,QAAQ,IAAIA,GAAA,CAAC,OAAO,EAAC,EAAA,IAAI,EAAE,SAAS,KAAK,KAAK,GAAG,UAAU,GAAG,YAAY,EAAE,KAAK,EAAE,WAAW,EAAA,CAAI,CAAC;IAEnH,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,QAAA,EAAG,OAAO,EAAA,CAAO,CAAC;AAC3D;;;;"}
|
package/Card.d.ts
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import { type FC, type PropsWithChildren } from 'react';
|
|
1
2
|
import type { PolymorphicComponentWithRef } from '@hh.ru/magritte-types';
|
|
3
|
+
import { type CardSegmentProps } from '@hh.ru/magritte-ui-card/CardSegment';
|
|
2
4
|
import type { CardProps } from '@hh.ru/magritte-ui-card/types';
|
|
3
|
-
export declare const Card: import("@hh.ru/magritte-ui-skeleton").ComponentWithSkeleton<PolymorphicComponentWithRef<CardProps, "div"
|
|
5
|
+
export declare const Card: import("@hh.ru/magritte-ui-skeleton").ComponentWithSkeleton<PolymorphicComponentWithRef<CardProps, "div"> & {
|
|
6
|
+
Segment: PolymorphicComponentWithRef<CardSegmentProps, "div">;
|
|
7
|
+
Between: FC<PropsWithChildren>;
|
|
8
|
+
}, CardProps>;
|
package/Card.js
CHANGED
|
@@ -1,16 +1,21 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
-
import { forwardRef
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
|
-
import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
|
|
6
|
-
import { isEventFromInteractiveComponent } from '@hh.ru/magritte-common-mouse';
|
|
7
5
|
import { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disabled';
|
|
6
|
+
import { Between } from './Between.js';
|
|
7
|
+
import { CardSegment } from './CardSegment.js';
|
|
8
8
|
import { CardSkeleton } from './Skeleton.js';
|
|
9
|
+
import { CardContext } from './cardContext.js';
|
|
10
|
+
import { useCardActivation } from './useCardActivation.js';
|
|
9
11
|
import { IconDynamic } from '@hh.ru/magritte-ui-icon';
|
|
10
12
|
import { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';
|
|
11
13
|
import { TextDynamic } from '@hh.ru/magritte-ui-typography';
|
|
12
|
-
|
|
13
|
-
var styles = {"card":"magritte-card___bhGKz_8-3-24","border-element":"magritte-border-element___x7sZL_8-3-24","borderElement":"magritte-border-element___x7sZL_8-3-24","card-press-enabled":"magritte-card-press-enabled___kXfCl_8-3-24","cardPressEnabled":"magritte-card-press-enabled___kXfCl_8-3-24","card-disabled":"magritte-card-disabled___SMFnB_8-3-24","cardDisabled":"magritte-card-disabled___SMFnB_8-3-24","card-stretched":"magritte-card-stretched___0Uc0J_8-3-24","cardStretched":"magritte-card-stretched___0Uc0J_8-3-24","card-vertical-stretched":"magritte-card-vertical-stretched___Lrxmc_8-3-24","cardVerticalStretched":"magritte-card-vertical-stretched___Lrxmc_8-3-24","border-selected":"magritte-border-selected___bGxVg_8-3-24","borderSelected":"magritte-border-selected___bGxVg_8-3-24","border-default":"magritte-border-default___eT8Lg_8-3-24","borderDefault":"magritte-border-default___eT8Lg_8-3-24","card-hover-enabled":"magritte-card-hover-enabled___-wolU_8-3-24","cardHoverEnabled":"magritte-card-hover-enabled___-wolU_8-3-24","card-shadow-level-3":"magritte-card-shadow-level-3___R34TB_8-3-24","cardShadowLevel3":"magritte-card-shadow-level-3___R34TB_8-3-24","card-shadow-level-2":"magritte-card-shadow-level-2___BgHDx_8-3-24","cardShadowLevel2":"magritte-card-shadow-level-2___BgHDx_8-3-24","card-shadow-level-1":"magritte-card-shadow-level-1___8-39e_8-3-24","cardShadowLevel1":"magritte-card-shadow-level-1___8-39e_8-3-24","card-shadow-level-0":"magritte-card-shadow-level-0___RNbQK_8-3-24","cardShadowLevel0":"magritte-card-shadow-level-0___RNbQK_8-3-24","increase-shadow":"magritte-increase-shadow___Lvfmm_8-3-24","increaseShadow":"magritte-increase-shadow___Lvfmm_8-3-24","flex-container":"magritte-flex-container___CVFEY_8-3-24","flexContainer":"magritte-flex-container___CVFEY_8-3-24","card-style-primary":"magritte-card-style-primary___eZ6aX_8-3-24","cardStylePrimary":"magritte-card-style-primary___eZ6aX_8-3-24","card-hover-style-primary":"magritte-card-hover-style-primary___VgPLn_8-3-24","cardHoverStylePrimary":"magritte-card-hover-style-primary___VgPLn_8-3-24","card-style-secondary":"magritte-card-style-secondary___VmTqm_8-3-24","cardStyleSecondary":"magritte-card-style-secondary___VmTqm_8-3-24","card-hover-style-secondary":"magritte-card-hover-style-secondary___NQCxT_8-3-24","cardHoverStyleSecondary":"magritte-card-hover-style-secondary___NQCxT_8-3-24","card-style-tertiary":"magritte-card-style-tertiary___fE-jW_8-3-24","cardStyleTertiary":"magritte-card-style-tertiary___fE-jW_8-3-24","card-hover-style-tertiary":"magritte-card-hover-style-tertiary___Hrgqb_8-3-24","cardHoverStyleTertiary":"magritte-card-hover-style-tertiary___Hrgqb_8-3-24","card-style-accent-secondary":"magritte-card-style-accent-secondary___Ra0PD_8-3-24","cardStyleAccentSecondary":"magritte-card-style-accent-secondary___Ra0PD_8-3-24","card-hover-style-accent-secondary":"magritte-card-hover-style-accent-secondary___o5URO_8-3-24","cardHoverStyleAccentSecondary":"magritte-card-hover-style-accent-secondary___o5URO_8-3-24","card-style-accent":"magritte-card-style-accent___Gd2T5_8-3-24","cardStyleAccent":"magritte-card-style-accent___Gd2T5_8-3-24","card-hover-style-accent":"magritte-card-hover-style-accent___n8Lb4_8-3-24","cardHoverStyleAccent":"magritte-card-hover-style-accent___n8Lb4_8-3-24","card-style-positive-secondary":"magritte-card-style-positive-secondary___BsXFI_8-3-24","cardStylePositiveSecondary":"magritte-card-style-positive-secondary___BsXFI_8-3-24","card-hover-style-positive-secondary":"magritte-card-hover-style-positive-secondary___Aw634_8-3-24","cardHoverStylePositiveSecondary":"magritte-card-hover-style-positive-secondary___Aw634_8-3-24","card-style-positive":"magritte-card-style-positive___4sgFq_8-3-24","cardStylePositive":"magritte-card-style-positive___4sgFq_8-3-24","card-hover-style-positive":"magritte-card-hover-style-positive___zQ7MM_8-3-24","cardHoverStylePositive":"magritte-card-hover-style-positive___zQ7MM_8-3-24","card-style-negative-secondary":"magritte-card-style-negative-secondary___lN7i3_8-3-24","cardStyleNegativeSecondary":"magritte-card-style-negative-secondary___lN7i3_8-3-24","card-hover-style-negative-secondary":"magritte-card-hover-style-negative-secondary___V7gmt_8-3-24","cardHoverStyleNegativeSecondary":"magritte-card-hover-style-negative-secondary___V7gmt_8-3-24","card-style-negative":"magritte-card-style-negative___Fk6xX_8-3-24","cardStyleNegative":"magritte-card-style-negative___Fk6xX_8-3-24","card-hover-style-negative":"magritte-card-hover-style-negative___1cL78_8-3-24","cardHoverStyleNegative":"magritte-card-hover-style-negative___1cL78_8-3-24","card-style-warning-secondary":"magritte-card-style-warning-secondary___m2Hpa_8-3-24","cardStyleWarningSecondary":"magritte-card-style-warning-secondary___m2Hpa_8-3-24","card-hover-style-warning-secondary":"magritte-card-hover-style-warning-secondary___4knLA_8-3-24","cardHoverStyleWarningSecondary":"magritte-card-hover-style-warning-secondary___4knLA_8-3-24","card-style-warning":"magritte-card-style-warning___NIuCV_8-3-24","cardStyleWarning":"magritte-card-style-warning___NIuCV_8-3-24","card-hover-style-warning":"magritte-card-hover-style-warning___Fw34b_8-3-24","cardHoverStyleWarning":"magritte-card-hover-style-warning___Fw34b_8-3-24","card-style-special-secondary":"magritte-card-style-special-secondary___oVULE_8-3-24","cardStyleSpecialSecondary":"magritte-card-style-special-secondary___oVULE_8-3-24","card-hover-style-special-secondary":"magritte-card-hover-style-special-secondary___ImyvT_8-3-24","cardHoverStyleSpecialSecondary":"magritte-card-hover-style-special-secondary___ImyvT_8-3-24","card-style-special":"magritte-card-style-special___GOdvY_8-3-24","cardStyleSpecial":"magritte-card-style-special___GOdvY_8-3-24","card-hover-style-special":"magritte-card-hover-style-special___og9oA_8-3-24","cardHoverStyleSpecial":"magritte-card-hover-style-special___og9oA_8-3-24","card-style-dreamy-secondary":"magritte-card-style-dreamy-secondary___8Wu4Z_8-3-24","cardStyleDreamySecondary":"magritte-card-style-dreamy-secondary___8Wu4Z_8-3-24","card-hover-style-dreamy-secondary":"magritte-card-hover-style-dreamy-secondary___8SOfV_8-3-24","cardHoverStyleDreamySecondary":"magritte-card-hover-style-dreamy-secondary___8SOfV_8-3-24","card-style-dreamy":"magritte-card-style-dreamy___-Az0l_8-3-24","cardStyleDreamy":"magritte-card-style-dreamy___-Az0l_8-3-24","card-hover-style-dreamy":"magritte-card-hover-style-dreamy___9sxP7_8-3-24","cardHoverStyleDreamy":"magritte-card-hover-style-dreamy___9sxP7_8-3-24","card-style-lovely-secondary":"magritte-card-style-lovely-secondary___feuo0_8-3-24","cardStyleLovelySecondary":"magritte-card-style-lovely-secondary___feuo0_8-3-24","card-hover-style-lovely-secondary":"magritte-card-hover-style-lovely-secondary___n2BrG_8-3-24","cardHoverStyleLovelySecondary":"magritte-card-hover-style-lovely-secondary___n2BrG_8-3-24","card-style-lovely":"magritte-card-style-lovely___fPKUi_8-3-24","cardStyleLovely":"magritte-card-style-lovely___fPKUi_8-3-24","card-hover-style-lovely":"magritte-card-hover-style-lovely___Ml-R2_8-3-24","cardHoverStyleLovely":"magritte-card-hover-style-lovely___Ml-R2_8-3-24","card-style-vivid-secondary":"magritte-card-style-vivid-secondary___yqwVy_8-3-24","cardStyleVividSecondary":"magritte-card-style-vivid-secondary___yqwVy_8-3-24","card-hover-style-vivid-secondary":"magritte-card-hover-style-vivid-secondary___s4GVf_8-3-24","cardHoverStyleVividSecondary":"magritte-card-hover-style-vivid-secondary___s4GVf_8-3-24","card-style-vivid":"magritte-card-style-vivid___pmSCz_8-3-24","cardStyleVivid":"magritte-card-style-vivid___pmSCz_8-3-24","card-hover-style-vivid":"magritte-card-hover-style-vivid___qyl-R_8-3-24","cardHoverStyleVivid":"magritte-card-hover-style-vivid___qyl-R_8-3-24","card-style-body":"magritte-card-style-body___TNxld_8-3-24","cardStyleBody":"magritte-card-style-body___TNxld_8-3-24","card-hover-style-body":"magritte-card-hover-style-body___pimB3_8-3-24","cardHoverStyleBody":"magritte-card-hover-style-body___pimB3_8-3-24","card-style-overlay":"magritte-card-style-overlay___urh3T_8-3-24","cardStyleOverlay":"magritte-card-style-overlay___urh3T_8-3-24","card-hover-style-overlay":"magritte-card-hover-style-overlay___rAPpl_8-3-24","cardHoverStyleOverlay":"magritte-card-hover-style-overlay___rAPpl_8-3-24","card-style-overlay-action":"magritte-card-style-overlay-action___-jVWT_8-3-24","cardStyleOverlayAction":"magritte-card-style-overlay-action___-jVWT_8-3-24","card-hover-style-overlay-action":"magritte-card-hover-style-overlay-action___6BpQw_8-3-24","cardHoverStyleOverlayAction":"magritte-card-hover-style-overlay-action___6BpQw_8-3-24","card-style-overlay-viewer":"magritte-card-style-overlay-viewer___TdHGx_8-3-24","cardStyleOverlayViewer":"magritte-card-style-overlay-viewer___TdHGx_8-3-24","card-hover-style-overlay-viewer":"magritte-card-hover-style-overlay-viewer___f5IDi_8-3-24","cardHoverStyleOverlayViewer":"magritte-card-hover-style-overlay-viewer___f5IDi_8-3-24","card-style-overlay-toolbar":"magritte-card-style-overlay-toolbar___KWyFM_8-3-24","cardStyleOverlayToolbar":"magritte-card-style-overlay-toolbar___KWyFM_8-3-24","card-hover-style-overlay-toolbar":"magritte-card-hover-style-overlay-toolbar___wkaI6_8-3-24","cardHoverStyleOverlayToolbar":"magritte-card-hover-style-overlay-toolbar___wkaI6_8-3-24","card-style-transparent":"magritte-card-style-transparent___1h3h6_8-3-24","cardStyleTransparent":"magritte-card-style-transparent___1h3h6_8-3-24","card-hover-style-transparent":"magritte-card-hover-style-transparent___zXQGl_8-3-24","cardHoverStyleTransparent":"magritte-card-hover-style-transparent___zXQGl_8-3-24","card-style-constant":"magritte-card-style-constant___UluNp_8-3-24","cardStyleConstant":"magritte-card-style-constant___UluNp_8-3-24","card-hover-style-constant":"magritte-card-hover-style-constant___uH6-E_8-3-24","cardHoverStyleConstant":"magritte-card-hover-style-constant___uH6-E_8-3-24","card-style-constant-secondary":"magritte-card-style-constant-secondary___5HctC_8-3-24","cardStyleConstantSecondary":"magritte-card-style-constant-secondary___5HctC_8-3-24","card-hover-style-constant-secondary":"magritte-card-hover-style-constant-secondary___0vxDi_8-3-24","cardHoverStyleConstantSecondary":"magritte-card-hover-style-constant-secondary___0vxDi_8-3-24","card-style-inverse":"magritte-card-style-inverse___HWOHp_8-3-24","cardStyleInverse":"magritte-card-style-inverse___HWOHp_8-3-24","card-hover-style-inverse":"magritte-card-hover-style-inverse___Db1kM_8-3-24","cardHoverStyleInverse":"magritte-card-hover-style-inverse___Db1kM_8-3-24","card-style-inverse-secondary":"magritte-card-style-inverse-secondary___3EIdn_8-3-24","cardStyleInverseSecondary":"magritte-card-style-inverse-secondary___3EIdn_8-3-24","card-hover-style-inverse-secondary":"magritte-card-hover-style-inverse-secondary___BT8I-_8-3-24","cardHoverStyleInverseSecondary":"magritte-card-hover-style-inverse-secondary___BT8I-_8-3-24","card-border-style-neutral":"magritte-card-border-style-neutral___611b0_8-3-24","cardBorderStyleNeutral":"magritte-card-border-style-neutral___611b0_8-3-24","card-border-style-phantom":"magritte-card-border-style-phantom___ezFSC_8-3-24","cardBorderStylePhantom":"magritte-card-border-style-phantom___ezFSC_8-3-24","card-border-style-overlay":"magritte-card-border-style-overlay___yOj6r_8-3-24","cardBorderStyleOverlay":"magritte-card-border-style-overlay___yOj6r_8-3-24","card-border-style-accent":"magritte-card-border-style-accent___D-2Wb_8-3-24","cardBorderStyleAccent":"magritte-card-border-style-accent___D-2Wb_8-3-24","card-border-style-positive":"magritte-card-border-style-positive___to7aa_8-3-24","cardBorderStylePositive":"magritte-card-border-style-positive___to7aa_8-3-24","card-border-style-negative":"magritte-card-border-style-negative___IenCT_8-3-24","cardBorderStyleNegative":"magritte-card-border-style-negative___IenCT_8-3-24","card-border-style-warning":"magritte-card-border-style-warning___Fax0h_8-3-24","cardBorderStyleWarning":"magritte-card-border-style-warning___Fax0h_8-3-24","card-border-style-special":"magritte-card-border-style-special___mgV7r_8-3-24","cardBorderStyleSpecial":"magritte-card-border-style-special___mgV7r_8-3-24","card-border-style-dreamy":"magritte-card-border-style-dreamy___vYIow_8-3-24","cardBorderStyleDreamy":"magritte-card-border-style-dreamy___vYIow_8-3-24","card-border-style-lovely":"magritte-card-border-style-lovely___d1dyh_8-3-24","cardBorderStyleLovely":"magritte-card-border-style-lovely___d1dyh_8-3-24","card-border-style-vivid":"magritte-card-border-style-vivid___UYrn3_8-3-24","cardBorderStyleVivid":"magritte-card-border-style-vivid___UYrn3_8-3-24","card-border-style-neutral-heavy":"magritte-card-border-style-neutral-heavy___VR1s4_8-3-24","cardBorderStyleNeutralHeavy":"magritte-card-border-style-neutral-heavy___VR1s4_8-3-24","card-border-style-constant":"magritte-card-border-style-constant___4DDKM_8-3-24","cardBorderStyleConstant":"magritte-card-border-style-constant___4DDKM_8-3-24","card-border-style-constant-alt":"magritte-card-border-style-constant-alt___wfnBK_8-3-24","cardBorderStyleConstantAlt":"magritte-card-border-style-constant-alt___wfnBK_8-3-24"};
|
|
14
|
+
import { s as styles } from './card-SVi6zpBS.js';
|
|
15
|
+
import '@hh.ru/magritte-ui-divider';
|
|
16
|
+
import '@hh.ru/magritte-ui-layout';
|
|
17
|
+
import '@hh.ru/magritte-common-keyboard';
|
|
18
|
+
import '@hh.ru/magritte-common-mouse';
|
|
14
19
|
|
|
15
20
|
const borderSides = ['top-left', 'top-right', 'bottom-right', 'bottom-left'];
|
|
16
21
|
const genBorderRadiusProp = (radiusProps) => {
|
|
@@ -20,48 +25,21 @@ const genBorderRadiusProp = (radiusProps) => {
|
|
|
20
25
|
.map((radius) => (isHalfHeight ? [radius[0], undefined] : radius))
|
|
21
26
|
.filter((radius) => radius[1] !== undefined));
|
|
22
27
|
const radius = [borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius];
|
|
23
|
-
const
|
|
28
|
+
const radiusVariables = radius.reduce((acc, val, index) => val === undefined
|
|
24
29
|
? acc
|
|
25
30
|
: {
|
|
26
31
|
...acc,
|
|
27
|
-
[`--magritte-
|
|
32
|
+
[`--magritte-card-border-radius-${borderSides[index]}`]: `${val}px`,
|
|
28
33
|
}, {});
|
|
29
34
|
return {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
...tableVariables,
|
|
35
|
+
'--magritte-card-border-radius': `${borderRadius}px`,
|
|
36
|
+
...radiusVariables,
|
|
33
37
|
};
|
|
34
38
|
};
|
|
35
39
|
const genPaddingProps = (paddingProps) => Object.entries(paddingProps).reduce((acc, [key, value]) => (value !== undefined ? { ...acc, [`padding${key}`]: value } : acc), {});
|
|
36
|
-
const CardForwardRefRenderFunc = ({ Element = 'div', stretched = false, verticalStretched = false, hoverEnabled = false, pressEnabled = false, shadow = 'level-0', increaseShadow = false, onClick, style = 'primary', hoverStyle, disabled = false, padding = 0, paddingLeft, paddingRight, paddingTop, paddingBottom, borderRadius = 0, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, children, borderStyle, borderWidth = 'none', ...restProps }, ref) => {
|
|
40
|
+
const CardForwardRefRenderFunc = ({ Element = 'div', stretched = false, verticalStretched = false, hoverEnabled = false, pressEnabled = false, shadow = 'level-0', increaseShadow = false, onClick, style = 'primary', hoverStyle, disabled = false, padding = 0, paddingLeft, paddingRight, paddingTop, paddingBottom, borderRadius = 0, borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius, children, borderStyle, borderWidth = 'none', direction, ...restProps }, ref) => {
|
|
37
41
|
const forceDisabled = useDisabled();
|
|
38
|
-
const
|
|
39
|
-
const focusCallback = () => {
|
|
40
|
-
hasFocusRef.current = true;
|
|
41
|
-
};
|
|
42
|
-
const blurCallback = () => {
|
|
43
|
-
hasFocusRef.current = false;
|
|
44
|
-
};
|
|
45
|
-
const activationHandler = useCallback((event) => {
|
|
46
|
-
if (disabled || forceDisabled || !onClick) {
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
if ((event.type === 'click' ||
|
|
50
|
-
(event.type === 'keydown' &&
|
|
51
|
-
keyboardMatches(event.nativeEvent, [
|
|
52
|
-
keyboardKeys.Enter,
|
|
53
|
-
keyboardKeys.Space,
|
|
54
|
-
]) &&
|
|
55
|
-
hasFocusRef.current)) &&
|
|
56
|
-
!isEventFromInteractiveComponent(event)) {
|
|
57
|
-
// card может использоваться с SPALink который проверяет defaultPrevented
|
|
58
|
-
// поэтому preventDefault делаем только на Space
|
|
59
|
-
event.type === 'keydown' &&
|
|
60
|
-
keyboardMatches(event.nativeEvent, [keyboardKeys.Space]) &&
|
|
61
|
-
event.preventDefault();
|
|
62
|
-
onClick(event);
|
|
63
|
-
}
|
|
64
|
-
}, [onClick, disabled, forceDisabled]);
|
|
42
|
+
const activationProps = useCardActivation({ onClick, disabled, hasExplicitRole: 'role' in restProps });
|
|
65
43
|
const isPressEnabled = pressEnabled || !!onClick;
|
|
66
44
|
const isHoverEnabled = hoverEnabled || isPressEnabled;
|
|
67
45
|
const paddingProps = genPaddingProps({
|
|
@@ -77,17 +55,7 @@ const CardForwardRefRenderFunc = ({ Element = 'div', stretched = false, vertical
|
|
|
77
55
|
borderTopLeftRadius,
|
|
78
56
|
borderTopRightRadius,
|
|
79
57
|
});
|
|
80
|
-
|
|
81
|
-
if (isPressEnabled && !forceDisabled && !disabled) {
|
|
82
|
-
additionalProps.tabIndex = 0;
|
|
83
|
-
}
|
|
84
|
-
if (ref) {
|
|
85
|
-
additionalProps.ref = ref;
|
|
86
|
-
}
|
|
87
|
-
if (!('role' in restProps) && typeof onClick === 'function') {
|
|
88
|
-
additionalProps.role = 'button';
|
|
89
|
-
}
|
|
90
|
-
return (jsx(DisabledContext.Provider, { value: forceDisabled || !!disabled, children: jsxs(Element, { ...restProps, ...additionalProps, onFocus: focusCallback, onBlur: blurCallback, onClick: activationHandler, onKeyDown: activationHandler, style: { ...paddingProps, ...radiusProps }, className: classnames(styles.card, styles[`card-style-${style}`], !!hoverStyle && styles[`card-hover-style-${hoverStyle}`], !!borderStyle && styles[`card-border-style-${borderStyle}`], styles[`card-shadow-${shadow}`], {
|
|
58
|
+
return (jsx(DisabledContext.Provider, { value: forceDisabled || !!disabled, children: jsxs(Element, { ...restProps, ...(ref ? { ref } : {}), ...activationProps, style: { ...paddingProps, ...radiusProps }, className: classnames(styles.card, styles[`card-style-${style}`], !!hoverStyle && styles[`card-hover-style-${hoverStyle}`], !!borderStyle && styles[`card-border-style-${borderStyle}`], styles[`card-shadow-${shadow}`], {
|
|
91
59
|
[styles.cardStretched]: stretched,
|
|
92
60
|
[styles.cardVerticalStretched]: verticalStretched,
|
|
93
61
|
[styles.cardPressEnabled]: isPressEnabled,
|
|
@@ -96,9 +64,14 @@ const CardForwardRefRenderFunc = ({ Element = 'div', stretched = false, vertical
|
|
|
96
64
|
[styles.cardDisabled]: !!disabled,
|
|
97
65
|
[styles.borderSelected]: borderWidth === 'selected',
|
|
98
66
|
[styles.borderDefault]: borderWidth === 'default',
|
|
99
|
-
}),
|
|
67
|
+
}), children: [jsx(IconDynamic, { stretched: true, hoverEnabled: isHoverEnabled, pressEnabled: isPressEnabled, children: jsx("div", { className: styles.flexContainer, children: jsx(TextDynamic, { stretched: true, className: classnames({
|
|
68
|
+
[styles.layoutVertical]: direction === 'column',
|
|
69
|
+
[styles.layoutHorizontal]: direction === 'row',
|
|
70
|
+
}), children: jsx(CardContext.Provider, { value: { direction: direction ?? 'row', borderStyle }, children: children }) }) }) }), jsx("div", { className: styles.borderElement, style: radiusProps })] }) }));
|
|
100
71
|
};
|
|
101
72
|
const CardComponent = forwardRef(CardForwardRefRenderFunc);
|
|
73
|
+
CardComponent.Segment = CardSegment;
|
|
74
|
+
CardComponent.Between = Between;
|
|
102
75
|
const Card = enrichWithSkeleton(CardComponent, CardSkeleton);
|
|
103
76
|
|
|
104
77
|
export { Card };
|
package/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["src/Card.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';\nimport { isEventFromInteractiveComponent } from '@hh.ru/magritte-common-mouse';\nimport { DisabledContext, useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport type { PolymorphicForwardRefRenderFunc, PolymorphicComponentWithRef } from '@hh.ru/magritte-types';\nimport { CardSkeleton } from '@hh.ru/magritte-ui-card/Skeleton';\nimport type { CardBorderRadius, CardPadding, CardProps } from '@hh.ru/magritte-ui-card/types';\nimport { IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';\nimport { TextDynamic } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './card.less';\n\nconst borderSides = ['top-left', 'top-right', 'bottom-right', 'bottom-left'];\nconst genBorderRadiusProp = (radiusProps: {\n borderRadius: CardBorderRadius;\n borderTopLeftRadius?: CardBorderRadius;\n borderTopRightRadius?: CardBorderRadius;\n borderBottomLeftRadius?: CardBorderRadius;\n borderBottomRightRadius?: CardBorderRadius;\n}) => {\n const isHalfHeight = Object.values(radiusProps).includes('halfHeight');\n const borderRadius = isHalfHeight ? 99999 : radiusProps.borderRadius;\n const { borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius } =\n Object.fromEntries(\n Object.entries(radiusProps)\n .map((radius) => (isHalfHeight ? [radius[0], undefined] : radius))\n .filter((radius) => radius[1] !== undefined)\n ) as typeof radiusProps;\n\n const radius = [borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius];\n\n const tableVariables = radius.reduce(\n (acc, val, index) =>\n val === undefined\n ? acc\n : {\n ...acc,\n [`--magritte-ui-table-border-radius-${borderSides[index]}`]: `${val}px`,\n },\n {}\n );\n\n return {\n borderRadius: `${radius.map((radius) => radius ?? borderRadius).join('px ')}px`,\n '--magritte-ui-table-border-radius': `${borderRadius}px`,\n ...tableVariables,\n };\n};\n\nconst genPaddingProps = (paddingProps: {\n Left?: CardPadding;\n Right?: CardPadding;\n Top?: CardPadding;\n Bottom?: CardPadding;\n}) =>\n Object.entries(paddingProps).reduce<Record<string, number>>(\n (acc, [key, value]) => (value !== undefined ? { ...acc, [`padding${key}`]: value } : acc),\n {}\n );\n\nconst CardForwardRefRenderFunc: PolymorphicForwardRefRenderFunc<CardProps, 'div'> = (\n {\n Element = 'div',\n stretched = false,\n verticalStretched = false,\n hoverEnabled = false,\n pressEnabled = false,\n shadow = 'level-0',\n increaseShadow = false,\n onClick,\n style = 'primary',\n hoverStyle,\n disabled = false,\n padding = 0,\n paddingLeft,\n paddingRight,\n paddingTop,\n paddingBottom,\n borderRadius = 0,\n borderTopLeftRadius,\n borderTopRightRadius,\n borderBottomLeftRadius,\n borderBottomRightRadius,\n children,\n borderStyle,\n borderWidth = 'none',\n ...restProps\n },\n ref\n) => {\n const forceDisabled = useDisabled();\n const hasFocusRef = useRef(false);\n const focusCallback = () => {\n hasFocusRef.current = true;\n };\n const blurCallback = () => {\n hasFocusRef.current = false;\n };\n const activationHandler = useCallback(\n (event: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement>) => {\n if (disabled || forceDisabled || !onClick) {\n return;\n }\n\n if (\n (event.type === 'click' ||\n (event.type === 'keydown' &&\n keyboardMatches((event as React.KeyboardEvent<HTMLElement>).nativeEvent, [\n keyboardKeys.Enter,\n keyboardKeys.Space,\n ]) &&\n hasFocusRef.current)) &&\n !isEventFromInteractiveComponent(event)\n ) {\n // card может использоваться с SPALink который проверяет defaultPrevented\n // поэтому preventDefault делаем только на Space\n event.type === 'keydown' &&\n keyboardMatches((event as React.KeyboardEvent<HTMLElement>).nativeEvent, [keyboardKeys.Space]) &&\n event.preventDefault();\n onClick(event);\n }\n },\n [onClick, disabled, forceDisabled]\n );\n const isPressEnabled = pressEnabled || !!onClick;\n const isHoverEnabled = hoverEnabled || isPressEnabled;\n\n const paddingProps = genPaddingProps({\n Left: paddingLeft ?? padding,\n Right: paddingRight ?? padding,\n Top: paddingTop ?? padding,\n Bottom: paddingBottom ?? padding,\n });\n const radiusProps = genBorderRadiusProp({\n borderRadius,\n borderBottomLeftRadius,\n borderBottomRightRadius,\n borderTopLeftRadius,\n borderTopRightRadius,\n });\n const additionalProps: Record<string, unknown> = {};\n if (isPressEnabled && !forceDisabled && !disabled) {\n additionalProps.tabIndex = 0;\n }\n\n if (ref) {\n additionalProps.ref = ref;\n }\n\n if (!('role' in restProps) && typeof onClick === 'function') {\n additionalProps.role = 'button';\n }\n\n return (\n <DisabledContext.Provider value={forceDisabled || !!disabled}>\n <Element\n {...restProps}\n {...additionalProps}\n onFocus={focusCallback}\n onBlur={blurCallback}\n onClick={activationHandler}\n onKeyDown={activationHandler}\n style={{ ...paddingProps, ...radiusProps }}\n className={classnames(\n styles.card,\n styles[`card-style-${style}`],\n !!hoverStyle && styles[`card-hover-style-${hoverStyle}`],\n !!borderStyle && styles[`card-border-style-${borderStyle}`],\n styles[`card-shadow-${shadow}`],\n {\n [styles.cardStretched]: stretched,\n [styles.cardVerticalStretched]: verticalStretched,\n [styles.cardPressEnabled]: isPressEnabled,\n [styles.cardHoverEnabled]: isHoverEnabled,\n [styles.increaseShadow]: increaseShadow,\n [styles.cardDisabled]: !!disabled,\n [styles.borderSelected]: borderWidth === 'selected',\n [styles.borderDefault]: borderWidth === 'default',\n }\n )}\n aria-disabled={forceDisabled || !!disabled}\n >\n <IconDynamic stretched hoverEnabled={isHoverEnabled} pressEnabled={isPressEnabled}>\n <div className={styles.flexContainer}>\n <TextDynamic stretched>{children}</TextDynamic>\n </div>\n </IconDynamic>\n <div className={styles.borderElement} style={radiusProps} />\n </Element>\n </DisabledContext.Provider>\n );\n};\n\nconst CardComponent = forwardRef(CardForwardRefRenderFunc) as PolymorphicComponentWithRef<CardProps, 'div'>;\n\nexport const Card = enrichWithSkeleton(CardComponent, CardSkeleton);\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["src/Card.tsx"],"sourcesContent":["import { type CSSProperties, forwardRef, type FC, type PropsWithChildren } from 'react';\nimport classnames from 'classnames';\n\nimport { DisabledContext, useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport type { PolymorphicForwardRefRenderFunc, PolymorphicComponentWithRef } from '@hh.ru/magritte-types';\nimport { Between } from '@hh.ru/magritte-ui-card/Between';\nimport { CardSegment, type CardSegmentProps } from '@hh.ru/magritte-ui-card/CardSegment';\nimport { CardSkeleton } from '@hh.ru/magritte-ui-card/Skeleton';\nimport { CardContext } from '@hh.ru/magritte-ui-card/cardContext';\nimport type { CardBorderRadius, CardPadding, CardProps } from '@hh.ru/magritte-ui-card/types';\nimport { useCardActivation } from '@hh.ru/magritte-ui-card/useCardActivation';\nimport { IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';\nimport { TextDynamic } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './card.less';\n\nconst borderSides = ['top-left', 'top-right', 'bottom-right', 'bottom-left'] as const;\n\nconst genBorderRadiusProp = (radiusProps: {\n borderRadius: CardBorderRadius;\n borderTopLeftRadius?: CardBorderRadius;\n borderTopRightRadius?: CardBorderRadius;\n borderBottomLeftRadius?: CardBorderRadius;\n borderBottomRightRadius?: CardBorderRadius;\n}): CSSProperties => {\n const isHalfHeight = Object.values(radiusProps).includes('halfHeight');\n const borderRadius = isHalfHeight ? 99999 : radiusProps.borderRadius;\n const { borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius } =\n Object.fromEntries(\n Object.entries(radiusProps)\n .map((radius) => (isHalfHeight ? [radius[0], undefined] : radius))\n .filter((radius) => radius[1] !== undefined)\n ) as typeof radiusProps;\n\n const radius = [borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius];\n\n const radiusVariables = radius.reduce(\n (acc, val, index) =>\n val === undefined\n ? acc\n : {\n ...acc,\n [`--magritte-card-border-radius-${borderSides[index]}`]: `${val}px`,\n },\n {}\n );\n\n return {\n '--magritte-card-border-radius': `${borderRadius}px`,\n ...radiusVariables,\n } as CSSProperties;\n};\n\nconst genPaddingProps = (paddingProps: {\n Left?: CardPadding;\n Right?: CardPadding;\n Top?: CardPadding;\n Bottom?: CardPadding;\n}) =>\n Object.entries(paddingProps).reduce<Record<string, number>>(\n (acc, [key, value]) => (value !== undefined ? { ...acc, [`padding${key}`]: value } : acc),\n {}\n );\n\nconst CardForwardRefRenderFunc: PolymorphicForwardRefRenderFunc<CardProps, 'div'> = (\n {\n Element = 'div',\n stretched = false,\n verticalStretched = false,\n hoverEnabled = false,\n pressEnabled = false,\n shadow = 'level-0',\n increaseShadow = false,\n onClick,\n style = 'primary',\n hoverStyle,\n disabled = false,\n padding = 0,\n paddingLeft,\n paddingRight,\n paddingTop,\n paddingBottom,\n borderRadius = 0,\n borderTopLeftRadius,\n borderTopRightRadius,\n borderBottomLeftRadius,\n borderBottomRightRadius,\n children,\n borderStyle,\n borderWidth = 'none',\n direction,\n ...restProps\n },\n ref\n) => {\n const forceDisabled = useDisabled();\n const activationProps = useCardActivation({ onClick, disabled, hasExplicitRole: 'role' in restProps });\n const isPressEnabled = pressEnabled || !!onClick;\n const isHoverEnabled = hoverEnabled || isPressEnabled;\n\n const paddingProps = genPaddingProps({\n Left: paddingLeft ?? padding,\n Right: paddingRight ?? padding,\n Top: paddingTop ?? padding,\n Bottom: paddingBottom ?? padding,\n });\n const radiusProps = genBorderRadiusProp({\n borderRadius,\n borderBottomLeftRadius,\n borderBottomRightRadius,\n borderTopLeftRadius,\n borderTopRightRadius,\n });\n\n return (\n <DisabledContext.Provider value={forceDisabled || !!disabled}>\n <Element\n {...restProps}\n {...(ref ? { ref } : {})}\n {...activationProps}\n style={{ ...paddingProps, ...radiusProps }}\n className={classnames(\n styles.card,\n styles[`card-style-${style}`],\n !!hoverStyle && styles[`card-hover-style-${hoverStyle}`],\n !!borderStyle && styles[`card-border-style-${borderStyle}`],\n styles[`card-shadow-${shadow}`],\n {\n [styles.cardStretched]: stretched,\n [styles.cardVerticalStretched]: verticalStretched,\n [styles.cardPressEnabled]: isPressEnabled,\n [styles.cardHoverEnabled]: isHoverEnabled,\n [styles.increaseShadow]: increaseShadow,\n [styles.cardDisabled]: !!disabled,\n [styles.borderSelected]: borderWidth === 'selected',\n [styles.borderDefault]: borderWidth === 'default',\n }\n )}\n >\n <IconDynamic stretched hoverEnabled={isHoverEnabled} pressEnabled={isPressEnabled}>\n <div className={styles.flexContainer}>\n <TextDynamic\n stretched\n className={classnames({\n [styles.layoutVertical]: direction === 'column',\n [styles.layoutHorizontal]: direction === 'row',\n })}\n >\n <CardContext.Provider value={{ direction: direction ?? 'row', borderStyle }}>\n {children}\n </CardContext.Provider>\n </TextDynamic>\n </div>\n </IconDynamic>\n <div className={styles.borderElement} style={radiusProps} />\n </Element>\n </DisabledContext.Provider>\n );\n};\n\nconst CardComponent = forwardRef(CardForwardRefRenderFunc) as unknown as PolymorphicComponentWithRef<\n CardProps,\n 'div'\n> & {\n Segment: PolymorphicComponentWithRef<CardSegmentProps, 'div'>;\n Between: FC<PropsWithChildren>;\n};\n\nCardComponent.Segment = CardSegment;\nCardComponent.Between = Between;\n\nexport const Card = enrichWithSkeleton(CardComponent, CardSkeleton);\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
package/CardSegment.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type MouseEventHandler } from 'react';
|
|
2
|
+
import type { PolymorphicComponentWithRef } from '@hh.ru/magritte-types';
|
|
3
|
+
import { type FlexProps } from '@hh.ru/magritte-ui-layout';
|
|
4
|
+
export type CardSegmentProps = FlexProps & {
|
|
5
|
+
/** Включает реакцию сегмента на hover. Реакция на нажатие включается если у карточки задан pressEnabled. Автоматически включается при наличии onClick на сегменте */
|
|
6
|
+
interactive?: boolean;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
/** Обработчик клика по сегменту */
|
|
9
|
+
onClick?: MouseEventHandler<HTMLElement>;
|
|
10
|
+
};
|
|
11
|
+
export declare const CardSegment: PolymorphicComponentWithRef<CardSegmentProps, "div">;
|
package/CardSegment.js
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import classnames from 'classnames';
|
|
5
|
+
import { DisabledContext } from '@hh.ru/magritte-common-use-disabled';
|
|
6
|
+
import { useCardContext, CardContext } from './cardContext.js';
|
|
7
|
+
import { useCardActivation } from './useCardActivation.js';
|
|
8
|
+
import { Flex } from '@hh.ru/magritte-ui-layout';
|
|
9
|
+
import { s as styles } from './card-SVi6zpBS.js';
|
|
10
|
+
import '@hh.ru/magritte-common-keyboard';
|
|
11
|
+
import '@hh.ru/magritte-common-mouse';
|
|
12
|
+
|
|
13
|
+
const CardSegmentRenderFunc = ({ children, disabled = false, interactive = false, onClick, direction = 'column', ...flexProps }, ref) => {
|
|
14
|
+
const activationProps = useCardActivation({ onClick, disabled: !!disabled });
|
|
15
|
+
const { borderStyle } = useCardContext();
|
|
16
|
+
return (
|
|
17
|
+
// @ts-expect-error — generic polymorphic props forwarding between nested polymorphic components
|
|
18
|
+
jsx(Flex, { ...flexProps, ...(ref ? { ref: ref } : {}), direction: direction, className: classnames(styles.cardSegment, {
|
|
19
|
+
[styles.interactive]: interactive || !!onClick,
|
|
20
|
+
[styles.pressEnabled]: !!onClick,
|
|
21
|
+
[styles.layoutHorizontal]: direction !== 'column',
|
|
22
|
+
[styles.layoutVertical]: direction === 'column',
|
|
23
|
+
[styles.segmentDisabled]: !!activationProps['aria-disabled'],
|
|
24
|
+
}), ...activationProps, children: jsx(DisabledContext.Provider, { value: !!activationProps['aria-disabled'], children: jsx(CardContext.Provider, { value: { direction: direction === 'column' ? 'column' : 'row', borderStyle }, children: children }) }) }));
|
|
25
|
+
};
|
|
26
|
+
const CardSegment = forwardRef(CardSegmentRenderFunc);
|
|
27
|
+
|
|
28
|
+
export { CardSegment };
|
|
29
|
+
//# sourceMappingURL=CardSegment.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CardSegment.js","sources":["src/CardSegment.tsx"],"sourcesContent":["import { forwardRef, type MouseEventHandler, type Ref } from 'react';\nimport classNames from 'classnames';\n\nimport { DisabledContext } from '@hh.ru/magritte-common-use-disabled';\nimport type { PolymorphicForwardRefRenderFunc, PolymorphicComponentWithRef } from '@hh.ru/magritte-types';\nimport { CardContext, useCardContext } from '@hh.ru/magritte-ui-card/cardContext';\nimport { useCardActivation } from '@hh.ru/magritte-ui-card/useCardActivation';\nimport { type FlexProps, Flex } from '@hh.ru/magritte-ui-layout';\n\nimport styles from './card.less';\n\nexport type CardSegmentProps = FlexProps & {\n /** Включает реакцию сегмента на hover. Реакция на нажатие включается если у карточки задан pressEnabled. Автоматически включается при наличии onClick на сегменте */\n interactive?: boolean;\n disabled?: boolean;\n /** Обработчик клика по сегменту */\n onClick?: MouseEventHandler<HTMLElement>;\n};\n\nconst CardSegmentRenderFunc: PolymorphicForwardRefRenderFunc<CardSegmentProps, 'div'> = (\n { children, disabled = false, interactive = false, onClick, direction = 'column', ...flexProps },\n ref\n) => {\n const activationProps = useCardActivation({ onClick, disabled: !!disabled });\n const { borderStyle } = useCardContext();\n\n return (\n // @ts-expect-error — generic polymorphic props forwarding between nested polymorphic components\n <Flex\n {...flexProps}\n {...(ref ? { ref: ref as Ref<never> } : {})}\n direction={direction}\n className={classNames(styles.cardSegment, {\n [styles.interactive]: interactive || !!onClick,\n [styles.pressEnabled]: !!onClick,\n [styles.layoutHorizontal]: direction !== 'column',\n [styles.layoutVertical]: direction === 'column',\n [styles.segmentDisabled]: !!activationProps['aria-disabled'],\n })}\n {...activationProps}\n >\n <DisabledContext.Provider value={!!activationProps['aria-disabled']}>\n <CardContext.Provider value={{ direction: direction === 'column' ? 'column' : 'row', borderStyle }}>\n {children}\n </CardContext.Provider>\n </DisabledContext.Provider>\n </Flex>\n );\n};\n\nexport const CardSegment = forwardRef(CardSegmentRenderFunc) as PolymorphicComponentWithRef<CardSegmentProps, 'div'>;\n"],"names":["_jsx","classNames"],"mappings":";;;;;;;;;;;AAmBA,MAAM,qBAAqB,GAA6D,CACpF,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,WAAW,GAAG,KAAK,EAAE,OAAO,EAAE,SAAS,GAAG,QAAQ,EAAE,GAAG,SAAS,EAAE,EAChG,GAAG,KACH;AACA,IAAA,MAAM,eAAe,GAAG,iBAAiB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;AAC7E,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;IAEzC;;AAEI,IAAAA,GAAA,CAAC,IAAI,EAAA,EAAA,GACG,SAAS,EAAA,IACR,GAAG,GAAG,EAAE,GAAG,EAAE,GAAiB,EAAE,GAAG,EAAE,GAC1C,SAAS,EAAE,SAAS,EACpB,SAAS,EAAEC,UAAU,CAAC,MAAM,CAAC,WAAW,EAAE;YACtC,CAAC,MAAM,CAAC,WAAW,GAAG,WAAW,IAAI,CAAC,CAAC,OAAO;AAC9C,YAAA,CAAC,MAAM,CAAC,YAAY,GAAG,CAAC,CAAC,OAAO;AAChC,YAAA,CAAC,MAAM,CAAC,gBAAgB,GAAG,SAAS,KAAK,QAAQ;AACjD,YAAA,CAAC,MAAM,CAAC,cAAc,GAAG,SAAS,KAAK,QAAQ;YAC/C,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,CAAC,eAAe,CAAC,eAAe,CAAC;SAC/D,CAAC,EAAA,GACE,eAAe,EAEnB,QAAA,EAAAD,GAAA,CAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC,eAAe,CAAC,YAC/DA,GAAC,CAAA,WAAW,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,KAAK,QAAQ,GAAG,QAAQ,GAAG,KAAK,EAAE,WAAW,EAAE,EAAA,QAAA,EAC7F,QAAQ,EACU,CAAA,EAAA,CACA,EACxB,CAAA,EACT;AACN,CAAC,CAAC;MAEW,WAAW,GAAG,UAAU,CAAC,qBAAqB;;;;"}
|
package/card-SVi6zpBS.js
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
var styles = {"card":"magritte-card___bhGKz_8-5-0","card-segment":"magritte-card-segment___7LjJe_8-5-0","cardSegment":"magritte-card-segment___7LjJe_8-5-0","layout-vertical":"magritte-layout-vertical___9V-h-_8-5-0","layoutVertical":"magritte-layout-vertical___9V-h-_8-5-0","layout-horizontal":"magritte-layout-horizontal___HUAK3_8-5-0","layoutHorizontal":"magritte-layout-horizontal___HUAK3_8-5-0","border-element":"magritte-border-element___x7sZL_8-5-0","borderElement":"magritte-border-element___x7sZL_8-5-0","card-press-enabled":"magritte-card-press-enabled___kXfCl_8-5-0","cardPressEnabled":"magritte-card-press-enabled___kXfCl_8-5-0","interactive":"magritte-interactive___rmhl9_8-5-0","card-disabled":"magritte-card-disabled___SMFnB_8-5-0","cardDisabled":"magritte-card-disabled___SMFnB_8-5-0","segment-disabled":"magritte-segment-disabled___FlWSu_8-5-0","segmentDisabled":"magritte-segment-disabled___FlWSu_8-5-0","card-stretched":"magritte-card-stretched___0Uc0J_8-5-0","cardStretched":"magritte-card-stretched___0Uc0J_8-5-0","card-vertical-stretched":"magritte-card-vertical-stretched___Lrxmc_8-5-0","cardVerticalStretched":"magritte-card-vertical-stretched___Lrxmc_8-5-0","border-selected":"magritte-border-selected___bGxVg_8-5-0","borderSelected":"magritte-border-selected___bGxVg_8-5-0","border-default":"magritte-border-default___eT8Lg_8-5-0","borderDefault":"magritte-border-default___eT8Lg_8-5-0","card-hover-enabled":"magritte-card-hover-enabled___-wolU_8-5-0","cardHoverEnabled":"magritte-card-hover-enabled___-wolU_8-5-0","card-shadow-level-3":"magritte-card-shadow-level-3___R34TB_8-5-0","cardShadowLevel3":"magritte-card-shadow-level-3___R34TB_8-5-0","card-shadow-level-2":"magritte-card-shadow-level-2___BgHDx_8-5-0","cardShadowLevel2":"magritte-card-shadow-level-2___BgHDx_8-5-0","card-shadow-level-1":"magritte-card-shadow-level-1___8-39e_8-5-0","cardShadowLevel1":"magritte-card-shadow-level-1___8-39e_8-5-0","card-shadow-level-0":"magritte-card-shadow-level-0___RNbQK_8-5-0","cardShadowLevel0":"magritte-card-shadow-level-0___RNbQK_8-5-0","increase-shadow":"magritte-increase-shadow___Lvfmm_8-5-0","increaseShadow":"magritte-increase-shadow___Lvfmm_8-5-0","card-style-primary":"magritte-card-style-primary___eZ6aX_8-5-0","cardStylePrimary":"magritte-card-style-primary___eZ6aX_8-5-0","card-style-secondary":"magritte-card-style-secondary___VmTqm_8-5-0","cardStyleSecondary":"magritte-card-style-secondary___VmTqm_8-5-0","card-style-tertiary":"magritte-card-style-tertiary___fE-jW_8-5-0","cardStyleTertiary":"magritte-card-style-tertiary___fE-jW_8-5-0","card-style-accent-secondary":"magritte-card-style-accent-secondary___Ra0PD_8-5-0","cardStyleAccentSecondary":"magritte-card-style-accent-secondary___Ra0PD_8-5-0","card-style-accent":"magritte-card-style-accent___Gd2T5_8-5-0","cardStyleAccent":"magritte-card-style-accent___Gd2T5_8-5-0","card-style-positive-secondary":"magritte-card-style-positive-secondary___BsXFI_8-5-0","cardStylePositiveSecondary":"magritte-card-style-positive-secondary___BsXFI_8-5-0","card-style-positive":"magritte-card-style-positive___4sgFq_8-5-0","cardStylePositive":"magritte-card-style-positive___4sgFq_8-5-0","card-style-negative-secondary":"magritte-card-style-negative-secondary___lN7i3_8-5-0","cardStyleNegativeSecondary":"magritte-card-style-negative-secondary___lN7i3_8-5-0","card-style-negative":"magritte-card-style-negative___Fk6xX_8-5-0","cardStyleNegative":"magritte-card-style-negative___Fk6xX_8-5-0","card-style-warning-secondary":"magritte-card-style-warning-secondary___m2Hpa_8-5-0","cardStyleWarningSecondary":"magritte-card-style-warning-secondary___m2Hpa_8-5-0","card-style-warning":"magritte-card-style-warning___NIuCV_8-5-0","cardStyleWarning":"magritte-card-style-warning___NIuCV_8-5-0","card-style-special-secondary":"magritte-card-style-special-secondary___oVULE_8-5-0","cardStyleSpecialSecondary":"magritte-card-style-special-secondary___oVULE_8-5-0","card-style-special":"magritte-card-style-special___GOdvY_8-5-0","cardStyleSpecial":"magritte-card-style-special___GOdvY_8-5-0","card-style-dreamy-secondary":"magritte-card-style-dreamy-secondary___8Wu4Z_8-5-0","cardStyleDreamySecondary":"magritte-card-style-dreamy-secondary___8Wu4Z_8-5-0","card-style-dreamy":"magritte-card-style-dreamy___-Az0l_8-5-0","cardStyleDreamy":"magritte-card-style-dreamy___-Az0l_8-5-0","card-style-lovely-secondary":"magritte-card-style-lovely-secondary___feuo0_8-5-0","cardStyleLovelySecondary":"magritte-card-style-lovely-secondary___feuo0_8-5-0","card-style-lovely":"magritte-card-style-lovely___fPKUi_8-5-0","cardStyleLovely":"magritte-card-style-lovely___fPKUi_8-5-0","card-style-vivid-secondary":"magritte-card-style-vivid-secondary___yqwVy_8-5-0","cardStyleVividSecondary":"magritte-card-style-vivid-secondary___yqwVy_8-5-0","card-style-vivid":"magritte-card-style-vivid___pmSCz_8-5-0","cardStyleVivid":"magritte-card-style-vivid___pmSCz_8-5-0","card-style-body":"magritte-card-style-body___TNxld_8-5-0","cardStyleBody":"magritte-card-style-body___TNxld_8-5-0","card-style-overlay":"magritte-card-style-overlay___urh3T_8-5-0","cardStyleOverlay":"magritte-card-style-overlay___urh3T_8-5-0","card-style-overlay-action":"magritte-card-style-overlay-action___-jVWT_8-5-0","cardStyleOverlayAction":"magritte-card-style-overlay-action___-jVWT_8-5-0","card-style-overlay-viewer":"magritte-card-style-overlay-viewer___TdHGx_8-5-0","cardStyleOverlayViewer":"magritte-card-style-overlay-viewer___TdHGx_8-5-0","card-style-overlay-toolbar":"magritte-card-style-overlay-toolbar___KWyFM_8-5-0","cardStyleOverlayToolbar":"magritte-card-style-overlay-toolbar___KWyFM_8-5-0","card-style-transparent":"magritte-card-style-transparent___1h3h6_8-5-0","cardStyleTransparent":"magritte-card-style-transparent___1h3h6_8-5-0","card-style-constant":"magritte-card-style-constant___UluNp_8-5-0","cardStyleConstant":"magritte-card-style-constant___UluNp_8-5-0","card-style-constant-secondary":"magritte-card-style-constant-secondary___5HctC_8-5-0","cardStyleConstantSecondary":"magritte-card-style-constant-secondary___5HctC_8-5-0","card-style-inverse":"magritte-card-style-inverse___HWOHp_8-5-0","cardStyleInverse":"magritte-card-style-inverse___HWOHp_8-5-0","card-style-inverse-secondary":"magritte-card-style-inverse-secondary___3EIdn_8-5-0","cardStyleInverseSecondary":"magritte-card-style-inverse-secondary___3EIdn_8-5-0","card-hover-style-primary":"magritte-card-hover-style-primary___VgPLn_8-5-0","cardHoverStylePrimary":"magritte-card-hover-style-primary___VgPLn_8-5-0","card-hover-style-secondary":"magritte-card-hover-style-secondary___NQCxT_8-5-0","cardHoverStyleSecondary":"magritte-card-hover-style-secondary___NQCxT_8-5-0","card-hover-style-tertiary":"magritte-card-hover-style-tertiary___Hrgqb_8-5-0","cardHoverStyleTertiary":"magritte-card-hover-style-tertiary___Hrgqb_8-5-0","card-hover-style-accent-secondary":"magritte-card-hover-style-accent-secondary___o5URO_8-5-0","cardHoverStyleAccentSecondary":"magritte-card-hover-style-accent-secondary___o5URO_8-5-0","card-hover-style-accent":"magritte-card-hover-style-accent___n8Lb4_8-5-0","cardHoverStyleAccent":"magritte-card-hover-style-accent___n8Lb4_8-5-0","card-hover-style-positive-secondary":"magritte-card-hover-style-positive-secondary___Aw634_8-5-0","cardHoverStylePositiveSecondary":"magritte-card-hover-style-positive-secondary___Aw634_8-5-0","card-hover-style-positive":"magritte-card-hover-style-positive___zQ7MM_8-5-0","cardHoverStylePositive":"magritte-card-hover-style-positive___zQ7MM_8-5-0","card-hover-style-negative-secondary":"magritte-card-hover-style-negative-secondary___V7gmt_8-5-0","cardHoverStyleNegativeSecondary":"magritte-card-hover-style-negative-secondary___V7gmt_8-5-0","card-hover-style-negative":"magritte-card-hover-style-negative___1cL78_8-5-0","cardHoverStyleNegative":"magritte-card-hover-style-negative___1cL78_8-5-0","card-hover-style-warning-secondary":"magritte-card-hover-style-warning-secondary___4knLA_8-5-0","cardHoverStyleWarningSecondary":"magritte-card-hover-style-warning-secondary___4knLA_8-5-0","card-hover-style-warning":"magritte-card-hover-style-warning___Fw34b_8-5-0","cardHoverStyleWarning":"magritte-card-hover-style-warning___Fw34b_8-5-0","card-hover-style-special-secondary":"magritte-card-hover-style-special-secondary___ImyvT_8-5-0","cardHoverStyleSpecialSecondary":"magritte-card-hover-style-special-secondary___ImyvT_8-5-0","card-hover-style-special":"magritte-card-hover-style-special___og9oA_8-5-0","cardHoverStyleSpecial":"magritte-card-hover-style-special___og9oA_8-5-0","card-hover-style-dreamy-secondary":"magritte-card-hover-style-dreamy-secondary___8SOfV_8-5-0","cardHoverStyleDreamySecondary":"magritte-card-hover-style-dreamy-secondary___8SOfV_8-5-0","card-hover-style-dreamy":"magritte-card-hover-style-dreamy___9sxP7_8-5-0","cardHoverStyleDreamy":"magritte-card-hover-style-dreamy___9sxP7_8-5-0","card-hover-style-lovely-secondary":"magritte-card-hover-style-lovely-secondary___n2BrG_8-5-0","cardHoverStyleLovelySecondary":"magritte-card-hover-style-lovely-secondary___n2BrG_8-5-0","card-hover-style-lovely":"magritte-card-hover-style-lovely___Ml-R2_8-5-0","cardHoverStyleLovely":"magritte-card-hover-style-lovely___Ml-R2_8-5-0","card-hover-style-vivid-secondary":"magritte-card-hover-style-vivid-secondary___s4GVf_8-5-0","cardHoverStyleVividSecondary":"magritte-card-hover-style-vivid-secondary___s4GVf_8-5-0","card-hover-style-vivid":"magritte-card-hover-style-vivid___qyl-R_8-5-0","cardHoverStyleVivid":"magritte-card-hover-style-vivid___qyl-R_8-5-0","card-hover-style-body":"magritte-card-hover-style-body___pimB3_8-5-0","cardHoverStyleBody":"magritte-card-hover-style-body___pimB3_8-5-0","card-hover-style-overlay":"magritte-card-hover-style-overlay___rAPpl_8-5-0","cardHoverStyleOverlay":"magritte-card-hover-style-overlay___rAPpl_8-5-0","card-hover-style-overlay-action":"magritte-card-hover-style-overlay-action___6BpQw_8-5-0","cardHoverStyleOverlayAction":"magritte-card-hover-style-overlay-action___6BpQw_8-5-0","card-hover-style-overlay-viewer":"magritte-card-hover-style-overlay-viewer___f5IDi_8-5-0","cardHoverStyleOverlayViewer":"magritte-card-hover-style-overlay-viewer___f5IDi_8-5-0","card-hover-style-overlay-toolbar":"magritte-card-hover-style-overlay-toolbar___wkaI6_8-5-0","cardHoverStyleOverlayToolbar":"magritte-card-hover-style-overlay-toolbar___wkaI6_8-5-0","card-hover-style-transparent":"magritte-card-hover-style-transparent___zXQGl_8-5-0","cardHoverStyleTransparent":"magritte-card-hover-style-transparent___zXQGl_8-5-0","card-hover-style-constant":"magritte-card-hover-style-constant___uH6-E_8-5-0","cardHoverStyleConstant":"magritte-card-hover-style-constant___uH6-E_8-5-0","card-hover-style-constant-secondary":"magritte-card-hover-style-constant-secondary___0vxDi_8-5-0","cardHoverStyleConstantSecondary":"magritte-card-hover-style-constant-secondary___0vxDi_8-5-0","card-hover-style-inverse":"magritte-card-hover-style-inverse___Db1kM_8-5-0","cardHoverStyleInverse":"magritte-card-hover-style-inverse___Db1kM_8-5-0","card-hover-style-inverse-secondary":"magritte-card-hover-style-inverse-secondary___BT8I-_8-5-0","cardHoverStyleInverseSecondary":"magritte-card-hover-style-inverse-secondary___BT8I-_8-5-0","press-enabled":"magritte-press-enabled___dc53v_8-5-0","pressEnabled":"magritte-press-enabled___dc53v_8-5-0","flex-container":"magritte-flex-container___CVFEY_8-5-0","flexContainer":"magritte-flex-container___CVFEY_8-5-0","card-border-style-neutral":"magritte-card-border-style-neutral___611b0_8-5-0","cardBorderStyleNeutral":"magritte-card-border-style-neutral___611b0_8-5-0","card-border-style-phantom":"magritte-card-border-style-phantom___ezFSC_8-5-0","cardBorderStylePhantom":"magritte-card-border-style-phantom___ezFSC_8-5-0","card-border-style-overlay":"magritte-card-border-style-overlay___yOj6r_8-5-0","cardBorderStyleOverlay":"magritte-card-border-style-overlay___yOj6r_8-5-0","card-border-style-accent":"magritte-card-border-style-accent___D-2Wb_8-5-0","cardBorderStyleAccent":"magritte-card-border-style-accent___D-2Wb_8-5-0","card-border-style-positive":"magritte-card-border-style-positive___to7aa_8-5-0","cardBorderStylePositive":"magritte-card-border-style-positive___to7aa_8-5-0","card-border-style-negative":"magritte-card-border-style-negative___IenCT_8-5-0","cardBorderStyleNegative":"magritte-card-border-style-negative___IenCT_8-5-0","card-border-style-warning":"magritte-card-border-style-warning___Fax0h_8-5-0","cardBorderStyleWarning":"magritte-card-border-style-warning___Fax0h_8-5-0","card-border-style-special":"magritte-card-border-style-special___mgV7r_8-5-0","cardBorderStyleSpecial":"magritte-card-border-style-special___mgV7r_8-5-0","card-border-style-dreamy":"magritte-card-border-style-dreamy___vYIow_8-5-0","cardBorderStyleDreamy":"magritte-card-border-style-dreamy___vYIow_8-5-0","card-border-style-lovely":"magritte-card-border-style-lovely___d1dyh_8-5-0","cardBorderStyleLovely":"magritte-card-border-style-lovely___d1dyh_8-5-0","card-border-style-vivid":"magritte-card-border-style-vivid___UYrn3_8-5-0","cardBorderStyleVivid":"magritte-card-border-style-vivid___UYrn3_8-5-0","card-border-style-neutral-heavy":"magritte-card-border-style-neutral-heavy___VR1s4_8-5-0","cardBorderStyleNeutralHeavy":"magritte-card-border-style-neutral-heavy___VR1s4_8-5-0","card-border-style-constant":"magritte-card-border-style-constant___4DDKM_8-5-0","cardBorderStyleConstant":"magritte-card-border-style-constant___4DDKM_8-5-0","card-border-style-constant-alt":"magritte-card-border-style-constant-alt___wfnBK_8-5-0","cardBorderStyleConstantAlt":"magritte-card-border-style-constant-alt___wfnBK_8-5-0","between":"magritte-between___kuRsE_8-5-0"};
|
|
3
|
+
|
|
4
|
+
export { styles as s };
|
|
5
|
+
//# sourceMappingURL=card-SVi6zpBS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card-SVi6zpBS.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
package/cardContext.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { TokenColorStroke } from '@hh.ru/magritte-design-tokens/types';
|
|
2
|
+
import type { LayoutDirection } from '@hh.ru/magritte-ui-card/types';
|
|
3
|
+
interface CardContextValue {
|
|
4
|
+
direction: LayoutDirection;
|
|
5
|
+
borderStyle?: TokenColorStroke;
|
|
6
|
+
}
|
|
7
|
+
export declare const CardContext: import("react").Context<CardContextValue>;
|
|
8
|
+
export declare const useCardContext: () => CardContextValue;
|
|
9
|
+
export {};
|
package/cardContext.js
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import './index.css';
|
|
2
|
+
import { createContext, useContext } from 'react';
|
|
3
|
+
|
|
4
|
+
const defaultValue = { direction: 'row' };
|
|
5
|
+
const CardContext = createContext(defaultValue);
|
|
6
|
+
const useCardContext = () => useContext(CardContext);
|
|
7
|
+
|
|
8
|
+
export { CardContext, useCardContext };
|
|
9
|
+
//# sourceMappingURL=cardContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cardContext.js","sources":["src/cardContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { TokenColorStroke } from '@hh.ru/magritte-design-tokens/types';\nimport type { LayoutDirection } from '@hh.ru/magritte-ui-card/types';\n\ninterface CardContextValue {\n direction: LayoutDirection;\n borderStyle?: TokenColorStroke;\n}\n\nconst defaultValue: CardContextValue = { direction: 'row' };\n\nexport const CardContext = createContext<CardContextValue>(defaultValue);\nexport const useCardContext = (): CardContextValue => useContext(CardContext);\n"],"names":[],"mappings":";;AAUA,MAAM,YAAY,GAAqB,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;MAE/C,WAAW,GAAG,aAAa,CAAmB,YAAY,EAAE;AAC5D,MAAA,cAAc,GAAG,MAAwB,UAAU,CAAC,WAAW;;;;"}
|