function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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); }

/* eslint-disable indent */

/* eslint-disable react/display-name */
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import IconSettings from '../../icon-settings';
import { MENU_DROPDOWN } from '../../../utilities/constants';
import Dropdown from '../../menu-dropdown';
import { DropdownNubbinPositions } from '../../menu-dropdown/menu-dropdown';
import DropdownWithTooltips from '../__examples__/with-tooltips';
import List from '../../utilities/menu-list';
import Button from '../../button';
import Trigger from '../../menu-dropdown/button-trigger'; // eslint-disable-next-line camelcase

import UNSAFE_DirectionSettings from '../../utilities/UNSAFE_direction';
var options = [{
  className: 'custom-li-class',
  divider: 'bottom',
  label: 'A Header',
  type: 'header'
}, {
  disabled: true,
  label: 'An option that is Super Super Long',
  value: 'A0'
}, {
  label: 'Custom Class',
  className: 'custom-item-class',
  value: 'classssss'
}, {
  href: 'http://sfdc.co/',
  id: 'custom-li-id',
  label: 'Has a value',
  leftIcon: {
    name: 'settings',
    category: 'utility'
  },
  rightIcon: {
    name: 'settings',
    category: 'utility'
  },
  type: 'item',
  value: 'B0'
}, {
  type: 'divider'
}, {
  label: 'C Option',
  value: 'C0'
}, {
  label: 'D Option',
  value: 'D0'
}, {
  label: 'E Option',
  value: 'E0'
}, {
  label: 'A1 Option',
  value: 'A1'
}, {
  label: 'B2 Option',
  value: 'B1'
}, {
  label: 'C2 Option',
  value: 'C1'
}, {
  label: 'D2 Option',
  value: 'D1'
}, {
  label: 'E2 Option Super Super Long',
  value: 'E1'
}];

var getDropdown = function getDropdown(props) {
  return /*#__PURE__*/React.createElement(Dropdown, _extends({}, props, {
    onClose: action('Closed'),
    onOpen: action('Opened')
  }));
};

var makeRtl = function makeRtl(component) {
  return (
    /*#__PURE__*/
    // eslint-disable-next-line
    React.createElement(UNSAFE_DirectionSettings.Provider, {
      value: "rtl"
    }, /*#__PURE__*/React.createElement("div", {
      dir: "rtl"
    }, component))
  );
};

var DropdownControlled = /*#__PURE__*/function (_React$Component) {
  _inherits(DropdownControlled, _React$Component);

  var _super = _createSuper(DropdownControlled);

  function DropdownControlled() {
    var _this;

    _classCallCheck(this, DropdownControlled);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "state", {
      forcedState: undefined,
      menuOptions: options
    });

    _defineProperty(_assertThisInitialized(_this), "handleButtonClickReset", function () {
      _this.setState({
        forcedState: undefined
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleOpen", function () {
      action('Force Open').apply(void 0, arguments);

      _this.setState({
        forcedState: true
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
      action('Force Closed').apply(void 0, arguments);

      _this.setState({
        forcedState: false
      });
    });

    _defineProperty(_assertThisInitialized(_this), "toggleDisabledOption", function () {
      _this.setState(function (prevState, props) {
        prevState.menuOptions.splice(1, 1, {
          disabled: false,
          label: 'An option that is Super Super Long',
          value: 'A0'
        });
        return {
          options: prevState.menuOptions
        };
      });
    });

    return _this;
  }

  _createClass(DropdownControlled, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement("div", {
        className: "slds-grid"
      }, /*#__PURE__*/React.createElement("div", {
        className: "slds-col"
      }, /*#__PURE__*/React.createElement(Dropdown, _extends({}, this.props, {
        modal: false,
        isOpen: this.state.forcedState,
        onClose: action('Attempt Close'),
        onOpen: action('Attempt Open'),
        options: this.state.menuOptions
      }))), /*#__PURE__*/React.createElement("div", {
        className: "slds-col"
      }, /*#__PURE__*/React.createElement(Button, {
        label: "Force Open Dropdown",
        onClick: this.handleOpen
      }), /*#__PURE__*/React.createElement(Button, {
        label: "Force Close Dropdown",
        onClick: this.handleClose
      }), /*#__PURE__*/React.createElement(Button, {
        label: "Reset Dropdown",
        onClick: this.handleButtonClickReset
      }), /*#__PURE__*/React.createElement(Button, {
        label: "Toggle Option A disabled",
        onClick: this.toggleDisabledOption
      })));
    }
  }]);

  return DropdownControlled;
}(React.Component);

_defineProperty(DropdownControlled, "displayName", 'DropdownControlled');

var getDropdownPositioned = function getDropdownPositioned(props) {
  var positionedDropdowns = [];
  DropdownNubbinPositions.forEach(function (position) {
    positionedDropdowns.push( /*#__PURE__*/React.createElement("div", {
      className: "slds-col slds-size_1-of-3",
      key: "positioned-dropdown-".concat(position.replace(' ', '')),
      style: {
        minHeight: '500px'
      },
      "data-ignore-axe-duplicate-id": true
    }, /*#__PURE__*/React.createElement(Dropdown, _extends({}, props, {
      isOpen: true,
      nubbinPosition: position,
      onClose: action('Closed'),
      onOpen: action('Opened')
    }), /*#__PURE__*/React.createElement(Trigger, null, /*#__PURE__*/React.createElement(Button, {
      iconVariant: "container",
      iconCategory: "utility",
      iconName: "settings",
      label: position
    })))));
  });
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "slds-grid slds-wrap"
  }, positionedDropdowns), /*#__PURE__*/React.createElement("div", {
    className: "slds-col",
    style: {
      minHeight: '500px'
    }
  }, /*#__PURE__*/React.createElement(Dropdown, _extends({}, props, {
    nubbinPosition: "top right",
    onClose: action('Closed'),
    onOpen: action('Opened')
  }), /*#__PURE__*/React.createElement(Trigger, null, /*#__PURE__*/React.createElement(Button, {
    iconVariant: "container",
    iconCategory: "utility",
    iconName: "settings",
    assistiveText: {
      icon: 'top right'
    }
  })))));
};

var getDropdownCustomTrigger = function getDropdownCustomTrigger(props) {
  return /*#__PURE__*/React.createElement(Dropdown, _extends({}, props, {
    onClose: action('Closed'),
    onOpen: action('Opened')
  }), /*#__PURE__*/React.createElement(Trigger, null, /*#__PURE__*/React.createElement(Button, {
    assistiveText: {
      icon: props.assistiveText.icon
    },
    iconCategory: "utility",
    iconName: "settings"
  })));
};
/* eslint-disable react/prop-types */

/* eslint-disable no-script-url */


var DropdownCustomContent = function DropdownCustomContent(props) {
  return /*#__PURE__*/React.createElement("div", {
    id: "custom-dropdown-menu-content"
  }, /*#__PURE__*/React.createElement("div", {
    className: "slds-m-around_medium"
  }, /*#__PURE__*/React.createElement("div", {
    className: "slds-tile slds-tile_board slds-m-horizontal_small"
  }, /*#__PURE__*/React.createElement("p", {
    className: "tile__title slds-text-heading_small"
  }, "Art Vandelay"), /*#__PURE__*/React.createElement("div", {
    className: "slds-tile__detail"
  }, /*#__PURE__*/React.createElement("p", {
    className: "slds-truncate"
  }, /*#__PURE__*/React.createElement("a", {
    className: "slds-m-right_medium",
    href: "javascript:void(0)",
    onClick: props.onClick
  }, "Settings"), /*#__PURE__*/React.createElement("a", {
    href: "javascript:void(0)",
    onClick: props.onClick
  }, "Log Out"))))));
};

var getDropdownCustomContent = function getDropdownCustomContent(props) {
  return /*#__PURE__*/React.createElement(Dropdown, _extends({}, props, {
    onClose: action('Closed'),
    onOpen: action('Opened')
  }), /*#__PURE__*/React.createElement(DropdownCustomContent, null), /*#__PURE__*/React.createElement(List, {
    options: [{
      label: 'Custom Content Option'
    }].concat(options)
  }));
};

storiesOf(MENU_DROPDOWN, module).addDecorator(function (getStory) {
  return /*#__PURE__*/React.createElement("div", {
    className: "slds-p-around_medium slds-text-align_center"
  }, /*#__PURE__*/React.createElement(IconSettings, {
    iconPath: "/assets/icons"
  }, getStory()));
}).add('Base', function () {
  return getDropdown({
    align: 'right',
    id: 'base',
    label: 'Dropdown Click',
    onClick: function onClick() {
      action('Clicked').apply(void 0, arguments);
    },
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    options: options
  });
}).add('Base center-aligned', function () {
  return getDropdown({
    align: 'center',
    id: 'base-center',
    label: 'Dropdown Click',
    onClick: function onClick() {
      action('Clicked').apply(void 0, arguments);
    },
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    options: options
  });
}).add('Base with icon, dropdown right-aligned', function () {
  return getDropdown({
    align: 'right',
    id: 'right-align-with-icon',
    label: 'Dropdown Click',
    iconCategory: 'utility',
    iconName: 'down',
    iconPosition: 'right',
    onClick: function onClick() {
      action('Clicked').apply(void 0, arguments);
    },
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    options: options
  });
}).add('Base with icon, dropdown right-aligned, right-to-left', function () {
  return makeRtl(getDropdown({
    align: 'right',
    label: 'Dropdown Click',
    iconCategory: 'utility',
    iconName: 'down',
    iconPosition: 'right',
    id: 'right-align-with-icon-rtl',
    onClick: function onClick() {
      action('Clicked').apply(void 0, arguments);
    },
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    options: options
  }));
}).add('Base with icon, dropdown left-aligned', function () {
  return getDropdown({
    align: 'left',
    label: 'Dropdown Click',
    iconCategory: 'utility',
    iconName: 'down',
    iconPosition: 'right',
    id: 'left-align-with-icon',
    onClick: function onClick() {
      action('Clicked').apply(void 0, arguments);
    },
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    options: options
  });
}).add('Base with icon, dropdown left-aligned, right-to-left', function () {
  return makeRtl(getDropdown({
    align: 'left',
    label: 'Dropdown Click',
    iconCategory: 'utility',
    iconName: 'down',
    iconPosition: 'right',
    id: 'left-align-with-icon-rtl',
    onClick: function onClick() {
      action('Clicked').apply(void 0, arguments);
    },
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    options: options
  }));
}).add('Render inline', function () {
  return getDropdown({
    align: 'right',
    id: 'render-inline',
    label: 'Dropdown Click',
    menuPosition: 'relative',
    onClick: function onClick() {
      action('Clicked').apply(void 0, arguments);
    },
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    options: options
  });
}).add('Render inline w/ Nubbins', function () {
  return getDropdownPositioned({
    id: 'render-inline-nubbins',
    menuPosition: 'relative',
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    options: options
  });
}).add('Render inline w/ Nubbins, right-to-left', function () {
  return makeRtl(getDropdownPositioned({
    id: 'render-inline-nubbins-rtl',
    menuPosition: 'relative',
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    options: options
  }));
}).add('Custom Trigger', function () {
  return getDropdownCustomTrigger({
    id: 'custom-trigger',
    tabIndex: '-1',
    assistiveText: {
      icon: 'Custom Dropdown Trigger'
    },
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    options: options
  });
}).add('Custom Content', function () {
  return getDropdownCustomContent({
    id: 'custom-content',
    label: 'Custom Content Dropdown Click',
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    options: options
  });
}).add('Hover', function () {
  return getDropdown({
    assistiveText: {
      icon: 'Icon More large'
    },
    buttonVariant: 'icon',
    iconCategory: 'utility',
    iconName: 'settings',
    iconVariant: 'more',
    id: 'hover',
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    openOn: 'hover',
    options: options
  });
}).add('Two Hovers', function () {
  return /*#__PURE__*/React.createElement("div", null, getDropdown({
    assistiveText: {
      icon: 'Icon More large'
    },
    buttonVariant: 'icon',
    iconCategory: 'utility',
    iconName: 'settings',
    iconVariant: 'more',
    id: 'hover-1',
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    openOn: 'hover',
    options: options
  }), ' ', getDropdown({
    assistiveText: {
      icon: 'Icon More large'
    },
    buttonVariant: 'icon',
    iconCategory: 'utility',
    iconName: 'settings',
    iconVariant: 'more',
    id: 'hover-2',
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    openOn: 'hover',
    options: options
  }));
}).add('Checkmark', function () {
  return getDropdown({
    assistiveText: {
      icon: 'More Options'
    },
    buttonVariant: 'icon',
    checkmark: true,
    iconCategory: 'utility',
    iconName: 'down',
    iconVariant: 'border-filled',
    id: 'checkmark',
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    options: options,
    value: 'C0'
  });
}).add('Checkmark, right-to-left', function () {
  return makeRtl(getDropdown({
    assistiveText: {
      icon: 'More Options'
    },
    buttonVariant: 'icon',
    checkmark: true,
    iconCategory: 'utility',
    iconName: 'down',
    iconVariant: 'border-filled',
    id: 'checkmark-rtl',
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    options: options,
    value: 'C0'
  }));
}).add('Hover with Checkmark', function () {
  return getDropdown({
    assistiveText: {
      icon: 'More Options'
    },
    buttonVariant: 'icon',
    checkmark: true,
    iconCategory: 'utility',
    iconName: 'down',
    iconVariant: 'border-filled',
    id: 'hover-with-checkmark',
    onMouseEnter: action('Mouse enter'),
    onMouseLeave: action('Mouse leave'),
    onSelect: function onSelect() {
      action('Selected').apply(void 0, arguments);
    },
    openOn: 'hover',
    options: options,
    value: 'C0'
  });
}).add('Controlled w/ isOpen', function () {
  return /*#__PURE__*/React.createElement(DropdownControlled, {
    align: "right",
    id: "controlled-is-open",
    label: "Dropdown Click",
    options: options
  });
}).add('With tooltips', function () {
  return /*#__PURE__*/React.createElement(DropdownWithTooltips, null);
}).add('With tooltips (open)', function () {
  return /*#__PURE__*/React.createElement(DropdownWithTooltips, {
    isOpenAllTooltips: true
  });
});
//# sourceMappingURL=storybook-stories.js.map