@linzjs/lui 16.0.1 → 16.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [16.1.0](https://github.com/linz/lui/compare/v16.0.1...v16.1.0) (2022-03-22)
+
+
+### Features
+
+* My whitespace feature ([#631](https://github.com/linz/lui/issues/631)) ([3e31760](https://github.com/linz/lui/commit/3e31760899b757480d2e31f5b98ca06a83011aff))
+
 ## [16.0.1](https://github.com/linz/lui/compare/v16.0.0...v16.0.1) (2022-03-21)
 
 

package/README.md

@@ -1,4 +1,4 @@
-# Lui - Linz User Interface!
+# Lui - Linz User Interface!!
 
 > It's written in CSS and a React wrapper!
 >
@@ -37,7 +37,7 @@ welcoming contributions from across LINZ.
 It aims to solve the problem of consistent UI across LINZ while giving squads a bunch of base elements they can start
 using out of the box.
 
-We aim to make each component generic, extendable, accessible, and amazingly great.
+We aim to make each component generic, extendable, accessible, and amazing.
 
 All styles are implemented in SASS and compiled to plain CSS. This means any team can use the CSS. A ReactJS wrapper
 over the CSS is part of this project.

package/dist/components/LuiFilterContainer/LuiFilterContainer.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export interface IFilterProperties<T> {
     showFilter?: boolean;
+    isFilterClearable?: boolean;
     filterFunction: (input: string) => T[];
     renderFunction: (filteredOptions: T[]) => JSX.Element;
 }

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

@@ -1,6 +1,5 @@
-import { ChangeEventHandler, InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
 export interface ClearableLuiTextInputProps {
-    onChange?: ChangeEventHandler<HTMLInputElement>;
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     error?: string;
     hideLabel?: boolean;
@@ -9,6 +8,7 @@ export interface ClearableLuiTextInputProps {
      * A red star will be shown next to the label, no validation will be performed based on this prop.
      */
     mandatory?: boolean;
-    startingValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
 }
 export declare const ClearableLuiTextInput: (props: ClearableLuiTextInputProps) => JSX.Element;

package/dist/components/LuiIcon/LuiIcon.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { ICONS } from '../../assets/svg-content';
+import { InputHTMLAttributes } from 'react';
 export declare type IconSize = keyof typeof ICON_SIZES;
 export declare type IconStatus = keyof typeof ICON_STATUS;
 export declare type IconName = keyof typeof ICONS;
@@ -13,7 +13,7 @@ export interface LuiIconProps {
     status?: IconStatus;
     className?: string;
     title?: string;
-    spanProps?: any;
+    spanProps?: InputHTMLAttributes<HTMLInputElement>;
 }
 export declare const ICON_SIZES: {
     xs: string;

package/dist/index.js

@@ -55835,6 +55835,23 @@ function setSelectedFirmCache(firmId, firmName) {
     }
 }
 
+var ClearableLuiTextInput = function (props) {
+    var _a = React.useState(props.value ? props.value : ''), currentValue = _a[0], setCurrentValue = _a[1];
+    var clear = function () {
+        setCurrentValue('');
+        if (props.onValueChange) {
+            props.onValueChange('');
+        }
+    };
+    var cancelIcon = currentValue !== '' ? (React__default["default"].createElement(LuiIcon, { alt: "clear", name: "ic_cancel_clear", size: "lg", className: 'LuiTextInput-iconPosition', spanProps: { onClick: clear } })) : undefined;
+    return (React__default["default"].createElement(LuiTextInput, __assign({}, props, { icon: cancelIcon, value: currentValue, onChange: function (e) {
+            setCurrentValue(e.target.value);
+            if (props.onValueChange) {
+                props.onValueChange(e.target.value);
+            }
+        } })));
+};
+
 /**
  * Filters options and forwards to internal render function.
  * has option for minimum elements to filter
@@ -55842,11 +55859,14 @@ function setSelectedFirmCache(firmId, firmName) {
  * @constructor
  */
 var LuiFilterContainer = function (props) {
-    var renderFunction = props.renderFunction, filterFunction = props.filterFunction, _a = props.showFilter, showFilter = _a === void 0 ? true : _a;
-    var _b = React.useState(''), filter = _b[0], setFilter = _b[1];
+    var renderFunction = props.renderFunction, filterFunction = props.filterFunction, _a = props.showFilter, showFilter = _a === void 0 ? true : _a, _b = props.isFilterClearable, isFilterClearable = _b === void 0 ? true : _b;
+    var _c = React.useState(''), filter = _c[0], setFilter = _c[1];
     return (React__default["default"].createElement("div", null,
         showFilter && (React__default["default"].createElement("div", { className: 'LuiFilterContainer-filter-container LuiDeprecatedForms' },
-            React__default["default"].createElement("input", { type: "text", placeholder: "Type to filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } }))),
+            isFilterClearable && (React__default["default"].createElement(ClearableLuiTextInput, { label: 'Filter', inputProps: {
+                    placeholder: 'Type to filter',
+                }, onValueChange: function (value) { return setFilter(value); } })),
+            !isFilterClearable && (React__default["default"].createElement("input", { type: "text", placeholder: "Type to filter", value: filter, onChange: function (e) { return setFilter(e.target.value); } })))),
         renderFunction(filterFunction(filter))));
 };