@ornikar/kitt-universal 16.4.1 → 16.4.2

package/dist/index-node-14.17.cjs.web.css

@@ -26,6 +26,10 @@
 .kitt-u_opacityExit_o14r8iix{opacity:1;}
 .kitt-u_opacityExitActive_oim72y2{opacity:0;-webkit-transition:opacity 250ms cubic-bezier(0.42,0,1,1);transition:opacity 250ms cubic-bezier(0.42,0,1,1);}
 .kitt-u_pageLoaderContainer_ptkwz2j{width:60px;height:60px;-webkit-transform:scale(-1) rotate(90deg);-ms-transform:scale(-1) rotate(90deg);transform:scale(-1) rotate(90deg);}@-webkit-keyframes PageLoaderInit-kitt-u_pageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64600329384882px;}100%{stroke-dashoffset:0;}}@keyframes PageLoaderInit-kitt-u_pageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64600329384882px;}100%{stroke-dashoffset:0;}}@-webkit-keyframes PageLoaderOffset-kitt-u_pageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64600329384882px;}100%{stroke-dashoffset:33.929200658769766px;}}@keyframes PageLoaderOffset-kitt-u_pageLoaderContainer_ptkwz2j{0%{stroke-dashoffset:169.64600329384882px;}100%{stroke-dashoffset:33.929200658769766px;}}@-webkit-keyframes PageLoaderRotation-kitt-u_pageLoaderContainer_ptkwz2j{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes PageLoaderRotation-kitt-u_pageLoaderContainer_ptkwz2j{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}.kitt-u_pageLoaderContainer_ptkwz2j circle,.kitt-u_pageLoaderContainer_ptkwz2j g{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;}.kitt-u_pageLoaderContainer_ptkwz2j g[data-large-loader='base'] circle{-webkit-animation:1000ms cubic-bezier(0.39,0.575,0.565,1) 500ms forwards;animation:1000ms cubic-bezier(0.39,0.575,0.565,1) 500ms forwards;-webkit-animation-name:PageLoaderInit-kitt-u_pageLoaderContainer_ptkwz2j;animation-name:PageLoaderInit-kitt-u_pageLoaderContainer_ptkwz2j;}.kitt-u_pageLoaderContainer_ptkwz2j g[data-large-loader='fill']{-webkit-animation:1800ms linear 500ms infinite;animation:1800ms linear 500ms infinite;-webkit-animation-name:PageLoaderRotation-kitt-u_pageLoaderContainer_ptkwz2j;animation-name:PageLoaderRotation-kitt-u_pageLoaderContainer_ptkwz2j;}.kitt-u_pageLoaderContainer_ptkwz2j g[data-large-loader='fill'] circle{-webkit-animation:1800ms cubic-bezier(0.39,0.575,0.565,1) 500ms infinite alternate,2160ms linear 500ms infinite;animation:1800ms cubic-bezier(0.39,0.575,0.565,1) 500ms infinite alternate,2160ms linear 500ms infinite;-webkit-animation-name:PageLoaderOffset-kitt-u_pageLoaderContainer_ptkwz2j,PageLoaderRotation-kitt-u_pageLoaderContainer_ptkwz2j;animation-name:PageLoaderOffset-kitt-u_pageLoaderContainer_ptkwz2j,PageLoaderRotation-kitt-u_pageLoaderContainer_ptkwz2j;}
+.kitt-u_enter_ereraf{-webkit-transform:translateY(8px);-ms-transform:translateY(8px);transform:translateY(8px);opacity:0;}
+.kitt-u_enterActive_e1jmsjrm{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}
+.kitt-u_exit_e1mwnccz{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}
+.kitt-u_exitActive_e1004d1h{-webkit-transform:translateY(8px);-ms-transform:translateY(8px);transform:translateY(8px);opacity:0;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}
 .kitt-u_skeleton_sc3upcl{background-color:#E5E5E5;position:relative;overflow:hidden;height:100%;width:100%;}@-webkit-keyframes flareTranslate-kitt-u_skeleton_sc3upcl{from{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}to{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}@keyframes flareTranslate-kitt-u_skeleton_sc3upcl{from{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}to{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}.kitt-u_skeleton_sc3upcl::after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;background-image:linear-gradient( -90deg, #E5E5E5, #CCCCCC 50%, #E5E5E5 100% );-webkit-animation:1s ease-in-out infinite;animation:1s ease-in-out infinite;-webkit-animation-name:flareTranslate-kitt-u_skeleton_sc3upcl;animation-name:flareTranslate-kitt-u_skeleton_sc3upcl;}
 .kitt-u_skeletonWithoutAnimation_s12gop2o::after{background-image:none;-webkit-animation:none;animation:none;}
 .kitt-u_displayUnderline_dch42t > *{-webkit-text-decoration:underline;text-decoration:underline;}.kitt-u_displayUnderline_dch42t > *:hover,.kitt-u_displayUnderline_dch42t > *:active,.kitt-hover .kitt-u_displayUnderline_dch42t > *{-webkit-text-decoration:none;text-decoration:none;}

package/dist/index-node-14.17.cjs.web.js

@@ -7652,6 +7652,21 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             shadowRadius: theme.dialogModal.shadow.radius
           }
         },
+        picker: {
+          web: {
+            optionsContainer: {
+              shadow: {
+                shadowColor: theme.picker.web.optionsContainer.shadow.color,
+                shadowOffset: {
+                  width: theme.picker.web.optionsContainer.shadow.offsetX,
+                  height: theme.picker.web.optionsContainer.shadow.offsetY
+                },
+                shadowOpacity: theme.picker.web.optionsContainer.shadow.opacity,
+                shadowRadius: theme.picker.web.optionsContainer.shadow.radius
+              }
+            }
+          }
+        },
         forms: {
           autocomplete: {
             optionsContainer: {
@@ -8048,12 +8063,16 @@ function PickerItem({
 function PickerOption({
   children,
   testID,
-  ...props
+  isHighlighted,
+  isSelected
 }) {
   return /*#__PURE__*/jsxRuntime.jsx(Typography.Text, {
     testID: testID,
     base: "body",
-    children: children
+    children: typeof children === 'function' ? children({
+      isHighlighted,
+      isSelected
+    }) : children
   });
 }
 
@@ -8074,6 +8093,10 @@ function webUseSelectReducer(state, actionAndChanges, options) {
   }
 }
 
+const enter = "kitt-u_enter_ereraf";
+const enterActive = "kitt-u_enterActive_e1jmsjrm";
+const exit = "kitt-u_exit_e1mwnccz";
+const exitActive = "kitt-u_exitActive_e1004d1h";
 function Picker({
   children,
   renderTrigger,
@@ -8110,13 +8133,13 @@ function Picker({
         if (onClose) onClose();
       }
     },
-    onStateChange: () => {
+    onSelectedItemChange: changes => {
       if (!onChange) return;
-      if (selectedItem === null) {
+      if (changes.selectedItem === null) {
         onChange(undefined);
         return;
       }
-      onChange(selectedItem);
+      onChange(changes.selectedItem);
     }
   });
   const {
@@ -8168,53 +8191,79 @@ function Picker({
         maxWidth: {
           base: 350
         },
-        opacity: isOpen ? 1 : 0,
-        backgroundColor: "kitt.picker.web.optionsContainer.backgroundColor",
-        borderRadius: "kitt.picker.web.optionsContainer.borderRadius",
-        shadow: "kitt.picker.web.optionsContainer.shadow",
         paddingY: "kitt.2",
         _web: {
           style: {
             transform: [{
               translate3d: `${tooltipX}px, ${tooltipY}px, 0`
             }],
-            visibility: isOpen ? 'visible' : 'hidden',
             transitionDuration: '300ms',
             transitionProperty: 'opacity',
             transitionTimingFunction: 'ease-in-out'
           }
         },
-        children: isOpen ? childrenArray.map((child, index) => {
-          const currentValue = items[index];
-          const {
-            onClick,
-            'aria-selected': ariaSelected,
-            ...itemProps
-          } = getItemProps({
-            item: currentValue,
-            index,
-            disabled
-          });
-          return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
-            ...itemProps,
-            accessibilityState: {
-              selected: ariaSelected
+        children: /*#__PURE__*/jsxRuntime.jsx(View, {
+          opacity: isOpen ? 1 : 0,
+          backgroundColor: "kitt.picker.web.optionsContainer.backgroundColor",
+          borderRadius: "kitt.picker.web.optionsContainer.borderRadius",
+          shadow: "kitt.picker.web.optionsContainer.shadow",
+          _web: {
+            style: {
+              transform: [{
+                translateY: isOpen ? 0 : 8
+              }],
+              visibility: isOpen ? 'visible' : 'hidden',
+              transitionDuration: '300ms',
+              transitionTimingFunction: 'ease-in-out'
+            }
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
+            unmountOnExit: true,
+            timeout: 300,
+            in: isOpen,
+            classNames: {
+              enter,
+              enterActive,
+              exit,
+              exitActive
             },
-            onPress: onClick,
-            children: ({
-              isHovered,
-              isFocused,
-              isPressed
-            }) => /*#__PURE__*/jsxRuntime.jsx(PickerItem, {
-              isSelected: checkSelectedItem(selectedItem || undefined, currentValue),
-              isHighlighted: highlightedIndex === index,
-              isHovered: isHovered,
-              isFocused: isFocused,
-              isPressed: isPressed,
-              children: child
+            children: /*#__PURE__*/jsxRuntime.jsx(View, {
+              children: childrenArray.map((child, index) => {
+                const currentValue = items[index];
+                const {
+                  onClick,
+                  'aria-selected': ariaSelected,
+                  ...itemProps
+                } = getItemProps({
+                  item: currentValue,
+                  index,
+                  disabled
+                });
+                return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
+                  ...itemProps,
+                  accessibilityState: {
+                    selected: ariaSelected
+                  },
+                  onPress: onClick,
+                  children: ({
+                    isHovered,
+                    isFocused,
+                    isPressed
+                  }) => {
+                    return /*#__PURE__*/jsxRuntime.jsx(PickerItem, {
+                      isSelected: checkSelectedItem(selectedItem || undefined, currentValue),
+                      isHighlighted: highlightedIndex === index,
+                      isHovered: isHovered,
+                      isFocused: isFocused,
+                      isPressed: isPressed,
+                      children: child
+                    });
+                  }
+                }, itemProps.id);
+              })
             })
-          }, itemProps.id);
-        }) : null
+          })
+        })
       })
     })]
   });