@spark-web/select 0.0.0-snapshot-release-20220907020533

package/README.md

@@ -0,0 +1,140 @@
+---
+title: Select
+storybookPath: forms-select--default
+isExperimentalPackage: false
+---
+
+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://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1

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

@@ -0,0 +1,34 @@
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import type { SelectHTMLAttributes } from 'react';
+export declare type Option = {
+    /** Whether or not the option is disabled. */
+    disabled?: boolean;
+    /** Label for the option. */
+    label: string;
+    /** Value of the option. */
+    value: string | number;
+};
+export declare type Group = {
+    /** List of options for the group. */
+    options: Array<Option>;
+    /** Label for the group. */
+    label: string;
+};
+export declare type OptionsOrGroups = Array<Option | Group>;
+export declare type NativeSelectProps = Pick<SelectHTMLAttributes<HTMLSelectElement>, 'defaultValue' | 'name' | 'onBlur' | 'onChange' | 'required' | 'value'>;
+export declare type SelectProps = NativeSelectProps & {
+    /** Allows setting of data attributes on the underlying element. */
+    data?: DataAttributeMap;
+    /** The values that can be selected by the input. */
+    options: OptionsOrGroups;
+    /** Placeholder text for when the input does not have an initial value. */
+    placeholder?: string;
+};
+export declare const Select: import("react").ForwardRefExoticComponent<NativeSelectProps & {
+    /** Allows setting of data attributes on the underlying element. */
+    data?: DataAttributeMap | undefined;
+    /** The values that can be selected by the input. */
+    options: OptionsOrGroups;
+    /** Placeholder text for when the input does not have an initial value. */
+    placeholder?: string | undefined;
+} & import("react").RefAttributes<HTMLSelectElement>>;

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,118 @@
+'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;

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,118 @@
+'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;

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

@@ -0,0 +1,114 @@
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import { css } from '@emotion/css';
+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 '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 /*#__PURE__*/jsx("option", {
+      value: opt.value,
+      disabled: opt.disabled,
+      children: opt.label
+    }, opt.value);
+  }, []);
+  return /*#__PURE__*/jsxs(InputContainer, {
+    children: [/*#__PURE__*/jsx(Indicator, {}), /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), a11yProps), {}, {
+      as: "select",
+      className: 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__*/jsx("option", {
+        value: "",
+        disabled: true,
+        children: placeholder
+      }) : null, optionsOrGroups.map(function (optionOrGroup) {
+        if ('options' in optionOrGroup) {
+          return /*#__PURE__*/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__*/jsx(Box, {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    right: 0,
+    display: "flex",
+    alignItems: "center",
+    padding: "medium",
+    className: css({
+      pointerEvents: 'none'
+    }),
+    children: /*#__PURE__*/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 };

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@spark-web/select",
+  "version": "0.0.0-snapshot-release-20220907020533",
+  "license": "MIT",
+  "main": "dist/spark-web-select.cjs.js",
+  "module": "dist/spark-web-select.esm.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.18.9",
+    "@emotion/css": "^11.9.0",
+    "@spark-web/box": "^1.0.7",
+    "@spark-web/icon": "^1.1.5",
+    "@spark-web/text-input": "^2.0.1",
+    "@spark-web/theme": "0.0.0-snapshot-release-20220907020533"
+  },
+  "devDependencies": {
+    "@spark-web/field": "^3.0.3",
+    "@spark-web/utils": "^1.2.0",
+    "@types/react": "^17.0.12",
+    "react": "^17.0.2"
+  },
+  "peerDependencies": {
+    "@spark-web/field": "^3.0.3",
+    "react": ">=17.0.2"
+  },
+  "engines": {
+    "node": ">= 14.13"
+  }
+}