ar-design 0.2.59 → 0.2.60

package/dist/assets/css/components/data-display/grid-system/column/styles.css

@@ -0,0 +1,6 @@
+.row > [class^="col"].right,
+.row > [class*="col"].right {
+  position: relative;
+  display: flex;
+  justify-content: right;
+}

package/dist/assets/css/components/data-display/grid-system/styles.css

@@ -2,6 +2,7 @@
 @import url("./row/styles.css");
 
 /* Column Css */
+@import url("./column/styles.css");
 @import url("./column/x-large.css");
 @import url("./column/large.css");
 @import url("./column/medium.css");

package/dist/assets/css/components/feedback/popover/styles.css

@@ -2,6 +2,9 @@
   position: relative;
   width: max-content;
 }
+.ar-popover-wrapper.full-width {
+  width: 100%;
+}
 
 .ar-popover {
   visibility: hidden;

package/dist/assets/css/components/form/button/styles.css

@@ -10,9 +10,8 @@
 .ar-button.disabled {
   cursor: no-drop;
 }
-
-.ar-button.max-width {
-  width: 100%;
+.ar-button.full-width {
+  min-width: 100%;
 }
 
 .ar-button > .text {

package/dist/components/feedback/popover/IProps.d.ts

@@ -5,6 +5,7 @@ interface IProps extends IChildren {
     content?: React.JSX.Element;
     onConfirm?: (confirm: boolean) => void;
     windowBlur?: boolean;
+    fullWidth?: boolean;
     config?: {
         buttons: {
             okButton: string;

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

@@ -5,11 +5,14 @@ import Button from "../../form/button";
 import Typography from "../../data-display/typography";
 import ReactDOM from "react-dom";
 const { Title } = Typography;
-const Popover = ({ children, title, message, content, onConfirm, windowBlur, config }) => {
+const Popover = ({ children, title, message, content, onConfirm, windowBlur, fullWidth, config }) => {
     // refs
     const _arPopoverWrapper = useRef(null);
     const _arPopover = useRef(null);
     const _arPopoverElement = useRef(null);
+    const _arPopoverClassName = ["ar-popover-wrapper"];
+    if (fullWidth)
+        _arPopoverClassName.push("full-width");
     // states
     const [open, setOpen] = useState(false);
     // methods
@@ -57,7 +60,7 @@ const Popover = ({ children, title, message, content, onConfirm, windowBlur, con
             document.removeEventListener("keydown", handleKeys);
         };
     }, [open]);
-    return (React.createElement("div", { ref: _arPopoverWrapper, className: "ar-popover-wrapper", role: "dialog" },
+    return (React.createElement("div", { ref: _arPopoverWrapper, className: _arPopoverClassName.map((c) => c).join(" "), role: "dialog" },
         open &&
             ReactDOM.createPortal(React.createElement("div", { ref: _arPopover, className: "ar-popover" },
                 title && (React.createElement("div", { className: "title" },

package/dist/components/form/button/IProps.d.ts

@@ -24,5 +24,6 @@ interface IProps extends Omit<IGlobalProps, "children" | "disabled">, ISizes, Re
         type: "fixed" | "absolute";
         inset: ("top" | "right" | "bottom" | "left")[];
     };
+    fullWidth?: boolean;
 }
 export default IProps;

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

@@ -3,20 +3,22 @@ import React, { useRef } from "react";
 import "../../../assets/css/components/form/button/styles.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import Tooltip from "../../feedback/tooltip";
-const Button = ({ children, variant = "filled", shape, status = "primary", border, size = "normal", tooltip, position, icon, upperCase, ...attributes }) => {
+const Button = ({ children, variant = "filled", shape, status = "primary", border, size = "normal", tooltip, position, fullWidth, icon, upperCase, ...attributes }) => {
     // refs
     const _button = useRef(null);
-    const _buttonClassName = ["ar-button"];
-    _buttonClassName.push(...Utils.GetClassName(variant, status, border, size, icon, attributes.className));
+    const _arButtonClassName = ["ar-button"];
+    _arButtonClassName.push(...Utils.GetClassName(variant, status, border, size, icon, attributes.className));
     if (!children)
-        _buttonClassName.push("no-content");
+        _arButtonClassName.push("no-content");
+    if (fullWidth)
+        _arButtonClassName.push("full-width");
     if (shape)
-        _buttonClassName.push(`ar-button-shape ${shape}`);
+        _arButtonClassName.push(`ar-button-shape ${shape}`);
     if (position) {
-        _buttonClassName.push(position.type);
-        _buttonClassName.push(position.inset.map((_inset) => _inset).join(" "));
+        _arButtonClassName.push(position.type);
+        _arButtonClassName.push(position.inset.map((_inset) => _inset).join(" "));
     }
-    const buttonElement = (React.createElement("button", { ref: _button, ...attributes, className: _buttonClassName.map((c) => c).join(" "), onClick: (event) => {
+    const buttonElement = (React.createElement("button", { ref: _button, ...attributes, className: _arButtonClassName.map((c) => c).join(" "), onClick: (event) => {
             // Disabled gelmesi durumunda işlem yapmasına izin verme...
             if (attributes.disabled)
                 return;

package/package.json

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