@digigov/ui 2.0.0-0edebf87 → 2.0.0-107d908d

package/navigation/Pagination/index.d.ts

@@ -1,45 +1,8 @@
-import React from 'react';
-import Pagination from '@digigov/react-core/Pagination';
-import PaginationLabelContainer, { PaginationLabelContainerProps } from '@digigov/react-core/PaginationLabelContainer';
-import { LabelContainerProps } from '@digigov/ui/form/LabelContainer';
+import Pagination from '@digigov/ui/navigation/Pagination/Pagination';
 export default Pagination;
-export interface PaginationLabelProps extends PaginationLabelContainerProps {
-    /**
-     * Use start to set the value of the start point of the results shown.
-     */
-    start: number;
-    /**
-     * Use end to set the value of the end point of the results shown.
-     */
-    end: number;
-    /**
-     * Use total to set the value of the total results.
-     */
-    total: number;
-}
-export interface PaginationResultsPerPageSelectProps extends LabelContainerProps {
-    resultsPerPageOptions: number[];
-    currentResultsPerPage: number;
-    handleOnChange: React.Dispatch<React.SetStateAction<number>>;
-}
-export interface PaginationListItemButtonProps {
-    arrow?: 'left' | 'right';
-    children?: string | number;
-    variant?: 'number' | 'dots';
-    active?: boolean;
-    onClick?: (e: any) => void;
-    isCurrentPage?: boolean;
-    tabIndex?: number;
-}
-/**
- * PaginationLabel component is used for placing the pagination results label.
- */
-export declare const PaginationLabel: React.ForwardRefExoticComponent<Pick<PaginationLabelProps, "children" | "p" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "end" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "start" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "total"> & React.RefAttributes<HTMLParagraphElement>>;
-export declare const PaginationResultsPerPageSelect: React.ForwardRefExoticComponent<Pick<PaginationResultsPerPageSelectProps, "children" | "form" | "p" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "htmlFor" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "resultsPerPageOptions" | "currentResultsPerPage" | "handleOnChange"> & React.RefAttributes<HTMLLabelElement>>;
-export declare const PaginationListItemButton: React.ForwardRefExoticComponent<PaginationListItemButtonProps & React.RefAttributes<HTMLLIElement>>;
+export * from '@digigov/ui/navigation/Pagination/Pagination';
 export * from '@digigov/react-core/Pagination';
 export * from '@digigov/react-core/PaginationList';
 export * from '@digigov/react-core/PaginationListItem';
 export * from '@digigov/ui/navigation/Pagination/hooks';
-export * from '@digigov/ui/navigation/Pagination/auto';
-export { PaginationLabelContainer };
+export { PaginationLabelContainer } from '@digigov/react-core/PaginationLabelContainer';

package/navigation/Pagination/index.js

@@ -1,72 +1,13 @@
-import React from 'react';
-import Pagination from '@digigov/react-core/Pagination';
-import PaginationLabelContainer from '@digigov/react-core/PaginationLabelContainer';
-import PaginationListItem from '@digigov/react-core/PaginationListItem';
-import ChevronIcon from '@digigov/react-icons/ChevronIcon';
-import Button from '@digigov/ui/form/Button';
-import LabelContainer from '@digigov/ui/form/LabelContainer';
-import SelectContainer, { SelectOption } from '@digigov/ui/form/SelectContainer';
-export default Pagination;
-import { I18nText } from '@digigov/ui/i18n/I18nText';
-/**
- * PaginationLabel component is used for placing the pagination results label.
- */
-export var PaginationLabel = /*#__PURE__*/React.forwardRef(function PaginationLabel(_ref, ref) {
-  var start = _ref.start,
-    end = _ref.end,
-    total = _ref.total;
-  return /*#__PURE__*/React.createElement(PaginationLabelContainer, {
-    ref: ref
-  }, /*#__PURE__*/React.createElement(I18nText, {
-    i18nKey: "pagination.label"
-  }, "Showing ", /*#__PURE__*/React.createElement("b", null, start), " to ", /*#__PURE__*/React.createElement("b", null, end), " of ", /*#__PURE__*/React.createElement("b", null, total), " results"));
-});
-export var PaginationResultsPerPageSelect = /*#__PURE__*/React.forwardRef(function PaginationResultsPerPageSelect(_ref2, ref) {
-  var resultsPerPageOptions = _ref2.resultsPerPageOptions,
-    currentResultsPerPage = _ref2.currentResultsPerPage,
-    handleOnChange = _ref2.handleOnChange,
-    children = _ref2.children;
-  return /*#__PURE__*/React.createElement(LabelContainer, {
-    ref: ref
-  }, children, /*#__PURE__*/React.createElement(SelectContainer, {
-    dense: true,
-    value: currentResultsPerPage,
-    onChange: function onChange(e) {
-      handleOnChange(Number(e.target.value));
-    }
-  }, resultsPerPageOptions.map(function (option) {
-    return /*#__PURE__*/React.createElement(SelectOption, {
-      key: option
-    }, option);
-  })));
-});
-export var PaginationListItemButton = /*#__PURE__*/React.forwardRef(function PaginationListItemButton(_ref3, ref) {
-  var onClick = _ref3.onClick,
-    arrow = _ref3.arrow,
-    children = _ref3.children,
-    variant = _ref3.variant,
-    active = _ref3.active,
-    isCurrentPage = _ref3.isCurrentPage,
-    tabIndex = _ref3.tabIndex;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PaginationListItem, {
-    tabIndex: tabIndex,
-    active: active //disabled
-    ,
-    currentPage: isCurrentPage,
-    ref: ref,
-    variant: variant
-  }, isCurrentPage ? children : /*#__PURE__*/React.createElement(Button, {
-    variant: "link",
-    onClick: onClick
-  }, arrow === 'left' && /*#__PURE__*/React.createElement(ChevronIcon, {
-    direction: arrow
-  }), children, arrow === 'right' && /*#__PURE__*/React.createElement(ChevronIcon, {
-    direction: arrow
-  }))));
-});
-export * from '@digigov/react-core/Pagination';
-export * from '@digigov/react-core/PaginationList';
-export * from '@digigov/react-core/PaginationListItem';
-export * from '@digigov/ui/navigation/Pagination/hooks';
-export * from '@digigov/ui/navigation/Pagination/auto';
-export { PaginationLabelContainer };
+import Pagination from "@digigov/ui/navigation/Pagination/Pagination";
+var Pagination_default = Pagination;
+export * from "@digigov/ui/navigation/Pagination/Pagination";
+export * from "@digigov/react-core/Pagination";
+export * from "@digigov/react-core/PaginationList";
+export * from "@digigov/react-core/PaginationListItem";
+export * from "@digigov/ui/navigation/Pagination/hooks";
+import { PaginationLabelContainer } from "@digigov/react-core/PaginationLabelContainer";
+export {
+  PaginationLabelContainer,
+  Pagination_default as default
+};
+//# sourceMappingURL=index.js.map

package/navigation/Pagination/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/navigation/Pagination/index.tsx"],
+  "sourcesContent": ["import Pagination from '@digigov/ui/navigation/Pagination/Pagination';\nexport default Pagination;\n\nexport * from '@digigov/ui/navigation/Pagination/Pagination';\nexport * from '@digigov/react-core/Pagination';\nexport * from '@digigov/react-core/PaginationList';\nexport * from '@digigov/react-core/PaginationListItem';\nexport * from '@digigov/ui/navigation/Pagination/hooks';\nexport { PaginationLabelContainer } from '@digigov/react-core/PaginationLabelContainer';\n"],
+  "mappings": "AAAA,OAAO,gBAAgB;AACvB,IAAO,qBAAQ;AAEf,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,gCAAgC;",
+  "names": []
+}

package/navigation/SkipLink/SkipLink.stories.d.ts

@@ -5,5 +5,5 @@ declare namespace _default {
     export let displayName: string;
 }
 export default _default;
-export * from "@digigov/ui/navigation/SkipLink/__stories__/Default";
+export { Default } from "@digigov/ui/navigation/SkipLink/__stories__/Default";
 import SkipLink from '@digigov/ui/navigation/SkipLink';

package/navigation/SkipLink/__stories__/Default.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const Default: () => JSX.Element;
+import React from 'react';
+export declare const Default: (_: any) => React.JSX.Element;
 export default Default;

package/navigation/SkipLink/index.js

@@ -1,3 +1,7 @@
-import SkipLink from '@digigov/react-core/SkipLink';
-export default SkipLink;
-export { SkipLink };
+import SkipLink from "@digigov/react-core/SkipLink";
+var SkipLink_default = SkipLink;
+export {
+  SkipLink,
+  SkipLink_default as default
+};
+//# sourceMappingURL=index.js.map

package/navigation/SkipLink/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/navigation/SkipLink/index.tsx"],
+  "sourcesContent": ["import SkipLink from '@digigov/react-core/SkipLink';\n\nexport default SkipLink;\nexport { SkipLink };\n"],
+  "mappings": "AAAA,OAAO,cAAc;AAErB,IAAO,mBAAQ;",
+  "names": []
+}

package/navigation/Tabs/Tabs.stories.d.ts

@@ -4,10 +4,12 @@ declare namespace _default {
     export let description: string;
     export let link: string;
     export { TabsBase as component };
+    export { doc as markdown };
     export let displayName: string;
 }
 export default _default;
-export * from "@digigov/ui/navigation/Tabs/__stories__/Default";
-export * from "@digigov/ui/navigation/Tabs/__stories__/Dense";
-export * from "@digigov/ui/navigation/Tabs/__stories__/Auto";
+export { Default } from "@digigov/ui/navigation/Tabs/__stories__/Default";
+export { UsingAccordion } from "@digigov/ui/navigation/Tabs/__stories__/UsingAccordion";
+export { Dense } from "@digigov/ui/navigation/Tabs/__stories__/Dense";
+export { Auto } from "@digigov/ui/navigation/Tabs/__stories__/Auto";
 import TabsBase from '@digigov/ui/navigation/Tabs';

package/navigation/Tabs/__stories__/Auto.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare function Auto(): JSX.Element;
+import React from 'react';
+export declare function Auto(_: any): React.JSX.Element;
 export default Auto;

package/navigation/Tabs/__stories__/Default.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare function Default(): JSX.Element;
+import React from 'react';
+export declare function Default(_: any): React.JSX.Element;
 export default Default;

package/navigation/Tabs/__stories__/Dense.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare function Dense(): JSX.Element;
+import React from 'react';
+export declare function Dense(_: any): React.JSX.Element;
 export default Dense;

package/navigation/Tabs/__stories__/UsingAccordion.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function UsingAccordion(_: any): React.JSX.Element;
+export default UsingAccordion;

package/navigation/Tabs/auto/index.js

@@ -1,48 +1,44 @@
-import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["defaultOpen", "children"],
-  _excluded2 = ["tab"];
-import React, { useContext } from 'react';
-import { Tabs, TabsListItemBase, TabsPanelBase, useTabs } from '@digigov/ui/navigation/Tabs';
-export var TabsContext = /*#__PURE__*/React.createContext(null);
-export var useTabsContext = function useTabsContext() {
-  var context = useContext(TabsContext);
+import React, { useContext } from "react";
+import Tabs from "@digigov/react-core/Tabs";
+import {
+  TabsListItemBase
+} from "@digigov/react-core/TabsListItemBase";
+import {
+  TabsPanelBase
+} from "@digigov/react-core/TabsPanelBase";
+import {
+  useTabs
+} from "@digigov/ui/navigation/Tabs/hooks";
+const TabsContext = React.createContext(null);
+const useTabsContext = () => {
+  const context = useContext(TabsContext);
   return context;
 };
-export var TabsAuto = function TabsAuto(_ref) {
-  var defaultOpen = _ref.defaultOpen,
-    children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var tabs = useTabs({
-    defaultOpen: defaultOpen
-  });
-  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
-    value: tabs
-  }, /*#__PURE__*/React.createElement(Tabs, props, children));
+const TabsAuto = ({ defaultOpen, children, ...props }) => {
+  const tabs = useTabs({ defaultOpen });
+  return /* @__PURE__ */ React.createElement(TabsContext.Provider, { value: tabs }, /* @__PURE__ */ React.createElement(Tabs, { ...props }, children));
 };
-export var TabsListItem = /*#__PURE__*/React.forwardRef(function TabsListItem(_ref2, ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
-  var context = useTabsContext();
+const TabsListItem = React.forwardRef(function TabsListItem2({ ...props }, ref) {
+  const context = useTabsContext();
   if (!context) {
-    return /*#__PURE__*/React.createElement(TabsListItemBase, _extends({}, props, {
-      ref: ref
-    }));
+    return /* @__PURE__ */ React.createElement(TabsListItemBase, { ...props, ref });
   }
-  return /*#__PURE__*/React.createElement(TabsListItemBase, _extends({}, context.register(props.id), {
-    ref: ref
-  }, props));
+  return /* @__PURE__ */ React.createElement(TabsListItemBase, { ...context.register(props.id), ref, ...props });
 });
-export var TabsPanel = /*#__PURE__*/React.forwardRef(function TabsPanel(_ref3, ref) {
-  var tab = _ref3.tab,
-    props = _objectWithoutProperties(_ref3, _excluded2);
-  var context = useTabsContext();
-  if (!context) {
-    return /*#__PURE__*/React.createElement(TabsPanelBase, _extends({
-      ref: ref
-    }, props));
+const TabsPanel = React.forwardRef(
+  function TabsPanel2({ tab, ...props }, ref) {
+    const context = useTabsContext();
+    if (!context) {
+      return /* @__PURE__ */ React.createElement(TabsPanelBase, { ref, ...props });
+    }
+    return /* @__PURE__ */ React.createElement(TabsPanelBase, { ...context.panel(tab), ref, ...props });
   }
-  return /*#__PURE__*/React.createElement(TabsPanelBase, _extends({}, context.panel(tab), {
-    ref: ref
-  }, props));
-});
+);
+export {
+  TabsAuto,
+  TabsContext,
+  TabsListItem,
+  TabsPanel,
+  useTabsContext
+};
+//# sourceMappingURL=auto.js.map

package/navigation/Tabs/auto.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { UseTabsReturn, TabsListItemBaseProps, TabsPanelBaseProps } from '@digigov/ui/navigation/Tabs';
-import { TabId } from '@digigov/ui/navigation/Tabs';
+import { TabsListItemBaseProps } from '@digigov/react-core/TabsListItemBase';
+import { TabsPanelBaseProps } from '@digigov/react-core/TabsPanelBase';
+import { UseTabsReturn, TabId } from '@digigov/ui/navigation/Tabs/hooks';
 export interface TabsListItemProps extends TabsListItemBaseProps {
     id: string;
 }
@@ -13,6 +14,6 @@ export declare const TabsAuto: ({ defaultOpen, children, ...props }: {
     [x: string]: any;
     defaultOpen: any;
     children: any;
-}) => JSX.Element;
-export declare const TabsListItem: React.ForwardRefExoticComponent<Pick<TabsListItemProps, "children" | "p" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "media" | "target" | "type" | "role" | "tabIndex" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "hrefLang" | "referrerPolicy" | "rel" | "download" | "ping" | "open" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden"> & React.RefAttributes<HTMLAnchorElement>>;
-export declare const TabsPanel: React.ForwardRefExoticComponent<Pick<TabsPanelProps, "children" | "p" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "m" | "mt" | "mb" | "ml" | "mr" | "mx" | "my" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "pt" | "pb" | "pl" | "pr" | "px" | "py" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "tab" | "active"> & React.RefAttributes<HTMLDivElement>>;
+}) => React.JSX.Element;
+export declare const TabsListItem: React.ForwardRefExoticComponent<Omit<TabsListItemProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const TabsPanel: React.ForwardRefExoticComponent<Omit<TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/navigation/Tabs/auto.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/navigation/Tabs/auto.tsx"],
+  "sourcesContent": ["import React, { useContext } from 'react';\n\nimport Tabs from '@digigov/react-core/Tabs';\nimport {\n  TabsListItemBase,\n  TabsListItemBaseProps,\n} from '@digigov/react-core/TabsListItemBase';\nimport {\n  TabsPanelBase,\n  TabsPanelBaseProps,\n} from '@digigov/react-core/TabsPanelBase';\nimport {\n  useTabs,\n  UseTabsReturn,\n  TabId,\n} from '@digigov/ui/navigation/Tabs/hooks';\n\nexport interface TabsListItemProps extends TabsListItemBaseProps {\n  id: string;\n}\n\nexport interface TabsPanelProps extends TabsPanelBaseProps {\n  tab: TabId;\n}\n\nexport const TabsContext = React.createContext<UseTabsReturn | null>(null);\n\nexport const useTabsContext = () => {\n  const context = useContext(TabsContext);\n  return context;\n};\n\nexport const TabsAuto = ({ defaultOpen, children, ...props }) => {\n  const tabs = useTabs({ defaultOpen });\n  return (\n    <TabsContext.Provider value={tabs}>\n      <Tabs {...props}>{children}</Tabs>\n    </TabsContext.Provider>\n  );\n};\n\nexport const TabsListItem = React.forwardRef<\n  HTMLAnchorElement,\n  TabsListItemProps\n>(function TabsListItem({ ...props }, ref) {\n  const context = useTabsContext();\n  if (!context) {\n    return <TabsListItemBase {...props} ref={ref} />;\n  }\n  return (\n    <TabsListItemBase {...context.register(props.id)} ref={ref} {...props} />\n  );\n});\n\nexport const TabsPanel = React.forwardRef<HTMLDivElement, TabsPanelProps>(\n  function TabsPanel({ tab, ...props }, ref) {\n    const context = useTabsContext();\n    if (!context) {\n      return <TabsPanelBase ref={ref} {...props} />;\n    }\n    return <TabsPanelBase {...context.panel(tab)} ref={ref} {...props} />;\n  }\n);\n"],
+  "mappings": "AAAA,OAAO,SAAS,kBAAkB;AAElC,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAGK;AAUA,MAAM,cAAc,MAAM,cAAoC,IAAI;AAElE,MAAM,iBAAiB,MAAM;AAClC,QAAM,UAAU,WAAW,WAAW;AACtC,SAAO;AACT;AAEO,MAAM,WAAW,CAAC,EAAE,aAAa,UAAU,GAAG,MAAM,MAAM;AAC/D,QAAM,OAAO,QAAQ,EAAE,YAAY,CAAC;AACpC,SACE,oCAAC,YAAY,UAAZ,EAAqB,OAAO,QAC3B,oCAAC,QAAM,GAAG,SAAQ,QAAS,CAC7B;AAEJ;AAEO,MAAM,eAAe,MAAM,WAGhC,SAASA,cAAa,EAAE,GAAG,MAAM,GAAG,KAAK;AACzC,QAAM,UAAU,eAAe;AAC/B,MAAI,CAAC,SAAS;AACZ,WAAO,oCAAC,oBAAkB,GAAG,OAAO,KAAU;AAAA,EAChD;AACA,SACE,oCAAC,oBAAkB,GAAG,QAAQ,SAAS,MAAM,EAAE,GAAG,KAAW,GAAG,OAAO;AAE3E,CAAC;AAEM,MAAM,YAAY,MAAM;AAAA,EAC7B,SAASC,WAAU,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK;AACzC,UAAM,UAAU,eAAe;AAC/B,QAAI,CAAC,SAAS;AACZ,aAAO,oCAAC,iBAAc,KAAW,GAAG,OAAO;AAAA,IAC7C;AACA,WAAO,oCAAC,iBAAe,GAAG,QAAQ,MAAM,GAAG,GAAG,KAAW,GAAG,OAAO;AAAA,EACrE;AACF;",
+  "names": ["TabsListItem", "TabsPanel"]
+}

package/navigation/Tabs/hooks/index.js

@@ -1,80 +1,88 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState, useRef, useCallback } from 'react';
-export var useTabs = function useTabs() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$defaultOpen = _ref.defaultOpen,
-    defaultOpen = _ref$defaultOpen === void 0 ? null : _ref$defaultOpen;
-  var _useState = useState(defaultOpen),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentOpen = _useState2[0],
-    setCurrentOpen = _useState2[1];
-  var tabsRef = useRef(new Map());
-  var open = useCallback(function (id) {
-    var _tabsRef$current$get, _tabsRef$current$get$;
+import React, { useState, useRef, useCallback } from "react";
+import { useScreenSize } from "@digigov/ui/utils/hooks/useScreen";
+const useTabs = ({
+  defaultOpen = null
+} = {}) => {
+  const [currentOpen, setCurrentOpen] = useState(defaultOpen);
+  const tabsRef = useRef(
+    /* @__PURE__ */ new Map()
+  );
+  const { screenSize } = useScreenSize();
+  const open = useCallback((id) => {
     setCurrentOpen(id);
-    (_tabsRef$current$get = tabsRef.current.get(id)) === null || _tabsRef$current$get === void 0 ? void 0 : (_tabsRef$current$get$ = _tabsRef$current$get.current) === null || _tabsRef$current$get$ === void 0 ? void 0 : _tabsRef$current$get$.focus();
+    tabsRef.current.get(id)?.current?.focus();
   }, []);
-  var navigate = useCallback(function (direction) {
-    var _document$activeEleme, _document$activeEleme2;
-    var focusedTabId = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : (_document$activeEleme2 = _document$activeEleme.id.match(/tab-(.*?)$/)) === null || _document$activeEleme2 === void 0 ? void 0 : _document$activeEleme2[1];
-    var tabs = Array.from(tabsRef.current.keys());
-    var currentIndex = tabs.indexOf(focusedTabId || currentOpen);
-    var newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
-    if (newIndex >= 0 && newIndex < tabs.length) {
-      var _tabsRef$current$get2, _tabsRef$current$get3;
-      (_tabsRef$current$get2 = tabsRef.current.get(tabs[newIndex])) === null || _tabsRef$current$get2 === void 0 ? void 0 : (_tabsRef$current$get3 = _tabsRef$current$get2.current) === null || _tabsRef$current$get3 === void 0 ? void 0 : _tabsRef$current$get3.focus();
-    }
-  }, [currentOpen, tabsRef.current]);
-  var register = useCallback(function (id) {
-    if (!tabsRef.current.has(id)) {
-      if (tabsRef.current.size === 0 && !currentOpen) {
-        setCurrentOpen(id);
+  const navigate = useCallback(
+    (direction) => {
+      const focusedTabId = document.activeElement?.id.match(/tab-(.*?)$/)?.[1];
+      const tabs = Array.from(tabsRef.current.keys());
+      const currentIndex = tabs.indexOf(focusedTabId || currentOpen);
+      const newIndex = direction === "next" ? currentIndex + 1 : currentIndex - 1;
+      if (newIndex >= 0 && newIndex < tabs.length) {
+        tabsRef.current.get(tabs[newIndex])?.current?.focus();
       }
-      tabsRef.current.set(id, /*#__PURE__*/React.createRef());
-    }
-    return {
-      role: 'tab',
-      id: "tab-".concat(id),
-      href: "#panel-".concat(id),
-      'aria-selected': currentOpen === id,
-      open: currentOpen === id,
-      'aria-controls': "panel-".concat(id),
-      tabIndex: currentOpen === id ? 0 : -1,
-      onClick: function onClick(e) {
-        e.preventDefault();
-        open(id);
-      },
-      onKeyDown: function onKeyDown(e) {
-        switch (e.key) {
-          case 'ArrowRight':
-          case 'ArrowDown':
-            navigate('next');
-            break;
-          case 'ArrowLeft':
-          case 'ArrowUp':
-            navigate('previous');
-            break;
-          case 'Enter':
-            open(id);
-            break;
+    },
+    [currentOpen, tabsRef.current]
+  );
+  const register = useCallback(
+    (id) => {
+      if (!tabsRef.current.has(id)) {
+        if (tabsRef.current.size === 0 && !currentOpen) {
+          setCurrentOpen(id);
         }
-      },
-      ref: tabsRef.current.get(id)
-    };
-  }, [currentOpen]);
-  var panel = function panel(id) {
+        tabsRef.current.set(id, React.createRef());
+      }
+      return {
+        role: "tab",
+        id: `tab-${id}`,
+        href: `#panel-${id}`,
+        "aria-selected": currentOpen === id,
+        open: currentOpen === id,
+        "aria-controls": `panel-${id}`,
+        tabIndex: currentOpen === id ? 0 : -1,
+        onClick: (e) => {
+          if (screenSize != "xs" && screenSize != "sm") {
+            e.preventDefault();
+          }
+          open(id);
+        },
+        onKeyDown: (e) => {
+          switch (e.key) {
+            case "ArrowRight":
+            case "ArrowDown":
+              navigate("next");
+              break;
+            case "ArrowLeft":
+            case "ArrowUp":
+              navigate("previous");
+              break;
+            case "Enter":
+              open(id);
+              break;
+          }
+        },
+        ref: tabsRef.current.get(id)
+      };
+    },
+    [currentOpen]
+  );
+  const panel = (id) => {
     return {
-      role: 'tabpanel',
-      'aria-labelledby': "tab-".concat(id),
-      id: "panel-".concat(id),
+      role: "tabpanel",
+      "aria-labelledby": `tab-${id}`,
+      id: `panel-${id}`,
       active: currentOpen === id,
       tab: id
     };
   };
   return {
-    register: register,
-    panel: panel,
-    currentOpen: currentOpen,
-    open: open
+    register,
+    panel,
+    currentOpen,
+    open
   };
-};
+};
+export {
+  useTabs
+};
+//# sourceMappingURL=hooks.js.map

package/navigation/Tabs/hooks.d.ts

@@ -13,7 +13,7 @@ export interface UseTabsReturn {
         tabIndex: number;
         onClick: (e: any) => void;
         onKeyDown: (e: React.KeyboardEvent) => void;
-        ref?: React.RefObject<HTMLAnchorElement>;
+        ref?: React.RefObject<HTMLAnchorElement | null>;
     };
     panel: (id: TabId) => {
         tab: TabId;

package/navigation/Tabs/hooks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/navigation/Tabs/hooks.ts"],
+  "sourcesContent": ["import React, { useState, useRef, useCallback } from 'react';\nimport { useScreenSize } from '@digigov/ui/utils/hooks/useScreen';\n\nexport type TabId = string | number | null;\n\nexport interface UseTabsProps {\n  defaultOpen?: TabId;\n}\n\nexport interface UseTabsReturn {\n  register: (id: TabId) => {\n    role: string;\n    href: string;\n    id: string;\n    'aria-selected': boolean;\n    'aria-controls': string;\n    tabIndex: number;\n    onClick: (e: any) => void;\n    onKeyDown: (e: React.KeyboardEvent) => void;\n    ref?: React.RefObject<HTMLAnchorElement | null>;\n  };\n  panel: (id: TabId) => {\n    tab: TabId;\n    role: string;\n    'aria-labelledby': string;\n    id: string;\n    active: boolean;\n  };\n  currentOpen: TabId;\n  open: (id: TabId) => void;\n}\n\nexport const useTabs = ({\n  defaultOpen = null,\n}: UseTabsProps = {}): UseTabsReturn => {\n  const [currentOpen, setCurrentOpen] = useState<TabId | null>(defaultOpen);\n  const tabsRef = useRef<Map<TabId, React.RefObject<HTMLAnchorElement | null>>>(\n    new Map()\n  );\n  const { screenSize } = useScreenSize();\n\n  const open = useCallback((id: TabId) => {\n    setCurrentOpen(id);\n    tabsRef.current.get(id)?.current?.focus();\n  }, []);\n\n  const navigate = useCallback(\n    (direction: 'next' | 'previous') => {\n      const focusedTabId = document.activeElement?.id.match(/tab-(.*?)$/)?.[1];\n      const tabs = Array.from(tabsRef.current.keys());\n      const currentIndex = tabs.indexOf(focusedTabId || currentOpen);\n      const newIndex =\n        direction === 'next' ? currentIndex + 1 : currentIndex - 1;\n      if (newIndex >= 0 && newIndex < tabs.length) {\n        tabsRef.current.get(tabs[newIndex])?.current?.focus();\n      }\n    },\n    [currentOpen, tabsRef.current]\n  );\n\n  const register = useCallback(\n    (id: TabId) => {\n      if (!tabsRef.current.has(id)) {\n        if (tabsRef.current.size === 0 && !currentOpen) {\n          setCurrentOpen(id);\n        }\n        tabsRef.current.set(id, React.createRef());\n      }\n      return {\n        role: 'tab',\n        id: `tab-${id}`,\n        href: `#panel-${id}`,\n        'aria-selected': currentOpen === id,\n        open: currentOpen === id,\n        'aria-controls': `panel-${id}`,\n        tabIndex: currentOpen === id ? 0 : -1,\n        onClick: (e) => {\n          // If the screen is mobile, we don't want to prevent the default behavior of the anchor tag,\n          // which is to navigate to the href.\n          if (screenSize != 'xs' && screenSize != 'sm') {\n            e.preventDefault();\n          }\n          open(id);\n        },\n        onKeyDown: (e: React.KeyboardEvent) => {\n          switch (e.key) {\n            case 'ArrowRight':\n            case 'ArrowDown':\n              navigate('next');\n              break;\n            case 'ArrowLeft':\n            case 'ArrowUp':\n              navigate('previous');\n              break;\n            case 'Enter':\n              open(id);\n              break;\n          }\n        },\n        ref: tabsRef.current.get(id),\n      };\n    },\n    [currentOpen]\n  );\n\n  const panel = (id: TabId) => {\n    return {\n      role: 'tabpanel',\n      'aria-labelledby': `tab-${id}`,\n      id: `panel-${id}`,\n      active: currentOpen === id,\n      tab: id,\n    };\n  };\n\n  return {\n    register,\n    panel,\n    currentOpen,\n    open,\n  };\n};\n"],
+  "mappings": "AAAA,OAAO,SAAS,UAAU,QAAQ,mBAAmB;AACrD,SAAS,qBAAqB;AA+BvB,MAAM,UAAU,CAAC;AAAA,EACtB,cAAc;AAChB,IAAkB,CAAC,MAAqB;AACtC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAuB,WAAW;AACxE,QAAM,UAAU;AAAA,IACd,oBAAI,IAAI;AAAA,EACV;AACA,QAAM,EAAE,WAAW,IAAI,cAAc;AAErC,QAAM,OAAO,YAAY,CAAC,OAAc;AACtC,mBAAe,EAAE;AACjB,YAAQ,QAAQ,IAAI,EAAE,GAAG,SAAS,MAAM;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,QAAM,WAAW;AAAA,IACf,CAAC,cAAmC;AAClC,YAAM,eAAe,SAAS,eAAe,GAAG,MAAM,YAAY,IAAI,CAAC;AACvE,YAAM,OAAO,MAAM,KAAK,QAAQ,QAAQ,KAAK,CAAC;AAC9C,YAAM,eAAe,KAAK,QAAQ,gBAAgB,WAAW;AAC7D,YAAM,WACJ,cAAc,SAAS,eAAe,IAAI,eAAe;AAC3D,UAAI,YAAY,KAAK,WAAW,KAAK,QAAQ;AAC3C,gBAAQ,QAAQ,IAAI,KAAK,QAAQ,CAAC,GAAG,SAAS,MAAM;AAAA,MACtD;AAAA,IACF;AAAA,IACA,CAAC,aAAa,QAAQ,OAAO;AAAA,EAC/B;AAEA,QAAM,WAAW;AAAA,IACf,CAAC,OAAc;AACb,UAAI,CAAC,QAAQ,QAAQ,IAAI,EAAE,GAAG;AAC5B,YAAI,QAAQ,QAAQ,SAAS,KAAK,CAAC,aAAa;AAC9C,yBAAe,EAAE;AAAA,QACnB;AACA,gBAAQ,QAAQ,IAAI,IAAI,MAAM,UAAU,CAAC;AAAA,MAC3C;AACA,aAAO;AAAA,QACL,MAAM;AAAA,QACN,IAAI,OAAO,EAAE;AAAA,QACb,MAAM,UAAU,EAAE;AAAA,QAClB,iBAAiB,gBAAgB;AAAA,QACjC,MAAM,gBAAgB;AAAA,QACtB,iBAAiB,SAAS,EAAE;AAAA,QAC5B,UAAU,gBAAgB,KAAK,IAAI;AAAA,QACnC,SAAS,CAAC,MAAM;AAGd,cAAI,cAAc,QAAQ,cAAc,MAAM;AAC5C,cAAE,eAAe;AAAA,UACnB;AACA,eAAK,EAAE;AAAA,QACT;AAAA,QACA,WAAW,CAAC,MAA2B;AACrC,kBAAQ,EAAE,KAAK;AAAA,YACb,KAAK;AAAA,YACL,KAAK;AACH,uBAAS,MAAM;AACf;AAAA,YACF,KAAK;AAAA,YACL,KAAK;AACH,uBAAS,UAAU;AACnB;AAAA,YACF,KAAK;AACH,mBAAK,EAAE;AACP;AAAA,UACJ;AAAA,QACF;AAAA,QACA,KAAK,QAAQ,QAAQ,IAAI,EAAE;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,QAAQ,CAAC,OAAc;AAC3B,WAAO;AAAA,MACL,MAAM;AAAA,MACN,mBAAmB,OAAO,EAAE;AAAA,MAC5B,IAAI,SAAS,EAAE;AAAA,MACf,QAAQ,gBAAgB;AAAA,MACxB,KAAK;AAAA,IACP;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/navigation/Tabs/index.d.ts

@@ -5,5 +5,4 @@ export * from '@digigov/react-core/TabsList';
 export * from '@digigov/react-core/TabsListItemBase';
 export * from '@digigov/react-core/TabsPanelBase';
 export * from '@digigov/react-core/TabsHeading';
-export * from '@digigov/ui/navigation/Tabs/auto';
 export default Tabs;