@wix/design-system 1.0.0

package/dist/cjs/AudioPlayer/AudioPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AudioPlayer","memo","forwardRef","ref","dataHook","className","src","format","preload","webAudioAPI","onLoad","onLoadError","onPlay","onPause","onEnd","onSeek","autoplay","isSliderLocked","setIsSliderLocked","useState","hoverPosition","setHoverPosition","handleSizeInPercentage","setHandleSizeInPercentage","playing","setPlaying","showDuration","setShowDuration","playPauseButtonRef","useRef","useImperativeHandle","focus","current","_onDestroy","useCallback","_onEnd","_onLoad","loadingState","duration","seek","setSeek","useAudioManager","onDestroy","allowSeekLoop","isLoaded","_hoverISO","useMemo","secondsToISO","positionToSeconds","_seekPercentage","secondsToPosition","_togglePlayPause","_playPauseButtonContent","dataHooks","audioPlayerLoad","audioPlayerPause","audioPlayerPlay","_setSliderPositions","x","width","clickX","positionInPixels","position","Math","min","max","_handleSliderMouseDown","event","clientX","currentTarget","getBoundingClientRect","_handleSliderMouseMove","_handleSliderMouseUp","useEffect","window","addEventListener","removeEventListener","st","classes","root","audioPlayerPlayPause","playPauseButton","audioPlayerSlider","slider","vars","track","tooltip","left","tooltipTarget","audioPlayerSliderHandle","handle","grow","abs","timer","audioTimeIndicator","displayName","propTypes","PropTypes","string","isRequired","oneOf","bool","func","defaultProps"],"sources":["../../../src/AudioPlayer/AudioPlayer.js"],"sourcesContent":["import React, {\n  memo,\n  useCallback,\n  useMemo,\n  useState,\n  useEffect,\n  forwardRef,\n  useRef,\n  useImperativeHandle,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { st, classes, vars } from './AudioPlayer.st.css';\nimport Tooltip from '../Tooltip';\nimport IconButton from '../IconButton';\nimport Loader from '../Loader';\nimport Heading from '../Heading';\nimport { PlayFilled, PauseFilled } from '@wix/wix-ui-icons-common';\nimport { dataHooks } from './constants';\nimport { useAudioManager } from './AudioManager/AudioManager';\nimport { positionToSeconds, secondsToISO, secondsToPosition } from './utils';\n\n/** AudioPlayer */\nconst AudioPlayer = memo(\n  forwardRef(\n    (\n      {\n        dataHook,\n        className,\n        src,\n        format,\n        preload,\n        webAudioAPI,\n        onLoad,\n        onLoadError,\n        onPlay,\n        onPause,\n        onEnd,\n        onSeek,\n        autoplay,\n      },\n      ref,\n    ) => {\n      const [isSliderLocked, setIsSliderLocked] = useState(true);\n      const [hoverPosition, setHoverPosition] = useState(0);\n      const [handleSizeInPercentage, setHandleSizeInPercentage] = useState(0);\n      const [playing, setPlaying] = useState(false);\n      const [showDuration, setShowDuration] = useState(true);\n\n      const playPauseButtonRef = useRef();\n\n      useImperativeHandle(ref, () => ({\n        focus: () =>\n          playPauseButtonRef.current && playPauseButtonRef.current.focus(),\n      }));\n\n      const _onDestroy = useCallback(() => {\n        setPlaying(false);\n        setShowDuration(true);\n      }, [setPlaying, setShowDuration]);\n\n      const _onEnd = useCallback(() => {\n        setShowDuration(true);\n        setPlaying(false);\n        onEnd && onEnd();\n      }, [onEnd, setShowDuration, setPlaying]);\n\n      const _onLoad = useCallback(() => {\n        if (autoplay) {\n          setShowDuration(false);\n          setPlaying(true);\n        }\n        onLoad && onLoad();\n      }, [onLoad, autoplay]);\n\n      const { loadingState, duration, seek, setSeek } = useAudioManager({\n        src,\n        format,\n        preload,\n        webAudioAPI,\n        onLoad: _onLoad,\n        onLoadError,\n        onPlay,\n        onSeek,\n        onPause,\n        playing,\n        onDestroy: _onDestroy,\n        onEnd: _onEnd,\n        allowSeekLoop: isSliderLocked,\n      });\n\n      const isLoaded = loadingState === 'loaded';\n\n      const _hoverISO = useMemo(() => {\n        if (!isLoaded) {\n          return secondsToISO(0, false, duration);\n        }\n\n        return secondsToISO(\n          positionToSeconds(hoverPosition, duration),\n          true,\n          duration,\n        );\n      }, [isLoaded, hoverPosition, duration]);\n\n      // takes the current seek (in seconds) and converts it to slider position.\n      const _seekPercentage = useMemo(() => {\n        if (!isLoaded) {\n          return 0;\n        }\n\n        return secondsToPosition(seek, duration);\n      }, [isLoaded, seek, duration]);\n\n      const _togglePlayPause = useCallback(() => {\n        setShowDuration(false);\n\n        if (playing) {\n          setPlaying(false);\n        } else {\n          setPlaying(true);\n        }\n      }, [playing, setPlaying, setShowDuration]);\n\n      const _playPauseButtonContent = useMemo(() => {\n        if (loadingState === 'loading') {\n          return (\n            <span data-hook={dataHooks.audioPlayerLoad}>\n              <Loader size=\"tiny\" />\n            </span>\n          );\n        }\n\n        return playing ? (\n          <PauseFilled data-hook={dataHooks.audioPlayerPause} />\n        ) : (\n          <PlayFilled data-hook={dataHooks.audioPlayerPlay} />\n        );\n      }, [loadingState, playing]);\n\n      const _setSliderPositions = useCallback(\n        (x, width, clickX) => {\n          const positionInPixels = ((clickX - x) / width) * 100;\n          const position = Math.min(Math.max(positionInPixels, 0), 100);\n\n          setHandleSizeInPercentage((12 / width) * 100);\n          setHoverPosition(position);\n        },\n        [setHoverPosition],\n      );\n\n      const _handleSliderMouseDown = useCallback(\n        event => {\n          const { clientX, currentTarget } = event;\n          const { x, width } = currentTarget.getBoundingClientRect();\n\n          setIsSliderLocked(false);\n          _setSliderPositions(x, width, clientX);\n        },\n        [_setSliderPositions, setIsSliderLocked],\n      );\n\n      const _handleSliderMouseMove = useCallback(\n        event => {\n          const { clientX, currentTarget } = event;\n          const { x, width } = currentTarget.getBoundingClientRect();\n\n          _setSliderPositions(x, width, clientX);\n        },\n        [_setSliderPositions],\n      );\n\n      const _handleSliderMouseUp = useCallback(() => {\n        setIsSliderLocked(true);\n      }, [setIsSliderLocked]);\n\n      useEffect(() => {\n        window.addEventListener('mouseup', _handleSliderMouseUp);\n\n        return () =>\n          window.removeEventListener('mouseup', _handleSliderMouseUp);\n      }, [_handleSliderMouseUp]);\n\n      // seek audio file to the slider location when dragged.\n      useEffect(() => {\n        if (!isSliderLocked) {\n          setSeek(positionToSeconds(hoverPosition, duration));\n          setShowDuration(false);\n        }\n      }, [duration, hoverPosition, isSliderLocked, setSeek]);\n\n      return (\n        <div className={st(classes.root, className)} data-hook={dataHook}>\n          <IconButton\n            ref={playPauseButtonRef}\n            size=\"small\"\n            onClick={_togglePlayPause}\n            dataHook={dataHooks.audioPlayerPlayPause}\n            className={classes.playPauseButton}\n          >\n            {_playPauseButtonContent}\n          </IconButton>\n          <div\n            data-hook={dataHooks.audioPlayerSlider}\n            className={classes.slider}\n            style={{\n              [vars['audio-player-position']]: `${_seekPercentage}%`,\n            }}\n            onMouseDown={_handleSliderMouseDown}\n            onMouseMove={_handleSliderMouseMove}\n          >\n            <div className={classes.track} />\n            <div\n              className={classes.tooltip}\n              style={{ left: `${hoverPosition}%` }}\n            >\n              <Tooltip content={`${_hoverISO}`}>\n                <div className={classes.tooltipTarget} />\n              </Tooltip>\n            </div>\n            <div\n              data-hook={dataHooks.audioPlayerSliderHandle}\n              className={st(classes.handle, {\n                grow:\n                  isLoaded &&\n                  (!isSliderLocked ||\n                    Math.abs(_seekPercentage - hoverPosition) <\n                      handleSizeInPercentage),\n              })}\n              style={{ left: `${_seekPercentage}%` }}\n            />\n          </div>\n          <Heading\n            size=\"tiny\"\n            className={classes.timer}\n            dataHook={dataHooks.audioTimeIndicator}\n          >\n            {showDuration\n              ? secondsToISO(duration, isLoaded, duration)\n              : secondsToISO(seek, isLoaded, duration)}\n          </Heading>\n        </div>\n      );\n    },\n  ),\n);\n\nAudioPlayer.displayName = 'AudioPlayer';\n\nAudioPlayer.propTypes = {\n  /** Applies a data-hook HTML attribute that can be used in the tests. */\n  dataHook: PropTypes.string,\n\n  /** Specifies a CSS class name to be appended to the component’s root element. */\n  className: PropTypes.string,\n\n  /**\n   * Specifies a link to the source of the track to be loaded for the sound (URL or base64 data URI).\n   * If a file has no extension, you will need to specify the extension using the format property.\n   */\n  src: PropTypes.string.isRequired,\n\n  /**\n   * Specifies a file format in situations where extraction does not work (such as a SoundCloud stream).<br/>\n   * By default, AudioPlayer detects your file format from the extension.\n   */\n  format: PropTypes.string,\n\n  /**\n   * Determines what to download when the component is rendered: full file, its metadata or nothing at all.\n   * When webAudioAPI = true you can only set it to either 'auto' or 'none'.\n   * When webAudioAPI = false you can set it to 'auto', 'metadata' or 'none'.\n   */\n  preload: PropTypes.oneOf(['auto', 'metadata', 'none']),\n\n  /**\n   * Start playback automatically when audio is loaded.\n   */\n  autoplay: PropTypes.bool,\n\n  /**\n   * Specifies whether to force web audio API. Use it for relatively small audio files only because you have to wait for the full file\n   * to be downloaded and decoded before playing. Web Audio API allows advanced capabilities as described in\n   * [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API).\n   */\n  webAudioAPI: PropTypes.bool,\n\n  /**\n   * Defines a callback function which is called when audio is loaded.\n   */\n  onLoad: PropTypes.func,\n\n  /**\n   * Defines a callback function which is called every time audio fails to load.\n   */\n  onLoadError: PropTypes.func,\n\n  /**\n   * Defines a callback function which is called when audio is played.\n   */\n  onPlay: PropTypes.func,\n\n  /**\n   * Defines a callback function which is called when audio is paused.\n   */\n  onPause: PropTypes.func,\n\n  /**\n   Will be called when audio is ended.\n   */\n  onEnd: PropTypes.func,\n\n  /**\n   * Defines a callback function which is called when audio is seeked explicitly (i.e. when user drags the slider).\n   */\n  onSeek: PropTypes.func,\n};\n\nAudioPlayer.defaultProps = {\n  preload: 'metadata',\n  webAudioAPI: false,\n};\n\nexport default AudioPlayer;\n"],"mappings":"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"}

package/dist/cjs/AudioPlayer/AudioPlayer.meta.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.testkitTests = exports.ssrTests = exports.requiredProps = exports.a11yTests = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// This object should contain a mock value for each required prop of this component
+var requiredProps = {
+  src: 'example.mp3'
+};
+
+// This array should contain an object only for tests you wish to run on all compliance tests
+exports.requiredProps = requiredProps;
+var sharedTests = [{
+  title: 'render',
+  props: _objectSpread({}, requiredProps)
+}];
+var testkitTests = [...sharedTests];
+exports.testkitTests = testkitTests;
+var ssrTests = [...sharedTests];
+exports.ssrTests = ssrTests;
+var a11yTests = [...sharedTests];
+exports.a11yTests = a11yTests;
+//# sourceMappingURL=AudioPlayer.meta.js.map

package/dist/cjs/AudioPlayer/AudioPlayer.meta.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["requiredProps","src","sharedTests","title","props","testkitTests","ssrTests","a11yTests"],"sources":["../../../src/AudioPlayer/AudioPlayer.meta.tsx"],"sourcesContent":["import { AudioPlayerProps } from '.';\n\n// This object should contain a mock value for each required prop of this component\nexport const requiredProps: AudioPlayerProps = {\n  src: 'example.mp3',\n};\n\n// This array should contain an object only for tests you wish to run on all compliance tests\nconst sharedTests = [\n  {\n    title: 'render',\n    props: {\n      ...requiredProps,\n    } as AudioPlayerProps,\n  },\n];\n\nexport const testkitTests = [...sharedTests];\n\nexport const ssrTests = [...sharedTests];\n\nexport const a11yTests = [...sharedTests];\n"],"mappings":";;;;;;;;AAEA;AACO,IAAMA,aAA+B,GAAG;EAC7CC,GAAG,EAAE;AACP,CAAC;;AAED;AAAA;AACA,IAAMC,WAAW,GAAG,CAClB;EACEC,KAAK,EAAE,QAAQ;EACfC,KAAK,oBACAJ,aAAa;AAEpB,CAAC,CACF;AAEM,IAAMK,YAAY,GAAG,CAAC,GAAGH,WAAW,CAAC;AAAC;AAEtC,IAAMI,QAAQ,GAAG,CAAC,GAAGJ,WAAW,CAAC;AAAC;AAElC,IAAMK,SAAS,GAAG,CAAC,GAAGL,WAAW,CAAC;AAAC"}

package/dist/cjs/AudioPlayer/AudioPlayer.st.css

@@ -0,0 +1,72 @@
+:import {
+  -st-from: '../Foundation/stylable/colors.st.css';
+  -st-named: B10, D10-30;
+}
+
+.root {
+  width: 100%;
+  min-width: 120px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.playPauseButton {
+  margin-right: 18px;
+  flex-shrink: 0;
+}
+
+.slider {
+  user-select: none;
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+  padding: 10px 0;
+  margin-right: 12px;
+}
+
+.track {
+  height: 3px;
+  background: linear-gradient(
+    to right,
+    value(B10) 0%,
+    value(B10) var(--audio-player-position),
+    value(D10-30) var(--audio-player-position),
+    value(D10-30) 100%
+  );
+}
+
+.handle {
+  -st-states: grow;
+
+  position: absolute;
+  pointer-events: none;
+  background: value(B10);
+  border-radius: 100%;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  width: 12px;
+  height: 12px;
+}
+
+.tooltip:hover + .handle:grow {
+  width: 18px;
+  height: 18px;
+}
+
+.tooltip {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+}
+
+.tooltipTarget {
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+}
+
+.timer {
+  flex-shrink: 0;
+}

package/dist/cjs/AudioPlayer/AudioPlayer.st.css.js

@@ -0,0 +1,24 @@
+
+require("../Foundation/stylable/colors.st.css.js");
+const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js");
+
+
+
+var _namespace_ = "wds_1_0_0_AudioPlayer";
+var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
+
+module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
+module.exports.style = /*#__PURE__*/ _style_;
+module.exports.st = /*#__PURE__*/ _style_;
+
+module.exports.namespace = _namespace_;
+module.exports.classes = {"root":"wds_1_0_0_AudioPlayer__root","playPauseButton":"wds_1_0_0_AudioPlayer__playPauseButton","slider":"wds_1_0_0_AudioPlayer__slider","track":"wds_1_0_0_AudioPlayer__track","handle":"wds_1_0_0_AudioPlayer__handle","tooltip":"wds_1_0_0_AudioPlayer__tooltip","tooltipTarget":"wds_1_0_0_AudioPlayer__tooltipTarget","timer":"wds_1_0_0_AudioPlayer__timer"};
+module.exports.keyframes = {}; 
+module.exports.layers = {};
+module.exports.containers = {};
+module.exports.stVars = {}; 
+module.exports.vars = {"audio-player-position":"--wds_1_0_0_AudioPlayer-audio-player-position"}; 
+
+
+
+

package/dist/cjs/AudioPlayer/AudioPlayer.uni.driver.d.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=AudioPlayer.uni.driver.d.js.map

package/dist/cjs/AudioPlayer/AudioPlayer.uni.driver.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/AudioPlayer/AudioPlayer.uni.driver.d.ts"],"sourcesContent":["import { BaseUniDriver } from 'wix-ui-test-utils/unidriver';\n\nexport interface AudioPlayerUniDriver extends BaseUniDriver {\n  clickOnPlayPauseButton(): Promise<void>;\n  timeIndicatorText(): Promise<string>;\n}\n"],"mappings":""}

package/dist/cjs/AudioPlayer/AudioPlayer.uni.driver.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.audioPlayerDriverFactory = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _unidriver = require("../test-utils/utils/unidriver");
+var _constants = require("./constants");
+var _IconButtonUni = require("../IconButton/IconButton.uni.driver");
+var _HeadingUni = require("../Heading/Heading.uni.driver");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/**
+ * Note: Testing AudioPlayer is not possible in JSdom due to the web audio API.
+ */
+var audioPlayerDriverFactory = (base, body) => {
+  var playPauseButtonDriver = (0, _IconButtonUni.iconButtonDriverFactory)((0, _unidriver.findByHook)(base, _constants.dataHooks.audioPlayerPlayPause));
+  var timeIndicatorDriver = (0, _HeadingUni.headingUniDriverFactory)((0, _unidriver.findByHook)(base, _constants.dataHooks.audioTimeIndicator));
+  return _objectSpread(_objectSpread({}, (0, _unidriver.baseUniDriverFactory)(base, body)), {}, {
+    /**
+     * Clicks on play/pause button
+     * @return {Promise<void>}
+     */
+    clickOnPlayPauseButton: () => playPauseButtonDriver.click(),
+    /**
+     * Gets time indicator text
+     * @return {Promise<string>}
+     */
+    timeIndicatorText: () => timeIndicatorDriver.getText()
+  });
+};
+exports.audioPlayerDriverFactory = audioPlayerDriverFactory;
+//# sourceMappingURL=AudioPlayer.uni.driver.js.map

package/dist/cjs/AudioPlayer/AudioPlayer.uni.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["audioPlayerDriverFactory","base","body","playPauseButtonDriver","iconButtonDriverFactory","findByHook","dataHooks","audioPlayerPlayPause","timeIndicatorDriver","headingUniDriverFactory","audioTimeIndicator","baseUniDriverFactory","clickOnPlayPauseButton","click","timeIndicatorText","getText"],"sources":["../../../src/AudioPlayer/AudioPlayer.uni.driver.js"],"sourcesContent":["import {\n  baseUniDriverFactory,\n  findByHook,\n} from '../test-utils/utils/unidriver';\nimport { dataHooks } from './constants';\nimport { iconButtonDriverFactory } from '../IconButton/IconButton.uni.driver';\nimport { headingUniDriverFactory } from '../Heading/Heading.uni.driver';\n\n/**\n * Note: Testing AudioPlayer is not possible in JSdom due to the web audio API.\n */\nexport const audioPlayerDriverFactory = (base, body) => {\n  const playPauseButtonDriver = iconButtonDriverFactory(\n    findByHook(base, dataHooks.audioPlayerPlayPause),\n  );\n  const timeIndicatorDriver = headingUniDriverFactory(\n    findByHook(base, dataHooks.audioTimeIndicator),\n  );\n\n  return {\n    ...baseUniDriverFactory(base, body),\n\n    /**\n     * Clicks on play/pause button\n     * @return {Promise<void>}\n     */\n    clickOnPlayPauseButton: () => playPauseButtonDriver.click(),\n\n    /**\n     * Gets time indicator text\n     * @return {Promise<string>}\n     */\n    timeIndicatorText: () => timeIndicatorDriver.getText(),\n  };\n};\n"],"mappings":";;;;;;AAAA;AAIA;AACA;AACA;AAAwE;AAAA;AAExE;AACA;AACA;AACO,IAAMA,wBAAwB,GAAG,CAACC,IAAI,EAAEC,IAAI,KAAK;EACtD,IAAMC,qBAAqB,GAAG,IAAAC,sCAAuB,EACnD,IAAAC,qBAAU,EAACJ,IAAI,EAAEK,oBAAS,CAACC,oBAAoB,CAAC,CACjD;EACD,IAAMC,mBAAmB,GAAG,IAAAC,mCAAuB,EACjD,IAAAJ,qBAAU,EAACJ,IAAI,EAAEK,oBAAS,CAACI,kBAAkB,CAAC,CAC/C;EAED,uCACK,IAAAC,+BAAoB,EAACV,IAAI,EAAEC,IAAI,CAAC;IAEnC;AACJ;AACA;AACA;IACIU,sBAAsB,EAAE,MAAMT,qBAAqB,CAACU,KAAK,EAAE;IAE3D;AACJ;AACA;AACA;IACIC,iBAAiB,EAAE,MAAMN,mBAAmB,CAACO,OAAO;EAAE;AAE1D,CAAC;AAAC"}

package/dist/cjs/AudioPlayer/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.dataHooks = void 0;
+var dataHooks = {
+  audioPlayerPlayPause: 'audioPlayer-play-pause',
+  audioPlayerPlay: 'audioPlayer-play',
+  audioPlayerPause: 'audioPlayer-pause',
+  audioPlayerLoad: 'audioPlayer-load',
+  audioPlayerSlider: 'audioPlayer-slider',
+  audioPlayerSliderHandle: 'audioPlayer-slider-handle',
+  audioTimeIndicator: 'audioPlayer-time-indicator'
+};
+exports.dataHooks = dataHooks;
+//# sourceMappingURL=constants.js.map

package/dist/cjs/AudioPlayer/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dataHooks","audioPlayerPlayPause","audioPlayerPlay","audioPlayerPause","audioPlayerLoad","audioPlayerSlider","audioPlayerSliderHandle","audioTimeIndicator"],"sources":["../../../src/AudioPlayer/constants.js"],"sourcesContent":["export const dataHooks = {\n  audioPlayerPlayPause: 'audioPlayer-play-pause',\n  audioPlayerPlay: 'audioPlayer-play',\n  audioPlayerPause: 'audioPlayer-pause',\n  audioPlayerLoad: 'audioPlayer-load',\n  audioPlayerSlider: 'audioPlayer-slider',\n  audioPlayerSliderHandle: 'audioPlayer-slider-handle',\n  audioTimeIndicator: 'audioPlayer-time-indicator',\n};\n"],"mappings":";;;;AAAO,IAAMA,SAAS,GAAG;EACvBC,oBAAoB,EAAE,wBAAwB;EAC9CC,eAAe,EAAE,kBAAkB;EACnCC,gBAAgB,EAAE,mBAAmB;EACrCC,eAAe,EAAE,kBAAkB;EACnCC,iBAAiB,EAAE,oBAAoB;EACvCC,uBAAuB,EAAE,2BAA2B;EACpDC,kBAAkB,EAAE;AACtB,CAAC;AAAC"}

package/dist/cjs/AudioPlayer/index.d.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=index.d.js.map

package/dist/cjs/AudioPlayer/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/AudioPlayer/index.d.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface AudioPlayerProps {\n  dataHook?: string;\n  className?: string;\n  src: string;\n  format?: string;\n  preload?: 'metadata' | 'auto' | 'none';\n  autoplay?: boolean;\n  webAudioAPI?: boolean;\n  onLoad?(): void;\n  onLoadError?(errorMsg: string): void;\n  onPlay?(): void;\n  onPause?(): void;\n  onEnd?(): void;\n  onSeek?(): void;\n}\n\nexport type AudioPlayerImperativeActions = {\n  focus(): void;\n};\n\ndeclare const AudioPlayer: React.FC<\n  AudioPlayerProps & React.RefAttributes<AudioPlayerImperativeActions>\n>;\n\nexport default AudioPlayer;\n"],"mappings":""}

package/dist/cjs/AudioPlayer/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _AudioPlayer = _interopRequireDefault(require("./AudioPlayer.js"));
+exports.default = _AudioPlayer.default;
+//# sourceMappingURL=index.js.map

package/dist/cjs/AudioPlayer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/AudioPlayer/index.js"],"sourcesContent":["export { default } from './AudioPlayer.js';\n"],"mappings":";;;;;AAAA;AAA2C"}

package/dist/cjs/AudioPlayer/utils.js

@@ -0,0 +1,40 @@
+"use strict";
+
+exports.__esModule = true;
+exports.secondsToPosition = exports.secondsToISO = exports.positionToSeconds = exports.MAX_SECONDS = void 0;
+var ISOFormatHoursIndex = 11;
+var ISOFormatMinutesIndex = 14;
+var ISOFormatMinutesSingleDigitIndex = 15;
+var ISOFormatHoursLength = 8;
+var ISOFormatMinutesLength = 5;
+var ISOFormatMinutesSingleDigitLength = 4;
+var MAX_SECONDS = 8640000000000; //  https://262.ecma-international.org/5.1/#sec-15.9.1.1
+exports.MAX_SECONDS = MAX_SECONDS;
+var validSeconds = seconds => {
+  return seconds > MAX_SECONDS ? 0 : seconds;
+};
+var secondsToISO = (seconds, isLoaded, duration) => {
+  if (!isLoaded) {
+    return '--:--';
+  }
+  try {
+    var durationMinutes = Math.floor(duration / 60);
+    var durationHours = Math.floor(durationMinutes / 60);
+    var secondsInISOFormat = new Date(validSeconds(seconds) * 1000).toISOString();
+    if (durationHours > 0) {
+      return secondsInISOFormat.substr(ISOFormatHoursIndex, ISOFormatHoursLength);
+    }
+    if (durationMinutes > 9) {
+      return secondsInISOFormat.substr(ISOFormatMinutesIndex, ISOFormatMinutesLength);
+    }
+    return secondsInISOFormat.substr(ISOFormatMinutesSingleDigitIndex, ISOFormatMinutesSingleDigitLength);
+  } catch (ex) {
+    return '--:--';
+  }
+};
+exports.secondsToISO = secondsToISO;
+var positionToSeconds = (positionInPercentage, durationInSeconds) => positionInPercentage / 100 * durationInSeconds;
+exports.positionToSeconds = positionToSeconds;
+var secondsToPosition = (seekInSeconds, durationInSeconds) => seekInSeconds / durationInSeconds * 100;
+exports.secondsToPosition = secondsToPosition;
+//# sourceMappingURL=utils.js.map

package/dist/cjs/AudioPlayer/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ISOFormatHoursIndex","ISOFormatMinutesIndex","ISOFormatMinutesSingleDigitIndex","ISOFormatHoursLength","ISOFormatMinutesLength","ISOFormatMinutesSingleDigitLength","MAX_SECONDS","validSeconds","seconds","secondsToISO","isLoaded","duration","durationMinutes","Math","floor","durationHours","secondsInISOFormat","Date","toISOString","substr","ex","positionToSeconds","positionInPercentage","durationInSeconds","secondsToPosition","seekInSeconds"],"sources":["../../../src/AudioPlayer/utils.js"],"sourcesContent":["const ISOFormatHoursIndex = 11;\nconst ISOFormatMinutesIndex = 14;\nconst ISOFormatMinutesSingleDigitIndex = 15;\nconst ISOFormatHoursLength = 8;\nconst ISOFormatMinutesLength = 5;\nconst ISOFormatMinutesSingleDigitLength = 4;\nexport const MAX_SECONDS = 8640000000000; //  https://262.ecma-international.org/5.1/#sec-15.9.1.1\n\nconst validSeconds = seconds => {\n  return seconds > MAX_SECONDS ? 0 : seconds;\n};\n\nexport const secondsToISO = (seconds, isLoaded, duration) => {\n  if (!isLoaded) {\n    return '--:--';\n  }\n\n  try {\n    const durationMinutes = Math.floor(duration / 60);\n    const durationHours = Math.floor(durationMinutes / 60);\n    const secondsInISOFormat = new Date(\n      validSeconds(seconds) * 1000,\n    ).toISOString();\n\n    if (durationHours > 0) {\n      return secondsInISOFormat.substr(\n        ISOFormatHoursIndex,\n        ISOFormatHoursLength,\n      );\n    }\n\n    if (durationMinutes > 9) {\n      return secondsInISOFormat.substr(\n        ISOFormatMinutesIndex,\n        ISOFormatMinutesLength,\n      );\n    }\n\n    return secondsInISOFormat.substr(\n      ISOFormatMinutesSingleDigitIndex,\n      ISOFormatMinutesSingleDigitLength,\n    );\n  } catch (ex) {\n    return '--:--';\n  }\n};\n\nexport const positionToSeconds = (positionInPercentage, durationInSeconds) =>\n  (positionInPercentage / 100) * durationInSeconds;\n\nexport const secondsToPosition = (seekInSeconds, durationInSeconds) =>\n  (seekInSeconds / durationInSeconds) * 100;\n"],"mappings":";;;;AAAA,IAAMA,mBAAmB,GAAG,EAAE;AAC9B,IAAMC,qBAAqB,GAAG,EAAE;AAChC,IAAMC,gCAAgC,GAAG,EAAE;AAC3C,IAAMC,oBAAoB,GAAG,CAAC;AAC9B,IAAMC,sBAAsB,GAAG,CAAC;AAChC,IAAMC,iCAAiC,GAAG,CAAC;AACpC,IAAMC,WAAW,GAAG,aAAa,CAAC,CAAC;AAAA;AAE1C,IAAMC,YAAY,GAAGC,OAAO,IAAI;EAC9B,OAAOA,OAAO,GAAGF,WAAW,GAAG,CAAC,GAAGE,OAAO;AAC5C,CAAC;AAEM,IAAMC,YAAY,GAAG,CAACD,OAAO,EAAEE,QAAQ,EAAEC,QAAQ,KAAK;EAC3D,IAAI,CAACD,QAAQ,EAAE;IACb,OAAO,OAAO;EAChB;EAEA,IAAI;IACF,IAAME,eAAe,GAAGC,IAAI,CAACC,KAAK,CAACH,QAAQ,GAAG,EAAE,CAAC;IACjD,IAAMI,aAAa,GAAGF,IAAI,CAACC,KAAK,CAACF,eAAe,GAAG,EAAE,CAAC;IACtD,IAAMI,kBAAkB,GAAG,IAAIC,IAAI,CACjCV,YAAY,CAACC,OAAO,CAAC,GAAG,IAAI,CAC7B,CAACU,WAAW,EAAE;IAEf,IAAIH,aAAa,GAAG,CAAC,EAAE;MACrB,OAAOC,kBAAkB,CAACG,MAAM,CAC9BnB,mBAAmB,EACnBG,oBAAoB,CACrB;IACH;IAEA,IAAIS,eAAe,GAAG,CAAC,EAAE;MACvB,OAAOI,kBAAkB,CAACG,MAAM,CAC9BlB,qBAAqB,EACrBG,sBAAsB,CACvB;IACH;IAEA,OAAOY,kBAAkB,CAACG,MAAM,CAC9BjB,gCAAgC,EAChCG,iCAAiC,CAClC;EACH,CAAC,CAAC,OAAOe,EAAE,EAAE;IACX,OAAO,OAAO;EAChB;AACF,CAAC;AAAC;AAEK,IAAMC,iBAAiB,GAAG,CAACC,oBAAoB,EAAEC,iBAAiB,KACtED,oBAAoB,GAAG,GAAG,GAAIC,iBAAiB;AAAC;AAE5C,IAAMC,iBAAiB,GAAG,CAACC,aAAa,EAAEF,iBAAiB,KAC/DE,aAAa,GAAGF,iBAAiB,GAAI,GAAG;AAAC"}

package/dist/cjs/AutoComplete/AutoComplete.driver.d.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=AutoComplete.driver.d.js.map

package/dist/cjs/AutoComplete/AutoComplete.driver.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/AutoComplete/AutoComplete.driver.d.ts"],"sourcesContent":["import { InputWithOptionsDriver } from '../InputWithOptions/InputWithOptions.driver';\n\nexport interface AutoCompleteDriver extends InputWithOptionsDriver {}\n"],"mappings":""}

package/dist/cjs/AutoComplete/AutoComplete.driver.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _InputWithOptions = _interopRequireDefault(require("../InputWithOptions/InputWithOptions.driver"));
+var autoCompleteDriverFactory = _InputWithOptions.default;
+var _default = autoCompleteDriverFactory;
+exports.default = _default;
+//# sourceMappingURL=AutoComplete.driver.js.map

package/dist/cjs/AutoComplete/AutoComplete.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["autoCompleteDriverFactory","inputWithOptionsDriverFactory"],"sources":["../../../src/AutoComplete/AutoComplete.driver.js"],"sourcesContent":["import inputWithOptionsDriverFactory from '../InputWithOptions/InputWithOptions.driver';\n\nconst autoCompleteDriverFactory = inputWithOptionsDriverFactory;\n\nexport default autoCompleteDriverFactory;\n"],"mappings":";;;;;AAAA;AAEA,IAAMA,yBAAyB,GAAGC,yBAA6B;AAAC,eAEjDD,yBAAyB;AAAA"}

package/dist/cjs/AutoComplete/AutoComplete.js

@@ -0,0 +1,241 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _DropdownLayout = require("../DropdownLayout/DropdownLayout");
+var _Input = _interopRequireDefault(require("../Input"));
+var _InputWithOptions = _interopRequireWildcard(require("../InputWithOptions/InputWithOptions"));
+var _jsxFileName = "/home/builduser/work/31dad9578a4e06bb/packages/wix-design-system/dist/cjs/AutoComplete/AutoComplete.js";
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+class AutoComplete extends _InputWithOptions.default {
+  dropdownAdditionalProps() {
+    var {
+      options,
+      predicate,
+      emptyStateMessage
+    } = this.props;
+    var filterFunc = this.state.isEditing ? predicate : () => true;
+    var filtered = options.filter(filterFunc);
+    if (emptyStateMessage && filtered.length === 0) {
+      return {
+        options: [{
+          id: 'empty-state-message',
+          value: emptyStateMessage,
+          disabled: true
+        }]
+      };
+    } else {
+      return {
+        options: filtered
+      };
+    }
+  }
+}
+AutoComplete.displayName = 'AutoComplete';
+AutoComplete.propTypes = {
+  /** Associate a control with the regions that it controls.*/
+  ariaControls: _propTypes.default.string,
+  /** Associate a region with its descriptions. Similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space.*/
+  ariaDescribedby: _propTypes.default.string,
+  /** Define a string that labels the current element in case where a text label is not visible on the screen. */
+  ariaLabel: _propTypes.default.string,
+  /** Focus the element on mount (standard React input autoFocus). */
+  autoFocus: _propTypes.default.bool,
+  /** Control the border style of input. */
+  border: _propTypes.default.oneOf(['standard', 'round', 'bottomLine', 'none']),
+  /** Specifies a CSS class name to be appended to the component’s root element.*/
+  className: _propTypes.default.string,
+  /** Displays clear button (X) on a non-empty input. */
+  clearButton: _propTypes.default.bool,
+  /** Closes DropdownLayout when option is selected.*/
+  closeOnSelect: _propTypes.default.bool,
+  /** Applies a data-hook HTML attribute that can be used in the tests. */
+  dataHook: _propTypes.default.string,
+  /** Sets a default value for those who want to use this component un-controlled. */
+  defaultValue: _propTypes.default.string,
+  /** Specifies whether input should be disabled or not. */
+  disabled: _propTypes.default.bool,
+  /** Restricts input editing.*/
+  disableEditing: _propTypes.default.bool,
+  /** Sets the width of the dropdown in pixels.*/
+  dropdownWidth: _propTypes.default.string,
+  /** Defines a message to be displayed instead of options when no options exist or no options pass the predicate filter function. */
+  emptyStateMessage: _propTypes.default.node,
+  /** Adds a fixed footer container at the bottom of options list in `<DropdownLayout/>`.*/
+  fixedFooter: _propTypes.default.node,
+  /** Adds a fixed header container at the top of options list in `<DropdownLayout/>`.*/
+  fixedHeader: _propTypes.default.node,
+  /** Highlights and scrolls view to the specified option when dropdown layout is opened. It does not select the specified option. */
+  focusOnOption: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  /** Scrolls view to the selected option when dropdown layout is opened. */
+  focusOnSelectedOption: _propTypes.default.bool,
+  /** USED FOR TESTING. Forces focus state on the input. */
+  forceFocus: _propTypes.default.bool,
+  /** USED FOR TESTING. Forces hover state on the input.*/
+  forceHover: _propTypes.default.bool,
+  /** Specifies whether there are more items to be loaded. */
+  hasMore: _propTypes.default.bool,
+  /** Specifies whether status suffix should be hidden.*/
+  hideStatusSuffix: _propTypes.default.bool,
+  /** Highlight word parts that match search criteria in bold.  */
+  highlight: _propTypes.default.bool,
+  /** Assigns an unique identifier for the root element. */
+  id: _propTypes.default.string,
+  /** Specifies whether lazy loading of the dropdown layout items is enabled. */
+  infiniteScroll: _propTypes.default.bool,
+  /** Defines a callback function which is called on a request to render more list items. */
+  loadMore: _propTypes.default.func,
+  /**
+   * ##### Sets the default hover behavior:
+   *  * `false` - no initially hovered list item
+   *  * `true` - hover first selectable option
+   *  *  any `number/string` - specify the id of an option to be hovered
+   */
+  markedOption: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string, _propTypes.default.number]),
+  /** Sets the maximum height of the dropdownLayout in pixels. */
+  maxHeightPixels: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  /** Sets the maximum number of characters that can be entered into a field.*/
+  maxLength: _propTypes.default.number,
+  /** Specifies whether input should have a dropdown menu arrow on the right side. */
+  menuArrow: _propTypes.default.bool,
+  /** Sets the minimum width of dropdownLayout in pixels. */
+  minWidthPixels: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  /** Reference element data when a form is submitted. */
+  name: _propTypes.default.string,
+  /** Specifies whether input shouldn’t have rounded corners on its left. */
+  noLeftBorderRadius: _propTypes.default.bool,
+  /** Specifies whether input shouldn’t have rounded corners on its right.*/
+  noRightBorderRadius: _propTypes.default.bool,
+  /** Defines a standard input onBlur callback */
+  onBlur: _propTypes.default.func,
+  /** Defines a standard input onChange callback.*/
+  onChange: _propTypes.default.func,
+  /** Displays clear button (X) on a non-empty input and calls a callback function with no arguments.*/
+  onClear: _propTypes.default.func,
+  /** Defines a callback function which is called whenever the user presses the escape key. */
+  onClose: _propTypes.default.func,
+  /** Defines a callback function called on compositionstart/compositionend events.*/
+  onCompositionChange: _propTypes.default.func,
+  /** Defines a callback handler that is called when user presses `enter`.*/
+  onEnterPressed: _propTypes.default.func,
+  /** Defines a callback handler that is called when user presses `escape`.*/
+  onEscapePressed: _propTypes.default.func,
+  /** Defines a standard input onFocus callback. */
+  onFocus: _propTypes.default.func,
+  /** Defines a standard input onClick callback.*/
+  onInputClicked: _propTypes.default.func,
+  /** Defines a standard input onKeyUp callback. */
+  onKeyDown: _propTypes.default.func,
+  /** Defines a callback function which is called when user performs a submit action. Submit action triggers are: "Enter", "Tab", [typing any defined delimiters], paste action. `onManuallyInput(values: Array): void - The array of strings is the result of splitting the input value by the given delimiters.*/
+  onManuallyInput: _propTypes.default.func,
+  /** Defines a callback function which is called whenever the user enters dropdown layout with the mouse cursor. */
+  onMouseEnter: _propTypes.default.func,
+  /** Defines a callback function which is called whenever the user exits from dropdown layout with a mouse cursor.*/
+  onMouseLeave: _propTypes.default.func,
+  /** Defines a callback function which is called whenever an option becomes focused (hovered/active). Receives the relevant option object from the original props.options array.*/
+  onOptionMarked: _propTypes.default.func,
+  /** Defines a callback function which is called when options dropdown is hidden.*/
+  onOptionsHide: _propTypes.default.func,
+  /** Defines a callback function which is called when options dropdown is shown.*/
+  onOptionsShow: _propTypes.default.func,
+  /** Defines a callback handler that is called when user pastes text from a clipboard (using mouse or keyboard shortcut).*/
+  onPaste: _propTypes.default.func,
+  /** Defines a callback function which is called whenever user selects a different option in the list.*/
+  onSelect: _propTypes.default.func,
+  /** Specify an array of options:
+   * - id `<string / number>` *required*: the id of the option, should be unique.
+   * - value `<function / string / node>` *required*: can be a string, react element or a builder function.
+   * - disabled `<bool>` *default value- false*: whether this option is disabled or not
+   * - linkTo `<string>`: when provided the option will be an anchor to the given value
+   * - title `<bool>`  *default value- false*  **deprecated**: please use `listItemSectionBuilder` for rendering a title.
+   * - overrideStyle `<bool>` *default value- false*  **deprecated**: please use `overrideOptionStyle` for override option styles.
+   * - overrideOptionStyle `<bool>` *default value- false* - when set to `true`, the option will be responsible to its own styles. No styles will be applied from the DropdownLayout itself.
+   * - label `<string>`: the string displayed within an input when the option is selected. This is used when using `<DropdownLayout/>` with an `<Input/>`.
+   */
+  options: _propTypes.default.arrayOf(_DropdownLayout.optionValidator),
+  /** Handles container overflow. */
+  overflow: _propTypes.default.string,
+  /** Sets a pattern that typed value must match to be valid (regex). */
+  pattern: _propTypes.default.string,
+  /** Sets a placeholder message to display. */
+  placeholder: _propTypes.default.string,
+  /** Allows to pass all common popover props. */
+  popoverProps: _propTypes.default.shape({
+    appendTo: _propTypes.default.oneOf(['window', 'scrollParent', 'parent', 'viewport']),
+    maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    minWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    flip: _propTypes.default.bool,
+    fixed: _propTypes.default.bool,
+    placement: _propTypes.default.oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']),
+    dynamicWidth: _propTypes.default.bool
+  }),
+  /** Defines a callback predicate for the filtering options function. */
+  predicate: _propTypes.default.func,
+  /** Pass a component you want to show as the prefix of the input, e.g., text string, icon. */
+  prefix: _propTypes.default.node,
+  /** Specifies whether input is read only. */
+  readOnly: _propTypes.default.bool,
+  /** Specifies whether input is mandatory. */
+  required: _propTypes.default.bool,
+  /** Specifies selected option by its id. */
+  selectedId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  /** Controls whether to show options if input is empty. */
+  showOptionsIfEmptyInput: _propTypes.default.bool,
+  /** Controls the size of the input. Default value: `medium` */
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  /** Specify the status of a field. */
+  status: _propTypes.default.oneOf(['error', 'warning', 'loading']),
+  /** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
+  statusMessage: _propTypes.default.node,
+  /** Pass a component you want to show as the suffix of the input, e.g., text string, icon. */
+  suffix: _propTypes.default.node,
+  /**  Indicates that element can be focused and where it participates in sequential keyboard navigation.*/
+  tabIndex: _propTypes.default.number,
+  /** Handles text overflow behavior. It can either clip (default) or display ellipsis. */
+  textOverflow: _propTypes.default.string,
+  /** Controls placement of a status tooltip. */
+  tooltipPlacement: _propTypes.default.string,
+  /** Specifies the type of `<input/>` element to display. Default is text string. */
+  type: _propTypes.default.string
+};
+AutoComplete.defaultProps = {
+  predicate: () => true,
+  autoSelect: true,
+  border: 'standard',
+  clearButton: false,
+  closeOnSelect: true,
+  dropdownOffsetLeft: '0',
+  dropdownWidth: null,
+  hasMore: false,
+  hideStatusSuffix: false,
+  inContainer: false,
+  infiniteScroll: false,
+  loadMore: null,
+  markedOption: false,
+  maxHeightPixels: 260,
+  maxLength: 524288,
+  options: [],
+  overflow: 'auto',
+  selectedHighlight: true,
+  showOptionsIfEmptyInput: true,
+  textOverflow: 'clip',
+  onSelect: () => {},
+  inputElement: /*#__PURE__*/_react.default.createElement(_Input.default, {
+    __self: AutoComplete,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 226,
+      columnNumber: 19
+    }
+  }),
+  popoverProps: _InputWithOptions.DEFAULT_POPOVER_PROPS,
+  tabIndex: 0,
+  autocomplete: 'off,chrome-off'
+};
+var _default = AutoComplete;
+exports.default = _default;
+//# sourceMappingURL=AutoComplete.js.map