@linzjs/windows 10.3.1 → 11.0.0

package/dist/panel/usePanelStateHandler.tsx

@@ -1,102 +0,0 @@
-import { useContext, useMemo } from 'react';
-
-import { PanelsContext } from './PanelsContext';
-import { PanelLayout, PanelMode, PanelRestoredState, PanelState } from './types';
-
-type HookArgs = {
-  panelPoppedOut?: boolean;
-  uniqueId: string;
-};
-
-export const useRestoreStateFrom = ({ panelPoppedOut, uniqueId }: HookArgs) => {
-  const { panelStateOptions } = useContext(PanelsContext);
-
-  return useMemo((): PanelRestoredState | null | undefined => {
-    if (!panelStateOptions) {
-      return;
-    }
-
-    if (panelStateOptions.saveStateIn === 'external') {
-      return panelStateOptions.onRestoreState?.();
-    }
-
-    const uniqueKey = createUniqueKey({
-      saveStateKey: panelStateOptions.saveStateKey,
-      uniqueId,
-    });
-
-    try {
-      const storedState = localStorage.getItem(uniqueKey);
-      if (storedState) {
-        const { mode, ...state } = JSON.parse(storedState) as PanelState;
-
-        const currentMode: PanelMode = panelPoppedOut === undefined ? mode : panelPoppedOut ? 'poppedOut' : 'poppedIn';
-        const panelLayout = state[currentMode];
-
-        return {
-          panelPoppedOut: currentMode === 'poppedOut',
-          ...panelLayout,
-        };
-      }
-    } catch (e) {
-      console.error('Failed to read stored panel state!', e);
-    }
-
-    return null;
-  }, [panelPoppedOut, panelStateOptions, uniqueId]);
-};
-
-export const useSaveStateIn = ({ panelPoppedOut = false, uniqueId }: HookArgs) => {
-  const { panelStateOptions } = useContext(PanelsContext);
-  return (panelLayout: PanelLayout) => {
-    if (!panelStateOptions) {
-      return;
-    }
-
-    const uniqueKey = createUniqueKey({
-      saveStateKey: panelStateOptions.saveStateKey,
-      uniqueId,
-    });
-
-    const mode: PanelMode = panelPoppedOut ? 'poppedOut' : 'poppedIn';
-
-    if (panelStateOptions.saveStateIn === 'external') {
-      panelStateOptions.onSaveState?.({
-        mode,
-        [mode]: panelLayout,
-      });
-      return;
-    }
-
-    const storedState = localStorage.getItem(uniqueKey);
-
-    let panelState: PanelState = {
-      mode,
-      [mode]: panelLayout,
-    };
-
-    if (storedState) {
-      try {
-        panelState = JSON.parse(storedState) as PanelState;
-
-        panelState.mode = mode;
-        panelState[mode] = {
-          ...panelState[mode],
-          ...panelLayout,
-        };
-      } catch (e) {
-        console.error('Failed to read existing panel state!', e);
-      }
-    }
-
-    try {
-      localStorage.setItem(uniqueKey, JSON.stringify(panelState));
-    } catch (e) {
-      console.error('Failed to save panel state!', e);
-    }
-  };
-};
-
-function createUniqueKey({ saveStateKey, uniqueId }: { saveStateKey: string; uniqueId: string }): string {
-  return `panel-${saveStateKey}-${uniqueId}`;
-}

package/dist/ribbon/RibbonButton.tsx

@@ -1,112 +0,0 @@
-import '../index.scss';
-
-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';
-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;
-  processing?: boolean;
-  processingMessage?: string;
-  className?: string;
-  testId?: string;
-  onClick?: () => void;
-}
-
-export const RibbonButton = forwardRef<HTMLButtonElement, RibbonButtonProps>(function RibbonButton(
-  {
-    id,
-    popoverTarget,
-    popoverTargetAction,
-    anchorName,
-    title,
-    icon,
-    content,
-    className,
-    selected,
-    loading,
-    processing,
-    processingMessage = `Loading ${title}`,
-    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>
-    );
-  }
-
-  if (processing) {
-    return (
-      <div
-        className={'RibbonButtonProcessing'}
-        role={'status'}
-        title={processingMessage}
-        aria-label={processingMessage}
-      >
-        <LuiMiniSpinner size={20} />
-      </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

@@ -1,27 +0,0 @@
-import '../index.scss';
-
-import { forwardRef } from 'react';
-
-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, rel = 'noreferrer', target = '_blank', ...props },
-  ref,
-) {
-  return (
-    <RibbonButton
-      ref={ref}
-      {...props}
-      onClick={() => {
-        onClick?.();
-        void window.open(href, target, rel);
-      }}
-    />
-  );
-});

package/dist/ribbon/RibbonButtonOpenPanel.tsx

@@ -1,23 +0,0 @@
-import '../index.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({ uniqueId, componentFn, poppedOut, onClose, className, ...buttonProps }, ref) {
-    const { openPanel, openPanels } = useContext(PanelsContext);
-
-    return (
-      <RibbonButton
-        ref={ref}
-        {...buttonProps}
-        onClick={() => openPanel({ uniqueId: uniqueId || buttonProps.title, componentFn, poppedOut, onClose })}
-        className={clsx(openPanels.has(uniqueId ?? '') && 'RibbonButton-selected', className)}
-      />
-    );
-  },
-);

package/dist/ribbon/RibbonButtonSlider.tsx

@@ -1,66 +0,0 @@
-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/RibbonButtonSliderContext.tsx

@@ -1,34 +0,0 @@
-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'],
-};
-
-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

@@ -1,19 +0,0 @@
-import '../index.scss';
-
-import { CSSProperties, PropsWithChildren, forwardRef } from 'react';
-
-export interface RibbonContainerProps {
-  orientation?: 'horizontal' | 'vertical';
-  style?: CSSProperties;
-  className?: string;
-}
-
-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/RibbonDeprecated.tsx

@@ -1,27 +0,0 @@
-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.tsx

@@ -1,25 +0,0 @@
-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

@@ -1,67 +0,0 @@
-import '../index.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

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

package/dist/ribbon/RibbonSeparator.tsx

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