@onepercentio/one-ui 0.6.0 → 0.6.3

package/dist/components/Table/Table.js

@@ -1,88 +1,88 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const OneUIProvider_1 = require("../../context/OneUIProvider");
-const Button_1 = __importDefault(require("../Button"));
-const Spacing_1 = __importDefault(require("../Spacing"));
-const UncontrolledTransition_1 = __importDefault(require("../UncontrolledTransition"));
-const Table_module_scss_1 = __importDefault(require("./Table.module.scss"));
-/**
- * A simple table layout
- **/
-function Table({ paginable, heading, order, items, className = "", }) {
-    const transitionRef = (0, react_1.useRef)(null);
-    const { controls: { NextPage = ({ disabled }) => (react_1.default.createElement(Button_1.default, { disabled: disabled, variant: "filled" }, ">")), PrevPage = ({ disabled }) => (react_1.default.createElement(Button_1.default, { disabled: disabled, variant: "filled" }, "<")), }, } = (0, OneUIProvider_1.useOneUIContext)().component.table;
-    const { items: itemsToShow, pages } = (0, react_1.useMemo)(() => {
-        if (paginable) {
-            const numPages = Math.ceil(paginable.totalItems / 5);
-            return {
-                items: items.slice((paginable.currentPage - 1) * 5, (paginable.currentPage - 1) * 5 + 5),
-                pages: numPages,
-            };
-        }
-        return {
-            items: items,
-        };
-    }, [items, paginable === null || paginable === void 0 ? void 0 : paginable.currentPage, paginable === null || paginable === void 0 ? void 0 : paginable.totalItems]);
-    const Wrapper = paginable ? UncontrolledTransition_1.default : "div";
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(TableContext.Provider, { value: {
-                itemsToShow,
-                keys: order,
-                heading,
-            } },
-            react_1.default.createElement(Wrapper, { className: Table_module_scss_1.default.transitionContainer, ref: transitionRef },
-                react_1.default.createElement(TableComp, { key: paginable === null || paginable === void 0 ? void 0 : paginable.currentPage, className: className }))),
-        paginable && paginable.totalItems > 5 ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(Spacing_1.default, { size: "small" }),
-            react_1.default.createElement("div", { className: Table_module_scss_1.default.footer, "data-testid": "controls" },
-                react_1.default.createElement("span", { className: Table_module_scss_1.default.iterable, onClick: () => {
-                        if (!(transitionRef.current instanceof HTMLDivElement))
-                            transitionRef.current.setOrientation("backward");
-                        paginable.togglePage(paginable.currentPage - 1);
-                    } },
-                    react_1.default.createElement(PrevPage, { disabled: paginable.currentPage === 1 })),
-                react_1.default.createElement("span", { className: Table_module_scss_1.default.paging }, `${paginable.currentPage}/${pages}`),
-                react_1.default.createElement("span", { className: Table_module_scss_1.default.iterable, onClick: () => {
-                        if (!(transitionRef.current instanceof HTMLDivElement))
-                            transitionRef.current.setOrientation("forward");
-                        paginable.togglePage(paginable.currentPage + 1);
-                    } },
-                    react_1.default.createElement(NextPage, { disabled: paginable.currentPage === pages }))))) : null));
-}
-exports.default = Table;
-const TableContext = (0, react_1.createContext)(null);
-function TableComp({ className }) {
-    const { itemsToShow, keys, heading } = (0, react_1.useContext)(TableContext);
-    return (react_1.default.createElement("table", { className: `${Table_module_scss_1.default.container} ${className}` },
-        react_1.default.createElement("thead", null,
-            react_1.default.createElement("tr", null, keys.map((key) => (react_1.default.createElement("th", { key: String(key) }, heading[key]))))),
-        react_1.default.createElement("tbody", null, itemsToShow.map((i, index) => (react_1.default.createElement("tr", { key: String(index), className: i.className }, keys.map((key) => (react_1.default.createElement("td", { key: String(key) }, i[key])))))))));
-}
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const OneUIProvider_1 = require("../../context/OneUIProvider");
+const Button_1 = __importDefault(require("../Button"));
+const Spacing_1 = __importDefault(require("../Spacing"));
+const UncontrolledTransition_1 = __importDefault(require("../UncontrolledTransition"));
+const Table_module_scss_1 = __importDefault(require("./Table.module.scss"));
+/**
+ * A simple table layout
+ **/
+function Table({ paginable, heading, order, items, className = "", }) {
+    const transitionRef = (0, react_1.useRef)(null);
+    const { controls: { NextPage = ({ disabled }) => (react_1.default.createElement(Button_1.default, { disabled: disabled, variant: "filled" }, ">")), PrevPage = ({ disabled }) => (react_1.default.createElement(Button_1.default, { disabled: disabled, variant: "filled" }, "<")), }, } = (0, OneUIProvider_1.useOneUIContext)().component.table;
+    const { items: itemsToShow, pages } = (0, react_1.useMemo)(() => {
+        if (paginable) {
+            const numPages = Math.ceil(paginable.totalItems / 5);
+            return {
+                items: items.slice((paginable.currentPage - 1) * 5, (paginable.currentPage - 1) * 5 + 5),
+                pages: numPages,
+            };
+        }
+        return {
+            items: items,
+        };
+    }, [items, paginable === null || paginable === void 0 ? void 0 : paginable.currentPage, paginable === null || paginable === void 0 ? void 0 : paginable.totalItems]);
+    const Wrapper = paginable ? UncontrolledTransition_1.default : "div";
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(TableContext.Provider, { value: {
+                itemsToShow,
+                keys: order,
+                heading,
+            } },
+            react_1.default.createElement(Wrapper, { className: Table_module_scss_1.default.transitionContainer, ref: transitionRef },
+                react_1.default.createElement(TableComp, { key: paginable === null || paginable === void 0 ? void 0 : paginable.currentPage, className: className }))),
+        paginable && paginable.totalItems > 5 ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Spacing_1.default, { size: "small" }),
+            react_1.default.createElement("div", { className: Table_module_scss_1.default.footer, "data-testid": "controls" },
+                react_1.default.createElement("span", { className: Table_module_scss_1.default.iterable, onClick: () => {
+                        if (!(transitionRef.current instanceof HTMLDivElement))
+                            transitionRef.current.setOrientation("backward");
+                        paginable.togglePage(paginable.currentPage - 1);
+                    } },
+                    react_1.default.createElement(PrevPage, { disabled: paginable.currentPage === 1 })),
+                react_1.default.createElement("span", { className: Table_module_scss_1.default.paging }, `${paginable.currentPage}/${pages}`),
+                react_1.default.createElement("span", { className: Table_module_scss_1.default.iterable, onClick: () => {
+                        if (!(transitionRef.current instanceof HTMLDivElement))
+                            transitionRef.current.setOrientation("forward");
+                        paginable.togglePage(paginable.currentPage + 1);
+                    } },
+                    react_1.default.createElement(NextPage, { disabled: paginable.currentPage === pages }))))) : null));
+}
+exports.default = Table;
+const TableContext = (0, react_1.createContext)(null);
+function TableComp({ className }) {
+    const { itemsToShow, keys, heading } = (0, react_1.useContext)(TableContext);
+    return (react_1.default.createElement("table", { className: `${Table_module_scss_1.default.container} ${className}` },
+        react_1.default.createElement("thead", null,
+            react_1.default.createElement("tr", null, keys.map((key) => (react_1.default.createElement("th", { key: String(key) }, heading[key]))))),
+        react_1.default.createElement("tbody", null, itemsToShow.map((i, index) => (react_1.default.createElement("tr", { key: String(index), className: i.className }, keys.map((key) => (react_1.default.createElement("td", { key: String(key) }, i[key])))))))));
+}
 //# sourceMappingURL=Table.js.map

package/dist/components/Table/Table.stories.d.ts

@@ -1,15 +1,15 @@
-import Table, { TableProps } from "./Table";
-declare const _default: {
-    component: typeof Table;
-    title: string;
-};
-export default _default;
-export declare const Paginable: {
-    (args: any): JSX.Element;
-    args: Partial<TableProps<{
-        label1: string;
-        label2: string;
-        label3: string;
-        label4: string;
-    }>>;
-};
+import Table, { TableProps } from "./Table";
+declare const _default: {
+    component: typeof Table;
+    title: string;
+};
+export default _default;
+export declare const Paginable: {
+    (args: any): JSX.Element;
+    args: Partial<TableProps<{
+        label1: string;
+        label2: string;
+        label3: string;
+        label4: string;
+    }>>;
+};

package/dist/components/Table/Table.stories.js

@@ -1,88 +1,88 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Paginable = void 0;
-const react_1 = __importStar(require("react"));
-const OneUIProvider_1 = __importDefault(require("../../context/OneUIProvider"));
-const Button_1 = __importDefault(require("../Button"));
-const Table_1 = __importDefault(require("./Table"));
-exports.default = {
-    component: Table_1.default,
-    title: "Table",
-};
-const Paginable = (args) => {
-    const [page, setPage] = (0, react_1.useState)(1);
-    return (react_1.default.createElement(OneUIProvider_1.default, { config: {
-            component: {
-                table: {
-                    controls: {
-                        NextPage: () => react_1.default.createElement(Button_1.default, { variant: "outline" }, ">"),
-                        PrevPage: () => react_1.default.createElement(Button_1.default, { variant: "outline" }, "<"),
-                    },
-                },
-            },
-        } },
-        react_1.default.createElement("div", { style: { backgroundColor: "lightgray" } },
-            react_1.default.createElement(Table_1.default, Object.assign({}, args, { paginable: {
-                    currentPage: page,
-                    totalItems: args.items.length,
-                    togglePage: setPage,
-                } })))));
-};
-exports.Paginable = Paginable;
-function PreffixObj(preffix) {
-    return {
-        label1: preffix + " example 1",
-        label2: preffix + " example 2",
-        label3: preffix + " example 3",
-        label4: preffix + " example 4'",
-    };
-}
-function Group(page) {
-    return [
-        PreffixObj(page + " First"),
-        PreffixObj(page + " Second"),
-        PreffixObj(page + " Third"),
-        PreffixObj(page + " Fourth"),
-        PreffixObj(page + " Fifth"),
-    ];
-}
-exports.Paginable.args = {
-    heading: {
-        label1: "Label 1",
-        label2: "Label 2",
-        label3: "Label 3",
-    },
-    order: ["label2", "label1", "label3", "label4"],
-    items: [...Group(1), ...Group(2), ...Group(3)],
-    paginable: {
-        currentPage: 1,
-        totalItems: 100,
-    },
-};
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Paginable = void 0;
+const react_1 = __importStar(require("react"));
+const OneUIProvider_1 = __importDefault(require("../../context/OneUIProvider"));
+const Button_1 = __importDefault(require("../Button"));
+const Table_1 = __importDefault(require("./Table"));
+exports.default = {
+    component: Table_1.default,
+    title: "Table",
+};
+const Paginable = (args) => {
+    const [page, setPage] = (0, react_1.useState)(1);
+    return (react_1.default.createElement(OneUIProvider_1.default, { config: {
+            component: {
+                table: {
+                    controls: {
+                        NextPage: () => react_1.default.createElement(Button_1.default, { variant: "outline" }, ">"),
+                        PrevPage: () => react_1.default.createElement(Button_1.default, { variant: "outline" }, "<"),
+                    },
+                },
+            },
+        } },
+        react_1.default.createElement("div", { style: { backgroundColor: "lightgray" } },
+            react_1.default.createElement(Table_1.default, Object.assign({}, args, { paginable: {
+                    currentPage: page,
+                    totalItems: args.items.length,
+                    togglePage: setPage,
+                } })))));
+};
+exports.Paginable = Paginable;
+function PreffixObj(preffix) {
+    return {
+        label1: preffix + " example 1",
+        label2: preffix + " example 2",
+        label3: preffix + " example 3",
+        label4: preffix + " example 4'",
+    };
+}
+function Group(page) {
+    return [
+        PreffixObj(page + " First"),
+        PreffixObj(page + " Second"),
+        PreffixObj(page + " Third"),
+        PreffixObj(page + " Fourth"),
+        PreffixObj(page + " Fifth"),
+    ];
+}
+exports.Paginable.args = {
+    heading: {
+        label1: "Label 1",
+        label2: "Label 2",
+        label3: "Label 3",
+    },
+    order: ["label2", "label1", "label3", "label4"],
+    items: [...Group(1), ...Group(2), ...Group(3)],
+    paginable: {
+        currentPage: 1,
+        totalItems: 100,
+    },
+};
 //# sourceMappingURL=Table.stories.js.map

package/dist/components/Table/Table.test.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/dist/components/Table/Table.test.js

@@ -1,35 +1,35 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
-const _1 = __importDefault(require("."));
-const OneUIProvider_1 = __importDefault(require("../../context/OneUIProvider"));
-it("Should display the footer only when really pageable", () => {
-    const wrapper = (0, react_2.render)(react_1.default.createElement(OneUIProvider_1.default, { config: {
-            component: {
-                table: {
-                    controls: {},
-                },
-            },
-        } },
-        react_1.default.createElement(_1.default, { heading: {}, order: ["id"], items: [
-                {
-                    id: "0",
-                },
-                {
-                    id: "1",
-                },
-                {
-                    id: "2",
-                },
-            ], paginable: {
-                currentPage: 1,
-                togglePage: jest.fn(),
-                totalItems: 3,
-            } })));
-    expect(wrapper.queryByTestId("controls")).toBeNull();
-});
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const _1 = __importDefault(require("."));
+const OneUIProvider_1 = __importDefault(require("../../context/OneUIProvider"));
+it("Should display the footer only when really pageable", () => {
+    const wrapper = (0, react_2.render)(react_1.default.createElement(OneUIProvider_1.default, { config: {
+            component: {
+                table: {
+                    controls: {},
+                },
+            },
+        } },
+        react_1.default.createElement(_1.default, { heading: {}, order: ["id"], items: [
+                {
+                    id: "0",
+                },
+                {
+                    id: "1",
+                },
+                {
+                    id: "2",
+                },
+            ], paginable: {
+                currentPage: 1,
+                togglePage: jest.fn(),
+                totalItems: 3,
+            } })));
+    expect(wrapper.queryByTestId("controls")).toBeNull();
+});
 //# sourceMappingURL=Table.test.js.map

package/dist/components/Table/index.d.ts

@@ -1 +1 @@
-export { default } from './Table';
+export { default } from './Table';

package/dist/components/Table/index.js

@@ -1,9 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var Table_1 = require("./Table");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Table_1 = require("./Table");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
 //# sourceMappingURL=index.js.map

package/dist/components/Tabs/Tabs.d.ts

@@ -1,11 +1,11 @@
-/**
- * Show tabs for toggling between options
- **/
-export default function Tabs<O extends string>({ options, selected, onSelect }: {
-    options: Readonly<{
-        id: O;
-        label: string;
-    }[]>;
-    selected?: O;
-    onSelect: (option: O) => void;
-}): JSX.Element;
+/**
+ * Show tabs for toggling between options
+ **/
+export default function Tabs<O extends string>({ options, selected, onSelect }: {
+    options: Readonly<{
+        id: O;
+        label: string;
+    }[]>;
+    selected?: O;
+    onSelect: (option: O) => void;
+}): JSX.Element;

package/dist/components/Tabs/Tabs.js

@@ -1,49 +1,49 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const Tabs_module_scss_1 = __importDefault(require("./Tabs.module.scss"));
-/**
- * Show tabs for toggling between options
- **/
-function Tabs({ options, selected, onSelect }) {
-    const selectedRef = (0, react_1.useRef)(null);
-    const guideRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        guideRef.current.style['opacity'] = selectedRef.current ? "1" : "0";
-        guideRef.current.style['width'] = selectedRef.current ? selectedRef.current.clientWidth + "px" : "0px";
-        guideRef.current.style['left'] = selectedRef.current ? selectedRef.current.offsetLeft + "px" : "initial";
-        guideRef.current.style['top'] = selectedRef.current ? selectedRef.current.offsetTop + selectedRef.current.clientHeight + "px" : "initial";
-    }, [selected]);
-    return react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: Tabs_module_scss_1.default.container },
-            options.map(o => react_1.default.createElement("p", { ref: selected === o.id ? selectedRef : undefined, onClick: () => onSelect(o.id), className: selected === o.id ? Tabs_module_scss_1.default.selected : "", key: o.id, "data-testid": "tab-option" }, o.label)),
-            react_1.default.createElement("div", { ref: guideRef, className: Tabs_module_scss_1.default.guide, "data-testid": "tab-guide" })));
-}
-exports.default = Tabs;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const Tabs_module_scss_1 = __importDefault(require("./Tabs.module.scss"));
+/**
+ * Show tabs for toggling between options
+ **/
+function Tabs({ options, selected, onSelect }) {
+    const selectedRef = (0, react_1.useRef)(null);
+    const guideRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        guideRef.current.style['opacity'] = selectedRef.current ? "1" : "0";
+        guideRef.current.style['width'] = selectedRef.current ? selectedRef.current.clientWidth + "px" : "0px";
+        guideRef.current.style['left'] = selectedRef.current ? selectedRef.current.offsetLeft + "px" : "initial";
+        guideRef.current.style['top'] = selectedRef.current ? selectedRef.current.offsetTop + selectedRef.current.clientHeight + "px" : "initial";
+    }, [selected]);
+    return react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: Tabs_module_scss_1.default.container },
+            options.map(o => react_1.default.createElement("p", { ref: selected === o.id ? selectedRef : undefined, onClick: () => onSelect(o.id), className: selected === o.id ? Tabs_module_scss_1.default.selected : "", key: o.id, "data-testid": "tab-option" }, o.label)),
+            react_1.default.createElement("div", { ref: guideRef, className: Tabs_module_scss_1.default.guide, "data-testid": "tab-guide" })));
+}
+exports.default = Tabs;
 //# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.stories.d.ts

@@ -1,17 +1,17 @@
-import Tabs from "./Tabs";
-declare const _default: {
-    title: string;
-    component: typeof Tabs;
-};
-export default _default;
-export declare const InitialImplementation: {
-    (args: any): JSX.Element;
-    args: Partial<{
-        options: readonly {
-            id: string;
-            label: string;
-        }[];
-        selected?: string | undefined;
-        onSelect: (option: string) => void;
-    }>;
-};
+import Tabs from "./Tabs";
+declare const _default: {
+    title: string;
+    component: typeof Tabs;
+};
+export default _default;
+export declare const InitialImplementation: {
+    (args: any): JSX.Element;
+    args: Partial<{
+        options: readonly {
+            id: string;
+            label: string;
+        }[];
+        selected?: string | undefined;
+        onSelect: (option: string) => void;
+    }>;
+};