softable-pixels-web 1.2.7 → 1.2.8

package/dist/{TextArea-Cne9IZEW.js → TextArea-BvSrZjQe.js}

@@ -2,7 +2,7 @@ import { n as styled, t as useThemedStyles } from "./useThemedStyles-BJWB5BTH.js
 import { t as Typography } from "./Typography-CKSjnDPX.js";
 import { t as Label } from "./Label-CPua_PPu.js";
 import { t as ErrorMessage } from "./ErrorMessage-DOkrG22I.js";
-import { useId } from "react";
+import { useId, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/commons/inputs/TextArea/styles.ts
@@ -52,7 +52,9 @@ function createTextAreaStyles(props) {
 //#endregion
 //#region src/components/commons/inputs/TextArea/index.tsx
 const TextArea = (props) => {
-	const { value, disabled, readOnly, maxLength, hideMaxLength, textMaxLength, placeholder, errorMessage, label, required, requiredColor, labelConfig } = props;
+	const { value, delay, disabled, readOnly, maxLength, hideMaxLength, textMaxLength, placeholder, errorMessage, label, required, requiredColor, labelConfig, onChange } = props;
+	const timeoutRef = useRef(null);
+	const [inputValue, setInputValue] = useState(value);
 	const inputId = useId();
 	const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {
 		pick: (p) => [
@@ -66,7 +68,11 @@ const TextArea = (props) => {
 	});
 	function handleChange(e) {
 		if (disabled || readOnly) return;
-		props.onChange?.(e.target.value);
+		const value$1 = e.target.value;
+		setInputValue(value$1);
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		if (!delay) onChange?.(value$1);
+		else timeoutRef.current = setTimeout(() => onChange?.(value$1), delay);
 	}
 	function renderLabel() {
 		if (!label) return null;
@@ -83,7 +89,7 @@ const TextArea = (props) => {
 		children: [
 			renderLabel(),
 			/* @__PURE__ */ jsx("textarea", {
-				value,
+				value: inputValue,
 				disabled,
 				readOnly,
 				maxLength,
@@ -110,4 +116,4 @@ const TextArea = (props) => {
 
 //#endregion
 export { TextArea as t };
-//# sourceMappingURL=TextArea-Cne9IZEW.js.map
+//# sourceMappingURL=TextArea-BvSrZjQe.js.map

package/dist/TextArea-BvSrZjQe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea-BvSrZjQe.js","names":["value"],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps) {\n  const { height = '8rem', readOnly } = props\n\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.375rem'\n    },\n    iconContainer: {\n      position: 'absolute',\n      left: '0.75rem',\n      top: '1.375rem',\n      transform: 'translateY(-50%)'\n    },\n    textArea: {\n      height,\n      width: '100%',\n      paddingBlock: '0.75rem',\n      paddingInline: '0.875rem',\n      borderWidth: 1,\n      borderRadius: '0.5rem',\n      resize: 'none',\n\n      fontWeight: '400',\n      fontSize: '1rem',\n      color: 'var(--px-text-primary)',\n\n      borderColor: props.errorMessage\n        ? 'var(--px-color-error)'\n        : 'var(--px-border-primary)',\n      outlineOffset: '-1px',\n\n      cursor: readOnly ? 'default' : undefined,\n\n      __rules: {\n        '&::placeholder': {\n          fontWeight: 400,\n          color: 'var(--px-text-secondary)'\n        },\n\n        '&:focus-within': {\n          outlineOffset: '-1px',\n          outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport { useId, useRef, useState } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTextAreaStyles } from './styles'\n\nexport const TextArea = (props: TextAreaProps) => {\n  const {\n    value,\n    delay,\n    disabled,\n    readOnly,\n    maxLength,\n    hideMaxLength,\n    textMaxLength,\n    placeholder,\n    errorMessage,\n\n    label,\n    required,\n    requiredColor,\n    labelConfig,\n    onChange\n  } = props\n\n  // Refs\n  const timeoutRef = useRef<NodeJS.Timeout>(null)\n\n  // States\n  const [inputValue, setInputValue] = useState(value)\n\n  // Hooks\n  const inputId = useId()\n\n  const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n    pick: p => [p.height, p.readOnly, p.placeholderColor, p.focusedRingColor],\n    override: props.styles,\n    applyCommonProps: true\n  })\n\n  // Functions\n  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n    if (disabled || readOnly) return\n\n    const value = e.target.value\n\n    setInputValue(value)\n\n    if (timeoutRef.current) clearTimeout(timeoutRef.current)\n\n    if (!delay) onChange?.(value)\n    else {\n      timeoutRef.current = setTimeout(() => onChange?.(value), delay)\n    }\n  }\n\n  function renderLabel() {\n    if (!label) return null\n\n    return (\n      <div>\n        <Label\n          label={label}\n          htmlFor={inputId}\n          required={required}\n          requiredColor={requiredColor}\n          {...labelConfig}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div style={styles.container}>\n      {renderLabel()}\n\n      <textarea\n        value={inputValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        maxLength={maxLength}\n        placeholder={placeholder}\n        style={styles.textArea}\n        className={classes.textArea}\n        onChange={handleChange}\n      />\n\n      {maxLength && !hideMaxLength ? (\n        <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n          {value?.length}/{maxLength} {textMaxLength}\n        </Typography>\n      ) : null}\n\n      {errorMessage ? <ErrorMessage message={errorMessage} /> : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,qBAAqB,OAAsB;CACzD,MAAM,EAAE,SAAS,QAAQ,aAAa;AAEtC,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EACD,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,aAAa;GACb,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,aAAa,MAAM,eACf,0BACA;GACJ,eAAe;GAEf,QAAQ,WAAW,YAAY;GAE/B,SAAS;IACP,kBAAkB;KAChB,YAAY;KACZ,OAAO;KACR;IAED,kBAAkB;KAChB,eAAe;KACf,SAAS,iBAAiB,MAAM,eAAe,qBAAqB,qBAAqB;KAC1F;IACF;GACF;EACF,CAAC;;;;;ACrCJ,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,OACA,UACA,UACA,WACA,eACA,eACA,aACA,cAEA,OACA,UACA,eACA,aACA,aACE;CAGJ,MAAM,aAAa,OAAuB,KAAK;CAG/C,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAGnD,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GAAC,EAAE;GAAQ,EAAE;GAAU,EAAE;GAAkB,EAAE;GAAiB;EACzE,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;EAE1B,MAAMA,UAAQ,EAAE,OAAO;AAEvB,gBAAcA,QAAM;AAEpB,MAAI,WAAW,QAAS,cAAa,WAAW,QAAQ;AAExD,MAAI,CAAC,MAAO,YAAWA,QAAM;MAE3B,YAAW,UAAU,iBAAiB,WAAWA,QAAM,EAAE,MAAM;;CAInE,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC,mBACC,oBAAC;GACQ;GACP,SAAS;GACC;GACK;GACf,GAAI;IACJ,GACE;;AAIV,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,aAAa;GAEd,oBAAC;IACC,OAAO;IACG;IACA;IACC;IACE;IACb,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,UAAU;KACV;GAED,aAAa,CAAC,gBACb,qBAAC;IAAW,SAAQ;IAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;KAC9D,OAAO;KAAO;KAAE;KAAU;KAAE;;KAClB,GACX;GAEH,eAAe,oBAAC,gBAAa,SAAS,eAAgB,GAAG;;GACtD"}

package/dist/{index-CCPXtf6p.d.ts → index-BmFkBYVJ.d.ts}

@@ -46,6 +46,7 @@ declare function createTextAreaStyles(props: TextAreaProps): {
 interface TextAreaProps {
   value?: string;
   label?: string;
+  delay?: number;
   placeholder?: string;
   styles?: Partial<ReturnType<typeof createTextAreaStyles>>;
   required?: boolean;
@@ -68,4 +69,4 @@ interface TextAreaProps {
 declare const TextArea: (props: TextAreaProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TextArea as t };
-//# sourceMappingURL=index-CCPXtf6p.d.ts.map
+//# sourceMappingURL=index-BmFkBYVJ.d.ts.map

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { t as Input } from "./index-XPk_mchF.js";
 import { t as SearchInput } from "./index-CBfW89pi.js";
 import { n as types_d_exports$4, t as Select } from "./index-41HYkx0w.js";
 import { n as types_d_exports$3 } from "./types-C0u1I3AZ.js";
-import { t as TextArea } from "./index-CCPXtf6p.js";
+import { t as TextArea } from "./index-BmFkBYVJ.js";
 import { t as Popover } from "./index-D5OTHkPO.js";
 import { t as BasePopover } from "./index-DEAzVsKY.js";
 import { t as Breadcrumb } from "./index-CqmzOJc_.js";

package/dist/index.js

@@ -22,7 +22,7 @@ import { t as IconButton } from "./IconButton-DQaptukh.js";
 import { n as MaskType, r as MaskModule, t as Locale } from "./MaskModule-CUFXLKZU.js";
 import { t as Input } from "./Input-Bi_mgUry.js";
 import { n as types_exports$4, t as Select } from "./Select-BO2A8Wdu.js";
-import { t as TextArea } from "./TextArea-Cne9IZEW.js";
+import { t as TextArea } from "./TextArea-BvSrZjQe.js";
 import { t as SearchInput } from "./SearchInput-Ol5FJDHS.js";
 import { n as types_exports$1, t as ColorPicker } from "./ColorPicker-CdECHCbh.js";
 import { t as Skeleton } from "./Skeleton-CixPhMzv.js";

package/dist/text-area.d.ts

@@ -1,2 +1,2 @@
-import { t as TextArea } from "./index-CCPXtf6p.js";
+import { t as TextArea } from "./index-BmFkBYVJ.js";
 export { TextArea };

package/dist/text-area.js

@@ -2,6 +2,6 @@ import "./useThemedStyles-BJWB5BTH.js";
 import "./Typography-CKSjnDPX.js";
 import "./Label-CPua_PPu.js";
 import "./ErrorMessage-DOkrG22I.js";
-import { t as TextArea } from "./TextArea-Cne9IZEW.js";
+import { t as TextArea } from "./TextArea-BvSrZjQe.js";
 
 export { TextArea };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softable-pixels-web",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "",
   "keywords": [],
   "author": "softable",

package/dist/TextArea-Cne9IZEW.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextArea-Cne9IZEW.js","names":[],"sources":["../src/components/commons/inputs/TextArea/styles.ts","../src/components/commons/inputs/TextArea/index.tsx"],"sourcesContent":["// Types\nimport { styled } from '@hooks/useThemedStyles/types'\nimport type { TextAreaProps } from './types'\n\nexport function createTextAreaStyles(props: TextAreaProps) {\n  const { height = '8rem', readOnly } = props\n\n  return styled({\n    container: {\n      width: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n\n      rowGap: '0.375rem'\n    },\n    iconContainer: {\n      position: 'absolute',\n      left: '0.75rem',\n      top: '1.375rem',\n      transform: 'translateY(-50%)'\n    },\n    textArea: {\n      height,\n      width: '100%',\n      paddingBlock: '0.75rem',\n      paddingInline: '0.875rem',\n      borderWidth: 1,\n      borderRadius: '0.5rem',\n      resize: 'none',\n\n      fontWeight: '400',\n      fontSize: '1rem',\n      color: 'var(--px-text-primary)',\n\n      borderColor: props.errorMessage\n        ? 'var(--px-color-error)'\n        : 'var(--px-border-primary)',\n      outlineOffset: '-1px',\n\n      cursor: readOnly ? 'default' : undefined,\n\n      __rules: {\n        '&::placeholder': {\n          fontWeight: 400,\n          color: 'var(--px-text-secondary)'\n        },\n\n        '&:focus-within': {\n          outlineOffset: '-1px',\n          outline: `2px solid var(${props.errorMessage ? '--px-color-error' : '--px-color-primary'})`\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport { useId } from 'react'\n\n// Types\nimport type { TextAreaProps } from './types'\n\n// Components\nimport { Label } from '@components/commons/toolkit/Label'\nimport { Typography } from '@components/commons/toolkit/Typography'\nimport { ErrorMessage } from '@components/commons/toolkit/ErrorMessage'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createTextAreaStyles } from './styles'\n\nexport const TextArea = (props: TextAreaProps) => {\n  const {\n    value,\n    disabled,\n    readOnly,\n    maxLength,\n    hideMaxLength,\n    textMaxLength,\n    placeholder,\n    errorMessage,\n\n    label,\n    required,\n    requiredColor,\n    labelConfig\n  } = props\n\n  // Hooks\n  const inputId = useId()\n\n  const { styles, classes } = useThemedStyles(props, createTextAreaStyles, {\n    pick: p => [p.height, p.readOnly, p.placeholderColor, p.focusedRingColor],\n    override: props.styles,\n    applyCommonProps: true\n  })\n\n  // Functions\n  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n    if (disabled || readOnly) return\n    props.onChange?.(e.target.value)\n  }\n\n  function renderLabel() {\n    if (!label) return null\n\n    return (\n      <div>\n        <Label\n          label={label}\n          htmlFor={inputId}\n          required={required}\n          requiredColor={requiredColor}\n          {...labelConfig}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <div style={styles.container}>\n      {renderLabel()}\n\n      <textarea\n        value={value}\n        disabled={disabled}\n        readOnly={readOnly}\n        maxLength={maxLength}\n        placeholder={placeholder}\n        style={styles.textArea}\n        className={classes.textArea}\n        onChange={handleChange}\n      />\n\n      {maxLength && !hideMaxLength ? (\n        <Typography variant=\"b2\" styles={{ text: { marginLeft: 'auto' } }}>\n          {value?.length}/{maxLength} {textMaxLength}\n        </Typography>\n      ) : null}\n\n      {errorMessage ? <ErrorMessage message={errorMessage} /> : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAIA,SAAgB,qBAAqB,OAAsB;CACzD,MAAM,EAAE,SAAS,QAAQ,aAAa;AAEtC,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GAEP,SAAS;GACT,eAAe;GAEf,QAAQ;GACT;EACD,eAAe;GACb,UAAU;GACV,MAAM;GACN,KAAK;GACL,WAAW;GACZ;EACD,UAAU;GACR;GACA,OAAO;GACP,cAAc;GACd,eAAe;GACf,aAAa;GACb,cAAc;GACd,QAAQ;GAER,YAAY;GACZ,UAAU;GACV,OAAO;GAEP,aAAa,MAAM,eACf,0BACA;GACJ,eAAe;GAEf,QAAQ,WAAW,YAAY;GAE/B,SAAS;IACP,kBAAkB;KAChB,YAAY;KACZ,OAAO;KACR;IAED,kBAAkB;KAChB,eAAe;KACf,SAAS,iBAAiB,MAAM,eAAe,qBAAqB,qBAAqB;KAC1F;IACF;GACF;EACF,CAAC;;;;;ACrCJ,MAAa,YAAY,UAAyB;CAChD,MAAM,EACJ,OACA,UACA,UACA,WACA,eACA,eACA,aACA,cAEA,OACA,UACA,eACA,gBACE;CAGJ,MAAM,UAAU,OAAO;CAEvB,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,sBAAsB;EACvE,OAAM,MAAK;GAAC,EAAE;GAAQ,EAAE;GAAU,EAAE;GAAkB,EAAE;GAAiB;EACzE,UAAU,MAAM;EAChB,kBAAkB;EACnB,CAAC;CAGF,SAAS,aAAa,GAA2C;AAC/D,MAAI,YAAY,SAAU;AAC1B,QAAM,WAAW,EAAE,OAAO,MAAM;;CAGlC,SAAS,cAAc;AACrB,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,oBAAC,mBACC,oBAAC;GACQ;GACP,SAAS;GACC;GACK;GACf,GAAI;IACJ,GACE;;AAIV,QACE,qBAAC;EAAI,OAAO,OAAO;;GAChB,aAAa;GAEd,oBAAC;IACQ;IACG;IACA;IACC;IACE;IACb,OAAO,OAAO;IACd,WAAW,QAAQ;IACnB,UAAU;KACV;GAED,aAAa,CAAC,gBACb,qBAAC;IAAW,SAAQ;IAAK,QAAQ,EAAE,MAAM,EAAE,YAAY,QAAQ,EAAE;;KAC9D,OAAO;KAAO;KAAE;KAAU;KAAE;;KAClB,GACX;GAEH,eAAe,oBAAC,gBAAa,SAAS,eAAgB,GAAG;;GACtD"}