@linzjs/lui 12.0.0 → 12.1.2

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [12.1.2](https://github.com/linz/lui/compare/v12.1.1...v12.1.2) (2022-01-17)
+
+
+### Bug Fixes
+
+* FileInputBox not updating on error ([#498](https://github.com/linz/lui/issues/498)) ([7efa723](https://github.com/linz/lui/commit/7efa723f42cc15ceacb5f432d3d048f4447553f2))
+
+## [12.1.1](https://github.com/linz/lui/compare/v12.1.0...v12.1.1) (2022-01-17)
+
+
+### Bug Fixes
+
+* Fix for importing svg path breaking downstream projects ([#523](https://github.com/linz/lui/issues/523)) ([6c1e84c](https://github.com/linz/lui/commit/6c1e84c2e28561ee56a442f7adb567de45e81206))
+
+# [12.1.0](https://github.com/linz/lui/compare/v12.0.1...v12.1.0) (2022-01-17)
+
+
+### Features
+
+* **LuiComboSelect:** Added the createable option on LuiComboSelect ([#519](https://github.com/linz/lui/issues/519)) ([3aad990](https://github.com/linz/lui/commit/3aad9908a519e466151cb68ba192b4d94e740fe1))
+
+## [12.0.1](https://github.com/linz/lui/compare/v12.0.0...v12.0.1) (2022-01-14)
+
+
+### Bug Fixes
+
+* replaced colours with variables, fixed error classes not appeari… ([#518](https://github.com/linz/lui/issues/518)) ([e1651fa](https://github.com/linz/lui/commit/e1651fa5d5c0f244b36ac79a4b78d32c83c42949))
+
 # [12.0.0](https://github.com/linz/lui/compare/v11.12.0...v12.0.0) (2022-01-13)
 
 

package/dist/components/LuiFormElements/LuiFileInputBox/LuiFileInputBox.d.ts

@@ -1,4 +1,4 @@
-export interface Props {
+export interface LuiFileInputBoxProps {
     fileDescription: string;
     acceptedExtensions: string[];
     fileFormatText?: string;
@@ -8,7 +8,7 @@ export interface Props {
     width?: number;
     height?: number;
 }
-export declare const LuiFileInputBox: (props: Props) => JSX.Element;
+export declare const LuiFileInputBox: (props: LuiFileInputBoxProps) => JSX.Element;
 export interface FileUploadInfoProps {
     fileName: string | undefined;
     fileDescription: string;
@@ -18,8 +18,8 @@ export declare const FileUploadInfo: (props: FileUploadInfoProps) => JSX.Element
 /**
  * Get the extension from a filename in upper-case.
  *
- * @param fileName File-name to get extension from.
- * @return fileName extension in upper-case if found else empty string.
+ * @param fileName File-name to get extension from
+ * @return fileName extension in upper-case if found else empty string
  */
 export declare const getFileNameExtension: (fileName: string) => string;
 /**

package/dist/components/LuiFormElements/LuiFileInputBox/LuiFileInputBox.stories.d.ts

@@ -1,6 +1,6 @@
 import { ComponentStory } from '@storybook/react';
 import { FileUploadInfo, LuiFileInputBox } from './LuiFileInputBox';
-declare const _default: import("@storybook/react").Meta<import("./LuiFileInputBox").Props>;
+declare const _default: import("@storybook/react").Meta<import("./LuiFileInputBox").LuiFileInputBoxProps>;
 export default _default;
 export declare const LuiFileInputWithExtensionFilterDefaultSize: ComponentStory<typeof LuiFileInputBox>;
 export declare const LuiFileInputWithExtensionFilterLargeWithExistingError: ComponentStory<typeof LuiFileInputBox>;

package/dist/components/LuiForms/LuiComboSelect/LuiComboSelect.d.ts

@@ -3,6 +3,8 @@ import { GroupBase, Props, SelectInstance } from 'react-select';
 export declare type LuiComboSelectProps<Option extends LuiComboSelectOption = LuiComboSelectOption, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = Partial<Props<Option, IsMulti, Group>> & {
     label: JSX.Element | string;
     hideLabel?: boolean;
+    isCreateable?: boolean;
+    error?: string;
 };
 export declare type LuiComboSelectOption = {
     label: string;
@@ -14,4 +16,6 @@ export declare type LuiComboSelectOption = {
 export declare const LuiComboSelect: React.ForwardRefExoticComponent<Partial<Props<LuiComboSelectOption, boolean, GroupBase<any>>> & {
     label: JSX.Element | string;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<SelectInstance<LuiComboSelectOption, boolean, GroupBase<any>>>>;

package/dist/components/LuiForms/LuiComboSelect/LuiComboSelect.stories.d.ts

@@ -2,63 +2,105 @@ import React from 'react';
 declare const _default: import("@storybook/react").Meta<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export default _default;
 export declare const blank: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const withoutLabel: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const focus: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const open: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const autocomplete: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const foundNone: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const loadingSpinner: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const selected: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const selectedOpen: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const disabledBlank: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const disabledSelected: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const disabledWhileLoading: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const groupedOptions: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const isMulti: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
     label: string | JSX.Element;
     hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
+} & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
+export declare const createable: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
+    label: string | JSX.Element;
+    hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
+} & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
+export declare const error: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & {
+    label: string | JSX.Element;
+    hideLabel?: boolean | undefined;
+    isCreateable?: boolean | undefined;
+    error?: string | undefined;
 } & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const compareToInput: {
     (): JSX.Element;

package/dist/lui.cjs.development.js

@@ -14,6 +14,7 @@ var uuid = require('uuid');
 var camelcase = _interopDefault(require('camelcase'));
 var Select = _interopDefault(require('react-select'));
 var Lottie = _interopDefault(require('lottie-react'));
+var CreatableSelect = _interopDefault(require('react-select/creatable'));
 var Modal = _interopDefault(require('react-modal'));
 var reactQuery = require('react-query');
 var tippy = _interopDefault(require('tippy.js'));
@@ -977,7 +978,7 @@ var LuiTextInput = function LuiTextInput(props) {
 
   var id = useGenerateOrDefaultId((_props$inputProps = props.inputProps) == null ? void 0 : _props$inputProps.id);
   return React__default.createElement("div", {
-    className: clsx('LuiTextInput', props.error ? 'LuiTextInput-error' : '')
+    className: clsx('LuiTextInput', props.error && 'hasError')
   }, React__default.createElement("label", {
     className: 'LuiTextInput-label',
     htmlFor: id
@@ -1065,20 +1066,6 @@ var LuiFileInputBox = function LuiFileInputBox(props) {
     }
   };
 
-  var FileFormatErrorDetails = function FileFormatErrorDetails() {
-    return React__default.createElement("div", {
-      className: "LuiFileInputBox-upload-container"
-    }, React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-      className: 'LuiFileInputBox-upload-icon-error'
-    }, React__default.createElement(LuiIcon, {
-      name: "ic_error_outline",
-      size: 'ns',
-      alt: "Error"
-    })), props.customFileErrorMessage ? React__default.createElement("p", null, props.customFileErrorMessage) : React__default.createElement("p", {
-      className: "LuiFileInputBox-upload-text"
-    }, "You must select a file with extension of", ' ', extensionsAsHumanReadableList(props.acceptedExtensions), ".")));
-  };
-
   var hasError = hasFileFormatError || props.showMustSelectFileError === true;
   return React__default.createElement("div", {
     className: clsx('LuiFileInputBox-upload', hasError && 'LuiFileInputBox-upload-error'),
@@ -1095,7 +1082,17 @@ var LuiFileInputBox = function LuiFileInputBox(props) {
       return "." + extension;
     }).join(','),
     onChange: onChange
-  }), React__default.createElement(React__default.Fragment, null, hasError ? React__default.createElement(FileFormatErrorDetails, null) : React__default.createElement(FileUploadInfo, {
+  }), React__default.createElement(React__default.Fragment, null, hasError ? React__default.createElement("div", {
+    className: "LuiFileInputBox-upload-container"
+  }, React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: 'LuiFileInputBox-upload-icon-error'
+  }, React__default.createElement(LuiIcon, {
+    name: "ic_error_outline",
+    size: 'ns',
+    alt: "Error"
+  })), props.customFileErrorMessage ? React__default.createElement("p", null, props.customFileErrorMessage) : React__default.createElement("p", {
+    className: "LuiFileInputBox-upload-text"
+  }, "You must select a file with extension of", ' ', extensionsAsHumanReadableList(props.acceptedExtensions), "."))) : React__default.createElement(FileUploadInfo, {
     fileName: file == null ? void 0 : file.name,
     fileFormatText: props.fileFormatText,
     fileDescription: props.fileDescription
@@ -1140,8 +1137,8 @@ var FileUploadInfo = function FileUploadInfo(props) {
 /**
  * Get the extension from a filename in upper-case.
  *
- * @param fileName File-name to get extension from.
- * @return fileName extension in upper-case if found else empty string.
+ * @param fileName File-name to get extension from
+ * @return fileName extension in upper-case if found else empty string
  */
 
 var getFileNameExtension = function getFileNameExtension(fileName) {
@@ -1166,11 +1163,11 @@ var extensionsAsHumanReadableList = function extensionsAsHumanReadableList(exten
 };
 
 var LuiSelectInput = function LuiSelectInput(props) {
-  var _props$selectProps;
+  var _props$selectProps, _props$selectProps2;
 
   var id = useGenerateOrDefaultId((_props$selectProps = props.selectProps) == null ? void 0 : _props$selectProps.id);
   return React__default.createElement("div", {
-    className: 'LuiSelect'
+    className: clsx('LuiSelect', (_props$selectProps2 = props.selectProps) != null && _props$selectProps2.disabled ? 'isDisabled' : '', props.error ? 'hasError' : '')
   }, React__default.createElement("label", {
     htmlFor: id,
     className: "LuiSelect-label"
@@ -1210,23 +1207,25 @@ var LuiSelectInput = function LuiSelectInput(props) {
 };
 
 var LuiTextAreaInput = function LuiTextAreaInput(props) {
-  var _props$inputProps;
+  var _props$inputProps, _props$inputProps2;
 
   var id = useGenerateOrDefaultId((_props$inputProps = props.inputProps) == null ? void 0 : _props$inputProps.id);
   return React__default.createElement("div", {
-    className: clsx('LuiTextAreaInput')
+    className: clsx('LuiTextAreaInput', (_props$inputProps2 = props.inputProps) != null && _props$inputProps2.disabled ? 'isDisabled' : '', props != null && props.error ? 'hasError' : '')
   }, React__default.createElement("label", {
     htmlFor: id
   }, props.mandatory && React__default.createElement("span", {
     className: "LuiTextAreaInput-mandatory"
   }, "*"), React__default.createElement("span", {
     className: "LuiTextAreaInput-label"
-  }, props.label), React__default.createElement("textarea", Object.assign({
+  }, props.label), React__default.createElement("div", {
+    className: "LuiTextAreaInput-wrapper"
+  }, ' ', React__default.createElement("textarea", Object.assign({
     id: id,
     value: props.value,
     onChange: props.onChange,
     rows: 5
-  }, props.inputProps))), props.error && React__default.createElement("span", {
+  }, props.inputProps)))), props.error && React__default.createElement("span", {
     className: "LuiTextAreaInput-error"
   }, React__default.createElement(LuiIcon, {
     alt: "error",
@@ -18130,18 +18129,15 @@ function LuiComboSelectActual(givenProps, ref) {
   }, givenProps);
   props.components = _extends({
     LoadingIndicator: LuiLoadingIndicator
-  }, props.components);
+  }, props.components); // box-shadow: "-8px 0px 0 0 #cc0000";
+  // border-radius: "4px";
+
   var id = useGenerateOrDefaultId(props == null ? void 0 : props.id);
-  return React__default.createElement("label", {
-    htmlFor: id,
-    className: "LuiComboSelect-label"
-  }, React__default.createElement("span", {
-    className: clsx('LuiSelect-label-text', props.hideLabel ? 'LuiScreenReadersOnly' : '')
-  }, props.label), React__default.createElement(Select, Object.assign({
-    inputId: id,
-    ref: ref
+
+  var selectProp = _extends({
+    inputId: id
   }, props, {
-    classNamePrefix: "LuiComboSelect",
+    classNamePrefix: 'LuiComboSelect',
     theme: function theme(_theme) {
       return _extends({}, _theme, {
         colors: _extends({}, _theme.colors, {
@@ -18211,7 +18207,30 @@ function LuiComboSelectActual(givenProps, ref) {
         });
       }
     }
-  })));
+  });
+
+  return React__default.createElement("label", {
+    htmlFor: id,
+    className: clsx('LuiComboSelect-label', props.error && 'hasError')
+  }, React__default.createElement("span", {
+    className: clsx('LuiSelect-label-text', props.hideLabel ? 'LuiScreenReadersOnly' : '')
+  }, props.label), props.isCreateable ? React__default.createElement(CreatableSelect, Object.assign({
+    formatCreateLabel: function formatCreateLabel(inputValue) {
+      return inputValue;
+    },
+    createOptionPosition: "first",
+    ref: ref
+  }, selectProp)) : React__default.createElement(Select, Object.assign({
+    ref: ref
+  }, selectProp)), props.error && React__default.createElement("span", {
+    className: "LuiComboSelect-error"
+  }, React__default.createElement(LuiIcon, {
+    alt: 'Error',
+    name: "ic_error",
+    className: "LuiComboSelect-error-icon",
+    size: "sm",
+    status: "error"
+  }), props.error));
 }
 
 var LuiShadow = function LuiShadow(props) {