@progress/kendo-themes-html 7.1.0-dev.9 → 7.1.0

package/dist/esm/textarea/tests/textarea-size-rounded.js

@@ -4726,7 +4726,8 @@ var defaultProps11 = {
   rounded: Input.defaultProps.rounded,
   fillMode: Input.defaultProps.fillMode,
   flow: "vertical",
-  affixesOrientation: "horizontal"
+  affixesOrientation: "horizontal",
+  resize: "both"
 };
 var Textarea = (props) => {
   const {
@@ -4746,6 +4747,7 @@ var Textarea = (props) => {
     disabled,
     flow = defaultProps11.flow,
     affixesOrientation,
+    resize = defaultProps11.resize,
     ...other
   } = props;
   return /* @__PURE__ */ jsxs2(
@@ -4787,7 +4789,14 @@ var Textarea = (props) => {
           InputInnerTextarea,
           {
             className: classNames(
-              "!k-overflow-auto"
+              "!k-overflow-auto",
+              {
+                ["!k-flex-none"]: flow === "vertical",
+                ["k-resize-x"]: resize === "x",
+                ["k-resize-y"]: resize === "y",
+                ["k-resize"]: resize === "both",
+                ["k-resize-none"]: resize === "none"
+              }
             ),
             value,
             placeholder,

package/dist/esm/textarea/tests/textarea-solid.js

@@ -4726,7 +4726,8 @@ var defaultProps11 = {
   rounded: Input.defaultProps.rounded,
   fillMode: Input.defaultProps.fillMode,
   flow: "vertical",
-  affixesOrientation: "horizontal"
+  affixesOrientation: "horizontal",
+  resize: "both"
 };
 var Textarea = (props) => {
   const {
@@ -4746,6 +4747,7 @@ var Textarea = (props) => {
     disabled,
     flow = defaultProps11.flow,
     affixesOrientation,
+    resize = defaultProps11.resize,
     ...other
   } = props;
   return /* @__PURE__ */ jsxs2(
@@ -4787,7 +4789,14 @@ var Textarea = (props) => {
           InputInnerTextarea,
           {
             className: classNames(
-              "!k-overflow-auto"
+              "!k-overflow-auto",
+              {
+                ["!k-flex-none"]: flow === "vertical",
+                ["k-resize-x"]: resize === "x",
+                ["k-resize-y"]: resize === "y",
+                ["k-resize"]: resize === "both",
+                ["k-resize-none"]: resize === "none"
+              }
             ),
             value,
             placeholder,

package/dist/esm/textarea/textarea.spec.js

@@ -4726,7 +4726,8 @@ var defaultProps11 = {
   rounded: Input.defaultProps.rounded,
   fillMode: Input.defaultProps.fillMode,
   flow: "vertical",
-  affixesOrientation: "horizontal"
+  affixesOrientation: "horizontal",
+  resize: "both"
 };
 var Textarea = (props) => {
   const {
@@ -4746,6 +4747,7 @@ var Textarea = (props) => {
     disabled,
     flow = defaultProps11.flow,
     affixesOrientation,
+    resize = defaultProps11.resize,
     ...other
   } = props;
   return /* @__PURE__ */ jsxs2(
@@ -4787,7 +4789,14 @@ var Textarea = (props) => {
           InputInnerTextarea,
           {
             className: classNames(
-              "!k-overflow-auto"
+              "!k-overflow-auto",
+              {
+                ["!k-flex-none"]: flow === "vertical",
+                ["k-resize-x"]: resize === "x",
+                ["k-resize-y"]: resize === "y",
+                ["k-resize"]: resize === "both",
+                ["k-resize-none"]: resize === "none"
+              }
             ),
             value,
             placeholder,

package/dist/types/textarea/tests/textarea-resizable.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

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

@@ -10,6 +10,7 @@ export type KendoTextareaOptions = {
     size?: (typeof options.size)[number] | null;
     rounded?: (typeof options.rounded)[number] | null;
     fillMode?: (typeof options.fillMode)[number] | null;
+    resize: "x" | "y" | "both" | "none";
 };
 export type KendoTextareaProps = KendoTextareaOptions & {
     prefix?: JSX.Element;
@@ -38,6 +39,7 @@ export declare const Textarea: {
         fillMode: "solid";
         flow: string;
         affixesOrientation: string;
+        resize: string;
     };
 };
 export default Textarea;

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": "7.1.0-dev.9",
+  "version": "7.1.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,5 +52,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "4a6a0cb7085a4b032405585e25da25fd4383d7d7"
+  "gitHead": "72d42dfbf1b9b895c405ccba9b35d22204a4b12d"
 }

package/src/editor/tests/editor-view-source.tsx

@@ -26,7 +26,7 @@ export default () =>(
                         <Button>Cancel</Button>
                     </>
                 }>
-                    <Textarea className="k-editor-textarea"></Textarea>
+                    <Textarea flow="horizontal" resize="none" className="k-editor-textarea"></Textarea>
                 </WindowNormal>
             </section>
         </div>

package/src/textarea/tests/textarea-resizable.tsx

@@ -0,0 +1,101 @@
+import { TextareaNormal } from '..';
+import { IconButton } from '../../button';
+import { Icon } from '../../icon';
+
+const styles = `
+    #test-area {
+        grid-template-columns: 80px repeat(2, 1fr);
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid">
+
+            <span></span>
+            <span>Textarea Resizable - vertical flow</span>
+            <span>Textarea Resizable - horizontal flow</span>
+
+            <span>Prefix/Suffix - horizontal orientation</span>
+
+            <div>
+                <TextareaNormal style={{ width: "max-content" }} value="Prefix & Suffix"
+                    prefix={
+                        <>
+                            <Icon icon="envelope"/>
+                            <Icon icon="envelope"/>
+                            <Icon icon="envelope"/>
+                        </>
+                    }
+                    suffix={
+                        <>
+                            <IconButton icon="volume-up" fillMode="clear" />
+                            <IconButton icon="volume-up" fillMode="clear" />
+                            <IconButton icon="volume-up" fillMode="clear" />
+                        </>
+                    }
+                />
+            </div>
+
+            <div>
+                <TextareaNormal style={{ width: "max-content" }} flow="horizontal" value="Prefix & Suffix"
+                    prefix={
+                        <>
+                            <Icon icon="envelope"/>
+                            <Icon icon="envelope"/>
+                            <Icon icon="envelope"/>
+                        </>
+                    }
+                    suffix={
+                        <>
+                            <IconButton icon="volume-up" fillMode="clear" />
+                            <IconButton icon="volume-up" fillMode="clear" />
+                            <IconButton icon="volume-up" fillMode="clear" />
+                        </>
+                    }
+                />
+            </div>
+
+            <span>Prefix/Suffix - vertical orientation</span>
+
+            <div>
+                <TextareaNormal style={{ width: "max-content" }} affixesOrientation="vertical" value="Prefix & Suffix"
+                    prefix={
+                        <>
+                            <Icon icon="envelope"/>
+                            <Icon icon="envelope"/>
+                            <Icon icon="envelope"/>
+                        </>
+                    }
+                    suffix={
+                        <>
+                            <IconButton icon="volume-up" fillMode="clear" />
+                            <IconButton icon="volume-up" fillMode="clear" />
+                            <IconButton icon="volume-up" fillMode="clear" />
+                        </>
+                    }
+                />
+            </div>
+
+            <div>
+                <TextareaNormal style={{ width: "max-content" }} affixesOrientation="vertical" flow="horizontal" value="Prefix & Suffix"
+                    prefix={
+                        <>
+                            <Icon icon="envelope"/>
+                            <Icon icon="envelope"/>
+                            <Icon icon="envelope"/>
+                        </>
+                    }
+                    suffix={
+                        <>
+                            <IconButton icon="volume-up" fillMode="clear" />
+                            <IconButton icon="volume-up" fillMode="clear" />
+                            <IconButton icon="volume-up" fillMode="clear" />
+                        </>
+                    }
+                />
+            </div>
+        </div>
+    </>
+);

package/src/textarea/textarea.spec.tsx

@@ -29,13 +29,15 @@ const defaultProps = {
     rounded: Input.defaultProps.rounded,
     fillMode: Input.defaultProps.fillMode,
     flow: "vertical",
-    affixesOrientation: "horizontal"
+    affixesOrientation: "horizontal",
+    resize: "both"
 };
 
 export type KendoTextareaOptions = {
     size?: (typeof options.size)[number] | null;
     rounded?: (typeof options.rounded)[number] | null;
     fillMode?: (typeof options.fillMode)[number] | null;
+    resize: "x" | "y" | "both" | "none";
 };
 
 export type KendoTextareaProps = KendoTextareaOptions & {
@@ -72,6 +74,7 @@ export const Textarea = (
         disabled,
         flow = defaultProps.flow,
         affixesOrientation,
+        resize = defaultProps.resize,
         ...other
     } = props;
 
@@ -114,6 +117,13 @@ export const Textarea = (
             <InputInnerTextarea
                 className={classNames(
                     "!k-overflow-auto",
+                    {
+                        ["!k-flex-none"]: flow === "vertical",
+                        ["k-resize-x"]: resize === "x",
+                        ["k-resize-y"]: resize === "y",
+                        ["k-resize"]: resize === "both",
+                        ["k-resize-none"]: resize === "none"
+                    }
                 )}
                 value={value}
                 placeholder={placeholder}