function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useState } from 'react';
import { Box, BottomSheet, Button, Typography, Accordion, AccordionItem, FadedScroll, FlexTable } from '../..';
export default {
  title: 'Molecules / BottomSheet',
  parameters: {
    component: BottomSheet
  }
};
var AccordionComponent = function AccordionComponent() {
  return React.createElement(Accordion, null, React.createElement(AccordionItem, {
    title: "Accordion 1",
    withChevron: true,
    disableFocusOutline: true
  }, React.createElement(Typography, {
    type: "primary",
    as: "p"
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), React.createElement(AccordionItem, {
    title: "Accordion 2",
    withChevron: true,
    disableFocusOutline: true
  }, React.createElement(Typography, {
    type: "primary",
    as: "p"
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), React.createElement(AccordionItem, {
    title: "Accordion 3",
    withChevron: true,
    disableFocusOutline: true
  }, React.createElement(Typography, {
    type: "primary",
    as: "p"
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), React.createElement(AccordionItem, {
    title: "Accordion 4",
    withChevron: true,
    disableFocusOutline: true
  }, React.createElement(Typography, {
    type: "primary",
    as: "p"
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), React.createElement(AccordionItem, {
    title: "Accordion 5",
    withChevron: true,
    disableFocusOutline: true
  }, React.createElement(Typography, {
    type: "primary",
    as: "p"
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), React.createElement(AccordionItem, {
    title: "Accordion 6",
    withChevron: true,
    disableFocusOutline: true
  }, React.createElement(Typography, {
    type: "primary",
    as: "p"
  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")));
};
export var Default = {
  render: function render() {
    var Example = function Example() {
      var _useState = useState(true),
        _useState2 = _slicedToArray(_useState, 2),
        open = _useState2[0],
        setOpen = _useState2[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return React.createElement(React.Fragment, null, React.createElement(Button, {
        type: "button",
        onClick: onOpen
      }, "Show BottomSheet [not fullscreen]"), React.createElement(Box, {
        p: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), React.createElement(Box, {
        p: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), React.createElement(BottomSheet, {
        closeOnClickOutside: true,
        onClose: onClose,
        open: open,
        title: React.createElement(Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Filters")
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(FadedScroll, {
        enableMobileFade: true,
        maxHeight: "calc(33dvh);"
      }, React.createElement(AccordionComponent, null), React.createElement(AccordionComponent, null)))));
    };
    return React.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'iphone12'
    }
  }
};
export var LargerVariant = {
  render: function render() {
    var Example = function Example() {
      var _useState3 = useState(true),
        _useState4 = _slicedToArray(_useState3, 2),
        open = _useState4[0],
        setOpen = _useState4[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return React.createElement(React.Fragment, null, React.createElement(Button, {
        type: "button",
        onClick: onOpen
      }, "Show BottomSheet [not fullscreen]"), React.createElement(Box, {
        p: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), React.createElement(Box, {
        p: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), React.createElement(BottomSheet, {
        closeOnClickOutside: true,
        height: "600px",
        onClose: onClose,
        open: open,
        title: React.createElement(Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Filters")
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Box, {
        p: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), React.createElement(FadedScroll, {
        enableMobileFade: true,
        maxHeight: "calc(36dvh);"
      }, React.createElement(AccordionComponent, null), React.createElement(AccordionComponent, null)))));
    };
    return React.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'iphone12'
    }
  }
};
export var LargerVariantAboveFlexTable = {
  render: function render() {
    var Example = function Example() {
      var _useState5 = useState(true),
        _useState6 = _slicedToArray(_useState5, 2),
        open = _useState6[0],
        setOpen = _useState6[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      var columnData = [{
        label: 'Country',
        value: 'SE'
      }, {
        label: 'Currency',
        value: 'SEK',
        sm: {
          hidden: true
        }
      }];
      return React.createElement(React.Fragment, null, React.createElement(Button, {
        type: "button",
        onClick: onOpen
      }, "Show BottomSheet [not fullscreen]"), React.createElement(Box, {
        p: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), React.createElement(Box, {
        p: 2
      }, React.createElement(FlexTable, {
        stickyHeader: true,
        expandable: true
      }, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
        columnId: "instrumentName"
      }, "Instrument Name"), React.createElement(FlexTable.Header, {
        columnId: "country",
        hidden: true,
        md: {
          hidden: false
        }
      }, "Country"), React.createElement(FlexTable.Header, {
        columnId: "currency",
        hidden: true,
        sm: {
          hidden: false
        }
      }, "Currency")), React.createElement(FlexTable.Row, {
        expandItems: columnData
      }, React.createElement(FlexTable.Cell, {
        columnId: "instrumentName"
      }, "Ericsson"), React.createElement(FlexTable.Cell, {
        columnId: "country",
        hidden: true,
        md: {
          hidden: false
        }
      }, "SE"), React.createElement(FlexTable.Cell, {
        columnId: "currency",
        hidden: true,
        sm: {
          hidden: false
        }
      }, "SEK")))), React.createElement(Box, {
        p: 2
      }, React.createElement(FlexTable, {
        stickyHeader: true
      }, React.createElement(FlexTable.HeaderRow, null, React.createElement(FlexTable.Header, {
        columnId: "instrument-name"
      }, "Instrument Name"), React.createElement(FlexTable.Header, {
        columnId: "currency"
      }, "Currency"), React.createElement(FlexTable.Header, {
        columnId: "country"
      }, "Country")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
        columnId: "instrument-name"
      }, "Ericsson"), React.createElement(FlexTable.Cell, {
        columnId: "currency"
      }, "SEK"), React.createElement(FlexTable.Cell, {
        columnId: "country"
      }, "SE")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
        columnId: "instrument-name"
      }, "Apple"), React.createElement(FlexTable.Cell, {
        columnId: "currency"
      }, "USD"), React.createElement(FlexTable.Cell, {
        columnId: "country"
      }, "US")), React.createElement(FlexTable.Row, null, React.createElement(FlexTable.Cell, {
        columnId: "instrument-name"
      }, "Nokia"), React.createElement(FlexTable.Cell, {
        columnId: "currency"
      }, "EUR"), React.createElement(FlexTable.Cell, {
        columnId: "country"
      }, "FI")))), React.createElement(BottomSheet, {
        closeOnClickOutside: true,
        height: "600px",
        onClose: onClose,
        open: open,
        title: React.createElement(Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Filters")
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(Box, {
        p: 2
      }, React.createElement(Typography, {
        type: "primary",
        as: "p"
      }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.")), React.createElement(FadedScroll, {
        enableMobileFade: true,
        maxHeight: "calc(31dvh);"
      }, React.createElement(AccordionComponent, null), React.createElement(AccordionComponent, null)))));
    };
    return React.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'iphone12'
    }
  }
};
export var FullscreenMobile = {
  render: function render() {
    var Example = function Example() {
      var _useState7 = useState(true),
        _useState8 = _slicedToArray(_useState7, 2),
        open = _useState8[0],
        setOpen = _useState8[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return React.createElement(React.Fragment, null, React.createElement(Button, {
        type: "button",
        onClick: onOpen
      }, "Show BottomSheet [fullscreen]"), React.createElement(BottomSheet, {
        onClose: onClose,
        fullScreenMobile: true,
        open: open,
        title: React.createElement(Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Filters")
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(FadedScroll, {
        enableMobileFade: true,
        maxHeight: "calc(100dvh - 60px);"
      }, React.createElement(AccordionComponent, null), React.createElement(AccordionComponent, null), React.createElement(AccordionComponent, null)))));
    };
    return React.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'iphone12'
    }
  }
};
export var NoBackDrop = {
  render: function render() {
    var Example = function Example() {
      var _useState9 = useState(true),
        _useState10 = _slicedToArray(_useState9, 2),
        open = _useState10[0],
        setOpen = _useState10[1];
      var onOpen = function onOpen() {
        setOpen(true);
      };
      var onClose = function onClose() {
        setOpen(false);
      };
      return React.createElement(React.Fragment, null, React.createElement(Button, {
        type: "button",
        onClick: onOpen
      }, "Show BottomSheet [no backdrop]"), React.createElement(BottomSheet, {
        closeOnClickOutside: true,
        onClose: onClose,
        open: open,
        showBackdrop: false,
        title: React.createElement(Typography, {
          type: "primary",
          weight: "extrabold"
        }, "Filters")
      }, React.createElement(Box, {
        mb: 2
      }, React.createElement(FadedScroll, {
        enableMobileFade: true,
        maxHeight: "calc(100dvh - 60px);"
      }, React.createElement(AccordionComponent, null), React.createElement(AccordionComponent, null), React.createElement(AccordionComponent, null)))));
    };
    return React.createElement(Example, null);
  },
  parameters: {
    viewport: {
      defaultViewport: 'iphone12'
    }
  }
};