@linzjs/lui 21.39.2-2 → 21.39.3-0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [21.39.2](https://github.com/linz/lui/compare/v21.39.1...v21.39.2) (2024-07-10)
+
+
+### Bug Fixes
+
+* **Splitter:** refactor splitter to remove animation glitches ([#1136](https://github.com/linz/lui/issues/1136)) ([2fce2d1](https://github.com/linz/lui/commit/2fce2d1a5f0df5418bc95374be29762a51b318ec))
+
 ## [21.39.1](https://github.com/linz/lui/compare/v21.39.0...v21.39.1) (2024-07-07)
 
 

package/dist/components/LuiSearchBox/LuiSearchBox.d.ts

@@ -3,7 +3,7 @@ import { LuiButtonProps } from '../LuiButton/LuiButton';
 import { ISearchGroupedResult, ISearchResult } from '../LuiSearchInput/ResultsDisplay';
 export interface ISearchMenuOption {
     name?: string;
-    groupTitle?: string;
+    groupTitle?: string | ReactElement;
     groupDivider?: boolean;
     value: string;
     title: string;
@@ -12,6 +12,8 @@ export interface ISearchMenuOption {
     getOption: (input: any) => Promise<ISearchResult[] | ISearchGroupedResult[]>;
     onSelectOption: (selectedOption: any) => void;
     renderItem?: (item: any) => ReactElement;
+    icon?: ReactElement;
+    columnBreak?: boolean;
 }
 export interface ILuiSearchBoxProps {
     searchBoxOptions: ISearchMenuOption[];

package/dist/components/LuiSearchBox/ProductIcon/ProductIcon.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export declare enum IconType {
+    TITLE = "Title",
+    SURVEY = "Survey",
+    VECTOR = "Vector",
+    INSTRUMENT = "Instrument",
+    PARCEL = "Parcel",
+    MARK = "Mark",
+    SUPPORTING_DOCUMENT = "Supporting document",
+    PENDING_DEALING = "Pending dealing",
+    REQUEST = "REQUEST"
+}
+interface ProductIconProps {
+    iconType: IconType;
+    style?: React.CSSProperties;
+}
+declare const ProductIcon: React.FC<ProductIconProps>;
+export default ProductIcon;

package/dist/index.js

@@ -42641,16 +42641,20 @@ var resultStyle = { verticalAlign: 'middle' };
  *  See examples in SearchBox in storybook.
  */
 var LuiSearchBox = function (_a) {
+    var _b;
+    var _c, _d;
     var searchBoxOptions = _a.searchBoxOptions, initOptionValue = _a.initOptionValue, onMenuSelect = _a.onMenuSelect, autoFocus = _a.autoFocus;
     var initOption = searchBoxOptions.find(function (_a) {
         var value = _a.value;
         return value === initOptionValue;
     });
-    var _b = React.useState(initOption ? initOption : searchBoxOptions[0]), selectedMenuOption = _b[0], setSelectedMenuOption = _b[1];
+    var _e = React.useState(initOption ? initOption : searchBoxOptions[0]), selectedMenuOption = _e[0], setSelectedMenuOption = _e[1];
     //auto focus every time select a menu item
-    var _c = React.useState(false), focusUpdate = _c[0], setFocusUpdate = _c[1];
+    var _f = React.useState(false), focusUpdate = _f[0], setFocusUpdate = _f[1];
     //don't focus when first time display
-    var _d = React.useState(false), isFocus = _d[0], setIsFocus = _d[1];
+    var _g = React.useState(false), isFocus = _g[0], setIsFocus = _g[1];
+    var _h = React.useState(false), showStacked = _h[0], setShowStacked = _h[1];
+    var containerRef = React.useRef(null);
     React.useEffect(function () {
         var updatedOption = searchBoxOptions.find(function (_a) {
             var value = _a.value;
@@ -42659,6 +42663,16 @@ var LuiSearchBox = function (_a) {
         if (updatedOption)
             setSelectedMenuOption(updatedOption);
     }, [initOptionValue]);
+    React.useEffect(function () {
+        var _a, _b;
+        console.log('REF width: ', (_b = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.offsetWidth);
+        if (containerRef.current && containerRef.current.offsetWidth <= 448) {
+            setShowStacked(true);
+        }
+        else if (showStacked) {
+            setShowStacked(false);
+        }
+    }, [containerRef, containerRef.current, (_c = containerRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth]);
     var handleMenuSelected = function (e) {
         setSelectedMenuOption(findSelectedOption(e.value));
         if (onMenuSelect !== undefined)
@@ -42673,8 +42687,27 @@ var LuiSearchBox = function (_a) {
         });
         return selectedOption ? selectedOption : searchBoxOptions[0];
     };
-    return (React__default["default"].createElement("div", { className: "LuiSearchBox" },
-        React__default["default"].createElement(LuiSelectMenu, { menuButton: React__default["default"].createElement(LuiSearchBoxButton, null, selectedMenuOption.title) }, renderSelectMenu(searchBoxOptions, handleMenuSelected)),
+    var numberOfColumns = showStacked
+        ? 1
+        : searchBoxOptions.filter(function (option) { return option.columnBreak; }).length + 1;
+    var multiColumnClass = "lui-select-menu-columns-".concat(numberOfColumns);
+    return (React__default["default"].createElement("div", { className: clsx({
+            LuiSearchBox: true,
+            'LuiSearchBox-stacked': showStacked
+        }), ref: containerRef },
+        React__default["default"].createElement(LuiSelectMenu, { menuButton: React__default["default"].createElement(LuiSearchBoxButton, null,
+                React__default["default"].createElement("span", { style: { display: 'flex' } }, (_d = selectedMenuOption.icon) !== null && _d !== void 0 ? _d : undefined,
+                    React__default["default"].createElement("span", { style: {
+                            marginLeft: '5px',
+                            overflow: 'hidden',
+                            lineHeight: '22px',
+                            maxHeight: '44px'
+                        } }, selectedMenuOption.title))), menuClassName: clsx((_b = {
+                    'lui-select-menu': true
+                },
+                _b[multiColumnClass] = numberOfColumns > 1,
+                _b['lui-select-menu-stacked'] = showStacked,
+                _b)) }, renderSelectMenu(searchBoxOptions, handleMenuSelected, showStacked)),
         React__default["default"].createElement("div", { className: "LuiSearchBox-right" },
             React__default["default"].createElement(LuiSearchInput, { name: selectedMenuOption.name ? selectedMenuOption.name : undefined, minCharactersForSearch: 2, placeholderText: selectedMenuOption.placeholderText, getOptions: selectedMenuOption.getOption, onSelectOption: selectedMenuOption.onSelectOption, renderItem: selectedMenuOption.renderItem
                     ? selectedMenuOption.renderItem
@@ -42687,12 +42720,27 @@ var LuiSearchBoxButton = React__default["default"].forwardRef(function (props, r
         props.children,
         React__default["default"].createElement(LuiIcon, { size: "md", name: 'ic_keyboard_arrow_down', className: 'LuiSearchBox-button-icon', alt: '' })));
 });
-var renderSelectMenu = function (items, onClick) { return (React__default["default"].createElement(React__default["default"].Fragment, null, items.map(function (item) {
-    return (React__default["default"].createElement(React__default["default"].Fragment, { key: item.value },
-        item.groupDivider ? React__default["default"].createElement(LuiSelectMenuDivider, null) : null,
-        item.groupTitle ? (React__default["default"].createElement(LuiSelectMenuHeader, null, item.groupTitle)) : null,
-        React__default["default"].createElement(LuiSelectMenuItem, { "data-testid": "select-box-".concat(item.value), value: item.value, onClick: onClick, noPadding: true }, item.title)));
-}))); };
+var renderSelectMenu = function (items, onClick, singleColumn) {
+    if (singleColumn === void 0) { singleColumn = false; }
+    var columns = [[]];
+    items.forEach(function (item) {
+        if (item.columnBreak && !singleColumn) {
+            columns.push([]);
+        }
+        columns[columns.length - 1].push(item);
+    });
+    return (React__default["default"].createElement("div", { style: { display: 'flex', justifyContent: 'space-between' } }, columns.map(function (column, index) {
+        return (React__default["default"].createElement("div", { style: {
+                flexShrink: 0,
+                flexGrow: index === columns.length - 1 ? 2 : 1
+            }, key: index }, column.map(function (item) {
+            return (React__default["default"].createElement(React__default["default"].Fragment, { key: item.value },
+                item.groupDivider ? React__default["default"].createElement(LuiSelectMenuDivider, null) : null,
+                item.groupTitle ? (React__default["default"].createElement(LuiSelectMenuHeader, null, item.groupTitle)) : null,
+                React__default["default"].createElement(LuiSelectMenuItem, { "data-testid": "select-box-".concat(item.value), value: item.value, onClick: onClick, noPadding: true }, item.title)));
+        })));
+    })));
+};
 
 exports.LuiSplitButtonPosition = void 0;
 (function (LuiSplitButtonPosition) {
@@ -59229,7 +59277,7 @@ var keyDownHandler = function (e) {
     return valueNow + delta;
 };
 
-var css_248z$4 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Splitter {\n  display: grid;\n  position: relative;\n  overflow: hidden;\n  opacity: 0;\n}\n.Splitter > :first-child, .Splitter > :nth-child(2) {\n  position: relative;\n  z-index: 0;\n  overflow: auto;\n}\n.Splitter.resizing * {\n  pointer-events: none;\n  user-select: none;\n}";
+var css_248z$4 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.Splitter {\n  display: grid;\n  position: relative;\n  overflow: hidden;\n  opacity: 0;\n}\n.Splitter > :first-child, .Splitter > :nth-child(2) {\n  position: relative;\n  z-index: 0;\n  background: #f9f9f9;\n  overflow: auto;\n}\n.Splitter.resizing * {\n  pointer-events: none;\n  user-select: none;\n}";
 styleInject(css_248z$4);
 
 /**