ingred-ui 27.4.0 → 27.4.1

package/dist/components/DataTable2/DataTable2.stories.d.ts

@@ -64,7 +64,6 @@ export default meta;
  * ```
  */
 export declare const Default: StoryObj<typeof DataTable2>;
-export declare const Sample: StoryObj<typeof DataTable2>;
 /**
  * 以下のように、セルの loading を true に設定すると、スピナーが表示されます。
  * ```
@@ -76,11 +75,6 @@ export declare const Sample: StoryObj<typeof DataTable2>;
  * 「カラム」でフィルターやソートを明示しない場合も、それらの機能は非表示になります。
  */
 export declare const Loading: StoryObj<typeof DataTable2>;
-/**
- * `enableRowSelection={false}` のとき、一括チェック・「n件を」・行頭チェック列を出さない。
- * `tableActions` は `enabledWhen: "unchecked"` のみなど、行選択に依存しない操作だけ置ける。
- */
-export declare const WithoutRowSelection: StoryObj<typeof DataTable2>;
 /**
  * `enableRowSelection`（既定 `true`）かつ **`tableActions` を渡さない** とき。
  *
@@ -93,6 +87,8 @@ export declare const RowSelectionWithoutTableActions: StoryObj<typeof DataTable2
  * `tableActions` で行頭チェック列・一括選択ツールバーも表示できる（チェック列は通常列としてスクロールする）。
  * 右 sticky 列は `columns` で `sortable: false` の末尾列にしておくと、カラム編集でドラッグ移動されない（`endFixed` と整合）。
  * ツールバー右の設定ボタンから「カラムを編集」を開き、A〜D の並び替えと末尾「操作」がドラッグ不可であることを確認できる（A〜D は `sortable: true`）。
- * ストーリー側では縦横サイズを固定していない。挙動確認時はプレビュー枠の幅などを自分で調整すること。
+ * 外枠に高さ・横幅 100% を与え多めの行を表示し、縦スクロールでヘッダ（各 `th` の sticky）が張り付くことを確認できる。
+ * コンテナ幅に応じて列幅を比例縮小する（狭いビューポートでも横スクロールしやすい）。
+ * 列ヘッダをドラッグして幅を変えた列はその幅を維持し、それ以外の列はコンテナ幅の変化に追従する。
  */
 export declare const StickyColumns: StoryObj<typeof DataTable2>;

package/dist/components/DataTable2/context.d.ts

@@ -25,7 +25,7 @@ export declare const DataTable2Context: import("react").Context<{
     setColumnWidth: (index: number, width: number | null) => void;
     setRowSpacing: (spacing: RowSpacing) => void;
 }>;
-/** 横スクロール位置に応じた sticky 列の境目・影の表示（DataTable2 内のスクロール領域専用） */
+/** 横スクロール位置に応じた右 sticky 列の左 inset 線の表示（DataTable2 内のスクロール領域専用） */
 export declare const DataTable2StickyScrollContext: import("react").Context<{
     showStickyRightEdgeDecoration: boolean;
 }>;
@@ -36,7 +36,7 @@ export declare const DataTable2StickyScrollContext: import("react").Context<{
 export declare const DataTable2ColumnStickyContext: import("react").Context<{
     registerColumnSticky: (index: number, sticky: "right" | undefined) => void;
     getStickyRightOffset: (columnIndex: number) => number | undefined;
-    /** 右 sticky 列の index（装飾はこの列の左縁） */
+    /** 右 sticky 列の index（左の inset 線はこの列の左縁） */
     rightStickyColumnIndex: number | null;
     getRightStickyZIndexHead: (columnIndex: number) => number;
     getRightStickyZIndexBody: (columnIndex: number) => number;

package/dist/components/DataTable2/styled.d.ts

@@ -25,7 +25,7 @@ export declare const DataTable2Header: import("styled-components").StyledCompone
 export declare const DataTable2Column: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {
     $stickyRightOffset?: number | undefined;
     $stickyZIndex?: number | undefined;
-    /** false のとき inset 線と隣セル側の影帯（::after）を付けない */
+    /** false のとき右 sticky 列の左 inset 線を付けない */
     $showStickyEdgeDecoration?: boolean | undefined;
 }, never>;
 /** tbody の通常セル（横スクロール時の右 sticky 用） */

package/dist/index.es.js

@@ -2142,9 +2142,8 @@ object-assign
     width: max-content;
     min-width: 100%;
     table-layout: fixed;
-    /* collapse だと th/td の position: sticky が効かない環境がある */
-    border-collapse: separate;
-    border-spacing: 0;
+    /* separate + sticky は安全側だが tr の下線が出ない。collapse で行境界を tr に任せる */
+    border-collapse: collapse;
   }
 `,xw=x.div`
   display: flex;
@@ -2269,7 +2268,6 @@ object-assign
   position: relative;
   z-index: 2;
   background: transparent;
-  box-shadow: 0px 4px 0px ${({theme:e})=>e.palette.action.shadowBase}0A;
 `,Mw=x.th`
   height: 1px; /* 子要素の高さ 100% を有効にする。table-layout: fixed になっている必要がある */
   text-align: left;
@@ -2283,6 +2281,7 @@ object-assign
   top: 0;
   z-index: 2;
   background: ${({theme:e})=>e.palette.background.default};
+  /* border-collapse: collapse では border が潰れやすいので区切りは inset box-shadow（装飾用の影は付けない） */
   box-shadow:
     inset 0 1px 0 0 ${({theme:e})=>e.palette.divider},
     inset 0 -1px 0 0 ${({theme:e})=>e.palette.divider};
@@ -2311,23 +2310,10 @@ object-assign
     `}
 
   ${({$stickyRightOffset:e,theme:t,$showStickyEdgeDecoration:n})=>void 0!==e&&!1!==n&&w`
-      /* border は collapse で潰れやすい。内側の 1px は inset で確実に */
       box-shadow:
         inset 0 1px 0 0 ${t.palette.divider},
         inset 0 -1px 0 0 ${t.palette.divider},
         inset 1px 0 0 0 ${t.palette.divider};
-      /* box-shadow は隣セル上に乗らない。thead の下影（4px・blur 0・…0A）に合わせ均一帯で重ねる */
-      &::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        right: 100%;
-        width: 4px;
-        pointer-events: none;
-        z-index: 1;
-        background: ${t.palette.action.shadowBase}0A;
-      }
     `}
 `,Aw=x.td`
   ${({$stickyRightOffset:e,theme:t,$stickyZIndex:n,$showStickyEdgeDecoration:r})=>void 0!==e&&w`
@@ -2339,20 +2325,6 @@ object-assign
         box-shadow: inset 1px 0 0 0 ${t.palette.divider};
       `}
 
-      ${!1!==r&&w`
-        &::after {
-          content: "";
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          right: 100%;
-          width: 4px;
-          pointer-events: none;
-          z-index: 2;
-          background: ${t.palette.action.shadowBase}0A;
-        }
-      `}
-
       tr[data-highlighted="true"] & {
         background: ${t.palette.primary.highlight};
       }
@@ -2368,13 +2340,15 @@ object-assign
   justify-content: center;
   gap: 4px;
   box-sizing: border-box;
-  padding: 8px ${({isSmallLayout:e})=>e?6:10}px;
+  /* ハンドル調整で中身を左に 3px ずらす。左右の合計 padding は従来の 2×6 / 2×10 のまま */
+  padding: 8px ${({isSmallLayout:e})=>3+(e?6:10)}px 8px
+    ${({isSmallLayout:e})=>(e?6:10)-3}px;
   height: 100%;
   margin: 0 5px;
 `,$w=x.button`
   --color: ${({theme:e})=>e.palette.divider};
   position: absolute;
-  inset: 0 -10px 0 auto;
+  inset: 0 -6px 0 auto;
   width: 10px;
   padding: 0;
   border: 0;