@galaxy-ds/core 2.1.7 → 2.1.9

package/dist/Input/Input.stories.d.ts

@@ -4838,7 +4838,8 @@ export declare const LargeSizeToolbarSize: {
  * It grows automatically to fit the contents.
  * Specify `rows` to set its height, the height is fixed in this case.
  *
- * Use `inputPropStyles` to override default inputProps width of `162px`
+ * Use `inputPropStyles` to override default inputProps width.
+ *
  */
 export declare const TextArea: {
     args: {
@@ -5177,6 +5178,12 @@ export declare const TextArea: {
         key?: import("react").Key | null | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
 };
+/**
+ *
+ * Use `inputPropStyles` to override default inputProps width.
+ *
+ * **NOTE**: If there's no container we need to define the width. Otherwise the input will fluctate in size on keydown when `rows`, `minRows` or `maxRows` is provided.
+ */
 export declare const TextAreaMinRows: {
     args: {
         multiline: true;

package/dist/TextEditor/TextEditor.types.d.ts

@@ -24,4 +24,5 @@ export interface TextEditorProps {
     formatting?: Partial<Omit<StarterKitOptions, 'gapcursor' | 'dropcursor' | 'document' | 'text' | 'paragraph'>> & {
         paragraph?: Partial<ParagraphOptions>;
     };
+    disableTabIndent?: boolean;
 }

package/dist/TextEditor/extensions/TabIndent/TabIndent.d.ts

@@ -0,0 +1,3 @@
+import { Extension } from '@tiptap/core';
+declare const TabIndent: Extension<any, any>;
+export default TabIndent;

package/dist/TextEditor/extensions/TabIndent/index.d.ts

@@ -0,0 +1 @@
+export { default as TabIndent } from './TabIndent';

package/dist/TextEditor/extensions/index.d.ts

@@ -1 +1,2 @@
 export * from './Placeholders';
+export * from './TabIndent';

package/dist/index.esm.js

@@ -18747,12 +18747,13 @@ var StyledFormHelperText = styled(FormHelperText)(function (_a) {
 });
 
 var Input = React.forwardRef(function Input(props, ref) {
-    var _a = props.error, error = _a === void 0 ? false : _a, helperText = props.helperText, _b = props.textAlignRight, textAlignRight = _b === void 0 ? false : _b, label = props.label, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.background, background = _d === void 0 ? 'default' : _d, className = props.className, inputPropStyles = props.inputPropStyles, rest = __rest(props, ["error", "helperText", "textAlignRight", "label", "size", "background", "className", "inputPropStyles"]);
+    var _a = props.error, error = _a === void 0 ? false : _a, helperText = props.helperText, _b = props.textAlignRight, textAlignRight = _b === void 0 ? false : _b, label = props.label, _c = props.size, size = _c === void 0 ? 'medium' : _c, _d = props.background, background = _d === void 0 ? 'default' : _d, className = props.className, inputPropStyles = props.inputPropStyles, minRows = props.minRows, maxRows = props.maxRows, rows = props.rows, rest = __rest(props, ["error", "helperText", "textAlignRight", "label", "size", "background", "className", "inputPropStyles", "minRows", "maxRows", "rows"]);
     return (jsxs(Fragment$1, { children: [label && jsx(FormLabelBlock, { children: label }), jsx(StyledInputBase, __assign({ ref: ref, error: error, textAlignRight: textAlignRight, className: clsx(size === 'large' && 'customLargeSize', background === 'light' && 'customLightColor', className), inputProps: {
                     style: __assign({ 
-                        // EDGECASE: When we use multiline and set minRows, maxRows, rows we need to define the width of the input. By default we set this to 162.
-                        width: inputPropStyles ? inputPropStyles.width : 162 }, inputPropStyles),
-                } }, rest)), helperText && (jsx(StyledFormHelperText, { error: error, children: helperText }))] }));
+                        // EDGECASE: When we use multiline and set minRows, maxRows, rows we need to define the width of the input. 100% here will inherit parent container.
+                        // If there's no container we need to define the width. Otherwise the input will fluctate in size on keydown when rows param exist.
+                        width: inputPropStyles ? inputPropStyles.width : '100%' }, inputPropStyles),
+                }, rows: rows, minRows: minRows, maxRows: maxRows }, rest)), helperText && (jsx(StyledFormHelperText, { error: error, children: helperText }))] }));
 });
 
 var ListItemAvatar = function (props) {
@@ -40877,10 +40878,61 @@ var ExtensionPlaceholders = Node.create({
     },
 });
 
+var TAB_CHAR = '\u0009';
+var TabIndent = Extension.create({
+    name: 'tabIndent',
+    addKeyboardShortcuts: function () {
+        return {
+            Tab: function (_a) {
+                var editor = _a.editor;
+                var selection = editor.state.selection;
+                var $from = selection.$from;
+                if (editor.isActive('listItem') && $from.parentOffset === 0) {
+                    var sinkResult = editor.chain().sinkListItem('listItem').run();
+                    if (sinkResult) {
+                        return true;
+                    }
+                }
+                editor
+                    .chain()
+                    .command(function (_a) {
+                    var tr = _a.tr;
+                    tr.insertText(TAB_CHAR);
+                    return true;
+                })
+                    .run();
+                return true;
+            },
+            'Shift-Tab': function (_a) {
+                var editor = _a.editor;
+                var _b = editor.state, selection = _b.selection, doc = _b.doc;
+                var $from = selection.$from;
+                var pos = $from.pos;
+                if (editor.isActive('listItem') && $from.parentOffset === 0) {
+                    return editor.chain().liftListItem('listItem').run();
+                }
+                if (doc.textBetween(pos - 1, pos) === TAB_CHAR) {
+                    editor
+                        .chain()
+                        .command(function (_a) {
+                        var tr = _a.tr;
+                        tr.delete(pos - 1, pos);
+                        return true;
+                    })
+                        .run();
+                    return true;
+                }
+                return true;
+            },
+        };
+    },
+});
+
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     ExtensionPlaceholders: ExtensionPlaceholders,
-    Placeholder: Placeholder
+    Placeholder: Placeholder,
+    TabIndent: TabIndent
 });
 
 var useEditor = function () {
@@ -45417,9 +45469,9 @@ var TextEditorContainer = styled$1('div')(function (_a) {
 
 var TextEditor = function (props) {
     var _a, _b, _c, _d;
-    var extensions = __spreadArray([
+    var extensions = __spreadArray(__spreadArray([
         StarterKit.configure(__assign({ blockquote: false, bold: false, bulletList: false, code: false, codeBlock: false, dropcursor: {}, hardBreak: false, heading: false, horizontalRule: false, italic: false, listItem: false, orderedList: false, strike: false }, ((_a = props.formatting) !== null && _a !== void 0 ? _a : {})))
-    ], ((_b = props.extensions) !== null && _b !== void 0 ? _b : []), true);
+    ], (props.disableTabIndent ? [] : [TabIndent]), true), ((_b = props.extensions) !== null && _b !== void 0 ? _b : []), true);
     var editor = useEditor$1({
         extensions: extensions,
         content: props.initialContent,