@mage-ui/components 1.0.69 → 1.0.71

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 (105) hide show
  1. package/dist/components/controls/checkbox/Checkbox.d.mts +1 -1
  2. package/dist/components/controls/checkbox/Checkbox.d.mts.map +1 -1
  3. package/dist/components/controls/checkbox/Checkbox.mjs +1 -1
  4. package/dist/components/controls/checkbox/Checkbox.mjs.map +1 -1
  5. package/dist/components/controls/dropdown/DropdownTargetTextInput.d.mts +2 -0
  6. package/dist/components/controls/dropdown/DropdownTargetTextInput.d.mts.map +1 -1
  7. package/dist/components/controls/dropdown/DropdownTargetTextInput.mjs +1 -1
  8. package/dist/components/controls/dropdown/DropdownTargetTextInput.mjs.map +1 -1
  9. package/dist/components/controls/dropdown/combobox/Combobox.d.mts +3 -0
  10. package/dist/components/controls/dropdown/combobox/Combobox.d.mts.map +1 -1
  11. package/dist/components/controls/dropdown/combobox/Combobox.mjs +1 -1
  12. package/dist/components/controls/dropdown/combobox/Combobox.mjs.map +1 -1
  13. package/dist/components/controls/dropdown/combobox/ComboboxOptions.mjs +1 -1
  14. package/dist/components/controls/dropdown/combobox/ComboboxOptions.mjs.map +1 -1
  15. package/dist/components/controls/dropdown/select/Select.d.mts +2 -0
  16. package/dist/components/controls/dropdown/select/Select.d.mts.map +1 -1
  17. package/dist/components/controls/dropdown/select/Select.mjs +1 -1
  18. package/dist/components/controls/dropdown/select/Select.mjs.map +1 -1
  19. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTable.d.mts +64 -0
  20. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTable.d.mts.map +1 -0
  21. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTable.mjs +2 -0
  22. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTable.mjs.map +1 -0
  23. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableBody.mjs +2 -0
  24. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableBody.mjs.map +1 -0
  25. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableBulkBar.mjs +2 -0
  26. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableBulkBar.mjs.map +1 -0
  27. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableColumns.mjs +2 -0
  28. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableColumns.mjs.map +1 -0
  29. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableHeader.mjs +2 -0
  30. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableHeader.mjs.map +1 -0
  31. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTablePageSize.d.mts +20 -0
  32. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTablePageSize.d.mts.map +1 -0
  33. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTablePageSize.mjs +2 -0
  34. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTablePageSize.mjs.map +1 -0
  35. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableRootContainer.mjs +2 -0
  36. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableRootContainer.mjs.map +1 -0
  37. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableSlotRow.d.mts +24 -0
  38. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableSlotRow.d.mts.map +1 -0
  39. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableSlotRow.mjs +2 -0
  40. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableSlotRow.mjs.map +1 -0
  41. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableViewport.mjs +2 -0
  42. package/dist/components/data-display/datatables/datatable-stateless/StatelessDataTableViewport.mjs.map +1 -0
  43. package/dist/components/data-display/datatables/datatable-stateless/index.d.mts +6 -0
  44. package/dist/components/data-display/datatables/datatable-stateless/useStatelessDataTable.mjs +2 -0
  45. package/dist/components/data-display/datatables/datatable-stateless/useStatelessDataTable.mjs.map +1 -0
  46. package/dist/components/data-display/datatables/datatable-stateless/useStatelessDataTableContext.d.mts +21 -0
  47. package/dist/components/data-display/datatables/datatable-stateless/useStatelessDataTableContext.d.mts.map +1 -0
  48. package/dist/components/data-display/datatables/datatable-stateless/useStatelessDataTableContext.mjs +2 -0
  49. package/dist/components/data-display/datatables/datatable-stateless/useStatelessDataTableContext.mjs.map +1 -0
  50. package/dist/components/data-display/datatables/index.d.mts +5 -0
  51. package/dist/components/data-display/index.d.mts +15 -9
  52. package/dist/components/data-display/kanban/Kanban.d.mts +7 -1
  53. package/dist/components/data-display/kanban/Kanban.d.mts.map +1 -1
  54. package/dist/components/data-display/kanban/Kanban.mjs +1 -1
  55. package/dist/components/data-display/kanban/Kanban.mjs.map +1 -1
  56. package/dist/components/data-display/kanban/KanbanCard.mjs +1 -1
  57. package/dist/components/data-display/kanban/KanbanCard.mjs.map +1 -1
  58. package/dist/components/data-display/table/Table.d.mts +1 -1
  59. package/dist/components/data-display/table/Table.mjs.map +1 -1
  60. package/dist/components/data-display/table/TableBody.d.mts +3 -3
  61. package/dist/components/data-display/table/TableBody.d.mts.map +1 -1
  62. package/dist/components/data-display/table/TableBody.mjs +1 -1
  63. package/dist/components/data-display/table/TableBody.mjs.map +1 -1
  64. package/dist/components/data-display/table/TableCaption.d.mts +3 -3
  65. package/dist/components/data-display/table/TableCaption.d.mts.map +1 -1
  66. package/dist/components/data-display/table/TableCaption.mjs.map +1 -1
  67. package/dist/components/data-display/table/TableCell.d.mts +3 -4
  68. package/dist/components/data-display/table/TableCell.d.mts.map +1 -1
  69. package/dist/components/data-display/table/TableCell.mjs.map +1 -1
  70. package/dist/components/data-display/table/TableFoot.d.mts +3 -3
  71. package/dist/components/data-display/table/TableFoot.d.mts.map +1 -1
  72. package/dist/components/data-display/table/TableFoot.mjs.map +1 -1
  73. package/dist/components/data-display/table/TableHead.d.mts +3 -3
  74. package/dist/components/data-display/table/TableHead.d.mts.map +1 -1
  75. package/dist/components/data-display/table/TableHead.mjs.map +1 -1
  76. package/dist/components/data-display/table/TableHeaderCell.d.mts +3 -3
  77. package/dist/components/data-display/table/TableHeaderCell.d.mts.map +1 -1
  78. package/dist/components/data-display/table/TableHeaderCell.mjs.map +1 -1
  79. package/dist/components/data-display/table/{TableTypes.d.mts → TableRoot.d.mts} +4 -4
  80. package/dist/components/data-display/table/TableRoot.d.mts.map +1 -0
  81. package/dist/components/data-display/table/TableRoot.mjs.map +1 -1
  82. package/dist/components/data-display/table/TableRow.d.mts +3 -3
  83. package/dist/components/data-display/table/TableRow.d.mts.map +1 -1
  84. package/dist/components/data-display/table/TableRow.mjs.map +1 -1
  85. package/dist/components/index.d.mts +15 -9
  86. package/dist/components/misc/scroll-area/ScrollArea.d.mts +1 -1
  87. package/dist/components/misc/scroll-area/ScrollArea.d.mts.map +1 -1
  88. package/dist/components/misc/scroll-area/ScrollArea.mjs.map +1 -1
  89. package/dist/components/misc/scroll-area-autosize/ScrollAreaAutosize.mjs +1 -1
  90. package/dist/components/misc/scroll-area-autosize/ScrollAreaAutosize.mjs.map +1 -1
  91. package/dist/components/misc/virtual/Virtual.d.mts +2 -1
  92. package/dist/components/misc/virtual/Virtual.d.mts.map +1 -1
  93. package/dist/components/misc/virtual/Virtual.mjs +1 -1
  94. package/dist/components/misc/virtual/Virtual.mjs.map +1 -1
  95. package/dist/components/navigations/index.d.mts +1 -0
  96. package/dist/components/navigations/pagination/Pagination.d.mts +35 -0
  97. package/dist/components/navigations/pagination/Pagination.d.mts.map +1 -0
  98. package/dist/components/navigations/pagination/Pagination.mjs +2 -0
  99. package/dist/components/navigations/pagination/Pagination.mjs.map +1 -0
  100. package/dist/hooks/useElementOuterSize.mjs +2 -0
  101. package/dist/hooks/useElementOuterSize.mjs.map +1 -0
  102. package/dist/index.d.mts +16 -10
  103. package/dist/index.mjs +1 -1
  104. package/package.json +3 -2
  105. package/dist/components/data-display/table/TableTypes.d.mts.map +0 -1
@@ -3,6 +3,7 @@ import { ComponentProps, ReactNode } from "react";
3
3
 
4
4
  //#region src/components/controls/checkbox/Checkbox.d.ts
5
5
  type CheckboxProps = Omit<ComponentProps<'input'>, 'size' | 'children'> & {
6
+ indeterminate?: boolean;
6
7
  label?: ReactNode;
7
8
  error?: string;
8
9
  classNames?: {
@@ -28,7 +29,6 @@ declare const Checkbox: {
28
29
  hiddenLabel,
29
30
  error,
30
31
  required,
31
- value,
32
32
  ...props
33
33
  }: CheckboxProps): ReactNode;
34
34
  displayName: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.d.mts","names":[],"sources":["../../../../src/components/controls/checkbox/Checkbox.tsx"],"mappings":";;;;KAsBY,aAAA,GAAgB,IAAA,CAC1B,cAAA;EAGA,KAAA,GAAQ,SAAA;EACR,KAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,KAAA;IACA,IAAA;IACA,KAAA;IACA,IAAA;IACA,SAAA;IACA,YAAA;IACA,aAAA;IACA,KAAA;IACA,WAAA;IACA,KAAA;EAAA;EAEF,WAAA;AAAA;AAAA,cAGW,QAAA;EAAA;;;;;;;;KAQV,aAAA,GAAgB,SAAA"}
1
+ {"version":3,"file":"Checkbox.d.mts","names":[],"sources":["../../../../src/components/controls/checkbox/Checkbox.tsx"],"mappings":";;;;KAsBY,aAAA,GAAgB,IAAA,CAC1B,cAAA;EAGA,aAAA;EACA,KAAA,GAAQ,SAAA;EACR,KAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,KAAA;IACA,IAAA;IACA,KAAA;IACA,IAAA;IACA,SAAA;IACA,YAAA;IACA,aAAA;IACA,KAAA;IACA,WAAA;IACA,KAAA;EAAA;EAEF,WAAA;AAAA;AAAA,cAGW,QAAA;EAAA;;;;;;;KAOV,aAAA,GAAgB,SAAA"}
@@ -1,2 +1,2 @@
1
- import{CheckboxGroup as e}from"../checkbox-group/CheckboxGroup.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{checkbox as n,checkboxBody as r,checkboxBodyError as i,checkboxDescription as a,checkboxError as o,checkboxIcon as s,checkboxInner as c,checkboxInput as l,checkboxLabel as u,checkboxLabelRequired as d,checkboxLabelWrapper as f,checkboxRoot as p}from"@mage-ui/styled-system/recipes";import{Checkbox as m}from"@mantine/core";import{Fragment as h,jsx as g,jsxs as _}from"react/jsx-runtime";import{visuallyHidden as v}from"@mage-ui/styled-system/patterns";const y=({classNames:e,label:y,hiddenLabel:b,error:x,required:S,value:C,...w})=>g(m,{classNames:{root:t(e?.checkbox??n(),e?.root??p()),input:t(e?.input??l(),`peer`),icon:e?.icon??s(),inner:e?.inner??c(),body:t(e?.body??r(),x&&(e?.bodyError??i())),labelWrapper:e?.labelWrapper??f(),label:t(e?.label??u(),b&&v()),description:e?.description??a(),error:e?.error??o()},label:_(h,{children:[y,g(()=>S?_(`span`,{className:e?.labelRequired??d(),children:[` `,`*`]}):null,{})]}),checked:!!C,...w});y.displayName=`Checkbox`,y.Group=e;export{y as Checkbox};
1
+ import{CheckboxGroup as e}from"../checkbox-group/CheckboxGroup.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{checkbox as n,checkboxBody as r,checkboxBodyError as i,checkboxDescription as a,checkboxError as o,checkboxIcon as s,checkboxInner as c,checkboxInput as l,checkboxLabel as u,checkboxLabelRequired as d,checkboxLabelWrapper as f,checkboxRoot as p}from"@mage-ui/styled-system/recipes";import{Checkbox as m}from"@mantine/core";import{Fragment as h,jsx as g,jsxs as _}from"react/jsx-runtime";import{visuallyHidden as v}from"@mage-ui/styled-system/patterns";const y=({classNames:e,label:y,hiddenLabel:b,error:x,required:S,...C})=>g(m,{classNames:{root:t(e?.checkbox??n(),e?.root??p()),input:t(e?.input??l(),`peer`),icon:e?.icon??s(),inner:e?.inner??c(),body:t(e?.body??r(),x&&(e?.bodyError??i())),labelWrapper:e?.labelWrapper??f(),label:t(e?.label??u(),b&&v()),description:e?.description??a(),error:e?.error??o()},label:_(h,{children:[y,g(()=>S?_(`span`,{className:e?.labelRequired??d(),children:[` `,`*`]}):null,{})]}),...C});y.displayName=`Checkbox`,y.Group=e;export{y as Checkbox};
2
2
  //# sourceMappingURL=Checkbox.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.mjs","names":["Checkbox","MantineCheckbox"],"sources":["../../../../src/components/controls/checkbox/Checkbox.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport { visuallyHidden } from '@mage-ui/styled-system/patterns';\nimport {\n checkbox,\n checkboxBody,\n checkboxBodyError,\n checkboxDescription,\n checkboxError,\n checkboxIcon,\n checkboxInner,\n checkboxInput,\n checkboxLabel,\n checkboxLabelRequired,\n checkboxLabelWrapper,\n checkboxRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Checkbox as MantineCheckbox } from '@mantine/core';\n\nimport { CheckboxGroup } from '../checkbox-group/CheckboxGroup';\n\nexport type CheckboxProps = Omit<\n ComponentProps<'input'>,\n 'size' | 'children'\n> & {\n label?: ReactNode;\n error?: string;\n classNames?: {\n checkbox?: string;\n root?: string;\n input?: string;\n icon?: string;\n inner?: string;\n body?: string;\n bodyError?: string;\n labelWrapper?: string;\n labelRequired?: string;\n label?: string;\n description?: string;\n error?: string;\n };\n hiddenLabel?: boolean;\n};\n\nexport const Checkbox = ({\n classNames,\n label,\n hiddenLabel,\n error,\n required,\n value,\n ...props\n}: CheckboxProps): ReactNode => {\n const RequiredAsterisk = () =>\n required ? (\n <span className={classNames?.labelRequired ?? checkboxLabelRequired()}>\n {' '}\n *\n </span>\n ) : null;\n\n return (\n <MantineCheckbox\n classNames={{\n root: cx(\n classNames?.checkbox ?? checkbox(),\n classNames?.root ?? checkboxRoot(),\n ),\n input: cx(classNames?.input ?? checkboxInput(), 'peer'),\n icon: classNames?.icon ?? checkboxIcon(),\n inner: classNames?.inner ?? checkboxInner(),\n body: cx(\n classNames?.body ?? checkboxBody(),\n error && (classNames?.bodyError ?? checkboxBodyError()),\n ),\n labelWrapper: classNames?.labelWrapper ?? checkboxLabelWrapper(),\n label: cx(\n classNames?.label ?? checkboxLabel(),\n hiddenLabel && visuallyHidden(),\n ),\n description: classNames?.description ?? checkboxDescription(),\n error: classNames?.error ?? checkboxError(),\n }}\n label={\n <>\n {label}\n <RequiredAsterisk />\n </>\n }\n checked={!!value}\n {...props}\n />\n );\n};\n\nCheckbox.displayName = 'Checkbox';\nCheckbox.Group = CheckboxGroup;\n"],"mappings":"+jBA6CA,MAAaA,GAAY,CACvB,aACA,QACA,cACA,QACA,WACA,QACA,GAAG,KAWD,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,EACJ,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,CACD,MAAO,EAAG,GAAY,OAAS,GAAe,CAAE,OAAO,CACvD,KAAM,GAAY,MAAQ,GAAc,CACxC,MAAO,GAAY,OAAS,GAAe,CAC3C,KAAM,EACJ,GAAY,MAAQ,GAAc,CAClC,IAAU,GAAY,WAAa,GAAmB,EACvD,CACD,aAAc,GAAY,cAAgB,GAAsB,CAChE,MAAO,EACL,GAAY,OAAS,GAAe,CACpC,GAAe,GAAgB,CAChC,CACD,YAAa,GAAY,aAAe,GAAqB,CAC7D,MAAO,GAAY,OAAS,GAAe,CAC5C,CACD,MACE,EAAA,EAAA,CAAA,SAAA,CACG,EACD,MAhCN,EACE,EAAC,OAAA,CAAK,UAAW,GAAY,eAAiB,GAAuB,WAClE,IAAI,IAAA,EAEA,CACL,KA2BG,EAAA,CAAmB,CAAA,CAAA,CACnB,CAEL,QAAS,CAAC,CAAC,EACX,GAAI,GACJ,CAIN,EAAS,YAAc,WACvB,EAAS,MAAQ"}
1
+ {"version":3,"file":"Checkbox.mjs","names":["Checkbox","MantineCheckbox"],"sources":["../../../../src/components/controls/checkbox/Checkbox.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport { visuallyHidden } from '@mage-ui/styled-system/patterns';\nimport {\n checkbox,\n checkboxBody,\n checkboxBodyError,\n checkboxDescription,\n checkboxError,\n checkboxIcon,\n checkboxInner,\n checkboxInput,\n checkboxLabel,\n checkboxLabelRequired,\n checkboxLabelWrapper,\n checkboxRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Checkbox as MantineCheckbox } from '@mantine/core';\n\nimport { CheckboxGroup } from '../checkbox-group/CheckboxGroup';\n\nexport type CheckboxProps = Omit<\n ComponentProps<'input'>,\n 'size' | 'children'\n> & {\n indeterminate?: boolean;\n label?: ReactNode;\n error?: string;\n classNames?: {\n checkbox?: string;\n root?: string;\n input?: string;\n icon?: string;\n inner?: string;\n body?: string;\n bodyError?: string;\n labelWrapper?: string;\n labelRequired?: string;\n label?: string;\n description?: string;\n error?: string;\n };\n hiddenLabel?: boolean;\n};\n\nexport const Checkbox = ({\n classNames,\n label,\n hiddenLabel,\n error,\n required,\n ...props\n}: CheckboxProps): ReactNode => {\n const RequiredAsterisk = () =>\n required ? (\n <span className={classNames?.labelRequired ?? checkboxLabelRequired()}>\n {' '}\n *\n </span>\n ) : null;\n\n return (\n <MantineCheckbox\n classNames={{\n root: cx(\n classNames?.checkbox ?? checkbox(),\n classNames?.root ?? checkboxRoot(),\n ),\n input: cx(classNames?.input ?? checkboxInput(), 'peer'),\n icon: classNames?.icon ?? checkboxIcon(),\n inner: classNames?.inner ?? checkboxInner(),\n body: cx(\n classNames?.body ?? checkboxBody(),\n error && (classNames?.bodyError ?? checkboxBodyError()),\n ),\n labelWrapper: classNames?.labelWrapper ?? checkboxLabelWrapper(),\n label: cx(\n classNames?.label ?? checkboxLabel(),\n hiddenLabel && visuallyHidden(),\n ),\n description: classNames?.description ?? checkboxDescription(),\n error: classNames?.error ?? checkboxError(),\n }}\n label={\n <>\n {label}\n <RequiredAsterisk />\n </>\n }\n {...props}\n />\n );\n};\n\nCheckbox.displayName = 'Checkbox';\nCheckbox.Group = CheckboxGroup;\n"],"mappings":"+jBA8CA,MAAaA,GAAY,CACvB,aACA,QACA,cACA,QACA,WACA,GAAG,KAWD,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,EACJ,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,CACD,MAAO,EAAG,GAAY,OAAS,GAAe,CAAE,OAAO,CACvD,KAAM,GAAY,MAAQ,GAAc,CACxC,MAAO,GAAY,OAAS,GAAe,CAC3C,KAAM,EACJ,GAAY,MAAQ,GAAc,CAClC,IAAU,GAAY,WAAa,GAAmB,EACvD,CACD,aAAc,GAAY,cAAgB,GAAsB,CAChE,MAAO,EACL,GAAY,OAAS,GAAe,CACpC,GAAe,GAAgB,CAChC,CACD,YAAa,GAAY,aAAe,GAAqB,CAC7D,MAAO,GAAY,OAAS,GAAe,CAC5C,CACD,MACE,EAAA,EAAA,CAAA,SAAA,CACG,EACD,MAhCN,EACE,EAAC,OAAA,CAAK,UAAW,GAAY,eAAiB,GAAuB,WAClE,IAAI,IAAA,EAEA,CACL,KA2BG,EAAA,CAAmB,CAAA,CAAA,CACnB,CAEL,GAAI,GACJ,CAIN,EAAS,YAAc,WACvB,EAAS,MAAQ"}
@@ -2,6 +2,7 @@ import { TextInputProps } from "../text-input/TextInput.mjs";
2
2
  import { DropdownChevronProps } from "./DropdownChevron.mjs";
3
3
  import { DropdownClearButtonProps } from "./DropdownClearButton.mjs";
4
4
  import "react/jsx-runtime";
5
+ import { ReactNode } from "react";
5
6
 
6
7
  //#region src/components/controls/dropdown/DropdownTargetTextInput.d.ts
7
8
  type DropdownTargetTextInputProps = Omit<TextInputProps, 'classNames'> & {
@@ -13,6 +14,7 @@ type DropdownTargetTextInputProps = Omit<TextInputProps, 'classNames'> & {
13
14
  showChevron?: boolean;
14
15
  clearable?: boolean;
15
16
  closeOnBlur?: boolean;
17
+ startSlot?: ReactNode;
16
18
  };
17
19
  //#endregion
18
20
  export { DropdownTargetTextInputProps };
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownTargetTextInput.d.mts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownTargetTextInput.tsx"],"mappings":";;;;;;KAkBY,4BAAA,GAA+B,IAAA,CACzC,cAAA;EAGA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,cAAA;IAC5B,iBAAA;EAAA;EAEF,gBAAA,GAAmB,wBAAA;EACnB,YAAA,GAAe,oBAAA;EAEf,WAAA;EACA,SAAA;EACA,WAAA;AAAA"}
1
+ {"version":3,"file":"DropdownTargetTextInput.d.mts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownTargetTextInput.tsx"],"mappings":";;;;;;;KAoBY,4BAAA,GAA+B,IAAA,CACzC,cAAA;EAGA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,cAAA;IAC5B,iBAAA;EAAA;EAEF,gBAAA,GAAmB,wBAAA;EACnB,YAAA,GAAe,oBAAA;EAEf,WAAA;EACA,SAAA;EACA,WAAA;EACA,SAAA,GAAY,SAAA;AAAA"}
@@ -1,2 +1,2 @@
1
- import{TextInput as e}from"../text-input/TextInput.mjs";import{useDropdownContext as t}from"./DropdownContextProvider.mjs";import{DropdownEndSlot as n}from"./DropdownEndSlot.mjs";import{dropdownTextInput as r,dropdownTextInputDescription as i,dropdownTextInputError as a,dropdownTextInputInput as o,dropdownTextInputLabel as s,dropdownTextInputRequired as c,dropdownTextInputRoot as l,dropdownTextInputSection as u,dropdownTextInputWrapper as d}from"@mage-ui/styled-system/recipes";import{jsx as f}from"react/jsx-runtime";const p=({classNames:p,clearable:m,showChevron:h,clearButtonProps:g,chevronProps:_,closeOnBlur:v=!0,...y})=>{let{store:b,value:x,query:S,setQuery:C}=t(),w=m&&(S??x?.value??``)!==``,T={"--dropdown-text-input-right-section-pointer-events":w?`auto`:`none`};return f(e,{readOnly:!1,value:S??x?.value??``,endSlot:f(n,{clearable:w,showChevron:h,clearButtonProps:g,chevronProps:_}),onFocus:e=>{e.stopPropagation(),e.preventDefault(),b.openDropdown()},onBlur:e=>{e.stopPropagation(),e.preventDefault(),v&&(b.closeDropdown(),C(void 0))},classNames:{textInput:p?.dropdownTextInput??r(),root:p?.root??l(),label:p?.label??s(),description:p?.description??i(),error:p?.error??a(),wrapper:p?.wrapper??d(),input:p?.input??o(),section:p?.section??u(),required:p?.required??c()},style:T,...y})};export{p as DropdownTargetTextInput};
1
+ import{TextInput as e}from"../text-input/TextInput.mjs";import{useDropdownContext as t}from"./DropdownContextProvider.mjs";import{DropdownEndSlot as n}from"./DropdownEndSlot.mjs";import{dropdownTextInput as r,dropdownTextInputDescription as i,dropdownTextInputError as a,dropdownTextInputInput as o,dropdownTextInputLabel as s,dropdownTextInputRequired as c,dropdownTextInputRoot as l,dropdownTextInputSection as u,dropdownTextInputWrapper as d}from"@mage-ui/styled-system/recipes";import{jsx as f}from"react/jsx-runtime";const p=({classNames:p,clearable:m,showChevron:h,clearButtonProps:g,chevronProps:_,closeOnBlur:v=!0,startSlot:y,...b})=>{let{store:x,value:S,query:C,setQuery:w}=t(),T=m&&(C??S?.value??``)!==``,E={"--dropdown-text-input-right-section-pointer-events":T?`auto`:`none`};return f(e,{readOnly:!1,value:C??S?.value??``,startSlot:y,endSlot:f(n,{clearable:T,showChevron:h,clearButtonProps:g,chevronProps:_}),onFocus:e=>{e.stopPropagation(),e.preventDefault(),x.openDropdown()},onBlur:e=>{e.stopPropagation(),e.preventDefault(),v&&(x.closeDropdown(),w(void 0))},classNames:{textInput:p?.dropdownTextInput??r(),root:p?.root??l(),label:p?.label??s(),description:p?.description??i(),error:p?.error??a(),wrapper:p?.wrapper??d(),input:p?.input??o(),section:p?.section??u(),required:p?.required??c()},style:E,...b})};export{p as DropdownTargetTextInput};
2
2
  //# sourceMappingURL=DropdownTargetTextInput.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownTargetTextInput.mjs","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownTargetTextInput.tsx"],"sourcesContent":["import {\n dropdownTextInput,\n dropdownTextInputDescription,\n dropdownTextInputError,\n dropdownTextInputInput,\n dropdownTextInputLabel,\n dropdownTextInputRequired,\n dropdownTextInputRoot,\n dropdownTextInputSection,\n dropdownTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { TextInput, type TextInputProps } from '../text-input/TextInput';\nimport type { DropdownChevronProps } from './DropdownChevron';\nimport type { DropdownClearButtonProps } from './DropdownClearButton';\nimport { useDropdownContext } from './DropdownContextProvider';\nimport { DropdownEndSlot } from './DropdownEndSlot';\n\nexport type DropdownTargetTextInputProps = Omit<\n TextInputProps,\n 'classNames'\n> & {\n classNames?: Omit<NonNullable<TextInputProps['classNames']>, 'textInput'> & {\n dropdownTextInput?: string;\n };\n clearButtonProps?: DropdownClearButtonProps;\n chevronProps?: DropdownChevronProps;\n\n showChevron?: boolean;\n clearable?: boolean;\n closeOnBlur?: boolean;\n};\n\nexport const DropdownTargetTextInput = ({\n classNames,\n clearable,\n showChevron,\n clearButtonProps,\n chevronProps,\n closeOnBlur = true,\n ...props\n}: DropdownTargetTextInputProps) => {\n const { store, value, query, setQuery } = useDropdownContext();\n const isClearable = clearable && (query ?? value?.value ?? '') !== '';\n\n const style = {\n '--dropdown-text-input-right-section-pointer-events': isClearable\n ? 'auto'\n : 'none',\n } as React.CSSProperties;\n\n return (\n <TextInput\n readOnly={false}\n value={query ?? value?.value ?? ''}\n endSlot={\n <DropdownEndSlot\n clearable={isClearable}\n showChevron={showChevron}\n clearButtonProps={clearButtonProps}\n chevronProps={chevronProps}\n />\n }\n onFocus={(e) => {\n e.stopPropagation();\n e.preventDefault();\n store.openDropdown();\n }}\n onBlur={(e) => {\n e.stopPropagation();\n e.preventDefault();\n if (closeOnBlur) {\n store.closeDropdown();\n setQuery(undefined);\n }\n }}\n classNames={{\n textInput: classNames?.dropdownTextInput ?? dropdownTextInput(),\n root: classNames?.root ?? dropdownTextInputRoot(),\n label: classNames?.label ?? dropdownTextInputLabel(),\n description: classNames?.description ?? dropdownTextInputDescription(),\n error: classNames?.error ?? dropdownTextInputError(),\n wrapper: classNames?.wrapper ?? dropdownTextInputWrapper(),\n input: classNames?.input ?? dropdownTextInputInput(),\n section: classNames?.section ?? dropdownTextInputSection(),\n required: classNames?.required ?? dropdownTextInputRequired(),\n }}\n style={style}\n {...props}\n />\n );\n};\n"],"mappings":"0gBAiCA,MAAa,GAA2B,CACtC,aACA,YACA,cACA,mBACA,eACA,cAAc,GACd,GAAG,KAC+B,CAClC,GAAM,CAAE,QAAO,QAAO,QAAO,YAAa,GAAoB,CACxD,EAAc,IAAc,GAAS,GAAO,OAAS,MAAQ,GAE7D,EAAQ,CACZ,qDAAsD,EAClD,OACA,OACL,CAED,OACE,EAAC,EAAA,CACC,SAAU,GACV,MAAO,GAAS,GAAO,OAAS,GAChC,QACE,EAAC,EAAA,CACC,UAAW,EACE,cACK,mBACJ,gBACd,CAEJ,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,EAAE,gBAAgB,CAClB,EAAM,cAAc,EAEtB,OAAS,GAAM,CACb,EAAE,iBAAiB,CACnB,EAAE,gBAAgB,CACd,IACF,EAAM,eAAe,CACrB,EAAS,IAAA,GAAU,GAGvB,WAAY,CACV,UAAW,GAAY,mBAAqB,GAAmB,CAC/D,KAAM,GAAY,MAAQ,GAAuB,CACjD,MAAO,GAAY,OAAS,GAAwB,CACpD,YAAa,GAAY,aAAe,GAA8B,CACtE,MAAO,GAAY,OAAS,GAAwB,CACpD,QAAS,GAAY,SAAW,GAA0B,CAC1D,MAAO,GAAY,OAAS,GAAwB,CACpD,QAAS,GAAY,SAAW,GAA0B,CAC1D,SAAU,GAAY,UAAY,GAA2B,CAC9D,CACM,QACP,GAAI,GACJ"}
1
+ {"version":3,"file":"DropdownTargetTextInput.mjs","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownTargetTextInput.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n dropdownTextInput,\n dropdownTextInputDescription,\n dropdownTextInputError,\n dropdownTextInputInput,\n dropdownTextInputLabel,\n dropdownTextInputRequired,\n dropdownTextInputRoot,\n dropdownTextInputSection,\n dropdownTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { TextInput, type TextInputProps } from '../text-input/TextInput';\nimport type { DropdownChevronProps } from './DropdownChevron';\nimport type { DropdownClearButtonProps } from './DropdownClearButton';\nimport { useDropdownContext } from './DropdownContextProvider';\nimport { DropdownEndSlot } from './DropdownEndSlot';\n\nexport type DropdownTargetTextInputProps = Omit<\n TextInputProps,\n 'classNames'\n> & {\n classNames?: Omit<NonNullable<TextInputProps['classNames']>, 'textInput'> & {\n dropdownTextInput?: string;\n };\n clearButtonProps?: DropdownClearButtonProps;\n chevronProps?: DropdownChevronProps;\n\n showChevron?: boolean;\n clearable?: boolean;\n closeOnBlur?: boolean;\n startSlot?: ReactNode;\n};\n\nexport const DropdownTargetTextInput = ({\n classNames,\n clearable,\n showChevron,\n clearButtonProps,\n chevronProps,\n closeOnBlur = true,\n startSlot,\n ...props\n}: DropdownTargetTextInputProps) => {\n const { store, value, query, setQuery } = useDropdownContext();\n const isClearable = clearable && (query ?? value?.value ?? '') !== '';\n\n const style = {\n '--dropdown-text-input-right-section-pointer-events': isClearable\n ? 'auto'\n : 'none',\n } as React.CSSProperties;\n\n return (\n <TextInput\n readOnly={false}\n value={query ?? value?.value ?? ''}\n startSlot={startSlot}\n endSlot={\n <DropdownEndSlot\n clearable={isClearable}\n showChevron={showChevron}\n clearButtonProps={clearButtonProps}\n chevronProps={chevronProps}\n />\n }\n onFocus={(e) => {\n e.stopPropagation();\n e.preventDefault();\n store.openDropdown();\n }}\n onBlur={(e) => {\n e.stopPropagation();\n e.preventDefault();\n if (closeOnBlur) {\n store.closeDropdown();\n setQuery(undefined);\n }\n }}\n classNames={{\n textInput: classNames?.dropdownTextInput ?? dropdownTextInput(),\n root: classNames?.root ?? dropdownTextInputRoot(),\n label: classNames?.label ?? dropdownTextInputLabel(),\n description: classNames?.description ?? dropdownTextInputDescription(),\n error: classNames?.error ?? dropdownTextInputError(),\n wrapper: classNames?.wrapper ?? dropdownTextInputWrapper(),\n input: classNames?.input ?? dropdownTextInputInput(),\n section: classNames?.section ?? dropdownTextInputSection(),\n required: classNames?.required ?? dropdownTextInputRequired(),\n }}\n style={style}\n {...props}\n />\n );\n};\n"],"mappings":"0gBAoCA,MAAa,GAA2B,CACtC,aACA,YACA,cACA,mBACA,eACA,cAAc,GACd,YACA,GAAG,KAC+B,CAClC,GAAM,CAAE,QAAO,QAAO,QAAO,YAAa,GAAoB,CACxD,EAAc,IAAc,GAAS,GAAO,OAAS,MAAQ,GAE7D,EAAQ,CACZ,qDAAsD,EAClD,OACA,OACL,CAED,OACE,EAAC,EAAA,CACC,SAAU,GACV,MAAO,GAAS,GAAO,OAAS,GACrB,YACX,QACE,EAAC,EAAA,CACC,UAAW,EACE,cACK,mBACJ,gBACd,CAEJ,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,EAAE,gBAAgB,CAClB,EAAM,cAAc,EAEtB,OAAS,GAAM,CACb,EAAE,iBAAiB,CACnB,EAAE,gBAAgB,CACd,IACF,EAAM,eAAe,CACrB,EAAS,IAAA,GAAU,GAGvB,WAAY,CACV,UAAW,GAAY,mBAAqB,GAAmB,CAC/D,KAAM,GAAY,MAAQ,GAAuB,CACjD,MAAO,GAAY,OAAS,GAAwB,CACpD,YAAa,GAAY,aAAe,GAA8B,CACtE,MAAO,GAAY,OAAS,GAAwB,CACpD,QAAS,GAAY,SAAW,GAA0B,CAC1D,MAAO,GAAY,OAAS,GAAwB,CACpD,QAAS,GAAY,SAAW,GAA0B,CAC1D,SAAU,GAAY,UAAY,GAA2B,CAC9D,CACM,QACP,GAAI,GACJ"}
@@ -3,6 +3,7 @@ import { ComboboxCreatableOptionProps } from "./ComboboxCreatableOption.mjs";
3
3
  import { ComboboxEmptyOptionProps } from "./ComboboxEmptyOption.mjs";
4
4
  import { ComboboxTargetProps } from "./ComboboxTarget.mjs";
5
5
  import * as react_jsx_runtime0 from "react/jsx-runtime";
6
+ import { ReactNode } from "react";
6
7
 
7
8
  //#region src/components/controls/dropdown/combobox/Combobox.d.ts
8
9
  type ComboboxProps = Omit<DropdownProps, 'classNames' | 'target' | 'children'> & {
@@ -11,6 +12,7 @@ type ComboboxProps = Omit<DropdownProps, 'classNames' | 'target' | 'children'> &
11
12
  creatable?: boolean;
12
13
  emptyText?: string;
13
14
  clearButtonText?: string;
15
+ startSlot?: ReactNode;
14
16
  classNames?: DropdownProps['classNames'] & {
15
17
  creatable?: ComboboxCreatableOptionProps['classNames'];
16
18
  empty?: ComboboxEmptyOptionProps['classNames'];
@@ -27,6 +29,7 @@ declare const Combobox: ({
27
29
  creatable,
28
30
  clearButtonText,
29
31
  emptyText,
32
+ startSlot,
30
33
  classNames,
31
34
  ...props
32
35
  }: ComboboxProps) => react_jsx_runtime0.JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/Combobox.tsx"],"mappings":";;;;;;;KAqCY,aAAA,GAAgB,IAAA,CAC1B,aAAA;EAGA,KAAA;EACA,WAAA;EACA,SAAA;EACA,SAAA;EACA,eAAA;EACA,UAAA,GAAa,aAAA;IACX,SAAA,GAAY,4BAAA;IACZ,KAAA,GAAQ,wBAAA;IACR,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;MAEF,OAAA,GAAU,WAAA,CAAY,mBAAA;IAAA;IAExB,UAAA,GAAa,WAAA,CAAY,aAAA;EAAA;AAAA;AAAA,cAIhB,QAAA;EAAY,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,eAAA;EAAA,SAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAQtB,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"Combobox.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/Combobox.tsx"],"mappings":";;;;;;;;KAuCY,aAAA,GAAgB,IAAA,CAC1B,aAAA;EAGA,KAAA;EACA,WAAA;EACA,SAAA;EACA,SAAA;EACA,eAAA;EACA,SAAA,GAAY,SAAA;EACZ,UAAA,GAAa,aAAA;IACX,SAAA,GAAY,4BAAA;IACZ,KAAA,GAAQ,wBAAA;IACR,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;MAEF,OAAA,GAAU,WAAA,CAAY,mBAAA;IAAA;IAExB,UAAA,GAAa,WAAA,CAAY,aAAA;EAAA;AAAA;AAAA,cAIhB,QAAA;EAAY,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,eAAA;EAAA,SAAA;EAAA,SAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAStB,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
@@ -1,2 +1,2 @@
1
- import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"./ComboboxOptions.mjs";import{ComboboxTarget as ee}from"./ComboboxTarget.mjs";import{combobox as n,comboboxChevron as r,comboboxChevronIcon as i,comboboxChevronIconRoot as a,comboboxChevronRoot as o,comboboxClearButton as s,comboboxClearButtonIcon as c,comboboxClearButtonIconRaw as l,comboboxClearButtonIconRawRoot as u,comboboxClearButtonRoot as d,comboboxEmpty as f,comboboxOption as p,comboboxOptionCreateIcon as m,comboboxOptionCreateIconIconRaw as h,comboboxOptionCreateIconIconRawRoot as g,comboboxOptionCreateIconRoot as _,comboboxOptions as v,comboboxRoot as y,comboboxScrollAreaAutosize as b,comboboxTextInput as x,comboboxTextInputDescription as S,comboboxTextInputError as C,comboboxTextInputInput as w,comboboxTextInputLabel as T,comboboxTextInputRequired as E,comboboxTextInputRoot as D,comboboxTextInputSection as O,comboboxTextInputWrapper as k}from"@mage-ui/styled-system/recipes";import{jsx as A}from"react/jsx-runtime";const j=({label:j,placeholder:M,creatable:N,clearButtonText:P,emptyText:F=`No results`,classNames:I,...L})=>{let{creatable:R,empty:z,target:B,scrollArea:V,...H}=I||{},{clearButton:U,chevron:W,...G}=B||{},K={placeholder:M,label:j,classNames:{dropdownTextInput:G?.dropdownTextInput??x(),root:G?.root??D(),label:G?.label??T(),description:G?.description??S(),error:G?.error??C(),wrapper:G?.wrapper??k(),input:G?.input??w(),section:G?.section??O(),required:G?.required??E()},clearButtonProps:{label:P,classNames:{clearButton:U?.clearButton??s(),root:U?.root??d(),icon:U?.icon??c(),iconRaw:{iconRaw:U?.iconRaw?.iconRaw??l(),root:U?.iconRaw?.root??u()}}},chevronProps:{classNames:{chevron:W?.chevron??r(),root:W?.root??o(),open:{iconRaw:W?.open?.iconRaw??i(),root:W?.open?.root??a()},close:{iconRaw:W?.close?.iconRaw??i(),root:W?.close?.root??a()}}}},q=H?.dropdown??n(),J=H?.root??y(),Y=H?.options??v(),X=H?.option??p(),Z=z?.empty??f(),Q=H?.search,$={emptyText:F,classNames:{empty:z?.empty??Z}},te={creatable:N??!1,classNames:{create:R?.create,createIcon:{createIcon:R?.createIcon?.createIcon??m(),root:R?.createIcon?.root??_(),iconRaw:{iconRaw:R?.createIcon?.iconRaw?.iconRaw??h(),root:R?.createIcon?.iconRaw?.root??g()}}}};return A(e,{classNames:{dropdown:q,root:J,options:Y,option:X,empty:Z,search:Q},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:V?.dropdownScrollAreaAutosize??b()}},target:A(ee,{...K}),...L,children:A(t,{emptyProps:$,creatableProps:te})})};export{j as Combobox};
1
+ import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"./ComboboxOptions.mjs";import{ComboboxTarget as ee}from"./ComboboxTarget.mjs";import{combobox as n,comboboxChevron as r,comboboxChevronIcon as i,comboboxChevronIconRoot as a,comboboxChevronRoot as o,comboboxClearButton as s,comboboxClearButtonIcon as c,comboboxClearButtonIconRaw as l,comboboxClearButtonIconRawRoot as u,comboboxClearButtonRoot as d,comboboxEmpty as f,comboboxOption as p,comboboxOptionCreateIcon as m,comboboxOptionCreateIconIconRaw as h,comboboxOptionCreateIconIconRawRoot as g,comboboxOptionCreateIconRoot as _,comboboxOptions as v,comboboxRoot as y,comboboxScrollAreaAutosize as b,comboboxTextInput as x,comboboxTextInputDescription as S,comboboxTextInputError as C,comboboxTextInputInput as w,comboboxTextInputLabel as T,comboboxTextInputRequired as E,comboboxTextInputRoot as D,comboboxTextInputSection as O,comboboxTextInputWrapper as k}from"@mage-ui/styled-system/recipes";import{jsx as A}from"react/jsx-runtime";const j=({label:j,placeholder:M,creatable:N,clearButtonText:P,emptyText:F=`No results`,startSlot:I,classNames:L,...R})=>{let{creatable:z,empty:B,target:V,scrollArea:H,...U}=L||{},{clearButton:W,chevron:G,...K}=V||{},q={placeholder:M,label:j,startSlot:I,classNames:{dropdownTextInput:K?.dropdownTextInput??x(),root:K?.root??D(),label:K?.label??T(),description:K?.description??S(),error:K?.error??C(),wrapper:K?.wrapper??k(),input:K?.input??w(),section:K?.section??O(),required:K?.required??E()},clearButtonProps:{label:P,classNames:{clearButton:W?.clearButton??s(),root:W?.root??d(),icon:W?.icon??c(),iconRaw:{iconRaw:W?.iconRaw?.iconRaw??l(),root:W?.iconRaw?.root??u()}}},chevronProps:{classNames:{chevron:G?.chevron??r(),root:G?.root??o(),open:{iconRaw:G?.open?.iconRaw??i(),root:G?.open?.root??a()},close:{iconRaw:G?.close?.iconRaw??i(),root:G?.close?.root??a()}}}},J=U?.dropdown??n(),Y=U?.root??y(),X=U?.options??v(),Z=U?.option??p(),Q=B?.empty??f(),$=U?.search,te={emptyText:F,classNames:{empty:B?.empty??Q}},ne={creatable:N??!1,classNames:{create:z?.create,createIcon:{createIcon:z?.createIcon?.createIcon??m(),root:z?.createIcon?.root??_(),iconRaw:{iconRaw:z?.createIcon?.iconRaw?.iconRaw??h(),root:z?.createIcon?.iconRaw?.root??g()}}}};return A(e,{classNames:{dropdown:J,root:Y,options:X,option:Z,empty:Q,search:$},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:H?.dropdownScrollAreaAutosize??b()}},target:A(ee,{...q}),...R,children:A(t,{emptyProps:te,creatableProps:ne})})};export{j as Combobox};
2
2
  //# sourceMappingURL=Combobox.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/Combobox.tsx"],"sourcesContent":["import {\n combobox,\n comboboxChevron,\n comboboxChevronIcon,\n comboboxChevronIconRoot,\n comboboxChevronRoot,\n comboboxClearButton,\n comboboxClearButtonIcon,\n comboboxClearButtonIconRaw,\n comboboxClearButtonIconRawRoot,\n comboboxClearButtonRoot,\n comboboxEmpty,\n comboboxOption,\n comboboxOptionCreateIcon,\n comboboxOptionCreateIconIconRaw,\n comboboxOptionCreateIconIconRawRoot,\n comboboxOptionCreateIconRoot,\n comboboxOptions,\n comboboxRoot,\n comboboxScrollAreaAutosize,\n comboboxTextInput,\n comboboxTextInputDescription,\n comboboxTextInputError,\n comboboxTextInputInput,\n comboboxTextInputLabel,\n comboboxTextInputRequired,\n comboboxTextInputRoot,\n comboboxTextInputSection,\n comboboxTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport type { ComboboxCreatableOptionProps } from './ComboboxCreatableOption';\nimport type { ComboboxEmptyOptionProps } from './ComboboxEmptyOption';\nimport { ComboboxOptions } from './ComboboxOptions';\nimport { ComboboxTarget, type ComboboxTargetProps } from './ComboboxTarget';\n\nexport type ComboboxProps = Omit<\n DropdownProps,\n 'classNames' | 'target' | 'children'\n> & {\n label?: string;\n placeholder?: string;\n creatable?: boolean;\n emptyText?: string;\n clearButtonText?: string;\n classNames?: DropdownProps['classNames'] & {\n creatable?: ComboboxCreatableOptionProps['classNames'];\n empty?: ComboboxEmptyOptionProps['classNames'];\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n };\n scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n };\n};\n\nexport const Combobox = ({\n label,\n placeholder,\n creatable,\n clearButtonText,\n emptyText = 'No results',\n classNames,\n ...props\n}: ComboboxProps) => {\n const {\n creatable: creatableClassNames,\n empty: emptyClassNames,\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const {\n clearButton: clearButtonClassNames,\n chevron: chevronClassNames,\n ...restTargetClassNames\n } = targetClassNames || {};\n\n const targetProps = {\n placeholder,\n label,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? comboboxTextInput(),\n root: restTargetClassNames?.root ?? comboboxTextInputRoot(),\n label: restTargetClassNames?.label ?? comboboxTextInputLabel(),\n description:\n restTargetClassNames?.description ?? comboboxTextInputDescription(),\n error: restTargetClassNames?.error ?? comboboxTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? comboboxTextInputWrapper(),\n input: restTargetClassNames?.input ?? comboboxTextInputInput(),\n section: restTargetClassNames?.section ?? comboboxTextInputSection(),\n required: restTargetClassNames?.required ?? comboboxTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton:\n clearButtonClassNames?.clearButton ?? comboboxClearButton(),\n root: clearButtonClassNames?.root ?? comboboxClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? comboboxClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n comboboxClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n comboboxClearButtonIconRawRoot(),\n },\n },\n },\n chevronProps: {\n classNames: {\n chevron: chevronClassNames?.chevron ?? comboboxChevron(),\n root: chevronClassNames?.root ?? comboboxChevronRoot(),\n open: {\n iconRaw: chevronClassNames?.open?.iconRaw ?? comboboxChevronIcon(),\n root: chevronClassNames?.open?.root ?? comboboxChevronIconRoot(),\n },\n close: {\n iconRaw: chevronClassNames?.close?.iconRaw ?? comboboxChevronIcon(),\n root: chevronClassNames?.close?.root ?? comboboxChevronIconRoot(),\n },\n },\n },\n };\n\n const dropdownClassName = dropdownClassNames?.dropdown ?? combobox();\n const rootClassName = dropdownClassNames?.root ?? comboboxRoot();\n const optionsClassName = dropdownClassNames?.options ?? comboboxOptions();\n const optionClassName = dropdownClassNames?.option ?? comboboxOption();\n const emptyClassName = emptyClassNames?.empty ?? comboboxEmpty();\n const searchClassName = dropdownClassNames?.search;\n\n const emptyProps = {\n emptyText,\n classNames: {\n empty: emptyClassNames?.empty ?? emptyClassName,\n },\n };\n\n const creatableProps = {\n creatable: creatable ?? false,\n classNames: {\n create: creatableClassNames?.create,\n createIcon: {\n createIcon:\n creatableClassNames?.createIcon?.createIcon ??\n comboboxOptionCreateIcon(),\n root:\n creatableClassNames?.createIcon?.root ??\n comboboxOptionCreateIconRoot(),\n iconRaw: {\n iconRaw:\n creatableClassNames?.createIcon?.iconRaw?.iconRaw ??\n comboboxOptionCreateIconIconRaw(),\n root:\n creatableClassNames?.createIcon?.iconRaw?.root ??\n comboboxOptionCreateIconIconRawRoot(),\n },\n },\n },\n };\n\n return (\n <Dropdown\n classNames={{\n dropdown: dropdownClassName,\n root: rootClassName,\n options: optionsClassName,\n option: optionClassName,\n empty: emptyClassName,\n search: searchClassName,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n comboboxScrollAreaAutosize(),\n },\n }}\n target={<ComboboxTarget {...targetProps} />}\n {...props}\n >\n <ComboboxOptions\n emptyProps={emptyProps}\n creatableProps={creatableProps}\n />\n </Dropdown>\n );\n};\n"],"mappings":"s/BA2DA,MAAa,GAAY,CACvB,QACA,cACA,YACA,kBACA,YAAY,aACZ,aACA,GAAG,KACgB,CACnB,GAAM,CACJ,UAAW,EACX,MAAO,EACP,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CAEpB,EAAc,CAClB,cACA,QACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAmB,CAChE,KAAM,GAAsB,MAAQ,GAAuB,CAC3D,MAAO,GAAsB,OAAS,GAAwB,CAC9D,YACE,GAAsB,aAAe,GAA8B,CACrE,MAAO,GAAsB,OAAS,GAAwB,CAC9D,QAAS,GAAsB,SAAW,GAA0B,CACpE,MAAO,GAAsB,OAAS,GAAwB,CAC9D,QAAS,GAAsB,SAAW,GAA0B,CACpE,SAAU,GAAsB,UAAY,GAA2B,CACxE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YACE,GAAuB,aAAe,GAAqB,CAC7D,KAAM,GAAuB,MAAQ,GAAyB,CAC9D,KAAM,GAAuB,MAAQ,GAAyB,CAC9D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA4B,CAC9B,KACE,GAAuB,SAAS,MAChC,GAAgC,CACnC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAiB,CACxD,KAAM,GAAmB,MAAQ,GAAqB,CACtD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAqB,CAClE,KAAM,GAAmB,MAAM,MAAQ,GAAyB,CACjE,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAqB,CACnE,KAAM,GAAmB,OAAO,MAAQ,GAAyB,CAClE,CACF,CACF,CACF,CAEK,EAAoB,GAAoB,UAAY,GAAU,CAC9D,EAAgB,GAAoB,MAAQ,GAAc,CAC1D,EAAmB,GAAoB,SAAW,GAAiB,CACnE,EAAkB,GAAoB,QAAU,GAAgB,CAChE,EAAiB,GAAiB,OAAS,GAAe,CAC1D,EAAkB,GAAoB,OAEtC,EAAa,CACjB,YACA,WAAY,CACV,MAAO,GAAiB,OAAS,EAClC,CACF,CAEK,GAAiB,CACrB,UAAW,GAAa,GACxB,WAAY,CACV,OAAQ,GAAqB,OAC7B,WAAY,CACV,WACE,GAAqB,YAAY,YACjC,GAA0B,CAC5B,KACE,GAAqB,YAAY,MACjC,GAA8B,CAChC,QAAS,CACP,QACE,GAAqB,YAAY,SAAS,SAC1C,GAAiC,CACnC,KACE,GAAqB,YAAY,SAAS,MAC1C,GAAqC,CACxC,CACF,CACF,CACF,CAED,OACE,EAAC,EAAA,CACC,WAAY,CACV,SAAU,EACV,KAAM,EACN,QAAS,EACT,OAAQ,EACR,MAAO,EACP,OAAQ,EACT,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA4B,CAC/B,CACF,CACD,OAAQ,EAAC,GAAA,CAAe,GAAI,EAAA,CAAe,CAC3C,GAAI,WAEJ,EAAC,EAAA,CACa,aACI,mBAChB,EACO"}
1
+ {"version":3,"file":"Combobox.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/Combobox.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n combobox,\n comboboxChevron,\n comboboxChevronIcon,\n comboboxChevronIconRoot,\n comboboxChevronRoot,\n comboboxClearButton,\n comboboxClearButtonIcon,\n comboboxClearButtonIconRaw,\n comboboxClearButtonIconRawRoot,\n comboboxClearButtonRoot,\n comboboxEmpty,\n comboboxOption,\n comboboxOptionCreateIcon,\n comboboxOptionCreateIconIconRaw,\n comboboxOptionCreateIconIconRawRoot,\n comboboxOptionCreateIconRoot,\n comboboxOptions,\n comboboxRoot,\n comboboxScrollAreaAutosize,\n comboboxTextInput,\n comboboxTextInputDescription,\n comboboxTextInputError,\n comboboxTextInputInput,\n comboboxTextInputLabel,\n comboboxTextInputRequired,\n comboboxTextInputRoot,\n comboboxTextInputSection,\n comboboxTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport type { ComboboxCreatableOptionProps } from './ComboboxCreatableOption';\nimport type { ComboboxEmptyOptionProps } from './ComboboxEmptyOption';\nimport { ComboboxOptions } from './ComboboxOptions';\nimport { ComboboxTarget, type ComboboxTargetProps } from './ComboboxTarget';\n\nexport type ComboboxProps = Omit<\n DropdownProps,\n 'classNames' | 'target' | 'children'\n> & {\n label?: string;\n placeholder?: string;\n creatable?: boolean;\n emptyText?: string;\n clearButtonText?: string;\n startSlot?: ReactNode;\n classNames?: DropdownProps['classNames'] & {\n creatable?: ComboboxCreatableOptionProps['classNames'];\n empty?: ComboboxEmptyOptionProps['classNames'];\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n };\n scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n };\n};\n\nexport const Combobox = ({\n label,\n placeholder,\n creatable,\n clearButtonText,\n emptyText = 'No results',\n startSlot,\n classNames,\n ...props\n}: ComboboxProps) => {\n const {\n creatable: creatableClassNames,\n empty: emptyClassNames,\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const {\n clearButton: clearButtonClassNames,\n chevron: chevronClassNames,\n ...restTargetClassNames\n } = targetClassNames || {};\n\n const targetProps = {\n placeholder,\n label,\n startSlot,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? comboboxTextInput(),\n root: restTargetClassNames?.root ?? comboboxTextInputRoot(),\n label: restTargetClassNames?.label ?? comboboxTextInputLabel(),\n description:\n restTargetClassNames?.description ?? comboboxTextInputDescription(),\n error: restTargetClassNames?.error ?? comboboxTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? comboboxTextInputWrapper(),\n input: restTargetClassNames?.input ?? comboboxTextInputInput(),\n section: restTargetClassNames?.section ?? comboboxTextInputSection(),\n required: restTargetClassNames?.required ?? comboboxTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton:\n clearButtonClassNames?.clearButton ?? comboboxClearButton(),\n root: clearButtonClassNames?.root ?? comboboxClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? comboboxClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n comboboxClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n comboboxClearButtonIconRawRoot(),\n },\n },\n },\n chevronProps: {\n classNames: {\n chevron: chevronClassNames?.chevron ?? comboboxChevron(),\n root: chevronClassNames?.root ?? comboboxChevronRoot(),\n open: {\n iconRaw: chevronClassNames?.open?.iconRaw ?? comboboxChevronIcon(),\n root: chevronClassNames?.open?.root ?? comboboxChevronIconRoot(),\n },\n close: {\n iconRaw: chevronClassNames?.close?.iconRaw ?? comboboxChevronIcon(),\n root: chevronClassNames?.close?.root ?? comboboxChevronIconRoot(),\n },\n },\n },\n };\n\n const dropdownClassName = dropdownClassNames?.dropdown ?? combobox();\n const rootClassName = dropdownClassNames?.root ?? comboboxRoot();\n const optionsClassName = dropdownClassNames?.options ?? comboboxOptions();\n const optionClassName = dropdownClassNames?.option ?? comboboxOption();\n const emptyClassName = emptyClassNames?.empty ?? comboboxEmpty();\n const searchClassName = dropdownClassNames?.search;\n\n const emptyProps = {\n emptyText,\n classNames: {\n empty: emptyClassNames?.empty ?? emptyClassName,\n },\n };\n\n const creatableProps = {\n creatable: creatable ?? false,\n classNames: {\n create: creatableClassNames?.create,\n createIcon: {\n createIcon:\n creatableClassNames?.createIcon?.createIcon ??\n comboboxOptionCreateIcon(),\n root:\n creatableClassNames?.createIcon?.root ??\n comboboxOptionCreateIconRoot(),\n iconRaw: {\n iconRaw:\n creatableClassNames?.createIcon?.iconRaw?.iconRaw ??\n comboboxOptionCreateIconIconRaw(),\n root:\n creatableClassNames?.createIcon?.iconRaw?.root ??\n comboboxOptionCreateIconIconRawRoot(),\n },\n },\n },\n };\n\n return (\n <Dropdown\n classNames={{\n dropdown: dropdownClassName,\n root: rootClassName,\n options: optionsClassName,\n option: optionClassName,\n empty: emptyClassName,\n search: searchClassName,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n comboboxScrollAreaAutosize(),\n },\n }}\n target={<ComboboxTarget {...targetProps} />}\n {...props}\n >\n <ComboboxOptions\n emptyProps={emptyProps}\n creatableProps={creatableProps}\n />\n </Dropdown>\n );\n};\n"],"mappings":"s/BA8DA,MAAa,GAAY,CACvB,QACA,cACA,YACA,kBACA,YAAY,aACZ,YACA,aACA,GAAG,KACgB,CACnB,GAAM,CACJ,UAAW,EACX,MAAO,EACP,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CAEpB,EAAc,CAClB,cACA,QACA,YACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAmB,CAChE,KAAM,GAAsB,MAAQ,GAAuB,CAC3D,MAAO,GAAsB,OAAS,GAAwB,CAC9D,YACE,GAAsB,aAAe,GAA8B,CACrE,MAAO,GAAsB,OAAS,GAAwB,CAC9D,QAAS,GAAsB,SAAW,GAA0B,CACpE,MAAO,GAAsB,OAAS,GAAwB,CAC9D,QAAS,GAAsB,SAAW,GAA0B,CACpE,SAAU,GAAsB,UAAY,GAA2B,CACxE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YACE,GAAuB,aAAe,GAAqB,CAC7D,KAAM,GAAuB,MAAQ,GAAyB,CAC9D,KAAM,GAAuB,MAAQ,GAAyB,CAC9D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA4B,CAC9B,KACE,GAAuB,SAAS,MAChC,GAAgC,CACnC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAiB,CACxD,KAAM,GAAmB,MAAQ,GAAqB,CACtD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAqB,CAClE,KAAM,GAAmB,MAAM,MAAQ,GAAyB,CACjE,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAqB,CACnE,KAAM,GAAmB,OAAO,MAAQ,GAAyB,CAClE,CACF,CACF,CACF,CAEK,EAAoB,GAAoB,UAAY,GAAU,CAC9D,EAAgB,GAAoB,MAAQ,GAAc,CAC1D,EAAmB,GAAoB,SAAW,GAAiB,CACnE,EAAkB,GAAoB,QAAU,GAAgB,CAChE,EAAiB,GAAiB,OAAS,GAAe,CAC1D,EAAkB,GAAoB,OAEtC,GAAa,CACjB,YACA,WAAY,CACV,MAAO,GAAiB,OAAS,EAClC,CACF,CAEK,GAAiB,CACrB,UAAW,GAAa,GACxB,WAAY,CACV,OAAQ,GAAqB,OAC7B,WAAY,CACV,WACE,GAAqB,YAAY,YACjC,GAA0B,CAC5B,KACE,GAAqB,YAAY,MACjC,GAA8B,CAChC,QAAS,CACP,QACE,GAAqB,YAAY,SAAS,SAC1C,GAAiC,CACnC,KACE,GAAqB,YAAY,SAAS,MAC1C,GAAqC,CACxC,CACF,CACF,CACF,CAED,OACE,EAAC,EAAA,CACC,WAAY,CACV,SAAU,EACV,KAAM,EACN,QAAS,EACT,OAAQ,EACR,MAAO,EACP,OAAQ,EACT,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA4B,CAC/B,CACF,CACD,OAAQ,EAAC,GAAA,CAAe,GAAI,EAAA,CAAe,CAC3C,GAAI,WAEJ,EAAC,EAAA,CACa,cACI,mBAChB,EACO"}
@@ -1,2 +1,2 @@
1
- import{useDropdownContext as e}from"../DropdownContextProvider.mjs";import{Dropdown as t}from"../Dropdown.mjs";import{ComboboxCreatableOption as n}from"./ComboboxCreatableOption.mjs";import{ComboboxEmptyOption as r}from"./ComboboxEmptyOption.mjs";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({creatableProps:o,emptyProps:s})=>{let{options:c}=e(),{creatable:l}=o,u=c.map(e=>i(t.Option,{id:e.id.toString(),value:e.value?.toString(),onMouseDown:e=>e.preventDefault(),children:e.render??e.value?.toString()},e.id));return a(t.Options,{children:[u,l&&i(n,{...o}),!l&&c.length===0&&i(r,{...s})]})};export{o as ComboboxOptions};
1
+ import{useDropdownContext as e}from"../DropdownContextProvider.mjs";import{Dropdown as t}from"../Dropdown.mjs";import{ComboboxCreatableOption as n}from"./ComboboxCreatableOption.mjs";import{ComboboxEmptyOption as r}from"./ComboboxEmptyOption.mjs";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({creatableProps:o,emptyProps:s})=>{let{options:c,value:l}=e(),{creatable:u}=o,d=c.map(e=>i(t.Option,{id:e.id.toString(),value:e.value?.toString(),onMouseDown:e=>e.preventDefault(),active:e.id===l.id,children:e.render??e.value?.toString()},e.id));return a(t.Options,{children:[d,u&&i(n,{...o}),!u&&c.length===0&&i(r,{...s})]})};export{o as ComboboxOptions};
2
2
  //# sourceMappingURL=ComboboxOptions.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"ComboboxOptions.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/ComboboxOptions.tsx"],"sourcesContent":["import { Dropdown } from '../Dropdown';\nimport type { DropdownValue } from '../DropdownContextProvider';\nimport { useDropdownContext } from '../DropdownContextProvider';\nimport {\n ComboboxCreatableOption,\n type ComboboxCreatableOptionProps,\n} from './ComboboxCreatableOption';\nimport {\n ComboboxEmptyOption,\n type ComboboxEmptyOptionProps,\n} from './ComboboxEmptyOption';\n\nexport const ComboboxOptions = ({\n creatableProps,\n emptyProps,\n}: {\n creatableProps: ComboboxCreatableOptionProps;\n emptyProps: ComboboxEmptyOptionProps;\n}) => {\n const { options } = useDropdownContext();\n const { creatable } = creatableProps;\n\n const optionsList = options.map((item: DropdownValue) => {\n return (\n <Dropdown.Option\n id={item.id.toString()}\n value={item.value?.toString() as string}\n key={item.id}\n onMouseDown={(e) => e.preventDefault()}\n >\n {item.render ?? item.value?.toString()}\n </Dropdown.Option>\n );\n });\n\n return (\n <Dropdown.Options>\n {optionsList}\n {creatable && <ComboboxCreatableOption {...creatableProps} />}\n {!creatable && options.length === 0 && (\n <ComboboxEmptyOption {...emptyProps} />\n )}\n </Dropdown.Options>\n );\n};\n"],"mappings":"ySAYA,MAAa,GAAmB,CAC9B,iBACA,gBAII,CACJ,GAAM,CAAE,WAAY,GAAoB,CAClC,CAAE,aAAc,EAEhB,EAAc,EAAQ,IAAK,GAE7B,EAAC,EAAS,OAAA,CACR,GAAI,EAAK,GAAG,UAAU,CACtB,MAAO,EAAK,OAAO,UAAU,CAE7B,YAAc,GAAM,EAAE,gBAAgB,UAErC,EAAK,QAAU,EAAK,OAAO,UAAU,EAHjC,EAAK,GAIM,CAEpB,CAEF,OACE,EAAC,EAAS,QAAA,CAAA,SAAA,CACP,EACA,GAAa,EAAC,EAAA,CAAwB,GAAI,EAAA,CAAkB,CAC5D,CAAC,GAAa,EAAQ,SAAW,GAChC,EAAC,EAAA,CAAoB,GAAI,EAAA,CAAc,GAExB"}
1
+ {"version":3,"file":"ComboboxOptions.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/combobox/ComboboxOptions.tsx"],"sourcesContent":["import { Dropdown } from '../Dropdown';\nimport type { DropdownValue } from '../DropdownContextProvider';\nimport { useDropdownContext } from '../DropdownContextProvider';\nimport {\n ComboboxCreatableOption,\n type ComboboxCreatableOptionProps,\n} from './ComboboxCreatableOption';\nimport {\n ComboboxEmptyOption,\n type ComboboxEmptyOptionProps,\n} from './ComboboxEmptyOption';\n\nexport const ComboboxOptions = ({\n creatableProps,\n emptyProps,\n}: {\n creatableProps: ComboboxCreatableOptionProps;\n emptyProps: ComboboxEmptyOptionProps;\n}) => {\n const { options, value } = useDropdownContext();\n const { creatable } = creatableProps;\n\n const optionsList = options.map((item: DropdownValue) => {\n return (\n <Dropdown.Option\n id={item.id.toString()}\n value={item.value?.toString() as string}\n key={item.id}\n onMouseDown={(e) => e.preventDefault()}\n active={item.id === value.id}\n >\n {item.render ?? item.value?.toString()}\n </Dropdown.Option>\n );\n });\n\n return (\n <Dropdown.Options>\n {optionsList}\n {creatable && <ComboboxCreatableOption {...creatableProps} />}\n {!creatable && options.length === 0 && (\n <ComboboxEmptyOption {...emptyProps} />\n )}\n </Dropdown.Options>\n );\n};\n"],"mappings":"ySAYA,MAAa,GAAmB,CAC9B,iBACA,gBAII,CACJ,GAAM,CAAE,UAAS,SAAU,GAAoB,CACzC,CAAE,aAAc,EAEhB,EAAc,EAAQ,IAAK,GAE7B,EAAC,EAAS,OAAA,CACR,GAAI,EAAK,GAAG,UAAU,CACtB,MAAO,EAAK,OAAO,UAAU,CAE7B,YAAc,GAAM,EAAE,gBAAgB,CACtC,OAAQ,EAAK,KAAO,EAAM,YAEzB,EAAK,QAAU,EAAK,OAAO,UAAU,EAJjC,EAAK,GAKM,CAEpB,CAEF,OACE,EAAC,EAAS,QAAA,CAAA,SAAA,CACP,EACA,GAAa,EAAC,EAAA,CAAwB,GAAI,EAAA,CAAkB,CAC5D,CAAC,GAAa,EAAQ,SAAW,GAChC,EAAC,EAAA,CAAoB,GAAI,EAAA,CAAc,GAExB"}
@@ -15,6 +15,7 @@ type SelectProps = Omit<DropdownProps, 'children' | 'classNames' | 'target'> & {
15
15
  searchPlaceholder?: string;
16
16
  searchStartSlot?: ReactNode;
17
17
  searchClassNames?: SelectSearchClassNames;
18
+ startSlot?: ReactNode;
18
19
  classNames?: DropdownProps['classNames'] & {
19
20
  target?: ComboboxTargetProps['classNames'] & {
20
21
  clearButton?: NonNullable<ComboboxTargetProps['clearButtonProps']>['classNames'];
@@ -33,6 +34,7 @@ declare const Select: ({
33
34
  searchPlaceholder,
34
35
  searchStartSlot,
35
36
  searchClassNames,
37
+ startSlot,
36
38
  classNames,
37
39
  ...props
38
40
  }: SelectProps) => react_jsx_runtime0.JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"Select.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"mappings":";;;;;;;KAsCY,WAAA,GAAc,IAAA,CACxB,aAAA;EAGA,KAAA;EACA,WAAA;EACA,SAAA;EACA,eAAA;EACA,SAAA;EACA,UAAA;EACA,iBAAA;EACA,eAAA,GAAkB,SAAA;EAClB,gBAAA,GAAmB,sBAAA;EACnB,UAAA,GAAa,aAAA;IACX,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;MAEF,OAAA,GAAU,WAAA,CAAY,mBAAA;IAAA;IAExB,UAAA,GAAa,WAAA,CAAY,aAAA;EAAA;AAAA;AAAA,cAIhB,MAAA;EAAU,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,eAAA;EAAA,SAAA;EAAA,UAAA;EAAA,iBAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAYpB,WAAA,KAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
1
+ {"version":3,"file":"Select.d.mts","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"mappings":";;;;;;;KAsCY,WAAA,GAAc,IAAA,CACxB,aAAA;EAGA,KAAA;EACA,WAAA;EACA,SAAA;EACA,eAAA;EACA,SAAA;EACA,UAAA;EACA,iBAAA;EACA,eAAA,GAAkB,SAAA;EAClB,gBAAA,GAAmB,sBAAA;EACnB,SAAA,GAAY,SAAA;EACZ,UAAA,GAAa,aAAA;IACX,MAAA,GAAS,mBAAA;MACP,WAAA,GAAc,WAAA,CACZ,mBAAA;MAEF,OAAA,GAAU,WAAA,CAAY,mBAAA;IAAA;IAExB,UAAA,GAAa,WAAA,CAAY,aAAA;EAAA;AAAA;AAAA,cAIhB,MAAA;EAAU,KAAA;EAAA,WAAA;EAAA,SAAA;EAAA,eAAA;EAAA,SAAA;EAAA,UAAA;EAAA,iBAAA;EAAA,eAAA;EAAA,gBAAA;EAAA,SAAA;EAAA,UAAA;EAAA,GAAA;AAAA,GAapB,WAAA,KAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
@@ -1,2 +1,2 @@
1
- import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{ComboboxTarget as n}from"../combobox/ComboboxTarget.mjs";import{SelectSearch as r}from"./SelectSearch.mjs";import{select as i,selectChevron as a,selectChevronIcon as o,selectChevronIconRoot as s,selectChevronRoot as c,selectClearButton as l,selectClearButtonIcon as u,selectClearButtonIconRaw as d,selectClearButtonIconRawRoot as f,selectClearButtonRoot as p,selectEmpty as m,selectOption as h,selectOptions as g,selectRoot as _,selectScrollAreaAutosize as v,selectSearchInput as y,selectSearchSection as b,selectSearchWrapper as x,selectTextInput as S,selectTextInputDescription as C,selectTextInputError as w,selectTextInputInput as T,selectTextInputLabel as E,selectTextInputRequired as D,selectTextInputRoot as O,selectTextInputSection as k,selectTextInputWrapper as A}from"@mage-ui/styled-system/recipes";import{jsx as j}from"react/jsx-runtime";const M=({label:M,placeholder:N,clearable:P=!0,clearButtonText:F,emptyText:I,searchable:L,searchPlaceholder:R,searchStartSlot:z,searchClassNames:B,classNames:V,...H})=>{let{target:U,scrollArea:W,...G}=V||{},{clearButton:K,chevron:q,...J}=U||{},Y=I??(L?`No results`:void 0),X={placeholder:N,label:M,clearable:P,readOnly:!0,closeOnBlur:!L,classNames:{dropdownTextInput:J?.dropdownTextInput??S(),root:J?.root??O(),label:J?.label??E(),description:J?.description??C(),error:J?.error??w(),wrapper:J?.wrapper??A(),input:J?.input??T(),section:J?.section??k(),required:J?.required??D()},clearButtonProps:{label:F,classNames:{clearButton:K?.clearButton??l(),root:K?.root??p(),icon:K?.icon??u(),iconRaw:{iconRaw:K?.iconRaw?.iconRaw??d(),root:K?.iconRaw?.root??f()}}},chevronProps:{classNames:{chevron:q?.chevron??a(),root:q?.root??c(),open:{iconRaw:q?.open?.iconRaw??o(),root:q?.open?.root??s()},close:{iconRaw:q?.close?.iconRaw??o(),root:q?.close?.root??s()}}}};return j(e,{"data-searchable":L,classNames:{dropdown:G?.dropdown??i(),root:G?.root??_(),options:G?.options??g(),option:G?.option??h(),empty:G?.empty??m(),search:G?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:W?.dropdownScrollAreaAutosize??v()}},target:j(n,{...X}),dropdownTopSlot:L&&j(r,{searchPlaceholder:R,startSlot:z,classNames:{input:B?.input??y(),wrapper:B?.wrapper??x(),section:B?.section??b()}}),...H,children:j(t,{emptyProps:{emptyText:Y,classNames:{empty:G?.empty??m()}},creatableProps:{creatable:!1}})})};export{M as Select};
1
+ import{Dropdown as e}from"../Dropdown.mjs";import{ComboboxOptions as t}from"../combobox/ComboboxOptions.mjs";import{ComboboxTarget as n}from"../combobox/ComboboxTarget.mjs";import{SelectSearch as r}from"./SelectSearch.mjs";import{select as i,selectChevron as a,selectChevronIcon as o,selectChevronIconRoot as s,selectChevronRoot as c,selectClearButton as l,selectClearButtonIcon as u,selectClearButtonIconRaw as d,selectClearButtonIconRawRoot as f,selectClearButtonRoot as p,selectEmpty as m,selectOption as h,selectOptions as g,selectRoot as _,selectScrollAreaAutosize as v,selectSearchInput as y,selectSearchSection as b,selectSearchWrapper as x,selectTextInput as S,selectTextInputDescription as C,selectTextInputError as w,selectTextInputInput as T,selectTextInputLabel as E,selectTextInputRequired as D,selectTextInputRoot as O,selectTextInputSection as k,selectTextInputWrapper as A}from"@mage-ui/styled-system/recipes";import{jsx as j}from"react/jsx-runtime";const M=({label:M,placeholder:N,clearable:P=!0,clearButtonText:F,emptyText:I,searchable:L,searchPlaceholder:R,searchStartSlot:z,searchClassNames:B,startSlot:V,classNames:H,...U})=>{let{target:W,scrollArea:G,...K}=H||{},{clearButton:q,chevron:J,...Y}=W||{},X=I??(L?`No results`:void 0),Z={placeholder:N,label:M,clearable:P,readOnly:!0,closeOnBlur:!L,startSlot:V,classNames:{dropdownTextInput:Y?.dropdownTextInput??S(),root:Y?.root??O(),label:Y?.label??E(),description:Y?.description??C(),error:Y?.error??w(),wrapper:Y?.wrapper??A(),input:Y?.input??T(),section:Y?.section??k(),required:Y?.required??D()},clearButtonProps:{label:F,classNames:{clearButton:q?.clearButton??l(),root:q?.root??p(),icon:q?.icon??u(),iconRaw:{iconRaw:q?.iconRaw?.iconRaw??d(),root:q?.iconRaw?.root??f()}}},chevronProps:{classNames:{chevron:J?.chevron??a(),root:J?.root??c(),open:{iconRaw:J?.open?.iconRaw??o(),root:J?.open?.root??s()},close:{iconRaw:J?.close?.iconRaw??o(),root:J?.close?.root??s()}}}};return j(e,{"data-searchable":L,classNames:{dropdown:K?.dropdown??i(),root:K?.root??_(),options:K?.options??g(),option:K?.option??h(),empty:K?.empty??m(),search:K?.search},scrollAreaProps:{classNames:{dropdownScrollAreaAutosize:G?.dropdownScrollAreaAutosize??v()}},target:j(n,{...Z}),dropdownTopSlot:L&&j(r,{searchPlaceholder:R,startSlot:z,classNames:{input:B?.input??y(),wrapper:B?.wrapper??x(),section:B?.section??b()}}),...U,children:j(t,{emptyProps:{emptyText:X,classNames:{empty:K?.empty??m()}},creatableProps:{creatable:!1}})})};export{M as Select};
2
2
  //# sourceMappingURL=Select.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n select,\n selectChevron,\n selectChevronIcon,\n selectChevronIconRoot,\n selectChevronRoot,\n selectClearButton,\n selectClearButtonIcon,\n selectClearButtonIconRaw,\n selectClearButtonIconRawRoot,\n selectClearButtonRoot,\n selectEmpty,\n selectOption,\n selectOptions,\n selectRoot,\n selectScrollAreaAutosize,\n selectSearchInput,\n selectSearchSection,\n selectSearchWrapper,\n selectTextInput,\n selectTextInputDescription,\n selectTextInputError,\n selectTextInputInput,\n selectTextInputLabel,\n selectTextInputRequired,\n selectTextInputRoot,\n selectTextInputSection,\n selectTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { ComboboxTarget } from '../combobox/ComboboxTarget';\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport { SelectSearch, type SelectSearchClassNames } from './SelectSearch';\n\nexport type SelectProps = Omit<\n DropdownProps,\n 'children' | 'classNames' | 'target'\n> & {\n label?: string;\n placeholder?: string;\n clearable?: boolean;\n clearButtonText?: string;\n emptyText?: string;\n searchable?: boolean;\n searchPlaceholder?: string;\n searchStartSlot?: ReactNode;\n searchClassNames?: SelectSearchClassNames;\n classNames?: DropdownProps['classNames'] & {\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n };\n scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n };\n};\n\nexport const Select = ({\n label,\n placeholder,\n clearable = true,\n clearButtonText,\n emptyText,\n searchable,\n searchPlaceholder,\n searchStartSlot,\n searchClassNames,\n classNames,\n ...props\n}: SelectProps) => {\n const {\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const {\n clearButton: clearButtonClassNames,\n chevron: chevronClassNames,\n ...restTargetClassNames\n } = targetClassNames || {};\n const resolvedEmptyText =\n emptyText ?? (searchable ? 'No results' : undefined);\n\n const targetProps = {\n placeholder,\n label,\n clearable,\n readOnly: true,\n closeOnBlur: !searchable,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? selectTextInput(),\n root: restTargetClassNames?.root ?? selectTextInputRoot(),\n label: restTargetClassNames?.label ?? selectTextInputLabel(),\n description:\n restTargetClassNames?.description ?? selectTextInputDescription(),\n error: restTargetClassNames?.error ?? selectTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? selectTextInputWrapper(),\n input: restTargetClassNames?.input ?? selectTextInputInput(),\n section: restTargetClassNames?.section ?? selectTextInputSection(),\n required: restTargetClassNames?.required ?? selectTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton: clearButtonClassNames?.clearButton ?? selectClearButton(),\n root: clearButtonClassNames?.root ?? selectClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? selectClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n selectClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n selectClearButtonIconRawRoot(),\n },\n },\n },\n chevronProps: {\n classNames: {\n chevron: chevronClassNames?.chevron ?? selectChevron(),\n root: chevronClassNames?.root ?? selectChevronRoot(),\n open: {\n iconRaw: chevronClassNames?.open?.iconRaw ?? selectChevronIcon(),\n root: chevronClassNames?.open?.root ?? selectChevronIconRoot(),\n },\n close: {\n iconRaw: chevronClassNames?.close?.iconRaw ?? selectChevronIcon(),\n root: chevronClassNames?.close?.root ?? selectChevronIconRoot(),\n },\n },\n },\n };\n\n return (\n <Dropdown\n data-searchable={searchable}\n classNames={{\n dropdown: dropdownClassNames?.dropdown ?? select(),\n root: dropdownClassNames?.root ?? selectRoot(),\n options: dropdownClassNames?.options ?? selectOptions(),\n option: dropdownClassNames?.option ?? selectOption(),\n empty: dropdownClassNames?.empty ?? selectEmpty(),\n search: dropdownClassNames?.search,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n selectScrollAreaAutosize(),\n },\n }}\n target={<ComboboxTarget {...targetProps} />}\n dropdownTopSlot={\n searchable && (\n <SelectSearch\n searchPlaceholder={searchPlaceholder}\n startSlot={searchStartSlot}\n classNames={{\n input: searchClassNames?.input ?? selectSearchInput(),\n wrapper: searchClassNames?.wrapper ?? selectSearchWrapper(),\n section: searchClassNames?.section ?? selectSearchSection(),\n }}\n />\n )\n }\n {...props}\n >\n <ComboboxOptions\n emptyProps={{\n emptyText: resolvedEmptyText,\n classNames: {\n empty: dropdownClassNames?.empty ?? selectEmpty(),\n },\n }}\n creatableProps={{\n creatable: false,\n }}\n />\n </Dropdown>\n );\n};\n"],"mappings":"s8BA8DA,MAAa,GAAU,CACrB,QACA,cACA,YAAY,GACZ,kBACA,YACA,aACA,oBACA,kBACA,mBACA,aACA,GAAG,KACc,CACjB,GAAM,CACJ,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CACpB,EACJ,IAAc,EAAa,aAAe,IAAA,IAEtC,EAAc,CAClB,cACA,QACA,YACA,SAAU,GACV,YAAa,CAAC,EACd,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAiB,CAC9D,KAAM,GAAsB,MAAQ,GAAqB,CACzD,MAAO,GAAsB,OAAS,GAAsB,CAC5D,YACE,GAAsB,aAAe,GAA4B,CACnE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,SAAU,GAAsB,UAAY,GAAyB,CACtE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YAAa,GAAuB,aAAe,GAAmB,CACtE,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA0B,CAC5B,KACE,GAAuB,SAAS,MAChC,GAA8B,CACjC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAe,CACtD,KAAM,GAAmB,MAAQ,GAAmB,CACpD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAmB,CAChE,KAAM,GAAmB,MAAM,MAAQ,GAAuB,CAC/D,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAmB,CACjE,KAAM,GAAmB,OAAO,MAAQ,GAAuB,CAChE,CACF,CACF,CACF,CAED,OACE,EAAC,EAAA,CACC,kBAAiB,EACjB,WAAY,CACV,SAAU,GAAoB,UAAY,GAAQ,CAClD,KAAM,GAAoB,MAAQ,GAAY,CAC9C,QAAS,GAAoB,SAAW,GAAe,CACvD,OAAQ,GAAoB,QAAU,GAAc,CACpD,MAAO,GAAoB,OAAS,GAAa,CACjD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA0B,CAC7B,CACF,CACD,OAAQ,EAAC,EAAA,CAAe,GAAI,EAAA,CAAe,CAC3C,gBACE,GACE,EAAC,EAAA,CACoB,oBACnB,UAAW,EACX,WAAY,CACV,MAAO,GAAkB,OAAS,GAAmB,CACrD,QAAS,GAAkB,SAAW,GAAqB,CAC3D,QAAS,GAAkB,SAAW,GAAqB,CAC5D,EACD,CAGN,GAAI,WAEJ,EAAC,EAAA,CACC,WAAY,CACV,UAAW,EACX,WAAY,CACV,MAAO,GAAoB,OAAS,GAAa,CAClD,CACF,CACD,eAAgB,CACd,UAAW,GACZ,EACD,EACO"}
1
+ {"version":3,"file":"Select.mjs","names":[],"sources":["../../../../../src/components/controls/dropdown/select/Select.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n select,\n selectChevron,\n selectChevronIcon,\n selectChevronIconRoot,\n selectChevronRoot,\n selectClearButton,\n selectClearButtonIcon,\n selectClearButtonIconRaw,\n selectClearButtonIconRawRoot,\n selectClearButtonRoot,\n selectEmpty,\n selectOption,\n selectOptions,\n selectRoot,\n selectScrollAreaAutosize,\n selectSearchInput,\n selectSearchSection,\n selectSearchWrapper,\n selectTextInput,\n selectTextInputDescription,\n selectTextInputError,\n selectTextInputInput,\n selectTextInputLabel,\n selectTextInputRequired,\n selectTextInputRoot,\n selectTextInputSection,\n selectTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { ComboboxOptions } from '../combobox/ComboboxOptions';\nimport type { ComboboxTargetProps } from '../combobox/ComboboxTarget';\nimport { ComboboxTarget } from '../combobox/ComboboxTarget';\nimport { Dropdown, type DropdownProps } from '../Dropdown';\nimport { SelectSearch, type SelectSearchClassNames } from './SelectSearch';\n\nexport type SelectProps = Omit<\n DropdownProps,\n 'children' | 'classNames' | 'target'\n> & {\n label?: string;\n placeholder?: string;\n clearable?: boolean;\n clearButtonText?: string;\n emptyText?: string;\n searchable?: boolean;\n searchPlaceholder?: string;\n searchStartSlot?: ReactNode;\n searchClassNames?: SelectSearchClassNames;\n startSlot?: ReactNode;\n classNames?: DropdownProps['classNames'] & {\n target?: ComboboxTargetProps['classNames'] & {\n clearButton?: NonNullable<\n ComboboxTargetProps['clearButtonProps']\n >['classNames'];\n chevron?: NonNullable<ComboboxTargetProps['chevronProps']>['classNames'];\n };\n scrollArea?: NonNullable<DropdownProps['scrollAreaProps']>['classNames'];\n };\n};\n\nexport const Select = ({\n label,\n placeholder,\n clearable = true,\n clearButtonText,\n emptyText,\n searchable,\n searchPlaceholder,\n searchStartSlot,\n searchClassNames,\n startSlot,\n classNames,\n ...props\n}: SelectProps) => {\n const {\n target: targetClassNames,\n scrollArea: scrollAreaClassNames,\n ...dropdownClassNames\n } = classNames || {};\n\n const {\n clearButton: clearButtonClassNames,\n chevron: chevronClassNames,\n ...restTargetClassNames\n } = targetClassNames || {};\n const resolvedEmptyText =\n emptyText ?? (searchable ? 'No results' : undefined);\n\n const targetProps = {\n placeholder,\n label,\n clearable,\n readOnly: true,\n closeOnBlur: !searchable,\n startSlot,\n classNames: {\n dropdownTextInput:\n restTargetClassNames?.dropdownTextInput ?? selectTextInput(),\n root: restTargetClassNames?.root ?? selectTextInputRoot(),\n label: restTargetClassNames?.label ?? selectTextInputLabel(),\n description:\n restTargetClassNames?.description ?? selectTextInputDescription(),\n error: restTargetClassNames?.error ?? selectTextInputError(),\n wrapper: restTargetClassNames?.wrapper ?? selectTextInputWrapper(),\n input: restTargetClassNames?.input ?? selectTextInputInput(),\n section: restTargetClassNames?.section ?? selectTextInputSection(),\n required: restTargetClassNames?.required ?? selectTextInputRequired(),\n },\n clearButtonProps: {\n label: clearButtonText,\n classNames: {\n clearButton: clearButtonClassNames?.clearButton ?? selectClearButton(),\n root: clearButtonClassNames?.root ?? selectClearButtonRoot(),\n icon: clearButtonClassNames?.icon ?? selectClearButtonIcon(),\n iconRaw: {\n iconRaw:\n clearButtonClassNames?.iconRaw?.iconRaw ??\n selectClearButtonIconRaw(),\n root:\n clearButtonClassNames?.iconRaw?.root ??\n selectClearButtonIconRawRoot(),\n },\n },\n },\n chevronProps: {\n classNames: {\n chevron: chevronClassNames?.chevron ?? selectChevron(),\n root: chevronClassNames?.root ?? selectChevronRoot(),\n open: {\n iconRaw: chevronClassNames?.open?.iconRaw ?? selectChevronIcon(),\n root: chevronClassNames?.open?.root ?? selectChevronIconRoot(),\n },\n close: {\n iconRaw: chevronClassNames?.close?.iconRaw ?? selectChevronIcon(),\n root: chevronClassNames?.close?.root ?? selectChevronIconRoot(),\n },\n },\n },\n };\n\n return (\n <Dropdown\n data-searchable={searchable}\n classNames={{\n dropdown: dropdownClassNames?.dropdown ?? select(),\n root: dropdownClassNames?.root ?? selectRoot(),\n options: dropdownClassNames?.options ?? selectOptions(),\n option: dropdownClassNames?.option ?? selectOption(),\n empty: dropdownClassNames?.empty ?? selectEmpty(),\n search: dropdownClassNames?.search,\n }}\n scrollAreaProps={{\n classNames: {\n dropdownScrollAreaAutosize:\n scrollAreaClassNames?.dropdownScrollAreaAutosize ??\n selectScrollAreaAutosize(),\n },\n }}\n target={<ComboboxTarget {...targetProps} />}\n dropdownTopSlot={\n searchable && (\n <SelectSearch\n searchPlaceholder={searchPlaceholder}\n startSlot={searchStartSlot}\n classNames={{\n input: searchClassNames?.input ?? selectSearchInput(),\n wrapper: searchClassNames?.wrapper ?? selectSearchWrapper(),\n section: searchClassNames?.section ?? selectSearchSection(),\n }}\n />\n )\n }\n {...props}\n >\n <ComboboxOptions\n emptyProps={{\n emptyText: resolvedEmptyText,\n classNames: {\n empty: dropdownClassNames?.empty ?? selectEmpty(),\n },\n }}\n creatableProps={{\n creatable: false,\n }}\n />\n </Dropdown>\n );\n};\n"],"mappings":"s8BA+DA,MAAa,GAAU,CACrB,QACA,cACA,YAAY,GACZ,kBACA,YACA,aACA,oBACA,kBACA,mBACA,YACA,aACA,GAAG,KACc,CACjB,GAAM,CACJ,OAAQ,EACR,WAAY,EACZ,GAAG,GACD,GAAc,EAAE,CAEd,CACJ,YAAa,EACb,QAAS,EACT,GAAG,GACD,GAAoB,EAAE,CACpB,EACJ,IAAc,EAAa,aAAe,IAAA,IAEtC,EAAc,CAClB,cACA,QACA,YACA,SAAU,GACV,YAAa,CAAC,EACd,YACA,WAAY,CACV,kBACE,GAAsB,mBAAqB,GAAiB,CAC9D,KAAM,GAAsB,MAAQ,GAAqB,CACzD,MAAO,GAAsB,OAAS,GAAsB,CAC5D,YACE,GAAsB,aAAe,GAA4B,CACnE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,MAAO,GAAsB,OAAS,GAAsB,CAC5D,QAAS,GAAsB,SAAW,GAAwB,CAClE,SAAU,GAAsB,UAAY,GAAyB,CACtE,CACD,iBAAkB,CAChB,MAAO,EACP,WAAY,CACV,YAAa,GAAuB,aAAe,GAAmB,CACtE,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,KAAM,GAAuB,MAAQ,GAAuB,CAC5D,QAAS,CACP,QACE,GAAuB,SAAS,SAChC,GAA0B,CAC5B,KACE,GAAuB,SAAS,MAChC,GAA8B,CACjC,CACF,CACF,CACD,aAAc,CACZ,WAAY,CACV,QAAS,GAAmB,SAAW,GAAe,CACtD,KAAM,GAAmB,MAAQ,GAAmB,CACpD,KAAM,CACJ,QAAS,GAAmB,MAAM,SAAW,GAAmB,CAChE,KAAM,GAAmB,MAAM,MAAQ,GAAuB,CAC/D,CACD,MAAO,CACL,QAAS,GAAmB,OAAO,SAAW,GAAmB,CACjE,KAAM,GAAmB,OAAO,MAAQ,GAAuB,CAChE,CACF,CACF,CACF,CAED,OACE,EAAC,EAAA,CACC,kBAAiB,EACjB,WAAY,CACV,SAAU,GAAoB,UAAY,GAAQ,CAClD,KAAM,GAAoB,MAAQ,GAAY,CAC9C,QAAS,GAAoB,SAAW,GAAe,CACvD,OAAQ,GAAoB,QAAU,GAAc,CACpD,MAAO,GAAoB,OAAS,GAAa,CACjD,OAAQ,GAAoB,OAC7B,CACD,gBAAiB,CACf,WAAY,CACV,2BACE,GAAsB,4BACtB,GAA0B,CAC7B,CACF,CACD,OAAQ,EAAC,EAAA,CAAe,GAAI,EAAA,CAAe,CAC3C,gBACE,GACE,EAAC,EAAA,CACoB,oBACnB,UAAW,EACX,WAAY,CACV,MAAO,GAAkB,OAAS,GAAmB,CACrD,QAAS,GAAkB,SAAW,GAAqB,CAC3D,QAAS,GAAkB,SAAW,GAAqB,CAC5D,EACD,CAGN,GAAI,WAEJ,EAAC,EAAA,CACC,WAAY,CACV,UAAW,EACX,WAAY,CACV,MAAO,GAAoB,OAAS,GAAa,CAClD,CACF,CACD,eAAgB,CACd,UAAW,GACZ,EACD,EACO"}
@@ -0,0 +1,64 @@
1
+ import { TableClassNames, TableProps } from "../../table/TableRoot.mjs";
2
+ import "../../table/Table.mjs";
3
+ import { StatelessDataTableSlots } from "./StatelessDataTableSlotRow.mjs";
4
+ import { ReactNode } from "react";
5
+ import { ColumnDef, ExpandedState, OnChangeFn, PaginationState, RowSelectionState, SortingState, TableOptions } from "@tanstack/react-table";
6
+
7
+ //#region src/components/data-display/datatables/datatable-stateless/StatelessDataTable.d.ts
8
+ type StatelessDataTableSortingConfig = {
9
+ state: SortingState;
10
+ onChange: OnChangeFn<SortingState>;
11
+ };
12
+ type StatelessDataTablePaginationConfig = {
13
+ state: PaginationState;
14
+ onChange: OnChangeFn<PaginationState>;
15
+ pageCount: number;
16
+ rowCount?: number;
17
+ };
18
+ type StatelessDataTableSelectionConfig<Data = unknown> = {
19
+ state: RowSelectionState;
20
+ onChange: OnChangeFn<RowSelectionState>;
21
+ getRowId?: (row: Data) => string;
22
+ isRowDisabled?: (row: Data) => boolean;
23
+ bulkActions?: (selectedIds: string[]) => ReactNode;
24
+ };
25
+ type StatelessDataTableExpansionConfig<Data = unknown> = {
26
+ state: ExpandedState;
27
+ onChange: OnChangeFn<ExpandedState>;
28
+ renderContent: (row: Data) => ReactNode;
29
+ };
30
+ type StatelessDataTableTableConfig = Pick<TableProps, 'layout' | 'striped' | 'highlightOnHover' | 'stickyHeader' | 'withTableBorder' | 'withColumnBorders' | 'withRowBorders' | 'scrollable'>;
31
+ type StatelessDataTableClassNames = {
32
+ dataTable?: string;
33
+ root?: string;
34
+ slotRow?: string;
35
+ bulkBar?: string;
36
+ loading?: string;
37
+ empty?: string;
38
+ table?: TableClassNames;
39
+ };
40
+ type StatelessDataTableManagedOptions<Data> = Partial<Omit<TableOptions<Data>, 'columns' | 'data' | 'enableRowSelection' | 'enableSorting' | 'getCoreRowModel' | 'getExpandedRowModel' | 'getPaginationRowModel' | 'getRowId' | 'getSortedRowModel' | 'manualPagination' | 'manualSorting' | 'onExpandedChange' | 'onPaginationChange' | 'onRowSelectionChange' | 'onSortingChange' | 'pageCount' | 'rowCount' | 'state'>>;
41
+ type StatelessDataTableProps<Data> = {
42
+ data: Data[];
43
+ columns: ColumnDef<Data, unknown>[];
44
+ sorting?: StatelessDataTableSortingConfig;
45
+ pagination?: StatelessDataTablePaginationConfig;
46
+ selection?: StatelessDataTableSelectionConfig<Data>;
47
+ expansion?: StatelessDataTableExpansionConfig<Data>;
48
+ loading?: boolean;
49
+ onRefresh?: () => void | Promise<void>;
50
+ slots?: StatelessDataTableSlots<Data>;
51
+ classNames?: StatelessDataTableClassNames;
52
+ options?: StatelessDataTableManagedOptions<Data>;
53
+ } & StatelessDataTableTableConfig;
54
+ declare const StatelessDataTable: <Data>({
55
+ classNames,
56
+ slots,
57
+ loading,
58
+ selection,
59
+ expansion,
60
+ ...props
61
+ }: StatelessDataTableProps<Data>) => ReactNode;
62
+ //#endregion
63
+ export { StatelessDataTable, StatelessDataTableClassNames, StatelessDataTableExpansionConfig, StatelessDataTablePaginationConfig, StatelessDataTableProps, StatelessDataTableSelectionConfig, StatelessDataTableSortingConfig, StatelessDataTableTableConfig };
64
+ //# sourceMappingURL=StatelessDataTable.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatelessDataTable.d.mts","names":[],"sources":["../../../../../src/components/data-display/datatables/datatable-stateless/StatelessDataTable.tsx"],"mappings":";;;;;;;KAgCY,+BAAA;EACV,KAAA,EAAO,YAAA;EACP,QAAA,EAAU,UAAA,CAAW,YAAA;AAAA;AAAA,KAGX,kCAAA;EACV,KAAA,EAAO,eAAA;EACP,QAAA,EAAU,UAAA,CAAW,eAAA;EACrB,SAAA;EACA,QAAA;AAAA;AAAA,KAGU,iCAAA;EACV,KAAA,EAAO,iBAAA;EACP,QAAA,EAAU,UAAA,CAAW,iBAAA;EACrB,QAAA,IAAY,GAAA,EAAK,IAAA;EACjB,aAAA,IAAiB,GAAA,EAAK,IAAA;EACtB,WAAA,IAAe,WAAA,eAA0B,SAAA;AAAA;AAAA,KAG/B,iCAAA;EACV,KAAA,EAAO,aAAA;EACP,QAAA,EAAU,UAAA,CAAW,aAAA;EACrB,aAAA,GAAgB,GAAA,EAAK,IAAA,KAAS,SAAA;AAAA;AAAA,KAGpB,6BAAA,GAAgC,IAAA,CAC1C,UAAA;AAAA,KAWU,4BAAA;EACV,SAAA;EACA,IAAA;EACA,OAAA;EACA,OAAA;EACA,OAAA;EACA,KAAA;EACA,KAAA,GAAQ,eAAA;AAAA;AAAA,KAGL,gCAAA,SAAyC,OAAA,CAC5C,IAAA,CACE,YAAA,CAAa,IAAA;AAAA,KAsBL,uBAAA;EACV,IAAA,EAAM,IAAA;EACN,OAAA,EAAS,SAAA,CAAU,IAAA;EACnB,OAAA,GAAU,+BAAA;EACV,UAAA,GAAa,kCAAA;EACb,SAAA,GAAY,iCAAA,CAAkC,IAAA;EAC9C,SAAA,GAAY,iCAAA,CAAkC,IAAA;EAC9C,OAAA;EACA,SAAA,gBAAyB,OAAA;EACzB,KAAA,GAAQ,uBAAA,CAAwB,IAAA;EAChC,UAAA,GAAa,4BAAA;EACb,OAAA,GAAU,gCAAA,CAAiC,IAAA;AAAA,IACzC,6BAAA;AAAA,cAES,kBAAA;EAA6B,UAAA;EAAA,KAAA;EAAA,OAAA;EAAA,SAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAOvC,uBAAA,CAAwB,IAAA,MAAQ,SAAA"}
@@ -0,0 +1,2 @@
1
+ import{Table as e}from"../../table/Table.mjs";import{StatelessDataTableBody as t}from"./StatelessDataTableBody.mjs";import{StatelessDataTableBulkBar as n}from"./StatelessDataTableBulkBar.mjs";import{StatelessDataTableHeader as r}from"./StatelessDataTableHeader.mjs";import{StatelessDataTableRootContainer as i}from"./StatelessDataTableRootContainer.mjs";import{StatelessDataTableSlotRow as a}from"./StatelessDataTableSlotRow.mjs";import{StatelessDataTableViewport as o}from"./StatelessDataTableViewport.mjs";import{useStatelessDataTable as s}from"./useStatelessDataTable.mjs";import{StatelessDataTableContextProvider as c}from"./useStatelessDataTableContext.mjs";import{jsx as l,jsxs as u}from"react/jsx-runtime";const d=({classNames:d,slots:f,loading:p,selection:m,expansion:h,...g})=>{let{headerRef:_,headerHeight:v,layout:y,slotProps:b,table:x}=s({...g,loading:p,selection:m,expansion:h});return l(c,{value:b,children:u(i,{busy:p,classNames:d,children:[l(a,{slot:f?.top,slotProps:b,className:d?.slotRow}),l(o,{loading:p,headerHeight:v,loadingClassName:d?.loading,children:u(e,{...g,layout:y,classNames:d?.table,children:[l(r,{headerGroups:x.getHeaderGroups(),totalSize:x.getTotalSize(),theadRef:_}),l(t,{rows:x.getRowModel().rows,colCount:x.getVisibleLeafColumns().length,loading:p,empty:f?.empty,slotProps:b,emptyClassName:d?.empty,expansion:h,selection:m})]})}),l(a,{slot:f?.bottom,slotProps:b,className:d?.slotRow}),l(n,{selectedIds:b.selectedIds,className:d?.bulkBar,selection:m})]})})};export{d as StatelessDataTable};
2
+ //# sourceMappingURL=StatelessDataTable.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatelessDataTable.mjs","names":[],"sources":["../../../../../src/components/data-display/datatables/datatable-stateless/StatelessDataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type {\n ColumnDef,\n ExpandedState,\n OnChangeFn,\n PaginationState,\n RowSelectionState,\n SortingState,\n TableOptions,\n} from '@tanstack/react-table';\n\nimport {\n Table,\n type TableClassNames,\n type TableProps,\n} from '../../table/Table';\nimport { StatelessDataTableBody } from './StatelessDataTableBody';\nimport { StatelessDataTableBulkBar } from './StatelessDataTableBulkBar';\nimport { StatelessDataTableHeader } from './StatelessDataTableHeader';\nimport { StatelessDataTableRootContainer } from './StatelessDataTableRootContainer';\nimport {\n StatelessDataTableSlotRow,\n type StatelessDataTableSlots,\n} from './StatelessDataTableSlotRow';\nimport { StatelessDataTableViewport } from './StatelessDataTableViewport';\nimport { useStatelessDataTable } from './useStatelessDataTable';\nimport {\n StatelessDataTableContextProvider,\n type StatelessDataTableContextValue,\n} from './useStatelessDataTableContext';\n\nexport type StatelessDataTableSortingConfig = {\n state: SortingState;\n onChange: OnChangeFn<SortingState>;\n};\n\nexport type StatelessDataTablePaginationConfig = {\n state: PaginationState;\n onChange: OnChangeFn<PaginationState>;\n pageCount: number;\n rowCount?: number;\n};\n\nexport type StatelessDataTableSelectionConfig<Data = unknown> = {\n state: RowSelectionState;\n onChange: OnChangeFn<RowSelectionState>;\n getRowId?: (row: Data) => string;\n isRowDisabled?: (row: Data) => boolean;\n bulkActions?: (selectedIds: string[]) => ReactNode;\n};\n\nexport type StatelessDataTableExpansionConfig<Data = unknown> = {\n state: ExpandedState;\n onChange: OnChangeFn<ExpandedState>;\n renderContent: (row: Data) => ReactNode;\n};\n\nexport type StatelessDataTableTableConfig = Pick<\n TableProps,\n | 'layout'\n | 'striped'\n | 'highlightOnHover'\n | 'stickyHeader'\n | 'withTableBorder'\n | 'withColumnBorders'\n | 'withRowBorders'\n | 'scrollable'\n>;\n\nexport type StatelessDataTableClassNames = {\n dataTable?: string;\n root?: string;\n slotRow?: string;\n bulkBar?: string;\n loading?: string;\n empty?: string;\n table?: TableClassNames;\n};\n\ntype StatelessDataTableManagedOptions<Data> = Partial<\n Omit<\n TableOptions<Data>,\n | 'columns'\n | 'data'\n | 'enableRowSelection'\n | 'enableSorting'\n | 'getCoreRowModel'\n | 'getExpandedRowModel'\n | 'getPaginationRowModel'\n | 'getRowId'\n | 'getSortedRowModel'\n | 'manualPagination'\n | 'manualSorting'\n | 'onExpandedChange'\n | 'onPaginationChange'\n | 'onRowSelectionChange'\n | 'onSortingChange'\n | 'pageCount'\n | 'rowCount'\n | 'state'\n >\n>;\n\nexport type StatelessDataTableProps<Data> = {\n data: Data[];\n columns: ColumnDef<Data, unknown>[];\n sorting?: StatelessDataTableSortingConfig;\n pagination?: StatelessDataTablePaginationConfig;\n selection?: StatelessDataTableSelectionConfig<Data>;\n expansion?: StatelessDataTableExpansionConfig<Data>;\n loading?: boolean;\n onRefresh?: () => void | Promise<void>;\n slots?: StatelessDataTableSlots<Data>;\n classNames?: StatelessDataTableClassNames;\n options?: StatelessDataTableManagedOptions<Data>;\n} & StatelessDataTableTableConfig;\n\nexport const StatelessDataTable = <Data,>({\n classNames,\n slots,\n loading,\n selection,\n expansion,\n ...props\n}: StatelessDataTableProps<Data>): ReactNode => {\n const { headerRef, headerHeight, layout, slotProps, table } =\n useStatelessDataTable({\n ...props,\n loading,\n selection,\n expansion,\n });\n\n return (\n <StatelessDataTableContextProvider\n value={slotProps as unknown as StatelessDataTableContextValue<unknown>}\n >\n <StatelessDataTableRootContainer busy={loading} classNames={classNames}>\n <StatelessDataTableSlotRow\n slot={slots?.top}\n slotProps={slotProps}\n className={classNames?.slotRow}\n />\n\n <StatelessDataTableViewport\n loading={loading}\n headerHeight={headerHeight}\n loadingClassName={classNames?.loading}\n >\n <Table {...props} layout={layout} classNames={classNames?.table}>\n <StatelessDataTableHeader\n headerGroups={table.getHeaderGroups()}\n totalSize={table.getTotalSize()}\n theadRef={headerRef}\n />\n <StatelessDataTableBody\n rows={table.getRowModel().rows}\n colCount={table.getVisibleLeafColumns().length}\n loading={loading}\n empty={slots?.empty}\n slotProps={slotProps}\n emptyClassName={classNames?.empty}\n expansion={expansion}\n selection={selection}\n />\n </Table>\n </StatelessDataTableViewport>\n\n <StatelessDataTableSlotRow\n slot={slots?.bottom}\n slotProps={slotProps}\n className={classNames?.slotRow}\n />\n\n <StatelessDataTableBulkBar\n selectedIds={slotProps.selectedIds}\n className={classNames?.bulkBar}\n selection={selection}\n />\n </StatelessDataTableRootContainer>\n </StatelessDataTableContextProvider>\n );\n};\n"],"mappings":"ysBAsHA,MAAa,GAA6B,CACxC,aACA,QACA,UACA,YACA,YACA,GAAG,KAC2C,CAC9C,GAAM,CAAE,YAAW,eAAc,SAAQ,YAAW,SAClD,EAAsB,CACpB,GAAG,EACH,UACA,YACA,YACD,CAAC,CAEJ,OACE,EAAC,EAAA,CACC,MAAO,WAEP,EAAC,EAAA,CAAgC,KAAM,EAAqB,uBAC1D,EAAC,EAAA,CACC,KAAM,GAAO,IACF,YACX,UAAW,GAAY,SACvB,CAEF,EAAC,EAAA,CACU,UACK,eACd,iBAAkB,GAAY,iBAE9B,EAAC,EAAA,CAAM,GAAI,EAAe,SAAQ,WAAY,GAAY,gBACxD,EAAC,EAAA,CACC,aAAc,EAAM,iBAAiB,CACrC,UAAW,EAAM,cAAc,CAC/B,SAAU,GACV,CACF,EAAC,EAAA,CACC,KAAM,EAAM,aAAa,CAAC,KAC1B,SAAU,EAAM,uBAAuB,CAAC,OAC/B,UACT,MAAO,GAAO,MACH,YACX,eAAgB,GAAY,MACjB,YACA,aACX,CAAA,EACI,EACmB,CAE7B,EAAC,EAAA,CACC,KAAM,GAAO,OACF,YACX,UAAW,GAAY,SACvB,CAEF,EAAC,EAAA,CACC,YAAa,EAAU,YACvB,UAAW,GAAY,QACZ,aACX,GAC8B,EACA"}
@@ -0,0 +1,2 @@
1
+ import{Table as e}from"../../table/Table.mjs";import{dataTableEmpty as t}from"@mage-ui/styled-system/recipes";import{jsx as n}from"react/jsx-runtime";import{flexRender as r}from"@tanstack/react-table";const i=({rows:i,colCount:a,loading:o,empty:s,slotProps:c,emptyClassName:l,expansion:u,selection:d})=>{let f=!o&&i.length===0,p=typeof s==`function`?s(c):s??`No results found`,m=i.flatMap(t=>{let i=n(e.Row,{"data-selected":t.getIsSelected()||void 0,"data-disabled":d&&!t.getCanSelect()||void 0,"data-expanded":t.getIsExpanded()||void 0,children:t.getVisibleCells().map(t=>n(e.Cell,{children:r(t.column.columnDef.cell,t.getContext())},t.id))},`row-${t.id}`);return!u||!t.getIsExpanded()?[i]:[i,n(e.Row,{id:`stateless-data-table-expanded-${t.id}`,children:n(e.Cell,{colSpan:a,style:{padding:0},children:u.renderContent(t.original)})},`expanded-${t.id}`)]});return n(e.Body,{children:f?n(e.Row,{children:n(e.Cell,{colSpan:a,classNames:{td:l??t()},children:p})}):m})};export{i as StatelessDataTableBody};
2
+ //# sourceMappingURL=StatelessDataTableBody.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatelessDataTableBody.mjs","names":[],"sources":["../../../../../src/components/data-display/datatables/datatable-stateless/StatelessDataTableBody.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTableEmpty } from '@mage-ui/styled-system/recipes';\nimport { flexRender, type Row } from '@tanstack/react-table';\n\nimport { Table } from '../../table/Table';\nimport type {\n StatelessDataTableExpansionConfig,\n StatelessDataTableSelectionConfig,\n} from './StatelessDataTable';\nimport type {\n StatelessDataTableSlotContent,\n StatelessDataTableSlotRenderProps,\n} from './StatelessDataTableSlotRow';\n\ntype StatelessDataTableBodyProps<Data> = {\n rows: Row<Data>[];\n colCount: number;\n loading?: boolean;\n empty?: StatelessDataTableSlotContent<Data>;\n slotProps: StatelessDataTableSlotRenderProps<Data>;\n emptyClassName?: string;\n expansion?: StatelessDataTableExpansionConfig<Data>;\n selection?: StatelessDataTableSelectionConfig<Data>;\n};\n\nexport const StatelessDataTableBody = <Data,>({\n rows,\n colCount,\n loading,\n empty,\n slotProps,\n emptyClassName,\n expansion,\n selection,\n}: StatelessDataTableBodyProps<Data>): ReactNode => {\n const showEmptyState = !loading && rows.length === 0;\n const emptyContent =\n typeof empty === 'function'\n ? empty(slotProps)\n : (empty ?? 'No results found');\n const bodyRows = rows.flatMap((row) => {\n const baseRow = (\n <Table.Row\n key={`row-${row.id}`}\n data-selected={row.getIsSelected() || undefined}\n data-disabled={(selection && !row.getCanSelect()) || undefined}\n data-expanded={row.getIsExpanded() || undefined}\n >\n {row.getVisibleCells().map((cell) => (\n <Table.Cell key={cell.id}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </Table.Cell>\n ))}\n </Table.Row>\n );\n\n if (!expansion || !row.getIsExpanded()) {\n return [baseRow];\n }\n\n return [\n baseRow,\n <Table.Row\n key={`expanded-${row.id}`}\n id={`stateless-data-table-expanded-${row.id}`}\n >\n <Table.Cell colSpan={colCount} style={{ padding: 0 }}>\n {expansion.renderContent(row.original)}\n </Table.Cell>\n </Table.Row>,\n ];\n });\n\n return (\n <Table.Body>\n {showEmptyState ? (\n <Table.Row>\n <Table.Cell\n colSpan={colCount}\n classNames={{ td: emptyClassName ?? dataTableEmpty() }}\n >\n {emptyContent}\n </Table.Cell>\n </Table.Row>\n ) : (\n bodyRows\n )}\n </Table.Body>\n );\n};\n"],"mappings":"yMA0BA,MAAa,GAAiC,CAC5C,OACA,WACA,UACA,QACA,YACA,iBACA,YACA,eACkD,CAClD,IAAM,EAAiB,CAAC,GAAW,EAAK,SAAW,EAC7C,EACJ,OAAO,GAAU,WACb,EAAM,EAAU,CACf,GAAS,mBACV,EAAW,EAAK,QAAS,GAAQ,CACrC,IAAM,EACJ,EAAC,EAAM,IAAA,CAEL,gBAAe,EAAI,eAAe,EAAI,IAAA,GACtC,gBAAgB,GAAa,CAAC,EAAI,cAAc,EAAK,IAAA,GACrD,gBAAe,EAAI,eAAe,EAAI,IAAA,YAErC,EAAI,iBAAiB,CAAC,IAAK,GAC1B,EAAC,EAAM,KAAA,CAAA,SACJ,EAAW,EAAK,OAAO,UAAU,KAAM,EAAK,YAAY,CAAC,CAAA,CAD3C,EAAK,GAET,CACb,EATG,OAAO,EAAI,KAUN,CAOd,MAJI,CAAC,GAAa,CAAC,EAAI,eAAe,CAC7B,CAAC,EAAQ,CAGX,CACL,EACA,EAAC,EAAM,IAAA,CAEL,GAAI,iCAAiC,EAAI,cAEzC,EAAC,EAAM,KAAA,CAAK,QAAS,EAAU,MAAO,CAAE,QAAS,EAAG,UACjD,EAAU,cAAc,EAAI,SAAS,EAC3B,EALR,YAAY,EAAI,KAMX,CACb,EACD,CAEF,OACE,EAAC,EAAM,KAAA,CAAA,SACJ,EACC,EAAC,EAAM,IAAA,CAAA,SACL,EAAC,EAAM,KAAA,CACL,QAAS,EACT,WAAY,CAAE,GAAI,GAAkB,GAAgB,CAAE,UAErD,GACU,CAAA,CACH,CAEZ,EAAA,CAES"}
@@ -0,0 +1,2 @@
1
+ import{dataTableBulkBar as e}from"@mage-ui/styled-system/recipes";import{jsxs as t}from"react/jsx-runtime";const n=({selectedIds:n,className:r,selection:i})=>!i?.bulkActions||n.length===0?null:t(`div`,{className:r??e(),children:[t(`span`,{children:[n.length,` selected`]}),i.bulkActions(n)]});export{n as StatelessDataTableBulkBar};
2
+ //# sourceMappingURL=StatelessDataTableBulkBar.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatelessDataTableBulkBar.mjs","names":[],"sources":["../../../../../src/components/data-display/datatables/datatable-stateless/StatelessDataTableBulkBar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTableBulkBar } from '@mage-ui/styled-system/recipes';\n\nimport type { StatelessDataTableSelectionConfig } from './StatelessDataTable';\n\ntype StatelessDataTableBulkBarProps<Data> = {\n selectedIds: string[];\n className?: string;\n selection?: StatelessDataTableSelectionConfig<Data>;\n};\n\nexport const StatelessDataTableBulkBar = <Data,>({\n selectedIds,\n className,\n selection,\n}: StatelessDataTableBulkBarProps<Data>): ReactNode => {\n if (!selection?.bulkActions || selectedIds.length === 0) {\n return null;\n }\n\n return (\n <div className={className ?? dataTableBulkBar()}>\n <span>{selectedIds.length} selected</span>\n {selection.bulkActions(selectedIds)}\n </div>\n );\n};\n"],"mappings":"2GAYA,MAAa,GAAoC,CAC/C,cACA,YACA,eAEI,CAAC,GAAW,aAAe,EAAY,SAAW,EAC7C,KAIP,EAAC,MAAA,CAAI,UAAW,GAAa,GAAkB,WAC7C,EAAC,OAAA,CAAA,SAAA,CAAM,EAAY,OAAO,YAAA,CAAA,CAAgB,CACzC,EAAU,YAAY,EAAY,CAAA,EAC/B"}
@@ -0,0 +1,2 @@
1
+ import{Checkbox as e}from"../../../controls/checkbox/Checkbox.mjs";import{jsx as t}from"react/jsx-runtime";const n=()=>({id:`_select`,size:40,header:({table:n})=>{let r=n.getRowModel().rows,i=r.filter(e=>e.getCanSelect()),a=i.filter(e=>e.getIsSelected()).length,o=r.some(e=>!e.getCanSelect()),s=i.length>0&&a===i.length;return t(e,{"aria-label":`Select all rows`,checked:s&&!o,indeterminate:a>0&&(!s||o),onChange:()=>{n.toggleAllRowsSelected(!s)}})},cell:({row:n})=>t(e,{"aria-label":`Select row ${n.index+1}`,checked:n.getIsSelected(),disabled:!n.getCanSelect(),onChange:n.getToggleSelectedHandler()})}),r=()=>({id:`_expand`,size:40,header:()=>null,cell:({row:e})=>t(`button`,{type:`button`,onClick:e.getToggleExpandedHandler(),"aria-expanded":e.getIsExpanded(),"aria-controls":`stateless-data-table-expanded-${e.id}`,"aria-label":e.getIsExpanded()?`Collapse row`:`Expand row`,style:{cursor:`pointer`,background:`none`,border:`none`,padding:0,display:`flex`,alignItems:`center`,justifyContent:`center`,transition:`transform 0.2s`,transform:e.getIsExpanded()?`rotate(90deg)`:`rotate(0deg)`},children:t(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`currentColor`,"aria-hidden":`true`,focusable:`false`,children:t(`path`,{d:`M6 4l4 4-4 4`,stroke:`currentColor`,strokeWidth:`1.5`,fill:`none`,strokeLinecap:`round`,strokeLinejoin:`round`})})})});export{r as getStatelessDataTableExpandColumn,n as getStatelessDataTableSelectColumn};
2
+ //# sourceMappingURL=StatelessDataTableColumns.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatelessDataTableColumns.mjs","names":[],"sources":["../../../../../src/components/data-display/datatables/datatable-stateless/StatelessDataTableColumns.tsx"],"sourcesContent":["import type { ColumnDef } from '@tanstack/react-table';\n\nimport { Checkbox } from '../../../controls/checkbox/Checkbox';\n\nexport const getStatelessDataTableSelectColumn = <Data,>(): ColumnDef<\n Data,\n unknown\n> => ({\n id: '_select',\n size: 40,\n header: ({ table }) => {\n const rows = table.getRowModel().rows;\n const selectableRows = rows.filter((row) => row.getCanSelect());\n const selectedSelectableCount = selectableRows.filter((row) =>\n row.getIsSelected(),\n ).length;\n const hasDisabledRows = rows.some((row) => !row.getCanSelect());\n const allSelectableSelected =\n selectableRows.length > 0 &&\n selectedSelectableCount === selectableRows.length;\n\n return (\n <Checkbox\n aria-label='Select all rows'\n checked={allSelectableSelected && !hasDisabledRows}\n indeterminate={\n selectedSelectableCount > 0 &&\n (!allSelectableSelected || hasDisabledRows)\n }\n onChange={() => {\n table.toggleAllRowsSelected(!allSelectableSelected);\n }}\n />\n );\n },\n cell: ({ row }) => (\n <Checkbox\n aria-label={`Select row ${row.index + 1}`}\n checked={row.getIsSelected()}\n disabled={!row.getCanSelect()}\n onChange={row.getToggleSelectedHandler()}\n />\n ),\n});\n\nexport const getStatelessDataTableExpandColumn = <Data,>(): ColumnDef<\n Data,\n unknown\n> => ({\n id: '_expand',\n size: 40,\n header: () => null,\n cell: ({ row }) => (\n <button\n type='button'\n onClick={row.getToggleExpandedHandler()}\n aria-expanded={row.getIsExpanded()}\n aria-controls={`stateless-data-table-expanded-${row.id}`}\n aria-label={row.getIsExpanded() ? 'Collapse row' : 'Expand row'}\n style={{\n cursor: 'pointer',\n background: 'none',\n border: 'none',\n padding: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n transition: 'transform 0.2s',\n transform: row.getIsExpanded() ? 'rotate(90deg)' : 'rotate(0deg)',\n }}\n >\n <svg\n width='16'\n height='16'\n viewBox='0 0 16 16'\n fill='currentColor'\n aria-hidden='true'\n focusable='false'\n >\n <path\n d='M6 4l4 4-4 4'\n stroke='currentColor'\n strokeWidth='1.5'\n fill='none'\n strokeLinecap='round'\n strokeLinejoin='round'\n />\n </svg>\n </button>\n ),\n});\n"],"mappings":"2GAIA,MAAa,OAGP,CACJ,GAAI,UACJ,KAAM,GACN,QAAS,CAAE,WAAY,CACrB,IAAM,EAAO,EAAM,aAAa,CAAC,KAC3B,EAAiB,EAAK,OAAQ,GAAQ,EAAI,cAAc,CAAC,CACzD,EAA0B,EAAe,OAAQ,GACrD,EAAI,eAAe,CACpB,CAAC,OACI,EAAkB,EAAK,KAAM,GAAQ,CAAC,EAAI,cAAc,CAAC,CACzD,EACJ,EAAe,OAAS,GACxB,IAA4B,EAAe,OAE7C,OACE,EAAC,EAAA,CACC,aAAW,kBACX,QAAS,GAAyB,CAAC,EACnC,cACE,EAA0B,IACzB,CAAC,GAAyB,GAE7B,aAAgB,CACd,EAAM,sBAAsB,CAAC,EAAsB,GAErD,EAGN,MAAO,CAAE,SACP,EAAC,EAAA,CACC,aAAY,cAAc,EAAI,MAAQ,IACtC,QAAS,EAAI,eAAe,CAC5B,SAAU,CAAC,EAAI,cAAc,CAC7B,SAAU,EAAI,0BAA0B,EACxC,CAEL,EAEY,OAGP,CACJ,GAAI,UACJ,KAAM,GACN,WAAc,KACd,MAAO,CAAE,SACP,EAAC,SAAA,CACC,KAAK,SACL,QAAS,EAAI,0BAA0B,CACvC,gBAAe,EAAI,eAAe,CAClC,gBAAe,iCAAiC,EAAI,KACpD,aAAY,EAAI,eAAe,CAAG,eAAiB,aACnD,MAAO,CACL,OAAQ,UACR,WAAY,OACZ,OAAQ,OACR,QAAS,EACT,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,iBACZ,UAAW,EAAI,eAAe,CAAG,gBAAkB,eACpD,UAED,EAAC,MAAA,CACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,eACL,cAAY,OACZ,UAAU,iBAEV,EAAC,OAAA,CACC,EAAE,eACF,OAAO,eACP,YAAY,MACZ,KAAK,OACL,cAAc,QACd,eAAe,SACf,EACE,EACC,CAEZ"}
@@ -0,0 +1,2 @@
1
+ import{VisuallyHidden as e}from"../../../misc/visually-hidden/VisuallyHidden.mjs";import{Table as t}from"../../table/Table.mjs";import{jsx as n,jsxs as r}from"react/jsx-runtime";import{flexRender as i}from"@tanstack/react-table";const a={width:`100%`,display:`flex`,alignItems:`center`,justifyContent:`space-between`,gap:`0.5rem`,padding:0,border:`none`,background:`none`,color:`inherit`,font:`inherit`,textAlign:`inherit`,cursor:`pointer`,outline:`none`},o=e=>e===`asc`?`ascending`:e===`desc`?`descending`:`none`,s=e=>e===`asc`?`Sorted ascending`:e===`desc`?`Sorted descending`:`Activate to sort`,c=({headerGroups:c,totalSize:l,theadRef:u})=>n(t.Head,{ref:u,children:c.map(c=>n(t.Row,{children:c.headers.map(c=>{let u=c.column.getCanSort(),d=c.column.getIsSorted(),f=l>0?`${c.getSize()/l*100}%`:void 0;return n(t.HeaderCell,{scope:`col`,style:{width:f},"aria-sort":u?o(d):void 0,"data-sortable":u||void 0,"data-sort":d||void 0,children:c.isPlaceholder?null:u?r(`button`,{type:`button`,onClick:c.column.getToggleSortingHandler(),style:a,children:[n(`span`,{children:i(c.column.columnDef.header,c.getContext())}),n(`span`,{"aria-hidden":!0,children:d===`asc`?`↑`:d===`desc`?`↓`:``}),n(e,{children:s(d)})]}):i(c.column.columnDef.header,c.getContext())},c.id)})},c.id))});export{c as StatelessDataTableHeader};
2
+ //# sourceMappingURL=StatelessDataTableHeader.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatelessDataTableHeader.mjs","names":[],"sources":["../../../../../src/components/data-display/datatables/datatable-stateless/StatelessDataTableHeader.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref } from 'react';\n\nimport { flexRender, type HeaderGroup } from '@tanstack/react-table';\n\nimport { VisuallyHidden } from '../../../misc/visually-hidden/VisuallyHidden';\nimport { Table } from '../../table/Table';\n\ntype StatelessDataTableHeaderProps<Data> = {\n headerGroups: HeaderGroup<Data>[];\n totalSize: number;\n theadRef?: Ref<HTMLTableSectionElement>;\n};\n\nconst sortButtonStyle: CSSProperties = {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: '0.5rem',\n padding: 0,\n border: 'none',\n background: 'none',\n color: 'inherit',\n font: 'inherit',\n textAlign: 'inherit',\n cursor: 'pointer',\n outline: 'none',\n};\n\nconst getAriaSort = (sorted: false | 'asc' | 'desc') => {\n if (sorted === 'asc') return 'ascending';\n if (sorted === 'desc') return 'descending';\n return 'none';\n};\n\nconst getSortStatusText = (sorted: false | 'asc' | 'desc') => {\n if (sorted === 'asc') return 'Sorted ascending';\n if (sorted === 'desc') return 'Sorted descending';\n return 'Activate to sort';\n};\n\nexport const StatelessDataTableHeader = <Data,>({\n headerGroups,\n totalSize,\n theadRef,\n}: StatelessDataTableHeaderProps<Data>): ReactNode => (\n <Table.Head ref={theadRef}>\n {headerGroups.map((headerGroup) => (\n <Table.Row key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n const canSort = header.column.getCanSort();\n const sorted = header.column.getIsSorted();\n const width =\n totalSize > 0\n ? `${(header.getSize() / totalSize) * 100}%`\n : undefined;\n\n return (\n <Table.HeaderCell\n key={header.id}\n scope='col'\n style={{ width }}\n aria-sort={canSort ? getAriaSort(sorted) : undefined}\n data-sortable={canSort || undefined}\n data-sort={sorted || undefined}\n >\n {header.isPlaceholder ? null : canSort ? (\n <button\n type='button'\n onClick={header.column.getToggleSortingHandler()}\n style={sortButtonStyle}\n >\n <span>\n {flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n </span>\n <span aria-hidden>\n {sorted === 'asc' ? '↑' : sorted === 'desc' ? '↓' : ''}\n </span>\n <VisuallyHidden>{getSortStatusText(sorted)}</VisuallyHidden>\n </button>\n ) : (\n flexRender(header.column.columnDef.header, header.getContext())\n )}\n </Table.HeaderCell>\n );\n })}\n </Table.Row>\n ))}\n </Table.Head>\n);\n"],"mappings":"qOAaA,MAAM,EAAiC,CACrC,MAAO,OACP,QAAS,OACT,WAAY,SACZ,eAAgB,gBAChB,IAAK,SACL,QAAS,EACT,OAAQ,OACR,WAAY,OACZ,MAAO,UACP,KAAM,UACN,UAAW,UACX,OAAQ,UACR,QAAS,OACV,CAEK,EAAe,GACf,IAAW,MAAc,YACzB,IAAW,OAAe,aACvB,OAGH,EAAqB,GACrB,IAAW,MAAc,mBACzB,IAAW,OAAe,oBACvB,mBAGI,GAAmC,CAC9C,eACA,YACA,cAEA,EAAC,EAAM,KAAA,CAAK,IAAK,WACd,EAAa,IAAK,GACjB,EAAC,EAAM,IAAA,CAAA,SACJ,EAAY,QAAQ,IAAK,GAAW,CACnC,IAAM,EAAU,EAAO,OAAO,YAAY,CACpC,EAAS,EAAO,OAAO,aAAa,CACpC,EACJ,EAAY,EACR,GAAI,EAAO,SAAS,CAAG,EAAa,IAAI,GACxC,IAAA,GAEN,OACE,EAAC,EAAM,WAAA,CAEL,MAAM,MACN,MAAO,CAAE,QAAO,CAChB,YAAW,EAAU,EAAY,EAAO,CAAG,IAAA,GAC3C,gBAAe,GAAW,IAAA,GAC1B,YAAW,GAAU,IAAA,YAEpB,EAAO,cAAgB,KAAO,EAC7B,EAAC,SAAA,CACC,KAAK,SACL,QAAS,EAAO,OAAO,yBAAyB,CAChD,MAAO,YAEP,EAAC,OAAA,CAAA,SACE,EACC,EAAO,OAAO,UAAU,OACxB,EAAO,YAAY,CACpB,CAAA,CACI,CACP,EAAC,OAAA,CAAK,cAAA,YACH,IAAW,MAAQ,IAAM,IAAW,OAAS,IAAM,IAC/C,CACP,EAAC,EAAA,CAAA,SAAgB,EAAkB,EAAO,CAAA,CAAkB,GACrD,CAET,EAAW,EAAO,OAAO,UAAU,OAAQ,EAAO,YAAY,CAAC,EAzB5D,EAAO,GA2BK,EAErB,CAAA,CAxCY,EAAY,GAyChB,CACZ,EACS"}
@@ -0,0 +1,20 @@
1
+ import { ReactNode } from "react";
2
+
3
+ //#region src/components/data-display/datatables/datatable-stateless/StatelessDataTablePageSize.d.ts
4
+ type StatelessDataTablePageSizeProps = {
5
+ value: number;
6
+ options: number[];
7
+ onChange: (size: number) => void;
8
+ label?: string;
9
+ className?: string;
10
+ };
11
+ declare const StatelessDataTablePageSize: ({
12
+ value,
13
+ options,
14
+ onChange,
15
+ label,
16
+ className
17
+ }: StatelessDataTablePageSizeProps) => ReactNode;
18
+ //#endregion
19
+ export { StatelessDataTablePageSize, StatelessDataTablePageSizeProps };
20
+ //# sourceMappingURL=StatelessDataTablePageSize.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatelessDataTablePageSize.d.mts","names":[],"sources":["../../../../../src/components/data-display/datatables/datatable-stateless/StatelessDataTablePageSize.tsx"],"mappings":";;;KAIY,+BAAA;EACV,KAAA;EACA,OAAA;EACA,QAAA,GAAW,IAAA;EACX,KAAA;EACA,SAAA;AAAA;AAAA,cAGW,0BAAA;EAA8B,KAAA;EAAA,OAAA;EAAA,QAAA;EAAA,KAAA;EAAA;AAAA,GAMxC,+BAAA,KAAkC,SAAA"}
@@ -0,0 +1,2 @@
1
+ import{dataTablePageSize as e}from"@mage-ui/styled-system/recipes";import{jsx as t,jsxs as n}from"react/jsx-runtime";const r=({value:r,options:i,onChange:a,label:o=`Rows per page`,className:s})=>n(`label`,{className:s??e(),children:[t(`span`,{children:o}),t(`select`,{value:r,onChange:e=>a(Number(e.target.value)),children:i.map(e=>t(`option`,{value:e,children:e},e))})]});export{r as StatelessDataTablePageSize};
2
+ //# sourceMappingURL=StatelessDataTablePageSize.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatelessDataTablePageSize.mjs","names":[],"sources":["../../../../../src/components/data-display/datatables/datatable-stateless/StatelessDataTablePageSize.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTablePageSize } from '@mage-ui/styled-system/recipes';\n\nexport type StatelessDataTablePageSizeProps = {\n value: number;\n options: number[];\n onChange: (size: number) => void;\n label?: string;\n className?: string;\n};\n\nexport const StatelessDataTablePageSize = ({\n value,\n options,\n onChange,\n label = 'Rows per page',\n className,\n}: StatelessDataTablePageSizeProps): ReactNode => (\n <label className={className ?? dataTablePageSize()}>\n <span>{label}</span>\n <select value={value} onChange={(e) => onChange(Number(e.target.value))}>\n {options.map((size) => (\n <option key={size} value={size}>\n {size}\n </option>\n ))}\n </select>\n </label>\n);\n"],"mappings":"qHAYA,MAAa,GAA8B,CACzC,QACA,UACA,WACA,QAAQ,gBACR,eAEA,EAAC,QAAA,CAAM,UAAW,GAAa,GAAmB,WAChD,EAAC,OAAA,CAAA,SAAM,EAAA,CAAa,CACpB,EAAC,SAAA,CAAc,QAAO,SAAW,GAAM,EAAS,OAAO,EAAE,OAAO,MAAM,CAAC,UACpE,EAAQ,IAAK,GACZ,EAAC,SAAA,CAAkB,MAAO,WACvB,GADU,EAEJ,CACT,EACK,CAAA,EACH"}
@@ -0,0 +1,2 @@
1
+ import{cx as e}from"@mage-ui/styled-system/css";import{dataTable as t,dataTableRoot as n}from"@mage-ui/styled-system/recipes";import{jsx as r}from"react/jsx-runtime";const i=({busy:i,classNames:a,children:o})=>r(`div`,{"aria-busy":i||void 0,className:e(a?.dataTable??t(),a?.root??n()),children:o});export{i as StatelessDataTableRootContainer};
2
+ //# sourceMappingURL=StatelessDataTableRootContainer.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatelessDataTableRootContainer.mjs","names":["dataTableRecipe"],"sources":["../../../../../src/components/data-display/datatables/datatable-stateless/StatelessDataTableRootContainer.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dataTable as dataTableRecipe,\n dataTableRoot,\n} from '@mage-ui/styled-system/recipes';\n\nimport type { StatelessDataTableClassNames } from './StatelessDataTable';\n\nexport type StatelessDataTableRootContainerProps = {\n busy?: boolean;\n classNames?: StatelessDataTableClassNames;\n children: ReactNode;\n};\n\nexport const StatelessDataTableRootContainer = ({\n busy,\n classNames,\n children,\n}: StatelessDataTableRootContainerProps): ReactNode => {\n return (\n <div\n aria-busy={busy || undefined}\n className={cx(\n classNames?.dataTable ?? dataTableRecipe(),\n classNames?.root ?? dataTableRoot(),\n )}\n >\n {children}\n </div>\n );\n};\n"],"mappings":"sKAgBA,MAAa,GAAmC,CAC9C,OACA,aACA,cAGE,EAAC,MAAA,CACC,YAAW,GAAQ,IAAA,GACnB,UAAW,EACT,GAAY,WAAaA,GAAiB,CAC1C,GAAY,MAAQ,GAAe,CACpC,CAEA,YACG"}
@@ -0,0 +1,24 @@
1
+ import { StatelessDataTableContextValue } from "./useStatelessDataTableContext.mjs";
2
+ import { ReactNode } from "react";
3
+
4
+ //#region src/components/data-display/datatables/datatable-stateless/StatelessDataTableSlotRow.d.ts
5
+ type StatelessDataTableSlotRenderProps<Data> = StatelessDataTableContextValue<Data>;
6
+ type StatelessDataTableSlotContent<Data> = ReactNode | ((props: StatelessDataTableSlotRenderProps<Data>) => ReactNode);
7
+ type StatelessDataTableSlots<Data = unknown> = {
8
+ top?: StatelessDataTableSlotContent<Data>;
9
+ bottom?: StatelessDataTableSlotContent<Data>;
10
+ empty?: StatelessDataTableSlotContent<Data>;
11
+ };
12
+ type StatelessDataTableSlotRowProps<Data> = {
13
+ slot?: StatelessDataTableSlotContent<Data>;
14
+ slotProps: StatelessDataTableSlotRenderProps<Data>;
15
+ className?: string;
16
+ };
17
+ declare const StatelessDataTableSlotRow: <Data>({
18
+ slot,
19
+ slotProps,
20
+ className
21
+ }: StatelessDataTableSlotRowProps<Data>) => ReactNode;
22
+ //#endregion
23
+ export { StatelessDataTableSlotContent, StatelessDataTableSlotRenderProps, StatelessDataTableSlotRow, StatelessDataTableSlotRowProps, StatelessDataTableSlots };
24
+ //# sourceMappingURL=StatelessDataTableSlotRow.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatelessDataTableSlotRow.d.mts","names":[],"sources":["../../../../../src/components/data-display/datatables/datatable-stateless/StatelessDataTableSlotRow.tsx"],"mappings":";;;;KAMY,iCAAA,SACV,8BAAA,CAA+B,IAAA;AAAA,KAErB,6BAAA,SACR,SAAA,KACE,KAAA,EAAO,iCAAA,CAAkC,IAAA,MAAU,SAAA;AAAA,KAE7C,uBAAA;EACV,GAAA,GAAM,6BAAA,CAA8B,IAAA;EACpC,MAAA,GAAS,6BAAA,CAA8B,IAAA;EACvC,KAAA,GAAQ,6BAAA,CAA8B,IAAA;AAAA;AAAA,KAG5B,8BAAA;EACV,IAAA,GAAO,6BAAA,CAA8B,IAAA;EACrC,SAAA,EAAW,iCAAA,CAAkC,IAAA;EAC7C,SAAA;AAAA;AAAA,cAGW,yBAAA;EAAoC,IAAA;EAAA,SAAA;EAAA;AAAA,GAI9C,8BAAA,CAA+B,IAAA,MAAQ,SAAA"}
@@ -0,0 +1,2 @@
1
+ import{dataTableSlotRow as e}from"@mage-ui/styled-system/recipes";import{jsx as t}from"react/jsx-runtime";const n=({slot:n,slotProps:r,className:i})=>{if(n==null)return null;let a=typeof n==`function`?n(r):n;return a==null||a===!1?null:t(`div`,{className:i??e(),children:a})};export{n as StatelessDataTableSlotRow};
2
+ //# sourceMappingURL=StatelessDataTableSlotRow.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatelessDataTableSlotRow.mjs","names":[],"sources":["../../../../../src/components/data-display/datatables/datatable-stateless/StatelessDataTableSlotRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTableSlotRow } from '@mage-ui/styled-system/recipes';\n\nimport type { StatelessDataTableContextValue } from './useStatelessDataTableContext';\n\nexport type StatelessDataTableSlotRenderProps<Data> =\n StatelessDataTableContextValue<Data>;\n\nexport type StatelessDataTableSlotContent<Data> =\n | ReactNode\n | ((props: StatelessDataTableSlotRenderProps<Data>) => ReactNode);\n\nexport type StatelessDataTableSlots<Data = unknown> = {\n top?: StatelessDataTableSlotContent<Data>;\n bottom?: StatelessDataTableSlotContent<Data>;\n empty?: StatelessDataTableSlotContent<Data>;\n};\n\nexport type StatelessDataTableSlotRowProps<Data> = {\n slot?: StatelessDataTableSlotContent<Data>;\n slotProps: StatelessDataTableSlotRenderProps<Data>;\n className?: string;\n};\n\nexport const StatelessDataTableSlotRow = <Data,>({\n slot,\n slotProps,\n className,\n}: StatelessDataTableSlotRowProps<Data>): ReactNode => {\n if (slot === null || slot === undefined) {\n return null;\n }\n\n const content = typeof slot === 'function' ? slot(slotProps) : slot;\n\n if (content === null || content === undefined || content === false) {\n return null;\n }\n\n return <div className={className ?? dataTableSlotRow()}>{content}</div>;\n};\n"],"mappings":"0GAyBA,MAAa,GAAoC,CAC/C,OACA,YACA,eACqD,CACrD,GAAI,GAAS,KACX,OAAO,KAGT,IAAM,EAAU,OAAO,GAAS,WAAa,EAAK,EAAU,CAAG,EAM/D,OAJI,GAAY,MAAiC,IAAY,GACpD,KAGF,EAAC,MAAA,CAAI,UAAW,GAAa,GAAkB,UAAG,GAAc"}
@@ -0,0 +1,2 @@
1
+ import{dataTableLoading as e}from"@mage-ui/styled-system/recipes";import{jsx as t,jsxs as n}from"react/jsx-runtime";const r=({loading:r,headerHeight:i,loadingClassName:a,children:o})=>n(`div`,{style:{position:`relative`},children:[r&&i>0?t(`div`,{className:a??e(),style:{top:`${i}px`}}):null,o]});export{r as StatelessDataTableViewport};
2
+ //# sourceMappingURL=StatelessDataTableViewport.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatelessDataTableViewport.mjs","names":[],"sources":["../../../../../src/components/data-display/datatables/datatable-stateless/StatelessDataTableViewport.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTableLoading } from '@mage-ui/styled-system/recipes';\n\nexport type StatelessDataTableViewportProps = {\n loading?: boolean;\n headerHeight: number;\n loadingClassName?: string;\n children: ReactNode;\n};\n\nexport const StatelessDataTableViewport = ({\n loading,\n headerHeight,\n loadingClassName,\n children,\n}: StatelessDataTableViewportProps): ReactNode => {\n return (\n <div style={{ position: 'relative' }}>\n {loading && headerHeight > 0 ? (\n <div\n className={loadingClassName ?? dataTableLoading()}\n style={{ top: `${headerHeight}px` }}\n />\n ) : null}\n {children}\n </div>\n );\n};\n"],"mappings":"oHAWA,MAAa,GAA8B,CACzC,UACA,eACA,mBACA,cAGE,EAAC,MAAA,CAAI,MAAO,CAAE,SAAU,WAAY,WACjC,GAAW,EAAe,EACzB,EAAC,MAAA,CACC,UAAW,GAAoB,GAAkB,CACjD,MAAO,CAAE,IAAK,GAAG,EAAa,IAAK,EACnC,CACA,KACH,EAAA,EACG"}
@@ -0,0 +1,6 @@
1
+ import { StatelessDataTableContextProvider, StatelessDataTableContextValue, useStatelessDataTableContext } from "./useStatelessDataTableContext.mjs";
2
+ import { StatelessDataTableSlotContent, StatelessDataTableSlotRenderProps, StatelessDataTableSlotRow, StatelessDataTableSlotRowProps, StatelessDataTableSlots } from "./StatelessDataTableSlotRow.mjs";
3
+ import { StatelessDataTable, StatelessDataTableClassNames, StatelessDataTableExpansionConfig, StatelessDataTablePaginationConfig, StatelessDataTableProps, StatelessDataTableSelectionConfig, StatelessDataTableSortingConfig, StatelessDataTableTableConfig } from "./StatelessDataTable.mjs";
4
+ import { StatelessDataTablePageSize, StatelessDataTablePageSizeProps } from "./StatelessDataTablePageSize.mjs";
5
+ import { ColumnDef as ColumnDef$1, ExpandedState as ExpandedState$1, PaginationState as PaginationState$1, RowSelectionState as RowSelectionState$1, SortingState as SortingState$1 } from "@tanstack/react-table";
6
+ export { type ColumnDef$1 as ColumnDef, type ExpandedState$1 as ExpandedState, type PaginationState$1 as PaginationState, type RowSelectionState$1 as RowSelectionState, type SortingState$1 as SortingState };