@instructure/ui-toggle-details 8.8.1-snapshot.8 → 8.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-toggle-details",
-  "version": "8.8.1-snapshot.8+7b83164f4",
+  "version": "8.9.0",
   "description": "A styled toggleable, accordion-like component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,29 +24,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-test-locator": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-test-queries": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-test-utils": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-themes": "8.8.1-snapshot.8+7b83164f4"
+    "@instructure/ui-babel-preset": "8.9.0",
+    "@instructure/ui-test-locator": "8.9.0",
+    "@instructure/ui-test-queries": "8.9.0",
+    "@instructure/ui-test-utils": "8.9.0",
+    "@instructure/ui-themes": "8.9.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/shared-types": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-buttons": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-dom-utils": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-expandable": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-flex": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-icons": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-menu": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-motion": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-prop-types": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-react-utils": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-testable": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-utils": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/ui-view": "8.8.1-snapshot.8+7b83164f4",
-    "@instructure/uid": "8.8.1-snapshot.8+7b83164f4",
+    "@instructure/emotion": "8.9.0",
+    "@instructure/shared-types": "8.9.0",
+    "@instructure/ui-buttons": "8.9.0",
+    "@instructure/ui-dom-utils": "8.9.0",
+    "@instructure/ui-expandable": "8.9.0",
+    "@instructure/ui-flex": "8.9.0",
+    "@instructure/ui-icons": "8.9.0",
+    "@instructure/ui-menu": "8.9.0",
+    "@instructure/ui-motion": "8.9.0",
+    "@instructure/ui-prop-types": "8.9.0",
+    "@instructure/ui-react-utils": "8.9.0",
+    "@instructure/ui-testable": "8.9.0",
+    "@instructure/ui-utils": "8.9.0",
+    "@instructure/ui-view": "8.9.0",
+    "@instructure/uid": "8.9.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -55,6 +55,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "7b83164f4c5872f3a217e010563f59bf584ae4fc"
+  "sideEffects": false
 }

package/src/ToggleDetails/index.tsx

@@ -23,7 +23,6 @@
  */
 /** @jsx jsx */
 import { Component } from 'react'
-import PropTypes from 'prop-types'
 
 import { Button } from '@instructure/ui-buttons'
 import {
@@ -31,7 +30,6 @@ import {
   IconArrowOpenDownSolid
 } from '@instructure/ui-icons'
 import { Expandable } from '@instructure/ui-expandable'
-import { controllable } from '@instructure/ui-prop-types'
 import { omitProps, pickProps } from '@instructure/ui-react-utils'
 import { isActiveElement } from '@instructure/ui-dom-utils'
 import { testable } from '@instructure/ui-testable'
@@ -40,7 +38,8 @@ import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import { ToggleDetailsProps, ToggleDetailsStyleProps } from './types'
+import type { ToggleDetailsProps, ToggleDetailsStyleProps } from './props'
+import { allowedProps, propTypes } from './props'
 
 /**
 ---
@@ -51,51 +50,8 @@ category: components
 @testable()
 class ToggleDetails extends Component<ToggleDetailsProps> {
   static readonly componentId = 'ToggleDetails'
-
-  static propTypes = {
-    // eslint-disable-next-line react/require-default-props
-    makeStyles: PropTypes.func,
-    // eslint-disable-next-line react/require-default-props
-    styles: PropTypes.object,
-    variant: PropTypes.oneOf(['default', 'filled']),
-    /**
-     * The summary that displays and can be interacted with
-     */
-    summary: PropTypes.node.isRequired,
-    /**
-     * Whether the content is expanded or hidden
-     */
-    expanded: controllable(PropTypes.bool, 'onToggle', 'defaultExpanded'),
-    /**
-     * Whether the content is initially expanded or hidden (uncontrolled)
-     */
-    defaultExpanded: PropTypes.bool,
-    onToggle: PropTypes.func,
-    /**
-     * The icon to display next to the summary text when content is hidden
-     */
-    icon: PropTypes.func,
-    /**
-     * The icon to display when content is expanded
-     */
-    iconExpanded: PropTypes.func,
-    /**
-     * Icon position at the start or end of the summary text
-     */
-    iconPosition: PropTypes.oneOf(['start', 'end']),
-    /**
-     * should the summary fill the width of its container
-     */
-    fluidWidth: PropTypes.bool,
-    /**
-     * The toggleable content passed inside the ToggleDetails component
-     */
-    children: PropTypes.node,
-    /**
-     * Choose a size for the expand/collapse icon
-     */
-    size: PropTypes.oneOf(['small', 'medium', 'large'])
-  }
+  static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
     variant: 'default',
@@ -107,8 +63,7 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
     defaultExpanded: false,
     // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
     onToggle: function (event, expanded) {},
-    children: null,
-    expanded: undefined
+    children: null
   }
 
   get focused() {
@@ -122,13 +77,11 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles({ animate: false } as ToggleDetailsStyleProps)
+    this.props.makeStyles?.({ animate: false } as ToggleDetailsStyleProps)
   }
 
   componentDidUpdate() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles({ animate: true } as ToggleDetailsStyleProps)
+    this.props.makeStyles?.({ animate: true } as ToggleDetailsStyleProps)
   }
 
   // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'el' implicitly has an 'any' type.
@@ -139,9 +92,9 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
     const { summary, iconPosition } = this.props
 
     return (
-      <span css={this.props.styles.summary}>
+      <span css={this.props.styles?.summary}>
         {iconPosition === 'start' && this.renderIcon(expanded)}
-        <span css={this.props.styles.summaryText}>{summary}</span>
+        <span css={this.props.styles?.summaryText}>{summary}</span>
         {iconPosition === 'end' && this.renderIcon(expanded)}
       </span>
     )
@@ -173,7 +126,7 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
       )
     } else if (props.href) {
       return (
-        <a {...props} css={this.props.styles.toggle} ref={this.getButtonRef}>
+        <a {...props} css={this.props.styles?.toggle} ref={this.getButtonRef}>
           {summary}
         </a>
       )
@@ -182,7 +135,7 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
         <button
           {...props}
           type="button"
-          css={this.props.styles.toggle}
+          css={this.props.styles?.toggle}
           ref={this.getButtonRef}
         >
           {summary}
@@ -196,7 +149,7 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
     const Icon = expanded ? this.props.iconExpanded : this.props.icon
 
     return this.props.children ? (
-      <span css={this.props.styles.icon}>
+      <span css={this.props.styles?.icon}>
         {/* @ts-expect-error ts-migrate(2604) FIXME: JSX element type 'Icon' does not have any construc... Remove this comment to see the full error message */}
         <Icon />
       </span>
@@ -208,22 +161,21 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
     const { children } = this.props
     const expandedStyles = expanded ? { display: 'block' } : { display: 'none' }
     return (
-      <div {...detailsProps} css={[this.props.styles.details, expandedStyles]}>
+      <div {...detailsProps} css={[this.props.styles?.details, expandedStyles]}>
         {children && expanded && this.renderContent()}
       </div>
     )
   }
 
   renderContent() {
-    return <div css={this.props.styles.content}>{this.props.children}</div>
+    return <div css={this.props.styles?.content}>{this.props.children}</div>
   }
 
   // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
   handleToggle = (event, expanded) => {
     // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
     this.props.onToggle(event, expanded)
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles({ animate: true })
+    this.props.makeStyles?.({ animate: true })
   }
 
   render() {
@@ -234,7 +186,7 @@ class ToggleDetails extends Component<ToggleDetailsProps> {
       >
         {({ expanded, getToggleProps, getDetailsProps }) => {
           return (
-            <div css={this.props.styles.toggleDetails}>
+            <div css={this.props.styles?.toggleDetails}>
               {this.renderToggle(getToggleProps(), expanded)}
               {this.renderDetails(expanded, getDetailsProps())}
             </div>

package/src/ToggleDetails/props.ts

@@ -0,0 +1,112 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { controllable } from '@instructure/ui-prop-types'
+
+import type { PropValidators } from '@instructure/shared-types'
+import type { WithStyleProps } from '@instructure/emotion'
+
+type ToggleDetailsOwnProps = {
+  variant?: 'default' | 'filled'
+  summary: React.ReactNode
+  expanded?: any // TODO: controllable(PropTypes.bool, 'onToggle', 'defaultExpanded')
+  defaultExpanded?: boolean
+  onToggle?: (...args: any[]) => any
+  icon?: (...args: any[]) => any
+  iconExpanded?: (...args: any[]) => any
+  iconPosition?: 'start' | 'end'
+  fluidWidth?: boolean
+  size?: 'small' | 'medium' | 'large'
+  children?: React.ReactNode
+}
+
+type PropKeys = keyof ToggleDetailsOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ToggleDetailsProps = ToggleDetailsOwnProps & WithStyleProps
+
+const propTypes: PropValidators<PropKeys> = {
+  variant: PropTypes.oneOf(['default', 'filled']),
+  /**
+   * The summary that displays and can be interacted with
+   */
+  summary: PropTypes.node.isRequired,
+  /**
+   * Whether the content is expanded or hidden
+   */
+  expanded: controllable(PropTypes.bool, 'onToggle', 'defaultExpanded'),
+  /**
+   * Whether the content is initially expanded or hidden (uncontrolled)
+   */
+  defaultExpanded: PropTypes.bool,
+  onToggle: PropTypes.func,
+  /**
+   * The icon to display next to the summary text when content is hidden
+   */
+  icon: PropTypes.func,
+  /**
+   * The icon to display when content is expanded
+   */
+  iconExpanded: PropTypes.func,
+  /**
+   * Icon position at the start or end of the summary text
+   */
+  iconPosition: PropTypes.oneOf(['start', 'end']),
+  /**
+   * should the summary fill the width of its container
+   */
+  fluidWidth: PropTypes.bool,
+  /**
+   * The toggleable content passed inside the ToggleDetails component
+   */
+  children: PropTypes.node,
+  /**
+   * Choose a size for the expand/collapse icon
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large'])
+}
+
+const allowedProps: AllowedPropKeys = [
+  'variant',
+  'summary',
+  'expanded',
+  'defaultExpanded',
+  'onToggle',
+  'icon',
+  'iconExpanded',
+  'iconPosition',
+  'fluidWidth',
+  'children',
+  'size'
+]
+
+export type { ToggleDetailsProps }
+export { propTypes, allowedProps }
+
+export type ToggleDetailsStyleProps = {
+  animate: boolean
+}

package/src/ToggleDetails/styles.ts

@@ -24,7 +24,7 @@
 
 import { keyframes } from '@instructure/emotion'
 import { ToggleDetailsTheme } from '@instructure/shared-types'
-import { ToggleDetailsProps, ToggleDetailsStyleProps } from './types'
+import { ToggleDetailsProps, ToggleDetailsStyleProps } from './props'
 const contentAnimation = keyframes`
   to {
     opacity: 1;

package/src/ToggleGroup/index.tsx

@@ -23,7 +23,6 @@
  */
 
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 
 import {
   omitProps,
@@ -33,7 +32,6 @@ import {
 import { IconButton } from '@instructure/ui-buttons'
 import { Transition } from '@instructure/ui-motion'
 import { Expandable } from '@instructure/ui-expandable'
-import { controllable } from '@instructure/ui-prop-types'
 import { isActiveElement } from '@instructure/ui-dom-utils'
 import { Flex } from '@instructure/ui-flex'
 import { View } from '@instructure/ui-view'
@@ -42,7 +40,8 @@ import {
   IconArrowOpenDownSolid
 } from '@instructure/ui-icons'
 import { testable } from '@instructure/ui-testable'
-import { ToggleGroupProps } from './types'
+import type { ToggleGroupProps } from './props'
+import { allowedProps, propTypes } from './props'
 
 /**
 ---
@@ -53,62 +52,10 @@ category: components
 class ToggleGroup extends Component<ToggleGroupProps> {
   static readonly componentId = 'ToggleGroup'
 
-  static propTypes = {
-    /**
-     * the content to show and hide
-     */
-    children: PropTypes.node.isRequired,
-    /**
-     * the content area next to the toggle button
-     */
-    summary: PropTypes.node.isRequired,
-    /**
-     * provides a screenreader label for the toggle button
-     * (takes `expanded` as an argument if a function)
-     */
-    toggleLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-      .isRequired,
-    /**
-     * the element type to render as
-     */
-    as: PropTypes.elementType,
-    /**
-     * provides a reference to the underlying html root element
-     */
-    elementRef: PropTypes.func,
-    size: PropTypes.oneOf(['small', 'medium', 'large']),
-    /**
-     * Whether the content is expanded or hidden
-     */
-    expanded: controllable(PropTypes.bool, 'onToggle', 'defaultExpanded'),
-    /**
-     * Whether the content is initially expanded or hidden (uncontrolled)
-     */
-    defaultExpanded: PropTypes.bool,
-    /**
-     * Fired when the content display is toggled
-     */
-    onToggle: PropTypes.func,
-    /**
-     * The icon displayed in the toggle button when the content is hidden
-     */
-    icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    /**
-     * The icon displayed in the toggle button when the content is showing
-     */
-    iconExpanded: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-    /**
-     * Transition content into view
-     */
-    transition: PropTypes.bool,
-    /**
-     * Toggle the border around the component
-     */
-    border: PropTypes.bool
-  } as const
+  static allowedProps = allowedProps
+  static propTypes = propTypes
 
   static defaultProps = {
-    expanded: undefined,
     size: 'medium',
     icon: IconArrowOpenEndSolid,
     iconExpanded: IconArrowOpenDownSolid,
@@ -160,7 +107,7 @@ class ToggleGroup extends Component<ToggleGroupProps> {
         withBackground={false}
         withBorder={false}
         size={size === 'large' ? 'medium' : 'small'}
-        elementRef={(el) => {
+        elementRef={(el: any) => {
           this._button = el
         }}
         screenReaderLabel={label}