@linzjs/windows 10.1.2 → 10.3.0

package/dist/LuiModalAsync/LuiModalAsync.scss

@@ -150,3 +150,11 @@ dialog.LuiModalPrefab-file {
     padding-bottom: spacing.$unit-xs;
   }
 }
+
+button.lui-button.lui-button-secondary.lui-button-secondary-error {
+  color: colors.$error;
+
+  span.LuiIcon svg * {
+    fill: colors.$error;
+  }
+}

package/dist/LuiModalAsync/useLuiModalPrefab.tsx

@@ -18,7 +18,7 @@ export type PrefabType = 'outline' | 'success' | 'info' | 'warning' | 'error' |
 
 export interface LuiModalAsyncPrefabButton<RT> {
   default?: boolean;
-  level?: LuiButtonProps['level'];
+  level?: LuiButtonProps['level'] | 'secondary-error';
   title: string;
   icon?: IconName;
   value?: RT;
@@ -149,8 +149,11 @@ export const LuiModalPrefab = (props: PropsWithChildren<LuiModalAsyncPrefabProps
         {buttons.map((pf, i) => (
           <LuiButton
             key={i}
-            level={pf.level ?? 'secondary'}
-            className={clsx(pf.icon && 'lui-button-icon')}
+            level={pf.level === 'secondary-error' ? 'secondary' : (pf.level ?? 'secondary')}
+            className={clsx(
+              pf.icon && 'lui-button-icon',
+              pf.level === 'secondary-error' && 'lui-button-secondary-error',
+            )}
             onClick={() => {
               setDontShow();
               resolve(pf.value);
@@ -189,7 +192,7 @@ export const useLuiModalPrefab = () => {
   const { showModal, modalOwnerRef } = useShowAsyncModal();
 
   const showPrefabModal = useCallback(
-    <RT = string>(props: PropsWithChildren<useLuiModalPrefabProps<RT>>): PromiseWithResolve<RT> => {
+    <RT = string,>(props: PropsWithChildren<useLuiModalPrefabProps<RT>>): PromiseWithResolve<RT> => {
       debugLog(`Show '${props.level}' prefab-modal '${props.title}'`, props);
       if (typeof props.children === 'string') {
         // Convert \n to <br/>

package/dist/panel/PanelInline.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, PropsWithChildren } from 'react';
+import { CSSProperties, forwardRef, PropsWithChildren } from 'react';
 
 import { PanelContext } from './PanelContext';
 import { PanelInstanceContext } from './PanelInstanceContext';
@@ -12,7 +12,10 @@ export interface PanelInlineProps {
   height?: CSSProperties['height'];
 }
 
-export const PanelInline = ({ title, className, width, height, children }: PropsWithChildren<PanelInlineProps>) => {
+export const PanelInline = forwardRef<HTMLDivElement, PropsWithChildren<PanelInlineProps>>(function PanelInline(
+  { title, className, width, height, children },
+  ref,
+) {
   return (
     <PanelContext.Provider value={{ resizeable: false, resizePanel: () => {}, initialResizePanel: () => {} }}>
       <PanelInstanceContext.Provider
@@ -34,10 +37,10 @@ export const PanelInline = ({ title, className, width, height, children }: Props
           bounds: undefined,
         }}
       >
-        <div className={clsx('WindowPanel', className)} title={title} style={{ width, height }}>
+        <div ref={ref} className={clsx('WindowPanel', className)} title={title} style={{ width, height }}>
           {children}
         </div>
       </PanelInstanceContext.Provider>
     </PanelContext.Provider>
   );
-};
+});

package/dist/ribbon/RibbonButtonSlider.tsx

@@ -0,0 +1,66 @@
+import '../index.scss';
+
+import clsx from 'clsx';
+import { forwardRef, PropsWithChildren, useState } from 'react';
+
+import { RibbonButton, RibbonButtonProps } from './RibbonButton';
+import { RibbonButtonSliderContext, RibbonSliderAlignment, ribbonSliderAlignments } from './RibbonButtonSliderContext';
+import { v4 } from '../common/uuid';
+
+export interface RibbonSliderProps extends RibbonButtonProps {
+  autoClose?: boolean;
+  alignment: RibbonSliderAlignment;
+  sliderClassName?: string;
+}
+
+export const RibbonButtonSlider = forwardRef<HTMLButtonElement, PropsWithChildren<RibbonSliderProps>>(
+  function RibbonButtonSlider(
+    { alignment, sliderClassName, autoClose = false, children, onClick, ...buttonProps },
+    ref,
+  ) {
+    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
+          ref={ref}
+          popoverTarget={menuUniqueId}
+          popoverTargetAction={'toggle'}
+          anchorName={positionAnchor}
+          {...buttonProps}
+          onClick={onClick ?? defaultOnClick}
+        />
+        <nav
+          id={menuUniqueId}
+          {...{ ['popover' as never]: 'auto' }}
+          role="menu"
+          aria-label="Menu"
+          className={clsx(`RibbonSliderMenu RibbonSliderMenu-${alignment}`, sliderClassName)}
+          style={{
+            positionAnchor,
+            [alignments[0]]: `anchor(${positionAnchor} ${alignments[1]})`,
+            [alignments[2]]: `anchor(${positionAnchor} ${alignments[2]})`,
+            ...(alignments[3] && { transform: `translate(${alignments[3]})` }),
+          }}
+        >
+          {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/RibbonContainer.tsx

@@ -1,6 +1,6 @@
 import '../index.scss';
 
-import { CSSProperties, PropsWithChildren } from 'react';
+import { CSSProperties, PropsWithChildren, forwardRef } from 'react';
 
 export interface RibbonContainerProps {
   orientation?: 'horizontal' | 'vertical';
@@ -8,13 +8,12 @@ export interface RibbonContainerProps {
   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>
+export const RibbonContainer = forwardRef<HTMLDivElement, PropsWithChildren<RibbonContainerProps>>(
+  function RibbonContainer({ orientation = 'horizontal', style, className, children }, ref) {
+    return (
+      <div ref={ref} style={style} className={className}>
+        <div className={`RibbonButton-${orientation}Group`}>{children}</div>
+      </div>
+    );
+  },
 );

package/dist/ribbon/index.ts

@@ -8,4 +8,4 @@ export * from './RibbonMenu';
 export * from './RibbonMenuOption';
 export * from './RibbonMenuSeparator';
 export * from './RibbonSeparator';
-export * from './RibbonSliderButton';
+export * from './RibbonButtonSlider';

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "10.1.2",
+  "version": "10.3.0",
   "peerDependencies": {
     "@linzjs/lui": ">=23",
     "react": ">=18",
@@ -27,7 +27,7 @@
     "access": "public"
   },
   "engines": {
-    "node": ">=22"
+    "node": ">=24"
   },
   "scripts": {
     "build": "node -e \"require('fs').mkdirSync('./dist',{recursive:true})\" && npm run clean && npm run lintall && npm run bundle",
@@ -53,19 +53,19 @@
     "react-rnd": "10.5.3"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.3",
-    "@linzjs/lui": "^24.13.0",
-    "@linzjs/step-ag-grid": "^31.2.1",
-    "@rollup/plugin-commonjs": "^28.0.9",
+    "@chromatic-com/storybook": "^5.1.2",
+    "@linzjs/lui": "^24.14.0",
+    "@linzjs/step-ag-grid": "^31.2.2",
+    "@rollup/plugin-commonjs": "^29.0.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@storybook/addon-docs": "9.1.20",
-    "@storybook/addon-links": "9.1.20",
-    "@storybook/react-vite": "9.1.20",
+    "@storybook/addon-docs": "10.3.6",
+    "@storybook/addon-links": "10.3.6",
+    "@storybook/react-vite": "10.3.6",
     "@testing-library/dom": "^10.4.1",
     "@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/node": "^24.12.3",
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react-swc": "^4.3.0",
@@ -73,19 +73,18 @@
     "ag-grid-community": "34.2.0",
     "ag-grid-react": "34.2.0",
     "jsdom": "^27.3.0",
-    "oxfmt": "^0.47.0",
-    "oxlint": "^1.62.0",
+    "oxfmt": "^0.48.0",
+    "oxlint": "^1.63.0",
     "react": "^18.3.1",
     "react-dom": "18.3.1",
-    "rollup": "^4.60.2",
+    "rollup": "^4.60.3",
     "rollup-plugin-copy": "^3.5.0",
     "sass": "^1.99.0",
-    "storybook": "9.1.20",
+    "storybook": "10.3.6",
     "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.14.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.2",

package/dist/ribbon/RibbonSliderButton.tsx

@@ -1,67 +0,0 @@
-import '../index.scss';
-
-import clsx from 'clsx';
-import { PropsWithChildren, ReactElement, useState } from 'react';
-
-import { RibbonButton, RibbonButtonProps } from './RibbonButton';
-import { RibbonButtonSliderContext, RibbonSliderAlignment, ribbonSliderAlignments } from './RibbonButtonSliderContext';
-import { v4 } from '../common/uuid';
-
-export interface RibbonSliderProps extends RibbonButtonProps {
-  autoClose?: boolean;
-  alignment: RibbonSliderAlignment;
-  sliderClassName?: string;
-}
-
-export const RibbonButtonSlider = ({
-  alignment,
-  sliderClassName,
-  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={clsx(`RibbonSliderMenu RibbonSliderMenu-${alignment}`, sliderClassName)}
-        style={{
-          positionAnchor,
-          [alignments[0]]: `anchor(${positionAnchor} ${alignments[1]})`,
-          [alignments[2]]: `anchor(${positionAnchor} ${alignments[2]})`,
-          ...(alignments[3] && { transform: `translate(${alignments[3]})` }),
-        }}
-      >
-        {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();
-};