smarthr-ui 96.0.1 → 96.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Icon/FaIcon.cjs +1 -1
- package/lib/components/Icon/FaIcon.js +1 -1
- package/lib/components/Icon/LanguageIcon.cjs +1 -1
- package/lib/components/Icon/LanguageIcon.js +1 -1
- package/lib/components/Icon/OpenInNewTabIcon.cjs +1 -1
- package/lib/components/Icon/OpenInNewTabIcon.js +1 -1
- package/lib/components/Icon/SparklesIcon.cjs +1 -1
- package/lib/components/Icon/SparklesIcon.js +1 -1
- package/lib/components/Icon/WarningIcon.cjs +1 -1
- package/lib/components/Icon/WarningIcon.js +1 -1
- package/lib/components/Input/InputWithTooltip/InputWithTooltip.cjs +1 -1
- package/lib/components/Input/InputWithTooltip/InputWithTooltip.cjs.map +1 -1
- package/lib/components/Input/InputWithTooltip/InputWithTooltip.js +1 -1
- package/lib/components/Input/InputWithTooltip/InputWithTooltip.js.map +1 -1
- package/lib/components/LineClamp/LineClamp.cjs +3 -5
- package/lib/components/LineClamp/LineClamp.cjs.map +1 -1
- package/lib/components/LineClamp/LineClamp.js +3 -5
- package/lib/components/LineClamp/LineClamp.js.map +1 -1
- package/lib/components/SideNav/SideNavItemButton.cjs.map +1 -1
- package/lib/components/SideNav/SideNavItemButton.d.ts +11 -10
- package/lib/components/SideNav/SideNavItemButton.js.map +1 -1
- package/lib/components/TabBar/TabItem.cjs +1 -1
- package/lib/components/TabBar/TabItem.cjs.map +1 -1
- package/lib/components/TabBar/TabItem.js +1 -1
- package/lib/components/TabBar/TabItem.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.cjs +20 -6
- package/lib/components/Tooltip/Tooltip.cjs.map +1 -1
- package/lib/components/Tooltip/Tooltip.d.ts +4 -2
- package/lib/components/Tooltip/Tooltip.js +20 -6
- package/lib/components/Tooltip/Tooltip.js.map +1 -1
- package/lib/vendor/.pnpm/{react-icons@5.5.0_react@19.2.6 → react-icons@5.6.0_react@19.2.6}/vendor/react-icons/fa6/index.cjs +404 -404
- package/lib/vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/fa6/index.cjs.map +1 -0
- package/lib/vendor/.pnpm/{react-icons@5.5.0_react@19.2.6 → react-icons@5.6.0_react@19.2.6}/vendor/react-icons/fa6/index.js +404 -404
- package/lib/vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/fa6/index.js.map +1 -0
- package/lib/vendor/.pnpm/{react-icons@5.5.0_react@19.2.6 → react-icons@5.6.0_react@19.2.6}/vendor/react-icons/lib/iconBase.cjs +4 -4
- package/lib/vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/lib/iconBase.cjs.map +1 -0
- package/lib/vendor/.pnpm/{react-icons@5.5.0_react@19.2.6 → react-icons@5.6.0_react@19.2.6}/vendor/react-icons/lib/iconBase.js +4 -4
- package/lib/vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/lib/iconBase.js.map +1 -0
- package/lib/vendor/.pnpm/{react-icons@5.5.0_react@19.2.6 → react-icons@5.6.0_react@19.2.6}/vendor/react-icons/lib/iconContext.cjs.map +1 -1
- package/lib/vendor/.pnpm/{react-icons@5.5.0_react@19.2.6 → react-icons@5.6.0_react@19.2.6}/vendor/react-icons/lib/iconContext.js.map +1 -1
- package/metadata.json +1 -1
- package/package.json +4 -4
- package/lib/vendor/.pnpm/react-icons@5.5.0_react@19.2.6/vendor/react-icons/fa6/index.cjs.map +0 -1
- package/lib/vendor/.pnpm/react-icons@5.5.0_react@19.2.6/vendor/react-icons/fa6/index.js.map +0 -1
- package/lib/vendor/.pnpm/react-icons@5.5.0_react@19.2.6/vendor/react-icons/lib/iconBase.cjs.map +0 -1
- package/lib/vendor/.pnpm/react-icons@5.5.0_react@19.2.6/vendor/react-icons/lib/iconBase.js.map +0 -1
- /package/lib/vendor/.pnpm/{react-icons@5.5.0_react@19.2.6 → react-icons@5.6.0_react@19.2.6}/vendor/react-icons/lib/iconContext.cjs +0 -0
- /package/lib/vendor/.pnpm/{react-icons@5.5.0_react@19.2.6 → react-icons@5.6.0_react@19.2.6}/vendor/react-icons/lib/iconContext.js +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./../../vendor/.pnpm/react-icons@5.
|
|
3
|
+
var index = require('./../../vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/fa6/index.cjs');
|
|
4
4
|
var components_Icon_generateIcon = require('./generateIcon.cjs');
|
|
5
5
|
|
|
6
6
|
const FaAddressBookIcon = /*#__PURE__*/ components_Icon_generateIcon.generateIcon(index.FaAddressBook);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FaMinus, FaCheck, FaCircleInfo, FaCaretDown, FaEllipsis, FaCircleExclamation, FaAngleDown, FaMagnifyingGlassMinus, FaMagnifyingGlassPlus, FaArrowRotateLeft, FaMagnifyingGlass, FaTrashCan, FaFolderOpen, FaCircleQuestion, FaArrowLeft, FaGrip, FaXmark, FaAnglesRight, FaChevronRight, FaAnglesLeft, FaChevronLeft, FaTriangleExclamation, FaSortUp, FaSortDown, FaCaretRight, FaRotate, FaCircleCheck, FaCalendarDays, FaCirclePlus, FaCircleXmark, FaToolbox, FaGlobe, FaAngleRight, FaArrowRight, FaStar, FaUser, FaGear, FaGraduationCap, FaCaretUp, FaBars, FaUserLarge, FaAddressBook, FaAddressCard, FaAngleLeft, FaAngleUp, FaArrowDown, FaArrowDownWideShort, FaArrowRightArrowLeft, FaArrowRotateRight, FaArrowUp19, FaArrowUp, FaArrowUpWideShort, FaArrowsRotate, FaAsterisk, FaAt, FaBabyCarriage, FaBan, FaBarsStaggered, FaBell, FaBellSlash, FaBolt, FaBook, FaBookOpen, FaBookmark, FaBoxArchive, FaBuilding, FaBullhorn, FaCakeCandles, FaCalculator, FaCalendarCheck, FaCalendarXmark, FaCamera, FaCaretLeft, FaChartArea, FaChartBar, FaChartColumn, FaChartLine, FaChartPie, FaChevronDown, FaCircleDot, FaCircle, FaCircleMinus, FaCirclePlay, FaCircleUser, FaClipboardCheck, FaClipboard, FaClipboardList, FaClipboardQuestion, FaClock, FaClockRotateLeft, FaCloudArrowDown, FaCloudArrowUp, FaCode, FaCommentDots, FaComment, FaComments, FaCompress, FaCopy, FaCube, FaCubes, FaDatabase, FaDoorOpen, FaDownLeftAndUpRightToCenter, FaEllipsisVertical, FaEnvelope, FaEnvelopeOpen, FaExpand, FaEye, FaEyeSlash, FaFileArrowDown, FaFileCirclePlus, FaFileCode, FaFileCsv, FaFileExcel, FaFileExport, FaFile, FaFileLines, FaFilePdf, FaFilePowerpoint, FaFileWord, FaFilter, FaFloppyDisk, FaFolder, FaFolderPlus, FaFont, FaGauge, FaGears, FaGripLines, FaGripLinesVertical, FaGripVertical, FaHourglassHalf, FaHouse, FaIdBadge, FaIdCard, FaImage, FaImages, FaInbox, FaIntercom, FaKey, FaLeftLong, FaLeftRight, FaLightbulb, FaLink, FaLinkSlash, FaList, FaListOl, FaListUl, FaLocationDot, FaLock, FaLockOpen, FaMessage, FaMicrosoft, FaMoneyCheckDollar, FaMugHot, FaPaintbrush, FaPaperPlane, FaPaperclip, FaPen, FaPenToSquare, FaPencil, FaPersonWalkingArrowLoopLeft, FaPiggyBank, FaPlus, FaPowerOff, FaPrint, FaRegCircleQuestion, FaRegLightbulb, FaReply, FaRightFromBracket, FaRightLeft, FaRightLong, FaRightToBracket, FaRobot, FaRocket, FaRotateLeft, FaShareNodes, FaShieldHalved, FaSliders, FaSort, FaSquareCheck, FaSquareMinus, FaSquarePlus, FaSquarePollVertical, FaSuitcaseMedical, FaTableColumns, FaTable, FaTableList, FaTag, FaTags, FaThumbtack, FaTruck, FaTruckRampBox, FaUpDown, FaUpRightAndDownLeftFromCenter, FaUserCheck, FaUserClock, FaUserPen, FaUserPlus, FaUsers, FaWindowMaximize, FaWindowMinimize, FaWindowRestore, FaYenSign } from './../../vendor/.pnpm/react-icons@5.
|
|
1
|
+
import { FaMinus, FaCheck, FaCircleInfo, FaCaretDown, FaEllipsis, FaCircleExclamation, FaAngleDown, FaMagnifyingGlassMinus, FaMagnifyingGlassPlus, FaArrowRotateLeft, FaMagnifyingGlass, FaTrashCan, FaFolderOpen, FaCircleQuestion, FaArrowLeft, FaGrip, FaXmark, FaAnglesRight, FaChevronRight, FaAnglesLeft, FaChevronLeft, FaTriangleExclamation, FaSortUp, FaSortDown, FaCaretRight, FaRotate, FaCircleCheck, FaCalendarDays, FaCirclePlus, FaCircleXmark, FaToolbox, FaGlobe, FaAngleRight, FaArrowRight, FaStar, FaUser, FaGear, FaGraduationCap, FaCaretUp, FaBars, FaUserLarge, FaAddressBook, FaAddressCard, FaAngleLeft, FaAngleUp, FaArrowDown, FaArrowDownWideShort, FaArrowRightArrowLeft, FaArrowRotateRight, FaArrowUp19, FaArrowUp, FaArrowUpWideShort, FaArrowsRotate, FaAsterisk, FaAt, FaBabyCarriage, FaBan, FaBarsStaggered, FaBell, FaBellSlash, FaBolt, FaBook, FaBookOpen, FaBookmark, FaBoxArchive, FaBuilding, FaBullhorn, FaCakeCandles, FaCalculator, FaCalendarCheck, FaCalendarXmark, FaCamera, FaCaretLeft, FaChartArea, FaChartBar, FaChartColumn, FaChartLine, FaChartPie, FaChevronDown, FaCircleDot, FaCircle, FaCircleMinus, FaCirclePlay, FaCircleUser, FaClipboardCheck, FaClipboard, FaClipboardList, FaClipboardQuestion, FaClock, FaClockRotateLeft, FaCloudArrowDown, FaCloudArrowUp, FaCode, FaCommentDots, FaComment, FaComments, FaCompress, FaCopy, FaCube, FaCubes, FaDatabase, FaDoorOpen, FaDownLeftAndUpRightToCenter, FaEllipsisVertical, FaEnvelope, FaEnvelopeOpen, FaExpand, FaEye, FaEyeSlash, FaFileArrowDown, FaFileCirclePlus, FaFileCode, FaFileCsv, FaFileExcel, FaFileExport, FaFile, FaFileLines, FaFilePdf, FaFilePowerpoint, FaFileWord, FaFilter, FaFloppyDisk, FaFolder, FaFolderPlus, FaFont, FaGauge, FaGears, FaGripLines, FaGripLinesVertical, FaGripVertical, FaHourglassHalf, FaHouse, FaIdBadge, FaIdCard, FaImage, FaImages, FaInbox, FaIntercom, FaKey, FaLeftLong, FaLeftRight, FaLightbulb, FaLink, FaLinkSlash, FaList, FaListOl, FaListUl, FaLocationDot, FaLock, FaLockOpen, FaMessage, FaMicrosoft, FaMoneyCheckDollar, FaMugHot, FaPaintbrush, FaPaperPlane, FaPaperclip, FaPen, FaPenToSquare, FaPencil, FaPersonWalkingArrowLoopLeft, FaPiggyBank, FaPlus, FaPowerOff, FaPrint, FaRegCircleQuestion, FaRegLightbulb, FaReply, FaRightFromBracket, FaRightLeft, FaRightLong, FaRightToBracket, FaRobot, FaRocket, FaRotateLeft, FaShareNodes, FaShieldHalved, FaSliders, FaSort, FaSquareCheck, FaSquareMinus, FaSquarePlus, FaSquarePollVertical, FaSuitcaseMedical, FaTableColumns, FaTable, FaTableList, FaTag, FaTags, FaThumbtack, FaTruck, FaTruckRampBox, FaUpDown, FaUpRightAndDownLeftFromCenter, FaUserCheck, FaUserClock, FaUserPen, FaUserPlus, FaUsers, FaWindowMaximize, FaWindowMinimize, FaWindowRestore, FaYenSign } from './../../vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/fa6/index.js';
|
|
2
2
|
import { generateIcon } from './generateIcon.js';
|
|
3
3
|
|
|
4
4
|
const FaAddressBookIcon = /*#__PURE__*/ generateIcon(FaAddressBook);
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var components_Icon_generateIcon = require('./generateIcon.cjs');
|
|
5
|
-
var iconBase = require('./../../vendor/.pnpm/react-icons@5.
|
|
5
|
+
var iconBase = require('./../../vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/lib/iconBase.cjs');
|
|
6
6
|
|
|
7
7
|
const LanguageIcon = /*#__PURE__*/ components_Icon_generateIcon.generateIcon((props) => (jsxRuntime.jsx(iconBase.IconBase, { ...props, viewBox: "0 0 16 16", children: jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M14.5 8c0 .606-.083 1.193-.238 1.75h-2.206c.066-.563.1-1.149.1-1.75s-.034-1.187-.1-1.75h2.206c.155.557.238 1.144.238 1.75Zm-3.955-1.75c.072.554.111 1.14.111 1.75 0 .61-.04 1.196-.111 1.75H5.424A13.58 13.58 0 0 1 5.312 8c0-.61.04-1.196.112-1.75h5.12Zm1.253-1.5h1.832a6.529 6.529 0 0 0-2.802-2.604c.408.729.74 1.613.97 2.604ZM7.988 1.5c.312.002.959.276 1.616 1.537.253.485.475 1.063.648 1.713H5.717c.173-.65.394-1.228.647-1.713.656-1.258 1.3-1.533 1.614-1.537h.01ZM7.968 0a8 8 0 0 0 0 16H8a8 8 0 1 0-.033-16Zm2.86 13.854a6.528 6.528 0 0 0 2.802-2.604h-1.832c-.23.99-.562 1.875-.97 2.604Zm-.576-2.604H5.717c.173.65.394 1.228.647 1.713.656 1.258 1.3 1.533 1.614 1.537h.01c.312-.002.959-.275 1.616-1.537a8.418 8.418 0 0 0 .648-1.713Zm-5.123 2.583c-.402-.725-.73-1.602-.958-2.583H2.37a6.53 6.53 0 0 0 2.76 2.583ZM3.913 9.75H1.738A6.506 6.506 0 0 1 1.5 8c0-.606.083-1.193.238-1.75h2.175a15.158 15.158 0 0 0 0 3.5Zm.258-5H2.37a6.53 6.53 0 0 1 2.76-2.583c-.403.725-.731 1.602-.959 2.583Z" }) })));
|
|
8
8
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { generateIcon } from './generateIcon.js';
|
|
3
|
-
import { IconBase } from './../../vendor/.pnpm/react-icons@5.
|
|
3
|
+
import { IconBase } from './../../vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/lib/iconBase.js';
|
|
4
4
|
|
|
5
5
|
const LanguageIcon = /*#__PURE__*/ generateIcon((props) => (jsx(IconBase, { ...props, viewBox: "0 0 16 16", children: jsx("path", { fillRule: "evenodd", d: "M14.5 8c0 .606-.083 1.193-.238 1.75h-2.206c.066-.563.1-1.149.1-1.75s-.034-1.187-.1-1.75h2.206c.155.557.238 1.144.238 1.75Zm-3.955-1.75c.072.554.111 1.14.111 1.75 0 .61-.04 1.196-.111 1.75H5.424A13.58 13.58 0 0 1 5.312 8c0-.61.04-1.196.112-1.75h5.12Zm1.253-1.5h1.832a6.529 6.529 0 0 0-2.802-2.604c.408.729.74 1.613.97 2.604ZM7.988 1.5c.312.002.959.276 1.616 1.537.253.485.475 1.063.648 1.713H5.717c.173-.65.394-1.228.647-1.713.656-1.258 1.3-1.533 1.614-1.537h.01ZM7.968 0a8 8 0 0 0 0 16H8a8 8 0 1 0-.033-16Zm2.86 13.854a6.528 6.528 0 0 0 2.802-2.604h-1.832c-.23.99-.562 1.875-.97 2.604Zm-.576-2.604H5.717c.173.65.394 1.228.647 1.713.656 1.258 1.3 1.533 1.614 1.537h.01c.312-.002.959-.275 1.616-1.537a8.418 8.418 0 0 0 .648-1.713Zm-5.123 2.583c-.402-.725-.73-1.602-.958-2.583H2.37a6.53 6.53 0 0 0 2.76 2.583ZM3.913 9.75H1.738A6.506 6.506 0 0 1 1.5 8c0-.606.083-1.193.238-1.75h2.175a15.158 15.158 0 0 0 0 3.5Zm.258-5H2.37a6.53 6.53 0 0 1 2.76-2.583c-.403.725-.731 1.602-.959 2.583Z" }) })));
|
|
6
6
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var index = require('./../../vendor/.pnpm/react-icons@5.
|
|
6
|
+
var index = require('./../../vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/fa6/index.cjs');
|
|
7
7
|
require('../../intl/IntlProvider.cjs');
|
|
8
8
|
var intl_useIntl = require('../../intl/useIntl.cjs');
|
|
9
9
|
require('react-intl');
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { memo } from 'react';
|
|
4
|
-
import { FaUpRightFromSquare } from './../../vendor/.pnpm/react-icons@5.
|
|
4
|
+
import { FaUpRightFromSquare } from './../../vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/fa6/index.js';
|
|
5
5
|
import '../../intl/IntlProvider.js';
|
|
6
6
|
import { useIntl } from '../../intl/useIntl.js';
|
|
7
7
|
import 'react-intl';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var components_Icon_generateIcon = require('./generateIcon.cjs');
|
|
5
|
-
var iconBase = require('./../../vendor/.pnpm/react-icons@5.
|
|
5
|
+
var iconBase = require('./../../vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/lib/iconBase.cjs');
|
|
6
6
|
|
|
7
7
|
const SparklesIcon = /*#__PURE__*/ components_Icon_generateIcon.generateIcon((props) => (jsxRuntime.jsx(iconBase.IconBase, { ...props, viewBox: "0 0 16 16", children: jsxRuntime.jsx("path", { d: "M.373 8.616c-.497-.188-.497-.906 0-1.094l3.31-1.25a.578.578 0 0 0 .338-.345l1.225-3.38a.567.567 0 0 1 1.072 0l1.225 3.38c.058.16.181.285.337.345l3.31 1.25c.498.188.498.906 0 1.094l-3.31 1.25a.577.577 0 0 0-.337.345l-1.225 3.38a.567.567 0 0 1-1.072 0l-1.225-3.38a.577.577 0 0 0-.337-.344l-3.31-1.25ZM10.396 13.412c-.147-.056-.147-.269 0-.324l.982-.371a.17.17 0 0 0 .1-.102l.363-1.002a.168.168 0 0 1 .318 0l.363 1.002a.17.17 0 0 0 .1.102l.982.37c.147.056.147.27 0 .325l-.982.371a.17.17 0 0 0-.1.102l-.363 1.002a.168.168 0 0 1-.318 0l-.363-1.002a.17.17 0 0 0-.1-.102l-.982-.37ZM10.47 4.187c-.246-.093-.246-.448 0-.54l1.636-.619a.285.285 0 0 0 .167-.17l.605-1.67a.28.28 0 0 1 .53 0l.605 1.67c.029.079.09.141.167.17l1.636.618c.245.093.245.448 0 .541l-1.636.618a.285.285 0 0 0-.167.17l-.605 1.67a.28.28 0 0 1-.53 0l-.605-1.67a.285.285 0 0 0-.167-.17l-1.636-.618Z" }) })));
|
|
8
8
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { generateIcon } from './generateIcon.js';
|
|
3
|
-
import { IconBase } from './../../vendor/.pnpm/react-icons@5.
|
|
3
|
+
import { IconBase } from './../../vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/lib/iconBase.js';
|
|
4
4
|
|
|
5
5
|
const SparklesIcon = /*#__PURE__*/ generateIcon((props) => (jsx(IconBase, { ...props, viewBox: "0 0 16 16", children: jsx("path", { d: "M.373 8.616c-.497-.188-.497-.906 0-1.094l3.31-1.25a.578.578 0 0 0 .338-.345l1.225-3.38a.567.567 0 0 1 1.072 0l1.225 3.38c.058.16.181.285.337.345l3.31 1.25c.498.188.498.906 0 1.094l-3.31 1.25a.577.577 0 0 0-.337.345l-1.225 3.38a.567.567 0 0 1-1.072 0l-1.225-3.38a.577.577 0 0 0-.337-.344l-3.31-1.25ZM10.396 13.412c-.147-.056-.147-.269 0-.324l.982-.371a.17.17 0 0 0 .1-.102l.363-1.002a.168.168 0 0 1 .318 0l.363 1.002a.17.17 0 0 0 .1.102l.982.37c.147.056.147.27 0 .325l-.982.371a.17.17 0 0 0-.1.102l-.363 1.002a.168.168 0 0 1-.318 0l-.363-1.002a.17.17 0 0 0-.1-.102l-.982-.37ZM10.47 4.187c-.246-.093-.246-.448 0-.54l1.636-.619a.285.285 0 0 0 .167-.17l.605-1.67a.28.28 0 0 1 .53 0l.605 1.67c.029.079.09.141.167.17l1.636.618c.245.093.245.448 0 .541l-1.636.618a.285.285 0 0 0-.167.17l-.605 1.67a.28.28 0 0 1-.53 0l-.605-1.67a.285.285 0 0 0-.167-.17l-1.636-.618Z" }) })));
|
|
6
6
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var components_Icon_generateIcon = require('./generateIcon.cjs');
|
|
5
|
-
var iconBase = require('./../../vendor/.pnpm/react-icons@5.
|
|
5
|
+
var iconBase = require('./../../vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/lib/iconBase.cjs');
|
|
6
6
|
|
|
7
7
|
const WarningIcon = /*#__PURE__*/ components_Icon_generateIcon.generateIcon((props) => (jsxRuntime.jsxs(iconBase.IconBase, { ...props, viewBox: "0 0 16 16", children: [jsxRuntime.jsx("path", { d: "m8.863 1.745 6.75 11.5a.998.998 0 0 1-.862 1.505H1.25c-.358 0-.69-.193-.868-.502a1.005 1.005 0 0 1 .005-1.003l6.75-11.5a.998.998 0 0 1 1.725 0Z", className: "smarthr-ui-WarningIcon-wrapper shr-fill-warning-yellow shr-stroke-black shr-stroke-0.5" }), jsxRuntime.jsx("path", { className: "smarthr-ui-WarningIcon-mark shr-fill-black", d: "M8 5a.748.748 0 0 0-.75.75v3.5c0 .416.334.75.75.75s.75-.334.75-.75v-3.5A.748.748 0 0 0 8 5Zm1 7a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z" })] })));
|
|
8
8
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { generateIcon } from './generateIcon.js';
|
|
3
|
-
import { IconBase } from './../../vendor/.pnpm/react-icons@5.
|
|
3
|
+
import { IconBase } from './../../vendor/.pnpm/react-icons@5.6.0_react@19.2.6/vendor/react-icons/lib/iconBase.js';
|
|
4
4
|
|
|
5
5
|
const WarningIcon = /*#__PURE__*/ generateIcon((props) => (jsxs(IconBase, { ...props, viewBox: "0 0 16 16", children: [jsx("path", { d: "m8.863 1.745 6.75 11.5a.998.998 0 0 1-.862 1.505H1.25c-.358 0-.69-.193-.868-.502a1.005 1.005 0 0 1 .005-1.003l6.75-11.5a.998.998 0 0 1 1.725 0Z", className: "smarthr-ui-WarningIcon-wrapper shr-fill-warning-yellow shr-stroke-black shr-stroke-0.5" }), jsx("path", { className: "smarthr-ui-WarningIcon-mark shr-fill-black", d: "M8 5a.748.748 0 0 0-.75.75v3.5c0 .416.334.75.75.75s.75-.334.75-.75v-3.5A.748.748 0 0 0 8 5Zm1 7a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z" })] })));
|
|
6
6
|
|
|
@@ -17,7 +17,7 @@ const InputWithTooltip = React.forwardRef(({ tooltipMessage, width, className, .
|
|
|
17
17
|
const actualClassName = React.useMemo(() => classNameGenerator({ className }), [className]);
|
|
18
18
|
return (
|
|
19
19
|
// eslint-disable-next-line smarthr/a11y-scroller-has-tabindex
|
|
20
|
-
jsxRuntime.jsx(components_Tooltip_Tooltip.Tooltip, { message: tooltipMessage, tabIndex: -1,
|
|
20
|
+
jsxRuntime.jsx(components_Tooltip_Tooltip.Tooltip, { message: tooltipMessage, tabIndex: -1, className: actualClassName, style: style, children: jsxRuntime.jsx(components_Input_Input.Input, { ...rest, ref: ref, width: style.width }) }));
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.InputWithTooltip = InputWithTooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputWithTooltip.cjs","sources":["../../../../src/components/Input/InputWithTooltip/InputWithTooltip.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, forwardRef, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Tooltip } from '../../Tooltip'\nimport { Input } from '../Input'\n\ntype Props = ComponentProps<typeof Input> & {\n /** 入力欄に紐付けるツールチップに表示するメッセージ */\n tooltipMessage: ReactNode\n}\n\nconst classNameGenerator = tv({\n base: 'smarthr-ui-InputWithTooltip [&]:shr-overflow-y-visible',\n})\n\nexport const InputWithTooltip = forwardRef<HTMLInputElement, Props>(\n ({ tooltipMessage, width, className, ...rest }, ref) => {\n const style = useMemo(\n () => ({\n width: typeof width === 'number' ? `${width}px` : width,\n }),\n [width],\n )\n\n const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n return (\n // eslint-disable-next-line smarthr/a11y-scroller-has-tabindex\n <Tooltip
|
|
1
|
+
{"version":3,"file":"InputWithTooltip.cjs","sources":["../../../../src/components/Input/InputWithTooltip/InputWithTooltip.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, forwardRef, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Tooltip } from '../../Tooltip'\nimport { Input } from '../Input'\n\ntype Props = ComponentProps<typeof Input> & {\n /** 入力欄に紐付けるツールチップに表示するメッセージ */\n tooltipMessage: ReactNode\n}\n\nconst classNameGenerator = tv({\n base: 'smarthr-ui-InputWithTooltip [&]:shr-overflow-y-visible',\n})\n\nexport const InputWithTooltip = forwardRef<HTMLInputElement, Props>(\n ({ tooltipMessage, width, className, ...rest }, ref) => {\n const style = useMemo(\n () => ({\n width: typeof width === 'number' ? `${width}px` : width,\n }),\n [width],\n )\n\n const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n return (\n // eslint-disable-next-line smarthr/a11y-scroller-has-tabindex\n <Tooltip message={tooltipMessage} tabIndex={-1} className={actualClassName} style={style}>\n {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}\n <Input {...rest} ref={ref} width={style.width} />\n </Tooltip>\n )\n },\n)\n"],"names":["tv","forwardRef","useMemo","_jsx","Tooltip","Input"],"mappings":";;;;;;;;;AAWA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,wDAAwD;AAC/D,CAAA,CAAC;MAEW,gBAAgB,GAAGC,gBAAU,CACxC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;AACrD,IAAA,MAAM,KAAK,GAAGC,aAAO,CACnB,OAAO;AACL,QAAA,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,GAAG,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI,GAAG,KAAK;AACxD,KAAA,CAAC,EACF,CAAC,KAAK,CAAC,CACR;AAED,IAAA,MAAM,eAAe,GAAGA,aAAO,CAAC,MAAM,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAErF;;AAEE,IAAAC,cAAA,CAACC,kCAAO,EAAA,EAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAA,QAAA,EAEtFD,cAAA,CAACE,4BAAK,EAAA,EAAA,GAAK,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAA,CAAI,EAAA,CACzC;AAEd,CAAC;;;;"}
|
|
@@ -15,7 +15,7 @@ const InputWithTooltip = forwardRef(({ tooltipMessage, width, className, ...rest
|
|
|
15
15
|
const actualClassName = useMemo(() => classNameGenerator({ className }), [className]);
|
|
16
16
|
return (
|
|
17
17
|
// eslint-disable-next-line smarthr/a11y-scroller-has-tabindex
|
|
18
|
-
jsx(Tooltip, { message: tooltipMessage, tabIndex: -1,
|
|
18
|
+
jsx(Tooltip, { message: tooltipMessage, tabIndex: -1, className: actualClassName, style: style, children: jsx(Input, { ...rest, ref: ref, width: style.width }) }));
|
|
19
19
|
});
|
|
20
20
|
|
|
21
21
|
export { InputWithTooltip };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputWithTooltip.js","sources":["../../../../src/components/Input/InputWithTooltip/InputWithTooltip.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, forwardRef, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Tooltip } from '../../Tooltip'\nimport { Input } from '../Input'\n\ntype Props = ComponentProps<typeof Input> & {\n /** 入力欄に紐付けるツールチップに表示するメッセージ */\n tooltipMessage: ReactNode\n}\n\nconst classNameGenerator = tv({\n base: 'smarthr-ui-InputWithTooltip [&]:shr-overflow-y-visible',\n})\n\nexport const InputWithTooltip = forwardRef<HTMLInputElement, Props>(\n ({ tooltipMessage, width, className, ...rest }, ref) => {\n const style = useMemo(\n () => ({\n width: typeof width === 'number' ? `${width}px` : width,\n }),\n [width],\n )\n\n const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n return (\n // eslint-disable-next-line smarthr/a11y-scroller-has-tabindex\n <Tooltip
|
|
1
|
+
{"version":3,"file":"InputWithTooltip.js","sources":["../../../../src/components/Input/InputWithTooltip/InputWithTooltip.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, forwardRef, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Tooltip } from '../../Tooltip'\nimport { Input } from '../Input'\n\ntype Props = ComponentProps<typeof Input> & {\n /** 入力欄に紐付けるツールチップに表示するメッセージ */\n tooltipMessage: ReactNode\n}\n\nconst classNameGenerator = tv({\n base: 'smarthr-ui-InputWithTooltip [&]:shr-overflow-y-visible',\n})\n\nexport const InputWithTooltip = forwardRef<HTMLInputElement, Props>(\n ({ tooltipMessage, width, className, ...rest }, ref) => {\n const style = useMemo(\n () => ({\n width: typeof width === 'number' ? `${width}px` : width,\n }),\n [width],\n )\n\n const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n return (\n // eslint-disable-next-line smarthr/a11y-scroller-has-tabindex\n <Tooltip message={tooltipMessage} tabIndex={-1} className={actualClassName} style={style}>\n {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}\n <Input {...rest} ref={ref} width={style.width} />\n </Tooltip>\n )\n },\n)\n"],"names":["tv","_jsx"],"mappings":";;;;;;;AAWA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,wDAAwD;AAC/D,CAAA,CAAC;MAEW,gBAAgB,GAAG,UAAU,CACxC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;AACrD,IAAA,MAAM,KAAK,GAAG,OAAO,CACnB,OAAO;AACL,QAAA,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,GAAG,CAAA,EAAG,KAAK,CAAA,EAAA,CAAI,GAAG,KAAK;AACxD,KAAA,CAAC,EACF,CAAC,KAAK,CAAC,CACR;AAED,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAErF;;AAEE,IAAAC,GAAA,CAAC,OAAO,EAAA,EAAC,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAA,QAAA,EAEtFA,GAAA,CAAC,KAAK,EAAA,EAAA,GAAK,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAA,CAAI,EAAA,CACzC;AAEd,CAAC;;;;"}
|
|
@@ -11,8 +11,8 @@ const classNameGenerator = index.tv({
|
|
|
11
11
|
slots: {
|
|
12
12
|
base: 'smarthr-ui-LineClamp shr-relative',
|
|
13
13
|
clampedLine: 'shr-max-w-full',
|
|
14
|
-
shadowElementWrapper: 'shr-invisible shr-absolute shr-left-0 shr-top-0 shr-h-full shr-
|
|
15
|
-
shadowElement: 'shr-absolute shr-left-0 shr-top-0 shr-
|
|
14
|
+
shadowElementWrapper: 'shr-invisible shr-absolute shr-left-0 shr-top-0 shr-h-full shr-w-full shr-overflow-hidden shr-whitespace-normal shr-opacity-0',
|
|
15
|
+
shadowElement: 'shr-absolute shr-left-0 shr-top-0 shr-w-full',
|
|
16
16
|
},
|
|
17
17
|
variants: {
|
|
18
18
|
maxLines: {
|
|
@@ -59,9 +59,7 @@ const LineClamp = ({ maxLines = 3, children, className, ...rest }) => {
|
|
|
59
59
|
// -webkit-line-clamp を使った要素ではel.scrollHeightとel.clientHeightの比較だと
|
|
60
60
|
// フォントの高さの計算が期待と異なり適切な高さが取得できないためshadowElと比較している
|
|
61
61
|
// 参考: https://github.com/kufu/smarthr-ui/pull/4710
|
|
62
|
-
const isMultiLineOverflow = el && shadowEl
|
|
63
|
-
? shadowEl.clientWidth > el.clientWidth || shadowEl.clientHeight > el.clientHeight
|
|
64
|
-
: false;
|
|
62
|
+
const isMultiLineOverflow = el && shadowEl ? shadowEl.clientHeight > el.clientHeight : false;
|
|
65
63
|
setTooltipVisible(isMultiLineOverflow);
|
|
66
64
|
}, [maxLines, children]);
|
|
67
65
|
const classNames = React.useMemo(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LineClamp.cjs","sources":["../../../src/components/LineClamp/LineClamp.tsx"],"sourcesContent":["'use client'\n\nimport {\n type ComponentPropsWithRef,\n type FC,\n type PropsWithChildren,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { Tooltip } from '../Tooltip'\n\ntype AbstractProps = PropsWithChildren<VariantProps<typeof classNameGenerator>>\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'span'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n slots: {\n base: 'smarthr-ui-LineClamp shr-relative',\n clampedLine: 'shr-max-w-full',\n shadowElementWrapper:\n 'shr-invisible shr-absolute shr-left-0 shr-top-0 shr-h-full shr-
|
|
1
|
+
{"version":3,"file":"LineClamp.cjs","sources":["../../../src/components/LineClamp/LineClamp.tsx"],"sourcesContent":["'use client'\n\nimport {\n type ComponentPropsWithRef,\n type FC,\n type PropsWithChildren,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { Tooltip } from '../Tooltip'\n\ntype AbstractProps = PropsWithChildren<VariantProps<typeof classNameGenerator>>\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'span'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n slots: {\n base: 'smarthr-ui-LineClamp shr-relative',\n clampedLine: 'shr-max-w-full',\n shadowElementWrapper:\n 'shr-invisible shr-absolute shr-left-0 shr-top-0 shr-h-full shr-w-full shr-overflow-hidden shr-whitespace-normal shr-opacity-0',\n shadowElement: 'shr-absolute shr-left-0 shr-top-0 shr-w-full',\n },\n variants: {\n maxLines: {\n 1: {\n clampedLine:\n 'shr-inline-block shr-max-w-full shr-overflow-x-clip shr-overflow-ellipsis shr-whitespace-nowrap shr-align-middle',\n },\n 2: {\n clampedLine: 'shr-line-clamp-[2]',\n },\n 3: {\n clampedLine: 'shr-line-clamp-[3]',\n },\n 4: {\n clampedLine: 'shr-line-clamp-[4]',\n },\n 5: {\n clampedLine: 'shr-line-clamp-[5]',\n },\n 6: {\n clampedLine: 'shr-line-clamp-[6]',\n },\n },\n },\n compoundVariants: [\n {\n maxLines: [2, 3, 4, 5, 6],\n className: {\n // baseがdisplay:-webkit-boxでないと高さ取得用の要素が表示部分と同じ大きさで表示されないバグを回避するため\n base: '[display:-webkit-box]',\n },\n },\n ],\n})\n\nexport const LineClamp: FC<Props> = ({ maxLines = 3, children, className, ...rest }) => {\n if (maxLines < 1 || maxLines > 6) {\n throw new Error('\"maxLines\" は 1 ~ 6 の範囲で指定してください')\n }\n\n const [isTooltipVisible, setTooltipVisible] = useState(false)\n const ref = useRef<HTMLSpanElement>(null)\n const shadowRef = useRef<HTMLSpanElement>(null)\n\n useEffect(() => {\n const el = ref.current\n const shadowEl = shadowRef.current\n\n // -webkit-line-clamp を使った要素ではel.scrollHeightとel.clientHeightの比較だと\n // フォントの高さの計算が期待と異なり適切な高さが取得できないためshadowElと比較している\n // 参考: https://github.com/kufu/smarthr-ui/pull/4710\n const isMultiLineOverflow = el && shadowEl ? shadowEl.clientHeight > el.clientHeight : false\n\n setTooltipVisible(isMultiLineOverflow)\n }, [maxLines, children])\n\n const classNames = useMemo(() => {\n const { base, clampedLine, shadowElementWrapper, shadowElement } = classNameGenerator({\n maxLines,\n })\n\n return {\n base: base({ className }),\n clampedLine: clampedLine(),\n shadowElementWrapper: shadowElementWrapper(),\n shadowElement: shadowElement(),\n }\n }, [maxLines, className])\n\n const actualLineClamp = (\n <span {...rest} className={classNames.base}>\n <span ref={ref} className={classNames.clampedLine}>\n {children}\n </span>\n {/* 切り取られていないテキストの高さを取得するための要素 */}\n <span aria-hidden className={classNames.shadowElementWrapper}>\n <span className={classNames.shadowElement} ref={shadowRef}>\n {children}\n </span>\n </span>\n </span>\n )\n\n return isTooltipVisible ? (\n <Tooltip message={children}>{actualLineClamp}</Tooltip>\n ) : (\n actualLineClamp\n )\n}\n"],"names":[],"mappings":";;;;;;;;;AAkBA;AACE;AACE;AACA;AACA;AAEA;AACD;AACD;AACE;AACE;AACE;AAED;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACF;AACF;AACD;AACE;;AAEE;;AAEE;AACD;AACF;AACF;AACF;AAEM;;AAEH;;;AAIF;AACA;;AAGE;AACA;;;;AAKA;;AAGF;AAEA;;;AAGG;;AAGC;;;;;AAKJ;;;AAqBF;;"}
|
|
@@ -9,8 +9,8 @@ const classNameGenerator = ce({
|
|
|
9
9
|
slots: {
|
|
10
10
|
base: 'smarthr-ui-LineClamp shr-relative',
|
|
11
11
|
clampedLine: 'shr-max-w-full',
|
|
12
|
-
shadowElementWrapper: 'shr-invisible shr-absolute shr-left-0 shr-top-0 shr-h-full shr-
|
|
13
|
-
shadowElement: 'shr-absolute shr-left-0 shr-top-0 shr-
|
|
12
|
+
shadowElementWrapper: 'shr-invisible shr-absolute shr-left-0 shr-top-0 shr-h-full shr-w-full shr-overflow-hidden shr-whitespace-normal shr-opacity-0',
|
|
13
|
+
shadowElement: 'shr-absolute shr-left-0 shr-top-0 shr-w-full',
|
|
14
14
|
},
|
|
15
15
|
variants: {
|
|
16
16
|
maxLines: {
|
|
@@ -57,9 +57,7 @@ const LineClamp = ({ maxLines = 3, children, className, ...rest }) => {
|
|
|
57
57
|
// -webkit-line-clamp を使った要素ではel.scrollHeightとel.clientHeightの比較だと
|
|
58
58
|
// フォントの高さの計算が期待と異なり適切な高さが取得できないためshadowElと比較している
|
|
59
59
|
// 参考: https://github.com/kufu/smarthr-ui/pull/4710
|
|
60
|
-
const isMultiLineOverflow = el && shadowEl
|
|
61
|
-
? shadowEl.clientWidth > el.clientWidth || shadowEl.clientHeight > el.clientHeight
|
|
62
|
-
: false;
|
|
60
|
+
const isMultiLineOverflow = el && shadowEl ? shadowEl.clientHeight > el.clientHeight : false;
|
|
63
61
|
setTooltipVisible(isMultiLineOverflow);
|
|
64
62
|
}, [maxLines, children]);
|
|
65
63
|
const classNames = useMemo(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LineClamp.js","sources":["../../../src/components/LineClamp/LineClamp.tsx"],"sourcesContent":["'use client'\n\nimport {\n type ComponentPropsWithRef,\n type FC,\n type PropsWithChildren,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { Tooltip } from '../Tooltip'\n\ntype AbstractProps = PropsWithChildren<VariantProps<typeof classNameGenerator>>\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'span'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n slots: {\n base: 'smarthr-ui-LineClamp shr-relative',\n clampedLine: 'shr-max-w-full',\n shadowElementWrapper:\n 'shr-invisible shr-absolute shr-left-0 shr-top-0 shr-h-full shr-
|
|
1
|
+
{"version":3,"file":"LineClamp.js","sources":["../../../src/components/LineClamp/LineClamp.tsx"],"sourcesContent":["'use client'\n\nimport {\n type ComponentPropsWithRef,\n type FC,\n type PropsWithChildren,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { Tooltip } from '../Tooltip'\n\ntype AbstractProps = PropsWithChildren<VariantProps<typeof classNameGenerator>>\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'span'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n slots: {\n base: 'smarthr-ui-LineClamp shr-relative',\n clampedLine: 'shr-max-w-full',\n shadowElementWrapper:\n 'shr-invisible shr-absolute shr-left-0 shr-top-0 shr-h-full shr-w-full shr-overflow-hidden shr-whitespace-normal shr-opacity-0',\n shadowElement: 'shr-absolute shr-left-0 shr-top-0 shr-w-full',\n },\n variants: {\n maxLines: {\n 1: {\n clampedLine:\n 'shr-inline-block shr-max-w-full shr-overflow-x-clip shr-overflow-ellipsis shr-whitespace-nowrap shr-align-middle',\n },\n 2: {\n clampedLine: 'shr-line-clamp-[2]',\n },\n 3: {\n clampedLine: 'shr-line-clamp-[3]',\n },\n 4: {\n clampedLine: 'shr-line-clamp-[4]',\n },\n 5: {\n clampedLine: 'shr-line-clamp-[5]',\n },\n 6: {\n clampedLine: 'shr-line-clamp-[6]',\n },\n },\n },\n compoundVariants: [\n {\n maxLines: [2, 3, 4, 5, 6],\n className: {\n // baseがdisplay:-webkit-boxでないと高さ取得用の要素が表示部分と同じ大きさで表示されないバグを回避するため\n base: '[display:-webkit-box]',\n },\n },\n ],\n})\n\nexport const LineClamp: FC<Props> = ({ maxLines = 3, children, className, ...rest }) => {\n if (maxLines < 1 || maxLines > 6) {\n throw new Error('\"maxLines\" は 1 ~ 6 の範囲で指定してください')\n }\n\n const [isTooltipVisible, setTooltipVisible] = useState(false)\n const ref = useRef<HTMLSpanElement>(null)\n const shadowRef = useRef<HTMLSpanElement>(null)\n\n useEffect(() => {\n const el = ref.current\n const shadowEl = shadowRef.current\n\n // -webkit-line-clamp を使った要素ではel.scrollHeightとel.clientHeightの比較だと\n // フォントの高さの計算が期待と異なり適切な高さが取得できないためshadowElと比較している\n // 参考: https://github.com/kufu/smarthr-ui/pull/4710\n const isMultiLineOverflow = el && shadowEl ? shadowEl.clientHeight > el.clientHeight : false\n\n setTooltipVisible(isMultiLineOverflow)\n }, [maxLines, children])\n\n const classNames = useMemo(() => {\n const { base, clampedLine, shadowElementWrapper, shadowElement } = classNameGenerator({\n maxLines,\n })\n\n return {\n base: base({ className }),\n clampedLine: clampedLine(),\n shadowElementWrapper: shadowElementWrapper(),\n shadowElement: shadowElement(),\n }\n }, [maxLines, className])\n\n const actualLineClamp = (\n <span {...rest} className={classNames.base}>\n <span ref={ref} className={classNames.clampedLine}>\n {children}\n </span>\n {/* 切り取られていないテキストの高さを取得するための要素 */}\n <span aria-hidden className={classNames.shadowElementWrapper}>\n <span className={classNames.shadowElement} ref={shadowRef}>\n {children}\n </span>\n </span>\n </span>\n )\n\n return isTooltipVisible ? (\n <Tooltip message={children}>{actualLineClamp}</Tooltip>\n ) : (\n actualLineClamp\n )\n}\n"],"names":[],"mappings":";;;;;;;AAkBA;AACE;AACE;AACA;AACA;AAEA;AACD;AACD;AACE;AACE;AACE;AAED;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACF;AACF;AACD;AACE;;AAEE;;AAEE;AACD;AACF;AACF;AACF;AAEM;;AAEH;;;AAIF;AACA;;AAGE;AACA;;;;AAKA;;AAGF;AAEA;;;AAGG;;AAGC;;;;;AAKJ;;;AAqBF;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNavItemButton.cjs","sources":["../../../src/components/SideNav/SideNavItemButton.tsx"],"sourcesContent":["import {\n type ComponentPropsWithoutRef,\n type ElementType,\n type FC,\n type ReactNode,\n memo,\n useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { Cluster } from '../Layout'\n\nexport type SideNavSizeType = 'M' | 'S'\n\ntype AbstractProps = {\n /**
|
|
1
|
+
{"version":3,"file":"SideNavItemButton.cjs","sources":["../../../src/components/SideNav/SideNavItemButton.tsx"],"sourcesContent":["import {\n type ComponentPropsWithoutRef,\n type ElementType,\n type FC,\n type ReactNode,\n memo,\n useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { Cluster } from '../Layout'\n\nexport type SideNavSizeType = 'M' | 'S'\n\ntype AbstractProps = {\n /** アイテムのタイトル\n * @deprecated SideNav で items を使う時の props です。children を使ってください。\n */\n title?: ReactNode\n /** タイトルのプレフィックスの内容。通常、StatusLabelやIconの配置に用います。 */\n prefix?: ReactNode\n /** タイトルのサフィックスの内容。通常、Prefixを使用済みの場合にStatusLabelやChipの配置に用います。 */\n suffix?: ReactNode\n /** 選択されているアイテムかどうか */\n current?: boolean\n /** アイテムの大きさ */\n size?: SideNavSizeType\n /** アイテムを押下したときに発火するコールバック関数 */\n onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void\n}\n\ntype AbstractButtonProps = AbstractProps & {\n /** アイテムの識別子。onClickのイベントオブジェクトのcurrentTarget.valueで取得できます。 */\n id: string\n}\n\ntype AbstractAnchorProps<T extends ElementType = 'a'> = AbstractProps & {\n href: string\n /** next/link などのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n elementAs?: T\n}\n\ntype ButtonProps = Omit<ComponentPropsWithoutRef<'li'>, keyof AbstractButtonProps> &\n AbstractButtonProps\n\ntype AnchorProps<T extends ElementType = 'a'> = Omit<\n ComponentPropsWithoutRef<'li'>,\n keyof AbstractAnchorProps<T>\n> &\n AbstractAnchorProps<T>\n\nconst classNameGenerator = tv({\n slots: {\n wrapper: [\n 'smarthr-ui-SideNav-item shr-relative',\n 'data-[current=true]:shr-bg-main data-[current=true]:shr-text-white',\n 'data-[current=true]:after:shr-absolute data-[current=true]:after:-shr-right-0.25 data-[current=true]:after:shr-top-1/2 data-[current=true]:after:-shr-translate-y-1/2 data-[current=true]:after:shr-translate-x-0 data-[current=true]:after:shr-border-b-4 data-[current=true]:after:shr-border-l-4 data-[current=true]:after:shr-border-r-0 data-[current=true]:after:shr-border-t-4 data-[current=true]:after:shr-border-solid data-[current=true]:after:shr-border-b-transparent data-[current=true]:after:shr-border-l-main data-[current=true]:after:shr-border-r-transparent data-[current=true]:after:shr-border-t-transparent data-[current=true]:after:shr-content-[\"\"]',\n 'data-[current=false]:hover:shr-bg-column-darken',\n '[&:has(:focus-visible)]:shr-z-1', // pseudoエレメントがliの::afterと衝突しないために子要素に適用しますが、次のエレメントに被られるからz-indexを一時的に変更します\n ],\n button: [\n 'shr-w-full shr-leading-none [&]:shr-box-border',\n 'focus-visible:shr-focus-indicator',\n '[[data-current=true]_&:focus-visible]:shr-focus-indicator',\n 'shr-inline-flex shr-items-center',\n 'shr-no-underline',\n\n // ::before: フォーカスリングと上のアイテムの下端の間の隙間を埋めるために、上端から1px外側に1pxの横線を描画する。\n // 非選択かつ先頭以外のボタンにフォーカスが当たったときのみ表示する\n 'before:shr-absolute before:-shr-top-[1px] before:shr-left-0 before:shr-hidden before:shr-h-px before:shr-w-full before:shr-bg-border before:shr-content-[\"\"]',\n '[:first-child_&]:before:shr-hidden [[data-current=false]:not(:first-child)_&:focus-visible]:before:shr-block [[data-current=false]_&:focus-visible]:before:shr-absolute',\n\n // ::after: フォーカスリングと下のアイテムの上端の間の隙間を埋めるために、下端から1px外側に1pxの横線を描画する。\n // 非選択かつ末尾以外のボタンにフォーカスが当たったときのみ表示する\n 'after:shr-absolute after:-shr-bottom-[1px] after:shr-left-0 after:shr-hidden after:shr-h-px after:shr-w-full after:shr-bg-border after:shr-content-[\"\"]',\n '[:last-child_&]:after:shr-hidden [[data-current=false]:not(:last-child)_&:focus-visible]:after:shr-block [[data-current=false]_&:focus-visible]:after:shr-absolute',\n ],\n body: 'shr-w-full',\n bodyText: 'smarthr-ui-SideNav-itemBodyText shr-grow',\n },\n variants: {\n size: {\n M: {\n button: 'shr-p-1 shr-text-base',\n },\n S: {\n button: 'shr-px-1 shr-py-0.5 shr-text-sm',\n },\n },\n },\n})\n\nexport const SideNavItemButton: FC<ButtonProps> = ({\n id,\n title,\n prefix,\n suffix,\n current,\n size,\n onClick,\n children,\n className,\n ...rest\n}) => {\n const classNames = useMemo(() => {\n const { wrapper, button, body, bodyText } = classNameGenerator()\n\n return {\n wrapper: wrapper({ className }),\n button: button({ size: size ?? 'M' }),\n body: body(),\n bodyText: bodyText(),\n }\n }, [className, size])\n\n return (\n <li {...rest} data-current={!!current} className={classNames.wrapper}>\n <UnstyledButton className={classNames.button} onClick={onClick} value={id}>\n <BodyCluster\n prefix={prefix}\n suffix={suffix}\n title={children ?? title}\n classNames={classNames}\n />\n </UnstyledButton>\n </li>\n )\n}\n\nexport const SideNavItemAnchor = <T extends ElementType = 'a'>({\n id,\n title,\n prefix,\n suffix,\n current,\n size,\n onClick,\n children,\n className,\n href,\n elementAs,\n ...rest\n}: AnchorProps<T>) => {\n const classNames = useMemo(() => {\n const { wrapper, button, body, bodyText } = classNameGenerator()\n\n return {\n wrapper: wrapper({ className }),\n button: button({ size: size ?? 'M' }),\n body: body(),\n bodyText: bodyText(),\n }\n }, [className, size])\n\n const Anchor = elementAs || 'a'\n\n return (\n <li {...rest} data-current={!!current} className={classNames.wrapper}>\n <Anchor className={classNames.button} href={href} onClick={onClick} data-value={id}>\n <BodyCluster\n prefix={prefix}\n suffix={suffix}\n title={children ?? title}\n classNames={classNames}\n />\n </Anchor>\n </li>\n )\n}\n\nconst BodyCluster = memo<\n Pick<AbstractProps, 'prefix' | 'suffix' | 'title'> & {\n classNames: { body: string; bodyText: string }\n }\n>(({ prefix, suffix, title, classNames }) => (\n <Cluster inline align=\"center\" className={classNames.body} as=\"span\">\n {prefix}\n <span className={classNames.bodyText}>{title}</span>\n {suffix}\n </Cluster>\n))\n"],"names":["tv","useMemo","_jsx","UnstyledButton","memo","_jsxs","Cluster"],"mappings":"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"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import { type ComponentPropsWithoutRef, type ElementType, type FC, type ReactNode } from 'react';
|
|
2
2
|
export type SideNavSizeType = 'M' | 'S';
|
|
3
3
|
type AbstractProps = {
|
|
4
|
-
/** アイテムの識別子 */
|
|
5
|
-
id: string;
|
|
6
4
|
/** アイテムのタイトル
|
|
7
5
|
* @deprecated SideNav で items を使う時の props です。children を使ってください。
|
|
8
6
|
*/
|
|
@@ -18,14 +16,17 @@ type AbstractProps = {
|
|
|
18
16
|
/** アイテムを押下したときに発火するコールバック関数 */
|
|
19
17
|
onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void;
|
|
20
18
|
};
|
|
21
|
-
type
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
href: string | undefined;
|
|
19
|
+
type AbstractButtonProps = AbstractProps & {
|
|
20
|
+
/** アイテムの識別子。onClickのイベントオブジェクトのcurrentTarget.valueで取得できます。 */
|
|
21
|
+
id: string;
|
|
22
|
+
};
|
|
23
|
+
type AbstractAnchorProps<T extends ElementType = 'a'> = AbstractProps & {
|
|
24
|
+
href: string;
|
|
28
25
|
/** next/link などのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */
|
|
29
26
|
elementAs?: T;
|
|
30
|
-
}
|
|
27
|
+
};
|
|
28
|
+
type ButtonProps = Omit<ComponentPropsWithoutRef<'li'>, keyof AbstractButtonProps> & AbstractButtonProps;
|
|
29
|
+
type AnchorProps<T extends ElementType = 'a'> = Omit<ComponentPropsWithoutRef<'li'>, keyof AbstractAnchorProps<T>> & AbstractAnchorProps<T>;
|
|
30
|
+
export declare const SideNavItemButton: FC<ButtonProps>;
|
|
31
|
+
export declare const SideNavItemAnchor: <T extends ElementType = "a">({ id, title, prefix, suffix, current, size, onClick, children, className, href, elementAs, ...rest }: AnchorProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
31
32
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideNavItemButton.js","sources":["../../../src/components/SideNav/SideNavItemButton.tsx"],"sourcesContent":["import {\n type ComponentPropsWithoutRef,\n type ElementType,\n type FC,\n type ReactNode,\n memo,\n useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { Cluster } from '../Layout'\n\nexport type SideNavSizeType = 'M' | 'S'\n\ntype AbstractProps = {\n /**
|
|
1
|
+
{"version":3,"file":"SideNavItemButton.js","sources":["../../../src/components/SideNav/SideNavItemButton.tsx"],"sourcesContent":["import {\n type ComponentPropsWithoutRef,\n type ElementType,\n type FC,\n type ReactNode,\n memo,\n useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { Cluster } from '../Layout'\n\nexport type SideNavSizeType = 'M' | 'S'\n\ntype AbstractProps = {\n /** アイテムのタイトル\n * @deprecated SideNav で items を使う時の props です。children を使ってください。\n */\n title?: ReactNode\n /** タイトルのプレフィックスの内容。通常、StatusLabelやIconの配置に用います。 */\n prefix?: ReactNode\n /** タイトルのサフィックスの内容。通常、Prefixを使用済みの場合にStatusLabelやChipの配置に用います。 */\n suffix?: ReactNode\n /** 選択されているアイテムかどうか */\n current?: boolean\n /** アイテムの大きさ */\n size?: SideNavSizeType\n /** アイテムを押下したときに発火するコールバック関数 */\n onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void\n}\n\ntype AbstractButtonProps = AbstractProps & {\n /** アイテムの識別子。onClickのイベントオブジェクトのcurrentTarget.valueで取得できます。 */\n id: string\n}\n\ntype AbstractAnchorProps<T extends ElementType = 'a'> = AbstractProps & {\n href: string\n /** next/link などのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n elementAs?: T\n}\n\ntype ButtonProps = Omit<ComponentPropsWithoutRef<'li'>, keyof AbstractButtonProps> &\n AbstractButtonProps\n\ntype AnchorProps<T extends ElementType = 'a'> = Omit<\n ComponentPropsWithoutRef<'li'>,\n keyof AbstractAnchorProps<T>\n> &\n AbstractAnchorProps<T>\n\nconst classNameGenerator = tv({\n slots: {\n wrapper: [\n 'smarthr-ui-SideNav-item shr-relative',\n 'data-[current=true]:shr-bg-main data-[current=true]:shr-text-white',\n 'data-[current=true]:after:shr-absolute data-[current=true]:after:-shr-right-0.25 data-[current=true]:after:shr-top-1/2 data-[current=true]:after:-shr-translate-y-1/2 data-[current=true]:after:shr-translate-x-0 data-[current=true]:after:shr-border-b-4 data-[current=true]:after:shr-border-l-4 data-[current=true]:after:shr-border-r-0 data-[current=true]:after:shr-border-t-4 data-[current=true]:after:shr-border-solid data-[current=true]:after:shr-border-b-transparent data-[current=true]:after:shr-border-l-main data-[current=true]:after:shr-border-r-transparent data-[current=true]:after:shr-border-t-transparent data-[current=true]:after:shr-content-[\"\"]',\n 'data-[current=false]:hover:shr-bg-column-darken',\n '[&:has(:focus-visible)]:shr-z-1', // pseudoエレメントがliの::afterと衝突しないために子要素に適用しますが、次のエレメントに被られるからz-indexを一時的に変更します\n ],\n button: [\n 'shr-w-full shr-leading-none [&]:shr-box-border',\n 'focus-visible:shr-focus-indicator',\n '[[data-current=true]_&:focus-visible]:shr-focus-indicator',\n 'shr-inline-flex shr-items-center',\n 'shr-no-underline',\n\n // ::before: フォーカスリングと上のアイテムの下端の間の隙間を埋めるために、上端から1px外側に1pxの横線を描画する。\n // 非選択かつ先頭以外のボタンにフォーカスが当たったときのみ表示する\n 'before:shr-absolute before:-shr-top-[1px] before:shr-left-0 before:shr-hidden before:shr-h-px before:shr-w-full before:shr-bg-border before:shr-content-[\"\"]',\n '[:first-child_&]:before:shr-hidden [[data-current=false]:not(:first-child)_&:focus-visible]:before:shr-block [[data-current=false]_&:focus-visible]:before:shr-absolute',\n\n // ::after: フォーカスリングと下のアイテムの上端の間の隙間を埋めるために、下端から1px外側に1pxの横線を描画する。\n // 非選択かつ末尾以外のボタンにフォーカスが当たったときのみ表示する\n 'after:shr-absolute after:-shr-bottom-[1px] after:shr-left-0 after:shr-hidden after:shr-h-px after:shr-w-full after:shr-bg-border after:shr-content-[\"\"]',\n '[:last-child_&]:after:shr-hidden [[data-current=false]:not(:last-child)_&:focus-visible]:after:shr-block [[data-current=false]_&:focus-visible]:after:shr-absolute',\n ],\n body: 'shr-w-full',\n bodyText: 'smarthr-ui-SideNav-itemBodyText shr-grow',\n },\n variants: {\n size: {\n M: {\n button: 'shr-p-1 shr-text-base',\n },\n S: {\n button: 'shr-px-1 shr-py-0.5 shr-text-sm',\n },\n },\n },\n})\n\nexport const SideNavItemButton: FC<ButtonProps> = ({\n id,\n title,\n prefix,\n suffix,\n current,\n size,\n onClick,\n children,\n className,\n ...rest\n}) => {\n const classNames = useMemo(() => {\n const { wrapper, button, body, bodyText } = classNameGenerator()\n\n return {\n wrapper: wrapper({ className }),\n button: button({ size: size ?? 'M' }),\n body: body(),\n bodyText: bodyText(),\n }\n }, [className, size])\n\n return (\n <li {...rest} data-current={!!current} className={classNames.wrapper}>\n <UnstyledButton className={classNames.button} onClick={onClick} value={id}>\n <BodyCluster\n prefix={prefix}\n suffix={suffix}\n title={children ?? title}\n classNames={classNames}\n />\n </UnstyledButton>\n </li>\n )\n}\n\nexport const SideNavItemAnchor = <T extends ElementType = 'a'>({\n id,\n title,\n prefix,\n suffix,\n current,\n size,\n onClick,\n children,\n className,\n href,\n elementAs,\n ...rest\n}: AnchorProps<T>) => {\n const classNames = useMemo(() => {\n const { wrapper, button, body, bodyText } = classNameGenerator()\n\n return {\n wrapper: wrapper({ className }),\n button: button({ size: size ?? 'M' }),\n body: body(),\n bodyText: bodyText(),\n }\n }, [className, size])\n\n const Anchor = elementAs || 'a'\n\n return (\n <li {...rest} data-current={!!current} className={classNames.wrapper}>\n <Anchor className={classNames.button} href={href} onClick={onClick} data-value={id}>\n <BodyCluster\n prefix={prefix}\n suffix={suffix}\n title={children ?? title}\n classNames={classNames}\n />\n </Anchor>\n </li>\n )\n}\n\nconst BodyCluster = memo<\n Pick<AbstractProps, 'prefix' | 'suffix' | 'title'> & {\n classNames: { body: string; bodyText: string }\n }\n>(({ prefix, suffix, title, classNames }) => (\n <Cluster inline align=\"center\" className={classNames.body} as=\"span\">\n {prefix}\n <span className={classNames.bodyText}>{title}</span>\n {suffix}\n </Cluster>\n))\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -45,7 +45,7 @@ const TabItem = ({ selected = false, disabled, disabledReason, ...rest }) => {
|
|
|
45
45
|
};
|
|
46
46
|
if (disabled && disabledReason) {
|
|
47
47
|
const Icon = disabledReason.icon || jsxRuntime.jsx(components_Icon_FaIcon.FaCircleInfoIcon, { color: "TEXT_GREY" });
|
|
48
|
-
return (jsxRuntime.jsx(components_Tooltip_Tooltip.Tooltip, { ...tabAttrs, message: disabledReason.message,
|
|
48
|
+
return (jsxRuntime.jsx(components_Tooltip_Tooltip.Tooltip, { ...tabAttrs, message: disabledReason.message, "aria-disabled": disabled, className: "focus-visible:shr-focus-indicator", children: jsxRuntime.jsx(TabButton, { ...rest, disabled: disabled, suffix: Icon }) }));
|
|
49
49
|
}
|
|
50
50
|
return jsxRuntime.jsx(TabButton, { ...rest, ...tabAttrs, disabled: disabled });
|
|
51
51
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabItem.cjs","sources":["../../../src/components/TabBar/TabItem.tsx"],"sourcesContent":["import {\n type ComponentProps,\n type FC,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n memo,\n useCallback,\n useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\n\nconst classNameGenerator = tv({\n slots: {\n wrapper: [\n 'smarthr-ui-TabItem',\n 'shr-group/tabitem',\n 'shr-relative shr-inline-flex shr-items-center shr-gap-0.5 shr-px-1 shr-py-0.75',\n 'hover:shr-bg-white-darken',\n 'focus-visible:shr-focus-indicator focus-visible:shr-z-1',\n 'disabled:shr-cursor-not-allowed disabled:shr-bg-transparent',\n 'aria-selected:before:shr-absolute aria-selected:before:shr-inset-x-0 aria-selected:before:shr-bottom-0 aria-selected:before:shr-z-1 aria-selected:before:shr-block aria-selected:before:shr-h-0.25 aria-selected:before:shr-bg-main aria-selected:before:shr-content-[\"\"]',\n 'forced-colors:aria-selected:before:shr-bg-[Highlight]',\n ],\n label: [\n 'shr-font-bold shr-leading-none shr-text-grey',\n 'group-hover/tabitem:shr-text-black',\n 'group-disabled/tabitem:shr-text-grey/50',\n 'group-aria-selected/tabitem:shr-text-black',\n ],\n suffixWrapper: [\n // Badge など内包要素に依って高さが変わらないようにするため、ネガティブマージンを指定\n '-shr-my-0.25',\n // 内包アイコンの leading を詰める\n '[&_.smarthr-ui-Icon]:shr-block',\n ],\n },\n})\n\ntype AbstractProps = PropsWithChildren<{\n /** タブの ID */\n id: string\n /** ボタン内の末尾に表示する内容 */\n suffix?: ReactNode\n /** `true` のとき、タブが選択状態のスタイルになる */\n selected?: boolean\n /** `true` のとき、タブを無効状態にしてクリック不能にする */\n disabled?: boolean\n /**\n * 無効な理由\n */\n disabledReason?: {\n icon?: ReactNode\n message: ReactNode\n }\n /** タブをクリックした時に発火するコールバック関数 */\n onClick: (tabId: string) => void\n}>\ntype Props = AbstractProps &\n Omit<ComponentProps<typeof UnstyledButton>, keyof AbstractProps | 'aria-selected' | 'type'>\n\nexport const TabItem: FC<Props> = ({ selected = false, disabled, disabledReason, ...rest }) => {\n const tabAttrs = {\n role: 'tab',\n 'aria-selected': selected,\n }\n\n if (disabled && disabledReason) {\n const Icon = disabledReason.icon || <FaCircleInfoIcon color=\"TEXT_GREY\" />\n\n return (\n <Tooltip\n {...tabAttrs}\n message={disabledReason.message}\n
|
|
1
|
+
{"version":3,"file":"TabItem.cjs","sources":["../../../src/components/TabBar/TabItem.tsx"],"sourcesContent":["import {\n type ComponentProps,\n type FC,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n memo,\n useCallback,\n useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\n\nconst classNameGenerator = tv({\n slots: {\n wrapper: [\n 'smarthr-ui-TabItem',\n 'shr-group/tabitem',\n 'shr-relative shr-inline-flex shr-items-center shr-gap-0.5 shr-px-1 shr-py-0.75',\n 'hover:shr-bg-white-darken',\n 'focus-visible:shr-focus-indicator focus-visible:shr-z-1',\n 'disabled:shr-cursor-not-allowed disabled:shr-bg-transparent',\n 'aria-selected:before:shr-absolute aria-selected:before:shr-inset-x-0 aria-selected:before:shr-bottom-0 aria-selected:before:shr-z-1 aria-selected:before:shr-block aria-selected:before:shr-h-0.25 aria-selected:before:shr-bg-main aria-selected:before:shr-content-[\"\"]',\n 'forced-colors:aria-selected:before:shr-bg-[Highlight]',\n ],\n label: [\n 'shr-font-bold shr-leading-none shr-text-grey',\n 'group-hover/tabitem:shr-text-black',\n 'group-disabled/tabitem:shr-text-grey/50',\n 'group-aria-selected/tabitem:shr-text-black',\n ],\n suffixWrapper: [\n // Badge など内包要素に依って高さが変わらないようにするため、ネガティブマージンを指定\n '-shr-my-0.25',\n // 内包アイコンの leading を詰める\n '[&_.smarthr-ui-Icon]:shr-block',\n ],\n },\n})\n\ntype AbstractProps = PropsWithChildren<{\n /** タブの ID */\n id: string\n /** ボタン内の末尾に表示する内容 */\n suffix?: ReactNode\n /** `true` のとき、タブが選択状態のスタイルになる */\n selected?: boolean\n /** `true` のとき、タブを無効状態にしてクリック不能にする */\n disabled?: boolean\n /**\n * 無効な理由\n */\n disabledReason?: {\n icon?: ReactNode\n message: ReactNode\n }\n /** タブをクリックした時に発火するコールバック関数 */\n onClick: (tabId: string) => void\n}>\ntype Props = AbstractProps &\n Omit<ComponentProps<typeof UnstyledButton>, keyof AbstractProps | 'aria-selected' | 'type'>\n\nexport const TabItem: FC<Props> = ({ selected = false, disabled, disabledReason, ...rest }) => {\n const tabAttrs = {\n role: 'tab',\n 'aria-selected': selected,\n }\n\n if (disabled && disabledReason) {\n const Icon = disabledReason.icon || <FaCircleInfoIcon color=\"TEXT_GREY\" />\n\n return (\n <Tooltip\n {...tabAttrs}\n message={disabledReason.message}\n aria-disabled={disabled}\n className=\"focus-visible:shr-focus-indicator\"\n >\n <TabButton {...rest} disabled={disabled} suffix={Icon} />\n </Tooltip>\n )\n }\n\n return <TabButton {...rest} {...tabAttrs} disabled={disabled} />\n}\n\nconst TabButton: FC<Props> = ({ id, children, suffix, onClick, className, ...rest }) => {\n const classNames = useMemo(() => {\n const { wrapper, label, suffixWrapper } = classNameGenerator()\n\n return {\n wrapper: wrapper({ className }),\n label: label(),\n suffixWrapper: suffixWrapper(),\n }\n }, [className])\n\n const actualOnClick = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => onClick(e.currentTarget.value),\n [onClick],\n )\n\n return (\n <UnstyledButton\n {...rest}\n type=\"button\"\n value={id}\n id={id}\n className={classNames.wrapper}\n onClick={actualOnClick}\n >\n <TabLabel className={classNames.label}>{children}</TabLabel>\n <TabButtonSuffix className={classNames.suffixWrapper}>{suffix}</TabButtonSuffix>\n </UnstyledButton>\n )\n}\n\nconst TabLabel = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (\n <span className={className}>{children}</span>\n))\nconst TabButtonSuffix = memo<PropsWithChildren<{ className: string }>>(\n ({ children, className }) => children && <span className={className}>{children}</span>,\n)\n"],"names":["tv","_jsx","FaCircleInfoIcon","Tooltip","useMemo","useCallback","_jsxs","UnstyledButton","memo"],"mappings":"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"}
|
|
@@ -43,7 +43,7 @@ const TabItem = ({ selected = false, disabled, disabledReason, ...rest }) => {
|
|
|
43
43
|
};
|
|
44
44
|
if (disabled && disabledReason) {
|
|
45
45
|
const Icon = disabledReason.icon || jsx(FaCircleInfoIcon, { color: "TEXT_GREY" });
|
|
46
|
-
return (jsx(Tooltip, { ...tabAttrs, message: disabledReason.message,
|
|
46
|
+
return (jsx(Tooltip, { ...tabAttrs, message: disabledReason.message, "aria-disabled": disabled, className: "focus-visible:shr-focus-indicator", children: jsx(TabButton, { ...rest, disabled: disabled, suffix: Icon }) }));
|
|
47
47
|
}
|
|
48
48
|
return jsx(TabButton, { ...rest, ...tabAttrs, disabled: disabled });
|
|
49
49
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabItem.js","sources":["../../../src/components/TabBar/TabItem.tsx"],"sourcesContent":["import {\n type ComponentProps,\n type FC,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n memo,\n useCallback,\n useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\n\nconst classNameGenerator = tv({\n slots: {\n wrapper: [\n 'smarthr-ui-TabItem',\n 'shr-group/tabitem',\n 'shr-relative shr-inline-flex shr-items-center shr-gap-0.5 shr-px-1 shr-py-0.75',\n 'hover:shr-bg-white-darken',\n 'focus-visible:shr-focus-indicator focus-visible:shr-z-1',\n 'disabled:shr-cursor-not-allowed disabled:shr-bg-transparent',\n 'aria-selected:before:shr-absolute aria-selected:before:shr-inset-x-0 aria-selected:before:shr-bottom-0 aria-selected:before:shr-z-1 aria-selected:before:shr-block aria-selected:before:shr-h-0.25 aria-selected:before:shr-bg-main aria-selected:before:shr-content-[\"\"]',\n 'forced-colors:aria-selected:before:shr-bg-[Highlight]',\n ],\n label: [\n 'shr-font-bold shr-leading-none shr-text-grey',\n 'group-hover/tabitem:shr-text-black',\n 'group-disabled/tabitem:shr-text-grey/50',\n 'group-aria-selected/tabitem:shr-text-black',\n ],\n suffixWrapper: [\n // Badge など内包要素に依って高さが変わらないようにするため、ネガティブマージンを指定\n '-shr-my-0.25',\n // 内包アイコンの leading を詰める\n '[&_.smarthr-ui-Icon]:shr-block',\n ],\n },\n})\n\ntype AbstractProps = PropsWithChildren<{\n /** タブの ID */\n id: string\n /** ボタン内の末尾に表示する内容 */\n suffix?: ReactNode\n /** `true` のとき、タブが選択状態のスタイルになる */\n selected?: boolean\n /** `true` のとき、タブを無効状態にしてクリック不能にする */\n disabled?: boolean\n /**\n * 無効な理由\n */\n disabledReason?: {\n icon?: ReactNode\n message: ReactNode\n }\n /** タブをクリックした時に発火するコールバック関数 */\n onClick: (tabId: string) => void\n}>\ntype Props = AbstractProps &\n Omit<ComponentProps<typeof UnstyledButton>, keyof AbstractProps | 'aria-selected' | 'type'>\n\nexport const TabItem: FC<Props> = ({ selected = false, disabled, disabledReason, ...rest }) => {\n const tabAttrs = {\n role: 'tab',\n 'aria-selected': selected,\n }\n\n if (disabled && disabledReason) {\n const Icon = disabledReason.icon || <FaCircleInfoIcon color=\"TEXT_GREY\" />\n\n return (\n <Tooltip\n {...tabAttrs}\n message={disabledReason.message}\n
|
|
1
|
+
{"version":3,"file":"TabItem.js","sources":["../../../src/components/TabBar/TabItem.tsx"],"sourcesContent":["import {\n type ComponentProps,\n type FC,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n memo,\n useCallback,\n useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\n\nconst classNameGenerator = tv({\n slots: {\n wrapper: [\n 'smarthr-ui-TabItem',\n 'shr-group/tabitem',\n 'shr-relative shr-inline-flex shr-items-center shr-gap-0.5 shr-px-1 shr-py-0.75',\n 'hover:shr-bg-white-darken',\n 'focus-visible:shr-focus-indicator focus-visible:shr-z-1',\n 'disabled:shr-cursor-not-allowed disabled:shr-bg-transparent',\n 'aria-selected:before:shr-absolute aria-selected:before:shr-inset-x-0 aria-selected:before:shr-bottom-0 aria-selected:before:shr-z-1 aria-selected:before:shr-block aria-selected:before:shr-h-0.25 aria-selected:before:shr-bg-main aria-selected:before:shr-content-[\"\"]',\n 'forced-colors:aria-selected:before:shr-bg-[Highlight]',\n ],\n label: [\n 'shr-font-bold shr-leading-none shr-text-grey',\n 'group-hover/tabitem:shr-text-black',\n 'group-disabled/tabitem:shr-text-grey/50',\n 'group-aria-selected/tabitem:shr-text-black',\n ],\n suffixWrapper: [\n // Badge など内包要素に依って高さが変わらないようにするため、ネガティブマージンを指定\n '-shr-my-0.25',\n // 内包アイコンの leading を詰める\n '[&_.smarthr-ui-Icon]:shr-block',\n ],\n },\n})\n\ntype AbstractProps = PropsWithChildren<{\n /** タブの ID */\n id: string\n /** ボタン内の末尾に表示する内容 */\n suffix?: ReactNode\n /** `true` のとき、タブが選択状態のスタイルになる */\n selected?: boolean\n /** `true` のとき、タブを無効状態にしてクリック不能にする */\n disabled?: boolean\n /**\n * 無効な理由\n */\n disabledReason?: {\n icon?: ReactNode\n message: ReactNode\n }\n /** タブをクリックした時に発火するコールバック関数 */\n onClick: (tabId: string) => void\n}>\ntype Props = AbstractProps &\n Omit<ComponentProps<typeof UnstyledButton>, keyof AbstractProps | 'aria-selected' | 'type'>\n\nexport const TabItem: FC<Props> = ({ selected = false, disabled, disabledReason, ...rest }) => {\n const tabAttrs = {\n role: 'tab',\n 'aria-selected': selected,\n }\n\n if (disabled && disabledReason) {\n const Icon = disabledReason.icon || <FaCircleInfoIcon color=\"TEXT_GREY\" />\n\n return (\n <Tooltip\n {...tabAttrs}\n message={disabledReason.message}\n aria-disabled={disabled}\n className=\"focus-visible:shr-focus-indicator\"\n >\n <TabButton {...rest} disabled={disabled} suffix={Icon} />\n </Tooltip>\n )\n }\n\n return <TabButton {...rest} {...tabAttrs} disabled={disabled} />\n}\n\nconst TabButton: FC<Props> = ({ id, children, suffix, onClick, className, ...rest }) => {\n const classNames = useMemo(() => {\n const { wrapper, label, suffixWrapper } = classNameGenerator()\n\n return {\n wrapper: wrapper({ className }),\n label: label(),\n suffixWrapper: suffixWrapper(),\n }\n }, [className])\n\n const actualOnClick = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => onClick(e.currentTarget.value),\n [onClick],\n )\n\n return (\n <UnstyledButton\n {...rest}\n type=\"button\"\n value={id}\n id={id}\n className={classNames.wrapper}\n onClick={actualOnClick}\n >\n <TabLabel className={classNames.label}>{children}</TabLabel>\n <TabButtonSuffix className={classNames.suffixWrapper}>{suffix}</TabButtonSuffix>\n </UnstyledButton>\n )\n}\n\nconst TabLabel = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (\n <span className={className}>{children}</span>\n))\nconst TabButtonSuffix = memo<PropsWithChildren<{ className: string }>>(\n ({ children, className }) => children && <span className={className}>{children}</span>,\n)\n"],"names":["tv","_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -31,16 +31,26 @@ const classNameGenerator = index.tv({
|
|
|
31
31
|
},
|
|
32
32
|
},
|
|
33
33
|
});
|
|
34
|
-
const Tooltip = ({ message, children, triggerType, ellipsisOnly, tabIndex
|
|
34
|
+
const Tooltip = ({ message, children, type = 'description', triggerType, ellipsisOnly, tabIndex, ariaDescribedbyTarget = 'wrapper', className, onPointerEnter, onPointerLeave, onTouchStart, onTouchEnd, onFocus, onBlur, ...rest }) => {
|
|
35
35
|
const [portalRoot, setPortalRoot] = React.useState(null);
|
|
36
36
|
const [isVisible, setIsVisible] = React.useState(false);
|
|
37
37
|
const [rect, setRect] = React.useState(null);
|
|
38
38
|
const ref = React.useRef(null);
|
|
39
39
|
const messageId = React.useId();
|
|
40
40
|
const fullscreenElement = React.useSyncExternalStore(subscribeFullscreenChange, getFullscreenElement, getFullscreenElementOnSSR);
|
|
41
|
+
const [isFocusableChild, setIsFocusableChild] = React.useState(false);
|
|
42
|
+
const [actualTabIndex, setActualTabIndex] = React.useState(tabIndex ?? 0);
|
|
41
43
|
hooks_useEnhancedEffect.useEnhancedEffect(() => {
|
|
42
44
|
setPortalRoot(fullscreenElement ?? document.body);
|
|
43
45
|
}, [fullscreenElement]);
|
|
46
|
+
hooks_useEnhancedEffect.useEnhancedEffect(() => {
|
|
47
|
+
const childElement = ref.current?.querySelector(':scope > :not(.smarthr-ui-VisuallyHiddenText)');
|
|
48
|
+
const focusable = !!childElement &&
|
|
49
|
+
childElement.matches('a[href], button, input, select, textarea, [tabindex]') &&
|
|
50
|
+
!childElement.matches('[tabindex="-1"]');
|
|
51
|
+
setIsFocusableChild(focusable);
|
|
52
|
+
setActualTabIndex(tabIndex !== undefined ? tabIndex : focusable ? undefined : 0);
|
|
53
|
+
}, [tabIndex]);
|
|
44
54
|
const toShowAction = React.useCallback((e) => {
|
|
45
55
|
// Tooltipのtriggerの他の要素(Dropwdown menu buttonで開いたmenu contentとか)に移動されたらtooltipを表示しない
|
|
46
56
|
if (!ref.current?.contains(e.target)) {
|
|
@@ -96,13 +106,17 @@ const Tooltip = ({ message, children, triggerType, ellipsisOnly, tabIndex = 0, a
|
|
|
96
106
|
: toCloseAction, [onBlur, toCloseAction]);
|
|
97
107
|
const isIcon = triggerType === 'icon';
|
|
98
108
|
const actualClassName = React.useMemo(() => classNameGenerator({ isIcon, className }), [isIcon, className]);
|
|
99
|
-
const
|
|
100
|
-
const
|
|
101
|
-
|
|
102
|
-
|
|
109
|
+
const isLabel = type === 'label';
|
|
110
|
+
const isInnerTarget = isLabel || isFocusableChild || ariaDescribedbyTarget === 'inner';
|
|
111
|
+
const childrenWithProps = React.useMemo(() => isLabel
|
|
112
|
+
? React.cloneElement(children, { 'aria-labelledby': messageId })
|
|
113
|
+
: isInnerTarget
|
|
114
|
+
? React.cloneElement(children, { 'aria-describedby': messageId })
|
|
115
|
+
: children, [children, isLabel, isInnerTarget, messageId]);
|
|
116
|
+
const actualWrapperAriaDescribedby = React.useMemo(() => (!isInnerTarget ? messageId : undefined), [isInnerTarget, messageId]);
|
|
103
117
|
return (
|
|
104
118
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
105
|
-
jsxRuntime.jsxs("span", { ...rest, ref: ref, tabIndex:
|
|
119
|
+
jsxRuntime.jsxs("span", { ...rest, ref: ref, tabIndex: actualTabIndex, "aria-describedby": actualWrapperAriaDescribedby, onPointerEnter: onDelegatePointerEnter, onTouchStart: onDelegateTouchStart, onFocus: onDelegateFocus, onPointerLeave: onDelegatePointerLeave, onTouchEnd: onDelegateTouchEnd, onBlur: onDelegateBlur, className: actualClassName, children: [portalRoot &&
|
|
106
120
|
ReactDOM.createPortal(jsxRuntime.jsx(components_Tooltip_TooltipPortal.TooltipPortal, { message: message, isVisible: isVisible, parentRect: rect, isIcon: isIcon }), portalRoot), childrenWithProps, jsxRuntime.jsx(MemoizedVisuallyHiddenText, { id: messageId, visible: isVisible, children: message })] }));
|
|
107
121
|
};
|
|
108
122
|
const MemoizedVisuallyHiddenText = React.memo(({ id, visible, children }) => {
|