@intility/bifrost-react-select 4.2.4 → 4.3.0

package/CHANGELOG.md

@@ -1,19 +1,35 @@
 # @intility/bifrost-react-select
 
-## 4.2.4
+## 4.3.0
+
+### Minor Changes
+
+- 2703b98: Add support for `small` variants for most form field inputs, to match existing `small` button styling.
+
+  - `<Input>`
+  - `<DatePicker>`
+  - `<FieldGroup.Item>`
+  - `<Select>`
+
+### Patch Changes
+
+- f70f414: Use `theme` color for selected checkbox with multi-select
+- c2dfb58: Added translation text for select loading state
+
+## 4.2.4 - 2024-08-07
 
 ### Patch Changes
 
 - 2308f1a: Update multi-select checkboxes to more closely match bifrost checkbox styling.
 
-## 4.2.3
+## 4.2.3 - 2024-08-06
 
 ### Patch Changes
 
 - 633e7b2: chore: avoid internal barrel file imports
 - 899927b: Fix: form field height should follow browser font-size setting. Use `rem` over `px` for height-related units for form fields (input, button, select, datepicker).
 
-## 4.2.2
+## 4.2.2 - 2024-07-30
 
 ### Patch Changes
 
@@ -24,31 +40,31 @@
 
 - 7b2eacc: Fix: Apparently, Chrome has changed its `<input autocomplete>` behaviour and now appears to only respect `autoComplete="off"`, so lets try that and pray to the browser gods that this will satisfy all of them for the forseeable future. #758
 
-## 4.2.1
+## 4.2.1 - 2024-06-21
 
 ### Patch Changes
 
 - ba934052: Change option hover background to bfc-base-1
 
-## 4.2.0
+## 4.2.0 - 2024-06-13
 
 ### Minor Changes
 
 - 833a15e4: Fix: update Select styling to allow `menuPlacement="top"` and more closely match DatePicker #754
 
-## 4.1.0
+## 4.1.0 - 2024-05-31
 
 ### Minor Changes
 
 - ab69807d: Styling changes for Select input #740
 
-## 4.0.3
+## 4.0.3 - 2024-05-16
 
 ### Patch Changes
 
 - 3db0503a: Fix: `selectComponents` properties should now correcly be non-null
 
-## 4.0.2
+## 4.0.2 - 2024-04-10
 
 ### Patch Changes
 
@@ -56,7 +72,7 @@
 - Updated dependencies [79b9ab5d]
   - @intility/bifrost-react@4.0.2
 
-## 4.0.1
+## 4.0.1 - 2024-04-05
 
 ### Patch Changes
 
@@ -65,7 +81,7 @@
 - Updated dependencies [611f82ca]
   - @intility/bifrost-react@4.0.1
 
-## 4.0.0 (first release)
+## 4.0.0 - 2024-04-03 (first release, previously part of @intility/bifrost-react)
 
 ### Minor Changes
 

package/dist/Select.d.ts

@@ -49,6 +49,8 @@ export type SelectProps = {
     style?: CSSProperties;
     /** Displays a loading spinner */
     loading?: boolean;
+    /** Decrease height of the input from `40px` to `32px` */
+    small?: boolean;
 };
 export type SelectType = {
     <OptionType = {

package/dist/Select.js

@@ -10,6 +10,7 @@ import Description from "@intility/bifrost-react/Description";
 import Feedback from "@intility/bifrost-react/Feedback";
 import Label from "@intility/bifrost-react/Label";
 import useUniqueId from "@intility/bifrost-react/hooks/useUniqueId";
+import useLocale from "@intility/bifrost-react/hooks/useLocale";
 import DropdownIndicator from "./overrides/DropdownIndicator.internal.js";
 import CustomInput from "./overrides/CustomInput.internal.js";
 import CustomMenuList from "./overrides/CustomMenuList.internal.js";
@@ -39,7 +40,7 @@ export const selectStyles = {
             borderColor: state.isFocused ? "var(--bfc-base-c-inverted)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
             boxShadow: state.isFocused ? "inset 0 0 0 1px var(--bfc-base-c-inverted)" : "none",
             borderRadius: "var(--bf-radius-s)",
-            minHeight: "var(--bfs40)",
+            minHeight: undefined,
             cursor: "text"
         }),
     indicatorSeparator: ()=>({
@@ -47,8 +48,7 @@ export const selectStyles = {
         }),
     indicatorsContainer: (provided)=>({
             ...provided,
-            alignItems: "flex-start",
-            padding: "0.46875rem 0"
+            alignItems: "flex-start"
         }),
     clearIndicator: (provided)=>({
             ...provided,
@@ -58,14 +58,14 @@ export const selectStyles = {
             color: "var(--bfc-base-c-2)",
             cursor: "pointer",
             padding: "var(--bfs4)",
-            margin: "1px var(--bfs4) 0px 0px"
+            margin: "1px 4px 0px 0px"
         }),
     dropdownIndicator: (provided, state)=>({
             ...provided,
             color: state.isFocused ? "var(--bfc-base-c)" : "var(--bfc-base-c-2)",
             cursor: "pointer",
             padding: "var(--bfs4)",
-            marginRight: "var(--bfs8)"
+            marginRight: 8
         }),
     input: (provided)=>({
             ...provided,
@@ -132,7 +132,7 @@ export const selectStyles = {
     multiValueLabel: (provided)=>({
             ...provided,
             fontSize: "var(--bf-font-size-m)",
-            padding: "2px 4px 2px 8px",
+            padding: "1.5px 4px 1.5px 8px",
             color: "inherit"
         }),
     multiValueRemove: (provided, state)=>({
@@ -186,8 +186,9 @@ const selectStates = [
  */ const SelectHOC = (Selector)=>{
     // @ts-ignore
     // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name
-    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)=>{
+    const GeneratedSelect = /*#__PURE__*/ forwardRef(({ label, hideLabel = false, isDisabled = false, state, feedback, required = false, description, requiredNoLabel = false, optional = false, inputId, className, style, loading = false, components, small = false, ...props }, ref)=>{
         const selectId = useUniqueId(inputId);
+        const locale = useLocale();
         return /*#__PURE__*/ _jsxs("div", {
             className: classNames(className, {
                 "bf-select-container": true
@@ -195,6 +196,8 @@ const selectStates = [
                 "bf-select-disabled": isDisabled
             }, {
                 "bf-select-alert": !isDisabled && state === "alert"
+            }, {
+                "bf-select-small": small
             }),
             style: style,
             "data-testid": "bf-select-container",
@@ -225,6 +228,7 @@ const selectStates = [
                     hideSelectedOptions: false,
                     closeMenuOnSelect: props.isMulti ? false : true,
                     isLoading: loading ?? props.isLoading,
+                    loadingMessage: ()=>locale.loading + "...",
                     ...props
                 }),
                 /*#__PURE__*/ _jsx(Feedback, {

package/dist/overrides/CustomOption.internal.js

@@ -13,7 +13,7 @@ const CustomOption = (props)=>{
                     icon: props.isSelected ? faCheckSquare : faSquare,
                     fixedWidth: true,
                     marginRight: true,
-                    color: props.isSelected ? "var(--bfc-base-c)" : "var(--bfc-base-c-2)"
+                    color: props.isSelected ? "var(--bfc-theme)" : "var(--bfc-base-c-2)"
                 })
             }),
             props.children,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intility/bifrost-react-select",
-  "version": "4.2.4",
+  "version": "4.3.0",
   "description": "React select component for Intility's design system, Bifrost.",
   "type": "module",
   "main": "dist/Select.js",
@@ -36,10 +36,10 @@
   "peerDependencies": {
     "react-dom": ">=18.0.0",
     "react": ">=18.0.0",
-    "@intility/bifrost-react": "^4.0.2"
+    "@intility/bifrost-react": "^4.13.0"
   },
   "devDependencies": {
-    "@intility/bifrost-react": "^4.7.4"
+    "@intility/bifrost-react": "^4.13.0"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",