@commercetools-uikit/selectable-search-input 16.10.0 → 16.12.0

package/README.md

@@ -20,11 +20,11 @@ npm --save install @commercetools-uikit/selectable-search-input
 Additionally install the peer dependencies (if not present)
 
 ```
-yarn add react react-intl
+yarn add react react-dom react-intl
 ```
 
 ```
-npm --save install react react-intl
+npm --save install react react-dom react-intl
 ```
 
 ## Usage

package/dist/commercetools-uikit-selectable-search-input.cjs.dev.js

@@ -527,7 +527,7 @@ SelectableSearchInput.getDropdownId = getDropdownName;
 var SelectableSearchInput$1 = SelectableSearchInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.10.0";
+var version = "16.12.0";
 
 exports["default"] = SelectableSearchInput$1;
 exports.version = version;

package/dist/commercetools-uikit-selectable-search-input.cjs.prod.js

@@ -471,7 +471,7 @@ SelectableSearchInput.getDropdownId = getDropdownName;
 var SelectableSearchInput$1 = SelectableSearchInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.10.0";
+var version = "16.12.0";
 
 exports["default"] = SelectableSearchInput$1;
 exports.version = version;

package/dist/commercetools-uikit-selectable-search-input.esm.js

@@ -504,6 +504,6 @@ SelectableSearchInput.getDropdownId = getDropdownName;
 var SelectableSearchInput$1 = SelectableSearchInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.10.0";
+var version = "16.12.0";
 
 export { SelectableSearchInput$1 as default, version };

package/dist/declarations/src/export-types.d.ts

@@ -1 +1 @@
-export type { TSelectableSearchInputProps, TCustomEvent, TValue, TOption, TOptionObject, } from './selectable-search-input';
+export type { TSelectableSearchInputProps, TCustomEvent, TValue, TOption, TOptionObject, } from "./selectable-search-input.js";

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

@@ -1,3 +1,3 @@
-export { default } from './selectable-search-input';
-export { default as version } from './version';
-export * from './export-types';
+export { default } from "./selectable-search-input.js";
+export { default as version } from "./version.js";
+export * from "./export-types.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/selectable-search-input",
   "description": "A controlled selectable search input component for single-line strings with validation states.",
-  "version": "16.10.0",
+  "version": "16.12.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,19 +21,19 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/constraints": "16.10.0",
-    "@commercetools-uikit/design-system": "16.10.0",
-    "@commercetools-uikit/hooks": "16.10.0",
-    "@commercetools-uikit/icons": "16.10.0",
-    "@commercetools-uikit/input-utils": "16.10.0",
-    "@commercetools-uikit/secondary-icon-button": "16.10.0",
-    "@commercetools-uikit/select-utils": "16.10.0",
-    "@commercetools-uikit/utils": "16.10.0",
+    "@commercetools-uikit/constraints": "16.12.0",
+    "@commercetools-uikit/design-system": "16.12.0",
+    "@commercetools-uikit/hooks": "16.12.0",
+    "@commercetools-uikit/icons": "16.12.0",
+    "@commercetools-uikit/input-utils": "16.12.0",
+    "@commercetools-uikit/secondary-icon-button": "16.12.0",
+    "@commercetools-uikit/select-utils": "16.12.0",
+    "@commercetools-uikit/utils": "16.12.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "lodash": "4.17.21",
     "prop-types": "15.8.1",
-    "react-select": "5.7.3"
+    "react-select": "5.8.0"
   },
   "devDependencies": {
     "react": "17.0.2",

package/dist/declarations/src/selectable-search-input.styles.d.ts

@@ -1,428 +0,0 @@
-import { type Props as ReactSelectProps } from 'react-select';
-type TInputProps = {
-    isDisabled?: boolean;
-    hasError?: boolean;
-    hasWarning?: boolean;
-    isReadOnly?: boolean;
-    horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
-};
-declare const getSelectableSearchInputStyles: (props: TInputProps) => import("@emotion/utils").SerializedStyles[];
-declare const getClearIconButtonStyles: (props: TInputProps) => import("@emotion/utils").SerializedStyles[];
-declare const getSearchIconButtonStyles: (props: TInputProps) => import("@emotion/utils").SerializedStyles[];
-declare const getBackgroundColor: (props: TInputProps, defaultColor: string) => string;
-declare const getSelectableSearchInputContainerStyles: (props: TInputProps) => (false | import("@emotion/utils").SerializedStyles)[];
-type TBase = {
-    backgroundColor?: string;
-    color?: string;
-};
-type TCreateSelectableSelectStyles = {
-    isDisabled?: boolean;
-    hasError?: boolean;
-    hasWarning?: boolean;
-    isReadOnly?: boolean;
-    menuPortalZIndex?: number;
-    dropdownHasFocus?: boolean;
-    horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
-};
-declare const createSelectableSelectStyles: ({ hasWarning, hasError, isDisabled, isReadOnly, menuPortalZIndex, dropdownHasFocus, horizontalConstraint, }: TCreateSelectableSelectStyles) => {
-    control: (base: TBase, state: ReactSelectProps) => {
-        padding: "var(--padding-for-selectable-search-input-dropdown, 0 12px)";
-        borderTopRightRadius: string;
-        borderBottomRightRadius: string;
-        borderRight: string;
-        height: string;
-        borderColor: string;
-        cursor: string;
-        backgroundColor: string;
-        '&:hover': {
-            backgroundColor: string;
-        };
-        '&:focus-within': {
-            boxShadow: string | null;
-            borderColor: "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))" | null;
-        };
-        pointerEvents: string;
-        color: string | undefined;
-        display?: string | undefined;
-        fontSize: "var(--font-size-for-input, 1rem)";
-        borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-for-select-input, 2px)";
-        borderRadius: "var(--border-radius-for-input, 4px)";
-        minHeight: "var(--height-for-input, 40px)";
-        transition: string;
-        outline: number;
-        boxShadow: string;
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        borderTop?: string | undefined;
-    };
-    singleValue: (base: TBase) => {
-        marginLeft: number;
-        maxWidth: string;
-        color: "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-input-when-error, #e60050)" | "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))" | "var(--font-color-for-input-when-warning, #f16d0e)";
-        backgroundColor?: string | undefined;
-    };
-    dropdownIndicator: () => {
-        fill: "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-select-input-icon, hsl(232, 18%, 60%))";
-    };
-    menu: (base: {
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    }) => {
-        border: string;
-        borderRadius: "var(--border-radius-for-input, 4px)";
-        backgroundColor: "var(--background-color-for-input, #fff)";
-        boxShadow: "var(--shadow-for-select-input-menu, 0 2px 5px 0px rgba(0, 0, 0, 0.15))";
-        fontSize: "var(--font-size-for-input, 1rem)";
-        fontFamily: string;
-        margin: string;
-        borderColor: string | undefined;
-        width: string;
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        borderTop?: string | undefined;
-        pointerEvents?: string | undefined;
-    };
-    indicatorSeparator: (base: {
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    }) => {
-        display: string;
-        margin: string;
-        padding: string;
-        marginLeft: "var(--spacing-10, 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;
-    };
-    clearIndicator: (base: {
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    }) => {
-        display: string;
-        padding: number;
-        marginLeft: "var(--margin-for-select-input-icon, 8px)";
-        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: {
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    }) => {
-        padding: "var(--padding-for-select-input-menu, var(--spacing-10) 0)";
-        borderRadius: "var(--border-radius-for-input, 4px)";
-        backgroundColor: "var(--background-color-for-input, #fff)";
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    };
-    menuPortal: (base: {
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    }) => {
-        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: {
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    }) => {
-        display: string;
-        alignItems: "var(--align-items-for-select-input-tag, center)";
-        height: "var(--height-for-select-input-tag, 32px)";
-        backgroundColor: "var(--background-color-for-tag, hsl(232, 18%, 95%))";
-        padding: string;
-        border: "var(--border-for-select-input-tag, 1px solid var(--color-neutral-85))";
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    };
-    multiValueLabel: (base: {
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    }) => {
-        fontSize: "var(--font-size-for-select-input-tag, 1rem)";
-        color: string | undefined;
-        padding: string;
-        borderRadius: string;
-        border: string;
-        borderWidth: string;
-        '&:last-child': {
-            borderRadius: "var(--border-radius-for-tag, 2px)";
-            borderWidth: "var(--border-width-1, 1px)";
-        };
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    };
-    multiValueRemove: (base: {
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    }, state: {
-        isFocused?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isSelected?: boolean | undefined;
-    }) => {
-        borderColor: "var(--border-color-for-tag, hsl(232, 18%, 80%))";
-        padding: string;
-        borderRadius: string;
-        borderStyle: string;
-        borderWidth: string;
-        pointerEvents: string | undefined;
-        backgroundColor: "var(--background-color-for-tag, hsl(232, 18%, 95%))";
-        'svg *': {
-            fill: string;
-        };
-        '&:hover, &:focus': {
-            borderColor: "var(--border-color-for-tag-warning, #f16d0e)";
-            backgroundColor: "var(--background-color-for-tag, hsl(232, 18%, 95%))";
-            'svg *': {
-                fill: "var(--font-color-for-clear-input-icon-when-hovered, #e60050)";
-            };
-        };
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        borderTop?: string | undefined;
-        boxShadow?: string | undefined;
-    };
-    indicatorsContainer: () => {
-        background: string;
-        display: string;
-        alignItems: string;
-    };
-    option: (base: {
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    }, state: {
-        isFocused?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isSelected?: boolean | undefined;
-    }) => {
-        transition: string;
-        paddingLeft: "var(--padding-left-for-select-input-options, 16px)";
-        paddingRight: "var(--padding-right-for-select-input-options, 16px)";
-        paddingTop: "var(--padding-top-for-select-input-options, 8px)";
-        paddingBottom: "var(--padding-bottom-for-select-input-options, 8px)";
-        lineHeight: "var(--line-height-for-select-input-options, 1.625rem)";
-        color: string | undefined;
-        backgroundColor: string | undefined;
-        '&:active': {
-            color: string | undefined;
-            backgroundColor: "var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))";
-        };
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    };
-    placeholder: (base: {
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    }) => {
-        color: "var(--placeholder-font-color-for-input, hsl(232, 18%, 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: {
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    }) => {
-        padding: string;
-        backgroundColor: string;
-        overflow: string;
-        display: string;
-        fill: "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-select-input-icon, hsl(232, 18%, 60%))";
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    };
-    group: (base: {
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    }) => {
-        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: {
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    }) => {
-        color: "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))";
-        fontSize: "var(--font-size-small, 0.9231rem)";
-        textTransform: string;
-        fontWeight: 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: {
-        fontColorForInput?: string | undefined;
-        borderColorForInput?: string | undefined;
-        color?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderTop?: string | undefined;
-        borderColor?: string | undefined;
-        boxShadow?: string | undefined;
-        pointerEvents?: string | undefined;
-    }, state: {
-        isFocused?: boolean | undefined;
-        isDisabled?: boolean | undefined;
-        isSelected?: boolean | undefined;
-    }) => {
-        fontFamily: string;
-        minHeight: "var(--size-height-input, 32px)";
-        borderRadius: "var(--border-radius-for-input, 4px)";
-        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 { getSelectableSearchInputStyles, getSelectableSearchInputContainerStyles, getClearIconButtonStyles, getSearchIconButtonStyles, getBackgroundColor, createSelectableSelectStyles, };

package/dist/declarations/src/selectable-select.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import type { TSelectableSearchInputProps, TOption } from './selectable-search-input';
-type TSelectableSelect = {
-    dropdownHasFocus: boolean;
-    handleDropdownFocus: () => void;
-    handleDropdownBlur: () => void;
-    textInputRef: React.RefObject<HTMLInputElement>;
-    selectedOption?: TOption;
-} & TSelectableSearchInputProps;
-declare const SelectableSelect: (props: TSelectableSelect) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default SelectableSelect;