<script>import { connectSortBy } from "instantsearch.js/es/connectors";
import connect from "../connect";
import { cx } from "../utils";
export let items;
export let transformItems = void 0;
export let classes = {};
const state = connect(
  connectSortBy,
  {
    items,
    transformItems
  },
  { $$widgetType: "svelte-ais.sortBy" }
);
$:
  ({ currentRefinement, options, refine } = $state);
</script>

<div class={cx("ais-SortBy", classes.root)}>
  <select
    class={cx("ais-SortBy-select", classes.select)}
    on:change={({ currentTarget: { value } }) => refine(value)}
    value={currentRefinement}
  >
    {#each options as option}
      <option class={cx("ais-SortBy-option", classes.option)} value={option.value}>
        {option.label}
      </option>
    {/each}
  </select>
</div>
