@stenajs-webui/select 15.7.0 → 16.0.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v16.0.0 (Wed Jun 15 2022)
+
+#### 💥 Breaking Change
+
+- Add variant to Select and date inputs [#463](https://github.com/StenaIT/stenajs-webui/pull/463) ([@nikteg](https://github.com/nikteg) [@lindskogen](https://github.com/lindskogen))
+
+#### Authors: 2
+
+- Johan Lindskogen ([@lindskogen](https://github.com/lindskogen))
+- Niklas ([@nikteg](https://github.com/nikteg))
+
+---
+
 # v15.0.3 (Fri Feb 25 2022)
 
 #### 🐛 Bug Fix

package/dist/SelectTheme.d.ts

@@ -17,11 +17,16 @@ export interface SelectTheme {
     input: {
         backgroundColor: string;
         border: string;
-        borderFocused: string;
         borderColor: string;
         borderColorFocused: string;
         borderRadius: string;
         disabledBackgroundColor: string;
+        warningBackgroundColor: string;
+        errorBackgroundColor: string;
+        successBackgroundColor: string;
+        warningBorderColor: string;
+        errorBorderColor: string;
+        successBorderColor: string;
         boxShadowFocused: string;
         fontFamily: string;
         fontSize: string;
@@ -68,4 +73,3 @@ export interface SelectTheme {
     };
 }
 export declare const defaultSelectTheme: SelectTheme;
-export declare const selectThemeDark: SelectTheme;

package/dist/components/ui/AsyncMultiSelect.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { AsyncProps } from "react-select/async";
+import { SelectVariant } from "../../util/StylesBuilder";
 import { GroupBase } from "react-select/dist/declarations/src/types";
 export interface AsyncMultiSelectProps<T = {
     label: string;
     value: string;
 }> extends AsyncProps<T, true, GroupBase<T>> {
-    variant?: "dark" | "light";
+    variant?: SelectVariant;
     isMulti?: true;
 }
 export declare const AsyncMultiSelect: <T extends {}>({ variant, styles, isMulti, ...selectProps }: AsyncMultiSelectProps<T>) => JSX.Element;

package/dist/components/ui/AsyncSelect.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { AsyncProps } from "react-select/async";
+import { SelectVariant } from "../../util/StylesBuilder";
 import { GroupBase } from "react-select/dist/declarations/src/types";
 export interface AsyncSelectProps<T = {
     label: string;
     value: string;
 }> extends AsyncProps<T, false, GroupBase<T>> {
-    variant?: "dark" | "light";
+    variant?: SelectVariant;
     isMulti?: false;
 }
 export declare const AsyncSelect: <T extends {}>({ variant, styles, isMulti, ...selectProps }: AsyncSelectProps<T>) => JSX.Element;

package/dist/components/ui/AsyncSelect.stories.d.ts

@@ -5,4 +5,3 @@ declare const _default: {
 };
 export default _default;
 export declare const _AsyncSelect: () => JSX.Element;
-export declare const AsyncSelectDark: () => JSX.Element;

package/dist/components/ui/GroupedMultiSelect.stories.d.ts

@@ -5,5 +5,5 @@ declare const _default: {
 };
 export default _default;
 export declare const Standard: () => JSX.Element;
-export declare const StandardDark: () => JSX.Element;
+export declare const WithVariant: () => JSX.Element;
 export declare const Disabled: () => JSX.Element;

package/dist/components/ui/MultiSelect.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { Props, SelectComponentsConfig } from "react-select";
+import { SelectVariant } from "../../util/StylesBuilder";
 import { GroupBase } from "react-select/dist/declarations/src/types";
 export interface MultiSelectProps<TOption = {
     label: string;
     value: string;
 }> extends Props<TOption, true> {
-    variant?: "dark" | "light";
+    variant?: SelectVariant;
     isMulti?: true;
 }
 export declare type MultiSelectComponentsConfig<TOption> = SelectComponentsConfig<TOption, true, GroupBase<TOption>>;

package/dist/components/ui/MultiSelect.stories.d.ts

@@ -5,6 +5,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Standard: () => JSX.Element;
+export declare const WithVariant: () => JSX.Element;
 export declare const WithGroupHeadings: () => JSX.Element;
-export declare const MultiselectDark: () => JSX.Element;
 export declare const Disabled: () => JSX.Element;

package/dist/components/ui/Select.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { Props } from "react-select";
+import { SelectVariant } from "../../util/StylesBuilder";
 export interface SelectProps<T = {
     label: string;
     value: string;
 }> extends Props<T, false> {
-    variant?: "dark" | "light";
+    variant?: SelectVariant;
     isMulti?: false;
 }
 export declare const Select: <T extends {}>({ variant, styles, isMulti, ...selectProps }: SelectProps<T>) => JSX.Element;

package/dist/components/ui/Select.stories.d.ts

@@ -5,7 +5,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Standard: () => JSX.Element;
+export declare const WithVariant: () => JSX.Element;
 export declare const LongLabels: () => JSX.Element;
-export declare const StandardDark: () => JSX.Element;
 export declare const WithGroupHeadings: () => JSX.Element;
 export declare const Disabled: () => JSX.Element;

package/dist/index.d.ts

@@ -7,5 +7,4 @@ export * from "./components/ui/ChipMultiSelect/ChipMultiSelect";
 export * from "./components/ui/ChipMultiSelect/GroupedChipMultiSelect";
 export * from "./SelectTheme";
 export * from "./util/StylesBuilder";
-export * from "./util/StylesMerger";
 export { DropdownOption } from "./components/ui/GroupedMultiSelectTypes";

package/dist/index.es.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import SelectComponent, { mergeStyles as mergeStyles$1, components } from 'react-select';
+import SelectComponent, { mergeStyles, components } from 'react-select';
 import AsyncComponent from 'react-select/async';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { Row, Space, Text, Column, Spacing } from '@stenajs-webui/core';
 import { Icon, Chip, FlatButton } from '@stenajs-webui/elements';
-import { differenceWith, isEqual, uniqWith, intersectionWith, merge } from 'lodash';
+import { differenceWith, isEqual, uniqWith, intersectionWith } from 'lodash';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -72,11 +72,16 @@ var defaultSelectTheme = {
     },
     input: {
         backgroundColor: "var(--swui-field-bg-enabled)",
-        border: "1px solid var(--swui-field-border-color)",
-        borderFocused: "1px solid var(--swui-field-border-color-hover)",
+        border: "1px solid var(--swui-select-border-color)",
         borderColor: "var(--swui-field-border-color)",
         borderColorFocused: "var(--swui-field-border-color-hover)",
         disabledBackgroundColor: "var(--swui-field-bg-disabled)",
+        warningBackgroundColor: "var(--swui-state-alert-light-color)",
+        errorBackgroundColor: "var(--swui-state-error-light-color)",
+        successBackgroundColor: "var(--swui-state-success-light-color)",
+        warningBorderColor: "var(--swui-state-alert-color)",
+        errorBorderColor: "var(--swui-state-error-color)",
+        successBorderColor: "var(--swui-state-success-color)",
         boxShadowFocused: "var(--swui-field-focus-shadow)",
         fontFamily: "var(--swui-font-primary)",
         fontSize: "var(--swui-font-size-inputs)",
@@ -122,74 +127,6 @@ var defaultSelectTheme = {
         removeButtonHoverBackgroundColor: "var(--swui-primary-action-color-hover)",
         removeButtonHoverTextColor: "var(--swui-white)",
     },
-};
-var selectThemeDark = {
-    arrowColor: {
-        focused: {
-            hover: "white",
-            standard: "var(--lhds-color-ui-500)",
-        },
-        closed: {
-            hover: "white",
-            standard: "var(--lhds-color-ui-500)",
-        },
-    },
-    clearButtonColor: {
-        standard: "var(--lhds-color-ui-400)",
-        hover: "white",
-    },
-    input: {
-        backgroundColor: "#4a5d73",
-        border: "1px solid transparent",
-        borderFocused: "1px solid #92a3b5",
-        borderColor: "transparent",
-        borderColorFocused: "#92a3b5",
-        disabledBackgroundColor: "var(--swui-field-bg-disabled)",
-        boxShadowFocused: "var(--swui-field-focus-shadow)",
-        fontFamily: "var(--swui-font-primary)",
-        fontSize: "var(--swui-font-size-inputs)",
-        height: "32px",
-        minHeight: "32px",
-        placeholderColor: "white",
-        textColor: "white",
-        borderRadius: "4px",
-    },
-    loadingIndicator: {
-        textColor: "white",
-    },
-    menu: {
-        activeBackgroundColor: "#6F7E90",
-        activeTextColor: "white",
-        selectedItemActiveBackgroundColor: "#6F7E90",
-        selectedItemActiveTextColor: "white",
-        disabledTextColor: "var(--swui-text-disabled-color)",
-        disabledBackgroundColor: "var(--swui-field-bg-disabled)",
-        backgroundColor: "#4a5d73",
-        textColor: "white",
-        hoverTextColor: "white",
-        hoverBackgroundColor: "#6F7E90",
-        selectedItemTextColor: "white",
-        selectedItemIconColor: "white",
-        selectedItemHoverTextColor: "white",
-        selectedItemHoverIconColor: "white",
-        selectedItemBackgroundColor: "#4a5d73",
-        selectedItemHoverBackgroundColor: "#6F7E90",
-        zIndex: 1,
-        width: "auto",
-        minWidth: "100%",
-        whiteSpace: "nowrap",
-    },
-    menuPortal: {
-        zIndex: 1,
-    },
-    multiSelect: {
-        backgroundColor: "#B9D8DF",
-        textColor: "var(--lhds-color-ui-700)",
-        removeButtonBackgroundColor: "#B9D8DF",
-        removeButtonTextColor: "var(--lhds-color-ui-700)",
-        removeButtonHoverBackgroundColor: "#226F81",
-        removeButtonHoverTextColor: "white",
-    },
 };
 
 var resolveOptionBackgroundColor = function (colors, isDisabled, isSelected, isFocused) {
@@ -226,7 +163,53 @@ var resolveOptionColor = function (colors, isDisabled, isSelected, isFocused) {
         return undefined;
     }
 };
-var createStylesFromTheme = function (_a) {
+var resolveInputBackgroundColor = function (colors, isDisabled, isFocused, variant) {
+    if (isDisabled) {
+        return colors.disabledBackgroundColor;
+    }
+    else if (isFocused) {
+        return colors.backgroundColor;
+    }
+    else if (variant === "warning") {
+        return colors.warningBackgroundColor;
+    }
+    else if (variant === "success") {
+        return colors.successBackgroundColor;
+    }
+    else if (variant === "error") {
+        return colors.errorBackgroundColor;
+    }
+    else {
+        return colors.backgroundColor;
+    }
+};
+var resolveInputBorderColor = function (colors, isDisabled, isFocused, isHovered, variant) {
+    if (isDisabled) {
+        return colors.borderColor;
+    }
+    else if (isFocused) {
+        return colors.borderColorFocused;
+    }
+    else if (variant === "warning") {
+        return colors.warningBorderColor;
+    }
+    else if (variant === "success") {
+        return colors.successBorderColor;
+    }
+    else if (variant === "error") {
+        return colors.errorBorderColor;
+    }
+    else if (isHovered) {
+        return colors.borderColorFocused;
+    }
+    else {
+        return colors.borderColor;
+    }
+};
+/**
+ * @deprecated
+ */
+var createStylesFromTheme = function (_a, variant) {
     var menu = _a.menu, menuPortal = _a.menuPortal, input = _a.input, multiSelect = _a.multiSelect, clearButtonColor = _a.clearButtonColor, arrowColor = _a.arrowColor, loadingIndicator = _a.loadingIndicator;
     return ({
         option: function (base, _a) {
@@ -245,14 +228,11 @@ var createStylesFromTheme = function (_a) {
                 } }));
         },
         control: function (base, _a) {
-            var isFocused = _a.isFocused, isDisabled = _a.isDisabled;
+            var isFocused = _a.isFocused, isDisabled = _a.isDisabled, menuIsOpen = _a.menuIsOpen;
             return (__assign(__assign({}, base), { 
                 // none of react-selects styles are passed to <View />
-                fontFamily: input.fontFamily, fontSize: input.fontSize, minHeight: input.minHeight, backgroundColor: isDisabled
-                    ? input.disabledBackgroundColor
-                    : input.backgroundColor, borderRadius: input.borderRadius, border: isFocused ? input.borderFocused : input.border, borderColor: isFocused ? input.borderColorFocused : input.borderColor, boxShadow: isFocused ? input.boxShadowFocused : undefined, "&:hover": {
-                    border: input.borderFocused,
-                    borderColor: input.borderColorFocused,
+                fontFamily: input.fontFamily, fontSize: input.fontSize, minHeight: input.minHeight, backgroundColor: resolveInputBackgroundColor(input, isDisabled, isFocused, variant), borderRadius: input.borderRadius, border: input.border, "--swui-select-border-color": resolveInputBorderColor(input, isDisabled, isFocused || menuIsOpen, false, variant), boxShadow: isFocused ? input.boxShadowFocused : undefined, "&:hover": {
+                    "--swui-select-border-color": resolveInputBorderColor(input, false, isFocused || menuIsOpen, true, variant),
                 } }));
         },
         singleValue: function (base) { return (__assign(__assign({}, base), { fontFamily: input.fontFamily, fontSize: input.fontSize, color: input.textColor })); },
@@ -276,7 +256,7 @@ var createStylesFromTheme = function (_a) {
                     height: 14,
                 } }));
         },
-        menu: function (base) { return (__assign(__assign({}, base), { backgroundColor: menu.backgroundColor, color: menu.textColor, minWidth: menu.minWidth || base.minWidth, zIndex: menu.zIndex, width: menu.width || base.width, border: input.borderFocused })); },
+        menu: function (base) { return (__assign(__assign({}, base), { backgroundColor: menu.backgroundColor, color: menu.textColor, minWidth: menu.minWidth || base.minWidth, zIndex: menu.zIndex, width: menu.width || base.width, border: input.border, borderColor: input.borderColorFocused })); },
         menuPortal: function (base) { return (__assign(__assign({}, base), { zIndex: menuPortal.zIndex })); },
         multiValueRemove: function (styles) { return (__assign(__assign({}, styles), { backgroundColor: multiSelect.removeButtonBackgroundColor, ":hover": {
                 color: multiSelect.removeButtonHoverTextColor,
@@ -285,40 +265,43 @@ var createStylesFromTheme = function (_a) {
         multiValue: function (base) { return (__assign(__assign({}, base), { backgroundColor: multiSelect.backgroundColor, color: multiSelect.textColor, fontFamily: input.fontFamily, fontSize: "12px", alignItems: "center", margin: 0, marginRight: 2 })); },
         loadingMessage: function (base) { return (__assign(__assign({}, base), { color: loadingIndicator.textColor, fontFamily: input.fontFamily, fontSize: input.fontSize })); },
     });
+};
+var createStylesFromVariant = function (variant) {
+    return createStylesFromTheme(defaultSelectTheme, variant);
 };
 
 var AsyncMultiSelect = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "light" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
+    var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
     var selectStyles = useMemo(function () {
-        var sourceStyles = createStylesFromTheme(variant === "light" ? defaultSelectTheme : selectThemeDark);
-        return styles ? mergeStyles$1(sourceStyles, styles) : sourceStyles;
+        var sourceStyles = createStylesFromVariant(variant);
+        return styles ? mergeStyles(sourceStyles, styles) : sourceStyles;
     }, [variant, styles]);
     return (React.createElement(AsyncComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: true })));
 };
 
 var AsyncSelect = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "light" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
+    var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
     var selectStyles = useMemo(function () {
-        var sourceStyles = createStylesFromTheme(variant === "light" ? defaultSelectTheme : selectThemeDark);
-        return styles ? mergeStyles$1(sourceStyles, styles) : sourceStyles;
+        var sourceStyles = createStylesFromVariant(variant);
+        return styles ? mergeStyles(sourceStyles, styles) : sourceStyles;
     }, [variant, styles]);
     return (React.createElement(AsyncComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: false })));
 };
 
 var MultiSelect = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "light" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
+    var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
     var selectStyles = useMemo(function () {
-        var sourceStyles = createStylesFromTheme(variant === "light" ? defaultSelectTheme : selectThemeDark);
-        return styles ? mergeStyles$1(sourceStyles, styles) : sourceStyles;
+        var sourceStyles = createStylesFromVariant(variant);
+        return styles ? mergeStyles(sourceStyles, styles) : sourceStyles;
     }, [variant, styles]);
     return (React.createElement(SelectComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: true })));
 };
 
 var Select = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "light" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
+    var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, styles = _a.styles; _a.isMulti; var selectProps = __rest(_a, ["variant", "styles", "isMulti"]);
     var selectStyles = useMemo(function () {
-        var sourceStyles = createStylesFromTheme(variant === "light" ? defaultSelectTheme : selectThemeDark);
-        return styles ? mergeStyles$1(sourceStyles, styles) : sourceStyles;
+        var sourceStyles = createStylesFromVariant(variant);
+        return styles ? mergeStyles(sourceStyles, styles) : sourceStyles;
     }, [variant, styles]);
     return (React.createElement(SelectComponent, __assign({ styles: selectStyles }, selectProps, { isMulti: false })));
 };
@@ -449,15 +432,14 @@ function formatInnerOptionLabel(props) {
         : props.label;
 }
 var GroupedMultiSelect = function (_a) {
-    var onChange = _a.onChange, options = _a.options, value = _a.value, _b = _a.variant, variant = _b === void 0 ? "light" : _b; _a.formatGroupLabel; _a.formatOptionLabel; var selectProps = __rest(_a, ["onChange", "options", "value", "variant", "formatGroupLabel", "formatOptionLabel"]);
-    var theme = variant === "light" ? defaultSelectTheme : selectThemeDark;
+    var onChange = _a.onChange, options = _a.options, value = _a.value, _b = _a.variant, variant = _b === void 0 ? "standard" : _b; _a.formatGroupLabel; _a.formatOptionLabel; var selectProps = __rest(_a, ["onChange", "options", "value", "variant", "formatGroupLabel", "formatOptionLabel"]);
     var Option = function (props) {
         var label = formatInnerOptionLabel(props);
         var isGroupOption = "internalOptions" in props.data;
         return (React.createElement(components.Option, __assign({}, props),
             React.createElement(Row, null,
                 !isGroupOption && React.createElement(Space, null),
-                React.createElement(InnerOption, { theme: theme, size: !isGroupOption ? "small" : undefined, label: label, selected: props.isSelected, focused: props.isFocused }))));
+                React.createElement(InnerOption, { theme: defaultSelectTheme, size: !isGroupOption ? "small" : undefined, label: label, selected: props.isSelected, focused: props.isFocused }))));
     };
     var MultiValue = function (props) {
         return !("internalOptions" in props.data) ? (React.createElement(components.MultiValue, __assign({}, props))) : null;
@@ -507,12 +489,5 @@ var GroupedChipMultiSelect = React.memo(function (_a) {
         React.createElement(GroupedMultiSelect, __assign({}, selectProps, { isClearable: false, value: value, onChange: onValueChange, backspaceRemovesValue: false, hideSelectedOptions: true, controlShouldRenderValue: false, placeholder: placeholder, isLoading: loading, inputValue: inputValue, onInputChange: onInputChange }))));
 });
 
-var mergeStyles = function (themeStyle, userStyle) {
-    if (!userStyle) {
-        return themeStyle;
-    }
-    return merge({}, themeStyle, userStyle);
-};
-
-export { AsyncMultiSelect, AsyncSelect, ChipMultiSelect, GroupedChipMultiSelect, GroupedMultiSelect, MultiSelect, Select, createStylesFromTheme, defaultSelectTheme, mergeStyles, selectThemeDark };
+export { AsyncMultiSelect, AsyncSelect, ChipMultiSelect, GroupedChipMultiSelect, GroupedMultiSelect, MultiSelect, Select, createStylesFromTheme, createStylesFromVariant, defaultSelectTheme };
 //# sourceMappingURL=index.es.js.map