@spark-web/select 1.0.2 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +4 -4
  2. package/dist/declarations/src/Select.d.ts +4 -4
  3. package/dist/spark-web-select.cjs.dev.js +6 -25
  4. package/dist/spark-web-select.cjs.prod.js +6 -25
  5. package/dist/spark-web-select.esm.js +6 -5
  6. package/package.json +18 -12
  7. package/CHANGELOG.md +0 -63
  8. package/src/Select.stories.tsx +0 -37
  9. package/src/Select.test.tsx +0 -135
  10. package/src/Select.tsx +0 -134
  11. package/src/index.ts +0 -5
package/README.md CHANGED
@@ -126,14 +126,14 @@ return (
126
126
  | Prop | Type | Default | Description |
127
127
  | ------------- | -------------------------------------------- | ------- | -------------------------------------------------------------------------------------- |
128
128
  | data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
129
- | options | Readonly<Array<Option \| Group\>> | | The values that can be selected by the input. |
129
+ | options | Readonly\<Array\<Option \| Group>> | | The values that can be selected by the input. |
130
130
  | placeholder? | string | | Placeholder text for when the input does not have an initial value. |
131
131
  | defaultValue? | string \| number \| readonly string[] | | Default value of the select. |
132
132
  | name? | string | | This attribute is used to specify the name of the control. |
133
- | onBlur? | React.FocusEventHandler<HTMLSelectElement\> | | Function for handling change events. |
134
- | onChange? | React.ChangeEventHandler<HTMLSelectElement\> | | Function for handling blur events. |
133
+ | onBlur? | React.FocusEventHandler\<HTMLSelectElement> | | Function for handling change events. |
134
+ | onChange? | React.ChangeEventHandler\<HTMLSelectElement> | | Function for handling blur events. |
135
135
  | required? | boolean | | Boolean that indicating that an option with a non-empty string value must be selected. |
136
136
  | value | string \| number \| readonly string[] | | Value of the select. |
137
137
 
138
138
  [data-attribute-map]:
139
- 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
139
+ https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
package/dist/declarations/src/Select.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { DataAttributeMap } from '@spark-web/utils/internal';
2
- import * as React from 'react';
2
+ import type { SelectHTMLAttributes } from 'react';
3
3
  declare type Option = {
4
4
  disabled?: boolean;
5
5
  label: string;
@@ -10,14 +10,14 @@ declare type Group = {
10
10
  label: string;
11
11
  };
12
12
  export declare type OptionsOrGroups = Array<Option | Group>;
13
- export declare type SelectProps = Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'defaultValue' | 'name' | 'onBlur' | 'onChange' | 'required' | 'value'> & {
13
+ export declare type SelectProps = Pick<SelectHTMLAttributes<HTMLSelectElement>, 'defaultValue' | 'name' | 'onBlur' | 'onChange' | 'required' | 'value'> & {
14
14
  data?: DataAttributeMap;
15
15
  options: OptionsOrGroups;
16
16
  placeholder?: string;
17
17
  };
18
- export declare const Select: React.ForwardRefExoticComponent<Pick<React.SelectHTMLAttributes<HTMLSelectElement>, "value" | "defaultValue" | "onBlur" | "onChange" | "name" | "required"> & {
18
+ export declare const Select: import("react").ForwardRefExoticComponent<Pick<SelectHTMLAttributes<HTMLSelectElement>, "name" | "value" | "defaultValue" | "onBlur" | "onChange" | "required"> & {
19
19
  data?: DataAttributeMap | undefined;
20
20
  options: OptionsOrGroups;
21
21
  placeholder?: string | undefined;
22
- } & React.RefAttributes<HTMLSelectElement>>;
22
+ } & import("react").RefAttributes<HTMLSelectElement>>;
23
23
  export {};
package/dist/spark-web-select.cjs.dev.js CHANGED
@@ -10,32 +10,11 @@ var field = require('@spark-web/field');
10
10
  var icon = require('@spark-web/icon');
11
11
  var textInput = require('@spark-web/text-input');
12
12
  var theme = require('@spark-web/theme');
13
- var internal = require('@spark-web/utils/internal');
14
- var React = require('react');
13
+ var react = require('react');
15
14
  var jsxRuntime = require('react/jsx-runtime');
16
15
 
17
- function _interopNamespace(e) {
18
- if (e && e.__esModule) return e;
19
- var n = Object.create(null);
20
- if (e) {
21
- Object.keys(e).forEach(function (k) {
22
- if (k !== 'default') {
23
- var d = Object.getOwnPropertyDescriptor(e, k);
24
- Object.defineProperty(n, k, d.get ? d : {
25
- enumerable: true,
26
- get: function () { return e[k]; }
27
- });
28
- }
29
- });
30
- }
31
- n["default"] = e;
32
- return Object.freeze(n);
33
- }
34
-
35
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
36
-
37
16
  var _excluded = ["disabled", "invalid"];
38
- var Select = /*#__PURE__*/React__namespace.forwardRef(function (_ref, forwardedRef) {
17
+ var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
39
18
  var data = _ref.data,
40
19
  defaultValue = _ref.defaultValue,
41
20
  name = _ref.name,
@@ -55,7 +34,7 @@ var Select = /*#__PURE__*/React__namespace.forwardRef(function (_ref, forwardedR
55
34
  disabled: disabled,
56
35
  invalid: invalid
57
36
  });
58
- var mapOptions = React__namespace.useCallback(function (opt) {
37
+ var mapOptions = react.useCallback(function (opt) {
59
38
  return /*#__PURE__*/jsxRuntime.jsx("option", {
60
39
  value: opt.value,
61
40
  disabled: opt.disabled,
@@ -64,8 +43,10 @@ var Select = /*#__PURE__*/React__namespace.forwardRef(function (_ref, forwardedR
64
43
  }, []);
65
44
  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
66
45
  position: "relative",
67
- children: [/*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({}, a11yProps), data ? internal.buildDataAttributes(data) : null), {}, {
46
+ children: [/*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({}, a11yProps), {}, {
47
+ "aria-invalid": invalid || undefined,
68
48
  as: "select",
49
+ data: data,
69
50
  defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
70
51
  disabled: disabled,
71
52
  name: name,
package/dist/spark-web-select.cjs.prod.js CHANGED
@@ -10,32 +10,11 @@ var field = require('@spark-web/field');
10
10
  var icon = require('@spark-web/icon');
11
11
  var textInput = require('@spark-web/text-input');
12
12
  var theme = require('@spark-web/theme');
13
- var internal = require('@spark-web/utils/internal');
14
- var React = require('react');
13
+ var react = require('react');
15
14
  var jsxRuntime = require('react/jsx-runtime');
16
15
 
17
- function _interopNamespace(e) {
18
- if (e && e.__esModule) return e;
19
- var n = Object.create(null);
20
- if (e) {
21
- Object.keys(e).forEach(function (k) {
22
- if (k !== 'default') {
23
- var d = Object.getOwnPropertyDescriptor(e, k);
24
- Object.defineProperty(n, k, d.get ? d : {
25
- enumerable: true,
26
- get: function () { return e[k]; }
27
- });
28
- }
29
- });
30
- }
31
- n["default"] = e;
32
- return Object.freeze(n);
33
- }
34
-
35
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
36
-
37
16
  var _excluded = ["disabled", "invalid"];
38
- var Select = /*#__PURE__*/React__namespace.forwardRef(function (_ref, forwardedRef) {
17
+ var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
39
18
  var data = _ref.data,
40
19
  defaultValue = _ref.defaultValue,
41
20
  name = _ref.name,
@@ -55,7 +34,7 @@ var Select = /*#__PURE__*/React__namespace.forwardRef(function (_ref, forwardedR
55
34
  disabled: disabled,
56
35
  invalid: invalid
57
36
  });
58
- var mapOptions = React__namespace.useCallback(function (opt) {
37
+ var mapOptions = react.useCallback(function (opt) {
59
38
  return /*#__PURE__*/jsxRuntime.jsx("option", {
60
39
  value: opt.value,
61
40
  disabled: opt.disabled,
@@ -64,8 +43,10 @@ var Select = /*#__PURE__*/React__namespace.forwardRef(function (_ref, forwardedR
64
43
  }, []);
65
44
  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
66
45
  position: "relative",
67
- children: [/*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({}, a11yProps), data ? internal.buildDataAttributes(data) : null), {}, {
46
+ children: [/*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread({}, a11yProps), {}, {
47
+ "aria-invalid": invalid || undefined,
68
48
  as: "select",
49
+ data: data,
69
50
  defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
70
51
  disabled: disabled,
71
52
  name: name,
package/dist/spark-web-select.esm.js CHANGED
@@ -6,12 +6,11 @@ import { useFieldContext } from '@spark-web/field';
6
6
  import { ChevronDownIcon } from '@spark-web/icon';
7
7
  import { useInput } from '@spark-web/text-input';
8
8
  import { useTheme } from '@spark-web/theme';
9
- import { buildDataAttributes } from '@spark-web/utils/internal';
10
- import * as React from 'react';
9
+ import { forwardRef, useCallback } from 'react';
11
10
  import { jsx, jsxs } from 'react/jsx-runtime';
12
11
 
13
12
  var _excluded = ["disabled", "invalid"];
14
- var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
13
+ var Select = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
15
14
  var data = _ref.data,
16
15
  defaultValue = _ref.defaultValue,
17
16
  name = _ref.name,
@@ -31,7 +30,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
31
30
  disabled: disabled,
32
31
  invalid: invalid
33
32
  });
34
- var mapOptions = React.useCallback(function (opt) {
33
+ var mapOptions = useCallback(function (opt) {
35
34
  return /*#__PURE__*/jsx("option", {
36
35
  value: opt.value,
37
36
  disabled: opt.disabled,
@@ -40,8 +39,10 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
40
39
  }, []);
41
40
  return /*#__PURE__*/jsxs(Box, {
42
41
  position: "relative",
43
- children: [/*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread(_objectSpread({}, a11yProps), data ? buildDataAttributes(data) : null), {}, {
42
+ children: [/*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread({}, a11yProps), {}, {
43
+ "aria-invalid": invalid || undefined,
44
44
  as: "select",
45
+ data: data,
45
46
  defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
46
47
  disabled: disabled,
47
48
  name: name,
package/package.json CHANGED
@@ -1,25 +1,31 @@
1
1
  {
2
2
  "name": "@spark-web/select",
3
+ "version": "1.0.5",
3
4
  "license": "MIT",
4
- "version": "1.0.2",
5
5
  "main": "dist/spark-web-select.cjs.js",
6
6
  "module": "dist/spark-web-select.esm.js",
7
- "devDependencies": {
8
- "@types/react": "^17.0.12"
9
- },
7
+ "files": [
8
+ "dist"
9
+ ],
10
10
  "dependencies": {
11
11
  "@babel/runtime": "^7.14.6",
12
12
  "@emotion/css": "^11.7.1",
13
- "@spark-web/a11y": "^1.0.2",
14
- "@spark-web/box": "^1.0.2",
15
- "@spark-web/field": "^1.0.2",
16
- "@spark-web/icon": "^1.0.2",
17
- "@spark-web/text": "^1.0.2",
18
- "@spark-web/text-input": "^1.0.2",
19
- "@spark-web/theme": "^2.0.1",
20
- "@spark-web/utils": "^1.0.2",
13
+ "@spark-web/a11y": "^1.0.4",
14
+ "@spark-web/box": "^1.0.4",
15
+ "@spark-web/field": "^1.1.0",
16
+ "@spark-web/icon": "^1.1.2",
17
+ "@spark-web/text": "^1.0.4",
18
+ "@spark-web/text-input": "^1.1.1",
19
+ "@spark-web/theme": "^3.0.0",
20
+ "@spark-web/utils": "^1.1.2"
21
+ },
22
+ "devDependencies": {
23
+ "@types/react": "^17.0.12",
21
24
  "react": "^17.0.2"
22
25
  },
26
+ "peerDependencies": {
27
+ "react": ">=17.0.2"
28
+ },
23
29
  "engines": {
24
30
  "node": ">= 14.13"
25
31
  }
package/CHANGELOG.md DELETED
@@ -1,63 +0,0 @@
1
- # @spark-web/select
2
-
3
- ## 1.0.2
4
-
5
- ### Patch Changes
6
-
7
- - [#40](https://github.com/brighte-labs/spark-web/pull/40)
8
- [`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
9
- Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
10
- @babel/transform-runtime
11
-
12
- - Updated dependencies
13
- [[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
14
- - @spark-web/a11y@1.0.2
15
- - @spark-web/box@1.0.2
16
- - @spark-web/field@1.0.2
17
- - @spark-web/icon@1.0.2
18
- - @spark-web/text@1.0.2
19
- - @spark-web/text-input@1.0.2
20
- - @spark-web/theme@2.0.1
21
- - @spark-web/utils@1.0.2
22
-
23
- ## 1.0.1
24
-
25
- ### Patch Changes
26
-
27
- - [#36](https://github.com/brighte-labs/spark-web/pull/36)
28
- [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
29
- Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
30
- config
31
-
32
- - Updated dependencies
33
- [[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
34
- [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
35
- - @spark-web/theme@2.0.0
36
- - @spark-web/a11y@1.0.1
37
- - @spark-web/box@1.0.1
38
- - @spark-web/field@1.0.1
39
- - @spark-web/icon@1.0.1
40
- - @spark-web/text@1.0.1
41
- - @spark-web/text-input@1.0.1
42
- - @spark-web/utils@1.0.1
43
-
44
- ## 1.0.0
45
-
46
- ### Major Changes
47
-
48
- - [#27](https://github.com/brighte-labs/spark-web/pull/27)
49
- [`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
50
- Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
51
-
52
- ### Patch Changes
53
-
54
- - Updated dependencies
55
- [[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
56
- - @spark-web/a11y@1.0.0
57
- - @spark-web/box@1.0.0
58
- - @spark-web/field@1.0.0
59
- - @spark-web/icon@1.0.0
60
- - @spark-web/text@1.0.0
61
- - @spark-web/text-input@1.0.0
62
- - @spark-web/theme@1.0.0
63
- - @spark-web/utils@1.0.0
package/src/Select.stories.tsx DELETED
@@ -1,37 +0,0 @@
1
- import { Field } from '@spark-web/field';
2
- import { InformationCircleIcon } from '@spark-web/icon';
3
- import { Inline } from '@spark-web/inline';
4
- import { Stack } from '@spark-web/stack';
5
- import { Text } from '@spark-web/text';
6
- import type { ComponentMeta, ComponentStory } from '@storybook/react';
7
-
8
- import type { SelectProps } from './Select';
9
- import { Select } from './Select';
10
-
11
- export default {
12
- title: 'Forms / Select',
13
- component: Select,
14
- } as ComponentMeta<typeof Select>;
15
-
16
- const SelectStory: ComponentStory<typeof Select> = (args: SelectProps) => (
17
- <Stack gap="large">
18
- <Inline gap="xsmall" alignY="center">
19
- <InformationCircleIcon tone="info" size="xsmall" />
20
- <Text weight="medium" tone="info" baseline={false}>
21
- {`Must be used inside of a <Field/>`}
22
- </Text>
23
- </Inline>
24
- <Field label="Select input">
25
- <Select options={args.options} />
26
- </Field>
27
- </Stack>
28
- );
29
- export const Default = SelectStory.bind({});
30
-
31
- Default.args = {
32
- options: [
33
- { value: 'one', label: 'One' },
34
- { value: 'two', label: 'Two' },
35
- { value: 'three', label: 'Three' },
36
- ],
37
- } as SelectProps;
package/src/Select.test.tsx DELETED
@@ -1,135 +0,0 @@
1
- import '@testing-library/jest-dom';
2
-
3
- import { Field, useFieldContext } from '@spark-web/field';
4
- import type { DataAttributeMap } from '@spark-web/utils/internal';
5
- import { cleanup, fireEvent, render, screen } from '@testing-library/react';
6
-
7
- import type { OptionsOrGroups } from './Select';
8
- import { Select } from './Select';
9
-
10
- jest.mock('@spark-web/field', () => {
11
- const original = jest.requireActual('@spark-web/field');
12
- return {
13
- ...original,
14
- useFieldContext: jest.fn(),
15
- };
16
- });
17
-
18
- const useFieldContextMock = useFieldContext as jest.Mock;
19
-
20
- const renderComponent = ({
21
- options,
22
- name,
23
- placeholder,
24
- data,
25
- }: {
26
- options: OptionsOrGroups;
27
- name: string;
28
- placeholder?: string;
29
- data?: DataAttributeMap;
30
- }) =>
31
- render(
32
- <Field label={name}>
33
- <Select
34
- options={options}
35
- {...(placeholder && { placeholder })}
36
- {...(data && { data })}
37
- />
38
- </Field>
39
- );
40
-
41
- describe('Select component', () => {
42
- const name = 'test select';
43
- beforeEach(() => {
44
- useFieldContextMock.mockReturnValue({
45
- disabled: false,
46
- invalid: false,
47
- 'aria-label': name,
48
- });
49
- });
50
-
51
- afterEach(cleanup);
52
-
53
- it('should display select label', () => {
54
- renderComponent({ options: [], name });
55
- screen.getByText(name);
56
- });
57
-
58
- it('should display placeholder with empty value and disabled', () => {
59
- const placeholder = 'select placeholder';
60
- renderComponent({ options: [], name, placeholder });
61
- const placeholderOption = screen.getByRole('option', {
62
- name: placeholder,
63
- }) as HTMLOptionElement;
64
- expect(placeholderOption.selected).toBe(true);
65
- expect(placeholderOption.value).toBe('');
66
- expect(placeholderOption).toBeDisabled();
67
- });
68
-
69
- it('should have options to select', () => {
70
- const options = [
71
- { label: 'foo', value: 'bar' },
72
- { label: 'foo1', value: 'bar1' },
73
- { label: 'foo2', value: 'bar2' },
74
- ];
75
- renderComponent({ options, name });
76
- expect(
77
- (screen.getByRole('option', { name: 'foo' }) as HTMLOptionElement)
78
- .selected
79
- ).toBe(true);
80
-
81
- fireEvent.change(screen.getByLabelText(name), {
82
- target: { value: 'bar1' },
83
- });
84
- expect(
85
- (screen.getByRole('option', { name: 'foo1' }) as HTMLOptionElement)
86
- .selected
87
- ).toBe(true);
88
-
89
- fireEvent.change(screen.getByLabelText(name), {
90
- target: { value: 'bar2' },
91
- });
92
- expect(
93
- (screen.getByRole('option', { name: 'foo2' }) as HTMLOptionElement)
94
- .selected
95
- ).toBe(true);
96
- });
97
-
98
- it('should have attributes built by data', () => {
99
- const data = { foo: 'bar', foo1: 'bar1' };
100
-
101
- renderComponent({ data, name, options: [] });
102
- expect(screen.getByLabelText(name)).toHaveAttribute('data-foo', 'bar');
103
- expect(screen.getByLabelText(name)).toHaveAttribute('data-foo1', 'bar1');
104
- });
105
-
106
- it('should be disabled by field context', () => {
107
- useFieldContextMock.mockReturnValue({
108
- disabled: true,
109
- invalid: true,
110
- 'aria-label': name,
111
- });
112
- renderComponent({ name, options: [] });
113
- expect(screen.getByLabelText(name)).toBeDisabled();
114
- });
115
-
116
- it('should have option in optGroup', () => {
117
- const optGroupOption = { label: 'foo1-0', value: 'bar1-0' };
118
- const options = [
119
- { label: 'foo', value: 'bar' },
120
- {
121
- label: 'foo1',
122
- value: 'bar1',
123
- options: [optGroupOption],
124
- },
125
- ];
126
- renderComponent({ name, options });
127
- expect(
128
- (
129
- screen.getByRole('option', {
130
- name: optGroupOption.label,
131
- }) as HTMLOptionElement
132
- ).value
133
- ).toBe(optGroupOption.value);
134
- });
135
- });
package/src/Select.tsx DELETED
@@ -1,134 +0,0 @@
1
- import { css } from '@emotion/css';
2
- import { Box } from '@spark-web/box';
3
- import { useFieldContext } from '@spark-web/field';
4
- import { ChevronDownIcon } from '@spark-web/icon';
5
- import type { UseInputProps } from '@spark-web/text-input';
6
- import { useInput } from '@spark-web/text-input';
7
- import { useTheme } from '@spark-web/theme';
8
- import type { DataAttributeMap } from '@spark-web/utils/internal';
9
- import { buildDataAttributes } from '@spark-web/utils/internal';
10
- import * as React from 'react';
11
-
12
- type Option = {
13
- disabled?: boolean;
14
- label: string;
15
- value: string | number;
16
- };
17
- type Group = { options: Array<Option>; label: string };
18
- export type OptionsOrGroups = Array<Option | Group>;
19
-
20
- export type SelectProps = Pick<
21
- React.SelectHTMLAttributes<HTMLSelectElement>,
22
- 'defaultValue' | 'name' | 'onBlur' | 'onChange' | 'required' | 'value'
23
- > & {
24
- data?: DataAttributeMap;
25
- options: OptionsOrGroups;
26
- placeholder?: string;
27
- };
28
-
29
- export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
30
- (
31
- {
32
- data,
33
- defaultValue,
34
- name,
35
- onBlur,
36
- onChange,
37
- options: optionsOrGroups,
38
- placeholder,
39
- required,
40
- value,
41
- },
42
- forwardedRef
43
- ) => {
44
- const { disabled, invalid, ...a11yProps } = useFieldContext();
45
- const styles = useSelectStyles({ disabled, invalid });
46
-
47
- const mapOptions = React.useCallback(
48
- (opt: Option) => (
49
- <option key={opt.value} value={opt.value} disabled={opt.disabled}>
50
- {opt.label}
51
- </option>
52
- ),
53
- []
54
- );
55
-
56
- return (
57
- <Box position="relative">
58
- <Box
59
- {...a11yProps}
60
- {...(data ? buildDataAttributes(data) : null)}
61
- as="select"
62
- defaultValue={defaultValue ?? placeholder ? '' : undefined}
63
- disabled={disabled}
64
- name={name}
65
- onBlur={onBlur}
66
- onChange={onChange}
67
- ref={forwardedRef}
68
- required={required}
69
- value={value}
70
- // Styles
71
- background={disabled ? 'inputDisabled' : 'input'}
72
- border={invalid ? 'critical' : 'field'}
73
- borderRadius="small"
74
- paddingX="medium"
75
- height="medium"
76
- width="full"
77
- className={css(styles)}
78
- >
79
- {placeholder && (
80
- <option value="" disabled>
81
- {placeholder}
82
- </option>
83
- )}
84
- {optionsOrGroups.map(optionOrGroup => {
85
- if ('options' in optionOrGroup) {
86
- return (
87
- <optgroup key={optionOrGroup.label} label={optionOrGroup.label}>
88
- {optionOrGroup.options.map(option => mapOptions(option))}
89
- </optgroup>
90
- );
91
- }
92
- return mapOptions(optionOrGroup);
93
- })}
94
- </Box>
95
- <Box
96
- position="absolute"
97
- top={0}
98
- bottom={0}
99
- right={0}
100
- display="flex"
101
- alignItems="center"
102
- padding="medium"
103
- className={css({ pointerEvents: 'none' })}
104
- >
105
- <ChevronDownIcon size="xxsmall" tone="placeholder" />
106
- </Box>
107
- </Box>
108
- );
109
- }
110
- );
111
-
112
- Select.displayName = 'Select';
113
-
114
- function useSelectStyles({ disabled, invalid }: UseInputProps) {
115
- const theme = useTheme();
116
- const inputStyles = useInput({
117
- disabled,
118
- invalid,
119
- });
120
- return {
121
- ...inputStyles,
122
- overflow: 'hidden', // fix for Safari to prevent unwanted scrolling of parent container to occur
123
- textOverflow: 'ellipsis',
124
-
125
- // Prevent text going underneath the chevron icon
126
- paddingRight:
127
- theme.sizing.xxsmall + // size of chevron icon
128
- theme.spacing.medium * 2, // paddingX value
129
-
130
- ':invalid': {
131
- color: theme.color.foreground.muted,
132
- },
133
- };
134
- }
package/src/index.ts DELETED
@@ -1,5 +0,0 @@
1
- export { Select } from './Select';
2
-
3
- // types
4
-
5
- export type { SelectProps } from './Select';