<commit_before>/* eslint-disable react/no-unused-prop-types */

import classNames from 'classnames'
import CloseIcon from 'part:@sanity/base/close-icon'
import Button from 'part:@sanity/components/buttons/default'
import {ClickOutside} from 'part:@sanity/components/click-outside'
import {ContainerQuery} from 'part:@sanity/components/container-query'
import styles from 'part:@sanity/components/dialogs/default-style'
import {Modal, useModal} from 'part:@sanity/components/modal'
import {ScrollContainer} from 'part:@sanity/components/scroll'
import React, {createElement, useCallback} from 'react'
import Escapable from '../utilities/Escapable'
import {DefaultDialogActions} from './DefaultDialogActions'
import {DialogAction, DialogColor} from './types'

interface DefaultDialogProps {
  actions?: DialogAction[]
  actionsAlign?: 'start' | 'end'
  children?: React.ReactNode
  color?: DialogColor
  className?: string
  onClose?: () => void
  onEscape?: (event: KeyboardEvent) => void
  onClickOutside?: () => void
  onAction?: (action: DialogAction) => void
  padding?: 'none' | 'small' | 'medium' | 'large'
  showCloseButton?: boolean
  size?: 'small' | 'medium' | 'large' | 'auto'
  title?: string
}

function DefaultDialogChildren(props: DefaultDialogProps) {
  const {
    actions,
    actionsAlign,
    children,
    className: classNameProp,
    color,
    onAction,
    onClose,
    onClickOutside,
    onEscape,
    padding = 'medium',
    showCloseButton = true,
    size = 'medium',
    title
  } = props

  const className = classNames(
    styles.root,
    actions && actions.length > 0 && styles.hasFunctions,
    classNameProp
  )

  const modal = useModal() || {depth: 0, size: 0}

  const handleEscape = useCallback(
    (event: KeyboardEvent) => {
      // This code used to be `onEscape || onClose`
      if (onEscape) onEscape(event)
      else if (onClose) onClose()
    },
    [onEscape, onClose]
  )

  const renderCloseButton = onClose && showCloseButton
  const renderFloatingCloseButton = !title && renderCloseButton
  const contentClassName =
    actions && actions.length > 0 ? styles.content : styles.contentWithoutFooter

  const handleClickOutside = useCallback(() => {
    if (onClickOutside) onClickOutside()
  }, [onClickOutside])

  const closeButtonColor =
    color && ['danger', 'success', 'warning'].includes(color) ? 'white' : undefined

  return (
    <ContainerQuery
      className={className}
      data-dialog-color={color}
      data-dialog-padding={padding}
      data-dialog-size={size}
      style={{opacity: modal.depth < modal.size ? 0 : 1}}
    >
      <div className={styles.overlay} />

      <ClickOutside onClickOutside={modal.depth === modal.size ? handleClickOutside : undefined}>
        {ref => (
          <div className={styles.card} ref={ref}>
            <Escapable
              // eslint-disable-next-line react/jsx-no-bind
              onEscape={event =>
                (modal.depth === modal.size || event.shiftKey) && handleEscape(event)
              }
            />
            <div className={styles.inner}>
              {renderFloatingCloseButton && (
                <div className={styles.floatingCloseButtonContainer}>
                  <Button
                    icon={CloseIcon}
                    kind="simple"
                    onClick={onClose}
                    padding="small"
                    title="Close"
                  />
                </div>
              )}<commit_msg>[components] Do not hide modal ancestors<commit_after>/* eslint-disable react/no-unused-prop-types */

import classNames from 'classnames'
import CloseIcon from 'part:@sanity/base/close-icon'
import Button from 'part:@sanity/components/buttons/default'
import {ClickOutside} from 'part:@sanity/components/click-outside'
import {ContainerQuery} from 'part:@sanity/components/container-query'
import styles from 'part:@sanity/components/dialogs/default-style'
import {Modal, useModal} from 'part:@sanity/components/modal'
import {ScrollContainer} from 'part:@sanity/components/scroll'
import React, {createElement, useCallback} from 'react'
import Escapable from '../utilities/Escapable'
import {DefaultDialogActions} from './DefaultDialogActions'
import {DialogAction, DialogColor} from './types'

interface DefaultDialogProps {
  actions?: DialogAction[]
  actionsAlign?: 'start' | 'end'
  children?: React.ReactNode
  color?: DialogColor
  className?: string
  onClose?: () => void
  onEscape?: (event: KeyboardEvent) => void
  onClickOutside?: () => void
  onAction?: (action: DialogAction) => void
  padding?: 'none' | 'small' | 'medium' | 'large'
  showCloseButton?: boolean
  size?: 'small' | 'medium' | 'large' | 'auto'
  title?: string
}

function DefaultDialogChildren(props: DefaultDialogProps) {
  const {
    actions,
    actionsAlign,
    children,
    className: classNameProp,
    color,
    onAction,
    onClose,
    onClickOutside,
    onEscape,
    padding = 'medium',
    showCloseButton = true,
    size = 'medium',
    title
  } = props

  const className = classNames(
    styles.root,
    actions && actions.length > 0 && styles.hasFunctions,
    classNameProp
  )

  const modal = useModal() || {depth: 0, size: 0}

  const handleEscape = useCallback(
    (event: KeyboardEvent) => {
      // This code used to be `onEscape || onClose`
      if (onEscape) onEscape(event)
      else if (onClose) onClose()
    },
    [onEscape, onClose]
  )

  const renderCloseButton = onClose && showCloseButton
  const renderFloatingCloseButton = !title && renderCloseButton
  const contentClassName =
    actions && actions.length > 0 ? styles.content : styles.contentWithoutFooter

  const handleClickOutside = useCallback(() => {
    if (onClickOutside) onClickOutside()
  }, [onClickOutside])

  const closeButtonColor =
    color && ['danger', 'success', 'warning'].includes(color) ? 'white' : undefined

  return (
    <ContainerQuery
      className={className}
      data-dialog-color={color}
      data-dialog-padding={padding}
      data-dialog-size={size}
      // style={{opacity: modal.depth < modal.size ? 0 : 1}}
    >
      <div className={styles.overlay} />

      <ClickOutside onClickOutside={modal.depth === modal.size ? handleClickOutside : undefined}>
        {ref => (
          <div className={styles.card} ref={ref}>
            <Escapable
              // eslint-disable-next-line react/jsx-no-bind
              onEscape={event =>
                (modal.depth === modal.size || event.shiftKey) && handleEscape(event)
              }
            />
            <div className={styles.inner}>
              {renderFloatingCloseButton && (
                <div className={styles.floatingCloseButtonContainer}>
                  <Button
                    icon={CloseIcon}
                    kind="simple"
                    onClick={onClose}
                    padding="small"
                    title="Close"
                  />
                </div>
              )}
{'fraction_non_alphanumeric': 0.12507155123068117, 'fraction_numerical': 0.0017172295363480253, 'mean_word_length': 2.85068870523416, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1561000', 'n_tokens_mistral': 2019, 'n_tokens_neox': 1949, 'n_words': 455}