@solibo/solibo-ui 0.3.31 → 0.3.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/index3.css +1 -1
- package/dist/assets/index40.css +1 -1
- package/dist/components/accordion/index.cjs +1 -1
- package/dist/components/accordion/index.cjs.map +1 -1
- package/dist/components/accordion/index.js +15 -18
- package/dist/components/accordion/index.js.map +1 -1
- package/dist/components/nav/index.cjs +1 -1
- package/dist/components/nav/index.cjs.map +1 -1
- package/dist/components/nav/index.js +28 -28
- package/dist/components/nav/index.js.map +1 -1
- package/dist/components/table/index.cjs +1 -1
- package/dist/components/table/index.cjs.map +1 -1
- package/dist/components/table/index.js +62 -42
- package/dist/components/table/index.js.map +1 -1
- package/dist/index.d.ts +0 -3
- package/package.json +1 -1
package/dist/assets/index3.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._table_18uji_1{border-collapse:collapse;margin:var(--unit) 0;width:100%}._table_18uji_1 td,._table_18uji_1 th{padding:var(--unit-small)}._table_18uji_1 tbody tr:nth-child(odd){background-color:var(--color-neutral-light)}._table_18uji_1 th{font-weight:400;text-align:left;white-space:nowrap}._table_18uji_1 th[data-type]{color:var(--color-primary);cursor:pointer}._table_18uji_1 th ._sortable_18uji_27{align-items:center;display:flex;gap:var(--unit-small);justify-content:space-between}._table_18uji_1 th ._sortable_18uji_27 span{display:inline-flex}._table_18uji_1 thead{-webkit-user-select:none;-moz-user-select:none;user-select:none}._table_18uji_1 tr:last-child td:first-child{border-bottom-left-radius:var(--unit)}._table_18uji_1 tr:last-child td:last-child{border-bottom-right-radius:var(--unit)}
|
package/dist/assets/index40.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._nav_roa57_1 a{display:block}._horizontal_roa57_7 a,._horizontal_roa57_7 li{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._tabs_roa57_17{@extend .horizontal;border-bottom:var(--border-width) solid var(--color-border-primary);display:flex;gap:var(--unit)}._tabs_roa57_17 a,._tabs_roa57_17 li{color:var(--color-outer-space);font-weight:var(--font-weight-semibold);padding:var(--unit-tiny) var(--unit-micro) var(--unit-small) var(--unit-micro);text-decoration:none}._tabs_roa57_17 a[aria-current=page],._tabs_roa57_17 li[aria-current=page]{color:var(--color-electric-violet);border-bottom:var(--border-width) solid var(--color-electric-violet)}._pills_roa57_38{background-color:var(--color-translucent);-webkit-backdrop-filter:blur(var(--unit-small));backdrop-filter:blur(var(--unit-small));border-radius:var(--border-radius-large);border:var(--border-width-heavy) solid var(--color-white);box-shadow:var(--shadow-big);display:flex;margin:0 auto;position:-webkit-sticky;position:sticky;top:var(--unit);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:1}._pills_roa57_38:has(>:only-child){display:none}._pills_roa57_38:before{content:"";background:var(--color-electric-violet);border-radius:var(--border-radius-large);inset-block:0;left:anchor(left);position-anchor:--current;position:absolute;transition:left var(--transition-duration) var(--transition-timing-function),top var(--transition-duration) var(--transition-timing-function),width var(--transition-duration) var(--transition-timing-function);width:anchor-size(width);z-index:0}._pills_roa57_38 a{border-radius:var(--unit-large);color:var(--color-primary);display:inline-block;font-weight:var(--font-weight-bold);padding:var(--unit);position:relative;text-decoration:none;text-overflow:ellipsis;transition:color var(--transition-duration) var(--transition-timing-function),padding var(--transition-duration) var(--transition-timing-function);white-space:nowrap;z-index:2}._pills_roa57_38 a[aria-current=page]{anchor-name:--current;color:var(--color-white)}._pills_roa57_38 a[aria-current=page]:hover{color:var(--color-white)}@media (width <= 960px){._pills_roa57_38{flex-direction:column}._pills_roa57_38 a[aria-current=page]{background-color:var(--color-electric-violet)}._pills_roa57_38 a[aria-current=page]:after{background-color:var(--color-white);content:"";display:inline-block;height:var(--unit);margin-left:var(--unit-small);-webkit-mask-image:var(--icon-svg);mask-image:var(--icon-svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;transition:transform var(--transition-duration) var(--transition-timing-function);vertical-align:middle;width:var(--unit)}._pills_roa57_38 a:not([aria-current=page]){display:none}._pills_roa57_38[data-open=true] a{display:block}._pills_roa57_38[data-open=true] a[aria-current=page]:after{transform:rotateX(180deg)}._pills_roa57_38:before{display:none}}@supports not (position-anchor: --x){._pills_roa57_38:before{display:none}._pills_roa57_38 a[aria-current=page]{background:var(--color-electric-violet);color:var(--color-white)}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index30.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index30.css');const o=require("react/jsx-runtime"),i=require("../icon/index.cjs"),t="_accordion_8spz8_1",d={accordion:t},a=({children:e,icon:c,label:s,open:r,summary:n})=>o.jsxs("details",{className:d.accordion,open:r||void 0,"data-component":"accordion",children:[o.jsxs("summary",{children:[c&&!n&&o.jsx(i.Icon,{name:c}),n??s]}),e]});exports.Accordion=a;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/accordion/index.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/accordion/index.tsx"],"sourcesContent":["import { Icon } from '../icon';\nimport type { IconName } from '../icon/icons';\nimport styles from './styles.module.css';\n\nexport type AccordionProps = {\n children: React.ReactNode;\n icon?: IconName;\n label?: string;\n open?: boolean;\n summary?: React.ReactNode;\n};\n\nexport const Accordion = ({ children, icon, label, open, summary }: AccordionProps) => {\n return (\n <details\n className={styles.accordion}\n open={open || undefined}\n >\n <summary>\n {icon && !summary && <Icon name={icon} />}\n {summary ?? label}\n </summary>\n {children}\n </details>\n );\n};\n"],"names":["Accordion","children","icon","label","open","summary","jsxs","styles","accordion","undefined","jsx","Icon"],"mappings":"2LAYaA,EAAYA,CAAC,CAAEC,SAAAA,EAAUC,KAAAA,EAAMC,MAAAA,EAAOC,KAAAA,EAAMC,QAAAA,CAAwB,IAE7EC,OAAC,WACC,UAAWC,EAAOC,UAClB,KAAMJ,GAAQK,OAAU,iBAAA,YAExB,SAAA,CAAAH,OAAC,UAAA,CACEJ,SAAAA,CAAAA,GAAQ,CAACG,GAAWK,EAAAA,IAACC,EAAAA,KAAA,CAAK,KAAMT,EAAK,EACrCG,GAAWF,CAAAA,EACd,EACCF,CAAAA,EACH"}
|
|
@@ -1,24 +1,21 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Icon as
|
|
3
|
-
import '../../assets/index30.css';const
|
|
4
|
-
accordion:
|
|
5
|
-
}, l = (
|
|
6
|
-
|
|
7
|
-
!o || !document.startViewTransition || (n.preventDefault(), document.startViewTransition(() => o.open = !o.open));
|
|
8
|
-
}, u = ({
|
|
9
|
-
children: n,
|
|
1
|
+
import { jsxs as n, jsx as d } from "react/jsx-runtime";
|
|
2
|
+
import { Icon as i } from "../icon/index.js";
|
|
3
|
+
import '../../assets/index30.css';const t = "_accordion_8spz8_1", e = {
|
|
4
|
+
accordion: t
|
|
5
|
+
}, l = ({
|
|
6
|
+
children: r,
|
|
10
7
|
icon: o,
|
|
11
|
-
label:
|
|
12
|
-
open:
|
|
13
|
-
summary:
|
|
14
|
-
}) => /* @__PURE__ */
|
|
15
|
-
/* @__PURE__ */
|
|
16
|
-
o && !
|
|
17
|
-
|
|
8
|
+
label: s,
|
|
9
|
+
open: a,
|
|
10
|
+
summary: c
|
|
11
|
+
}) => /* @__PURE__ */ n("details", { className: e.accordion, open: a || void 0, "data-component": "accordion", children: [
|
|
12
|
+
/* @__PURE__ */ n("summary", { children: [
|
|
13
|
+
o && !c && /* @__PURE__ */ d(i, { name: o }),
|
|
14
|
+
c ?? s
|
|
18
15
|
] }),
|
|
19
|
-
|
|
16
|
+
r
|
|
20
17
|
] });
|
|
21
18
|
export {
|
|
22
|
-
|
|
19
|
+
l as Accordion
|
|
23
20
|
};
|
|
24
21
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/accordion/index.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/accordion/index.tsx"],"sourcesContent":["import { Icon } from '../icon';\nimport type { IconName } from '../icon/icons';\nimport styles from './styles.module.css';\n\nexport type AccordionProps = {\n children: React.ReactNode;\n icon?: IconName;\n label?: string;\n open?: boolean;\n summary?: React.ReactNode;\n};\n\nexport const Accordion = ({ children, icon, label, open, summary }: AccordionProps) => {\n return (\n <details\n className={styles.accordion}\n open={open || undefined}\n >\n <summary>\n {icon && !summary && <Icon name={icon} />}\n {summary ?? label}\n </summary>\n {children}\n </details>\n );\n};\n"],"names":["Accordion","children","icon","label","open","summary","jsxs","styles","accordion","undefined","jsx","Icon"],"mappings":";;;;GAYaA,IAAYA,CAAC;AAAA,EAAEC,UAAAA;AAAAA,EAAUC,MAAAA;AAAAA,EAAMC,OAAAA;AAAAA,EAAOC,MAAAA;AAAAA,EAAMC,SAAAA;AAAwB,MAE7E,gBAAAC,EAAC,aACC,WAAWC,EAAOC,WAClB,MAAMJ,KAAQK,QAAU,kBAAA,aAExB,UAAA;AAAA,EAAA,gBAAAH,EAAC,WAAA,EACEJ,UAAAA;AAAAA,IAAAA,KAAQ,CAACG,KAAW,gBAAAK,EAACC,GAAA,EAAK,MAAMT,GAAK;AAAA,IACrCG,KAAWF;AAAAA,EAAAA,GACd;AAAA,EACCF;AAAAA,GACH;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index40.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index40.css');const p=require("react/jsx-runtime"),f=require("../../classix-5H4IWnMA.cjs"),_=require("react"),v=require("../../icons-CWtPtYZj.cjs"),h="_nav_roa57_1",b="_horizontal_roa57_7",w="_tabs_roa57_17",g="_pills_roa57_38",t={nav:h,horizontal:b,tabs:w,pills:g},m={default:t.default,pills:t.pills,tabs:t.tabs},q=({animation:o,children:i,className:r,horizontal:s=!1,variant:n="default",...l})=>{const[c,a]=_.useState(!1),u={"--icon-svg":v.iconSVG("chevron")};return p.jsx("nav",{className:f.t(r,s&&t.horizontal,t.nav,m[n]),"data-animation":o,"data-open":c?"true":"false","data-orientation":s?"horizontal":"vertical",onBlurCapture:e=>{if(n!=="pills"||window.innerWidth>960)return;const d=e.relatedTarget;e.currentTarget.contains(d)||a(!1)},onClick:()=>{n!=="pills"||window.innerWidth>960||a(e=>!e)},onFocusCapture:()=>{n!=="pills"||window.innerWidth>960||a(!0)},style:u,...l,"data-component":"nav",children:i})};exports.Nav=q;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/nav/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/nav/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useState } from 'react';\n\nimport { iconSVG } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n default: styles.default,\n pills: styles.pills,\n tabs: styles.tabs,\n};\n\nexport type NavProps = React.HTMLAttributes<HTMLElement> & {\n animation?: string;\n children?: React.ReactNode;\n className?: string;\n horizontal?: boolean;\n variant?: keyof typeof variants;\n};\n\nexport const Nav = ({\n animation,\n children,\n className,\n horizontal = false,\n variant = 'default',\n ...props\n}: NavProps) => {\n const [open, setOpen] = useState(false);\n\n type withVars = React.CSSProperties & {\n '--icon-svg'?: string;\n };\n const withVars: withVars = {\n '--icon-svg': iconSVG('chevron'),\n };\n\n return (\n <nav\n className={cx(className, horizontal && styles.horizontal, styles.nav, variants[variant])}\n data-animation={animation}\n data-open={open ? 'true' : 'false'}\n data-orientation={horizontal ? 'horizontal' : 'vertical'}\n onBlurCapture={(e) => {\n if (variant !== 'pills' || window.innerWidth > 960) return;\n\n const next = e.relatedTarget as Node | null;\n if (!e.currentTarget.contains(next)) {\n setOpen(false);\n }\n }}\n onClick={() => {\n if (variant !== 'pills' || window.innerWidth > 960) return;\n setOpen((v) => !v);\n }}\n onFocusCapture={() => {\n if (variant !== 'pills' || window.innerWidth > 960) return;\n setOpen(true);\n }}\n style={withVars}\n {...props}\n >\n {children}\n </nav>\n );\n};\n"],"names":["variants","default","styles","pills","tabs","Nav","animation","children","className","horizontal","variant","props","open","setOpen","useState","withVars","iconSVG","jsx","cx","nav","e","window","innerWidth","next","relatedTarget","currentTarget","contains","v"],"mappings":"4UAOMA,EAAW,CACfC,QAASC,EAAOD,QAChBE,MAAOD,EAAOC,MACdC,KAAMF,EAAOE,IACf,EAUaC,EAAMA,CAAC,CAClBC,UAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,WAAAA,EAAa,GACbC,QAAAA,EAAU,UACV,GAAGC,CACK,IAAM,CACd,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAAS,EAAK,EAKhCC,EAAqB,CACzB,aAAcC,EAAAA,QAAQ,SAAS,CAAA,EAGjC,OACEC,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,EAAGV,EAAWC,GAAcP,EAAOO,WAAYP,EAAOiB,IAAKnB,EAASU,CAAO,CAAC,EACvF,iBAAgBJ,EAChB,YAAWM,EAAO,OAAS,QAC3B,mBAAkBH,EAAa,aAAe,WAC9C,cAAgBW,GAAM,CACpB,GAAIV,IAAY,SAAWW,OAAOC,WAAa,IAAK,OAEpD,MAAMC,EAAOH,EAAEI,cACVJ,EAAEK,cAAcC,SAASH,CAAI,GAChCV,EAAQ,EAAK,CAEjB,EACA,QAAS,IAAM,CACTH,IAAY,SAAWW,OAAOC,WAAa,KAC/CT,EAASc,GAAM,CAACA,CAAC,CACnB,EACA,eAAgB,IAAM,CAChBjB,IAAY,SAAWW,OAAOC,WAAa,KAC/CT,EAAQ,EAAI,CACd,EACA,MAAOE,EACP,GAAIJ,EAAM,iBAAA,MAETJ,SAAAA,EACH,CAEJ"}
|
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { t as
|
|
3
|
-
import {
|
|
4
|
-
import { i as
|
|
5
|
-
import '../../assets/index40.css';const h = "
|
|
1
|
+
import { jsx as u } from "react/jsx-runtime";
|
|
2
|
+
import { t as d } from "../../classix-DG18itHa.js";
|
|
3
|
+
import { useState as _ } from "react";
|
|
4
|
+
import { i as m } from "../../icons-DeUtqBx_.js";
|
|
5
|
+
import '../../assets/index40.css';const h = "_nav_roa57_1", v = "_horizontal_roa57_7", w = "_tabs_roa57_17", b = "_pills_roa57_38", t = {
|
|
6
6
|
nav: h,
|
|
7
7
|
horizontal: v,
|
|
8
8
|
tabs: w,
|
|
9
|
-
pills:
|
|
10
|
-
},
|
|
11
|
-
default:
|
|
12
|
-
pills:
|
|
13
|
-
tabs:
|
|
14
|
-
},
|
|
15
|
-
animation:
|
|
16
|
-
children:
|
|
17
|
-
className:
|
|
9
|
+
pills: b
|
|
10
|
+
}, z = {
|
|
11
|
+
default: t.default,
|
|
12
|
+
pills: t.pills,
|
|
13
|
+
tabs: t.tabs
|
|
14
|
+
}, y = ({
|
|
15
|
+
animation: r,
|
|
16
|
+
children: i,
|
|
17
|
+
className: e,
|
|
18
18
|
horizontal: s = !1,
|
|
19
|
-
variant:
|
|
20
|
-
...
|
|
19
|
+
variant: n = "default",
|
|
20
|
+
...l
|
|
21
21
|
}) => {
|
|
22
|
-
const
|
|
23
|
-
"--icon-svg":
|
|
22
|
+
const [c, a] = _(!1), p = {
|
|
23
|
+
"--icon-svg": m("chevron")
|
|
24
24
|
};
|
|
25
|
-
return /* @__PURE__ */
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
},
|
|
25
|
+
return /* @__PURE__ */ u("nav", { className: d(e, s && t.horizontal, t.nav, z[n]), "data-animation": r, "data-open": c ? "true" : "false", "data-orientation": s ? "horizontal" : "vertical", onBlurCapture: (o) => {
|
|
26
|
+
if (n !== "pills" || window.innerWidth > 960) return;
|
|
27
|
+
const f = o.relatedTarget;
|
|
28
|
+
o.currentTarget.contains(f) || a(!1);
|
|
29
|
+
}, onClick: () => {
|
|
30
|
+
n !== "pills" || window.innerWidth > 960 || a((o) => !o);
|
|
31
|
+
}, onFocusCapture: () => {
|
|
32
|
+
n !== "pills" || window.innerWidth > 960 || a(!0);
|
|
33
|
+
}, style: p, ...l, "data-component": "nav", children: i });
|
|
34
34
|
};
|
|
35
35
|
export {
|
|
36
|
-
|
|
36
|
+
y as Nav
|
|
37
37
|
};
|
|
38
38
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/nav/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/nav/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useState } from 'react';\n\nimport { iconSVG } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\nconst variants = {\n default: styles.default,\n pills: styles.pills,\n tabs: styles.tabs,\n};\n\nexport type NavProps = React.HTMLAttributes<HTMLElement> & {\n animation?: string;\n children?: React.ReactNode;\n className?: string;\n horizontal?: boolean;\n variant?: keyof typeof variants;\n};\n\nexport const Nav = ({\n animation,\n children,\n className,\n horizontal = false,\n variant = 'default',\n ...props\n}: NavProps) => {\n const [open, setOpen] = useState(false);\n\n type withVars = React.CSSProperties & {\n '--icon-svg'?: string;\n };\n const withVars: withVars = {\n '--icon-svg': iconSVG('chevron'),\n };\n\n return (\n <nav\n className={cx(className, horizontal && styles.horizontal, styles.nav, variants[variant])}\n data-animation={animation}\n data-open={open ? 'true' : 'false'}\n data-orientation={horizontal ? 'horizontal' : 'vertical'}\n onBlurCapture={(e) => {\n if (variant !== 'pills' || window.innerWidth > 960) return;\n\n const next = e.relatedTarget as Node | null;\n if (!e.currentTarget.contains(next)) {\n setOpen(false);\n }\n }}\n onClick={() => {\n if (variant !== 'pills' || window.innerWidth > 960) return;\n setOpen((v) => !v);\n }}\n onFocusCapture={() => {\n if (variant !== 'pills' || window.innerWidth > 960) return;\n setOpen(true);\n }}\n style={withVars}\n {...props}\n >\n {children}\n </nav>\n );\n};\n"],"names":["variants","default","styles","pills","tabs","Nav","animation","children","className","horizontal","variant","props","open","setOpen","useState","withVars","iconSVG","jsx","cx","nav","e","window","innerWidth","next","relatedTarget","currentTarget","contains","v"],"mappings":";;;;;;;;;GAOMA,IAAW;AAAA,EACfC,SAASC,EAAOD;AAAAA,EAChBE,OAAOD,EAAOC;AAAAA,EACdC,MAAMF,EAAOE;AACf,GAUaC,IAAMA,CAAC;AAAA,EAClBC,WAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,SAAAA,IAAU;AAAA,EACV,GAAGC;AACK,MAAM;AACd,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAKhCC,IAAqB;AAAA,IACzB,cAAcC,EAAQ,SAAS;AAAA,EAAA;AAGjC,SACE,gBAAAC,EAAC,OAAA,EACC,WAAWC,EAAGV,GAAWC,KAAcP,EAAOO,YAAYP,EAAOiB,KAAKnB,EAASU,CAAO,CAAC,GACvF,kBAAgBJ,GAChB,aAAWM,IAAO,SAAS,SAC3B,oBAAkBH,IAAa,eAAe,YAC9C,eAAgBW,CAAAA,MAAM;AACpB,QAAIV,MAAY,WAAWW,OAAOC,aAAa,IAAK;AAEpD,UAAMC,IAAOH,EAAEI;AACf,IAAKJ,EAAEK,cAAcC,SAASH,CAAI,KAChCV,EAAQ,EAAK;AAAA,EAEjB,GACA,SAAS,MAAM;AACb,IAAIH,MAAY,WAAWW,OAAOC,aAAa,OAC/CT,EAASc,CAAAA,MAAM,CAACA,CAAC;AAAA,EACnB,GACA,gBAAgB,MAAM;AACpB,IAAIjB,MAAY,WAAWW,OAAOC,aAAa,OAC/CT,EAAQ,EAAI;AAAA,EACd,GACA,OAAOE,GACP,GAAIJ,GAAM,kBAAA,OAETJ,UAAAA,GACH;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index3.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index3.css');const f=require("react/jsx-runtime"),i=require("react"),F=require("../icon/index.cjs"),k="_table_18uji_1",D="_sortable_18uji_27",j={table:k,sortable:D},m=r=>i.isValidElement(r),A=r=>i.Children.toArray(r).reduce((e,t)=>m(t)?e+(t.type==="td"||t.type==="th"?1:A(t.props.children)):e,0),v=r=>{for(const e of i.Children.toArray(r)){if(!m(e))continue;if(e.type==="tr")return A(e.props.children);const t=v(e.props.children);if(t!==null)return t}return null},S=(r,e)=>i.Children.map(r,t=>{if(!m(t))return t;let s=t.props.children===void 0?t.props.children:S(t.props.children,e),n;return t.type==="td"&&t.props["data-span"]==="all"&&(n={colSpan:e}),t.type==="th"&&t.props["data-type"]&&(s=f.jsxs("span",{className:j.sortable,children:[s,f.jsx(F.Icon,{"aria-hidden":"true",name:"updown",size:"small",variant:"primary"})]})),n||s!==t.props.children?i.cloneElement(t,n,s):t}),I=(r,e,t,s,n=1)=>{if(t==="text")return r.localeCompare(e,s,{sensitivity:"base"})*n;const l=t==="date"?Date.parse(r):Number.parseFloat(r),c=t==="date"?Date.parse(e):Number.parseFloat(e);return Number.isNaN(l)&&Number.isNaN(c)?0:Number.isNaN(l)?1:Number.isNaN(c)?-1:(l-c)*n},P=({children:r,locale:e,...t})=>{const s=i.useRef(null),n=v(r),l=n&&n>0?S(r,n):r,c=(d,u,o)=>{d.querySelectorAll("th[data-type]").forEach(a=>{a===u?(a.dataset.dir=o,a.setAttribute("aria-sort",o==="asc"?"ascending":"descending")):(delete a.dataset.dir,a.setAttribute("aria-sort","none"))})},q=i.useCallback(d=>{var x,g;const u=s.current;if(!u)return;const o=(x=d.target)==null?void 0:x.closest("th");if(!o)return;const p=u.tHead;if(!p||!p.contains(o))return;const a=o.cellIndex;if(a<0)return;const b=(g=u.tBodies)==null?void 0:g[0];if(!b)return;const y=o.getAttribute("data-type");if(!y)return;const N=o.dataset.dir==="asc"?"desc":"asc";c(p,o,N);const w=N==="asc"?1:-1,C=Array.from(b.rows);C.sort((E,R)=>{var _,h;const T=(((_=E.cells[a])==null?void 0:_.textContent)??"").trim(),z=(((h=R.cells[a])==null?void 0:h.textContent)??"").trim();return I(T,z,y,e,w)}),b.append(...C)},[e]);return f.jsx("table",{className:j.table,onClick:q,ref:s,...t,"data-component":"table",children:l})};exports.Table=P;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\nimport styles from './styles.module.css';\n\nexport type TableProps = React.TableHTMLAttributes<HTMLTableElement> & {\n children?: React.ReactNode;\n locale?: string | string[];\n};\n\n/**\n * Sortable columns must provide data-type (number or
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useCallback, useRef } from 'react';\n\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type TableProps = React.TableHTMLAttributes<HTMLTableElement> & {\n children?: React.ReactNode;\n locale?: string | string[];\n};\n\ntype SortType = 'date' | 'number' | 'text';\n\ntype TableChildProps = {\n children?: React.ReactNode;\n colSpan?: number;\n 'data-span'?: string;\n 'data-type'?: SortType;\n};\n\nconst isTableElement = (child: React.ReactNode): child is React.ReactElement<TableChildProps> =>\n isValidElement<TableChildProps>(child);\n\nconst countCells = (children: React.ReactNode): number =>\n Children.toArray(children).reduce<number>((count, child) => {\n if (!isTableElement(child)) return count;\n return (\n count + (child.type === 'td' || child.type === 'th' ? 1 : countCells(child.props.children))\n );\n }, 0);\n\nconst getFirstRowCellCount = (children: React.ReactNode): number | null => {\n for (const child of Children.toArray(children)) {\n if (!isTableElement(child)) continue;\n\n if (child.type === 'tr') return countCells(child.props.children);\n\n const nestedCount = getFirstRowCellCount(child.props.children);\n if (nestedCount !== null) return nestedCount;\n }\n\n return null;\n};\n\nconst normalizeChildren = (children: React.ReactNode, columnCount: number): React.ReactNode =>\n Children.map(children, (child) => {\n if (!isTableElement(child)) return child;\n\n let nextChildren =\n child.props.children === undefined\n ? child.props.children\n : normalizeChildren(child.props.children, columnCount);\n let nextProps: Partial<TableChildProps> | undefined;\n\n if (child.type === 'td' && child.props['data-span'] === 'all') {\n nextProps = { colSpan: columnCount };\n }\n\n if (child.type === 'th' && child.props['data-type']) {\n nextChildren = (\n <span className={styles.sortable}>\n {nextChildren}\n <Icon\n aria-hidden='true'\n name='updown'\n size='small'\n variant='primary'\n />\n </span>\n );\n }\n\n return nextProps || nextChildren !== child.props.children\n ? cloneElement(child, nextProps, nextChildren)\n : child;\n });\n\n/**\n * Sortable columns must provide data-type (text, number, or date) in the `th` element.\n */\n\nconst compare = (a: string, b: string, type: SortType, locale?: string | string[], dir = 1) => {\n if (type === 'text') {\n return a.localeCompare(b, locale, { sensitivity: 'base' }) * dir;\n }\n\n const left = type === 'date' ? Date.parse(a) : Number.parseFloat(a);\n const right = type === 'date' ? Date.parse(b) : Number.parseFloat(b);\n\n if (Number.isNaN(left) && Number.isNaN(right)) return 0;\n if (Number.isNaN(left)) return 1;\n if (Number.isNaN(right)) return -1;\n return (left - right) * dir;\n};\n\nexport const Table = ({ children, locale, ...props }: TableProps) => {\n const ref = useRef<HTMLTableElement | null>(null);\n const columnCount = getFirstRowCellCount(children);\n const normalizedChildren =\n columnCount && columnCount > 0 ? normalizeChildren(children, columnCount) : children;\n\n const setSortState = (\n thead: HTMLTableSectionElement,\n active: HTMLTableCellElement,\n dir: 'asc' | 'desc'\n ) => {\n const ths = thead.querySelectorAll<HTMLTableCellElement>('th[data-type]');\n\n ths.forEach((th) => {\n if (th === active) {\n th.dataset.dir = dir;\n th.setAttribute('aria-sort', dir === 'asc' ? 'ascending' : 'descending');\n } else {\n delete th.dataset.dir;\n th.setAttribute('aria-sort', 'none');\n }\n });\n };\n\n const onClick = useCallback(\n (e: React.MouseEvent<HTMLTableElement>) => {\n const table = ref.current;\n if (!table) return;\n\n const th = (e.target as HTMLElement | null)?.closest('th');\n if (!th) return;\n\n const thead = table.tHead;\n if (!thead || !thead.contains(th)) return;\n\n const col = th.cellIndex;\n if (col < 0) return;\n\n const tbody = table.tBodies?.[0];\n if (!tbody) return;\n\n const type = th.getAttribute('data-type') as SortType | null;\n if (!type) return;\n\n const direction = th.dataset.dir === 'asc' ? 'desc' : 'asc';\n setSortState(thead, th, direction);\n const dir = direction === 'asc' ? 1 : -1;\n\n const rows = Array.from(tbody.rows);\n\n rows.sort((a, b) => {\n const av = (a.cells[col]?.textContent ?? '').trim();\n const bv = (b.cells[col]?.textContent ?? '').trim();\n return compare(av, bv, type, locale, dir);\n });\n\n tbody.append(...rows);\n },\n [locale]\n );\n\n return (\n <table\n className={styles.table}\n onClick={onClick}\n ref={ref}\n {...props}\n >\n {normalizedChildren}\n </table>\n );\n};\n"],"names":["isTableElement","child","isValidElement","countCells","children","Children","toArray","reduce","count","type","props","getFirstRowCellCount","nestedCount","normalizeChildren","columnCount","map","nextChildren","undefined","nextProps","colSpan","jsxs","styles","sortable","jsx","Icon","cloneElement","compare","a","b","locale","dir","localeCompare","sensitivity","left","Date","parse","Number","parseFloat","right","isNaN","Table","ref","useRef","normalizedChildren","setSortState","thead","active","querySelectorAll","forEach","th","dataset","setAttribute","onClick","useCallback","e","table","current","target","closest","tHead","contains","col","cellIndex","tbody","tBodies","getAttribute","direction","rows","Array","from","sort","av","cells","textContent","trim","bv","append"],"mappings":"wOAmBMA,EAAkBC,GACtBC,EAAAA,eAAgCD,CAAK,EAEjCE,EAAcC,GAClBC,EAAAA,SAASC,QAAQF,CAAQ,EAAEG,OAAe,CAACC,EAAOP,IAC3CD,EAAeC,CAAK,EAEvBO,GAASP,EAAMQ,OAAS,MAAQR,EAAMQ,OAAS,KAAO,EAAIN,EAAWF,EAAMS,MAAMN,QAAQ,GAFxDI,EAIlC,CAAC,EAEAG,EAAwBP,GAA6C,CACzE,UAAWH,KAASI,EAAAA,SAASC,QAAQF,CAAQ,EAAG,CAC9C,GAAI,CAACJ,EAAeC,CAAK,EAAG,SAE5B,GAAIA,EAAMQ,OAAS,YAAaN,EAAWF,EAAMS,MAAMN,QAAQ,EAE/D,MAAMQ,EAAcD,EAAqBV,EAAMS,MAAMN,QAAQ,EAC7D,GAAIQ,IAAgB,KAAM,OAAOA,CACnC,CAEA,OAAO,IACT,EAEMC,EAAoBA,CAACT,EAA2BU,IACpDT,EAAAA,SAASU,IAAIX,EAAWH,GAAU,CAChC,GAAI,CAACD,EAAeC,CAAK,EAAG,OAAOA,EAEnC,IAAIe,EACFf,EAAMS,MAAMN,WAAaa,OACrBhB,EAAMS,MAAMN,SACZS,EAAkBZ,EAAMS,MAAMN,SAAUU,CAAW,EACrDI,EAEJ,OAAIjB,EAAMQ,OAAS,MAAQR,EAAMS,MAAM,WAAW,IAAM,QACtDQ,EAAY,CAAEC,QAASL,CAAAA,GAGrBb,EAAMQ,OAAS,MAAQR,EAAMS,MAAM,WAAW,IAChDM,EACEI,EAAAA,KAAC,OAAA,CAAK,UAAWC,EAAOC,SACrBN,SAAAA,CAAAA,EACDO,EAAAA,IAACC,EAAAA,MACC,cAAY,OACZ,KAAK,SACL,KAAK,QACL,QAAQ,SAAA,CAAS,CAAA,EAErB,GAIGN,GAAaF,IAAiBf,EAAMS,MAAMN,SAC7CqB,EAAAA,aAAaxB,EAAOiB,EAAWF,CAAY,EAC3Cf,CACN,CAAC,EAMGyB,EAAUA,CAACC,EAAWC,EAAWnB,EAAgBoB,EAA4BC,EAAM,IAAM,CAC7F,GAAIrB,IAAS,OACX,OAAOkB,EAAEI,cAAcH,EAAGC,EAAQ,CAAEG,YAAa,MAAA,CAAQ,EAAIF,EAG/D,MAAMG,EAAOxB,IAAS,OAASyB,KAAKC,MAAMR,CAAC,EAAIS,OAAOC,WAAWV,CAAC,EAC5DW,EAAQ7B,IAAS,OAASyB,KAAKC,MAAMP,CAAC,EAAIQ,OAAOC,WAAWT,CAAC,EAEnE,OAAIQ,OAAOG,MAAMN,CAAI,GAAKG,OAAOG,MAAMD,CAAK,EAAU,EAClDF,OAAOG,MAAMN,CAAI,EAAU,EAC3BG,OAAOG,MAAMD,CAAK,EAAU,IACxBL,EAAOK,GAASR,CAC1B,EAEaU,EAAQA,CAAC,CAAEpC,SAAAA,EAAUyB,OAAAA,EAAQ,GAAGnB,CAAkB,IAAM,CACnE,MAAM+B,EAAMC,EAAAA,OAAgC,IAAI,EAC1C5B,EAAcH,EAAqBP,CAAQ,EAC3CuC,EACJ7B,GAAeA,EAAc,EAAID,EAAkBT,EAAUU,CAAW,EAAIV,EAExEwC,EAAeA,CACnBC,EACAC,EACAhB,IACG,CACSe,EAAME,iBAAuC,eAAe,EAEpEC,QAASC,GAAO,CACdA,IAAOH,GACTG,EAAGC,QAAQpB,IAAMA,EACjBmB,EAAGE,aAAa,YAAarB,IAAQ,MAAQ,YAAc,YAAY,IAEvE,OAAOmB,EAAGC,QAAQpB,IAClBmB,EAAGE,aAAa,YAAa,MAAM,EAEvC,CAAC,CACH,EAEMC,EAAUC,cACbC,GAA0C,SACzC,MAAMC,EAAQd,EAAIe,QAClB,GAAI,CAACD,EAAO,OAEZ,MAAMN,GAAMK,EAAAA,EAAEG,SAAFH,YAAAA,EAAiCI,QAAQ,MACrD,GAAI,CAACT,EAAI,OAET,MAAMJ,EAAQU,EAAMI,MACpB,GAAI,CAACd,GAAS,CAACA,EAAMe,SAASX,CAAE,EAAG,OAEnC,MAAMY,EAAMZ,EAAGa,UACf,GAAID,EAAM,EAAG,OAEb,MAAME,GAAQR,EAAAA,EAAMS,UAANT,YAAAA,EAAgB,GAC9B,GAAI,CAACQ,EAAO,OAEZ,MAAMtD,EAAOwC,EAAGgB,aAAa,WAAW,EACxC,GAAI,CAACxD,EAAM,OAEX,MAAMyD,EAAYjB,EAAGC,QAAQpB,MAAQ,MAAQ,OAAS,MACtDc,EAAaC,EAAOI,EAAIiB,CAAS,EACjC,MAAMpC,EAAMoC,IAAc,MAAQ,EAAI,GAEhCC,EAAOC,MAAMC,KAAKN,EAAMI,IAAI,EAElCA,EAAKG,KAAK,CAAC3C,EAAGC,IAAM,SAClB,MAAM2C,KAAM5C,EAAAA,EAAE6C,MAAMX,CAAG,IAAXlC,YAAAA,EAAc8C,cAAe,IAAIC,KAAAA,EACvCC,KAAM/C,EAAAA,EAAE4C,MAAMX,CAAG,IAAXjC,YAAAA,EAAc6C,cAAe,IAAIC,KAAAA,EAC7C,OAAOhD,EAAQ6C,EAAII,EAAIlE,EAAMoB,EAAQC,CAAG,CAC1C,CAAC,EAEDiC,EAAMa,OAAO,GAAGT,CAAI,CACtB,EACA,CAACtC,CAAM,CACT,EAEA,OACEN,EAAAA,IAAC,QAAA,CACC,UAAWF,EAAOkC,MAClB,QAAAH,EACA,IAAAX,EACA,GAAI/B,EAAM,iBAAA,QAETiC,SAAAA,CAAAA,CACH,CAEJ"}
|
|
@@ -1,48 +1,68 @@
|
|
|
1
|
-
import { jsx as _ } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { jsx as _, jsxs as I } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as R, useCallback as T, Children as m, cloneElement as q, isValidElement as B } from "react";
|
|
3
|
+
import { Icon as H } from "../icon/index.js";
|
|
4
|
+
import '../../assets/index3.css';const P = "_table_18uji_1", V = "_sortable_18uji_27", h = {
|
|
5
|
+
table: P,
|
|
6
|
+
sortable: V
|
|
7
|
+
}, f = (r) => B(r), v = (r) => m.toArray(r).reduce((e, t) => f(t) ? e + (t.type === "td" || t.type === "th" ? 1 : v(t.props.children)) : e, 0), j = (r) => {
|
|
8
|
+
for (const e of m.toArray(r)) {
|
|
9
|
+
if (!f(e)) continue;
|
|
10
|
+
if (e.type === "tr") return v(e.props.children);
|
|
11
|
+
const t = j(e.props.children);
|
|
12
|
+
if (t !== null) return t;
|
|
13
|
+
}
|
|
14
|
+
return null;
|
|
15
|
+
}, w = (r, e) => m.map(r, (t) => {
|
|
16
|
+
if (!f(t)) return t;
|
|
17
|
+
let s = t.props.children === void 0 ? t.props.children : w(t.props.children, e), n;
|
|
18
|
+
return t.type === "td" && t.props["data-span"] === "all" && (n = {
|
|
19
|
+
colSpan: e
|
|
20
|
+
}), t.type === "th" && t.props["data-type"] && (s = /* @__PURE__ */ I("span", { className: h.sortable, children: [
|
|
21
|
+
s,
|
|
22
|
+
/* @__PURE__ */ _(H, { "aria-hidden": "true", name: "updown", size: "small", variant: "primary" })
|
|
23
|
+
] })), n || s !== t.props.children ? q(t, n, s) : t;
|
|
24
|
+
}), G = (r, e, t, s, n = 1) => {
|
|
25
|
+
if (t === "text")
|
|
26
|
+
return r.localeCompare(e, s, {
|
|
27
|
+
sensitivity: "base"
|
|
28
|
+
}) * n;
|
|
29
|
+
const i = t === "date" ? Date.parse(r) : Number.parseFloat(r), l = t === "date" ? Date.parse(e) : Number.parseFloat(e);
|
|
30
|
+
return Number.isNaN(i) && Number.isNaN(l) ? 0 : Number.isNaN(i) ? 1 : Number.isNaN(l) ? -1 : (i - l) * n;
|
|
31
|
+
}, M = ({
|
|
32
|
+
children: r,
|
|
33
|
+
locale: e,
|
|
34
|
+
...t
|
|
9
35
|
}) => {
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
36
|
+
const s = R(null), n = j(r), i = n && n > 0 ? w(r, n) : r, l = (u, c, o) => {
|
|
37
|
+
u.querySelectorAll("th[data-type]").forEach((a) => {
|
|
38
|
+
a === c ? (a.dataset.dir = o, a.setAttribute("aria-sort", o === "asc" ? "ascending" : "descending")) : (delete a.dataset.dir, a.setAttribute("aria-sort", "none"));
|
|
13
39
|
});
|
|
14
|
-
},
|
|
15
|
-
var
|
|
16
|
-
const
|
|
17
|
-
if (!
|
|
18
|
-
const
|
|
19
|
-
if (!
|
|
20
|
-
const
|
|
21
|
-
if (!
|
|
22
|
-
const
|
|
23
|
-
if (
|
|
24
|
-
const
|
|
25
|
-
if (!
|
|
26
|
-
const
|
|
27
|
-
if (!
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
var
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
return p.localeCompare(y, i, {
|
|
39
|
-
sensitivity: "base"
|
|
40
|
-
}) * d;
|
|
41
|
-
}), a.append(...m);
|
|
42
|
-
}, [i]);
|
|
43
|
-
return /* @__PURE__ */ _("table", { className: q.table, onClick: k, ref: l, ...g, "data-component": "table", children: C });
|
|
40
|
+
}, E = T((u) => {
|
|
41
|
+
var C, x;
|
|
42
|
+
const c = s.current;
|
|
43
|
+
if (!c) return;
|
|
44
|
+
const o = (C = u.target) == null ? void 0 : C.closest("th");
|
|
45
|
+
if (!o) return;
|
|
46
|
+
const p = c.tHead;
|
|
47
|
+
if (!p || !p.contains(o)) return;
|
|
48
|
+
const a = o.cellIndex;
|
|
49
|
+
if (a < 0) return;
|
|
50
|
+
const d = (x = c.tBodies) == null ? void 0 : x[0];
|
|
51
|
+
if (!d) return;
|
|
52
|
+
const b = o.getAttribute("data-type");
|
|
53
|
+
if (!b) return;
|
|
54
|
+
const N = o.dataset.dir === "asc" ? "desc" : "asc";
|
|
55
|
+
l(p, o, N);
|
|
56
|
+
const S = N === "asc" ? 1 : -1, y = Array.from(d.rows);
|
|
57
|
+
y.sort((z, F) => {
|
|
58
|
+
var A, g;
|
|
59
|
+
const k = (((A = z.cells[a]) == null ? void 0 : A.textContent) ?? "").trim(), D = (((g = F.cells[a]) == null ? void 0 : g.textContent) ?? "").trim();
|
|
60
|
+
return G(k, D, b, e, S);
|
|
61
|
+
}), d.append(...y);
|
|
62
|
+
}, [e]);
|
|
63
|
+
return /* @__PURE__ */ _("table", { className: h.table, onClick: E, ref: s, ...t, "data-component": "table", children: i });
|
|
44
64
|
};
|
|
45
65
|
export {
|
|
46
|
-
|
|
66
|
+
M as Table
|
|
47
67
|
};
|
|
48
68
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\nimport styles from './styles.module.css';\n\nexport type TableProps = React.TableHTMLAttributes<HTMLTableElement> & {\n children?: React.ReactNode;\n locale?: string | string[];\n};\n\n/**\n * Sortable columns must provide data-type (number or
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/table/index.tsx"],"sourcesContent":["import { Children, cloneElement, isValidElement, useCallback, useRef } from 'react';\n\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type TableProps = React.TableHTMLAttributes<HTMLTableElement> & {\n children?: React.ReactNode;\n locale?: string | string[];\n};\n\ntype SortType = 'date' | 'number' | 'text';\n\ntype TableChildProps = {\n children?: React.ReactNode;\n colSpan?: number;\n 'data-span'?: string;\n 'data-type'?: SortType;\n};\n\nconst isTableElement = (child: React.ReactNode): child is React.ReactElement<TableChildProps> =>\n isValidElement<TableChildProps>(child);\n\nconst countCells = (children: React.ReactNode): number =>\n Children.toArray(children).reduce<number>((count, child) => {\n if (!isTableElement(child)) return count;\n return (\n count + (child.type === 'td' || child.type === 'th' ? 1 : countCells(child.props.children))\n );\n }, 0);\n\nconst getFirstRowCellCount = (children: React.ReactNode): number | null => {\n for (const child of Children.toArray(children)) {\n if (!isTableElement(child)) continue;\n\n if (child.type === 'tr') return countCells(child.props.children);\n\n const nestedCount = getFirstRowCellCount(child.props.children);\n if (nestedCount !== null) return nestedCount;\n }\n\n return null;\n};\n\nconst normalizeChildren = (children: React.ReactNode, columnCount: number): React.ReactNode =>\n Children.map(children, (child) => {\n if (!isTableElement(child)) return child;\n\n let nextChildren =\n child.props.children === undefined\n ? child.props.children\n : normalizeChildren(child.props.children, columnCount);\n let nextProps: Partial<TableChildProps> | undefined;\n\n if (child.type === 'td' && child.props['data-span'] === 'all') {\n nextProps = { colSpan: columnCount };\n }\n\n if (child.type === 'th' && child.props['data-type']) {\n nextChildren = (\n <span className={styles.sortable}>\n {nextChildren}\n <Icon\n aria-hidden='true'\n name='updown'\n size='small'\n variant='primary'\n />\n </span>\n );\n }\n\n return nextProps || nextChildren !== child.props.children\n ? cloneElement(child, nextProps, nextChildren)\n : child;\n });\n\n/**\n * Sortable columns must provide data-type (text, number, or date) in the `th` element.\n */\n\nconst compare = (a: string, b: string, type: SortType, locale?: string | string[], dir = 1) => {\n if (type === 'text') {\n return a.localeCompare(b, locale, { sensitivity: 'base' }) * dir;\n }\n\n const left = type === 'date' ? Date.parse(a) : Number.parseFloat(a);\n const right = type === 'date' ? Date.parse(b) : Number.parseFloat(b);\n\n if (Number.isNaN(left) && Number.isNaN(right)) return 0;\n if (Number.isNaN(left)) return 1;\n if (Number.isNaN(right)) return -1;\n return (left - right) * dir;\n};\n\nexport const Table = ({ children, locale, ...props }: TableProps) => {\n const ref = useRef<HTMLTableElement | null>(null);\n const columnCount = getFirstRowCellCount(children);\n const normalizedChildren =\n columnCount && columnCount > 0 ? normalizeChildren(children, columnCount) : children;\n\n const setSortState = (\n thead: HTMLTableSectionElement,\n active: HTMLTableCellElement,\n dir: 'asc' | 'desc'\n ) => {\n const ths = thead.querySelectorAll<HTMLTableCellElement>('th[data-type]');\n\n ths.forEach((th) => {\n if (th === active) {\n th.dataset.dir = dir;\n th.setAttribute('aria-sort', dir === 'asc' ? 'ascending' : 'descending');\n } else {\n delete th.dataset.dir;\n th.setAttribute('aria-sort', 'none');\n }\n });\n };\n\n const onClick = useCallback(\n (e: React.MouseEvent<HTMLTableElement>) => {\n const table = ref.current;\n if (!table) return;\n\n const th = (e.target as HTMLElement | null)?.closest('th');\n if (!th) return;\n\n const thead = table.tHead;\n if (!thead || !thead.contains(th)) return;\n\n const col = th.cellIndex;\n if (col < 0) return;\n\n const tbody = table.tBodies?.[0];\n if (!tbody) return;\n\n const type = th.getAttribute('data-type') as SortType | null;\n if (!type) return;\n\n const direction = th.dataset.dir === 'asc' ? 'desc' : 'asc';\n setSortState(thead, th, direction);\n const dir = direction === 'asc' ? 1 : -1;\n\n const rows = Array.from(tbody.rows);\n\n rows.sort((a, b) => {\n const av = (a.cells[col]?.textContent ?? '').trim();\n const bv = (b.cells[col]?.textContent ?? '').trim();\n return compare(av, bv, type, locale, dir);\n });\n\n tbody.append(...rows);\n },\n [locale]\n );\n\n return (\n <table\n className={styles.table}\n onClick={onClick}\n ref={ref}\n {...props}\n >\n {normalizedChildren}\n </table>\n );\n};\n"],"names":["isTableElement","child","isValidElement","countCells","children","Children","toArray","reduce","count","type","props","getFirstRowCellCount","nestedCount","normalizeChildren","columnCount","map","nextChildren","undefined","nextProps","colSpan","jsxs","styles","sortable","jsx","Icon","cloneElement","compare","a","b","locale","dir","localeCompare","sensitivity","left","Date","parse","Number","parseFloat","right","isNaN","Table","ref","useRef","normalizedChildren","setSortState","thead","active","ths","querySelectorAll","forEach","th","dataset","setAttribute","onClick","useCallback","e","table","current","target","closest","tHead","contains","col","cellIndex","tbody","tBodies","getAttribute","direction","rows","Array","from","sort","av","cells","textContent","trim","bv","append"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -406,9 +406,6 @@ declare type SortItem = {
|
|
|
406
406
|
weight: number;
|
|
407
407
|
};
|
|
408
408
|
|
|
409
|
-
/**
|
|
410
|
-
* Sortable columns must provide data-type (number or text) in the `th` element.
|
|
411
|
-
*/
|
|
412
409
|
export declare const Table: ({ children, locale, ...props }: TableProps) => JSX.Element;
|
|
413
410
|
|
|
414
411
|
declare type TableProps = React.TableHTMLAttributes<HTMLTableElement> & {
|