@sikka/hawa 0.0.243 → 0.0.245

package/src/blocks/Payment/CreditCardForm.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaButton, HawaTextField } from "../../elements"
 import { Controller, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"
@@ -8,9 +8,7 @@ type CreditCardFormTypes = {
   handlePayWithCreditCard: any
 }
 
-export const CreditCardForm: React.FunctionComponent<CreditCardFormTypes> = (
-  props
-) => {
+export const CreditCardForm: FC<CreditCardFormTypes> = (props) => {
   const methods = useForm()
   const {
     formState: { errors },

package/src/blocks/Payment/PayWithWallet.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 
@@ -7,9 +7,7 @@ type PayWithWalletTypes = {
   currency: any
   handlePayWithWallet: any
 }
-export const PayWithWallet: React.FunctionComponent<PayWithWalletTypes> = (
-  props
-) => {
+export const PayWithWallet: FC<PayWithWalletTypes> = (props) => {
   return (
     <HawaContainer>
       <div className="text-center text-5xl font-extrabold">

package/src/blocks/Payment/SelectPayment.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaTypography, HawaLogoButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 
@@ -26,9 +26,7 @@ type SelectPaymentTypes = {
   handleGooglePay: any
 }
 
-export const SelectPayment: React.FunctionComponent<SelectPaymentTypes> = (
-  props
-) => {
+export const SelectPayment: FC<SelectPaymentTypes> = (props) => {
   return (
     <HawaContainer>
       <HawaTypography>Choose Payment Method</HawaTypography>

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState, FC } from "react"
 import { BsExclamationCircleFill } from "react-icons/bs"
 import { HawaTabs, HawaTooltip } from "../../elements"
 
@@ -66,9 +66,7 @@ type ComparingPlansTypes = {
   onCurrencyChange?: (e) => void
   direction?: "rtl" | "ltr"
 }
-export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
-  props
-) => {
+export const ComparingPlans: FC<ComparingPlansTypes> = (props) => {
   const [currentCurrency, setCurrentCurrency] = useState("SAR")
   const [currentCycle, setCurrentCycle] = useState("month")
 
@@ -95,7 +93,7 @@ export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
         />
       </div>
       <div className=" overflow-hidden rounded">
-        <div className="grid grid-cols-4 gap-x-2 border-t border-b border-gray-200 bg-gray-100 p-4 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white">
+        <div className="grid grid-cols-4 gap-x-2 border-b border-t border-gray-200 bg-gray-100 p-4 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white">
           <div className="flex items-center"></div>
           {props.plans.map((plan: any) => (
             <div>
@@ -125,7 +123,7 @@ export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
         {props.plans?.map((plan) => {
           return plan.features.map((feature) => {
             return (
-              <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 py-5 px-4 text-sm text-gray-700 dark:border-gray-700">
+              <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 px-4 py-5 text-sm text-gray-700 dark:border-gray-700">
                 <div className="  flex flex-row items-center gap-2  text-gray-500 dark:text-gray-400">
                   {feature.text}
                   {feature.description && (

package/src/blocks/Pricing/PricingPlans.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaPricingCard, HawaTabs } from "../../elements"
 
 type PricingPlansTypes = {
@@ -42,9 +42,7 @@ type PricingPlansTypes = {
   onCurrencyChange?: (e) => void
   direction?: "rtl" | "ltr"
 }
-export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
-  props
-) => {
+export const PricingPlans: FC<PricingPlansTypes> = (props) => {
   return (
     <div>
       <div className="mb-2 flex w-full justify-between">

package/src/blocks/Referral/ReferralAccount.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { FaClone } from "react-icons/fa"
 import { HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
@@ -8,7 +8,7 @@ type ReferralAccount = {
   referralCode: string
 }
 
-export const ReferralAccount: React.FunctionComponent<ReferralAccount> = ({
+export const ReferralAccount: FC<ReferralAccount> = ({
   referralLink,
   referralCode,
 }) => {

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { FaTimes } from "react-icons/fa"
 import {
   HawaAlert,
@@ -16,9 +16,11 @@ type TReferralSettlement = {
   withdrawError?: string
 }
 
-export const ReferralSettlement: React.FunctionComponent<
-  TReferralSettlement
-> = ({ referralLink, referralCode, withdrawError }) => {
+export const ReferralSettlement: FC<TReferralSettlement> = ({
+  referralLink,
+  referralCode,
+  withdrawError,
+}) => {
   const methods = useForm()
   const {
     formState: { errors },
@@ -93,14 +95,19 @@ export const ReferralSettlement: React.FunctionComponent<
 }
 
 const SettlementAccountCard = (props) => (
-  <div className="mb-3 flex flex-row items-center justify-between rounded border-b bg-white p-2">
+  <div className="mb-3 flex flex-row items-center justify-between rounded border-b bg-white p-3">
     <div className="flex flex-col justify-between">
       <div className="text-xs">{props.bank}</div>
       <div>{props.accountHolder}</div>
       <div className="text-xs">{props.iban}</div>
     </div>
-    <div className="flex flex-row items-center justify-center gap-1">
-      {props.default && <HawaChip size="normal" label="Default" />}
+    <div className="flex flex-row items-center justify-center gap-2">
+      {props.default && (
+        <HawaButton disabled variant="outlined" size="small">
+          Default
+        </HawaButton>
+      )}
+      {/* {props.default && <HawaChip size="normal" label="Default" />} */}
       {!props.default && <HawaButton size="small">Make Default</HawaButton>}
       <HawaButton tooltip="Delete">
         <FaTimes />

package/src/blocks/Referral/ReferralStats.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { HawaAlert, HawaButton } from "../../elements"
 import { HawaContainer } from "../../layout"
 
@@ -8,7 +8,7 @@ type TReferralStats = {
   withdrawError?: string
 }
 
-export const ReferralStats: React.FunctionComponent<TReferralStats> = ({
+export const ReferralStats: FC<TReferralStats> = ({
   referralLink,
   referralCode,
   withdrawError,

package/src/elements/ArrowCarousel.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { useEffect, useState, FunctionComponent } from "react"
+import { useEffect, useState, FC } from "react"
 
 type Item = {
   label?: string
@@ -41,7 +41,7 @@ const Arrow = (props: {
   )
 }
 
-export const ArrowCarousel: FunctionComponent<ComponentTypes> = (props) => {
+export const ArrowCarousel: FC<ComponentTypes> = (props) => {
   const [index, setIndex] = useState(props.index || 0)
 
   useEffect(() => {

package/src/elements/AutoCompleteField.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 import { Controller, useFormContext } from "react-hook-form"
 
 type TAutoCompleteFieldTypes = {
@@ -6,20 +6,18 @@ type TAutoCompleteFieldTypes = {
   rules: any
   shouldUnregister: boolean
 }
-export const AutoCompleteField: React.FunctionComponent<
-  TAutoCompleteFieldTypes
-> = (props) => {
+export const AutoCompleteField: FC<TAutoCompleteFieldTypes> = (props) => {
   const { control } = useFormContext()
   const { name, rules, shouldUnregister } = props
 
   return (
-    <React.Fragment>
+    <>
       <Controller
+        // className="theme_form_input"
         name={name}
         rules={rules}
         control={control}
         shouldUnregister={shouldUnregister}
-        // className="theme_form_input"
         render={({ field: { onChange, value } }) => {
           return (
             <input type="text" />
@@ -34,6 +32,6 @@ export const AutoCompleteField: React.FunctionComponent<
           )
         }}
       />
-    </React.Fragment>
+    </>
   )
 }

package/src/elements/BackToTop.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useState, useEffect } from "react"
+import { FC, RefObject, useState, useEffect } from "react"
 import { clsx } from "clsx"
 
 type ComponentTypes = {
@@ -6,10 +6,10 @@ type ComponentTypes = {
   paddingY?: number // Vertical padding relative to the attached corner
   paddingThreshold?: number // Increase to the threshold of the scroll value that has to be passed for the button to appear
   corner?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
-  anchor: React.RefObject<HTMLInputElement>
+  anchor: RefObject<HTMLInputElement>
 }
 
-export const BackToTop: FunctionComponent<ComponentTypes> = ({ ...props }) => {
+export const BackToTop: FC<ComponentTypes> = ({ ...props }) => {
   const [visible, setVisible] = useState<boolean>(false)
 
   const getCoords = () => {

package/src/elements/Breadcrumb.tsx

@@ -1,18 +1,15 @@
-import React, { FC, ReactNode } from "react"
+import { FC, ReactNode } from "react"
 
 type TBreadcrumb = {
-  /**
-   * The array of crumbs, each one with a label and a href link
-   */
+  /** The array of crumbs, each one with a label and a href link */
   breadcrumbLinks: [{ label: string; href: string }]
-  /** The separator between each crumb, can be character or React Node */
+  /** The separator between each crumb, can be character or React Node. The default is ">" */
   separator?: string | ReactNode
 }
 
 const HawaBreadcrumb: FC<TBreadcrumb> = ({
   breadcrumbLinks,
   separator = ">",
-  ...props
 }) => {
   return (
     <div className="flex flex-row items-center gap-2 text-sm">

package/src/elements/DragDropImages.tsx

@@ -2,11 +2,9 @@ import React, { useEffect, useState } from "react"
 import { useDropzone } from "react-dropzone"
 import { HawaAlert } from "./HawaAlert"
 import { HawaButton } from "./HawaButton"
-
+//TODO: This element needs more improvements and testing
 type DragDropImagesTypes = {
-  /**
-   * The text label above the component. Consistant with the other form input fields
-   */
+  /**  The text label above the component. Consistant with the other form input fields   */
   label?: string
   files: [File]
   setFiles: any
@@ -19,9 +17,7 @@ type DragDropImagesTypes = {
   onClearFiles: any
   maxSize: number
   errorMessages: string
-  /**
-   * The translation object, use this to replace the default text with any translated text you want.
-   */
+  /** The translation object, use this to replace the default text with any translated text you want.*/
   texts: {
     clickHereToUpload: string
     maxFileSize: string

package/src/elements/DraggableCard.tsx

@@ -1,12 +1,10 @@
-import React, { ReactElement } from "react"
+import { ReactElement, FC } from "react"
 
 type DraggableCardTypes = {
   children: ReactElement
 }
 
-export const DraggableCard: React.FunctionComponent<DraggableCardTypes> = (
-  props
-) => {
+export const DraggableCard: FC<DraggableCardTypes> = (props) => {
   return (
     <div className="flex flex-row rounded bg-layoutPrimary-500 p-4">
       <button

package/src/elements/HawaAccordion.tsx

@@ -1,24 +1,16 @@
-import React from "react"
+import { useState, FC } from "react"
 import clsx from "clsx"
 
 type AccordionTypes = {
-  /**
-   * The title of the clickable accordion bar
-   */
+  /** The title of the clickable accordion bar   */
   title: string
-  /**
-   * The content inside the accordion to be visible once the bar is clicked
-   */
+  /** The content inside the accordion to be visible once the bar is clicked   */
   content: any
-  /**
-   * The index of each accordion, must be unique for each usage of this component
-   */
+  /** The index of each accordion, must be unique for each usage of this component   */
   index: any
 }
-export const HawaAccordion: React.FunctionComponent<AccordionTypes> = (
-  props
-) => {
-  const [collapse, setCollapse] = React.useState(false)
+export const HawaAccordion: FC<AccordionTypes> = (props) => {
+  const [collapse, setCollapse] = useState(false)
 
   return (
     <div className="h-fit w-full">

package/src/elements/HawaAdCard.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 
 type AdCardTypes = {
   orientation: "vertical" | "horizontal"
@@ -7,10 +7,7 @@ type AdCardTypes = {
   imageURL: string
   handleHide: any
 }
-export const HawaAdCard: React.FunctionComponent<AdCardTypes> = ({
-  orientation,
-  ...props
-}) => {
+export const HawaAdCard: FC<AdCardTypes> = ({ orientation, ...props }) => {
   let cardStyles = {
     horizontal:
       "flex max-w-xl rounded border-gray-200 bg-gray-100 shadow-md  dark:border-gray-700 dark:bg-gray-800 ",

package/src/elements/HawaCardInput.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { HawaButton } from "./HawaButton"
 
 const CARDS = {

package/src/elements/HawaCheckbox.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React, { useEffect, useState } from "react"
+import { useEffect, useState, FC } from "react"
 
 type TCheckBoxTypes = {
   centered?: boolean
@@ -10,9 +10,7 @@ type TCheckBoxTypes = {
   val?: boolean
 }
 
-export const HawaCheckbox: React.FunctionComponent<TCheckBoxTypes> = (
-  props
-) => {
+export const HawaCheckbox: FC<TCheckBoxTypes> = (props) => {
   const [isChecked, setVal] = useState(props.val)
 
   useEffect(() => {

package/src/elements/HawaChip.tsx

@@ -1,18 +1,24 @@
-import React from "react"
+import { FC } from "react"
 import clsx from "clsx"
 
 type TChipTypes = {
+  /** The text inside the chip */
   label: string
-  size?: "small" | "normal" | "large"
+  /** The small icon before the chip label  */
   icon?: JSX.Element
+  /** The color of the chip, must be a tailwind color */
   color?: string
+  /** The size of the chip */
+  size?: "small" | "normal" | "large"
+  /** Enable/Disable the dot before the label of the chip */
   dot?: boolean
+  /** Red/Green dot next to the label of the chip indicating online/offline or available/unavailable */
   dotType?: "available" | "unavailable"
 }
 
-export const HawaChip: React.FunctionComponent<TChipTypes> = ({
-  size = "normal",
+export const HawaChip: FC<TChipTypes> = ({
   label,
+  size = "normal",
   icon,
   color,
   dot,

package/src/elements/HawaColorPicker.tsx

@@ -1,19 +1,19 @@
-import React, { useState } from "react"
+import { useState, FC, ChangeEvent } from "react"
 
 type ColorPickerTypes = {
+  /** The hex code for the color */
   color?: any
-  handleChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  /** Fires everytime the color changes */
+  handleChange?: (e: ChangeEvent<HTMLInputElement>) => void
 }
 
-export const HawaColorPicker: React.FunctionComponent<ColorPickerTypes> = (
-  props
-) => {
+export const HawaColorPicker: FC<ColorPickerTypes> = (props) => {
   const [selectedColor, setSelectedColor] = useState(props.color)
   return (
     <div className={`flex w-fit flex-row rounded border-2 border-gray-200 p-0`}>
       <div
         style={{ backgroundColor: selectedColor }}
-        className="rounded-tl-lg rounded-bl-lg"
+        className="rounded-bl-lg rounded-tl-lg"
       >
         <input
           type="color"
@@ -29,7 +29,7 @@ export const HawaColorPicker: React.FunctionComponent<ColorPickerTypes> = (
       <input
         type="text"
         value={selectedColor}
-        className="w-24  rounded-tr-lg rounded-br-lg pr-2 pl-2"
+        className="w-24  rounded-br-lg rounded-tr-lg pl-2 pr-2"
       />
     </div>
   )

package/src/elements/HawaCopyrights.tsx

@@ -1,17 +1,19 @@
-import React from "react"
+import { FC } from "react"
 
 type CopyRightsTypes = {
-  withLogo?: boolean
-  lang?: any
+  /** A text used as the version of the app, for example: v1.0.0 */
   version?: string
+  /** Credit to the creator of the app, for example: Sikka Software */
   credits?: string
+  /** The URL of the logo in the copyrights */
   logoURL?: string
+  /** Enable/Disable the existance of the logo */
+  withLogo?: boolean
+  /** Fires when the logo is clicked, usually goes to the website of the creator of the app */
   onLogoClicked?: any
 }
 
-export const HawaCopyrights: React.FunctionComponent<CopyRightsTypes> = (
-  props
-) => {
+export const HawaCopyrights: FC<CopyRightsTypes> = (props) => {
   return (
     <div className="my-2 flex flex-col items-center justify-center gap-1 text-xs text-gray-400">
       {props.withLogo ? (

package/src/elements/HawaDatepicker.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react"
+import { FC, useState } from "react"
 
 type DatepickerTypes = {}
 

package/src/elements/HawaDrawer.tsx

@@ -1,7 +1,7 @@
-import React, { FC, ReactElement, ReactNode } from "react"
+import { FC, ReactElement, ReactNode } from "react"
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
 import clsx from "clsx"
-
+// TODO: This element should either be removed or improved
 type TDrawerTypes = {
   open: boolean
   setOpen: any
@@ -13,7 +13,7 @@ type TDrawerTypes = {
   drawerFooter?: any
 }
 
-export const HawaDrawer: React.FunctionComponent<TDrawerTypes> = ({
+export const HawaDrawer: FC<TDrawerTypes> = ({
   open,
   setOpen,
   position,

package/src/elements/HawaIconCount.tsx

@@ -1,13 +1,13 @@
-import React from "react"
+import { FC } from "react"
 
 type IconCountTypes = {
-  icon: any
+  /** The icon of the counter */
+  icon: JSX.Element
+  /** The text next to the icon */
   count?: string
 }
 
-export const HawaIconCount: React.FunctionComponent<IconCountTypes> = (
-  props
-) => {
+export const HawaIconCount: FC<IconCountTypes> = (props) => {
   return (
     <div className="flex h-fit  flex-row items-center  gap-2 px-2">
       <div>{props.icon}</div>

package/src/elements/HawaItemCard.tsx

@@ -1,18 +1,21 @@
-import React, { useEffect, useState } from "react"
+import { useEffect, useState, FC } from "react"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
 import { HawaButton } from "./HawaButton"
-import { FaReply } from "react-icons/fa"
 
 interface ItemCardTypes {
-  actions?: any
-  content?: any
   headerActions?: THeaderActions[][]
   header?: any
-  lang?: string
+  content?: any
+  /** a URL for the image of the card */
   cardImage?: string
+  /** a function that fires when the card is clicked anywhere */
   onCardClick?: any
-  counts?: any
+  /** a React node with HawaIconCount children to have counters at the bottom of the card */
+  counts?: JSX.Element
+  /** The action buttons on the bottom right of the card */
+  actions?: JSX.Element
+  /** The orientation of the card */
   orientation?: "horizontal" | "vertical"
   /** Enabling this blurs the image on hover and shows an action button */
   clickableImage?: boolean
@@ -30,7 +33,7 @@ type THeaderActions = {
   action?: (e: any) => void
   isButton?: boolean
 }
-export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
+export const HawaItemCard: FC<ItemCardTypes> = ({
   actions,
   counts,
   content,
@@ -147,9 +150,6 @@ export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({
             {actions}
           </div>
         ) : null}
-        {/* {counts && (
-          <div className="flex justify-end rounded-b-lg">{counts}</div>
-        )} */}
       </div>
     </div>
   )

package/src/elements/HawaLandingCard.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import React from "react"
+import { FC } from "react"
 
 type LandingCardTypes = {
   orientation: "vertical" | "horizontal"
@@ -15,7 +15,7 @@ type LandingCardTypes = {
   }
   buttonLink?: string
 }
-export const HawaLandingCard: React.FunctionComponent<LandingCardTypes> = ({
+export const HawaLandingCard: FC<LandingCardTypes> = ({
   orientation,
   ...props
 }) => {
@@ -54,7 +54,7 @@ export const HawaLandingCard: React.FunctionComponent<LandingCardTypes> = ({
         <div className="mt-2 text-lg font-medium">{props.texts.title} </div>
       )}
       {props.texts.description && (
-        <div className="mt-4 text-sm z-10">{props.texts.description}</div>
+        <div className="z-10 mt-4 text-sm">{props.texts.description}</div>
       )}
       {props.texts.linkText && (
         <div className="z-10 mt-6 text-sm underline underline-offset-8">

package/src/elements/HawaLogoButton.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import { FC } from "react"
 
 type LogoButtonTypes = {
   lang?: any
@@ -16,9 +16,7 @@ type LogoButtonTypes = {
   onClick?: any
   buttonText?: any
 }
-export const HawaLogoButton: React.FunctionComponent<LogoButtonTypes> = (
-  props
-) => {
+export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
   let isArabic = props.lang === "ar"
   let logoElement: any = ""
   switch (props.logo?.toLowerCase()) {

package/src/elements/HawaMenu.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useRef, useState } from "react"
+import { ReactNode, useEffect, useRef, useState, FC } from "react"
 import clsx from "clsx"
 
 // TODO: add width to decrease width
@@ -34,7 +34,7 @@ type MenuItems = {
   element?: any
 }
 
-export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
+export const HawaMenu: FC<TMenuTypes> = ({
   menuItems,
   withHeader,
   direction = "ltr",
@@ -165,7 +165,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
         )}
       >
         {withHeader && (
-          <div className="py-3 px-4 text-xs text-gray-900 dark:text-white">
+          <div className="px-4 py-3 text-xs text-gray-900 dark:text-white">
             <div>{headerTitle}</div>
             <div className="truncate font-medium">{headerSubtitle}</div>
           </div>
@@ -196,7 +196,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                     }}
                     className={clsx(
                       item.isButton
-                        ? "flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 py-2 px-4 text-white hover:bg-buttonPrimary-700 rtl:flex-row-reverse dark:hover:bg-buttonPrimary-700 dark:hover:text-white"
+                        ? "flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 px-4 py-2 text-white hover:bg-buttonPrimary-700 rtl:flex-row-reverse dark:hover:bg-buttonPrimary-700 dark:hover:text-white"
                         : " flex  flex-row items-center rounded  rtl:flex-row-reverse ",
                       sizeStyles[size],
                       item.disabled