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

package/src/Modal/v2/ModalHeader/index.tsx

@@ -0,0 +1,138 @@
+/*
+ * 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 { ComponentElement, Children, Component } from 'react'
+
+import {
+  matchComponentTypes,
+  passthroughProps
+} from '@instructure/ui-react-utils'
+
+import { withStyle } from '@instructure/emotion'
+
+import { CloseButton } from '@instructure/ui-buttons/latest'
+import type { CloseButtonProps } from '@instructure/ui-buttons/latest'
+
+import generateStyle from './styles'
+
+import { allowedProps } from './props'
+import type { ModalHeaderProps, ModalHeaderStyleProps } from './props'
+import ModalContext from '../ModalContext'
+
+type CloseButtonChild = ComponentElement<CloseButtonProps, CloseButton>
+
+/**
+---
+parent: Modal
+id: Modal.Header
+---
+**/
+@withStyle(generateStyle, 'ModalHeader')
+class ModalHeader extends Component<ModalHeaderProps> {
+  static readonly componentId = 'Modal.Header'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    variant: 'default',
+    spacing: 'default'
+  }
+
+  ref: HTMLDivElement | null = null
+  declare context: React.ContextType<typeof ModalContext>
+  static contextType = ModalContext
+
+  /**
+   * Gets all text in a DOM subtree, text under <button> nodes is excluded
+   */
+  getTextExcludingButtons = (root: Node) => {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+      acceptNode(node) {
+        return node.parentElement?.closest('button')
+          ? NodeFilter.FILTER_REJECT
+          : NodeFilter.FILTER_ACCEPT
+      }
+    })
+    let text = ''
+    let current
+    while ((current = walker.nextNode())) {
+      text += current.nodeValue
+    }
+    return text
+  }
+
+  handleRef = (el: HTMLDivElement | null) => {
+    this.ref = el
+    if (el) {
+      const txt = this.getTextExcludingButtons(el)
+      this.context.setBodyScrollAriaLabel?.(txt)
+    }
+  }
+
+  componentDidMount() {
+    this.props.makeStyles?.(this.makeStyleProps())
+  }
+
+  componentDidUpdate() {
+    this.props.makeStyles?.(this.makeStyleProps())
+  }
+
+  makeStyleProps = (): ModalHeaderStyleProps => {
+    return {
+      withCloseButton: this.usesCloseButton
+    }
+  }
+
+  get usesCloseButton() {
+    let hasCloseButton = false
+
+    Children.forEach(this.props.children, (child) => {
+      if (
+        child &&
+        matchComponentTypes<CloseButtonChild>(child, [CloseButton])
+      ) {
+        hasCloseButton = true
+      }
+    })
+
+    return hasCloseButton
+  }
+
+  render() {
+    const { children, ...rest } = this.props
+
+    return (
+      <div
+        css={this.props.styles?.modalHeader}
+        {...passthroughProps(rest)}
+        ref={this.handleRef}
+        data-cid="ModalHeader"
+      >
+        {children}
+      </div>
+    )
+  }
+}
+
+export default ModalHeader
+export { ModalHeader }

package/src/Modal/v2/ModalHeader/props.ts

@@ -0,0 +1,54 @@
+/*
+ * 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 {
+  ModalHeaderTheme,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
+
+type ModalHeaderOwnProps = {
+  children?: React.ReactNode
+  variant?: 'default' | 'inverse'
+  spacing?: 'default' | 'compact'
+}
+
+type ModalHeaderStyleProps = {
+  withCloseButton: boolean
+}
+
+type PropKeys = keyof ModalHeaderOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ModalHeaderProps = ModalHeaderOwnProps &
+  WithStyleProps<ModalHeaderTheme, ModalHeaderStyle> &
+  OtherHTMLAttributes<ModalHeaderOwnProps>
+
+type ModalHeaderStyle = ComponentStyle<'modalHeader'>
+const allowedProps: AllowedPropKeys = ['children', 'variant', 'spacing']
+
+export type { ModalHeaderProps, ModalHeaderStyleProps, ModalHeaderStyle }
+export { allowedProps }

package/src/Modal/v2/ModalHeader/styles.ts

@@ -0,0 +1,99 @@
+/*
+ * 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, SharedTokens } from '@instructure/ui-themes'
+import type {
+  ModalHeaderProps,
+  ModalHeaderStyleProps,
+  ModalHeaderStyle
+} from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} _sharedTokens Shared theme token object (unused)
+ * @param  {Object} state the state 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['ModalHeader'],
+  props: ModalHeaderProps,
+  _sharedTokens: SharedTokens,
+  state: ModalHeaderStyleProps
+): ModalHeaderStyle => {
+  const { variant, spacing } = props
+  const { withCloseButton } = state
+
+  const sizeVariants = {
+    default: {
+      padding: componentTheme.padding,
+      paddingInlineStart: componentTheme.padding,
+      paddingInlineEnd: withCloseButton
+        ? `calc(${componentTheme.padding} * 2 + 1em)`
+        : componentTheme.padding
+    },
+    compact: {
+      padding: componentTheme.paddingCompact,
+      paddingInlineStart: componentTheme.paddingCompact,
+      paddingInlineEnd: withCloseButton
+        ? `calc(${componentTheme.paddingCompact} * 2 + 1em)`
+        : componentTheme.paddingCompact
+    }
+  }
+
+  const inverseStyle =
+    variant === 'inverse'
+      ? {
+          background: componentTheme.inverseBackgroundColor,
+          borderBottomColor: componentTheme.inverseBorderColor
+        }
+      : {}
+
+  return {
+    modalHeader: {
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit',
+      label: 'modalHeader',
+      boxSizing: 'border-box',
+      flex: '0 0 auto',
+      background: componentTheme.backgroundColor,
+      borderBottomWidth: componentTheme.borderWidth,
+      borderBottomStyle: 'solid',
+      borderBottomColor: componentTheme.borderColor,
+      ...sizeVariants[spacing!],
+      ...inverseStyle,
+
+      // Position is set to relative for small viewports to ensure proper close button positioning during scrolling
+      '@media (max-height: 20rem)': {
+        position: 'relative'
+      }
+    }
+  }
+}
+
+export default generateStyle