@adaptabletools/adaptable 10.0.0-canary.0

package/src/components/Dashboard/Dashboard.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dashboard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const useDraggable_1 = tslib_1.__importDefault(require("../utils/useDraggable"));
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
+const DashboardToolbar_1 = require("./DashboardToolbar");
+const DropdownButton_1 = tslib_1.__importDefault(require("../DropdownButton"));
+function Dashboard(props) {
+    const { title, children, left, right, onShowDashboardPopup } = props;
+    const [activeTabIndex, setActiveTabIndex] = useProperty_1.default(props, 'activeTabIndex', 0);
+    const [collapsed, setCollapsed] = useProperty_1.default(props, 'collapsed', false);
+    const [floating, setFloating] = useProperty_1.default(props, 'floating', false);
+    const [inline, setInline] = useProperty_1.default(props, 'inline', false);
+    const [position, setPosition] = useProperty_1.default(props, 'position', { x: 0, y: 0 });
+    const expanded = !floating && !collapsed;
+    const { handleRef, targetRef } = useDraggable_1.default({
+        onDrop(dx, dy) {
+            setPosition(({ x, y }) => {
+                return { x: x + dx, y: y + dy };
+            });
+        },
+    });
+    const floatingStyle = {
+        position: 'absolute',
+        left: position.x,
+        top: position.y,
+    };
+    const renderTabs = () => (React.createElement("div", { className: "ab-Dashboard__tabs" }, children &&
+        React.Children.map(children, (child, index) => (React.createElement("button", { className: join_1.default('ab-Dashboard__tab', !collapsed && activeTabIndex === index ? 'ab-Dashboard__tab--active' : ''), key: index, onClick: () => {
+                if (activeTabIndex === index) {
+                    setCollapsed(!collapsed);
+                }
+                else {
+                    setActiveTabIndex(index);
+                    setCollapsed(false);
+                }
+            } }, child.props.title)))));
+    const renderTabsDropdown = () => {
+        var _a, _b, _c;
+        if (children && children.length === 0) {
+            return null;
+        }
+        const activeTabTitle = (_c = (_b = (_a = children === null || children === void 0 ? void 0 : children[activeTabIndex]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : 'Select Toolbar';
+        return (React.createElement(DropdownButton_1.default, { ml: 1, items: React.Children.map(children, (child, index) => ({
+                value: String(index),
+                label: child.props.title,
+                onClick: () => setActiveTabIndex(index),
+            })) }, activeTabTitle));
+    };
+    const renderBar = () => (React.createElement("div", { className: "ab-Dashboard__header", onDoubleClick: (event) => {
+            const target = event.target;
+            // ignore double clicks on buttons, inputs and their children
+            if (!props.canFloat) {
+                return;
+            }
+            if (target.closest('button, input')) {
+                return;
+            }
+            setFloating(!floating);
+        } },
+        React.createElement("div", { className: "ab-Dashboard__header-left" },
+            left,
+            !floating && renderTabs()),
+        floating ? (React.createElement("div", { className: "ab-Dashboard__title", ref: handleRef, key: "title-drag", style: { cursor: 'move' } }, title)) : (React.createElement("div", { className: "ab-Dashboard__title", key: "title" }, title)),
+        React.createElement("div", { className: "ab-Dashboard__header-right" }, right)));
+    const renderHomeToolbar = () => (React.createElement(DashboardToolbar_1.DashboardToolbar, { onConfigure: onShowDashboardPopup, className: "ab-Dashboard__home-toolbar", title: title, tooltip: `Configure Dashboard`, showConfigure: true, showClose: false, accessLevel: 'Full' },
+        left,
+        right,
+        renderTabsDropdown()));
+    return (React.createElement("div", { 
+        // @ts-ignore
+        ref: targetRef, className: join_1.default(`ab-Dashboard`, collapsed ? 'ab-Dashboard--collapsed' : '', floating ? 'ab-Dashboard--floating' : '', inline ? 'ab-Dashboard--inline' : ''), style: floating ? floatingStyle : undefined },
+        expanded && inline ? renderHomeToolbar() : renderBar(),
+        expanded && children && children.length ? (React.createElement("div", { className: "ab-Dashboard__content" }, children[activeTabIndex] ? children[activeTabIndex].props.children : null)) : null));
+}
+exports.Dashboard = Dashboard;

package/src/components/Dashboard/DashboardManager.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { DashboardTab } from '../../PredefinedConfig/DashboardState';
+import { AdaptableDashboardToolbar } from '../../PredefinedConfig/Common/Types';
+import { AdaptableApi } from '../../Api/AdaptableApi';
+export interface DashboardToolbar {
+    Id: AdaptableDashboardToolbar | string;
+    Title: string;
+}
+declare function DashboardManager({ tabs, onTabsChange, availableToolbars, api, }: {
+    tabs: DashboardTab[];
+    onTabsChange: (tabs: DashboardTab[]) => void;
+    availableToolbars: DashboardToolbar[];
+    api: AdaptableApi;
+}): JSX.Element;
+export default DashboardManager;

package/src/components/Dashboard/DashboardManager.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const React = tslib_1.__importStar(require("react"));
+const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+const icons_1 = require("../icons");
+const PanelWithButton_1 = require("../../View/Components/Panels/PanelWithButton");
+const DashboardManagerContext = react_1.createContext({
+    availableToolbars: [],
+});
+const getToolbarTitle = (availableToolbars, toolbarId) => {
+    const found = availableToolbars.find((t) => t.Id === toolbarId);
+    return found ? found.Title : toolbarId;
+};
+function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, }) {
+    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.droppableProps, { style: { display: 'flex' }, "data-name": "dashboard-tabs" }),
+        tabs.map((tab, tabIndex) => (React.createElement(TabItem, { key: tabIndex, tabIndex: tabIndex, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }))),
+        provided.placeholder))));
+}
+function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, }) {
+    return (React.createElement(react_beautiful_dnd_1.Draggable, { draggableId: String(tabIndex), index: tabIndex }, (provided) => (React.createElement("div", Object.assign({ "data-name": "dashboard-tab", ref: provided.innerRef }, provided.draggableProps, { style: Object.assign(Object.assign({}, provided.draggableProps.style), { boxSizing: 'border-box', border: '1px solid var(--ab-color-primarydark)', borderRadius: 'var(--ab__border-radius)', marginRight: 'var(--ab-space-2)', width: 160, display: 'flex', flexDirection: 'column' }) }),
+        React.createElement("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                padding: 'var(--ab-space-1)',
+                borderBottom: '1px solid var(--ab-color-primarydark)',
+            } },
+            React.createElement("div", Object.assign({}, provided.dragHandleProps, { style: {} }),
+                React.createElement(icons_1.Icon, { name: "drag" })),
+            React.createElement("input", { type: "text", value: tab.Name, style: {
+                    flex: 1,
+                    width: '100%',
+                    border: 'none',
+                    marginLeft: 'var(--ab-space-1)',
+                    marginRight: 'var(--ab-space-1)',
+                    alignSelf: 'stretch',
+                    background: 'transparent',
+                    color: 'var(--ab-color-text-on-primary)',
+                }, onChange: (event) => {
+                    onChangeTabName(event.target.value);
+                } }),
+            React.createElement(SimpleButton_1.default, { icon: "delete", variant: "text", onClick: onRemove })),
+        React.createElement(ToolbarList, { toolbars: tab.Toolbars, droppableId: String(tabIndex), onRemove: onRemoveToolbar })))));
+}
+function ToolbarList({ toolbars, droppableId, onRemove, }) {
+    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.droppableProps, { "data-name": "dashboard-toolbar-drop-target", style: {
+            flex: 1,
+            padding: 4,
+            paddingBottom: 0,
+            background: snapshot.isDraggingOver
+                ? 'var(--ab-dashboard-tab-drop-target__background)'
+                : '',
+            minHeight: 200,
+        } }),
+        toolbars.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
+        provided.placeholder))));
+}
+function ToolbarItem({ toolbar, toolbarIndex, onRemove, }) {
+    const { availableToolbars } = react_1.useContext(DashboardManagerContext);
+    return (React.createElement(react_beautiful_dnd_1.Draggable, { draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement("div", Object.assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: Object.assign(Object.assign({}, provided.draggableProps.style), { display: 'flex', alignItems: 'center', border: '1px solid var(--ab-color-primary)', backgroundColor: snapshot.isDragging
+                ? 'var(--ab-dashboard-toolbar-drag__background)'
+                : 'var(--ab-color-primarylight)', paddingLeft: 'var(--ab-space-1)', marginBottom: 'var(--ab-space-1)' }) }),
+        React.createElement("div", { style: { flex: 1 } }, getToolbarTitle(availableToolbars, toolbar)),
+        React.createElement(SimpleButton_1.default, { icon: "clear", variant: "text", padding: 1, onClick: onRemove })))));
+}
+function UnusedPanel({ toolbars }) {
+    return (React.createElement("div", { "data-name": "dashboard-toolbars", style: {
+            border: '1px solid var(--ab-color-primarydark)',
+            borderRadius: 'var(--ab__border-radius)',
+            marginBottom: 'var(--ab-space-2)',
+            paddingBottom: 'var(--ab-space-1)',
+            backgroundColor: 'var(--ab-color-defaultbackground)',
+        } },
+        React.createElement("div", { style: { padding: 'var(--ab-space-2)' } },
+            React.createElement("b", null, "Available Toolbars"),
+            " (drag into a Tab below)"),
+        React.createElement(UnusedToolbarList, { toolbars: toolbars })));
+}
+function UnusedToolbarList({ toolbars }) {
+    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "UNUSED", type: "TOOLBAR", isDropDisabled: true, direction: "horizontal" }, (provided) => (React.createElement("div", Object.assign({ ref: provided.innerRef, "data-name": "dashboard-toolbars-list" }, provided.droppableProps, { style: {
+            display: 'flex',
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            paddingLeft: 'var(--ab-space-2)',
+            paddingRight: 'var(--ab-space-2)',
+        } }),
+        toolbars.map((toolbar, toolbarIndex) => (React.createElement(UnusedToolbarItem, { key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex }))),
+        provided.placeholder))));
+}
+function UnusedToolbarItem({ toolbar, toolbarIndex }) {
+    const { availableToolbars } = react_1.useContext(DashboardManagerContext);
+    return (React.createElement(react_beautiful_dnd_1.Draggable, { draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement("div", Object.assign({ "data-name": "dashboard-toolbar", ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: Object.assign(Object.assign({}, provided.draggableProps.style), { border: '1px solid var(--ab-color-primary)', backgroundColor: snapshot.isDragging
+                ? 'var(--ab-dashboard-toolbar-drag__background)'
+                : 'var(--ab-color-primarylight)', padding: 'var(--ab-space-1) var(--ab-space-2)', marginRight: 'var(--ab-space-1)', marginBottom: 'var(--ab-space-1)' }) }), getToolbarTitle(availableToolbars, toolbar)))));
+}
+function DashboardManager({ tabs, onTabsChange, availableToolbars, api, }) {
+    const moduleService = api.internalApi.getModuleService();
+    const moduleInfo = moduleService.getModuleInfoByModule('Dashboard');
+    const contextValue = react_1.useMemo(() => ({
+        availableToolbars,
+    }), [availableToolbars]);
+    const unusedToolbars = react_1.useMemo(() => availableToolbars
+        .map((t) => t.Id)
+        .filter((toolbar) => {
+        return !tabs.some((tab) => tab.Toolbars.includes(toolbar));
+    }), [tabs, availableToolbars]);
+    const handleToolbarDragEnd = (result) => {
+        const { source, destination, draggableId } = result;
+        if (!source || !destination) {
+            return;
+        }
+        if (source.droppableId !== 'UNUSED') {
+            const sourceTabToolbars = tabs[Number(source.droppableId)].Toolbars;
+            sourceTabToolbars.splice(source.index, 1);
+        }
+        if (destination.droppableId !== 'UNUSED') {
+            const destinationTabToolbars = tabs[Number(destination.droppableId)].Toolbars;
+            destinationTabToolbars.splice(destination.index, 0, draggableId);
+        }
+        onTabsChange([...tabs]);
+    };
+    const handleTabDragEnd = (result) => {
+        const { source, destination } = result;
+        if (!source || !destination)
+            return;
+        const [removed] = tabs.splice(source.index, 1);
+        tabs.splice(destination.index, 0, removed);
+        onTabsChange([...tabs]);
+    };
+    const handleRemoveTab = (tabIndex) => {
+        onTabsChange(tabs.filter((_, index) => index !== tabIndex));
+    };
+    const handleTabAdd = () => {
+        onTabsChange([...tabs, { Name: 'New Tab', Toolbars: [] }]);
+    };
+    const handleRemoveToolbar = (tabIndex, toolbarIndex) => {
+        onTabsChange(tabs.map((tab, index) => {
+            if (index !== tabIndex)
+                return tab;
+            return Object.assign(Object.assign({}, tab), { Toolbars: tab.Toolbars.filter((_, index) => index !== toolbarIndex) });
+        }));
+    };
+    const handleChangeTabName = (tabIndex, tabName) => {
+        onTabsChange(tabs.map((tab, index) => {
+            if (index !== tabIndex)
+                return tab;
+            return Object.assign(Object.assign({}, tab), { Name: tabName });
+        }));
+    };
+    return (React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: (result) => {
+            if (result.type === 'TAB')
+                handleTabDragEnd(result);
+            if (result.type === 'TOOLBAR')
+                handleToolbarDragEnd(result);
+        } },
+        React.createElement(DashboardManagerContext.Provider, { value: contextValue },
+            React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
+                React.createElement(UnusedPanel, { toolbars: unusedToolbars }),
+                React.createElement(PanelWithButton_1.PanelWithButton, { headerText: moduleInfo.FriendlyName + ' Tabs', variant: "default", button: React.createElement(SimpleButton_1.default, { onClick: handleTabAdd }, "Add Tab"), bodyProps: { padding: 1 } },
+                    React.createElement("div", { style: { display: 'flex', flex: 1 } },
+                        React.createElement(TabList, { tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName })))))));
+}
+exports.default = DashboardManager;

package/src/components/Dashboard/DashboardTab.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare type DashboardTabProps = {
+    title: string;
+    children: ReactNode;
+};
+export declare function DashboardTab(props: DashboardTabProps): null;

package/src/components/Dashboard/DashboardTab.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardTab = void 0;
+function DashboardTab(props) {
+    return null;
+}
+exports.DashboardTab = DashboardTab;

package/src/components/Dashboard/DashboardToolbar.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { AccessLevel } from '../../PredefinedConfig/Common/Entitlement';
+export declare type DashboardToolbarProps = {
+    className?: string;
+    title: string;
+    tooltip?: string;
+    onClose?: () => void;
+    onConfigure?: () => void;
+    children: ReactNode;
+    showConfigure: boolean;
+    showClose: boolean;
+    accessLevel: AccessLevel;
+};
+export declare function DashboardToolbar(props: DashboardToolbarProps): JSX.Element;

package/src/components/Dashboard/DashboardToolbar.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardToolbar = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const rebass_1 = require("rebass");
+function DashboardToolbar(props) {
+    return (React.createElement("div", { className: join_1.default('ab-Dashboard__toolbar', props.className) },
+        React.createElement("div", { className: "ab-Dashboard__toolbar-content" }, props.children),
+        React.createElement(rebass_1.Flex, { className: "ab-Dashboard__toolbar-title", flexDirection: "row", alignItems: "center" },
+            React.createElement("span", null, props.title),
+            props.showConfigure && (React.createElement(SimpleButton_1.default, { icon: "build", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Configure ${props.title}`, onClick: () => props.onConfigure() })),
+            ' ',
+            props.showClose && (React.createElement(SimpleButton_1.default, { style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "clear", variant: "text", tone: "none", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Close ${props.title}`, onClick: () => props.onClose() })))));
+}
+exports.DashboardToolbar = DashboardToolbar;

package/src/components/Dashboard/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Dashboard';
+export * from './DashboardTab';
+export * from './DashboardToolbar';

package/src/components/Dashboard/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Dashboard"), exports);
+tslib_1.__exportStar(require("./DashboardTab"), exports);
+tslib_1.__exportStar(require("./DashboardToolbar"), exports);

package/src/components/Datepicker/Caption.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CaptionProps } from '../../bundle-dependencies/bundles/react-day-picker';
+/**
+ * Render the caption of a month, which includes title and navigation buttons.
+ * The caption has a different layout when setting the `numberOfMonths` prop.
+ */
+export declare function Caption(props: CaptionProps): JSX.Element;

package/src/components/Datepicker/Caption.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Caption = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const isSameMonth_1 = tslib_1.__importDefault(require("date-fns/isSameMonth"));
+const add_1 = tslib_1.__importDefault(require("date-fns/add"));
+// because stencil doesn't correctly pick up commonjs at runtime (https://adaptabletools.zendesk.com/agent/tickets/320),
+// and in order to avoid webpack 5 bug (https://github.com/AdaptableTools/adaptable/commit/c66712782f243c515630d57e58e0848a7346cf33)
+// we have to use a bundle and fix the issue once and for all
+const react_day_picker_1 = require("../../bundle-dependencies/bundles/react-day-picker");
+const CaptionLabel_1 = require("./CaptionLabel");
+/**
+ * Render the caption of a month, which includes title and navigation buttons.
+ * The caption has a different layout when setting the `numberOfMonths` prop.
+ */
+function Caption(props) {
+    const { displayMonth } = props;
+    const context = react_day_picker_1.useDayPicker();
+    const { classNames, numberOfMonths, disableNavigation, styles, onMonthChange, dir, } = context;
+    const { goToMonth, displayMonths } = react_day_picker_1.useNavigation();
+    const handlePreviousClick = () => {
+        handleMonthChange(add_1.default(displayMonth, { months: -1 }));
+    };
+    const handleNextClick = () => {
+        handleMonthChange(add_1.default(displayMonth, { months: 1 }));
+    };
+    const handleMonthChange = (newMonth) => {
+        goToMonth(newMonth);
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newMonth);
+    };
+    const handleNextYearClick = () => {
+        handleMonthChange(add_1.default(displayMonth, { years: 1 }));
+    };
+    const handlePreviousYearClick = () => {
+        handleMonthChange(add_1.default(displayMonth, { years: -1 }));
+    };
+    const displayIndex = displayMonths.findIndex((month) => isSameMonth_1.default(displayMonth, month));
+    let isFirst = displayIndex === 0;
+    let isLast = displayIndex === displayMonths.length - 1;
+    if (dir === 'rtl') {
+        [isLast, isFirst] = [isFirst, isLast];
+    }
+    const captionLabel = React.createElement(CaptionLabel_1.CaptionLabel, { displayMonth: displayMonth });
+    return (React.createElement("div", { className: classNames.caption, style: styles.caption },
+        disableNavigation && captionLabel,
+        !disableNavigation && (React.createElement(React.Fragment, null,
+            React.createElement(CaptionLabel_1.CaptionLabel, { displayMonth: displayMonth, onPreviousYearClick: handlePreviousYearClick, onNextYearClick: handleNextYearClick, onNextMonthClick: handleNextClick, onPreviousMonthClick: handlePreviousClick })))));
+}
+exports.Caption = Caption;

package/src/components/Datepicker/CaptionLabel.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CaptionLabelProps } from '../../bundle-dependencies/bundles/react-day-picker';
+export declare function CaptionLabel(props: CaptionLabelProps & {
+    onPreviousYearClick?: VoidFunction;
+    onPreviousMonthClick?: VoidFunction;
+    onNextYearClick?: VoidFunction;
+    onNextMonthClick?: VoidFunction;
+}): JSX.Element;

package/src/components/Datepicker/CaptionLabel.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaptionLabel = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+// because stencil doesn't correctly pick up commonjs at runtime (https://adaptabletools.zendesk.com/agent/tickets/320),
+// and in order to avoid webpack 5 bug (https://github.com/AdaptableTools/adaptable/commit/c66712782f243c515630d57e58e0848a7346cf33)
+// we have to use a bundle and fix the issue once and for all
+const react_day_picker_1 = require("../../bundle-dependencies/bundles/react-day-picker");
+const rebass_1 = require("rebass");
+const format_1 = tslib_1.__importDefault(require("date-fns/format"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+const react_1 = require("react");
+function CaptionLabel(props) {
+    const { locale, classNames, styles } = react_day_picker_1.useDayPicker();
+    const { onPreviousYearClick, onNextYearClick, onNextMonthClick, onPreviousMonthClick } = props;
+    const captionStyles = react_1.useMemo(() => (Object.assign(Object.assign({}, styles.caption_label), { width: '100%' })), []);
+    return (React.createElement("div", { key: "caption", className: classNames.caption_label, style: captionStyles, "aria-live": "polite", "aria-atomic": "true" },
+        React.createElement(SimpleButton_1.default, { padding: 1, mr: 1, variant: "text", icon: "arrow-left", onClick: onPreviousMonthClick }),
+        React.createElement(rebass_1.Flex, { justifyContent: "center", style: { minWidth: 80, flex: 2 } }, format_1.default(props.displayMonth, 'LLLL', { locale })),
+        React.createElement(SimpleButton_1.default, { padding: 1, ml: 1, variant: "text", icon: "arrow-right", onClick: onNextMonthClick }),
+        React.createElement(SimpleButton_1.default, { padding: 1, mr: 1, variant: "text", icon: "arrow-left", onClick: onPreviousYearClick }),
+        React.createElement(rebass_1.Flex, { justifyContent: "center", style: { minWidth: 40, flex: 1 } },
+            format_1.default(props.displayMonth, 'y', { locale }),
+            ' '),
+        React.createElement(SimpleButton_1.default, { padding: 1, ml: 1, variant: "text", icon: "arrow-right", onClick: onNextYearClick })));
+}
+exports.CaptionLabel = CaptionLabel;

package/src/components/Datepicker/DatepickerContext.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export declare const DatepickerContext: React.Context<{
+    onHide?: VoidFunction;
+    onShow?: VoidFunction;
+    showClearButton?: boolean;
+}>;
+export declare const useDatepickerContext: () => {
+    onHide?: VoidFunction;
+    onShow?: VoidFunction;
+    showClearButton?: boolean;
+};

package/src/components/Datepicker/DatepickerContext.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDatepickerContext = exports.DatepickerContext = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+exports.DatepickerContext = React.createContext({
+    onShow: () => { },
+    onHide: () => { },
+});
+exports.useDatepickerContext = () => {
+    return React.useContext(exports.DatepickerContext);
+};

package/src/components/Datepicker/index.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { BoxProps } from 'rebass';
+import { DatepickerButton } from '../../AdaptableOptions/DateInputOptions';
+export declare type DatepickerProps = Omit<BoxProps, 'value' | 'onChange' | 'defaultValue'> & {
+    value: Date | undefined;
+    defaultValue?: Date | undefined;
+    onChange: (value: Date | undefined) => void;
+    onHide?: VoidFunction;
+    showClearButton?: boolean;
+    datepickerButtons?: DatepickerButton[];
+    dateProps: {
+        format: string;
+        locale?: Locale;
+    };
+    showWeekNumber?: boolean;
+    showOutsideDays?: boolean;
+};
+export declare const Datepicker: React.ForwardRefExoticComponent<Pick<DatepickerProps, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "margin" | "children" | "key" | "list" | "step" | "contextMenu" | "type" | "min" | "rows" | "colSpan" | "rowSpan" | "onClick" | "value" | "download" | "checked" | "name" | "className" | "id" | "lang" | "method" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "src" | "srcLang" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "headers" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg" | "showClearButton" | "showOutsideDays" | "showWeekNumber" | "onHide" | "datepickerButtons" | "dateProps"> & React.RefAttributes<HTMLInputElement>>;

package/src/components/Datepicker/index.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Datepicker = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+// because stencil doesn't correctly pick up commonjs at runtime (https://adaptabletools.zendesk.com/agent/tickets/320),
+// and in order to avoid webpack 5 bug (https://github.com/AdaptableTools/adaptable/commit/c66712782f243c515630d57e58e0848a7346cf33)
+// we have to use a bundle and fix the issue once and for all
+const react_day_picker_1 = require("../../bundle-dependencies/bundles/react-day-picker");
+const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
+const Input_1 = tslib_1.__importDefault(require("../Input"));
+const react_1 = require("react");
+const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
+const FieldWrap_1 = tslib_1.__importDefault(require("../FieldWrap"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+const rebass_1 = require("rebass");
+const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
+const Caption_1 = require("./Caption");
+const CaptionLabel_1 = require("./CaptionLabel");
+const DatepickerContext_1 = require("./DatepickerContext");
+const addDays_1 = tslib_1.__importDefault(require("date-fns/addDays"));
+const addBusinessDays_1 = tslib_1.__importDefault(require("date-fns/addBusinessDays"));
+const DatepickerOverlay = ({ onHide, children, onKeyDown, }) => {
+    const domRef = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, tabIndex: -1, onKeyDown: onKeyDown, onBlur: (e) => {
+            var _a;
+            const { relatedTarget } = e;
+            const node = domRef.current;
+            // relatedTarget is the newly focused element as a result of this blur event
+            // so we close the overlay when the newly focused element is outside the overlay
+            if (relatedTarget == null || !((_a = node.contains) === null || _a === void 0 ? void 0 : _a.call(node, relatedTarget))) {
+                onHide();
+            }
+        } }, children));
+};
+exports.Datepicker = React.forwardRef((props, ref) => {
+    var _a;
+    const { dateProps, required, disabled, style, placeholder, showWeekNumber, showOutsideDays, value: _, defaultValue: __, onChange: ___, showClearButton: showClearButtonFromProps, datepickerButtons } = props, boxProps = tslib_1.__rest(props, ["dateProps", "required", "disabled", "style", "placeholder", "showWeekNumber", "showOutsideDays", "value", "defaultValue", "onChange", "showClearButton", "datepickerButtons"]);
+    const datepickerContext = DatepickerContext_1.useDatepickerContext();
+    const showClearButton = (showClearButtonFromProps !== null && showClearButtonFromProps !== void 0 ? showClearButtonFromProps : datepickerContext.showClearButton) === false ? false : true;
+    let [value, setValue] = useProperty_1.default(props, 'value', undefined, {
+        onChange: props.onChange,
+    });
+    const useInputOptions = Object.assign(Object.assign({}, dateProps), { required });
+    if (value && value instanceof Date && !isNaN(+value)) {
+        useInputOptions.defaultSelected = value;
+    }
+    const [month, setMonth] = react_1.useState(value !== null && value !== void 0 ? value : new Date());
+    const { dayPickerProps, setSelected } = react_day_picker_1.useInput(useInputOptions);
+    const updateValue = (value) => {
+        setValue(value);
+        setSelected(value);
+    };
+    const inputValue = (_a = FormatHelper_1.DateFormatter(value, { Pattern: dateProps.format })) !== null && _a !== void 0 ? _a : '';
+    const [visible, doSetVisible] = react_1.useState(false);
+    const setVisible = (visible) => {
+        var _a, _b;
+        doSetVisible(visible);
+        if (!visible) {
+            (_a = datepickerContext === null || datepickerContext === void 0 ? void 0 : datepickerContext.onHide) === null || _a === void 0 ? void 0 : _a.call(datepickerContext);
+        }
+        else {
+            (_b = datepickerContext === null || datepickerContext === void 0 ? void 0 : datepickerContext.onShow) === null || _b === void 0 ? void 0 : _b.call(datepickerContext);
+        }
+    };
+    const renderButton = (label, onClick) => (React.createElement(SimpleButton_1.default, { onClick: onClick, margin: '2px' }, label));
+    const todayDate = new Date();
+    const footerButtonsMap = {
+        close: renderButton('Close', () => setVisible(false)),
+        today: renderButton('Today', () => updateValue(todayDate)),
+        tomorrow: renderButton('Tomorrow', () => updateValue(addDays_1.default(todayDate, 1))),
+        yesterday: renderButton('Yesterday', () => updateValue(addDays_1.default(todayDate, -1))),
+        nextWorkday: renderButton('Next Workday', () => updateValue(addBusinessDays_1.default(todayDate, 1))),
+        prevWorkday: renderButton('Prev Workday', () => updateValue(addBusinessDays_1.default(todayDate, -1))),
+        '-': React.createElement("div", { style: { flex: '1 1 1%' } }),
+        '|': React.createElement("hr", { style: { width: '100%', height: 0, margin: 0, border: 'none' } }),
+    };
+    const footerButtons = datepickerButtons.map((buttonKey, index) => React.cloneElement(footerButtonsMap[buttonKey], { key: index }));
+    const clearButton = showClearButton ? (React.createElement(SimpleButton_1.default, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "clear", onMouseDown: (e) => {
+            e.preventDefault();
+            updateValue(undefined);
+        }, accessLevel: 'Full' })) : null;
+    const calendarButton = (React.createElement(SimpleButton_1.default, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
+    return (React.createElement(OverlayTrigger_1.default, { visible: visible, alignHorizontal: 'left', render: () => (React.createElement(DatepickerOverlay, { onHide: () => setVisible(false), onKeyDown: (e) => {
+                if (e.key === 'Escape') {
+                    setVisible(false);
+                }
+            } },
+            React.createElement(react_day_picker_1.DayPicker, Object.assign({ fixedWeeks: true }, dayPickerProps, { showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", month: isNaN(+month) ? new Date() : month, onMonthChange: setMonth, components: { Caption: Caption_1.Caption, CaptionLabel: CaptionLabel_1.CaptionLabel }, onSelect: updateValue, footer: React.createElement(rebass_1.Flex, { justifyContent: "space-between", mt: 2, flexWrap: 'wrap' }, footerButtons) })))) },
+        React.createElement(FieldWrap_1.default, Object.assign({}, boxProps, { style: {
+                borderRadius: style === null || style === void 0 ? void 0 : style.borderRadius,
+                width: style === null || style === void 0 ? void 0 : style.width,
+                maxWidth: style === null || style === void 0 ? void 0 : style.maxWidth,
+            }, onFocus: () => {
+                if (!visible) {
+                    setVisible(true);
+                }
+            } }),
+            React.createElement(Input_1.default, { value: inputValue, placehoder: placeholder !== null && placeholder !== void 0 ? placeholder : dateProps.format, style: style, disabled: disabled, readOnly: true, ref: ref }),
+            !!inputValue ? clearButton : null,
+            calendarButton)));
+});