@nypl/design-system-react-components 3.1.6-container-queries-rc → 3.1.7

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 (10) hide show
  1. package/dist/design-system-react-components.cjs +42 -42
  2. package/dist/design-system-react-components.js +8791 -8790
  3. package/dist/src/components/Accordion/Accordion.d.ts +4 -0
  4. package/dist/src/components/Breadcrumbs/Breadcrumbs.d.ts +1 -1
  5. package/dist/src/components/MultiSelect/MultiSelect.d.ts +3 -0
  6. package/dist/src/theme/components/breadcrumb.d.ts +40 -1
  7. package/dist/src/theme/components/card.d.ts +71 -101
  8. package/dist/src/theme/components/featuredContent.d.ts +32 -63
  9. package/dist/src/theme/components/searchBar.d.ts +22 -101
  10. package/package.json +6 -6
package/dist/src/components/Accordion/Accordion.d.ts CHANGED
@@ -27,6 +27,10 @@ export interface AccordionProps {
27
27
  * within accordion panel is greater than height set by panelMaxHeight, a
28
28
  * scrollbar will appear for accordion panel. */
29
29
  panelMaxHeight?: string;
30
+ /** For internal use only. This value toggles the accordion closed if the
31
+ * MultiSelect's `closeOnBlur` prop is true and the user clicks outside the
32
+ * component. */
33
+ userClickedOutside?: boolean;
30
34
  }
31
35
  /**
32
36
  * Accordion component that shows content on toggle. Can be used to display
package/dist/src/components/Breadcrumbs/Breadcrumbs.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ChakraComponent } from "@chakra-ui/react";
2
2
  import React from "react";
3
- export declare const breadcrumbTypeArray: readonly ["blogs", "booksAndMore", "brand", "connect", "education", "locations", "research", "whatsOn"];
3
+ export declare const breadcrumbTypeArray: readonly ["blogs", "booksAndMore", "brand", "connect", "digitalCollections", "education", "locations", "research", "whatsOn"];
4
4
  export type BreadcrumbsTypes = typeof breadcrumbTypeArray[number];
5
5
  export interface BreadcrumbsDataProps {
6
6
  url: string;
package/dist/src/components/MultiSelect/MultiSelect.d.ts CHANGED
@@ -18,6 +18,9 @@ export interface SelectedItems {
18
18
  export interface MultiSelectProps {
19
19
  /** The button text rendered within the MultiSelect. */
20
20
  buttonText: string;
21
+ /** Determines whether the component will toggle to the closed state
22
+ * when it loses focus. The default value is false. */
23
+ closeOnBlur?: boolean;
21
24
  /** The number of items that will be visible in the list when the component
22
25
  * first loads. */
23
26
  defaultItemsVisible?: number;
package/dist/src/theme/components/breadcrumb.d.ts CHANGED
@@ -152,6 +152,45 @@ declare const Breadcrumb: {
152
152
  bg: string;
153
153
  };
154
154
  };
155
+ digitalCollections: {
156
+ bg: string;
157
+ color: string;
158
+ _dark: {
159
+ bg: string;
160
+ };
161
+ a: {
162
+ _hover: {
163
+ color: string;
164
+ };
165
+ _dark: {
166
+ _hover: {
167
+ color: string;
168
+ };
169
+ };
170
+ _focus: {
171
+ boxShadow: string;
172
+ outline: string;
173
+ outlineOffset: string;
174
+ outlineColor: any;
175
+ zIndex: string;
176
+ _dark: {
177
+ outlineColor: any;
178
+ };
179
+ };
180
+ };
181
+ "li:last-child": {
182
+ ".chakra-breadcrumb__link": {
183
+ _hover: {
184
+ color: string;
185
+ };
186
+ _dark: {
187
+ _hover: {
188
+ color: string;
189
+ };
190
+ };
191
+ };
192
+ };
193
+ };
155
194
  education: {
156
195
  bg: string;
157
196
  _dark: {
@@ -179,7 +218,7 @@ declare const Breadcrumb: {
179
218
  };
180
219
  defaultProps?: {
181
220
  size?: string | number;
182
- variant?: "blogs" | "booksAndMore" | "brand" | "connect" | "education" | "locations" | "research" | "whatsOn";
221
+ variant?: "blogs" | "booksAndMore" | "brand" | "connect" | "digitalCollections" | "education" | "locations" | "research" | "whatsOn";
183
222
  colorScheme?: string;
184
223
  };
185
224
  };
package/dist/src/theme/components/card.d.ts CHANGED
@@ -7,7 +7,6 @@ interface CardBaseStyleProps extends StyleFunctionProps {
7
7
  isCentered: boolean;
8
8
  layout: string;
9
9
  mainActionLink: boolean;
10
- imageSize: keyof typeof imageSizes;
11
10
  }
12
11
  interface CardImageBaseStyleProps extends StyleFunctionProps {
13
12
  imageIsAtEnd: boolean;
@@ -52,97 +51,13 @@ declare const imageSizes: {
52
51
  };
53
52
  declare const _default: {
54
53
  ReservoirCard: {
55
- baseStyle?: ({ hasImage, imageIsAtEnd, isAlignedRightActions, isBordered, isCentered, layout, mainActionLink, imageSize, }: CardBaseStyleProps) => {
54
+ baseStyle?: ({ hasImage, imageIsAtEnd, isAlignedRightActions, isBordered, isCentered, layout, mainActionLink, }: CardBaseStyleProps) => {
56
55
  base: {
57
- [x: string]: string | {
58
- "[data-wrapper]": {
59
- flexFlow: string;
60
- };
61
- "[data-actions]": {
62
- flexShrink: string;
63
- marginStart: string;
64
- marginTop: string;
65
- maxWidth: string;
66
- };
67
- "[data-body]": {
68
- width: string;
69
- flexBasis?: undefined;
70
- display?: undefined;
71
- flexFlow?: undefined;
72
- };
73
- "[data-image]": any;
74
- } | {
75
- "[data-body]": {
76
- flexBasis: string;
77
- width?: undefined;
78
- display?: undefined;
79
- flexFlow?: undefined;
80
- };
81
- "[data-wrapper]"?: undefined;
82
- "[data-actions]"?: undefined;
83
- "[data-image]"?: undefined;
84
- } | {
85
- "[data-wrapper]": {
86
- flexFlow: string;
87
- };
88
- "[data-actions]": {
89
- flexShrink: string;
90
- marginStart: string;
91
- marginTop: string;
92
- maxWidth: string;
93
- };
94
- "[data-body]": {
95
- display: string;
96
- flexFlow: string;
97
- width: string;
98
- flexBasis?: undefined;
99
- };
100
- "[data-image]": {
101
- flex: string;
102
- width: string;
103
- maxWidth: string;
104
- margin: string;
105
- } | {
106
- flex: string;
107
- maxWidth: string;
108
- margin: string;
109
- width: any;
110
- } | {
111
- flex: string;
112
- maxWidth: string;
113
- margin: string;
114
- width: any;
115
- } | {
116
- flex: string;
117
- maxWidth: string;
118
- margin: string;
119
- width: any;
120
- } | {
121
- flex: string;
122
- maxWidth: string;
123
- margin: string;
124
- width: any;
125
- };
126
- };
127
- containerType: string;
128
- "@container (min-width: 0px)": {
129
- "[data-wrapper]": {
130
- flexFlow: string;
131
- };
132
- "[data-actions]": {
133
- flexShrink: string;
134
- marginStart: string;
135
- marginTop: string;
136
- maxWidth: string;
137
- };
138
- "[data-body]": {
139
- width: string;
140
- };
141
- "[data-image]": any;
142
- };
143
- };
144
- wrapper: {
145
56
  display: string;
57
+ flexFlow: {
58
+ base: string;
59
+ md: string;
60
+ };
146
61
  maxWidth: string;
147
62
  textAlign: string;
148
63
  alignItems: string;
@@ -151,9 +66,9 @@ declare const _default: {
151
66
  _dark: {
152
67
  borderColor: string;
153
68
  };
154
- flexFlow: string;
155
69
  } | {
156
70
  display: string;
71
+ flexFlow: string;
157
72
  maxWidth?: undefined;
158
73
  textAlign: string;
159
74
  alignItems: string;
@@ -162,32 +77,63 @@ declare const _default: {
162
77
  _dark: {
163
78
  borderColor: string;
164
79
  };
165
- flexFlow: string;
166
80
  } | {
167
81
  display: string;
82
+ flexFlow: {
83
+ base: string;
84
+ md: string;
85
+ };
168
86
  maxWidth: string;
169
87
  textAlign: string;
170
88
  alignItems: string;
171
89
  border?: undefined;
172
90
  borderColor?: undefined;
173
91
  _dark?: undefined;
174
- flexFlow: string;
175
92
  } | {
176
93
  display: string;
94
+ flexFlow: string;
177
95
  maxWidth?: undefined;
178
96
  textAlign: string;
179
97
  alignItems: string;
180
98
  border?: undefined;
181
99
  borderColor?: undefined;
182
100
  _dark?: undefined;
183
- flexFlow: string;
184
101
  };
185
102
  actions: {
103
+ flexShrink: {
104
+ base: string;
105
+ md: string;
106
+ };
107
+ marginStart: {
108
+ base: string;
109
+ md: string;
110
+ };
111
+ marginTop: {
112
+ base: string;
113
+ md: string;
114
+ };
115
+ maxWidth: {
116
+ base: string;
117
+ md: string;
118
+ };
186
119
  width: string;
187
120
  };
188
121
  body: {
122
+ display: {
123
+ md: "block";
124
+ };
125
+ flexBasis: {
126
+ sm: string;
127
+ };
128
+ flexFlow: {
129
+ md: "row nowrap";
130
+ };
189
131
  margin: any;
190
132
  padding: any;
133
+ width: {
134
+ base: "100%";
135
+ md: "auto";
136
+ };
191
137
  };
192
138
  heading: {
193
139
  marginBottom: string;
@@ -327,32 +273,56 @@ declare const _default: {
327
273
  };
328
274
  };
329
275
  CardImage: {
330
- baseStyle?: ({ imageIsAtEnd, isCentered, layout }: CardImageBaseStyleProps) => {
276
+ baseStyle?: ({ imageIsAtEnd, isCentered, layout, size }: CardImageBaseStyleProps) => {
277
+ flex: {
278
+ md: string;
279
+ };
280
+ maxWidth: {
281
+ base: string;
282
+ md: string;
283
+ };
331
284
  textAlign: string;
332
285
  alignItems: string;
286
+ margin: {
287
+ base: string;
288
+ md: string;
289
+ };
290
+ width: {
291
+ base: string;
292
+ md: any;
293
+ };
333
294
  marginBottom: string[];
334
- width?: undefined;
335
295
  marginTop: string;
336
296
  order: string;
337
297
  } | {
338
298
  marginBottom: string;
339
299
  width: string;
340
- textAlign?: undefined;
341
- alignItems?: undefined;
342
300
  marginTop: string;
343
301
  order: string;
344
302
  } | {
303
+ flex: {
304
+ md: string;
305
+ };
306
+ maxWidth: {
307
+ base: string;
308
+ md: string;
309
+ };
345
310
  textAlign: string;
346
311
  alignItems: string;
312
+ margin: {
313
+ base: string;
314
+ md: string;
315
+ };
316
+ width: {
317
+ base: string;
318
+ md: any;
319
+ };
347
320
  marginBottom: string[];
348
- width?: undefined;
349
321
  marginTop?: undefined;
350
322
  order?: undefined;
351
323
  } | {
352
324
  marginBottom: string;
353
325
  width: string;
354
- textAlign?: undefined;
355
- alignItems?: undefined;
356
326
  marginTop?: undefined;
357
327
  order?: undefined;
358
328
  };
package/dist/src/theme/components/featuredContent.d.ts CHANGED
@@ -7,59 +7,6 @@ interface FeaturedContentBaseStyleProps extends StyleFunctionProps {
7
7
  declare const FeaturedContent: {
8
8
  baseStyle?: ({ imagePosition, imageWidth, isFullWidth, }: FeaturedContentBaseStyleProps) => {
9
9
  base: {
10
- [x: string]: string | {
11
- clip: string;
12
- height: {
13
- base: string;
14
- md: string;
15
- };
16
- overflow: string;
17
- position: {
18
- base: string;
19
- md: string;
20
- };
21
- width: {
22
- base: string;
23
- md: string;
24
- };
25
- wordWrap: string;
26
- } | {
27
- bgColor: string;
28
- "[data-wrapper]"?: undefined;
29
- "[data-image]"?: undefined;
30
- "[data-text]"?: undefined;
31
- } | {
32
- "[data-wrapper]": {
33
- flexDirection: string;
34
- paddingLeft?: undefined;
35
- paddingRight?: undefined;
36
- };
37
- "[data-image]": {
38
- height: string;
39
- width: string;
40
- };
41
- bgColor?: undefined;
42
- "[data-text]"?: undefined;
43
- } | {
44
- "[data-wrapper]": {
45
- flexDirection: string;
46
- paddingLeft: string;
47
- paddingRight: string;
48
- };
49
- "[data-image]": {
50
- height: string;
51
- width: string;
52
- };
53
- "[data-text]": {
54
- /** The `paddingLeft` attribute is used to adjust the spacing around the
55
- * text when the image is positioned at the end. For aesthetic reasons,
56
- * we opted to not adjust the spacing around the text when the image is
57
- * positioned at the start.
58
- * */
59
- paddingStart: number;
60
- };
61
- bgColor?: undefined;
62
- };
63
10
  bgColor: string;
64
11
  left: string;
65
12
  marginLeft: string;
@@ -87,22 +34,27 @@ declare const FeaturedContent: {
87
34
  };
88
35
  wordWrap: string;
89
36
  };
90
- containerType: string;
91
- "@container (min-width: 0px)": {
92
- "[data-wrapper]": {
93
- flexDirection: string;
94
- };
95
- "[data-image]": {
96
- height: string;
97
- width: string;
98
- };
99
- };
100
37
  };
101
38
  wrapper: {
102
39
  alignItems: string;
103
40
  display: string;
41
+ flexDirection: {
42
+ base: "column-reverse";
43
+ md: "row-reverse";
44
+ } | {
45
+ base: "column";
46
+ md: "row";
47
+ };
104
48
  maxWidth: string;
105
49
  minHeight: string;
50
+ paddingLeft: {
51
+ base: any;
52
+ md: "s";
53
+ };
54
+ paddingRight: {
55
+ base: any;
56
+ md: "s";
57
+ };
106
58
  marginY: string;
107
59
  marginX: string;
108
60
  padding: string;
@@ -114,10 +66,27 @@ declare const FeaturedContent: {
114
66
  flexDirection: string;
115
67
  justifyContent: string;
116
68
  padding: string;
69
+ /** The `paddingLeft` attribute is used to adjust the spacing around the
70
+ * text when the image is positioned at the end. For aesthetic reasons,
71
+ * we opted to not adjust the spacing around the text when the image is
72
+ * positioned at the start.
73
+ * */
74
+ paddingStart: {
75
+ base: any;
76
+ md: number;
77
+ };
117
78
  };
118
79
  imgWrapper: {
119
80
  backgroundPosition: string;
120
81
  backgroundSize: string;
82
+ height: {
83
+ base: "320px";
84
+ md: "auto";
85
+ };
86
+ width: {
87
+ base: "100%";
88
+ md: string;
89
+ };
121
90
  };
122
91
  };
123
92
  sizes?: {
package/dist/src/theme/components/searchBar.d.ts CHANGED
@@ -1,111 +1,32 @@
1
1
  declare const SearchBar: {
2
2
  baseStyle?: {
3
- [x: string]: string | {
4
- "&": {
5
- marginBottom: string;
6
- flexFlow: string;
7
- };
8
- " > select": {
9
- marginBottom: string;
10
- maxWidth?: undefined;
11
- marginRight?: undefined;
12
- };
13
- "[data-button]": {
14
- borderRightRadius: string;
15
- maxWidth: string;
16
- };
17
- flexGrow?: undefined;
18
- borderLeftRadius?: undefined;
19
- lineHeight?: undefined;
20
- marginBottom?: undefined;
21
- flexShrink?: undefined;
22
- textOverflow?: undefined;
23
- _hover?: undefined;
24
- } | {
25
- "&": {
26
- marginBottom: string;
27
- flexFlow: string;
28
- };
29
- " > select": {
30
- marginBottom: string;
31
- maxWidth: string;
32
- marginRight: string;
33
- };
34
- "[data-button]": {
35
- borderRightRadius: string;
36
- maxWidth: string;
37
- };
38
- flexGrow?: undefined;
39
- borderLeftRadius?: undefined;
40
- lineHeight?: undefined;
41
- marginBottom?: undefined;
42
- flexShrink?: undefined;
43
- textOverflow?: undefined;
44
- _hover?: undefined;
45
- } | {
46
- flexGrow: string;
47
- "&"?: undefined;
48
- " > select"?: undefined;
49
- "[data-button]"?: undefined;
50
- borderLeftRadius?: undefined;
51
- lineHeight?: undefined;
52
- marginBottom?: undefined;
53
- flexShrink?: undefined;
54
- textOverflow?: undefined;
55
- _hover?: undefined;
56
- } | {
57
- borderLeftRadius: string;
58
- lineHeight: string;
59
- marginBottom: string;
60
- "&"?: undefined;
61
- " > select"?: undefined;
62
- "[data-button]"?: undefined;
63
- flexGrow?: undefined;
64
- flexShrink?: undefined;
65
- textOverflow?: undefined;
66
- _hover?: undefined;
67
- } | {
68
- flexShrink: string;
69
- textOverflow: string;
70
- _hover: {
71
- zIndex: string;
72
- "+ .chakra-select__icon-wrapper": {
73
- zIndex: string;
74
- };
75
- };
76
- "&"?: undefined;
77
- " > select"?: undefined;
78
- "[data-button]"?: undefined;
79
- flexGrow?: undefined;
80
- borderLeftRadius?: undefined;
81
- lineHeight?: undefined;
82
- marginBottom?: undefined;
83
- };
84
3
  display: string;
85
- "@container (min-width: 0px)": {
86
- "&": {
87
- marginBottom: string;
88
- flexFlow: string;
89
- };
90
- " > select": {
91
- marginBottom: string;
92
- };
93
- "[data-button]": {
94
- borderRightRadius: string;
95
- maxWidth: string;
96
- };
4
+ marginBottom: {
5
+ base: string;
6
+ md: string;
7
+ };
8
+ flexFlow: {
9
+ base: string;
10
+ md: string;
97
11
  };
98
12
  ".textInput": {
99
13
  flexGrow: string;
100
14
  };
101
- button: {
102
- borderLeftRadius: string;
103
- lineHeight: string;
104
- marginBottom: string;
105
- };
106
15
  select: {
107
16
  flexShrink: string;
17
+ marginBottom: {
18
+ base: "-1px";
19
+ md: "0";
20
+ };
21
+ maxWidth: {
22
+ base: any;
23
+ md: "255px";
24
+ };
108
25
  textOverflow: string;
26
+ marginRight: {
27
+ base: any;
28
+ md: "-1px";
29
+ };
109
30
  _hover: {
110
31
  zIndex: string;
111
32
  "+ .chakra-select__icon-wrapper": {
@@ -116,12 +37,12 @@ declare const SearchBar: {
116
37
  };
117
38
  sizes?: {
118
39
  [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
119
- keys: ("select" | "button")[];
40
+ keys: "select"[];
120
41
  }>;
121
42
  };
122
43
  variants?: {
123
44
  [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
124
- keys: ("select" | "button")[];
45
+ keys: "select"[];
125
46
  }>;
126
47
  };
127
48
  defaultProps?: {
@@ -129,6 +50,6 @@ declare const SearchBar: {
129
50
  variant?: string | number;
130
51
  colorScheme?: string;
131
52
  };
132
- parts: ("select" | "button")[];
53
+ parts: "select"[];
133
54
  };
134
55
  export default SearchBar;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nypl/design-system-react-components",
3
- "version": "3.1.6-container-queries-rc",
3
+ "version": "3.1.7",
4
4
  "description": "NYPL Reservoir Design System React Components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -76,7 +76,7 @@
76
76
  },
77
77
  "devDependencies": {
78
78
  "@babel/core": "7.14.6",
79
- "@jest/core": "27.3.1",
79
+ "@jest/core": "29.7.0",
80
80
  "@rollup/plugin-commonjs": "24.0.1",
81
81
  "@rollup/plugin-typescript": "11.0.0",
82
82
  "@storybook/addon-a11y": "8.0.8",
@@ -112,9 +112,9 @@
112
112
  "eslint-plugin-react": "7.32.2",
113
113
  "eslint-plugin-react-hooks": "4.2.0",
114
114
  "husky": "7.0.4",
115
- "jest": "29.4.3",
116
- "jest-axe": "5.0.1",
117
- "jest-environment-jsdom": "29.5.0",
115
+ "jest": "29.7.0",
116
+ "jest-axe": "9.0.0",
117
+ "jest-environment-jsdom": "29.7.0",
118
118
  "jest-transformer-svg": "2.0.2",
119
119
  "lint-staged": "10.5.4",
120
120
  "normalize.css": "8.0.1",
@@ -130,7 +130,7 @@
130
130
  "sass-loader": "10.0.0",
131
131
  "storybook": "8.0.8",
132
132
  "style-loader": "2.0.0",
133
- "ts-jest": "29.0.5",
133
+ "ts-jest": "29.1.5",
134
134
  "tslib": "2.3.0",
135
135
  "typescript": "4.9.5",
136
136
  "vite": "5.2.8",