Repository: h2oai/wave
File: ui/src/dialog.tsx (TypeScript)

Code before:
// See the License for the specific language governing permissions and
// limitations under the License.

import * as Fluent from '@fluentui/react'
import { B, Box, box, Id, S } from 'h2o-wave'
import React from 'react'
import { Component, XComponents } from './form'
import { bond, wave } from './ui'

export const dialogB: Box<Dialog | null> = box(null)

/**
 * A dialog box (Dialog) is a temporary pop-up that takes focus from the page or app
 * and requires people to interact with it. It’s primarily used for confirming actions,
 * such as deleting a file, or asking people to make a choice.
 */
export interface Dialog {
  /** The dialog's title. */
  title: S
  /** The components displayed in this dialog. */
  items: Component[]
  /** The width of the dialog, e.g. '400px'. Defaults to '600px'. */
  width?: S
  /** True if the dialog should have a closing 'X' button at the top right corner. */
  closable?: B
  /** True to disable close by clicking or tapping the area outside the dialog. A blocking Dialog also disables all other actions and commands on the page behind it. They should be used very sparingly, only when it is critical that the user makes a choice or provides information before they can proceed. Blocking Dialogs are generally used for irreversible or potentially destructive tasks. Defaults to False. */
  blocking?: B
  /** Dialog with large header banner, mutually exclusive with `closable` prop. Defaults to False. */
  primary?: B
  /** An identifying name for this component. */
  name?: Id
  /** The events to capture on this dialog. */
  events?: S[]
}

export default bond(() => {
  const
    onDismiss = () => {
      const { closable, blocking, name, events } = dialogB() || {}
      if ((closable || !blocking) && name) {
        events?.forEach(e => {
          if (e === 'dismissed') wave.emit(name, e, true)
        })
      }
      dialogB(null)
    },
    render = () => {
      const
        { title, width = '600px', items = [], closable, primary, blocking = false } = dialogB() || {},
        dialogContentProps: Fluent.IDialogContentProps = {
          title,

Review comment (suggestion):


```suggestion
  /** True to prevent closing when clicking or tapping outside the dialog. Prevents interacting with the page behind the dialog. Defaults to False. */
```

Code after:
// See the License for the specific language governing permissions and
// limitations under the License.

import * as Fluent from '@fluentui/react'
import { B, Box, box, Id, S } from 'h2o-wave'
import React from 'react'
import { Component, XComponents } from './form'
import { bond, wave } from './ui'

export const dialogB: Box<Dialog | null> = box(null)

/**
 * A dialog box (Dialog) is a temporary pop-up that takes focus from the page or app
 * and requires people to interact with it. It’s primarily used for confirming actions,
 * such as deleting a file, or asking people to make a choice.
 */
export interface Dialog {
  /** The dialog's title. */
  title: S
  /** The components displayed in this dialog. */
  items: Component[]
  /** The width of the dialog, e.g. '400px'. Defaults to '600px'. */
  width?: S
  /** True if the dialog should have a closing 'X' button at the top right corner. */
  closable?: B
  /** True to prevent closing when clicking or tapping outside the dialog. Prevents interacting with the page behind the dialog. Defaults to False. */
  blocking?: B
  /** Dialog with large header banner, mutually exclusive with `closable` prop. Defaults to False. */
  primary?: B
  /** An identifying name for this component. */
  name?: Id
  /** The events to capture on this dialog. */
  events?: S[]
}

export default bond(() => {
  const
    onDismiss = () => {
      const { closable, blocking, name, events } = dialogB() || {}
      if ((closable || !blocking) && name) {
        events?.forEach(e => {
          if (e === 'dismissed') wave.emit(name, e, true)
        })
      }
      dialogB(null)
    },
    render = () => {
      const
        { title, width = '600px', items = [], closable, primary, blocking = false } = dialogB() || {},
        dialogContentProps: Fluent.IDialogContentProps = {
          title,