@wordpress/components/build/confirm-dialog/component.cjs.map

UI components for WordPress.

{
  "version": 3,
  "sources": ["../../src/confirm-dialog/component.tsx"],
  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport { useContextSystem, contextConnect } from '../context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst UnconnectedConfirmDialog = (props, forwardedRef) => {\n  const {\n    isOpen: isOpenProp,\n    onConfirm,\n    onCancel,\n    children,\n    confirmButtonText,\n    cancelButtonText,\n    isBusy,\n    ...otherProps\n  } = useContextSystem(props, 'ConfirmDialog');\n  const cx = useCx();\n  const wrapperClassName = cx(styles.wrapper);\n  const cancelButtonRef = useRef(null);\n  const confirmButtonRef = useRef(null);\n  const [isOpen, setIsOpen] = useState();\n  const [shouldSelfClose, setShouldSelfClose] = useState();\n  useEffect(() => {\n    // We only allow the dialog to close itself if `isOpenProp` is *not* set.\n    // If `isOpenProp` is set, then it (probably) means it's controlled by a\n    // parent component. In that case, `shouldSelfClose` might do more harm than\n    // good, so we disable it.\n    const isIsOpenSet = typeof isOpenProp !== 'undefined';\n    setIsOpen(isIsOpenSet ? isOpenProp : true);\n    setShouldSelfClose(!isIsOpenSet);\n  }, [isOpenProp]);\n  const handleEvent = useCallback(callback => event => {\n    callback?.(event);\n    if (shouldSelfClose) {\n      setIsOpen(false);\n    }\n  }, [shouldSelfClose, setIsOpen]);\n  const handleEnter = useCallback(event => {\n    // Avoid triggering the 'confirm' action when a button is focused,\n    // as this can cause a double submission.\n    const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;\n    if (!isConfirmOrCancelButton && event.key === 'Enter') {\n      handleEvent(onConfirm)(event);\n    }\n  }, [handleEvent, onConfirm]);\n  const cancelLabel = cancelButtonText ?? __('Cancel');\n  const confirmLabel = confirmButtonText ?? __('OK');\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: isOpen && /*#__PURE__*/_jsx(Modal, {\n      onRequestClose: handleEvent(onCancel),\n      onKeyDown: handleEnter,\n      closeButtonLabel: cancelLabel,\n      isDismissible: true,\n      ref: forwardedRef,\n      overlayClassName: wrapperClassName,\n      __experimentalHideHeader: true,\n      ...otherProps,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 8,\n        children: [/*#__PURE__*/_jsx(Text, {\n          children: children\n        }), /*#__PURE__*/_jsxs(Flex, {\n          direction: \"row\",\n          justify: \"flex-end\",\n          children: [/*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: cancelButtonRef,\n            variant: \"tertiary\",\n            onClick: handleEvent(onCancel),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            children: cancelLabel\n          }), /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: confirmButtonRef,\n            variant: \"primary\",\n            onClick: handleEvent(onConfirm),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            isBusy: isBusy,\n            children: confirmLabel\n          })]\n        })]\n      })\n    })\n  });\n};\n\n/**\n * `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)\n * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.\n * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.\n * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by\n * clicking outside the dialog focus (i.e, the overlay).\n *\n * `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.\n *\n * UnControlled:\n *\n * Allows the component to be used standalone, just by declaring it as part of another React's component render method:\n * -   It will be automatically open (displayed) upon mounting;\n * -   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);\n * -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.\n *\n * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:\n *\n * ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n *\n * function Example() {\n * \treturn (\n * \t\t<ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n *\n *\n * Controlled mode:\n *  Let the parent component control when the dialog is open/closed. It's activated when a\n * boolean value is passed to `isOpen`:\n * -   It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;\n * -   Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;\n * -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.\n *\n *```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function Example() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tconst handleConfirm = () => {\n * \t\tconsole.debug( 'Confirmed!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \tconst handleCancel = () => {\n * \t\tconsole.debug( 'Cancelled!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \treturn (\n * \t\t<ConfirmDialog\n * \t\t\tisOpen={ isOpen }\n * \t\t\tonConfirm={ handleConfirm }\n * \t\t\tonCancel={ handleCancel }\n * \t\t>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n */\nexport const ConfirmDialog = contextConnect(UnconnectedConfirmDialog, 'ConfirmDialog');\nexport default ConfirmDialog;"],
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,qBAAyD;AAKzD,mBAAkB;AAClB,qBAAiD;AACjD,kBAAqB;AACrB,oBAAmB;AACnB,kBAAqB;AACrB,qBAAuB;AACvB,aAAwB;AACxB,oBAAsB;AACtB,yBAAkE;AAClE,IAAM,2BAA2B,CAAC,OAAO,iBAAiB;AACxD,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,eAAe;AAC3C,QAAM,SAAK,qBAAM;AACjB,QAAM,mBAAmB,GAAU,cAAO;AAC1C,QAAM,sBAAkB,uBAAO,IAAI;AACnC,QAAM,uBAAmB,uBAAO,IAAI;AACpC,QAAM,CAAC,QAAQ,SAAS,QAAI,yBAAS;AACrC,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,yBAAS;AACvD,gCAAU,MAAM;AAKd,UAAM,cAAc,OAAO,eAAe;AAC1C,cAAU,cAAc,aAAa,IAAI;AACzC,uBAAmB,CAAC,WAAW;AAAA,EACjC,GAAG,CAAC,UAAU,CAAC;AACf,QAAM,kBAAc,4BAAY,cAAY,WAAS;AACnD,eAAW,KAAK;AAChB,QAAI,iBAAiB;AACnB,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,iBAAiB,SAAS,CAAC;AAC/B,QAAM,kBAAc,4BAAY,WAAS;AAGvC,UAAM,0BAA0B,MAAM,WAAW,gBAAgB,WAAW,MAAM,WAAW,iBAAiB;AAC9G,QAAI,CAAC,2BAA2B,MAAM,QAAQ,SAAS;AACrD,kBAAY,SAAS,EAAE,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,CAAC;AAC3B,QAAM,cAAc,wBAAoB,gBAAG,QAAQ;AACnD,QAAM,eAAe,yBAAqB,gBAAG,IAAI;AACjD,SAAoB,uCAAAA,KAAK,mBAAAC,UAAW;AAAA,IAClC,UAAU,UAAuB,uCAAAD,KAAK,aAAAE,SAAO;AAAA,MAC3C,gBAAgB,YAAY,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB,eAAe;AAAA,MACf,KAAK;AAAA,MACL,kBAAkB;AAAA,MAClB,0BAA0B;AAAA,MAC1B,GAAG;AAAA,MACH,UAAuB,uCAAAC,MAAM,uBAAQ;AAAA,QACnC,SAAS;AAAA,QACT,UAAU,CAAc,uCAAAH,KAAK,kBAAM;AAAA,UACjC;AAAA,QACF,CAAC,GAAgB,uCAAAG,MAAM,kBAAM;AAAA,UAC3B,WAAW;AAAA,UACX,SAAS;AAAA,UACT,UAAU,CAAc,uCAAAH,KAAK,cAAAI,SAAQ;AAAA,YACnC,uBAAuB;AAAA,YACvB,KAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS,YAAY,QAAQ;AAAA,YAC7B,wBAAwB;AAAA,YACxB,UAAU;AAAA,YACV,UAAU;AAAA,UACZ,CAAC,GAAgB,uCAAAJ,KAAK,cAAAI,SAAQ;AAAA,YAC5B,uBAAuB;AAAA,YACvB,KAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS,YAAY,SAAS;AAAA,YAC9B,wBAAwB;AAAA,YACxB,UAAU;AAAA,YACV;AAAA,YACA,UAAU;AAAA,UACZ,CAAC,CAAC;AAAA,QACJ,CAAC,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAqEO,IAAM,oBAAgB,+BAAe,0BAA0B,eAAe;AACrF,IAAO,oBAAQ;",
  "names": ["_jsx", "_Fragment", "Modal", "_jsxs", "Button"]
}