@sanity/ui 0.37.14-next.6 → 0.37.16

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 (54) hide show
  1. package/lib/dts/src/components/autocomplete/autocomplete.styles.d.ts +1 -1
  2. package/lib/dts/src/components/autocomplete/autocomplete.styles.d.ts.map +1 -1
  3. package/lib/dts/src/components/autocomplete/constants.d.ts.map +1 -1
  4. package/lib/dts/src/constants.d.ts +0 -10
  5. package/lib/dts/src/constants.d.ts.map +1 -1
  6. package/lib/dts/src/primitives/popover/{popoverArrow.d.ts → arrow.d.ts} +1 -1
  7. package/lib/dts/src/primitives/popover/arrow.d.ts.map +1 -0
  8. package/lib/dts/src/primitives/popover/modifiers/getPopoverModifiers.d.ts +4 -0
  9. package/lib/dts/src/primitives/popover/modifiers/getPopoverModifiers.d.ts.map +1 -0
  10. package/lib/dts/src/primitives/popover/modifiers/index.d.ts +2 -0
  11. package/lib/dts/src/primitives/popover/modifiers/index.d.ts.map +1 -0
  12. package/lib/dts/src/primitives/popover/modifiers/types.d.ts +18 -0
  13. package/lib/dts/src/primitives/popover/modifiers/types.d.ts.map +1 -0
  14. package/lib/dts/src/primitives/popover/modifiers/usePopoverModifiers.d.ts +4 -0
  15. package/lib/dts/src/primitives/popover/modifiers/usePopoverModifiers.d.ts.map +1 -0
  16. package/lib/dts/src/primitives/popover/popover.d.ts +5 -6
  17. package/lib/dts/src/primitives/popover/popover.d.ts.map +1 -1
  18. package/lib/dts/src/primitives/textArea/textArea.d.ts.map +1 -1
  19. package/lib/dts/src/primitives/textInput/textInput.d.ts.map +1 -1
  20. package/lib/dts/src/primitives/tooltip/tooltip.d.ts +0 -2
  21. package/lib/dts/src/primitives/tooltip/tooltip.d.ts.map +1 -1
  22. package/lib/dts/src/primitives/tooltip/tooltipArrow.d.ts.map +1 -1
  23. package/lib/dts/src/styles/input/textInputStyle.d.ts +3 -1
  24. package/lib/dts/src/styles/input/textInputStyle.d.ts.map +1 -1
  25. package/lib/sanity-ui.js +465 -490
  26. package/lib/sanity-ui.js.map +1 -1
  27. package/lib/sanity-ui.modern.mjs +584 -566
  28. package/lib/sanity-ui.modern.mjs.map +1 -1
  29. package/lib/sanity-ui.module.js +465 -491
  30. package/lib/sanity-ui.module.js.map +1 -1
  31. package/package.json +6 -5
  32. package/src/components/autocomplete/autocomplete.styles.tsx +5 -0
  33. package/src/components/autocomplete/constants.ts +3 -3
  34. package/src/constants.ts +0 -17
  35. package/src/primitives/popover/__workshop__/PlainStory.tsx +0 -1
  36. package/src/primitives/popover/__workshop__/RightAlignedStory.tsx +0 -1
  37. package/src/primitives/popover/__workshop__/TestStory.tsx +0 -1
  38. package/src/primitives/popover/{popoverArrow.tsx → arrow.tsx} +5 -5
  39. package/src/primitives/popover/modifiers/getPopoverModifiers.ts +137 -0
  40. package/src/primitives/popover/modifiers/index.ts +1 -0
  41. package/src/primitives/popover/modifiers/types.ts +18 -0
  42. package/src/primitives/popover/modifiers/usePopoverModifiers.ts +58 -0
  43. package/src/primitives/popover/popover.tsx +196 -229
  44. package/src/primitives/textArea/textArea.tsx +2 -0
  45. package/src/primitives/textInput/__workshop__/tones.tsx +222 -105
  46. package/src/primitives/textInput/textInput.tsx +5 -1
  47. package/src/primitives/tooltip/__workshop__/props.tsx +4 -5
  48. package/src/primitives/tooltip/tooltip.tsx +92 -159
  49. package/src/primitives/tooltip/tooltipArrow.tsx +10 -25
  50. package/src/styles/input/textInputStyle.ts +7 -5
  51. package/lib/dts/src/primitives/popover/popoverArrow.d.ts.map +0 -1
  52. package/lib/dts/src/primitives/popover/popoverCard.d.ts +0 -33
  53. package/lib/dts/src/primitives/popover/popoverCard.d.ts.map +0 -1
  54. package/src/primitives/popover/popoverCard.tsx +0 -160
package/src/primitives/textInput/__workshop__/tones.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import {Box, Card, Container, Stack, Text, TextInput} from '@sanity/ui'
1
+ import {Box, Card, Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
2
2
  import {useBoolean} from '@sanity/ui-workshop'
3
3
  import React from 'react'
4
4
 
@@ -10,114 +10,231 @@ export default function TonesStory() {
10
10
  const criticalTone = useBoolean('Critical', true)
11
11
 
12
12
  return (
13
- <Container width={1}>
14
- <Stack padding={[3, 4, 5]} space={4}>
15
- <Card padding={3}>
16
- <TextInput
17
- placeholder="default"
18
- prefix={
19
- <Box padding={3}>
20
- <Text>prefix</Text>
21
- </Box>
22
- }
23
- suffix={
24
- <Box padding={3}>
25
- <Text>suffix</Text>
26
- </Box>
27
- }
28
- />
29
- </Card>
13
+ <Card height="fill" tone="transparent">
14
+ <Flex align="center" height="fill" justify="center">
15
+ <Container width={1}>
16
+ <Flex>
17
+ <Card flex={1} scheme="light">
18
+ <Stack padding={[3, 4, 5]} space={4}>
19
+ <Card padding={3}>
20
+ <TextInput
21
+ placeholder="default"
22
+ prefix={
23
+ <Box padding={3}>
24
+ <Text>prefix</Text>
25
+ </Box>
26
+ }
27
+ suffix={
28
+ <Box padding={3}>
29
+ <Text>suffix</Text>
30
+ </Box>
31
+ }
32
+ />
33
+ </Card>
30
34
 
31
- {transparentTone && (
32
- <Card padding={3} tone="transparent">
33
- <TextInput
34
- placeholder="transparent"
35
- prefix={
36
- <Box padding={3}>
37
- <Text>prefix</Text>
38
- </Box>
39
- }
40
- suffix={
41
- <Box padding={3}>
42
- <Text>suffix</Text>
43
- </Box>
44
- }
45
- />
46
- </Card>
47
- )}
35
+ {transparentTone && (
36
+ <Card padding={3} tone="transparent">
37
+ <TextInput
38
+ placeholder="transparent"
39
+ prefix={
40
+ <Box padding={3}>
41
+ <Text>prefix</Text>
42
+ </Box>
43
+ }
44
+ suffix={
45
+ <Box padding={3}>
46
+ <Text>suffix</Text>
47
+ </Box>
48
+ }
49
+ />
50
+ </Card>
51
+ )}
48
52
 
49
- {primaryTone && (
50
- <Card padding={3} tone="primary">
51
- <TextInput
52
- placeholder="primary"
53
- prefix={
54
- <Box padding={3}>
55
- <Text>prefix</Text>
56
- </Box>
57
- }
58
- suffix={
59
- <Box padding={3}>
60
- <Text>suffix</Text>
61
- </Box>
62
- }
63
- />
64
- </Card>
65
- )}
53
+ {primaryTone && (
54
+ <Card padding={3} tone="primary">
55
+ <TextInput
56
+ placeholder="primary"
57
+ prefix={
58
+ <Box padding={3}>
59
+ <Text>prefix</Text>
60
+ </Box>
61
+ }
62
+ suffix={
63
+ <Box padding={3}>
64
+ <Text>suffix</Text>
65
+ </Box>
66
+ }
67
+ />
68
+ </Card>
69
+ )}
66
70
 
67
- {positiveTone && (
68
- <Card padding={3} tone="positive">
69
- <TextInput
70
- placeholder="positive"
71
- prefix={
72
- <Box padding={3}>
73
- <Text>prefix</Text>
74
- </Box>
75
- }
76
- suffix={
77
- <Box padding={3}>
78
- <Text>suffix</Text>
79
- </Box>
80
- }
81
- />
82
- </Card>
83
- )}
71
+ {positiveTone && (
72
+ <Card padding={3} tone="positive">
73
+ <TextInput
74
+ placeholder="positive"
75
+ prefix={
76
+ <Box padding={3}>
77
+ <Text>prefix</Text>
78
+ </Box>
79
+ }
80
+ suffix={
81
+ <Box padding={3}>
82
+ <Text>suffix</Text>
83
+ </Box>
84
+ }
85
+ />
86
+ </Card>
87
+ )}
84
88
 
85
- {cautionTone && (
86
- <Card padding={3} tone="caution">
87
- <TextInput
88
- placeholder="caution"
89
- prefix={
90
- <Box padding={3}>
91
- <Text>prefix</Text>
92
- </Box>
93
- }
94
- suffix={
95
- <Box padding={3}>
96
- <Text>suffix</Text>
97
- </Box>
98
- }
99
- />
100
- </Card>
101
- )}
89
+ {cautionTone && (
90
+ <Card padding={3} tone="caution">
91
+ <TextInput
92
+ placeholder="caution"
93
+ prefix={
94
+ <Box padding={3}>
95
+ <Text>prefix</Text>
96
+ </Box>
97
+ }
98
+ suffix={
99
+ <Box padding={3}>
100
+ <Text>suffix</Text>
101
+ </Box>
102
+ }
103
+ />
104
+ </Card>
105
+ )}
102
106
 
103
- {criticalTone && (
104
- <Card padding={3} tone="critical">
105
- <TextInput
106
- placeholder="critical"
107
- prefix={
108
- <Box padding={3}>
109
- <Text>prefix</Text>
110
- </Box>
111
- }
112
- suffix={
113
- <Box padding={3}>
114
- <Text>suffix</Text>
115
- </Box>
116
- }
117
- />
118
- </Card>
119
- )}
120
- </Stack>
121
- </Container>
107
+ {criticalTone && (
108
+ <Card padding={3} tone="critical">
109
+ <TextInput
110
+ placeholder="critical"
111
+ prefix={
112
+ <Box padding={3}>
113
+ <Text>prefix</Text>
114
+ </Box>
115
+ }
116
+ suffix={
117
+ <Box padding={3}>
118
+ <Text>suffix</Text>
119
+ </Box>
120
+ }
121
+ />
122
+ </Card>
123
+ )}
124
+ </Stack>
125
+ </Card>
126
+ <Card flex={1} scheme="dark">
127
+ <Stack padding={[3, 4, 5]} space={4}>
128
+ <Card padding={3}>
129
+ <TextInput
130
+ placeholder="default"
131
+ prefix={
132
+ <Box padding={3}>
133
+ <Text>prefix</Text>
134
+ </Box>
135
+ }
136
+ suffix={
137
+ <Box padding={3}>
138
+ <Text>suffix</Text>
139
+ </Box>
140
+ }
141
+ />
142
+ </Card>
143
+
144
+ {transparentTone && (
145
+ <Card padding={3} tone="transparent">
146
+ <TextInput
147
+ placeholder="transparent"
148
+ prefix={
149
+ <Box padding={3}>
150
+ <Text>prefix</Text>
151
+ </Box>
152
+ }
153
+ suffix={
154
+ <Box padding={3}>
155
+ <Text>suffix</Text>
156
+ </Box>
157
+ }
158
+ />
159
+ </Card>
160
+ )}
161
+
162
+ {primaryTone && (
163
+ <Card padding={3} tone="primary">
164
+ <TextInput
165
+ placeholder="primary"
166
+ prefix={
167
+ <Box padding={3}>
168
+ <Text>prefix</Text>
169
+ </Box>
170
+ }
171
+ suffix={
172
+ <Box padding={3}>
173
+ <Text>suffix</Text>
174
+ </Box>
175
+ }
176
+ />
177
+ </Card>
178
+ )}
179
+
180
+ {positiveTone && (
181
+ <Card padding={3} tone="positive">
182
+ <TextInput
183
+ placeholder="positive"
184
+ prefix={
185
+ <Box padding={3}>
186
+ <Text>prefix</Text>
187
+ </Box>
188
+ }
189
+ suffix={
190
+ <Box padding={3}>
191
+ <Text>suffix</Text>
192
+ </Box>
193
+ }
194
+ />
195
+ </Card>
196
+ )}
197
+
198
+ {cautionTone && (
199
+ <Card padding={3} tone="caution">
200
+ <TextInput
201
+ placeholder="caution"
202
+ prefix={
203
+ <Box padding={3}>
204
+ <Text>prefix</Text>
205
+ </Box>
206
+ }
207
+ suffix={
208
+ <Box padding={3}>
209
+ <Text>suffix</Text>
210
+ </Box>
211
+ }
212
+ />
213
+ </Card>
214
+ )}
215
+
216
+ {criticalTone && (
217
+ <Card padding={3} tone="critical">
218
+ <TextInput
219
+ placeholder="critical"
220
+ prefix={
221
+ <Box padding={3}>
222
+ <Text>prefix</Text>
223
+ </Box>
224
+ }
225
+ suffix={
226
+ <Box padding={3}>
227
+ <Text>suffix</Text>
228
+ </Box>
229
+ }
230
+ />
231
+ </Card>
232
+ )}
233
+ </Stack>
234
+ </Card>
235
+ </Flex>
236
+ </Container>
237
+ </Flex>
238
+ </Card>
122
239
  )
123
240
  }
package/src/primitives/textInput/textInput.tsx CHANGED
@@ -214,7 +214,9 @@ export const TextInput = forwardRef(function TextInput(
214
214
  $hasPrefix={$hasPrefix}
215
215
  $hasSuffix={$hasSuffix}
216
216
  $radius={radius}
217
+ $scheme={rootTheme.scheme}
217
218
  $tone={rootTheme.tone}
219
+ data-scheme={rootTheme.scheme}
218
220
  data-tone={rootTheme.tone}
219
221
  >
220
222
  {icon && (
@@ -243,7 +245,7 @@ export const TextInput = forwardRef(function TextInput(
243
245
  iconRight,
244
246
  padding,
245
247
  radius,
246
- rootTheme.tone,
248
+ rootTheme,
247
249
  $hasClearButton,
248
250
  $hasPrefix,
249
251
  $hasSuffix,
@@ -334,12 +336,14 @@ export const TextInput = forwardRef(function TextInput(
334
336
  <InputRoot>
335
337
  <Input
336
338
  data-as="input"
339
+ data-scheme={rootTheme.scheme}
337
340
  data-tone={rootTheme.tone}
338
341
  {...restProps}
339
342
  $fontSize={fontSize}
340
343
  $iconLeft={$hasIcon}
341
344
  $iconRight={$hasIconRight || $hasClearButton}
342
345
  $padding={padding}
346
+ $scheme={rootTheme.scheme}
343
347
  $space={space}
344
348
  $tone={rootTheme.tone}
345
349
  $weight={weight}
package/src/primitives/tooltip/__workshop__/props.tsx CHANGED
@@ -1,11 +1,11 @@
1
1
  import {Box, Button, Card, Flex, Text, Tooltip} from '@sanity/ui'
2
- import {useSelect} from '@sanity/ui-workshop'
2
+ import {useSelect, useText} from '@sanity/ui-workshop'
3
3
  import React from 'react'
4
- import {WORKSHOP_PLACEMENT_OPTIONS, WORKSHOP_SHADOW_OPTIONS} from '../../../__workshop__/constants'
4
+ import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
5
5
 
6
6
  export default function PropsStory() {
7
+ const content = useText('Content', 'Tooltip content')
7
8
  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
8
- const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 2)
9
9
 
10
10
  return (
11
11
  <Card height="fill">
@@ -13,12 +13,11 @@ export default function PropsStory() {
13
13
  <Tooltip
14
14
  content={
15
15
  <Box padding={2}>
16
- <Text size={1}>Tooltip content</Text>
16
+ <Text size={1}>{content}</Text>
17
17
  </Box>
18
18
  }
19
19
  placement={placement}
20
20
  portal
21
- shadow={shadow}
22
21
  >
23
22
  <Button mode="bleed" text="Hover me" />
24
23
  </Tooltip>