@instructure/ui-tray 11.6.0 → 11.6.1-snapshot-129

package/src/Tray/v2/props.ts

@@ -0,0 +1,206 @@
+/*
+ * 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 type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+import type {
+  OtherHTMLAttributes,
+  TrayTheme,
+  LiveRegion,
+  UIElement
+} from '@instructure/shared-types'
+import type { TextDirectionContextConsumerProps } from '@instructure/ui-i18n'
+import type {
+  TransitionType,
+  BaseTransitionStatesType
+} from '@instructure/ui-motion'
+
+type TrayOwnProps = {
+  label: string
+  /**
+   * The size (width) of the `<Tray />` when placement is `start` or `end`
+   */
+  size?: 'x-small' | 'small' | 'regular' | 'medium' | 'large'
+  /**
+   * Placement to determine where the `<Tray />` should display in the viewport
+   */
+  placement?: 'top' | 'bottom' | 'start' | 'end' | 'center'
+  /**
+   * Whether or not the `<Tray />` is open
+   */
+  open?: boolean
+  /**
+   * An element or a function returning an element to focus by default
+   */
+  defaultFocusElement?: UIElement
+  /**
+   *
+   * A function that returns a reference to the content element
+   */
+  contentRef?: (el: HTMLSpanElement | null) => void
+  /**
+   * Whether focus should be contained within the `<Tray/>` when it is open
+   */
+  shouldContainFocus?: boolean
+  /**
+   * Whether focus should be restored when the `<Tray/>` is closed
+   */
+  shouldReturnFocus?: boolean
+  /**
+   * Should the `<Tray />` hide when clicks occur outside the content
+   */
+  shouldCloseOnDocumentClick?: boolean
+  /**
+   * Callback fired when `<Tray />` content has been mounted in the DOM
+   */
+  onOpen?: (type?: TransitionType) => void
+  /**
+   * Callback fired when `<Tray />` has been unmounted from the DOM
+   */
+  onClose?: (type?: TransitionType) => void
+  /**
+   * Callback fired when the `<Tray />` is requesting to be closed
+   */
+  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?: Element | (() => Element | null) | null
+  /**
+   * Insert the element at the 'top' of the mountNode or at the 'bottom'
+   */
+  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?: LiveRegion
+  /**
+   * Callback fired when the <Tray /> transitions in/out
+   */
+  onTransition?: (
+    toState: BaseTransitionStatesType,
+    fromState: BaseTransitionStatesType
+  ) => void
+  /**
+   * Callback fired before the <Tray /> transitions in
+   */
+  onEnter?: () => void
+  /**
+   * Callback fired as the <Tray /> begins to transition in
+   */
+  onEntering?: () => void
+  /**
+   * Callback fired after the <Tray /> finishes transitioning in
+   */
+  onEntered?: (type?: TransitionType) => void
+  /**
+   * Callback fired right before the <Tray /> transitions out
+   */
+  onExit?: () => void
+  /**
+   * Callback fired as the <Tray /> begins to transition out
+   */
+  onExiting?: () => void
+  /**
+   * Callback fired after the <Tray /> finishes transitioning out
+   */
+  onExited?: (type?: TransitionType) => void
+  /**
+   * Run the enter animation when the component mounts, if it is initially
+   * shown
+   */
+  transitionOnMount?: boolean
+  /**
+   * Run the enter animation
+   */
+  transitionEnter?: boolean
+  /**
+   * Run the exit animation
+   */
+  transitionExit?: boolean
+  /**
+   * Should the `<Tray />` have a border
+   */
+  border?: boolean
+  /**
+   * Should the `<Tray />` have a box shadow
+   */
+  shadow?: boolean
+  children?: React.ReactNode
+
+  /**
+   * Add Mask overlay to the `<Tray />`
+   */
+  enableMask?: boolean
+}
+
+type PropKeys = keyof TrayOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TrayProps = TrayOwnProps &
+  TextDirectionContextConsumerProps &
+  WithStyleProps<TrayTheme, TrayStyle> &
+  OtherHTMLAttributes<TrayOwnProps>
+
+type TrayStyle = ComponentStyle<'tray' | 'content'>
+const allowedProps: AllowedPropKeys = [
+  'label',
+  'children',
+  'size',
+  'placement',
+  'open',
+  'defaultFocusElement',
+  'contentRef',
+  'shouldContainFocus',
+  'shouldReturnFocus',
+  'shouldCloseOnDocumentClick',
+  'onOpen',
+  'onClose',
+  'onDismiss',
+  'mountNode',
+  'insertAt',
+  'liveRegion',
+  'onTransition',
+  'onEnter',
+  'onEntering',
+  'onEntered',
+  'onExit',
+  'onExiting',
+  'onExited',
+  'transitionOnMount',
+  'transitionEnter',
+  'transitionExit',
+  'border',
+  'shadow',
+  'enableMask'
+]
+type TrayState = { transitioning: boolean; open: boolean }
+export type { TrayProps, TrayStyle, TrayState }
+export { allowedProps }

package/src/Tray/v2/styles.ts

@@ -0,0 +1,158 @@
+/*
+ * 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 type { NewComponentTypes } from '@instructure/ui-themes'
+import { boxShadowObjectsToCSSString } from '@instructure/ui-themes'
+import type { TrayProps, TrayStyle } from './props'
+
+type StyleParams = {
+  border: TrayProps['border']
+  shadow: TrayProps['shadow']
+  size: TrayProps['size']
+  placement: TrayProps['placement']
+}
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} params the props and passed through data of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['Tray'],
+  params: StyleParams
+): TrayStyle => {
+  const { border, shadow, size, placement } = params
+
+  const borderStyle = {
+    borderWidth: 0,
+    borderColor: componentTheme.borderColor,
+    borderStyle: 'solid'
+  }
+
+  const shadowStyle = shadow
+    ? {
+        boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow)
+      }
+    : {}
+
+  const contentStyle =
+    placement === 'start' || placement === 'end' || placement === 'center'
+      ? {
+          label: 'tray__content',
+          minHeight: '100vh'
+        }
+      : {}
+
+  const placementStyles = {
+    top: {
+      insetInlineStart: 0,
+      insetInlineEnd: 0,
+      top: 0
+    },
+    bottom: {
+      insetInlineStart: 0,
+      insetInlineEnd: 0,
+      bottom: 0
+    },
+    start: {
+      top: 0,
+      bottom: 0,
+      insetInlineStart: 0,
+      insetInlineEnd: 'auto'
+    },
+    end: {
+      top: 0,
+      bottom: 0,
+      insetInlineEnd: 0,
+      insetInlineStart: 'auto'
+    },
+    center: {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    }
+  }
+
+  const borderPlacementStyle = border
+    ? {
+        start: {
+          borderInlineEndWidth: componentTheme.borderWidth
+        },
+        end: {
+          borderInlineStartWidth: componentTheme.borderWidth
+        },
+        top: {
+          borderBottomWidth: componentTheme.borderWidth
+        },
+        bottom: {
+          borderTopWidth: componentTheme.borderWidth
+        },
+        center: {}
+      }
+    : {}
+
+  const sizeVariants = {
+    'x-small': componentTheme.widthXs,
+    small: componentTheme.widthSm,
+    regular: componentTheme.widthMd,
+    medium: componentTheme.widthLg,
+    large: componentTheme.widthXl
+  }
+
+  const sizeStyle =
+    placement === 'start' || placement === 'end'
+      ? {
+          width: sizeVariants[size!]
+        }
+      : {}
+
+  return {
+    tray: {
+      label: 'tray',
+      padding: componentTheme.padding,
+      backgroundColor: componentTheme.backgroundColor,
+      position: 'fixed',
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      boxSizing: 'border-box',
+      zIndex: componentTheme.zIndex,
+      maxWidth: '100vw',
+      maxHeight: '100vh',
+      ...shadowStyle,
+      ...placementStyles[placement!],
+      ...(border && borderStyle),
+      ...(border && borderPlacementStyle[placement!]),
+      ...sizeStyle
+    },
+    content: {
+      label: 'tray__content',
+      ...contentStyle
+    }
+  }
+}
+
+export default generateStyle

package/src/exports/a.ts

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+export { Tray } from '../Tray/v1'
+export type { TrayProps } from '../Tray/v1/props'

package/src/exports/b.ts

@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+export { Tray } from '../Tray/v2'
+export type { TrayProps } from '../Tray/v2/props'