@cypress-design/react-icon 0.21.2 → 0.21.3

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 (14) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +9 -0
  3. package/Icon.tsx +7 -4
  4. package/IconReact.cy.tsx +9 -2
  5. package/compileProperties.ts +11 -3
  6. package/dist/Icon.d.ts.map +1 -1
  7. package/dist/compileProperties.d.ts +478 -1
  8. package/dist/compileProperties.d.ts.map +1 -1
  9. package/dist/index.es.mjs +9 -3
  10. package/dist/index.es.mjs.map +1 -1
  11. package/dist/index.umd.js +9 -3
  12. package/dist/index.umd.js.map +1 -1
  13. package/package.json +3 -2
  14. package/tsconfig.json +0 -7
package/.turbo/turbo-build.log CHANGED
@@ -9,5 +9,5 @@ $ rollup -c ./rollup.config.mjs
9
9
  index.ts
10
10
 
11
11
  Consumers of your bundle will have to use chunk.default to access their default export, which may not be what you want. Use `output.exports: "named"` to disable this warning.
12
- created ./dist/index.umd.js, ./dist/index.es.mjs in 28.8s
12
+ created ./dist/index.umd.js, ./dist/index.es.mjs in 19.3s
13
13
  $ tsc --project ./tsconfig.build.json
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @cypress-design/react-icon
2
2
 
3
+ ## 0.21.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#219](https://github.com/cypress-io/cypress-design/pull/219) [`0a4ce3b`](https://github.com/cypress-io/cypress-design/commit/0a4ce3bb55b9ab0510f7fb9ba207d5fdc3cb723f) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor some typings so eslint passes without warning
8
+
9
+ - Updated dependencies [[`0a4ce3b`](https://github.com/cypress-io/cypress-design/commit/0a4ce3bb55b9ab0510f7fb9ba207d5fdc3cb723f)]:
10
+ - @cypress-design/icon-registry@0.22.2
11
+
3
12
  ## 0.21.2
4
13
 
5
14
  ### Patch Changes
package/Icon.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react'
2
2
  import type { FunctionComponent, SVGProps } from 'react'
3
+ import clsx from 'clsx'
3
4
  import { compileIcon } from '@cypress-design/icon-registry'
4
5
  import type { IconProps } from '@cypress-design/icon-registry'
5
6
  import { compileReactIconProperties } from './compileProperties'
@@ -12,10 +13,12 @@ type SVGPropsWithoutColorsOrSize = Omit<
12
13
  export const Icon: FunctionComponent<
13
14
  IconProps & SVGPropsWithoutColorsOrSize
14
15
  > = (props) => {
15
- return React.createElement(
16
- 'svg',
17
- compileReactIconProperties(compileIcon(props))
18
- )
16
+ const { className, ...cleanProps } = props
17
+ const properties = compileReactIconProperties(compileIcon(cleanProps))
18
+ return React.createElement('svg', {
19
+ ...properties,
20
+ className: clsx(properties.className, className),
21
+ })
19
22
  }
20
23
 
21
24
  export default Icon
package/IconReact.cy.tsx CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react'
2
- import Icon, { IconObjectBookCode } from './index'
3
2
  import { mount } from 'cypress/react18'
3
+ import assertions from '../assertions'
4
+ import Icon, { IconObjectBookCode, IconDocumentBlank } from './index'
4
5
 
5
- describe('Icon', () => {
6
+ describe('Icon', { viewportWidth: 80, viewportHeight: 80 }, () => {
6
7
  it('renders correctly', () => {
7
8
  mount(
8
9
  <ul className="m-4">
@@ -35,4 +36,10 @@ describe('Icon', () => {
35
36
  </ul>
36
37
  )
37
38
  })
39
+ assertions(({ class: className, ...props }) => {
40
+ if (props.name) {
41
+ return mount(<Icon className={className} {...props} />)
42
+ }
43
+ mount(<IconDocumentBlank className={className} {...props} />)
44
+ })
38
45
  })
package/compileProperties.ts CHANGED
@@ -14,15 +14,22 @@ export const compileReactIconProperties = ({
14
14
  React.SVGProps<SVGSVGElement>) => {
15
15
  const filteredAttributes = Object.keys(attributes).reduce(
16
16
  (newAttributes, attrName) => {
17
- if (!ICON_COLOR_PROP_NAMES.includes(attrName) && attrName !== 'name') {
17
+ if (
18
+ !ICON_COLOR_PROP_NAMES.includes(
19
+ attrName as (typeof ICON_COLOR_PROP_NAMES)[number]
20
+ ) &&
21
+ attrName !== 'name'
22
+ ) {
23
+ // @ts-expect-error the ky of React's SVGProps is too broad and
24
+ // breaks here. Since we do not need to check for it. We keep the expect error
18
25
  newAttributes[attrName] =
19
26
  attributes[attrName as keyof typeof attributes]
20
27
  }
21
28
  return newAttributes
22
29
  },
23
- {} as Record<string, any>
30
+ {} as React.SVGProps<SVGSVGElement>
24
31
  )
25
- const componentProps: any = {
32
+ const componentProps = {
26
33
  width: size,
27
34
  height: size,
28
35
  viewBox: `0 0 ${size} ${size}`,
@@ -30,6 +37,7 @@ export const compileReactIconProperties = ({
30
37
  dangerouslySetInnerHTML: {
31
38
  __html: body,
32
39
  },
40
+ className: undefined as string | undefined,
33
41
  ...filteredAttributes, // add all standard attributes back to the svg tag
34
42
  }
35
43
  if (attributes.className) {
package/dist/Icon.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.d.ts","sourceRoot":"./","sources":["Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAExD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AAG9D,KAAK,2BAA2B,GAAG,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CACzD,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAClC,SAAS,GAAG,2BAA2B,CAMxC,CAAA;AAED,eAAe,IAAI,CAAA"}
1
+ {"version":3,"file":"Icon.d.ts","sourceRoot":"./","sources":["Icon.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAGxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AAG9D,KAAK,2BAA2B,GAAG,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,aAAa,GAAG,MAAM,CACzD,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAClC,SAAS,GAAG,2BAA2B,CAQxC,CAAA;AAED,eAAe,IAAI,CAAA"}
package/dist/compileProperties.d.ts CHANGED
@@ -1,8 +1,485 @@
1
1
  /// <reference types="react" />
2
+ /// <reference types="react" />
2
3
  import type { ColorIconProps } from '@cypress-design/icon-registry';
3
4
  export declare const compileReactIconProperties: ({ body, compiledClasses, size, ...attributes }: {
4
5
  body: string;
5
6
  compiledClasses: string[];
6
7
  size: string;
7
- } & ColorIconProps & import("react").SVGProps<SVGSVGElement>) => any;
8
+ } & ColorIconProps & import("react").SVGProps<SVGSVGElement>) => {
9
+ className: string | undefined;
10
+ color?: string | undefined;
11
+ height: string | number;
12
+ id?: string | undefined;
13
+ lang?: string | undefined;
14
+ max?: string | number | undefined;
15
+ media?: string | undefined;
16
+ method?: string | undefined;
17
+ min?: string | number | undefined;
18
+ name?: string | undefined;
19
+ style?: import("react").CSSProperties | undefined;
20
+ target?: string | undefined;
21
+ type?: string | undefined;
22
+ width: string | number;
23
+ role?: import("react").AriaRole | undefined;
24
+ tabIndex?: number | undefined;
25
+ crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
26
+ accentHeight?: string | number | undefined;
27
+ accumulate?: "none" | "sum" | undefined;
28
+ additive?: "sum" | "replace" | undefined;
29
+ alignmentBaseline?: "alphabetic" | "hanging" | "ideographic" | "mathematical" | "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "inherit" | undefined;
30
+ allowReorder?: "no" | "yes" | undefined;
31
+ alphabetic?: string | number | undefined;
32
+ amplitude?: string | number | undefined;
33
+ arabicForm?: "initial" | "medial" | "terminal" | "isolated" | undefined;
34
+ ascent?: string | number | undefined;
35
+ attributeName?: string | undefined;
36
+ attributeType?: string | undefined;
37
+ autoReverse?: (boolean | "true" | "false") | undefined;
38
+ azimuth?: string | number | undefined;
39
+ baseFrequency?: string | number | undefined;
40
+ baselineShift?: string | number | undefined;
41
+ baseProfile?: string | number | undefined;
42
+ bbox?: string | number | undefined;
43
+ begin?: string | number | undefined;
44
+ bias?: string | number | undefined;
45
+ by?: string | number | undefined;
46
+ calcMode?: string | number | undefined;
47
+ capHeight?: string | number | undefined;
48
+ clip?: string | number | undefined;
49
+ clipPath?: string | undefined;
50
+ clipPathUnits?: string | number | undefined;
51
+ clipRule?: string | number | undefined;
52
+ colorInterpolation?: string | number | undefined;
53
+ colorInterpolationFilters?: "auto" | "inherit" | "sRGB" | "linearRGB" | undefined;
54
+ colorProfile?: string | number | undefined;
55
+ colorRendering?: string | number | undefined;
56
+ contentScriptType?: string | number | undefined;
57
+ contentStyleType?: string | number | undefined;
58
+ cursor?: string | number | undefined;
59
+ cx?: string | number | undefined;
60
+ cy?: string | number | undefined;
61
+ d?: string | undefined;
62
+ decelerate?: string | number | undefined;
63
+ descent?: string | number | undefined;
64
+ diffuseConstant?: string | number | undefined;
65
+ direction?: string | number | undefined;
66
+ display?: string | number | undefined;
67
+ divisor?: string | number | undefined;
68
+ dominantBaseline?: string | number | undefined;
69
+ dur?: string | number | undefined;
70
+ dx?: string | number | undefined;
71
+ dy?: string | number | undefined;
72
+ edgeMode?: string | number | undefined;
73
+ elevation?: string | number | undefined;
74
+ enableBackground?: string | number | undefined;
75
+ end?: string | number | undefined;
76
+ exponent?: string | number | undefined;
77
+ externalResourcesRequired?: (boolean | "true" | "false") | undefined;
78
+ fill: string;
79
+ fillOpacity?: string | number | undefined;
80
+ fillRule?: "inherit" | "nonzero" | "evenodd" | undefined;
81
+ filter?: string | undefined;
82
+ filterRes?: string | number | undefined;
83
+ filterUnits?: string | number | undefined;
84
+ floodColor?: string | number | undefined;
85
+ floodOpacity?: string | number | undefined;
86
+ focusable?: "auto" | (boolean | "true" | "false") | undefined;
87
+ fontFamily?: string | undefined;
88
+ fontSize?: string | number | undefined;
89
+ fontSizeAdjust?: string | number | undefined;
90
+ fontStretch?: string | number | undefined;
91
+ fontStyle?: string | number | undefined;
92
+ fontVariant?: string | number | undefined;
93
+ fontWeight?: string | number | undefined;
94
+ format?: string | number | undefined;
95
+ fr?: string | number | undefined;
96
+ from?: string | number | undefined;
97
+ fx?: string | number | undefined;
98
+ fy?: string | number | undefined;
99
+ g1?: string | number | undefined;
100
+ g2?: string | number | undefined;
101
+ glyphName?: string | number | undefined;
102
+ glyphOrientationHorizontal?: string | number | undefined;
103
+ glyphOrientationVertical?: string | number | undefined;
104
+ glyphRef?: string | number | undefined;
105
+ gradientTransform?: string | undefined;
106
+ gradientUnits?: string | undefined;
107
+ hanging?: string | number | undefined;
108
+ horizAdvX?: string | number | undefined;
109
+ horizOriginX?: string | number | undefined;
110
+ href?: string | undefined;
111
+ ideographic?: string | number | undefined;
112
+ imageRendering?: string | number | undefined;
113
+ in2?: string | number | undefined;
114
+ in?: string | undefined;
115
+ intercept?: string | number | undefined;
116
+ k1?: string | number | undefined;
117
+ k2?: string | number | undefined;
118
+ k3?: string | number | undefined;
119
+ k4?: string | number | undefined;
120
+ k?: string | number | undefined;
121
+ kernelMatrix?: string | number | undefined;
122
+ kernelUnitLength?: string | number | undefined;
123
+ kerning?: string | number | undefined;
124
+ keyPoints?: string | number | undefined;
125
+ keySplines?: string | number | undefined;
126
+ keyTimes?: string | number | undefined;
127
+ lengthAdjust?: string | number | undefined;
128
+ letterSpacing?: string | number | undefined;
129
+ lightingColor?: string | number | undefined;
130
+ limitingConeAngle?: string | number | undefined;
131
+ local?: string | number | undefined;
132
+ markerEnd?: string | undefined;
133
+ markerHeight?: string | number | undefined;
134
+ markerMid?: string | undefined;
135
+ markerStart?: string | undefined;
136
+ markerUnits?: string | number | undefined;
137
+ markerWidth?: string | number | undefined;
138
+ mask?: string | undefined;
139
+ maskContentUnits?: string | number | undefined;
140
+ maskUnits?: string | number | undefined;
141
+ mathematical?: string | number | undefined;
142
+ mode?: string | number | undefined;
143
+ numOctaves?: string | number | undefined;
144
+ offset?: string | number | undefined;
145
+ opacity?: string | number | undefined;
146
+ operator?: string | number | undefined;
147
+ order?: string | number | undefined;
148
+ orient?: string | number | undefined;
149
+ orientation?: string | number | undefined;
150
+ origin?: string | number | undefined;
151
+ overflow?: string | number | undefined;
152
+ overlinePosition?: string | number | undefined;
153
+ overlineThickness?: string | number | undefined;
154
+ paintOrder?: string | number | undefined;
155
+ panose1?: string | number | undefined;
156
+ path?: string | undefined;
157
+ pathLength?: string | number | undefined;
158
+ patternContentUnits?: string | undefined;
159
+ patternTransform?: string | number | undefined;
160
+ patternUnits?: string | undefined;
161
+ pointerEvents?: string | number | undefined;
162
+ points?: string | undefined;
163
+ pointsAtX?: string | number | undefined;
164
+ pointsAtY?: string | number | undefined;
165
+ pointsAtZ?: string | number | undefined;
166
+ preserveAlpha?: (boolean | "true" | "false") | undefined;
167
+ preserveAspectRatio?: string | undefined;
168
+ primitiveUnits?: string | number | undefined;
169
+ r?: string | number | undefined;
170
+ radius?: string | number | undefined;
171
+ refX?: string | number | undefined;
172
+ refY?: string | number | undefined;
173
+ renderingIntent?: string | number | undefined;
174
+ repeatCount?: string | number | undefined;
175
+ repeatDur?: string | number | undefined;
176
+ requiredExtensions?: string | number | undefined;
177
+ requiredFeatures?: string | number | undefined;
178
+ restart?: string | number | undefined;
179
+ result?: string | undefined;
180
+ rotate?: string | number | undefined;
181
+ rx?: string | number | undefined;
182
+ ry?: string | number | undefined;
183
+ scale?: string | number | undefined;
184
+ seed?: string | number | undefined;
185
+ shapeRendering?: string | number | undefined;
186
+ slope?: string | number | undefined;
187
+ spacing?: string | number | undefined;
188
+ specularConstant?: string | number | undefined;
189
+ specularExponent?: string | number | undefined;
190
+ speed?: string | number | undefined;
191
+ spreadMethod?: string | undefined;
192
+ startOffset?: string | number | undefined;
193
+ stdDeviation?: string | number | undefined;
194
+ stemh?: string | number | undefined;
195
+ stemv?: string | number | undefined;
196
+ stitchTiles?: string | number | undefined;
197
+ stopColor?: string | undefined;
198
+ stopOpacity?: string | number | undefined;
199
+ strikethroughPosition?: string | number | undefined;
200
+ strikethroughThickness?: string | number | undefined;
201
+ string?: string | number | undefined;
202
+ stroke?: string | undefined;
203
+ strokeDasharray?: string | number | undefined;
204
+ strokeDashoffset?: string | number | undefined;
205
+ strokeLinecap?: "inherit" | "butt" | "round" | "square" | undefined;
206
+ strokeLinejoin?: "inherit" | "round" | "miter" | "bevel" | undefined;
207
+ strokeMiterlimit?: string | number | undefined;
208
+ strokeOpacity?: string | number | undefined;
209
+ strokeWidth?: string | number | undefined;
210
+ surfaceScale?: string | number | undefined;
211
+ systemLanguage?: string | number | undefined;
212
+ tableValues?: string | number | undefined;
213
+ targetX?: string | number | undefined;
214
+ targetY?: string | number | undefined;
215
+ textAnchor?: string | undefined;
216
+ textDecoration?: string | number | undefined;
217
+ textLength?: string | number | undefined;
218
+ textRendering?: string | number | undefined;
219
+ to?: string | number | undefined;
220
+ transform?: string | undefined;
221
+ u1?: string | number | undefined;
222
+ u2?: string | number | undefined;
223
+ underlinePosition?: string | number | undefined;
224
+ underlineThickness?: string | number | undefined;
225
+ unicode?: string | number | undefined;
226
+ unicodeBidi?: string | number | undefined;
227
+ unicodeRange?: string | number | undefined;
228
+ unitsPerEm?: string | number | undefined;
229
+ vAlphabetic?: string | number | undefined;
230
+ values?: string | undefined;
231
+ vectorEffect?: string | number | undefined;
232
+ version?: string | undefined;
233
+ vertAdvY?: string | number | undefined;
234
+ vertOriginX?: string | number | undefined;
235
+ vertOriginY?: string | number | undefined;
236
+ vHanging?: string | number | undefined;
237
+ vIdeographic?: string | number | undefined;
238
+ viewBox: string;
239
+ viewTarget?: string | number | undefined;
240
+ visibility?: string | number | undefined;
241
+ vMathematical?: string | number | undefined;
242
+ widths?: string | number | undefined;
243
+ wordSpacing?: string | number | undefined;
244
+ writingMode?: string | number | undefined;
245
+ x1?: string | number | undefined;
246
+ x2?: string | number | undefined;
247
+ x?: string | number | undefined;
248
+ xChannelSelector?: string | undefined;
249
+ xHeight?: string | number | undefined;
250
+ xlinkActuate?: string | undefined;
251
+ xlinkArcrole?: string | undefined;
252
+ xlinkHref?: string | undefined;
253
+ xlinkRole?: string | undefined;
254
+ xlinkShow?: string | undefined;
255
+ xlinkTitle?: string | undefined;
256
+ xlinkType?: string | undefined;
257
+ xmlBase?: string | undefined;
258
+ xmlLang?: string | undefined;
259
+ xmlns?: string | undefined;
260
+ xmlnsXlink?: string | undefined;
261
+ xmlSpace?: string | undefined;
262
+ y1?: string | number | undefined;
263
+ y2?: string | number | undefined;
264
+ y?: string | number | undefined;
265
+ yChannelSelector?: string | undefined;
266
+ z?: string | number | undefined;
267
+ zoomAndPan?: string | undefined;
268
+ 'aria-activedescendant'?: string | undefined;
269
+ 'aria-atomic'?: (boolean | "true" | "false") | undefined;
270
+ 'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
271
+ 'aria-busy'?: (boolean | "true" | "false") | undefined;
272
+ 'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
273
+ 'aria-colcount'?: number | undefined;
274
+ 'aria-colindex'?: number | undefined;
275
+ 'aria-colspan'?: number | undefined;
276
+ 'aria-controls'?: string | undefined;
277
+ 'aria-current'?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
278
+ 'aria-describedby'?: string | undefined;
279
+ 'aria-details'?: string | undefined;
280
+ 'aria-disabled'?: (boolean | "true" | "false") | undefined;
281
+ 'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
282
+ 'aria-errormessage'?: string | undefined;
283
+ 'aria-expanded'?: (boolean | "true" | "false") | undefined;
284
+ 'aria-flowto'?: string | undefined;
285
+ 'aria-grabbed'?: (boolean | "true" | "false") | undefined;
286
+ 'aria-haspopup'?: boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | "true" | "false" | undefined;
287
+ 'aria-hidden'?: (boolean | "true" | "false") | undefined;
288
+ 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
289
+ 'aria-keyshortcuts'?: string | undefined;
290
+ 'aria-label'?: string | undefined;
291
+ 'aria-labelledby'?: string | undefined;
292
+ 'aria-level'?: number | undefined;
293
+ 'aria-live'?: "off" | "assertive" | "polite" | undefined;
294
+ 'aria-modal'?: (boolean | "true" | "false") | undefined;
295
+ 'aria-multiline'?: (boolean | "true" | "false") | undefined;
296
+ 'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
297
+ 'aria-orientation'?: "horizontal" | "vertical" | undefined;
298
+ 'aria-owns'?: string | undefined;
299
+ 'aria-placeholder'?: string | undefined;
300
+ 'aria-posinset'?: number | undefined;
301
+ 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
302
+ 'aria-readonly'?: (boolean | "true" | "false") | undefined;
303
+ 'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
304
+ 'aria-required'?: (boolean | "true" | "false") | undefined;
305
+ 'aria-roledescription'?: string | undefined;
306
+ 'aria-rowcount'?: number | undefined;
307
+ 'aria-rowindex'?: number | undefined;
308
+ 'aria-rowspan'?: number | undefined;
309
+ 'aria-selected'?: (boolean | "true" | "false") | undefined;
310
+ 'aria-setsize'?: number | undefined;
311
+ 'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
312
+ 'aria-valuemax'?: number | undefined;
313
+ 'aria-valuemin'?: number | undefined;
314
+ 'aria-valuenow'?: number | undefined;
315
+ 'aria-valuetext'?: string | undefined;
316
+ children?: import("react").ReactNode;
317
+ dangerouslySetInnerHTML: {
318
+ __html: string | TrustedHTML;
319
+ };
320
+ onCopy?: import("react").ClipboardEventHandler<SVGSVGElement> | undefined;
321
+ onCopyCapture?: import("react").ClipboardEventHandler<SVGSVGElement> | undefined;
322
+ onCut?: import("react").ClipboardEventHandler<SVGSVGElement> | undefined;
323
+ onCutCapture?: import("react").ClipboardEventHandler<SVGSVGElement> | undefined;
324
+ onPaste?: import("react").ClipboardEventHandler<SVGSVGElement> | undefined;
325
+ onPasteCapture?: import("react").ClipboardEventHandler<SVGSVGElement> | undefined;
326
+ onCompositionEnd?: import("react").CompositionEventHandler<SVGSVGElement> | undefined;
327
+ onCompositionEndCapture?: import("react").CompositionEventHandler<SVGSVGElement> | undefined;
328
+ onCompositionStart?: import("react").CompositionEventHandler<SVGSVGElement> | undefined;
329
+ onCompositionStartCapture?: import("react").CompositionEventHandler<SVGSVGElement> | undefined;
330
+ onCompositionUpdate?: import("react").CompositionEventHandler<SVGSVGElement> | undefined;
331
+ onCompositionUpdateCapture?: import("react").CompositionEventHandler<SVGSVGElement> | undefined;
332
+ onFocus?: import("react").FocusEventHandler<SVGSVGElement> | undefined;
333
+ onFocusCapture?: import("react").FocusEventHandler<SVGSVGElement> | undefined;
334
+ onBlur?: import("react").FocusEventHandler<SVGSVGElement> | undefined;
335
+ onBlurCapture?: import("react").FocusEventHandler<SVGSVGElement> | undefined;
336
+ onChange?: import("react").FormEventHandler<SVGSVGElement> | undefined;
337
+ onChangeCapture?: import("react").FormEventHandler<SVGSVGElement> | undefined;
338
+ onBeforeInput?: import("react").FormEventHandler<SVGSVGElement> | undefined;
339
+ onBeforeInputCapture?: import("react").FormEventHandler<SVGSVGElement> | undefined;
340
+ onInput?: import("react").FormEventHandler<SVGSVGElement> | undefined;
341
+ onInputCapture?: import("react").FormEventHandler<SVGSVGElement> | undefined;
342
+ onReset?: import("react").FormEventHandler<SVGSVGElement> | undefined;
343
+ onResetCapture?: import("react").FormEventHandler<SVGSVGElement> | undefined;
344
+ onSubmit?: import("react").FormEventHandler<SVGSVGElement> | undefined;
345
+ onSubmitCapture?: import("react").FormEventHandler<SVGSVGElement> | undefined;
346
+ onInvalid?: import("react").FormEventHandler<SVGSVGElement> | undefined;
347
+ onInvalidCapture?: import("react").FormEventHandler<SVGSVGElement> | undefined;
348
+ onLoad?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
349
+ onLoadCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
350
+ onError?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
351
+ onErrorCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
352
+ onKeyDown?: import("react").KeyboardEventHandler<SVGSVGElement> | undefined;
353
+ onKeyDownCapture?: import("react").KeyboardEventHandler<SVGSVGElement> | undefined;
354
+ onKeyPress?: import("react").KeyboardEventHandler<SVGSVGElement> | undefined;
355
+ onKeyPressCapture?: import("react").KeyboardEventHandler<SVGSVGElement> | undefined;
356
+ onKeyUp?: import("react").KeyboardEventHandler<SVGSVGElement> | undefined;
357
+ onKeyUpCapture?: import("react").KeyboardEventHandler<SVGSVGElement> | undefined;
358
+ onAbort?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
359
+ onAbortCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
360
+ onCanPlay?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
361
+ onCanPlayCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
362
+ onCanPlayThrough?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
363
+ onCanPlayThroughCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
364
+ onDurationChange?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
365
+ onDurationChangeCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
366
+ onEmptied?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
367
+ onEmptiedCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
368
+ onEncrypted?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
369
+ onEncryptedCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
370
+ onEnded?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
371
+ onEndedCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
372
+ onLoadedData?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
373
+ onLoadedDataCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
374
+ onLoadedMetadata?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
375
+ onLoadedMetadataCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
376
+ onLoadStart?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
377
+ onLoadStartCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
378
+ onPause?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
379
+ onPauseCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
380
+ onPlay?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
381
+ onPlayCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
382
+ onPlaying?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
383
+ onPlayingCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
384
+ onProgress?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
385
+ onProgressCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
386
+ onRateChange?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
387
+ onRateChangeCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
388
+ onResize?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
389
+ onResizeCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
390
+ onSeeked?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
391
+ onSeekedCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
392
+ onSeeking?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
393
+ onSeekingCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
394
+ onStalled?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
395
+ onStalledCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
396
+ onSuspend?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
397
+ onSuspendCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
398
+ onTimeUpdate?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
399
+ onTimeUpdateCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
400
+ onVolumeChange?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
401
+ onVolumeChangeCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
402
+ onWaiting?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
403
+ onWaitingCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
404
+ onAuxClick?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
405
+ onAuxClickCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
406
+ onClick?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
407
+ onClickCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
408
+ onContextMenu?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
409
+ onContextMenuCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
410
+ onDoubleClick?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
411
+ onDoubleClickCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
412
+ onDrag?: import("react").DragEventHandler<SVGSVGElement> | undefined;
413
+ onDragCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
414
+ onDragEnd?: import("react").DragEventHandler<SVGSVGElement> | undefined;
415
+ onDragEndCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
416
+ onDragEnter?: import("react").DragEventHandler<SVGSVGElement> | undefined;
417
+ onDragEnterCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
418
+ onDragExit?: import("react").DragEventHandler<SVGSVGElement> | undefined;
419
+ onDragExitCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
420
+ onDragLeave?: import("react").DragEventHandler<SVGSVGElement> | undefined;
421
+ onDragLeaveCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
422
+ onDragOver?: import("react").DragEventHandler<SVGSVGElement> | undefined;
423
+ onDragOverCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
424
+ onDragStart?: import("react").DragEventHandler<SVGSVGElement> | undefined;
425
+ onDragStartCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
426
+ onDrop?: import("react").DragEventHandler<SVGSVGElement> | undefined;
427
+ onDropCapture?: import("react").DragEventHandler<SVGSVGElement> | undefined;
428
+ onMouseDown?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
429
+ onMouseDownCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
430
+ onMouseEnter?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
431
+ onMouseLeave?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
432
+ onMouseMove?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
433
+ onMouseMoveCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
434
+ onMouseOut?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
435
+ onMouseOutCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
436
+ onMouseOver?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
437
+ onMouseOverCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
438
+ onMouseUp?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
439
+ onMouseUpCapture?: import("react").MouseEventHandler<SVGSVGElement> | undefined;
440
+ onSelect?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
441
+ onSelectCapture?: import("react").ReactEventHandler<SVGSVGElement> | undefined;
442
+ onTouchCancel?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
443
+ onTouchCancelCapture?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
444
+ onTouchEnd?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
445
+ onTouchEndCapture?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
446
+ onTouchMove?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
447
+ onTouchMoveCapture?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
448
+ onTouchStart?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
449
+ onTouchStartCapture?: import("react").TouchEventHandler<SVGSVGElement> | undefined;
450
+ onPointerDown?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
451
+ onPointerDownCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
452
+ onPointerMove?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
453
+ onPointerMoveCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
454
+ onPointerUp?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
455
+ onPointerUpCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
456
+ onPointerCancel?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
457
+ onPointerCancelCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
458
+ onPointerEnter?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
459
+ onPointerEnterCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
460
+ onPointerLeave?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
461
+ onPointerLeaveCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
462
+ onPointerOver?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
463
+ onPointerOverCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
464
+ onPointerOut?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
465
+ onPointerOutCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
466
+ onGotPointerCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
467
+ onGotPointerCaptureCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
468
+ onLostPointerCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
469
+ onLostPointerCaptureCapture?: import("react").PointerEventHandler<SVGSVGElement> | undefined;
470
+ onScroll?: import("react").UIEventHandler<SVGSVGElement> | undefined;
471
+ onScrollCapture?: import("react").UIEventHandler<SVGSVGElement> | undefined;
472
+ onWheel?: import("react").WheelEventHandler<SVGSVGElement> | undefined;
473
+ onWheelCapture?: import("react").WheelEventHandler<SVGSVGElement> | undefined;
474
+ onAnimationStart?: import("react").AnimationEventHandler<SVGSVGElement> | undefined;
475
+ onAnimationStartCapture?: import("react").AnimationEventHandler<SVGSVGElement> | undefined;
476
+ onAnimationEnd?: import("react").AnimationEventHandler<SVGSVGElement> | undefined;
477
+ onAnimationEndCapture?: import("react").AnimationEventHandler<SVGSVGElement> | undefined;
478
+ onAnimationIteration?: import("react").AnimationEventHandler<SVGSVGElement> | undefined;
479
+ onAnimationIterationCapture?: import("react").AnimationEventHandler<SVGSVGElement> | undefined;
480
+ onTransitionEnd?: import("react").TransitionEventHandler<SVGSVGElement> | undefined;
481
+ onTransitionEndCapture?: import("react").TransitionEventHandler<SVGSVGElement> | undefined;
482
+ ref?: import("react").LegacyRef<SVGSVGElement> | undefined;
483
+ key?: import("react").Key | null | undefined;
484
+ };
8
485
  //# sourceMappingURL=compileProperties.d.ts.map
package/dist/compileProperties.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"compileProperties.d.ts","sourceRoot":"./","sources":["compileProperties.ts"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAGnE,eAAO,MAAM,0BAA0B;UAM/B,MAAM;qBACK,MAAM,EAAE;UACnB,MAAM;oEA8Bb,CAAA"}
1
+ {"version":3,"file":"compileProperties.d.ts","sourceRoot":"./","sources":["compileProperties.ts"],"names":[],"mappings":";;AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAGnE,eAAO,MAAM,0BAA0B;UAM/B,MAAM;qBACK,MAAM,EAAE;UACnB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCb,CAAA"}
package/dist/index.es.mjs CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import clsx from 'clsx';
2
3
  import * as iconsRegistry from '@cypress-design/icon-registry';
3
4
  import { ICON_COLOR_PROP_NAMES, compileIcon } from '@cypress-design/icon-registry';
4
5
 
@@ -45,7 +46,10 @@ function __rest(s, e) {
45
46
  var compileReactIconProperties = function (_a) {
46
47
  var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
47
48
  var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
48
- if (!ICON_COLOR_PROP_NAMES.includes(attrName) && attrName !== 'name') {
49
+ if (!ICON_COLOR_PROP_NAMES.includes(attrName) &&
50
+ attrName !== 'name') {
51
+ // @ts-expect-error the ky of React's SVGProps is too broad and
52
+ // breaks here. Since we do not need to check for it. We keep the expect error
49
53
  newAttributes[attrName] =
50
54
  attributes[attrName];
51
55
  }
@@ -53,7 +57,7 @@ var compileReactIconProperties = function (_a) {
53
57
  }, {});
54
58
  var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
55
59
  __html: body,
56
- } }, filteredAttributes);
60
+ }, className: undefined }, filteredAttributes);
57
61
  if (attributes.className) {
58
62
  compiledClasses.push(attributes.className);
59
63
  }
@@ -64,7 +68,9 @@ var compileReactIconProperties = function (_a) {
64
68
  };
65
69
 
66
70
  var Icon = function (props) {
67
- return React.createElement('svg', compileReactIconProperties(compileIcon(props)));
71
+ var className = props.className, cleanProps = __rest(props, ["className"]);
72
+ var properties = compileReactIconProperties(compileIcon(cleanProps));
73
+ return React.createElement('svg', __assign(__assign({}, properties), { className: clsx(properties.className, className) }));
68
74
  };
69
75
 
70
76
  var IconActionAddLarge = function (props) {