@laerdal/life-react-components 3.4.3 → 3.5.0

package/dist/Table/TableTypes.d.ts

@@ -1,69 +1,69 @@
-/// <reference types="react" />
-/**
- * Types for the table.
- */
-import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
-import { ButtonProps } from '../Button/Button';
-import { IconButtonProps } from '../Button/Iconbutton';
-import { HyperlinkProps } from '../HyperLink/HyperLink';
-export interface TableProps {
-    title?: string;
-    columns: TableColumn[];
-    rows: any[];
-    border?: boolean;
-    accordion?: boolean;
-    collapsed?: boolean;
-    collapsedRows?: number;
-    sortProps?: TableSortProps;
-    remoteOperations?: boolean;
-    pagination?: TablePagination;
-    onPreviousPageClick?: () => void;
-    onNextPageClick?: () => void;
-    onRowsPerPageChange?: (count: number) => void;
-    onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void;
-    showLoadingIndicator?: boolean;
-    rowsPerPageLabel?: string;
-    noRowsLabel?: string;
-    showMoreLabel?: string;
-    showFewerLabel?: string;
-    menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;
-    selectable?: boolean;
-    onSelectionChange?: (value: any | any[]) => void;
-    multiSelect?: boolean;
-    keyExpr?: string;
-    selectedRows?: any[];
-    loaderZIndex?: string;
-    layout?: TableLayout;
-}
-export interface TableSortProps {
-    column: string;
-    direction: TableSortingDirection;
-    allowClearingSort?: boolean;
-}
-export interface TableColumn {
-    key: string;
-    noteKey?: string;
-    name: string;
-    filterValue?: string;
-    icon?: React.ReactNode;
-    width?: string | number;
-    colorFn?: (row: any, key: string) => string;
-    justify?: TableJustification;
-    shortenText?: boolean;
-    action?: (row: any, event: any) => void;
-    type?: TableColumnTypes;
-    additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;
-    customContent?: (row: any, key: string) => any;
-    sortable?: boolean;
-}
-export type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
-export type TableJustification = 'right' | 'left' | 'center';
-export type TableSortingDirection = 'asc' | 'desc';
-export type TableLayout = 'auto' | 'fixed';
-export interface TablePagination {
-    from: number;
-    to: number;
-    total: number;
-    currentPage: number;
-    rowsPerPage: number;
-}
+/// <reference types="react" />
+/**
+ * Types for the table.
+ */
+import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
+import { ButtonProps } from '../Button/Button';
+import { IconButtonProps } from '../Button/Iconbutton';
+import { HyperlinkProps } from '../HyperLink/HyperLink';
+export interface TableProps {
+    title?: string;
+    columns: TableColumn[];
+    rows: any[];
+    border?: boolean;
+    accordion?: boolean;
+    collapsed?: boolean;
+    collapsedRows?: number;
+    sortProps?: TableSortProps;
+    remoteOperations?: boolean;
+    pagination?: TablePagination;
+    onPreviousPageClick?: () => void;
+    onNextPageClick?: () => void;
+    onRowsPerPageChange?: (count: number) => void;
+    onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void;
+    showLoadingIndicator?: boolean;
+    rowsPerPageLabel?: string;
+    noRowsLabel?: string;
+    showMoreLabel?: string;
+    showFewerLabel?: string;
+    menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;
+    selectable?: boolean;
+    onSelectionChange?: (value: any | any[]) => void;
+    multiSelect?: boolean;
+    keyExpr?: string;
+    selectedRows?: any[];
+    loaderZIndex?: string;
+    layout?: TableLayout;
+}
+export interface TableSortProps {
+    column: string;
+    direction: TableSortingDirection;
+    allowClearingSort?: boolean;
+}
+export interface TableColumn {
+    key: string;
+    noteKey?: string;
+    name: string;
+    filterValue?: string;
+    icon?: React.ReactNode;
+    width?: string | number;
+    colorFn?: (row: any, key: string) => string;
+    justify?: TableJustification;
+    shortenText?: boolean;
+    action?: (row: any, event: any) => void;
+    type?: TableColumnTypes;
+    additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;
+    customContent?: (row: any, key: string) => any;
+    sortable?: boolean;
+}
+export type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
+export type TableJustification = 'right' | 'left' | 'center';
+export type TableSortingDirection = 'asc' | 'desc';
+export type TableLayout = 'auto' | 'fixed';
+export interface TablePagination {
+    from: number;
+    to: number;
+    total: number;
+    currentPage: number;
+    rowsPerPage: number;
+}

package/dist/Table/TableTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableTypes.js","names":[],"sources":["../../src/Table/TableTypes.ts"],"sourcesContent":["/**\n * Types for the table.\n */\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\n\nexport interface TableProps {\n  title?: string; // Will render header row\n\n  columns: TableColumn[];\n  rows: any[];\n\n  border?: boolean;\n  accordion?: boolean; // Will render accordion table\n  collapsed?: boolean; // whether table should be collapsed or not\n  collapsedRows?: number; // Number of rows to show when table is collapsed\n  sortProps?: TableSortProps;\n\n  remoteOperations?: boolean; // Indicates that pagination should be done remotely\n  pagination?: TablePagination; // Required only in case remotePagination is set to true\n  onPreviousPageClick?: () => void; // Will fire on previous page click in case remotePagination is set to true\n  onNextPageClick?: () => void; // Will fire on next page click in case remotePagination is set to true\n  onRowsPerPageChange?: (count: number) => void; // Will fire when rows per page changes in case remotePagination is set to true\n  onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void; // Will fire when the sorting direction changes. Used with remote pagination,\n\n  showLoadingIndicator?: boolean;\n  rowsPerPageLabel? :string; //label that will be shown next to the rows per page selector\n  noRowsLabel?: string; //label that will be shown when there are no rows in the grid\n  showMoreLabel?: string; //label that will be shown for 'accordion' grid when there are some rows collapsed\n  showFewerLabel?: string; //label that will be shown for 'accordion' grid when user can 'collapse' some of the rows\n\n  menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;\n\n  selectable?: boolean;\n  onSelectionChange?: (value: any | any[]) => void;\n  multiSelect?: boolean;\n  keyExpr?: string;\n  selectedRows?: any[];\n  loaderZIndex?: string;\n\n  layout?: TableLayout;\n}\n\nexport interface TableSortProps {\n  column: string;\n  direction: TableSortingDirection;\n  allowClearingSort?: boolean;\n}\n\nexport interface TableColumn {\n  key: string;\n  noteKey?: string;\n  name: string;\n  filterValue?: string;\n\n  icon?: React.ReactNode;\n\n  width?: string | number;\n  colorFn?: (row: any, key: string) => string;\n  justify?: TableJustification;\n  shortenText?: boolean;\n\n  action?: (row: any, event: any) => void;\n  type?: TableColumnTypes;\n  additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;\n  customContent?: (row: any, key: string) => any;\n  sortable?: boolean;\n}\n\nexport type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';\n\nexport type TableJustification = 'right' | 'left' | 'center';\n\nexport type TableSortingDirection = 'asc' | 'desc';\n\nexport type TableLayout = 'auto' | 'fixed';\n\nexport interface TablePagination {\n  from: number;\n  to: number;\n  total: number;\n  currentPage: number;\n  rowsPerPage: number;\n}\n\n// will override component properties in case of button, icon and link\n"],"mappings":""}
+{"version":3,"file":"TableTypes.js","names":[],"sources":["../../src/Table/TableTypes.ts"],"sourcesContent":["/**\r\n * Types for the table.\r\n */\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {ButtonProps} from '../Button/Button';\r\nimport {IconButtonProps} from '../Button/Iconbutton';\r\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\r\n\r\nexport interface TableProps {\r\n  title?: string; // Will render header row\r\n\r\n  columns: TableColumn[];\r\n  rows: any[];\r\n\r\n  border?: boolean;\r\n  accordion?: boolean; // Will render accordion table\r\n  collapsed?: boolean; // whether table should be collapsed or not\r\n  collapsedRows?: number; // Number of rows to show when table is collapsed\r\n  sortProps?: TableSortProps;\r\n\r\n  remoteOperations?: boolean; // Indicates that pagination should be done remotely\r\n  pagination?: TablePagination; // Required only in case remotePagination is set to true\r\n  onPreviousPageClick?: () => void; // Will fire on previous page click in case remotePagination is set to true\r\n  onNextPageClick?: () => void; // Will fire on next page click in case remotePagination is set to true\r\n  onRowsPerPageChange?: (count: number) => void; // Will fire when rows per page changes in case remotePagination is set to true\r\n  onTriggerSortingChange?: (key: string, direction?: TableSortingDirection) => void; // Will fire when the sorting direction changes. Used with remote pagination,\r\n\r\n  showLoadingIndicator?: boolean;\r\n  rowsPerPageLabel? :string; //label that will be shown next to the rows per page selector\r\n  noRowsLabel?: string; //label that will be shown when there are no rows in the grid\r\n  showMoreLabel?: string; //label that will be shown for 'accordion' grid when there are some rows collapsed\r\n  showFewerLabel?: string; //label that will be shown for 'accordion' grid when user can 'collapse' some of the rows\r\n\r\n  menu?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width' | 'itemsType' | 'multiSelect'>;\r\n\r\n  selectable?: boolean;\r\n  onSelectionChange?: (value: any | any[]) => void;\r\n  multiSelect?: boolean;\r\n  keyExpr?: string;\r\n  selectedRows?: any[];\r\n  loaderZIndex?: string;\r\n\r\n  layout?: TableLayout;\r\n}\r\n\r\nexport interface TableSortProps {\r\n  column: string;\r\n  direction: TableSortingDirection;\r\n  allowClearingSort?: boolean;\r\n}\r\n\r\nexport interface TableColumn {\r\n  key: string;\r\n  noteKey?: string;\r\n  name: string;\r\n  filterValue?: string;\r\n\r\n  icon?: React.ReactNode;\r\n\r\n  width?: string | number;\r\n  colorFn?: (row: any, key: string) => string;\r\n  justify?: TableJustification;\r\n  shortenText?: boolean;\r\n\r\n  action?: (row: any, event: any) => void;\r\n  type?: TableColumnTypes;\r\n  additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled' | 'tooltip'> | Pick<HyperlinkProps, 'variant'>;\r\n  customContent?: (row: any, key: string) => any;\r\n  sortable?: boolean;\r\n}\r\n\r\nexport type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';\r\n\r\nexport type TableJustification = 'right' | 'left' | 'center';\r\n\r\nexport type TableSortingDirection = 'asc' | 'desc';\r\n\r\nexport type TableLayout = 'auto' | 'fixed';\r\n\r\nexport interface TablePagination {\r\n  from: number;\r\n  to: number;\r\n  total: number;\r\n  currentPage: number;\r\n  rowsPerPage: number;\r\n}\r\n\r\n// will override component properties in case of button, icon and link\r\n"],"mappings":""}

package/dist/Table/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Table/index.ts"],"sourcesContent":["export * from './TableTypes'\nexport * from './TableStyles';\nexport {default as Table} from './Table';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Table/index.ts"],"sourcesContent":["export * from './TableTypes'\r\nexport * from './TableStyles';\r\nexport {default as Table} from './Table';\r\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA"}

package/dist/Table/index.d.ts

@@ -1,3 +1,3 @@
-export * from './TableTypes';
-export * from './TableStyles';
-export { default as Table } from './Table';
+export * from './TableTypes';
+export * from './TableStyles';
+export { default as Table } from './Table';

package/dist/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","Table"],"sources":["../../src/Table/index.ts"],"sourcesContent":["export * from './TableTypes'\nexport * from './TableStyles';\nexport {default as Table} from './Table';\n"],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,eAAe;AAC7B,SAAQA,OAAO,IAAIC,KAAK,QAAO,SAAS"}
+{"version":3,"file":"index.js","names":["default","Table"],"sources":["../../src/Table/index.ts"],"sourcesContent":["export * from './TableTypes'\r\nexport * from './TableStyles';\r\nexport {default as Table} from './Table';\r\n"],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,eAAe;AAC7B,SAAQA,OAAO,IAAIC,KAAK,QAAO,SAAS"}

package/dist/Tabs/HorizontalTabs.cjs

@@ -39,9 +39,9 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
     onTabChange = _ref.onTabChange,
     variant = _ref.variant,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  /**
-   * Informs parent component of tab change and clears focus.
-   * @param to - A link to which user should be navigated.
+  /**
+   * Informs parent component of tab change and clears focus.
+   * @param to - A link to which user should be navigated.
    */
   var doTabChange = function doTabChange(to) {
     // Let's inform parent component

package/dist/Tabs/HorizontalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.cjs","names":["HorizontalTabContainer","styled","div","focusStyles","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_600","Z_INDEXES","active","neutral_800","neutral_20","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","variant","rest","doTabChange","to","document","activeElement","HTMLElement","blur","React","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","defaultOnMouseDownHandler","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport Colors from \"../styles/colors\";\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus {\n    ${focusStyles};\n  }\n\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_600};\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &.selected.floating {\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ${COLORS.neutral_100};\n    border-right: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ${COLORS.primary_500};\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ${COLORS.primary_500};\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:hover:after {\n    background-color: ${COLORS.primary_700};\n  }\n\n  &:active, &:active.selected {\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    color: ${COLORS.neutral_300};\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.${Size.XSmall} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.${Size.Small} {\n    ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.${Size.Medium} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.${Size.Large} {\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n  variant?: 'default' | 'floating';\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest}: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  const [focused, setFocused] = React.useState<boolean>(false);\n  const [currentTab, setCurrentTab] = React.useState<string>();\n\n  React.useEffect(() => {\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\n    if (selectedTab)\n      setCurrentTab(selectedTab.to);\n  }, [tabs]);\n\n  const tabListBlur = () => setFocused(false);\n\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n  const changeTabInternal = (tab: HorizontalTab) => {\n    tab.selected = true;\n    tabs.forEach(x => {\n      if (x.to != tab.to)\n        x.selected = false;\n    });\n    setCurrentTab(tab.to);\n    onTabChange(tab.to);\n  }\n\n  const tabListKeyDown = (e: React.KeyboardEvent) => {\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n      e.preventDefault();\n      if (e.key === 'ArrowRight') {\n        tabs.forEach((x, i) => {\n          if (x.to != currentTab)\n            return;\n\n          for (let j = 1; j < tabs.length - 1; j++) {\n            let nextIndex = j + i;\n            if (nextIndex > tabs.length - 1)\n              nextIndex = nextIndex - tabs.length;\n            if (tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n            break;\n          }\n        });\n      }\n\n      if (e.key === 'ArrowLeft') {\n        tabs.forEach((x, i) => {\n          if (x.to != currentTab)\n            return;\n\n          for (let j = 1; j < tabs.length - 1; j++) {\n            let nextIndex = i - j;\n            if (nextIndex < 0)\n              nextIndex = nextIndex + tabs.length;\n            if (tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n            break;\n          }\n        });\n      }\n    }\n  };\n\n  return (\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown}\n                            role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n      {\n        variant !== 'floating' && <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`}/>\n      }\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const {value, selected, to, disabled, className, ...rest} = tab;\n        return (\n          <TabButton\n            role=\"tab\"\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            aria-selected={selected}\n            aria-expanded={selected}\n            tabIndex={-1}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            disabled={disabled}\n            className={`${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`}\n            onClick={() => !disabled && changeTabInternal(tab)}\n            {...rest}>\n            {tab.value}\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalTabs.cjs","names":["HorizontalTabContainer","styled","div","focusStyles","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_600","Z_INDEXES","active","neutral_800","neutral_20","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","variant","rest","doTabChange","to","document","activeElement","HTMLElement","blur","React","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","defaultOnMouseDownHandler","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport Colors from \"../styles/colors\";\r\n\r\n// Add custom styles\r\nconst HorizontalTabContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  position: relative;\r\n  flex-direction: row;\r\n\r\n  &:focus {\r\n    ${focusStyles};\r\n  }\r\n\r\n`;\r\n\r\nconst TabSideFill = styled.div`\r\n  position: absolute;\r\n  border-bottom: 1px solid ${COLORS.neutral_100};\r\n  bottom: 0;\r\n  width: 100%;\r\n\r\n  &.fill {\r\n    background: ${COLORS.white};\r\n  }\r\n`;\r\n\r\nconst TabButton = styled.button`\r\n  color: ${COLORS.neutral_600};\r\n  border: none;\r\n  background-color: transparent;\r\n  position: relative;\r\n  cursor: pointer;\r\n  display: flex;\r\n  box-sizing: border-box;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 0;\r\n\r\n  &[aria-selected=\"true\"] {\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.floating {\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  &.selected {\r\n    background-color: ${COLORS.white};\r\n    color: ${COLORS.neutral_800};\r\n  }\r\n\r\n  &.selected.floating {\r\n    background-color: ${COLORS.neutral_20};\r\n  }\r\n\r\n  &.default {\r\n    border-left: 1px solid transparent;\r\n    border-right: 1px solid transparent;\r\n  }\r\n  \r\n  &.default.selected {\r\n    border-left: 1px solid ${COLORS.neutral_100};\r\n    border-right: 1px solid ${COLORS.neutral_100};\r\n  }\r\n\r\n  &.selected:after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: -1px;\r\n    right: -1px;\r\n    height: 2px;\r\n    background-color: ${COLORS.primary_500};\r\n  }\r\n\r\n  &.selected.floating:after {\r\n    top: unset;\r\n    bottom: 1px;\r\n    left: 1px;\r\n    right: 1px;\r\n    height: 2px;\r\n    border-radius: 2px;\r\n    background-color: ${COLORS.primary_500};\r\n  }\r\n\r\n\r\n  &:hover, &:hover.selected {\r\n    background: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:hover:after {\r\n    background-color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:active, &:active.selected {\r\n    background: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n    outline: none;\r\n  }\r\n\r\n  &:active:after {\r\n    background-color: ${COLORS.primary_800};\r\n  }\r\n\r\n  &:disabled {\r\n    color: ${COLORS.neutral_300};\r\n    background: transparent;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  // Sizes\r\n  &.${Size.XSmall} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 32px;\r\n    margin-top: 16px;\r\n  }\r\n\r\n  &.${Size.Small} {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 40px;\r\n    margin-top: 8px;\r\n  }\r\n\r\n  &.${Size.Medium} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    height: 48px;\r\n    min-width: 96px;\r\n    padding: 0 16px;\r\n  }\r\n\r\n  &.${Size.Large} {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    height: 56px;\r\n    min-width: 144px;\r\n    padding: 0 16px;\r\n  }\r\n`;\r\n\r\n// Add component-specific types\r\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  size: Size;\r\n  tabs: HorizontalTab[];\r\n  sideFill?: boolean;\r\n  fullWidth?: boolean;\r\n  onTabChange: (to: string) => void;\r\n  variant?: 'default' | 'floating';\r\n}\r\n\r\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\r\n  value: string;\r\n  selected: boolean;\r\n  to: string;\r\n}\r\n\r\nconst HorizontalTabs = ({size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest}: HorizontalTabProps) => {\r\n  /**\r\n   * Informs parent component of tab change and clears focus.\r\n   * @param to - A link to which user should be navigated.\r\n   */\r\n  const doTabChange = (to: string): void => {\r\n    // Let's inform parent component\r\n    onTabChange(to);\r\n\r\n    // Let's clear focus\r\n    if (document.activeElement instanceof HTMLElement) {\r\n      document.activeElement!.blur();\r\n    }\r\n  };\r\n\r\n  const [focused, setFocused] = React.useState<boolean>(false);\r\n  const [currentTab, setCurrentTab] = React.useState<string>();\r\n\r\n  React.useEffect(() => {\r\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\r\n    if (selectedTab)\r\n      setCurrentTab(selectedTab.to);\r\n  }, [tabs]);\r\n\r\n  const tabListBlur = () => setFocused(false);\r\n\r\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\r\n\r\n  const changeTabInternal = (tab: HorizontalTab) => {\r\n    tab.selected = true;\r\n    tabs.forEach(x => {\r\n      if (x.to != tab.to)\r\n        x.selected = false;\r\n    });\r\n    setCurrentTab(tab.to);\r\n    onTabChange(tab.to);\r\n  }\r\n\r\n  const tabListKeyDown = (e: React.KeyboardEvent) => {\r\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\r\n      e.preventDefault();\r\n      if (e.key === 'ArrowRight') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = j + i;\r\n            if (nextIndex > tabs.length - 1)\r\n              nextIndex = nextIndex - tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n\r\n      if (e.key === 'ArrowLeft') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = i - j;\r\n            if (nextIndex < 0)\r\n              nextIndex = nextIndex + tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown}\r\n                            role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\r\n      {\r\n        variant !== 'floating' && <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`}/>\r\n      }\r\n      {tabs.map((tab: HorizontalTab, index: number) => {\r\n        const {value, selected, to, disabled, className, ...rest} = tab;\r\n        return (\r\n          <TabButton\r\n            role=\"tab\"\r\n            data-testid={`tab_${value}`}\r\n            key={`${tab}_${index}`}\r\n            aria-selected={selected}\r\n            aria-expanded={selected}\r\n            tabIndex={-1}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\r\n            disabled={disabled}\r\n            className={`${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`}\r\n            onClick={() => !disabled && changeTabInternal(tab)}\r\n            {...rest}>\r\n            {tab.value}\r\n          </TabButton>\r\n        );\r\n      })}\r\n    </HorizontalTabContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalTabs;\r\n"],"mappings":"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"}

package/dist/Tabs/HorizontalTabs.d.ts

@@ -1,20 +1,20 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {
-    size: Size;
-    tabs: HorizontalTab[];
-    sideFill?: boolean;
-    fullWidth?: boolean;
-    onTabChange: (to: string) => void;
-    variant?: 'default' | 'floating';
-}
-export interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {
-    value: string;
-    selected: boolean;
-    to: string;
-}
-declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest }: HorizontalTabProps) => JSX.Element;
-export default HorizontalTabs;
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+import { Size } from '../types';
+interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {
+    size: Size;
+    tabs: HorizontalTab[];
+    sideFill?: boolean;
+    fullWidth?: boolean;
+    onTabChange: (to: string) => void;
+    variant?: 'default' | 'floating';
+}
+export interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {
+    value: string;
+    selected: boolean;
+    to: string;
+}
+declare const HorizontalTabs: ({ size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest }: HorizontalTabProps) => JSX.Element;
+export default HorizontalTabs;

package/dist/Tabs/HorizontalTabs.js

@@ -8,19 +8,19 @@ var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "varian
 var _templateObject, _templateObject2, _templateObject3;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-/**
- * Import React libraries.
+/**
+ * Import React libraries.
  */
 import * as React from 'react';
 import { Size } from '../types';
 
-/**
- * Import custom styles.
+/**
+ * Import custom styles.
  */
 import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
 
-/**
- * Import third-party libraries.
+/**
+ * Import third-party libraries.
  */
 import styled from 'styled-components';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles';
@@ -43,9 +43,9 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
     onTabChange = _ref.onTabChange,
     variant = _ref.variant,
     rest = _objectWithoutProperties(_ref, _excluded);
-  /**
-   * Informs parent component of tab change and clears focus.
-   * @param to - A link to which user should be navigated.
+  /**
+   * Informs parent component of tab change and clears focus.
+   * @param to - A link to which user should be navigated.
    */
   var doTabChange = function doTabChange(to) {
     // Let's inform parent component

package/dist/Tabs/HorizontalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.js","names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_600","active","neutral_800","neutral_20","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","variant","rest","doTabChange","to","document","activeElement","HTMLElement","blur","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport Colors from \"../styles/colors\";\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus {\n    ${focusStyles};\n  }\n\n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_600};\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ${COLORS.white};\n    color: ${COLORS.neutral_800};\n  }\n\n  &.selected.floating {\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ${COLORS.neutral_100};\n    border-right: 1px solid ${COLORS.neutral_100};\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ${COLORS.primary_500};\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ${COLORS.primary_500};\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:hover:after {\n    background-color: ${COLORS.primary_700};\n  }\n\n  &:active, &:active.selected {\n    background: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ${COLORS.primary_800};\n  }\n\n  &:disabled {\n    color: ${COLORS.neutral_300};\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.${Size.XSmall} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.${Size.Small} {\n    ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.${Size.Medium} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.${Size.Large} {\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n  variant?: 'default' | 'floating';\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest}: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  const [focused, setFocused] = React.useState<boolean>(false);\n  const [currentTab, setCurrentTab] = React.useState<string>();\n\n  React.useEffect(() => {\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\n    if (selectedTab)\n      setCurrentTab(selectedTab.to);\n  }, [tabs]);\n\n  const tabListBlur = () => setFocused(false);\n\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n  const changeTabInternal = (tab: HorizontalTab) => {\n    tab.selected = true;\n    tabs.forEach(x => {\n      if (x.to != tab.to)\n        x.selected = false;\n    });\n    setCurrentTab(tab.to);\n    onTabChange(tab.to);\n  }\n\n  const tabListKeyDown = (e: React.KeyboardEvent) => {\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n      e.preventDefault();\n      if (e.key === 'ArrowRight') {\n        tabs.forEach((x, i) => {\n          if (x.to != currentTab)\n            return;\n\n          for (let j = 1; j < tabs.length - 1; j++) {\n            let nextIndex = j + i;\n            if (nextIndex > tabs.length - 1)\n              nextIndex = nextIndex - tabs.length;\n            if (tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n            break;\n          }\n        });\n      }\n\n      if (e.key === 'ArrowLeft') {\n        tabs.forEach((x, i) => {\n          if (x.to != currentTab)\n            return;\n\n          for (let j = 1; j < tabs.length - 1; j++) {\n            let nextIndex = i - j;\n            if (nextIndex < 0)\n              nextIndex = nextIndex + tabs.length;\n            if (tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n            break;\n          }\n        });\n      }\n    }\n  };\n\n  return (\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown}\n                            role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n      {\n        variant !== 'floating' && <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`}/>\n      }\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const {value, selected, to, disabled, className, ...rest} = tab;\n        return (\n          <TabButton\n            role=\"tab\"\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            aria-selected={selected}\n            aria-expanded={selected}\n            tabIndex={-1}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            disabled={disabled}\n            className={`${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`}\n            onClick={() => !disabled && changeTabInternal(tab)}\n            {...rest}>\n            {tab.value}\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,IAAI,QAAO,UAAU;;AAE7B;AACA;AACA;AACA,SAAQC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,QAAO,WAAW;;AAEjE;AACA;AACA;AACA,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAO,WAAW;AACrG,SAAQC,SAAS,QAAO,WAAW;AACnC,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAGpD;AACA,IAAMC,sBAAsB,GAAGP,MAAM,CAACQ,GAAG,0LAOnCT,WAAW,CAGhB;AAED,IAAMU,WAAW,GAAGT,MAAM,CAACQ,GAAG,2MAEDX,MAAM,CAACa,WAAW,EAK7Bb,MAAM,CAACc,KAAK,CAE7B;AAED,IAAMC,SAAS,GAAGZ,MAAM,CAACa,MAAM,y0DACpBhB,MAAM,CAACiB,WAAW,EAYdT,SAAS,CAACU,MAAM,EAQPlB,MAAM,CAACc,KAAK,EACvBd,MAAM,CAACmB,WAAW,EAIPnB,MAAM,CAACoB,UAAU,EASZpB,MAAM,CAACa,WAAW,EACjBb,MAAM,CAACa,WAAW,EAUxBb,MAAM,CAACqB,WAAW,EAUlBrB,MAAM,CAACqB,WAAW,EAKxBrB,MAAM,CAACsB,UAAU,EACtBtB,MAAM,CAACuB,WAAW,EAIPvB,MAAM,CAACuB,WAAW,EAIxBvB,MAAM,CAACwB,WAAW,EACvBxB,MAAM,CAACyB,WAAW,EAKPzB,MAAM,CAACyB,WAAW,EAI7BzB,MAAM,CAAC0B,WAAW,EAMzB3B,IAAI,CAAC4B,MAAM,EACXpB,kBAAkB,CAACN,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC,EAMpD7B,IAAI,CAAC8B,KAAK,EACVvB,iBAAiB,CAACL,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC,EAMnD7B,IAAI,CAAC+B,MAAM,EACXzB,iBAAiB,CAACJ,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC,EAMnD7B,IAAI,CAACgC,KAAK,EACV3B,iBAAiB,CAACH,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC,CAKxD;;AAED;;AAgBA,IAAMI,cAAc,GAAG,SAAjBA,cAAc,OAA6F;EAAA,IAAxFC,IAAI,QAAJA,IAAI;IAAEC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAEC,WAAW,QAAXA,WAAW;IAAEC,OAAO,QAAPA,OAAO;IAAKC,IAAI;EACrF;AACF;AACA;AACA;EACE,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,EAAU,EAAW;IACxC;IACAJ,WAAW,CAACI,EAAE,CAAC;;IAEf;IACA,IAAIC,QAAQ,CAACC,aAAa,YAAYC,WAAW,EAAE;MACjDF,QAAQ,CAACC,aAAa,CAAEE,IAAI,EAAE;IAChC;EACF,CAAC;EAED,sBAA8B/C,KAAK,CAACgD,QAAQ,CAAU,KAAK,CAAC;IAAA;IAArDC,OAAO;IAAEC,UAAU;EAC1B,uBAAoClD,KAAK,CAACgD,QAAQ,EAAU;IAAA;IAArDG,UAAU;IAAEC,aAAa;EAEhCpD,KAAK,CAACqD,SAAS,CAAC,YAAM;IACpB,IAAMC,WAAW,GAAGlB,IAAI,CAACmB,IAAI,CAAC,UAAAC,CAAC;MAAA,OAAIA,CAAC,CAACC,QAAQ,IAAI,CAACD,CAAC,CAACE,QAAQ;IAAA,EAAC;IAC7D,IAAIJ,WAAW,EACbF,aAAa,CAACE,WAAW,CAACX,EAAE,CAAC;EACjC,CAAC,EAAE,CAACP,IAAI,CAAC,CAAC;EAEV,IAAMuB,WAAW,GAAG,SAAdA,WAAW;IAAA,OAAST,UAAU,CAAC,KAAK,CAAC;EAAA;EAE3C,IAAMU,YAAY,GAAG,SAAfA,YAAY,CAAIC,CAA4C;IAAA,OAAKX,UAAU,CAAC,IAAI,CAAC;EAAA;EAEvF,IAAMY,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,GAAkB,EAAK;IAChDA,GAAG,CAACN,QAAQ,GAAG,IAAI;IACnBrB,IAAI,CAAC4B,OAAO,CAAC,UAAAR,CAAC,EAAI;MAChB,IAAIA,CAAC,CAACb,EAAE,IAAIoB,GAAG,CAACpB,EAAE,EAChBa,CAAC,CAACC,QAAQ,GAAG,KAAK;IACtB,CAAC,CAAC;IACFL,aAAa,CAACW,GAAG,CAACpB,EAAE,CAAC;IACrBJ,WAAW,CAACwB,GAAG,CAACpB,EAAE,CAAC;EACrB,CAAC;EAED,IAAMsB,cAAc,GAAG,SAAjBA,cAAc,CAAIJ,CAAsB,EAAK;IACjD,IAAIZ,OAAO,KAAKY,CAAC,CAACK,GAAG,KAAK,WAAW,IAAIL,CAAC,CAACK,GAAG,KAAK,YAAY,CAAC,EAAE;MAChEL,CAAC,CAACM,cAAc,EAAE;MAClB,IAAIN,CAAC,CAACK,GAAG,KAAK,YAAY,EAAE;QAC1B9B,IAAI,CAAC4B,OAAO,CAAC,UAACR,CAAC,EAAEY,CAAC,EAAK;UACrB,IAAIZ,CAAC,CAACb,EAAE,IAAIQ,UAAU,EACpB;UAEF,KAAK,IAAIkB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGjC,IAAI,CAACkC,MAAM,GAAG,CAAC,EAAED,CAAC,EAAE,EAAE;YACxC,IAAIE,SAAS,GAAGF,CAAC,GAAGD,CAAC;YACrB,IAAIG,SAAS,GAAGnC,IAAI,CAACkC,MAAM,GAAG,CAAC,EAC7BC,SAAS,GAAGA,SAAS,GAAGnC,IAAI,CAACkC,MAAM;YACrC,IAAIlC,IAAI,CAACmC,SAAS,CAAC,CAACb,QAAQ,EAC1B;YACFI,iBAAiB,CAAC1B,IAAI,CAACmC,SAAS,CAAC,CAAC;YAClC;UACF;QACF,CAAC,CAAC;MACJ;MAEA,IAAIV,CAAC,CAACK,GAAG,KAAK,WAAW,EAAE;QACzB9B,IAAI,CAAC4B,OAAO,CAAC,UAACR,CAAC,EAAEY,CAAC,EAAK;UACrB,IAAIZ,CAAC,CAACb,EAAE,IAAIQ,UAAU,EACpB;UAEF,KAAK,IAAIkB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGjC,IAAI,CAACkC,MAAM,GAAG,CAAC,EAAED,CAAC,EAAE,EAAE;YACxC,IAAIE,SAAS,GAAGH,CAAC,GAAGC,CAAC;YACrB,IAAIE,SAAS,GAAG,CAAC,EACfA,SAAS,GAAGA,SAAS,GAAGnC,IAAI,CAACkC,MAAM;YACrC,IAAIlC,IAAI,CAACmC,SAAS,CAAC,CAACb,QAAQ,EAC1B;YACFI,iBAAiB,CAAC1B,IAAI,CAACmC,SAAS,CAAC,CAAC;YAClC;UACF;QACF,CAAC,CAAC;MACJ;IACF;EACF,CAAC;EAED,oBACE,MAAC,sBAAsB;IAAC,QAAQ,EAAE,CAAE;IAAC,MAAM,EAAEZ,WAAY;IAAC,OAAO,EAAEC,YAAa;IAAC,SAAS,EAAEK,cAAe;IACnF,IAAI,EAAC,SAAS;IAAC,eAAa;EAA4B,GAAKxB,IAAI;IAAA,WAErFD,OAAO,KAAK,UAAU,iBAAI,KAAC,WAAW;MAAC,QAAQ,EAAE,CAAC,CAAE;MAAC,SAAS,YAAKH,QAAQ,GAAG,MAAM,GAAG,EAAE;IAAG,EAAE,EAE/FD,IAAI,CAACoC,GAAG,CAAC,UAACT,GAAkB,EAAEU,KAAa,EAAK;MAC/C,IAAOC,KAAK,GAAgDX,GAAG,CAAxDW,KAAK;QAAEjB,QAAQ,GAAsCM,GAAG,CAAjDN,QAAQ;QAAEd,EAAE,GAAkCoB,GAAG,CAAvCpB,EAAE;QAAEe,QAAQ,GAAwBK,GAAG,CAAnCL,QAAQ;QAAEiB,SAAS,GAAaZ,GAAG,CAAzBY,SAAS;QAAKlC,IAAI,4BAAIsB,GAAG;MAC/D,oBACE,KAAC,SAAS;QACR,IAAI,EAAC,KAAK;QACV,6BAAoBW,KAAK,CAAG;QAE5B,iBAAejB,QAAS;QACxB,iBAAeA,QAAS;QACxB,QAAQ,EAAE,CAAC,CAAE;QACb,WAAW,EAAE9C,yBAA0B;QACvC,KAAK,EAAE2B,SAAS,GAAG;UAACsC,KAAK,YAAK,GAAG,GAAGxC,IAAI,CAACkC,MAAM;QAAG,CAAC,GAAG,CAAC,CAAE;QACzD,QAAQ,EAAEZ,QAAS;QACnB,SAAS,YAAKiB,SAAS,IAAI,EAAE,cAAIxC,IAAI,cAAIK,OAAO,IAAI,SAAS,cAAIuB,GAAG,CAACN,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAG;QAClG,OAAO,EAAE;UAAA,OAAM,CAACC,QAAQ,IAAII,iBAAiB,CAACC,GAAG,CAAC;QAAA;MAAC,GAC/CtB,IAAI;QAAA,UACPsB,GAAG,CAACW;MAAK,cAVFX,GAAG,cAAIU,KAAK,EAWV;IAEhB,CAAC,CAAC;EAAA,GACqB;AAE7B,CAAC;AAAC;EAtHArC,IAAI;IAQJsC,KAAK;IACLjB,QAAQ;IACRd,EAAE;EAAA;EATFN,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,OAAO,aAAG,SAAS,EAAG,UAAU;AAAA;AAoHlC,eAAeN,cAAc"}
+{"version":3,"file":"HorizontalTabs.js","names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_600","active","neutral_800","neutral_20","primary_500","primary_20","primary_700","primary_100","primary_800","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","variant","rest","doTabChange","to","document","activeElement","HTMLElement","blur","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport Colors from \"../styles/colors\";\r\n\r\n// Add custom styles\r\nconst HorizontalTabContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  position: relative;\r\n  flex-direction: row;\r\n\r\n  &:focus {\r\n    ${focusStyles};\r\n  }\r\n\r\n`;\r\n\r\nconst TabSideFill = styled.div`\r\n  position: absolute;\r\n  border-bottom: 1px solid ${COLORS.neutral_100};\r\n  bottom: 0;\r\n  width: 100%;\r\n\r\n  &.fill {\r\n    background: ${COLORS.white};\r\n  }\r\n`;\r\n\r\nconst TabButton = styled.button`\r\n  color: ${COLORS.neutral_600};\r\n  border: none;\r\n  background-color: transparent;\r\n  position: relative;\r\n  cursor: pointer;\r\n  display: flex;\r\n  box-sizing: border-box;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 0;\r\n\r\n  &[aria-selected=\"true\"] {\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.floating {\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  &.selected {\r\n    background-color: ${COLORS.white};\r\n    color: ${COLORS.neutral_800};\r\n  }\r\n\r\n  &.selected.floating {\r\n    background-color: ${COLORS.neutral_20};\r\n  }\r\n\r\n  &.default {\r\n    border-left: 1px solid transparent;\r\n    border-right: 1px solid transparent;\r\n  }\r\n  \r\n  &.default.selected {\r\n    border-left: 1px solid ${COLORS.neutral_100};\r\n    border-right: 1px solid ${COLORS.neutral_100};\r\n  }\r\n\r\n  &.selected:after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: -1px;\r\n    right: -1px;\r\n    height: 2px;\r\n    background-color: ${COLORS.primary_500};\r\n  }\r\n\r\n  &.selected.floating:after {\r\n    top: unset;\r\n    bottom: 1px;\r\n    left: 1px;\r\n    right: 1px;\r\n    height: 2px;\r\n    border-radius: 2px;\r\n    background-color: ${COLORS.primary_500};\r\n  }\r\n\r\n\r\n  &:hover, &:hover.selected {\r\n    background: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:hover:after {\r\n    background-color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:active, &:active.selected {\r\n    background: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n    outline: none;\r\n  }\r\n\r\n  &:active:after {\r\n    background-color: ${COLORS.primary_800};\r\n  }\r\n\r\n  &:disabled {\r\n    color: ${COLORS.neutral_300};\r\n    background: transparent;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  // Sizes\r\n  &.${Size.XSmall} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 32px;\r\n    margin-top: 16px;\r\n  }\r\n\r\n  &.${Size.Small} {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 40px;\r\n    margin-top: 8px;\r\n  }\r\n\r\n  &.${Size.Medium} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    height: 48px;\r\n    min-width: 96px;\r\n    padding: 0 16px;\r\n  }\r\n\r\n  &.${Size.Large} {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    height: 56px;\r\n    min-width: 144px;\r\n    padding: 0 16px;\r\n  }\r\n`;\r\n\r\n// Add component-specific types\r\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  size: Size;\r\n  tabs: HorizontalTab[];\r\n  sideFill?: boolean;\r\n  fullWidth?: boolean;\r\n  onTabChange: (to: string) => void;\r\n  variant?: 'default' | 'floating';\r\n}\r\n\r\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\r\n  value: string;\r\n  selected: boolean;\r\n  to: string;\r\n}\r\n\r\nconst HorizontalTabs = ({size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest}: HorizontalTabProps) => {\r\n  /**\r\n   * Informs parent component of tab change and clears focus.\r\n   * @param to - A link to which user should be navigated.\r\n   */\r\n  const doTabChange = (to: string): void => {\r\n    // Let's inform parent component\r\n    onTabChange(to);\r\n\r\n    // Let's clear focus\r\n    if (document.activeElement instanceof HTMLElement) {\r\n      document.activeElement!.blur();\r\n    }\r\n  };\r\n\r\n  const [focused, setFocused] = React.useState<boolean>(false);\r\n  const [currentTab, setCurrentTab] = React.useState<string>();\r\n\r\n  React.useEffect(() => {\r\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\r\n    if (selectedTab)\r\n      setCurrentTab(selectedTab.to);\r\n  }, [tabs]);\r\n\r\n  const tabListBlur = () => setFocused(false);\r\n\r\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\r\n\r\n  const changeTabInternal = (tab: HorizontalTab) => {\r\n    tab.selected = true;\r\n    tabs.forEach(x => {\r\n      if (x.to != tab.to)\r\n        x.selected = false;\r\n    });\r\n    setCurrentTab(tab.to);\r\n    onTabChange(tab.to);\r\n  }\r\n\r\n  const tabListKeyDown = (e: React.KeyboardEvent) => {\r\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\r\n      e.preventDefault();\r\n      if (e.key === 'ArrowRight') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = j + i;\r\n            if (nextIndex > tabs.length - 1)\r\n              nextIndex = nextIndex - tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n\r\n      if (e.key === 'ArrowLeft') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = i - j;\r\n            if (nextIndex < 0)\r\n              nextIndex = nextIndex + tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown}\r\n                            role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\r\n      {\r\n        variant !== 'floating' && <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`}/>\r\n      }\r\n      {tabs.map((tab: HorizontalTab, index: number) => {\r\n        const {value, selected, to, disabled, className, ...rest} = tab;\r\n        return (\r\n          <TabButton\r\n            role=\"tab\"\r\n            data-testid={`tab_${value}`}\r\n            key={`${tab}_${index}`}\r\n            aria-selected={selected}\r\n            aria-expanded={selected}\r\n            tabIndex={-1}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\r\n            disabled={disabled}\r\n            className={`${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`}\r\n            onClick={() => !disabled && changeTabInternal(tab)}\r\n            {...rest}>\r\n            {tab.value}\r\n          </TabButton>\r\n        );\r\n      })}\r\n    </HorizontalTabContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalTabs;\r\n"],"mappings":"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"}

package/dist/Tabs/TabLink.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.cjs","names":["OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","React","forwardRef","ref","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","useState","activeState","setActiveState","toString","isActive","defaultOnMouseDownHandler","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  forceDeactivate?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  endLineIcon?: React.ReactNode;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  onActiveStateChanged?: (state: boolean) => void;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n} & NavLinkProps;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst EndLineIcon = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\nconst Wrapper = styled.div<{ disabled: boolean }>`\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    font-size: 16px;\n    line-height: 120%;\n    color: ${COLORS.neutral_600};\n\n    background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n\n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n\n    &.active {\n      z-index: ${Z_INDEXES.active};\n      background-color: ${COLORS.neutral_20};\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ${COLORS.primary_20};\n    }\n\n    &:hover, &.dropdown-hover {\n      z-index: ${Z_INDEXES.hover};\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n\n    &:active {\n      z-index: ${Z_INDEXES.active};\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n\n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      &::after {\n        background-color: ${COLORS.primary_600};\n      }\n    }\n\n    &.active:active {\n      background-color: ${COLORS.primary_100};\n\n      &::after {\n        background-color: ${COLORS.primary_800};\n      }\n    }\n\n    &.disabled {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_300};\n\n      span {\n        color: ${COLORS.neutral_300};\n      }\n\n      &::after {\n        background-color: ${COLORS.neutral_300};\n      }\n    }\n  }\n`;\n\nconst TabLink = React.forwardRef<HTMLAnchorElement, TabLinkProps>(({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  forceDeactivate,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  endLineIcon,\n  onActiveStateChanged,\n  variant = 'critical',\n  children,\n  containerOnMouseEnter,\n  containerOnMouseLeave,\n  className,\n  ...rest\n}: TabLinkProps, ref) => {\n  \n  const [activeState, setActiveState] = useState<boolean>(false);\n\n  return (\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\n      <>\n        <NavLink\n          to={forceDeactivate ? 'invalid' : to.toString()}\n          //disabled={disabled}\n          className={({ isActive }) => {\n            onActiveStateChanged && onActiveStateChanged(activeState);\n            if (forceDeactivate) {\n              if (disabled) return 'disabled';\n              else return '';\n            }\n\n            if (isActive != activeState) setActiveState(isActive);\n\n            return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n          }}\n          onMouseDown={defaultOnMouseDownHandler}\n          tabIndex={disabled ? -1 : 0}\n          role=\"tab\"\n          aria-selected={activeState}\n          onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n          ref={ref}\n          data-testid={testId}\n          {...rest}>\n          <TextContainer>\n            <TopWrapper>\n              <span>{requiredLine}</span>\n            </TopWrapper>\n            {optionalLine && OptionalLineIcon ? (\n              <OptionalLineWrapperWithIcon>\n                {OptionalLineIcon}\n                {!!optionalLine && <span>{optionalLine}</span>}\n              </OptionalLineWrapperWithIcon>\n            ) : optionalLine ? (\n              <OptionalLineWrapper>\n                <span>{optionalLine}</span>\n              </OptionalLineWrapper>\n            ) : (\n              <></>\n            )}\n          </TextContainer>\n          <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n          {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\n        </NavLink>\n        {children}\n      </>\n    </Wrapper>\n  );\n});\n\nexport default TabLink;\n"],"mappings":"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"}
+{"version":3,"file":"TabLink.cjs","names":["OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","React","forwardRef","ref","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","useState","activeState","setActiveState","toString","isActive","defaultOnMouseDownHandler","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { NavLink, NavLinkProps } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\nimport { NotificationDot } from '../NotificationDot';\r\nimport { Size } from '../types';\r\nimport { COLORS, focusStyles } from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { useState } from 'react';\r\n\r\ntype TabLinkProps = {\r\n  disabled?: boolean;\r\n  forceDeactivate?: boolean;\r\n  requiredLine: string;\r\n  optionalLine?: string;\r\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\r\n  endLineIcon?: React.ReactNode;\r\n  onLinkClick?: (e: React.MouseEvent) => void;\r\n  testId?: string;\r\n  onActiveStateChanged?: (state: boolean) => void;\r\n  showNotificationDot?: boolean;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  variant?: 'positive' | 'critical';\r\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\r\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\r\n} & NavLinkProps;\r\n\r\nconst OptionalLineWrapperWithIcon = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span {\r\n    margin: 0 0 0 4px !important;\r\n    font-size: 12px;\r\n    line-height: 16px;\r\n  }\r\n`;\r\n\r\nconst TopWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span:not(:only-child) {\r\n    width: calc(100% - 32px);\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div`\r\n  width: 100%;\r\n  margin: auto 0 auto 16px !important;\r\n`;\r\n\r\nconst StyledNotification = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst EndLineIcon = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst OptionalLineWrapper = styled.div`\r\n  font-size: 12px;\r\n`;\r\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\r\nconst Wrapper = styled.div<{ disabled: boolean }>`\r\n  position: relative;\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    a {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  a {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n\r\n    font-size: 16px;\r\n    line-height: 120%;\r\n    color: ${COLORS.neutral_600};\r\n\r\n    background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\r\n    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\r\n    border-left: 1px solid transparent;\r\n    text-decoration: none;\r\n    position: relative;\r\n    border-radius: 2px;\r\n\r\n    &:not(:last-child) {\r\n      margin-bottom: 4px;\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &.active {\r\n      z-index: ${Z_INDEXES.active};\r\n      background-color: ${COLORS.neutral_20};\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n\r\n    &:hover, &.dropdown-hover {\r\n      z-index: ${Z_INDEXES.hover};\r\n      background-color: ${COLORS.primary_20};\r\n      color: ${COLORS.primary_600};\r\n    }\r\n\r\n    &:active {\r\n      z-index: ${Z_INDEXES.active};\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_800};\r\n    }\r\n\r\n    &.active {\r\n      &::after {\r\n        position: absolute;\r\n        content: ' ';\r\n        width: 4px;\r\n        top: 6px;\r\n        bottom: 6px;\r\n        left: 3px;\r\n        background-color: ${COLORS.primary_500};\r\n\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      &::after {\r\n        background-color: ${COLORS.primary_600};\r\n      }\r\n    }\r\n\r\n    &.active:active {\r\n      background-color: ${COLORS.primary_100};\r\n\r\n      &::after {\r\n        background-color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n\r\n    &.disabled {\r\n      background-color: ${COLORS.white};\r\n      color: ${COLORS.neutral_300};\r\n\r\n      span {\r\n        color: ${COLORS.neutral_300};\r\n      }\r\n\r\n      &::after {\r\n        background-color: ${COLORS.neutral_300};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst TabLink = React.forwardRef<HTMLAnchorElement, TabLinkProps>(({\r\n  to,\r\n  disabled = false,\r\n  requiredLine,\r\n  optionalLine,\r\n  OptionalLineIcon,\r\n  onLinkClick,\r\n  forceDeactivate,\r\n  testId,\r\n  showNotificationDot = false,\r\n  size = Size.Small,\r\n  endLineIcon,\r\n  onActiveStateChanged,\r\n  variant = 'critical',\r\n  children,\r\n  containerOnMouseEnter,\r\n  containerOnMouseLeave,\r\n  className,\r\n  ...rest\r\n}: TabLinkProps, ref) => {\r\n  \r\n  const [activeState, setActiveState] = useState<boolean>(false);\r\n\r\n  return (\r\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\r\n      <>\r\n        <NavLink\r\n          to={forceDeactivate ? 'invalid' : to.toString()}\r\n          //disabled={disabled}\r\n          className={({ isActive }) => {\r\n            onActiveStateChanged && onActiveStateChanged(activeState);\r\n            if (forceDeactivate) {\r\n              if (disabled) return 'disabled';\r\n              else return '';\r\n            }\r\n\r\n            if (isActive != activeState) setActiveState(isActive);\r\n\r\n            return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\r\n          }}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          tabIndex={disabled ? -1 : 0}\r\n          role=\"tab\"\r\n          aria-selected={activeState}\r\n          onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\r\n          ref={ref}\r\n          data-testid={testId}\r\n          {...rest}>\r\n          <TextContainer>\r\n            <TopWrapper>\r\n              <span>{requiredLine}</span>\r\n            </TopWrapper>\r\n            {optionalLine && OptionalLineIcon ? (\r\n              <OptionalLineWrapperWithIcon>\r\n                {OptionalLineIcon}\r\n                {!!optionalLine && <span>{optionalLine}</span>}\r\n              </OptionalLineWrapperWithIcon>\r\n            ) : optionalLine ? (\r\n              <OptionalLineWrapper>\r\n                <span>{optionalLine}</span>\r\n              </OptionalLineWrapper>\r\n            ) : (\r\n              <></>\r\n            )}\r\n          </TextContainer>\r\n          <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\r\n          {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\r\n        </NavLink>\r\n        {children}\r\n      </>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default TabLink;\r\n"],"mappings":"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"}

package/dist/Tabs/TabLink.d.ts

@@ -1,20 +1,20 @@
-import * as React from 'react';
-import { NavLinkProps } from 'react-router-dom';
-import { Size } from '../types';
-declare const TabLink: React.ForwardRefExoticComponent<{
-    disabled?: boolean | undefined;
-    forceDeactivate?: boolean | undefined;
-    requiredLine: string;
-    optionalLine?: string | undefined;
-    OptionalLineIcon?: React.ReactNode;
-    endLineIcon?: React.ReactNode;
-    onLinkClick?: ((e: React.MouseEvent) => void) | undefined;
-    testId?: string | undefined;
-    onActiveStateChanged?: ((state: boolean) => void) | undefined;
-    showNotificationDot?: boolean | undefined;
-    size?: Size.Small | Size.Medium | Size.Large | undefined;
-    variant?: "positive" | "critical" | undefined;
-    containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
-    containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
-} & NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-export default TabLink;
+import * as React from 'react';
+import { NavLinkProps } from 'react-router-dom';
+import { Size } from '../types';
+declare const TabLink: React.ForwardRefExoticComponent<{
+    disabled?: boolean | undefined;
+    forceDeactivate?: boolean | undefined;
+    requiredLine: string;
+    optionalLine?: string | undefined;
+    OptionalLineIcon?: React.ReactNode;
+    endLineIcon?: React.ReactNode;
+    onLinkClick?: ((e: React.MouseEvent) => void) | undefined;
+    testId?: string | undefined;
+    onActiveStateChanged?: ((state: boolean) => void) | undefined;
+    showNotificationDot?: boolean | undefined;
+    size?: Size.Small | Size.Medium | Size.Large | undefined;
+    variant?: "positive" | "critical" | undefined;
+    containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
+} & NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export default TabLink;

package/dist/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","forwardRef","ref","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","activeState","setActiveState","toString","isActive","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  forceDeactivate?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  endLineIcon?: React.ReactNode;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  onActiveStateChanged?: (state: boolean) => void;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n} & NavLinkProps;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst EndLineIcon = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\nconst Wrapper = styled.div<{ disabled: boolean }>`\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    font-size: 16px;\n    line-height: 120%;\n    color: ${COLORS.neutral_600};\n\n    background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n\n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n\n    &.active {\n      z-index: ${Z_INDEXES.active};\n      background-color: ${COLORS.neutral_20};\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ${COLORS.primary_20};\n    }\n\n    &:hover, &.dropdown-hover {\n      z-index: ${Z_INDEXES.hover};\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n\n    &:active {\n      z-index: ${Z_INDEXES.active};\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n\n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ${COLORS.primary_500};\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      &::after {\n        background-color: ${COLORS.primary_600};\n      }\n    }\n\n    &.active:active {\n      background-color: ${COLORS.primary_100};\n\n      &::after {\n        background-color: ${COLORS.primary_800};\n      }\n    }\n\n    &.disabled {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_300};\n\n      span {\n        color: ${COLORS.neutral_300};\n      }\n\n      &::after {\n        background-color: ${COLORS.neutral_300};\n      }\n    }\n  }\n`;\n\nconst TabLink = React.forwardRef<HTMLAnchorElement, TabLinkProps>(({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  forceDeactivate,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  endLineIcon,\n  onActiveStateChanged,\n  variant = 'critical',\n  children,\n  containerOnMouseEnter,\n  containerOnMouseLeave,\n  className,\n  ...rest\n}: TabLinkProps, ref) => {\n  \n  const [activeState, setActiveState] = useState<boolean>(false);\n\n  return (\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\n      <>\n        <NavLink\n          to={forceDeactivate ? 'invalid' : to.toString()}\n          //disabled={disabled}\n          className={({ isActive }) => {\n            onActiveStateChanged && onActiveStateChanged(activeState);\n            if (forceDeactivate) {\n              if (disabled) return 'disabled';\n              else return '';\n            }\n\n            if (isActive != activeState) setActiveState(isActive);\n\n            return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n          }}\n          onMouseDown={defaultOnMouseDownHandler}\n          tabIndex={disabled ? -1 : 0}\n          role=\"tab\"\n          aria-selected={activeState}\n          onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n          ref={ref}\n          data-testid={testId}\n          {...rest}>\n          <TextContainer>\n            <TopWrapper>\n              <span>{requiredLine}</span>\n            </TopWrapper>\n            {optionalLine && OptionalLineIcon ? (\n              <OptionalLineWrapperWithIcon>\n                {OptionalLineIcon}\n                {!!optionalLine && <span>{optionalLine}</span>}\n              </OptionalLineWrapperWithIcon>\n            ) : optionalLine ? (\n              <OptionalLineWrapper>\n                <span>{optionalLine}</span>\n              </OptionalLineWrapper>\n            ) : (\n              <></>\n            )}\n          </TextContainer>\n          <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n          {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\n        </NavLink>\n        {children}\n      </>\n    </Wrapper>\n  );\n});\n\nexport default TabLink;\n"],"mappings":"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"}
+{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","forwardRef","ref","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","activeState","setActiveState","toString","isActive","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { NavLink, NavLinkProps } from 'react-router-dom';\r\nimport styled from 'styled-components';\r\nimport { NotificationDot } from '../NotificationDot';\r\nimport { Size } from '../types';\r\nimport { COLORS, focusStyles } from '../styles';\r\nimport { Z_INDEXES } from '../styles/z-indexes';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { useState } from 'react';\r\n\r\ntype TabLinkProps = {\r\n  disabled?: boolean;\r\n  forceDeactivate?: boolean;\r\n  requiredLine: string;\r\n  optionalLine?: string;\r\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\r\n  endLineIcon?: React.ReactNode;\r\n  onLinkClick?: (e: React.MouseEvent) => void;\r\n  testId?: string;\r\n  onActiveStateChanged?: (state: boolean) => void;\r\n  showNotificationDot?: boolean;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  variant?: 'positive' | 'critical';\r\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\r\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\r\n} & NavLinkProps;\r\n\r\nconst OptionalLineWrapperWithIcon = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span {\r\n    margin: 0 0 0 4px !important;\r\n    font-size: 12px;\r\n    line-height: 16px;\r\n  }\r\n`;\r\n\r\nconst TopWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n\r\n  span:not(:only-child) {\r\n    width: calc(100% - 32px);\r\n  }\r\n`;\r\n\r\nconst TextContainer = styled.div`\r\n  width: 100%;\r\n  margin: auto 0 auto 16px !important;\r\n`;\r\n\r\nconst StyledNotification = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst EndLineIcon = styled.div`\r\n  margin: 0 15px 0 0 !important;\r\n`;\r\n\r\nconst OptionalLineWrapper = styled.div`\r\n  font-size: 12px;\r\n`;\r\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\r\nconst Wrapper = styled.div<{ disabled: boolean }>`\r\n  position: relative;\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    a {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  a {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n\r\n    font-size: 16px;\r\n    line-height: 120%;\r\n    color: ${COLORS.neutral_600};\r\n\r\n    background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\r\n    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\r\n    border-left: 1px solid transparent;\r\n    text-decoration: none;\r\n    position: relative;\r\n    border-radius: 2px;\r\n\r\n    &:not(:last-child) {\r\n      margin-bottom: 4px;\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &.active {\r\n      z-index: ${Z_INDEXES.active};\r\n      background-color: ${COLORS.neutral_20};\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      background-color: ${COLORS.primary_20};\r\n    }\r\n\r\n    &:hover, &.dropdown-hover {\r\n      z-index: ${Z_INDEXES.hover};\r\n      background-color: ${COLORS.primary_20};\r\n      color: ${COLORS.primary_600};\r\n    }\r\n\r\n    &:active {\r\n      z-index: ${Z_INDEXES.active};\r\n      background-color: ${COLORS.primary_100};\r\n      color: ${COLORS.primary_800};\r\n    }\r\n\r\n    &.active {\r\n      &::after {\r\n        position: absolute;\r\n        content: ' ';\r\n        width: 4px;\r\n        top: 6px;\r\n        bottom: 6px;\r\n        left: 3px;\r\n        background-color: ${COLORS.primary_500};\r\n\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n\r\n    &.active:hover, &.active.dropdown-hover {\r\n      &::after {\r\n        background-color: ${COLORS.primary_600};\r\n      }\r\n    }\r\n\r\n    &.active:active {\r\n      background-color: ${COLORS.primary_100};\r\n\r\n      &::after {\r\n        background-color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n\r\n    &.disabled {\r\n      background-color: ${COLORS.white};\r\n      color: ${COLORS.neutral_300};\r\n\r\n      span {\r\n        color: ${COLORS.neutral_300};\r\n      }\r\n\r\n      &::after {\r\n        background-color: ${COLORS.neutral_300};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst TabLink = React.forwardRef<HTMLAnchorElement, TabLinkProps>(({\r\n  to,\r\n  disabled = false,\r\n  requiredLine,\r\n  optionalLine,\r\n  OptionalLineIcon,\r\n  onLinkClick,\r\n  forceDeactivate,\r\n  testId,\r\n  showNotificationDot = false,\r\n  size = Size.Small,\r\n  endLineIcon,\r\n  onActiveStateChanged,\r\n  variant = 'critical',\r\n  children,\r\n  containerOnMouseEnter,\r\n  containerOnMouseLeave,\r\n  className,\r\n  ...rest\r\n}: TabLinkProps, ref) => {\r\n  \r\n  const [activeState, setActiveState] = useState<boolean>(false);\r\n\r\n  return (\r\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\r\n      <>\r\n        <NavLink\r\n          to={forceDeactivate ? 'invalid' : to.toString()}\r\n          //disabled={disabled}\r\n          className={({ isActive }) => {\r\n            onActiveStateChanged && onActiveStateChanged(activeState);\r\n            if (forceDeactivate) {\r\n              if (disabled) return 'disabled';\r\n              else return '';\r\n            }\r\n\r\n            if (isActive != activeState) setActiveState(isActive);\r\n\r\n            return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\r\n          }}\r\n          onMouseDown={defaultOnMouseDownHandler}\r\n          tabIndex={disabled ? -1 : 0}\r\n          role=\"tab\"\r\n          aria-selected={activeState}\r\n          onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\r\n          ref={ref}\r\n          data-testid={testId}\r\n          {...rest}>\r\n          <TextContainer>\r\n            <TopWrapper>\r\n              <span>{requiredLine}</span>\r\n            </TopWrapper>\r\n            {optionalLine && OptionalLineIcon ? (\r\n              <OptionalLineWrapperWithIcon>\r\n                {OptionalLineIcon}\r\n                {!!optionalLine && <span>{optionalLine}</span>}\r\n              </OptionalLineWrapperWithIcon>\r\n            ) : optionalLine ? (\r\n              <OptionalLineWrapper>\r\n                <span>{optionalLine}</span>\r\n              </OptionalLineWrapper>\r\n            ) : (\r\n              <></>\r\n            )}\r\n          </TextContainer>\r\n          <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\r\n          {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\r\n        </NavLink>\r\n        {children}\r\n      </>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default TabLink;\r\n"],"mappings":"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"}

package/dist/Tabs/Tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","names":["getHeight","size","Size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","styled","nav","props","Tabs","children"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Size } from '../types';\n\ntype TabsProps = {\n  children?: any;\n  size: Size;\n};\n\nconst getHeight = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '48px';\n    case Size.Medium:\n      return '56px';\n    case Size.Large:\n      return '64px';\n    default:\n      return '48px';\n  }\n};\n\nconst getFontSize = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '16px';\n    case Size.Medium:\n      return '18px';\n    case Size.Large:\n      return '20px';\n    default:\n      return '20px';\n  }\n};\n\nconst getTopMargin = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '6px';\n    case Size.Medium:\n      return '10px';\n    case Size.Large:\n      return '12px';\n    default:\n      return '12px';\n  }\n};\n\nconst getBottomMargin = (size: Size) => {\n  switch (size) {\n    case Size.Small:\n      return '2px';\n    case Size.Medium:\n      return '3px';\n    case Size.Large:\n      return '4px';\n    default:\n      return '4px';\n  }\n};\n\nconst Nav = styled.nav<TabsProps>`\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ${(props) => getHeight(props.size)};\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\n  }\n  a > div:only-of-type {\n    font-size: ${(props) => getFontSize(props.size)};\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n`;\n\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\n  <Nav role=\"tablist\" size={size}>\n    {children}\n  </Nav>\n);\n\nexport default Tabs;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAgC;AAAA;AAAA;AAAA;AAOhC,IAAMA,SAAS,GAAG,SAAZA,SAAS,CAAIC,IAAU,EAAK;EAChC,QAAQA,IAAI;IACV,KAAKC,WAAI,CAACC,KAAK;MACb,OAAO,MAAM;IACf,KAAKD,WAAI,CAACE,MAAM;MACd,OAAO,MAAM;IACf,KAAKF,WAAI,CAACG,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EAAC;AAEpB,CAAC;AAED,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIL,IAAU,EAAK;EAClC,QAAQA,IAAI;IACV,KAAKC,WAAI,CAACC,KAAK;MACb,OAAO,MAAM;IACf,KAAKD,WAAI,CAACE,MAAM;MACd,OAAO,MAAM;IACf,KAAKF,WAAI,CAACG,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EAAC;AAEpB,CAAC;AAED,IAAME,YAAY,GAAG,SAAfA,YAAY,CAAIN,IAAU,EAAK;EACnC,QAAQA,IAAI;IACV,KAAKC,WAAI,CAACC,KAAK;MACb,OAAO,KAAK;IACd,KAAKD,WAAI,CAACE,MAAM;MACd,OAAO,MAAM;IACf,KAAKF,WAAI,CAACG,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EAAC;AAEpB,CAAC;AAED,IAAMG,eAAe,GAAG,SAAlBA,eAAe,CAAIP,IAAU,EAAK;EACtC,QAAQA,IAAI;IACV,KAAKC,WAAI,CAACC,KAAK;MACb,OAAO,KAAK;IACd,KAAKD,WAAI,CAACE,MAAM;MACd,OAAO,KAAK;IACd,KAAKF,WAAI,CAACG,KAAK;MACb,OAAO,KAAK;IACd;MACE,OAAO,KAAK;EAAC;AAEnB,CAAC;AAED,IAAMI,GAAG,GAAGC,yBAAM,CAACC,GAAG,0cAKR,UAACC,KAAK;EAAA,OAAKZ,SAAS,CAACY,KAAK,CAACX,IAAI,CAAC;AAAA,GAQ7B,UAACW,KAAK;EAAA,OAAKN,WAAW,CAACM,KAAK,CAACX,IAAI,CAAC;AAAA,GACrC,UAACW,KAAK;EAAA,OAAKL,YAAY,CAACK,KAAK,CAACX,IAAI,CAAC;AAAA,GAAM,UAACW,KAAK;EAAA,OAAKJ,eAAe,CAACI,KAAK,CAACX,IAAI,CAAC;AAAA,GAG5E,UAACW,KAAK;EAAA,OAAKN,WAAW,CAACM,KAAK,CAACX,IAAI,CAAC;AAAA,EAOlD;AAED,IAAMY,IAAwC,GAAG,SAA3CA,IAAwC;EAAA,IAAMC,QAAQ,QAARA,QAAQ;IAAEb,IAAI,QAAJA,IAAI;EAAA,oBAChE,qBAAC,GAAG;IAAC,IAAI,EAAC,SAAS;IAAC,IAAI,EAAEA,IAAK;IAAA,UAC5Ba;EAAQ,EACL;AAAA,CACP;AAAC;EAtFAA,QAAQ;AAAA;AAAA,eAwFKD,IAAI;AAAA"}
+{"version":3,"file":"Tabs.cjs","names":["getHeight","size","Size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","styled","nav","props","Tabs","children"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\n\r\ntype TabsProps = {\r\n  children?: any;\r\n  size: Size;\r\n};\r\n\r\nconst getHeight = (size: Size) => {\r\n  switch (size) {\r\n    case Size.Small:\r\n      return '48px';\r\n    case Size.Medium:\r\n      return '56px';\r\n    case Size.Large:\r\n      return '64px';\r\n    default:\r\n      return '48px';\r\n  }\r\n};\r\n\r\nconst getFontSize = (size: Size) => {\r\n  switch (size) {\r\n    case Size.Small:\r\n      return '16px';\r\n    case Size.Medium:\r\n      return '18px';\r\n    case Size.Large:\r\n      return '20px';\r\n    default:\r\n      return '20px';\r\n  }\r\n};\r\n\r\nconst getTopMargin = (size: Size) => {\r\n  switch (size) {\r\n    case Size.Small:\r\n      return '6px';\r\n    case Size.Medium:\r\n      return '10px';\r\n    case Size.Large:\r\n      return '12px';\r\n    default:\r\n      return '12px';\r\n  }\r\n};\r\n\r\nconst getBottomMargin = (size: Size) => {\r\n  switch (size) {\r\n    case Size.Small:\r\n      return '2px';\r\n    case Size.Medium:\r\n      return '3px';\r\n    case Size.Large:\r\n      return '4px';\r\n    default:\r\n      return '4px';\r\n  }\r\n};\r\n\r\nconst Nav = styled.nav<TabsProps>`\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  a {\r\n    height: ${(props) => getHeight(props.size)};\r\n  }\r\n\r\n  a > div:last-of-type {\r\n    font-size: 12px;\r\n    margin: 0 0 8px 16px;\r\n  }\r\n  a > div:first-child {\r\n    font-size: ${(props) => getFontSize(props.size)};\r\n    margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\r\n  }\r\n  a > div:only-of-type {\r\n    font-size: ${(props) => getFontSize(props.size)};\r\n    margin: auto 0 auto 16px;\r\n  }\r\n\r\n  @media print {\r\n    display: none;\r\n  }\r\n`;\r\n\r\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\r\n  <Nav role=\"tablist\" size={size}>\r\n    {children}\r\n  </Nav>\r\n);\r\n\r\nexport default Tabs;\r\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAgC;AAAA;AAAA;AAAA;AAOhC,IAAMA,SAAS,GAAG,SAAZA,SAAS,CAAIC,IAAU,EAAK;EAChC,QAAQA,IAAI;IACV,KAAKC,WAAI,CAACC,KAAK;MACb,OAAO,MAAM;IACf,KAAKD,WAAI,CAACE,MAAM;MACd,OAAO,MAAM;IACf,KAAKF,WAAI,CAACG,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EAAC;AAEpB,CAAC;AAED,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIL,IAAU,EAAK;EAClC,QAAQA,IAAI;IACV,KAAKC,WAAI,CAACC,KAAK;MACb,OAAO,MAAM;IACf,KAAKD,WAAI,CAACE,MAAM;MACd,OAAO,MAAM;IACf,KAAKF,WAAI,CAACG,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EAAC;AAEpB,CAAC;AAED,IAAME,YAAY,GAAG,SAAfA,YAAY,CAAIN,IAAU,EAAK;EACnC,QAAQA,IAAI;IACV,KAAKC,WAAI,CAACC,KAAK;MACb,OAAO,KAAK;IACd,KAAKD,WAAI,CAACE,MAAM;MACd,OAAO,MAAM;IACf,KAAKF,WAAI,CAACG,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EAAC;AAEpB,CAAC;AAED,IAAMG,eAAe,GAAG,SAAlBA,eAAe,CAAIP,IAAU,EAAK;EACtC,QAAQA,IAAI;IACV,KAAKC,WAAI,CAACC,KAAK;MACb,OAAO,KAAK;IACd,KAAKD,WAAI,CAACE,MAAM;MACd,OAAO,KAAK;IACd,KAAKF,WAAI,CAACG,KAAK;MACb,OAAO,KAAK;IACd;MACE,OAAO,KAAK;EAAC;AAEnB,CAAC;AAED,IAAMI,GAAG,GAAGC,yBAAM,CAACC,GAAG,0cAKR,UAACC,KAAK;EAAA,OAAKZ,SAAS,CAACY,KAAK,CAACX,IAAI,CAAC;AAAA,GAQ7B,UAACW,KAAK;EAAA,OAAKN,WAAW,CAACM,KAAK,CAACX,IAAI,CAAC;AAAA,GACrC,UAACW,KAAK;EAAA,OAAKL,YAAY,CAACK,KAAK,CAACX,IAAI,CAAC;AAAA,GAAM,UAACW,KAAK;EAAA,OAAKJ,eAAe,CAACI,KAAK,CAACX,IAAI,CAAC;AAAA,GAG5E,UAACW,KAAK;EAAA,OAAKN,WAAW,CAACM,KAAK,CAACX,IAAI,CAAC;AAAA,EAOlD;AAED,IAAMY,IAAwC,GAAG,SAA3CA,IAAwC;EAAA,IAAMC,QAAQ,QAARA,QAAQ;IAAEb,IAAI,QAAJA,IAAI;EAAA,oBAChE,qBAAC,GAAG;IAAC,IAAI,EAAC,SAAS;IAAC,IAAI,EAAEA,IAAK;IAAA,UAC5Ba;EAAQ,EACL;AAAA,CACP;AAAC;EAtFAA,QAAQ;AAAA;AAAA,eAwFKD,IAAI;AAAA"}