@stenajs-webui/grid-export - npm Package Versions

15.0.0-alpha.6

DateTextInput

• Add minDate and maxDate props to DateTextInput.

15.0.0-alpha.5

Calendars

• TextInput now automatically changes iconLeft into a FlatButton if onClickLeft is set. Same for right side.
• Add common DateRange interface and DateStringRange interface, including transformers.

minDate and maxDate props

New props minDate and maxDate in Calendar and all calendar input components.

Both are optional, and both are strings in format 2021-11-23. If maxDate is not provided, 2999-12-31 is the default.

When set, all dates before (or after) will be disabled in the calendar.

Breaking changes

• Type DateRangeCalendarOnChangeValue has been removed. Use DateRange instead.
• DateRangeCalendar now uses value and onValueChange props, with DateRange as model, instead of setStartDate, etc.
• DateRangeInput now uses value and onValueChange props.

Heading and Text

• Added wordBreak prop.

Modal

• Modal has new prop footer. The footer is sticky by default, but can be turned off with disableStickyFooter.

15.0.0-alpha.4

• ChipMultiSelect and SimpleCheckboxListSection pass down section props to SearchFilterSection.

15.0.0-alpha.3

• ChipMultiSelectSection always fill full width of filter section.

15.0.0-alpha.2

Filter

• Add more missing export.

15.0.0-alpha.1

Filter

• Add missing export.

15.0.0-alpha.0

New package filter

This package contains new functionality, search filter.

It makes it easy to create a custom filter in a drawer, with a custom model for the search filter.

It also makes it easy to create an overview row containing chips.

Please see stories for an example.

New utils in core

• truthyKeysAsList, returns all keys that have a truthy value.
• PickByValue, a type that returns a new type with picked fields that match a type.

type StringFieldsOnUser = PickByValue<User, string>;

Select components

• Dependency react-select has been updated to v5.

14.2.0

Calendar

• Added hideYearPagination prop to hide year pagination arrows.

DateRangeDualTextInput

• Add calendarProps which will be passed along to the internal Calendar-component, and can be used to specify enabled dates and onDayClick callback.
• User can no longer select invalid date interval, instead the other date is cleared.

UseKeyboardNavigation / UseTextInput

• Add support for HTMLTextAreaElement through a generic element type.
• Fixed issue where onChange was called twice when pressing enter or the arrow keys.

ActionMenuItem and ActionMenuLink

• disableCloseOnClick is no longer forwarded to the DOM.

Icon

• Removed props hoverIcon and hoverColor.
• Removed unnecessary mouseover event listeners.
• Added ref prop.
• Added display prop so that you can e.g. display it inline.

Breaking changes

• Icon no longer has props hoverIcon and hoverColor.

14.1.1

Tag and Chip

• Labels can no longer wrap into multiple rows.

Drawer

• If content is too high, it is possible to scroll the content of the drawer.

ValueById-reducer

• Factory can now take initial state as argument.

14.1.0

StandardTable

• Added bannerError to StandardTable props and is prioritized before error property if given. Error is now displayed in a ResultListBanner.
• error and errorLabel are now displayed in a Banner.

Column configs now have onKeyDown option.

onKeyDown: (event, { item, columnId }) => {
  if (event.key === " ") {
    setActive(item, !item.active);
  }
},

Disable automatic focus highlight on cells

New column config: disableGridCellFocus

If this setting is enabled, the cell must add the focus highlight and onKeyDown on an element manually.

This makes it possible to let arrow navigation move focus to for example a checkbox in the cell, instead of the cell itself.

Example

Adding this is easy, just spread requiredProps from gridCell into the HTML element.

    active: createColumnConfig((item) => item.active, {
      disableGridCellFocus: true,
      renderCell: ({ item, gridCell: { requiredProps } }) => (
        <Indent>
          <Checkbox value={item.active} {...requiredProps} />
        </Indent>
      ),
    })