smarthr-ui 35.4.0 → 36.0.0

package/esm/components/Dropdown/DropdownMenuButton/DropdownMenuButton.js

@@ -1,4 +1,4 @@
-import React, { useMemo, } from 'react';
+import React, { useCallback, useEffect, useMemo, } from 'react';
 import innerText from 'react-innertext';
 import styled, { css } from 'styled-components';
 import { Dropdown, DropdownContent, DropdownScrollArea, DropdownTrigger } from '..';
@@ -10,16 +10,84 @@ import { useClassNames } from './useClassNames';
 export const DropdownMenuButton = ({ label, children, triggerSize, onlyIconTrigger = false, className = '', ...props }) => {
     const themes = useTheme();
     const classNames = useClassNames();
+    const containerRef = React.useRef(null);
     const triggerLabel = useMemo(() => onlyIconTrigger ? (React.createElement(FaEllipsisHIcon, { alt: typeof label === 'string' ? label : innerText(label) })) : (label), [onlyIconTrigger, label]);
     const triggerSuffix = useMemo(
     // eslint-disable-next-line react/jsx-no-useless-fragment
     () => (onlyIconTrigger ? React.createElement(React.Fragment, null) : React.createElement(FaCaretDownIcon, { alt: "\u5019\u88DC\u3092\u958B\u304F" })), [onlyIconTrigger]);
+    const handleKeyDown = useCallback((e) => {
+        if (!containerRef.current || !document.activeElement) {
+            return;
+        }
+        const allItems = Array.from(containerRef.current.querySelectorAll("li > *"));
+        const { hoveredItem, tabbableItems: enabledItems, focusedIndex } = allItems.reduce((acc, item) => {
+            if (item.matches(":hover") && acc.hoveredItem === null) {
+                acc.hoveredItem = item;
+            }
+            // NOTE: disalbedの判定は、自身がdisabledか、または子要素にdisabledがあるかで判定する。
+            const isDisabled = item.matches(":disabled") || Array.from(item.children).some(child => child.matches(':disabled'));
+            if (isDisabled) {
+                return acc;
+            }
+            acc.tabbableItems.push(item);
+            if (document.activeElement === item) {
+                acc.focusedIndex = acc.tabbableItems.length - 1;
+            }
+            return acc;
+        }, {
+            hoveredItem: null,
+            tabbableItems: [],
+            focusedIndex: -1
+        });
+        if (e.key === 'Up' || e.key === 'ArrowUp' || e.key === 'Left' || e.key === 'ArrowLeft') {
+            const calculateNextIndex = () => {
+                // MEMO: itemにフォーカスがない && ホバー状態のアイテムがある場合は、その一つ前のアイテムをフォーカスする
+                if (focusedIndex < 0 && hoveredItem) {
+                    return enabledItems.indexOf(hoveredItem) - 1;
+                }
+                // MEMO: フォーカスされているアイテムが最前列の場合は、最後尾のアイテムをフォーカスする
+                if (focusedIndex <= 0) {
+                    return enabledItems.length - 1;
+                }
+                return focusedIndex - 1;
+            };
+            const nextIndex = calculateNextIndex();
+            const nextItem = enabledItems[nextIndex];
+            if (nextItem instanceof HTMLElement) {
+                nextItem.focus();
+            }
+        }
+        if (e.key === 'Down' || e.key === 'ArrowDown' || e.key === 'Right' || e.key === 'ArrowRight') {
+            const calculateNextIndex = () => {
+                // MEMO: フォーカスされているアイテムが最後尾の場合は、最初のアイテムをフォーカスする
+                if (focusedIndex > -1) {
+                    return (focusedIndex + 1) % enabledItems.length;
+                }
+                // MEMO: itemにフォーカスがない && ホバー状態のアイテムがある場合は、その一つ後のアイテムをフォーカスする
+                if (hoveredItem) {
+                    return (enabledItems.indexOf(hoveredItem) + 1) % enabledItems.length;
+                }
+                return 0;
+            };
+            const nextIndex = calculateNextIndex();
+            const nextItem = enabledItems[nextIndex];
+            if (nextItem instanceof HTMLElement) {
+                nextItem.focus();
+            }
+        }
+    }, []);
+    useEffect(() => {
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [handleKeyDown]);
     return (React.createElement(Dropdown, null,
         React.createElement(DropdownTrigger, { className: `${classNames.wrapper}${className && ` ${className}`}` },
             React.createElement(TriggerButton, { ...props, suffix: triggerSuffix, size: triggerSize, square: onlyIconTrigger, className: classNames.trigger }, triggerLabel)),
         React.createElement(DropdownContent, null,
             React.createElement(DropdownScrollArea, null,
-                React.createElement(ActionList, { themes: themes, className: classNames.panel }, React.Children.map(children, (item, i) => 
+                React.createElement(ActionList, { ref: containerRef, themes: themes, className: classNames.panel }, React.Children.map(children, (item, i) => 
                 // MEMO: {flag && <Button/>}のような書き方に対応させる為、型を変換する
                 // itemの存在チェックでfalsyな値は弾かれている想定
                 item ? React.createElement("li", { key: i }, actionItem(item)) : null))))));

package/esm/components/Dropdown/DropdownMenuButton/DropdownMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuButton.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,OAAO,GACR,MAAM,OAAO,CAAA;AACd,OAAO,SAAS,MAAM,iBAAiB,CAAA;AACvC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,IAAI,CAAA;AACnF,OAAO,EAAS,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AACzD,OAAO,EAAgB,MAAM,EAA4B,MAAM,cAAc,CAAA;AAE7E,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAC7D,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAEpC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AA0B/C,MAAM,CAAC,MAAM,kBAAkB,GAA6B,CAAC,EAC3D,KAAK,EACL,QAAQ,EACR,WAAW,EACX,eAAe,GAAG,KAAK,EACvB,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,QAAQ,EAAE,CAAA;IACzB,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAElC,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CACH,eAAe,CAAC,CAAC,CAAC,CAChB,oBAAC,eAAe,IAAC,GAAG,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,GAAI,CAC/E,CAAC,CAAC,CAAC,CACF,KAAK,CACN,EACH,CAAC,eAAe,EAAE,KAAK,CAAC,CACzB,CAAA;IACD,MAAM,aAAa,GAAG,OAAO;IAC3B,yDAAyD;IACzD,GAAG,EAAE,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,yCAAK,CAAC,CAAC,CAAC,oBAAC,eAAe,IAAC,GAAG,EAAC,gCAAO,GAAG,CAAC,EACjE,CAAC,eAAe,CAAC,CAClB,CAAA;IAED,OAAO,CACL,oBAAC,QAAQ;QACP,oBAAC,eAAe,IAAC,SAAS,EAAE,GAAG,UAAU,CAAC,OAAO,GAAG,SAAS,IAAI,IAAI,SAAS,EAAE,EAAE;YAChF,oBAAC,aAAa,OACR,KAAK,EACT,MAAM,EAAE,aAAa,EACrB,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,eAAe,EACvB,SAAS,EAAE,UAAU,CAAC,OAAO,IAE5B,YAAY,CACC,CACA;QAClB,oBAAC,eAAe;YACd,oBAAC,kBAAkB;gBACjB,oBAAC,UAAU,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,KAAK,IACpD,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;gBACxC,iDAAiD;gBACjD,+BAA+B;gBAC/B,IAAI,CAAC,CAAC,CAAC,4BAAI,GAAG,EAAE,CAAC,IAAG,UAAU,CAAC,IAA4B,CAAC,CAAM,CAAC,CAAC,CAAC,IAAI,CAC1E,CACU,CACM,CACL,CACT,CACZ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;CAInC,CAAA;AACD,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAmB;IAC3E,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;eAGnB,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;;;;;;;;uBAQjB,KAAK,CAAC,GAAG,CAAC;;;;;oBAKb,KAAK,CAAC,GAAG,CAAC;;;4BAGF,KAAK,CAAC,CAAC,CAAC;;;;;;;GAOjC;CACF,CAAA;AACD,MAAM,UAAU,GAAG,CAAC,IAAkB,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA"}
+{"version":3,"file":"DropdownMenuButton.js","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx"],"names":[],"mappings":"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"}

package/esm/components/FieldSet/FieldSet.js

@@ -5,6 +5,7 @@ import { useTheme } from '../../hooks/useTheme';
 import { Heading } from '../Heading';
 import { FaExclamationCircleIcon } from '../Icon';
 import { Input } from '../Input';
+import { Stack } from '../Layout/Stack';
 import { StatusLabel } from '../StatusLabel';
 import { useClassNames } from './useClassNames';
 /**
@@ -12,6 +13,7 @@ import { useClassNames } from './useClassNames';
  */
 export const FieldSet = ({ label, labelType = 'subBlockTitle', labelTagType = 'span', errorMessage, helpMessage, className = '', labelSuffix, children, ...props }) => {
     const theme = useTheme();
+    const managedHtmlFor = useId();
     const helpId = useId();
     const classNames = useClassNames();
     return (React.createElement(Wrapper, { "$width": props.width || 'auto', className: `${className} ${classNames.wrapper}`, "aria-describedby": helpMessage ? helpId : undefined },
@@ -19,14 +21,12 @@ export const FieldSet = ({ label, labelType = 'subBlockTitle', labelTagType = 's
             React.createElement(LabelHeading, { type: labelType, tag: labelTagType, className: classNames.titleText }, label),
             props.required && (React.createElement(StatusLabel, { type: "red", className: classNames.label }, "\u5FC5\u9808")),
             labelSuffix && labelSuffix),
+        helpMessage && (React.createElement(HelpMessage, { themes: theme, id: helpId, className: classNames.help }, helpMessage)),
+        errorMessage && (React.createElement(StyledStack, { themes: theme, gap: 0, id: `${managedHtmlFor}_errorMessages` }, (Array.isArray(errorMessage) ? errorMessage : [errorMessage]).map((message, index) => (React.createElement(ErrorMessage, { themes: theme, key: index, className: classNames.error },
+            React.createElement(FaExclamationCircleIcon, { text: message, className: classNames.errorText })))))),
         children ? (children) : (
         // eslint-disable-next-line smarthr/a11y-input-has-name-attribute
-        React.createElement(Input, { ...props, error: !!errorMessage, className: classNames.input })),
-        errorMessage &&
-            (Array.isArray(errorMessage) ? errorMessage : [errorMessage]).map((message, index) => (React.createElement(Error, { themes: theme, key: index, className: classNames.error },
-                React.createElement(ErrorIcon, { color: theme.color.DANGER, className: classNames.errorIcon }),
-                React.createElement(ErrorText, { className: classNames.errorText }, message)))),
-        helpMessage && (React.createElement(Help, { id: helpId, themes: theme, className: classNames.help }, helpMessage))));
+        React.createElement(Input, { ...props, error: !!errorMessage, className: classNames.input }))));
 };
 const Wrapper = styled.div `
   ${({ $width }) => css `
@@ -48,26 +48,23 @@ const Title = styled.div `
 const LabelHeading = styled(Heading) `
   display: inline-block;
 `;
-const Help = styled.div `
-  ${({ themes: { color, fontSize, spacingByChar } }) => css `
-    margin: ${spacingByChar(0.5)} 0 0 0;
-    font-size: ${fontSize.S};
-    line-height: 1;
-    color: ${color.TEXT_GREY};
+const HelpMessage = styled.p `
+  ${({ themes: { spacingByChar } }) => css `
+    margin-bottom: ${spacingByChar(0.5)};
+
   `}
 `;
-const Error = styled.div `
-  ${({ themes: { fontSize, spacingByChar } }) => css `
-    margin: ${spacingByChar(0.5)} 0 0 0;
-    font-size: ${fontSize.S};
-    line-height: 1;
+const StyledStack = styled(Stack) `
+  ${({ themes: { spacingByChar } }) => css `
+    margin-bottom: ${spacingByChar(0.5)};
+
   `}
 `;
-const ErrorIcon = styled(FaExclamationCircleIcon) `
-  margin-right: 0.4rem;
-  vertical-align: middle;
-`;
-const ErrorText = styled.span `
-  vertical-align: middle;
+const ErrorMessage = styled.p `
+  ${({ themes: { color } }) => css `
+    .smarthr-ui-FieldSet-errorText {
+      color: ${color.DANGER};
+    }
+  `}
 `;
 //# sourceMappingURL=FieldSet.js.map

package/esm/components/FieldSet/FieldSet.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldSet.js","sourceRoot":"","sources":["../../../src/components/FieldSet/FieldSet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAA;AAC5D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAS,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,OAAO,EAAiC,MAAM,YAAY,CAAA;AACnE,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAoB/C;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA6B,CAAC,EACjD,KAAK,EACL,SAAS,GAAG,eAAe,EAC3B,YAAY,GAAG,MAAM,EACrB,YAAY,EACZ,WAAW,EACX,SAAS,GAAG,EAAE,EACd,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,MAAM,GAAG,KAAK,EAAE,CAAA;IACtB,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAElC,OAAO,CACL,oBAAC,OAAO,cACE,KAAK,CAAC,KAAK,IAAI,MAAM,EAC7B,SAAS,EAAE,GAAG,SAAS,IAAI,UAAU,CAAC,OAAO,EAAE,sBAC7B,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAElD,oBAAC,KAAK,IAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,KAAK;YAG/C,oBAAC,YAAY,IAAC,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,IAC9E,KAAK,CACO;YAEd,KAAK,CAAC,QAAQ,IAAI,CACjB,oBAAC,WAAW,IAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,UAAU,CAAC,KAAK,mBAErC,CACf;YAEA,WAAW,IAAI,WAAW,CACrB;QAEP,QAAQ,CAAC,CAAC,CAAC,CACV,QAAQ,CACT,CAAC,CAAC,CAAC;QACF,iEAAiE;QACjE,oBAAC,KAAK,OAAK,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,KAAK,GAAI,CACzE;QAEA,YAAY;YACX,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACpF,oBAAC,KAAK,IAAC,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,KAAK;gBAC3D,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,GAAI;gBACzE,oBAAC,SAAS,IAAC,SAAS,EAAE,UAAU,CAAC,SAAS,IAAG,OAAO,CAAa,CAC3D,CACT,CAAC;QAEH,WAAW,IAAI,CACd,oBAAC,IAAI,IAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,IAAI,IACxD,WAAW,CACP,CACR,CACO,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAA6B;IACnD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;aAEV,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;GAC7D;CACF,CAAA;AACD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAmB;IACvC,CAAC,EAAE,MAAM,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;kBAGxB,aAAa,CAAC,GAAG,CAAC;;;qBAGf,aAAa,CAAC,GAAG,CAAC;;GAEpC;CACF,CAAA;AACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAA;;CAEnC,CAAA;AACD,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAmB;IACtC,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;cAC7C,aAAa,CAAC,GAAG,CAAC;iBACf,QAAQ,CAAC,CAAC;;aAEd,KAAK,CAAC,SAAS;GACzB;CACF,CAAA;AACD,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAmB;IACvC,CAAC,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;cACtC,aAAa,CAAC,GAAG,CAAC;iBACf,QAAQ,CAAC,CAAC;;GAExB;CACF,CAAA;AACD,MAAM,SAAS,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAA;;;CAGhD,CAAA;AACD,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAA;;CAE5B,CAAA"}
+{"version":3,"file":"FieldSet.js","sourceRoot":"","sources":["../../../src/components/FieldSet/FieldSet.tsx"],"names":[],"mappings":"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"}