@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-cjs/core/Stepper/StepperStep.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "StepperStep", {
+    enumerable: true,
+    get: function() {
+        return StepperStep;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _classnames = _interop_require_default._(require("classnames"));
+const _react = _interop_require_wildcard._(require("react"));
+const _Tooltip = require("../Tooltip/Tooltip.js");
+const _index = require("../../utils/index.js");
+const StepperStep = _react.forwardRef((props, forwardedRef)=>{
+    let { title, index, currentStepNumber, totalSteps, type, onClick, description, className, style, stepProps, trackContentProps, circleProps, nameProps, ...rest } = props;
+    let isPast = currentStepNumber > index;
+    let isActive = currentStepNumber === index;
+    let isClickable = isPast && !!onClick;
+    let onCompletedClick = ()=>{
+        if (isClickable) onClick?.(index);
+    };
+    let onKeyDown = (e)=>{
+        if (e.altKey) return;
+        if (!isClickable) return;
+        if ('Enter' === e.key || 'Space' === e.key || ' ' === e.key) onCompletedClick();
+    };
+    let stepShape = _react.createElement(_index.Box, {
+        as: "li",
+        ...stepProps,
+        className: (0, _classnames.default)('iui-stepper-step', {
+            'iui-current': isActive,
+            'iui-clickable': isClickable
+        }, className, stepProps?.className),
+        style: {
+            inlineSize: 'default' === type ? `${100 / totalSteps}%` : void 0,
+            ...style,
+            ...stepProps?.style
+        },
+        onClick: onCompletedClick,
+        onKeyDown: onKeyDown,
+        "aria-current": isActive ? 'step' : void 0,
+        tabIndex: isClickable ? 0 : void 0,
+        ref: forwardedRef,
+        ...rest
+    }, _react.createElement(_index.Box, {
+        as: "div",
+        ...trackContentProps,
+        className: (0, _classnames.default)('iui-stepper-track-content', trackContentProps?.className)
+    }, _react.createElement(_index.Box, {
+        as: "span",
+        ...circleProps,
+        className: (0, _classnames.default)('iui-stepper-circle', circleProps?.className)
+    }, index + 1)), 'default' === type && _react.createElement(_index.Box, {
+        as: "span",
+        ...nameProps,
+        className: (0, _classnames.default)('iui-stepper-step-name', nameProps?.className)
+    }, title));
+    return description ? _react.createElement(_Tooltip.Tooltip, {
+        content: description
+    }, stepShape) : stepShape;
+});

package/DEV-cjs/core/Stepper/WorkflowDiagram.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "WorkflowDiagram", {
+    enumerable: true,
+    get: function() {
+        return WorkflowDiagram;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const _WorkflowDiagramStep = require("./WorkflowDiagramStep.js");
+const WorkflowDiagram = _react.forwardRef((props, ref)=>{
+    let { steps, className, contentProps, wrapperProps, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        as: "div",
+        ...wrapperProps,
+        ref: ref
+    }, _react.createElement(_index.Box, {
+        as: "ol",
+        className: (0, _classnames.default)('iui-workflow-diagram', className),
+        ...rest
+    }, steps.map((s, index)=>{
+        let thisContentProps = contentProps?.(index);
+        return _react.createElement(_WorkflowDiagramStep.WorkflowDiagramStep, {
+            contentProps: thisContentProps,
+            key: index,
+            title: s.name,
+            description: s.description
+        });
+    })));
+});
+WorkflowDiagram.displayName = 'WorkflowDiagram';

package/DEV-cjs/core/Stepper/WorkflowDiagramStep.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "WorkflowDiagramStep", {
+    enumerable: true,
+    get: function() {
+        return WorkflowDiagramStep;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _classnames = _interop_require_default._(require("classnames"));
+const _react = _interop_require_wildcard._(require("react"));
+const _Tooltip = require("../Tooltip/Tooltip.js");
+const _index = require("../../utils/index.js");
+const WorkflowDiagramStep = (props)=>{
+    let { title, description, className, style, contentProps, ...rest } = props;
+    let stepShape = _react.createElement(_index.Box, {
+        as: "li",
+        className: (0, _classnames.default)('iui-workflow-diagram-step', className),
+        style: style,
+        ...rest
+    }, _react.createElement(_index.Box, {
+        as: "span",
+        ...contentProps,
+        className: (0, _classnames.default)('iui-workflow-diagram-content', contentProps?.className)
+    }, title));
+    return description ? _react.createElement(_Tooltip.Tooltip, {
+        content: description
+    }, stepShape) : stepShape;
+};

package/DEV-cjs/core/Surface/Surface.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Surface", {
+    enumerable: true,
+    get: function() {
+        return Surface;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _classnames = _interop_require_default._(require("classnames"));
+const _index = require("../../utils/index.js");
+const getSurfaceElevationValue = (elevation)=>{
+    switch(elevation){
+        case 0:
+            return 'none';
+        case 1:
+            return 'var(--iui-shadow-1)';
+        case 2:
+            return 'var(--iui-shadow-2)';
+        case 3:
+            return 'var(--iui-shadow-3)';
+        case 4:
+            return 'var(--iui-shadow-4)';
+        case 5:
+            return 'var(--iui-shadow-5)';
+        default:
+            return;
+    }
+};
+const getBorderValue = (border)=>{
+    if ('string' == typeof border) return border;
+    if (false === border) return 'none';
+};
+const SurfaceHeader = _react.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    let { setHasLayout } = (0, _index.useSafeContext)(SurfaceContext);
+    _react.useEffect(()=>{
+        if (!(0, _index.supportsHas)()) setHasLayout(true);
+    }, [
+        setHasLayout
+    ]);
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-surface-header', className),
+        ref: ref,
+        ...rest
+    }, children);
+});
+SurfaceHeader.displayName = 'Surface.Header';
+const SurfaceBody = _react.forwardRef((props, ref)=>{
+    let { children, className, isPadded = false, ...rest } = props;
+    let { setHasLayout } = (0, _index.useSafeContext)(SurfaceContext);
+    _react.useEffect(()=>{
+        if (!(0, _index.supportsHas)()) setHasLayout(true);
+    }, [
+        setHasLayout
+    ]);
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-surface-body', className),
+        ref: ref,
+        "data-iui-padded": isPadded ? 'true' : void 0,
+        ...rest
+    }, children);
+});
+SurfaceBody.displayName = 'Surface.Body';
+const Surface = Object.assign(_react.forwardRef((props, ref)=>{
+    let { elevation, border = true, className, style, children, ...rest } = props;
+    let [hasLayout, setHasLayout] = _react.useState(false);
+    let _style = {
+        '--iui-surface-elevation': getSurfaceElevationValue(elevation),
+        '--iui-surface-border': getBorderValue(border),
+        ...style
+    };
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-surface', className),
+        style: _style,
+        ref: ref,
+        "data-iui-layout": hasLayout ? 'true' : void 0,
+        ...rest
+    }, _react.createElement(SurfaceContext.Provider, {
+        value: {
+            setHasLayout
+        }
+    }, children));
+}), {
+    Header: SurfaceHeader,
+    Body: SurfaceBody
+});
+Surface.displayName = 'Surface';
+const SurfaceContext = _react.createContext(void 0);
+SurfaceContext.displayName = 'SurfaceContext';

package/DEV-cjs/core/Table/SubRowExpander.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SubRowExpander", {
+    enumerable: true,
+    get: function() {
+        return SubRowExpander;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = _interop_require_wildcard._(require("react"));
+const _index = require("../../utils/index.js");
+const _IconButton = require("../Buttons/IconButton.js");
+const SubRowExpander = (props)=>{
+    let { cell, isDisabled, cellProps, expanderCell, density, ...rest } = props;
+    return _react.createElement(_react.Fragment, null, expanderCell ? expanderCell(cellProps) : _react.createElement(_IconButton.IconButton, {
+        "aria-label": "Toggle sub row",
+        "aria-expanded": cell.row.isExpanded ? 'true' : 'false',
+        style: {
+            marginInlineEnd: 'default' === density || void 0 === density ? 8 : 4
+        },
+        className: "iui-table-row-expander",
+        styleType: "borderless",
+        size: "small",
+        onClick: (e)=>{
+            e.stopPropagation();
+            cell.row.toggleRowExpanded();
+        },
+        disabled: isDisabled,
+        ...rest
+    }, _react.createElement(_index.SvgChevronRight, {
+        style: {
+            transform: cell.row.isExpanded ? 'rotate(90deg)' : void 0
+        }
+    })));
+};