Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Sync with React type defs by removing deprecated pointer capture props (#215) #216

Merged
merged 1 commit into from Apr 10, 2024

Conversation

sfyr111
Copy link
Contributor

@sfyr111 sfyr111 commented Mar 15, 2024

This PR addresses the issue reported in #215 regarding TypeScript type errors that have surfaced due to the recent updates in React's type declarations. The root cause of this issue has been identified as the removal of the onPointerEnterCapture and onPointerLeaveCapture type definitions from React's latest type declaration file. This change can be traced back to a commit in the DefinitelyTyped repository, found here, which was part of an accepted PR DefinitelyTyped#68984.

In alignment with React's type declaration updates, I have forked the react-simple-icons project and removed references to onPointerEnterCapture and onPointerLeaveCapture from the type declarations within this project. By doing this, we ensure consistency with the upstream type definitions and resolve the type errors that users of this project were experiencing.

I have attached screenshots of the TypeScript errors that were occurring prior to these changes, demonstrating the inconsistencies with the updated React type declarations.

image

I greatly appreciate the effort that goes into maintaining the react-simple-icons project and I'm looking forward to contributing to its continual improvement. If there are any additional changes you'd like or feedback on this PR, I'm more than willing to collaborate. Thank you for your time and consideration, and for the opportunity to support the community that relies on this fantastic resource.

Warm regards,

Ryan

@mwskwong
Copy link

mwskwong commented Mar 19, 2024

+1 on this PR.

Meanwhile, there are 2 workarounds

  1. Pin @types/react to v18.2.65
  2. Patch this package using patch-package
    diff --git a/node_modules/@icons-pack/react-simple-icons/types.d.ts b/node_modules/@icons-pack/react-simple-icons/types.d.ts
    index d60050b..583b0a5 100644
    --- a/node_modules/@icons-pack/react-simple-icons/types.d.ts
    +++ b/node_modules/@icons-pack/react-simple-icons/types.d.ts
    @@ -1,5 +1,5 @@
    import * as React from 'react';
    -export declare type IconType = React.ForwardRefExoticComponent<Pick<React.SVGProps<SVGSVGElement>, 'string' | 'style' | 'clipPath' | 'filter' | 'mask' | 'path' | 'className' | 'color' | 'height' | 'id' | 'lang' | 'max' | 'media' | 'method' | 'min' | 'name' | 'target' | 'type' | 'width' | 'role' | 'tabIndex' | 'crossOrigin' | 'accentHeight' | 'accumulate' | 'additive' | 'alignmentBaseline' | 'allowReorder' | 'alphabetic' | 'amplitude' | 'arabicForm' | 'ascent' | 'attributeName' | 'attributeType' | 'autoReverse' | 'azimuth' | 'baseFrequency' | 'baselineShift' | 'baseProfile' | 'bbox' | 'begin' | 'bias' | 'by' | 'calcMode' | 'capHeight' | 'clip' | 'clipPathUnits' | 'clipRule' | 'colorInterpolation' | 'colorInterpolationFilters' | 'colorProfile' | 'colorRendering' | 'contentScriptType' | 'contentStyleType' | 'cursor' | 'cx' | 'cy' | 'd' | 'decelerate' | 'descent' | 'diffuseConstant' | 'direction' | 'display' | 'divisor' | 'dominantBaseline' | 'dur' | 'dx' | 'dy' | 'edgeMode' | 'elevation' | 'enableBackground' | 'end' | 'exponent' | 'externalResourcesRequired' | 'fill' | 'fillOpacity' | 'fillRule' | 'filterRes' | 'filterUnits' | 'floodColor' | 'floodOpacity' | 'focusable' | 'fontFamily' | 'fontSize' | 'fontSizeAdjust' | 'fontStretch' | 'fontStyle' | 'fontVariant' | 'fontWeight' | 'format' | 'fr' | 'from' | 'fx' | 'fy' | 'g1' | 'g2' | 'glyphName' | 'glyphOrientationHorizontal' | 'glyphOrientationVertical' | 'glyphRef' | 'gradientTransform' | 'gradientUnits' | 'hanging' | 'horizAdvX' | 'horizOriginX' | 'href' | 'ideographic' | 'imageRendering' | 'in2' | 'in' | 'intercept' | 'k1' | 'k2' | 'k3' | 'k4' | 'k' | 'kernelMatrix' | 'kernelUnitLength' | 'kerning' | 'keyPoints' | 'keySplines' | 'keyTimes' | 'lengthAdjust' | 'letterSpacing' | 'lightingColor' | 'limitingConeAngle' | 'local' | 'markerEnd' | 'markerHeight' | 'markerMid' | 'markerStart' | 'markerUnits' | 'markerWidth' | 'maskContentUnits' | 'maskUnits' | 'mathematical' | 'mode' | 'numOctaves' | 'offset' | 'opacity' | 'operator' | 'order' | 'orient' | 'orientation' | 'origin' | 'overflow' | 'overlinePosition' | 'overlineThickness' | 'paintOrder' | 'panose1' | 'pathLength' | 'patternContentUnits' | 'patternTransform' | 'patternUnits' | 'pointerEvents' | 'points' | 'pointsAtX' | 'pointsAtY' | 'pointsAtZ' | 'preserveAlpha' | 'preserveAspectRatio' | 'primitiveUnits' | 'r' | 'radius' | 'refX' | 'refY' | 'renderingIntent' | 'repeatCount' | 'repeatDur' | 'requiredExtensions' | 'requiredFeatures' | 'restart' | 'result' | 'rotate' | 'rx' | 'ry' | 'scale' | 'seed' | 'shapeRendering' | 'slope' | 'spacing' | 'specularConstant' | 'specularExponent' | 'speed' | 'spreadMethod' | 'startOffset' | 'stdDeviation' | 'stemh' | 'stemv' | 'stitchTiles' | 'stopColor' | 'stopOpacity' | 'strikethroughPosition' | 'strikethroughThickness' | 'stroke' | 'strokeDasharray' | 'strokeDashoffset' | 'strokeLinecap' | 'strokeLinejoin' | 'strokeMiterlimit' | 'strokeOpacity' | 'strokeWidth' | 'surfaceScale' | 'systemLanguage' | 'tableValues' | 'targetX' | 'targetY' | 'textAnchor' | 'textDecoration' | 'textLength' | 'textRendering' | 'to' | 'transform' | 'u1' | 'u2' | 'underlinePosition' | 'underlineThickness' | 'unicode' | 'unicodeBidi' | 'unicodeRange' | 'unitsPerEm' | 'vAlphabetic' | 'values' | 'vectorEffect' | 'version' | 'vertAdvY' | 'vertOriginX' | 'vertOriginY' | 'vHanging' | 'vIdeographic' | 'viewBox' | 'viewTarget' | 'visibility' | 'vMathematical' | 'widths' | 'wordSpacing' | 'writingMode' | 'x1' | 'x2' | 'x' | 'xChannelSelector' | 'xHeight' | 'xlinkActuate' | 'xlinkArcrole' | 'xlinkHref' | 'xlinkRole' | 'xlinkShow' | 'xlinkTitle' | 'xlinkType' | 'xmlBase' | 'xmlLang' | 'xmlns' | 'xmlnsXlink' | 'xmlSpace' | 'y1' | 'y2' | 'y' | 'yChannelSelector' | 'z' | 'zoomAndPan' | 'aria-activedescendant' | 'aria-atomic' | 'aria-autocomplete' | 'aria-busy' | 'aria-checked' | 'aria-colcount' | 'aria-colindex' | 'aria-colspan' | 'aria-controls' | 'aria-current' | 'aria-describedby' | 'aria-details' | 'aria-disabled' | 'aria-dropeffect' | 'aria-errormessage' | 'aria-expanded' | 'aria-flowto' | 'aria-grabbed' | 'aria-haspopup' | 'aria-hidden' | 'aria-invalid' | 'aria-keyshortcuts' | 'aria-label' | 'aria-labelledby' | 'aria-level' | 'aria-live' | 'aria-modal' | 'aria-multiline' | 'aria-multiselectable' | 'aria-orientation' | 'aria-owns' | 'aria-placeholder' | 'aria-posinset' | 'aria-pressed' | 'aria-readonly' | 'aria-relevant' | 'aria-required' | 'aria-roledescription' | 'aria-rowcount' | 'aria-rowindex' | 'aria-rowspan' | 'aria-selected' | 'aria-setsize' | 'aria-sort' | 'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'aria-valuetext' | 'children' | 'dangerouslySetInnerHTML' | 'onCopy' | 'onCopyCapture' | 'onCut' | 'onCutCapture' | 'onPaste' | 'onPasteCapture' | 'onCompositionEnd' | 'onCompositionEndCapture' | 'onCompositionStart' | 'onCompositionStartCapture' | 'onCompositionUpdate' | 'onCompositionUpdateCapture' | 'onFocus' | 'onFocusCapture' | 'onBlur' | 'onBlurCapture' | 'onChange' | 'onChangeCapture' | 'onBeforeInput' | 'onBeforeInputCapture' | 'onInput' | 'onInputCapture' | 'onReset' | 'onResetCapture' | 'onSubmit' | 'onSubmitCapture' | 'onInvalid' | 'onInvalidCapture' | 'onLoad' | 'onLoadCapture' | 'onError' | 'onErrorCapture' | 'onKeyDown' | 'onKeyDownCapture' | 'onKeyPress' | 'onKeyPressCapture' | 'onKeyUp' | 'onKeyUpCapture' | 'onAbort' | 'onAbortCapture' | 'onCanPlay' | 'onCanPlayCapture' | 'onCanPlayThrough' | 'onCanPlayThroughCapture' | 'onDurationChange' | 'onDurationChangeCapture' | 'onEmptied' | 'onEmptiedCapture' | 'onEncrypted' | 'onEncryptedCapture' | 'onEnded' | 'onEndedCapture' | 'onLoadedData' | 'onLoadedDataCapture' | 'onLoadedMetadata' | 'onLoadedMetadataCapture' | 'onLoadStart' | 'onLoadStartCapture' | 'onPause' | 'onPauseCapture' | 'onPlay' | 'onPlayCapture' | 'onPlaying' | 'onPlayingCapture' | 'onProgress' | 'onProgressCapture' | 'onRateChange' | 'onRateChangeCapture' | 'onSeeked' | 'onSeekedCapture' | 'onSeeking' | 'onSeekingCapture' | 'onStalled' | 'onStalledCapture' | 'onSuspend' | 'onSuspendCapture' | 'onTimeUpdate' | 'onTimeUpdateCapture' | 'onVolumeChange' | 'onVolumeChangeCapture' | 'onWaiting' | 'onWaitingCapture' | 'onAuxClick' | 'onAuxClickCapture' | 'onClick' | 'onClickCapture' | 'onContextMenu' | 'onContextMenuCapture' | 'onDoubleClick' | 'onDoubleClickCapture' | 'onDrag' | 'onDragCapture' | 'onDragEnd' | 'onDragEndCapture' | 'onDragEnter' | 'onDragEnterCapture' | 'onDragExit' | 'onDragExitCapture' | 'onDragLeave' | 'onDragLeaveCapture' | 'onDragOver' | 'onDragOverCapture' | 'onDragStart' | 'onDragStartCapture' | 'onDrop' | 'onDropCapture' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseMove' | 'onMouseMoveCapture' | 'onMouseOut' | 'onMouseOutCapture' | 'onMouseOver' | 'onMouseOverCapture' | 'onMouseUp' | 'onMouseUpCapture' | 'onSelect' | 'onSelectCapture' | 'onTouchCancel' | 'onTouchCancelCapture' | 'onTouchEnd' | 'onTouchEndCapture' | 'onTouchMove' | 'onTouchMoveCapture' | 'onTouchStart' | 'onTouchStartCapture' | 'onPointerDown' | 'onPointerDownCapture' | 'onPointerMove' | 'onPointerMoveCapture' | 'onPointerUp' | 'onPointerUpCapture' | 'onPointerCancel' | 'onPointerCancelCapture' | 'onPointerEnter' | 'onPointerEnterCapture' | 'onPointerLeave' | 'onPointerLeaveCapture' | 'onPointerOver' | 'onPointerOverCapture' | 'onPointerOut' | 'onPointerOutCapture' | 'onGotPointerCapture' | 'onGotPointerCaptureCapture' | 'onLostPointerCapture' | 'onLostPointerCaptureCapture' | 'onScroll' | 'onScrollCapture' | 'onWheel' | 'onWheelCapture' | 'onAnimationStart' | 'onAnimationStartCapture' | 'onAnimationEnd' | 'onAnimationEndCapture' | 'onAnimationIteration' | 'onAnimationIterationCapture' | 'onTransitionEnd' | 'onTransitionEndCapture' | 'key'> & {
    +export declare type IconType = React.ForwardRefExoticComponent<Pick<React.SVGProps<SVGSVGElement>, 'string' | 'style' | 'clipPath' | 'filter' | 'mask' | 'path' | 'className' | 'color' | 'height' | 'id' | 'lang' | 'max' | 'media' | 'method' | 'min' | 'name' | 'target' | 'type' | 'width' | 'role' | 'tabIndex' | 'crossOrigin' | 'accentHeight' | 'accumulate' | 'additive' | 'alignmentBaseline' | 'allowReorder' | 'alphabetic' | 'amplitude' | 'arabicForm' | 'ascent' | 'attributeName' | 'attributeType' | 'autoReverse' | 'azimuth' | 'baseFrequency' | 'baselineShift' | 'baseProfile' | 'bbox' | 'begin' | 'bias' | 'by' | 'calcMode' | 'capHeight' | 'clip' | 'clipPathUnits' | 'clipRule' | 'colorInterpolation' | 'colorInterpolationFilters' | 'colorProfile' | 'colorRendering' | 'contentScriptType' | 'contentStyleType' | 'cursor' | 'cx' | 'cy' | 'd' | 'decelerate' | 'descent' | 'diffuseConstant' | 'direction' | 'display' | 'divisor' | 'dominantBaseline' | 'dur' | 'dx' | 'dy' | 'edgeMode' | 'elevation' | 'enableBackground' | 'end' | 'exponent' | 'externalResourcesRequired' | 'fill' | 'fillOpacity' | 'fillRule' | 'filterRes' | 'filterUnits' | 'floodColor' | 'floodOpacity' | 'focusable' | 'fontFamily' | 'fontSize' | 'fontSizeAdjust' | 'fontStretch' | 'fontStyle' | 'fontVariant' | 'fontWeight' | 'format' | 'fr' | 'from' | 'fx' | 'fy' | 'g1' | 'g2' | 'glyphName' | 'glyphOrientationHorizontal' | 'glyphOrientationVertical' | 'glyphRef' | 'gradientTransform' | 'gradientUnits' | 'hanging' | 'horizAdvX' | 'horizOriginX' | 'href' | 'ideographic' | 'imageRendering' | 'in2' | 'in' | 'intercept' | 'k1' | 'k2' | 'k3' | 'k4' | 'k' | 'kernelMatrix' | 'kernelUnitLength' | 'kerning' | 'keyPoints' | 'keySplines' | 'keyTimes' | 'lengthAdjust' | 'letterSpacing' | 'lightingColor' | 'limitingConeAngle' | 'local' | 'markerEnd' | 'markerHeight' | 'markerMid' | 'markerStart' | 'markerUnits' | 'markerWidth' | 'maskContentUnits' | 'maskUnits' | 'mathematical' | 'mode' | 'numOctaves' | 'offset' | 'opacity' | 'operator' | 'order' | 'orient' | 'orientation' | 'origin' | 'overflow' | 'overlinePosition' | 'overlineThickness' | 'paintOrder' | 'panose1' | 'pathLength' | 'patternContentUnits' | 'patternTransform' | 'patternUnits' | 'pointerEvents' | 'points' | 'pointsAtX' | 'pointsAtY' | 'pointsAtZ' | 'preserveAlpha' | 'preserveAspectRatio' | 'primitiveUnits' | 'r' | 'radius' | 'refX' | 'refY' | 'renderingIntent' | 'repeatCount' | 'repeatDur' | 'requiredExtensions' | 'requiredFeatures' | 'restart' | 'result' | 'rotate' | 'rx' | 'ry' | 'scale' | 'seed' | 'shapeRendering' | 'slope' | 'spacing' | 'specularConstant' | 'specularExponent' | 'speed' | 'spreadMethod' | 'startOffset' | 'stdDeviation' | 'stemh' | 'stemv' | 'stitchTiles' | 'stopColor' | 'stopOpacity' | 'strikethroughPosition' | 'strikethroughThickness' | 'stroke' | 'strokeDasharray' | 'strokeDashoffset' | 'strokeLinecap' | 'strokeLinejoin' | 'strokeMiterlimit' | 'strokeOpacity' | 'strokeWidth' | 'surfaceScale' | 'systemLanguage' | 'tableValues' | 'targetX' | 'targetY' | 'textAnchor' | 'textDecoration' | 'textLength' | 'textRendering' | 'to' | 'transform' | 'u1' | 'u2' | 'underlinePosition' | 'underlineThickness' | 'unicode' | 'unicodeBidi' | 'unicodeRange' | 'unitsPerEm' | 'vAlphabetic' | 'values' | 'vectorEffect' | 'version' | 'vertAdvY' | 'vertOriginX' | 'vertOriginY' | 'vHanging' | 'vIdeographic' | 'viewBox' | 'viewTarget' | 'visibility' | 'vMathematical' | 'widths' | 'wordSpacing' | 'writingMode' | 'x1' | 'x2' | 'x' | 'xChannelSelector' | 'xHeight' | 'xlinkActuate' | 'xlinkArcrole' | 'xlinkHref' | 'xlinkRole' | 'xlinkShow' | 'xlinkTitle' | 'xlinkType' | 'xmlBase' | 'xmlLang' | 'xmlns' | 'xmlnsXlink' | 'xmlSpace' | 'y1' | 'y2' | 'y' | 'yChannelSelector' | 'z' | 'zoomAndPan' | 'aria-activedescendant' | 'aria-atomic' | 'aria-autocomplete' | 'aria-busy' | 'aria-checked' | 'aria-colcount' | 'aria-colindex' | 'aria-colspan' | 'aria-controls' | 'aria-current' | 'aria-describedby' | 'aria-details' | 'aria-disabled' | 'aria-dropeffect' | 'aria-errormessage' | 'aria-expanded' | 'aria-flowto' | 'aria-grabbed' | 'aria-haspopup' | 'aria-hidden' | 'aria-invalid' | 'aria-keyshortcuts' | 'aria-label' | 'aria-labelledby' | 'aria-level' | 'aria-live' | 'aria-modal' | 'aria-multiline' | 'aria-multiselectable' | 'aria-orientation' | 'aria-owns' | 'aria-placeholder' | 'aria-posinset' | 'aria-pressed' | 'aria-readonly' | 'aria-relevant' | 'aria-required' | 'aria-roledescription' | 'aria-rowcount' | 'aria-rowindex' | 'aria-rowspan' | 'aria-selected' | 'aria-setsize' | 'aria-sort' | 'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'aria-valuetext' | 'children' | 'dangerouslySetInnerHTML' | 'onCopy' | 'onCopyCapture' | 'onCut' | 'onCutCapture' | 'onPaste' | 'onPasteCapture' | 'onCompositionEnd' | 'onCompositionEndCapture' | 'onCompositionStart' | 'onCompositionStartCapture' | 'onCompositionUpdate' | 'onCompositionUpdateCapture' | 'onFocus' | 'onFocusCapture' | 'onBlur' | 'onBlurCapture' | 'onChange' | 'onChangeCapture' | 'onBeforeInput' | 'onBeforeInputCapture' | 'onInput' | 'onInputCapture' | 'onReset' | 'onResetCapture' | 'onSubmit' | 'onSubmitCapture' | 'onInvalid' | 'onInvalidCapture' | 'onLoad' | 'onLoadCapture' | 'onError' | 'onErrorCapture' | 'onKeyDown' | 'onKeyDownCapture' | 'onKeyPress' | 'onKeyPressCapture' | 'onKeyUp' | 'onKeyUpCapture' | 'onAbort' | 'onAbortCapture' | 'onCanPlay' | 'onCanPlayCapture' | 'onCanPlayThrough' | 'onCanPlayThroughCapture' | 'onDurationChange' | 'onDurationChangeCapture' | 'onEmptied' | 'onEmptiedCapture' | 'onEncrypted' | 'onEncryptedCapture' | 'onEnded' | 'onEndedCapture' | 'onLoadedData' | 'onLoadedDataCapture' | 'onLoadedMetadata' | 'onLoadedMetadataCapture' | 'onLoadStart' | 'onLoadStartCapture' | 'onPause' | 'onPauseCapture' | 'onPlay' | 'onPlayCapture' | 'onPlaying' | 'onPlayingCapture' | 'onProgress' | 'onProgressCapture' | 'onRateChange' | 'onRateChangeCapture' | 'onSeeked' | 'onSeekedCapture' | 'onSeeking' | 'onSeekingCapture' | 'onStalled' | 'onStalledCapture' | 'onSuspend' | 'onSuspendCapture' | 'onTimeUpdate' | 'onTimeUpdateCapture' | 'onVolumeChange' | 'onVolumeChangeCapture' | 'onWaiting' | 'onWaitingCapture' | 'onAuxClick' | 'onAuxClickCapture' | 'onClick' | 'onClickCapture' | 'onContextMenu' | 'onContextMenuCapture' | 'onDoubleClick' | 'onDoubleClickCapture' | 'onDrag' | 'onDragCapture' | 'onDragEnd' | 'onDragEndCapture' | 'onDragEnter' | 'onDragEnterCapture' | 'onDragExit' | 'onDragExitCapture' | 'onDragLeave' | 'onDragLeaveCapture' | 'onDragOver' | 'onDragOverCapture' | 'onDragStart' | 'onDragStartCapture' | 'onDrop' | 'onDropCapture' | 'onMouseDown' | 'onMouseDownCapture' | 'onMouseEnter' | 'onMouseLeave' | 'onMouseMove' | 'onMouseMoveCapture' | 'onMouseOut' | 'onMouseOutCapture' | 'onMouseOver' | 'onMouseOverCapture' | 'onMouseUp' | 'onMouseUpCapture' | 'onSelect' | 'onSelectCapture' | 'onTouchCancel' | 'onTouchCancelCapture' | 'onTouchEnd' | 'onTouchEndCapture' | 'onTouchMove' | 'onTouchMoveCapture' | 'onTouchStart' | 'onTouchStartCapture' | 'onPointerDown' | 'onPointerDownCapture' | 'onPointerMove' | 'onPointerMoveCapture' | 'onPointerUp' | 'onPointerUpCapture' | 'onPointerCancel' | 'onPointerCancelCapture' | 'onPointerEnter'  | 'onPointerLeave' | 'onPointerOver' | 'onPointerOverCapture' | 'onPointerOut' | 'onPointerOutCapture' | 'onGotPointerCapture' | 'onGotPointerCaptureCapture' | 'onLostPointerCapture' | 'onLostPointerCaptureCapture' | 'onScroll' | 'onScrollCapture' | 'onWheel' | 'onWheelCapture' | 'onAnimationStart' | 'onAnimationStartCapture' | 'onAnimationEnd' | 'onAnimationEndCapture' | 'onAnimationIteration' | 'onAnimationIterationCapture' | 'onTransitionEnd' | 'onTransitionEndCapture' | 'key'> & {
        title?: string;
        color?: string;
        size?: string | number;

@donferi
Copy link

donferi commented Apr 5, 2024

@wootsbot 🙏 please 🙏

@wootsbot
Copy link
Member

wootsbot commented Apr 5, 2024

@sfyr111 you just need to run pnpm changeset, add your change, and we can merge it.

@wootsbot wootsbot merged commit fd0bd09 into icons-pack:main Apr 10, 2024
1 check passed
declanlscott added a commit to declanlscott/fodder that referenced this pull request Apr 11, 2024
remove `@ts-expect-error` on github icon since icons-pack/react-simple-icons#216 (comment) was merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants