smarthr-ui 98.0.0 → 98.1.0

package/lib/components/FileViewer/FileViewer.js

@@ -1,7 +1,20 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Decimal } from './../../vendor/.pnpm/decimal.js@10.6.0/vendor/decimal.js/decimal.js';
-import { memo, useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { memo, useMemo, useCallback, useRef, useState, useEffect } from 'react';
+import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
+import { useEnvironment } from '../../hooks/useEnvironment/useEnvironment.js';
+import '../../themes/createSpacing.js';
+import '../../_virtual/index.js';
+import '../../_virtual/index2.js';
+import '../../themes/createColor.js';
+import '../../themes/createTextColor.js';
+import 'styled-components';
+import '../../themes/createShadow/defaultShadow.js';
+import '../../themes/createWidth.js';
+import '../../themes/createBackgroundColor.js';
+import '../../themes/createBorder.js';
+import '../../hooks/useTheme.js';
 import '../../intl/IntlProvider.js';
 import 'react-intl';
 import { Localizer } from '../../intl/Localizer.js';
@@ -32,6 +45,8 @@ import { Scroller } from '../Scroller/Scroller.js';
 import { VisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText.js';
 import { ImageViewer } from './ImageViewer.js';
 import { PDFViewer } from './PDFViewer.js';
+import { SearchController } from './SearchController.js';
+import { usePDFSearch } from './usePDFSearch.js';
 
 const defaultScaleStep = new Decimal(0.2);
 const defaultScaleSteps = [0.2, 0.6, 1, 1.6, 2, 3];
@@ -41,6 +56,8 @@ const FileViewer = ({ file, scaleStep, scaleSteps, width: fixedWidth, onPassword
     const [loaded, setLoaded] = useState(false);
     const [rotation, setRotation] = useState(undefined);
     const [width, setWidth] = useState(fixedWidth ?? 0);
+    const isPDF = file.contentType === 'application/pdf';
+    const search = usePDFSearch(file.url);
     const internalScaleStep = useMemo(() => (scaleStep ? new Decimal(scaleStep) : defaultScaleStep), [scaleStep]);
     const scaleUp = useCallback(() => {
         setScale((currentScale) => new Decimal(currentScale).add(internalScaleStep).toNumber());
@@ -72,9 +89,25 @@ const FileViewer = ({ file, scaleStep, scaleSteps, width: fixedWidth, onPassword
             resizeObserver.disconnect();
         };
     }, [fixedWidth]);
-    return (jsxs(Scroller, { direction: "both", className: "shr-flex shr-h-full shr-w-full shr-flex-col shr-gap-2 shr-bg-scrim shr-bg-[radial-gradient(theme(textColor.black)_1px,_transparent_0)] shr-bg-[length:16px_16px]", ref: ref, children: [jsx("div", { className: "shr-sticky shr-start-0 shr-top-0 shr-z-[1] shr-flex shr-w-full shr-flex-shrink-0 shr-gap-0.5", children: jsx(Controller, { scale: scale, setScale: setScale, scaleSteps: scaleSteps || defaultScaleSteps, onClickScaleUpButton: scaleUp, onClickScaleDownButton: scaleDown, onClickRotateButton: rotate }) }), jsxs("div", { className: "shr-z-[0] shr-mx-auto shr-my-0 shr-box-border shr-flex shr-w-fit shr-flex-shrink-0 shr-grow shr-items-center shr-justify-center shr-px-2 shr-pb-2", children: [!loaded && (jsx("div", { className: "shr-pointer-events-none shr-fixed shr-inset-0 shr-flex shr-h-full shr-w-full shr-items-center shr-justify-center", children: jsx(Loader, { type: "light", size: "M" }) })), jsx("div", { className: !loaded ? 'shr-invisible' : '', children: file.contentType === 'application/pdf' ? (jsx(PDFViewer, { scale: scale, rotation: rotation, file: file, width: width, onLoad: handleLoaded, onPDFLoaded: handlePDFLoaded, onPassword: onPassword, onLoadError: onLoadError })) : file.contentType.startsWith('image/') ? (jsx(ImageViewer, { scale: scale, rotation: rotation, file: file, width: width, onLoad: handleLoaded, onLoadError: onLoadError })) : (jsx(Localizer, { id: "smarthr-ui/FileViewer/unsupportedFileText", defaultText: "\u30B5\u30DD\u30FC\u30C8\u3055\u308C\u3066\u3044\u306A\u3044\u5F62\u5F0F\u306E\u30D5\u30A1\u30A4\u30EB\u3067\u3059\u3002" })) })] })] }));
+    return (jsxs(Scroller, { direction: "both", className: "shr-flex shr-h-full shr-w-full shr-flex-col shr-gap-2 shr-bg-scrim shr-bg-[radial-gradient(theme(textColor.black)_1px,_transparent_0)] shr-bg-[length:16px_16px]", ref: ref, children: [jsx("div", { className: "shr-sticky shr-start-0 shr-top-0 shr-z-[1] shr-flex shr-w-full shr-flex-shrink-0 shr-gap-0.5", children: jsx(Controller, { scale: scale, setScale: setScale, scaleSteps: scaleSteps || defaultScaleSteps, onClickScaleUpButton: scaleUp, onClickScaleDownButton: scaleDown, onClickRotateButton: rotate, searchController: isPDF ? jsx(SearchController, { search: search }) : undefined }) }), jsxs("div", { className: "shr-z-[0] shr-mx-auto shr-my-0 shr-box-border shr-flex shr-w-fit shr-flex-shrink-0 shr-grow shr-items-center shr-justify-center shr-px-2 shr-pb-2", children: [!loaded && (jsx("div", { className: "shr-pointer-events-none shr-fixed shr-inset-0 shr-flex shr-h-full shr-w-full shr-items-center shr-justify-center", children: jsx(Loader, { type: "light", size: "M" }) })), jsx("div", { className: !loaded ? 'shr-invisible' : '', children: isPDF ? (jsx(PDFViewer, { scale: scale, rotation: rotation, file: file, width: width, onLoad: handleLoaded, onPDFLoaded: handlePDFLoaded, onPassword: onPassword, onLoadError: onLoadError, search: search })) : file.contentType.startsWith('image/') ? (jsx(ImageViewer, { scale: scale, rotation: rotation, file: file, width: width, onLoad: handleLoaded, onLoadError: onLoadError })) : (jsx(Localizer, { id: "smarthr-ui/FileViewer/unsupportedFileText", defaultText: "\u30B5\u30DD\u30FC\u30C8\u3055\u308C\u3066\u3044\u306A\u3044\u5F62\u5F0F\u306E\u30D5\u30A1\u30A4\u30EB\u3067\u3059\u3002" })) })] })] }));
 };
-const Controller = memo(({ scale, setScale, scaleSteps, onClickScaleUpButton, onClickScaleDownButton, onClickRotateButton, }) => (jsx("div", { className: "shr-sticky shr-flex shr-w-full shr-items-center shr-justify-center shr-justify-items-center shr-gap-0.5 shr-bg-scrim shr-p-0.5 shr-shadow-layer-1", children: jsxs(Cluster, { gap: 0.5, children: [jsxs("div", { className: "shr-border-shorthand shr-flex shr-divide-x shr-divide-solid shr-overflow-hidden shr-rounded-m", children: [jsx(Button, { onClick: onClickScaleDownButton, disabled: scale <= scaleSteps[0], className: "shr-rounded-r-none shr-border-none", children: jsx(FaMagnifyingGlassMinusIcon, { alt: jsx(Localizer, { id: "smarthr-ui/FileViewer/scaleDownAlt", defaultText: "\u7E2E\u5C0F" }) }) }), jsx(DropdownMenuButton, { trigger: jsxs(Fragment, { children: [jsx(VisuallyHiddenText, { children: jsx(Localizer, { id: "smarthr-ui/FileViewer/scaleRateLabel", defaultText: "\u62E1\u5927\u7387" }) }), `${(scale * 100).toFixed(0)}%`] }), className: "shr-border-y-0 shr-border-[theme(borderColor.default)] [&_.smarthr-ui-Button]:shr-rounded-none [&_.smarthr-ui-Button]:shr-border-[transparent]", children: scaleSteps.map((step) => (jsx(Button, { onClick: () => setScale(step), className: "shr-rounded-none shr-border-0", children: `${(step * 100).toFixed(0)}%` }, step.toString()))) }), jsx(Button, { onClick: onClickScaleUpButton, className: "shr-rounded-l-none shr-border-0", children: jsx(FaMagnifyingGlassPlusIcon, { alt: jsx(Localizer, { id: "smarthr-ui/FileViewer/scaleUpAlt", defaultText: "\u62E1\u5927" }) }) })] }), jsx(Button, { onClick: onClickRotateButton, className: "shr-p-0.75", children: jsx(FaArrowRotateLeftIcon, { alt: jsx(Localizer, { id: "smarthr-ui/FileViewer/rotateAlt", defaultText: "\u5DE6\u56DE\u8EE2" }) }) })] }) })));
+const controllerClassNameGenerator = ce({
+    base: 'shr-sticky shr-grid shr-w-full shr-items-center shr-bg-scrim shr-py-0.5 shr-shadow-layer-1',
+    variants: {
+        mobile: {
+            true: 'shr-gap-0.5 shr-px-1',
+            false: 'shr-grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] shr-gap-1.5 shr-px-2',
+        },
+    },
+});
+const Controller = memo(({ scale, setScale, scaleSteps, onClickScaleUpButton, onClickScaleDownButton, onClickRotateButton, searchController, }) => {
+    const { mobile } = useEnvironment();
+    const className = useMemo(() => controllerClassNameGenerator({ mobile }), [mobile]);
+    const onClickScaleStep = useCallback((e) => setScale(Number(e.currentTarget.value)), [setScale]);
+    return (jsxs("div", { className: className, children: [!mobile && jsx("div", { role: "presentation", "aria-hidden": "true" }), jsxs(Cluster, { gap: 0.5, className: "shr-justify-self-center", children: [jsxs("div", { className: "shr-border-shorthand shr-flex shr-divide-x shr-divide-solid shr-overflow-hidden shr-rounded-m", children: [jsx(Button, { onClick: onClickScaleDownButton, disabled: scale <= scaleSteps[0], className: "shr-rounded-r-none shr-border-none", children: jsx(FaMagnifyingGlassMinusIcon, { alt: jsx(Localizer, { id: "smarthr-ui/FileViewer/scaleDownAlt", defaultText: "\u7E2E\u5C0F" }) }) }), jsx(DropdownMenuButton, { trigger: jsxs(Fragment, { children: [jsx(VisuallyHiddenText, { children: jsx(Localizer, { id: "smarthr-ui/FileViewer/scaleRateLabel", defaultText: "\u62E1\u5927\u7387" }) }), `${(scale * 100).toFixed(0)}%`] }), className: "shr-border-y-0 shr-border-[theme(borderColor.default)] [&_.smarthr-ui-Button]:shr-rounded-none [&_.smarthr-ui-Button]:shr-border-[transparent]", children: scaleSteps.map((step) => (jsx(Button, { value: step, onClick: onClickScaleStep, className: "shr-rounded-none shr-border-0", children: `${(step * 100).toFixed(0)}%` }, step.toString()))) }), jsx(Button, { onClick: onClickScaleUpButton, className: "shr-rounded-l-none shr-border-0", children: jsx(FaMagnifyingGlassPlusIcon, { alt: jsx(Localizer, { id: "smarthr-ui/FileViewer/scaleUpAlt", defaultText: "\u62E1\u5927" }) }) })] }), jsx(Button, { onClick: onClickRotateButton, className: "shr-p-0.75", children: jsx(FaArrowRotateLeftIcon, { alt: jsx(Localizer, { id: "smarthr-ui/FileViewer/rotateAlt", defaultText: "\u5DE6\u56DE\u8EE2" }) }) })] }), searchController ? (jsx("div", { className: "shr-min-w-0 shr-justify-self-stretch", children: searchController })) : (
+            /* PC 表示時のときに中央の操作ボタンたちを中央へ寄せるための空のスペーサー */
+            !mobile && jsx("div", { role: "presentation", "aria-hidden": "true" }))] }));
+});
 
 export { FileViewer };
 //# sourceMappingURL=FileViewer.js.map

package/lib/components/FileViewer/FileViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileViewer.js","sources":["../../../src/components/FileViewer/FileViewer.tsx"],"sourcesContent":["'use client'\n\nimport Decimal from 'decimal.js'\nimport {\n  type ComponentProps,\n  type FC,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { Localizer } from '../../intl'\nimport { Button } from '../Button'\nimport { DropdownMenuButton } from '../Dropdown'\nimport {\n  FaArrowRotateLeftIcon,\n  FaMagnifyingGlassMinusIcon,\n  FaMagnifyingGlassPlusIcon,\n} from '../Icon'\nimport { Cluster } from '../Layout'\nimport { Loader } from '../Loader'\nimport { Scroller } from '../Scroller'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport { ImageViewer } from './ImageViewer'\nimport { PDFViewer } from './PDFViewer'\n\nimport type { FileForViewer } from './types'\n\nconst defaultScaleStep = new Decimal(0.2)\nconst defaultScaleSteps = [0.2, 0.6, 1, 1.6, 2, 3]\n\ntype Props = {\n  file: FileForViewer\n  width?: number\n\n  /*\n   * 拡大縮小率のステップを、100%を1とした配列で指定します。\n   * */\n  scaleSteps?: number[]\n\n  scaleStep?: number\n  onPassword?: ComponentProps<typeof PDFViewer>['onPassword']\n  onLoadError?: () => void\n}\n\nexport const FileViewer: FC<Props> = ({\n  file,\n  scaleStep,\n  scaleSteps,\n  width: fixedWidth,\n  onPassword,\n  onLoadError,\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const [scale, setScale] = useState(1)\n  const [loaded, setLoaded] = useState(false)\n  const [rotation, setRotation] = useState<number | undefined>(undefined)\n  const [width, setWidth] = useState(fixedWidth ?? 0)\n\n  const internalScaleStep = useMemo(\n    () => (scaleStep ? new Decimal(scaleStep) : defaultScaleStep),\n    [scaleStep],\n  )\n\n  const scaleUp = useCallback(() => {\n    setScale((currentScale) => new Decimal(currentScale).add(internalScaleStep).toNumber())\n  }, [internalScaleStep])\n\n  const scaleDown = useCallback(() => {\n    setScale((currentScale) => new Decimal(currentScale).sub(internalScaleStep).toNumber())\n  }, [internalScaleStep])\n\n  const rotate = useCallback(() => {\n    // HINT: react-pdf側のAnnotationLayer.cssではマイナスの回転に対応しておらず、また0, 90, 180, 270度のみ対応しているため、-90度の場合は+270度として扱う\n    const currentRotation = rotation ?? 0\n    const newRotation = currentRotation === 0 ? 270 : currentRotation - 90\n    setRotation(newRotation)\n  }, [rotation])\n\n  const handleLoaded = useCallback(() => {\n    setLoaded(true)\n  }, [])\n\n  const handlePDFLoaded = useCallback((defaultRotation: number) => {\n    setRotation(defaultRotation)\n  }, [])\n\n  useEffect(() => {\n    if (!ref.current || fixedWidth !== undefined) {\n      return\n    }\n\n    const resizeObserver = new ResizeObserver(() => {\n      setWidth((ref.current?.clientWidth ?? 0) - 64)\n    })\n\n    resizeObserver.observe(ref.current)\n\n    return () => {\n      resizeObserver.disconnect()\n    }\n  }, [fixedWidth])\n\n  return (\n    <Scroller\n      direction=\"both\"\n      className=\"shr-flex shr-h-full shr-w-full shr-flex-col shr-gap-2 shr-bg-scrim shr-bg-[radial-gradient(theme(textColor.black)_1px,_transparent_0)] shr-bg-[length:16px_16px]\"\n      ref={ref}\n    >\n      <div className=\"shr-sticky shr-start-0 shr-top-0 shr-z-[1] shr-flex shr-w-full shr-flex-shrink-0 shr-gap-0.5\">\n        <Controller\n          scale={scale}\n          setScale={setScale}\n          scaleSteps={scaleSteps || defaultScaleSteps}\n          onClickScaleUpButton={scaleUp}\n          onClickScaleDownButton={scaleDown}\n          onClickRotateButton={rotate}\n        />\n      </div>\n      <div className=\"shr-z-[0] shr-mx-auto shr-my-0 shr-box-border shr-flex shr-w-fit shr-flex-shrink-0 shr-grow shr-items-center shr-justify-center shr-px-2 shr-pb-2\">\n        {!loaded && (\n          <div className=\"shr-pointer-events-none shr-fixed shr-inset-0 shr-flex shr-h-full shr-w-full shr-items-center shr-justify-center\">\n            <Loader type=\"light\" size=\"M\" />\n          </div>\n        )}\n        <div className={!loaded ? 'shr-invisible' : ''}>\n          {file.contentType === 'application/pdf' ? (\n            <PDFViewer\n              scale={scale}\n              rotation={rotation}\n              file={file}\n              width={width}\n              onLoad={handleLoaded}\n              onPDFLoaded={handlePDFLoaded}\n              onPassword={onPassword}\n              onLoadError={onLoadError}\n            />\n          ) : file.contentType.startsWith('image/') ? (\n            <ImageViewer\n              scale={scale}\n              rotation={rotation}\n              file={file}\n              width={width}\n              onLoad={handleLoaded}\n              onLoadError={onLoadError}\n            />\n          ) : (\n            <Localizer\n              id=\"smarthr-ui/FileViewer/unsupportedFileText\"\n              defaultText=\"サポートされていない形式のファイルです。\"\n            />\n          )}\n        </div>\n      </div>\n    </Scroller>\n  )\n}\n\ntype ControllerProps = {\n  scale: number\n  setScale: (scale: number) => void\n  scaleSteps: number[]\n  onClickScaleUpButton: () => void\n  onClickScaleDownButton: () => void\n  onClickRotateButton: () => void\n}\n\nconst Controller: FC<ControllerProps> = memo(\n  ({\n    scale,\n    setScale,\n    scaleSteps,\n    onClickScaleUpButton,\n    onClickScaleDownButton,\n    onClickRotateButton,\n  }) => (\n    <div className=\"shr-sticky shr-flex shr-w-full shr-items-center shr-justify-center shr-justify-items-center shr-gap-0.5 shr-bg-scrim shr-p-0.5 shr-shadow-layer-1\">\n      <Cluster gap={0.5}>\n        <div className=\"shr-border-shorthand shr-flex shr-divide-x shr-divide-solid shr-overflow-hidden shr-rounded-m\">\n          <Button\n            onClick={onClickScaleDownButton}\n            disabled={scale <= scaleSteps[0]}\n            className=\"shr-rounded-r-none shr-border-none\"\n          >\n            <FaMagnifyingGlassMinusIcon\n              alt={<Localizer id=\"smarthr-ui/FileViewer/scaleDownAlt\" defaultText=\"縮小\" />}\n            />\n          </Button>\n          <DropdownMenuButton\n            trigger={\n              <>\n                <VisuallyHiddenText>\n                  <Localizer id=\"smarthr-ui/FileViewer/scaleRateLabel\" defaultText=\"拡大率\" />\n                </VisuallyHiddenText>\n                {`${(scale * 100).toFixed(0)}%`}\n              </>\n            }\n            className=\"shr-border-y-0 shr-border-[theme(borderColor.default)] [&_.smarthr-ui-Button]:shr-rounded-none [&_.smarthr-ui-Button]:shr-border-[transparent]\"\n          >\n            {scaleSteps.map((step) => (\n              <Button\n                key={step.toString()}\n                onClick={() => setScale(step)}\n                className=\"shr-rounded-none shr-border-0\"\n              >\n                {`${(step * 100).toFixed(0)}%`}\n              </Button>\n            ))}\n          </DropdownMenuButton>\n          <Button onClick={onClickScaleUpButton} className=\"shr-rounded-l-none shr-border-0\">\n            <FaMagnifyingGlassPlusIcon\n              alt={<Localizer id=\"smarthr-ui/FileViewer/scaleUpAlt\" defaultText=\"拡大\" />}\n            />\n          </Button>\n        </div>\n        <Button onClick={onClickRotateButton} className=\"shr-p-0.75\">\n          <FaArrowRotateLeftIcon\n            alt={<Localizer id=\"smarthr-ui/FileViewer/rotateAlt\" defaultText=\"左回転\" />}\n          />\n        </Button>\n      </Cluster>\n    </div>\n  ),\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA;AACA;;AAwBE;;;;AAIA;;AAOA;;AAEA;AAEA;;AAEA;AAEA;;AAEE;AACA;;AAEF;AAEA;;;AAIA;;;;;;;AASE;AACE;AACF;AAEA;AAEA;;AAEA;AACF;;AAuDF;AAWA;;"}
+{"version":3,"file":"FileViewer.js","sources":["../../../src/components/FileViewer/FileViewer.tsx"],"sourcesContent":["'use client'\n\nimport Decimal from 'decimal.js'\nimport {\n  type ComponentProps,\n  type FC,\n  type MouseEvent,\n  type ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useEnvironment } from '../../hooks/useEnvironment'\nimport { Localizer } from '../../intl'\nimport { Button } from '../Button'\nimport { DropdownMenuButton } from '../Dropdown'\nimport {\n  FaArrowRotateLeftIcon,\n  FaMagnifyingGlassMinusIcon,\n  FaMagnifyingGlassPlusIcon,\n} from '../Icon'\nimport { Cluster } from '../Layout'\nimport { Loader } from '../Loader'\nimport { Scroller } from '../Scroller'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport { ImageViewer } from './ImageViewer'\nimport { PDFViewer } from './PDFViewer'\nimport { SearchController } from './SearchController'\nimport { usePDFSearch } from './usePDFSearch'\n\nimport type { FileForViewer } from './types'\n\nconst defaultScaleStep = new Decimal(0.2)\nconst defaultScaleSteps = [0.2, 0.6, 1, 1.6, 2, 3]\n\ntype Props = {\n  file: FileForViewer\n  width?: number\n\n  /*\n   * 拡大縮小率のステップを、100%を1とした配列で指定します。\n   * */\n  scaleSteps?: number[]\n\n  scaleStep?: number\n  onPassword?: ComponentProps<typeof PDFViewer>['onPassword']\n  onLoadError?: () => void\n}\n\nexport const FileViewer: FC<Props> = ({\n  file,\n  scaleStep,\n  scaleSteps,\n  width: fixedWidth,\n  onPassword,\n  onLoadError,\n}) => {\n  const ref = useRef<HTMLDivElement>(null)\n  const [scale, setScale] = useState(1)\n  const [loaded, setLoaded] = useState(false)\n  const [rotation, setRotation] = useState<number | undefined>(undefined)\n  const [width, setWidth] = useState(fixedWidth ?? 0)\n  const isPDF = file.contentType === 'application/pdf'\n\n  const search = usePDFSearch(file.url)\n\n  const internalScaleStep = useMemo(\n    () => (scaleStep ? new Decimal(scaleStep) : defaultScaleStep),\n    [scaleStep],\n  )\n\n  const scaleUp = useCallback(() => {\n    setScale((currentScale) => new Decimal(currentScale).add(internalScaleStep).toNumber())\n  }, [internalScaleStep])\n\n  const scaleDown = useCallback(() => {\n    setScale((currentScale) => new Decimal(currentScale).sub(internalScaleStep).toNumber())\n  }, [internalScaleStep])\n\n  const rotate = useCallback(() => {\n    // HINT: react-pdf側のAnnotationLayer.cssではマイナスの回転に対応しておらず、また0, 90, 180, 270度のみ対応しているため、-90度の場合は+270度として扱う\n    const currentRotation = rotation ?? 0\n    const newRotation = currentRotation === 0 ? 270 : currentRotation - 90\n    setRotation(newRotation)\n  }, [rotation])\n\n  const handleLoaded = useCallback(() => {\n    setLoaded(true)\n  }, [])\n\n  const handlePDFLoaded = useCallback((defaultRotation: number) => {\n    setRotation(defaultRotation)\n  }, [])\n\n  useEffect(() => {\n    if (!ref.current || fixedWidth !== undefined) {\n      return\n    }\n\n    const resizeObserver = new ResizeObserver(() => {\n      setWidth((ref.current?.clientWidth ?? 0) - 64)\n    })\n\n    resizeObserver.observe(ref.current)\n\n    return () => {\n      resizeObserver.disconnect()\n    }\n  }, [fixedWidth])\n\n  return (\n    <Scroller\n      direction=\"both\"\n      className=\"shr-flex shr-h-full shr-w-full shr-flex-col shr-gap-2 shr-bg-scrim shr-bg-[radial-gradient(theme(textColor.black)_1px,_transparent_0)] shr-bg-[length:16px_16px]\"\n      ref={ref}\n    >\n      <div className=\"shr-sticky shr-start-0 shr-top-0 shr-z-[1] shr-flex shr-w-full shr-flex-shrink-0 shr-gap-0.5\">\n        <Controller\n          scale={scale}\n          setScale={setScale}\n          scaleSteps={scaleSteps || defaultScaleSteps}\n          onClickScaleUpButton={scaleUp}\n          onClickScaleDownButton={scaleDown}\n          onClickRotateButton={rotate}\n          searchController={isPDF ? <SearchController search={search} /> : undefined}\n        />\n      </div>\n      <div className=\"shr-z-[0] shr-mx-auto shr-my-0 shr-box-border shr-flex shr-w-fit shr-flex-shrink-0 shr-grow shr-items-center shr-justify-center shr-px-2 shr-pb-2\">\n        {!loaded && (\n          <div className=\"shr-pointer-events-none shr-fixed shr-inset-0 shr-flex shr-h-full shr-w-full shr-items-center shr-justify-center\">\n            <Loader type=\"light\" size=\"M\" />\n          </div>\n        )}\n        <div className={!loaded ? 'shr-invisible' : ''}>\n          {isPDF ? (\n            <PDFViewer\n              scale={scale}\n              rotation={rotation}\n              file={file}\n              width={width}\n              onLoad={handleLoaded}\n              onPDFLoaded={handlePDFLoaded}\n              onPassword={onPassword}\n              onLoadError={onLoadError}\n              search={search}\n            />\n          ) : file.contentType.startsWith('image/') ? (\n            <ImageViewer\n              scale={scale}\n              rotation={rotation}\n              file={file}\n              width={width}\n              onLoad={handleLoaded}\n              onLoadError={onLoadError}\n            />\n          ) : (\n            <Localizer\n              id=\"smarthr-ui/FileViewer/unsupportedFileText\"\n              defaultText=\"サポートされていない形式のファイルです。\"\n            />\n          )}\n        </div>\n      </div>\n    </Scroller>\n  )\n}\n\ntype ControllerProps = {\n  scale: number\n  setScale: (scale: number) => void\n  scaleSteps: number[]\n  onClickScaleUpButton: () => void\n  onClickScaleDownButton: () => void\n  onClickRotateButton: () => void\n  searchController?: ReactNode\n}\n\nconst controllerClassNameGenerator = tv({\n  base: 'shr-sticky shr-grid shr-w-full shr-items-center shr-bg-scrim shr-py-0.5 shr-shadow-layer-1',\n  variants: {\n    mobile: {\n      true: 'shr-gap-0.5 shr-px-1',\n      false: 'shr-grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] shr-gap-1.5 shr-px-2',\n    },\n  },\n})\n\nconst Controller: FC<ControllerProps> = memo(\n  ({\n    scale,\n    setScale,\n    scaleSteps,\n    onClickScaleUpButton,\n    onClickScaleDownButton,\n    onClickRotateButton,\n    searchController,\n  }) => {\n    const { mobile } = useEnvironment()\n    const className = useMemo(() => controllerClassNameGenerator({ mobile }), [mobile])\n\n    const onClickScaleStep = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => setScale(Number(e.currentTarget.value)),\n      [setScale],\n    )\n\n    return (\n      <div className={className}>\n        {/* PC 表示時のときに中央の操作ボタンたちを中央へ寄せるための空のスペーサー */}\n        {!mobile && <div role=\"presentation\" aria-hidden=\"true\" />}\n        <Cluster gap={0.5} className=\"shr-justify-self-center\">\n          <div className=\"shr-border-shorthand shr-flex shr-divide-x shr-divide-solid shr-overflow-hidden shr-rounded-m\">\n            <Button\n              onClick={onClickScaleDownButton}\n              disabled={scale <= scaleSteps[0]}\n              className=\"shr-rounded-r-none shr-border-none\"\n            >\n              <FaMagnifyingGlassMinusIcon\n                alt={<Localizer id=\"smarthr-ui/FileViewer/scaleDownAlt\" defaultText=\"縮小\" />}\n              />\n            </Button>\n            <DropdownMenuButton\n              trigger={\n                <>\n                  <VisuallyHiddenText>\n                    <Localizer id=\"smarthr-ui/FileViewer/scaleRateLabel\" defaultText=\"拡大率\" />\n                  </VisuallyHiddenText>\n                  {`${(scale * 100).toFixed(0)}%`}\n                </>\n              }\n              className=\"shr-border-y-0 shr-border-[theme(borderColor.default)] [&_.smarthr-ui-Button]:shr-rounded-none [&_.smarthr-ui-Button]:shr-border-[transparent]\"\n            >\n              {scaleSteps.map((step) => (\n                <Button\n                  key={step.toString()}\n                  value={step}\n                  onClick={onClickScaleStep}\n                  className=\"shr-rounded-none shr-border-0\"\n                >\n                  {`${(step * 100).toFixed(0)}%`}\n                </Button>\n              ))}\n            </DropdownMenuButton>\n            <Button onClick={onClickScaleUpButton} className=\"shr-rounded-l-none shr-border-0\">\n              <FaMagnifyingGlassPlusIcon\n                alt={<Localizer id=\"smarthr-ui/FileViewer/scaleUpAlt\" defaultText=\"拡大\" />}\n              />\n            </Button>\n          </div>\n          <Button onClick={onClickRotateButton} className=\"shr-p-0.75\">\n            <FaArrowRotateLeftIcon\n              alt={<Localizer id=\"smarthr-ui/FileViewer/rotateAlt\" defaultText=\"左回転\" />}\n            />\n          </Button>\n        </Cluster>\n        {searchController ? (\n          <div className=\"shr-min-w-0 shr-justify-self-stretch\">{searchController}</div>\n        ) : (\n          /* PC 表示時のときに中央の操作ボタンたちを中央へ寄せるための空のスペーサー */\n          !mobile && <div role=\"presentation\" aria-hidden=\"true\" />\n        )}\n      </div>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA;AACA;;AAwBE;;;;AAIA;AACA;;;AASA;;AAEA;AAEA;;AAEA;AAEA;;AAEE;AACA;;AAEF;AAEA;;;AAIA;;;;;;;AASE;AACE;AACF;AAEA;AAEA;;AAEA;AACF;;AAyDF;AAYA;AACE;AACA;AACE;AACE;AACA;AACD;AACF;AACF;AAED;AAUI;AACA;;;;AA4DM;AAIR;;"}

package/lib/components/FileViewer/PDFViewer.cjs

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 require('./../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.28_react-dom@19.2.6_react@19.2.6__react@19.2.6/vendor/react-pdf/dist/esm/index.cjs');
 var components_Scroller_Scroller = require('../Scroller/Scroller.cjs');
+var components_FileViewer_buildCustomTextRenderer = require('./buildCustomTextRenderer.cjs');
 var components_FileViewer_generatedReactPDFStyle = require('./generatedReactPDFStyle.cjs');
 var Document = require('./../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.28_react-dom@19.2.6_react@19.2.6__react@19.2.6/vendor/react-pdf/dist/esm/Document.cjs');
 var Page = require('./../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.28_react-dom@19.2.6_react@19.2.6__react@19.2.6/vendor/react-pdf/dist/esm/Page.cjs');
@@ -42,8 +43,22 @@ const options = {
     // cMapUrl: '/cmaps/',
     cMapUrl: `//unpkg.com/pdfjs-dist@${pdf.version}/cmaps/`,
 };
-const PDFViewer = React.memo(({ scale, rotation, file, width, onLoad, onPDFLoaded, onPassword, onLoadError }) => {
+// pdfjs が用意している CSS 変数 (--highlight-bg-color / --highlight-selected-bg-color)を .textLayer スコープで上書きし、検索ハイライト色を変更している。
+const HighlightOverrideStyle = () => (jsxRuntime.jsx("style", { children: `
+.textLayer {
+  --highlight-bg-color: rgba(255, 235, 0, 0.5);
+  --highlight-selected-bg-color: rgba(255, 140, 0, 0.6);
+}
+.textLayer mark.highlight {
+  color: transparent;
+}
+` }));
+const PDFViewer = React.memo(({ scale, rotation, file, width, onLoad, onPDFLoaded, onPassword, onLoadError, search }) => {
+    const matches = search?.matches;
+    const currentMatchIndex = search?.currentMatchIndex;
+    const onPageTextLoaded = search?.registerPageText;
     const [pdfNumPages, setPdfNumPages] = React.useState(1);
+    const rootRef = React.useRef(null);
     const onDocumentLoadSuccess = React.useCallback(({ numPages }) => {
         setPdfNumPages(numPages);
     }, []);
@@ -61,7 +76,49 @@ const PDFViewer = React.memo(({ scale, rotation, file, width, onLoad, onPDFLoade
             }
         };
     }, [onLoad, onPDFLoaded, pdfNumPages, rotation]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(components_FileViewer_generatedReactPDFStyle.ReactPDFStyle, {}), jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { direction: "both", className: "shr-h-full", children: jsxRuntime.jsx(Document, { options: options, file: file.url, onLoadSuccess: onDocumentLoadSuccess, onLoadError: onLoadError, rotate: rotation, className: "shr-flex shr-w-fit shr-flex-col shr-items-center shr-gap-1", externalLinkTarget: "_blank", loading: null, onPassword: onPassword, children: Array.from({ length: pdfNumPages }).map((_, i) => (jsxRuntime.jsx(Page, { pageNumber: i + 1, width: width, scale: scale, className: "shr-w-full", onLoadSuccess: onPageLoad, loading: null }, `page_${i}`))) }) })] }));
+    const customTextRenderer = React.useMemo(() => {
+        if (!matches || matches.length === 0) {
+            return undefined;
+        }
+        return components_FileViewer_buildCustomTextRenderer.buildCustomTextRenderer(matches);
+    }, [matches]);
+    const handleGetTextSuccess = React.useCallback((pageIndex) => (textContent) => {
+        if (!onPageTextLoaded)
+            return;
+        const texts = textContent.items.reduce((acc, item) => {
+            if ('str' in item) {
+                acc.push(item.str);
+            }
+            return acc;
+        }, []);
+        onPageTextLoaded(pageIndex, texts);
+    }, [onPageTextLoaded]);
+    React.useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        root
+            .querySelectorAll(`mark.highlight.${components_FileViewer_buildCustomTextRenderer.SELECTED_MATCH_CLASS}`)
+            .forEach((el) => el.classList.remove(components_FileViewer_buildCustomTextRenderer.SELECTED_MATCH_CLASS));
+        if (currentMatchIndex === undefined || currentMatchIndex < 0)
+            return;
+        const start = performance.now();
+        let id = 0;
+        const apply = () => {
+            const els = root.querySelectorAll(components_FileViewer_buildCustomTextRenderer.matchSelector(currentMatchIndex));
+            if (els.length > 0) {
+                els.forEach((el) => el.classList.add(components_FileViewer_buildCustomTextRenderer.SELECTED_MATCH_CLASS));
+                els[0].scrollIntoView({ block: 'center', behavior: 'smooth' });
+                return;
+            }
+            if (performance.now() - start < 1000) {
+                id = requestAnimationFrame(apply);
+            }
+        };
+        id = requestAnimationFrame(apply);
+        return () => cancelAnimationFrame(id);
+    }, [currentMatchIndex, matches]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(components_FileViewer_generatedReactPDFStyle.ReactPDFStyle, {}), jsxRuntime.jsx(HighlightOverrideStyle, {}), jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { ref: rootRef, direction: "both", className: "shr-h-full", children: jsxRuntime.jsx(Document, { options: options, file: file.url, onLoadSuccess: onDocumentLoadSuccess, onLoadError: onLoadError, rotate: rotation, className: "shr-flex shr-w-fit shr-flex-col shr-items-center shr-gap-1", externalLinkTarget: "_blank", loading: null, onPassword: onPassword, children: Array.from({ length: pdfNumPages }).map((_, i) => (jsxRuntime.jsx(Page, { pageNumber: i + 1, width: width, scale: scale, className: "shr-w-full", onLoadSuccess: onPageLoad, onGetTextSuccess: handleGetTextSuccess(i), customTextRenderer: customTextRenderer, loading: null }, `page_${i}`))) }) })] }));
 });
 
 exports.PDFViewer = PDFViewer;

package/lib/components/FileViewer/PDFViewer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PDFViewer.cjs","sources":["../../../src/components/FileViewer/PDFViewer.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, memo, useCallback, useMemo, useState } from 'react'\nimport { Document, Page, pdfjs } from 'react-pdf'\n\nimport { Scroller } from '../Scroller'\n\nimport { ReactPDFStyle } from './generatedReactPDFStyle'\n\nimport type { ViewerProps } from './types'\n\nif (typeof window !== 'undefined') {\n  // iOS 17.3以下ではPromise.withResolversが未定義のため、polyfillを適用する\n  // @ts-expect-error\n  if (typeof window.Promise.withResolvers === 'undefined') {\n    // @ts-expect-error\n    window.Promise.withResolvers = function () {\n      let resolve, reject\n      const promise = new Promise((res, rej) => {\n        resolve = res\n        reject = rej\n      })\n      return { promise, resolve, reject }\n    }\n    // web workerもpolyfillされたものを読み込む\n    pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`\n  } else {\n    // TODO: バンドラの関係でCDNから読み込んでいるが、smarthr-uiから配信するようにしたい\n    // pdfjs.GlobalWorkerOptions.workerSrc = new URL(\n    //   'pdfjs-dist/build/pdf.worker.min.mjs',\n    //   import.meta.url,\n    // ).toString()\n    pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`\n  }\n}\n\nconst options = {\n  // TODO: バンドラの関係でCDNから読み込んでいるが、smarthr-uiから配信するようにしたい\n  // 非latin文字を読み込むためのオプション\n  // 参考: https://github.com/wojtekmaj/react-pdf?tab=readme-ov-file#support-for-non-latin-characters\n  // cMapUrl: '/cmaps/',\n  cMapUrl: `//unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,\n} satisfies ComponentProps<typeof Document>['options']\n\nexport const PDFViewer: FC<ViewerProps> = memo(\n  ({ scale, rotation, file, width, onLoad, onPDFLoaded, onPassword, onLoadError }) => {\n    const [pdfNumPages, setPdfNumPages] = useState(1)\n\n    const onDocumentLoadSuccess = useCallback<\n      NonNullable<ComponentProps<typeof Document>['onLoadSuccess']>\n    >(({ numPages }) => {\n      setPdfNumPages(numPages)\n    }, [])\n\n    const onPageLoad: ComponentProps<typeof Page>['onLoadSuccess'] = useMemo(() => {\n      if (!onLoad && !onPDFLoaded) {\n        return undefined\n      }\n\n      return (page) => {\n        if (onPDFLoaded && rotation === undefined) {\n          onPDFLoaded(page.rotate)\n        }\n        // DocumentのLoadだとページごとの読み込みが考慮されないため\n        if (onLoad && page.pageNumber === pdfNumPages) {\n          onLoad()\n        }\n      }\n    }, [onLoad, onPDFLoaded, pdfNumPages, rotation])\n\n    return (\n      <>\n        {/* TODO: 外部CSSをsmarthr-uiから読み込んでもらえるようにする機構ができたら消す */}\n        <ReactPDFStyle />\n        <Scroller direction=\"both\" className=\"shr-h-full\">\n          <Document\n            options={options}\n            file={file.url}\n            onLoadSuccess={onDocumentLoadSuccess}\n            onLoadError={onLoadError}\n            rotate={rotation}\n            className=\"shr-flex shr-w-fit shr-flex-col shr-items-center shr-gap-1\"\n            externalLinkTarget=\"_blank\"\n            loading={null}\n            onPassword={onPassword}\n          >\n            {Array.from({ length: pdfNumPages }).map((_, i) => (\n              <Page\n                key={`page_${i}`}\n                pageNumber={i + 1}\n                width={width}\n                scale={scale}\n                className=\"shr-w-full\"\n                onLoadSuccess={onPageLoad}\n                loading={null}\n              />\n            ))}\n          </Document>\n        </Scroller>\n      </>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;AAWA;;;;;AAKI;;;;;AAKE;AACA;AACF;;;;;;;;;;;;AAWJ;AAEA;;;;;AAKE;;AAGK;;;;;AAUH;AACE;AACE;;;AAIA;AACE;;;;AAIA;;AAEJ;;;AAkCJ;;"}
+{"version":3,"file":"PDFViewer.cjs","sources":["../../../src/components/FileViewer/PDFViewer.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { Document, Page, pdfjs } from 'react-pdf'\n\nimport { Scroller } from '../Scroller'\n\nimport {\n  SELECTED_MATCH_CLASS,\n  buildCustomTextRenderer,\n  matchSelector,\n} from './buildCustomTextRenderer'\nimport { ReactPDFStyle } from './generatedReactPDFStyle'\n\nimport type { ViewerProps } from './types'\nimport type { UsePDFSearch } from './usePDFSearch'\n\nif (typeof window !== 'undefined') {\n  // iOS 17.3以下ではPromise.withResolversが未定義のため、polyfillを適用する\n  // @ts-expect-error\n  if (typeof window.Promise.withResolvers === 'undefined') {\n    // @ts-expect-error\n    window.Promise.withResolvers = function () {\n      let resolve, reject\n      const promise = new Promise((res, rej) => {\n        resolve = res\n        reject = rej\n      })\n      return { promise, resolve, reject }\n    }\n    // web workerもpolyfillされたものを読み込む\n    pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`\n  } else {\n    // TODO: バンドラの関係でCDNから読み込んでいるが、smarthr-uiから配信するようにしたい\n    // pdfjs.GlobalWorkerOptions.workerSrc = new URL(\n    //   'pdfjs-dist/build/pdf.worker.min.mjs',\n    //   import.meta.url,\n    // ).toString()\n    pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`\n  }\n}\n\nconst options = {\n  // TODO: バンドラの関係でCDNから読み込んでいるが、smarthr-uiから配信するようにしたい\n  // 非latin文字を読み込むためのオプション\n  // 参考: https://github.com/wojtekmaj/react-pdf?tab=readme-ov-file#support-for-non-latin-characters\n  // cMapUrl: '/cmaps/',\n  cMapUrl: `//unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,\n} satisfies ComponentProps<typeof Document>['options']\n\ntype CustomTextRenderer = NonNullable<ComponentProps<typeof Page>['customTextRenderer']>\ntype TextContent = Parameters<NonNullable<ComponentProps<typeof Page>['onGetTextSuccess']>>[number]\n\n// pdfjs が用意している CSS 変数 (--highlight-bg-color / --highlight-selected-bg-color)を .textLayer スコープで上書きし、検索ハイライト色を変更している。\nconst HighlightOverrideStyle = () => (\n  <style>{`\n.textLayer {\n  --highlight-bg-color: rgba(255, 235, 0, 0.5);\n  --highlight-selected-bg-color: rgba(255, 140, 0, 0.6);\n}\n.textLayer mark.highlight {\n  color: transparent;\n}\n`}</style>\n)\n\ntype Props = ViewerProps & {\n  search?: UsePDFSearch\n}\n\nexport const PDFViewer: FC<Props> = memo(\n  ({ scale, rotation, file, width, onLoad, onPDFLoaded, onPassword, onLoadError, search }) => {\n    const matches = search?.matches\n    const currentMatchIndex = search?.currentMatchIndex\n    const onPageTextLoaded = search?.registerPageText\n    const [pdfNumPages, setPdfNumPages] = useState(1)\n    const rootRef = useRef<HTMLDivElement>(null)\n\n    const onDocumentLoadSuccess = useCallback<\n      NonNullable<ComponentProps<typeof Document>['onLoadSuccess']>\n    >(({ numPages }) => {\n      setPdfNumPages(numPages)\n    }, [])\n\n    const onPageLoad: ComponentProps<typeof Page>['onLoadSuccess'] = useMemo(() => {\n      if (!onLoad && !onPDFLoaded) {\n        return undefined\n      }\n\n      return (page) => {\n        if (onPDFLoaded && rotation === undefined) {\n          onPDFLoaded(page.rotate)\n        }\n        // DocumentのLoadだとページごとの読み込みが考慮されないため\n        if (onLoad && page.pageNumber === pdfNumPages) {\n          onLoad()\n        }\n      }\n    }, [onLoad, onPDFLoaded, pdfNumPages, rotation])\n\n    const customTextRenderer = useMemo<CustomTextRenderer | undefined>(() => {\n      if (!matches || matches.length === 0) {\n        return undefined\n      }\n      return buildCustomTextRenderer(matches)\n    }, [matches])\n\n    const handleGetTextSuccess = useCallback(\n      (pageIndex: number) => (textContent: TextContent) => {\n        if (!onPageTextLoaded) return\n        const texts = textContent.items.reduce<string[]>((acc, item) => {\n          if ('str' in item) {\n            acc.push(item.str)\n          }\n          return acc\n        }, [])\n        onPageTextLoaded(pageIndex, texts)\n      },\n      [onPageTextLoaded],\n    )\n\n    useEffect(() => {\n      const root = rootRef.current\n      if (!root) return\n      root\n        .querySelectorAll(`mark.highlight.${SELECTED_MATCH_CLASS}`)\n        .forEach((el) => el.classList.remove(SELECTED_MATCH_CLASS))\n\n      if (currentMatchIndex === undefined || currentMatchIndex < 0) return\n\n      const start = performance.now()\n      let id = 0\n      const apply = () => {\n        const els = root.querySelectorAll(matchSelector(currentMatchIndex))\n        if (els.length > 0) {\n          els.forEach((el) => el.classList.add(SELECTED_MATCH_CLASS))\n          els[0].scrollIntoView({ block: 'center', behavior: 'smooth' })\n          return\n        }\n        if (performance.now() - start < 1000) {\n          id = requestAnimationFrame(apply)\n        }\n      }\n      id = requestAnimationFrame(apply)\n      return () => cancelAnimationFrame(id)\n    }, [currentMatchIndex, matches])\n\n    return (\n      <>\n        {/* TODO: 外部CSSをsmarthr-uiから読み込んでもらえるようにする機構ができたら消す */}\n        <ReactPDFStyle />\n        <HighlightOverrideStyle />\n        <Scroller ref={rootRef} direction=\"both\" className=\"shr-h-full\">\n          <Document\n            options={options}\n            file={file.url}\n            onLoadSuccess={onDocumentLoadSuccess}\n            onLoadError={onLoadError}\n            rotate={rotation}\n            className=\"shr-flex shr-w-fit shr-flex-col shr-items-center shr-gap-1\"\n            externalLinkTarget=\"_blank\"\n            loading={null}\n            onPassword={onPassword}\n          >\n            {Array.from({ length: pdfNumPages }).map((_, i) => (\n              <Page\n                key={`page_${i}`}\n                pageNumber={i + 1}\n                width={width}\n                scale={scale}\n                className=\"shr-w-full\"\n                onLoadSuccess={onPageLoad}\n                onGetTextSuccess={handleGetTextSuccess(i)}\n                customTextRenderer={customTextRenderer}\n                loading={null}\n              />\n            ))}\n          </Document>\n        </Scroller>\n      </>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;AA0BA;;;;;AAKI;;;;;AAKE;AACA;AACF;;;;;;;;;;;;AAWJ;AAEA;;;;;AAKE;;AAMF;AACA;;;;;;;;AASC;AAOM;AAEH;AACA;AACA;;AAEA;;;;AAQA;AACE;AACE;;;AAIA;AACE;;;;AAIA;;AAEJ;;AAGF;;AAEI;;AAEF;AACF;AAEA;AAEI;;AACA;AACE;AACE;;AAEF;;AAEF;AACF;;AAKA;AACA;;;AAEG;AACA;AAEH;;AAEA;;;;AAIE;AACE;AACA;;;;AAIA;;AAEJ;AACA;AACA;AACF;AAEA;AAkCF;;"}

package/lib/components/FileViewer/PDFViewer.d.ts

@@ -1,3 +1,8 @@
 import { type FC } from 'react';
 import type { ViewerProps } from './types';
-export declare const PDFViewer: FC<ViewerProps>;
+import type { UsePDFSearch } from './usePDFSearch';
+type Props = ViewerProps & {
+    search?: UsePDFSearch;
+};
+export declare const PDFViewer: FC<Props>;
+export {};

package/lib/components/FileViewer/PDFViewer.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { memo, useState, useCallback, useMemo } from 'react';
+import { memo, useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.28_react-dom@19.2.6_react@19.2.6__react@19.2.6/vendor/react-pdf/dist/esm/index.js';
 import { Scroller } from '../Scroller/Scroller.js';
+import { buildCustomTextRenderer, SELECTED_MATCH_CLASS, matchSelector } from './buildCustomTextRenderer.js';
 import { ReactPDFStyle } from './generatedReactPDFStyle.js';
 import Document from './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.28_react-dom@19.2.6_react@19.2.6__react@19.2.6/vendor/react-pdf/dist/esm/Document.js';
 import Page from './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.28_react-dom@19.2.6_react@19.2.6__react@19.2.6/vendor/react-pdf/dist/esm/Page.js';
@@ -40,8 +41,22 @@ const options = {
     // cMapUrl: '/cmaps/',
     cMapUrl: `//unpkg.com/pdfjs-dist@${__webpack_exports__version}/cmaps/`,
 };
-const PDFViewer = memo(({ scale, rotation, file, width, onLoad, onPDFLoaded, onPassword, onLoadError }) => {
+// pdfjs が用意している CSS 変数 (--highlight-bg-color / --highlight-selected-bg-color)を .textLayer スコープで上書きし、検索ハイライト色を変更している。
+const HighlightOverrideStyle = () => (jsx("style", { children: `
+.textLayer {
+  --highlight-bg-color: rgba(255, 235, 0, 0.5);
+  --highlight-selected-bg-color: rgba(255, 140, 0, 0.6);
+}
+.textLayer mark.highlight {
+  color: transparent;
+}
+` }));
+const PDFViewer = memo(({ scale, rotation, file, width, onLoad, onPDFLoaded, onPassword, onLoadError, search }) => {
+    const matches = search?.matches;
+    const currentMatchIndex = search?.currentMatchIndex;
+    const onPageTextLoaded = search?.registerPageText;
     const [pdfNumPages, setPdfNumPages] = useState(1);
+    const rootRef = useRef(null);
     const onDocumentLoadSuccess = useCallback(({ numPages }) => {
         setPdfNumPages(numPages);
     }, []);
@@ -59,7 +74,49 @@ const PDFViewer = memo(({ scale, rotation, file, width, onLoad, onPDFLoaded, onP
             }
         };
     }, [onLoad, onPDFLoaded, pdfNumPages, rotation]);
-    return (jsxs(Fragment, { children: [jsx(ReactPDFStyle, {}), jsx(Scroller, { direction: "both", className: "shr-h-full", children: jsx(Document, { options: options, file: file.url, onLoadSuccess: onDocumentLoadSuccess, onLoadError: onLoadError, rotate: rotation, className: "shr-flex shr-w-fit shr-flex-col shr-items-center shr-gap-1", externalLinkTarget: "_blank", loading: null, onPassword: onPassword, children: Array.from({ length: pdfNumPages }).map((_, i) => (jsx(Page, { pageNumber: i + 1, width: width, scale: scale, className: "shr-w-full", onLoadSuccess: onPageLoad, loading: null }, `page_${i}`))) }) })] }));
+    const customTextRenderer = useMemo(() => {
+        if (!matches || matches.length === 0) {
+            return undefined;
+        }
+        return buildCustomTextRenderer(matches);
+    }, [matches]);
+    const handleGetTextSuccess = useCallback((pageIndex) => (textContent) => {
+        if (!onPageTextLoaded)
+            return;
+        const texts = textContent.items.reduce((acc, item) => {
+            if ('str' in item) {
+                acc.push(item.str);
+            }
+            return acc;
+        }, []);
+        onPageTextLoaded(pageIndex, texts);
+    }, [onPageTextLoaded]);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        root
+            .querySelectorAll(`mark.highlight.${SELECTED_MATCH_CLASS}`)
+            .forEach((el) => el.classList.remove(SELECTED_MATCH_CLASS));
+        if (currentMatchIndex === undefined || currentMatchIndex < 0)
+            return;
+        const start = performance.now();
+        let id = 0;
+        const apply = () => {
+            const els = root.querySelectorAll(matchSelector(currentMatchIndex));
+            if (els.length > 0) {
+                els.forEach((el) => el.classList.add(SELECTED_MATCH_CLASS));
+                els[0].scrollIntoView({ block: 'center', behavior: 'smooth' });
+                return;
+            }
+            if (performance.now() - start < 1000) {
+                id = requestAnimationFrame(apply);
+            }
+        };
+        id = requestAnimationFrame(apply);
+        return () => cancelAnimationFrame(id);
+    }, [currentMatchIndex, matches]);
+    return (jsxs(Fragment, { children: [jsx(ReactPDFStyle, {}), jsx(HighlightOverrideStyle, {}), jsx(Scroller, { ref: rootRef, direction: "both", className: "shr-h-full", children: jsx(Document, { options: options, file: file.url, onLoadSuccess: onDocumentLoadSuccess, onLoadError: onLoadError, rotate: rotation, className: "shr-flex shr-w-fit shr-flex-col shr-items-center shr-gap-1", externalLinkTarget: "_blank", loading: null, onPassword: onPassword, children: Array.from({ length: pdfNumPages }).map((_, i) => (jsx(Page, { pageNumber: i + 1, width: width, scale: scale, className: "shr-w-full", onLoadSuccess: onPageLoad, onGetTextSuccess: handleGetTextSuccess(i), customTextRenderer: customTextRenderer, loading: null }, `page_${i}`))) }) })] }));
 });
 
 export { PDFViewer };

package/lib/components/FileViewer/PDFViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PDFViewer.js","sources":["../../../src/components/FileViewer/PDFViewer.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type FC, memo, useCallback, useMemo, useState } from 'react'\nimport { Document, Page, pdfjs } from 'react-pdf'\n\nimport { Scroller } from '../Scroller'\n\nimport { ReactPDFStyle } from './generatedReactPDFStyle'\n\nimport type { ViewerProps } from './types'\n\nif (typeof window !== 'undefined') {\n  // iOS 17.3以下ではPromise.withResolversが未定義のため、polyfillを適用する\n  // @ts-expect-error\n  if (typeof window.Promise.withResolvers === 'undefined') {\n    // @ts-expect-error\n    window.Promise.withResolvers = function () {\n      let resolve, reject\n      const promise = new Promise((res, rej) => {\n        resolve = res\n        reject = rej\n      })\n      return { promise, resolve, reject }\n    }\n    // web workerもpolyfillされたものを読み込む\n    pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`\n  } else {\n    // TODO: バンドラの関係でCDNから読み込んでいるが、smarthr-uiから配信するようにしたい\n    // pdfjs.GlobalWorkerOptions.workerSrc = new URL(\n    //   'pdfjs-dist/build/pdf.worker.min.mjs',\n    //   import.meta.url,\n    // ).toString()\n    pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`\n  }\n}\n\nconst options = {\n  // TODO: バンドラの関係でCDNから読み込んでいるが、smarthr-uiから配信するようにしたい\n  // 非latin文字を読み込むためのオプション\n  // 参考: https://github.com/wojtekmaj/react-pdf?tab=readme-ov-file#support-for-non-latin-characters\n  // cMapUrl: '/cmaps/',\n  cMapUrl: `//unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,\n} satisfies ComponentProps<typeof Document>['options']\n\nexport const PDFViewer: FC<ViewerProps> = memo(\n  ({ scale, rotation, file, width, onLoad, onPDFLoaded, onPassword, onLoadError }) => {\n    const [pdfNumPages, setPdfNumPages] = useState(1)\n\n    const onDocumentLoadSuccess = useCallback<\n      NonNullable<ComponentProps<typeof Document>['onLoadSuccess']>\n    >(({ numPages }) => {\n      setPdfNumPages(numPages)\n    }, [])\n\n    const onPageLoad: ComponentProps<typeof Page>['onLoadSuccess'] = useMemo(() => {\n      if (!onLoad && !onPDFLoaded) {\n        return undefined\n      }\n\n      return (page) => {\n        if (onPDFLoaded && rotation === undefined) {\n          onPDFLoaded(page.rotate)\n        }\n        // DocumentのLoadだとページごとの読み込みが考慮されないため\n        if (onLoad && page.pageNumber === pdfNumPages) {\n          onLoad()\n        }\n      }\n    }, [onLoad, onPDFLoaded, pdfNumPages, rotation])\n\n    return (\n      <>\n        {/* TODO: 外部CSSをsmarthr-uiから読み込んでもらえるようにする機構ができたら消す */}\n        <ReactPDFStyle />\n        <Scroller direction=\"both\" className=\"shr-h-full\">\n          <Document\n            options={options}\n            file={file.url}\n            onLoadSuccess={onDocumentLoadSuccess}\n            onLoadError={onLoadError}\n            rotate={rotation}\n            className=\"shr-flex shr-w-fit shr-flex-col shr-items-center shr-gap-1\"\n            externalLinkTarget=\"_blank\"\n            loading={null}\n            onPassword={onPassword}\n          >\n            {Array.from({ length: pdfNumPages }).map((_, i) => (\n              <Page\n                key={`page_${i}`}\n                pageNumber={i + 1}\n                width={width}\n                scale={scale}\n                className=\"shr-w-full\"\n                onLoadSuccess={onPageLoad}\n                loading={null}\n              />\n            ))}\n          </Document>\n        </Scroller>\n      </>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;AAWA;;;;;AAKI;;;;;AAKE;AACA;AACF;;;;;;;;;;;;AAWJ;AAEA;;;;;AAKE;;AAGK;;;;;AAUH;AACE;AACE;;;AAIA;AACE;;;;AAIA;;AAEJ;;;AAkCJ;;"}
+{"version":3,"file":"PDFViewer.js","sources":["../../../src/components/FileViewer/PDFViewer.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { Document, Page, pdfjs } from 'react-pdf'\n\nimport { Scroller } from '../Scroller'\n\nimport {\n  SELECTED_MATCH_CLASS,\n  buildCustomTextRenderer,\n  matchSelector,\n} from './buildCustomTextRenderer'\nimport { ReactPDFStyle } from './generatedReactPDFStyle'\n\nimport type { ViewerProps } from './types'\nimport type { UsePDFSearch } from './usePDFSearch'\n\nif (typeof window !== 'undefined') {\n  // iOS 17.3以下ではPromise.withResolversが未定義のため、polyfillを適用する\n  // @ts-expect-error\n  if (typeof window.Promise.withResolvers === 'undefined') {\n    // @ts-expect-error\n    window.Promise.withResolvers = function () {\n      let resolve, reject\n      const promise = new Promise((res, rej) => {\n        resolve = res\n        reject = rej\n      })\n      return { promise, resolve, reject }\n    }\n    // web workerもpolyfillされたものを読み込む\n    pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`\n  } else {\n    // TODO: バンドラの関係でCDNから読み込んでいるが、smarthr-uiから配信するようにしたい\n    // pdfjs.GlobalWorkerOptions.workerSrc = new URL(\n    //   'pdfjs-dist/build/pdf.worker.min.mjs',\n    //   import.meta.url,\n    // ).toString()\n    pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`\n  }\n}\n\nconst options = {\n  // TODO: バンドラの関係でCDNから読み込んでいるが、smarthr-uiから配信するようにしたい\n  // 非latin文字を読み込むためのオプション\n  // 参考: https://github.com/wojtekmaj/react-pdf?tab=readme-ov-file#support-for-non-latin-characters\n  // cMapUrl: '/cmaps/',\n  cMapUrl: `//unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,\n} satisfies ComponentProps<typeof Document>['options']\n\ntype CustomTextRenderer = NonNullable<ComponentProps<typeof Page>['customTextRenderer']>\ntype TextContent = Parameters<NonNullable<ComponentProps<typeof Page>['onGetTextSuccess']>>[number]\n\n// pdfjs が用意している CSS 変数 (--highlight-bg-color / --highlight-selected-bg-color)を .textLayer スコープで上書きし、検索ハイライト色を変更している。\nconst HighlightOverrideStyle = () => (\n  <style>{`\n.textLayer {\n  --highlight-bg-color: rgba(255, 235, 0, 0.5);\n  --highlight-selected-bg-color: rgba(255, 140, 0, 0.6);\n}\n.textLayer mark.highlight {\n  color: transparent;\n}\n`}</style>\n)\n\ntype Props = ViewerProps & {\n  search?: UsePDFSearch\n}\n\nexport const PDFViewer: FC<Props> = memo(\n  ({ scale, rotation, file, width, onLoad, onPDFLoaded, onPassword, onLoadError, search }) => {\n    const matches = search?.matches\n    const currentMatchIndex = search?.currentMatchIndex\n    const onPageTextLoaded = search?.registerPageText\n    const [pdfNumPages, setPdfNumPages] = useState(1)\n    const rootRef = useRef<HTMLDivElement>(null)\n\n    const onDocumentLoadSuccess = useCallback<\n      NonNullable<ComponentProps<typeof Document>['onLoadSuccess']>\n    >(({ numPages }) => {\n      setPdfNumPages(numPages)\n    }, [])\n\n    const onPageLoad: ComponentProps<typeof Page>['onLoadSuccess'] = useMemo(() => {\n      if (!onLoad && !onPDFLoaded) {\n        return undefined\n      }\n\n      return (page) => {\n        if (onPDFLoaded && rotation === undefined) {\n          onPDFLoaded(page.rotate)\n        }\n        // DocumentのLoadだとページごとの読み込みが考慮されないため\n        if (onLoad && page.pageNumber === pdfNumPages) {\n          onLoad()\n        }\n      }\n    }, [onLoad, onPDFLoaded, pdfNumPages, rotation])\n\n    const customTextRenderer = useMemo<CustomTextRenderer | undefined>(() => {\n      if (!matches || matches.length === 0) {\n        return undefined\n      }\n      return buildCustomTextRenderer(matches)\n    }, [matches])\n\n    const handleGetTextSuccess = useCallback(\n      (pageIndex: number) => (textContent: TextContent) => {\n        if (!onPageTextLoaded) return\n        const texts = textContent.items.reduce<string[]>((acc, item) => {\n          if ('str' in item) {\n            acc.push(item.str)\n          }\n          return acc\n        }, [])\n        onPageTextLoaded(pageIndex, texts)\n      },\n      [onPageTextLoaded],\n    )\n\n    useEffect(() => {\n      const root = rootRef.current\n      if (!root) return\n      root\n        .querySelectorAll(`mark.highlight.${SELECTED_MATCH_CLASS}`)\n        .forEach((el) => el.classList.remove(SELECTED_MATCH_CLASS))\n\n      if (currentMatchIndex === undefined || currentMatchIndex < 0) return\n\n      const start = performance.now()\n      let id = 0\n      const apply = () => {\n        const els = root.querySelectorAll(matchSelector(currentMatchIndex))\n        if (els.length > 0) {\n          els.forEach((el) => el.classList.add(SELECTED_MATCH_CLASS))\n          els[0].scrollIntoView({ block: 'center', behavior: 'smooth' })\n          return\n        }\n        if (performance.now() - start < 1000) {\n          id = requestAnimationFrame(apply)\n        }\n      }\n      id = requestAnimationFrame(apply)\n      return () => cancelAnimationFrame(id)\n    }, [currentMatchIndex, matches])\n\n    return (\n      <>\n        {/* TODO: 外部CSSをsmarthr-uiから読み込んでもらえるようにする機構ができたら消す */}\n        <ReactPDFStyle />\n        <HighlightOverrideStyle />\n        <Scroller ref={rootRef} direction=\"both\" className=\"shr-h-full\">\n          <Document\n            options={options}\n            file={file.url}\n            onLoadSuccess={onDocumentLoadSuccess}\n            onLoadError={onLoadError}\n            rotate={rotation}\n            className=\"shr-flex shr-w-fit shr-flex-col shr-items-center shr-gap-1\"\n            externalLinkTarget=\"_blank\"\n            loading={null}\n            onPassword={onPassword}\n          >\n            {Array.from({ length: pdfNumPages }).map((_, i) => (\n              <Page\n                key={`page_${i}`}\n                pageNumber={i + 1}\n                width={width}\n                scale={scale}\n                className=\"shr-w-full\"\n                onLoadSuccess={onPageLoad}\n                onGetTextSuccess={handleGetTextSuccess(i)}\n                customTextRenderer={customTextRenderer}\n                loading={null}\n              />\n            ))}\n          </Document>\n        </Scroller>\n      </>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;AA0BA;;;;;AAKI;;;;;AAKE;AACA;AACF;;;;;;;;;;;;AAWJ;AAEA;;;;;AAKE;;AAMF;AACA;;;;;;;;AASC;AAOM;AAEH;AACA;AACA;;AAEA;;;;AAQA;AACE;AACE;;;AAIA;AACE;;;;AAIA;;AAEJ;;AAGF;;AAEI;;AAEF;AACF;AAEA;AAEI;;AACA;AACE;AACE;;AAEF;;AAEF;AACF;;AAKA;AACA;;;AAEG;AACA;AAEH;;AAEA;;;;AAIE;AACE;AACA;;;;AAIA;;AAEJ;AACA;AACA;AACF;AAEA;AAkCF;;"}

package/lib/components/FileViewer/SearchController.cjs

@@ -0,0 +1,105 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
+var hooks_useEnvironment_useEnvironment = require('../../hooks/useEnvironment/useEnvironment.cjs');
+require('../../themes/createSpacing.cjs');
+require('../../_virtual/index.cjs');
+require('../../_virtual/index2.cjs');
+require('../../themes/createColor.cjs');
+require('../../themes/createTextColor.cjs');
+require('styled-components');
+require('../../themes/createShadow/defaultShadow.cjs');
+require('../../themes/createWidth.cjs');
+require('../../themes/createBackgroundColor.cjs');
+require('../../themes/createBorder.cjs');
+require('../../hooks/useTheme.cjs');
+require('../../intl/IntlProvider.cjs');
+var intl_useIntl = require('../../intl/useIntl.cjs');
+require('../../intl/Localizer.cjs');
+require('../../_virtual/dayjs.min.cjs');
+require('../../intl/TimeFormatter.cjs');
+var components_Button_Button = require('../Button/Button.cjs');
+require('../Button/AnchorButton.cjs');
+require('../Button/UnstyledButton.cjs');
+var components_Icon_FaIcon = require('../Icon/FaIcon.cjs');
+require('../Icon/generateIcon.cjs');
+require('../Icon/OpenInNewTabIcon.cjs');
+require('../Input/Input.cjs');
+require('../Input/CurrencyInput/CurrencyInput.cjs');
+var components_Input_SearchInput_SearchInput = require('../Input/SearchInput/SearchInput.cjs');
+var components_Text_Text = require('../Text/Text.cjs');
+
+const classNameGenerator = index.tv({
+    slots: {
+        wrapper: 'shr-flex shr-w-full',
+        inputArea: 'shr-min-w-0 shr-grow',
+    },
+    variants: {
+        mobile: {
+            true: {},
+            false: {
+                wrapper: 'shr-justify-end',
+                inputArea: 'shr-max-w-[15em]',
+            },
+        },
+    },
+});
+const SearchController = React.memo(({ search }) => {
+    const { query, setQuery, matchCount, currentMatchIndex, goNext: onClickNext, goPrev: onClickPrev, clear: onClickClear, } = search;
+    const { localize } = intl_useIntl.useIntl();
+    const { mobile } = hooks_useEnvironment_useEnvironment.useEnvironment();
+    const classNames = React.useMemo(() => {
+        const { wrapper, inputArea } = classNameGenerator({ mobile });
+        return { wrapper: wrapper(), inputArea: inputArea() };
+    }, [mobile]);
+    const translated = React.useMemo(() => ({
+        searchInputTooltipMessage: localize({
+            id: 'smarthr-ui/FileViewer/searchInputTooltipMessage',
+            defaultText: 'PDF内のテキストを検索',
+        }),
+        previousMatchAlt: localize({
+            id: 'smarthr-ui/FileViewer/previousMatchAlt',
+            defaultText: '前の検索結果へ',
+        }),
+        nextMatchAlt: localize({
+            id: 'smarthr-ui/FileViewer/nextMatchAlt',
+            defaultText: '次の検索結果へ',
+        }),
+    }), [localize]);
+    const hasMatches = matchCount > 0;
+    const displayedCurrent = hasMatches ? currentMatchIndex + 1 : 0;
+    const handleChange = React.useCallback((e) => {
+        setQuery(e.target.value);
+    }, [setQuery]);
+    const handleKeyDown = React.useCallback((e) => {
+        if (e.nativeEvent.isComposing) {
+            return;
+        }
+        switch (e.key) {
+            case 'Enter': {
+                e.preventDefault();
+                if (e.shiftKey) {
+                    onClickPrev();
+                }
+                else {
+                    onClickNext();
+                }
+                break;
+            }
+            case 'Escape': {
+                if (query !== '') {
+                    e.preventDefault();
+                    onClickClear();
+                }
+                break;
+            }
+        }
+    }, [onClickNext, onClickPrev, onClickClear, query]);
+    return (jsxRuntime.jsxs("div", { className: classNames.wrapper, children: [jsxRuntime.jsx("div", { className: classNames.inputArea, children: jsxRuntime.jsx(components_Input_SearchInput_SearchInput.SearchInput, { name: "file_viewer_search", tooltipMessage: translated.searchInputTooltipMessage, value: query, onChange: handleChange, onKeyDown: handleKeyDown, width: "100%", suffix: query !== '' ? (jsxRuntime.jsx(components_Text_Text.Text, { size: "S", "aria-live": "polite", className: "shr-tabular-nums", children: `${displayedCurrent}/${matchCount}` })) : undefined, className: "[&_.smarthr-ui-Input]:shr-rounded-e-none" }) }), jsxRuntime.jsx(components_Button_Button.Button, { onClick: onClickPrev, disabled: !hasMatches, className: "shr-rounded-none shr-border-s-0 shr-p-0.75 aria-disabled:!shr-border-default", children: jsxRuntime.jsx(components_Icon_FaIcon.FaAngleUpIcon, { alt: translated.previousMatchAlt }) }), jsxRuntime.jsx(components_Button_Button.Button, { onClick: onClickNext, disabled: !hasMatches, className: "shr-rounded-s-none shr-border-s-0 shr-p-0.75 aria-disabled:!shr-border-default", children: jsxRuntime.jsx(components_Icon_FaIcon.FaAngleDownIcon, { alt: translated.nextMatchAlt }) })] }));
+});
+
+exports.SearchController = SearchController;
+//# sourceMappingURL=SearchController.cjs.map

package/lib/components/FileViewer/SearchController.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchController.cjs","sources":["../../../src/components/FileViewer/SearchController.tsx"],"sourcesContent":["'use client'\n\nimport { type ChangeEvent, type FC, type KeyboardEvent, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useEnvironment } from '../../hooks/useEnvironment'\nimport { useIntl } from '../../intl'\nimport { Button } from '../Button'\nimport { FaAngleDownIcon, FaAngleUpIcon } from '../Icon'\nimport { SearchInput } from '../Input'\nimport { Text } from '../Text'\n\nimport type { UsePDFSearch } from './usePDFSearch'\n\ntype Props = {\n  search: UsePDFSearch\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'shr-flex shr-w-full',\n    inputArea: 'shr-min-w-0 shr-grow',\n  },\n  variants: {\n    mobile: {\n      true: {},\n      false: {\n        wrapper: 'shr-justify-end',\n        inputArea: 'shr-max-w-[15em]',\n      },\n    },\n  },\n})\n\nexport const SearchController: FC<Props> = memo(({ search }) => {\n  const {\n    query,\n    setQuery,\n    matchCount,\n    currentMatchIndex,\n    goNext: onClickNext,\n    goPrev: onClickPrev,\n    clear: onClickClear,\n  } = search\n  const { localize } = useIntl()\n  const { mobile } = useEnvironment()\n  const classNames = useMemo(() => {\n    const { wrapper, inputArea } = classNameGenerator({ mobile })\n    return { wrapper: wrapper(), inputArea: inputArea() }\n  }, [mobile])\n  const translated = useMemo(\n    () => ({\n      searchInputTooltipMessage: localize({\n        id: 'smarthr-ui/FileViewer/searchInputTooltipMessage',\n        defaultText: 'PDF内のテキストを検索',\n      }),\n      previousMatchAlt: localize({\n        id: 'smarthr-ui/FileViewer/previousMatchAlt',\n        defaultText: '前の検索結果へ',\n      }),\n      nextMatchAlt: localize({\n        id: 'smarthr-ui/FileViewer/nextMatchAlt',\n        defaultText: '次の検索結果へ',\n      }),\n    }),\n    [localize],\n  )\n\n  const hasMatches = matchCount > 0\n  const displayedCurrent = hasMatches ? currentMatchIndex + 1 : 0\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      setQuery(e.target.value)\n    },\n    [setQuery],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.nativeEvent.isComposing) {\n        return\n      }\n      switch (e.key) {\n        case 'Enter': {\n          e.preventDefault()\n          if (e.shiftKey) {\n            onClickPrev()\n          } else {\n            onClickNext()\n          }\n          break\n        }\n        case 'Escape': {\n          if (query !== '') {\n            e.preventDefault()\n            onClickClear()\n          }\n          break\n        }\n      }\n    },\n    [onClickNext, onClickPrev, onClickClear, query],\n  )\n\n  return (\n    <div className={classNames.wrapper}>\n      <div className={classNames.inputArea}>\n        <SearchInput\n          name=\"file_viewer_search\"\n          tooltipMessage={translated.searchInputTooltipMessage}\n          value={query}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          width=\"100%\"\n          suffix={\n            query !== '' ? (\n              <Text size=\"S\" aria-live=\"polite\" className=\"shr-tabular-nums\">\n                {`${displayedCurrent}/${matchCount}`}\n              </Text>\n            ) : undefined\n          }\n          className=\"[&_.smarthr-ui-Input]:shr-rounded-e-none\"\n        />\n      </div>\n      <Button\n        onClick={onClickPrev}\n        disabled={!hasMatches}\n        className=\"shr-rounded-none shr-border-s-0 shr-p-0.75 aria-disabled:!shr-border-default\"\n      >\n        <FaAngleUpIcon alt={translated.previousMatchAlt} />\n      </Button>\n      <Button\n        onClick={onClickNext}\n        disabled={!hasMatches}\n        className=\"shr-rounded-s-none shr-border-s-0 shr-p-0.75 aria-disabled:!shr-border-default\"\n      >\n        <FaAngleDownIcon alt={translated.nextMatchAlt} />\n      </Button>\n    </div>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA;AACE;AACE;AACA;AACD;AACD;AACE;AACE;AACA;AACE;AACA;AACD;AACF;AACF;AACF;AAEM;;AAUL;AACA;AACA;AACE;;AAEF;AACA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;AAIH;AACA;AAEA;AAEI;AACF;AAIF;AAEI;;;AAGA;;;AAGI;AACE;;;AAEA;;;;;AAKF;;AAEE;;;;;;AASV;AAoCF;;"}

package/lib/components/FileViewer/SearchController.d.ts

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+import type { UsePDFSearch } from './usePDFSearch';
+type Props = {
+    search: UsePDFSearch;
+};
+export declare const SearchController: FC<Props>;
+export {};

package/lib/components/FileViewer/SearchController.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useMemo, useCallback } from 'react';
+import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
+import { useEnvironment } from '../../hooks/useEnvironment/useEnvironment.js';
+import '../../themes/createSpacing.js';
+import '../../_virtual/index.js';
+import '../../_virtual/index2.js';
+import '../../themes/createColor.js';
+import '../../themes/createTextColor.js';
+import 'styled-components';
+import '../../themes/createShadow/defaultShadow.js';
+import '../../themes/createWidth.js';
+import '../../themes/createBackgroundColor.js';
+import '../../themes/createBorder.js';
+import '../../hooks/useTheme.js';
+import '../../intl/IntlProvider.js';
+import { useIntl } from '../../intl/useIntl.js';
+import '../../intl/Localizer.js';
+import '../../_virtual/dayjs.min.js';
+import '../../intl/TimeFormatter.js';
+import { Button } from '../Button/Button.js';
+import '../Button/AnchorButton.js';
+import '../Button/UnstyledButton.js';
+import { FaAngleUpIcon, FaAngleDownIcon } from '../Icon/FaIcon.js';
+import '../Icon/generateIcon.js';
+import '../Icon/OpenInNewTabIcon.js';
+import '../Input/Input.js';
+import '../Input/CurrencyInput/CurrencyInput.js';
+import { SearchInput } from '../Input/SearchInput/SearchInput.js';
+import { Text } from '../Text/Text.js';
+
+const classNameGenerator = ce({
+    slots: {
+        wrapper: 'shr-flex shr-w-full',
+        inputArea: 'shr-min-w-0 shr-grow',
+    },
+    variants: {
+        mobile: {
+            true: {},
+            false: {
+                wrapper: 'shr-justify-end',
+                inputArea: 'shr-max-w-[15em]',
+            },
+        },
+    },
+});
+const SearchController = memo(({ search }) => {
+    const { query, setQuery, matchCount, currentMatchIndex, goNext: onClickNext, goPrev: onClickPrev, clear: onClickClear, } = search;
+    const { localize } = useIntl();
+    const { mobile } = useEnvironment();
+    const classNames = useMemo(() => {
+        const { wrapper, inputArea } = classNameGenerator({ mobile });
+        return { wrapper: wrapper(), inputArea: inputArea() };
+    }, [mobile]);
+    const translated = useMemo(() => ({
+        searchInputTooltipMessage: localize({
+            id: 'smarthr-ui/FileViewer/searchInputTooltipMessage',
+            defaultText: 'PDF内のテキストを検索',
+        }),
+        previousMatchAlt: localize({
+            id: 'smarthr-ui/FileViewer/previousMatchAlt',
+            defaultText: '前の検索結果へ',
+        }),
+        nextMatchAlt: localize({
+            id: 'smarthr-ui/FileViewer/nextMatchAlt',
+            defaultText: '次の検索結果へ',
+        }),
+    }), [localize]);
+    const hasMatches = matchCount > 0;
+    const displayedCurrent = hasMatches ? currentMatchIndex + 1 : 0;
+    const handleChange = useCallback((e) => {
+        setQuery(e.target.value);
+    }, [setQuery]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.nativeEvent.isComposing) {
+            return;
+        }
+        switch (e.key) {
+            case 'Enter': {
+                e.preventDefault();
+                if (e.shiftKey) {
+                    onClickPrev();
+                }
+                else {
+                    onClickNext();
+                }
+                break;
+            }
+            case 'Escape': {
+                if (query !== '') {
+                    e.preventDefault();
+                    onClickClear();
+                }
+                break;
+            }
+        }
+    }, [onClickNext, onClickPrev, onClickClear, query]);
+    return (jsxs("div", { className: classNames.wrapper, children: [jsx("div", { className: classNames.inputArea, children: jsx(SearchInput, { name: "file_viewer_search", tooltipMessage: translated.searchInputTooltipMessage, value: query, onChange: handleChange, onKeyDown: handleKeyDown, width: "100%", suffix: query !== '' ? (jsx(Text, { size: "S", "aria-live": "polite", className: "shr-tabular-nums", children: `${displayedCurrent}/${matchCount}` })) : undefined, className: "[&_.smarthr-ui-Input]:shr-rounded-e-none" }) }), jsx(Button, { onClick: onClickPrev, disabled: !hasMatches, className: "shr-rounded-none shr-border-s-0 shr-p-0.75 aria-disabled:!shr-border-default", children: jsx(FaAngleUpIcon, { alt: translated.previousMatchAlt }) }), jsx(Button, { onClick: onClickNext, disabled: !hasMatches, className: "shr-rounded-s-none shr-border-s-0 shr-p-0.75 aria-disabled:!shr-border-default", children: jsx(FaAngleDownIcon, { alt: translated.nextMatchAlt }) })] }));
+});
+
+export { SearchController };
+//# sourceMappingURL=SearchController.js.map