@coveord/plasma-mantine 55.1.0 → 55.2.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/.turbo/turbo-build.log +3 -3
- package/.turbo/turbo-test.log +36 -35
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/child-form/ChildForm.d.ts +44 -0
- package/dist/cjs/components/child-form/ChildForm.d.ts.map +1 -0
- package/dist/cjs/components/child-form/ChildForm.js +73 -0
- package/dist/cjs/components/child-form/ChildForm.js.map +1 -0
- package/dist/cjs/components/child-form/ChildForm.module.css +7 -0
- package/dist/cjs/components/child-form/index.d.ts +2 -0
- package/dist/cjs/components/child-form/index.d.ts.map +1 -0
- package/dist/cjs/components/child-form/index.js +8 -0
- package/dist/cjs/components/child-form/index.js.map +1 -0
- package/dist/cjs/components/ellipsis-text/EllipsisText.js +2 -2
- package/dist/cjs/components/ellipsis-text/EllipsisText.js.map +1 -1
- package/dist/cjs/components/ellipsis-text/EllipsisText.module.css +5 -0
- package/dist/cjs/components/index.d.ts +1 -0
- package/dist/cjs/components/index.d.ts.map +1 -1
- package/dist/cjs/components/index.js +1 -0
- package/dist/cjs/components/index.js.map +1 -1
- package/dist/esm/components/child-form/ChildForm.d.ts +44 -0
- package/dist/esm/components/child-form/ChildForm.d.ts.map +1 -0
- package/dist/esm/components/child-form/ChildForm.js +50 -0
- package/dist/esm/components/child-form/ChildForm.js.map +1 -0
- package/dist/esm/components/child-form/ChildForm.module.css +7 -0
- package/dist/esm/components/child-form/index.d.ts +2 -0
- package/dist/esm/components/child-form/index.d.ts.map +1 -0
- package/dist/esm/components/child-form/index.js +3 -0
- package/dist/esm/components/child-form/index.js.map +1 -0
- package/dist/esm/components/ellipsis-text/EllipsisText.js +2 -2
- package/dist/esm/components/ellipsis-text/EllipsisText.js.map +1 -1
- package/dist/esm/components/ellipsis-text/EllipsisText.module.css +5 -0
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/components/index.d.ts.map +1 -1
- package/dist/esm/components/index.js +1 -0
- package/dist/esm/components/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/child-form/ChildForm.module.css +7 -0
- package/src/components/child-form/ChildForm.tsx +70 -0
- package/src/components/child-form/__tests__/ChildForm.spec.tsx +30 -0
- package/src/components/child-form/index.ts +1 -0
- package/src/components/ellipsis-text/EllipsisText.module.css +5 -0
- package/src/components/ellipsis-text/EllipsisText.tsx +2 -2
- package/src/components/index.ts +1 -0
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { CollapseProps, Factory, StylesApiProps } from '@mantine/core';
|
|
2
|
+
export type ChildFormStylesNames = 'root' | 'paper';
|
|
3
|
+
export interface ChildFormProps extends CollapseProps, StylesApiProps<ChildFormFactory> {
|
|
4
|
+
/**
|
|
5
|
+
* Title of the child form.
|
|
6
|
+
*/
|
|
7
|
+
title?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Description of the child form.
|
|
10
|
+
*/
|
|
11
|
+
description?: string;
|
|
12
|
+
}
|
|
13
|
+
type ChildFormFactory = Factory<{
|
|
14
|
+
props: ChildFormProps;
|
|
15
|
+
defaultRef: HTMLDivElement;
|
|
16
|
+
defaultComponent: 'div';
|
|
17
|
+
stylesNames: ChildFormStylesNames;
|
|
18
|
+
}>;
|
|
19
|
+
export declare const ChildForm: (<C = "div">(props: import("@mantine/core").PolymorphicComponentProps<C, ChildFormProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(ChildFormProps & {
|
|
20
|
+
component?: any;
|
|
21
|
+
} & Omit<Omit<any, "ref">, "component" | keyof ChildFormProps> & {
|
|
22
|
+
ref?: any;
|
|
23
|
+
renderRoot?: ((props: any) => any) | undefined;
|
|
24
|
+
}) | (ChildFormProps & {
|
|
25
|
+
component: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
|
|
26
|
+
renderRoot?: ((props: Record<string, any>) => any) | undefined;
|
|
27
|
+
})>, never> & import("@mantine/core/lib/core/factory/factory").ThemeExtend<{
|
|
28
|
+
props: ChildFormProps;
|
|
29
|
+
defaultRef: HTMLDivElement;
|
|
30
|
+
defaultComponent: "div";
|
|
31
|
+
stylesNames: ChildFormStylesNames;
|
|
32
|
+
}> & import("@mantine/core/lib/core/factory/factory").ComponentClasses<{
|
|
33
|
+
props: ChildFormProps;
|
|
34
|
+
defaultRef: HTMLDivElement;
|
|
35
|
+
defaultComponent: "div";
|
|
36
|
+
stylesNames: ChildFormStylesNames;
|
|
37
|
+
}> & import("@mantine/core/lib/core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
|
|
38
|
+
props: ChildFormProps;
|
|
39
|
+
defaultRef: HTMLDivElement;
|
|
40
|
+
defaultComponent: "div";
|
|
41
|
+
stylesNames: ChildFormStylesNames;
|
|
42
|
+
}>;
|
|
43
|
+
export {};
|
|
44
|
+
//# sourceMappingURL=ChildForm.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChildForm.d.ts","sourceRoot":"","sources":["../../../../src/components/child-form/ChildForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,aAAa,EACb,OAAO,EAIP,cAAc,EAKjB,MAAM,eAAe,CAAC;AAGvB,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,cAAc,CAAC,gBAAgB,CAAC;IACnF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,KAAK,gBAAgB,GAAG,OAAO,CAAC;IAC5B,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,EAAE,KAAK,CAAC;IACxB,WAAW,EAAE,oBAAoB,CAAC;CACrC,CAAC,CAAC;AAIH,eAAO,MAAM,SAAS,+FAClB,MAAE,YAAY;;;;;;sBAST,OACR,gCAEO,OAAF;;;WArBK,cAAc;gBACT,cAAc;sBACR,KAAK;iBACV,oBAAoB;;WAH1B,cAAc;gBACT,cAAc;sBACR,KAAK;iBACV,oBAAoB;;WAH1B,cAAc;gBACT,cAAc;sBACR,KAAK;iBACV,oBAAoB;EAqCnC,CAAC"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "ChildForm", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return ChildForm;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
|
|
12
|
+
var _object_spread = require("@swc/helpers/_/_object_spread");
|
|
13
|
+
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
|
|
14
|
+
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
|
|
15
|
+
var _jsxruntime = require("react/jsx-runtime");
|
|
16
|
+
var _core = require("@mantine/core");
|
|
17
|
+
var _ChildFormmodulecss = /*#__PURE__*/ _interop_require_default._(require("./ChildForm.module.css"));
|
|
18
|
+
var defaultProps = {};
|
|
19
|
+
var ChildForm = (0, _core.polymorphicFactory)(function(props, ref) {
|
|
20
|
+
var _useProps = (0, _core.useProps)('ChildForm', defaultProps, props), className = _useProps.className, children = _useProps.children, style = _useProps.style, classNames = _useProps.classNames, styles = _useProps.styles, unstyled = _useProps.unstyled, vars = _useProps.vars, title = _useProps.title, description = _useProps.description, others = _object_without_properties._(_useProps, [
|
|
21
|
+
"className",
|
|
22
|
+
"children",
|
|
23
|
+
"style",
|
|
24
|
+
"classNames",
|
|
25
|
+
"styles",
|
|
26
|
+
"unstyled",
|
|
27
|
+
"vars",
|
|
28
|
+
"title",
|
|
29
|
+
"description"
|
|
30
|
+
]);
|
|
31
|
+
var getStyles = (0, _core.useStyles)({
|
|
32
|
+
name: 'ChildForm',
|
|
33
|
+
classes: _ChildFormmodulecss.default,
|
|
34
|
+
props: props,
|
|
35
|
+
className: className,
|
|
36
|
+
style: style,
|
|
37
|
+
classNames: classNames,
|
|
38
|
+
styles: styles,
|
|
39
|
+
unstyled: unstyled,
|
|
40
|
+
vars: vars
|
|
41
|
+
});
|
|
42
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Collapse, _object_spread_props._(_object_spread._({
|
|
43
|
+
ref: ref
|
|
44
|
+
}, others, getStyles('root')), {
|
|
45
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Paper, _object_spread_props._(_object_spread._({
|
|
46
|
+
bg: "gray.0",
|
|
47
|
+
p: "md"
|
|
48
|
+
}, getStyles('paper')), {
|
|
49
|
+
children: [
|
|
50
|
+
(title || description) && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Stack, {
|
|
51
|
+
gap: 0,
|
|
52
|
+
mb: "md",
|
|
53
|
+
children: [
|
|
54
|
+
title && /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Title, {
|
|
55
|
+
order: 5,
|
|
56
|
+
children: title
|
|
57
|
+
}),
|
|
58
|
+
description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, {
|
|
59
|
+
c: "gray.7",
|
|
60
|
+
children: description
|
|
61
|
+
})
|
|
62
|
+
]
|
|
63
|
+
}),
|
|
64
|
+
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Stack, {
|
|
65
|
+
gap: "md",
|
|
66
|
+
children: children
|
|
67
|
+
})
|
|
68
|
+
]
|
|
69
|
+
}))
|
|
70
|
+
}));
|
|
71
|
+
});
|
|
72
|
+
|
|
73
|
+
//# sourceMappingURL=ChildForm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/child-form/ChildForm.tsx"],"sourcesContent":["import {\n Collapse,\n CollapseProps,\n Factory,\n Paper,\n polymorphicFactory,\n Stack,\n StylesApiProps,\n Text,\n Title,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport classes from './ChildForm.module.css';\n\nexport type ChildFormStylesNames = 'root' | 'paper';\n\nexport interface ChildFormProps extends CollapseProps, StylesApiProps<ChildFormFactory> {\n /**\n * Title of the child form.\n */\n title?: string;\n /**\n * Description of the child form.\n */\n description?: string;\n}\n\ntype ChildFormFactory = Factory<{\n props: ChildFormProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: ChildFormStylesNames;\n}>;\n\nconst defaultProps: Partial<ChildFormProps> = {};\n\nexport const ChildForm = polymorphicFactory<ChildFormFactory>((props, ref) => {\n const {className, children, style, classNames, styles, unstyled, vars, title, description, ...others} = useProps(\n 'ChildForm',\n defaultProps,\n props,\n );\n\n const getStyles = useStyles<ChildFormFactory>({\n name: 'ChildForm',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n });\n\n return (\n <Collapse ref={ref} {...others} {...getStyles('root')}>\n <Paper bg=\"gray.0\" p=\"md\" {...getStyles('paper')}>\n {(title || description) && (\n <Stack gap={0} mb=\"md\">\n {title && <Title order={5}>{title}</Title>}\n {description && <Text c=\"gray.7\">{description}</Text>}\n </Stack>\n )}\n <Stack gap=\"md\">{children}</Stack>\n </Paper>\n </Collapse>\n );\n});\n"],"names":["ChildForm","defaultProps","polymorphicFactory","props","ref","useProps","className","children","style","classNames","styles","unstyled","vars","title","description","others","getStyles","useStyles","name","classes","Collapse","Paper","bg","p","Stack","gap","mb","Title","order","Text","c"],"mappings":";;;;+BAqCaA;;;eAAAA;;;;;;;;oBAzBN;2EACa;AAsBpB,IAAMC,eAAwC,CAAC;AAExC,IAAMD,YAAYE,IAAAA,wBAAkB,EAAmB,SAACC,OAAOC;IAClE,IAAwGC,YAAAA,IAAAA,cAAQ,EAC5G,aACAJ,cACAE,QAHGG,YAAiGD,UAAjGC,WAAWC,WAAsFF,UAAtFE,UAAUC,QAA4EH,UAA5EG,OAAOC,aAAqEJ,UAArEI,YAAYC,SAAyDL,UAAzDK,QAAQC,WAAiDN,UAAjDM,UAAUC,OAAuCP,UAAvCO,MAAMC,QAAiCR,UAAjCQ,OAAOC,cAA0BT,UAA1BS,aAAgBC,sCAAUV;QAAjGC;QAAWC;QAAUC;QAAOC;QAAYC;QAAQC;QAAUC;QAAMC;QAAOC;;IAM9E,IAAME,YAAYC,IAAAA,eAAS,EAAmB;QAC1CC,MAAM;QACNC,SAAAA,2BAAO;QACPhB,OAAAA;QACAG,WAAAA;QACAE,OAAAA;QACAC,YAAAA;QACAC,QAAAA;QACAC,UAAAA;QACAC,MAAAA;IACJ;IAEA,qBACI,qBAACQ,cAAQ;QAAChB,KAAKA;OAASW,QAAYC,UAAU;kBAC1C,cAAA,sBAACK,WAAK;YAACC,IAAG;YAASC,GAAE;WAASP,UAAU;;gBAClCH,CAAAA,SAASC,WAAU,mBACjB,sBAACU,WAAK;oBAACC,KAAK;oBAAGC,IAAG;;wBACbb,uBAAS,qBAACc,WAAK;4BAACC,OAAO;sCAAIf;;wBAC3BC,6BAAe,qBAACe,UAAI;4BAACC,GAAE;sCAAUhB;;;;8BAG1C,qBAACU,WAAK;oBAACC,KAAI;8BAAMlB;;;;;AAIjC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/child-form/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/child-form/index.ts"],"sourcesContent":["export * from './ChildForm';\n"],"names":[],"mappings":";;;;;uBAAc"}
|
|
@@ -62,8 +62,6 @@ var EllipsisText = (0, _core.polymorphicFactory)(function(props, ref) {
|
|
|
62
62
|
onMouseLeave: function() {
|
|
63
63
|
return setShowTooltip(false);
|
|
64
64
|
},
|
|
65
|
-
display: "flex",
|
|
66
|
-
w: "100%",
|
|
67
65
|
className: (0, _clsx.default)(rootClass, _define_property._({}, _EllipsisTextmodulecss.default.noWrap, !lineClamp))
|
|
68
66
|
}, rootStyles, others), {
|
|
69
67
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, _object_spread_props._(_object_spread._({
|
|
@@ -71,6 +69,8 @@ var EllipsisText = (0, _core.polymorphicFactory)(function(props, ref) {
|
|
|
71
69
|
opened: showTooltip
|
|
72
70
|
}, tooltipProps, getStyles('tooltip')), {
|
|
73
71
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, _object_spread_props._(_object_spread._({
|
|
72
|
+
span: true,
|
|
73
|
+
inherit: true,
|
|
74
74
|
variant: variant,
|
|
75
75
|
ref: textRef,
|
|
76
76
|
className: (0, _clsx.default)(textClass, _define_property._({}, _EllipsisTextmodulecss.default.ellipsis, !lineClamp))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ellipsis-text/EllipsisText.tsx"],"sourcesContent":["import {\n Box,\n type BoxProps,\n type Factory,\n polymorphicFactory,\n type StylesApiProps,\n Text,\n type TextProps,\n Tooltip,\n type TooltipProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {ReactNode, useRef, useState} from 'react';\nimport clsx from 'clsx';\nimport classes from './EllipsisText.module.css';\n\nexport type EllipsisTextStylesNames = 'root' | 'tooltip' | 'text';\n\nexport interface EllipsisTextProps\n extends BoxProps,\n Pick<TextProps, 'variant' | 'lineClamp'>,\n Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {\n children: ReactNode;\n tooltipProps?: Partial<Omit<TooltipProps, 'label' | 'opened' | 'children'>>;\n}\n\ntype EllipsisTextFactory = Factory<{\n props: EllipsisTextProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: EllipsisTextStylesNames;\n}>;\n\nconst defaultProps: Partial<EllipsisTextProps> = {\n tooltipProps: {},\n};\n\nexport const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref) => {\n const {className, children, style, classNames, styles, unstyled, variant, lineClamp, tooltipProps, ...others} =\n useProps('EllipsisText', defaultProps, props);\n\n const getStyles = useStyles<EllipsisTextFactory>({\n name: 'EllipsisText',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n\n const [showTooltip, setShowTooltip] = useState(false);\n const textRef = useRef<HTMLDivElement>();\n\n const {className: rootClass, ...rootStyles} = getStyles('root');\n const {className: textClass, ...textStyles} = getStyles('text');\n\n return (\n <Box\n ref={ref}\n onMouseEnter={() => {\n if (textRef.current && isOverflowing(textRef.current)) {\n setShowTooltip(true);\n }\n }}\n onMouseLeave={() => setShowTooltip(false)}\n
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ellipsis-text/EllipsisText.tsx"],"sourcesContent":["import {\n Box,\n type BoxProps,\n type Factory,\n polymorphicFactory,\n type StylesApiProps,\n Text,\n type TextProps,\n Tooltip,\n type TooltipProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {ReactNode, useRef, useState} from 'react';\nimport clsx from 'clsx';\nimport classes from './EllipsisText.module.css';\n\nexport type EllipsisTextStylesNames = 'root' | 'tooltip' | 'text';\n\nexport interface EllipsisTextProps\n extends BoxProps,\n Pick<TextProps, 'variant' | 'lineClamp'>,\n Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {\n children: ReactNode;\n tooltipProps?: Partial<Omit<TooltipProps, 'label' | 'opened' | 'children'>>;\n}\n\ntype EllipsisTextFactory = Factory<{\n props: EllipsisTextProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: EllipsisTextStylesNames;\n}>;\n\nconst defaultProps: Partial<EllipsisTextProps> = {\n tooltipProps: {},\n};\n\nexport const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref) => {\n const {className, children, style, classNames, styles, unstyled, variant, lineClamp, tooltipProps, ...others} =\n useProps('EllipsisText', defaultProps, props);\n\n const getStyles = useStyles<EllipsisTextFactory>({\n name: 'EllipsisText',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n\n const [showTooltip, setShowTooltip] = useState(false);\n const textRef = useRef<HTMLDivElement>();\n\n const {className: rootClass, ...rootStyles} = getStyles('root');\n const {className: textClass, ...textStyles} = getStyles('text');\n\n return (\n <Box\n ref={ref}\n onMouseEnter={() => {\n if (textRef.current && isOverflowing(textRef.current)) {\n setShowTooltip(true);\n }\n }}\n onMouseLeave={() => setShowTooltip(false)}\n className={clsx(rootClass, {[classes.noWrap]: !lineClamp})}\n {...rootStyles}\n {...others}\n >\n <Tooltip label={children} opened={showTooltip} {...tooltipProps} {...getStyles('tooltip')}>\n <Text\n span\n inherit\n variant={variant}\n ref={textRef}\n className={clsx(textClass, {[classes.ellipsis]: !lineClamp})}\n {...(!!lineClamp && {lineClamp: lineClamp})}\n {...textStyles}\n >\n {children}\n </Text>\n </Tooltip>\n </Box>\n );\n});\n\nconst isOverflowing = (h: HTMLDivElement) => h.scrollWidth > h.clientWidth || h.scrollHeight > h.clientHeight;\n"],"names":["EllipsisText","defaultProps","tooltipProps","polymorphicFactory","props","ref","useProps","className","children","style","classNames","styles","unstyled","variant","lineClamp","others","getStyles","useStyles","name","classes","useState","showTooltip","setShowTooltip","textRef","useRef","rootClass","rootStyles","textClass","textStyles","Box","onMouseEnter","current","isOverflowing","onMouseLeave","clsx","noWrap","Tooltip","label","opened","Text","span","inherit","ellipsis","h","scrollWidth","clientWidth","scrollHeight","clientHeight"],"mappings":";;;;+BAsCaA;;;eAAAA;;;;;;;;;;oBA1BN;qBACmC;6DACzB;8EACG;AAmBpB,IAAMC,eAA2C;IAC7CC,cAAc,CAAC;AACnB;AAEO,IAAMF,eAAeG,IAAAA,wBAAkB,EAAsB,SAACC,OAAOC;IACxE,IACIC,YAAAA,IAAAA,cAAQ,EAAC,gBAAgBL,cAAcG,QADpCG,YACHD,UADGC,WAAWC,WACdF,UADcE,UAAUC,QACxBH,UADwBG,OAAOC,aAC/BJ,UAD+BI,YAAYC,SAC3CL,UAD2CK,QAAQC,WACnDN,UADmDM,UAAUC,UAC7DP,UAD6DO,SAASC,YACtER,UADsEQ,WAAWZ,eACjFI,UADiFJ,cAAiBa,sCAClGT;QADGC;QAAWC;QAAUC;QAAOC;QAAYC;QAAQC;QAAUC;QAASC;QAAWZ;;IAGrF,IAAMc,YAAYC,IAAAA,eAAS,EAAsB;QAC7CC,MAAM;QACNC,SAAAA,8BAAO;QACPf,OAAAA;QACAG,WAAAA;QACAE,OAAAA;QACAC,YAAAA;QACAC,QAAAA;QACAC,UAAAA;IACJ;IAEA,IAAsCQ,+BAAAA,IAAAA,eAAQ,EAAC,YAAxCC,cAA+BD,cAAlBE,iBAAkBF;IACtC,IAAMG,UAAUC,IAAAA,aAAM;IAEtB,IAA8CR,aAAAA,UAAU,SAAjDT,AAAWkB,YAA4BT,WAAvCT,WAAyBmB,0CAAcV;QAAvCT;;IACP,IAA8CS,cAAAA,UAAU,SAAjDT,AAAWoB,YAA4BX,YAAvCT,WAAyBqB,0CAAcZ;QAAvCT;;IAEP,qBACI,qBAACsB,SAAG;QACAxB,KAAKA;QACLyB,cAAc;YACV,IAAIP,QAAQQ,OAAO,IAAIC,cAAcT,QAAQQ,OAAO,GAAG;gBACnDT,eAAe;YACnB;QACJ;QACAW,cAAc;mBAAMX,eAAe;;QACnCf,WAAW2B,IAAAA,aAAI,EAACT,WAAY,uBAACN,8BAAO,CAACgB,MAAM,EAAG,CAACrB;OAC3CY,YACAX;kBAEJ,cAAA,qBAACqB,aAAO;YAACC,OAAO7B;YAAU8B,QAAQjB;WAAiBnB,cAAkBc,UAAU;sBAC3E,cAAA,qBAACuB,UAAI;gBACDC,IAAI;gBACJC,OAAO;gBACP5B,SAASA;gBACTR,KAAKkB;gBACLhB,WAAW2B,IAAAA,aAAI,EAACP,WAAY,uBAACR,8BAAO,CAACuB,QAAQ,EAAG,CAAC5B;eAC5C,CAAC,CAACA,aAAa;gBAACA,WAAWA;YAAS,GACrCc;0BAEHpB;;;;AAKrB;AAEA,IAAMwB,gBAAgB,SAACW;WAAsBA,EAAEC,WAAW,GAAGD,EAAEE,WAAW,IAAIF,EAAEG,YAAY,GAAGH,EAAEI,YAAY"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}
|
|
@@ -19,5 +19,6 @@ _export_star._(require("./prompt"), exports);
|
|
|
19
19
|
_export_star._(require("./read-only"), exports);
|
|
20
20
|
_export_star._(require("./sticky-footer"), exports);
|
|
21
21
|
_export_star._(require("./table"), exports);
|
|
22
|
+
_export_star._(require("./child-form"), exports);
|
|
22
23
|
|
|
23
24
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './action-icon';\nexport * from './blank-slate';\nexport * from './browser-preview';\nexport * from './button';\nexport * from './code-editor';\nexport * from './collection';\nexport * from './copyToClipboard';\nexport * from './date-range-picker';\nexport * from './ellipsis-text';\nexport * from './header';\nexport * from './inline-confirm';\nexport * from './menu';\nexport * from './prompt';\nexport * from './read-only';\nexport * from './sticky-footer';\nexport * from './table';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './action-icon';\nexport * from './blank-slate';\nexport * from './browser-preview';\nexport * from './button';\nexport * from './code-editor';\nexport * from './collection';\nexport * from './copyToClipboard';\nexport * from './date-range-picker';\nexport * from './ellipsis-text';\nexport * from './header';\nexport * from './inline-confirm';\nexport * from './menu';\nexport * from './prompt';\nexport * from './read-only';\nexport * from './sticky-footer';\nexport * from './table';\nexport * from './child-form';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { CollapseProps, Factory, StylesApiProps } from '@mantine/core';
|
|
2
|
+
export type ChildFormStylesNames = 'root' | 'paper';
|
|
3
|
+
export interface ChildFormProps extends CollapseProps, StylesApiProps<ChildFormFactory> {
|
|
4
|
+
/**
|
|
5
|
+
* Title of the child form.
|
|
6
|
+
*/
|
|
7
|
+
title?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Description of the child form.
|
|
10
|
+
*/
|
|
11
|
+
description?: string;
|
|
12
|
+
}
|
|
13
|
+
type ChildFormFactory = Factory<{
|
|
14
|
+
props: ChildFormProps;
|
|
15
|
+
defaultRef: HTMLDivElement;
|
|
16
|
+
defaultComponent: 'div';
|
|
17
|
+
stylesNames: ChildFormStylesNames;
|
|
18
|
+
}>;
|
|
19
|
+
export declare const ChildForm: (<C = "div">(props: import("@mantine/core").PolymorphicComponentProps<C, ChildFormProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(ChildFormProps & {
|
|
20
|
+
component?: any;
|
|
21
|
+
} & Omit<Omit<any, "ref">, "component" | keyof ChildFormProps> & {
|
|
22
|
+
ref?: any;
|
|
23
|
+
renderRoot?: ((props: any) => any) | undefined;
|
|
24
|
+
}) | (ChildFormProps & {
|
|
25
|
+
component: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>;
|
|
26
|
+
renderRoot?: ((props: Record<string, any>) => any) | undefined;
|
|
27
|
+
})>, never> & import("@mantine/core/lib/core/factory/factory").ThemeExtend<{
|
|
28
|
+
props: ChildFormProps;
|
|
29
|
+
defaultRef: HTMLDivElement;
|
|
30
|
+
defaultComponent: "div";
|
|
31
|
+
stylesNames: ChildFormStylesNames;
|
|
32
|
+
}> & import("@mantine/core/lib/core/factory/factory").ComponentClasses<{
|
|
33
|
+
props: ChildFormProps;
|
|
34
|
+
defaultRef: HTMLDivElement;
|
|
35
|
+
defaultComponent: "div";
|
|
36
|
+
stylesNames: ChildFormStylesNames;
|
|
37
|
+
}> & import("@mantine/core/lib/core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
|
|
38
|
+
props: ChildFormProps;
|
|
39
|
+
defaultRef: HTMLDivElement;
|
|
40
|
+
defaultComponent: "div";
|
|
41
|
+
stylesNames: ChildFormStylesNames;
|
|
42
|
+
}>;
|
|
43
|
+
export {};
|
|
44
|
+
//# sourceMappingURL=ChildForm.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChildForm.d.ts","sourceRoot":"","sources":["../../../../src/components/child-form/ChildForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,aAAa,EACb,OAAO,EAIP,cAAc,EAKjB,MAAM,eAAe,CAAC;AAGvB,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,cAAc,CAAC,gBAAgB,CAAC;IACnF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,KAAK,gBAAgB,GAAG,OAAO,CAAC;IAC5B,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,EAAE,KAAK,CAAC;IACxB,WAAW,EAAE,oBAAoB,CAAC;CACrC,CAAC,CAAC;AAIH,eAAO,MAAM,SAAS,+FAClB,MAAE,YAAY;;;;;;sBAST,OACR,gCAEO,OAAF;;;WArBK,cAAc;gBACT,cAAc;sBACR,KAAK;iBACV,oBAAoB;;WAH1B,cAAc;gBACT,cAAc;sBACR,KAAK;iBACV,oBAAoB;;WAH1B,cAAc;gBACT,cAAc;sBACR,KAAK;iBACV,oBAAoB;EAqCnC,CAAC"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Collapse, Paper, polymorphicFactory, Stack, Text, Title, useProps, useStyles } from '@mantine/core';
|
|
3
|
+
import classes from './ChildForm.module.css';
|
|
4
|
+
const defaultProps = {};
|
|
5
|
+
export const ChildForm = polymorphicFactory((props, ref)=>{
|
|
6
|
+
const { className, children, style, classNames, styles, unstyled, vars, title, description, ...others } = useProps('ChildForm', defaultProps, props);
|
|
7
|
+
const getStyles = useStyles({
|
|
8
|
+
name: 'ChildForm',
|
|
9
|
+
classes,
|
|
10
|
+
props,
|
|
11
|
+
className,
|
|
12
|
+
style,
|
|
13
|
+
classNames,
|
|
14
|
+
styles,
|
|
15
|
+
unstyled,
|
|
16
|
+
vars
|
|
17
|
+
});
|
|
18
|
+
return /*#__PURE__*/ _jsx(Collapse, {
|
|
19
|
+
ref: ref,
|
|
20
|
+
...others,
|
|
21
|
+
...getStyles('root'),
|
|
22
|
+
children: /*#__PURE__*/ _jsxs(Paper, {
|
|
23
|
+
bg: "gray.0",
|
|
24
|
+
p: "md",
|
|
25
|
+
...getStyles('paper'),
|
|
26
|
+
children: [
|
|
27
|
+
(title || description) && /*#__PURE__*/ _jsxs(Stack, {
|
|
28
|
+
gap: 0,
|
|
29
|
+
mb: "md",
|
|
30
|
+
children: [
|
|
31
|
+
title && /*#__PURE__*/ _jsx(Title, {
|
|
32
|
+
order: 5,
|
|
33
|
+
children: title
|
|
34
|
+
}),
|
|
35
|
+
description && /*#__PURE__*/ _jsx(Text, {
|
|
36
|
+
c: "gray.7",
|
|
37
|
+
children: description
|
|
38
|
+
})
|
|
39
|
+
]
|
|
40
|
+
}),
|
|
41
|
+
/*#__PURE__*/ _jsx(Stack, {
|
|
42
|
+
gap: "md",
|
|
43
|
+
children: children
|
|
44
|
+
})
|
|
45
|
+
]
|
|
46
|
+
})
|
|
47
|
+
});
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
//# sourceMappingURL=ChildForm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/child-form/ChildForm.tsx"],"sourcesContent":["import {\n Collapse,\n CollapseProps,\n Factory,\n Paper,\n polymorphicFactory,\n Stack,\n StylesApiProps,\n Text,\n Title,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport classes from './ChildForm.module.css';\n\nexport type ChildFormStylesNames = 'root' | 'paper';\n\nexport interface ChildFormProps extends CollapseProps, StylesApiProps<ChildFormFactory> {\n /**\n * Title of the child form.\n */\n title?: string;\n /**\n * Description of the child form.\n */\n description?: string;\n}\n\ntype ChildFormFactory = Factory<{\n props: ChildFormProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: ChildFormStylesNames;\n}>;\n\nconst defaultProps: Partial<ChildFormProps> = {};\n\nexport const ChildForm = polymorphicFactory<ChildFormFactory>((props, ref) => {\n const {className, children, style, classNames, styles, unstyled, vars, title, description, ...others} = useProps(\n 'ChildForm',\n defaultProps,\n props,\n );\n\n const getStyles = useStyles<ChildFormFactory>({\n name: 'ChildForm',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n });\n\n return (\n <Collapse ref={ref} {...others} {...getStyles('root')}>\n <Paper bg=\"gray.0\" p=\"md\" {...getStyles('paper')}>\n {(title || description) && (\n <Stack gap={0} mb=\"md\">\n {title && <Title order={5}>{title}</Title>}\n {description && <Text c=\"gray.7\">{description}</Text>}\n </Stack>\n )}\n <Stack gap=\"md\">{children}</Stack>\n </Paper>\n </Collapse>\n );\n});\n"],"names":["Collapse","Paper","polymorphicFactory","Stack","Text","Title","useProps","useStyles","classes","defaultProps","ChildForm","props","ref","className","children","style","classNames","styles","unstyled","vars","title","description","others","getStyles","name","bg","p","gap","mb","order","c"],"mappings":";AAAA,SACIA,QAAQ,EAGRC,KAAK,EACLC,kBAAkB,EAClBC,KAAK,EAELC,IAAI,EACJC,KAAK,EACLC,QAAQ,EACRC,SAAS,QACN,gBAAgB;AACvB,OAAOC,aAAa,yBAAyB;AAsB7C,MAAMC,eAAwC,CAAC;AAE/C,OAAO,MAAMC,YAAYR,mBAAqC,CAACS,OAAOC;IAClE,MAAM,EAACC,SAAS,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAEC,WAAW,EAAE,GAAGC,QAAO,GAAGhB,SACpG,aACAG,cACAE;IAGJ,MAAMY,YAAYhB,UAA4B;QAC1CiB,MAAM;QACNhB;QACAG;QACAE;QACAE;QACAC;QACAC;QACAC;QACAC;IACJ;IAEA,qBACI,KAACnB;QAASY,KAAKA;QAAM,GAAGU,MAAM;QAAG,GAAGC,UAAU,OAAO;kBACjD,cAAA,MAACtB;YAAMwB,IAAG;YAASC,GAAE;YAAM,GAAGH,UAAU,QAAQ;;gBAC1CH,CAAAA,SAASC,WAAU,mBACjB,MAAClB;oBAAMwB,KAAK;oBAAGC,IAAG;;wBACbR,uBAAS,KAACf;4BAAMwB,OAAO;sCAAIT;;wBAC3BC,6BAAe,KAACjB;4BAAK0B,GAAE;sCAAUT;;;;8BAG1C,KAAClB;oBAAMwB,KAAI;8BAAMb;;;;;AAIjC,GAAG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/child-form/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/child-form/index.ts"],"sourcesContent":["export * from './ChildForm';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc"}
|
|
@@ -30,8 +30,6 @@ export const EllipsisText = polymorphicFactory((props, ref)=>{
|
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
32
|
onMouseLeave: ()=>setShowTooltip(false),
|
|
33
|
-
display: "flex",
|
|
34
|
-
w: "100%",
|
|
35
33
|
className: clsx(rootClass, {
|
|
36
34
|
[classes.noWrap]: !lineClamp
|
|
37
35
|
}),
|
|
@@ -43,6 +41,8 @@ export const EllipsisText = polymorphicFactory((props, ref)=>{
|
|
|
43
41
|
...tooltipProps,
|
|
44
42
|
...getStyles('tooltip'),
|
|
45
43
|
children: /*#__PURE__*/ _jsx(Text, {
|
|
44
|
+
span: true,
|
|
45
|
+
inherit: true,
|
|
46
46
|
variant: variant,
|
|
47
47
|
ref: textRef,
|
|
48
48
|
className: clsx(textClass, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ellipsis-text/EllipsisText.tsx"],"sourcesContent":["import {\n Box,\n type BoxProps,\n type Factory,\n polymorphicFactory,\n type StylesApiProps,\n Text,\n type TextProps,\n Tooltip,\n type TooltipProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {ReactNode, useRef, useState} from 'react';\nimport clsx from 'clsx';\nimport classes from './EllipsisText.module.css';\n\nexport type EllipsisTextStylesNames = 'root' | 'tooltip' | 'text';\n\nexport interface EllipsisTextProps\n extends BoxProps,\n Pick<TextProps, 'variant' | 'lineClamp'>,\n Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {\n children: ReactNode;\n tooltipProps?: Partial<Omit<TooltipProps, 'label' | 'opened' | 'children'>>;\n}\n\ntype EllipsisTextFactory = Factory<{\n props: EllipsisTextProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: EllipsisTextStylesNames;\n}>;\n\nconst defaultProps: Partial<EllipsisTextProps> = {\n tooltipProps: {},\n};\n\nexport const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref) => {\n const {className, children, style, classNames, styles, unstyled, variant, lineClamp, tooltipProps, ...others} =\n useProps('EllipsisText', defaultProps, props);\n\n const getStyles = useStyles<EllipsisTextFactory>({\n name: 'EllipsisText',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n\n const [showTooltip, setShowTooltip] = useState(false);\n const textRef = useRef<HTMLDivElement>();\n\n const {className: rootClass, ...rootStyles} = getStyles('root');\n const {className: textClass, ...textStyles} = getStyles('text');\n\n return (\n <Box\n ref={ref}\n onMouseEnter={() => {\n if (textRef.current && isOverflowing(textRef.current)) {\n setShowTooltip(true);\n }\n }}\n onMouseLeave={() => setShowTooltip(false)}\n
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ellipsis-text/EllipsisText.tsx"],"sourcesContent":["import {\n Box,\n type BoxProps,\n type Factory,\n polymorphicFactory,\n type StylesApiProps,\n Text,\n type TextProps,\n Tooltip,\n type TooltipProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport {ReactNode, useRef, useState} from 'react';\nimport clsx from 'clsx';\nimport classes from './EllipsisText.module.css';\n\nexport type EllipsisTextStylesNames = 'root' | 'tooltip' | 'text';\n\nexport interface EllipsisTextProps\n extends BoxProps,\n Pick<TextProps, 'variant' | 'lineClamp'>,\n Omit<StylesApiProps<EllipsisTextFactory>, 'variant'> {\n children: ReactNode;\n tooltipProps?: Partial<Omit<TooltipProps, 'label' | 'opened' | 'children'>>;\n}\n\ntype EllipsisTextFactory = Factory<{\n props: EllipsisTextProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: EllipsisTextStylesNames;\n}>;\n\nconst defaultProps: Partial<EllipsisTextProps> = {\n tooltipProps: {},\n};\n\nexport const EllipsisText = polymorphicFactory<EllipsisTextFactory>((props, ref) => {\n const {className, children, style, classNames, styles, unstyled, variant, lineClamp, tooltipProps, ...others} =\n useProps('EllipsisText', defaultProps, props);\n\n const getStyles = useStyles<EllipsisTextFactory>({\n name: 'EllipsisText',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n });\n\n const [showTooltip, setShowTooltip] = useState(false);\n const textRef = useRef<HTMLDivElement>();\n\n const {className: rootClass, ...rootStyles} = getStyles('root');\n const {className: textClass, ...textStyles} = getStyles('text');\n\n return (\n <Box\n ref={ref}\n onMouseEnter={() => {\n if (textRef.current && isOverflowing(textRef.current)) {\n setShowTooltip(true);\n }\n }}\n onMouseLeave={() => setShowTooltip(false)}\n className={clsx(rootClass, {[classes.noWrap]: !lineClamp})}\n {...rootStyles}\n {...others}\n >\n <Tooltip label={children} opened={showTooltip} {...tooltipProps} {...getStyles('tooltip')}>\n <Text\n span\n inherit\n variant={variant}\n ref={textRef}\n className={clsx(textClass, {[classes.ellipsis]: !lineClamp})}\n {...(!!lineClamp && {lineClamp: lineClamp})}\n {...textStyles}\n >\n {children}\n </Text>\n </Tooltip>\n </Box>\n );\n});\n\nconst isOverflowing = (h: HTMLDivElement) => h.scrollWidth > h.clientWidth || h.scrollHeight > h.clientHeight;\n"],"names":["Box","polymorphicFactory","Text","Tooltip","useProps","useStyles","useRef","useState","clsx","classes","defaultProps","tooltipProps","EllipsisText","props","ref","className","children","style","classNames","styles","unstyled","variant","lineClamp","others","getStyles","name","showTooltip","setShowTooltip","textRef","rootClass","rootStyles","textClass","textStyles","onMouseEnter","current","isOverflowing","onMouseLeave","noWrap","label","opened","span","inherit","ellipsis","h","scrollWidth","clientWidth","scrollHeight","clientHeight"],"mappings":";AAAA,SACIA,GAAG,EAGHC,kBAAkB,EAElBC,IAAI,EAEJC,OAAO,EAEPC,QAAQ,EACRC,SAAS,QACN,gBAAgB;AACvB,SAAmBC,MAAM,EAAEC,QAAQ,QAAO,QAAQ;AAClD,OAAOC,UAAU,OAAO;AACxB,OAAOC,aAAa,4BAA4B;AAmBhD,MAAMC,eAA2C;IAC7CC,cAAc,CAAC;AACnB;AAEA,OAAO,MAAMC,eAAeX,mBAAwC,CAACY,OAAOC;IACxE,MAAM,EAACC,SAAS,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,SAAS,EAAEX,YAAY,EAAE,GAAGY,QAAO,GACzGnB,SAAS,gBAAgBM,cAAcG;IAE3C,MAAMW,YAAYnB,UAA+B;QAC7CoB,MAAM;QACNhB;QACAI;QACAE;QACAE;QACAC;QACAC;QACAC;IACJ;IAEA,MAAM,CAACM,aAAaC,eAAe,GAAGpB,SAAS;IAC/C,MAAMqB,UAAUtB;IAEhB,MAAM,EAACS,WAAWc,SAAS,EAAE,GAAGC,YAAW,GAAGN,UAAU;IACxD,MAAM,EAACT,WAAWgB,SAAS,EAAE,GAAGC,YAAW,GAAGR,UAAU;IAExD,qBACI,KAACxB;QACGc,KAAKA;QACLmB,cAAc;YACV,IAAIL,QAAQM,OAAO,IAAIC,cAAcP,QAAQM,OAAO,GAAG;gBACnDP,eAAe;YACnB;QACJ;QACAS,cAAc,IAAMT,eAAe;QACnCZ,WAAWP,KAAKqB,WAAW;YAAC,CAACpB,QAAQ4B,MAAM,CAAC,EAAE,CAACf;QAAS;QACvD,GAAGQ,UAAU;QACb,GAAGP,MAAM;kBAEV,cAAA,KAACpB;YAAQmC,OAAOtB;YAAUuB,QAAQb;YAAc,GAAGf,YAAY;YAAG,GAAGa,UAAU,UAAU;sBACrF,cAAA,KAACtB;gBACGsC,IAAI;gBACJC,OAAO;gBACPpB,SAASA;gBACTP,KAAKc;gBACLb,WAAWP,KAAKuB,WAAW;oBAAC,CAACtB,QAAQiC,QAAQ,CAAC,EAAE,CAACpB;gBAAS;gBACzD,GAAI,CAAC,CAACA,aAAa;oBAACA,WAAWA;gBAAS,CAAC;gBACzC,GAAGU,UAAU;0BAEbhB;;;;AAKrB,GAAG;AAEH,MAAMmB,gBAAgB,CAACQ,IAAsBA,EAAEC,WAAW,GAAGD,EAAEE,WAAW,IAAIF,EAAEG,YAAY,GAAGH,EAAEI,YAAY"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './action-icon';\nexport * from './blank-slate';\nexport * from './browser-preview';\nexport * from './button';\nexport * from './code-editor';\nexport * from './collection';\nexport * from './copyToClipboard';\nexport * from './date-range-picker';\nexport * from './ellipsis-text';\nexport * from './header';\nexport * from './inline-confirm';\nexport * from './menu';\nexport * from './prompt';\nexport * from './read-only';\nexport * from './sticky-footer';\nexport * from './table';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB;AAClC,cAAc,WAAW;AACzB,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,oBAAoB;AAClC,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,WAAW;AACzB,cAAc,mBAAmB;AACjC,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,UAAU"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './action-icon';\nexport * from './blank-slate';\nexport * from './browser-preview';\nexport * from './button';\nexport * from './code-editor';\nexport * from './collection';\nexport * from './copyToClipboard';\nexport * from './date-range-picker';\nexport * from './ellipsis-text';\nexport * from './header';\nexport * from './inline-confirm';\nexport * from './menu';\nexport * from './prompt';\nexport * from './read-only';\nexport * from './sticky-footer';\nexport * from './table';\nexport * from './child-form';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB;AAClC,cAAc,WAAW;AACzB,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,oBAAoB;AAClC,cAAc,sBAAsB;AACpC,cAAc,kBAAkB;AAChC,cAAc,WAAW;AACzB,cAAc,mBAAmB;AACjC,cAAc,SAAS;AACvB,cAAc,WAAW;AACzB,cAAc,cAAc;AAC5B,cAAc,kBAAkB;AAChC,cAAc,UAAU;AACxB,cAAc,eAAe"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coveord/plasma-mantine",
|
|
3
|
-
"version": "55.
|
|
3
|
+
"version": "55.2.0",
|
|
4
4
|
"description": "A Plasma flavoured Mantine theme",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"plasma",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
"lodash.debounce": "4.0.8",
|
|
43
43
|
"lodash.defaultsdeep": "4.6.1",
|
|
44
44
|
"monaco-editor": "0.52.0",
|
|
45
|
-
"@coveord/plasma-react-icons": "55.0
|
|
46
|
-
"@coveord/plasma-tokens": "55.0
|
|
45
|
+
"@coveord/plasma-react-icons": "55.2.0",
|
|
46
|
+
"@coveord/plasma-tokens": "55.2.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@mantine/carousel": "7.13.3",
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Collapse,
|
|
3
|
+
CollapseProps,
|
|
4
|
+
Factory,
|
|
5
|
+
Paper,
|
|
6
|
+
polymorphicFactory,
|
|
7
|
+
Stack,
|
|
8
|
+
StylesApiProps,
|
|
9
|
+
Text,
|
|
10
|
+
Title,
|
|
11
|
+
useProps,
|
|
12
|
+
useStyles,
|
|
13
|
+
} from '@mantine/core';
|
|
14
|
+
import classes from './ChildForm.module.css';
|
|
15
|
+
|
|
16
|
+
export type ChildFormStylesNames = 'root' | 'paper';
|
|
17
|
+
|
|
18
|
+
export interface ChildFormProps extends CollapseProps, StylesApiProps<ChildFormFactory> {
|
|
19
|
+
/**
|
|
20
|
+
* Title of the child form.
|
|
21
|
+
*/
|
|
22
|
+
title?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Description of the child form.
|
|
25
|
+
*/
|
|
26
|
+
description?: string;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
type ChildFormFactory = Factory<{
|
|
30
|
+
props: ChildFormProps;
|
|
31
|
+
defaultRef: HTMLDivElement;
|
|
32
|
+
defaultComponent: 'div';
|
|
33
|
+
stylesNames: ChildFormStylesNames;
|
|
34
|
+
}>;
|
|
35
|
+
|
|
36
|
+
const defaultProps: Partial<ChildFormProps> = {};
|
|
37
|
+
|
|
38
|
+
export const ChildForm = polymorphicFactory<ChildFormFactory>((props, ref) => {
|
|
39
|
+
const {className, children, style, classNames, styles, unstyled, vars, title, description, ...others} = useProps(
|
|
40
|
+
'ChildForm',
|
|
41
|
+
defaultProps,
|
|
42
|
+
props,
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
const getStyles = useStyles<ChildFormFactory>({
|
|
46
|
+
name: 'ChildForm',
|
|
47
|
+
classes,
|
|
48
|
+
props,
|
|
49
|
+
className,
|
|
50
|
+
style,
|
|
51
|
+
classNames,
|
|
52
|
+
styles,
|
|
53
|
+
unstyled,
|
|
54
|
+
vars,
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<Collapse ref={ref} {...others} {...getStyles('root')}>
|
|
59
|
+
<Paper bg="gray.0" p="md" {...getStyles('paper')}>
|
|
60
|
+
{(title || description) && (
|
|
61
|
+
<Stack gap={0} mb="md">
|
|
62
|
+
{title && <Title order={5}>{title}</Title>}
|
|
63
|
+
{description && <Text c="gray.7">{description}</Text>}
|
|
64
|
+
</Stack>
|
|
65
|
+
)}
|
|
66
|
+
<Stack gap="md">{children}</Stack>
|
|
67
|
+
</Paper>
|
|
68
|
+
</Collapse>
|
|
69
|
+
);
|
|
70
|
+
});
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import {TextInput} from '@mantine/core';
|
|
2
|
+
import {render, screen} from '../../../__tests__/Utils';
|
|
3
|
+
import {ChildForm} from '../ChildForm';
|
|
4
|
+
|
|
5
|
+
describe('ChildForm', () => {
|
|
6
|
+
it('renders the provided title and description', async () => {
|
|
7
|
+
render(<ChildForm in={true} title="This is a title" description="This is a description" />);
|
|
8
|
+
|
|
9
|
+
expect(screen.getByText(/this is a title/i)).toBeInTheDocument();
|
|
10
|
+
expect(screen.getByText(/this is a description/i)).toBeInTheDocument();
|
|
11
|
+
});
|
|
12
|
+
it('renders the content', () => {
|
|
13
|
+
render(
|
|
14
|
+
<ChildForm in={true}>
|
|
15
|
+
<TextInput label="Text input" />
|
|
16
|
+
</ChildForm>,
|
|
17
|
+
);
|
|
18
|
+
|
|
19
|
+
expect(screen.getByRole('textbox', {name: /text input/i})).toBeInTheDocument();
|
|
20
|
+
});
|
|
21
|
+
it('hides the container', () => {
|
|
22
|
+
render(
|
|
23
|
+
<ChildForm in={false}>
|
|
24
|
+
<TextInput label="Text input" />
|
|
25
|
+
</ChildForm>,
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
expect(screen.queryByRole('textbox', {name: /text input/i})).not.toBeInTheDocument();
|
|
29
|
+
});
|
|
30
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ChildForm';
|