@progress/kendo-themes-html 6.4.0-dev.5 → 6.4.0-dev.6

package/dist/types/animation-container/animation-container.spec.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const ANIMATION_CONTAINER_CLASSNAME = "k-animation-container";
+export type KendoAnimationContainerProps = {
+    positionMode: "absolute" | "fixed";
+    offset?: {
+        top: number | string;
+        left: number | string;
+    };
+    animationStyle?: React.CSSProperties;
+};
+export declare const AnimationContainer: {
+    (props: KendoAnimationContainerProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        positionMode: string;
+    };
+};
+export default AnimationContainer;

package/dist/types/animation-container/index.d.ts

@@ -0,0 +1 @@
+export * from './animation-container.spec';

package/dist/types/grid/tests/grid-column-reordering.d.ts

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

package/dist/types/index.d.ts

@@ -45,6 +45,7 @@ export * from './upload/index';
 export * from './fab/index';
 export * from './menu/index';
 export * from './toolbar/index';
+export * from './animation-container';
 export * from './action-sheet/index';
 export * from './dialog/index';
 export * from './notification/index';

package/dist/types/popup/popup.spec.d.ts

@@ -1,10 +1,19 @@
 /// <reference types="react" />
 export declare const POPUP_CLASSNAME = "k-popup";
+export type KendoPopupProps = {
+    positionMode: "absolute" | "fixed";
+    offset?: {
+        top: number | string;
+        left: number | string;
+    };
+};
 export declare const Popup: {
-    (props: React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+    (props: KendoPopupProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element;
     states: any[];
     options: {};
     className: string;
-    defaultProps: {};
+    defaultProps: {
+        positionMode: string;
+    };
 };
 export default Popup;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "6.4.0-dev.5",
+  "version": "6.4.0-dev.6",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -51,5 +51,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "113bdd2ea2c7998399b68fc676b3024b1b3ed030"
+  "gitHead": "819182cb70ea91feee6b2d63a676145e13f80d28"
 }

package/src/action-sheet/action-sheet.spec.tsx

@@ -1,5 +1,6 @@
 import { classNames } from '../misc';
 import { ActionSheetHeader, ActionSheetItems, ActionSheetFooter } from '../action-sheet';
+import { AnimationContainer } from '../animation-container';
 
 export const ACTIONSHEET_CLASSNAME = `k-actionsheet`;
 
@@ -77,41 +78,39 @@ export const ActionSheet = (
     return (
         <div className="k-actionsheet-container">
             <div className="k-overlay"></div>
-            <div className="k-animation-container">
-                <div className="k-child-animation-container"
-                    style={{
-                        [`${ fullscreen === true ? 'top' : side }`]: 0,
-                        [`${ fullscreen === true ? 'width' : null }`]: '100%',
-                        [`${ fullscreen === true ? 'height' : null }`]: '100%',
-                        [`${ side === 'top' || side === 'bottom' ? 'width' : null }`]: '100%',
-                        [`${ side === 'left' || side === 'right' ? 'height' : null }`]: '100%'
-                    }}>
-                    <div
-                        {...other}
-                        className={classNames(
-                            props.className,
-                            ACTIONSHEET_CLASSNAME,
+            <AnimationContainer
+                animationStyle={{
+                    [`${ fullscreen === true ? 'top' : side }`]: 0,
+                    [`${ fullscreen === true ? 'width' : null }`]: '100%',
+                    [`${ fullscreen === true ? 'height' : null }`]: '100%',
+                    [`${ side === 'top' || side === 'bottom' ? 'width' : null }`]: '100%',
+                    [`${ side === 'left' || side === 'right' ? 'height' : null }`]: '100%'
+                }}>
+                <div
+                    {...other}
+                    className={classNames(
+                        props.className,
+                        ACTIONSHEET_CLASSNAME,
+                        {
+                            [`k-actionsheet-${side}`]: fullscreen === false,
+                            'k-actionsheet-fullscreen': fullscreen === true,
+                            'k-adaptive-actionsheet': adaptive
+                        },
+                    )}>
+                    <>
+                        {_ActionSheetHeader}
+                        <div className={classNames(
+                            'k-actionsheet-content',
                             {
-                                [`k-actionsheet-${side}`]: fullscreen === false,
-                                'k-actionsheet-fullscreen': fullscreen === true,
-                                'k-adaptive-actionsheet': adaptive
-                            },
+                                '!k-overflow-hidden': adaptive
+                            }
                         )}>
-                        <>
-                            {_ActionSheetHeader}
-                            <div className={classNames(
-                                'k-actionsheet-content',
-                                {
-                                    '!k-overflow-hidden': adaptive
-                                }
-                            )}>
-                                {_ActionSheetContent}
-                            </div>
-                            {_ActionSheetFooter}
-                        </>
-                    </div>
+                            {_ActionSheetContent}
+                        </div>
+                        {_ActionSheetFooter}
+                    </>
                 </div>
-            </div>
+            </AnimationContainer>
         </div>
     );
 };

package/src/animation-container/animation-container.spec.tsx

@@ -0,0 +1,59 @@
+import { classNames } from '../misc';
+
+export const ANIMATION_CONTAINER_CLASSNAME = `k-animation-container`;
+
+const states = [];
+
+const options = {};
+
+export type KendoAnimationContainerProps = {
+    positionMode: "absolute" | "fixed";
+    offset?: {
+        top: number | string;
+        left: number | string;
+    };
+    animationStyle?: React.CSSProperties;
+};
+
+const defaultProps = {
+    positionMode: "absolute"
+};
+
+export const AnimationContainer = (
+    props:
+        KendoAnimationContainerProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        positionMode,
+        animationStyle,
+        offset,
+        ...other
+    } = props;
+
+
+    return (
+        <div
+            {...other}
+            style={{ ...offset, ...props.style }}
+            className={classNames(
+                ANIMATION_CONTAINER_CLASSNAME,
+                "k-animation-container-shown",
+                {
+                    ["k-animation-container-fixed"]: positionMode === "fixed"
+                }
+            )}
+        >
+            <div className="k-child-animation-container" style={animationStyle}>
+                {props.children}
+            </div>
+        </div>
+    );
+};
+
+AnimationContainer.states = states;
+AnimationContainer.options = options;
+AnimationContainer.className = ANIMATION_CONTAINER_CLASSNAME;
+AnimationContainer.defaultProps = defaultProps;
+
+export default AnimationContainer;

package/src/animation-container/index.ts

@@ -0,0 +1 @@
+export * from './animation-container.spec';

package/src/colorpicker/tests/colorpicker-dropdown.tsx

@@ -1,5 +1,6 @@
 import { ColorPicker } from '../../colorpicker';
 import { ColorEditor } from '../../coloreditor';
+import { Popup } from '../../popup';
 
 
 const styles = `
@@ -25,28 +26,19 @@ export default () =>(
                 <div style={{ position: "relative" }}>
                     <ColorPicker />
 
-                    <div className="k-animation-container k-animation-container-shown" style={{ position: "relative", width: "min-content" }}>
-                        <div className="k-child-animation-container">
-                            <div className="k-popup k-color-picker-popup">
-                                <ColorEditor group color="rgba(0,0,0, 0.5)" currentColor="fuchsia" />
-                            </div>
-                        </div>
-                    </div>
+                    <Popup className="k-color-picker-popup">
+                        <ColorEditor group color="rgba(0,0,0, 0.5)" currentColor="fuchsia" />
+                    </Popup>
                 </div>
-
             </section>
 
             <section>
                 <div style={{ position: "relative" }}>
                     <ColorPicker value="fuchsia" />
 
-                    <div className="k-animation-container k-animation-container-shown">
-                        <div className="k-child-animation-container">
-                            <div className="k-popup k-color-picker-popup">
-                                <ColorEditor group view="palette" color="rgba(0,0,0, 0.5)" currentColor="fuchsia" />
-                            </div>
-                        </div>
-                    </div>
+                    <Popup className="k-color-picker-popup">
+                        <ColorEditor group view="palette" color="rgba(0,0,0, 0.5)" currentColor="fuchsia" />
+                    </Popup>
                 </div>
 
             </section>

package/src/combobox/combobox.spec.tsx

@@ -122,7 +122,7 @@ export const Combobox = (
                 />
             </Input>
             { opened && popup &&
-                <Popup className="k-combobox-popup">
+                <Popup className="k-list-container k-combobox-popup">
                     {popup}
                 </Popup>
             }

package/src/combobox/tests/combobox-opened.tsx

@@ -6,6 +6,9 @@ const styles = `
     #test-area {
         max-width: 660px;
     }
+    .k-animation-container {
+        position: relative;
+    }
 `;
 
 export default () =>(

package/src/context-menu/tests/context-menu-in-window.tsx

@@ -28,18 +28,16 @@ export default () =>(
                 <Window title="Window" actions={[ 'window-minimize', 'window', 'x' ]}>
                     Target
                 </Window>
-                <div className="k-animation-container">
-                    <Popup className="k-menu-popup">
-                        <MenuList className="k-context-menu">
-                            <MenuItem text="Item 1" showArrow></MenuItem>
-                            <MenuItem text="Item 2" showArrow></MenuItem>
-                            <MenuItem text="Item 3" showArrow></MenuItem>
-                            <MenuItem text="Item 4" showArrow></MenuItem>
-                            <MenuItem text="Item 5" showArrow></MenuItem>
-                            <MenuItem text="Item 6" showArrow></MenuItem>
-                        </MenuList>
-                    </Popup>
-                </div>
+                <Popup className="k-menu-popup">
+                    <MenuList className="k-context-menu">
+                        <MenuItem text="Item 1" showArrow></MenuItem>
+                        <MenuItem text="Item 2" showArrow></MenuItem>
+                        <MenuItem text="Item 3" showArrow></MenuItem>
+                        <MenuItem text="Item 4" showArrow></MenuItem>
+                        <MenuItem text="Item 5" showArrow></MenuItem>
+                        <MenuItem text="Item 6" showArrow></MenuItem>
+                    </MenuList>
+                </Popup>
             </section>
         </div>
     </>

package/src/context-menu/tests/context-menu.tsx

@@ -3,16 +3,14 @@ import { Popup } from '../../popup';
 
 
 const styles = `
-    .wrap,
-    .k-animation-container {
-        width: min-content;
+    .wrap {
         position: relative;
-        overflow: visible;
+        width: min-content;
     }
-    .child-menu {
-        position: absolute;
-        left: 100%;
-        top: 0;
+
+    .k-animation-container:first-of-type {
+        width: min-content;
+        position: relative;
     }
 `;
 
@@ -21,24 +19,21 @@ export default () =>(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid">
             <section className="wrap">
-                <div className="k-animation-container">
-                    <Popup className="k-menu-popup">
-                        <MenuList className="k-context-menu">
-                            <MenuItem text="Item 1" selected showArrow></MenuItem>
-                            <MenuItem text="Item 2"></MenuItem>
-                            <MenuItem text="Item 3"></MenuItem>
-                        </MenuList>
-                    </Popup>
-                </div>
+                <Popup className="k-menu-popup">
+                    <MenuList className="k-context-menu">
+                        <MenuItem text="Item 1" selected showArrow></MenuItem>
+                        <MenuItem text="Item 2"></MenuItem>
+                        <MenuItem text="Item 3"></MenuItem>
+                    </MenuList>
+                </Popup>
+
 
-                <div className="k-animation-container child-menu">
-                    <Popup className="k-menu-popup">
-                        <MenuList className="k-context-menu">
-                            <MenuItem text="Item 1.1"></MenuItem>
-                            <MenuItem text="Item 1.2"></MenuItem>
-                        </MenuList>
-                    </Popup>
-                </div>
+                <Popup className="k-menu-popup" offset={{ left: "100%", top: 0 }}>
+                    <MenuList className="k-context-menu">
+                        <MenuItem text="Item 1.1"></MenuItem>
+                        <MenuItem text="Item 1.2"></MenuItem>
+                    </MenuList>
+                </Popup>
             </section>
         </div>
     </>

package/src/datepicker/datepicker.spec.tsx

@@ -124,7 +124,7 @@ export const DatePicker = (
                 />
             </Input>
             { opened &&
-                <Popup className="k-datepicker-popup">
+                <Popup className="k-calendar-container k-datepicker-popup">
                     <Calendar dir={dir} />
                 </Popup>
             }

package/src/datepicker/tests/datepicker-opened.tsx

@@ -5,6 +5,10 @@ const styles = `
         max-width: 660px;
     }
 
+    .k-animation-container {
+        position: relative;
+    }
+
     .k-popup {
         width: max-content;
     }

package/src/daterangepicker/daterangepicker.spec.tsx

@@ -88,7 +88,7 @@ export const DateRangePicker = (
                 </FloatingLabel>
             </span>
             { opened &&
-                <Popup className="k-daterangepicker-popup">
+                <Popup className="k-calendar-container k-daterangepicker-popup">
                     <MultiViewCalendar dir={dir} />
                 </Popup>
             }

package/src/daterangepicker/tests/daterangepicker-opened.tsx

@@ -1,8 +1,14 @@
 import { DateRangePicker } from '..';
 
+const styles = `
+    .k-animation-container {
+        position: relative;
+    }
+`;
 
 export default () =>(
     <>
+        <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
             <span>DateRangePicker Opened</span>

package/src/datetime-selector/tests/datetime-selector.tsx

@@ -1,4 +1,5 @@
-import DateTimeSelector from '../datetime-selector.spec';
+import { DateTimeSelector } from '..';
+import { Popup } from '../../popup';
 
 
 const style = `
@@ -6,7 +7,6 @@ const style = `
         width: min-content;
         max-width: 100%;
         position: relative;
-        overflow: visible;
     }
 `;
 
@@ -19,19 +19,15 @@ export default () =>(
             <span>Time tab</span>
 
             <section>
-                <div className="k-animation-container">
-                    <div className="k-popup k-reset k-datetime-container">
-                        <DateTimeSelector />
-                    </div>
-                </div>
+                <Popup className="k-datetime-container">
+                    <DateTimeSelector />
+                </Popup>
             </section>
 
             <section>
-                <div className="k-animation-container">
-                    <div className="k-popup k-reset k-datetime-container">
-                        <DateTimeSelector tab="time" />
-                    </div>
-                </div>
+                <Popup className="k-datetime-container">
+                    <DateTimeSelector tab="time" />
+                </Popup>
             </section>
 
         </div>

package/src/datetimepicker/datetimepicker.spec.tsx

@@ -127,7 +127,7 @@ export const DateTimePicker = (
                 />
             </Input>
             { opened &&
-                <Popup className="k-datetimepicker-popup" dir={dir}>
+                <Popup className={`k-${tab === "time" ? "list" : "calendar"}-container k-datetimepicker-popup`} dir={dir}>
                     <DateTimeSelector tab={tab} dir={dir} />
                 </Popup>
             }

package/src/datetimepicker/tests/datetimepicker-opened.tsx

@@ -5,6 +5,10 @@ const styles = `
     #test-area {
         max-width: 740px;
     }
+
+    .k-animation-container {
+        position: relative;
+    }
 `;
 
 export default () =>(

package/src/dropdowngrid/tests/dropdowngrid-opened.tsx

@@ -5,6 +5,10 @@ const styles = `
     #test-area {
         max-width: 660px;
     }
+
+    .k-animation-container {
+        position: relative;
+    }
 `;
 
 export default () =>(

package/src/dropdownlist/dropdownlist.spec.tsx

@@ -135,7 +135,7 @@ export const DropdownList = (
                 />
             </Picker>
             { opened && popup &&
-                <Popup className="k-dropdownlist-popup">
+                <Popup className="k-list-container k-dropdownlist-popup">
                     {popup}
                 </Popup>
             }

package/src/dropdownlist/tests/dropdownlist-filtering.tsx

@@ -4,6 +4,10 @@ const styles = `
     #test-area {
         max-width: 660px;
     }
+
+    .k-animation-container {
+        position: relative;
+    }
 `;
 
 export default () => (

package/src/dropdownlist/tests/dropdownlist-grouping-filtering.tsx

@@ -4,6 +4,10 @@ const styles = `
     #test-area {
         max-width: 660px;
     }
+
+    .k-animation-container {
+        position: relative;
+    }
 `;
 
 export default () => (

package/src/dropdownlist/tests/dropdownlist-grouping.tsx

@@ -4,6 +4,10 @@ const styles = `
     #test-area {
         max-width: 660px;
     }
+
+    .k-animation-container {
+        position: relative;
+    }
 `;
 
 export default () => (

package/src/dropdownlist/tests/dropdownlist-opened.tsx

@@ -5,6 +5,10 @@ const styles = `
     #test-area {
         max-width: 660px;
     }
+
+    .k-animation-container {
+        position: relative;
+    }
 `;
 
 export default () =>(
@@ -12,8 +16,8 @@ export default () =>(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
-            <span>DropdownList</span>
-            <span>DropdownList RTL</span>
+            <span>DropdownList Popup Opened</span>
+            <span>DropdownList Popup Opened RTL</span>
 
             <div>
                 <DropdownListPopup value="Opened" />

package/src/dropdownlist/tests/dropdownlist-option-label.tsx

@@ -6,6 +6,10 @@ const styles = `
     #test-area {
         max-width: 660px;
     }
+
+    .k-animation-container {
+        position: relative;
+    }
 `;
 
 export default () =>(

package/src/dropdowntree/dropdowntree.spec.tsx

@@ -138,7 +138,7 @@ export const DropdownTree = (
                 />
             </Picker>
             { opened && popup &&
-                <Popup className="k-dropdowntree-popup" dir={dir}>
+                <Popup className="k-list-container k-dropdowntree-popup" dir={dir}>
                     {popup}
                 </Popup>
             }

package/src/dropdowntree/tests/dropdowntree-opened.tsx

@@ -7,6 +7,10 @@ const styles = `
     #test-area {
         max-width: 660px;
     }
+
+    .k-animation-container {
+        position: relative;
+    }
 `;
 
 export default () =>(