@hh.ru/magritte-ui-card 6.2.1 → 7.0.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/Card.d.ts +3 -1
- package/Card.js +41 -19
- package/Card.js.map +1 -1
- package/Skeleton.d.ts +9 -3
- package/index.css +1173 -420
- package/package.json +7 -7
- package/types.d.ts +27 -36
package/Card.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import type { PolymorphicComponentWithRef } from '@hh.ru/magritte-types';
|
|
2
2
|
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">,
|
|
3
|
+
export declare const Card: import("@hh.ru/magritte-ui-skeleton").ComponentWithSkeleton<PolymorphicComponentWithRef<CardProps, "div">, import("@hh.ru/magritte-ui-card/types").CommonCardProps & {
|
|
4
|
+
children?: import("react").ReactNode | undefined;
|
|
5
|
+
} & {
|
|
4
6
|
ref?: import("react").Ref<HTMLDivElement> | undefined;
|
|
5
7
|
}>;
|
package/Card.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import './index.css';
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef, useRef, useCallback } from 'react';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { keyboardMatches, keyboardKeys } from '@hh.ru/magritte-common-keyboard';
|
|
@@ -10,12 +10,30 @@ import { IconDynamic } from '@hh.ru/magritte-ui-icon';
|
|
|
10
10
|
import { enrichWithSkeleton } from '@hh.ru/magritte-ui-skeleton';
|
|
11
11
|
import { TextDynamic } from '@hh.ru/magritte-ui-typography';
|
|
12
12
|
|
|
13
|
-
var styles = {"card":"magritte-card___bhGKz_6-2-1","card-action":"magritte-card-action___4A43B_6-2-1","cardAction":"magritte-card-action___4A43B_6-2-1","card-disabled":"magritte-card-disabled___SMFnB_6-2-1","cardDisabled":"magritte-card-disabled___SMFnB_6-2-1","card-stretched":"magritte-card-stretched___0Uc0J_6-2-1","cardStretched":"magritte-card-stretched___0Uc0J_6-2-1","card-vertical-stretched":"magritte-card-vertical-stretched___Lrxmc_6-2-1","cardVerticalStretched":"magritte-card-vertical-stretched___Lrxmc_6-2-1","card-tone":"magritte-card-tone___rqQ5N_6-2-1","cardTone":"magritte-card-tone___rqQ5N_6-2-1","card-with-border":"magritte-card-with-border___3KsrG_6-2-1","cardWithBorder":"magritte-card-with-border___3KsrG_6-2-1","card-show-shadow":"magritte-card-show-shadow___x4pSd_6-2-1","cardShowShadow":"magritte-card-show-shadow___x4pSd_6-2-1","card-shadow-on-hover":"magritte-card-shadow-on-hover___BoRL3_6-2-1","cardShadowOnHover":"magritte-card-shadow-on-hover___BoRL3_6-2-1","flex-container":"magritte-flex-container___CVFEY_6-2-1","flexContainer":"magritte-flex-container___CVFEY_6-2-1","card-style-blank":"magritte-card-style-blank___oyRfK_6-2-1","cardStyleBlank":"magritte-card-style-blank___oyRfK_6-2-1","card-hover-style-blank":"magritte-card-hover-style-blank___fvKKw_6-2-1","cardHoverStyleBlank":"magritte-card-hover-style-blank___fvKKw_6-2-1","card-style-neutral":"magritte-card-style-neutral___VtbBE_6-2-1","cardStyleNeutral":"magritte-card-style-neutral___VtbBE_6-2-1","card-hover-style-neutral":"magritte-card-hover-style-neutral___IhvdR_6-2-1","cardHoverStyleNeutral":"magritte-card-hover-style-neutral___IhvdR_6-2-1","card-style-contrast":"magritte-card-style-contrast___lhGwj_6-2-1","cardStyleContrast":"magritte-card-style-contrast___lhGwj_6-2-1","card-hover-style-contrast":"magritte-card-hover-style-contrast___CXrlc_6-2-1","cardHoverStyleContrast":"magritte-card-hover-style-contrast___CXrlc_6-2-1","card-style-positive":"magritte-card-style-positive___4sgFq_6-2-1","cardStylePositive":"magritte-card-style-positive___4sgFq_6-2-1","card-hover-style-positive":"magritte-card-hover-style-positive___zQ7MM_6-2-1","cardHoverStylePositive":"magritte-card-hover-style-positive___zQ7MM_6-2-1","card-style-negative":"magritte-card-style-negative___Fk6xX_6-2-1","cardStyleNegative":"magritte-card-style-negative___Fk6xX_6-2-1","card-hover-style-negative":"magritte-card-hover-style-negative___1cL78_6-2-1","cardHoverStyleNegative":"magritte-card-hover-style-negative___1cL78_6-2-1","card-style-warning":"magritte-card-style-warning___NIuCV_6-2-1","cardStyleWarning":"magritte-card-style-warning___NIuCV_6-2-1","card-hover-style-warning":"magritte-card-hover-style-warning___Fw34b_6-2-1","cardHoverStyleWarning":"magritte-card-hover-style-warning___Fw34b_6-2-1","card-style-extra-1":"magritte-card-style-extra-1___HvxuD_6-2-1","cardStyleExtra1":"magritte-card-style-extra-1___HvxuD_6-2-1","card-hover-style-extra-1":"magritte-card-hover-style-extra-1___SpmpG_6-2-1","cardHoverStyleExtra1":"magritte-card-hover-style-extra-1___SpmpG_6-2-1","card-style-extra-2":"magritte-card-style-extra-2___o7xE6_6-2-1","cardStyleExtra2":"magritte-card-style-extra-2___o7xE6_6-2-1","card-hover-style-extra-2":"magritte-card-hover-style-extra-2___zl1ds_6-2-1","cardHoverStyleExtra2":"magritte-card-hover-style-extra-2___zl1ds_6-2-1","card-style-extra-3":"magritte-card-style-extra-3___Civka_6-2-1","cardStyleExtra3":"magritte-card-style-extra-3___Civka_6-2-1","card-hover-style-extra-3":"magritte-card-hover-style-extra-3___V0Ju3_6-2-1","cardHoverStyleExtra3":"magritte-card-hover-style-extra-3___V0Ju3_6-2-1","card-style-extra-4":"magritte-card-style-extra-4___1Ak5j_6-2-1","cardStyleExtra4":"magritte-card-style-extra-4___1Ak5j_6-2-1","card-hover-style-extra-4":"magritte-card-hover-style-extra-4___bM8oz_6-2-1","cardHoverStyleExtra4":"magritte-card-hover-style-extra-4___bM8oz_6-2-1","card-style-extra-5":"magritte-card-style-extra-5___QvO0Q_6-2-1","cardStyleExtra5":"magritte-card-style-extra-5___QvO0Q_6-2-1","card-hover-style-extra-5":"magritte-card-hover-style-extra-5___diZv6_6-2-1","cardHoverStyleExtra5":"magritte-card-hover-style-extra-5___diZv6_6-2-1","card-border-radius-0":"magritte-card-border-radius-0___wvt4-_6-2-1","cardBorderRadius0":"magritte-card-border-radius-0___wvt4-_6-2-1","card-border-top-left-radius-0":"magritte-card-border-top-left-radius-0___xhKvn_6-2-1","cardBorderTopLeftRadius0":"magritte-card-border-top-left-radius-0___xhKvn_6-2-1","card-border-top-right-radius-0":"magritte-card-border-top-right-radius-0___PeZ4S_6-2-1","cardBorderTopRightRadius0":"magritte-card-border-top-right-radius-0___PeZ4S_6-2-1","card-border-bottom-left-radius-0":"magritte-card-border-bottom-left-radius-0___xhqfz_6-2-1","cardBorderBottomLeftRadius0":"magritte-card-border-bottom-left-radius-0___xhqfz_6-2-1","card-border-bottom-right-radius-0":"magritte-card-border-bottom-right-radius-0___wkU84_6-2-1","cardBorderBottomRightRadius0":"magritte-card-border-bottom-right-radius-0___wkU84_6-2-1","card-border-radius-12":"magritte-card-border-radius-12___az-Ir_6-2-1","cardBorderRadius12":"magritte-card-border-radius-12___az-Ir_6-2-1","card-border-top-left-radius-12":"magritte-card-border-top-left-radius-12___-oawE_6-2-1","cardBorderTopLeftRadius12":"magritte-card-border-top-left-radius-12___-oawE_6-2-1","card-border-top-right-radius-12":"magritte-card-border-top-right-radius-12___IhPsK_6-2-1","cardBorderTopRightRadius12":"magritte-card-border-top-right-radius-12___IhPsK_6-2-1","card-border-bottom-left-radius-12":"magritte-card-border-bottom-left-radius-12___FCM6F_6-2-1","cardBorderBottomLeftRadius12":"magritte-card-border-bottom-left-radius-12___FCM6F_6-2-1","card-border-bottom-right-radius-12":"magritte-card-border-bottom-right-radius-12___tCOdR_6-2-1","cardBorderBottomRightRadius12":"magritte-card-border-bottom-right-radius-12___tCOdR_6-2-1","card-border-radius-16":"magritte-card-border-radius-16___Ys6Ji_6-2-1","cardBorderRadius16":"magritte-card-border-radius-16___Ys6Ji_6-2-1","card-border-top-left-radius-16":"magritte-card-border-top-left-radius-16___ukzUt_6-2-1","cardBorderTopLeftRadius16":"magritte-card-border-top-left-radius-16___ukzUt_6-2-1","card-border-top-right-radius-16":"magritte-card-border-top-right-radius-16___gsFms_6-2-1","cardBorderTopRightRadius16":"magritte-card-border-top-right-radius-16___gsFms_6-2-1","card-border-bottom-left-radius-16":"magritte-card-border-bottom-left-radius-16___RNl-W_6-2-1","cardBorderBottomLeftRadius16":"magritte-card-border-bottom-left-radius-16___RNl-W_6-2-1","card-border-bottom-right-radius-16":"magritte-card-border-bottom-right-radius-16___mW4e4_6-2-1","cardBorderBottomRightRadius16":"magritte-card-border-bottom-right-radius-16___mW4e4_6-2-1","card-border-radius-24":"magritte-card-border-radius-24___o72BE_6-2-1","cardBorderRadius24":"magritte-card-border-radius-24___o72BE_6-2-1","card-border-top-left-radius-24":"magritte-card-border-top-left-radius-24___WggIU_6-2-1","cardBorderTopLeftRadius24":"magritte-card-border-top-left-radius-24___WggIU_6-2-1","card-border-top-right-radius-24":"magritte-card-border-top-right-radius-24___-tF1L_6-2-1","cardBorderTopRightRadius24":"magritte-card-border-top-right-radius-24___-tF1L_6-2-1","card-border-bottom-left-radius-24":"magritte-card-border-bottom-left-radius-24___LvciK_6-2-1","cardBorderBottomLeftRadius24":"magritte-card-border-bottom-left-radius-24___LvciK_6-2-1","card-border-bottom-right-radius-24":"magritte-card-border-bottom-right-radius-24___2nUtu_6-2-1","cardBorderBottomRightRadius24":"magritte-card-border-bottom-right-radius-24___2nUtu_6-2-1","card-border-radius-28":"magritte-card-border-radius-28___3YGkG_6-2-1","cardBorderRadius28":"magritte-card-border-radius-28___3YGkG_6-2-1","card-border-top-left-radius-28":"magritte-card-border-top-left-radius-28___ESULp_6-2-1","cardBorderTopLeftRadius28":"magritte-card-border-top-left-radius-28___ESULp_6-2-1","card-border-top-right-radius-28":"magritte-card-border-top-right-radius-28___VeTzN_6-2-1","cardBorderTopRightRadius28":"magritte-card-border-top-right-radius-28___VeTzN_6-2-1","card-border-bottom-left-radius-28":"magritte-card-border-bottom-left-radius-28___azqUv_6-2-1","cardBorderBottomLeftRadius28":"magritte-card-border-bottom-left-radius-28___azqUv_6-2-1","card-border-bottom-right-radius-28":"magritte-card-border-bottom-right-radius-28___8o40T_6-2-1","cardBorderBottomRightRadius28":"magritte-card-border-bottom-right-radius-28___8o40T_6-2-1","card-border-radius-32":"magritte-card-border-radius-32___XpJKx_6-2-1","cardBorderRadius32":"magritte-card-border-radius-32___XpJKx_6-2-1","card-border-top-left-radius-32":"magritte-card-border-top-left-radius-32___fILSa_6-2-1","cardBorderTopLeftRadius32":"magritte-card-border-top-left-radius-32___fILSa_6-2-1","card-border-top-right-radius-32":"magritte-card-border-top-right-radius-32___TdHDP_6-2-1","cardBorderTopRightRadius32":"magritte-card-border-top-right-radius-32___TdHDP_6-2-1","card-border-bottom-left-radius-32":"magritte-card-border-bottom-left-radius-32___3MKJI_6-2-1","cardBorderBottomLeftRadius32":"magritte-card-border-bottom-left-radius-32___3MKJI_6-2-1","card-border-bottom-right-radius-32":"magritte-card-border-bottom-right-radius-32___w0HZZ_6-2-1","cardBorderBottomRightRadius32":"magritte-card-border-bottom-right-radius-32___w0HZZ_6-2-1","card-border-radius-40":"magritte-card-border-radius-40___7J5EX_6-2-1","cardBorderRadius40":"magritte-card-border-radius-40___7J5EX_6-2-1","card-border-top-left-radius-40":"magritte-card-border-top-left-radius-40___VQ3ZO_6-2-1","cardBorderTopLeftRadius40":"magritte-card-border-top-left-radius-40___VQ3ZO_6-2-1","card-border-top-right-radius-40":"magritte-card-border-top-right-radius-40___Ao-nP_6-2-1","cardBorderTopRightRadius40":"magritte-card-border-top-right-radius-40___Ao-nP_6-2-1","card-border-bottom-left-radius-40":"magritte-card-border-bottom-left-radius-40___psJqI_6-2-1","cardBorderBottomLeftRadius40":"magritte-card-border-bottom-left-radius-40___psJqI_6-2-1","card-border-bottom-right-radius-40":"magritte-card-border-bottom-right-radius-40___UyYrk_6-2-1","cardBorderBottomRightRadius40":"magritte-card-border-bottom-right-radius-40___UyYrk_6-2-1"};
|
|
13
|
+
var styles = {"card":"magritte-card___bhGKz_7-0-0","border-element":"magritte-border-element___x7sZL_7-0-0","borderElement":"magritte-border-element___x7sZL_7-0-0","card-press-enabled":"magritte-card-press-enabled___kXfCl_7-0-0","cardPressEnabled":"magritte-card-press-enabled___kXfCl_7-0-0","card-disabled":"magritte-card-disabled___SMFnB_7-0-0","cardDisabled":"magritte-card-disabled___SMFnB_7-0-0","card-stretched":"magritte-card-stretched___0Uc0J_7-0-0","cardStretched":"magritte-card-stretched___0Uc0J_7-0-0","card-vertical-stretched":"magritte-card-vertical-stretched___Lrxmc_7-0-0","cardVerticalStretched":"magritte-card-vertical-stretched___Lrxmc_7-0-0","border-selected":"magritte-border-selected___bGxVg_7-0-0","borderSelected":"magritte-border-selected___bGxVg_7-0-0","border-default":"magritte-border-default___eT8Lg_7-0-0","borderDefault":"magritte-border-default___eT8Lg_7-0-0","card-hover-enabled":"magritte-card-hover-enabled___-wolU_7-0-0","cardHoverEnabled":"magritte-card-hover-enabled___-wolU_7-0-0","card-shadow-level-3":"magritte-card-shadow-level-3___R34TB_7-0-0","cardShadowLevel3":"magritte-card-shadow-level-3___R34TB_7-0-0","card-shadow-level-2":"magritte-card-shadow-level-2___BgHDx_7-0-0","cardShadowLevel2":"magritte-card-shadow-level-2___BgHDx_7-0-0","card-shadow-level-1":"magritte-card-shadow-level-1___8-39e_7-0-0","cardShadowLevel1":"magritte-card-shadow-level-1___8-39e_7-0-0","card-shadow-level-0":"magritte-card-shadow-level-0___RNbQK_7-0-0","cardShadowLevel0":"magritte-card-shadow-level-0___RNbQK_7-0-0","increase-shadow":"magritte-increase-shadow___Lvfmm_7-0-0","increaseShadow":"magritte-increase-shadow___Lvfmm_7-0-0","flex-container":"magritte-flex-container___CVFEY_7-0-0","flexContainer":"magritte-flex-container___CVFEY_7-0-0","card-style-primary":"magritte-card-style-primary___eZ6aX_7-0-0","cardStylePrimary":"magritte-card-style-primary___eZ6aX_7-0-0","card-hover-style-primary":"magritte-card-hover-style-primary___VgPLn_7-0-0","cardHoverStylePrimary":"magritte-card-hover-style-primary___VgPLn_7-0-0","card-style-secondary":"magritte-card-style-secondary___VmTqm_7-0-0","cardStyleSecondary":"magritte-card-style-secondary___VmTqm_7-0-0","card-hover-style-secondary":"magritte-card-hover-style-secondary___NQCxT_7-0-0","cardHoverStyleSecondary":"magritte-card-hover-style-secondary___NQCxT_7-0-0","card-style-tertiary":"magritte-card-style-tertiary___fE-jW_7-0-0","cardStyleTertiary":"magritte-card-style-tertiary___fE-jW_7-0-0","card-hover-style-tertiary":"magritte-card-hover-style-tertiary___Hrgqb_7-0-0","cardHoverStyleTertiary":"magritte-card-hover-style-tertiary___Hrgqb_7-0-0","card-style-accent-secondary":"magritte-card-style-accent-secondary___Ra0PD_7-0-0","cardStyleAccentSecondary":"magritte-card-style-accent-secondary___Ra0PD_7-0-0","card-hover-style-accent-secondary":"magritte-card-hover-style-accent-secondary___o5URO_7-0-0","cardHoverStyleAccentSecondary":"magritte-card-hover-style-accent-secondary___o5URO_7-0-0","card-style-accent":"magritte-card-style-accent___Gd2T5_7-0-0","cardStyleAccent":"magritte-card-style-accent___Gd2T5_7-0-0","card-hover-style-accent":"magritte-card-hover-style-accent___n8Lb4_7-0-0","cardHoverStyleAccent":"magritte-card-hover-style-accent___n8Lb4_7-0-0","card-style-positive-secondary":"magritte-card-style-positive-secondary___BsXFI_7-0-0","cardStylePositiveSecondary":"magritte-card-style-positive-secondary___BsXFI_7-0-0","card-hover-style-positive-secondary":"magritte-card-hover-style-positive-secondary___Aw634_7-0-0","cardHoverStylePositiveSecondary":"magritte-card-hover-style-positive-secondary___Aw634_7-0-0","card-style-positive":"magritte-card-style-positive___4sgFq_7-0-0","cardStylePositive":"magritte-card-style-positive___4sgFq_7-0-0","card-hover-style-positive":"magritte-card-hover-style-positive___zQ7MM_7-0-0","cardHoverStylePositive":"magritte-card-hover-style-positive___zQ7MM_7-0-0","card-style-negative-secondary":"magritte-card-style-negative-secondary___lN7i3_7-0-0","cardStyleNegativeSecondary":"magritte-card-style-negative-secondary___lN7i3_7-0-0","card-hover-style-negative-secondary":"magritte-card-hover-style-negative-secondary___V7gmt_7-0-0","cardHoverStyleNegativeSecondary":"magritte-card-hover-style-negative-secondary___V7gmt_7-0-0","card-style-negative":"magritte-card-style-negative___Fk6xX_7-0-0","cardStyleNegative":"magritte-card-style-negative___Fk6xX_7-0-0","card-hover-style-negative":"magritte-card-hover-style-negative___1cL78_7-0-0","cardHoverStyleNegative":"magritte-card-hover-style-negative___1cL78_7-0-0","card-style-warning-secondary":"magritte-card-style-warning-secondary___m2Hpa_7-0-0","cardStyleWarningSecondary":"magritte-card-style-warning-secondary___m2Hpa_7-0-0","card-hover-style-warning-secondary":"magritte-card-hover-style-warning-secondary___4knLA_7-0-0","cardHoverStyleWarningSecondary":"magritte-card-hover-style-warning-secondary___4knLA_7-0-0","card-style-warning":"magritte-card-style-warning___NIuCV_7-0-0","cardStyleWarning":"magritte-card-style-warning___NIuCV_7-0-0","card-hover-style-warning":"magritte-card-hover-style-warning___Fw34b_7-0-0","cardHoverStyleWarning":"magritte-card-hover-style-warning___Fw34b_7-0-0","card-style-special-secondary":"magritte-card-style-special-secondary___oVULE_7-0-0","cardStyleSpecialSecondary":"magritte-card-style-special-secondary___oVULE_7-0-0","card-hover-style-special-secondary":"magritte-card-hover-style-special-secondary___ImyvT_7-0-0","cardHoverStyleSpecialSecondary":"magritte-card-hover-style-special-secondary___ImyvT_7-0-0","card-style-special":"magritte-card-style-special___GOdvY_7-0-0","cardStyleSpecial":"magritte-card-style-special___GOdvY_7-0-0","card-hover-style-special":"magritte-card-hover-style-special___og9oA_7-0-0","cardHoverStyleSpecial":"magritte-card-hover-style-special___og9oA_7-0-0","card-style-dreamy-secondary":"magritte-card-style-dreamy-secondary___8Wu4Z_7-0-0","cardStyleDreamySecondary":"magritte-card-style-dreamy-secondary___8Wu4Z_7-0-0","card-hover-style-dreamy-secondary":"magritte-card-hover-style-dreamy-secondary___8SOfV_7-0-0","cardHoverStyleDreamySecondary":"magritte-card-hover-style-dreamy-secondary___8SOfV_7-0-0","card-style-dreamy":"magritte-card-style-dreamy___-Az0l_7-0-0","cardStyleDreamy":"magritte-card-style-dreamy___-Az0l_7-0-0","card-hover-style-dreamy":"magritte-card-hover-style-dreamy___9sxP7_7-0-0","cardHoverStyleDreamy":"magritte-card-hover-style-dreamy___9sxP7_7-0-0","card-style-lovely-secondary":"magritte-card-style-lovely-secondary___feuo0_7-0-0","cardStyleLovelySecondary":"magritte-card-style-lovely-secondary___feuo0_7-0-0","card-hover-style-lovely-secondary":"magritte-card-hover-style-lovely-secondary___n2BrG_7-0-0","cardHoverStyleLovelySecondary":"magritte-card-hover-style-lovely-secondary___n2BrG_7-0-0","card-style-lovely":"magritte-card-style-lovely___fPKUi_7-0-0","cardStyleLovely":"magritte-card-style-lovely___fPKUi_7-0-0","card-hover-style-lovely":"magritte-card-hover-style-lovely___Ml-R2_7-0-0","cardHoverStyleLovely":"magritte-card-hover-style-lovely___Ml-R2_7-0-0","card-style-vivid-secondary":"magritte-card-style-vivid-secondary___yqwVy_7-0-0","cardStyleVividSecondary":"magritte-card-style-vivid-secondary___yqwVy_7-0-0","card-hover-style-vivid-secondary":"magritte-card-hover-style-vivid-secondary___s4GVf_7-0-0","cardHoverStyleVividSecondary":"magritte-card-hover-style-vivid-secondary___s4GVf_7-0-0","card-style-vivid":"magritte-card-style-vivid___pmSCz_7-0-0","cardStyleVivid":"magritte-card-style-vivid___pmSCz_7-0-0","card-hover-style-vivid":"magritte-card-hover-style-vivid___qyl-R_7-0-0","cardHoverStyleVivid":"magritte-card-hover-style-vivid___qyl-R_7-0-0","card-style-body":"magritte-card-style-body___TNxld_7-0-0","cardStyleBody":"magritte-card-style-body___TNxld_7-0-0","card-hover-style-body":"magritte-card-hover-style-body___pimB3_7-0-0","cardHoverStyleBody":"magritte-card-hover-style-body___pimB3_7-0-0","card-style-overlay":"magritte-card-style-overlay___urh3T_7-0-0","cardStyleOverlay":"magritte-card-style-overlay___urh3T_7-0-0","card-hover-style-overlay":"magritte-card-hover-style-overlay___rAPpl_7-0-0","cardHoverStyleOverlay":"magritte-card-hover-style-overlay___rAPpl_7-0-0","card-style-transparent":"magritte-card-style-transparent___1h3h6_7-0-0","cardStyleTransparent":"magritte-card-style-transparent___1h3h6_7-0-0","card-hover-style-transparent":"magritte-card-hover-style-transparent___zXQGl_7-0-0","cardHoverStyleTransparent":"magritte-card-hover-style-transparent___zXQGl_7-0-0","card-style-constant":"magritte-card-style-constant___UluNp_7-0-0","cardStyleConstant":"magritte-card-style-constant___UluNp_7-0-0","card-hover-style-constant":"magritte-card-hover-style-constant___uH6-E_7-0-0","cardHoverStyleConstant":"magritte-card-hover-style-constant___uH6-E_7-0-0","card-style-constant-secondary":"magritte-card-style-constant-secondary___5HctC_7-0-0","cardStyleConstantSecondary":"magritte-card-style-constant-secondary___5HctC_7-0-0","card-hover-style-constant-secondary":"magritte-card-hover-style-constant-secondary___0vxDi_7-0-0","cardHoverStyleConstantSecondary":"magritte-card-hover-style-constant-secondary___0vxDi_7-0-0","card-style-inverse":"magritte-card-style-inverse___HWOHp_7-0-0","cardStyleInverse":"magritte-card-style-inverse___HWOHp_7-0-0","card-hover-style-inverse":"magritte-card-hover-style-inverse___Db1kM_7-0-0","cardHoverStyleInverse":"magritte-card-hover-style-inverse___Db1kM_7-0-0","card-style-inverse-secondary":"magritte-card-style-inverse-secondary___3EIdn_7-0-0","cardStyleInverseSecondary":"magritte-card-style-inverse-secondary___3EIdn_7-0-0","card-hover-style-inverse-secondary":"magritte-card-hover-style-inverse-secondary___BT8I-_7-0-0","cardHoverStyleInverseSecondary":"magritte-card-hover-style-inverse-secondary___BT8I-_7-0-0","card-border-style-neutral":"magritte-card-border-style-neutral___611b0_7-0-0","cardBorderStyleNeutral":"magritte-card-border-style-neutral___611b0_7-0-0","card-border-style-phantom":"magritte-card-border-style-phantom___ezFSC_7-0-0","cardBorderStylePhantom":"magritte-card-border-style-phantom___ezFSC_7-0-0","card-border-style-overlay":"magritte-card-border-style-overlay___yOj6r_7-0-0","cardBorderStyleOverlay":"magritte-card-border-style-overlay___yOj6r_7-0-0","card-border-style-accent":"magritte-card-border-style-accent___D-2Wb_7-0-0","cardBorderStyleAccent":"magritte-card-border-style-accent___D-2Wb_7-0-0","card-border-style-positive":"magritte-card-border-style-positive___to7aa_7-0-0","cardBorderStylePositive":"magritte-card-border-style-positive___to7aa_7-0-0","card-border-style-negative":"magritte-card-border-style-negative___IenCT_7-0-0","cardBorderStyleNegative":"magritte-card-border-style-negative___IenCT_7-0-0","card-border-style-warning":"magritte-card-border-style-warning___Fax0h_7-0-0","cardBorderStyleWarning":"magritte-card-border-style-warning___Fax0h_7-0-0","card-border-style-special":"magritte-card-border-style-special___mgV7r_7-0-0","cardBorderStyleSpecial":"magritte-card-border-style-special___mgV7r_7-0-0","card-border-style-dreamy":"magritte-card-border-style-dreamy___vYIow_7-0-0","cardBorderStyleDreamy":"magritte-card-border-style-dreamy___vYIow_7-0-0","card-border-style-lovely":"magritte-card-border-style-lovely___d1dyh_7-0-0","cardBorderStyleLovely":"magritte-card-border-style-lovely___d1dyh_7-0-0","card-border-style-vivid":"magritte-card-border-style-vivid___UYrn3_7-0-0","cardBorderStyleVivid":"magritte-card-border-style-vivid___UYrn3_7-0-0"};
|
|
14
14
|
|
|
15
|
-
const
|
|
15
|
+
const borderSides = ['top-left', 'top-right', 'bottom-right', 'bottom-left'];
|
|
16
|
+
const genBorderRadiusProp = (radiusProps) => {
|
|
17
|
+
const isHalfHeight = Object.values(radiusProps).includes('halfHeight');
|
|
18
|
+
const borderRadius = isHalfHeight ? 99999 : radiusProps.borderRadius;
|
|
19
|
+
const { borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, borderBottomRightRadius } = Object.fromEntries(Object.entries(radiusProps)
|
|
20
|
+
.map((radius) => (isHalfHeight ? [radius[0], undefined] : radius))
|
|
21
|
+
.filter((radius) => radius[1] !== undefined));
|
|
22
|
+
const radius = [borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius];
|
|
23
|
+
const tableVariables = radius.reduce((acc, val, index) => val === undefined
|
|
24
|
+
? acc
|
|
25
|
+
: {
|
|
26
|
+
...acc,
|
|
27
|
+
[`--magritte-ui-table-border-radius-${borderSides[index]}`]: `${val}px`,
|
|
28
|
+
}, {});
|
|
29
|
+
return {
|
|
30
|
+
borderRadius: `${radius.map((radius) => radius ?? borderRadius).join('px ')}px`,
|
|
31
|
+
'--magritte-ui-table-border-radius': `${borderRadius}px`,
|
|
32
|
+
...tableVariables,
|
|
33
|
+
};
|
|
34
|
+
};
|
|
16
35
|
const genPaddingProps = (paddingProps) => Object.entries(paddingProps).reduce((acc, [key, value]) => (value !== undefined ? { ...acc, [`padding${key}`]: value } : acc), {});
|
|
17
|
-
const CardForwardRefRenderFunc = ({ Element = 'div', stretched = false, verticalStretched = false,
|
|
18
|
-
const isToneCard = style !== undefined;
|
|
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) => {
|
|
19
37
|
const forceDisabled = useDisabled();
|
|
20
38
|
const hasFocusRef = useRef(false);
|
|
21
39
|
const focusCallback = () => {
|
|
@@ -38,34 +56,38 @@ const CardForwardRefRenderFunc = ({ Element = 'div', stretched = false, vertical
|
|
|
38
56
|
!isEventFromInteractiveComponent(event) && onClick(event);
|
|
39
57
|
}
|
|
40
58
|
}, [onClick, disabled, forceDisabled]);
|
|
59
|
+
const isPressEnabled = pressEnabled || !!onClick;
|
|
60
|
+
const isHoverEnabled = hoverEnabled || isPressEnabled;
|
|
41
61
|
const paddingProps = genPaddingProps({
|
|
42
62
|
Left: paddingLeft,
|
|
43
63
|
Right: paddingRight,
|
|
44
64
|
Top: paddingTop,
|
|
45
65
|
Bottom: paddingBottom,
|
|
46
66
|
});
|
|
67
|
+
const radiusProps = genBorderRadiusProp({
|
|
68
|
+
borderRadius,
|
|
69
|
+
borderBottomLeftRadius,
|
|
70
|
+
borderBottomRightRadius,
|
|
71
|
+
borderTopLeftRadius,
|
|
72
|
+
borderTopRightRadius,
|
|
73
|
+
});
|
|
47
74
|
const additionalProps = {};
|
|
48
|
-
if (
|
|
75
|
+
if (isPressEnabled && !forceDisabled && !disabled) {
|
|
49
76
|
additionalProps.tabIndex = 0;
|
|
50
77
|
}
|
|
51
78
|
if (ref) {
|
|
52
79
|
additionalProps.ref = ref;
|
|
53
80
|
}
|
|
54
|
-
return (jsx(DisabledContext.Provider, { value: forceDisabled ||
|
|
55
|
-
TopLeft: borderTopLeftRadius,
|
|
56
|
-
TopRight: borderTopRightRadius,
|
|
57
|
-
BottomLeft: borderBottomLeftRadius,
|
|
58
|
-
BottomRight: borderBottomRightRadius,
|
|
59
|
-
}), {
|
|
81
|
+
return (jsx(DisabledContext.Provider, { value: forceDisabled || !!disabled, children: jsxs(Element, { ...restProps, ...additionalProps, onFocus: focusCallback, onBlur: blurCallback, onClick: activationHandler, onKeyDown: activationHandler, style: { padding, ...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}`], {
|
|
60
82
|
[styles.cardStretched]: stretched,
|
|
61
83
|
[styles.cardVerticalStretched]: verticalStretched,
|
|
62
|
-
[styles.
|
|
63
|
-
[styles.
|
|
64
|
-
[styles.
|
|
65
|
-
[styles.
|
|
66
|
-
[styles.
|
|
67
|
-
[styles.
|
|
68
|
-
}), children: jsx(IconDynamic, { stretched: true, children: jsx("div", { className: styles.flexContainer, children: jsx(TextDynamic, { stretched: true, children: children }) }) }) }) }));
|
|
84
|
+
[styles.cardPressEnabled]: isPressEnabled,
|
|
85
|
+
[styles.cardHoverEnabled]: isHoverEnabled,
|
|
86
|
+
[styles.increaseShadow]: increaseShadow,
|
|
87
|
+
[styles.cardDisabled]: !!disabled,
|
|
88
|
+
[styles.borderSelected]: borderWidth === 'selected',
|
|
89
|
+
[styles.borderDefault]: borderWidth === 'default',
|
|
90
|
+
}), children: [jsx(IconDynamic, { stretched: true, children: jsx("div", { className: styles.flexContainer, children: jsx(TextDynamic, { stretched: true, children: children }) }) }), jsx("div", { className: styles.borderElement, style: radiusProps })] }) }));
|
|
69
91
|
};
|
|
70
92
|
const CardComponent = forwardRef(CardForwardRefRenderFunc);
|
|
71
93
|
const Card = enrichWithSkeleton(CardComponent, CardSkeleton);
|
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 genBorderRadiusClasses = (radiusProps: {\n TopLeft?: CardBorderRadius;\n TopRight?: CardBorderRadius;\n BottomLeft?: CardBorderRadius;\n BottomRight?: CardBorderRadius;\n}) =>\n Object.entries(radiusProps).reduce<string[]>(\n (acc, [key, value]) =>\n value !== undefined ? [...acc, styles[`cardBorder${key as keyof typeof radiusProps}Radius${value}`]] : acc,\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 actionCard = false,\n onClick,\n style,\n hoverStyle,\n disabled = false,\n showShadow = false,\n showShadowOnHover = false,\n showBorder = 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 ...restProps\n },\n ref\n) => {\n const isToneCard = style !== undefined;\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 ) {\n !isEventFromInteractiveComponent(event) && onClick(event);\n }\n },\n [onClick, disabled, forceDisabled]\n );\n const paddingProps = genPaddingProps({\n Left: paddingLeft,\n Right: paddingRight,\n Top: paddingTop,\n Bottom: paddingBottom,\n });\n const additionalProps: Record<string, unknown> = {};\n if (actionCard && !forceDisabled && !disabled) {\n additionalProps.tabIndex = 0;\n }\n\n if (ref) {\n additionalProps.ref = ref;\n }\n\n return (\n <DisabledContext.Provider value={forceDisabled || (!!disabled && actionCard)}>\n <Element\n {...restProps}\n {...additionalProps}\n onFocus={focusCallback}\n onBlur={blurCallback}\n onClick={activationHandler}\n onKeyDown={activationHandler}\n style={{ padding, ...paddingProps }}\n className={classnames(\n styles.card,\n styles[`cardBorderRadius${borderRadius}`],\n isToneCard && styles[`card-style-${style}`],\n hoverStyle && styles[`card-hover-style-${hoverStyle}`],\n ...genBorderRadiusClasses({\n TopLeft: borderTopLeftRadius,\n TopRight: borderTopRightRadius,\n BottomLeft: borderBottomLeftRadius,\n BottomRight: borderBottomRightRadius,\n }),\n\n {\n [styles.cardStretched]: stretched,\n [styles.cardVerticalStretched]: verticalStretched,\n [styles.cardTone]: isToneCard,\n [styles.cardAction]: actionCard,\n [styles.cardShowShadow]: showShadow && !isToneCard,\n [styles.cardShadowOnHover]: showShadowOnHover && !isToneCard && actionCard,\n [styles.cardWithBorder]: showBorder,\n [styles.cardDisabled]: actionCard && !!disabled,\n }\n )}\n >\n <IconDynamic stretched>\n <div className={styles.flexContainer}>\n <TextDynamic stretched>{children}</TextDynamic>\n </div>\n </IconDynamic>\n </Element>\n </DisabledContext.Provider>\n );\n};\n\nconst CardComponent: PolymorphicComponentWithRef<CardProps, 'div'> = forwardRef(CardForwardRefRenderFunc);\n\nexport const Card = enrichWithSkeleton(CardComponent, CardSkeleton);\n"],"names":["_jsx"],"mappings":"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"}
|
|
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 ) {\n !isEventFromInteractiveComponent(event) && 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,\n Right: paddingRight,\n Top: paddingTop,\n Bottom: paddingBottom,\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 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={{ padding, ...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>\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: PolymorphicComponentWithRef<CardProps, 'div'> = forwardRef(CardForwardRefRenderFunc);\n\nexport const Card = enrichWithSkeleton(CardComponent, CardSkeleton);\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
package/Skeleton.d.ts
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
|
|
1
|
+
export declare const CardSkeleton: import("react").ForwardRefExoticComponent<import("@hh.ru/magritte-ui-card/types").CommonCardProps & {
|
|
2
|
+
children?: import("react").ReactNode | undefined;
|
|
3
|
+
} & Omit<import("@hh.ru/magritte-ui-skeleton").SkeletonProps, keyof import("@hh.ru/magritte-ui-card/types").CommonCardProps | "children"> & {
|
|
4
|
+
Component: import("react").ComponentType<import("@hh.ru/magritte-ui-card/types").CommonCardProps & {
|
|
5
|
+
children?: import("react").ReactNode | undefined;
|
|
6
|
+
} & {
|
|
7
|
+
ref?: import("react").Ref<HTMLDivElement> | undefined;
|
|
8
|
+
}>;
|
|
9
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|