@salt-ds/lab 1.0.0-alpha.23 → 1.0.0-alpha.25
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 -74
- package/dist-cjs/color-chooser/ColorPicker.css.js +1 -1
- package/dist-cjs/color-chooser/ColorPicker.js +2 -2
- package/dist-cjs/color-chooser/ColorPicker.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-cjs/file-drop-zone/FileDropZone.js +32 -132
- package/dist-cjs/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-cjs/file-drop-zone/FileDropZoneIcon.js +25 -0
- package/dist-cjs/file-drop-zone/FileDropZoneIcon.js.map +1 -0
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js +52 -0
- package/dist-cjs/file-drop-zone/FileDropZoneTrigger.js.map +1 -0
- package/dist-cjs/file-drop-zone/internal/utils.js +4 -13
- package/dist-cjs/file-drop-zone/internal/utils.js.map +1 -1
- package/dist-cjs/index.js +4 -3
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/tabs-next/TabstripNext.css.js +1 -1
- package/dist-es/color-chooser/ColorPicker.css.js +1 -1
- package/dist-es/color-chooser/ColorPicker.js +2 -2
- package/dist-es/color-chooser/ColorPicker.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZone.css.js +1 -1
- package/dist-es/file-drop-zone/FileDropZone.js +36 -136
- package/dist-es/file-drop-zone/FileDropZone.js.map +1 -1
- package/dist-es/file-drop-zone/FileDropZoneIcon.js +21 -0
- package/dist-es/file-drop-zone/FileDropZoneIcon.js.map +1 -0
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js +48 -0
- package/dist-es/file-drop-zone/FileDropZoneTrigger.js.map +1 -0
- package/dist-es/file-drop-zone/internal/utils.js +5 -12
- package/dist-es/file-drop-zone/internal/utils.js.map +1 -1
- package/dist-es/index.js +2 -1
- package/dist-es/index.js.map +1 -1
- package/dist-es/tabs-next/TabstripNext.css.js +1 -1
- package/dist-types/file-drop-zone/FileDropZone.d.ts +7 -44
- package/dist-types/file-drop-zone/FileDropZoneIcon.d.ts +9 -0
- package/dist-types/file-drop-zone/FileDropZoneTrigger.d.ts +22 -0
- package/dist-types/file-drop-zone/index.d.ts +2 -1
- package/dist-types/file-drop-zone/internal/utils.d.ts +0 -6
- package/package.json +4 -4
- package/dist-cjs/file-drop-zone/validators.js +0 -38
- package/dist-cjs/file-drop-zone/validators.js.map +0 -1
- package/dist-es/file-drop-zone/validators.js +0 -29
- package/dist-es/file-drop-zone/validators.js.map +0 -1
- package/dist-types/file-drop-zone/validators.d.ts +0 -21
|
@@ -2,11 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const toArray = (obj) => Object.keys(obj).map((key) => obj[key]);
|
|
6
5
|
const containsFiles = (e) => {
|
|
7
6
|
if (!e.dataTransfer) {
|
|
8
7
|
const target = e.target;
|
|
9
|
-
return target
|
|
8
|
+
return target == null ? void 0 : target.files;
|
|
10
9
|
}
|
|
11
10
|
return Array.prototype.some.call(
|
|
12
11
|
e.dataTransfer.types,
|
|
@@ -14,26 +13,18 @@ const containsFiles = (e) => {
|
|
|
14
13
|
);
|
|
15
14
|
};
|
|
16
15
|
const extractFiles = (e) => {
|
|
16
|
+
var _a;
|
|
17
17
|
if (containsFiles(e)) {
|
|
18
18
|
if (e.dataTransfer) {
|
|
19
|
-
return
|
|
19
|
+
return Array.from(e.dataTransfer.files);
|
|
20
20
|
}
|
|
21
21
|
if (e.target) {
|
|
22
|
-
return
|
|
22
|
+
return Array.from((_a = e.target.files) != null ? _a : []);
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
return [];
|
|
26
26
|
};
|
|
27
|
-
const validateFiles = ({
|
|
28
|
-
files = [],
|
|
29
|
-
validate = []
|
|
30
|
-
}) => validate.reduce(
|
|
31
|
-
(result, validator) => result.concat(validator(files)),
|
|
32
|
-
[]
|
|
33
|
-
).filter(Boolean);
|
|
34
27
|
|
|
35
28
|
exports.containsFiles = containsFiles;
|
|
36
29
|
exports.extractFiles = extractFiles;
|
|
37
|
-
exports.toArray = toArray;
|
|
38
|
-
exports.validateFiles = validateFiles;
|
|
39
30
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/file-drop-zone/internal/utils.ts"],"sourcesContent":["import { DragEvent } from \"react\";\
|
|
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;;;;;"}
|
package/dist-cjs/index.js
CHANGED
|
@@ -76,7 +76,8 @@ var useDropdownBase = require('./dropdown/useDropdownBase.js');
|
|
|
76
76
|
var DropdownNext = require('./dropdown-next/DropdownNext.js');
|
|
77
77
|
var EditableLabel = require('./editable-label/EditableLabel.js');
|
|
78
78
|
var FileDropZone = require('./file-drop-zone/FileDropZone.js');
|
|
79
|
-
var
|
|
79
|
+
var FileDropZoneIcon = require('./file-drop-zone/FileDropZoneIcon.js');
|
|
80
|
+
var FileDropZoneTrigger = require('./file-drop-zone/FileDropZoneTrigger.js');
|
|
80
81
|
var FormFieldLegacy = require('./form-field-legacy/FormFieldLegacy.js');
|
|
81
82
|
var FormLabel = require('./form-field-legacy/FormLabel.js');
|
|
82
83
|
var FormFieldLegacyContext = require('./form-field-context-legacy/FormFieldLegacyContext.js');
|
|
@@ -239,8 +240,8 @@ exports.useDropdownBase = useDropdownBase.useDropdownBase;
|
|
|
239
240
|
exports.DropdownNext = DropdownNext.DropdownNext;
|
|
240
241
|
exports.EditableLabel = EditableLabel.EditableLabel;
|
|
241
242
|
exports.FileDropZone = FileDropZone.FileDropZone;
|
|
242
|
-
exports.
|
|
243
|
-
exports.
|
|
243
|
+
exports.FileDropZoneIcon = FileDropZoneIcon.FileDropZoneIcon;
|
|
244
|
+
exports.FileDropZoneTrigger = FileDropZoneTrigger.FileDropZoneTrigger;
|
|
244
245
|
exports.FormField = FormFieldLegacy.FormFieldLegacy;
|
|
245
246
|
exports.FormLabel = FormLabel.FormLabel;
|
|
246
247
|
exports.FormFieldLegacyContext = FormFieldLegacyContext.FormFieldLegacyContext;
|
package/dist-cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n display: flex;\n flex-wrap: nowrap;\n justify-content: var(--tabstripNext-justifyContent);\n align-items: center;\n position: relative;\n background: transparent;\n width: 100%;\n
|
|
3
|
+
var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n display: flex;\n flex-wrap: nowrap;\n justify-content: var(--tabstripNext-justifyContent);\n align-items: center;\n position: relative;\n background: transparent;\n width: 100%;\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltTabstripNext-main {\n padding-left: var(--salt-spacing-300);\n padding-right: var(--salt-spacing-300);\n}\n\n.saltTabstripNext-main::before {\n content: \"\";\n position: absolute;\n inset: auto 0 0 0;\n height: var(--salt-size-border);\n border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {\n padding-right: var(--salt-spacing-100);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=TabstripNext.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltColorChooserPicker {\n display: flex;\n flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n color: var(--salt-content-primary-foreground);\n padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.root,\n.rootDisabledAlpha {\n box-shadow: none !important;\n padding: 8px 8px 0px 0px !important;\n background: transparent !important;\n width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.root .flexbox-fix,\n.rootDisabledAlpha .flexbox-fix {\n padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.root .flexbox-fix ~ .flexbox-fix {\n display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n width: calc(var(--salt-size-base) / 4) !important;\n height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.rootDisabledAlpha .hue-horizontal > div > div {\n position: relative;\n margin-top: 0px !important;\n width: 4px !important;\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n background: var(--salt-container-primary-background) !important;\n border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
|
|
1
|
+
var css_248z = ".saltColorChooserPicker {\n display: flex;\n flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n font-size: var(--salt-text-label-fontSize);\n font-weight: var(--salt-text-fontWeight-strong);\n color: var(--salt-content-primary-foreground);\n padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n display: flex;\n flex-direction: column;\n align-content: stretch;\n padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.saltColorChooserPicker-root,\n.saltColorChooserPicker-rootDisabledAlpha {\n box-shadow: none !important;\n padding: 8px 8px 0px 0px !important;\n background: transparent !important;\n width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.saltColorChooserPicker-root .flexbox-fix,\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {\n padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {\n display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n width: calc(var(--salt-size-base) / 4) !important;\n height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {\n position: relative;\n margin-top: 0px !important;\n width: 4px !important;\n height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n background: var(--salt-container-primary-background) !important;\n border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=ColorPicker.css.js.map
|
|
@@ -64,8 +64,8 @@ const ColorPicker = ({
|
|
|
64
64
|
children: [
|
|
65
65
|
/* @__PURE__ */ jsx(SketchPicker, {
|
|
66
66
|
className: clsx(withBaseName("swatchPickerStyles"), {
|
|
67
|
-
["rootDisabledAlpha"]: disableAlphaChooser,
|
|
68
|
-
["root"]: !disableAlphaChooser
|
|
67
|
+
[withBaseName("rootDisabledAlpha")]: disableAlphaChooser,
|
|
68
|
+
[withBaseName("root")]: !disableAlphaChooser
|
|
69
69
|
}),
|
|
70
70
|
color: rgbaValue,
|
|
71
71
|
onChange: onSketchPickerChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { ColorResult, SketchPicker } from \"react-color\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorPickerCss from \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n disableAlphaChooser: boolean;\n color?: Color;\n alpha?: number;\n onChange: (\n color: Color | undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n alpha = 1,\n disableAlphaChooser,\n color,\n onChange,\n onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-picker\",\n css: colorPickerCss,\n window: targetWindow,\n });\n\n const rgbaValue: RGBAValue =\n color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromHex(hexValue);\n onChange(newColor, false, e);\n };\n\n const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n onChange(newColor, false, e);\n };\n\n const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(\n rgbaValue.r,\n rgbaValue.g,\n rgbaValue.b,\n Math.max(0, Math.min(alpha, 1))\n );\n onChange(newColor, false, e);\n };\n\n const onSketchPickerChange = (\n colorResult: ColorResult,\n e: ChangeEvent\n ): void => {\n const newColor = Color.makeColorFromRGB(\n colorResult.rgb.r,\n colorResult.rgb.g,\n colorResult.rgb.b,\n colorResult.rgb.a ?? alpha\n );\n onChange(newColor, false, e);\n };\n\n const onApply = (): void => {\n onChange(color, true);\n onDialogClosed();\n };\n\n return (\n <div data-testid=\"color-picker\" className={clsx(withBaseName())}>\n {/** @ts-ignore react-color has incorrect types **/}\n <SketchPicker\n className={clsx(withBaseName(\"swatchPickerStyles\"), {\n [\"rootDisabledAlpha\"]: disableAlphaChooser,\n [\"root\"]: !disableAlphaChooser,\n })}\n color={rgbaValue}\n onChange={onSketchPickerChange}\n presetColors={[]}\n disableAlpha={disableAlphaChooser}\n />\n <div className={clsx(withBaseName(\"inputContainer\"))}>\n <div className={clsx(withBaseName(\"inputDivs\"))}>\n <span className={clsx(withBaseName(\"textDivOverrides\"))}>HEX</span>\n <HexInput\n hexValue={\n disableAlphaChooser\n ? hexValueWithoutAlpha(color?.hex)\n : color?.hex\n }\n disableAlphaChooser={disableAlphaChooser}\n onSubmit={onSubmitHex}\n />\n <RGBAInput\n disableAlphaChooser={disableAlphaChooser}\n rgbaText={rgbaText}\n rgbaValue={rgbaValue}\n onSubmitAlpha={onSubmitAlpha}\n onSubmitRgb={onSubmitRgb}\n />\n </div>\n <div className={clsx(withBaseName(\"applyButtonDiv\"))}>\n <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n Apply\n </Button>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["colorPickerCss","alpha","_a"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ColorPicker.js","sources":["../src/color-chooser/ColorPicker.tsx"],"sourcesContent":["import { ChangeEvent } from \"react\";\nimport { ColorResult, SketchPicker } from \"react-color\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { Color, RGBAValue } from \"./Color\";\nimport { hexValueWithoutAlpha } from \"./ColorHelpers\";\nimport { HexInput } from \"./HexInput\";\nimport { RGBAInput } from \"./RGBAInput\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorPickerCss from \"./ColorPicker.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserPicker\");\n\nexport interface ColorPickerProps {\n disableAlphaChooser: boolean;\n color?: Color;\n alpha?: number;\n onChange: (\n color: Color | undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n}\n\nexport const ColorPicker = ({\n alpha = 1,\n disableAlphaChooser,\n color,\n onChange,\n onDialogClosed,\n}: ColorPickerProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-picker\",\n css: colorPickerCss,\n window: targetWindow,\n });\n\n const rgbaValue: RGBAValue =\n color?.rgba ?? Color.makeColorFromRGB(0, 0, 0, alpha).rgba;\n const rgbaText = disableAlphaChooser ? \"RGB\" : \"RGBA\";\n\n const onSubmitHex = (hexValue?: string, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromHex(hexValue);\n onChange(newColor, false, e);\n };\n\n const onSubmitRgb = (rgba: RGBAValue, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);\n onChange(newColor, false, e);\n };\n\n const onSubmitAlpha = (alpha: number, e?: ChangeEvent): void => {\n const newColor = Color.makeColorFromRGB(\n rgbaValue.r,\n rgbaValue.g,\n rgbaValue.b,\n Math.max(0, Math.min(alpha, 1))\n );\n onChange(newColor, false, e);\n };\n\n const onSketchPickerChange = (\n colorResult: ColorResult,\n e: ChangeEvent\n ): void => {\n const newColor = Color.makeColorFromRGB(\n colorResult.rgb.r,\n colorResult.rgb.g,\n colorResult.rgb.b,\n colorResult.rgb.a ?? alpha\n );\n onChange(newColor, false, e);\n };\n\n const onApply = (): void => {\n onChange(color, true);\n onDialogClosed();\n };\n\n return (\n <div data-testid=\"color-picker\" className={clsx(withBaseName())}>\n {/** @ts-ignore react-color has incorrect types **/}\n <SketchPicker\n className={clsx(withBaseName(\"swatchPickerStyles\"), {\n [withBaseName(\"rootDisabledAlpha\")]: disableAlphaChooser,\n [withBaseName(\"root\")]: !disableAlphaChooser,\n })}\n color={rgbaValue}\n onChange={onSketchPickerChange}\n presetColors={[]}\n disableAlpha={disableAlphaChooser}\n />\n <div className={clsx(withBaseName(\"inputContainer\"))}>\n <div className={clsx(withBaseName(\"inputDivs\"))}>\n <span className={clsx(withBaseName(\"textDivOverrides\"))}>HEX</span>\n <HexInput\n hexValue={\n disableAlphaChooser\n ? hexValueWithoutAlpha(color?.hex)\n : color?.hex\n }\n disableAlphaChooser={disableAlphaChooser}\n onSubmit={onSubmitHex}\n />\n <RGBAInput\n disableAlphaChooser={disableAlphaChooser}\n rgbaText={rgbaText}\n rgbaValue={rgbaValue}\n onSubmitAlpha={onSubmitAlpha}\n onSubmitRgb={onSubmitRgb}\n />\n </div>\n <div className={clsx(withBaseName(\"applyButtonDiv\"))}>\n <Button data-testid=\"apply-button\" variant=\"cta\" onClick={onApply}>\n Apply\n </Button>\n </div>\n </div>\n </div>\n );\n};\n"],"names":["colorPickerCss","alpha","_a"],"mappings":";;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA,CAAA;AAcnD,MAAM,cAAc,CAAC;AAAA,EAC1B,KAAQ,GAAA,CAAA;AAAA,EACR,mBAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AACF,CAAqC,KAAA;AAlCrC,EAAA,IAAA,EAAA,CAAA;AAmCE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAA,CACJ,EAAO,GAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,IAAA,KAAP,IAAe,GAAA,EAAA,GAAA,KAAA,CAAM,iBAAiB,CAAG,EAAA,CAAA,EAAG,CAAG,EAAA,KAAK,CAAE,CAAA,IAAA,CAAA;AACxD,EAAM,MAAA,QAAA,GAAW,sBAAsB,KAAQ,GAAA,MAAA,CAAA;AAE/C,EAAM,MAAA,WAAA,GAAc,CAAC,QAAA,EAAmB,CAA0B,KAAA;AAChE,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,gBAAA,CAAiB,QAAQ,CAAA,CAAA;AAChD,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,IAAA,EAAiB,CAA0B,KAAA;AAC9D,IAAM,MAAA,QAAA,GAAW,KAAM,CAAA,gBAAA,CAAiB,IAAK,CAAA,CAAA,EAAG,KAAK,CAAG,EAAA,IAAA,CAAK,CAAG,EAAA,IAAA,CAAK,CAAC,CAAA,CAAA;AACtE,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAACC,MAAAA,EAAe,CAA0B,KAAA;AAC9D,IAAA,MAAM,WAAW,KAAM,CAAA,gBAAA;AAAA,MACrB,SAAU,CAAA,CAAA;AAAA,MACV,SAAU,CAAA,CAAA;AAAA,MACV,SAAU,CAAA,CAAA;AAAA,MACV,KAAK,GAAI,CAAA,CAAA,EAAG,KAAK,GAAIA,CAAAA,MAAAA,EAAO,CAAC,CAAC,CAAA;AAAA,KAChC,CAAA;AACA,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAM,MAAA,oBAAA,GAAuB,CAC3B,WAAA,EACA,CACS,KAAA;AArEb,IAAAC,IAAAA,GAAAA,CAAAA;AAsEI,IAAA,MAAM,WAAW,KAAM,CAAA,gBAAA;AAAA,MACrB,YAAY,GAAI,CAAA,CAAA;AAAA,MAChB,YAAY,GAAI,CAAA,CAAA;AAAA,MAChB,YAAY,GAAI,CAAA,CAAA;AAAA,MAAA,CAChBA,GAAA,GAAA,WAAA,CAAY,GAAI,CAAA,CAAA,KAAhB,OAAAA,GAAqB,GAAA,KAAA;AAAA,KACvB,CAAA;AACA,IAAS,QAAA,CAAA,QAAA,EAAU,OAAO,CAAC,CAAA,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,MAAM,UAAU,MAAY;AAC1B,IAAA,QAAA,CAAS,OAAO,IAAI,CAAA,CAAA;AACpB,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,cAAA;AAAA,IAAe,SAAA,EAAW,IAAK,CAAA,YAAA,EAAc,CAAA;AAAA,IAE5D,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,YAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,oBAAoB,CAAG,EAAA;AAAA,UAClD,CAAC,YAAa,CAAA,mBAAmB,CAAI,GAAA,mBAAA;AAAA,UACrC,CAAC,YAAA,CAAa,MAAM,CAAA,GAAI,CAAC,mBAAA;AAAA,SAC1B,CAAA;AAAA,QACD,KAAO,EAAA,SAAA;AAAA,QACP,QAAU,EAAA,oBAAA;AAAA,QACV,cAAc,EAAC;AAAA,QACf,YAAc,EAAA,mBAAA;AAAA,OAChB,CAAA;AAAA,sBACC,IAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,QACjD,QAAA,EAAA;AAAA,0BAAC,IAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAC,CAAA;AAAA,YAC5C,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,kBAAkB,CAAC,CAAA;AAAA,gBAAG,QAAA,EAAA,KAAA;AAAA,eAAG,CAAA;AAAA,8BAC3D,GAAA,CAAA,QAAA,EAAA;AAAA,gBACC,UACE,mBACI,GAAA,oBAAA,CAAqB,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAG,IAC/B,KAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA;AAAA,gBAEb,mBAAA;AAAA,gBACA,QAAU,EAAA,WAAA;AAAA,eACZ,CAAA;AAAA,8BACC,GAAA,CAAA,SAAA,EAAA;AAAA,gBACC,mBAAA;AAAA,gBACA,QAAA;AAAA,gBACA,SAAA;AAAA,gBACA,aAAA;AAAA,gBACA,WAAA;AAAA,eACF,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,0BACC,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,gBAAgB,CAAC,CAAA;AAAA,YACjD,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,cAAO,aAAY,EAAA,cAAA;AAAA,cAAe,OAAQ,EAAA,KAAA;AAAA,cAAM,OAAS,EAAA,OAAA;AAAA,cAAS,QAAA,EAAA,OAAA;AAAA,aAEnE,CAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "
|
|
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
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=FileDropZone.css.js.map
|
|
@@ -1,27 +1,22 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { makePrefixer,
|
|
3
|
-
import { ErrorIcon, UploadIcon } from '@salt-ds/icons';
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { makePrefixer, useForkRef } from '@salt-ds/core';
|
|
4
3
|
import { clsx } from 'clsx';
|
|
5
|
-
import { forwardRef, useState, useRef
|
|
6
|
-
import { containsFiles, extractFiles
|
|
4
|
+
import { forwardRef, useState, useRef } from 'react';
|
|
5
|
+
import { containsFiles, extractFiles } from './internal/utils.js';
|
|
7
6
|
import { useWindow } from '@salt-ds/window';
|
|
8
7
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
9
8
|
import css_248z from './FileDropZone.css.js';
|
|
10
9
|
|
|
11
|
-
const buttonLabel = "Browse files";
|
|
12
|
-
const INVALID_DROP_TARGET = "Drop target doesn't contain any file.";
|
|
13
10
|
const withBaseName = makePrefixer("saltFileDropZone");
|
|
14
11
|
const FileDropZone = forwardRef(
|
|
15
12
|
function FileDropZone2({
|
|
16
|
-
|
|
13
|
+
status,
|
|
17
14
|
className,
|
|
18
15
|
children,
|
|
19
|
-
description,
|
|
20
16
|
disabled,
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
onFilesRejected,
|
|
17
|
+
onDragOver,
|
|
18
|
+
onDragLeave,
|
|
19
|
+
onDrop,
|
|
25
20
|
...restProps
|
|
26
21
|
}, ref) {
|
|
27
22
|
const targetWindow = useWindow();
|
|
@@ -30,158 +25,63 @@ const FileDropZone = forwardRef(
|
|
|
30
25
|
css: css_248z,
|
|
31
26
|
window: targetWindow
|
|
32
27
|
});
|
|
33
|
-
const id = useId(idProp);
|
|
34
|
-
const iconId = `${id}-icon`;
|
|
35
|
-
const buttonId = `${id}-button`;
|
|
36
|
-
const descriptionId = `${id}-description`;
|
|
37
|
-
const [dropResult, setDropResult] = useState(null);
|
|
38
28
|
const [isActive, setActive] = useState(false);
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
-
const fileInputRef = useRef(null);
|
|
42
|
-
useEffect(() => {
|
|
43
|
-
if (!disabled && dropResult) {
|
|
44
|
-
const { event, files, errors } = dropResult;
|
|
45
|
-
if (errors && errors.length !== 0) {
|
|
46
|
-
setRejected(true);
|
|
47
|
-
if (!!onFilesRejected) {
|
|
48
|
-
return onFilesRejected(errors, event);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
setRejected(false);
|
|
52
|
-
return onFilesAccepted == null ? void 0 : onFilesAccepted(files, event);
|
|
53
|
-
}
|
|
54
|
-
}, [disabled, dropResult, onFilesAccepted, onFilesRejected]);
|
|
29
|
+
const regionRef = useRef(null);
|
|
30
|
+
const handleRef = useForkRef(ref, regionRef);
|
|
55
31
|
const handleDragOver = (event) => {
|
|
56
32
|
event.preventDefault();
|
|
57
33
|
event.stopPropagation();
|
|
58
34
|
if (disabled) {
|
|
59
|
-
|
|
35
|
+
if (event.dataTransfer) {
|
|
36
|
+
event.dataTransfer.dropEffect = "none";
|
|
37
|
+
}
|
|
60
38
|
return;
|
|
61
|
-
}
|
|
62
|
-
|
|
39
|
+
}
|
|
40
|
+
if (event.dataTransfer) {
|
|
41
|
+
event.dataTransfer.dropEffect = "copy";
|
|
63
42
|
}
|
|
64
43
|
if (!isActive && containsFiles(event)) {
|
|
65
44
|
setActive(true);
|
|
66
45
|
}
|
|
46
|
+
onDragOver == null ? void 0 : onDragOver(event);
|
|
67
47
|
};
|
|
68
|
-
const handleDragLeave = () =>
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
return setDropResult({
|
|
72
|
-
event,
|
|
73
|
-
errors: [INVALID_DROP_TARGET]
|
|
74
|
-
});
|
|
48
|
+
const handleDragLeave = (event) => {
|
|
49
|
+
if (disabled) {
|
|
50
|
+
return;
|
|
75
51
|
}
|
|
76
|
-
const
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
files,
|
|
81
|
-
errors: validate ? validateFiles({ files, validate }) : []
|
|
82
|
-
});
|
|
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);
|
|
83
56
|
}
|
|
57
|
+
onDragLeave == null ? void 0 : onDragLeave(event);
|
|
84
58
|
};
|
|
85
59
|
const handleDrop = (event) => {
|
|
60
|
+
if (disabled) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
86
63
|
event.preventDefault();
|
|
87
|
-
event
|
|
88
|
-
handleFilesDrop(event);
|
|
64
|
+
const files = extractFiles(event);
|
|
89
65
|
setActive(false);
|
|
66
|
+
onDrop == null ? void 0 : onDrop(event, files);
|
|
90
67
|
};
|
|
91
|
-
|
|
92
|
-
event.stopPropagation();
|
|
93
|
-
handleFilesDrop(event);
|
|
94
|
-
};
|
|
95
|
-
const handleInputFocus = useCallback(
|
|
96
|
-
(event) => {
|
|
97
|
-
event.stopPropagation();
|
|
98
|
-
buttonRef.current && buttonRef.current.focus();
|
|
99
|
-
},
|
|
100
|
-
[]
|
|
101
|
-
);
|
|
102
|
-
const handleInputClick = useCallback(
|
|
103
|
-
(event) => {
|
|
104
|
-
event.stopPropagation();
|
|
105
|
-
fileInputRef.current && fileInputRef.current.click();
|
|
106
|
-
},
|
|
107
|
-
[]
|
|
108
|
-
);
|
|
109
|
-
const handleKeyDown = useCallback(
|
|
110
|
-
(event) => {
|
|
111
|
-
if (["Enter", "Space"].indexOf(event.key) !== -1) {
|
|
112
|
-
fileInputRef.current && fileInputRef.current.click();
|
|
113
|
-
}
|
|
114
|
-
},
|
|
115
|
-
[]
|
|
116
|
-
);
|
|
117
|
-
const fileDropZoneDescription = description ? /* @__PURE__ */ jsx("div", {
|
|
118
|
-
className: "saltFileDropZone-description",
|
|
119
|
-
id: descriptionId,
|
|
120
|
-
children: description
|
|
121
|
-
}) : null;
|
|
122
|
-
const buttonLabelledBy = (isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]).join(" ");
|
|
123
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
124
|
-
...restProps,
|
|
68
|
+
return /* @__PURE__ */ jsx("div", {
|
|
125
69
|
className: clsx(
|
|
126
70
|
withBaseName(),
|
|
127
71
|
{
|
|
128
|
-
[withBaseName(
|
|
72
|
+
[withBaseName(status)]: status,
|
|
129
73
|
[withBaseName("active")]: isActive,
|
|
130
74
|
[withBaseName("disabled")]: disabled
|
|
131
75
|
},
|
|
132
76
|
className
|
|
133
77
|
),
|
|
78
|
+
"aria-disabled": disabled,
|
|
134
79
|
onDragLeave: handleDragLeave,
|
|
135
80
|
onDragOver: handleDragOver,
|
|
136
81
|
onDrop: handleDrop,
|
|
137
|
-
ref,
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
"aria-live": "polite",
|
|
141
|
-
children: [
|
|
142
|
-
isRejected ? /* @__PURE__ */ jsx(ErrorIcon, {
|
|
143
|
-
"aria-label": "error!",
|
|
144
|
-
className: withBaseName("icon"),
|
|
145
|
-
size: 2
|
|
146
|
-
}) : /* @__PURE__ */ jsx(UploadIcon, {
|
|
147
|
-
className: withBaseName("icon"),
|
|
148
|
-
size: 2
|
|
149
|
-
}),
|
|
150
|
-
isRejected && fileDropZoneDescription
|
|
151
|
-
]
|
|
152
|
-
}),
|
|
153
|
-
/* @__PURE__ */ jsx("div", {
|
|
154
|
-
className: withBaseName("title"),
|
|
155
|
-
children: children || "Drop files here or"
|
|
156
|
-
}),
|
|
157
|
-
/* @__PURE__ */ jsxs("label", {
|
|
158
|
-
className: withBaseName("inputRoot"),
|
|
159
|
-
children: [
|
|
160
|
-
/* @__PURE__ */ jsx(Button, {
|
|
161
|
-
"aria-labelledby": buttonLabelledBy,
|
|
162
|
-
ref: buttonRef,
|
|
163
|
-
className: withBaseName("inputButton"),
|
|
164
|
-
"data-testid": "file-input-button",
|
|
165
|
-
disabled,
|
|
166
|
-
onKeyDown: handleKeyDown,
|
|
167
|
-
onClick: handleInputClick,
|
|
168
|
-
children: buttonLabel.toUpperCase()
|
|
169
|
-
}),
|
|
170
|
-
/* @__PURE__ */ jsx("input", {
|
|
171
|
-
accept,
|
|
172
|
-
className: "input-hidden",
|
|
173
|
-
"data-testid": "file-input",
|
|
174
|
-
disabled,
|
|
175
|
-
multiple: true,
|
|
176
|
-
onChange: handleInputChange,
|
|
177
|
-
onFocus: handleInputFocus,
|
|
178
|
-
ref: fileInputRef,
|
|
179
|
-
type: "file"
|
|
180
|
-
})
|
|
181
|
-
]
|
|
182
|
-
}),
|
|
183
|
-
!isRejected && fileDropZoneDescription
|
|
184
|
-
]
|
|
82
|
+
ref: handleRef,
|
|
83
|
+
...restProps,
|
|
84
|
+
children
|
|
185
85
|
});
|
|
186
86
|
}
|
|
187
87
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { ErrorIcon, UploadIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n DragEvent,\n DragEventHandler,\n FocusEvent,\n forwardRef,\n HTMLAttributes,\n KeyboardEvent,\n ReactNode,\n SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { containsFiles, extractFiles, validateFiles } from \"./internal/utils\";\nimport { FilesValidator } from \"./validators\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport fileDropZoneCss from \"./FileDropZone.css\";\n\n// Recommended button label by ADA review\nconst buttonLabel = \"Browse files\";\nconst INVALID_DROP_TARGET = \"Drop target doesn't contain any file.\";\n\nexport type FilesAcceptedEventHandler = (\n files: ReadonlyArray<File>,\n event: SyntheticEvent\n) => void;\n\nexport type FilesRejectedEventHandler<ErrorType = string> = (\n errors: ReadonlyArray<ErrorType>,\n event: SyntheticEvent\n) => void;\n\n/**\n * Removed deprecated props\n *\n * - onDrop\n * - onFileTypeError\n * - showUploadButton\n */\n\nexport interface FileDropZoneProps extends HTMLAttributes<HTMLDivElement> {\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 /**\n * The text content of the drop area component.\n */\n children?: ReactNode;\n\n /**\n * Additional usage information.\n */\n description?: string;\n\n /**\n * If `true`, the file drop zone will be disabled.\n */\n disabled?: boolean;\n\n /**\n * This prop is used to help implement the accessibility logic.\n * If you don't provide this prop. It falls back to a randomly generated id.\n */\n id?: string;\n\n /**\n * Callback on successful file drop or selection.\n */\n onFilesAccepted?: FilesAcceptedEventHandler;\n\n /**\n * @see `validate` prop\n * Callback on drop or input in case of an error. A list of errors will be provided as input.\n */\n onFilesRejected?: FilesRejectedEventHandler;\n\n /**\n * A list of custom validation functions. Every function is provided with the entire file list as input\n * thus can perform validations on all files. Each function needs to return one or more errors in case of\n * a failed validation, or `undefined` in case of a successful one.\n *\n * All errors are collected in the end and returned as an array to `onFilesRejected`.\n */\n validate?: ReadonlyArray<FilesValidator<any>>;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n function FileDropZone(\n {\n accept,\n className,\n children,\n description,\n disabled,\n id: idProp,\n validate,\n onFilesAccepted,\n onFilesRejected,\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\n const id = useId(idProp);\n\n const iconId = `${id}-icon`;\n const buttonId = `${id}-button`;\n const descriptionId = `${id}-description`;\n\n const [dropResult, setDropResult] = useState<null | {\n event: SyntheticEvent;\n files?: ReadonlyArray<File>;\n errors: string[];\n }>(null);\n const [isActive, setActive] = useState(false);\n const [isRejected, setRejected] = useState(false);\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!disabled && dropResult) {\n const { event, files, errors } = dropResult;\n\n if (errors && errors.length !== 0) {\n setRejected(true);\n if (!!onFilesRejected) {\n return onFilesRejected(errors, event);\n }\n }\n\n setRejected(false);\n return onFilesAccepted?.(files!, event);\n }\n }, [disabled, dropResult, onFilesAccepted, onFilesRejected]);\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 event.preventDefault();\n event.stopPropagation();\n\n if (disabled) {\n event.dataTransfer && (event.dataTransfer.dropEffect = \"none\");\n return;\n } else {\n // Not using 'move', otherwise apps like Outlook will delete the item\n event.dataTransfer && (event.dataTransfer.dropEffect = \"copy\");\n }\n\n if (!isActive && containsFiles(event)) {\n setActive(true);\n }\n };\n\n const handleDragLeave = () => setActive(false);\n\n const handleFilesDrop = (event: SyntheticEvent) => {\n if (!containsFiles(event as DragEvent)) {\n return setDropResult({\n event,\n errors: [INVALID_DROP_TARGET],\n });\n }\n\n const files = extractFiles(event as DragEvent);\n\n if (files.length > 0) {\n return setDropResult({\n event,\n files,\n errors: validate ? validateFiles({ files, validate }) : [],\n });\n }\n };\n\n const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleFilesDrop(event);\n setActive(false);\n };\n\n const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n event.stopPropagation();\n\n handleFilesDrop(event);\n };\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 handleInputFocus = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n buttonRef.current && buttonRef.current.focus();\n },\n []\n );\n\n const handleInputClick = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n fileInputRef.current && fileInputRef.current.click();\n },\n []\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n if ([\"Enter\", \"Space\"].indexOf(event.key) !== -1) {\n fileInputRef.current && fileInputRef.current.click();\n }\n },\n []\n );\n\n const fileDropZoneDescription = description ? (\n <div className=\"saltFileDropZone-description\" id={descriptionId}>\n {description}\n </div>\n ) : null;\n\n const buttonLabelledBy = (\n isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]\n ).join(\" \");\n\n return (\n <div\n {...restProps}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"error\")]: isRejected,\n [withBaseName(\"active\")]: isActive,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n ref={ref}\n >\n {/* TODO: Check whether we want to replace this with aria announce */}\n <div aria-live=\"polite\">\n {/*\n * It is an ADA requirement to always display an input button.-\n */}\n {isRejected ? (\n <ErrorIcon\n aria-label=\"error!\"\n className={withBaseName(\"icon\")}\n size={2}\n />\n ) : (\n <UploadIcon className={withBaseName(\"icon\")} size={2} />\n )}\n {isRejected && fileDropZoneDescription}\n </div>\n <div className={withBaseName(\"title\")}>\n {children || \"Drop files here or\"}\n </div>\n <label className={withBaseName(\"inputRoot\")}>\n <Button\n aria-labelledby={buttonLabelledBy}\n ref={buttonRef}\n className={withBaseName(\"inputButton\")}\n data-testid=\"file-input-button\"\n disabled={disabled}\n onKeyDown={handleKeyDown}\n onClick={handleInputClick}\n >\n {/* TODO: expose this in props */}\n {buttonLabel.toUpperCase()}\n </Button>\n <input\n accept={accept}\n className=\"input-hidden\"\n data-testid=\"file-input\"\n disabled={disabled}\n multiple\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n ref={fileInputRef}\n type=\"file\"\n />\n </label>\n {!isRejected && fileDropZoneDescription}\n </div>\n );\n }\n);\n"],"names":["FileDropZone","fileDropZoneCss"],"mappings":"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"}
|
|
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":";;;;;;;;;AAiCA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aACP,CAAA;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,MAAM,CAAC,QAAA,EAAU,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAE5C,IAAM,MAAA,SAAA,GAAY,OAAuB,IAAI,CAAA,CAAA;AAC7C,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,SAAS,CAAA,CAAA;AAE3C,IAAM,MAAA,cAAA,GAAmD,CAAC,KAAU,KAAA;AAIlE,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,IAAI,MAAM,YAAc,EAAA;AACtB,UAAA,KAAA,CAAM,aAAa,UAAa,GAAA,MAAA,CAAA;AAAA,SAClC;AACA,QAAA,OAAA;AAAA,OACF;AACA,MAAA,IAAI,MAAM,YAAc,EAAA;AACtB,QAAA,KAAA,CAAM,aAAa,UAAa,GAAA,MAAA,CAAA;AAAA,OAClC;AACA,MAAA,IAAI,CAAC,QAAA,IAAY,aAAc,CAAA,KAAK,CAAG,EAAA;AACrC,QAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,OAChB;AACA,MAAa,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACf,CAAA;AAEA,IAAM,MAAA,eAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,OAAA;AAAA,OACF;AACA,MAAA,MAAM,SAAS,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,OAAA,CAAA;AAC1B,MAAA,MAAM,cAAc,KAAM,CAAA,aAAA,CAAA;AAC1B,MAAA,IAAI,WAAgB,KAAA,MAAA,IAAU,EAAC,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAQ,SAAS,WAAsB,CAAA,CAAA,EAAA;AACpE,QAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,OACjB;AACA,MAAc,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KAChB,CAAA;AAEA,IAAM,MAAA,UAAA,GAA+C,CAAC,KAAU,KAAA;AAC9D,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,OAAA;AAAA,OACF;AACA,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAM,MAAA,KAAA,GAAQ,aAAa,KAAK,CAAA,CAAA;AAChC,MAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AACf,MAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAS,KAAO,EAAA,KAAA,CAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,MAAgB,CAAI,GAAA,MAAA;AAAA,UAClC,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,QAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,eAAe,EAAA,QAAA;AAAA,MACf,WAAa,EAAA,eAAA;AAAA,MACb,UAAY,EAAA,cAAA;AAAA,MACZ,MAAQ,EAAA,UAAA;AAAA,MACR,GAAK,EAAA,SAAA;AAAA,MACJ,GAAG,SAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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;;;;"}
|
|
@@ -0,0 +1,48 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
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,8 +1,7 @@
|
|
|
1
|
-
const toArray = (obj) => Object.keys(obj).map((key) => obj[key]);
|
|
2
1
|
const containsFiles = (e) => {
|
|
3
2
|
if (!e.dataTransfer) {
|
|
4
3
|
const target = e.target;
|
|
5
|
-
return target
|
|
4
|
+
return target == null ? void 0 : target.files;
|
|
6
5
|
}
|
|
7
6
|
return Array.prototype.some.call(
|
|
8
7
|
e.dataTransfer.types,
|
|
@@ -10,23 +9,17 @@ const containsFiles = (e) => {
|
|
|
10
9
|
);
|
|
11
10
|
};
|
|
12
11
|
const extractFiles = (e) => {
|
|
12
|
+
var _a;
|
|
13
13
|
if (containsFiles(e)) {
|
|
14
14
|
if (e.dataTransfer) {
|
|
15
|
-
return
|
|
15
|
+
return Array.from(e.dataTransfer.files);
|
|
16
16
|
}
|
|
17
17
|
if (e.target) {
|
|
18
|
-
return
|
|
18
|
+
return Array.from((_a = e.target.files) != null ? _a : []);
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
return [];
|
|
22
22
|
};
|
|
23
|
-
const validateFiles = ({
|
|
24
|
-
files = [],
|
|
25
|
-
validate = []
|
|
26
|
-
}) => validate.reduce(
|
|
27
|
-
(result, validator) => result.concat(validator(files)),
|
|
28
|
-
[]
|
|
29
|
-
).filter(Boolean);
|
|
30
23
|
|
|
31
|
-
export { containsFiles, extractFiles
|
|
24
|
+
export { containsFiles, extractFiles };
|
|
32
25
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/file-drop-zone/internal/utils.ts"],"sourcesContent":["import { DragEvent } from \"react\";\
|
|
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;;;;"}
|
package/dist-es/index.js
CHANGED
|
@@ -72,7 +72,8 @@ export { useDropdownBase } from './dropdown/useDropdownBase.js';
|
|
|
72
72
|
export { DropdownNext } from './dropdown-next/DropdownNext.js';
|
|
73
73
|
export { EditableLabel } from './editable-label/EditableLabel.js';
|
|
74
74
|
export { FileDropZone } from './file-drop-zone/FileDropZone.js';
|
|
75
|
-
export {
|
|
75
|
+
export { FileDropZoneIcon } from './file-drop-zone/FileDropZoneIcon.js';
|
|
76
|
+
export { FileDropZoneTrigger } from './file-drop-zone/FileDropZoneTrigger.js';
|
|
76
77
|
export { FormFieldLegacy as FormField } from './form-field-legacy/FormFieldLegacy.js';
|
|
77
78
|
export { FormLabel } from './form-field-legacy/FormLabel.js';
|
|
78
79
|
export { FormFieldLegacyContext } from './form-field-context-legacy/FormFieldLegacyContext.js';
|
package/dist-es/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|