@linzjs/windows 9.0.0 → 9.1.1

package/dist/ribbon/Ribbon.scss

@@ -16,12 +16,23 @@
     background-color: lui.$polar;
   }
 
+  &:disabled {
+    cursor: not-allowed;
+  }
+
   span.LuiIcon {
     display: block;
     margin: auto;
   }
 }
 
+.RibbonButtonProcessing {
+  display: flex;
+  width: 44px;
+  align-items: center;
+  justify-content: center;
+}
+
 .RibbonButtonSkeleton {
   padding: 4px;
   margin: 0;
@@ -110,37 +121,46 @@
   flex-direction: row;
 }
 
-$RibbonSliderMenu-offset1: 2px;
-$RibbonSliderMenu-offset2: 6px;
+$RibbonSliderMenu-buttonMargin: 2px;
+$RibbonSliderMenu-gap: 6px;
+$RibbonSliderMenu-buttonHalfHeight: 20px;
 
 .RibbonSliderMenu-right, .RibbonSliderMenu-right-down {
-  translate: ($RibbonSliderMenu-offset1) (-$RibbonSliderMenu-offset2);
+  translate: ($RibbonSliderMenu-buttonMargin) (-$RibbonSliderMenu-gap);
+}
+
+.RibbonSliderMenu-right-center {
+  translate: ($RibbonSliderMenu-buttonMargin) ($RibbonSliderMenu-buttonHalfHeight);
+}
+
+.RibbonSliderMenu-left-center {
+  translate: ($RibbonSliderMenu-buttonMargin) ($RibbonSliderMenu-buttonHalfHeight);
 }
 
 .RibbonSliderMenu-left, .RibbonSliderMenu-left-down {
-  translate: (-$RibbonSliderMenu-offset1) (-$RibbonSliderMenu-offset2);
+  translate: (-$RibbonSliderMenu-buttonMargin) (-$RibbonSliderMenu-gap);
 }
 
 .RibbonSliderMenu-right-up {
-  translate: ($RibbonSliderMenu-offset1) ($RibbonSliderMenu-offset2);
+  translate: ($RibbonSliderMenu-buttonMargin) ($RibbonSliderMenu-gap);
 }
 
 .RibbonSliderMenu-left-up {
-  translate: (-$RibbonSliderMenu-offset1) ($RibbonSliderMenu-offset2);
+  translate: (-$RibbonSliderMenu-buttonMargin) ($RibbonSliderMenu-gap);
 }
 
 .RibbonSliderMenu-up, .RibbonSliderMenu-up-right {
-  translate: (-$RibbonSliderMenu-offset2) (-$RibbonSliderMenu-offset1);
+  translate: (-$RibbonSliderMenu-gap) (-$RibbonSliderMenu-buttonMargin);
 }
 
 .RibbonSliderMenu-down-left {
-  translate: ($RibbonSliderMenu-offset2) ($RibbonSliderMenu-offset1);
+  translate: ($RibbonSliderMenu-gap) ($RibbonSliderMenu-buttonMargin);
 }
 
 .RibbonSliderMenu-down, .RibbonSliderMenu-down-right {
-  translate: (-$RibbonSliderMenu-offset2) ($RibbonSliderMenu-offset1);
+  translate: (-$RibbonSliderMenu-gap) ($RibbonSliderMenu-buttonMargin);
 }
 
 .RibbonSliderMenu-down-left {
-  translate: ($RibbonSliderMenu-offset2) ($RibbonSliderMenu-offset1);
+  translate: ($RibbonSliderMenu-gap) ($RibbonSliderMenu-buttonMargin);
 }

package/dist/ribbon/RibbonButton.tsx

@@ -1,6 +1,6 @@
 import './Ribbon.scss';
 
-import { LuiIcon } from '@linzjs/lui';
+import { LuiIcon, LuiMiniSpinner } from '@linzjs/lui';
 import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
 import clsx from 'clsx';
 import { forwardRef, ReactElement, useContext } from 'react';
@@ -20,6 +20,7 @@ export interface RibbonButtonProps {
   disabled?: boolean;
   selected?: boolean;
   loading?: boolean;
+  processing?: boolean;
   className?: string;
   testId?: string;
   onClick?: () => void;
@@ -37,6 +38,7 @@ export const RibbonButton = forwardRef<HTMLButtonElement, RibbonButtonProps>(fun
     className,
     selected,
     loading,
+    processing,
     disabled,
     testId,
     onClick,
@@ -59,6 +61,14 @@ export const RibbonButton = forwardRef<HTMLButtonElement, RibbonButtonProps>(fun
     );
   }
 
+  if (processing) {
+    return (
+      <div className={'RibbonButtonProcessing'}>
+        <LuiMiniSpinner size={20} />
+      </div>
+    );
+  }
+
   return (
     <button
       ref={ref}

package/dist/ribbon/RibbonButtonLink.tsx

@@ -7,10 +7,11 @@ import { RibbonButton, RibbonButtonProps } from './RibbonButton';
 export type RibbonButtonLinkProps = RibbonButtonProps & {
   href: string;
   target?: string;
+  rel?: string;
 };
 
 export const RibbonButtonLink = forwardRef<HTMLButtonElement, RibbonButtonLinkProps>(function RibbonButtonLink(
-  { onClick, href, target = '_blank', ...props },
+  { onClick, href, rel = 'noreferrer', target = '_blank', ...props },
   ref,
 ) {
   return (
@@ -19,7 +20,7 @@ export const RibbonButtonLink = forwardRef<HTMLButtonElement, RibbonButtonLinkPr
       {...props}
       onClick={() => {
         onClick?.();
-        void window.open(href, target);
+        void window.open(href, target, rel);
       }}
     />
   );

package/dist/ribbon/RibbonButtonOpenPanel.tsx

@@ -8,21 +8,14 @@ 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,
-  ) {
+  function RibbonButtonOpenPanel({ uniqueId, componentFn, poppedOut, onClose, className, ...buttonProps }, ref) {
     const { openPanel, openPanels } = useContext(PanelsContext);
 
     return (
       <RibbonButton
         ref={ref}
-        testId={testId}
-        icon={icon}
-        title={title}
-        disabled={disabled}
-        loading={loading}
-        onClick={() => openPanel({ uniqueId, ...openPanelOptions })}
+        {...buttonProps}
+        onClick={() => openPanel({ uniqueId: uniqueId || buttonProps.title, componentFn, poppedOut, onClose })}
         className={clsx(openPanels.has(uniqueId ?? '') && 'RibbonButton-selected', className)}
       />
     );

package/dist/ribbon/RibbonButtonSliderContext.tsx

@@ -3,14 +3,18 @@ import { createContext } from 'react';
 export const ribbonSliderAlignments = {
   right: ['left', 'right', 'top'],
   'right-down': ['left', 'right', 'top'],
+  'right-center': ['left', 'right', 'top', '0%, -50%'],
   'right-up': ['left', 'right', 'bottom'],
   left: ['right', 'left', 'top'],
   'left-down': ['right', 'left', 'top'],
+  'left-center': ['right', 'left', 'top', '0%, -50%'],
   'left-up': ['right', 'left', 'bottom'],
   'down-left': ['top', 'bottom', 'right'],
+  'down-center': ['top', 'bottom', 'right', '50%, 0%'],
   'down-right': ['top', 'bottom', 'left'],
   down: ['top', 'bottom', 'left'],
   'up-left': ['bottom', 'top', 'right'],
+  'up-center': ['bottom', 'top', 'right', '50%, 0%'],
   'up-right': ['bottom', 'top', 'left'],
   up: ['bottom', 'top', 'left'],
 };

package/dist/ribbon/RibbonSliderButton.tsx

@@ -1,5 +1,6 @@
 import './Ribbon.scss';
 
+import clsx from 'clsx';
 import { PropsWithChildren, ReactElement, useState } from 'react';
 import { v4 } from 'uuid';
 
@@ -9,10 +10,12 @@ import { RibbonButtonSliderContext, RibbonSliderAlignment, ribbonSliderAlignment
 export interface RibbonSliderProps extends RibbonButtonProps {
   autoClose?: boolean;
   alignment: RibbonSliderAlignment;
+  sliderClassName?: string;
 }
 
 export const RibbonButtonSlider = ({
   alignment,
+  sliderClassName,
   autoClose = false,
   children,
   onClick,
@@ -40,11 +43,12 @@ export const RibbonButtonSlider = ({
         {...{ ['popover' as never]: 'auto' }}
         role="menu"
         aria-label="Menu"
-        className={`RibbonSliderMenu RibbonSliderMenu-${alignment}`}
+        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}

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "9.0.0",
+  "version": "9.1.1",
   "peerDependencies": {
     "@linzjs/lui": ">=23",
     "lodash-es": ">=4",