@ndlib/component-library 0.0.38 → 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 (7) 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/dist/components/elements/Fields/Select/Select.stories.js +1 -1
  4. package/dist/components/elements/Fields/Select/index.js +4 -11
  5. package/dist/components/elements/Fields/TextInput/TextInput.stories.js +1 -1
  6. package/dist/components/elements/Fields/TextInput/index.js +1 -1
  7. 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/dist/components/elements/Fields/Select/Select.stories.js CHANGED
@@ -35,5 +35,5 @@ export const WithLabel = {
35
35
  render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) })),
36
36
  };
37
37
  export const InvertedColors = {
38
- render: () => (_jsx(Column, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 4 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, inverted: true, label: "Fruit" })] }))) }))),
38
+ render: () => (_jsx(Column, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 4 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulSelect, { inverted: true, size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) }))),
39
39
  };
package/dist/components/elements/Fields/Select/index.js CHANGED
@@ -120,17 +120,10 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
120
120
  const focusStyles = {
121
121
  boxShadow: inverted ? theme.boxShadow.INVERTED : theme.boxShadow.NORMAL,
122
122
  };
123
- return (_jsxs(Box, Object.assign({ sx: {
124
- width: DEFAULT_WIDTH,
125
- position: 'relative',
126
- borderRadius: '4px',
127
- backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE,
128
- ':hover fieldset': focusStyles,
129
- ':focus fieldset': focusStyles,
130
- } }, { children: [_jsx("fieldset", Object.assign({ sx: {
123
+ return (_jsxs(Box, Object.assign({ sx: Object.assign({ width: DEFAULT_WIDTH, position: 'relative', borderRadius: '4px', backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, ':hover fieldset': focusStyles, ':focus fieldset': focusStyles }, sx) }, { children: [_jsx("fieldset", Object.assign({ sx: {
131
124
  textAlign: 'left',
132
125
  position: 'absolute',
133
- inset: '-5px 0px 0px 0px',
126
+ inset: '-4px 0px 0px 0px',
134
127
  margin: '0px',
135
128
  padding: '0px 0.5rem',
136
129
  pointerEvents: 'none',
@@ -179,10 +172,10 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
179
172
  else {
180
173
  close();
181
174
  }
182
- }, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: Object.assign(Object.assign({ height, width: '100%', border: 'solid 0px',
175
+ }, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: Object.assign({ height, width: '100%', border: 'solid 0px',
183
176
  // borderColor: COLOR.GRAY,
184
177
  // borderRadius: '4px',
185
- flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: theme.zIndex.NORMAL, background: 'none' }, typographyStyles), sx), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
178
+ flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: theme.zIndex.NORMAL, background: 'none' }, typographyStyles), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
186
179
  onSelectOption && onSelectOption(option.value);
187
180
  close();
188
181
  }, ref: refs.setFloating, renderOption: renderOption, sx: {
package/dist/components/elements/Fields/TextInput/TextInput.stories.js CHANGED
@@ -28,5 +28,5 @@ export const WithLabel = {
28
28
  render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, label: "Search", placeholder: "Placeholder", sx: { mt: 2 } })] }))) })),
29
29
  };
30
30
  export const Inverted = {
31
- render: () => (_jsx(Column, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 2 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", label: "Search", inverted: true, sx: { mt: 2 } })] }))) }))),
31
+ render: () => (_jsx(Column, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 2 } }, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulInput, { inverted: true, size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", label: "Search", sx: { mt: 2 } })] }))) }))),
32
32
  };
package/dist/components/elements/Fields/TextInput/index.js CHANGED
@@ -66,7 +66,7 @@ export const TextInput = React.forwardRef((_a, ref) => {
66
66
  display, px: paddingX, backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, borderRadius: '4px', flexDirection: 'row', position: 'relative', alignItems: 'center', ':hover': focusStyles, ':focus': focusStyles }, typographyStyles), sx) }, { children: [_jsx("fieldset", Object.assign({ sx: {
67
67
  textAlign: 'left',
68
68
  position: 'absolute',
69
- inset: '-5px 0px 0px 0px',
69
+ inset: '-4px 0px 0px 0px',
70
70
  margin: '0px',
71
71
  padding: '0px 0.5rem',
72
72
  pointerEvents: 'none',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndlib/component-library",
3
- "version": "0.0.38",
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"