bigbinary
neetoUI is the library that drives the experience in all neeto products built at BigBinary.
Installation
yarn add @bigbinary/neetouiThis would install neetoui package inside your application. Starting 3.0.x,
neetoUI stylesheet has been separated from the bundle. To get the styles
working, please import the neetoUI stylesheet to your main scss entry point.
@import "@bigbinary/neetoui";Dependencies
neetoUI has few peer dependencies which are required to use neetoUI properly. Make sure you install all the peerDependencies mentioned in the package.json
react-toastify
neetoUI depends on react-toastify for Toasters, so the styles for toaster must
be imported to your main scss entry point.
@import "react-toastify/dist/ReactToastify.min.css";Also make sure to include <ToastContainer /> in your application.
import React from "react";
import { ToastContainer } from "react-toastify";
const App = () => {
return (
<>
<ToastContainer />
// Other children
</>
);
};formik
To make form handling easier with neetoUI, we provide Formik binding with neetoUI components. To know about Formik, ref the official documentation.
Usage
neetoUI exports all it’s component as named exports. You can individually import necessary components in the following way:
import { Button, Tooltip } from "@bigbinary/neetoui";If you need access to an object that contains references to all the components you can do a wildcard import. This way, you can render dynamic components from neetoUI.
import React from "react";
import * as NeetoUI from "@bigbinary/neetoui";
export default function index() {
const Button = NeetoUI.Button;
// get a random component
const componentName = Math.random() > 0.5 ? "Badge" : "Avatar";
const MyDynamicComponent = NeetoUI[componentName];
return (
<div>
<Button />
<MyDynamicComponent />
</div>
);
}Formik
neetoUI formik exports all its component as named exports. You can individually import necessary components in the following way:
import { Input } from "@bigbinary/neetoui/formik";Available components in neetoUI formik:
- Input
- Radio
- Button
- Form
- ActionBlock
- Select
- Switch
- Textarea
- CheckBox
- BlockNavigation
- TreeSelect
- Slider
You can refer the formik folder to check for latest Formik components.
In order to use the neetoUI formik components, you need to wrap your form with
the Form component.
import * as Yup from "yup";
import { Form } from "@bigbinary/neetoui/formik";
<Form
formikProps={{
initialValues: {
name: "",
email: "",
},
onSubmit: (values, formikBag) => {
console.log(values, formikBag);
},
validationSchema: Yup.object({
name: Yup.string().required("Name is required"),
email: Yup.string().email("Invalid email").required("Email is required"),
}),
}}
className="w-full space-y-6"
>
{props => {
return (
<>
<Input {...props} label="Name" name="name" />
<Input {...props} label="Email" name="email" />
<Button label="Submit" type="submit" style="primary" />
</>
);
}}
</Form>;In case, you wish not to pass children as a function, you can use the
following syntax:
import * as Yup from "yup";
import { Form } from "@bigbinary/neetoui/formik";
<Form
formikProps={{
initialValues: {
name: "",
email: "",
},
onSubmit: (values, formikbag) => {
console.log(values, formikbag);
},
validationSchema: Yup.object({
name: Yup.string().required("Name is required"),
email: Yup.string().email("Invalid email").required("Email is required"),
}),
}}
className="w-full space-y-6"
>
<>
<Input {...props} label="Name" name="name" />
<Input {...props} label="Email" name="email" />
<Button label="Submit" type="submit" style="primary" />
</>
</Form>;The Form component accepts the following props:
formikProps: Formik props object. You can passinitialValues,validationSchema,onSubmitetc. as props to theFormcomponent.children: You can pass a function aschildrento theFormcomponent. The function will receive the formik props object as an argument. Or you can directly pass thechildreninside theFormcomponent.className: You can use this prop to provide a custom class to the form.formProps: Form props object. You can passclassName,styleetc. as props to theFormcomponent.scrollToErrorField: To specify whether scroll to error field on clicking submit button is enabled or not. Default value is false.
Development
Install all the dependencies by executing following command.
yarnYou can create new components in src/components and export them from
src/index.js.
Running the yarn storybook command starts a storybook app. Use this
application to test out changes and see how your component behaves in the
storybook for neetoUI
- To see if tests associated with your components pass run
yarn test.Tests will fail if there are some warnings or errors in the console.
- To see if neetoUI gets built and bundled after changes run
yarn bundle. - To see if the storybook gets built run
yarn build.
Note that nothing in the stories folder will be bundled with neetoUI.
Building and releasing.
The @bigbinary/neetoui package gets published to NPM when we merge a PR with
patch, minor or major label to the main branch. The patch label is
used for bug fixes, minor label is used for new features and major label is
used for breaking changes. You can checkout the Create and publish releases
workflow in GitHub Actions to get a live update.
In case if you missed to add the label, you can manually publish the package.
For that first you need to create a PR to update the version number in the
package.json file and merge it to the main branch. After merging the PR, you
need to create a
new github release from
main branch. Whenever a new release is created with a new version number, the
github actions will automatically publish the built package to npm. You can
checkout the Publish to npm workflow in GitHub Actions to get a live update.
Please note that before publishing the package, you need to verify the
functionality in some of the neeto web-apps locally using yalc package
manager. The usage of yalc is explained in this video:
https://youtu.be/F4zZFnrNTq8
Documentation
Read the docs here
Other Libraries
- neetoIcons: NeetoIcons is the official icons library from BigBinary.
- neetoEditor: NeetoEditor is a prose-mirror based rich-text editor used at BigBinary.
- Updated: Accordion border color from `--neeto-ui-gray-400` to `--neeto-ui-gray-300`.
-
- Updated: Label color from `--neeto-ui-gray-700` to `--neeto-ui-black`.
-
- Updated: Label font weight from `normal` to `medium`.
-
- Updated: Help text color from `--neeto-ui-gray-600` to `--neeto-ui-gray-700`.
-
- Fixed: Modal spacing when there is no footer.
- Added: Storybook example for using Tooltip in Table header
- Fixed: Horizontal scroll issue in Table header
## 4.4.8 - 2023-03-10
- Fixed: Issue with overriding components in *Select* component
## 4.4.7 - 2023-03-10
- Added: entry points for TypeScript resolutions in package.json
## 4.4.6 - 2023-03-09
- Added: new fallback avatars in the *Avatar* component using `boringavatars`.
## 4.4.4 - 2023-03-07
- Added: the ability to add a custom separator text between the primary and secondary buttons using the `buttonSeparatorText` prop for the *NoData* component.
## 4.4.3 - 2023-03-07
- Changed: Exported both cjs and esm bundles.
## 4.4.2 - 2023-03-03
Fixed empty toastr message when errors or errorCodes are given null values.
## 4.4.1 - 2023-03-03
- Added feature to display string from custom message key from response , when the noticeCode is custom_message
## 4.4.0 - 2023-02-24
- Fixed: Alignment issues in Table headers when sort is enabled.
- Fixed: Made Table headers popout.
**Color contrast improvements**
- Updated: `--neeto-ui-black` from `#1b1f23` to `#121212`.
- Updated: `--neeto-ui-gray-800` from `#2f3941` to `#1f1f1f`.
- Updated: `--neeto-ui-gray-700` from `#49545c` to `#2f3941`.
- Updated: `h1`, `h2`, `h3`, `h4`, `h5`, `h6` color to `--neeto-ui-black` (`#121212`).
- Updated: Color contrast of `secondary`, `text` and `link` variants of Button.
- Updated: Tags color contrast.
- Updated: Menubar color contrast.
- Added: Borders to Table.
**Dropdown changes**
- Updated: `--neeto-ui-shadow-lg` to `0 8px 24px rgba(140,149,159,0.2)`.
- Updated: Dropdown shadow to `--neeto-ui-shadow-lg`.
- Updated: Select dropdown shadow to `--neeto-ui-shadow-lg`.
- Updated: Date/Time picker dropdown shadow to `--neeto-ui-shadow-lg`.
- Updated: Dropdown `max-height` from `360px` to `480px` to accommodate more number of items without scroll.
- Updated: Select dropdown `max-height` to `480px`
- Improved: The spacing in NoData component
- Updated: AppSwitcher selection styles.
## 4.3.3 - 2023-02-17
- Added: functionality to get `errorCode` or `errorCodes` from the Axios error object and displays translated string as toastr message
## 4.3.2 - 2023-02-16
- Updated: styles of preset ranges in *DatePicker*.
## 4.3.1 - 2023-02-14
- Changed: **BREAKING** Updated `neetoApps` prop in *AppSwitcher* component to include app description and url along with the app name.
- Changed: Product icons required for *AppSwitcher* component is directly picked from `neetoIcons`.
- Removed: `subdomain` and `environment` props from *AppSwitcher* component.
## 4.3.0 - 2023-02-13
- Fixed: overlay issues with Subheader Tippy dropdown
- Fixed: logo sizing in Sidebar
Before
After
After
## 4.2.9 - 2023-02-08
- Changed: `Neeto` logo in the sidebar.
## 4.2.8 - 2023-02-08
- Fixed: *Modal* and *Alert* was adding a `margin-right` to the *body* when there was no scrollbar which caused the UI elements to shift right.
## 4.2.7 - 2023-02-08
- Updated: Pageloader component.
## 4.2.6 - 2023-02-08
- Fixed: Submit on enter triggered when *Form* was being submitted.
## 4.2.5 - 2023-02-07
- Updated : Table sorting UI styles
## 4.2.4 - 2023-01-31
- Updated : `neeto-icons`
## 4.2.3 - 2023-01-30
- Added: transparency control option in *ColorPicker*, controlled via `showTransparencyControl`.
## 4.2.2 - 2023-01-29
- Fixed: respecting the prop `isCreatable` if `loadOptions` prop is provided in *Select* component
## 4.2.1 - 2023-01-24
- Changed: product descriptions as per the [list](https://docs.google.com/spreadsheets/d/1xFWMyXJkUCf1YBRhrokLdlQvyBn0X3uK2M2JUZClGgw).
- Changed: product name from **Review** to **Deploy** in the app switcher.
## 4.2.0 - 2023-01-19
Fixed getToastrMessage in Toastr to accept object with the placeholder value for the translations.
## 4.1.44 - 2023-01-17
- Updated: Button keyboard focus styles
- Updated: Radio keyboard focus styles
- Updated: Checkbox keyboard focus styles
- Updated: `antd` Checkbox focus styles in Table
- Added: Switch focus styles
- Added: Tab focus styles
- Added: Accordion focus styles
- Added: Pagination focus styles
- Added: `antd` Pagination focus styles in Table
Screenshot
## 4.1.43 - 2023-01-09
Added function in Toastr to check for notice_code in response and if it's not present then it will fall back to notice.
## 4.1.42 - 2023-01-05
- Updated: Sidebar neeto logo.
## 4.1.41 - 2023-01-05
- Fixed: Focus trap for conditionally rendered elements in *Overlay*
## 4.1.40 - 2022-12-30
- Added: word break for *Modal* body and *Tooltip* content
## 4.1.38 - 2022-12-29
- Fixed: proptypes declaration being included in production bundle (3% bundle size reduction)
- Changed: github workflow compilation environment to `production`
## 4.1.37 - 2022-12-28
- Fixed: issue with multiple links in *Sidebar* getting active at the same time.
- Changed: logic in *Select* component to respect `getOptionValue` prop.
## 4.1.35 - 2022-12-27
- Added: the ability to choose email from options in *EmailInput*.
## 4.1.34 - 2022-12-26
- Fixed: Select dropdown width when strategy fixed.
## 4.1.33 - 2022-12-25
- Fixed: Issues with `value` prop of *Select* component.
## 4.1.32 - 2022-12-25
Added: *Checkbox* and *MultiEmailInput* are wrapped with `forwardref`.
## 4.1.31 - 2022-12-21
- Fixed: issue with continue in *BlockNavigation*.
## 4.1.30 - 2022-12-21
- Added: functionality to scroll to the selected value in *Select* component
## 4.1.29 - 2022-12-21
- Fixed: pressing `enter` key in *Select* to select an option submitting the *Form*.
## 4.1.28 - 2022-12-20
- Fixed: **Form** `validateOnChange` and `validateOnBlur` is not being triggered after the form is submitted by pressing enter key and there are validation errors.
## 4.1.27 - 2022-12-19
- Updated: *Product switcher* component in neetoUI
- Updated: the icon Tooltip content from "App switcher" to "Product switcher"
## 4.1.26 - 2022-12-19
- Added: support for `neeto-ui-shadow-sm`, `neeto-ui-shadow-md` and `neeto-ui-shadow-lg`.
## 4.1.25 - 2022-12-14
Fixed: Issue with overlapping column headers for fixed columns in tables.
## 4.1.24 - 2022-12-12
Added: `labelProps` to form elements to customize `Label`.
Changed: Made `shouldDynamicallyRenderRowSize` `false` by default.
## 4.1.22 - 2022-12-07
- Added: *Popover* component
## 4.1.20 - 2022-12-06
- Changed: `color` prop in *Tag* component as optional in type definition.
## 4.1.19 - 2022-12-05
- Fixed: Prevented form submission on the `enter` key for neetoEditor.
## 4.1.18 - 2022-12-02
Added: `shouldDynamicallyRenderRowSize` to calculate rows per page dynamically based on viewport height.
## 4.1.17 - 2022-12-01
Fixed: Issue with class instance producing undefined in the host application.
Added: Types for `manager`.
## 4.1.16 - 2022-12-01
Fixed: Prevents form submission when the `enter` key is pressed.
## 4.1.15 - 2022-11-28
Fixed: Form validation triggered with incorrect values from MultiEmailInput.
## 4.1.13 - 2022-11-24
- Fixed: Wrong managers bundle entry point in rollup config
- Added: `OverlayManager` which is used by all overlay components in neetoUI internally. The host application can use the methods inside the class to determine whether an Overlay is open in the product or not.
- Removed: `ModalManager` and migrate the Modal component to use `OverlayManager`.
## 4.1.12 - 2022-11-24
- Fixed: UI issues in Subheader
## 4.1.11 - 2022-11-21
- Fixed: warnings in *DatePicker* and *TimePicker* component
## 4.1.10 - 2022-11-17
- Adds formikBag to onSubmit
## 4.1.9 - 2022-11-16
- Fixed: `validateOnBlur` and `validateOnChange` getting triggered before the first submission of the *Form*.
## 4.1.8 - 2022-11-16
- Updated: Toaster styles.
- Added: POC for Toasters with minimum content and bottom left positioning
## 4.1.7 - 2022-11-14
- Changed: color-picker related dependencies to dev dependency
## 4.1.6 - 2022-11-13
- Fixed: issue with *Select* dropdown when scrolling the page.
## 4.1.5 - 2022-11-11
- Added `system-ui` to `font-family` in `_base.scss`
## 4.1.4 - 2022-11-10
- Added: `className` as props to *Form* component.
## 4.1.3 - 2022-11-10
- Removes Tags molecule from library and moved to [neeto-tags-frontend](https://github.com/bigbinary/neeto-tags-frontend)
## 4.1.2 - 2022-11-09
- Added `Form` component to `neetoui/formik`.
- Added relevant tests for `Form` component.
- Removed the usage of `Formik` and `Form` from `formik` in stories and used `Form`.
- Fixed flaky tests.
## 4.1.1 - 2022-11-03
- Added: Eyedropper to *ColorPicker*
## 4.1.0 - 2022-11-03
- Changed: **BREAKING** Name of the *EmailInput* component to *MultiEmailInput* in both components and Formik components.
## 4.0.17 - 2022-10-28
- Fixed:`ValidateDOMNesting` warning in *DatePicker* component.
- Fixed: the issue with date items looking disabled in normal state
## 4.0.16 - 2022-10-28
Changes documentations to sentence case from title casing.
## 4.0.15 - 2022-10-28
- Added: Border for menubar block and item active states.
## 4.0.14 - 2022-10-28
- Added: ability to pass custom config to Toastr.
## 4.0.13 - 2022-10-20
- Fixed: Icons grabbing away click events & onClick not being triggered when icons are replaced during a state change.
- Fixed: False positive type errors for MenuBar & Dropdown subcomponents
## 4.0.12 - 2022-10-17
- Added: tooltip to *Avatar* component
## 4.0.11 - 2022-10-10
- Fixed false positive type errors
## 4.0.10 - 2022-10-05
- Fixed: issue with week picker in `DatePicker`.
## 4.0.9 - 2022-09-29
- Fixed: warnings in `Tag` and `DatePicker` props.
- Added: neetoReview app to `AppSwitcher`.
## 4.0.8 - 2022-09-28
- Added: *Kbd* component to render keyboard keys.
## 4.0.7 - 2022-09-22
- Fixed: Clicking on neetoQuiz from the app switcher takes the user to the consumer page.
## 4.0.6 - 2022-09-20
- Changed: default value of `defaultPageSize` prop of *Table* component from 100 to 15.
## 4.0.5 - 2022-09-20
- Added: type support for data-cy props in all components that are forward referenced to HTML native elements.
## 4.0.4 - 2022-09-16
- Changed: Allowed `hideOnSinglePage` override in *Table* `paginationProps`
## 4.0.3 - 2022-09-13
- Added: Storybook addon that lets users toggle between dark and light mode
- Fixed: date/time input color in darkmode
- Fixed: overlapping issue with *Dropdown* in *Table*
## 4.0.2 - 2022-09-12
- Fixed: navigation issue in *BlockNavigation* component
## 4.0.1 - 2022-09-12
- Added: `secondary` style variant
- Added: `info` style variant
- Removed: `inactive` style variant
- Fixed issue with custom target in *Dropdown*
- Fixed alignment issues in Dropdown `sizing` Story
- Updated select styles of antd table pagination
- Fixed Menuhorizontal button size in Table
## 4.0.0 - 2022-09-02
- Updated: Color palette
- Added: CSS variables support
- Added: Custom theming support
- Added: Default dark theme support
- Added: Design preview in Storybook
- Added: Guidelines to structure content in applications
- Changed: bundle type to `CJS`
- Fixed: delay while opening overlays
- Removed: `framer-motion` from dependencies.
### Color palette 🎨
- Updated color naming convention
- Added CSS variables support for colors
- Implemented dynamic color palette to support default dark mode
- Served color codes as RBG numbers in CSS variables to achieve color transparency
- Enhanced contrast of status color (info, success, error, warning)
- Included existing pastel colors as the color swatches of primary, success, error, warning, and info
- Added new set of pastel colors
- Removed unused colors from the palette
- Updated utility classes to match the new variable naming
- Restructured documentation and created new documentation for color palette
- Deprecated `neeto-ui-accent1`, `neeto-ui-accent2`, `neeto-ui-accent3`, `neeto-ui-accent4` colors and utility classes
- Deprecated `neeto-ui-secondary-indigo`, `neeto-ui-secondary-green`, `neeto-ui-secondary-teal` colors and utility classes
- Deprecated `neeto-ui-pastel-teal`
- Renamed `neeto-ui-success` to `neeto-ui-success-500`
- Renamed `neeto-ui-info` to `neeto-ui-info-500`
- Renamed `neeto-ui-error` to `neeto-ui-error-500`
- Renamed `neeto-ui-warning` to `neeto-ui-warning-500`
- Renamed `neeto-ui-pastel-blue` to `neeto-ui-info-100`
- Renamed `neeto-ui-pastel-green` to `neeto-ui-success-100`
- Renamed `neeto-ui-pastel-yellow` to `neeto-ui-warning-100`
- Renamed `neeto-ui-pastel-red` to `neeto-ui-error-100`
### Cosmetic changes 👁
#### Button
- Updated primary button color to `neeto-ui-primary-500`
- Added `:focus` rings to buttons for accessibility
- Updated `:focus-visible` styles to match the new design
- Updated border radius to `5px`
- Updated CSS transition from `all .3s ease-in-out` to `all .3s linear`
- Deprecated variants story in Storybook doc
- Created independent stories for `Styles`, `Sizes`, `Icon only` etc
#### Checkbox
- Replaced checked state icon with neetoIcon
- Updated checked state color to `neeto-ui-primary-500`
- Changed default state border color from `grey 300` to `grey 400`
- Updated `:hover` border color to `grey 500`
- Updated `:focus-visible` border color to `neeto-ui-primary-500`
- Updated focus ring styles to match `neeto-ui-primary` color
- Improved spacing in component
#### Radio
- Replaced checked state icon with neetoIcon
- Updated checked state color to `neeto-ui-primary-500`
- Changed default state border color from `grey 300` to `grey 400`
- Updated `:hover` border color to `grey 500`
- Updated `:focus-visible` border color to `neeto-ui-primary-500`
- Updated focus ring styles to match `neeto-ui-primary` color
- Improved spacing in component
#### Input
- Updated border-radius to `5px`
- Updated focus ring styles to match `neeto-ui-primary` color
- Fixed unwanted spacing in maxLength label
- Fixed alignment issues in Input with maxLength and no label text
- Fixed spacing inconsistencies in error test and helper text - used same margin value for both
- Fixed alignment issues in naked inputs
- Deprecate `variants` story in Storybook and created individual stories for `Input sizing`
#### Textarea
- Updated border-radius to `5px`
- Updated focus ring styles to match `neeto-ui-primary` color
- Fixed unwanted spacing in the maxLength label
- Fixed alignment issues in Input with maxLength and no label text
- Fix spacing inconsistencies in error test and helper text - used the same margin value for both
- Fixed alignment issues in naked inputs
- Added size prop to Textarea
#### Select
- Updated border-radius to `5px`
- Updated focus ring styles to match `neeto-ui-primary` color
- Replaced the default dropdown icons with neetoIcons
- Added CSS transition to the select options
- Applied Badge styles to Multi select items
- Replaced multivalue remove icon with neetoIcon
- Updated multivalue error styles
- Increased Story heights for better view
#### Email input
- Updated border radius to `5px`
- Updated selected values styles to match Tag styles
- Fixed prefix and suffix spacing
- Updated prefix icon size to `16px`
- Updated focus ring styles to match `neeto-ui-primary` color
- Fixed spacing issues in counter
- Fixed alignment issues in label row
- Fixed spacing inconsistencies in error test and helper text - used same margin for both
- Updated error styles of multivalue select
#### Label
- Updated label bottom margin to 8px
- Removed letter-spacing in label text
#### Dropdown & Action Dropdown
- Updated border-radius to `5px`
- Reduced the height of Dropdown options to `32px`
- Created Storybook examples with semantic markup for easy keyboard win
- Separated Delete/Remove actions with a border
- Updated `box-shadow`
#### Date Time picker
- Replaced default icons with neetoIcons
- Updated selection color to `neeto-ui-primary`
- Added border to date and time dropdown
- Updated box shadow of dropdown
#### Accordion
- Updated font weight of Accordion title to `500`
- Updated `border-radius` to `8px`
#### Avatar
- Updated background colors to new pastel colors
- Updated square variant `border-radius` to `5px`
#### Table
- Updated column title color to `grey 600`
- Updated column title font weight to 700
- Reduced cell padding from `12px 16px` to `8px 16px` to accommodate more number of row in a given height
- Removed border from pagination items
- Updated pagination buttons to match neetoUI button style
- Updated active pagination item styles to `neeto-ui-primary`
- Replaced default icons with neetoIcons
#### PageLoader
- Updated neeto logo
#### Color picker
- Added border to input
#### Alert & Modal
- Reduced outer padding from `32px ` to `24px` to provide the compact view
- Updated `border-radius` to `12px`
#### Toast
- Applied `48px` minimum height
- Applied dark theme to all variants
- Reduced text font weight to `400`
#### Tooltip
- Changed box shadow of light theme variant to `--neeto-ui-shadow-s`
#### Sidebar
- Increased width from `64px` to `72px`
- Changed background color from `neeto-ui-gray-200` to `neeto-ui-white`
- Added border on the right side
- Updated `padding-top` and `padding-bottom` to `24px`
### Functionality changes 🛠️
#### Input
- Changed: `maxlength` prop logic to allow typing characters beyond the
specified maxlength. The character count will be shown only when the input
length reaches 90% of maxlength and changes the state to error when input
exceeds the maxlength
#### TextArea
- Changed: `maxlength` prop logic to allow typing characters beyond the
specified maxlength. Character count will be shown only when the input length
reaches 90% of maxlength and changes the state to error when input exceeds the
maxlength
#### Dropdown
- Changed: **BREAKING** Renamed `ulProps` prop to `dropdownProps`
- Added: `buttonSize` prop
#### ActionDropdown
- Changed: **BREAKING** Renamed `size` prop to `buttonSize`
- Changed: **BREAKING** Renamed `style` prop to `buttonStyle`
#### Tag
- Changed: **BREAKING** Renamed `style` prop to `type`
- Removed: **BREAKING** Renamed `color` and `indicatorColor` props
- Added: **BREAKING** `style` and `indicatorStyle` props with options
`"success" | "warning" | "danger" | "primary" | "inactive"`
#### ColorPicker
- Added: `Size` prop
#### Typography
- Added: new variant **nano**
#### Modal
- Added: `description` prop in header
- Added: `initialFocusRef` and `finalFocusRef` to programmatically add focus to
custom components.
- Added: `blockScrollOnMount` prop to enable/disable body scrolling when the
modal opens.
- Added: focus trapping to focusable elements in Modal.
#### Sidebar
- Removed: **BREAKING** `footerLinks` props
- Removed: **BREAKING** `isCollapsed` prop and **expanded state** of sidebar
## 3.5.17 - 2022-08-25
- Fixed: false positive type errors for tooltip
## 3.5.16 - 2022-08-17
- Changed: avoided showing duplicate toastr when called multiple times with the
same arguments.
## 3.5.15 - 2022-08-05
- Fixed: Fixed false positive ts errors which were thrown since some of the
fields were not marked optional.
## 3.5.14 - 2022-08-01
- Added: neetoTestify and neetoSite to AppSwitcher
## 3.5.13 - 2022-07-28
- Added: type support for all exported components. IDE will now auto-predict the
component props.
- Changed: Deprecated babel-eslint was replaced with @babel/eslint-parser
## 3.5.12 - 2022-07-25
- Security: Bump moment from 2.29.3 to 2.29.4
## 3.5.11 - 2022-07-06
- Added: a *Button* component in neetoui/formik that automatically disables
itself if the form is not in a submittable state. Example: the form contains
any invalid data, the form content has not been changed, or the form is
already being submitted. To make this work, you need to import *Button* from
"neetoui/formik" as your submit button.
- Changed: *ActionBlock* will now use the above-mentioned logic internally. So
its submit/cancel buttons will also be automatically enabled or disabled.
## 3.5.10 - 2022-07-05
- Fixed: issue with closeOnEsc prop when the Pane is controlled.
## 3.5.9 - 2022-07-05
- Fixed: Checkbox in *Table* component cut off in lower screen resolutions.
## 3.5.8 - 2022-07-01
- Fixed: Error when handling `axios` error objects with `undefined` response in
`Toastr.error`
## 3.5.7 - 2022-06-24
- Added: `startsFrom` to `counter` prop of *EmailInput* component.
## 3.5.6 - 2022-06-13
- Fixed: Calendar icon overflowing under the clear icon in Date Range picker
## 3.5.5 - 2022-06-09
- Fixed: issue with `onClose` function reference when closing the *Modal* using
`Esc`.
## 3.5.4 - 2022-06-08
Fixed: `TypeError` issue in *Toastr* component.
## 3.5.3 - 2022-06-07
- Fixed: issue with `closeOnEsc` prop when the *Dropdown* is controlled.
## 3.5.2 - 2022-06-07
- Fixed : placeholder content extending into multiple lines in *Select*
component.
## 3.5.1 - 2022-06-07
- Fixed: `useInsertionEffect` export issue due to `terser` compression.
## 3.5.0 - 2022-05-25
- Changed: Replaced webpack with rollup for bundling the package.
## 3.4.6 - 2022-05-19
- Updated: `react-toastify` to `9.0.1`
## 3.4.4
- Fixed: import for molecule components.
## 3.4.3
- Added: `prefix` and `suffix` to *EmailInput*.
## 3.4.2
- Fixed: issue with search not working with `isCreatable` *Select*.
## 3.4.1
- Fixed: issue with `autoFocus` not working on *Input* when inside *Dropdown*.
## 3.4.0
- Removed: all instances of TailwindCSS.
- Added: `label` prop in *Tags* molecule.
- Changed: Added `neetoCal` into *AppSwitcher* app list .
- Removed: `count` limiting (to 99) logic from *MenuBar.Block*.
## 3.3.13
- Added: Tags in the molecule section.
## 3.3.12
- Fixed: loading state in *ActionBlock* component.
## 3.3.11
- Added: New input format for the *EmailInput* component.
## 3.3.10
- Fixed: Removed unnecessary scrollbar in *Table* component.
- Added: `maxHeight` prop to the *EmailInput* component.
## 3.3.9
- Fixed: *ActionDropdown* issues with common props for button and dropdown
## 3.3.7
- Changed: Updated React version to 17.0.2.
## 3.3.6
- Fixed: Reset Formik data on continue action in *BlockNavigation* component.
## 3.3.5
- Added: active state to `NavLink` in *Sidebar* component.
## 3.3.4
- Added: `hideOnTargetExit` prop to *Tooltip* component
## 3.3.3
- Added: data-cy for in *Alert* component elements
## 3.3.2
- Fixed: Added override for `onClick` prop in *Dropdown* component
## 3.3.1
- Fixed: Typography of Header in *Alert* component.
- Fixed: Max width issue in *Dropdown* component.
## 3.3.0
- Changed: **BREAKING** `isLoading` prop of *Table* to `loading`.
- Changed: Implemented *Dropdown* component with Tippy.js and removed
`react-popper`
- Deprecated: **BREAKING** `loading` prop of *Pane*, *Modal* and *Alert*
components.
- Removed: **BREAKING** `placement` prop from *Tooltip* (Use position instead).
#### UI
- Changed: colors of `$neeto-ui-warning` and `$neeto-ui-error` in *Color
Palette*
- Changed: the text color in *Table* to `$neeto-ui-black`
- Changed: UI of *Tag* of component
- Changed: look and feel of *Danger Button*
- Changed: Contrast of *Avatar*, *Accordian*, *Toastr* and *Callout*
- Changed: Made *Modal* Header text and Close icon aligned in a line
- Added: new variant for *Danger Button* -`danger-text`
- Added: new accent colors
- 