@edvisor/product-language 0.8.4 → 0.8.6

package/index.js

@@ -10755,41 +10755,45 @@ function useKeyDown(targetKey, handler) {
   return;
 }
 
-const fadeIn = /*#__PURE__*/keyframes(["from{opacity:0;}to{opacity:1;}"]);
+const fadeIn = /*#__PURE__*/keyframes(["from{opacity:.4;}to{opacity:1;}"]);
 const grow = /*#__PURE__*/keyframes(["from{transform:scale(.8)}to{transform:scale(1)}"]);
 const OverlayFrame = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "modal-base__OverlayFrame",
   componentId: "r4sytz-0"
-})(["position:fixed;top:0;left:0;width:100%;height:100vh;z-index:20000;background-color:", ";justify-content:center;animation:", " .1s ease-out;"], Background.Overlay, fadeIn);
+})(["position:fixed;top:0;left:0;width:100%;height:100%;z-index:20000;background-color:", ";justify-content:center;animation:", " .2s ease-out;"], Background.Overlay, fadeIn);
 const ModalFrame = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "modal-base__ModalFrame",
   componentId: "r4sytz-1"
-})(["background-color:", ";z-index:20010;width:", ";position:fixed;transform:translate(-50%,-50%);", ";border-radius:8px;animation:", " .1s ease-in;"], Surface.Default.Default, ({
+})(["background-color:", ";z-index:20010;width:", ";", ";border-radius:8px;animation:", " .1s ease-in;"], Surface.Default.Default, ({
   widthValue
 }) => widthValue, shadowXl, grow);
-const modalSizeToPixelSize = {
-  [0
-  /* MODAL_SIZE.SMALL */
-  ]: '456px',
-  [1
-  /* MODAL_SIZE.CRITICAL */
-  ]: '518px',
-  [2
-  /* MODAL_SIZE.DEFAULT */
-  ]: '616px',
-  [3
-  /* MODAL_SIZE.LARGE */
-  ]: '776px',
-  [4
-  /* MODAL_SIZE.X_LARGE */
-  ]: '936px'
-};
+const MODAL_SIZE = {
+  small: '456px',
+  critical: '518px',
+  default: '616px',
+  large: '776px',
+  xLarge: '936px'
+};
+const MODAL_SIZE_TEXT = {
+  SMALL: 'small',
+  CRITICAL: 'critical',
+  DEFAULT: 'default',
+  LARGE: 'large',
+  XLARGE: 'xLarge'
+};
+
+function getModalSize(size) {
+  const isValidKey = Object.keys(MODAL_SIZE).includes(size);
+  const validSize = isValidKey ? size : MODAL_SIZE_TEXT.DEFAULT;
+  return MODAL_SIZE[validSize];
+}
+
 const ModalBase = props => {
   const {
     open,
     children,
     closeOnEsc = true,
-    modalSize,
+    modalSize = MODAL_SIZE_TEXT.DEFAULT,
     onOverlayClick,
     onClose
   } = props; // eslint-disable-next-line no-null/no-null
@@ -10830,9 +10834,7 @@ const ModalBase = props => {
       children: jsx(ModalFrame, Object.assign({
         column: true,
         role: "dialog",
-        widthValue: modalSizeToPixelSize[defaultTo(modalSize, 2
-        /* MODAL_SIZE.DEFAULT */
-        )],
+        widthValue: getModalSize(modalSize),
         "aria-modal": "true"
       }, {
         children: children
@@ -10852,7 +10854,7 @@ const CloseButton = /*#__PURE__*/styled(IconMinor.Xmark).withConfig({
 const ModalContent$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "modal__ModalContent",
   componentId: "sc-11jj4lm-2"
-})(["max-height:70vh;overflow-y:auto;padding:", ";"], Padding.m);
+})(["max-height:70vh;overflow-y:auto;overflow-x:hidden;padding:", ";"], Padding.m);
 const ModalFooter$1 = /*#__PURE__*/styled.footer.withConfig({
   displayName: "modal__ModalFooter",
   componentId: "sc-11jj4lm-3"
@@ -10866,7 +10868,7 @@ const Modal = props => {
     primaryButtonLabel,
     closeButtonLabel,
     secondaryButtonLabel,
-    size,
+    modalSize,
     onOverlayClick,
     onPrimaryAction,
     onSecondaryAction,
@@ -10876,7 +10878,7 @@ const Modal = props => {
     open: open,
     onOverlayClick: onOverlayClick,
     closeOnEsc: closeOnEsc,
-    size: size,
+    modalSize: modalSize,
     onClose: onClose
   }, {
     children: jsxs(Fragment, {
@@ -10943,9 +10945,7 @@ const ModalDestructive = props => {
     open: open,
     onOverlayClick: onOverlayClick,
     closeOnEsc: closeOnEsc,
-    modalSize: 1
-    /* MODAL_SIZE.CRITICAL */
-    ,
+    modalSize: MODAL_SIZE_TEXT.CRITICAL,
     onClose: onClose
   }, {
     children: jsxs(Fragment, {
@@ -11201,4 +11201,4 @@ const ChoiceList = props => {
   });
 };
 
-export { Actions, AlertBanner, Avatar, BODY, BODY_LARGE, Background, Badge, Body, BodyLarge, Borders, Button, CAPTION, Caption, Card, CardFrame$1 as CardFrame, Center, CenterContainer, Checkbox, ChoiceList, DatePicker, Display, Divider, Flag, Flex, Focused, Gap, HTMLAnchor, HTMLInput, Heading1, Heading2, Heading3, Heading4, Icon, IconMinor, Icons, InputCheckbox, InputField$1 as InputField, InputNumber, InputText, Interactive, LABEL, Label$1 as Label, LeftRightCard, Link, Margin, MenuList, Modal, ModalBase, ModalDestructive, MultiChoiceList, Padding, Radio, RadioButton$1 as RadioButton, RangeSlider, Select, Slider, SpaceAround, SpaceBetween, Spinner, Surface, Tab$1 as Tab, Tabs, Tag, Text$1 as Text, Thumbnail, Tooltip, TooltipBox, TooltipPosition, TooltipWrapper, TreeView, Typography, _Typography, gridLayoutGenerator, leftRightLayoutGenerator, shadow, shadow2Xl, shadowInner, shadowLg, shadowMd, shadowSm, shadowXl };
+export { Actions, AlertBanner, Avatar, BODY, BODY_LARGE, Background, Badge, Body, BodyLarge, Borders, Button, CAPTION, Caption, Card, CardFrame$1 as CardFrame, Center, CenterContainer, Checkbox, ChoiceList, DatePicker, Display, Divider, Flag, Flex, Focused, Gap, HTMLAnchor, HTMLInput, Heading1, Heading2, Heading3, Heading4, Icon, IconMinor, Icons, InputCheckbox, InputField$1 as InputField, InputNumber, InputText, Interactive, LABEL, Label$1 as Label, LeftRightCard, Link, MODAL_SIZE, MODAL_SIZE_TEXT, Margin, MenuList, Modal, ModalBase, ModalDestructive, MultiChoiceList, Padding, Radio, RadioButton$1 as RadioButton, RangeSlider, Select, Slider, SpaceAround, SpaceBetween, Spinner, Surface, Tab$1 as Tab, Tabs, Tag, Text$1 as Text, Thumbnail, Tooltip, TooltipBox, TooltipPosition, TooltipWrapper, TreeView, Typography, _Typography, gridLayoutGenerator, leftRightLayoutGenerator, shadow, shadow2Xl, shadowInner, shadowLg, shadowMd, shadowSm, shadowXl };

package/lib/components/modal/modal-base.d.ts

@@ -1,19 +1,28 @@
 import { InputHTMLAttributes } from 'react';
 import { FC } from '@helpers';
-export declare const enum MODAL_SIZE {
-    SMALL = 0,
-    CRITICAL = 1,
-    DEFAULT = 2,
-    LARGE = 3,
-    X_LARGE = 4
+interface Sizes {
+    small: string;
+    critical: string;
+    default: string;
+    large: string;
+    xLarge: string;
 }
+export declare const MODAL_SIZE: Sizes;
+export declare const MODAL_SIZE_TEXT: {
+    SMALL: string;
+    CRITICAL: string;
+    DEFAULT: string;
+    LARGE: string;
+    XLARGE: string;
+};
 export interface IModalBaseProps {
     open: boolean;
     children: React.ReactElement;
     closeOnEsc?: boolean;
-    modalSize?: MODAL_SIZE;
+    modalSize?: keyof typeof MODAL_SIZE;
     onOverlayClick?: () => void;
     onClose: () => void;
 }
 export declare type IModalBase = InputHTMLAttributes<HTMLInputElement> & IModalBaseProps;
 export declare const ModalBase: FC<IModalBase>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edvisor/product-language",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "license": "MIT",
   "description": "Edvisor.io product-language components",
   "repository": "https://github.com/edvisor-io/front-end/",