@capillarytech/blaze-ui 6.5.0 → 6.6.1

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 (121) hide show
  1. package/CapAdvancedIcon/types.d.ts +1 -0
  2. package/CapAdvancedIcon/types.d.ts.map +1 -1
  3. package/CapDnDGraph/index.js +2 -2
  4. package/CapDndGraphSidebar/SideBarIcon.d.ts +3 -23
  5. package/CapDndGraphSidebar/SideBarIcon.d.ts.map +1 -1
  6. package/CapDndGraphSidebar/SideBarIcon.js +21 -39
  7. package/CapDndGraphSidebar/SidebarNodesRendered.d.ts +3 -9
  8. package/CapDndGraphSidebar/SidebarNodesRendered.d.ts.map +1 -1
  9. package/CapDndGraphSidebar/SidebarNodesRendered.js +13 -4
  10. package/CapDndGraphSidebar/index.d.ts +4 -20
  11. package/CapDndGraphSidebar/index.d.ts.map +1 -1
  12. package/CapDndGraphSidebar/index.js +31 -33
  13. package/CapDndGraphSidebar/styles.css +20 -6
  14. package/CapDndGraphSidebar/styles.module.scss.js +15 -0
  15. package/CapDndGraphSidebar/styles.scss +69 -51
  16. package/CapDndGraphSidebar/types.d.ts +106 -0
  17. package/CapDndGraphSidebar/types.d.ts.map +1 -0
  18. package/CapDragAndDrop/index.d.ts +3 -19
  19. package/CapDragAndDrop/index.d.ts.map +1 -1
  20. package/CapDragAndDrop/index.js +24 -29
  21. package/CapDragAndDrop/messages.d.ts +25 -0
  22. package/CapDragAndDrop/messages.d.ts.map +1 -0
  23. package/CapDragAndDrop/messages.js +28 -0
  24. package/CapDragAndDrop/styles.css +17 -15
  25. package/CapDragAndDrop/styles.module.scss.js +21 -0
  26. package/CapDragAndDrop/styles.scss +18 -16
  27. package/CapDragAndDrop/types.d.ts +17 -0
  28. package/CapDragAndDrop/types.d.ts.map +1 -0
  29. package/CapDragAndDrop/types.js +1 -0
  30. package/CapIcon/index.js +12 -12
  31. package/CapIcon/styles.css +17 -21
  32. package/CapIcon/styles.module.scss.js +3 -4
  33. package/CapIcon/styles.scss +10 -15
  34. package/CapMediaPreview/ImageRenderer.d.ts +2 -15
  35. package/CapMediaPreview/ImageRenderer.d.ts.map +1 -1
  36. package/CapMediaPreview/ImageRenderer.js +3 -11
  37. package/CapMediaPreview/MediaRenderer.d.ts +2 -1
  38. package/CapMediaPreview/MediaRenderer.d.ts.map +1 -1
  39. package/CapMediaPreview/MediaRenderer.js +17 -15
  40. package/CapMediaPreview/VideoPlayer.d.ts +2 -1
  41. package/CapMediaPreview/VideoPlayer.d.ts.map +1 -1
  42. package/CapMediaPreview/VideoPlayer.js +16 -15
  43. package/CapMediaPreview/index.d.ts +4 -51
  44. package/CapMediaPreview/index.d.ts.map +1 -1
  45. package/CapMediaPreview/index.js +86 -69
  46. package/CapMediaPreview/styles.css +31 -21
  47. package/CapMediaPreview/styles.module.scss.js +24 -0
  48. package/CapMediaPreview/styles.scss +38 -27
  49. package/CapMediaPreview/types.d.ts +48 -0
  50. package/CapMediaPreview/types.d.ts.map +1 -0
  51. package/CapMediaPreview/types.js +1 -0
  52. package/CapPopoverTree/index.d.ts +40 -3
  53. package/CapPopoverTree/index.d.ts.map +1 -1
  54. package/CapPopoverTree/index.js +82 -72
  55. package/CapPopoverTree/style.d.ts +1 -5
  56. package/CapPopoverTree/style.d.ts.map +1 -1
  57. package/CapPopoverTree/styles.css +18 -119
  58. package/CapPopoverTree/styles.scss +31 -179
  59. package/CapSelectFilter/types.d.ts +1 -1
  60. package/CapSelectFilter/types.d.ts.map +1 -1
  61. package/CapTimeline/CapTimelineCard.d.ts +4 -27
  62. package/CapTimeline/CapTimelineCard.d.ts.map +1 -1
  63. package/CapTimeline/CapTimelineCard.js +40 -157
  64. package/CapTimeline/CapTimelinePanesWrapper.d.ts +4 -25
  65. package/CapTimeline/CapTimelinePanesWrapper.d.ts.map +1 -1
  66. package/CapTimeline/CapTimelinePanesWrapper.js +24 -20
  67. package/CapTimeline/index.d.ts +2 -17
  68. package/CapTimeline/index.d.ts.map +1 -1
  69. package/CapTimeline/index.js +62 -23
  70. package/CapTimeline/messages.d.ts +21 -0
  71. package/CapTimeline/messages.d.ts.map +1 -0
  72. package/CapTimeline/messages.js +24 -0
  73. package/CapTimeline/styles.css +40 -40
  74. package/CapTimeline/styles.module.scss.js +30 -0
  75. package/CapTimeline/styles.scss +76 -57
  76. package/CapTimeline/tests/CapTimeline.mockData.d.ts +14 -0
  77. package/CapTimeline/tests/CapTimeline.mockData.d.ts.map +1 -0
  78. package/CapTimeline/types.d.ts +60 -0
  79. package/CapTimeline/types.d.ts.map +1 -0
  80. package/CapTimeline/types.js +1 -0
  81. package/index.d.ts +8 -0
  82. package/index.d.ts.map +1 -1
  83. package/index.js +179 -171
  84. package/package.json +2 -2
  85. package/utils/getCapThemeConfig.d.ts +1 -1
  86. package/utils/getCapThemeConfig.d.ts.map +1 -1
  87. package/utils/getCapThemeConfig.js +9 -1
  88. package/CapPopoverTree/styles.module.scss.js +0 -26
  89. package/CapPopoverTree/tests/CapPopoverTree.mockData.d.ts +0 -22
  90. package/CapPopoverTree/tests/CapPopoverTree.mockData.d.ts.map +0 -1
  91. package/CapPopoverTree/types.d.ts +0 -62
  92. package/CapPopoverTree/types.d.ts.map +0 -1
  93. package/CapVirtualSelect/actions.d.ts +0 -16
  94. package/CapVirtualSelect/actions.d.ts.map +0 -1
  95. package/CapVirtualSelect/actions.js +0 -21
  96. package/CapVirtualSelect/constants.d.ts +0 -13
  97. package/CapVirtualSelect/constants.d.ts.map +0 -1
  98. package/CapVirtualSelect/constants.js +0 -26
  99. package/CapVirtualSelect/index.d.ts +0 -169
  100. package/CapVirtualSelect/index.d.ts.map +0 -1
  101. package/CapVirtualSelect/index.js +0 -409
  102. package/CapVirtualSelect/messages.d.ts +0 -9
  103. package/CapVirtualSelect/messages.d.ts.map +0 -1
  104. package/CapVirtualSelect/messages.js +0 -12
  105. package/CapVirtualSelect/reducer.d.ts +0 -4
  106. package/CapVirtualSelect/reducer.d.ts.map +0 -1
  107. package/CapVirtualSelect/reducer.js +0 -63
  108. package/CapVirtualSelect/saga.d.ts +0 -40
  109. package/CapVirtualSelect/saga.d.ts.map +0 -1
  110. package/CapVirtualSelect/saga.js +0 -91
  111. package/CapVirtualSelect/selectors.d.ts +0 -28
  112. package/CapVirtualSelect/selectors.d.ts.map +0 -1
  113. package/CapVirtualSelect/selectors.js +0 -30
  114. package/CapVirtualSelect/styles.css +0 -110
  115. package/CapVirtualSelect/styles.scss +0 -106
  116. package/CapVirtualSelect/tests/mockData.d.ts +0 -7
  117. package/CapVirtualSelect/tests/mockData.d.ts.map +0 -1
  118. package/CapVirtualSelect/utils.d.ts +0 -2
  119. package/CapVirtualSelect/utils.d.ts.map +0 -1
  120. package/CapVirtualSelect/utils.js +0 -12
  121. /package/{CapPopoverTree → CapDndGraphSidebar}/types.js +0 -0
@@ -0,0 +1,106 @@
1
+ import type React from 'react';
2
+ import type { DragSourceMonitor } from 'react-dnd';
3
+ /**
4
+ * Child node structure for sidebar icons
5
+ */
6
+ export interface ChildNode {
7
+ id: string;
8
+ type: string;
9
+ label: string;
10
+ isMultiPath?: boolean;
11
+ isDisabled?: boolean;
12
+ tooltipText?: string | ((id: string, isDisabled: boolean, handleModel: () => void) => React.ReactNode);
13
+ premiumTooltipText?: string;
14
+ showPremiumIcon?: boolean;
15
+ premiumModelContent?: () => React.ReactNode;
16
+ }
17
+ /**
18
+ * Node structure with categories and children
19
+ */
20
+ export interface Node {
21
+ key: string;
22
+ title: string;
23
+ tooltipText?: string;
24
+ children: ChildNode[];
25
+ color: string;
26
+ }
27
+ /**
28
+ * Props for CapDndGraphSidebar component
29
+ */
30
+ export interface CapDndGraphSidebarProps {
31
+ /** Array of node categories with their children */
32
+ nodes?: Node[];
33
+ /** Title displayed at the top of the sidebar */
34
+ sidebarTitle?: string;
35
+ /** Description text displayed below the title */
36
+ sidebarDescription?: string;
37
+ /** Info tooltip text for the sidebar title */
38
+ sidebarTitleInfo?: string;
39
+ /** Whether nodes can be dragged */
40
+ isNodeDraggable?: boolean;
41
+ /** Handler for drag end events */
42
+ endDrag?: (item: unknown, monitor: DragSourceMonitor) => void;
43
+ /** Whether the sidebar is in view-only mode */
44
+ viewMode?: boolean;
45
+ /** Callback when a node is dropped outside the canvas */
46
+ onDropOutsideCanvas?: (item: {
47
+ id: string;
48
+ type: string;
49
+ iconType: string;
50
+ color: string;
51
+ isMultiPath?: boolean;
52
+ }) => void;
53
+ }
54
+ /**
55
+ * Props for SideBarIcon component
56
+ */
57
+ export interface SideBarIconProps {
58
+ /** Child node data */
59
+ childNode: ChildNode;
60
+ /** Color for the icon background */
61
+ color: string;
62
+ /** Whether the node can be dragged */
63
+ isNodeDraggable?: boolean;
64
+ /** Whether the sidebar is in view-only mode */
65
+ viewMode?: boolean;
66
+ /** Callback when a node is dropped outside the canvas */
67
+ onDropOutsideCanvas?: (item: {
68
+ id: string;
69
+ type: string;
70
+ iconType: string;
71
+ color: string;
72
+ isMultiPath?: boolean;
73
+ }) => void;
74
+ /** Whether the premium modal is shown */
75
+ showModel?: boolean;
76
+ /** Handler to toggle the premium modal */
77
+ setShowModel?: (show: boolean) => void;
78
+ /** Handler for drag end events (passed through but not used directly) */
79
+ endDrag?: (item: unknown, monitor: DragSourceMonitor) => void;
80
+ }
81
+ /**
82
+ * Props for SidebarNodesRendered component
83
+ */
84
+ export interface SidebarNodesRenderedProps {
85
+ /** Array of node categories with their children */
86
+ nodes?: Node[];
87
+ /** Whether nodes can be dragged */
88
+ isNodeDraggable?: boolean;
89
+ /** Handler for drag end events */
90
+ endDrag?: (item: unknown, monitor: DragSourceMonitor) => void;
91
+ /** Whether the sidebar is in view-only mode */
92
+ viewMode?: boolean;
93
+ /** Callback when a node is dropped outside the canvas */
94
+ onDropOutsideCanvas?: (item: {
95
+ id: string;
96
+ type: string;
97
+ iconType: string;
98
+ color: string;
99
+ isMultiPath?: boolean;
100
+ }) => void;
101
+ /** Whether the premium modal is shown */
102
+ showModel?: boolean;
103
+ /** Handler to toggle the premium modal */
104
+ setShowModel?: (show: boolean) => void;
105
+ }
106
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapDndGraphSidebar/types.ts"],"names":[],"mappings":"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"}
@@ -4,24 +4,8 @@
4
4
  *
5
5
  */
6
6
  import React from 'react';
7
- import './styles.scss';
8
- declare const _default: React.ComponentType<Omit<{
9
- setacceptedfiles: any;
10
- setrejectedfiles: any;
11
- accept?: {
12
- 'text/csv': string[];
13
- 'application/vnd.ms-excel': string[];
14
- };
15
- maxfilesize?: number;
16
- minfilesize?: number;
17
- multiple?: boolean;
18
- dropboxwidth?: string;
19
- dropboxtext: any;
20
- selectFilesText: any;
21
- droptext: any;
22
- invalidFileSelectionText: any;
23
- or: any;
24
- className: any;
25
- } & import("react-intl").WrappedComponentProps, "intl">>;
7
+ import type { WrappedComponentProps } from 'react-intl';
8
+ import type { CapDragAndDropProps } from './types';
9
+ declare const _default: React.ComponentType<Omit<CapDragAndDropProps & WrappedComponentProps, "intl">>;
26
10
  export default _default;
27
11
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapDragAndDrop/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAsB,MAAM,OAAO,CAAC;AAU3C,OAAO,eAAe,CAAC;;;;;;;;;;;;;;;;;;;AAsGvB,wBAAoE"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapDragAndDrop/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAUxD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;;AA4GnD,wBAA0C"}
@@ -1,16 +1,16 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import classNames from "classnames";
3
3
  import { isEmpty } from "lodash";
4
- import PropTypes from "prop-types";
5
4
  import { useCallback } from "react";
6
5
  import { useDropzone } from "react-dropzone";
6
+ import { injectIntl } from "react-intl";
7
7
  import addFileSvg from "../assets/images/file-selector.svg.js";
8
8
  import CapButton from "../CapButton/index.js";
9
9
  import CapImage from "../CapImage/index.js";
10
10
  import CapRow from "../CapRow/index.js";
11
- import LocaleHoc from "../LocaleHoc/index.js";
12
11
  import { defaultMinFileSize, defaultMaxFileSize, defaultAcceptedFiles, small } from "./constants.js";
13
- import './styles.css';/* empty css */
12
+ import messages from "./messages.js";
13
+ import styles from "./styles.module.scss.js";
14
14
  const clsPrefix = "cap-drag-and-drop-v1";
15
15
  const CapDragAndDrop = ({
16
16
  setacceptedfiles,
@@ -25,8 +25,14 @@ const CapDragAndDrop = ({
25
25
  droptext,
26
26
  invalidFileSelectionText,
27
27
  or,
28
- className
28
+ className,
29
+ intl: { formatMessage }
29
30
  }) => {
31
+ const displayDropboxtext = dropboxtext ?? formatMessage(messages.dropboxtext);
32
+ const displaySelectFilesText = selectFilesText ?? formatMessage(messages.selectFilesText);
33
+ const displayDroptext = droptext ?? formatMessage(messages.droptext);
34
+ const displayInvalidFileSelectionText = invalidFileSelectionText ?? formatMessage(messages.invalidFileSelectionText);
35
+ const displayOr = or ?? formatMessage(messages.or);
30
36
  const onDrop = useCallback(
31
37
  (filesAccepted, filesRejected) => {
32
38
  if (multiple) {
@@ -52,40 +58,29 @@ const CapDragAndDrop = ({
52
58
  maxSize: maxfilesize,
53
59
  minSize: minfilesize
54
60
  });
55
- return /* @__PURE__ */ jsx(CapRow, { className: classNames("uploadFileSlideBoxContent", className), children: /* @__PURE__ */ jsx(CapRow, { "data-testid": "dragZoneCapColumn", type: "flex", children: /* @__PURE__ */ jsxs(
61
+ return /* @__PURE__ */ jsx(CapRow, { useLegacy: true, className: classNames("uploadFileSlideBoxContent", className), children: /* @__PURE__ */ jsx(CapRow, { useLegacy: true, "data-testid": "dragZoneCapColumn", type: "flex", children: /* @__PURE__ */ jsxs(
56
62
  "div",
57
63
  {
58
- className: classNames(`${clsPrefix}-main-div`, `${clsPrefix}-${dropboxwidth}`),
64
+ className: classNames(
65
+ styles[`${clsPrefix}-main-div`],
66
+ styles[`${clsPrefix}-${dropboxwidth}`]
67
+ ),
59
68
  ...getRootProps({ isDragAccept, isDragReject }),
60
69
  children: [
61
- /* @__PURE__ */ jsx("input", { ...getInputProps(), className: "cap-drag-and-drop-input" }),
62
- !isDragActive && /* @__PURE__ */ jsxs(CapRow, { "data-testid": "dragZone", className: "dragInactiveText", children: [
63
- /* @__PURE__ */ jsx(CapRow, { className: "fileUploadImage", children: /* @__PURE__ */ jsx(CapImage, { src: addFileSvg, alt: "default" }) }),
64
- /* @__PURE__ */ jsx(CapRow, { className: classNames(`${clsPrefix}-dropboxtext`), children: dropboxtext }),
65
- /* @__PURE__ */ jsx(CapRow, { className: "intermediateOR", children: or }),
66
- /* @__PURE__ */ jsx(CapRow, { className: classNames(`${clsPrefix}-uploadButton`), children: /* @__PURE__ */ jsx(CapButton, { type: "secondary", children: selectFilesText }) })
70
+ /* @__PURE__ */ jsx("input", { ...getInputProps(), className: styles["cap-drag-and-drop-input"] }),
71
+ !isDragActive && /* @__PURE__ */ jsxs(CapRow, { "data-testid": "dragZone", useLegacy: true, className: styles["dragInactiveText"], children: [
72
+ /* @__PURE__ */ jsx(CapRow, { useLegacy: true, className: styles["fileUploadImage"], children: /* @__PURE__ */ jsx(CapImage, { src: addFileSvg, alt: "default" }) }),
73
+ /* @__PURE__ */ jsx(CapRow, { useLegacy: true, className: styles[`${clsPrefix}-dropBoxText`], children: displayDropboxtext }),
74
+ /* @__PURE__ */ jsx(CapRow, { useLegacy: true, className: styles["intermediateOR"], children: displayOr }),
75
+ /* @__PURE__ */ jsx(CapRow, { useLegacy: true, className: styles[`${clsPrefix}-uploadButton`], children: /* @__PURE__ */ jsx(CapButton, { type: "secondary", children: displaySelectFilesText }) })
67
76
  ] }),
68
- isDragReject && /* @__PURE__ */ jsx(CapRow, { className: "drag-active-section", children: invalidFileSelectionText }),
69
- isDragAccept && /* @__PURE__ */ jsx(CapRow, { className: "drag-active-section", children: droptext })
77
+ isDragReject && /* @__PURE__ */ jsx(CapRow, { useLegacy: true, className: styles["drag-active-section"], children: displayInvalidFileSelectionText }),
78
+ isDragAccept && /* @__PURE__ */ jsx(CapRow, { useLegacy: true, className: styles["drag-active-section"], children: displayDroptext })
70
79
  ]
71
80
  }
72
81
  ) }) });
73
82
  };
74
- CapDragAndDrop.propTypes = {
75
- setacceptedfiles: PropTypes.func.isRequired,
76
- setrejectedfiles: PropTypes.func,
77
- accept: PropTypes.object,
78
- maxfilesize: PropTypes.number,
79
- multiple: PropTypes.bool,
80
- dropboxwidth: PropTypes.string,
81
- dropboxtext: PropTypes.string,
82
- className: PropTypes.string
83
- };
84
- CapDragAndDrop.defaultProps = {
85
- dropboxwidth: small,
86
- multiple: true
87
- };
88
- const index = LocaleHoc(CapDragAndDrop, { key: "CapDragAndDrop" });
83
+ const index = injectIntl(CapDragAndDrop);
89
84
  export {
90
85
  index as default
91
86
  };
@@ -0,0 +1,25 @@
1
+ export declare const scope = "app.commonUtils.capUiLibrary.CapDragAndDrop";
2
+ declare const _default: {
3
+ dropboxtext: {
4
+ id: string;
5
+ defaultMessage: string;
6
+ };
7
+ selectFilesText: {
8
+ id: string;
9
+ defaultMessage: string;
10
+ };
11
+ droptext: {
12
+ id: string;
13
+ defaultMessage: string;
14
+ };
15
+ invalidFileSelectionText: {
16
+ id: string;
17
+ defaultMessage: string;
18
+ };
19
+ or: {
20
+ id: string;
21
+ defaultMessage: string;
22
+ };
23
+ };
24
+ export default _default;
25
+ //# sourceMappingURL=messages.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../components/CapDragAndDrop/messages.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,gDAAgD,CAAC;;;;;;;;;;;;;;;;;;;;;;;AAEnE,wBAqBG"}
@@ -0,0 +1,28 @@
1
+ import { defineMessages } from "react-intl";
2
+ const scope = "app.commonUtils.capUiLibrary.CapDragAndDrop";
3
+ const messages = defineMessages({
4
+ dropboxtext: {
5
+ id: `${scope}.dropboxtext`,
6
+ defaultMessage: "Drop here!"
7
+ },
8
+ selectFilesText: {
9
+ id: `${scope}.selectFilesText`,
10
+ defaultMessage: "Select files from your computer"
11
+ },
12
+ droptext: {
13
+ id: `${scope}.droptext`,
14
+ defaultMessage: "Drag and drop files"
15
+ },
16
+ invalidFileSelectionText: {
17
+ id: `${scope}.invalidFileSelectionText`,
18
+ defaultMessage: "Invalid file selection!"
19
+ },
20
+ or: {
21
+ id: `${scope}.or`,
22
+ defaultMessage: "OR"
23
+ }
24
+ });
25
+ export {
26
+ messages as default,
27
+ scope
28
+ };
@@ -10,30 +10,31 @@
10
10
  display: flex;
11
11
  flex-direction: column;
12
12
  align-items: center;
13
- padding: 30px 158px;
14
- gap: 10px;
13
+ padding: 2.143rem 11.286rem;
14
+ gap: 0.714rem;
15
15
  background: #ffffff;
16
- border: 2px dashed #ebecf0;
17
- border-radius: 5px;
18
- border-width: 3px;
19
- height: 285px;
16
+ border: 0.143rem dashed #ebecf0;
17
+ border-radius: 0.357rem;
18
+ border-width: 0.214rem;
19
+ height: 20.357rem;
20
20
  }
21
21
  .cap-drag-and-drop-v1-size-r {
22
- width: 495px;
22
+ width: 35.357rem;
23
23
  }
24
24
  .cap-drag-and-drop-v1-size-s {
25
- width: 322px;
25
+ width: 23rem;
26
26
  }
27
27
  .dragInactiveText {
28
+ display: block;
28
29
  font-weight: 500;
29
30
  font-size: 1.428rem;
30
- line-height: 30px;
31
+ line-height: 1.875rem;
31
32
  text-align: center;
32
- width: 300px;
33
+ width: 21.429rem;
33
34
  }
34
35
  .intermediateOR {
35
- margin-top: 17px;
36
- margin-bottom: 13px;
36
+ margin-top: 1.214rem;
37
+ margin-bottom: 0.929rem;
37
38
  font-weight: 400;
38
39
  font-size: 1.142rem;
39
40
  line-height: 1.714rem;
@@ -41,17 +42,18 @@
41
42
  color: #091e42;
42
43
  }
43
44
  .fileUploadImage {
44
- margin-bottom: 31px;
45
+ margin-bottom: 2.214rem;
45
46
  }
46
47
  .cap-drag-and-drop-v1-uploadButton {
47
- margin-bottom: 10px;
48
+ margin-bottom: 0.714rem;
48
49
  }
49
50
  .cap-drag-and-drop-v1-dropBoxText {
50
51
  white-space: initial;
51
52
  word-break: break-word;
53
+ font-size: 1.428rem;
52
54
  }
53
55
  .drag-active-section {
54
- width: 200px;
56
+ width: 14.286rem;
55
57
  text-align: center;
56
58
  }
57
59
  .cap-drag-and-drop-input {
@@ -0,0 +1,21 @@
1
+ import './styles.css';const dragInactiveText = "dragInactiveText";
2
+ const intermediateOR = "intermediateOR";
3
+ const fileUploadImage = "fileUploadImage";
4
+ const styles = {
5
+ "cap-drag-and-drop-v1-main-div": "cap-drag-and-drop-v1-main-div",
6
+ "cap-drag-and-drop-v1-size-r": "cap-drag-and-drop-v1-size-r",
7
+ "cap-drag-and-drop-v1-size-s": "cap-drag-and-drop-v1-size-s",
8
+ dragInactiveText,
9
+ intermediateOR,
10
+ fileUploadImage,
11
+ "cap-drag-and-drop-v1-uploadButton": "cap-drag-and-drop-v1-uploadButton",
12
+ "cap-drag-and-drop-v1-dropBoxText": "cap-drag-and-drop-v1-dropBoxText",
13
+ "drag-active-section": "drag-active-section",
14
+ "cap-drag-and-drop-input": "cap-drag-and-drop-input"
15
+ };
16
+ export {
17
+ styles as default,
18
+ dragInactiveText,
19
+ fileUploadImage,
20
+ intermediateOR
21
+ };
@@ -1,36 +1,37 @@
1
- @import "../styles/_variables.scss";
1
+ @import '../styles/_variables.scss';
2
2
 
3
3
  .cap-drag-and-drop-v1-main-div {
4
4
  display: flex;
5
5
  flex-direction: column;
6
6
  align-items: center;
7
- padding: 30px 158px;
8
- gap: 10px;
7
+ padding: 2.143rem 11.286rem; // 30px 158px
8
+ gap: 0.714rem; // 10px
9
9
  background: $CAP_WHITE;
10
- border: 2px dashed $CAP_G08;
11
- border-radius: 5px;
12
- border-width: 3px;
13
- height: 285px;
10
+ border: 0.143rem dashed $CAP_G08; // 2px
11
+ border-radius: 0.357rem; // 5px
12
+ border-width: 0.214rem; // 3px
13
+ height: 20.357rem; // 285px
14
14
  }
15
15
 
16
16
  .cap-drag-and-drop-v1-size-r {
17
- width: 495px;
17
+ width: 35.357rem; // 495px
18
18
  }
19
19
  .cap-drag-and-drop-v1-size-s {
20
- width: 322px;
20
+ width: 23rem; // 322px
21
21
  }
22
22
 
23
23
  .dragInactiveText {
24
+ display: block;
24
25
  font-weight: 500;
25
26
  font-size: $CAP_SPACE_20;
26
- line-height: 30px;
27
+ line-height: 1.875rem;
27
28
  text-align: center;
28
- width: 300px;
29
+ width: 21.429rem; // 300px
29
30
  }
30
31
 
31
32
  .intermediateOR {
32
- margin-top: 17px;
33
- margin-bottom: 13px;
33
+ margin-top: 1.214rem; // 17px
34
+ margin-bottom: 0.929rem; // 13px
34
35
  font-weight: $FONT_WEIGHT_REGULAR;
35
36
  font-size: $CAP_SPACE_16;
36
37
  line-height: $CAP_SPACE_24;
@@ -39,19 +40,20 @@
39
40
  }
40
41
 
41
42
  .fileUploadImage {
42
- margin-bottom: 31px;
43
+ margin-bottom: 2.214rem; // 31px
43
44
  }
44
45
 
45
46
  .cap-drag-and-drop-v1-uploadButton {
46
- margin-bottom: 10px;
47
+ margin-bottom: 0.714rem; // 10px
47
48
  }
48
49
  .cap-drag-and-drop-v1-dropBoxText {
49
50
  white-space: initial;
50
51
  word-break: break-word;
52
+ font-size: $CAP_SPACE_20;
51
53
  }
52
54
 
53
55
  .drag-active-section {
54
- width: 200px;
56
+ width: 14.286rem; // 200px
55
57
  text-align: center;
56
58
  }
57
59
 
@@ -0,0 +1,17 @@
1
+ import type React from 'react';
2
+ export interface CapDragAndDropProps {
3
+ setacceptedfiles: (value: File[] | ((prev: File[]) => File[])) => void;
4
+ setrejectedfiles?: (value: unknown) => void;
5
+ accept?: Record<string, string[]>;
6
+ maxfilesize?: number;
7
+ minfilesize?: number;
8
+ multiple?: boolean;
9
+ dropboxwidth?: string;
10
+ dropboxtext?: string;
11
+ selectFilesText?: string;
12
+ droptext?: string;
13
+ invalidFileSelectionText?: string;
14
+ or?: React.ReactNode;
15
+ className?: string;
16
+ }
17
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapDragAndDrop/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,mBAAmB;IAClC,gBAAgB,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IACvE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
@@ -0,0 +1 @@
1
+
package/CapIcon/index.js CHANGED
@@ -55,8 +55,8 @@ const CapIcon = React.forwardRef(
55
55
  {
56
56
  ref,
57
57
  className: classNames(
58
- styles["cap-icon-wrapper"],
59
- styles["cap-icon"],
58
+ styles["cap-icon-v2"],
59
+ type ? `cap-icon-v2-${type}` : null,
60
60
  styles[size],
61
61
  { [styles["with-text-label"]]: textLabel, [styles.disabled]: disabled },
62
62
  className
@@ -84,8 +84,8 @@ const CapIcon = React.forwardRef(
84
84
  {
85
85
  ref: withBackground ? void 0 : ref,
86
86
  className: classNames(
87
- styles["cap-icon-wrapper"],
88
- styles["cap-icon"],
87
+ styles["cap-icon-v2"],
88
+ type ? `cap-icon-v2-${type}` : null,
89
89
  styles[size],
90
90
  {
91
91
  [styles.spin]: spin,
@@ -106,7 +106,7 @@ const CapIcon = React.forwardRef(
106
106
  "div",
107
107
  {
108
108
  ref,
109
- className: classNames(styles["cap-icon-background-wrapper"], styles[size]),
109
+ className: classNames(styles["cap-icon-background"], styles[size]),
110
110
  ...backgroundProps,
111
111
  children: iconComponent
112
112
  }
@@ -120,8 +120,8 @@ const CapIcon = React.forwardRef(
120
120
  {
121
121
  ref: withBackground ? void 0 : ref,
122
122
  className: classNames(
123
- styles["cap-icon-wrapper"],
124
- styles["cap-icon"],
123
+ styles["cap-icon-v2"],
124
+ type ? `cap-icon-v2-${type}` : null,
125
125
  styles[size],
126
126
  { [styles.disabled]: disabled, [styles["with-text-label"]]: textLabel },
127
127
  className
@@ -139,7 +139,7 @@ const CapIcon = React.forwardRef(
139
139
  "span",
140
140
  {
141
141
  ref,
142
- className: classNames(styles["cap-icon-background-wrapper"], styles[size]),
142
+ className: classNames(styles["cap-icon-background"], styles[size]),
143
143
  ...backgroundProps,
144
144
  children: iconComponent
145
145
  }
@@ -150,8 +150,8 @@ const CapIcon = React.forwardRef(
150
150
  {
151
151
  ref,
152
152
  className: classNames(
153
- styles["cap-icon-wrapper"],
154
- styles["cap-icon"],
153
+ styles["cap-icon-v2"],
154
+ type ? `cap-icon-v2-${type}` : null,
155
155
  styles[size],
156
156
  { [styles.disabled]: disabled, [styles["with-text-label"]]: textLabel },
157
157
  className
@@ -168,7 +168,7 @@ CapIcon.displayName = "CapIcon";
168
168
  const AntIcon = ({ className, ...rest }) => /* @__PURE__ */ jsx(
169
169
  "i",
170
170
  {
171
- className: classNames(styles["cap-icon-ant-icon"], className),
171
+ className: classNames(styles["cap-icon-v2"], className),
172
172
  style: { display: "inline-flex", alignItems: "center", justifyContent: "center" },
173
173
  ...rest
174
174
  }
@@ -181,7 +181,7 @@ const CapIconAvatar = ({
181
181
  backgroundProps = {},
182
182
  labelProps = {}
183
183
  }) => {
184
- return /* @__PURE__ */ jsxs("div", { className: classNames(styles["cap-icon-avatar"], className), children: [
184
+ return /* @__PURE__ */ jsxs("div", { className: classNames(styles["cap-icon-v2-avatar"], className), children: [
185
185
  /* @__PURE__ */ jsx(LogoBackground, { width, height, ...backgroundProps }),
186
186
  text && /* @__PURE__ */ jsx("span", { className: styles["text-label"], ...labelProps, children: text })
187
187
  ] });
@@ -6,50 +6,46 @@
6
6
  /* Border Width */
7
7
  /* Transition */
8
8
  /* Timezones Footer */
9
- .cap-icon-wrapper {
9
+ .cap-icon-v2 {
10
10
  display: inline-flex;
11
11
  align-items: center;
12
12
  justify-content: center;
13
13
  }
14
- .cap-icon-wrapper.disabled {
14
+ .cap-icon-v2.disabled {
15
15
  cursor: not-allowed;
16
16
  opacity: 0.5;
17
17
  }
18
- .cap-icon-wrapper.xs {
18
+ .cap-icon-v2.xs {
19
19
  font-size: 0.857rem;
20
20
  }
21
- .cap-icon-wrapper.s {
21
+ .cap-icon-v2.s {
22
22
  font-size: 1.143rem;
23
23
  }
24
- .cap-icon-wrapper.m {
24
+ .cap-icon-v2.m {
25
25
  font-size: 1.714rem;
26
26
  }
27
- .cap-icon-wrapper.l {
27
+ .cap-icon-v2.l {
28
28
  font-size: 2.286rem;
29
29
  }
30
- .cap-icon-wrapper.with-text-label {
30
+ .cap-icon-v2.with-text-label {
31
31
  display: inline-flex;
32
32
  align-items: center;
33
33
  gap: 0.571rem;
34
34
  }
35
- .cap-icon-background-wrapper {
36
- display: inline-flex;
35
+ .cap-icon-v2 .anticon {
36
+ display: flex;
37
37
  align-items: center;
38
38
  justify-content: center;
39
- border-radius: 50%;
40
- background-color: #dfe2e7;
41
39
  }
42
- .cap-icon {
43
- display: inline-flex;
44
- align-items: center;
40
+ .cap-icon-v2.spin {
41
+ animation: rotate 2s linear infinite;
45
42
  }
46
- .cap-icon .anticon {
47
- display: flex;
43
+ .cap-icon-background {
44
+ display: inline-flex;
48
45
  align-items: center;
49
46
  justify-content: center;
50
- }
51
- .cap-icon.spin {
52
- animation: rotate 2s linear infinite;
47
+ border-radius: 50%;
48
+ background-color: #dfe2e7;
53
49
  }
54
50
  @keyframes rotate {
55
51
  from {
@@ -59,13 +55,13 @@
59
55
  transform: rotate(360deg);
60
56
  }
61
57
  }
62
- .cap-icon-avatar {
58
+ .cap-icon-v2-avatar {
63
59
  display: inline-flex;
64
60
  align-items: center;
65
61
  justify-content: center;
66
62
  position: relative;
67
63
  }
68
- .cap-icon-avatar .text-label {
64
+ .cap-icon-v2-avatar .text-label {
69
65
  position: absolute;
70
66
  display: flex;
71
67
  align-items: center;
@@ -7,19 +7,18 @@ const anticon = "anticon";
7
7
  const spin = "spin";
8
8
  const rotate = "rotate";
9
9
  const styles = {
10
- "cap-icon-wrapper": "cap-icon-wrapper",
10
+ "cap-icon-v2": "cap-icon-v2",
11
11
  disabled,
12
12
  xs,
13
13
  s,
14
14
  m,
15
15
  l,
16
16
  "with-text-label": "with-text-label",
17
- "cap-icon-background-wrapper": "cap-icon-background-wrapper",
18
- "cap-icon": "cap-icon",
19
17
  anticon,
20
18
  spin,
21
19
  rotate,
22
- "cap-icon-avatar": "cap-icon-avatar",
20
+ "cap-icon-background": "cap-icon-background",
21
+ "cap-icon-v2-avatar": "cap-icon-v2-avatar",
23
22
  "text-label": "text-label"
24
23
  };
25
24
  export {