1.13.1 release

karamem0 · Jul 29, 2024 · eef6f12 · eef6f12
1 parent 6ec6667
commit eef6f12
Show file tree

Hide file tree

Showing 33 changed files with 568 additions and 573 deletions.
diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
@@ -5,7 +5,7 @@ on:
       - develop
 
 env:
-  BUILD_VERSION: '1.13.0'
+  BUILD_VERSION: '1.13.1'
 
 jobs:
   select-environment:

diff --git a/src/common/components/SidePanel.presenter.tsx b/src/common/components/SidePanel.presenter.tsx
@@ -8,18 +8,20 @@
 
 import React from 'react';
 
-import { Button, Text } from '@fluentui/react-components';
+import {
+  Button,
+  DrawerBody,
+  DrawerHeader,
+  DrawerHeaderTitle
+} from '@fluentui/react-components';
+import { DrawerOverlay } from '@fluentui/react-components/unstable';
 import { CancelIcon } from '@fluentui/react-icons-mdl2';
 
 import { css } from '@emotion/react';
 
-import { useTheme } from '../../providers/ThemeProvider';
-import { layouts } from '../../themes/Layout';
 import { EventHandler } from '../../types/Event';
 
 interface SidePanelProps {
-  className?: string,
-  content?: React.ReactNode,
   open?: boolean,
   title?: React.ReactNode,
   onOpenChange?: EventHandler<boolean>
@@ -29,89 +31,48 @@ function SidePanel(props: Readonly<React.PropsWithChildren<SidePanelProps>>) {
 
   const {
     children,
-    className,
-    content,
     open,
     title,
     onOpenChange
   } = props;
 
-  const { theme } = useTheme();
-
   return (
-    <React.Fragment>
-      <div
-        role="button"
-        tabIndex={-1}
-        onClick={(event) => onOpenChange?.(event, true)}>
-        {children}
-      </div>
-      {
-        open ? (
-          <div
-            css={css`
-              position: fixed;
-              inset: 0;
-              z-index: 1000;
-              display: grid;
-              grid-template-rows: auto;
-              grid-template-columns: 1fr auto;
-              background-color: ${theme.colorNeutralBackgroundAlpha};
-            `}>
-            <div
-              role="button"
-              tabIndex={-1}
-              css={css`
-                cursor: pointer;
-              `}
-              onClick={(event) => onOpenChange?.(event, false)} />
-            <div
-              className={className}
-              css={css`
-                width: ${layouts.sidePanel.width};
-                max-width: ${layouts.sidePanel.maxWidth};
-                background-color: ${theme.colorNeutralBackground1};
-                box-shadow: rgb(0 0 0 / 35%) 0 0 2rem 0;
-              `}>
-              <div
-                css={css`
-                  display: grid;
-                  grid-template-rows: auto;
-                  grid-template-columns: 1fr auto;
-                  grid-gap: 0.5rem;
-                  align-items: center;
-                  height: ${layouts.sidePanelHeader.height};
-                  margin: 1rem;
-                `}>
-                <Text
+    <DrawerOverlay
+      as="aside"
+      open={open}
+      position="end"
+      size="medium"
+      css={css`
+        height: 100vh;
+      `}
+      onOpenChange={(event, data) => onOpenChange?.(event, data.open)}>
+      <DrawerHeader>
+        <DrawerHeaderTitle
+          action={(
+            <Button
+              appearance="subtle"
+              aria-label="Close"
+              icon={(
+                <CancelIcon
                   css={css`
-                    font-weight: bold;
-                  `}>
-                  {title}
-                </Text>
-                <Button
-                  appearance="transparent"
-                  icon={(
-                    <CancelIcon
-                      css={css`
-                        font-size: 1rem;
-                        line-height: 1rem;
-                      `}
-                      onClick={(event) => onOpenChange?.(event, false)} />
-                  )} />
-              </div>
-              <div
-                css={css`
-                  height: ${layouts.sidePanelBody.height};
-                  margin: 1rem;
-                `}>
-                {content}
-              </div>
-            </div>
-          </div>
-        ) : null
-      }
-    </React.Fragment>
+                    font-size: 1rem;
+                    line-height: 1rem;
+                  `} />
+              )}
+              onClick={(event) => onOpenChange?.(event, false)} />
+          )}>
+          {title}
+        </DrawerHeaderTitle>
+      </DrawerHeader>
+      <DrawerBody
+        role="group"
+        tabIndex={0}
+        css={css`
+          margin-bottom: 1rem;
+        `}>
+        {children}
+      </DrawerBody>
+    </DrawerOverlay>
   );
 
 }

diff --git a/src/common/components/SidePanel.tsx b/src/common/components/SidePanel.tsx
@@ -16,18 +16,14 @@ import { Event } from '../../types/Event';
 import Presenter from './SidePanel.presenter';
 
 interface SidePanelProps {
-  className?: string,
-  content?: React.ReactNode,
   title?: React.ReactNode,
   width?: string
 }
 
 function SidePanel(props: Readonly<React.PropsWithChildren<SidePanelProps>>) {
 
   const {
-    className,
     children,
-    content,
     title
   } = props;
 
@@ -49,8 +45,6 @@ function SidePanel(props: Readonly<React.PropsWithChildren<SidePanelProps>>) {
 
   return (
     <Presenter
-      className={className}
-      content={content}
       open={open}
       title={title}
       onOpenChange={handleOpenChange}>

diff --git a/src/common/components/TreeHeader.presenter.tsx b/src/common/components/TreeHeader.presenter.tsx
@@ -67,7 +67,7 @@ function TreeHeader(props: Readonly<TreeHeaderProps>) {
         aria-disabled={root}
         aria-label={intl.formatMessage(messages.Back)}
         role="button"
-        tabIndex={-1}
+        tabIndex={0}
         title={intl.formatMessage(messages.Back)}
         css={css`
           font-size: 1rem;
@@ -102,7 +102,7 @@ function TreeHeader(props: Readonly<TreeHeaderProps>) {
           <div
             aria-label={intl.formatMessage(messages.MoreOption)}
             role="button"
-            tabIndex={-1}
+            tabIndex={0}
             title={intl.formatMessage(messages.MoreOption)}
             css={css`
               font-size: 1rem;

diff --git a/src/common/components/TreeItem.presenter.tsx b/src/common/components/TreeItem.presenter.tsx
@@ -54,91 +54,89 @@ function TreeItem(props: Readonly<TreeItemProps>) {
   return (
     <div
       key={key}
-      aria-selected={selected}
-      role="row"
-      tabIndex={-1}
+      aria-current={selected}
+      role="list"
       css={css`
         cursor: pointer;
         user-select: none;
-        &[aria-selected='true'] {
+        &[aria-current='true'] {
           background-color: ${theme.colorNeutralBackground2Selected};
         }
       `}>
-      <div role="cell">
+      <div
+        role="listitem"
+        css={css`
+          display: grid;
+          grid-template-rows: auto;
+          grid-template-columns: 1fr auto;
+          align-items: center;
+          justify-content: start;
+          & > div[role="button"]:nth-child(2) {
+            display: none;
+          }
+          &:hover {
+            background-color: ${theme.colorNeutralBackground2Hover};
+            & > div[role="button"]:nth-child(2) {
+              display: inherit;
+            }
+          }
+          &:focus {
+            & > div[role="button"]:nth-child(2) {
+              display: inherit;
+            }
+          }
+        `}>
         <div
+          aria-label={name}
+          role="button"
+          tabIndex={0}
+          title={name}
           css={css`
             display: grid;
             grid-template-rows: auto;
-            grid-template-columns: 1fr auto;
+            grid-template-columns: auto auto auto;
+            grid-gap: 0.5rem;
             align-items: center;
             justify-content: start;
-            & > div[role="button"]:nth-child(2) {
-              display: none;
-            }
-            &:hover {
-              background-color: ${theme.colorNeutralBackground2Hover};
-              & > div[role="button"]:nth-child(2) {
-                display: inherit;
-              }
-            }
-            &:focus {
-              & > div[role="button"]:nth-child(2) {
-                display: inherit;
-              }
-            }
-          `}>
-          <div
-            aria-label={name}
-            role="button"
-            tabIndex={-1}
-            title={name}
+            padding: 0.5rem;
+            color: ${theme.colorNeutralForeground1};
+          `}
+          onClick={onClick}>
+          {icon}
+          <Text
             css={css`
-              display: grid;
-              grid-template-rows: auto;
-              grid-template-columns: auto auto auto;
-              grid-gap: 0.5rem;
-              align-items: center;
-              justify-content: start;
-              padding: 0.5rem;
-              color: ${theme.colorNeutralForeground1};
-            `}
-            onClick={onClick}>
-            {icon}
-            <Text
-              css={css`
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-              `}>
-              {name}
-            </Text>
-            {info}
-          </div>
-          {
-            menuEnabled ? (
-              <Menu>
-                <MenuTrigger>
-                  <div
-                    aria-label={intl.formatMessage(messages.MoreOption)}
-                    role="button"
-                    tabIndex={-1}
-                    title={intl.formatMessage(messages.MoreOption)}
-                    css={css`
-                      padding: 0.5rem;
-                      font-size: 1rem;
-                      line-height: 1rem;
-                      color: ${theme.colorNeutralForeground1};
-                    `}>
-                    <MoreVerticalIcon />
-                  </div>
-                </MenuTrigger>
-                <MenuPopover>
-                  {menu}
-                </MenuPopover>
-              </Menu>
-            ) : null
-          }
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            `}>
+            {name}
+          </Text>
+          {info}
         </div>
+        {
+          menuEnabled ? (
+            <Menu>
+              <MenuTrigger>
+                <div
+                  aria-label={intl.formatMessage(messages.MoreOption)}
+                  role="button"
+                  tabIndex={0}
+                  title={intl.formatMessage(messages.MoreOption)}
+                  css={css`
+                    padding: 0.5rem;
+                    font-size: 1rem;
+                    line-height: 1rem;
+                    color: ${theme.colorNeutralForeground1};
+                  `}>
+                  <MoreVerticalIcon />
+                </div>
+              </MenuTrigger>
+              <MenuPopover>
+                {menu}
+              </MenuPopover>
+            </Menu>
+          ) : null
+        }
       </div>
     </div>
   );

diff --git a/src/features/explorer/components/ExplorerFileConflictButton.presenter.tsx b/src/features/explorer/components/ExplorerFileConflictButton.presenter.tsx
@@ -38,7 +38,7 @@ function ExplorerFileConflictButton(props: Readonly<ExplorerFileConflictButtonPr
     <div
       aria-label={intl.formatMessage(messages.ConflictFile)}
       role="button"
-      tabIndex={-1}
+      tabIndex={0}
       title={intl.formatMessage(messages.ConflictFile)}
       css={css`
         font-size: 1rem;

diff --git a/...ents/ExplorerFileMenuButton.presenter.tsx → ...onents/ExplorerFileMenuList.presenter.tsx b/...ents/ExplorerFileMenuButton.presenter.tsx → ...onents/ExplorerFileMenuList.presenter.tsx
@@ -37,12 +37,12 @@ import {
 import { isSupportedFile } from '../../../utils/File';
 import messages from '../messages';
 
-interface ExplorerFileMenuButtonProps {
+interface ExplorerFileMenuListProps {
   file?: File,
   onMenuClick?: EventHandler<ExplorerMenuAction>
 }
 
-function ExplorerFileMenuButton(props: Readonly<ExplorerFileMenuButtonProps>) {
+function ExplorerFileMenuList(props: Readonly<ExplorerFileMenuListProps>) {
 
   const {
     file,
@@ -142,4 +142,4 @@ function ExplorerFileMenuButton(props: Readonly<ExplorerFileMenuButtonProps>) {
 
 }
 
-export default React.memo(ExplorerFileMenuButton);
+export default React.memo(ExplorerFileMenuList);