@mrshmllw/smores-react 12.9.2 → 12.10.0-crumbs-feature-sticky-modal-title.1
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/dist/Modal/Modal.js +10 -3
- package/dist/Modal/Modal.js.map +1 -1
- package/package.json +14 -14
package/dist/Modal/Modal.js
CHANGED
|
@@ -21,8 +21,8 @@ export const Modal = ({ title = '', children, rightPanel, showModal = false, han
|
|
|
21
21
|
return null;
|
|
22
22
|
return createPortal(React.createElement(Wrapper, { ref: modalRef },
|
|
23
23
|
React.createElement(Overlay, { onClick: () => closeOnOverlayClick && handleClick(), "$closeOnOverlayClick": closeOnOverlayClick }),
|
|
24
|
-
React.createElement(Container, { "$drawer": drawer, "$width": width
|
|
25
|
-
React.createElement(
|
|
24
|
+
React.createElement(Container, { "$drawer": drawer, "$width": width ?? '460px', className: containerClass },
|
|
25
|
+
React.createElement(HeaderContainer, { flex: true, alignItems: "flex-start", justifyContent: "space-between", mb: "8px" },
|
|
26
26
|
React.createElement(TitleElements, { flex: true, direction: "column" },
|
|
27
27
|
React.createElement(Text, { ...titleProps })),
|
|
28
28
|
React.createElement(Box, { flex: true, alignItems: "center", gap: '8px' },
|
|
@@ -51,11 +51,18 @@ const Overlay = styled.div `
|
|
|
51
51
|
left: 0;
|
|
52
52
|
right: 0;
|
|
53
53
|
`;
|
|
54
|
+
const HeaderContainer = styled(Box) `
|
|
55
|
+
position: sticky;
|
|
56
|
+
top: 0;
|
|
57
|
+
background: ${theme.colors.coconut};
|
|
58
|
+
padding: 36px 0 8px;
|
|
59
|
+
z-index: 1;
|
|
60
|
+
`;
|
|
54
61
|
const Container = styled.div(({ $drawer, $width }) => css `
|
|
55
62
|
background: ${theme.colors.coconut};
|
|
56
63
|
box-sizing: border-box;
|
|
57
64
|
border-radius: 16px;
|
|
58
|
-
padding: 24px;
|
|
65
|
+
padding: 0 24px 24px 24px;
|
|
59
66
|
width: 100%;
|
|
60
67
|
max-width: ${$width};
|
|
61
68
|
position: fixed;
|
package/dist/Modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,MAAM,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAkB,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAwC9D,MAAM,oBAAoB,GAAG,CAAC,KAAa,EAAc,EAAE,CAAC,CAAC;IAC3D,QAAQ,EAAE,KAAK;IACf,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,eAAe;IACrB,KAAK,EAAE,MAAM;CACd,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,IAAI,EACZ,KAAK,EACL,cAAc,EACd,eAAe,GAAG,QAAQ,CAAC,IAAI,EAC/B,mBAAmB,GAAG,IAAI,GAC3B,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE7C,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC,CAAA;IAExD,MAAM,aAAa,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAA;IAC/C,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;IAEtE,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAA;IAE3B,OAAO,YAAY,CACjB,oBAAC,OAAO,IAAC,GAAG,EAAE,QAAQ;QACpB,oBAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,IAAI,WAAW,EAAE,0BAC7B,mBAAmB,GACzC;QACF,oBAAC,SAAS,eACC,MAAM,YACP,KAAK,IAAI,OAAO,EACxB,SAAS,EAAE,cAAc;YAEzB,oBAAC,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,MAAM,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAkB,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAwC9D,MAAM,oBAAoB,GAAG,CAAC,KAAa,EAAc,EAAE,CAAC,CAAC;IAC3D,QAAQ,EAAE,KAAK;IACf,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,eAAe;IACrB,KAAK,EAAE,MAAM;CACd,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,UAAU,EACV,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,IAAI,EACZ,KAAK,EACL,cAAc,EACd,eAAe,GAAG,QAAQ,CAAC,IAAI,EAC/B,mBAAmB,GAAG,IAAI,GAC3B,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE7C,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC,CAAA;IAExD,MAAM,aAAa,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAA;IAC/C,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;IAEtE,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAA;IAE3B,OAAO,YAAY,CACjB,oBAAC,OAAO,IAAC,GAAG,EAAE,QAAQ;QACpB,oBAAC,OAAO,IACN,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,IAAI,WAAW,EAAE,0BAC7B,mBAAmB,GACzC;QACF,oBAAC,SAAS,eACC,MAAM,YACP,KAAK,IAAI,OAAO,EACxB,SAAS,EAAE,cAAc;YAEzB,oBAAC,eAAe,IACd,IAAI,QACJ,UAAU,EAAC,YAAY,EACvB,cAAc,EAAC,eAAe,EAC9B,EAAE,EAAC,KAAK;gBAER,oBAAC,aAAa,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ;oBACpC,oBAAC,IAAI,OAAK,UAAU,GAAI,CACV;gBAChB,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,GAAG,EAAE,KAAK;oBACrC,UAAU;oBACV,KAAK,IAAI,CACR,oBAAC,UAAU,IACT,MAAM,EAAC,OAAO,EACd,KAAK,EAAC,aAAa,EACnB,eAAe,EAAC,SAAS,EACzB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,EAAE,GACR,CACH,CACG,CACU;YAClB,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,IACzB,QAAQ,CACL,CACI,CACJ,EACV,eAAe,CAChB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;CAU1B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAmC;;gBAE7C,KAAK,CAAC,MAAM,CAAC,SAAS;YAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;;;;;;CAM1E,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;gBAGnB,KAAK,CAAC,MAAM,CAAC,OAAO;;;CAGnC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAC1B,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;kBACZ,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;iBAKrB,MAAM;;;;;;MAMjB,OAAO,KAAK,IAAI;IAClB,GAAG,CAAA;;;;;;;;;;;;KAYF;GACF,CACF,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAEhC,CAAA","sourcesContent":["import React, { FC, ReactNode, useRef } from 'react'\nimport { createPortal } from 'react-dom'\nimport styled, { css } from 'styled-components'\nimport { theme } from '../theme'\n\nimport { Box } from '../Box'\nimport { IconStrict } from '../IconStrict'\nimport { Text, type TextProps } from '../Text'\nimport { useBodyScrollLock } from '../hooks/useBodyScrollLock'\n\ninterface IModalContainer {\n // drawer state\n $drawer: boolean\n // modal width\n $width: string\n}\n\nexport type ModalProps = {\n /**\n * Title of the modal\n * @default \"\" (empty string)\n *\n * @example\n * ```tsx\n * <Modal title=\"MultiCar Account\" />\n * ```\n *\n * @example\n * ```tsx\n * <Modal title={{ typo: 'hero', children: 'MultiCar Account' }} />\n * ```\n */\n title?: string | TitleProps\n icon?: string\n children?: ReactNode\n rightPanel?: ReactNode\n showModal?: boolean\n handleClick: () => void\n drawer?: boolean\n cross?: boolean\n width?: string\n containerClass?: string\n portalContainer?: Element | DocumentFragment\n closeOnOverlayClick?: boolean\n}\n\nexport type TitleProps = TextProps\n\nconst getDefaultTitleProps = (title: string): TitleProps => ({\n children: title,\n tag: 'h2',\n typo: 'heading-small',\n align: 'left',\n})\n\nexport const Modal: FC<ModalProps> = ({\n title = '',\n children,\n rightPanel,\n showModal = false,\n handleClick,\n drawer = true,\n cross = true,\n width,\n containerClass,\n portalContainer = document.body,\n closeOnOverlayClick = true,\n}) => {\n const modalRef = useRef<HTMLDivElement>(null)\n\n useBodyScrollLock({ node: modalRef.current, showModal })\n\n const isTitleString = typeof title === 'string'\n const titleProps = isTitleString ? getDefaultTitleProps(title) : title\n\n if (!showModal) return null\n\n return createPortal(\n <Wrapper ref={modalRef}>\n <Overlay\n onClick={() => closeOnOverlayClick && handleClick()}\n $closeOnOverlayClick={closeOnOverlayClick}\n />\n <Container\n $drawer={drawer}\n $width={width ?? '460px'}\n className={containerClass}\n >\n <HeaderContainer\n flex\n alignItems=\"flex-start\"\n justifyContent=\"space-between\"\n mb=\"8px\"\n >\n <TitleElements flex direction=\"column\">\n <Text {...titleProps} />\n </TitleElements>\n <Box flex alignItems=\"center\" gap={'8px'}>\n {rightPanel}\n {cross && (\n <IconStrict\n render=\"cross\"\n title=\"Close modal\"\n backgroundColor=\"oatmeal\"\n handleClick={handleClick}\n size={36}\n />\n )}\n </Box>\n </HeaderContainer>\n <Box flex direction=\"column\">\n {children}\n </Box>\n </Container>\n </Wrapper>,\n portalContainer,\n )\n}\n\nconst Wrapper = styled(Box)`\n display: flex;\n position: absolute;\n z-index: 999;\n top: 0;\n left: 0;\n height: 100vh;\n width: 100%;\n justify-content: center;\n align-items: center;\n`\n\nconst Overlay = styled.div<{ $closeOnOverlayClick: boolean }>`\n position: fixed;\n background: ${theme.colors.liquorice};\n cursor: ${(props) => (props.$closeOnOverlayClick ? 'pointer' : 'default')};\n opacity: 0.4;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n`\n\nconst HeaderContainer = styled(Box)`\n position: sticky;\n top: 0;\n background: ${theme.colors.coconut};\n padding: 36px 0 8px;\n z-index: 1;\n`\n\nconst Container = styled.div<IModalContainer>(\n ({ $drawer, $width }) => css`\n background: ${theme.colors.coconut};\n box-sizing: border-box;\n border-radius: 16px;\n padding: 0 24px 24px 24px;\n width: 100%;\n max-width: ${$width};\n position: fixed;\n max-height: calc(100vh - 64px);\n overflow: auto;\n transition: all 0.3s ease-in-out;\n\n ${$drawer === true &&\n css`\n @media (max-width: 768px) {\n max-width: none;\n border-radius: 16px 16px 0px 0px;\n padding: 10% 24px;\n max-height: 90vh;\n\n position: fixed;\n right: 0;\n left: 0;\n bottom: 0;\n }\n `}\n `,\n)\n\nconst TitleElements = styled(Box)`\n align-self: center;\n`\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.10.0-crumbs-feature-sticky-modal-title.1",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -55,21 +55,21 @@
|
|
|
55
55
|
"@testing-library/react": "^16.3.0",
|
|
56
56
|
"@types/body-scroll-lock": "^3.1.0",
|
|
57
57
|
"@types/dompurify": "^3.2.0",
|
|
58
|
-
"@types/node": "^22.15.
|
|
59
|
-
"@types/react": "^19.1.
|
|
58
|
+
"@types/node": "^22.15.29",
|
|
59
|
+
"@types/react": "^19.1.6",
|
|
60
60
|
"@types/react-dom": "^19.1.5",
|
|
61
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
62
|
-
"@typescript-eslint/parser": "^8.
|
|
61
|
+
"@typescript-eslint/eslint-plugin": "^8.33.1",
|
|
62
|
+
"@typescript-eslint/parser": "^8.33.1",
|
|
63
63
|
"axe-playwright": "^2.1.0",
|
|
64
|
-
"conventional-changelog-conventionalcommits": "^
|
|
65
|
-
"eslint": "^9.
|
|
64
|
+
"conventional-changelog-conventionalcommits": "^9.0.0",
|
|
65
|
+
"eslint": "^9.28.0",
|
|
66
66
|
"eslint-config-prettier": "^10.1.5",
|
|
67
|
-
"eslint-plugin-prettier": "^5.4.
|
|
67
|
+
"eslint-plugin-prettier": "^5.4.1",
|
|
68
68
|
"eslint-plugin-react": "^7.37.5",
|
|
69
69
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
70
70
|
"husky": "^9.1.7",
|
|
71
71
|
"jsdom": "^26.1.0",
|
|
72
|
-
"lint-staged": "^16.
|
|
72
|
+
"lint-staged": "^16.1.0",
|
|
73
73
|
"playwright": "^1.52.0",
|
|
74
74
|
"prettier": "^3.5.3",
|
|
75
75
|
"react": "^19.0.0",
|
|
@@ -79,18 +79,18 @@
|
|
|
79
79
|
"storybook": "^8.0.4",
|
|
80
80
|
"styled-components": "^6.1.18",
|
|
81
81
|
"typescript": "^5.8.3",
|
|
82
|
-
"typescript-eslint": "^8.
|
|
82
|
+
"typescript-eslint": "^8.33.1",
|
|
83
83
|
"vite": "^6.3.5",
|
|
84
|
-
"vitest": "^3.1
|
|
84
|
+
"vitest": "^3.2.1"
|
|
85
85
|
},
|
|
86
86
|
"dependencies": {
|
|
87
|
-
"@floating-ui/react": "0.27.
|
|
88
|
-
"@lexical/react": "^0.
|
|
87
|
+
"@floating-ui/react": "0.27.12",
|
|
88
|
+
"@lexical/react": "^0.32.1",
|
|
89
89
|
"body-scroll-lock": "^4.0.0-beta.0",
|
|
90
90
|
"date-fns": "^4.1.0",
|
|
91
91
|
"dompurify": "^3.2.6",
|
|
92
92
|
"fuse.js": "^7.1.0",
|
|
93
|
-
"lexical": "^0.
|
|
93
|
+
"lexical": "^0.32.0",
|
|
94
94
|
"polished": "^4.1.3"
|
|
95
95
|
},
|
|
96
96
|
"peerDependencies": {
|