@crisp-ui-kit/crisp 0.20.1 → 0.20.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/cjs/product/recordstable/recordstable.js +8 -3
  2. package/dist/cjs/product/recordstable/recordstable.recipe.js +2 -2
  3. package/dist/esm/product/recordstable/recordstable.js +8 -3
  4. package/dist/esm/product/recordstable/recordstable.recipe.js +2 -2
  5. package/dist/recordstable.css +2 -2
  6. package/dist/styles.css +2 -2
  7. package/package.json +1 -1
package/dist/cjs/product/recordstable/recordstable.js CHANGED
@@ -52,6 +52,7 @@ const menu_1 = require("../../components/menu");
52
52
  const multiselect_1 = require("../../components/multiselect");
53
53
  const select_1 = require("../../components/select");
54
54
  const switch_1 = require("../../components/switch");
55
+ const core_1 = require("../../core");
55
56
  const company_logos_1 = require("./company-logos");
56
57
  const recordstable_recipe_1 = require("./recordstable.recipe");
57
58
  const EDITABLE = new Set(["text", "number", "url", "currency"]);
@@ -897,7 +898,11 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
897
898
  setOpenMenu(null);
898
899
  };
899
900
  // column resize via pointer drag on the header edge
900
- const resizeCol = (key, startX, startW) => {
901
+ const resizeCol = (key, startX, startW, grip) => {
902
+ // A table's columns reverse under RTL — measured — so the grip sits on the
903
+ // column's leading edge there and a rightward pull must SHRINK it. The
904
+ // anchor is `inset-inline-end`; this is the other half (#214).
905
+ const dir = (0, core_1.isRtlElement)(grip) ? -1 : 1;
901
906
  // guard the whole document during the drag: kill text selection and force a
902
907
  // resize cursor so the gesture doesn't select cells or flicker (was buggy)
903
908
  const prevSelect = document.body.style.userSelect;
@@ -905,7 +910,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
905
910
  document.body.style.userSelect = "none";
906
911
  document.body.style.cursor = "col-resize";
907
912
  const onMove = (e) => {
908
- const w = Math.round(Math.max(72, startW + (e.clientX - startX)));
913
+ const w = Math.round(Math.max(72, startW + dir * (e.clientX - startX)));
909
914
  setCols((prev) => prev.map((c) => (c.key === key ? { ...c, width: w } : c)));
910
915
  };
911
916
  const onUp = () => {
@@ -995,7 +1000,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
995
1000
  e.stopPropagation();
996
1001
  const th = e.currentTarget
997
1002
  .parentElement;
998
- resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180);
1003
+ resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180, e.currentTarget);
999
1004
  }, onClick: (e) => e.stopPropagation() })] }, col.key));
1000
1005
  }), (0, jsx_runtime_1.jsx)("th", { className: "recordstable-th recordstable-addcol", children: allowAddColumn && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: addColumn, "aria-label": t.addColumn, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }) })) })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: visibleRows.map((row) => ((0, jsx_runtime_1.jsxs)("tr", { "data-selected": selected.has(row.id) ? "" : undefined, onContextMenu: (e) => {
1001
1006
  e.preventDefault();
package/dist/cjs/product/recordstable/recordstable.recipe.js CHANGED
@@ -46,8 +46,8 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
46
46
  & .recordstable-th[data-sorted="desc"] .recordstable-sort svg { transform: rotate(180deg); }
47
47
 
48
48
  /* column resize handle */
49
- & .recordstable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
50
- & .recordstable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
49
+ & .recordstable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
50
+ & .recordstable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${tokens_1.contract.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
51
51
  & .recordstable-resize:hover::after, & .recordstable-resize[data-resizing]::after { opacity: 1; }
52
52
 
53
53
  /* add-column header */
package/dist/esm/product/recordstable/recordstable.js CHANGED
@@ -14,6 +14,7 @@ import { Menu, MenuItem, useMenuKeyboard } from "../../components/menu/index.js"
14
14
  import { MultiSelect } from "../../components/multiselect/index.js";
15
15
  import { Select } from "../../components/select/index.js";
16
16
  import { Switch } from "../../components/switch/index.js";
17
+ import { isRtlElement } from "../../core/index.js";
17
18
  import { companyLogos } from "./company-logos.js";
18
19
  import { recordstableRecipe } from "./recordstable.recipe.js";
19
20
  const EDITABLE = new Set(["text", "number", "url", "currency"]);
@@ -859,7 +860,11 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
859
860
  setOpenMenu(null);
860
861
  };
861
862
  // column resize via pointer drag on the header edge
862
- const resizeCol = (key, startX, startW) => {
863
+ const resizeCol = (key, startX, startW, grip) => {
864
+ // A table's columns reverse under RTL — measured — so the grip sits on the
865
+ // column's leading edge there and a rightward pull must SHRINK it. The
866
+ // anchor is `inset-inline-end`; this is the other half (#214).
867
+ const dir = isRtlElement(grip) ? -1 : 1;
863
868
  // guard the whole document during the drag: kill text selection and force a
864
869
  // resize cursor so the gesture doesn't select cells or flicker (was buggy)
865
870
  const prevSelect = document.body.style.userSelect;
@@ -867,7 +872,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
867
872
  document.body.style.userSelect = "none";
868
873
  document.body.style.cursor = "col-resize";
869
874
  const onMove = (e) => {
870
- const w = Math.round(Math.max(72, startW + (e.clientX - startX)));
875
+ const w = Math.round(Math.max(72, startW + dir * (e.clientX - startX)));
871
876
  setCols((prev) => prev.map((c) => (c.key === key ? { ...c, width: w } : c)));
872
877
  };
873
878
  const onUp = () => {
@@ -957,7 +962,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
957
962
  e.stopPropagation();
958
963
  const th = e.currentTarget
959
964
  .parentElement;
960
- resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180);
965
+ resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180, e.currentTarget);
961
966
  }, onClick: (e) => e.stopPropagation() })] }, col.key));
962
967
  }), _jsx("th", { className: "recordstable-th recordstable-addcol", children: allowAddColumn && (_jsx("button", { type: "button", onClick: addColumn, "aria-label": t.addColumn, children: _jsx(Plus, { size: 15, strokeWidth: 1.75 }) })) })] }) }), _jsx("tbody", { children: visibleRows.map((row) => (_jsxs("tr", { "data-selected": selected.has(row.id) ? "" : undefined, onContextMenu: (e) => {
963
968
  e.preventDefault();
package/dist/esm/product/recordstable/recordstable.recipe.js CHANGED
@@ -43,8 +43,8 @@ ${toolbarChromeBody("recordstable")}
43
43
  & .recordstable-th[data-sorted="desc"] .recordstable-sort svg { transform: rotate(180deg); }
44
44
 
45
45
  /* column resize handle */
46
- & .recordstable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
47
- & .recordstable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
46
+ & .recordstable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
47
+ & .recordstable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
48
48
  & .recordstable-resize:hover::after, & .recordstable-resize[data-resizing]::after { opacity: 1; }
49
49
 
50
50
  /* add-column header */
package/dist/recordstable.css CHANGED
@@ -91,8 +91,8 @@
91
91
  & .recordstable-th[data-sorted="desc"] .recordstable-sort svg { transform: rotate(180deg); }
92
92
 
93
93
  /* column resize handle */
94
- & .recordstable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
95
- & .recordstable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
94
+ & .recordstable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
95
+ & .recordstable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
96
96
  & .recordstable-resize:hover::after, & .recordstable-resize[data-resizing]::after { opacity: 1; }
97
97
 
98
98
  /* add-column header */
package/dist/styles.css CHANGED
@@ -2483,8 +2483,8 @@
2483
2483
  & .recordstable-th[data-sorted="desc"] .recordstable-sort svg { transform: rotate(180deg); }
2484
2484
 
2485
2485
  /* column resize handle */
2486
- & .recordstable-resize { position: absolute; top: 0; right: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
2487
- & .recordstable-resize::after { content: ""; position: absolute; top: 0; left: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
2486
+ & .recordstable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
2487
+ & .recordstable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: var(--bg-brand-solid); opacity: 0; transition: opacity .12s; }
2488
2488
  & .recordstable-resize:hover::after, & .recordstable-resize[data-resizing]::after { opacity: 1; }
2489
2489
 
2490
2490
  /* add-column header */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crisp-ui-kit/crisp",
3
- "version": "0.20.1",
3
+ "version": "0.20.2",
4
4
  "description": "A lean React design system, measured pixel-for-pixel from Attio.",
5
5
  "license": "MIT",
6
6
  "type": "module",