@commercetools-uikit/creatable-select-field 19.9.0 → 19.10.0

package/dist/commercetools-uikit-creatable-select-field.cjs.dev.js

@@ -227,7 +227,7 @@ CreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.9.0";
+var version = "19.10.0";
 
 exports["default"] = CreatableSelectField;
 exports.version = version;

package/dist/commercetools-uikit-creatable-select-field.cjs.prod.js

@@ -186,7 +186,7 @@ CreatableSelectField.getDerivedStateFromProps = (props, state) => ({
 CreatableSelectField.propTypes = {};
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.9.0";
+var version = "19.10.0";
 
 exports["default"] = CreatableSelectField;
 exports.version = version;

package/dist/commercetools-uikit-creatable-select-field.esm.js

@@ -201,6 +201,6 @@ CreatableSelectField.propTypes = process.env.NODE_ENV !== "production" ? {
 } : {};
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "19.9.0";
+var version = "19.10.0";
 
 export { CreatableSelectField as default, version };

package/dist/declarations/src/creatable-select-field.d.ts

@@ -24,57 +24,288 @@ type TCustomEvent = {
     persist?: () => void;
 };
 export type TCreatableSelectFieldProps = {
+    /**
+     * Used as HTML id property. An id is auto-generated when it is not specified.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     id?: ReactSelectCreatableProps['inputId'];
+    /**
+     * Horizontal size limit of the input fields.
+     */
     horizontalConstraint?: 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale' | 'auto';
+    /**
+     * A map of errors. Error messages for known errors are rendered automatically.
+     * <br>
+     * Unknown errors will be forwarded to `renderError`
+     */
     errors?: TFieldErrors;
+    /**
+     * Called with custom errors. This function can return a message which will be wrapped in an ErrorMessage. It can also return null to show no error.
+     */
     renderError?: TErrorRenderer;
+    /**
+     * A map of warnings. Warning messages for known warnings are rendered automatically.
+     * <br />
+     * Unknown warnings will be forwarded to `renderWarning`
+     */
     warnings?: TFieldWarnings;
+    /**
+     * Called with custom warnings. This function can return a message which will be wrapped in an WarningMessage. It can also return null to show no warning.
+     */
     renderWarning?: (key: string, warning?: boolean) => ReactNode;
+    /**
+     * Indicates if the value is required. Shows an the "required asterisk" if so.
+     */
     isRequired?: boolean;
+    /**
+     * Indicates whether the field was touched. Errors will only be shown when the field was touched.
+     */
     touched?: boolean[] | boolean;
+    /**
+     * Aria label (for assistive tech)
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     'aria-label'?: ReactSelectCreatableProps['aria-label'];
+    /**
+     * HTML ID of an element that should be used as the label (for assistive tech)
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     'aria-labelledby'?: ReactSelectCreatableProps['aria-label'];
+    /**
+     * 	Focus the control when it is mounted
+     */
     isAutofocussed?: boolean;
+    /**
+     * Remove the currently focused option when the user presses backspace
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     backspaceRemovesValue?: ReactSelectCreatableProps['backspaceRemovesValue'];
+    /**
+     * Map of components to overwrite the default ones, see [what components you can override](https://react-select.com/components)
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     components?: ReactSelectCreatableProps['components'];
+    /**
+     * Custom method to filter whether an option should be displayed in the menu
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     filterOption?: ReactSelectCreatableProps['filterOption'];
+    /**
+     * The id to set on the SelectContainer component
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     containerId?: ReactSelectCreatableProps['id'];
+    /**
+     * Is the select value clearable
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     isClearable?: ReactSelectCreatableProps['isClearable'];
+    /**
+     * Is the select disabled
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     isDisabled?: ReactSelectCreatableProps['isDisabled'];
+    /**
+     * Is the select read-only
+     */
     isReadOnly?: ConstrainBooleanParameters;
+    /**
+     * Override the built-in logic to detect whether an option is disabled
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     isOptionDisabled?: ReactSelectCreatableProps['isOptionDisabled'];
+    /**
+     * Support multiple selected options
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     isMulti?: ReactSelectCreatableProps['isMulti'];
+    /**
+     * Whether to enable search functionality
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     isSearchable?: ReactSelectCreatableProps['isSearchable'];
+    /**
+     * Indicates the input field has an error
+     * @deprecated Please use the `warnings` prop instead so users know the reason why the field is in warning state.
+     */
     hasWarning?: boolean;
+    /**
+     * Maximum height of the menu before scrolling
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     maxMenuHeight?: ReactSelectCreatableProps['maxMenuHeight'];
+    /**
+     * Dom element to portal the select menu to
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     menuPortalTarget?: ReactSelectCreatableProps['menuPortalTarget'];
+    /**
+     * z-index value for the menu portal
+     * <br>
+     * Use in conjunction with `menuPortalTarget`
+     */
     menuPortalZIndex?: number;
+    /**
+     * whether the menu should block scroll while open
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     menuShouldBlockScroll?: ReactSelectCreatableProps['menuShouldBlockScroll'];
+    /**
+     * Name of the HTML Input (optional - without this, no input will be rendered)
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     name?: ReactSelectCreatableProps['name'];
+    /**
+     * Can be used to render a custom value when there are no options (either because of no search results, or all options have been used, or there were none in the first place).
+     * <br>
+     * Gets called with `{ inputValue: String }`. `inputValue` will be an empty string when no search text is present.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     noOptionsMessage?: ReactSelectCreatableProps['noOptionsMessage'];
+    /**
+     * Handle blur events on the control
+     */
     onBlur?: (event: TCustomEvent) => void;
+    /**
+     * Called with a fake event when value changes.
+     * <br>
+     * The event's `target.name` will be the name supplied in props. The event's `target.value` will hold the value. The value will be the selected option, or an array of options in case `isMulti` is `true`.
+     */
     onChange?: (event: TCustomEvent, info: ActionMeta<unknown>) => void;
+    /**
+     * Handle focus events on the control
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     onFocus?: ReactSelectCreatableProps['onFocus'];
+    /**
+     * Handle change events on the input
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     onInputChange?: ReactSelectCreatableProps['onInputChange'];
+    /**
+     * Array of options that populate the select menu
+     */
     options?: TOptions;
+    /**
+     * Placeholder text for the select value
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     placeholder?: ReactSelectCreatableProps['placeholder'];
+    /**
+     * Use this property to reduce the paddings of the component for a ui compact variant
+     */
     isCondensed?: boolean;
+    /**
+     * Sets the tabIndex attribute on the input
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     tabIndex?: ReactSelectCreatableProps['tabIndex'];
+    /**
+     * Select the currently focused option when the user presses tab
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     tabSelectsValue?: ReactSelectCreatableProps['tabSelectsValue'];
+    /**
+     * The value of the select; reflected by the selected option
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     value?: ReactSelectCreatableProps['value'];
+    /**
+     * Determines if option groups will be separated by a divider
+     */
     showOptionGroupDivider?: boolean;
+    /**
+     * Allow options to be created while the isLoading prop is true. Useful to prevent the "create new ..." option being displayed while async results are still being loaded.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     allowCreateWhileLoading?: ReactSelectCreatableProps['allowCreateWhileLoading'];
+    /**
+     * Gets the label for the "create new ..." option in the menu. Is given the current input value.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     formatCreateLabel?: ReactSelectCreatableProps['formatCreateLabel'];
+    /**
+     * Determines whether the "create new ..." option should be displayed based on the current input value, select value and options array.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     isValidNewOption?: ReactSelectCreatableProps['isValidNewOption'];
+    /**
+     * Returns the data for the new option when it is created. Used to display the value, and is passed to onChange.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     getNewOptionData?: ReactSelectCreatableProps['getNewOptionData'];
+    /**
+     * If provided, this will be called with the input value when a new option is created, and onChange will not be called. Use this when you need more control over what happens when new options are created.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     onCreateOption?: ReactSelectCreatableProps['onCreateOption'];
+    /**
+     * Sets the position of the createOption element in your options list.
+     * <br>
+     * [Props from React select was used](https://react-select.com/props#creatable-props)
+     */
     createOptionPosition?: ReactSelectCreatableProps['createOptionPosition'];
+    /**
+     * Title of the label
+     */
     title: string | ReactNode;
+    /**
+     * Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`.
+     */
     hint?: string | ReactNode;
+    /**
+     * Provides a description for the title.
+     */
     description?: string | ReactNode;
+    /**
+     * Function called when info button is pressed.
+     * <br>
+     * Info button will only be visible when this prop is passed.
+     */
     onInfoButtonClick?: () => void;
+    /**
+     * Icon to be displayed beside the hint text.
+     * <br>
+     * Will only get rendered when `hint` is passed as well.
+     */
     hintIcon?: ReactElement;
+    /**
+     * Badge to be displayed beside the label.
+     * <br>
+     * Might be used to display additional information about the content of the field (E.g verified email)
+     */
     badge?: ReactNode;
+    /**
+     * Icon to display on the left of the placeholder text and selected value. Has no effect when isMulti is enabled.
+     */
     iconLeft?: ReactNode;
 };
 type TCreatableSelectFieldState = Pick<TCreatableSelectFieldProps, 'id'>;
@@ -89,6 +320,11 @@ export default class CreatableSelectField extends Component<TCreatableSelectFiel
     static getDerivedStateFromProps: (props: TCreatableSelectFieldProps, state: TCreatableSelectFieldState) => {
         id: string;
     };
+    /**
+     * Use this function to convert the Formik `errors` object type to
+     * our custom field errors type.
+     * This is primarly useful when using TypeScript.
+     */
     static toFieldErrors<FormValues>(errors: unknown): TCustomFormErrors<FormValues>;
     render(): import("@emotion/react/jsx-runtime").JSX.Element;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/creatable-select-field",
   "description": "A controlled input component with validation states and a label getting a selection from the user, and where options can also be created by the user.",
-  "version": "19.9.0",
+  "version": "19.10.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/constraints": "19.9.0",
-    "@commercetools-uikit/creatable-select-input": "19.9.0",
-    "@commercetools-uikit/design-system": "19.9.0",
-    "@commercetools-uikit/field-errors": "19.9.0",
-    "@commercetools-uikit/field-label": "19.9.0",
-    "@commercetools-uikit/field-warnings": "19.9.0",
-    "@commercetools-uikit/spacings": "19.9.0",
-    "@commercetools-uikit/utils": "19.9.0",
+    "@commercetools-uikit/constraints": "19.10.0",
+    "@commercetools-uikit/creatable-select-input": "19.10.0",
+    "@commercetools-uikit/design-system": "19.10.0",
+    "@commercetools-uikit/field-errors": "19.10.0",
+    "@commercetools-uikit/field-label": "19.10.0",
+    "@commercetools-uikit/field-warnings": "19.10.0",
+    "@commercetools-uikit/spacings": "19.10.0",
+    "@commercetools-uikit/utils": "19.10.0",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "prop-types": "15.8.1",