@intility/bifrost-react-select 4.0.0-beta.0 → 4.0.0-beta.12

package/CHANGELOG.md

@@ -1,5 +1,106 @@
 # @intility/bifrost-react-select
 
+## 4.0.0-beta.12
+
+### Patch Changes
+
+- Updated dependencies [18c2b063]
+  - @intility/bifrost-react@4.0.0-beta.11
+
+## 4.0.0-beta.11
+
+### Patch Changes
+
+- ea861dbc: Update lint config, add displayName for components
+- Updated dependencies [ea861dbc]
+  - @intility/bifrost-react@4.0.0-beta.10
+
+## 4.0.0-beta.10
+
+### Patch Changes
+
+- Updated dependencies [17165424]
+  - @intility/bifrost-react@4.0.0-beta.9
+
+## 4.0.0-beta.9
+
+### Patch Changes
+
+- Updated dependencies [5504294e]
+- Updated dependencies [7db473c6]
+  - @intility/bifrost-react@4.0.0-beta.8
+
+## 4.0.0-beta.8
+
+### Patch Changes
+
+- Updated dependencies [3849abc3]
+  - @intility/bifrost-react@4.0.0-beta.7
+
+## 4.0.0-beta.7
+
+### Patch Changes
+
+- Updated dependencies [82ab21b5]
+- Updated dependencies [81af701b]
+  - @intility/bifrost-react@4.0.0-beta.6
+
+## 4.0.0-beta.6
+
+### Minor Changes
+
+- 6b355639: New styling for inputs, now always outlined. Removed `variant` prop from `<Input>`.
+
+### Patch Changes
+
+- Updated dependencies [6b355639]
+- Updated dependencies [6b355639]
+  - @intility/bifrost-react@4.0.0-beta.5
+
+## 4.0.0-beta.5
+
+### Patch Changes
+
+- e410a910: New base color values for light mode #711
+- Updated dependencies [e410a910]
+  - @intility/bifrost-react@4.0.0-beta.4
+
+## 4.0.0-beta.4
+
+### Patch Changes
+
+- a903f282: fix: export typescript types used in react components
+- Updated dependencies [a903f282]
+- Updated dependencies [19500ce7]
+- Updated dependencies [8263586d]
+  - @intility/bifrost-react@4.0.0-beta.3
+
+## 4.0.0-beta.3
+
+### Patch Changes
+
+- Updated dependencies [b60c063d]
+  - @intility/bifrost-react@4.0.0-beta.2
+
+## 4.0.0-beta.2
+
+### Major Changes
+
+- 608d2083: update module output
+
+### Patch Changes
+
+- 165904af: use deep imports from @intility/bifrost-react
+- Updated dependencies [165904af]
+- Updated dependencies [608d2083]
+  - @intility/bifrost-react@4.0.0-beta.1
+
+## 4.0.0-beta.1
+
+### Patch Changes
+
+- 217c8741: Named export for Select and DatePicker
+
 ## 4.0.0-beta.0
 
 ### Major Changes

package/dist/Select.d.ts

@@ -47,7 +47,7 @@ export type SelectType = {
     }, IsMulti extends boolean = false, Group extends GroupBase<OptionType> = GroupBase<OptionType>>(props: ReactSelectProps<OptionType, IsMulti, Group> & RefAttributes<SelectInstance<OptionType, IsMulti, Group>> & SelectProps): React.ReactElement | null;
     displayName?: string;
 };
-declare const SelectComponent: SelectType;
+export declare const Select: SelectType;
 export type AsyncType = {
     <OptionType = {
         label: string;
@@ -82,4 +82,4 @@ export type AsyncCreatableType = {
 };
 declare const AsyncCreatableSelect: AsyncCreatableType;
 export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
-export default SelectComponent;
+export default Select;

package/dist/Select.js

@@ -6,8 +6,11 @@ import AsyncReactSelect from "react-select/async";
 import CreatableReactSelect from "react-select/creatable";
 import AsyncCreatableReactSelect from "react-select/async-creatable";
 import classNames from "classnames";
-import { Description, Feedback, Label, useUniqueId } from "@intility/bifrost-react";
-import { DropdownIndicator, ClearIndicator, CustomInput, CustomMenuList, CustomOption, LoadingIndicator } from "./overrides";
+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 { DropdownIndicator, ClearIndicator, CustomInput, CustomMenuList, CustomOption, LoadingIndicator } from "./overrides/index.js";
 const ReactSelect = ReactSelectDefaultExport.default ?? ReactSelectDefaultExport;
 export const selectStyles = {
     container: (provided)=>({
@@ -19,18 +22,17 @@ export const selectStyles = {
     control: (provided, state)=>({
             ...provided,
             "&:hover": {
-                borderBottomColor: state.isFocused ? "var(--bfc-base-c-theme)" : "var(--bfc-base-c-inverted-2)",
+                borderColor: state.isFocused ? "var(--bfc-theme-3)" : "var(--bfc-base-c-inverted-2)",
                 // Change color of dropdown icon when hover on Select
                 ".bf-select__dropdown-indicator": {
                     color: "var(--bfc-theme-3)"
                 }
             },
             backgroundColor: state.isDisabled ? "var(--bfc-base-dimmed)" : "var(--bfc-base-3)",
-            border: 0,
-            borderBottomWidth: "2px",
-            borderBottomStyle: "solid",
-            borderBottomColor: state.isFocused ? "var(--bfc-base-c-theme)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
-            boxShadow: state.isFocused && "0 0 0 1px var(--bfc-theme-3)",
+            borderWidth: "1px",
+            borderStyle: "solid",
+            borderColor: state.isFocused ? "var(--bfc-theme-3)" : state.isDisabled ? "transparent" : "var(--bfc-base-c-wcag)",
+            boxShadow: "none",
             borderRadius: state.selectProps.menuIsOpen ? " var(--bf-radius-xs) var(--bf-radius-xs) 0 0" : "var(--bf-radius-xs)",
             minHeight: "var(--bfs40)",
             cursor: "text"
@@ -81,7 +83,8 @@ export const selectStyles = {
     menuList: (provided)=>({
             ...provided,
             padding: 0,
-            boxShadow: "0 0 0 1px var(--bfc-theme-3)",
+            border: "1px solid var(--bfc-theme-3)",
+            borderTop: "none",
             borderRadius: "0 0 var(--bf-radius-xs) var(--bf-radius-xs)"
         }),
     placeholder: (provided)=>({
@@ -182,7 +185,7 @@ const selectStates = [
  *  Select HOC
  */ const SelectHOC = (Selector)=>{
     // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // 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 selectId = useUniqueId(inputId);
         return /*#__PURE__*/ _jsxs("div", {
@@ -234,8 +237,8 @@ const selectStates = [
 };
 /**
  *  Select component - dropdown list
- */ const SelectComponent = SelectHOC(ReactSelect);
-SelectComponent.displayName = "Select";
+ */ export const Select = SelectHOC(ReactSelect);
+Select.displayName = "Select";
 const AsyncSelect = SelectHOC(AsyncReactSelect);
 AsyncSelect.displayName = "AsyncSelect";
 const CreatableSelect = SelectHOC(CreatableReactSelect);
@@ -243,4 +246,4 @@ CreatableSelect.displayName = "CreatableSelect";
 const AsyncCreatableSelect = SelectHOC(AsyncCreatableReactSelect);
 AsyncCreatableSelect.displayName = "AsyncCreatableSelect";
 export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
-export default SelectComponent;
+export default Select;

package/dist/overrides/LoadingIndicator.internal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from "@intility/bifrost-react";
-import bfSpinner from "../assets/bfSpinner";
+import bfSpinner from "../assets/bfSpinner.js";
 export default function LoadingIndicator() {
     return /*#__PURE__*/ _jsx(Icon, {
         icon: bfSpinner,

package/dist/overrides/index.d.ts

@@ -1,6 +1,6 @@
-export { default as ClearIndicator } from "./ClearIndicator.internal";
-export { default as CustomInput } from "./CustomInput.internal";
-export { default as LoadingIndicator } from "./LoadingIndicator.internal";
-export { default as CustomMenuList } from "./CustomMenuList.internal";
-export { default as DropdownIndicator } from "./DropdownIndicator.internal";
-export { default as CustomOption } from "./CustomOption.internal";
+export { default as ClearIndicator } from "./ClearIndicator.internal.js";
+export { default as CustomInput } from "./CustomInput.internal.js";
+export { default as LoadingIndicator } from "./LoadingIndicator.internal.js";
+export { default as CustomMenuList } from "./CustomMenuList.internal.js";
+export { default as DropdownIndicator } from "./DropdownIndicator.internal.js";
+export { default as CustomOption } from "./CustomOption.internal.js";

package/dist/overrides/index.js

@@ -1,6 +1,6 @@
-export { default as ClearIndicator } from "./ClearIndicator.internal";
-export { default as CustomInput } from "./CustomInput.internal";
-export { default as LoadingIndicator } from "./LoadingIndicator.internal";
-export { default as CustomMenuList } from "./CustomMenuList.internal";
-export { default as DropdownIndicator } from "./DropdownIndicator.internal";
-export { default as CustomOption } from "./CustomOption.internal";
+export { default as ClearIndicator } from "./ClearIndicator.internal.js";
+export { default as CustomInput } from "./CustomInput.internal.js";
+export { default as LoadingIndicator } from "./LoadingIndicator.internal.js";
+export { default as CustomMenuList } from "./CustomMenuList.internal.js";
+export { default as DropdownIndicator } from "./DropdownIndicator.internal.js";
+export { default as CustomOption } from "./CustomOption.internal.js";

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@intility/bifrost-react-select",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.12",
   "description": "React select component for Intility's design system, Bifrost.",
   "type": "module",
-  "main": "dist/index.js",
+  "main": "dist/Select.js",
   "scripts": {
     "build": "run-p build:*",
     "build:module": "swc ./src -d dist",
@@ -11,11 +11,12 @@
     "start": "run-p watch:*",
     "watch:module": "npm run build:module -- --watch",
     "watch:types": "npm run build:types -- --watch --preserveWatchOutput",
-    "clean": "rimraf dist"
+    "clean": "rimraf dist",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
   },
   "exports": {
     "./package.json": "./package.json",
-    ".": "./dist/index.js"
+    ".": "./dist/Select.js"
   },
   "homepage": "https://bifrost.intility.com",
   "keywords": [
@@ -40,7 +41,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@intility/bifrost-react": "4.0.0-beta.0",
+    "@intility/bifrost-react": "4.0.0-beta.11",
     "classnames": "^2.2.6",
     "react-select": "^5.7.7"
   }

package/src/Select.test.tsx

@@ -1,6 +1,7 @@
-import Select from "./Select";
 import { render } from "@testing-library/react";
 
+import Select from "./Select.js";
+
 let getByTestId, getByText, queryByText, element, customInput, rerender;
 
 beforeEach(() => {

package/src/Select.tsx

@@ -18,12 +18,10 @@ import AsyncCreatableReactSelect, {
   AsyncCreatableProps as AsyncCreatableSelectProps,
 } from "react-select/async-creatable";
 import classNames from "classnames";
-import {
-  Description,
-  Feedback,
-  Label,
-  useUniqueId,
-} from "@intility/bifrost-react";
+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 {
   DropdownIndicator,
@@ -32,7 +30,7 @@ import {
   CustomMenuList,
   CustomOption,
   LoadingIndicator,
-} from "./overrides";
+} from "./overrides/index.js";
 
 const ReactSelect =
   (
@@ -51,8 +49,8 @@ export const selectStyles = {
   control: (provided, state) => ({
     ...provided,
     "&:hover": {
-      borderBottomColor: state.isFocused
-        ? "var(--bfc-base-c-theme)"
+      borderColor: state.isFocused
+        ? "var(--bfc-theme-3)"
         : "var(--bfc-base-c-inverted-2)",
       // Change color of dropdown icon when hover on Select
       ".bf-select__dropdown-indicator": {
@@ -62,15 +60,14 @@ export const selectStyles = {
     backgroundColor: state.isDisabled
       ? "var(--bfc-base-dimmed)"
       : "var(--bfc-base-3)",
-    border: 0,
-    borderBottomWidth: "2px",
-    borderBottomStyle: "solid",
-    borderBottomColor: state.isFocused
-      ? "var(--bfc-base-c-theme)"
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: state.isFocused
+      ? "var(--bfc-theme-3)"
       : state.isDisabled
         ? "transparent"
         : "var(--bfc-base-c-wcag)",
-    boxShadow: state.isFocused && "0 0 0 1px var(--bfc-theme-3)",
+    boxShadow: "none",
     borderRadius: state.selectProps.menuIsOpen
       ? " var(--bf-radius-xs) var(--bf-radius-xs) 0 0"
       : "var(--bf-radius-xs)",
@@ -123,7 +120,8 @@ export const selectStyles = {
   menuList: (provided) => ({
     ...provided,
     padding: 0,
-    boxShadow: "0 0 0 1px var(--bfc-theme-3)",
+    border: "1px solid var(--bfc-theme-3)",
+    borderTop: "none",
     borderRadius: "0 0 var(--bf-radius-xs) var(--bf-radius-xs)",
   }),
   placeholder: (provided) => ({
@@ -240,7 +238,7 @@ export type SelectState = (typeof selectStates)[number];
  */
 const SelectHOC = <Type, Selector>(Selector: Selector) => {
   // @ts-ignore
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/display-name
   const GeneratedSelect: Type = forwardRef<any, any>(
     (
       {
@@ -357,10 +355,10 @@ export type SelectType = {
 /**
  *  Select component - dropdown list
  */
-const SelectComponent: SelectType = SelectHOC<SelectType, typeof ReactSelect>(
+export const Select: SelectType = SelectHOC<SelectType, typeof ReactSelect>(
   ReactSelect,
 );
-SelectComponent.displayName = "Select";
+Select.displayName = "Select";
 
 // Async Select
 export type AsyncType = {
@@ -433,4 +431,4 @@ const AsyncCreatableSelect = SelectHOC<
 AsyncCreatableSelect.displayName = "AsyncCreatableSelect";
 
 export { AsyncSelect, CreatableSelect, AsyncCreatableSelect };
-export default SelectComponent;
+export default Select;

package/src/overrides/LoadingIndicator.internal.tsx

@@ -1,6 +1,6 @@
 import { Icon } from "@intility/bifrost-react";
 
-import bfSpinner from "../assets/bfSpinner";
+import bfSpinner from "../assets/bfSpinner.js";
 
 export default function LoadingIndicator() {
   return (

package/src/overrides/index.ts

@@ -1,6 +1,6 @@
-export { default as ClearIndicator } from "./ClearIndicator.internal";
-export { default as CustomInput } from "./CustomInput.internal";
-export { default as LoadingIndicator } from "./LoadingIndicator.internal";
-export { default as CustomMenuList } from "./CustomMenuList.internal";
-export { default as DropdownIndicator } from "./DropdownIndicator.internal";
-export { default as CustomOption } from "./CustomOption.internal";
+export { default as ClearIndicator } from "./ClearIndicator.internal.js";
+export { default as CustomInput } from "./CustomInput.internal.js";
+export { default as LoadingIndicator } from "./LoadingIndicator.internal.js";
+export { default as CustomMenuList } from "./CustomMenuList.internal.js";
+export { default as DropdownIndicator } from "./DropdownIndicator.internal.js";
+export { default as CustomOption } from "./CustomOption.internal.js";

package/tsconfig.json

@@ -2,12 +2,12 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "declaration": true,
+    "rootDir": "src",
     "declarationMap": false,
     "isolatedModules": false,
     "noEmit": false,
     "allowJs": false,
     "sourceMap": false,
-    "moduleResolution": "Bundler",
     "emitDeclarationOnly": true,
     "outDir": "dist"
   },

package/dist/index.d.ts

@@ -1 +0,0 @@
-export { default, AsyncSelect, CreatableSelect, AsyncCreatableSelect, selectStyles, selectComponents, } from "./Select";

package/dist/index.js

@@ -1 +0,0 @@
-export { default, AsyncSelect, CreatableSelect, AsyncCreatableSelect, selectStyles, selectComponents } from "./Select";

package/src/index.ts

@@ -1,8 +0,0 @@
-export {
-  default,
-  AsyncSelect,
-  CreatableSelect,
-  AsyncCreatableSelect,
-  selectStyles,
-  selectComponents,
-} from "./Select";