1.13.1 release

.github/workflows/workflow.yml

@@ -5,7 +5,7 @@ on:
       - develop
 
 env:
-  BUILD_VERSION: '1.13.0'
+  BUILD_VERSION: '1.13.1'
 
 jobs:
   select-environment:

.stylelintrc.json

@@ -12,6 +12,7 @@
       ],
       "rules": {
         "at-rule-empty-line-before": "never",
+        "declaration-empty-line-before": "never",
         "rule-empty-line-before": "never"
       }
     }

src/common/components/ScrollPanel.presenter.tsx

@@ -53,7 +53,6 @@ function ScrollPanel(props: Readonly<React.PropsWithChildren<ScrollPanelProps>>,
         ::-webkit-scrollbar-thumb {
           background-color: ${scrollBarThumbColor};
         }
-
         overflow: hidden auto;
         &:focus {
           outline: none;

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>
   );
 
 }

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}>

src/common/components/Tree.presenter.tsx

@@ -0,0 +1,66 @@
+//
+// Copyright (c) 2023-2024 karamem0
+//
+// This software is released under the MIT License.
+//
+// https://github.com/karamem0/hitofude/blob/main/LICENSE
+//
+
+import React from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { Text } from '@fluentui/react-components';
+
+import { css } from '@emotion/react';
+
+import { useTheme } from '../../providers/ThemeProvider';
+import { EventHandler } from '../../types/Event';
+import messages from '../messages';
+
+interface TreeProps {
+  disabled?: boolean,
+  onKeyDown?: EventHandler
+}
+
+function Tree(props: Readonly<React.PropsWithChildren<TreeProps>>, ref: React.Ref<HTMLDivElement>) {
+
+  const {
+    children,
+    disabled,
+    onKeyDown
+  } = props;
+
+  const { theme } = useTheme();
+
+  return (
+    <div
+      ref={ref}
+      role="menu"
+      css={css`
+        display: flex;
+        flex-direction: column;
+        grid-gap: 0.25rem;
+        overflow: hidden auto;
+      `}
+      onKeyDown={onKeyDown}>
+      {
+        disabled ? (
+          <Text
+            css={css`
+              font-size: ${theme.fontSizeBase200};
+              line-height: calc(${theme.lineHeightBase200} * 1.25);
+              text-align: center;
+            `}>
+            <FormattedMessage {...messages.NoItemsFound} />
+          </Text>
+        ) : (
+          children
+        )
+      }
+    </div>
+  );
+
+}
+
+export default React.memo(React.forwardRef(Tree));

src/common/components/Tree.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright (c) 2023-2024 karamem0
+//
+// This software is released under the MIT License.
+//
+// https://github.com/karamem0/hitofude/blob/main/LICENSE
+//
+
+import React from 'react';
+
+import { Event } from '../../types/Event';
+
+import Presenter from './Tree.presenter';
+
+interface TreeProps {
+  disabled?: boolean
+}
+
+function Tree(props: Readonly<React.PropsWithChildren<TreeProps>>) {
+
+  const {
+    children,
+    disabled
+  } = props;
+
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const handleKeyDown = React.useCallback((event: Event) => {
+    const { key } = event as KeyboardEvent;
+    switch (key) {
+      case 'ArrowDown': {
+        const { current: element } = ref;
+        const items = element?.querySelectorAll<HTMLDivElement>('div[role="menuitem"]');
+        if (items == null) {
+          break;
+        }
+        for (let i = 0; i < items?.length - 1; i++) {
+          if (items[i] === document.activeElement) {
+            items[i + 1].focus();
+            break;
+          }
+        }
+        break;
+      }
+      case 'ArrowUp': {
+        const { current: element } = ref;
+        const items = element?.querySelectorAll<HTMLDivElement>('div[role="menuitem"]');
+        if (items == null) {
+          break;
+        }
+        for (let i = 1; i < items?.length; i++) {
+          if (items[i] === document.activeElement) {
+            items[i - 1].focus();
+            break;
+          }
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  }, []);
+
+  return (
+    <Presenter
+      ref={ref}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}>
+      {children}
+    </Presenter>
+  );
+
+}
+
+export default Tree;