@commercetools-uikit/select-utils 12.2.7 → 13.0.2

package/dist/declarations/src/create-select-styles.d.ts

@@ -0,0 +1,294 @@
+import { ReactNode } from 'react';
+import { Theme } from '@emotion/react';
+declare type TProps = {
+    isDisabled?: boolean;
+    hasError?: boolean;
+    hasWarning?: boolean;
+    isReadOnly?: boolean;
+    showOptionGroupDivider?: boolean;
+    menuPortalZIndex?: number;
+    iconLeft?: ReactNode;
+    isMulti?: boolean;
+    hasValue?: boolean;
+};
+declare type TBase = {
+    fontColorForInput?: string;
+    borderColorForInput?: string;
+    color?: string;
+    backgroundColor?: string;
+    borderTop?: string;
+    borderColor?: string;
+    boxShadow?: string;
+    pointerEvents?: string;
+};
+declare type TState = {
+    isFocused?: boolean;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+};
+export default function createSelectStyles(props: TProps, theme: Theme): {
+    control: (base: TBase, state: TState) => {
+        fontSize: "1rem";
+        backgroundColor: "hsl(195, 35.2941176471%, 98%)" | "#fff";
+        borderColor: "#00b39e" | "#ccc" | "hsl(0, 0%, 60%)" | "#f16d0e" | "#e60050";
+        borderRadius: "6px";
+        minHeight: "32px";
+        cursor: string;
+        padding: string;
+        transition: string;
+        outline: number;
+        boxShadow: string;
+        '&:focus-within': {
+            boxShadow: string | null;
+            borderColor: "#00b39e" | null;
+        };
+        '&:hover': {
+            borderColor: "#00b39e" | null;
+        };
+        pointerEvents: string;
+        color: string | undefined;
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        borderTop?: string | undefined;
+    };
+    menu: (base: TBase) => {
+        border: string;
+        borderRadius: "6px";
+        backgroundColor: "#fff";
+        boxShadow: "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)";
+        fontSize: "1rem";
+        fontFamily: string;
+        margin: string;
+        borderColor: string | undefined;
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        color?: string | undefined;
+        borderTop?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+    indicatorSeparator: (base: TBase) => {
+        display: string;
+        margin: string;
+        padding: string;
+        marginLeft: "4px";
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        color?: string | undefined;
+        backgroundColor?: string | undefined;
+        borderTop?: string | undefined;
+        borderColor?: string | undefined;
+        boxShadow?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+    dropdownIndicator: (base: TBase) => {
+        color: "#1a1a1a";
+        margin: string;
+        padding: string;
+        marginLeft: "4px";
+        fill: string | undefined;
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        backgroundColor?: string | undefined;
+        borderTop?: string | undefined;
+        borderColor?: string | undefined;
+        boxShadow?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+    clearIndicator: (base: TBase) => {
+        display: string;
+        padding: number;
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        color?: string | undefined;
+        backgroundColor?: string | undefined;
+        borderTop?: string | undefined;
+        borderColor?: string | undefined;
+        boxShadow?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+    menuList: (base: TBase) => {
+        padding: string;
+        borderRadius: "6px";
+        backgroundColor: "#fff";
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        color?: string | undefined;
+        borderTop?: string | undefined;
+        borderColor?: string | undefined;
+        boxShadow?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+    menuPortal: (base: TBase) => {
+        zIndex: number | undefined;
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        color?: string | undefined;
+        backgroundColor?: string | undefined;
+        borderTop?: string | undefined;
+        borderColor?: string | undefined;
+        boxShadow?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+    multiValue: (base: TBase) => {
+        height: "26px";
+        backgroundColor: "hsl(0, 0%, 95%)";
+        padding: string;
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        color?: string | undefined;
+        borderTop?: string | undefined;
+        borderColor?: string | undefined;
+        boxShadow?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+    multiValueLabel: (base: TBase) => {
+        fontSize: "0.9231rem";
+        color: string | undefined;
+        padding: string;
+        borderRadius: string;
+        border: string;
+        borderWidth: string;
+        '&:last-child': {
+            borderRadius: "2px";
+            borderWidth: string;
+        };
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        backgroundColor?: string | undefined;
+        borderTop?: string | undefined;
+        borderColor?: string | undefined;
+        boxShadow?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+    multiValueRemove: (base: TBase, state: TState) => {
+        borderColor: "hsl(0, 0%, 60%)";
+        padding: string;
+        borderRadius: string;
+        borderStyle: string;
+        borderWidth: string;
+        pointerEvents: string | undefined;
+        backgroundColor: "hsl(0, 0%, 95%)";
+        'svg *': {
+            fill: string;
+        };
+        '&:hover, &:focus': {
+            borderColor: "#f16d0e";
+            backgroundColor: "hsl(0, 0%, 95%)";
+            'svg *': {
+                fill: "#f16d0e";
+            };
+        };
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        color?: string | undefined;
+        borderTop?: string | undefined;
+        boxShadow?: string | undefined;
+    };
+    indicatorsContainer: () => {
+        background: string;
+        display: string;
+        alignItems: string;
+    };
+    option: (base: TBase, state: TState) => {
+        transition: string;
+        paddingLeft: "8px";
+        paddingRight: "8px";
+        color: string | undefined;
+        backgroundColor: string | undefined;
+        '&:active': {
+            color: string | undefined;
+            backgroundColor: "hsl(195, 35.2941176471%, 95%)";
+        };
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        borderTop?: string | undefined;
+        borderColor?: string | undefined;
+        boxShadow?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+    placeholder: (base: TBase) => {
+        color: "hsl(0, 0%, 60%)";
+        width: string;
+        overflow: string;
+        whiteSpace: string;
+        textOverflow: string;
+        fill: string | undefined;
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        backgroundColor?: string | undefined;
+        borderTop?: string | undefined;
+        borderColor?: string | undefined;
+        boxShadow?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+    valueContainer: (base: TBase) => {
+        padding: string;
+        backgroundColor: string;
+        overflow: string;
+        display: string;
+        fill: string | undefined;
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        color?: string | undefined;
+        borderTop?: string | undefined;
+        borderColor?: string | undefined;
+        boxShadow?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+    singleValue: (base: TBase) => {
+        color: "hsl(0, 0%, 60%)" | "#1a1a1a";
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        backgroundColor?: string | undefined;
+        borderTop?: string | undefined;
+        borderColor?: string | undefined;
+        boxShadow?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+    group: (base: TBase) => {
+        padding: number;
+        '&:not(:first-of-type)': {
+            borderTop: string | undefined;
+        };
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        color?: string | undefined;
+        backgroundColor?: string | undefined;
+        borderTop?: string | undefined;
+        borderColor?: string | undefined;
+        boxShadow?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+    groupHeading: (base: TBase) => {
+        color: "hsl(0, 0%, 60%)";
+        fontSize: "0.9231rem";
+        textTransform: string;
+        fontWeight: string;
+        margin: string;
+        padding: string;
+        '&:empty': {
+            padding: number;
+        };
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        backgroundColor?: string | undefined;
+        borderTop?: string | undefined;
+        borderColor?: string | undefined;
+        boxShadow?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+    container: (base: TBase, state: TState) => {
+        fontFamily: string;
+        minHeight: "32px";
+        borderRadius: "6px";
+        borderColor: string | undefined;
+        boxShadow: string | undefined;
+        fontColorForInput?: string | undefined;
+        borderColorForInput?: string | undefined;
+        color?: string | undefined;
+        backgroundColor?: string | undefined;
+        borderTop?: string | undefined;
+        pointerEvents?: string | undefined;
+    };
+};
+export {};

package/dist/declarations/src/custom-styled-select-options/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const NO_VALUE_FALLBACK = "- - - -";
+export declare const SELECT_DROPDOWN_OPTION_TYPES: {
+    readonly SINGLE_PROPERTY: "single-property";
+    readonly DOUBLE_PROPERTY: "double-property";
+    readonly MULTIPLE_PROPERTIES: "multiple-properties";
+};

package/dist/declarations/src/custom-styled-select-options/custom-styled-select-options.d.ts

@@ -0,0 +1,29 @@
+import { OptionProps } from 'react-select';
+import { SELECT_DROPDOWN_OPTION_TYPES } from './constants';
+declare type TData = {
+    label?: string;
+    key?: string;
+    id?: string;
+};
+declare type SelectDropdownOptionTypesKeys = keyof typeof SELECT_DROPDOWN_OPTION_TYPES;
+declare type TProps = {
+    data?: TData;
+    noValueFallback?: string;
+    optionType?: typeof SELECT_DROPDOWN_OPTION_TYPES[SelectDropdownOptionTypesKeys];
+} & OptionProps;
+export declare const MultiplePropertiesSelectInputOption: {
+    (props: TProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const DoublePropertySelectInputOption: {
+    (props: TProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare type TCustomSelectInputOptionProps = {
+    optionInnerProps: TProps;
+} & TProps;
+export declare const CustomSelectInputOption: {
+    (props: TCustomSelectInputOptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/declarations/src/custom-styled-select-options/index.d.ts

@@ -0,0 +1,2 @@
+export { SELECT_DROPDOWN_OPTION_TYPES } from './constants';
+export * from './custom-styled-select-options';

package/dist/declarations/src/dropdown-indicator/dropdown-indicator.d.ts

@@ -0,0 +1,6 @@
+import { DropdownIndicatorProps } from 'react-select';
+declare const DropdownIndicator: {
+    (props: DropdownIndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DropdownIndicator;

package/dist/declarations/src/dropdown-indicator/index.d.ts

@@ -0,0 +1 @@
+export { default } from './dropdown-indicator';

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,10 @@
+export { default as ClearIndicator } from './clear-indicator';
+export { default as TagRemove } from './tag-remove';
+export { default as DropdownIndicator } from './dropdown-indicator';
+export { default as SearchIconDropdownIndicator } from './search-icon-dropdown-indicator';
+export { default as ValueWrapperWithIcon } from './wrapper-with-icon';
+export { customComponents as customComponentsWithIcons } from './wrapper-with-icon';
+export * from './custom-styled-select-options';
+export { default as messages } from './messages';
+export { default as createSelectStyles } from './create-select-styles';
+export { default as version } from './version';

package/dist/declarations/src/messages.d.ts

@@ -0,0 +1,28 @@
+declare const _default: {
+    createLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    noOptionsMessageWithInputValue: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    noOptionsMessageWithoutInputValue: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    placeholder: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    loadingOptions: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};
+export default _default;

package/dist/declarations/src/search-icon-dropdown-indicator/index.d.ts

@@ -0,0 +1 @@
+export { default } from './search-icon-dropdown-indicator';

package/dist/declarations/src/search-icon-dropdown-indicator/search-icon-dropdown-indicator.d.ts

@@ -0,0 +1,6 @@
+import { DropdownIndicatorProps } from 'react-select';
+declare const SearchIconDropdownIndicator: {
+    (props: DropdownIndicatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default SearchIconDropdownIndicator;

package/dist/declarations/src/tag-remove/index.d.ts

@@ -0,0 +1 @@
+export { default } from './tag-remove';

package/dist/declarations/src/tag-remove/tag-remove.d.ts

@@ -0,0 +1,12 @@
+import type { MultiValueGenericProps } from 'react-select';
+declare type TSelectProps = {
+    isReadOnly: boolean;
+} & MultiValueGenericProps['selectProps'];
+declare type TTagRemoveProps = {
+    selectProps: TSelectProps;
+} & MultiValueGenericProps;
+declare const TagRemove: {
+    (props: TTagRemoveProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TagRemove;

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "__@UI_KIT_PACKAGE/VERSION_OF_RELEASE__";
+export default _default;

package/dist/declarations/src/wrapper-with-icon/index.d.ts

@@ -0,0 +1 @@
+export { default, customComponents } from './wrapper-with-icon';

package/dist/declarations/src/wrapper-with-icon/wrapper-with-icon.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+import { SingleValueProps, PlaceholderProps } from 'react-select';
+export declare type TWrapperWithIconProps = {
+    type: string;
+    selectProps: TSelectProps;
+} & SingleValueProps & PlaceholderProps;
+declare type TSelectProps = {
+    iconLeft: ReactElement;
+};
+declare const WrapperWithIcon: {
+    (props: TWrapperWithIconProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default WrapperWithIcon;
+declare const customComponents: {
+    SingleValue: (props: TWrapperWithIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Placeholder: (props: TWrapperWithIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export { customComponents };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/select-utils",
   "description": "Utilities for working with select components.",
-  "version": "12.2.7",
+  "version": "13.0.2",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -19,23 +19,23 @@
   "module": "dist/commercetools-uikit-select-utils.esm.js",
   "files": ["dist"],
   "dependencies": {
-    "@babel/runtime": "7.16.3",
-    "@babel/runtime-corejs3": "7.16.3",
-    "@commercetools-uikit/accessible-button": "12.2.5",
-    "@commercetools-uikit/design-system": "12.2.5",
-    "@commercetools-uikit/icons": "12.2.7",
-    "@commercetools-uikit/spacings": "12.2.5",
-    "@commercetools-uikit/text": "12.2.5",
-    "@commercetools-uikit/utils": "12.2.5",
+    "@babel/runtime": "7.17.2",
+    "@babel/runtime-corejs3": "7.17.2",
+    "@commercetools-uikit/accessible-button": "13.0.2",
+    "@commercetools-uikit/design-system": "13.0.0",
+    "@commercetools-uikit/icons": "13.0.2",
+    "@commercetools-uikit/spacings": "13.0.2",
+    "@commercetools-uikit/text": "13.0.2",
+    "@commercetools-uikit/utils": "13.0.2",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "lodash": "4.17.21",
-    "prop-types": "15.7.2",
-    "react-select": "4.3.1"
+    "prop-types": "15.8.1",
+    "react-select": "5.2.2"
   },
   "devDependencies": {
     "react": "17.0.2",
-    "react-intl": "5.21.2"
+    "react-intl": "5.24.6"
   },
   "peerDependencies": {
     "react": "17.x",