@spark-web/select/dist/spark-web-select.cjs.dev.js

--- title: Select storybookPath: forms-select--default isExperimentalPackage: false ---

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var css = require('@emotion/css');
var box = require('@spark-web/box');
var field = require('@spark-web/field');
var icon = require('@spark-web/icon');
var textInput = require('@spark-web/text-input');
var theme = require('@spark-web/theme');
var react = require('react');
var jsxRuntime = require('react/jsx-runtime');

var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
  var data = _ref.data,
      defaultValue = _ref.defaultValue,
      name = _ref.name,
      onBlur = _ref.onBlur,
      onChange = _ref.onChange,
      optionsOrGroups = _ref.options,
      placeholder = _ref.placeholder,
      required = _ref.required,
      value = _ref.value;

  var _useFieldContext = field.useFieldContext(),
      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
      _useFieldContext2$ = _useFieldContext2[0],
      disabled = _useFieldContext2$.disabled,
      invalid = _useFieldContext2$.invalid,
      a11yProps = _useFieldContext2[1];

  var _useSelectStyles = useSelectStyles({
    disabled: disabled,
    invalid: invalid
  }),
      _useSelectStyles2 = _slicedToArray(_useSelectStyles, 2),
      boxProps = _useSelectStyles2[0],
      inputStyles = _useSelectStyles2[1];

  var mapOptions = react.useCallback(function (opt) {
    return /*#__PURE__*/jsxRuntime.jsx("option", {
      value: opt.value,
      disabled: opt.disabled,
      children: opt.label
    }, opt.value);
  }, []);
  return /*#__PURE__*/jsxRuntime.jsxs(textInput.InputContainer, {
    children: [/*#__PURE__*/jsxRuntime.jsx(Indicator, {}), /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), a11yProps), {}, {
      as: "select",
      className: css.css(inputStyles),
      data: data,
      defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
      disabled: disabled,
      name: name,
      onBlur: onBlur,
      onChange: onChange,
      ref: forwardedRef,
      required: required,
      value: value,
      width: "full",
      children: [!value || placeholder ? /*#__PURE__*/jsxRuntime.jsx("option", {
        value: "",
        disabled: true,
        children: placeholder
      }) : null, optionsOrGroups.map(function (optionOrGroup) {
        if ('options' in optionOrGroup) {
          return /*#__PURE__*/jsxRuntime.jsx("optgroup", {
            label: optionOrGroup.label,
            children: optionOrGroup.options.map(function (option) {
              return mapOptions(option);
            })
          }, optionOrGroup.label);
        }

        return mapOptions(optionOrGroup);
      })]
    }))]
  });
});
Select.displayName = 'Select';

var Indicator = function Indicator() {
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
    position: "absolute",
    top: 0,
    bottom: 0,
    right: 0,
    display: "flex",
    alignItems: "center",
    padding: "medium",
    className: css.css({
      pointerEvents: 'none'
    }),
    children: /*#__PURE__*/jsxRuntime.jsx(icon.ChevronDownIcon, {
      size: "xxsmall",
      tone: "placeholder"
    })
  });
};

function useSelectStyles(props) {
  var _useInputStyles = textInput.useInputStyles(props),
      _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
      boxProps = _useInputStyles2[0],
      inputStyles = _useInputStyles2[1];

  var theme$1 = theme.useTheme();
  return [boxProps, _objectSpread(_objectSpread({}, inputStyles), {}, {
    // Prevent text going underneath the chevron icon
    paddingRight: theme$1.sizing.xxsmall + // size of chevron icon
    theme$1.spacing.medium * 2 // paddingX value

  })];
}

exports.Select = Select;