orcs-design-system 3.3.38 → 3.3.39

package/es/components/TextArea/TextArea.stories.js

@@ -88,6 +88,29 @@ export const disabledTextArea = () => /*#__PURE__*/_jsx(TextArea, {
   disabled: true
 });
 disabledTextArea.storyName = "Disabled";
+export const resizeTextArea = () => /*#__PURE__*/_jsxs(Spacer, {
+  my: "r",
+  children: [/*#__PURE__*/_jsx(TextArea, {
+    id: "TextAreaResizeNone",
+    label: "Not resizable",
+    resize: "none",
+    rows: "3",
+    defaultValue: "This textarea cannot be resized"
+  }), /*#__PURE__*/_jsx(TextArea, {
+    id: "TextAreaResizeHorizontal",
+    label: "Horizontal resize only",
+    resize: "horizontal",
+    rows: "3",
+    defaultValue: "This textarea can only be resized horizontally"
+  }), /*#__PURE__*/_jsx(TextArea, {
+    id: "TextAreaResizeVertical",
+    label: "Vertical resize only",
+    resize: "vertical",
+    rows: "3",
+    defaultValue: "This textarea can only be resized vertically"
+  })]
+});
+resizeTextArea.storyName = "Resize Options";
 defaultTextArea.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -127,4 +150,9 @@ disabledTextArea.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "disabledTextArea"
+};
+resizeTextArea.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "resizeTextArea"
 };

package/es/components/TextArea/index.js

@@ -40,6 +40,7 @@ const Input = styled("textarea").withConfig({
   borderWidth: themeGet("borderWidths.1")(props),
   borderStyle: "solid",
   borderColor: props.invalid ? themeGet("colors.dangerLight")(props) : props.valid ? themeGet("colors.successLight")(props) : themeGet("colors.black30")(props),
+  resize: props.resize || "both",
   "&:hover": {
     borderColor: props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props)
   },
@@ -86,6 +87,7 @@ const TextArea = /*#__PURE__*/React.forwardRef((props, ref) => {
     bold,
     cols,
     rows,
+    resize,
     onChange,
     defaultValue,
     autoFocus,
@@ -93,6 +95,7 @@ const TextArea = /*#__PURE__*/React.forwardRef((props, ref) => {
     WrapperStyles,
     LabelStyles,
     ariaLabel,
+    onKeyDown,
     InputStyles
   } = props;
   const component = /*#__PURE__*/_jsxs(Wrapper, {
@@ -114,6 +117,7 @@ const TextArea = /*#__PURE__*/React.forwardRef((props, ref) => {
       cols: cols,
       disabled: disabled,
       rows: rows,
+      resize: resize,
       autoFocus: autoFocus,
       valid: valid,
       invalid: invalid,
@@ -121,6 +125,7 @@ const TextArea = /*#__PURE__*/React.forwardRef((props, ref) => {
       "data-testid": props["data-testid"],
       defaultValue: defaultValue,
       "aria-label": ariaLabel,
+      onKeyDown: onKeyDown,
       ...InputStyles,
       children: value
     })]
@@ -180,7 +185,10 @@ TextArea.propTypes = {
   /** Specifies `textarea` default value (different from placeholder) */
   defaultValue: PropTypes.string,
   /** Specifies the design theme object */
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  /** Controls how the textarea can be resized (none, both, horizontal, vertical) */
+  resize: PropTypes.oneOf(["none", "both", "horizontal", "vertical"]),
+  onKeyDown: PropTypes.func
 };
 TextArea.__docgenInfo = {
   "description": "",
@@ -334,6 +342,33 @@ TextArea.__docgenInfo = {
         "name": "object"
       },
       "required": false
+    },
+    "resize": {
+      "description": "Controls how the textarea can be resized (none, both, horizontal, vertical)",
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"none\"",
+          "computed": false
+        }, {
+          "value": "\"both\"",
+          "computed": false
+        }, {
+          "value": "\"horizontal\"",
+          "computed": false
+        }, {
+          "value": "\"vertical\"",
+          "computed": false
+        }]
+      },
+      "required": false
+    },
+    "onKeyDown": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.38",
+  "version": "3.3.39",
   "engines": {
     "node": "20.12.2"
   },