@linzjs/lui 18.5.0 → 18.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [18.6.0](https://github.com/linz/lui/compare/v18.5.1...v18.6.0) (2023-08-14)
+
+
+### Features
+
+* **LuiMultiSwitch:** Adding ability to disable particular options ([#984](https://github.com/linz/lui/issues/984)) ([7eeddf3](https://github.com/linz/lui/commit/7eeddf3b86e98bf7e9f6748a3db6eb61d2f317d1))
+
+## [18.5.1](https://github.com/linz/lui/compare/v18.5.0...v18.5.1) (2023-08-13)
+
+
+### Bug Fixes
+
+* **LuiExpandableBanner:** fix height limit ([#983](https://github.com/linz/lui/issues/983)) ([a9d8fea](https://github.com/linz/lui/commit/a9d8feade76359f001acbcf43e2835ef1d08ee43))
+
 # [18.5.0](https://github.com/linz/lui/compare/v18.4.5...v18.5.0) (2023-08-09)
 
 

package/dist/components/LuiMultiSwitch/LuiMultiSwitch.d.ts

@@ -4,6 +4,7 @@ export interface LuiMultiSwitchOption<ValueType> {
     value: ValueType;
     shortcutKey?: string;
     className?: string;
+    disabled?: boolean;
 }
 export declare const LuiMultiSwitchYesNo: LuiMultiSwitchOption<boolean>[];
 export interface LuiMultiSwitchProps<ValueType> {

package/dist/index.js

@@ -25675,18 +25675,35 @@ var LuiMessagingContextProvider = function (props) {
         props.children));
 };
 
+var getMaxHeight = function (_a) {
+    var scrollHeight = _a.scrollHeight;
+    return Math.max(scrollHeight, 1200) + 'px';
+};
 var LuiExpandableBanner = function (props) {
-    var initiallyCollapsed = props.start === 'expanded' ? false : true;
-    var _a = React.useState(initiallyCollapsed), collapse = _a[0], setCollapse = _a[1];
+    var initiallyCollapsed = React.useRef(props.start === 'expanded' ? false : true);
+    var _a = React.useState(initiallyCollapsed.current), collapse = _a[0], setCollapse = _a[1];
+    var content = React.useRef(null);
+    var _b = React.useState('initial'), maxHeight = _b[0], setMaxHeight = _b[1];
+    React.useEffect(function () {
+        content.current && setMaxHeight(getMaxHeight(content.current));
+    }, [content]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("div", { className: clsx('lui-expand-container', props.className) },
             props.labelPrefix,
-            React__default["default"].createElement("div", { className: 'lui-expand-header', onClick: function () { return setCollapse(function (prev) { return !prev; }); }, style: { width: '100%' } },
+            React__default["default"].createElement("div", { className: 'lui-expand-header', onClick: function () {
+                    setCollapse(function (prev) { return !prev; });
+                    if (content.current) {
+                        setMaxHeight(getMaxHeight(content.current));
+                    }
+                }, style: { width: '100%' } },
                 React__default["default"].createElement("h3", null, props.label),
                 React__default["default"].createElement("i", { className: clsx(collapse
                         ? 'lui-expand-icon material-icons-round'
                         : 'lui-expand-icon material-icons-round lui-expand-icon-transform') }, 'expand_more'))),
-        React__default["default"].createElement("div", { style: collapse ? { maxHeight: '0px' } : undefined, className: 'lui-accordion-content' }, props.children)));
+        React__default["default"].createElement("div", { className: "lui-accordion-content", style: {
+                maxHeight: collapse ? '0px' : maxHeight,
+                overflow: collapse ? 'hidden' : 'auto'
+            }, onTransitionEnd: function (e) { return setMaxHeight(getMaxHeight(e.currentTarget)); }, ref: content }, props.children)));
 };
 
 /**
@@ -67808,7 +67825,10 @@ var LuiMultiSwitch = function (_a) {
             switch (_b.label) {
                 case 0:
                     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    if (disabled || updating.current || newSelectedIndex === selectedIndex) {
+                    if (disabled ||
+                        updating.current ||
+                        newSelectedIndex === selectedIndex ||
+                        options[newSelectedIndex].disabled) {
                         return [2 /*return*/];
                     }
                     if (isUncontrolled) {
@@ -67853,7 +67873,7 @@ var LuiMultiSwitch = function (_a) {
                     return e.key && e.key === option.shortcutKey && select(i).then();
                 });
             } }),
-        React__default["default"].createElement("div", { className: clsx('LuiMultiSwitch-labels', disabled && 'LuiMultiSwitch-disabled') }, options === null || options === void 0 ? void 0 : options.map(function (option, i) { return (React__default["default"].createElement("label", { role: 'radio', key: i, htmlFor: id.current, "aria-disabled": disabled, "aria-checked": selectedIndex === i, className: option.className, onClick: function () { return select(i); }, onTouchStart: function () { return select(i); } }, option.text)); }))));
+        React__default["default"].createElement("div", { className: clsx('LuiMultiSwitch-labels', disabled && 'LuiMultiSwitch-disabled') }, options === null || options === void 0 ? void 0 : options.map(function (option, i) { return (React__default["default"].createElement("label", { role: 'radio', key: i, htmlFor: id.current, "aria-disabled": option.disabled || disabled, "aria-checked": selectedIndex === i, className: option.className, onClick: function () { return select(i); }, onTouchStart: function () { return select(i); } }, option.text)); }))));
 };
 
 var css_248z$5 = "/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiListBox {\n  padding: 0;\n  list-style: none;\n}\n.LuiListBox .LuiListBoxItem {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  user-select: none;\n  color: #2a292c;\n  line-height: 24px;\n  outline: none;\n  padding: 0.5rem 0.75rem;\n  border: 2px solid transparent;\n}\n.LuiListBox .LuiListBoxItem:focus-visible {\n  border-color: #007198;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-selected {\n  background: #e2f3f7;\n}\n.LuiListBox .LuiListBoxItem:hover, .LuiListBox .LuiListBoxItem.LuiListBoxItem-selected:hover {\n  background: #d6eef4;\n}\n.LuiListBox .LuiListBoxItem.LuiListBoxItem-disabled {\n  background: #eaeaea;\n}\n.LuiListBox .LuiListBox-emptyIndicator, .LuiListBox .LuiListBox-loadingIndicator {\n  padding: 0.5rem 0.75rem;\n}\n.LuiListBox .LuiListBoxGroup .LuiListBoxGroup-heading {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  user-select: none;\n  color: #6b6966;\n  line-height: 16px;\n  padding: 0.5rem 0.5rem;\n}";