@capyx/components-library 0.0.15 → 0.0.17

package/dist/components/RichTextInput.css

@@ -0,0 +1,36 @@
+.ql-rich-text-wrapper {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+/* Override Quill snow's height:100% so the container grows with content
+   instead of collapsing when no ancestor has a fixed height.
+   Three-class specificity (0,3,0) beats Quill's own .ql-container.ql-snow (0,2,0). */
+.ql-rich-text-wrapper .ql-container.ql-snow {
+	height: auto;
+}
+
+/* The editor is the scrollable unit; give it a sensible minimum. */
+.ql-rich-text-wrapper .ql-editor {
+	overflow-y: auto;
+	min-height: 150px;
+}
+
+/* --constrained modifier: bridges the flex chain through ReactQuill's .quill node.
+ * Only activates when the constrainHeight prop is true.
+ * Requires the host to set an explicit height on the wrapper (via style prop):
+ *   - flex fill:    style={{ flex: 1, minHeight: 0 }}
+ *   - fixed height: style={{ height: '40vh' }}
+ */
+.ql-rich-text-wrapper--constrained .quill {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.ql-rich-text-wrapper--constrained .ql-container {
+	flex: 1;
+	min-height: 0;
+}

package/dist/components/RichTextInput.d.ts

@@ -53,6 +53,15 @@ export type RichTextInputProps = {
     style?: CSSProperties;
     /** Extra CSS class names added to the outer wrapper `div`. */
     wrapperClassName?: string;
+    /**
+     * When true, activates internal height-constraining / scrollable mode by adding the
+     * `ql-rich-text-wrapper--constrained` CSS modifier class.
+     *
+     * Pass alongside a `style` that sets the height:
+     *   - Inside a flex column (e.g. a modal body):  `style={{ flex: 1, minHeight: 0 }}`
+     *   - Fixed-height inline placement:             `style={{ height: '40vh' }}`
+     */
+    constrainHeight?: boolean;
 };
 /**
  * RichTextInput - A rich text editor component using ReactQuill

package/dist/components/RichTextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextInput.d.ts","sourceRoot":"","sources":["../../lib/components/RichTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,EAAE,EAAwC,MAAM,OAAO,CAAC;AAG1F,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,OAAO,qIAAsI,CAAC;AACpJ,KAAK,UAAU,GAAG,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC;AAEzC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAChC,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAiFhD,CAAC"}
+{"version":3,"file":"RichTextInput.d.ts","sourceRoot":"","sources":["../../lib/components/RichTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,EAAE,EAAwC,MAAM,OAAO,CAAC;AAG1F,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,OAAO,qIAAsI,CAAC;AACpJ,KAAK,UAAU,GAAG,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC;AAEzC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAChC,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAkFhD,CAAC"}

package/dist/components/RichTextInput.js

@@ -37,7 +37,7 @@ const formats = ['header', 'bold', 'color', 'italic', 'link', 'strike', 'script'
  * </Modal>
  * ```
  */
-export const RichTextInput = ({ readonly = false, maxLength, value = '', onChange, isInvalid = false, formats = ['header', 'bold', 'italic', 'underline', 'list'], style, wrapperClassName, }) => {
+export const RichTextInput = ({ readonly = false, maxLength, value = '', onChange, isInvalid = false, formats = ['header', 'bold', 'italic', 'underline', 'list'], style, wrapperClassName, constrainHeight = false, }) => {
     const reactQuillRef = useRef(null);
     const [count, setCount] = useState(value.length);
     const checkCharacterCount = (event) => {
@@ -72,5 +72,5 @@ export const RichTextInput = ({ readonly = false, maxLength, value = '', onChang
             ],
     };
     // const formats = ['header', 'bold', 'color', 'italic', 'link', 'strike', 'script', 'underline', 'list', 'code', 'blockquote', 'code-block'];
-    return (_jsxs("div", { className: `ql-rich-text-wrapper${wrapperClassName ? ` ${wrapperClassName}` : ''}`, style: style, children: [_jsx(ReactQuill, { ref: reactQuillRef, theme: "snow", onKeyDown: checkCharacterCount, onKeyUp: setContentLength, formats: formats, modules: modules, value: value, onChange: onChange, readOnly: readonly, className: isInvalid ? 'is-invalid' : '' }), maxLength && (_jsxs(Form.Text, { className: count > maxLength ? 'text-danger' : 'text-muted', children: [count, "/", maxLength, " characters"] }))] }));
+    return (_jsxs("div", { className: `ql-rich-text-wrapper${constrainHeight ? ' ql-rich-text-wrapper--constrained' : ''}${wrapperClassName ? ` ${wrapperClassName}` : ''}`, style: style, children: [_jsx(ReactQuill, { ref: reactQuillRef, theme: "snow", onKeyDown: checkCharacterCount, onKeyUp: setContentLength, formats: formats, modules: modules, value: value, onChange: onChange, readOnly: readonly, className: isInvalid ? 'is-invalid' : '' }), maxLength && (_jsxs(Form.Text, { className: count > maxLength ? 'text-danger' : 'text-muted', children: [count, "/", maxLength, " characters"] }))] }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@capyx/components-library",
-	"version": "0.0.15",
+	"version": "0.0.17",
 	"description": "Shared React component library for Capyx applications",
 	"publishConfig": {
 		"access": "public"
@@ -37,7 +37,8 @@
 		"lib": "lib"
 	},
 	"scripts": {
-		"build": "tsc && npm run build:cjs",
+		"build": "tsc && npm run build:css && npm run build:cjs",
+		"build:css": "node scripts/copy-css.js",
 		"build:cjs": "tsc --module commonjs --outDir dist-cjs && node scripts/rename-cjs.js",
 		"prepublishOnly": "npm run build",
 		"lint": "biome lint .",