@bioturing/components 0.44.1 → 0.46.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/dist/base.d.ts +2 -0
  2. package/dist/base.d.ts.map +1 -1
  3. package/dist/base.js +2 -0
  4. package/dist/base.js.map +1 -1
  5. package/dist/components/base-menu/index.d.ts.map +1 -1
  6. package/dist/components/base-menu/item.d.ts.map +1 -1
  7. package/dist/components/base-menu/item.js +6 -13
  8. package/dist/components/base-menu/item.js.map +1 -1
  9. package/dist/components/button/style.css +1 -1
  10. package/dist/components/choice-list/component.d.ts +11 -1
  11. package/dist/components/choice-list/component.d.ts.map +1 -1
  12. package/dist/components/choice-list/component.js +79 -82
  13. package/dist/components/choice-list/component.js.map +1 -1
  14. package/dist/components/choice-list/style.css +1 -1
  15. package/dist/components/combobox/component.d.ts +32 -1
  16. package/dist/components/combobox/component.d.ts.map +1 -1
  17. package/dist/components/combobox/component.js +286 -261
  18. package/dist/components/combobox/component.js.map +1 -1
  19. package/dist/components/combobox/style.css +1 -1
  20. package/dist/components/combobox/utils.d.ts +2 -0
  21. package/dist/components/combobox/utils.d.ts.map +1 -0
  22. package/dist/components/combobox/utils.js +10 -0
  23. package/dist/components/combobox/utils.js.map +1 -0
  24. package/dist/components/command-palette/style.css +1 -1
  25. package/dist/components/data-table/style.css +1 -1
  26. package/dist/components/dialog/Dialog.d.ts.map +1 -1
  27. package/dist/components/dialog/Dialog.js +73 -69
  28. package/dist/components/dialog/Dialog.js.map +1 -1
  29. package/dist/components/dialog/dialog.css +1 -1
  30. package/dist/components/hooks/useDraggable.d.ts.map +1 -1
  31. package/dist/components/hooks/useDraggable.js +34 -27
  32. package/dist/components/hooks/useDraggable.js.map +1 -1
  33. package/dist/components/input/component.d.ts +1 -1
  34. package/dist/components/input/component.d.ts.map +1 -1
  35. package/dist/components/input/component.js +55 -45
  36. package/dist/components/input/component.js.map +1 -1
  37. package/dist/components/modal/Modal.d.ts.map +1 -1
  38. package/dist/components/modal/Modal.js +151 -132
  39. package/dist/components/modal/Modal.js.map +1 -1
  40. package/dist/components/modal/style.css +1 -1
  41. package/dist/components/popup-panel/component.d.ts +1 -1
  42. package/dist/components/popup-panel/component.d.ts.map +1 -1
  43. package/dist/components/popup-panel/component.js +217 -233
  44. package/dist/components/popup-panel/component.js.map +1 -1
  45. package/dist/components/popup-panel/constants.d.ts +5 -1
  46. package/dist/components/popup-panel/constants.d.ts.map +1 -1
  47. package/dist/components/popup-panel/constants.js +8 -4
  48. package/dist/components/popup-panel/constants.js.map +1 -1
  49. package/dist/components/popup-panel/style.css +1 -1
  50. package/dist/components/popup-panel/types.d.ts +14 -1
  51. package/dist/components/popup-panel/types.d.ts.map +1 -1
  52. package/dist/components/select-trigger/style.css +1 -1
  53. package/dist/components/theme-provider/style.css +1 -1
  54. package/dist/components/truncate/helpers.d.ts +13 -7
  55. package/dist/components/truncate/helpers.d.ts.map +1 -1
  56. package/dist/components/truncate/helpers.js +102 -85
  57. package/dist/components/truncate/helpers.js.map +1 -1
  58. package/dist/stats.html +1 -1
  59. package/dist/tailwind.css +16 -0
  60. package/dist/tokens/and-theme/tokens.d.ts.map +1 -1
  61. package/dist/tokens/and-theme/tokens.js +4 -1
  62. package/dist/tokens/and-theme/tokens.js.map +1 -1
  63. package/package.json +4 -4
package/dist/base.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export * from '@base-ui/react';
2
2
  export { isWebKit, isIOS, isFirefox, isSafari, isEdge, isAndroid, isMac, isJSDOM as isJSDOMFromDetectBrowser, } from '@base-ui/utils/detectBrowser';
3
3
  export { isJSDOM, expectType, type IfEquals } from '@base-ui/utils/testUtils';
4
+ export * from '@base-ui/utils/addEventListener';
4
5
  export * from '@base-ui/utils/empty';
5
6
  export * from '@base-ui/utils/error';
6
7
  export * from '@base-ui/utils/fastHooks';
@@ -11,6 +12,7 @@ export * from '@base-ui/utils/getReactElementRef';
11
12
  export * from '@base-ui/utils/inertValue';
12
13
  export * from '@base-ui/utils/isElementDisabled';
13
14
  export * from '@base-ui/utils/isMouseWithinBounds';
15
+ export * from '@base-ui/utils/mergeCleanups';
14
16
  export * from '@base-ui/utils/mergeObjects';
15
17
  export * from '@base-ui/utils/owner';
16
18
  export * from '@base-ui/utils/reactVersion';
@@ -1 +1 @@
1
- {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAO/B,OAAO,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,IAAI,wBAAwB,GACpC,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAG9E,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wCAAwC,CAAC;AACvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC;AAChD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AAGpC,cAAc,sBAAsB,CAAC"}
1
+ {"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAO/B,OAAO,EACL,QAAQ,EACR,KAAK,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,IAAI,wBAAwB,GACpC,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAG9E,cAAc,iCAAiC,CAAC;AAChD,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wCAAwC,CAAC;AACvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC;AAChD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AAGpC,cAAc,sBAAsB,CAAC"}
package/dist/base.js CHANGED
@@ -1,6 +1,7 @@
1
1
  export * from "@base-ui/react";
2
2
  import { isAndroid as t, isEdge as f, isFirefox as p, isIOS as x, isJSDOM as m, isMac as i, isSafari as s, isWebKit as S } from "@base-ui/utils/detectBrowser";
3
3
  import { expectType as D, isJSDOM as M } from "@base-ui/utils/testUtils";
4
+ export * from "@base-ui/utils/addEventListener";
4
5
  export * from "@base-ui/utils/empty";
5
6
  export * from "@base-ui/utils/error";
6
7
  export * from "@base-ui/utils/fastHooks";
@@ -11,6 +12,7 @@ export * from "@base-ui/utils/getReactElementRef";
11
12
  export * from "@base-ui/utils/inertValue";
12
13
  export * from "@base-ui/utils/isElementDisabled";
13
14
  export * from "@base-ui/utils/isMouseWithinBounds";
15
+ export * from "@base-ui/utils/mergeCleanups";
14
16
  export * from "@base-ui/utils/mergeObjects";
15
17
  export * from "@base-ui/utils/owner";
16
18
  export * from "@base-ui/utils/reactVersion";
package/dist/base.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"base.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"base.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/base-menu/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,CAAC;AAChD,eAAO,MAAM,QAAQ;;;;;;;;;;;;WAS4hG,CAAC;;CADjjG,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/base-menu/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,CAAC;AAChD,eAAO,MAAM,QAAQ;;;;;;;;;;;;WASo/F,CAAC;;CADzgG,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/base-menu/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,MAAM,iBAAiB,CAC3B,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,IACjD,wBAAwB,CAAC,CAAC,CAAC,GAAG;IAChC,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gDAAgD;IAChD,WAAW,CAAC,EAAE,CACZ,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KACrC,KAAK,CAAC,YAAY,CAAC;IACxB,2CAA2C;IAC3C,UAAU,CAAC,EAAE;QACX,4CAA4C;QAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,oCAAoC;QACpC,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,oCAAoC;QACpC,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,sCAAsC;QACtC,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC;IAC9B,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,QAAA,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,EAC5E,+JAiBG,iBAAiB,CAAC,CAAC,CAAC,EACvB,KAAK,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,SA0DjD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAoC,CAC3D,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,EAEnD,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;CACnD,KACE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
1
+ {"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/components/base-menu/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,IAC/E,wBAAwB,CAAC,CAAC,CAAC,GAAG;IAC5B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IAC/E,2CAA2C;IAC3C,UAAU,CAAC,EAAE;QACX,4CAA4C;QAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,oCAAoC;QACpC,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,oCAAoC;QACpC,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,sCAAsC;QACtC,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC;IAC9B,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,CAAC;AAEJ,QAAA,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,EAC5E,+JAiBG,iBAAiB,CAAC,CAAC,CAAC,EACvB,KAAK,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,SA8CjD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAoC,CAC3D,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,EAEnD,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,CAAC;CACnD,KACE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
@@ -1,9 +1,9 @@
1
1
  import { jsxs as v, Fragment as R, jsx as r } from "react/jsx-runtime";
2
2
  import { forwardRef as j } from "react";
3
- import { Checkbox as k } from "antd";
4
3
  import './item.css';/* empty css */
5
- import { useRender as B } from "@base-ui/react";
6
- import { useCls as E } from "../utils/antdUtils.js";
4
+ import { useRender as k } from "@base-ui/react";
5
+ import { useCls as B } from "../utils/antdUtils.js";
6
+ import { Checkbox as E } from "../checkbox/component.js";
7
7
  import { clsx as a } from "../utils/cn.js";
8
8
  import { WithRenderProp as M } from "../utils/WithRenderProp.js";
9
9
  const N = ({
@@ -24,15 +24,8 @@ const N = ({
24
24
  as: h,
25
25
  ...b
26
26
  }, I) => {
27
- const e = E(), g = /* @__PURE__ */ v(R, { children: [
28
- i && /* @__PURE__ */ r(
29
- k,
30
- {
31
- checked: m,
32
- tabIndex: -1,
33
- indeterminate: p
34
- }
35
- ),
27
+ const e = B(), g = /* @__PURE__ */ v(R, { children: [
28
+ i && /* @__PURE__ */ r(E, { checked: m, tabIndex: -1, indeterminate: p }),
36
29
  o && /* @__PURE__ */ r("span", { className: a(e("menu-item-icon"), t?.icon), children: o }),
37
30
  s && /* @__PURE__ */ r(
38
31
  M,
@@ -45,7 +38,7 @@ const N = ({
45
38
  ),
46
39
  d && /* @__PURE__ */ r("span", { className: a(e("menu-item-suffix"), t?.suffix), children: d })
47
40
  ] });
48
- return B({
41
+ return k({
49
42
  render: x || void 0,
50
43
  props: {
51
44
  ...b,
@@ -1 +1 @@
1
- {"version":3,"file":"item.js","sources":["../../../src/components/base-menu/item.tsx"],"sourcesContent":["import React, { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx, useCls, WithRenderProp } from \"../utils\";\nimport { ElementTypeToDOMType } from \"../utils/types\";\nimport { Checkbox } from \"antd\";\n\nimport \"./item.css\";\n\nimport { useRender } from \"@base-ui/react\";\n\nexport type BaseMenuItemProps<\n T extends keyof React.JSX.IntrinsicElements = \"div\"\n> = ComponentPropsWithoutRef<T> & {\n /** Whether the item is disabled */\n disabled?: boolean;\n /** Whether the item represents a dangerous action */\n danger?: boolean;\n /** Whether the item is currently selected */\n selected?: boolean;\n /** Whether the item is currently active/highlighted */\n active?: boolean;\n /** Whether the item has focus */\n focused?: boolean;\n /** Icon to display before the text */\n icon?: React.ReactNode;\n /** Text content of the item */\n children?: React.ReactNode;\n /** Suffix content to display after the text */\n suffix?: React.ReactNode;\n /** Whether to show checkbox */\n showCheckbox?: boolean;\n /** Whether the checkbox is indeterminate */\n indeterminate?: boolean;\n /** Custom render function for the item label */\n labelRender?: (\n props: React.HTMLAttributes<HTMLElement>\n ) => React.ReactElement;\n /** Custom className for different parts */\n classNames?: {\n /** Custom className for the root element */\n root?: string;\n /** Custom className for the icon */\n icon?: string;\n /** Custom className for the text */\n text?: string;\n /** Custom className for the suffix */\n suffix?: string;\n };\n onSelect?: () => void;\n render?: useRender.RenderProp;\n as?: T;\n};\n\nconst BaseMenuItemInner = <T extends keyof React.JSX.IntrinsicElements = \"div\">(\n {\n disabled = false,\n danger = false,\n selected = false,\n active = false,\n focused = false,\n icon,\n children,\n suffix,\n showCheckbox = false,\n indeterminate = false,\n labelRender,\n classNames,\n render,\n onSelect,\n as,\n ...props\n }: BaseMenuItemProps<T>,\n ref: React.ForwardedRef<ElementTypeToDOMType<T>>\n) => {\n const cls = useCls();\n\n const content = (\n <>\n {showCheckbox && (\n <Checkbox\n checked={selected}\n tabIndex={-1}\n indeterminate={indeterminate}\n />\n )}\n {icon && (\n <span className={clsx(cls(\"menu-item-icon\"), classNames?.icon)}>\n {icon}\n </span>\n )}\n {children && (\n <WithRenderProp\n render={labelRender}\n as=\"span\"\n className={clsx(cls(\"menu-item-text\"), classNames?.text)}\n >\n {children}\n </WithRenderProp>\n )}\n {suffix && (\n <span className={clsx(cls(\"menu-item-suffix\"), classNames?.suffix)}>\n {suffix}\n </span>\n )}\n </>\n );\n\n const renderedElement = useRender({\n render: render || undefined,\n props: {\n ...props,\n className: clsx(\n // Base menu item styles\n cls(\"menu-item-base\"),\n showCheckbox && cls(\"menu-item-show-checkbox\"),\n classNames?.root\n ),\n \"data-disabled\": disabled,\n \"data-danger\": danger,\n \"data-selected\": selected,\n \"data-active\": active,\n \"data-focus\": focused,\n \"aria-disabled\": disabled,\n children: content,\n },\n ref: ref as unknown as React.Ref<ElementTypeToDOMType<T>>,\n defaultTagName: as || \"div\",\n });\n\n return renderedElement;\n};\n\nexport const BaseMenuItem = forwardRef(BaseMenuItemInner) as <\n T extends keyof React.JSX.IntrinsicElements = \"div\"\n>(\n props: BaseMenuItemProps<T> & {\n ref?: React.ForwardedRef<ElementTypeToDOMType<T>>;\n }\n) => ReturnType<typeof BaseMenuItemInner>;\n"],"names":["BaseMenuItemInner","disabled","danger","selected","active","focused","icon","children","suffix","showCheckbox","indeterminate","labelRender","classNames","render","onSelect","as","props","ref","cls","useCls","content","jsxs","Fragment","jsx","Checkbox","clsx","WithRenderProp","useRender","BaseMenuItem","forwardRef"],"mappings":";;;;;;;;AAoDA,MAAMA,IAAoB,CACxB;AAAA,EACE,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAA,GAENC,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAb,KACC,gBAAAc;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAASrB;AAAA,QACT,UAAU;AAAA,QACV,eAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGHJ,KACC,gBAAAiB,EAAC,QAAA,EAAK,WAAWE,EAAKP,EAAI,gBAAgB,GAAGN,GAAY,IAAI,GAC1D,UAAAN,EAAA,CACH;AAAA,IAEDC,KACC,gBAAAgB;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,QAAQf;AAAA,QACR,IAAG;AAAA,QACH,WAAWc,EAAKP,EAAI,gBAAgB,GAAGN,GAAY,IAAI;AAAA,QAEtD,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJC,KACC,gBAAAe,EAAC,QAAA,EAAK,WAAWE,EAAKP,EAAI,kBAAkB,GAAGN,GAAY,MAAM,GAC9D,UAAAJ,EAAA,CACH;AAAA,EAAA,GAEJ;AAyBF,SAtBwBmB,EAAU;AAAA,IAChC,QAAQd,KAAU;AAAA,IAClB,OAAO;AAAA,MACL,GAAGG;AAAA,MACH,WAAWS;AAAA;AAAA,QAETP,EAAI,gBAAgB;AAAA,QACpBT,KAAgBS,EAAI,yBAAyB;AAAA,QAC7CN,GAAY;AAAA,MAAA;AAAA,MAEd,iBAAiBX;AAAA,MACjB,eAAeC;AAAA,MACf,iBAAiBC;AAAA,MACjB,eAAeC;AAAA,MACf,cAAcC;AAAA,MACd,iBAAiBJ;AAAA,MACjB,UAAUmB;AAAA,IAAA;AAAA,IAEZ,KAAAH;AAAA,IACA,gBAAgBF,KAAM;AAAA,EAAA,CACvB;AAGH,GAEaa,IAAeC,EAAW7B,CAAiB;"}
1
+ {"version":3,"file":"item.js","sources":["../../../src/components/base-menu/item.tsx"],"sourcesContent":["import React, { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx, useCls, WithRenderProp } from \"../utils\";\nimport { ElementTypeToDOMType } from \"../utils/types\";\nimport { Checkbox } from \"../checkbox\";\n\nimport \"./item.css\";\n\nimport { useRender } from \"@base-ui/react\";\n\nexport type BaseMenuItemProps<T extends keyof React.JSX.IntrinsicElements = \"div\"> =\n ComponentPropsWithoutRef<T> & {\n /** Whether the item is disabled */\n disabled?: boolean;\n /** Whether the item represents a dangerous action */\n danger?: boolean;\n /** Whether the item is currently selected */\n selected?: boolean;\n /** Whether the item is currently active/highlighted */\n active?: boolean;\n /** Whether the item has focus */\n focused?: boolean;\n /** Icon to display before the text */\n icon?: React.ReactNode;\n /** Text content of the item */\n children?: React.ReactNode;\n /** Suffix content to display after the text */\n suffix?: React.ReactNode;\n /** Whether to show checkbox */\n showCheckbox?: boolean;\n /** Whether the checkbox is indeterminate */\n indeterminate?: boolean;\n /** Custom render function for the item label */\n labelRender?: (props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;\n /** Custom className for different parts */\n classNames?: {\n /** Custom className for the root element */\n root?: string;\n /** Custom className for the icon */\n icon?: string;\n /** Custom className for the text */\n text?: string;\n /** Custom className for the suffix */\n suffix?: string;\n };\n onSelect?: () => void;\n render?: useRender.RenderProp;\n as?: T;\n };\n\nconst BaseMenuItemInner = <T extends keyof React.JSX.IntrinsicElements = \"div\">(\n {\n disabled = false,\n danger = false,\n selected = false,\n active = false,\n focused = false,\n icon,\n children,\n suffix,\n showCheckbox = false,\n indeterminate = false,\n labelRender,\n classNames,\n render,\n onSelect,\n as,\n ...props\n }: BaseMenuItemProps<T>,\n ref: React.ForwardedRef<ElementTypeToDOMType<T>>,\n) => {\n const cls = useCls();\n\n const content = (\n <>\n {showCheckbox && <Checkbox checked={selected} tabIndex={-1} indeterminate={indeterminate} />}\n {icon && <span className={clsx(cls(\"menu-item-icon\"), classNames?.icon)}>{icon}</span>}\n {children && (\n <WithRenderProp\n render={labelRender}\n as=\"span\"\n className={clsx(cls(\"menu-item-text\"), classNames?.text)}\n >\n {children}\n </WithRenderProp>\n )}\n {suffix && (\n <span className={clsx(cls(\"menu-item-suffix\"), classNames?.suffix)}>{suffix}</span>\n )}\n </>\n );\n\n const renderedElement = useRender({\n render: render || undefined,\n props: {\n ...props,\n className: clsx(\n // Base menu item styles\n cls(\"menu-item-base\"),\n showCheckbox && cls(\"menu-item-show-checkbox\"),\n classNames?.root,\n ),\n \"data-disabled\": disabled,\n \"data-danger\": danger,\n \"data-selected\": selected,\n \"data-active\": active,\n \"data-focus\": focused,\n \"aria-disabled\": disabled,\n children: content,\n },\n ref: ref as unknown as React.Ref<ElementTypeToDOMType<T>>,\n defaultTagName: as || \"div\",\n });\n\n return renderedElement;\n};\n\nexport const BaseMenuItem = forwardRef(BaseMenuItemInner) as <\n T extends keyof React.JSX.IntrinsicElements = \"div\",\n>(\n props: BaseMenuItemProps<T> & {\n ref?: React.ForwardedRef<ElementTypeToDOMType<T>>;\n },\n) => ReturnType<typeof BaseMenuItemInner>;\n"],"names":["BaseMenuItemInner","disabled","danger","selected","active","focused","icon","children","suffix","showCheckbox","indeterminate","labelRender","classNames","render","onSelect","as","props","ref","cls","useCls","content","jsxs","Fragment","Checkbox","jsx","clsx","WithRenderProp","useRender","BaseMenuItem","forwardRef"],"mappings":";;;;;;;;AAiDA,MAAMA,IAAoB,CACxB;AAAA,EACE,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,UAAAC,IAAW;AAAA,EACX,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,eAAAC,IAAgB;AAAA,EAChB,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAA,GAENC,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAb,uBAAiBc,GAAA,EAAS,SAASpB,GAAU,UAAU,IAAI,eAAAO,GAA8B;AAAA,IACzFJ,KAAQ,gBAAAkB,EAAC,QAAA,EAAK,WAAWC,EAAKP,EAAI,gBAAgB,GAAGN,GAAY,IAAI,GAAI,UAAAN,EAAA,CAAK;AAAA,IAC9EC,KACC,gBAAAiB;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAQf;AAAA,QACR,IAAG;AAAA,QACH,WAAWc,EAAKP,EAAI,gBAAgB,GAAGN,GAAY,IAAI;AAAA,QAEtD,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJC,KACC,gBAAAgB,EAAC,QAAA,EAAK,WAAWC,EAAKP,EAAI,kBAAkB,GAAGN,GAAY,MAAM,GAAI,UAAAJ,EAAA,CAAO;AAAA,EAAA,GAEhF;AAyBF,SAtBwBmB,EAAU;AAAA,IAChC,QAAQd,KAAU;AAAA,IAClB,OAAO;AAAA,MACL,GAAGG;AAAA,MACH,WAAWS;AAAA;AAAA,QAETP,EAAI,gBAAgB;AAAA,QACpBT,KAAgBS,EAAI,yBAAyB;AAAA,QAC7CN,GAAY;AAAA,MAAA;AAAA,MAEd,iBAAiBX;AAAA,MACjB,eAAeC;AAAA,MACf,iBAAiBC;AAAA,MACjB,eAAeC;AAAA,MACf,cAAcC;AAAA,MACd,iBAAiBJ;AAAA,MACjB,UAAUmB;AAAA,IAAA;AAAA,IAEZ,KAAAH;AAAA,IACA,gBAAgBF,KAAM;AAAA,EAAA,CACvB;AAGH,GAEaa,IAAeC,EAAW7B,CAAiB;"}
@@ -1 +1 @@
1
- @layer components{.ds-btn.ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-color-default.ds-btn-variant-dashed:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-background-ghost){background-color:var(--ds-button-bg-secondary)}.ds-btn.ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-background-ghost){background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-top) 0%,var(--ds-button-bg-gradient-bottom) 100%);box-shadow:var(--ds-button-shadow-default),var(--ds-button-shadow-default-inner)}.ds-btn.ds-btn-background-ghost:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-dangerous){background:transparent;box-shadow:none}.ds-btn.ds-btn-color-primary.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous){background-color:var(--ds-color-primary);border:1px solid var(--ds-color-primary);background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-primary-top) 0%,var(--ds-button-bg-gradient-primary-bottom) 100%);box-shadow:var(--ds-button-shadow-solid),var(--ds-button-shadow-solid-inner);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled){background-color:var(--ds-color-error);border:1px solid var(--ds-color-error);background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-primary-top) 0%,var(--ds-button-bg-gradient-primary-bottom) 100%);box-shadow:var(--ds-button-shadow-solid),var(--ds-button-shadow-solid-inner);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}span.ds-btn-icon{display:flex;align-items:center}.ds-btn-negative-margin-wrapper{display:inline-flex;flex-shrink:0}.ds-btn-negative-margin-wrapper,.ds-btn-negative-margin-wrapper.ds-btn-wrapper-large{margin-inline:-1rem}.ds-btn-negative-margin-wrapper.ds-btn-wrapper-small{margin-inline:-.5rem}.ds-btn-loading-icon svg{animation:spin 1s linear infinite}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-background-ghost):is(:hover,:focus-visible){border-color:var(--ds-color-primary-hover);color:var(--ds-color-primary-hover)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled){border-color:var(--ds-control-color-border);color:var(--ds-color-error)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){border-color:var(--ds-color-error-hover);color:var(--ds-color-error-hover)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled):active{border-color:var(--ds-color-error-active);color:var(--ds-color-error-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):is(.ds-btn-color-default.ds-btn-variant-dashed,.ds-btn-background-ghost.ds-btn-variant-outlined,.ds-btn-background-ghost.ds-btn-variant-dashed):is(:hover,:focus-visible){border-color:var(--ds-color-primary-hover);color:var(--ds-color-primary-hover)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-background-ghost):active{border-color:var(--ds-color-primary-active);color:var(--ds-color-primary-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):is(.ds-btn-color-default.ds-btn-variant-dashed,.ds-btn-background-ghost.ds-btn-variant-outlined,.ds-btn-background-ghost.ds-btn-variant-dashed):active{border-color:var(--ds-color-primary-active);color:var(--ds-color-primary-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-primary.ds-btn-variant-solid:is(:hover,:focus-visible){background-color:var(--ds-color-primary-hover);border-color:var(--ds-color-primary-hover);box-shadow:var(--ds-button-shadow-solid-hover),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){background-color:var(--ds-color-error-hover);border-color:var(--ds-color-error-hover);box-shadow:var(--ds-button-shadow-solid-hover),var(--ds-button-shadow-solid-inner)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-primary.ds-btn-variant-solid:active{background-color:var(--ds-color-primary-active);border-color:var(--ds-color-primary-active);box-shadow:var(--ds-button-shadow-solid-active),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):active{background-color:var(--ds-color-error-active);border-color:var(--ds-color-error-active);box-shadow:var(--ds-button-shadow-solid-active),var(--ds-button-shadow-solid-inner)}.ds-btn-no-icon .ds-btn-loading-icon{position:absolute;inset-inline-start:50%;transform:translate(-50%)}.ds-btn-no-icon.ds-btn-loading .ds-btn-loading-icon{transition:opacity 0s}.ds-btn-no-icon.ds-btn-loading>*:not(.ds-btn-loading-icon){transition:opacity 0s;opacity:0}}
1
+ @layer components{.ds-btn.ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-color-default.ds-btn-variant-dashed:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-background-ghost){background-color:var(--ds-button-bg-secondary)}.ds-btn.ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):not(.ds-btn-background-ghost),.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-background-ghost){background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-top) 0%,var(--ds-button-bg-gradient-bottom) 100%);box-shadow:var(--ds-button-shadow-default),var(--ds-button-shadow-default-inner)}.ds-btn.ds-btn-background-ghost:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-dangerous){background:transparent;box-shadow:none}.ds-btn.ds-btn-color-primary.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous){background-color:var(--ds-color-primary);border:1px solid var(--ds-color-primary);background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-primary-top) 0%,var(--ds-button-bg-gradient-primary-bottom) 100%);box-shadow:var(--ds-button-shadow-solid),var(--ds-button-shadow-solid-inner);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled){background-color:var(--ds-color-error);border:1px solid var(--ds-color-error);background-image:linear-gradient(180deg,var(--ds-button-bg-gradient-primary-top) 0%,var(--ds-button-bg-gradient-primary-bottom) 100%);box-shadow:var(--ds-button-shadow-solid),var(--ds-button-shadow-solid-inner);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}span.ds-btn-icon{display:flex;align-items:center}.ds-btn-negative-margin-wrapper{display:inline-flex;flex-shrink:0}.ds-btn-negative-margin-wrapper,.ds-btn-negative-margin-wrapper.ds-btn-wrapper-large{margin-inline:-1rem}.ds-btn-negative-margin-wrapper.ds-btn-wrapper-small{margin-inline:-.5rem}.ds-btn-loading-icon svg{animation:spin 1s linear infinite}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-background-ghost):is(:hover,:focus-visible){border-color:var(--ds-color-primary-hover);color:var(--ds-color-primary-hover)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled){border-color:var(--ds-control-color-border);color:var(--ds-color-error)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){border-color:var(--ds-color-error-hover);color:var(--ds-color-error-hover)}.ds-btn.ds-btn-dangerous.ds-btn-variant-outlined:not(.ds-btn-background-ghost):not(.ds-btn-disabled):not(:disabled):active{border-color:var(--ds-color-error-active);color:var(--ds-color-error-active)}.ds-btn.ds-btn-dangerous.ds-btn-dangerous:is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-disabled):not(:disabled){color:var(--ds-color-error-fg)}.ds-btn.ds-btn-dangerous.ds-btn-dangerous:is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){color:var(--ds-color-error-fg-hover)}.ds-btn.ds-btn-dangerous.ds-btn-dangerous:is(.ds-btn-variant-outlined,.ds-btn-variant-dashed):not(.ds-btn-disabled):not(:disabled):active{color:var(--ds-color-error-fg-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):is(.ds-btn-color-default.ds-btn-variant-dashed,.ds-btn-background-ghost.ds-btn-variant-outlined,.ds-btn-background-ghost.ds-btn-variant-dashed):is(:hover,:focus-visible){border-color:var(--ds-color-primary-hover);color:var(--ds-color-primary-hover)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-default.ds-btn-variant-outlined:not(.ds-btn-background-ghost):active{border-color:var(--ds-color-primary-active);color:var(--ds-color-primary-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous):is(.ds-btn-color-default.ds-btn-variant-dashed,.ds-btn-background-ghost.ds-btn-variant-outlined,.ds-btn-background-ghost.ds-btn-variant-dashed):active{border-color:var(--ds-color-primary-active);color:var(--ds-color-primary-active)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-primary.ds-btn-variant-solid:is(:hover,:focus-visible){background-color:var(--ds-color-primary-hover);border-color:var(--ds-color-primary-hover);box-shadow:var(--ds-button-shadow-solid-hover),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):is(:hover,:focus-visible){background-color:var(--ds-color-error-hover);border-color:var(--ds-color-error-hover);box-shadow:var(--ds-button-shadow-solid-hover),var(--ds-button-shadow-solid-inner)}.ds-btn:not(.ds-btn-disabled):not(:disabled):not(.ds-btn-dangerous).ds-btn-color-primary.ds-btn-variant-solid:active{background-color:var(--ds-color-primary-active);border-color:var(--ds-color-primary-active);box-shadow:var(--ds-button-shadow-solid-active),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-dangerous.ds-btn-variant-solid:not(.ds-btn-disabled):not(:disabled):active{background-color:var(--ds-color-error-active);border-color:var(--ds-color-error-active);box-shadow:var(--ds-button-shadow-solid-active),var(--ds-button-shadow-solid-inner)}.ds-btn.ds-btn-color-link:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text){color:var(--ds-color-primary-fg)}.ds-btn.ds-btn-color-link:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text):is(:hover,:focus-visible){color:var(--ds-color-primary-fg-hover)}.ds-btn.ds-btn-color-link:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text):active{color:var(--ds-color-primary-fg-active)}.ds-btn.ds-btn-color-dangerous:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text){color:var(--ds-color-error-fg)}.ds-btn.ds-btn-color-dangerous:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text):is(:hover,:focus-visible){color:var(--ds-color-error-fg-hover)}.ds-btn.ds-btn-color-dangerous:not(.ds-btn-disabled):not(:disabled):is(.ds-btn-variant-link,.ds-btn-variant-text):active{color:var(--ds-color-error-fg-active)}.ds-btn-no-icon .ds-btn-loading-icon{position:absolute;inset-inline-start:50%;transform:translate(-50%)}.ds-btn-no-icon.ds-btn-loading .ds-btn-loading-icon{transition:opacity 0s}.ds-btn-no-icon.ds-btn-loading>*:not(.ds-btn-loading-icon){transition:opacity 0s;opacity:0}}
@@ -30,10 +30,20 @@ export interface ChoiceListProps<M extends boolean = false> {
30
30
  * @default (item) => [item.value, reactNodeToString(item.label)]
31
31
  */
32
32
  getItemKeywords?: (item: ChoiceListOption) => string[];
33
+ /**
34
+ * Custom label for the "Select All" checkbox
35
+ * @default "Select All"
36
+ */
37
+ selectAllText?: React.ReactNode;
38
+ /**
39
+ * Specify content to show when no result matches
40
+ * @default "No results found."
41
+ */
42
+ notFoundContent?: React.ReactNode;
33
43
  /**
34
44
  * Additional CSS class name
35
45
  */
36
46
  className?: string;
37
47
  }
38
- export declare const ChoiceList: <M extends boolean = false>({ options, multiple, value, defaultValue, onChange, searchProps, showSelectAll, className, placeholder, disabled: disabledProp, status: statusProp, }: ChoiceListProps<M>) => import("react/jsx-runtime").JSX.Element;
48
+ export declare const ChoiceList: <M extends boolean = false>({ options, multiple, value, defaultValue, onChange, searchProps, showSelectAll, selectAllText, notFoundContent, className, placeholder, disabled: disabledProp, status: statusProp, }: ChoiceListProps<M>) => import("react/jsx-runtime").JSX.Element;
39
49
  //# sourceMappingURL=component.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/choice-list/component.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAWjC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,KAAK;IACxD,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,CAAC;IACb,KAAK,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,SAAS,IAAI,GAAG,MAAM,EAAE,GAAG,MAAM,KAAK,IAAI,CAAC;IAC/D,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IACxD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY,CAAC;IACxD;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,MAAM,EAAE,CAAC;IACvD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,OAAO,GAAG,KAAK,EAAE,uJAYnD,eAAe,CAAC,CAAC,CAAC,4CAkKpB,CAAC"}
1
+ {"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/choice-list/component.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAQjC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,KAAK;IACxD,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,CAAC;IACb,KAAK,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,SAAS,IAAI,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,SAAS,IAAI,GAAG,MAAM,EAAE,GAAG,MAAM,KAAK,IAAI,CAAC;IAC/D,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IACxD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY,CAAC;IACxD;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,MAAM,EAAE,CAAC;IACvD;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,OAAO,GAAG,KAAK,EAAE,uLAcnD,eAAe,CAAC,CAAC,CAAC,4CAyJpB,CAAC"}
@@ -1,137 +1,134 @@
1
1
  "use client";
2
- import { jsxs as v, jsx as t } from "react/jsx-runtime";
3
- import { Autocomplete as u } from "@base-ui/react/autocomplete";
4
- import { useMemo as j, useContext as b, useCallback as f } from "react";
5
- import { FormItemInputContext as p } from "antd/es/form/context";
6
- import B from "antd/es/config-provider/DisabledContext";
2
+ import { jsx as l, jsxs as v } from "react/jsx-runtime";
3
+ import { Autocomplete as d } from "@base-ui/react/autocomplete";
4
+ import { useMemo as F, useContext as p, useCallback as f } from "react";
5
+ import L from "antd/es/config-provider/DisabledContext";
6
+ import { FormItemInputContext as x } from "antd/es/form/context";
7
7
  import './style.css';/* empty css */
8
- import { Radio as E } from "../radio/component.js";
9
- import { useControlledState as F } from "../hooks/useControlledState.js";
10
- import { useCls as L } from "../utils/antdUtils.js";
11
- import { Input as P } from "../input/component.js";
12
- import { Checkbox as x } from "../checkbox/component.js";
13
- import { ScrollArea as R } from "../scroll-area/component.js";
14
- const Z = ({
15
- options: o,
16
- multiple: l,
8
+ import { Radio as P } from "../radio/component.js";
9
+ import { useControlledState as R } from "../hooks/useControlledState.js";
10
+ import { useCls as M } from "../utils/antdUtils.js";
11
+ import { clsx as T } from "../utils/cn.js";
12
+ import { Input as _ } from "../input/component.js";
13
+ import { Checkbox as b } from "../checkbox/component.js";
14
+ import { ScrollArea as q } from "../scroll-area/component.js";
15
+ const le = ({
16
+ options: i,
17
+ multiple: r,
17
18
  value: C,
18
19
  defaultValue: g,
19
- onChange: A,
20
- searchProps: I = { placeholder: "Search..." },
21
- showSelectAll: S = !1,
22
- className: M,
23
- placeholder: k = "Search",
24
- disabled: N = !1,
25
- status: T
20
+ onChange: I,
21
+ searchProps: S = { placeholder: "Search..." },
22
+ showSelectAll: A = !1,
23
+ selectAllText: k = "Select all",
24
+ notFoundContent: N = "No results found.",
25
+ className: y,
26
+ placeholder: V = "Search",
27
+ disabled: w = !1,
28
+ status: z
26
29
  }) => {
27
- const [r, n] = F(
28
- C,
29
- A,
30
- g
31
- ), a = j(() => l ? Array.isArray(r) ? r : r ? [r] : [] : Array.isArray(r) ? r.length > 0 ? [r[0]] : [] : r ? [r] : [], [r, l]);
32
- b(p);
33
- const y = b(B), s = N || y, i = L(), V = f(() => {
34
- if (l) {
35
- const e = o.map((c) => c.value).filter(Boolean);
36
- n(e);
30
+ const [t, s] = R(C, I, g), n = F(() => r ? Array.isArray(t) ? t : t ? [t] : [] : Array.isArray(t) ? t.length > 0 ? [t[0]] : [] : t ? [t] : [], [t, r]);
31
+ p(x);
32
+ const D = p(L), c = w || D, o = M(), j = f(() => {
33
+ if (r) {
34
+ const e = i.map((a) => a.value).filter(Boolean);
35
+ s(e);
37
36
  }
38
- }, [l, o, n]), w = f(() => {
39
- l && n([]);
40
- }, [l, n]), D = f(
37
+ }, [r, i, s]), B = f(() => {
38
+ r && s([]);
39
+ }, [r, s]), E = f(
41
40
  (e) => {
42
- if (!s)
43
- if (l) {
44
- const c = a.includes(e) ? a.filter((d) => d !== e) : [.../* @__PURE__ */ new Set([...a, e])];
45
- n(c);
41
+ if (!c)
42
+ if (r) {
43
+ const a = n.includes(e) ? n.filter((u) => u !== e) : [.../* @__PURE__ */ new Set([...n, e])];
44
+ s(a);
46
45
  } else
47
- n(e);
46
+ s(e);
48
47
  },
49
- [s, l, a, n]
48
+ [c, r, n, s]
50
49
  );
51
- return /* @__PURE__ */ v(
52
- u.Root,
50
+ return /* @__PURE__ */ l(
51
+ d.Root,
53
52
  {
54
- items: o,
53
+ items: i,
55
54
  itemToStringValue: (e) => e?.value || "",
56
55
  open: !0,
57
56
  inline: !0,
58
57
  modal: !1,
59
- children: [
60
- /* @__PURE__ */ t(p.Provider, { value: {}, children: /* @__PURE__ */ t(
61
- u.Input,
58
+ children: /* @__PURE__ */ v("div", { className: T(o("choice-list"), y), children: [
59
+ /* @__PURE__ */ l(x.Provider, { value: {}, children: /* @__PURE__ */ l(
60
+ d.Input,
62
61
  {
63
- render: (e) => /* @__PURE__ */ t(
64
- P.Search,
62
+ render: ({ ref: e, ...a }) => /* @__PURE__ */ l(
63
+ _.Search,
65
64
  {
66
- ...e,
67
- ...I,
65
+ ...a,
66
+ ...S,
68
67
  allowClear: !0,
69
- disabled: s,
70
- className: i("choice-list-search"),
71
- placeholder: k
68
+ disabled: c,
69
+ className: o("choice-list-search"),
70
+ placeholder: V
72
71
  }
73
72
  )
74
73
  }
75
74
  ) }),
76
- S && l && o.length > 0 && (() => {
77
- const e = o.map((h) => h.value).filter(Boolean), c = a.filter(
78
- (h) => e.includes(h)
79
- ), d = c.length === e.length && e.length > 0, m = c.length > 0 && c.length < e.length;
80
- return /* @__PURE__ */ t(
75
+ A && r && i.length > 0 && (() => {
76
+ const e = i.map((h) => h.value).filter(Boolean), a = n.filter((h) => e.includes(h)), u = a.length === e.length && e.length > 0, m = a.length > 0 && a.length < e.length;
77
+ return /* @__PURE__ */ l(
81
78
  "div",
82
79
  {
83
- className: i("choice-list-item"),
80
+ className: o("choice-list-item"),
84
81
  onClick: () => {
85
- s || (m || d ? w() : V());
82
+ c || (m || u ? B() : j());
86
83
  },
87
- children: /* @__PURE__ */ t(
88
- x,
84
+ children: /* @__PURE__ */ l(
85
+ b,
89
86
  {
90
87
  tabIndex: -1,
91
- checked: d,
88
+ checked: u,
92
89
  indeterminate: m,
93
- disabled: s,
94
- children: "Select All"
90
+ disabled: c,
91
+ children: k
95
92
  }
96
93
  )
97
94
  }
98
95
  );
99
96
  })(),
100
- /* @__PURE__ */ v(R, { className: i("choice-list-items"), fadeEdges: !0, children: [
101
- /* @__PURE__ */ t(u.List, { children: (e) => /* @__PURE__ */ t(
102
- u.Item,
97
+ /* @__PURE__ */ v(q, { className: o("choice-list-items"), fadeEdges: !0, children: [
98
+ /* @__PURE__ */ l(d.List, { children: (e) => /* @__PURE__ */ l(
99
+ d.Item,
103
100
  {
104
- className: i("choice-list-item"),
101
+ className: o("choice-list-item"),
105
102
  value: e.value || "",
106
- "data-in-choice": e.value ? a.includes(e.value) : !1,
107
- onClick: () => e.value && D(e.value),
108
- children: l ? /* @__PURE__ */ t(
109
- x,
103
+ "data-in-choice": e.value ? n.includes(e.value) : !1,
104
+ onClick: () => e.value && E(e.value),
105
+ children: r ? /* @__PURE__ */ l(
106
+ b,
110
107
  {
111
108
  tabIndex: -1,
112
- checked: e.value ? a.includes(e.value) : !1,
113
- disabled: s,
109
+ checked: e.value ? n.includes(e.value) : !1,
110
+ disabled: c,
114
111
  children: e.label
115
112
  }
116
- ) : /* @__PURE__ */ t(
117
- E,
113
+ ) : /* @__PURE__ */ l(
114
+ P,
118
115
  {
119
116
  tabIndex: -1,
120
- checked: e.value ? a.includes(e.value) : !1,
121
- disabled: s,
117
+ checked: e.value ? n.includes(e.value) : !1,
118
+ disabled: c,
122
119
  children: e.label
123
120
  }
124
121
  )
125
122
  },
126
123
  e.value
127
124
  ) }),
128
- /* @__PURE__ */ t(u.Empty, { className: i("choice-list-empty"), children: "No results found." })
125
+ /* @__PURE__ */ l(d.Empty, { className: o("choice-list-empty"), children: N })
129
126
  ] })
130
- ]
127
+ ] })
131
128
  }
132
129
  );
133
130
  };
134
131
  export {
135
- Z as ChoiceList
132
+ le as ChoiceList
136
133
  };
137
134
  //# sourceMappingURL=component.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"component.js","sources":["../../../src/components/choice-list/component.tsx"],"sourcesContent":["\"use client\";\nimport { Autocomplete } from \"@base-ui/react/autocomplete\";\nimport { Input } from \"../input\";\nimport { useCallback, useMemo, useContext } from \"react\";\nimport { useCls, cn } from \"../utils\";\nimport { useControlledState } from \"../hooks\";\nimport { Radio } from \"../radio\";\nimport { Checkbox } from \"../checkbox\";\nimport { ScrollArea } from \"../scroll-area\";\n\nimport { FormItemInputContext } from \"antd/es/form/context\";\nimport DisabledContext from \"antd/es/config-provider/DisabledContext\";\n\nexport type ChoiceListOption = {\n label: React.ReactNode;\n value?: string;\n};\n\nimport \"./style.css\";\n\nexport interface ChoiceListProps<M extends boolean = false> {\n options: ChoiceListOption[];\n multiple?: M;\n value?: M extends true ? string[] : string;\n defaultValue?: M extends true ? string[] : string;\n onChange?: (value: M extends true ? string[] : string) => void;\n searchProps?: React.ComponentProps<typeof Input.Search>;\n /**\n * Show select all option when in multiple mode\n * @default false\n */\n showSelectAll?: boolean;\n placeholder?: string;\n /**\n * Whether the choice list is disabled\n * @default false\n */\n disabled?: boolean;\n /**\n * Validation status\n */\n status?: \"error\" | \"warning\" | \"success\" | \"validating\";\n /**\n * Function to extract keywords from the item for search filtering\n * @default (item) => [item.value, reactNodeToString(item.label)]\n */\n getItemKeywords?: (item: ChoiceListOption) => string[];\n /**\n * Additional CSS class name\n */\n className?: string;\n}\n\nexport const ChoiceList = <M extends boolean = false>({\n options,\n multiple,\n value,\n defaultValue,\n onChange,\n searchProps = { placeholder: \"Search...\" },\n showSelectAll = false,\n className,\n placeholder = \"Search\",\n disabled: disabledProp = false,\n status: statusProp,\n}: ChoiceListProps<M>) => {\n const [internalValue, setInternalValue] = useControlledState(\n value,\n onChange,\n defaultValue\n );\n\n const usedValue = useMemo(() => {\n if (multiple) {\n // Ensure we always return an array for multiple mode\n if (Array.isArray(internalValue)) {\n return internalValue;\n }\n return internalValue ? [internalValue as string] : [];\n } else {\n // For single mode, convert to array for consistent usage\n if (Array.isArray(internalValue)) {\n return internalValue.length > 0 ? [internalValue[0]] : [];\n }\n return internalValue ? [internalValue as string] : [];\n }\n }, [internalValue, multiple]);\n\n // Get form context values\n const { status: contextStatus } = useContext(FormItemInputContext);\n const contextDisabled = useContext(DisabledContext);\n\n // Merge context values with props\n const mergedStatus = statusProp || contextStatus;\n const disabled = disabledProp || contextDisabled;\n\n const cls = useCls();\n\n const handleSelectAll = useCallback(() => {\n if (multiple) {\n const allValues = options\n .map((item) => item.value)\n .filter(Boolean) as string[];\n setInternalValue(allValues as M extends true ? string[] : string);\n }\n }, [multiple, options, setInternalValue]);\n\n const handleDeselectAll = useCallback(() => {\n if (multiple) {\n setInternalValue([] as M extends true ? string[] : string);\n }\n }, [multiple, setInternalValue]);\n\n const handleItemSelect = useCallback(\n (selectedValue: string) => {\n if (disabled) return;\n if (multiple) {\n const newValues = usedValue.includes(selectedValue)\n ? usedValue.filter((v) => v !== selectedValue)\n : [...new Set([...usedValue, selectedValue])];\n setInternalValue(newValues as M extends true ? string[] : string);\n } else {\n setInternalValue(selectedValue as M extends true ? string[] : string);\n }\n },\n [disabled, multiple, usedValue, setInternalValue]\n );\n\n return (\n <Autocomplete.Root\n items={options}\n itemToStringValue={(item) => item?.value || \"\"}\n open={true}\n inline\n modal={false}\n >\n <FormItemInputContext.Provider value={{}}>\n <Autocomplete.Input\n render={(props) => (\n <Input.Search\n {...props}\n {...searchProps}\n allowClear\n disabled={disabled}\n className={cls(\"choice-list-search\")}\n placeholder={placeholder}\n />\n )}\n />\n </FormItemInputContext.Provider>\n {showSelectAll &&\n multiple &&\n options.length > 0 &&\n (() => {\n const allValues = options\n .map((item) => item.value)\n .filter(Boolean) as string[];\n const selectedFromAll = usedValue.filter((val) =>\n allValues.includes(val)\n );\n const checked =\n selectedFromAll.length === allValues.length && allValues.length > 0;\n const indeterminate =\n selectedFromAll.length > 0 &&\n selectedFromAll.length < allValues.length;\n\n return (\n <div\n className={cls(\"choice-list-item\")}\n onClick={() => {\n if (disabled) return;\n if (indeterminate || checked) {\n handleDeselectAll();\n } else {\n handleSelectAll();\n }\n }}\n >\n <Checkbox\n tabIndex={-1}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n >\n Select All\n </Checkbox>\n </div>\n );\n })()}\n <ScrollArea className={cls(\"choice-list-items\")} fadeEdges>\n <Autocomplete.List>\n {(item) => (\n <Autocomplete.Item\n key={item.value}\n className={cls(\"choice-list-item\")}\n value={item.value || \"\"}\n data-in-choice={\n item.value ? usedValue.includes(item.value) : false\n }\n onClick={() => item.value && handleItemSelect(item.value)}\n >\n {multiple ? (\n <Checkbox\n tabIndex={-1}\n checked={item.value ? usedValue.includes(item.value) : false}\n disabled={disabled}\n >\n {item.label}\n </Checkbox>\n ) : (\n <Radio\n tabIndex={-1}\n checked={item.value ? usedValue.includes(item.value) : false}\n disabled={disabled}\n >\n {item.label}\n </Radio>\n )}\n </Autocomplete.Item>\n )}\n </Autocomplete.List>\n <Autocomplete.Empty className={cls(\"choice-list-empty\")}>\n No results found.\n </Autocomplete.Empty>\n </ScrollArea>\n </Autocomplete.Root>\n );\n};\n"],"names":["ChoiceList","options","multiple","value","defaultValue","onChange","searchProps","showSelectAll","className","placeholder","disabledProp","statusProp","internalValue","setInternalValue","useControlledState","usedValue","useMemo","useContext","FormItemInputContext","contextDisabled","DisabledContext","disabled","cls","useCls","handleSelectAll","useCallback","allValues","item","handleDeselectAll","handleItemSelect","selectedValue","newValues","v","jsxs","Autocomplete","jsx","props","Input","selectedFromAll","val","checked","indeterminate","Checkbox","ScrollArea","Radio"],"mappings":"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"}
1
+ {"version":3,"file":"component.js","sources":["../../../src/components/choice-list/component.tsx"],"sourcesContent":["\"use client\";\nimport { Autocomplete } from \"@base-ui/react/autocomplete\";\nimport { useCallback, useContext, useMemo } from \"react\";\nimport { Checkbox } from \"../checkbox\";\nimport { useControlledState } from \"../hooks\";\nimport { Input } from \"../input\";\nimport { Radio } from \"../radio\";\nimport { ScrollArea } from \"../scroll-area\";\nimport { clsx, useCls } from \"../utils\";\n\nimport DisabledContext from \"antd/es/config-provider/DisabledContext\";\nimport { FormItemInputContext } from \"antd/es/form/context\";\n\nexport type ChoiceListOption = {\n label: React.ReactNode;\n value?: string;\n};\n\nimport \"./style.css\";\n\nexport interface ChoiceListProps<M extends boolean = false> {\n options: ChoiceListOption[];\n multiple?: M;\n value?: M extends true ? string[] : string;\n defaultValue?: M extends true ? string[] : string;\n onChange?: (value: M extends true ? string[] : string) => void;\n searchProps?: React.ComponentProps<typeof Input.Search>;\n /**\n * Show select all option when in multiple mode\n * @default false\n */\n showSelectAll?: boolean;\n placeholder?: string;\n /**\n * Whether the choice list is disabled\n * @default false\n */\n disabled?: boolean;\n /**\n * Validation status\n */\n status?: \"error\" | \"warning\" | \"success\" | \"validating\";\n /**\n * Function to extract keywords from the item for search filtering\n * @default (item) => [item.value, reactNodeToString(item.label)]\n */\n getItemKeywords?: (item: ChoiceListOption) => string[];\n /**\n * Custom label for the \"Select All\" checkbox\n * @default \"Select All\"\n */\n selectAllText?: React.ReactNode;\n /**\n * Specify content to show when no result matches\n * @default \"No results found.\"\n */\n notFoundContent?: React.ReactNode;\n /**\n * Additional CSS class name\n */\n className?: string;\n}\n\nexport const ChoiceList = <M extends boolean = false>({\n options,\n multiple,\n value,\n defaultValue,\n onChange,\n searchProps = { placeholder: \"Search...\" },\n showSelectAll = false,\n selectAllText = \"Select all\",\n notFoundContent = \"No results found.\",\n className,\n placeholder = \"Search\",\n disabled: disabledProp = false,\n status: statusProp,\n}: ChoiceListProps<M>) => {\n const [internalValue, setInternalValue] = useControlledState(value, onChange, defaultValue);\n\n const usedValue = useMemo(() => {\n if (multiple) {\n // Ensure we always return an array for multiple mode\n if (Array.isArray(internalValue)) {\n return internalValue;\n }\n return internalValue ? [internalValue as string] : [];\n } else {\n // For single mode, convert to array for consistent usage\n if (Array.isArray(internalValue)) {\n return internalValue.length > 0 ? [internalValue[0]] : [];\n }\n return internalValue ? [internalValue as string] : [];\n }\n }, [internalValue, multiple]);\n\n // Get form context values\n const { status: contextStatus } = useContext(FormItemInputContext);\n const contextDisabled = useContext(DisabledContext);\n\n // Merge context values with props\n const _mergedStatus = statusProp || contextStatus;\n const disabled = disabledProp || contextDisabled;\n\n const cls = useCls();\n\n const handleSelectAll = useCallback(() => {\n if (multiple) {\n const allValues = options.map((item) => item.value).filter(Boolean) as string[];\n setInternalValue(allValues as M extends true ? string[] : string);\n }\n }, [multiple, options, setInternalValue]);\n\n const handleDeselectAll = useCallback(() => {\n if (multiple) {\n setInternalValue([] as M extends true ? string[] : string);\n }\n }, [multiple, setInternalValue]);\n\n const handleItemSelect = useCallback(\n (selectedValue: string) => {\n if (disabled) return;\n if (multiple) {\n const newValues = usedValue.includes(selectedValue)\n ? usedValue.filter((v) => v !== selectedValue)\n : [...new Set([...usedValue, selectedValue])];\n setInternalValue(newValues as M extends true ? string[] : string);\n } else {\n setInternalValue(selectedValue as M extends true ? string[] : string);\n }\n },\n [disabled, multiple, usedValue, setInternalValue],\n );\n\n return (\n <Autocomplete.Root\n items={options}\n itemToStringValue={(item) => item?.value || \"\"}\n open={true}\n inline\n modal={false}\n >\n <div className={clsx(cls(\"choice-list\"), className)}>\n <FormItemInputContext.Provider value={{}}>\n <Autocomplete.Input\n /** Don't pass ref here cause Input.Search need InputRef */\n render={({ ref: _ref, ...rest }) => {\n return (\n <Input.Search\n {...rest}\n {...searchProps}\n allowClear\n disabled={disabled}\n className={cls(\"choice-list-search\")}\n placeholder={placeholder}\n />\n );\n }}\n />\n </FormItemInputContext.Provider>\n {showSelectAll &&\n multiple &&\n options.length > 0 &&\n (() => {\n const allValues = options.map((item) => item.value).filter(Boolean) as string[];\n const selectedFromAll = usedValue.filter((val) => allValues.includes(val));\n const checked = selectedFromAll.length === allValues.length && allValues.length > 0;\n const indeterminate =\n selectedFromAll.length > 0 && selectedFromAll.length < allValues.length;\n\n return (\n <div\n className={cls(\"choice-list-item\")}\n onClick={() => {\n if (disabled) return;\n if (indeterminate || checked) {\n handleDeselectAll();\n } else {\n handleSelectAll();\n }\n }}\n >\n <Checkbox\n tabIndex={-1}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n >\n {selectAllText}\n </Checkbox>\n </div>\n );\n })()}\n <ScrollArea className={cls(\"choice-list-items\")} fadeEdges>\n <Autocomplete.List>\n {(item) => (\n <Autocomplete.Item\n key={item.value}\n className={cls(\"choice-list-item\")}\n value={item.value || \"\"}\n data-in-choice={item.value ? usedValue.includes(item.value) : false}\n onClick={() => item.value && handleItemSelect(item.value)}\n >\n {multiple ? (\n <Checkbox\n tabIndex={-1}\n checked={item.value ? usedValue.includes(item.value) : false}\n disabled={disabled}\n >\n {item.label}\n </Checkbox>\n ) : (\n <Radio\n tabIndex={-1}\n checked={item.value ? usedValue.includes(item.value) : false}\n disabled={disabled}\n >\n {item.label}\n </Radio>\n )}\n </Autocomplete.Item>\n )}\n </Autocomplete.List>\n <Autocomplete.Empty className={cls(\"choice-list-empty\")}>\n {notFoundContent}\n </Autocomplete.Empty>\n </ScrollArea>\n </div>\n </Autocomplete.Root>\n );\n};\n"],"names":["ChoiceList","options","multiple","value","defaultValue","onChange","searchProps","showSelectAll","selectAllText","notFoundContent","className","placeholder","disabledProp","statusProp","internalValue","setInternalValue","useControlledState","usedValue","useMemo","useContext","FormItemInputContext","contextDisabled","DisabledContext","disabled","cls","useCls","handleSelectAll","useCallback","allValues","item","handleDeselectAll","handleItemSelect","selectedValue","newValues","v","jsx","Autocomplete","jsxs","clsx","_ref","rest","Input","selectedFromAll","val","checked","indeterminate","Checkbox","ScrollArea","Radio"],"mappings":"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"}
@@ -1 +1 @@
1
- @layer components{.ds-choice-list{display:flex;flex-direction:column}.ds-choice-list-search{flex-grow:0;margin-bottom:.25rem;flex-shrink:0}.ds-choice-list-list{flex-grow:1;flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-choice-list-item{padding:.375rem .75rem;border-radius:var(--ds-border-radius-sm);transition:all .3s var(--ds-motion-ease-out);cursor:pointer;display:flex;align-items:center}.ds-choice-list-item:focus{outline:none}.ds-choice-list-item:hover{background:var(--ds-control-item-bg-hover)}.ds-choice-list-item:active,.ds-choice-list-item:focus,.ds-choice-list-item[data-focus=true],.ds-choice-list-item[data-selected=true]{background:var(--ds-control-item-bg-active)}.ds-choice-list-item[data-disabled=true]{pointer-events:none;color:var(--ds-color-text-disabled)}.ds-choice-list-item[data-danger=true]{color:var(--ds-color-error)}.ds-choice-list-item[data-danger=true]:hover{background:var(--ds-color-error-bg)}.ds-choice-list-item[data-danger=true]:active,.ds-choice-list-item[data-danger=true]:focus,.ds-choice-list-item[data-danger=true][data-focus=true]{background:var(--ds-color-error-bg-hover)}.ds-choice-list-empty{padding:.375rem .75rem;color:var(--ds-color-text-tertiary)}}
1
+ @layer components{.ds-choice-list{display:flex;flex-direction:column}.ds-choice-list-search{flex-grow:0;margin-bottom:.25rem;flex-shrink:0}.ds-choice-list-list{flex-grow:1;flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-choice-list-item{padding:.375rem .75rem;border-radius:var(--ds-border-radius-sm);transition:all .3s var(--ds-motion-ease-out);cursor:pointer;display:flex;align-items:center}.ds-choice-list-item:focus{outline:none}.ds-choice-list-item:hover{background:var(--ds-control-item-bg-hover)}.ds-choice-list-item:active,.ds-choice-list-item:focus,.ds-choice-list-item[data-focus=true],.ds-choice-list-item[data-selected=true]{background:var(--ds-control-item-bg-active)}.ds-choice-list-item[data-disabled=true]{pointer-events:none;color:var(--ds-color-text-disabled)}.ds-choice-list-item[data-danger=true]{color:var(--ds-color-error)}.ds-choice-list-item[data-danger=true]:hover{background:var(--ds-color-error-bg)}.ds-choice-list-item[data-danger=true]:active,.ds-choice-list-item[data-danger=true]:focus,.ds-choice-list-item[data-danger=true][data-focus=true]{background:var(--ds-color-error-bg-hover)}.ds-choice-list-empty{padding:.375rem .75rem;color:var(--ds-color-text-tertiary)}.ds-choice-list-empty:empty{display:none}}
@@ -55,6 +55,13 @@ export interface ComboboxProps<T extends React.Key, M extends boolean, O extends
55
55
  /** Custom render for options */
56
56
  optionRender?: (option: ComboboxOption<T, O>, props: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
57
57
  /** Filter function for search */
58
+ /**
59
+ * Filter function for search
60
+ * - `true` or `undefined`: default filtering (splits by tokenSeparators if provided)
61
+ * - `false`: disables filtering
62
+ * - custom function: `(input, option) => boolean`
63
+ * @default true
64
+ */
58
65
  filterOption?: boolean | ((input: string, option: ComboboxOption<T, O>) => boolean);
59
66
  /** Callback when search input changes */
60
67
  onSearch?: (value: string) => void;
@@ -87,8 +94,32 @@ export interface ComboboxProps<T extends React.Key, M extends boolean, O extends
87
94
  * Render function for the option label
88
95
  */
89
96
  optionLabelRender?: (option: ComboboxOption<T, O>, props?: React.HTMLAttributes<HTMLElement>) => React.ReactElement;
97
+ /**
98
+ * Whether the popup width should match the trigger width.
99
+ * When `false`, the popup can exceed the trigger width to fit long option labels.
100
+ * @default true
101
+ */
102
+ popupMatchSelectWidth?: boolean;
103
+ /**
104
+ * Allow adding items by typing the exact label or value and pressing Enter.
105
+ * @default false
106
+ */
107
+ addOnEnter?: boolean;
108
+ /**
109
+ * Characters to split input by when adding multiple items on Enter.
110
+ * Only applies when `addOnEnter` and `multiple` are true.
111
+ * @default undefined
112
+ */
113
+ tokenSeparators?: string[];
114
+ /**
115
+ * Automatically highlight the first matching item while filtering.
116
+ * When enabled in single-select mode, Enter selects the highlighted
117
+ * item natively and `addOnEnter` is ignored to avoid conflicts.
118
+ * @default true
119
+ */
120
+ autoHighlight?: boolean;
90
121
  }
91
- declare const ComboboxInner: <T extends React.Key, M extends boolean, O extends Record<string, unknown> = {}>({ options, value: controlledValue, defaultValue, onChange, placeholder, disabled: disabledProp, status: statusProp, allowClear, multiple, showSearch: _showSearch, open: controlledOpen, onOpenChange, className, classNames, size, optionRender, onSearch, clearIcon, suffixIcon, showSelectAll, optionLabelRender, getOptionKeywords: _getOptionKeywords, ...rest }: ComboboxProps<T, M, O>, ref: React.ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
122
+ declare const ComboboxInner: <T extends React.Key, M extends boolean, O extends Record<string, unknown> = {}>({ options, value: controlledValue, defaultValue, onChange, placeholder, disabled: disabledProp, status: statusProp, allowClear, multiple, showSearch: _showSearch, open: controlledOpen, onOpenChange, className, classNames, size, optionRender, onSearch, clearIcon, suffixIcon, placement, showSelectAll, optionLabelRender, getOptionKeywords: _getOptionKeywords, popupMatchSelectWidth, addOnEnter, tokenSeparators, autoHighlight, filterOption, ...rest }: ComboboxProps<T, M, O>, ref: React.ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
92
123
  export declare const Combobox: <T extends React.Key, M extends boolean, O extends Record<string, unknown> = {}>(props: ComboboxProps<T, M, O> & {
93
124
  ref?: ForwardedRef<HTMLDivElement>;
94
125
  }) => ReturnType<typeof ComboboxInner>;
@@ -1 +1 @@
1
- {"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/component.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/component.tsx"],"names":[],"mappings":"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"}