@ndlib/component-library 0.0.39 → 0.0.40

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.
Files changed (3) hide show
  1. package/dist/components/composites/Modal/index.d.ts +1 -0
  2. package/dist/components/composites/Modal/index.js +10 -9
  3. package/package.json +5 -3
package/dist/components/composites/Modal/index.d.ts CHANGED
@@ -7,6 +7,7 @@ type ModalProps = StyledElementProps<HTMLDivElement, {
7
7
  hideHeading?: boolean;
8
8
  footer?: React.ReactNode;
9
9
  actions?: ModalAction[];
10
+ wrapWithTheme?: boolean;
10
11
  }>;
11
12
  type ModalAction = {
12
13
  label: string;
package/dist/components/composites/Modal/index.js CHANGED
@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
13
  import _ReactModal from 'react-modal';
14
14
  import { importedDefaultComponentShim } from '../../../utils/misc';
15
- import { useTheme } from '../../../theme';
15
+ import { ThemeProvider, useTheme } from '../../../theme';
16
16
  import { GROUP_TYPE, Group } from '../../elements/Group';
17
17
  import { Row } from '../../elements/layout/Row';
18
18
  import { HEADING_SIZE, Heading } from '../../elements/text/Heading';
@@ -23,10 +23,17 @@ import { useMediaQuery } from '../../providers/media';
23
23
  import { useComponentConfig } from '../../providers/componentConfig';
24
24
  const ReactModal = importedDefaultComponentShim(_ReactModal);
25
25
  export const Modal = (_a) => {
26
- var { children, heading, hideHeading, isOpen, footer, actions, close } = _a, props = __rest(_a, ["children", "heading", "hideHeading", "isOpen", "footer", "actions", "close"]);
26
+ var { children, heading, hideHeading, isOpen, footer, actions, wrapWithTheme, close } = _a, props = __rest(_a, ["children", "heading", "hideHeading", "isOpen", "footer", "actions", "wrapWithTheme", "close"]);
27
27
  const { breakpoint } = useMediaQuery();
28
28
  const { modal } = useComponentConfig();
29
29
  const theme = useTheme();
30
+ const modalBody = (_jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION, sx: { my: 0 } }, { children: [!hideHeading && (_jsxs(Row, Object.assign({ justify: "space-between", align: "center", sx: {
31
+ p: 3,
32
+ borderBottom: 'solid 1px',
33
+ borderColor: COLOR.LIGHT_GRAY,
34
+ } }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, typography: TYPOGRAPHY_TYPE.CONTROL_MEDIUM }, { children: heading })), _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, onClick: close }, { children: "Close" }))] }))), _jsx(Row, Object.assign({ sx: { p: 3 } }, { children: children })), _jsxs(Row, Object.assign({ sx: { borderTop: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, p: 3 } }, { children: [footer, actions !== undefined && (_jsx(Row, Object.assign({ sx: { width: '100%', justifyContent: 'flex-end' } }, { children: actions.map((action, index) => (_jsx(Button, Object.assign({ type: action.isPrimary ? BUTTON_TYPE.DEFAULT : BUTTON_TYPE.OUTLINE, onClick: action.onClick, sx: {
35
+ mr: index < actions.length - 1 ? 1 : 0,
36
+ } }, { children: action.label }), index))) })))] }))] })));
30
37
  return (_jsx(ReactModal, Object.assign({ isOpen: isOpen, shouldFocusAfterRender: true, appElement: modal.appElement, onRequestClose: close }, props, { style: {
31
38
  overlay: {
32
39
  backgroundColor: 'rgba(0, 0, 0, 0.5)',
@@ -42,11 +49,5 @@ export const Modal = (_a) => {
42
49
  marginRight: '-50%',
43
50
  transform: 'translate(-50%, -50%)',
44
51
  },
45
- } }, { children: _jsxs(Group, Object.assign({ type: GROUP_TYPE.REGION, sx: { my: 0 } }, { children: [!hideHeading && (_jsxs(Row, Object.assign({ justify: "space-between", align: "center", sx: {
46
- p: 3,
47
- borderBottom: 'solid 1px',
48
- borderColor: COLOR.LIGHT_GRAY,
49
- } }, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM, typography: TYPOGRAPHY_TYPE.CONTROL_MEDIUM }, { children: heading })), _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, onClick: close }, { children: "Close" }))] }))), _jsx(Row, Object.assign({ sx: { p: 3 } }, { children: children })), _jsxs(Row, Object.assign({ sx: { borderTop: 'solid 1px', borderColor: COLOR.LIGHT_GRAY, p: 3 } }, { children: [footer, actions !== undefined && (_jsx(Row, Object.assign({ sx: { width: '100%', justifyContent: 'flex-end' } }, { children: actions.map((action, index) => (_jsx(Button, Object.assign({ type: action.isPrimary ? BUTTON_TYPE.DEFAULT : BUTTON_TYPE.OUTLINE, onClick: action.onClick, sx: {
50
- mr: index < actions.length - 1 ? 1 : 0,
51
- } }, { children: action.label }), index))) })))] }))] })) })));
52
+ } }, { children: wrapWithTheme ? _jsx(ThemeProvider, { children: modalBody }) : modalBody })));
52
53
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndlib/component-library",
3
- "version": "0.0.39",
3
+ "version": "0.0.40",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "files": [
@@ -33,9 +33,11 @@
33
33
  "peerDependencies": {
34
34
  "@emotion/react": "^11.11.0",
35
35
  "@emotion/styled": "^11.11.0",
36
+ "@mui/icons-material": "^5.11.16",
37
+ "@mui/material": "^5.11.16",
36
38
  "react": "^18.2.0",
37
39
  "react-dom": "^18.2.0",
38
- "theme-ui": "^0.15.7"
40
+ "theme-ui": "^0.16.1"
39
41
  },
40
42
  "devDependencies": {
41
43
  "@emotion/react": "^11.11.0",
@@ -70,7 +72,7 @@
70
72
  "react": "^18.2.0",
71
73
  "react-dom": "^18.2.0",
72
74
  "storybook": "^7.0.17",
73
- "theme-ui": "^0.16.0",
75
+ "theme-ui": "^0.16.1",
74
76
  "typescript": "^5.0.2",
75
77
  "vite": "^4.3.9",
76
78
  "vitest": "^0.31.4"