Popover

() => {
  const [placement, setPlacement] = React.useState(
    { value: 'rightCenter', title: 'rightCenter' }
  )
  return (
    <Split gap="medium" justifyContent="space-between">
      <SplitSection>
        <Popover
          isOpen
          placement={placement.value}
          content={(
            <DemoBox padding="xsmall">
              Popover
            </DemoBox>
          )}
        >
          <DemoBox padding="large">Trigger</DemoBox>
        </Popover>
      </SplitSection>
      <SplitSection basis={20}>
        <Select
          selectedOptionValue="rightCenter"
          onChange={option => setPlacement(option)}
          options={[
            { value: 'topLeft', title: 'topLeft' },
            { value: 'topCenter', title: 'topCenter' },
            { value: 'topRight', title: 'topRight' },
            { value: 'bottomLeft', title: 'bottomLeft' },
            { value: 'bottomCenter', title: 'bottomCenter' },
            { value: 'bottomRight', title: 'bottomRight' },
            { value: 'leftTop', title: 'leftTop' },
            { value: 'leftCenter', title: 'leftCenter' },
            { value: 'leftBottom', title: 'leftBottom' },
            { value: 'rightTop', title: 'rightTop' },
            { value: 'rightCenter', title: 'rightCenter' },
            { value: 'rightBottom', title: 'rightBottom' },
          ]}
        />
      </SplitSection>
    </Split>
  )
}

<Popover
  isOpen
  offset={2}
  placement="rightCenter"
  content={(
    <DemoBox padding="xsmall">
      Popover
    </DemoBox>
  )}
>
  <DemoBox padding="large">Trigger</DemoBox>
</Popover>

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  const ref = React.useRef();
  useOnClickOutside(ref, () => setIsOpen(false));
  return (
    <Container width="fit-content">
      <div ref={ref}>
        <Popover
          isOpen={isOpen}
          placement="bottomCenter"
          content={(<DemoBox padding="xsmall">Popover</DemoBox>)}
        >
          <Button onClick={() => setIsOpen(!isOpen)}>Open Popover</Button>
        </Popover>
      </div>
    </Container>
  )
}

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  return (
    <Container width="fit-content">
      <div
        onMouseEnter={() => setIsOpen(true)}
        onMouseLeave={() => setIsOpen(false)}
      >
        <Popover
          isOpen={isOpen}
          placement="bottomCenter"
          content={(<DemoBox padding="xsmall">Popover</DemoBox>)}
        >
          Hover me
        </Popover>
      </div>
    </Container>
  )
}

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  const ref = React.useRef();
  useOnClickOutside(ref, () => setIsOpen(false));
  return (
    <Container width="fit-content">
      <div ref={ref}>
        <Popover
          isOpen={isOpen}
          placement="bottomCenter"
          content={(<DemoBox padding="xsmall">Popover</DemoBox>)}
          transitionDuration={200}
          transitionDelay={70}
        >
          <Button onClick={() => setIsOpen(!isOpen)}>Open Popover</Button>
        </Popover>
      </div>
    </Container>
  )
}

<div>
  <div id="popovers-root">Inspect me, the Popover will render here</div>
  <br />
  <Popover
    rootId="popovers-root"
    isOpen
    placement="rightCenter"
    content={(
      <DemoBox padding="xsmall">
        Popover
      </DemoBox>
    )}
  >
    <DemoBox padding="large">Trigger</DemoBox>
  </Popover>
</div>

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  const [boundaryElement, setBoundaryElement] = React.useState(false)
  const boundaryRef = React.useRef()
  React.useEffect(() => {
    setBoundaryElement(boundaryRef)
  }, [])
  return (
    <>
      <div ref={boundaryRef}
        style={{
          border: '1px solid var(--lns-color-border)', 
          maxWidth: 400, height: 120
        }}
      >
        <Popover
          isOpen
          placement="bottomCenter"
          boundaryElement={boundaryRef.current}
          content={(
            <DemoBox padding="small" width="max-content">Popover with boundary</DemoBox>
          )}
        >
          <DemoBox padding="xsmall">Trigger</DemoBox>
        </Popover>
      </div>
      <div
        style={{
          border: '1px solid var(--lns-color-border)', 
          maxWidth: 400, height: 120
        }}
      >
        <Container width='max-content'>
          <Popover
            isOpen
            placement="bottomCenter"
            content={(
              <DemoBox padding="small" width="max-content">Popover without boundary</DemoBox>
            )}
          >
            <DemoBox padding="xsmall">Trigger</DemoBox>
          </Popover>
        </Container>
      </div>
    </>
  )
}

() => {
  const [isOpen, setIsOpen] = React.useState(false)
  const ref = React.useRef();
  useOnClickOutside(ref, () => setIsOpen(false));
  return (
    <Container width="fit-content">
      <div ref={ref}>
        <Popover
          isOpen={isOpen}
          placement="bottomCenter"
          content={(
            <Container
              contentColor="body"
              backgroundColor="overlay"
              borderSide="all"
              radius="medium"
              shadow="medium"
              padding="medium"
              width={38}
            >
              <Arrange gap="small" >
                {demoText.short}
                <Button onClick={() => setIsOpen(false)}>Close</Button>
              </Arrange>
            </Container>
          )}
        >
          <Button onClick={() => setIsOpen(!isOpen)}>Open Popover</Button>
        </Popover>
      </div>
    </Container>
  )
}