@mrshmllw/smores-react 12.9.0 → 12.9.2

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.
@@ -17,7 +17,9 @@ export const Modal = ({ title = '', children, rightPanel, showModal = false, han
17
17
  useBodyScrollLock({ node: modalRef.current, showModal });
18
18
  const isTitleString = typeof title === 'string';
19
19
  const titleProps = isTitleString ? getDefaultTitleProps(title) : title;
20
- return createPortal(React.createElement(Wrapper, { "$showModal": showModal, ref: modalRef },
20
+ if (!showModal)
21
+ return null;
22
+ return createPortal(React.createElement(Wrapper, { ref: modalRef },
21
23
  React.createElement(Overlay, { onClick: () => closeOnOverlayClick && handleClick(), "$closeOnOverlayClick": closeOnOverlayClick }),
22
24
  React.createElement(Container, { "$drawer": drawer, "$width": width || '460px', className: containerClass },
23
25
  React.createElement(Box, { flex: true, alignItems: "flex-start", justifyContent: "space-between", mb: "8px" },
@@ -28,17 +30,17 @@ export const Modal = ({ title = '', children, rightPanel, showModal = false, han
28
30
  cross && (React.createElement(IconStrict, { render: "cross", title: "Close modal", backgroundColor: "oatmeal", handleClick: handleClick, size: 36 })))),
29
31
  React.createElement(Box, { flex: true, direction: "column" }, children))), portalContainer);
30
32
  };
31
- const Wrapper = styled(Box)(({ $showModal }) => css `
32
- display: ${$showModal ? 'flex' : 'none'};
33
- position: absolute;
34
- z-index: 999;
35
- top: 0;
36
- left: 0;
37
- height: 100vh;
38
- width: 100%;
39
- justify-content: center;
40
- align-items: center;
41
- `);
33
+ const Wrapper = styled(Box) `
34
+ display: flex;
35
+ position: absolute;
36
+ z-index: 999;
37
+ top: 0;
38
+ left: 0;
39
+ height: 100vh;
40
+ width: 100%;
41
+ justify-content: center;
42
+ align-items: center;
43
+ `;
42
44
  const Overlay = styled.div `
43
45
  position: fixed;
44
46
  background: ${theme.colors.liquorice};
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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","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 IModalWrapper {\n // showModal state\n $showModal: boolean\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 return createPortal(\n <Wrapper $showModal={showModal} 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 <Box\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 </Box>\n <Box flex direction=\"column\">\n {children}\n </Box>\n </Container>\n </Wrapper>,\n portalContainer,\n )\n}\n\nconst Wrapper = styled(Box)<IModalWrapper>(\n ({ $showModal }) => css`\n display: ${$showModal ? 'flex' : 'none'};\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)\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 Container = styled.div<IModalContainer>(\n ({ $drawer, $width }) => css`\n background: ${theme.colors.coconut};\n box-sizing: border-box;\n border-radius: 16px;\n padding: 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"]}
1
+ {"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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","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 <Box\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 </Box>\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 Container = styled.div<IModalContainer>(\n ({ $drawer, $width }) => css`\n background: ${theme.colors.coconut};\n box-sizing: border-box;\n border-radius: 16px;\n padding: 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"]}
@@ -1,7 +1,5 @@
1
- import React, { FC, ReactNode } from 'react';
2
- import { SnackbarContextType } from './types';
1
+ import React, { FC } from 'react';
2
+ import { SnackbarContextType, SnackbarContainerProps } from './types';
3
3
  export declare const SnackbarContext: React.Context<SnackbarContextType>;
4
4
  export declare const useSnackbarContext: () => SnackbarContextType;
5
- export declare const SnackbarContainer: FC<{
6
- children?: ReactNode;
7
- }>;
5
+ export declare const SnackbarContainer: FC<SnackbarContainerProps>;
@@ -1,4 +1,5 @@
1
1
  import React, { createContext, useCallback, useContext, useRef, useState, } from 'react';
2
+ import { createPortal } from 'react-dom';
2
3
  import styled from 'styled-components';
3
4
  import { SnackbarItem } from './SnackbarItem';
4
5
  export const SnackbarContext = createContext({
@@ -7,7 +8,7 @@ export const SnackbarContext = createContext({
7
8
  },
8
9
  });
9
10
  export const useSnackbarContext = () => useContext(SnackbarContext);
10
- export const SnackbarContainer = ({ children, }) => {
11
+ export const SnackbarContainer = ({ children, portalContainer = document.body, }) => {
11
12
  const snackbarIdRef = useRef(0);
12
13
  const [snackbars, setSnackbars] = useState([]);
13
14
  // create snackbar unique ID
@@ -30,7 +31,7 @@ export const SnackbarContainer = ({ children, }) => {
30
31
  addSnackbar,
31
32
  } },
32
33
  children,
33
- React.createElement(SnackbarWrapper, null, snackbars.map((snackbar) => (React.createElement(SnackbarItem, { key: snackbar.id, ...snackbar, deleteSnack: deleteSnackbar }))))));
34
+ createPortal(React.createElement(SnackbarWrapper, null, snackbars.map((snackbar) => (React.createElement(SnackbarItem, { key: snackbar.id, ...snackbar, deleteSnack: deleteSnackbar })))), portalContainer)));
34
35
  };
35
36
  const SnackbarWrapper = styled.div `
36
37
  position: fixed;
@@ -1 +1 @@
1
- {"version":3,"file":"SnackbarContainer.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EAGb,WAAW,EACX,UAAU,EACV,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAG7C,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAsB;IAChE,WAAW,EAAE,GAAG,EAAE;QAChB,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAA;IACzE,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAA;AAEnE,MAAM,CAAC,MAAM,iBAAiB,GAAiC,CAAC,EAC9D,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAa,EAAE,CAAC,CAAA;IAE1D,4BAA4B;IAC5B,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,MAAM,KAAK,GAAG,eAAe,aAAa,CAAC,OAAO,EAAE,CAAA;QACpD,aAAa,CAAC,OAAO,GAAG,CAAC,CAAC,CAAA;QAC1B,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,QAAqB,EAAE,EAAE;QACxD,MAAM,QAAQ,GAAG;YACf,GAAG,QAAQ;YACX,EAAE,EAAE,UAAU,EAAE;SACjB,CAAA;QACD,YAAY,CAAC,CAAC,GAAG,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IACxC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE;QACpC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IAClE,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,WAAW;SACZ;QAEA,QAAQ;QACT,oBAAC,eAAe,QACb,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC3B,oBAAC,YAAY,IACX,GAAG,EAAE,QAAQ,CAAC,EAAE,KACZ,QAAQ,EACZ,WAAW,EAAE,cAAc,GAC3B,CACH,CAAC,CACc,CACO,CAC5B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASjC,CAAA","sourcesContent":["import React, {\n createContext,\n FC,\n ReactNode,\n useCallback,\n useContext,\n useRef,\n useState,\n} from 'react'\nimport styled from 'styled-components'\nimport { SnackbarItem } from './SnackbarItem'\nimport { CreateSnack, Snackbar, SnackbarContextType } from './types'\n\nexport const SnackbarContext = createContext<SnackbarContextType>({\n addSnackbar: () => {\n throw new Error('Please add the SnackbarContainer to your application')\n },\n})\n\nexport const useSnackbarContext = () => useContext(SnackbarContext)\n\nexport const SnackbarContainer: FC<{ children?: ReactNode }> = ({\n children,\n}) => {\n const snackbarIdRef = useRef(0)\n const [snackbars, setSnackbars] = useState<Snackbar[]>([])\n\n // create snackbar unique ID\n const newSnackId = useCallback(() => {\n const newId = `MM_SNACKBAR_${snackbarIdRef.current}`\n snackbarIdRef.current = +1\n return newId\n }, [])\n\n const addSnackbar = useCallback((snackbar: CreateSnack) => {\n const newSnack = {\n ...snackbar,\n id: newSnackId(),\n }\n setSnackbars([...snackbars, newSnack])\n }, [])\n\n const deleteSnackbar = (id: string) => {\n setSnackbars(snackbars.filter((snackbar) => snackbar.id !== id))\n }\n\n return (\n <SnackbarContext.Provider\n value={{\n addSnackbar,\n }}\n >\n {children}\n <SnackbarWrapper>\n {snackbars.map((snackbar) => (\n <SnackbarItem\n key={snackbar.id}\n {...snackbar}\n deleteSnack={deleteSnackbar}\n />\n ))}\n </SnackbarWrapper>\n </SnackbarContext.Provider>\n )\n}\n\nconst SnackbarWrapper = styled.div`\n position: fixed;\n bottom: 35px;\n left: 0;\n right: 0;\n margin: 0 auto;\n width: 90%;\n max-width: 875px;\n z-index: 1000;\n`\n"]}
1
+ {"version":3,"file":"SnackbarContainer.js","sourceRoot":"","sources":["../../src/Snackbar/SnackbarContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,WAAW,EACX,UAAU,EACV,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAQ7C,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAsB;IAChE,WAAW,EAAE,GAAG,EAAE;QAChB,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAA;IACzE,CAAC;CACF,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAA;AAEnE,MAAM,CAAC,MAAM,iBAAiB,GAA+B,CAAC,EAC5D,QAAQ,EACR,eAAe,GAAG,QAAQ,CAAC,IAAI,GAChC,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAa,EAAE,CAAC,CAAA;IAE1D,4BAA4B;IAC5B,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,MAAM,KAAK,GAAG,eAAe,aAAa,CAAC,OAAO,EAAE,CAAA;QACpD,aAAa,CAAC,OAAO,GAAG,CAAC,CAAC,CAAA;QAC1B,OAAO,KAAK,CAAA;IACd,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,QAAqB,EAAE,EAAE;QACxD,MAAM,QAAQ,GAAG;YACf,GAAG,QAAQ;YACX,EAAE,EAAE,UAAU,EAAE;SACjB,CAAA;QACD,YAAY,CAAC,CAAC,GAAG,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IACxC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE;QACpC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAA;IAClE,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,WAAW;SACZ;QAEA,QAAQ;QACR,YAAY,CACX,oBAAC,eAAe,QACb,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC3B,oBAAC,YAAY,IACX,GAAG,EAAE,QAAQ,CAAC,EAAE,KACZ,QAAQ,EACZ,WAAW,EAAE,cAAc,GAC3B,CACH,CAAC,CACc,EAClB,eAAe,CAChB,CACwB,CAC5B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASjC,CAAA","sourcesContent":["import React, {\n createContext,\n FC,\n useCallback,\n useContext,\n useRef,\n useState,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport styled from 'styled-components'\nimport { SnackbarItem } from './SnackbarItem'\nimport {\n CreateSnack,\n Snackbar,\n SnackbarContextType,\n SnackbarContainerProps,\n} from './types'\n\nexport const SnackbarContext = createContext<SnackbarContextType>({\n addSnackbar: () => {\n throw new Error('Please add the SnackbarContainer to your application')\n },\n})\n\nexport const useSnackbarContext = () => useContext(SnackbarContext)\n\nexport const SnackbarContainer: FC<SnackbarContainerProps> = ({\n children,\n portalContainer = document.body,\n}) => {\n const snackbarIdRef = useRef(0)\n const [snackbars, setSnackbars] = useState<Snackbar[]>([])\n\n // create snackbar unique ID\n const newSnackId = useCallback(() => {\n const newId = `MM_SNACKBAR_${snackbarIdRef.current}`\n snackbarIdRef.current = +1\n return newId\n }, [])\n\n const addSnackbar = useCallback((snackbar: CreateSnack) => {\n const newSnack = {\n ...snackbar,\n id: newSnackId(),\n }\n setSnackbars([...snackbars, newSnack])\n }, [])\n\n const deleteSnackbar = (id: string) => {\n setSnackbars(snackbars.filter((snackbar) => snackbar.id !== id))\n }\n\n return (\n <SnackbarContext.Provider\n value={{\n addSnackbar,\n }}\n >\n {children}\n {createPortal(\n <SnackbarWrapper>\n {snackbars.map((snackbar) => (\n <SnackbarItem\n key={snackbar.id}\n {...snackbar}\n deleteSnack={deleteSnackbar}\n />\n ))}\n </SnackbarWrapper>,\n portalContainer,\n )}\n </SnackbarContext.Provider>\n )\n}\n\nconst SnackbarWrapper = styled.div`\n position: fixed;\n bottom: 35px;\n left: 0;\n right: 0;\n margin: 0 auto;\n width: 90%;\n max-width: 875px;\n z-index: 1000;\n`\n"]}
@@ -1,4 +1,5 @@
1
1
  import { Icons } from '../Icon/iconsList';
2
+ import { ReactNode } from 'react';
2
3
  export interface Snackbar {
3
4
  id: string;
4
5
  message: string;
@@ -11,3 +12,7 @@ export type CreateSnack = Omit<Snackbar, 'id'>;
11
12
  export interface SnackbarContextType {
12
13
  addSnackbar: (snackbar: CreateSnack) => void;
13
14
  }
15
+ export interface SnackbarContainerProps {
16
+ children?: ReactNode;
17
+ portalContainer?: Element | DocumentFragment;
18
+ }
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Snackbar/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from '../Icon/iconsList'\n\nexport interface Snackbar {\n id: string\n message: string\n autoCloseTime?: 4 | 5 | 6 | 7 | 8 | 9 | 10\n leadingIcon?: Icons\n canManuallyClose?: boolean\n showCloseIcon?: boolean\n}\n\nexport type CreateSnack = Omit<Snackbar, 'id'>\n\nexport interface SnackbarContextType {\n addSnackbar: (snackbar: CreateSnack) => void\n}\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Snackbar/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icons } from '../Icon/iconsList'\nimport { ReactNode } from 'react'\n\nexport interface Snackbar {\n id: string\n message: string\n autoCloseTime?: 4 | 5 | 6 | 7 | 8 | 9 | 10\n leadingIcon?: Icons\n canManuallyClose?: boolean\n showCloseIcon?: boolean\n}\n\nexport type CreateSnack = Omit<Snackbar, 'id'>\n\nexport interface SnackbarContextType {\n addSnackbar: (snackbar: CreateSnack) => void\n}\n\nexport interface SnackbarContainerProps {\n children?: ReactNode\n portalContainer?: Element | DocumentFragment\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mrshmllw/smores-react",
3
- "version": "12.9.0",
3
+ "version": "12.9.2",
4
4
  "main": "./dist/index.js",
5
5
  "description": "Collection of React components used by Marshmallow Technology",
6
6
  "type": "module",
@@ -39,7 +39,7 @@
39
39
  "@commitlint/types": "^19.8.0",
40
40
  "@semantic-release/changelog": "^6.0.3",
41
41
  "@semantic-release/git": "^10.0.1",
42
- "@semantic-release/github": "^11.0.2",
42
+ "@semantic-release/github": "^11.0.3",
43
43
  "@semantic-release/npm": "^12.0.0",
44
44
  "@snyk/protect": "^1.1297.1",
45
45
  "@storybook/addon-a11y": "^8.6.14",
@@ -55,8 +55,8 @@
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.19",
59
- "@types/react": "^19.1.4",
58
+ "@types/node": "^22.15.21",
59
+ "@types/react": "^19.1.5",
60
60
  "@types/react-dom": "^19.1.5",
61
61
  "@typescript-eslint/eslint-plugin": "^8.32.1",
62
62
  "@typescript-eslint/parser": "^8.32.1",
@@ -75,20 +75,20 @@
75
75
  "react": "^19.0.0",
76
76
  "react-dom": "^19.1.0",
77
77
  "rimraf": "^6.0.1",
78
- "semantic-release": "^24.2.4",
78
+ "semantic-release": "^24.2.5",
79
79
  "storybook": "^8.0.4",
80
80
  "styled-components": "^6.1.18",
81
81
  "typescript": "^5.8.3",
82
82
  "typescript-eslint": "^8.32.1",
83
83
  "vite": "^6.3.5",
84
- "vitest": "^3.1.3"
84
+ "vitest": "^3.1.4"
85
85
  },
86
86
  "dependencies": {
87
- "@floating-ui/react": "0.27.8",
88
- "@lexical/react": "^0.31.1",
87
+ "@floating-ui/react": "0.27.9",
88
+ "@lexical/react": "^0.31.2",
89
89
  "body-scroll-lock": "^4.0.0-beta.0",
90
90
  "date-fns": "^4.1.0",
91
- "dompurify": "^3.2.5",
91
+ "dompurify": "^3.2.6",
92
92
  "fuse.js": "^7.1.0",
93
93
  "lexical": "^0.31.0",
94
94
  "polished": "^4.1.3"