Component specs

.eslintrc.json

@@ -96,7 +96,7 @@
             ],
             "extends": [
                 "eslint:recommended",
-                "plugin:react/recommended",
+                "plugin:react/jsx-runtime",
                 "plugin:@typescript-eslint/eslint-recommended",
                 "plugin:@typescript-eslint/recommended"
             ],

packages/default/scss/calendar/_layout.scss

@@ -488,6 +488,8 @@
 
     // RTL
     .k-rtl .k-calendar,
+    [dir="rtl"] .k-calendar,
+    .k-calendar.k-rtl,
     .k-calendar[dir="rtl"] {
 
         .k-calendar-nav-prev,

packages/default/scss/datetimepicker/_layout.scss

@@ -41,17 +41,14 @@
         transform: translateX(-100%);
     }
 
-
-    // RTL
-    .k-datetimepicker {
+    .k-time-tab .k-datetime-selector {
+        &.k-rtl,
         &[dir="rtl"],
-        .k-rtl & {
-            .k-time-tab .k-datetime-selector {
-                transform: translateX(100%);
-            }
+        .k-rtl &,
+        [dir="rtl"] & {
+            transform: translateX(100%);
         }
     }
-
 }
 
 

packages/default/scss/treeview/_layout.scss

@@ -138,6 +138,8 @@
 
     // RTL
     .k-rtl .k-treeview,
+    [dir="rtl"] .k-treeview,
+    .k-treeview.k-rtl,
     .k-treeview[dir="rtl"] {
 
         // Treeview item

packages/fluent/scss/calendar/_layout.scss

@@ -519,6 +519,8 @@
 
     // RTL
     .k-rtl .k-calendar,
+    [dir="rtl"] .k-calendar,
+    .k-calendar.k-rtl,
     .k-calendar[dir="rtl"] {
 
         .k-calendar-nav-prev,

packages/fluent/scss/datetimepicker/_layout.scss

@@ -49,12 +49,12 @@
         transform: translateX(-100%);
     }
 
-    k-datetimepicker {
+    .k-time-tab .k-datetime-selector {
+        &.k-rtl,
         &[dir="rtl"],
-        .k-rtl & {
-            .k-time-tab .k-datetime-selector {
-                transform: translateX(100%);
-            }
+        .k-rtl &,
+        [dir="rtl"] & {
+            transform: translateX(100%);
         }
     }
 }

packages/html/package.json

@@ -32,7 +32,7 @@
   "scripts": {
     "build": "node ./scripts/build.js",
     "build:tests": "node ./scripts/build-tests.js",
-    "check-types": "npx tsc src/index.ts --noEmit --emitDeclarationOnly false --jsx react",
+    "check-types": "npx tsc src/index.ts --noEmit --emitDeclarationOnly false --jsx react-jsx",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {

packages/html/src/action-buttons/action-buttons.spec.tsx

@@ -0,0 +1,49 @@
+import { classNames } from '../utils';
+
+export const ACTIONBUTTONS_CLASSNAME = `k-actions`;
+
+const states = [];
+
+const options = {};
+
+export type KendoActionButtonsProps = {
+    alignment?: 'start' | 'center' | 'end' | 'stretched';
+    orientation?: 'horizontal' | 'vertical';
+};
+
+const defaultProps = {
+    alignment: 'start',
+    orientation: 'horizontal'
+};
+
+export const ActionButtons = (
+    props: KendoActionButtonsProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        alignment = defaultProps.alignment,
+        orientation = defaultProps.orientation,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                ACTIONBUTTONS_CLASSNAME,
+                {
+                    [`${ACTIONBUTTONS_CLASSNAME}-${alignment}`]: alignment,
+                    [`${ACTIONBUTTONS_CLASSNAME}-${orientation}`]: orientation
+                },
+                props.className
+            )}>
+            {props.children}
+        </div>
+    );
+};
+
+ActionButtons.states = states;
+ActionButtons.options = options;
+ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
+
+export default ActionButtons;

packages/html/src/action-buttons/index.ts

@@ -1 +1 @@
-export * from './action-buttons';
+export * from './action-buttons.spec';

packages/html/src/action-buttons/tests/action-buttons.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { ActionButtons } from '../../action-buttons';
 import { Button } from '../../button';

packages/html/src/action-sheet/action-sheet.spec.tsx

@@ -0,0 +1,123 @@
+import { classNames } from '../utils';
+import { ActionSheetHeader, ActionSheetItems, ActionSheetFooter } from '../action-sheet';
+
+export const ACTIONSHEET_CLASSNAME = `k-actionsheet`;
+
+const states = [];
+
+const options = {};
+
+export type KendoActionSheetProps = {
+    children: JSX.Element | JSX.Element[],
+    title?: string;
+    header?: typeof ActionSheetHeader;
+    footer?: string | typeof ActionSheetFooter;
+    actions?: string[];
+    fullscreen?: boolean;
+    adaptive?: boolean;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+const defaultProps = {
+    side: 'bottom',
+    fullscreen: false,
+    adaptive: false
+};
+
+// eslint-disable-next-line complexity
+export const ActionSheet = (
+    props: KendoActionSheetProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        children,
+        title,
+        header,
+        footer,
+        actions,
+        side = defaultProps.side,
+        fullscreen = defaultProps.fullscreen,
+        adaptive = defaultProps.adaptive,
+        ...other
+    } = props;
+
+    // eslint-disable-next-line no-nested-ternary
+    const _ActionSheetHeader = title
+        ? <ActionSheetHeader title={title} />
+        : header
+            ? header
+            : Array.isArray(children) && children.find((child) => child.type === ActionSheetHeader);
+
+    // eslint-disable-next-line no-nested-ternary
+    const _ActionSheetFooter = actions
+        ? <ActionSheetFooter className="k-actions" actions={actions} />
+        // eslint-disable-next-line no-nested-ternary
+        : footer
+            ? typeof footer === 'string'
+                ? <ActionSheetFooter>{footer}</ActionSheetFooter>
+                : footer
+            : Array.isArray(children) && children.find((child) => child.type === ActionSheetFooter);
+
+    // eslint-disable-next-line no-nested-ternary
+    const _ActionSheetContent = Array.isArray(children)
+        ? children.filter(child => {
+            switch (child.type) {
+                case ActionSheetHeader:
+                case ActionSheetFooter:
+                    return false;
+                default:
+                    return true;
+            }
+            return true;
+        })
+        : children.type === ActionSheetItems
+            ? children
+            : <></>;
+
+    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,
+                            {
+                                [`k-actionsheet-${side}`]: fullscreen === false,
+                                'k-actionsheet-fullscreen': fullscreen === true,
+                                'k-adaptive-actionsheet': adaptive
+                            },
+                        )}>
+                        <>
+                            {_ActionSheetHeader}
+                            <div className={classNames(
+                                'k-actionsheet-content',
+                                {
+                                    '!k-overflow-hidden': adaptive
+                                }
+                            )}>
+                                {_ActionSheetContent}
+                            </div>
+                            {_ActionSheetFooter}
+                        </>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+ActionSheet.states = states;
+ActionSheet.options = options;
+ActionSheet.className = ACTIONSHEET_CLASSNAME;
+
+export default ActionSheet;