@solibo/solibo-ui 0.5.12 → 0.5.13
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/index25.css +1 -1
- package/dist/components/_card/index.cjs +1 -1
- package/dist/components/_card/index.cjs.map +1 -1
- package/dist/components/_card/index.js +10 -10
- package/dist/components/_card/index.js.map +1 -1
- package/dist/components/_collapsible/index.cjs +1 -1
- package/dist/components/_collapsible/index.js +1 -1
- package/dist/components/_dropdown/index.cjs +1 -1
- package/dist/components/_dropdown/index.js +2 -2
- package/dist/components/_menu/index.cjs +1 -1
- package/dist/components/_menu/index.cjs.map +1 -1
- package/dist/components/_menu/index.js +25 -25
- package/dist/components/_menu/index.js.map +1 -1
- package/dist/components/_sortable/index.cjs +1 -1
- package/dist/components/_sortable/index.cjs.map +1 -1
- package/dist/components/_sortable/index.js +175 -50
- package/dist/components/_sortable/index.js.map +1 -1
- package/dist/components/checkbox/index.cjs +1 -1
- package/dist/components/checkbox/index.js +1 -1
- package/dist/components/icon/index.cjs +1 -1
- package/dist/components/icon/index.js +1 -1
- package/dist/components/input/index.cjs +1 -1
- package/dist/components/input/index.js +1 -1
- package/dist/components/nav/index.cjs +1 -1
- package/dist/components/nav/index.js +1 -1
- package/dist/components/select/index.cjs +1 -1
- package/dist/components/select/index.js +2 -2
- package/dist/{icons-w0wnkdpo.js → icons-D6XjzxSX.js} +24 -13
- package/dist/icons-D6XjzxSX.js.map +1 -0
- package/dist/icons-s-lGsxio.cjs +2 -0
- package/dist/icons-s-lGsxio.cjs.map +1 -0
- package/dist/{index-DvABhnD0.js → index-BMYV_5ZN.js} +2 -2
- package/dist/{index-DvABhnD0.js.map → index-BMYV_5ZN.js.map} +1 -1
- package/dist/{index-C9DOzjKO.cjs → index-FM_lJcIM.cjs} +2 -2
- package/dist/{index-C9DOzjKO.cjs.map → index-FM_lJcIM.cjs.map} +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +39 -31
- package/dist/index.js +56 -55
- package/dist/tokens.json +1 -1
- package/package.json +1 -1
- package/dist/icons-Ckl56kYF.cjs +0 -2
- package/dist/icons-Ckl56kYF.cjs.map +0 -1
- package/dist/icons-w0wnkdpo.js.map +0 -1
package/dist/assets/index25.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
ol{margin-block:var(--scale-8)!important}.
|
|
1
|
+
ol{margin-block:var(--scale-8)!important}._sortable_n5r0c_5>li{-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;margin-bottom:0;padding-block:var(--scale-8);position:relative}._sortable_n5r0c_5>li._dragging_n5r0c_15{cursor:grabbing;margin-block:var(--scale-8);opacity:var(--utils-tokens-opacity-minimal);padding:0}._sortable_n5r0c_5>li._dragging_n5r0c_15 :focus{outline:none}._sortable_n5r0c_5>li._dragging_n5r0c_15 :focus [data-component=card],._sortable_n5r0c_5>li._dragging_n5r0c_15 :focus [data-component=card]:after{cursor:grabbing}._sortable_n5r0c_5>li._dragging_n5r0c_15._dropping_n5r0c_30{opacity:var(--utils-tokens-opacity-minimal)}._sortable_n5r0c_5>li._dragging_n5r0c_15:first-of-type._dragging_n5r0c_15{margin-top:var(--utils-tokens-unit)}._sortable_n5r0c_5>li._dragging_n5r0c_15:last-of-type._dragging_n5r0c_15{padding-bottom:var(--scale-8)}._sortable_n5r0c_5._columns_n5r0c_44{-moz-column-gap:0;column-gap:0;margin-right:var(--utils-tokens-negative-unit)}._sortable_n5r0c_5._columns_n5r0c_44 li{padding-right:var(--utils-tokens-unit)}._sortable_n5r0c_5 ._pseudo_n5r0c_53:before,._sortable_n5r0c_5 ._pseudo_n5r0c_53:after{background:var(--colors-semantic-primary-primary-subtle);border-radius:var(--shape-border-radius-radius-lg);border:0 dotted var(--colors-semantic-primary-primary-subtle-border);content:"";display:block;height:0;margin-block:0;opacity:0;pointer-events:none;transition:all var(--utils-tokens-transition-duration) var(--utils-tokens-transition-timing-function)}._sortable_n5r0c_5 ._target-above_n5r0c_68:before,._sortable_n5r0c_5 ._target-below_n5r0c_69:after{border-width:var(--scale-1);height:var(--height);opacity:1;width:var(--width)}._sortable_n5r0c_5 ._target-above_n5r0c_68:before{margin-bottom:var(--utils-tokens-unit)}._sortable_n5r0c_5 ._target-below_n5r0c_69:after{margin-top:var(--utils-tokens-unit)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index16.css');const e=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),p=require("../badge/index.cjs"),g=require("../checkbox/index.cjs"),u=require("../figure/index.cjs"),x=require("../icon/index.cjs"),j="_card_1sfar_1",q="_head_1sfar_27",y="_center_1sfar_40",h="_content_1sfar_52",N="_margin_1sfar_58",b="_clickable_1sfar_94",T="_selected_1sfar_131",t={card:j,head:q,center:y,content:h,margin:N,clickable:b,"image-top":"_image-top_1sfar_109","image-left":"_image-left_1sfar_120",selected:T},k=({actions:f,badge:d,checkbox:s,children:_,header:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index16.css');const e=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),p=require("../badge/index.cjs"),g=require("../checkbox/index.cjs"),u=require("../figure/index.cjs"),x=require("../icon/index.cjs"),j="_card_1sfar_1",q="_head_1sfar_27",y="_center_1sfar_40",h="_content_1sfar_52",N="_margin_1sfar_58",b="_clickable_1sfar_94",T="_selected_1sfar_131",t={card:j,head:q,center:y,content:h,margin:N,clickable:b,"image-top":"_image-top_1sfar_109","image-left":"_image-left_1sfar_120",selected:T},k=({actions:f,badge:d,checkbox:s,children:_,header:m,icon:o,image:c,imagePosition:a="top",onClick:i,variant:r="default"})=>e.jsxs("article",{className:l.t(t.card,i&&t.clickable,(s==null?void 0:s.checked)&&t.selected),"data-minimal":r==="minimal",onClick:i,onKeyDown:n=>{i&&n.currentTarget===document.activeElement&&(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),n.currentTarget.click())},tabIndex:i?0:-1,"data-component":"card",children:[c&&r!=="minimal"&&a==="top"&&e.jsx(u.Figure,{className:t[`image-${a}`],children:c}),e.jsxs("section",{children:[e.jsxs("div",{className:l.t(t.head,r==="minimal"&&t.center),children:[s&&e.jsx("span",{onClick:n=>n.stopPropagation(),children:e.jsx(g.Checkbox,{...s})}),c&&r!=="minimal"&&a==="left"&&e.jsx(u.Figure,{className:t[`image-${a}`],children:c}),m,d&&e.jsx(p.Badge,{...d}),o&&e.jsx(x.Icon,{name:o,size:"medium"}),f]}),_&&r!=="minimal"&&e.jsx("div",{className:l.t(t.content,!!m&&t.margin),children:_})]})]});exports.Card=k;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/_card/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Badge, BadgeProps } from '@/components/badge';\nimport { Checkbox, CheckboxProps } from '@/components/checkbox';\nimport { Figure } from '@/components/figure';\nimport { Icon } from '@/components/icon';\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/_card/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Badge, BadgeProps } from '@/components/badge';\nimport { Checkbox, CheckboxProps } from '@/components/checkbox';\nimport { Figure } from '@/components/figure';\nimport { Icon } from '@/components/icon';\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\nexport type CardProps = {\n actions?: React.ReactNode;\n badge?: BadgeProps;\n checkbox?: CheckboxProps;\n children?: React.ReactNode;\n header?: React.ReactNode;\n icon?: IconName;\n image?: React.ReactNode;\n imagePosition?: 'top' | 'left';\n onClick?: React.MouseEventHandler<HTMLElement>;\n variant?: 'default' | 'minimal';\n};\n\nexport const Card = ({\n actions,\n badge,\n checkbox,\n children,\n header,\n icon,\n image,\n imagePosition = 'top',\n onClick,\n variant = 'default',\n}: CardProps) => {\n return (\n <article\n className={cx(styles.card, onClick && styles.clickable, checkbox?.checked && styles.selected)}\n data-minimal={variant === 'minimal'}\n onClick={onClick}\n onKeyDown={(e) => {\n if (!onClick) return;\n\n if (e.currentTarget !== document.activeElement) {\n return;\n }\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.currentTarget.click();\n }\n }}\n tabIndex={onClick ? 0 : -1}\n >\n {image && variant !== 'minimal' && imagePosition === 'top' && (\n <Figure className={styles[`image-${imagePosition}`]}>{image}</Figure>\n )}\n <section>\n <div className={cx(styles.head, variant === 'minimal' && styles.center)}>\n {checkbox && (\n <span onClick={(e) => e.stopPropagation()}>\n <Checkbox {...checkbox} />\n </span>\n )}\n {image && variant !== 'minimal' && imagePosition === 'left' && (\n <Figure className={styles[`image-${imagePosition}`]}>{image}</Figure>\n )}\n {header}\n {badge && <Badge {...badge} />}\n {icon && (\n <Icon\n name={icon}\n size='medium'\n />\n )}\n {actions}\n </div>\n {children && variant !== 'minimal' && (\n <div className={cx(styles.content, !!header && styles.margin)}>{children}</div>\n )}\n </section>\n </article>\n );\n};\n"],"names":["Card","actions","badge","checkbox","children","header","icon","image","imagePosition","onClick","variant","cx","styles","card","clickable","checked","selected","e","currentTarget","document","activeElement","key","preventDefault","click","jsx","Figure","jsxs","head","center","stopPropagation","Checkbox","Badge","Icon","content","margin"],"mappings":"kkBAuBaA,EAAOA,CAAC,CACnBC,QAAAA,EACAC,MAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,cAAAA,EAAgB,MAChBC,QAAAA,EACAC,QAAAA,EAAU,SACD,WAEN,UAAA,CACC,UAAWC,EAAAA,EAAGC,EAAOC,KAAMJ,GAAWG,EAAOE,WAAWX,GAAAA,YAAAA,EAAUY,UAAWH,EAAOI,QAAQ,EAC5F,eAAcN,IAAY,UAC1B,QAAAD,EACA,UAAYQ,GAAM,CACXR,GAEDQ,EAAEC,gBAAkBC,SAASC,gBAI7BH,EAAEI,MAAQ,SAAWJ,EAAEI,MAAQ,OACjCJ,EAAEK,eAAAA,EACFL,EAAEC,cAAcK,MAAAA,EAEpB,EACA,SAAUd,EAAU,EAAI,GAAG,iBAAA,OAE1BF,SAAAA,CAAAA,GAASG,IAAY,WAAaF,IAAkB,OACnDgB,EAAAA,IAACC,SAAA,CAAO,UAAWb,EAAO,SAASJ,CAAa,EAAE,EAAID,SAAAA,EAAM,SAE7D,UAAA,CACC,SAAA,CAAAmB,EAAAA,KAAC,MAAA,CAAI,UAAWf,EAAAA,EAAGC,EAAOe,KAAMjB,IAAY,WAAaE,EAAOgB,MAAM,EACnEzB,SAAAA,CAAAA,GACCqB,EAAAA,IAAC,OAAA,CAAK,QAAUP,GAAMA,EAAEY,gBAAAA,EACtB,SAAAL,EAAAA,IAACM,EAAAA,SAAA,CAAS,GAAI3B,CAAAA,CAAS,EACzB,EAEDI,GAASG,IAAY,WAAaF,IAAkB,QACnDgB,EAAAA,IAACC,SAAA,CAAO,UAAWb,EAAO,SAASJ,CAAa,EAAE,EAAID,SAAAA,EAAM,EAE7DF,EACAH,GAASsB,EAAAA,IAACO,EAAAA,MAAA,CAAM,GAAI7B,CAAAA,CAAM,EAC1BI,GACCkB,EAAAA,IAACQ,OAAA,CACC,KAAM1B,EACN,KAAK,SAAQ,EAGhBL,CAAAA,EACH,EACCG,GAAYM,IAAY,WACvBc,EAAAA,IAAC,OAAI,UAAWb,EAAAA,EAAGC,EAAOqB,QAAS,CAAC,CAAC5B,GAAUO,EAAOsB,MAAM,EAAI9B,SAAAA,CAAAA,CAAS,CAAA,CAAA,CAE7E,CAAA,EACF"}
|
|
@@ -14,34 +14,34 @@ import '../../assets/index16.css';const y = "_card_1sfar_1", j = "_head_1sfar_27
|
|
|
14
14
|
"image-top": "_image-top_1sfar_109",
|
|
15
15
|
"image-left": "_image-left_1sfar_120",
|
|
16
16
|
selected: $
|
|
17
|
-
},
|
|
17
|
+
}, q = ({
|
|
18
18
|
actions: u,
|
|
19
19
|
badge: d,
|
|
20
20
|
checkbox: a,
|
|
21
21
|
children: _,
|
|
22
22
|
header: o,
|
|
23
23
|
icon: f,
|
|
24
|
-
image:
|
|
25
|
-
imagePosition:
|
|
24
|
+
image: c,
|
|
25
|
+
imagePosition: m = "top",
|
|
26
26
|
onClick: s,
|
|
27
|
-
variant:
|
|
28
|
-
}) => /* @__PURE__ */ l("article", { className: i(e.card, s && e.clickable, (a == null ? void 0 : a.checked) && e.selected), "data-minimal":
|
|
27
|
+
variant: n = "default"
|
|
28
|
+
}) => /* @__PURE__ */ l("article", { className: i(e.card, s && e.clickable, (a == null ? void 0 : a.checked) && e.selected), "data-minimal": n === "minimal", onClick: s, onKeyDown: (t) => {
|
|
29
29
|
s && t.currentTarget === document.activeElement && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.currentTarget.click());
|
|
30
30
|
}, tabIndex: s ? 0 : -1, "data-component": "card", children: [
|
|
31
|
-
|
|
31
|
+
c && n !== "minimal" && m === "top" && /* @__PURE__ */ r(p, { className: e[`image-${m}`], children: c }),
|
|
32
32
|
/* @__PURE__ */ l("section", { children: [
|
|
33
|
-
/* @__PURE__ */ l("div", { className: i(e.head,
|
|
33
|
+
/* @__PURE__ */ l("div", { className: i(e.head, n === "minimal" && e.center), children: [
|
|
34
34
|
a && /* @__PURE__ */ r("span", { onClick: (t) => t.stopPropagation(), children: /* @__PURE__ */ r(N, { ...a }) }),
|
|
35
|
-
|
|
35
|
+
c && n !== "minimal" && m === "left" && /* @__PURE__ */ r(p, { className: e[`image-${m}`], children: c }),
|
|
36
36
|
o,
|
|
37
37
|
d && /* @__PURE__ */ r(g, { ...d }),
|
|
38
38
|
f && /* @__PURE__ */ r(h, { name: f, size: "medium" }),
|
|
39
39
|
u
|
|
40
40
|
] }),
|
|
41
|
-
_ && /* @__PURE__ */ r("div", { className: i(e.content, !!o && e.margin), children: _ })
|
|
41
|
+
_ && n !== "minimal" && /* @__PURE__ */ r("div", { className: i(e.content, !!o && e.margin), children: _ })
|
|
42
42
|
] })
|
|
43
43
|
] });
|
|
44
44
|
export {
|
|
45
|
-
|
|
45
|
+
q as Card
|
|
46
46
|
};
|
|
47
47
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/_card/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Badge, BadgeProps } from '@/components/badge';\nimport { Checkbox, CheckboxProps } from '@/components/checkbox';\nimport { Figure } from '@/components/figure';\nimport { Icon } from '@/components/icon';\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/_card/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { Badge, BadgeProps } from '@/components/badge';\nimport { Checkbox, CheckboxProps } from '@/components/checkbox';\nimport { Figure } from '@/components/figure';\nimport { Icon } from '@/components/icon';\nimport { IconName } from '@/components/icon/icons.ts';\n\nimport styles from './styles.module.css';\n\nexport type CardProps = {\n actions?: React.ReactNode;\n badge?: BadgeProps;\n checkbox?: CheckboxProps;\n children?: React.ReactNode;\n header?: React.ReactNode;\n icon?: IconName;\n image?: React.ReactNode;\n imagePosition?: 'top' | 'left';\n onClick?: React.MouseEventHandler<HTMLElement>;\n variant?: 'default' | 'minimal';\n};\n\nexport const Card = ({\n actions,\n badge,\n checkbox,\n children,\n header,\n icon,\n image,\n imagePosition = 'top',\n onClick,\n variant = 'default',\n}: CardProps) => {\n return (\n <article\n className={cx(styles.card, onClick && styles.clickable, checkbox?.checked && styles.selected)}\n data-minimal={variant === 'minimal'}\n onClick={onClick}\n onKeyDown={(e) => {\n if (!onClick) return;\n\n if (e.currentTarget !== document.activeElement) {\n return;\n }\n\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.currentTarget.click();\n }\n }}\n tabIndex={onClick ? 0 : -1}\n >\n {image && variant !== 'minimal' && imagePosition === 'top' && (\n <Figure className={styles[`image-${imagePosition}`]}>{image}</Figure>\n )}\n <section>\n <div className={cx(styles.head, variant === 'minimal' && styles.center)}>\n {checkbox && (\n <span onClick={(e) => e.stopPropagation()}>\n <Checkbox {...checkbox} />\n </span>\n )}\n {image && variant !== 'minimal' && imagePosition === 'left' && (\n <Figure className={styles[`image-${imagePosition}`]}>{image}</Figure>\n )}\n {header}\n {badge && <Badge {...badge} />}\n {icon && (\n <Icon\n name={icon}\n size='medium'\n />\n )}\n {actions}\n </div>\n {children && variant !== 'minimal' && (\n <div className={cx(styles.content, !!header && styles.margin)}>{children}</div>\n )}\n </section>\n </article>\n );\n};\n"],"names":["Card","actions","badge","checkbox","children","header","icon","image","imagePosition","onClick","variant","cx","styles","card","clickable","checked","selected","e","currentTarget","document","activeElement","key","preventDefault","click","jsx","Figure","jsxs","head","center","stopPropagation","Checkbox","Badge","Icon","content","margin"],"mappings":";;;;;;;;;;;;;;;;GAuBaA,IAAOA,CAAC;AAAA,EACnBC,SAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,eAAAA,IAAgB;AAAA,EAChBC,SAAAA;AAAAA,EACAC,SAAAA,IAAU;AACD,wBAEN,WAAA,EACC,WAAWC,EAAGC,EAAOC,MAAMJ,KAAWG,EAAOE,YAAWX,KAAAA,gBAAAA,EAAUY,YAAWH,EAAOI,QAAQ,GAC5F,gBAAcN,MAAY,WAC1B,SAAAD,GACA,WAAYQ,CAAAA,MAAM;AAChB,EAAKR,KAEDQ,EAAEC,kBAAkBC,SAASC,kBAI7BH,EAAEI,QAAQ,WAAWJ,EAAEI,QAAQ,SACjCJ,EAAEK,eAAAA,GACFL,EAAEC,cAAcK,MAAAA;AAEpB,GACA,UAAUd,IAAU,IAAI,IAAG,kBAAA,QAE1BF,UAAAA;AAAAA,EAAAA,KAASG,MAAY,aAAaF,MAAkB,SACnD,gBAAAgB,EAACC,GAAA,EAAO,WAAWb,EAAO,SAASJ,CAAa,EAAE,GAAID,UAAAA,GAAM;AAAA,oBAE7D,WAAA,EACC,UAAA;AAAA,IAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAWf,EAAGC,EAAOe,MAAMjB,MAAY,aAAaE,EAAOgB,MAAM,GACnEzB,UAAAA;AAAAA,MAAAA,KACC,gBAAAqB,EAAC,QAAA,EAAK,SAAUP,CAAAA,MAAMA,EAAEY,gBAAAA,GACtB,UAAA,gBAAAL,EAACM,GAAA,EAAS,GAAI3B,EAAAA,CAAS,GACzB;AAAA,MAEDI,KAASG,MAAY,aAAaF,MAAkB,UACnD,gBAAAgB,EAACC,GAAA,EAAO,WAAWb,EAAO,SAASJ,CAAa,EAAE,GAAID,UAAAA,GAAM;AAAA,MAE7DF;AAAAA,MACAH,KAAS,gBAAAsB,EAACO,GAAA,EAAM,GAAI7B,EAAAA,CAAM;AAAA,MAC1BI,KACC,gBAAAkB,EAACQ,GAAA,EACC,MAAM1B,GACN,MAAK,UAAQ;AAAA,MAGhBL;AAAAA,IAAAA,GACH;AAAA,IACCG,KAAYM,MAAY,aACvB,gBAAAc,EAAC,SAAI,WAAWb,EAAGC,EAAOqB,SAAS,CAAC,CAAC5B,KAAUO,EAAOsB,MAAM,GAAI9B,UAAAA,EAAAA,CAAS;AAAA,EAAA,EAAA,CAE7E;AAAA,GACF;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index17.css');const r=require("react/jsx-runtime"),s=require("../../icons-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index17.css');const r=require("react/jsx-runtime"),s=require("../../icons-s-lGsxio.cjs"),n=require("../../utils-DBzf7CFq.cjs"),i="_collapsible_7flaz_1",a={collapsible:i},p=({children:c,disabled:o,label:e})=>{const l=n.resolveColor("--color-primary"),t=o?void 0:{"--icon-svg":s.iconSVG("chevron").replace("currentColor",l),"--icon-svg-open":s.iconSVG("chevron").replace("%3Cpath","%3Cpath transform='rotate(180 12 12)'").replace("currentColor",l)};return r.jsxs("details",{className:a.collapsible,open:o||void 0,"data-component":"collapsible",children:[r.jsx("summary",{style:t,children:e&&e}),c]})};exports.Collapsible=p;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as t, jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import { i as e } from "../../icons-
|
|
2
|
+
import { i as e } from "../../icons-D6XjzxSX.js";
|
|
3
3
|
import { r as n } from "../../utils--n2yqjCy.js";
|
|
4
4
|
import '../../assets/index17.css';const i = "_collapsible_7flaz_1", p = {
|
|
5
5
|
collapsible: i
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index19.css');const i=require("react/jsx-runtime"),E=require("../../classix-5H4IWnMA.cjs"),o=require("react"),W=require("../button/index.cjs"),U=require("../../icons-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index19.css');const i=require("react/jsx-runtime"),E=require("../../classix-5H4IWnMA.cjs"),o=require("react"),W=require("../button/index.cjs"),U=require("../../icons-s-lGsxio.cjs"),X=require("../input/index.cjs"),Y=require("../../styles.module-CitJm17A.cjs"),Z=require("../list/index.cjs"),k=require("../../index-FM_lJcIM.cjs"),M=require("../../utils-DBzf7CFq.cjs"),ee="_dropdown_1dsxx_1",te="_empty_1dsxx_4",ne="_group_1dsxx_5",re="_placeholder_1dsxx_6",se="_filter_1dsxx_14",oe="_native_1dsxx_25",le="_option_1dsxx_35",ie="_options_1dsxx_57",ce="_panel_1dsxx_81",ae="_selected_1dsxx_104",ue="_text_1dsxx_108",de="_trigger_1dsxx_117",pe="_minimal_1dsxx_133",c={dropdown:ee,empty:te,group:ne,placeholder:re,filter:se,native:oe,option:le,options:ie,panel:ce,selected:ae,text:ue,trigger:de,minimal:pe};function Q(e,r){return{"--icon-svg":U.iconSVG(e).replace("currentColor",r)}}function N(e){return typeof e=="string"||typeof e=="number"?String(e):Array.isArray(e)?e.map(N).join(" "):o.isValidElement(e)?N(e.props.children):""}function fe(e){return o.isValidElement(e)&&e.type==="option"}function me(e){return o.isValidElement(e)&&e.type==="optgroup"}function xe(e){return o.isValidElement(e)&&e.type===o.Fragment}function he(e){return o.isValidElement(e)&&e.type===k.Select}function V(e,r,s=!1){const l=[];return o.Children.forEach(e,t=>{if(xe(t)){l.push(...V(t.props.children,r,s));return}if(fe(t)){const d=N(t.props.children).trim(),p=t.props.value!=null?String(t.props.value):d;l.push({disabled:s||!!t.props.disabled,groupLabel:r,hidden:!!t.props.hidden,isPlaceholder:!!(t.props.hidden&&p===""),label:t.props.children,selected:!!t.props.selected,text:d,value:p});return}me(t)&&l.push(...V(t.props.children,t.props.label,s||!!t.props.disabled))}),l}function _e(e){const r=e.trim();if(!r)return null;const l=[.../[*?]/.test(r)?r:`*${r}*`].map(t=>t==="*"?".*":t==="?"?".":t.replace(/[|\\{}()[\]^$+.,]/g,"\\$&")).join("");return new RegExp(`^${l}$`,"i")}function ge(e,r){const s=_e(r),l=e.filter(t=>!t.hidden&&!t.isPlaceholder);return s?l.filter(t=>s.test([t.groupLabel,t.text,t.value].filter(Boolean).join(" "))):l}function ve(e,r){return e.find(s=>s.value===r)??e.find(s=>s.isPlaceholder)??e[0]}function ye(e,r,s){var t;if(r!=null)return String(r);if(s!=null)return String(s);const l=e.find(d=>d.selected);return l?l.value:((t=e[0])==null?void 0:t.value)??""}function be(e){if(he(e)){const{children:r,placeholder:s,...l}=e.props;return{children:i.jsxs(i.Fragment,{children:[s&&i.jsx("option",{hidden:!0,value:"",children:s}),r]}),props:l}}return{children:e.props.children,props:e.props}}const we=({children:e,className:r,emptyLabel:s="No matches found",searchPlaceholder:l="Filter",variant:t="default",...d})=>{const p=be(e),{defaultValue:z,onChange:_,value:g,...T}=p.props,q=k.sanitizeSelectProps(T),C=o.useRef(null),R=o.useRef(null),O=o.useRef(null),P=o.useRef(null),x=V(p.children),h=g!=null,v=ye(x,g,z),[y,b]=o.useState(()=>v),[u,w]=o.useState(!1),[B,$]=o.useState(""),S=h?String(g):y,I={default:M.resolveColor("--colors-semantic-content-secondary"),white:M.resolveColor("--color-white","white")},L=t==="minimal"?I.white:I.default,f=ve(x,S),A=Q("chevron",L),G=Q("search",L),D=ge(x,B);o.useEffect(()=>{!h&&!x.some(n=>n.value===y)&&b(v)},[v,y,h,x]),o.useEffect(()=>{var n;if(!u){$("");return}(n=P.current)==null||n.focus()},[u]),o.useEffect(()=>{if(!u)return;const n=a=>{var m;(m=R.current)!=null&&m.contains(a.target)||w(!1)};return document.addEventListener("mousedown",n),()=>{document.removeEventListener("mousedown",n)}},[u]);const K=n=>{h||b(n.target.value),_==null||_(n)},j=()=>{var n;w(!1),(n=C.current)==null||n.focus()},H=n=>{var F;h||b(n);const a=O.current;if(!a){j();return}const m=(F=Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype,"value"))==null?void 0:F.set;m==null||m.call(a,n),a.dispatchEvent(new Event("change",{bubbles:!0})),j()},J=n=>{n.key==="Escape"&&j()};return i.jsxs("div",{className:E.t(c.dropdown,t==="minimal"&&c.minimal,r),onKeyDown:J,ref:R,...d,"data-component":"dropdown",children:[i.jsx("select",{...q,"aria-hidden":"true",className:c.native,onChange:K,ref:O,tabIndex:-1,value:S,children:p.children}),i.jsx(W.Button,{"aria-expanded":u,"aria-haspopup":"dialog",className:E.t(t==="default"&&Y.inputStyles.input,c.trigger,(f==null?void 0:f.isPlaceholder)&&c.placeholder),"data-open":u?"true":void 0,disabled:q.disabled,onClick:()=>w(n=>!n),ref:C,style:A,variant:"minimal",children:i.jsx("span",{className:c.text,children:(f==null?void 0:f.label)??"Select an option"})}),u&&i.jsxs("div",{className:c.panel,children:[i.jsx(X.Input,{"aria-label":"Filter",className:c.filter,icon:"search",onChange:n=>$(n.target.value),placeholder:l,ref:P,style:G,type:"search",value:B}),i.jsx(Z.List,{"aria-label":"Dropdown",className:c.options,children:D.length>0?D.map(n=>{const a=n.value===S;return i.jsx("li",{"data-component":"dropdown",children:i.jsxs(W.Button,{"aria-label":a?`${n.text}, selected`:n.text,className:E.t(c.option,a&&c.selected),disabled:n.disabled,onClick:()=>H(n.value),variant:"minimal",children:[i.jsx("span",{className:c.text,children:n.label}),n.groupLabel&&i.jsx("small",{className:c.group,children:n.groupLabel})]})},`${n.groupLabel??"root"}-${n.value}`)}):i.jsx("li",{className:c.empty,children:s})})]})]})};exports.Dropdown=we;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -2,11 +2,11 @@ import { jsxs as _, jsx as i, Fragment as Z } from "react/jsx-runtime";
|
|
|
2
2
|
import { t as V } from "../../classix-DG18itHa.js";
|
|
3
3
|
import ee, { useRef as g, useState as O, useEffect as P, Children as te, isValidElement as x } from "react";
|
|
4
4
|
import { Button as A } from "../button/index.js";
|
|
5
|
-
import { i as ne } from "../../icons-
|
|
5
|
+
import { i as ne } from "../../icons-D6XjzxSX.js";
|
|
6
6
|
import { Input as re } from "../input/index.js";
|
|
7
7
|
import { i as oe } from "../../styles.module-Ioe0wPWW.js";
|
|
8
8
|
import { List as se } from "../list/index.js";
|
|
9
|
-
import { s as le, S as ie } from "../../index-
|
|
9
|
+
import { s as le, S as ie } from "../../index-BMYV_5ZN.js";
|
|
10
10
|
import { r as G } from "../../utils--n2yqjCy.js";
|
|
11
11
|
import '../../assets/index19.css';const ae = "_dropdown_1dsxx_1", ce = "_empty_1dsxx_4", pe = "_group_1dsxx_5", ue = "_placeholder_1dsxx_6", de = "_filter_1dsxx_14", fe = "_native_1dsxx_25", me = "_option_1dsxx_35", he = "_options_1dsxx_57", xe = "_panel_1dsxx_81", ge = "_selected_1dsxx_104", _e = "_text_1dsxx_108", ve = "_trigger_1dsxx_117", ye = "_minimal_1dsxx_133", l = {
|
|
12
12
|
dropdown: ae,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index22.css');const s=require("react/jsx-runtime"),_=require("../../classix-5H4IWnMA.cjs"),d=require("react"),b=require("../button/index.cjs"),p=require("../icon/index.cjs"),h=require("../list/index.cjs"),y=require("../popover/index.cjs"),j="_list_1rny2_1",D="_item_1rny2_13",q="_danger_1rny2_41",f={list:j,item:D,danger:q};function k(o){return o.filter(t=>!!(t&&!t.disabled))}const w=({close:o,initialFocus:t,items:i,menuAccessibleLabel:u,onItemSelect:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index22.css');const s=require("react/jsx-runtime"),_=require("../../classix-5H4IWnMA.cjs"),d=require("react"),b=require("../button/index.cjs"),p=require("../icon/index.cjs"),h=require("../list/index.cjs"),y=require("../popover/index.cjs"),j="_list_1rny2_1",D="_item_1rny2_13",q="_danger_1rny2_41",f={list:j,item:D,danger:q};function k(o){return o.filter(t=>!!(t&&!t.disabled))}const w=({close:o,initialFocus:t,items:i,menuAccessibleLabel:u,onItemSelect:l})=>{const a=d.useRef([]),r=d.useCallback(e=>{const n=k(a.current);if(n.length===0)return;if(e==="first"){n[0].focus();return}if(e==="last"){n[n.length-1].focus();return}const c=n.indexOf(document.activeElement),x=e==="next"?(c+1)%n.length:(c-1+n.length)%n.length;n[x].focus()},[]);d.useEffect(()=>{r(t??"first")},[r,t]);const g=e=>{if(e.key==="ArrowDown"){e.preventDefault(),r("next");return}if(e.key==="ArrowUp"){e.preventDefault(),r("previous");return}if(e.key==="Home"){e.preventDefault(),r("first");return}e.key==="End"&&(e.preventDefault(),r("last"))},m=e=>{var n;(n=e.onSelect)==null||n.call(e),l==null||l(e),o()};return s.jsx(h.List,{"aria-label":u,className:f.list,onKeyDown:g,role:"menu","data-component":"menupanel",children:i.map((e,n)=>s.jsx("li",{role:"none",children:s.jsxs(b.Button,{"aria-label":e.accessibleLabel,className:_.t(f.item,e.isDanger&&f.danger),disabled:e.disabled,onClick:()=>m(e),ref:c=>{a.current[n]=c},role:"menuitem",variant:"minimal",children:[e.icon&&s.jsx(p.Icon,{fill:!0,gap:"right",name:e.icon,size:"small",variant:e.isDanger?"danger":"default"}),s.jsx("span",{children:e.label})]})},e.id??n))})},M=({items:o,menuAccessibleLabel:t="Menu",onItemSelect:i,position:u="left",triggerAccessibleLabel:l="Open menu"})=>s.jsx(y.Popover,{position:u,triggerAccessibleLabel:l,triggerAriaHasPopup:"menu",triggerButtonContent:s.jsx(p.Icon,{name:"dots",size:"medium"}),"data-component":"menu",children:({close:a,initialFocus:r})=>s.jsx(w,{close:a,initialFocus:r,items:o,menuAccessibleLabel:t,onItemSelect:i})});exports.Menu=M;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/_menu/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\nimport { List } from '@/components/list';\nimport { Popover, type PopoverInitialFocus, type PopoverRenderProps } from '@/components/popover';\n\nimport styles from './styles.module.css';\n\nexport type MenuItem = {\n accessibleLabel?: string;\n disabled?: boolean;\n icon?: IconName;\n id?: string;\n isDanger?: boolean;\n label: React.ReactNode;\n onSelect?: () => void;\n};\n\nexport type MenuProps = {\n items: MenuItem[];\n menuAccessibleLabel?: string;\n onItemSelect?: (item: MenuItem) => void;\n position?: 'left' | 'right';\n triggerAccessibleLabel?: string;\n};\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuPanelProps = Pick<MenuProps, 'items' | 'menuAccessibleLabel' | 'onItemSelect'> & {\n close: PopoverRenderProps['close'];\n initialFocus?: PopoverInitialFocus;\n};\n\nfunction getFocusableItems(items: Array<HTMLButtonElement | null>) {\n return items.filter((item): item is HTMLButtonElement => Boolean(item && !item.disabled));\n}\n\nconst MenuPanel = ({\n close,\n initialFocus,\n items,\n menuAccessibleLabel,\n onItemSelect,\n}: MenuPanelProps) => {\n const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n const focusItem = useCallback((target: MenuFocusTarget) => {\n const focusableItems = getFocusableItems(itemRefs.current);\n\n if (focusableItems.length === 0) {\n return;\n }\n\n if (target === 'first') {\n focusableItems[0].focus();\n return;\n }\n\n if (target === 'last') {\n focusableItems[focusableItems.length - 1].focus();\n return;\n }\n\n const currentIndex = focusableItems.indexOf(document.activeElement as HTMLButtonElement);\n const nextIndex =\n target === 'next'\n ? (currentIndex + 1) % focusableItems.length\n : (currentIndex - 1 + focusableItems.length) % focusableItems.length;\n\n focusableItems[nextIndex].focus();\n }, []);\n\n useEffect(() => {\n focusItem(initialFocus ?? 'first');\n }, [focusItem, initialFocus]);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n focusItem('next');\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n focusItem('previous');\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n focusItem('first');\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n focusItem('last');\n }\n };\n\n const handleItemSelect = (item: MenuItem) => {\n item.onSelect?.();\n onItemSelect?.(item);\n close();\n };\n\n return (\n <List\n aria-label={menuAccessibleLabel}\n className={styles.list}\n onKeyDown={handleKeyDown}\n role='menu'\n >\n {items.map((item, index) => (\n <li\n key={item.id ?? index}\n role='none'\n >\n <Button\n aria-label={item.accessibleLabel}\n className={cx(styles.item, item.isDanger && styles.danger)}\n disabled={item.disabled}\n onClick={() => handleItemSelect(item)}\n ref={(node) => {\n itemRefs.current[index] = node;\n }}\n role='menuitem'\n variant='minimal'\n >\n {item.icon && (\n <Icon\n gap='right'\n name={item.icon}\n size='small'\n variant={item.isDanger ? 'danger' : 'default'}\n />\n )}\n <span>{item.label}</span>\n </Button>\n </li>\n ))}\n </List>\n );\n};\n\nexport const Menu = ({\n items,\n menuAccessibleLabel = 'Menu',\n onItemSelect,\n position = 'left',\n triggerAccessibleLabel = 'Open menu',\n}: MenuProps) => {\n return (\n <Popover\n position={position}\n triggerAccessibleLabel={triggerAccessibleLabel}\n triggerAriaHasPopup='menu'\n triggerButtonContent={\n <Icon\n name='dots'\n size='medium'\n />\n }\n >\n {({ close, initialFocus }) => (\n <MenuPanel\n close={close}\n initialFocus={initialFocus}\n items={items}\n menuAccessibleLabel={menuAccessibleLabel}\n onItemSelect={onItemSelect}\n />\n )}\n </Popover>\n );\n};\n"],"names":["getFocusableItems","items","filter","item","Boolean","disabled","MenuPanel","close","initialFocus","menuAccessibleLabel","onItemSelect","itemRefs","useRef","focusItem","useCallback","target","focusableItems","current","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","onSelect","jsx","List","styles","list","map","index","Button","accessibleLabel","cx","isDanger","danger","node","icon","Icon","label","id","Menu","position","triggerAccessibleLabel","Popover"],"mappings":"sYAoCA,SAASA,EAAkBC,EAAwC,CACjE,OAAOA,EAAMC,OAAQC,GAAoCC,GAAQD,GAAQ,CAACA,EAAKE,SAAS,CAC1F,CAEA,MAAMC,EAAYA,CAAC,CACjBC,MAAAA,EACAC,aAAAA,EACAP,MAAAA,EACAQ,oBAAAA,EACAC,aAAAA,CACc,IAAM,CACpB,MAAMC,EAAWC,EAAAA,OAAwC,EAAE,EAErDC,EAAYC,cAAaC,GAA4B,CACzD,MAAMC,EAAiBhB,EAAkBW,EAASM,OAAO,EAEzD,GAAID,EAAeE,SAAW,EAC5B,OAGF,GAAIH,IAAW,QAAS,CACtBC,EAAe,CAAC,EAAEG,MAAAA,EAClB,MACF,CAEA,GAAIJ,IAAW,OAAQ,CACrBC,EAAeA,EAAeE,OAAS,CAAC,EAAEC,MAAAA,EAC1C,MACF,CAEA,MAAMC,EAAeJ,EAAeK,QAAQC,SAASC,aAAkC,EACjFC,EACJT,IAAW,QACNK,EAAe,GAAKJ,EAAeE,QACnCE,EAAe,EAAIJ,EAAeE,QAAUF,EAAeE,OAElEF,EAAeQ,CAAS,EAAEL,MAAAA,CAC5B,EAAG,CAAA,CAAE,EAELM,EAAAA,UAAU,IAAM,CACdZ,EAAUL,GAAgB,OAAO,CACnC,EAAG,CAACK,EAAWL,CAAY,CAAC,EAE5B,MAAMkB,EAAiBC,GAAiD,CACtE,GAAIA,EAAMC,MAAQ,YAAa,CAC7BD,EAAME,eAAAA,EACNhB,EAAU,MAAM,EAChB,MACF,CAEA,GAAIc,EAAMC,MAAQ,UAAW,CAC3BD,EAAME,eAAAA,EACNhB,EAAU,UAAU,EACpB,MACF,CAEA,GAAIc,EAAMC,MAAQ,OAAQ,CACxBD,EAAME,eAAAA,EACNhB,EAAU,OAAO,EACjB,MACF,CAEIc,EAAMC,MAAQ,QAChBD,EAAME,eAAAA,EACNhB,EAAU,MAAM,EAEpB,EAEMiB,EAAoB3B,GAAmB,QAC3CA,EAAAA,EAAK4B,WAAL5B,MAAAA,EAAAA,KAAAA,GACAO,GAAAA,MAAAA,EAAeP,GACfI,EAAAA,CACF,EAEA,OACEyB,MAACC,EAAAA,MACC,aAAYxB,EACZ,UAAWyB,EAAOC,KAClB,UAAWT,EACX,KAAK,OAAM,iBAAA,YAEVzB,WAAMmC,IAAI,CAACjC,EAAMkC,IAChBL,EAAAA,IAAC,MAEC,KAAK,OAEL,gBAACM,EAAAA,OAAA,CACC,aAAYnC,EAAKoC,gBACjB,UAAWC,IAAGN,EAAO/B,KAAMA,EAAKsC,UAAYP,EAAOQ,MAAM,EACzD,SAAUvC,EAAKE,SACf,QAAS,IAAMyB,EAAiB3B,CAAI,EACpC,IAAMwC,GAAS,CACbhC,EAASM,QAAQoB,CAAK,EAAIM,CAC5B,EACA,KAAK,WACL,QAAQ,UAEPxC,SAAAA,CAAAA,EAAKyC,MACJZ,
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/_menu/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\nimport { List } from '@/components/list';\nimport { Popover, type PopoverInitialFocus, type PopoverRenderProps } from '@/components/popover';\n\nimport styles from './styles.module.css';\n\nexport type MenuItem = {\n accessibleLabel?: string;\n disabled?: boolean;\n icon?: IconName;\n id?: string;\n isDanger?: boolean;\n label: React.ReactNode;\n onSelect?: () => void;\n};\n\nexport type MenuProps = {\n items: MenuItem[];\n menuAccessibleLabel?: string;\n onItemSelect?: (item: MenuItem) => void;\n position?: 'left' | 'right';\n triggerAccessibleLabel?: string;\n};\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuPanelProps = Pick<MenuProps, 'items' | 'menuAccessibleLabel' | 'onItemSelect'> & {\n close: PopoverRenderProps['close'];\n initialFocus?: PopoverInitialFocus;\n};\n\nfunction getFocusableItems(items: Array<HTMLButtonElement | null>) {\n return items.filter((item): item is HTMLButtonElement => Boolean(item && !item.disabled));\n}\n\nconst MenuPanel = ({\n close,\n initialFocus,\n items,\n menuAccessibleLabel,\n onItemSelect,\n}: MenuPanelProps) => {\n const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n const focusItem = useCallback((target: MenuFocusTarget) => {\n const focusableItems = getFocusableItems(itemRefs.current);\n\n if (focusableItems.length === 0) {\n return;\n }\n\n if (target === 'first') {\n focusableItems[0].focus();\n return;\n }\n\n if (target === 'last') {\n focusableItems[focusableItems.length - 1].focus();\n return;\n }\n\n const currentIndex = focusableItems.indexOf(document.activeElement as HTMLButtonElement);\n const nextIndex =\n target === 'next'\n ? (currentIndex + 1) % focusableItems.length\n : (currentIndex - 1 + focusableItems.length) % focusableItems.length;\n\n focusableItems[nextIndex].focus();\n }, []);\n\n useEffect(() => {\n focusItem(initialFocus ?? 'first');\n }, [focusItem, initialFocus]);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n focusItem('next');\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n focusItem('previous');\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n focusItem('first');\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n focusItem('last');\n }\n };\n\n const handleItemSelect = (item: MenuItem) => {\n item.onSelect?.();\n onItemSelect?.(item);\n close();\n };\n\n return (\n <List\n aria-label={menuAccessibleLabel}\n className={styles.list}\n onKeyDown={handleKeyDown}\n role='menu'\n >\n {items.map((item, index) => (\n <li\n key={item.id ?? index}\n role='none'\n >\n <Button\n aria-label={item.accessibleLabel}\n className={cx(styles.item, item.isDanger && styles.danger)}\n disabled={item.disabled}\n onClick={() => handleItemSelect(item)}\n ref={(node) => {\n itemRefs.current[index] = node;\n }}\n role='menuitem'\n variant='minimal'\n >\n {item.icon && (\n <Icon\n fill\n gap='right'\n name={item.icon}\n size='small'\n variant={item.isDanger ? 'danger' : 'default'}\n />\n )}\n <span>{item.label}</span>\n </Button>\n </li>\n ))}\n </List>\n );\n};\n\nexport const Menu = ({\n items,\n menuAccessibleLabel = 'Menu',\n onItemSelect,\n position = 'left',\n triggerAccessibleLabel = 'Open menu',\n}: MenuProps) => {\n return (\n <Popover\n position={position}\n triggerAccessibleLabel={triggerAccessibleLabel}\n triggerAriaHasPopup='menu'\n triggerButtonContent={\n <Icon\n name='dots'\n size='medium'\n />\n }\n >\n {({ close, initialFocus }) => (\n <MenuPanel\n close={close}\n initialFocus={initialFocus}\n items={items}\n menuAccessibleLabel={menuAccessibleLabel}\n onItemSelect={onItemSelect}\n />\n )}\n </Popover>\n );\n};\n"],"names":["getFocusableItems","items","filter","item","Boolean","disabled","MenuPanel","close","initialFocus","menuAccessibleLabel","onItemSelect","itemRefs","useRef","focusItem","useCallback","target","focusableItems","current","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","onSelect","jsx","List","styles","list","map","index","Button","accessibleLabel","cx","isDanger","danger","node","icon","Icon","label","id","Menu","position","triggerAccessibleLabel","Popover"],"mappings":"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"}
|
|
@@ -20,48 +20,48 @@ const I = ({
|
|
|
20
20
|
menuAccessibleLabel: c,
|
|
21
21
|
onItemSelect: a
|
|
22
22
|
}) => {
|
|
23
|
-
const l = y([]), r = D((
|
|
24
|
-
const
|
|
25
|
-
if (
|
|
23
|
+
const l = y([]), r = D((e) => {
|
|
24
|
+
const n = E(l.current);
|
|
25
|
+
if (n.length === 0)
|
|
26
26
|
return;
|
|
27
|
-
if (
|
|
28
|
-
|
|
27
|
+
if (e === "first") {
|
|
28
|
+
n[0].focus();
|
|
29
29
|
return;
|
|
30
30
|
}
|
|
31
|
-
if (
|
|
32
|
-
|
|
31
|
+
if (e === "last") {
|
|
32
|
+
n[n.length - 1].focus();
|
|
33
33
|
return;
|
|
34
34
|
}
|
|
35
|
-
const i =
|
|
36
|
-
|
|
35
|
+
const i = n.indexOf(document.activeElement), g = e === "next" ? (i + 1) % n.length : (i - 1 + n.length) % n.length;
|
|
36
|
+
n[g].focus();
|
|
37
37
|
}, []);
|
|
38
38
|
_(() => {
|
|
39
39
|
r(t ?? "first");
|
|
40
40
|
}, [r, t]);
|
|
41
|
-
const m = (
|
|
42
|
-
if (
|
|
43
|
-
|
|
41
|
+
const m = (e) => {
|
|
42
|
+
if (e.key === "ArrowDown") {
|
|
43
|
+
e.preventDefault(), r("next");
|
|
44
44
|
return;
|
|
45
45
|
}
|
|
46
|
-
if (
|
|
47
|
-
|
|
46
|
+
if (e.key === "ArrowUp") {
|
|
47
|
+
e.preventDefault(), r("previous");
|
|
48
48
|
return;
|
|
49
49
|
}
|
|
50
|
-
if (
|
|
51
|
-
|
|
50
|
+
if (e.key === "Home") {
|
|
51
|
+
e.preventDefault(), r("first");
|
|
52
52
|
return;
|
|
53
53
|
}
|
|
54
|
-
|
|
55
|
-
}, p = (
|
|
56
|
-
var
|
|
57
|
-
(
|
|
54
|
+
e.key === "End" && (e.preventDefault(), r("last"));
|
|
55
|
+
}, p = (e) => {
|
|
56
|
+
var n;
|
|
57
|
+
(n = e.onSelect) == null || n.call(e), a == null || a(e), s();
|
|
58
58
|
};
|
|
59
|
-
return /* @__PURE__ */ o(k, { "aria-label": c, className: f.list, onKeyDown: m, role: "menu", "data-component": "menupanel", children: u.map((
|
|
60
|
-
l.current[
|
|
59
|
+
return /* @__PURE__ */ o(k, { "aria-label": c, className: f.list, onKeyDown: m, role: "menu", "data-component": "menupanel", children: u.map((e, n) => /* @__PURE__ */ o("li", { role: "none", children: /* @__PURE__ */ h(x, { "aria-label": e.accessibleLabel, className: b(f.item, e.isDanger && f.danger), disabled: e.disabled, onClick: () => p(e), ref: (i) => {
|
|
60
|
+
l.current[n] = i;
|
|
61
61
|
}, role: "menuitem", variant: "minimal", children: [
|
|
62
|
-
|
|
63
|
-
/* @__PURE__ */ o("span", { children:
|
|
64
|
-
] }) },
|
|
62
|
+
e.icon && /* @__PURE__ */ o(d, { fill: !0, gap: "right", name: e.icon, size: "small", variant: e.isDanger ? "danger" : "default" }),
|
|
63
|
+
/* @__PURE__ */ o("span", { children: e.label })
|
|
64
|
+
] }) }, e.id ?? n)) });
|
|
65
65
|
}, L = ({
|
|
66
66
|
items: s,
|
|
67
67
|
menuAccessibleLabel: t = "Menu",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/_menu/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\nimport { List } from '@/components/list';\nimport { Popover, type PopoverInitialFocus, type PopoverRenderProps } from '@/components/popover';\n\nimport styles from './styles.module.css';\n\nexport type MenuItem = {\n accessibleLabel?: string;\n disabled?: boolean;\n icon?: IconName;\n id?: string;\n isDanger?: boolean;\n label: React.ReactNode;\n onSelect?: () => void;\n};\n\nexport type MenuProps = {\n items: MenuItem[];\n menuAccessibleLabel?: string;\n onItemSelect?: (item: MenuItem) => void;\n position?: 'left' | 'right';\n triggerAccessibleLabel?: string;\n};\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuPanelProps = Pick<MenuProps, 'items' | 'menuAccessibleLabel' | 'onItemSelect'> & {\n close: PopoverRenderProps['close'];\n initialFocus?: PopoverInitialFocus;\n};\n\nfunction getFocusableItems(items: Array<HTMLButtonElement | null>) {\n return items.filter((item): item is HTMLButtonElement => Boolean(item && !item.disabled));\n}\n\nconst MenuPanel = ({\n close,\n initialFocus,\n items,\n menuAccessibleLabel,\n onItemSelect,\n}: MenuPanelProps) => {\n const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n const focusItem = useCallback((target: MenuFocusTarget) => {\n const focusableItems = getFocusableItems(itemRefs.current);\n\n if (focusableItems.length === 0) {\n return;\n }\n\n if (target === 'first') {\n focusableItems[0].focus();\n return;\n }\n\n if (target === 'last') {\n focusableItems[focusableItems.length - 1].focus();\n return;\n }\n\n const currentIndex = focusableItems.indexOf(document.activeElement as HTMLButtonElement);\n const nextIndex =\n target === 'next'\n ? (currentIndex + 1) % focusableItems.length\n : (currentIndex - 1 + focusableItems.length) % focusableItems.length;\n\n focusableItems[nextIndex].focus();\n }, []);\n\n useEffect(() => {\n focusItem(initialFocus ?? 'first');\n }, [focusItem, initialFocus]);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n focusItem('next');\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n focusItem('previous');\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n focusItem('first');\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n focusItem('last');\n }\n };\n\n const handleItemSelect = (item: MenuItem) => {\n item.onSelect?.();\n onItemSelect?.(item);\n close();\n };\n\n return (\n <List\n aria-label={menuAccessibleLabel}\n className={styles.list}\n onKeyDown={handleKeyDown}\n role='menu'\n >\n {items.map((item, index) => (\n <li\n key={item.id ?? index}\n role='none'\n >\n <Button\n aria-label={item.accessibleLabel}\n className={cx(styles.item, item.isDanger && styles.danger)}\n disabled={item.disabled}\n onClick={() => handleItemSelect(item)}\n ref={(node) => {\n itemRefs.current[index] = node;\n }}\n role='menuitem'\n variant='minimal'\n >\n {item.icon && (\n <Icon\n gap='right'\n name={item.icon}\n size='small'\n variant={item.isDanger ? 'danger' : 'default'}\n />\n )}\n <span>{item.label}</span>\n </Button>\n </li>\n ))}\n </List>\n );\n};\n\nexport const Menu = ({\n items,\n menuAccessibleLabel = 'Menu',\n onItemSelect,\n position = 'left',\n triggerAccessibleLabel = 'Open menu',\n}: MenuProps) => {\n return (\n <Popover\n position={position}\n triggerAccessibleLabel={triggerAccessibleLabel}\n triggerAriaHasPopup='menu'\n triggerButtonContent={\n <Icon\n name='dots'\n size='medium'\n />\n }\n >\n {({ close, initialFocus }) => (\n <MenuPanel\n close={close}\n initialFocus={initialFocus}\n items={items}\n menuAccessibleLabel={menuAccessibleLabel}\n onItemSelect={onItemSelect}\n />\n )}\n </Popover>\n );\n};\n"],"names":["getFocusableItems","items","filter","item","Boolean","disabled","MenuPanel","close","initialFocus","menuAccessibleLabel","onItemSelect","itemRefs","useRef","focusItem","useCallback","target","focusableItems","current","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","onSelect","jsx","List","styles","list","map","index","Button","accessibleLabel","cx","isDanger","danger","node","icon","Icon","label","id","Menu","position","triggerAccessibleLabel","Popover"],"mappings":";;;;;;;;;;;;AAoCA,SAASA,EAAkBC,GAAwC;AACjE,SAAOA,EAAMC,OAAO,CAACC,MAAoCC,GAAQD,KAAQ,CAACA,EAAKE,SAAS;AAC1F;AAEA,MAAMC,IAAYA,CAAC;AAAA,EACjBC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAP,OAAAA;AAAAA,EACAQ,qBAAAA;AAAAA,EACAC,cAAAA;AACc,MAAM;AACpB,QAAMC,IAAWC,EAAwC,EAAE,GAErDC,IAAYC,EAAY,CAACC,MAA4B;AACzD,UAAMC,IAAiBhB,EAAkBW,EAASM,OAAO;AAEzD,QAAID,EAAeE,WAAW;AAC5B;AAGF,QAAIH,MAAW,SAAS;AACtBC,MAAAA,EAAe,CAAC,EAAEG,MAAAA;AAClB;AAAA,IACF;AAEA,QAAIJ,MAAW,QAAQ;AACrBC,MAAAA,EAAeA,EAAeE,SAAS,CAAC,EAAEC,MAAAA;AAC1C;AAAA,IACF;AAEA,UAAMC,IAAeJ,EAAeK,QAAQC,SAASC,aAAkC,GACjFC,IACJT,MAAW,UACNK,IAAe,KAAKJ,EAAeE,UACnCE,IAAe,IAAIJ,EAAeE,UAAUF,EAAeE;AAElEF,IAAAA,EAAeQ,CAAS,EAAEL,MAAAA;AAAAA,EAC5B,GAAG,CAAA,CAAE;AAELM,EAAAA,EAAU,MAAM;AACdZ,IAAAA,EAAUL,KAAgB,OAAO;AAAA,EACnC,GAAG,CAACK,GAAWL,CAAY,CAAC;AAE5B,QAAMkB,IAAgBA,CAACC,MAAiD;AACtE,QAAIA,EAAMC,QAAQ,aAAa;AAC7BD,MAAAA,EAAME,eAAAA,GACNhB,EAAU,MAAM;AAChB;AAAA,IACF;AAEA,QAAIc,EAAMC,QAAQ,WAAW;AAC3BD,MAAAA,EAAME,eAAAA,GACNhB,EAAU,UAAU;AACpB;AAAA,IACF;AAEA,QAAIc,EAAMC,QAAQ,QAAQ;AACxBD,MAAAA,EAAME,eAAAA,GACNhB,EAAU,OAAO;AACjB;AAAA,IACF;AAEA,IAAIc,EAAMC,QAAQ,UAChBD,EAAME,eAAAA,GACNhB,EAAU,MAAM;AAAA,EAEpB,GAEMiB,IAAmBA,CAAC3B,MAAmB;;AAC3CA,KAAAA,IAAAA,EAAK4B,aAAL5B,QAAAA,EAAAA,KAAAA,IACAO,KAAAA,QAAAA,EAAeP,IACfI,EAAAA;AAAAA,EACF;AAEA,SACE,gBAAAyB,EAACC,KACC,cAAYxB,GACZ,WAAWyB,EAAOC,MAClB,WAAWT,GACX,MAAK,QAAM,kBAAA,aAEVzB,YAAMmC,IAAI,CAACjC,GAAMkC,MAChB,gBAAAL,EAAC,QAEC,MAAK,QAEL,4BAACM,GAAA,EACC,cAAYnC,EAAKoC,iBACjB,WAAWC,EAAGN,EAAO/B,MAAMA,EAAKsC,YAAYP,EAAOQ,MAAM,GACzD,UAAUvC,EAAKE,UACf,SAAS,MAAMyB,EAAiB3B,CAAI,GACpC,KAAMwC,CAAAA,MAAS;AACbhC,IAAAA,EAASM,QAAQoB,CAAK,IAAIM;AAAAA,EAC5B,GACA,MAAK,YACL,SAAQ,WAEPxC,UAAAA;AAAAA,IAAAA,EAAKyC,QACJ,gBAAAZ,EAACa,GAAA,EACC,KAAI,SACJ,MAAM1C,EAAKyC,MACX,MAAK,SACL,SAASzC,EAAKsC,WAAW,WAAW,WAAU;AAAA,IAGlD,gBAAAT,EAAC,QAAA,EAAM7B,UAAAA,EAAK2C,MAAAA,CAAM;AAAA,EAAA,EAAA,CACpB,EAAA,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/_menu/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\nimport { List } from '@/components/list';\nimport { Popover, type PopoverInitialFocus, type PopoverRenderProps } from '@/components/popover';\n\nimport styles from './styles.module.css';\n\nexport type MenuItem = {\n accessibleLabel?: string;\n disabled?: boolean;\n icon?: IconName;\n id?: string;\n isDanger?: boolean;\n label: React.ReactNode;\n onSelect?: () => void;\n};\n\nexport type MenuProps = {\n items: MenuItem[];\n menuAccessibleLabel?: string;\n onItemSelect?: (item: MenuItem) => void;\n position?: 'left' | 'right';\n triggerAccessibleLabel?: string;\n};\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuPanelProps = Pick<MenuProps, 'items' | 'menuAccessibleLabel' | 'onItemSelect'> & {\n close: PopoverRenderProps['close'];\n initialFocus?: PopoverInitialFocus;\n};\n\nfunction getFocusableItems(items: Array<HTMLButtonElement | null>) {\n return items.filter((item): item is HTMLButtonElement => Boolean(item && !item.disabled));\n}\n\nconst MenuPanel = ({\n close,\n initialFocus,\n items,\n menuAccessibleLabel,\n onItemSelect,\n}: MenuPanelProps) => {\n const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n const focusItem = useCallback((target: MenuFocusTarget) => {\n const focusableItems = getFocusableItems(itemRefs.current);\n\n if (focusableItems.length === 0) {\n return;\n }\n\n if (target === 'first') {\n focusableItems[0].focus();\n return;\n }\n\n if (target === 'last') {\n focusableItems[focusableItems.length - 1].focus();\n return;\n }\n\n const currentIndex = focusableItems.indexOf(document.activeElement as HTMLButtonElement);\n const nextIndex =\n target === 'next'\n ? (currentIndex + 1) % focusableItems.length\n : (currentIndex - 1 + focusableItems.length) % focusableItems.length;\n\n focusableItems[nextIndex].focus();\n }, []);\n\n useEffect(() => {\n focusItem(initialFocus ?? 'first');\n }, [focusItem, initialFocus]);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n if (event.key === 'ArrowDown') {\n event.preventDefault();\n focusItem('next');\n return;\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault();\n focusItem('previous');\n return;\n }\n\n if (event.key === 'Home') {\n event.preventDefault();\n focusItem('first');\n return;\n }\n\n if (event.key === 'End') {\n event.preventDefault();\n focusItem('last');\n }\n };\n\n const handleItemSelect = (item: MenuItem) => {\n item.onSelect?.();\n onItemSelect?.(item);\n close();\n };\n\n return (\n <List\n aria-label={menuAccessibleLabel}\n className={styles.list}\n onKeyDown={handleKeyDown}\n role='menu'\n >\n {items.map((item, index) => (\n <li\n key={item.id ?? index}\n role='none'\n >\n <Button\n aria-label={item.accessibleLabel}\n className={cx(styles.item, item.isDanger && styles.danger)}\n disabled={item.disabled}\n onClick={() => handleItemSelect(item)}\n ref={(node) => {\n itemRefs.current[index] = node;\n }}\n role='menuitem'\n variant='minimal'\n >\n {item.icon && (\n <Icon\n fill\n gap='right'\n name={item.icon}\n size='small'\n variant={item.isDanger ? 'danger' : 'default'}\n />\n )}\n <span>{item.label}</span>\n </Button>\n </li>\n ))}\n </List>\n );\n};\n\nexport const Menu = ({\n items,\n menuAccessibleLabel = 'Menu',\n onItemSelect,\n position = 'left',\n triggerAccessibleLabel = 'Open menu',\n}: MenuProps) => {\n return (\n <Popover\n position={position}\n triggerAccessibleLabel={triggerAccessibleLabel}\n triggerAriaHasPopup='menu'\n triggerButtonContent={\n <Icon\n name='dots'\n size='medium'\n />\n }\n >\n {({ close, initialFocus }) => (\n <MenuPanel\n close={close}\n initialFocus={initialFocus}\n items={items}\n menuAccessibleLabel={menuAccessibleLabel}\n onItemSelect={onItemSelect}\n />\n )}\n </Popover>\n );\n};\n"],"names":["getFocusableItems","items","filter","item","Boolean","disabled","MenuPanel","close","initialFocus","menuAccessibleLabel","onItemSelect","itemRefs","useRef","focusItem","useCallback","target","focusableItems","current","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","onSelect","jsx","List","styles","list","map","index","Button","accessibleLabel","cx","isDanger","danger","node","icon","Icon","label","id","Menu","position","triggerAccessibleLabel","Popover"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index25.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index25.css');const H=require("react/jsx-runtime"),O=require("../../classix-5H4IWnMA.cjs"),c=require("react"),G=require("../list/index.cjs"),J="_sortable_n5r0c_5",K="_dragging_n5r0c_15",Q="_dropping_n5r0c_30",tt="_columns_n5r0c_44",et="_pseudo_n5r0c_53",f={sortable:J,dragging:K,dropping:Q,columns:tt,pseudo:et,"target-above":"_target-above_n5r0c_68","target-below":"_target-below_n5r0c_69"},X=c.createContext(null);function nt(){return c.useContext(X)}function rt({children:M,className:$,columns:E=1,isRearranging:x=!1,onChangeOrder:k,...A}){const B=Number.isFinite(E)?Math.max(1,Math.floor(E)):1,S=c.useMemo(()=>c.Children.toArray(M),[M]),u=c.useRef(-1),R=c.useMemo(()=>typeof window<"u"&&(navigator.maxTouchPoints>0||window.matchMedia("(pointer: coarse)").matches),[]),i=c.useRef(!1),D=c.useRef(null),v=c.useRef(null),b=c.useRef(null),T=c.useRef(!1),_=c.useRef(null),d=c.useRef(null),[w,F]=c.useState({height:0,width:0}),[m,p]=c.useState(null),[z,q]=c.useState(null),L={...A.style,"--height":`calc(${w.height}px - var(--scale-16))`,"--width":B>1?`calc(${w.width}px - var(--scale-16))`:`${w.width}px`},V=o=>{k(o.map((t,s)=>({id:String(c.isValidElement(t)?t.props["data-id"]??`idx-${s}`:`idx-${s}`),weight:o.length-1-s})))},y=(o,t)=>{if(t<0||t>=S.length||o===t)return;const s=S.slice(),[e]=s.splice(o,1);s.splice(t,0,e),q(t),V(s)},h=()=>{v.current!==null&&(clearTimeout(v.current),v.current=null)},C=()=>{d.current!==null&&(cancelAnimationFrame(d.current),d.current=null)},W=o=>{let t=(o==null?void 0:o.parentElement)??null;for(;t;){const{overflowY:s}=window.getComputedStyle(t);if(/(auto|scroll|overlay)/.test(s)&&t.scrollHeight>t.clientHeight)return t;t=t.parentElement}return document.scrollingElement instanceof HTMLElement?document.scrollingElement:null},P=()=>{h(),C(),_.current=null,i.current=!1,D.current=null,b.current=null,T.current=!1,u.current=-1,p(null)},U=o=>o instanceof Element&&!!o.closest('button, a, input, textarea, select, option, [role="button"], [contenteditable="true"]'),Y=(o,t)=>{var N;const s=(N=document.elementFromPoint(o,t))==null?void 0:N.closest("[data-sortable-index]");if(!s)return;const e=Number(s.dataset.sortableIndex),n=u.current;if(!Number.isInteger(e)||n<0||e===n)return;const r=s.getBoundingClientRect(),a=e===n+1?w.height:r.height,l=t>r.top+a/2?e+1:e,I=l>n?l-1:l;D.current=I,p(I)},Z=o=>{const t=W(o);if(!t)return;const s=72,e=18,n=()=>{if(!i.current){d.current=null;return}const r=_.current;if(!r){d.current=requestAnimationFrame(n);return}const a=t===document.scrollingElement?{top:0,bottom:window.innerHeight}:t.getBoundingClientRect();let g=0;if(r.y<a.top+s){const l=Math.max(0,r.y-a.top);g=-e*(1-l/s)}else if(r.y>a.bottom-s){const l=Math.max(0,a.bottom-r.y);g=e*(1-l/s)}g!==0&&(t.scrollBy({top:g,behavior:"auto"}),Y(r.x,r.y)),d.current=requestAnimationFrame(n)};C(),d.current=requestAnimationFrame(n)},j=()=>{u.current=-1,p(null)};return c.useEffect(()=>{x||q(null)},[x]),c.useEffect(()=>()=>{h(),C()},[]),c.useEffect(()=>{const o=t=>{i.current&&t.preventDefault()};return window.addEventListener("touchmove",o,{passive:!1}),()=>{h(),window.removeEventListener("touchmove",o)}},[]),H.jsx(G.List,{className:O.t($,f.sortable,B>1&&f.columns),columns:E,ordered:!0,style:L,...A,"data-component":"sortable",children:S.map((o,t)=>{const s=c.isValidElement(o)?o.key:null;return H.jsx("li",{"data-sortable-index":t,onClickCapture:e=>{T.current&&(e.preventDefault(),e.stopPropagation(),T.current=!1)},className:O.t(m!==null&&m>t-10&&m<t+10&&f.pseudo,m===t&&u.current<t&&f["target-below"],m===t&&u.current>t&&f["target-above"],u.current===t&&f.dragging,z===t&&x&&f.dropping),onContextMenu:e=>{(i.current||v.current!==null)&&e.preventDefault()},onTouchStart:e=>{if(x||U(e.target))return;const n=e.touches[0];if(!n)return;const r=e.currentTarget;b.current={index:t,x:n.clientX,y:n.clientY},h(),v.current=setTimeout(()=>{u.current=t,i.current=!0,D.current=t,T.current=!0,F({height:r.offsetHeight,width:r.offsetWidth}),p(t),_.current={x:n.clientX,y:n.clientY},Z(r)},350)},onTouchMove:e=>{const n=e.touches[0];if(n){if(_.current={x:n.clientX,y:n.clientY},!i.current){const r=b.current;if(!r)return;Math.hypot(n.clientX-r.x,n.clientY-r.y)>8&&(h(),b.current=null);return}Y(n.clientX,n.clientY)}},onTouchEnd:e=>{if(h(),!i.current){b.current=null;return}e.preventDefault();const n=u.current,r=D.current;n>=0&&r!==null&&n!==r&&y(n,r),P()},onTouchCancel:()=>P(),draggable:!x&&!R,onDragEnd:()=>j(),onDragOver:e=>{e.preventDefault(),e.dataTransfer.dropEffect="move";const n=u.current;if(n<0||n===t)return;const r=e.currentTarget.getBoundingClientRect(),a=t===n+1?w.height:r.height,l=e.clientY>r.top+a/2?t+1:t,I=l>n?l-1:l;p(I)},onDragStart:e=>{if(R){e.preventDefault();return}u.current=t,F({height:e.currentTarget.offsetHeight,width:e.currentTarget.offsetWidth}),e.dataTransfer.setData("text/plain",""),e.dataTransfer.effectAllowed="move",p(t)},onDrop:e=>{e.preventDefault();const n=u.current,r=m;n<0||r===null||n===r||(y(n,r),j())},"data-component":"sortable",children:H.jsx(X.Provider,{value:{canMoveDown:t<S.length-1,canMoveUp:t>0,index:t,moveDown:()=>y(t,t+1),moveUp:()=>y(t,t-1)},children:o})},s??t)})})}exports.Sortable=rt;exports.useOptionalSortableItem=nt;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/_sortable/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\n\nimport { iconSVG } from '@/components/icon/icons.ts';\nimport { List } from '@/components/list';\n\nimport styles from './styles.module.css';\n\ntype SortItem = { id: string; weight: number };\n\ntype SortableProps = React.ComponentPropsWithoutRef<'ol'> & {\n columns?: number;\n isRearranging?: boolean;\n onChangeOrder: (order: SortItem[]) => void;\n};\n\ntype withVars = React.CSSProperties & {\n '--height'?: string;\n '--width'?: string;\n '--icon-svg'?: string;\n};\n\n/**\n * Children must provide a stable `data-id` for emits `{ id, weight }` and `key` (reconciliation).\n */\n\nexport function Sortable({\n children,\n className,\n columns = 1,\n isRearranging = false,\n onChangeOrder,\n ...props\n}: SortableProps) {\n const cols = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : 1;\n const arr = useMemo(() => React.Children.toArray(children), [children]);\n const drag = useRef(-1);\n const [zoneSize, setZoneSize] = useState({\n height: 0,\n width: 0,\n });\n const [dropIndex, setDropIndex] = useState<number | null>(null);\n const [droppedAtIndex, setDroppedAtIndex] = useState<number | null>(null);\n const withVars: withVars = {\n ...props.style,\n '--icon-svg': iconSVG('sort', true),\n '--height': `calc(${zoneSize.height}px - var(--scale-16))`,\n '--width': cols > 1 ? `calc(${zoneSize.width}px - var(--scale-16))` : `${zoneSize.width}px`,\n };\n\n const resetDragState = () => {\n drag.current = -1;\n setDropIndex(null);\n };\n\n useEffect(() => {\n if (!isRearranging) {\n setDroppedAtIndex(null);\n }\n }, [isRearranging]);\n\n return (\n <List\n className={cx(className, styles.sortable, cols > 1 && styles.columns)}\n columns={columns}\n ordered\n style={withVars}\n {...props}\n >\n {arr.map((child, i) => {\n const key = React.isValidElement(child) ? child.key : null;\n\n return (\n <li\n key={key ?? i}\n className={cx(\n dropIndex !== null && dropIndex > i - 10 && dropIndex < i + 10 && styles.pseudo,\n dropIndex === i && drag.current < i && styles['target-below'],\n dropIndex === i && drag.current > i && styles['target-above'],\n drag.current === i && styles.dragging,\n droppedAtIndex === i && isRearranging && styles.dropping\n )}\n draggable={!isRearranging}\n onDragEnd={() => resetDragState()}\n onDragOver={(e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n const from = drag.current;\n if (from < 0 || from === i) return;\n\n const rect = e.currentTarget.getBoundingClientRect();\n const itemHeight = i === from + 1 ? zoneSize.height : rect.height;\n const isBottomHalf = e.clientY > rect.top + itemHeight / 2;\n const rawIndex = isBottomHalf ? i + 1 : i;\n const nextDropIndex = rawIndex > from ? rawIndex - 1 : rawIndex;\n\n setDropIndex(nextDropIndex);\n }}\n onDragStart={(e) => {\n drag.current = i;\n setZoneSize({\n height: e.currentTarget.offsetHeight,\n width: e.currentTarget.offsetWidth,\n });\n e.dataTransfer.setData('text/plain', '');\n e.dataTransfer.effectAllowed = 'move';\n setDropIndex(i);\n }}\n onDrop={(e) => {\n e.preventDefault();\n const from = drag.current;\n const to = dropIndex;\n if (from < 0 || to === null || from === to) return;\n\n setDroppedAtIndex(to);\n const next = arr.slice();\n const [moved] = next.splice(from, 1);\n next.splice(to, 0, moved);\n\n onChangeOrder?.(\n next.map((c, idx) => ({\n id: String(\n React.isValidElement(c)\n ? ((c.props as { 'data-id'?: string })['data-id'] ?? `idx-${idx}`)\n : `idx-${idx}`\n ),\n\n weight: next.length - 1 - idx,\n }))\n );\n\n resetDragState();\n }}\n >\n {child}\n </li>\n );\n })}\n </List>\n );\n}\n"],"names":["Sortable","children","className","columns","isRearranging","onChangeOrder","props","cols","Number","isFinite","Math","max","floor","arr","useMemo","React","Children","toArray","drag","useRef","zoneSize","setZoneSize","useState","height","width","dropIndex","setDropIndex","droppedAtIndex","setDroppedAtIndex","withVars","style","iconSVG","resetDragState","current","useEffect","jsx","List","cx","styles","sortable","map","child","i","key","isValidElement","pseudo","dragging","dropping","e","preventDefault","dataTransfer","dropEffect","from","rect","currentTarget","getBoundingClientRect","itemHeight","rawIndex","clientY","top","nextDropIndex","offsetHeight","offsetWidth","setData","effectAllowed","to","next","slice","moved","splice","c","idx","id","String","weight","length"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/_sortable/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { List } from '@/components/list';\n\nimport styles from './styles.module.css';\n\ntype SortItem = { id: string; weight: number };\n\ntype SortableItemContextValue = {\n canMoveDown: boolean;\n canMoveUp: boolean;\n index: number;\n moveDown: () => void;\n moveUp: () => void;\n};\n\nconst SortableItemContext = createContext<SortableItemContextValue | null>(null);\n\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useOptionalSortableItem() {\n return useContext(SortableItemContext);\n}\n\ntype SortableProps = React.ComponentPropsWithoutRef<'ol'> & {\n columns?: number;\n isRearranging?: boolean;\n onChangeOrder: (order: SortItem[]) => void;\n};\n\ntype withVars = React.CSSProperties & {\n '--height'?: string;\n '--width'?: string;\n '--icon-svg'?: string;\n};\n\n/**\n * Children must provide a stable `data-id` for emits `{ id, weight }` and `key` (reconciliation).\n */\n\nexport function Sortable({\n children,\n className,\n columns = 1,\n isRearranging = false,\n onChangeOrder,\n ...props\n}: SortableProps) {\n const cols = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : 1;\n const arr = useMemo(() => React.Children.toArray(children), [children]);\n const drag = useRef(-1);\n const usesTouchInput = useMemo(\n () =>\n typeof window !== 'undefined' &&\n (navigator.maxTouchPoints > 0 || window.matchMedia('(pointer: coarse)').matches),\n []\n );\n const touchDragActive = useRef(false);\n const touchDropIndex = useRef<number | null>(null);\n const touchHoldTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n const touchStart = useRef<{ index: number; x: number; y: number } | null>(null);\n const suppressClick = useRef(false);\n const touchPosition = useRef<{ x: number; y: number } | null>(null);\n const autoScrollFrame = useRef<number | null>(null);\n const [zoneSize, setZoneSize] = useState({\n height: 0,\n width: 0,\n });\n const [dropIndex, setDropIndex] = useState<number | null>(null);\n const [droppedAtIndex, setDroppedAtIndex] = useState<number | null>(null);\n const withVars: withVars = {\n ...props.style,\n '--height': `calc(${zoneSize.height}px - var(--scale-16))`,\n '--width': cols > 1 ? `calc(${zoneSize.width}px - var(--scale-16))` : `${zoneSize.width}px`,\n };\n\n const emitOrder = (items: React.ReactNode[]) => {\n onChangeOrder(\n items.map((item, index) => ({\n id: String(\n React.isValidElement(item)\n ? ((item.props as { 'data-id'?: string })['data-id'] ?? `idx-${index}`)\n : `idx-${index}`\n ),\n weight: items.length - 1 - index,\n }))\n );\n };\n\n const moveItem = (from: number, to: number) => {\n if (to < 0 || to >= arr.length || from === to) return;\n\n const next = arr.slice();\n const [moved] = next.splice(from, 1);\n next.splice(to, 0, moved);\n\n setDroppedAtIndex(to);\n emitOrder(next);\n };\n\n const clearTouchHoldTimer = () => {\n if (touchHoldTimer.current !== null) {\n clearTimeout(touchHoldTimer.current);\n touchHoldTimer.current = null;\n }\n };\n\n const clearAutoScrollFrame = () => {\n if (autoScrollFrame.current !== null) {\n cancelAnimationFrame(autoScrollFrame.current);\n autoScrollFrame.current = null;\n }\n };\n\n const getScrollableAncestor = (element: HTMLElement | null) => {\n let current = element?.parentElement ?? null;\n\n while (current) {\n const { overflowY } = window.getComputedStyle(current);\n const canScroll =\n /(auto|scroll|overlay)/.test(overflowY) && current.scrollHeight > current.clientHeight;\n\n if (canScroll) return current;\n current = current.parentElement;\n }\n\n return document.scrollingElement instanceof HTMLElement ? document.scrollingElement : null;\n };\n\n const resetTouchDragState = () => {\n clearTouchHoldTimer();\n clearAutoScrollFrame();\n touchPosition.current = null;\n touchDragActive.current = false;\n touchDropIndex.current = null;\n touchStart.current = null;\n suppressClick.current = false;\n drag.current = -1;\n setDropIndex(null);\n };\n\n const isInteractiveTarget = (target: EventTarget | null) =>\n target instanceof Element &&\n Boolean(\n target.closest(\n 'button, a, input, textarea, select, option, [role=\"button\"], [contenteditable=\"true\"]'\n )\n );\n\n const updateTouchDropIndex = (clientX: number, clientY: number) => {\n const target = document\n .elementFromPoint(clientX, clientY)\n ?.closest<HTMLElement>('[data-sortable-index]');\n if (!target) return;\n\n const index = Number(target.dataset.sortableIndex);\n const from = drag.current;\n if (!Number.isInteger(index) || from < 0 || index === from) return;\n\n const rect = target.getBoundingClientRect();\n const itemHeight = index === from + 1 ? zoneSize.height : rect.height;\n const isBottomHalf = clientY > rect.top + itemHeight / 2;\n const rawIndex = isBottomHalf ? index + 1 : index;\n const nextDropIndex = rawIndex > from ? rawIndex - 1 : rawIndex;\n\n touchDropIndex.current = nextDropIndex;\n setDropIndex(nextDropIndex);\n };\n\n const startTouchAutoScroll = (item: HTMLElement) => {\n const scrollContainer = getScrollableAncestor(item);\n if (!scrollContainer) return;\n\n const edgeSize = 72;\n const maxSpeed = 18;\n\n const step = () => {\n if (!touchDragActive.current) {\n autoScrollFrame.current = null;\n return;\n }\n\n const position = touchPosition.current;\n if (!position) {\n autoScrollFrame.current = requestAnimationFrame(step);\n return;\n }\n\n const rect =\n scrollContainer === document.scrollingElement\n ? { top: 0, bottom: window.innerHeight }\n : scrollContainer.getBoundingClientRect();\n\n let speed = 0;\n\n if (position.y < rect.top + edgeSize) {\n const distance = Math.max(0, position.y - rect.top);\n speed = -maxSpeed * (1 - distance / edgeSize);\n } else if (position.y > rect.bottom - edgeSize) {\n const distance = Math.max(0, rect.bottom - position.y);\n speed = maxSpeed * (1 - distance / edgeSize);\n }\n\n if (speed !== 0) {\n scrollContainer.scrollBy({ top: speed, behavior: 'auto' });\n updateTouchDropIndex(position.x, position.y);\n }\n\n autoScrollFrame.current = requestAnimationFrame(step);\n };\n\n clearAutoScrollFrame();\n autoScrollFrame.current = requestAnimationFrame(step);\n };\n\n const resetDragState = () => {\n drag.current = -1;\n setDropIndex(null);\n };\n\n useEffect(() => {\n if (!isRearranging) {\n setDroppedAtIndex(null);\n }\n }, [isRearranging]);\n\n useEffect(\n () => () => {\n clearTouchHoldTimer();\n clearAutoScrollFrame();\n },\n []\n );\n\n useEffect(() => {\n const preventScrollWhileDragging = (event: TouchEvent) => {\n if (touchDragActive.current) {\n event.preventDefault();\n }\n };\n\n window.addEventListener('touchmove', preventScrollWhileDragging, {\n passive: false,\n });\n\n return () => {\n clearTouchHoldTimer();\n window.removeEventListener('touchmove', preventScrollWhileDragging);\n };\n }, []);\n\n return (\n <List\n className={cx(className, styles.sortable, cols > 1 && styles.columns)}\n columns={columns}\n ordered\n style={withVars}\n {...props}\n >\n {arr.map((child, i) => {\n const key = React.isValidElement(child) ? child.key : null;\n\n return (\n <li\n key={key ?? i}\n data-sortable-index={i}\n onClickCapture={(e) => {\n if (!suppressClick.current) return;\n e.preventDefault();\n e.stopPropagation();\n suppressClick.current = false;\n }}\n className={cx(\n dropIndex !== null && dropIndex > i - 10 && dropIndex < i + 10 && styles.pseudo,\n dropIndex === i && drag.current < i && styles['target-below'],\n dropIndex === i && drag.current > i && styles['target-above'],\n drag.current === i && styles.dragging,\n droppedAtIndex === i && isRearranging && styles.dropping\n )}\n onContextMenu={(e) => {\n if (touchDragActive.current || touchHoldTimer.current !== null) {\n e.preventDefault();\n }\n }}\n onTouchStart={(e) => {\n if (isRearranging || isInteractiveTarget(e.target)) return;\n\n const touch = e.touches[0];\n if (!touch) return;\n\n const item = e.currentTarget;\n touchStart.current = {\n index: i,\n x: touch.clientX,\n y: touch.clientY,\n };\n\n clearTouchHoldTimer();\n touchHoldTimer.current = setTimeout(() => {\n drag.current = i;\n touchDragActive.current = true;\n touchDropIndex.current = i;\n suppressClick.current = true;\n setZoneSize({\n height: item.offsetHeight,\n width: item.offsetWidth,\n });\n setDropIndex(i);\n touchPosition.current = {\n x: touch.clientX,\n y: touch.clientY,\n };\n startTouchAutoScroll(item);\n }, 350);\n }}\n onTouchMove={(e) => {\n const touch = e.touches[0];\n if (!touch) return;\n\n touchPosition.current = {\n x: touch.clientX,\n y: touch.clientY,\n };\n\n if (!touchDragActive.current) {\n const start = touchStart.current;\n if (!start) return;\n\n const distance = Math.hypot(touch.clientX - start.x, touch.clientY - start.y);\n if (distance > 8) {\n clearTouchHoldTimer();\n touchStart.current = null;\n }\n return;\n }\n updateTouchDropIndex(touch.clientX, touch.clientY);\n }}\n onTouchEnd={(e) => {\n clearTouchHoldTimer();\n\n if (!touchDragActive.current) {\n touchStart.current = null;\n return;\n }\n\n e.preventDefault();\n const from = drag.current;\n const to = touchDropIndex.current;\n\n if (from >= 0 && to !== null && from !== to) {\n moveItem(from, to);\n }\n\n resetTouchDragState();\n }}\n onTouchCancel={() => resetTouchDragState()}\n draggable={!isRearranging && !usesTouchInput}\n onDragEnd={() => resetDragState()}\n onDragOver={(e) => {\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n const from = drag.current;\n if (from < 0 || from === i) return;\n\n const rect = e.currentTarget.getBoundingClientRect();\n const itemHeight = i === from + 1 ? zoneSize.height : rect.height;\n const isBottomHalf = e.clientY > rect.top + itemHeight / 2;\n const rawIndex = isBottomHalf ? i + 1 : i;\n const nextDropIndex = rawIndex > from ? rawIndex - 1 : rawIndex;\n\n setDropIndex(nextDropIndex);\n }}\n onDragStart={(e) => {\n if (usesTouchInput) {\n e.preventDefault();\n return;\n }\n drag.current = i;\n setZoneSize({\n height: e.currentTarget.offsetHeight,\n width: e.currentTarget.offsetWidth,\n });\n e.dataTransfer.setData('text/plain', '');\n e.dataTransfer.effectAllowed = 'move';\n setDropIndex(i);\n }}\n onDrop={(e) => {\n e.preventDefault();\n const from = drag.current;\n const to = dropIndex;\n if (from < 0 || to === null || from === to) return;\n moveItem(from, to);\n resetDragState();\n }}\n >\n <SortableItemContext.Provider\n value={{\n canMoveDown: i < arr.length - 1,\n canMoveUp: i > 0,\n index: i,\n moveDown: () => moveItem(i, i + 1),\n moveUp: () => moveItem(i, i - 1),\n }}\n >\n {child}\n </SortableItemContext.Provider>\n </li>\n );\n })}\n </List>\n );\n}\n"],"names":["SortableItemContext","createContext","useOptionalSortableItem","useContext","Sortable","children","className","columns","isRearranging","onChangeOrder","props","cols","Number","isFinite","Math","max","floor","arr","useMemo","React","Children","toArray","drag","useRef","usesTouchInput","window","navigator","maxTouchPoints","matchMedia","matches","touchDragActive","touchDropIndex","touchHoldTimer","touchStart","suppressClick","touchPosition","autoScrollFrame","zoneSize","setZoneSize","useState","height","width","dropIndex","setDropIndex","droppedAtIndex","setDroppedAtIndex","withVars","style","emitOrder","items","map","item","index","id","String","isValidElement","weight","length","moveItem","from","to","next","slice","moved","splice","clearTouchHoldTimer","current","clearTimeout","clearAutoScrollFrame","cancelAnimationFrame","getScrollableAncestor","element","parentElement","overflowY","getComputedStyle","test","scrollHeight","clientHeight","document","scrollingElement","HTMLElement","resetTouchDragState","isInteractiveTarget","target","Element","Boolean","closest","updateTouchDropIndex","clientX","clientY","elementFromPoint","dataset","sortableIndex","isInteger","rect","getBoundingClientRect","itemHeight","rawIndex","top","nextDropIndex","startTouchAutoScroll","scrollContainer","edgeSize","maxSpeed","step","position","requestAnimationFrame","bottom","innerHeight","speed","y","distance","scrollBy","behavior","x","resetDragState","useEffect","preventScrollWhileDragging","event","preventDefault","addEventListener","passive","removeEventListener","jsx","List","cx","styles","sortable","child","i","key","e","stopPropagation","pseudo","dragging","dropping","touch","touches","currentTarget","setTimeout","offsetHeight","offsetWidth","start","hypot","dataTransfer","dropEffect","setData","effectAllowed","canMoveDown","canMoveUp","moveDown","moveUp"],"mappings":"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"}
|