@coveord/plasma-mantine 56.9.0 → 56.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/.turbo/turbo-build.log +4 -4
  2. package/.turbo/turbo-test.log +113 -109
  3. package/dist/.tsbuildinfo +1 -1
  4. package/dist/cjs/components/InfoToken/InfoToken.d.ts +62 -2
  5. package/dist/cjs/components/InfoToken/InfoToken.d.ts.map +1 -1
  6. package/dist/cjs/components/InfoToken/InfoToken.js +5 -0
  7. package/dist/cjs/components/InfoToken/InfoToken.js.map +1 -1
  8. package/dist/cjs/components/StatusToken/StatusToken.d.ts +31 -0
  9. package/dist/cjs/components/StatusToken/StatusToken.d.ts.map +1 -0
  10. package/dist/cjs/components/StatusToken/StatusToken.js +128 -0
  11. package/dist/cjs/components/StatusToken/StatusToken.js.map +1 -0
  12. package/dist/cjs/components/StatusToken/StatusToken.module.css +42 -0
  13. package/dist/cjs/components/StatusToken/icons/circle.svg +3 -0
  14. package/dist/cjs/components/StatusToken/icons/info.svg +5 -0
  15. package/dist/cjs/components/StatusToken/icons/ring.svg +3 -0
  16. package/dist/cjs/components/StatusToken/icons/square.svg +3 -0
  17. package/dist/cjs/components/StatusToken/icons/triangle.svg +3 -0
  18. package/dist/cjs/components/Table/table-columns-selector/TableColumnsSelector.d.ts.map +1 -1
  19. package/dist/cjs/components/Table/table-columns-selector/TableColumnsSelector.js +46 -55
  20. package/dist/cjs/components/Table/table-columns-selector/TableColumnsSelector.js.map +1 -1
  21. package/dist/cjs/index.d.ts +1 -0
  22. package/dist/cjs/index.d.ts.map +1 -1
  23. package/dist/cjs/index.js +1 -0
  24. package/dist/cjs/index.js.map +1 -1
  25. package/dist/cjs/types/svg-raw/index.d.js +3 -0
  26. package/dist/cjs/types/svg-raw/index.d.js.map +1 -0
  27. package/dist/esm/components/InfoToken/InfoToken.d.ts +62 -2
  28. package/dist/esm/components/InfoToken/InfoToken.d.ts.map +1 -1
  29. package/dist/esm/components/InfoToken/InfoToken.js +5 -0
  30. package/dist/esm/components/InfoToken/InfoToken.js.map +1 -1
  31. package/dist/esm/components/StatusToken/StatusToken.d.ts +31 -0
  32. package/dist/esm/components/StatusToken/StatusToken.d.ts.map +1 -0
  33. package/dist/esm/components/StatusToken/StatusToken.js +103 -0
  34. package/dist/esm/components/StatusToken/StatusToken.js.map +1 -0
  35. package/dist/esm/components/StatusToken/StatusToken.module.css +42 -0
  36. package/dist/esm/components/StatusToken/icons/circle.svg +3 -0
  37. package/dist/esm/components/StatusToken/icons/info.svg +5 -0
  38. package/dist/esm/components/StatusToken/icons/ring.svg +3 -0
  39. package/dist/esm/components/StatusToken/icons/square.svg +3 -0
  40. package/dist/esm/components/StatusToken/icons/triangle.svg +3 -0
  41. package/dist/esm/components/Table/table-columns-selector/TableColumnsSelector.d.ts.map +1 -1
  42. package/dist/esm/components/Table/table-columns-selector/TableColumnsSelector.js +47 -51
  43. package/dist/esm/components/Table/table-columns-selector/TableColumnsSelector.js.map +1 -1
  44. package/dist/esm/index.d.ts +1 -0
  45. package/dist/esm/index.d.ts.map +1 -1
  46. package/dist/esm/index.js +2 -0
  47. package/dist/esm/index.js.map +1 -1
  48. package/dist/esm/types/svg-raw/index.d.js +2 -0
  49. package/dist/esm/types/svg-raw/index.d.js.map +1 -0
  50. package/package.json +1 -1
  51. package/src/components/InfoToken/InfoToken.tsx +39 -36
  52. package/src/components/StatusToken/StatusToken.module.css +42 -0
  53. package/src/components/StatusToken/StatusToken.tsx +152 -0
  54. package/src/components/StatusToken/__tests__/StatusToken.component.spec.tsx +28 -0
  55. package/src/components/StatusToken/icons/circle.svg +3 -0
  56. package/src/components/StatusToken/icons/info.svg +5 -0
  57. package/src/components/StatusToken/icons/ring.svg +3 -0
  58. package/src/components/StatusToken/icons/square.svg +3 -0
  59. package/src/components/StatusToken/icons/triangle.svg +3 -0
  60. package/src/components/Table/__tests__/{TableColumnsSelectorHeader.spec.tsx → TableColumnsSelector.spec.tsx} +3 -2
  61. package/src/components/Table/table-columns-selector/TableColumnsSelector.tsx +36 -46
  62. package/src/index.ts +3 -0
  63. package/src/types/svg-raw/index.d.ts +4 -0
@@ -1,4 +1,4 @@
1
- import { BoxProps, Factory, MantineSize, polymorphicFactory, StylesApiProps } from '@mantine/core';
1
+ import { BoxProps, Factory, MantineSize, StylesApiProps } from '@mantine/core';
2
2
  export type InfoTokenFactory = Factory<{
3
3
  props: InfoTokenProps;
4
4
  defaultRef: HTMLDivElement;
@@ -34,7 +34,67 @@ export interface InfoTokenProps extends BoxProps, StylesApiProps<InfoTokenFactor
34
34
  */
35
35
  size?: MantineSize;
36
36
  }
37
- export declare const InfoToken: ReturnType<typeof polymorphicFactory<InfoTokenFactory>>;
37
+ export declare const InfoToken: (<C = "div">(props: import("@mantine/core").PolymorphicComponentProps<C, InfoTokenProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<(InfoTokenProps & {
38
+ component?: any;
39
+ } & Omit<Omit<any, "ref">, "component" | keyof InfoTokenProps> & {
40
+ ref?: any;
41
+ renderRoot?: (props: any) => any;
42
+ }) | (InfoTokenProps & {
43
+ component: React.ElementType;
44
+ renderRoot?: (props: Record<string, any>) => any;
45
+ })>, never> & import("@mantine/core/lib/core/factory/factory").ThemeExtend<{
46
+ props: InfoTokenProps;
47
+ defaultRef: HTMLDivElement;
48
+ defaultComponent: "div";
49
+ stylesNames: InfoTokenComponentStylesNames;
50
+ vars: InfoTokenCssVariables;
51
+ variant: InfoTokenVariant;
52
+ staticComponents: {
53
+ Information: typeof TokenInformation;
54
+ InformationOutline: typeof TokenInformationOutline;
55
+ Advice: typeof TokenAdvice;
56
+ Warning: typeof TokenWarning;
57
+ Error: typeof TokenError;
58
+ Question: typeof TokenQuestion;
59
+ };
60
+ }> & import("@mantine/core/lib/core/factory/factory").ComponentClasses<{
61
+ props: InfoTokenProps;
62
+ defaultRef: HTMLDivElement;
63
+ defaultComponent: "div";
64
+ stylesNames: InfoTokenComponentStylesNames;
65
+ vars: InfoTokenCssVariables;
66
+ variant: InfoTokenVariant;
67
+ staticComponents: {
68
+ Information: typeof TokenInformation;
69
+ InformationOutline: typeof TokenInformationOutline;
70
+ Advice: typeof TokenAdvice;
71
+ Warning: typeof TokenWarning;
72
+ Error: typeof TokenError;
73
+ Question: typeof TokenQuestion;
74
+ };
75
+ }> & import("@mantine/core/lib/core/factory/polymorphic-factory").PolymorphicComponentWithProps<{
76
+ props: InfoTokenProps;
77
+ defaultRef: HTMLDivElement;
78
+ defaultComponent: "div";
79
+ stylesNames: InfoTokenComponentStylesNames;
80
+ vars: InfoTokenCssVariables;
81
+ variant: InfoTokenVariant;
82
+ staticComponents: {
83
+ Information: typeof TokenInformation;
84
+ InformationOutline: typeof TokenInformationOutline;
85
+ Advice: typeof TokenAdvice;
86
+ Warning: typeof TokenWarning;
87
+ Error: typeof TokenError;
88
+ Question: typeof TokenQuestion;
89
+ };
90
+ }> & {
91
+ Information: typeof TokenInformation;
92
+ InformationOutline: typeof TokenInformationOutline;
93
+ Advice: typeof TokenAdvice;
94
+ Warning: typeof TokenWarning;
95
+ Error: typeof TokenError;
96
+ Question: typeof TokenQuestion;
97
+ };
38
98
  declare const TokenInformation: <L = "div">(props: import("@mantine/core").PolymorphicComponentProps<L, InfoTokenProps>) => React.ReactElement;
39
99
  declare const TokenInformationOutline: <L = "div">(props: import("@mantine/core").PolymorphicComponentProps<L, InfoTokenProps>) => React.ReactElement;
40
100
  declare const TokenAdvice: <L = "div">(props: import("@mantine/core").PolymorphicComponentProps<L, InfoTokenProps>) => React.ReactElement;
@@ -1 +1 @@
1
- {"version":3,"file":"InfoToken.d.ts","sourceRoot":"","sources":["../../../../src/components/InfoToken/InfoToken.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,QAAQ,EAER,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,cAAc,EAGjB,MAAM,eAAe,CAAC;AAGvB,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACnC,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,EAAE,KAAK,CAAC;IACxB,WAAW,EAAE,6BAA6B,CAAC;IAC3C,IAAI,EAAE,qBAAqB,CAAC;IAC5B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,gBAAgB,EAAE;QACd,WAAW,EAAE,OAAO,gBAAgB,CAAC;QACrC,kBAAkB,EAAE,OAAO,uBAAuB,CAAC;QACnD,MAAM,EAAE,OAAO,WAAW,CAAC;QAC3B,OAAO,EAAE,OAAO,YAAY,CAAC;QAC7B,KAAK,EAAE,OAAO,UAAU,CAAC;QACzB,QAAQ,EAAE,OAAO,aAAa,CAAC;KAClC,CAAC;CACL,CAAC,CAAC;AACH,MAAM,MAAM,6BAA6B,GAAG,MAAM,CAAC;AACnD,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,qBAAqB,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AACnH,MAAM,MAAM,qBAAqB,GAAG;IAChC,IAAI,EAAE,oBAAoB,CAAC;CAC9B,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,QAAQ,EAAE,cAAc,CAAC,gBAAgB,CAAC;IAC9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB;AAiED,eAAO,MAAM,SAAS,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,gBAAgB,CAAC,CAmC7E,CAAC;AAEF,QAAA,MAAM,gBAAgB,gHAEpB,CAAC;AACH,QAAA,MAAM,uBAAuB,gHAE3B,CAAC;AACH,QAAA,MAAM,WAAW,gHAA2C,CAAC;AAC7D,QAAA,MAAM,YAAY,gHAA4C,CAAC;AAC/D,QAAA,MAAM,UAAU,gHAA0C,CAAC;AAC3D,QAAA,MAAM,aAAa,gHAA6C,CAAC"}
1
+ {"version":3,"file":"InfoToken.d.ts","sourceRoot":"","sources":["../../../../src/components/InfoToken/InfoToken.tsx"],"names":[],"mappings":"AASA,OAAO,EAEH,QAAQ,EAER,OAAO,EACP,WAAW,EAEX,cAAc,EAGjB,MAAM,eAAe,CAAC;AAGvB,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;IACnC,KAAK,EAAE,cAAc,CAAC;IACtB,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,EAAE,KAAK,CAAC;IACxB,WAAW,EAAE,6BAA6B,CAAC;IAC3C,IAAI,EAAE,qBAAqB,CAAC;IAC5B,OAAO,EAAE,gBAAgB,CAAC;IAC1B,gBAAgB,EAAE;QACd,WAAW,EAAE,OAAO,gBAAgB,CAAC;QACrC,kBAAkB,EAAE,OAAO,uBAAuB,CAAC;QACnD,MAAM,EAAE,OAAO,WAAW,CAAC;QAC3B,OAAO,EAAE,OAAO,YAAY,CAAC;QAC7B,KAAK,EAAE,OAAO,UAAU,CAAC;QACzB,QAAQ,EAAE,OAAO,aAAa,CAAC;KAClC,CAAC;CACL,CAAC,CAAC;AACH,MAAM,MAAM,6BAA6B,GAAG,MAAM,CAAC;AACnD,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,qBAAqB,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AACnH,MAAM,MAAM,qBAAqB,GAAG;IAChC,IAAI,EAAE,oBAAoB,CAAC;CAC9B,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,QAAQ,EAAE,cAAc,CAAC,gBAAgB,CAAC;IAC9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB;AAiED,eAAO,MAAM,SAAS;;;;;;;;;WAnGX,cAAc;gBACT,cAAc;sBACR,KAAK;iBACV,6BAA6B;UACpC,qBAAqB;aAClB,gBAAgB;sBACP;QACd,WAAW,EAAE,OAAO,gBAAgB,CAAC;QACrC,kBAAkB,EAAE,OAAO,uBAAuB,CAAC;QACnD,MAAM,EAAE,OAAO,WAAW,CAAC;QAC3B,OAAO,EAAE,OAAO,YAAY,CAAC;QAC7B,KAAK,EAAE,OAAO,UAAU,CAAC;QACzB,QAAQ,EAAE,OAAO,aAAa,CAAC;KAClC;;WAbM,cAAc;gBACT,cAAc;sBACR,KAAK;iBACV,6BAA6B;UACpC,qBAAqB;aAClB,gBAAgB;sBACP;QACd,WAAW,EAAE,OAAO,gBAAgB,CAAC;QACrC,kBAAkB,EAAE,OAAO,uBAAuB,CAAC;QACnD,MAAM,EAAE,OAAO,WAAW,CAAC;QAC3B,OAAO,EAAE,OAAO,YAAY,CAAC;QAC7B,KAAK,EAAE,OAAO,UAAU,CAAC;QACzB,QAAQ,EAAE,OAAO,aAAa,CAAC;KAClC;;WAbM,cAAc;gBACT,cAAc;sBACR,KAAK;iBACV,6BAA6B;UACpC,qBAAqB;aAClB,gBAAgB;sBACP;QACd,WAAW,EAAE,OAAO,gBAAgB,CAAC;QACrC,kBAAkB,EAAE,OAAO,uBAAuB,CAAC;QACnD,MAAM,EAAE,OAAO,WAAW,CAAC;QAC3B,OAAO,EAAE,OAAO,YAAY,CAAC;QAC7B,KAAK,EAAE,OAAO,UAAU,CAAC;QACzB,QAAQ,EAAE,OAAO,aAAa,CAAC;KAClC;;iBANgB,OAAO,gBAAgB;wBAChB,OAAO,uBAAuB;YAC1C,OAAO,WAAW;aACjB,OAAO,YAAY;WACrB,OAAO,UAAU;cACd,OAAO,aAAa;CAwHpC,CAAC;AAEH,QAAA,MAAM,gBAAgB,gHAEpB,CAAC;AAEH,QAAA,MAAM,uBAAuB,gHAE3B,CAAC;AACH,QAAA,MAAM,WAAW,gHAA2C,CAAC;AAE7D,QAAA,MAAM,YAAY,gHAA4C,CAAC;AAE/D,QAAA,MAAM,UAAU,gHAA0C,CAAC;AAE3D,QAAA,MAAM,aAAa,gHAA6C,CAAC"}
@@ -122,21 +122,26 @@ var InfoToken = (0, _core.polymorphicFactory)(function(_props, ref) {
122
122
  var TokenInformation = InfoToken.withProps({
123
123
  variant: 'information'
124
124
  });
125
+ TokenInformation.displayName = 'InfoToken.Information';
125
126
  var TokenInformationOutline = InfoToken.withProps({
126
127
  variant: 'information-outline'
127
128
  });
128
129
  var TokenAdvice = InfoToken.withProps({
129
130
  variant: 'advice'
130
131
  });
132
+ TokenAdvice.displayName = 'InfoToken.Advice';
131
133
  var TokenWarning = InfoToken.withProps({
132
134
  variant: 'warning'
133
135
  });
136
+ TokenWarning.displayName = 'InfoToken.Warning';
134
137
  var TokenError = InfoToken.withProps({
135
138
  variant: 'error'
136
139
  });
140
+ TokenError.displayName = 'InfoToken.Error';
137
141
  var TokenQuestion = InfoToken.withProps({
138
142
  variant: 'question'
139
143
  });
144
+ TokenQuestion.displayName = 'InfoToken.Question';
140
145
  InfoToken.Information = TokenInformation;
141
146
  InfoToken.InformationOutline = TokenInformationOutline;
142
147
  InfoToken.Advice = TokenAdvice;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/InfoToken/InfoToken.tsx"],"sourcesContent":["import {\n IconAlertSquareFilled,\n IconAlertTriangleFilled,\n IconBulbFilled,\n IconHelpCircle,\n IconInfoCircle,\n IconInfoCircleFilled,\n TablerIcon,\n} from '@coveord/plasma-react-icons';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n Factory,\n MantineSize,\n polymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport classes from './InfoToken.module.css';\n\nexport type InfoTokenFactory = Factory<{\n props: InfoTokenProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: InfoTokenComponentStylesNames;\n vars: InfoTokenCssVariables;\n variant: InfoTokenVariant;\n staticComponents: {\n Information: typeof TokenInformation;\n InformationOutline: typeof TokenInformationOutline;\n Advice: typeof TokenAdvice;\n Warning: typeof TokenWarning;\n Error: typeof TokenError;\n Question: typeof TokenQuestion;\n };\n}>;\nexport type InfoTokenComponentStylesNames = 'root';\nexport type InfoTokenVariant = 'information' | 'information-outline' | 'advice' | 'warning' | 'error' | 'question';\nexport type InfoTokenCssVariables = {\n root: '--info-token-color';\n};\n\nexport interface InfoTokenProps extends BoxProps, StylesApiProps<InfoTokenFactory> {\n /**\n * The variant of the token.\n *\n * @default 'information'\n */\n variant?: InfoTokenVariant;\n /**\n * The size of the info token.\n *\n * @default 'sm'\n */\n size?: MantineSize;\n}\n\nconst defaultProps: Partial<InfoTokenProps> = {variant: 'information', size: 'xs'};\n\nconst colorResolver = (variant: InfoTokenVariant): string => {\n switch (variant) {\n case 'error':\n return 'var(--mantine-color-error)';\n case 'advice':\n case 'question':\n return 'var(--coveo-color-text-primary)';\n case 'warning':\n return 'var(--mantine-color-warning-filled)';\n case 'information':\n default:\n return 'var(--mantine-color-gray-3)';\n }\n};\n\nconst sizeResolver = (size: MantineSize): number => {\n if (typeof size === 'number') {\n return size;\n }\n switch (size) {\n case 'sm':\n return 20;\n case 'md':\n return 24;\n case 'lg':\n return 32;\n case 'xl':\n return 40;\n case 'xs':\n default:\n return 16;\n }\n};\n\nconst iconResolver = (variant: InfoTokenVariant): TablerIcon => {\n switch (variant) {\n case 'error':\n return IconAlertSquareFilled;\n case 'information':\n return IconInfoCircleFilled;\n case 'information-outline':\n return IconInfoCircle;\n case 'question':\n return IconHelpCircle;\n case 'warning':\n return IconAlertTriangleFilled;\n case 'advice':\n default:\n return IconBulbFilled;\n }\n};\n\nconst varsResolver = createVarsResolver<InfoTokenFactory>((_theme, {variant}) => {\n const color = colorResolver(variant);\n return {\n root: {\n '--info-token-color': color,\n },\n };\n});\n\nexport const InfoToken: ReturnType<typeof polymorphicFactory<InfoTokenFactory>> = polymorphicFactory<InfoTokenFactory>(\n (_props, ref) => {\n const props = useProps('InfoToken', defaultProps, _props);\n const {variant, vars, className, style, unstyled, styles, classNames, size, ...others} = props;\n const getStyles = useStyles<InfoTokenFactory>({\n name: 'InfoToken',\n classes,\n className,\n props,\n style,\n styles,\n unstyled,\n vars,\n varsResolver,\n });\n const IconComponent = iconResolver(variant);\n return (\n <Box\n ref={ref}\n variant={variant}\n role=\"img\"\n aria-label={variant}\n size={size}\n {...getStyles('root', {\n className,\n style,\n styles,\n classNames,\n })}\n {...others}\n >\n <IconComponent size={sizeResolver(size)} />\n </Box>\n );\n },\n);\n\nconst TokenInformation = InfoToken.withProps({\n variant: 'information',\n});\nconst TokenInformationOutline = InfoToken.withProps({\n variant: 'information-outline',\n});\nconst TokenAdvice = InfoToken.withProps({variant: 'advice'});\nconst TokenWarning = InfoToken.withProps({variant: 'warning'});\nconst TokenError = InfoToken.withProps({variant: 'error'});\nconst TokenQuestion = InfoToken.withProps({variant: 'question'});\n\nInfoToken.Information = TokenInformation;\nInfoToken.InformationOutline = TokenInformationOutline;\nInfoToken.Advice = TokenAdvice;\nInfoToken.Warning = TokenWarning;\nInfoToken.Error = TokenError;\nInfoToken.Question = TokenQuestion;\n"],"names":["InfoToken","defaultProps","variant","size","colorResolver","sizeResolver","iconResolver","IconAlertSquareFilled","IconInfoCircleFilled","IconInfoCircle","IconHelpCircle","IconAlertTriangleFilled","IconBulbFilled","varsResolver","createVarsResolver","_theme","color","root","polymorphicFactory","_props","ref","props","useProps","vars","className","style","unstyled","styles","classNames","others","getStyles","useStyles","name","classes","IconComponent","Box","role","aria-label","TokenInformation","withProps","TokenInformationOutline","TokenAdvice","TokenWarning","TokenError","TokenQuestion","Information","InformationOutline","Advice","Warning","Error","Question"],"mappings":";;;;+BA0HaA;;;eAAAA;;;;;;;;gCAlHN;oBAWA;2EACa;AAuCpB,IAAMC,eAAwC;IAACC,SAAS;IAAeC,MAAM;AAAI;AAEjF,IAAMC,gBAAgB,SAACF;IACnB,OAAQA;QACJ,KAAK;YACD,OAAO;QACX,KAAK;QACL,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;QACL;YACI,OAAO;IACf;AACJ;AAEA,IAAMG,eAAe,SAACF;IAClB,IAAI,OAAOA,SAAS,UAAU;QAC1B,OAAOA;IACX;IACA,OAAQA;QACJ,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAO;QACX,KAAK;QACL;YACI,OAAO;IACf;AACJ;AAEA,IAAMG,eAAe,SAACJ;IAClB,OAAQA;QACJ,KAAK;YACD,OAAOK,uCAAqB;QAChC,KAAK;YACD,OAAOC,sCAAoB;QAC/B,KAAK;YACD,OAAOC,gCAAc;QACzB,KAAK;YACD,OAAOC,gCAAc;QACzB,KAAK;YACD,OAAOC,yCAAuB;QAClC,KAAK;QACL;YACI,OAAOC,gCAAc;IAC7B;AACJ;AAEA,IAAMC,eAAeC,IAAAA,wBAAkB,EAAmB,SAACC;QAASb,gBAAAA;IAChE,IAAMc,QAAQZ,cAAcF;IAC5B,OAAO;QACHe,MAAM;YACF,sBAAsBD;QAC1B;IACJ;AACJ;AAEO,IAAMhB,YAAqEkB,IAAAA,wBAAkB,EAChG,SAACC,QAAQC;IACL,IAAMC,QAAQC,IAAAA,cAAQ,EAAC,aAAarB,cAAckB;IAClD,IAAOjB,UAAkFmB,MAAlFnB,SAASqB,OAAyEF,MAAzEE,MAAMC,YAAmEH,MAAnEG,WAAWC,QAAwDJ,MAAxDI,OAAOC,WAAiDL,MAAjDK,UAAUC,SAAuCN,MAAvCM,QAAQC,aAA+BP,MAA/BO,YAAYzB,OAAmBkB,MAAnBlB,MAAS0B,sCAAUR;QAAlFnB;QAASqB;QAAMC;QAAWC;QAAOC;QAAUC;QAAQC;QAAYzB;;IACtE,IAAM2B,YAAYC,IAAAA,eAAS,EAAmB;QAC1CC,MAAM;QACNC,SAAAA,2BAAO;QACPT,WAAAA;QACAH,OAAAA;QACAI,OAAAA;QACAE,QAAAA;QACAD,UAAAA;QACAH,MAAAA;QACAV,cAAAA;IACJ;IACA,IAAMqB,gBAAgB5B,aAAaJ;IACnC,qBACI,qBAACiC,SAAG;QACAf,KAAKA;QACLlB,SAASA;QACTkC,MAAK;QACLC,cAAYnC;QACZC,MAAMA;OACF2B,UAAU,QAAQ;QAClBN,WAAAA;QACAC,OAAAA;QACAE,QAAAA;QACAC,YAAAA;IACJ,IACIC;kBAEJ,cAAA,qBAACK;YAAc/B,MAAME,aAAaF;;;AAG9C;AAGJ,IAAMmC,mBAAmBtC,UAAUuC,SAAS,CAAC;IACzCrC,SAAS;AACb;AACA,IAAMsC,0BAA0BxC,UAAUuC,SAAS,CAAC;IAChDrC,SAAS;AACb;AACA,IAAMuC,cAAczC,UAAUuC,SAAS,CAAC;IAACrC,SAAS;AAAQ;AAC1D,IAAMwC,eAAe1C,UAAUuC,SAAS,CAAC;IAACrC,SAAS;AAAS;AAC5D,IAAMyC,aAAa3C,UAAUuC,SAAS,CAAC;IAACrC,SAAS;AAAO;AACxD,IAAM0C,gBAAgB5C,UAAUuC,SAAS,CAAC;IAACrC,SAAS;AAAU;AAE9DF,UAAU6C,WAAW,GAAGP;AACxBtC,UAAU8C,kBAAkB,GAAGN;AAC/BxC,UAAU+C,MAAM,GAAGN;AACnBzC,UAAUgD,OAAO,GAAGN;AACpB1C,UAAUiD,KAAK,GAAGN;AAClB3C,UAAUkD,QAAQ,GAAGN"}
1
+ {"version":3,"sources":["../../../../src/components/InfoToken/InfoToken.tsx"],"sourcesContent":["import {\n IconAlertSquareFilled,\n IconAlertTriangleFilled,\n IconBulbFilled,\n IconHelpCircle,\n IconInfoCircle,\n IconInfoCircleFilled,\n TablerIcon,\n} from '@coveord/plasma-react-icons';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n Factory,\n MantineSize,\n polymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport classes from './InfoToken.module.css';\n\nexport type InfoTokenFactory = Factory<{\n props: InfoTokenProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: InfoTokenComponentStylesNames;\n vars: InfoTokenCssVariables;\n variant: InfoTokenVariant;\n staticComponents: {\n Information: typeof TokenInformation;\n InformationOutline: typeof TokenInformationOutline;\n Advice: typeof TokenAdvice;\n Warning: typeof TokenWarning;\n Error: typeof TokenError;\n Question: typeof TokenQuestion;\n };\n}>;\nexport type InfoTokenComponentStylesNames = 'root';\nexport type InfoTokenVariant = 'information' | 'information-outline' | 'advice' | 'warning' | 'error' | 'question';\nexport type InfoTokenCssVariables = {\n root: '--info-token-color';\n};\n\nexport interface InfoTokenProps extends BoxProps, StylesApiProps<InfoTokenFactory> {\n /**\n * The variant of the token.\n *\n * @default 'information'\n */\n variant?: InfoTokenVariant;\n /**\n * The size of the info token.\n *\n * @default 'sm'\n */\n size?: MantineSize;\n}\n\nconst defaultProps: Partial<InfoTokenProps> = {variant: 'information', size: 'xs'};\n\nconst colorResolver = (variant: InfoTokenVariant): string => {\n switch (variant) {\n case 'error':\n return 'var(--mantine-color-error)';\n case 'advice':\n case 'question':\n return 'var(--coveo-color-text-primary)';\n case 'warning':\n return 'var(--mantine-color-warning-filled)';\n case 'information':\n default:\n return 'var(--mantine-color-gray-3)';\n }\n};\n\nconst sizeResolver = (size: MantineSize): number => {\n if (typeof size === 'number') {\n return size;\n }\n switch (size) {\n case 'sm':\n return 20;\n case 'md':\n return 24;\n case 'lg':\n return 32;\n case 'xl':\n return 40;\n case 'xs':\n default:\n return 16;\n }\n};\n\nconst iconResolver = (variant: InfoTokenVariant): TablerIcon => {\n switch (variant) {\n case 'error':\n return IconAlertSquareFilled;\n case 'information':\n return IconInfoCircleFilled;\n case 'information-outline':\n return IconInfoCircle;\n case 'question':\n return IconHelpCircle;\n case 'warning':\n return IconAlertTriangleFilled;\n case 'advice':\n default:\n return IconBulbFilled;\n }\n};\n\nconst varsResolver = createVarsResolver<InfoTokenFactory>((_theme, {variant}) => {\n const color = colorResolver(variant);\n return {\n root: {\n '--info-token-color': color,\n },\n };\n});\n\nexport const InfoToken = polymorphicFactory<InfoTokenFactory>((_props, ref) => {\n const props = useProps('InfoToken', defaultProps, _props);\n const {variant, vars, className, style, unstyled, styles, classNames, size, ...others} = props;\n const getStyles = useStyles<InfoTokenFactory>({\n name: 'InfoToken',\n classes,\n className,\n props,\n style,\n styles,\n unstyled,\n vars,\n varsResolver,\n });\n const IconComponent = iconResolver(variant);\n return (\n <Box\n ref={ref}\n variant={variant}\n role=\"img\"\n aria-label={variant}\n size={size}\n {...getStyles('root', {\n className,\n style,\n styles,\n classNames,\n })}\n {...others}\n >\n <IconComponent size={sizeResolver(size)} />\n </Box>\n );\n});\n\nconst TokenInformation = InfoToken.withProps({\n variant: 'information',\n});\n(TokenInformation as typeof InfoToken).displayName = 'InfoToken.Information';\nconst TokenInformationOutline = InfoToken.withProps({\n variant: 'information-outline',\n});\nconst TokenAdvice = InfoToken.withProps({variant: 'advice'});\n(TokenAdvice as typeof InfoToken).displayName = 'InfoToken.Advice';\nconst TokenWarning = InfoToken.withProps({variant: 'warning'});\n(TokenWarning as typeof InfoToken).displayName = 'InfoToken.Warning';\nconst TokenError = InfoToken.withProps({variant: 'error'});\n(TokenError as typeof InfoToken).displayName = 'InfoToken.Error';\nconst TokenQuestion = InfoToken.withProps({variant: 'question'});\n(TokenQuestion as typeof InfoToken).displayName = 'InfoToken.Question';\n\nInfoToken.Information = TokenInformation;\nInfoToken.InformationOutline = TokenInformationOutline;\nInfoToken.Advice = TokenAdvice;\nInfoToken.Warning = TokenWarning;\nInfoToken.Error = TokenError;\nInfoToken.Question = TokenQuestion;\n"],"names":["InfoToken","defaultProps","variant","size","colorResolver","sizeResolver","iconResolver","IconAlertSquareFilled","IconInfoCircleFilled","IconInfoCircle","IconHelpCircle","IconAlertTriangleFilled","IconBulbFilled","varsResolver","createVarsResolver","_theme","color","root","polymorphicFactory","_props","ref","props","useProps","vars","className","style","unstyled","styles","classNames","others","getStyles","useStyles","name","classes","IconComponent","Box","role","aria-label","TokenInformation","withProps","displayName","TokenInformationOutline","TokenAdvice","TokenWarning","TokenError","TokenQuestion","Information","InformationOutline","Advice","Warning","Error","Question"],"mappings":"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"}
@@ -0,0 +1,31 @@
1
+ import { BoxProps, Factory, MantineSize, polymorphicFactory, StylesApiProps } from '@mantine/core';
2
+ export type StatusTokenFactory = Factory<{
3
+ props: StatusTokenProps;
4
+ defaultRef: HTMLDivElement;
5
+ defaultComponent: 'div';
6
+ stylesNames: StatusTokenComponentStylesNames;
7
+ vars: StatusTokenCssVariables;
8
+ variant: StatusTokenVariant;
9
+ }>;
10
+ export type StatusTokenComponentStylesNames = 'root';
11
+ export type StatusTokenVariant = 'info' | 'success' | 'caution' | 'error' | 'disabled' | 'waiting' | 'edited' | 'new';
12
+ export type StatusTokenSize = Extract<MantineSize, 'sm' | 'lg'>;
13
+ export type StatusTokenCssVariables = {
14
+ root: '--status-token-color' | '--status-token-size';
15
+ };
16
+ export interface StatusTokenProps extends BoxProps, StylesApiProps<StatusTokenFactory> {
17
+ /**
18
+ * The size of the token.
19
+ *
20
+ * @default 'lg'
21
+ */
22
+ size?: StatusTokenSize;
23
+ /**
24
+ * The variant of the token.
25
+ *
26
+ * @default 'info'
27
+ */
28
+ variant?: StatusTokenVariant;
29
+ }
30
+ export declare const StatusToken: ReturnType<typeof polymorphicFactory<StatusTokenFactory>>;
31
+ //# sourceMappingURL=StatusToken.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StatusToken.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusToken/StatusToken.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEH,QAAQ,EAER,OAAO,EAEP,WAAW,EAEX,kBAAkB,EAClB,cAAc,EAGjB,MAAM,eAAe,CAAC;AASvB,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;IACrC,KAAK,EAAE,gBAAgB,CAAC;IACxB,UAAU,EAAE,cAAc,CAAC;IAC3B,gBAAgB,EAAE,KAAK,CAAC;IACxB,WAAW,EAAE,+BAA+B,CAAC;IAC7C,IAAI,EAAE,uBAAuB,CAAC;IAC9B,OAAO,EAAE,kBAAkB,CAAC;CAC/B,CAAC,CAAC;AACH,MAAM,MAAM,+BAA+B,GAAG,MAAM,CAAC;AACrD,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;AACtH,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,WAAW,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAChE,MAAM,MAAM,uBAAuB,GAAG;IAClC,IAAI,EAAE,sBAAsB,GAAG,qBAAqB,CAAC;CACxD,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,QAAQ,EAAE,cAAc,CAAC,kBAAkB,CAAC;IAClF;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAChC;AAkED,eAAO,MAAM,WAAW,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,kBAAkB,CAAC,CAkC5E,CAAC"}
@@ -0,0 +1,128 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "StatusToken", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return StatusToken;
9
+ }
10
+ });
11
+ var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
12
+ var _object_spread = require("@swc/helpers/_/_object_spread");
13
+ var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
14
+ var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
15
+ var _jsxruntime = require("react/jsx-runtime");
16
+ var _core = require("@mantine/core");
17
+ var _circlesvgraw = /*#__PURE__*/ _interop_require_default._(require("./icons/circle.svg?raw"));
18
+ var _ringsvgraw = /*#__PURE__*/ _interop_require_default._(require("./icons/ring.svg?raw"));
19
+ var _squaresvgraw = /*#__PURE__*/ _interop_require_default._(require("./icons/square.svg?raw"));
20
+ var _trianglesvgraw = /*#__PURE__*/ _interop_require_default._(require("./icons/triangle.svg?raw"));
21
+ var _infosvgraw = /*#__PURE__*/ _interop_require_default._(require("./icons/info.svg?raw"));
22
+ var _StatusTokenmodulecss = /*#__PURE__*/ _interop_require_default._(require("./StatusToken.module.css"));
23
+ var defaultProps = {
24
+ size: 'lg',
25
+ variant: 'info'
26
+ };
27
+ var resolveThemeColorFromVariant = function(variant, theme) {
28
+ switch(variant){
29
+ case 'success':
30
+ return theme.colors.green[4];
31
+ case 'caution':
32
+ return theme.colors.yellow[4];
33
+ case 'error':
34
+ return theme.colors.red[5];
35
+ case 'disabled':
36
+ case 'waiting':
37
+ return theme.colors.gray[5];
38
+ case 'edited':
39
+ case 'new':
40
+ return 'var(--mantine-primary-color-filled)';
41
+ case 'info':
42
+ return theme.colors.gray[3];
43
+ default:
44
+ return theme.colors.navy[5];
45
+ }
46
+ };
47
+ var resolveSize = function(size) {
48
+ return size === 'sm' ? 8 : 12;
49
+ };
50
+ var resolveIconSrcFromVariant = function(variant) {
51
+ switch(variant){
52
+ case 'caution':
53
+ return _trianglesvgraw.default;
54
+ case 'error':
55
+ return _squaresvgraw.default;
56
+ case 'disabled':
57
+ return _ringsvgraw.default;
58
+ case 'info':
59
+ return _infosvgraw.default;
60
+ case 'success':
61
+ case 'waiting':
62
+ case 'edited':
63
+ case 'new':
64
+ default:
65
+ return _circlesvgraw.default;
66
+ }
67
+ };
68
+ var varsResolver = (0, _core.createVarsResolver)(function(theme, param) {
69
+ var variant = param.variant, size = param.size;
70
+ var color = resolveThemeColorFromVariant(variant, theme);
71
+ return {
72
+ root: {
73
+ '--status-token-color': color,
74
+ '--status-token-size': (0, _core.getSize)(resolveSize(size), 'status-token-size')
75
+ }
76
+ };
77
+ });
78
+ var statusTokenLabels = {
79
+ info: 'Info',
80
+ success: 'Success',
81
+ caution: 'Caution',
82
+ error: 'Error',
83
+ disabled: 'Disabled',
84
+ waiting: 'Waiting',
85
+ edited: 'Edited',
86
+ new: 'New'
87
+ };
88
+ var StatusToken = (0, _core.polymorphicFactory)(function(props, ref) {
89
+ var _useProps = (0, _core.useProps)('StatusToken', defaultProps, props), variant = _useProps.variant, vars = _useProps.vars, size = _useProps.size, className = _useProps.className, style = _useProps.style, unstyled = _useProps.unstyled, styles = _useProps.styles, classNames = _useProps.classNames, others = _object_without_properties._(_useProps, [
90
+ "variant",
91
+ "vars",
92
+ "size",
93
+ "className",
94
+ "style",
95
+ "unstyled",
96
+ "styles",
97
+ "classNames"
98
+ ]);
99
+ var getStyles = (0, _core.useStyles)({
100
+ name: 'StatusToken',
101
+ classes: _StatusTokenmodulecss.default,
102
+ className: className,
103
+ props: props,
104
+ style: style,
105
+ styles: styles,
106
+ unstyled: unstyled,
107
+ vars: vars,
108
+ varsResolver: varsResolver
109
+ });
110
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, _object_spread._(_object_spread_props._(_object_spread._({
111
+ ref: ref,
112
+ variant: variant,
113
+ role: "img",
114
+ "aria-label": statusTokenLabels[variant]
115
+ }, getStyles('root', {
116
+ className: className,
117
+ style: style,
118
+ styles: styles,
119
+ classNames: classNames
120
+ })), {
121
+ dangerouslySetInnerHTML: {
122
+ __html: resolveIconSrcFromVariant(variant)
123
+ }
124
+ }), others));
125
+ });
126
+ StatusToken.displayName = 'StatusToken';
127
+
128
+ //# sourceMappingURL=StatusToken.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/StatusToken/StatusToken.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n Factory,\n getSize,\n MantineSize,\n MantineTheme,\n polymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\n\nimport Circle from './icons/circle.svg?raw';\nimport Ring from './icons/ring.svg?raw';\nimport Square from './icons/square.svg?raw';\nimport Triangle from './icons/triangle.svg?raw';\nimport Info from './icons/info.svg?raw';\nimport classes from './StatusToken.module.css';\n\nexport type StatusTokenFactory = Factory<{\n props: StatusTokenProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: StatusTokenComponentStylesNames;\n vars: StatusTokenCssVariables;\n variant: StatusTokenVariant;\n}>;\nexport type StatusTokenComponentStylesNames = 'root';\nexport type StatusTokenVariant = 'info' | 'success' | 'caution' | 'error' | 'disabled' | 'waiting' | 'edited' | 'new';\nexport type StatusTokenSize = Extract<MantineSize, 'sm' | 'lg'>;\nexport type StatusTokenCssVariables = {\n root: '--status-token-color' | '--status-token-size';\n};\n\nexport interface StatusTokenProps extends BoxProps, StylesApiProps<StatusTokenFactory> {\n /**\n * The size of the token.\n *\n * @default 'lg'\n */\n size?: StatusTokenSize;\n /**\n * The variant of the token.\n *\n * @default 'info'\n */\n variant?: StatusTokenVariant;\n}\n\nconst defaultProps: Partial<StatusTokenProps> = {size: 'lg', variant: 'info'};\n\nconst resolveThemeColorFromVariant = (variant: StatusTokenVariant, theme: MantineTheme): string => {\n switch (variant) {\n case 'success':\n return theme.colors.green[4];\n case 'caution':\n return theme.colors.yellow[4];\n case 'error':\n return theme.colors.red[5];\n case 'disabled':\n case 'waiting':\n return theme.colors.gray[5];\n case 'edited':\n case 'new':\n return 'var(--mantine-primary-color-filled)';\n case 'info':\n return theme.colors.gray[3];\n default:\n return theme.colors.navy[5];\n }\n};\nconst resolveSize = (size: StatusTokenSize): number => (size === 'sm' ? 8 : 12);\n\nconst resolveIconSrcFromVariant = (variant: StatusTokenVariant): string => {\n switch (variant) {\n case 'caution':\n return Triangle;\n case 'error':\n return Square;\n case 'disabled':\n return Ring;\n case 'info':\n return Info;\n case 'success':\n case 'waiting':\n case 'edited':\n case 'new':\n default:\n return Circle;\n }\n};\n\nconst varsResolver = createVarsResolver<StatusTokenFactory>((theme, {variant, size}) => {\n const color = resolveThemeColorFromVariant(variant, theme);\n return {\n root: {\n '--status-token-color': color,\n '--status-token-size': getSize(resolveSize(size), 'status-token-size'),\n },\n };\n});\n\nconst statusTokenLabels: Record<StatusTokenVariant, string> = {\n info: 'Info',\n success: 'Success',\n caution: 'Caution',\n error: 'Error',\n disabled: 'Disabled',\n waiting: 'Waiting',\n edited: 'Edited',\n new: 'New',\n};\n\nexport const StatusToken: ReturnType<typeof polymorphicFactory<StatusTokenFactory>> =\n polymorphicFactory<StatusTokenFactory>((props, ref) => {\n const {variant, vars, size, className, style, unstyled, styles, classNames, ...others} = useProps(\n 'StatusToken',\n defaultProps,\n props,\n );\n const getStyles = useStyles<StatusTokenFactory>({\n name: 'StatusToken',\n classes,\n className,\n props,\n style,\n styles,\n unstyled,\n vars,\n varsResolver,\n });\n return (\n <Box\n ref={ref}\n variant={variant}\n role=\"img\"\n aria-label={statusTokenLabels[variant]}\n {...getStyles('root', {\n className,\n style,\n styles,\n classNames,\n })}\n dangerouslySetInnerHTML={{__html: resolveIconSrcFromVariant(variant)}}\n {...others}\n />\n );\n });\n\nStatusToken.displayName = 'StatusToken';\n"],"names":["StatusToken","defaultProps","size","variant","resolveThemeColorFromVariant","theme","colors","green","yellow","red","gray","navy","resolveSize","resolveIconSrcFromVariant","Triangle","Square","Ring","Info","Circle","varsResolver","createVarsResolver","color","root","getSize","statusTokenLabels","info","success","caution","error","disabled","waiting","edited","new","polymorphicFactory","props","ref","useProps","vars","className","style","unstyled","styles","classNames","others","getStyles","useStyles","name","classes","Box","role","aria-label","dangerouslySetInnerHTML","__html","displayName"],"mappings":";;;;+BAmHaA;;;eAAAA;;;;;;;;oBAvGN;qEAEY;mEACF;qEACE;uEACE;mEACJ;6EACG;AAgCpB,IAAMC,eAA0C;IAACC,MAAM;IAAMC,SAAS;AAAM;AAE5E,IAAMC,+BAA+B,SAACD,SAA6BE;IAC/D,OAAQF;QACJ,KAAK;YACD,OAAOE,MAAMC,MAAM,CAACC,KAAK,CAAC,EAAE;QAChC,KAAK;YACD,OAAOF,MAAMC,MAAM,CAACE,MAAM,CAAC,EAAE;QACjC,KAAK;YACD,OAAOH,MAAMC,MAAM,CAACG,GAAG,CAAC,EAAE;QAC9B,KAAK;QACL,KAAK;YACD,OAAOJ,MAAMC,MAAM,CAACI,IAAI,CAAC,EAAE;QAC/B,KAAK;QACL,KAAK;YACD,OAAO;QACX,KAAK;YACD,OAAOL,MAAMC,MAAM,CAACI,IAAI,CAAC,EAAE;QAC/B;YACI,OAAOL,MAAMC,MAAM,CAACK,IAAI,CAAC,EAAE;IACnC;AACJ;AACA,IAAMC,cAAc,SAACV;WAAmCA,SAAS,OAAO,IAAI;;AAE5E,IAAMW,4BAA4B,SAACV;IAC/B,OAAQA;QACJ,KAAK;YACD,OAAOW,uBAAQ;QACnB,KAAK;YACD,OAAOC,qBAAM;QACjB,KAAK;YACD,OAAOC,mBAAI;QACf,KAAK;YACD,OAAOC,mBAAI;QACf,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;QACL;YACI,OAAOC,qBAAM;IACrB;AACJ;AAEA,IAAMC,eAAeC,IAAAA,wBAAkB,EAAqB,SAACf;QAAQF,gBAAAA,SAASD,aAAAA;IAC1E,IAAMmB,QAAQjB,6BAA6BD,SAASE;IACpD,OAAO;QACHiB,MAAM;YACF,wBAAwBD;YACxB,uBAAuBE,IAAAA,aAAO,EAACX,YAAYV,OAAO;QACtD;IACJ;AACJ;AAEA,IAAMsB,oBAAwD;IAC1DC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,OAAO;IACPC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,KAAK;AACT;AAEO,IAAMhC,cACTiC,IAAAA,wBAAkB,EAAqB,SAACC,OAAOC;IAC3C,IAAyFC,YAAAA,IAAAA,cAAQ,EAC7F,eACAnC,cACAiC,QAHG/B,UAAkFiC,UAAlFjC,SAASkC,OAAyED,UAAzEC,MAAMnC,OAAmEkC,UAAnElC,MAAMoC,YAA6DF,UAA7DE,WAAWC,QAAkDH,UAAlDG,OAAOC,WAA2CJ,UAA3CI,UAAUC,SAAiCL,UAAjCK,QAAQC,aAAyBN,UAAzBM,YAAeC,sCAAUP;QAAlFjC;QAASkC;QAAMnC;QAAMoC;QAAWC;QAAOC;QAAUC;QAAQC;;IAKhE,IAAME,YAAYC,IAAAA,eAAS,EAAqB;QAC5CC,MAAM;QACNC,SAAAA,6BAAO;QACPT,WAAAA;QACAJ,OAAAA;QACAK,OAAAA;QACAE,QAAAA;QACAD,UAAAA;QACAH,MAAAA;QACAlB,cAAAA;IACJ;IACA,qBACI,qBAAC6B,SAAG;QACAb,KAAKA;QACLhC,SAASA;QACT8C,MAAK;QACLC,cAAY1B,iBAAiB,CAACrB,QAAQ;OAClCyC,UAAU,QAAQ;QAClBN,WAAAA;QACAC,OAAAA;QACAE,QAAAA;QACAC,YAAAA;IACJ;QACAS,yBAAyB;YAACC,QAAQvC,0BAA0BV;QAAQ;QAChEwC;AAGhB;AAEJ3C,YAAYqD,WAAW,GAAG"}
@@ -0,0 +1,42 @@
1
+ .root {
2
+ --status-token-color: var(--mantine-primary-color-filled);
3
+ --status-token-size: 12px;
4
+
5
+ display: inline-flex;
6
+ flex-shrink: 0;
7
+ align-items: center;
8
+ width: var(--status-token-size);
9
+ height: var(--status-token-size);
10
+ color: var(--status-token-color);
11
+
12
+ &:where([data-variant='waiting']) {
13
+ position: relative;
14
+
15
+ &::before {
16
+ position: absolute;
17
+ z-index: -1;
18
+ background-color: var(--status-token-color);
19
+ border-radius: 100%;
20
+ animation: pulse 1000ms linear infinite;
21
+ content: '';
22
+ inset: 0;
23
+ }
24
+ }
25
+
26
+ svg {
27
+ width: var(--status-token-size);
28
+ height: var(--status-token-size);
29
+ }
30
+ }
31
+
32
+ @keyframes pulse {
33
+ 0% {
34
+ transform: scale(0);
35
+ opacity: 0.6;
36
+ }
37
+
38
+ 100% {
39
+ transform: scale(2.8);
40
+ opacity: 0;
41
+ }
42
+ }
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 12">
2
+ <circle cx="6" cy="6" r="5.5" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,5 @@
1
+ <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path
3
+ d="M6 0.125C9.3138 0.125 12 2.81014 12 6.12263C12.0012 7.69729 11.3829 9.20927 10.2785 10.3321C9.17415 11.455 7.67229 12.0987 6.09721 12.1242C4.52214 12.1497 3.0002 11.555 1.86 10.4685C0.719794 9.38199 0.0527931 7.89082 0.00300007 6.31695L0 6.12263L0.00239997 5.95469C0.0912 2.72017 2.742 0.125 6 0.125ZM6 5.52286H5.4L5.3298 5.52706C5.18397 5.5444 5.04957 5.6146 4.95205 5.72436C4.85453 5.83413 4.80067 5.97583 4.80067 6.12263C4.80067 6.26943 4.85453 6.41113 4.95205 6.52089C5.04957 6.63065 5.18397 6.70085 5.3298 6.71819L5.4 6.72239V8.52168L5.4042 8.59185C5.41999 8.72573 5.48045 8.85038 5.57581 8.9457C5.67117 9.04103 5.79587 9.10145 5.9298 9.11724L6 9.12144H6.6L6.6702 9.11724C6.80413 9.10145 6.92883 9.04103 7.02419 8.9457C7.11955 8.85038 7.18 8.72573 7.1958 8.59185L7.2 8.52168L7.1958 8.45151C7.18146 8.32914 7.12976 8.21416 7.04774 8.1222C6.96573 8.03023 6.85737 7.96575 6.7374 7.93751L6.6702 7.92551L6.6 7.92192V6.12263L6.5958 6.05246C6.58 5.91858 6.51955 5.79392 6.42419 5.6986C6.32883 5.60328 6.20413 5.54285 6.0702 5.52706L6 5.52286ZM6.006 3.72358L5.9298 3.72777C5.78397 3.74511 5.64957 3.81531 5.55205 3.92508C5.45453 4.03484 5.40067 4.17654 5.40067 4.32334C5.40067 4.47014 5.45453 4.61184 5.55205 4.7216C5.64957 4.83136 5.78397 4.90156 5.9298 4.9189L6 4.9231L6.0762 4.9189C6.22203 4.90156 6.35643 4.83136 6.45395 4.7216C6.55147 4.61184 6.60533 4.47014 6.60533 4.32334C6.60533 4.17654 6.55147 4.03484 6.45395 3.92508C6.35643 3.81531 6.22203 3.74511 6.0762 3.72777L6.006 3.72358Z"
4
+ fill="currentColor" />
5
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="6" cy="6" r="5" stroke="currentColor"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="1" y="1" width="10" height="10" rx="2.2" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 6">
2
+ <path fill="currentColor" d="M3 .475c.25 0 .482.122.625.326l.027.042 2.12 3.54a.762.762 0 0 1-.602 1.141l-.051.002H.879A.762.762 0 0 1 .202 4.43l.028-.05L2.35.842A.762.762 0 0 1 3 .475Z"/>
3
+ </svg>
@@ -1 +1 @@
1
- {"version":3,"file":"TableColumnsSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,EAAC,MAAM,uBAAuB,CAAC;AAGhE,MAAM,WAAW,2BAA2B;IACxC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,oBAAoB,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAC7D;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,+BAA+B;IAC5C,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,2BAA2B,CAAC;CACzC;AAUD,eAAO,MAAM,0BAA0B,GAAI,oBAAkB,+BAA+B,4CA2F3F,CAAC"}
1
+ {"version":3,"file":"TableColumnsSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,EAAC,MAAM,uBAAuB,CAAC;AAGhE,MAAM,WAAW,2BAA2B;IACxC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,oBAAoB,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAC7D;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,+BAA+B;IAC5C,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,2BAA2B,CAAC;CACzC;AAUD,eAAO,MAAM,0BAA0B,GAAI,oBAAkB,+BAA+B,4CAgF3F,CAAC"}
@@ -9,9 +9,11 @@ Object.defineProperty(exports, "TableColumnsSelectorHeader", {
9
9
  }
10
10
  });
11
11
  var _object_spread = require("@swc/helpers/_/_object_spread");
12
+ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
12
13
  var _jsxruntime = require("react/jsx-runtime");
13
14
  var _plasmareacticons = require("@coveord/plasma-react-icons");
14
15
  var _core = require("@mantine/core");
16
+ var _hooks = require("@mantine/hooks");
15
17
  var _reacttable = require("@tanstack/react-table");
16
18
  var _ActionIcon = require("../../ActionIcon/ActionIcon");
17
19
  var DEFAULT_OPTIONS = {
@@ -24,14 +26,7 @@ var DEFAULT_OPTIONS = {
24
26
  var TableColumnsSelectorHeader = function(param) {
25
27
  var table = param.table, options = param.options;
26
28
  var _$_object_spread = _object_spread._({}, DEFAULT_OPTIONS, options), maxSelectableColumns = _$_object_spread.maxSelectableColumns, footer = _$_object_spread.footer, limitReachedTooltip = _$_object_spread.limitReachedTooltip, alwaysVisibleTooltip = _$_object_spread.alwaysVisibleTooltip;
27
- var combobox = (0, _core.useCombobox)({
28
- onDropdownClose: function() {
29
- combobox.resetSelectedOption();
30
- },
31
- onDropdownOpen: function() {
32
- return combobox.updateSelectedOptionIndex('active');
33
- }
34
- });
29
+ var _useDisclosure = _sliced_to_array._((0, _hooks.useDisclosure)(false), 2), opened = _useDisclosure[0], _useDisclosure_ = _useDisclosure[1], toggle = _useDisclosure_.toggle, close = _useDisclosure_.close;
35
30
  var allColumns = table.getAllLeafColumns();
36
31
  var filteredColumns = allColumns.filter(function(column) {
37
32
  var _column_columnDef_meta;
@@ -55,72 +50,68 @@ var TableColumnsSelectorHeader = function(param) {
55
50
  isVisible: isVisible
56
51
  };
57
52
  };
58
- var handleOptionClick = function(columnId) {
59
- var column = filteredColumns.find(function(col) {
60
- return col.id === columnId;
61
- });
62
- if (column) {
63
- var isDisabled = getColumnState(column).isDisabled;
64
- if (!isDisabled) {
65
- column.toggleVisibility();
66
- }
67
- }
68
- };
69
53
  var columnOptions = filteredColumns.map(function(column) {
70
54
  var _getColumnState = getColumnState(column), alwaysVisible = _getColumnState.alwaysVisible, isDisabled = _getColumnState.isDisabled, isVisible = _getColumnState.isVisible;
71
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Combobox.Option, {
72
- value: column.id,
73
- disabled: isDisabled,
74
- active: isVisible,
75
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
76
- label: alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip,
77
- disabled: !isDisabled,
78
- position: "left",
79
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
80
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Checkbox, {
81
- checked: isVisible,
82
- label: (0, _reacttable.flexRender)(column.columnDef.header, {
83
- table: table,
84
- column: column,
85
- header: {
86
- column: column
87
- }
88
- }),
89
- disabled: isDisabled
90
- })
55
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
56
+ label: alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip,
57
+ disabled: !isDisabled,
58
+ position: "left",
59
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
60
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Checkbox, {
61
+ label: (0, _reacttable.flexRender)(column.columnDef.header, {
62
+ table: table,
63
+ column: column,
64
+ header: {
65
+ column: column
66
+ }
67
+ }),
68
+ name: column.id,
69
+ checked: isVisible,
70
+ disabled: isDisabled,
71
+ onChange: column.getToggleVisibilityHandler()
91
72
  })
92
73
  })
93
74
  }, column.id);
94
75
  });
95
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Combobox, {
96
- store: combobox,
76
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover, {
77
+ opened: opened,
78
+ onClose: close,
97
79
  position: "bottom-end",
98
80
  shadow: "md",
99
- onOptionSubmit: handleOptionClick,
100
81
  children: [
101
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Combobox.Target, {
82
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Target, {
102
83
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionIcon.ActionIcon.Tertiary, {
103
- onClick: function() {
104
- return combobox.toggleDropdown();
105
- },
84
+ onClick: toggle,
106
85
  "aria-label": "settings",
107
86
  children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconSettings, {
108
87
  height: 16
109
88
  })
110
89
  })
111
90
  }),
112
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Combobox.Dropdown, {
91
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover.Dropdown, {
113
92
  miw: 270,
93
+ pb: "xs",
114
94
  children: [
115
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Combobox.Options, {
116
- children: columnOptions
117
- }),
118
- effectiveMaxColumns && /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Combobox.Footer, {
119
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, {
120
- size: "sm",
121
- c: "dimmed",
122
- children: typeof footer === 'function' ? footer(effectiveMaxColumns) : footer
95
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ScrollArea.Autosize, {
96
+ mah: 200,
97
+ type: "auto",
98
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Stack, {
99
+ gap: "xs",
100
+ children: columnOptions
123
101
  })
102
+ }),
103
+ effectiveMaxColumns && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
104
+ children: [
105
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Divider, {
106
+ my: "xs",
107
+ mx: "-sm"
108
+ }),
109
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, {
110
+ size: "sm",
111
+ c: "dimmed",
112
+ children: typeof footer === 'function' ? footer(effectiveMaxColumns) : footer
113
+ })
114
+ ]
124
115
  })
125
116
  ]
126
117
  })
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {IconSettings} from '@coveord/plasma-react-icons';\nimport {Checkbox, Combobox, Text, Tooltip, useCombobox} from '@mantine/core';\nimport {flexRender, Header, Table} from '@tanstack/react-table';\nimport {ActionIcon} from '../../ActionIcon/ActionIcon';\n\nexport interface TableColumnsSelectorOptions {\n /**\n * The maximum number of columns that can be selected at the same time.\n * If defined a footer will render with the remaining number of columns that can be selected.\n * Must be a positive integer (greater than 0).\n */\n maxSelectableColumns?: number;\n /**\n * The content to display in the footer when maxSelectableColumns is defined.\n * Can be a string or a function that receives the maxSelectableColumns value.\n * @default (max) => `You can display up to ${max} columns.`\n */\n footer?: string | ((maxSelectableColumns: number) => string);\n /**\n * The tooltip to display when the user hovers over a disabled checkbox because of the limit.\n * @default 'You have reached the maximum display limit.'\n */\n limitReachedTooltip?: string;\n /**\n * The tooltip to display when the user hovers over a disabled checkbox because a column cannot be hidden.\n * @default 'This column is always visible.'\n */\n alwaysVisibleTooltip?: string;\n}\n\nexport interface TableColumnsSelectorHeaderProps {\n table: Table<unknown>;\n options?: TableColumnsSelectorOptions;\n}\n\nconst DEFAULT_OPTIONS: Omit<TableColumnsSelectorOptions, 'footer'> & {\n footer: (maxSelectableColumns: number) => string;\n} = {\n footer: (max) => `You can display up to ${max} columns.`,\n limitReachedTooltip: 'You have reached the maximum display limit.',\n alwaysVisibleTooltip: 'This column is always visible.',\n};\n\nexport const TableColumnsSelectorHeader = ({table, options}: TableColumnsSelectorHeaderProps) => {\n const {maxSelectableColumns, footer, limitReachedTooltip, alwaysVisibleTooltip} = {\n ...DEFAULT_OPTIONS,\n ...options,\n };\n\n const combobox = useCombobox({\n onDropdownClose: () => {\n combobox.resetSelectedOption();\n },\n onDropdownOpen: () => combobox.updateSelectedOptionIndex('active'),\n });\n\n const allColumns = table.getAllLeafColumns();\n const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);\n const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;\n\n // Validate maxSelectableColumns - must be a positive integer to be effective\n const effectiveMaxColumns =\n maxSelectableColumns !== undefined && maxSelectableColumns > 0 ? maxSelectableColumns : undefined;\n\n if (filteredColumns.length <= 0) {\n return null;\n }\n\n const getColumnState = (column: (typeof filteredColumns)[number]) => {\n const alwaysVisible = !column.getCanHide();\n const isDisabled =\n (effectiveMaxColumns !== undefined &&\n selectedColumnsCount >= effectiveMaxColumns &&\n !column.getIsVisible()) ||\n alwaysVisible;\n const isVisible = column.getIsVisible() || alwaysVisible;\n return {alwaysVisible, isDisabled, isVisible};\n };\n\n const handleOptionClick = (columnId: string) => {\n const column = filteredColumns.find((col) => col.id === columnId);\n if (column) {\n const {isDisabled} = getColumnState(column);\n if (!isDisabled) {\n column.toggleVisibility();\n }\n }\n };\n\n const columnOptions = filteredColumns.map((column) => {\n const {alwaysVisible, isDisabled, isVisible} = getColumnState(column);\n\n return (\n <Combobox.Option value={column.id} key={column.id} disabled={isDisabled} active={isVisible}>\n <Tooltip\n label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}\n disabled={!isDisabled}\n position=\"left\"\n >\n <div>\n <Checkbox\n checked={isVisible}\n label={flexRender(column.columnDef.header, {\n table,\n column,\n header: {column} as Header<unknown, unknown>,\n })}\n disabled={isDisabled}\n />\n </div>\n </Tooltip>\n </Combobox.Option>\n );\n });\n\n return (\n <Combobox store={combobox} position=\"bottom-end\" shadow=\"md\" onOptionSubmit={handleOptionClick}>\n <Combobox.Target>\n <ActionIcon.Tertiary onClick={() => combobox.toggleDropdown()} aria-label=\"settings\">\n <IconSettings height={16} />\n </ActionIcon.Tertiary>\n </Combobox.Target>\n <Combobox.Dropdown miw={270}>\n <Combobox.Options>{columnOptions}</Combobox.Options>\n {effectiveMaxColumns && (\n <Combobox.Footer>\n <Text size=\"sm\" c=\"dimmed\">\n {typeof footer === 'function' ? footer(effectiveMaxColumns) : footer}\n </Text>\n </Combobox.Footer>\n )}\n </Combobox.Dropdown>\n </Combobox>\n );\n};\n"],"names":["TableColumnsSelectorHeader","DEFAULT_OPTIONS","footer","max","limitReachedTooltip","alwaysVisibleTooltip","table","options","maxSelectableColumns","combobox","useCombobox","onDropdownClose","resetSelectedOption","onDropdownOpen","updateSelectedOptionIndex","allColumns","getAllLeafColumns","filteredColumns","filter","column","columnDef","meta","controlColumn","selectedColumnsCount","getIsVisible","length","effectiveMaxColumns","undefined","getColumnState","alwaysVisible","getCanHide","isDisabled","isVisible","handleOptionClick","columnId","find","col","id","toggleVisibility","columnOptions","map","Combobox","Option","value","disabled","active","Tooltip","label","position","div","Checkbox","checked","flexRender","header","store","shadow","onOptionSubmit","Target","ActionIcon","Tertiary","onClick","toggleDropdown","aria-label","IconSettings","height","Dropdown","miw","Options","Footer","Text","size","c"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {IconSettings} from '@coveord/plasma-react-icons';\nimport {Checkbox, Divider, Popover, ScrollArea, Stack, Text, Tooltip} from '@mantine/core';\nimport {useDisclosure} from '@mantine/hooks';\nimport {flexRender, Header, Table} from '@tanstack/react-table';\nimport {ActionIcon} from '../../ActionIcon/ActionIcon';\n\nexport interface TableColumnsSelectorOptions {\n /**\n * The maximum number of columns that can be selected at the same time.\n * If defined a footer will render with the remaining number of columns that can be selected.\n * Must be a positive integer (greater than 0).\n */\n maxSelectableColumns?: number;\n /**\n * The content to display in the footer when maxSelectableColumns is defined.\n * Can be a string or a function that receives the maxSelectableColumns value.\n * @default (max) => `You can display up to ${max} columns.`\n */\n footer?: string | ((maxSelectableColumns: number) => string);\n /**\n * The tooltip to display when the user hovers over a disabled checkbox because of the limit.\n * @default 'You have reached the maximum display limit.'\n */\n limitReachedTooltip?: string;\n /**\n * The tooltip to display when the user hovers over a disabled checkbox because a column cannot be hidden.\n * @default 'This column is always visible.'\n */\n alwaysVisibleTooltip?: string;\n}\n\nexport interface TableColumnsSelectorHeaderProps {\n table: Table<unknown>;\n options?: TableColumnsSelectorOptions;\n}\n\nconst DEFAULT_OPTIONS: Omit<TableColumnsSelectorOptions, 'footer'> & {\n footer: (maxSelectableColumns: number) => string;\n} = {\n footer: (max) => `You can display up to ${max} columns.`,\n limitReachedTooltip: 'You have reached the maximum display limit.',\n alwaysVisibleTooltip: 'This column is always visible.',\n};\n\nexport const TableColumnsSelectorHeader = ({table, options}: TableColumnsSelectorHeaderProps) => {\n const {maxSelectableColumns, footer, limitReachedTooltip, alwaysVisibleTooltip} = {\n ...DEFAULT_OPTIONS,\n ...options,\n };\n\n const [opened, {toggle, close}] = useDisclosure(false);\n\n const allColumns = table.getAllLeafColumns();\n const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);\n const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;\n\n // Validate maxSelectableColumns - must be a positive integer to be effective\n const effectiveMaxColumns =\n maxSelectableColumns !== undefined && maxSelectableColumns > 0 ? maxSelectableColumns : undefined;\n\n if (filteredColumns.length <= 0) {\n return null;\n }\n\n const getColumnState = (column: (typeof filteredColumns)[number]) => {\n const alwaysVisible = !column.getCanHide();\n const isDisabled =\n (effectiveMaxColumns !== undefined &&\n selectedColumnsCount >= effectiveMaxColumns &&\n !column.getIsVisible()) ||\n alwaysVisible;\n const isVisible = column.getIsVisible() || alwaysVisible;\n return {alwaysVisible, isDisabled, isVisible};\n };\n\n const columnOptions = filteredColumns.map((column) => {\n const {alwaysVisible, isDisabled, isVisible} = getColumnState(column);\n\n return (\n <Tooltip\n label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}\n disabled={!isDisabled}\n position=\"left\"\n key={column.id}\n >\n <div>\n <Checkbox\n label={flexRender(column.columnDef.header, {\n table,\n column,\n header: {column} as Header<unknown, unknown>,\n })}\n name={column.id}\n checked={isVisible}\n disabled={isDisabled}\n onChange={column.getToggleVisibilityHandler()}\n />\n </div>\n </Tooltip>\n );\n });\n\n return (\n <Popover opened={opened} onClose={close} position=\"bottom-end\" shadow=\"md\">\n <Popover.Target>\n <ActionIcon.Tertiary onClick={toggle} aria-label=\"settings\">\n <IconSettings height={16} />\n </ActionIcon.Tertiary>\n </Popover.Target>\n <Popover.Dropdown miw={270} pb=\"xs\">\n <ScrollArea.Autosize mah={200} type=\"auto\">\n <Stack gap=\"xs\">{columnOptions}</Stack>\n </ScrollArea.Autosize>\n {effectiveMaxColumns && (\n <>\n <Divider my=\"xs\" mx=\"-sm\" />\n <Text size=\"sm\" c=\"dimmed\">\n {typeof footer === 'function' ? footer(effectiveMaxColumns) : footer}\n </Text>\n </>\n )}\n </Popover.Dropdown>\n </Popover>\n );\n};\n"],"names":["TableColumnsSelectorHeader","DEFAULT_OPTIONS","footer","max","limitReachedTooltip","alwaysVisibleTooltip","table","options","maxSelectableColumns","useDisclosure","opened","toggle","close","allColumns","getAllLeafColumns","filteredColumns","filter","column","columnDef","meta","controlColumn","selectedColumnsCount","getIsVisible","length","effectiveMaxColumns","undefined","getColumnState","alwaysVisible","getCanHide","isDisabled","isVisible","columnOptions","map","Tooltip","label","disabled","position","div","Checkbox","flexRender","header","name","id","checked","onChange","getToggleVisibilityHandler","Popover","onClose","shadow","Target","ActionIcon","Tertiary","onClick","aria-label","IconSettings","height","Dropdown","miw","pb","ScrollArea","Autosize","mah","type","Stack","gap","Divider","my","mx","Text","size","c"],"mappings":";;;;+BA4CaA;;;eAAAA;;;;;;gCA5Cc;oBACgD;qBAC/C;0BACY;0BACf;AAgCzB,IAAMC,kBAEF;IACAC,QAAQ,SAACC;eAAQ,AAAC,yBAA4B,OAAJA,KAAI;;IAC9CC,qBAAqB;IACrBC,sBAAsB;AAC1B;AAEO,IAAML,6BAA6B;QAAEM,cAAAA,OAAOC,gBAAAA;IAC/C,IAAkF,mBAAA,qBAC3EN,iBACAM,UAFAC,uBAA2E,iBAA3EA,sBAAsBN,SAAqD,iBAArDA,QAAQE,sBAA6C,iBAA7CA,qBAAqBC,uBAAwB,iBAAxBA;IAK1D,IAAkCI,oCAAAA,IAAAA,oBAAa,EAAC,YAAzCC,SAA2BD,qCAAAA,mBAAlBE,yBAAAA,QAAQC,wBAAAA;IAExB,IAAMC,aAAaP,MAAMQ,iBAAiB;IAC1C,IAAMC,kBAAkBF,WAAWG,MAAM,CAAC,SAACC;YAAYA;eAAD,GAACA,yBAAAA,OAAOC,SAAS,CAACC,IAAI,cAArBF,6CAAAA,uBAAuBG,aAAa;;IAC3F,IAAMC,uBAAuBN,gBAAgBC,MAAM,CAAC,SAACC;eAAWA,OAAOK,YAAY;OAAIC,MAAM;IAE7F,6EAA6E;IAC7E,IAAMC,sBACFhB,yBAAyBiB,aAAajB,uBAAuB,IAAIA,uBAAuBiB;IAE5F,IAAIV,gBAAgBQ,MAAM,IAAI,GAAG;QAC7B,OAAO;IACX;IAEA,IAAMG,iBAAiB,SAACT;QACpB,IAAMU,gBAAgB,CAACV,OAAOW,UAAU;QACxC,IAAMC,aACF,AAACL,wBAAwBC,aACrBJ,wBAAwBG,uBACxB,CAACP,OAAOK,YAAY,MACxBK;QACJ,IAAMG,YAAYb,OAAOK,YAAY,MAAMK;QAC3C,OAAO;YAACA,eAAAA;YAAeE,YAAAA;YAAYC,WAAAA;QAAS;IAChD;IAEA,IAAMC,gBAAgBhB,gBAAgBiB,GAAG,CAAC,SAACf;QACvC,IAA+CS,kBAAAA,eAAeT,SAAvDU,gBAAwCD,gBAAxCC,eAAeE,aAAyBH,gBAAzBG,YAAYC,YAAaJ,gBAAbI;QAElC,qBACI,qBAACG,aAAO;YACJC,OAAOP,gBAAgBtB,uBAAuBD;YAC9C+B,UAAU,CAACN;YACXO,UAAS;sBAGT,cAAA,qBAACC;0BACG,cAAA,qBAACC,cAAQ;oBACLJ,OAAOK,IAAAA,sBAAU,EAACtB,OAAOC,SAAS,CAACsB,MAAM,EAAE;wBACvClC,OAAAA;wBACAW,QAAAA;wBACAuB,QAAQ;4BAACvB,QAAAA;wBAAM;oBACnB;oBACAwB,MAAMxB,OAAOyB,EAAE;oBACfC,SAASb;oBACTK,UAAUN;oBACVe,UAAU3B,OAAO4B,0BAA0B;;;WAZ9C5B,OAAOyB,EAAE;IAiB1B;IAEA,qBACI,sBAACI,aAAO;QAACpC,QAAQA;QAAQqC,SAASnC;QAAOwB,UAAS;QAAaY,QAAO;;0BAClE,qBAACF,aAAO,CAACG,MAAM;0BACX,cAAA,qBAACC,sBAAU,CAACC,QAAQ;oBAACC,SAASzC;oBAAQ0C,cAAW;8BAC7C,cAAA,qBAACC,8BAAY;wBAACC,QAAQ;;;;0BAG9B,sBAACT,aAAO,CAACU,QAAQ;gBAACC,KAAK;gBAAKC,IAAG;;kCAC3B,qBAACC,gBAAU,CAACC,QAAQ;wBAACC,KAAK;wBAAKC,MAAK;kCAChC,cAAA,qBAACC,WAAK;4BAACC,KAAI;sCAAMjC;;;oBAEpBP,qCACG;;0CACI,qBAACyC,aAAO;gCAACC,IAAG;gCAAKC,IAAG;;0CACpB,qBAACC,UAAI;gCAACC,MAAK;gCAAKC,GAAE;0CACb,OAAOpE,WAAW,aAAaA,OAAOsB,uBAAuBtB;;;;;;;;AAO1F"}