@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.11

package/cjs/core/Fieldset/Fieldset.js

@@ -1,39 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Fieldset = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
-const classnames_1 = __importDefault(require("classnames"));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
 /**
  * Fieldset component to group several inputs, controls and labels within a form.
  * @example
@@ -46,13 +21,24 @@ const classnames_1 = __importDefault(require("classnames"));
  * </Fieldset>
  */
 exports.Fieldset = React.forwardRef((props, ref) => {
-    const { children, className, disabled, legend, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { as: 'fieldset', className: (0, classnames_1.default)('iui-fieldset', className), disabled: disabled, ref: ref, ...rest },
-        legend && React.createElement("legend", null, legend),
-        disabled
-            ? React.Children.map(children, (child) => React.isValidElement(child)
-                ? React.cloneElement(child, { disabled: true })
-                : child)
-            : children));
+  const { children, className, disabled, legend, ...rest } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: 'fieldset',
+      className: (0, classnames_1.default)('iui-fieldset', className),
+      disabled: disabled,
+      ref: ref,
+      ...rest,
+    },
+    legend && React.createElement('legend', null, legend),
+    disabled
+      ? React.Children.map(children, (child) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child, { disabled: true })
+            : child,
+        )
+      : children,
+  );
 });
 exports.default = exports.Fieldset;

package/cjs/core/FileUpload/FileEmptyCard.js

@@ -1,57 +1,58 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.FileEmptyCard = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
-const classnames_1 = __importDefault(require("classnames"));
-const FileUploadCard_js_1 = __importDefault(require("./FileUploadCard.js"));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const FileUploadCard_js_1 = tslib_1.__importDefault(
+  require('./FileUploadCard.js'),
+);
 // ----------------------------------------------------------------------------
 // FileEmptyCard.Icon component
-const FileEmptyCardIcon = index_js_1.polymorphic.span('iui-file-card-empty-icon', {
+const FileEmptyCardIcon = index_js_1.polymorphic.span(
+  'iui-file-card-empty-icon',
+  {
     children: React.createElement(index_js_1.SvgUpload, null),
-});
+  },
+);
 // ----------------------------------------------------------------------------
 // FileEmptyCard.Text component
-const FileEmptyCardText = index_js_1.polymorphic.span('iui-file-card-empty-action');
+const FileEmptyCardText = index_js_1.polymorphic.span(
+  'iui-file-card-empty-action',
+);
 // ----------------------------------------------------------------------------
 // FileEmptyCard component
 const FileEmptyCardComponent = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-card-empty', className), ref: ref, ...rest }, children !== null && children !== void 0 ? children : (React.createElement(React.Fragment, null,
+  const { children, className, ...rest } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)('iui-file-card-empty', className),
+      ref: ref,
+      ...rest,
+    },
+    children ??
+      React.createElement(
+        React.Fragment,
+        null,
         React.createElement(exports.FileEmptyCard.Icon, null),
-        React.createElement(exports.FileEmptyCard.Text, null,
-            React.createElement(FileUploadCard_js_1.default.InputLabel, null, "Choose a file"),
-            React.createElement("div", null, "to upload."))))));
+        React.createElement(
+          exports.FileEmptyCard.Text,
+          null,
+          React.createElement(
+            FileUploadCard_js_1.default.InputLabel,
+            null,
+            'Choose a file',
+          ),
+          React.createElement('div', null, 'to upload.'),
+        ),
+      ),
+  );
 });
 /**
  * Empty file card to be used with the `FileUploadCard` component when no file has been uploaded.
@@ -70,7 +71,7 @@ const FileEmptyCardComponent = React.forwardRef((props, ref) => {
  * </FileEmptyCard>
  */
 exports.FileEmptyCard = Object.assign(FileEmptyCardComponent, {
-    Icon: FileEmptyCardIcon,
-    Text: FileEmptyCardText,
+  Icon: FileEmptyCardIcon,
+  Text: FileEmptyCardText,
 });
 exports.default = exports.FileEmptyCard;

package/cjs/core/FileUpload/FileUpload.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type FileUploadProps = {
+type FileUploadProps = {
     /**
      * Content shown over `children` when file is being dragged onto the component.
      * Should always be used when drag content differs from `children` being wrapped.
-     * Can be skipped if wrapping `FileUploadTemplate`.
      */
     dragContent?: React.ReactNode;
     /**
@@ -13,15 +12,19 @@ declare type FileUploadProps = {
     onFileDropped: (files: FileList) => void;
     /**
      * Component to wrap `FileUpload` around.
-     * Either pass `FileUploadTemplate` (for default state) or a different component to wrap.
+     * Either pass `FileUploadCard` (for default state) or a different component to wrap.
      */
     children: React.ReactNode;
+    /**
+     *  Allows for custom prop to be passed for content.
+     */
+    contentProps?: React.ComponentProps<'div'>;
 };
 /**
- * File upload component to be wrapped around `FileUploadTemplate` or any arbitrary component.
+ * File upload component to be wrapped around `FileUploadCard` or any arbitrary component.
  * Provides support for dragging and dropping multiple files.
  * @example
- * <FileUpload onFileDropped={console.log}><FileUploadTemplate /></FileUpload>
+ * <FileUpload onFileDropped={console.log}><FileUploadCard /></FileUpload>
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
 export declare const FileUpload: PolymorphicForwardRefComponent<"div", FileUploadProps>;

package/cjs/core/FileUpload/FileUpload.js

@@ -1,85 +1,103 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.FileUpload = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
 /**
- * File upload component to be wrapped around `FileUploadTemplate` or any arbitrary component.
+ * File upload component to be wrapped around `FileUploadCard` or any arbitrary component.
  * Provides support for dragging and dropping multiple files.
  * @example
- * <FileUpload onFileDropped={console.log}><FileUploadTemplate /></FileUpload>
+ * <FileUpload onFileDropped={console.log}><FileUploadCard /></FileUpload>
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
 exports.FileUpload = React.forwardRef((props, ref) => {
-    const { dragContent, children, onFileDropped, className, ...rest } = props;
-    const [isDragActive, setIsDragActive] = React.useState(false);
-    const fileUploadRef = React.useRef(null);
-    const refs = (0, index_js_1.useMergedRefs)(fileUploadRef, ref);
-    const onDragOverHandler = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-    };
-    const onDragEnterHandler = (e) => {
-        var _a, _b, _c;
-        e.preventDefault();
-        e.stopPropagation();
-        // only set active if a file is dragged over
-        if (!isDragActive && ((_c = (_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.kind) === 'file') {
-            setIsDragActive(true);
-        }
-    };
-    const onDragLeaveHandler = (e) => {
-        var _a;
-        e.preventDefault();
-        e.stopPropagation();
-        // only set inactive if secondary target is outside the component
-        if (isDragActive &&
-            !((_a = fileUploadRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
-            setIsDragActive(false);
-        }
-    };
-    const onDropHandler = (e) => {
-        var _a;
-        e.preventDefault();
-        e.stopPropagation();
-        if (isDragActive) {
-            setIsDragActive(false);
-            onFileDropped((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files);
-        }
-    };
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-file-upload', { 'iui-drag': isDragActive }, className), onDragEnter: onDragEnterHandler, onDragOver: onDragOverHandler, onDragLeave: onDragLeaveHandler, onDrop: onDropHandler, ref: refs, ...rest },
-        dragContent ? children : React.createElement(index_js_1.Box, { className: 'iui-content' }, children),
-        dragContent && React.createElement(index_js_1.Box, { className: 'iui-content' }, dragContent)));
+  const {
+    dragContent,
+    children,
+    onFileDropped,
+    className,
+    contentProps,
+    ...rest
+  } = props;
+  const [isDragActive, setIsDragActive] = React.useState(false);
+  const fileUploadRef = React.useRef(null);
+  const refs = (0, index_js_1.useMergedRefs)(fileUploadRef, ref);
+  const onDragOverHandler = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const onDragEnterHandler = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // only set active if a file is dragged over
+    if (!isDragActive && e.dataTransfer?.items?.[0]?.kind === 'file') {
+      setIsDragActive(true);
+    }
+  };
+  const onDragLeaveHandler = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // only set inactive if secondary target is outside the component
+    if (isDragActive && !fileUploadRef.current?.contains(e.relatedTarget)) {
+      setIsDragActive(false);
+    }
+  };
+  const onDropHandler = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isDragActive) {
+      setIsDragActive(false);
+      onFileDropped(e.dataTransfer?.files);
+    }
+  };
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-file-upload',
+        { 'iui-drag': isDragActive },
+        className,
+      ),
+      onDragEnter: onDragEnterHandler,
+      onDragOver: onDragOverHandler,
+      onDragLeave: onDragLeaveHandler,
+      onDrop: onDropHandler,
+      ref: refs,
+      ...rest,
+    },
+    dragContent
+      ? children
+      : React.createElement(
+          index_js_1.Box,
+          {
+            as: 'div',
+            ...contentProps,
+            className: (0, classnames_1.default)(
+              'iui-content',
+              contentProps?.className,
+            ),
+          },
+          children,
+        ),
+    dragContent &&
+      React.createElement(
+        index_js_1.Box,
+        {
+          as: 'div',
+          ...contentProps,
+          className: (0, classnames_1.default)(
+            'iui-content',
+            contentProps?.className,
+          ),
+        },
+        dragContent,
+      ),
+  );
 });
 exports.default = exports.FileUpload;

package/cjs/core/FileUpload/FileUploadCard.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type FileUploadCardProps = {
+type FileUploadCardProps = {
     /**
      * Files to pass (only needed when passing a custom action)
      */