feat: useMask docs added

Author: tugcekucukoglu

apps/showcase/demo/usemask/basic-demo.tsx

@@ -0,0 +1,19 @@
+import { useMask, type UseMaskChangeEvent } from '@primereact/hooks';
+import { InputText } from 'primereact/inputtext';
+import * as React from 'react';
+
+export default function BasicDemo() {
+    const ref = React.useRef(null);
+    const [value, setValue] = React.useState('');
+    const { onMaskInput, onMaskKeyDown, onMaskKeyPress, onMaskFocus, onMaskBlur, onMaskPaste } = useMask({
+        mask: '99/99/9999',
+        onMaskChange: (event: UseMaskChangeEvent) => setValue(event.value ?? ''),
+        inputRef: ref
+    });
+
+    return (
+        <div className="card flex justify-center">
+            <InputText ref={ref} value={value} placeholder="99/99/9999" onInput={onMaskInput} onKeyDown={onMaskKeyDown} onKeyPress={onMaskKeyPress} onFocus={onMaskFocus} onBlur={onMaskBlur} onPaste={onMaskPaste} />
+        </div>
+    );
+}

apps/showcase/demo/usemask/format-patterns-demo.tsx

@@ -0,0 +1,80 @@
+import { useMask, type UseMaskChangeEvent } from '@primereact/hooks';
+import { InputText } from 'primereact/inputtext';
+import { Label } from 'primereact/label';
+import * as React from 'react';
+
+export default function FormatPatternsDemo() {
+    const input1 = React.useRef(null);
+    const input2 = React.useRef(null);
+    const input3 = React.useRef(null);
+    const [value1, setValue1] = React.useState('');
+    const [value2, setValue2] = React.useState('');
+    const [value3, setValue3] = React.useState('');
+
+    // SSN Mask
+    const {
+        onMaskInput: onMaskInput1,
+        onMaskKeyDown: onMaskKeyDown1,
+        onMaskKeyPress: onMaskKeyPress1,
+        onMaskFocus: onMaskFocus1,
+        onMaskBlur: onMaskBlur1,
+        onMaskPaste: onMaskPaste1
+    } = useMask({
+        mask: '999-99-9999',
+        onMaskChange: (event: UseMaskChangeEvent) => setValue1(event.value ?? ''),
+        inputRef: input1
+    });
+
+    // Phone Mask
+    const {
+        onMaskInput: onMaskInput2,
+        onMaskKeyDown: onMaskKeyDown2,
+        onMaskKeyPress: onMaskKeyPress2,
+        onMaskFocus: onMaskFocus2,
+        onMaskBlur: onMaskBlur2,
+        onMaskPaste: onMaskPaste2
+    } = useMask({
+        mask: '(999) 999-9999',
+        onMaskChange: (event: UseMaskChangeEvent) => setValue2(event.value ?? ''),
+        inputRef: input2
+    });
+
+    // Serial Mask
+    const {
+        onMaskInput: onMaskInput3,
+        onMaskKeyDown: onMaskKeyDown3,
+        onMaskKeyPress: onMaskKeyPress3,
+        onMaskFocus: onMaskFocus3,
+        onMaskBlur: onMaskBlur3,
+        onMaskPaste: onMaskPaste3
+    } = useMask({
+        mask: 'a*-999-a999',
+        onMaskChange: (event: UseMaskChangeEvent) => setValue3(event.value ?? ''),
+        inputRef: input3
+    });
+
+    return (
+        <div className="card flex flex-wrap gap-4">
+            <div className="flex-auto">
+                <Label htmlFor="ssn" className="font-bold block mb-2">
+                    SSN
+                </Label>
+                <InputText ref={input1} value={value1} id="ssn" placeholder="999-99-9999" fluid onInput={onMaskInput1} onKeyDown={onMaskKeyDown1} onKeyPress={onMaskKeyPress1} onFocus={onMaskFocus1} onBlur={onMaskBlur1} onPaste={onMaskPaste1} />
+            </div>
+
+            <div className="flex-auto">
+                <Label htmlFor="phone" className="font-bold block mb-2">
+                    Phone
+                </Label>
+                <InputText ref={input2} value={value2} id="phone" placeholder="(999) 999-9999" fluid onInput={onMaskInput2} onKeyDown={onMaskKeyDown2} onKeyPress={onMaskKeyPress2} onFocus={onMaskFocus2} onBlur={onMaskBlur2} onPaste={onMaskPaste2} />
+            </div>
+
+            <div className="flex-auto">
+                <Label htmlFor="serial" className="font-bold block mb-2">
+                    Serial
+                </Label>
+                <InputText ref={input3} value={value3} id="serial" placeholder="a*-999-a999" fluid onInput={onMaskInput3} onKeyDown={onMaskKeyDown3} onKeyPress={onMaskKeyPress3} onFocus={onMaskFocus3} onBlur={onMaskBlur3} onPaste={onMaskPaste3} />
+            </div>
+        </div>
+    );
+}

apps/showcase/demo/usemask/mask-demo.tsx

@@ -0,0 +1,19 @@
+import { useMask, type UseMaskChangeEvent } from '@primereact/hooks';
+import { InputText } from 'primereact/inputtext';
+import * as React from 'react';
+
+export default function OptionalDemo() {
+    const ref = React.useRef(null);
+    const [value, setValue] = React.useState('');
+    const { onMaskInput, onMaskKeyDown, onMaskKeyPress, onMaskFocus, onMaskBlur, onMaskPaste } = useMask({
+        mask: '(999) 999-9999? x99999',
+        onMaskChange: (event: UseMaskChangeEvent) => setValue(event.value ?? ''),
+        inputRef: ref
+    });
+
+    return (
+        <div className="card flex justify-center">
+            <InputText ref={ref} placeholder="(999) 999-9999 x99999" value={value} onInput={onMaskInput} onKeyDown={onMaskKeyDown} onKeyPress={onMaskKeyPress} onFocus={onMaskFocus} onBlur={onMaskBlur} onPaste={onMaskPaste} />
+        </div>
+    );
+}

apps/showcase/demo/usemask/optional-demo.tsx

@@ -0,0 +1,20 @@
+import { useMask, type UseMaskChangeEvent } from '@primereact/hooks';
+import { InputText } from 'primereact/inputtext';
+import * as React from 'react';
+
+export default function SlotCharDemo() {
+    const ref = React.useRef(null);
+    const [value, setValue] = React.useState('');
+    const { onMaskInput, onMaskKeyDown, onMaskKeyPress, onMaskFocus, onMaskBlur, onMaskPaste } = useMask({
+        mask: '99/99/9999',
+        slotChar: 'mm/dd/yyyy',
+        onMaskChange: (event: UseMaskChangeEvent) => setValue(event.value ?? ''),
+        inputRef: ref
+    });
+
+    return (
+        <div className="card flex justify-center">
+            <InputText ref={ref} placeholder="mm/dd/yyyy" value={value} onInput={onMaskInput} onKeyDown={onMaskKeyDown} onKeyPress={onMaskKeyPress} onFocus={onMaskFocus} onBlur={onMaskBlur} onPaste={onMaskPaste} />
+        </div>
+    );
+}

apps/showcase/demo/usemask/slot-char-demo.tsx

@@ -0,0 +1,38 @@
+---
+title: useMask
+description: useMask is used to enter input in a certain format such as numeric, date, currency, email and phone.
+---
+
+## Usage
+
+```tsx
+import { useMask } from '@primereact/hooks';
+```
+
+```tsx
+const mask = useMask();
+```
+
+## Examples
+
+### Basic
+
+<DocDemoViewer name="usemask:basic-demo" />
+
+### Format Patterns
+
+Mask format can be a combination of the following definitions; _a_ for alphabetic characters, _9_ for numeric characters and _\*_ for alphanumberic characters. In addition, formatting characters like _(_ , _)_ , _-_ are also accepted.
+
+<DocDemoViewer name="usemask:format-patterns-demo" />
+
+### Optional
+
+When the input does not complete the mask definition, it is cleared by default. Use _autoClear_ option to control this behavior. In addition, _?_ is used to mark anything after the question mark optional.
+
+<DocDemoViewer name="usemask:optional-demo" />
+
+### Slot Character
+
+Default placeholder for a mask is underscore that can be customized using _slotChar_ option.
+
+<DocDemoViewer name="usemask:slot-char-demo" />