@adaptabletools/adaptable 17.0.0-canary.0 → 17.0.0-canary.1

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

@@ -3,7 +3,7 @@ import { ReactNode, HTMLProps } from 'react';
 export declare const baseClassName = "ab-Panel";
 export interface HeaderProps extends FlexProps {
 }
-export declare type PanelProps = HTMLProps<HTMLElement> & {
+export type PanelProps = HTMLProps<HTMLElement> & {
     header?: ReactNode | string;
     headerProps?: HeaderProps;
     bodyProps?: BoxProps;

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

@@ -1,6 +1,6 @@
 import { ReactNode, SyntheticEvent } from 'react';
 import { BoxProps, FlexProps } from 'rebass';
-declare type TypeProps = {
+type TypeProps = {
     checked?: boolean;
     as?: any;
     name?: string;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type OnResizeFn = (size: {
+type OnResizeFn = (size: {
     width: number;
     height: number;
 }) => void;

package/src/components/Select/Select.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { AccessLevel, AdaptableSystemIconName } from '../../types';
+export type SelectOption<SelectValue extends unknown> = {
+    label: React.ReactNode;
+    icon?: AdaptableSystemIconName;
+    value: SelectValue;
+    isDisabled?: boolean;
+};
+export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = false> = {
+    options: readonly SelectOption<SelectValue>[] | SelectOption<SelectValue>[];
+    disabled?: boolean;
+    menuPosition?: 'fixed' | 'absolute';
+    isClearable?: boolean;
+    isMulti?: IsMulti;
+    onChange: (value: IsMulti extends true ? SelectValue[] : SelectValue) => void;
+    value: IsMulti extends true ? SelectValue[] : SelectValue;
+    placeholder?: string;
+    'data-name'?: string;
+    'data-id'?: string;
+    rederSingleValue?: (option: SelectOption<SelectValue>) => React.ReactNode;
+    className?: string;
+    isLoding?: boolean;
+    onFocus?: () => void;
+    accessLevel?: AccessLevel;
+    style?: React.CSSProperties;
+    onInputChange?: (value: string) => void;
+    variant?: 'default' | 'raised';
+    isCreatable?: boolean;
+};
+export declare const Select: <SelectValue extends unknown, IsMulti extends boolean = false>(props: SelectProps<SelectValue, IsMulti>) => JSX.Element;

package/src/components/Select/Select.js

@@ -0,0 +1,128 @@
+import { isSameDay } from 'date-fns';
+import * as React from 'react';
+import ReactSelect, { components } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+const commonStyles = ({ isFocused, isDisabled, }) => {
+    return {
+        color: 'var(--ab-cmp-input__color)',
+        background: isDisabled
+            ? 'var(--ab-cmp-input--disabled__background)'
+            : 'var(--ab-cmp-input__background)',
+    };
+};
+export const Select = function (props) {
+    var _a, _b, _c, _d;
+    let selectedOption = (_a = props.options.find((option) => {
+        if (typeof option.value === 'object' && option.value instanceof Date) {
+            return isSameDay(option.value, props.value);
+        }
+        return option.value === props.value;
+    })) !== null && _a !== void 0 ? _a : null;
+    if (!selectedOption && props.value !== undefined && props.value !== null) {
+        selectedOption = {
+            value: props.value,
+            label: props.value,
+        };
+    }
+    let disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
+    const accessLevel = (_c = props.accessLevel) !== null && _c !== void 0 ? _c : 'Full';
+    if (accessLevel === 'Hidden') {
+        return null;
+    }
+    if (accessLevel === 'ReadOnly') {
+        disabled = true;
+    }
+    /**
+     * If on each render a new reference is passed, the menu will not open using the keyboard.
+     */
+    const SelectContainer = React.useMemo(() => {
+        return (inputProps) => {
+            return (React.createElement(components.SelectContainer, Object.assign({}, inputProps, { innerProps: Object.assign({ 
+                    // @ts-ignore
+                    'data-name': props['data-name'], 'data-id': props['data-id'] }, inputProps.innerProps) })));
+        };
+    }, []);
+    const ValueContainer = React.useMemo(() => {
+        return (inputProps) => {
+            return (React.createElement(components.ValueContainer, Object.assign({}, inputProps, { innerProps: Object.assign({ 'data-name': 'value-container' }, inputProps.innerProps) })));
+        };
+    }, []);
+    const SelectComponent = props.isCreatable ? CreatableSelect : ReactSelect;
+    return (React.createElement(SelectComponent, { onInputChange: props.onInputChange, onFocus: props.onFocus, isLoading: props.isLoding, options: props.options, className: props.className, isDisabled: disabled, isMulti: props.isMulti, value: selectedOption, menuPosition: (_d = props.menuPosition) !== null && _d !== void 0 ? _d : 'fixed', isClearable: props.isClearable, onChange: (option) => {
+            if (props.isMulti) {
+                props.onChange(option.map((x) => x === null || x === void 0 ? void 0 : x.value));
+            }
+            else {
+                props.onChange(option === null || option === void 0 ? void 0 : option.value);
+            }
+        }, placeholder: props.placeholder, components: {
+            SelectContainer,
+            ValueContainer,
+            SingleValue: (singleValueProps) => {
+                return (React.createElement(components.SingleValue, Object.assign({}, singleValueProps), props.rederSingleValue
+                    ? props.rederSingleValue(selectedOption)
+                    : singleValueProps.children));
+            },
+        }, 
+        /**
+         * Using styles is the preferred way to style react-select.
+         * https://react-select.com/styles#the-styles-prop
+         */
+        styles: {
+            // Typescript issue with csstype@3.1.3
+            // https://github.com/JedWatson/react-select/issues/5825#issuecomment-1850472549
+            // Remove
+            container: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), props.style);
+            },
+            // @ts-ignorets-ignore when fixed
+            menuPortal: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { zIndex: 999999 });
+            },
+            // @ts-ignore
+            menu: (baseStyle, state) => {
+                return Object.assign(Object.assign(Object.assign({}, baseStyle), { zIndex: 999999, boxShadow: 'var(--ab-cmp-dropdownbutton-list__box-shadow)', minWidth: 160 }), commonStyles(state));
+            },
+            // @ts-ignore
+            option: (baseStyle, state) => {
+                const style = Object.assign(Object.assign(Object.assign({}, baseStyle), commonStyles(state)), { '&:active': {
+                        background: 'var(--ab-cmp-dropdownbutton-list-item-hover__background)',
+                    }, opacity: state.isDisabled ? 0.5 : 1 });
+                if (state.isSelected) {
+                    style.background = 'var(--ab-cmp-dropdownbutton-list-item-active__background)';
+                    style.color = 'var(--ab-cmp-dropdownbutton-list-item-active__color)';
+                }
+                if (state.isFocused) {
+                    style.background = 'var(--ab-cmp-dropdownbutton-list-item-hover__background)';
+                }
+                return style;
+            },
+            // @ts-ignore
+            input: (baseStyle, state) => {
+                return Object.assign(Object.assign({}, baseStyle), { color: 'var(--ab-cmp-input__color)' });
+            },
+            // @ts-ignore
+            singleValue: (baseStyle, state) => {
+                return Object.assign(Object.assign({}, baseStyle), commonStyles(state));
+            },
+            // @ts-ignore
+            control: (baseStyle, state) => {
+                state;
+                return Object.assign(Object.assign(Object.assign({}, baseStyle), commonStyles(state)), { 
+                    // height: 30,
+                    minHeight: 32, boxShadow: state.isFocused ? 'var(--ab-focus__box-shadow)' : 'none', outline: state.isFocused ? 'var(--ab-focus__outline)' : 'none', border: props.variant && props.variant === 'raised'
+                        ? '1px solid transparent'
+                        : 'var(--ab-cmp-input__border)', '&:hover': {
+                        border: 'var(--ab-cmp-input__border)',
+                    } });
+            },
+            // @ts-ignore
+            dropdownIndicator: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { padding: 0 });
+            },
+            // @ts-ignore
+            clearIndicator: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { padding: '2px 3px' });
+            },
+        } }));
+};

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

@@ -0,0 +1 @@
+export * from './Select';

package/src/components/Select/index.js

@@ -0,0 +1 @@
+export * from './Select';

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

@@ -1,5 +1,5 @@
 import { SyntheticEvent, HTMLProps } from 'react';
-declare type SelectableListValues = {
+type SelectableListValues = {
     [key: string]: boolean;
 };
 export declare const useSelectionEvent: () => (event: SyntheticEvent, { index }: {

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

@@ -1,6 +1,6 @@
 import { BoxProps } from 'rebass';
 import { HTMLProps } from 'react';
-export declare type TabsProps<VALUE_TYPE> = HTMLProps<HTMLElement> & {
+export type TabsProps<VALUE_TYPE> = HTMLProps<HTMLElement> & {
     value?: VALUE_TYPE;
     defaultValue?: VALUE_TYPE;
     onValueChange?: (value: VALUE_TYPE) => void;
@@ -25,7 +25,7 @@ export declare const Tabs: {
         };
     };
 };
-declare type TabProps = {
+type TabProps = {
     index?: number;
     keyboardNavigation?: boolean;
 } & BoxProps & HTMLProps<HTMLDivElement>;
@@ -35,7 +35,7 @@ export declare const Tab: {
         isTabsTab: boolean;
     };
 };
-declare type ContentProps = {
+type ContentProps = {
     value?: string | number;
 } & BoxProps;
 export declare const Content: {

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { BoxProps } from 'rebass';
 import { HTMLProps } from 'react';
 export declare const baseClassName = "ab-Textarea";
-export declare type TextareaProps = Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> & {
+export type TextareaProps = Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> & {
     placehoder?: string;
     type?: string;
     disabled?: boolean;

package/src/components/Toggle/Toggle.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableSystemIconName } from '../../types';
-export declare type ToggleProps = {
+export type ToggleProps = {
     onPressedChange: (pressed: boolean) => void;
     pressed?: boolean;
     icon?: AdaptableSystemIconName;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BoxProps } from 'rebass';
+export declare const baseClassName = "ab-WarningBox";
+export declare const WarningBox: (props: BoxProps) => JSX.Element;

package/src/components/WarningBox/index.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Box } from 'rebass';
+import join from '../utils/join';
+export const baseClassName = 'ab-WarningBox';
+export const WarningBox = (props) => {
+    return React.createElement(Box, Object.assign({}, props, { className: join(props.className, baseClassName) }));
+};

package/src/components/WindowModal/WindowModal.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-export declare type WindowModalSize = {
+export type WindowModalSize = {
     width: number;
     height: number;
 };
-export declare type WindowModalPosition = {
+export type WindowModalPosition = {
     x: number;
     y: number;
 };

package/src/components/icons/DefaultIcon.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-export declare type IconProps = {
+export type IconProps = {
     size?: number;
     children?: ReactNode;
     name?: string;

package/src/components/icons/index.js

@@ -64,6 +64,7 @@ import StateManagement from './state-management';
 import ToolPanel from './tool-panel';
 import PercentBar from './percent-bar';
 import Sparkline from './spark-line';
+import Resume from './resume';
 import PieChart from './pie-chart';
 import PlusMinus from './plus-minus';
 import QuickSearch from './quick-search';
@@ -189,6 +190,7 @@ export const allIcons = {
     'horizontal-lines': FreetextColumn,
     'percent-tag': PercentBar,
     'spark-line': Sparkline,
+    'resume': Resume,
     'pie-chart': PieChart,
     'add-circle': PlusMinus,
     reminder: Reminder,

package/src/components/icons/resume.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/src/components/icons/resume.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, Object.assign({}, props, { viewBox: "0 -960 960 960" }),
+    React.createElement("path", { d: "M240-240v-480h80v480h-80Zm160 0 400-240-400-240v480Zm80-141v-198l165 99-165 99Zm0-99Z" })));

package/src/components/utils/useContainerScrollObserver/index.d.ts

@@ -1,4 +1,4 @@
-declare type UseContainerScrollObserverCallback = (currentIndex: number) => void;
+type UseContainerScrollObserverCallback = (currentIndex: number) => void;
 export declare const useContainerScrollObserver: (callback: UseContainerScrollObserverCallback) => {
     ref: (node: HTMLElement) => void;
     scrollToIndex: (index: number) => void;

package/src/components/utils/uuid.d.ts

@@ -1,2 +1,2 @@
-export declare type TypeUuid = string;
+export type TypeUuid = string;
 export declare const createUuid: () => TypeUuid;

package/src/metamodel/adaptable-metamodel-model.d.ts

@@ -1,4 +1,4 @@
-export declare type AdaptableMetamodel = Record<string, MetamodelItem>;
+export type AdaptableMetamodel = Record<string, MetamodelItem>;
 export interface MetamodelItem {
     name: string;
     kind: 'A' | 'I' | 'C';
@@ -16,4 +16,4 @@ export interface MetamodelItemProperty {
     gridInfo?: 'item' | 'container';
     noCode?: 'item' | 'container';
 }
-export declare type MetamodelItemPropertyKind = 'R' | 'n' | 's' | 'b' | 'd' | 'f' | 'a' | 'i' | 'u';
+export type MetamodelItemPropertyKind = 'R' | 'n' | 's' | 'b' | 'd' | 'f' | 'a' | 'i' | 'u';