@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 react$1 = require('@emotion/react');
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('@emotion/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 jsxRuntime.jsx("option", {
      value: opt.value,
      disabled: opt.disabled,
      children: opt.label
    }, opt.value);
  }, []);
  return jsxRuntime.jsxs(textInput.InputContainer, {
    children: [jsxRuntime.jsx(Indicator, {}), jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), a11yProps), {}, {
      as: "select",
      css: react$1.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 ? jsxRuntime.jsx("option", {
        value: "",
        disabled: true,
        children: placeholder
      }) : null, optionsOrGroups.map(function (optionOrGroup) {
        if ('options' in optionOrGroup) {
          return 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 jsxRuntime.jsx(box.Box, {
    position: "absolute",
    top: 0,
    bottom: 0,
    right: 0,
    display: "flex",
    alignItems: "center",
    padding: "medium",
    css: react$1.css({
      pointerEvents: 'none'
    }),
    children: 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;