@salt-ds/lab 1.0.0-alpha.23 → 1.0.0-alpha.25

package/dist-es/tabs-next/TabstripNext.css.js

@@ -1,4 +1,4 @@
-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  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\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::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";
+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";
 
 export { css_248z as default };
 //# sourceMappingURL=TabstripNext.css.js.map

package/dist-types/file-drop-zone/FileDropZone.d.ts

@@ -1,54 +1,17 @@
-import { HTMLAttributes, ReactNode, SyntheticEvent } from "react";
-import { FilesValidator } from "./validators";
-export declare type FilesAcceptedEventHandler = (files: ReadonlyArray<File>, event: SyntheticEvent) => void;
-export declare type FilesRejectedEventHandler<ErrorType = string> = (errors: ReadonlyArray<ErrorType>, event: SyntheticEvent) => void;
-/**
- * Removed deprecated props
- *
- * - onDrop
- * - onFileTypeError
- * - showUploadButton
- */
-export interface FileDropZoneProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * `accept` attribute for HTML <input>.
-     *
-     * A comma separated list of file types the user can pick from the file input dialog box.
-     */
-    accept?: string;
-    /**
-     * The text content of the drop area component.
-     */
-    children?: ReactNode;
-    /**
-     * Additional usage information.
-     */
-    description?: string;
+import { ValidationStatus } from "@salt-ds/core";
+import { DragEvent, ComponentPropsWithoutRef } from "react";
+export interface FileDropZoneProps extends Omit<ComponentPropsWithoutRef<"div">, "onDrop"> {
     /**
      * If `true`, the file drop zone will be disabled.
      */
     disabled?: boolean;
     /**
-     * This prop is used to help implement the accessibility logic.
-     * If you don't provide this prop. It falls back to a randomly generated id.
-     */
-    id?: string;
-    /**
-     * Callback on successful file drop or selection.
-     */
-    onFilesAccepted?: FilesAcceptedEventHandler;
-    /**
-     * @see `validate` prop
-     * Callback on drop or input in case of an error. A list of errors will be provided as input.
+     * Status indicator to be displayed.
      */
-    onFilesRejected?: FilesRejectedEventHandler;
+    status?: Omit<ValidationStatus, "info" | "warning">;
     /**
-     * A list of custom validation functions. Every function is provided with the entire file list as input
-     * thus can perform validations on all files. Each function needs to return one or more errors in case of
-     * a failed validation, or `undefined` in case of a successful one.
-     *
-     * All errors are collected in the end and returned as an array to `onFilesRejected`.
+     * Callback for on drop event
      */
-    validate?: ReadonlyArray<FilesValidator<any>>;
+    onDrop?: (event: DragEvent<HTMLDivElement>, files: File[]) => void;
 }
 export declare const FileDropZone: import("react").ForwardRefExoticComponent<FileDropZoneProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/file-drop-zone/FileDropZoneIcon.d.ts

@@ -0,0 +1,9 @@
+import { ValidationStatus } from "@salt-ds/core";
+import { IconProps } from "@salt-ds/icons";
+export interface FileDropZoneIconProps extends IconProps {
+    /**
+     * Status indicator to be displayed.
+     */
+    status?: ValidationStatus;
+}
+export declare const FileDropZoneIcon: import("react").ForwardRefExoticComponent<FileDropZoneIconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist-types/file-drop-zone/FileDropZoneTrigger.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, SyntheticEvent } from "react";
+export interface FileDropZoneTriggerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /**
+     * `accept` attribute for HTML <input>.
+     *
+     * A comma separated list of file types the user can pick from the file input dialog box.
+     */
+    accept?: string;
+    /**
+     * Disable all trigger elements.
+     */
+    disabled?: boolean;
+    /**
+     * Allows multiple files to be uploaded.
+     */
+    multiple?: boolean;
+    /**
+     * Callback for input change event
+     */
+    onChange?: (event: SyntheticEvent<HTMLInputElement>, files: File[]) => void;
+}
+export declare const FileDropZoneTrigger: import("react").ForwardRefExoticComponent<FileDropZoneTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/file-drop-zone/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./FileDropZone";
-export * from "./validators";
+export * from "./FileDropZoneIcon";
+export * from "./FileDropZoneTrigger";

package/dist-types/file-drop-zone/internal/utils.d.ts

@@ -1,9 +1,3 @@
 import { DragEvent } from "react";
-import { FilesValidator } from "../validators";
-export declare const toArray: (obj: any) => any[];
 export declare const containsFiles: (e: DragEvent) => boolean | FileList | null;
 export declare const extractFiles: (e: DragEvent) => File[];
-export declare const validateFiles: ({ files, validate, }: {
-    files: ReadonlyArray<File>;
-    validate: ReadonlyArray<FilesValidator>;
-}) => string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.23",
+  "version": "1.0.0-alpha.25",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -26,10 +26,10 @@
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
     "tinycolor2": "^1.4.2",
-    "@salt-ds/core": "^1.13.1",
+    "@salt-ds/core": "^1.13.3",
     "@salt-ds/window": "^0.1.1",
-    "@salt-ds/styles": "^0.2.0",
-    "@salt-ds/icons": "^1.8.0"
+    "@salt-ds/styles": "^0.2.1",
+    "@salt-ds/icons": "^1.9.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0",

package/dist-cjs/file-drop-zone/validators.js

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var accepts = require('attr-accept');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var accepts__default = /*#__PURE__*/_interopDefaultLegacy(accepts);
-
-function createFileTypeValidator({
-  accept,
-  getError
-}) {
-  return (files) => {
-    const validate = (file) => {
-      if (!accepts__default["default"](file, accept)) {
-        return getError ? getError(file) : `File ${file.name} does not have an accepted type.`;
-      }
-    };
-    return files.map(validate);
-  };
-}
-function createTotalSizeValidator({
-  maxSize,
-  getError
-}) {
-  return (files) => {
-    const totalSize = files.reduce((size, file) => size + file.size, 0);
-    if (totalSize > maxSize) {
-      return getError ? getError(totalSize) : `The file/s exceed the maximum upload limit of ${maxSize} bytes.`;
-    }
-  };
-}
-
-exports.createFileTypeValidator = createFileTypeValidator;
-exports.createTotalSizeValidator = createTotalSizeValidator;
-//# sourceMappingURL=validators.js.map

package/dist-cjs/file-drop-zone/validators.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"validators.js","sources":["../src/file-drop-zone/validators.ts"],"sourcesContent":["// TODO: verify whether we still needs to this library\n// HTML5's `accept` should be ok for the browsers we want to support.\nimport accepts from \"attr-accept\";\n\nexport type FilesValidator<ErrorType = string> = (\n  files: ReadonlyArray<File>\n) =>\n  | ReadonlyArray<ErrorType | string | undefined>\n  | ErrorType\n  | string\n  | undefined;\n\n/**\n * Factory method for creating a common file type validator.\n *\n * @param {string} accept - It is the same as 'accept' attribute for HTML <input>.\n * @param {function} getError - A callback function for generating a customised user error.\n */\nexport function createFileTypeValidator<ErrorType = string>({\n  accept,\n  getError,\n}: {\n  accept: string;\n  getError?: (file: File) => ErrorType;\n}): FilesValidator<ErrorType> {\n  return (files) => {\n    const validate = (file: File) => {\n      if (!accepts(file, accept)) {\n        return getError\n          ? getError(file)\n          : `File ${file.name} does not have an accepted type.`;\n      }\n    };\n\n    return files.map(validate);\n  };\n}\n\n/**\n * Factory method for creating a common total selection size validator.\n *\n * @param {number} maxSize - Max selection size in bytes.\n * @param {function} getError - A callback function for generating a customised user error.\n */\nexport function createTotalSizeValidator<ErrorType = string>({\n  maxSize,\n  getError,\n}: {\n  maxSize: number;\n  getError?: (totalSize: number) => ErrorType;\n}): FilesValidator<ErrorType> {\n  return (files) => {\n    const totalSize = files.reduce((size, file) => size + file.size, 0);\n\n    if (totalSize > maxSize) {\n      return getError\n        ? getError(totalSize)\n        : `The file/s exceed the maximum upload limit of ${maxSize} bytes.`;\n    }\n  };\n}\n"],"names":["accepts"],"mappings":";;;;;;;;;;AAkBO,SAAS,uBAA4C,CAAA;AAAA,EAC1D,MAAA;AAAA,EACA,QAAA;AACF,CAG8B,EAAA;AAC5B,EAAA,OAAO,CAAC,KAAU,KAAA;AAChB,IAAM,MAAA,QAAA,GAAW,CAAC,IAAe,KAAA;AAC/B,MAAA,IAAI,CAACA,2BAAA,CAAQ,IAAM,EAAA,MAAM,CAAG,EAAA;AAC1B,QAAA,OAAO,QACH,GAAA,QAAA,CAAS,IAAI,CAAA,GACb,QAAQ,IAAK,CAAA,IAAA,CAAA,gCAAA,CAAA,CAAA;AAAA,OACnB;AAAA,KACF,CAAA;AAEA,IAAO,OAAA,KAAA,CAAM,IAAI,QAAQ,CAAA,CAAA;AAAA,GAC3B,CAAA;AACF,CAAA;AAQO,SAAS,wBAA6C,CAAA;AAAA,EAC3D,OAAA;AAAA,EACA,QAAA;AACF,CAG8B,EAAA;AAC5B,EAAA,OAAO,CAAC,KAAU,KAAA;AAChB,IAAM,MAAA,SAAA,GAAY,MAAM,MAAO,CAAA,CAAC,MAAM,IAAS,KAAA,IAAA,GAAO,IAAK,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAElE,IAAA,IAAI,YAAY,OAAS,EAAA;AACvB,MAAA,OAAO,QACH,GAAA,QAAA,CAAS,SAAS,CAAA,GAClB,CAAiD,8CAAA,EAAA,OAAA,CAAA,OAAA,CAAA,CAAA;AAAA,KACvD;AAAA,GACF,CAAA;AACF;;;;;"}

package/dist-es/file-drop-zone/validators.js

@@ -1,29 +0,0 @@
-import accepts from 'attr-accept';
-
-function createFileTypeValidator({
-  accept,
-  getError
-}) {
-  return (files) => {
-    const validate = (file) => {
-      if (!accepts(file, accept)) {
-        return getError ? getError(file) : `File ${file.name} does not have an accepted type.`;
-      }
-    };
-    return files.map(validate);
-  };
-}
-function createTotalSizeValidator({
-  maxSize,
-  getError
-}) {
-  return (files) => {
-    const totalSize = files.reduce((size, file) => size + file.size, 0);
-    if (totalSize > maxSize) {
-      return getError ? getError(totalSize) : `The file/s exceed the maximum upload limit of ${maxSize} bytes.`;
-    }
-  };
-}
-
-export { createFileTypeValidator, createTotalSizeValidator };
-//# sourceMappingURL=validators.js.map

package/dist-es/file-drop-zone/validators.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"validators.js","sources":["../src/file-drop-zone/validators.ts"],"sourcesContent":["// TODO: verify whether we still needs to this library\n// HTML5's `accept` should be ok for the browsers we want to support.\nimport accepts from \"attr-accept\";\n\nexport type FilesValidator<ErrorType = string> = (\n  files: ReadonlyArray<File>\n) =>\n  | ReadonlyArray<ErrorType | string | undefined>\n  | ErrorType\n  | string\n  | undefined;\n\n/**\n * Factory method for creating a common file type validator.\n *\n * @param {string} accept - It is the same as 'accept' attribute for HTML <input>.\n * @param {function} getError - A callback function for generating a customised user error.\n */\nexport function createFileTypeValidator<ErrorType = string>({\n  accept,\n  getError,\n}: {\n  accept: string;\n  getError?: (file: File) => ErrorType;\n}): FilesValidator<ErrorType> {\n  return (files) => {\n    const validate = (file: File) => {\n      if (!accepts(file, accept)) {\n        return getError\n          ? getError(file)\n          : `File ${file.name} does not have an accepted type.`;\n      }\n    };\n\n    return files.map(validate);\n  };\n}\n\n/**\n * Factory method for creating a common total selection size validator.\n *\n * @param {number} maxSize - Max selection size in bytes.\n * @param {function} getError - A callback function for generating a customised user error.\n */\nexport function createTotalSizeValidator<ErrorType = string>({\n  maxSize,\n  getError,\n}: {\n  maxSize: number;\n  getError?: (totalSize: number) => ErrorType;\n}): FilesValidator<ErrorType> {\n  return (files) => {\n    const totalSize = files.reduce((size, file) => size + file.size, 0);\n\n    if (totalSize > maxSize) {\n      return getError\n        ? getError(totalSize)\n        : `The file/s exceed the maximum upload limit of ${maxSize} bytes.`;\n    }\n  };\n}\n"],"names":[],"mappings":";;AAkBO,SAAS,uBAA4C,CAAA;AAAA,EAC1D,MAAA;AAAA,EACA,QAAA;AACF,CAG8B,EAAA;AAC5B,EAAA,OAAO,CAAC,KAAU,KAAA;AAChB,IAAM,MAAA,QAAA,GAAW,CAAC,IAAe,KAAA;AAC/B,MAAA,IAAI,CAAC,OAAA,CAAQ,IAAM,EAAA,MAAM,CAAG,EAAA;AAC1B,QAAA,OAAO,QACH,GAAA,QAAA,CAAS,IAAI,CAAA,GACb,QAAQ,IAAK,CAAA,IAAA,CAAA,gCAAA,CAAA,CAAA;AAAA,OACnB;AAAA,KACF,CAAA;AAEA,IAAO,OAAA,KAAA,CAAM,IAAI,QAAQ,CAAA,CAAA;AAAA,GAC3B,CAAA;AACF,CAAA;AAQO,SAAS,wBAA6C,CAAA;AAAA,EAC3D,OAAA;AAAA,EACA,QAAA;AACF,CAG8B,EAAA;AAC5B,EAAA,OAAO,CAAC,KAAU,KAAA;AAChB,IAAM,MAAA,SAAA,GAAY,MAAM,MAAO,CAAA,CAAC,MAAM,IAAS,KAAA,IAAA,GAAO,IAAK,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAElE,IAAA,IAAI,YAAY,OAAS,EAAA;AACvB,MAAA,OAAO,QACH,GAAA,QAAA,CAAS,SAAS,CAAA,GAClB,CAAiD,8CAAA,EAAA,OAAA,CAAA,OAAA,CAAA,CAAA;AAAA,KACvD;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-types/file-drop-zone/validators.d.ts

@@ -1,21 +0,0 @@
-export declare type FilesValidator<ErrorType = string> = (files: ReadonlyArray<File>) => ReadonlyArray<ErrorType | string | undefined> | ErrorType | string | undefined;
-/**
- * Factory method for creating a common file type validator.
- *
- * @param {string} accept - It is the same as 'accept' attribute for HTML <input>.
- * @param {function} getError - A callback function for generating a customised user error.
- */
-export declare function createFileTypeValidator<ErrorType = string>({ accept, getError, }: {
-    accept: string;
-    getError?: (file: File) => ErrorType;
-}): FilesValidator<ErrorType>;
-/**
- * Factory method for creating a common total selection size validator.
- *
- * @param {number} maxSize - Max selection size in bytes.
- * @param {function} getError - A callback function for generating a customised user error.
- */
-export declare function createTotalSizeValidator<ErrorType = string>({ maxSize, getError, }: {
-    maxSize: number;
-    getError?: (totalSize: number) => ErrorType;
-}): FilesValidator<ErrorType>;