@linzjs/windows 8.8.2 → 9.0.0

package/dist/common/index.ts

@@ -1 +1,2 @@
 export * from './useConstFunction';
+export * from './util';

package/dist/common/util.ts

@@ -0,0 +1,31 @@
+export const tabToNextSiblingElement = (): void => tabToSiblingElement(1);
+export const tabToPreviousSiblingElement = (): void => tabToSiblingElement(-1);
+
+export const tabToSiblingElement = (direction: 1 | -1): void => {
+  const active = document.activeElement as HTMLElement | null;
+  if (!active) {
+    return;
+  }
+
+  const selector = [
+    'a[href]',
+    'area[href]',
+    'button:not([disabled])',
+    'input:not([disabled]):not([type="hidden"])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    'iframe',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]',
+  ].join(',');
+
+  const focusables = Array.from(active.parentElement?.querySelectorAll<HTMLElement>(selector) ?? []).filter(
+    (el) => el.offsetParent !== null && getComputedStyle(el).visibility !== 'hidden',
+  );
+
+  const next = focusables.indexOf(active) + direction;
+
+  if (next >= 0 && next < focusables.length) {
+    focusables[next]?.focus();
+  }
+};

package/dist/index.ts

@@ -3,3 +3,4 @@ export * from './components';
 export * from './LuiModalAsync';
 export * from './panel';
 export * from './panel/types';
+export * from './ribbon';

package/dist/panel/Panel.tsx

@@ -63,7 +63,7 @@ export const Panel = (props: PanelProps): ReactElement => {
     }
 
     const pos = props.position;
-    if (savedState?.panelPosition) {
+    if (props.resizeable !== false && savedState?.panelPosition) {
       return savedState.panelPosition;
     }
 
@@ -100,7 +100,7 @@ export const Panel = (props: PanelProps): ReactElement => {
       return pick(result, ['width', 'height']);
     }
 
-    if (savedState?.panelSize) {
+    if (props.resizeable !== false && savedState?.panelSize) {
       return cropSizeToWindow(savedState.panelSize);
     }
 
@@ -117,13 +117,13 @@ export const Panel = (props: PanelProps): ReactElement => {
   const setInitialPanelSize = useCallback(
     (size: PanelSize) => {
       // If panel was already sized from state, then don't resize
-      if (savedState?.panelSize) {
+      if (props.resizeable !== false && savedState?.panelSize) {
         return;
       }
 
       setPanelSize(size);
     },
-    [savedState?.panelSize, setPanelSize],
+    [props.resizeable, savedState?.panelSize, setPanelSize],
   );
 
   const dynamicResize = useCallback(() => {

package/dist/panel/PanelInline.tsx

@@ -0,0 +1,40 @@
+import { PropsWithChildren } from 'react';
+import { v4 } from 'uuid';
+
+import { PanelContext } from './PanelContext';
+import { PanelInstanceContext } from './PanelInstanceContext';
+
+export interface PanelInlineProps {
+  title: string;
+  width: number;
+}
+
+export const PanelInline = ({ title, width, children }: PropsWithChildren<PanelInlineProps>) => {
+  return (
+    <PanelContext.Provider value={{ resizeable: false, resizePanel: () => {}, initialResizePanel: () => {} }}>
+      <PanelInstanceContext.Provider
+        value={{
+          setTitle: () => {},
+          title,
+          zIndex: 1500,
+          uniqueId: v4(),
+          dock: () => {},
+          panelClose: () => {},
+          dockId: undefined,
+          docked: false,
+          bringPanelToFront: () => {},
+          hidden: false,
+          setPanelWindow: () => {},
+          panelTogglePopout: () => {},
+          undock: () => {},
+          panelPoppedOut: false,
+          bounds: undefined,
+        }}
+      >
+        <div className={'WindowPanel'} title={title} style={{ width }}>
+          {children}
+        </div>
+      </PanelInstanceContext.Provider>
+    </PanelContext.Provider>
+  );
+};

package/dist/panel/PanelInstanceContext.ts

@@ -4,7 +4,6 @@ export interface PanelInstanceContextType {
   title: string;
   setTitle: (title: string) => void;
   uniqueId: string;
-  panelName: string;
   bounds: string | Element | undefined;
   panelTogglePopout: () => void;
   panelClose: () => void;
@@ -29,7 +28,6 @@ const NoContextError = () => {
 export const PanelInstanceContext = createContext<PanelInstanceContextType>({
   title: 'Missing PanelInstanceContext Provider: title',
   uniqueId: 'Missing PanelInstanceContext Provider: uniqueId',
-  panelName: 'Missing PanelInstanceContext Provider: panelName',
   bounds: document.body,
   setTitle: NoContextError,
   panelTogglePopout: NoContextError,

package/dist/panel/PanelInstanceContextProvider.tsx

@@ -50,7 +50,6 @@ export const PanelInstanceContextProvider = ({
         setTitle,
         uniqueId,
         bounds,
-        panelName: uniqueId,
         panelClose: () => {
           panelInstance.window?.close();
           panelInstance.window = null;

package/dist/panel/PanelsContextProvider.tsx

@@ -51,24 +51,28 @@ export const PanelsContextProvider = ({
 
   const bringPanelToFront = useCallback(
     (panelUniqueId: string) => {
-      const panelInstance = panelInstances.find((panelInstance) => panelInstance.uniqueId === panelUniqueId);
-      if (!panelInstance) {
-        console.warn(`bringPanelToFront cannot find panel with uniqueId: ${panelUniqueId}`);
-        return;
-      }
-      if (panelInstance.window) {
-        panelInstance.window.focus();
-      } else {
+      setPanelInstances((panelInstances): PanelInstance[] => {
+        const panelInstance = panelInstances.find((panelInstance) => panelInstance.uniqueId === panelUniqueId);
+        if (!panelInstance) {
+          console.warn(`bringPanelToFront cannot find panel with uniqueId: ${panelUniqueId}`);
+          return panelInstances;
+        }
+        if (panelInstance.window) {
+          panelInstance.window.focus();
+          return panelInstances;
+        }
         const maxZIndexPanelInstance = maxBy(panelInstances, 'zIndex');
         // Prevent unnecessary state updates
-        if (maxZIndexPanelInstance === panelInstance) return;
+        if (maxZIndexPanelInstance === panelInstance) {
+          return panelInstances;
+        }
         sortBy(panelInstances, (pi) => (panelInstance === pi ? 32768 : pi.zIndex)).forEach(
           (pi, i) => (pi.zIndex = baseZIndex + i),
         );
-        setPanelInstances([...panelInstances]);
-      }
+        return [...panelInstances];
+      });
     },
-    [baseZIndex, panelInstances],
+    [baseZIndex],
   );
 
   const showHidePanel = useCallback((hidePanelIds: string | string[], hidden: boolean) => {
@@ -104,39 +108,40 @@ export const PanelsContextProvider = ({
   const openPanel = useCallback(
     ({ componentFn, poppedOut = false, uniqueId = v4(), onClose }: OpenPanelOptions): string | null => {
       try {
-        const existingPanelInstance = panelInstances.find((pi) => pi.uniqueId === uniqueId);
-        if (existingPanelInstance) {
-          if (existingPanelInstance.window) {
-            existingPanelInstance.window?.focus();
-          } else {
-            if (existingPanelInstance.hidden) {
-              unhidePanel(uniqueId);
+        setPanelInstances((panelInstances) => {
+          const existingPanelInstance = panelInstances.find((pi) => pi.uniqueId === uniqueId);
+          if (existingPanelInstance) {
+            if (existingPanelInstance.window) {
+              existingPanelInstance.window?.focus();
+            } else {
+              if (existingPanelInstance.hidden) {
+                setTimeout(() => unhidePanel(uniqueId), 0);
+              }
+              setTimeout(() => bringPanelToFront(uniqueId), 0);
             }
-            bringPanelToFront(uniqueId);
+            return panelInstances;
           }
-          return existingPanelInstance.uniqueId;
-        }
 
-        // If there are any exceptions the modal won't show
-        setPanelInstances([
-          ...panelInstances,
-          {
-            uniqueId,
-            componentInstance: componentFn(),
-            zIndex: baseZIndex + panelInstances.length,
-            poppedOut,
-            window: null,
-            onClose,
-            hidden: false,
-          },
-        ]);
+          return [
+            ...panelInstances,
+            {
+              uniqueId,
+              componentInstance: componentFn(),
+              zIndex: baseZIndex + panelInstances.length,
+              poppedOut,
+              window: null,
+              onClose,
+              hidden: false,
+            },
+          ];
+        });
         return uniqueId;
       } catch (e) {
         console.error(e);
         return null;
       }
     },
-    [baseZIndex, bringPanelToFront, panelInstances, unhidePanel],
+    [baseZIndex, bringPanelToFront, unhidePanel],
   );
 
   const closePanel = useCallback((closePanelUniqueIds: string | string[]) => {

package/dist/panel/index.ts

@@ -1,10 +1,10 @@
 export * from './OpenPanelButton';
-export * from './OpenPanelIcon';
 export * from './Panel';
 export * from './PanelContext';
 export * from './PanelDock';
 export * from './PanelHeader';
 export * from './PanelHeaderButton';
+export * from './PanelInline';
 export * from './PanelInstanceContext';
 export * from './PanelInstanceContextProvider';
 export * from './PanelsContext';

package/dist/ribbon/Ribbon.scss

@@ -0,0 +1,146 @@
+@use "@linzjs/lui/dist/scss/Core" as lui;
+
+.RibbonButton {
+  position: relative;
+  background-color: transparent;
+  padding: 4px;
+  margin: 2px;
+  fill: lui.$sea;
+  color: lui.$sea;
+  width: 40px;
+  height: 40px;
+  border: 2px solid white;
+  border-radius: 5px;
+
+  &:hover {
+    background-color: lui.$polar;
+  }
+
+  span.LuiIcon {
+    display: block;
+    margin: auto;
+  }
+}
+
+.RibbonButtonSkeleton {
+  padding: 4px;
+  margin: 0;
+  line-height: 1px;
+
+  > div {
+    padding: 0;
+    margin: 0;
+    border: 2px solid transparent;
+  }
+}
+
+.RibbonButton-selected, .RibbonButton:has(+ *:popover-open) {
+  cursor: pointer;
+  color: lui.$white !important;
+  background-color: lui.$sea !important;
+  box-shadow: inset 0 2px 4px rgb(41 92 130);
+
+  svg path {
+    color: lui.$white !important;
+    fill: lui.$white !important;
+  }
+}
+
+.RibbonButton-disabled {
+  background-color: lui.$white !important;
+
+  fill: lui.$grey-20 !important;
+
+  svg * {
+    fill: lui.$grey-20 !important;
+  }
+}
+
+%RibbonButton-Group {
+  background-color: white;
+  border-radius: 5px;
+  padding: 0;
+  align-items: center;
+  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
+  display: inline-flex;
+}
+
+.RibbonButtonContent {
+  @extend %RibbonButton-Group;
+}
+
+.RibbonButton-separator {
+  background-color: lui.$grey-10;
+}
+
+.RibbonButton-verticalGroup {
+  @extend %RibbonButton-Group;
+  flex-direction: column;
+
+  .RibbonButton-separator {
+    margin-top: 1px;
+    margin-bottom: 1px;
+    height: 2px;
+    width: 44px;
+  }
+}
+
+.RibbonButton-horizontalGroup {
+  @extend %RibbonButton-Group;
+  flex-direction: row;
+
+  .RibbonButton-separator {
+    margin-left: 1px;
+    margin-right: 1px;
+    height: 44px;
+    width: 2px;
+  }
+}
+
+.RibbonSliderMenu[popover] {
+  margin: 0;
+  border: 0;
+  inset: auto;
+  background: transparent;
+  position: fixed;
+}
+
+.RibbonSliderMenu:popover-open {
+  display: flex;
+  flex-direction: row;
+}
+
+$RibbonSliderMenu-offset1: 2px;
+$RibbonSliderMenu-offset2: 6px;
+
+.RibbonSliderMenu-right, .RibbonSliderMenu-right-down {
+  translate: ($RibbonSliderMenu-offset1) (-$RibbonSliderMenu-offset2);
+}
+
+.RibbonSliderMenu-left, .RibbonSliderMenu-left-down {
+  translate: (-$RibbonSliderMenu-offset1) (-$RibbonSliderMenu-offset2);
+}
+
+.RibbonSliderMenu-right-up {
+  translate: ($RibbonSliderMenu-offset1) ($RibbonSliderMenu-offset2);
+}
+
+.RibbonSliderMenu-left-up {
+  translate: (-$RibbonSliderMenu-offset1) ($RibbonSliderMenu-offset2);
+}
+
+.RibbonSliderMenu-up, .RibbonSliderMenu-up-right {
+  translate: (-$RibbonSliderMenu-offset2) (-$RibbonSliderMenu-offset1);
+}
+
+.RibbonSliderMenu-down-left {
+  translate: ($RibbonSliderMenu-offset2) ($RibbonSliderMenu-offset1);
+}
+
+.RibbonSliderMenu-down, .RibbonSliderMenu-down-right {
+  translate: (-$RibbonSliderMenu-offset2) ($RibbonSliderMenu-offset1);
+}
+
+.RibbonSliderMenu-down-left {
+  translate: ($RibbonSliderMenu-offset2) ($RibbonSliderMenu-offset1);
+}

package/dist/ribbon/RibbonButton.tsx

@@ -0,0 +1,95 @@
+import './Ribbon.scss';
+
+import { LuiIcon } from '@linzjs/lui';
+import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
+import clsx from 'clsx';
+import { forwardRef, ReactElement, useContext } from 'react';
+import Skeleton from 'react-loading-skeleton';
+
+import { tabToNextSiblingElement, tabToPreviousSiblingElement } from '../common';
+import { RibbonButtonSliderContext } from './RibbonButtonSliderContext';
+
+export interface RibbonButtonProps {
+  id?: string;
+  popoverTarget?: string;
+  popoverTargetAction?: 'toggle' | 'show' | 'hide' | undefined;
+  anchorName?: string;
+  title?: string;
+  icon?: IconName;
+  content?: ReactElement;
+  disabled?: boolean;
+  selected?: boolean;
+  loading?: boolean;
+  className?: string;
+  testId?: string;
+  onClick?: () => void;
+}
+
+export const RibbonButton = forwardRef<HTMLButtonElement, RibbonButtonProps>(function RibbonButton(
+  {
+    id,
+    popoverTarget,
+    popoverTargetAction,
+    anchorName,
+    title,
+    icon,
+    content,
+    className,
+    selected,
+    loading,
+    disabled,
+    testId,
+    onClick,
+  },
+  ref,
+) {
+  const { menuUniqueId, autoClose } = useContext(RibbonButtonSliderContext);
+
+  if (loading) {
+    return (
+      <div className={'RibbonButtonSkeleton'}>
+        <Skeleton
+          className={clsx(
+            disabled && 'disabled', // disabled to style cursor
+          )}
+          height={36}
+          width={36}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <button
+      ref={ref}
+      id={id}
+      style={{ anchorName }}
+      {...((popoverTarget || menuUniqueId) && { ['popovertarget' as never]: popoverTarget ?? menuUniqueId })}
+      {...((popoverTargetAction || autoClose != null) && {
+        ['popovertargetaction' as never]: popoverTargetAction ?? (autoClose ? 'toggle' : 'show'),
+      })}
+      type="button"
+      title={title}
+      data-testid={testId}
+      disabled={disabled}
+      onClick={onClick}
+      className={clsx(
+        className,
+        'RibbonButton',
+        selected && 'RibbonButton-selected',
+        disabled && 'RibbonButton-disabled',
+      )}
+      onKeyDown={({ code }) => {
+        if (code === 'ArrowDown' || code === 'ArrowRight') {
+          tabToNextSiblingElement();
+        }
+        if (code === 'ArrowUp' || code === 'ArrowLeft') {
+          tabToPreviousSiblingElement();
+        }
+      }}
+    >
+      {icon && <LuiIcon name={icon} alt={title ?? ''} size={'md'} />}
+      {content}
+    </button>
+  );
+});

package/dist/ribbon/RibbonButtonLink.tsx

@@ -0,0 +1,26 @@
+import './Ribbon.scss';
+
+import { forwardRef } from 'react';
+
+import { RibbonButton, RibbonButtonProps } from './RibbonButton';
+
+export type RibbonButtonLinkProps = RibbonButtonProps & {
+  href: string;
+  target?: string;
+};
+
+export const RibbonButtonLink = forwardRef<HTMLButtonElement, RibbonButtonLinkProps>(function RibbonButtonLink(
+  { onClick, href, target = '_blank', ...props },
+  ref,
+) {
+  return (
+    <RibbonButton
+      ref={ref}
+      {...props}
+      onClick={() => {
+        onClick?.();
+        void window.open(href, target);
+      }}
+    />
+  );
+});

package/dist/ribbon/RibbonButtonOpenPanel.tsx

@@ -0,0 +1,30 @@
+import './Ribbon.scss';
+
+import clsx from 'clsx';
+import { forwardRef, useContext } from 'react';
+
+import { OpenPanelOptions, PanelsContext } from '../panel/PanelsContext';
+import { RibbonButton, RibbonButtonProps } from './RibbonButton';
+
+export type RibbonButtonOpenPanelProps = Omit<RibbonButtonProps, 'onClick'> & OpenPanelOptions;
+export const RibbonButtonOpenPanel = forwardRef<HTMLButtonElement, RibbonButtonOpenPanelProps>(
+  function RibbonButtonOpenPanel(
+    { title, icon, className, disabled, testId, uniqueId = title, loading, ...openPanelOptions },
+    ref,
+  ) {
+    const { openPanel, openPanels } = useContext(PanelsContext);
+
+    return (
+      <RibbonButton
+        ref={ref}
+        testId={testId}
+        icon={icon}
+        title={title}
+        disabled={disabled}
+        loading={loading}
+        onClick={() => openPanel({ uniqueId, ...openPanelOptions })}
+        className={clsx(openPanels.has(uniqueId ?? '') && 'RibbonButton-selected', className)}
+      />
+    );
+  },
+);

package/dist/ribbon/RibbonButtonSliderContext.tsx

@@ -0,0 +1,30 @@
+import { createContext } from 'react';
+
+export const ribbonSliderAlignments = {
+  right: ['left', 'right', 'top'],
+  'right-down': ['left', 'right', 'top'],
+  'right-up': ['left', 'right', 'bottom'],
+  left: ['right', 'left', 'top'],
+  'left-down': ['right', 'left', 'top'],
+  'left-up': ['right', 'left', 'bottom'],
+  'down-left': ['top', 'bottom', 'right'],
+  'down-right': ['top', 'bottom', 'left'],
+  down: ['top', 'bottom', 'left'],
+  'up-left': ['bottom', 'top', 'right'],
+  'up-right': ['bottom', 'top', 'left'],
+  up: ['bottom', 'top', 'left'],
+};
+
+export type RibbonSliderAlignment = keyof typeof ribbonSliderAlignments;
+
+export interface RibbonButtonSliderContextType {
+  autoClose: boolean | undefined;
+  menuUniqueId: string;
+  positionAnchor: string;
+}
+
+export const RibbonButtonSliderContext = createContext<RibbonButtonSliderContextType>({
+  autoClose: undefined,
+  menuUniqueId: '',
+  positionAnchor: '',
+});

package/dist/ribbon/RibbonContainer.tsx

@@ -0,0 +1,20 @@
+import './Ribbon.scss';
+
+import { CSSProperties, PropsWithChildren } from 'react';
+
+export interface RibbonContainerProps {
+  orientation?: 'horizontal' | 'vertical';
+  style?: CSSProperties;
+  className?: string;
+}
+
+export const RibbonContainer = ({
+  orientation = 'horizontal',
+  style,
+  className,
+  children,
+}: PropsWithChildren<RibbonContainerProps>) => (
+  <div style={style} className={className}>
+    <div className={`RibbonButton-${orientation}Group`}>{children}</div>
+  </div>
+);

package/dist/ribbon/RibbonDeprecated.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+
+import { RibbonButtonProps } from './RibbonButton';
+import { RibbonButtonOpenPanel, RibbonButtonOpenPanelProps } from './RibbonButtonOpenPanel';
+import { RibbonContainer } from './RibbonContainer';
+import { RibbonSeparator } from './RibbonSeparator';
+
+// @Deprecated use RibbonPanelButton
+export type OpenPanelIconProps = RibbonButtonProps;
+
+// @Deprecated use RibbonPanelButton
+export const OpenPanelIcon = ({ iconTitle, ...props }: RibbonButtonOpenPanelProps & { iconTitle?: string }) => (
+  <RibbonButtonOpenPanel title={iconTitle} {...props} />
+);
+
+// @Deprecated use RibbonContainer
+export const ButtonIconHorizontalGroup = (props: PropsWithChildren) => (
+  <RibbonContainer orientation={'horizontal'} {...props} />
+);
+
+// @Deprecated use RibbonContainer
+export const ButtonIconVerticalGroup = (props: PropsWithChildren) => (
+  <RibbonContainer orientation={'vertical'} {...props} />
+);
+
+// @Deprecated use ButtonIconSeparator
+export const ButtonIconSeparator = RibbonSeparator;

package/dist/ribbon/RibbonMenu.scss

@@ -0,0 +1,45 @@
+@use "@linzjs/lui/dist/scss/Core" as lui;
+
+.RibbonMenuSeparator {
+  height: 1px;
+  background-color: lui.$dew;
+  margin: 4px;
+}
+
+.RibbonMenuOption {
+  font-family: "Open Sans", system-ui, sans-serif;
+  color: lui.$charcoal;
+
+  path {
+    fill: lui.$fuscous;
+  }
+
+  min-width: 180px;
+  display: flex;
+  gap: 8px;
+  background-color: transparent;
+  font-weight: 400;
+  box-sizing: border-box;
+  border: 1px transparent;
+  outline: none;
+  padding: 6px 12px;
+  line-height: 24px;
+  font-size: 16px;
+  align-items: center;;
+
+  &:hover {
+    background-color: lui.$polar;
+  }
+
+  &:focus {
+    background-color: lui.$polar;
+  }
+
+  &:disabled {
+    color: lui.$disabled-color;
+
+    path {
+      fill: lui.$disabled-color;
+    }
+  }
+}

package/dist/ribbon/RibbonMenu.tsx

@@ -0,0 +1,25 @@
+import { createContext, PropsWithChildren, useState } from 'react';
+
+import { RibbonContainer } from './RibbonContainer';
+
+export interface RibbonMenuContext {
+  hasIcon: boolean;
+  setHasIcon: (hasIcon: boolean) => void;
+}
+
+export const RibbonMenuContext = createContext<RibbonMenuContext>({
+  hasIcon: false,
+  setHasIcon: () => {},
+});
+
+export const RibbonMenu = ({ children }: PropsWithChildren) => {
+  const [hasIcon, setHasIcon] = useState(false);
+
+  return (
+    <RibbonMenuContext.Provider value={{ hasIcon, setHasIcon }}>
+      <RibbonContainer orientation={'vertical'}>
+        <div style={{ padding: '4px 0' }}>{children}</div>
+      </RibbonContainer>
+    </RibbonMenuContext.Provider>
+  );
+};

package/dist/ribbon/RibbonMenuOption.tsx

@@ -0,0 +1,67 @@
+import './RibbonMenu.scss';
+
+import { LuiIcon } from '@linzjs/lui';
+import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
+import clsx from 'clsx';
+import { forwardRef, PropsWithChildren, useContext, useEffect } from 'react';
+
+import { tabToNextSiblingElement, tabToPreviousSiblingElement } from '../common/util';
+import { RibbonButtonSliderContext } from './RibbonButtonSliderContext';
+import { RibbonMenuContext } from './RibbonMenu';
+
+export interface RibbonMenuOption {
+  id?: string;
+  popoverTarget?: string;
+  popoverTargetAction?: 'toggle' | 'show' | 'hide' | undefined;
+  anchorName?: string;
+  title?: string;
+  icon?: IconName;
+  disabled?: boolean;
+  className?: string;
+  testId?: string;
+  onClick?: () => void;
+}
+
+export const RibbonMenuOption = forwardRef<HTMLButtonElement, PropsWithChildren<RibbonMenuOption>>(
+  function RibbonButton(
+    { id, popoverTarget, popoverTargetAction, anchorName, title, icon, children, className, disabled, testId, onClick },
+    ref,
+  ) {
+    const { menuUniqueId, autoClose } = useContext(RibbonButtonSliderContext);
+    const { hasIcon, setHasIcon } = useContext(RibbonMenuContext);
+
+    useEffect(() => {
+      setHasIcon(!!icon);
+    }, [icon, setHasIcon]);
+
+    return (
+      <button
+        ref={ref}
+        id={id}
+        style={{ anchorName }}
+        {...{ ['popovertarget' as never]: popoverTarget ?? menuUniqueId }}
+        {...{ ['popovertargetaction' as never]: popoverTargetAction ?? (autoClose ? 'toggle' : 'show') }}
+        type="button"
+        title={title}
+        data-testid={testId}
+        disabled={disabled}
+        onKeyDown={({ code }) => {
+          if (code === 'ArrowDown') {
+            tabToNextSiblingElement();
+          }
+          if (code === 'ArrowUp') {
+            tabToPreviousSiblingElement();
+          }
+        }}
+        onMouseMove={({ currentTarget }) => {
+          currentTarget?.focus?.();
+        }}
+        onClick={onClick}
+        className={clsx(className, 'RibbonMenuOption', disabled && 'RibbonMenuOption-disabled')}
+      >
+        <div style={{ display: 'flex' }}>{icon && <LuiIcon name={icon} alt={title ?? ''} size={'md'} />}</div>
+        <div style={hasIcon && !icon ? { paddingLeft: 24 } : {}}>{children}</div>
+      </button>
+    );
+  },
+);

package/dist/ribbon/RibbonMenuSeparator.tsx

@@ -0,0 +1,5 @@
+import './Ribbon.scss';
+
+export const RibbonMenuSeparator = () => {
+  return <div className="RibbonMenuSeparator" />;
+};

package/dist/ribbon/RibbonSeparator.tsx

@@ -0,0 +1,3 @@
+import './Ribbon.scss';
+
+export const RibbonSeparator = () => <div className="RibbonButton-separator">&nbsp;</div>;

package/dist/ribbon/RibbonSliderButton.tsx

@@ -0,0 +1,63 @@
+import './Ribbon.scss';
+
+import { PropsWithChildren, ReactElement, useState } from 'react';
+import { v4 } from 'uuid';
+
+import { RibbonButton, RibbonButtonProps } from './RibbonButton';
+import { RibbonButtonSliderContext, RibbonSliderAlignment, ribbonSliderAlignments } from './RibbonButtonSliderContext';
+
+export interface RibbonSliderProps extends RibbonButtonProps {
+  autoClose?: boolean;
+  alignment: RibbonSliderAlignment;
+}
+
+export const RibbonButtonSlider = ({
+  alignment,
+  autoClose = false,
+  children,
+  onClick,
+  ...buttonProps
+}: PropsWithChildren<RibbonSliderProps>): ReactElement => {
+  const [uniqueId] = useState(v4());
+  const [menuUniqueId] = useState(`toolbarSliderMenu-${v4()}`);
+  const [positionAnchor] = useState(`--toolbarSliderAnchor-${uniqueId}`);
+
+  const defaultOnClick = () => setTimeout(focusNextRibbonButton, 0);
+
+  const alignments = ribbonSliderAlignments[alignment];
+
+  return (
+    <RibbonButtonSliderContext.Provider value={{ autoClose, positionAnchor, menuUniqueId }}>
+      <RibbonButton
+        popoverTarget={menuUniqueId}
+        popoverTargetAction={'toggle'}
+        anchorName={positionAnchor}
+        {...buttonProps}
+        onClick={onClick ?? defaultOnClick}
+      />
+      <nav
+        id={menuUniqueId}
+        {...{ ['popover' as never]: 'auto' }}
+        role="menu"
+        aria-label="Menu"
+        className={`RibbonSliderMenu RibbonSliderMenu-${alignment}`}
+        style={{
+          positionAnchor,
+          [alignments[0]]: `anchor(${positionAnchor} ${alignments[1]})`,
+          [alignments[2]]: `anchor(${positionAnchor} ${alignments[2]})`,
+        }}
+      >
+        {children}
+      </nav>
+    </RibbonButtonSliderContext.Provider>
+  );
+};
+
+const focusNextRibbonButton = () => {
+  let button =
+    document.activeElement?.nextElementSibling?.querySelectorAll<HTMLButtonElement>('button.RibbonButton-selected')[0];
+  if (!button) {
+    button = document.activeElement?.nextElementSibling?.querySelectorAll('button')[0];
+  }
+  button?.focus();
+};

package/dist/ribbon/index.ts

@@ -0,0 +1,11 @@
+export * from './RibbonButton';
+export * from './RibbonButtonLink';
+export * from './RibbonButtonOpenPanel';
+export * from './RibbonButtonSliderContext';
+export * from './RibbonContainer';
+export * from './RibbonDeprecated';
+export * from './RibbonMenu';
+export * from './RibbonMenuOption';
+export * from './RibbonMenuSeparator';
+export * from './RibbonSeparator';
+export * from './RibbonSliderButton';

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "8.8.2",
+  "version": "9.0.0",
   "peerDependencies": {
     "@linzjs/lui": ">=23",
     "lodash-es": ">=4",
@@ -52,62 +52,63 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "11.14.1",
     "@types/uuid": "^11.0.0",
-    "lodash-es": ">=4",
-    "react-rnd": "^10.5.2",
+    "lodash-es": "^4.17.23",
+    "react-loading-skeleton": "^3.5.0",
+    "react-rnd": "^10.5.3",
     "usehooks-ts": "^3.1.1",
     "uuid": "^13.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
-    "@linzjs/lui": "^24.4.3",
+    "@linzjs/lui": "^24.10.1",
     "@linzjs/step-ag-grid": "^29.14.1",
     "@linzjs/style": "^5.4.0",
     "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@storybook/addon-docs": "^9.1.17",
-    "@storybook/addon-links": "^9.1.17",
-    "@storybook/react-vite": "^9.1.17",
+    "@storybook/addon-docs": "^9.1.20",
+    "@storybook/addon-links": "^9.1.20",
+    "@storybook/react-vite": "^9.1.20",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.19.2",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react-swc": "^4.2.2",
-    "@vitest/ui": "^4.0.15",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react-swc": "^4.3.0",
+    "@vitest/ui": "^4.1.0",
     "ag-grid-community": "34.2.0",
     "ag-grid-react": "34.2.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^9.1.17",
+    "eslint-plugin-storybook": "^9.1.20",
     "jsdom": "^27.3.0",
     "mkdirp": "^3.0.1",
     "npm-run-all": "^4.1.5",
-    "react": "18.3.1",
+    "react": "^18.3.1",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "18.3.1",
-    "rollup": "^4.53.3",
+    "rollup": "^4.59.0",
     "rollup-plugin-copy": "^3.5.0",
-    "sass": "^1.96.0",
-    "sass-loader": "^16.0.6",
-    "storybook": "^9.1.17",
+    "sass": "^1.98.0",
+    "sass-loader": "^16.0.7",
+    "storybook": "^9.1.19",
     "style-loader": "^4.0.0",
     "stylelint": "^16.26.1",
     "stylelint-config-recommended": "^17.0.0",
     "stylelint-config-recommended-scss": "^16.0.2",
     "stylelint-config-standard": "^39.0.1",
     "stylelint-prettier": "5.0.3",
-    "stylelint-scss": "6.13.0",
+    "stylelint-scss": "6.14.0",
     "typescript": "^5.9.3",
-    "vite": "^7.2.7",
+    "vite": "^7.3.1",
     "vite-plugin-html": "^3.2.2",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^4.0.15"
+    "vitest": "^4.1.0"
   },
   "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.53.3",
-    "@swc/core-linux-x64-gnu": "^1.15.3"
+    "@rollup/rollup-linux-x64-gnu": "^4.59.0",
+    "@swc/core-linux-x64-gnu": "^1.15.18"
   },
   "browserslist": {
     "production": [

package/dist/panel/OpenPanelIcon.scss

@@ -1,72 +0,0 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
-
-.lui-button.lui-button-toolbar {
-  border-color: transparent;
-  padding: 4px;
-  line-height: 12px;
-  margin: 2px;
-}
-
-.OpenPanelIcon-selected {
-  cursor: pointer;
-  color: lui.$white !important;
-  background-color: lui.$blue-75 !important;
-  box-shadow: inset 0 2px 4px rgb(41 92 130);
-
-  fill: lui.$white !important;
-
-  svg * {
-    fill: lui.$white !important;
-  }
-
-  svg * {
-    color: lui.$white !important;
-    fill: lui.$white !important;
-  }
-}
-
-.OpenPanelIcon-disabled {
-  background-color: lui.$white !important;
-
-  fill: lui.$grey-20 !important;
-
-  svg * {
-    fill: lui.$grey-20 !important;
-  }
-}
-
-%OpenPanelIcon-Group {
-  background-color: white;
-  border-radius: 4px;
-  padding: 4px;
-  align-items: center;
-  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
-  display: inline-flex;
-}
-
-.OpenPanelIcon-verticalGroup {
-  @extend %OpenPanelIcon-Group;
-  flex-direction: column;
-
-  .OpenPanelIcon-separator {
-    margin: 6px 0;
-    height: 2px;
-    width: 100%;
-    background-color: lui.$grey-10;
-  }
-}
-
-.OpenPanelIcon-horizontalGroup {
-  @extend %OpenPanelIcon-Group;
-  flex-direction: row;
-
-  .OpenPanelIcon-separator {
-    height: 100%;
-    margin-left: 6px;
-    margin-right: 6px;
-    margin-top: -3px;
-    padding-bottom: 8px;
-    width: 2px;
-    background-color: lui.$grey-10;
-  }
-}

package/dist/panel/OpenPanelIcon.tsx

@@ -1,60 +0,0 @@
-import './OpenPanelIcon.scss';
-
-import { LuiIcon } from '@linzjs/lui';
-import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
-import clsx from 'clsx';
-import { PropsWithChildren, useContext } from 'react';
-
-import { OpenPanelOptions, PanelsContext } from './PanelsContext';
-
-export const ButtonIconHorizontalGroup = ({ children }: PropsWithChildren) => (
-  <div>
-    <div className={'OpenPanelIcon-horizontalGroup'}>{children}</div>
-  </div>
-);
-
-export const ButtonIconVerticalGroup = ({ children }: PropsWithChildren) => (
-  <div>
-    <div className={'OpenPanelIcon-verticalGroup'}>{children}</div>
-  </div>
-);
-
-export const ButtonIconSeparator = () => <div className="OpenPanelIcon-separator">&#160;</div>;
-
-interface OpenPanelIconProps extends OpenPanelOptions {
-  iconTitle: string;
-  icon: IconName;
-  disabled?: boolean;
-  className?: string;
-  testId?: string;
-}
-
-export const OpenPanelIcon = ({
-  iconTitle,
-  icon,
-  className,
-  disabled,
-  testId,
-  uniqueId = iconTitle,
-  ...openPanelOptions
-}: OpenPanelIconProps) => {
-  const { openPanel, openPanels } = useContext(PanelsContext);
-
-  return (
-    <button
-      type="button"
-      className={clsx(
-        className,
-        'lui-button lui-button-secondary lui-button-toolbar panel-button',
-        openPanels.has(uniqueId) && 'OpenPanelIcon-selected',
-        disabled && 'OpenPanelIcon-disabled',
-      )}
-      title={iconTitle}
-      onClick={() => openPanel({ uniqueId, ...openPanelOptions })}
-      disabled={disabled}
-      data-testid={testId}
-    >
-      <LuiIcon name={icon} alt={iconTitle} size={'md'} />
-    </button>
-  );
-};