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> |