@elliemae/ds-uploader 3.21.2 → 3.22.0-next.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.
@@ -0,0 +1,171 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var styled_exports = {};
30
+ __export(styled_exports, {
31
+ StyledAcceptedTypes: () => StyledAcceptedTypes,
32
+ StyledDividerVertical: () => StyledDividerVertical,
33
+ StyledDividerVerticalActions: () => StyledDividerVerticalActions,
34
+ StyledInfoText: () => StyledInfoText,
35
+ StyledUploader: () => StyledUploader,
36
+ StyledUploaderActions: () => StyledUploaderActions,
37
+ StyledUploaderDragActive: () => StyledUploaderDragActive,
38
+ StyledUploaderIconArea: () => StyledUploaderIconArea,
39
+ StyledUploaderInfo: () => StyledUploaderInfo,
40
+ StyledUploaderWrapper: () => StyledUploaderWrapper
41
+ });
42
+ module.exports = __toCommonJS(styled_exports);
43
+ var React = __toESM(require("react"));
44
+ var import_ds_system = require("@elliemae/ds-system");
45
+ var import_constants = require("./constants.js");
46
+ const StyledUploaderWrapper = (0, import_ds_system.styled)("div", {
47
+ name: import_constants.DSUploaderName,
48
+ slot: import_constants.DSUploaderSlots.ROOT
49
+ })`
50
+ display: inline-flex;
51
+ flex-direction: column;
52
+ ${import_ds_system.xStyledCommonProps}
53
+ `;
54
+ const StyledDividerVertical = (0, import_ds_system.styled)("div", {
55
+ name: import_constants.DSUploaderName,
56
+ slot: import_constants.DSUploaderSlots.DIVIDER_VERTICAL
57
+ })`
58
+ border-right: 1px solid ${({ theme }) => theme.colors.neutral[100]};
59
+ border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[100]};
60
+ height: ${({ theme }) => theme.space.s};
61
+ margin: 0 ${({ theme }) => theme.space.xs};
62
+ `;
63
+ const StyledDividerVerticalActions = (0, import_ds_system.styled)(StyledDividerVertical, {
64
+ name: import_constants.DSUploaderName,
65
+ slot: import_constants.DSUploaderSlots.ACTIONS_DIVIDER_VERTICAL
66
+ })`
67
+ height: initial;
68
+ margin: 2px ${({ theme }) => theme.space.xxxs};
69
+ `;
70
+ const StyledUploaderIconArea = (0, import_ds_system.styled)("div", {
71
+ name: import_constants.DSUploaderName,
72
+ slot: import_constants.DSUploaderSlots.ICON_AREA
73
+ })`
74
+ position: relative;
75
+ & svg {
76
+ fill: ${({ theme }) => theme.colors.neutral["500"]};
77
+ }
78
+ `;
79
+ const StyledUploaderDragActive = (0, import_ds_system.styled)("div", {
80
+ name: import_constants.DSUploaderName,
81
+ slot: import_constants.DSUploaderSlots.UPLOADER_DRAG_ACTIVE
82
+ })`
83
+ visibility: hidden;
84
+ position: absolute;
85
+ top: 0;
86
+ left: 0;
87
+ width: 100%;
88
+ height: 100%;
89
+ background-color: ${({ theme }) => theme.colors.brand[500]};
90
+ color: ${({ theme }) => theme.colors.neutral["000"]};
91
+ border: 1px ${({ theme }) => theme.colors.brand[500]};
92
+ border-radius: 4px;
93
+ font-weight: ${({ theme }) => theme.fontWeights.bold};
94
+ justify-content: center;
95
+ align-items: center;
96
+ `;
97
+ const StyledUploader = (0, import_ds_system.styled)("div", {
98
+ name: import_constants.DSUploaderName,
99
+ slot: import_constants.DSUploaderSlots.UPLOADER
100
+ })`
101
+ position: relative;
102
+ display: inline-flex;
103
+ border: 1px solid
104
+ ${({ theme, isDragActive, disabledAll }) => isDragActive && !disabledAll ? "transparent" : theme.colors.neutral["200"]};
105
+ padding: 6px ${({ theme }) => theme.space.xs};
106
+ border-radius: 4px;
107
+ align-items: center;
108
+ outline: none;
109
+
110
+ &:hover,
111
+ &:focus {
112
+ background-color: ${({ theme }) => theme.colors.brand["100"]};
113
+ border: 1px dashed ${({ theme }) => theme.colors.brand["500"]};
114
+ ${StyledDividerVertical} {
115
+ border-color: ${({ theme }) => theme.colors.brand["300"]};
116
+ }
117
+ ${StyledUploaderIconArea} {
118
+ & svg {
119
+ fill: ${({ theme }) => theme.colors.brand["500"]};
120
+ }
121
+ }
122
+ }
123
+
124
+ &:focus {
125
+ // in replace of @include dsFocus();
126
+ outline: none;
127
+ box-shadow: inset 0 0 0 1px #8cc2ed;
128
+ border-radius: 2px;
129
+ }
130
+
131
+ ${StyledUploaderDragActive} {
132
+ ${({ isDragActive, disabledAll }) => {
133
+ if (isDragActive && !disabledAll) {
134
+ return `
135
+ visibility: visible;
136
+ display: flex;
137
+
138
+ `;
139
+ }
140
+ }}
141
+ }
142
+ `;
143
+ const StyledUploaderInfo = (0, import_ds_system.styled)("div", {
144
+ name: import_constants.DSUploaderName,
145
+ slot: import_constants.DSUploaderSlots.UPLOADER_INFO
146
+ })``;
147
+ const StyledInfoText = (0, import_ds_system.styled)("span", {
148
+ name: import_constants.DSUploaderName,
149
+ slot: import_constants.DSUploaderSlots.INFO_TEXT
150
+ })`
151
+ font-size: 1rem;
152
+ font-weight: ${({ theme }) => theme.fontWeights.regular};
153
+ color: ${({ theme }) => theme.colors.neutral[700]};
154
+ `;
155
+ const StyledAcceptedTypes = (0, import_ds_system.styled)("div", {
156
+ name: import_constants.DSUploaderName,
157
+ slot: import_constants.DSUploaderSlots.ACCEPTED_TYPES
158
+ })`
159
+ margin-top: 2px;
160
+ color: ${({ theme }) => theme.colors.neutral[500]};
161
+ text-transform: uppercase;
162
+ text-align: right;
163
+ font-size: ${({ theme }) => theme.fontSizes.label[200]};
164
+ `;
165
+ const StyledUploaderActions = (0, import_ds_system.styled)("div", {
166
+ name: import_constants.DSUploaderName,
167
+ slot: import_constants.DSUploaderSlots.UPLOADER_ACTIONS
168
+ })`
169
+ display: flex;
170
+ `;
171
+ //# sourceMappingURL=styled.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSUploaderName, DSUploaderSlots } from './constants.js';\n\nexport const StyledUploaderWrapper = styled('div', {\n name: DSUploaderName,\n slot: DSUploaderSlots.ROOT,\n})`\n display: inline-flex;\n flex-direction: column;\n ${xStyledCommonProps}\n`;\n\nexport const StyledDividerVertical = styled('div', {\n name: DSUploaderName,\n slot: DSUploaderSlots.DIVIDER_VERTICAL,\n})`\n border-right: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n height: ${({ theme }) => theme.space.s};\n margin: 0 ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledDividerVerticalActions = styled(StyledDividerVertical, {\n name: DSUploaderName,\n slot: DSUploaderSlots.ACTIONS_DIVIDER_VERTICAL,\n})`\n height: initial;\n margin: 2px ${({ theme }) => theme.space.xxxs};\n`;\n\nexport const StyledUploaderIconArea = styled('div', {\n name: DSUploaderName,\n slot: DSUploaderSlots.ICON_AREA,\n})`\n position: relative;\n & svg {\n fill: ${({ theme }) => theme.colors.neutral['500']};\n }\n`;\n\nexport const StyledUploaderDragActive = styled('div', {\n name: DSUploaderName,\n slot: DSUploaderSlots.UPLOADER_DRAG_ACTIVE,\n})`\n visibility: hidden;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: ${({ theme }) => theme.colors.brand[500]};\n color: ${({ theme }) => theme.colors.neutral['000']};\n border: 1px ${({ theme }) => theme.colors.brand[500]};\n border-radius: 4px;\n font-weight: ${({ theme }) => theme.fontWeights.bold};\n justify-content: center;\n align-items: center;\n`;\n\nexport const StyledUploader = styled('div', {\n name: DSUploaderName,\n slot: DSUploaderSlots.UPLOADER,\n})<{ isDragActive: boolean; disabledAll: boolean }>`\n position: relative;\n display: inline-flex;\n border: 1px solid\n ${({ theme, isDragActive, disabledAll }) =>\n isDragActive && !disabledAll ? 'transparent' : theme.colors.neutral['200']};\n padding: 6px ${({ theme }) => theme.space.xs};\n border-radius: 4px;\n align-items: center;\n outline: none;\n\n &:hover,\n &:focus {\n background-color: ${({ theme }) => theme.colors.brand['100']};\n border: 1px dashed ${({ theme }) => theme.colors.brand['500']};\n ${StyledDividerVertical} {\n border-color: ${({ theme }) => theme.colors.brand['300']};\n }\n ${StyledUploaderIconArea} {\n & svg {\n fill: ${({ theme }) => theme.colors.brand['500']};\n }\n }\n }\n\n &:focus {\n // in replace of @include dsFocus();\n outline: none;\n box-shadow: inset 0 0 0 1px #8cc2ed;\n border-radius: 2px;\n }\n\n ${StyledUploaderDragActive} {\n ${({ isDragActive, disabledAll }) => {\n if (isDragActive && !disabledAll) {\n return `\n visibility: visible;\n display: flex;\n\n `;\n }\n }}\n }\n`;\n\nexport const StyledUploaderInfo = styled('div', {\n name: DSUploaderName,\n slot: DSUploaderSlots.UPLOADER_INFO,\n})``;\nexport const StyledInfoText = styled('span', {\n name: DSUploaderName,\n slot: DSUploaderSlots.INFO_TEXT,\n})`\n font-size: 1rem;\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.neutral[700]};\n`;\n\nexport const StyledAcceptedTypes = styled('div', {\n name: DSUploaderName,\n slot: DSUploaderSlots.ACCEPTED_TYPES,\n})`\n margin-top: 2px;\n color: ${({ theme }) => theme.colors.neutral[500]};\n text-transform: uppercase;\n text-align: right;\n font-size: ${({ theme }) => theme.fontSizes.label[200]};\n`;\n\nexport const StyledUploaderActions = styled('div', {\n name: DSUploaderName,\n slot: DSUploaderSlots.UPLOADER_ACTIONS,\n})`\n display: flex;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -1,122 +1,173 @@
1
1
  import * as React from "react";
2
2
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
- import { aggregatedClasses } from "@elliemae/ds-classnames";
3
+ import { useCallback, useMemo } from "react";
4
4
  import { runAll } from "@elliemae/ds-utilities";
5
- import { describe } from "@elliemae/ds-props-helpers";
6
- import { UploadFile } from "@elliemae/ds-icons";
7
- import DSButton, { BUTTON_VARIANT } from "@elliemae/ds-button";
5
+ import {
6
+ describe,
7
+ useMemoMergePropsWithDefault,
8
+ useValidateTypescriptPropTypes,
9
+ useGetGlobalAttributes,
10
+ useGetXstyledProps
11
+ } from "@elliemae/ds-props-helpers";
12
+ import { DSButtonV2, BUTTON_TYPES } from "@elliemae/ds-button";
8
13
  import { useDropzone } from "react-dropzone";
9
14
  import DSTooltip from "@elliemae/ds-tooltip";
10
- import { propTypes } from "./propTypes.js";
11
- const blockName = "uploader";
12
- const blockNameInfo = `${blockName}-info`;
13
- const blockNameDragActive = `${blockName}-drag-active`;
14
- const blockNameWrapper = `${blockName}-wrapper`;
15
- const UploaderWrapper = aggregatedClasses("div")(blockNameWrapper, null, ({ disabled }) => ({ disabled }));
16
- const Uploader = aggregatedClasses("div")(blockName, null, ({ isDragActive }) => ({ "drag-active": isDragActive }));
17
- const UploaderDragActive = aggregatedClasses("div")(blockNameDragActive);
18
- const UploaderIconArea = aggregatedClasses("div")(`${blockName}-icon-wrapper`);
19
- const UploaderInfo = aggregatedClasses("div")(blockNameInfo);
20
- const InfoText = aggregatedClasses("span")(blockNameInfo, "text");
21
- const UploaderActions = aggregatedClasses("div")(blockNameInfo, "actions");
22
- const AcceptedTypes = aggregatedClasses("div")(blockNameWrapper, "accepted-types");
23
- const DividerVertical = aggregatedClasses("div")("divider", null, ({ vertical }) => ({ vertical }));
24
- const ActionButton = ({ labelText, ...otherProps }) => /* @__PURE__ */ jsx(DSButton, { ...otherProps, buttonType: "text", labelText });
25
- const noop = () => null;
26
- const DSUploader = ({
27
- containerProps = {},
28
- label = "Browse",
29
- // todo: i18n
30
- icon: UploadFileIcon = UploadFile,
31
- defaultActionLabel = "LOCAL DRIVE",
32
- // todo: i18n
33
- dragActiveInstructionalText = "DROP FILES HERE",
34
- dragActiveIcon: DragActiveIcon = UploadFile,
35
- altActionLabel = "DOCUMENTS",
36
- // todo: i18n
37
- acceptedTypesText = "JPG, JPEG, PNG, PDF",
38
- disabledDefault = false,
39
- disabledAlt = false,
40
- onDefaultHandlerClick = noop,
41
- onAltHandlerClick = noop,
42
- actions = { defaultAction: "LOCAL DRIVE", altAction: "DOCUMENTS" },
43
- showAltAction = false,
44
- defaultActionTooltipText,
45
- altActionTooltipText,
46
- ...dropzoneProps
47
- }) => {
48
- const { getRootProps, getInputProps, isDragActive } = useDropzone(dropzoneProps);
15
+ import { defaultProps, propTypes } from "./react-desc-prop-types.js";
16
+ import {
17
+ StyledAcceptedTypes,
18
+ StyledDividerVertical,
19
+ StyledInfoText,
20
+ StyledUploader,
21
+ StyledUploaderDragActive,
22
+ StyledUploaderIconArea,
23
+ StyledUploaderInfo,
24
+ StyledUploaderWrapper,
25
+ StyledUploaderActions,
26
+ StyledDividerVerticalActions
27
+ } from "./styled.js";
28
+ import { DSUploaderName, defaultActions } from "./constants.js";
29
+ const ActionButton = ({ labelText, ...otherProps }) => /* @__PURE__ */ jsx(
30
+ DSButtonV2,
31
+ {
32
+ ...otherProps,
33
+ buttonType: BUTTON_TYPES.TEXT,
34
+ style: { padding: 0, height: "initial", borderWidth: "0px" },
35
+ children: labelText
36
+ }
37
+ );
38
+ const DSUploader = (props) => {
39
+ const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
40
+ useValidateTypescriptPropTypes(propsWithDefault, propTypes, DSUploaderName);
41
+ const {
42
+ containerProps,
43
+ label,
44
+ icon: UploadFileIcon,
45
+ defaultActionLabel,
46
+ dragActiveInstructionalText,
47
+ dragActiveIcon: DragActiveIcon,
48
+ altActionLabel,
49
+ acceptedTypesText,
50
+ disabledDefault,
51
+ disabledAlt,
52
+ onDefaultHandlerClick,
53
+ onAltHandlerClick,
54
+ actions,
55
+ showAltAction,
56
+ defaultActionTooltipText,
57
+ altActionTooltipText,
58
+ ...rest
59
+ } = propsWithDefault;
60
+ const globalAttributes = useGetGlobalAttributes(rest);
61
+ const xstyledProps = useGetXstyledProps(rest);
62
+ const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);
63
+ const getOwnerPropsArguments = useCallback(() => ({}), []);
64
+ const { getRootProps, getInputProps, isDragActive } = useDropzone(rest);
49
65
  const { onClick: onOpenFile, ...rootProps } = getRootProps();
50
66
  const disabledAll = disabledDefault && disabledAlt;
51
- const delfaultActionButton = /* @__PURE__ */ jsx(
52
- ActionButton,
53
- {
54
- variant: disabledDefault && BUTTON_VARIANT.DISABLED,
55
- labelText: actions.defaultAction ? actions.defaultAction : defaultActionLabel,
56
- onClick: (...args) => {
57
- if (!disabledDefault)
58
- runAll(onDefaultHandlerClick, onOpenFile)(...args);
67
+ const delfaultActionButton = useMemo(
68
+ () => /* @__PURE__ */ jsx(
69
+ ActionButton,
70
+ {
71
+ disabled: disabledDefault,
72
+ labelText: actions.defaultAction ? actions.defaultAction : defaultActionLabel,
73
+ onClick: (...args) => {
74
+ if (!disabledDefault)
75
+ runAll(onDefaultHandlerClick, onOpenFile)(...args);
76
+ }
59
77
  }
60
- }
78
+ ),
79
+ [actions.defaultAction, defaultActionLabel, disabledDefault, onDefaultHandlerClick, onOpenFile]
61
80
  );
62
- const altActionButton = /* @__PURE__ */ jsx(
63
- ActionButton,
64
- {
65
- variant: disabledAlt && BUTTON_VARIANT.DISABLED,
66
- labelText: actions.altAction ? actions.altAction : altActionLabel,
67
- onClick: (...args) => {
68
- if (!disabledAlt)
69
- onAltHandlerClick(...args);
81
+ const altActionButton = useMemo(
82
+ () => /* @__PURE__ */ jsx(
83
+ ActionButton,
84
+ {
85
+ disabled: disabledAlt,
86
+ labelText: actions.altAction ? actions.altAction : altActionLabel,
87
+ onClick: (...args) => {
88
+ if (!disabledAlt)
89
+ onAltHandlerClick(...args);
90
+ }
70
91
  }
71
- }
92
+ ),
93
+ [actions.altAction, altActionLabel, disabledAlt, onAltHandlerClick]
72
94
  );
73
- const defaultAction = !defaultActionTooltipText ? delfaultActionButton : /* @__PURE__ */ jsx(
74
- DSTooltip,
75
- {
76
- containerProps: { id: "default-action-tooltip" },
77
- interactionType: "hover",
78
- title: defaultActionTooltipText,
79
- triggerComponent: delfaultActionButton
80
- }
95
+ const defaultAction = useMemo(
96
+ () => !defaultActionTooltipText ? delfaultActionButton : /* @__PURE__ */ jsx(
97
+ DSTooltip,
98
+ {
99
+ containerProps: { id: "default-action-tooltip" },
100
+ interactionType: "hover",
101
+ title: defaultActionTooltipText,
102
+ triggerComponent: delfaultActionButton
103
+ }
104
+ ),
105
+ [defaultActionTooltipText, delfaultActionButton]
81
106
  );
82
- const altAction = !altActionTooltipText ? altActionButton : /* @__PURE__ */ jsx(
83
- DSTooltip,
107
+ const altAction = useMemo(
108
+ () => !altActionTooltipText ? altActionButton : /* @__PURE__ */ jsx(
109
+ DSTooltip,
110
+ {
111
+ containerProps: { id: "alt-action-tooltip" },
112
+ interactionType: "hover",
113
+ title: altActionTooltipText,
114
+ triggerComponent: altActionButton
115
+ }
116
+ ),
117
+ [altActionTooltipText, altActionButton]
118
+ );
119
+ return /* @__PURE__ */ jsxs(
120
+ StyledUploaderWrapper,
84
121
  {
85
- containerProps: { id: "alt-action-tooltip" },
86
- interactionType: "hover",
87
- title: altActionTooltipText,
88
- triggerComponent: altActionButton
122
+ ...containerProps,
123
+ ...globalAttributes,
124
+ ...xstyledProps,
125
+ getOwnerProps,
126
+ getOwnerPropsArguments,
127
+ children: [
128
+ /* @__PURE__ */ jsxs(
129
+ StyledUploader,
130
+ {
131
+ ...rootProps,
132
+ isDragActive,
133
+ disabledAll,
134
+ getOwnerProps,
135
+ getOwnerPropsArguments,
136
+ children: [
137
+ /* @__PURE__ */ jsx(StyledUploaderIconArea, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ jsx(UploadFileIcon, { size: "l" }) }),
138
+ /* @__PURE__ */ jsx(StyledDividerVertical, { getOwnerProps, getOwnerPropsArguments }),
139
+ /* @__PURE__ */ jsxs(StyledUploaderInfo, { getOwnerProps, getOwnerPropsArguments, children: [
140
+ /* @__PURE__ */ jsx(StyledInfoText, { getOwnerProps, getOwnerPropsArguments, children: label }),
141
+ /* @__PURE__ */ jsxs(StyledUploaderActions, { getOwnerProps, getOwnerPropsArguments, children: [
142
+ actions.defaultAction && defaultAction,
143
+ (actions.altAction || showAltAction) && /* @__PURE__ */ jsxs(Fragment, { children: [
144
+ actions.defaultAction && /* @__PURE__ */ jsx(
145
+ StyledDividerVerticalActions,
146
+ {
147
+ getOwnerProps,
148
+ getOwnerPropsArguments
149
+ }
150
+ ),
151
+ altAction
152
+ ] })
153
+ ] })
154
+ ] }),
155
+ !disabledAll && /* @__PURE__ */ jsxs(StyledUploaderDragActive, { getOwnerProps, getOwnerPropsArguments, children: [
156
+ /* @__PURE__ */ jsx(DragActiveIcon, { color: ["neutral", "000"], mr: "xxs" }),
157
+ dragActiveInstructionalText
158
+ ] }),
159
+ !disabledAll && /* @__PURE__ */ jsx("input", { ...getInputProps(), "aria-label": "file" })
160
+ ]
161
+ }
162
+ ),
163
+ typeof acceptedTypesText === "string" && /* @__PURE__ */ jsx(StyledAcceptedTypes, { getOwnerProps, getOwnerPropsArguments, children: acceptedTypesText.toUpperCase() })
164
+ ]
89
165
  }
90
166
  );
91
- return /* @__PURE__ */ jsxs(UploaderWrapper, { ...containerProps, classProps: { disabled: disabledAll }, children: [
92
- /* @__PURE__ */ jsxs(Uploader, { ...rootProps, classProps: { isDragActive }, children: [
93
- /* @__PURE__ */ jsx(UploaderIconArea, { children: /* @__PURE__ */ jsx(UploadFileIcon, { size: "l" }) }),
94
- /* @__PURE__ */ jsx(DividerVertical, {}),
95
- /* @__PURE__ */ jsxs(UploaderInfo, { children: [
96
- /* @__PURE__ */ jsx(InfoText, { children: label }),
97
- /* @__PURE__ */ jsxs(UploaderActions, { children: [
98
- actions.defaultAction && defaultAction,
99
- (actions.altAction || showAltAction) && /* @__PURE__ */ jsxs(Fragment, { children: [
100
- actions.defaultAction && /* @__PURE__ */ jsx(DividerVertical, {}),
101
- altAction
102
- ] })
103
- ] })
104
- ] }),
105
- !disabledAll && /* @__PURE__ */ jsxs(UploaderDragActive, { children: [
106
- /* @__PURE__ */ jsx(DragActiveIcon, {}),
107
- dragActiveInstructionalText
108
- ] }),
109
- !disabledAll && /* @__PURE__ */ jsx("input", { ...getInputProps() })
110
- ] }),
111
- typeof acceptedTypesText === "string" && /* @__PURE__ */ jsx(AcceptedTypes, { children: acceptedTypesText.toUpperCase() })
112
- ] });
113
- };
114
- DSUploader.actions = {
115
- defaultAction: "LOCAL DRIVE",
116
- altAction: "DOCUMENTS"
117
167
  };
168
+ DSUploader.actions = defaultActions;
118
169
  DSUploader.propTypes = propTypes;
119
- DSUploader.displayName = "DSUploader";
170
+ DSUploader.displayName = DSUploaderName;
120
171
  const UploaderWithSchema = describe(DSUploader);
121
172
  UploaderWithSchema.propTypes = propTypes;
122
173
  var DSUploader_default = DSUploader;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSUploader.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { runAll } from '@elliemae/ds-utilities';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { UploadFile } from '@elliemae/ds-icons';\nimport DSButton, { BUTTON_VARIANT } from '@elliemae/ds-button';\nimport { useDropzone } from 'react-dropzone';\nimport DSTooltip from '@elliemae/ds-tooltip';\nimport { propTypes } from './propTypes.js';\nimport type { DSUploaderPropsT, ActionButtonPropsT } from './index.d';\n\nconst blockName = 'uploader';\nconst blockNameInfo = `${blockName}-info`;\nconst blockNameDragActive = `${blockName}-drag-active`;\nconst blockNameWrapper = `${blockName}-wrapper`;\n\nconst UploaderWrapper = aggregatedClasses('div')(blockNameWrapper, null, ({ disabled }) => ({ disabled }));\nconst Uploader = aggregatedClasses('div')(blockName, null, ({ isDragActive }) => ({ 'drag-active': isDragActive }));\nconst UploaderDragActive = aggregatedClasses('div')(blockNameDragActive);\nconst UploaderIconArea = aggregatedClasses('div')(`${blockName}-icon-wrapper`);\nconst UploaderInfo = aggregatedClasses('div')(blockNameInfo);\nconst InfoText = aggregatedClasses('span')(blockNameInfo, 'text');\nconst UploaderActions = aggregatedClasses('div')(blockNameInfo, 'actions');\nconst AcceptedTypes = aggregatedClasses('div')(blockNameWrapper, 'accepted-types');\n\nconst DividerVertical = aggregatedClasses('div')('divider', null, ({ vertical }) => ({ vertical }));\n\nconst ActionButton = ({ labelText, ...otherProps }: ActionButtonPropsT): React.ReactElement => (\n <DSButton {...otherProps} buttonType=\"text\" labelText={labelText} />\n);\n\nconst noop = () => null;\n\nconst DSUploader = ({\n containerProps = {},\n label = 'Browse', // todo: i18n\n icon: UploadFileIcon = UploadFile,\n defaultActionLabel = 'LOCAL DRIVE', // todo: i18n\n dragActiveInstructionalText = 'DROP FILES HERE',\n dragActiveIcon: DragActiveIcon = UploadFile,\n altActionLabel = 'DOCUMENTS', // todo: i18n\n acceptedTypesText = 'JPG, JPEG, PNG, PDF',\n disabledDefault = false,\n disabledAlt = false,\n onDefaultHandlerClick = noop,\n onAltHandlerClick = noop,\n actions = { defaultAction: 'LOCAL DRIVE', altAction: 'DOCUMENTS' },\n showAltAction = false,\n defaultActionTooltipText,\n altActionTooltipText,\n ...dropzoneProps\n}: DSUploaderPropsT): JSX.Element => {\n const { getRootProps, getInputProps, isDragActive } = useDropzone(dropzoneProps);\n const { onClick: onOpenFile, ...rootProps } = getRootProps();\n const disabledAll = disabledDefault && disabledAlt;\n\n const delfaultActionButton = (\n <ActionButton\n variant={disabledDefault && BUTTON_VARIANT.DISABLED}\n labelText={actions.defaultAction ? (actions.defaultAction as string) : defaultActionLabel}\n onClick={(...args) => {\n if (!disabledDefault) runAll(onDefaultHandlerClick, onOpenFile)(...args);\n }}\n />\n );\n\n const altActionButton = (\n <ActionButton\n variant={disabledAlt && BUTTON_VARIANT.DISABLED}\n labelText={actions.altAction ? (actions.altAction as string) : altActionLabel}\n onClick={(...args) => {\n if (!disabledAlt) onAltHandlerClick(...args);\n }}\n />\n );\n\n const defaultAction = !defaultActionTooltipText ? (\n delfaultActionButton\n ) : (\n <DSTooltip\n containerProps={{ id: 'default-action-tooltip' }}\n interactionType=\"hover\"\n title={defaultActionTooltipText}\n triggerComponent={delfaultActionButton}\n />\n );\n\n const altAction = !altActionTooltipText ? (\n altActionButton\n ) : (\n <DSTooltip\n containerProps={{ id: 'alt-action-tooltip' }}\n interactionType=\"hover\"\n title={altActionTooltipText}\n triggerComponent={altActionButton}\n />\n );\n\n return (\n <UploaderWrapper {...containerProps} classProps={{ disabled: disabledAll }}>\n <Uploader {...rootProps} classProps={{ isDragActive }}>\n <UploaderIconArea>\n <UploadFileIcon size=\"l\" />\n </UploaderIconArea>\n <DividerVertical />\n <UploaderInfo>\n <InfoText>{label}</InfoText>\n <UploaderActions>\n {actions.defaultAction && defaultAction}\n {(actions.altAction || showAltAction) && (\n <>\n {actions.defaultAction && <DividerVertical />}\n {altAction}\n </>\n )}\n </UploaderActions>\n </UploaderInfo>\n {!disabledAll && (\n <UploaderDragActive>\n <DragActiveIcon />\n {dragActiveInstructionalText}\n </UploaderDragActive>\n )}\n {!disabledAll && <input {...getInputProps()} />}\n </Uploader>\n {typeof acceptedTypesText === 'string' && <AcceptedTypes>{acceptedTypesText.toUpperCase()}</AcceptedTypes>}\n </UploaderWrapper>\n );\n};\n\nDSUploader.actions = {\n defaultAction: 'LOCAL DRIVE',\n altAction: 'DOCUMENTS',\n};\n\nDSUploader.propTypes = propTypes;\nDSUploader.displayName = 'DSUploader';\nconst UploaderWithSchema = describe(DSUploader);\nUploaderWithSchema.propTypes = propTypes;\n\nexport { UploaderWithSchema, DSUploader };\nexport default DSUploader;\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\nimport React, { type ComponentType, useCallback, useMemo } from 'react';\nimport { runAll } from '@elliemae/ds-utilities';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n useGetGlobalAttributes,\n useGetXstyledProps,\n} from '@elliemae/ds-props-helpers';\nimport { DSButtonV2, BUTTON_TYPES } from '@elliemae/ds-button';\nimport { useDropzone } from 'react-dropzone';\nimport DSTooltip from '@elliemae/ds-tooltip';\nimport { defaultProps, type DSUploaderT, type ActionButtonPropsT, propTypes } from './react-desc-prop-types.js';\nimport {\n StyledAcceptedTypes,\n StyledDividerVertical,\n StyledInfoText,\n StyledUploader,\n StyledUploaderDragActive,\n StyledUploaderIconArea,\n StyledUploaderInfo,\n StyledUploaderWrapper,\n StyledUploaderActions,\n StyledDividerVerticalActions,\n} from './styled.js';\nimport { DSUploaderName, defaultActions } from './constants.js';\nconst ActionButton = ({ labelText, ...otherProps }: ActionButtonPropsT): React.ReactElement => (\n <DSButtonV2\n {...otherProps}\n buttonType={BUTTON_TYPES.TEXT}\n style={{ padding: 0, height: 'initial', borderWidth: '0px' }}\n >\n {labelText}\n </DSButtonV2>\n);\n\nconst DSUploader: ComponentType<DSUploaderT.DefaultProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSUploaderT.DefaultProps>(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefault, propTypes, DSUploaderName);\n\n const {\n containerProps,\n label,\n icon: UploadFileIcon,\n defaultActionLabel,\n dragActiveInstructionalText,\n dragActiveIcon: DragActiveIcon,\n altActionLabel,\n acceptedTypesText,\n disabledDefault,\n disabledAlt,\n onDefaultHandlerClick,\n onAltHandlerClick,\n actions,\n showAltAction,\n defaultActionTooltipText,\n altActionTooltipText,\n ...rest\n } = propsWithDefault;\n\n const globalAttributes = useGetGlobalAttributes(rest);\n const xstyledProps = useGetXstyledProps(rest);\n\n const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n const { getRootProps, getInputProps, isDragActive } = useDropzone(rest);\n const { onClick: onOpenFile, ...rootProps } = getRootProps();\n const disabledAll = disabledDefault && disabledAlt;\n\n const delfaultActionButton = useMemo(\n () => (\n <ActionButton\n disabled={disabledDefault}\n labelText={actions.defaultAction ? (actions.defaultAction as string) : defaultActionLabel}\n onClick={(...args) => {\n if (!disabledDefault) runAll(onDefaultHandlerClick, onOpenFile)(...args);\n }}\n />\n ),\n [actions.defaultAction, defaultActionLabel, disabledDefault, onDefaultHandlerClick, onOpenFile],\n );\n\n const altActionButton = useMemo(\n () => (\n <ActionButton\n disabled={disabledAlt}\n labelText={actions.altAction ? (actions.altAction as string) : altActionLabel}\n onClick={(...args) => {\n if (!disabledAlt) onAltHandlerClick(...args);\n }}\n />\n ),\n [actions.altAction, altActionLabel, disabledAlt, onAltHandlerClick],\n );\n\n const defaultAction = useMemo(\n () =>\n !defaultActionTooltipText ? (\n delfaultActionButton\n ) : (\n <DSTooltip\n containerProps={{ id: 'default-action-tooltip' }}\n interactionType=\"hover\"\n title={defaultActionTooltipText}\n triggerComponent={delfaultActionButton}\n />\n ),\n [defaultActionTooltipText, delfaultActionButton],\n );\n\n const altAction = useMemo(\n () =>\n !altActionTooltipText ? (\n altActionButton\n ) : (\n <DSTooltip\n containerProps={{ id: 'alt-action-tooltip' }}\n interactionType=\"hover\"\n title={altActionTooltipText}\n triggerComponent={altActionButton}\n />\n ),\n [altActionTooltipText, altActionButton],\n );\n\n return (\n <StyledUploaderWrapper\n {...containerProps}\n {...globalAttributes}\n {...xstyledProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledUploader\n {...rootProps}\n isDragActive={isDragActive}\n disabledAll={disabledAll}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledUploaderIconArea getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <UploadFileIcon size=\"l\" />\n </StyledUploaderIconArea>\n <StyledDividerVertical getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n <StyledUploaderInfo getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <StyledInfoText getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {label}\n </StyledInfoText>\n <StyledUploaderActions getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {actions.defaultAction && defaultAction}\n {(actions.altAction || showAltAction) && (\n <>\n {actions.defaultAction && (\n <StyledDividerVerticalActions\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n )}\n {altAction}\n </>\n )}\n </StyledUploaderActions>\n </StyledUploaderInfo>\n {!disabledAll && (\n <StyledUploaderDragActive getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <DragActiveIcon color={['neutral', '000']} mr=\"xxs\" />\n {dragActiveInstructionalText}\n </StyledUploaderDragActive>\n )}\n {!disabledAll && <input {...getInputProps()} aria-label=\"file\" />}\n </StyledUploader>\n {typeof acceptedTypesText === 'string' && (\n <StyledAcceptedTypes getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {acceptedTypesText.toUpperCase()}\n </StyledAcceptedTypes>\n )}\n </StyledUploaderWrapper>\n );\n};\n\nDSUploader.actions = defaultActions;\nDSUploader.propTypes = propTypes;\nDSUploader.displayName = DSUploaderName;\nconst UploaderWithSchema = describe(DSUploader);\nUploaderWithSchema.propTypes = propTypes;\n\nexport { UploaderWithSchema, DSUploader };\nexport default DSUploader;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -0,0 +1,27 @@
1
+ import * as React from "react";
2
+ import { slotObjectToDataTestIds } from "@elliemae/ds-system";
3
+ const DSUploaderName = "DSUploader";
4
+ const DSUploaderSlots = {
5
+ ROOT: "root",
6
+ UPLOADER: "uploader",
7
+ ICON_AREA: "icon-area",
8
+ DIVIDER_VERTICAL: "divider-vertical",
9
+ ACTIONS_DIVIDER_VERTICAL: "actions-divider-vertical",
10
+ UPLOADER_INFO: "uploader-info",
11
+ INFO_TEXT: "info-text",
12
+ UPLOADER_DRAG_ACTIVE: "uploader-drag-active",
13
+ ACCEPTED_TYPES: "accepted-types",
14
+ UPLOADER_ACTIONS: "uploader-actions"
15
+ };
16
+ const defaultActions = {
17
+ defaultAction: "LOCAL DRIVE",
18
+ altAction: "DOCUMENTS"
19
+ };
20
+ const DSUploaderDataTestIds = slotObjectToDataTestIds(DSUploaderName, DSUploaderSlots);
21
+ export {
22
+ DSUploaderDataTestIds,
23
+ DSUploaderName,
24
+ DSUploaderSlots,
25
+ defaultActions
26
+ };
27
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/constants.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSUploaderName = 'DSUploader';\n\nexport const DSUploaderSlots = {\n ROOT: 'root',\n UPLOADER: 'uploader',\n ICON_AREA: 'icon-area',\n DIVIDER_VERTICAL: 'divider-vertical',\n ACTIONS_DIVIDER_VERTICAL: 'actions-divider-vertical',\n UPLOADER_INFO: 'uploader-info',\n INFO_TEXT: 'info-text',\n UPLOADER_DRAG_ACTIVE: 'uploader-drag-active',\n ACCEPTED_TYPES: 'accepted-types',\n UPLOADER_ACTIONS: 'uploader-actions',\n};\n\nexport const defaultActions = {\n defaultAction: 'LOCAL DRIVE',\n altAction: 'DOCUMENTS',\n} as const;\n\nexport const DSUploaderDataTestIds = slotObjectToDataTestIds(DSUploaderName, DSUploaderSlots);\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,UAAU;AAAA,EACV,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB,0BAA0B;AAAA,EAC1B,eAAe;AAAA,EACf,WAAW;AAAA,EACX,sBAAsB;AAAA,EACtB,gBAAgB;AAAA,EAChB,kBAAkB;AACpB;AAEO,MAAM,iBAAiB;AAAA,EAC5B,eAAe;AAAA,EACf,WAAW;AACb;AAEO,MAAM,wBAAwB,wBAAwB,gBAAgB,eAAe;",
6
+ "names": []
7
+ }
package/dist/esm/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { default as default2, DSUploader, UploaderWithSchema } from "./DSUploader.js";
3
+ export * from "./constants.js";
3
4
  export {
4
5
  DSUploader,
5
6
  UploaderWithSchema,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, DSUploader, UploaderWithSchema } from './DSUploader.js';\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAAA,UAAS,YAAY,0BAA0B;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, DSUploader, UploaderWithSchema } from './DSUploader.js';\nexport * from './constants.js';\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAAA,UAAS,YAAY,0BAA0B;AACxD,cAAc;",
6
6
  "names": ["default"]
7
7
  }