feat(ValidSelect): Add creatable option prop #minor

CHANGELOG.md

@@ -3,6 +3,11 @@
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## [0.6.0]
+### Added
+- `ValidSelect` add creatable props
+
 ## [0.5.1]
 ### Fixed
 - `Pagination` fix display styling

build/components/ValidatedInput/ValidSelect.d.ts

@@ -30,4 +30,4 @@ export interface ValidSelectProps extends SelectProps {
     className?: string;
     helperText?: React.ReactNode;
 }
-export declare const ValidSelect: ({ label, placeholder, options, name, value, onChange, errMessage, optionalLabel, isInvalid, isDisabled, isRequired, isClearable, tooltip, selectDataQa, isMulti, className, helperText, ...props }: ValidSelectProps) => JSX.Element;
+export declare const ValidSelect: ({ label, placeholder, options, name, value, onChange, errMessage, optionalLabel, isInvalid, isDisabled, isRequired, isClearable, tooltip, selectDataQa, isMulti, className, helperText, isCreatable, ...props }: ValidSelectProps) => JSX.Element;

build/components/styled-atlaskit/Select/Select.d.ts

@@ -4,5 +4,6 @@ import { SelectOption } from "../../../types";
 import "./Select.scss";
 export interface SelectProps extends Omit<AkSelectProps<SelectOption, boolean>, "onChange"> {
     onChange?: (option: SelectOption) => void;
+    isCreatable?: boolean;
 }
-export declare const Select: ({ isMulti, onChange, ...props }: SelectProps) => JSX.Element;
+export declare const Select: ({ isMulti, isCreatable, onChange, ...props }: SelectProps) => JSX.Element;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "justice-ui-library",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "author": "AccelByte Inc",
   "license": "AccelByte License",
   "main": "./build/index.js",

src/components/ValidatedInput/ValidSelect.tsx

@@ -57,6 +57,7 @@ export const ValidSelect = ({
   isMulti = false,
   className,
   helperText,
+  isCreatable = false,
   ...props
 }: ValidSelectProps) => (
   <div className={classNames("valid-select-input", className)}>
@@ -71,6 +72,7 @@ export const ValidSelect = ({
       isDisabled={isDisabled}
       isClearable={isClearable}
       isMulti={isMulti}
+      isCreatable={isCreatable}
       dataQa={selectDataQa}
     />
     {isInvalid && <FieldErrorMessage message={errMessage} />}

src/components/styled-atlaskit/Select/Select.tsx

@@ -5,22 +5,30 @@
  */
 
 import React from "react";
-import { default as AkSelect, SelectProps as AkSelectProps } from "@atlaskit/select";
+import {
+  default as AkSelect,
+  SelectProps as AkSelectProps,
+  CreatableSelect,
+  OptionType,
+  OptionsType,
+} from "@atlaskit/select";
 import { SelectOption } from "../../../types";
 import "./Select.scss";
 
 export interface SelectProps extends Omit<AkSelectProps<SelectOption, boolean>, "onChange"> {
   onChange?: (option: SelectOption) => void;
+  isCreatable?: boolean;
 }
 
-export const Select = ({ isMulti = false, onChange, ...props }: SelectProps) => {
-  return (
-    <AkSelect
-      className="styled-atlaskit-select"
-      classNamePrefix={"styled-atlaskit-select"}
-      isMulti={isMulti}
-      onChange={onChange ? (item) => onChange(item as SelectOption) : undefined}
-      {...props}
-    />
-  );
+export const Select = ({ isMulti = false, isCreatable = false, onChange, ...props }: SelectProps) => {
+  const defaultProps = {
+    isMulti,
+    className: "styled-atlaskit-select",
+    classNamePrefix: "styled-atlaskit-select",
+    onChange: onChange
+      ? (item: OptionType | OptionsType<OptionType> | null) => onChange(item as SelectOption)
+      : undefined,
+    ...props,
+  };
+  return isCreatable ? <CreatableSelect {...defaultProps} /> : <AkSelect {...defaultProps} />;
 };