@pingux/astro 2.133.0 → 2.134.0-alpha.1

package/lib/cjs/components/Box/Box.styles.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
     indeterminateCheckboxIcon: {
         width: string;
         height: string;
+        borderRadius: string;
         '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
             fill: string;
             stroke: string;
@@ -15,6 +16,9 @@ declare const _default: {
                 stroke: string;
             };
         };
+        '&.is-focused': {
+            boxShadow: string;
+        };
     };
 };
 export default _default;

package/lib/cjs/components/Box/Box.styles.js

@@ -5,12 +5,14 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _colors = require("../../styles/colors");
 var base = {
   display: 'flex'
 };
 var indeterminateCheckboxIcon = {
   width: '24px',
   height: '24px',
+  borderRadius: '4px',
   '& rect[id="indeterminate-checkbox-icon-wrapper"]': {
     fill: 'active',
     stroke: 'active'
@@ -20,6 +22,9 @@ var indeterminateCheckboxIcon = {
       fill: 'neutral.80',
       stroke: 'neutral.80'
     }
+  },
+  '&.is-focused': {
+    boxShadow: "inset 0px 0px 0px 1px ".concat(_colors.focus)
   }
 };
 var _default = {

package/lib/cjs/components/IconButton/IconButton.styles.d.ts

@@ -722,5 +722,46 @@ declare const _default: {
         cursor: string;
         p: string;
     };
+    clearSelectionButton: {
+        width: string;
+        height: string;
+        position: string;
+        right: string;
+        top: string;
+        bg: string;
+        '.is-float-label &': {
+            top: string;
+        };
+        justifyContent: string;
+        appearance: string;
+        alignItems: string;
+        alignSelf: string;
+        display: string;
+        flexGrow: number;
+        flexShrink: number;
+        borderRadius: string;
+        cursor: string;
+        p: string;
+        path: {
+            fill: string;
+        };
+        outline: string;
+        '&.is-focused': {
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        '&.is-hovered': {
+            bg: string;
+            boxShadow: string;
+        };
+        '&.is-pressed': {
+            path: {
+                fill: string;
+            };
+            bg: string;
+            boxShadow: string;
+        };
+    };
 };
 export default _default;

package/lib/cjs/components/IconButton/IconButton.styles.js

@@ -14,6 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.square = exports["default"] = exports.base = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _tShirtSizes = _interopRequireDefault(require("../../styles/themes/astro/customProperties/tShirtSizes"));
 var _Badge = require("../Badge/Badge.styles");
 var _Buttons = require("../Button/Buttons.styles");
 var _CollapsiblePanel = require("../CollapsiblePanel/CollapsiblePanel.styles");
@@ -147,6 +148,17 @@ var searchClearButton = _objectSpread(_objectSpread({}, base), {}, {
   position: 'absolute',
   right: 10
 });
+var clearSelectionButton = _objectSpread(_objectSpread({}, base), {}, {
+  width: _tShirtSizes["default"].md,
+  height: _tShirtSizes["default"].md,
+  position: 'absolute',
+  right: '15px',
+  top: '7px',
+  bg: 'white',
+  '.is-float-label &': {
+    top: '9px'
+  }
+});
 var filter = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'white',
   border: '1px solid',
@@ -196,6 +208,7 @@ var _default = {
   applicationPortal: applicationPortal,
   applicationPortalPinned: applicationPortalPinned,
   searchClearButton: searchClearButton,
-  filter: filter
+  filter: filter,
+  clearSelectionButton: clearSelectionButton
 };
 exports["default"] = _default;

package/lib/cjs/components/ListBox/Option.js

@@ -19,6 +19,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _CheckIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckIcon"));
 var _CircleSmallIcon = _interopRequireDefault(require("@pingux/mdi-react/CircleSmallIcon"));
 var _listbox = require("@react-aria/listbox");
 var _MultivaluesContext = require("../../context/MultivaluesContext");
@@ -99,6 +100,8 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       state.selectionManager.setFocusedKey(item.key);
     }
   };
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(null, {
       isDisabled: isDisabled || isSeparator,
       isFocused: focused,
@@ -139,12 +142,18 @@ var Option = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     mr: "xs",
     className: classNames,
     variant: "listBox.checkboxIcon"
-  }) : isSelected && (0, _react2.jsx)(_Icon["default"], {
+  }) : isSelected && !isOnyx && (0, _react2.jsx)(_Icon["default"], {
     icon: _CircleSmallIcon["default"],
     title: {
       name: 'Circle Small Icon'
     }
-  }), rendered);
+  }), rendered, isSelected && isOnyx && (0, _react2.jsx)(_Icon["default"], {
+    icon: _CheckIcon["default"],
+    title: {
+      name: 'Check Icon'
+    },
+    color: "green-500"
+  }));
 });
 var _default = Option;
 exports["default"] = _default;

package/lib/cjs/components/SelectField/SelectField.stories.d.ts

@@ -57,3 +57,4 @@ export declare const DynamicItems: {
 export declare const AsyncLoading: () => React.JSX.Element;
 export declare const WithoutStatusIndicator: (args: any) => React.JSX.Element;
 export declare const WithHelpHint: (args: any) => React.JSX.Element;
+export declare const WithClearButton: (args: any) => React.JSX.Element;

package/lib/cjs/components/SelectField/SelectField.stories.js

@@ -21,7 +21,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithoutStatusIndicator = exports.WithSlots = exports.WithSections = exports.WithNoneOption = exports.WithHelpHint = exports.WithCustomHeight = exports.NoOptionsAvailable = exports.HelperText = exports.FloatLabel = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
+exports["default"] = exports.WithoutStatusIndicator = exports.WithSlots = exports.WithSections = exports.WithNoneOption = exports.WithHelpHint = exports.WithCustomHeight = exports.WithClearButton = exports.NoOptionsAvailable = exports.HelperText = exports.FloatLabel = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -484,4 +484,24 @@ var WithHelpHint = function WithHelpHint(args) {
     key: "yellow"
   }, "Yellow")));
 };
-exports.WithHelpHint = WithHelpHint;
+exports.WithHelpHint = WithHelpHint;
+var WithClearButton = function WithClearButton(args) {
+  var _useState5 = (0, _react.useState)('red'),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    selectedKey = _useState6[0],
+    setSelectedKey = _useState6[1];
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, args, {
+    width: "100%",
+    label: "What's your favorite color?",
+    hasClearButton: true,
+    selectedKey: selectedKey,
+    onSelectionChange: setSelectedKey
+  }), (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
+exports.WithClearButton = WithClearButton;

package/lib/cjs/components/SelectField/SelectField.test.js

@@ -194,4 +194,15 @@ test('should show hintText text if prop is passed', function () {
   _testWrapper.fireEvent.mouseMove(helpHintButton);
   _testWrapper.fireEvent.mouseEnter(helpHintButton);
   expect(_testWrapper.screen.getByText(hintText)).toBeInTheDocument();
+});
+test('should have clear button if hasClearButton prop is true', function () {
+  getComponent({
+    selectedKey: 'a',
+    hasClearButton: true,
+    clearButtonProps: {
+      'data-testid': 'clear-button'
+    }
+  });
+  var clearButton = _testWrapper.screen.getByTestId('clear-button');
+  expect(clearButton).toBeInTheDocument();
 });

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -19,21 +19,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
 var _uuid = require("uuid");
+var _ = require("../..");
 var _useGetTheme2 = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _labelModes = require("../../utils/devUtils/constants/labelModes");
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _Box = _interopRequireDefault(require("../Box"));
-var _Button = _interopRequireDefault(require("../Button"));
-var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _Label = _interopRequireDefault(require("../Label"));
-var _Loader = _interopRequireDefault(require("../Loader"));
-var _Text = _interopRequireDefault(require("../Text"));
 var _HiddenSelect = require("./HiddenSelect");
 var _react2 = require("@emotion/react");
-var _excluded = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlInputProps", "fieldControlWrapperProps", "fieldLabelProps", "helperText", "isLoadingInitial", "isDisabled", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps", "selectProps"];
+var _excluded = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlInputProps", "fieldControlWrapperProps", "fieldLabelProps", "helperText", "isLoadingInitial", "isDisabled", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps", "selectProps", "hasClearButton", "clearButtonProps", "onClear"];
 /**
  * Select field (dropdown) that does not rely on native browser or mobile implementations.
  *
@@ -68,6 +63,9 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     triggerRef = props.triggerRef,
     valueProps = props.valueProps,
     selectProps = props.selectProps,
+    hasClearButton = props.hasClearButton,
+    clearButtonProps = props.clearButtonProps,
+    onClear = props.onClear,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
     ariaProps = _getAriaAttributeProp.ariaProps;
@@ -78,44 +76,67 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var helperTextId = (0, _react.useMemo)(function () {
     return (0, _uuid.v4)();
   }, []);
-  var defaultTrigger = (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, fieldControlWrapperProps, {
+  var handleOnClear = function handleOnClear() {
+    if (onClear) {
+      onClear();
+    }
+    state.setSelectedKey(null);
+  };
+  var buttonRendered = !(hasClearButton && state.selectedKey) && (0, _react2.jsx)(_.Box, {
+    as: "span",
+    "aria-hidden": "true",
+    variant: "forms.select.arrow"
+  }, (0, _react2.jsx)(_.Icon, {
+    icon: state.isOpen ? MenuUp : MenuDown,
+    title: {
+      name: 'Menu down'
+    },
+    size: "md"
+  }));
+  var clearButton = hasClearButton && state.selectedKey && (0, _react2.jsx)(_.IconButton, (0, _extends2["default"])({
+    tabIndex: 0,
+    as: "span",
+    role: "button",
+    "aria-label": "Clear selection",
+    variant: "clearSelectionButton",
+    onPress: handleOnClear,
+    color: "text.secondary"
+  }, clearButtonProps), (0, _react2.jsx)(_.Icon, {
+    icon: _CloseIcon["default"],
+    title: {
+      name: 'Clear selection Icon'
+    }
+  }));
+  var defaultTrigger = (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    isRow: true
+  }, fieldControlWrapperProps, {
     variant: "forms.input.fieldControlWrapper"
-  }), (0, _react2.jsx)(_Button["default"], (0, _extends2["default"])({
+  }), (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     className: fieldControlInputProps.className,
     ref: triggerRef,
     variant: "forms.select"
   }, triggerProps, ariaProps, {
     "aria-describedby": helperText && helperTextId
-  }), slots === null || slots === void 0 ? void 0 : slots.leftOfData, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  }), slots === null || slots === void 0 ? void 0 : slots.leftOfData, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     as: "span",
     variant: "forms.select.currentValue"
-  }, valueProps), state.selectedItem ? state.selectedItem.rendered : (0, _react2.jsx)(_Text["default"], {
+  }, valueProps), state.selectedItem ? state.selectedItem.rendered : (0, _react2.jsx)(_.Text, {
     variant: "placeholder"
-  }, labelMode === _labelModes.modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && (0, _react2.jsx)(_Loader["default"], {
+  }, labelMode === _labelModes.modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && (0, _react2.jsx)(_.Loader, {
     variant: "loader.withinInput"
-  }), (0, _react2.jsx)(_Box["default"], {
-    as: "span",
-    "aria-hidden": "true",
-    variant: "forms.select.arrow"
-  }, (0, _react2.jsx)(_Icon["default"], {
-    icon: state.isOpen ? MenuUp : MenuDown,
-    title: {
-      name: 'Menu down'
-    },
-    size: "md"
-  }))), slots === null || slots === void 0 ? void 0 : slots.inContainer);
-  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  }), buttonRendered), clearButton, slots === null || slots === void 0 ? void 0 : slots.inContainer);
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     ref: ref,
     variant: "forms.input.fieldContainer"
   }, (0, _pendoID.getPendoID)('SelectField'), fieldContainerProps, {
     sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
-  }), (0, _react2.jsx)(_Label["default"], fieldLabelProps, label), (0, _react2.jsx)(_HiddenSelect.HiddenSelect, (0, _extends2["default"])({
+  }), (0, _react2.jsx)(_.Label, fieldLabelProps, label), (0, _react2.jsx)(_HiddenSelect.HiddenSelect, (0, _extends2["default"])({
     state: state,
     triggerRef: triggerRef,
     label: label,
     name: name,
     isDisabled: isDisabled
-  }, selectProps)), trigger || defaultTrigger, overlay, helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
+  }, selectProps)), trigger || defaultTrigger, overlay, helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status,
     id: helperTextId
   }, helperText));

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.test.js

@@ -51,6 +51,7 @@ var defaultProps = {
   value: testValue,
   items: items
 };
+var onClear = jest.fn();
 var SelectFieldWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useSelectField = (0, _hooks.useSelectField)(props, ref),
     selectFieldProps = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_useSelectField), _useSelectField));
@@ -436,4 +437,29 @@ test('popover closes on button blur', function () {
       }, item.name);
     });
   }
+});
+test('should have clear button if hasClearButton prop is true', function () {
+  getComponent({
+    selectedKey: 'a',
+    hasClearButton: true,
+    clearButtonProps: {
+      'data-testid': 'clear-button'
+    }
+  });
+  var clearButton = _testWrapper.screen.getByTestId('clear-button');
+  expect(clearButton).toBeInTheDocument();
+});
+test('should have call onClear function', function () {
+  getComponent({
+    selectedKey: 'a',
+    hasClearButton: true,
+    clearButtonProps: {
+      'data-testid': 'clear-button'
+    },
+    onClear: onClear
+  });
+  var clearButton = _testWrapper.screen.getByTestId('clear-button');
+  expect(clearButton).toBeInTheDocument();
+  _userEvent["default"].click(clearButton);
+  expect(onClear).toHaveBeenCalledTimes(1);
 });

package/lib/cjs/components/TableBase/TableBase.js

@@ -63,7 +63,6 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var bodyRef = (0, _react.useRef)(null);
   var collection = state.collection;
   var _useTable = (0, _table.useTable)(_objectSpread(_objectSpread({}, props), {}, {
-      'aria-describedby': props['aria-describedby'] || 'table-caption',
       scrollRef: bodyRef
     }), state, tableRef),
     gridProps = _useTable.gridProps;
@@ -105,8 +104,7 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     as: "caption",
     display: "table-caption",
     variant: "tableBase.caption",
-    textAlign: "left",
-    id: props['aria-describedby'] || 'table-caption'
+    textAlign: "left"
   }, caption), (0, _react2.jsx)(TableRowGroup, {
     type: "thead",
     hasCaption: !!caption,
@@ -133,7 +131,18 @@ var TableBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   })), (0, _react2.jsx)(TableRowGroup, (0, _extends2["default"])({
     ref: bodyRef,
     type: "tbody"
-  }, tableBodyProps), (0, _map["default"])(_context3 = (0, _from["default"])(collection)).call(_context3, function (row) {
+  }, tableBodyProps), collection.size === 0 && (0, _react2.jsx)(_.Box, {
+    role: "row",
+    key: "loading",
+    "data-testid": "loading",
+    as: "tr",
+    alignItems: "center",
+    justifyContent: "center",
+    px: "lg",
+    py: "md"
+  }, (0, _react2.jsx)(_.Loader, {
+    color: "active"
+  })), (0, _map["default"])(_context3 = (0, _from["default"])(collection)).call(_context3, function (row) {
     var _context4;
     return (0, _react2.jsx)(TableRow, {
       key: row.key,
@@ -195,6 +204,7 @@ function TableHeaderRow(props) {
   }), children);
 }
 function TableColumnHeader(props) {
+  var _column$props;
   var column = props.column,
     state = props.state,
     className = props.className,
@@ -207,19 +217,37 @@ function TableColumnHeader(props) {
   var _useFocusRing = (0, _focus.useFocusRing)(),
     isFocusVisible = _useFocusRing.isFocusVisible,
     focusProps = _useFocusRing.focusProps;
+  var allowsSorting = (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.allowsSorting;
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    icons = _useGetTheme.icons;
+  var Ascending = icons.Ascending,
+    Descending = icons.Descending;
+  var sortDescriptor = state.sortDescriptor;
+  var arrowIcon = (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.column) === column.key && (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.direction) === 'ascending' ? Ascending : Descending;
+  var sortIcon = (0, _react2.jsx)(_.Icon, {
+    icon: arrowIcon,
+    size: "xs",
+    "aria-hidden": "true",
+    title: {
+      name: (sortDescriptor === null || sortDescriptor === void 0 ? void 0 : sortDescriptor.direction) === 'ascending' ? 'Sort ascending' : 'Sort descending'
+    }
+  });
   var _useStatusClasses2 = (0, _hooks.useStatusClasses)(className, {
       isFocused: isFocusVisible
     }),
     classNames = _useStatusClasses2.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    isRow: true,
     ref: ref,
     as: "th",
     variant: "tableBase.head",
     className: classNames,
+    alignItems: "center",
     sx: _objectSpread({
+      gap: 'sm',
       width: layoutState === null || layoutState === void 0 ? void 0 : layoutState.getColumnWidth(column.key)
     }, column.props.sx)
-  }, (0, _utils.mergeProps)(columnHeaderProps, focusProps, column.props)), column.rendered);
+  }, (0, _utils.mergeProps)(columnHeaderProps, focusProps, column.props)), column.rendered, allowsSorting && sortIcon);
 }
 function TableRow(props) {
   var item = props.item,
@@ -232,6 +260,7 @@ function TableRow(props) {
     }, state, ref),
     rowProps = _useTableRow.rowProps;
   var isSelected = state.selectionManager.isSelected(item.key);
+  var isDisabled = state.disabledKeys.has(item.key);
   var _useFocusRing2 = (0, _focus.useFocusRing)(),
     isFocusVisible = _useFocusRing2.isFocusVisible,
     focusProps = _useFocusRing2.focusProps;
@@ -247,7 +276,8 @@ function TableRow(props) {
       isSelected: isSelected,
       isHovered: isHovered,
       isPressed: isPressed,
-      isFocused: isFocusVisible
+      isFocused: isFocusVisible,
+      isDisabled: isDisabled
     }),
     classNames = _useStatusClasses3.classNames;
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({

package/lib/cjs/components/TableBase/TableBase.stories.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StoryFn } from '@storybook/react';
 import { TableBaseProps } from '../../types/tableBase';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
@@ -6,3 +7,16 @@ export declare const Default: StoryFn<TableBaseProps<object>>;
 export declare const MultiSelection: StoryFn<TableBaseProps<object>>;
 export declare const WithStickyHeader: StoryFn<TableBaseProps<object>>;
 export declare const WithPagination: StoryFn<TableBaseProps<object>>;
+export declare const DynamicWithSorting: {
+    (): React.JSX.Element;
+    parameters: {
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};