@sap-ux/ui-components 1.0.0

package/dist/components/UIToggle/UIToggle.js

@@ -0,0 +1,181 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIToggle = exports.UIToggleSize = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+const ValidationMessage_1 = require("../../helper/ValidationMessage");
+var UIToggleSize;
+(function (UIToggleSize) {
+    UIToggleSize["Standard"] = "Standard";
+    UIToggleSize["Small"] = "Small";
+})(UIToggleSize = exports.UIToggleSize || (exports.UIToggleSize = {}));
+const TOGGLE_SIZES = new Map([
+    [
+        UIToggleSize.Small,
+        {
+            width: 30,
+            height: 14,
+            padding: '0 2px',
+            margin: '0',
+            label: {
+                fontSize: 13,
+                padding: '2px 0'
+            },
+            circle: {
+                width: 10,
+                height: 10,
+                borderWidth: 5
+            }
+        }
+    ]
+]);
+const DISABLED_OPACITY = 0.4;
+const COLORS = {
+    pill: {
+        borderColor: 'var(--vscode-contrastBorder, transparent)',
+        unchecked: {
+            background: 'var(--vscode-titleBar-inactiveForeground)',
+            hover: {
+                background: 'var(--vscode-editorHint-foreground)',
+                borderColor: 'var(--vscode-contrastActiveBorder, transparent)'
+            }
+        },
+        checked: {
+            background: 'var(--vscode-button-background)',
+            hover: {
+                background: 'var(--vscode-button-hoverBackground)',
+                borderColor: 'var(--vscode-contrastActiveBorder, transparent)'
+            }
+        },
+        focus: {
+            outline: '1px solid var(--vscode-focusBorder) !important'
+        }
+    },
+    thumb: {
+        background: 'var(--vscode-button-foreground)'
+    }
+};
+/**
+ * UIToggle component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle
+ *
+ * @exports
+ * @class UIToggle
+ * @extends {React.Component<IToggleProps, {}>}
+ */
+class UIToggle extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     * @param {UIToggleProps} props
+     */
+    constructor(props) {
+        super(props);
+    }
+    /**
+     * Method returns size of margin bottom for root container depending on current props state.
+     *
+     * @param {string} [message] Validation message.
+     * @returns {number | undefined} Value for margin bottom.
+     */
+    getMarginBottom(message) {
+        const { inlineLabel } = this.props;
+        if (message) {
+            return inlineLabel ? 0 : 4;
+        }
+        return undefined;
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const { inlineLabelLeft, labelFlexGrow, size, inlineLabel } = this.props;
+        const sizeInfo = TOGGLE_SIZES.get(size || UIToggleSize.Standard);
+        const messageInfo = ValidationMessage_1.getMessageInfo(this.props);
+        const styles = (styleProps) => {
+            return {
+                root: {
+                    ...(labelFlexGrow && {
+                        flexGrow: 1
+                    }),
+                    margin: sizeInfo?.margin,
+                    marginBottom: this.getMarginBottom(messageInfo.message)
+                },
+                label: {
+                    color: 'var(--vscode-foreground)',
+                    fontWeight: 'normal',
+                    fontSize: sizeInfo?.label.fontSize,
+                    padding: sizeInfo?.label.padding,
+                    ...(inlineLabel && { marginLeft: 10 }),
+                    ...(inlineLabelLeft && {
+                        order: 0,
+                        marginLeft: 0,
+                        marginRight: 10
+                    }),
+                    ...(labelFlexGrow && {
+                        flexGrow: 1
+                    }),
+                    opacity: this.props.disabled ? DISABLED_OPACITY : 'inherit'
+                },
+                pill: {
+                    height: sizeInfo?.height,
+                    width: sizeInfo?.width,
+                    padding: sizeInfo?.padding,
+                    background: COLORS.pill.checked.background,
+                    borderColor: COLORS.pill.borderColor,
+                    borderStyle: 'solid',
+                    ':hover': {
+                        background: COLORS.pill.checked.hover.background,
+                        borderColor: COLORS.pill.checked.hover.borderColor
+                    },
+                    [`:hover .ms-Toggle-thumb`]: {
+                        backgroundColor: COLORS.thumb.background
+                    },
+                    ':disabled': {
+                        background: COLORS.pill.checked.background,
+                        borderColor: COLORS.pill.borderColor,
+                        opacity: DISABLED_OPACITY
+                    },
+                    ...(!styleProps.checked && {
+                        background: COLORS.pill.unchecked.background,
+                        borderStyle: 'dashed',
+                        ':hover': {
+                            background: COLORS.pill.unchecked.hover.background,
+                            borderColor: COLORS.pill.unchecked.hover.borderColor
+                        },
+                        [`:hover .ms-Toggle-thumb`]: {
+                            backgroundColor: COLORS.thumb.background
+                        },
+                        ':disabled': {
+                            background: COLORS.pill.unchecked.background,
+                            borderColor: COLORS.pill.borderColor,
+                            opacity: DISABLED_OPACITY
+                        }
+                    }),
+                    selectors: {
+                        ':focus::after': {
+                            // Overwrite flunt ui focus borders
+                            border: 'none !important',
+                            outline: COLORS.pill.focus.outline
+                        }
+                    }
+                },
+                thumb: {
+                    height: sizeInfo?.circle.height,
+                    width: sizeInfo?.circle.width,
+                    borderWidth: sizeInfo?.circle.borderWidth,
+                    background: COLORS.thumb.background,
+                    ':hover': {
+                        backgroundColor: COLORS.thumb.background
+                    }
+                }
+            };
+        };
+        const toogleComponent = react_1.default.createElement(react_2.Toggle, { ...this.props, styles: styles });
+        return messageInfo.message ? (react_1.default.createElement(ValidationMessage_1.MessageWrapper, { message: messageInfo }, toogleComponent)) : (toogleComponent);
+    }
+}
+exports.UIToggle = UIToggle;
+//# sourceMappingURL=UIToggle.js.map

package/dist/components/UIToggle/UIToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIToggle.js","sourceRoot":"","sources":["../../../src/components/UIToggle/UIToggle.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAG1B,2CAAyC;AAGzC,sEAAgF;AAShF,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,qCAAqB,CAAA;IACrB,+BAAe,CAAA;AACnB,CAAC,EAHW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAGvB;AAkBD,MAAM,YAAY,GAAG,IAAI,GAAG,CAAiC;IACzD;QACI,YAAY,CAAC,KAAK;QAClB;YACI,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,OAAO;YAChB,MAAM,EAAE,GAAG;YACX,KAAK,EAAE;gBACH,QAAQ,EAAE,EAAE;gBACZ,OAAO,EAAE,OAAO;aACnB;YACD,MAAM,EAAE;gBACJ,KAAK,EAAE,EAAE;gBACT,MAAM,EAAE,EAAE;gBACV,WAAW,EAAE,CAAC;aACjB;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAE7B,MAAM,MAAM,GAAG;IACX,IAAI,EAAE;QACF,WAAW,EAAE,2CAA2C;QACxD,SAAS,EAAE;YACP,UAAU,EAAE,2CAA2C;YACvD,KAAK,EAAE;gBACH,UAAU,EAAE,qCAAqC;gBACjD,WAAW,EAAE,iDAAiD;aACjE;SACJ;QACD,OAAO,EAAE;YACL,UAAU,EAAE,iCAAiC;YAC7C,KAAK,EAAE;gBACH,UAAU,EAAE,sCAAsC;gBAClD,WAAW,EAAE,iDAAiD;aACjE;SACJ;QACD,KAAK,EAAE;YACH,OAAO,EAAE,gDAAgD;SAC5D;KACJ;IACD,KAAK,EAAE;QACH,UAAU,EAAE,iCAAiC;KAChD;CACJ,CAAC;AAEF;;;;;;;GAOG;AACH,MAAa,QAAS,SAAQ,eAAK,CAAC,SAA4B;IAC5D;;;OAGG;IACH,YAAmB,KAAoB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED;;;;;OAKG;IACH,eAAe,CAAC,OAAgB;QAC5B,MAAM,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACnC,IAAI,OAAO,EAAE;YACT,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC9B;QACD,OAAO,SAAS,CAAC;IACrB,CAAC;IAED;;OAEG;IACH,MAAM;QACF,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACzE,MAAM,QAAQ,GAAiC,YAAY,CAAC,GAAG,CAAC,IAAI,IAAI,YAAY,CAAC,QAAQ,CAAC,CAAC;QAC/F,MAAM,WAAW,GAAG,kCAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE/C,MAAM,MAAM,GAAG,CAAC,UAA6B,EAA0B,EAAE;YACrE,OAAO;gBACH,IAAI,EAAE;oBACF,GAAG,CAAC,aAAa,IAAI;wBACjB,QAAQ,EAAE,CAAC;qBACd,CAAC;oBACF,MAAM,EAAE,QAAQ,EAAE,MAAM;oBACxB,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC,OAAO,CAAC;iBAC1D;gBACD,KAAK,EAAE;oBACH,KAAK,EAAE,0BAA0B;oBACjC,UAAU,EAAE,QAAQ;oBACpB,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ;oBAClC,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,OAAO;oBAChC,GAAG,CAAC,WAAW,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC;oBACtC,GAAG,CAAC,eAAe,IAAI;wBACnB,KAAK,EAAE,CAAC;wBACR,UAAU,EAAE,CAAC;wBACb,WAAW,EAAE,EAAE;qBAClB,CAAC;oBACF,GAAG,CAAC,aAAa,IAAI;wBACjB,QAAQ,EAAE,CAAC;qBACd,CAAC;oBACF,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;iBAC9D;gBACD,IAAI,EAAE;oBACF,MAAM,EAAE,QAAQ,EAAE,MAAM;oBACxB,KAAK,EAAE,QAAQ,EAAE,KAAK;oBACtB,OAAO,EAAE,QAAQ,EAAE,OAAO;oBAC1B,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU;oBAC1C,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW;oBACpC,WAAW,EAAE,OAAO;oBACpB,QAAQ,EAAE;wBACN,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU;wBAChD,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW;qBACrD;oBACD,CAAC,yBAAyB,CAAC,EAAE;wBACzB,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU;qBAC3C;oBACD,WAAW,EAAE;wBACT,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU;wBAC1C,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW;wBACpC,OAAO,EAAE,gBAAgB;qBAC5B;oBACD,GAAG,CAAC,CAAC,UAAU,CAAC,OAAO,IAAI;wBACvB,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU;wBAC5C,WAAW,EAAE,QAAQ;wBACrB,QAAQ,EAAE;4BACN,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU;4BAClD,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW;yBACvD;wBACD,CAAC,yBAAyB,CAAC,EAAE;4BACzB,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU;yBAC3C;wBACD,WAAW,EAAE;4BACT,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU;4BAC5C,WAAW,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW;4BACpC,OAAO,EAAE,gBAAgB;yBAC5B;qBACJ,CAAC;oBACF,SAAS,EAAE;wBACP,eAAe,EAAE;4BACb,mCAAmC;4BACnC,MAAM,EAAE,iBAAiB;4BACzB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO;yBACrC;qBACJ;iBACJ;gBACD,KAAK,EAAE;oBACH,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,MAAM;oBAC/B,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,KAAK;oBAC7B,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,WAAW;oBACzC,UAAU,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU;oBACnC,QAAQ,EAAE;wBACN,eAAe,EAAE,MAAM,CAAC,KAAK,CAAC,UAAU;qBAC3C;iBACJ;aACJ,CAAC;QACN,CAAC,CAAC;QAEF,MAAM,eAAe,GAAG,8BAAC,cAAM,OAAK,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;QACnE,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,CACzB,8BAAC,kCAAc,IAAC,OAAO,EAAE,WAAW,IAAG,eAAe,CAAkB,CAC3E,CAAC,CAAC,CAAC,CACA,eAAe,CAClB,CAAC;IACN,CAAC;CACJ;AAtHD,4BAsHC"}

package/dist/components/UIToggle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './UIToggle';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/UIToggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/UIToggle/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/UIToggle/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UIToggle"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/UIToggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/UIToggle/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAA2B"}

package/dist/components/UIToggleGroup/UIToggleGroup.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { UIToggleGroupProps, ToggleGroupOption } from './UIToggleGroup.types';
+import type { UIToggleGroupOptionProps } from './UIToggleGroupOption/UIToggleGroupOption.types';
+import './UIToggleGroup.scss';
+interface UIToggleGroupState {
+    options: ToggleGroupOption[];
+}
+/**
+ * UIToggleGroup component.
+ *
+ * @exports
+ * @class UIToggleGroup
+ * @extends {React.Component<UIToggleGroupProps, UIToggleGroupState>}
+ */
+export declare class UIToggleGroup extends React.Component<UIToggleGroupProps, UIToggleGroupState> {
+    labelId: string;
+    /**
+     * Initializes component properties.
+     * @param {UIToggleGroupProps} props
+     */
+    constructor(props: UIToggleGroupProps);
+    onClick: (_evt: React.MouseEvent<HTMLButtonElement, MouseEvent>, option?: UIToggleGroupOptionProps | undefined) => void;
+    onFocus: (_evt: React.FocusEvent<HTMLButtonElement>, option?: UIToggleGroupOptionProps | undefined) => void;
+    onBlur: (_evt: React.FocusEvent<HTMLButtonElement>, _option?: UIToggleGroupOptionProps | undefined) => void;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
+export {};
+//# sourceMappingURL=UIToggleGroup.d.ts.map

package/dist/components/UIToggleGroup/UIToggleGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIToggleGroup.d.ts","sourceRoot":"","sources":["../../../src/components/UIToggleGroup/UIToggleGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,iDAAiD,CAAC;AAEhG,OAAO,sBAAsB,CAAC;AAE9B,UAAU,kBAAkB;IACxB,OAAO,EAAE,iBAAiB,EAAE,CAAC;CAChC;AAED;;;;;;GAMG;AACH,qBAAa,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;IACtF,OAAO,SAAgF;IAEvF;;;OAGG;gBACgB,KAAK,EAAE,kBAAkB;IAuBrC,OAAO,SACJ,gBAAgB,CAAC,iBAAiB,EAAE,UAAU,CAAC,oDAEtD,IAAI,CA6BL;IAEK,OAAO,SAAU,gBAAgB,CAAC,iBAAiB,CAAC,oDAAsC,IAAI,CAkBnG;IAEK,MAAM,SAAU,gBAAgB,CAAC,iBAAiB,CAAC,qDAAuC,IAAI,CASnG;IAEF;;OAEG;IACH,MAAM,IAAI,GAAG,CAAC,OAAO;CA0CxB"}

package/dist/components/UIToggleGroup/UIToggleGroup.js

@@ -0,0 +1,132 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIToggleGroup = void 0;
+const React = __importStar(require("react"));
+const UIToggleGroupOption_1 = require("./UIToggleGroupOption");
+const UILabel_1 = require("../UILabel");
+const UIFocusZone_1 = require("../UIFocusZone");
+const utilities_1 = require("../../utilities");
+require("./UIToggleGroup.scss");
+/**
+ * UIToggleGroup component.
+ *
+ * @exports
+ * @class UIToggleGroup
+ * @extends {React.Component<UIToggleGroupProps, UIToggleGroupState>}
+ */
+class UIToggleGroup extends React.Component {
+    /**
+     * Initializes component properties.
+     * @param {UIToggleGroupProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.labelId = this.props.labelId ? this.props.labelId : utilities_1.UIGetId('ui-toggle-group-option-');
+        this.onClick = (_evt, option) => {
+            let isSelected = false;
+            if (option && option.itemKey) {
+                this.setState({
+                    options: this.state.options.map((entry, index, options) => {
+                        if (entry.key === option.itemKey) {
+                            isSelected = !options[index].selected;
+                            return {
+                                ...entry,
+                                selected: isSelected,
+                                focused: options[index].focused
+                            };
+                        }
+                        else {
+                            return {
+                                ...entry,
+                                selected: false,
+                                focused: false
+                            };
+                        }
+                    })
+                });
+                if (this.props.onChange) {
+                    this.props.onChange?.(option.itemKey, isSelected);
+                }
+            }
+        };
+        this.onFocus = (_evt, option) => {
+            if (option && option.itemKey) {
+                this.setState({
+                    options: this.state.options.map((entry) => {
+                        if (entry.key === option.itemKey) {
+                            return {
+                                ...entry,
+                                focused: true
+                            };
+                        }
+                        else {
+                            return {
+                                ...entry,
+                                focused: false
+                            };
+                        }
+                    })
+                });
+            }
+        };
+        this.onBlur = (_evt, _option) => {
+            this.setState({
+                options: this.state.options.map((entry) => {
+                    return {
+                        ...entry,
+                        focused: false
+                    };
+                })
+            });
+        };
+        this.state = {
+            options: this.props.options.map((entry) => {
+                if (entry.key === this.props.selectedKey) {
+                    return {
+                        ...entry,
+                        selected: true
+                    };
+                }
+                else {
+                    return {
+                        ...entry
+                    };
+                }
+            })
+        };
+        this.onClick = this.onClick.bind(this);
+        this.onFocus = this.onFocus.bind(this);
+        this.onBlur = this.onBlur.bind(this);
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        return (React.createElement("div", { className: "ui-toggle-group", role: "group", ...(this.props.ariaLabel && { 'aria-labelledby': this.labelId }) },
+            this.props.label && (React.createElement(UILabel_1.UILabel, { id: this.labelId, ...(this.props.ariaLabel && { 'aria-label': this.props.ariaLabel }), className: "ui-toggle-group-label", required: this.props.required, disabled: this.props.disabled }, this.props.label)),
+            React.createElement(UIFocusZone_1.UIFocusZone, { as: "div", direction: UIFocusZone_1.UIFocusZoneDirection.horizontal, isCircularNavigation: true, shouldRaiseClicks: true, className: "ui-toggle-group-container", role: "list" }, this.state.options.map((option) => {
+                return (React.createElement(UIToggleGroupOption_1.UIToggleGroupOption, { itemKey: option.key, ...option, key: option.key, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur, selected: option.selected, disabled: option.disabled || this.props.disabled }));
+            }))));
+    }
+}
+exports.UIToggleGroup = UIToggleGroup;
+//# sourceMappingURL=UIToggleGroup.js.map

package/dist/components/UIToggleGroup/UIToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIToggleGroup.js","sourceRoot":"","sources":["../../../src/components/UIToggleGroup/UIToggleGroup.tsx"],"names":[],"mappings":"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"}

package/dist/components/UIToggleGroup/UIToggleGroup.scss

@@ -0,0 +1,13 @@
+.ui-toggle-group {
+    margin-top: 0;
+
+    &-label {
+        margin-top: 0;
+    }
+
+    &-container {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+}

package/dist/components/UIToggleGroup/UIToggleGroup.types.d.ts

@@ -0,0 +1,23 @@
+export interface UIToggleGroupProps {
+    options: ToggleGroupOption[];
+    labelId?: string;
+    label?: string;
+    ariaLabel?: string;
+    selectedKey?: string;
+    required?: boolean;
+    disabled?: boolean;
+    onChange?: (itemKey: string, isSelected: boolean) => void;
+}
+export interface ToggleGroupOption {
+    key: string;
+    disabled?: boolean;
+    selected?: boolean;
+    focused?: boolean;
+    id?: string;
+    labelId?: string;
+    ariaLabel?: string;
+    title?: string;
+    text?: string;
+    icon?: string;
+}
+//# sourceMappingURL=UIToggleGroup.types.d.ts.map

package/dist/components/UIToggleGroup/UIToggleGroup.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIToggleGroup.types.d.ts","sourceRoot":"","sources":["../../../src/components/UIToggleGroup/UIToggleGroup.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IAC/B,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7D;AAED,MAAM,WAAW,iBAAiB;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/components/UIToggleGroup/UIToggleGroup.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=UIToggleGroup.types.js.map

package/dist/components/UIToggleGroup/UIToggleGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIToggleGroup.types.js","sourceRoot":"","sources":["../../../src/components/UIToggleGroup/UIToggleGroup.types.ts"],"names":[],"mappings":""}

package/dist/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { UIToggleGroupOptionProps } from './UIToggleGroupOption.types';
+import './UIToggleGroupOption.scss';
+/**
+ * UIToggleGroupOption component
+ *
+ * @exports
+ * @class UIToggleGroupOption
+ * @extends {React.Component<UIToggleGroupOptionProps, {}>}
+ */
+export declare class UIToggleGroupOption extends React.Component<UIToggleGroupOptionProps> {
+    /**
+     * Initializes component properties.
+     *
+     * @param {UIToggleGroupOptionProps} props
+     */
+    constructor(props: UIToggleGroupOptionProps);
+    onClick: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onBlur: (evt: React.FocusEvent<HTMLButtonElement>) => void;
+    onFocus: (evt: React.FocusEvent<HTMLButtonElement>) => void;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
+//# sourceMappingURL=UIToggleGroupOption.d.ts.map

package/dist/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIToggleGroupOption.d.ts","sourceRoot":"","sources":["../../../../src/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAE5E,OAAO,4BAA4B,CAAC;AAEpC;;;;;;GAMG;AACH,qBAAa,mBAAoB,SAAQ,KAAK,CAAC,SAAS,CAAC,wBAAwB,CAAC;IAC9E;;;;OAIG;gBACgB,KAAK,EAAE,wBAAwB;IAQ3C,OAAO,QAAS,gBAAgB,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAG,IAAI,CAE3E;IAEK,MAAM,QAAS,gBAAgB,CAAC,iBAAiB,CAAC,UAEvD;IAEK,OAAO,QAAS,gBAAgB,CAAC,iBAAiB,CAAC,UAExD;IAEF;;OAEG;IACH,MAAM,IAAI,GAAG,CAAC,OAAO;CAqCxB"}

package/dist/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.js

@@ -0,0 +1,74 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIToggleGroupOption = void 0;
+const React = __importStar(require("react"));
+const UIIcon_1 = require("../../UIIcon");
+const utilities_1 = require("../../../utilities");
+require("./UIToggleGroupOption.scss");
+/**
+ * UIToggleGroupOption component
+ *
+ * @exports
+ * @class UIToggleGroupOption
+ * @extends {React.Component<UIToggleGroupOptionProps, {}>}
+ */
+class UIToggleGroupOption extends React.Component {
+    /**
+     * Initializes component properties.
+     *
+     * @param {UIToggleGroupOptionProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.onClick = (evt) => {
+            this.props.onClick?.(evt, this.props);
+        };
+        this.onBlur = (evt) => {
+            this.props.onBlur?.(evt, this.props);
+        };
+        this.onFocus = (evt) => {
+            this.props.onFocus?.(evt, this.props);
+        };
+        this.onClick = this.onClick.bind(this);
+        this.onFocus = this.onFocus.bind(this);
+        this.onBlur = this.onBlur.bind(this);
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const labelId = this.props.labelId ? this.props.labelId : utilities_1.UIGetId('ui-toggle-group-option-');
+        return (React.createElement("button", { role: "button", ...(this.props.title && { title: this.props.title }), "data-is-focusable": "true", className: [
+                'ui-toggle-group-option',
+                this.props.focused ? 'ui-toggle-group-option--focused' : '',
+                this.props.selected ? 'ui-toggle-group-option--selected' : '',
+                this.props.disabled ? 'ui-toggle-group-option--disabled' : ''
+            ]
+                .filter((x) => !!x)
+                .join(' '), ...(this.props.ariaLabel && { 'aria-labelledby': labelId }), disabled: this.props.disabled || false, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur },
+            React.createElement("span", { className: "ui-toggle-group-option-content", tabIndex: -1 },
+                this.props.text && (React.createElement("span", { id: labelId, className: "ui-toggle-group-option-content-text", ...(this.props.ariaLabel && { 'aria-label': this.props.ariaLabel }) }, this.props.text)),
+                this.props.icon && (React.createElement(UIIcon_1.UIIcon, { className: "ui-toggle-group-option-content-icon", iconName: this.props.icon })))));
+    }
+}
+exports.UIToggleGroupOption = UIToggleGroupOption;
+//# sourceMappingURL=UIToggleGroupOption.js.map

package/dist/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIToggleGroupOption.js","sourceRoot":"","sources":["../../../../src/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.tsx"],"names":[],"mappings":"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"}

package/dist/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.scss

@@ -0,0 +1,74 @@
+.ui-toggle-group-option {
+    height: 22px;
+    width: 22px;
+    border-radius: 1px;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 13px;
+    line-height: 18px;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    color: var(--vscode-foreground);
+    border: none;
+    background-color: transparent;
+    position: relative;
+
+    &:not(:last-child) {
+        margin: 0 3px 0 0;
+    }
+    &:hover {
+        cursor: pointer;
+        background-color: var(--vscode-menubar-selectionBackground);
+        outline: 1px dashed var(--vscode-contrastActiveBorder);
+    }
+    &:focus {
+        border-radius: 0;
+        outline: transparent;
+    }
+    &--focused {
+        &:focus-visible {
+            &::after {
+                content: '';
+                position: absolute;
+                border: none;
+                z-index: 1;
+                outline: 1px solid var(--vscode-contrastActiveBorder, var(--vscode-button-background));
+                inset: -1px;
+            }
+        }
+    }
+    &--selected {
+        background-color: var(--vscode-button-background);
+        color: var(--vscode-button-foreground);
+        outline: 1px solid var(--vscode-contrastActiveBorder);
+
+        &:hover {
+            background-color: var(--vscode-button-hoverBackground);
+            outline: 1px dashed var(--vscode-contrastActiveBorder);
+        }
+
+        .ui-toggle-group-option-content-icon {
+            svg > path,
+            svg > rect {
+                fill: var(--vscode-button-foreground);
+            }
+        }
+    }
+
+    &--disabled {
+        opacity: 0.5;
+        background-color: transparent;
+
+        &:hover {
+            background-color: transparent;
+            cursor: initial;
+        }
+    }
+    &-content {
+        &-icon {
+            display: flex;
+        }
+    }
+}

package/dist/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.types.d.ts

@@ -0,0 +1,11 @@
+import type * as React from 'react';
+import type { ToggleGroupOption } from '../UIToggleGroup.types';
+export interface UIToggleGroupOptionProps extends Omit<ToggleGroupOption, 'key'> {
+    itemKey: string;
+    key?: string;
+    onClick?: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>, props?: UIToggleGroupOptionProps) => void;
+    onKeyDown?: (evt: React.KeyboardEvent<HTMLButtonElement>, props?: UIToggleGroupOptionProps) => void;
+    onFocus?: (evt: React.FocusEvent<HTMLButtonElement>, props?: UIToggleGroupOptionProps) => void;
+    onBlur?: (evt: React.FocusEvent<HTMLButtonElement>, props?: UIToggleGroupOptionProps) => void;
+}
+//# sourceMappingURL=UIToggleGroupOption.types.d.ts.map

package/dist/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIToggleGroupOption.types.d.ts","sourceRoot":"","sources":["../../../../src/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC;IAC5E,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,EAAE,KAAK,CAAC,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC3G,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC,EAAE,wBAAwB,KAAK,IAAI,CAAC;IACpG,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC,EAAE,wBAAwB,KAAK,IAAI,CAAC;IAC/F,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC,EAAE,wBAAwB,KAAK,IAAI,CAAC;CACjG"}

package/dist/components/UIToggleGroup/UIToggleGroupOption/UIToggleGroupOption.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=UIToggleGroupOption.types.js.map