@instructure/ui-tray 8.25.1-snapshot.0 → 8.26.0

package/src/Tray/props.ts

@@ -32,168 +32,161 @@ import type {
   OtherHTMLAttributes,
   PropValidators,
   TrayTheme,
-  LiveRegion
+  LiveRegion,
+  UIElement
 } from '@instructure/shared-types'
 import type { BidirectionalProps } from '@instructure/ui-i18n'
-import type { TransitionType } from '@instructure/ui-motion'
+import type {
+  TransitionType,
+  BaseTransitionStatesType
+} from '@instructure/ui-motion'
 
 type TrayOwnProps = {
   label: string
-  size?: 'x-small' | 'small' | 'regular' | 'medium' | 'large'
-  placement?: 'top' | 'bottom' | 'start' | 'end' | 'center'
-  open?: boolean
-  defaultFocusElement?: React.ReactElement | ((...args: any[]) => any)
-  contentRef?: (...args: any[]) => any
-  shouldContainFocus?: boolean
-  shouldReturnFocus?: boolean
-  shouldCloseOnDocumentClick?: boolean
-  onOpen?: (type?: TransitionType) => void
-  onClose?: (type?: TransitionType) => void
-  onDismiss?: (...args: any[]) => any
-  mountNode?: any // TODO: PropTypes.oneOfType([element, PropTypes.func])
-  insertAt?: 'bottom' | 'top'
-  liveRegion?: LiveRegion
-  onTransition?: (...args: any[]) => any
-  onEnter?: (...args: any[]) => any
-  onEntering?: (...args: any[]) => any
-  onEntered?: (type?: TransitionType) => void
-  onExit?: (...args: any[]) => any
-  onExiting?: (...args: any[]) => any
-  onExited?: (type?: TransitionType) => void
-  border?: boolean
-  shadow?: boolean
-  children?: React.ReactNode
-}
-
-type PropKeys = keyof TrayOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type TrayProps = TrayOwnProps &
-  BidirectionalProps &
-  WithStyleProps<TrayTheme, TrayStyle> &
-  OtherHTMLAttributes<TrayOwnProps>
-
-type TrayStyle = ComponentStyle<'tray' | 'content'>
-
-const propTypes: PropValidators<PropKeys> = {
-  label: PropTypes.string.isRequired,
-  children: PropTypes.node,
-
   /**
    * The size (width) of the `<Tray />` when placement is `start` or `end`
    */
-  size: PropTypes.oneOf(['x-small', 'small', 'regular', 'medium', 'large']),
-
+  size?: 'x-small' | 'small' | 'regular' | 'medium' | 'large'
   /**
    * Placement to determine where the `<Tray />` should display in the viewport
    */
-  placement: PropTypes.oneOf(['top', 'bottom', 'start', 'end', 'center']),
-
+  placement?: 'top' | 'bottom' | 'start' | 'end' | 'center'
   /**
    * Whether or not the `<Tray />` is open
    */
-  open: PropTypes.bool,
-
+  open?: boolean
   /**
    * An element or a function returning an element to focus by default
    */
-  defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
-
+  defaultFocusElement?: UIElement
   /**
    *
    * A function that returns a reference to the content element
    */
-  contentRef: PropTypes.func,
-
+  contentRef?: (el: HTMLSpanElement | null) => void
   /**
    * Whether focus should be contained within the `<Tray/>` when it is open
    */
-  shouldContainFocus: PropTypes.bool,
-
+  shouldContainFocus?: boolean
   /**
    * Whether focus should be restored when the `<Tray/>` is closed
    */
-  shouldReturnFocus: PropTypes.bool,
-
+  shouldReturnFocus?: boolean
   /**
    * Should the `<Tray />` hide when clicks occur outside the content
    */
-  shouldCloseOnDocumentClick: PropTypes.bool,
-
+  shouldCloseOnDocumentClick?: boolean
   /**
    * Callback fired when `<Tray />` content has been mounted in the DOM
    */
-  onOpen: PropTypes.func,
-
+  onOpen?: (type?: TransitionType) => void
   /**
    * Callback fired when `<Tray />` has been unmounted from the DOM
    */
-  onClose: PropTypes.func,
-
+  onClose?: (type?: TransitionType) => void
   /**
    * Callback fired when the `<Tray />` is requesting to be closed
    */
-  onDismiss: PropTypes.func,
-
+  onDismiss?: (
+    event: React.UIEvent | React.FocusEvent,
+    documentClick?: boolean
+  ) => void
   /**
    * An element or a function returning an element to use as the mount node
    * for the `<Tray />` (defaults to `document.body`)
    */
-  mountNode: PropTypes.oneOfType([element, PropTypes.func]),
-
+  mountNode?: Element | (() => Element | null) | null
   /**
    * Insert the element at the 'top' of the mountNode or at the 'bottom'
    */
-  insertAt: PropTypes.oneOf(['bottom', 'top']),
-
+  insertAt?: 'bottom' | 'top'
   /**
    * An element, function returning an element, or array of elements that will not be hidden from
    * the screen reader when the `<Tray />` is open
    */
-  liveRegion: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.element),
-    PropTypes.element,
-    PropTypes.func
-  ]),
-
+  liveRegion?: LiveRegion
   /**
    * Callback fired when the <Tray /> transitions in/out
    */
-  onTransition: PropTypes.func,
+  onTransition?: (
+    toState: BaseTransitionStatesType,
+    fromState: BaseTransitionStatesType
+  ) => void
   /**
    * Callback fired before the <Tray /> transitions in
    */
-  onEnter: PropTypes.func,
+  onEnter?: () => void
   /**
    * Callback fired as the <Tray /> begins to transition in
    */
-  onEntering: PropTypes.func,
+  onEntering?: () => void
   /**
    * Callback fired after the <Tray /> finishes transitioning in
    */
-  onEntered: PropTypes.func,
+  onEntered?: (type?: TransitionType) => void
   /**
    * Callback fired right before the <Tray /> transitions out
    */
-  onExit: PropTypes.func,
+  onExit?: () => void
   /**
    * Callback fired as the <Tray /> begins to transition out
    */
-  onExiting: PropTypes.func,
+  onExiting?: () => void
   /**
    * Callback fired after the <Tray /> finishes transitioning out
    */
-  onExited: PropTypes.func,
-
+  onExited?: (type?: TransitionType) => void
   /**
    * Should the `<Tray />` have a border
    */
-  border: PropTypes.bool,
-
+  border?: boolean
   /**
    * Should the `<Tray />` have a box shadow
    */
+  shadow?: boolean
+  children?: React.ReactNode
+}
+
+type PropKeys = keyof TrayOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TrayProps = TrayOwnProps &
+  BidirectionalProps &
+  WithStyleProps<TrayTheme, TrayStyle> &
+  OtherHTMLAttributes<TrayOwnProps>
+
+type TrayStyle = ComponentStyle<'tray' | 'content'>
+
+const propTypes: PropValidators<PropKeys> = {
+  label: PropTypes.string.isRequired,
+  children: PropTypes.node,
+  size: PropTypes.oneOf(['x-small', 'small', 'regular', 'medium', 'large']),
+  placement: PropTypes.oneOf(['top', 'bottom', 'start', 'end', 'center']),
+  open: PropTypes.bool,
+  defaultFocusElement: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  contentRef: PropTypes.func,
+  shouldContainFocus: PropTypes.bool,
+  shouldReturnFocus: PropTypes.bool,
+  shouldCloseOnDocumentClick: PropTypes.bool,
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func,
+  onDismiss: PropTypes.func,
+  mountNode: PropTypes.oneOfType([element, PropTypes.func]),
+  insertAt: PropTypes.oneOf(['bottom', 'top']),
+  liveRegion: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.element),
+    PropTypes.element,
+    PropTypes.func
+  ]),
+  onTransition: PropTypes.func,
+  onEnter: PropTypes.func,
+  onEntering: PropTypes.func,
+  onEntered: PropTypes.func,
+  onExit: PropTypes.func,
+  onExiting: PropTypes.func,
+  onExited: PropTypes.func,
+  border: PropTypes.bool,
   shadow: PropTypes.bool
 }
 
@@ -224,6 +217,6 @@ const allowedProps: AllowedPropKeys = [
   'border',
   'shadow'
 ]
-
-export type { TrayProps, TrayStyle }
+type TrayState = { transitioning: boolean }
+export type { TrayProps, TrayStyle, TrayState }
 export { propTypes, allowedProps }