Overflow

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { useIsOverflowItemVisible } from "@coreai-ds/react-components";
import { MenuItem } from "@coreai-ds/react-components";
import { useOverflowMenu } from "@coreai-ds/react-components";
import { Menu } from "@coreai-ds/react-components";
import { MenuTrigger } from "@coreai-ds/react-components";
import { MenuButton } from "@coreai-ds/react-components";
import { MenuPopover } from "@coreai-ds/react-components";
import { MenuList } from "@coreai-ds/react-components";
import { Overflow } from "@coreai-ds/react-components";
import { OverflowItem } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";

export const Default = () => {
    const itemIds = new Array(8).fill(0).map((_, index) => index.toString());
    const OverflowMenuItem = ({ id }: {
        id: string;
    }) => {
        const isVisible = useIsOverflowItemVisible(id);
        if (isVisible) {
            return null;
        }
        return <MenuItem>Item {id}</MenuItem>;
    };
    const OverflowMenu = ({ ids }: {
        ids: string[];
    }) => {
        const { ref, overflowCount, isOverflowing } = useOverflowMenu<HTMLButtonElement>();
        if (!isOverflowing) {
            return null;
        }
        return (<Menu>
          <MenuTrigger disableButtonEnhancement>
            <MenuButton ref={ref}>+{overflowCount} items</MenuButton>
          </MenuTrigger>

          <MenuPopover>
            <MenuList>
              {ids.map((id) => (<OverflowMenuItem key={id} id={id}/>))}
            </MenuList>
          </MenuPopover>
        </Menu>);
    };
    const styles = /* css */ `
      .overflow-default-example {
        display: flex;
        flex-wrap: nowrap;
        min-width: 200px;
        max-width: 800px;
        overflow: hidden;
        border: 2px solid var(--colorBrandBackground);
        padding: var(--spacingVerticalXXL) 10px 10px;
        position: relative;
        resize: horizontal;
      }

      .overflow-default-example::after {
        content: 'Resizable Area';
        position: absolute;
        padding: 1px var(--spacingHorizontalXS) 1px;
        top: -2px;
        left: -2px;
        font-family: monospace;
        font-size: 15px;
        font-weight: 900;
        line-height: 1;
        letter-spacing: 1px;
        color: var(--colorNeutralForegroundOnBrand);
        background-color: var(--colorBrandBackground);
      }
    `;
    return (<>
        <style>{styles}</style>
        <Overflow>
          <div className="overflow-default-example">
            {itemIds.map((id) => (<OverflowItem key={id} id={id}>
                <Button>Item {id}</Button>
              </OverflowItem>))}
            <OverflowMenu ids={itemIds}/>
          </div>
        </Overflow>
      </>);
};

export default Default;