few housekeeping changes

src/alert-group/alert-group.tsx

@@ -204,7 +204,7 @@ export const AlertGroup = (props: AlertGroupProps): JSX.Element => {
         if (id === ALERT) {
             const alert = cloneElement(child, {
                 ...child.props,
-                portalProps: { isPortalDisabled: true },
+                portalProps: { hasUseReactPortal: false },
                 ...alertChildProps,
                 csx: {
                     ...child.csx,

src/button-group/button-group.tsx

@@ -69,7 +69,6 @@ const ButtonGroupRoot = createStyledComponent<
     const { themeVars, ...themePropsForThemeVarFn } = theme
     const { csx = {}, display = 'inline-flex' } = props
 
-    console.log('CSX', csx)
     return {
         boxSizing: 'border-box',
         display,

src/checkbox/checkbox.stories.tsx

@@ -37,31 +37,31 @@ const Template: Story = (args) => {
             <Checkbox
                 name="default"
                 onChange={onChange}
-                checked={checked.default}
+                isChecked={checked.default}
                 {...args}
             />
             <Checkbox
                 name="thumb"
                 CheckedIcon={<ThumbsChecked />}
                 UncheckedIcon={<ThumbsUnchecked />}
                 onChange={onChange}
-                checked={checked.thumb}
+                isChecked={checked.thumb}
                 {...args}
             />
             <Checkbox
                 name="star"
                 CheckedIcon={<StarChecked />}
                 UncheckedIcon={<StarUnchecked />}
                 onChange={onChange}
-                checked={checked.star}
+                isChecked={checked.star}
                 {...args}
             />
             <Checkbox
                 name="heart"
                 CheckedIcon={<HeartChecked />}
                 UncheckedIcon={<HeartUnchecked />}
                 onChange={onChange}
-                checked={checked.heart}
+                isChecked={checked.heart}
                 {...args}
             />
         </div>

src/checkbox/checkbox.tsx

@@ -23,7 +23,7 @@ export interface CheckboxProps
      *
      * @default false
      */
-    checked?: boolean
+    isChecked?: boolean
     /**
      * Whether checkbox is in indeterminate state
      * or not. If true then it will override checked
@@ -87,7 +87,7 @@ export interface CheckboxProps
      * To activate active style
      */
     isActive?: boolean
-
+    isDisabled?: boolean
     classes?: {
         /**
          * Applied to root component
@@ -112,7 +112,7 @@ export const Checkbox = (props: CheckboxProps): JSX.Element => {
     const {
         classes = {},
         className,
-        checked = false,
+        isChecked = false,
         isIndeterminate = false,
         CheckedIcon = <DefaultCheckedIcon />,
         UncheckedIcon = <DefaultUncheckedIcon />,
@@ -121,13 +121,13 @@ export const Checkbox = (props: CheckboxProps): JSX.Element => {
         innerRef,
         inputRef,
         id: idProps,
-        disabled,
+        isDisabled,
         ...rest
     } = props
 
     const getIconToRender = (): ReactElement => {
         if (isIndeterminate) return IndeterminateIcon
-        if (checked) return CheckedIcon
+        if (isChecked) return CheckedIcon
         return UncheckedIcon
     }
 
@@ -149,7 +149,7 @@ export const Checkbox = (props: CheckboxProps): JSX.Element => {
     } = rest
 
     const iconButtonProps = {
-        disabled,
+        isDisabled,
         size,
         borderStyle,
         isDense,
@@ -170,10 +170,10 @@ export const Checkbox = (props: CheckboxProps): JSX.Element => {
     return (
         <>
             <InputBase
-                disabled={disabled}
+                isDisabled={isDisabled}
                 type={type}
                 id={id}
-                checked={isIndeterminate ? false : checked}
+                checked={isIndeterminate ? false : isChecked}
                 isHidden={true}
                 innerRef={inputRef}
                 {...inputProps}

src/form-control-label/form-control-label.stories.tsx

@@ -32,7 +32,7 @@ const Template: Story = (args) => {
                     <Checkbox
                         name="cricket"
                         onChange={onChange}
-                        checked={checked.cricket}
+                        isChecked={checked.cricket}
                     />
                 }
                 label="Cricket"
@@ -43,7 +43,7 @@ const Template: Story = (args) => {
                     <Checkbox
                         name="hockey"
                         onChange={onChange}
-                        checked={checked.hockey}
+                        isChecked={checked.hockey}
                     />
                 }
                 label="Hockey"
@@ -54,7 +54,7 @@ const Template: Story = (args) => {
                     <Checkbox
                         name="football"
                         onChange={onChange}
-                        checked={checked.football}
+                        isChecked={checked.football}
                     />
                 }
                 label="Football"
@@ -65,7 +65,7 @@ const Template: Story = (args) => {
                     <Checkbox
                         name="swimming"
                         onChange={onChange}
-                        checked={checked.swimming}
+                        isChecked={checked.swimming}
                     />
                 }
                 label="Swimming"

src/inline-alert/inline-alert.tsx

@@ -46,7 +46,7 @@ const InlineAlertRoot = createStyledComponent<typeof Alert, InlineAlertProps>(
 
             return getHoverProperties({
                 color,
-                disabled: false,
+                isDisabled: false,
                 variant: 'ghost',
                 theme,
                 mainColor: color,
@@ -111,7 +111,7 @@ export const InlineAlert = (props: InlineAlertProps): JSX.Element => {
                         ...getThemeCSSObject(csx.message, theme),
                     }),
                 }}
-                portalProps={{ isPortalDisabled: true }}
+                portalProps={{ hasUseReactPortal: false }}
                 {...rest}
             />
         </Collapsible>

src/inline-alert/inline-alerts.stories.tsx

@@ -22,7 +22,7 @@ const Template: Story = (args) => {
             <Button
                 variant="outlined"
                 color={args.type}
-                disabled={isOpen}
+                isDisabled={isOpen}
                 onClick={() => setIsOpen(true)}
                 csx={{ root: { margin: '1rem 0' } }}
             >

src/popper/popper.stories.tsx

@@ -41,6 +41,7 @@ const Template: Story = (props) => {
                     },
                 ]}
                 anchorElement={anchorElement}
+                isOpen={Boolean(anchorElement)}
                 {...args}
             >
                 <Box

src/popper/popper.tsx

@@ -59,7 +59,6 @@ export const Popper = (props: PopperProp): JSX.Element => {
 
     useLayoutEffect(() => {
         let popper: PopperInstance | null = null
-
         if (isValidAnchorElement(anchorElement) && ref.current) {
             popper = createPopper(anchorElement, ref.current, {
                 placement,

src/portal/portal.tsx

@@ -8,21 +8,21 @@ import { PORTAL } from '../constants/component-ids'
 export type PortalProps = {
     children?: ReactElement
     /**
-     * There are some requirement where a portal element should
+     * There are some use cases where a portal element should
      * behave like none portal element, i.e., it should mount
      * according to render tree. For those condition pass false
      * here.
      *
      * @default true
      */
-    isPortalDisabled?: boolean
+    hasUseReactPortal?: boolean
 }
 
 export const Portal = (props: PortalProps): JSX.Element => {
-    const { children, isPortalDisabled = false } = props
+    const { children, hasUseReactPortal = true } = props
     const [node] = useState(document.body)
 
-    if (isPortalDisabled) return <>{children}</>
+    if (!hasUseReactPortal) return <>{children}</>
 
     return createPortal(children, node)
 }

src/radio/radio.tsx

@@ -20,10 +20,10 @@ const CheckboxRoot = createStyledComponent(Checkbox, (theme, props) => {
 export const Radio = (props: RadioProps): JSX.Element => {
     const context = useRadioGroup()
 
-    const { checked, name, value, onChange, ...rest } = props
+    const { isChecked, name, value, onChange, ...rest } = props
 
     const getCheckedStatus = (): boolean => {
-        if (typeof checked !== 'undefined') return checked
+        if (typeof isChecked !== 'undefined') return isChecked
         return value === context?.value
     }
 
@@ -41,7 +41,7 @@ export const Radio = (props: RadioProps): JSX.Element => {
         <CheckboxRoot
             type="radio"
             onChange={handleOnChange}
-            checked={getCheckedStatus()}
+            isChecked={getCheckedStatus()}
             name={name ?? context?.name}
             value={value}
             CheckedIcon={<RadioChecked />}

src/toggle/toggle.stories.tsx

@@ -16,12 +16,12 @@ const Template: Story = (args) => {
         setState(!state)
     }
 
-    return <Toggle onChange={handleOnChange} checked={state} {...args} />
+    return <Toggle onChange={handleOnChange} isChecked={state} {...args} />
 }
 
 export const Default = Template.bind({})
 Default.args = {
-    disabled: false,
+    isDisabled: false,
 }
 
 const Row = ({ children }) => {
@@ -64,7 +64,7 @@ const Template2: Story = (args) => {
                     control={
                         <Toggle
                             name="magnifier"
-                            checked={state.magnifier}
+                            isChecked={state.magnifier}
                             onChange={handleOnChange}
                             {...args}
                         />
@@ -79,7 +79,7 @@ const Template2: Story = (args) => {
                     control={
                         <Toggle
                             name="narrator"
-                            checked={state.narrator}
+                            isChecked={state.narrator}
                             onChange={handleOnChange}
                             {...args}
                         />
@@ -94,7 +94,7 @@ const Template2: Story = (args) => {
                     control={
                         <Toggle
                             name="filter"
-                            checked={state.filter}
+                            isChecked={state.filter}
                             onChange={handleOnChange}
                             {...args}
                         />

src/toggle/toggle.tsx

@@ -15,7 +15,7 @@ import { Checkbox, CheckboxProps } from '../checkbox'
 export type ToggleProps = CheckboxProps
 
 export type ToggleIconProps = {
-    checked: boolean
+    isChecked: boolean
 }
 
 const useStyles = createStyle((theme) => ({
@@ -30,7 +30,7 @@ const useStyles = createStyle((theme) => ({
             theme.palette.common.white,
             theme.palette.common.black
         ),
-        transform: props.checked ? 'translateX(16px)' : undefined,
+        transform: props.isChecked ? 'translateX(16px)' : undefined,
     }),
 }))
 
@@ -59,7 +59,7 @@ const CheckboxRoot = createStyledComponent(Checkbox, (theme, props) => {
 
 export const Toggle = (props: ToggleProps): JSX.Element => {
     const {
-        checked = false,
+        isChecked = false,
         size = 'regular',
         csx = {},
         color = 'primary',
@@ -91,9 +91,9 @@ export const Toggle = (props: ToggleProps): JSX.Element => {
         <CheckboxRoot
             type="checkbox"
             borderStyle={borderStyle}
-            color={checked ? color : 'neutral'}
-            CheckedIcon={<ToggleSVG checked={checked} />}
-            UncheckedIcon={<ToggleSVG checked={checked} />}
+            color={isChecked ? color : 'neutral'}
+            CheckedIcon={<ToggleSVG isChecked={isChecked} />}
+            UncheckedIcon={<ToggleSVG isChecked={isChecked} />}
             csx={{
                 root: (theme) => ({
                     ...getDimension(),

src/tooltip/tooltip.stories.tsx

@@ -1,8 +1,7 @@
 import { Story } from '@storybook/react/types-6-0'
-import React, { useState } from 'react'
 
 import { Button } from '../button'
-import { Box } from '../box'
+
 import { Tooltip } from './tooltip'
 
 export default {

src/tooltip/tooltip.tsx

@@ -303,7 +303,6 @@ export const Tooltip = (props: TooltipProps): JSX.Element => {
     )
 
     const [actualPlacement, setActualPlacement] = useState(placement)
-
     const childRefName = isChromatinElement(children)
         ? 'innerRef'
         : _refPropsName