@toptal/picasso-utils 1.0.4-alpha-feature-tailwind-w21-55df77335.54 → 1.0.4-alpha-cjs-and-esm-publish-test-99555d2ed.65

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 (2) hide show
  1. package/package.json +5 -5
  2. package/src/utils/Modal/__snapshots__/test.tsx.snap +63 -45
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toptal/picasso-utils",
3
- "version": "1.0.4-alpha-feature-tailwind-w21-55df77335.54+55df77335",
3
+ "version": "1.0.4-alpha-cjs-and-esm-publish-test-99555d2ed.65+99555d2ed",
4
4
  "description": "Toptal UI components library - Utils",
5
5
  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
6
6
  "bugs": {
@@ -26,13 +26,13 @@
26
26
  "prepublishOnly": "yarn build:package"
27
27
  },
28
28
  "dependencies": {
29
- "@toptal/picasso-shared": "15.0.1-alpha-feature-tailwind-w21-55df77335.54+55df77335",
29
+ "@toptal/picasso-shared": "15.0.1-alpha-cjs-and-esm-publish-test-99555d2ed.65+99555d2ed",
30
30
  "ap-style-title-case": "^1.1.2",
31
31
  "classnames": "^2.5.1"
32
32
  },
33
33
  "devDependencies": {
34
- "@toptal/picasso-provider": "4.2.2-alpha-feature-tailwind-w21-55df77335.62+55df77335",
35
- "@toptal/picasso-test-utils": "1.1.2-alpha-feature-tailwind-w21-55df77335.54+55df77335",
34
+ "@toptal/picasso-provider": "4.2.2-alpha-cjs-and-esm-publish-test-99555d2ed.73+99555d2ed",
35
+ "@toptal/picasso-test-utils": "1.1.2-alpha-cjs-and-esm-publish-test-99555d2ed.65+99555d2ed",
36
36
  "styled-components": "^6.1.1"
37
37
  },
38
38
  "peerDependencies": {
@@ -49,5 +49,5 @@
49
49
  "!dist-package/tsconfig.tsbuildinfo",
50
50
  "src"
51
51
  ],
52
- "gitHead": "55df773353b01824d6e98a8ded59573284ed65c5"
52
+ "gitHead": "99555d2edcfa544cb6eb59eb953365a04c359b45"
53
53
  }
package/src/utils/Modal/__snapshots__/test.tsx.snap CHANGED
@@ -25,44 +25,50 @@ exports[`Modal useModal opens and closes modal 1`] = `
25
25
  </span>
26
26
  </button>
27
27
  <div
28
- class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
28
+ class="MuiDialog-root PicassoModal-root"
29
29
  role="presentation"
30
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
30
31
  >
31
32
  <div
32
33
  aria-hidden="true"
33
- class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
34
- style="transition-duration: 300ms; opacity: 1;"
34
+ class="MuiBackdrop-root"
35
+ style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
35
36
  />
36
37
  <div
37
- data-testid="sentinelStart"
38
+ data-test="sentinelStart"
38
39
  tabindex="0"
39
40
  />
40
41
  <div
41
- class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
42
- role="dialog"
43
- style="transition-duration: 300ms; opacity: 1;"
42
+ class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
43
+ role="none presentation"
44
+ style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
44
45
  tabindex="-1"
45
46
  >
46
- <p>
47
- Modal content
48
- </p>
49
- <button
50
- aria-disabled="false"
51
- class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
52
- data-component-type="button"
53
- role="button"
54
- tabindex="0"
55
- type="button"
47
+ <div
48
+ class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
49
+ role="dialog"
56
50
  >
57
- <span
58
- class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
51
+ <p>
52
+ Modal content
53
+ </p>
54
+ <button
55
+ aria-disabled="false"
56
+ class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4"
57
+ data-component-type="button"
58
+ role="button"
59
+ tabindex="0"
60
+ type="button"
59
61
  >
60
- Hide
61
- </span>
62
- </button>
62
+ <span
63
+ class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
64
+ >
65
+ Hide
66
+ </span>
67
+ </button>
68
+ </div>
63
69
  </div>
64
70
  <div
65
- data-testid="sentinelEnd"
71
+ data-test="sentinelEnd"
66
72
  tabindex="0"
67
73
  />
68
74
  </div>
@@ -140,58 +146,70 @@ exports[`Modal useModal shows multiple modals at the same time 1`] = `
140
146
  </button>
141
147
  <div
142
148
  aria-hidden="true"
143
- class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
149
+ class="MuiDialog-root PicassoModal-root"
144
150
  role="presentation"
151
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
145
152
  >
146
153
  <div
147
154
  aria-hidden="true"
148
- class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
149
- style="transition-duration: 300ms; opacity: 1;"
155
+ class="MuiBackdrop-root"
156
+ style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
150
157
  />
151
158
  <div
152
- data-testid="sentinelStart"
159
+ data-test="sentinelStart"
153
160
  tabindex="0"
154
161
  />
155
162
  <div
156
- class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
157
- role="dialog"
158
- style="transition-duration: 300ms; opacity: 1;"
163
+ class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
164
+ role="none presentation"
165
+ style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
159
166
  tabindex="-1"
160
167
  >
161
- <p>
162
- First modal content
163
- </p>
168
+ <div
169
+ class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
170
+ role="dialog"
171
+ >
172
+ <p>
173
+ First modal content
174
+ </p>
175
+ </div>
164
176
  </div>
165
177
  <div
166
- data-testid="sentinelEnd"
178
+ data-test="sentinelEnd"
167
179
  tabindex="0"
168
180
  />
169
181
  </div>
170
182
  <div
171
- class="base-Modal fixed z-modal inset-0 flex flex-col text-lg leading-[normal] justify-center items-center"
183
+ class="MuiDialog-root PicassoModal-root"
172
184
  role="presentation"
185
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
173
186
  >
174
187
  <div
175
188
  aria-hidden="true"
176
- class="opacity-0 transition-opacity fixed -z inset-0 bg-black -webkit-tap-highlight-color bg-opacity"
177
- style="transition-duration: 300ms; opacity: 1;"
189
+ class="MuiBackdrop-root"
190
+ style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
178
191
  />
179
192
  <div
180
- data-testid="sentinelStart"
193
+ data-test="sentinelStart"
181
194
  tabindex="0"
182
195
  />
183
196
  <div
184
- class="bg-white shadow-2 duration-300 delay-0 opacity-0 transition-opacity outline-none overflow-y flex flex-col m-4 sm:h-auto sm:m-8 max-w-[calc(100%_ sm:max-w-[calc(100%_ rounded-md w-[40.625rem] relative max-h-[calc(100%_ sm:max-h-[calc(100%_"
185
- role="dialog"
186
- style="transition-duration: 300ms; opacity: 1;"
197
+ class="MuiDialog-container PicassoModal-container MuiDialog-scrollPaper"
198
+ role="none presentation"
199
+ style="opacity: 1; webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
187
200
  tabindex="-1"
188
201
  >
189
- <p>
190
- Second modal content
191
- </p>
202
+ <div
203
+ class="MuiPaper-root MuiDialog-paper PicassoModal-paper PicassoModal-medium MuiDialog-paperScrollPaper MuiDialog-paperWidthFalse MuiPaper-elevation2"
204
+ role="dialog"
205
+ >
206
+ <p>
207
+ Second modal content
208
+ </p>
209
+ </div>
192
210
  </div>
193
211
  <div
194
- data-testid="sentinelEnd"
212
+ data-test="sentinelEnd"
195
213
  tabindex="0"
196
214
  />
197
215
  </div>