text: "use strict";
  
  var _react = _interopRequireDefault(require("react"));
  
  var _react2 = require("@storybook/react");
  
  var _addonActions = require("@storybook/addon-actions");
  
  var _addonKnobs = require("@storybook/addon-knobs");
  
  var _storybookReadme = require("storybook-readme");
  
  var _README = _interopRequireDefault(require("./README.md"));
  
  var _MultiSelect = _interopRequireDefault(require("../MultiSelect"));
  
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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); }
  
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
  
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
  
  var items = [{
    id: 'downshift-1-item-0',
    text: 'Option 1'
  }, {
    id: 'downshift-1-item-1',
    text: 'Option 2'
  }, {
    id: 'downshift-1-item-2',
    text: 'Option 3'
  }, {
    id: 'downshift-1-item-3',
    text: 'Option 4'
  }, {
    id: 'downshift-1-item-4',
    text: 'An example option that is really long to show what should be done to handle long text'
  }];
  var defaultLabel = 'MultiSelect Label';
  var defaultPlaceholder = 'Filter';
  var types = {
    'Default (default)': 'default',
    'Inline (inline)': 'inline'
  };
  var sizes = {
    'Extra large size (xl)': 'xl',
    'Regular size (lg)': '',
    'Small size (sm)': 'sm'
  };
  
  var props = function props() {
    return {
      id: (0, _addonKnobs.text)('MultiSelect ID (id)', 'carbon-multiselect-example'),
      titleText: (0, _addonKnobs.text)('Title (titleText)', 'Multiselect title'),
      helperText: (0, _addonKnobs.text)('Helper text (helperText)', 'This is not helper text'),
      filterable: (0, _addonKnobs.boolean)('Filterable (`<MultiSelect.Filterable>` instead of `<MultiSelect>`)', false),
      disabled: (0, _addonKnobs.boolean)('Disabled (disabled)', false),
      light: (0, _addonKnobs.boolean)('Light variant (light)', false),
      useTitleInItem: (0, _addonKnobs.boolean)('Show tooltip on hover', false),
      type: (0, _addonKnobs.select)('UI type (Only for `<MultiSelect>`) (type)', types, 'default'),
      size: (0, _addonKnobs.select)('Field size (size)', sizes, '') || undefined,
      label: (0, _addonKnobs.text)('Label (label)', defaultLabel),
      invalid: (0, _addonKnobs.boolean)('Show form validation UI (invalid)', false),
      invalidText: (0, _addonKnobs.text)('Form validation UI content (invalidText)', 'Invalid Selection'),
      onChange: (0, _addonActions.action)('onChange'),
      listBoxMenuIconTranslationIds: (0, _addonKnobs.object)('Listbox menu icon translation IDs (for translateWithId callback)', {
        'close.menu': 'Close menu',
        'open.menu': 'Open menu',
        'clear.all': 'Clear all',
        'clear.selection': 'Clear selection'
      }),
      selectionFeedback: (0, _addonKnobs.select)('Selection feedback', ['top', 'fixed', 'top-after-reopen'], 'top-after-reopen')
    };
  };
  
  (0, _react2.storiesOf)('MultiSelect', module).addDecorator(_addonKnobs.withKnobs).add('default', (0, _storybookReadme.withReadme)(_README.default, function () {
    var _props = props(),
        filterable = _props.filterable,
        listBoxMenuIconTranslationIds = _props.listBoxMenuIconTranslationIds,
        selectionFeedback = _props.selectionFeedback,
        multiSelectProps = _objectWithoutProperties(_props, ["filterable", "listBoxMenuIconTranslationIds", "selectionFeedback"]);
  
    var ComponentToUse = !filterable ? _MultiSelect.default : _MultiSelect.default.Filterable;
    var placeholder = !filterable ? undefined : defaultPlaceholder;
    return _react.default.createElement("div", {
      style: {
        width: 300
      }
    }, _react.default.createElement(ComponentToUse, _extends({}, multiSelectProps, {
      items: items,
      itemToString: function itemToString(item) {
        return item ? item.text : '';
      },
      placeholder: placeholder,
      translateWithId: function translateWithId(id) {
        return listBoxMenuIconTranslationIds[id];
      },
      selectionFeedback: selectionFeedback
    })));
  }), {
    info: {
      text: "\n            MultiSelect\n          "
    }
  }).add('with initial selected items', (0, _storybookReadme.withReadme)(_README.default, function () {
    var _props2 = props(),
        filterable = _props2.filterable,
        listBoxMenuIconTranslationIds = _props2.listBoxMenuIconTranslationIds,
        selectionFeedback = _props2.selectionFeedback,
        multiSelectProps = _objectWithoutProperties(_props2, ["filterable", "listBoxMenuIconTranslationIds", "selectionFeedback"]);
  
    var ComponentToUse = !filterable ? _MultiSelect.default : _MultiSelect.default.Filterable;
    var placeholder = !filterable ? undefined : defaultPlaceholder;
    return _react.default.createElement("div", {
      style: {
        width: 300
      }
    }, _react.default.createElement(ComponentToUse, _extends({}, multiSelectProps, {
      items: items,
      itemToString: function itemToString(item) {
        return item ? item.text : '';
      },
      initialSelectedItems: [items[0], items[1]],
      placeholder: placeholder,
      translateWithId: function translateWithId(id) {
        return listBoxMenuIconTranslationIds[id];
      },
      selectionFeedback: selectionFeedback
    })));
  }), {
    info: {
      text: "\n            Provide a set of items to initially select in the control\n          "
    }
  });