@salt-ds/lab 1.0.0-alpha.28 → 1.0.0-alpha.29
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.
- package/css/salt-lab.css +33 -110
- package/dist-cjs/color-chooser/ColorChooser.css.js +1 -1
- package/dist-cjs/color-chooser/ColorChooser.js +52 -55
- package/dist-cjs/color-chooser/ColorChooser.js.map +1 -1
- package/dist-cjs/index.js +4 -8
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/overlay/Overlay.css.js +1 -1
- package/dist-cjs/overlay/Overlay.js +89 -60
- package/dist-cjs/overlay/Overlay.js.map +1 -1
- package/dist-cjs/overlay/OverlayContext.js +43 -0
- package/dist-cjs/overlay/OverlayContext.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanel.js +64 -0
- package/dist-cjs/overlay/OverlayPanel.js.map +1 -0
- package/dist-cjs/overlay/OverlayPanelBase.js +65 -0
- package/dist-cjs/overlay/OverlayPanelBase.js.map +1 -0
- package/dist-cjs/overlay/OverlayTrigger.js +40 -0
- package/dist-cjs/overlay/OverlayTrigger.js.map +1 -0
- package/dist-es/color-chooser/ColorChooser.css.js +1 -1
- package/dist-es/color-chooser/ColorChooser.js +53 -56
- package/dist-es/color-chooser/ColorChooser.js.map +1 -1
- package/dist-es/index.js +2 -4
- package/dist-es/index.js.map +1 -1
- package/dist-es/overlay/Overlay.css.js +1 -1
- package/dist-es/overlay/Overlay.js +91 -62
- package/dist-es/overlay/Overlay.js.map +1 -1
- package/dist-es/overlay/OverlayContext.js +38 -0
- package/dist-es/overlay/OverlayContext.js.map +1 -0
- package/dist-es/overlay/OverlayPanel.js +60 -0
- package/dist-es/overlay/OverlayPanel.js.map +1 -0
- package/dist-es/overlay/OverlayPanelBase.js +57 -0
- package/dist-es/overlay/OverlayPanelBase.js.map +1 -0
- package/dist-es/overlay/OverlayTrigger.js +36 -0
- package/dist-es/overlay/OverlayTrigger.js.map +1 -0
- package/dist-types/index.d.ts +0 -1
- package/dist-types/overlay/Overlay.d.ts +6 -14
- package/dist-types/overlay/OverlayContext.d.ts +26 -0
- package/dist-types/overlay/OverlayPanel.d.ts +4 -0
- package/dist-types/overlay/OverlayPanelBase.d.ts +2 -0
- package/dist-types/overlay/OverlayTrigger.d.ts +5 -0
- package/dist-types/overlay/index.d.ts +2 -1
- package/package.json +2 -2
- package/dist-cjs/file-drop-zone/FileDropZone.css.js +0 -6
- package/dist-cjs/file-drop-zone/FileDropZone.css.js.map +0 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js +0 -94
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +0 -1
- package/dist-cjs/file-drop-zone/FileDropZoneIcon.js +0 -25
- package/dist-cjs/file-drop-zone/FileDropZoneIcon.js.map +0 -1
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +0 -52
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +0 -1
- package/dist-cjs/file-drop-zone/internal/utils.js +0 -30
- package/dist-cjs/file-drop-zone/internal/utils.js.map +0 -1
- package/dist-cjs/overlay/useOverlay.js +0 -97
- package/dist-cjs/overlay/useOverlay.js.map +0 -1
- package/dist-es/file-drop-zone/FileDropZone.css.js +0 -4
- package/dist-es/file-drop-zone/FileDropZone.css.js.map +0 -1
- package/dist-es/file-drop-zone/FileDropZone.js +0 -90
- package/dist-es/file-drop-zone/FileDropZone.js.map +0 -1
- package/dist-es/file-drop-zone/FileDropZoneIcon.js +0 -21
- package/dist-es/file-drop-zone/FileDropZoneIcon.js.map +0 -1
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +0 -48
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +0 -1
- package/dist-es/file-drop-zone/internal/utils.js +0 -25
- package/dist-es/file-drop-zone/internal/utils.js.map +0 -1
- package/dist-es/overlay/useOverlay.js +0 -93
- package/dist-es/overlay/useOverlay.js.map +0 -1
- package/dist-types/file-drop-zone/FileDropZone.d.ts +0 -17
- package/dist-types/file-drop-zone/FileDropZoneIcon.d.ts +0 -9
- package/dist-types/file-drop-zone/FileDropZoneTrigger.d.ts +0 -22
- package/dist-types/file-drop-zone/index.d.ts +0 -3
- package/dist-types/file-drop-zone/internal/utils.d.ts +0 -3
- package/dist-types/overlay/useOverlay.d.ts +0 -8
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, ValidationStatus } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n DragEventHandler,\n forwardRef,\n DragEvent,\n useRef,\n useState,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { containsFiles, extractFiles } from \"./internal/utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport fileDropZoneCss from \"./FileDropZone.css\";\n\nexport interface FileDropZoneProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onDrop\"> {\n /**\n * If `true`, the file drop zone will be disabled.\n */\n disabled?: boolean;\n /**\n * Status indicator to be displayed.\n */\n status?: Omit<ValidationStatus, \"info\" | \"warning\">;\n /**\n * Callback for on drop event\n */\n onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n function FileDropZone(\n {\n status,\n className,\n children,\n disabled,\n onDragOver,\n onDragLeave,\n onDrop,\n ...restProps\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-file-drop-zone\",\n css: fileDropZoneCss,\n window: targetWindow,\n });\n const [isActive, setActive] = useState(false);\n\n const regionRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, regionRef);\n\n const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n // Need to cancel the default events to allow drop\n // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n\n event.preventDefault();\n event.stopPropagation();\n\n if (disabled) {\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"none\";\n }\n return;\n }\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"copy\";\n }\n if (!isActive && containsFiles(event)) {\n setActive(true);\n }\n onDragOver?.(event);\n };\n\n const handleDragLeave: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n const region = regionRef?.current;\n const eventTarget = event.relatedTarget;\n if (eventTarget !== region && !region?.contains(eventTarget as Node)) {\n setActive(false);\n }\n onDragLeave?.(event);\n };\n\n const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n event.preventDefault();\n const files = extractFiles(event);\n setActive(false);\n onDrop?.(event, files);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(status as string)]: status,\n [withBaseName(\"active\")]: isActive,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n aria-disabled={disabled}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n ref={handleRef}\n {...restProps}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","FileDropZone","useWindow","useComponentCssInjection","fileDropZoneCss","useState","useRef","useForkRef","containsFiles","extractFiles","jsx","clsx"],"mappings":"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"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
var React = require('react');
|
|
8
|
-
var icons = require('@salt-ds/icons');
|
|
9
|
-
|
|
10
|
-
const FileDropZoneIcon = React.forwardRef(function FileDropZoneIcon2({ status, size = 2, ...rest }, ref) {
|
|
11
|
-
const iconProps = {
|
|
12
|
-
ref,
|
|
13
|
-
size,
|
|
14
|
-
...rest
|
|
15
|
-
};
|
|
16
|
-
return status ? /* @__PURE__ */ jsxRuntime.jsx(core.StatusIndicator, {
|
|
17
|
-
status,
|
|
18
|
-
...iconProps
|
|
19
|
-
}) : /* @__PURE__ */ jsxRuntime.jsx(icons.UploadIcon, {
|
|
20
|
-
...iconProps
|
|
21
|
-
});
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
exports.FileDropZoneIcon = FileDropZoneIcon;
|
|
25
|
-
//# sourceMappingURL=FileDropZoneIcon.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZoneIcon.js","sources":["../src/file-drop-zone/FileDropZoneIcon.tsx"],"sourcesContent":["import { StatusIndicator, ValidationStatus } from \"@salt-ds/core\";\nimport { forwardRef } from \"react\";\nimport { IconProps, UploadIcon } from \"@salt-ds/icons\";\n\nexport interface FileDropZoneIconProps extends IconProps {\n /**\n * Status indicator to be displayed.\n */\n status?: ValidationStatus;\n}\n\nexport const FileDropZoneIcon = forwardRef<\n SVGSVGElement,\n FileDropZoneIconProps\n>(function FileDropZoneIcon({ status, size = 2, ...rest }, ref) {\n const iconProps = {\n ref,\n size,\n ...rest,\n };\n return status ? (\n <StatusIndicator status={status} {...iconProps} />\n ) : (\n <UploadIcon {...iconProps} />\n );\n});\n"],"names":["forwardRef","FileDropZoneIcon","jsx","StatusIndicator","UploadIcon"],"mappings":";;;;;;;;;AAWa,MAAA,gBAAA,GAAmBA,gBAG9B,CAAA,SAASC,iBAAiB,CAAA,EAAE,QAAQ,IAAO,GAAA,CAAA,EAAA,GAAM,IAAK,EAAA,EAAG,GAAK,EAAA;AAC9D,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,GAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACA,EAAA,OAAO,yBACJC,cAAA,CAAAC,oBAAA,EAAA;AAAA,IAAgB,MAAA;AAAA,IAAiB,GAAG,SAAA;AAAA,GAAW,oBAE/CD,cAAA,CAAAE,gBAAA,EAAA;AAAA,IAAY,GAAG,SAAA;AAAA,GAAW,CAAA,CAAA;AAE/B,CAAC;;;;"}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
var React = require('react');
|
|
8
|
-
|
|
9
|
-
const FileDropZoneTrigger = React.forwardRef(function FileDropZoneTrigger2({ accept, children, disabled, multiple = false, onChange, ...rest }, ref) {
|
|
10
|
-
const buttonRef = React.useRef(null);
|
|
11
|
-
const fileInputRef = React.useRef(null);
|
|
12
|
-
const triggerRef = core.useForkRef(ref, buttonRef);
|
|
13
|
-
const handleFocus = (event) => {
|
|
14
|
-
var _a;
|
|
15
|
-
event.stopPropagation();
|
|
16
|
-
(_a = buttonRef.current) == null ? void 0 : _a.focus();
|
|
17
|
-
};
|
|
18
|
-
const handleClick = (event) => {
|
|
19
|
-
var _a;
|
|
20
|
-
event.stopPropagation();
|
|
21
|
-
(_a = fileInputRef.current) == null ? void 0 : _a.click();
|
|
22
|
-
};
|
|
23
|
-
const handleChange = (event) => {
|
|
24
|
-
var _a;
|
|
25
|
-
const files = Array.from((_a = event.target.files) != null ? _a : []);
|
|
26
|
-
onChange == null ? void 0 : onChange(event, files);
|
|
27
|
-
};
|
|
28
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
29
|
-
children: [
|
|
30
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.Button, {
|
|
31
|
-
onClick: handleClick,
|
|
32
|
-
disabled,
|
|
33
|
-
ref: triggerRef,
|
|
34
|
-
...rest,
|
|
35
|
-
children: children != null ? children : "Browse files"
|
|
36
|
-
}),
|
|
37
|
-
/* @__PURE__ */ jsxRuntime.jsx("input", {
|
|
38
|
-
accept,
|
|
39
|
-
className: "input-hidden",
|
|
40
|
-
disabled,
|
|
41
|
-
multiple,
|
|
42
|
-
onChange: handleChange,
|
|
43
|
-
onFocus: handleFocus,
|
|
44
|
-
ref: fileInputRef,
|
|
45
|
-
type: "file"
|
|
46
|
-
})
|
|
47
|
-
]
|
|
48
|
-
});
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
exports.FileDropZoneTrigger = FileDropZoneTrigger;
|
|
52
|
-
//# sourceMappingURL=FileDropZoneTrigger.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZoneTrigger.js","sources":["../src/file-drop-zone/FileDropZoneTrigger.tsx"],"sourcesContent":["import { Button, useForkRef } from \"@salt-ds/core\";\nimport {\n FocusEvent,\n forwardRef,\n HTMLAttributes,\n SyntheticEvent,\n useRef,\n} from \"react\";\n\nexport interface FileDropZoneTriggerProps\n extends Omit<HTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n /**\n * `accept` attribute for HTML <input>.\n *\n * A comma separated list of file types the user can pick from the file input dialog box.\n */\n accept?: string;\n /**\n * Disable all trigger elements.\n */\n disabled?: boolean;\n /**\n * Allows multiple files to be uploaded.\n */\n multiple?: boolean;\n /**\n * Callback for input change event\n */\n onChange?: (event: SyntheticEvent<HTMLInputElement>, files: File[]) => void;\n}\n\nexport const FileDropZoneTrigger = forwardRef<\n HTMLButtonElement,\n FileDropZoneTriggerProps\n>(function FileDropZoneTrigger(\n { accept, children, disabled, multiple = false, onChange, ...rest },\n ref\n) {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const triggerRef = useForkRef(ref, buttonRef);\n\n // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n // move focus back on the button element so that all labels can be announced correctly\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n buttonRef.current?.focus();\n };\n\n const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n fileInputRef.current?.click();\n };\n\n const handleChange = (event: SyntheticEvent<HTMLInputElement>) => {\n const files = Array.from((event.target as HTMLInputElement).files ?? []);\n onChange?.(event, files);\n };\n return (\n <>\n <Button\n onClick={handleClick}\n disabled={disabled}\n ref={triggerRef}\n {...rest}\n >\n {children ?? \"Browse files\"}\n </Button>\n <input\n accept={accept}\n className=\"input-hidden\"\n disabled={disabled}\n multiple={multiple}\n onChange={handleChange}\n onFocus={handleFocus}\n ref={fileInputRef}\n type=\"file\"\n />\n </>\n );\n});\n"],"names":["forwardRef","FileDropZoneTrigger","useRef","useForkRef","jsxs","Fragment","jsx","Button"],"mappings":";;;;;;;;AA+BO,MAAM,mBAAsB,GAAAA,gBAAA,CAGjC,SAASC,oBAAAA,CACT,EAAE,MAAA,EAAQ,QAAU,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA,EAAO,QAAa,EAAA,GAAA,IAAA,IAC7D,GACA,EAAA;AACA,EAAM,MAAA,SAAA,GAAYC,aAA0B,IAAI,CAAA,CAAA;AAChD,EAAM,MAAA,YAAA,GAAeA,aAAyB,IAAI,CAAA,CAAA;AAClD,EAAM,MAAA,UAAA,GAAaC,eAAW,CAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AAI5C,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AA5C/D,IAAA,IAAA,EAAA,CAAA;AA6CI,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,SAAA,CAAU,YAAV,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAA6C,KAAA;AAjDpE,IAAA,IAAA,EAAA,CAAA;AAkDI,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,YAAA,CAAa,YAAb,IAAsB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,GACxB,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAA4C,KAAA;AAtDpE,IAAA,IAAA,EAAA,CAAA;AAuDI,IAAM,MAAA,KAAA,GAAQ,MAAM,IAAM,CAAA,CAAA,EAAA,GAAA,KAAA,CAAM,OAA4B,KAAlC,KAAA,IAAA,GAAA,EAAA,GAA2C,EAAE,CAAA,CAAA;AACvE,IAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,KAAA,CAAA,CAAA;AAAA,GACpB,CAAA;AACA,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,WAAA,EAAA;AAAA,QACC,OAAS,EAAA,WAAA;AAAA,QACT,QAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH,QAAY,EAAA,QAAA,IAAA,IAAA,GAAA,QAAA,GAAA,cAAA;AAAA,OACf,CAAA;AAAA,sBACCD,cAAA,CAAA,OAAA,EAAA;AAAA,QACC,MAAA;AAAA,QACA,SAAU,EAAA,cAAA;AAAA,QACV,QAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,OAAS,EAAA,WAAA;AAAA,QACT,GAAK,EAAA,YAAA;AAAA,QACL,IAAK,EAAA,MAAA;AAAA,OACP,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const containsFiles = (e) => {
|
|
6
|
-
if (!e.dataTransfer) {
|
|
7
|
-
const target = e.target;
|
|
8
|
-
return target == null ? void 0 : target.files;
|
|
9
|
-
}
|
|
10
|
-
return Array.prototype.some.call(
|
|
11
|
-
e.dataTransfer.types,
|
|
12
|
-
(type) => type === "Files"
|
|
13
|
-
);
|
|
14
|
-
};
|
|
15
|
-
const extractFiles = (e) => {
|
|
16
|
-
var _a;
|
|
17
|
-
if (containsFiles(e)) {
|
|
18
|
-
if (e.dataTransfer) {
|
|
19
|
-
return Array.from(e.dataTransfer.files);
|
|
20
|
-
}
|
|
21
|
-
if (e.target) {
|
|
22
|
-
return Array.from((_a = e.target.files) != null ? _a : []);
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
return [];
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
exports.containsFiles = containsFiles;
|
|
29
|
-
exports.extractFiles = extractFiles;
|
|
30
|
-
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/file-drop-zone/internal/utils.ts"],"sourcesContent":["import { DragEvent } from \"react\";\n\nexport const containsFiles = (e: DragEvent) => {\n if (!e.dataTransfer) {\n const target = e.target as HTMLInputElement;\n return target?.files;\n }\n\n return Array.prototype.some.call(\n e.dataTransfer.types,\n (type) => type === \"Files\"\n );\n};\n\nexport const extractFiles = (e: DragEvent): File[] => {\n if (containsFiles(e)) {\n if (e.dataTransfer) {\n return Array.from(e.dataTransfer.files);\n }\n\n if (e.target) {\n return Array.from((e.target as HTMLInputElement).files ?? []);\n }\n }\n\n return [];\n};\n"],"names":[],"mappings":";;;;AAEa,MAAA,aAAA,GAAgB,CAAC,CAAiB,KAAA;AAC7C,EAAI,IAAA,CAAC,EAAE,YAAc,EAAA;AACnB,IAAA,MAAM,SAAS,CAAE,CAAA,MAAA,CAAA;AACjB,IAAA,OAAO,MAAQ,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACjB;AAEA,EAAO,OAAA,KAAA,CAAM,UAAU,IAAK,CAAA,IAAA;AAAA,IAC1B,EAAE,YAAa,CAAA,KAAA;AAAA,IACf,CAAC,SAAS,IAAS,KAAA,OAAA;AAAA,GACrB,CAAA;AACF,EAAA;AAEa,MAAA,YAAA,GAAe,CAAC,CAAyB,KAAA;AAdtD,EAAA,IAAA,EAAA,CAAA;AAeE,EAAI,IAAA,aAAA,CAAc,CAAC,CAAG,EAAA;AACpB,IAAA,IAAI,EAAE,YAAc,EAAA;AAClB,MAAA,OAAO,KAAM,CAAA,IAAA,CAAK,CAAE,CAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,KACxC;AAEA,IAAA,IAAI,EAAE,MAAQ,EAAA;AACZ,MAAA,OAAO,MAAM,IAAM,CAAA,CAAA,EAAA,GAAA,CAAA,CAAE,OAA4B,KAA9B,KAAA,IAAA,GAAA,EAAA,GAAuC,EAAE,CAAA,CAAA;AAAA,KAC9D;AAAA,GACF;AAEA,EAAA,OAAO,EAAC,CAAA;AACV;;;;;"}
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var react = require('@floating-ui/react');
|
|
6
|
-
var core = require('@salt-ds/core');
|
|
7
|
-
var React = require('react');
|
|
8
|
-
var WindowContext = require('../window/WindowContext.js');
|
|
9
|
-
require('../window/ElectronWindow.js');
|
|
10
|
-
|
|
11
|
-
function useOverlay(props) {
|
|
12
|
-
const { open: openProp, placement = "right", onOpenChange } = props;
|
|
13
|
-
const arrowRef = React.useRef(null);
|
|
14
|
-
const [open, setOpen] = core.useControlled({
|
|
15
|
-
controlled: openProp,
|
|
16
|
-
default: false,
|
|
17
|
-
name: "Overlay",
|
|
18
|
-
state: "open"
|
|
19
|
-
});
|
|
20
|
-
const handleOpenChange = (newOpen) => {
|
|
21
|
-
setOpen(newOpen);
|
|
22
|
-
onOpenChange == null ? void 0 : onOpenChange(newOpen);
|
|
23
|
-
};
|
|
24
|
-
const middleware = WindowContext.isDesktop ? [core.margin(24), react.arrow({ element: arrowRef })] : [
|
|
25
|
-
react.offset(24),
|
|
26
|
-
react.flip(),
|
|
27
|
-
react.shift({ limiter: react.limitShift() }),
|
|
28
|
-
react.arrow({ element: arrowRef })
|
|
29
|
-
];
|
|
30
|
-
const {
|
|
31
|
-
reference,
|
|
32
|
-
floating,
|
|
33
|
-
x,
|
|
34
|
-
y,
|
|
35
|
-
strategy,
|
|
36
|
-
context,
|
|
37
|
-
middlewareData,
|
|
38
|
-
update
|
|
39
|
-
} = core.useFloatingUI({
|
|
40
|
-
open,
|
|
41
|
-
onOpenChange: handleOpenChange,
|
|
42
|
-
placement,
|
|
43
|
-
middleware
|
|
44
|
-
});
|
|
45
|
-
const handleArrowRef = React.useCallback(
|
|
46
|
-
(node) => {
|
|
47
|
-
arrowRef.current = node;
|
|
48
|
-
update();
|
|
49
|
-
},
|
|
50
|
-
[update]
|
|
51
|
-
);
|
|
52
|
-
const { getFloatingProps, getReferenceProps } = react.useInteractions([
|
|
53
|
-
react.useDismiss(context),
|
|
54
|
-
react.useRole(context, { role: "dialog" }),
|
|
55
|
-
react.useClick(context)
|
|
56
|
-
]);
|
|
57
|
-
const getTriggerProps = (userProps) => {
|
|
58
|
-
return getReferenceProps({
|
|
59
|
-
...userProps,
|
|
60
|
-
ref: reference
|
|
61
|
-
});
|
|
62
|
-
};
|
|
63
|
-
const getOverlayProps = (userProps) => {
|
|
64
|
-
var _a, _b, _c, _d;
|
|
65
|
-
const arrowProps = {
|
|
66
|
-
ref: handleArrowRef,
|
|
67
|
-
style: {
|
|
68
|
-
position: strategy,
|
|
69
|
-
left: (_b = (_a = middlewareData.arrow) == null ? void 0 : _a.x) != null ? _b : 0,
|
|
70
|
-
top: (_d = (_c = middlewareData.arrow) == null ? void 0 : _c.y) != null ? _d : 0
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
return {
|
|
74
|
-
arrowProps,
|
|
75
|
-
open,
|
|
76
|
-
onOpenChange: handleOpenChange,
|
|
77
|
-
...getFloatingProps({
|
|
78
|
-
"data-placement": placement,
|
|
79
|
-
...userProps,
|
|
80
|
-
style: {
|
|
81
|
-
top: y != null ? y : 0,
|
|
82
|
-
left: x != null ? x : 0,
|
|
83
|
-
position: strategy,
|
|
84
|
-
...(userProps == null ? void 0 : userProps.style) || {}
|
|
85
|
-
},
|
|
86
|
-
ref: floating
|
|
87
|
-
})
|
|
88
|
-
};
|
|
89
|
-
};
|
|
90
|
-
return {
|
|
91
|
-
getTriggerProps,
|
|
92
|
-
getOverlayProps
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
exports.useOverlay = useOverlay;
|
|
97
|
-
//# sourceMappingURL=useOverlay.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useOverlay.js","sources":["../src/overlay/useOverlay.ts"],"sourcesContent":["import {\n arrow,\n flip,\n limitShift,\n offset,\n shift,\n useClick,\n useDismiss,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport {\n margin,\n useControlled,\n useFloatingUI,\n UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport {\n ComponentPropsWithoutRef,\n ComponentPropsWithRef,\n JSXElementConstructor,\n useCallback,\n useRef,\n} from \"react\";\nimport { OverlayProps } from \"./Overlay\";\nimport { isDesktop } from \"../window\";\n\nexport type UseOverlayProps = Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n>;\n\nexport function useOverlay(props: UseOverlayProps) {\n const { open: openProp, placement = \"right\", onOpenChange } = props;\n\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Overlay\",\n state: \"open\",\n });\n const handleOpenChange = (newOpen: boolean) => {\n setOpen(newOpen);\n onOpenChange?.(newOpen);\n };\n const middleware = isDesktop\n ? [margin(24), arrow({ element: arrowRef })]\n : [\n offset(24),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ];\n const {\n reference,\n floating,\n x,\n y,\n strategy,\n context,\n middlewareData,\n update,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement,\n middleware,\n });\n\n const handleArrowRef = useCallback(\n (node: HTMLDivElement) => {\n arrowRef.current = node;\n update();\n },\n [update]\n );\n\n const { getFloatingProps, getReferenceProps } = useInteractions([\n useDismiss(context),\n useRole(context, { role: \"dialog\" }),\n useClick(context),\n ]);\n\n const getTriggerProps = <\n Element extends\n | keyof JSX.IntrinsicElements\n | JSXElementConstructor<any> = \"div\"\n >(\n userProps?: ComponentPropsWithoutRef<Element>\n ) => {\n return getReferenceProps({\n ...userProps,\n ref: reference,\n }) as ComponentPropsWithRef<Element>;\n };\n\n const getOverlayProps = (userProps?: OverlayProps) => {\n const arrowProps = {\n ref: handleArrowRef,\n style: {\n position: strategy,\n left: middlewareData.arrow?.x ?? 0,\n top: middlewareData.arrow?.y ?? 0,\n },\n };\n\n return {\n arrowProps,\n open,\n onOpenChange: handleOpenChange,\n ...getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ...userProps,\n style: {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n ...(userProps?.style || {}),\n },\n ref: floating,\n }),\n } as OverlayProps;\n };\n\n return {\n getTriggerProps,\n getOverlayProps,\n };\n}\n"],"names":["useRef","useControlled","isDesktop","margin","arrow","offset","flip","shift","limitShift","useFloatingUI","useCallback","useInteractions","useDismiss","useRole","useClick"],"mappings":"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"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var css_248z = ".saltFileDropZone {\n color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));\n display: inline-flex;\n background: var(--saltFileDropZone-background, var(--salt-container-primary-background));\n text-align: center;\n align-items: center;\n justify-content: center;\n border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));\n flex-direction: column;\n padding: var(--salt-spacing-200);\n gap: var(--salt-spacing-200);\n width: 100%;\n font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));\n}\n\n.saltFileDropZone-active {\n background: var(--salt-target-background-hover);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);\n}\n\n/* Styles applied if `status=\"error\" */\n.saltFileDropZone-error {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);\n}\n\n/* Styles applied if `status=\"success\" */\n.saltFileDropZone-success {\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);\n}\n\n.saltFileDropZone .input-hidden {\n display: none;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n background: var(--salt-container-primary-background-disabled);\n border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);\n cursor: var(--salt-target-cursor-disabled);\n color: var(--salt-content-primary-foreground-disabled);\n}\n";
|
|
2
|
-
|
|
3
|
-
export { css_248z as default };
|
|
4
|
-
//# sourceMappingURL=FileDropZone.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZone.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makePrefixer, useForkRef } from '@salt-ds/core';
|
|
3
|
-
import { clsx } from 'clsx';
|
|
4
|
-
import { forwardRef, useState, useRef } from 'react';
|
|
5
|
-
import { containsFiles, extractFiles } from './internal/utils.js';
|
|
6
|
-
import { useWindow } from '@salt-ds/window';
|
|
7
|
-
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
8
|
-
import css_248z from './FileDropZone.css.js';
|
|
9
|
-
|
|
10
|
-
const withBaseName = makePrefixer("saltFileDropZone");
|
|
11
|
-
const FileDropZone = forwardRef(
|
|
12
|
-
function FileDropZone2({
|
|
13
|
-
status,
|
|
14
|
-
className,
|
|
15
|
-
children,
|
|
16
|
-
disabled,
|
|
17
|
-
onDragOver,
|
|
18
|
-
onDragLeave,
|
|
19
|
-
onDrop,
|
|
20
|
-
...restProps
|
|
21
|
-
}, ref) {
|
|
22
|
-
const targetWindow = useWindow();
|
|
23
|
-
useComponentCssInjection({
|
|
24
|
-
testId: "salt-file-drop-zone",
|
|
25
|
-
css: css_248z,
|
|
26
|
-
window: targetWindow
|
|
27
|
-
});
|
|
28
|
-
const [isActive, setActive] = useState(false);
|
|
29
|
-
const regionRef = useRef(null);
|
|
30
|
-
const handleRef = useForkRef(ref, regionRef);
|
|
31
|
-
const handleDragOver = (event) => {
|
|
32
|
-
event.preventDefault();
|
|
33
|
-
event.stopPropagation();
|
|
34
|
-
if (disabled) {
|
|
35
|
-
if (event.dataTransfer) {
|
|
36
|
-
event.dataTransfer.dropEffect = "none";
|
|
37
|
-
}
|
|
38
|
-
return;
|
|
39
|
-
}
|
|
40
|
-
if (event.dataTransfer) {
|
|
41
|
-
event.dataTransfer.dropEffect = "copy";
|
|
42
|
-
}
|
|
43
|
-
if (!isActive && containsFiles(event)) {
|
|
44
|
-
setActive(true);
|
|
45
|
-
}
|
|
46
|
-
onDragOver == null ? void 0 : onDragOver(event);
|
|
47
|
-
};
|
|
48
|
-
const handleDragLeave = (event) => {
|
|
49
|
-
if (disabled) {
|
|
50
|
-
return;
|
|
51
|
-
}
|
|
52
|
-
const region = regionRef == null ? void 0 : regionRef.current;
|
|
53
|
-
const eventTarget = event.relatedTarget;
|
|
54
|
-
if (eventTarget !== region && !(region == null ? void 0 : region.contains(eventTarget))) {
|
|
55
|
-
setActive(false);
|
|
56
|
-
}
|
|
57
|
-
onDragLeave == null ? void 0 : onDragLeave(event);
|
|
58
|
-
};
|
|
59
|
-
const handleDrop = (event) => {
|
|
60
|
-
if (disabled) {
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
event.preventDefault();
|
|
64
|
-
const files = extractFiles(event);
|
|
65
|
-
setActive(false);
|
|
66
|
-
onDrop == null ? void 0 : onDrop(event, files);
|
|
67
|
-
};
|
|
68
|
-
return /* @__PURE__ */ jsx("div", {
|
|
69
|
-
className: clsx(
|
|
70
|
-
withBaseName(),
|
|
71
|
-
{
|
|
72
|
-
[withBaseName(status)]: status,
|
|
73
|
-
[withBaseName("active")]: isActive,
|
|
74
|
-
[withBaseName("disabled")]: disabled
|
|
75
|
-
},
|
|
76
|
-
className
|
|
77
|
-
),
|
|
78
|
-
"aria-disabled": disabled,
|
|
79
|
-
onDragLeave: handleDragLeave,
|
|
80
|
-
onDragOver: handleDragOver,
|
|
81
|
-
onDrop: handleDrop,
|
|
82
|
-
ref: handleRef,
|
|
83
|
-
...restProps,
|
|
84
|
-
children
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
);
|
|
88
|
-
|
|
89
|
-
export { FileDropZone };
|
|
90
|
-
//# sourceMappingURL=FileDropZone.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, ValidationStatus } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n DragEventHandler,\n forwardRef,\n DragEvent,\n useRef,\n useState,\n ComponentPropsWithoutRef,\n} from \"react\";\nimport { containsFiles, extractFiles } from \"./internal/utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport fileDropZoneCss from \"./FileDropZone.css\";\n\nexport interface FileDropZoneProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onDrop\"> {\n /**\n * If `true`, the file drop zone will be disabled.\n */\n disabled?: boolean;\n /**\n * Status indicator to be displayed.\n */\n status?: Omit<ValidationStatus, \"info\" | \"warning\">;\n /**\n * Callback for on drop event\n */\n onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n function FileDropZone(\n {\n status,\n className,\n children,\n disabled,\n onDragOver,\n onDragLeave,\n onDrop,\n ...restProps\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-file-drop-zone\",\n css: fileDropZoneCss,\n window: targetWindow,\n });\n const [isActive, setActive] = useState(false);\n\n const regionRef = useRef<HTMLDivElement>(null);\n const handleRef = useForkRef(ref, regionRef);\n\n const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n // Need to cancel the default events to allow drop\n // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n\n event.preventDefault();\n event.stopPropagation();\n\n if (disabled) {\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"none\";\n }\n return;\n }\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = \"copy\";\n }\n if (!isActive && containsFiles(event)) {\n setActive(true);\n }\n onDragOver?.(event);\n };\n\n const handleDragLeave: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n const region = regionRef?.current;\n const eventTarget = event.relatedTarget;\n if (eventTarget !== region && !region?.contains(eventTarget as Node)) {\n setActive(false);\n }\n onDragLeave?.(event);\n };\n\n const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n if (disabled) {\n return;\n }\n event.preventDefault();\n const files = extractFiles(event);\n setActive(false);\n onDrop?.(event, files);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(status as string)]: status,\n [withBaseName(\"active\")]: isActive,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n aria-disabled={disabled}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n ref={handleRef}\n {...restProps}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["FileDropZone","fileDropZoneCss"],"mappings":"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"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { StatusIndicator } from '@salt-ds/core';
|
|
3
|
-
import { forwardRef } from 'react';
|
|
4
|
-
import { UploadIcon } from '@salt-ds/icons';
|
|
5
|
-
|
|
6
|
-
const FileDropZoneIcon = forwardRef(function FileDropZoneIcon2({ status, size = 2, ...rest }, ref) {
|
|
7
|
-
const iconProps = {
|
|
8
|
-
ref,
|
|
9
|
-
size,
|
|
10
|
-
...rest
|
|
11
|
-
};
|
|
12
|
-
return status ? /* @__PURE__ */ jsx(StatusIndicator, {
|
|
13
|
-
status,
|
|
14
|
-
...iconProps
|
|
15
|
-
}) : /* @__PURE__ */ jsx(UploadIcon, {
|
|
16
|
-
...iconProps
|
|
17
|
-
});
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
export { FileDropZoneIcon };
|
|
21
|
-
//# sourceMappingURL=FileDropZoneIcon.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZoneIcon.js","sources":["../src/file-drop-zone/FileDropZoneIcon.tsx"],"sourcesContent":["import { StatusIndicator, ValidationStatus } from \"@salt-ds/core\";\nimport { forwardRef } from \"react\";\nimport { IconProps, UploadIcon } from \"@salt-ds/icons\";\n\nexport interface FileDropZoneIconProps extends IconProps {\n /**\n * Status indicator to be displayed.\n */\n status?: ValidationStatus;\n}\n\nexport const FileDropZoneIcon = forwardRef<\n SVGSVGElement,\n FileDropZoneIconProps\n>(function FileDropZoneIcon({ status, size = 2, ...rest }, ref) {\n const iconProps = {\n ref,\n size,\n ...rest,\n };\n return status ? (\n <StatusIndicator status={status} {...iconProps} />\n ) : (\n <UploadIcon {...iconProps} />\n );\n});\n"],"names":["FileDropZoneIcon"],"mappings":";;;;;AAWa,MAAA,gBAAA,GAAmB,UAG9B,CAAA,SAASA,iBAAiB,CAAA,EAAE,QAAQ,IAAO,GAAA,CAAA,EAAA,GAAM,IAAK,EAAA,EAAG,GAAK,EAAA;AAC9D,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,GAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACA,EAAA,OAAO,yBACJ,GAAA,CAAA,eAAA,EAAA;AAAA,IAAgB,MAAA;AAAA,IAAiB,GAAG,SAAA;AAAA,GAAW,oBAE/C,GAAA,CAAA,UAAA,EAAA;AAAA,IAAY,GAAG,SAAA;AAAA,GAAW,CAAA,CAAA;AAE/B,CAAC;;;;"}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useForkRef, Button } from '@salt-ds/core';
|
|
3
|
-
import { forwardRef, useRef } from 'react';
|
|
4
|
-
|
|
5
|
-
const FileDropZoneTrigger = forwardRef(function FileDropZoneTrigger2({ accept, children, disabled, multiple = false, onChange, ...rest }, ref) {
|
|
6
|
-
const buttonRef = useRef(null);
|
|
7
|
-
const fileInputRef = useRef(null);
|
|
8
|
-
const triggerRef = useForkRef(ref, buttonRef);
|
|
9
|
-
const handleFocus = (event) => {
|
|
10
|
-
var _a;
|
|
11
|
-
event.stopPropagation();
|
|
12
|
-
(_a = buttonRef.current) == null ? void 0 : _a.focus();
|
|
13
|
-
};
|
|
14
|
-
const handleClick = (event) => {
|
|
15
|
-
var _a;
|
|
16
|
-
event.stopPropagation();
|
|
17
|
-
(_a = fileInputRef.current) == null ? void 0 : _a.click();
|
|
18
|
-
};
|
|
19
|
-
const handleChange = (event) => {
|
|
20
|
-
var _a;
|
|
21
|
-
const files = Array.from((_a = event.target.files) != null ? _a : []);
|
|
22
|
-
onChange == null ? void 0 : onChange(event, files);
|
|
23
|
-
};
|
|
24
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
|
25
|
-
children: [
|
|
26
|
-
/* @__PURE__ */ jsx(Button, {
|
|
27
|
-
onClick: handleClick,
|
|
28
|
-
disabled,
|
|
29
|
-
ref: triggerRef,
|
|
30
|
-
...rest,
|
|
31
|
-
children: children != null ? children : "Browse files"
|
|
32
|
-
}),
|
|
33
|
-
/* @__PURE__ */ jsx("input", {
|
|
34
|
-
accept,
|
|
35
|
-
className: "input-hidden",
|
|
36
|
-
disabled,
|
|
37
|
-
multiple,
|
|
38
|
-
onChange: handleChange,
|
|
39
|
-
onFocus: handleFocus,
|
|
40
|
-
ref: fileInputRef,
|
|
41
|
-
type: "file"
|
|
42
|
-
})
|
|
43
|
-
]
|
|
44
|
-
});
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
export { FileDropZoneTrigger };
|
|
48
|
-
//# sourceMappingURL=FileDropZoneTrigger.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZoneTrigger.js","sources":["../src/file-drop-zone/FileDropZoneTrigger.tsx"],"sourcesContent":["import { Button, useForkRef } from \"@salt-ds/core\";\nimport {\n FocusEvent,\n forwardRef,\n HTMLAttributes,\n SyntheticEvent,\n useRef,\n} from \"react\";\n\nexport interface FileDropZoneTriggerProps\n extends Omit<HTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n /**\n * `accept` attribute for HTML <input>.\n *\n * A comma separated list of file types the user can pick from the file input dialog box.\n */\n accept?: string;\n /**\n * Disable all trigger elements.\n */\n disabled?: boolean;\n /**\n * Allows multiple files to be uploaded.\n */\n multiple?: boolean;\n /**\n * Callback for input change event\n */\n onChange?: (event: SyntheticEvent<HTMLInputElement>, files: File[]) => void;\n}\n\nexport const FileDropZoneTrigger = forwardRef<\n HTMLButtonElement,\n FileDropZoneTriggerProps\n>(function FileDropZoneTrigger(\n { accept, children, disabled, multiple = false, onChange, ...rest },\n ref\n) {\n const buttonRef = useRef<HTMLButtonElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n const triggerRef = useForkRef(ref, buttonRef);\n\n // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n // move focus back on the button element so that all labels can be announced correctly\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n buttonRef.current?.focus();\n };\n\n const handleClick = (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n fileInputRef.current?.click();\n };\n\n const handleChange = (event: SyntheticEvent<HTMLInputElement>) => {\n const files = Array.from((event.target as HTMLInputElement).files ?? []);\n onChange?.(event, files);\n };\n return (\n <>\n <Button\n onClick={handleClick}\n disabled={disabled}\n ref={triggerRef}\n {...rest}\n >\n {children ?? \"Browse files\"}\n </Button>\n <input\n accept={accept}\n className=\"input-hidden\"\n disabled={disabled}\n multiple={multiple}\n onChange={handleChange}\n onFocus={handleFocus}\n ref={fileInputRef}\n type=\"file\"\n />\n </>\n );\n});\n"],"names":["FileDropZoneTrigger"],"mappings":";;;;AA+BO,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CACT,EAAE,MAAA,EAAQ,QAAU,EAAA,QAAA,EAAU,QAAW,GAAA,KAAA,EAAO,QAAa,EAAA,GAAA,IAAA,IAC7D,GACA,EAAA;AACA,EAAM,MAAA,SAAA,GAAY,OAA0B,IAAI,CAAA,CAAA;AAChD,EAAM,MAAA,YAAA,GAAe,OAAyB,IAAI,CAAA,CAAA;AAClD,EAAM,MAAA,UAAA,GAAa,UAAW,CAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AAI5C,EAAM,MAAA,WAAA,GAAc,CAAC,KAAwC,KAAA;AA5C/D,IAAA,IAAA,EAAA,CAAA;AA6CI,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,SAAA,CAAU,YAAV,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAA6C,KAAA;AAjDpE,IAAA,IAAA,EAAA,CAAA;AAkDI,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,CAAA,EAAA,GAAA,YAAA,CAAa,YAAb,IAAsB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,GACxB,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAA4C,KAAA;AAtDpE,IAAA,IAAA,EAAA,CAAA;AAuDI,IAAM,MAAA,KAAA,GAAQ,MAAM,IAAM,CAAA,CAAA,EAAA,GAAA,KAAA,CAAM,OAA4B,KAAlC,KAAA,IAAA,GAAA,EAAA,GAA2C,EAAE,CAAA,CAAA;AACvE,IAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,KAAA,CAAA,CAAA;AAAA,GACpB,CAAA;AACA,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,OAAS,EAAA,WAAA;AAAA,QACT,QAAA;AAAA,QACA,GAAK,EAAA,UAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH,QAAY,EAAA,QAAA,IAAA,IAAA,GAAA,QAAA,GAAA,cAAA;AAAA,OACf,CAAA;AAAA,sBACC,GAAA,CAAA,OAAA,EAAA;AAAA,QACC,MAAA;AAAA,QACA,SAAU,EAAA,cAAA;AAAA,QACV,QAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,OAAS,EAAA,WAAA;AAAA,QACT,GAAK,EAAA,YAAA;AAAA,QACL,IAAK,EAAA,MAAA;AAAA,OACP,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
const containsFiles = (e) => {
|
|
2
|
-
if (!e.dataTransfer) {
|
|
3
|
-
const target = e.target;
|
|
4
|
-
return target == null ? void 0 : target.files;
|
|
5
|
-
}
|
|
6
|
-
return Array.prototype.some.call(
|
|
7
|
-
e.dataTransfer.types,
|
|
8
|
-
(type) => type === "Files"
|
|
9
|
-
);
|
|
10
|
-
};
|
|
11
|
-
const extractFiles = (e) => {
|
|
12
|
-
var _a;
|
|
13
|
-
if (containsFiles(e)) {
|
|
14
|
-
if (e.dataTransfer) {
|
|
15
|
-
return Array.from(e.dataTransfer.files);
|
|
16
|
-
}
|
|
17
|
-
if (e.target) {
|
|
18
|
-
return Array.from((_a = e.target.files) != null ? _a : []);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
return [];
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
export { containsFiles, extractFiles };
|
|
25
|
-
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/file-drop-zone/internal/utils.ts"],"sourcesContent":["import { DragEvent } from \"react\";\n\nexport const containsFiles = (e: DragEvent) => {\n if (!e.dataTransfer) {\n const target = e.target as HTMLInputElement;\n return target?.files;\n }\n\n return Array.prototype.some.call(\n e.dataTransfer.types,\n (type) => type === \"Files\"\n );\n};\n\nexport const extractFiles = (e: DragEvent): File[] => {\n if (containsFiles(e)) {\n if (e.dataTransfer) {\n return Array.from(e.dataTransfer.files);\n }\n\n if (e.target) {\n return Array.from((e.target as HTMLInputElement).files ?? []);\n }\n }\n\n return [];\n};\n"],"names":[],"mappings":"AAEa,MAAA,aAAA,GAAgB,CAAC,CAAiB,KAAA;AAC7C,EAAI,IAAA,CAAC,EAAE,YAAc,EAAA;AACnB,IAAA,MAAM,SAAS,CAAE,CAAA,MAAA,CAAA;AACjB,IAAA,OAAO,MAAQ,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA;AAAA,GACjB;AAEA,EAAO,OAAA,KAAA,CAAM,UAAU,IAAK,CAAA,IAAA;AAAA,IAC1B,EAAE,YAAa,CAAA,KAAA;AAAA,IACf,CAAC,SAAS,IAAS,KAAA,OAAA;AAAA,GACrB,CAAA;AACF,EAAA;AAEa,MAAA,YAAA,GAAe,CAAC,CAAyB,KAAA;AAdtD,EAAA,IAAA,EAAA,CAAA;AAeE,EAAI,IAAA,aAAA,CAAc,CAAC,CAAG,EAAA;AACpB,IAAA,IAAI,EAAE,YAAc,EAAA;AAClB,MAAA,OAAO,KAAM,CAAA,IAAA,CAAK,CAAE,CAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,KACxC;AAEA,IAAA,IAAI,EAAE,MAAQ,EAAA;AACZ,MAAA,OAAO,MAAM,IAAM,CAAA,CAAA,EAAA,GAAA,CAAA,CAAE,OAA4B,KAA9B,KAAA,IAAA,GAAA,EAAA,GAAuC,EAAE,CAAA,CAAA;AAAA,KAC9D;AAAA,GACF;AAEA,EAAA,OAAO,EAAC,CAAA;AACV;;;;"}
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import { arrow, offset, flip, shift, limitShift, useInteractions, useDismiss, useRole, useClick } from '@floating-ui/react';
|
|
2
|
-
import { useControlled, margin, useFloatingUI } from '@salt-ds/core';
|
|
3
|
-
import { useRef, useCallback } from 'react';
|
|
4
|
-
import { isDesktop } from '../window/WindowContext.js';
|
|
5
|
-
import '../window/ElectronWindow.js';
|
|
6
|
-
|
|
7
|
-
function useOverlay(props) {
|
|
8
|
-
const { open: openProp, placement = "right", onOpenChange } = props;
|
|
9
|
-
const arrowRef = useRef(null);
|
|
10
|
-
const [open, setOpen] = useControlled({
|
|
11
|
-
controlled: openProp,
|
|
12
|
-
default: false,
|
|
13
|
-
name: "Overlay",
|
|
14
|
-
state: "open"
|
|
15
|
-
});
|
|
16
|
-
const handleOpenChange = (newOpen) => {
|
|
17
|
-
setOpen(newOpen);
|
|
18
|
-
onOpenChange == null ? void 0 : onOpenChange(newOpen);
|
|
19
|
-
};
|
|
20
|
-
const middleware = isDesktop ? [margin(24), arrow({ element: arrowRef })] : [
|
|
21
|
-
offset(24),
|
|
22
|
-
flip(),
|
|
23
|
-
shift({ limiter: limitShift() }),
|
|
24
|
-
arrow({ element: arrowRef })
|
|
25
|
-
];
|
|
26
|
-
const {
|
|
27
|
-
reference,
|
|
28
|
-
floating,
|
|
29
|
-
x,
|
|
30
|
-
y,
|
|
31
|
-
strategy,
|
|
32
|
-
context,
|
|
33
|
-
middlewareData,
|
|
34
|
-
update
|
|
35
|
-
} = useFloatingUI({
|
|
36
|
-
open,
|
|
37
|
-
onOpenChange: handleOpenChange,
|
|
38
|
-
placement,
|
|
39
|
-
middleware
|
|
40
|
-
});
|
|
41
|
-
const handleArrowRef = useCallback(
|
|
42
|
-
(node) => {
|
|
43
|
-
arrowRef.current = node;
|
|
44
|
-
update();
|
|
45
|
-
},
|
|
46
|
-
[update]
|
|
47
|
-
);
|
|
48
|
-
const { getFloatingProps, getReferenceProps } = useInteractions([
|
|
49
|
-
useDismiss(context),
|
|
50
|
-
useRole(context, { role: "dialog" }),
|
|
51
|
-
useClick(context)
|
|
52
|
-
]);
|
|
53
|
-
const getTriggerProps = (userProps) => {
|
|
54
|
-
return getReferenceProps({
|
|
55
|
-
...userProps,
|
|
56
|
-
ref: reference
|
|
57
|
-
});
|
|
58
|
-
};
|
|
59
|
-
const getOverlayProps = (userProps) => {
|
|
60
|
-
var _a, _b, _c, _d;
|
|
61
|
-
const arrowProps = {
|
|
62
|
-
ref: handleArrowRef,
|
|
63
|
-
style: {
|
|
64
|
-
position: strategy,
|
|
65
|
-
left: (_b = (_a = middlewareData.arrow) == null ? void 0 : _a.x) != null ? _b : 0,
|
|
66
|
-
top: (_d = (_c = middlewareData.arrow) == null ? void 0 : _c.y) != null ? _d : 0
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
return {
|
|
70
|
-
arrowProps,
|
|
71
|
-
open,
|
|
72
|
-
onOpenChange: handleOpenChange,
|
|
73
|
-
...getFloatingProps({
|
|
74
|
-
"data-placement": placement,
|
|
75
|
-
...userProps,
|
|
76
|
-
style: {
|
|
77
|
-
top: y != null ? y : 0,
|
|
78
|
-
left: x != null ? x : 0,
|
|
79
|
-
position: strategy,
|
|
80
|
-
...(userProps == null ? void 0 : userProps.style) || {}
|
|
81
|
-
},
|
|
82
|
-
ref: floating
|
|
83
|
-
})
|
|
84
|
-
};
|
|
85
|
-
};
|
|
86
|
-
return {
|
|
87
|
-
getTriggerProps,
|
|
88
|
-
getOverlayProps
|
|
89
|
-
};
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
export { useOverlay };
|
|
93
|
-
//# sourceMappingURL=useOverlay.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useOverlay.js","sources":["../src/overlay/useOverlay.ts"],"sourcesContent":["import {\n arrow,\n flip,\n limitShift,\n offset,\n shift,\n useClick,\n useDismiss,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport {\n margin,\n useControlled,\n useFloatingUI,\n UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport {\n ComponentPropsWithoutRef,\n ComponentPropsWithRef,\n JSXElementConstructor,\n useCallback,\n useRef,\n} from \"react\";\nimport { OverlayProps } from \"./Overlay\";\nimport { isDesktop } from \"../window\";\n\nexport type UseOverlayProps = Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n>;\n\nexport function useOverlay(props: UseOverlayProps) {\n const { open: openProp, placement = \"right\", onOpenChange } = props;\n\n const arrowRef = useRef<HTMLDivElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Overlay\",\n state: \"open\",\n });\n const handleOpenChange = (newOpen: boolean) => {\n setOpen(newOpen);\n onOpenChange?.(newOpen);\n };\n const middleware = isDesktop\n ? [margin(24), arrow({ element: arrowRef })]\n : [\n offset(24),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ];\n const {\n reference,\n floating,\n x,\n y,\n strategy,\n context,\n middlewareData,\n update,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement,\n middleware,\n });\n\n const handleArrowRef = useCallback(\n (node: HTMLDivElement) => {\n arrowRef.current = node;\n update();\n },\n [update]\n );\n\n const { getFloatingProps, getReferenceProps } = useInteractions([\n useDismiss(context),\n useRole(context, { role: \"dialog\" }),\n useClick(context),\n ]);\n\n const getTriggerProps = <\n Element extends\n | keyof JSX.IntrinsicElements\n | JSXElementConstructor<any> = \"div\"\n >(\n userProps?: ComponentPropsWithoutRef<Element>\n ) => {\n return getReferenceProps({\n ...userProps,\n ref: reference,\n }) as ComponentPropsWithRef<Element>;\n };\n\n const getOverlayProps = (userProps?: OverlayProps) => {\n const arrowProps = {\n ref: handleArrowRef,\n style: {\n position: strategy,\n left: middlewareData.arrow?.x ?? 0,\n top: middlewareData.arrow?.y ?? 0,\n },\n };\n\n return {\n arrowProps,\n open,\n onOpenChange: handleOpenChange,\n ...getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ...userProps,\n style: {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n ...(userProps?.style || {}),\n },\n ref: floating,\n }),\n } as OverlayProps;\n };\n\n return {\n getTriggerProps,\n getOverlayProps,\n };\n}\n"],"names":[],"mappings":";;;;;;AA+BO,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAA,MAAM,EAAE,IAAM,EAAA,QAAA,EAAU,SAAY,GAAA,OAAA,EAAS,cAAiB,GAAA,KAAA,CAAA;AAE9D,EAAM,MAAA,QAAA,GAAW,OAA8B,IAAI,CAAA,CAAA;AAEnD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,aAAc,CAAA;AAAA,IACpC,UAAY,EAAA,QAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AACD,EAAM,MAAA,gBAAA,GAAmB,CAAC,OAAqB,KAAA;AAC7C,IAAA,OAAA,CAAQ,OAAO,CAAA,CAAA;AACf,IAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,OAAA,CAAA,CAAA;AAAA,GACjB,CAAA;AACA,EAAA,MAAM,UAAa,GAAA,SAAA,GACf,CAAC,MAAA,CAAO,EAAE,CAAA,EAAG,KAAM,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU,CAAC,CACzC,GAAA;AAAA,IACE,OAAO,EAAE,CAAA;AAAA,IACT,IAAK,EAAA;AAAA,IACL,KAAM,CAAA,EAAE,OAAS,EAAA,UAAA,IAAc,CAAA;AAAA,IAC/B,KAAM,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU,CAAA;AAAA,GAC7B,CAAA;AACJ,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,cAAA;AAAA,IACA,MAAA;AAAA,MACE,aAAc,CAAA;AAAA,IAChB,IAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,SAAA;AAAA,IACA,UAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,IAAyB,KAAA;AACxB,MAAA,QAAA,CAAS,OAAU,GAAA,IAAA,CAAA;AACnB,MAAO,MAAA,EAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAkB,EAAA,GAAI,eAAgB,CAAA;AAAA,IAC9D,WAAW,OAAO,CAAA;AAAA,IAClB,OAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,UAAU,CAAA;AAAA,IACnC,SAAS,OAAO,CAAA;AAAA,GACjB,CAAA,CAAA;AAED,EAAM,MAAA,eAAA,GAAkB,CAKtB,SACG,KAAA;AACH,IAAA,OAAO,iBAAkB,CAAA;AAAA,MACvB,GAAG,SAAA;AAAA,MACH,GAAK,EAAA,SAAA;AAAA,KACN,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,SAA6B,KAAA;AAjGxD,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAkGI,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,GAAK,EAAA,cAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,QAAU,EAAA,QAAA;AAAA,QACV,IAAM,EAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,cAAA,CAAe,KAAf,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAsB,MAAtB,IAA2B,GAAA,EAAA,GAAA,CAAA;AAAA,QACjC,GAAK,EAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,cAAA,CAAe,KAAf,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAsB,MAAtB,IAA2B,GAAA,EAAA,GAAA,CAAA;AAAA,OAClC;AAAA,KACF,CAAA;AAEA,IAAO,OAAA;AAAA,MACL,UAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,GAAG,gBAAiB,CAAA;AAAA,QAElB,gBAAkB,EAAA,SAAA;AAAA,QAClB,GAAG,SAAA;AAAA,QACH,KAAO,EAAA;AAAA,UACL,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,UACV,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,UACX,QAAU,EAAA,QAAA;AAAA,UACV,GAAA,CAAI,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,KAAS,EAAC;AAAA,SAC3B;AAAA,QACA,GAAK,EAAA,QAAA;AAAA,OACN,CAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,eAAA;AAAA,IACA,eAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { ValidationStatus } from "@salt-ds/core";
|
|
2
|
-
import { DragEvent, ComponentPropsWithoutRef } from "react";
|
|
3
|
-
export interface FileDropZoneProps extends Omit<ComponentPropsWithoutRef<"div">, "onDrop"> {
|
|
4
|
-
/**
|
|
5
|
-
* If `true`, the file drop zone will be disabled.
|
|
6
|
-
*/
|
|
7
|
-
disabled?: boolean;
|
|
8
|
-
/**
|
|
9
|
-
* Status indicator to be displayed.
|
|
10
|
-
*/
|
|
11
|
-
status?: Omit<ValidationStatus, "info" | "warning">;
|
|
12
|
-
/**
|
|
13
|
-
* Callback for on drop event
|
|
14
|
-
*/
|
|
15
|
-
onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;
|
|
16
|
-
}
|
|
17
|
-
export declare const FileDropZone: import("react").ForwardRefExoticComponent<FileDropZoneProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { ValidationStatus } from "@salt-ds/core";
|
|
2
|
-
import { IconProps } from "@salt-ds/icons";
|
|
3
|
-
export interface FileDropZoneIconProps extends IconProps {
|
|
4
|
-
/**
|
|
5
|
-
* Status indicator to be displayed.
|
|
6
|
-
*/
|
|
7
|
-
status?: ValidationStatus;
|
|
8
|
-
}
|
|
9
|
-
export declare const FileDropZoneIcon: import("react").ForwardRefExoticComponent<FileDropZoneIconProps & import("react").RefAttributes<SVGSVGElement>>;
|