smarthr-ui 99.3.1 → 99.3.2

package/lib/components/Pagination/Pagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.cjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ElementType,\n  type FC,\n  type HTMLAttributes,\n  type MouseEvent,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useLocalize } from '../../intl'\nimport { range } from '../../libs/lodash'\nimport { Cluster, Reel } from '../Layout'\nimport { Nav } from '../SectioningContent'\n\nimport { PaginationControllerItemButton } from './PaginationControllerItemButton'\nimport { PaginationItemButton } from './PaginationItemButton'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Pagination shr-inline-block shr-max-w-full',\n    list: 'shr-m-0.25 shr-list-none shr-ps-[unset]',\n    firstListItem: 'smarthr-ui-Pagination-first',\n    prevListItem: 'smarthr-ui-Pagination-prev',\n    nextListItem: 'smarthr-ui-Pagination-next',\n    lastListItem: 'smarthr-ui-Pagination-last',\n  },\n  variants: {\n    withoutNumbers: {\n      true: {\n        firstListItem: 'shr-mr-0.5',\n        prevListItem: 'shr-mr-0',\n        nextListItem: 'shr-ml-0',\n        lastListItem: 'shr-ml-0.5',\n      },\n      false: {\n        prevListItem: 'shr-mr-0.5',\n        nextListItem: 'shr-ml-0.5',\n      },\n    },\n  },\n})\n\ntype CommonProps = {\n  /** 全ページ数 */\n  total: number\n  /** 現在のページ */\n  current: number\n  /** 現在のページの前後に表示するページ番号のボタンの数 */\n  padding?: number\n  /** `true` のとき、ページ番号のボタンを表示しない */\n  withoutNumbers?: boolean\n}\n\ntype ButtonProps = CommonProps & {\n  /** ボタンを押下したときに発火するコールバック関数 */\n  onClick: (pageNumber: number, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate?: undefined\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: undefined\n}\ntype AnchorProps = CommonProps & {\n  /** リンクを押下したときに発火するコールバック関数 */\n  onClick?: (href: string, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate: (pageNumber: number) => string\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: ElementType\n}\n\ntype BaseProps = ButtonProps | AnchorProps\ntype Props = BaseProps & Omit<HTMLAttributes<HTMLElement>, keyof BaseProps>\n\nconst BUTTON_REGEX = /^button$/i\nconst ANCHOR_REGEX = /^a/i\n\nconst getTargetDelegateElement = (e: MouseEvent<HTMLElement>, regex: RegExp) =>\n  (e.nativeEvent.composedPath() as HTMLElement[]).find((elm) => regex.test(elm.tagName))\n\nexport const Pagination: FC<Props> = (props) =>\n  props.total > 1 ? <ActualPagination {...props} /> : null\n\nconst ActualPagination: FC<Props> = ({\n  total,\n  current,\n  onClick,\n  padding,\n  className,\n  withoutNumbers,\n  hrefTemplate,\n  linkAs,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, list, firstListItem, prevListItem, nextListItem, lastListItem } =\n      classNameGenerator()\n    const itemArg = { withoutNumbers: withoutNumbers || false }\n\n    return {\n      wrapper: wrapper({ className }),\n      list: list(),\n      firstListItem: firstListItem(itemArg),\n      prevListItem: prevListItem(itemArg),\n      nextListItem: nextListItem(itemArg),\n      lastListItem: lastListItem(itemArg),\n    }\n  }, [className, withoutNumbers])\n\n  const latest = useLatest({ onClick, hrefTemplate })\n  const hasHrefTemplate = !!hrefTemplate\n\n  const functions = useMemo(\n    () => ({\n      actualHrefTemplate: hasHrefTemplate\n        ? (pageNumber: number) => latest.hrefTemplate!(pageNumber)\n        : undefined,\n      handleDelegateClick: (e: MouseEvent<HTMLElement>) => {\n        if (!latest.onClick) {\n          return\n        }\n\n        if (latest.hrefTemplate) {\n          const anchor = getTargetDelegateElement(e, ANCHOR_REGEX)\n\n          if (!anchor) {\n            return\n          }\n\n          const href = (anchor as HTMLAnchorElement).href\n\n          if (href) {\n            ;(latest.onClick as (href: string, e: MouseEvent<HTMLElement>) => void)(href, e)\n          }\n        } else {\n          const button = getTargetDelegateElement(e, BUTTON_REGEX)\n\n          if (button) {\n            ;(latest.onClick as (pageNumber: number, e: MouseEvent<HTMLElement>) => void)(\n              parseInt((button as HTMLButtonElement).value, 10),\n              e,\n            )\n          }\n        }\n      },\n    }),\n    [hasHrefTemplate, latest],\n  )\n\n  const { navigationLabel } = useLocalize({\n    navigationLabel: {\n      id: 'smarthr-ui/Pagination/navigationLabel',\n      defaultText: 'ページネーション',\n    },\n  })\n\n  return (\n    <Nav {...rest} className={classNames.wrapper} aria-label={navigationLabel}>\n      <Reel onClick={functions.handleDelegateClick}>\n        <ItemButtons\n          total={total}\n          current={current}\n          padding={padding}\n          withoutNumbers={withoutNumbers}\n          hrefTemplate={functions.actualHrefTemplate}\n          classNames={classNames}\n          linkAs={linkAs}\n        />\n      </Reel>\n    </Nav>\n  )\n}\n\nconst ItemButtons = memo<\n  Pick<Props, 'total' | 'current' | 'padding' | 'withoutNumbers' | 'hrefTemplate' | 'linkAs'> & {\n    classNames: {\n      list: string\n      firstListItem: string\n      prevListItem: string\n      nextListItem: string\n      lastListItem: string\n    }\n  }\n>(({ total, current, padding, withoutNumbers, hrefTemplate, classNames, linkAs }) => {\n  const pageNumbers = useMemo(() => {\n    if (withoutNumbers) {\n      return []\n    }\n\n    const actualPadding = padding ?? 4\n\n    return range(Math.max(current - actualPadding, 1), Math.min(current + actualPadding, total) + 1)\n  }, [current, total, padding, withoutNumbers])\n\n  const prevAttrs = {\n    disabled: current === 1,\n    direction: 'prev' as const,\n    hrefTemplate,\n    linkAs,\n  }\n  const nextAttrs = {\n    disabled: current === total,\n    direction: 'next' as const,\n    hrefTemplate,\n    linkAs,\n  }\n\n  return (\n    <Cluster as=\"ul\" className={classNames.list}>\n      <DoubleIconItemButton {...prevAttrs} targetPage={1} className={classNames.firstListItem} />\n      <li className={classNames.prevListItem}>\n        <PaginationControllerItemButton {...prevAttrs} targetPage={current - 1} />\n      </li>\n      {pageNumbers.map((page) => (\n        <NumberItemButton\n          key={page}\n          page={page}\n          disabled={page === current}\n          hrefTemplate={hrefTemplate}\n          linkAs={linkAs}\n        />\n      ))}\n      <li className={classNames.nextListItem}>\n        <PaginationControllerItemButton {...nextAttrs} targetPage={current + 1} />\n      </li>\n      <DoubleIconItemButton {...nextAttrs} targetPage={total} className={classNames.lastListItem} />\n    </Cluster>\n  )\n})\n\nconst NumberItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & { page: number; disabled: boolean }\n>(({ disabled, ...rest }) => (\n  <li className={`smarthr-ui-Pagination-${disabled ? 'current' : 'page'}`}>\n    <PaginationItemButton {...rest} disabled={disabled} />\n  </li>\n))\n\nconst DoubleIconItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & {\n    disabled: boolean\n    direction: 'prev' | 'next'\n    targetPage: number\n    className: string\n  }\n>(({ className, ...rest }) => (\n  <li className={className}>\n    <PaginationControllerItemButton {...rest} double />\n  </li>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACF;AACF;AAiCD;AACA;AAEA;AAGO;AAGP;AAWE;AACE;;;AAKE;;AAEA;AACA;AACA;AACA;;AAEJ;;AAGA;AAEA;AAEI;;AAEE;AACF;AACE;;;AAIA;;;;;AAOE;;AAGI;;;;;;AAMA;;;;AAOT;AAIH;AACE;AACE;AACA;AACD;AACF;;AAiBH;AAEA;AAWE;;AAEI;;AAGF;;;AAKF;;AAEE;;;;AAIF;;AAEE;;;;;AA0BJ;AAEA;AAQA;;"}
+{"version":3,"file":"Pagination.cjs","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ElementType,\n  type FC,\n  type HTMLAttributes,\n  type MouseEvent,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useLocalize } from '../../intl'\nimport { range } from '../../libs/lodash'\nimport { Cluster, Reel } from '../Layout'\nimport { Nav } from '../SectioningContent'\n\nimport { PaginationControllerItemButton } from './PaginationControllerItemButton'\nimport { PaginationItemButton } from './PaginationItemButton'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Pagination shr-inline-block shr-max-w-full',\n    list: 'shr-m-0.25 shr-list-none shr-ps-[unset]',\n    firstListItem: 'smarthr-ui-Pagination-first',\n    prevListItem: 'smarthr-ui-Pagination-prev',\n    nextListItem: 'smarthr-ui-Pagination-next',\n    lastListItem: 'smarthr-ui-Pagination-last',\n  },\n  variants: {\n    withoutNumbers: {\n      true: {\n        firstListItem: 'shr-mr-0.5',\n        prevListItem: 'shr-mr-0',\n        nextListItem: 'shr-ml-0',\n        lastListItem: 'shr-ml-0.5',\n      },\n      false: {\n        prevListItem: 'shr-mr-0.5',\n        nextListItem: 'shr-ml-0.5',\n      },\n    },\n  },\n})\n\ntype CommonProps = {\n  /** 全ページ数 */\n  total: number\n  /** 現在のページ */\n  current: number\n  /** 現在のページの前後に表示するページ番号のボタンの数 */\n  padding?: number\n  /** `true` のとき、ページ番号のボタンを表示しない */\n  withoutNumbers?: boolean\n}\n\ntype ButtonProps = CommonProps & {\n  /** ボタンを押下したときに発火するコールバック関数 */\n  onClick: (pageNumber: number, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate?: undefined\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: undefined\n}\ntype AnchorProps = CommonProps & {\n  /** リンクを押下したときに発火するコールバック関数 */\n  onClick?: (href: string, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate: (pageNumber: number) => string\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: ElementType\n}\n\ntype BaseProps = ButtonProps | AnchorProps\ntype Props = BaseProps & Omit<HTMLAttributes<HTMLElement>, keyof BaseProps>\n\nconst BUTTON_REGEX = /^button$/i\nconst ANCHOR_REGEX = /^a/i\n\nconst getTargetDelegateElement = (e: MouseEvent<HTMLElement>, regex: RegExp) =>\n  (e.nativeEvent.composedPath() as HTMLElement[]).find((elm) => regex.test(elm.tagName))\n\nexport const Pagination: FC<Props> = (props) =>\n  props.total > 1 ? <ActualPagination {...props} /> : null\n\nconst ActualPagination: FC<Props> = ({\n  total,\n  current,\n  onClick,\n  padding,\n  className,\n  withoutNumbers,\n  hrefTemplate,\n  linkAs,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, list, firstListItem, prevListItem, nextListItem, lastListItem } =\n      classNameGenerator()\n    const itemArg = { withoutNumbers: withoutNumbers || false }\n\n    return {\n      wrapper: wrapper({ className }),\n      list: list(),\n      firstListItem: firstListItem(itemArg),\n      prevListItem: prevListItem(itemArg),\n      nextListItem: nextListItem(itemArg),\n      lastListItem: lastListItem(itemArg),\n    }\n  }, [className, withoutNumbers])\n\n  const latest = useLatest({ onClick, hrefTemplate })\n  const hasHrefTemplate = !!hrefTemplate\n\n  const functions = useMemo(\n    () => ({\n      actualHrefTemplate: hasHrefTemplate\n        ? (pageNumber: number) => latest.hrefTemplate!(pageNumber)\n        : undefined,\n      handleDelegateClick: (e: MouseEvent<HTMLElement>) => {\n        if (!latest.onClick) {\n          return\n        }\n\n        if (latest.hrefTemplate) {\n          const anchor = getTargetDelegateElement(e, ANCHOR_REGEX)\n\n          if (!anchor) {\n            return\n          }\n\n          const href = (anchor as HTMLAnchorElement).href\n\n          if (href) {\n            ;(latest.onClick as (href: string, e: MouseEvent<HTMLElement>) => void)(href, e)\n          }\n        } else {\n          const button = getTargetDelegateElement(e, BUTTON_REGEX)\n\n          if (button) {\n            ;(latest.onClick as (pageNumber: number, e: MouseEvent<HTMLElement>) => void)(\n              parseInt((button as HTMLButtonElement).value, 10),\n              e,\n            )\n          }\n        }\n      },\n    }),\n    [hasHrefTemplate, latest],\n  )\n\n  const { navigationLabel } = useLocalize({\n    navigationLabel: {\n      id: 'smarthr-ui/Pagination/navigationLabel',\n      defaultText: 'ページネーション',\n    },\n  })\n\n  return (\n    <Nav {...rest} className={classNames.wrapper} aria-label={navigationLabel}>\n      <Reel onClick={functions.handleDelegateClick}>\n        <ItemButtons\n          total={total}\n          current={current}\n          padding={padding}\n          withoutNumbers={withoutNumbers}\n          hrefTemplate={functions.actualHrefTemplate}\n          classNames={classNames}\n          linkAs={linkAs}\n        />\n      </Reel>\n    </Nav>\n  )\n}\n\nconst ItemButtons = memo<\n  Pick<Props, 'total' | 'current' | 'padding' | 'withoutNumbers' | 'hrefTemplate' | 'linkAs'> & {\n    classNames: {\n      list: string\n      firstListItem: string\n      prevListItem: string\n      nextListItem: string\n      lastListItem: string\n    }\n  }\n>(({ total, current, padding, withoutNumbers, hrefTemplate, classNames, linkAs }) => {\n  const pageNumbers = useMemo(() => {\n    if (withoutNumbers) {\n      return []\n    }\n\n    const actualPadding = padding ?? 4\n\n    return range(Math.max(current - actualPadding, 1), Math.min(current + actualPadding, total) + 1)\n  }, [current, total, padding, withoutNumbers])\n\n  const prevAttrs = {\n    disabled: current === 1,\n    direction: 'prev' as const,\n    hrefTemplate,\n    linkAs,\n  }\n  const nextAttrs = {\n    disabled: current === total,\n    direction: 'next' as const,\n    hrefTemplate,\n    linkAs,\n  }\n\n  return (\n    <Cluster as=\"ul\" className={classNames.list}>\n      <DoubleIconItemButton {...prevAttrs} targetPage={1} className={classNames.firstListItem} />\n      <li className={classNames.prevListItem}>\n        <PaginationControllerItemButton {...prevAttrs} targetPage={current - 1} />\n      </li>\n      {pageNumbers.map((page) => (\n        <NumberItemButton\n          key={page}\n          page={page}\n          disabled={page === current}\n          hrefTemplate={hrefTemplate}\n          linkAs={linkAs}\n        />\n      ))}\n      <li className={classNames.nextListItem}>\n        <PaginationControllerItemButton {...nextAttrs} targetPage={current + 1} />\n      </li>\n      <DoubleIconItemButton {...nextAttrs} targetPage={total} className={classNames.lastListItem} />\n    </Cluster>\n  )\n})\n\nconst NumberItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & { page: number; disabled: boolean }\n>(({ disabled, ...rest }) => (\n  <li className={`smarthr-ui-Pagination-${disabled ? 'current' : 'page'}`}>\n    <PaginationItemButton {...rest} disabled={disabled} />\n  </li>\n))\n\nconst DoubleIconItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & {\n    disabled: boolean\n    direction: 'prev' | 'next'\n    targetPage: number\n    className: string\n  }\n>(({ className, ...rest }) => (\n  <li className={className}>\n    <PaginationControllerItemButton {...rest} double />\n  </li>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACF;AACF;AAiCD;AACA;AAEA;AAGO;AAGP;AAWE;AACE;;;AAKE;;AAEA;AACA;AACA;AACA;;AAEJ;;AAGA;AAEA;AAEI;;AAEE;AACF;AACE;;;AAIA;;;;;AAOE;;AAGI;;;;;;AAMA;;;;AAOT;AAIH;AACE;AACE;AACA;AACD;AACF;;AAiBH;AAEA;AAWE;;AAEI;;AAGF;;;AAKF;;AAEE;;;;AAIF;;AAEE;;;;;AA0BJ;AAEA;AAQA;;"}

package/lib/components/Pagination/Pagination.js

@@ -9,7 +9,8 @@ import 'react-intl';
 import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
-import { range } from '../../libs/lodash.js';
+import '../../_virtual/index.js';
+import range from '../../_virtual/index2.js';
 import '../Layout/Stack/Stack.js';
 import { Cluster } from '../Layout/Cluster/Cluster.js';
 import { Reel } from '../Layout/Reel/Reel.js';

package/lib/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ElementType,\n  type FC,\n  type HTMLAttributes,\n  type MouseEvent,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useLocalize } from '../../intl'\nimport { range } from '../../libs/lodash'\nimport { Cluster, Reel } from '../Layout'\nimport { Nav } from '../SectioningContent'\n\nimport { PaginationControllerItemButton } from './PaginationControllerItemButton'\nimport { PaginationItemButton } from './PaginationItemButton'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Pagination shr-inline-block shr-max-w-full',\n    list: 'shr-m-0.25 shr-list-none shr-ps-[unset]',\n    firstListItem: 'smarthr-ui-Pagination-first',\n    prevListItem: 'smarthr-ui-Pagination-prev',\n    nextListItem: 'smarthr-ui-Pagination-next',\n    lastListItem: 'smarthr-ui-Pagination-last',\n  },\n  variants: {\n    withoutNumbers: {\n      true: {\n        firstListItem: 'shr-mr-0.5',\n        prevListItem: 'shr-mr-0',\n        nextListItem: 'shr-ml-0',\n        lastListItem: 'shr-ml-0.5',\n      },\n      false: {\n        prevListItem: 'shr-mr-0.5',\n        nextListItem: 'shr-ml-0.5',\n      },\n    },\n  },\n})\n\ntype CommonProps = {\n  /** 全ページ数 */\n  total: number\n  /** 現在のページ */\n  current: number\n  /** 現在のページの前後に表示するページ番号のボタンの数 */\n  padding?: number\n  /** `true` のとき、ページ番号のボタンを表示しない */\n  withoutNumbers?: boolean\n}\n\ntype ButtonProps = CommonProps & {\n  /** ボタンを押下したときに発火するコールバック関数 */\n  onClick: (pageNumber: number, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate?: undefined\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: undefined\n}\ntype AnchorProps = CommonProps & {\n  /** リンクを押下したときに発火するコールバック関数 */\n  onClick?: (href: string, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate: (pageNumber: number) => string\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: ElementType\n}\n\ntype BaseProps = ButtonProps | AnchorProps\ntype Props = BaseProps & Omit<HTMLAttributes<HTMLElement>, keyof BaseProps>\n\nconst BUTTON_REGEX = /^button$/i\nconst ANCHOR_REGEX = /^a/i\n\nconst getTargetDelegateElement = (e: MouseEvent<HTMLElement>, regex: RegExp) =>\n  (e.nativeEvent.composedPath() as HTMLElement[]).find((elm) => regex.test(elm.tagName))\n\nexport const Pagination: FC<Props> = (props) =>\n  props.total > 1 ? <ActualPagination {...props} /> : null\n\nconst ActualPagination: FC<Props> = ({\n  total,\n  current,\n  onClick,\n  padding,\n  className,\n  withoutNumbers,\n  hrefTemplate,\n  linkAs,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, list, firstListItem, prevListItem, nextListItem, lastListItem } =\n      classNameGenerator()\n    const itemArg = { withoutNumbers: withoutNumbers || false }\n\n    return {\n      wrapper: wrapper({ className }),\n      list: list(),\n      firstListItem: firstListItem(itemArg),\n      prevListItem: prevListItem(itemArg),\n      nextListItem: nextListItem(itemArg),\n      lastListItem: lastListItem(itemArg),\n    }\n  }, [className, withoutNumbers])\n\n  const latest = useLatest({ onClick, hrefTemplate })\n  const hasHrefTemplate = !!hrefTemplate\n\n  const functions = useMemo(\n    () => ({\n      actualHrefTemplate: hasHrefTemplate\n        ? (pageNumber: number) => latest.hrefTemplate!(pageNumber)\n        : undefined,\n      handleDelegateClick: (e: MouseEvent<HTMLElement>) => {\n        if (!latest.onClick) {\n          return\n        }\n\n        if (latest.hrefTemplate) {\n          const anchor = getTargetDelegateElement(e, ANCHOR_REGEX)\n\n          if (!anchor) {\n            return\n          }\n\n          const href = (anchor as HTMLAnchorElement).href\n\n          if (href) {\n            ;(latest.onClick as (href: string, e: MouseEvent<HTMLElement>) => void)(href, e)\n          }\n        } else {\n          const button = getTargetDelegateElement(e, BUTTON_REGEX)\n\n          if (button) {\n            ;(latest.onClick as (pageNumber: number, e: MouseEvent<HTMLElement>) => void)(\n              parseInt((button as HTMLButtonElement).value, 10),\n              e,\n            )\n          }\n        }\n      },\n    }),\n    [hasHrefTemplate, latest],\n  )\n\n  const { navigationLabel } = useLocalize({\n    navigationLabel: {\n      id: 'smarthr-ui/Pagination/navigationLabel',\n      defaultText: 'ページネーション',\n    },\n  })\n\n  return (\n    <Nav {...rest} className={classNames.wrapper} aria-label={navigationLabel}>\n      <Reel onClick={functions.handleDelegateClick}>\n        <ItemButtons\n          total={total}\n          current={current}\n          padding={padding}\n          withoutNumbers={withoutNumbers}\n          hrefTemplate={functions.actualHrefTemplate}\n          classNames={classNames}\n          linkAs={linkAs}\n        />\n      </Reel>\n    </Nav>\n  )\n}\n\nconst ItemButtons = memo<\n  Pick<Props, 'total' | 'current' | 'padding' | 'withoutNumbers' | 'hrefTemplate' | 'linkAs'> & {\n    classNames: {\n      list: string\n      firstListItem: string\n      prevListItem: string\n      nextListItem: string\n      lastListItem: string\n    }\n  }\n>(({ total, current, padding, withoutNumbers, hrefTemplate, classNames, linkAs }) => {\n  const pageNumbers = useMemo(() => {\n    if (withoutNumbers) {\n      return []\n    }\n\n    const actualPadding = padding ?? 4\n\n    return range(Math.max(current - actualPadding, 1), Math.min(current + actualPadding, total) + 1)\n  }, [current, total, padding, withoutNumbers])\n\n  const prevAttrs = {\n    disabled: current === 1,\n    direction: 'prev' as const,\n    hrefTemplate,\n    linkAs,\n  }\n  const nextAttrs = {\n    disabled: current === total,\n    direction: 'next' as const,\n    hrefTemplate,\n    linkAs,\n  }\n\n  return (\n    <Cluster as=\"ul\" className={classNames.list}>\n      <DoubleIconItemButton {...prevAttrs} targetPage={1} className={classNames.firstListItem} />\n      <li className={classNames.prevListItem}>\n        <PaginationControllerItemButton {...prevAttrs} targetPage={current - 1} />\n      </li>\n      {pageNumbers.map((page) => (\n        <NumberItemButton\n          key={page}\n          page={page}\n          disabled={page === current}\n          hrefTemplate={hrefTemplate}\n          linkAs={linkAs}\n        />\n      ))}\n      <li className={classNames.nextListItem}>\n        <PaginationControllerItemButton {...nextAttrs} targetPage={current + 1} />\n      </li>\n      <DoubleIconItemButton {...nextAttrs} targetPage={total} className={classNames.lastListItem} />\n    </Cluster>\n  )\n})\n\nconst NumberItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & { page: number; disabled: boolean }\n>(({ disabled, ...rest }) => (\n  <li className={`smarthr-ui-Pagination-${disabled ? 'current' : 'page'}`}>\n    <PaginationItemButton {...rest} disabled={disabled} />\n  </li>\n))\n\nconst DoubleIconItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & {\n    disabled: boolean\n    direction: 'prev' | 'next'\n    targetPage: number\n    className: string\n  }\n>(({ className, ...rest }) => (\n  <li className={className}>\n    <PaginationControllerItemButton {...rest} double />\n  </li>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqBA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACF;AACF;AAiCD;AACA;AAEA;AAGO;AAGP;AAWE;AACE;;;AAKE;;AAEA;AACA;AACA;AACA;;AAEJ;;AAGA;AAEA;AAEI;;AAEE;AACF;AACE;;;AAIA;;;;;AAOE;;AAGI;;;;;;AAMA;;;;AAOT;AAIH;AACE;AACE;AACA;AACD;AACF;;AAiBH;AAEA;AAWE;;AAEI;;AAGF;;;AAKF;;AAEE;;;;AAIF;;AAEE;;;;;AA0BJ;AAEA;AAQA;;"}
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ElementType,\n  type FC,\n  type HTMLAttributes,\n  type MouseEvent,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../hooks/useLatest'\nimport { useLocalize } from '../../intl'\nimport { range } from '../../libs/lodash'\nimport { Cluster, Reel } from '../Layout'\nimport { Nav } from '../SectioningContent'\n\nimport { PaginationControllerItemButton } from './PaginationControllerItemButton'\nimport { PaginationItemButton } from './PaginationItemButton'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Pagination shr-inline-block shr-max-w-full',\n    list: 'shr-m-0.25 shr-list-none shr-ps-[unset]',\n    firstListItem: 'smarthr-ui-Pagination-first',\n    prevListItem: 'smarthr-ui-Pagination-prev',\n    nextListItem: 'smarthr-ui-Pagination-next',\n    lastListItem: 'smarthr-ui-Pagination-last',\n  },\n  variants: {\n    withoutNumbers: {\n      true: {\n        firstListItem: 'shr-mr-0.5',\n        prevListItem: 'shr-mr-0',\n        nextListItem: 'shr-ml-0',\n        lastListItem: 'shr-ml-0.5',\n      },\n      false: {\n        prevListItem: 'shr-mr-0.5',\n        nextListItem: 'shr-ml-0.5',\n      },\n    },\n  },\n})\n\ntype CommonProps = {\n  /** 全ページ数 */\n  total: number\n  /** 現在のページ */\n  current: number\n  /** 現在のページの前後に表示するページ番号のボタンの数 */\n  padding?: number\n  /** `true` のとき、ページ番号のボタンを表示しない */\n  withoutNumbers?: boolean\n}\n\ntype ButtonProps = CommonProps & {\n  /** ボタンを押下したときに発火するコールバック関数 */\n  onClick: (pageNumber: number, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate?: undefined\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: undefined\n}\ntype AnchorProps = CommonProps & {\n  /** リンクを押下したときに発火するコールバック関数 */\n  onClick?: (href: string, e: MouseEvent<HTMLElement>) => void\n  /** href属性生成用関数。設定した場合、番号やarrowがbuttonからa要素に置き換わります */\n  hrefTemplate: (pageNumber: number) => string\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  linkAs?: ElementType\n}\n\ntype BaseProps = ButtonProps | AnchorProps\ntype Props = BaseProps & Omit<HTMLAttributes<HTMLElement>, keyof BaseProps>\n\nconst BUTTON_REGEX = /^button$/i\nconst ANCHOR_REGEX = /^a/i\n\nconst getTargetDelegateElement = (e: MouseEvent<HTMLElement>, regex: RegExp) =>\n  (e.nativeEvent.composedPath() as HTMLElement[]).find((elm) => regex.test(elm.tagName))\n\nexport const Pagination: FC<Props> = (props) =>\n  props.total > 1 ? <ActualPagination {...props} /> : null\n\nconst ActualPagination: FC<Props> = ({\n  total,\n  current,\n  onClick,\n  padding,\n  className,\n  withoutNumbers,\n  hrefTemplate,\n  linkAs,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, list, firstListItem, prevListItem, nextListItem, lastListItem } =\n      classNameGenerator()\n    const itemArg = { withoutNumbers: withoutNumbers || false }\n\n    return {\n      wrapper: wrapper({ className }),\n      list: list(),\n      firstListItem: firstListItem(itemArg),\n      prevListItem: prevListItem(itemArg),\n      nextListItem: nextListItem(itemArg),\n      lastListItem: lastListItem(itemArg),\n    }\n  }, [className, withoutNumbers])\n\n  const latest = useLatest({ onClick, hrefTemplate })\n  const hasHrefTemplate = !!hrefTemplate\n\n  const functions = useMemo(\n    () => ({\n      actualHrefTemplate: hasHrefTemplate\n        ? (pageNumber: number) => latest.hrefTemplate!(pageNumber)\n        : undefined,\n      handleDelegateClick: (e: MouseEvent<HTMLElement>) => {\n        if (!latest.onClick) {\n          return\n        }\n\n        if (latest.hrefTemplate) {\n          const anchor = getTargetDelegateElement(e, ANCHOR_REGEX)\n\n          if (!anchor) {\n            return\n          }\n\n          const href = (anchor as HTMLAnchorElement).href\n\n          if (href) {\n            ;(latest.onClick as (href: string, e: MouseEvent<HTMLElement>) => void)(href, e)\n          }\n        } else {\n          const button = getTargetDelegateElement(e, BUTTON_REGEX)\n\n          if (button) {\n            ;(latest.onClick as (pageNumber: number, e: MouseEvent<HTMLElement>) => void)(\n              parseInt((button as HTMLButtonElement).value, 10),\n              e,\n            )\n          }\n        }\n      },\n    }),\n    [hasHrefTemplate, latest],\n  )\n\n  const { navigationLabel } = useLocalize({\n    navigationLabel: {\n      id: 'smarthr-ui/Pagination/navigationLabel',\n      defaultText: 'ページネーション',\n    },\n  })\n\n  return (\n    <Nav {...rest} className={classNames.wrapper} aria-label={navigationLabel}>\n      <Reel onClick={functions.handleDelegateClick}>\n        <ItemButtons\n          total={total}\n          current={current}\n          padding={padding}\n          withoutNumbers={withoutNumbers}\n          hrefTemplate={functions.actualHrefTemplate}\n          classNames={classNames}\n          linkAs={linkAs}\n        />\n      </Reel>\n    </Nav>\n  )\n}\n\nconst ItemButtons = memo<\n  Pick<Props, 'total' | 'current' | 'padding' | 'withoutNumbers' | 'hrefTemplate' | 'linkAs'> & {\n    classNames: {\n      list: string\n      firstListItem: string\n      prevListItem: string\n      nextListItem: string\n      lastListItem: string\n    }\n  }\n>(({ total, current, padding, withoutNumbers, hrefTemplate, classNames, linkAs }) => {\n  const pageNumbers = useMemo(() => {\n    if (withoutNumbers) {\n      return []\n    }\n\n    const actualPadding = padding ?? 4\n\n    return range(Math.max(current - actualPadding, 1), Math.min(current + actualPadding, total) + 1)\n  }, [current, total, padding, withoutNumbers])\n\n  const prevAttrs = {\n    disabled: current === 1,\n    direction: 'prev' as const,\n    hrefTemplate,\n    linkAs,\n  }\n  const nextAttrs = {\n    disabled: current === total,\n    direction: 'next' as const,\n    hrefTemplate,\n    linkAs,\n  }\n\n  return (\n    <Cluster as=\"ul\" className={classNames.list}>\n      <DoubleIconItemButton {...prevAttrs} targetPage={1} className={classNames.firstListItem} />\n      <li className={classNames.prevListItem}>\n        <PaginationControllerItemButton {...prevAttrs} targetPage={current - 1} />\n      </li>\n      {pageNumbers.map((page) => (\n        <NumberItemButton\n          key={page}\n          page={page}\n          disabled={page === current}\n          hrefTemplate={hrefTemplate}\n          linkAs={linkAs}\n        />\n      ))}\n      <li className={classNames.nextListItem}>\n        <PaginationControllerItemButton {...nextAttrs} targetPage={current + 1} />\n      </li>\n      <DoubleIconItemButton {...nextAttrs} targetPage={total} className={classNames.lastListItem} />\n    </Cluster>\n  )\n})\n\nconst NumberItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & { page: number; disabled: boolean }\n>(({ disabled, ...rest }) => (\n  <li className={`smarthr-ui-Pagination-${disabled ? 'current' : 'page'}`}>\n    <PaginationItemButton {...rest} disabled={disabled} />\n  </li>\n))\n\nconst DoubleIconItemButton = memo<\n  Pick<Props, 'hrefTemplate' | 'linkAs'> & {\n    disabled: boolean\n    direction: 'prev' | 'next'\n    targetPage: number\n    className: string\n  }\n>(({ className, ...rest }) => (\n  <li className={className}>\n    <PaginationControllerItemButton {...rest} double />\n  </li>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAqBA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACE;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACF;AACF;AAiCD;AACA;AAEA;AAGO;AAGP;AAWE;AACE;;;AAKE;;AAEA;AACA;AACA;AACA;;AAEJ;;AAGA;AAEA;AAEI;;AAEE;AACF;AACE;;;AAIA;;;;;AAOE;;AAGI;;;;;;AAMA;;;;AAOT;AAIH;AACE;AACE;AACA;AACD;AACF;;AAiBH;AAEA;AAWE;;AAEI;;AAGF;;;AAKF;;AAEE;;;;AAIF;;AAEE;;;;;AA0BJ;AAEA;AAQA;;"}

package/lib/components/Panel/Groupbox/Groupbox.cjs

@@ -29,6 +29,7 @@ const classNameGenerator = index.tv({
             left: 'shr-rounded-l-l',
         },
     },
+    // TODO: tailwindの場合のみdefault値が設定される挙動はバグの原因になりかねないので整理する
     defaultVariants: {
         bgColor: 'COLUMN',
         rounded: false,

package/lib/components/Panel/Groupbox/Groupbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Groupbox.cjs","sources":["../../../../src/components/Panel/Groupbox/Groupbox.tsx"],"sourcesContent":["import { type ComponentProps, type FC, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor } from '../../../tailwind'\nimport { Panel } from '../Panel'\n\ntype BaseProps = Omit<ComponentProps<typeof Panel>, 'radius' | 'layer'> &\n  VariantProps<typeof classNameGenerator>\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: 'shr-rounded-[unset]',\n  variants: {\n    bgColor: backgroundColor,\n    rounded: {\n      true: 'shr-rounded-l',\n      all: 'shr-rounded-l',\n      top: 'shr-rounded-t-l',\n      right: 'shr-rounded-r-l',\n      bottom: 'shr-rounded-b-l',\n      left: 'shr-rounded-l-l',\n    },\n  },\n  defaultVariants: {\n    bgColor: 'COLUMN',\n    rounded: false,\n  },\n})\n\nexport const Groupbox: FC<Props> = ({ bgColor, rounded, padding = 1, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ bgColor, rounded, className }),\n    [bgColor, rounded, className],\n  )\n\n  return <Panel {...rest} padding={padding} layer={0} className={actualClassName} />\n}\n"],"names":["tv","backgroundColor","useMemo","_jsx","Panel"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAEC,wCAAe;AACxB,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,eAAe;AACrB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,GAAG,EAAE,iBAAiB;AACtB,YAAA,KAAK,EAAE,iBAAiB;AACxB,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,IAAI,EAAE,iBAAiB;AACxB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;MAEW,QAAQ,GAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;IAC3F,MAAM,eAAe,GAAGC,aAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EACzD,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9B;AAED,IAAA,OAAOC,eAACC,4BAAK,EAAA,EAAA,GAAK,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,GAAI;AACpF;;;;"}
+{"version":3,"file":"Groupbox.cjs","sources":["../../../../src/components/Panel/Groupbox/Groupbox.tsx"],"sourcesContent":["import { type ComponentProps, type FC, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor } from '../../../tailwind'\nimport { Panel } from '../Panel'\n\ntype BaseProps = Omit<ComponentProps<typeof Panel>, 'radius' | 'layer'> &\n  VariantProps<typeof classNameGenerator>\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: 'shr-rounded-[unset]',\n  variants: {\n    bgColor: backgroundColor,\n    rounded: {\n      true: 'shr-rounded-l',\n      all: 'shr-rounded-l',\n      top: 'shr-rounded-t-l',\n      right: 'shr-rounded-r-l',\n      bottom: 'shr-rounded-b-l',\n      left: 'shr-rounded-l-l',\n    },\n  },\n  // TODO: tailwindの場合のみdefault値が設定される挙動はバグの原因になりかねないので整理する\n  defaultVariants: {\n    bgColor: 'COLUMN',\n    rounded: false,\n  },\n})\n\nexport const Groupbox: FC<Props> = ({ bgColor, rounded, padding = 1, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ bgColor, rounded, className }),\n    [bgColor, rounded, className],\n  )\n\n  return <Panel {...rest} padding={padding} layer={0} className={actualClassName} />\n}\n"],"names":["tv","backgroundColor","useMemo","_jsx","Panel"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAEC,wCAAe;AACxB,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,eAAe;AACrB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,GAAG,EAAE,iBAAiB;AACtB,YAAA,KAAK,EAAE,iBAAiB;AACxB,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,IAAI,EAAE,iBAAiB;AACxB,SAAA;AACF,KAAA;;AAED,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;MAEW,QAAQ,GAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;IAC3F,MAAM,eAAe,GAAGC,aAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EACzD,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9B;AAED,IAAA,OAAOC,eAACC,4BAAK,EAAA,EAAA,GAAK,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,GAAI;AACpF;;;;"}

package/lib/components/Panel/Groupbox/Groupbox.js

@@ -27,6 +27,7 @@ const classNameGenerator = ce({
             left: 'shr-rounded-l-l',
         },
     },
+    // TODO: tailwindの場合のみdefault値が設定される挙動はバグの原因になりかねないので整理する
     defaultVariants: {
         bgColor: 'COLUMN',
         rounded: false,

package/lib/components/Panel/Groupbox/Groupbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Groupbox.js","sources":["../../../../src/components/Panel/Groupbox/Groupbox.tsx"],"sourcesContent":["import { type ComponentProps, type FC, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor } from '../../../tailwind'\nimport { Panel } from '../Panel'\n\ntype BaseProps = Omit<ComponentProps<typeof Panel>, 'radius' | 'layer'> &\n  VariantProps<typeof classNameGenerator>\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: 'shr-rounded-[unset]',\n  variants: {\n    bgColor: backgroundColor,\n    rounded: {\n      true: 'shr-rounded-l',\n      all: 'shr-rounded-l',\n      top: 'shr-rounded-t-l',\n      right: 'shr-rounded-r-l',\n      bottom: 'shr-rounded-b-l',\n      left: 'shr-rounded-l-l',\n    },\n  },\n  defaultVariants: {\n    bgColor: 'COLUMN',\n    rounded: false,\n  },\n})\n\nexport const Groupbox: FC<Props> = ({ bgColor, rounded, padding = 1, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ bgColor, rounded, className }),\n    [bgColor, rounded, className],\n  )\n\n  return <Panel {...rest} padding={padding} layer={0} className={actualClassName} />\n}\n"],"names":["tv","_jsx"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE,eAAe;AACxB,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,eAAe;AACrB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,GAAG,EAAE,iBAAiB;AACtB,YAAA,KAAK,EAAE,iBAAiB;AACxB,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,IAAI,EAAE,iBAAiB;AACxB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;MAEW,QAAQ,GAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;IAC3F,MAAM,eAAe,GAAG,OAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EACzD,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9B;AAED,IAAA,OAAOC,IAAC,KAAK,EAAA,EAAA,GAAK,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,GAAI;AACpF;;;;"}
+{"version":3,"file":"Groupbox.js","sources":["../../../../src/components/Panel/Groupbox/Groupbox.tsx"],"sourcesContent":["import { type ComponentProps, type FC, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor } from '../../../tailwind'\nimport { Panel } from '../Panel'\n\ntype BaseProps = Omit<ComponentProps<typeof Panel>, 'radius' | 'layer'> &\n  VariantProps<typeof classNameGenerator>\ntype Props = BaseProps & Omit<ComponentProps<'div'>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  base: 'shr-rounded-[unset]',\n  variants: {\n    bgColor: backgroundColor,\n    rounded: {\n      true: 'shr-rounded-l',\n      all: 'shr-rounded-l',\n      top: 'shr-rounded-t-l',\n      right: 'shr-rounded-r-l',\n      bottom: 'shr-rounded-b-l',\n      left: 'shr-rounded-l-l',\n    },\n  },\n  // TODO: tailwindの場合のみdefault値が設定される挙動はバグの原因になりかねないので整理する\n  defaultVariants: {\n    bgColor: 'COLUMN',\n    rounded: false,\n  },\n})\n\nexport const Groupbox: FC<Props> = ({ bgColor, rounded, padding = 1, className, ...rest }) => {\n  const actualClassName = useMemo(\n    () => classNameGenerator({ bgColor, rounded, className }),\n    [bgColor, rounded, className],\n  )\n\n  return <Panel {...rest} padding={padding} layer={0} className={actualClassName} />\n}\n"],"names":["tv","_jsx"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,qBAAqB;AAC3B,IAAA,QAAQ,EAAE;AACR,QAAA,OAAO,EAAE,eAAe;AACxB,QAAA,OAAO,EAAE;AACP,YAAA,IAAI,EAAE,eAAe;AACrB,YAAA,GAAG,EAAE,eAAe;AACpB,YAAA,GAAG,EAAE,iBAAiB;AACtB,YAAA,KAAK,EAAE,iBAAiB;AACxB,YAAA,MAAM,EAAE,iBAAiB;AACzB,YAAA,IAAI,EAAE,iBAAiB;AACxB,SAAA;AACF,KAAA;;AAED,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,QAAQ;AACjB,QAAA,OAAO,EAAE,KAAK;AACf,KAAA;AACF,CAAA,CAAC;MAEW,QAAQ,GAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;IAC3F,MAAM,eAAe,GAAG,OAAO,CAC7B,MAAM,kBAAkB,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EACzD,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAC9B;AAED,IAAA,OAAOC,IAAC,KAAK,EAAA,EAAA,GAAK,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,eAAe,GAAI;AACpF;;;;"}

package/lib/components/Select/Select.cjs

@@ -60,12 +60,17 @@ const ActualSelect = ({ options, onChange, onChangeValue, error, width, hasBlank
             iconWrap: iconWrap(sizeProps),
             blankOptGroup: blankOptgroup(),
         };
-    }, [className, size]);
-    const wrapperStyle = React.useMemo(() => ({
-        width: typeof width === 'number' ? `${width}px` : width,
-    }), [width]);
-    const actualBlankLabel = blankLabel ?? '';
-    return (jsxRuntime.jsxs("span", { className: classNames.wrapper, style: wrapperStyle, children: [jsxRuntime.jsxs("select", { ...rest, "data-smarthr-ui-input": "true", onChange: (e) => {
+    }, [size, className]);
+    return (jsxRuntime.jsxs("span", { className: classNames.wrapper, style: {
+            width: typeof width === 'number' ? `${width}px` : width,
+        }, children: [jsxRuntime.jsxs("select", { ...rest, ref: ref, disabled: disabled, 
+                // HINT: required属性を設定すると、iOS端末で以下の問題が発生します
+                //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない
+                //    - エラーメッセージが表示されない
+                //    - 問題のある入力フィールドまでスクロールしない
+                // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです
+                // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります
+                required: libs_ua.isIOS ? undefined : required, "aria-invalid": error || undefined, "data-smarthr-ui-input": "true", onChange: (e) => {
                     onChange?.(e);
                     if (onChangeValue) {
                         const selectedOption = options
@@ -75,14 +80,7 @@ const ActualSelect = ({ options, onChange, onChangeValue, error, width, hasBlank
                             onChangeValue(selectedOption.value);
                         }
                     }
-                }, "aria-invalid": error || undefined, disabled: disabled, 
-                // HINT: required属性を設定すると、iOS端末で以下の問題が発生します
-                //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない
-                //    - エラーメッセージが表示されない
-                //    - 問題のある入力フィールドまでスクロールしない
-                // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです
-                // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります
-                required: libs_ua.isIOS ? undefined : required, ref: ref, className: classNames.select, children: [jsxRuntime.jsx(BlankOption, { hasBlank: hasBlank, children: actualBlankLabel }), options.map((option, index) => (React.createElement(Option, { ...option, key: index }))), jsxRuntime.jsx(NotOmittingLabelsInMobileSafari, { className: classNames.blankOptGroup })] }), jsxRuntime.jsx("span", { className: classNames.iconWrap, children: jsxRuntime.jsx(components_Icon_FaIcon.FaAngleDownIcon, {}) })] }));
+                }, className: classNames.select, children: [jsxRuntime.jsx(BlankOption, { hasBlank: hasBlank, children: blankLabel ?? '' }), options.map((option, index) => (React.createElement(Option, { ...option, key: index }))), jsxRuntime.jsx(NotOmittingLabelsInMobileSafari, { className: classNames.blankOptGroup })] }), jsxRuntime.jsx("span", { className: classNames.iconWrap, children: jsxRuntime.jsx(components_Icon_FaIcon.FaAngleDownIcon, {}) })] }));
 };
 const BlankOption = React.memo(({ hasBlank, children }) => hasBlank && jsxRuntime.jsx("option", { value: "", children: children }));
 const Option = React.memo((option) => {

package/lib/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type OptgroupHTMLAttributes,\n  type OptionHTMLAttributes,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { isIOS, isMobileSafari } from '../../libs/ua'\nimport { genericsForwardRef } from '../../libs/util'\nimport { FaAngleDownIcon } from '../Icon'\n\ntype Option<T extends string> = {\n  value: T\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\ntype Optgroup<T extends string> = {\n  label: string\n  options: Array<Option<T>>\n} & OptgroupHTMLAttributes<HTMLOptGroupElement>\n\ntype BaseProps<T extends string> = {\n  /** 選択肢のデータの配列 */\n  options: Array<Option<T> | Optgroup<T>>\n  /** フォームの値が変わったときに発火するコールバック関数 */\n  onChangeValue?: (value: T) => void\n  /** フォームの値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** コンポーネントの大きさ */\n  size?: 'M' | 'S'\n  /** 空の選択肢を表示するかどうか */\n  hasBlank?: boolean\n  /** 空の選択肢のラベル */\n  blankLabel?: string\n}\n\ntype Props<T extends string> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'select'>, keyof BaseProps<string> | 'children'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Select shr-relative shr-inline-block',\n    select: [\n      'shr-peer shr-border-shorthand shr-w-full shr-cursor-pointer shr-appearance-none shr-rounded-m shr-bg-white shr-text-base shr-leading-tight shr-text-black',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-white-darken disabled:shr-text-disabled disabled:shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      /* padding に依る積み上げでは文字が見切れてしまうため */\n      'shr-min-h-[calc(theme(fontSize.base)_+_theme(spacing[0.75])_*_2_+_theme(spacing.px)_*_2)]',\n      'shr-border-default disabled:shr-border-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-inset-y-0 shr-inline-flex shr-items-center shr-text-grey',\n      'peer-focus-visible:shr-text-black peer-disabled:shr-text-disabled',\n    ],\n    blankOptgroup: 'shr-hidden',\n  },\n  variants: {\n    size: {\n      M: {\n        select: 'shr-py-0.5 shr-pe-2 shr-ps-0.5',\n        // ((右 padding - アイコン幅) / 2) + 右 border\n        iconWrap: 'shr-end-[calc(theme(spacing[0.5])_+_theme(spacing.px))]',\n      },\n      S: {\n        select: [\n          'shr-px-0.5 shr-py-0.25 shr-pe-1.5 shr-text-sm',\n          /* padding に依る積み上げでは文字が見切れてしまうため */\n          'shr-min-h-[calc(theme(fontSize.sm)_+_theme(spacing[0.5])_*_2_+_theme(spacing.px)_*_2)]',\n        ],\n        iconWrap: 'shr-end-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nconst ActualSelect = <T extends string>(\n  {\n    options,\n    onChange,\n    onChangeValue,\n    error,\n    width,\n    hasBlank,\n    blankLabel,\n    size,\n    className,\n    disabled,\n    required,\n    ...rest\n  }: Props<T>,\n  ref: ForwardedRef<HTMLSelectElement>,\n) => {\n  const classNames = useMemo(() => {\n    const { wrapper, select, iconWrap, blankOptgroup } = classNameGenerator()\n    const sizeProps = {\n      size: size || 'M',\n    }\n\n    return {\n      wrapper: wrapper({ className }),\n      select: select(sizeProps),\n      iconWrap: iconWrap(sizeProps),\n      blankOptGroup: blankOptgroup(),\n    }\n  }, [className, size])\n  const wrapperStyle = useMemo(\n    () => ({\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [width],\n  )\n\n  const actualBlankLabel = blankLabel ?? ''\n\n  return (\n    <span className={classNames.wrapper} style={wrapperStyle}>\n      <select\n        {...rest}\n        data-smarthr-ui-input=\"true\"\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          onChange?.(e)\n\n          if (onChangeValue) {\n            const selectedOption = options\n              .flatMap((option) => ('value' in option ? [option] : option.options))\n              .find((option) => option.value === e.target.value)\n\n            if (selectedOption) {\n              onChangeValue(selectedOption.value)\n            }\n          }\n        }}\n        aria-invalid={error || undefined}\n        disabled={disabled}\n        // HINT: required属性を設定すると、iOS端末で以下の問題が発生します\n        //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない\n        //    - エラーメッセージが表示されない\n        //    - 問題のある入力フィールドまでスクロールしない\n        // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです\n        // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります\n        required={isIOS ? undefined : required}\n        ref={ref}\n        className={classNames.select}\n      >\n        <BlankOption hasBlank={hasBlank}>{actualBlankLabel}</BlankOption>\n        {options.map((option, index) => (\n          <Option {...option} key={index} />\n        ))}\n        <NotOmittingLabelsInMobileSafari className={classNames.blankOptGroup} />\n      </select>\n      <span className={classNames.iconWrap}>\n        <FaAngleDownIcon />\n      </span>\n    </span>\n  )\n}\n\nconst BlankOption = memo<\n  PropsWithChildren<{\n    hasBlank: boolean | undefined\n  }>\n>(({ hasBlank, children }) => hasBlank && <option value=\"\">{children}</option>)\n\nconst Option = memo<Props<string>['options'][number]>((option) => {\n  if ('value' in option) {\n    return <option {...option}>{option.label}</option>\n  }\n\n  const { options: groupedOptions, label, ...rest } = option\n\n  return (\n    <optgroup {...rest} key={label} label={label}>\n      {groupedOptions.map((groupedOption) => (\n        <option {...groupedOption} key={groupedOption.value}>\n          {groupedOption.label}\n        </option>\n      ))}\n    </optgroup>\n  )\n})\n\n// Support for not omitting labels in Mobile Safari\nconst NotOmittingLabelsInMobileSafari = memo<{ className: string }>(\n  ({ className }) => isMobileSafari && <optgroup className={className} />,\n)\n\nexport const Select = genericsForwardRef(ActualSelect)\n"],"names":[],"mappings":";;;;;;;;;;;;AA8CA;AACE;AACE;AACA;;;;;;;;;;AAUC;AACD;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;;AAEA;AACD;AACD;AACE;;;;AAIC;AACD;AACD;AACF;AACF;AACF;AAED;AAiBE;AACE;AACA;;;;AAKE;AACA;AACA;;;AAGJ;AACA;AAEI;AACD;AAIH;;AAQQ;;;;AAKK;;AAGD;;;AAGN;;;;;;;AASA;AAeR;AAEA;AAMA;AACE;AACE;;AAGF;AAEA;AASF;AAEA;AACA;;;"}
+{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type OptgroupHTMLAttributes,\n  type OptionHTMLAttributes,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { isIOS, isMobileSafari } from '../../libs/ua'\nimport { genericsForwardRef } from '../../libs/util'\nimport { FaAngleDownIcon } from '../Icon'\n\ntype Option<T extends string> = {\n  value: T\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\ntype Optgroup<T extends string> = {\n  label: string\n  options: Array<Option<T>>\n} & OptgroupHTMLAttributes<HTMLOptGroupElement>\n\ntype BaseProps<T extends string> = {\n  /** 選択肢のデータの配列 */\n  options: Array<Option<T> | Optgroup<T>>\n  /** フォームの値が変わったときに発火するコールバック関数 */\n  onChangeValue?: (value: T) => void\n  /** フォームの値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** コンポーネントの大きさ */\n  size?: 'M' | 'S'\n  /** 空の選択肢を表示するかどうか */\n  hasBlank?: boolean\n  /** 空の選択肢のラベル */\n  blankLabel?: string\n}\n\ntype Props<T extends string> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'select'>, keyof BaseProps<string> | 'children'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Select shr-relative shr-inline-block',\n    select: [\n      'shr-peer shr-border-shorthand shr-w-full shr-cursor-pointer shr-appearance-none shr-rounded-m shr-bg-white shr-text-base shr-leading-tight shr-text-black',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-white-darken disabled:shr-text-disabled disabled:shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      /* padding に依る積み上げでは文字が見切れてしまうため */\n      'shr-min-h-[calc(theme(fontSize.base)_+_theme(spacing[0.75])_*_2_+_theme(spacing.px)_*_2)]',\n      'shr-border-default disabled:shr-border-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-inset-y-0 shr-inline-flex shr-items-center shr-text-grey',\n      'peer-focus-visible:shr-text-black peer-disabled:shr-text-disabled',\n    ],\n    blankOptgroup: 'shr-hidden',\n  },\n  variants: {\n    size: {\n      M: {\n        select: 'shr-py-0.5 shr-pe-2 shr-ps-0.5',\n        // ((右 padding - アイコン幅) / 2) + 右 border\n        iconWrap: 'shr-end-[calc(theme(spacing[0.5])_+_theme(spacing.px))]',\n      },\n      S: {\n        select: [\n          'shr-px-0.5 shr-py-0.25 shr-pe-1.5 shr-text-sm',\n          /* padding に依る積み上げでは文字が見切れてしまうため */\n          'shr-min-h-[calc(theme(fontSize.sm)_+_theme(spacing[0.5])_*_2_+_theme(spacing.px)_*_2)]',\n        ],\n        iconWrap: 'shr-end-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nconst ActualSelect = <T extends string>(\n  {\n    options,\n    onChange,\n    onChangeValue,\n    error,\n    width,\n    hasBlank,\n    blankLabel,\n    size,\n    className,\n    disabled,\n    required,\n    ...rest\n  }: Props<T>,\n  ref: ForwardedRef<HTMLSelectElement>,\n) => {\n  const classNames = useMemo(() => {\n    const { wrapper, select, iconWrap, blankOptgroup } = classNameGenerator()\n    const sizeProps = {\n      size: size || 'M',\n    }\n\n    return {\n      wrapper: wrapper({ className }),\n      select: select(sizeProps),\n      iconWrap: iconWrap(sizeProps),\n      blankOptGroup: blankOptgroup(),\n    }\n  }, [size, className])\n\n  return (\n    <span\n      className={classNames.wrapper}\n      style={{\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n    >\n      <select\n        {...rest}\n        ref={ref}\n        disabled={disabled}\n        // HINT: required属性を設定すると、iOS端末で以下の問題が発生します\n        //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない\n        //    - エラーメッセージが表示されない\n        //    - 問題のある入力フィールドまでスクロールしない\n        // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです\n        // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります\n        required={isIOS ? undefined : required}\n        aria-invalid={error || undefined}\n        data-smarthr-ui-input=\"true\"\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          onChange?.(e)\n\n          if (onChangeValue) {\n            const selectedOption = options\n              .flatMap((option) => ('value' in option ? [option] : option.options))\n              .find((option) => option.value === e.target.value)\n\n            if (selectedOption) {\n              onChangeValue(selectedOption.value)\n            }\n          }\n        }}\n        className={classNames.select}\n      >\n        <BlankOption hasBlank={hasBlank}>{blankLabel ?? ''}</BlankOption>\n        {options.map((option, index) => (\n          <Option {...option} key={index} />\n        ))}\n        <NotOmittingLabelsInMobileSafari className={classNames.blankOptGroup} />\n      </select>\n      <span className={classNames.iconWrap}>\n        <FaAngleDownIcon />\n      </span>\n    </span>\n  )\n}\n\nconst BlankOption = memo<\n  PropsWithChildren<{\n    hasBlank: boolean | undefined\n  }>\n>(({ hasBlank, children }) => hasBlank && <option value=\"\">{children}</option>)\n\nconst Option = memo<Props<string>['options'][number]>((option) => {\n  if ('value' in option) {\n    return <option {...option}>{option.label}</option>\n  }\n\n  const { options: groupedOptions, label, ...rest } = option\n\n  return (\n    <optgroup {...rest} key={label} label={label}>\n      {groupedOptions.map((groupedOption) => (\n        <option {...groupedOption} key={groupedOption.value}>\n          {groupedOption.label}\n        </option>\n      ))}\n    </optgroup>\n  )\n})\n\n// Support for not omitting labels in Mobile Safari\nconst NotOmittingLabelsInMobileSafari = memo<{ className: string }>(\n  ({ className }) => isMobileSafari && <optgroup className={className} />,\n)\n\nexport const Select = genericsForwardRef(ActualSelect)\n"],"names":[],"mappings":";;;;;;;;;;;;AA8CA;AACE;AACE;AACA;;;;;;;;;;AAUC;AACD;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;;AAEA;AACD;AACD;AACE;;;;AAIC;AACD;AACD;AACF;AACF;AACF;AAED;AAiBE;AACE;AACA;;;;AAKE;AACA;AACA;;;AAGJ;;AAMM;;;;;;;;;AAiBE;;;;AAKK;;AAGD;;;AAGN;AAcR;AAEA;AAMA;AACE;AACE;;AAGF;AAEA;AASF;AAEA;AACA;;;"}

package/lib/components/Select/Select.js

@@ -58,12 +58,17 @@ const ActualSelect = ({ options, onChange, onChangeValue, error, width, hasBlank
             iconWrap: iconWrap(sizeProps),
             blankOptGroup: blankOptgroup(),
         };
-    }, [className, size]);
-    const wrapperStyle = useMemo(() => ({
-        width: typeof width === 'number' ? `${width}px` : width,
-    }), [width]);
-    const actualBlankLabel = blankLabel ?? '';
-    return (jsxs("span", { className: classNames.wrapper, style: wrapperStyle, children: [jsxs("select", { ...rest, "data-smarthr-ui-input": "true", onChange: (e) => {
+    }, [size, className]);
+    return (jsxs("span", { className: classNames.wrapper, style: {
+            width: typeof width === 'number' ? `${width}px` : width,
+        }, children: [jsxs("select", { ...rest, ref: ref, disabled: disabled, 
+                // HINT: required属性を設定すると、iOS端末で以下の問題が発生します
+                //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない
+                //    - エラーメッセージが表示されない
+                //    - 問題のある入力フィールドまでスクロールしない
+                // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです
+                // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります
+                required: isIOS ? undefined : required, "aria-invalid": error || undefined, "data-smarthr-ui-input": "true", onChange: (e) => {
                     onChange?.(e);
                     if (onChangeValue) {
                         const selectedOption = options
@@ -73,14 +78,7 @@ const ActualSelect = ({ options, onChange, onChangeValue, error, width, hasBlank
                             onChangeValue(selectedOption.value);
                         }
                     }
-                }, "aria-invalid": error || undefined, disabled: disabled, 
-                // HINT: required属性を設定すると、iOS端末で以下の問題が発生します
-                //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない
-                //    - エラーメッセージが表示されない
-                //    - 問題のある入力フィールドまでスクロールしない
-                // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです
-                // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります
-                required: isIOS ? undefined : required, ref: ref, className: classNames.select, children: [jsx(BlankOption, { hasBlank: hasBlank, children: actualBlankLabel }), options.map((option, index) => (createElement(Option, { ...option, key: index }))), jsx(NotOmittingLabelsInMobileSafari, { className: classNames.blankOptGroup })] }), jsx("span", { className: classNames.iconWrap, children: jsx(FaAngleDownIcon, {}) })] }));
+                }, className: classNames.select, children: [jsx(BlankOption, { hasBlank: hasBlank, children: blankLabel ?? '' }), options.map((option, index) => (createElement(Option, { ...option, key: index }))), jsx(NotOmittingLabelsInMobileSafari, { className: classNames.blankOptGroup })] }), jsx("span", { className: classNames.iconWrap, children: jsx(FaAngleDownIcon, {}) })] }));
 };
 const BlankOption = memo(({ hasBlank, children }) => hasBlank && jsx("option", { value: "", children: children }));
 const Option = memo((option) => {

package/lib/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type OptgroupHTMLAttributes,\n  type OptionHTMLAttributes,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { isIOS, isMobileSafari } from '../../libs/ua'\nimport { genericsForwardRef } from '../../libs/util'\nimport { FaAngleDownIcon } from '../Icon'\n\ntype Option<T extends string> = {\n  value: T\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\ntype Optgroup<T extends string> = {\n  label: string\n  options: Array<Option<T>>\n} & OptgroupHTMLAttributes<HTMLOptGroupElement>\n\ntype BaseProps<T extends string> = {\n  /** 選択肢のデータの配列 */\n  options: Array<Option<T> | Optgroup<T>>\n  /** フォームの値が変わったときに発火するコールバック関数 */\n  onChangeValue?: (value: T) => void\n  /** フォームの値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** コンポーネントの大きさ */\n  size?: 'M' | 'S'\n  /** 空の選択肢を表示するかどうか */\n  hasBlank?: boolean\n  /** 空の選択肢のラベル */\n  blankLabel?: string\n}\n\ntype Props<T extends string> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'select'>, keyof BaseProps<string> | 'children'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Select shr-relative shr-inline-block',\n    select: [\n      'shr-peer shr-border-shorthand shr-w-full shr-cursor-pointer shr-appearance-none shr-rounded-m shr-bg-white shr-text-base shr-leading-tight shr-text-black',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-white-darken disabled:shr-text-disabled disabled:shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      /* padding に依る積み上げでは文字が見切れてしまうため */\n      'shr-min-h-[calc(theme(fontSize.base)_+_theme(spacing[0.75])_*_2_+_theme(spacing.px)_*_2)]',\n      'shr-border-default disabled:shr-border-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-inset-y-0 shr-inline-flex shr-items-center shr-text-grey',\n      'peer-focus-visible:shr-text-black peer-disabled:shr-text-disabled',\n    ],\n    blankOptgroup: 'shr-hidden',\n  },\n  variants: {\n    size: {\n      M: {\n        select: 'shr-py-0.5 shr-pe-2 shr-ps-0.5',\n        // ((右 padding - アイコン幅) / 2) + 右 border\n        iconWrap: 'shr-end-[calc(theme(spacing[0.5])_+_theme(spacing.px))]',\n      },\n      S: {\n        select: [\n          'shr-px-0.5 shr-py-0.25 shr-pe-1.5 shr-text-sm',\n          /* padding に依る積み上げでは文字が見切れてしまうため */\n          'shr-min-h-[calc(theme(fontSize.sm)_+_theme(spacing[0.5])_*_2_+_theme(spacing.px)_*_2)]',\n        ],\n        iconWrap: 'shr-end-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nconst ActualSelect = <T extends string>(\n  {\n    options,\n    onChange,\n    onChangeValue,\n    error,\n    width,\n    hasBlank,\n    blankLabel,\n    size,\n    className,\n    disabled,\n    required,\n    ...rest\n  }: Props<T>,\n  ref: ForwardedRef<HTMLSelectElement>,\n) => {\n  const classNames = useMemo(() => {\n    const { wrapper, select, iconWrap, blankOptgroup } = classNameGenerator()\n    const sizeProps = {\n      size: size || 'M',\n    }\n\n    return {\n      wrapper: wrapper({ className }),\n      select: select(sizeProps),\n      iconWrap: iconWrap(sizeProps),\n      blankOptGroup: blankOptgroup(),\n    }\n  }, [className, size])\n  const wrapperStyle = useMemo(\n    () => ({\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [width],\n  )\n\n  const actualBlankLabel = blankLabel ?? ''\n\n  return (\n    <span className={classNames.wrapper} style={wrapperStyle}>\n      <select\n        {...rest}\n        data-smarthr-ui-input=\"true\"\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          onChange?.(e)\n\n          if (onChangeValue) {\n            const selectedOption = options\n              .flatMap((option) => ('value' in option ? [option] : option.options))\n              .find((option) => option.value === e.target.value)\n\n            if (selectedOption) {\n              onChangeValue(selectedOption.value)\n            }\n          }\n        }}\n        aria-invalid={error || undefined}\n        disabled={disabled}\n        // HINT: required属性を設定すると、iOS端末で以下の問題が発生します\n        //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない\n        //    - エラーメッセージが表示されない\n        //    - 問題のある入力フィールドまでスクロールしない\n        // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです\n        // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります\n        required={isIOS ? undefined : required}\n        ref={ref}\n        className={classNames.select}\n      >\n        <BlankOption hasBlank={hasBlank}>{actualBlankLabel}</BlankOption>\n        {options.map((option, index) => (\n          <Option {...option} key={index} />\n        ))}\n        <NotOmittingLabelsInMobileSafari className={classNames.blankOptGroup} />\n      </select>\n      <span className={classNames.iconWrap}>\n        <FaAngleDownIcon />\n      </span>\n    </span>\n  )\n}\n\nconst BlankOption = memo<\n  PropsWithChildren<{\n    hasBlank: boolean | undefined\n  }>\n>(({ hasBlank, children }) => hasBlank && <option value=\"\">{children}</option>)\n\nconst Option = memo<Props<string>['options'][number]>((option) => {\n  if ('value' in option) {\n    return <option {...option}>{option.label}</option>\n  }\n\n  const { options: groupedOptions, label, ...rest } = option\n\n  return (\n    <optgroup {...rest} key={label} label={label}>\n      {groupedOptions.map((groupedOption) => (\n        <option {...groupedOption} key={groupedOption.value}>\n          {groupedOption.label}\n        </option>\n      ))}\n    </optgroup>\n  )\n})\n\n// Support for not omitting labels in Mobile Safari\nconst NotOmittingLabelsInMobileSafari = memo<{ className: string }>(\n  ({ className }) => isMobileSafari && <optgroup className={className} />,\n)\n\nexport const Select = genericsForwardRef(ActualSelect)\n"],"names":[],"mappings":";;;;;;;;;;AA8CA;AACE;AACE;AACA;;;;;;;;;;AAUC;AACD;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;;AAEA;AACD;AACD;AACE;;;;AAIC;AACD;AACD;AACF;AACF;AACF;AAED;AAiBE;AACE;AACA;;;;AAKE;AACA;AACA;;;AAGJ;AACA;AAEI;AACD;AAIH;;AAQQ;;;;AAKK;;AAGD;;;AAGN;;;;;;;AASA;AAeR;AAEA;AAMA;AACE;AACE;;AAGF;AAEA;AASF;AAEA;AACA;;;"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type OptgroupHTMLAttributes,\n  type OptionHTMLAttributes,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { isIOS, isMobileSafari } from '../../libs/ua'\nimport { genericsForwardRef } from '../../libs/util'\nimport { FaAngleDownIcon } from '../Icon'\n\ntype Option<T extends string> = {\n  value: T\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\ntype Optgroup<T extends string> = {\n  label: string\n  options: Array<Option<T>>\n} & OptgroupHTMLAttributes<HTMLOptGroupElement>\n\ntype BaseProps<T extends string> = {\n  /** 選択肢のデータの配列 */\n  options: Array<Option<T> | Optgroup<T>>\n  /** フォームの値が変わったときに発火するコールバック関数 */\n  onChangeValue?: (value: T) => void\n  /** フォームの値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** コンポーネントの大きさ */\n  size?: 'M' | 'S'\n  /** 空の選択肢を表示するかどうか */\n  hasBlank?: boolean\n  /** 空の選択肢のラベル */\n  blankLabel?: string\n}\n\ntype Props<T extends string> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'select'>, keyof BaseProps<string> | 'children'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Select shr-relative shr-inline-block',\n    select: [\n      'shr-peer shr-border-shorthand shr-w-full shr-cursor-pointer shr-appearance-none shr-rounded-m shr-bg-white shr-text-base shr-leading-tight shr-text-black',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-white-darken disabled:shr-text-disabled disabled:shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      /* padding に依る積み上げでは文字が見切れてしまうため */\n      'shr-min-h-[calc(theme(fontSize.base)_+_theme(spacing[0.75])_*_2_+_theme(spacing.px)_*_2)]',\n      'shr-border-default disabled:shr-border-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-inset-y-0 shr-inline-flex shr-items-center shr-text-grey',\n      'peer-focus-visible:shr-text-black peer-disabled:shr-text-disabled',\n    ],\n    blankOptgroup: 'shr-hidden',\n  },\n  variants: {\n    size: {\n      M: {\n        select: 'shr-py-0.5 shr-pe-2 shr-ps-0.5',\n        // ((右 padding - アイコン幅) / 2) + 右 border\n        iconWrap: 'shr-end-[calc(theme(spacing[0.5])_+_theme(spacing.px))]',\n      },\n      S: {\n        select: [\n          'shr-px-0.5 shr-py-0.25 shr-pe-1.5 shr-text-sm',\n          /* padding に依る積み上げでは文字が見切れてしまうため */\n          'shr-min-h-[calc(theme(fontSize.sm)_+_theme(spacing[0.5])_*_2_+_theme(spacing.px)_*_2)]',\n        ],\n        iconWrap: 'shr-end-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nconst ActualSelect = <T extends string>(\n  {\n    options,\n    onChange,\n    onChangeValue,\n    error,\n    width,\n    hasBlank,\n    blankLabel,\n    size,\n    className,\n    disabled,\n    required,\n    ...rest\n  }: Props<T>,\n  ref: ForwardedRef<HTMLSelectElement>,\n) => {\n  const classNames = useMemo(() => {\n    const { wrapper, select, iconWrap, blankOptgroup } = classNameGenerator()\n    const sizeProps = {\n      size: size || 'M',\n    }\n\n    return {\n      wrapper: wrapper({ className }),\n      select: select(sizeProps),\n      iconWrap: iconWrap(sizeProps),\n      blankOptGroup: blankOptgroup(),\n    }\n  }, [size, className])\n\n  return (\n    <span\n      className={classNames.wrapper}\n      style={{\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n    >\n      <select\n        {...rest}\n        ref={ref}\n        disabled={disabled}\n        // HINT: required属性を設定すると、iOS端末で以下の問題が発生します\n        //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない\n        //    - エラーメッセージが表示されない\n        //    - 問題のある入力フィールドまでスクロールしない\n        // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです\n        // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります\n        required={isIOS ? undefined : required}\n        aria-invalid={error || undefined}\n        data-smarthr-ui-input=\"true\"\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          onChange?.(e)\n\n          if (onChangeValue) {\n            const selectedOption = options\n              .flatMap((option) => ('value' in option ? [option] : option.options))\n              .find((option) => option.value === e.target.value)\n\n            if (selectedOption) {\n              onChangeValue(selectedOption.value)\n            }\n          }\n        }}\n        className={classNames.select}\n      >\n        <BlankOption hasBlank={hasBlank}>{blankLabel ?? ''}</BlankOption>\n        {options.map((option, index) => (\n          <Option {...option} key={index} />\n        ))}\n        <NotOmittingLabelsInMobileSafari className={classNames.blankOptGroup} />\n      </select>\n      <span className={classNames.iconWrap}>\n        <FaAngleDownIcon />\n      </span>\n    </span>\n  )\n}\n\nconst BlankOption = memo<\n  PropsWithChildren<{\n    hasBlank: boolean | undefined\n  }>\n>(({ hasBlank, children }) => hasBlank && <option value=\"\">{children}</option>)\n\nconst Option = memo<Props<string>['options'][number]>((option) => {\n  if ('value' in option) {\n    return <option {...option}>{option.label}</option>\n  }\n\n  const { options: groupedOptions, label, ...rest } = option\n\n  return (\n    <optgroup {...rest} key={label} label={label}>\n      {groupedOptions.map((groupedOption) => (\n        <option {...groupedOption} key={groupedOption.value}>\n          {groupedOption.label}\n        </option>\n      ))}\n    </optgroup>\n  )\n})\n\n// Support for not omitting labels in Mobile Safari\nconst NotOmittingLabelsInMobileSafari = memo<{ className: string }>(\n  ({ className }) => isMobileSafari && <optgroup className={className} />,\n)\n\nexport const Select = genericsForwardRef(ActualSelect)\n"],"names":[],"mappings":";;;;;;;;;;AA8CA;AACE;AACE;AACA;;;;;;;;;;AAUC;AACD;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;;AAEA;AACD;AACD;AACE;;;;AAIC;AACD;AACD;AACF;AACF;AACF;AAED;AAiBE;AACE;AACA;;;;AAKE;AACA;AACA;;;AAGJ;;AAMM;;;;;;;;;AAiBE;;;;AAKK;;AAGD;;;AAGN;AAcR;AAEA;AAMA;AACE;AACE;;AAGF;AAEA;AASF;AAEA;AACA;;;"}

package/lib/components/Table/TableScroller.cjs

@@ -21,13 +21,21 @@ const SCROLLER_PROPS = {
     // fixedHead のとき、スクロールインスタンスがTableからWrapperに変わるため、Wrapperに対して高さとoverflowを指定する
     className: 'shr-h-[inherit] shr-max-h-[inherit] shr-scroll-pb-0.5',
 };
-const TableScroller = React.forwardRef(({ children, fixedHead, ...rest }, forwardedRef) => fixedHead ? (jsxRuntime.jsx(FixedHeadTableScroller, { ...rest, ...SCROLLER_PROPS, forwardedRef: forwardedRef, children: children })) : (jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { ...rest, ...SCROLLER_PROPS, ref: forwardedRef, children: children })));
+const TableScroller = React.forwardRef(({ children, fixedHead, ...rest }, ref) => fixedHead ? (jsxRuntime.jsx(FixedHeadTableScroller, { ...rest, ...SCROLLER_PROPS, forwardedRef: ref, children: children })) : (jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { ...rest, ...SCROLLER_PROPS, ref: ref, children: children })));
 const FixedHeadTableScroller = ({ children, forwardedRef, direction, ...rest }) => {
-    const innerRef = React.useRef(null);
-    const setRefs = React.useCallback((node) => {
-        innerRef.current = node;
+    // TODO: useMergeRefsが作成されたら修正する
+    const callbackRef = React.useCallback((node) => {
+        // thead の高さ分だけ scroll-padding-top を設定
+        if (node) {
+            const thead = node.querySelector('thead');
+            if (thead) {
+                const { height } = thead.getBoundingClientRect();
+                node.style.scrollPaddingTop = `${height + themes_createFontSize.defaultHtmlFontSize}px`;
+            }
+        }
         if (forwardedRef) {
             if (typeof forwardedRef === 'function') {
+                // React 19 では callback ref の戻り値を cleanup として使うため、返却する
                 forwardedRef(node);
             }
             else {
@@ -35,17 +43,7 @@ const FixedHeadTableScroller = ({ children, forwardedRef, direction, ...rest })
             }
         }
     }, [forwardedRef]);
-    // thead の高さ分だけ scroll-padding-top を設定
-    React.useLayoutEffect(() => {
-        if (!innerRef.current)
-            return;
-        const thead = innerRef.current.querySelector('thead');
-        if (thead) {
-            const { height } = thead.getBoundingClientRect();
-            innerRef.current.style.scrollPaddingTop = `${height + themes_createFontSize.defaultHtmlFontSize}px`;
-        }
-    }, []);
-    return (jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { ...rest, ref: setRefs, direction: direction, children: children }));
+    return (jsxRuntime.jsx(components_Scroller_Scroller.Scroller, { ...rest, ref: callbackRef, direction: direction, children: children }));
 };
 
 exports.TableScroller = TableScroller;

package/lib/components/Table/TableScroller.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableScroller.cjs","sources":["../../../src/components/Table/TableScroller.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type ForwardedRef,\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n} from 'react'\n\nimport { defaultHtmlFontSize } from '../../themes'\nimport { Scroller } from '../Scroller'\n\ntype Props = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    fixedHead?: boolean\n  }\n\nconst SCROLLER_PROPS = {\n  direction: 'both' as const,\n  // fixedHead のとき、スクロールインスタンスがTableからWrapperに変わるため、Wrapperに対して高さとoverflowを指定する\n  className: 'shr-h-[inherit] shr-max-h-[inherit] shr-scroll-pb-0.5',\n}\n\nexport const TableScroller = forwardRef<HTMLDivElement, Props>(\n  ({ children, fixedHead, ...rest }, forwardedRef: ForwardedRef<HTMLDivElement>) =>\n    fixedHead ? (\n      <FixedHeadTableScroller {...rest} {...SCROLLER_PROPS} forwardedRef={forwardedRef}>\n        {children}\n      </FixedHeadTableScroller>\n    ) : (\n      <Scroller {...rest} {...SCROLLER_PROPS} ref={forwardedRef}>\n        {children}\n      </Scroller>\n    ),\n)\n\ntype FixedHeadTableScrollerProps = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    forwardedRef: ForwardedRef<HTMLDivElement>\n    direction: 'both'\n  }\n\nconst FixedHeadTableScroller = ({\n  children,\n  forwardedRef,\n  direction,\n  ...rest\n}: FixedHeadTableScrollerProps) => {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n\n  const setRefs = useCallback(\n    (node: HTMLDivElement) => {\n      innerRef.current = node\n      if (forwardedRef) {\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node)\n        } else {\n          forwardedRef.current = node\n        }\n      }\n    },\n    [forwardedRef],\n  )\n\n  // thead の高さ分だけ scroll-padding-top を設定\n  useLayoutEffect(() => {\n    if (!innerRef.current) return\n    const thead = innerRef.current.querySelector('thead')\n    if (thead) {\n      const { height } = thead.getBoundingClientRect()\n      innerRef.current.style.scrollPaddingTop = `${height + defaultHtmlFontSize}px`\n    }\n  }, [])\n\n  return (\n    <Scroller {...rest} ref={setRefs} direction={direction}>\n      {children}\n    </Scroller>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAoBA;AACE;;AAEA;;AAGK;AAmBP;AAME;AAEA;AAEI;;AAEE;;;;AAGE;;;AAGN;;;;;;;;AAUE;;;AAIJ;AAKF;;"}
+{"version":3,"file":"TableScroller.cjs","sources":["../../../src/components/Table/TableScroller.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type ForwardedRef,\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n} from 'react'\n\nimport { defaultHtmlFontSize } from '../../themes'\nimport { Scroller } from '../Scroller'\n\ntype Props = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    fixedHead?: boolean\n  }\n\nconst SCROLLER_PROPS = {\n  direction: 'both' as const,\n  // fixedHead のとき、スクロールインスタンスがTableからWrapperに変わるため、Wrapperに対して高さとoverflowを指定する\n  className: 'shr-h-[inherit] shr-max-h-[inherit] shr-scroll-pb-0.5',\n}\n\nexport const TableScroller = forwardRef<HTMLDivElement, Props>(\n  ({ children, fixedHead, ...rest }, ref: ForwardedRef<HTMLDivElement>) =>\n    fixedHead ? (\n      <FixedHeadTableScroller {...rest} {...SCROLLER_PROPS} forwardedRef={ref}>\n        {children}\n      </FixedHeadTableScroller>\n    ) : (\n      <Scroller {...rest} {...SCROLLER_PROPS} ref={ref}>\n        {children}\n      </Scroller>\n    ),\n)\n\ntype FixedHeadTableScrollerProps = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    forwardedRef: ForwardedRef<HTMLDivElement>\n    direction: 'both'\n  }\n\nconst FixedHeadTableScroller = ({\n  children,\n  forwardedRef,\n  direction,\n  ...rest\n}: FixedHeadTableScrollerProps) => {\n  // TODO: useMergeRefsが作成されたら修正する\n  const callbackRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      // thead の高さ分だけ scroll-padding-top を設定\n      if (node) {\n        const thead = node.querySelector('thead')\n\n        if (thead) {\n          const { height } = thead.getBoundingClientRect()\n\n          node.style.scrollPaddingTop = `${height + defaultHtmlFontSize}px`\n        }\n      }\n\n      if (forwardedRef) {\n        if (typeof forwardedRef === 'function') {\n          // React 19 では callback ref の戻り値を cleanup として使うため、返却する\n          forwardedRef(node)\n        } else {\n          forwardedRef.current = node\n        }\n      }\n    },\n    [forwardedRef],\n  )\n\n  return (\n    <Scroller {...rest} ref={callbackRef} direction={direction}>\n      {children}\n    </Scroller>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAkBA;AACE;;AAEA;;AAGK;AAmBP;;AAOE;;;;;;;;;;AAcM;;;;;AAIE;;;AAGN;AAIF;AAKF;;"}

package/lib/components/Table/TableScroller.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useCallback, useLayoutEffect } from 'react';
+import { forwardRef, useCallback } from 'react';
 import '../../themes/createSpacing.js';
 import { defaultHtmlFontSize } from '../../themes/createFontSize.js';
 import '../../themes/createColor.js';
@@ -19,13 +19,21 @@ const SCROLLER_PROPS = {
     // fixedHead のとき、スクロールインスタンスがTableからWrapperに変わるため、Wrapperに対して高さとoverflowを指定する
     className: 'shr-h-[inherit] shr-max-h-[inherit] shr-scroll-pb-0.5',
 };
-const TableScroller = forwardRef(({ children, fixedHead, ...rest }, forwardedRef) => fixedHead ? (jsx(FixedHeadTableScroller, { ...rest, ...SCROLLER_PROPS, forwardedRef: forwardedRef, children: children })) : (jsx(Scroller, { ...rest, ...SCROLLER_PROPS, ref: forwardedRef, children: children })));
+const TableScroller = forwardRef(({ children, fixedHead, ...rest }, ref) => fixedHead ? (jsx(FixedHeadTableScroller, { ...rest, ...SCROLLER_PROPS, forwardedRef: ref, children: children })) : (jsx(Scroller, { ...rest, ...SCROLLER_PROPS, ref: ref, children: children })));
 const FixedHeadTableScroller = ({ children, forwardedRef, direction, ...rest }) => {
-    const innerRef = useRef(null);
-    const setRefs = useCallback((node) => {
-        innerRef.current = node;
+    // TODO: useMergeRefsが作成されたら修正する
+    const callbackRef = useCallback((node) => {
+        // thead の高さ分だけ scroll-padding-top を設定
+        if (node) {
+            const thead = node.querySelector('thead');
+            if (thead) {
+                const { height } = thead.getBoundingClientRect();
+                node.style.scrollPaddingTop = `${height + defaultHtmlFontSize}px`;
+            }
+        }
         if (forwardedRef) {
             if (typeof forwardedRef === 'function') {
+                // React 19 では callback ref の戻り値を cleanup として使うため、返却する
                 forwardedRef(node);
             }
             else {
@@ -33,17 +41,7 @@ const FixedHeadTableScroller = ({ children, forwardedRef, direction, ...rest })
             }
         }
     }, [forwardedRef]);
-    // thead の高さ分だけ scroll-padding-top を設定
-    useLayoutEffect(() => {
-        if (!innerRef.current)
-            return;
-        const thead = innerRef.current.querySelector('thead');
-        if (thead) {
-            const { height } = thead.getBoundingClientRect();
-            innerRef.current.style.scrollPaddingTop = `${height + defaultHtmlFontSize}px`;
-        }
-    }, []);
-    return (jsx(Scroller, { ...rest, ref: setRefs, direction: direction, children: children }));
+    return (jsx(Scroller, { ...rest, ref: callbackRef, direction: direction, children: children }));
 };
 
 export { TableScroller };

package/lib/components/Table/TableScroller.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableScroller.js","sources":["../../../src/components/Table/TableScroller.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type ForwardedRef,\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n} from 'react'\n\nimport { defaultHtmlFontSize } from '../../themes'\nimport { Scroller } from '../Scroller'\n\ntype Props = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    fixedHead?: boolean\n  }\n\nconst SCROLLER_PROPS = {\n  direction: 'both' as const,\n  // fixedHead のとき、スクロールインスタンスがTableからWrapperに変わるため、Wrapperに対して高さとoverflowを指定する\n  className: 'shr-h-[inherit] shr-max-h-[inherit] shr-scroll-pb-0.5',\n}\n\nexport const TableScroller = forwardRef<HTMLDivElement, Props>(\n  ({ children, fixedHead, ...rest }, forwardedRef: ForwardedRef<HTMLDivElement>) =>\n    fixedHead ? (\n      <FixedHeadTableScroller {...rest} {...SCROLLER_PROPS} forwardedRef={forwardedRef}>\n        {children}\n      </FixedHeadTableScroller>\n    ) : (\n      <Scroller {...rest} {...SCROLLER_PROPS} ref={forwardedRef}>\n        {children}\n      </Scroller>\n    ),\n)\n\ntype FixedHeadTableScrollerProps = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    forwardedRef: ForwardedRef<HTMLDivElement>\n    direction: 'both'\n  }\n\nconst FixedHeadTableScroller = ({\n  children,\n  forwardedRef,\n  direction,\n  ...rest\n}: FixedHeadTableScrollerProps) => {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n\n  const setRefs = useCallback(\n    (node: HTMLDivElement) => {\n      innerRef.current = node\n      if (forwardedRef) {\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node)\n        } else {\n          forwardedRef.current = node\n        }\n      }\n    },\n    [forwardedRef],\n  )\n\n  // thead の高さ分だけ scroll-padding-top を設定\n  useLayoutEffect(() => {\n    if (!innerRef.current) return\n    const thead = innerRef.current.querySelector('thead')\n    if (thead) {\n      const { height } = thead.getBoundingClientRect()\n      innerRef.current.style.scrollPaddingTop = `${height + defaultHtmlFontSize}px`\n    }\n  }, [])\n\n  return (\n    <Scroller {...rest} ref={setRefs} direction={direction}>\n      {children}\n    </Scroller>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAoBA;AACE;;AAEA;;AAGK;AAmBP;AAME;AAEA;AAEI;;AAEE;;;;AAGE;;;AAGN;;;;;;;;AAUE;;;AAIJ;AAKF;;"}
+{"version":3,"file":"TableScroller.js","sources":["../../../src/components/Table/TableScroller.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type ForwardedRef,\n  type PropsWithChildren,\n  forwardRef,\n  useCallback,\n} from 'react'\n\nimport { defaultHtmlFontSize } from '../../themes'\nimport { Scroller } from '../Scroller'\n\ntype Props = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    fixedHead?: boolean\n  }\n\nconst SCROLLER_PROPS = {\n  direction: 'both' as const,\n  // fixedHead のとき、スクロールインスタンスがTableからWrapperに変わるため、Wrapperに対して高さとoverflowを指定する\n  className: 'shr-h-[inherit] shr-max-h-[inherit] shr-scroll-pb-0.5',\n}\n\nexport const TableScroller = forwardRef<HTMLDivElement, Props>(\n  ({ children, fixedHead, ...rest }, ref: ForwardedRef<HTMLDivElement>) =>\n    fixedHead ? (\n      <FixedHeadTableScroller {...rest} {...SCROLLER_PROPS} forwardedRef={ref}>\n        {children}\n      </FixedHeadTableScroller>\n    ) : (\n      <Scroller {...rest} {...SCROLLER_PROPS} ref={ref}>\n        {children}\n      </Scroller>\n    ),\n)\n\ntype FixedHeadTableScrollerProps = PropsWithChildren &\n  Omit<ComponentPropsWithRef<'div'>, keyof PropsWithChildren> & {\n    forwardedRef: ForwardedRef<HTMLDivElement>\n    direction: 'both'\n  }\n\nconst FixedHeadTableScroller = ({\n  children,\n  forwardedRef,\n  direction,\n  ...rest\n}: FixedHeadTableScrollerProps) => {\n  // TODO: useMergeRefsが作成されたら修正する\n  const callbackRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      // thead の高さ分だけ scroll-padding-top を設定\n      if (node) {\n        const thead = node.querySelector('thead')\n\n        if (thead) {\n          const { height } = thead.getBoundingClientRect()\n\n          node.style.scrollPaddingTop = `${height + defaultHtmlFontSize}px`\n        }\n      }\n\n      if (forwardedRef) {\n        if (typeof forwardedRef === 'function') {\n          // React 19 では callback ref の戻り値を cleanup として使うため、返却する\n          forwardedRef(node)\n        } else {\n          forwardedRef.current = node\n        }\n      }\n    },\n    [forwardedRef],\n  )\n\n  return (\n    <Scroller {...rest} ref={callbackRef} direction={direction}>\n      {children}\n    </Scroller>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAkBA;AACE;;AAEA;;AAGK;AAmBP;;AAOE;;;;;;;;;;AAcM;;;;;AAIE;;;AAGN;AAIF;AAKF;;"}

package/lib/components/Textarea/Textarea.cjs

@@ -46,12 +46,12 @@ const classNameGenerator = index.tv({
         'aria-[invalid]:shr-border-danger',
     ],
 });
-const calculateIdealRows = (element, maxRows, lineHeightNormal) => {
-    if (!element) {
+const calculateIdealRows = (node, maxRows, lineHeightNormal) => {
+    if (!node) {
         return 0;
     }
     // 現在の入力値に応じた行数
-    const currentInputValueRows = Math.floor(element.scrollHeight / (themes_createFontSize.defaultHtmlFontSize * lineHeightNormal));
+    const currentInputValueRows = Math.floor(node.scrollHeight / (themes_createFontSize.defaultHtmlFontSize * lineHeightNormal));
     return currentInputValueRows < maxRows ? currentInputValueRows : maxRows;
 };
 const Textarea = React.forwardRef(({ maxLetters, ...rest }, ref) => maxLetters ? (jsxRuntime.jsx(MaxLettersTextarea, { ...rest, externalRef: ref, maxLetters: maxLetters })) : (jsxRuntime.jsx(ActualTextarea, { ...rest, externalRef: ref })));
@@ -98,6 +98,10 @@ const MaxLettersTextarea = ({ maxLetters, error, value, defaultValue, onChange,
         };
         return {
             updateCount,
+            cancelDebounce: () => {
+                updateSrMessage.cancel();
+                actualUpdateCount.cancel();
+            },
             handleChange: (e) => {
                 updateCount(e.target.value);
                 latest.onChange?.(e);
@@ -106,12 +110,13 @@ const MaxLettersTextarea = ({ maxLetters, error, value, defaultValue, onChange,
     }, [latest]);
     React.useEffect(() => {
         functions.updateCount(value ?? '');
+        return functions.cancelDebounce;
     }, [value, functions]);
-    return (jsxRuntime.jsxs("span", { className: "shr-relative", children: [jsxRuntime.jsx(ActualTextarea, { ...rest, id: textareaId, value: value, defaultValue: defaultValue, onChange: functions.handleChange, "aria-describedby": `${maxLettersNoticeId} ${maxLettersId}`, error: error || countError }), jsxRuntime.jsx(components_VisuallyHiddenText_VisuallyHiddenText.VisuallyHiddenText, { id: maxLettersNoticeId, children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/screenReaderMaxLettersDescription", defaultText: "\u6700\u5927{maxLetters}\u6587\u5B57\u5165\u529B\u3067\u304D\u307E\u3059", values: { maxLetters } }) }), jsxRuntime.jsx(components_VisuallyHiddenText_VisuallyHiddenText.VisuallyHiddenText, { as: "output", role: "status", htmlFor: textareaId, children: srCounterMessage }), jsxRuntime.jsx("span", { ref: counterSpanRef, id: maxLettersId, "aria-hidden": true, "data-error": countError || undefined, className: "smarthr-ui-Textarea-counter shr-block shr-text-sm shr-text-black data-[error]:shr-text-danger", children: count > maxLetters ? (jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/maxLettersExceeded", defaultText: "{exceededLetters}\u6587\u5B57\u30AA\u30FC\u30D0\u30FC", values: { exceededLetters: count - maxLetters } })) : (jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/availableLetters", defaultText: "\u3042\u3068{availableLetters}\u6587\u5B57", values: { availableLetters: maxLetters - count } })) })] }));
+    return (jsxRuntime.jsxs("span", { className: "shr-relative", children: [jsxRuntime.jsx(ActualTextarea, { ...rest, id: textareaId, value: value, defaultValue: defaultValue, "aria-describedby": `${maxLettersNoticeId} ${maxLettersId}`, error: error || countError, onChange: functions.handleChange }), jsxRuntime.jsx(components_VisuallyHiddenText_VisuallyHiddenText.VisuallyHiddenText, { id: maxLettersNoticeId, children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/screenReaderMaxLettersDescription", defaultText: "\u6700\u5927{maxLetters}\u6587\u5B57\u5165\u529B\u3067\u304D\u307E\u3059", values: { maxLetters } }) }), jsxRuntime.jsx(components_VisuallyHiddenText_VisuallyHiddenText.VisuallyHiddenText, { as: "output", role: "status", htmlFor: textareaId, children: srCounterMessage }), jsxRuntime.jsx("span", { ref: counterSpanRef, id: maxLettersId, "aria-hidden": true, "data-error": countError || undefined, className: "smarthr-ui-Textarea-counter shr-block shr-text-sm shr-text-black data-[error]:shr-text-danger", children: count > maxLetters ? (jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/maxLettersExceeded", defaultText: "{exceededLetters}\u6587\u5B57\u30AA\u30FC\u30D0\u30FC", values: { exceededLetters: count - maxLetters } })) : (jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Textarea/availableLetters", defaultText: "\u3042\u3068{availableLetters}\u6587\u5B57", values: { availableLetters: maxLetters - count } })) })] }));
 };
 const ActualTextarea = ({ autoFocus, width, className, autoResize = false, maxRows = Infinity, rows = 2, error, onChange, externalRef, ...rest }) => {
     const theme = hooks_useTheme.useTheme();
-    const textareaRef = React.useRef(null);
+    const innerRef = React.useRef(null);
     const [interimRows, setInterimRows] = React.useState(rows);
     const actualClassName = React.useMemo(() => classNameGenerator({ className }), [className]);
     const latest = hooks_useLatest.useLatest({
@@ -123,16 +128,17 @@ const ActualTextarea = ({ autoFocus, width, className, autoResize = false, maxRo
         rows,
     });
     const functions = React.useMemo(() => ({
-        callbackRef: (element) => {
-            textareaRef.current = element;
-            if (element) {
+        callbackRef: (node) => {
+            // TODO: useMergeRefs, useOnceCallbackが実装されたら適用する
+            innerRef.current = node;
+            if (node) {
                 // autoFocus時に、フォーカスを当てる
                 if (latest.autoFocus) {
-                    element.focus();
+                    node.focus();
                 }
                 // autoResize時に、初期値での高さを指定
                 if (latest.autoResize) {
-                    setInterimRows(calculateIdealRows(element, latest.maxRows, latest.theme.leading.NORMAL));
+                    setInterimRows(calculateIdealRows(node, latest.maxRows, latest.theme.leading.NORMAL));
                 }
             }
         },
@@ -148,8 +154,8 @@ const ActualTextarea = ({ autoFocus, width, className, autoResize = false, maxRo
             latest.onChange?.(e);
         },
     }), [latest]);
-    React.useImperativeHandle(externalRef, () => textareaRef.current, []);
-    return (jsxRuntime.jsx("textarea", { ...rest, "data-smarthr-ui-input": "true", onChange: functions.handleChange, ref: functions.callbackRef, "aria-invalid": error || undefined, rows: interimRows, className: actualClassName, style: { width: typeof width === 'number' ? `${width}px` : width } }));
+    React.useImperativeHandle(externalRef, () => innerRef.current, []);
+    return (jsxRuntime.jsx("textarea", { ...rest, ref: functions.callbackRef, "aria-invalid": error || undefined, "data-smarthr-ui-input": "true", rows: interimRows, onChange: functions.handleChange, className: actualClassName, style: { width: typeof width === 'number' ? `${width}px` : width } }));
 };
 
 exports.Textarea = Textarea;