ConfirmPopup API
API documentation for ConfirmPopup component
Props#
Defines valid properties in ConfirmPopup component.
| name | type | default | description |
|---|
| ref | Ref<unknown> | null | The reference to the component instance. |
| pIf | boolean | true | Whether the component should be rendered. |
| style | CSSProperties | ((instance?: ConfirmPopupInstance) => CSSProperties) | null | The style to apply to the component. |
| className | string | ((instance?: ConfirmPopupInstance) => string) | null | The class name to apply to the component. |
| as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
| asChild | boolean | false | Whether the component should be rendered as a child component. |
| pt | SafeRecord<ConfirmPopupPassThrough> | null | The pass-through props to pass to the component |
| ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
| unstyled | boolean | null | Whether the component should be rendered without classes. |
| dt | unknown | null | The design token to use for the component. |
| styles | StylesOptions<ComponentInstance> | null | The styles to use for the component. |
| children | ReactNode | ((instance: ConfirmPopupInstance) => ReactNode) | null | The children to render. |
| open | boolean | false | Specifies the visibility of the confirmpopup. |
| defaultOpen | boolean | false | Specifies the default visibility of the confirmpopup. |
| defaultFocus | "accept" | "reject" | undefined | Element to receive the focus when the confirmpopup gets visible, valid values are "accept" and "reject". |
| onOpenChange | (event: useConfirmPopupChangeEvent) => void | null | Callback function that is called when the trigger is clicked. |
| [key: string] | any | null | |
| pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |
State#
Defines valid state in ConfirmPopup component.
| name | type | default | description |
|---|
| opened | boolean | null | Whether the confirmpopup is currently opened. |
Exposes#
Defines the methods and properties exposed by ConfirmPopup component.
| name | type | default | description |
|---|
| state | useConfirmPopupState | null | Current state of the confirmpopup. |
| motionRef | RefObject<{ elementRef: RefObject<HTMLDivElement> }> | null | Reference to the motion element. |
| triggerRef | RefObject<{ elementRef: RefObject<HTMLButtonElement> }> | null | Reference to the trigger element. |
| rejectRef | RefObject<{ elementRef: RefObject<HTMLButtonElement> }> | null | Reference to the reject element. |
| acceptRef | RefObject<{ elementRef: RefObject<HTMLButtonElement> }> | null | Reference to the accept element. |
| onOpenStateChange | () => void | null | Method to change the open state of the confirmpopup. |
| close | () => void | null | Method to close the confirmpopup. |
| onMotionEnter | () => void | null | Handler for motion enter events. |
| onMotionAfterEnter | () => void | null | Handler for motion after enter events. |
| onMotionAfterLeave | () => void | null | Handler for motion after leave events. |
Interfaces#
PassThroughOptions
Defines passthrough(pt) options of ConfirmPopup component.
| name | type | default | description |
|---|
| root | ConfirmPopupPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the root's DOM element. |
| trigger | ConfirmPopupPassThroughType<HTMLAttributes<HTMLButtonElement>> | null | Used to pass attributes to the trigger's DOM element. |
| portal | ConfirmPopupPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the portal's DOM element. |
| content | ConfirmPopupPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the content's DOM element. |
| icon | ConfirmPopupPassThroughType<HTMLAttributes<HTMLSpanElement>> | null | Used to pass attributes to the icon's DOM element. |
| message | ConfirmPopupPassThroughType<HTMLAttributes<HTMLSpanElement>> | null | Used to pass attributes to the message's DOM element. |
| footer | ConfirmPopupPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the footer's DOM element. |
| reject | ConfirmPopupPassThroughType<HTMLAttributes<HTMLButtonElement>> | null | Used to pass attributes to the reject's DOM element. |
| accept | ConfirmPopupPassThroughType<HTMLAttributes<HTMLButtonElement>> | null | Used to pass attributes to the accept's DOM element. |
Types#
Instance
Instance of ConfirmPopup component.
| values |
|---|
| ComponentInstance<ConfirmPopupProps, ConfirmPopupState, ConfirmPopupExposes> |
Props#
Defines valid properties in ConfirmPopupTrigger component.
| name | type | default | description |
|---|
| ref | Ref<unknown> | null | The reference to the component instance. |
| pIf | boolean | true | Whether the component should be rendered. |
| style | CSSProperties | ((instance?: ConfirmPopupTriggerInstance) => CSSProperties) | null | The style to apply to the component. |
| className | string | ((instance?: ConfirmPopupTriggerInstance) => string) | null | The class name to apply to the component. |
| as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
| asChild | boolean | false | Whether the component should be rendered as a child component. |
| pt | SafeRecord<ConfirmPopupTriggerPassThrough> | null | The pass-through props to pass to the component |
| ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
| unstyled | boolean | null | Whether the component should be rendered without classes. |
| dt | unknown | null | The design token to use for the component. |
| styles | StylesOptions<ComponentInstance> | null | The styles to use for the component. |
| children | ReactNode | ((instance: ConfirmPopupTriggerInstance) => ReactNode) | null | The children to render. |
| [key: string] | any | null | |
| pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |
Exposes#
Defines the methods and properties exposed by ConfirmPopupTrigger component.
| name | type | default | description |
|---|
| confirmpopup | ConfirmPopupInstance | null | Instance of the ConfirmPopup component. |
Interfaces#
PassThroughOptions
Defines passthrough(pt) options of ConfirmPopupTrigger component.
| name | type | default | description |
|---|
| root | ConfirmPopupTriggerPassThroughType<HTMLAttributes<HTMLButtonElement>> | null | Used to pass attributes to the root's DOM element. |
Types#
Instance
Instance of ConfirmPopupTrigger component.
| values |
|---|
| ComponentInstance<ConfirmPopupTriggerProps, ConfirmPopupTriggerState, ConfirmPopupTriggerExposes> |
Props#
Defines valid properties in ConfirmPopupPortal component.
| name | type | default | description |
|---|
| ref | Ref<unknown> | null | The reference to the component instance. |
| pIf | boolean | true | Whether the component should be rendered. |
| style | CSSProperties | ((instance?: ConfirmPopupPortalInstance) => CSSProperties) | null | The style to apply to the component. |
| className | string | ((instance?: ConfirmPopupPortalInstance) => string) | null | The class name to apply to the component. |
| as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
| asChild | boolean | false | Whether the component should be rendered as a child component. |
| pt | SafeRecord<ConfirmPopupPortalPassThrough> | null | The pass-through props to pass to the component |
| ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
| unstyled | boolean | null | Whether the component should be rendered without classes. |
| dt | unknown | null | The design token to use for the component. |
| styles | StylesOptions<ComponentInstance> | null | The styles to use for the component. |
| children | ReactNode | ((instance: ConfirmPopupPortalInstance) => ReactNode) | null | The children to render. |
| [key: string] | any | null | |
| pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |
Exposes#
Defines the methods and properties exposed by ConfirmPopupPortal component.
| name | type | default | description |
|---|
| confirmpopup | ConfirmPopupInstance | null | Instance of the ConfirmPopup component. |
Interfaces#
PassThroughOptions
Defines passthrough(pt) options of ConfirmPopupPortal component.
| name | type | default | description |
|---|
| root | ConfirmPopupPortalPassThroughType<HTMLAttributes<HTMLButtonElement>> | null | Used to pass attributes to the root's DOM element. |
Types#
Instance
Instance of ConfirmPopupPortal component.
| values |
|---|
| ComponentInstance<ConfirmPopupPortalProps, ConfirmPopupPortalState, ConfirmPopupPortalExposes> |
Props#
Defines valid properties in ConfirmPopupContent component.
| name | type | default | description |
|---|
| ref | Ref<unknown> | null | The reference to the component instance. |
| pIf | boolean | true | Whether the component should be rendered. |
| style | CSSProperties | ((instance?: ConfirmPopupContentInstance) => CSSProperties) | null | The style to apply to the component. |
| className | string | ((instance?: ConfirmPopupContentInstance) => string) | null | The class name to apply to the component. |
| as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
| asChild | boolean | false | Whether the component should be rendered as a child component. |
| pt | SafeRecord<ConfirmPopupContentPassThrough> | null | The pass-through props to pass to the component |
| ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
| unstyled | boolean | null | Whether the component should be rendered without classes. |
| dt | unknown | null | The design token to use for the component. |
| styles | StylesOptions<ComponentInstance> | null | The styles to use for the component. |
| children | ReactNode | ((instance: ConfirmPopupContentInstance) => ReactNode) | null | The children to render. |
| [key: string] | any | null | |
| pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |
Exposes#
Defines the methods and properties exposed by ConfirmPopupContent component.
| name | type | default | description |
|---|
| confirmpopup | ConfirmPopupInstance | null | Instance of the ConfirmPopup component. |
Interfaces#
PassThroughOptions
Defines passthrough(pt) options of ConfirmPopupContent component.
| name | type | default | description |
|---|
| root | ConfirmPopupContentPassThroughType<HTMLAttributes<HTMLButtonElement>> | null | Used to pass attributes to the root's DOM element. |
Types#
Instance
Instance of ConfirmPopupContent component.
| values |
|---|
| ComponentInstance<ConfirmPopupContentProps, ConfirmPopupContentState, ConfirmPopupContentExposes> |
Props#
Defines valid properties in ConfirmPopupIcon component.
| name | type | default | description |
|---|
| ref | Ref<unknown> | null | The reference to the component instance. |
| pIf | boolean | true | Whether the component should be rendered. |
| style | CSSProperties | ((instance?: ConfirmPopupIconInstance) => CSSProperties) | null | The style to apply to the component. |
| className | string | ((instance?: ConfirmPopupIconInstance) => string) | null | The class name to apply to the component. |
| as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
| asChild | boolean | false | Whether the component should be rendered as a child component. |
| pt | SafeRecord<ConfirmPopupIconPassThrough> | null | The pass-through props to pass to the component |
| ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
| unstyled | boolean | null | Whether the component should be rendered without classes. |
| dt | unknown | null | The design token to use for the component. |
| styles | StylesOptions<ComponentInstance> | null | The styles to use for the component. |
| children | ReactNode | ((instance: ConfirmPopupIconInstance) => ReactNode) | null | The children to render. |
| [key: string] | any | null | |
| pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |
Exposes#
Defines the methods and properties exposed by ConfirmPopupIcon component.
| name | type | default | description |
|---|
| confirmpopup | ConfirmPopupInstance | null | Instance of the ConfirmPopup component. |
Interfaces#
PassThroughOptions
Defines passthrough(pt) options of ConfirmPopupIcon component.
| name | type | default | description |
|---|
| root | ConfirmPopupIconPassThroughType<HTMLAttributes<HTMLButtonElement>> | null | Used to pass attributes to the root's DOM element. |
Types#
Instance
Instance of ConfirmPopupIcon component.
| values |
|---|
| ComponentInstance<ConfirmPopupIconProps, ConfirmPopupIconState, ConfirmPopupIconExposes> |
Props#
Defines valid properties in ConfirmPopupMessage component.
| name | type | default | description |
|---|
| ref | Ref<unknown> | null | The reference to the component instance. |
| pIf | boolean | true | Whether the component should be rendered. |
| style | CSSProperties | ((instance?: ConfirmPopupMessageInstance) => CSSProperties) | null | The style to apply to the component. |
| className | string | ((instance?: ConfirmPopupMessageInstance) => string) | null | The class name to apply to the component. |
| as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
| asChild | boolean | false | Whether the component should be rendered as a child component. |
| pt | SafeRecord<ConfirmPopupMessagePassThrough> | null | The pass-through props to pass to the component |
| ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
| unstyled | boolean | null | Whether the component should be rendered without classes. |
| dt | unknown | null | The design token to use for the component. |
| styles | StylesOptions<ComponentInstance> | null | The styles to use for the component. |
| children | ReactNode | ((instance: ConfirmPopupMessageInstance) => ReactNode) | null | The children to render. |
| [key: string] | any | null | |
| pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |
Exposes#
Defines the methods and properties exposed by ConfirmPopupMessage component.
| name | type | default | description |
|---|
| confirmpopup | ConfirmPopupInstance | null | Instance of the ConfirmPopup component. |
Interfaces#
PassThroughOptions
Defines passthrough(pt) options of ConfirmPopupMessage component.
| name | type | default | description |
|---|
| root | ConfirmPopupMessagePassThroughType<HTMLAttributes<HTMLButtonElement>> | null | Used to pass attributes to the root's DOM element. |
Types#
Instance
Instance of ConfirmPopupMessage component.
| values |
|---|
| ComponentInstance<ConfirmPopupMessageProps, ConfirmPopupMessageState, ConfirmPopupMessageExposes> |
Props#
Defines valid properties in ConfirmPopupFooter component.
| name | type | default | description |
|---|
| ref | Ref<unknown> | null | The reference to the component instance. |
| pIf | boolean | true | Whether the component should be rendered. |
| style | CSSProperties | ((instance?: ConfirmPopupFooterInstance) => CSSProperties) | null | The style to apply to the component. |
| className | string | ((instance?: ConfirmPopupFooterInstance) => string) | null | The class name to apply to the component. |
| as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
| asChild | boolean | false | Whether the component should be rendered as a child component. |
| pt | SafeRecord<ConfirmPopupFooterPassThrough> | null | The pass-through props to pass to the component |
| ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
| unstyled | boolean | null | Whether the component should be rendered without classes. |
| dt | unknown | null | The design token to use for the component. |
| styles | StylesOptions<ComponentInstance> | null | The styles to use for the component. |
| children | ReactNode | ((instance: ConfirmPopupFooterInstance) => ReactNode) | null | The children to render. |
| [key: string] | any | null | |
| pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |
Exposes#
Defines the methods and properties exposed by ConfirmPopupFooter component.
| name | type | default | description |
|---|
| confirmpopup | ConfirmPopupInstance | null | Instance of the ConfirmPopup component. |
Interfaces#
PassThroughOptions
Defines passthrough(pt) options of ConfirmPopupFooter component.
| name | type | default | description |
|---|
| root | ConfirmPopupFooterPassThroughType<HTMLAttributes<HTMLButtonElement>> | null | Used to pass attributes to the root's DOM element. |
Types#
Instance
Instance of ConfirmPopupFooter component.
| values |
|---|
| ComponentInstance<ConfirmPopupFooterProps, ConfirmPopupFooterState, ConfirmPopupFooterExposes> |
Props#
Defines valid properties in ConfirmPopupReject component.
| name | type | default | description |
|---|
| ref | Ref<unknown> | null | The reference to the component instance. |
| pIf | boolean | true | Whether the component should be rendered. |
| style | CSSProperties | ((instance?: ConfirmPopupRejectInstance) => CSSProperties) | null | The style to apply to the component. |
| className | string | ((instance?: ConfirmPopupRejectInstance) => string) | null | The class name to apply to the component. |
| as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
| asChild | boolean | false | Whether the component should be rendered as a child component. |
| pt | SafeRecord<ConfirmPopupRejectPassThrough> | null | The pass-through props to pass to the component |
| ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
| unstyled | boolean | null | Whether the component should be rendered without classes. |
| dt | unknown | null | The design token to use for the component. |
| styles | StylesOptions<ComponentInstance> | null | The styles to use for the component. |
| children | ReactNode | ((instance: ConfirmPopupRejectInstance) => ReactNode) | null | The children to render. |
| size | "small" | "large" | "normal" | small | The size of the reject button |
| variant | "link" | "text" | "outlined" | text | the variant of the reject button |
| [key: string] | any | null | |
| pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |
Exposes#
Defines the methods and properties exposed by ConfirmPopupReject component.
| name | type | default | description |
|---|
| confirmpopup | ConfirmPopupInstance | null | Instance of the ConfirmPopup component. |
Interfaces#
PassThroughOptions
Defines passthrough(pt) options of ConfirmPopupReject component.
| name | type | default | description |
|---|
| root | ConfirmPopupRejectPassThroughType<HTMLAttributes<HTMLButtonElement>> | null | Used to pass attributes to the root's DOM element. |
Types#
Instance
Instance of ConfirmPopupReject component.
| values |
|---|
| ComponentInstance<ConfirmPopupRejectProps, ConfirmPopupRejectState, ConfirmPopupRejectExposes> |
Props#
Defines valid properties in ConfirmPopupAccept component.
| name | type | default | description |
|---|
| ref | Ref<unknown> | null | The reference to the component instance. |
| pIf | boolean | true | Whether the component should be rendered. |
| style | CSSProperties | ((instance?: ConfirmPopupAcceptInstance) => CSSProperties) | null | The style to apply to the component. |
| className | string | ((instance?: ConfirmPopupAcceptInstance) => string) | null | The class name to apply to the component. |
| as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
| asChild | boolean | false | Whether the component should be rendered as a child component. |
| pt | SafeRecord<ConfirmPopupAcceptPassThrough> | null | The pass-through props to pass to the component |
| ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
| unstyled | boolean | null | Whether the component should be rendered without classes. |
| dt | unknown | null | The design token to use for the component. |
| styles | StylesOptions<ComponentInstance> | null | The styles to use for the component. |
| children | ReactNode | ((instance: ConfirmPopupAcceptInstance) => ReactNode) | null | The children to render. |
| size | "small" | "large" | "normal" | small | The size of the accept button |
| [key: string] | any | null | |
| pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |
Exposes#
Defines the methods and properties exposed by ConfirmPopupAccept component.
| name | type | default | description |
|---|
| confirmpopup | ConfirmPopupInstance | null | Instance of the ConfirmPopup component. |
Interfaces#
PassThroughOptions
Defines passthrough(pt) options of ConfirmPopupAccept component.
| name | type | default | description |
|---|
| root | ConfirmPopupAcceptPassThroughType<HTMLAttributes<HTMLButtonElement>> | null | Used to pass attributes to the root's DOM element. |
Types#
Instance
Instance of ConfirmPopupAccept component.
| values |
|---|
| ComponentInstance<ConfirmPopupAcceptProps, ConfirmPopupAcceptState, ConfirmPopupAcceptExposes> |
Props#
Defines valid properties in useConfirmPopup.
| name | type | default | description |
|---|
| open | boolean | false | Specifies the visibility of the confirmpopup. |
| defaultOpen | boolean | false | Specifies the default visibility of the confirmpopup. |
| defaultFocus | "accept" | "reject" | undefined | Element to receive the focus when the confirmpopup gets visible, valid values are "accept" and "reject". |
| onOpenChange | (event: useConfirmPopupChangeEvent) => void | null | Callback function that is called when the trigger is clicked. |
State#
Defines valid state in useConfirmPopup.
| name | type | default | description |
|---|
| opened | boolean | null | Whether the confirmpopup is currently opened. |
Exposes#
Defines the methods and properties exposed by useConfirmPopup.
| name | type | default | description |
|---|
| state | useConfirmPopupState | null | Current state of the confirmpopup. |
| motionRef | RefObject<{ elementRef: RefObject<HTMLDivElement> }> | null | Reference to the motion element. |
| triggerRef | RefObject<{ elementRef: RefObject<HTMLButtonElement> }> | null | Reference to the trigger element. |
| rejectRef | RefObject<{ elementRef: RefObject<HTMLButtonElement> }> | null | Reference to the reject element. |
| acceptRef | RefObject<{ elementRef: RefObject<HTMLButtonElement> }> | null | Reference to the accept element. |
| onOpenStateChange | () => void | null | Method to change the open state of the confirmpopup. |
| close | () => void | null | Method to close the confirmpopup. |
| onMotionEnter | () => void | null | Handler for motion enter events. |
| onMotionAfterEnter | () => void | null | Handler for motion after enter events. |
| onMotionAfterLeave | () => void | null | Handler for motion after leave events. |
Events#
Event fired when the confirmpopup's open state changes.
| name | type | description |
|---|
| value | boolean | The value of the confirmpopup. |
Types#
Instance
Instance of useConfirmPopup headless.
| values |
|---|
| HeadlessInstance<useConfirmPopupProps, useConfirmPopupState, useConfirmPopupExposes> |