@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/Table/addExpandableControl.js

@@ -0,0 +1,50 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { SELECTABLE_COLUMN_DATA_KEY } from "./addSelectableControl.js";
+import { useTranslation } from "../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import ControlIcon from "../Button/ControlIcon.js";
+const EXPANDABLE_COLUMN_DATA_KEY = "expanded";
+const ExpandCell = ({ row, onRowExpansionChange }) => {
+  const expandRowHandler = () => onRowExpansionChange(row);
+  const { t } = useTranslation();
+  const collapseLabel = row.collapseAriaLabel || t("collapse row");
+  const expandLabel = row.expandAriaLabel || t("expand row");
+  return /* @__PURE__ */ jsx(Fragment, { children: row.expandedContent && /* @__PURE__ */ jsx(
+    ControlIcon,
+    {
+      icon: row[EXPANDABLE_COLUMN_DATA_KEY] ? "upArrow" : "downArrow",
+      label: row[EXPANDABLE_COLUMN_DATA_KEY] ? collapseLabel : expandLabel,
+      onClick: expandRowHandler
+    }
+  ) });
+};
+const expandCellRenderer = (onRowExpansionChange) => (props) => /* @__PURE__ */ jsx(ExpandCell, { onRowExpansionChange, ...props });
+const addExpandableColumn = ({ columns, onRowExpansionChange }) => {
+  const expandableColumn = {
+    dataKey: EXPANDABLE_COLUMN_DATA_KEY,
+    cellFormatter: expandCellRenderer(onRowExpansionChange),
+    width: "30px"
+  };
+  const hasSelectableColumn = columns[0].dataKey === SELECTABLE_COLUMN_DATA_KEY;
+  const transformedColumns = hasSelectableColumn ? [columns[0], expandableColumn, ...columns.slice(1)] : [expandableColumn, ...columns];
+  return transformedColumns;
+};
+const addExpandableCell = ({ rows, keyField, expandedRows }) => {
+  const expandableCellData = (rowKey) => {
+    return {
+      [EXPANDABLE_COLUMN_DATA_KEY]: expandedRows ? expandedRows.includes(rowKey) : false
+    };
+  };
+  const transformedRows = rows.map((row) => ({
+    ...expandableCellData(row[keyField]),
+    ...row
+  }));
+  return transformedRows;
+};
+const addExpandableControl = (props) => ({
+  rows: addExpandableCell(props),
+  columns: addExpandableColumn(props)
+});
+export {
+  addExpandableControl
+};
+//# sourceMappingURL=addExpandableControl.js.map

package/dist/esm/Table/addExpandableControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addExpandableControl.js","sources":["../../../src/Table/addExpandableControl.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ControlIcon } from \"../Button\";\nimport { SELECTABLE_COLUMN_DATA_KEY } from \"./addSelectableControl\";\n\nconst EXPANDABLE_COLUMN_DATA_KEY = \"expanded\";\n\ntype Row = Record<string, number | string | boolean | React.ReactNode | Record<string, unknown>>;\n\ninterface ExpandCellProps {\n  row: Row;\n  onRowExpansionChange: (row: Row) => void;\n  collapseAriaLabel?: string;\n  expandAriaLabel?: string;\n}\n\nconst ExpandCell = ({ row, onRowExpansionChange }: ExpandCellProps) => {\n  const expandRowHandler = () => onRowExpansionChange(row);\n  const { t } = useTranslation();\n  const collapseLabel = row.collapseAriaLabel || t(\"collapse row\");\n  const expandLabel = row.expandAriaLabel || t(\"expand row\");\n  return (\n    <>\n      {row.expandedContent && (\n        <ControlIcon\n          icon={row[EXPANDABLE_COLUMN_DATA_KEY] ? \"upArrow\" : \"downArrow\"}\n          label={row[EXPANDABLE_COLUMN_DATA_KEY] ? collapseLabel : expandLabel}\n          onClick={expandRowHandler}\n        />\n      )}\n    </>\n  );\n};\n\nconst expandCellRenderer = (onRowExpansionChange) => (props) => (\n  <ExpandCell onRowExpansionChange={onRowExpansionChange} {...props} />\n);\n\nconst addExpandableColumn = ({ columns, onRowExpansionChange }) => {\n  const expandableColumn = {\n    dataKey: EXPANDABLE_COLUMN_DATA_KEY,\n    cellFormatter: expandCellRenderer(onRowExpansionChange),\n    width: \"30px\",\n  };\n  const hasSelectableColumn = columns[0].dataKey === SELECTABLE_COLUMN_DATA_KEY;\n  const transformedColumns = hasSelectableColumn\n    ? [columns[0], expandableColumn, ...columns.slice(1)]\n    : [expandableColumn, ...columns];\n  return transformedColumns;\n};\n\nconst addExpandableCell = ({ rows, keyField, expandedRows }) => {\n  const expandableCellData = (rowKey) => {\n    return {\n      [EXPANDABLE_COLUMN_DATA_KEY]: expandedRows ? expandedRows.includes(rowKey) : false,\n    };\n  };\n  const transformedRows = rows.map((row) => ({\n    ...expandableCellData(row[keyField]),\n    ...row,\n  }));\n  return transformedRows;\n};\n\nexport const addExpandableControl = (props) => ({\n  rows: addExpandableCell(props),\n  columns: addExpandableColumn(props),\n});\n"],"names":[],"mappings":";;;;AAKA,MAAM,6BAA6B;AAWnC,MAAM,aAAa,CAAC,EAAE,KAAK,2BAA4C;AACrE,QAAM,mBAAmB,MAAM,qBAAqB,GAAG;AACvD,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,QAAM,gBAAgB,IAAI,qBAAqB,EAAE,cAAc;AAC/D,QAAM,cAAc,IAAI,mBAAmB,EAAE,YAAY;AACzD,SACE,oBAAA,UAAA,EACG,cAAI,mBACH;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,IAAI,0BAA0B,IAAI,YAAY;AAAA,MACpD,OAAO,IAAI,0BAA0B,IAAI,gBAAgB;AAAA,MACzD,SAAS;AAAA,IAAA;AAAA,EAAA,GAGf;AAEJ;AAEA,MAAM,qBAAqB,CAAC,yBAAyB,CAAC,UACpD,oBAAC,YAAA,EAAW,sBAA6C,GAAG,OAAO;AAGrE,MAAM,sBAAsB,CAAC,EAAE,SAAS,2BAA2B;AACjE,QAAM,mBAAmB;AAAA,IACvB,SAAS;AAAA,IACT,eAAe,mBAAmB,oBAAoB;AAAA,IACtD,OAAO;AAAA,EAAA;AAET,QAAM,sBAAsB,QAAQ,CAAC,EAAE,YAAY;AACnD,QAAM,qBAAqB,sBACvB,CAAC,QAAQ,CAAC,GAAG,kBAAkB,GAAG,QAAQ,MAAM,CAAC,CAAC,IAClD,CAAC,kBAAkB,GAAG,OAAO;AACjC,SAAO;AACT;AAEA,MAAM,oBAAoB,CAAC,EAAE,MAAM,UAAU,mBAAmB;AAC9D,QAAM,qBAAqB,CAAC,WAAW;AACrC,WAAO;AAAA,MACL,CAAC,0BAA0B,GAAG,eAAe,aAAa,SAAS,MAAM,IAAI;AAAA,IAAA;AAAA,EAEjF;AACA,QAAM,kBAAkB,KAAK,IAAI,CAAC,SAAS;AAAA,IACzC,GAAG,mBAAmB,IAAI,QAAQ,CAAC;AAAA,IACnC,GAAG;AAAA,EAAA,EACH;AACF,SAAO;AACT;AAEO,MAAM,uBAAuB,CAAC,WAAW;AAAA,EAC9C,MAAM,kBAAkB,KAAK;AAAA,EAC7B,SAAS,oBAAoB,KAAK;AACpC;"}

package/dist/esm/Table/addSelectableControl.js

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import Checkbox from "../Checkbox/Checkbox.js";
+const SELECTABLE_COLUMN_DATA_KEY = "selected";
+const selectHeaderFormatter = (onSelectHeader, isHeaderSelected, selectAllAriaLabel, deselectAllAriaLabel) => () => {
+  const { t } = useTranslation();
+  const checkedAriaLabel = deselectAllAriaLabel || t("deselect all");
+  const uncheckedAriaLabel = selectAllAriaLabel || t("select all");
+  const ariaLabel = isHeaderSelected ? checkedAriaLabel : uncheckedAriaLabel;
+  return /* @__PURE__ */ jsx(Checkbox, { checked: isHeaderSelected, onChange: onSelectHeader, "aria-label": ariaLabel });
+};
+const SelectCell = ({ row, onSelectRow }) => {
+  const selectRowHandler = () => onSelectRow(row);
+  const checked = row[SELECTABLE_COLUMN_DATA_KEY];
+  const { t } = useTranslation();
+  const checkedAriaLabel = row.selectAriaLabel || t("select row");
+  const uncheckedAriaLabel = row.deselectAriaLabel || t("select row");
+  const ariaLabel = checked ? checkedAriaLabel : uncheckedAriaLabel;
+  return /* @__PURE__ */ jsx(Checkbox, { "aria-label": ariaLabel, checked, onChange: selectRowHandler });
+};
+const selectCellRenderer = (onSelectRow) => (props) => /* @__PURE__ */ jsx(SelectCell, { onSelectRow, ...props });
+const addSelectableControl = ({
+  columns,
+  rows,
+  onSelectRow,
+  onSelectHeader,
+  keyField,
+  selectedRows,
+  isHeaderSelected,
+  selectAllAriaLabel,
+  deselectAllAriaLabel
+}) => {
+  const selectableColumn = {
+    dataKey: SELECTABLE_COLUMN_DATA_KEY,
+    cellFormatter: selectCellRenderer(onSelectRow),
+    headerFormatter: selectHeaderFormatter(onSelectHeader, isHeaderSelected, selectAllAriaLabel, deselectAllAriaLabel),
+    width: "30px"
+  };
+  const selectableCellData = (rowKey) => ({
+    [SELECTABLE_COLUMN_DATA_KEY]: selectedRows.includes(rowKey)
+  });
+  const transformedColumns = [selectableColumn, ...columns];
+  const transformedRows = rows.map((row) => ({
+    ...selectableCellData(row[keyField]),
+    ...row
+  }));
+  return {
+    rows: transformedRows,
+    columns: transformedColumns
+  };
+};
+export {
+  SELECTABLE_COLUMN_DATA_KEY,
+  addSelectableControl
+};
+//# sourceMappingURL=addSelectableControl.js.map

package/dist/esm/Table/addSelectableControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addSelectableControl.js","sources":["../../../src/Table/addSelectableControl.tsx"],"sourcesContent":["import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Checkbox } from \"../Checkbox\";\n\nexport const SELECTABLE_COLUMN_DATA_KEY = \"selected\";\n\nconst selectHeaderFormatter = (onSelectHeader, isHeaderSelected, selectAllAriaLabel, deselectAllAriaLabel) => () => {\n  const { t } = useTranslation();\n  const checkedAriaLabel = deselectAllAriaLabel || t(\"deselect all\");\n  const uncheckedAriaLabel = selectAllAriaLabel || t(\"select all\");\n  const ariaLabel = isHeaderSelected ? checkedAriaLabel : uncheckedAriaLabel;\n  return <Checkbox checked={isHeaderSelected} onChange={onSelectHeader} aria-label={ariaLabel} />;\n};\n\nconst SelectCell = ({ row, onSelectRow }) => {\n  const selectRowHandler = () => onSelectRow(row);\n  const checked = row[SELECTABLE_COLUMN_DATA_KEY];\n  const { t } = useTranslation();\n  const checkedAriaLabel = row.selectAriaLabel || t(\"select row\");\n  const uncheckedAriaLabel = row.deselectAriaLabel || t(\"select row\");\n  const ariaLabel = checked ? checkedAriaLabel : uncheckedAriaLabel;\n  return <Checkbox aria-label={ariaLabel} checked={checked} onChange={selectRowHandler} />;\n};\n\nconst selectCellRenderer = (onSelectRow) => (props) => <SelectCell onSelectRow={onSelectRow} {...props} />;\n\nexport const addSelectableControl = ({\n  columns,\n  rows,\n  onSelectRow,\n  onSelectHeader,\n  keyField,\n  selectedRows,\n  isHeaderSelected,\n  selectAllAriaLabel,\n  deselectAllAriaLabel,\n}) => {\n  const selectableColumn = {\n    dataKey: SELECTABLE_COLUMN_DATA_KEY,\n    cellFormatter: selectCellRenderer(onSelectRow),\n    headerFormatter: selectHeaderFormatter(onSelectHeader, isHeaderSelected, selectAllAriaLabel, deselectAllAriaLabel),\n    width: \"30px\",\n  };\n  const selectableCellData = (rowKey) => ({\n    [SELECTABLE_COLUMN_DATA_KEY]: selectedRows.includes(rowKey),\n  });\n  const transformedColumns = [selectableColumn, ...columns];\n  const transformedRows = rows.map((row) => ({\n    ...selectableCellData(row[keyField]),\n    ...row,\n  }));\n  return {\n    rows: transformedRows,\n    columns: transformedColumns,\n  };\n};\n"],"names":[],"mappings":";;;AAIO,MAAM,6BAA6B;AAE1C,MAAM,wBAAwB,CAAC,gBAAgB,kBAAkB,oBAAoB,yBAAyB,MAAM;AAClH,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,QAAM,mBAAmB,wBAAwB,EAAE,cAAc;AACjE,QAAM,qBAAqB,sBAAsB,EAAE,YAAY;AAC/D,QAAM,YAAY,mBAAmB,mBAAmB;AACxD,6BAAQ,UAAA,EAAS,SAAS,kBAAkB,UAAU,gBAAgB,cAAY,WAAW;AAC/F;AAEA,MAAM,aAAa,CAAC,EAAE,KAAK,kBAAkB;AAC3C,QAAM,mBAAmB,MAAM,YAAY,GAAG;AAC9C,QAAM,UAAU,IAAI,0BAA0B;AAC9C,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,QAAM,mBAAmB,IAAI,mBAAmB,EAAE,YAAY;AAC9D,QAAM,qBAAqB,IAAI,qBAAqB,EAAE,YAAY;AAClE,QAAM,YAAY,UAAU,mBAAmB;AAC/C,6BAAQ,UAAA,EAAS,cAAY,WAAW,SAAkB,UAAU,kBAAkB;AACxF;AAEA,MAAM,qBAAqB,CAAC,gBAAgB,CAAC,UAAU,oBAAC,YAAA,EAAW,aAA2B,GAAG,OAAO;AAEjG,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,mBAAmB;AAAA,IACvB,SAAS;AAAA,IACT,eAAe,mBAAmB,WAAW;AAAA,IAC7C,iBAAiB,sBAAsB,gBAAgB,kBAAkB,oBAAoB,oBAAoB;AAAA,IACjH,OAAO;AAAA,EAAA;AAET,QAAM,qBAAqB,CAAC,YAAY;AAAA,IACtC,CAAC,0BAA0B,GAAG,aAAa,SAAS,MAAM;AAAA,EAAA;AAE5D,QAAM,qBAAqB,CAAC,kBAAkB,GAAG,OAAO;AACxD,QAAM,kBAAkB,KAAK,IAAI,CAAC,SAAS;AAAA,IACzC,GAAG,mBAAmB,IAAI,QAAQ,CAAC;AAAA,IACnC,GAAG;AAAA,EAAA,EACH;AACF,SAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb;"}

package/dist/esm/Tabs/Tab.js

@@ -0,0 +1,88 @@
+import { jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { styled } from "styled-components";
+import "../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+import { variant } from "../node_modules/.pnpm/@styled-system_variant@5.1.5/node_modules/@styled-system/variant/dist/index.esm.js";
+const barStyles = (theme) => ({
+  expanded: {
+    content: "''",
+    backgroundColor: theme.colors.darkBlue,
+    height: "3px",
+    display: "block",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderRadius: "2px 2px 0 0"
+  },
+  default: {
+    content: "''",
+    backgroundColor: theme.colors.grey,
+    height: "1px",
+    display: "block",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: theme.zIndices.tabsBar
+  }
+});
+const getBarStyles = (selected, theme) => selected ? barStyles(theme).expanded : barStyles(theme).default;
+const getBarHoverStyles = (selected, disabled, theme) => {
+  if (disabled || selected) {
+    return null;
+  }
+  return {
+    ...barStyles(theme).expanded,
+    backgroundColor: theme.colors.lightBlue
+  };
+};
+const TabButton = styled.button(
+  ({ selected, disabled, fullWidth, theme }) => ({
+    width: fullWidth ? "100%" : void 0,
+    fontWeight: theme.fontWeights.medium,
+    textDecoration: "none",
+    fontSize: theme.fontSizes.base,
+    lineHeight: theme.lineHeights.base,
+    cursor: disabled ? "default" : "pointer",
+    color: theme.colors.darkBlue,
+    backgroundColor: "transparent",
+    border: "none",
+    margin: theme.space.none,
+    position: "relative",
+    paddingTop: theme.space.x1,
+    paddingBottom: theme.space.x1,
+    paddingLeft: theme.space.x3,
+    paddingRight: theme.space.x3,
+    "&:focus": {
+      outline: "none",
+      backgroundColor: theme.colors.lightBlue,
+      "&:hover": {}
+    },
+    "&:active": {},
+    "&:disabled": {
+      opacity: ".5"
+    },
+    "&:before": {
+      ...getBarStyles(selected, theme)
+    },
+    "&:hover": {
+      "&:before": {
+        ...getBarHoverStyles(selected, disabled, theme)
+      }
+    }
+  }),
+  variant({
+    variants: {
+      touch: {
+        fontSize: "md",
+        lineHeight: "base"
+      }
+    }
+  })
+);
+const Tab = React__default.forwardRef(({ label, ...props }, ref) => /* @__PURE__ */ jsx(TabButton, { role: "tab", type: "button", ref, ...props, children: label }));
+export {
+  Tab as default
+};
+//# sourceMappingURL=Tab.js.map

package/dist/esm/Tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sources":["../../../src/Tabs/Tab.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled, CSSObject } from \"styled-components\";\nimport { variant } from \"styled-system\";\nimport { ComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\n\nconst barStyles = (theme): { expanded: CSSObject; default: CSSObject } => ({\n  expanded: {\n    content: \"''\",\n    backgroundColor: theme.colors.darkBlue,\n    height: \"3px\",\n    display: \"block\",\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n    borderRadius: \"2px 2px 0 0\",\n  },\n  default: {\n    content: \"''\",\n    backgroundColor: theme.colors.grey,\n    height: \"1px\",\n    display: \"block\",\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n    zIndex: theme.zIndices.tabsBar,\n  },\n});\n\nconst getBarStyles = (selected, theme) => (selected ? barStyles(theme).expanded : barStyles(theme).default);\nconst getBarHoverStyles = (selected, disabled, theme) => {\n  if (disabled || selected) {\n    return null;\n  }\n\n  return {\n    ...barStyles(theme).expanded,\n    backgroundColor: theme.colors.lightBlue,\n  };\n};\n\ntype TabButtonProps = React.ComponentPropsWithRef<\"button\"> & {\n  variant?: ComponentVariant;\n  selected?: boolean;\n  fullWidth?: boolean;\n};\n\nconst TabButton = styled.button<TabButtonProps>(\n  ({ selected, disabled, fullWidth, theme }) => ({\n    width: fullWidth ? \"100%\" : undefined,\n    fontWeight: theme.fontWeights.medium,\n    textDecoration: \"none\",\n    fontSize: theme.fontSizes.base,\n    lineHeight: theme.lineHeights.base,\n    cursor: disabled ? \"default\" : \"pointer\",\n    color: theme.colors.darkBlue,\n    backgroundColor: \"transparent\",\n    border: \"none\",\n    margin: theme.space.none,\n    position: \"relative\",\n    paddingTop: theme.space.x1,\n    paddingBottom: theme.space.x1,\n    paddingLeft: theme.space.x3,\n    paddingRight: theme.space.x3,\n\n    \"&:focus\": {\n      outline: \"none\",\n      backgroundColor: theme.colors.lightBlue,\n      \"&:hover\": {},\n    },\n    \"&:active\": {},\n    \"&:disabled\": {\n      opacity: \".5\",\n    },\n    \"&:before\": {\n      ...getBarStyles(selected, theme),\n    },\n    \"&:hover\": {\n      \"&:before\": {\n        ...getBarHoverStyles(selected, disabled, theme),\n      },\n    },\n  }),\n  variant({\n    variants: {\n      touch: {\n        fontSize: \"md\",\n        lineHeight: \"base\",\n      },\n    },\n  })\n);\n\nexport type TabProps = TabButtonProps & {\n  label?: React.ReactNode;\n};\n\nconst Tab = React.forwardRef<HTMLButtonElement, TabProps>(({ label, ...props }, ref) => (\n  <TabButton role=\"tab\" type=\"button\" ref={ref} {...props}>\n    {label}\n  </TabButton>\n));\n\nexport default Tab;\n"],"names":["React"],"mappings":";;;;;AAKA,MAAM,YAAY,CAAC,WAAwD;AAAA,EACzE,UAAU;AAAA,IACR,SAAS;AAAA,IACT,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,cAAc;AAAA,EAAA;AAAA,EAEhB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ,MAAM,SAAS;AAAA,EAAA;AAE3B;AAEA,MAAM,eAAe,CAAC,UAAU,UAAW,WAAW,UAAU,KAAK,EAAE,WAAW,UAAU,KAAK,EAAE;AACnG,MAAM,oBAAoB,CAAC,UAAU,UAAU,UAAU;AACvD,MAAI,YAAY,UAAU;AACxB,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,GAAG,UAAU,KAAK,EAAE;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAAA;AAElC;AAQA,MAAM,YAAY,OAAO;AAAA,EACvB,CAAC,EAAE,UAAU,UAAU,WAAW,aAAa;AAAA,IAC7C,OAAO,YAAY,SAAS;AAAA,IAC5B,YAAY,MAAM,YAAY;AAAA,IAC9B,gBAAgB;AAAA,IAChB,UAAU,MAAM,UAAU;AAAA,IAC1B,YAAY,MAAM,YAAY;AAAA,IAC9B,QAAQ,WAAW,YAAY;AAAA,IAC/B,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,QAAQ,MAAM,MAAM;AAAA,IACpB,UAAU;AAAA,IACV,YAAY,MAAM,MAAM;AAAA,IACxB,eAAe,MAAM,MAAM;AAAA,IAC3B,aAAa,MAAM,MAAM;AAAA,IACzB,cAAc,MAAM,MAAM;AAAA,IAE1B,WAAW;AAAA,MACT,SAAS;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW,CAAA;AAAA,IAAC;AAAA,IAEd,YAAY,CAAA;AAAA,IACZ,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,IAEX,YAAY;AAAA,MACV,GAAG,aAAa,UAAU,KAAK;AAAA,IAAA;AAAA,IAEjC,WAAW;AAAA,MACT,YAAY;AAAA,QACV,GAAG,kBAAkB,UAAU,UAAU,KAAK;AAAA,MAAA;AAAA,IAChD;AAAA,EACF;AAAA,EAEF,QAAQ;AAAA,IACN,UAAU;AAAA,MACR,OAAO;AAAA,QACL,UAAU;AAAA,QACV,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACF,CACD;AACH;AAMA,MAAM,MAAMA,eAAM,WAAwC,CAAC,EAAE,OAAO,GAAG,SAAS,4BAC7E,WAAA,EAAU,MAAK,OAAM,MAAK,UAAS,KAAW,GAAG,OAC/C,iBACH,CACD;"}

package/dist/esm/Tabs/TabContainer.js

@@ -0,0 +1,27 @@
+import { styled } from "styled-components";
+import Box from "../Box/Box.js";
+const TabContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  whiteSpace: "nowrap",
+  overflowX: "auto",
+  overflowY: "hidden",
+  marginBottom: theme.space.x1,
+  "::-webkit-scrollbar": {
+    display: "none"
+  },
+  position: "relative",
+  "&:before": {
+    content: "''",
+    backgroundColor: theme.colors.grey,
+    height: "1px",
+    display: "block",
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0
+  }
+}));
+export {
+  TabContainer as default
+};
+//# sourceMappingURL=TabContainer.js.map

package/dist/esm/Tabs/TabContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabContainer.js","sources":["../../../src/Tabs/TabContainer.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport { Box } from \"../Box\";\n\nconst TabContainer = styled(Box)(({ theme }) => ({\n  display: \"flex\",\n  whiteSpace: \"nowrap\",\n  overflowX: \"auto\",\n  overflowY: \"hidden\",\n  marginBottom: theme.space.x1,\n  \"::-webkit-scrollbar\": {\n    display: \"none\",\n  },\n  position: \"relative\",\n  \"&:before\": {\n    content: \"''\",\n    backgroundColor: theme.colors.grey,\n    height: \"1px\",\n    display: \"block\",\n    position: \"absolute\",\n    bottom: 0,\n    left: 0,\n    right: 0,\n  },\n}));\n\nexport default TabContainer;\n"],"names":[],"mappings":";;AAGA,MAAM,eAAe,OAAO,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC/C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,cAAc,MAAM,MAAM;AAAA,EAC1B,uBAAuB;AAAA,IACrB,SAAS;AAAA,EAAA;AAAA,EAEX,UAAU;AAAA,EACV,YAAY;AAAA,IACV,SAAS;AAAA,IACT,iBAAiB,MAAM,OAAO;AAAA,IAC9B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAEX,EAAE;"}

package/dist/esm/Tabs/TabScrollIndicator.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import { useTranslation } from "../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import Icon from "../Icon/Icon.js";
+const TabScrollIndicatorButton = styled.button(({ side, width, theme }) => ({
+  position: "absolute",
+  color: theme.colors.black,
+  top: 0,
+  bottom: 0,
+  left: side === "left" ? 0 : void 0,
+  right: side === "right" ? 0 : void 0,
+  height: width,
+  width,
+  background: theme.colors.white,
+  opacity: 0.8,
+  zIndex: theme.zIndices.tabsScollIndicator,
+  display: "inline-flex",
+  justifyContent: "center",
+  alignItems: "center",
+  fontWeight: theme.fontWeights.medium,
+  textDecoration: "none",
+  verticalAlign: "middle",
+  lineHeight: theme.lineHeights.base,
+  backgroundColor: theme.colors.white,
+  border: `0px solid`,
+  margin: theme.space.none,
+  cursor: "pointer",
+  "&:hover": {
+    backgroundColor: theme.colors.lightBlue
+  },
+  "&:focus": {
+    outline: "none"
+  },
+  "&:active": {},
+  "&:disabled": {
+    opacity: ".5"
+  }
+}));
+function TabScrollIndicator({
+  side = "left",
+  width = 40,
+  ariaLabelLeft,
+  ariaLabelRight,
+  onClick,
+  ...props
+}) {
+  const { t } = useTranslation();
+  const rightArrowLabel = ariaLabelRight || t("next");
+  const leftArrowLabel = ariaLabelLeft || t("previous");
+  function preventFocusMovement(event) {
+    event.preventDefault();
+  }
+  return /* @__PURE__ */ jsx(
+    TabScrollIndicatorButton,
+    {
+      ...props,
+      width,
+      tabIndex: -1,
+      onClick,
+      onMouseDown: preventFocusMovement,
+      side,
+      "aria-label": side === "right" ? rightArrowLabel : leftArrowLabel,
+      children: /* @__PURE__ */ jsx(Icon, { icon: side === "right" ? "rightArrow" : "leftArrow" })
+    }
+  );
+}
+export {
+  TabScrollIndicator as default
+};
+//# sourceMappingURL=TabScrollIndicator.js.map

package/dist/esm/Tabs/TabScrollIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabScrollIndicator.js","sources":["../../../src/Tabs/TabScrollIndicator.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\nimport React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Icon } from \"../Icon\";\n\ntype Side = \"left\" | \"right\";\n\nconst TabScrollIndicatorButton = styled.button<{ side: Side; width: string | number }>(({ side, width, theme }) => ({\n  position: \"absolute\",\n  color: theme.colors.black,\n  top: 0,\n  bottom: 0,\n  left: side === \"left\" ? 0 : undefined,\n  right: side === \"right\" ? 0 : undefined,\n  height: width,\n  width,\n  background: theme.colors.white,\n  opacity: 0.8,\n  zIndex: theme.zIndices.tabsScollIndicator,\n  display: \"inline-flex\",\n  justifyContent: \"center\",\n  alignItems: \"center\",\n  fontWeight: theme.fontWeights.medium,\n  textDecoration: \"none\",\n  verticalAlign: \"middle\",\n  lineHeight: theme.lineHeights.base,\n  backgroundColor: theme.colors.white,\n  border: `0px solid`,\n  margin: theme.space.none,\n  cursor: \"pointer\",\n  \"&:hover\": {\n    backgroundColor: theme.colors.lightBlue,\n  },\n  \"&:focus\": {\n    outline: \"none\",\n  },\n  \"&:active\": {},\n  \"&:disabled\": {\n    opacity: \".5\",\n  },\n}));\n\ntype TabScrollIndicatorProps = {\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  side?: Side;\n  width?: string | number;\n  ariaLabelLeft?: string;\n  ariaLabelRight?: string;\n};\n\nfunction TabScrollIndicator({\n  side = \"left\",\n  width = 40,\n  ariaLabelLeft,\n  ariaLabelRight,\n  onClick,\n  ...props\n}: TabScrollIndicatorProps) {\n  const { t } = useTranslation();\n\n  const rightArrowLabel = ariaLabelRight || t(\"next\");\n  const leftArrowLabel = ariaLabelLeft || t(\"previous\");\n\n  function preventFocusMovement(event: React.MouseEvent<HTMLButtonElement>) {\n    event.preventDefault();\n  }\n\n  return (\n    <TabScrollIndicatorButton\n      {...props}\n      width={width}\n      tabIndex={-1}\n      onClick={onClick}\n      onMouseDown={preventFocusMovement}\n      side={side}\n      aria-label={side === \"right\" ? rightArrowLabel : leftArrowLabel}\n    >\n      <Icon icon={side === \"right\" ? \"rightArrow\" : \"leftArrow\"} />\n    </TabScrollIndicatorButton>\n  );\n}\n\nexport default TabScrollIndicator;\n"],"names":[],"mappings":";;;;AAOA,MAAM,2BAA2B,OAAO,OAA+C,CAAC,EAAE,MAAM,OAAO,aAAa;AAAA,EAClH,UAAU;AAAA,EACV,OAAO,MAAM,OAAO;AAAA,EACpB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM,SAAS,SAAS,IAAI;AAAA,EAC5B,OAAO,SAAS,UAAU,IAAI;AAAA,EAC9B,QAAQ;AAAA,EACR;AAAA,EACA,YAAY,MAAM,OAAO;AAAA,EACzB,SAAS;AAAA,EACT,QAAQ,MAAM,SAAS;AAAA,EACvB,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,YAAY,MAAM,YAAY;AAAA,EAC9B,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,YAAY,MAAM,YAAY;AAAA,EAC9B,iBAAiB,MAAM,OAAO;AAAA,EAC9B,QAAQ;AAAA,EACR,QAAQ,MAAM,MAAM;AAAA,EACpB,QAAQ;AAAA,EACR,WAAW;AAAA,IACT,iBAAiB,MAAM,OAAO;AAAA,EAAA;AAAA,EAEhC,WAAW;AAAA,IACT,SAAS;AAAA,EAAA;AAAA,EAEX,YAAY,CAAA;AAAA,EACZ,cAAc;AAAA,IACZ,SAAS;AAAA,EAAA;AAEb,EAAE;AAUF,SAAS,mBAAmB;AAAA,EAC1B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,QAAM,EAAE,EAAA,IAAM,eAAA;AAEd,QAAM,kBAAkB,kBAAkB,EAAE,MAAM;AAClD,QAAM,iBAAiB,iBAAiB,EAAE,UAAU;AAEpD,WAAS,qBAAqB,OAA4C;AACxE,UAAM,eAAA;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA,cAAY,SAAS,UAAU,kBAAkB;AAAA,MAEjD,8BAAC,MAAA,EAAK,MAAM,SAAS,UAAU,eAAe,YAAA,CAAa;AAAA,IAAA;AAAA,EAAA;AAGjE;"}

package/dist/esm/Tabs/TabScrollIndicators.js

@@ -0,0 +1,132 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import React__default from "react";
+import TabScrollIndicator from "./TabScrollIndicator.js";
+const TabScrollIndicatorContainer = styled.div(({ width, theme }) => ({
+  position: "absolute",
+  width,
+  height: theme.space.x5
+}));
+class TabScrollIndicators extends React__default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      contentHiddenLeft: this.contentHiddenLeft(),
+      contentHiddenRight: this.contentHiddenRight()
+    };
+    this.handleIndicatorClick = this.handleIndicatorClick.bind(this);
+    this.getScrollLeftValueByTabIndex = this.getScrollLeftValueByTabIndex.bind(this);
+    this.contentHiddenLeft = this.contentHiddenLeft.bind(this);
+    this.contentHiddenRight = this.contentHiddenRight.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+    this.handleResize = this.handleResize.bind(this);
+  }
+  componentDidMount() {
+    this.conditionallyUpdateState();
+  }
+  getScrollLeftValueByTabIndex(index) {
+    const { tabRefs } = this.props;
+    let scrollLeftSum = 0;
+    for (let i = 0; i < index; i += 1) {
+      scrollLeftSum += tabRefs[i].offsetWidth;
+    }
+    return scrollLeftSum;
+  }
+  contentHiddenRight() {
+    const { tabContainerRef } = this.props;
+    if (!tabContainerRef.current) {
+      return false;
+    }
+    return tabContainerRef.current.scrollLeft + tabContainerRef.current.offsetWidth < tabContainerRef.current.scrollWidth;
+  }
+  contentHiddenLeft() {
+    const { tabContainerRef } = this.props;
+    if (!tabContainerRef.current) {
+      return false;
+    }
+    return tabContainerRef.current.scrollLeft !== 0 && tabContainerRef.current.offsetWidth < tabContainerRef.current.scrollWidth;
+  }
+  findLastVisibleTab() {
+    const { tabContainerRef, tabRefs, indicatorWidth } = this.props;
+    const rightMarker = tabContainerRef.current.scrollLeft + tabContainerRef.current.offsetWidth - indicatorWidth;
+    let scrollLeftSum = 0;
+    for (let i = 0; i < tabRefs.length; i += 1) {
+      scrollLeftSum += tabRefs[i].offsetWidth;
+      if (rightMarker <= scrollLeftSum) {
+        return i;
+      }
+    }
+    return null;
+  }
+  findFirstVisibleTab() {
+    const { tabContainerRef, tabRefs, indicatorWidth } = this.props;
+    const leftMarker = tabContainerRef.current.scrollLeft + indicatorWidth;
+    let scrollLeftSum = 0;
+    for (let i = 0; i < tabRefs.length; i += 1) {
+      scrollLeftSum += tabRefs[i].offsetWidth;
+      if (leftMarker <= scrollLeftSum) {
+        return i;
+      }
+    }
+    return null;
+  }
+  handleScroll() {
+    this.conditionallyUpdateState();
+  }
+  handleResize() {
+    this.setState({
+      contentHiddenLeft: this.contentHiddenLeft(),
+      contentHiddenRight: this.contentHiddenRight()
+    });
+  }
+  conditionallyUpdateState() {
+    const { contentHiddenLeft, contentHiddenRight } = this.state;
+    const currentContentHiddenLeft = this.contentHiddenLeft();
+    const currentContentHiddenRight = this.contentHiddenRight();
+    if (currentContentHiddenLeft !== contentHiddenLeft) {
+      this.setState({ contentHiddenLeft: currentContentHiddenLeft });
+    }
+    if (currentContentHiddenRight !== contentHiddenRight) {
+      this.setState({ contentHiddenRight: currentContentHiddenRight });
+    }
+  }
+  handleIndicatorClick(side) {
+    const { tabRefs, tabContainerRef, indicatorWidth } = this.props;
+    if (side === "right") {
+      const lastVisibleTab = this.findLastVisibleTab();
+      const scrollLeft = this.getScrollLeftValueByTabIndex(lastVisibleTab) - indicatorWidth;
+      this.applyScrollLeft(scrollLeft);
+    } else {
+      const firstVisibleTab = this.findFirstVisibleTab();
+      const scrollLeft = this.getScrollLeftValueByTabIndex(firstVisibleTab) + indicatorWidth + tabRefs[firstVisibleTab].offsetWidth - tabContainerRef.current.offsetWidth;
+      this.applyScrollLeft(scrollLeft);
+    }
+  }
+  applyScrollLeft(scrollLeft) {
+    const { tabContainerRef } = this.props;
+    tabContainerRef.current.scroll({ left: scrollLeft, behavior: "smooth" });
+  }
+  render() {
+    const { tabContainerRef, indicatorWidth, children } = this.props;
+    const { contentHiddenLeft, contentHiddenRight } = this.state;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(TabScrollIndicatorContainer, { width: tabContainerRef.current ? tabContainerRef.current.offsetWidth : 0, children: [
+        contentHiddenLeft && /* @__PURE__ */ jsx(TabScrollIndicator, { width: indicatorWidth, side: "left", onClick: this.handleIndicatorClick }),
+        contentHiddenRight && /* @__PURE__ */ jsx(TabScrollIndicator, { width: indicatorWidth, side: "right", onClick: this.handleIndicatorClick })
+      ] }),
+      children({
+        handleScroll: this.handleScroll,
+        handleResize: this.handleResize
+      })
+    ] });
+  }
+}
+TabScrollIndicators.defaultProps = {
+  tabRefs: void 0,
+  tabContainerRef: void 0,
+  indicatorWidth: 40
+};
+export {
+  TabScrollIndicators as default
+};
+//# sourceMappingURL=TabScrollIndicators.js.map

package/dist/esm/Tabs/TabScrollIndicators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabScrollIndicators.js","sources":["../../../src/Tabs/TabScrollIndicators.tsx"],"sourcesContent":["// @ts-nocheck\nimport { styled } from \"styled-components\";\nimport React from \"react\";\nimport TabScrollIndicator from \"./TabScrollIndicator\";\nconst TabScrollIndicatorContainer = styled.div(({ width, theme }) => ({\n  position: \"absolute\",\n  width,\n  height: theme.space.x5,\n}));\ntype TabScrollIndicatorsProps = {\n  tabRefs?: {\n    offsetWidth?: number;\n  }[];\n  tabContainerRef?: {\n    current?: object;\n  };\n  indicatorWidth?: number;\n};\ntype TabScrollIndicatorsState = {\n  contentHiddenLeft: boolean;\n  contentHiddenRight: boolean;\n};\nclass TabScrollIndicators extends React.Component<TabScrollIndicatorsProps, TabScrollIndicatorsState> {\n  constructor(props) {\n    super(props);\n    this.state = {\n      contentHiddenLeft: this.contentHiddenLeft(),\n      contentHiddenRight: this.contentHiddenRight(),\n    };\n    this.handleIndicatorClick = this.handleIndicatorClick.bind(this);\n    this.getScrollLeftValueByTabIndex = this.getScrollLeftValueByTabIndex.bind(this);\n    this.contentHiddenLeft = this.contentHiddenLeft.bind(this);\n    this.contentHiddenRight = this.contentHiddenRight.bind(this);\n    this.handleScroll = this.handleScroll.bind(this);\n    this.handleResize = this.handleResize.bind(this);\n  }\n  componentDidMount() {\n    this.conditionallyUpdateState();\n  }\n  getScrollLeftValueByTabIndex(index) {\n    const { tabRefs } = this.props;\n    let scrollLeftSum = 0;\n    for (let i = 0; i < index; i += 1) {\n      scrollLeftSum += tabRefs[i].offsetWidth;\n    }\n    return scrollLeftSum;\n  }\n  contentHiddenRight() {\n    const { tabContainerRef } = this.props;\n    if (!tabContainerRef.current) {\n      return false;\n    }\n    return (\n      tabContainerRef.current.scrollLeft + tabContainerRef.current.offsetWidth < tabContainerRef.current.scrollWidth\n    );\n  }\n  contentHiddenLeft() {\n    const { tabContainerRef } = this.props;\n    if (!tabContainerRef.current) {\n      return false;\n    }\n    return (\n      tabContainerRef.current.scrollLeft !== 0 &&\n      tabContainerRef.current.offsetWidth < tabContainerRef.current.scrollWidth\n    );\n  }\n  findLastVisibleTab() {\n    const { tabContainerRef, tabRefs, indicatorWidth } = this.props;\n    const rightMarker = tabContainerRef.current.scrollLeft + tabContainerRef.current.offsetWidth - indicatorWidth;\n    let scrollLeftSum = 0;\n    for (let i = 0; i < tabRefs.length; i += 1) {\n      scrollLeftSum += tabRefs[i].offsetWidth;\n      if (rightMarker <= scrollLeftSum) {\n        return i;\n      }\n    }\n    return null;\n  }\n  findFirstVisibleTab() {\n    const { tabContainerRef, tabRefs, indicatorWidth } = this.props;\n    const leftMarker = tabContainerRef.current.scrollLeft + indicatorWidth;\n    let scrollLeftSum = 0;\n    for (let i = 0; i < tabRefs.length; i += 1) {\n      scrollLeftSum += tabRefs[i].offsetWidth;\n      if (leftMarker <= scrollLeftSum) {\n        return i;\n      }\n    }\n    return null;\n  }\n  handleScroll() {\n    this.conditionallyUpdateState();\n  }\n  handleResize() {\n    this.setState({\n      contentHiddenLeft: this.contentHiddenLeft(),\n      contentHiddenRight: this.contentHiddenRight(),\n    });\n  }\n  conditionallyUpdateState() {\n    const { contentHiddenLeft, contentHiddenRight } = this.state;\n    const currentContentHiddenLeft = this.contentHiddenLeft();\n    const currentContentHiddenRight = this.contentHiddenRight();\n    if (currentContentHiddenLeft !== contentHiddenLeft) {\n      this.setState({ contentHiddenLeft: currentContentHiddenLeft });\n    }\n    if (currentContentHiddenRight !== contentHiddenRight) {\n      this.setState({ contentHiddenRight: currentContentHiddenRight });\n    }\n  }\n  handleIndicatorClick(side) {\n    const { tabRefs, tabContainerRef, indicatorWidth } = this.props;\n    if (side === \"right\") {\n      const lastVisibleTab = this.findLastVisibleTab();\n      const scrollLeft = this.getScrollLeftValueByTabIndex(lastVisibleTab) - indicatorWidth;\n      this.applyScrollLeft(scrollLeft);\n    } else {\n      const firstVisibleTab = this.findFirstVisibleTab();\n      const scrollLeft =\n        this.getScrollLeftValueByTabIndex(firstVisibleTab) +\n        indicatorWidth +\n        tabRefs[firstVisibleTab].offsetWidth -\n        tabContainerRef.current.offsetWidth;\n      this.applyScrollLeft(scrollLeft);\n    }\n  }\n  applyScrollLeft(scrollLeft) {\n    const { tabContainerRef } = this.props;\n    tabContainerRef.current.scroll({ left: scrollLeft, behavior: \"smooth\" });\n  }\n  render() {\n    const { tabContainerRef, indicatorWidth, children } = this.props;\n    const { contentHiddenLeft, contentHiddenRight } = this.state;\n    return (\n      <>\n        <TabScrollIndicatorContainer width={tabContainerRef.current ? tabContainerRef.current.offsetWidth : 0}>\n          {contentHiddenLeft && (\n            <TabScrollIndicator width={indicatorWidth} side=\"left\" onClick={this.handleIndicatorClick} />\n          )}\n          {contentHiddenRight && (\n            <TabScrollIndicator width={indicatorWidth} side=\"right\" onClick={this.handleIndicatorClick} />\n          )}\n        </TabScrollIndicatorContainer>\n        {children({\n          handleScroll: this.handleScroll,\n          handleResize: this.handleResize,\n        })}\n      </>\n    );\n  }\n}\n\nTabScrollIndicators.defaultProps = {\n  tabRefs: undefined,\n  tabContainerRef: undefined,\n  indicatorWidth: 40,\n};\n\nexport default TabScrollIndicators;\n"],"names":["React"],"mappings":"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"}

package/dist/esm/Tabs/Tabs.js

@@ -0,0 +1,118 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import propTypes from "../node_modules/.pnpm/@styled-system_prop-types@5.1.5_styled-system@5.1.5/node_modules/@styled-system/prop-types/dist/index.esm.js";
+import ResizeDetector from "../node_modules/.pnpm/react-resize-detector@9.1.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-resize-detector/build/index.esm.js";
+import { getSubset } from "../utils/subset.js";
+import FocusManager from "../utils/ts/FocusManager.js";
+import { ComponentVariantContext } from "../NDSProvider/ComponentVariantContext.js";
+import TabContainer from "./TabContainer.js";
+import TabScrollIndicators from "./TabScrollIndicators.js";
+import Box from "../Box/Box.js";
+const _Tabs = class _Tabs extends React__default.Component {
+  constructor(props) {
+    super(props);
+    const { defaultSelectedIndex } = this.props;
+    this.state = {
+      selectedIndex: defaultSelectedIndex === null ? null : defaultSelectedIndex
+    };
+    this.tabContent = [];
+    this.tabContainerRef = React__default.createRef();
+    this.tabRefs = [];
+    this.handleTabClick = this.handleTabClick.bind(this);
+    this.getTabs = this.getTabs.bind(this);
+  }
+  getSelectedIndex() {
+    const { selectedIndex: controlledSelectedIndex } = this.props;
+    const { selectedIndex: uncontrolledSelectedIndex } = this.state;
+    return controlledSelectedIndex === void 0 ? uncontrolledSelectedIndex : controlledSelectedIndex;
+  }
+  getTabs(setFocusToTab, focusedIndex, handleArrowNavigation) {
+    const { fitted, children, onTabClick, variant } = this.props;
+    const componentVariant = variant ?? this.context.size;
+    const selectedIndex = this.getSelectedIndex();
+    const tabs = React__default.Children.toArray(children);
+    return tabs.filter((tab) => Boolean(tab)).map((tab, index) => {
+      return React__default.cloneElement(tab, {
+        onClick: (e) => {
+          setFocusToTab(index);
+          if (tab?.props?.onClick) {
+            tab?.props?.onClick(e);
+          }
+          if (onTabClick) {
+            onTabClick(e, index);
+          } else {
+            this.handleTabClick(index);
+          }
+        },
+        onFocus: (e) => {
+          e.stopPropagation();
+        },
+        onKeyDown: handleArrowNavigation,
+        index,
+        variant: componentVariant,
+        tabIndex: index === focusedIndex ? 0 : -1,
+        selected: index === selectedIndex,
+        "aria-selected": index === selectedIndex,
+        fullWidth: fitted,
+        ref: (ref) => {
+          this.tabRefs[index] = ref;
+        }
+      });
+    });
+  }
+  getTabContent() {
+    const { children, renderTabContentOnlyWhenSelected } = this.props;
+    const selectedIndex = this.getSelectedIndex();
+    const tabs = React__default.Children.toArray(children);
+    const tabContent = tabs.filter((tab) => Boolean(tab)).map((tab, index) => {
+      const selected = index === selectedIndex;
+      if (renderTabContentOnlyWhenSelected && !selected) {
+        return null;
+      } else {
+        return /* @__PURE__ */ jsx("div", { "aria-hidden": !selected, hidden: !selected, selected, children: tab?.props?.children }, tab.key || tab.label);
+      }
+    });
+    return tabContent;
+  }
+  handleTabClick(index) {
+    this.setState({
+      selectedIndex: index
+    });
+  }
+  render() {
+    const { className } = this.props;
+    const spaceProps = getSubset(this.props, propTypes.space);
+    return /* @__PURE__ */ jsxs(Box, { position: "relative", children: [
+      /* @__PURE__ */ jsx(FocusManager, { refs: this.tabRefs, defaultFocusedIndex: this.getSelectedIndex(), children: ({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => /* @__PURE__ */ jsx(TabScrollIndicators, { tabRefs: this.tabRefs, tabContainerRef: this.tabContainerRef, children: ({ handleScroll, handleResize }) => /* @__PURE__ */ jsxs(
+        TabContainer,
+        {
+          className,
+          role: "tablist",
+          onScroll: handleScroll,
+          ref: this.tabContainerRef,
+          ...spaceProps,
+          children: [
+            /* @__PURE__ */ jsx(ResizeDetector, { handleWidth: true, onResize: handleResize }),
+            this.getTabs(setFocusedIndex, focusedIndex, handleArrowNavigation)
+          ]
+        }
+      ) }) }),
+      this.getTabContent()
+    ] });
+  }
+};
+_Tabs.contextType = ComponentVariantContext;
+let Tabs = _Tabs;
+Tabs.defaultProps = {
+  children: null,
+  className: void 0,
+  selectedIndex: void 0,
+  defaultSelectedIndex: null,
+  renderTabContentOnlyWhenSelected: false,
+  fitted: false,
+  onTabClick: void 0
+};
+export {
+  Tabs as default
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/esm/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../src/Tabs/Tabs.tsx"],"sourcesContent":["// @ts-nocheck\nimport React from \"react\";\nimport propTypes from \"@styled-system/prop-types\";\nimport ReactResizeDetector from \"react-resize-detector\";\nimport { getSubset } from \"../utils/subset\";\nimport FocusManager from \"../utils/ts/FocusManager\";\nimport { Box } from \"../Box\";\nimport { ComponentVariant, ComponentVariantContext } from \"../NDSProvider/ComponentVariantContext\";\nimport TabContainer from \"./TabContainer\";\nimport TabScrollIndicators from \"./TabScrollIndicators\";\n\nexport type TabsProps = React.PropsWithChildren<{\n  className?: string;\n  selectedIndex?: number;\n  variant?: ComponentVariant;\n  defaultSelectedIndex?: number;\n  renderTabContentOnlyWhenSelected?: boolean;\n  fitted?: boolean;\n  onTabClick?: (...args: any[]) => any;\n}>;\n\nexport type TabsState = {\n  selectedIndex: any;\n};\n\nclass Tabs extends React.Component<TabsProps, TabsState> {\n  static contextType = ComponentVariantContext;\n\n  constructor(props) {\n    super(props);\n    const { defaultSelectedIndex } = this.props;\n    this.state = {\n      selectedIndex: defaultSelectedIndex === null ? null : defaultSelectedIndex,\n    };\n    this.tabContent = [];\n    this.tabContainerRef = React.createRef();\n    this.tabRefs = [];\n    this.handleTabClick = this.handleTabClick.bind(this);\n    this.getTabs = this.getTabs.bind(this);\n  }\n\n  getSelectedIndex() {\n    const { selectedIndex: controlledSelectedIndex } = this.props;\n    const { selectedIndex: uncontrolledSelectedIndex } = this.state;\n    return controlledSelectedIndex === undefined ? uncontrolledSelectedIndex : controlledSelectedIndex;\n  }\n\n  getTabs(setFocusToTab, focusedIndex, handleArrowNavigation) {\n    const { fitted, children, onTabClick, variant } = this.props;\n\n    const componentVariant = variant ?? this.context.size;\n\n    const selectedIndex = this.getSelectedIndex();\n    const tabs = React.Children.toArray(children);\n\n    return tabs\n      .filter((tab) => Boolean(tab))\n      .map((tab, index) => {\n        return React.cloneElement(tab, {\n          onClick: (e) => {\n            setFocusToTab(index);\n            if (tab?.props?.onClick) {\n              tab?.props?.onClick(e);\n            }\n            if (onTabClick) {\n              onTabClick(e, index);\n            } else {\n              this.handleTabClick(index);\n            }\n          },\n          onFocus: (e) => {\n            e.stopPropagation();\n          },\n          onKeyDown: handleArrowNavigation,\n          index,\n          variant: componentVariant,\n          tabIndex: index === focusedIndex ? 0 : -1,\n          selected: index === selectedIndex,\n          \"aria-selected\": index === selectedIndex,\n          fullWidth: fitted,\n          ref: (ref) => {\n            this.tabRefs[index] = ref;\n          },\n        });\n      });\n  }\n\n  getTabContent() {\n    const { children, renderTabContentOnlyWhenSelected } = this.props;\n    const selectedIndex = this.getSelectedIndex();\n\n    const tabs = React.Children.toArray(children);\n\n    const tabContent = tabs\n      .filter((tab) => Boolean(tab))\n      .map((tab, index) => {\n        const selected = index === selectedIndex;\n        if (renderTabContentOnlyWhenSelected && !selected) {\n          return null;\n        } else {\n          return (\n            <div aria-hidden={!selected} hidden={!selected} selected={selected} key={tab.key || tab.label}>\n              {tab?.props?.children}\n            </div>\n          );\n        }\n      });\n\n    return tabContent;\n  }\n\n  handleTabClick(index) {\n    this.setState({\n      selectedIndex: index,\n    });\n  }\n\n  render() {\n    const { className } = this.props;\n    const spaceProps = getSubset(this.props, propTypes.space);\n    return (\n      <Box position=\"relative\">\n        <FocusManager refs={this.tabRefs} defaultFocusedIndex={this.getSelectedIndex()}>\n          {({ focusedIndex, setFocusedIndex, handleArrowNavigation }) => (\n            <TabScrollIndicators tabRefs={this.tabRefs} tabContainerRef={this.tabContainerRef}>\n              {({ handleScroll, handleResize }) => (\n                <TabContainer\n                  className={className}\n                  role=\"tablist\"\n                  onScroll={handleScroll}\n                  ref={this.tabContainerRef}\n                  {...spaceProps}\n                >\n                  <ReactResizeDetector handleWidth onResize={handleResize} />\n                  {this.getTabs(setFocusedIndex, focusedIndex, handleArrowNavigation)}\n                </TabContainer>\n              )}\n            </TabScrollIndicators>\n          )}\n        </FocusManager>\n        {this.getTabContent()}\n      </Box>\n    );\n  }\n}\n\nTabs.defaultProps = {\n  children: null,\n  className: undefined,\n  selectedIndex: undefined,\n  defaultSelectedIndex: null,\n  renderTabContentOnlyWhenSelected: false,\n  fitted: false,\n  onTabClick: undefined,\n};\n\nexport default Tabs;\n"],"names":["React","ReactResizeDetector"],"mappings":"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"}