@forge/react 10.4.0-next.0 → 10.5.0-next.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @forge/react
 
+## 10.5.0-next.0
+
+### Minor Changes
+
+- c2a41b1: Changes to existing components:
+
+  - `href` prop added to `Tag`
+  - `color` prop added to `Icon`
+
+  The following new components have been added:
+
+  - List
+  - CheckboxGroup
+  - Calendar
+  - TimePicker
+  - InlineEdit
+  - Popup
+  - EmptyState
+
+  For more details of these changes and new components, view our [component documentation](https://developer.atlassian.com/platform/forge/ui-kit/components/)
+
+## 10.4.0
+
+### Minor Changes
+
+- d6ef7d4: Add createFrame helper to support React-like property passing in Frame component
+
+  For more information, see the [Frame component documentation](https://developer.atlassian.com/platform/forge/ui-kit/components/frame).
+
+### Patch Changes
+
+- Updated dependencies [ef55008]
+  - @forge/bridge@3.5.0
+
 ## 10.4.0-next.0
 
 ### Minor Changes

package/out/__test__/components/inline-edit.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=inline-edit.test.d.ts.map

package/out/__test__/components/inline-edit.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-edit.test.d.ts","sourceRoot":"","sources":["../../../src/__test__/components/inline-edit.test.tsx"],"names":[],"mappings":""}

package/out/__test__/components/inline-edit.test.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const components_1 = require("../../components");
+const reconcilerTestRenderer_1 = tslib_1.__importDefault(require("../reconcilerTestRenderer"));
+const testUtils_1 = require("../testUtils");
+const get_1 = tslib_1.__importDefault(require("lodash/get"));
+describe('InlineEdit', () => {
+    let bridgeCalls = [];
+    const onConfirmMock = jest.fn();
+    const validateMock = jest.fn();
+    const onEditMock = jest.fn();
+    const onCancelMock = jest.fn();
+    const validation = (value) => {
+        validateMock(value);
+        if (value.length < 3) {
+            return 'Value must be at least 3 characters long';
+        }
+        return undefined;
+    };
+    beforeEach(async () => {
+        bridgeCalls = (0, testUtils_1.setupBridge)();
+        const Test = () => {
+            const [editValue, setEditValue] = (0, react_1.useState)('test');
+            return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(components_1.InlineEdit, { onEdit: onEditMock, onCancel: onCancelMock, validate: validation, editView: ({ errorMessage, value, ...fieldProps }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.Textfield, { value: value, ...fieldProps }), (0, jsx_runtime_1.jsx)(components_1.Text, { children: errorMessage })] })), readView: () => (0, jsx_runtime_1.jsx)(components_1.Text, { children: editValue }), defaultValue: editValue, onConfirm: (value) => {
+                        onConfirmMock(value);
+                        setEditValue(value);
+                    } }) }));
+        };
+        await reconcilerTestRenderer_1.default.create((0, jsx_runtime_1.jsx)(Test, {}));
+    });
+    it('readView and editView is passed in the forgeDoc', () => {
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        const editViewComponent = (0, get_1.default)(forgeDoc, 'children[0].children[0].children[0].type');
+        const readViewText = (0, get_1.default)(forgeDoc, 'children[0].children[1].children[0].children[0].props.text');
+        expect(editViewComponent).toBe('Textfield');
+        expect(readViewText).toBe('test');
+    });
+    it('onConfirm is called with the correct value', () => {
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        const onConfirm = (0, get_1.default)(forgeDoc, 'children[0].props.onConfirm');
+        onConfirm();
+        expect(onConfirmMock).toHaveBeenCalledWith('test');
+        expect(validateMock).toHaveBeenCalledWith('test');
+    });
+    it('onChange triggers validation', () => {
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        const onChange = (0, get_1.default)(forgeDoc, 'children[0].children[0].children[0].props.onChange');
+        onChange('value change');
+        expect(validateMock).toHaveBeenCalledWith('value change');
+    });
+    it('validation is called and fails', () => {
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        const onChange = (0, get_1.default)(forgeDoc, 'children[0].children[0].children[0].props.onChange');
+        onChange('f');
+        const errorText = (0, get_1.default)(forgeDoc, 'children[0].children[0].children[1].children[0].props.text');
+        expect(errorText).toBe('Value must be at least 3 characters long');
+    });
+    it('clears errorMessage and switches to edit mode when onEdit is called', () => {
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        const onEdit = (0, get_1.default)(forgeDoc, 'children[0].props.onEdit');
+        onEdit();
+        const errorText = (0, get_1.default)(forgeDoc, 'children[0].children[0].children[1].children[0].props.text');
+        expect(errorText).toBe(undefined);
+        const isEditing = (0, get_1.default)(forgeDoc, 'children[0].props.isEditing');
+        expect(isEditing).toBe(true);
+    });
+    it('switches back to read mode when onCancel is called', () => {
+        const forgeDoc = (0, testUtils_1.getLastBridgeCallForgeDoc)(bridgeCalls);
+        const onEdit = (0, get_1.default)(forgeDoc, 'children[0].props.onEdit');
+        onEdit();
+        let isEditing = (0, get_1.default)(forgeDoc, 'children[0].props.isEditing');
+        expect(isEditing).toBe(true);
+        // Text update
+        const onChange = (0, get_1.default)(forgeDoc, 'children[0].children[0].children[0].props.onChange');
+        onChange('value change');
+        // Cancel is called
+        const onCancel = (0, get_1.default)(forgeDoc, 'children[0].props.onCancel');
+        onCancel();
+        isEditing = (0, get_1.default)(forgeDoc, 'children[0].props.isEditing');
+        expect(isEditing).toBe(false);
+        // Text should revert to previous value
+        const valueText = (0, get_1.default)(forgeDoc, 'children[0].children[1].children[0].children[0].props.text');
+        expect(valueText).toBe('test');
+    });
+});

package/out/components/index.d.ts

@@ -1,4 +1,7 @@
 import { ForgeElement, MarkupProps, NativeImageProps as ImageProps, NativeLinkProps as LinkProps, NativeTextProps as TextProps, NativeUserPickerProps as UserPickerProps, UserGroupProps, UserProps, FrameProps } from '../types/index';
+import { CheckboxGroupProps as UIKitCheckboxGroupProps } from '@atlaskit/forge-react-types';
+export { InlineEdit } from './inline-edit';
+export { Popup } from './popup';
 export { UserPickerValue } from '../types/index';
 export declare const Image: (props: ImageProps) => ForgeElement;
 export declare const Link: (props: LinkProps) => ForgeElement;
@@ -24,8 +27,8 @@ export { createFrame } from './createFrame';
 /**
  * Export Code generated UI Kit 2 Components
  */
-export * from './uikit2-components';
-declare type CheckboxGroupProps = {
+export * from './ui-kit-components';
+interface MacroCheckboxGroupProps {
     name: string;
     label?: string;
     description?: string;
@@ -34,10 +37,8 @@ declare type CheckboxGroupProps = {
         label: string;
         value: string;
     }[];
-    defaultValue?: {
-        label: string;
-        value: string;
-    }[];
-};
+    defaultValue?: string[];
+}
+declare type CheckboxGroupProps = MacroCheckboxGroupProps | UIKitCheckboxGroupProps;
 export declare const CheckboxGroup: (props: CheckboxGroupProps) => ForgeElement;
 //# sourceMappingURL=index.d.ts.map

package/out/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,WAAW,EACX,gBAAgB,IAAI,UAAU,EAC9B,eAAe,IAAI,SAAS,EAC5B,eAAe,IAAI,SAAS,EAC5B,qBAAqB,IAAI,eAAe,EACxC,cAAc,EACd,SAAS,EACT,UAAU,EACX,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,eAAO,MAAM,KAAK,UAAiC,UAAU,KAAK,YAAY,CAAC;AAC/E,eAAO,MAAM,IAAI,UAAgC,SAAS,KAAK,YAAY,CAAC;AAC5E,eAAO,MAAM,IAAI,UAAgC,SAAS,KAAK,YAAY,CAAC;AAC5E,eAAO,MAAM,UAAU,UAAsC,eAAe,KAAK,YAAY,CAAC;AAC9F,eAAO,MAAM,IAAI,UAAgC,SAAS,KAAK,YAAY,CAAC;AAC5E,eAAO,MAAM,SAAS,UAAqC,cAAc,KAAK,YAAY,CAAC;AAE3F,eAAO,MAAM,EAAE,UAA8B,WAAW,KAAK,YAAY,CAAC;AAC1E,eAAO,MAAM,MAAM,UAAkC,WAAW,KAAK,YAAY,CAAC;AAClF,eAAO,MAAM,MAAM,UAAkC,WAAW,KAAK,YAAY,CAAC;AAElF;;;;GAIG;AACH,eAAO,MAAM,KAAK,UAAiC,UAAU,KAAK,YAAY,CAAC;AAE/E;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;GAEG;AACH,cAAc,qBAAqB,CAAC;AAGpC,aAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC3C,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACnD,CAAC;AACF,eAAO,MAAM,aAAa,UAAyC,kBAAkB,KAAK,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,WAAW,EACX,gBAAgB,IAAI,UAAU,EAC9B,eAAe,IAAI,SAAS,EAC5B,eAAe,IAAI,SAAS,EAC5B,qBAAqB,IAAI,eAAe,EACxC,cAAc,EACd,SAAS,EACT,UAAU,EACX,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,kBAAkB,IAAI,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEjD,eAAO,MAAM,KAAK,UAAiC,UAAU,KAAK,YAAY,CAAC;AAC/E,eAAO,MAAM,IAAI,UAAgC,SAAS,KAAK,YAAY,CAAC;AAC5E,eAAO,MAAM,IAAI,UAAgC,SAAS,KAAK,YAAY,CAAC;AAC5E,eAAO,MAAM,UAAU,UAAsC,eAAe,KAAK,YAAY,CAAC;AAC9F,eAAO,MAAM,IAAI,UAAgC,SAAS,KAAK,YAAY,CAAC;AAC5E,eAAO,MAAM,SAAS,UAAqC,cAAc,KAAK,YAAY,CAAC;AAE3F,eAAO,MAAM,EAAE,UAA8B,WAAW,KAAK,YAAY,CAAC;AAC1E,eAAO,MAAM,MAAM,UAAkC,WAAW,KAAK,YAAY,CAAC;AAClF,eAAO,MAAM,MAAM,UAAkC,WAAW,KAAK,YAAY,CAAC;AAElF;;;;GAIG;AACH,eAAO,MAAM,KAAK,UAAiC,UAAU,KAAK,YAAY,CAAC;AAE/E;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;GAEG;AACH,cAAc,qBAAqB,CAAC;AAIpC,UAAU,uBAAuB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AACD,aAAK,kBAAkB,GAAG,uBAAuB,GAAG,uBAAuB,CAAC;AAC5E,eAAO,MAAM,aAAa,UAAyC,kBAAkB,KAAK,YAAY,CAAC"}

package/out/components/index.js

@@ -1,7 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxGroup = exports.createFrame = exports.Frame = exports.Strong = exports.Strike = exports.Em = exports.UserGroup = exports.User = exports.UserPicker = exports.Text = exports.Link = exports.Image = void 0;
+exports.CheckboxGroup = exports.createFrame = exports.Frame = exports.Strong = exports.Strike = exports.Em = exports.UserGroup = exports.User = exports.UserPicker = exports.Text = exports.Link = exports.Image = exports.Popup = exports.InlineEdit = void 0;
 const tslib_1 = require("tslib");
+var inline_edit_1 = require("./inline-edit");
+Object.defineProperty(exports, "InlineEdit", { enumerable: true, get: function () { return inline_edit_1.InlineEdit; } });
+var popup_1 = require("./popup");
+Object.defineProperty(exports, "Popup", { enumerable: true, get: function () { return popup_1.Popup; } });
 exports.Image = 'Image';
 exports.Link = 'Link';
 exports.Text = 'Text';
@@ -27,5 +31,5 @@ Object.defineProperty(exports, "createFrame", { enumerable: true, get: function
 /**
  * Export Code generated UI Kit 2 Components
  */
-tslib_1.__exportStar(require("./uikit2-components"), exports);
+tslib_1.__exportStar(require("./ui-kit-components"), exports);
 exports.CheckboxGroup = 'CheckboxGroup';

package/out/components/inline-edit.d.ts

@@ -0,0 +1,17 @@
+import { InlineEditProps } from '@atlaskit/forge-react-types';
+/**
+ * The following workaround is required because functions cannot be passed outside of the runtime.
+ * The Renderer will invoke the function from within the runtime
+ * Instead of passing the function, we are reimplementing validation and confirmation here to provide the same behaviour as the ADS version.
+ *
+ * The reimplemented functions include:
+ * - validate
+ * - onConfirm
+ * - onCancel
+ * - onEdit
+ *
+ * readView and editView also need to be evaluated here so that into a primitive type(JS object) to be rendered by the Renderer. Otherwise the Renderer will not be able to evaluate them on the product side.
+ *
+ */
+export declare const InlineEdit: ({ label, readView, editView, validate, startWithEditViewOpen, keepEditViewOpenOnBlur, hideActionButtons, isRequired, readViewFitContainerWidth, editButtonLabel, confirmButtonLabel, cancelButtonLabel, defaultValue, isEditing, onConfirm, onCancel, onEdit }: InlineEditProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=inline-edit.d.ts.map

package/out/components/inline-edit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-edit.d.ts","sourceRoot":"","sources":["../../src/components/inline-edit.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAU9D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,mQAkBpB,eAAe,4CAqGjB,CAAC"}

package/out/components/inline-edit.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineEdit = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const content_wrapper_1 = require("./utils/content-wrapper");
+const InlineEditPrimitive = 'InlineEdit';
+/**
+ * The following workaround is required because functions cannot be passed outside of the runtime.
+ * The Renderer will invoke the function from within the runtime
+ * Instead of passing the function, we are reimplementing validation and confirmation here to provide the same behaviour as the ADS version.
+ *
+ * The reimplemented functions include:
+ * - validate
+ * - onConfirm
+ * - onCancel
+ * - onEdit
+ *
+ * readView and editView also need to be evaluated here so that into a primitive type(JS object) to be rendered by the Renderer. Otherwise the Renderer will not be able to evaluate them on the product side.
+ *
+ */
+const InlineEdit = ({ label, readView, editView, validate, startWithEditViewOpen, keepEditViewOpenOnBlur, hideActionButtons, isRequired, readViewFitContainerWidth, editButtonLabel, confirmButtonLabel, cancelButtonLabel, defaultValue, isEditing, onConfirm, onCancel, onEdit }) => {
+    const [prevValue, setPrevValue] = (0, react_1.useState)();
+    const [value, setValue] = (0, react_1.useState)(defaultValue);
+    const [_isEditing, _setIsEditing] = (0, react_1.useState)(startWithEditViewOpen ? startWithEditViewOpen : false);
+    const [errorMessage, setErrorMessage] = (0, react_1.useState)(undefined);
+    const internalValidate = (newValue, setEdit, onConfirm) => {
+        if (validate !== undefined) {
+            const errorMessageFromValidation = validate(newValue, {}, {});
+            const handleValidationResult = (error) => {
+                setErrorMessage(error || undefined);
+                // If no error and onConfirm is being called
+                if (error === undefined && onConfirm) {
+                    onConfirm(newValue);
+                }
+                if (setEdit) {
+                    setEdit(error !== undefined);
+                }
+            };
+            if (errorMessageFromValidation instanceof Promise) {
+                void errorMessageFromValidation.then(handleValidationResult);
+            }
+            else {
+                handleValidationResult(errorMessageFromValidation);
+            }
+        }
+        else {
+            if (setEdit) {
+                setEdit(false);
+            }
+            if (onConfirm) {
+                onConfirm(newValue);
+            }
+        }
+    };
+    const internalOnConfirm = () => {
+        if (value === prevValue) {
+            _setIsEditing(false);
+            return;
+        }
+        internalValidate(value, _setIsEditing, onConfirm);
+    };
+    const internalOnChange = (e) => {
+        const newValue = e.target ? e.target.value : e;
+        setValue(newValue);
+        internalValidate(newValue);
+    };
+    const internalOnEdit = () => {
+        // Reset error state on first open
+        setErrorMessage(undefined);
+        _setIsEditing(true);
+        setPrevValue(value);
+        onEdit?.();
+    };
+    const internalOnCancel = () => {
+        _setIsEditing(false);
+        setValue(prevValue);
+        onCancel?.();
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(InlineEditPrimitive, { label: label, onConfirm: () => internalOnConfirm(), onEdit: () => internalOnEdit(), onCancel: () => internalOnCancel(), isEditing: isEditing !== undefined ? isEditing : _isEditing, startWithEditViewOpen: startWithEditViewOpen, keepEditViewOpenOnBlur: keepEditViewOpenOnBlur, hideActionButtons: hideActionButtons, isRequired: isRequired, readViewFitContainerWidth: readViewFitContainerWidth, editButtonLabel: editButtonLabel, confirmButtonLabel: confirmButtonLabel, cancelButtonLabel: cancelButtonLabel, children: [(0, jsx_runtime_1.jsx)(content_wrapper_1.ContentWrapper, { name: "editView", children: editView({
+                        onChange: internalOnChange,
+                        value,
+                        errorMessage,
+                        isInvalid: errorMessage !== undefined,
+                        'aria-invalid': errorMessage !== undefined ? 'true' : 'false',
+                        isRequired: isRequired || false
+                    }) }), (0, jsx_runtime_1.jsx)(content_wrapper_1.ContentWrapper, { name: "readView", children: readView() })] }) }));
+};
+exports.InlineEdit = InlineEdit;

package/out/components/popup.d.ts

@@ -0,0 +1,3 @@
+import { PopupProps } from '@atlaskit/forge-react-types';
+export declare const Popup: ({ content, trigger, isOpen, id, testId, onClose, boundary, rootBoundary, shouldFlip, placement, fallbackPlacements, autoFocus, shouldUseCaptureOnOutsideClick, shouldFitContainer, shouldDisableFocusLock, strategy, role, label, titleId }: PopupProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=popup.d.ts.map

package/out/components/popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/components/popup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAUzD,eAAO,MAAM,KAAK,gPAoBf,UAAU,4CAyBZ,CAAC"}

package/out/components/popup.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const content_wrapper_1 = require("./utils/content-wrapper");
+const PopupPrimitive = 'Popup';
+const Popup = ({ content, trigger, isOpen, id, testId, onClose, boundary, rootBoundary, shouldFlip, placement, fallbackPlacements, autoFocus, shouldUseCaptureOnOutsideClick, shouldFitContainer, shouldDisableFocusLock, strategy, role, label, titleId }) => {
+    return ((0, jsx_runtime_1.jsxs)(PopupPrimitive, { isOpen: isOpen, id: id, testId: testId, onClose: onClose, boundary: boundary, rootBoundary: rootBoundary, shouldFlip: shouldFlip, placement: placement, fallbackPlacements: fallbackPlacements, autoFocus: autoFocus, shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick, shouldFitContainer: shouldFitContainer, shouldDisableFocusLock: shouldDisableFocusLock, strategy: strategy, role: role, label: label, titleId: titleId, children: [(0, jsx_runtime_1.jsx)(content_wrapper_1.ContentWrapper, { name: "content", children: content() }), (0, jsx_runtime_1.jsx)(content_wrapper_1.ContentWrapper, { name: "trigger", children: trigger() })] }));
+};
+exports.Popup = Popup;

package/out/components/{uikit2-components.d.ts → ui-kit-components.d.ts}

@@ -1,16 +1,18 @@
 /// <reference types="react" />
 import { ForgeElement } from '../types/index';
-import type { BadgeProps, BarChartProps, BoxProps, ButtonProps, ButtonGroupProps, CheckboxProps, CodeProps, CodeBlockProps, DatePickerProps, DynamicTableProps, ErrorMessageProps, HeadingProps, HelperMessageProps, HorizontalBarChartProps, HorizontalStackBarChartProps, InlineProps, LabelProps, LozengeProps, LineChartProps, LinkButtonProps, ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps, ModalTitleProps, ModalTransitionProps, PieChartProps, ProgressBarProps, ProgressTrackerProps, RadioProps, RadioGroupProps, RangeProps, SectionMessageProps, SectionMessageActionProps, SingleValueChartProps, SpinnerProps, StackProps, StackBarChartProps, TabsProps, TabProps, TabListProps, TabPanelProps, TagProps, TagGroupProps, FormProps, FormHeaderProps, FormFooterProps, FormSectionProps, TooltipProps, TextAreaProps, TextfieldProps, ToggleProps, ValidMessageProps, LoadingButtonProps, SelectProps, IconProps } from '@atlaskit/forge-react-types';
+import type { BadgeProps, BarChartProps, BoxProps, ButtonProps, ButtonGroupProps, CalendarProps, CheckboxProps, CodeProps, CodeBlockProps, DatePickerProps, DynamicTableProps, ErrorMessageProps, HeadingProps, HelperMessageProps, HorizontalBarChartProps, HorizontalStackBarChartProps, InlineProps, LabelProps, ListProps, ListItemProps, LozengeProps, LineChartProps, LinkButtonProps, ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps, ModalTitleProps, ModalTransitionProps, PieChartProps, ProgressBarProps, ProgressTrackerProps, RadioProps, RadioGroupProps, RangeProps, SectionMessageProps, SectionMessageActionProps, SingleValueChartProps, SpinnerProps, StackProps, StackBarChartProps, TabsProps, TabProps, TabListProps, TabPanelProps, TagProps, TagGroupProps, FormProps, FormHeaderProps, FormFooterProps, FormSectionProps, TooltipProps, TextAreaProps, TextfieldProps, ToggleProps, ValidMessageProps, LoadingButtonProps, SelectProps, IconProps, EmptyStateProps } from '@atlaskit/forge-react-types';
 export declare const Badge: (props: BadgeProps) => ForgeElement;
 export declare const BarChart: (props: BarChartProps) => ForgeElement;
 export declare const Box: (props: BoxProps) => ForgeElement;
 export declare const Button: (props: ButtonProps) => ForgeElement;
 export declare const ButtonGroup: (props: ButtonGroupProps) => ForgeElement;
+export declare const Calendar: (props: CalendarProps) => ForgeElement;
 export declare const Checkbox: (props: CheckboxProps) => ForgeElement;
 export declare const Code: (props: CodeProps) => ForgeElement;
 export declare const CodeBlock: (props: CodeBlockProps) => ForgeElement;
 export declare const DatePicker: (props: DatePickerProps) => ForgeElement;
 export declare const DynamicTable: (props: DynamicTableProps) => ForgeElement;
+export declare const EmptyState: (props: EmptyStateProps) => ForgeElement;
 export declare const ErrorMessage: (props: ErrorMessageProps) => ForgeElement;
 export declare const Form: (props: FormProps) => ForgeElement;
 export declare const FormFooter: (props: FormFooterProps) => ForgeElement;
@@ -25,6 +27,8 @@ export declare const Inline: (props: InlineProps) => ForgeElement;
 export declare const Label: (props: LabelProps) => ForgeElement;
 export declare const LineChart: (props: LineChartProps) => ForgeElement;
 export declare const LinkButton: (props: LinkButtonProps) => ForgeElement;
+export declare const List: (props: ListProps) => ForgeElement;
+export declare const ListItem: (props: ListItemProps) => ForgeElement;
 export declare const LoadingButton: (props: LoadingButtonProps) => ForgeElement;
 export declare const Lozenge: (props: LozengeProps) => ForgeElement;
 export declare const Modal: (props: ModalProps) => ForgeElement;
@@ -58,4 +62,4 @@ export declare const Toggle: (props: ToggleProps) => ForgeElement;
 export declare const Tooltip: (props: TooltipProps) => ForgeElement;
 export declare const ValidMessage: (props: ValidMessageProps) => ForgeElement;
 export declare const RequiredAsterisk: () => JSX.Element;
-//# sourceMappingURL=uikit2-components.d.ts.map
+//# sourceMappingURL=ui-kit-components.d.ts.map

package/out/components/ui-kit-components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-kit-components.d.ts","sourceRoot":"","sources":["../../src/components/ui-kit-components.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EACV,UAAU,EACV,aAAa,EACb,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,SAAS,EACT,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,kBAAkB,EAClB,uBAAuB,EACvB,4BAA4B,EAC5B,WAAW,EACX,UAAU,EACV,SAAS,EACT,aAAa,EACb,YAAY,EACZ,cAAc,EACd,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,oBAAoB,EACpB,UAAU,EACV,eAAe,EACf,UAAU,EACV,mBAAmB,EACnB,yBAAyB,EACzB,qBAAqB,EACrB,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,QAAQ,EACR,aAAa,EACb,SAAS,EACT,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,WAAW,EACX,SAAS,EACT,eAAe,EAChB,MAAM,6BAA6B,CAAC;AAErC,eAAO,MAAM,KAAK,UAAiC,UAAU,KAAK,YAAY,CAAC;AAC/E,eAAO,MAAM,QAAQ,UAAoC,aAAa,KAAK,YAAY,CAAC;AACxF,eAAO,MAAM,GAAG,UAA+B,QAAQ,KAAK,YAAY,CAAC;AACzE,eAAO,MAAM,MAAM,UAAkC,WAAW,KAAK,YAAY,CAAC;AAClF,eAAO,MAAM,WAAW,UAAuC,gBAAgB,KAAK,YAAY,CAAC;AACjG,eAAO,MAAM,QAAQ,UAAoC,aAAa,KAAK,YAAY,CAAC;AACxF,eAAO,MAAM,QAAQ,UAAoC,aAAa,KAAK,YAAY,CAAC;AACxF,eAAO,MAAM,IAAI,UAAgC,SAAS,KAAK,YAAY,CAAC;AAC5E,eAAO,MAAM,SAAS,UAAqC,cAAc,KAAK,YAAY,CAAC;AAC3F,eAAO,MAAM,UAAU,UAAsC,eAAe,KAAK,YAAY,CAAC;AAC9F,eAAO,MAAM,YAAY,UAAwC,iBAAiB,KAAK,YAAY,CAAC;AACpG,eAAO,MAAM,UAAU,UAAsC,eAAe,KAAK,YAAY,CAAC;AAC9F,eAAO,MAAM,YAAY,UAAwC,iBAAiB,KAAK,YAAY,CAAC;AACpG,eAAO,MAAM,IAAI,UAAgC,SAAS,KAAK,YAAY,CAAC;AAC5E,eAAO,MAAM,UAAU,UAAsC,eAAe,KAAK,YAAY,CAAC;AAC9F,eAAO,MAAM,UAAU,UAAsC,eAAe,KAAK,YAAY,CAAC;AAC9F,eAAO,MAAM,WAAW,UAAuC,gBAAgB,KAAK,YAAY,CAAC;AACjG,eAAO,MAAM,OAAO,UAAmC,YAAY,KAAK,YAAY,CAAC;AACrF,eAAO,MAAM,aAAa,UAAyC,kBAAkB,KAAK,YAAY,CAAC;AACvG,eAAO,MAAM,kBAAkB,UAA8C,uBAAuB,KAAK,YAAY,CAAC;AACtH,eAAO,MAAM,uBAAuB,UAC3B,4BAA4B,KAChC,YAAY,CAAC;AAClB,eAAO,MAAM,IAAI,UAAgC,SAAS,KAAK,YAAY,CAAC;AAC5E,eAAO,MAAM,MAAM,UAAkC,WAAW,KAAK,YAAY,CAAC;AAClF,eAAO,MAAM,KAAK,UAAiC,UAAU,KAAK,YAAY,CAAC;AAC/E,eAAO,MAAM,SAAS,UAAqC,cAAc,KAAK,YAAY,CAAC;AAC3F,eAAO,MAAM,UAAU,UAAsC,eAAe,KAAK,YAAY,CAAC;AAC9F,eAAO,MAAM,IAAI,UAAgC,SAAS,KAAK,YAAY,CAAC;AAC5E,eAAO,MAAM,QAAQ,UAAoC,aAAa,KAAK,YAAY,CAAC;AACxF,eAAO,MAAM,aAAa,UAAyC,kBAAkB,KAAK,YAAY,CAAC;AACvG,eAAO,MAAM,OAAO,UAAmC,YAAY,KAAK,YAAY,CAAC;AACrF,eAAO,MAAM,KAAK,UAAiC,UAAU,KAAK,YAAY,CAAC;AAC/E,eAAO,MAAM,SAAS,UAAqC,cAAc,KAAK,YAAY,CAAC;AAC3F,eAAO,MAAM,WAAW,UAAuC,gBAAgB,KAAK,YAAY,CAAC;AACjG,eAAO,MAAM,WAAW,UAAuC,gBAAgB,KAAK,YAAY,CAAC;AACjG,eAAO,MAAM,UAAU,UAAsC,eAAe,KAAK,YAAY,CAAC;AAC9F,eAAO,MAAM,eAAe,UAA2C,oBAAoB,KAAK,YAAY,CAAC;AAC7G,eAAO,MAAM,QAAQ,UAAoC,aAAa,KAAK,YAAY,CAAC;AACxF,eAAO,MAAM,WAAW,UAAuC,gBAAgB,KAAK,YAAY,CAAC;AACjG,eAAO,MAAM,eAAe,UAA2C,oBAAoB,KAAK,YAAY,CAAC;AAC7G,eAAO,MAAM,KAAK,UAAiC,UAAU,KAAK,YAAY,CAAC;AAC/E,eAAO,MAAM,UAAU,UAAsC,eAAe,KAAK,YAAY,CAAC;AAC9F,eAAO,MAAM,KAAK,UAAiC,UAAU,KAAK,YAAY,CAAC;AAC/E,eAAO,MAAM,MAAM,UAAkC,WAAW,KAAK,YAAY,CAAC;AAClF,eAAO,MAAM,cAAc,UAA0C,mBAAmB,KAAK,YAAY,CAAC;AAC1G,eAAO,MAAM,oBAAoB,UACxB,yBAAyB,KAC7B,YAAY,CAAC;AAClB,eAAO,MAAM,gBAAgB,UAA4C,qBAAqB,KAAK,YAAY,CAAC;AAChH,eAAO,MAAM,OAAO,UAAmC,YAAY,KAAK,YAAY,CAAC;AACrF,eAAO,MAAM,KAAK,UAAiC,UAAU,KAAK,YAAY,CAAC;AAC/E,eAAO,MAAM,aAAa,UAAyC,kBAAkB,KAAK,YAAY,CAAC;AACvG,eAAO,MAAM,GAAG,UAA+B,QAAQ,KAAK,YAAY,CAAC;AACzE,eAAO,MAAM,OAAO,UAAmC,YAAY,KAAK,YAAY,CAAC;AACrF,eAAO,MAAM,QAAQ,UAAoC,aAAa,KAAK,YAAY,CAAC;AACxF,eAAO,MAAM,IAAI,UAAgC,SAAS,KAAK,YAAY,CAAC;AAC5E,eAAO,MAAM,GAAG,UAA+B,QAAQ,KAAK,YAAY,CAAC;AACzE,eAAO,MAAM,QAAQ,UAAoC,aAAa,KAAK,YAAY,CAAC;AACxF,eAAO,MAAM,QAAQ,UAAoC,aAAa,KAAK,YAAY,CAAC;AACxF,eAAO,MAAM,SAAS,UAAqC,cAAc,KAAK,YAAY,CAAC;AAC3F,eAAO,MAAM,MAAM,UAAkC,WAAW,KAAK,YAAY,CAAC;AAClF,eAAO,MAAM,OAAO,UAAmC,YAAY,KAAK,YAAY,CAAC;AACrF,eAAO,MAAM,YAAY,UAAwC,iBAAiB,KAAK,YAAY,CAAC;AAEpG,eAAO,MAAM,gBAAgB,QAA0C,WAAW,CAAC"}

package/out/components/{uikit2-components.js → ui-kit-components.js}

@@ -1,17 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = exports.Tabs = exports.TabPanel = exports.TabList = exports.Tab = exports.StackBarChart = exports.Stack = exports.Spinner = exports.SingleValueChart = exports.SectionMessageAction = exports.SectionMessage = exports.Select = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressTracker = exports.ProgressBar = exports.PieChart = exports.ModalTransition = exports.ModalTitle = exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.Modal = exports.Lozenge = exports.LoadingButton = exports.LinkButton = exports.LineChart = exports.Label = exports.Inline = exports.Icon = exports.HorizontalStackBarChart = exports.HorizontalBarChart = exports.HelperMessage = exports.Heading = exports.FormSection = exports.FormHeader = exports.FormFooter = exports.Form = exports.ErrorMessage = exports.DynamicTable = exports.DatePicker = exports.CodeBlock = exports.Code = exports.Checkbox = exports.ButtonGroup = exports.Button = exports.Box = exports.BarChart = exports.Badge = void 0;
-exports.RequiredAsterisk = exports.ValidMessage = exports.Tooltip = exports.Toggle = exports.Textfield = exports.TextArea = exports.TagGroup = void 0;
+exports.Tab = exports.StackBarChart = exports.Stack = exports.Spinner = exports.SingleValueChart = exports.SectionMessageAction = exports.SectionMessage = exports.Select = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressTracker = exports.ProgressBar = exports.PieChart = exports.ModalTransition = exports.ModalTitle = exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.Modal = exports.Lozenge = exports.LoadingButton = exports.ListItem = exports.List = exports.LinkButton = exports.LineChart = exports.Label = exports.Inline = exports.Icon = exports.HorizontalStackBarChart = exports.HorizontalBarChart = exports.HelperMessage = exports.Heading = exports.FormSection = exports.FormHeader = exports.FormFooter = exports.Form = exports.ErrorMessage = exports.EmptyState = exports.DynamicTable = exports.DatePicker = exports.CodeBlock = exports.Code = exports.Checkbox = exports.Calendar = exports.ButtonGroup = exports.Button = exports.Box = exports.BarChart = exports.Badge = void 0;
+exports.RequiredAsterisk = exports.ValidMessage = exports.Tooltip = exports.Toggle = exports.Textfield = exports.TextArea = exports.TagGroup = exports.Tag = exports.Tabs = exports.TabPanel = exports.TabList = void 0;
 exports.Badge = 'Badge';
 exports.BarChart = 'BarChart';
 exports.Box = 'Box';
 exports.Button = 'Button';
 exports.ButtonGroup = 'ButtonGroup';
+exports.Calendar = 'Calendar';
 exports.Checkbox = 'Checkbox';
 exports.Code = 'Code';
 exports.CodeBlock = 'CodeBlock';
 exports.DatePicker = 'DatePicker';
 exports.DynamicTable = 'DynamicTable';
+exports.EmptyState = 'EmptyState';
 exports.ErrorMessage = 'ErrorMessage';
 exports.Form = 'Form';
 exports.FormFooter = 'FormFooter';
@@ -26,6 +28,8 @@ exports.Inline = 'Inline';
 exports.Label = 'Label';
 exports.LineChart = 'LineChart';
 exports.LinkButton = 'LinkButton';
+exports.List = 'List';
+exports.ListItem = 'ListItem';
 exports.LoadingButton = 'LoadingButton';
 exports.Lozenge = 'Lozenge';
 exports.Modal = 'Modal';

package/out/components/utils/content-wrapper.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { ForgeElement } from '../../types';
+declare type ContentWrapperProps = {
+    name: string;
+    children?: ReactNode;
+};
+export declare const ContentWrapper: (props: ContentWrapperProps) => ForgeElement;
+export {};
+//# sourceMappingURL=content-wrapper.d.ts.map

package/out/components/utils/content-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-wrapper.d.ts","sourceRoot":"","sources":["../../../src/components/utils/content-wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,aAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAMF,eAAO,MAAM,cAAc,UAA0C,mBAAmB,KAAK,YAAY,CAAC"}

package/out/components/utils/content-wrapper.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentWrapper = void 0;
+// ContentWrapper is an internal component that allows us to workaround the limitation of the Forge architecture
+// Functions in Forge apps are invoked from within the runtime and it's definition cannot be passed across the bridge.
+// For ADS components that accept a call back function that returns a ReactNode as a prop, these must be evaluated within the runtime to return a ForgeDoc before being passed to the Renderer. Otherwise the Renderer would not be able to render the component at all.
+// The ContentWrapper component should be used to wrap around any callback function that returns a ReactNode so that it will evaluate the callback within the runtime and pass back the evaluated ForgeDoc
+exports.ContentWrapper = 'ContentWrapper';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forge/react",
-  "version": "10.4.0-next.0",
+  "version": "10.5.0-next.0",
   "description": "Forge React reconciler",
   "author": "Atlassian",
   "license": "UNLICENSED",
@@ -13,7 +13,7 @@
     "pack": "./build/bundle-types.sh"
   },
   "dependencies": {
-    "@atlaskit/forge-react-types": "^0.22.2",
+    "@atlaskit/forge-react-types": "^0.27.1",
     "@forge/bridge": "^3.5.0-next.0",
     "@types/react-reconciler": "^0.28.8",
     "lodash": "^4.17.21",