@popsure/dirty-swan 0.33.0 → 0.33.2

package/dist/esm/components/multiDropzone/index.test.js

@@ -0,0 +1,201 @@
+import { b as __awaiter, c as __generator, _ as __assign, a as __rest } from '../../tslib.es6-5bc94358.js';
+import { jsx } from 'react/jsx-runtime';
+import { c as customRender, a as act, f as fireEvent } from '../../customRender-4157fcff.js';
+import '../../extend-expect-46bdce4a.js';
+import MultiDropZone from './index.js';
+import 'react';
+import 'react-dom';
+import '../../_commonjsHelpers-e7f67fd8.js';
+import 'react-dom/test-utils';
+import 'os';
+import 'tty';
+import '../../index-e9e37a34.js';
+import '../../index-dd80248b.js';
+import '../../index-21239ab0.js';
+import '../../index-fb46adf9.js';
+import '../../style-inject.es-1f59c1d0.js';
+import '../../index-6ced5532.js';
+
+var mockOnFileSelect = jest.fn();
+var mockOnRemoveFile = jest.fn();
+var file = new File(['DummyFile'], 'dummy.png', { type: 'image/png' });
+var inputTestId = "ds-drop-input";
+var spinnerTestId = "ds-filecell-spinner";
+var progressbarTestId = "ds-filecell-progressbar";
+var uploadedFilesMock = {
+    id: "123",
+    name: "File name",
+    progress: 100,
+    type: "jpg",
+};
+var setup = function (_a) {
+    var _b = _a.uploadedFiles, uploadedFiles = _b === void 0 ? [] : _b, _c = _a.uploading, uploading = _c === void 0 ? false : _c, rest = __rest(_a, ["uploadedFiles", "uploading"]);
+    return customRender(jsx(MultiDropZone, __assign({}, rest, { uploadedFiles: uploadedFiles, uploading: uploading, onFileSelect: mockOnFileSelect, onRemoveFile: mockOnRemoveFile }), void 0));
+};
+describe('MultiDropzone component', function () {
+    it("should call onFileSelect on files change", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, getByTestId, user, files;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _a = setup({}), getByTestId = _a.getByTestId, user = _a.user;
+                    files = [file, file];
+                    return [4 /*yield*/, user.upload(getByTestId(inputTestId), files)];
+                case 1:
+                    _b.sent();
+                    expect(mockOnFileSelect).toHaveBeenCalledWith(files);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    describe('Error states', function () {
+        it("should show max files error message", function () {
+            var screen = setup({
+                maxFiles: 1,
+                uploadedFiles: [uploadedFilesMock, __assign(__assign({}, uploadedFilesMock), { id: "222" })],
+            });
+            expect(screen.getByText("Too many files.")).toBeVisible();
+        });
+        it("should show max file size error message", function () { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, getByTestId, getByText, user, bigFile;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = setup({ maxSize: 10 }), getByTestId = _a.getByTestId, getByText = _a.getByText, user = _a.user;
+                        bigFile = file;
+                        Object.defineProperty(bigFile, 'size', { value: 1024 });
+                        return [4 /*yield*/, user.upload(getByTestId(inputTestId), [bigFile])];
+                    case 1:
+                        _b.sent();
+                        expect(getByText("File is too large. It must be less than 10 Bytes.")).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it("should show wrong filetype error message", function () { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, getByTestId, getByText, input;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = setup({ accept: "document" }), getByTestId = _a.getByTestId, getByText = _a.getByText;
+                        input = getByTestId(inputTestId);
+                        return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    // Keeping fireevent to emulate file change like drop
+                                    // Using userevent.upload doesn't work since input has an accept/html validation
+                                    fireEvent.change(input, { target: { files: [file] } });
+                                    return [2 /*return*/];
+                                });
+                            }); })];
+                    case 1:
+                        _b.sent();
+                        expect(getByText("File type must be one of DOC, DOCX, PDF")).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it("should remove wrong filetype error message", function () { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, getByAltText, getByTestId, queryByText, user, input;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = setup({ accept: "document" }), getByAltText = _a.getByAltText, getByTestId = _a.getByTestId, queryByText = _a.queryByText, user = _a.user;
+                        input = getByTestId(inputTestId);
+                        return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    // Keeping fireevent to emulate file change like drop
+                                    // Using userevent.upload doesn't work since input has an accept/html validation
+                                    fireEvent.change(input, { target: { files: [file] } });
+                                    return [2 /*return*/];
+                                });
+                            }); })];
+                    case 1:
+                        _b.sent();
+                        return [4 /*yield*/, user.click(getByAltText("remove"))];
+                    case 2:
+                        _b.sent();
+                        expect(queryByText("File type must be one of DOC, DOCX, PDF")).not.toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('Copy text', function () {
+        it("should show uploader text", function () {
+            var screen = setup({});
+            expect(screen.getByText("Choose file or drag & drop")).toBeInTheDocument();
+        });
+        it("should show uploader text translated", function () {
+            var instructionsText = "Drag drop file";
+            var screen = setup({
+                textOverrides: { instructionsText: instructionsText }
+            });
+            expect(screen.getByText(instructionsText)).toBeInTheDocument();
+        });
+        it("should show image accept file type label", function () {
+            var screen = setup({ accept: "image" });
+            expect(screen.getByText("Supports HEIC, BMP, JPEG, JPG, PNG")).toBeInTheDocument();
+        });
+        it("should show document accept file type label", function () {
+            var screen = setup({ accept: "document" });
+            expect(screen.getByText("Supports DOC, DOCX, PDF")).toBeInTheDocument();
+        });
+        it("should custom document accept file type label", function () {
+            var screen = setup({ accept: {
+                    "application/pdf": [".pdf"],
+                    "image/jpg": [".jpg"],
+                } });
+            expect(screen.getByText("Supports PDF, JPG")).toBeInTheDocument();
+        });
+        it("should show disabled text if is uploading", function () {
+            var screen = setup({ uploading: true });
+            expect(screen.getByText("Please wait while uploading file...")).toBeInTheDocument();
+        });
+    });
+    describe('Uploaded files', function () {
+        it("should show uploaded files", function () {
+            var screen = setup({
+                uploadedFiles: [uploadedFilesMock],
+            });
+            expect(screen.getByText(uploadedFilesMock.name)).toBeInTheDocument();
+        });
+        it("should call onRemoveFile with uploaded file id", function () {
+            var screen = setup({
+                uploadedFiles: [uploadedFilesMock],
+            });
+            screen.getByAltText("remove").click();
+            expect(mockOnRemoveFile).toBeCalledWith(uploadedFilesMock.id);
+        });
+        it("should show uploaded file with uploading label", function () {
+            var screen = setup({
+                uploadedFiles: [__assign(__assign({}, uploadedFilesMock), { progress: 50 })],
+            });
+            expect(screen.getByText("Uploading...")).toBeInTheDocument();
+        });
+        it("should show uploaded file with progress bar", function () {
+            var screen = setup({
+                uploadedFiles: [__assign(__assign({}, uploadedFilesMock), { progress: 50 })],
+            });
+            expect(screen.getByTestId(progressbarTestId)).toBeInTheDocument();
+        });
+        it("should show uploaded file with no progress bar", function () {
+            var screen = setup({
+                uploadedFiles: [__assign(__assign({}, uploadedFilesMock), { progress: 50, showProgressBar: false })],
+            });
+            expect(screen.queryByTestId(progressbarTestId)).not.toBeInTheDocument();
+        });
+        it("should show uploaded file with loading spinner", function () {
+            var screen = setup({
+                uploadedFiles: [__assign(__assign({}, uploadedFilesMock), { progress: 50, showLoadingSpinner: true })],
+            });
+            expect(screen.getByTestId(spinnerTestId)).toBeInTheDocument();
+        });
+        it("should show uploaded file with no loading spinner", function () {
+            var screen = setup({
+                uploadedFiles: [__assign(__assign({}, uploadedFilesMock), { progress: 50, showLoadingSpinner: false })],
+            });
+            expect(screen.queryByTestId(spinnerTestId)).not.toBeInTheDocument();
+        });
+    });
+});
+//# sourceMappingURL=index.test.js.map

package/dist/esm/components/multiDropzone/index.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/multiDropzone/index.test.tsx"],"sourcesContent":["import { act, fireEvent, render } from '../../util/testUtils';\nimport '@testing-library/jest-dom';\n\nimport MultiDropzone, { MultiDropzoneProps } from '.';\n\nconst mockOnFileSelect = jest.fn();\nconst mockOnRemoveFile = jest.fn();\nconst file = new File(['DummyFile'], 'dummy.png', { type: 'image/png' });\n\nconst inputTestId = \"ds-drop-input\";\nconst spinnerTestId = \"ds-filecell-spinner\";\nconst progressbarTestId = \"ds-filecell-progressbar\";\nconst uploadedFilesMock = {\n   id: \"123\",\n   name: \"File name\",\n   progress: 100,\n   type: \"jpg\",\n};\n\nconst setup = ({\n uploadedFiles = [],\n uploading = false,\n ...rest\n}: Partial<MultiDropzoneProps>) => {\n  return render(\n    <MultiDropzone\n      {...rest}\n      uploadedFiles={uploadedFiles}\n      uploading={uploading}\n      onFileSelect={mockOnFileSelect}\n      onRemoveFile={mockOnRemoveFile}\n    />\n  );\n};\n\ndescribe('MultiDropzone component', () => {\n  it(\"should call onFileSelect on files change\", async () => {\n    const { getByTestId, user } = setup({});\n    const files = [file, file];\n\n    await user.upload(getByTestId(inputTestId), files);\n\n    expect(mockOnFileSelect).toHaveBeenCalledWith(files);\n  });\n\n  describe('Error states', () => {\n    it(\"should show max files error message\", () => {\n      const screen = setup({\n        maxFiles: 1,\n        uploadedFiles: [uploadedFilesMock, {\n          ...uploadedFilesMock,\n          id: \"222\"\n        }],\n      });\n  \n      expect(screen.getByText(\"Too many files.\")).toBeVisible();\n    });\n\n    it(\"should show max file size error message\", async () => {\n      const { getByTestId, getByText, user } = setup({ maxSize: 10 });\n      const bigFile = file;\n      Object.defineProperty(bigFile, 'size', { value: 1024 });\n\n      await user.upload(getByTestId(inputTestId), [bigFile]);\n\n      expect(\n        getByText(\"File is too large. It must be less than 10 Bytes.\")\n      ).toBeInTheDocument();\n    });\n\n    it(\"should show wrong filetype error message\", async () => {\n      const { getByTestId, getByText } = setup({ accept: \"document\" });\n      const input = getByTestId(inputTestId);\n\n      await act(async () => {\n        // Keeping fireevent to emulate file change like drop\n        // Using userevent.upload doesn't work since input has an accept/html validation\n        fireEvent.change(input, { target: { files: [file] } });\n      });\n\n      expect(\n        getByText(\"File type must be one of DOC, DOCX, PDF\")\n      ).toBeInTheDocument();\n    });\n\n    it(\"should remove wrong filetype error message\", async () => {\n      const { getByAltText, getByTestId, queryByText, user } = setup({ accept: \"document\" });\n      const input = getByTestId(inputTestId);\n\n      await act(async () => {\n        // Keeping fireevent to emulate file change like drop\n        // Using userevent.upload doesn't work since input has an accept/html validation\n        fireEvent.change(input, { target: { files: [file] } });\n      });\n\n      await user.click(getByAltText(\"remove\"));\n\n      expect(queryByText(\"File type must be one of DOC, DOCX, PDF\")).not.toBeInTheDocument();\n    });\n  });\n\n  describe('Copy text', () => {\n    it(\"should show uploader text\", () => {\n      const screen = setup({});\n\n      expect(screen.getByText(\"Choose file or drag & drop\")).toBeInTheDocument();\n    });\n\n    it(\"should show uploader text translated\", () => {\n      const instructionsText = \"Drag drop file\";\n      const screen = setup({\n        textOverrides: { instructionsText }\n      });\n\n      expect(screen.getByText(instructionsText)).toBeInTheDocument();\n    });\n\n    it(\"should show image accept file type label\", () => {\n      const screen = setup({ accept: \"image\" });\n\n      expect(\n        screen.getByText(\"Supports HEIC, BMP, JPEG, JPG, PNG\")\n      ).toBeInTheDocument();\n    });\n\n    it(\"should show document accept file type label\", () => {\n      const screen = setup({ accept: \"document\" });\n\n      expect(\n        screen.getByText(\"Supports DOC, DOCX, PDF\")\n      ).toBeInTheDocument();\n    });\n\n    it(\"should custom document accept file type label\", () => {\n      const screen = setup({ accept: {\n        \"application/pdf\": [\".pdf\"],\n        \"image/jpg\": [\".jpg\"],\n      } });\n\n      expect(\n        screen.getByText(\"Supports PDF, JPG\")\n      ).toBeInTheDocument();\n    });\n\n    it(\"should show disabled text if is uploading\", () => {\n      const screen = setup({ uploading: true });\n\n      expect(\n        screen.getByText(\"Please wait while uploading file...\")\n      ).toBeInTheDocument();\n    });\n  });\n\n  describe('Uploaded files', () => {\n    it(\"should show uploaded files\", () => {\n      const screen = setup({\n        uploadedFiles: [uploadedFilesMock],\n      });\n\n      expect(\n        screen.getByText(uploadedFilesMock.name)\n      ).toBeInTheDocument();\n    });\n\n    it(\"should call onRemoveFile with uploaded file id\", () => {\n      const screen = setup({\n        uploadedFiles: [uploadedFilesMock],\n      });\n\n      screen.getByAltText(\"remove\").click();\n\n      expect(mockOnRemoveFile).toBeCalledWith(uploadedFilesMock.id);\n    });\n\n    it(\"should show uploaded file with uploading label\", () => {\n      const screen = setup({\n        uploadedFiles: [{ ...uploadedFilesMock, progress: 50 }],\n      });\n\n      expect(screen.getByText(\"Uploading...\")).toBeInTheDocument();\n    });\n\n    it(\"should show uploaded file with progress bar\", () => {\n      const screen = setup({\n        uploadedFiles: [{\n          ...uploadedFilesMock,\n          progress: 50,\n        }],\n      });\n\n      expect(screen.getByTestId(progressbarTestId)).toBeInTheDocument();\n    });\n\n    it(\"should show uploaded file with no progress bar\", () => {\n      const screen = setup({\n        uploadedFiles: [{\n          ...uploadedFilesMock,\n          progress: 50,\n          showProgressBar: false\n        }],\n      });\n\n      expect(screen.queryByTestId(progressbarTestId)).not.toBeInTheDocument();\n    });\n\n    it(\"should show uploaded file with loading spinner\", () => {\n      const screen = setup({\n        uploadedFiles: [{\n          ...uploadedFilesMock,\n          progress: 50,\n          showLoadingSpinner: true\n        }],\n      });\n\n      expect(screen.getByTestId(spinnerTestId)).toBeInTheDocument();\n    });\n\n    it(\"should show uploaded file with no loading spinner\", () => {\n      const screen = setup({\n        uploadedFiles: [{\n          ...uploadedFilesMock,\n          progress: 50,\n          showLoadingSpinner: false\n        }],\n      });\n\n      expect(screen.queryByTestId(spinnerTestId)).not.toBeInTheDocument();\n    });\n  });\n});\n"],"names":["render","_jsx","MultiDropzone"],"mappings":"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"}

package/dist/esm/components/segmentedControl/index.js

@@ -0,0 +1,42 @@
+import { _ as __assign } from '../../tslib.es6-5bc94358.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
+
+var css_248z = ".style-module_background-container__2Gjka {\n  position: relative;\n  display: inline-block;\n  background-color: var(--ds-primary-100);\n  border-radius: 8px;\n  padding: 0 8px;\n}\n\n.style-module_chip-container__7XeKn {\n  display: flex;\n  align-items: center;\n}\n\n.style-module_chip__3rgLT {\n  cursor: pointer;\n  z-index: 2;\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n.style-module_select-chip-background__YCAyw {\n  position: absolute;\n  background-color: white;\n  border-radius: 8px;\n  top: 8px;\n  z-index: 1;\n  transition: width 0.3s, left 0.3s;\n}";
+var styles = {"background-container":"style-module_background-container__2Gjka","chip-container":"style-module_chip-container__7XeKn","chip":"style-module_chip__3rgLT","select-chip-background":"style-module_select-chip-background__YCAyw"};
+styleInject(css_248z);
+
+var SegmentedControl = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, values = _a.values, selectedIndex = _a.selectedIndex, onChange = _a.onChange;
+    var _c = useState({ left: 0, width: 0 }), selectedChipBackgroundWidthLeft = _c[0], setSelectedChipBackgroundWidthLeft = _c[1];
+    var chipContainer = useRef(null);
+    var height = typeof values[0] === 'string' ? 48 : 66;
+    useEffect(function () {
+        var _a;
+        var selectedChip = (_a = chipContainer.current) === null || _a === void 0 ? void 0 : _a.children[selectedIndex];
+        var left = selectedChip.offsetLeft;
+        var width = selectedChip.offsetWidth;
+        setSelectedChipBackgroundWidthLeft({ left: left, width: width });
+    }, [selectedIndex]);
+    return (jsx("div", __assign({ className: className }, { children: jsxs("div", __assign({ className: styles['background-container'] }, { children: [jsx("div", __assign({ ref: chipContainer, className: styles['chip-container'], style: { height: height + "px" } }, { children: values.map(function (value, index) {
+                        return (jsx("div", __assign({ role: "button", tabIndex: 0, onKeyDown: function (e) {
+                                if (e.key === 'Enter') {
+                                    onChange(index);
+                                }
+                            }, onClick: function () {
+                                onChange(index);
+                            }, className: styles.chip }, { children: typeof value === 'string' ? (jsx("div", __assign({ className: "p-h4 ta-center " + (selectedIndex === index ? '' : 'tc-primary-500') }, { children: value }), void 0)) : (jsxs(Fragment, { children: [jsx("div", __assign({ className: "p-h4 ta-center " + (selectedIndex === index ? '' : 'tc-primary-500') }, { children: value.title }), void 0),
+                                    jsx("div", __assign({ className: "p-p--small ta-center " + (selectedIndex === index
+                                            ? 'tc-grey-500'
+                                            : 'tc-primary-500') }, { children: value.subtitle }), void 0)] }, void 0)) }), typeof value === 'string' ? value : value.title));
+                    }) }), void 0),
+                jsx("div", { className: styles['select-chip-background'], style: {
+                        width: selectedChipBackgroundWidthLeft.width + "px",
+                        height: height - 16 + "px",
+                        left: selectedChipBackgroundWidthLeft.left + "px",
+                    } }, void 0)] }), void 0) }), void 0));
+};
+
+export { SegmentedControl };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/segmentedControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/segmentedControl/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport styles from './style.module.scss';\n\ninterface TitleWithSubtitle {\n  title: string;\n  subtitle: string;\n}\n\nexport interface SegmentedControlProps {\n  className?: string;\n  values: Array<TitleWithSubtitle> | Array<string>;\n  selectedIndex: number;\n  onChange: (selectedIndex: number) => void;\n}\n\nconst SegmentedControl = ({\n  className = '',\n  values,\n  selectedIndex,\n  onChange,\n}: SegmentedControlProps) => {\n  const [selectedChipBackgroundWidthLeft, setSelectedChipBackgroundWidthLeft] =\n    useState<{\n      left: number;\n      width: number;\n    }>({ left: 0, width: 0 });\n  const chipContainer = useRef<HTMLDivElement | null>(null);\n  const height = typeof values[0] === 'string' ? 48 : 66;\n\n  useEffect(() => {\n    const selectedChip = chipContainer.current?.children[\n      selectedIndex\n    ] as HTMLDivElement;\n    const left = selectedChip.offsetLeft;\n    const width = selectedChip.offsetWidth;\n    setSelectedChipBackgroundWidthLeft({ left, width });\n  }, [selectedIndex]);\n\n  return (\n    <div className={className}>\n      <div className={styles['background-container']}>\n        <div\n          ref={chipContainer}\n          className={styles['chip-container']}\n          style={{ height: `${height}px` }}\n        >\n          {values.map((value: TitleWithSubtitle | string, index: number) => {\n            return (\n              <div\n                role=\"button\"\n                tabIndex={0}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') {\n                    onChange(index);\n                  }\n                }}\n                onClick={() => {\n                  onChange(index);\n                }}\n                className={styles.chip}\n                key={typeof value === 'string' ? value : value.title}\n              >\n                {typeof value === 'string' ? (\n                  <div\n                    className={`p-h4 ta-center ${\n                      selectedIndex === index ? '' : 'tc-primary-500'\n                    }`}\n                  >\n                    {value}\n                  </div>\n                ) : (\n                  <>\n                    <div\n                      className={`p-h4 ta-center ${\n                        selectedIndex === index ? '' : 'tc-primary-500'\n                      }`}\n                    >\n                      {value.title}\n                    </div>\n                    <div\n                      className={`p-p--small ta-center ${\n                        selectedIndex === index\n                          ? 'tc-grey-500'\n                          : 'tc-primary-500'\n                      }`}\n                    >\n                      {value.subtitle}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n        </div>\n        <div\n          className={styles['select-chip-background']}\n          style={{\n            width: `${selectedChipBackgroundWidthLeft.width}px`,\n            height: `${height - 16}px`,\n            left: `${selectedChipBackgroundWidthLeft.left}px`,\n          }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport { SegmentedControl };\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;IAeM,gBAAgB,GAAG,UAAC,EAKF;QAJtB,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,QAAQ,cAAA;IAEF,IAAA,KACJ,QAAQ,CAGL,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAJpB,+BAA+B,QAAA,EAAE,kCAAkC,QAI/C,CAAC;IAC5B,IAAM,aAAa,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAC1D,IAAM,MAAM,GAAG,OAAO,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,GAAG,EAAE,GAAG,EAAE,CAAC;IAEvD,SAAS,CAAC;;QACR,IAAM,YAAY,GAAG,MAAA,aAAa,CAAC,OAAO,0CAAE,QAAQ,CAClD,aAAa,CACI,CAAC;QACpB,IAAM,IAAI,GAAG,YAAY,CAAC,UAAU,CAAC;QACrC,IAAM,KAAK,GAAG,YAAY,CAAC,WAAW,CAAC;QACvC,kCAAkC,CAAC,EAAE,IAAI,MAAA,EAAE,KAAK,OAAA,EAAE,CAAC,CAAC;KACrD,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,QACEA,sBAAK,SAAS,EAAE,SAAS,gBACvBC,uBAAK,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,iBAC5CD,sBACE,GAAG,EAAE,aAAa,EAClB,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,KAAK,EAAE,EAAE,MAAM,EAAK,MAAM,OAAI,EAAE,gBAE/B,MAAM,CAAC,GAAG,CAAC,UAAC,KAAiC,EAAE,KAAa;wBAC3D,QACEA,sBACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,UAAC,CAAC;gCACX,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oCACrB,QAAQ,CAAC,KAAK,CAAC,CAAC;iCACjB;6BACF,EACD,OAAO,EAAE;gCACP,QAAQ,CAAC,KAAK,CAAC,CAAC;6BACjB,EACD,SAAS,EAAE,MAAM,CAAC,IAAI,gBAGrB,OAAO,KAAK,KAAK,QAAQ,IACxBA,sBACE,SAAS,EAAE,qBACT,aAAa,KAAK,KAAK,GAAG,EAAE,GAAG,gBAAgB,CAC/C,gBAED,KAAK,YACF,KAENC,4BACED,sBACE,SAAS,EAAE,qBACT,aAAa,KAAK,KAAK,GAAG,EAAE,GAAG,gBAAgB,CAC/C,gBAED,KAAK,CAAC,KAAK,YACR;oCACNA,sBACE,SAAS,EAAE,2BACT,aAAa,KAAK,KAAK;8CACnB,aAAa;8CACb,gBAAgB,CACpB,gBAED,KAAK,CAAC,QAAQ,YACX,YACL,CACJ,KA7BI,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC,KAAK,CA8BhD,EACN;qBACH,CAAC,YACE;gBACNA,aACE,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,EAC3C,KAAK,EAAE;wBACL,KAAK,EAAK,+BAA+B,CAAC,KAAK,OAAI;wBACnD,MAAM,EAAK,MAAM,GAAG,EAAE,OAAI;wBAC1B,IAAI,EAAK,+BAA+B,CAAC,IAAI,OAAI;qBAClD,WACD,aACE,YACF,EACN;AACJ;;;;"}

package/dist/esm/components/segmentedControl/index.stories.js

@@ -0,0 +1,62 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { SegmentedControl } from './index.js';
+import '../../tslib.es6-5bc94358.js';
+import '../../style-inject.es-1f59c1d0.js';
+
+var story = {
+    title: 'JSX/SegmentedControl',
+    component: SegmentedControl,
+    argTypes: {
+        values: {
+            description: 'Array containing the text that needs to be displayed',
+            table: {
+                type: {
+                    summary: 'string[] OR { title: string; subtitle: string;}[]'
+                },
+            },
+        },
+        selectedIndex: {
+            description: 'The currently selected index',
+        },
+        onChange: {
+            action: true,
+            table: {
+                category: "Callbacks",
+            },
+        },
+    },
+    args: {
+        values: ['Earth', 'Sun', 'Moon'],
+        selectedIndex: 0,
+    },
+    parameters: {
+        componentSubtitle: 'A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.',
+    },
+};
+var SegmentedControlStory = function (_a) {
+    var onChange = _a.onChange, selectedIndex = _a.selectedIndex, values = _a.values;
+    var _b = useState(selectedIndex), index = _b[0], setIndex = _b[1];
+    var handleOnChange = function (newIndex) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(newIndex);
+        setIndex(newIndex);
+    };
+    return (jsx(SegmentedControl, { values: values, selectedIndex: index, onChange: handleOnChange }, void 0));
+};
+SegmentedControlStory.storyName = "SegmentedControl";
+var SegmentedControlWithSubtitle = function (_a) {
+    var onChange = _a.onChange, selectedIndex = _a.selectedIndex; _a.values;
+    var _b = useState(selectedIndex), index = _b[0], setIndex = _b[1];
+    var handleOnChange = function (newIndex) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(newIndex);
+        setIndex(newIndex);
+    };
+    return (jsx(SegmentedControl, { values: [
+            { title: 'Basic', subtitle: '€288,65' },
+            { title: 'Premium', subtitle: '€288,65' },
+        ], selectedIndex: index, onChange: handleOnChange }, void 0));
+};
+
+export default story;
+export { SegmentedControlStory, SegmentedControlWithSubtitle };
+//# sourceMappingURL=index.stories.js.map

package/dist/esm/components/segmentedControl/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/components/segmentedControl/index.stories.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { SegmentedControl, SegmentedControlProps } from '.';\n\nconst story = {\n  title: 'JSX/SegmentedControl',\n  component: SegmentedControl,\n  argTypes: {\n    values: {\n      description: 'Array containing the text that needs to be displayed',\n      table: {\n        type: { \n          summary: 'string[] OR { title: string; subtitle: string;}[]'\n        },\n      },\n    },\n    selectedIndex: {\n      description: 'The currently selected index',\n    },\n    onChange: {\n      action: true,\n      table: {\n        category: \"Callbacks\",\n      },\n    },\n  },\n  args: {\n    values: ['Earth', 'Sun', 'Moon'],\n    selectedIndex: 0,\n  },\n  parameters: {\n    componentSubtitle: 'A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button.',\n  },\n};\n\nexport const SegmentedControlStory = ({\n  onChange,\n  selectedIndex,\n  values\n}: SegmentedControlProps) => {\n  const [index, setIndex] = useState(selectedIndex);\n\n  const handleOnChange = (newIndex: number) => {\n    onChange?.(newIndex);\n    setIndex(newIndex);\n  };\n\n  return (\n    <SegmentedControl\n      values={values}\n      selectedIndex={index}\n      onChange={handleOnChange}\n    />\n  );\n};\n\nSegmentedControlStory.storyName = \"SegmentedControl\";\n\nexport const SegmentedControlWithSubtitle = ({\n  onChange,\n  selectedIndex,\n  values\n}: SegmentedControlProps) => {\n  const [index, setIndex] = useState(selectedIndex);\n\n  const handleOnChange = (newIndex: number) => {\n    onChange?.(newIndex);\n    setIndex(newIndex);\n  };\n\n  return (\n    <SegmentedControl\n      values={[\n        { title: 'Basic', subtitle: '€288,65' },\n        { title: 'Premium', subtitle: '€288,65' },\n      ]}\n      selectedIndex={index}\n      onChange={handleOnChange}\n    />\n  );\n};\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;IAGM,KAAK,GAAG;IACZ,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,WAAW,EAAE,sDAAsD;YACnE,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,mDAAmD;iBAC7D;aACF;SACF;QACD,aAAa,EAAE;YACb,WAAW,EAAE,8BAA8B;SAC5C;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE;gBACL,QAAQ,EAAE,WAAW;aACtB;SACF;KACF;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC;QAChC,aAAa,EAAE,CAAC;KACjB;IACD,UAAU,EAAE;QACV,iBAAiB,EAAE,sHAAsH;KAC1I;EACD;IAEW,qBAAqB,GAAG,UAAC,EAId;QAHtB,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,MAAM,YAAA;IAEA,IAAA,KAAoB,QAAQ,CAAC,aAAa,CAAC,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAC;IAElD,IAAM,cAAc,GAAG,UAAC,QAAgB;QACtC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,CAAC;QACrB,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAC;IAEF,QACEA,IAAC,gBAAgB,IACf,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,cAAc,WACxB,EACF;AACJ,EAAE;AAEF,qBAAqB,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAExC,4BAA4B,GAAG,UAAC,EAIrB;QAHtB,QAAQ,cAAA,EACR,aAAa,mBAAA;IAGP,IAAA,KAAoB,QAAQ,CAAC,aAAa,CAAC,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAC;IAElD,IAAM,cAAc,GAAG,UAAC,QAAgB;QACtC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,CAAC;QACrB,QAAQ,CAAC,QAAQ,CAAC,CAAC;KACpB,CAAC;IAEF,QACEA,IAAC,gBAAgB,IACf,MAAM,EAAE;YACN,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE;YACvC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE;SAC1C,EACD,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,cAAc,WACxB,EACF;AACJ;;;;;"}

package/dist/esm/components/segmentedControl/index.test.js

@@ -0,0 +1,63 @@
+import { b as __awaiter, c as __generator } from '../../tslib.es6-5bc94358.js';
+import { jsx } from 'react/jsx-runtime';
+import { c as customRender } from '../../customRender-4157fcff.js';
+import { SegmentedControl } from './index.js';
+import 'react';
+import 'react-dom';
+import '../../_commonjsHelpers-e7f67fd8.js';
+import 'react-dom/test-utils';
+import '../../style-inject.es-1f59c1d0.js';
+
+var setup = function (onChange) {
+    if (onChange === void 0) { onChange = function () { }; }
+    return customRender(jsx(SegmentedControl, { values: ['kg', 'lbs'], onChange: onChange, selectedIndex: 0 }, void 0));
+};
+describe('SegmentedControl component', function () {
+    it('Should provide the index of the clicked button', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var callback, _a, getAllByRole, user, buttons;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    callback = jest.fn();
+                    _a = setup(callback), getAllByRole = _a.getAllByRole, user = _a.user;
+                    buttons = getAllByRole('button');
+                    // click first button
+                    return [4 /*yield*/, user.click(buttons[0])];
+                case 1:
+                    // click first button
+                    _b.sent();
+                    // click second button
+                    return [4 /*yield*/, user.click(buttons[1])];
+                case 2:
+                    // click second button
+                    _b.sent();
+                    expect(callback.mock.calls).toEqual([[0], [1]]);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('Should provide the index of the selected button on key down', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var callback, _a, getAllByRole, user, buttons;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    callback = jest.fn();
+                    _a = setup(callback), getAllByRole = _a.getAllByRole, user = _a.user;
+                    buttons = getAllByRole('button');
+                    // focus first button and select with keyboard
+                    buttons[0].focus();
+                    return [4 /*yield*/, user.keyboard('{enter}')];
+                case 1:
+                    _b.sent();
+                    // focus second button and select with keyboard
+                    buttons[1].focus();
+                    return [4 /*yield*/, user.keyboard('{enter}')];
+                case 2:
+                    _b.sent();
+                    expect(callback.mock.calls).toEqual([[0], [1]]);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});
+//# sourceMappingURL=index.test.js.map

package/dist/esm/components/segmentedControl/index.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.js","sources":["../../../../../src/lib/components/segmentedControl/index.test.tsx"],"sourcesContent":["import { render } from '../../util/testUtils';\n\nimport { SegmentedControl } from '.';\n\nconst setup = (onChange: (selectedIndex: number) => void = () => {}) => {\n  return render(\n    <SegmentedControl\n      values={['kg', 'lbs']}\n      onChange={onChange}\n      selectedIndex={0}\n    />\n  );\n};\n\ndescribe('SegmentedControl component', () => {\n  it('Should provide the index of the clicked button', async () => {\n    const callback = jest.fn();\n    const { getAllByRole, user } = setup(callback);\n    const buttons = getAllByRole('button');\n\n    // click first button\n    await user.click(buttons[0]);\n\n    // click second button\n    await user.click(buttons[1]);\n\n    expect(callback.mock.calls).toEqual([[0], [1]]);\n  });\n\n  it('Should provide the index of the selected button on key down', async () => {\n    const callback = jest.fn();\n    const { getAllByRole, user } = setup(callback);\n    const buttons = getAllByRole('button');\n\n    // focus first button and select with keyboard\n    buttons[0].focus();\n    await user.keyboard('{enter}');\n\n    // focus second button and select with keyboard\n    buttons[1].focus();\n    await user.keyboard('{enter}');\n\n    expect(callback.mock.calls).toEqual([[0], [1]]);\n  });\n});\n"],"names":["render","_jsx"],"mappings":";;;;;;;;;;AAIA,IAAM,KAAK,GAAG,UAAC,QAAoD;IAApD,yBAAA,EAAA,0BAAoD;IACjE,OAAOA,YAAM,CACXC,IAAC,gBAAgB,IACf,MAAM,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,EACrB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,CAAC,WAChB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,4BAA4B,EAAE;IACrC,EAAE,CAAC,gDAAgD,EAAE;;;;;oBAC7C,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;oBACrB,KAAyB,KAAK,CAAC,QAAQ,CAAC,EAAtC,YAAY,kBAAA,EAAE,IAAI,UAAA,CAAqB;oBACzC,OAAO,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;;oBAGvC,qBAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAA;;;oBAA5B,SAA4B,CAAC;;oBAG7B,qBAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAA;;;oBAA5B,SAA4B,CAAC;oBAE7B,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;SACjD,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE;;;;;oBAC1D,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;oBACrB,KAAyB,KAAK,CAAC,QAAQ,CAAC,EAAtC,YAAY,kBAAA,EAAE,IAAI,UAAA,CAAqB;oBACzC,OAAO,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;;oBAGvC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBACnB,qBAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAA;;oBAA9B,SAA8B,CAAC;;oBAG/B,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;oBACnB,qBAAM,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAA;;oBAA9B,SAA8B,CAAC;oBAE/B,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;SACjD,CAAC,CAAC;AACL,CAAC,CAAC"}