@via-profit/ui-kit 0.1.0-rc.45 → 0.1.0-rc.47

package/Badge/BadgeOutlined.js

@@ -21,33 +21,45 @@ const Color_1 = __importDefault(require("../Color"));
 const BadgeBase_1 = __importDefault(require("./BadgeBase"));
 const StyledOutlinedBadge = (0, styled_1.default)(BadgeBase_1.default) `
   color: ${({ $color }) => $color.darken(30).toString()};
-  border-color: ${({ $color }) => $color.toString()};
+  border-color: ${({ $background }) => $background.toString()};
   background-color: transparent;
   border-style: solid;
   border-width: 0.14em;
   &:hover {
-    background-color: ${({ $color }) => $color.darken(20).alpha(0.1).toString()};
+    background-color: ${({ $background }) => $background.darken(20).alpha(0.1).toString()};
   }
   &:focus-visible {
     outline-style: solid;
     outline-width: 0.14em;
-    outline-color: ${({ $color, theme }) => $color.rgbString() === theme.color.accentPrimary.rgbString()
-    ? theme.color.textPrimary.toString()
-    : theme.color.accentPrimary.toString()};
+    outline-color: ${({ $background }) => $background.rgbString()};
   }
+  ${({ $clickable }) => $clickable &&
+    (0, react_2.css) `
+      cursor: pointer;
+    `}
 `;
 const BadgeOutlined = (props, ref) => {
-    const { children, color } = props, restProps = __rest(props, ["children", "color"]);
+    const { children, color, onClick } = props, restProps = __rest(props, ["children", "color", "onClick"]);
     const theme = (0, react_2.useTheme)();
-    const $color = react_1.default.useMemo(() => {
+    const clickable = react_1.default.useMemo(() => typeof onClick === 'function', [onClick]);
+    const { $background, $color } = react_1.default.useMemo(() => {
         switch (true) {
             case color === 'primary':
-                return theme.color.accentPrimary;
+                return {
+                    $color: theme.color.accentPrimary,
+                    $background: theme.color.accentPrimary,
+                };
             case color === 'secondary':
-                return theme.color.accentSecondary;
+                return {
+                    $color: theme.color.accentSecondary,
+                    $background: theme.color.accentSecondary,
+                };
             case typeof color === 'undefined':
             case color === 'default':
-                return theme.color.textPrimary.lighten(30);
+                return {
+                    $color: new Color_1.default(theme.color.textPrimary),
+                    $background: theme.color.textPrimary.lighten(100),
+                };
             case typeof color === 'string': {
                 let c = theme.color.textPrimary;
                 try {
@@ -58,12 +70,18 @@ const BadgeOutlined = (props, ref) => {
                 catch (err) {
                     console.error(`invalid color value «${color}»`);
                 }
-                return c;
+                return {
+                    $color: c,
+                    $background: c,
+                };
             }
             default:
-                return theme.color.textPrimary;
+                return {
+                    $color: theme.color.textPrimary,
+                    $background: theme.color.textPrimary,
+                };
         }
     }, [color, theme.color]);
-    return (react_1.default.createElement(StyledOutlinedBadge, Object.assign({ "$color": $color, color: color, variant: "outlined" }, restProps, { ref: ref }), children));
+    return (react_1.default.createElement(StyledOutlinedBadge, Object.assign({ "$color": $color, "$background": $background, "$clickable": clickable, color: color, variant: "outlined" }, restProps, { tabIndex: clickable ? 0 : -1, ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(BadgeOutlined);

package/Badge/BadgeStandard.js

@@ -38,10 +38,15 @@ const StyledStandardBadge = (0, styled_1.default)(BadgeBase_1.default) `
     ? theme.color.textPrimary.toString()
     : theme.color.accentPrimary.toString()};
   }
+  ${({ $clickable }) => $clickable &&
+    (0, react_2.css) `
+      cursor: pointer;
+    `}
 `;
 const BadgeStandard = (props, ref) => {
-    const { children, color } = props, restProps = __rest(props, ["children", "color"]);
+    const { children, color, onClick } = props, restProps = __rest(props, ["children", "color", "onClick"]);
     const theme = (0, react_2.useTheme)();
+    const clickable = react_1.default.useMemo(() => typeof onClick === 'function', [onClick]);
     const { $background, $color } = react_1.default.useMemo(() => {
         switch (true) {
             case color === 'primary':
@@ -84,6 +89,6 @@ const BadgeStandard = (props, ref) => {
                 };
         }
     }, [color, theme.color]);
-    return (react_1.default.createElement(StyledStandardBadge, Object.assign({ variant: "standard", "$color": $color, "$background": $background, color: color }, restProps, { ref: ref }), children));
+    return (react_1.default.createElement(StyledStandardBadge, Object.assign({ variant: "standard", "$clickable": clickable, "$color": $color, "$background": $background, color: color }, restProps, { tabIndex: clickable ? 0 : -1, ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(BadgeStandard);

package/Modal/BaseModal/ModalWrapper.js

@@ -81,7 +81,7 @@ const ModalWrapper = props => {
         }
     }, []);
     react_1.default.useEffect(() => {
-        if (containerRef.current) {
+        if (isOpenProp && containerRef.current) {
             containerRef.current.focus();
         }
         const keydown = (event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.45",
+  "version": "0.1.0-rc.47",
   "description": "UI Kit",
   "repository": {
     "type": "git",