@join-x5/react-data-grid 1.1.1-nightly → 1.1.2-nightly

package/dist/TableInputCell/expanding.es.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as n, jsxs as u } from "@emotion/react/jsx-runtime";
+import { forwardRef as s, SizeTokenValue as r } from "@join-x5/react-theme";
+import { ChevronDownIcon as g, ChevronRightIcon as m } from "@join-x5/react-icons";
+import { IconButton as h, ButtonVariant as f } from "@join-x5/react";
+import { TableCell as C, TableCellContent as d } from "../TableCell/index.es.js";
+import { useDataGridInputCell as I } from "./hook.es.js";
+const w = (p, a, t) => {
+  const e = p * 20 + (t ? 0 : 8);
+  switch (a) {
+    case r.XXSmall:
+      return `4px 8px 4px ${e + 4}px`;
+    case r.XSmall:
+      return `4px 8px 4px ${e + 4}px`;
+    case r.Small:
+      return `4px 8px 4px ${e + 4}px`;
+    case r.Large:
+      return `10px 12px 10px ${e + 8}px`;
+    case r.XLarge:
+      return `10px 12px 10px ${e + 8}px`;
+    default:
+      return `8px 12px 8px ${e + 8}px`;
+  }
+}, x = s((p, a) => {
+  const {
+    depth: t,
+    isParent: e,
+    padding: o,
+    ...l
+  } = p, i = o ?? w(t, p.size, e);
+  return /* @__PURE__ */ n(C, { ref: a, padding: i, ...l });
+}), b = s((p, a) => {
+  const {
+    cell: t,
+    children: e
+  } = p, o = I(t);
+  if (!t.row.getCanExpand())
+    return /* @__PURE__ */ n(x, { ref: a, depth: t.row.depth, ...o, children: /* @__PURE__ */ n(d, { children: e }) });
+  const l = (() => {
+    const c = t.row.getIsExpanded() ? g : m;
+    return /* @__PURE__ */ n(h, { "data-action": !0, tabIndex: -1, variant: f.InnerInput, size: r.XSmall, onClick: t.row.getToggleExpandedHandler(), children: /* @__PURE__ */ n(c, { size: r.Small }) });
+  })(), i = {
+    display: "flex",
+    gap: "4px",
+    width: "100%",
+    height: "100%",
+    alignItems: "center"
+  };
+  return /* @__PURE__ */ n(x, { isParent: !0, ref: a, depth: t.row.depth, ...o, children: /* @__PURE__ */ u("div", { style: i, children: [
+    l,
+    /* @__PURE__ */ n(d, { children: e })
+  ] }) });
+});
+export {
+  b as DataGridExpandingCell,
+  x as ExpandingCell
+};
+//# sourceMappingURL=expanding.es.js.map

package/dist/TableInputCell/expanding.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanding.es.js","sources":["../../src/TableInputCell/expanding.tsx"],"sourcesContent":["'use client';\n\nimport {forwardRef, SizeTokenValue} from '@join-x5/react-theme';\nimport {ChevronDownIcon, ChevronRightIcon} from '@join-x5/react-icons';\nimport {IconButton, ButtonVariant} from '@join-x5/react';\n\nimport {TableCell, TableCellContent} from '../TableCell';\n\nimport {useDataGridInputCell} from './hook';\n\nimport type {FRC, PropsWithChildren, CSSProperties} from '@join-x5/react-theme';\nimport type {DataGridTableCellProps, TableCellProps} from '../TableCell';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DefaultAny = any;\n\ntype TExpandingCell = FRC<\n  HTMLTableCellElement,\n  {\n    depth: number;\n    isParent?: boolean;\n  } & TableCellProps\n>;\n\nconst sizePadding = (depth: number, size?: SizeTokenValue, isParent?: boolean): CSSProperties['padding'] => {\n  const paddingOffset = depth * 20 + (isParent ? 0 : 8);\n\n  switch (size) {\n    case SizeTokenValue.XXSmall:\n      return `4px 8px 4px ${paddingOffset + 4}px`;\n    case SizeTokenValue.XSmall:\n      return `4px 8px 4px ${paddingOffset + 4}px`;\n    case SizeTokenValue.Small:\n      return `4px 8px 4px ${paddingOffset + 4}px`;\n    case SizeTokenValue.Large:\n      return `10px 12px 10px ${paddingOffset + 8}px`;\n    case SizeTokenValue.XLarge:\n      return `10px 12px 10px ${paddingOffset + 8}px`;\n    default:\n      return `8px 12px 8px ${paddingOffset + 8}px`;\n  }\n};\n\nexport const ExpandingCell: TExpandingCell = forwardRef((props, ref) => {\n  const {depth, isParent, padding, ...rest} = props;\n\n  const resultPadding = padding ?? sizePadding(depth, props.size, isParent);\n\n  return <TableCell ref={ref} padding={resultPadding} {...rest} />;\n});\n\nexport type DataGridExpandingCellProps<T = DefaultAny, V = DefaultAny> = DataGridTableCellProps<T, V> &\n  PropsWithChildren;\n\nexport const DataGridExpandingCell: FRC<HTMLTableCellElement, DataGridExpandingCellProps> = forwardRef((props, ref) => {\n  const {cell, children} = props;\n\n  const cellProps = useDataGridInputCell(cell);\n\n  if (!cell.row.getCanExpand()) {\n    return (\n      <ExpandingCell ref={ref} depth={cell.row.depth} {...cellProps}>\n        <TableCellContent>{children}</TableCellContent>\n      </ExpandingCell>\n    );\n  }\n\n  const button = (() => {\n    const Icon = cell.row.getIsExpanded() ? ChevronDownIcon : ChevronRightIcon;\n\n    return (\n      <IconButton\n        data-action\n        tabIndex={-1}\n        variant={ButtonVariant.InnerInput}\n        size={SizeTokenValue.XSmall}\n        onClick={cell.row.getToggleExpandedHandler()}\n      >\n        <Icon size={SizeTokenValue.Small} />\n      </IconButton>\n    );\n  })();\n\n  const contentStyle = {\n    display: 'flex',\n    gap: '4px',\n    width: '100%',\n    height: '100%',\n    alignItems: 'center',\n  };\n\n  return (\n    <ExpandingCell isParent ref={ref} depth={cell.row.depth} {...cellProps}>\n      <div style={contentStyle}>\n        {button}\n        <TableCellContent>{children}</TableCellContent>\n      </div>\n    </ExpandingCell>\n  );\n});\n"],"names":["depth","isParent","padding","rest","cell","children","button"],"mappings":";;;;;;;AAwBA;AACE;AAEA;AAAY;AAED;AAAgC;AAEhC;AAAgC;AAEhC;AAAgC;AAEhC;AAAmC;AAEnC;AAAmC;AAEnC;AAAiC;AAE9C;AAGQ;AAAA;AAACA;AAAOC;AAAUC;AAAYC;AAIpC;AACF;AAMQ;AAAA;AAACC;AAAMC;AAIb;AACE;AAOF;AACE;AAGE;AAQA;AAIiB;AACV;AACJ;AACE;AACC;AACI;AAGd;AAGOC;AAAAA;AAC2B;AAIpC;;;;;"}