@norges-domstoler/dds-components 4.0.2 → 4.2.0

package/dist/components/Table/Row.js

@@ -0,0 +1,43 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { rowTokens } from './Row.tokens.js';
+
+var bodyStyles = function bodyStyles(mode, selected) {
+  return css(["", " ", ""], mode && css(["", ""], rowTokens.body.mode[mode].base), selected && css(["", ""], rowTokens.body.selected.base));
+};
+
+var StyledRow = styled.tr.withConfig({
+  displayName: "Row__StyledRow",
+  componentId: "sc-15vvjkk-0"
+})(["@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,border-color 0.2s,box-shadow 0.2s;}", " ", ""], function (_ref) {
+  var type = _ref.type;
+  return type && css(["", ""], rowTokens[type].base);
+}, function (_ref2) {
+  var type = _ref2.type,
+      mode = _ref2.mode,
+      selected = _ref2.selected,
+      hoverable = _ref2.hoverable;
+  return type === 'body' && css(["&:nth-of-type(even){", " ", "}&:nth-of-type(odd){", " ", "}", " &:focus-visible,&.focus-visible{", "}"], rowTokens.body.even.base, bodyStyles(mode, selected), rowTokens.body.odd.base, bodyStyles(mode, selected), hoverable && css(["&:hover{", "}"], rowTokens.body.hover.base), rowTokens.body.focus.base);
+});
+var Row = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$type = _a.type,
+      type = _a$type === void 0 ? 'body' : _a$type,
+      _a$mode = _a.mode,
+      mode = _a$mode === void 0 ? 'normal' : _a$mode,
+      children = _a.children,
+      rest = __rest(_a, ["type", "mode", "children"]);
+
+  var rowProps = Object.assign({
+    type: type,
+    mode: mode
+  }, rest);
+  return jsx(StyledRow, Object.assign({
+    ref: ref
+  }, rowProps, {
+    children: children
+  }));
+});
+
+export { Row };

package/dist/components/Table/Row.tokens.js

@@ -0,0 +1,68 @@
+import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
+import { focusVisibleInset } from '../../helpers/styling/focusVisible.js';
+
+var Colors = ddsBaseTokens.colors,
+    FontPackages = ddsBaseTokens.fontPackages,
+    Border = ddsBaseTokens.border;
+var textDefault = ddsReferenceTokens.textDefault;
+var bodyRowBase = Object.assign({
+  color: textDefault.textColor
+}, FontPackages.body_sans_02.base);
+var headRowBase = Object.assign(Object.assign({
+  color: textDefault.textColor
+}, FontPackages.body_sans_02.base), {
+  fontWeight: 600,
+  textAlign: 'left'
+});
+var bodyOddBase = {
+  backgroundColor: Colors.DdsColorNeutralsWhite
+};
+var bodyEvenBase = {
+  backgroundColor: Colors.DdsColorNeutralsGray1
+};
+var bodySelectedBase = {
+  backgroundColor: Colors.DdsColorSecondaryLightest
+};
+var bodyHoverBase = {
+  backgroundColor: Colors.DdsColorSecondaryLightest
+};
+var bodyFocusBase = Object.assign({}, focusVisibleInset);
+var bodySumBase = Object.assign(Object.assign({}, FontPackages.body_sans_02.base), {
+  fontWeight: 600,
+  borderTop: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors.DdsColorNeutralsGray4),
+  borderBottom: "".concat(Border.BordersDdsBorderStyleLightStrokeWeight, " solid ").concat(Colors.DdsColorNeutralsGray4),
+  backgroundColor: Colors.DdsColorNeutralsWhite
+});
+var rowTokens = {
+  head: {
+    base: headRowBase
+  },
+  body: {
+    base: bodyRowBase,
+    odd: {
+      base: bodyOddBase
+    },
+    even: {
+      base: bodyEvenBase
+    },
+    selected: {
+      base: bodySelectedBase
+    },
+    hover: {
+      base: bodyHoverBase
+    },
+    focus: {
+      base: bodyFocusBase
+    },
+    mode: {
+      sum: {
+        base: bodySumBase
+      },
+      normal: {
+        base: {}
+      }
+    }
+  }
+};
+
+export { rowTokens };

package/dist/components/Table/SortCell.js

@@ -0,0 +1,60 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Cell } from './Cell.js';
+import { cellTokens } from './Cell.tokens.js';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
+import styled from 'styled-components';
+import { removeButtonStyling } from '../../helpers/styling/removeButtonStyling.js';
+import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+
+var SortIconWrapper = styled(IconWrapper).withConfig({
+  displayName: "SortCell__SortIconWrapper",
+  componentId: "sc-1l3jzvh-0"
+})(["", ""], cellTokens.head.sortCell.icon.base);
+var StyledButton = styled.button.withConfig({
+  displayName: "SortCell__StyledButton",
+  componentId: "sc-1l3jzvh-1"
+})(["", " display:flex;align-items:center;&:focus-visible{", "}"], removeButtonStyling, cellTokens.head.sortCell.focus.base);
+
+var makeSortIcon = function makeSortIcon(isSorted, sortOrder) {
+  if (!isSorted || !sortOrder) {
+    return jsx(SortIconWrapper, {
+      Icon: UnfoldMoreIcon,
+      iconSize: "inline"
+    });
+  }
+
+  return sortOrder === 'ascending' ? jsx(SortIconWrapper, {
+    Icon: KeyboardArrowDownIcon,
+    iconSize: "inline"
+  }) : jsx(SortIconWrapper, {
+    Icon: KeyboardArrowUpIcon,
+    iconSize: "inline"
+  });
+};
+
+var SortCell = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var isSorted = _a.isSorted,
+      sortOrder = _a.sortOrder,
+      onClick = _a.onClick,
+      children = _a.children,
+      rest = __rest(_a, ["isSorted", "sortOrder", "onClick", "children"]);
+
+  return jsx(Cell, Object.assign({
+    ref: ref,
+    type: "head",
+    "aria-sort": isSorted && sortOrder ? sortOrder : undefined
+  }, rest, {
+    children: jsxs(StyledButton, Object.assign({
+      onClick: onClick,
+      "aria-description": "Aktiver for \xE5 endre sorteringsrekkef\xF8lge"
+    }, {
+      children: [children, " ", makeSortIcon(isSorted, sortOrder)]
+    }))
+  }));
+});
+
+export { SortCell };

package/dist/components/Table/Table.js

@@ -0,0 +1,34 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { cellTokens } from './Cell.tokens.js';
+import { typographyTokens } from '../Typography/Typography.tokens.js';
+import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+
+var StyledTable = styled.table.withConfig({
+  displayName: "Table__StyledTable",
+  componentId: "sc-bw0w0a-0"
+})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", ""], typographyTokens.selection.base, scrollbarStyling, function (_ref) {
+  var density = _ref.density;
+  return density && css(["td,th{", "}"], cellTokens.density[density].base);
+}, function (_ref2) {
+  var stickyHeader = _ref2.stickyHeader;
+  return stickyHeader && css(["tr[type='head']{th[type='head']{position:sticky;top:0;}}"]);
+});
+var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$density = _a.density,
+      density = _a$density === void 0 ? 'normal' : _a$density,
+      children = _a.children,
+      rest = __rest(_a, ["density", "children"]);
+
+  var tableProps = Object.assign({
+    ref: ref,
+    density: density
+  }, rest);
+  return jsx(StyledTable, Object.assign({}, tableProps, {
+    children: children
+  }));
+});
+
+export { Table };

package/dist/components/Table/TableWrapper.js

@@ -0,0 +1,61 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+
+var Wrapper = styled.div.withConfig({
+  displayName: "TableWrapper__Wrapper",
+  componentId: "sc-eb384b-0"
+})(["", " ", ""], function (_ref) {
+  var overflowX = _ref.overflowX;
+  return overflowX && css(["overflow-x:auto;"]);
+}, scrollbarStyling);
+var TableWrapper = function TableWrapper(_a) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      overflowX = _useState2[0],
+      setOverflowX = _useState2[1];
+
+  var _useState3 = useState(window.innerWidth),
+      _useState4 = _slicedToArray(_useState3, 2),
+      windowWidth = _useState4[0],
+      setWindowWidth = _useState4[1];
+
+  function isOverflowingX(event) {
+    return event.offsetWidth < event.scrollWidth;
+  }
+
+  var wrapperRef = useRef(null);
+  useEffect(function () {
+    if (wrapperRef && wrapperRef.current && isOverflowingX(wrapperRef.current)) {
+      setOverflowX(true);
+      return;
+    }
+
+    setOverflowX(false);
+  }, [windowWidth]);
+  useEffect(function () {
+    function handleResize() {
+      setWindowWidth(window.innerWidth);
+    }
+
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  });
+  var wrapperProps = Object.assign({
+    ref: wrapperRef,
+    overflowX: overflowX
+  }, rest);
+  return jsx(Wrapper, Object.assign({}, wrapperProps, {
+    children: children
+  }));
+};
+
+export { TableWrapper };

package/dist/components/Tabs/Tab.js

@@ -0,0 +1,102 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect, useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import { tabsTokens } from './Tabs.tokens.js';
+import { useTabsContext } from './Tabs.context.js';
+import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
+import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+import { IconWrapper } from '../IconWrapper/IconWrapper.js';
+
+var Button = styled.button.withConfig({
+  displayName: "Tab__Button",
+  componentId: "sc-1dd8soq-0"
+})(["@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s,border-bottom 0.2s,color 0.2s,", ";}", " width:", ";", ";", " &:focus-visible{", "}&:hover{", "}"], focusVisibleTransitionValue, tabsTokens.tab.base, function (_ref) {
+  var width = _ref.width;
+  return width;
+}, function (_ref2) {
+  var direction = _ref2.direction;
+  return tabsTokens.tab.direction[direction].base;
+}, function (_ref3) {
+  var active = _ref3.active;
+  return active && css(["", ""], tabsTokens.tab.active.base);
+}, tabsTokens.tab.focus.base, tabsTokens.tab.hover.base);
+var Tab = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$active = props.active,
+      active = _props$active === void 0 ? false : _props$active,
+      width = props.width,
+      Icon = props.Icon,
+      children = props.children,
+      focus = props.focus,
+      setFocus = props.setFocus,
+      index = props.index,
+      onClick = props.onClick,
+      onKeyDown = props.onKeyDown,
+      id = props.id,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["active", "width", "Icon", "children", "focus", "setFocus", "index", "onClick", "onKeyDown", "id", "className", "htmlProps"]);
+
+  var itemRef = useRef(null);
+  var combinedRef = useCombinedRef(ref, itemRef);
+
+  var _useTabsContext = useTabsContext(),
+      tabPanelsRef = _useTabsContext.tabPanelsRef,
+      setHasTabFocus = _useTabsContext.setHasTabFocus,
+      tabContentDirection = _useTabsContext.tabContentDirection,
+      tabWidth = _useTabsContext.tabWidth;
+
+  useEffect(function () {
+    var _a;
+
+    if (focus) {
+      (_a = itemRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      setHasTabFocus(true);
+    }
+  }, [focus]);
+  useOnKeyDown('Tab', function () {
+    var _a;
+
+    setHasTabFocus(false);
+    (_a = tabPanelsRef === null || tabPanelsRef === void 0 ? void 0 : tabPanelsRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  });
+  var handleSelect = useCallback(function () {
+    if (setFocus && index) {
+      setFocus(index);
+    }
+  }, [index, setFocus]);
+
+  var handleOnClick = function handleOnClick(e) {
+    handleSelect();
+    onClick && onClick(e);
+  };
+
+  var handleOnKeyDown = function handleOnKeyDown(e) {
+    handleSelect();
+    onKeyDown && onKeyDown(e);
+  };
+
+  var buttonProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    ref: combinedRef,
+    'aria-selected': active,
+    role: 'tab',
+    active: active,
+    width: width !== null && width !== void 0 ? width : tabWidth,
+    direction: tabContentDirection,
+    onClick: handleOnClick,
+    onKeyDown: handleOnKeyDown,
+    tabIndex: focus ? 0 : -1
+  });
+  return jsxs(Button, Object.assign({}, buttonProps, {
+    children: [Icon && jsx(IconWrapper, {
+      Icon: Icon,
+      iconSize: "inline"
+    }), jsx("span", {
+      children: children
+    })]
+  }));
+});
+
+export { Tab };

package/dist/components/Tabs/TabList.js

@@ -0,0 +1,86 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
+import styled from 'styled-components';
+import { tabsTokens } from './Tabs.tokens.js';
+import { useTabsContext } from './Tabs.context.js';
+import { scrollbarStyling } from '../../helpers/styling/scrollbarStyling.js';
+import { useRoveFocus } from '../../hooks/useRoveFocus.js';
+import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
+import { useOnKeyDown } from '../../hooks/useOnKeyDown.js';
+import { useOnClickOutside } from '../../hooks/useOnClickOutside.js';
+
+var TabRow = styled.div.withConfig({
+  displayName: "TabList__TabRow",
+  componentId: "sc-1ldr0lz-0"
+})(["", " ", " scroll-snap-type:x mandatory;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}&:focus-visible{", "}&:focus-visible button{outline:none;}"], tabsTokens.tabList.base, scrollbarStyling, tabsTokens.tabList.focus.base);
+var TabList = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      id = _a.id,
+      onFocus = _a.onFocus,
+      rest = __rest(_a, ["children", "id", "onFocus"]);
+
+  var _useTabsContext = useTabsContext(),
+      activeTab = _useTabsContext.activeTab,
+      tabsId = _useTabsContext.tabsId,
+      handleTabChange = _useTabsContext.handleTabChange,
+      tabListRef = _useTabsContext.tabListRef,
+      hasTabFocus = _useTabsContext.hasTabFocus,
+      tabPanelsRef = _useTabsContext.tabPanelsRef,
+      setHasTabFocus = _useTabsContext.setHasTabFocus;
+
+  var _useState = useState(id !== null && id !== void 0 ? id : "".concat(tabsId, "-tablist")),
+      _useState2 = _slicedToArray(_useState, 1),
+      uniqueId = _useState2[0];
+
+  var childrenArray = Children.toArray(children).length;
+
+  var _useRoveFocus = useRoveFocus(childrenArray, !hasTabFocus, 'row'),
+      _useRoveFocus2 = _slicedToArray(_useRoveFocus, 2),
+      focus = _useRoveFocus2[0],
+      setFocus = _useRoveFocus2[1];
+
+  var combinedRef = useCombinedRef(ref, tabListRef);
+  var tabListChildren = Children.map(children, function (child, index) {
+    return /*#__PURE__*/isValidElement(child) && /*#__PURE__*/cloneElement(child, {
+      id: "".concat(tabsId, "-tab-").concat(index),
+      'aria-controls': "".concat(tabsId, "-panel-").concat(index),
+      active: activeTab === index,
+      index: index,
+      focus: focus === index && hasTabFocus,
+      setFocus: setFocus,
+      onClick: function onClick() {
+        return handleTabChange(index);
+      }
+    });
+  });
+  useOnKeyDown('Tab', function () {
+    var _a;
+
+    setHasTabFocus(false);
+    (_a = tabPanelsRef === null || tabPanelsRef === void 0 ? void 0 : tabPanelsRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  });
+  useOnClickOutside((tabListRef === null || tabListRef === void 0 ? void 0 : tabListRef.current) || null, function () {
+    setHasTabFocus(false);
+  });
+
+  var handleOnFocus = function handleOnFocus(event) {
+    setHasTabFocus(true);
+    onFocus && onFocus(event);
+  };
+
+  var tabListProps = Object.assign(Object.assign({}, rest), {
+    ref: combinedRef,
+    role: 'tablist',
+    'aria-label': 'Bruk venste og høyre piltast for å bla',
+    id: uniqueId,
+    tabIndex: 0,
+    onFocus: handleOnFocus
+  });
+  return jsx(TabRow, Object.assign({}, tabListProps, {
+    children: tabListChildren
+  }));
+});
+
+export { TabList };

package/dist/components/Tabs/TabPanel.js

@@ -0,0 +1,36 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { tabsTokens } from './Tabs.tokens.js';
+import { focusVisibleTransitionValue } from '../../helpers/styling/focusVisible.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var Panel = styled.div.withConfig({
+  displayName: "TabPanel__Panel",
+  componentId: "sc-vkzivq-0"
+})(["@media (prefers-reduced-motion:no-preference){transition:", ";}", " ", " &:focus-visible{", "}"], focusVisibleTransitionValue, tabsTokens.panel.base, function (_ref) {
+  var active = _ref.active;
+  return !active && css(["display:none;"]);
+}, tabsTokens.panel.focusVisible.base);
+var TabPanel = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$active = _a.active,
+      active = _a$active === void 0 ? false : _a$active,
+      children = _a.children,
+      id = _a.id,
+      className = _a.className,
+      htmlProps = _a.htmlProps,
+      rest = __rest(_a, ["active", "children", "id", "className", "htmlProps"]);
+
+  var panelProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
+    ref: ref,
+    tabIndex: 0,
+    role: 'tabpanel',
+    active: active
+  });
+  return jsx(Panel, Object.assign({}, panelProps, {
+    children: children
+  }));
+});
+
+export { TabPanel };

package/dist/components/Tabs/TabPanels.js

@@ -0,0 +1,33 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, Children, isValidElement, cloneElement } from 'react';
+import { useTabsContext } from './Tabs.context.js';
+import { useCombinedRef } from '../../hooks/useCombinedRefs.js';
+
+var TabPanels = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  var _useTabsContext = useTabsContext(),
+      activeTab = _useTabsContext.activeTab,
+      tabsId = _useTabsContext.tabsId,
+      tabPanelsRef = _useTabsContext.tabPanelsRef;
+
+  var combinedRef = useCombinedRef(ref, tabPanelsRef);
+  var panelChildren = Children.map(children, function (child, index) {
+    var active = index === activeTab;
+    return /*#__PURE__*/isValidElement(child) && /*#__PURE__*/cloneElement(child, {
+      id: "".concat(tabsId, "-panel-").concat(index),
+      'aria-labelledby': "".concat(tabsId, "-tab-").concat(index),
+      active: active,
+      'aria-expanded': active
+    });
+  });
+  return jsx("div", Object.assign({
+    ref: combinedRef
+  }, rest, {
+    children: panelChildren
+  }));
+});
+
+export { TabPanels };

package/dist/components/Tabs/Tabs.context.js

@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react';
+
+var TabsContext = /*#__PURE__*/createContext({
+  activeTab: 0,
+  tabsId: '',
+  handleTabChange: function handleTabChange() {
+    return null;
+  },
+  tabListRef: null,
+  tabPanelsRef: null,
+  hasTabFocus: false,
+  setHasTabFocus: function setHasTabFocus() {
+    return null;
+  },
+  tabContentDirection: 'row',
+  tabWidth: '150px'
+});
+var useTabsContext = function useTabsContext() {
+  return useContext(TabsContext);
+};
+
+export { TabsContext, useTabsContext };

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,77 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+import { TabsContext } from './Tabs.context.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var Container = styled.div.withConfig({
+  displayName: "Tabs__Container",
+  componentId: "sc-7ta5g2-0"
+})([""]);
+var nextUniqueId = 0;
+var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
+  var id = props.id,
+      _props$activeTab = props.activeTab,
+      activeTab = _props$activeTab === void 0 ? 0 : _props$activeTab,
+      onChange = props.onChange,
+      _props$tabContentDire = props.tabContentDirection,
+      tabContentDirection = _props$tabContentDire === void 0 ? 'row' : _props$tabContentDire,
+      _props$tabWidth = props.tabWidth,
+      tabWidth = _props$tabWidth === void 0 ? '150px' : _props$tabWidth,
+      children = props.children,
+      className = props.className,
+      htmlProps = props.htmlProps,
+      rest = __rest(props, ["id", "activeTab", "onChange", "tabContentDirection", "tabWidth", "children", "className", "htmlProps"]);
+
+  var _useState = useState(id !== null && id !== void 0 ? id : "tabs-".concat(nextUniqueId++)),
+      _useState2 = _slicedToArray(_useState, 1),
+      uniqueId = _useState2[0];
+
+  var _useState3 = useState(activeTab),
+      _useState4 = _slicedToArray(_useState3, 2),
+      thisActiveTab = _useState4[0],
+      setActiveTab = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      hasTabFocus = _useState6[0],
+      setHasTabFocus = _useState6[1];
+
+  var tabListRef = useRef(null);
+  var tabPanelsRef = useRef(null);
+
+  var handleTabChange = function handleTabChange(index) {
+    setActiveTab(index);
+    onChange && onChange(index);
+  };
+
+  useEffect(function () {
+    if (activeTab && activeTab != thisActiveTab) {
+      setActiveTab(activeTab);
+    }
+  }, [activeTab, thisActiveTab]);
+  var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(uniqueId, className, htmlProps, rest)), {
+    ref: ref
+  });
+  return jsx(TabsContext.Provider, Object.assign({
+    value: {
+      tabsId: uniqueId,
+      activeTab: thisActiveTab,
+      handleTabChange: handleTabChange,
+      tabListRef: tabListRef,
+      tabPanelsRef: tabPanelsRef,
+      hasTabFocus: hasTabFocus,
+      setHasTabFocus: setHasTabFocus,
+      tabContentDirection: tabContentDirection,
+      tabWidth: tabWidth
+    }
+  }, {
+    children: jsx(Container, Object.assign({}, containerProps, {
+      children: children
+    }))
+  }));
+});
+
+export { Tabs };