@linzjs/lui 18.3.0 → 18.3.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [18.3.1](https://github.com/linz/lui/compare/v18.3.0...v18.3.1) (2023-07-27)
+
+
+### Bug Fixes
+
+* Fix scss location and exports ([#971](https://github.com/linz/lui/issues/971)) ([9f7773b](https://github.com/linz/lui/commit/9f7773b87e7846b3cdcd0bcd2c7adf0479d8a781))
+
 # [18.3.0](https://github.com/linz/lui/compare/v18.2.0...v18.3.0) (2023-07-27)
 
 # [18.2.0](https://github.com/linz/lui/compare/v18.1.0...v18.2.0) (2023-07-26)

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

@@ -1,12 +1,11 @@
-import './LuiMultiSwitch.scss';
 import { ReactElement } from 'react';
-export interface ToggleSwitchOption<ValueType> {
+export interface LuiMultiSwitchOption<ValueType> {
     text: ReactElement | string;
     value: ValueType;
     shortcutKey?: string;
     className?: string;
 }
-export declare const LuiMultiSwitchYesNo: ToggleSwitchOption<boolean>[];
+export declare const LuiMultiSwitchYesNo: LuiMultiSwitchOption<boolean>[];
 export interface LuiMultiSwitchProps<ValueType> {
     'data-testid'?: string;
     className?: string;
@@ -14,7 +13,7 @@ export interface LuiMultiSwitchProps<ValueType> {
     value?: ValueType | null;
     disabled?: boolean;
     autoFocus?: boolean;
-    options: ToggleSwitchOption<ValueType>[];
+    options: LuiMultiSwitchOption<ValueType>[];
     onChange: (value: ValueType) => Promise<boolean> | any;
 }
 /**

package/dist/index.d.ts

@@ -58,6 +58,7 @@ export { LuiSwitchButton } from './components/LuiSwitchButton/LuiSwitchButton';
 export { LuiAccordicard } from './components/LuiAccordicard/LuiAccordicard';
 export { LuiAccordicardStatic } from './components/LuiAccordicardStatic/LuiAccordicardStatic';
 export { LuiAccordion } from './components/LuiAccordion/LuiAccordion';
+export * from './components/LuiMultiSwitch/LuiMultiSwitch';
 export { LuiListBox, ILuiListBoxItem, ILuiListBoxProps, IItemRendererProps, } from './components/LuiListBox/LuiListBox';
 export { RadioItemRenderer } from './components/LuiListBox/Renderers/RadioItemRenderer';
 export { CheckboxItemRenderer } from './components/LuiListBox/Renderers/CheckboxItemRenderer';

package/dist/index.js

@@ -67682,6 +67682,94 @@ var LuiAccordion = function (props) {
         children));
 };
 
+var LuiMultiSwitchYesNo = [
+    { text: 'Yes', value: true, shortcutKey: 'y' },
+    { text: 'No', value: false, shortcutKey: 'n' },
+];
+/**
+ * Uncontrolled grouped button style component where component has single focus and associated keyboard events.
+ */
+var LuiMultiSwitch = function (_a) {
+    var className = _a.className, defaultValue = _a.defaultValue, value = _a.value, onChange = _a.onChange, disabled = _a.disabled, autoFocus = _a.autoFocus, options = _a.options, props = __rest(_a, ["className", "defaultValue", "value", "onChange", "disabled", "autoFocus", "options"]);
+    var id = React.useRef(v4());
+    var inputRef = React.useRef(null);
+    var updating = React.useRef(false);
+    var _b = React.useState(function () {
+        if (defaultValue === undefined && value === undefined) {
+            console.error('LuiMultiSwitch is missing either a defaultValue(uncontrolled) or a value(controlled) parameter');
+        }
+        // eslint-disable-next-line eqeqeq
+        return options === null || options === void 0 ? void 0 : options.findIndex(function (option) { return option.value == defaultValue; });
+    }), selectedIndex = _b[0], setSelectedIndex = _b[1];
+    var isUncontrolled = defaultValue !== undefined;
+    React.useEffect(function () {
+        // Controlled input
+        if (!isUncontrolled) {
+            // eslint-disable-next-line eqeqeq
+            setSelectedIndex(options === null || options === void 0 ? void 0 : options.findIndex(function (option) { return option.value == value; }));
+        }
+    }, [value]);
+    /**
+     * Calls and awaits onChange callback, blocking further updates until callback has finished.
+     * If callback returns false or there is an exception it reverts the change.
+     *
+     * @param newSelectedIndex option index to select.
+     */
+    var select = function (newSelectedIndex) { return __awaiter(void 0, void 0, void 0, function () {
+        var preSelectedIndex, result;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    if (disabled || updating.current || newSelectedIndex === selectedIndex) {
+                        return [2 /*return*/];
+                    }
+                    if (isUncontrolled) {
+                        setSelectedIndex(newSelectedIndex);
+                    }
+                    updating.current = true;
+                    preSelectedIndex = selectedIndex;
+                    result = false;
+                    _b.label = 1;
+                case 1:
+                    _b.trys.push([1, , 3, 4]);
+                    return [4 /*yield*/, onChange(options[newSelectedIndex].value)];
+                case 2:
+                    result = _b.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    updating.current = false;
+                    return [7 /*endfinally*/];
+                case 4:
+                    if (result === false && isUncontrolled) {
+                        setSelectedIndex(preSelectedIndex);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var selectOffset = function (offset, wrap) {
+        if (wrap === void 0) { wrap = false; }
+        var newSelectedIndex = selectedIndex + offset;
+        if (newSelectedIndex < 0)
+            newSelectedIndex = wrap ? options.length - 1 : 0;
+        if (newSelectedIndex >= options.length)
+            newSelectedIndex = wrap ? 0 : options.length - 1;
+        select(newSelectedIndex).then();
+    };
+    return (React__default["default"].createElement("div", { className: clsx('LuiMultiSwitch', className), role: 'radiogroup', "data-testid": props['data-testid'] },
+        React__default["default"].createElement("input", { ref: inputRef, name: id.current, type: 'text', value: selectedIndex, autoFocus: autoFocus, onKeyUp: function (e) {
+                e.key === 'ArrowLeft' && selectOffset(-1);
+                e.key === 'ArrowRight' && selectOffset(1);
+                e.key === ' ' && selectOffset(1, true);
+                options.forEach(function (option, i) {
+                    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)); }))));
+};
+
 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}";
 styleInject(css_248z$5);
 
@@ -71400,6 +71488,8 @@ exports.LuiMessagingContextProvider = LuiMessagingContextProvider;
 exports.LuiMiniSpinner = LuiMiniSpinner;
 exports.LuiModal = LuiModal;
 exports.LuiMoneyInput = LuiMoneyInput;
+exports.LuiMultiSwitch = LuiMultiSwitch;
+exports.LuiMultiSwitchYesNo = LuiMultiSwitchYesNo;
 exports.LuiProgressBar = LuiProgressBar;
 exports.LuiRadioInput = LuiRadioInput;
 exports.LuiResizableLayout = LuiResizableLayout;