@intility/bifrost-react-select 4.0.0-beta.2 → 4.0.0-beta.21

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,157 @@
1
1
  # @intility/bifrost-react-select
2
2
 
3
+ ## 4.0.0-beta.21
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [4dc5591a]
8
+ - Updated dependencies [6edfa7a4]
9
+ - Updated dependencies [14a9b64b]
10
+ - Updated dependencies [4dc5591a]
11
+ - @intility/bifrost-react@4.0.0-beta.20
12
+
13
+ ## 4.0.0-beta.20
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies [ae6a87d3]
18
+ - @intility/bifrost-react@4.0.0-beta.19
19
+
20
+ ## 4.0.0-beta.19
21
+
22
+ ### Patch Changes
23
+
24
+ - @intility/bifrost-react@4.0.0-beta.18
25
+
26
+ ## 4.0.0-beta.18
27
+
28
+ ### Patch Changes
29
+
30
+ - Updated dependencies [9814ef52]
31
+ - Updated dependencies [be0a4fcf]
32
+ - @intility/bifrost-react@4.0.0-beta.17
33
+
34
+ ## 4.0.0-beta.17
35
+
36
+ ### Patch Changes
37
+
38
+ - @intility/bifrost-react@4.0.0-beta.16
39
+
40
+ ## 4.0.0-beta.16
41
+
42
+ ### Patch Changes
43
+
44
+ - Updated dependencies [cc16df41]
45
+ - Updated dependencies [50b76941]
46
+ - @intility/bifrost-react@4.0.0-beta.15
47
+
48
+ ## 4.0.0-beta.15
49
+
50
+ ### Patch Changes
51
+
52
+ - Updated dependencies [ec250594]
53
+ - @intility/bifrost-react@4.0.0-beta.14
54
+
55
+ ## 4.0.0-beta.14
56
+
57
+ ### Patch Changes
58
+
59
+ - Updated dependencies [710afa88]
60
+ - @intility/bifrost-react@4.0.0-beta.13
61
+
62
+ ## 4.0.0-beta.13
63
+
64
+ ### Minor Changes
65
+
66
+ - 62b02461: Include JSDoc comments in typescript definition output
67
+
68
+ ### Patch Changes
69
+
70
+ - Updated dependencies [62b02461]
71
+ - @intility/bifrost-react@4.0.0-beta.12
72
+
73
+ ## 4.0.0-beta.12
74
+
75
+ ### Patch Changes
76
+
77
+ - Updated dependencies [18c2b063]
78
+ - @intility/bifrost-react@4.0.0-beta.11
79
+
80
+ ## 4.0.0-beta.11
81
+
82
+ ### Patch Changes
83
+
84
+ - ea861dbc: Update lint config, add displayName for components
85
+ - Updated dependencies [ea861dbc]
86
+ - @intility/bifrost-react@4.0.0-beta.10
87
+
88
+ ## 4.0.0-beta.10
89
+
90
+ ### Patch Changes
91
+
92
+ - Updated dependencies [17165424]
93
+ - @intility/bifrost-react@4.0.0-beta.9
94
+
95
+ ## 4.0.0-beta.9
96
+
97
+ ### Patch Changes
98
+
99
+ - Updated dependencies [5504294e]
100
+ - Updated dependencies [7db473c6]
101
+ - @intility/bifrost-react@4.0.0-beta.8
102
+
103
+ ## 4.0.0-beta.8
104
+
105
+ ### Patch Changes
106
+
107
+ - Updated dependencies [3849abc3]
108
+ - @intility/bifrost-react@4.0.0-beta.7
109
+
110
+ ## 4.0.0-beta.7
111
+
112
+ ### Patch Changes
113
+
114
+ - Updated dependencies [82ab21b5]
115
+ - Updated dependencies [81af701b]
116
+ - @intility/bifrost-react@4.0.0-beta.6
117
+
118
+ ## 4.0.0-beta.6
119
+
120
+ ### Minor Changes
121
+
122
+ - 6b355639: New styling for inputs, now always outlined. Removed `variant` prop from `<Input>`.
123
+
124
+ ### Patch Changes
125
+
126
+ - Updated dependencies [6b355639]
127
+ - Updated dependencies [6b355639]
128
+ - @intility/bifrost-react@4.0.0-beta.5
129
+
130
+ ## 4.0.0-beta.5
131
+
132
+ ### Patch Changes
133
+
134
+ - e410a910: New base color values for light mode #711
135
+ - Updated dependencies [e410a910]
136
+ - @intility/bifrost-react@4.0.0-beta.4
137
+
138
+ ## 4.0.0-beta.4
139
+
140
+ ### Patch Changes
141
+
142
+ - a903f282: fix: export typescript types used in react components
143
+ - Updated dependencies [a903f282]
144
+ - Updated dependencies [19500ce7]
145
+ - Updated dependencies [8263586d]
146
+ - @intility/bifrost-react@4.0.0-beta.3
147
+
148
+ ## 4.0.0-beta.3
149
+
150
+ ### Patch Changes
151
+
152
+ - Updated dependencies [b60c063d]
153
+ - @intility/bifrost-react@4.0.0-beta.2
154
+
3
155
  ## 4.0.0-beta.2
4
156
 
5
157
  ### Major Changes
package/dist/Select.d.ts CHANGED
@@ -29,15 +29,25 @@ export declare const selectComponents: Partial<typeof components>;
29
29
  declare const selectStates: readonly ["default", "alert"];
30
30
  export type SelectState = (typeof selectStates)[number];
31
31
  export type SelectProps = {
32
+ /** Required label text */
32
33
  label: ReactNode;
34
+ /** Hide label text, will add label prop as aria-label for screen readers */
33
35
  hideLabel?: boolean;
36
+ /** Description text to show more information */
34
37
  description?: ReactNode;
38
+ /** Available states: `default` and `alert` */
35
39
  state?: SelectState;
40
+ /** Feedback text below the Select component */
36
41
  feedback?: ReactNode;
42
+ /** Required prop indicating mandatory field */
37
43
  required?: boolean;
44
+ /** Bool to mark Select component required, but hides the required label */
38
45
  requiredNoLabel?: boolean;
46
+ /** Marks Select component as optional */
39
47
  optional?: boolean;
48
+ /** Inline CSS styles */
40
49
  style?: CSSProperties;
50
+ /** Displays a loading spinner */
41
51
  loading?: boolean;
42
52
  };
43
53
  export type SelectType = {
@@ -47,7 +57,10 @@ export type SelectType = {
47
57
  }, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = GroupBase<OptionType>>(props: ReactSelectProps<OptionType, IsMulti, Group> & RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
48
58
  displayName?: string;
49
59
  };
50
- declare const SelectComponent: SelectType;
60
+ /**
61
+ * Select component - dropdown list
62
+ */
63
+ export declare const Select: SelectType;
51
64
  export type AsyncType = {
52
65
  <OptionType = {
53
66
  label: string;
@@ -82,4 +95,4 @@ export type AsyncCreatableType = {
82
95
  };
83
96
  declare const AsyncCreatableSelect: AsyncCreatableType;
84
97
  export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
85
- export default SelectComponent;
98
+ export default Select;
package/dist/Select.js CHANGED
@@ -22,18 +22,17 @@ export const selectStyles = {
22
22
  control: (provided, state)=>({
23
23
  ...provided,
24
24
  "&:hover": {
25
- borderBottomColor: state.isFocused ? "var(--bfc-base-c-theme)" : "var(--bfc-base-c-inverted-2)",
25
+ borderColor: state.isFocused ? "var(--bfc-theme-3)" : "var(--bfc-base-c-inverted-2)",
26
26
  // Change color of dropdown icon when hover on Select
27
27
  ".bf-select__dropdown-indicator": {
28
28
  color: "var(--bfc-theme-3)"
29
29
  }
30
30
  },
31
31
  backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
32
- border: 0,
33
- borderBottomWidth: "2px",
34
- borderBottomStyle: "solid",
35
- borderBottomColor: state.isFocused ? "var(--bfc-base-c-theme)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
36
- boxShadow: state.isFocused && "0 0 0 1px var(--bfc-theme-3)",
32
+ borderWidth: "1px",
33
+ borderStyle: "solid",
34
+ borderColor: state.isFocused ? "var(--bfc-theme-3)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
35
+ boxShadow: "none",
37
36
  borderRadius: state.selectProps.menuIsOpen ? " var(--bf-radius-xs) var(--bf-radius-xs) 0 0" : "var(--bf-radius-xs)",
38
37
  minHeight: "var(--bfs40)",
39
38
  cursor: "text"
@@ -84,7 +83,8 @@ export const selectStyles = {
84
83
  menuList: (provided)=>({
85
84
  ...provided,
86
85
  padding: 0,
87
- boxShadow: "0 0 0 1px var(--bfc-theme-3)",
86
+ border: "1px solid var(--bfc-theme-3)",
87
+ borderTop: "none",
88
88
  borderRadius: "0 0 var(--bf-radius-xs) var(--bf-radius-xs)"
89
89
  }),
90
90
  placeholder: (provided)=>({
@@ -185,7 +185,7 @@ const selectStates = [
185
185
  * Select HOC
186
186
  */ const SelectHOC = (Selector)=>{
187
187
  // @ts-ignore
188
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
188
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name
189
189
  const GeneratedSelect = /*#__PURE__*/ forwardRef(({ label, hideLabel = false, isDisabled = false, state, feedback, required = false, description, requiredNoLabel = false, optional = false, inputId, className, style, loading = false, components, ...props }, ref)=>{
190
190
  const selectId = useUniqueId(inputId);
191
191
  return /*#__PURE__*/ _jsxs("div", {
@@ -237,8 +237,8 @@ const selectStates = [
237
237
  };
238
238
  /**
239
239
  * Select component - dropdown list
240
- */ const SelectComponent = SelectHOC(ReactSelect);
241
- SelectComponent.displayName = "Select";
240
+ */ export const Select = SelectHOC(ReactSelect);
241
+ Select.displayName = "Select";
242
242
  const AsyncSelect = SelectHOC(AsyncReactSelect);
243
243
  AsyncSelect.displayName = "AsyncSelect";
244
244
  const CreatableSelect = SelectHOC(CreatableReactSelect);
@@ -246,4 +246,4 @@ CreatableSelect.displayName = "CreatableSelect";
246
246
  const AsyncCreatableSelect = SelectHOC(AsyncCreatableReactSelect);
247
247
  AsyncCreatableSelect.displayName = "AsyncCreatableSelect";
248
248
  export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
249
- export default SelectComponent;
249
+ export default Select;
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@intility/bifrost-react-select",
3
- "version": "4.0.0-beta.2",
3
+ "version": "4.0.0-beta.21",
4
4
  "description": "React select component for Intility's design system, Bifrost.",
5
5
  "type": "module",
6
- "main": "dist/index.js",
6
+ "main": "dist/Select.js",
7
7
  "scripts": {
8
8
  "build": "run-p build:*",
9
9
  "build:module": "swc ./src -d dist",
@@ -11,11 +11,12 @@
11
11
  "start": "run-p watch:*",
12
12
  "watch:module": "npm run build:module -- --watch",
13
13
  "watch:types": "npm run build:types -- --watch --preserveWatchOutput",
14
- "clean": "rimraf dist"
14
+ "clean": "rimraf dist",
15
+ "lint": "eslint ./src/**/*.{ts,tsx}"
15
16
  },
16
17
  "exports": {
17
18
  "./package.json": "./package.json",
18
- ".": "./dist/index.js"
19
+ ".": "./dist/Select.js"
19
20
  },
20
21
  "homepage": "https://bifrost.intility.com",
21
22
  "keywords": [
@@ -40,7 +41,7 @@
40
41
  "@fortawesome/fontawesome-svg-core": "^6.4.2",
41
42
  "@fortawesome/free-solid-svg-icons": "^6.4.2",
42
43
  "@fortawesome/react-fontawesome": "^0.2.0",
43
- "@intility/bifrost-react": "4.0.0-beta.1",
44
+ "@intility/bifrost-react": "4.0.0-beta.20",
44
45
  "classnames": "^2.2.6",
45
46
  "react-select": "^5.7.7"
46
47
  }
package/src/Select.tsx CHANGED
@@ -49,8 +49,8 @@ export const selectStyles = {
49
49
  control: (provided, state) => ({
50
50
  ...provided,
51
51
  "&:hover": {
52
- borderBottomColor: state.isFocused
53
- ? "var(--bfc-base-c-theme)"
52
+ borderColor: state.isFocused
53
+ ? "var(--bfc-theme-3)"
54
54
  : "var(--bfc-base-c-inverted-2)",
55
55
  // Change color of dropdown icon when hover on Select
56
56
  ".bf-select__dropdown-indicator": {
@@ -60,15 +60,14 @@ export const selectStyles = {
60
60
  backgroundColor: state.isDisabled
61
61
  ? "var(--bfc-base-dimmed)"
62
62
  : "var(--bfc-base-3)",
63
- border: 0,
64
- borderBottomWidth: "2px",
65
- borderBottomStyle: "solid",
66
- borderBottomColor: state.isFocused
67
- ? "var(--bfc-base-c-theme)"
63
+ borderWidth: "1px",
64
+ borderStyle: "solid",
65
+ borderColor: state.isFocused
66
+ ? "var(--bfc-theme-3)"
68
67
  : state.isDisabled
69
68
  ? "transparent"
70
69
  : "var(--bfc-base-c-wcag)",
71
- boxShadow: state.isFocused && "0 0 0 1px var(--bfc-theme-3)",
70
+ boxShadow: "none",
72
71
  borderRadius: state.selectProps.menuIsOpen
73
72
  ? " var(--bf-radius-xs) var(--bf-radius-xs) 0 0"
74
73
  : "var(--bf-radius-xs)",
@@ -121,7 +120,8 @@ export const selectStyles = {
121
120
  menuList: (provided) => ({
122
121
  ...provided,
123
122
  padding: 0,
124
- boxShadow: "0 0 0 1px var(--bfc-theme-3)",
123
+ border: "1px solid var(--bfc-theme-3)",
124
+ borderTop: "none",
125
125
  borderRadius: "0 0 var(--bf-radius-xs) var(--bf-radius-xs)",
126
126
  }),
127
127
  placeholder: (provided) => ({
@@ -238,7 +238,7 @@ export type SelectState = (typeof selectStates)[number];
238
238
  */
239
239
  const SelectHOC = <Type, Selector>(Selector: Selector) => {
240
240
  // @ts-ignore
241
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
241
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name
242
242
  const GeneratedSelect: Type = forwardRef<any, any>(
243
243
  (
244
244
  {
@@ -355,10 +355,10 @@ export type SelectType = {
355
355
  /**
356
356
  * Select component - dropdown list
357
357
  */
358
- const SelectComponent: SelectType = SelectHOC<SelectType, typeof ReactSelect>(
358
+ export const Select: SelectType = SelectHOC<SelectType, typeof ReactSelect>(
359
359
  ReactSelect,
360
360
  );
361
- SelectComponent.displayName = "Select";
361
+ Select.displayName = "Select";
362
362
 
363
363
  // Async Select
364
364
  export type AsyncType = {
@@ -431,4 +431,4 @@ const AsyncCreatableSelect = SelectHOC<
431
431
  AsyncCreatableSelect.displayName = "AsyncCreatableSelect";
432
432
 
433
433
  export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
434
- export default SelectComponent;
434
+ export default Select;
package/dist/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export { default, default as Select, AsyncSelect, CreatableSelect, AsyncCreatableSelect, selectStyles, selectComponents, } from "./Select.js";
package/dist/index.js DELETED
@@ -1 +0,0 @@
1
- export { default, default as Select, AsyncSelect, CreatableSelect, AsyncCreatableSelect, selectStyles, selectComponents } from "./Select.js";
package/src/index.ts DELETED
@@ -1,9 +0,0 @@
1
- export {
2
- default,
3
- default as Select,
4
- AsyncSelect,
5
- CreatableSelect,
6
- AsyncCreatableSelect,
7
- selectStyles,
8
- selectComponents,
9
- } from "./Select.js";