fix(ui-toggle-details,ui-expandable): improve typing for onClick prop

Author: balzss

lerna.json

@@ -2,4 +2,4 @@
   "version": "10.23.0",
   "npmClient": "npm",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
-}
+}

package.json

@@ -31,7 +31,7 @@
     "build:docs": "lerna run bundle --stream --scope docs-app",
     "build:tokens": "ui-scripts generate-all-tokens",
     "build:types": "tsc -b tsconfig.references.json",
-    "build:ts": "lerna run prepare-build --stream --scope @instructure/ui-icons && npm run build:types --verbose",
+    "build:ts": "lerna run prepare-build --stream --scope @instructure/ui-icons && npm run build:types",
     "clean": "node scripts/clean.js",
     "clean-node": "node scripts/clean.js --nuke_node",
     "export:icons": "lerna run export --stream --scope @instructure/ui-icons",

packages/ui-expandable/src/Expandable/index.tsx

@@ -26,6 +26,7 @@ import { createChainedFunction } from '@instructure/ui-utils'
 
 import { propTypes, allowedProps } from './props'
 import type { ExpandableProps, ExpandableState } from './props'
+import type { ViewProps } from '@instructure/ui-view'
 
 import { withDeterministicId } from '@instructure/ui-react-utils'
 
@@ -86,7 +87,9 @@ class Expandable extends Component<ExpandableProps, ExpandableState> {
     }
   }
 
-  handleToggle = (event: React.MouseEvent) => {
+  handleToggle = (
+    event: React.MouseEvent<ViewProps> | React.KeyboardEvent<ViewProps>
+  ) => {
     if (!this.isControlled()) {
       this.setState(toggleExpanded)
     }

packages/ui-expandable/src/Expandable/props.ts

@@ -29,14 +29,19 @@ import { controllable } from '@instructure/ui-prop-types'
 
 import type { PropValidators } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
+import type { ViewProps } from '@instructure/ui-view'
 
 type ExpandableToggleProps = (props?: {
-  onClick?: React.MouseEventHandler
+  onClick?: (
+    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>
+  ) => void
   [key: string]: unknown
 }) => {
   'aria-controls': string
   'aria-expanded': boolean
-  onClick: (event: React.MouseEvent) => void
+  onClick: (
+    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>
+  ) => void
   [key: string]: unknown
 }
 
@@ -69,7 +74,10 @@ type ExpandableOwnProps = {
   /**
    * Function invoked when this component is expanded/collapsed
    */
-  onToggle?: (event: React.MouseEvent, expanded: boolean) => void
+  onToggle?: (
+    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>,
+    expanded: boolean
+  ) => void
 
   /**
    * Must be a function that returns a JSX element. It receives and object which

packages/ui-scripts/lib/build/babel.js

@@ -68,7 +68,8 @@ export default {
     babelArgs = babelArgs.concat([
       src,
       '--ignore',
-      'src/**/*.test.js,src/**/__tests__/**'
+      'src/**/*.test.js,src/**/__tests__/**',
+      '--quiet'
     ])
 
     let envVars = {}

packages/ui-scripts/lib/build/generate-all-tokens.js

@@ -23,7 +23,6 @@
  */
 
 import path from 'path'
-import fs from 'fs'
 import { error } from '@instructure/command-utils'
 import { handleMapJSTokensToSource } from '../utils/handle-map-js-tokens-to-source.js'
 import { handleGenerateTokens } from '../utils/handle-generate-tokens.js'
@@ -91,21 +90,7 @@ export default {
         ? path.join(themePath, outputDir, themeKey)
         : path.join(themePath, outputDir)
       const sourcePath = path.join(outputPath, 'source.json')
-      // this is just a debug code to find the JSON error here that occurs only in CI
-      // eslint-disable-next-line no-console
-      console.log(
-        '!!!!! starting',
-        themeKey,
-        sourceTokens,
-        outputPath,
-        sourcePath,
-        fs.existsSync(sourcePath)
-      )
-      // eslint-disable-next-line no-console
-      console.log(
-        '!!!! styleDictionarySource',
-        JSON.stringify(styleDictionarySource)?.substring(0, 400)
-      )
+
       generators.push(
         handleGenerateTokens({
           themeKey,

packages/ui-scripts/lib/utils/handle-generate-tokens.js

@@ -37,16 +37,12 @@ export async function handleGenerateTokens({
     fs.mkdirSync(dir, { recursive: true })
   }
   fs.writeFileSync(sourcePath, JSON.stringify(styleDictionarySource))
-  // this is just a debug code to find the JSON error here that occurs only in CI
-  // eslint-disable-next-line no-console
-  console.log(
-    '!!!! handleGenerateTokens',
-    sourcePath,
-    fs.existsSync(sourcePath),
-    JSON.stringify(styleDictionarySource)?.substring(0, 400)
-  )
+
   const dictionary = new StyleDictionary({
     source: [sourcePath],
+    log: {
+      verbosity: 'silent' // silent to hide success messages, fatal error should still be logged
+    },
     platforms: {
       scss: {
         transformGroup: 'scss',

packages/ui-toggle-details/src/ToggleDetails/index.tsx

@@ -39,6 +39,7 @@ import generateComponentTheme from './theme'
 import type { ToggleDetailsProps } from './props'
 import { allowedProps, propTypes } from './props'
 import type { ExpandableToggleProps } from '@instructure/ui-expandable'
+import type { ViewProps } from '@instructure/ui-view'
 
 /**
 ---
@@ -168,7 +169,10 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
     return <div css={this.props.styles?.content}>{this.props.children}</div>
   }
 
-  handleToggle = (event: React.MouseEvent, expanded: boolean) => {
+  handleToggle = (
+    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>,
+    expanded: boolean
+  ) => {
     if (typeof this.props.onToggle === 'function') {
       this.props.onToggle(event, expanded)
     }

packages/ui-toggle-details/src/ToggleDetails/props.ts

@@ -33,6 +33,7 @@ import type {
   ToggleDetailsTheme
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type { ViewProps } from '@instructure/ui-view'
 
 type ToggleDetailsOwnProps = {
   variant?: 'default' | 'filled'
@@ -48,7 +49,10 @@ type ToggleDetailsOwnProps = {
    * Whether the content is initially expanded or hidden (uncontrolled)
    */
   defaultExpanded?: boolean
-  onToggle?: (event: React.MouseEvent, expanded: boolean) => void
+  onToggle?: (
+    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>,
+    expanded: boolean
+  ) => void
   /**
    * The icon to display next to the summary text when content is hidden
    */

scripts/bootstrap.js

@@ -34,16 +34,12 @@ function buildProject() {
   // if one of the sub processes fails, then we terminate the other sub process and exit the main process
   const spawnStdIoOpts = { stdio: ['inherit', 'inherit', 'pipe'] }
   execSync(
-    'lerna run prepare-build --stream --scope @instructure/ui-icons',
+    'lerna run prepare-build --scope @instructure/ui-icons --loglevel silent',
     opts
   )
   // eslint-disable-next-line no-console
   console.info('Starting Babel and TSC...')
-  const tsBuild = spawn(
-    'npm',
-    ['run', 'build:types', '--verbose'],
-    spawnStdIoOpts
-  )
+  const tsBuild = spawn('npm', ['run', 'build:types'], spawnStdIoOpts)
   const babelBuild = spawn('npm', ['run', 'build'], spawnStdIoOpts)
   tsBuild.on('exit', (code) => {
     if (code !== 0) {
@@ -64,9 +60,7 @@ function buildProject() {
       console.error("'npm run build' failed :(")
       process.exit(code)
     }
-    const result = execSync('npm run build:tokens', opts)
-    // eslint-disable-next-line no-console
-    console.info('npm run build:tokens result', result)
+    execSync('npm run build:tokens', opts)
   })
 }
 function bootstrap() {