@ttoss/components 1.16.1 → 1.20.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.
Files changed (9) hide show
  1. package/README.md +5 -5
  2. package/dist/esm/index.js +119 -6
  3. package/dist/index.d.ts +292 -1
  4. package/dist/index.js +119 -11
  5. package/package.json +13 -5
  6. package/src/components/Accordion/Accordion.tsx +72 -0
  7. package/src/components/Modal/Modal.tsx +62 -0
  8. package/src/index.spec.tsx +6 -2
  9. package/src/index.ts +3 -1
package/README.md CHANGED
@@ -1,15 +1,15 @@
1
1
  # @ttoss/components
2
2
 
3
- ## 📚 About
3
+ ## About
4
4
 
5
- <strong>@ttoss/components</strong> is a set of React components that you can use to build your apps.
5
+ <strong>@ttoss/components</strong> is a set of React components that you can use to build your apps using ttoss technologies.
6
6
 
7
- ## 🚀 Getting Started
7
+ ## Getting Started
8
8
 
9
9
  ### Install @ttoss/components
10
10
 
11
11
  ```shell
12
- $ yarn add @ttoss/components
12
+ $ yarn add @ttoss/{components,ui}
13
13
  # or
14
- $ npm install @ttoss/components
14
+ $ npm install @ttoss/{components,ui}
15
15
  ```
package/dist/esm/index.js CHANGED
@@ -1,8 +1,66 @@
1
+ "use strict";
2
+
1
3
  // tsup.inject.js
2
4
  import * as React from "react";
3
5
 
4
- // src/components/InstallPwa/InstallPwa.tsx
6
+ // src/components/Accordion/Accordion.tsx
5
7
  import * as React2 from "react";
8
+ import {
9
+ AccordionItem,
10
+ AccordionItemButton,
11
+ AccordionItemHeading,
12
+ AccordionItemPanel,
13
+ Accordion as ReactAccessibleAccordion
14
+ } from "react-accessible-accordion";
15
+ import { Box, useTheme } from "@ttoss/ui";
16
+ import { css as createClassName } from "@emotion/css";
17
+ import { css as transformStyleObject } from "@theme-ui/css";
18
+ var Accordion = ({
19
+ children,
20
+ allowMultipleExpanded,
21
+ allowZeroExpanded,
22
+ preExpanded,
23
+ onChange,
24
+ ...boxProps
25
+ }) => {
26
+ const { theme } = useTheme();
27
+ const className = React2.useMemo(() => {
28
+ const styles = transformStyleObject({
29
+ ".accordion__item": {
30
+ marginBottom: 3
31
+ },
32
+ ".accordion__heading": {
33
+ padding: 2,
34
+ border: "1px solid",
35
+ borderColor: "black"
36
+ },
37
+ ".accordion__button": {},
38
+ ".accordion__panel": {
39
+ padding: 2
40
+ }
41
+ })(theme);
42
+ return createClassName(styles);
43
+ }, [theme]);
44
+ return /* @__PURE__ */ React2.createElement(Box, {
45
+ variant: "accordion",
46
+ className,
47
+ ...boxProps
48
+ }, /* @__PURE__ */ React2.createElement(ReactAccessibleAccordion, {
49
+ ...{
50
+ allowMultipleExpanded,
51
+ allowZeroExpanded,
52
+ preExpanded,
53
+ onChange
54
+ }
55
+ }, children));
56
+ };
57
+ Accordion.Item = AccordionItem;
58
+ Accordion.ItemButton = AccordionItemButton;
59
+ Accordion.ItemHeading = AccordionItemHeading;
60
+ Accordion.ItemPanel = AccordionItemPanel;
61
+
62
+ // src/components/InstallPwa/InstallPwa.tsx
63
+ import * as React3 from "react";
6
64
 
7
65
  // src/components/InstallPwa/InstallPwaUi.tsx
8
66
  import { Button, Flex, Text } from "@ttoss/ui";
@@ -33,9 +91,9 @@ var InstallPwaUi = ({ onInstall }) => {
33
91
 
34
92
  // src/components/InstallPwa/InstallPwa.tsx
35
93
  var InstallPwa = () => {
36
- const [supportsPwa, setSupportsPwa] = React2.useState(false);
37
- const [promptInstall, setPromptInstall] = React2.useState(null);
38
- React2.useEffect(() => {
94
+ const [supportsPwa, setSupportsPwa] = React3.useState(false);
95
+ const [promptInstall, setPromptInstall] = React3.useState(null);
96
+ React3.useEffect(() => {
39
97
  const handler = (e) => {
40
98
  e.preventDefault();
41
99
  setSupportsPwa(true);
@@ -54,10 +112,65 @@ var InstallPwa = () => {
54
112
  if (!supportsPwa) {
55
113
  return null;
56
114
  }
57
- return /* @__PURE__ */ React2.createElement(InstallPwaUi, {
115
+ return /* @__PURE__ */ React3.createElement(InstallPwaUi, {
58
116
  onInstall
59
117
  });
60
118
  };
119
+
120
+ // src/components/Modal/Modal.tsx
121
+ import { useResponsiveValue, useTheme as useTheme2 } from "@ttoss/ui";
122
+ import ReactModal from "react-modal";
123
+ ReactModal.defaultStyles = {
124
+ overlay: {},
125
+ content: {}
126
+ };
127
+ var Modal = (props) => {
128
+ var _a, _b, _c, _d, _e, _f, _g;
129
+ const { theme } = useTheme2();
130
+ const padding = useResponsiveValue([
131
+ (_a = theme.space) == null ? void 0 : _a[2],
132
+ (_b = theme.space) == null ? void 0 : _b[3],
133
+ (_c = theme.space) == null ? void 0 : _c[4]
134
+ ]) || 0;
135
+ const style = {
136
+ overlay: {
137
+ position: "fixed",
138
+ top: 0,
139
+ left: 0,
140
+ right: 0,
141
+ bottom: 0,
142
+ backgroundColor: "rgba(255, 255, 255, 0.5)",
143
+ display: "flex",
144
+ justifyContent: "center",
145
+ alignItems: "center",
146
+ padding,
147
+ ...(_d = props.style) == null ? void 0 : _d.overlay
148
+ },
149
+ content: {
150
+ background: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
151
+ padding,
152
+ WebkitOverflowScrolling: "touch",
153
+ overflow: "auto",
154
+ position: "relative",
155
+ top: "0px",
156
+ left: "0px",
157
+ right: "0px",
158
+ bottom: "0px",
159
+ border: "1px solid #ccc",
160
+ display: "flex",
161
+ flexDirection: "column",
162
+ alignItems: "center",
163
+ ...(_g = props.style) == null ? void 0 : _g.content
164
+ }
165
+ };
166
+ return /* @__PURE__ */ React.createElement(ReactModal, {
167
+ ...props,
168
+ style
169
+ });
170
+ };
171
+ Modal.setAppElement = ReactModal.setAppElement;
61
172
  export {
62
- InstallPwa
173
+ Accordion,
174
+ InstallPwa,
175
+ Modal
63
176
  };
package/dist/index.d.ts CHANGED
@@ -1,3 +1,294 @@
1
+ import * as react_accessible_accordion_dist_types_helpers_DisplayName from 'react-accessible-accordion/dist/types/helpers/DisplayName';
2
+ import * as react_accessible_accordion_dist_types_components_ItemContext from 'react-accessible-accordion/dist/types/components/ItemContext';
3
+ import * as react_accessible_accordion_dist_types_helpers_types from 'react-accessible-accordion/dist/types/helpers/types';
4
+ import * as React from 'react';
5
+ import { BoxProps } from '@ttoss/ui';
6
+ import ReactModal from 'react-modal';
7
+
8
+ declare type AccordionProps = BoxProps & {
9
+ allowMultipleExpanded?: boolean;
10
+ allowZeroExpanded?: boolean;
11
+ preExpanded?: string[];
12
+ /**
13
+ * Callback which is invoked when items are expanded or collapsed. Gets passed uuids of the currently expanded AccordionItems.
14
+ */
15
+ onChange?: (args: string[]) => void;
16
+ };
17
+ declare const Accordion: {
18
+ ({ children, allowMultipleExpanded, allowZeroExpanded, preExpanded, onChange, ...boxProps }: AccordionProps): JSX.Element;
19
+ Item: {
20
+ ({ uuid: customUuid, dangerouslySetExpanded, className, activeClassName, ...rest }: react_accessible_accordion_dist_types_helpers_types.DivAttributes & {
21
+ uuid?: react_accessible_accordion_dist_types_components_ItemContext.ID | undefined;
22
+ activeClassName?: string | undefined;
23
+ dangerouslySetExpanded?: boolean | undefined;
24
+ }): JSX.Element;
25
+ displayName: react_accessible_accordion_dist_types_helpers_DisplayName.default;
26
+ };
27
+ ItemButton: React.FC<{
28
+ children?: React.ReactNode;
29
+ slot?: string | undefined;
30
+ style?: React.CSSProperties | undefined;
31
+ title?: string | undefined;
32
+ defaultChecked?: boolean | undefined;
33
+ defaultValue?: string | number | readonly string[] | undefined;
34
+ suppressContentEditableWarning?: boolean | undefined;
35
+ suppressHydrationWarning?: boolean | undefined;
36
+ accessKey?: string | undefined;
37
+ className?: string | undefined;
38
+ contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
39
+ contextMenu?: string | undefined;
40
+ dir?: string | undefined;
41
+ draggable?: (boolean | "true" | "false") | undefined;
42
+ hidden?: boolean | undefined;
43
+ lang?: string | undefined;
44
+ placeholder?: string | undefined;
45
+ spellCheck?: (boolean | "true" | "false") | undefined;
46
+ translate?: "yes" | "no" | undefined;
47
+ radioGroup?: string | undefined;
48
+ about?: string | undefined;
49
+ datatype?: string | undefined;
50
+ inlist?: any;
51
+ prefix?: string | undefined;
52
+ property?: string | undefined;
53
+ resource?: string | undefined;
54
+ typeof?: string | undefined;
55
+ vocab?: string | undefined;
56
+ autoCapitalize?: string | undefined;
57
+ autoCorrect?: string | undefined;
58
+ autoSave?: string | undefined;
59
+ color?: string | undefined;
60
+ itemProp?: string | undefined;
61
+ itemScope?: boolean | undefined;
62
+ itemType?: string | undefined;
63
+ itemID?: string | undefined;
64
+ itemRef?: string | undefined;
65
+ results?: number | undefined;
66
+ security?: string | undefined;
67
+ unselectable?: "on" | "off" | undefined;
68
+ inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
69
+ is?: string | undefined;
70
+ 'aria-activedescendant'?: string | undefined;
71
+ 'aria-atomic'?: (boolean | "true" | "false") | undefined;
72
+ 'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
73
+ 'aria-busy'?: (boolean | "true" | "false") | undefined;
74
+ 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
75
+ 'aria-colcount'?: number | undefined;
76
+ 'aria-colindex'?: number | undefined;
77
+ 'aria-colspan'?: number | undefined;
78
+ 'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
79
+ 'aria-describedby'?: string | undefined;
80
+ 'aria-details'?: string | undefined;
81
+ 'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
82
+ 'aria-errormessage'?: string | undefined;
83
+ 'aria-flowto'?: string | undefined;
84
+ 'aria-grabbed'?: (boolean | "true" | "false") | undefined;
85
+ 'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
86
+ 'aria-hidden'?: (boolean | "true" | "false") | undefined;
87
+ 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
88
+ 'aria-keyshortcuts'?: string | undefined;
89
+ 'aria-label'?: string | undefined;
90
+ 'aria-labelledby'?: string | undefined;
91
+ 'aria-level'?: number | undefined;
92
+ 'aria-live'?: "off" | "assertive" | "polite" | undefined;
93
+ 'aria-modal'?: (boolean | "true" | "false") | undefined;
94
+ 'aria-multiline'?: (boolean | "true" | "false") | undefined;
95
+ 'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
96
+ 'aria-orientation'?: "horizontal" | "vertical" | undefined;
97
+ 'aria-owns'?: string | undefined;
98
+ 'aria-placeholder'?: string | undefined;
99
+ 'aria-posinset'?: number | undefined;
100
+ 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
101
+ 'aria-readonly'?: (boolean | "true" | "false") | undefined;
102
+ 'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
103
+ 'aria-required'?: (boolean | "true" | "false") | undefined;
104
+ 'aria-roledescription'?: string | undefined;
105
+ 'aria-rowcount'?: number | undefined;
106
+ 'aria-rowindex'?: number | undefined;
107
+ 'aria-rowspan'?: number | undefined;
108
+ 'aria-selected'?: (boolean | "true" | "false") | undefined;
109
+ 'aria-setsize'?: number | undefined;
110
+ 'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
111
+ 'aria-valuemax'?: number | undefined;
112
+ 'aria-valuemin'?: number | undefined;
113
+ 'aria-valuenow'?: number | undefined;
114
+ 'aria-valuetext'?: string | undefined;
115
+ dangerouslySetInnerHTML?: {
116
+ __html: string;
117
+ } | undefined;
118
+ onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
119
+ onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
120
+ onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
121
+ onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
122
+ onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
123
+ onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
124
+ onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
125
+ onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
126
+ onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
127
+ onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
128
+ onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
129
+ onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
130
+ onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
131
+ onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
132
+ onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
133
+ onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
134
+ onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
135
+ onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
136
+ onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
137
+ onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
138
+ onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
139
+ onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
140
+ onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
141
+ onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
142
+ onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
143
+ onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
144
+ onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
145
+ onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
146
+ onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
147
+ onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
148
+ onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
149
+ onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
150
+ onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
151
+ onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
152
+ onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
153
+ onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
154
+ onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
155
+ onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
156
+ onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
157
+ onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
158
+ onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
159
+ onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
160
+ onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
161
+ onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
162
+ onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
163
+ onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
164
+ onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
165
+ onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
166
+ onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
167
+ onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
168
+ onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
169
+ onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
170
+ onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
171
+ onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
172
+ onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
173
+ onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
174
+ onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
175
+ onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
176
+ onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
177
+ onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
178
+ onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
179
+ onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
180
+ onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
181
+ onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
182
+ onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
183
+ onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
184
+ onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
185
+ onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
186
+ onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
187
+ onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
188
+ onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
189
+ onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
190
+ onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
191
+ onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
192
+ onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
193
+ onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
194
+ onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
195
+ onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
196
+ onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
197
+ onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
198
+ onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
199
+ onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
200
+ onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
201
+ onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
202
+ onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
203
+ onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
204
+ onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
205
+ onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
206
+ onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
207
+ onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
208
+ onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
209
+ onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
210
+ onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
211
+ onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
212
+ onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
213
+ onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
214
+ onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
215
+ onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
216
+ onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
217
+ onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
218
+ onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
219
+ onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
220
+ onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
221
+ onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
222
+ onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
223
+ onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
224
+ onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
225
+ onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
226
+ onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
227
+ onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
228
+ onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
229
+ onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
230
+ onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
231
+ onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
232
+ onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
233
+ onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
234
+ onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
235
+ onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
236
+ onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
237
+ onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
238
+ onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
239
+ onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
240
+ onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
241
+ onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
242
+ onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
243
+ onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
244
+ onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
245
+ onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
246
+ onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
247
+ onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
248
+ onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
249
+ onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
250
+ onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
251
+ onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
252
+ onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
253
+ onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
254
+ onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
255
+ onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
256
+ onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
257
+ onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
258
+ onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
259
+ onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
260
+ onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
261
+ onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
262
+ onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
263
+ onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
264
+ onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
265
+ onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
266
+ onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
267
+ onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
268
+ onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
269
+ onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
270
+ onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
271
+ onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
272
+ onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
273
+ onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
274
+ onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
275
+ onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
276
+ onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
277
+ onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
278
+ }>;
279
+ ItemHeading: React.FC<react_accessible_accordion_dist_types_helpers_types.DivAttributes>;
280
+ ItemPanel: ({ className, region, id, ...rest }: react_accessible_accordion_dist_types_helpers_types.DivAttributes & {
281
+ region?: boolean | undefined;
282
+ className?: string | undefined;
283
+ }) => JSX.Element;
284
+ };
285
+
1
286
  declare const InstallPwa: () => JSX.Element | null;
2
287
 
3
- export { InstallPwa };
288
+ declare type ModalProps = ReactModal.Props;
289
+ declare const Modal: {
290
+ (props: ModalProps): JSX.Element;
291
+ setAppElement: typeof ReactModal.setAppElement;
292
+ };
293
+
294
+ export { Accordion, AccordionProps, InstallPwa, Modal, ModalProps };
package/dist/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ "use strict";
1
2
  var __create = Object.create;
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -22,27 +23,79 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
22
23
  // src/index.ts
23
24
  var src_exports = {};
24
25
  __export(src_exports, {
25
- InstallPwa: () => InstallPwa
26
+ Accordion: () => Accordion,
27
+ InstallPwa: () => InstallPwa,
28
+ Modal: () => Modal
26
29
  });
27
30
  module.exports = __toCommonJS(src_exports);
28
31
 
29
32
  // tsup.inject.js
30
33
  var React = __toESM(require("react"));
31
34
 
32
- // src/components/InstallPwa/InstallPwa.tsx
35
+ // src/components/Accordion/Accordion.tsx
33
36
  var React2 = __toESM(require("react"));
37
+ var import_react_accessible_accordion = require("react-accessible-accordion");
38
+ var import_ui = require("@ttoss/ui");
39
+ var import_css = require("@emotion/css");
40
+ var import_css2 = require("@theme-ui/css");
41
+ var Accordion = ({
42
+ children,
43
+ allowMultipleExpanded,
44
+ allowZeroExpanded,
45
+ preExpanded,
46
+ onChange,
47
+ ...boxProps
48
+ }) => {
49
+ const { theme } = (0, import_ui.useTheme)();
50
+ const className = React2.useMemo(() => {
51
+ const styles = (0, import_css2.css)({
52
+ ".accordion__item": {
53
+ marginBottom: 3
54
+ },
55
+ ".accordion__heading": {
56
+ padding: 2,
57
+ border: "1px solid",
58
+ borderColor: "black"
59
+ },
60
+ ".accordion__button": {},
61
+ ".accordion__panel": {
62
+ padding: 2
63
+ }
64
+ })(theme);
65
+ return (0, import_css.css)(styles);
66
+ }, [theme]);
67
+ return /* @__PURE__ */ React2.createElement(import_ui.Box, {
68
+ variant: "accordion",
69
+ className,
70
+ ...boxProps
71
+ }, /* @__PURE__ */ React2.createElement(import_react_accessible_accordion.Accordion, {
72
+ ...{
73
+ allowMultipleExpanded,
74
+ allowZeroExpanded,
75
+ preExpanded,
76
+ onChange
77
+ }
78
+ }, children));
79
+ };
80
+ Accordion.Item = import_react_accessible_accordion.AccordionItem;
81
+ Accordion.ItemButton = import_react_accessible_accordion.AccordionItemButton;
82
+ Accordion.ItemHeading = import_react_accessible_accordion.AccordionItemHeading;
83
+ Accordion.ItemPanel = import_react_accessible_accordion.AccordionItemPanel;
84
+
85
+ // src/components/InstallPwa/InstallPwa.tsx
86
+ var React3 = __toESM(require("react"));
34
87
 
35
88
  // src/components/InstallPwa/InstallPwaUi.tsx
36
- var import_ui = require("@ttoss/ui");
89
+ var import_ui2 = require("@ttoss/ui");
37
90
  var InstallPwaUi = ({ onInstall }) => {
38
- return /* @__PURE__ */ React.createElement(import_ui.Flex, {
91
+ return /* @__PURE__ */ React.createElement(import_ui2.Flex, {
39
92
  sx: {
40
93
  position: "absolute",
41
94
  bottom: 4,
42
95
  width: "100%",
43
96
  justifyContent: "center"
44
97
  }
45
- }, /* @__PURE__ */ React.createElement(import_ui.Flex, {
98
+ }, /* @__PURE__ */ React.createElement(import_ui2.Flex, {
46
99
  sx: {
47
100
  backgroundColor: "background",
48
101
  justifyContent: "center",
@@ -54,16 +107,16 @@ var InstallPwaUi = ({ onInstall }) => {
54
107
  borderRadius: 1,
55
108
  padding: 4
56
109
  }
57
- }, /* @__PURE__ */ React.createElement(import_ui.Text, null, "Deseja instalar o nosso aplicativo?"), /* @__PURE__ */ React.createElement(import_ui.Button, {
110
+ }, /* @__PURE__ */ React.createElement(import_ui2.Text, null, "Deseja instalar o nosso aplicativo?"), /* @__PURE__ */ React.createElement(import_ui2.Button, {
58
111
  onClick: onInstall
59
112
  }, "Instalar")));
60
113
  };
61
114
 
62
115
  // src/components/InstallPwa/InstallPwa.tsx
63
116
  var InstallPwa = () => {
64
- const [supportsPwa, setSupportsPwa] = React2.useState(false);
65
- const [promptInstall, setPromptInstall] = React2.useState(null);
66
- React2.useEffect(() => {
117
+ const [supportsPwa, setSupportsPwa] = React3.useState(false);
118
+ const [promptInstall, setPromptInstall] = React3.useState(null);
119
+ React3.useEffect(() => {
67
120
  const handler = (e) => {
68
121
  e.preventDefault();
69
122
  setSupportsPwa(true);
@@ -82,11 +135,66 @@ var InstallPwa = () => {
82
135
  if (!supportsPwa) {
83
136
  return null;
84
137
  }
85
- return /* @__PURE__ */ React2.createElement(InstallPwaUi, {
138
+ return /* @__PURE__ */ React3.createElement(InstallPwaUi, {
86
139
  onInstall
87
140
  });
88
141
  };
142
+
143
+ // src/components/Modal/Modal.tsx
144
+ var import_ui3 = require("@ttoss/ui");
145
+ var import_react_modal = __toESM(require("react-modal"));
146
+ import_react_modal.default.defaultStyles = {
147
+ overlay: {},
148
+ content: {}
149
+ };
150
+ var Modal = (props) => {
151
+ var _a, _b, _c, _d, _e, _f, _g;
152
+ const { theme } = (0, import_ui3.useTheme)();
153
+ const padding = (0, import_ui3.useResponsiveValue)([
154
+ (_a = theme.space) == null ? void 0 : _a[2],
155
+ (_b = theme.space) == null ? void 0 : _b[3],
156
+ (_c = theme.space) == null ? void 0 : _c[4]
157
+ ]) || 0;
158
+ const style = {
159
+ overlay: {
160
+ position: "fixed",
161
+ top: 0,
162
+ left: 0,
163
+ right: 0,
164
+ bottom: 0,
165
+ backgroundColor: "rgba(255, 255, 255, 0.5)",
166
+ display: "flex",
167
+ justifyContent: "center",
168
+ alignItems: "center",
169
+ padding,
170
+ ...(_d = props.style) == null ? void 0 : _d.overlay
171
+ },
172
+ content: {
173
+ background: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
174
+ padding,
175
+ WebkitOverflowScrolling: "touch",
176
+ overflow: "auto",
177
+ position: "relative",
178
+ top: "0px",
179
+ left: "0px",
180
+ right: "0px",
181
+ bottom: "0px",
182
+ border: "1px solid #ccc",
183
+ display: "flex",
184
+ flexDirection: "column",
185
+ alignItems: "center",
186
+ ...(_g = props.style) == null ? void 0 : _g.content
187
+ }
188
+ };
189
+ return /* @__PURE__ */ React.createElement(import_react_modal.default, {
190
+ ...props,
191
+ style
192
+ });
193
+ };
194
+ Modal.setAppElement = import_react_modal.default.setAppElement;
89
195
  // Annotate the CommonJS export names for ESM import in node:
90
196
  0 && (module.exports = {
91
- InstallPwa
197
+ Accordion,
198
+ InstallPwa,
199
+ Modal
92
200
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/components",
3
- "version": "1.16.1",
3
+ "version": "1.20.0",
4
4
  "description": "React components.",
5
5
  "license": "UNLICENSED",
6
6
  "publishConfig": {
@@ -31,14 +31,22 @@
31
31
  "dev": "yarn workspace @docs/storybook run dev"
32
32
  },
33
33
  "dependencies": {
34
- "@ttoss/ui": "^1.16.1"
34
+ "@emotion/css": "^11.10.0",
35
+ "@theme-ui/css": "^0.14.7",
36
+ "@types/react-modal": "^3.13.1",
37
+ "react-accessible-accordion": "^5.0.0",
38
+ "react-modal": "^3.15.1"
35
39
  },
36
40
  "peerDependencies": {
41
+ "@ttoss/ui": "^1.16.5",
37
42
  "react": ">=16.8.0"
38
43
  },
39
44
  "devDependencies": {
40
- "@ttoss/config": "^1.16.1",
41
- "@ttoss/test-utils": "^1.16.1"
45
+ "@ttoss/config": "^1.15.2",
46
+ "@ttoss/test-utils": "^1.15.2",
47
+ "@ttoss/ui": "^1.18.0",
48
+ "@types/jest": "^28.1.5",
49
+ "jest": "^28.1.3"
42
50
  },
43
- "gitHead": "d4caf53cd81bff99f232c6908a78e243ab9ed322"
51
+ "gitHead": "c6ea722f669db5161ea4bfe585b07eaff1d94bc4"
44
52
  }
package/src/components/Accordion/Accordion.tsx ADDED
@@ -0,0 +1,72 @@
1
+ import * as React from 'react';
2
+ import {
3
+ AccordionItem,
4
+ AccordionItemButton,
5
+ AccordionItemHeading,
6
+ AccordionItemPanel,
7
+ Accordion as ReactAccessibleAccordion,
8
+ } from 'react-accessible-accordion';
9
+ import { Box, BoxProps, useTheme } from '@ttoss/ui';
10
+ import { css as createClassName } from '@emotion/css';
11
+ import { css as transformStyleObject } from '@theme-ui/css';
12
+
13
+ export type AccordionProps = BoxProps & {
14
+ // https://github.com/springload/react-accessible-accordion#accordion
15
+ allowMultipleExpanded?: boolean;
16
+ allowZeroExpanded?: boolean;
17
+ preExpanded?: string[];
18
+ /**
19
+ * Callback which is invoked when items are expanded or collapsed. Gets passed uuids of the currently expanded AccordionItems.
20
+ */
21
+ onChange?: (args: string[]) => void;
22
+ };
23
+
24
+ export const Accordion = ({
25
+ children,
26
+ allowMultipleExpanded,
27
+ allowZeroExpanded,
28
+ preExpanded,
29
+ onChange,
30
+ ...boxProps
31
+ }: AccordionProps) => {
32
+ const { theme } = useTheme();
33
+
34
+ const className = React.useMemo(() => {
35
+ const styles = transformStyleObject({
36
+ '.accordion__item': {
37
+ marginBottom: 3,
38
+ },
39
+ '.accordion__heading': {
40
+ padding: 2,
41
+ border: '1px solid',
42
+ borderColor: 'black',
43
+ },
44
+ '.accordion__button': {},
45
+ '.accordion__panel': {
46
+ padding: 2,
47
+ },
48
+ })(theme);
49
+
50
+ return createClassName(styles);
51
+ }, [theme]);
52
+
53
+ return (
54
+ <Box variant="accordion" className={className} {...boxProps}>
55
+ <ReactAccessibleAccordion
56
+ {...{
57
+ allowMultipleExpanded,
58
+ allowZeroExpanded,
59
+ preExpanded,
60
+ onChange,
61
+ }}
62
+ >
63
+ {children}
64
+ </ReactAccessibleAccordion>
65
+ </Box>
66
+ );
67
+ };
68
+
69
+ Accordion.Item = AccordionItem;
70
+ Accordion.ItemButton = AccordionItemButton;
71
+ Accordion.ItemHeading = AccordionItemHeading;
72
+ Accordion.ItemPanel = AccordionItemPanel;
package/src/components/Modal/Modal.tsx ADDED
@@ -0,0 +1,62 @@
1
+ import { useResponsiveValue, useTheme } from '@ttoss/ui';
2
+ import ReactModal from 'react-modal';
3
+
4
+ ReactModal.defaultStyles = {
5
+ overlay: {},
6
+ content: {},
7
+ };
8
+
9
+ export type ModalProps = ReactModal.Props;
10
+
11
+ export const Modal = (props: ModalProps) => {
12
+ const { theme } = useTheme();
13
+
14
+ const padding =
15
+ useResponsiveValue([
16
+ theme.space?.[2],
17
+ theme.space?.[3],
18
+ theme.space?.[4],
19
+ ]) || 0;
20
+
21
+ const style: ReactModal.Styles = {
22
+ overlay: {
23
+ position: 'fixed',
24
+ top: 0,
25
+ left: 0,
26
+ right: 0,
27
+ bottom: 0,
28
+ backgroundColor: 'rgba(255, 255, 255, 0.5)',
29
+ display: 'flex',
30
+ justifyContent: 'center',
31
+ alignItems: 'center',
32
+ padding,
33
+ ...props.style?.overlay,
34
+ },
35
+ content: {
36
+ /**
37
+ * Theme
38
+ */
39
+ background: theme.rawColors?.background?.toString() || '#fff',
40
+ padding,
41
+ /**
42
+ * General
43
+ */
44
+ WebkitOverflowScrolling: 'touch',
45
+ overflow: 'auto',
46
+ position: 'relative',
47
+ top: '0px',
48
+ left: '0px',
49
+ right: '0px',
50
+ bottom: '0px',
51
+ border: '1px solid #ccc',
52
+ display: 'flex',
53
+ flexDirection: 'column',
54
+ alignItems: 'center',
55
+ ...props.style?.content,
56
+ },
57
+ };
58
+
59
+ return <ReactModal {...props} style={style} />;
60
+ };
61
+
62
+ Modal.setAppElement = ReactModal.setAppElement;
package/src/index.spec.tsx CHANGED
@@ -1,5 +1,9 @@
1
1
  import * as componentsModule from './index';
2
2
 
3
- test('should export components', () => {
4
- expect(componentsModule.InstallPwa).toBeDefined();
3
+ test.each([
4
+ componentsModule.Accordion,
5
+ componentsModule.InstallPwa,
6
+ componentsModule.Modal,
7
+ ])('should export components %#', (Component) => {
8
+ expect(Component).toBeDefined();
5
9
  });
package/src/index.ts CHANGED
@@ -1 +1,3 @@
1
- export { InstallPwa } from './components/InstallPwa/InstallPwa';
1
+ export * from './components/Accordion/Accordion';
2
+ export * from './components/InstallPwa/InstallPwa';
3
+ export * from './components/Modal/Modal';