@spark-web/select/dist/spark-web-select.esm.js

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

import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
import { css } from '@emotion/react';
import { Box } from '@spark-web/box';
import { useFieldContext } from '@spark-web/field';
import { ChevronDownIcon } from '@spark-web/icon';
import { InputContainer, useInputStyles } from '@spark-web/text-input';
import { useTheme } from '@spark-web/theme';
import { forwardRef, useCallback } from 'react';
import { jsx, jsxs } from '@emotion/react/jsx-runtime';

var Select = /*#__PURE__*/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 = 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 = useCallback(function (opt) {
    return jsx("option", {
      value: opt.value,
      disabled: opt.disabled,
      children: opt.label
    }, opt.value);
  }, []);
  return jsxs(InputContainer, {
    children: [jsx(Indicator, {}), jsxs(Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), a11yProps), {}, {
      as: "select",
      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 ? jsx("option", {
        value: "",
        disabled: true,
        children: placeholder
      }) : null, optionsOrGroups.map(function (optionOrGroup) {
        if ('options' in optionOrGroup) {
          return 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 jsx(Box, {
    position: "absolute",
    top: 0,
    bottom: 0,
    right: 0,
    display: "flex",
    alignItems: "center",
    padding: "medium",
    css: css({
      pointerEvents: 'none'
    }),
    children: jsx(ChevronDownIcon, {
      size: "xxsmall",
      tone: "placeholder"
    })
  });
};
function useSelectStyles(props) {
  var _useInputStyles = useInputStyles(props),
    _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
    boxProps = _useInputStyles2[0],
    inputStyles = _useInputStyles2[1];
  var theme = useTheme();
  return [boxProps, _objectSpread(_objectSpread({}, inputStyles), {}, {
    // Prevent text going underneath the chevron icon
    paddingRight: theme.sizing.xxsmall +
    // size of chevron icon
    theme.spacing.medium * 2 // paddingX value
  })];
}

export { Select };