@spark-web/select 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,22 @@
+# @spark-web/select
+
+## 1.0.0
+
+### Major Changes
+
+- [#27](https://github.com/brighte-labs/spark-web/pull/27)
+  [`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
+  Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
+
+### Patch Changes
+
+- Updated dependencies
+  [[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
+  - @spark-web/a11y@1.0.0
+  - @spark-web/box@1.0.0
+  - @spark-web/field@1.0.0
+  - @spark-web/icon@1.0.0
+  - @spark-web/text@1.0.0
+  - @spark-web/text-input@1.0.0
+  - @spark-web/theme@1.0.0
+  - @spark-web/utils@1.0.0

package/README.md

@@ -0,0 +1,139 @@
+---
+title: Select
+storybookPath: forms-select--default
+---
+
+Allows the user to make a single selection from a list of values — usually in a
+form. If only a few options are provided, consider using a `RadioButton`
+instead.
+
+## Usage
+
+### Field
+
+Each select input must be accompanied by a Field with a label. Effective form
+labeling helps inform users which selection to make.
+
+## Examples
+
+### Controlled
+
+A `<Select>` can be both controlled and uncontrolled. To control a `<Select>`
+provide a `value`, as well as an `onChange` function to set the new value when
+the select is updated.
+
+```jsx live
+const [selectedOption, setSelectedOption] = React.useState('');
+
+const options = [
+  { label: 'NSW', value: 'nsw' },
+  { label: 'VIC', value: 'vic' },
+  { label: 'QLD', value: 'qld' },
+  { label: 'SA', value: 'sa' },
+  { label: 'WA', value: 'wa' },
+  { label: 'TAS', value: 'tas' },
+  { label: 'NT', value: 'nt' },
+  { label: 'ACT', value: 'act' },
+];
+
+return (
+  <Stack gap="large">
+    <Field label="State">
+      <Select
+        placeholder="Choose a state..."
+        value={selectedOption}
+        onChange={event => setSelectedOption(event.target.value)}
+        options={options}
+        required
+      />
+    </Field>
+    {selectedOption && (
+      <Text>
+        You have selected{' '}
+        {options.find(option => option.value === selectedOption).label}
+      </Text>
+    )}
+  </Stack>
+);
+```
+
+### Uncontrolled
+
+The `<Select>`, by default, is an uncontrolled component, meaning that the form
+data is controlled directly by the DOM itself. To access the value, instead of
+writing an `onChange` handler, you would use a `ref` to get form values from the
+DOM.
+
+```jsx live
+<Field label="Breaking Bad Characters">
+  <Select
+    options={[
+      { label: 'Walter White', value: 'walter-white' },
+      { label: 'Jesse Pinkman', value: 'jesse-pinkman' },
+      { label: 'Saul Goodman', value: 'saul-goodman' },
+      { label: 'Gus Fring', value: 'gus-fring' },
+      { label: 'Hank Schrader', value: 'hank-schrader' },
+      { label: 'Mike Ehrmantraut', value: 'mike-ehrmantraut' },
+    ]}
+  />
+</Field>
+```
+
+### Groups
+
+Related options can be grouped by passing in an array of objects with a label
+and option key — where each option is an array of objects with label, value and
+(optionally) disabled keys. Internally this uses the
+[`<optgroup>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup).
+
+```jsx live
+const [selectedOption, setSelectedOption] = React.useState('');
+
+return (
+  <Field label="Select">
+    <Select
+      placeholder="TV Characters"
+      options={[
+        {
+          label: 'Mad Men',
+          options: [
+            { label: 'Don Draper', value: 'don-draper' },
+            { label: 'Peggy Olson', value: 'peggy-olson' },
+            { label: 'Joan Harris', value: 'joan-harris' },
+            { label: 'Roger Sterling', value: 'roger-sterling' },
+            { label: 'Pete Campbell', value: 'pete-campbell' },
+          ],
+        },
+        {
+          label: 'Breaking Bad',
+          options: [
+            { label: 'Walter White', value: 'walter-white' },
+            { label: 'Jesse Pinkman', value: 'jesse-pinkman' },
+            { label: 'Saul Goodman', value: 'saul-goodman' },
+            { label: 'Gus Fring', value: 'gus-fring' },
+            { label: 'Hank Schrader', value: 'hank-schrader' },
+            { label: 'Mike Ehrmantraut', value: 'mike-ehrmantraut' },
+          ],
+        },
+      ]}
+    />
+  </Field>
+);
+```
+
+## Props
+
+| Prop          | Type                                         | Default | Description                                                                            |
+| ------------- | -------------------------------------------- | ------- | -------------------------------------------------------------------------------------- |
+| data?         | [DataAttributeMap][data-attribute-map]       |         | Sets data attributes on the component.                                                 |
+| options       | Readonly<Array<Option \| Group\>>            |         | The values that can be selected by the input.                                          |
+| placeholder?  | string                                       |         | Placeholder text for when the input does not have an initial value.                    |
+| defaultValue? | string \| number \| readonly string[]        |         | Default value of the select.                                                           |
+| name?         | string                                       |         | This attribute is used to specify the name of the control.                             |
+| onBlur?       | React.FocusEventHandler<HTMLSelectElement\>  |         | Function for handling change events.                                                   |
+| onChange?     | React.ChangeEventHandler<HTMLSelectElement\> |         | Function for handling blur events.                                                     |
+| required?     | boolean                                      |         | Boolean that indicating that an option with a non-empty string value must be selected. |
+| value         | string \| number \| readonly string[]        |         | Value of the select.                                                                   |
+
+[data-attribute-map]:
+  https://bitbucket.org/brighte-energy/energy/src/14a694872cc43bb454981bada65f5f12b56f77c9/spark-web/packages/utils-spark/src/buildDataAttributes.ts#spark-web/packages/utils-spark/src/buildDataAttributes.ts-1

package/dist/declarations/src/Select.d.ts

@@ -0,0 +1,23 @@
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import * as React from 'react';
+declare type Option = {
+    disabled?: boolean;
+    label: string;
+    value: string | number;
+};
+declare type Group = {
+    options: Array<Option>;
+    label: string;
+};
+export declare type OptionsOrGroups = Array<Option | Group>;
+export declare type SelectProps = Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'defaultValue' | 'name' | 'onBlur' | 'onChange' | 'required' | 'value'> & {
+    data?: DataAttributeMap;
+    options: OptionsOrGroups;
+    placeholder?: string;
+};
+export declare const Select: React.ForwardRefExoticComponent<Pick<React.SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue" | "onBlur" | "onChange" | "name" | "required"> & {
+    data?: DataAttributeMap | undefined;
+    options: OptionsOrGroups;
+    placeholder?: string | undefined;
+} & React.RefAttributes<HTMLSelectElement>>;
+export {};

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps } from './Select';

package/dist/spark-web-select.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./declarations/src/index";

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

@@ -0,0 +1,144 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
+var _extends = require('@babel/runtime/helpers/esm/extends');
+var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
+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 internal = require('@spark-web/utils/internal');
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _excluded = ["disabled", "invalid"];
+var __jsx = React__namespace.createElement;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Select = /*#__PURE__*/React__namespace.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(),
+      disabled = _useFieldContext.disabled,
+      invalid = _useFieldContext.invalid,
+      a11yProps = _objectWithoutProperties(_useFieldContext, _excluded);
+
+  var styles = useSelectStyles({
+    disabled: disabled,
+    invalid: invalid
+  });
+  var mapOptions = React__namespace.useCallback(function (opt) {
+    return __jsx("option", {
+      key: opt.value,
+      value: opt.value,
+      disabled: opt.disabled
+    }, opt.label);
+  }, []);
+  return __jsx(box.Box, {
+    position: "relative"
+  }, __jsx(box.Box, _extends({}, a11yProps, data ? internal.buildDataAttributes(data) : null, {
+    as: "select",
+    defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
+    disabled: disabled,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    ref: forwardedRef,
+    required: required,
+    value: value // Styles
+    ,
+    background: disabled ? 'inputDisabled' : 'input',
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    paddingX: "medium",
+    height: "medium",
+    width: "full",
+    className: css.css(styles)
+  }), placeholder && __jsx("option", {
+    value: "",
+    disabled: true
+  }, placeholder), optionsOrGroups.map(function (optionOrGroup) {
+    if ('options' in optionOrGroup) {
+      return __jsx("optgroup", {
+        key: optionOrGroup.label,
+        label: optionOrGroup.label
+      }, optionOrGroup.options.map(function (option) {
+        return mapOptions(option);
+      }));
+    }
+
+    return mapOptions(optionOrGroup);
+  })), __jsx(box.Box, {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    right: 0,
+    display: "flex",
+    alignItems: "center",
+    padding: "medium",
+    className: css.css({
+      pointerEvents: 'none'
+    })
+  }, __jsx(icon.ChevronDownIcon, {
+    size: "xxsmall",
+    tone: "placeholder"
+  })));
+});
+Select.displayName = 'Select';
+
+function useSelectStyles(_ref2) {
+  var disabled = _ref2.disabled,
+      invalid = _ref2.invalid;
+  var theme$1 = theme.useTheme();
+  var inputStyles = textInput.useInput({
+    disabled: disabled,
+    invalid: invalid
+  });
+  return _objectSpread(_objectSpread({}, inputStyles), {}, {
+    overflow: 'hidden',
+    // fix for Safari to prevent unwanted scrolling of parent container to occur
+    textOverflow: 'ellipsis',
+    // Prevent text going underneath the chevron icon
+    paddingRight: theme$1.sizing.xxsmall + // size of chevron icon
+    theme$1.spacing.medium * 2,
+    // paddingX value
+    ':invalid': {
+      color: theme$1.color.foreground.muted
+    }
+  });
+}
+
+exports.Select = Select;

package/dist/spark-web-select.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./spark-web-select.cjs.prod.js");
+} else {
+  module.exports = require("./spark-web-select.cjs.dev.js");
+}

package/dist/spark-web-select.cjs.prod.js

@@ -0,0 +1,144 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/esm/defineProperty');
+var _extends = require('@babel/runtime/helpers/esm/extends');
+var _objectWithoutProperties = require('@babel/runtime/helpers/esm/objectWithoutProperties');
+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 internal = require('@spark-web/utils/internal');
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _excluded = ["disabled", "invalid"];
+var __jsx = React__namespace.createElement;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Select = /*#__PURE__*/React__namespace.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(),
+      disabled = _useFieldContext.disabled,
+      invalid = _useFieldContext.invalid,
+      a11yProps = _objectWithoutProperties(_useFieldContext, _excluded);
+
+  var styles = useSelectStyles({
+    disabled: disabled,
+    invalid: invalid
+  });
+  var mapOptions = React__namespace.useCallback(function (opt) {
+    return __jsx("option", {
+      key: opt.value,
+      value: opt.value,
+      disabled: opt.disabled
+    }, opt.label);
+  }, []);
+  return __jsx(box.Box, {
+    position: "relative"
+  }, __jsx(box.Box, _extends({}, a11yProps, data ? internal.buildDataAttributes(data) : null, {
+    as: "select",
+    defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
+    disabled: disabled,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    ref: forwardedRef,
+    required: required,
+    value: value // Styles
+    ,
+    background: disabled ? 'inputDisabled' : 'input',
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    paddingX: "medium",
+    height: "medium",
+    width: "full",
+    className: css.css(styles)
+  }), placeholder && __jsx("option", {
+    value: "",
+    disabled: true
+  }, placeholder), optionsOrGroups.map(function (optionOrGroup) {
+    if ('options' in optionOrGroup) {
+      return __jsx("optgroup", {
+        key: optionOrGroup.label,
+        label: optionOrGroup.label
+      }, optionOrGroup.options.map(function (option) {
+        return mapOptions(option);
+      }));
+    }
+
+    return mapOptions(optionOrGroup);
+  })), __jsx(box.Box, {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    right: 0,
+    display: "flex",
+    alignItems: "center",
+    padding: "medium",
+    className: css.css({
+      pointerEvents: 'none'
+    })
+  }, __jsx(icon.ChevronDownIcon, {
+    size: "xxsmall",
+    tone: "placeholder"
+  })));
+});
+Select.displayName = 'Select';
+
+function useSelectStyles(_ref2) {
+  var disabled = _ref2.disabled,
+      invalid = _ref2.invalid;
+  var theme$1 = theme.useTheme();
+  var inputStyles = textInput.useInput({
+    disabled: disabled,
+    invalid: invalid
+  });
+  return _objectSpread(_objectSpread({}, inputStyles), {}, {
+    overflow: 'hidden',
+    // fix for Safari to prevent unwanted scrolling of parent container to occur
+    textOverflow: 'ellipsis',
+    // Prevent text going underneath the chevron icon
+    paddingRight: theme$1.sizing.xxsmall + // size of chevron icon
+    theme$1.spacing.medium * 2,
+    // paddingX value
+    ':invalid': {
+      color: theme$1.color.foreground.muted
+    }
+  });
+}
+
+exports.Select = Select;

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

@@ -0,0 +1,120 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _extends from '@babel/runtime/helpers/esm/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { css } from '@emotion/css';
+import { Box } from '@spark-web/box';
+import { useFieldContext } from '@spark-web/field';
+import { ChevronDownIcon } from '@spark-web/icon';
+import { useInput } from '@spark-web/text-input';
+import { useTheme } from '@spark-web/theme';
+import { buildDataAttributes } from '@spark-web/utils/internal';
+import * as React from 'react';
+
+var _excluded = ["disabled", "invalid"];
+var __jsx = React.createElement;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 = useFieldContext(),
+      disabled = _useFieldContext.disabled,
+      invalid = _useFieldContext.invalid,
+      a11yProps = _objectWithoutProperties(_useFieldContext, _excluded);
+
+  var styles = useSelectStyles({
+    disabled: disabled,
+    invalid: invalid
+  });
+  var mapOptions = React.useCallback(function (opt) {
+    return __jsx("option", {
+      key: opt.value,
+      value: opt.value,
+      disabled: opt.disabled
+    }, opt.label);
+  }, []);
+  return __jsx(Box, {
+    position: "relative"
+  }, __jsx(Box, _extends({}, a11yProps, data ? buildDataAttributes(data) : null, {
+    as: "select",
+    defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
+    disabled: disabled,
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    ref: forwardedRef,
+    required: required,
+    value: value // Styles
+    ,
+    background: disabled ? 'inputDisabled' : 'input',
+    border: invalid ? 'critical' : 'field',
+    borderRadius: "small",
+    paddingX: "medium",
+    height: "medium",
+    width: "full",
+    className: css(styles)
+  }), placeholder && __jsx("option", {
+    value: "",
+    disabled: true
+  }, placeholder), optionsOrGroups.map(function (optionOrGroup) {
+    if ('options' in optionOrGroup) {
+      return __jsx("optgroup", {
+        key: optionOrGroup.label,
+        label: optionOrGroup.label
+      }, optionOrGroup.options.map(function (option) {
+        return mapOptions(option);
+      }));
+    }
+
+    return mapOptions(optionOrGroup);
+  })), __jsx(Box, {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    right: 0,
+    display: "flex",
+    alignItems: "center",
+    padding: "medium",
+    className: css({
+      pointerEvents: 'none'
+    })
+  }, __jsx(ChevronDownIcon, {
+    size: "xxsmall",
+    tone: "placeholder"
+  })));
+});
+Select.displayName = 'Select';
+
+function useSelectStyles(_ref2) {
+  var disabled = _ref2.disabled,
+      invalid = _ref2.invalid;
+  var theme = useTheme();
+  var inputStyles = useInput({
+    disabled: disabled,
+    invalid: invalid
+  });
+  return _objectSpread(_objectSpread({}, inputStyles), {}, {
+    overflow: 'hidden',
+    // fix for Safari to prevent unwanted scrolling of parent container to occur
+    textOverflow: 'ellipsis',
+    // Prevent text going underneath the chevron icon
+    paddingRight: theme.sizing.xxsmall + // size of chevron icon
+    theme.spacing.medium * 2,
+    // paddingX value
+    ':invalid': {
+      color: theme.color.foreground.muted
+    }
+  });
+}
+
+export { Select };

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@spark-web/select",
+  "license": "MIT",
+  "version": "1.0.0",
+  "main": "dist/spark-web-select.cjs.js",
+  "module": "dist/spark-web-select.esm.js",
+  "devDependencies": {
+    "@types/react": "^17.0.12"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.14.6",
+    "@emotion/css": "^11.7.1",
+    "@spark-web/a11y": "^1.0.0",
+    "@spark-web/box": "^1.0.0",
+    "@spark-web/field": "^1.0.0",
+    "@spark-web/icon": "^1.0.0",
+    "@spark-web/text": "^1.0.0",
+    "@spark-web/text-input": "^1.0.0",
+    "@spark-web/theme": "^1.0.0",
+    "@spark-web/utils": "^1.0.0",
+    "react": "^17.0.2"
+  },
+  "engines": {
+    "node": ">= 14.13"
+  }
+}

package/src/Select.stories.tsx

@@ -0,0 +1,37 @@
+import { Field } from '@spark-web/field';
+import { InformationCircleIcon } from '@spark-web/icon';
+import { Inline } from '@spark-web/inline';
+import { Stack } from '@spark-web/stack';
+import { Text } from '@spark-web/text';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import type { SelectProps } from './Select';
+import { Select } from './Select';
+
+export default {
+  title: 'Forms / Select',
+  component: Select,
+} as ComponentMeta<typeof Select>;
+
+const SelectStory: ComponentStory<typeof Select> = (args: SelectProps) => (
+  <Stack gap="large">
+    <Inline gap="xsmall" alignY="center">
+      <InformationCircleIcon tone="info" size="xsmall" />
+      <Text weight="medium" tone="info" baseline={false}>
+        {`Must be used inside of a <Field/>`}
+      </Text>
+    </Inline>
+    <Field label="Select input">
+      <Select options={args.options} />
+    </Field>
+  </Stack>
+);
+export const Default = SelectStory.bind({});
+
+Default.args = {
+  options: [
+    { value: 'one', label: 'One' },
+    { value: 'two', label: 'Two' },
+    { value: 'three', label: 'Three' },
+  ],
+} as SelectProps;

package/src/Select.test.tsx

@@ -0,0 +1,135 @@
+import '@testing-library/jest-dom';
+
+import { Field, useFieldContext } from '@spark-web/field';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+
+import type { OptionsOrGroups } from './Select';
+import { Select } from './Select';
+
+jest.mock('@spark-web/field', () => {
+  const original = jest.requireActual('@spark-web/field');
+  return {
+    ...original,
+    useFieldContext: jest.fn(),
+  };
+});
+
+const useFieldContextMock = useFieldContext as jest.Mock;
+
+const renderComponent = ({
+  options,
+  name,
+  placeholder,
+  data,
+}: {
+  options: OptionsOrGroups;
+  name: string;
+  placeholder?: string;
+  data?: DataAttributeMap;
+}) =>
+  render(
+    <Field label={name}>
+      <Select
+        options={options}
+        {...(placeholder && { placeholder })}
+        {...(data && { data })}
+      />
+    </Field>
+  );
+
+describe('Select component', () => {
+  const name = 'test select';
+  beforeEach(() => {
+    useFieldContextMock.mockReturnValue({
+      disabled: false,
+      invalid: false,
+      'aria-label': name,
+    });
+  });
+
+  afterEach(cleanup);
+
+  it('should display select label', () => {
+    renderComponent({ options: [], name });
+    screen.getByText(name);
+  });
+
+  it('should display placeholder with empty value and disabled', () => {
+    const placeholder = 'select placeholder';
+    renderComponent({ options: [], name, placeholder });
+    const placeholderOption = screen.getByRole('option', {
+      name: placeholder,
+    }) as HTMLOptionElement;
+    expect(placeholderOption.selected).toBe(true);
+    expect(placeholderOption.value).toBe('');
+    expect(placeholderOption).toBeDisabled();
+  });
+
+  it('should have options to select', () => {
+    const options = [
+      { label: 'foo', value: 'bar' },
+      { label: 'foo1', value: 'bar1' },
+      { label: 'foo2', value: 'bar2' },
+    ];
+    renderComponent({ options, name });
+    expect(
+      (screen.getByRole('option', { name: 'foo' }) as HTMLOptionElement)
+        .selected
+    ).toBe(true);
+
+    fireEvent.change(screen.getByLabelText(name), {
+      target: { value: 'bar1' },
+    });
+    expect(
+      (screen.getByRole('option', { name: 'foo1' }) as HTMLOptionElement)
+        .selected
+    ).toBe(true);
+
+    fireEvent.change(screen.getByLabelText(name), {
+      target: { value: 'bar2' },
+    });
+    expect(
+      (screen.getByRole('option', { name: 'foo2' }) as HTMLOptionElement)
+        .selected
+    ).toBe(true);
+  });
+
+  it('should have attributes built by data', () => {
+    const data = { foo: 'bar', foo1: 'bar1' };
+
+    renderComponent({ data, name, options: [] });
+    expect(screen.getByLabelText(name)).toHaveAttribute('data-foo', 'bar');
+    expect(screen.getByLabelText(name)).toHaveAttribute('data-foo1', 'bar1');
+  });
+
+  it('should be disabled by field context', () => {
+    useFieldContextMock.mockReturnValue({
+      disabled: true,
+      invalid: true,
+      'aria-label': name,
+    });
+    renderComponent({ name, options: [] });
+    expect(screen.getByLabelText(name)).toBeDisabled();
+  });
+
+  it('should have option in optGroup', () => {
+    const optGroupOption = { label: 'foo1-0', value: 'bar1-0' };
+    const options = [
+      { label: 'foo', value: 'bar' },
+      {
+        label: 'foo1',
+        value: 'bar1',
+        options: [optGroupOption],
+      },
+    ];
+    renderComponent({ name, options });
+    expect(
+      (
+        screen.getByRole('option', {
+          name: optGroupOption.label,
+        }) as HTMLOptionElement
+      ).value
+    ).toBe(optGroupOption.value);
+  });
+});

package/src/Select.tsx

@@ -0,0 +1,134 @@
+import { css } from '@emotion/css';
+import { Box } from '@spark-web/box';
+import { useFieldContext } from '@spark-web/field';
+import { ChevronDownIcon } from '@spark-web/icon';
+import type { UseInputProps } from '@spark-web/text-input';
+import { useInput } from '@spark-web/text-input';
+import { useTheme } from '@spark-web/theme';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import { buildDataAttributes } from '@spark-web/utils/internal';
+import * as React from 'react';
+
+type Option = {
+  disabled?: boolean;
+  label: string;
+  value: string | number;
+};
+type Group = { options: Array<Option>; label: string };
+export type OptionsOrGroups = Array<Option | Group>;
+
+export type SelectProps = Pick<
+  React.SelectHTMLAttributes<HTMLSelectElement>,
+  'defaultValue' | 'name' | 'onBlur' | 'onChange' | 'required' | 'value'
+> & {
+  data?: DataAttributeMap;
+  options: OptionsOrGroups;
+  placeholder?: string;
+};
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  (
+    {
+      data,
+      defaultValue,
+      name,
+      onBlur,
+      onChange,
+      options: optionsOrGroups,
+      placeholder,
+      required,
+      value,
+    },
+    forwardedRef
+  ) => {
+    const { disabled, invalid, ...a11yProps } = useFieldContext();
+    const styles = useSelectStyles({ disabled, invalid });
+
+    const mapOptions = React.useCallback(
+      (opt: Option) => (
+        <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+          {opt.label}
+        </option>
+      ),
+      []
+    );
+
+    return (
+      <Box position="relative">
+        <Box
+          {...a11yProps}
+          {...(data ? buildDataAttributes(data) : null)}
+          as="select"
+          defaultValue={defaultValue ?? placeholder ? '' : undefined}
+          disabled={disabled}
+          name={name}
+          onBlur={onBlur}
+          onChange={onChange}
+          ref={forwardedRef}
+          required={required}
+          value={value}
+          // Styles
+          background={disabled ? 'inputDisabled' : 'input'}
+          border={invalid ? 'critical' : 'field'}
+          borderRadius="small"
+          paddingX="medium"
+          height="medium"
+          width="full"
+          className={css(styles)}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {optionsOrGroups.map(optionOrGroup => {
+            if ('options' in optionOrGroup) {
+              return (
+                <optgroup key={optionOrGroup.label} label={optionOrGroup.label}>
+                  {optionOrGroup.options.map(option => mapOptions(option))}
+                </optgroup>
+              );
+            }
+            return mapOptions(optionOrGroup);
+          })}
+        </Box>
+        <Box
+          position="absolute"
+          top={0}
+          bottom={0}
+          right={0}
+          display="flex"
+          alignItems="center"
+          padding="medium"
+          className={css({ pointerEvents: 'none' })}
+        >
+          <ChevronDownIcon size="xxsmall" tone="placeholder" />
+        </Box>
+      </Box>
+    );
+  }
+);
+
+Select.displayName = 'Select';
+
+function useSelectStyles({ disabled, invalid }: UseInputProps) {
+  const theme = useTheme();
+  const inputStyles = useInput({
+    disabled,
+    invalid,
+  });
+  return {
+    ...inputStyles,
+    overflow: 'hidden', // fix for Safari to prevent unwanted scrolling of parent container to occur
+    textOverflow: 'ellipsis',
+
+    // Prevent text going underneath the chevron icon
+    paddingRight:
+      theme.sizing.xxsmall + // size of chevron icon
+      theme.spacing.medium * 2, // paddingX value
+
+    ':invalid': {
+      color: theme.color.foreground.muted,
+    },
+  };
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export { Select } from './Select';
+
+// types
+
+export type { SelectProps } from './Select';