@sikka/hawa 0.0.214 → 0.0.216

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.214",
+  "version": "0.0.216",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/HawaAlert.tsx

@@ -87,8 +87,9 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
       <span>{" " + props.text}</span>
       {props.actions && (
         <div className="mt-2 flex flex-row gap-2">
-          {props.actions.map((act) => (
+          {props.actions.map((act, index) => (
             <HawaButton
+              key={index}
               variant={act.variant}
               onClick={act.onClick()}
               margins="none"

package/src/elements/HawaMenu.tsx

@@ -175,13 +175,17 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
               key={o}
               className="bg-layout-1200 flex flex-col gap-1 p-1 text-gray-700 dark:text-gray-200"
             >
-              {group?.map((item) => {
+              {group?.map((item, indx) => {
                 return item.element ? (
-                  <li className="cursor-pointer items-center rounded hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white">
+                  <li
+                    key={indx}
+                    className="cursor-pointer items-center rounded hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
+                  >
                     {item.element}
                   </li>
                 ) : (
                   <li
+                    key={indx}
                     onClick={() => item?.action(actionedItem)}
                     className={clsx(
                       item.isButton

package/src/elements/HawaPanelTabs.tsx

@@ -40,9 +40,10 @@ export const HawaPanelTabs: React.FunctionComponent<PanelTabsTypes> = (
         </ul>
       </div>
       <div id="myTabContent">
-        {props.options.map((option: any) => {
+        {props.options.map((option: any, indx) => {
           return (
             <div
+              key={indx}
               className="rounded bg-gray-50 p-4 dark:bg-gray-800"
               id={option.value}
               role="tabpanel"

package/src/elements/HawaSnackbar.tsx

@@ -90,8 +90,9 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
           <div className="text-sm font-normal">{description}</div>
           {actions && (
             <div className="mt-2 flex flex-row gap-2">
-              {actions.map((act) => (
+              {actions.map((act, i) => (
                 <HawaButton
+                  key={i}
                   variant={act.variant}
                   onClick={act.onClick()}
                   margins="none"

package/src/elements/HawaStepper.tsx

@@ -29,7 +29,10 @@ export const HawaStepper: React.FunctionComponent<THawaTimeline> = ({
     >
       {props.steps.map((step: any, i: number) => {
         return (
-          <div className="my-2 flex w-auto flex-row flex-wrap justify-start  ">
+          <div
+            key={i}
+            className="my-2 flex w-auto flex-row flex-wrap justify-start  "
+          >
             <div
               className={
                 orientation === "vertical"

package/src/elements/HawaTabs.tsx

@@ -127,9 +127,9 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
       </ul>
 
       <div className="flex-1 transition-all">
-        {props.options.map((tab) => (
+        {props.options.map((tab, i) => (
           <div
-            key={tab.value}
+            key={i}
             className={clsx(selectedOption === tab.value ? "" : "hidden")}
           >
             {tab.content}

package/src/elements/HawaTextField.tsx

@@ -20,11 +20,13 @@ type TextFieldTypes = {
   onChange?: any
   ref?: any
   icon?: any
+  preview?: boolean
 }
 
 export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
   margin = "normal",
   width = "full",
+  preview = false,
   ...props
 }) => {
   let marginStyles = {
@@ -33,14 +35,16 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
     large: "mb-5",
   }
   let widthStyles = {
-    small: "",
-    normal: "",
+    small: "w-full max-w-xs",
+    normal: "w-1/2",
     full: "w-full",
   }
 
   let defaultStyle = "flex h-fit max-h-fit flex-col justify-center"
   let defaultInputStyle =
     "block w-full rounded border border-gray-300 bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+  let previewInputStyle =
+    "block w-full rounded border border-gray-300  p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
   // "mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2  text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",
 
   return (
@@ -55,37 +59,72 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
           {props.label}
         </label>
       )}
-      {props.multiline ? (
-        <textarea
-          id="message"
-          rows={4}
-          className={defaultInputStyle}
-          onChange={props.onChange}
-          type={props.type}
-          aria-label={props.label}
-          placeholder={props.placeholder}
-          defaultValue={props.defaultValue}
-          value={props.value}
-          {...props}
-        />
+      {preview ? (
+        <>
+          {props.multiline ? (
+            <textarea
+              id="message"
+              rows={4}
+              className={defaultInputStyle}
+              onChange={props.onChange}
+              type={props.type}
+              aria-label={props.label}
+              placeholder={props.placeholder}
+              defaultValue={props.defaultValue}
+              value={props.value}
+              {...props}
+            />
+          ) : (
+            <div className="relative">
+              {props.icon && (
+                <div className="absolute top-1/2 left-3 -translate-y-1/2">
+                  {props.icon}
+                </div>
+              )}
+              <div
+                // {...props}
+                className={clsx(previewInputStyle, props.icon ? "pl-10" : "")}
+              >
+                {props.value}
+              </div>
+            </div>
+          )}
+        </>
       ) : (
-        <div className="relative">
-          {props.icon && (
-            <div className="absolute top-1/2 left-3 -translate-y-1/2">
-              {props.icon}
+        <>
+          {props.multiline ? (
+            <textarea
+              id="message"
+              rows={4}
+              className={defaultInputStyle}
+              onChange={props.onChange}
+              type={props.type}
+              aria-label={props.label}
+              placeholder={props.placeholder}
+              defaultValue={props.defaultValue}
+              value={props.value}
+              {...props}
+            />
+          ) : (
+            <div className="relative">
+              {props.icon && (
+                <div className="absolute top-1/2 left-3 -translate-y-1/2">
+                  {props.icon}
+                </div>
+              )}
+              <input
+                {...props}
+                className={clsx(defaultInputStyle, props.icon ? "pl-10" : "")}
+              />
             </div>
           )}
-          <input
-            {...props}
-            className={clsx(defaultInputStyle, props.icon ? "pl-10" : "")}
-          />
-        </div>
-      )}
 
-      {props.helperText && (
-        <p className="mb-0 mt-1 text-xs text-red-600 dark:text-red-500">
-          {props.helperText}
-        </p>
+          {props.helperText && (
+            <p className="mb-0 mt-1 text-xs text-red-600 dark:text-red-500">
+              {props.helperText}
+            </p>
+          )}
+        </>
       )}
     </div>
   )

package/src/elements/InvoiceAccordion.tsx

@@ -101,8 +101,8 @@ export const InvoiceAccordion: React.FunctionComponent<
           )}
         >
           <div className="border-b pb-2">{props.invoiceDescription}</div>
-          {props.products?.map((product) => (
-            <div className="flex flex-row border-b  pb-4">
+          {props.products?.map((product, i) => (
+            <div key={i} className="flex flex-row border-b  pb-4">
               <div className="w-full">
                 <InvoiceItemProp start label={texts.plan} text={product.plan} />
               </div>

package/src/elements/SubsectionList.tsx

@@ -24,11 +24,12 @@ export const SubsectionList: React.FunctionComponent<SubsectionListTypes> = ({
   const [selectedSection, setSelectedSection] = useState(null)
   return (
     <div className="w-full max-w-2xs rounded bg-layoutPrimary-500 p-4 ">
-      {subsections.map((ss) => (
-        <div className="my-0">
+      {subsections.map((ss, i) => (
+        <div key={i} className="my-0">
           {ss.title && <div className="my-4 font-bold">{ss.title}</div>}
-          {ss.sections.map((s) => (
+          {ss.sections.map((s, i) => (
             <SubsectionItem
+              key={i}
               onItemClick={() => setSelectedSection(s.value)}
               selected={selectedSection}
               value={s.value}

package/src/layout/AppSidebar.tsx

@@ -21,8 +21,9 @@ export const AppSidebar: React.FC<Props> = ({ isOpen, onClose, items }) => {
           Close
         </button>
         <nav>
-          {items.map((item) => (
+          {items.map((item, i) => (
             <a
+              key={i}
               href="#"
               onClick={item.onClick}
               className="block p-4 font-bold text-white hover:bg-gray-700 hover:text-gray-400"

package/src/layout/HawaAppLayout.tsx

@@ -333,9 +333,9 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
           </div>
           {/* Drawer Items */}
           <div className="mt-14 mb-8">
-            {props.drawerItems?.map((dSection, j) => (
+            {props.drawerItems?.map((dSection, dIndex) => (
               <div
-                key={j}
+                key={dIndex}
                 className={clsx("flex flex-col items-stretch justify-center")}
               >
                 {dSection?.map((dItem, i) => {
@@ -435,7 +435,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                     </div>
                   )
                 })}
-                {j !== props.drawerItems.length - 1 && (
+                {dIndex !== props.drawerItems.length - 1 && (
                   <div className="my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-500 text-center "></div>
                 )}
               </div>

package/src/layout/HawaBottomAppBar.tsx

@@ -24,8 +24,9 @@ export const HawaBottomAppBar: React.FunctionComponent<BottomAppBarTypes> = (
         className="flex w-full flex-row items-center justify-evenly rounded bg-gray-200"
         //   variant="outlined"
       >
-        {props.appBarContent.map((singleContent: any) => (
+        {props.appBarContent.map((singleContent: any, i) => (
           <div
+            key={i}
             className="m-1 flex h-full w-full flex-col items-center justify-center rounded p-2 transition-all hover:cursor-pointer hover:bg-buttonPrimary-700 hover:text-white"
             onClick={singleContent.action}
           >

package/src/layout/HawaSiteLayout.tsx

@@ -102,8 +102,11 @@ export const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes> = ({
       >
         {size > 600 ? (
           <div className="flex flex-row gap-2 ">
-            {props.navItems?.map(({ label }) => (
-              <div className="rounded bg-none p-2 transition-all hover:bg-gray-100">
+            {props.navItems?.map(({ label }, i) => (
+              <div
+                key={i}
+                className="rounded bg-none p-2 transition-all hover:bg-gray-100"
+              >
                 {label}
               </div>
             ))}