Generated by XState Viz: https://xstate.js.org/viz

machine.js

// Available variables:
// Machine (machine factory function)
// assign (action)
// XState (all XState exports)

const fetchMachine = Machine({
  id: "theWholeSelect",
  initial: "init",
  context: {
    currentValueToShow: null,
    selectedValue: null,

    isDesktop: true,
    placeholder: "some placeholder"
  },
  states: {
    init: {
      on: {
        INIT: {
          actions: "initializeContext",
          target: "closed"
        }
      }
    },
    closed: {
      on: {
        OPEN: [
          {target: 'opened.custom', cond: 'isDesktop'},
          {target: 'opened.native' }
          ]
      }
    },

    opened: {

      
      states: {
        custom: {},
        native: {},
      },
      on: {
        CLOSE: 'closed',
        SELECT: {
          actions: ['setSelectedValue', 'setCurrentValueToShow'],
          target: 'closed'
        }
      }
    }
  },

  guards: {
    isDesktop: ctx => !!ctx.isDesktop
  },
  actions: {
    initializeContext: (ctx, event) =>
      assign(event.context),
       setSelectedValue: (ctx, event) =>
      assign({selectedValue: event.value}),
      setCurrentValueToShow: (ctx, event) =>
      assign({currentValueToShow: event.value})
  }
});