Changelog

Stay up to date with all of the latest additions and improvements we’ve made to Magenta.

@ocean-network-express/magenta-ui

1.19.0 <span className="badge primary">Upcoming</span>

<blockquote> Estimated Release: 26 - 31 January 2026 </blockquote>

New Components

  • Image
  • Non Modal Dialog

Enhancement

  • DateTimePicker: Second Selection Variant
  • TimePicker: Second Selection Variant

1.18.0 <span className="badge green">Latest</span>

Enhancement

  • Indicator: Add leftIcon and rightIcon to allow passing any icon from @ocean-network-express/magenta-react-icons (or any other ReactNode). The leftIcon and rightIcon props are rendered only when the boolean text prop is set to true.
  • Indicator: Add new size="responsive" prop value to support automatic resizing based on screen size
  • Radio: Enhance radio icon scaling across different resolutions and display scales
  • Search & Filter Area/ Save Filter: Improve active state of Saved Filter button
  • Select: Updates the order of selected items and keeps the dropdown menu visible after selection
  • Table Feature / Filtering & Sorting: Improve active state of Column Sort/Filter button

Fix Bugs

  • Autocomplete: Fixing an issue where clicking the delete button on a tag in Autocomplete with multiple={true} would submit the form
  • Tag: Adding type=button attribute to the delete button of each tag to prevent form submission when the delete button is clicked

1.17.3

Fix Bugs

  • Avatar: Wrong background color of default avatar
  • ButtonGroup: Wrong style of outline border in focus state
  • Breadcrumb: BreadcrumbItemValueProps type is missing export in main entry point

Deprecated

  • Select, Autocomplete, SearchInput, Popover, Dropdown Menu, Tooltip: Using dropdownConfig.placement instead. placement prop will be removed in the next major version.

1.17.2

New Examples

  • CompactWrapper: Select & TagsInput layout
  • Carousel: AutoWidth

Enhancements

  • Carousel: Slide to scroll behavior corrected when resize window
  • Carousel: Add auto value for slidesToScroll prop
  • Table / Data Table / Basic CRUD / Row Editing / Pagination Behavior: Adjusting current page when out of bounds
  • Table Feature / Expandable: Update collapse & expand icon button size
  • Table Feature / Filtering & Sorting: Update tooltip content
  • Textarea: Fixed resizing so it does not exceed container boundary

Fix Bugs

  • Autocomplete, Select, Input: Click clearable icon trigger submit form event
  • Dialog, Drawer: Wrong height of header and style of icon button
  • NumberInput: The number is increased/decreased continuously when clicking "Select an element to inspect it" icon
  • TabGroup: Can't close TabColorPicker by clicking on button
  • TabGroup: Indicator Color Selection disappears when clicking between two color options
  • Tabs: Can't focus on Tab

1.17.1

Fix Bugs

  • Autocomplete: Can not delete the first character on Controlled Input Value

1.17.0

New Components

  • TabGroup: Initial release
  • Timeline: Initial release

New Examples

  • NumberInput: Number Range Input with Validation

Enhancements

  • Autocomplete: Configuration to hide clearable icon
  • List: ListItem update main text font-weight
  • Select: Custom single select rendering
  • Select: Add Loading State
  • Tabs: Update Interactive States

Fix Bugs

  • Select, Menu, Autocomplete: "Select All" shows as Unchecked state although all options are checked
  • Select, Menu: The height of tag, the style of "clearable" icon button, the font weight of selected tag and "Select All" checkbox are incorrect

1.16.1

New Examples

  • Table / Data Table / Basis CRUD / Row Editing / Pagination Behavior: Pagination behavior in empty data
  • TagsInput: Enter to Search, Editable Entered Tags

Enhancements

  • Table Feature / Columns Customization / Setting Menu, Table Feature / Columns Pinning: Update Column Show/Hide button icon
  • Autocomplete: Clear Input text remove the selected value
  • Autocomplete, SearchInput, Menu: Update default empty state
  • Input: Add labelAlignment prop
  • Pattern / Search & Filter Area / Save Filter: Add max character rule for saved filter and enhance UI
  • SearchInput, TagsInput: Disable when loading state
  • Input, Autocomplete, NumberInput, SearchInput, Select, TagsInput, Textarea: Update states for disable & readonly
  • Drawer, Dialog: Update Header Structure, Close Icon Button
  • Menu, Popover, Tooltip, Autocomplete, SearchInput, Select: Enhance dropdownConfig prop to support strategy for dropdown menu
  • TagsInput: Can custom key handling in onKeyDown prop

Fix Bugs

  • Button: Missing configuration of prop "component" on Playground to render a button as a link
  • Autocomplete, TagsInput, SearchInput, Select: Wrong style of Clearable icon at size lg, md
  • Autocomplete: Wrong select when use keyboard selection in Select All example
  • Pattern / Search & Filter Area / Expandable: Border of Fields are disappeared when zooming out
  • Stepper: Wrong spacing between steps with icon when type = Number
  • Table Feature/Columns Customization, Table Feature/Columns Pinning: Wrong color of inline feedback
  • TagsInput: Can NOT create a new Tag by Enter button and wrong behavior when using Ctrl+c, Ctrl+v to create a new Tag
  • Select: Allow the user to select an option by typing its first character
  • Pattern / Search & Filter Area / Save Filter: Change Selected filter when inputting "space" in Saved Filter Editable mode

Security Dependency Updates

1.16.0

New Components

  • Shortcut: Initial release.

New Examples

  • Autocomplete: Select All example.
  • Menu: Searchable with Select All example.
  • Select: Searchable with Select All example.

Enhancements

  • Autocomplete, Select: Improve smooth transition of the dropdown list.
  • DataTable / Basic CRUD / Row Editing / Row Editing with Buttons: Update action button styles.
  • Popover: Enhance example Controlled Popover.
  • NumberInput: Remove example custom icons: Yen(¥).
  • Tabs: Add new prop destroyOnHidden: Whether to destroy inactive TabPanel when changing tabs.
  • Foundations/Border Radius: Update value of token --mag-radii-full to 9999px.
  • Textarea: Add document Rule for Character Count.
  • Data Table/Validation/Error Handling: Improve error handling example for clarity and accuracy.
  • TagsInput: Add new prop removeDuplicateTags to controls whether duplicate tags are removed when deleting a tag.
  • Autocomplete, Select, SearchInput: Add new prop dropdownConfig to customize the dropdown menu.

Fix Bugs

  • Alert, Banner, Toast: Fixed the alert close timer dependency to ensure alerts close as expected.
  • Table Feature / Column Ordering: Fixed an issue where the header misalignment with content columns.
  • Indicator: Fixed the text color of the badge in different colors.
  • NumberInput: Fixed the placement of label when used with prop labelAlignment='left'.
  • Pagination: Fixed the color of pagination item.
  • Pagination: Update logic in example - set default selected page is 1.
  • List: Removed CSS font-weight styling for the state 'active' in ListItem.
  • Foundation: Update section name "Border" to "Border radius".
  • Table Feature / Columns Customization / Setting Menu / Nested Grouped Columns: Update fill color when drag icon is disabled.
  • FormCheck: Removed padding properties and adjusted gap values in FormCheck recipe variants.
  • Breadcrumb: Fixed width of the separator.
  • Tabs: Fixed a bug where an unknown line appeared next to the selected tab on Windows.

Security Dependency Updates

1.15.2

Fix Bugs

  • Select: Enhance dropdownConfig prop to support paddingContent for dropdown menu

1.15.1

Enhancements

  • Pattern/ Layout & Navigation/ PageHeader, Pattern/ Search & Filter Area: Update bottom line for examples
  • Content: Update new format for Number document
  • Breadcrumb: Props to custom last link state

Fix Bugs

  • Autocomplete, Input, SearchInput, Select, TagsInput, Textarea, Toggle: Increase spacing between the Label and the asterisk icon
  • Autocomplete, Input, SearchInput, Select, TagsInput, Textarea, Toggle: Update label with responsive props for icon inside it
  • Autocomplete, TagsInput: Should prevent user from clearing / pasting data at readOnly and disabled mode
  • Content: Numbers wrong Abbreviation Guideline of Month
  • Checkbox: Wrong letter-spacing
  • Checkbox: Enhance disabled state style
  • Table: ColumnSorting - Wrong behavior of Tooltip
  • TextArea: Enhance background color at readOnly mode
  • Typography: Enhance Text component with children prop
  • InlineEdit, Textarea: integrate with livecode rerender when props change

1.15.0

New Examples

  • Data Table: Pin Column from overflow menu
  • Form Pattern: Document
  • Form Pattern: Multi-Step Form Example

New Components

  • Inline Edit

Enhancements

  • Menu: Search Box in the Menu can not input the value when focusing

Fix Bugs

  • DateRangerPicker: There are visible gaps between the selected date range
  • Textarea: Don't fit the height of the container

1.14.3

Enhancements

  • TagsInput: Provide onFocusIn and onFocusOut props to handle focused in and blurred out of component events.
  • DateRangePicker: Provide rangeIcon prop to display icon in the middle of 2 date input field.
  • DateRangePicker: Update default rangeIcon is ~.
  • FeedbackMessage, Toast, Banner, Alert: Update close icon button.
  • FeedbackMessage, Toast, Banner, Alert: Enhanced title, message, and helperText props now support type React.ReactNode.
  • FeedbackMessage, Toast, Banner, Alert: Add new prop size to change size of components.
  • ButtonGroup: Add loading state example.

Fix bugs

  • CompactWrapper: Fixed outline style of Input component.

1.14.2

Enhancements

  • Menu, List: New active state for ListItem and MenuItem components.

1.14.1

New Examples

  • Input: Activation Checkbox with Input

Enhancements

  • Autocomplete: Add name prop as name attribute of input element in Autocomplete component.
  • Select: Add new prop onFocusOut to handle event when user focus to any element of out scope of Select component.
  • DateRangePicker: Add new prop transformInvalidValue to prevents transforming the invalid input value format to a date.
  • TimePicker: Add new prop onCalendarClick to handle click on Calendar icon event.
  • Drawer: Add new prop returnFocus allow return focus to trigger element when close Drawer.
  • Drawer: Enhance the overlay prop to turn off the overlay element to allow interaction with elements that are outside of the drawer.
  • Basic Table: Enhance Nested Header example.

Fix bugs

  • Autocomplete: Corrected behavior when displaying the number of limited tags.
  • Select: Corrected behavior when displaying the number of limited tags.
  • Select: Stabilized the tags content with limit tags number when close menu option by click esc key.
  • Input: Fixed disabled state when hover.
  • TextArea: Fixed character count number.
  • Menu: Corrected selected state.

1.14.0

New Components

  • CompactWrapper: Initial release.

New Examples

  • Table: Column Ordering - Includes drag-and-drop functionality.
  • Table: Column Resizable - Example showcasing resizable columns.
  • Table: Grouped & Nested Column Ordering - Demonstrates drag-and-drop for grouped/nested columns.
  • Table: Customize Column Menu - Demonstrates grouped/nested column ordering.
  • Pattern / Search & Filter Area: Initial release.
  • Pattern / Search & Filter Area: Saved Filter - Initial release.
  • Pattern / Layout & Navigation / PageHeader: Initial release.

Enhancements

  • IconButton: Introduced a new icon button size for improved usability.
  • Menu: Added a caret indicator for branched menus in the Menu component.
  • Autocomplete: Implemented "Creatable" behavior for the Autocomplete component.

Fix bugs

  • Table: Addressed the issue where a block icon displayed when dragging and dropping a parent column into a valid position.
  • Menu: Stabilized the hover state of filter items in the menu.
  • Select: Resolved an issue where the ghost variant of the Select component could not be displayed.
  • Dialog: Corrected font size and color inconsistencies in dialog examples.

1.13.2

New examples

  • Autocomplete: Implement case Re-order ListItem Example
  • TextEditor: Fix selected (highlighted) text when out focus

Enhancements

  • Textarea: Implement renderHelperType prop to render helper text with different types
  • TreeView: Enhance TreeViewItem with semibold font weight
  • Breadcrumb: Update Active/ Visited State
  • Breadcrumb: Improve spacing between items
  • Breadcrumb: Implement responsive value with size prop

Fix bugs

  • Table: Separator of Table Column header is disappeared
  • Table: Pagination in Table does not work correctly
  • NumberInput: Update USD to be KGS in the README.md
  • Input: Update color of Warning Icon in Storybook

1.13.1

New examples

  • Getting Started Document: Update guidelines for GitHub internal packages setup - How to install MDS packages?
  • TagsInput: Add examples for loading state

Enhancements

  • Autocomplete, Selection, SearchInput: implement placement prop for config the dropdown placement
  • Autocomplete, Selection, SearchInput: enhance dropdownConfig prop for config the padding of dropdown
  • Table: Alignment for sorted and unsorted column
  • TreeView: Update selected state for single and multiple selection

Fix bugs

  • Autocomplete, TagsInput, Select: Disabled state is not correct
  • Autocomplete: Removed Min-height for large size
  • TreeView: Selected state disappears when collapse and expand parent node

1.13.0

New components

  • TreeView: Initial Release

New examples

  • Table: Show & Hide Columns, Grouped & Nested Columns

Enhancements

  • TagsInput: Component support for validation input value before adding a tag by prop validateTag and control input value by 2 props inputValue, onInputValueChange.

1.12.4

Enhancements

  • Autocomplete, Select, SearchInput: Custom max & min with height & width for the dropdown list

1.12.3

Enhancements

  • Autocomplete: onOpenChange only called one time when clicking open
  • Checkbox: Enhance behaviour when combined indeterminate and checked

Fix bugs

  • Autocomplete: Click on arrow icon will close the dropdown
  • Button, IconButton: Loading state not working properly with fill variant

1.12.2

Updated dependencies

  • @ocean-network-express/magenta-react-icons@1.6.2

1.12.1

New examples

  • Drawer, Dialog: enhance document guidelines and examples for How to have Typography auto responsive by **break-points** ?

Enhancements

  • Avatar, Textarea, Segmented, ProgressBar, Menu, Tabs, Stepper, Toast, Alert, Banner, BaseBanner, FeedbackMessages: component now support auto resize by break-points by prop size=‘responsive’

1.12.0

New components

  • SearchInput: Initial release

New examples

  • Table, UX Writing: CRUD Initial release

Enhancements

  • Spinner: Enhance the spinner color to Magenta

1.11.3

Enhancements

  • Accordion: remove delay when click collapse/expand.
  • Dialog: implement initialFocus prop.

1.11.2

Enhancements

  • Autocomplete, Select: Dropdown menu will be removed min-width style

Fix bugs

  • Autocomplete: Component Crash when switch multiple prop on/off
  • Autocomplete: Enhance controlled open and onOpenChange prop

1.11.1

Enhancements

  • NumberInput: Arrow Up/Down button now have better UX
  • Accordion: Enhance hover state color

Fix bugs

  • Autocomplete: Arrow icon now can trigger open and close action
  • AutoComplete: Focus state will not show in menu items when user inputting
  • Autocomplete: Fix control open prop not working
  • ButtonGroup: Enhance md size component style
  • Radio: Fix sizes component style

1.11.0

Enhancements

  • Autocomplete, Accordions, Button, Checkbox, Select, NumberInput, TagInput, IconButton, Icon, Input, Tooltip, Table, Pagination: component now support auto resize by break-points by prop size=‘responsive’
  • Autocomplete, Accordions, Button, Input, NumberInput, TextArea, TagsInput, Tabs, Segmented, Select, Pagination: Enhance size style with sm | md type
  • Autocomplete: Implement renderDropdownWhenEmpty prop to custom render dropdown when input is empty
  • Menu: Implement CollapsibleMenuItem component to support collapsible menu item

1.10.3

Enhancements

  • Checkbox, Select, Table: Enhance select/unselect all pattern
  • Select: Component now have cursor pointer style on the trigger
  • Table: Enhance FixedColumn guideline to show/hide the shadow when scrolling
  • Table: New guideline for collapse/expanded all on the header use-case
  • Tabs: TabListItem component have deletable prop to toggle the delete button
  • Tooltip: Enhance component position when using with Table, Accordion, and Collapse

Fix bugs

  • Accordion, Collapse: The components now support change the height more user-friendly,

1.10.2

Enhancements

  • Tooltip: Now we support size prop with sm | md | lg type, Enhance tooltip background-color
  • Changelog: Now all components have their own changelog tab in the documentation
  • Autocomplete, Select, TagsInput: renderSelectedItems prop now supports render function to render selected items
  • Autocomplete, Select, TagsInput: limitTagsIdle prop now supports boolean type to disabled show/hide tags when idle (active/inactive)

Fix bugs

  • Table: Tr component now supports withRightBorder prop for add right border to the last table header cell
  • Table: Enhance haft prop name to half prop name
  • ProgressBar: Enhance error color to red.600

1.10.1

Enhancements

  • ButtonGroup: Enhance disabled style
  • Autocomplete: Enhance search behavior, Enhance A11y for keyboard interaction
  • Avatar: Implement 2xs sizes prop
  • Select: Enhance document with customize Tag colors

Fix bugs

  • AutoComplete: Component not show Group Name
  • Menu: MenuItem component alignment top top-align
  • ButtonGroup: Enhance style with disabled prop
  • Select: Enhance Select All example with Checkbox

1.10.0

New foundation

  • Z-index system: Initial release

New examples

  • Getting Started Document: Update guidelines for GitHub private packages setup

Enhancements

  • Tabs: TabListItem component have deletable prop to toggle the delete button
  • AvatarGroup: Support to working with <form /> element
  • Autocomplete, TagsInput: Enhance clear button function
  • Button: Support Button on dark background color
  • Dialog: Enhance title spacing
  • Toast: Enhance color style
  • Textarea: Enhance style without helperText
  • TagsInput: Fix bug logic with limitedTag
  • Tabs: Update scrolling behavior for overflow TabList
  • Tooltip: Update example of Usage page
  • Select: Support render multi colors Tags
  • Indicator: Support to render with long text and multiple colors badge

1.9.2

Enhancements

  • NumberInput: Enhance outline style
  • Input: Update min-width style
  • Menu: Improve accessibility focus behavior with keyboard and mouse

1.9.1

Enhancements

  • Textarea: Enhance outline style of Textarea

1.9.0

New components

  • Carousel: Initial release

Enhancements

  • Tooltip: Implement dark background and enhance document usage
  • Button: Implement Floating Action Button
  • Dialog: Enhance for supporting responsive layout
  • Toast: Enhance prefix icon style
  • Autocomplete, Select, Number Input, Textarea, Input and Tags Input: Enhance spacing and outline style of inputs component
  • Drawer: Enhance Drawer Header padding
  • Autocomplete: Refactoring Autocomplete component

1.8.2

Enhancements

  • TagsInput: Update the behavior for limitedTag

1.8.1

Enhancements

  • Autocomplete: Fix close tag closing multiple tags
  • Toast: Fix icons alignment
  • Table: Update filter/sort with grouping and icons

1.8.0

New components

  • Tabs, Drawer, Segmented : Initial release

New examples

  • Table: Expand/Collapse

  • Table: Click on the header cell to trigger Sorting

  • Indicator: Enhance document with other components

  • Autocomplete: Enhance document with group list

Enhancements

  • Indicator: component now supports inline-style
  • Input: component have new padding
  • Popover: component support auto-placement when not enough spacing to show
  • Table: component support better with Fixed Columns
  • Autocomplete: component is disabled with keyboard interaction, enhance behavior of limited tag

1.7.0

New components

  • Toast, Alert, Banner, BaseBanner, FeedbackMessages, ProgressBar, Breadcrumb: Initial release

New examples

  • Table: Row selection
  • Table: Enable edit, Toolbar, and Bulk actions
  • Avatar: Enhance document with Tooltip component
  • Select: Implement document for Select All option with Checkbox

Enhancements

  • AvatarGroup: component will have overflow button to show more avatars
  • ListItem: Correct color of Icon in component
  • Text: Correct breakpoints resize for Typography
  • Indicator: component will have four different sizes xs, sm, md, lg

1.6.0

New components

  • TagsInput: Initial release

New examples

  • Menu: Searchable example
  • Table: Sort and Filter
  • Table: Fixed (Sticky) header

Enhancements

  • DialogHeader: Correct color style
  • Autocomplete: Update search behavior
  • Select: Correct letter-spacing style of typography

1.5.1

Enhancements

  • Table: Enhancement Th and Td components props
  • Tooltip: Enhancement with auto placement
  • Tag: Correct text color in component

1.5.0

New components

  • Table: Table Basic
  • Menu, Accordion, Collapse, Pagination: Initial release

Enhancements

  • Autocomplete: Implement debounce to useAutocomplete hooks
  • Stepper: Update with grid layout

1.4.1

Enhancements

  • Scrollbar: Consistent scrollbar for multiple browsers (exclude Firefox on Windows)
  • Textarea: Correct white-space of Textarea component
  • Autocomplete: Return focus to input element of Autocomplete after selecting, Set min-width for input element of Autocomplete

1.4.0

New components

  • Dialog, Indicator, Stepper, Tooltip: Initial release

Enhancements

  • Autocomplete, Input, NumberInput, Select: Implement inline validation
  • Spinner: Enhance to 6 sizes - sm, md, lg, xl, 2xl, 3xl
  • Avatar: Enhance styles, Able to set background color
  • Input: Enhancement CSS component to support multiple elements on left/right content.
  • Autocomplete, Select: Update a11y

1.3.1

Enhancements

  • Select, Autocomplete: update transition when open
  • Select, Autocomplete: Add returnFocus props
  • Popover: Return focus onClose made UI uncontrollable
  • Select: Multiple tag styles, Update logic fullWidth prop

1.3.0

New components

  • Popover, ButtonGroup, Toggle: Initial release

Enhancements

  • Tag: Add TagContent component, add multiline prop
  • List: Disabled not working on ListItem interaction
  • IconButton: update padding style
  • Select, Autocomplete: menus to have a maximum available height

1.2.3

Enhancements

  • Autocomplete: Enhance delete all button, filtered with special characters, Support more inputValue and onInputValueChange props
  • Input: Update readonly style and document Usage
  • Select: Error when controlling the open state

1.2.2

Enhancements

  • Patch: Fix regressions on icons

1.2.1

Enhancements

  • Autocomplete: Prevent autocomplete input's value being submitted

1.2.0

New components

  • Autocomplete, NumberInput, Avatar: Initial release

Enhancements

  • Shadow: Update tokens
  • Select: Supports selecting multiple items
  • ListItem: Document now has usage example with Avatar
  • Tag: Improve documentation

Breaking Changes

  • Select: value now has type string[] instead of string

1.1.0

Minor Changes

  • List, Select, Tag: Initial release
  • A11Y: Optimize A11Y of several components
  • Form: New Success, Warning states for form components
  • Styling: Optimize outline and focus styling

1.0.4

Enhancements

  • fix: remove private browserslist config from package.json

1.0.3

Breaking Changes

  • fix: This is a small and intended breaking change to unify API surface:

Enhancements

  • Button: update spinner class to have the same format as other components
  • Textarea: forward required attribute to textarea
  • Input: optimize CSS
  • feat: update patch pandacss version

1.0.2

Enhancements

  • feat: optimize class names

1.0.1

Enhancements

  • chore: update showcase

1.0.0

Components

  • Button, Input, Textarea, Checkbox, Radio, Divider, Text, Link, Spinner, IconButton, Icons: Initial release

Foundations

  • Borders, Colors, Elevations & Shadow, Screens, Spacing, Typography: Initial release

Was this page helpful?