@linzjs/lui 16.0.0 → 16.1.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [16.1.1](https://github.com/linz/lui/compare/v16.1.0...v16.1.1) (2022-03-23)
+
+
+### Bug Fixes
+
+* Remove clip-path from icon. ([#633](https://github.com/linz/lui/issues/633)) ([2184c80](https://github.com/linz/lui/commit/2184c804f25b1c1ade2322b244c6e3c0bcbcc268))
+
+# [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)
+
+
+### Bug Fixes
+
+* corrects test for global variable in LuiModal ([#628](https://github.com/linz/lui/issues/628)) ([8e7a8b0](https://github.com/linz/lui/commit/8e7a8b0db48cab84789b35bf17b9a9de289dc336))
+
 # [16.0.0](https://github.com/linz/lui/compare/v15.1.14...v16.0.0) (2022-03-17)
 
 

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/assets/icons/attach_file.svg

@@ -1 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="m19.571 10.586-8.132 8.132a3.999 3.999 0 0 1-5.657 0 3.999 3.999 0 0 1 0-5.657l8.84-8.84a2.501 2.501 0 0 1 3.535 3.536l-7.425 7.425a1.003 1.003 0 0 1-1.414 0 1.003 1.003 0 0 1 0-1.414l6.717-6.718-1.06-1.06-6.718 6.717a2.501 2.501 0 0 0 3.536 3.536l7.425-7.425a3.999 3.999 0 0 0 0-5.657 3.999 3.999 0 0 0-5.657 0L4.72 12a5.497 5.497 0 0 0 0 7.778 5.497 5.497 0 0 0 7.779 0l8.132-8.131-1.06-1.061Z"/></g><defs><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath></defs></svg>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m19.571 10.586-8.132 8.132a3.999 3.999 0 0 1-5.657 0 3.999 3.999 0 0 1 0-5.657l8.84-8.84a2.501 2.501 0 0 1 3.535 3.536l-7.425 7.425a1.003 1.003 0 0 1-1.414 0 1.003 1.003 0 0 1 0-1.414l6.717-6.718-1.06-1.06-6.718 6.717a2.501 2.501 0 0 0 3.536 3.536l7.425-7.425a3.999 3.999 0 0 0 0-5.657 3.999 3.999 0 0 0-5.657 0L4.72 12a5.497 5.497 0 0 0 0 7.778 5.497 5.497 0 0 0 7.779 0l8.132-8.131-1.06-1.061Z"/></svg>

package/dist/assets/svg-content.tsx

@@ -101,14 +101,7 @@ iconMap['ic_arrow_forward_ios'] = (
 
 iconMap['ic_attach_file'] = (
   <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#a)">
-      <path d="m19.571 10.586-8.132 8.132a3.999 3.999 0 0 1-5.657 0 3.999 3.999 0 0 1 0-5.657l8.84-8.84a2.501 2.501 0 0 1 3.535 3.536l-7.425 7.425a1.003 1.003 0 0 1-1.414 0 1.003 1.003 0 0 1 0-1.414l6.717-6.718-1.06-1.06-6.718 6.717a2.501 2.501 0 0 0 3.536 3.536l7.425-7.425a3.999 3.999 0 0 0 0-5.657 3.999 3.999 0 0 0-5.657 0L4.72 12a5.497 5.497 0 0 0 0 7.778 5.497 5.497 0 0 0 7.779 0l8.132-8.131-1.06-1.061Z" />
-    </g>
-    <defs>
-      <clipPath id="a">
-        <path d="M0 0h24v24H0z" />
-      </clipPath>
-    </defs>
+    <path d="m19.571 10.586-8.132 8.132a3.999 3.999 0 0 1-5.657 0 3.999 3.999 0 0 1 0-5.657l8.84-8.84a2.501 2.501 0 0 1 3.535 3.536l-7.425 7.425a1.003 1.003 0 0 1-1.414 0 1.003 1.003 0 0 1 0-1.414l6.717-6.718-1.06-1.06-6.718 6.717a2.501 2.501 0 0 0 3.536 3.536l7.425-7.425a3.999 3.999 0 0 0 0-5.657 3.999 3.999 0 0 0-5.657 0L4.72 12a5.497 5.497 0 0 0 0 7.778 5.497 5.497 0 0 0 7.779 0l8.132-8.131-1.06-1.061Z" />
   </svg>
 );
 

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

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

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

@@ -14,6 +14,7 @@ export interface LuiTextInputProps {
      */
     showPadlockIcon?: boolean;
     value: string;
+    icon?: JSX.Element;
 }
 export declare function useGenerateOrDefaultId(idFromProps?: string): string;
 export declare const LuiTextInput: (props: LuiTextInputProps) => 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

@@ -181,11 +181,7 @@ iconMap['ic_arrow_drop_up'] = (React__default["default"].createElement("svg", {
 iconMap['ic_arrow_forward_ios'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default["default"].createElement("path", { d: "m5.93 4.125 2.156-2.109L18.07 12l-9.984 9.984-2.156-2.109L13.852 12z" })));
 iconMap['ic_attach_file'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
-    React__default["default"].createElement("g", { "clip-path": "url(#a)" },
-        React__default["default"].createElement("path", { d: "m19.571 10.586-8.132 8.132a3.999 3.999 0 0 1-5.657 0 3.999 3.999 0 0 1 0-5.657l8.84-8.84a2.501 2.501 0 0 1 3.535 3.536l-7.425 7.425a1.003 1.003 0 0 1-1.414 0 1.003 1.003 0 0 1 0-1.414l6.717-6.718-1.06-1.06-6.718 6.717a2.501 2.501 0 0 0 3.536 3.536l7.425-7.425a3.999 3.999 0 0 0 0-5.657 3.999 3.999 0 0 0-5.657 0L4.72 12a5.497 5.497 0 0 0 0 7.778 5.497 5.497 0 0 0 7.779 0l8.132-8.131-1.06-1.061Z" })),
-    React__default["default"].createElement("defs", null,
-        React__default["default"].createElement("clipPath", { id: "a" },
-            React__default["default"].createElement("path", { d: "M0 0h24v24H0z" })))));
+    React__default["default"].createElement("path", { d: "m19.571 10.586-8.132 8.132a3.999 3.999 0 0 1-5.657 0 3.999 3.999 0 0 1 0-5.657l8.84-8.84a2.501 2.501 0 0 1 3.535 3.536l-7.425 7.425a1.003 1.003 0 0 1-1.414 0 1.003 1.003 0 0 1 0-1.414l6.717-6.718-1.06-1.06-6.718 6.717a2.501 2.501 0 0 0 3.536 3.536l7.425-7.425a3.999 3.999 0 0 0 0-5.657 3.999 3.999 0 0 0-5.657 0L4.72 12a5.497 5.497 0 0 0 0 7.778 5.497 5.497 0 0 0 7.779 0l8.132-8.131-1.06-1.061Z" })));
 iconMap['ic_attachment'] = (React__default["default"].createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
     React__default["default"].createElement("path", { d: "M2.016 12.023c0-1.531.531-2.836 1.594-3.914C4.673 7.03 5.97 6.492 7.501 6.492h10.5c1.094 0 2.032.398 2.813 1.195.781.797 1.172 1.742 1.172 2.836 0 1.094-.39 2.032-1.172 2.813-.781.781-1.719 1.172-2.813 1.172H9.517a2.472 2.472 0 0 1-1.781-.727c-.5-.485-.75-1.07-.75-1.758 0-.687.25-1.281.75-1.781s1.094-.75 1.781-.75h7.5v2.016H9.423c-.281 0-.422.164-.422.492 0 .328.14.492.422.492h8.578c.531 0 1-.195 1.406-.586.406-.39.609-.852.609-1.383s-.203-1-.609-1.406c-.406-.406-.875-.61-1.406-.61h-10.5c-.969 0-1.797.345-2.484 1.032a3.386 3.386 0 0 0-1.031 2.484c0 .969.344 1.789 1.031 2.46a3.425 3.425 0 0 0 2.484 1.009h9.516v2.016H7.501c-1.531 0-2.828-.531-3.891-1.594-1.063-1.063-1.594-2.36-1.594-3.891Z" })));
 iconMap['ic_blocked'] = (React__default["default"].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
@@ -878,7 +874,8 @@ var LuiTextInput = function (props) {
                     clsx(props.hideLabel ? 'LuiScreenReadersOnly' : '') }, props.label),
             React__default["default"].createElement("span", { className: "LuiTextInput-inputWrapper" },
                 React__default["default"].createElement("input", __assign({ type: 'text', className: (props.showPadlockIcon ? 'LuiTextInput-padlock-icon ' : '') +
-                        clsx('LuiTextInput-input'), min: "0", value: props.value, onChange: props.onChange }, props.inputProps, { id: id }))),
+                        clsx('LuiTextInput-input'), min: "0", value: props.value, onChange: props.onChange }, props.inputProps, { id: id })),
+                props.icon),
             props.error && (React__default["default"].createElement("span", { className: "LuiTextInput-error" },
                 React__default["default"].createElement(LuiIcon, { alt: "error", name: "ic_error", className: "LuiTextInput-error-icon", size: "sm", status: "error" }),
                 props.error)))));
@@ -55632,7 +55629,7 @@ var LuiModal = function (props) {
     }, [handleClickOutside]);
     var isTest = false;
     // this is here for the tests
-    if (process !== undefined) {
+    if (typeof process !== 'undefined') {
         isTest = ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'test';
         if (!isTest) {
             Modal.setAppElement('#root');
@@ -55834,6 +55831,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
@@ -55841,11 +55855,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))));
 };