@instructure/ui-alerts 8.15.1-snapshot.0 → 8.16.0

package/src/Alert/props.ts

@@ -35,84 +35,84 @@ import type {
 import type { AlertTheme, PropValidators } from '@instructure/shared-types'
 
 type AlertOwnProps = {
-  children?: ReactNode
-  variant?: 'info' | 'success' | 'warning' | 'error'
-  liveRegion?: (...args: any[]) => any
-  liveRegionPoliteness?: 'polite' | 'assertive'
-  isLiveRegionAtomic?: boolean
-  screenReaderOnly?: boolean
-  timeout?: number
-  margin?: Spacing
-  renderCloseButtonLabel?: ((...args: any[]) => any) | ReactNode
-  onDismiss?: (...args: any[]) => any
-  transition?: 'none' | 'fade'
-  open?: boolean
-  hasShadow: boolean
-}
-
-type PropKeys = keyof AlertOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type AlertProps = AlertOwnProps & WithStyleProps<AlertTheme, AlertStyle>
-
-type AlertStyle = ComponentStyle<'alert' | 'icon' | 'closeButton' | 'content'>
-
-const propTypes: PropValidators<PropKeys> = {
   /**
    * content to be rendered within Alert
    */
-  children: PropTypes.node,
+  children?: ReactNode
   /**
    * Determines color and icon
    */
-  variant: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
-  margin: ThemeablePropTypes.spacing,
+  variant?: 'info' | 'success' | 'warning' | 'error'
   /**
    * Function that returns the DIV where screenreader alerts will be placed.
    */
-  liveRegion: PropTypes.func,
+  liveRegion?: () => Element
   /**
    * Choose the politeness level of screenreader alerts.
    */
-  liveRegionPoliteness: PropTypes.oneOf(['polite', 'assertive']),
+  liveRegionPoliteness?: 'polite' | 'assertive'
   /**
    * If the screenreader alert should be atomic
    */
-  isLiveRegionAtomic: PropTypes.bool,
+  isLiveRegionAtomic?: boolean
   /**
    * If the alert should only be visible to screen readers
    */
-  screenReaderOnly: PropTypes.bool,
+  screenReaderOnly?: boolean
   /**
    * Milliseconds until the Alert is dismissed automatically
    */
-  timeout: PropTypes.number,
+  timeout?: number
+  /**
+   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
+   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
+   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
+   */
+  margin?: Spacing
   /**
    * Close button label. Can be a React component
    */
-  renderCloseButtonLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  renderCloseButtonLabel?: (() => ReactNode) | ReactNode
   /**
    * Callback after the alert is closed
    */
-  onDismiss: PropTypes.func,
+  onDismiss?: () => void
   /**
    * Transition used to make the alert appear and disappear
    */
-  transition: PropTypes.oneOf(['none', 'fade']),
+  transition?: 'none' | 'fade'
   /**
    * if open transitions from truthy to falsey, it's a signal to close and unmount the alert.
    * This is necessary to close the alert from the outside and still run the transition.
    */
-  open: PropTypes.bool,
+  open?: boolean
   /**
    * If the alert should have a shadow.
    */
+  hasShadow: boolean
+}
+
+type PropKeys = keyof AlertOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type AlertProps = AlertOwnProps & WithStyleProps<AlertTheme, AlertStyle>
+
+type AlertStyle = ComponentStyle<'alert' | 'icon' | 'closeButton' | 'content'>
+
+const propTypes: PropValidators<PropKeys> = {
+  children: PropTypes.node,
+  variant: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
+  margin: ThemeablePropTypes.spacing,
+  liveRegion: PropTypes.func,
+  liveRegionPoliteness: PropTypes.oneOf(['polite', 'assertive']),
+  isLiveRegionAtomic: PropTypes.bool,
+  screenReaderOnly: PropTypes.bool,
+  timeout: PropTypes.number,
+  renderCloseButtonLabel: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  onDismiss: PropTypes.func,
+  transition: PropTypes.oneOf(['none', 'fade']),
+  open: PropTypes.bool,
   hasShadow: PropTypes.bool
 }
 
@@ -132,5 +132,9 @@ const allowedProps: AllowedPropKeys = [
   'hasShadow'
 ]
 
-export type { AlertProps, AlertStyle }
+type AlertState = {
+  open: boolean
+}
+
+export type { AlertProps, AlertStyle, AlertState }
 export { propTypes, allowedProps }