@sikka/hawa 0.30.16-next → 0.30.17-next

package/dist/index.mjs

@@ -2622,15 +2622,9 @@ var DataTable = ({
   const [expanded, setExpanded] = React22.useState({});
   const [columnVisibility, setColumnVisibility] = React22.useState({});
   const [rowSelection, setRowSelection] = React22.useState({});
-  const visibleColumns = columns.filter(
-    (column) => {
-      var _a2;
-      return ((_a2 = column.meta) == null ? void 0 : _a2.hidden) !== true;
-    }
-  );
   const table = useReactTable({
     data,
-    columns: visibleColumns,
+    columns,
     onExpandedChange: setExpanded,
     getExpandedRowModel: getExpandedRowModel(),
     onGlobalFilterChange: setGlobalFilter,
@@ -2650,15 +2644,22 @@ var DataTable = ({
       rowSelection,
       expanded
     }
-    // defaultColumn: {
-    //   maxSize: 200
-    // }
   });
   const pageText = ((_a = props.texts) == null ? void 0 : _a.page) || "page";
   const itemsPerPageOptions = (_b = props.itemsPerPage) == null ? void 0 : _b.map((item) => ({
     label: `${item} / ${pageText}`,
     value: item
   }));
+  React22.useEffect(() => {
+    setColumnVisibility((prev) => {
+      let newColumnVisibility = {};
+      columns.forEach((column) => {
+        var _a2;
+        newColumnVisibility[column.accessorKey] = !((_a2 = column.meta) == null ? void 0 : _a2.hidden);
+      });
+      return newColumnVisibility;
+    });
+  }, [columns]);
   return /* @__PURE__ */ React22.createElement("div", { className: "hawa-flex hawa-w-full hawa-flex-col hawa-gap-4" }, (enableSearch || enableHideColumns) && /* @__PURE__ */ React22.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-4" }, enableSearch && /* @__PURE__ */ React22.createElement(
     Input,
     {
@@ -2935,7 +2936,7 @@ var DataTable = ({
 };
 
 // elements/backToTop/BackToTop.tsx
-import React23, { useState as useState4, useEffect as useEffect3, useRef as useRef3 } from "react";
+import React23, { useState as useState4, useEffect as useEffect4, useRef as useRef3 } from "react";
 var BackToTop = ({ ...props }) => {
   const [visible, setVisible] = useState4(false);
   const [rect, _setRect] = useState4(null);
@@ -2965,7 +2966,7 @@ var BackToTop = ({ ...props }) => {
       props.anchor.current.scrollTo({ top: 0, behavior: "smooth" });
     }
   };
-  useEffect3(() => {
+  useEffect4(() => {
     if (!props.anchor.current)
       return;
     props.anchor.current.addEventListener("scroll", onScroll);
@@ -3032,7 +3033,7 @@ var BackToTop = ({ ...props }) => {
 };
 
 // elements/radio/Radio.tsx
-import React24, { useState as useState5, useRef as useRef4, useEffect as useEffect4, forwardRef as forwardRef14 } from "react";
+import React24, { useState as useState5, useRef as useRef4, useEffect as useEffect5, forwardRef as forwardRef14 } from "react";
 var Radio = forwardRef14(
   ({
     design = "default",
@@ -3072,7 +3073,7 @@ var Radio = forwardRef14(
       null
     );
     const parentRef = useRef4(null);
-    useEffect4(() => {
+    useEffect5(() => {
       var _a2;
       const parentNode = (_a2 = parentRef.current) == null ? void 0 : _a2.parentNode;
       if (parentNode) {
@@ -3632,7 +3633,7 @@ var Textarea = React28.forwardRef(
 Textarea.displayName = "Textarea";
 
 // elements/fileDropzone/FileDropzone.tsx
-import React29, { useEffect as useEffect5, useState as useState7 } from "react";
+import React29, { useEffect as useEffect6, useState as useState7 } from "react";
 import { useDropzone } from "react-dropzone";
 import clsx2 from "clsx";
 var FileDropzone = ({
@@ -3677,7 +3678,7 @@ var FileDropzone = ({
       );
     }
   });
-  useEffect5(
+  useEffect6(
     () => () => {
       files == null ? void 0 : files.forEach((file) => {
         URL.revokeObjectURL(file.preview);
@@ -3685,7 +3686,7 @@ var FileDropzone = ({
     },
     [files]
   );
-  useEffect5(() => {
+  useEffect6(() => {
     setFiles(acceptedFiles);
   }, [acceptedFiles, cmp, setFiles]);
   onClearFiles = () => {
@@ -3697,7 +3698,7 @@ var FileDropzone = ({
     acceptedFiles.length = 0;
     setFiles([]);
   };
-  useEffect5(() => {
+  useEffect6(() => {
     if (maxSize > 0) {
       const k = 1024;
       const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
@@ -4470,7 +4471,7 @@ var AppStores = (props) => {
 };
 
 // elements/badge/Badge.tsx
-import React38, { useEffect as useEffect7, useState as useState9, useRef as useRef7 } from "react";
+import React38, { useEffect as useEffect8, useState as useState9, useRef as useRef7 } from "react";
 var Badge = ({
   anchor,
   position = "right",
@@ -4485,7 +4486,7 @@ var Badge = ({
     default: { top: 4, left: 7, right: 5, classes: "hawa-w-3 hawa-h-3" },
     large: { top: 6, left: 12, right: 7, classes: "hawa-w-6 hawa-h-6" }
   };
-  useEffect7(() => {
+  useEffect8(() => {
     const handlePositioning = () => {
       var _a;
       if (anchor.current && indicatorRef.current) {
@@ -4547,7 +4548,7 @@ var BadgedComponent = ({
 };
 
 // elements/phoneInput/PhoneInput.tsx
-import React39, { useState as useState10, useRef as useRef8, useEffect as useEffect8 } from "react";
+import React39, { useState as useState10, useRef as useRef8, useEffect as useEffect9 } from "react";
 
 // countries.ts
 var countries = [
@@ -6247,7 +6248,7 @@ var PhoneInput = ({ labelProps, ...props }) => {
   const [phoneNumber, setPhoneNumber] = useState10("");
   const [countryCode, setCountryCode] = useState10(props.preferredCountry);
   const inputRef = useRef8(null);
-  useEffect8(() => {
+  useEffect9(() => {
     var _a;
     if (inputRef.current) {
       (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -6307,7 +6308,7 @@ var PhoneInput = ({ labelProps, ...props }) => {
 };
 
 // elements/pinInput/PinInput.tsx
-import React40, { useEffect as useEffect9, useState as useState11 } from "react";
+import React40, { useEffect as useEffect10, useState as useState11 } from "react";
 var PinInput = ({
   label,
   icon,
@@ -6326,7 +6327,7 @@ var PinInput = ({
       previousInput == null ? void 0 : previousInput.focus();
     }
   };
-  useEffect9(() => {
+  useEffect10(() => {
     let unfilled = pin.includes(void 0);
     if (!unfilled && getPins) {
       getPins(pin);
@@ -6441,7 +6442,7 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 // elements/colorPicker/ColorPicker.tsx
 import React43, {
   useState as useState12,
-  useEffect as useEffect10
+  useEffect as useEffect11
 } from "react";
 var ColorPicker = ({
   containerProps,
@@ -6454,7 +6455,7 @@ var ColorPicker = ({
   ...props
 }) => {
   const [selectedColor, setSelectedColor] = useState12(props.color);
-  useEffect10(() => {
+  useEffect11(() => {
     if (selectedColor && selectedColor[0] !== "#") {
       setSelectedColor(`#${selectedColor}`);
     }
@@ -6736,7 +6737,7 @@ var Pagination = ({
 };
 
 // elements/passwordInput/PasswordInput.tsx
-import React49, { useEffect as useEffect11, useState as useState13 } from "react";
+import React49, { useEffect as useEffect12, useState as useState13 } from "react";
 
 // icons/Emojis.tsx
 import React46 from "react";
@@ -6961,7 +6962,7 @@ var PasswordInput = ({
   const [specialCharCriteriaMet, setSpecialCharCriteriaMet] = useState13(false);
   const [lowercaseCriteriaMet, setLowercaseCriteriaMet] = useState13(false);
   const [uppercaseCriteriaMet, setUppercaseCriteriaMet] = useState13(false);
-  useEffect11(() => {
+  useEffect12(() => {
     const calculateStrength = () => {
       let strengthScore = 0;
       if (lengthCriteriaMet)
@@ -7162,7 +7163,7 @@ var Separator2 = ({
 );
 
 // elements/scrollIndicator/ScrollIndicator.tsx
-import React53, { useState as useState14, useEffect as useEffect12 } from "react";
+import React53, { useState as useState14, useEffect as useEffect13 } from "react";
 var ScrollIndicator = ({
   anchor,
   inContainer = false
@@ -7178,7 +7179,7 @@ var ScrollIndicator = ({
       setScrollPercentage(percentageScrolled);
     }
   };
-  useEffect12(() => {
+  useEffect13(() => {
     if (!anchor.current)
       return;
     anchor.current.addEventListener("scroll", onScroll);
@@ -7391,7 +7392,7 @@ var CodeBlock = ({
 };
 
 // elements/carousel/Carousel.tsx
-import React55, { useEffect as useEffect13, useState as useState17 } from "react";
+import React55, { useEffect as useEffect14, useState as useState17 } from "react";
 import useEmblaCarousel from "embla-carousel-react";
 var Carousel = ({
   items,
@@ -7408,7 +7409,7 @@ var Carousel = ({
     loop: autoplay ? true : (options == null ? void 0 : options.loop) || false
   });
   const [selectedIndex, setSelectedIndex] = useState17(0);
-  useEffect13(() => {
+  useEffect14(() => {
     function selectHandler() {
       const index = emblaApi == null ? void 0 : emblaApi.selectedScrollSnap();
       setSelectedIndex(index || 0);
@@ -7418,7 +7419,7 @@ var Carousel = ({
       emblaApi == null ? void 0 : emblaApi.off("select", selectHandler);
     };
   }, [emblaApi]);
-  useEffect13(() => {
+  useEffect14(() => {
     let autoplayTimer;
     if (autoplay && emblaApi) {
       autoplayTimer = setInterval(() => {
@@ -8266,7 +8267,7 @@ var Navbar = ({
 };
 
 // layout/appLayout/AppLayout.tsx
-import React66, { useEffect as useEffect14, useRef as useRef10, useState as useState21 } from "react";
+import React66, { useEffect as useEffect15, useRef as useRef10, useState as useState21 } from "react";
 var AppLayout = ({
   profileMenuWidth = "default",
   DrawerFooterActions,
@@ -8299,7 +8300,7 @@ var AppLayout = ({
   const [size, setSize] = useState21(1200);
   const [openSideMenu, setOpenSideMenu] = useState21(true);
   const drawerSizeCondition = size > 600 ? drawerSizeStyle[keepOpen ? "opened" : "closed"][drawerSize] : 0;
-  useEffect14(() => {
+  useEffect15(() => {
     if (typeof window !== "undefined") {
       const resize = () => {
         setSize(window.innerWidth);
@@ -8311,14 +8312,14 @@ var AppLayout = ({
       };
     }
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (size > 600) {
       setOpenSideMenu(keepOpen);
     } else {
       setOpenSideMenu(false);
     }
   }, [size]);
-  useEffect14(() => {
+  useEffect15(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !keepOpen) {
         setOpenSideMenu(false);
@@ -8977,13 +8978,13 @@ var AppTabs = ({ tabs, className }) => {
 };
 
 // layout/docsLayout/DocsLayout.tsx
-import React72, { useEffect as useEffect16, useRef as useRef11, useState as useState24 } from "react";
+import React72, { useEffect as useEffect17, useRef as useRef11, useState as useState24 } from "react";
 
 // hooks/useBreakpoint.ts
-import { useState as useState23, useEffect as useEffect15 } from "react";
+import { useState as useState23, useEffect as useEffect16 } from "react";
 var useBreakpoint = () => {
   const [breakpoint, setBreakpoint] = useState23(null);
-  useEffect15(() => {
+  useEffect16(() => {
     if (typeof window !== "undefined") {
       const resize = () => {
         setBreakpoint(window.innerWidth);
@@ -9094,7 +9095,7 @@ var DocsLayout = ({
   }
   const [currentPage, setCurrentPage] = useState24("Introduction");
   const [openSideMenu, setOpenSideMenu] = useState24(true);
-  useEffect16(() => {
+  useEffect17(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target) && !openSideMenu) {
         setOpenSideMenu(false);
@@ -9105,7 +9106,7 @@ var DocsLayout = ({
       document.removeEventListener("click", handleClickOutside, true);
     };
   }, [openSideMenu]);
-  useEffect16(() => {
+  useEffect17(() => {
     const handleResize = () => {
       setOpenSideMenu(window.innerWidth > 600 ? true : false);
     };
@@ -9122,7 +9123,7 @@ var DocsLayout = ({
       setCurrentPage(entry.target.id);
     }
   };
-  useEffect16(() => {
+  useEffect17(() => {
     observerRef.current = new IntersectionObserver(handleIntersection, {
       threshold: 0.5
       // Adjust threshold as needed to determine when a section is in view
@@ -10287,7 +10288,7 @@ var ResetPasswordForm = ({
 };
 
 // blocks/auth/CodeConfirmation.tsx
-import React80, { useEffect as useEffect17, useState as useState28 } from "react";
+import React80, { useEffect as useEffect18, useState as useState28 } from "react";
 import { Controller as Controller5, useForm as useForm5 } from "react-hook-form";
 import { zodResolver as zodResolver5 } from "@hookform/resolvers/zod";
 import * as z5 from "zod";
@@ -10323,7 +10324,7 @@ var CodeConfirmation = (props) => {
     }, 1e3);
     setResendTimer(newTimer);
   };
-  useEffect17(() => {
+  useEffect18(() => {
     return () => {
       if (resendTimer !== null) {
         clearInterval(resendTimer);
@@ -10544,7 +10545,7 @@ var UserReferralSource = ({
 };
 
 // blocks/feedback/FeedbackRating.tsx
-import React82, { useEffect as useEffect18, useRef as useRef13, useState as useState30 } from "react";
+import React82, { useEffect as useEffect19, useRef as useRef13, useState as useState30 } from "react";
 var FeedbackRating = ({
   position = "bottom-right",
   ...props
@@ -10558,7 +10559,7 @@ var FeedbackRating = ({
     "bottom-right": "hawa-right-4",
     "bottom-left": "hawa-left-4"
   };
-  useEffect18(() => {
+  useEffect19(() => {
     const timeoutHide = setTimeout(() => {
       if (closingTimer >= 0) {
         setClosingTimer(closingTimer - 1);
@@ -11265,7 +11266,7 @@ var ActionCard = (props) => {
 };
 
 // blocks/cards/AdCard.tsx
-import React94, { useState as useState33, useEffect as useEffect19, useRef as useRef14 } from "react";
+import React94, { useState as useState33, useEffect as useEffect20, useRef as useRef14 } from "react";
 var AdCard = ({
   orientation = "vertical",
   ...props
@@ -11273,7 +11274,7 @@ var AdCard = ({
   const adRef = useRef14(null);
   const [closed, setClosed] = useState33(false);
   let duration = 0;
-  useEffect19(() => {
+  useEffect20(() => {
     if (duration) {
       const timeoutHide = setTimeout(() => {
         setClosed(true);
@@ -11461,7 +11462,7 @@ var PricingCard = ({
 };
 
 // blocks/cards/ItemCard.tsx
-import React96, { useEffect as useEffect20, useState as useState34 } from "react";
+import React96, { useEffect as useEffect21, useState as useState34 } from "react";
 var ItemCard = ({
   actions,
   counts,
@@ -11495,7 +11496,7 @@ var ItemCard = ({
     e.stopPropagation();
     setOpenActionHeader(!openActionHeader);
   }
-  useEffect20(() => {
+  useEffect21(() => {
     window.onclick = () => {
       if (openActionHeader) {
         setOpenActionHeader(false);
@@ -11938,14 +11939,14 @@ var Usage = (props) => {
 };
 
 // hooks/useIsomorphicEffect.ts
-import { useEffect as useEffect21, useLayoutEffect } from "react";
-var useIsomorphicEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect21;
+import { useEffect as useEffect22, useLayoutEffect } from "react";
+var useIsomorphicEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect22;
 
 // hooks/useDiscloser.ts
 import { useState as useState36 } from "react";
 
 // hooks/useHover.ts
-import { useEffect as useEffect22, useRef as useRef15, useState as useState37 } from "react";
+import { useEffect as useEffect23, useRef as useRef15, useState as useState37 } from "react";
 
 // hooks/useToast.ts
 import * as React104 from "react";
@@ -12055,7 +12056,7 @@ function useToast() {
 import { useState as useState39, useRef as useRef16 } from "react";
 
 // hooks/useDialogCarousel.ts
-import { useEffect as useEffect24, useState as useState40 } from "react";
+import { useEffect as useEffect25, useState as useState40 } from "react";
 import AutoHeight from "embla-carousel-auto-height";
 import useEmblaCarousel2 from "embla-carousel-react";
 var useDialogCarousel = (options) => {
@@ -12081,7 +12082,7 @@ var useDialogCarousel = (options) => {
       emblaApi.scrollPrev();
     }
   };
-  useEffect24(() => {
+  useEffect25(() => {
     checkCanScrollPrev();
     emblaApi && emblaApi.on("select", checkCanScrollPrev);
     return () => {
@@ -12098,12 +12099,12 @@ var useDialogCarousel = (options) => {
 };
 
 // hooks/useDialogSteps.ts
-import { useState as useState41, useEffect as useEffect25, useRef as useRef17 } from "react";
+import { useState as useState41, useEffect as useEffect26, useRef as useRef17 } from "react";
 var useMultiStepDialog = (initialStep, stepIds, setOpenDialog) => {
   const [currentStep, setCurrentStep] = useState41(initialStep);
   const [dialogHeight, setDialogHeight] = useState41(null);
   const visibleStepRef = useRef17(null);
-  useEffect25(() => {
+  useEffect26(() => {
     if (visibleStepRef.current) {
       setDialogHeight(visibleStepRef.current.offsetHeight);
     }
@@ -12134,13 +12135,13 @@ var useMultiStepDialog = (initialStep, stepIds, setOpenDialog) => {
 };
 
 // hooks/useWindowSize.ts
-import { useEffect as useEffect26, useState as useState42 } from "react";
+import { useEffect as useEffect27, useState as useState42 } from "react";
 var useWindowSize = () => {
   const [windowSize, setWindowSize] = useState42({
     width: void 0,
     height: void 0
   });
-  useEffect26(() => {
+  useEffect27(() => {
     function handleResize() {
       setWindowSize({
         width: window.innerWidth,
@@ -12155,7 +12156,7 @@ var useWindowSize = () => {
 };
 
 // hooks/useFocusWithin.ts
-import { useRef as useRef18, useState as useState43, useEffect as useEffect27 } from "react";
+import { useRef as useRef18, useState as useState43, useEffect as useEffect28 } from "react";
 function containsRelatedTarget(event) {
   if (event.currentTarget instanceof HTMLElement && event.relatedTarget instanceof HTMLElement) {
     return event.currentTarget.contains(event.relatedTarget);
@@ -12185,7 +12186,7 @@ function useFocusWithin({
       onBlur == null ? void 0 : onBlur(event);
     }
   };
-  useEffect27(() => {
+  useEffect28(() => {
     if (ref.current) {
       ref.current.addEventListener("focusin", handleFocusIn);
       ref.current.addEventListener("focusout", handleFocusOut);
@@ -12201,7 +12202,7 @@ function useFocusWithin({
 }
 
 // hooks/useMediaQuery.ts
-import { useState as useState44, useEffect as useEffect28, useRef as useRef19 } from "react";
+import { useState as useState44, useEffect as useEffect29, useRef as useRef19 } from "react";
 function attachMediaListener(query, callback) {
   try {
     query.addEventListener("change", callback);
@@ -12227,7 +12228,7 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
     getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)
   );
   const queryRef = useRef19();
-  useEffect28(() => {
+  useEffect29(() => {
     if ("matchMedia" in window) {
       queryRef.current = window.matchMedia(query);
       setMatches(queryRef.current.matches);
@@ -12242,16 +12243,16 @@ function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
 }
 
 // hooks/useScrollPosition.ts
-import { useState as useState45, useEffect as useEffect29 } from "react";
+import { useState as useState45, useEffect as useEffect30 } from "react";
 
 // hooks/useTable.ts
-import { useState as useState46, useEffect as useEffect30 } from "react";
+import { useState as useState46, useEffect as useEffect31 } from "react";
 
 // hooks/useTabs.ts
-import { useEffect as useEffect31, useState as useState47 } from "react";
+import { useEffect as useEffect32, useState as useState47 } from "react";
 function useTabs(initialTab = "") {
   const [activeTab, setActiveTab] = useState47(initialTab);
-  useEffect31(() => {
+  useEffect32(() => {
     const handleHashChange = () => {
       const hash = window.location.hash.substring(1);
       setActiveTab(hash || initialTab);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.30.16-next",
+  "version": "0.30.17-next",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",