@hazelcast/ui 1.3.3-next.8 → 2.0.1-canary.0

package/lib/components/AppHeader/SelectCluster/SelectCluster.module.scss

@@ -0,0 +1,101 @@
+@use '../../../../styles/constants' as c;
+@use '../../../../styles/helpers' as h;
+
+$selectContainer: ':global .hz-select-field';
+$selectControl: ':global .hz-select-field__control';
+$selectInputContainer: ':global .hz-select-field__input-container';
+$selectValueContainer: ':global .hz-select-field__value-container';
+$selectTrailingNote: ':global .hz-select-field__trailing-note';
+$selectValue: ':global .hz-select-field__single-value';
+$selectMenuPortal: ':global .hz-select-field__menu-portal';
+$selectMenu: ':global .hz-select-field__menu';
+$selectMenuList: ':global .hz-select-field__menu-list';
+$selectMenuNotice: ':global .hz-select-field__menu-notice';
+$selectOption: ':global .hz-select-field__option';
+$selectGroup: ':global .hz-select-field__group';
+$selectGroupHeading: ':global .hz-select-field__group-heading';
+$selectFieldIndicators: ':global .hz-select-field__indicators';
+
+.select {
+  width: 260px;
+
+  &.disabled {
+    #{$selectControl} {
+      color: c.$colorTextSecondary;
+      background-color: transparent;
+
+      #{$selectValue},
+      #{$selectTrailingNote},
+      #{$selectFieldIndicators} svg {
+        color: c.$colorTextSecondary;
+      }
+    }
+  }
+
+  #{$selectControl} {
+    background: none;
+    border-radius: c.$borderRadius;
+    border: 1px solid c.$colorTextSecondary;
+
+    #{$selectInputContainer},
+    #{$selectValueContainer},
+    #{$selectTrailingNote} {
+      color: c.$colorNeutralLighter;
+    }
+  }
+
+  #{$selectValue} {
+    color: c.$colorNeutralLighter;
+  }
+
+  #{$selectFieldIndicators} {
+    svg {
+      color: c.$colorNeutralLighter;
+    }
+  }
+
+  .selectIconLeftContainer {
+    box-sizing: content-box;
+
+    .selectIconLeft {
+      color: c.$colorSuccess;
+
+      &.disconnected {
+        color: c.$colorError;
+      }
+
+      &.disabled {
+        color: c.$colorTextSecondary;
+      }
+    }
+  }
+}
+
+.menuPortal {
+  #{$selectMenu} {
+    border: none;
+    background: c.$colorBrandSecondary;
+    border-radius: 0 0 c.$borderRadius c.$borderRadius;
+  }
+
+  #{$selectOption} {
+    &:active {
+      background: none;
+    }
+
+    #{$selectValueContainer},
+    #{$selectTrailingNote} {
+      color: c.$colorNeutralLighter;
+    }
+
+    &--is-focused {
+      background: c.$colorBrandAccent;
+      box-shadow: none;
+
+      #{$selectValueContainer},
+      #{$selectTrailingNote} {
+        color: c.$colorBrandText;
+      }
+    }
+  }
+}

package/lib/components/AppHeader/SelectCluster/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectCluster';

package/lib/components/AppHeader/SelectCluster/index.js

@@ -0,0 +1,2 @@
+export * from './SelectCluster';
+//# sourceMappingURL=index.js.map

package/lib/components/AppHeader/SelectCluster/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/AppHeader/SelectCluster/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/lib/components/AppHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './AppHeader';

package/lib/components/AppHeader/index.js

@@ -0,0 +1,2 @@
+export * from './AppHeader';
+//# sourceMappingURL=index.js.map

package/lib/components/AppHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppHeader/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA"}

package/lib/components/AppSidebar/AppSidebar.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import { DataTestProp } from '../../../src';
+export interface AppSidebarProps extends DataTestProp {
+    children?: ReactNode;
+    className?: string;
+    storageKey?: string;
+    open?: boolean;
+    initialOpen?: boolean;
+    footer?: ReactNode;
+}
+export declare const AppSidebar: ({ children, className, storageKey, open: controlledOpen, initialOpen, footer, "data-test": dataTest, }: AppSidebarProps) => React.JSX.Element;

package/lib/components/AppSidebar/AppSidebar.js

@@ -0,0 +1,31 @@
+import React, { useCallback } from 'react';
+import cn from 'classnames';
+import { ChevronsLeft, ChevronsRight } from 'react-feather';
+import { IconButton } from '../IconButton';
+import { createPersistedState } from '../../hooks';
+import { appSidebarContext } from './appSidebarContext';
+import styles from './AppSidebar.module.scss';
+export const AppSidebar = ({ children, className, storageKey = 'SideBarMenu', open: controlledOpen, initialOpen = true, footer, 'data-test': dataTest, }) => {
+    const usePersistedSidebarStorageState = createPersistedState(storageKey);
+    const usePersistedFavoritesState = createPersistedState('sideBarFavorites');
+    const [favorites, setFavorites] = usePersistedFavoritesState([]);
+    const [isOpen, setIsOpen] = usePersistedSidebarStorageState(initialOpen);
+    const toggle = useCallback(() => setIsOpen((value) => !value), [setIsOpen]);
+    const open = useCallback(() => setIsOpen(true), [setIsOpen]);
+    const close = useCallback(() => setIsOpen(false), [setIsOpen]);
+    const isCollapsed = controlledOpen !== undefined ? !controlledOpen : !isOpen;
+    return (React.createElement("aside", { "data-test": dataTest, className: cn(styles.root, { [styles.collapsed]: isCollapsed }, className) },
+        React.createElement(IconButton, { size: "medium", icon: !isCollapsed ? ChevronsLeft : ChevronsRight, onClick: toggle, className: styles.toggle }),
+        React.createElement(appSidebarContext.Provider, { value: {
+                open,
+                close,
+                isOpen: !isCollapsed,
+                toggle,
+                favorites,
+                setFavorites,
+            } },
+            React.createElement("div", { className: styles.wrapper },
+                React.createElement("div", { className: styles.content }, children)),
+            footer && React.createElement("footer", { className: styles.footer }, footer))));
+};
+//# sourceMappingURL=AppSidebar.js.map

package/lib/components/AppSidebar/AppSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebar.js","sourceRoot":"","sources":["../../../src/components/AppSidebar/AppSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAG3D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,OAAO,MAAM,MAAM,0BAA0B,CAAA;AAW7C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,aAAa,EAC1B,IAAI,EAAE,cAAc,EACpB,WAAW,GAAG,IAAI,EAClB,MAAM,EACN,WAAW,EAAE,QAAQ,GACL,EAAE,EAAE;IACpB,MAAM,+BAA+B,GAAG,oBAAoB,CAAU,UAAU,CAAC,CAAA;IACjF,MAAM,0BAA0B,GAAG,oBAAoB,CAAW,kBAAkB,CAAC,CAAA;IAErF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,0BAA0B,CAAC,EAAE,CAAC,CAAA;IAChE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,+BAA+B,CAAC,WAAW,CAAC,CAAA;IAExE,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAC3E,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAC5D,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAC9D,MAAM,WAAW,GAAG,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,MAAM,CAAA;IAE5E,OAAO,CACL,4CAAkB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,WAAW,EAAE,EAAE,SAAS,CAAC;QACpG,oBAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,GAAI;QAC1H,oBAAC,iBAAiB,CAAC,QAAQ,IACzB,KAAK,EAAE;gBACL,IAAI;gBACJ,KAAK;gBACL,MAAM,EAAE,CAAC,WAAW;gBACpB,MAAM;gBACN,SAAS;gBACT,YAAY;aACb;YAED,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;gBAC5B,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CAC5C;YACL,MAAM,IAAI,gCAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAU,CACnC,CACvB,CACT,CAAA;AACH,CAAC,CAAA"}

package/lib/components/AppSidebar/AppSidebar.module.scss

@@ -0,0 +1,66 @@
+@use '../../../styles/constants' as c;
+
+$width: 264px;
+$collapsedWidth: 74px;
+$offset: c.$grid * 4;
+
+.root {
+  width: $width;
+  height: 100%;
+  flex-shrink: 0;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  box-sizing: border-box;
+  color: c.$colorNeutralLighter;
+  background: c.$colorBrandSecondary;
+  transition: 200ms width;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .toggle {
+    color: #1ee6fa;
+    position: absolute;
+    right: -#{c.$grid * 3};
+    top: 0;
+    z-index: c.$zIndex1000;
+    border-radius: 50%;
+    background: #0e3454;
+  }
+
+  .wrapper {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    overflow-x: hidden;
+  }
+
+  .content {
+    width: 90%;
+    margin: 0 auto;
+    padding: $offset 0;
+  }
+
+  .footer {
+    color: c.$colorNeutralLight;
+    text-align: center;
+    margin-top: auto;
+    word-break: break-all;
+    padding: 0 c.$grid * 4 c.$grid * 2.5;
+    font-size: c.$fontSizeBodySmaller;
+  }
+
+  &.collapsed {
+    width: $collapsedWidth;
+
+    .content {
+      max-width: calc($collapsedWidth - $offset * 1.5);
+    }
+
+    .footer {
+      padding: 0 c.$grid;
+    }
+  }
+}

package/lib/components/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface AppSidebarFavoriteButtonProps {
+    id: string;
+    className?: string;
+}
+export declare const AppSidebarFavoriteButton: ({ id, className }: AppSidebarFavoriteButtonProps) => React.JSX.Element;

package/lib/components/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.js

@@ -0,0 +1,22 @@
+import React, { useContext, useMemo } from 'react';
+import cn from 'classnames';
+import { Star } from 'react-feather';
+import { IconButton } from '../../IconButton';
+import { appSidebarContext } from '../appSidebarContext';
+import styles from './AppSidebarFavoriteButton.module.scss';
+export const AppSidebarFavoriteButton = ({ id, className }) => {
+    const { favorites, setFavorites } = useContext(appSidebarContext);
+    const isFavoriteItem = useMemo(() => favorites.find((item) => item === id), [favorites, id]);
+    const handleToggleFavorite = () => {
+        if (isFavoriteItem) {
+            setFavorites((value) => value.filter((item) => item !== id));
+        }
+        else {
+            setFavorites((value) => [...value, id]);
+        }
+    };
+    return (React.createElement(IconButton, { className: cn(styles.root, {
+            [styles.isFilled]: isFavoriteItem,
+        }, className), onClick: handleToggleFavorite, ariaLabel: "Favorite Item", icon: Star, size: "medium" }));
+};
+//# sourceMappingURL=AppSidebarFavoriteButton.js.map

package/lib/components/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebarFavoriteButton.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAExD,OAAO,MAAM,MAAM,wCAAwC,CAAA;AAO3D,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAiC,EAAE,EAAE;IAC3F,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IACjE,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAA;IAE5F,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,IAAI,cAAc,EAAE,CAAC;YACnB,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAA;QAC9D,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA;QACzC,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,UAAU,IACT,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,IAAI,EACX;YACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,cAAc;SAClC,EACD,SAAS,CACV,EACD,OAAO,EAAE,oBAAoB,EAC7B,SAAS,EAAC,eAAe,EACzB,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,QAAQ,GACb,CACH,CAAA;AACH,CAAC,CAAA"}

package/lib/components/AppSidebar/AppSidebarFavoriteButton/AppSidebarFavoriteButton.module.scss

@@ -0,0 +1,16 @@
+@use '../../../../styles/constants' as c;
+
+[class].root {
+  position: absolute;
+  top: 50%;
+  z-index: 1;
+  left: c.$grid * 3;
+  color: c.$colorBrandText;
+  transform: translateY(-50%);
+
+  &.isFilled {
+    svg {
+      fill: c.$colorBrandText;
+    }
+  }
+}

package/lib/components/AppSidebar/AppSidebarFavoriteButton/index.d.ts

@@ -0,0 +1 @@
+export * from './AppSidebarFavoriteButton';

package/lib/components/AppSidebar/AppSidebarFavoriteButton/index.js

@@ -0,0 +1,2 @@
+export * from './AppSidebarFavoriteButton';
+//# sourceMappingURL=index.js.map

package/lib/components/AppSidebar/AppSidebarFavoriteButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarFavoriteButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAA"}

package/lib/components/AppSidebar/AppSidebarFavorites/AppSidebarFavorites.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+export interface AppSidebarFavoritesProps {
+    children: (props: {
+        items: string[];
+    }) => ReactNode;
+}
+export declare const AppSidebarFavorites: ({ children }: AppSidebarFavoritesProps) => React.JSX.Element;

package/lib/components/AppSidebar/AppSidebarFavorites/AppSidebarFavorites.js

@@ -0,0 +1,11 @@
+import React, { useContext } from 'react';
+import { Star } from 'react-feather';
+import { AppSidebarSection } from '../AppSidebarSection';
+import { appSidebarContext } from '../appSidebarContext';
+import styles from './AppSidebarFavorites.module.scss';
+export const AppSidebarFavorites = ({ children }) => {
+    const { favorites } = useContext(appSidebarContext);
+    return (React.createElement(AppSidebarSection, { active: false, ariaLabel: "favorites", id: "favorites", title: "Favorites", icon: Star },
+        React.createElement("div", { className: styles.content }, favorites.length > 0 ? (children({ items: favorites })) : (React.createElement("div", { className: styles.placeholder, "data-test": "sidebar-menu-no-favorites" }, "No favorites")))));
+};
+//# sourceMappingURL=AppSidebarFavorites.js.map

package/lib/components/AppSidebar/AppSidebarFavorites/AppSidebarFavorites.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebarFavorites.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarFavorites/AppSidebarFavorites.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAExD,OAAO,MAAM,MAAM,mCAAmC,CAAA;AAMtD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,QAAQ,EAA4B,EAAE,EAAE;IAC5E,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAEnD,OAAO,CACL,oBAAC,iBAAiB,IAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAC,WAAW,EAAC,EAAE,EAAC,WAAW,EAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI;QACjG,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAC3B,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACtB,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAC/B,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,eAAY,2BAA2B,mBAEnE,CACP,CACG,CACY,CACrB,CAAA;AACH,CAAC,CAAA"}

package/lib/components/AppSidebar/AppSidebarFavorites/AppSidebarFavorites.module.scss

@@ -0,0 +1,13 @@
+@use '../../../../styles/constants' as c;
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: c.$grid;
+  padding: c.$grid * 2 0;
+  font-size: c.$fontSizeBodySmall;
+}
+
+.placeholder {
+  padding: c.$grid * 2 c.$grid * 2.5 c.$grid * 2 c.$grid * 14;
+}

package/lib/components/AppSidebar/AppSidebarFavorites/index.d.ts

@@ -0,0 +1 @@
+export * from './AppSidebarFavorites';

package/lib/components/AppSidebar/AppSidebarFavorites/index.js

@@ -0,0 +1,2 @@
+export * from './AppSidebarFavorites';
+//# sourceMappingURL=index.js.map

package/lib/components/AppSidebar/AppSidebarFavorites/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarFavorites/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

package/lib/components/AppSidebar/AppSidebarItem/AppSidebarItem.d.ts

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react';
+import { Icon as FeatherIcon } from 'react-feather';
+import { DataTestProp } from '../../../../src';
+import { ButtonColor } from '../../Button';
+export type AppSidebarItemProps = {
+    id?: string;
+    title: string;
+    className?: string;
+    active?: boolean;
+    color?: ButtonColor;
+    onClick?: () => void;
+    available?: boolean;
+    adornment?: ReactNode;
+    adornmentClassName?: string;
+} & DataTestProp & ({
+    disabled?: never;
+    disabledTooltip?: never;
+} | {
+    disabled: boolean;
+    disabledTooltip: string;
+}) & ({
+    icon?: never;
+    iconAriaLabel?: never;
+} | {
+    icon: FeatherIcon;
+    iconAriaLabel: string;
+});
+export declare const AppSidebarItem: ({ id, title, className, active, icon, iconAriaLabel, disabled, disabledTooltip, onClick, color, adornment, available, adornmentClassName, "data-test": dataTest, }: AppSidebarItemProps) => React.JSX.Element;

package/lib/components/AppSidebar/AppSidebarItem/AppSidebarItem.js

@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { Icon } from '../../Icon';
+import { Tooltip } from '../../Tooltip';
+import { Button } from '../../Button';
+import { appSidebarContext } from '../appSidebarContext';
+import { AppSidebarFavoriteButton } from '../AppSidebarFavoriteButton';
+import { appSidebarSectionContext } from '../AppSidebarSection/appSidebarSectionContext';
+import styles from './AppSidebarItem.module.scss';
+export const AppSidebarItem = ({ id, title, className, active, icon, iconAriaLabel, disabled, disabledTooltip, onClick, color = 'light', adornment, available, adornmentClassName, 'data-test': dataTest, }) => {
+    const { isOpen } = useContext(appSidebarContext);
+    const ctx = useContext(appSidebarSectionContext);
+    return (React.createElement(Tooltip, { arrow: false, placement: "right-start", color: "dark", visible: isOpen ? false : undefined, content: iconAriaLabel }, (ref) => (React.createElement("div", { ref: ref, className: cn(styles.root, { [styles.collapsed]: !isOpen, [styles.nested]: !!ctx }), "data-test": dataTest },
+        id && ctx && React.createElement(AppSidebarFavoriteButton, { id: id, className: styles.favorite }),
+        React.createElement(Button, { variant: "text", color: color, active: active, truncate: false, onClick: onClick, outline: "inset", disabled: disabled, disabledTooltip: disabledTooltip, bodyClassName: styles.content, "data-test": "sidebar-menu-item-title", className: cn(styles.button, { [styles.active]: active }, className) },
+            React.createElement(React.Fragment, null,
+                icon && React.createElement(Icon, { size: "medium", icon: icon, ariaLabel: iconAriaLabel, className: styles.icon }),
+                title,
+                (adornment || available !== undefined) && (React.createElement("div", { className: cn(styles.adornment, adornmentClassName) },
+                    adornment,
+                    available !== undefined && React.createElement("span", { className: cn(styles.status, { [styles.available]: available }) })))))))));
+};
+//# sourceMappingURL=AppSidebarItem.js.map

package/lib/components/AppSidebar/AppSidebarItem/AppSidebarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebarItem.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarItem/AppSidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,MAAM,YAAY,CAAA;AAI3B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,MAAM,EAAe,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAA;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+CAA+C,CAAA;AAExF,OAAO,MAAM,MAAM,8BAA8B,CAAA;AAgBjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,EAAE,EACF,KAAK,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,aAAa,EACb,QAAQ,EACR,eAAe,EACf,OAAO,EACP,KAAK,GAAG,OAAO,EACf,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,WAAW,EAAE,QAAQ,GACD,EAAE,EAAE;IACxB,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAChD,MAAM,GAAG,GAAG,UAAU,CAAC,wBAAwB,CAAC,CAAA;IAEhD,OAAO,CACL,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,aAAa,EAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,IACpH,CAAC,GAAG,EAAE,EAAE,CAAC,CACR,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,eAAa,QAAQ;QACpH,EAAE,IAAI,GAAG,IAAI,oBAAC,wBAAwB,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI;QAC9E,oBAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,OAAO,EACf,QAAQ,EAAE,QAAmB,EAC7B,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,MAAM,CAAC,OAAO,eACnB,yBAAyB,EACnC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,SAAS,CAAC;YAEpE;gBACG,IAAI,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI;gBAC5F,KAAK;gBACL,CAAC,SAAS,IAAI,SAAS,KAAK,SAAS,CAAC,IAAI,CACzC,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC;oBACrD,SAAS;oBACT,SAAS,KAAK,SAAS,IAAI,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,CAAC,GAAI,CACjG,CACP,CACA,CACI,CACL,CACP,CACO,CACX,CAAA;AACH,CAAC,CAAA"}

package/lib/components/AppSidebar/AppSidebarItem/AppSidebarItem.module.scss

@@ -0,0 +1,92 @@
+@use '../../../../styles/constants' as c;
+
+.root {
+  position: relative;
+  color: c.$colorNeutralLighter;
+  display: flex;
+  flex-direction: column;
+
+  &.nested {
+    padding-left: c.$grid * 10;
+
+    .button {
+      color: c.$colorNeutralLight;
+    }
+  }
+
+  .favorite {
+    display: none;
+  }
+
+  .status {
+    display: inline-flex;
+    width: c.$grid * 4;
+    height: c.$grid * 4;
+    border-radius: 50%;
+    background-color: c.$colorError;
+
+    &.available {
+      background-color: c.$colorSuccess;
+    }
+  }
+
+  &.collapsed {
+    .status {
+      width: c.$grid * 2;
+      height: c.$grid * 2;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+
+  &:hover,
+  &:active {
+    color: inherit;
+
+    .favorite {
+      display: block;
+    }
+  }
+}
+
+[class].button {
+  overflow: hidden;
+  width: 100%;
+  height: c.$grid * 12;
+  text-decoration: none;
+  text-align: left;
+  padding: c.$grid c.$grid * 3.5;
+  border-radius: c.$borderRadius;
+
+  .icon {
+    color: c.$colorNeutralLight;
+  }
+
+  &:hover,
+  &.active {
+    text-decoration: none;
+    color: c.$colorBrandText;
+    background-color: c.$colorBrandAccent;
+
+    .icon {
+      color: c.$colorBrandText;
+    }
+  }
+
+  .content {
+    padding: 0;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: c.$grid * 4;
+    justify-content: left;
+  }
+
+  .adornment {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: c.$grid * 2;
+  }
+}

package/lib/components/AppSidebar/AppSidebarItem/index.d.ts

@@ -0,0 +1 @@
+export * from './AppSidebarItem';

package/lib/components/AppSidebar/AppSidebarItem/index.js

@@ -0,0 +1,2 @@
+export * from './AppSidebarItem';
+//# sourceMappingURL=index.js.map

package/lib/components/AppSidebar/AppSidebarItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarItem/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}

package/lib/components/AppSidebar/AppSidebarMenuItemCounter/AppSidebarMenuItemCounter.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+export interface AppSidebarMenuItemCounterProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare const AppSidebarMenuItemCounter: ({ children, className }: AppSidebarMenuItemCounterProps) => React.JSX.Element;

package/lib/components/AppSidebar/AppSidebarMenuItemCounter/AppSidebarMenuItemCounter.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './AppSidebarMenuItemCounter.module.scss';
+export const AppSidebarMenuItemCounter = ({ children, className }) => (React.createElement("span", { className: cn(styles.root, className) },
+    React.createElement("span", { className: styles.content }, children)));
+//# sourceMappingURL=AppSidebarMenuItemCounter.js.map

package/lib/components/AppSidebar/AppSidebarMenuItemCounter/AppSidebarMenuItemCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebarMenuItemCounter.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarMenuItemCounter/AppSidebarMenuItemCounter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,yCAAyC,CAAA;AAO5D,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAkC,EAAE,EAAE,CAAC,CACpG,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC;IACzC,8BAAM,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAQ,CAC7C,CACR,CAAA"}

package/lib/components/AppSidebar/AppSidebarMenuItemCounter/AppSidebarMenuItemCounter.module.scss

@@ -0,0 +1,24 @@
+@use 'sass:math';
+@use '../../../../styles/constants' as c;
+
+.root {
+  color: #353d49;
+  background-color: #e3e7ed;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-width: c.$grid * 4;
+  height: c.$grid * 4;
+  padding: math.div(c.$grid, 2);
+  font-size: c.$fontSizeBodyTiny;
+
+  &:hover {
+    color: #353d49;
+    background-color: #e3e7ed;
+  }
+
+  .content {
+    @include c.typographyBodyWeight('bold');
+  }
+}

package/lib/components/AppSidebar/AppSidebarMenuItemCounter/index.d.ts

@@ -0,0 +1 @@
+export * from './AppSidebarMenuItemCounter';

package/lib/components/AppSidebar/AppSidebarMenuItemCounter/index.js

@@ -0,0 +1,2 @@
+export * from './AppSidebarMenuItemCounter';
+//# sourceMappingURL=index.js.map

package/lib/components/AppSidebar/AppSidebarMenuItemCounter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarMenuItemCounter/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAA"}

package/lib/components/AppSidebar/AppSidebarSection/AppSidebarSection.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { DataTestProp } from '../../../../src';
+import { AppSidebarSectionExpandableProps } from './AppSidebarSectionExpandable';
+export type AppSidebarSectionProps = {
+    title: string;
+    children: ReactNode;
+} & DataTestProp & ({
+    id?: never;
+    active?: never;
+    icon?: never;
+    ariaLabel?: never;
+} | AppSidebarSectionExpandableProps);
+export declare const AppSidebarSection: ({ id, icon, active, title, children, ariaLabel, "data-test": dataTest }: AppSidebarSectionProps) => React.JSX.Element;

package/lib/components/AppSidebar/AppSidebarSection/AppSidebarSection.js

@@ -0,0 +1,15 @@
+import React, { useContext } from 'react';
+import cn from 'classnames';
+import { appSidebarContext } from '../appSidebarContext';
+import { AppSidebarSectionExpandable } from './AppSidebarSectionExpandable';
+import styles from './AppSidebarSection.module.scss';
+export const AppSidebarSection = ({ id, icon, active, title, children, ariaLabel, 'data-test': dataTest }) => {
+    const { isOpen } = useContext(appSidebarContext);
+    if (id) {
+        return (React.createElement(AppSidebarSectionExpandable, { "data-test": dataTest, id: id, icon: icon, title: title, active: active, ariaLabel: ariaLabel }, children));
+    }
+    return (React.createElement("section", { "data-test": dataTest, className: cn(styles.root, { [styles.collapsed]: !isOpen }) },
+        React.createElement("h3", null, title),
+        children));
+};
+//# sourceMappingURL=AppSidebarSection.js.map

package/lib/components/AppSidebar/AppSidebarSection/AppSidebarSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppSidebarSection.js","sourceRoot":"","sources":["../../../../src/components/AppSidebar/AppSidebarSection/AppSidebarSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,UAAU,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,2BAA2B,EAAoC,MAAM,+BAA+B,CAAA;AAE7G,OAAO,MAAM,MAAM,iCAAiC,CAAA;AAQpD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAA0B,EAAE,EAAE;IACnI,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAA;IAEhD,IAAI,EAAE,EAAE,CAAC;QACP,OAAO,CACL,oBAAC,2BAA2B,iBAAY,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,IACrH,QAAQ,CACmB,CAC/B,CAAA;IACH,CAAC;IAED,OAAO,CACL,8CAAoB,QAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;QACvF,gCAAK,KAAK,CAAM;QACf,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAA"}