ar-design 0.3.70 → 0.3.72

package/dist/components/feedback/popover/index.js

@@ -18,12 +18,16 @@ const Popover = ({ children, title, message, content, onConfirm, windowBlur, ful
     // methods
     const handleClickOutSide = (event) => {
         const target = event.target;
-        if (_arPopover.current && !_arPopover.current.contains(target))
+        const isArSelectOptions = document.getElementsByClassName("ar-select-options").length === 0;
+        const isArCalendar = document.getElementsByClassName("ar-date-calendar").length === 0;
+        if (_arPopover.current && !_arPopover.current.contains(target) && isArCalendar && isArSelectOptions)
             setOpen(false);
     };
     const handleKeys = (event) => {
         const key = event.key;
-        if (key === "Escape")
+        const isArSelectOptions = document.getElementsByClassName("ar-select-options").length === 0;
+        const isArCalendar = document.getElementsByClassName("ar-date-calendar").length === 0;
+        if (key === "Escape" && isArCalendar && isArSelectOptions)
             setOpen(false);
     };
     const handlePosition = () => {

package/dist/components/form/date-picker/Props.d.ts

@@ -1,7 +1,10 @@
 import { IBorder, IColors, IStatus, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
 type Props = {
     label?: string;
-    isClock?: boolean;
     onChange: (value: string) => void;
+    config?: {
+        isClock?: boolean;
+        isFooterButton?: boolean;
+    };
 } & IVariant & IColors & IStatus & IBorder & IValidation & Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "color">;
 export default Props;

package/dist/components/form/date-picker/index.js

@@ -21,7 +21,7 @@ const months = [
     { value: 10, text: "Kasım" },
     { value: 11, text: "Aralık" },
 ];
-const DatePicker = ({ variant, color, onChange, isClock, validation, ...attributes }) => {
+const DatePicker = ({ variant, color, onChange, config, validation, ...attributes }) => {
     // refs
     const _arCalendar = useRef(null);
     const _arClock = useRef(null);
@@ -80,7 +80,7 @@ const DatePicker = ({ variant, color, onChange, isClock, validation, ...attribut
                 const screenCenterY = window.innerHeight / 2;
                 const sx = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
                 const sy = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
-                const _isClock = InpuRect.left > screenCenterX ? -Math.abs(isClock ? 7.5 * 16.75 : 0) : 0;
+                const _isClock = InpuRect.left > screenCenterX ? -Math.abs(config?.isClock ? 7.5 * 16.75 : 0) : 0;
                 _arCalendar.current.style.visibility = "visible";
                 _arCalendar.current.style.opacity = "1";
                 _arCalendar.current.style.top = `${(InpuRect.top > screenCenterY ? InpuRect.top - arCalendarRect.height : InpuRect.top + InpuRect.height) + sy}px`;
@@ -109,7 +109,7 @@ const DatePicker = ({ variant, color, onChange, isClock, validation, ...attribut
         setSelectedDay(_day.current);
         setSelectedHours(_hours.current);
         setSelectedMinutes(_minutes.current);
-        const inputDate = new Date(Date.UTC(_year.current, _month.current, _day.current, !isClock ? 0 : _hours.current, !isClock ? 0 : _minutes.current, 0));
+        const inputDate = new Date(Date.UTC(_year.current, _month.current, _day.current, !config?.isClock ? 0 : _hours.current, !config?.isClock ? 0 : _minutes.current, 0));
         onChange(inputDate.toISOString());
         isShutdownOn && setCalendarIsOpen(false);
     };
@@ -129,14 +129,14 @@ const DatePicker = ({ variant, color, onChange, isClock, validation, ...attribut
         // Takvim kapatılıyor...
         setCalendarIsOpen(false);
         // Değer gönderiliyor...
-        const inputDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), !isClock ? 0 : now.getHours(), !isClock ? 0 : now.getMinutes(), 0));
+        const inputDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), !config?.isClock ? 0 : now.getHours(), !config?.isClock ? 0 : now.getMinutes(), 0));
         onChange(inputDate.toISOString());
     };
     const okayButton = () => {
         return (React.createElement(Button, { variant: "borderless", color: "green", onClick: () => handleOk() }, "Tamam"));
     };
     const closeCalendar = () => {
-        const { year, month, day, hours, minutes } = DATE.Parse(String(attributes.value), isClock);
+        const { year, month, day, hours, minutes } = DATE.Parse(String(attributes.value), config?.isClock);
         _year.current = attributes.value ? year : selectedYear;
         _month.current = attributes.value ? month - 1 : selectedMonth;
         _day.current = attributes.value ? day : selectedDay;
@@ -212,7 +212,7 @@ const DatePicker = ({ variant, color, onChange, isClock, validation, ...attribut
         // Listeler oluşturuyor...
         generateList(24, _hours.current, setHours);
         generateList(60, _minutes.current, setMinutes);
-        if (!isClock)
+        if (!config?.isClock)
             return;
         if (calendarIsOpen)
             handleHeight();
@@ -231,7 +231,7 @@ const DatePicker = ({ variant, color, onChange, isClock, validation, ...attribut
                 behavior: "smooth",
             });
         }
-    }, [timeChanged, calendarIsOpen, isClock]);
+    }, [timeChanged, calendarIsOpen, config?.isClock]);
     useEffect(() => {
         if (isNaN(_year.current))
             return;
@@ -250,7 +250,7 @@ const DatePicker = ({ variant, color, onChange, isClock, validation, ...attribut
         attributes.placeholder && attributes.placeholder.length > 0 && (React.createElement("label", null,
             validation ? "* " : "",
             attributes.placeholder)),
-        React.createElement(Input, { ref: _beginDate, variant: variant, color: color, ...attributes, value: DATE.ParseValue(String(attributes.value), isClock), type: isClock ? "datetime-local" : "date", onKeyDown: (event) => {
+        React.createElement(Input, { ref: _beginDate, variant: variant, color: color, ...attributes, value: DATE.ParseValue(String(attributes.value), config?.isClock), type: config?.isClock ? "datetime-local" : "date", onKeyDown: (event) => {
                 if (event.code === "Space")
                     event.preventDefault();
                 else if (event.code === "Enter")
@@ -330,11 +330,11 @@ const DatePicker = ({ variant, color, onChange, isClock, validation, ...attribut
                 React.createElement("div", { className: "content" }, !isNaN(_month.current) && !isNaN(_year.current) ? (React.createElement("div", { className: "calendar" },
                     React.createElement("div", { className: "weekdays" }, weekdays.map((weekday, index) => (React.createElement("span", { key: index }, weekday)))),
                     React.createElement("div", { className: "days" }, calendarDays))) : (React.createElement(Alert, { status: "warning" }, "Ay veya y\u0131l se\u00E7imi yapman\u0131z gerekmektedir."))),
-                React.createElement("div", { ref: _calendarFooter, className: "footer" },
+                config?.isFooterButton && (React.createElement("div", { ref: _calendarFooter, className: "footer" },
                     React.createElement("div", null,
                         React.createElement(Button, { variant: "borderless", onClick: () => setNowButton() }, "\u015Eimdi")),
-                    React.createElement("div", null, !isClock && okayButton())),
-                isClock && (React.createElement("div", { ref: _arClock, className: "clock" },
+                    React.createElement("div", null, !config?.isClock && okayButton()))),
+                config?.isClock && (React.createElement("div", { ref: _arClock, className: "clock" },
                     React.createElement("div", { ref: _clockHeader, className: "header" },
                         _hours.current.toString().padStart(2, "0"),
                         " : ",

package/dist/components/form/input/index.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import "../../../assets/css/components/form/input/styles.css";
 import IProps from "./IProps";
 import Otp from "./otp/Otp";
-import Num from "./num";
+import Num from "./num/Num";
 interface InputCompound extends React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>> {
     Number: typeof Num;
     Otp: typeof Otp;

package/dist/components/form/input/index.js

@@ -5,7 +5,7 @@ import Button from "../button";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import { ARIcon } from "../../icons";
 import Otp from "./otp/Otp";
-import Num from "./num";
+import Num from "./num/Num";
 const BaseInput = forwardRef(({ variant = "outlined", color = "light", icon, border = { radius: "sm" }, button, addon, upperCase, validation, ...attributes }, ref) => {
     // refs
     const _innerRef = useRef(null);

package/dist/components/form/input/otp/Otp.js

@@ -18,9 +18,10 @@ const Otp = ({ character, onChange, ...attributes }) => {
             if (!_inputs.current[index + 1]) {
                 _inputs.current[character - 1]?.focus();
                 _inputs.current[character - 1]?.select();
-                return;
             }
-            _inputs.current[index + 1]?.focus();
+            else {
+                _inputs.current[index + 1]?.focus();
+            }
         }
         onChange?.({
             ...event,
@@ -47,6 +48,18 @@ const Otp = ({ character, onChange, ...attributes }) => {
                 const input = _inputs.current[i];
                 if (input) {
                     input.value = chars[i];
+                    _value.current = { ..._value.current, [i]: chars[i] };
+                    onChange?.({
+                        ...event,
+                        target: {
+                            ...event.currentTarget,
+                            name: attributes.name ?? "",
+                            value: Object.keys(_value.current)
+                                .sort((a, b) => Number(a) - Number(b))
+                                .map((key) => _value.current[Number(key)])
+                                .join(""),
+                        },
+                    });
                     input.focus();
                 }
                 i++;

package/dist/index.d.ts

@@ -5,7 +5,6 @@ import ButtonGroup from "./components/form/button-group";
 import Checkbox from "./components/form/checkbox";
 import DatePicker from "./components/form/date-picker";
 import Input from "./components/form/input";
-import InputTag from "./components/form/input-tag";
 import Radio from "./components/form/radio";
 import Select from "./components/form/select";
 import Switch from "./components/form/switch";
@@ -34,4 +33,4 @@ import Pagination from "./components/navigation/pagination";
 import Steps from "./components/navigation/steps";
 import Grid from "./components/data-display/grid-system";
 import Layout from "./components/layout";
-export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, InputTag, Radio, Select, Switch, TextEditor, Upload, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Drawer, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Pagination, Steps, Grid, Layout, };
+export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, Radio, Select, Switch, TextEditor, Upload, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Drawer, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Pagination, Steps, Grid, Layout, };

package/dist/index.js

@@ -6,7 +6,6 @@ import ButtonGroup from "./components/form/button-group";
 import Checkbox from "./components/form/checkbox";
 import DatePicker from "./components/form/date-picker";
 import Input from "./components/form/input";
-import InputTag from "./components/form/input-tag";
 import Radio from "./components/form/radio";
 import Select from "./components/form/select";
 import Switch from "./components/form/switch";
@@ -41,7 +40,7 @@ import Grid from "./components/data-display/grid-system";
 import Layout from "./components/layout";
 export { 
 // Form Elements
-Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, InputTag, Radio, Select, Switch, TextEditor, Upload, 
+Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, Radio, Select, Switch, TextEditor, Upload, 
 // Data Display
 Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
 // Feedback

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.3.70",
+  "version": "0.3.72",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/components/form/input-tag/IProps.d.ts

@@ -1,4 +0,0 @@
-import { IBorder, IIcon, IStatus, IUpperCase, IValidation, IVariant } from "../../../libs/types/IGlobalProps";
-interface IProps extends IVariant, IStatus, IBorder, IIcon, IUpperCase, IValidation, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "color"> {
-}
-export default IProps;

package/dist/components/form/input-tag/IProps.js

@@ -1 +0,0 @@
-export {};

package/dist/components/form/input-tag/index.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import IProps from "./IProps";
-declare const InputTag: React.FC<IProps>;
-export default InputTag;

package/dist/components/form/input-tag/index.js

@@ -1,6 +0,0 @@
-import React from "react";
-import Input from "../input";
-const InputTag = ({ ...attributes }) => {
-    return React.createElement(Input, { ...attributes });
-};
-export default InputTag;