text: function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  
  import React, { useRef, useState } from 'react';
  import { theme, ThemeProvider } from '..';
  import BaseStyles from '../BaseStyles';
  import { DropdownButton } from '../DropdownMenu';
  import { SelectPanel } from '../SelectPanel';
  import Box from '../Box';
  const meta = {
    title: 'Composite components/SelectPanel',
    component: SelectPanel,
    decorators: [Story => {
      return /*#__PURE__*/React.createElement(ThemeProvider, {
        theme: theme
      }, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
    }],
    parameters: {
      controls: {
        disable: true
      }
    }
  };
  export default meta;
  
  function getColorCircle(color) {
    return function () {
      return /*#__PURE__*/React.createElement(Box, {
        bg: color,
        borderColor: color,
        width: 14,
        height: 14,
        borderRadius: 10,
        margin: "auto",
        borderWidth: "1px",
        borderStyle: "solid"
      });
    };
  }
  
  const items = [{
    leadingVisual: getColorCircle('#a2eeef'),
    text: 'enhancement',
    id: 1
  }, {
    leadingVisual: getColorCircle('#d73a4a'),
    text: 'bug',
    id: 2
  }, {
    leadingVisual: getColorCircle('#0cf478'),
    text: 'good first issue',
    id: 3
  }, {
    leadingVisual: getColorCircle('#ffd78e'),
    text: 'design',
    id: 4
  }, {
    leadingVisual: getColorCircle('#ff0000'),
    text: 'blocker',
    id: 5
  }, {
    leadingVisual: getColorCircle('#a4f287'),
    text: 'backend',
    id: 6
  }, {
    leadingVisual: getColorCircle('#8dc6fc'),
    text: 'frontend',
    id: 7
  }];
  export function MultiSelectStory() {
    const [selected, setSelected] = React.useState([items[0], items[1]]);
    const [filter, setFilter] = React.useState('');
    const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
    const [open, setOpen] = useState(false);
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Multi Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select labels that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
      renderAnchor: ({
        children,
        'aria-labelledby': ariaLabelledBy,
        ...anchorProps
      }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
        "aria-labelledby": ` ${ariaLabelledBy}`
      }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
      placeholderText: "Filter Labels",
      open: open,
      onOpenChange: setOpen,
      items: filteredItems,
      selected: selected,
      onSelectedChange: setSelected,
      onFilterChange: setFilter,
      showItemDividers: true,
      overlayProps: {
        width: 'small',
        height: 'xsmall'
      }
    }));
  }
  MultiSelectStory.storyName = 'Multi Select';
  export function SingleSelectStory() {
    const [selected, setSelected] = React.useState(items[0]);
    const [filter, setFilter] = React.useState('');
    const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
    const [open, setOpen] = useState(false);
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
      renderAnchor: ({
        children,
        'aria-labelledby': ariaLabelledBy,
        ...anchorProps
      }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
        "aria-labelledby": ` ${ariaLabelledBy}`
      }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
      placeholderText: "Filter Labels",
      open: open,
      onOpenChange: setOpen,
      items: filteredItems,
      selected: selected,
      onSelectedChange: setSelected,
      onFilterChange: setFilter,
      showItemDividers: true,
      overlayProps: {
        width: 'small',
        height: 'xsmall'
      }
    }));
  }
  SingleSelectStory.storyName = 'Single Select';
  export function ExternalAnchorStory() {
    const [selected, setSelected] = React.useState(items[0]);
    const [filter, setFilter] = React.useState('');
    const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
    const [open, setOpen] = useState(false);
    const buttonRef = useRef(null);
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Select Panel With External Anchor"), /*#__PURE__*/React.createElement(DropdownButton, {
      ref: buttonRef,
      onClick: () => setOpen(!open)
    }, "Custom: ", (selected === null || selected === void 0 ? void 0 : selected.text) || 'Click Me'), /*#__PURE__*/React.createElement(SelectPanel, {
      renderAnchor: null,
      anchorRef: buttonRef,
      placeholderText: "Filter Labels",
      open: open,
      onOpenChange: setOpen,
      items: filteredItems,
      selected: selected,
      onSelectedChange: setSelected,
      onFilterChange: setFilter,
      showItemDividers: true,
      overlayProps: {
        width: 'small',
        height: 'xsmall'
      }
    }));
  }
  ExternalAnchorStory.storyName = 'With External Anchor';
  export function SelectPanelHeightInitialWithOverflowingItemsStory() {
    const [selected, setSelected] = React.useState(items[0]);
    const [filter, setFilter] = React.useState('');
    const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
    const [open, setOpen] = useState(false);
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
      renderAnchor: ({
        children,
        'aria-labelledby': ariaLabelledBy,
        ...anchorProps
      }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
        "aria-labelledby": ` ${ariaLabelledBy}`
      }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
      placeholderText: "Filter Labels",
      open: open,
      onOpenChange: setOpen,
      items: filteredItems,
      selected: selected,
      onSelectedChange: setSelected,
      onFilterChange: setFilter,
      showItemDividers: true,
      overlayProps: {
        width: 'small',
        height: 'initial',
        maxHeight: 'xsmall'
      }
    }));
  }
  SelectPanelHeightInitialWithOverflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Overflowing Items';
  export function SelectPanelHeightInitialWithUnderflowingItemsStory() {
    const underflowingItems = [items[0], items[1]];
    const [selected, setSelected] = React.useState(underflowingItems[0]);
    const [filter, setFilter] = React.useState('');
    const filteredItems = underflowingItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
    const [open, setOpen] = useState(false);
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
      renderAnchor: ({
        children,
        'aria-labelledby': ariaLabelledBy,
        ...anchorProps
      }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
        "aria-labelledby": ` ${ariaLabelledBy}`
      }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
      placeholderText: "Filter Labels",
      open: open,
      onOpenChange: setOpen,
      items: filteredItems,
      selected: selected,
      onSelectedChange: setSelected,
      onFilterChange: setFilter,
      showItemDividers: true,
      overlayProps: {
        width: 'small',
        height: 'initial',
        maxHeight: 'xsmall'
      }
    }));
  }
  SelectPanelHeightInitialWithUnderflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Underflowing Items';
  export function SelectPanelHeightInitialWithUnderflowingItemsAfterFetch() {
    const [selected, setSelected] = React.useState(items[0]);
    const [filter, setFilter] = React.useState('');
    const [fetchedItems, setFetchedItems] = useState([]);
    const filteredItems = React.useMemo(() => fetchedItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())), [fetchedItems, filter]);
    const [open, setOpen] = useState(false);
    const [height, setHeight] = useState('auto');
  
    const onOpenChange = () => {
      setOpen(!open);
      setTimeout(() => {
        setFetchedItems([items[0], items[1]]);
        setHeight('initial');
      }, 1500);
    };
  
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
      renderAnchor: ({
        children,
        'aria-labelledby': ariaLabelledBy,
        ...anchorProps
      }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
        "aria-labelledby": ` ${ariaLabelledBy}`
      }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
      placeholderText: "Filter Labels",
      open: open,
      onOpenChange: onOpenChange,
      loading: filteredItems.length === 0,
      items: filteredItems,
      selected: selected,
      onSelectedChange: setSelected,
      onFilterChange: setFilter,
      showItemDividers: true,
      overlayProps: {
        width: 'small',
        height,
        maxHeight: 'xsmall'
      }
    }));
  }
  SelectPanelHeightInitialWithUnderflowingItemsAfterFetch.storyName = 'SelectPanel, Height: Initial, Underflowing Items (After Fetch)';
  export function SelectPanelAboveTallBody() {
    const [selected, setSelected] = React.useState(items[0]);
    const [filter, setFilter] = React.useState('');
    const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
    const [open, setOpen] = useState(false);
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/React.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/React.createElement(SelectPanel, {
      renderAnchor: ({
        children,
        'aria-labelledby': ariaLabelledBy,
        ...anchorProps
      }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
        "aria-labelledby": ` ${ariaLabelledBy}`
      }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
      placeholderText: "Filter Labels",
      open: open,
      onOpenChange: setOpen,
      items: filteredItems,
      selected: selected,
      onSelectedChange: setSelected,
      onFilterChange: setFilter,
      showItemDividers: true,
      overlayProps: {
        width: 'small',
        height: 'xsmall'
      }
    }), /*#__PURE__*/React.createElement("div", {
      style: {
        backgroundColor: 'cornflowerblue',
        height: '100vh'
      }
    }, "This element makes the body really tall. This is to test that we do not have layout/focus issues if the Portal is far down the page"));
  }
  SelectPanelAboveTallBody.storyName = 'SelectPanel, Above a Tall Body';